Kostenloses Elementor-Bild-Widget mit Hover-Swap, Ribbon und Tilt
Advanced Image ist ein kostenloses Master Addons Widget, das einem einzelnen Bild Extras hinzufügt, im Hover zu einem zweiten Bild wechseln, in eine beliebige Ecke ein Simple, Corner - oder Cross-Bändchen legen, das Bild in einer Lightbox mit optionaler Plus-Taste öffnen, und einen Kipp-Effekt hinzufügen, der dem Cursor oder einem kolorierten Schatten folgt Während das Bild geladen wird, können Sie einen unscharfen Platzhalter oder einen Spinner im Normal - und Hover-Zustand mit Rand, Hintergrund und Box-Schatten gestalten.
So fügen Sie einen Hover-Bildaustausch in Elementor hinzu
Sie benötigen Elementor und das kostenlose Master Addons Plugin von WordPress.org.
- Überprüfen Sie, ob das erweiterte Bild unter eingeschaltet ist Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Erweitertes Bild Und auf die Seite ziehen.
- Wählen Sie bei Bedarf das Hauptbild und einen Bildlink.
- Einschalten Bild mit dem Mauszeiger anzeigen Und wählen Sie das zweite Bild aus, idealerweise in der gleichen Größe.
- Fügen Sie ein Menüband, eine Lightbox, eine Neigung oder einen kolorierten Schatten aus den Abschnitten Inhalt und Einstellungen hinzu. Colorized Shadow funktioniert nicht mit dem Hover-Bild zusammen.
- Stil der Normal - und Hover-Zustände in der Registerkarte Stil.
Jede Einstellung wird in der Erweiterte Einstellungen für das Bild-Widget.
Bewegen Sie das Bild und die intelligenten Effekte
Erstellen Sie sofortige “Vorher-Nachher” - Vergleiche oder einfache Hover-Enthüllungen Laden Sie Ihr Hauptbild hoch, dann aktivieren Sie Hover Image, um ein zweites Bild hochzuladen Wenn Besucher mit dem Mauszeiger schweben, wechselt das Bild nahtlos Hinzufügen einer Ebene der Raffinesse mit dem Tilt-Effekt, die das Bild leicht kippen lässt, während sich die Maus darüber bewegt, und fügt ein subtiles 3 D-Feeling hinzu Für zusätzliche Tiefe aktivieren Sie Colorized Shadow, um einen weichen, farbigen Schatten hinter dem Bild zu platzieren, sodass es von der Seite abspringt.
- Interaktive Vergleiche: Perfekt für die Anzeige eines Produkts davor und danach oder für die Tages-/Nachtansicht einer Immobilie.
- Engaging Tilt Effect: Fügt eine moderne, interaktive Ebene hinzu, die auf die Cursorbewegung reagiert.
- Visuelle Tiefe: Verwenden Sie den kolorierten Schatten, um Trennung und Fokus ohne zusätzliche Designelemente zu erzeugen.
Anpassbare Bänder und Etiketten
Machen Sie Ihre Bilder mit professionellen Bändern hervorzuheben Aktivieren Sie die Ribbon-Funktion, um ein Etikett wie “NEUES DESIGN,” “BESTSELLER,” oder “AUSVERKAUFT” Wählen Sie aus verschiedenen Ribbon Styles (wie Ecke oder Kreuz oder Einfach) und stellen Sie die Position (oben/unten, links/rechts) Ganz individuell an Farben, Typografie und Dicke des Bandes an, um sicherzustellen, dass es Ihr Image und Ihre Marke perfekt ergänzt.
- Markieren Sie wichtige Informationen: Kommunizieren Sie Status, Werbung oder Kategorie sofort direkt auf dem Bild.
- Flexible Positionierung: Platzieren Sie das Band in einer beliebigen Ecke, um wichtige Teile des Bildes nicht abzudecken.
- Komplette Stilkontrolle: Passen Sie den Hintergrund, die Textfarbe und die Schriftart des Menübands an die Designsprache Ihrer Website an.
Link- und Lightbox-Integration hinzufügen
Fügen Sie ein hinzu Bild Link Besucher zu einem Produkt oder einer Seite zu schicken, oder einzuschalten In Lightbox öffnen Ein Klick zeigt also das Bild in voller Größe an Die Ikonische Taste Option fügt ein Plus-Symbol über dem Bild ein Schalten Sie ein Bild vorladen Platzhalter anzuzeigen, während das Bild geladen wird: eine unscharfe Vorschau, eine Fortschrittsbox oder ein blauer, heller oder dunkler Spinner.
- Verlinken Sie auf eine Produktseite oder öffnen Sie eine Lightbox in Originalgröße.
- Linke, mittlere oder rechte Ausrichtung in seiner Spalte.
- Ein Ladeplatzhalter für große Bilder.
Detaillierte Styling- und Größensteuerung
Erhalten Sie die vollständige Designkontrolle über die Präsentation Ihres Bildes Stellen Sie die genaue Max-Breite und Max-Höhe ein Wenden Sie Border Radius individuell auf jede Ecke für einzigartige Formen an Stylen Sie die Normal - und Hover-Zustände getrennt mit Rändern, Hintergründen und Box-Schatten So stellen Sie sicher, dass Ihr Bild in jedem Kontext und bei jeder Interaktion perfekt aussieht.
- Responsive Sizing: Steuern Sie die Abmessungen des Bildes präzise, ohne auf unvorhersehbare automatische Größenbestimmung angewiesen zu sein.
- Benutzerdefinierte Formen: Kreiliche Bilder, abgerundete Rechtecke oder einzigartige asymmetrische Ränder erstellen.
- State-Specific Styling: Fügen Sie einen Rand oder Schatten nur auf Hover, um visuell anzuzeigen, dass das Bild interaktiv ist.
Häufig gestellte Fragen für erweitertes Bild
Ist der Hover Image-Effekt mit mobilen Touchscreens kompatibel?
Ja, aber es geht etwas anders Auf Touch-Geräten löst der erste Tipp oft den Hover-Effekt aus (Bildtausch), wenn man die Lightbox nicht aktiviert hat Aber wenn man die Lightbox aktiviert hat dann bekommt die Lightbox mehr Priorität und beim Tippen öffnet sich das erste Bild in der Lightbox.
Ist das Advanced Image Widget kostenlos?
Ja. Advanced Image ist Teil des kostenlosen Master Addons Plugins mit dem Hover-Bild, Bändern, Lightbox, Tilt, farbigem Schatten und allen Styling-Optionen.
Wie unterscheidet sich das vom grundlegenden Image-Widget von Elementor?
Mit dem Basis-Widget von Elementor können Sie ein Bild, einen Link, eine Bildunterschrift und ein einfaches Design hinzufügen. Das Advanced Image-Element fügt eine Reihe professioneller Funktionen hinzu: Hover Image Swap, Bänder/Etiketten, Tilt Effect, Colorized Shadow, separates Normal-/Hover-State-Styling und granularere Lightbox-Steuerelemente. Es ist für die Erstellung ansprechenderer, interaktiver Bildpräsentationen konzipiert.
Kann ich die Ribbon-Funktion ohne Hover-Bild oder andere Effekte verwenden?
Absolut! jedes Feature ist unabhängig Du kannst nur ein Bild mit einem Ribbon haben, oder auch nur ein Bild mit Neigeffekt Du kannst Features mischen und anpassen wie du magst Aktiviere nur die, die du für dein spezifisches Designziel brauchst.
Was macht die Einstellung Bild vorladen?
Das Vorladebild zeigt einen Platzhalter an, während das Bild geladen wird, sodass Besucher kein leeres Feld sehen. Wählen Sie Leer, ein unscharfes Platzhalterbild, eine laufende Boxanimation oder einen blauen, hellen oder dunklen Ladespinner. Es ist am nützlichsten für große Bilder.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
