Title: 2FOX4 Before After Author: 2fox4oliver Published: 30. März 2026 Last modified: 30. März 2026 --- Plugins durchsuchen ![](https://s.w.org/plugins/geopattern-icon/2fox4-before-after.svg) # 2FOX4 Before After Von [2fox4oliver](https://profiles.wordpress.org/2fox4oliver/) [Herunterladen](https://downloads.wordpress.org/plugin/2fox4-before-after.1.1.3.zip) * [Details](https://de.wordpress.org/plugins/2fox4-before-after/#description) * [Rezensionen](https://de.wordpress.org/plugins/2fox4-before-after/#reviews) * [Installation](https://de.wordpress.org/plugins/2fox4-before-after/#installation) * [Entwicklung](https://de.wordpress.org/plugins/2fox4-before-after/#developers) [Support](https://wordpress.org/support/plugin/2fox4-before-after/) ## Beschreibung Von Oliver Deppe von [2FOX4](https://www.2fox4.de/wordpress-plugins/). **2FOX4 Before After** lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before/after comparison. #### Features * **Three ways to use:** Gutenberg Block, Shortcode, and Elementor Widget * **Two comparison modes:** „Slider“ (images move with the divider) or „Reveal“( both images stay fixed, divider reveals one over the other) * **Horizontal & Vertical mode:** Choose the slider orientation that fits your layout * **Adjustable start position:** Set where the divider appears on load (0–100%) * **Custom labels:** Add „Before“ and „After“ text overlays (or any custom text) * **Divider color:** Pick any color for the divider line and handle * **Hover mode:** Slider follows the mouse cursor instead of requiring a drag * **Touch support:** Works perfectly on mobile devices with touch gestures * **Loading animation:** Smooth entrance animation when the slider appears * **Custom CSS class:** Add your own class for additional styling * **Keyboard accessible:** Navigate the slider with arrow keys * **Lightweight:** No jQuery dependency on the frontend, pure vanilla JavaScript #### Shortcode Usage ``` [bfas_before_after_slider before="URL" after="URL"] ``` Full example with all options: ``` [bfas_before_after_slider before="https://example.com/before.jpg" after="https://example.com/after.jpg" start="30" mode="reveal" orientation="horizontal" label_before="Before" label_after="After" divider_color="#ffffff" hover="0" animate="1" css_class="my-class"] ``` #### Shortcode Parameters * **before** (required) — URL of the before image * **after** (required) — URL of the after image * **start** — Start position in percent (default: 50) * **mode** — „slider“ or „reveal“ (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other. * **orientation** — „horizontal“ or „vertical“ (default: horizontal) * **label_before** — Text label for the before side * **label_after** — Text label for the after side * **divider_color** — Hex color for the divider (default: #ffffff) * **hover** — Set to „1“ to enable hover mode (default: 0) * **animate** — Set to „1“ for entrance animation (default: 0) * **css_class** — Custom CSS class for the container ### External services This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice („Buy me a coffee“) and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves. * Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A. * [PayPal Terms of Service](https://www.paypal.com/de/webapps/mpp/ua/useragreement-full) * [PayPal Privacy Policy](https://www.paypal.com/de/webapps/mpp/ua/privacy-full) ## Blöcke Dieses Plugin bietet 1 Block. * 2FOX4 Before After ## Installation 1. Upload the plugin folder to the `/wp-content/plugins/` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‚Plugins‘ screen in WordPress. 3. Use the Gutenberg block „2FOX4 Before After“, the Elementor widget, or the `[bfas_before_after_slider]` shortcode to add image comparisons to your pages. ## FAQ ### Does this plugin work with Elementor? Yes! The plugin includes a native Elementor widget. After activation, you will find the „2FOX4 Before After“ widget in the Elementor panel under the General category. ### Does it work on mobile devices? Yes, the slider has full touch support and works smoothly on all mobile devices and tablets. ### Can I use multiple sliders on one page? Yes, you can add as many sliders as you need. Each one works independently. ### What image sizes should I use? Both images should have the same dimensions for the best visual result. The slider will work with different sizes, but the comparison is most effective with matching images. ## Rezensionen Für dieses Plugin gibt es keine Rezensionen. ## Mitwirkende und Entwickler „2FOX4 Before After“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt: Mitwirkende * [ 2fox4oliver ](https://profiles.wordpress.org/2fox4oliver/) [Übersetze „2FOX4 Before After“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/2fox4-before-after) ### Interessiert an der Entwicklung? [Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/2fox4-before-after/), sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/2fox4-before-after/) an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/2fox4-before-after/) per [RSS](https://plugins.trac.wordpress.org/log/2fox4-before-after/?limit=100&mode=stop_on_copy&format=rss). ## Änderungsprotokoll #### 1.1.3 * Fix: Corrected Plugin URI to point to a valid, publicly accessible URL. * Fix: Replaced all phpcs:ignore escape comments with proper wp_kses() escaping for full WordPress.org compliance. * Fix: Renamed shortcode from `before_after_slider` to `bfas_before_after_slider` to use a unique, prefixed name. #### 1.1.2 * Change: Renamed plugin from „Before After Slider“ to „2FOX4 Before After“ for WordPress.org uniqueness. * Change: Updated slug and text domain to 2fox4-before-after. #### 1.1.1 * Fix: Properly escape translated output in donation notice (EscapeOutput compliance). * Fix: Removed deprecated load_plugin_textdomain() call (unnecessary since WordPress 4.6). * Fix: Updated „Tested up to“ to WordPress 6.9. * Fix: Prefixed data-nonce attribute to data-bfas-nonce for full prefix compliance. #### 1.1.0 * New: Added „Reveal“ mode — both images stay fixed while the slider reveals one over the other. * New: Mode selector available in Gutenberg Block, Elementor Widget, and Shortcode( mode=“reveal“). #### 1.0.0 * Initial release. ## Meta * Version **1.1.3** * Zuletzt aktualisiert **vor 2 Wochen** * Aktive Installationen **weniger als 10** * WordPress-Version ** 6.4 oder höher ** * Getestet bis **6.9.4** * PHP-Version ** 8.0 oder höher ** * Sprache * [English (US)](https://wordpress.org/plugins/2fox4-before-after/) * Schlagwörter * [before after](https://de.wordpress.org/plugins/tags/before-after/)[compare](https://de.wordpress.org/plugins/tags/compare/) [image comparison](https://de.wordpress.org/plugins/tags/image-comparison/)[image slider](https://de.wordpress.org/plugins/tags/image-slider/) [slider](https://de.wordpress.org/plugins/tags/slider/) * [Erweiterte Ansicht](https://de.wordpress.org/plugins/2fox4-before-after/advanced/) ## Bewertungen Es wurden noch keine Rezensionen eingereicht. [Your review](https://wordpress.org/support/plugin/2fox4-before-after/reviews/#new-post) [Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/2fox4-before-after/reviews/) ## Mitwirkende * [ 2fox4oliver ](https://profiles.wordpress.org/2fox4oliver/) ## Support Möchtest du etwas mitteilen? Brauchst du Unterstützung? [Support-Forum anzeigen](https://wordpress.org/support/plugin/2fox4-before-after/) ## Spenden Möchtest du die Weiterentwicklung dieses Plugins unterstützen? [ Für dieses Plugin spenden ](https://www.paypal.com/paypalme/oliverdeppe/5)