JUX Before After - Joomla Extension

JUX Before After Setup Guide for a Joomla Website

JUX Before After is not meant for a regular gallery. It is built for one very specific job: showing two versions of the same subject so the visitor can drag the divider and see the difference for themselves. In this guide, we cover how to prepare the images, install the extension, enable it inside an article or module, configure labels, colors, orientation, and interaction mode, and then confirm that the comparison works correctly on the live site.

This article does not repeat the product card summary. The practical side matters more here: where to use a before/after comparison, how to avoid breaking the layout, why the Joomla editor affects the shortcode, when to switch to module output, what to do about caching, and how to diagnose cases where the slider does not move or the shortcode appears as plain text instead of a working comparison block.

The feature details in this guide are based on the JoomlaUX product page, the Joomla Extensions Directory listing, and public support replies from JoomlaUX. If a precise interface item is not clearly confirmed by sources, it is described cautiously as something to verify, not as a guaranteed button name in every build of the product.

When a Before-and-After Comparison Actually Makes the Page Stronger

An interactive comparison works better than a simple pair of images when the user needs to see the difference with their own eyes. That matters for photo restoration, interior design, renovation, cosmetic treatments, dentistry, retouching portfolios, construction case studies, interface updates, image processing, historical materials, and product change demonstrations. In these scenarios, a static "before" image next to an "after" image often asks too much of the reader: they have to shift their focus, remember details, and compare the areas manually.

JUX Before After solves that by overlaying two images and adding a controllable comparison line. The visitor drags the divider, clicks, or hovers, and the page gradually reveals the second version. This is not just a decorative effect. When the block is built well, it helps prove the result of a service, show project progress, and make the page more persuasive without a long explanation.

A good example is a renovation studio page. Before installing the extension, the site owner usually uploads two photos: an old bathroom and the finished interior. Some visitors scroll past them as if they were part of a normal gallery. After the comparison is set up, you can show the exact same camera angle, with the left side of the frame staying in the "before" state and the right side showing the result. The user instantly sees what changed: tile, lighting, furniture, color palette, and open space.

There is a downside too. This type of block does not work well for images with different angles, different perspective, different scale, or a different composition. If the "before" shot is taken from above and the "after" shot is taken from the side, the interactive divider will only make the mismatch more obvious. That is why the real preparation starts before you ever open the admin panel, at the level of the visual source material.

The key check before setup: both images should show the same scene, with similar framing and the same aspect ratio. If the pair does not line up visually, neither drag mode nor polished labels will make the comparison convincing.

What the Extension Can Do, and Where Expectations Should Stop

Based on the official description and the JED listing, JUX Before After is designed to display image pairs in a comparison format. The product description mentions a shortcode for inserting comparisons into content, a shortcode generator, a module-based output option, a slider with multiple pairs, horizontal and vertical orientation, interaction through drag, click, or hover, custom labels, colors, positions, and overlay elements. For a typical site owner, that means two practical working models: insert the comparison directly into Joomla content or display it through a module in a template position.

It is important not to expect the extension to do things it was never meant to do. It is not a photo editor, not a CDN for image optimization, and not a full media library. It will not fix poor source images, straighten perspective, or handle SEO for the site owner. Its job is to take prepared images and display them in a convenient interactive block.

Shortcode Inside an Article

The official description refers to inserting an image pair through opening and closing shortcode tags in the Joomla editor. In practice, this is convenient for articles, case studies, service pages, and blog posts where the comparison should be part of the main narrative. The user reads the explanation, reaches the block, and immediately sees the visual proof.

This approach works especially well for one or two comparisons on a page. If you need to show many pairs, it is better not to turn the article into a long wall of shortcodes. In that case, it makes more sense to use a module or a slider, because a module is easier to assign to a template position, a menu item, or a page builder layout.

A Module for Template Positions and Page Builders

The product changelog specifically mentions the addition of a module. That matters in Joomla: a module can be displayed in a template position, assigned to menu items, and used alongside a page builder. In a public support reply about SP Page Builder, JoomlaUX recommended using a custom module, enabling Prepare content, and then calling that module from Page Builder. That is not a universal guarantee for every builder, but it is a useful practical reference point.

If the site uses a template with multiple positions, module output is often more convenient than a shortcode. For example, you can place the comparison in a portfolio sidebar, in a section below the service description, or in a standalone block on a landing page. The main thing is not to forget menu assignment for the module and to verify the result on the exact page where it is supposed to appear.

