How to Add Before After Image Slider in WordPress

Also, watch in action ⬇️

How to Add Before After Image Slider in WordPress

Let’s go through step-by-step process of adding a before after image slider in WordPress: 

Step 1: Install & Activate ElementsKit Elementor Addon

Before building the slider, ensure the required tools are active on your site.

• Installieren und aktivieren Sie das ElementsKit plugin from your WordPress dashboard.
• Navigieren Sie zu ElementsKit > Widgets.
• Suchen Sie die Bildvergleich widget in the list, toggle it to AN, and save your changes.

Step 2: Upload Before After Images for Comparison Slider

Open your desired page with Elementor, drag the Bildvergleich widget into a section, and establish your visual content.

• Stil auswählen: Choose between a Horizontal (side-to-side) or Vertikal (top-to-bottom) container style.
• Upload Before Image: Click the image placeholder to select the original photo from your media library.
• Add or Edit Before Image Label: Type the text for the “Before” tag (e.g., “Original,” “Old,” “Before”).
• Upload After Image: Click the second image placeholder to select the transformed photo.
• Add or Edit After Image Label: Type the text for the “After” tag (e.g., “Retouched,” “New,” “After”).

Step 3: Configure Before After Image Slider Functionality

Define how users will interact with the slider handle. Under the Inhalt tab, expand the Einstellungen section:

• Set Offset: Use the slider to determine where the handle sits by default upon page load (e.g., set to 50% for dead center, or 70% to reveal more of the “Before” image initially).
• Enable to Remove Overlay: Toggle this button to add or remove the dark overlay effect that appears before interaction.
• Enable to Move Slide on Hover: Toggle this button AN if you want the slider handle to follow the user’s mouse automatically without requiring a click.
• Enable to Move by Click: Toggle this button AN to allow users to instantly snap the slider to wherever they click on the image.

Step 4: Style Image Before After Image Slider Container

Wechseln Sie zum Stil tab to customize the aesthetics of your comparison tool to match your brand.

Under General Option:

• Customize the container’s Randtyp, Grenzradius, Polsterung, Und Box Schatten to frame the images neatly.

Under Label Option: (Note: You can set different styling independently for both the “Before” and “After” labels.)

• Adjust the label Farbe, Typografie, Hintergrundtyp, Marge, Und Polsterung to ensure the text is readable against your specific images.

Under Handle Option:

• Control Width & Height: Size the draggable handle.
• Background Type, Arrow Color, & Box Shadow: Customize these elements for both Normal Und Schweben states.
• Margin & Border Radius: Refine the shape of the handle (e.g., set a high border-radius for a circular handle).

Under Handle Divider Option:

• Control the vertical line separating the two images by adjusting the Teilerdicke Und Teilerfarbe.

Step 5: Preview & Publish Before After Image Slider

Use Elementor’s Responsive Mode to check how the slider behaves on tablet and mobile devices. Once you are satisfied with the touch functionality and image alignment, click Aktualisieren oder Veröffentlichen to push the changes live.

FAQs

Abschluss

Adding a before-and-after image slider to your WordPress site is one of the most compelling ways to visually prove your value and showcase real results. With the ElementsKit Image Comparison widget, you eliminate the need for custom coding and can build an interactive, mobile-responsive slider in minutes. 

By giving your visitors a hands-on way to explore your transformations, you instantly build trust and keep them engaged on your page longer.