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 - Section Intro
Lorem Ipsum Dolor Sit
Static - 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.
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
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
Static - Grid - Full 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.
Meet Our Team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel scelerisque semper mauris risus.
Foundation Council
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel scelerisque semper mauris risus.
Donors & Partners
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel scelerisque semper mauris risus.
Static - Grid - Cards with 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 - Grid - Cards with Photos - Small
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. Vel scelerisque semper mauris risus.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel scelerisque semper mauris risus.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel scelerisque semper mauris risus.
Static - Grid - Cards with Photos - Large
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.
Board of Directors
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
ATSSA Staff
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
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 ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
Static - Contained Rivers with List
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 ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
Modules
Modules - Image Carousel
The following element is a default Beaver Builder module that has been styled.
Modules - Accordion
The following element is a default Beaver Builder module that has 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.
Modules - Table
The following element is a default Beaver Builder module that has been styled.
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | |
|---|---|---|---|---|
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
Modules - CTAs
The following elements are default Beaver Builder modules that have been styled.
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis magna.
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis magna.