Elements
(Dynamic)
Dynamic elements automatically pull content in from other places (like a feed of blog posts).
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 more elements?
Visit your static 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!)
Lists
Dynamic - Simple List
Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.
Dynamic - Complex List
Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.
Example Post Three
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post Two
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post One
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Grids
Dynamic - Simple Grid
Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.
Example Post Three
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post Two
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post One
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Dynamic - Complex Grid
Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.
Example Post Three
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post Two
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Example Post One
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque…
Dynamic - Full Bleed Grid
Tip: You can manipulate the shape of these items by using the css classes .img-tall, .img-square, or .img-wide (there are examples of each of these below). This can be very useful when you want to break out a single post to use as a large, featured piece of content.
Dynamic - Big Featured Item
Tip: This item uses the same markup (and partial) as the full bleed grids above, so you can reshape it using the height CSS classes described above. It also uses the .larger class to make the title bigger.