Installation

Follow the steps below to get started with your Site Template:

Open the Package/HTML Folder 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 Folder plus Main Stylesheet File
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Edua follows a simple coding structure. here is the sample:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>

	<!-- Your Stylesheets, Title
	============================================= -->
	...

</head>
<body>

	<!-- The Loader Before Site Load
	============================================= -->
<div  class="loader">
  ....
</div>

		<!-- Header
		============================================= -->
<header>
</header>

		<!-- Site Content
		============================================= -->
<section>
  <div class="container">
    ...
  </div>
</section>

		<!-- Footer
		============================================= -->
<footer>
  <div class="container">
  ...
  <!-- Copyrights
  ============================================= -->
    <div class="copyright">
      .....
    </div>
  </div>
</footer>


<!-- Your All Scripts will be here
	============================================= -->
	...

</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="icon" href="favicon.png" type="image/png" sizes="16x16">

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">

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of your Website loads in the background & then Reveal show Interactive loaders to your Visitors while your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply remove .loader Class just after the <body> Tag.

You can also add transition effects on any section or any contantent used in the web site for the purpose of smooth loading effects and scrolling. TO use it you have to need just add the .wow and .fedeIn(transition name class which you want to use)

              <div class="wow fadeIn" data-wow-delay="500ms data-wow-speed="300ms">

Logo Settings

The Logo Container can be found in the Header Container

<div class="navbar-header">
 <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo" ></a>
</div>
<!-- for logo on sticky navbar just add the--> 
<div class="navbar-header">
  <a class="navbar-brand logo-scrolled" href="#brand"><img src="images/logo_black.png" alt="logo"></a>
</div>

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 the style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');

and if you want to use font files in HTML the add the files in this way within head tag

<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />

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.

By default, Edua uses roboto, Source Sans Pro, and museo_slab Font fameily: from the 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:

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 .htaccess File 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 of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- 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.
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.

Header

You can choose the headers while creating your Pages. Default Header with a white Background color while turns Stickey after a little scrolling &,you can make header without stickey effect for this just remove the .navbar-sticky Class. also a transparent style header included by using .navbar-fixed Class. Simply follow the structure below:

<nav class="navbar navbar-default navbar-sticky bootsnav">
    <div class="container"> 
    <!-- Start Header Navigation -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
          <i class="fa fa-bars"></i>
        </button>
        <a class="navbar-brand" href="#brand"><img src="images/logo_black.png" alt="logo" class="img-responsive"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-menu">
        <ul class="nav navbar-nav navbar-center" data-in="fadeInDown" data-out="fadeOut">
          <li class="active"><a href="#">Home</a></li>
           .......
        </ul>
      </div>
    </div>   
</nav>

Menu Styles

Default Menu Style which aligns to the right, You can use the Menu just as

<nav class="navbar navbar-default">
	...
</nav>

Page Sub Menu

You can use an Additional Sub Menu on any Page for Intra Navigation purposes.

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
  <ul class="dropdown-menu">
    <li><a href="services.html">Dropdown link</a></li>
    .....
  </ul>
</li>

Note: It is recommended that you place the Page Sub Menu code just below li tag in navigation.

You can also add mega menu dropdown in th e navbar, for this option code will be follow this structure as:

          <li class="dropdown megamenu-fw">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
            <ul class="dropdown-menu megamenu-content" role="menu">
              <li>
                <div class="row">
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 01</a></li>
                         ....
                      </ul>
                    </div>
                  </div>
                  
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title 2</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 02</a></li>
                        ....
                      </ul>
                    </div>
                  </div><!-- end col-3 -->
                  .......
                  </div>    
                  <div class="col-menu col-md-3">
                    ......
                  </div>
                </div>
              </li>
            </ul>
          </li>

Page Titles

Default Page Title style with centered align & and a smmal rounded corner div with navigation to go back home page.

<!--Page header & Title-->
<section class="page_header padding-top">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 page-content">
        <h1>About US</h1>
        <p>tag line will be here</p>
        <div class="page_nav">
          <span>You are here:</span> <a href="index.html">Home</a> <span><i class="fa fa-angle-double-right"></i>About Us</span>
      </div>
      </div>
    </div>
  </div>
</section>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Side Panel

You can add a revealable Side Panel on your Website with Additional Information about your Website. Simply use the Code below:

<aside class="col-sm-4">
  <!--search form-->
 <div class="widget heading_space">
    <form class="widget_search border-radius">
      <div class="input-group">
        <input type="search" class="form-control" placeholder="Search Here" required>
        <i class="input-group-addon icon-icons185"></i>
      </div>
    </form>
  </div>
  <!--its for sidebar posts-->
