PowerPack Documentation

Image Comparison Widget Overview

Table of Contents

Image comparison will assist you in comparing 2 images with a slider on the page which the user can move to reveal one picture and at the same time hide the other one.

Content Tab

The Content tab is where you get to choose the pictures that you want in your image compare. You can even change the text of the image. In the settings subsection, you can change what action will move the slider and change the slider direction from vertical to horizontal as well.

Style Tab

Here you can do all the designing settings such as you can change the handle’s appearance and you can change the layout of your text as well. Apart from this, you can change the divider’s width as well its color.

Advanced Tab

This Tab as five subsections-

  • Element Style – Here you can change the margin, padding, z-index, entrance animation and add CSS ID and classes.
  • Background – Here you can set the background as classic or gradient and can even add the hover effects.
  • Border – Here the properties related to the border is defined like border type, radius, box shadow, and hover effects.
  • Responsive – Here you set the responsiveness of the different devices to be active or not.
  • Custom CSS – This lets you add CSS code to the widget, and you can see it render live right in the editor.

 

Last updated on March 31, 2020

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.

Latest Additions