Menu

 

Template #102 and #104 Layout Ideas
(Main Heading - H1):

This page explains basic layout options and shows several simple layouts you can use with these templates. The horizontal lines below separate each type of page layout, and the different styles have been labeled for your reference.

NOTE: In order to learn how these layouts will look on a full-size computer, please view this page on a computer or tablet (not a phone screen).

General Layout Tips (Sub Heading - H2):

Your website template is very flexible and allows for many different layouts. Vary the layout from page by page to best display your content. Your overall website "look & feel" will remain consistent and polished! This Instruction page is actually much longer than any one page should be in your website. For long content, it's best to split things up between pages AND keep your writing short & to the point.

The blocks below represent layout sketches for the areas where words and picutures appear in the main part of a web page (the area in-between your logo/menu at the top and copyright section at the bottom).

Two Equal Columns

two equal column layouts by Glikstorm LLC

Three Columns

3 column layouts by Glikstorm LLC

CAUTION: For a professional looking website, stick with one of the layout designs above or use one wide column. Avoid using a 2 column section and 3 column section on the same page. Please contact us if you would like help with a more advanced layout.

Wording Styling Tips (Sub Heading - H2):

For a consistent, professional style, use the headings that were created for this template. The main headings are H1, subheadings are H2, and minor subheadings are H3. For the rest of the wording you'll use the paragraph style (This is the normal paragraph style). You can see how the styles look with this template where we have noted the heading and style types.

Try to resist the urge to force words to be really big, a different color, centered, or in all CAPITAL LETTERS. This adds lots of bloat to your website's code, making the page slower to open and harder for people with disabilities to use. The space between paragraphs and headings is also automatic. Try to resist the urge to add extra empty lines. If you feel your website needs much larger default text or larger space between all paragraphs, contact us for a quick, simple solution.

Funny Wording (Minor Sub Heading - H3):

line

One Wide Column at the top

This section stretches the full width of the page. This is the most common and versatile layout. If you'll be using lots of photos or graphics, this layout will work well. Even if you don't plan to have sentences that run fully across the page, we recommend you use this section for the main page heading (and then continue with columns below for the main part of the page).

Please be aware this it can sometimes be difficult to read long paragraphs that stretch the full width of the page (If you have small spurts of wording, this style will be OK). When using this layout style, it's a good idea to break up large amounts of wording with pictures.

line

Two Equal Columns

Left Column

A layout like this can be useful when you have a lot of long paragraphs. It's not easy to read paragraphs that run the full width of the page, so breaking them up like this can really help.

To make a quick page with this style, copy your CONTACT page. It has a wide top (for the page heading), a middle section with 2 equal columns like this, then a wide section at the bottom.

 

Right Column

You can use this column for additional wording, or maybe feature some larger photos here.

This would also be a good space to put a Twitter or Facebook feed. Please contact us if you'd like more information about this advanced option.

Important Note: On mobile devices, this column will display BELOW the left column. Keep that in mind as you're planning out your pages.

line

One Wide Column at the bottom

This section stretches the full width of the page. This is sometimes used underneath another layout style such as two or three columns. If you'll be using lots of photos or graphics, they will fit nicely in this section.

Please be aware this it can sometimes be difficult to read long paragraphs that stretch the full width of the page on a large desktop screen (If you have small spurts of wording, this style will be OK).

When using this layout style, it's a good idea to break up large amounts of wording with pictures.

Some Advanced Layout Ideas

NOTE: On mobile devices, both of the examples below would be displayed with the photo first, then the paragraph.

photo

BEFORE the words start in this paragraph, I put a new paragraph, inserted a photo, and made the paragraph style "left-pic." Then I selected the photo and chose the style "round-corners."

If you'd like the have pictures on one side and text on the other and find this technique confusing, try using a two column layout and putting all your pictures on the same side. Please contact us if you would like help with any advanced techniques.

 

photo

BEFORE the words start in this paragraph, I put a new paragraph, inserted a photo, and made the paragraph style "right-pic." Notice this picture has the default sharp corners.

Your Questions and Suggestions

We hope this information was helpful! If you think we should add anything to these instructions, or if you found something confusing (or an embarrassing typo), please let us know. We LOVE hearing from our clients, and we'd appreciate your help in making this a helpful resource for others. Thank you!