So präsentieren Sie Funktionen in Hover-Tabs mit Divi

Suchen Sie nach neuen und kreativen Möglichkeiten, Funktionen und/oder Produkte auf Ihren Webseiten zu präsentieren? Wenn ja, lesen Sie weiter, denn in diesem Beitrag zeigen wir Ihnen, wie Sie Funktionen in Hover-Tabs nur mit den integrierten Optionen von Divi anzeigen. Die Möglichkeiten, die Sie mit diesem Ansatz haben, sind endlos und werden es Ihnen sicherlich ermöglichen, Divi auf einer tieferen Ebene zu verstehen. Der Tab-Hover-Effekt tritt nur in schwebenden Desktop-Umgebungen auf. Wenn die Hover-Tabs auf kleineren Bildschirmgrößen angezeigt werden, werden die Funktionen in ihrer ursprünglichen Form aufgelistet.

Lasst uns anfangen!

Vorschau

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

Desktop

Handy, Mobiltelefon

Beginnen wir mit dem Erstellen!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie eine neue Seite hinzu oder öffnen Sie eine vorhandene und fügen Sie einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie dem Abschnitt einen Verlaufshintergrund hinzu. Wir verwenden den Verlaufshintergrund, um den linken Teil der Hover-Tabs abzudecken, wie Sie in den Druckbildschirmen oben sehen können.

• Farbe 1: #f2f2f2
• Farbe 2: #ffffff
• Verlaufsrichtung: 87deg
• Startposition: 20%
• Endposition: 20%

Abstand

Entfernen Sie dann die benutzerdefinierten oberen und unteren Auffüllungen des Abschnitts, indem Sie '0px' zu beiden Optionen hinzufügen.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Zeilenausrichtung

Ändern Sie auch die Zeilenausrichtung.

• Reihenausrichtung: Links

Standardgröße

Und ändern Sie auch die Größeneinstellungen.

• Benutzerdefinierte Breite verwenden: Ja
• Einheit: PX
• Benutzerdefinierte Breite: 400px
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Hover-Größen

Ändern Sie die Option Benutzerdefinierte Breite in den Größeneinstellungen beim Hover. Dadurch kann die Zeile erweitert werden, wenn der Mauszeiger darüber bewegt wird.

• Benutzerdefinierte Breite: 2000px

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie die Standardwerte für den oberen und unteren Abstand.

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

Standardrahmen

Fügen Sie '20px' zur oberen rechten Ecke der Zeile hinzu und fügen Sie der Zeile ebenfalls einen linken Rand hinzu.

• Breite des linken Rands: 20px
• Farbe des linken Rands: #6d44ff

Grenze schweben

Entfernen Sie die '20px' obere rechte abgerundete Ecke beim Hover, indem Sie stattdessen '0px' hinzufügen.

Standard-Box-Schatten

Zu guter Letzt fügen Sie einen subtilen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.11)

Hoverbox-Schatten

Und ändern Sie die Schattenfarbe beim Schweben in eine vollständig transparente Farbe.

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

Blurb-Modul zu Zeile hinzufügen

Inhalt hinzufügen

Nachdem wir nun alle Zeileneinstellungen geändert haben, können wir der Spalte ein Blurb-Modul hinzufügen. Sie können auch ein beliebiges anderes Modul Ihrer Wahl verwenden. Nachdem Sie das Modul hinzugefügt haben, fügen Sie einige Inhalte Ihrer Wahl hinzu.

Symbol auswählen

Wählen Sie als nächstes ein Symbol Ihrer Wahl aus.

Symboleinstellungen

Und ändern Sie das Aussehen des Symbols in den Symboleinstellungen.

• Symbolfarbe: #5323ff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 54px

Standardeinstellungen für den Titeltext

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelschriftart: Poppins
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #5323ff
• Titeltextgröße: 25px
• Abstand der Titelbuchstaben: -1px
• Höhe der Titelzeile: 1em

Hover-Titeltexteinstellungen

Und ändern Sie die Höhe der Titelzeile beim Bewegen der Maus.

• Höhe der Titelzeile: 1,5 em

Standardeinstellungen für Textkörper

