Exort Responsive Multipurpose Template

Exort template documentation version 1.1.9


Table of Content


Exort is a Clean & Creative responsive multipurpose template, it is a perfect choice for any type of site like design agency, corporate, restaurant, personal, showsace, blog, magazine, apps gallery, portfolio, ecommerce, product & etc… Exort is built based on bootstrap framework, it is fully responsive & ton of features. With a well sorted documentation & clean commented code, you can customize it as easy as you need

Thanks you for purchasing this template, we will do our best assists on template customization

Files & Directories #back to top

After downloaded the template package, unzip it. You'll find folder named "Exort" and it contain's 26 of HTML files and couple folders:

  • css contains all CSS files
  • js contains all JavaScript files
  • fonts contains FontAwesome & Themify Icon fonts files
  • images all images files
  • blog 12 blog pages
  • portfolio contains 11 portfolio pages
  • pages 9 html pages
  • elements 32 elements html pages
  • shop 10 shop pages
  • php email.php

Html Structure #back to top

Exort template is based on Bootstrap 3.0 Framework. The syntax is simple and easy to understand. You can really easily customize all part of site or build new.

Here is some basic markup

							

Tittle

Content goes here

Content goes here

Content goes here

All of the closing tag comes with remarks, so don worry you will lost.

Using WOW scrolling reveal animation

You can add wow class and pick an animation style in Animate.css to your html element. it will be invisible until the user scrolls to reveal it.
Here is Some Example

You can also use data-wow-duration & data-wow-delay to adjust animation timing.

Using Screen Frame

Add this syntax to body tag

                            
                            
Note: add .pdd-btm-30 or .mrg-btm-30 class to footer tag when using screen frame

Loading style

Exort also offer another option of loading style, replace the below code to the original preloader.

                            
Your Company Name

Css Structure #back to top

Inside Css Folder

You'll found 1 folder and 10 css file here

  1. exculsive-page-css (Folder) included 5 css flie for exclusive pages
    1. agency.css individual css for index-agency.html
    2. corporate.css individual css for index-corporate.html
    3. cuisine.css individual css for index-cuisine.html
    4. freelancer.css individual css for index-freelancer.html
    5. mobile-apps.css individual css for index-apps.html
  2. animate.min.css animated css file
  3. bootstrap.min.css bootstrap framework
  4. font-awesome.min.css FontAwesome css
  5. magnific-popup.css Magnific Popup Lightbox style
  6. main.css Exort theme css
  7. nouislider.min.css nouislider style optional plugin
  8. owl.carousel.css css style for owl carousel slider
  9. responsive.css Exort theme responsive css
  10. themify-icons.css Themify Icon css
  11. YTPlayer.css Youtube video background plugin css

There are usually 9 CSS files used in Exort excepting for some optional plugins (nouislider, revolution slider setting).

                        
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        

