Featured Images Slider Element

Last Update: February 1, 2024

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Featured Images Slider Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Featured Images Slider Element

The Featured Images Slider Element allows you to place featured images (either single, or if multiple, in a slider) anywhere in a Content Layout Section, in any Layout.

When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Featured Images Slider Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.

The Featured Images Slider Element can be placed anywhere in you Layout Section, and will dynamically pull any connected Featured Image, or images, into the page, based on the settings in the Element, and the Conditions set in the Layout. For example, you might choose a certain size and hover effect in the Featured Images Slider Element, and set the condition for the Layout only to display on Single Posts.

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Show First Featured ImageTurn on if you don't want to display first featured image.
Hover TypeSelect the hover effect type.
Image Size DimensionsDimensions in percentage (%) or pixels (px).
LightboxShow image in lightbox. Lightbox must be enabled in Global Options.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.

In this article