Layer Options

Layer options are edited from the Layer Settings panel in the builder. These settings affect only the currently selected layer.

Where to Find Them

In the builder, layer options are available in the panel whose content area is labeled layer-settings.

[screenshot_here]

Typical Layer Workflow

After adding a layer:

1. click the layer to make it active
2. open Layer Settings
3. set the content first
4. set the visual style
5. add animation if needed
6. use Advanced only when you need actions, callbacks, custom CSS, or attributes

This order prevents style and action work from being lost while the content is still changing.

Context Menu Access

Many layer actions are also available from the canvas context menu.

To open it:

• right-click a layer in the builder canvas

This is useful when you want to work quickly without leaving the canvas to open another panel or toolbar group.

Typical context-menu actions include:

• hide or unhide
• lock or unlock
• clone
• settings
• delete
• remove from group
• copy, paste, or clear style
• transform, align, and arrange actions

Use the context menu for fast layer management, then use the main Layer Settings panel when you need deeper content, style, animation, or advanced configuration.

Layer Settings Tabs

The layer settings area is organized into tabs. The available tabs include:

• Basic
• Content
• Styles
• Animation
• Advanced

Some tabs or field groups appear only for specific layer types.

Basic Tab

The Basic tab contains the core placement and visibility settings for a layer.

Basic Group

Typical basic options include:

• layer name
• horizontal offset
• vertical offset
• width
• height
• aspect ratio lock
• rotation
• opacity
• blur
• hide state
• lock state

Device Visibility

The layer settings also include device visibility toggles for:

• desktop
• tablet
• phone

Multi-Selection and Group Management

Layer settings still apply to one active layer at a time, but the builder also supports selecting multiple layers for management tasks.

Use multi-selection when you want to:

• group several layers together
• prepare a shared drag move
• build compound layouts such as cards, badges, and CTA blocks from separate layers

The most important related actions are:

• Shift + Click to add or remove layers from the current selection
• drag-select on the canvas
• Ctrl + A to select all layers on the current slide
• Ctrl + G to group selected layers or ungroup the active grouped layer

Grouping does not merge layers into one layer type. It only links them for builder movement and management.

[screenshot_here]

[screenshot_here]

Content Tab

The Content tab changes depending on the selected layer type.

Text Layer Content

Text layers are now plain text layers.

Use them for:

• headings
• short paragraphs
• labels
• simple text blocks

Text layers no longer act as caption presets and should not be used as free-form HTML containers.

Caption Layer Content

Caption layers are separate from text layers.

Use them when you want one of the built-in caption treatments:

• Alpha
• Bravo
• Charlie
• Delta

Caption layers keep their own caption style controls, typography, text fill, text shadow, and caption-only background styling.

HTML Layer Content

HTML layers are the correct place for custom markup.

Use them when you need:

• inline HTML structure
• custom wrappers inside one layer
• richer markup than a plain text layer should allow

HTML layers are also the best place for markup-oriented placeholders in source-driven sliders, especially:

• {{featured_image}}
• {{video_embed}}
• linked card markup that wraps {{post_title}} and {{post_excerpt}}

HTML layers can also be used for intentional third-party embed markup, such as a Vimeo iframe, when you want custom embedded media layout inside the slide.

Image Layer Content

Image layers focus on image source and image-related content fields.

Audio Layer Content

Audio layers support source and player-related content fields such as:

• audio source provider
• MP3 URL
• OGG URL
• poster or cover image
• theme color
• autoplay
• loop
• volume
• muted state
• click-to-play
• hide controls
• display duration
• invert time
• fullscreen
• playback speed
• quality
• seek time
• ratio

Video Layer Content

Video layers support:

• HTML5 video sources
• YouTube video source
• Vimeo video source
• poster or cover image
• provider-specific media fields

Button and Icon Layer Content

Button and icon layers include the visible label, icon selection, or other layer-type-specific content fields.

[screenshot_here]

