Back to Documentation

Image Comparison Block

Let users compare 2 images of the same proportion by dragging a slider left or right, using the Image Comparison block.

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.


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.

Add the Image Comparison block
Add the Image Comparison block

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.

Add the Image Comparison block from the sidebar
Add the block from the sidebar

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.

Blockons Image Comparison block
Blockons Image Comparison block

You can then test the comparing of images by dragging the slider to the left or to the right.

Draggable slider
Drag the slider horizontally

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.

Upload images to the Image Comparison block
Upload images to the block using the upload icons

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.

Blockons - Image Comparison block settings
Image Comparison settings

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.