In this tutorial I’ll show you how you can customize the Retina Ready Responsive App Landing Page Website Template – App Landing. You’ll learn
- How to customize the banner in the header
- How to change the slider images for banner
- How to add the products in product sections
- How to add a gallery
- How to customize contact form and E-Mail success/failure messages
- How to add your favorite social media links
Once you’ve downloaded the Responsive App Landing Page HTML Website Template, unzip the contents and open the app-landing-page.html and send_form_email.php files in your favorite text editor and follow the instructions below to customize the template.
How to customize the banner in the header
All the header contents are wrapped within HTML5 <header> tag, locate this <header> tag. The header consists of three parts.
- Background Image
- Banner Text
- Banner Slider
To change the banner image open the style.css file and change the background image in the following code.
1 2 3 | #header {background: url(../img/super.jpg) no-repeat -509px -391px !important;} |
To change to banner text locate the second div with class=”large-6 columns” within <header> and make the necessary changes. Following snippet shows the banner text for the template.
1 2 3 4 5 | <div class="large-6 columns"><h1>Super Landing Page</h1><span class="subheading">Powerful, Stylish and Modern Responsive Landing Page Template.</span><a class="download-btn" href="/web/20140709032220/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/#" target="_blank"></a></div> |
How to change the slider images for banner.
To change the slider images in the banner locate the first div with class=”large-6 columns” within <header> and make the necessary changes. Following snippet shows the banner slider for the template.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="large-6 columns"> <div id="teaser-slider-2"> <div class="flexslider"> <ul class="slides"> <li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""> <img title="" src="/web/20140709032220im_/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/img/slides/iphoneshots-1.jpg" alt="Petrichor - slider"> </li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""> <img title="" src="/web/20140709032220im_/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/img/slides/iphoneshots-2.jpg" alt="Petrichor - slider"> </li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;" class="flex-active-slide"> <img title="" src="/web/20140709032220im_/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/img/slides/iphoneshots.jpg" alt="Petrichor - slider"> </li> </ul> <ul class="flex-direction-nav"><li><a class="flex-prev" href="/web/20140709032220/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/#">Previous</a></li><li><a class="flex-next" href="/web/20140709032220/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/#">Next</a></li></ul></div> </div> </div> |
Note: You don’t need to change anything else other than the images.
How to add the products in product sections
To customize the products section locate the <div> with id=”product”, in the product section you can either use images for your products of simply use HTML markups to build up your products section. The following snippet shows you a sample product section used in the template.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <div id="product" class="section product gray" data-magellan-destination="product"> <div class="row"> <div class="large-12 columns"> <h2>Simple & easy to use landing page template</h2> <span class="subheading">Introducing the landing page template that lets you present your app in a graceful way.</span> <div class="row"> <div class="small-4 columns hints iphone"> <div class="hint hint-left hint-top"> <h3>Modern design</h3> <p>Minimalistic and simple design with maximal emphasis. You will be glad to download this template.</p> <span class="arrow"></span> </div> <div class="hint hint-left hint-bottom"> <h3>Bold and Clean</h3> <p>It is a scientific fact that human can fully focus on just one thing at a time.</p> <span class="arrow"></span> </div> </div> <div class="small-4 columns hints iphone"> <img title="" src="/web/20140709032220im_/https://www.egrappler.com/how-to-customize-app-landing-page-html-template/img/Iphone_Mockup.png" alt=""> </div> <div class="small-4 columns hints iphone"> <div class="hint hint-right hint-top"> <h3>Amazing Design</h3> <p>Because your app deserves an amazing landing page too.</p> <span class="arrow"></span> </div> <div class="hint hint-right hint-bottom"> <h3>Easy to Customize</h3> <p>Try with different backgrounds, colors and font sizes. It's your baby now!</p> <span class="arrow"></span> </div> </div> </div> </div> </div></div> |
How to add a gallery
A sample gallery is already added in the template, you can customize the gallery and add items to it according to your requirements. To customize the gallery locate the <div> element with class=”carousel” within screeshot section(<div> element with id=”screenshot”) and and list items for thumbnails. Following code shows you the sample gallery section used in the template.
How to customize contact form and E-Mail success/failure messages
To change the from email and subject line open the send_form_email.php and edit the 2nd and 3rd line. Also you can change the success and failure messages, locate the <div> element with id=”success” and id=”fail” and edit the messages.
How to add your favorite social media links
Footer section contains three social media links for facebook, twitter and google plus. The templates uses the default links for https://www.egrappler.com you can replace them with your own links.
