This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <div id="content">.

... header area ...

<div id="content">
     <div class="container">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </div>

     <section>
          <div class="container">
               <div class="row">
                    this is your content
               </div>
          </div>
     </section>

</div>


... footer area ...
        

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.

<div class="row">
     <div class="col-md-6"> this is 1/2 columns </div>
     <div class="col-md-6"> this is 1/2 columns </div>
</div>

<div class="row">
     <div class="col-md-4"> this is 1/3 columns </div>
     <div class="col-md-8"> this is 2/3 columns </div>
</div>

<div class="row">
     <div class="col-md-3"> this is 1/4 columns </div>
     <div class="col-md-9"> this is 3/4 columns </div>
</div>

Open file designesia.js then change de_boxed_style value.

Value: 1 - on, 0 - off

Open file designesia.js then change de_header_style value.

Value: 1 - solid, 2 - transparent

Open file designesia.js then change de_header_color value.

Value: 1 - dark, 2 - light

Open file designesia.js then change de_menu_separator value.

Value: 1 - dotted, 2 - border, 3 - circle, 4 - square, 5 - plus, 6 - strip, 0 - none

Open file designesia.js then change schedule_columns value.

• animate.css - used to make animation
• bg.css - used to set background for all section and subheader
• bootstrap.css - main css framework for this theme
• color.css - used to load color for template
• magnific-popup.css - for maginfic popup jquery
• owl.carousel.css, owl.theme.css, owl.transitions.css - for owl carousel jquery
• plugin.css - overwrite default plugin css
• rev-settings.css - custom css for Revolution Slider
• style.css - main css file for this template

To change accent color with premade color, open file css/color.css then replace value inside "colors/green.css" with other css file name.
All premade color on this template can be found inside folder css/color/.

All section/subheader background on this template can be edited within file css/bg.css

• jquery.min.js - http://docs.jquery.com/Downloading_jQuery
• bootstrap.min.js - bootstrap js file
• designesia.js - custom js file
• jquery.isotope.min.js - used in gallery page
• jquery.magnific-popup.min.js - used to open popup image
• easing.js - http://archive.plugins.jquery.com/project/Easing
• jquery.ui.totop.js - used to scroll to top
• validation.js - used for contact form validation

Open file designesia.js then change logo_dir_1 value.

Select an object that you want to animate. As example you want create animate for H1 element. You can see below:

<h1 class="wow fadeIn" data-wow-delay=".2s" data-wow-duration=".5s">Animate Text</h1>

• You must add class name "wow" for object that you want to animate.
• fadeIn: sample type of animation. You can see all animation available from: http://daneden.github.io/animate.css/
• data-wow-delay: determine when animation will start (on second)
• data-wow-duration: determine duration of animation (on second)

1. Create a section tag then give it an id name.

   <section id="my-section">...content here...</section>

2. Add attribute data-stellar-background-ratio for scroll speed.

   <section id="my-section" data-stellar-background-ratio=".2">...content here...</section> 

3. Open bg.css file, set background image for your section.

   #my-section{
        background-image:my-bg-image.jpg;
   }

4. Done.

Open > email.php. Change $to value with your email.