HexCoda Before & After Image Slider Documentation

1. Plugin Overview

HexCoda Before & After Image Slider provides a focused system for presenting visual differences between two images.

Before After

Instead of inserting separate images and asking visitors to compare them manually, the plugin places both images in a single interactive comparison. Visitors can drag the divider to reveal more or less of each image.

Main features

• Horizontal left-and-right image comparisons
• Vertical top-and-bottom image comparisons
• Reusable sliders stored in a central WordPress library
• Live administrative preview
• Mouse, touch, pointer, and keyboard interaction
• Adjustable starting divider position
• Custom Before and After labels
• Dark and Light label badge styles
• Clean, Minimal, and Shadow Card visual styles
• Compact, Proof, and Sales presentation templates
• Optional custom height
• Optional lazy loading
• Responsive grouped galleries
• Gutenberg integration
• Elementor Free integration
• Flatsome UX Builder integration
• Reusable WordPress shortcodes
• Optional JSON-LD structured data
• Conditional frontend asset loading
• No external scripts, fonts, telemetry, or visitor tracking

Common uses

• Photography editing comparisons
• Image restoration examples
• Interior design transformations
• Home renovation projects
• Landscaping results
• Beauty and cosmetic treatments
• Dental treatment comparisons
• Fitness progress
• Vehicle detailing
• Product restoration
• Cleaning services
• Website redesign case studies
• Graphic design portfolios
• Architectural visualization
• Marketing case studies

Important: The plugin displays two existing images inside an interactive comparison. It does not edit, resize, compress, retouch, generate, or permanently combine the original images.

2. Requirements

Before installing HexCoda Before & After Image Slider, confirm that your website meets the following requirements:

• WordPress 6.2 or newer
• PHP 7.4 or newer
• JavaScript enabled in the visitor’s browser
• A modern desktop or mobile browser
• Permission to upload and manage WordPress plugins
• Before and After images stored in the WordPress Media Library

HexCoda Core is not required. The plugin includes its own administration pages, settings, assets, storage system, and frontend renderer.

Elementor remains optional. The Elementor widget becomes available only when Elementor is installed and active.

Recommended image preparation

For the clearest comparison, prepare the Before and After images with:

• The same pixel dimensions
• The same aspect ratio
• Closely matched camera framing
• The same subject position
• Similar cropping
• Web-appropriate file sizes

The plugin can display images with different dimensions, but mismatched proportions or framing can make the comparison appear inaccurate.

3. Installation

Install the plugin ZIP

1. Log in to your WordPress administration area.
2. Go to Plugins > Add New Plugin.
3. Choose Upload Plugin.
4. Select the HexCoda Before & After Image Slider installation ZIP.
5. Choose Install Now.
6. After installation finishes, choose Activate Plugin.

After activation, WordPress adds the Before/After Sliders administration area.

Before creating your first slider

Open:

Before/After Sliders > Settings

Review the default direction, visual style, presentation template, lazy-loading behavior, gallery settings, conversion copy, and structured-data options.

Updating the plugin

Before installing an update:

• Create a complete WordPress backup.
• Confirm that the backup can be restored.
• Test the update on a staging website when the sliders are used on important sales or portfolio pages.
• Retest at least one slider after updating.
• Clear your WordPress, CDN, optimization, and browser caches.

Replacing or updating the plugin files does not normally remove saved sliders, settings, Media Library images, shortcodes, Gutenberg placements, Elementor data, or Flatsome page content.

4. Create Your First Slider

1. Open Before/After Sliders > Add New.
2. Enter a descriptive internal slider title.
3. Select the Before image from the WordPress Media Library.
4. Select the After image from the WordPress Media Library.
5. Configure the labels, direction, starting position, style, template, height, and lazy-loading behavior.
6. Review the Live Preview.
7. Choose Save Slider.
8. Copy the generated shortcode or select the slider through a supported editor integration.
9. Publish or update the page.
10. Test the slider on desktop and mobile.

Required images

A slider cannot be saved without both a valid Before image and a valid After image.

If one of the images is missing or invalid, the editor displays a validation message and identifies the field that requires attention.

Choosing a useful slider title

The slider title helps you identify the comparison inside the WordPress dashboard. It does not need to appear on the public page.