A Slider with Multiple Comparisons

A slider makes sense when a single page needs to show a series of similar projects: several renovated apartments, different clinic zones, design revisions, portrait retouching, or restoration work on several objects. Instead of stacking ten separate comparisons one after another, you can build a more compact block with multiple pairs.

But a slider requires discipline. All pairs should be prepared in a consistent style: the same orientation, similar size, clear labels, and the same framing logic. If one pair is horizontal, another is vertical, and a third is shot completely differently, the user loses focus. In that case, it is better to split the content into several separate comparisons by topic.

Who JUX Before After Is Right For, and Who Should Use a Different Format

The extension is useful for Joomla site owners who need more than just image display. It is for people who need to prove a change. That includes agencies, service professionals, clinics, design studios, photographers, restorers, stores that need to show a product effect, educational projects, and publishers explaining visual differences. The product has one clear strength: it solves a focused problem without requiring you to build your own JavaScript comparison slider.

JUX Before After is a good fit for a site administrator who is willing to work with prepared images and check the result after each change. It is convenient for a content manager who regularly publishes case studies. It can save a developer time when the task is standard and does not require custom logic. It helps a designer present changes in an interface or layout without a long presentation.

This is not the right tool if you need a full photo gallery with categories, filters, albums, bulk upload, and complex navigation. For that, a gallery extension is a better fit. The product may also be a poor choice if the site is fully managed through an external SaaS widget builder where embedding third-party code is easier, or if the editorial team is not prepared to follow source image requirements.

The practical conclusion is simple: JUX Before After is worth using where the comparison itself is part of the argument. If the block does not help the visitor make a decision, understand the difference, or verify the result, it is better not to add it just for motion on the page.

Preparation Before Installation: Images, Editor, Template, and Backup

Before installing the extension, check four things: the technical state of the site, the editor, the future output location, and the images themselves. This is the boring part, but it is also what most often separates a solid result from the familiar situation where "everything looks installed in the admin area, but nothing works on the page."

Check Compatibility and the Installation Method

The developer page and JED listing show compatibility with multiple Joomla branches, along with support for the Joomla update system. Still, the site should always be checked in its own environment: the CMS version, PHP version, template, installed extensions, cache, and editor can all affect behavior. Before installation, create a backup of both files and database. That is standard safe practice for any extension, especially on a live site that already uses third-party plugins.

The package should be installed through Joomla's built-in Extension Manager. The official Joomla documentation describes the standard path: upload the ZIP package, open the extension installer in the admin panel, and run the installation through package upload. If Joomla reports that the package format is invalid, do not immediately unzip it and copy files manually. First, check whether the downloaded archive contains a separate installable ZIP inside it.

Confirm the Editor Used for the Shortcode

A public JoomlaUX support reply to an older request points to an important detail: JUX Before After was noted as compatible with Joomla's default TinyMCE editor. At the same time, the JED changelog includes an entry about JCE editor support in a later update. That means the editor should be verified against the specific product version and site configuration, not based on memory.

If your team uses JCE, CodeMirror, or another editor, create a test article. Insert the shortcode through the extension interface or manually according to the product documentation, save the content, reopen it, and make sure the editor has not altered the service markup. If the shortcode disappears, gets escaped, or turns into plain text, temporarily test with TinyMCE and review the HTML filtering settings for the user group.

Prepare Image Pairs in Advance

For a before-and-after block, dimensions matter a lot. The pair should have the same aspect ratio, similar sharpness, and the same visual center. Do not upload giant camera originals if the block will only appear inside a standard content column. It is better to prepare web-ready versions first, give them clear file names, and check file weight. Recommendations from similar before/after services typically come down to the same rule: matching aspect ratios, reasonable resolution, and lightweight files for faster loading.

File names matter too. Instead of random names like IMG_4837.jpg and final-new-2.png, use a clear pair such as kitchen-before.jpg and kitchen-after.jpg. That helps the content manager avoid mixing up images and lets the developer diagnose issues faster if the wrong version appears on the page.

Do not start on the homepage. Begin with a test article, a hidden menu item, or a draft page. After you verify the shortcode, the module, caching, and mobile behavior, move the block into the live area.

Installation and Initial Verification in Joomla

Installing JUX Before After is not fundamentally different from installing any other Joomla extension, but after installation you need to verify more than just the fact that it installed. You need to check the parts that actually affect output. According to JED, the product includes elements for both content-based and module-based use, so after installation it is worth reviewing both the plugin list and the module list.

