Are you looking for the best before and after image slider for your website? Worry no more! Cause we have the right solution for you. Today, we are going to show you how you can make one easily using Elementor.

A before and after image slider creates a slideshow by placing two similar images side-by-side. With a slider bar, you can drag it back and forth to see both comparing images. After all, it is an interesting way to showcase newly arrived products, the growth of your company, or special meanings. Not only it makes your visitors attracted to it, but also it shows the effects of your product or service. Indeed, it is a pretty good piece of a tool!

Generally, people use photo editor tools to make this type of effect. But using a simple 画像比較 widget, you can easily achieve this feat. Note that, the company Element Pack has developed this widget. This widget is a fully functional image slider that helps you show 2 different versions of the same image. Furthermore, you can use it in any way you like.

もう世間話はいらない。本題に入ろう！

Insert & Customize Before and After Image Slider

Inserting Widget

First, go to your web page where you want to use this slider. As we are doing this using elementor, make sure to install Elementor and Element Pack Lite plugins into your dashboard. However, we will not talk about installing procedures in this blog.

Though it is not worth mentioning, still beginners might find it hard. Just search for the 画像比較 widget in the widget menu. When you see it (it has ElementPack logo on it), drag and drop it into a section in the editor.

Customizing the Layout of the Image Slider

Once you drop it, you will see the default setup of the slider at the start. However, this is the レイアウト セクションの 内容 tab. You can choose any type of image for the image slider to show it here.

Let’s change the pictures. For starters, let’s select normal ones.

Once you insert an image, you can change their size from 画像サイズ option. Generally, the larger the image, the more space it will take. For an image with a 1000-pixel height but only 500-pixel width, it will increase the slider length by a 1000 pixel.

Moreover, you can change the ‘After’ & ‘Before’ tags from here. Let’s talk about this part later and move on to the next section.

Interface Settings

こちらへ Content Tab> Additional

について 追加 option is also known as interface settings. From here, we can change the slider bar orientation to either Vertical or Horizontal. Also, you can change the ‘before image‘ visibility. The Overlay switcher turns on/off overlay on the whole before and after image slider.

Once again, there are some things to talk about in this section. Notice that, you can add a circle in the middle of the slider bar. Also, you can add a blur effect to the circle.

One more interesting thing here is, you have the option to smooth the hover-drag of the slide bar. Turn on the switcher Smoothing? to smooth the hover-drag. However, you can adjust the sensitivity of the image slider bar with the scroll button below.