How to Add a Before and After Image Slider in Elementor

A before and after image slider gives visitors a simple way to inspect a visual change. Both images stay inside the same frame, while a draggable divider reveals the original version and the final result.

This works particularly well on Elementor websites because the comparison can sit directly beside your service description, case study, product information, or call to action. Your visitor sees the result in context instead of opening two separate images and trying to remember what changed.

The setup looks straightforward, but the plugin is only one part of the result. Image alignment, file size, mobile interaction, labels, and placement all affect how professional the comparison feels.

This guide explains how to add a before and after image slider in Elementor, how to prepare the two images, and what to check before publishing it on a client website or your own WordPress site.

What Does a Before and After Image Slider Do?

A before-and-after image slider layers two related images within a single responsive container. Visitors drag the divider to control how much of each version they can see.

The images usually show the same subject before and after a specific change. A photographer might compare an original photograph with the retouched version. A renovation company can show the same room before and after the work. A web designer can place an old homepage beside its redesign.

Because both versions occupy the same frame, small differences become easier to notice. The visitor does not have to move between gallery slides or compare two images placed far apart on the page.

This is also why image preparation matters. When the angle, crop, or subject position changes, the slider reveals movement between the photographs instead of the result you want to demonstrate.

Image Comparison Slider or Image Carousel?

An image carousel helps visitors browse several separate images. Each slide can show a different subject, angle, product, or project. A comparison slider has a narrower job. It compares two aligned states of the same subject.

Use a carousel for a gallery. Use a before-and-after slider when the relationship between the two images conveys the main message.

Does Elementor Include a Native Before and After Widget?

Elementor includes standard image and gallery widgets, but a draggable image comparison normally requires a dedicated plugin, an addon package, or custom development.

A large Elementor addon can make sense when a website already uses several widgets from that package. However, many websites need only the image comparison component. Installing another broad widget collection for one feature can create unnecessary overlap with Elementor, the active theme, or other plugins.

A focused plugin gives you a more direct workflow. You create the comparison in its own WordPress admin screen, save it, and select it inside Elementor. The same saved slider can also appear in Gutenberg, a shortcode, or another supported builder.

That reuse matters on real projects. A developer may need the same result on a service page, a portfolio entry, and a case study. A business owner may later want to update the images without having to rebuild each Elementor section separately.

Prepare the Images Before Opening Elementor

Most weak Elementor before and after sliders start with poorly matched images, not incorrect plugin settings.

The two files should use the same dimensions and aspect ratio. Keep the camera angle, zoom level, orientation, and crop as consistent as possible. The main subject should remain in approximately the same position.

For a website redesign, capture both screenshots at the same browser width. For a room renovation, use the same camera position and lens. When presenting photo retouching, preserve the original framing.

A slider cannot correct a different perspective.

Resize the Images for the Page

Large camera files often create more page weight than the comparison plugin itself. Two photographs exported at 5000 pixels wide can add several megabytes to a page that displays them inside a 900-pixel Elementor column.

Resize each file for its realistic display width before uploading it. Then compress the image and use WebP or an optimized JPEG where appropriate.

Interface screenshots, transparent graphics, and images with sharp text may still work better as PNG files. The correct format depends on the content rather than one universal rule.

Use Clear Filenames and Alternative Text

Replace camera-generated filenames with descriptions that identify the image.

kitchen-before-renovation.webp
kitchen-after-renovation.webp
homepage-before-redesign.webp
homepage-after-redesign.webp

Alternative text should describe each image independently. Avoid using only “Before image” and “After image,” because that wording gives little context to a visitor who cannot see the comparison.

A better description might be:

Small kitchen before renovation with dark cabinets
Renovated kitchen with light cabinets and an open worktop

The text should remain accurate and concise. Do not turn the Media Library fields into keyword lists.

How to Add a Before and After Image Slider in Elementor

HexCoda Before & After Image Slider saves each comparison as a reusable WordPress record. You can manage the images and behavior in one place, then select that slider in Elementor.

The plugin works with Elementor Free. Elementor Pro is not required.

Step 1: Install the Plugin

1. Open the WordPress dashboard.
2. Go to Plugins → Add New Plugin.
3. Select Upload Plugin.
4. Choose the HexCoda plugin ZIP.
5. Select Install Now, then activate the plugin.

WordPress adds the Before/After Sliders section after activation.

Open the plugin settings before creating the first comparison. You can review the default direction, style, template, lazy-loading behavior, gallery mode, and structured-data option.

Step 2: Create the Slider

Go to:

Before/After Sliders → Add New

Enter a descriptive internal title. A name such as “Kitchen Renovation – Main View” will remain easier to find than “Slider 1” when the website contains several comparisons.

Choose the Before and After images from the WordPress Media Library. Both fields must contain valid image attachments before the slider can be saved.

Next, configure the visible labels. “Before” and “After” work for most projects, but a more specific pair can convey the comparison more quickly. A photographer might use “Original” and “Retouched,” while a web designer could use “Previous Design” and “New Design.”