A Safe Installation Sequence

1. Back up the site and make sure you can restore it without affecting visitors.
2. Download the installation package from the developer's trusted source or official product page.
3. Open the Joomla admin panel and go to the built-in extension installation section.
4. Upload the ZIP package through the upload tab and wait for the successful installation message.
5. Check the extension list: the module and plugin should be installed, and the required item should be published.
6. Clear Joomla cache and any external optimization cache enabled on the site.
7. Create a test page with one image pair and verify the output without extra styling or complexity.

Right after installation, do not jump into building a complex slider with ten pairs. The first test should be minimal: two prepared images, standard labels, a basic interaction mode, and a page without heavy third-party scripts. That makes it much easier to tell whether the core mechanism itself is working.

What Counts as a Successful Initial Check

A successful installation is not just a green confirmation message in the admin panel. On the public side of the site, you should see an interactive area where both images are present, the divider responds to the selected interaction type, the labels do not cover important details, and the block does not break the width of the content area. Check the page in a regular browser, in a private window, and on a mobile device.

If the shortcode appears as plain text, content processing did not run. If you see an empty block, likely causes include image path issues, a JavaScript conflict, caching, or the template. If the comparison works inside a test article but not in a module or builder, check the content preparation parameter and the module rendering method.

Configuration After Installation: Shortcode, Module, Labels, and Slider Behavior

The configuration stage is the most important one, because this is where the product turns from an installed extension into a working block on the page. JUX Before After includes several groups of settings confirmed by the official description: shortcode insertion, module output, a slider with multiple pairs, orientation, divider behavior, labels, colors, positions, and overlay. Not every interface label will match across versions, so the logic below focuses on how setup works rather than the exact wording of each field.

Shortcode: Where It Works Best

The shortcode is convenient inside an article when the comparison is part of the explanation. The official description refers to a structure with opening and closing [before-after] tags. You should not type long parameters by hand if your version includes a shortcode generator. The generator reduces the risk of syntax mistakes, especially when you need to specify two images, labels, and an interaction mode.

After inserting it, save the article and open it again. If the editor modified the code, check the user filters and editor mode. For the group that publishes these pages, it is best to document one clear workflow: which editor to use, where to launch the generator, how to choose the images, and what kind of labels to enter.

Minimum Shortcode Check

• The page should not display raw [before-after] text.
• Both images should load from the media library or the correct site folder.
• The divider should respond to the selected mode: drag, click, or hover.
• After reopening the article, the editor should not remove the service structure.

Module: When It Is Better Than an Article

Use the module for template areas, landing pages, builders, and repeatable blocks. In Joomla, a module can be assigned to specific menu items, displayed in a template position, and published separately from the article content. That is convenient when the comparison should live next to the content, but not inside the article text itself.

If you display JUX Before After through a custom module or a page builder, enable content processing wherever it is needed. A public JoomlaUX support response for SP Page Builder explicitly points to this workflow: create a custom module, add JUX Before After, enable Prepare content, and then call the module inside Page Builder. That advice matters especially when you see a plain shortcode instead of an interactive block.

Module Assignment Check

After saving the module, do not just open the page. Also check the menu assignment settings. A common Joomla site mistake is that the module is published but not assigned to the correct menu item, or it is placed in a position the current template does not render. If the position is unclear, temporarily test the module in a known visible template area, then move it to its intended location.

Interaction Modes: Drag, Click, and Hover

Official sources list three interaction types: drag, click, and hover. For most sites, drag is the safest place to start because the user is clearly controlling the divider. Click works if the block should react quickly without requiring mouse hold. Hover can look impressive, but it may conflict with the template, overlapping layers, pop-up elements, and touch-device behavior.

If a large share of your audience visits on phones, make sure to test mobile behavior. The product changelog mentions a fix for the touch move event, so touch interaction is not a theoretical concern for this kind of extension. On a phone, the user should immediately understand that the block can be moved, and the page should not fight against the scroll gesture.

Horizontal and Vertical Orientation

Horizontal orientation usually works well for wide frames: interiors, facades, landscapes, interfaces, and broad overview shots. Vertical orientation is useful for portraits, tall objects, mobile screens, building fronts, and cases where the difference is easier to read from top to bottom. Do not choose orientation just for variety. It should match the composition of the source images.

