Möchten Sie das Fullwidth-Header-Modul von Divi anpassen, indem Sie die primären und sekundären Schaltflächen ausgleichen?
Das Modul Divi Header mit voller Breite macht es einfach, schöne Hero-Abschnitte zu Ihrem hinzuzufügen Website. Das Modul verfügt über zwei Schaltflächen, Titeltext, Untertiteltext, Haupttext, Logo und Bild, wodurch die Anpassungsoptionen endlos werden.
Im heutigen Artikel zeigen wir Ihnen, wie Sie Heldenabschnitte mit dem neu erstellen Divi Header in voller Breite. Wir beginnen unser Design mit 3 vorgefertigten Layoutpaketen und gestalten unsere Abschnitte mit einem Fokus auf die Balance der primären und sekundären Schaltflächen.
Wir möchten, dass die primäre Schaltfläche heraussticht, weil sie unser primärer Aufruf zum Handeln ist, während die sekundäre Schaltfläche sichtbar und zugänglich bleibt, ohne die primäre Schaltfläche zu überholen.
Prinzipien des primären und sekundären Tastendesigns
Primärtasten und Sekundärtasten helfen bei der Orientierung Besucher Ihre Website zu bestimmten Aktien. Primäre Schaltflächen sind normalerweise die häufigste oder gewünschte Aktion und sekundäre Schaltflächen sind eine weniger häufige Aktion. Dies hilft bei der Führung Besucher wohin sie wollen.
Dazu sollten die primären Tasten optisch auffallen und die sekundären Tasten nicht so stark auffallen. Das bedeutet, dass die Haupttasten markanter sein und mehr visuelles Gewicht haben sollten, um mehr Aufmerksamkeit zu erregen.
Nachdem wir nun verstanden haben, wie die primären und sekundären Tasten funktionieren, kommen wir zum Tutorial!
Übersicht
Hier ist ein Blick auf die drei Header in voller Breite, die wir heute entwerfen werden.
Beginnen wir damit, eine neue Seite mit Divi Builder zu erstellen
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.
Lesen Sie auch: Divi: So verwenden Sie Masken und Hintergrundmuster für einen Heldenabschnitt
Design des ersten Beispiels
Nachdem unsere Seite nun eingerichtet ist, beginnen wir mit der Kopfzeile in voller Breite einer UX-Zielseite.
Konfiguration unserer Seite
Bevor wir mit der Anpassung beginnen können, müssen wir das vordefinierte Layoutpaket laden UX aus der Divi-Bibliothek. Wenn Sie den Visual Builder aktivieren, werden drei Optionen angezeigt, wählen Sie aus Layouts durchsuchen.
Layoutpaket laden
So laden Sie das UX-Layoutpaket auf Ihrer Seite:
- In der Registerkarte „Vorgefertigte Layouts“, verwenden Sie die Suchfunktion, um das UX-Layoutpaket zu finden.
- Sobald Sie es gefunden haben, klicken Sie darauf. Dadurch werden Layoutdetails und verfügbare Seiten angezeigt.
- Klicken Sie auf Landungund klicken Sie auf „Dieses Layout verwenden“.
Wir werden den oberen Teil der Anlage als Modul nachbauen Header mit voller Breite.
Löschen Sie den ersten Abschnitt
Da wir den ersten Abschnitt stattdessen mit dem Fullwidth Header-Modul neu erstellen werden, müssen wir diesen Abschnitt löschen. Bewegen Sie den Mauszeiger über den Abschnitt und klicken Sie auf das Papierkorbsymbol.
Fügen Sie einen Abschnitt voller Breite hinzu
Bevor wir den Header mit voller Breite hinzufügen können, müssen wir einen Abschnitt mit voller Breite hinzufügen.
Klicken Sie auf den Pfeil "+" Um die Divi-Abschnitte anzuzeigen, klicken Sie dann auf "Gesamtbreite". Dadurch wird automatisch die Divi Fullwidth Module-Bibliothek aufgerufen.
Fügen Sie einen Header in voller Breite hinzu
Klicken Sie in der Divi Fullwidth-Modulbibliothek auf " Header mit voller Breite".
Inhalt hinzufügen
Bevor wir mit der Anpassung des Moduls beginnen, fügen wir es hinzu Inhalt für dieses Modul erforderlich.
Fügen Sie Textinhalte hinzu
Fügen Sie auf der Registerkarte „Text“ Folgendes hinzu: Inhalt suivant:
- Titel: Verbessern Sie Ihr UX-Design-Wissen
- Untertitel: UX-Designkurs
- Schaltfläche Nr. 1: Kursübersicht
- Schaltfläche Nr. 2: Mehr erfahren
- Körper: Standard
Bilder hinzufügen
Jetzt, wo wir unsere haben Inhalt Nachdem der Text vorhanden ist, müssen wir unserem Design zwei Bilder hinzufügen.
- In der Registerkarte Bilder, fügen Sie das Logobild (die Sterne) und das Kopfzeilenbild (das Foto der Person, die ein Telefon hält) hinzu.
Hintergrundfarbe ändern
In der Registerkarte Hintergrund, konfigurieren Sie diesen Parameter:
- Hintergrundfarbe: #131517
Passen Sie den Header in voller Breite an
Nachdem unser Inhalt nun eingerichtet ist, fügen wir ihm über die etwas Styling hinzu Design.
Symbol nach unten scrollen
Lassen Sie uns das Scroll-Down-Symbol, den Abwärtspfeil, hinzufügen.
- Scroll-Down-Button anzeigen: JA.
- Wählen Sie das Abwärtspfeilsymbol.
- Symbolfarbe nach unten scrollen: #000
Bild
Fügen wir unseren Bildern Kurven hinzu, indem wir die Ecken abrunden.
In der Registerkarte Bild, konfigurieren Sie die folgenden Einstellungen:
- Bild abgerundete Ecken : Klicken Sie auf die Kettenglied-Schaltfläche, um die Verbindung der Ecken aufzuheben, und geben Sie dann 1000 Pixel in die Eingabefelder unten links und unten rechts ein. Dadurch werden die unteren linken und unteren rechten Ecken unserer Bilder abgerundet.
Titeltext
Hier passen wir den Titeltext dieses Moduls an. Auf der Registerkarte Titeltext, konfigurieren Sie diese Einstellungen:
- Titel:
- Schriftart: PT Sans
- Schriftdicke: fett
- Textgröße: 5 Rem
- Zeilenhöhe: 1,2 cm
Body text
Hier passen wir den Haupttext für dieses Modul an. Auf der Registerkarte Hauptteil, konfigurieren Sie diese Einstellungen:
- Körperschrift: Mukta
- Körpertextgröße: 18px
Untertiteltext
Hier passen wir den Beschriftungstext für dieses Modul an. Auf der Registerkarte Untertiteltext, konfigurieren Sie diese Einstellungen:
- Untertitel:
- Schriftart: Mukta
- Schriftdicke: fett
- Stil: Großbuchstaben
- Textfarbe: #13d678
- Buchstabenabstand: 3px
Knopf eins
Hier können wir benutzerdefinierte Stile für Schaltfläche eins definieren: die Haupttaste. Auf der Registerkarte Knopf eins, konfigurieren Sie diese Einstellungen:
- Benutzerdefinierten Stil für Schaltfläche XNUMX verwenden: JA
- Taste eins:
- Textfarbe: #ffffff
- Hintergrundfarbe: #13d678
- Randbreite: 0 Pixel
- Randradius: 100px
- Schriftart: Mukta
- Schriftdicke: fett
- Symbol für Schaltfläche XNUMX anzeigen: JA
- Symbol: Rechtspfeil
- Symbol nur beim Hover für Schaltfläche XNUMX anzeigen: Nein
Knopf zwei
Lassen Sie uns nun die zweite anpassen: die sekundäre Taste. Auf der Registerkarte Taste Zwei, konfigurieren Sie diese Einstellungen:
- Benutzerdefinierten Stil für Schaltfläche verwenden: JA
- Taste Zwei
- Textfarbe: #ffffff
- Hintergrundfarbe: #303030
- Randbreite: 0 Pixel
- Randradius: 100 Pixel
- Schriftart: Mukta
- Schriftdicke: fett
- Symbol für Schaltfläche XNUMX anzeigen: Ja
- Schaltfläche Zwei Symbol: Pfeil nach rechts
- Symbol nur auf Hover-Schaltfläche XNUMX anzeigen: JA
Button-Links hinzufügen
Vergessen Sie nicht, Links zu Ihren Schaltflächen hinzuzufügen! Auf der Registerkarte Link, konfigurieren Sie die folgenden Einstellungen:
- Button #1 Link URL: Fügen Sie hier die URL von Button 1 ein.
- Button #1 Link URL: Fügen Sie hier die URL von Button 2 ein.
Sichere deine Arbeit
Jetzt, da wir unseren vollständig gestalteten Header in voller Breite haben, sollten Sie Ihr Design unbedingt speichern!
- Klicken Sie auf den grünen Pfeil unten rechts im Modulfenster.
- Speichern
- Beenden Sie VisualBuilder.
Lesen Sie auch: Divi: So erstellen Sie einen Fluid Hero-Bereich
Viel Spaß beim Experimentieren
Die Möglichkeiten, das Divi Fullwidth Header-Modul anzupassen, sind endlos. Die Nutzung der Primärtaste und der Sekundärtaste kann Ihnen bei der Steuerung helfen Besucher zu der Seite, die sie anzeigen sollen, oder um die von ihnen gewünschte Aktion (z. B. das Absenden einer Anfrage) auszuführen.
Werfen wir einen Blick auf zwei weitere Beispiele für Kopfzeilen in voller Breite, die eine hervorstechende primäre Schaltfläche haben.
Header in voller Breite aus dem Paket "Retirement Center".
Schaltflächenstile
Werfen wir einen Blick auf die einzigartigen primären und sekundären Schaltflächenstile.
Knopf eins
Konfigurieren Sie auf der Registerkarte Schaltfläche Eins die folgenden Einstellungen:
- Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: JA
- Taste eins:
- Textgröße: 14px
- Textfarbe: #ffffff
- Hintergrundfarbe: #0a0a0a
- Randbreite: 0 Pixel
- Randradius: 10px
- Buchstabenabstand: 3px
- Schriftdicke: fett
- Schriftstil: TT
- Symbol nur beim Hover für Buttpn One anzeigen: JA
- Polsterung der Schaltfläche 15: 25 Pixel (oben und unten), XNUMX Pixel (links und rechts)
Knopf zwei
In der Registerkarte Taste Zwei, konfigurieren Sie die folgenden Einstellungen:
- Benutzerdefinierten Stil für Schaltfläche verwenden: JA
- Knopf zwei:
- Textgröße: 14px
- Textfarbe: #ffffff
- Hintergrundfarbe: #0a0a0a
- Randbreite: 0 Pixel
- Randradius: 10px
- Schriftdicke: fett
- Schriftstil: TT
- Polsterung der Schaltfläche 10: 10 Pixel (unten), XNUMX Pixel (links und rechts)
Und los geht's! Zwei einzigartige Knöpfe, einer, der auffällt, und einer, der den zweiten Platz einnimmt.
Kopfzeile in voller Breite des Pakets "Finanzplanung".
Schaltflächenstile
Werfen wir einen Blick auf die einzigartigen primären und sekundären Schaltflächenstile.
Knopf eins
In der Registerkarte Knopf Eins, konfigurieren Sie die folgenden Einstellungen:
- Benutzerdefinierten Stil für Schaltfläche XNUMX verwenden: JA
- Taste eins:
- Textgröße: 18px
- Textfarbe: #ffffff
- Hintergrundfarbe: #1b4ffe
- Polsterung: 15px (Oben und Unten); 25px (links und rechts)
Knopf zwei
In der Registerkarte Taste Zwei, konfigurieren Sie die folgenden Einstellungen:
- Benutzerdefinierten Stil für Schaltfläche XNUMX verwenden: JA
- Knopf zwei:
- Textfarbe: #1b4ffe
- Hintergrundfarbe: Klar
- Symbolfarbe: #1b4ffe
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Mit dem Fullwidth-Header-Modul von Divi können Sie ganz einfach atemberaubende Hero-Abschnitte auf Ihrem erstellen Website.
Die strategische Verwendung von primären und sekundären Schaltflächen verbessert Ihr Benutzererlebnis und hilft Website-Besuchern, die gewünschten Aktionen auszuführen.
Die Anpassungsmöglichkeiten sind mit dem Header in voller Breite endlos, also viel Spaß beim Experimentieren!
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.
...
