There is a noticeable difference in the images before and after the “look.” The images before the look have lower contrast and appear to be more blurry. The images after the look have higher contrast and appear to be sharper.
1. How to Add Image Comparison Block #
To add the “Image Comparison Block” click on the Gutenberg Editor block inserter plus icon(+) and then find Image Comparison Box from the search option. Just click on the Block and it will be activated.
After selecting the block you need to fill up your desired text and configure the style.
2. General Settings #
The general settings tab has a layout preset, an icon/ image, a title, a description, and a button settings option. These panel settings are as bellows
- Media Settings: Set two images for before and after.
- Settings: You can enable/ disable the Full Width, can enable Labels, Labels Position, Mouse hover control, Enable Horizontal Mode, Enable No Handle and Handler line width and position.
3. Styles Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
5. Final Outcome #
Following these basic steps and more customizing, you can style your Image Comparison Block and your want and get your outcome.
