---
title: "How to Add a Before and After Opacity Slider in WordPress?"
url: https://nexterwp.com/docs/add-a-before-and-after-opacity-slider-in-wordpress/
date: 2024-12-05
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to add a before and after opacity slider in WordPress? This comparison slider creates a smooth blending effect between images as you move your cursor, adding a..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Before-and-After-Comparison-Slider-in-WordPress_-1-1024x519.jpg
word_count: 211
---

# How to Add a Before and After Opacity Slider in WordPress?

## Key Takeaways

- Nexter Blocks includes a Before After block that allows users to create a before and after opacity slider in WordPress.
- Users can select Opacity from the Mode section in the Content tab to enable the opacity slider feature.
- The Before After block requires Nexter Blocks to be installed and activated for full functionality.

Are you looking to add a before and after opacity slider in WordPress? This comparison slider creates a smooth blending effect between images as you move your cursor, adding a visually engaging touch to your website and showcasing transformations in a unique way.

With the Before After block from Nexter Blocks, you can easily create a before and after opacity slider in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Before After block, [click here](https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-before-after-image-comparison-slider/)

To do this, add the Before After block to the page and follow the steps - 

1. In the **Content** tab, select **Opacity** from the **Mode **section.

2. Then in the **Before Image** tab, you have to add the before image in the **Select Before Image** section.

In the **Before Label** field, you can add a label for the before image.

3. After that in the **After Image** tab, you have to add the after image from the **Select After Image** section.

In the **After Label **field, you can add a label for the after image.

Now you will see an opacity before and after comparison slider.

## Frequently Asked Questions

**Q: What should I do if the Before After block isn't displaying correctly?**
A: If the Before After block isn't showing up, ensure that the Nexter Blocks plugin is installed and activated. This block is specifically part of Nexter Blocks, and without it, you won't have access to the functionality needed to create the opacity slider. Double-check your plugin settings and make sure everything is up to date.

**Q: What happens if I forget to add labels for the before and after images?**
A: If you skip adding labels for the before and after images, users may not understand what each image represents. Labels provide context and enhance the clarity of the comparison, making it easier for visitors to grasp the transformation being showcased. Always include descriptive labels for better user engagement.

**Q: Are there any specific image formats recommended for the Before After block?**
A: The page doesn't specify image formats, but using high-quality JPEG or PNG files is generally recommended for clarity and detail. Ensure your images are optimized for web use to maintain fast loading times while providing a visually appealing experience with the Before After block.

**Q: Does the Before After block work with other page builders besides Gutenberg?**
A: While the Before After block is designed primarily for Gutenberg, it also supports Elementor and Bricks. This flexibility allows you to integrate the opacity slider into various site designs, but remember that NexterWP is built with a Gutenberg-first approach, so optimal performance is expected with that builder.

**Q: What is the best way to set up the opacity slider for maximum effect?**
A: To maximize the effect of the opacity slider, ensure that the images you choose have a strong contrast to highlight the differences effectively. Additionally, using a smooth transition effect can enhance the user experience. The Before After block from Nexter Blocks allows for a seamless blending effect, making it visually appealing.