Featured Images Slider Element

24/08/2020

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

IMPORTANT NOTE: The Layout Section Elements are only available when editing Content Layout Sections in Avada Layouts.
View The Featured Images Slider Element Page!

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 Section 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.

See below for an example of the Featured Images Slider Element added to the Single Post Layout, on the Taxi Demo.

Featured Images Slider Element Example

Element Options

Location: The edit screen within each Element.

You can deploy the Layout Section Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Show First Featured Image – Turn on if you don’t want to display first featured image.

  • Hover Type – Select the hover effect type. Choose from Zoom in, Zoom Out, or Lift Up.

  • Image Size Dimensions – Dimensions in percentage (%) or pixels (px).

  • Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the Element.

  • CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

  • Margin – Enter values including any valid CSS unit, ex: 4%.

View The Options Screen

Global Options

Layout Section Elements do not have any Global Options.