Source Placeholders in Layers

When the slider Source Type is set to Posts, JSON import, or YouTube Playlist, layer content can be used as a template.

At render time, the plugin replaces placeholders with values from each queried post or JSON item.

Common cross-source placeholders include:

• {{post_title}}
• {{post_excerpt}}
• {{post_content}}
• {{featured_image}}
• {{post_date}}
• {{post_author}}
• {{post_link}}
• {{custom_field:field_name}}

In JSON import, direct JSON keys also work.

Examples:

• {{title}}
• {{description}}
• {{image_url}}
• {{link_url}}
• {{author.name}}

In YouTube Playlist, direct feed keys also work.

Examples:

• {{title}}
• {{description}}
• {{video_url}}
• {{embed_url}}
• {{featured_image}}
• {{channel_title}}
• {{published_at}}
• {{video_id}}

Recommended Layer Usage

Use placeholders in these layer types:

• Text for items like {{post_title}} or {{post_date}}
• Caption for styled headline treatments such as {{post_title}}
• Button for labels such as Read More paired with post-linked actions
• HTML for markup-heavy output such as {{featured_image}} and {{video_embed}}

Recommended rule:

• use text-like layers for text placeholders
• use HTML layers when the placeholder should output markup or be wrapped in custom structure

For source-driven videos, use:

• {{video_url}} when you need the raw watch or media URL
• {{video_embed}} when you want the slider to render a playable video inside the layer

The HTML layer stretches embedded source-driven players to the full width and height of the layer frame, so it is the correct layer type for video-card layouts.

Example Placeholder Patterns

Text layer:

{{post_title}}

JSON text layer:

{{title}}

YouTube HTML layer:

<div class="video-card">
  <h3>{{title}}</h3>
  <div class="video-player">{{video_embed}}</div>
  <p>{{description}}</p>
</div>

Caption layer:

{{post_date}}  •  {{post_author}}

Text layer excerpt:

{{post_excerpt}}

HTML layer:

<a href="{{post_link}}" class="news-card-thumb">{{featured_image}}</a>

JSON HTML layer:

<a href="{{link_url}}" class="news-card-thumb">{{featured_image}}</a>

Custom field example:

{{custom_field:price}}

Styles Tab

The Styles tab controls the visual appearance of the selected layer. Some style groups are limited to specific layer types.

Common style options include:

• text color
• background color
• gradient fill
• font family
• Google Fonts selection
• font subset
• font weight
• font style
• font size
• line height
• text transform
• text alignment
• border color
• border width
• border style
• border radius
• text shadow
• drop shadow
• layer-specific visual treatments

Different layer types expose different style controls. For example:

• text layers expose plain text typography and text fill controls
• caption layers expose caption design, typography, text fill, and caption-only background styling
• HTML layers expose content-oriented styling without the caption selector or text typography controls
• shape layers expose appearance and block styling controls
• button layers combine text and box styling
• icon layers expose icon color and icon-related styling

Gradient fill is available on:

• text layers
• shape layers
• button layers
• icon layers

For image layers, the recommended approach is a gradient overlay rather than recoloring the image itself. Images already provide dedicated adjustment controls such as brightness, contrast, hue, saturate, sepia, invert, and grayscale, so an overlay keeps image styling more predictable.

Caption styles are now reduced to four core options:

• Alpha
• Bravo
• Charlie
• Delta

Text shadow is no longer tied to separate - Text Shadow caption variants.

Current shadow rules:

• caption text shadow can be used directly on the remaining caption styles
• caption drop shadow is only intended for Delta
• caption background color and caption background gradient are intended for Bravo, Charlie, and Delta

Text gradient and caption background gradient are separate controls on the caption layer.

[screenshot_here]

Animation Tab

The Animation tab controls how the layer enters and leaves the slide.

Typical animation-related options include:

• animation in
• animation out
• animation speed
• animation delay
• sequencing and timing fields used during slide playback

