--- title: "How to Add Before/After Image Comparison in WordPress?" url: https://nexterwp.com/docs/add-before-after-image-comparison-in-wordpress/ date: 2024-12-05 modified: 2026-04-14 author: "Aditya Sharma" description: "Adding a before-and-after slider to your website is a great way to showcase product or service transformations. This feature lets your audience visually compare changes, making it an engaging and..." image: https://nexterwp.com/wp-content/uploads/2024/12/After-Image-Comparison-in-WordPress_-1024x519.jpg word_count: 619 --- # How to Add Before/After Image Comparison in WordPress? ## Key Takeaways - Nexter Blocks offers a Before After block that allows users to add different types of before and after comparison sliders on their WordPress website. - The Before After block includes three slider styles: Opacity, Horizontal, and Vertical for visual comparisons. - Users can activate the Before After block by navigating to Nexter u2192 Blocks and turning on the toggle for the block name. - The Before After block allows customization of the separator line style, width, and color for enhanced visual appeal. Adding a before-and-after slider to your website is a great way to showcase product or service transformations. This feature lets your audience visually compare changes, making it an engaging and powerful marketing tool. With the Before After block from Nexter Blocks, you can easily add different types of before and after comparison sliders on your WordPress website. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-before-after-image-comparison-slider/) ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated. - This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text). - Make sure the Before After block is activated. To verify this, visit Nexter → Blocks → and search for Before After and activate. ## Learn via Video Tutorial https://www.youtube.com/watch?v=vW7uic-EG2I ## How to activate the Before After Block? Go to  - **Nexter **→ **Blocks ** - **Search **the block name and** turn**** on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Before-After-Activation.png) ## Key Features - **Three Slider Styles** - You can select from three different before and after slider styles. ## How to Use the Before After Block? Add the Before After block to the page. Then click on the **Design from Scratch** button to design the layout from scratch. ![](https://nexterwp.com/wp-content/uploads/2024/12/before-after-design-type-1024x195.png) > *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.* ### Content From the **Mode** section, you have to select the slider style. Here you’ll find three options. - **Opacity** - To [create a before and after opacity slider](https://nexterwp.com/docs/add-a-before-and-after-opacity-slider-in-wordpress/). - **Horizontal** - To create a horizontal before and after slider. - **Vertical** - To [create a vertical before and after comparison slider](https://nexterwp.com/docs/add-a-vertical-before-and-after-comparison-slider-in-wordpress/). Select the option as per your requirements. Let’s select Horizontal here. In the **Before Image** tab, you have to add the before image in the **Select Before Image** section. Then in the **Before Label** field, you can add a label for the before image. Similarly from the **After Image** tab, you have to add the after image from the **Select After Image** section. You can add a label for the after image in the **After Label** field. From the **Alignment **section, you can align the slider in the container. By enabling the **Full Width** toggle, you can make the slider full width to its parent container. From the **On Mouse Hover **toggle, you can move the slider separator line along with the mouse cursor. When disabled you have to click on different parts of the image to move the separator line. From the **Image Size** dropdown, you can manage the image size. ### Separator Option By enabling the **Separator Line** toggle, you'll get different options to style the separator line. > *Note: You’ll see the Separator Line tab only for the Horizontal and Vertical modes.* **Separator Style** - From here, you can change the style of the separator line. Here you’ll find two options -  - **Middle** - This will create a full-height vertical separator line in the container.  - **Bottom** - This will create a full width horizontal separator at the bottom of the container. **Separator Width** - From here, you can change the separator line width. **Separator Color** - From here, you can change the separator color. **Separator Bottom Color** - You’ll see this option for the Bottom style only. From here, you can change the bottom separator color. From the **Separator Icon** section, you can add an icon in the middle of the image separator. Then from the **Separator Position** section, you can set the initial separator position. ## How to Style the Before After Block? To style the Before After block, you’ll find all the options in the Style tab.  **Label Option** - From here, you can style the slider labels. ![](https://nexterwp.com/wp-content/uploads/2024/12/before-after-style-new.png) Advanced options remain common for all our blocks, you can explore all the options from here. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/) ## Frequently Asked Questions **Q: What are the key features of the Before After block?** A: The Before After block offers three slider styles: Opacity, Horizontal, and Vertical. This flexibility allows you to choose the best visual representation for your content. For instance, the Opacity slider is great for subtle comparisons, while the Vertical and Horizontal sliders provide clear side-by-side views. This variety enhances user engagement and helps showcase transformations effectively. **Q: How do I activate the Before After block in Nexter Blocks?** A: To activate the Before After block, navigate to Nexter u2192 Blocks in your WordPress dashboard. Search for the block name and toggle it on. This step is crucial as the Before After block is part of the PRO version of Nexter Blocks, ensuring you have access to premium features for your image comparisons. **Q: What should I do if the Before After block is not showing up?** A: If the Before After block is not appearing, first ensure that the Nexter Blocks plugin is installed and activated. Then, check if the block is enabled in the Nexter u2192 Blocks section. If itu2019s still not visible, confirm that you are using the PRO version of Nexter Blocks, as this feature is exclusive to premium users.