Installation
Follow the steps below to get started with your Site Template:
- Open the
Faslush-HTML/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/assets/css- Extra Stylesheets FilesHTML/assets/fonts- Font FilesHTML/assets/images- Images FilesHTML/assets/js- Javacripts FilesHTML/style.css- Main Stylesheet FileHTML/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
Faslush follows a simple coding structure. here is the sample:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title, Fav Icons, Google fonts, Your Stylesheets -->
...
</head>
<body>
<header>
<!-- Header contents -->
...
</header>
<section class="banner-wrapper">
<ul class="banner-slider">
<li>
<!-- Banner slider, Banner contents -->
...
</li>
</ul>
</section>
<main>
<!-- Page contents -->
...
</main>
<footer>
<!-- Footer contents, Footer links, copyright -->
...
</footer>
<!-- back to top, page scroll -->
<a href="#" class="scrollup"> .. </a>
</body>
</html>
Favicons & Apple Touch Icons
You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:
<link rel="shortcut icon" type="image/png" href="assets/images/fav.png" /> <link rel="shortcut icon" type="image/png" href="assets/images/fav.png" />
You can add Apple Touch Icons to your Website using the following code:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Logo Settings
The Logo Container can be found in the Nav Container
<a class="logo" href="index.html">
<img src="assets/images/logo.png" alt="Logo">
</a>
Changing Fonts
Change your Fonts from Google Fonts Library directly if you plan to use a Google Font, You can find the Linking to the Font Files in HTML files within head tag
<!-- GOOGLE FONT --> <link href="https://fonts.googleapis.com/css?family=Bilbo+Swash+Caps%7CDroid+Sans:400,700%7CLibre+Baskerville:400,400i%7CPermanent+Marker%7CCutive+Mono" rel="stylesheet">
By default, Faslush uses Bilbo Swash Caps , Droid Sans, Libre Baskerville are used from Google Fonts Library.
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:
-
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. -
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 is 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
-
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. -
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.
-
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.
gZip Compression & Browser Caching
Image Compression & Optimization
CSS & jQuery Minifications
Content Delivery Network
Fast Web Hosting Servers
Header
You can choose the headers while creating your pages. Default Header with a transparent Background color which turns Stickey after a little scrolling. Simply follow the structure below:
Header 1
<header class="header-1 first-menu menu-offcanvas" data-spy="affix" data-offset-top="300">
<div class="outer-wrap">
<div class="logo-wrap">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" alt="Logo">
<!-- <span class="site-header">Faslush</span> -->
</a>
</div>
<!--logo wrap-->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 header-cover">
<button type="button" class="nav-trigger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--button-->
<nav class="menu off">
<button type="button" class="close-trigger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--button-->
<div class="container">
<div class="row sec-gap">
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">Home</h5>
<ul class="menu-list">
<li><a href="index.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">Shop</h5>
<ul class="menu-list">
<li><a href="06-fashlush-collection-full.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">Pages</h5>
<ul class="menu-list">
<li><a href="20-fashlush-about.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">Blog</h5>
<ul class="menu-list">
<li><a href="23-fashlush-blog-list.html">...</a></li>
</ul>
</div>
</div>
<div class="cupon-banner row slide-up">
<div class="col-md-12 col-sm-12">
<div class="inner">
<h2 class="mb-0 txt-white">... <span class="txt-lg">...</span> ...</h2>
<a href="#" class="btn btn-default">...<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</nav>
<!--full screen nav-->
<div class="header-nav-wrap">
<ul class="header-nav">
<li>
<a href="#" class="search-tigger">
<span class="pe-7s-search icon"></span>
</a>
</li>
<!--search-->
<li>
<a href="#">
<span class="pe-7s-like icon"></span>
<span class="count rounded-crcl">5</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-cart icon"></span>
<span class="count rounded-crcl">10</span>
</a>
<!--widget area-->
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-unlock icon"></span>
<!-- <span class="pe-7s-lock icon"></span> -->
</a>
</li>
</ul>
</div>
<!--header right-->
</div>
</div>
</div>
</header>
Header 2
<header class="header-2" data-spy="affix" data-offset-top="205">
<div class="top-bar outer-wrap bg-dark txt-white">
<div class="row">
<div class="col-md-6 col-sm-6">...</div>
<div class="col-md-6 col-sm-6 text-right">
<ul class="top-bar-menu">
<li>... <i class="fa fa-angle-down"></i></li>
<li>... <i class="fa fa-angle-down"></i>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li>... <i class="fa fa-angle-down"></i>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="outer-wrap">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 header-cover">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" alt="Logo">
<!-- <span class="site-header">Faslush</span> -->
</a>
</div>
<!-- Collect the nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="menu-item-has-children">
<a href="javascript:void(0)">...</a>
<ul class="sub-menu first">
<li><a href="index.html">...</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="header-nav-wrap">
<ul class="header-nav">
<li>
<a href="#" class="search-tigger">
<span class="pe-7s-search icon"></span>
</a>
</li>
<!--search-->
<li>
<a href="#">
<span class="pe-7s-like icon"></span>
<span class="count rounded-crcl">...</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-cart icon"></span>
<span class="count rounded-crcl">...</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-unlock icon"></span>
<!-- <span class="pe-7s-lock icon"></span> -->
</a>
</li>
</ul>
</div>
<!--header right-->
</div>
</div>
</div>
</header>
Header 3
<header class="header-3 first-menu">
<div class="top-bar outer-wrap bg-dark txt-white">
<div class="row">
<div class="col-md-6 col-sm-6">...</div>
<div class="col-md-6 col-sm-6 text-right">
<ul class="top-bar-menu">
<li>... <i class="fa fa-angle-down"></i></li>
<li>... <i class="fa fa-angle-down"></i>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li>... <i class="fa fa-angle-down"></i>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="outer-wrap">
<div class="logo-wrap">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo-white.png" alt="Logo">
<!-- <span class="site-header">Faslush</span> -->
</a>
</div>
<!--logo wrap-->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 header-cover">
<div class="header-left">
<button type="button" class="nav-trigger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">...</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<nav class="menu off">
<button type="button" class="close-trigger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--button-->
<div class="container">
<div class="row sec-gap">
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">...</h5>
<ul class="menu-list">
<li><a href="index.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">Shop</h5>
<ul class="menu-list">
<li><a href="06-fashlush-collection-full.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">...</h5>
<ul class="menu-list">
<li><a href="20-fashlush-about.html">...</a></li>
</ul>
</div>
<div class="col-sm-3 menu-wrap">
<h5 class="menu-title txt-white">...</h5>
<ul class="menu-list">
<li><a href="23-fashlush-blog-list.html">...</a></li>
</ul>
</div>
</div>
<div class="cupon-banner row slide-up">
<div class="col-md-12 col-sm-12">
<div class="inner">
<h2 class="mb-0 txt-white">... <span class="txt-lg">...</span> ...</h2>
<a href="#" class="btn btn-default">... <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</nav>
<!--full screen nav-->
</div>
<!--header left-->
<div class="header-nav-wrap">
<ul class="header-nav">
<li>
<a href="#" class="search-tigger">
<span class="pe-7s-search icon"></span>
</a>
</li>
<!--search-->
<li>
<a href="#">
<span class="pe-7s-like icon"></span>
<span class="count rounded-crcl">5</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-cart icon"></span>
<span class="count rounded-crcl">10</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-unlock icon"></span>
<!-- <span class="pe-7s-lock icon"></span> -->
</a>
</li>
</ul>
</div>
<!--header right-->
</div>
</div>
</div>
</header>
Header 4
<header class="header-1 menu-vertical hdr-stiky" data-spy="affix" data-offset-top="8">
<div class="logo-wrap">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" alt="Logo">
<!-- <span class="site-header">Faslush</span> -->
</a>
</div>
<!--logo wrap-->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 header-cover">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="menu-item-has-children">
<a href="#">...</a>
<ul class="sub-menu">
<li><a href="index.html">...</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="header-nav-wrap">
<ul class="header-nav">
<li>
<a href="#" class="search-tigger">
<span class="pe-7s-search icon"></span>
</a>
</li>
<!--search-->
<li>
<a href="#">
<span class="pe-7s-like icon"></span>
<span class="count rounded-crcl">5</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-cart icon"></span>
<span class="count rounded-crcl">10</span>
</a>
</li>
<!--wish-->
<li>
<a href="#">
<span class="pe-7s-unlock icon"></span>
<!-- <span class="pe-7s-lock icon"></span> -->
</a>
</li>
</ul>
</div>
<!--header right-->
</div>
</div>
</header>
Columns & Grid
Bootstrap Grid
Side Panel
You can add a revealable Side Panel on your Website with Additional Information about your Website. Simply use the Code below:
<div class="col-sm-3 col-xs-12 sidebar">
<div class="widget widget_search">
<input type="search" placeholder="Search...">
<button type="submit"><i class="pe-7s-search"></i></button>
</div>
<!-- search -->
<div class="widget widget_categories">
<h6 class="widget-title">...</h6>
<ul>
<li><a href="#">...</a></li>
</ul>
</div>
<!--categories-->
<div class="widget widget_archive">
<h6 class="widget-title">...</h6>
<ul>
<li><a href="#">...</a></li>
</ul>
</div>
<!--archives-->
<div class="widget widget_recent_entries">
<h6 class="widget-title">Recent Post</h6>
<ul>
<li><a href="#">...</a></li>
</ul>
</div>
<!--recen entries-->
</div>
Helper Classes
We have created some really useful helper classes for you. Here are a few of them:
.pri-font- for font-family 'Droid Sans', sans-serif.sec-font- for font-family 'Libre Baskerville', serif.tri-font- for font-family 'Permanent Marker', cursive.for-font- for font-family 'Bilbo Swash Caps', cursive.sec-gap- for section gap margin-bottom 100px.sec-gap-2- for section gap margin-bottom 50px.overlay- adds overlay to image.txt-ex-lg- for text font-size 100px.txt-ex-lg2- for text font-size 65px.txt-lg- for text font-size 55px.txt-lg2- for text font-size 35px.lh-normal- for line-height 1.1.mb-90- for margin-bottom 90px.mb-80- for margin-bottom 80px.mb-70- for margin-bottom 70px.mb-60- for margin-bottom 60px.mb-55- for margin-bottom 55px.mb-50- for margin-bottom 50px.mb-45- for margin-bottom 45px.mb-40- for margin-bottom 40px.mb-35- for margin-bottom 35px.mb-30- for margin-bottom 30px.mb-25- for margin-bottom 25px.mb-20- for margin-bottom 20px.mb-15- for margin-bottom 15px.mb-10- for margin-bottom 10px.mb-5- for margin-bottom 5px.mb-0- for margin-bottom 0px.pri-pad- for padding 100px top and bottom.pri-pad-b- for padding-bottom 100px.sec-pad- for padding 50px top and bottom.sec-pad-b- for padding-bottom 50px.p-0- for padding 0px
Slider Types & their Options
Faslush includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div>
Blog Setup
Blog List view
<div class="blog-wrap blog-list-wrap sec-gap">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="list sec-gap">
<figure class="mb-40">
<a href="#" class="image-effect">
<img src="assets/images/blog-list-1-fig-1.jpg" alt="">
</a>
</figure>
<div class="content">
<div class="date">
<span class="day sec-font">...</span>
<hr>
...
</div>
<!--date-->
<div class="entry-content">
<div class="entry-tag">
<a href="#">...</a>
</div>
<h2 class="entry-title">
<a href="#">...</a>
</h2>
<div class="content-wrap">
<p>
...
</p>
</div>
<a href="#" class="btn btn-default">...<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!--single blog-->
<nav class="pagination text-center">
<ul class="page-numbers">
<li><a class="prev page-numbers" href="#"><i class="fa fa-angle-left"></i></a></li>
<li><span class="page-numbers current">1</span></li></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Post Types
You can use different types of Post Types:
- Image
- Post images Left aligned
- Post images Right aligned
- Post images Center aligned
- Blockquotes
Comment Types
You can different types of Comments System on Post Single Pages:
- Default
Introduction
Faslush boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Enstruct:
ButtonsCarouselsColumnsCountersDividersGalleriesHeading StylesLists & PanelsMapsMedia EmbedsNavigationsPaginationsBlockquotesResponsiveSectionsSocial IconsTablesThumbnailsToggles
Each of the above mentioned Shortcodes 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 & Parallax
Setup content you want to stand out. You can use Light & Dark Sections or Parallax Images.
Setting up Sections:
Setup your Sections outside the .container element.
Light Section:
<section>
<div class="container">
...
</div>
</section>
Setting up Parallax Sections:
Make sure your Parallax Images are of enough Width & Height, preferably 1920x1230 or above.
<div class="page-title sec-gap">
<div class="parallax-window overlay" data-parallax="scroll" data-image-src="...">
</div>
</div>
Tabs, & Accordions
You can use Tabs, & Accordions in Various Styles and with Different Options to display Below the Fold content.
Tabs
Use the below code to display Tabs:
<div class="product tab-wrap sec-gap">
<div class="tab-wrapper outer-wrap">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#description" role="tab" data-toggle="tab">...</a></li>
<li><a href="#ad-info" data-toggle="tab">...</a></li>
<li><a href="#review" role="tab" data-toggle="tab">...</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="description">...</div>
<!--description-->
<div class="tab-pane" id="ad-info">...</div>
<!--additional info-->
<div class="tab-pane" id="review">...</div>
<!--reivew-->
</div>
</div>
</div>
Note: Make sure you add unique IDs for each Tab Container Items.
Accordions
You can add a Accordion using the Code below:
<div class="help-accordion">
<h3>...</h3>
<div>...</div>
<h3>...</h3>
<div>...</div>
<h3>...</h3>
<div>...</div>
<h3>...</h3>
<div>...</div>
</div>
Note: Make sure you add unique IDs for each accordion Block
Initializing Accordions using Javascript
You would have to Create the Accordions using the most simple & lightweight jQuery script function
<script>
$(".help-accordion").accordion({
heightStyle: "content"
});
</script>
Google Maps
You can add Embedded Google Maps to any Page using the following method:
<iframe src="" frameborder="0"></iframe>
Icons
You can find here the list of icons used in this template
Font AwesomeStroke 7 Icon Font (Icons)
Widgets Setup
Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:
<div class="widget widget_categories mb-30">
<h5 class="widget-title">Categories</h5>
<ul>
<li>...</li>
</ul>
</div>
Info: Most widgets are easy to use & understand and can be checked on the Sidebar & Footer Pages.
CSS & Fonts
Free fonts:
Note: Images used in the demonstration/preview images/screenshots are licensed to their respective owners and are not included in the download. All images used in the preview mode where companies logo are visible are copyrighted to its respective owners/companies. Useage of those images in your end product/project will be solely your responsibility and commercial license will be required from its owners/companies. All images are replaced with placeholder images in download files.
Once again, thank you so much for purchasing this template. As we said at the beginning, We'd be glad to help you if you have any questions relating this template. No guarantees, but we'll do our best to assist. If you have any suggestions on how to improve our templates or documentation please share them!
© 2018 Kaththemes. All Rights Reserved.