So konvertieren Sie Divi-Zeilen in horizontale und vertikale Hover-Tabs

Veröffentlicht: 2019-05-29

Tabs sind auf jeden Fall praktisch, um wichtige Informationen in einem übersichtlichen Bereich Ihrer Website zur Verfügung zu stellen. Dies reduziert die Notwendigkeit für den Benutzer, durch lange Seiteninhalte zu scrollen. Das Tab-Modul von Divi ist einfach zu bedienen und eignet sich hervorragend zum Umschalten durch einfache Inhalte beim Klicken.

Aber in diesem Tutorial zeige ich Ihnen, wie Sie ganze Divi-Zeilen in Hover-Tabs konvertieren. Ich zeige Ihnen auch, wie Sie sowohl horizontale als auch vertikale Registerkarten erstellen. Dadurch wird die Leistungsfähigkeit von Divi freigesetzt, komplette Zeilenlayouts mit mehreren Modulen für jeden Registerkarteninhaltsbereich zu entwerfen. Kein Plugin erforderlich!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die horizontalen und vertikalen Hover-Tabs, die wir in diesem Tutorial zusammen bauen werden.

Laden Sie das Divi Rows Hover Tabs Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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.

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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Abonnieren Sie unseren Youtube-Kanal

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie die folgende Einrichtung:

Das Divi Theme installiert und aktiv
Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
Drei Bilder, die für simulierte Inhalte verwendet werden sollen

Danach haben Sie eine leere Leinwand, um mit dem Erstellen einiger Hover-Tabs in Divi zu beginnen.

Erstellen von horizontalen Hover-Tabs mit Divi-Zeilen

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer zweispaltigen Zeile.

Zeilenhintergrund, Auffüllung und Boxschatten

Bevor wir unsere Module hinzufügen, passen wir zunächst die Zeileneinstellungen ein wenig an. Wir müssen später auf die Zeile zurückkommen, um sie für unsere Tab-Funktionalität zu positionieren.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbverlauf links: #284f91
Hintergrund mit Farbverlauf rechts: #4646c4

Padding: 50px oben, 50px unten, 50px links, 50px rechts
Box Shadow: siehe Screenshot
Boxschattenfarbe: rgba(70,70,196,0.66)

Hinzufügen von Inhalten zur Zeile

Jetzt werden wir unserer Zeile einige Scheininhalte hinzufügen. Denken Sie daran, dass Sie Ihrem Inhaltsbereich eine beliebige Kombination von Spalten und Modulen hinzufügen können.

Fügen Sie in Spalte 1 ein Bild mit einem Bildmodul hinzu. Ich verwende eines aus dem Design Conference Layout Pack.

Fügen Sie in der rechten Spalte ein Call-to-Action-Modul hinzu und aktualisieren Sie Folgendes:

Schaltflächen-Link-URL: # (nur um die Schaltfläche vorerst anzuzeigen)
Hintergrundfarbe verwenden: NEIN

Textausrichtung: links
Titelschriftart: Lato
Titeltextgröße: 60px (Desktop), 50px (Telefon)

Erstellen der Registerkarte

Um den eigentlichen Tab zu erstellen, über den Benutzer mit der Maus fahren, um diesen Zeileninhalt anzuzeigen, müssen wir ein Textmodul erstellen und es mit etwas benutzerdefiniertem CSS oben rechts positionieren.

Fahren Sie fort und fügen Sie unter dem Bild in Spalte 1 ein neues Textmodul hinzu und aktualisieren Sie Folgendes:

Inhalt: „Tab Eins“

Hintergrundfarbe: #284f91 (diese sollte der linken Verlaufsfarbe der Reihe entsprechen)
Text Textausrichtung: Mitte
Text Textfarbe: #ffffff
Breite: 100px
Höhe: 50px
Rand: -100px oben, -50px links
Polsterung: 14px oben

Fügen Sie schließlich das folgende benutzerdefinierte CSS zum Hauptelement hinzu, um ihm eine absolute Position oben in der Zeile zu geben.

position: absolute !important;
top: 0;

Dieses CSS plus die benutzerdefinierten Ränder, die wir hinzugefügt haben, stellen sicher, dass die Registerkarte genau oben links in der Zeile positioniert wird. Es ist wichtig, dass die Registerkarten tatsächlich über der Reihe sitzen, damit der Benutzer später mit der Maus darüber fahren kann.

Abschnittshöhe und -abstand

Bevor wir nun mit dem Erstellen der verbleibenden Zeilen und Registerkarten fortfahren, lassen Sie uns unseren Zeilen etwas Luft zum Atmen geben, indem wir dem Abschnitt einen oberen und unteren Rand hinzufügen. Für dieses Design ist es wichtig, dass wir Ränder verwenden, um unseren Abschnitt zu beabstanden, da wir unserem Abschnitt auch eine festgelegte Höhe geben. Wir müssen unserem Abschnitt eine festgelegte Höhe zuweisen, da unsere Zeilen die volle Höhe unseres Abschnitts umfassen sollen. Das bedeutet, dass jede unserer Zeilen (der Tab-Inhalt) die gleiche Höhe unseres Abschnitts hat. Daher ist es am besten, wenn jede der Zeilen einen ähnlichen Inhalt hat, da sonst in einigen der Zeilenregisterkarten unerwünschter negativer Leerraum vorhanden ist. Das sollte später mehr Sinn machen.

