Сүрөттөө

Before After Image Compare for Gutenberg & Elementor

Showcase transformations, renovations, photo edits, and product comparisons with a smooth before/after image slider. This plugin works in the WordPress block editor (Gutenberg) and Elementor — no coding required.

Built by Zelvigo — the WordPress developer tools platform for generating production-ready plugins, CPTs, taxonomies, settings pages, shortcodes, and Gutenberg blocks.

Features

Gutenberg block and Elementor widget
Horizontal and vertical slider orientation
Default offset control (0–1)
Move slider on mouse hover
Swipe and click-to-move options
Before/after overlay labels
Works with any WordPress theme

Need more WordPress tools?

Visit Zelvigo Dev Studio to generate custom post types, taxonomies, plugin boilerplates, and more — in minutes.

Скриншоттор

Gutenberg block — before after image compare in the block editor.

Elementor widget — search for "compare" or "before after". — Gutenberg block — before after image compare in the block editor.

Блоктор

This plugin provides 1 block.

Before After Image Compare Compare two images with a before/after slider.

Орнотуу

Upload the wptd-image-compare folder to /wp-content/plugins/.
Activate the plugin through the Plugins menu in WordPress.
Add the Before After Image Compare block in Gutenberg, or the widget in Elementor.

FAQ.KG

Can I use this plugin without Elementor?: Yes. Use the Gutenberg block in the block editor. Elementor support is included when Elementor is installed.
Does it work with any theme?: Yes. It works with any WordPress theme that supports the block editor or Elementor.
Who built this plugin?: This plugin is built by Zelvigo, a WordPress developer tools platform.

Сын-пикирлер

kickermax Июнь 14, 2023-ж. 1 reply

A good plugin, everything works fine. But there is a problem. The inscription “after” is displayed, but copies the content “before”. It is fixed very easily. In the file image-compare.php (along the way wptd-image-compare/trunk/widgets/image-compare.php) in function renderduring subsequent rendering, “data-before” and “data-after” have the same tokens (thats all).echo sprintf(‘<figure class=”%1$s” data-offset=”%2$s” data-orientation=”%3$s” data-move=”%4$s” data-swipe=”%5$s” data-hover=”%6$s” data-noverlay=”%7$s” data-before=”%8$s” data-after=”%8$s”>’, Just change last data-after for “%9$s”

Read all 1 review

Contributors & Developers

“Before After Image Compare — Gutenberg & Elementor” is open source software. The following people have contributed to this plugin.

Zelvigo

Translate “Before After Image Compare — Gutenberg & Elementor” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Өзгөртүүлөр

1.4.3

Fixed custom widget icon not appearing in the Elementor panel.
Added compare icon styles for Elementor editor and preview.

1.4.2

Added custom compare icon for Gutenberg and Elementor.
Improved shared icon asset registration.

1.4.1

Rebranded plugin for Zelvigo. Removed legacy WPTD branding from all user-facing areas.
Updated plugin title, admin page, Elementor category, and promotional links to zelvigo.com.

1.4.0

Added Gutenberg block with the same image compare options as Elementor.
Shared frontend renderer for Elementor widget and block output.
Elementor integration is now optional; the plugin works with the block editor alone.

1.3.0

Fixed data-after token rendering bug in widget layout.
Updated plugin contributor ownership parameters.

1.1

Elementor _register_controls deprecation issue fixed

1.0

Initial release.