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.
Diese Seite ist die Einstellungsreferenz Für Live-Demos der Effekte und was kostenlos oder Pro ist, siehe die Elementor-Bild-Hover-Effekte Widget Seite.
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 Es gibt 30 benannte Effekte Acht sind kostenlos (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar) und 22 weitere werden mit Master Addons Pro geliefert.
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?: Machen Sie das gesamte Bild zu einem Link oder öffnen Sie ein Popup (Popup-Inhalte benötigen Pro).
Wählen Sie einen Hover-Effekt #
Die Hover-effekt Dropdown-Listen 30 benannte CSS-Effekte Die ersten acht sind kostenlos und der Rest mit Pro gekennzeichnet. 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 (Profi): 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 Wenn deine Seite Elementor AI verwendet, taucht hier auch der elementoreigene Write with AI Link auf.
- HTML-Tag: Die Überschriftsebene, H1 bis H6.
Fügen Sie die Beschreibung und den Link hinzu #
Öffnen Sie die Beschreibung Abschnitt, um die Bildunterschrift hinzuzufügen, die unter dem Titel auf hover angezeigt wird Zurück in Effekte & BildWenn Sie einstellen Links oder Popup? Popup, die Inhaltstyp und Inhalt Felder entscheiden, was das Popup zeigt Popup-Inhalte brauchen Pro.
- Inhaltstyp: Was das Popup zeigt: ein Bild, Text, ein gespeicherter Abschnitt, ein gespeichertes Widget oder eine gespeicherte Seitenvorlage (Pro).
- Inhalt: Der Popup-Text, bearbeitet in einer vollständigen WYSIWYG-Box.
- 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 (Pro), 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?
Dreißig. acht sind kostenlos (Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey und Oscar) und die anderen 22 kommen mit Master Addons Pro. Jeder animiert das Bild und überlagert Text auf eine andere Art und Weise.
Kann ich dem Bild einen Link oder Button hinzufügen?
Ja. Die Option Links oder Popup kann das ganze Bild in der kostenlosen Version zu einem Link machen, mit Pro kann es stattdessen ein Popup öffnen, das ein Bild, einen Text oder eine gespeicherte Elementor-Vorlage zeigt.
Kann ich einen Titel und eine Bildunterschrift auf hover zeigen?
Ja. Der Überschrift-Abschnitt setzt den Titel und sein HTML-Tag, und das Feld Beschreibung fügt eine Beschriftung 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 #
Die Widget für Bild-Hover-Effekte Verwandeln Sie ein statisches Bild in ein interaktives Bild: 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. Zu verwandten 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.
