So zeigen Sie Spalteninhalte beim Hover mit Divi an (kostenloser Download!)

In einem der neuesten Divi-Posts haben wir Ihnen gezeigt, wie Sie ausgeblendete Zeileninhalte beim Hover anzeigen lassen. Heute zeigen wir Ihnen, wie Sie stattdessen den gleichen Ansatz verwenden, um Spalteninhalte anzuzeigen. Der Ansatz, den wir behandeln werden, ist ähnlich und ermöglicht es Ihnen, alle Arten von Designs zu erstellen, die einen schönen Hover-Effekt auf dem Desktop haben, aber auch für kleinere Bildschirmgrößen ohne Hover-Optionen gut funktionieren.

Wir hoffen, dass dieses Tutorial Sie dazu inspirieren wird, alle Arten von interaktiven Designs für die von Ihnen erstellten Websites zu erstellen! Am Ende des Beitrags können Sie die JSON-Datei herunterladen und an Ihre Bedürfnisse anpassen.

Lasst uns anfangen!

Vorschau

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

Desktop

Wie Sie im GIF unten sehen können, haben wir einen reibungslosen Hover-Übergang, der den Spalteninhalt beim Hover anzeigt.

Handy, Mobiltelefon

Auf kleineren Bildschirmgrößen hingegen wird der Spalteninhalt bereits ohne Schweben angezeigt.

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen regulären Abschnitt hinzufügen

Abstand

Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Auffüllungen oben und unten hinzu.

• Obere Polsterung: 10vw
• Untere Polsterung: 15vw

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor. Mit diesen Einstellungen nimmt die Zeile die gesamte Breite des Bildschirms ein und hilft auch dabei, den gesamten Abstand zwischen den Spalten zu entfernen.

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

Abstand

Gehen Sie zu den Abstandseinstellungen der nächsten Zeile. Hier ersetzen wir das Leerzeichen, das wir im vorherigen Schritt entfernt haben, indem wir benutzerdefinierte Auffüllwerte hinzufügen.

• Linke Polsterung: 8vw
• Rechte Polsterung: 8vw
• Spalte 1 Rechte Polsterung: 2vw
• Spalte 2 linke Polsterung: 1vw
• Spalte 2 Rechte Polsterung: 1vw
• Spalte 3 linke Polsterung: 2vw

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Beginnen Sie mit einem Textmodul in Spalte 1. Fügen Sie H3-Inhalte Ihrer Wahl hinzu.

H3-Texteinstellungen

Gehen Sie dann zu den Überschriftentexteinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild des H3-Inhalts vor.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #3567ff
• Überschrift 3 Textgröße: 1.2vw (Desktop), 20px (Tablet & Telefon)

Abstand

Fügen Sie dem Textmodul als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Unterer Rand: 4vw
• Obere Polsterung: 4vw
• Untere Polsterung: 4vw

Box Schatten

Und geben Sie dem Modul einen subtilen Kastenschatten.

• Vertikale Position des Kastenschattens: 36px
• Stärke der Box-Schattenunschärfe: 60px
• Schattenfarbe: rgba(0,0,0,0.06)

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie ein weiteres Textmodul direkt unter dem vorherigen hinzufügen. Fügen Sie einen beliebigen Absatzinhalt hinzu.

Texteinstellungen

Gehen Sie dann zur Registerkarte Design und nehmen Sie einige Änderungen an den Texteinstellungen vor.

• Textschriftart: Open Sans
• Textgröße: 0.8vw (Desktop), 14px (Tablet & Telefon)
• Text Buchstabenabstand: -0.05vw
• Textzeilenhöhe: 2.2em
• Textausrichtung: Ausgerichtet
• Textfarbe: Dunkel

Abstand

Spielen Sie auch mit den benutzerdefinierten Rand- und Abstandswerten in den Abstandseinstellungen herum.

• Unterer Rand: 3vw
• Obere Polsterung: 2vw
• Untere Polsterung: 2vw
• Linke Polsterung: 4vw
• Rechte Polsterung: 4vw

Grenze

Und fügen Sie dem Modul mit den folgenden Einstellungen einen linken und rechten Rand hinzu:

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #e5e5e5

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das nächste Modul, das wir in der ersten Spalte benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche in die Mitte.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltflächeneinstellungen öffnen und das Aussehen der Schaltfläche ändern, damit sie mit dem Gesamtdesign übereinstimmt, das wir erreichen möchten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 15px (Tablet & Telefon)
• Schaltflächentextfarbe: #000000
• Breite des Tastenrahmens: 1px
• Farbe des Knopfrahmens: #dddddd
• Schaltflächenrandradius: 0px
• Tastenabstand: -0.05vw
• Schriftdicke: fett
• Schriftstil: Großbuchstaben

Abstand

Spielen Sie auch mit den Abstandswerten des Tastenmoduls herum.

