Sie möchten Ihre Funktionalitäten oder Produkte in Form eines Reiters präsentieren Divi mit Hover-Effekt?
Suchen Sie nach neuen kreativen Möglichkeiten, Funktionen und/oder Produkte auf Ihren Webseiten zu präsentieren?
Wenn ja, lesen Sie weiter, denn in diesem Artikel zeigen wir Ihnen, wie Sie Funktionen in Registerkarten beim Hover anzeigen, indem Sie nur die integrierten Optionen von verwenden Divi. Die Möglichkeiten, die Sie mit diesem Ansatz haben, sind endlos und werden Ihnen sicherlich das Verständnis ermöglichen Divi auf einer tieferen Ebene.
Der Tab-Hover-Effekt tritt nur auf dem Desktop auf. Auf kleineren Bildschirmgrößen erscheinen sie in ihrer normalen Form.
Lassen Sie uns gehen!
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.
Beginnen wir den Erstellungsprozess mit Divi
Einen neuen Abschnitt hinzufügen
Hintergrund mit Farbverlauf
Fügen Sie eine neue Seite hinzu oder öffnen Sie eine vorhandene Seite und fügen Sie einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie dem Abschnitt einen Hintergrund mit Farbverlauf hinzu.
- Linke Farbe: #f2f2f2
- Rechte Farbe: #ffffff
- Verlaufsrichtung: 87 Grad
- Linke Position: 20 %
- Richtige Position: 80 %
Abstand
Als nächstes ändern Sie die folgenden Abstandseinstellungen:
- Polsterung (oben und unten): 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Hintergrundfarbe
Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.
- Hintergrundfarbe: #ffffff
Dimensionierung und Ausrichtung
In der Registerkarte Design, ziehen Sie die Option herunter Größe und ändern Sie die folgenden Einstellungen:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 400px
- Zeilenausrichtung: Links
Hover-Größenanpassung
Option ändern Breite in den Hover-Größeneinstellungen. Dadurch kann die Linie beim Schweben erweitert werden.
- Breite (Hover): 2 Pixel
Abstand
Gehen Sie dann zu den Abstandseinstellungen in der Option Abstand
- Polsterung (oben und unten): 0px
Rahmen (Desktop)
Fügen Sie '20px' in die obere rechte Ecke der Linie ein und fügen Sie der Linie auch einen linken Rand hinzu.
- Abgerundete Ecken (Desktop): 20 Pixel (obere rechte Ecke)
- Linke Randbreite: 20px
- Linke Randfarbe: #6d44ff
Grenze beim Schweben
Entfernen Sie die obere rechte abgerundete Ecke von „20px“ beim Hover, indem Sie stattdessen „0px“ hinzufügen.
Kastenschatten (Desktop)
Fügen Sie schließlich einen subtilen Schatten hinzu.
- Box-Schattenunschärfe-Stärke: 80px
- Feldschatten-Ausbreitungsstärke: -10px
- Schattenfarbe: rgba(0,0,0,0.11)
Hover-Schatten
Und ändern Sie die Schattenfarbe beim Hover in eine vollständig transparente Farbe.
- Box-Schatten: rgba(255,255,255,0)
Fügen Sie der Zeile ein Blurb-Modul hinzu
Inhalt hinzufügen
Nachdem wir nun alle Zeileneinstellungen geändert haben, können wir fortfahren und der Spalte ein Blurb-Modul hinzufügen. Fühlen Sie sich frei, jedes andere Modul Ihrer Wahl zu verwenden.
Nachdem Sie das Modul hinzugefügt haben, fügen Sie einige hinzu Inhalt Ihrer Wahl.
Wählen Sie das Symbol
Wählen Sie dann ein Symbol Ihrer Wahl aus.
Symboleinstellungen
Und ändern Sie das Aussehen des Symbols in den Symboleinstellungen. Gehen Sie zur Registerkarte Design
- Symbolfarbe: #5323ff
- Bild-/Icon-Platzierung: Oben
- Bild-/Symbolbreite: 50px
Einstellungen für Texttitel (Desktop)
Ändern Sie dann die Titeleinstellungen.
- Titelschriftart: Poppins
- Textausrichtung: zentriert
- Titeltextfarbe: #5323ff
- Titeltextgröße: 25px
- Buchstabenabstand: -1px
- Zeilenhöhe: 1 cm
Hovertext-Titeleinstellungen
Und ändern Sie die Höhe der Titelzeile beim Hover.
- Titelzeilenhöhe: 1,5 em
Textkörpereinstellungen (Desktop)
Gehen Sie als Nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor. Dazu gehört auch, die Textgröße auf „0px“ zu ändern. Dies hilft uns, den Textkörper nur beim Hovern anzuzeigen.
- Körperschrift: Poppins
- Körperschriftstärke: leicht
- Textausrichtung: zentriert
- Farbe des Textkörpers: #000000
- Körpertextgröße: 0 Pixel (Desktop), 15 Pixel (Tablet und Telefon)
- Zeilenhöhe: 2,2 cm
Body-Text-Einstellungen beim Hover
Um sicherzustellen, dass der Fließtext beim Hover angezeigt wird, ändern Sie die Größe des Hover-Texts.
- Körpertextgröße: 15px
Abstand (Desktop)
Um dem Modul etwas Platz zu geben, ändern wir die folgenden Abstandsparameter:
- Polsterung (oben und unten): 80px
Schwebeabstand
Wir werden die Hover-Abstandseinstellungen ändern.
- Polsterung (oben und unten): 80px
- Polsterung (links und rechts): 20vw
Reihe 3 mal klonen
Sobald Sie mit der Bearbeitung der ersten Zeile und ihres Blurb-Moduls fertig sind, können Sie die Zeile beliebig oft klonen.
Line- und Blurb-Modul Nr. 2 bearbeiten
Linienrahmenfarbe ändern
Beginnen wir damit, die Farbe des linken Rands der Linie zu ändern.
- Linke Randfarbe: #00ffcc
Bearbeiten Sie Blurb-Inhalt und -Symbol
Öffnen Sie als Nächstes die Einstellungen des Blurb-Moduls und ändern Sie das Symbol.
Ändern Sie die Symbolfarbe des Blurb-Moduls
Mit Symbolfarbe.
- Symbolfarbe: #00eda6
Titelfarbe ändern
Und die Farbe des Titeltextes.
- Titeltextfarbe: #00eda6
Linie und Modul Burb #3 bearbeiten
Farbe der Linienumrandung
Lassen Sie uns die Randfarbe der linken Reihe ändern.
- Linke Randfarbe: #afebff
Bearbeiten Sie Blurb-Inhalt und -Symbol
Lassen Sie uns auch das Symbol ändern und Inhalt des Präsentationstextes.
Ändern Sie die Symbolfarbe des Blurb-Moduls
Ändern Sie auch die Symbolfarbe.
- Symbolfarbe: #68d9ff
Titeltextfarbe ändern
Und die Farbe des Titeltextes auch.
- Titeltextfarbe: #68d9ff
Line- und Blurb-Modul Nr. 4 bearbeiten
Linienrahmenfarbe ändern
Ändern Sie im nächsten und letzten Modul auch die Farbe des linken Rands der Linie.
- Linke Randfarbe: #dd87cf
Bearbeiten Sie Blurb-Inhalt und -Symbol
Öffnen Sie das Blurb-Modul in der Zeile und ändern Sie das Symbol und das Inhalt du Modul.
Ändern Sie die Symbolfarbe des Blurb-Moduls
Mit Symbolfarbe.
- Symbolfarbe: #dd6aca
Titeltextfarbe ändern
Und die Farbe des Titeltextes auch.
- Titeltextfarbe: #dd6aca
Übersicht
Nachdem wir nun das Tutorial durchgearbeitet haben, werfen wir einen letzten Blick auf das Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie die integrierten Optionen von Divi nur zum Erstellen von Registerkarten verwenden, die beim Hover verfügbar sind.
Dieser Ansatz hilft Ihnen, Inhalte über Funktionen oder Produkte interaktiv zu teilen.
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.
...