If the image is vertical, do not place it in a narrow column without testing it first. On mobile, that can make the block too tall, and the labels may start covering the subject. It is often better to prepare a separate pair for mobile use or limit the block width in the page design.

Labels, Colors, and Overlay

Labels should explain the meaning, not just repeat "Before" and "After." For an English-language page, short labels such as "Before Renovation," "After Renovation," "Original," "Retouched," "Old Design," and "New Design" usually work well. If the product shows a medical, cosmetic, or other sensitive result, avoid exaggerated promises. The label should stay factual.

Choose colors that stay visible on both images. A white label may disappear against a pale wall, while a bright brand color may look out of place on top of a photograph. If the interface lets you choose color and position, start with a calm high-contrast setup, then test the page on the actual images.

Settings to Change Carefully

• Only enable hover mode after testing it with your template, on mobile devices, and inside the page builder.
• Use overlay only when it truly explains a detail and does not hide the result.
• Choose bright handle and label colors based on the images, not only on the site's brand palette.
• Build a multi-pair slider only from images with a consistent visual rhythm.

Practical Example: A Comparison Block for a Service Page

Let's walk through a concrete scenario: a renovation studio website wants to show the result of a kitchen remodel. The goal is to insert an interactive comparison into a service page and then display a similar block in a landing section through a module. This example is useful because it demonstrates both working models: a shortcode inside the article and module output for a page with a more complex layout.

Goal

You need one block where the visitor sees the old kitchen and the finished interior in the same frame, can move the divider, and can rely on labels to understand which side shows the original state. The block should be self-explanatory and should not slow the page down unnecessarily.

Preparation

First, prepare two photos of the same size. The "before" shot and the "after" shot should match in angle. If the source files differ, open them in an image editor, level the horizon, crop them to the same aspect ratio, and save web-ready versions. Upload the files to the Joomla media library or a clearly organized site folder.

Next, create a draft article. Add a short explanation in the text so the user knows what they are comparing. Do not lead with the visual block alone without context: the visitor should understand what kind of work is being shown and what exactly changed.

Steps

1. Open the Joomla test article in an editor that reliably preserves the extension shortcode.
2. Launch the JUX Before After shortcode generator if it is available in your version, or insert the structure described in the product documentation.
3. Select the "before" image and the "after" image. Do not swap the sides after publication if the labels are already aligned with the text.
4. Set drag mode as the default interaction and choose horizontal orientation for the wide kitchen frame.
5. Enter the labels "Before Renovation" and "After Renovation," choose a contrasting color, and avoid making the labels too large.
6. Save the article, clear cache, and open the page on the public side of the site.
7. If the block is also needed in a landing section, create a module with the same comparison, assign it to the proper menu item, and verify the template position.

Expected Result

The page should show one unified comparison area, not two separate images. The divider should move smoothly, the labels should remain readable, the block should stay within the content boundaries, and on mobile the user should be able to interact with it without accidentally opening a menu or scrolling the entire page instead.

A Detail That Often Gets in the Way

If you inserted the shortcode into a custom module or builder block and it appears as plain text, the issue is almost always content processing. For SP Page Builder, JoomlaUX support recommended using a custom module and enabling Prepare content. In other builders the workflow may differ, but the principle is the same: the shortcode must pass through the content plugin processor.

Mini-summary of the example: first get the comparison working inside a standard article, then move the same setup into a module or builder. That helps you separate an extension issue from a template position or page builder integration issue.

Ways to Use It: From Portfolios to Educational Content

JUX Before After works best when the comparison block is part of the page's actual scenario instead of sitting there on its own. Below are a few practical directions you can adapt for a Joomla site without inventing extra product features.

Project Portfolio

For a portfolio, consistency matters. If you are showing five renovation cases, do not mix a kitchen, facade, bathroom, and bedroom inside one slider without context. It is better to create separate pairs by project type or break the page into sections. In each pair, use the same label style so the visitor is not spending attention on the presentation itself.

Photo Editing and Retouching

For a photographer or retouching studio, the comparison helps demonstrate editing quality without a long gallery. But here it is especially important not to overload the image with overlay labels. The frame already contains a lot of detail: skin, background, lighting, color correction. Labels should stay small and high contrast, and the divider should be visible without feeling aggressive.

Interface Design and Website Redesign

If you are comparing an old page version to a new one, use screenshots with the same height and the same browser scale. Do not insert long full-page screenshots if they cannot be read clearly. It is better to show a key area: the hero section, a product card, a form block, a menu, or a catalog fragment. That way the interactive comparison helps explain the change instead of turning into a thin vertical strip.

Educational Content and Error Breakdowns

Sometimes a before-and-after comparison is useful for teaching rather than selling. For example, you can show a photo before optimization and after color correction, a page before contrast fixes and after adjustment, or a layout before grid alignment and after cleanup. In that case, labels should sound instructional: "Before Contrast Fix," "After Alignment," "Original Frame," and "Optimized Version."

Verifying the Result: Public View, Mobile Devices, and Cache

Result verification should follow a chain: admin panel, public page, another device, private window, cache. If you only check the same browser session where you were just working in the admin area, you can easily miss a cache conflict, permission issue, or template problem.

What to Check on the Page

• The comparison block loads where you expected to see it.
• The images are not stretched or cropped unexpectedly.
• The labels do not cover faces, the product, the work result, or another important detail.
• The divider stays visible on both light and dark image areas.
• The chosen interaction mode is clear to the user without instructions.
• There are no JavaScript errors in the browser console.
• After cache clearing, the result is the same for both guest and administrator.

Mobile Verification

JUX Before After is described as responsive and touch-friendly, but the real site still has to be tested. Touch behavior depends not only on the extension, but also on the template, third-party scripts, pop-ups, and optimizers. Open the page on a phone, try moving the divider, scroll above and below the block, rotate the screen, and return to the page.

If the page scrolls instead of moving the divider, test another interaction mode. If the block is too tall, prepare a separate horizontal pair or place the comparison in a wider template area. If the labels take up too much room, shorten them and move part of the explanation into a paragraph next to the image.

Cache and Optimization

Joomla can cache entire pages, output fragments, and modules. External optimization plugins may combine or defer JavaScript. For an interactive comparison, that matters a lot: the block's HTML may appear, while the script controlling the divider never runs. After changing settings, clear Joomla cache, template or builder cache, CDN cache, and browser cache.

If the site uses aggressive optimizers, temporarily disable script combining and deferred loading on the test page. If JUX Before After works after that, the problem is not the images or the shortcode, but the resource loading order. Re-enable optimization gradually and check the result after each change.

Performance, SEO, and Accessibility: How Not to Hurt the Page with a Nice Effect

A before/after block usually contains two images for a single comparison. A slider with five pairs already means ten images, plus styles and scripts. So even a simple extension can noticeably affect the page if you upload heavy source files. Performance here depends less on a single switch inside JUX Before After and more on disciplined media handling overall.

Image Size and Format

Prepare images for the actual width of the block. If the content column only displays an image at roughly a thousand pixels wide, there is no reason to upload a source file several thousand pixels across. Keep the quality high enough to compare details, but do not leave the file heavier than necessary. JPEG or WebP usually works best for photos, while PNG or WebP is often better for interfaces and graphics if your site and publishing workflow support it.

Try to optimize both images in a pair equally. If the "before" file is lightweight but the "after" file is much heavier, loading will feel uneven. The user may see an empty or partially loaded area and conclude that the block is broken.

Alt Text and Context Around the Block

An interactive block is not a substitute for text explanation. There should be a paragraph near the comparison explaining exactly what is being compared. If the product outputs images through a standard insertion method, check how image attributes are generated on the page. If alt text cannot be configured inside the extension, compensate with clear text before and after the block, a descriptive section heading, and a caption in the article.

Do not promise SEO growth from the extension itself. It helps the user understand the result more clearly, but the page's behavioral value depends on the whole piece: headline, text, speed, structure, images, and trust in the case study.

A Safe CSS Enhancement Around the Block

If you need to gently limit the comparison area's width and add spacing, avoid editing the extension files. Create a wrapper around the block in the article or module, for example before-after-demo, and add CSS in your template's custom stylesheet or built-in custom CSS field. This snippet does not rely on JUX Before After internal classes and will not break updates.

.before-after-demo {
  max-width: 980px;
  margin: 28px auto;
}

.before-after-demo img {
  height: auto;
}