• Unterer Rand: 100px (Tablet & Telefon)
• Obere Polsterung: 0.8vw (Desktop), 10px (Tablet & Telefon)
• Untere Polsterung: 0.8vw (Desktop), 10px (Tablet & Telefon)
• Linke Polsterung: 3.5vw (Desktop), 50px (Tablet & Telefon)
• Rechte Polsterung: 3.5vw (Desktop), 50px (Tablet & Telefon)

Module in Spalte 1 zweimal klonen und Duplikate in verbleibende Spalten platzieren

Sobald Sie die drei verschiedenen Module zu Spalte 1 hinzugefügt haben, können Sie jedes der Module zweimal klonen. Platzieren Sie die Duplikate in den beiden verbleibenden Spalten, um in jeder der Spalten das gleiche Design zu erzielen.

Ändern Sie die Textfarbe von Textmodul Nr. 1 in Spalte 2

Öffnen Sie das erste Textmodul in Spalte 2 und ändern Sie die Textfarbe.

• Überschrift 3 Textfarbe: #6d28c1

Ändern Sie die Textfarbe von Textmodul Nr. 1 in Spalte 3

Machen Sie dasselbe für den ersten Textbaustein in der dritten Spalte.

• Überschrift 3 Textfarbe: #15668e

Overlay-Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Da wir nun alle benötigten Spalteninhalte haben, können wir das überlappende Element hinzufügen, das den Inhalt vor dem Bewegen des Mauszeigers ausblendet. Um dies zu erreichen, verwenden wir ein weiteres Textmodul. Fahren Sie fort und fügen Sie der ersten Spalte einen weiteren hinzu. Stellen Sie sicher, dass dies das letzte Modul in der Spalte ist. Fügen Sie Inhalte Ihrer Wahl hinzu.

Hintergrund mit Farbverlauf

Fahren Sie fort, indem Sie dem Modul einen Hintergrund mit Farbverlauf hinzufügen.

• Farbe 1: #6a30ff
• Farbe 2: #3567ff
• Verlaufsrichtung: 124deg

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textschriftart: Didact Gothic
• Textfarbe: #ffffff
• Textgröße: 2vw
• Textausrichtung: Mitte

Abstand

Und erstellen Sie eine Form aus dem Modul, indem Sie einige benutzerdefinierte Füllwerte hinzufügen. Wir fügen auch einen negativen oberen Rand hinzu, um die Überlappung zwischen diesem Modul und dem Spalteninhalt zu erzeugen. Der Inhalt, den Sie hinter dem Textmodul verbergen, ist nicht anklickbar. Deshalb ist es wichtig, dass der Call-to-Action, wie in unserem Beispiel die Schaltfläche, ohne Hover sichtbar bleibt.

• Obere Marge: -38vw
• Obere Polsterung: 15vw
• Untere Polsterung: 15vw

Grenze

Fügen Sie dem Textmodul als nächstes einige abgerundete Ecken hinzu.

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 40px
• Schattenfarbe: rgba(0,0,0,0.16)

Standardfilter

Gehen Sie dann zu den Filtereinstellungen und stellen Sie sicher, dass die Deckkraft standardmäßig '100%' beträgt.

• Deckkraft: 100%

Hover-Filter

Ändern Sie die Deckkraft beim Schweben auf '0%'. Dadurch wird das Modul ausgeblendet und stattdessen der gesamte Spalteninhalt angezeigt.

• Deckkraft: 0%

Benutzerdefinierte CSS

Um sicherzustellen, dass das Textmodul über allen Spalteninhalten bleibt, fügen Sie zwei Zeilen CSS-Code auf der Registerkarte „Erweitert“ des Textmoduls hinzu.

z-index: 99;
position: relative

Sichtweite

Und blenden Sie das gesamte Modul auf Tablet und Telefon aus. Wie am Anfang dieses Beitrags erwähnt, zeigen wir alle Spalteninhalte auf kleineren Bildschirmgrößen, um sicherzustellen, dass die Benutzererfahrung der Besucher gut ist.

Overlay-Textmodul zweimal klonen & Duplikate in verbleibende Spalten platzieren

Sobald Sie mit dem Ändern des Overlay-Textmoduls fertig sind, klonen Sie es zweimal. Platziere jedes der Duplikate in den beiden verbleibenden Spalten.

Ändern Sie den Verlaufshintergrund des Overlay-Textmoduls in Spalte 2

Ändern Sie die Hintergrundfarbe des Farbverlaufs des ersten Duplikats.

• Farbe 1: #d530ff
• Farbe 2: #6d28c1

Ändern Sie den Verlaufshintergrund des Overlay-Textmoduls in Spalte 3

Machen Sie dasselbe für das zweite Duplikat.

• Farbe 1: #41ff30
• Farbe 2: #15668e

Laden Sie den Abschnitt KOSTENLOS herunter

Um den Abschnitt "Spalten-Enthüllung" in die Hände zu bekommen, müssen Sie ihn 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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Spalteninhalte beim Hover anzeigen können. Sie können diesen Ansatz für jede Art von Website verwenden, die Sie erstellen, um eine zusätzliche Interaktionsebene hinzuzufügen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!