Banner Image tutorial

Banner Images Html Template

In this tutorial we will show you how to add in-app links to banner images html template. Click here if you don’t know how to get in-app links.

Default Banner Image Code


        <!-- Banner-1 Starts -->
		<div class="banner1">
			<img src="https://i.imgur.com/vX8mgpc.jpg" class="banner_img" alt="img-1">
		</div>
		<!-- Banner-1 Ends -->
		

Banner Image Code with in-App Link

Suppose your in-app link code is: <a data-offline=”true” data-params=”value_id:644″ data-state=”cms-view”>Custom Page</a>


		<!-- Banner-1 Starts -->
		<div class="banner1">
			<a data-offline="true" data-params="value_id:644" data-state="cms-view">
				<img src="https://i.imgur.com/vX8mgpc.jpg" class="banner_img" alt="img-1">
			</a>	
		</div>
		<!-- Banner-1 Ends -->
		

Note: You just need to put <img> tag between <a> & </a> tags as shown in above example.


Another Example with in-App Links


        <!-- Banner-2 Starts -->
		<div class="banner2">
			<div class="row">
				<div class="col col_left">
					<a data-offline="true" data-params="value_id:642" data-state="contact-view">
						<img src="https://i.imgur.com/lKxAG9I.jpg" class="banner_img" alt="img-2">
					<a>	
				</div>
				<div class="col col_right">
					<a data-offline="true" data-params="value_id:643" data-state="image-list">
						<img src="https://i.imgur.com/dytcRt4.jpg" class="banner_img" alt="img-3">
					<a>		
				</div>
			</div>
		</div>
		<!-- Banner-2 Ends -->
		

For custom requirements: https://apptekz.com/support