Structure

First, you will need an HTML editor such as Notepad ++ (free). Download it to your computer, install it and open the index.html file with it.

Layana is based on Bootstrap's grid:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>	 
				

Each of the row should be wrapper within a container. Our template is divided in sections so each of this container is also wrapped in section. Here is an example for a section with half columns:

<section id="about"> 
 <div class="container"> 
	 <div class="row"> 
		 <div class="col-md-6"> 
		 </div> 
		 <div class="col-md-6"> 
		 </div> 
	 </div> 
 </div> 
</div>
				

Equal heights

For equal columns (as in after "about" section), wrap the col-md-4 columns with equal-heights w-middle. Example:

<div class="equal-heights w-middle"> 
	<div class="col-md-4 bg-primary"> Content here </div> 
	<div class="col-md-4 bg-dark"> Content here </div> 
	<div class="col-md-4 bg-primary"> Content here </div> 
</div>
			

In our template we also wrap the content with a box class for padding.

Menu

Being a one page template we need to assign a corresponding section id to each menu item. In example if we assign to a section the id about we need to make sure the href points to it, with the sign # in front of it. Full example below:

MENU ITEM

<li> <a class="page-scroll" href="#about">About</a> </li>
			

SECTION

<section id="about"> Your content here </section>
			

Slider

The intro slider as well as testimonial slider are based on Bootstrap's carousel. Please, view the detailed documentation here.

Aimations

You can assign to each class an animation. View all supported animations here. You must add wow class before any animation, example: wow bounceInLeft. Full example:

<div class="col-md-6 wow bounceInLeft"> My animated text here </div>
			

Icons

You can use any of the icons listed here

Contact

The contact form is functional, but you will have to replace the current e-mail address (wowthemesnet@gmail.com) with your own. Open contact.php file and find the line 23.Don't forget to include the necessary script (contact.js) at the bottom of the document as it already is in index.html

Thank you

WowThemes.net thanks you for using this template. If you need support or customization, please, e-mail us at wowthemeshelp@gmail.com.