The main.css comes with a Table of Contents:

                            /*---------------------------------------------------------------------------
                            [Table Of Contents]
                            
                            1. Font Import
                            2. General CSS
                                 2.1 Typography
                                 2.2 Spacing
                                 2.3 Border
                            3. Layout 
                                 3.1 Frame
                                 3.2 Section
                                 3.3 Background
                                 3.4 Parallax
                                 3.5 Split Box
                            4. Preloader
                            5. Menu
                                 5.1 Logo
                                 5.2 Main Menu
                                 5.3 Dropdown
                                 5.4 Right Nav
                                 5.5 Fullscreen menu 
                                 5.6 Float menu 
                                 5.7 Top Logo 
                                 5.8 Top Menu 
                                 5.9 Side Menu 
                            6. Hero
                                 6.1 Hero Typo
                                 6.2 Hero image & slider
                                 6.3 Hero Video
                                 6.4 Rainnyday effect
                                 6.5 Showcase
                                 6.6 Particles
                            7. Headers
                            8. Infographay
                                 8.1 Infographay Style 1
                                 8.2 Infographay Style 2
                                 8.3 Infographay Style 3
                                 8.4 Infographay Style 4
                                 8.5 Infographay Style 5
                                 8.6 Infographay Style 6
                                 8.7 Infographay Style 7
                            9. Owl Carousel
                                 9.1. Owl Pagination
                                 9.2. Owl Navigation
                            10. Accordions
                            11. Tabs
                                 11.1 Features
                            12. Buttons
                                 12.1 Button Styles
                                 12.2 Button Size
                                 12.3 Social Buttons
                            13. Magnific Popup
                            14. Progress Bar
                            15. Counters
                                 15.1 Countdown
                            16. Message Box
                            17. Portfolio
                                 17.1 Portfolio Style
                                 17.2 Portfolio Grid
                                 17.3 Portfolio filter
                                 17.4 Portfolio Single
                            18. Team
                                 18.1 Team Style 1
                                 18.2 Team Style 2
                                 18.3 Team Style 3
                                 18.4 Team Style 4
                                 18.5 Team Style 5
                            19. Testimonials
                            20. Clients
                            21. Work Flow 
                            22. Pricing Table
                                 22.1 Pricing Style 1
                                 22.2 Pricing Style 2
                                 22.3 Pricing Style 3
                            23. Call To Action
                            24. Blog
                                 24.1 Blog Post 
                                 24.1 Single Post 
                                 24.3 Blog Side bar
                                 24.4 Comment
                            25. Shop
                                 25.1 Product
                                 25.1 Price Range
                                 25.3 Cart
                                 25.4 Checkout	
                                 25.5 Prodcut Gallery	
                                 25.6 Prodcut Details	 
                            26. Contact
                            27. Map
                            28. Footer	
                                 28.1 Footer Widget
                                 28.2 Flickr Widget 
                                 28.3 Link Widget
                                 28.4 Newsletter Widget 
                                 28.5 Tag Widget
                                 28.6 News Widget 
                                 28.7 Contact Widget
                                 28.8 Footer Bottom
                            29. Form
                            30. Back To Top
                            31. Demo
                            
                            ----------------------------------------------------------------------------*/
                        

Every section seperated with remark header

                            /*****************************************************
                            *****************  2. General CSS  *******************
                            *****************************************************/
                            
                            /*===============================
                             =======  2.1 Typograpgy  ======
                            *===============================*/
                        

Note: We strongly recommended users create a new css or js file for customize purpose

Example

                             
                             
                             
                        

Common Css Usage #back to top

There's some css clsss oftenly used in this template

Section

Totals 5 variation for section css
Example :


  • .section - with padding-top 160px & padding-bottom 100px.
  • .section-2 - with padding-top 100px & padding-bottom 100px.
  • .section-3 - with padding-top 75px & padding-bottom 75px.
  • .section-4 - with padding-top 40px & padding-bottom 40px.
  • .section-no-btm - with padding-top 160px & padding-bottom 0px.

Margin

with top, bottom, left, right, horizon, vertical & 0 margin for any direction. Every value range is 5 (from 5px to 125px). Example :

  • .mrg-top-30 - Margin top 30px
  • .mrg-btm-35 - Margin bottom 35px
  • .mrg-vertical-40 - Margin top & bottom 40px.
  • .mrg-left-auto - Margin left auto.
  • .no-magin - All Margin 0px.

Padding

Same format with margin
Example :


  • .pdd-top-30 - padding top 30px
  • .pdd-btm-35 - padding bottom 35px
  • .pdd-vertical-40 - padding top & bottom 40px.
  • .no-padding - All padding 0px.

Background

Example :

  • .bg-dark - background color #3e3e3e.
  • .bg-white - background color #fff.
  • .bg-gray - background color #f8f8f8.
  • .parallax - make image parallax.
  • .parallax-overlay-dark - create a dark transparent cover for image
  • .parallax-overlay-light - create a light transparent cover for image

Font size

