Divi: So fügen Sie eine Scroll-Down-Schaltfläche in das Fullwidth-Header-Modul ein

Möchten Sie Ihr Fullwidth-Header-Modul von ergänzen Divi ein Scroll-Down-Button?

Das Fullwidth Header-Modul von Divi enthält eine Schaltfläche, die dem Benutzer mitteilt, dass er nach unten scrollen kann. Sobald sie darauf klicken, werden sie automatisch zum nächsten Abschnitt weitergeleitet. Es ist eine einfache Schaltfläche mit mehreren Symbolen zur Auswahl, und ihre Farbe und Größe sind vollständig anpassbar. 

In diesem Artikel erfahren Sie, wie Sie es anpassen können, und sehen vier Schaltflächen zum Herunterscrollen, die Sie in Ihr Header-Modul mit voller Breite einfügen können. Wir werden auch sehen, wie Sie es mit CSS für noch mehr Designoptionen anpassen können.

Fangen wir an!

Übersicht der Schaltflächen zum Herunterscrollen

Schauen wir uns zunächst die Designs an, die wir in diesem Artikel erstellen werden.

Beispiel 1

Beispiel 2

Laden Sie DIVI jetzt herunter!!!

Beispiel 3

Beispiel 4

Laden Sie DIVI jetzt herunter!!!

Schaltflächen zum Herunterscrollen Header-Design in voller Breite

Zuerst erstellen wir unser Header-Design in voller Breite. Ich baue es von Grund auf neu mit Designs aus dem kostenloses Therapie-Layout-Paket in Divi verfügbar . Erstellen Sie eine neue Seite und fügen Sie eine hinzu Header-Modul in voller Breite zu einem neuen Abschnitt in voller Breite.

Siehe auch: Divi: So erstellen Sie ein Organigramm mit dem Blurb-Modul

Fachteiler über die gesamte Breite

Wir fügen einen Teiler für diese Kopfzeile in voller Breite hinzu. Öffnen Sie die Einstellungen der Abschnitt in voller Breite .

Scrollen Sie dann nach unten zu Trennwand . Klicken Sie auf die Registerkarte Boden und wählen Sie den 8. Trennzeichenstil. Stellen Sie die Farbe auf #e5e8f0 und geben Sie 10vw für die Höhe ein. Schließen Sie die Abschnittseinstellungen.

• Teiler: Niedrig
• Stil: 8. Stil
• Farbe: #e5e8f0
• Höhe: 10vw

Überschrift

Öffnen Sie als Nächstes das Fullwidth Header-Modul und fügen Sie Ihren Titel, Untertitel und Schaltflächentext hinzu. Entfernen Sie den Dummy-Text für Inhalt des Körpers und lassen Sie ihn leer.

• Titel: Beginnen Sie noch heute Ihre Reise, um sich besser zu fühlen.
• Untertitel: Leslie Saindon, lizenzierte Therapeutin
• Schaltfläche Nr. 1: Vereinbaren Sie einen Termin
• Body: keine

Header-Bilder

Scrollen Sie zu Bilder und wählen Sie ein Header-Bild aus. Ich wähle ein Bild aus, das mit bereitgestellt wird Therapie-Layout-Paket.

Header-Hintergrund

Scrollen Sie zu Hintergrund. Entfernen Sie die Hintergrundfarbe und wählen Sie die Registerkarte aus Hintergrundverlauf.

• Gradientenstopps:
  • 25 %: #2e5b61
  • 100 %: RGBA (46, 91, 97, 0,5)

ermöglichen Platzieren Sie den Farbverlauf über dem Hintergrundbild .

• Quadratische Steigung über Hintergrundbild: JA

Header-Hintergrundbild in voller Breite

Wählen Sie dann dieRegisterkarte Hintergrundbild und wählen Sie ein Vollbild aus. Ich verwende ein anderes Bild aus dem Therapy Layout Pack.

• Position des Hintergrundbilds: Oben in der Mitte

Header-Layout in voller Breite

Wählen Sie dann dieDesign-Registerkarte und aktivieren Vollbild machen .

• Vollbild machen: JA

Kopfzeile in voller Breite nach unten scrollen

Dann aktiviere Scroll-Down-Button anzeigen. Wir gestalten diese Schaltfläche in unseren Beispielen, sodass wir sie vorerst in den Standardeinstellungen belassen.

• Scroll-Down-Button anzeigen: JA

