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
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 Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
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
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Static - Section Intro
Lorem Ipsum
Grids
Static - Cards - Icons
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.
Static - Cards - Images
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
Lorem ipsum dolor sit amet consectetur adipiscing elit.
Lorem Ipsum
Lorem ipsum dolor sit amet consectetur adipiscing elit.
Lorem Ipsum
Lorem ipsum dolor sit amet consectetur adipiscing elit.
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.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at.
Featured
Static - Featured Grid
Member Benefits
Static - Big Featured
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at.
Modules
CTA
The following two elements are default Beaver Builder modules that have been styled.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Accordion
The following two elements are default Beaver Builder modules that have been styled.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor.
Tablepress
The following two elements are default Beaver Builder modules that have been styled.
Testimonials
The following two elements are default Beaver Builder modules that have been styled.
Lorem ipsum dolor sit amet consectetur adipiscing elit, hac a pretium dui tristique pellentesque tortor, neque metus class aenean maecenas fringilla. Sapien purus vitae suscipit aptent varius etiam pharetra pulvinar proin, nec gravida porta feugiat ridiculus sed sem velit, tellus penatibus eget laoreet blandit dictum duis ante.
Author Full Name
Title, Institution
Lorem ipsum dolor sit amet consectetur adipiscing elit, hac a pretium dui tristique pellentesque tortor, neque metus class aenean maecenas fringilla. Sapien purus vitae suscipit aptent varius etiam pharetra pulvinar proin, nec gravida porta feugiat ridiculus sed sem velit, tellus penatibus eget laoreet blandit dictum duis ante.
Author Full Name
Title, Institution
Lorem ipsum dolor sit amet consectetur adipiscing elit, hac a pretium dui tristique pellentesque tortor, neque metus class aenean maecenas fringilla. Sapien purus vitae suscipit aptent varius etiam pharetra pulvinar proin, nec gravida porta feugiat ridiculus sed sem velit, tellus penatibus eget laoreet blandit dictum duis ante.
Author Full Name
Title, Institution
Gravity Forms
The following two elements are default Beaver Builder modules that have been styled.
"*" indicates required fields