(H1) Panel Builder 66/33% Layout

This page uses a 66/33% panel builder with no background
Nested within that left-column is a 100% panel with background

(H2) Explanation

Having content in it's own panel gives better visual separation

Nesting panels allows for greater control of content including alignment and discreet background combinations, ultimatley giving you more options for grouping like-content.

Another layout technique is stacking panels,  which when used with backgrounds, assists in visually separating topics. Be aware that some components have native backgrounds (e.g. Feature Box, Flip Panel,  Block List) that don the same effect.

Component Tutorials

Place less important info. further down the page, "below the fold"

Documentation on components used to make this page (in order of appearance):

(H2) Other 66/33% Samples

Get some ideas from real pages that use a similar layout:

Flashcard Question

Q: How is it possible that the page title spans 100%, even though the main panel used is 66/33%?

Show Back

Flashcard Answer

A: The main heading is stacked above all panels, in the upper-most component zone.

Show Front
McKinley Version