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

1. Image Compare Block
2. Block Settings
3. Orientation Settings
4. Advanced

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.

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:

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.

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

---

↑ Table of Contents ↑

Advanced

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.