Content Grid

Example 1

This shows a PowerPack content grid with 6 Module Posts, a dotted border, centred text and featured image shown. Post meta and post content has been turned off.

beaver builder accordion module
Accordion
Beaver Builder Audio Module
Audio
content-slider2x
Content Slider
Beaver Builder Slideshow Module
Slideshow
social-buttons2x
Social Buttons
testimonials2x
Testimonials

Example 2

One of the more powerful features of PowerPack is the ability to filter posts. Here we are filtering posts by category.

All
  • All
  • Beaver Builder
  • PowerPack
  • UABB
posts2x
Restaurant / Services Menu
beaver builder heading module
Fancy Heading
beaver builder tabs module
Advanced Tabs
beaver builder tabs module
Advanced Tabs
Image & Colour Row Background
Image & Colour Row Background
beaver builder heading module
Heading

Example 3

This Content Grid restricts the number of posts shown initially to 4 with a pagination module below. Taxonomy overlays in the top right corners show the chosen taxonomy categories for each of your posts.

posts2x
Restaurant / Services Menu
beaver builder heading module
Fancy Heading
beaver builder tabs module
Advanced Tabs
beaver builder tabs module
Advanced Tabs

Example 4

By enabling the content and meta settings you can include these elements within the grid. PowerPack includes a number of pre-defined styles that you can choose from  which alters the positions of each of the elements. Here, post date is shown on the left side with the post content indented to the right.

posts2x
Restaurant / Services Menu

  Example 1 This example shows a more traditional styled restaurant menu. Example 2 Here’s an example of the Restaurant/Services Menu module from PowerPack being used to list business services. Example 3 Here’s another spin on the Services type menu. TOP 3 ADDONS FOR BEAVER BUILDER PowerPack Dozens of addons plus templates. A great asset for designers needing…

beaver builder heading module
Fancy Heading

  Example 1 This is a heading using the color animation. Nature Example 2 This is a heading using the gradient animation. Similar to example 1 except with a gradient instead of a flat color. Nature Example 3 This heading uses the Rotate/Flip Animation option. All of the animations include a time option to set the animation length in…

Example 5

Content Grid also works as a post carousel with powerful options for setting image crops, arrow and carousel dot options.

Example 6

This final example shows a circular cropped featured image and title below with a post filter, centrally aligned. The filter border has been set to only show at the bottom which creates a neat highlight effect for the active filter.

All
  • All
  • Beaver Builder
  • PowerPack
  • UABB
posts2x
Restaurant / Services Menu
beaver builder heading module
Fancy Heading
beaver builder tabs module
Advanced Tabs
beaver builder tabs module
Advanced Tabs
Image & Colour Row Background
Image & Colour Row Background
beaver builder heading module
Heading
button2x
Button
testimonials2x
Testimonials
beaver builder tabs module
Tabs
subscribe2x
Subscribe Form
social-buttons2x
Social Buttons
Beaver Builder Slideshow Module
Slideshow
pricing2x
Pricing Table
posts-slider2x
Posts Slider
posts-carousel2x
Posts Carousel
[beaver_tunnels] [/beaver_tunnels]

Leave a Comment