So lassen Sie mit Divi versteckte Zeileninhalte beim Hover anzeigen (kostenloser Download!)

Das Hinzufügen subtiler Interaktionen zu Ihrer Website kann die allgemeine Benutzererfahrung der Besucher wirklich verbessern. Eines der Dinge, die Ihre Website ansprechender aussehen lassen und gleichzeitig die Benutzerfreundlichkeit respektieren, besteht darin, dass Zeileninhalte beim Hover angezeigt werden. Dies ist ein großartiger Ansatz, um Dienstleistungen, Produkte, Funktionen und mehr zu präsentieren.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein bestimmtes Design von A bis Z erstellen, aber sobald Sie den Ansatz verstanden haben, können Sie ihn für jede Art von Website verwenden, an der Sie arbeiten. Am Ende dieses Blogbeitrags teilen wir auch die JSON-Datei dieses Designs, die Sie KOSTENLOS herunterladen und ohne Einschränkungen verwenden können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Beginnen wir mit dem Erstellen!

Neuen Abschnitt hinzufügen

Standardhintergrundfarbe

Beginnen Sie damit, einen neuen Abschnitt zu einer neuen oder vorhandenen Seite hinzuzufügen und die Hintergrundfarbe des Abschnitts zu ändern.

• Hintergrundfarbe: #e0e0e0

Hintergrundfarbe schweben

Ändern Sie diese Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hintergrundfarbe: #000000

Abstand

Wechseln Sie zur Registerkarte Design und fügen Sie einige benutzerdefinierte Abstandswerte hinzu. Damit dieses Tutorial funktioniert, verwenden wir nur Ansichtsfenstereinheiten. Dadurch wird sichergestellt, dass alles an seinem Platz bleibt, unabhängig von der Bildschirmgröße.

• Oberer Rand: 5vw
• Unterer Rand: 5vw
• Linker Rand: 3vw
• Rechter Rand: 3vw
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #ff5b79
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 15%
• Endposition: 15%

Größe

Nehmen Sie auch einige Änderungen an den Größeneinstellungen der Zeile vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 9vw
• Untere Polsterung: 9vw
• Spalte 1 linke Polsterung: 5vw
• Spalte 1 Rechte Polsterung: 5vw
• Spalte 2 linke Polsterung: 5vw
• Spalte 2 Rechte Polsterung: 5vw

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Module zu beginnen! Das erste Modul, das wir benötigen, ist ein Textmodul in Spalte 1. Fügen Sie H3-Inhalt und einen Link hinzu.

Linktext-Einstellungen

Gehen Sie dann zu den Linktexteinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild des Links vor.

• Link Schriftart: Didact Gothic
• Link-Schriftart: Unterstreichen
• Link-Unterstreichungsstil: Solid
• Linktextfarbe: #ffffff
• Linktextgröße: 20px

Überschriftstexteinstellungen

Ändern Sie auch die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 50px

Sichtweite

Deaktivieren Sie zu guter Letzt das Modul auf dem Desktop. Wir benötigen dieses Modul nur, um auf kleineren Bildschirmgrößen angezeigt zu werden.

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das zweite und letzte Modul, das in Spalte 1 benötigt wird, ist ein Teilermodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Ändern Sie dann die Teilerfarbe.

• Farbe: #ffffff

Abstand

Fügen Sie dem Teilermodul auch einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 11vw (Desktop), 80px (Tablet),
• Unterer Rand: 50px (Tablet & Telefon)

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zur zweiten Spalte! Fügen Sie ein Textmodul mit H4-Inhalten Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Gehen Sie dann zu den H4-Texteinstellungen und nehmen Sie einige Änderungen vor.

