Gradient Banner
Rows with a background image or color must be set to Row Stretch > Stretch Row. If the row has the class “united-gradient” for that special background. If you want to have the header blend in with a page banner like this, copy the Raw HTML code and add to Page Settings > Custom CSS settings (the gear icon at the top of this page)
This text block also has a different font under Typography to get that light font weight.
Oh, and that little “Change Makers” to the left, add to code below to Custom CSS settings. The content for the “Change Makers” popup and the “Top Stories” bar can be edited under WPBakery Page Builder > Templates > Top Bar.
This is an example of Headline 1
This is an example of Headline 2
This is an example of Headline 3
This is an example of Headline 4
This is an example of Headline 5
This is an example of Headline 6
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla BOLD at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam italic nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
“Something with block quotes”
Text Block with class “body2” that makes Interior Page Paragraph Text Size 18pt Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla BOLD at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam italic nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Video Embed
The play icon is default. All you have to do is change the image and the URL under Lightbox > Custom Lightbox URL
Image with Captions
To add a caption to images, you can use a image module (left) and turn on captions, or you can add an image inline (right) and add a caption to the image.
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.
Morbi non arcu risus quis varius quam quisque id diam. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Nascetur ridiculus mus mauris vitae ultricies leo integer. Massa sapien faucibus et molestie ac feugiat. Lacus sed turpis tincidunt id aliquet risus feugiat. Aliquam etiam erat velit scelerisque in. Quis vel eros donec ac odio. Massa eget egestas purus viverra accumsan in nisl. Suspendisse in est ante in nibh mauris cursus. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Vitae turpis massa sed elementum tempus egestas sed. Enim facilisis gravida neque convallis.
Accordian
Add some content to each section for a new display type. An accordion can have a maximum of 5 sections.
Some Milestones
You can change the text before and after the number
You can also change the color
A Quote Box
“This is not a block quote, but a text block with custom typography. Check out the typography settings in this text block, and the blocks below. We’re also doing a fancy trick with the left image column. A more detailed description can be found in the Colored Grid section.”
– Name TBD
Title TBD
Greater Twin Cities United Way
The Little Image Below
To get the image below to scrunch up to this row, the image column has a negative margin. Also look in the columns “Responsive Options” so see how it will behave on different screen sizes. The image row’s “Row stretch” is set to “Stretch row and content (no paddings)” to get it to appear way to the side.
Colored Grid
Now this gets a little bit more complicated. Each column is set to be the same height as the others in it’s row. In these examples the yellow columns are setting the height for the rest. Each column has it’s own background color. In the columns with images it has a row with a background image that will fill the rest of the columns height. It also has an image that is hidden on desktop and displays on mobile. You need to change both if you change the image. You can add any content you want to the columns: headings, links, buttons, etc.
“This is a block quote, telling you that we have some new styles in our text editor. If you are in a Text Block go to Formats > Theme Styles, you will find that styles that are included in this module and can be used anywhere.”
Same spiel; the columns in this row have their height set by the tallest column, in this case, this column. I added some bottom margin to this Text Block to get a similar height to the row above
Now Lets Add Some Post Cards
You can select the look of the Post Card under General > Card Style.
Change Cards
This row’s “Row stretch” is set to “Stretch row and content” and the post card columns are set to 4. Take a look under the Post Cards’ “Query” tab. You have some options for what posts, pages, etc that you display.
Advocate Cards
For these cards the columns are set to 1. That want makes them look like rows.
