Plugin: Pro Version

Creating a 3 images Slider from admin dashboard:

With the “Before After Image Slider” Pro version, you can enhance your image comparisons by creating sliders with three images. Follow these step-by-step guidelines to create a 3 images slider from the admin dashboard:

1. Access the Before After Sliders Menu

• Log in to your WordPress admin panel.
• Locate the “Before After Sliders” menu on the left-hand side.

2. Click the “Add New” button within the “Before After Sliders” menu to begin creating a new slider.

3. In the “Before Image“, “Middle Image” and “After Image” sections, click the “Select Image” button to upload or select images from your media library.

4. Customize Labels

• Add labels to the “Before Image Label“, “Middle Image Label” and “After Image Label” fields for additional context.

5. Set Slider Options

• Choose the orientation of your slider, either horizontal or vertical, to suit your content.
• Select the trigger type (drag or hover) that you prefer for interaction.
• Toggle the overlay to enable or disable its visibility on your images.
• Toggle the “Show Labels” switch to display the labels on your slider.

6. After configuring your slider, Copy the shortcode, click the “Add shortcode” Block to add it and page the shortcode to your post or page.

7. If satisfied, click “Publish” to make your content live.

Congratulations! You’ve successfully created a new slider with three images using the “Before After Image Slider” Pro version. Your audience can now engage with even more precise and impactful image comparisons on your website.

Styling the Slider from admin dashboard:

The Pro version allows you to style your sliders to match your website’s aesthetics. Follow these step-by-step guidelines to style a slider from the admin dashboard:

1. Access the Before After Sliders Menu

• Log in to your WordPress admin panel.
• Locate the “Before After Sliders” menu on the left-hand side.

2. Click on an existing slider to edit its settings, or click the “Add New” button to create a new slider.

3. Configure the before and after images, labels, orientation, trigger type, overlay, and other slider options as desired.

4. Find the “Style” tab to the right of the Content tab, and click on it to access styling options for your slider.

5. Customize Overlay Appearance

• Customize the overlay background color to match your website’s color scheme.
• Apply a gradient background to the overlay for a visually appealing effect.

6. Design the Handle

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

7. Modify Divider Style

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

8. Personalize Label Appearance

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

9. Apply Changes and Preview

• After styling your slider, click the “Update” button to save your changes.
• Preview the slider to see how the applied styles enhance its visual appeal.

Congratulations! You’ve successfully styled a slider using the “Before After Image Slider” Pro version. Your slider’s customized appearance will enhance user engagement and seamlessly integrate into your website’s design.

Creating a 3 images Slider from Elementor builder:

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.