Elementortext über Bild: 25+ Hover-Effekte (Free Widget Tutorial)

Das Hinzufügen von Text über einem Bild in Elementor klingt wie ein zweiminütiger Job. Dann probierst du es mit den Standard-Widgets aus und ringst am Ende mit negativen Rändern, absoluter Positionierung und einem Heading-Widget, das auf einem Hintergrundbild gestapelt ist, das auf Mobilgeräten kaputt geht, geht schneller. Das gratis Bild Hover Effekte Widget von Master Addons Setzt eine Überschrift und Beschreibung auf jedes Bild und enthüllt sie mit einer seiner 30 Hover-Animationen, von denen 8 kostenlos sind Man berührt CSS nie.

In diesem Tutorial richten Sie einen Elementor-Text-über-Bild-Abschnitt von Grund auf ein: Laden Sie das Bild hoch, wählen Sie einen Hover-Effekt aus einem Dropdown aus, stylen Sie die Überlagerung und entscheiden Sie, was passiert, wenn jemand klickt Jeder Screenshot unten kommt direkt aus dem Elementor-Editor, so dass Sie mit Klick für Klick folgen können.

Was dieser Leitfaden abdeckt:

• Warum Text über Bild ein Widget benötigt
• Das Widget Image Hover Effects im Überblick
• So fügen Sie Text über ein Bild hinzu (Schritt für Schritt)
• Styling der Auflage: Farbe, Deckkraft, Form
• Typografie für Titel und Beschreibung
• Klicken Sie auf Aktionen: Öffnen Sie ein Popup oder verknüpfen Sie das Bild
• Design-Tipps, die den Text lesbar halten
• Andere Master Addons Widgets für Bildeffekte
• Free vs Pro: was Sie eigentlich brauchen
• Häufig gestellte Fragen

Warum Text Over Image ein Widget benötigt (kein CSS-Hack)

Elementoreigene Dokumentation legt nahe Zwei Workarounds für Text über Bild: Bild als Schnitthintergrund einstellen und ein Heading-Widget hineinwerfen, oder eine Überschrift mit negativen Rändern nach oben schieben Beide funktionieren für eine statische Bildunterschrift Beides gibt Ihnen keine Hover-Enthüllung, keine animierte Überlagerung oder eine Klickaktion, und der Negativ-Margin-Trick neigt dazu, an Tablet - und mobilen Haltepunkten auseinanderzufallen.

Ein dediziertes Widget löst all das an einem Ort:

• Schwebelaibung eingebaut. Das Bild bleibt sauber, bis der Besucher schwebt, dann werden Titel und Beschreibung animiert.
• Ein Einstellungsfeld. Bild, Text, Overlay-Farbe und Typografie leben in einem einzigen Widget statt in drei gestapelten.
• Standardmäßig reagieren. Das Overlay skaliert mit dem Bild, so dass sich auf kleineren Bildschirmen nichts aus dem Platz verschiebt.
• Aktionen anklicken. Das ganze Bild kann einen Link oder ein Popup öffnen Davon hängen Portfolioraster und Servicekarten ab.

Aus diesem Grund tauchen überall Text-über-Bild-Layouts auf: Portfolio-Plättchen, die den Projektnamen preisgeben, Teamkarten, die eine Biografie im Schwebeflug zeigen, Blog-Kategorie-Banner und Galerie-Raster, in denen Bildunterschriften sonst das Design überladen würden.

Das Image Hover Effects Widget auf einen Blick

Bild-Hover-Effekte Schiffe in der kostenlosen Version von Master Addons, a Bibliothek mit 80+ Widgets und Erweiterungen Laufend auf 30.000+ aktiven WordPress Seiten Hier ist, was Sie in diesem einen Widget bekommen:

• 30 benannte Hover-Effekte, jeweils eine andere Enthüllungsanimation Acht sind kostenlos (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar), während Chico, Marley, Ruby und die anderen 19 Pro brauchen
• Ein Überschriftenfeld mit einem wählbaren HTML-Tag (H1 bis H6), damit Ihr Overlay-Text SEO-korrekt bleiben kann
• Ein Beschreibungsfeld für eine kurze Stützlinie
• Überlagern Sie Hintergrundfarbe, Bildtrübung und Bedienelemente für die Luftschlupftrübung
• Randradius, Polsterung (Pro), Kastenschatten und separate Typografie für Titel und Beschreibung
• Drei-Klick-Verhaltensweisen: nichts, einem Link folgen oder ein Popup öffnen (Popup-Inhalte benötigen Pro)

