So verwenden Sie die Hover-Effekte des Abschnittstrenners, um den Inhalt in Divi . anzuzeigen
Veröffentlicht: 2019-06-24Abschnittsteiler sind nach wie vor ein beliebtes Divi-Designelement. Es stehen viele Trennlinienstile mit hilfreichen Optionen zur Auswahl, mit denen Sie Ihrer Seite ganz einfach einzigartige Übergänge und Hintergründe hinzufügen können.
In diesem Tutorial werden wir Abschnittsteiler etwas anders verwenden. Mit Divi können Sie die Höhe und Anordnung jedes Teilers anpassen. Dies ermöglicht es uns, Trennlinien über bestimmten Bereichen oder Inhalten innerhalb des Abschnitts zu platzieren. Durch die Verwendung der Schwebeoption für die Teilerhöhe können wir einzigartige Schwebeeffekte hinzufügen, die teilweise verborgene Inhalte sichtbar machen. Dies funktioniert hervorragend, um die Aufmerksamkeit auf einen bestimmten Call-to-Action oder eine Schaltfläche zu lenken, auf die Besucher klicken sollen.
Lass uns anfangen.
Vorgeschmack
Laden Sie die Höhen-Hover-Effekte für Abschnittsteiler 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.
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 Folgendes:
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
- Ein paar Scheinbilder, die im Design verwendet werden können. Ich werde ein paar Bilder mit transparentem Hintergrund aus unserem Juice Shop Layout Pack verwenden.
Danach können Sie loslegen!
Implementieren des Hover-Effekt-Designs der Schnittteilerhöhe in Divi
Abschnitt und Zeile erstellen
Zuerst erstellen wir einen regulären Abschnitt mit einer zweispaltigen Zeile.
Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Hintergrundfarbe links: #73ba57
Hintergrund mit Farbverlauf rechts: #2a4c23
Breite: 80%
Maximale Breite: 1080px
Abschnittsausrichtung: Mitte
Hinzufügen des Abschnittstitels
Um den Titel des Abschnitts hinzuzufügen, erstellen Sie ein Textmodul und aktualisieren Sie den Hauptinhalt mit dem folgenden h2-Header:
<h2>The Juice</h2>
Aktualisieren Sie dann das Design 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, dass der Text hinter dem Bild sitzt, 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. Ich verwende ein Bild aus dem Juice Shop Layout Pack, das 240 x 300 Pixel groß ist.
Passen Sie die Bildausrichtung auf die Mitte an.
Hinzufügen eines Call-to-Action in Spalte 2
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 gestalten
Aktualisieren Sie dann die folgenden Designeinstellungen:
Hintergrundfarbe: #ffffff
Textfarbe: dunkel
Titelschriftart: Lato
Gewicht der Titelschrift: Schwer
Titelschriftart: TT
Titel Textgröße: 18px
CTA-Button gestalten
Aktualisieren Sie das Schaltflächendesign wie folgt:
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #73ba57
Breite des Tastenrahmens: 0px
Den CTA-Rahmen gestalten
Fügen Sie dann einen Rahmen hinzu, um das Modul wie folgt einzurahmen:
Rahmenbreite: 10px
Randfarbe: rgba(115,186,87,0.15)
Hinzufügen des Hover-Effekts der Teilerhöhe, um den Call-to-Action anzuzeigen
Jetzt ist es an der Zeit, den Hover-Effekt für die Abschnittsteilerhöhe hinzuzufügen, um die Handlungsaufforderung anzuzeigen. Dazu müssen wir zunächst unsere Abschnittsteiler erstellen.
Hinzufügen des oberen Teilers
Öffnen Sie die Abschnittseinstellungen und den oberen Teiler mit den folgenden Einstellungen.
Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #73ba57
Höhe des oberen Teilers: 70% (Standard), 0% (Hover)
Top Divider Flip: horizontal
Beachten Sie, dass die Teilerhöhe mit einer Standardhöhe von 70 % beginnt und sich dann beim Bewegen der Maus auf eine Höhe von 0 % ändert.
Hinzufügen des unteren Teilers
Als nächstes fügen Sie dem Abschnitt einen ähnlichen unteren Teiler mit den folgenden Einstellungen hinzu.
Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #73ba57
Höhe des oberen Teilers: 70% (Standard), 0% (Hover)
Top Divider Flip: horizontal
Teileranordnung: Über dem Abschnittsinhalt
Dieser untere Teiler beginnt ebenfalls mit einer Höhe von 70 %, die sich beim Schweben auf 0 % ändert. Da die Trenner-Anordnungsoption jedoch über dem Inhalt festgelegt ist, blendet der Abschnittstrenner den unteren Teil des Call-to-Action in Spalte 1 aus. Wenn Sie den Mauszeiger darüber bewegen, wird der Rest des Call-to-Action angezeigt.
Sehen Sie sich das bisherige Ergebnis an.
Hinzufügen eines Box-Schatten-Hover-Effekts für einen einzigartigen Übergang und ein einzigartiges Design
Für einen einzigartigen Übergang und ein einzigartiges Design beim Schweben können wir einen Box-Schatten-Hover-Effekt hinzufügen, der gleichzeitig mit dem Schwebeeffekt der Teilerhöhe stattfindet. Fügen Sie dazu den folgenden Boxschatten zum Abschnitt hinzu.
Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenausbreitung: 0px (Standard), 150px (Hover)
Kastenschattenfarbe: #73ba57
Verlangsamung der Übergangsdauer
Lassen Sie uns als letzten Schritt die Übergangsdauer etwas verlangsamen.
Übergangsdauer: 700ms
Endergebnis
Hier ist das Endergebnis auf dem Desktop.
Wenn Sie nicht möchten, dass der Inhalt auf dem Tablet- und Telefondisplay ausgeblendet wird, können Sie die Trenner-Anordnung für diese Geräte ganz einfach in „unterhalb des Abschnittsinhalts“ ändern.
Hier ist das endgültige Design auf Tablet und Telefon.
Experimentieren mit anderen Abschnittstrenner-Stilen für völlig einzigartige Designs in Sekunden
Mit diesem Setup können Sie ganz einfach mit verschiedenen Stilen und Kombinationen von Trennwänden experimentieren!
Hier sind ein paar mehr, die ich in den kostenlosen Download aufgenommen habe.
Abschließende Gedanken
Hoffentlich hat Ihnen dieser Beitrag ein wenig Inspiration gegeben, wie Sie einige einzigartige Schwebeeffekte für Abschnittsteiler erstellen können, um Inhalte anzuzeigen. Tatsächlich kann das Einstellen der Teilerhöhe beim Schweben ein großartiges Designelement sein. Und die Designbeispiele sollten Ihnen helfen, Ihre eigenen Erkundungen und Designs zu starten.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!