Abschnittsteiler sind weiterhin ein beliebtes Gestaltungselement bei Divi. Es gibt viele Arten von Trennzeichen, einschließlich einiger nützlicher Optionen, mit denen Sie Ihrer Seite auf einfache Weise eindeutige Übergänge und Hintergründe hinzufügen können.
In diesem Tutorial verwenden wir Abschnittstrenner etwas anders. Mit Divi können Sie die Höhe und Anordnung jeder Trennwand anpassen. Dadurch können wir Trennzeichen über bestimmten Bereichen oder Inhalten im Abschnitt positionieren. Durch die Verwendung der Hover-Option für die Höhe der Trennlinie können wir einzigartige Hover-Effekte hinzufügen, die einen sichtbar machen Inhalt teilweise versteckt. Dies funktioniert hervorragend, um die Aufmerksamkeit auf einen Call-to-Action oder eine bestimmte Schaltfläche zu lenken, auf die die Leute klicken sollen. Besucher klicken.
Lassen Sie uns beginnen.
Beispielergebnis
Was Sie brauchen, um loszulegen
Für den Einstieg benötigen Sie Folgendes:
- Le Divi-Thema installiert und aktiv
- Eine neue Seite, die von Grund auf neu erstellt wurde (visueller Konstruktor)
- Einige Dummy-Bilder, die im Design verwendet werden sollen. Ich werde einige Bilder mit transparentem Hintergrund aus dem verwenden Juice Shop Layout Pack .
Danach können Sie loslegen!
Implementieren des Entwurfs für den Hover-Effekt des Abschnittsunterteilerhöheneffekts in Divi
Erstellen des Abschnitts und der Linie
Beginnen wir mit der Erstellung eines regulären Abschnitts mit einer Reihe von zwei Spalten.
Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Linker Hintergrundverlauf: #73ba57
Rechter Hintergrundverlauf: #2a4c23
Breite: 80%
Maximale Breite: 1080px
Abschnittsausrichtung: Mitte
Sie können aber auch das gewünschte Farbschema entsprechend Ihrem Bild auswählen. Mein Farbschema ist: # fff200 - # e09900 im Farbverlauf.
Abschnittstitel hinzufügen
Um den Abschnittstitel hinzuzufügen, erstellen Sie ein Textmodul und aktualisieren Sie das Inhalt des Körpers mit folgendem h2-Header:
Der Saft
Aktualisieren Sie dann die Zeichnung wie folgt:
Überschrift 2-Schriftart: Lato
Überschrift 2 Textgröße: 80px
Überschrift 2 Buchstabenabstand: -5px
Rand: -50px oben, -40px unten
Z-Index: -1
Der benutzerdefinierte Rand und der z-Index ermöglichen es dem Text, sich hinter das Bild zu setzen, das wir im nächsten Schritt hinzufügen werden.
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. Ich verwende ein Bild aus dem Juice Shop Layout Pack, das 240 x 300 Pixel groß ist.
Passen Sie die Ausrichtung des Bildes zur Mitte an.
Hinzufügen eines Aufrufs zur Aktion in Spalte 2
Fügen Sie in der Spalte 2 einen Aufruf zum Aktionsmodul hinzu.
Fügen Sie eine Schaltflächen-Link-URL hinzu, um sicherzustellen, dass die Schaltfläche angezeigt wird.
CTA-Hintergrund und Titelstil
Aktualisieren Sie anschließend die folgenden Entwurfsparameter:
Hintergrundfarbe: #ffffff
Textfarbe:
Titel Schriftart: Lato
Titelgewichtsrichtlinie: Schwer
Titelschriftart: TT
Titel Textgröße: 18px
Stilisieren Sie die CTA-Schaltfläche
Aktualisieren Sie das Schaltflächendesign wie folgt:
Textfarbe der Schaltfläche: #ffffff
Hintergrundfarbe der Schaltfläche: # e09900
Schaltflächenrandbreite: 0 px
Gestaltung der CTA-Grenze
Fügen Sie dann einen Rahmen hinzu, um das Modul wie folgt einzurahmen:
Breite des Rahmens: 10px
Farbe des Randes: rgba (224,145,0,0.25)
Der Schwebeflug-Effekt für die Teilerhöhe wurde hinzugefügt, um den Aufruf zum Handeln anzuzeigen
Jetzt ist es an der Zeit, den Hover-Effekt für die Teilungshöhe hinzuzufügen, um den Aufruf zum Handeln anzuzeigen. Dazu müssen wir zuerst unsere Abschnittsteiler erstellen.
Hinzufügen des oberen Trennzeichens
Öffnen Sie die Abschnittsparameter und das obere Trennzeichen mit den folgenden Parametern.
Stil des oberen Teilers: siehe Screenshot Farbe des oberen Teilers: # 73ba57 Höhe des oberen Teilers: 70% (Standard), 0% (schwebend)
Klappteiler: horizontal
Beachten Sie, dass die Höhe des Trennzeichens mit einer Standardhöhe von 70% beginnt und sich dann bei einem Rollover auf eine Höhe von 0% bewegt.
Hinzufügung des Unterteilers
Fügen Sie dann ein unteres Trennzeichen hinzu, das dem Abschnitt mit den folgenden Parametern ähnelt.
Stil des oberen Teilers: siehe Screenshot Farbe des oberen Teilers: # 73ba57 Höhe des oberen Teilers: 70% (Standard), 0% (schwebend)
Klappteiler: horizontal
Trenner-Layout: Oben im Abschnitt Inhalt
Dieses Hintergrundtrennzeichen beginnt ebenfalls mit einer Höhe von 70%, die sich beim Schweben auf 0% ändert. Da die Trennzeichen-Layoutoption jedoch oben im Inhalt festgelegt ist, verbirgt das Abschnitts-Trennzeichen den unteren Teil des Aufrufs zum Handeln in Spalte 1. Wenn Sie den Mauszeiger bewegen, wird der Rest des l angezeigt Aufruf zum Handeln wird offenbart.
Überprüfen Sie das bisherige Ergebnis.
Ein Box Shadow Hover-Effekt für einen einzigartigen Übergang und Design wurde hinzugefügt
Für einen einzigartigen Übergang und Design zum Schweben können wir einen Box-Shadow-Hover-Effekt hinzufügen, der gleichzeitig mit dem Hover-Effekt für die Teilerhöhe auftritt. Fügen Sie dazu dem Abschnitt den Schatten des folgenden Felds hinzu.
Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Box Shadow Vertical Position: 0px
Box Shadow Spread Force: 0px (Standard), 150px (Schwebeflug)
Box Shadow Color: #73ba57
Verlangsamen Sie die Dauer des Übergangs
Verlangsamen wir als letzten Schritt die Dauer des Übergangs.
Dauer des Übergangs: 700ms
Endergebnis
Hier ist das Endergebnis auf dem Desktop.
Basierend auf dem, was wir oben getan haben, können Sie die Anzeige auf Mobilgeräten und Tablets anpassen.
Abschließende Gedanken
Ich hoffe, dieses Tutorial hat Sie dazu inspiriert, einzigartige Hover-Effekte für die Teilerhöhenhöhe zu erstellen, um Inhalte zu enthüllen. Tatsächlich kann das Einstellen der Höhe des schwebenden Teilers ein bemerkenswertes Gestaltungselement sein. Und die Designbeispiele sollen Ihnen helfen, Ihre eigene Erkundung und Ihre eigenen Designs zu starten.
Ich hoffe, von Ihnen in den Kommentaren zu hören.
Ihrer Gesundheit zuliebe!