Das Widget, die acht freien Effekte, die Textfelder und Linkklicks funktionieren alle ohne Pro-Lizenz, wenn Sie die vollständige Einstellungsreferenz wünschen, wird die Bild Hover Effekte Dokumentation Deckt jede Steuerung ab.

So fügen Sie Text über einem Bild in Elementor hinzu (Schritt für Schritt)

Schritt 1: Master Addons installieren

Gehen Sie in Ihrem WordPress-Dashboard auf Plugins > Neues hinzufügen und suchen Sie nach “Master Addons” Installieren und aktivieren Sie die Kostenloses Plugin von WordPress.org. Wenn Ihnen etwas ein Bein stellt, wird die Installationsführung Geht durch Sie Elementor aktiv brauchen Sie auch, aber die kostenlose Version reicht.

Schritt 2: Ziehen Sie das Widget für Bild-Flover-Effekte auf Ihre Seite

Öffnen Sie eine beliebige Seite mit Elementor und suchen Sie im Widget-Panel nach “Bild-Hover-Effekten” Sie werden es unter den anderen Widgets mit MA-Emblem wie Erweitertes Bild, Bild-Hotspot und Bildvergleich entdecken Ziehen Sie es in Ihren Abschnitt.

Schritt 3: Laden Sie Ihr Bild hoch

Der Reiter Inhalt öffnet sich mit dem Effekte & Bild Abschnitt. Klicken Bild hochladen Und etwas aus deiner Mediathek herauspicken Direkt darunter sitzen zwei Einstellungen:

• Bildgröße Steuert die gerenderten Abmessungen Standard funktioniert für die meisten Layouts.
• Bildauflösung Picks, welche WordPress generierte Größe lädt “Voll” gibt das schärfste Ergebnis Auf einer Seite mit acht oder zehn dieser Kacheln stattdessen auf “Groß” fallen; niemand sieht den Unterschied bei der Rastergröße und die Seite lädt merklich schneller.

Schritt 4: Wählen Sie einen Hover-Effekt

Hier der lustige Teil Öffnen Sie die Hover-effekt Dropdown und Sie erhalten die vollständige Liste der benannten Effekte: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Goliath, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi und Duke. Die ersten acht sind kostenlos und der Rest trägt ein Pro-Label im kostenlosen Plugin.

Jeder Name ist eine andere Kombination aus Overlay-Animation und Text-Enthüllung Sadie schiebt einen Farbverlauf von unten nach oben Marley lässt den Titel mit einer Unterstreichung fallen Chico zoomt das Bild leicht heraus und rahmt den Text mit einem dünnen Rand ein Die Editor-Vorschau aktualisiert live, also klickt euch durch ein paar und schwingt zum Testen über das Bild Hier ist Chico (ein Pro-Effekt) mitten im Schwebeflug:

Eine schnelle Gruppierung, um Ihnen das Durchklicken aller zu ersparen:

• Subtile Ausbleichungen: Lily, Sadie, Layla, Zoe. Gute Standardoptionen für Portfolios.
• Richtungsrutschen: Schatz, Oscar, Romeo, Sarah Text drängt von einer Kante herein.
• Zoom und Maßstab: Chico, Bubba, Milo, Julia Das Bild bewegt sich, was den Blick auf sich zieht.
• Verspielt und mutig: Marley, Ruby, Dexter, Goliath, Apollo Stärkere Bewegung, am besten für kreative Seiten.

Schritt 5: Fügen Sie Ihre Überschrift hinzu

Öffnen Sie die Überschrift Abschnitt. Geben Sie Ihren Titel ein und wählen Sie einen aus HTML-Tag. Das ist wichtiger, als es aussieht: wenn das Bild in einem Raster von Diensten sitzt, passt H3 normalerweise besser zu Ihrer Seitenhierarchie als das Standard-H2. Suchmaschinen lesen dieses Tag wie jede andere Überschrift auf der Seite.

