Module Review: Before & After Slider

by Apr 5, 2020Announcements, Pixel Modules

Showcase your before & after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before & After Slider to display two versions of an image simply by sliding over it.

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.

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.

Lets start with the Slider toggle. In here, you can configure the direction in which the slider control will move. Besides that, you can configure the starting position of the slider control as well as change its colors.

Next we have the Labels toggle. In here, you can configure the look of the before and after label. Change the background color of the label containers, always display the labels – by default they only show on hover – 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 on hover and if so, what color it should have.

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. 😉

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!

Jan Thielemann

Jan Thielemann

Jan is the co-founder of Divi Pixel. He is a professional software developer who started developing for WordPress as a hobby. When he made his first contact with Divi in 2016, he immediately saw the potential. Shortly after he developed his first Divi plugin, which was a huge success, he started a side business selling various Divi related products. He's an expert known throughout the whole Divi developer community.