Layouts Page

Structure of an HTML document

<header> </header>
<nav> </nav>
<aside> </aside>
<section> </section>
Description

The first step of creating any HTML document is formatting page structure. To create new website pages you can use blank.html file that is included into the purchased template package.

Structure Configuration

Page Layout

Header
Content
Footer
Description

If the layout looks like a single sheet of paper on top of <body> and all content sections are wrapped by a single width-defining element, use the following code:

HTML

<div id="pro_main">
	<header>
		 <!-- Your Logo here -->
		<nav>
			<!-- Your Main Menu here -->
		</nav>
	</header>
	<section>
		<div class="container_12">
			<div class="pro_wrapper">
				<!-- Your Columns here -->
			</div>
		</div>
	</section>
	<footer><!-- Your Footer here --></footer>
</div>

CSS

#pro_main{ 
width:1000px; /* Your Main Block width */
margin:0 auto; 
background:#fff; /* Your Background Color */
}

Page Layout width full-width backgrounds

Header
Content
Footer
Description

If the layout is subdivided into several vertical aligned sections, covering the full width of the viewport and the content area is aligned or centered within these sections, use the following code:

HTML

<header class="pro_full-width-bg">
	<div class="pro_header-box">
		<!-- Your Logo here -->
		<nav>
			<!-- Your Main Menu here -->
		</nav>
	</div>
</header>
<section class="pro_full-width-bg">
	<div class="container_12">
		<div class="pro_wrapper">
			<!-- Your Columns here -->
		</div>
	</div>
</section>
<footer class="pro_full-width-bg">
	<div class="pro_footer-box">
			<!-- Your Footer here -->
	</div>
</footer>

CSS

.pro_full-width-bg{ 
width:100%; 
background:#ddd; /* Your Backgrounds Color */
}
.pro_header-box{ 
width:960px; /* Your Header Block width */
margin:0 auto; 
}
.pro_footer-box{ 
width:960px;  /* Your Footer Block width */
margin:0 auto; 
}
Columns
grid_12
grid_1
grid_11
grid_2
grid_10
grid_3
grid_9
grid_4
grid_8
grid_5
grid_7
grid_6
grid_6
grid_7
grid_5
grid_8
grid_4
grid_9
grid_3
grid_10
grid_2
grid_11
grid_1
Layouts

Full-width

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.
Description

The template is based on a grid system that uses 12 columns. In order to create the full-witdh column you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_12">
			<!-- insert content here -->
		</div>
	</div>
</div>

Lets examine the layout creation process, step by step:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.
Description

In order to create two columns you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_6">
			<!-- insert content here -->
		</div>
		<div class="grid_6">
			<!-- insert content here -->
		</div>
	</div>
</div>

Two Columns Layout creation:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.

Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.
Description

In order to create three columns you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_4">
			<!-- insert content here -->
		</div>
		<div class="grid_4">
			<!-- insert content here -->
		</div>
		<div class="grid_4">
			<!-- insert content here -->
		</div>
	</div>
</div>

Three Columns Layout creation:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.

Four Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Description

In order to create four columns you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_3">
			<!-- insert content here -->
		</div>
		<div class="grid_3">
			<!-- insert content here -->
		</div>
		<div class="grid_3">
			<!-- insert content here -->
		</div>
		<div class="grid_3">
			<!-- insert content here -->
		</div>
	</div>
</div>

Four Columns Layout creation:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.

Left Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Description

In order to create layout with left sidebar you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_3">
			<!-- insert content here -->
		</div>
		<div class="grid_9">
			<!-- insert content here -->
		</div>
	</div>
</div>

Layout with left sidebar creation:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.

Right Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.
Description

In order to create layout with right sidebar you will need to insert the following code:

<div class="container_12">
	<div class="pro_wrapper">
		<div class="grid_9">
			<!-- insert content here -->
		</div>
		<div class="grid_3">
			<!-- insert content here -->
		</div>
	</div>
</div>

Layout with right sidebar creation:

  1. Create a <div> with the "pro_wrapper" class (<div class="pro_wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.
Images

Floating Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Floating Left 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Floating Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Description

Floating Left

In order to create an image block with the text wrapping it on the right, add class "image_left" to the image.

<div class="pro_wrapper">
	<div class="pro_image_left">
		<img src="YourImage.jpg" alt="">
	</div>
	<p> <!-- insert text here --> </p>
</div>

Floating Left 2

In order to create left-aligned image block and right-aligned text block add class "image_left" to the image and class "extra-wrap" to the text block.

<div class="pro_wrapper">
	<div class="pro_image_left">
		<img src="YourImage.jpg" alt="">
	</div>
	<p class="extra-wrap"> <!-- insert text here --> </p>
</div>

Floating Right

In order to create an image block with the text wrapping it on the left, add class "image_right" to the image.

<div class="pro_wrapper">
	<div class="pro_image_right">
		<img src="YourImage.jpg" alt="">
	</div>
	<p> <!-- insert text here --> </p>
</div>

Image without style

Image Style 1

Image Style 2

Image Style 3

Description

Image without style

To create simple image block without any styles use the "img" tag. Using the "src" image attribute input the root to the image file.

<img src="images/YourImage.jpg" alt="">

Image Style 1

Create "span" tag with class "pro_image_style1" and insert "img" tag with "src" attribute and root to the image file.

<span class="pro_image_style1"> 
	<img src="images/YourImage.jpg" alt=""> 
</span>

Image Style 2

Create "span" tag with class "pro_image_style2" and insert "img" tag with "src" attribute and root to the image file.

<span class="pro_image_style2"> 
	<img src="images/YourImage.jpg" alt=""> 
</span>

Image Style 3

Create "span" tag with class "pro_image_style3" and insert "img" tag with "src" attribute and root to the image file.

<span class="pro_image_style3"> 
	<img src="images/YourImage.jpg" alt=""> 
</span>