How to Create a New Slide in Layered Slider Module

The Layered Slider module is a powerful tool for building dynamic sliders with over 100 2D, 3D, and HTML5/CSS3 effects. Whether you're showcasing products, promotions, or other content, this guide walks you through the process of creating a new slide and adding layers for a visually captivating user experience.

Step 1: Add a new slide

1. Open the module configuration page

Navigate to the Layered Slider module in your PrestaShop dashboard to access its configuration settings.

2. Click "Add slide"

Locate the "Add slide" button at the top of the configuration page and click to begin.

3. Fill in slide details

In the popup window, complete the following fields:

• Title: Enter a name for your slide (optional but helpful for organization).
• Background image: Upload an image (formats: JPG, PNG, GIF, WebP).
• Repeat X/Y: Choose "Yes" to repeat the background image horizontally or vertically.
• Background color: Set a background color (used when no image is selected).
• Animation In/Out: Select transition effects for the slide's entry and exit.
• Custom CSS class: Add a class for advanced styling.
• Enable: Toggle "Yes" to make the slide active.

4. Save the slide

Click "Save" to finalize and add the slide to your slider collection.

Step 2: Add and customize layers

1. Add a layer

After saving your slide, click "Add new layer" from the created slide to begin customizing its content.

2. Configure layer content

In the "Content" tab of the popup, specify:

• Layer type: Choose from Text/HTML, Image, Button, Link, or Text with background.
• Text content: Add the text (supports multiple languages).
• Font settings: Customize the font family, size, weight, color, text-transform, and decoration.

3. Set layer position

Switch to the "Position" tab to define the placement:

• Top (px): Distance from the top edge of the slide.
• Left (px): Distance from the left edge of the slide.

4. Configure transitions

Use the "Transition" tab to adjust the animation:

• Animation In/Out: Select effects for entry and exit transitions.
• Delay In/Out (ms): Set delays before transitions start.
• Move In/Out (ms): Specify the duration of the transition.

5. Save the layer

Click "Save" after configuring the content, position, and transitions.

Step 3: Arrange layers

1. Organize layers

• Use drag-and-drop functionality to arrange layers on your slide.
• Click and hold the layer, then reposition it as needed.

2. Save the arrangement

When you’re satisfied with the layer arrangement, click "Save" to lock in the changes.

Additional tips

• Duplicate, edit, or delete layers: Use the respective icons for quick layer management.
• Unlimited layers: Add as many layers as needed to create complex and engaging slides.

By following these steps, you can easily create and customize slides with engaging content layers in the Layered Slider module. With features like adjustable animations, precise positioning, and custom styling, you have all the tools needed to create stunning sliders that enhance your PrestaShop store.

For further assistance, don’t hesitate to reach out to our support team.