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 - Special Title
THIS IS A TITLE
Content - Single Column
Tip: You can can adjust the width of the column by updating the CSS class to use a different max-### number.
Example Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id sodales ultricies amet, ornare consequat, facilisi enim aliquam ut. Consectetur ultricies lorem eros lorem nibh euismod. Vel sed a, sed arcu. Ridiculus velit purus in quam mi facilisis erat fames. Tellus tortor, orci viverra donec sed amet tortor habitasse dui.
Example Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id sodales ultricies amet, ornare consequat, facilisi enim aliquam ut. Consectetur ultricies lorem eros lorem nibh euismod. Vel sed a, sed arcu. Ridiculus velit purus in quam mi facilisis erat fames. Tellus tortor, orci viverra donec sed amet tortor habitasse dui.
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).
Example Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae a adipiscing mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.
Mollis commodo sapien ullamcorper enim sollicitudin pharetra ut. Auctor mi eu, convallis leo lectus quis aliquam. Tortor duis pellentesque nibh ut scelerisque aliquet senectus aliquam. Id hendrerit quis id morbi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.
Example Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae a adipiscing mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.
Mollis commodo sapien ullamcorper enim sollicitudin pharetra ut. Auctor mi eu, convallis leo lectus quis aliquam. Tortor duis pellentesque nibh ut scelerisque aliquet senectus aliquam. Id hendrerit quis id morbi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.
Grids
Grid - Cards with Text
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Grid - Cards with Icons
Grid - Cards with Photos
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Grid - Cards with Circles
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
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.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non.
CTAs
& Features
Basic CTAs
The following two elements are default Beaver Builder modules that have been styled.
Platea mi egestas adipiscing tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
Platea mi egestas adipiscing tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
Big CTA
This section can be displayed full-width or contained.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna.