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

Content - Single Column

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

Explore

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

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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 - Horizontal Card - Icon/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).

Explore

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.

Content - Horizontal Card - 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).

demo placeholder jungle

Explore

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.

Content - Horizontal Card - Content/Image

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

Explore

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.

demo placeholder jungle

Content - Benefit Card

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

01.

Benefit Name

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.

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.

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

Grid - 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 jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

demo placeholder jungle
Lorem ipsum dolor.

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

Rivers

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.

tablet demo reference

Solution

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.

Solution

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.

tablet demo reference

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.

demo placeholder jungle

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.

demo placeholder jungle

CTAs
& Features

Basic CTAs

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.

Explore The Fully Optimised Digital.ai Platform

Big CTA

This section can be displayed full-width or contained.

Lorem ipsum dolor.

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

Platform Sections

This section can be displayed full-width or contained.

Explore The Fully Optimised Digital.ai Platform

Combining agile planning + software delivery + end-to-end intelligence to enable large, complex enterprises to win in today’s digital markets.

Digital.ai Platform Offerings

Overview

Product Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis.

product banner reference

Overview

Product Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis.

Overview

Product Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis.