Page Builder

The page builder is the means for adding conent to a page. Content is added to a page by adding components of various types, for example a heading component or an icon component. The components are categorized as:

sections (top level) components
nested components

Section Components

A section component can only be added at the root of the content, you cannot nest a section component inside any other compontent. A header or hero component are examples of section components. There is also a generic "section" component that allows you to add flexible rows/columns.

Nested Components

Nested components are any component that can be added inside a section component or inside other nested components. A nested component cannot be added to the root of the content.

The V4 page builder attempts to make the editor preview mimic the public view of the page. V4 does not inject space to make room for page builder component toolbars (buttons). Dynamic components like slideshows, carousels, and accordions should all be interactive while you are in the page builder.

The V4 Layout

The V4 layout is made up of:

Sections
- Column Groups
  - Columns
    - Nested Components

Sections

A section is similar to the Beaver Builder "row". A section has a natural top/bottom padding that provides a buffer between it and other sections.

Content from the same topic belongs in the same section. For example on the image to the right, "Eye Care for Everyone" would be one section, and "Eye Exams for Children" would be a second section.

Use sections as a means to separate different topics. The natural top/bottom padding on sections help keep the sections/topics separated. Do not zero-out the top/bottom padding on sections. If you feel the need to you are probably looking for a new column group (see below).

Column Groups

A column group is a wrapper for multiple columns. Beaver Builder also had column groups but it attempted to abstract this behind UI that didn't always work. When you dragged a component above another it would create the column group for you, or it would sometimes just create a nested column. These behave differently and have different restrictions leading to confusing situations where the editor is wondering why certain settings are only sometimes available. I'm trying to avoid that confusion by not hiding column groups in v4.

A section can contain multiple column groups. Column groups have no padding.

What's the point of column groups, why not just have columns directly inside a section? A column group is the only way you can tie multiple column layouts with a single background. If you look at the example on the right, if the background image is applied to the section, and columns were nested directly under the section, how would you have a single column (for "My Heading" and its divider), and then another three columns below that. Your section could have one column, or three, but not both.

Though techincally in V4 you could recreate the layout on the right with a single column group using the new grid column features (see below).

Columns

A column in V4 behaves differently than a column in Beaver Builder. A column group in V4 uses a grid rather than a flex layout so you're no longer using a percentage for the column width. You instead set them as a grid column width. By default each column group is set to 12 columns, but you can change this on a per section basis if you need more control. This means if you want multiple columns to align on the same row, the columns in that row must add up to 12 (or less). For example-

A row of 4 equal width columns, each column has a width of "3".
[ 3 ] [ 3 ] [ 3 ] [ 3 ]

A row of 3 equal width columns, each column has a width of "4":
[ 4 ] [ 4 ] [ 4 ]

A row of 2 equal width columns, each column has a width of "6":
[ 6 ] [ 6 ]

A row with a single column, the single column has a width of "12":
[ 12 ]

But don't feel like the columns need to add up to 12, use whatever column widths works. For example you could have 12, 4, 4, 4 to reproduce the layout example in the Column Groups section above if you'd prefer not to create a second Column Group.

The advantage of the grid layout is you have full control over when a column wraps to a new row.

V4 also allows you to update multiple column widths simultaneously . Edit a column group to see the column width settings for every column in that column group.

From column group settings you can also set the order of the columns. For example on mobile you may want the last column to actually display first. Set the order in each field to override the natural column order. For example "3", "2", "1" would reverse the column order, or "3", "1", "2", would place the last column first, then the first column, then the second column.

Components

A component is any content you can drop on to the page that has its own settings. Examples of components are:

sections
headings
images
buttons
etc..

All content is added to a page using the "+" icon you'll find on the component toolbar for existing components on the page. The "+" action will add a component directly under the current component. When the Add Content modal is displayed, it will present components that can be placed below the current component. So for example if you were to click the "+" icon from a section component, you will be presented with only section components as only they are supported at that level. If you were to click the "+" on a component that is already nested inside a section, you will only be presented with nested category components.

You can also click the component tree button to view the full component tree. Hovering over each item will highlight the component in the site. Clicking will edit that component.

If you click Ctrl+Alt simultaneously you'll find additional actions that allow you to add new rows, column groups, or columns anywhere on the page.

Breakpoints/Responsive Settings

V4 has five breakpoints:

The base breakpoint which is the default. Any setting applied on the base breakpoint applies to all breakpoints.
XL: applies to 1200px or less
LG: applies to 992px or less
MD: applies to 768px or less
SM: applies to 576px or less

You'll find a breakpoint button on some fields, this flags the field as supporting different settings for different breakpoints. The default state is 'base', represented by the infinity icon (need suggestions for something better!). Click the breakpoint button to cycle through to the next breakpoint. In the field setting you will see a greyed out value if that breakpoint is inheriting a setting from a larger breakpoint. If the field is blank, it has no setting.

Color Scheme

Top level components (sections) have a setting for the color scheme. This will apply that color scheme to the section and all components nested in that section.

Some nested components also have a setting for color scheme. This will reset the color scheme for that component and for any components nested inside.

Undo/Redo

The top admin bar has the undo/redo buttons. Adding, removing, reording a component all trigger an undo state. All updates made to a component in a single edit are rolled into a single undo state. For example if you edit a heading by updating the tag and updating the text, then move on to edit a different component, clicking undo will undo both the update to the tag and updating the text.

Page Builder Tips

Do not create empty columns to limit text length. This should always occur automatically. You can set the natural text length in the theme settings.
Do not pre-optimize your images before uploading them to V4. V4 will auto-optimize any JPG or PNG uploaded.
Whether you are editing library content or the client site's content, do not enter client data in content, always use the dynamic tags.