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)
Products & Services Overview
Recycling
Medical Waste
Recycling
Refuse
Medical Waste
Custom Solutions
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)
Products and Services Overview
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
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
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”)
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.
