Page Template
Use this space for a page introduction. This section is optional. Limit text in this section to a couple sentences. If a page requires a longer introduction, remove this row and use the row below it.
Heading 2
Group information that logically goes together into rows. If you have a row that contains a simple topic, use a Visual Editor widget. If you plan to group several topics together or if you expect the row will use a complex layout, use the Layout Builder widget. In either case, add a label to the Visual Editor or Layout Builder so that site editors can easily navigate the page.
For rows with a Visual Editor and a sidebar callout box (example right), make sure to group relevant information together so that it collapses in a logical order in mobile views.
Sidebar Callout
Select a contrasting background color for a sidebar callout. The Visual Editor Widget Styles > Layout > Padding settings should be 30px 30px 30px 30px.
Heading 3
Keep the spacing for all rows as uniform as possible, unless the content calls for something different. The default Row Styles > Layout settings should be:
- Bottom Margin: 0px.
- Padding: 50px 0px 50px 0px.
- Row Layout: Full Width.
Pages that use a top row with a Background (Hero) Image should use the same Bottom Margin and Row Layout settings as above with the following Padding:
- Layout > Padding: 300px 0px 50px 0px.
- Mobile Layout > Padding: 150px 0px 30px 0px.
In addition, rows should typically have two columns and use a 60%-40% split. For rows using a sidebar, set the row layout to 3 columns with a ratio of 60%-2%-38%. These are general guidelines, but feel free to develop custom row layouts if the content calls for it.
Heading 3
All row widget styles will have the following default settings:
- Layout: none specified.
- Mobile Layout > Mobile Padding: 0px 5px 0px 5px.
Accordion Menu 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion Menu 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading 2
This is another place to call out information
Note that the first heading for each row is typically a heading 2. Using headings 3-5 to show heirarchy of information in each row. Visual Editor titles at heading 3, and accordion menu labels are heading 4.
Heading 3
Use a seaparte Visual Editor for anchor tags. Make sure you label the Visual Editor so that site editors can easily locate the anchor tag. The Visual Editor Widget Styles > Layout > Margin settings should be 0 0 0 0.
Contact Us
Another place to call out information
If the last row on the page uses a color background, change the Row Styles > Layout settings to Bottom Margin: -30px and a Bottom Padding: 80px. Otherwise there tends to be a gap between the bottom of the last row and the top of the footer.