Ein Bild, das im Schwebeflug einen Titel und eine Bildunterschrift enthüllt, verwandelt eine flache Galerie in etwas, das Menschen berühren möchten. Die Bild-Hover-Effekte Widget in Master-Addons für Elementor Verpackt jedes Bild in eine CSS-Hover-Animation, also eine Überschrift, eine Beschreibung und eine Link-Folie, verblasst oder zoomt in die Ansicht, wenn der Cursor darauf landet.
Sie wählen einen der benannten Effekte aus, lassen ein Bild fallen, fügen den Overlay-Text hinzu und stilisieren dann die Farben und Filter. Kein benutzerdefiniertes CSS erforderlich. Diese Anleitung deckt jede Einstellung im Widget ab.
Was das Widget Image Hover Effects bewirkt #
Das Widget nimmt ein Bild und lässt ein animiertes Overlay darauf fallen Bewegen Sie den Mauszeiger darüber und es kann einen Titel, eine Beschreibung und einen Knopf oder Link preisgeben, wobei die Bewegung von einem voreingestellten Effekt kommt Die benannten Effekte (Sadie, Lily, Roxy, und noch viel mehr) animieren Bild und Text jeweils auf ihre eigene Art und Weise.
Drei Tabs führen es aus. Inhalt Hält den Effekt, das Bild und den Overlay-Text. Stil Behandelt Bildtrübung, Filter, Ränder sowie die Titel- und Beschreibungsfarben. Fortgeschritten Ist der übliche Elementorabstand und die Sichtbarkeit.
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 sowie der Titel und der Beschriftungstext, die Sie im Schwebeflug anzeigen möchten.
So fügen Sie das Widget Bild-Flover-Effekte hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Bild-Hover-Effekte, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf die Seite und es wird mit einem Beispielbild und Overlay geladen, das Sie bearbeiten können.
Wählen Sie den Effekt und das Bild #
Öffnen Sie die Inhalt Tab. Die Effekte & Bild Abschnitt ist, wo Sie die Hover-Animation einstellen und das Bild laden.
- Hover-effekt: Die benannte Animation wird im Hover verwendet (mehr dazu als nächstes).
- Bild hochladen: Wählen Sie das Bild aus der Mediathek.
- Bildgröße und Bildauflösung: Die Ernte und der Beschluss dienten.
- Links oder Popup?: Das ganze Bild zu einem Link machen oder in einem Popup öffnen.
Wählen Sie einen Hover-Effekt #
Die Hover-effekt Dropdown trägt eine lange Liste benannter CSS-Effekte. Jeder animiert das Bild und den Overlay-Text unterschiedlich, von einer weichen Überblendung bis zu einer Bildunterschrift, die hineingleitet.
- Sadie, Lily, Layla: Über einem abgedunkelten Bild verblassen Titel und Bildunterschrift.
- Roxy, Bubba, Romeo: Schieben Sie einen Rand oder ein Panel in den Text ein.
- Schatz, Oscar, Marley: Eine Unterstreichung oder eine bewegte Beschriftung preisgeben.
- Zoom - und Unschärfevarianten: Skalieren oder das Bild hinter dem Text aufweichen.
Wählen Sie das Bild aus #
Klicken Sie auf Bild hochladen Mediathek zu öffnen, dann wähle oder lade dein Bild hoch, welcher Effekt du gewählt hast, läuft oben auf diesem Bild.
Fügen Sie die Überschrift hinzu #
Öffnen Sie die Überschrift Abschnitt für den Titel, der auf hover angezeigt wird Geben Sie den Text ein und setzen Sie das HTML-Tag so, dass es für SEO richtig liest.
- Titel: Der Überschriftstext mit einer Option Schreiben mit KI.
- HTML-Tag: Die Überschriftsebene, H1 bis H6.
Fügen Sie die Beschreibung und den Link hinzu #
Zurück in der Effekte & Bild Abschnitt, die Inhaltstyp und Inhalt Felder setzen die Bildunterschrift, die unter dem Titel angezeigt wird Hier geht die unterstützende Zeile hin, und eine Schaltfläche, falls Sie eine wünschen.
- Inhaltstyp: Wählen Sie Text oder eine Schaltfläche für den Overlay-Inhalt.
- Inhalt: Der Beschriftungstext, bearbeitet in einem vollständigen WYSIWYG-Feld.
- Links oder Popup?: Das Bild auf eine URL richten oder in einem Popup öffnen.
Gestalten Sie das Bild und die Überlagerung #
Öffnen Sie die Stil Tab. Die Bild Abschnitt steuert, wie das Bild vor und während des Schwebeflugs aussieht, und daher kommt tatsächlich ein Großteil des Effekts.
- Bildtrübung und Schwebetrübung: Wie sichtbar das Bild im Ruhezustand und im Schwebezustand ist.
- Bildfilter und Bildfilter mit der Maus: Unschärfe, Helligkeit und Kontrast für jeden Zustand.
- Grenze, Grenzradius, Kastenschatten: Der Rahmen um das Bild.
Unter dem Abschnitt Bild trennen Sie Titel und Beschreibung Abschnitte behandeln die Farbe und Typografie des Overlay-Textes.
Häufige Anwendungsfälle #
- Portfolios Enthüllung eines Projektnamens und Links im Hover.
- Teamraster Zeigt einen Namen und eine Rolle auf jedem Foto.
- Servicekacheln Mit Titel und kurzer Bildunterschrift pro Bild.
- Blog-thumbnails Das zeigt den Beitragstitel auf Hover.
- Produktgalerien Koppeln eines Bildes mit einem Namen und einer Schaltfläche.
Tipps für die Arbeit mit dem Widget Image Hover Effects #
- Verwenden Sie klare Bilder. Durch die Überlagerung wird das Bild abgedunkelt, so dass eine vielbeschäftigte Aufnahme den Text schwer lesbar machen kann Ein ruhigeres Bild mit Platz in der Mitte funktioniert am besten.
- Halten Sie die Bildunterschrift kurz. Eine Zeile unter dem Titel liest sich besser als ein in das Overlay eingepferchteter Absatz.
- Den Effekt auf den Inhalt abstimmen. Subtile Ausblendungen passen zu einem Portfolio; Fett gedruckte Folien passen zu einer Promo.
- Legen Sie das richtige Überschrift-Tag fest. Verwenden Sie H2 oder H3 für Galerietitel und nicht H1, es sei denn, es handelt sich um die Hauptüberschrift der Seite.
- Test auf Mobilgeräten. Es gibt keinen Hover auf Touch, also überprüfen Sie die Überlagerung ist immer noch sinnvoll, wenn jemand stattdessen tippt.
Sehen Sie sich das Video-Tutorial an #
Folgen Sie lieber auf dem Bildschirm? Das Video-Tutorial unten durchläuft das Bild-Hover-Effekte-Element von Anfang bis Ende und zeigt, wie die Effekte, der Overlay-Text und das Styling im Elementor-Editor funktionieren.
Häufig gestellte Fragen #
Was ist das Widget Image Hover Effects in Master Addons?
Es handelt sich um ein Elementor-Widget, das einem Bild eine CSS-Hover-Animation hinzufügt, im Hover zeigt es einen Titel, eine Bildunterschrift und einen optionalen Link an, wobei die Bewegung von einem benannten voreingestellten Effekt kommt Alles wird vom Elementor-Panel ohne Code eingestellt.
Wie viele Hover-Effekte enthält das Widget?
Der Hover Effect-Dropdown enthält eine lange Liste benannter CSS-Effekte wie Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey und Oscar. Jeder animiert das Bild und legt Text auf andere Weise über, sodass Sie den Text auswählen, der zu Ihrem Design passt.
Kann ich dem Bild einen Link oder Button hinzufügen?
Ja. Die Option Links oder Popup macht das ganze Bild zu einem Link oder öffnet es in einem Popup, und das Feld Inhaltstyp kann eine Schaltfläche innerhalb des Overlays hinzufügen Das macht jedes Bild zu einem anklickbaren Pfad zu einem Projekt, Produkt oder einer Seite.
Kann ich einen Titel und eine Bildunterschrift auf hover zeigen?
Ja. Der Überschriftenabschnitt legt den Titel und sein HTML-Tag fest, und das Feld Inhalt fügt eine Beschreibung darunter hinzu Beide erscheinen als Teil der Hover-Animation, so bleibt das Bild sauber, bis jemand darüber schwebt.
Funktionieren die Bild-Hover-Effekte mobil?
Hover ist eine Desktop-Interaktion, also haben Touch-Geräte keinen echten Hover Viele Effekte zeigen das Overlay immer noch beim Tippen an, aber Sie sollten auf einem Telefon testen und den Schlüsseltext sichtbar oder erreichbar halten, insbesondere wenn das Bild auch ein Link ist.
Einwickelnd #
Das Widget Image Hover Effects verwandelt ein statisches Bild in ein interaktives: Wählen Sie einen Effekt aus, laden Sie das Bild, fügen Sie einen Titel und eine Bildunterschrift hinzu und stilisieren Sie dann die Deckkraft, Filter und den Text. Zugehörige Widgets siehe die Info-Box-Widget und die Flipbox-widgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
