Before / After
The Before and After block can be mostly seen on websites related to the Gym, Nutrition, Health niche where the idea is to showcase the weight loss journey of an individual. It is an image gallery concept that shows the before and after images. You can also use this to create an image comparison to showcase any major difference between the before and after state.
Configuration for Before/After
In the Before/After block you can add a custom image with a customized layout.
How to use the Before/After Block of The Plus Addons For Gutenberg
The Before/After Block is pretty easy to use. Let’s understand how to use this block in the tutorial below.
Gutenberg gives multiple ways to add Before After into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Before After after “/” sign, eg.“/Before After”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.
After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Select Before Image
Set the image for the before condition.
Set the text label for the before condition.
Select After Image
Set the image for the after condition.
Set the text label for the after condition.
Set your image size by selecting any one option from the dropdown below. Always resize the images properly and select the Full option for your image size.
We have provided you with three options to choose from. These options define how the slide effect works for Before and After conditions.
Set the alignment of your Before / After Block.
The Style tab is used for customizing the appearance of all the Before After block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
If you want the block to be full width, enable this option.
Mouse Hover Option
Enable this if you want to enable the mouse hover slide effect.
Set the separator line cosmetic options by selecting the style, width, color, icon and position.
Use these options to set the padding, typography, label color, background type, border type, border radius, and box shadow of the labels.