Header-Bild

Scrollen Sie dann nach unten zu Bild und ändern Sie die abgerundeten Ecken oben links auf 200 Pixel für Desktops. Setzen Sie den Rest der abgerundeten Ecken auf 0px. Ändern Sie abgerundete Ecken für Tablets und Telefone in 100 Pixel.

• Bild abgerundete Ecken:
  • Desktop: 200px oben links, 0px alle anderen
  • Tablet und Telefon: 100 Pixel oben links, 0 Pixel alle anderen

Titeltext der Kopfzeile

Scrollen Sie dann nach unten zu Titeltext. Verwenden Sie H1 für die Überschriftenebene. Wählen Sie Cormorant Garamond für die Titelschriftart, stellen Sie das Gewicht auf Bold und die Farbe auf #e1ecea ein.

• Titel:
  • Überschriftenebene: H1
  • Schriftart: Cormorant Garamond
  • Schriftdicke: fett
  • Textfarbe: #e1ecea

Stellen Sie dann die ein taille für alle drei Bildschirmgrößen. Verwenden Sie 90 Pixel für Desktops, 40 Pixel für Tablets und 24 Pixel für Telefone. Ändern Sie die Zeilenhöhe auf 1.1em.

• Titeltextgröße: 90px, 40px, 24px
• Titelzeilenhöhe: 1,1 em

Header-Untertiteltext in voller Breite

Scrollen Sie dann nach unten zu Untertiteltext. Ändern Sie die Schriftart in Inter, die Schriftstärke in Fett und die Farbe in #e1ecea.

• Untertitel:
  • Schrift: Inter
  • Schriftdicke: fett
  • Textfarbe: #e1ecea

Definiere das taille bei 22 Pixel für Desktops, 20 Pixel für Tablets und 16 Pixel für Telefone. Ändern Sie es Zeilenhöhe um 1,6 em.

• Untertiteltextgröße: 22px, 20px, 16px
• Untertitelzeilenhöhe: 1,6 em

Header-Schaltfläche

Scrollen Sie nach unten zu Einstellungen Knopf Eins und aktivieren Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins . Ändern Sie die Größe auf 14 Pixel, die Textfarbe auf #2e5b61 und die Hintergrundfarbe auf #e1ecea.

• Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: JA
• Knopf Eins
  • Textgröße: 14px
  • Textfarbe: #2e5b61
  • Hintergrund: #e1ecea

Ändern Sie die Breite der Grenze bei 0px und dem Radius der Grenze bei 50px. Verwenden Sie Inter für die Schriftart und ändern Sie die Gewichtung in Halbfett.

• Taste eins:
  • Randbreite: 0px
  • Randradius: 50px
  • Schrift: Inter
  • Gewicht: Fett

Für den Knopfpolsterung , verwenden Sie 20 Pixel für Oben und Unten und 40 Pixel für Links und Rechts.

• Button One Padding: 20 px oben und unten, 40 px links und rechts

Lesen Sie auch: Divi: So erstellen Sie einen Fluid Hero-Bereich

Beispiele für Schaltflächen zum Herunterscrollen

Nun, da wir unsere Kopfzeile in voller Breite haben, sehen wir uns an, wie Sie die Schaltflächen zum Herunterscrollen anpassen können. Wir sehen uns vier Beispiele mit verschiedenen Kombinationen von Symbolen, Farben und Größen an.

Die Schaltflächen zum Herunterscrollen enthalten drei Parameter. Jede Einstellung kann unabhängig für jede Bildschirmgröße angepasst werden. Zu den Parametern gehören:

• Auswahl von Symbolen – Wählen Sie aus 11 Symbolen. Sie umfassen verschiedene Pfeildesigns mit oder ohne Hintergrund, einschließlich nicht eingekreister, eingekreister und fester Pfeile.
• Farbe – der Farbwähler Divi
• Größe – die standardmäßige Divi-Größenanpassung.

Es enthält auch ein CSS-Feld auf der Registerkarte Erweitert. 

Wir werden alle diese Parameter verwenden.

Siehe auch: Divi: 5 Überlagerungen von Masken und Mustern, die auf ein Hintergrundbild anwendbar sind

Beispiel 1

Für unser erstes Beispiel verwenden wir ein nicht eingekreistes Symbol ohne Hintergrund. Wählen Sie das erste Symbol aus, ändern Sie die Farbe in #e1ecea und ändern Sie die Größe in 66 Pixel für Desktops, 60 Pixel für Tablets und 50 Pixel für Telefone.

