In Berkeley Web Builder, certain content types (Custom and feature-specific types) allow users to create pages with structured content; this refers to a website page with multiple content widgets, organized in page sections and displayed using layouts (varying combinations of rows and columns).
In the "Customize" tab on Custom pages and other content types, there is a user interface with options to add/remove page sections, and within the page sections, there are options to utilize both custom layouts and templated layouts for displaying widgets. Multiple sections can be added to pages as needed to align and display content widgets.
Page sections
Custom pages (and other content types) have a "Customize" tab where there is a user interface for adding, configuring, and removing individual page sections. A page section is add a horizontal region to a page, and these page sections can use either custom (multiple-column layouts with varying widths) or templated (multiple-column layouts with content that spans rows or columns) layouts to display content widgets.
See Figures 1 and 2, below, of a Berkeley Web Builder starter site homepage with a 2-column layout and a "Customize" tab, and the homepage customization user interface with a single page section using a custom 2-column layout.
Page layouts
Figures 1 and 2, above, highlight a 2-column custom layout in a page section. Each page section can use either a custom or templated layout. Custom layouts are 1, 2, 3, 4, and 5-column layouts that can be selected and changed as needed, and the 2 and 3 column options have variable percentage widths.
In the "Customize" interface, each page section has a "change layout" button. Select that button to open a modal window which contains the currently-selected layout as well as the other available custom and templated layout options. See Figures 3 and 4, below.
How to select and use custom layouts
After selecting the "change layout" button and opening the layout modal window (see Figures 3 and 4, above), select the 1-column, 2-column, 3-column, or 4-column layout options. See Figure 5, below.
Selecting the 2- and 3-column options will bring you to the subsequent "map regions" screen where you can select from different column percentage widths. Selecting the 4-column will also bring you to the "map regions" screen, but there will be no option to change the column widths.
- 2 columns: 50%/50%, 33%/67%, 67%/33%, 33%/67%, 75%/25%, 25%/75%
- 3 columns: 25%/50%/25%, 33%/34%/33%, 25%/25%/50%, 50%/25%/25%
Select "Update" after choosing the desired option from the dropdown. See Figure 6, below.
After selecting the "Update" button, you will be back in the page customization interface with the updated section layout where you can add, move, configure, and/or remove widgets.
How to select and use templated layouts
If you would like to have content widgets span rows or columns, use a templated layout option in a page section. After selecting the "change layout" button and opening the layout modal window (see Figures 3 and 4, above), select one of the templated layout options; see Figure 7, below.
After selecting a templated layout, you will be brought to subsequent "map regions" screen. Select "Update" to save your selection, which will bring you back to the page customization interface with the updated section layout where you can add, move, configure, and/or remove widgets. See Figure 8, below.
