How to Add Labels to Before After Slider in WordPress (Step-by-Step Guide)

Question

Visual comparisons are powerful, they instantly show progress, change, or transformation. Whether you’re a designer showcasing a redesign, a photographer presenting retouching work, or an agency highlighting results, before after sliders are your go-to tool.

However, there’s one common issue: many sliders only display images without clear explanations. Without labels, visitors might not know which image is “before” or “after.” This confusion can lower engagement and make your message less effective.

In this guide, you’ll learn exactly how to add labels to before after sliders in WordPress, using easy, code-free methods and the most reliable plugins. You’ll also discover how to customize label text, styling, and positioning for a professional, user-friendly experience.

Adding labels is more than cosmetic, it helps communicate your story. Next, let’s explore what labels actually are in before after sliders, and how they affect both usability and search visibility.

What Is a Label in a WordPress Before After Slider?

A label in a WordPress before after slider is the short text such as “Before” and “After” displayed on or near each image to explain what the viewer is comparing. These labels help users instantly understand the transformation being shown, improving clarity, user experience, and accessibility.

Purpose: Clarifies which image represents “before” and which is “after.”
Placement: Usually appears as overlay text on each side of the slider.
Customization: Most plugins let you edit label text, color, and font.
SEO Benefit: Labels add descriptive text that search engines can index.
Accessibility Role: Screen readers can announce label text for visually impaired users.

Example:

A slider comparing photo retouching might use labels like “Unedited” and “Enhanced” instead of the defaults. This provides more context and matches your content purpose an important step for both human understanding and AI-generated answer clarity.

Ready to Make Comparisons Crystal Clear?Install the Plugin in One Click!

Next, we’ll dive into how to add and customize labels using the WP Before After Image Slider plugin step by step.

How to Add Labels Using the WP Before After Plugin

Adding labels to a WordPress before/after slider using the WP Before After Image Slider plugin is simple and requires no coding. You can define “Before” and “After” text, style them for visibility, and display them in a way that improves clarity, user experience, and accessibility.

Step 1: Install and Activate the Plugin

Navigate to WordPress Dashboard → Plugins → Add New.
Search for WP Before After Image Slider.
Click Install Now, then Activate.
Once activated, you’ll see a new WP Before After menu in your dashboard.

Step 2: Create a New Slider

Go to WP Before After → Add New Slider.
Enter a descriptive title for your slider, such as “Kitchen Renovation Comparison” or “Photo Retouch Example.”
Optionally, add a brief description to help identify the slider in your dashboard.

Step 3: Upload Before and After Images

In the Content tab, find Before Image and After Image upload fields.
Click Upload or select images from the Media Library.
Ensure both images have the same dimensions for smooth sliding and professional display.
Optional tip: Optimize image file size for faster loading without losing quality.

Step 4: Add Labels for Each Image

Locate the Before Label and After Label text fields under the Content tab.
Enter descriptive labels that clearly explain each image, for example:
- Before Label: “Unedited Photo”
- After Label: “Enhanced Version”
Avoid long sentences; short, clear labels improve readability and user comprehension.
Toggle Show Labels on or off depending on whether you want the text visible by default.

Step 5: Customize Label Styling (Optional but Recommended)

Switch to the Style tab to adjust label appearance:
- Font size: Ensure labels are legible on desktop and mobile.
- Text color: Use contrasting colors for visibility against the slider background.
- Background overlay: Add a semi-transparent background behind the label for better readability.
- Label position: Top, bottom, or overlay on images; choose placement that doesn’t block critical content.
- Padding & margin: Adjust spacing to avoid labels touching the slider handle or edges.
Tip: Consistent styling across sliders reinforces brand identity.

Step 6: Configure Slider Settings

Orientation: Choose horizontal or vertical slider movement.
Trigger: Select drag, hover, or automatic animation.
Responsive settings: Ensure the slider adjusts to different screen sizes.

Step 7: Publish and Embed the Slider

Click Publish to save the slider.
Copy the shortcode displayed on the slider page. Example: [wp_before_after id=”123″]
Paste the shortcode into any page, post, or widget area.
Alternatively, use the Gutenberg block if your site uses the block editor:
- Add a WP Before After Block
- Select your newly created slider from the dropdown

Pro Tips for Optimal Label Usage

Keep labels concise: One or two words are often enough.
Use descriptive terms: Match labels to your audience’s expectations (e.g., “Old Design / New Design”).
Check contrast and readability: Ensure labels are visible on light and dark images.
Test across devices: Confirm label visibility on smartphones, tablets, and desktops.
Consider accessibility: Screen readers can use the label text to describe slider images.
SEO advantage: Using keywords in labels can help search engines understand the image context.

By carefully adding and styling labels, your sliders become more informative, accessible, and professional. Proper labeling ensures users instantly understand your visual story, and enhances both UX and SEO performance.