Gehen Sie dann zu den Textkörpereinstellungen und nehmen Sie einige Änderungen vor. Dazu gehört das Ändern der Textgröße auf '0px'. Dies wird uns helfen, den Textkörper nur beim Hover anzuzeigen.

• Körperschriftart: Poppins
• Schriftgewicht des Körpers: Leicht
• Ausrichtung des Textkörpers: Mitte
• Textkörperfarbe: #000000
• Textgröße: 0px (Desktop), 15px (Tablet & Telefon)
• Körperlinienhöhe: 2.2em

Hover-Textkörper-Einstellungen

Um sicherzustellen, dass der Textkörper beim Hover angezeigt wird, ändern Sie die Textgröße beim Hover.

• Körpertextgröße: 15px

Standardabstand

Um dem Modul etwas Luft zum Atmen zu geben, fügen wir dem Modul einige benutzerdefinierte obere und untere Polsterungen hinzu.

• Obere Polsterung: 80px
• Untere Polsterung: 80px

Hover-Abstand

Wir werden die Abstandseinstellungen beim Hover ändern. Sie können das Endergebnis nicht sehen, bevor Sie Visual Builder beenden, da wir Hover-Optionen sowohl auf die Zeile als auch auf das Blurb-Modul anwenden.

• Obere Polsterung: 80px
• Untere Polsterung: 80px
• Linke Polsterung: 20vw
• Rechte Polsterung: 20vw

Zeile dreimal klonen

Nachdem Sie die erste Zeile und ihr Blurb-Modul geändert haben, können Sie die Zeile beliebig oft klonen.

Zeilen- und Klappenmodul 2 ändern

Zeilenabstand ändern

Öffnen Sie das erste Duplikat und fügen Sie einen benutzerdefinierten linken Rand hinzu. Dadurch können wir den Treppeneffekt erzeugen, den Sie in der Vorschau dieses Beitrags sehen können.

• Linker Rand: 6vw

Zeilenrahmenfarbe ändern

Ändern Sie auch die Farbe des linken Rands der Zeile.

• Farbe des linken Rands: #00ffcc

Inhalt und Symbol von Blurb ändern

Öffnen Sie dann das Blurb-Modul und ändern Sie das Symbol.

Symbolfarbe des Blurb-Moduls ändern

Zusammen mit der Symbolfarbe.

• Symbolfarbe: #00eda6

Titeltextfarbe ändern

Und die Titeltextfarbe.

• Titeltextfarbe: #00eda6

Zeilen- und Blurb-Modul 3 ändern

Zeilenabstand ändern

Fügen Sie auch dem zweiten Duplikat einen benutzerdefinierten linken Rand hinzu.

• Linker Rand: 12vw

Zeilenrahmenfarbe ändern

Ändern Sie die Rahmenfarbe der linken Zeile.

• Farbe des linken Rands:#afebff

Inhalt und Symbol von Blurb ändern

Zusammen mit dem Klappensymbol und dem Inhalt.

Symbolfarbe des Blurb-Moduls ändern

Ändern Sie auch die Symbolfarbe.

• Symbolfarbe: #68d9ff

Titeltextfarbe ändern

Und auch die Titeltextfarbe.

• Titeltextfarbe: #68d9ff

Zeilen- und Blurb-Modul ändern #4

Zeilenabstand ändern

Auf zum nächsten und letzten Duplikat! Fügen Sie der Zeile einen benutzerdefinierten linken Rand hinzu.

• Linker Rand: 18vw

Zeilenrahmenfarbe ändern

Ändern Sie auch die Farbe des linken Rands der Zeile.

• Farbe des linken Rands: #dd87cf

Inhalt und Symbol von Blurb ändern

Öffnen Sie das Blurb-Modul in der Zeile und ändern Sie das Symbol und den Inhalt des Moduls.

Symbolfarbe des Blurb-Moduls ändern

Zusammen mit der Symbolfarbe.

• Symbolfarbe: #dd6aca

Titeltextfarbe ändern

Und auch die Titeltextfarbe.

• Titeltextfarbe: #dd6aca

Vorschau

Nun, da wir das Tutorial durchgearbeitet haben, 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 die integrierten Optionen von Divi nur zum Erstellen von Hover-Tabs verwenden. Dieser Ansatz hilft Ihnen, Inhalte zu Funktionen oder Produkten auf interaktive Weise zu teilen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!