Use titles that describe the project and result, such as:

• Kitchen Renovation – Main View
• Portrait Retouching – Client Example
• Exterior Cleaning – Front Wall
• Website Redesign – Homepage
• Photo Restoration – Family Portrait

Live Preview

The Live Preview updates while you edit the slider. It reflects changes to the images, direction, labels, divider position, template, style, badge appearance, and height.

The public website continues to use the last successfully saved configuration until you save the new changes.

5. Slider Editor

Slider Title

The Slider Title identifies the comparison inside the WordPress administration area.

Choose a title that remains clear when your slider library contains multiple projects or clients.

Before Image

The Before Image represents the original state, previous condition, untreated version, or starting point.

The image must be a valid WordPress Media Library image attachment.

After Image

The After Image represents the completed state, the processed version, the treatment result, or the final outcome.

For the best visual alignment, use the same dimensions and framing as the Before Image.

Before and After labels

The labels identify each side of the comparison.

Default wording may include:

• Before and After
• Original and Edited
• Raw and Processed
• Old and New
• Untreated and Treated
• Previous and Updated

Keep labels concise so they remain readable on phones and small images.

Leave either label empty to hide it.

Direction

The plugin supports two comparison directions:

• Horizontal: The divider moves from left to right.
• Vertical: The divider moves from top to bottom.

Horizontal mode suits most photography, renovation, design, and restoration examples.

Vertical mode can work better when the visual difference occurs mainly between the upper and lower areas of the images.

Starting Position

The Starting Position defines where the divider appears when the slider first loads.

Accepted values range from 1 to 99 percent.

A value of 50 creates a balanced initial presentation. A different value can direct attention toward the most important part of the result.

Custom Height

Custom Height overrides the image’s natural display ratio.

Supported examples include:

• 420px
• 50vw
• 70vh

Use a custom height only when the surrounding page design requires a fixed or viewport-relative presentation.

An unsuitable height can crop the comparison or make the images appear mismatched.

Lazy Loading

Lazy loading delays image loading until the comparison approaches the visible browser area.

Keep lazy loading enabled for sliders positioned lower on a page.

Consider disabling it for an important slider at the top of a landing page when immediate page load time matters more than deferred image loading.

Gallery Group

The Gallery Group field connects related sliders so they can appear together inside a grouped gallery.

Use the same simple group name for every slider that belongs to the same project, category, service, or case study.

6. Templates and Styles

Templates control how the slider is presented within its surrounding content. Styles control the visual shell around the comparison.

Presentation templates

Compact

Compact displays the image comparison without the shared promotional headline or supporting copy.

Use Compact for:

• Portfolios
• Blog posts
• Documentation
• Editorial layouts
• Small content sections
• Grouped galleries

Proof

Proof displays the configured headline and supporting copy above the comparison.

Use Proof when the slider supports:

• A case study
• A customer result
• A treatment example
• A service demonstration
• Evidence supporting a commercial claim

Sales

Sales also displays the configured headline and supporting copy above the comparison. It is intended for conversion-focused pages and product or service presentations.

Use Sales for:

• Landing pages
• Service pages
• Product presentations
• Promotional sections
• Lead-generation pages

Visual styles

Clean

Clean uses a structured presentation with a balanced outer shadow.

It works well on general business websites, service pages, and portfolio layouts.

Minimal

Minimal removes the outer shadow and uses a restrained, flat presentation.

It suits editorial layouts, modern themes, and pages where the images should remain the primary focus.

Shadow Card

Shadow Card places the comparison inside a rounded card with a layered shadow.

It works well when the slider should appear as a distinct content element inside a landing page or sales section.

Label badge styles

The plugin includes two label badge options:

• Dark: Translucent dark background with light text
• Light: Translucent light background with dark text

Choose the version that provides the strongest contrast against your images.

Placement overrides

A Gutenberg block, Elementor widget, Flatsome UX Builder element, or shortcode can use a different template or visual style without modifying the original saved slider.

This allows one slider to appear as Compact in a portfolio and as Proof on a case-study page.

7. Managing Your Slider Library

Open Before/After Sliders > All Sliders to manage every saved comparison.

The slider library provides:

• Slider preview image
• Internal title
• Reusable shortcode
• Selected style
• Selected template
• Gallery group information
• Search and filtering
• Editing and duplication controls