Example:

  • .font-size-8 - font size 8px
  • .font-size-9 - font size 9px
  • .font-size-30 - font size 30px.
  • .font-size-35 - font-size-35px.
  • .font-size-70 - font-size-70px.
  • .font-size-80 - font-size-80px.

Letter Spacing

Example :

  • .ls-0 - letter spacing 0px
  • .ls-1 - letter spacing 1px
  • .ls-1-5 -letter spacing 1.5px
  • .ls-2 - letter spacing 2px.
  • .ls-10 -letter spacing 10px
  • .ls-12 - letter spacing 12px.

JavaScript #back to top

Inside js Folder

Exort used some jQuery Plugins, here is the list of item you'll found in js folder

Note: some of the javascript plugins are optional, you can add it into your page any time as you need
  1. revolutionslider (Folder) revolution slider plugin folder. View Inside (optoinal)
  2. bootstrap.min.js Twitter bootstrap framework
  3. email.js Email
  4. google-map.js Google map
  5. imagesloaded.pkgd.min.js Detect when images have been loaded.
  6. isotope.pkgd.min.js A plugin filter & sort magical layouts
  7. jquery.appear.js A plugin for tracking element's appearance in browser viewport
  8. jquery.countdown.min.js Plugin for countdown
  9. jquery.countTo.js A timer plugin
  10. jquery.fitvids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds
  11. jquery.fullPage.min.js A jQuery plugin help you to create full screen pages (optional)
  12. jquery.magnific-popup.min.js Lightbox jQuery plugin
  13. jquery.mb.YTPlayer.js Youtube video background Jquery plugin
  14. jquery.parallax-1.1.3.js parallax plugin
  15. jquery.particleground.js A JavaScript plugin for snazzy background particle systems (optional)
  16. jquery-2.1.4.min.js jQuery v2.1.4
  17. main.js Exort theme Script
  18. nouislider.min.js Range Slider Plugin (optoinal)
  19. owl.carousel.min.js Owl carousel is a multi function slider plugin
  20. rainyday.js create a rainning effect animation (optional)
  21. smoothscroll.js Automatically make same-page links scroll smoothly.
  22. wow.js a jQury plugin that reveals animations when you scroll.

There are usually 17 javascript files used in Exort, located at the bottom of pages, excepting for some optional plugins (nouislider, revolution slider setting).

                        
                            
							
                            
                            
                            
                            
                            
                            
                            
                            
                            
                             
                            
                            
                            
                            
                            
                            
                            
                        

You can also add optional plugin like this (above main.js) :

                            
							
                            
                            
                            
                            
                            
                            
                            
                            
                            
                             
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        

Portfolio #back to top

Creating a portfolio

This is the main code of porfolio

                                 
                        

Portfolio have his own griding system

  1. .col-1 - 1 column
  2. .col-2 - 2 columns
  3. .col-3 - 3 columns
  4. .col-4 - 4 columns
  5. .col-5 - 5 columns

You just have to add these column class to portfolio wrapper, it will turn the portfolio item to columns that you wanted to display. Example for 3 columns layout :

Add .gutter class to make gap between portfolio item. Example :

Masonry

Add .masonry to make portfolio in masonry style :

Sliders #back to top

Exort have 3 type of slider. all of them have their own features

Bootstrap Carousel Slider

Bootstrap Carousel is a built in slider of Twitter Bootstrap Framework, it is very easy to use and customize.

Full width slider Example :

                            

Full Screen slider Example :

                            

Hero Caption Usage

You can use class below to align hero caption positioning.

  1. .hero-caption - a compulsory class for slider or image caption
  2. .caption-center - align caption to horizon center
  3. .caption-left - align caption to left
  4. .caption-right - align caption to right
  5. .caption-height-center - align caption to vertical center
  6. .caption-height-top - align caption to top
  7. .caption-height-btm - align caption to bottom

Here is some Example:


Revolution slider

Revolution Slider is a premium plugin slider that display ur slide in amazing way.

