In this documentation, we will show you how to customize the Image Compare widget presented by Element Pack Pro.

Inserting The Image Compare Widget

Open your page in the Elementor editor, search by the widget name, and then drag and drop it on the page.

Note: You need both Elementor and Element Pack Pro installed to use this widget.

Content Tab Customizations

Layout Section

Go to Content > Layout

Come to the Layout section, Find the Before Image, After Image, Image Size, Before Label, and After Label options.

Additional Section

Go to Content > Additional

Here find the Orientation (Horizontal, and Vertical), Before Image Visibility, Smoothing Amount options, and Overlay, on Hover, Slider On Hover, Add Circle in Bar, Add Circle Blur, Circle Shadow, and Smoothing switchers.

Work with The Style Tab

Style Section

Go to Style > Style

Step-1

Come to the Style section, you will find three tabs section; Before, After, and Bar.

In the Before tab mode, you will find the Overlay Color, Background Color, Before Text Color, Padding, Border Radius, and Typography options.

Step-2

In the After tab mode, you will find the Background Color, After Text Color, Padding, Border Radius, and Typography options.

Step-3

In the Bar tab mode, you will find the Bar Text Color, Padding, Border Radius, and Typography options.

All done! You have successfully customized the Image Compare widget on your website.

Video Assist

You can also watch the tutorial video about the Image Compare widget. Please visit the demo page for examples.

Thanks for staying with us.