Das Standard-Elementor-Bild-Widget zeigt ein Bild an und verknüpft es irgendwo Das kostenlose Erweitertes Bild-Widget In Master-Addons für Elementor Macht mehr: es tauscht auf ein zweites Bild im Schwebeflug aus, lässt ein Eckband darauf fallen, öffnet sich in einer Lightbox und fügt eine 3 D-Neigung oder einen kolorierten Schatten hinzu, alles ohne CSS zu berühren.
Sie stellen das Hauptbild, ein optionales Hover-Bild, ein Menüband und eine Handvoll Effekte aus dem Elementor-Panel ein. Das macht es gut für Produktaufnahmen, Portfolio-Miniaturansichten oder jedes Bild geeignet, das ein Etikett oder ein bisschen Bewegung benötigt. Dieser Leitfaden geht durch jede Registerkarte und Einstellung.
Bevorzugen, zuerst anzusehen? dieses kurze Tutorial geht durch das Advanced Image Widget Ende an Ende:
Was das Advanced Image Widget macht #
Im Kern zeigt es ein Bild, aber es legt Extras oben drauf, ein Hoverbild tauscht ein, wenn der Cursor drüber ist, ein Ribbon ruft eine Beschriftung wie “NEU,” auf und der Reiter Einstellungen fügt eine Lightbox, einen Tilt-Effekt, und einen kolorierten Schatten hinzu, alles ist vom Panel aus konfiguriert, so dass das gleiche Bild viel mehr kann als ein einfaches.
Das Widget verfügt über vier Registerkarten: Inhalt für Bilder und Farbband, Einstellungen für Verhalten wie Lightbox und Tilt, Stil für Größe und Farben und Erweitert für die üblichen Elementorabstände und Sichtbarkeitsoptionen.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ein Bild zum Anzeigen und ein zweites, wenn Sie den Hover-Swap wünschen.
So fügen Sie das Widget Erweitertes Bild hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Erweitertes Bild‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie es auf Ihre Seite Es beginnt mit einem Platzhalter, also ist der erste Schritt die Auswahl eines Bildes.
Stellen Sie das Bild ein #
In der Inhalt Tab, die Bild Abschnitt enthält die Grundlagen Klicken Sie auf das Bildfeld, um eines aus der Mediathek auszuwählen, und legen Sie das fest Bildauflösung WordPress sollte dienen und ein hinzufügen Bild Link Wenn das Bild irgendwo verlinken soll.
Ein Hover-Bild hinzufügen #
Die Hover-bild Abschnitt ist, wo das Widget seinen Namen verdient Einschalten Bild mit dem Mauszeiger anzeigen Und ein zweites Bild auswählen Auf der Live-Seite zeigt das Widget das erste Bild und überblendet sich zum zweiten, wenn jemand schwebt, was für Produktfronten und -rückseiten oder Vorher-Nachher-Aufnahmen praktisch ist.
Fügen Sie ein Band hinzu #
Die Band Abschnitt fügt ein Eckbanner über dem Bild ein Schalten Sie ein DisplaybandStellen Sie den Text ein und wählen Sie aus, wie er aussieht.
- Text: Das Label, wie NEU oder SALE.
- Bandstil: Einfach, Ecke oder Kreuz.
- Bandposition: Platzieren Sie es in einer beliebigen Ecke, z. B. oben rechts oder unten links.
- Banddicke und -breite: Größe das Band, um es an den Text anzupassen.
Einstellungen: Leuchtkasten, Neigung und Schatten #
Die Einstellungen Tab ist, wo das Verhalten lebt Dies sind die Extras, die das Widget von einem einfachen Bild unterscheiden.
- In Lightbox geöffnet: Klicken Sie auf das Bild, um es in voller Größe in einem Popup zu öffnen. Wenn Sie es einschalten, wird eine ikonische Schaltflächenoption (wie ein Plus-Symbol) über dem Bild hinzugefügt.
- Ausrichtung: Links, in der Mitte oder rechts innerhalb seines Blocks.
- Bild vorladen: Zeigt einen Platzhalter an, während das Bild geladen wird, z. B. eine unscharfe Vorschau, eine Fortschrittsbox-Animation oder einen Ladespinner.
- Kipp-Effekt: Fügt eine 3 D-Neigung hinzu, die dem Cursor für ein bisschen Bewegung folgt.
- Kolorierter Schatten: Einen Schatten aus den bildeigenen Farben getönt fallen lässt Beachten Sie, dass er nicht verfügbar ist, solange das Hover-Bild aktiv ist.
Gestalten Sie das Bild und das Band #
Die Stil Tab Handles Größenbestimmung und Farben Die Bild Abschnitt setzt das Aussehen des Bildes selbst.
- Maximale Breite und maximale Höhe: Kappen Sie die Bildgröße.
- Grenzradius: Ecken umrunden.
- Normal- und Hover-Zustände: Stellen Sie Box Shadow, Border und Hintergrund separat zum Ausruhen und Schweben ein.
Die Band Der Stilabschnitt steuert das Aussehen des Banners: Hintergrundfarbe, Textfarbe, Typografie, Schatten, Positionsversätze und Randradius.
Das Ergebnis auf der Seite #
Veröffentlichen oder Vorschauen und das Bild wird mit Ihrem Menüband und den Effekten live rendert: Fahren Sie mit der Maus, um Bilder auszutauschen, bewegen Sie den Mauszeiger auf die Neigung oder klicken Sie, um die Leuchtbox zu öffnen, je nachdem, was Sie eingeschaltet haben.
Häufige Anwendungsfälle #
- Produktaufnahmen Mit einem Schwebevertausch von vorne nach hinten oder einem alternativen Winkel.
- Portfolio-thumbnails Das in voller Größe in der Lightbox öffnen.
- Promo-bilder Mit einem NEU - oder SALE-Band in der Ecke.
- Feature-grafiken Mit einer subtilen Neigung für Bewegung.
- Heldenbilder Verwendung des kolorierten Schattens für die Tiefe.
Tipps für die Arbeit mit dem Advanced Image Widget #
- Verwenden Sie passende Abmessungen für den Hover-Swap. Gleichgroße Bilder verhindern, dass das Überblenden springt.
- Wählen Sie die richtige Bildauflösung aus. Das Servieren einer Datei in voller Größe in einem kleinen Steckplatz verlangsamt die Seite; Normalerweise reicht eine mittlere oder große Größe aus.
- Halte den Text des Bandes kurz. Ein Wort passt sauber zum Eckband.
- Überspringen Sie den kolorierten Schatten, wenn Sie Hover Swap verwenden. Die beiden laufen nicht zusammen, also wählen Sie pro Bild einen.
- Gehen Sie beim Neigen locker. Eine kleine Bewegung zieht den Blick auf sich; zu viel fühlt sich Spielerei an.
Häufig gestellte Fragen #
Was ist das Advanced Image Widget in Master Addons?
Es handelt sich um ein Elementor-Bild-Widget mit eingebauten Extras: einem Hover-Bildaustausch, einem Eckband, einer Lightbox, einem 3 D-Neigeffekt und einem kolorierten Schatten. Sie stellen alles aus dem Elementor-Panel ein, sodass ein einzelnes Bild weit mehr tun kann, als das Standard-Bild-Widget zulässt.
Wie mache ich die Bildänderung bei hover?
Öffnen Sie die Registerkarte Inhalt, erweitern Sie den Abschnitt Bild bewegen, und schalten Sie Bild anzeigen Schweben Sie dann ein zweites Bild aus Auf der Live-Seite zeigt das Widget das erste Bild an und überblendet zum zweiten, wenn ein Besucher darüber schwebt.
Kann ich dem Bild ein Band oder Abzeichen hinzufügen?
Ja. Öffnen Sie im Reiter Inhalt den Abschnitt Band und schalten Sie Display-Band ein Stellen Sie den Text ein, wählen Sie einen Simple, Corner - oder Cross-Stil, und wählen Sie die Ecke Der Tab Stil lässt Sie dann seine Farbe, Typografie und Position einstellen.
Was ist der Kipp-Effekt?
Der Tilt-Effekt, der sich im Reiter Einstellungen befindet, fügt eine 3 D-Neigung hinzu, die dem Cursor folgt, während er sich über das Bild bewegt Es gibt einem flachen Bild ein Gefühl von Tiefe und Bewegung Verwenden Sie es sparsam, damit es subtil bleibt, anstatt abzulenken.
Unterstützt das Advanced Image Widget eine Lightbox?
Ja. Schalten Sie die Lightbox im Reiter Einstellungen ein und Besucher können auf das Bild klicken, um es in voller Größe in einem Popup anzuzeigen Sie können auch eine ikonische Schaltfläche hinzufügen, z. B. ein Plus-Symbol, das über dem Bild angezeigt wird, um zu signalisieren, dass es anklickbar ist.
Einwickelnd #
Das Advanced Image Widget nimmt ein einzelnes Bild auf und fügt die Berührungen hinzu, die normalerweise benutzerdefinierten Code annehmen: einen Hover-Swap, ein Menüband, eine Lightbox, eine Neigung und einen kolorierten Schatten Stellen Sie die Bilder ein, schalten Sie die gewünschten Effekte ein und stylen Sie das Ergebnis aus dem Panel. Weitere Bildtools finden Sie im Bild-Hover-Effekte und Bild Karussell Widgets, durchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Erweiterte Bild-Widget-Seite Für Demos.