Edit

Edit opens the saved slider and lets you change its images, labels, direction, appearance, template, starting position, height, and loading behavior.

Duplicate

Duplicate creates a new copy with the same configuration.

Use duplication when several sliders need similar labels, styling, templates, or gallery settings.

Trash

Trash removes the slider from active public use without permanently deleting its stored configuration.

A trashed slider no longer renders through its shortcode, block, widget, builder element, or gallery.

Restore

Restore returns a trashed slider to the active library.

Existing placements can resume after the slider becomes published and valid again.

Delete Permanently

Delete Permanently removes the slider record after confirmation.

Deleting a slider does not delete its Before or After images from the WordPress Media Library.

Copy Shortcode

The Copy action copies the reusable slider shortcode to your clipboard.

Search and filters

You can search sliders by title and filter the library by:

• Visual style
• Presentation template
• Gallery group
• Active or trashed status

8. Global Settings

Open Before/After Sliders > Settings to configure the starting values for new sliders.

Default Style

Select the initial visual style for new sliders:

• Clean
• Minimal
• Shadow Card

Changing this setting does not automatically modify existing sliders.

Default Direction

Select the initial comparison direction:

• Horizontal
• Vertical

Default Template

Select the initial presentation template:

• Compact
• Proof
• Sales

Default Lazy Loading

Choose whether new sliders use lazy-loaded images by default.

Each slider can still use its own loading setting.

Gallery Mode

Enable Gallery Mode when you need to display multiple saved sliders in a single responsive gallery.

Gallery shortcodes do not render grouped output when Gallery Mode is disabled.

Headline

The Headline appears above sliders that use the Proof or Sales template.

Examples include:

• See the Difference
• Compare the Result
• Before and After
• Real Project Results
• Drag to Reveal the Transformation

Supporting Copy

Supporting Copy appears below the headline and above Proof or Sales comparisons.

Use this text to explain what changed, what service was applied, or what the visitor should inspect.

Compact sliders do not display the headline or supporting copy.

Structured Data

Structured Data adds a locally generated JSON-LD description of the comparison images.

The plugin suppresses duplicate structured-data output when the same slider appears more than once during a page request.

9. Gutenberg Block

HexCoda Before & After Image Slider includes a dynamic Gutenberg block.

Add a slider in Gutenberg

1. Open a page or post in the WordPress block editor.
2. Choose Add Block.
3. Search for HexCoda Before/After Sliders.
4. Insert the block.
5. Select a published slider in the block settings.
6. Choose the placement template.
7. Choose the placement style.
8. Save or publish the page.
9. Verify the public page.

The block stores the slider ID and any placement-level template or style overrides.

The frontend output uses the same shared renderer as the shortcode and other editor integrations.

Missing or deleted slider

A block without a valid, published slider does not display a public comparison.

Select another slider when the original slider has been deleted, trashed, unpublished, or left incomplete.

10. Elementor Widget

HexCoda Before & After Image Slider works with Elementor Free. Elementor Pro is not required.

Add a slider in Elementor

1. Confirm that Elementor is installed and active.
2. Open a page with Edit with Elementor.
3. Search for HexCoda Before/After Sliders in the widget panel.
4. Drag the widget into the page.
5. Select a published slider.
6. Choose the placement template.
7. Choose the placement style.
8. Update the page.
9. Verify the slider on the public page.

The widget appears while Elementor remains active.

Deactivating Elementor does not delete HexCoda slider records or their Media Library images. Elementor-based placements become available again when Elementor is reactivated.

11. Flatsome UX Builder

HexCoda Before & After Image Slider integrates with Flatsome UX Builder.

Add a slider in Flatsome UX Builder

1. Edit the page with UX Builder.
2. Choose Add Element.
3. Open the HexCoda element category.
4. Select the Before & After Image Slider element.
5. Choose a published slider.
6. Select the placement template and visual style.
7. Apply the element settings.
8. Save the page.
9. Verify the public result on desktop and mobile.

Using the shortcode element

You can also place a slider inside the standard Flatsome Shortcode element:

Replace 123 with the ID displayed in the slider editor or library.

Recommended Flatsome testing

After placing a slider, inspect it with:

• Normal full-width sections
• Boxed rows
• Two-column layouts
• Tabs and accordions
• Mobile stacking
• Sticky headers
• UX Builder visibility settings

12. Shortcode Reference

Basic saved-slider shortcode

Replace 123 with the positive ID of a valid published HexCoda slider.

Placement template override

Placement style override

Template and style override

Supported saved-slider attributes

• id: Positive slider ID
• template: compact, proof, or sales
• style: clean, minimal, or shadow

Advanced direct shortcode

The shortcode can also render a comparison directly from Media Library attachment IDs.

Advanced attributes

• before_id: Before image attachment ID
• after_id: After image attachment ID
• before_label: Visible Before label
• after_label: Visible After label
• direction: horizontal or vertical
• start: Initial divider position from 1 to 99
• height: Valid CSS height such as 420px, 50vw, or 70vh
• class: Additional sanitized CSS class names
• lazy_load: yes or no
• schema: yes or no
• template: compact, proof, or sales
• style: clean, minimal, or shadow

Advanced shortcode example

Publishing rules

The plugin does not render public output for:

• Missing slider IDs
• Invalid slider IDs
• Non-slider WordPress posts
• Draft sliders
• Private sliders
• Trashed sliders
• Sliders without two valid images
• Direct shortcodes without valid Before and After image attachments

13. Grouped Galleries

A grouped gallery displays several published image comparisons inside one responsive grid.

Enable Gallery Mode in the plugin settings before using gallery shortcodes.

Gallery by group

The shortcode loads published sliders that share the specified Gallery Group.

Gallery by slider IDs

The plugin loads valid published sliders in the supplied order.

Gallery attributes

• group: Gallery group slug
• ids: Comma-separated slider IDs
• columns: A value from 1 to 4
• template: compact, proof, or sales

Gallery examples

Two-column service gallery

Three selected portfolio comparisons

Single-column case-study gallery

Invalid gallery members

The gallery skips sliders that are invalid, unpublished, private, trashed, or incomplete.

If no valid slider remains, the gallery produces no public output.

14. Interaction and Accessibility

The image comparison supports mouse, pointer, touch, and keyboard interaction.

Mouse and pointer controls

Visitors can drag the divider handle across the image to reveal more of the Before or After version.

Touch controls

Visitors can drag the divider handle on phones and tablets.

Normal movement outside the handle remains available for page scrolling, reducing conflicts with vertical mobile navigation.

Keyboard controls

• Arrow keys: Move the divider in the comparison direction.
• Shift + Arrow: Move the divider by a larger step.
• Page Up and Page Down: Move in larger steps.
• Home: Move to the minimum position.
• End: Move to the maximum position.

Accessible slider information

The comparison is exposed as a labeled interactive region.

The divider reports:

• Its slider role
• Its horizontal or vertical orientation
• Its current percentage
• Its minimum and maximum values

The divider remains within the valid range of 1 to 99 percent.

Reduced motion

The plugin respects browser and operating-system reduced-motion preferences.

Accessible image content

The plugin cannot determine whether the source images communicate important information in an accessible way.

Use meaningful Media Library alternative text and provide surrounding written context when the visual comparison contains information that visitors need to understand.

15. Responsive Design and Performance

Responsive behavior

The slider adapts to the available width of its WordPress container.

It can appear inside:

• Full-width sections
• Boxed content areas
• Columns
• Landing-page sections
• Blog posts
• Product descriptions
• Portfolio layouts
• Responsive galleries

Image preparation

For better results:

• Use matching image dimensions.
• Use matching aspect ratios.
• Keep the subject in the same position.
• Use consistent cropping.
• Optimize images before uploading.
• Select an appropriate WordPress image size.
• Keep important details away from label positions.

Lazy loading

Lazy-loaded images reduce initial page requests when sliders appear below the visible part of the page.

Disable lazy loading when a prominent above-the-fold comparison should load immediately.

Conditional assets

The plugin loads its public CSS and JavaScript only when a valid slider or gallery renders on the page.

This prevents the plugin from adding unnecessary frontend assets to unrelated pages.

Multiple sliders

A page can contain several independent sliders and galleries.

The plugin loads shared public assets once and initializes each valid comparison separately.

Performance recommendations