<div class="widget heading_space">
  <h3 class="bottom20">Featured Courses</h3>
  <div class="media">
    <a class="media-left" href="#."><img src="images/post1.png" alt="post"></a>
    <div class="media-body">
      <h5 class="bottom5">Basic Time Management Course</h5>
      <a href="#." class="btn-primary border_radius bottom5">free</a>
      <!--stylish star ratings-->
      <form class="star_rating">
        <div class="stars">
          <input type="radio" name="star" class="star-1" id="star-01" />
          <label class="star-1" for="star-1">1</label>
          <input type="radio" name="star" class="star-2" id="star-02" />
          <label class="star-2" for="star-2">2</label>
          ......
          <span></span>
        </div>
      </form>
      <span class="name">Michael Windzor</span>
    </div>
  </div>
   .....
</div>
<div class="widget heading_space">
  <h3 class="bottom20">Working Hours</h3>
  <p class="hours"> Monday <span>8:15 am - 5.30 pm</span></p>
  ......
  <p class="hours">Sunday <span><a href="#." class="border_radius text-uppercase">closed</a></span></p>
</div>
<div class="widget heading_space">
  <h3 class="bottom20">Top Tags</h3>
  <ul class="tags">
    <li><a href="#.">Books</a></li>
    ......
  </ul>
</div>
</aside>

Note: Make sure that you add the Side Panel's Code just after the #blog Starts.

Side Panel Position

A Side Panel can be revealed from either Left or Right. The Side Panel is revealed from the Right by default. Edua also gives you option with grey background styled sidebar, for it you have to add the .sidebar class with the aside tag. If you would like to change the Reveal Position of the Side Panel to Left, then you can simply add the .pull-left Class to the <aside> Tag.

<aside class="pull-left">

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

.padding_top - pagdding of 90px on top of sections.
.padding - pagdding of 90px on the top and bottom of sections.
.padding_bottom - pagdding of 90px on the bottom of sections.
.margin_top - margin of 90px on the top of sections.
.margin_bottom - margin of 90px on the bottom of sections.
.padding_half - pagdding of 45px on the top and bottom of sections.
.no-margin - to remove padding or margin on any element.
.heading_space - margin of 45px on the bottom of sections.
.padding_half - pagdding of 45px on the top and bottom of sections.
.half_space - margin of 25px on the bottom of headings
.heading_top - margin of 25px on the top of headings
.heading - creating the border for headings in the sections.
.bg_grey - Grey background color used in web site.
.color -default red color used in website.
.btn_common - For commonly used links / buttons styling with rounded corners.
.overlay - to craete overlay effects.
.tags - used tags in web site.
.category - used categories in web site.

Slider Types & their Options

Edua 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:

Revolution Slider
Owl Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

You can find the Owl Slider related Documentation here.

Read Owl Slider Docs

Blog Setup

Posts use Simple Markup. Use the Code Sample below in the .container Class:

<article class="blog_item padding-bottom-half heading_space">
  <div class="row">
  <!--Blog Post Image from leftside-->
    <div class="col-md-5 col-sm-5 image">
      <img src="images/blog1.jpg" alt="blog">
    </div>
    <div class="col-md-7 col-sm-7">
      <h3>Before Making your Dream Living Room Make 3D Room Model</h3>
      <ul class="comment margin10">
       <li><a href="#.">May 10, 2016</a></li>
       <li><a href="#."><i class="icon-comment"></i> 5</a></li>
      </ul>
      <p class="margin10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab debitis ea est illum ipsa itaque libero optio quasi voluptas! Consequuntur 
      deserunt expedita.</p>
      <p class="margin10">fugiat hic illum porro quidem quis recusandae vero? Aliquid assumenda cum delectus eaque eligendi, enim eum excepturi fugit illum impedit in 
      iste laudantium modi natus […]</p>
      <a class="btn-common button-hover margin10 border-radius" href="blog_detail.html">Read More</a>
    </div>
  </div>
</article>

Post Types

You can use different types of Post Types:

Image
Post images Left aligned
boxed with three columns
Blockquotes

Comment Types

You can different types of Comments System on Post Single Pages:

Default
Wrapped in box

Wrapped in box

Code Sample for Wrapped in box Comments:

<div class="media blog-reply heading_space">
  <div class="pull-left">
    <a href="#.">
      <img src="images/commenter1.jpg" alt="Bianca Reid">
    </a>
  </div>
  <div class="media-body">
  <h4>AYMAN FIKRY</h4>
    <span>Jan 28, 2016 - 10:07 pm</span>
    <p>In sit amet mollis orci, a vehicula est. Mauris ut odio blandit, commodo est nec, finibus quam. Aliquam vel pulvinar metus. Quisque vel 
    dignissim metus, </p>
    <a class="reply" href="#.">LEAVE A REPLY</a>
  </div>