These settings work together with the slider-level default animation timing options.

Advanced Tab

The Advanced tab is used for interaction and additional behavior.

Typical advanced options include:

• Attributes
• Custom CSS
• Actions

The advanced area is where interactive layers such as buttons can trigger actions on click, hover, or custom events.

[screenshot_here]

History and Group Operations

Grouping and ungrouping are treated as builder history actions.

That means:

• grouping layers creates a history point
• ungrouping layers creates a history point
• dragging a grouped selection creates a drag history point when the move is completed

This lets you test layout combinations and still step backward safely with undo and redo.

Attributes

Use Attributes when you want to add identifying markup to the layer or its wrapper.

Examples:

• Layer Class: cta-button highlight
• Wrapper ID: hero-offer-wrap
• Wrapper Class: hero-offer outer-frame
• Title: Open special offer
• Layer Data: data-offer="spring", data-step="1"
• Wrapper Data: data-group="hero", data-theme="dark"

For image layers, you can also control the ALT Source:

• WP Media Library
• Filename
• Custom

If you choose Custom, enter your own value in Custom ALT.

[screenshot_here]

Custom CSS

Use Custom CSS when you want to target one layer without editing the plugin stylesheet.

The special placeholder {{THIS_LAYER}} is replaced with the current layer selector.

Example:

{{THIS_LAYER}} {
  border: 2px dashed #ff6600;
}

{{THIS_LAYER}} .czzs-txt-content {
  letter-spacing: 2px;
}

This is the safest way to write CSS that should affect only one layer.

[screenshot_here]

Actions

Use Actions to bind layer behavior to:

• Click
• Mouse Enter
• Mouse Leave
• Custom Event

Common built-in actions include:

• go to link
• go to next or previous slide
• go to a specific slide
• pause, resume, stop, or restart the slider
• scroll to a page location
• click, remove, or animate another layer
• play, pause, stop, mute, or unmute media
• run a callback function

Testing a Custom Event

Example setup:

• Event: Custom Event
• Event Name: promoOpen
• Action: Go to Next Slide

Example test:

jQuery('#your-layer-id').trigger('promoOpen');

Vanilla JavaScript version:

document.getElementById('your-layer-id')?.dispatchEvent(new Event('promoOpen'));

This is useful when another part of the page needs to trigger a slider layer action programmatically.

If you are wiring the event from your own button or custom UI, you can also do it this way:

jQuery(function ($) {
  $('#open-promo-button').on('click', function () {
    $('#your-layer-id').trigger('promoOpen');
  });
});

Vanilla JavaScript version:

document.getElementById('open-promo-button')?.addEventListener('click', function () {
  document.getElementById('your-layer-id')?.dispatchEvent(new Event('promoOpen'));
});

Notes:

• the jQuery trigger remains the most reliable testing method for ZoroSlider custom layer events
• use the vanilla version when you prefer native DOM events in your own scripts

Testing an Inline Callback

Example setup:

• Event: Click
• Action: Callback Function
• Callback Type: Inline

Example Callback Function value:

console.log('Inline callback fired');
alert('Inline callback fired');

Inline callbacks are best for small tests or very short layer-specific behavior.

Testing an External Callback

Example setup:

• Event: Click
• Action: Callback Function
• Callback Type: External
• Callback Name: myZoroLayerCallback
• Callback Args: hello, 2, true, #target-block

Example page script:

<script>
function myZoroLayerCallback(message, count, enabled, selector) {
  console.log('External callback fired');
  console.log(message, count, enabled, selector);
}
</script>

Notes:

• the callback name must be a global function name
• callback args are passed in the same order as entered
• External callbacks are recommended for reusable production logic

[screenshot_here]

Layer Options vs Slide Options

Use layer options when you want to change a single item inside a slide.

Examples:

• move a heading
• resize a button
• change one icon color
• replace one video layer
• animate one image differently from the rest

Use slide options instead when you want to change the background and media frame of the current slide.