Page Builder Hierarchy: Sections, Rows, Columns, Elements
Erasne
Last Update vor 9 Monaten
In order to be able to navigate, edit and build pages you need to understand the building blocks that make up a page. They break down into four major pieces:
Sections - These are the big building block containers of the page that everything else sits within and can be reordered easily.
Rows - these allow you to have greater control over the width of your content
Columns - These allow you to control how many horizontal sections you want across the page and how content is displayed within them.
Elements - this are the things you see on the page like text, headlines, images, forms, calendars
Sections
If padding and margins are being used within the section, be sure to use consistent spacing so the section is visually balanced.
Depending on the margins desired for the funnel, decide whether you would like full width for the sections or not. This setting helps have preset margins that are consistent throughout the entire funnel.
Rows
In some cases, there needs to be a certain amount of space in the row to accomplish your design idea. It is best to adjust the row width to increase or reduce the space of the row. This allows for the responsiveness of the row to be consistent on different screen sizes.
The row alignment can also be modified so that the row can be centered aligned, right aligned, or left aligned. This is the best option instead of using padding to move around content within the row.
Columns
The most useful settings for columns are the Column Layout Settings.
The Content Alignment of the column can be modified so that all the elements in the column stack up vertically or align horizontally.
The Content Spacing setting changes where the elements are positioned in the column (at the top, bottom, or center of the column).
Elements
The most used elements in a funnel are the copy related elements. It is very important to make sure that the correct Font Type is chosen for each copy/text element (headline, subhead line, paragraph).
Depending on the section design and layout, different text/copy alignments are needed. Be sure to use consistent text/copy alignments throughout each section so that the composition does not feel unbalanced and translates properly to the user.
To establish a visual hierarchy, make sure the appropriate font size is chosen for all headlines, subhead lines, and paragraph copy (for both desktop and mobile view). If incorrect font sizes are used, it can make the text/copy unreadable and/or translate differently than what was intended.