Schritt 6: Schreiben Sie die Beschreibung

Die Beschreibung Abschnitt fügt die kleinere Zeile hinzu, die unter dem Titel auf hover erscheint Behalten Sie es bei ein oder zwei kurzen Sätzen Lange Absätze werden auf kleineren Bildern abgeschnitten und besiegen den Punkt einer sauberen Überlagerung.

Styling des Overlays: Farbe, Deckkraft und Form

Wechseln Sie zu den Stil Tab. Die Bild Panel steuert, wie das Overlay aussieht:

• Hintergrundfarbe Tönt das Overlay, das im Hover erscheint Wählen Sie eine Farbe aus Ihrer Markenpalette; ein HEXA-Wert wie #DD5555 mit reduziertem Alpha hält das Foto darunter sichtbar.
• Bildtrübung Stellt den Ruhezustand ein, und Schwebetrübung Legt fest, wie stark das Bild abdimmt, wenn die Überlagerung erscheint Eine Lücke zwischen beiden (z. B. 0,5 ruht, 0,7 liegt im Schwebeflug) lässt die Enthüllung bewusst wirken.
• Bildfilter und Hover-Bildfilter Fügen Sie CSS-Filter wie Graustufen oder Unschärfe für Vorher-/Nachher-Stimmungen hinzu.

Darunter, dass Grenzradius Den ganzen Block neu formt Passende Werte geben Ihnen weiche abgerundete Ecken; asymmetrische Werte (100 oben-links, 0 oben-rechts, 100 unten-rechts, 0 unten-links) erzeugen die Blattform, die Sie auf vielen modernen Agenturseiten sehen.

Typografie für den Titel und die Beschreibung

Noch im Tab Stil, die Titel und Beschreibung Panels bekommen jeweils ihre eigenen Farb, Typografie - und Abstandsregler Schriftfamilie, Größe, Gewicht, Transformation, Zeilenhöhe, Buchstabenabstand sind alle hier, plus eine Textschatten-Option für die Beschreibung Wenn Ihr Bild hell ist, wechseln Sie die Titelfarbe auf einen dunklen Wert, damit der Text in beiden Zuständen lesbar bleibt.

Eine behaltewürdige Lesbarkeitsregel: Ziel ist ein klarer Kontrast zwischen Text und dem, was dahinter sitzt, Wenn das Foto beschäftigt ist, lehne dich auf die Overlay-Farbe und Deckkraft aus dem vorherigen Schritt, anstatt es allein mit Schriftgewicht zu bekämpfen.

Klicken Sie auf Aktionen: Öffnen Sie ein Popup oder verknüpfen Sie das gesamte Bild

Zurück im Inhaltsregister, dem Links oder Popup? Kontrolle entscheidet, was ein Klick bewirkt Drei Optionen sitzen hinter dem kleinen Symbol-Toggle: keine, Popup, und externer Link.

Popup (Pro) öffnet ein Overlay-Fenster mit dem Inhalt, den Sie wählen Wählen Sie einen Content Type und schreiben Sie entweder Inhalte direkt in den WYSIWYG-Editor oder laden Sie eine gespeicherte Elementorvorlage Portfolioraster verwenden dies ständig: Jede Kachel öffnet eine Fallstudie, ohne die Seite zu verlassen.

Link Macht das gesamte Bild zu einer klickbaren Karte Fügen Sie die URL in das Feld Link URL ein und der ganze Hover-Bereich zeigt dort, was einen winzigen Textlink schlägt, um Ziele mobil anzutippen.

Wenn Sie über dieses Widget hinaus weitere Popup-Muster wünschen (Exit-Absicht, Scroll-Trigger, zeitgesteuerte Popups), erfahren Sie, wie Sie Fügen Sie kostenlos ein Popup in Elementor hinzu.

Das fertige Ergebnis

Schlagen Sie auf Vorschau und bewegen Sie den Mauszeiger über Ihr Bild, die Überlagerung blendet ein, Titel und Beschreibung zeigen mit dem von Ihnen gewählten Effekt auf, und der Cursor signalisiert die Klickaktion:

Die gesamte Bauzeit beträgt etwa fünf Minuten. Und da jede Wahl in den Widget-Einstellungen lebt, können Sie den Effekt austauschen oder das Overlay nächsten Monat neu einfärben, ohne etwas neu aufzubauen.

Design-Tipps, die Text über Bild lesbar halten

• Ein Effekt pro Gitter. Wenn Sie ein 6-Kachel-Portfolio aufbauen, geben Sie jeder Kachel den gleichen Hover-Effekt Gemischte Effekte werden als zufällig gelesen.
• Kontrast zuerst. Weißer Text benötigt eine dunkle Überlagerung; Dunkler Text benötigt ein helles Bild oder eine helle Überlagerungstönung.
• Kurzbeschreibungen. Zehn Wörter oder weniger Das Overlay ist ein Teaser, kein Absatz.
• Berührung testen. Bei Telefonen zeigt der erste Tipp die Überlagerung an und der zweite Tipp löst die Klickaktion aus. Stellen Sie daher sicher, dass der aufgedeckte Zustand auf einem kleinen Bildschirm vollständig aussieht.
• Passen Sie Ihren Grenzradius an Zum Rest der Seite Eine 100 px große Blattform neben scharfkantigen Karten schaut ab.

Für umfassendere Anleitungen zum Bewegungsdesign finden Sie in unserem Leitfaden Elementoranimationseffekte Cover beim Schwebeflug, Scrollen und Eingangsanimationen verdienen jeweils ihren Platz und die Animationsfunktionen von Master Addons Seite zeigt, was das Plugin noch animieren kann.

Andere Master-Addons-Widgets für Bildeffekte

Image Hover Effects ist das richtige Tool für Textverrätungen, aber ein paar Geschwister-Widgets decken die benachbarten Anwendungsfälle ab:

• Erweitertes Bild Fügt einem einzelnen Bild ohne Overlay-Text 3 D-Neigung, Bänder und Abzeichen hinzu.
• Die Flipbox-widget Bringt eine Karte auf eine vollständig gestaltete Rückseite, besser, wenn Sie Tasten oder Symbole im aufgedeckten Zustand benötigen.
• Bild Hotspot Pins interaktive Tooltip-Marker an bestimmte Punkte auf einem Bild, ideal für Produktaufrufe.
• Die Bild Karussell Handhabt Mehrbild-Schieberegler, wenn eine Schwebeplättchen nicht ausreicht.
• Bildvergleich Stellt einen dragierbaren Vorher/Nachher-Schieberegler auf zwei Versionen einer Aufnahme.

Kostenlos vs. Pro: Was brauchen Sie eigentlich?

Für einen Basistext über Bildausschnitt reicht das kostenlose Plugin, es beinhaltet das Widget, acht Hover-Effekte (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar), die Überschriften - und Beschreibungsfelder, Bildfilter und Linkklicks Pro sperrt die anderen 22 Effekte, Popup-Inhalte, und die Polsterung und abgerundeten Ecksteuerungen. Master Addons Pro Fügt das breitere Premium-Widget-Set, Vorlagen-Kits und Extras wie den Widget Builder hinzu, so dass es einen Blick wert ist, sobald Sie ganze Websites und nicht einen Abschnitt erstellen Es gibt eine 14-tägige Geld-zurück-Garantie, wenn Sie es versuchen und Ihre Meinung ändern.

Am liebsten ansehen? hier ein kurzer walkthrough in Elementor:

Häufig gestellte Fragen

Einwickelnd

Ein Elementor-Text über Bildausschnitt dauert fünf Minuten mit dem richtigen Widget: Geben Sie Image Hover Effects ab, laden Sie Ihr Foto hoch, wählen Sie einen Effekt nach Namen aus und gestalten Sie das Overlay so, dass es zu Ihrer Marke passt. Positionierung und Reaktionsverhalten werden bereits für Sie behandelt, und die kostenlose Version behandelt die Grundlagen in diesem Leitfaden.

Schnapp dir das kostenlose Plugin, durchsuche den Rest des Widget - und ErweiterungsbibliothekUnd wenn Sie nicht weiterkommen Widget-dokumentation Jede Einstellung abgebildet hat.

Verwandte Lektüre: Elementoranimationseffekte, Das Elementor Flipbox Widget, und Popups in Elementor kostenlos hinzufügen.