</div>

Portfolio Setup

Edua provides a very elegant way to showcase your work with modern unique grid view. Setting up Portfolio is simple let's see the following codes:

Setting up Portfolio Filter:

<section id="gallery" class="padding">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
         <!--POrtfolio Filters-->
        <div id="project-filter" class="cbp-l-filters-alignRight">
          <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">ALL IMAGES</div>
          <div data-filter=".course" class="cbp-filter-item">COURSES</div>
          <div data-filter=".book" class="cbp-filter-item">BOOKS</div>
          <div data-filter=".event" class="cbp-filter-item">EVENTS</div>
          <div data-filter=".student" class="cbp-filter-item">STUDENTS</div>
          <div data-filter=".teacher" class="cbp-filter-item">TEACHERS</div>
        </div>
      </div>
    </div>
    <!--Main Portfolio Items-->
    <div id="projects" class="cbp">
      <div class="cbp-item course">
        <img src="images/gallery1.jpg" alt="">
        <div class="overlay">
          <div class="centered text-center">
            <a href="images/gallery1.jpg" class="cbp-lightbox opens"> <i class="icon-focus"></i></a> 
          </div>
        </div>
      </div>
      .....
    </div>
  </div>
</section>

Setting up Portfolio Scripts for Filter Functions:

<script type="text/javascript">
	$("#projects").cubeportfolio({
        filters: "#project-filter",
        layoutMode: 'grid',
        defaultFilter: '*',
        animationType: 'slideDelay',
        gapHorizontal: 20,
        gapVertical: 20,
        gridAdjustment: 'responsive',
        displayTypeSpeed: 100,
    });
</script>

Introduction

Edua 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 Edua:

Animations
Buttons
Carousels
Clients
Columns
Counters
Dividers
Icon Boxes
Galleries
Heading Styles
Icon Lists
Lightboxs
Lists & Panels
Maps
Media Embeds
Navigations
Paginations
Pricing Boxes
Promo Boxes
Blockquotes
Responsive
Sections
Social Icons
Tables
Testimonials
Thumbnails
Toggles

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.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Edua. You can use animations on any element you want. Here is the Sample Code:

<div class="wow fadeInLeft"></div>

You can also use delays for your Animations:

<div class="wow fadeInLeft" data-wow-delay="500ms" data-wow-duration="500ms" ></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use with wow class:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

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 1920x1280 or above.

<section id="paralax" >
	<div class="container">
		...
	</div>
</section>

Setting up Parallax Sections Functions:

<script type="text/javascript">
	$("#parallax").parallax("50%", 0.3);
</script>

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="widget">
  <ul class="tabs">
    <li class="active" rel="tab1">Tab 1 </li>
    <li rel="tab2">Tab 2</li>
    <li rel="tab3">Tab 3</li>
  </ul>
  <div class="tab_container">
      <!--Its optional just used whemn you want these tabs truns into accordions on small screens-->
    <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
    <div id="tab1" class="tab_content">
      <!--Tab content any thing you want to fold-->
    </div>
    <div class="clearfix"></div>
    <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
    <div id="tab2" class="tab_content">
      .....
    </div>
    <h3 class="tab_drawer_heading" rel="tab3">Tab 2</h3>
    <div id="tab3" class="tab_content">
       ....
    </div> 
  </div>
</div>

Note: Make sure you add unique IDs for each Tab Container Items.

Initializing Tabs using Javascript

Tabs are initialized using the Standard Minimal Functionality by default, but there might instances you would have to Create the Tabs using the most simple & lightweight jQuery script function


<script>
jQuery(document).ready( function($){
		 // Tabs truns into Accordions 
	  $(".tab_content").hide();
    $(".tab_content:first").show();

  /* if in tab mode */
    $("ul.tabs li").on('click', function() {
		  $(".tab_content").hide();
		  var activeTab = $(this).attr("rel"); 
		  $("#"+activeTab).fadeIn();		
		  
		  $("ul.tabs li").removeClass("active");
		  $(this).addClass("active");

		  $(".tab_drawer_heading").removeClass("d_active");
		  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
	  
    });
	 
	/* if in drawer mode on Mobile Version*/
	$(".tab_drawer_heading").on('click', function() {
       $(".tab_content").hide();
       var d_activeTab = $(this).attr("rel"); 
       $("#"+d_activeTab).fadeIn(1200);
	  
	    $(".tab_drawer_heading").removeClass("d_active");
       $(this).addClass("d_active");
	  
	    $("ul.tabs li").removeClass("active");
	    $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });
	 
});

