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.

• Instalar y activar el Kit de elementos plugin from your WordPress dashboard.
• Navegar a ElementosKit > Widgets.
• Localice el Comparación de imágenes widget in the list, toggle it to EN, and save your changes.

Step 2: Upload Before After Images for Comparison Slider

Open your desired page with Elementor, drag the Comparación de imágenes widget into a section, and establish your visual content.

• Seleccionar estilo: Choose between a Horizontal (side-to-side) or Vertical (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 Contenido tab, expand the Ajustes 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 EN 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 EN to allow users to instantly snap the slider to wherever they click on the image.

Step 4: Style Image Before After Image Slider Container

Cambiar a la Estilo tab to customize the aesthetics of your comparison tool to match your brand.

Under General Option:

• Customize the container’s Tipo de borde, Radio del borde, Relleno, y Sombra de la caja 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 Color, Tipografía, Tipo de fondo, Margen, y Relleno 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 y Flotar 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 Grosor del divisor y Color del divisor.

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 Actualizar o Publicar to push the changes live.

Preguntas frecuentes

Conclusión

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.