Plugin: Free Version

Creating a New Slider from admin dashboard:

The Before After Image Slider plugin empowers you to create captivating image comparisons effortlessly. Follow these step-by-step guidelines to create a new slider using the free version of the plugin:

1.  After logging in to your WordPress admin panel, locate the “Before After Sliders” menu on the left-hand side.

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

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

4. Image Sizes and Labels

• Add any image size that you prefer for interaction .
• Add labels to the “Before Image Label” and “After Image Label” fields for additional context.

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

6.  Once your slider is configured, scroll down to the “Shortcode” section.

7. Open the post or page where you want to display your Before After Image Slider.

8. Update or publish your post or page to see the shortcode in action.

Assuming your copied shortcode is ［coca_bais id="12"］, when you paste this shortcode into your content, the slider with the ID “12” will be displayed where you’ve placed the shortcode.

Benefits of Using Shortcodes:

Flexible Placement: Shortcodes allow you to add sliders anywhere on your website’s content, whether it’s a blog post, page, or custom post type.

1. Consistent Styling: Shortcodes ensure that your sliders maintain a consistent style and appearance across different content sections.
2. Easy Updates: If you need to modify a slider’s configuration, you can do so from the plugin’s admin area, and the changes will reflect automatically wherever you’ve used the shortcode.
3. Efficient Workflow: Shortcodes streamline your workflow, enabling you to manage and display sliders without directly editing HTML or code.

By using shortcodes, you can seamlessly integrate your Before After Image Sliders into your content, enhancing user engagement and storytelling with captivating image comparisons.

Creating a New Slider from Elementor builder:

Elementor Page Builder makes it easy to integrate the “Before After Image Slider” plugin into your website. Follow these step-by-step guidelines to create a new 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 select 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 its settings.
• Configure your slider by adding before and after images, 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 slider looks on the page.

Congratulations! You’ve successfully created a new slider using the “Before After Image Slider” widget within Elementor Page Builder. Your audience can now enjoy interacting with engaging image comparisons directly on your website.