Next, we’ll explore how to add and customize labels in other popular WordPress plugins, like BEAF and TwentyTwenty, to show different approaches and advanced styling options.

How to Customize Labels in Other WordPress Plugins?

Besides the WP Before After plugin, popular WordPress plugins like BEAF (Before After Image Comparison) and Twenty20 allow you to add and style labels, though the process and flexibility differ. Understanding these options helps you choose the right plugin for your workflow and design goals.

1. Customizing Labels in BEAF – Before After Image Slider

Step 1: Install and Activate BEAF

Go to WordPress Dashboard → Plugins → Add New.
Search for BEAF – Before After Image Comparison.
Click Install Now → Activate.

Step 2: Create a New Slider

Navigate to BEAF → Add New.
Upload your Before and After images.

Step 3: Add Labels

In the Slider Settings, locate Before Label and After Label fields.
Enter your desired text. For example: “Original Design” / “Redesigned Version.”

Step 4: Style Labels

Free version: limited styling (basic font and color options).
Pro version: advanced options including hover effects, custom fonts, background overlays, and positioning.

Step 5: Embed the Slider

Copy the shortcode or use the Elementor/Gutenberg block.
Paste it into your post, page, or widget area.

2. Customizing Labels in TwentyTwenty Image Comparison

Step 1: Install and Activate Twenty20

Available as a plugin or Gutenberg block.
Install via Plugins → Add New → TwentyTwenty.

Step 2: Add Images

Upload Before and After images to the block or shortcode.

Step 3: Add Labels

TwentyTwenty uses shortcode attributes for labels:
[twentytwenty before_label=”Old Version” after_label=”New Version”]
Labels are text-only and do not have built-in styling options.

Step 4: Optional Styling

Use custom CSS to adjust font, color, or position.
Limited styling flexibility compared to BEAF or WP Before After.

Step 5: Embed Slider

Add the shortcode to any post, page, or widget.
Check responsive behavior to ensure labels are readable on mobile.

Comparison: Label Capabilities Across Plugins

Different WordPress plugins handle labels in unique ways, affecting both ease of use and design flexibility. Understanding these differences helps you choose a plugin that matches your technical skills and design goals.

Some plugins are beginner-friendly, while others offer advanced styling options for professional projects.

Plugin	Label Input	Styling Options	Ease of Use	Best For
WP Before After	Built-in fields	Basic CSS styling	Very easy	Beginners, freelancers
BEAF	Built-in fields	Advanced in Pro	Moderate	Agencies, designers
Twenty20	Shortcode attributes	Custom CSS only	Moderate	Developers, minimalists

Make Before & After Magic Happen!

Read More: Best Before After Slider for WordPress

What Are Best Practices for Slider Labeling?

Effective labels make your before/after slider clear, accessible, and visually appealing. Best practices include keeping text short, using descriptive language, maintaining contrast, and testing across devices.

1. Keep Labels Concise and Clear

Use 1–3 words per label whenever possible.
Examples: “Before / After,” “Original / Edited,” “Old Design / New Design.”
Avoid long sentences that can clutter the slider or overlap images.

2. Use Descriptive, Contextual Text

Labels should match your content and audience expectations.
For example, a photo retouch slider could use:
- “Unedited” / “Enhanced”
A renovation project might use:
- “Before Renovation” / “After Renovation”

3. Maintain Visual Contrast and Readability

Ensure labels are legible on all images, including light or dark backgrounds.
Use contrasting text color or a semi-transparent background overlay.
Adjust font size for mobile devices to ensure readability.

4. Consider Label Placement

Top, bottom, or overlay positions are common.
Avoid covering critical parts of the image, especially the transformation area.
Maintain consistent placement across multiple sliders for a professional look.

5. Accessibility Considerations

Labels should be screen-reader friendly for visually impaired users.
Include meaningful label text rather than generic words like “Image 1 / Image 2.”

6. Optimize for SEO and Clarity

Incorporate keywords where natural (e.g., “Before Kitchen Renovation / After Kitchen Renovation”).
Properly labeled images can improve search engine understanding and visual search results.

By following these best practices, your slider labels will enhance both user experience and site performance, making your visual comparisons more effective and professional.

Don’t Just Share PhotosLet Visitors Slide Between Them

Download Now

Conclusion

Adding labels to WordPress before after sliders improves clarity, user engagement, accessibility, and SEO. Well-labeled sliders make visual comparisons intuitive and professional.

Clear labels help users instantly understand which image is “before” and which is “after.” Choosing the right plugin matters: WP Before After is beginner-friendly, BEAF allows advanced styling, and Twenty20 suits developers needing lightweight solutions. Labels should be concise, readable, and well-positioned, while also supporting accessibility and SEO. Test sliders across devices to ensure consistency.

Next, install your chosen plugin, add descriptive labels, customize styles, and review your sliders on multiple devices to optimize clarity and user experience.