• Compress oversized JPEG and PNG files.
• Use WebP images when your WordPress setup supports them.
• Avoid uploading images much larger than their displayed dimensions.
• Use lazy loading for comparisons positioned below the fold.
• Avoid placing many large comparisons at the top of one page.
• Test long pages on a mid-range mobile device.
• Clear optimization and CDN caches after changing slider assets.

16. Structured Data

HexCoda Before & After Image Slider can generate optional JSON-LD structured data using information from the selected Media Library images.

The structured data is generated locally by WordPress. It does not require an external API or remote SEO service.

When to enable structured data

Structured data may be useful when the comparison forms an important part of:

• A case study
• A project portfolio
• A service result
• An image restoration example
• A design transformation
• A commercial demonstration

Duplicate prevention

When the same comparison appears multiple times in a single page request, the plugin suppresses duplicate structured-data payloads.

Important SEO limitation

Structured data does not guarantee enhanced search results or specific rankings.

Your page still needs descriptive headings, useful written content, meaningful alt text for images, and a clear relationship between the images and the page’s topic.

17. Privacy and Security

Privacy

HexCoda Before & After Image Slider:

• Does not track visitors
• Does not include telemetry
• Does not load remote frontend scripts
• Does not load remote fonts
• Does not make external API requests
• Does not create plugin cookies
• Does not use localStorage
• Does not use sessionStorage
• Generates optional structured data locally

Your WordPress theme, hosting provider, analytics platform, CDN, consent solution, and other plugins may have separate privacy behavior.

Administrative security

The plugin uses standard WordPress security mechanisms for administrative actions.

These include:

• Capability checks
• WordPress nonces
• Post-type validation
• Object authorization checks
• Image attachment validation
• Input sanitization
• Safe administrative redirects

Public rendering rules

Only valid published sliders with two valid image attachments render publicly.

Draft, private, trashed, incomplete, or invalid records do not allow public comparison.

Data retention

Deactivating or replacing the plugin retains:

• Saved sliders
• Plugin settings
• Slider metadata
• Gutenberg placements
• Elementor placements
• Flatsome content
• Shortcodes
• Media Library images

Deleting an individual slider does not delete its Before or After images.

Maintain a verified backup before performing permanent data removal or database maintenance.

18. Troubleshooting

The slider will not save

Confirm that both image fields contain valid WordPress Media Library images.

Resolve the visible validation message and save the slider again.

The shortcode displays nothing

Confirm that:

• The slider ID is correct.
• The slider is published.
• The selected WordPress record is a HexCoda slider.
• The slider has valid Before and After images.
• The slider is not private or trashed.

The gallery displays nothing

Confirm that:

• Gallery Mode is enabled.
• The group name or supplied IDs are correct.
• At least one slider is published and valid.
• The gallery shortcode contains a valid column value.

The Gutenberg block appears empty

Select a valid published slider in the block sidebar.

Replace the selection when the original slider has been deleted, trashed, unpublished, or left incomplete.

The Elementor widget is unavailable

Confirm that Elementor is installed and active.

Reload the Elementor editor after activating either plugin.

The Flatsome element is unavailable

Confirm that the Flatsome theme and UX Builder are active.

Reload UX Builder after activating or updating the plugin.

You can use the standard Flatsome Shortcode element as an alternative placement method.

The Proof or Sales headline is missing

Open the plugin settings and configure the Headline and Supporting Copy.

Confirm that the selected placement uses Proof or Sales. Compact intentionally hides promotional copy.

The images appear misaligned

Use images with matching dimensions, aspect ratios, subject positions, and cropping.

Remove or adjust an unsuitable custom height.

Changes do not appear publicly

1. Save the slider.
2. Update the page containing the slider.
3. Clear the WordPress page cache.
4. Clear the object cache.
5. Clear the CDN cache.
6. Clear the browser cache.
7. Test the page in a private browser window.

Old styling remains visible

Confirm that the current plugin version is active, then clear all optimization, CDN, page, and browser caches.

Dragging does not work correctly

Temporarily disable JavaScript delay, combination, minification, or optimization for the affected page.

Clear every cache and test again.

Some optimization tools can change the script loading order or delay slider initialization.

The page moves while using the slider on mobile

