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.

• Installera och aktivera ElementsKit plugin from your WordPress dashboard.
• Navigera till ElementsKit > Widgets.
• Leta upp Bildjämförelse widget in the list, toggle it to PÅ, and save your changes.

Step 2: Upload Before After Images for Comparison Slider

Open your desired page with Elementor, drag the Bildjämförelse widget into a section, and establish your visual content.

• Välj stil: Choose between a Horisontell (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 Innehåll tab, expand the inställningar 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 PÅ 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 PÅ to allow users to instantly snap the slider to wherever they click on the image.

Step 4: Style Image Before After Image Slider Container

Byt till Stil tab to customize the aesthetics of your comparison tool to match your brand.

Under General Option:

• Customize the container’s Kanttyp, Gränsradie, Stoppning, och Box Shadow 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 Färg, Typografi, Bakgrundstyp, Marginal, och Stoppning 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 Vanligt och Sväva 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 Divider Tjocklek och Avdelare Färg.

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 Uppdatering eller Publicera to push the changes live.

Vanliga frågor

Slutsats

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.