You'll all these file inside the revolution slider folder:

  • css
    • navigation.css
    • settings.css
  • fonts
    • revicons
      • revicons.eot
      • revicons.svg
      • revicons.ttf
      • revicons.woff
  • js
    • jquery.themepunch.revolution.min.js
    • jquery.themepunch.tools.min.js
    • extension
      • revolution.extension.actions.min.js
      • revolution.extension.carousel.min.js
      • revolution.extension.kenburn.min.js
      • revolution.extension.layeranimation.min.js
      • revolution.extension.migration.min.js
      • revolution.extension.navigation.min.min.js
      • revolution.extension.parallax.min.js
      • revolution.extension.slideanims.min.js
      • revolution.extension.video.min.js

Install Revolution slider

Import revolution slider css to head tag.

                            
                            
                        

Import revolution slider javascript to javascript section.

                            
                            
                            
							
                            
                            
                            
                            
                            
                            
                            
                             
                        
Note: You can remove the extension plugin when your site migrated to a server

Setting up Revolution slider

We will suggest you to create a script tag at javascript section to place the revolution slider jQuery script. Example

                            
							
                             
                        

Revolution slider html markup

Here is some basic mark up for revolution slider

                            
                            

For more references please visit the actual Revolution Slider Documentation


Owl Carousel Slider

There are various Owl slider layout type available. Changing the class in wrapper to set your Owl slider layout.

  1. .owl-single - Basic Single column Slide with no pagination & navigation
  2. .owl-single-nav - Single slide with navigation only
  3. .owl-single-pag - Single slide with pagination only
  4. .owl-single-all - Single slide with all controls
  5. .owl-2 - Basic Owl-carousel 2 item
  6. .owl-2-nav - Owl-carousel 2 item with navigation
  7. .owl-2-pag - Owl-carousel 2 item with pagination
  8. .owl-2-all - Owl-carousel 2 item with all control
  9. .owl-3 - Basic Owl-carousel 3 item
  10. .owl-3-nav - Owl-carousel 3 item with navigation
  11. .owl-3-pag - Owl-carousel 3 item with pagination
  12. .owl-3-all - Owl-carousel 3 item with all control
  13. .owl-4 - Basic Owl-carousel 4 item
  14. .owl-4-nav - Owl-carousel 4 item with navigation
  15. .owl-4-pag - Owl-carousel 4 item with pagination
  16. .owl-4-all - Owl-carousel 4 item with all control
  17. .owl-5 - Basic Owl-carousel 5 item
  18. .owl-5-nav - Owl-carousel 5 item with navigation
  19. .owl-5-pag - Owl-carousel 5 item with pagination
  20. .owl-5-all - Owl-carousel 5 item with all control

Example :

                            
                        

For Navigation & pagination style, you can choose class below add into wrapper.

  1. .owl-pagi-1 - Owl pagination style 1
  2. .owl-pagi-2 - Owl pagination style 2
  3. .owl-pagi-2 - Owl pagination style 3
  4. .owl-nav-1 - Owl navigation style 1
  5. .owl-nav-2 - Owl navigation style 2
  6. .owl-nav-3 - Owl navigation style 3
  7. .owl-nav-4 - Owl navigation style 4
  8. .pagi-center - align Owl Pagination to center
  9. .pagi-right - align Owl Pagination to right
  10. .pagi-left - align Owl Pagination to left

Contact Us#back to top

Google Map

Google map html markup

                            
							
                            
                            
Note: you have to import the google map api before creating a map as above.

Open google-map.js under the js folder to setup your map.


Contact Form

Open email.php under php folder replace your email address i line 4

                            $to = "[email protected]";  //Recipient's E-mail
                        

To make the input field required, you can add fill-this class to your input

                            
                        

Sources & Credit #back to top

We would like to thank you to all of the following:

Images

Note: Images are not included in the download file.

Thank you so much for purchasing this template, if you have any questions, please feel free to email us [email protected]. We I'll do our best to assist.

Thanks