Layer Responsive Behavior

1. Auto Responsive

Choose to make the layer responsive by default (layer will resize when slider resizes).

2. Child Elements Responsive

If the layer contains additional content (raw HTML, shortcode from other plugin, etc.), the slider will attempt to resize all nested elements.

2. Boxed (Grid Based) vs. Full-Width (Slide Based) Alignment

back to menu

Layer Alignment is particularly useful for when using Full Width slider, as sometimes you want your content to align to the sides of the screen as opposed to your slider’s “Layers Grid” size.

In the following example, the layer has a “top left” alignment, with an “Offset X” of 115px and an “Offset Y” of 65px.

The example slider below has a “Full Width” Slider Layout and a “Layers Grid” of 600×400.  When the screenshots were taken, the screen size was 900px wide, so the slider had also “responded” to this width.

Align -> Grid Based (boxed)
Layer will always be aligned and positioned based on the slider's grid size (i.e. 115px from the left of the Layer's Grid boundaries).
Align -> Slide Based (full-width)
Alignment and positioning of Layers will always be based on the slider's actual size (i.e. 115px to the left of the screen).

In the following example, the layer has a “top left” alignment, with a 50px offset from the top and left.

Responsive Offset: ON

When the slider is resized down by 50%, the Layer’s original “Offset” values are also reduced by 50%.

Responsive Offset: OFF

When the slider is resized down by 50%, the Layer’s original “Offset” values are NOT reduced or changed.

1. Lazy Loading: 

Default Settings – Image will be loaded according to the slider’s global Lazy Load setting.

Force Lazy Loading – Lazy Load the image regardless of global Lazy Load setting.

Ignore Lazy LoadingDo not Lazy Load the image regardless of global Lazy Load setting.

2. Source Type:

Choose which version of the image should be loaded.  Often “Original” can equal a very large file size, so usually “Large” or “Medium” is a good choice for optimal loading performance.

Choose “Default Setting” to use the slider’s global Image Source Size setting.  Or override the default setting with one of the other choices.