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 pro_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

This layout looks like a single sheet of paper on top of <body> and all content sections are wrapped by a single width-defining element.

Page Layout width full-width backgrounds
Header
Content
Footer
Description

This 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.

Columns

grid_24
1
grid_23
grid_2
grid_22
grid_3
grid_21
grid_4
grid_20
grid_5
grid_19
grid_6
grid_18
grid_7
grid_17
grid_8
grid_16
grid_9
grid_15
grid_10
grid_14
grid_11
grid_13
grid_12
grid_12
grid_13
grid_11
grid_14
grid_10
grid_15
grid_9
grid_16
grid_8
grid_17
grid_7
grid_18
grid_6
grid_19
grid_5
grid_20
grid_4
grid_21
grid_3
grid_22
grid_2
grid_23
1

Layouts

Full-width
Full width
Description

One column designs are great for websites that use a lot of images in their content. For navigation, they generally have a horizontal bar near the top of the page, with links/buttons along it

Two Columns
Two columns
Two columns
Description

Popular among blogs, the two-column layout has plenty of advantages. These layouts often have a horizontal navigation, with major top-level links. The sidebar can also have a majority of the navigational links, allowing you to go anywhere on the site. The sidebar can also be designed to have more than just navigation.

Three Columns
Three columns
Three columns
Three columns
Description

It’s like a two-column design, but with an extra column. Often, the left-hand sidebar contains navigation, while the right-hand one has assorted non-navigation stuff on it. Three column designs are currently seeing less use, as their content columns are narrower, leaving less room for large images.

Four Columns
Four columns
Four columns
Four columns
Four columns
Description

Yes, there are websites with four columns. For a couple great examples, see The Site of Requirement, and The Leaky Cauldron. Few websites use designs like this, and often they use three columns for more content-heavy pages.

Left Sidebar
Left Sidebar
Left Sidebar
Description

Pros:
•Left sidebars gain the most attention, and gain the attention first. They'll have higher hierarchy and content in this sidebar will be noticed before the main content. This is best for primary navigation, basic user functionality (for web apps), and so on.
•Categories, Post titles, and indexes and so on that would lead directly to content can help the user navigate to content quicker. Suggested topics or titles are not recommended, and should be secondary navigation.
•If the list of primary navigation is extensive, there may not be a lot of room to fit it into a horizontal navigation bar. A left sidebar is good for this as it will be noticed first.

Cons:
•Left sidebars can get in the way of other content if the wrong content is placed inside of it. Left sidebars should only be used to promote the content to the right of it, not lead the user away.
•Most websites use right sidebars, so unless a left sidebar has a practical and smart purpose, it goes against regular design patterns, which diminishes the usability of the website.

Right Sidebar
Right Sidebar
Left Sidebar
Description

Pros:
•Right sidebars are generally the standard because sidebar content is usually secondary, and right-hand sidebars are second in hierarchy.
•For smaller screens, if the design is not responsive or flexible, the right sidebar of less important items will be cut off as opposed to the essential content. While this is undesirable, it's a better fallback than having the user scroll to read content.

Cons:
•It is a secondary location in terms of hierarchy, so if important information is held there, it may not be noticed.
•Ads within right sidebars may have less monetary value, although they should be secondary content anyway.

Images

Floating Left

Left floating medium sized image.

Floating Left 2

Left floating small sized image.

Floating Right

Right floating medium sized image.

Description

Floating Left

This layout shows a floating small size picture on the left with text on the right.

Floating Left 2

This layout shows a floating medium size picture on the left with text on the right.

Floating Right

This layout shows a floating picture on the right with text on the left.

Image without style
Image Style 1
Image Style 2
Image Style 3
Description

Image without style

You can create simple image block without any styles.

Image Style 1

Create Image Style 1

Image Style 2

Create Image Style 2

Image Style 3

Create Image Style 3