Hero Row Class
Even though it shows up in a left column, the hero aligns right by default. This can be changed by using class “left” or “center” on the ROW containing the hero. The width of the hero text area is set by the column. Make sure there’s no empty space below the text!
BG color blank for transparent
The “threeup” row class emphasizes the center column with a larger font size and icon size. If the “featured” style is not desired, simply omit the threeup class and use three columns.
Alternate First Slab
Icons are from FontAwesome (click for cheatsheet). Remove the fa- from the beginning of the name on the cheatsheet to get the name of the icon.
The section title should be set on the icon, not on the Visual Editor.
Icon color blank to inherit
Slabs have zero padding (internal space) by default. This slab has 3 line heights worth of padding. This is done with the row class “pad-3” (“pad-2” and “pad-1” are also available)
Set the Headline Widget on the widget class
A text widget with class “headline” treats the body text as a subhead
Features Widget
Use ONLY ONE WIDGET, and add multiple features to it
Make your life easier
You can add one feature, then duplicate for as many list items as you need
Headlines and icon containers get class color
This overrides anything you might pick in the widget setup
BG color blank for transparent
The “threeup” row class emphasizes the center column with a larger font size and icon size. If the “featured” style is not desired, simply omit the threeup class and use three columns.
Three Up
Icons are from FontAwesome (click for cheatsheet). Remove the fa- from the beginning of the name on the cheatsheet to get the name of the icon.
The section title should be set on the icon, not on the Visual Editor.
Icon color blank to inherit
Slabs have zero padding (internal space) by default. This slab has 3 line heights worth of padding. This is done with the row class “pad-3” (“pad-2” and “pad-1” are also available)
Placeholder for the Accordion Widget
Accordions are added site-wide, and a “Text” widget with a WordPress shortcode pulls in the appropriate accordion.
Collapse Title: Left Aligned
The collapse titles will be a lot like buttons, but they will be left-aligned, and outlined with a slightly darker color (buttons normally don’t have outlines). The first collapsable will be “open” by default.
The content should be no more than 3 paragraphs. The more items in the collapsable list, the smaller the content should be to prevent awkward scrolling.
In Google Slides, content for additional collapsables should be written in Speaker Notes.
Note the Collapseable Outline Color
Accordion Sample Description
THESE ARE TALLER THAN NORMAL BUTTONS
Accordion Sample Description
FOUR OR FIVE IS PROBABLY A GOOD NUMBER
Pullquote text should go entirely in the title. It will be centered by default with a gray drop shadow. To simplify things, the text color of the pullquote goes on the row class (so this is a “pullquote black”)
For column-spanning headlines, embed columns in a layout builder
Set headline color by putting the appropriately named color class on the Layout Builder Widget. This example uses “blue” on the headline widget, whereas the previous slab uses “red”
The two-up design is simply a two column row embedded in a layout builder. A “SiteOrigin Image” widget is used to the left. The columns can easily be switched if necessary.
The “oneup” slab features content in a narrower column
This will be used sparingly for featured content that doesn’t need an image to support it. The text column will be 75% of the width of standard columns, but the header will be the same width as standard columns.
- Bullets: This style works well with bullet lists
- Convention: A convention we’ve used is bolding the first word and putting a colon after it
- Stupid: These lists look stupid if they have fewer than three items.
No layout builder is necessary to build this slab.
Use color names on button class
BG color blank for transparent
The “threeup” row class emphasizes the center column with a larger font size and icon size. If the “featured” style is not desired, simply omit the threeup class and use three columns.
Two Up
Icons are from FontAwesome (click for cheatsheet). Remove the fa- from the beginning of the name on the cheatsheet to get the name of the icon.
The section title should be set on the icon, not on the Visual Editor.
Call-to-Action with Column-Spanning Headline
This column will almost always be a form instead of a SiteOrigin Editor.
