Thank you for purchasing Ebo template. This documentation will help to know more about template and how is structured and how to use the template features.

Ebo is a template for multi purpose sites built on Bootstrap Framework, AIDA marketing model and Principles of Conversion Centered Design, You can start to use template.html where all main files are already included and ready to use.

Requirements

To be able to use HTML template, you must have the following:

• PHP (for contact page)
• Apache webserver (Windows servers will probably work, but are not supported)
• An FTP tool to upload the files
• Make sure you upload the required assets files/folders listed below:
  • HTML/assets/css - Extra Stylesheets Folder
  • HTML/assets/include - Required PHP Functions Folder
  • HTML/assets/images - Images Folder
  • HTML/assets/js - Javacripts Folder
  • HTML/assets/revolution - revolution hero Folder
  • HTML/assets/css/style.css - Main Stylesheet File
  • HTML/index.html - Index File/Homepage

Installation

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

1. Open the Package/HTML Folder to find all the html Templates Files
2. You will need to Upload these files to localhost server or your Web Server using FTP in order to use it on your Website.
3. Make sure you upload the required files/folders listed below:
   • HTML/assets - Required all file Folder.
   • Select HTML/home-1.html which want to use.
   • change HTML/index.htmlname file to HTML/index.html - Index File

File Structure

unzip the compressed archive to see the following structure:

 Ebo/
  ├── Documentation/
  ├── HTML/
      ├── assets/
          ├── css
          ├── icons
          ├── images
          ├── fonts
          ├── js
          ├── less
          ├── revolution
          └── php
      ├── index(intro)
      ├── home-1.html
      ├── ...
      └── cotact-us.html

Html Structure

we use the bootstrap framework as a framework. You can take a look at bootstrap here and see it's feature in action.

And basic layout of the grids look like:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

If you find that you need to change structure. Scroll down in your html file and find section that you want to change , all section have predefined html comments like below section example.

<!-- Footer
============================================= -->
<footer id="footer1" class="footer-1 text-center bg-dark">
        
    <div class="container">
    
        <div class="row">
        
            <div class="col-md-12">
                
                <!-- Copyrights
                ============================================= -->
                <div class="copyright">
                
                    <p>copyright © 2016 Ebo.</p>
                    
                </div>
                
                <!-- Footer Widget
                ============================================= -->
                <ul class="list-inline social">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                </ul>
                
            </div>
            
        </div>
        
    </div>
            
</footer><!--Footer end-->

CSS Structure

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

Less CSS Structure

Here's a list of Less CSS files I'm using with this template, you can find more information opening each file:

Javascript Structure

The js (scripts) files are loaded in footer. I loaded js Library in the bottom because it will increase the site speed and rendering.

The JS files used in this template are:

Using LESS CSS

To work with less css, Just add to head section in your index.html less library code with main less style file.

<link rel="stylesheet/less" type="text/css" href="assets/less/style.less" />
<script src="assets/js/less.js" type="text/javascript"></script>

Loading Screen

You can use loading screen spinners.

Here's a loading screen I'm using with this template, you can select/change what you need and use it:

<div class="preloader">
	<div class="spinner">
		<div class="bounce1">
		</div>
		<div class="bounce2">
		</div>
		<div class="bounce3">
		</div>
	</div>
</div>

Change Fonts

To change the font, Check head inindex.html then in first go to google fonts choose a font and use the generated code and replace with next code.

<!-- Fonts
============================================= -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100italic,100,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700italic,700,800,800italic,900,900italic%7COpen+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic%7CUbuntu:400,300,300italic,400italic,500,700,500italic,700italic%7CRoboto+Slab:400,100,300,700%7CLora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Next Step : change font family for body in style.css

body { 
	font-family: "Raleway", Arial, sans-serif;/*Change font*/
}
h1,h2,h3,h4,h5,h6{
	font-family:"Ubuntu", Arial, sans-serif;/*Change font*/
}

Change Spacing

we uses helper classes to space elements on Ebo template. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

AVAILABLE CLASSES

/* All margin */
.m-0 {
	margin: 0;
}

.m-xs {
margin:(@baseline/2);
}

.m-sm {
 margin:@baseline;
}

.m-md {
margin:@baseline*2;
}

.m-lg {
margin:@baseline*4;
}

/* top margin */
.mt-0 {
	margin-top: 0;
}

.mt-xs {
margin-top:(@baseline/2);
}

.mt-sm {
 margin-top:@baseline;
}

.mt-md {
margin-top:@baseline*2;
}

