Möchten Sie wissen, wie Sie mit dem Fullwidth Header-Modul von Divi einen Hero-Bereich erstellen?
Das Erstellen eines Heldenbereichs ist eine großartige Möglichkeit, die Aufmerksamkeit auf sich zu lenken Inhalt wichtig für Ihre Seite. Das ist ein Inhalt Großes Format, mit dem Sie Ihre Geschichte erzählen, Informationen über Ihre Arbeit teilen oder ein Produkt oder eine Dienstleistung hervorheben können.
Mit dem Fullwidth Header-Modul von Divi können Sie einen Titel, einen Untertitel, zwei Schaltflächen, Textkörper, ein Logobild und ein Headerbild hinzufügen. Natürlich können Sie auch die Hintergrundoptionen verwenden, um Bilder, Verläufe, Farben, Muster und Masken hinzuzufügen und zu kombinieren.
Sie können alle diese Einstellungen in den Moduleinstellungen ändern, anstatt zwischen mehreren Bild-, Text- und Schaltflächenmodulen wechseln zu müssen.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Fullwidth Header-Modul von Divi einen attraktiven und auffälligen Hero-Bereich erstellen.
Es ist weg!
Übersicht
Hier ist eine Vorschau auf das, was wir entwerfen werden.
Was Sie brauchen, um loszulegen
Bevor Sie beginnen, stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrem haben Website.
Jetzt sind Sie startklar!
So erstellen Sie einen Hero-Bereich mit dem Fullwidth-Header-Modul von Divi
Lesen Sie auch: Divi: So verwenden Sie den „Gradient Builder“, um Ihre Bilder zu verschönern
Erstellen Sie eine neue Seite mit einem vordefinierten Layout
Beginnen wir mit der Verwendung eines vordefinierten Layouts aus der Divi-Bibliothek. Für dieses Design verwenden wir die Homepage Tierarzt-Layoutpaket.
Fügen Sie im Worpress-Dashboard eine neue Seite zu Ihrer hinzu Website
Geben Sie ihm einen Titel und wählen Sie dann die Option aus Verwenden Sie Divi Builder.
Für dieses Beispiel verwenden wir ein vordefiniertes Layout aus der Divi-Bibliothek. Also auswählen Layouts durchsuchen.
Suchen Sie das Layout und wählen Sie es aus Hundezüchter.
wählen Verwenden Sie dieses Layout um das Layout zu Ihrer Seite hinzuzufügen.
Wir sind jetzt bereit zu entwerfen.
Fügen Sie das Fullwidth-Header-Modul hinzu
Wir werden den Hero-Bereich mit dem Fullwidth Header-Modul neu erstellen. Fügen Sie der Seite unterhalb der vorhandenen Kopfzeile einen neuen Abschnitt in voller Breite hinzu.
Fügen Sie dem Abschnitt ein Fullwidth-Header-Modul hinzu.
Löschen Sie als Nächstes den ursprünglichen Header-Abschnitt.
Passen Sie das Fullwidth-Header-Modul an
Inhalt hinzufügen
Öffnen Sie die Moduleinstellungen und fügen Sie das hinzu Inhalt neben dem Modul:
- Titel: Tierarzt
- Untertitel: Divivet. Diene unseren besten Freunden
- Schaltfläche Nr. 1: Alle Dienste
- Button Nr. 2: Vereinbaren Sie einen Termin
- Körper: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
Fügen Sie als Nächstes ein Header-Bild hinzu.
Hintergrundeinstellungen mit Farbverlauf
Gehen Sie zu den Hintergrundeinstellungen. Löschen Sie die ursprüngliche Hintergrundfarbe und fügen Sie dann einen Hintergrundverlauf hinzu.
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87 %: rgba(124,239,255,0.71)
- Verlaufstyp: Elliptisch
- Verlaufsposition: Rechts
Wählen Sie dann die Registerkarte aus Hintergrundmaske und fügen Sie eine Hintergrundmaske hinzu.
- Maskenhintergrund: Corner Blob
- Maskenfarbe: #FFFFFF
- Transformieren: vertikal
Text anpassen
Wechseln Sie zur Registerkarte Design und ändern Sie die Titeleinstellungen
- Titelschrift: Nunito
- Schriftstärke des Titels: Ultra Bold
- Schriftstil: TT (Großbuchstaben)
- Titeltextfarbe: #a9cb6b
- Textgröße: 14px
- Abstand der Titelbuchstaben: 2px
Gehen Sie zum Abschnitt von Hauptteil und passen Sie die Schriftart an.
- Textfarbe: #000000
- Körpertextgröße:
- Desktop: 18px
- Telefon: 14px
- Höhe der Körperlinie: 1.8 m
Siehe auch: Divi: So passen Sie den Korb und die Suchsymbole des Moduls „Menü mit voller Breite“ an
Öffnen Sie als Nächstes die Untertiteleinstellungen und passen Sie die Schriftart an.
- Schriftart für Untertitel: Nunito
- Untertitelschriftstärke: Fett
- Textfarbe: #000000
Ändern Sie abschließend die Größe des Textes
- Untertitel-Textgröße:
- Desktop: 56px
- Beweglich: 32px
- Untertitelzeilenhöhe: 1.2em
Passen Sie Schaltfläche Nr. 1 an
Als Nächstes passen wir die Schaltflächenstile an. Beginnen Sie damit, benutzerdefinierte Stile für die erste Schaltfläche zu aktivieren, und passen Sie dann die Textgröße an.
- Benutzerdefinierte Stile für Schaltfläche verwenden: JA
- Textgröße der Schaltfläche 14: XNUMXpx
Fügen Sie der Schaltfläche einen Hintergrundverlauf hinzu. Die Steigungswerte sind wie folgt:
- 58 %: #316EFF
- 100 %: #1D2B60
- Steigungsrichtung: 90 Grad
Passen Sie als Nächstes Rahmeneinstellungen und Schriftarteinstellungen an.
- Taste eins:
- Randbreite: 0px
- Randradius: 80px
- Buchstabenabstand: 2px
- Schriftart: Nunito
- Schriftstärke: Ultra Bold
- Stil: TT (Großgeschrieben)
- Schaltfläche Eins-Symbol anzeigen: NEIN
Passen Sie als Nächstes die Rand- und Abstandseinstellungen für das Desktop-Design an und fügen Sie einen Boxschatten hinzu.
- Schaltfläche Eins Rand
- Oben: 200px
- Unten: 0px
- Polsterung von Knopf Eins:
- Oben: 16px
- Unten: 16px
- Links: 2em
- Rechts: 50em
- Box Shadow: Aufnahme anzeigen
Verwenden Sie reaktionsschnelle Einstellungen, um auf Mobilgeräten unterschiedliche Rand- und Auffüllwerte festzulegen.
- Button One Margin-Top-Mobile: 25px
- Button One Padding-Right-Mobile: 10em
Passen Sie Schaltfläche Nr. 2 an
Klicken Sie zuerst mit der rechten Maustaste auf Schaltfläche Nr. 1 und klicken Sie Kopieren Sie Button-One-Stile.
Klicken Sie als Nächstes mit der rechten Maustaste auf Schaltfläche zwei und fügen Sie die Stile von Schaltfläche Nr. 1 ein.
Jetzt können wir die Schaltfläche zwei anpassen. Ändern Sie die Textfarbe.
- Textfarbe für Schaltfläche 121: #60FXNUMX
Passen Sie den Hintergrundverlauf für Schaltfläche zwei an.
- 30 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Verwenden Sie responsive Einstellungen, um den Hintergrundverlauf für mobile Geräte anzupassen.
- 0%: rgba(0,229,198,0)
- 100 %: #00e5c6
Passen Sie als Nächstes den Rand und die Polsterung für das Desktop-Design an.
- Schaltfläche Zwei Rand:
- Oben: 0px
- Unten: 0px
- Links: 30 %
- Polsterung der Taste Zwei:
- Oben: 16px
- Unten: 16px
- Links: 48em
- Rechts: 2em
Verwenden Sie die responsifq-Einstellungen, um verschiedene Rand- und Auffüllwerte für das mobile Design festzulegen.
- Button 5 Margin-links-mobil: XNUMX%
- Polsterung der Taste Zwei:
- Linksmobil: 35 %
- Rechts-Mobil: 5%
Benutzerdefiniertes CSS
Schließlich ist der Großteil der Designarbeit erledigt. Jetzt müssen wir benutzerdefiniertes CSS hinzufügen, um das Design zu vervollständigen. Wechseln Sie zur Registerkarte Fortgeschrittener und öffnen Sie den Abschnitt Benutzerdefinierte CSS.
Beginnen wir zunächst mit dem CSS für das Header-Bild. Dieses CSS ermöglicht die Anzeige des Header-Bildes über der Schaltfläche.
z-index: 1;
position:relative;
Als nächstes benutzerdefiniertes CSS im Titel. Wir werden unterschiedliche Werte für Desktop- und mobile Ansichten mithilfe von Responsive-Einstellungen festlegen.
Für Desktop-Computer:
padding-top:50px;
padding-bottom:30px;
Für Handy:
padding-top:5px;
padding-bottom:10px;
Fügen Sie abschließend das folgende CSS zu Schaltfläche eins und Schaltfläche zwei hinzu.
white-space: nowrap;
Endergebnis
Hier ist das endgültige Design für unseren Header-Hero-Bereich in voller Breite.
Lesen Sie auch: Divi: So erstellen Sie einen Bereich für Teammitglieder als Karussell
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Mit dem Fullwidth Header-Modul können Sie ganz einfach einen schönen Hero-Bereich erstellen, um für Ihre Dienste zu werben und Ihre zu erzählen Besucher wovon redest du? Website.
Integrierte Einstellungen machen es einfach, jeden Aspekt des Headers anzupassen, und es ist alles an einem Ort, sodass Sie nicht zwischen mehreren Modulen wechseln müssen, um Ihren Hero-Bereich zu erstellen.
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.
...