</script>

Accordions

You can add a Accordion using the Code below:

<div id="faq">
  <div class='faq_wrapper'>
    <ul class='items'>
      <li>
        <a href='#'> Lorem ipsum dolor sit amet, an eripuit laboramus sententiae duo lorem sio?</a>
        <ul class='sub-items'>
          <li>
            <p class="half_space">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look 
            like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search 
            for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
          </li>
        </ul>
      </li>
       .........
    </ul>
  </div>
</div>

Initializing Accordions using Javascript

You would have to Create the Accordions using the most simple & lightweight jQuery script function


<script>
jQuery(document).ready( function($){
		 // Accordions 
		$(".items > li > a").on('click', function(e) {
		  e.preventDefault();
		  var $this = $(this);
		  if ($this.hasClass("expanded")) {
			 $this.removeClass("expanded");
		  } 
		  else {
		  $(".items a.expanded").removeClass("expanded");
		  $this.addClass("expanded");
		  $(".sub-items").filter(":visible").slideUp("normal");
		}
		  $this.parent().children("ul").stop(true, true).slideToggle("normal");
		});
  
	 
});

</script>

Lightbox & Notifications

Setting up Lightboxes:

Adding a .cbp-lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox just follow the structure below with an Easy Setup:

<a class="cbp-lightbox" href="link-to-lightbox-image.jpg"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

Step 1:

Add the Google Maps Specific Scripts before end the <body> Tag

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAOBKD6V47-g_3opmidcmFapb3kSNAR70U"></script>
<script type="text/javascript" src="js/gmaps.min.js"></script>

Step 2:

Add a div by giving an ID map which will contain your Google Map:
```
<div id="map"> </div>
```

Step 3:

Add the Google Maps script with your Specific Options to initialize your Google Maps(as we initialize location marker):

<script type="text/javascript">

	// Initialize Map
	//Contact Map
    if ($("#map").length) {
        var map;
        map = new GMaps({
            el: '#map',
            lat: 51.507309,
            lng: -0.127448
        });
        map.drawOverlay({
            lat: map.getCenter().lat(),
            lng: map.getCenter().lng(),
            layer: 'overlayLayer',
            content: '',
            verticalAlign: 'top',
            horizontalAlign: 'center'
        });

    }

</script>

Pricing Tables

You can add the Pricing tables to any Page using the following setup:

<section id="pricing">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="pricing">
          <div class="pricing_item">
            <h3>Basic</h3>
            <div class="pricing_price"><span class="pricing_currency">$</span>9.90</div>
            <p class="pricing_sentence">Perfect for single freelancers who work by themselves</p>
            <ul class="pricing_list">
              <li>Support forum</li>
              ......
            </ul>
            <a class="btn_common text-center" href="#.">Choose plan</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Icons

You can find here the list of icons used in this template

Icomoon
Font Awesome

Widgets Setup

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:

 <!--Setting up links categories and tags also by follow this widget structure--<
<div class="widget">
  <h4>Widget Title</h4>
  <ul class="widget_links">
    <li><a href="">some content</a></li>
  </ul<
</div>

Info: Most widgets are easy to use & understand and can be checked on the Sidebar & Footer Pages.

Images

jQuery

CSS & Fonts

Bootstrap
Animation
Font-Awesome (Font Icons)
Icomoon (Font Icons)
Owl Carousel
Cubefolio
Google Fonts
Roboto
museo_slab500
museo_slab700
Source-Sans Pro

Installation

HTML Structure

Favicons & Apple Touch Icons

Page Loading Transitions

Logo Settings

Changing Fonts

Website Optimization Tips

gZip Compression & Browser Caching

Image Compression & Optimization

CSS & jQuery Minifications

Content Delivery Network

Fast Web Hosting Servers

Header

Menu Styles

Page Sub Menu

Page Titles

Columns & Grid

Bootstrap Grid

Side Panel

Side Panel Position

Helper Classes

Slider Types & their Options

Revolution Slider

Blog Setup

Post Types

Comment Types

Wrapped in box

Code Sample for Wrapped in box Comments:

Portfolio Setup

Setting up Portfolio Filter:

Setting up Portfolio Scripts for Filter Functions:

Introduction

Animations

Sections & Parallax

Setting up Sections:

Light Section:

Setting up Parallax Sections:

Setting up Parallax Sections Functions:

Tabs, & Accordions

Tabs

Initializing Tabs using Javascript

Accordions

Initializing Accordions using Javascript

Lightbox & Notifications

Setting up Lightboxes:

Google Maps

Step 1:

Step 2:

Step 3:

Pricing Tables

Icons

Widgets Setup

Images

jQuery

CSS & Fonts