Tabs mit Hover-Effekt aus Zeilen mit erstellen möchten Divi ?
Tabs sind auf jeden Fall nützlich, um wichtige Informationen in einem übersichtlichen Bereich von Ihnen verfügbar zu machen Website. Dies reduziert die Notwendigkeit für den Benutzer, durch die zu scrollen Inhalt einer langen Seite. Das Tab-Modul von Divi ist einfach zu bedienen und ideal zum Stöbern Inhalt einfach mit einem Klick.
Aber in diesem Tutorial zeigen wir Ihnen, wie Sie Zeilen konvertieren Divi mit Tabs versehen und beim Schweben angezeigt.
Außerdem zeigen wir Ihnen, wie Sie horizontale und vertikale Tabs erstellen. Dadurch wird die Leistungsfähigkeit von Divi freigeschaltet, vollständige Layouts mit mehreren Modulen für jeden Bereich zu erstellen Inhalt Tab.
Keine Plugins erforderlich!
Lassen Sie uns beginnen.
Übersicht
Hier ist eine Übersicht über die Registerkarten, die wir gemeinsam in diesem Tutorial erstellen werden.
Laden Sie DIVI jetzt herunter!!!
Erstellen Sie eine neue Seite mit Divi Builder
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Horizontale Hover-Tabs mit "Divi Rows" erstellen
Fügen Sie im vorhandenen Standardabschnitt eine zweispaltige Zeile hinzu.
Linienhintergrund, Feldfüllung und Schatten
Bevor wir unsere Module hinzufügen, passen wir zuerst die Zeileneinstellungen ein wenig an. Öffnen Sie die Leitungseinstellungen und aktualisieren Sie Folgendes:
- Linke Verlaufsfarbe: #284f91
- Farbverlauf rechts: #4646c4
- Polsterung: 50 Pixel (oben und unten), 50 Pixel (links und rechts)
- Box Shadow: siehe Screenshot
- Box-Schattenfarbe: rgba (70,70,196,0.66)
Inhalt zur Zeile hinzufügen
Wir fügen unserer Zeile jetzt Platzhalterinhalt hinzu. Fügen Sie in Spalte 1 ein Bild Ihrer Wahl mit einem Bildmodul hinzu. Hier haben wir ein Bild aus dem Layoutpaket verwendet « Design-Konferenz-Layout-Paket« .
Fügen Sie in der rechten Spalte ein Modul hinzu Aufruf zum Handeln und aktualisieren Sie Folgendes:
- Schaltflächen-Link-URL: # (nur um die Schaltfläche vorerst anzuzeigen)
- Hintergrundfarbe verwenden: NEIN
- Textausrichtung: links
- Titelschrift: Lato
- Titeltextgröße: 60 Pixel (Desktop), 50 Pixel (Telefon)
Erstellung der Registerkarte
Um die eigentliche Registerkarte zu erstellen, über die Benutzer schweben, um den Inhalt dieser Zeile anzuzeigen, müssen wir ein Textmodul erstellen und es mit benutzerdefiniertem CSS oben rechts positionieren.
Fahren Sie fort und fügen Sie ein neues Textmodul unter dem Bild in Spalte 1 hinzu und aktualisieren Sie Folgendes:
- Text: "Registerkarte 1"
- Hintergrund: #284f91 (dies sollte mit der linken Verlaufsfarbe der Linie übereinstimmen)
- Textausrichtung: zentriert
- 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 am Anfang der Zeile zu geben.
position: absolute !important;
top: 0;
Abschnittshöhe und Abstand
Öffnen Sie vorerst die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- Mindesthöhe: 500 Pixel (Desktop), 900 Pixel (Tablet), 750 Pixel (Telefon)
- Rand: 100px (oben und unten)
- Polsterung: 0px (oben und unten)
Erstellung der zweiten Linie
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 können Sie sich ein Bild davon machen, wie die verschiedenen Inhalte auf den einzelnen Registerkarten aussehen.
Öffnen Sie dann die Moduleinstellungen Text used to create the tab in Spalte 1 und verschieben Sie den Tabulator nach rechts, sodass Sie dort, wo diese Zeile die Zeile darüber überlappt, den Tabulator direkt rechts neben dem Tabulator der ersten Zeile sehen können.
- Rand: 50px (links)
Hover-Effekt hinzugefügt
Ö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 Hover-Effekt des Opazitätsfilters hinzu.
- Übergangszeit: 500 ms
- Übergangsgeschwindigkeitskurve: Linear
Erstellung der dritten Registerkarte
Wir können jetzt unseren letzten Tab hinzufügen. Duplizieren Sie dazu die gerade erstellte zweite Zeile. Verschieben Sie dann den Textbaustein in Spalte 1 und das Bild in Spalte 2. Und aktualisieren Sie den Bildbaustein mit einem neuen Bild.
Aktualisieren Sie die Linieneinstellungen mit einem neuen Hintergrundverlauf.
- Verlaufsfarbe des linken Hintergrunds: #333333
- Verlaufsfarbe des rechten Hintergrunds: #4646c4
Öffnen Sie dann die Textmoduleinstellung, die zum Erstellen der Registerkarte in Spalte 1 verwendet wurde, und aktualisieren Sie die Farbe und den Rand.
- Hintergrund: #333333
- Rand: 150px (links)
So sollte Ihre Seite aussehen, bevor wir unsere Linien so positionieren, dass sie sich überlappen.
Überlappende Linien mit absoluter Positionierung
Um unsere Linien zu überlappen, müssen wir die absolute Positionierung verwenden. Aktualisieren Sie zunächst die Höhe aller drei Zeilen auf 100 %.
- Höhe: 100 %
Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement aller drei Zeilen hinzu:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
So sehen unsere Tabs im Moment aus.
Ändern der Zeilenreihenfolge beim Hover mit Z-Index
In diesem Moment haben Sie vielleicht bemerkt, dass die dritte Zeile/Registerkarte im Vordergrund ist. Daher müssen wir die Zeilen mithilfe von Z Index neu anordnen, sodass die erste Registerkarte zuerst angezeigt wird, bis Sie den Mauszeiger über eine andere Registerkarte bewegen.
Lesen Sie auch: So erstellen Sie benutzerdefinierte Bildüberlagerungen in Divi
Öffnen Sie dazu die Einstellungen der ersten Zeile und aktualisieren Sie den Z-Index wie folgt:
Z-Index: 10
Setzen Sie dann den Z-Index der anderen beiden Zeilen auf Hover.
Z-Index: 11 (Hover)
Es ist vollbracht ! Mal sehen, das Endergebnis.
Endergebnis
Laden Sie DIVI jetzt herunter!!!
Vertikale Registerkarten erstellen
Wenn Sie vertikale Tabulatoren zu Zeilen hinzufügen möchten, gehen Sie wie folgt vor.
Machen Sie weiter und duplizieren Sie den Abschnitt mit den gerade erstellten Hover-Tabs, damit Sie ein neues Design haben, mit dem Sie arbeiten können.
Öffnen Sie dann die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- Polsterung: 10 % (links und rechts)
Aktualisieren Sie die folgenden Einstellungen für alle drei Zeilen des duplizierten Abschnitts wie folgt:
- Breite: 70 % (Desktop), 70 % (Tablet), 80 % (Telefon)
- Maximale Breite: 980 Pixel
Aktualisieren Sie als Nächstes die Verlaufsrichtung für alle drei Linien auf 90 Grad.
- Verlaufsrichtung: 90 Grad
Jetzt ist es an der Zeit, unsere Textmodul-Registerkarten links von unseren Zeilen zu positionieren, um die gewünschten vertikalen Registerkarten zu erhalten.
Siehe auch: So erstellen Sie ein Spinning-Wheel-Menü beim Hover in Divi
Öffnen Sie die Textbaustein-Tab-Einstellung in der ersten Zeile und aktualisieren Sie Folgendes:
- Rand (Desktop): -50px (oben), -150px (links)
Öffnen Sie als Nächstes die Registerkarteneinstellungen des Moduls Section 2nd Line Text und aktualisieren Sie Folgendes:
- Rand (Desktop): 0 Pixel (oben), -150 Pixel (links)
Und aktualisieren Sie für die letzte Registerkarte in der dritten Zeile Folgendes:
- Rand (Desktop): 50 Pixel oben, -150 Pixel links
Endergebnis
Nun sehen wir uns das Endergebnis an.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Mit ein wenig Kreativität und der Kraft von Divi können Sie mit Divi-Linien einige ziemlich coole benutzerdefinierte Registerkarten erstellen. Es gibt einige Einschränkungen hinsichtlich dessen, was Sie anzeigen können.
Bei dieser Konfiguration müssen beispielsweise alle Zeilen die gleiche Höhe wie der Abschnitt haben. Aber um kein Plugin verwenden zu müssen, ist dies eine großartige Lösung.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