Öffnen Sie zunächst die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Höhe: 500 Pixel (Desktop), 900 Pixel (Tablet), 750 Pixel (Telefon)
Rand: 100px oben, 100px unten
Padding: 0px oben, 0px unten

Beachten Sie, dass die Höhe des Abschnitts angepasst werden muss, um den längeren Inhaltsraum zu berücksichtigen, wenn die Zeilenspalten auf Mobilgeräten gestapelt werden. Daher müssen Sie diese Höhe für Ihre eigenen Bedürfnisse anpassen.

Speichern Sie nun Ihre Einstellungen und kehren wir zum Hinzufügen dieser weiteren Zeilen zurück.

Erstellen der zweiten Zeile mit Registerkarteninhalten

Um die zweite Zeile zu erstellen, duplizieren Sie die zuvor erstellte Zeile. Verschieben Sie den Textbaustein in Spalte 1 und das Bild in Spalte 2. Aktualisieren Sie dann das Bild mit einem neuen. Auf diese Weise erhalten Sie eine Vorstellung davon, wie die verschiedenen Inhalte auf den einzelnen Registerkarten aussehen.

Öffnen Sie die Einstellungen der zweiten Reihe und wechseln Sie die Hintergrundfarben, indem Sie mit der Maus über den Hintergrundvorschaubereich fahren und auf das kleine "Schalter" -Symbol klicken.

Öffnen Sie dann die Einstellungen des Textbausteins, mit dem die Registerkarte in Spalte 1 erstellt wurde, und geben Sie ihr eine Farbe, die dem neuen oberen Verlauf entspricht.

Hintergrundfarbe: #4646c4

Dann müssen wir die Registerkarte nach rechts verschieben, damit Sie die Registerkarte direkt rechts neben der Registerkarte in der ersten Zeile sehen können, wenn diese Zeile die Zeile darüber überlappt.

Rand: 50px links

Hinzufügen des Deckkraftfilter-Hover-Effekts für die zweite Reihe

Für die Zeile können wir einen Deckkraftfilter-Hover-Effekt hinzufügen, damit beim Bewegen der Maus über die Registerkarte ein schöner Hover-Übergang entsteht und der Inhalt der Zeile angezeigt wird.

Öffnen Sie die Zeileneinstellungen und fügen Sie den folgenden Filter hinzu:

Deckkraft: 70 % (Standard), 100 % (Hover)

Fügen Sie dann eine Übergangsdauer und eine Geschwindigkeitskurve für den Deckkraftfilter-Hover-Effekt hinzu.

Übergangsdauer: 500ms
Übergangsgeschwindigkeitskurve: Linear

Erstellen der dritten Zeile mit Tab-Inhalten

Jetzt können wir unsere letzte Zeile mit Tab-Inhalten hinzufügen. Dazu duplizieren Sie die gerade erstellte zweite Zeile. Verschieben Sie dann das Textmodul in Spalte 1 und das Bild in Spalte 2. Und aktualisieren Sie das Bildmodul mit einem neuen Bild.

Aktualisieren Sie die Zeileneinstellungen mit einem neuen Hintergrundverlauf.

Hintergrund Farbverlauf links: #333333
Hintergrund mit Farbverlauf rechts: #4646c4

Öffnen Sie als nächstes die Einstellung des Textbausteins, mit dem die Registerkarte in Spalte 1 erstellt wurde, und aktualisieren Sie die Farbe und den Rand.

Hintergrundfarbe: #333333
Rand: 150px übrig

So sollte Ihre Seite aussehen, bevor wir unsere Zeilen so positionieren, dass sie sich überlappen.

Überlappen der Zeilen mit absoluter Positionierung

Um unsere Zeilen zu überlappen, müssen wir die absolute Positionierung verwenden. Dann verwenden wir die Z-Indexoption, um jede Zeile in den Vordergrund zu rücken, wenn wir mit der Maus über die Registerkarten fahren. Da wir unseren Zeilen jedoch eine absolute Position zuweisen (und der Elternteil/Abschnitt eine festgelegte Höhe hat), können wir jeder der Zeilen 100 % Höhe hinzufügen, sodass sie die volle Höhe des Abschnitts überspannen.

So geht's.

Stellen Sie zunächst den Drahtmodellmodus bereit. Verwenden Sie dann Multiselect, um alle drei Zeilen auszuwählen und die Einstellungen einer von ihnen zu öffnen, um die modalen Elementeinstellungen bereitzustellen. Aktualisieren Sie dann die Höhe auf 100 %.