Select the direction and starting position. A value of 50 places the divider in the center and gives both images equal visibility when the slider loads.

The editor also lets you choose the presentation template, visual style, badge appearance, optional height, and lazy-loading behavior.

Step 3: Review the Live Preview

The Live Preview reflects the current images and settings while you work.

Move the divider and inspect the alignment. Check whether the labels remain readable over both photographs. If the subject jumps as the divider moves, return to the source images and correct the crop before continuing.

The public website keeps using the last saved version until you save the new configuration. This prevents unfinished changes from appearing immediately on a live page.

Step 4: Insert the Slider in Elementor

Open the page with Elementor and search the widget panel for:

HexCoda Before/After Sliders

Drag the widget into the required section. Then select the published slider from the widget settings.

You can also choose a placement template and visual style. These placement-level choices do not change the original saved slider, so the same comparison can use a different presentation on another page.

Update the Elementor page and inspect the public result.

Use the Elementor Shortcode Widget as an Alternative

The plugin also provides a reusable shortcode that works with Elementor’s standard Shortcode widget.

Replace 123 with the slider ID displayed in the slider editor or the Before/After Sliders library.

To add the slider through Elementor:

1. Open the page with Edit with Elementor.
2. Add Elementor’s standard Shortcode widget.
3. Paste the shortcode into the widget field.
4. Replace 123 with the correct slider ID.
5. Update the page.
6. Open the public page and test the comparison.

The dedicated HexCoda widget provides the quickest Elementor workflow. However, the Shortcode widget remains useful in templates, tabs, popups, saved sections, or layouts where a general shortcode field is a better fit.

Choose the Right Direction for the Images

Horizontal comparison moves the divider from left to right. Most visitors already understand this interaction, and it suits wide photographs, website screenshots, room renovations, restorations, and product images.

Vertical comparison moves from top to bottom. It can work well for tall portraits, mobile interface screenshots, architectural photographs, or images where the most important change appears across the upper and lower areas.

Do not choose the orientation only because one option looks more distinctive. Test both directions with the actual images.

A vertical slider inside a short Elementor section may feel cramped. Likewise, a horizontal slider can hide important details when the subject fills a narrow portrait image.

Set a Starting Position That Shows the Result Clearly

The center position works well in most cases, but 50 percent is not mandatory. You may want to show more of the final image when the improvement occupies a larger area.

A starting position of 35 percent, for example, reveals more of the After image while preserving enough of the original to establish the comparison.

Look at the main subject before choosing the value. The divider should not cover the detail that explains the change.

This small adjustment can affect the first impression more than a decorative style option.

Use Labels That Match the Project

Short labels remain easier to read on phones and small images.

“Before” and “After” provide a safe default. More descriptive labels can work better when the comparison shows a process rather than a general transformation.

Examples include “Raw” and “Processed,” “Original” and “Restored,” or “Old Layout” and “New Layout.”

The plugin supports Dark and Light label badges. Choose the version that maintains contrast against the images. A white badge may disappear over a bright sky, while a dark badge can become difficult to read on a shadowed interior.

Empty labels are also supported. Removing them can produce a cleaner result when the surrounding heading already explains both sides.

Do Not Let a Custom Height Distort the Comparison

The plugin can use the natural image ratio or a custom CSS height such as 420px, 50vw, or 70vh.

A custom height helps when the slider must fit a specific Elementor section. However, it can also create awkward cropping when the value does not suit the images.

Start with the natural ratio. Add a custom height only when the page layout requires it.

This is particularly important inside Elementor columns. A height that looks balanced in a full-width section can feel oversized when the same slider appears beside text in a two-column row.

Test the Published Slider on a Real Phone

Elementor’s responsive preview helps with spacing and layout, but it does not reproduce every mobile interaction.

Open the published page on a physical phone. Drag the divider, then scroll the page from an area outside the handle. Check portrait and landscape orientation.

The labels should remain visible without covering the main detail. The handle must be easy to identify, and the surrounding section should not create horizontal page overflow.

Touch behavior deserves particular attention. A slider may look correct in the editor but still feel uncomfortable when a visitor tries to scroll past it.

Check Keyboard Access and Reduced Motion

HexCoda exposes the divider as a slider control and supports keyboard interaction. Visitors can use arrow keys to adjust the comparison, while Home and End move to the minimum and maximum positions.

The control also reports its orientation and current percentage to assistive technologies.

Reduced-motion preferences are respected. This matters for visitors who disable or limit interface animation through their operating system or browser.

Accessibility still depends partly on the source content. The plugin cannot write meaningful alternative text for your images or explain a project that lacks surrounding written context.

Add Written Context Around the Comparison

A slider can show the difference, but it rarely explains the full project on its own.

Add a heading and a short paragraph above or below the comparison. Tell the reader what changed, what work produced the result, and which detail deserves attention.

For a renovation project, mention the main work and any relevant constraints. A web redesign comparison might explain how the navigation, product hierarchy, or mobile layout changed. Photography examples can identify the editing process without revealing every technical step.

