Image Comparison block lets you to easily compare two images side-by-side. This can be useful for a variety of purposes, such as showcasing before-and-after photos, comparing products, or demonstrating the effects of editing.

Let’s have a look at the documentation.

How can you use image comparison block? #

WordPressダッシュボードへのアクセス –

• 探す ページ/投稿 > 新しいページ/投稿を追加 または、ブロック エディターを使用して既存のページの編集を開始します。
• 「+エディター画面の右側または上部にある「 」アイコンをクリックします。
• ブロックメニューが表示されるので、「画像比較”。
• 表示されたらクリックするか、ブロックエディター画面にドラッグ＆ドロップします。

コンテンツ部分の編集 #

Select Styles – There are two styles, you can pick any of your choice.

After that, you have to set before and after images.

設定 - Here, you can adjust the offset bar. There are also options of label style, which are
active, hover, and none.
Additionally, you can control remove overlay, move slider on hover, and click to move.

スタイル #

Here, within the Handle option, you can style Control width, height, use options of background, arrow color, box shadow, etc. for NORMAL and
HOVER, and also adjust Handle divider.