Module Review: Before & After Slider

Let’s say that you are a house painter and want to impress your potential clients by sharing before and after images of your work. You could simply place the two images side by side but that would make only large differences easy to spot. Remember those “spot the differences” images from your childhood?

So instead of just placing the images side by side, you can use the Divi Pixel Before After Slider to show the difference. 

Before After Slider is a Divi module that stacks one image on top of the other and uses an interactive slider control to reveal the images. If the slider moves horizontally, then the first image will be revealed when the slider moves to the right and the second image will be visible when it moves to the left.

Such a slider will be good for comparing two similar images and can be used by anyone in the beauty or fitness business, photographers, painters, car detailing services, barbers, flower shops, dentists, gardeners, builders and so on and so forth.

Let’s take a look what Divi Pixel Before After Slider module has to offer!

Before and After Slider Content Settings

Divi Pixel Before After Slider is easy to use. It works great on mobile devices and like all other Divi Pixel modules, it is highly customizable. The main part of the module settings are the two images, which can be uploaded or selected from your WordPress Media Library.

For search engine optimization purposes, you can add so called “alt” texts for both images. The text will show up in the HTML of your website and can be read by search engines.

You can also assign additional labels to the images, which you can either show always or only when hovering over the module or while dragging the slider control. By default the labels state “Before” and “After” but you can change them to whatever you desire.

In the modules Content tab, you will also find 2 more toggles (Slider and Handle), where you can set the slider direction, choose how the slider will interact, and change handle icons.

The Before and After Slider can slide horizontally or vertically and can interact when you drag the handle when you click on the image, or just when you mouse over the image. There are two icons to choose from for the handle. You can select triangle pointers or arrow icons, which can be customized in the Design tab.

Module Customization Options

On the Design tab, you can customize the look of the module. Besides the usual Divi module options you are already familiar with, there are some unique options only the Divi Pixel Before After Slider module has.

Let’s start with the Slider Line toggle. Here, you can customize the starting position of the slider control as well as change its colors. Besides that, you can adjust the line width, and even use different border styles, to make it dashed for example.

In the Handle toggle, you will find all settings for customizing the handle. Here you can change the circle and icon size, and color, add a blur effect, and border and control the default and hover gap between icons which will create a nice effect when the user mouse over the image.

Next, we have the Labels toggle. Here, you can configure the look of the before and after labels. Change the background color of the label containers, change the label font, add text shadows, and much more.

Finally the Overlay toggle. Here you can configure whether or not to show an overlay and when – on hover or hide on hover and if so, what color it should have.

Increase the level of engagement on your Divi website

The Before & After Slider is a great way to show the differences between two identical images – and it lets you solve spot the difference images in seconds! Furthermore, we have created 5 beautiful demo section that you can download directly from our website and use on your Divi site in no time!

You can use the Divi Pixel Before After Slider and many more cool Divi modules on your Divi website with the Divi Pixel plugin. Select your plan and start building awesome websites today! We are offering a 14-day money back guarantee, so joining Divi Pixel is risk-free!