.mt-lg {
margin-top:@baseline*4;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-60 {
	margin-top: 60px;
}

.mt-150 {
	margin-top: 150px;
}

/* bottom margin */
.mb-0 {
	margin-bottom: 0 !important;
}

.mb-xs {
margin-bottom:(@baseline/2);
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-sm {
 margin-bottom:@baseline;
}

.mb-md {
margin-bottom:@baseline*2 !important;
}

.mb-lg {
margin-bottom:@baseline*4;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-50 {
	margin-bottom: 50px!important;
}

.mb-60 {
	margin-bottom: 60px!important;
}

.mb-100 {
	margin-bottom: 100px!important;
}

.mb-150 {
	margin-bottom: 150px!important;
}

/* right margin */
.mr-0 {
	margin-right: 0;
}

.mr-xs {
margin-right:(@baseline/2);
}

.mr-sm {
 margin-right:@baseline;
}

.mr-md {
margin-right:@baseline*2;
}

.mr-lg {
margin-right:@baseline*4;
}

.mr-30 {
	margin-right: 30px !important;
}

.mr-50 {
	margin-right: 50px;
}

.mr-60 {
	margin-right: 60px;
}

.mr-150 {
	margin-right: 150px;
}

/* left margin */
.ml-0 {
	margin-left: 0;
}

.ml-xs {
margin-left:(@baseline/2);
}

.ml-sm {
 margin-left:@baseline;
}

.ml-md {
margin-left:@baseline*2;
}

.ml-lg {
margin-left:@baseline*4;
}

.ml-30 {
	margin-left: 30px !important;
}

.ml-50 {
	margin-left: 50px;
}

.ml-60 {
	margin-left: 60px;
}

.ml-150 {
	margin-left: 150px;
}

/* All padding */
.p-0 {
	padding: 0;
}

.p-xs {
padding:(@baseline/2);
}

.p-sm {
 padding:@baseline;
}

.p-md {
padding:@baseline*2;
}

.p-lg {
padding:@baseline*4;
}

/* top padding */
.pt-0 {
	padding-top: 0 !important;
}

.pt-xs {
padding-top:(@baseline/2);
}

.pt-sm {
 padding-top:@baseline;
}

.pt-md {
padding-top:@baseline*2;
}

.pt-lg {
padding-top:@baseline*4;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pt-60 {
	padding-top: 60px;
}

.pt-100 {
	padding-top: 100px !important;
}

.pt-150 {
	padding-top: 150px !important;
}

/* bottom padding */
.pb-0 {
	padding-bottom: 0 !important;
}

.pb-xs {
padding-bottom:(@baseline/2);
}

.pb-sm {
 padding-bottom:@baseline;
}

.pb-md {
padding-bottom:@baseline*2;
}

.pb-lg {
padding-bottom:@baseline*4;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-60 {
	padding-bottom: 60px;
}

.pb-100 {
	padding-bottom: 100px !important;
}

/* right padding */
.pr-0 {
	padding-right: 0;
}

.pr-xs {
padding-right:(@baseline/2);
}

.pr-sm {
 padding-right:@baseline;
}

.pr-md {
padding-right:@baseline*2;
}

.pr-lg {
padding-right:@baseline*4;
}

.pr-15 {
	padding-right: 15px !important;
}

.pr-30 {
	padding-right: 30px !important;
}

.pr-50 {
	padding-right: 50px;
}

.pr-60 {
	padding-right: 60px;
}

.pr-150 {
	padding-right: 150px;
}

/* left padding */
.pl-0 {
	padding-left: 0;
}

.pl-xs {
padding-left:(@baseline/2);
}

.pl-sm {
 padding-left:@baseline;
}

.pl-md {
padding-left:@baseline*2;
}

.pl-lg {
padding-left:@baseline*4;
}

.pl-15 {
	padding-left: 15px;
	;
}

/* Postions */
.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.static {
	position: static;
}

/* Zindex*/
.zindex-1 {
	z-index: 1;
}

.zindex-2 {
	z-index: 2;
}

.zindex-3 {
	z-index: 3;
}

/* Borders */
.border-all {
border:        1px solid @color-theme;
}

.border-top {
border-top:    1px solid @color-theme;
}

.border-bottom {
border-bottom: 1px solid @color-theme;
}

.border-right {
border-right:  1px solid @color-theme;
}

.border-left {
border-left:   1px solid @color-theme;
}

/* Display */
.inline {
	display: inline;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.hide {
	display: none;
}

.flex {
	display: flex;
}

@media only screen and (max-width : 767px ) {

section {
	padding-top: 60px;
	padding-bottom: 60px;
}

.text-center-xs {
	text-align: center !important
}

.pull-none-xs {
	float: none !important;
	text-align: center !important
}

.mb-15-xs {
	margin-bottom: 15px;
}

.mb-30-xs {
	margin-bottom: 30px !important;
}

.mb-50-xs {
	margin-bottom: 50px;
}

.mb-60-xs {
	margin-bottom: 60px!important;
}

.p-none-xs {
	padding-right: 0;
	padding-left: 0
}
}

@media only screen and (min-width : 768px) and (max-width : 991px) {

.text-center-sm {
	text-align: center !important
}

.mb-0-sm {
	margin-bottom: 0;
}

.mb-15-sm {
	margin-bottom: 15px;
}

.mb-30-sm {
	margin-bottom: 30px !important;
}

.mb-50-sm {
	margin-bottom: 50px;
}

.mb-60-sm {
	margin-bottom: 60px;
}

.pb-15-sm {
	padding-bottom: 15px;
}

.pb-30-sm {
	padding-bottom: 30px;
}

.pb-50-sm {
	padding-bottom: 50px;
}

.pb-60-sm {
	padding-bottom: 60px;
}

Change Color

yellow hats has a number of included colour schemes that you can switch to at any time. To switch colour schemes, simply replace color code in style.css with what you need.

<!-- COLORS -->
Primary Color   : #ffc527
Secondary Color : #5a5a5a
Body Color      : #828282
Heading Color   : #2f2f2f

Change Favicon

The main favicon is located in assets/images/favicon/favicon.ico replace with your own.

Rest of favicons for iphone/tablet are located in assets/images/favicon/apple-touch-icon.png replace with your own favicon.

<link href="assets/images/favicon/favicon.ico" rel="icon">
<link href="assets/images/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>

Change logo

Just edit the logo-light.png from the folder assets/images/logo/ or open index.html and you should see the tag there:

<div class="navbar-header">
   <img class="logo center-block" src="assets/images/logo/logo-light.png" alt="logo">
</div>

Change background

You can use the backgorund image using the Following code:

<section class="bg-overlay bg-overlay-theme">
	<div class="bg-section" >
		<img src="assets/images/call/2.jpg" alt="Background"/>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
				....
			</div>
			<!-- .col-md-8 end -->
		</div>
		<!-- .row end -->
	</div>
	<!-- .container end --> 
</section>

We used class to add backgound to feature , call to action section and etc. you can find this backgorunds in images folderassets/images/bg, and you can Find this background in style.css.

/*------------------------------------*\
    #BACKGROUNDS
\*------------------------------------*/
.bg-theme{ background-color:@color-theme}
.bg-gray { background-color:@color-gray} 
.bg-white { background-color:@color-white}
/* Background Image */
.bg-section {
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height:100%;
}
.....

You can choose between 3 Types of background overlay while creating your section, bg-overlay-light, bg-overlay-dark,bg-overlay-theme.

you can change background opacity from style.css

.bg-overlay-light:before {
	background-color: rgba(255,255,255, 0.6);
}

.bg-overlay-dark:before {
	background-color: rgba(47, 47, 47, 0.95);
}

.bg-overlay-theme:before {
	background-color: rgba(255, 197, 39, 0.9);
}

Change Icons

we use icon fonts with easy control in color and size so feel free to use more than 600 icon , you can check this icon:

• Font Awesome – http://fortawesome.github.io/Font-Awesome/cheatsheet/
• Stroke Gap Icons – https://www.behance.net/gallery/17079811/Stroke-Gap-Icons
• Linearicons – https://linearicons.com/free

<ul class="list-unstyled checklist">
    <li>
        <i class="fa fa-line-chart pull-left"></i>
        <h4 class="text-capitalize text-strong">conversion rate improvement</h4>
    </li>
    <li>
        <i class="fa fa-search pull-left"></i>
        <h4 class="text-capitalize text-strong">crawling search engine speedily</h4>
    </li>
    <li>
        <i class="fa fa-refresh pull-left"></i>
        <h4 class="text-capitalize text-strong">customize code quickly</h4>
    </li>
</ul>

Subscription

The newsletter is actually an integration of MailChimp or campaignmonitor. You can easily set-up a free account at mailchimp OR campaign monitor

Working with mailchimp

1.find mailchimp url

Go to your mailchimp account. Then go to your existing list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

2.connect mail chimp

Open functions.js and find following script. Just replace that mailchimp form action url with your mailchimp list url.

working with campaign monitor

1.find campaign monitor url

Paste your existing subscribe form in the area designated just after and Take your Campaign Monitor subscribe form... in the code. If you don't yet have a subscription form

more about AJAX Subscription Form and steps here.

2.replace mailchimp code form with campaign monitor code form

replace:

with:

<!-- Campaignmonitor Form Subscription
============================================= -->
<form class="form-inline" action="Your Form Action URL" method="post" id="campaignmonitor">
    <p>
        <input id="fieldEmail" class="form-control input-box" name="cm-jidjdl-jidjdl" type="email" required />
    </p>
    <p>
        <button type="submit" class="btn button-primary text-capitalize">signup me now</button>
    </p>
</form>

Credit Files

I've used the following images, icons or other files as listed.

JavaScript Plugins

1. jQuery
2. bootstrap
3. wow
4. gmap
5. nicescroll
6. ajaxchimp
7. counter up
8. less css
9. owl carousel
10. isotope
11. infinitescroll
12. magnific-popup
13. hero Revolution
14. waypoints
15. owl hero
16. images loaded
17. jflickr feed
18. jquery easypiechart
19. moment
20. twitter Fetcher

CSS Files

1. animate css
2. spinner loading

Icons

1. font awesome
2. linear icons
3. stroke gap icons

Images

1. unsplash
2. pixabay

Support

If you need any help. Feel free to contact me anytime. I will reply in 24 hours. Send a mail from Themeforest Profile.

changelog

Initial Release V1.0

Released on June 5 2017.