Title: VisualCompare – Before & After Slider Author: Volodymyr Zhukivskyi Published: 22 Julho, 2026 Last modified: 22 Julho, 2026 --- Procurar plugins ![](https://ps.w.org/visual-compare/assets/banner-772x250.png?rev=3620550) ![](https://ps.w.org/visual-compare/assets/icon-256x256.png?rev=3619269) # VisualCompare – Before & After Slider Por [Volodymyr Zhukivskyi](https://profiles.wordpress.org/volodymyrdev/) [Descarregar](https://downloads.wordpress.org/plugin/visual-compare.1.0.0.zip) * [Detalhes](https://pt.wordpress.org/plugins/visual-compare/#description) * [Avaliações](https://pt.wordpress.org/plugins/visual-compare/#reviews) * [Instalação](https://pt.wordpress.org/plugins/visual-compare/#installation) * [Desenvolvimento](https://pt.wordpress.org/plugins/visual-compare/#developers) [Suporte](https://wordpress.org/support/plugin/visual-compare/) ## Descrição VisualCompare – Before & After Slider helps you show visual changes clearly: renovations, design revisions, retouching, medical or beauty results, product updates, restoration work, and any other before-and-after image comparison. Instead of placing two separate images side by side, you can add an interactive comparison slider that works with mouse, touch, keyboard, responsive images, and a no-JavaScript fallback. The same comparison can be created once, reused across pages, inserted with the WordPress block editor, added in Elementor, or embedded with a shortcode. #### Why use VisualCompare? * Create polished before-and-after sliders without writing custom code. * Reuse saved comparisons across posts, pages, templates, and shortcodes. * Keep comparisons usable for visitors who navigate with a keyboard or assistive technology. * Configure new comparison defaults once so editors start from consistent settings. * Show both images when JavaScript is unavailable instead of hiding important content. #### Features * Add before-and-after image comparisons with a native WordPress block. * Build sliders in Elementor with live preview controls. * Save reusable comparisons in the Visual Comparisons admin area. * Embed saved comparisons with `[visual_compare id="123"]`. * Embed inline comparisons with `[visual_compare before="123" after="456"]`. * Choose horizontal or vertical slider orientation. * Set the starting divider position for each comparison. * Enable drag, click, touch, and keyboard interaction. * Customize labels, divider color, divider width, handle size, corner radius, aspect ratio, image fit, and object position. * Use responsive WordPress image markup from the Media Library. * Display a stacked fallback when JavaScript is disabled or cannot mount. * Warn editors when selected images have different aspect ratios and may be cropped. * Duplicate reusable comparisons to speed up repeated layouts. * Import and export comparison settings as JSON. * Preserve saved content on deactivation and remove data only when uninstall cleanup is explicitly enabled. * Load frontend assets only when a comparison is rendered or detected. * Support RTL layouts and translation files. #### Common use cases * Compare room renovations, landscaping projects, repairs, and construction progress. * Present photo retouching, color grading, illustration, and design revisions. * Show beauty, wellness, dental, cosmetic, or treatment progress where before-and- after images are appropriate. * Demonstrate product improvements, UI redesigns, restoration work, cleaning services, and visual audits. * Reuse the same comparison in a case study, landing page, and template without rebuilding it. #### Integrations * Use the Visual Comparison block in the WordPress block editor. * Use the Visual Comparison widget in Elementor when Elementor is active. * Use the `[visual_compare]` shortcode in classic content, widgets, templates, and builders that render WordPress shortcodes. VisualCompare does not claim official partnership with WordPress or Elementor. Dedicated Bricks and Divi modules are not included in this version, but shortcode embeds can be used in areas where those builders support WordPress shortcodes. #### Accessibility and performance VisualCompare uses progressive enhancement. The HTML output includes both images first, then the frontend script enhances the comparison into an interactive slider when possible. Keyboard support, range input semantics, visible labels, screen-reader instructions, unique instance IDs, and no-JavaScript fallback behavior are built into the renderer. Frontend CSS and JavaScript are registered globally but enqueued only when the plugin can detect or render a comparison. This keeps pages without before-and-after sliders free from unnecessary VisualCompare assets. ### Privacy VisualCompare – Before & After Slider does not collect analytics, track visitors, or transmit data to external services. Comparison settings and WordPress media references are stored in the site’s own WordPress database. Admin previews use authenticated same-origin requests to the site’s own WordPress installation. ## Ecrãs [⌊Reusable Visual Comparison editor with image controls, labels, orientation, start position, aspect ratio, and live preview.⌉⌊Reusable Visual Comparison editor with image controls, labels, orientation, start position, aspect ratio, and live preview .⌉[ Reusable Visual Comparison editor with image controls, labels, orientation, start position, aspect ratio, and live preview. [⌊Elementor Visual Comparison widget with before and after image controls and live page preview.⌉⌊Elementor Visual Comparison widget with before and after image controls and live page preview.⌉[ Elementor Visual Comparison widget with before and after image controls and live page preview. [⌊WordPress block editor Visual Comparison block with inline image mode and sidebar controls.⌉⌊WordPress block editor Visual Comparison block with inline image mode and sidebar controls.⌉[ WordPress block editor Visual Comparison block with inline image mode and sidebar controls. [⌊Frontend before-and-after image comparison with visible labels and interactive divider.⌉⌊Frontend before-and-after image comparison with visible labels and interactive divider.⌉[ Frontend before-and-after image comparison with visible labels and interactive divider. ## Blocos Este plugin inclui 1 bloco. * Visual Comparison Compare two images with an accessible before-and-after slider. ## Instalação 1. Upload the `visual-compare` folder to `/wp-content/plugins/`. 2. Activate VisualCompare – Before & After Slider in the WordPress admin. 3. Open a post or page and add the Visual Comparison block from the block inserter. 4. Choose the before and after images from the WordPress Media Library. 5. Optional: create reusable items under Visual Comparisons and insert them with `[ visual_compare id="123"]`. 6. Optional: open Visual Comparisons > Settings to set defaults for new comparisons. Editors and administrators can create and edit comparisons. Only administrators can change plugin settings and the uninstall cleanup option. ## Perguntas frequentes ### Does VisualCompare require Elementor? No. VisualCompare includes a native WordPress block, reusable comparison entries, and shortcode support. The Elementor widget is available only when Elementor is active. ### Does VisualCompare support the WordPress block editor? Yes. Add the Visual Comparison block from the block inserter. The block supports inline comparisons and reusable Visual Comparison items. ### Does VisualCompare support Bricks, Divi, or other builders? This version includes dedicated support for the WordPress block editor and Elementor. Other builders can use the `[visual_compare]` shortcode where they support normal WordPress shortcode rendering. ### Which WordPress themes are supported? VisualCompare is theme-independent and should work with themes that output normal WordPress content, widgets, shortcodes, and enqueued frontend assets. If a theme or builder disables WordPress shortcodes or strips plugin assets, use the native block or Elementor widget where available. ### How do I use the shortcode? Create a reusable comparison under Visual Comparisons and copy its shortcode, for example: ``` [visual_compare id="123"] ``` You can also create an inline comparison with attachment IDs: ``` [visual_compare before="123" after="456" orientation="horizontal" start="50"] ``` ### Why is my slider not showing? Make sure both images are valid WordPress image attachments. If a reusable comparison is used, confirm that the comparison is published and that the shortcode ID matches the saved item. ### What happens if JavaScript is disabled? Both images remain visible in a stacked layout. JavaScript progressively enhances the markup into an interactive comparison slider when it loads successfully. ### Is VisualCompare accessible? VisualCompare includes keyboard interaction, range input semantics, screen-reader instructions, labels, unique instance IDs, and a no-JavaScript fallback. Site owners should still provide meaningful image alt text and review final page content for their own accessibility requirements. ### Will VisualCompare slow down every page? The plugin registers its frontend assets but enqueues them only when a comparison is detected or rendered. Pages without comparisons should not load the VisualCompare frontend script or stylesheet. ### Can I change the default slider settings? Yes. Administrators can open Visual Comparisons > Settings and set defaults for orientation, starting position, interactions, aspect ratio, image fit, labels, divider style, handle size, and corner radius. Defaults apply to newly created comparisons and do not overwrite existing content. ### Does uninstalling the plugin delete my comparisons? No, saved data is preserved by default. Permanent cleanup must be explicitly enabled in Visual Comparisons > Settings before uninstalling the plugin. ## Avaliações Este plugin não tem avaliações. ## Contribuidores e programadores “VisualCompare – Before & After Slider” é software de código aberto. As seguintes pessoas contribuíram para este plugin: Contribuidores * [ Volodymyr Zhukivskyi ](https://profiles.wordpress.org/volodymyrdev/) [Traduza o “VisualCompare – Before & After Slider” para o seu idioma.](https://translate.wordpress.org/projects/wp-plugins/visual-compare) ### Interessado no desenvolvimento? [Consulte o código](https://plugins.trac.wordpress.org/browser/visual-compare/), consulte o [repositório SVN](https://plugins.svn.wordpress.org/visual-compare/), ou subscreva o [registo de alterações](https://plugins.trac.wordpress.org/log/visual-compare/) por [RSS](https://plugins.trac.wordpress.org/log/visual-compare/?limit=100&mode=stop_on_copy&format=rss). ## Registo de alterações #### 1.0.0 * Added: Native WordPress block editor support, Elementor widget support, reusable comparisons, shortcode embeds, JSON import/export, duplicate actions, and global defaults for new comparisons. * Improved: Accessibility, keyboard interaction, touch and pointer behavior, no- JavaScript fallback output, RTL behavior, responsive image rendering, and conditional asset loading. * Fixed: WordPress Plugin Check findings related to translation context, sanitization, prefixed uninstall variables, filter-safe cleanup, compatibility metadata, and translation loading. ## Metadados * Versão **1.0.0** * Última actualização **Há 2 dias** * Instalações activas **Menos de 10** * Versão do WordPress ** 6.5 ou superior ** * Testado até **7.0.2** * Versão do PHP ** 7.4 ou superior ** * Idioma * [English (US)](https://wordpress.org/plugins/visual-compare/) * Etiquetas * [accessibility](https://pt.wordpress.org/plugins/tags/accessibility/)[before after](https://pt.wordpress.org/plugins/tags/before-after/) [before after slider](https://pt.wordpress.org/plugins/tags/before-after-slider/) [comparison slider](https://pt.wordpress.org/plugins/tags/comparison-slider/) [image comparison](https://pt.wordpress.org/plugins/tags/image-comparison/) * [Visualização avançada](https://pt.wordpress.org/plugins/visual-compare/advanced/) ## Classificações Ainda não foram submetidas avaliações. [Your review](https://wordpress.org/support/plugin/visual-compare/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/visual-compare/reviews/) ## Contribuidores * [ Volodymyr Zhukivskyi ](https://profiles.wordpress.org/volodymyrdev/) ## Suporte Tem algo a dizer? Precisa de ajuda? [Ver fórum de suporte](https://wordpress.org/support/plugin/visual-compare/)