Möchten Sie wissen, wie Sie es offenbaren können? Inhalt wenn Sie mit der Maus über den Abschnittstrenner fahren Divi ?
Fachteiler sind weiterhin ein Gestaltungselement Divi Beliebt. Es stehen viele Arten von Trennwänden mit nützlichen Optionen zur Auswahl, mit denen Sie Ihrer Seite ganz einfach einzigartige Übergänge und Hintergründe hinzufügen können.
In diesem Tutorial verwenden wir Abschnittsteiler etwas anders. Divi ermöglicht es Ihnen, die Höhe und Anordnung jeder Trennwand anzupassen. Dies ermöglicht es uns, Trennzeichen über bestimmten Bereichen zu positionieren Inhalt der Sektion.
Durch die Verwendung der Hover-Option für die Höhe des Trennzeichens können wir einzigartige Hover-Effekte hinzufügen, die a offenbaren Inhalt teilweise versteckt. Dies funktioniert hervorragend, um die Aufmerksamkeit auf einen bestimmten Call-to-Action oder eine bestimmte Schaltfläche zu lenken, auf die die Leute klicken sollen. Besucher klicken.
Übersicht
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.
Entwerfen des Section Divider Hover-Effekts in Divi
Erstellen des Abschnitts und der Linie
Erstellen Sie einen regulären Abschnitt mit einer zweispaltigen Zeile.
Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Hintergrundverlauf (links): #73ba57
Hintergrundverlauf (rechts): #2a4c23
Breite: 80 %
Maximale Breite: 1 Pixel
Abschnittsausrichtung: Mitte
Abschnittstitel hinzufügen
Um den Abschnittstitel hinzuzufügen, erstellen Sie ein Textmodul und fügen Sie den folgenden Text ein:
<h2>The Juice</h2>
Als nächstes aktualisieren Sie das Design wie folgt:
Schriftart: Lato
Textgröße: 80px
Buchstabenabstand: -5px
Rand: -50px (oben), -40px (unten)
Z-Index: -1
Der benutzerdefinierte Rand und der Z-Index ermöglichen es dem Text, hinter dem Bild zu bleiben, das wir im nächsten Schritt hinzufügen.
Bild hinzufügen
Fügen Sie unter dem Textmodul mit dem Titel in Spalte 1 ein Bildmodul hinzu. Laden Sie dann ein Bild mit transparentem Hintergrund hoch. Wir verwenden ein Bild aus dem Layoutpaket Saftladen 240 Pixel mal 300 Pixel.
Die Anpassung der Ausrichtung des Bildes in der Mitte.
Fügen Sie in Spalte 2 ein „Call To Action“-Modul hinzu
Fügen Sie in Spalte 2 ein Call-to-Action-Modul hinzu.
Fügen Sie eine Schaltflächen-Link-URL hinzu, um sicherzustellen, dass die Schaltfläche angezeigt wird.
CTA-Hintergrund- und Titeltext-Styling
Aktualisieren Sie als Nächstes die folgenden Designeinstellungen:
Hintergrund: #ffffff
Textfarbe: dunkel
Titelschrift: Lato
Gewicht der Titelschrift: Schwer
Schriftstil: TT
Titeltextgröße: 18px
Passen Sie die CTA-Schaltfläche an
Aktualisieren Sie das Schaltflächendesign wie folgt:
- Benutzerdefinierte Stile für Schaltfläche verwenden: JA
- Schaltflächentextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: #73ba57
- Randbreite: 0px
Passen Sie den Rand des CTA-Moduls an
Fügen Sie dann einen Rahmen hinzu, um das Modul wie folgt einzurahmen:
Randbreite: 10px
Randfarbe: rgba(115,186,87,0.15)
Hover-Effekt zum Splitter hinzugefügt, um das „Call To Action“-Modul freizulegen
Jetzt ist es an der Zeit, den Hover-Effekt zum Abschnittsteiler hinzuzufügen, um das „Call To Action“-Modul freizulegen. Dazu müssen wir zunächst unsere Abschnittsteiler erstellen.
Lesen Sie auch: Divi: So zeigen Sie Inhalte an, wenn Sie mit der Maus über Registerkarten fahren
Hinzufügen des oberen Trennzeichens
Öffnen Sie die Abschnittsparameter und das obere Trennzeichen mit den folgenden Parametern.
Top Divider Style: siehe Screenshot
Farbe der oberen Trennwand: #73ba57
Teilerhöhe: 70 % (Standard), 0 % (Hover)
Top Divider Flip: horizontal
Beachten Sie, dass die Höhe des Trennzeichens mit einer Standardhöhe von 70 % beginnt und sich dann beim Hover auf eine Höhe von 0 % ändert.
Unterteiler hinzugefügt
Fügen Sie dann ein unteres Trennzeichen hinzu, das dem Abschnitt mit den folgenden Parametern ähnelt.
- Bottom Divider Style: siehe Screenshot
- Farbe der unteren Trennwand: #73ba57
- Teilerhöhe: 70 % (Standard), 0 % (Hover)
- Teiler Flip: Horizontal
- Anordnung: Über Abschnittsinhalt
Dieser untere Teiler beginnt ebenfalls mit einer Höhe von 70 %, die beim Schweben auf 0 % abfällt. Da die Splitter-Anordnungsoption jedoch über dem Inhalt eingestellt ist, blendet der Abschnittssplitter den unteren Teil des „Call To Action“-Moduls in Spalte 1 aus. Dann wird beim Hovern der Rest des Moduls angezeigt.
Überprüfen Sie das bisherige Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Box Shadow Hover-Effekt für einzigartigen Übergang und Design hinzugefügt
Für einen einzigartigen Übergang und ein einzigartiges Design beim Hover können wir einen Box-Schatten-Hover-Effekt hinzufügen, der gleichzeitig mit dem Splitter-Hover-Effekt stattfindet. Fügen Sie dazu dem Abschnitt den folgenden Rahmenschatten hinzu.
- Box Shadow: siehe Screenshot
- Horizontale Position: 0px
- Vertikale Position: 0px
- Feldschatten-Ausbreitungsstärke: 0 Pixel (Standard), 150 Pixel (Hover)
- Schattenfarbe: #73ba57
Verlangsamen Sie die Dauer des Übergangs
Verlangsamen wir als letzten Schritt die Dauer des Übergangs.
Übergangsdauer: 700 ms
Endergebnis
Nun, da wir alle Schritte durchlaufen haben, sehen wir uns das Endergebnis an.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wir hoffen, dieser Artikel hat Sie dazu inspiriert, einzigartige Hover-Effekte zur Abschnittsunterteilung zu erstellen, um Inhalte anzuzeigen.
Tatsächlich kann das Anpassen des Hover-Splitters an sich schon ein großartiges Designmerkmal sein. Darüber hinaus sollen Ihnen die Beispieldesigns dabei helfen, mit Ihren eigenen Erkundungen und Designs zu beginnen.
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.
...
