Get Bricks

Slider (Nestable) Element

The Slider (Nestable) element allows you to place other elements inside for each slide thus enabling you to build either a static or a dynamic (ex.: posts showing title, excerpt) or a static + dynamic slider.

Dynamic Slider

Here are the steps to set up a dynamic posts slider.

While they can be left intact, you may want to delete the default Slide 2 and Slide 3. If they are not deleted these static slides will be shown in addition to your dynamic slides. This way, it is possible to add an intro and conclusion slides if you wish.

Select one of the default slides like “Slide 1”.

Enable “Use query loop”.

By default, the query loop fetches 10 posts. If you wish to change this to say, pull the latest items of a Custom Post Type instead, click the query icon and configure your query as needed.

Click the Heading element, delete “Slide 1” text, click the dynamic data bolt icon and select “Post title”.

Select the Button element, change its text to something like “Learn more →”.

Link type: Dynamic Data.

Click the dynamic data bolt icon and select “Post link”.

Save your Page/template and view it on the front end.

You can navigate to the next/previous slide by pressing the dot bullets at the bottom.

To show left and right navigation arrows, select your “Slider (Nestable)” element, open the ARROWS control group, toggle Show on. Then click on the circle for the Prev arrow, select your favorite icon library, search for left or arrow and select an icon of your choice.

Repeat for the right icon (next arrow).

You can change the color of the icons and their positions as needed.

If you are wondering where the light gray is coming from for the slider, it’s automatically set for your “Slider (Nestable)” element. Go to that element’s STYLE → BACKGROUND → Background Color.

Next, let’s set the post’s featured image as the background image for each slide.

Select Slide 1 (hint: you could rename this to just “Slide” if you want).

Go to STYLE → BACKGROUND.

Click the dynamic data bolt icon and select/search for “Featured image”.

Change the image size and configure other properties as needed.

A color overlay can be set in the GRADIENT / OVERLAY control group.

Here is an example of a dynamic posts slider in action: