Slides and Layers

Slides

Each slider is made up of one or more slides. A slide can use:

• a solid background color
• a background image
• a background video

Background videos can be configured with:

• YouTube
• Vimeo
• HTML5 video files

Create and Manage Slides

Slides are managed from the builder through Manage Slides.

Common slide tasks:

1. create a new slide
2. switch the active slide
3. clone a slide
4. hide or show a slide
5. delete a slide
6. reorder slides

Typical workflow:

1. open Manage Slides
2. add the slide
3. set the slide background in Slide Settings
4. add the required layers
5. move to the next slide and repeat

For the actual background controls, see Slide Options.

Slide Options

Slide options define the frame that your layers sit on.

Typical slide settings include:

• background color
• background image
• background video source
• video cover image where supported
• slide-level visual composition

[screenshot_here]

Layer Types

Text

Use text layers for:

• headings
• paragraphs
• labels
• simple text blocks

Text layers are plain-text oriented.

Caption

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

• Alpha
• Bravo
• Charlie
• Delta

Caption layers are the styled presentation layer for headline-style text.

HTML

Use HTML layers when you intentionally need custom markup inside one layer.

Image

Use this for logos, product images, illustrations, and decorative graphics.

Audio

Audio layers support HTML5 audio files and a configurable player interface.

Video

Video layers support:

• HTML5 video
• YouTube
• Vimeo

Shape

Use shapes for blocks, overlays, highlight bars, and decorative accents.

Button

Use button layers for calls to action and linked actions.

Icon

Use icon layers for visual accents, feature highlights, or icon-based buttons.

Add Layers to a Slide

To add a layer to the active slide:

1. select the target slide
2. open the Add Layer control
3. choose the layer type
4. place the layer on the canvas
5. open Layer Settings
6. configure the content, style, animation, and advanced behavior if needed

Use Text, Caption, Shape, and Button together when you want to build structured visual blocks such as cards, callouts, promo banners, and badges without writing custom HTML by hand.

Common Layer Controls

Depending on the selected layer type, you can configure:

• position
• width and height
• font and text styling
• caption styling where relevant
• spacing
• colors
• borders and radius
• shadows
• opacity
• transforms
• entrance and exit animation
• timing and delay
• hover styles
• actions and interactions

Working With Multiple Layers

Zoro Slider supports multi-layer selection on the active slide.

Use it when you want to:

• group layers
• move several related layers together
• prepare a card-style composition from separate primitive layers

You can build multi-selection by:

• holding Shift and clicking layers one by one
• drag-selecting layers on the canvas
• using Ctrl + A to select every layer on the current slide

[screenshot_here]

Layer Groups

Layer groups are made from normal individual layers. They are not a separate content type.

This is useful because:

• each layer keeps its own content and style controls
• grouped layers can still be edited individually later
• the group can be moved together as one composition

Common examples:

• a card built from a shape background, heading, paragraph, icon, and button
• a pricing badge made from a shape and two text layers
• a CTA block made from a caption layer and button layer

Grouping Layers

To group layers:

1. select two or more layers
2. use the builder group action
3. or press Ctrl + G

Ungrouping Layers

To ungroup:

1. select one layer that belongs to the group
2. use the ungroup action
3. or press Ctrl + G

Dragging a Group

When one grouped layer is dragged, the other grouped members follow during the same drag action.

This makes it easier to reposition a complete layered composition without rebuilding it.

Layer Option Groups

Layer settings are easier to understand when grouped by purpose:

Basic Options

These control the layer frame itself.

• top
• left
• width
• height
• rotation and transforms
• alignment

Content Options

These control what the layer displays.

• text content
• caption content
• HTML content
• image source
• audio source
• video source
• button label
• icon selection

Style Options

These control visual appearance.

• colors
• font family
• font size
• line height
• spacing
• borders
• radius
• shadows
• opacity

Animation Options

These control how the layer enters and exits.

• animation in
• animation out
• animation speed
• animation delay

Advanced Options

These control interaction and behavior beyond simple appearance.

• hover states
• action triggers
• callback behavior where configured
• custom attributes used by the slider

[screenshot_here]