How to Add a Before and After Image Slider in WordPress

A before and after image slider places two related images in the same visual area and lets visitors drag a handle to reveal either version. It is useful when the difference between the images is more important than viewing each file separately.

To add a before and after slider in WordPress, create a comparison using two matching images, choose a horizontal or vertical direction, and insert the saved slider through a shortcode, Gutenberg block, or Elementor widget.

A dedicated image comparison plugin handles the draggable divider, responsive layout, touch interaction, and keyboard controls without requiring custom CSS or JavaScript.

What Is a Before and After Image Slider?

A before and after image slider is an interactive comparison that overlaps two images inside the same container. One image usually shows the original state, while the second presents the edited, restored, renovated, or completed result.

Visitors move a divider to reveal more or less of either image. Because both versions occupy the same space, small visual differences are easier to inspect than they would be in two separate images.

A horizontal slider reveals the images from side to side. A vertical slider reveals them from top to bottom. Both formats use the same comparison principle, although one direction may suit the image composition better.

Common uses include photo retouching, property renovations, landscaping, product restoration, design revisions, vehicle detailing, beauty services, color correction, and staged real estate photography.

What You Need Before Creating the Slider

Two matching comparison images

Prepare one before image and one after image. For the most accurate comparison, both files should use identical pixel dimensions, the same aspect ratio, a matching crop, and a similar perspective.

Important visual elements should remain in the same positions. For example, a house comparison should keep the roofline, windows, entrance, driveway, and horizon aligned.

An image comparison slider can overlap two files accurately, but it cannot automatically correct photographs taken from different camera positions or angles.

A WordPress image comparison plugin

This guide uses HexCoda Before/After Sliders, a focused WordPress plugin for creating reusable horizontal and vertical image comparisons.

Each comparison is saved as an individual slider. You can manage it from one place and insert it through a shortcode, Gutenberg block, or Elementor widget.

Access to the WordPress Media Library

The before and after images are selected from the WordPress Media Library. Existing files can be reused, or new images can be uploaded while creating the slider.

The selected images remain in the WordPress Media Library. Removing a slider does not delete the original image files.

How to Create a Before and After Slider in WordPress

Step 1: Install and activate the plugin

After downloading the plugin ZIP file:

1. Open Plugins → Add New Plugin in the WordPress dashboard.
2. Select Upload Plugin.
3. Choose the downloaded ZIP file.
4. Select Install Now.
5. Activate the plugin after the installation finishes.

A new Before/After Sliders area will appear in the WordPress administration menu.

Upload the plugin ZIP from the WordPress Add Plugins screen.

Step 2: Create a new slider

Open:

Before/After Sliders → Add New Slider

Enter a descriptive internal title. The title helps identify the comparison later when selecting it in Gutenberg, Elementor, or the slider-management screen.

Useful examples include:

• Kitchen Renovation
• Portrait Retouching Comparison
• Product Restoration Example

The title is primarily used for administration, so choose wording that will remain clear as the number of saved sliders grows.

Step 3: Select the Before and After images

Use the image controls to choose the original and completed versions from the WordPress Media Library.

The Before field should contain the initial state. The After field should contain the completed, edited, or transformed version.

Both images are required. The slider cannot be saved until each field contains a valid image.

Before continuing, confirm that:

• the correct image appears in each field
• the files are not reversed
• both images use matching dimensions
• important visual elements remain aligned

Select a valid Before image and After image from the WordPress Media Library.

Step 4: Choose the comparison direction

Select either a horizontal or vertical comparison.

Horizontal direction

A horizontal slider moves from side to side. It works well for buildings, rooms, landscapes, products, wide design mockups, and most standard website photographs.

Vertical direction

A vertical slider moves from top to bottom. It is useful for portraits, mobile screenshots, tall architectural images, full-page designs, and comparisons with clearly separated upper and lower areas.

Choose the direction that follows the natural composition of the images rather than using the same setting for every comparison.

Step 5: Configure the labels and starting position

The default labels are Before and After, but they can be changed to match the subject.

Alternative label combinations include:

• Original and Edited
• Old and Renovated
• Untreated and Treated
• Draft and Final

Labels can also be left empty when the context is already clear or when a cleaner presentation is preferred.

The starting position controls where the divider appears when the slider first loads. A value of 50% places it in the center and shows equal portions of both images.

A different value can reveal more of one image initially. For example, moving the starting position toward the right can show more of the before image before the visitor interacts.

Step 6: Choose a style and template

Styles control the appearance of the comparison, while templates determine how supporting content is arranged around it.

Compact

Compact keeps attention on the images and comparison handle. It works well in blog articles, portfolios, and pages where supporting text already appears nearby.

Proof

Proof provides additional context for case studies, completed projects, service examples, and documented results.

Sales

Sales is intended for commercial pages where the image comparison supports a product or service presentation.

Choose the template according to the purpose of the page, not only its appearance.

Step 7: Review the live preview

The live preview shows how the comparison will look and behave before it is saved.

Use the preview to verify:

• image order and alignment
• comparison direction and starting position
• labels, style, and template
• custom height and overall presentation

Changes made in the editor remain inside the preview until the slider is saved. Existing frontend placements continue using the last valid saved configuration.

Review the images, labels, direction, and starting position before saving.

Step 8: Save the slider

Select Save Slider.

After the first valid save, WordPress opens the Edit Slider screen. A confirmation notice appears, and the slider receives its permanent record ID.

The saved screen also provides the reusable shortcode and Duplicate action.

Three Ways to Add the Slider to WordPress

After saving the comparison, you can insert it through a shortcode, the Gutenberg block editor, or Elementor. All three methods reference the same saved slider.

