Blocks » Image Compare Block

Use the Image Compare block to place two images side by side (or above and below) and use a slider to reveal differences between the two images. Here’s an example:

Table of Contents

Image Compare Block

To add an Image Compare block, click on the block inserter icon to open the block library and select the Image Compare block.

Detailed instructions on adding blocks can be found here.

GIF showing the process of adding an Image Compare block
Adding the Image Compare block

The block works best with two images of the same width and height.

You can drag and drop images to the block for both the before and after locations. You can also click the Upload button, or select from already uploaded images from your Media Library:

Image Compare block - image upload
Adding images to the Image Compare block

You will be able to add a caption to the block after uploading your images.

If you upload the wrong images, or wish to change the order, you will need to delete the block and start over.

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
Block settings

↑ Table of Contents ↑

Orientation Settings

Using the orientation settings, you can switch the orientation from side by side to above and below:

Image Compare block settings
Image Compare block settings

↑ Table of Contents ↑


The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help