.before-after-demo .comparison-note {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

The check is simple: after adding the CSS, open the page and make sure the block has not become narrower than intended, the images are not stretched, and the spacing still looks right on mobile. Rolling it back is safe too: remove the CSS or remove the class from the wrapper. Do not use CSS to hide output errors. If the shortcode is not being processed or the script is not running, styling will not fix the root cause.

Why JUX Before After May Not Work, and How to Find the Cause

It is best to troubleshoot from simple to complex. Do not change the editor, template, cache, interaction mode, and images all at once. Lock down one test article, verify the shortcode, then the module, then any conflict with the template or builder. That way you can quickly see at which level the chain is breaking.

The Page Shows the Shortcode Instead of the Comparison

Symptom: the visitor sees text such as [before-after] or a similar service structure, but no interactive block appears. Possible cause: the content plugin is unpublished, the editor altered the code, the output is going through a module without content preparation, or the page builder does not pass the text through Joomla's content processor.

Check that the plugin is published, try the same code in a standard article saved through TinyMCE, and confirm that the custom module has Prepare content enabled if your setup requires it. If the block works in an article but not in the builder, the issue is almost certainly the output method rather than the images themselves.

An Empty Area Appears, or Only One Image Loads

Symptom: the page reserves space for the block, but one side is missing or the comparison does not assemble correctly. Possible cause: an incorrect image path, a file removed from the media library, restricted folder permissions, a file name with problematic characters, or an optimizer changing how resources load.

Open each image directly in the browser. If the file does not open, correct the path or upload it again. If both files open correctly, temporarily disable script optimization and clear cache. Do not add a second image pair until the first one works reliably.

Hover Mode Does Not Behave Like the Demo

Symptom: on hover, the divider does not move, moves in jumps, or conflicts with other page elements. Possible cause: another template layer is sitting on top of the block, the builder added a wrapper with its own mouse events, the mobile scenario does not support the expected behavior, or there is a JavaScript conflict. In an older public support case, a user asked specifically about hover behavior, and support pointed to a site-level conflict.

First switch to drag mode. If that works, the issue is not the core output, but the specific interaction type. Check the block in a standard article without the builder, disable pop-up elements near the image, and inspect the browser console. If hover is essential to the design, test it on the real template before publishing.

The Comparison Works in an Article but Not in SP Page Builder or Another Builder

Symptom: everything works in a regular Joomla article, but the builder page shows text, an empty space, or a block without interaction. Possible cause: the builder is not processing the shortcode as Joomla content. For SP Page Builder, JoomlaUX support recommended creating a custom module, adding JUX Before After there, enabling Prepare content, and then calling that module inside Page Builder.

Do not start by editing builder code. Repeat the recommended module workflow and verify the module assignment. If the builder has its own element for HTML or Joomla modules, use that instead of dropping in raw service text.

The Slider Is Hard to Move on Mobile

Symptom: swiping with a finger scrolls the page instead of moving the divider, the block jerks, or the gesture only works after several tries. Possible cause: a gesture conflict, an interaction area that is too small, heavy images, an overlay covering the handle, or outdated cache settings. The product changelog includes a specific entry about a mobile touch event fix, so if you are on an older build, the first thing to check is whether an update is available.

Reduce image weight, test drag mode, temporarily disable the overlay, and confirm that the handle is visible enough. If the problem appeared after enabling an optimizer, roll that setting back and exclude the page or extension resource from aggressive combining.

Visitors Still See the Old Version After You Change Settings

Symptom: the administrator sees the new color, labels, or mode, but guests still see the previous block. Possible cause: Joomla cache, module cache, template cache, an external CDN, or browser cache. Clear every cache layer and check the page in a private window. If progressive caching is enabled, temporarily disable it while verifying the interactive page.

Troubleshooting principle: one check, one change. If you switch the editor, hover mode, module position, and cache all at once, you will never know what actually fixed the issue.

When JUX Before After Is the Right Choice

JUX Before After is worth using when your Joomla site has real image pairs where the visitor needs to see the change for themselves. The product is especially useful for case studies, portfolios, renovation projects, retouching, redesign work, educational breakdowns, and service pages. Its main strength is a clear comparison mechanic: two versions, a divider, labels, orientation, interaction mode, and the option to output through either an article or a module.

Before publishing, keep a short checklist in mind: the images are matched, the right editor is chosen, the shortcode survives saving, the module is assigned to the correct page, content processing is enabled where needed, cache is cleared, mobile interaction is verified, and the labels do not promise more than the image pair actually shows.

If the block solves the problem after testing and does not break the page, you can get the JUX Before After package and roll the same setup into live content. Start with one strong image pair, then add sliders or module-based blocks only where they genuinely help the user make a decision.