Follow the steps below to get started with your Site Template:
- Open the
Package/HTMLFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
HTML/css- Extra Stylesheets FolderHTML/images- Images FolderHTML/js- Javacripts FolderHTML/css/main.css- Main Stylesheet File you can also rename it to style.css (for wordpress)HTML/index.html- Index File/Homepage
- You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.
HTML Structure
Vation follows a simple coding structure. here is the sample:
<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="zxx"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>BootStrap HTML5 CSS3 Template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/icomoon.css"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/scrollbar.css"> <link rel="stylesheet" href="css/prettyPhoto.css"> <link rel="stylesheet" href="css/transitions.css"> <link rel="stylesheet" href="css/royalslider.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/color.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body class="tg-home tg-homeone"> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!--************************************ Loader Start *************************************--> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> </div> <!--************************************ Loader End *************************************--> <!--************************************ Wrapper Start *************************************--> <div id="tg-wrapper" class="tg-wrapper tg-haslayout"> <!--************************************ Header Start *************************************--> <header id="tg-header" class="tg-header tg-fixedheader tg-headervone"> <div class="container-fluid"> <div class="row"> </div> </div> </header> <!--************************************ Header End *************************************--> <div class="tg-pushpage"> <!--************************************ Home Slider Start *************************************--> <div id="tg-homeslidervone" class="tg-homeslider royalSlider rsMinW tg-homeslidervone"> </div> <!--************************************ Home Slider End *************************************--> <!--************************************ Main Start *************************************--> <main id="tg-main" class="tg-main tg-haslayout"> <!--************************************ A Creative Agency Start *************************************--> <section class="tg-sectionspace tg-haslayout tg-paddingbottomzero"> <div class="container"> <div class="row"> </div> </div> </section> <!--************************************ A Creative Agency End *************************************--> <!--************************************ A Creative Agency Start *************************************--> <section class="tg-haslayout tg-sectionspace tg-paddingbottomzero"> </section> <!--************************************ A Creative Agency End *************************************--> <!--************************************ Services V One Start *************************************--> <section class="tg-sectionspace tg-haslayout"> <div class="container"> <div class="row"> </div> </div> </section> <!--************************************ Services V One End *************************************--> <!--************************************ Our Main Goal Start *************************************--> <section class="tg-haslayout" data-z-index="2" data-appear-top-offset="600" data-parallax="scroll" data-image-src="images/parallax/bgparallax-03.jpg"> <div class="tg-sectionspace tg-parallax tg-parallaxmaingoal"> <div class="container"> <div class="row"> </div> </div> </div> </section> <!--************************************ Our Main Goal End *************************************--> <!--************************************ Creative Team Start *************************************--> <section class="tg-sectionspace tg-haslayout"> <div class="container"> <div class="row"> </div> </div> </section> <!--************************************ Creative Team End *************************************--> <!--************************************ Client Feedback Start *************************************--> <section class="tg-haslayout" data-z-index="2" data-appear-top-offset="600" data-parallax="scroll" data-image-src="images/parallax/bgparallax-04.jpg"> <div class="tg-sectionspace tg-parallax tg-parallaxclientfeedback"> <div class="container"> <div class="row"> </div> </div> </div> </section> <!--************************************ Client Feedback End *************************************--> <!--************************************ News & Update Start *************************************--> <section class="tg-haslayout" data-z-index="2" data-appear-top-offset="600" data-parallax="scroll" data-image-src="images/parallax/bgparallax-12.jpg"> <div class="tg-sectionspace tg-parallax tg-parallaxnewsupdate"> <div class="container"> <div class="row"> </div> </div> </div> </section> <!--************************************ News & Update End *************************************--> </main> <!--************************************ Main End *************************************--> <!--************************************ Footer Start *************************************--> <footer id="tg-footer" class="tg-footer tg-footervone"> <div class="tg-footercolumns"> <div class="container"> <div class="row"> </div> </div> </div> </footer> <!--************************************ Footer End *************************************--> </div> </div> <!--************************************ Wrapper End *************************************--> <script src="js/vendor/jquery-library.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="https://maps.google.com/maps/api/js?key=AIzaSyCR-KEWAVCn52mSdeVeTqZjtqbmVJyfSus&language=en"></script> <script src="js/jquery-scrolltofixed.js"></script> <script src="js/singlepagenav.jquery.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.vide.min.js"></script> <script src="js/royalslider.min.js"></script> <script src="js/scrollbar.min.js"></script> <script src="js/isotope.pkgd.js"></script> <script src="js/prettyPhoto.js"></script> <script src="js/countdown.js"></script> <script src="js/parallax.js"></script> <script src="js/collapse.js"></script> <script src="js/countTo.js"></script> <script src="js/appear.js"></script> <script src="js/gmap3.js"></script> <script src="js/main.js"></script> </body> </html>
How to use CSS / JS files
CSS and JS both are important part of the website. we've included all the plugins css/js inside main.css, and main.js files with proper commenting to avoid more http request to server and to make website farster.
main.css Inside HTML > CSS you can find main.css which contains all the css.
<link rel="stylesheet" href="css/main.css">
Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as Vation based on bootstrap 3 it is recommended to include bootstrap.css file right after main.css file.
<link rel="stylesheet" href="css/bootstrap.css">
Color.css Inside HTML > CSS you can find color-default.css which is compulsory for website's color scheming it is recommended to include color.css file right after bootstrap.css file. To understand more please refer color schemes section.
<link rel="stylesheet" href="css/color.css">
main.js Inside HTML > JS you can find main.js which contains all the custom and plugins code used in website.
<script src="js/main.js"></script>
Logo Settings
The Logo Container can be found in the Header Container - .tg-logo
<strong class="tg-logo"><a href="index.html"><img src="images/logo.png" alt="company logo here"></a></strong>
Note The Logo Image's maximum width can be 134px and maximum height can be 50px
Color Schemes
You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the css/colors.css file & you are good to go. Follow these quick steps to get going:
Note Please refer README.txt file inside css > theme-colors for color css.
-
Make sure you add the
css/colors.cssstylesheet in your head after the bootstrap.css stylesheets.<head> ... <link rel="stylesheet" href="css/main.css" type="text/css" /> <!-- Here goes your colors.css ============================================= --> <link rel="stylesheet" href="css/colors.css" type="text/css" /> ... </head> - Now simply change the Codes according to your requirements.
Changing Fonts
Change your Fonts on the Fly as we have included fonts in main.css file. Vation uses 3 Fonts namely: Lora Montserrat&Roboto from the Google Fonts Library. You can find the Linking to the Font Files in the main.cssfile.
@import url(https://fonts.googleapis.com/css?family=Lora:400i,700i|Montserrat:300,400,500,600,700|Roboto:100,300,400,500,700,900);
In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.
Website Optimization Tips
A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:
-
gZip Compression & Browser Caching
This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.
gZip Compression & Browser Caching can be enabled using the
.htaccessFile on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server. -
Image Compression & Optimization
We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's
<img>Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of1200pxx800pxin a Content Size of300pxx200pxas this unnecessary. Resize it to300pxx200px - Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
For MAC use ImageOptim
For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's
-
CSS & jQuery Minifications
It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier. -
Content Delivery Network
You can use a CDN to further speed up your website. You can use the CDn to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.
-
Fast Web Hosting Servers
A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.
Columns & Grid
Bootstrap Grid
Slider Types & their Options
Vation includes two sliders. Royal Slider & Owl Slider 2 for you to be used on any Page with 100s of Options.
- Royal Slider
- Owl Slider 2
/* ------------------------------------------------------------------------
MAIN BANNER [royal slider with check slide and count slides function]
------------------------------------------------------------------------ */
if(jQuery('#tg-homeslidervone').length > 0){
var sliderJQ = jQuery('#tg-homeslidervone');
sliderJQ .royalSlider({
arrowsNav: true,
loop: false,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 1920,
autoScaleSliderHeight: 1080,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
autoPlay: false,
slidesSpacing:0,
allowCSS3:false,
transitionType:'move',
globalCaption: false,
deeplinking: {
enabled: true,
change: false
},
imgWidth: 1920,
imgHeight: 1080,
});
/* -------------------------------------
HOME sLIDER V ONE
-------------------------------------- */
var _tg_homeslidersame = jQuery('[id="tg-homeslidervtwo"], [id="tg-homeslidervthree"], [id="tg-homeslidervfour"], [id="tg-homeslidervfive"], [id="tg-homeslidervseven"], [id="tg-homesliderveight"]');
if(_tg_homeslidersame.hasClass('tg-homeslider')){
_tg_homeslidersame.owlCarousel({
items: 1,
nav:true,
loop:true,
dots: true,
autoplay: false,
dotsClass: 'tg-sliderdots',
navClass: ['tg-prev', 'tg-next'],
navContainerClass: 'tg-slidernav',
navText: ['<span class="icon-chevron-left"></span>', '<span class="icon-chevron-right"></span>'],
});
}
Introduction
Vation boasts of a huge number of handy Pages which are quite powerful, flexible, functional & easy to use. Setting up pages is very easy & Self Explanatory. Here is the List of Pages included with Vation:
indexindexv2indexv3indexv4indexv5indexv6indexv7indexv8indexv9indexv10indexv11indexv12404erroraboutusaboutusv2aboutusv3aboutusv4aboutusv5aboutusv6aboutusv7blogv1blogv2blogv3blogv4blogv5blogv6blogv7blogv8blogdetailblogdetailv2blogdetailv3blogdetailv4workv1workv2workv3workv4workv5workv6workv7workdetailv1workdetailv2workdetailv3workdetailv4workdetailv5maintenanceourprocessourservicesshopdetailcartcomingsooncontactuscontactusv2contactusv3contactusv4
Each of the above mentioned Pages are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.
Sections
Setup content you want to stand out. You can use Parallax Images or HTML5 Videos as Sections.
Setting up Sections:
Setup your Sections outside the .container element. sections padding-top and padding-boottom is 80px by default but you can change it by adding handy classes like no-padding, padding-top-20 etc.
Light Section:
<section class="tg-sectionspace tg-haslayout tg-paddingbottomzero"> <div class="container"> <div class="row"> </div> </div> </section>
Google Maps
You can add Embedded Google Maps to any Page using the following setup:
-
Step 1:
Add the Google Maps Specific Scripts in the
<main.js>Tag below thejs/main.jsscript linking:<script src="https://maps.google.com/maps/api/js?key=AIzaSyCR-KEWAVCn52mSdeVeTqZjtqbmVJyfSus&language=en"></script>
-
Step 2:
Add a
divwhich will contain your Google Map:<div id="tg-locationmap" class="tg-locationmap tg-map"></div>
Icons
We've used Font Awesome icons and Icomoon
Version 1.1
Version 1.1 23 October 2017
- Fixed Banner - added favicon - Fixed some minor bugs
Released on 13 October 2017
- Released Vation Template