How To Create Image Slider In Elementor

With the “Before After Image Slider” Pro version and Elementor Page Builder, you can effortlessly craft engaging image comparisons using three images.

Follow these step-by-step guidelines to create a 3 images slider using Elementor:

1. Log in to your WordPress admin panel and navigate to the page where you want to add the slider. Alternatively, create a new page.

2. Add a New Section

• Within Elementor, click the “Edit with Elementor” button to enter the page builder interface.
• Add a new section by clicking the “+” icon, then choose a structure that suits your content layout.

3. Within the newly created section, click the “Add Widget” button to insert a widget into the section.

4. In the Elementor widget panel, search for the “Before After Image Slider” widget and drag it into the section.

5. Configure the Widget

• Click on the widget to open “Before & After Images” under the Content Tab.
• Configure your slider by adding images for “Before,” “Middle,” and “After,” adjusting orientation, trigger type, overlay, labels, and more.

6. Update and Preview

• After configuring the widget, click the “Update” button to save your changes.
• Click the “Preview” button to see how your new 3 images slider looks on the page.

Congratulations! You’ve successfully created a new 3 images slider using the “Before After Image Slider” widget within Elementor Page Builder. Your audience can now interact with impactful and precise image comparisons directly on your website.

Styling the Slider from Elementor builder:

With the Pro version and Elementor Page Builder, you can easily style your sliders to match your website’s design. Follow these step-by-step guidelines to style a slider using Elementor:

1. Log in to your WordPress admin panel and navigate to the page containing the slider you want to style. Alternatively, create a new page.

2. Edit the Slider Section

• Within Elementor, click the “Edit with Elementor” button to enter the page builder interface.
• Locate the section containing the “Before After Image Slider” widget.

3. Configure Slider Widget

• Click on the “Before After Image Slider” widget to open its settings.
• Configure your slider content and options, including before and after images, labels, orientation, trigger type, overlay, and more.

4. In the widget settings, navigate to the “Styles” tab to access the slider styling options.

5. Customize Overlay Appearance

• Customize the overlay background color to match your website’s design.
• Optionally, apply a gradient background to the overlay for a more visually engaging effect.

6. Design the Handle

• Customize the appearance of the slider handle:
• Choose the arrow color.
• Set the background color or gradient for the handle.
• Adjust border style, width, and color for the handle.

7. Modify Divider Style

• Customize the appearance of the divider:
• Choose a color that complements your design.
• Adjust the width of the divider.

8. Personalize Label Appearance

• Specify label alignment and orientation for optimal placement.
• Customize text color, background color, and background gradient.
• Choose border style, padding, and other settings.

9. Update and Preview

• After styling your slider, click the “Update” button to save your changes.
• Click the “Preview” button to see how your styled slider looks on the page.

Congratulations! You’ve successfully styled a slider using the “Before After Image Slider” widget and Elementor Page Builder. Your customized slider will seamlessly integrate into your website’s design, enhancing user engagement with captivating image comparisons.