This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
You are now inside the main content area
 
 
 
left col

Page Layout Options & Tools

No one wants to be in a messy space, its hard to walk around, it just feels uneasy.  The same with web pages and their clutter.  Large text sections all smashed together are hard to navigate and users can easily miss important information.

right col
 
left col
right col
 
left col

Layouts: Boxes & Sections

The version 5 (V5) page structure is simple by design.  Each page has 5 main boxes with each box having 10 editable sections.  The boxes are stacked like bricks one atop the other with the editable sections stacked as rows inside.  Everything will flow automatically down the page from section 1 to 50.

right col
 
 
 
left col

The Layout Builder

Starting with V5 we no longer force pages into a pre-built layout.  You can design your own version to meet your needs.  Once you have it, copy and use it on any other page.

ajax space

Predictive Layouts, Good Page Structure

Now that you can create your own layouts, its time to focus on user interaction with your site.  If you change up the layout on each page for no reason it will be hard to manage.

Keep a consistent look and feel across your pages, If you can reuse the same layout great, but its more important that pages feel similar than are exactly the same.

Good page structure is something that users shouldn't think about while on your site but like most good design, its felt not seen.

Content Placement & Spacing

The default padding inside sections is 10px to help maintain content placement.  Grid spacing between sections is zero but can be increased in the layout builder, or per box.

Style modifiers like middle, bottom, etc help move content within sections.  Remember that its not a wall of text people want to read, space between content is just as important as the content itself.

right col
 
left col

Make Headers easy to spot

Framing areas with font size is a good way to draw attention.

People really notice headers, and screen readers can use them to navigate quickly.  Headers have meaning and their purpose is to provide content not just look like bold or bigger text.

If you want larger or smaller text we have styles within the editor that can help without turning content into a different element type.

right col
 
 
left col
right col
 
 
 
left col
right col
background images and color
left col

New Idea, new color

We never want to assume everyone sees the same content the way we do, so colors shouldn't be used to make your point alone, but they can help to separate ideas.

Since most users will be scrolling through your page from top to bottom a nice change of background can be exactly what they see before they read the content.  Almost like a pallet cleanser for your content.

right col
background images and color
left col

What kind of page am I?

A major decision in the page layout is knowing what that page's purpose is.  You can have landing pages, presentation pages, and content pages each with their own flow, but with similar colors and styles that keep them together.  

right col
background images and color
background images and color
left col

Landing pages lead to places

The concept of a "landing page" or "home page" is really where you begin.  These aren't places that need a huge amount of text.

They need to lead users to other places that have the text they want.  Buttons, headers, features, and cards are great for these because they provide quick refrence and action.  

right col
background images and color
background images and color
left col

Presentation Pages

To help reduce clutter and create a space for large events, promotions, or campains these pages are meant to give you a soap box on your site. 

The are useful from vanity URLs but would make terrible content pages because of the lack in their navigation structure. 

Users coming to these places generally know what they want, and expect the content to relate to their need without searching through a site.

right col
background images and color
background images and color
left col

Content Pages

Welcome to the heart of your site, where you explain processes, guide learning concepts, outline policy or guidelines, and users are expecting to read.

Keep it simple, keep it short.  Bullets and small paragraphs are great for web content.

Need to explain a massive task with multiple steps think about using info blocks, or multiple pages to get the whole job done.

right col
background images and color
left col
right col
 
left col

Dynamic & Reusable Content Tools

If you made it this far you're thinking what about the layout options?  So far we've talked about elements and styles on the page, what about actually getting some real features that can provide large amounts of data with minimal scrolling or even filter and search features.

The V5 templates we expanded the use of data with Info Blocks.  They are a multi use, similar structure, design concept that helps craft large sets of data into standalone or dynamic reusable content.

right col
 
 
 
left col

What are info blocks?

What are info blocks?

Get an overview, see some examples and learn which block type is right for you.

Info Block Overview

Show me the blocks!

Show me the blocks!

Already know what they are but want to show them to your friends, here's the examples.

Info Block Examples

Accordions and Tabs

Accordions and Tabs

Info blocks are great, but not great for every situation.  Accordions or tabbed content can also help you maximize your text while minimizing the impact.

Accordions and Tabs

right col
 
left col
right col
 
 
left col
right col
 
left col
right col
 
 
 
left col
right col
 
left col
right col
 
 
left col
right col
 
 
 
left col
right col