Complex Custom WPBakery Elements

Content Boxes

The purpose of these WPBakery element is to act as a wrapper for any elements added inside them. This allows to manipulate the entire set of wrapped elements, for example:

  • adjust horizontal and vertical alignment of the content (contained elements inside)
  • change background color
  • trigger hover effect on all elements at once
  • etc.

This group of elements includes:

  • Flexible Content Box (and the corresponding Flexible Content Box Inner)
  • Table Cells Content Box (and the corresponding Table Cells Content Box Inner)
  • FAB Popup Content Box
  • Sticky Content Box.

All of these elements rely heavily on the "flexbox" CSS model.

Post Lists

The purpose of these WPB elements is to present a cards view of:

  1. blog posts (element Blog Post List)
  2. case studies (element Case Study Post List)
  3. team members (element Team Member Post List)
  4. events (element Event Post List)
  5. testimonials (Element Testimonial Post List)
  6. child pages (element Child Pages Post List).
  7. siblings pages (element Related Pages List).

Post lists offer a rich and powerful set of settings:

  • controlling the number of displayed posts
  • choosing number of columns
  • selecting and reordering fields used in posts cards
  • etc.

Using post lists

The usage is simple:

  1. Open a page or a post in WPBakery Page Builder editor.
  2. Open the "Add Element" dialog. Optionally, filter elements by clicking the "Creatopus" tab.
  3. Click the desired post list element (e.g. Blog Post List).
  4. Post list will be added to the page, and the settings modal will immediatelly open. It is not necessary to change the default values. But they can be changed, to better accommodate the specific scenario where the element is used.

Display Modes

Post Lists offer three possible display modes:

  • Grid
  • Masonry (i.e. masonry grid)
  • Slider

Common Scenarios

We'll present just a few specific use cases for post lists. The goal is to provide an overview of the possibilities offred by these powerful elements.

Display three blog posts, displayed as grid

Steps:

  1. Add Blog Post List to the page.
  2. In the settings modal, open tab "Grid Query".
  3. Click button "Build query".
  4. Under "Post Count", enter 3.
  5. Click "Save Changes", and finally save changes in the editor.

Display six events, displayed as slider

Steps:

  1. Add Event Post List to the page.
  2. In the settings modal, open the "General" tab.
  3. Under Functional mode" dropdown, select "Slider".
  4. Open tab "Grid Query".
  5. Click button "Build query".
  6. Under "Post Count", enter 6.
  7. Click "Save Changes", and finally save changes in the editor.

Display all testimonials, displayed as masonry grid

Steps:

  1. Add Testimonial Post List to the page.
  2. In the settings modal, open the "General" tab.
  3. Under Functional mode" dropdown, select "Masonry Grid".
  4. Open tab "Grid Query".
  5. Click button "Build query".
  6. Under "Post Count", enter word "All".
  7. Click "Save Changes", and finally save changes in the editor.

Display all case studies filtered by a taxonomy, and displayed as slider

Steps:

  1. Add Case Study Post List to the page.
  2. In the settings modal, open tab "Grid Query".
  3. Click button "Build query".
  4. Under "Post Count", enter 6.
  5. Under "Taxonomies", start typing the name of a desired taxonomy term (e.g. an industry or a service). When the autocomplete popup appears, select the taxonomy term name. If nothing appears, double-check if the taxonomy term is correctly entered. Also, please note that categories and tags taxonomies have a separate field for choosing terms.
  6. Click "Save Changes", and finally save changes in the editor.