Case Studies Post List

Case Studies Post List custom WPBakery Page Builder element, added by Loyde, renders a list of cards representing case studies. "Case studies" are single posts of the Case Study custom post type added by Loyde.

Cards can be rendered as:

• Regular Grid
• Masonry Grid
• Slider

How to choose the output mode

Steps:

1. Add a Case Studies Post 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, Case Studies Post List loads:

• 10 case study posts
• ordered by date, descending (i.e. most recent first).

But it's possible to customize this.

Steps:

1. Add a Case Studies Post 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 Case Studies Post 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 choose a predefined cards design, instead of manually styling the cards

Instead of manually customizing cards styling, it's possible to choose one of the predefined cards designs. Predefined designs are part of the Loyde theme.

Steps:

1. Add a Case Studies Post List instance to the edited page or post
2. Open Settings
3. Open tab "Card Builder"
4. Under "Styles for Post List Cards" choose a value other than "Default"
5. Save changes.

How to rearrange cards fields

Steps:

1. Add a Case Studies Post 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 Case Studies Post 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 Case Studies Post 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 Case Studies Post 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.