How to Use Image Compare Widget

How to Use Image Compare Widget

Image comparison actually makes differences between two image. I think you can imagine that you are going to know about Image Compare Widget and how it works.

In the following documentation, I’m going to include some very useful instructions and pictures detailed to help you get started.

To Insert Widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.


Content Tab

Using the content tab, you’ll be able to make a layout of a particular part (i.e Image Compare.) of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the Content Tab and how they work behind the widget.

Layout

Go to the Content tab > Layout.

This section will let you add two images respectively. Click on the Before Image and After Image field to insert the images you want to compare.

Then, you can go for the Image Size that will allow you to settle the image size (for example, thumbnail, medium, etc.).

In addition, you add name width the Before Label and After Label to understand the comparison.

N.B: If you want Image compare effect, you have to make sure that you have two different images.

Additional

Simply, go to the Content tab > Additional.

You can see here Orientation that offers you Image view options ( Horizontal and Vertical ).

Before Image Visibility will let you adjust the opacity of the Before Image only.

Besides, you can use three more Yes/No switcher buttons (such as Overlay, Slide on Hover, Handle Only, and Click on Move)and go for anyone according to your design.


Style Tab

It is time to work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you want to design.

Style

Come to the Style tab > after that, go for BEFORE, AFTER, and BAR one by one > next, add Background Color, Text Color, Padding, Border Radius, and Typography. See the screenshot below.

Before:

After:

Bar:

Video Assist

At the end of this documentation, I hope you’ve noticed what is Image Compare Widget and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.

Contact

Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.