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:

  1. Open the Row, Column, or Module settings.
  2. Click the "Advanced" tab.
  3. Scroll to the bottom.
  4. Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
  5. Hit "Save"

Bonus: You can add the class invert to any element to create inverted text (like this!)

Click to open larger.

Basics

Static - Section Intros

Resources & Programs

Featured News

Online Learning

Static - Single Column

Tip: You can can adjust the width of the column by updating the CSS class to use a different max-### number.

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.

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.

Static - 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).

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.

Static - 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).

Grids

Static - 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.

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 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 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 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 sed do eiusmod tempor incididunt.

Lorem ipsum dolor.

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

Static - Columns

Tip: You can turn any column into a card with the .card class. However, if you need to do this to more than one column, it's usually better to start with a card grid instead.

demo-placeholder

Lorem ipsum dolor.

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

demo-placeholder

Lorem ipsum dolor.

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

demo-placeholder

Lorem ipsum dolor.

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

demo-placeholder

Lorem ipsum dolor.

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

demo-placeholder

Lorem ipsum dolor.

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

Rivers

Static - Contained Rivers

Contained Rivers restrict their contents to the width of the website's main content container. You can change the responsive stacking order by opening the column settings, going to the Advanced tab, and selecting the Stacking Order dropdown.

demo-placeholder

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.

demo-placeholder

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.

demo-placeholder

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.

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.

demo-placeholder

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.

demo-placeholder

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.

demo-placeholder

CTAs
& Features

Static - CTA

The following two elements are default Beaver Builder modules that have been styled.

CTA Inline - this is just a standard module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CTA Stacked - this is just a standard module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Static - CTA Big

This section can be displayed full-width or contained.

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.

demo-placeholder

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.