Before / After

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.

Pro tip
While this block is mostly seen on Health based websites, that doesn’t mean you cannot use it for your website. Think creative and follow along as per our demos.

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.

Table Of Contents

Setting Up

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.

1. Layout


Select Before Image

Set the image for the before condition.

Before Label

Set the text label for the before condition.

Select After Image

Set the image for the after condition.

After Label

Set the text label for the after condition.

Image Size

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.

Credit : Gutenberg, WordPress



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.

2. Style

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

Separator Options

Full Width

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.

Separator Line

Set the separator line cosmetic options by selecting the style, width, color, icon and position.

Label Options

Use these options to set the padding, typography, label color, background type, border type, border radius, and box shadow of the labels.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.