Before After
Slider Block
WordPress Plugin
Vorher-Nachher Slider Block – Das ultimative WordPress Plugin für beeindruckende Bildvergleiche
Präsentiere deinen Website-Besucherinnen atemberaubende Vorher-Nachher-Effekte – perfekt für Fotografinnen, Designerinnen, Ärztinnen und mehr! Mit dem Vorher-Nachher Slider Block kannst du kinderleicht visuelle Veränderungen auf deiner Seite darstellen.
Die Features
- 100% Responsive: Optimale Darstellung auf allen Geräten – egal ob Desktop, Tablet oder Smartphone.
- Nativ im Block Editor integriert: Füge den Slider direkt über den WordPress Block Editor hinzu – einfach und intuitiv.
- Web Component & Shortcode Support: Nutze den Slider flexibel als Web Component oder füge ihn per WP Shortcode überall auf deiner Seite ein.
- Individuelle Anpassungen: Du hast volle Kontrolle über das Design – Farben, Übergänge und mehr lassen sich einfach einstellen.
- Drag & Drop Funktion: Kein Programmierwissen erforderlich. Einfach den Slider zu Beiträgen oder Seiten hinzufügen und fertig!
Kompabitel mit deinem Theme und Plugin
Funktioniert mit allen bekannten Themes und Page-Buildern für WordPress. Folgende haben wir getestet:
- ✅ Alle twenty-* WordPress Themes
- ✅ Elementor
- ✅ Divi Theme und Divi Builder Plugin
- ✅ Bricks Builder
- ✅ Page-Builder by SiteOrigin
- ✅ BeTheme
- ✅ Enfold
- ✅ Beaver Builder
Shortcode
Neben dem nativen Gutenberg Block und der WebComponent, ist es auch möglich den Slider als Shortcode zu benutzen. Es können die gleichen Eigenschaften/Attribute der WebComponent angegeben werden. Alle Shortcode-Attribute anschauen.
[before-after-slider image-before="/ordner/propz-webdesign-before.webp" image-before-alt="Alt 1" image-after="/ordner/propz-webdesign-after.webp" image-after-alt="Alt 2" image-caption="Shortcode Test" hint-toggle="true" hint-text-before="Before 1" hint-text-after="After 2" hint-background="Red" hint-foreground="blue" slider-style="dashed" slider-color="Blue" slider-width=".5rem" slider-icon-width="5rem"]
Web
Component
Neben dem nativen Gutenberg Block und dem Shortcode, ist es auch möglich den Slider als WebComponent zu benutzen. Es können die gleichen Eigenschaften/Attribute des Shortcodes angegeben werden. Alle Shortcode-Attribute anschauen.
<before-after-slider image-before="/ordner/propz-webdesign-before.webp" image-before-alt="Alt 1" image-after="/ordner/propz-webdesign-after.webp" image-after-alt="Alt 2" hint-toggle="true" hint-text-before="Before 1" hint-text-after="After 2" hint-background="yellow" hint-foreground="blue" slider-style="dashed" slider-color="red" slider-width="5px" slider-icon-width="50px"></before-after-slider>
Alle Shortcode Eigenschaften
Eine Auflistung aller möglichen Shortcode-Attribute für die Individualisierung des Sliders.
Die Attribute gelten sowohl für den Shortcode als auch für die WebComponent (s. unten).
| Name | Was ist es | Mögliche Werte | Standard Wert |
|---|---|---|---|
| image-before | URL des „Vorher“-Bildes | Text (Pflichtangabe) | |
| image-before-alt | Alt-Text des „Vorher“-Bildes | Text | |
| image-after | URL des „Nachher“-Bildes | Text (Pflichtangabe) | |
| image-after-alt | Alt-Text des „Nachher“-Bildes | Text | |
| image-caption | Allgemeine Bildunterschrift | Text | |
| hint-toggle | Vorher/Nachher Hinweis anzeigen | true oder false | false |
| hint-radius | Größe der abgerundeten Ecken für den Hinweis | Beliebige Zahl mit Größenangabe | 1rem |
| hint-foreground | Hinweis Textfarbe | Beliebiger Farbwert | #fff |
| hint-background | Hinweis Hintergrundfarbe | Beliebiger Farbwert | #000 |
| hint-text-before | Hinweis „Vorher“ Text | Text | |
| hint-text-after | Hinweis „Nachher“ Text | Text | |
| slider-color | Schieber Farbe | Beliebiger Farbwert | #000 |
| slider-width | Breite der Schieber-Linie | Beliebige Zahl mit Größenangabe | 2px |
| slider-style | Stil der Schieber-Linie | solid, dashed, dotted | solid |
| slider-icon | Schieber-Symbol | Bild URL oder SVG Code | SVG |
| slider-icon-color | Schieber-Symbol Farbe | Beliebiger Farbwert | #fff |
| slider-icon-width | Schieber-Symbol Größe | Beliebige Zahl mit Größenangabe | 1.5rem |