This written context helps visitors understand the value of the result. It also gives search engines and AI systems information they cannot reliably extract from two images alone.

Where Should You Place the Slider on a Sales Page?

Place the slider close to the claim it supports.

A service page can introduce the process, show the result, and then continue to testimonials or a request form. A case study may use the slider after describing the original problem. Product demonstrations often work well near the section that explains the main benefit.

Avoid dropping the comparison onto the page without context. Visitors may notice that the images differ but still miss why the change matters.

One well-explained slider often communicates more than a crowded gallery of examples.

Use Before and After Images as Evidence, Not Decoration

The strongest comparisons show real work under consistent conditions.

Lighting, camera angle, crop, and image treatment should not exaggerate the difference. This matters for every industry, but it becomes especially important for beauty, dental, cosmetic, fitness, and treatment-related content.

Use customer consent where required. Add accurate disclaimers and avoid implying that every customer will receive the same result.

Developers building websites for clients should request aligned source images at the beginning of the project. Waiting until the page is almost complete often leads to rushed crops and inconsistent visual material.

Keep the Elementor Page Lightweight

A focused plugin can load its assets conditionally, but image size still controls much of the page weight.

HexCoda loads its public CSS and JavaScript when valid slider or gallery output appears. Shared assets load once, even when the page contains multiple comparisons.

You still need to optimize the two source images.

Lazy loading works well for comparisons placed lower on a long page. For an important slider at the top of the page, immediate loading may produce a better first impression.

Do not place many large comparisons above the fold. Even optimized files add up when the browser must request several image pairs at once.

Watch for Cache and Script Optimization Conflicts

Interactive WordPress elements sometimes behave differently after JavaScript delay, combination, or minification tools process their files.

When the divider does not respond correctly, first clear the page cache, CDN cache, and browser cache. Then test the page in a private window.

If the problem remains, temporarily exclude the affected script from delayed loading or disable optimization on a staging copy. This diagnostic step often reveals whether the issue comes from the slider or the optimization configuration.

Do not disable performance tools permanently without identifying the conflict.

Why Reusable Sliders Help Developers and Website Owners

A reusable slider remains separate from the Elementor page where it appears.

For developers and agencies, this makes client projects easier to maintain. The same comparison can appear on a landing page, service page, and case study without rebuilding the image configuration each time.

Website owners gain a simpler update process. They can replace an image, adjust the label, or change the starting position from the slider editor instead of opening several Elementor pages.

The same saved record can also appear in Gutenberg, Flatsome UX Builder, or a shortcode placement. That flexibility reduces dependence on a single editor.

Why Use a Focused Plugin Instead of a Large Addon Collection?

A large Elementor addon package makes sense when the website uses several of its components. Installing one solely for an image comparison widget deserves more consideration.

HexCoda Before & After Image Slider concentrates on one task. It provides reusable comparisons, Elementor Free integration, Gutenberg support, Flatsome UX Builder compatibility, shortcodes, grouped galleries, horizontal and vertical directions, touch controls, keyboard access, and conditional frontend assets.

The plugin does not require HexCoda Core. It does not load remote frontend scripts or fonts, create visitor tracking, or depend on an external rendering service.

This focused approach suits developers who want a maintainable tool for client websites and business owners who need a clear interface without a large collection of unrelated widgets.

Add the Comparison Where It Helps the Reader Decide

A good Elementor before and after image slider does not need complicated effects. It needs aligned images, a clear purpose, reliable interaction, and enough written context to explain the result.

Prepare the files first. Build the comparison once, then reuse it wherever the same example supports your content.

HexCoda Before & After Image Slider gives you that workflow without requiring another large Elementor addon package.

Common Elementor Image Comparison Problems

The Images Move as You Drag the Divider

The files probably use different crops, dimensions, camera angles, or subject positions.

Correct the source images before changing the plugin settings. A custom height will not repair poor alignment.

The Slider Looks Correct in Elementor but Not on the Live Page

Clear the Elementor-generated CSS, WordPress cache, CDN cache, and browser cache. Then test the published page in a private window.

Theme CSS or optimization settings may also affect the public output without changing the Elementor editor preview.

The Slider Feels Too Tall on Mobile

Remove the custom height and test the natural image ratio. If the section still needs a fixed height, add a smaller value that suits narrow screens.

Also inspect the parent Elementor section and column settings. Extra minimum height or padding can make the component appear larger than expected.

The Divider Does Not Respond

Confirm that the selected slider is published and contains two valid Media Library images.

Next, test the page without JavaScript delay or script combination. A performance plugin may have changed the initialization order.

The Labels Are Difficult to Read

Switch between the Dark and Light badge options, shorten the label text, or remove the labels when the surrounding content already explains the comparison.

Avoid placing long descriptions inside the image badges.

The Elementor Widget Is Missing

Confirm that Elementor and HexCoda Before & After Image Slider are both active. Reload the Elementor editor after activation.

You can use Elementor’s Shortcode widget as an alternative placement method.

Frequently Asked Questions

Quick answers about Elementor before and after images, plugin setup, mobile use, performance, and reusable comparisons.