Method 1: Add the Slider with a Shortcode

Every saved slider receives a shortcode similar to:

The number identifies the saved slider. Copy the shortcode from the slider editor and paste it wherever WordPress processes shortcodes.

Suitable locations include:

• WordPress posts and pages
• Classic Editor content
• Shortcode blocks
• widgets
• WooCommerce product descriptions
• Flatsome UX Builder
• compatible themes and page builders

Use the shortcode in a Shortcode block

Add a Shortcode block in Gutenberg and paste the generated code. This method is useful when you prefer direct shortcode placement instead of the dedicated HexCoda block described below.

Add the shortcode in the Classic Editor

Paste the complete shortcode directly into the content area where the comparison should appear. Keep it on one line and do not change the slider ID.

Add the shortcode in Flatsome UX Builder

1. Open the page in Flatsome UX Builder.
2. Add a Shortcode element.
3. Paste the generated HexCoda shortcode.
4. Apply the change.
5. Preview and save the page.

This method allows the comparison to appear inside Flatsome rows, columns, product layouts, and other UX Builder structures.

Method 2: Add the Slider in Gutenberg

HexCoda Before/After Sliders includes a dedicated block for the native WordPress editor.

1. Open a page or post in Gutenberg.
2. Select the block inserter.
3. Search for HexCoda Before/After Sliders.
4. Insert the block.
5. Select a published slider.
6. Choose any available template or style overrides.
7. Save or publish the page.

The block uses a saved comparison rather than requiring the same images to be uploaded again.

This means the slider can appear on several pages while remaining manageable from one WordPress screen.

Choose an existing comparison from the HexCoda block settings.

Method 3: Add the Slider in Elementor

The plugin also includes a dedicated Elementor widget.

1. Open the page with Elementor.
2. Search the widget panel for HexCoda Before/After Sliders.
3. Drag the widget into the page layout.
4. Select a saved slider.
5. Choose any available template or style overrides.
6. Review the editor preview.
7. Update the page.

The Elementor widget uses the same saved slider records as the shortcode and Gutenberg block.

Elementor is optional. The plugin also works through Gutenberg and shortcodes when Elementor is not installed.

Select a saved comparison through the dedicated Elementor widget.

How to Reuse the Same Slider on Multiple Pages

Each comparison is stored as a reusable WordPress slider.

You can place the same record on a service page, portfolio, case study, WooCommerce page, blog article, or Elementor landing page.

Every placement references the saved slider. When the original slider is edited and saved, the updated version appears in each shortcode, Gutenberg block, and Elementor widget that uses it.

For example, a renovation company could place one completed-project comparison on its homepage, renovation service page, portfolio, and project case study without rebuilding the slider four times.

How to Prepare Images for an Accurate Comparison

The quality of a before and after slider depends heavily on the source images.

Use matching dimensions

Both files should have the same width and height.

For example:

• Before image: 1600 × 1000 pixels
• After image: 1600 × 1000 pixels

Using one square image and one landscape image can produce poor alignment or unwanted cropping.

Preserve the same crop

Keep visible landmarks in the same position.

For a portrait, align the eyes, nose, shoulders, and background edges. For a building, align the roof, doors, windows, driveway, and horizon.

Keep the camera position fixed

When documenting a physical transformation, mark the original camera position before the work begins.

Try to reproduce the same camera height, distance, angle, focal length, and orientation when taking the after photograph.

Even a small change in position can make walls, windows, furniture, or facial features appear to shift as the divider moves.

Use an appropriate image format

JPG and WebP usually provide a good balance between quality and file size for photographs.

PNG is more suitable for interface screenshots, graphics, or images that require transparency.

Compress the files before uploading, but avoid settings that introduce visible artifacts around edges and fine details.

Add descriptive alternative text

Alternative text should describe the content of the image rather than repeat a search phrase.

Examples include:

• Exterior of an older house before renovation
• Renovated house with updated siding and landscaping
• Portrait before skin retouching
• Restored wooden table after refinishing

The before and after images should have distinct descriptions.

Common Before and After Slider Problems

The images look stretched

This usually happens when the files have different aspect ratios or when a custom height does not suit the source images.

Crop both files to matching dimensions and review the slider height setting.

The comparison does not align

Matching dimensions are not enough when the photographs use different camera angles, crops, zoom levels, or perspectives.

Return to the source files and align important visual landmarks before uploading them again.

The shortcode displays nothing

Check that:

• the slider ID is correct
• both images remain available
• the slider is published
• the slider is not in Trash
• the complete shortcode was copied

A draft or incomplete slider should not appear publicly.

The slider works in the editor but not on the frontend

Save the page that contains the slider and clear any active page, server, or optimization cache.

Also confirm that the page references a published slider rather than a draft or deleted record.

The slider is difficult to use on mobile

Avoid very short custom heights and make sure the comparison handle remains visible.

Visitors should drag from the handle when moving the comparison. The surrounding image area should remain available for normal page scrolling.

Test the final page on a real phone because the surrounding theme layout can affect the available width.

Shortcode, Gutenberg, or Elementor?

All three methods reference the same saved slider. Choose the placement method that matches the editor used for the page rather than recreating the comparison.

Create Your First Before and After Slider

A well-prepared image comparison can present a visual change more clearly than two disconnected photographs. The best results come from matching source images, an appropriate comparison direction, and a layout that remains easy to use on desktop and mobile devices.

HexCoda Before/After Sliders provides a focused WordPress workflow for creating the comparison, reviewing it before saving, and reusing it through shortcodes, Gutenberg, or Elementor.