Compare The Difference Between Before/After Images – Compare Images For Gutenberg

An image comparison block for Gutenberg editor that allows you to compare the difference between two images (before/after) with a vertical or horizontal slider. Fully responsive and touch-friendly.

How to use it:

1. Install and enable both Gutenberg editor and the Compare Images block on the WordPress website.

2. Insert a new Compare Images block in the Gutenberg editor.

new Compare Images block

3. Click the image button to insert before/after images:

before after images

4. Customize the image comparison block:

  • Slider direction: horizontal or vertical.
  • Block height in pixels.
  • Offset ratio (0-10).
  • Before/after label text.

image comparison block options

5. Save the post/page and done.


Compare Images For Gutenberg

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: RapidDev


Don’t forget to share this WordPress plugin and also check out other Gutenberg Blocks on our site.

Rate This Plugin
User Review
5 (1 vote)

See Also:

Leave a Reply