Layouts

Layouts Page

Structure of an HTML document

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_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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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.

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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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.

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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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.

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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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.

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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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.

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:

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.
Next you need to create the desired number of columns and add the "grid" class to them.
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

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

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>