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 opt_nav_style value.

value: 1 - solid, 2 - transparent

Open file designesia.js then change opt_sticky_nav value.

value: 1 - enable , 0 - disable

Open file designesia.js then change opt_nav_separator value.

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

Open file designesia.js then change opt_back_to_top value.

value: 1 - enable , 0 - disable

Open file designesia.js then change opt_page_trans value.

value: 1 - enable , 0 - disable

Open file designesia.js then change opt_page_trans_in value.

value:

fade-in
fade-in-up-sm
fade-in-up
fade-in-up-lg
fade-in-down-sm
fade-in-down
fade-in-down-lg
fade-in-left-sm
fade-in-left
fade-in-left-lg
fade-in-right-sm
fade-in-right
fade-in-right-lg
rotate-in-sm
rotate-in
rotate-in-lg
flip-in-x-fr
flip-in-x
flip-in-x-nr
flip-in-y-fr
flip-in-y
flip-in-y-nr
zoom-in-sm
zoom-in
zoom-in-lg

Open file designesia.js then change opt_page_trans_out value.

value:

fade-out
fade-out-up-sm
fade-out-up
fade-out-up-lg
fade-out-down-sm
fade-out-down
fade-out-down-lg
fade-out-left-sm
fade-out-left
fade-out-left-lg
fade-out-right-sm
fade-out-right
fade-out-right-lg
rotate-out-sm
rotate-out
rotate-out-lg
flip-out-x-fr
flip-out-x
flip-out-x-nr
flip-out-y-fr
flip-out-y
flip-out-y-nr
zoom-out-sm
zoom-out
zoom-out-lg			 
			 

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

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

You can change location for Google map by open file js/map.js. Look code at line 7. Then change value for variable ‘myLatlng’. You can generate latitude and longitude value by insert your address here: http://www.latlong.net/

Usage of the Google Maps APIs now requires a key. Please see the Google Maps APIs documentation to get a key here
Once you done, replace api key with new one you have got (contact.html line 223).

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=<INSERT KEY HERE>"></script>

Open file "countdown-custom" inside folder js. Then replace value below:

new Date(2017, 12-1, 25, 10)}); // year, month, date, hour

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

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.

• 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

• 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