Drag the visible divider handle rather than starting the gesture elsewhere on the image.

The plugin preserves normal page scrolling outside the intended comparison control.

The slider is too tall or too short

Remove the Custom Height value to restore the natural image ratio or replace it with a suitable CSS value.

Safe diagnostic sequence

1. Confirm that WordPress and PHP meet the minimum requirements.
2. Confirm that HexCoda Before & After Image Slider 1.0.0 is active.
3. Create a new test slider with two standard Media Library images.
4. Place it on a new page using the basic shortcode.
5. Clear all relevant caches.
6. Temporarily disable script optimization for the test page.
7. Check the browser console for errors.
8. Check the WordPress debug log.
9. Test with a default WordPress theme on a staging website.
10. Record the theme, plugin, WordPress, PHP, browser, and optimization versions.

Use a staging website when disabling plugins, changing themes, or modifying caching and optimization rules.

19. Maintenance and Licensing

Updates and backups

Before installing a plugin update:

• Create a complete backup.
• Verify that the backup can be restored.
• Test the update on staging when the sliders support important commercial pages.
• Retest shortcode placements.
• Retest Gutenberg, Elementor, and Flatsome placements where applicable.
• Retest touch interaction on a real mobile device.
• Clear all relevant caches.

Deactivation

Deactivating the plugin disables the interactive frontend slider output.

Your saved slider records, page content, builder data, shortcodes, settings, and Media Library images remain stored in WordPress.

Uninstall considerations

The current product behavior retains slider-related data to reduce accidental loss.

Have a qualified administrator remove retained database records only when complete removal is required and a verified backup exists.

License

HexCoda Before & After Image Slider includes a perpetual product license.

A perpetual license allows you to continue using the licensed product version without an ongoing subscription.

The following conditions depend on the purchase terms supplied with your license:

• Number of licensed production websites
• Staging and development allowances
• Update access
• Support period
• Refund conditions

Each product purchase includes 12 months of technical support and access to product updates according to the applicable HexCoda purchase terms.

Keep your order confirmation, license information, and original plugin ZIP in a secure location.

20. Quick Reference

Basic slider shortcode

Proof template

Sales template with Shadow Card style

Two-column grouped gallery

Gallery using selected IDs

Advanced direct comparison

Supported templates

• Compact
• Proof
• Sales

Supported visual styles

• Clean
• Minimal
• Shadow Card

Supported directions

• Horizontal
• Vertical

Supported gallery columns

• One column
• Two columns
• Three columns
• Four columns

Pre-publish checklist

• The Before and After images use compatible dimensions and framing.
• Both image attachments remain available in the Media Library.
• The slider has been saved and published.
• The starting divider position clearly presents the result.
• The labels remain readable against both images.
• The direction suits the visual comparison.
• The chosen template matches the page purpose.
• The selected style works with the WordPress theme.
• The custom height does not distort or crop important content.
• Lazy loading matches the slider’s page position.
• Mouse interaction works.
• Keyboard interaction works.
• Touch interaction works on a real phone.
• The layout works in portrait and landscape orientation.
• The slider remains usable inside the selected page builder.
• The page has been retested after clearing caches.
• The surrounding text explains the comparison where necessary.
• The Media Library images include appropriate alternative text.

21. Support

When contacting HexCoda support, include enough information to reproduce and diagnose the problem.

Information to include

• Your order information
• HexCoda Before & After Image Slider version
• WordPress version
• PHP version
• Active WordPress theme and version
• The editor or page builder being used
• Elementor version, where applicable
• Flatsome version, where applicable
• The affected slider ID
• The placement method
• The exact steps required to reproduce the issue
• The expected behavior
• The observed behavior
• Browser and operating-system information
• Relevant browser-console errors
• Relevant WordPress debug-log entries
• Screenshots or recordings that do not expose private information

Do not include

• Administrator passwords
• Hosting passwords
• Database passwords
• Private keys
• Complete database exports
• Customer personal information
• Payment details
• Unredacted confidential files

For support, contact:

HexCoda
Email: info@hexcoda.com
Website: HexCoda.com

Do not publish suspected security vulnerabilities publicly before HexCoda has had a reasonable opportunity to investigate them.

Send a concise reproduction, affected version information, and expected impact through the official HexCoda support channel.