Welcome to Attraction - Responsive Landing Page! Thank you for purchasing this product.
If you have any questions that are beyond the scope of this documentation, please feel free to email us via the form on http://www.themeforest.net/user/G10v3.
If you have any comments, please mail us via the form on http://www.themeforest.net/user/G10v3.
Landing Page Installation
It's important to understand that you must have an online server in order to use this landing page. The server can be purchased at many different places around the internet. It's a simple thing: You need to put the files that you purchased somewhere so others can find them online.
Make sure you also change the author and description meta tags with your own.
<meta name="description" content="Attraction is a multipurpose one/multi page HTML template.">
<meta name="author" content="Your Name Here">
Upload to your server
- Select /html folder and then choose the landing page template that you want. As you can see, there are several files/folder.
- Start your FTP client (I recommend FileZilla, which is free) and login to yout server.
- Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file and folder that you have inside the template folder into your FTP client.
- Once the files are done uploading, you can access your website via browser.
Each part of the template is organized into sections. As you can see in the HTML files, each section is independent from the others: this gives you the flexibility to copy/paste/delete sections and create your layout. As an example, the Hero section:
<section class="color-background hero-section">
<div class="col-sm-9 hero-text">
<h2 class="no-margin-bottom">Register to join this amazing event!</h2>
<a href="#register" class="button-dark">Register</a>
<!-- End Hero
Given this example, you can select all the code between start comment (Hero) and end comment (End Hero), then copy/cut and paste between other sections.
Changing the content is very simple, you can search inside the HTML file for the text part you want to edit, and replace it with your own.
"Teaser" section contains the intro background image for each template. To change the image, unlike all the other images, you have to edit style.css file inside the css folder. Look for the following markup, aroud line 355.
background: url(http://placeholt.it/1920x470) no-repeat center center;
Replace the url parameter betweeen brackets with your image path.
Changing the color of the template is really easy, you can literally change the color in few seconds. It only takes two search and replace, one for the main color and one for the hover color.
The template is shipped with 3 color templates: blue, green and orange. As you can see on line 27 of each HTML file, a specific color-name.css is included into the file.
<link rel="stylesheet" href="css/green.css">
You can duplicate or edit one of those files and create your own color template.
Look for primary-color and primary-hover-color in the first comment block. Here you can find the hex codes of the two color, just search and replace with your own colors.
As an example, the primary color hex code of orange.css is #ff6000. Search #ff6000 and replace with #822cde to change the template color into purple.
The logo used in the template examples is plain text, but it can be replaced with an image with an height between 30 and 40px. Make sure to save your logo with a file format that support a transparent background like .png or .gif.
<div class="logo float-left">
<img src="http://placehold.it/200x36" alt="Logo">
<!-- End Logo
In the example above the plain text used as a logo is replaced with an image with a width of 200px and a height of 36px.
As you can see in the HTML files, images of the online preview have been replaced with placeholders, which contains the ideal size of the images. As an example the teaser image have a width of 1920 px and a height of 600px. Exceptions are the images of the gallery section:
<div class="col-sm-3 image-container">
<a href="images/large-image.jpg" rel="fancybox">
<img src="images/small-preview-image.jpg" alt="" class="img-responsive">
The large image in the link doesn't have a precise size, it can be of any size.
In order to change the demo map with your own, you need to replace the src parameter of the iframe inside the map section.
<!-- End Map
- Search for a location on maps.google.com
- Specify the map type you want - select a view type in the bottom left corner of the map.
- Adjust map to desired center and zoom level
- Click on Share and Embed Map
- Copy the embed map link and replace the value of the src parameter