Easily create an Image Comparison block on your WordPress site by using the Blockons plugin. This block will let you upload 2 images which overlay each other and have a draggable slider to show and display each image, letting your users easily compare differences between 2 images.
Example:
Below is an example of the image comparison block.
Drag the slider handle left and right to compare the 2 images, for this example we’ve just used the same image with color and black & white.
Add the Image Comparison block
To add the Image Comparison block to the page when using the WordPress editor, simply click the little “Add Block” icon (the plus sign) and do a quick search for “comparison”, “image” and then you should see it show up in the block section.
You can also select “Browse all” to open the blocks sidebar and scroll down to the Blockons Category and select to add the Image Comparison block from there. Click Image Comparison and the block will then be added to the page.
Once it’s been added to the page you will see the image compare block using 2 different versions of the default images. Make sure to replace these images with your own images.
It’s recommended to upload 2 images of the exact same proportions for this block.
You can then test the comparing of images by dragging the slider to the left or to the right.
Editing the Image Comparison block
Once you’ve added the block to the page and you still have the block selected… You can start by uploading 2 images of the same proportion for them to overlay each other nicely.
Upload your images by clicking on the little upload icon within the top left and top right of the block.
Once you’ve uploaded both images, you can adjust the block settings to make the Image Comparison block display and function as you want… The block settings are available in the right-hand sidebar.
If there’s anything you’re unsure of or simple need a little help with, or if anything is not working as you expect it to, then please don’t hesitate to contact us for help.