Höhe: 100%

Dadurch wird die Höhe für alle drei Zeilen auf 100 % eingestellt.

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Stellen Sie nun den Desktop-Ansichtsmodus bereit, um zu sehen, wie sich die Zeilen gut überlappen, um unsere Registerkarten zu erstellen.

Ändern der Reihenfolge der Zeilen beim Hover mit dem Z-Index

Im Moment haben Sie vielleicht bemerkt, dass die dritte Zeile/Registerkarte im Vordergrund steht. Daher müssen wir die Zeilen mit dem Z-Index neu anordnen, sodass die erste Registerkarte zuerst angezeigt wird, bis Sie mit der Maus über eine andere Registerkarte fahren.

Gehen Sie dazu zurück in den Drahtmodell-Ansichtsmodus und öffnen Sie die Einstellungen für die erste von Ihnen erstellte Zeile (mit Registerkarte eins). Aktualisieren Sie dann den z-Index wie folgt:

Z-Index: 10

Verwenden Sie als nächstes Multiselect, um die zweite und dritte Zeile auszuwählen. Öffnen Sie dann die Elementeinstellungen modal und fügen Sie den folgenden z-Index beim Hover zu beiden Zeilen hinzu.

Z-Index: 11 (schweben)

Das ist es. Schauen wir uns das Endergebnis an.

Endergebnis

Der Grund dafür ist, dass technisch gesehen jede Registerkarte (Textmodul) ein Teil jeder Zeile ist, obwohl sie über und außerhalb der Zeile positioniert sind. Aus diesem Grund wird beim Bewegen der Maus über eine Registerkarte die Zeile angezeigt, in der sie enthalten ist.

Und so sieht es auf dem Handy aus.

Erstellen von vertikalen Hover-Tabs

Wenn Sie den Zeilen vertikale Registerkarten hinzufügen möchten, müssen Sie nur die Textmodule neu positionieren, die zum Erstellen der einzelnen Registerkarten verwendet wurden. Wir müssen auch die Größe unserer Zeilen und den Abschnittsabstand optimieren, um Platz für die Registerkarten zu schaffen.

Hier ist, was zu tun ist.

Fahren Sie fort und duplizieren Sie den Abschnitt mit den Hover-Tabs, die wir gerade erstellt haben, damit Sie ein neues Design haben, mit dem Sie arbeiten können.

Öffnen Sie dann die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Polsterung: 10% links, 10% rechts

Wählen Sie dann mit Multiselect alle drei Zeilen aus und aktualisieren Sie die Elementeinstellungen wie folgt:

Breite: 70 % (Desktop), 70 % (Tablet), 80 % (Telefon)
Max-Breite: 980px

Aktualisieren Sie dann die Verlaufsrichtung für alle drei Klappen auf 90 Grad, sodass beim Positionieren der Registerkarten auf der linken Seite die linke Verlaufsfarbe mit der Hintergrundfarbe der Registerkarte verschmelzen wird.

Verlaufsrichtung: 90deg

Jetzt ist es an der Zeit, unsere Textmodul-Registerkarten links von unseren Zeilen zu positionieren, um die gewünschten vertikalen Registerkarten zu erhalten.

Öffnen Sie die Registerkarteneinstellung Textmodul in der ersten Zeile und aktualisieren Sie Folgendes:

Rand (Desktop): -50px oben, -150px links
Rand (Telefon): -100 Pixel oben, -50 Pixel links

Die Randeinstellung für das Telefon besteht darin, die Registerkarte für eine horizontale Registerkartenanzeige wieder über die Reihe zu bringen.

Öffnen Sie als nächstes die Einstellungen für den Textbaustein-Tab in der Abschnittszeile und aktualisieren Sie Folgendes:

Rand (Desktop): 0 Pixel oben, -150 Pixel links
Rand (Telefon): -100 Pixel oben, 50 Pixel links

Und für die letzte Registerkarte in der dritten Zeile aktualisieren Sie Folgendes:

Rand (Desktop): 50 Pixel oben, -150 Pixel links
Rand (Telefon): -100 Pixel oben, 150 Pixel links

Endergebnis

Schauen wir uns nun das Endergebnis an.

Und hier ist es ein Tablet und ein Telefon.

Abschließende Gedanken

Mit ein wenig kreativem Denken und der Leistungsfähigkeit von Divi können Sie mit Divi-Zeilen einige ziemlich coole benutzerdefinierte Hover-Tabs erstellen. Es gibt einige Einschränkungen für das, was Sie anzeigen können. Bei diesem Setup müssen beispielsweise alle Reihen die gleiche Höhe wie der Abschnitt haben. Aber um kein Plugin verwenden zu müssen, denke ich, dass dies eine großartige Lösung ist. Und vergessen Sie nicht, da Sie Divi-Zeilen für Ihre Inhalte verwenden können, gibt es viele Möglichkeiten, diese Hover-Tabs in Ihrem nächsten Projekt zu verwenden.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!