• Überschrift 4 Schriftart: Didact Gothic
• Überschrift 4 Schriftstärke: Fett
• Überschrift 4 Textfarbe: #ffffff
• Überschrift 4 Textgröße: 2vw (Desktop), 40px (Tablet), 30px (Telefon)

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fahren Sie direkt unter dem vorherigen Textmodul fort und fügen Sie ein weiteres mit einigen Absatzinhalten Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie als nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Didact Gothic
• Textfarbe: #ffffff
• Textgröße: 0,9vw (Desktop), 18px (Tablet & Telefon)
• Textzeilenhöhe: 2em

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 2vw
• Rechter Rand: 15vw

Zeile 2 hinzufügen

Spaltenstruktur

Nachdem Sie die erste Zeile und alle ihre Module geändert haben, können Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie auch alle Standardabstände in den Zeilenabstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Sichtweite

Zu guter Letzt blenden Sie diese Zeile auf Tablet und Telefon aus.

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Fügen Sie einige H3-Inhalte und einen Link hinzu.

Standardhintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie dem Textmodul eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #e0e0e0

Hintergrundfarbe schweben

Ändern Sie diese Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hintergrundfarbe: rgba(255,255,255,0)

Standardtexteinstellungen

Gehen Sie als Nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Link Schriftart: Didact Gothic
• Link-Schriftart: Unterstreichen
• Link-Unterstreichungsstil: Solid
• Linktextfarbe: #ffffff
• Linktextgröße: 0px
• Link-Buchstaben-Abstand: -1px

Hover-Link-Texteinstellungen

Ändern Sie auch die Linktextgröße beim Hover.

• Linktextgröße: 1.7vw

Standardeinstellungen für Überschriftentext

Fahren Sie fort, indem Sie einige Änderungen an den H3-Texteinstellungen vornehmen.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße: 12vw
• Überschrift 3 Buchstabenabstand: -0.8vw

Hover-Überschrift-Texteinstellungen

Ändern Sie einige der H3-Texteinstellungen beim Hover.

• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 4vw
• Überschrift 3 Buchstabenabstand: -0.2vw

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Obere Marge: -34.3vw
• Unterer Rand: -5vw
• Obere Polsterung: 10vw
• Untere Polsterung: 10vw
• Linke Polsterung: 26.5vw

Hover-Abstand

Ändern Sie die Abstandswerte beim Schweben.

• Obere Marge: -34.1vw
• Unterer Rand: -5vw
• Obere Polsterung: 12vw
• Untere Polsterung: 12vw
• Linke Polsterung: 11.5vw

Übergänge

Erhöhen Sie auch die Übergangsdauer des Textbausteins.

• Übergangsdauer: 400ms

Abschnitt klonen

Sobald Ihr erster Abschnitt abgeschlossen ist, können Sie den gesamten Abschnitt so oft klonen, wie Sie möchten. Im nächsten Teil des Tutorials zeigen wir Ihnen die Änderungen, die Sie an jedem Duplikat vornehmen müssen.

Hintergrundfarbe des Abschnitts Hover ändern

Das erste, was Sie ändern müssen, ist die Hintergrundfarbe des Abschnitts Hover.

• Hintergrundfarbe: #ff5b79

Ändern Sie den Farbverlaufshintergrund von Zeile 1

Ändern Sie auch den Farbverlaufshintergrund von Zeile #1.

• Farbe 1: #000000

Textfarbe ändern & kopieren

Zusammen mit der Textfarbe und der ganzen Kopie.

• Überschrift 3 Textfarbe: #ff5b79

Textmodulabstand ändern

Ändern Sie zu guter Letzt den linken Abstand des Textmoduls in Zeile #2. Der erforderliche linke Abstand hängt von der Länge des verwendeten Inhalts ab.

• Linke Polsterung: 21vw

Laden Sie das Layout KOSTENLOS herunter

Um das Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ausgeblendete Zeileninhalte beim Hover anzeigen können. Das von uns erstellte Ergebnis wird nur mit den integrierten Optionen von Divi erstellt. Wir haben auch die JSON-Datei am Ende des Tutorials geteilt, die Ihnen hoffentlich dabei hilft, auch Ihre eigenen alternativen Designs zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!