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.
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.
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.
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.
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 http://www.egrappler.com you can replace them with your own links.