Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our ThemeForest account. Thanks so much!
This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.
After unzipping the download pack, you'll find a template folder with all the files.
You can view this template in any browser, you can display or edit the Template without an internet connection.
Now open your FTP Client (like Filezilla) or directly through cpanel, upload the content of the Template on your server root.
Once the files are done uploading go to www.yourdomainname.com/index1.html
All products shortcodes, banners shortcodes, typography, buttons, all form elements, counters, empty spaces, follow icons, examples of opening product popup directly from document or dynamically with ajax requests - are presented for your convenience in elements.html page. Feel free to use the to cinfigure your pages.
This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap.
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
For a simple two column layout, create a .container and add the appropriate number of .col-md* columns.
Given this example, we have .col-md-4 and .col-md-8, making for 12 total columns and a complete row
<div class="container"> <div class="col-md-4">...</div> <div class="col-md-8">...</div> </div>
To nest your content with the default grid, add a new .container and set of .col-md* columns within an existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
<div class="container"> <div class="row"> <div class="col-md-9"> Level 1 column <div class="row"> <div class="col-md-8">Level 2 column</div> <div class="col-md-4">Level 2 column</div> </div> </div> <div class="col-md-3"> Level 1 column </div> </div> </div>
CSS files, that load in <head> section of page in current template are following:
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/idangerous.swiper.css" rel="stylesheet" type="text/css" /> <link href="css/animate.css" rel="stylesheet" type="text/css" /> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Javascript files, that load right before closing <body> tag of page in current template are following:
<script src="js/jquery-2.1.3.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script src="js/wow.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> <script src="js/progressbar.min.js"></script> <script src="js/jquery.animateNumber.min.js"></script> <script src="js/map.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script> <script src="js/contact.form.js"></script> <script src="js/global.js"></script>
Logo in header looks as following:
<a href="home-1.html" id="logo">
<img src="img/main/logo-black.png" alt="" class="logo-black">
<img src="img/main/logo-white.png" alt="" class="logo-white">
</a>
You have two images inside it. One is dark logo, other is white. Hust replace them in images folder or provide your own images but change src="" attribute of images. It is set programmatically that size of your image will scale down to fit the designed size.
Some headers use just one logo, but others change it on scroll. Please select one of our designed headers for your purpose.
Same with footer logo:
<a href="#" class="footer-logo">
<img src="img/main/logo-white.png" alt="">
</a>
Body tag has attribute called "data-theme". It looks like following:
<body data-theme="theme-1"> ... </body>
By changing this attribute from "theme-1" to "theme-8" you will change color look of your website. Also all images in your template must have proper src attribute. We have all images sorted into folders according to every color theme.
Changing layout "with border" and "without border" - add or remove "border" class here:
<div id="content-wrapper" class="border"> ... </div>
Base html structure for swiper sliders looks like this:
<div class="swiper-container" data-autoplay="0" data-loop="0" data-speed="500" data-slides-per-view="responsive" data-xs-slides="1" data-sm-slides="2" data-md-slides="4" data-lg-slides="4">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide">
<!-- Any HTML content of the first slide goes here -->
</div>
<!--Second Slide-->
<div class="swiper-slide">
<!-- Any HTML content of the second slide goes here -->
</div>
<!--Third Slide-->
<div class="swiper-slide">
<!-- Any HTML content of the third slide goes here -->
</div>
<!--Etc..-->
</div>
</div>
The "swiper-container" block above has data-attributes. They mean following:
Javascripts required to display Google map on your page:
<!-- MAP --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script> <script src="js/map.js"></script>
Pay attention, that Google has changed its api policy, and for newly registered domains or localhost on your machine map may require special api access key. Instructions how to obtain it are here - https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html
In HTML Google map looks like this.
<div id="map-canvas" data-lat="40.799194" data-lng="-74.326140" data-zoom="15"></div>
<div class="addresses-block">
<a data-lat="40.799194" data-lng="-74.326140" data-string="1. Here is some address or email or phone or something else..."></a>
</div>
div class="addresses-block" contains a list of <a> tags. Each one is your marker on map and has following attributes:
Javascript for contact forms:
<!-- CONTACT --> <script src="js/contact.form.js"></script>
All contact fields are necessary, except subject.
In contact.form.js file you can modify validation messages:
- this is how error message will look.
msg = 'The following fields should be filled:'
- and this is how "thank you" message will look after successfull validation:
successMessage = "Your email is very important to us. One of our representatives will contact you at first chance."
After form is successfully validated, php action file send_mail.php sends email. Here are two variables which you may like to change.
$mail_to = "yourpersonalemail@gmail.com"; $mail_from = "webmaster@example.com";
$mail_to - your email address, where all messages will be sent.
$mail_from - will display some address in your mail agent, from where message was sent.
All fonts, images, icons used in this template are free for commercial use.
Once again, thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our ThemeForest account.