How to Use the Stacked Slider Widget in Elementor?

What is the Stacked Slider widget?

The Stacked Slider widget is a unique and dynamic tool that displays content in a visually layered format, where slides appear to be stacked on top of one another. As a user navigates through the slides, the top card moves away to reveal the next one underneath, creating a modern and interactive user experience. This widget is perfect for showcasing product highlights, testimonials, or key features in a non-traditional, engaging way.

Common use case

A common use case for the Stacked Slider widget is to present a series of key features or benefits on a product page. Instead of a standard slider, the stacked effect draws the user’s attention to each point as it’s revealed. This creates a sense of progression and discovery, effectively guiding visitors through the product’s value proposition in a memorable way.

Additional use cases

• Highlighting portfolio projects: Present a series of design or photography projects.
• Showcasing team members: Display team profiles with a photo and a brief bio.
• Customer testimonials: Feature quotes and images from satisfied clients.
• Step-by-step guides: Create an interactive guide to a process or service.

Requirements

• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation blog post.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the powerful Stacked Slider widget to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor.
2. Search for the Stacked Slider widget.
3. Drag the widget to your desired location on the page.
4. Configure the widget’s settings in the left-hand panel.
5. Update the page to save your changes.

We’ll show you how to add images and adjust the position of a stacked slider. Learn how to customize slider elements such as title, description, button text, and links. We’ll also cover how to toggle the dots indicator and control slider animations.

Settings for the Stacked Slider widget

The Stacked Slider widget offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.

Content tab

• Content:
  1. Position: Set the vertical position of the slide content.
  2. No Images Selected: Click the + icon to add an image for your slide.
  3. Title: Enter a title for the slide.
  4. Title HTML: Choose the HTML tag for the title (e.g., H3).
  5. Description: Enter a description for the slide.
  6. Button Text: Enter the text for the button (e.g., “Lets Go”).
  7. Button Link: Add a URL for the button.

• Advance:
  • Dots: Toggle to show or hide navigation dots.
  • Autoplay: Toggle to enable or disable autoplay.
  • Animation Speed: Set the speed of the slide transition in milliseconds.

Stacked Slider Styles

You’ll learn how to style various elements of a stacked slider, including the box, title, description, buttons, images, and dots.

Box:

1. Vertical Position: Set the vertical alignment for the box.
2. Background Color: Set the background color of the slide box.
3. Space Between: Adjust the space between each stacked slide.

Contents:

1. Alignment: Set the horizontal alignment for the slide content.
2. Padding: Adjust the padding inside the content box.
3. Title:
   • Typography: Customize the typography for the title.
   • Text Stroke: Add a text stroke to the title.
   • Spacing: Adjust the spacing below the title.
4. Description:
   • Typography: Customize the typography for the description.
   • Text Stroke: Add a text stroke to the description.
   • Spacing: Adjust the spacing below the description.
5. Colors:
   • Title Color: Set the color of the title for normal and hover states.
   • Description Color: Set the color of the description for normal and hover states.
   • Button:
     • Typography: Customize the button typography.
     • Padding: Adjust the button’s padding.
     • Background Color: Set the button’s background color for normal and hover states.
     • Text Color: Set the button’s text color for normal and hover states.
     • Border Type: Add a border to the button.
     • Border Radius: Adjust the corner radius of the button.
     • Box Shadow: Add a box shadow to the button.

Image:

1. Alignment: Set the horizontal and vertical alignment of the image.
2. Width: Set the width of the image.
3. Padding: Adjust the padding around the image.

Dots:

1. Dot Color: Set the color of the navigation dots.
2. Dot Active Color: Set the color of the active dot.
3. Dot Distance: Adjust the spacing between the dots.
4. Text Alignment: Set the alignment of the navigation dots.