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.

• Installa e attiva il ElementsKit plugin from your WordPress dashboard.
• Navigare verso ElementsKit > Widget.
• Individuare il Confronto di immagini widget in the list, toggle it to SU, and save your changes.

Step 2: Upload Before After Images for Comparison Slider

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

• Seleziona stile: Choose between a Orizzontale (side-to-side) or Verticale (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 Contenuto tab, expand the Impostazioni 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 SU 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 SU to allow users to instantly snap the slider to wherever they click on the image.

Step 4: Style Image Before After Image Slider Container

Passa a Stile tab to customize the aesthetics of your comparison tool to match your brand.

Under General Option:

• Customize the container’s Tipo di bordo, Raggio del confine, Imbottitura, E Scatola Ombra 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 Colore, Tipografia, Tipo di sfondo, Margine, E Imbottitura 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 Normale E Passa il mouse 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 Spessore divisore E Colore divisore.

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 Aggiornamento O Pubblicare to push the changes live.

Domande frequenti

Conclusione

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.