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 a horizontal region on 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.
Align Promo widgets in Custom layout sections
By default, the color backgrounds in Promo block and Promo with image widgets may not align (i.e., may have different heights) in a page section depending on how much text is in each Promo widget. See Figure 7, below, for an example of 3 color Promo block widgets in a page section that have different heights due to the varying text.
Promo blocks and Promo with image widgets can be automatically aligned to all have the same heights when they are in the same page section/row. The height of all the Promo widgets in the same section will be set by the widget with the most text. See Figure 8, below, for an example of the above Promo blocks that have been aligned in their page section and are now the same height.
Once you have added Promo blocks or Promo with image widgets to a page section with a Custom layout, you can configure that page section to align the widgets. Select the pencil icon for the page section containing the Promo widgets, and then select the "Align section" toggle and select "Update"; see Figure 9, below.
Once the "Align section" toggle has been turned on, the page section header will be yellow in the page customization interface to indicate that the section is aligned. Select the pencil icon for the page section again to turn off the toggle as needed. The page customization interface may not necessarily preview the Promo widgets with their evenly-aligned heights, but the widgets will be aligned in the published view. See Figure 10, below, for an example of a page section with "section align enabled" in the page customization interface.
Important: The Promo widget alignment alignment option is ONLY available on page sections using Custom layouts. If you do not see an "Align section" toggle when editing/configuring a page section, check to see if that page section is using a Templated layout rather than Custom (Templated page sections have a thin purple line at the top and Custom page sections have a green line).
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 11, 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 12, below.
