Elements
(Static)
This is a library of saved rows, sections, and modules that can be easily deployed throughout the site. In many cases, you can use CSS classes like .bg-dark
, .larger
, or .invert
to quickly modify the appearance of many of these sections. To learn more about available classes, visit your Style Guide.
Looking for content feeds and dynamic post grids?
Visit your dynamic elements library.
⚡️ Quick Tip
How to use classes in the page builder
All page builder elements, from rows, to columns, to modules, allow you to assign custom CSS classes to manipulate their appearance in a predefined way. We have indicated when this is the case with any of the elements below.
To assign a class to an element:
- Open the Row, Column, or Module settings.
- Click the "Advanced" tab.
- Scroll to the bottom.
- Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
- Hit "Save"
Bonus: You can add the class invert
to any element to create inverted text (like this!)
Basics
Content - Single Column
Tip: You can can adjust the width of the column by updating the CSS class to use a different max-###
number. You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum.
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.
Content - Heading/Content
Tip: This type of element can be useful when creating a portal page (a top level page that links out to a bunch of subpages). You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum dolor sit amet.
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.
Content - Content/Info Card
Tip: This type of element can be useful when you have a lot of text, but also need to highlight a certain point. You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum dolor sit amet.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Content - Content/List
Tip: This type of element can be useful when you have a lot of text, but also want to link to other sections. You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum dolor sit amet.
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.
Content - Featured Blurbs
Tip: This type of element can be useful for calling out specific points, or breaking up a large block of content to make it more scannable. You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum dolor sit amet.
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.
Content - Image/Content
Tip: This type of element can be useful when creating a portal page (a top level page that links out to a bunch of subpages). You can also change the look by adding bg-light
, bg-dark
, or bg-main
to the row.


Lorem ipsum dolor sit amet.
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.

Lorem ipsum dolor sit amet.
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.

Grids
Grid - Cards
Tip: You can disable the card effect by adding the class .unset
to the column. You can also disable the automatic image margins by applying .unset
. You can change the look by adding bg-light
, bg-dark
, or bg-main
to the row.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Rivers
Open Rivers
Open Rivers allow the image to "flow" out of their column to the edge of the window. You can change the responsive stacking order by opening the column settings, going to the Advanced tab, and selecting the Stacking Order dropdown.

Open River - Image/Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Open River - Content/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.

CTAs
& Features
Basic CTAs
The following two elements are default Beaver Builder modules that have been styled.
CTA Stacked - this is just a standard module.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Big CTA
This section can be displayed full-width or contained.
Big CTA - Image/Content
Tip: The background color of most sections (including the one below) can be quickly changed using the CSS classes .bg-dark
, .bg-main
, or .bg-light
.

Big CTA - Image/Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Big CTA - Content/Image
Tip: The background color of most sections (including the one below) can be quickly changed using the CSS classes .bg-dark
, .bg-main
, or .bg-light
.
Big CTA - Content/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.
