Related Pages List

Related Pages List custom WPBakery Page Builder element, added by Loyde, renders a list display all other pages which have the same parent page as the current page.

Cards can be rendered as:

  • Regular Grid
  • Masonry Grid
  • Slider

How to choose the output mode

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open Settings and open the "General" tab
  3. Under "Functional mode" select the desired output (rendering) mode
  4. Save changes.

How to customize loading of posts (number of loaded, ordering, filtering, ...)

By default, Related Pages List loads:

  • 10 pages (or less, if there aren't enough related pages)
  • ordered by date, descending (i.e. most recent first).

But it's possible to customize this.

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open Settings
  3. Open tab "Grid Query"
  4. Click button "Build query". This reveals a set of additional settings
  5. Fill in settings as desired. For example, change number of loaded, change ordering from "date" to e.g. "random", ...
  6. Save changes.

How to customize styling for individual cards

At first, cards will be displayed with a default styling which reflects Loyde design. But, it's possible to customize the cards styling.

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open Settings
  3. Open tab "Card Builder"
  4. Fill in settings as desired
  5. Save changes.

How to rearrange cards fields

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Card Builder" tab
  4. Under "Card Layout" activate, deactivate or reorder the fields as desired
  5. Save changes.

How to design the hover

In Related Pages List, hover state is built completely separately fro the regular state. This means that:

  • The hover state can contain the same fields as the regular state
  • Butfields could be e.g. reordered or styled in a completely different way.

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Card Builder" tab
  4. Under "Enable Hover Overlay Blocks?" tick "Yes". This will display additional setting below, "Card Layout - Hover Overlay Blocks"
  5. Under "Card Layout - Hover Overlay Blocks" activate, deactivate or reorder the fields as desired
  6. Save changes.

How to enable the filtering for the cards

It's possible to render a set of filters for the cards. On each click on a filter, displayed cards will be filtered down (only corresponding cards will remain visible). These filtering links will be displayed above the cards.

Steps:

  1. Add a Related Pages List instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Card Builder" tab
  4. Under "Show Filter?" tick "Yes". This will display additional setting below, "Filter By"
  5. Under "Filter By" select criteria for the filtering
  6. Save changes.

How to apply primary & secondary accent color to the element

See description here.

How to apply a basic styling, which applies to the element as a whole

See description here.