• Symbol: 1. Symbol
• Farbe: #e1ecea
• Größe: 66px (Desktop und Tablet), 50px (Telefon)

Dadurch entsteht ein hellgrüner Abwärtspfeil, der gut zum Rest des Designs passt und genug hervorsticht, um den Benutzer zu informieren.

Beispiel 2

Für unser zweites Beispiel verwenden wir ein eingekreistes Symbol. Wählen Sie das siebte Symbol und ändern Sie die Farbe in #e8c553. Wir werden das Symbol dafür vergrößern. Ändern Sie die Größe auf 78 Pixel für Desktops, 70 Pixel für Tablets und 60 Pixel für Telefone.

• Symbol: 7. Symbol
• Farbe: #e8c553
• Größe: 78px (Desktop), 70px (Tablet), 60px (Telefon)

Diese Farbe ist eine Variation des Gelbs im Layoutpaket, aber heller und funktioniert am besten auf dem grünen Hintergrund. Das Symbol hat scharfe Ecken, aber der Kreis passt zum abgerundeten Design des Layouts.

Beispiel 3

Für unser drittes Beispiel verwenden wir ein Symbol mit einem Kreis und einem Hintergrund. Dies färbt den Hintergrund ein und erstellt das Symbol mit einer Öffnung, die das Hintergrundbild des zeigt Website. 

Um optimale Ergebnisse zu erzielen, müssen wir genau auf die Symbolgröße und die Hintergrundfarbe der Schaltfläche achten.

Wählen Sie das achte Symbol aus und ändern Sie seine Farbe in #0e4951. Stellen Sie die Größe auf 60 Pixel für Desktops, 56 Pixel für Tablets und 50 Pixel für Telefone ein.

• Symbol: 8. Symbol
• Farbe: #0e4951
• Größe: 60px (Desktop), 56px (Tablet), 50px (Telefon)

Grün ist ein dunklerer Grünton im Hintergrund. Der dunklere Farbton hebt sich vom Grün ab und passt dennoch zum Rest des Layouts.

Beispiel 4

Was ist, wenn Sie Farben so kombinieren möchten, dass Sie eine Hintergrundfarbe hinter dem Ausschnittsymbol haben? Wir können dies mit CSS tun. 

In diesem Beispiel verwenden wir CSS, um eine Hintergrundform hinter dem Symbol zu erstellen, die durch das ausgeschnittene Symbol sichtbar ist. Das Symbol selbst verwendet die Standardeinstellungen.

Wählen Sie das elfte Symbol und ändern Sie die Farbe in #e1ecea. Wir werden das Symbol für dieses kleiner einstellen und eine große Hintergrundform erstellen. Ändern Sie die Größe auf 50 Pixel für Desktops, 40 Pixel für Tablets und 30 Pixel für Telefone.

• Symbol: 11^Jahrhundert
• Farbe: #e1ecea
• Größe: 50px (Desktop), 40px (Tablet), 30px (Telefon)

Dann gehen Sie auf die Registerkarte Fortgeschrittener und zum Feld scrollen Scrollen Sie nach unten und gib dieses CSS ein:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Dieses CSS-Format fügt oben, rechts, unten und links eine Auffüllung hinzu. Ich habe diese Polsterung verwendet, um mithilfe von Layout-Designanleitungen ein Hintergrundoval zu erstellen, das gut zum Kopfzeilendesign passt.

Ergebnisse der verschiedenen Beispiele

Beispiel 1

Beispiel 2

Laden Sie DIVI jetzt herunter!!!

Beispiel 3

Beispiel 4

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Dies ist unsere Übersicht über die vier Scroll-Down-Schaltflächen, die Sie in Ihr Fullwidth Header Divi-Modul aufnehmen können. Die Bildlaufschaltfläche enthält mehrere Symbole, aus denen Sie auswählen können, und Sie können Farbe und Größe festlegen. 

Mithilfe des CSS-Felds können Sie die Schaltfläche weiter anpassen. Die Kombinationen aus Button-Styling-Optionen und CSS geben Ihnen viele Gestaltungsmöglichkeiten mit Ihren Scroll-Down-Buttons.

Ich hoffe, dies wird für Ihre nächste Blog-Site nützlich sein. 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 Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren 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.

...