Divi: So erstellen Sie die Blog-Seite mit dem Blog-Modul

von Gaeta Taffo | Divi, Divi Tutorials

Möchten Sie eine Blog-Seite mit dem Blog-Modul erstellen? de Divi?

Normalerweise jedes veröffentlichte Divi-Layoutpaket Elegant Themes bietet ein Blog-Layout, mit dem Sie Ihr Blog recht schnell erstellen können. Aber wollten Sie schon immer einmal sehen, wie Sie selbst eine dieser Blogseiten erstellen können? 

In diesem Artikel erfahren Sie, wie Sie mit dem Blog-Modul von Divi eine Blog-Seite erstellen. Wir werden jede Einstellung Schritt für Schritt durchgehen.

Fangen wir an!

Übersicht

Bevor wir beginnen, sehen wir uns zunächst einen Überblick darüber an, was wir erstellen werden.

Erstellen Sie eine neue Blog-Seite

Erstellen Sie eine neue Seite

Zuerst erstellen wir unsere Seite. Klicken Sie im WordPress-Dashboard auf Seiten > hinzufügen.

Geben Sie der Seite einen für Sie sinnvollen Titel.

• Titel der Seite: Blog auf Divi

Wechseln Sie zu Divi Builder

Klicken Sie auf die violette Schaltfläche in der Mitte der Seite: Verwenden Sie Divi Builder .

Fügen Sie einen Abschnitt für den Titel der Blog-Seite hinzu

Passen Sie den Abschnitt an

Wir beginnen mit dem ersten Abschnitt. Öffne sie Abschnitt Parameter .

Scrollen Sie zu Hintergrund und ändern Sie die Farbe in #f9f3fd. Geben Sie Blog als Admin-Label ein. Schließen Sie die Abschnittseinstellungen.

• Hintergrund: #f9f3fd
• Admin-Label: Blog

Titel der Blogseite erstellen

Dann fügen wir ein hinzu Linie für den Titel. Wählen Sie das grüne Symbol und wählen Sie die Zeile mit einer Spalte aus.

Fügen Sie dann ein hinzu Textmodul an der Linie.

Passen Sie das Textmodul für den Blog-Titel an

Öffne sie Parameter des Textbausteins und wählen Sie H1. Fügen Sie den Titel Unser Blog hinzu.

• Schriftart: Titel 1
• Text: Unser Blog

Dann geh zumRegisterkarte Stil Style und stellen Sie die Ausrichtung auf Zentriert ein. Wählen Sie für den H1-Titeltext Cormorant Infant als Schriftart und machen Sie ihn fett.

• Textausrichtung: Zentriert
• Kopftext: H1
• Header-Schriftart: Cormorant Infant
• Kopfzeile mit weichem Licht: Fetter Text

Stellen Sie die Farbe auf #442854, die Größe auf 130 Pixel und die Zeilenhöhe auf 0,8 cm ein.

• Farbe: #442854
• Desktop-Textgröße: 130px
• Zeilenhöhe: 0,8 m

Erstellen Sie den neuesten Artikel und den Abschnitt „Call to Action“.

Unser Bereich besteht aus dem neuesten Artikel und einer Anmelde-E-Mail. 

Fügen Sie eine neue Zeile hinzu unter unserer ersten Reihe und wählen Sie das Spaltendesign 2/3 links und 1/3 rechts.

Öffne sie Zeilenparameter indem Sie auf das Zahnradsymbol klicken.

Wähle ausRegisterkarte Stil Style, scrollen Sie zu Abstand und fügen Sie 0px zum unteren inneren Rand hinzu. Einstellungen schließen.

• Unterer interner Rand: 0px

Fügen Sie das vorgestellte Blog-Post-Modul hinzu und passen Sie es an

Dann fügen wir ein hinzu Blog-Modul . Dies wird unseren letzten Artikel enthalten. Klicken Sie auf das graue Plus-Symbol in der linken Spalte unserer neuen Zeile und fügen Sie das Blog-Modul hinzu.

Inhalt

Sous Inhalt , geben Sie 1 für die Anzahl der Beiträge ein.

• Anzahl der Positionen: 1

Elemente

Scrollen Sie zu Elemente und deaktivieren Sie Autor und Paginierung. Den Rest belassen wir bei den Standardeinstellungen.

• Autor anzeigen: nein
• Paginierung anzeigen: Nein

Bereitstellung

Wählen Sie dann die Registerkarte Stil Style und wählen Sie Vollbild für das Layout und deaktivieren Sie die angezeigte Bildüberlagerung.

• Modell: Vollbild
• Ausgewählte Bildüberlagerung: Deaktiviert

Titeltext

Scrollen Sie zu Titeltext . Wählen Sie H2 und wählen Sie Cormoran Infant. Wählen Sie Fett und ändern Sie die Farbe in #442854.

• Überschrift 2 einfügen: HXNUMX
• Schrifttitel: Cormorant Infant
• Titel mit weichem Licht: Fetter Text
• Titeltextfarbe: #442854

Stellen Sie die Schriftgröße auf 30 Pixel ein. Ändern Sie die Zeilenhöhe auf 1.1em.

• Größe: 30 Pixel für Desktop, 20 Pixel für Tablet, 18 Pixel für Telefon
• Höhe der Titelzeile: 1,1 em

Body text

Scrollen Sie dann nach unten zu Textkörper . Wählen Sie Cabin als Schriftart, ändern Sie die Farbe auf #442854 und ändern Sie die Zeilenhöhe auf 1,8 cm.

• Polizeikorps: Kabine
• Farbe des Textkörpers: #442854
• Höhe der Körperlinie: 1,8 cm

Textmetadaten

Scrollen Sie dann nach unten zu Text-Metadaten . Stellen Sie die Parameter wie folgt ein:

• Metadaten-Schriftart: Cormorant Infant
• Metadaten Schwaches Licht: Regulär
• Kopierstil für Metadaten: Keine
• Textfarbe für Metadaten: #442854
• Metadaten-Textgröße: Desktop 16 Pixel, Tablet 15 Pixel, Telefon 14 Pixel
• Zeilenhöhe der Metadaten: 1,8 cm

Abstand

Scrollen Sie dann nach unten zu Abstand und ändern Sie den oberen Rand auf 0vw.

• Obere Marge: 0vw

Schattenkiste

Scrollen Sie schließlich nach unten zu Schattenkiste und schalten Sie es aus.

• Schattenbox: Deaktivieren

Hinzufügen und Anpassen des Blog-E-Mail-Textmoduls

Jetzt gehen wir zur rechten Spalte und Erstellen Sie den Call to Action per E-Mail . Fügen Sie zunächst einen Textbaustein in der rechten Spalte hinzu. Klicken Sie auf das graue Plus-Symbol und suchen Sie nach Text.

Inhalt

Wählen Sie Überschrift 2 und geben Sie den Text Abonnieren Sie unsere Angebote ein.

• Schriftart: Überschrift 2
• Text: Abonnieren Sie unsere Angebote

Überschrift

Für den Texte des Titels, wählen Sie Center Alignment, wählen Sie H2, wählen Sie Cormorant Infant und stellen Sie es auf Bold ein.

• Textausrichtung: Zentriert
• Kopftext: H2
• Header-Schriftart: Cormorant Infant
• Kopfzeile für weiches Licht: Fett

Ändern Sie die Farbe auf #442854, die Größe auf 32px und die Zeilenhöhe auf 0,95em.

• Kopftextfarbe: #442854
• Textgröße der Kopfzeile: 32 Pixel
• Kopfzeilenhöhe: 0,95 em

Abstand

Scrollen Sie schließlich nach unten zu Abstand und füge 10 Pixel zum unteren Rand hinzu. Schließen Sie die Einstellungen des Textmoduls.

• Unterer Rand: 10px

Hinzufügen und Anpassen des Blog-E-Mail-Optionsmoduls

Dann gehen wir E-Mail-Formular erstellen . Fügen Sie ein E-Mail-Optionsmodul unter dem Textmodul in der rechten Spalte hinzu.

Inhalt

Entfernen Sie zuerst den Titel und den Textkörper.

• Titel: Keine
• Haupttext: keine

Scrollen Sie zu Email-Konto und fügen Sie Ihren Dienstanbieter hinzu.

Scrollen Sie dann nach unten zu Hintergrund und deaktivieren Sie die Hintergrundfarbe.

• Hintergrundfarbe verwenden: nein

Felder

Gehe zum Registerkarte Stil Style und ändern Sie die Hintergrundfarbe der Felder in rgba(255,255,255,0) und die Textfarbe in #442854.

• Hintergrundfarbfelder: rgba(255,255,255,0)
• Textfarbfelder: #442854

Scrollen Sie nach unten zu Schriftartoptionen und ändern Sie die Schriftart auf Kabine, die Größe auf 16px und die Zeilenhöhe auf 1,8em.

• Schriftfelder: Kabine
• Textgrößenfelder: 16 Pixel
• Feldreihenhöhe: 1,8 em

Passen Sie als Nächstes die abgerundeten Ecken der Felder auf 32 Pixel, die Rahmenbreite auf 2 Pixel und die Rahmenfarbe auf #442854 an.

• Steuerelemente für abgerundete Rechtecke: 32 Pixel
• Rahmenbreite Felder: 2px
• Rahmenfarbenfelder: #442854

Taste

Blättern Sie zu Schaltfläche und wählen Sie aus Verwenden Sie benutzerdefinierte Schaltflächenstile . Ändern Sie die Größe auf 18ps, die Schaltflächenfarbe auf Weiß und die Hintergrundfarbe der Schaltfläche auf #442854.

• Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 18 Pixel
• Schaltflächentextfarbe: #ffffff
• Hintergrundschaltfläche: #442854

Ändern Sie den Rahmenradius auf 50 Pixel, die Schriftart auf Cormorant Infant und machen Sie die Schrift fett.

• Randradius-Schaltfläche: 50px
• Schriftart-Schaltfläche: Kormoran-Kind
• Schaltfläche „Weiches Licht“: Fettgedruckter Text

Zum Schluss fügen wir einige Ränder hinzu. Geben Sie 20 Pixel für den oberen Rand, 12 Pixel für die obere und untere Füllung und 32 Pixel für die linke und rechte Füllung ein. Schließen Sie die E-Mail-Optionseinstellungen.

• Schaltfläche „Oberer Rand“: 20 Pixel
• Obere und untere Polsterungsschaltfläche: 12 px
• Linke und rechte Polsterung der Schaltfläche: 32px

Neue Zeile für Blog-Post-Liste hinzufügen

Wir gehen jetzt Artikelliste erstellen der Seite. Fügen Sie zunächst eine neue einspaltige Zeile unter unserem vorherigen Abschnitt hinzu.

Leitungseinstellungen

Greife auf ... zu Registerkarte Stil Style und fügen Sie 0px zum Vertex Inner Margin hinzu. Leitungseinstellungen schließen.

• Innerer Randscheitel: 0px

Fügen Sie Ihrer Linie ein Blog-Modul hinzu

Füge hinzu ein Blog-Modul zu Ihrer neuen Zeile, indem Sie auf das graue Plus-Symbol und dann auf Blog klicken.

Gestaltung des Blogpost-Feeds

Lassen Sie uns den Feed der Blog-Seite ändern.

Inhalt des Blog-Feeds

Öffne sie Einstellungen des Blog-Moduls und geben Sie 3 für die Anzahl der Beiträge ein. Auf diese Weise können Sie die Anzahl der Beiträge auswählen, die auf dem Bildschirm angezeigt werden.

Eine niedrigere Zahl, z. B. 3, ermöglicht es uns, uns auf die letzten Posts zu konzentrieren und die Seitengröße zu reduzieren. Dies ist eine gute Wahl, wenn Sie nicht oft posten oder die Seite sauberer halten möchten. Das Anzeigen von mehr Beiträgen, wie z. B. 6-9, ist eine gute Idee, wenn Sie sich auf den Blog-Fluss konzentrieren möchten.

• Anzahl Beiträge: 3

Geben Sie 1 für den Versatz ein. Dadurch wird Divi angewiesen, mit dem zweiten Blog-Beitrag zu beginnen, was uns daran hindert, denselben Artikel anzuzeigen, der bereits in dem darüber angezeigten Blog-Beitrag angezeigt wurde.

• Post-Offset-Nummer: 1

Elemente

Scrollen Sie zu Elemente . Aktivieren Sie vorgestelltes Bild, Datum, Kategorien-Snippet und Paginierung. Den Rest deaktivieren.

• Beitragsbild anzeigen: Ja
• Daten: Ja
• Kategorien: Ja
• Auszug: Ja
• Paginierung: Ja

Hintergrund

Zugang zu Hintergrund und setze die Hintergrundfarbe der Rasterkachel auf rgba(255,255,255,0)

• Hintergrundfarbe der Gitternetzkacheln: rgba (255,255,255,0)

Layout und Überlagerung

Dann geh zum Registerkarte Stil Style . Lassen Sie das Layout auf Raster eingestellt. Wir haben das Layout in voller Breite für den Blog-Beitrag über diesem gewählt. Wir werden das Rasterlayout für diesen Blog-Feed verwenden, was die Standardoption ist. Deaktivieren Sie das angezeigte Bild-Overlay.

• Layout: Gitter
• Ausgewählte Bildüberlagerung: Deaktiviert

Titeltext

Für den Titeltext , wählen Sie H2. Wählen Sie Cormorant Infant, setzen Sie es auf Bold und geben Sie #442854 als Farbe ein.

• Überschrift 2 einfügen: HXNUMX
• Schrifttitel: Cormorant Infant
• Titel mit weichem Licht: Fetter Text
• Titeltextfarbe: #442854

Wählen Sie 20 Pixel für die Textgröße. Stellen Sie die Zeilenhöhe auf 1,1 em ein.

• Titeltextgröße: Desktop 20px
• Höhe der Titelzeile: 1,1 em

Body text

Scrollen Sie zu Hauptteil und wählen Sie Kabine. Stellen Sie die Farbe auf #442854 ein.

• Polizeikorps: Kabine
• Farbe des Textkörpers: #442854

Stellen Sie die Zeilenhöhe auf 1,8 cm ein.

• Zeilenhöhe: 1,8 cm

Textmetadaten

Scrollen Sie zu Text-Metadaten und wählen Sie Cormorant Infant. Stellen Sie das Gewicht auf Normal, den Stil auf Keine und die Farbe auf #442854 ein.

• Metadaten-Schriftart: Cormorant Infant
• Metadaten Schwaches Licht: Regulär
• Kopierstil für Metadaten: Keine
• Textfarbe für Metadaten: #442854

• Metadaten-Textgröße: Desktop 16 Pixel, Tablet 15 Pixel, Telefon 14 Pixel
• Zeilenhöhe der Metadaten: 1,8 cm

Paginierungstext

Kommen wir nun zum Paginierung . Wählen Sie für die Schriftart Cormorant Infant, wählen Sie Bold und ändern Sie die Farbe in #442854.

• Font Show Paginierung: Cormorant Infant
• Paging Soft Light anzeigen: Fett
• Textfarbe Paginierung anzeigen: #442854

Abstand

Dann gehen wir weiter zum Abstand und fügen Sie oben den Rand 0vw hinzu. Dadurch wird verhindert, dass unser Modul das vorherige Modul überlappt.

• Obere Marge: 0vw

Grenze

Scrollen Sie zu Grenze und geben Sie 0px für alle vier Ecken ein. Dies gibt uns unsere quadratische Form für die Karte.

• Abgerundetes Rechteck-Rasterlayout: 0px

Schattenkiste

Scrollen Sie schließlich nach unten zu Box Schatten und deaktivieren Sie es. Blogeinstellungen schließen. Der Blogbereich ist fertig.

• Schattenbox: keine

Fügen Sie der Blog-Seite einen neuen Abschnitt „Call to Action“ hinzu

Dann gehen wir Erstellen Sie den Abschnitt "Call to Action". der Seite. Dieser Abschnitt enthält ein Parallax-Vollbild-Hintergrundbild, Kontaktinformationen und Social-Follow-Links.

Fügen Sie einen neuen Abschnitt hinzu

Klicken Sie dazu auf das blaue Symbol einen neuen regulären Abschnitt hinzufügen am Ende der Seite.

• Abschnitt: Regelmäßig

Gestalten Sie den Call-to-Action-Abschnitt

Öffne sie Abschnitt Parameter indem Sie auf das Zahnradsymbol klicken.

Hintergrund

Scrollen Sie zu Hintergrund und wählen Sie die Registerkarte Bild. Klicken Sie auf das graue Symbol mit der Bezeichnung Hintergrundbild.

Wählen Sie ein Vollbild aus Ihrer Medienbibliothek. Wählen Sie Parallaxeneffekt verwenden und dann CSS für die Parallaxenmethode.

• Hintergrundbild
• Parallax-Effekt verwenden: Ja
• Parallaxenmethode: CSS

Scrollen Sie nach unten zu Admin Label und geben Sie „Fußzeile“ in das Feld ein. Dies hilft Ihnen, die Abschnitte im Auge zu behalten.

• Admin-Tag: Fußzeile

Dann geh zum Registerkarte Stil Style.

• Interne Marge: 10vw (oben und unten)

Fügen Sie eine neue Zeile hinzu

Klicken Sie auf das grüne Plus-Symbol und Hinzufügen einer Zeile zu einer einzelnen Spalte für unsere Inhalte.

Sizing

Öffne sie Zeilenparameter und gehen Sie zur Registerkarte Stil.

• Maximale Breite: 320 Pixel

Titel Textbaustein

Unser Call-to-Action-Bereich ist mit einem Titel versehen. Um dies zu erstellen, einen Textbaustein hinzufügen an der Linie.

Passen Sie den Titeltext an

Fügen Sie Ihren Titel hinzu und ändern Sie die Schriftart in Überschrift 3.

• Schriftart: Überschrift 3
• Text: Alles über Divi

Überschrift

Greife auf ... zu Registerkarte Stil Style und scrolle zu Untertiteltext . Wählen Sie Mitte für die Ausrichtung, wählen Sie H3, wählen Sie Cormorant Infant, stellen Sie es auf Fett und wählen Sie Weiß als Farbe.

• Textausrichtung: Zentriert
• Kopftext: H3
• Header-Schriftart: Cormorant Infant
• Kopfzeile für weiches Licht: Fett
• Textfarbe der Kopfzeile: #ffffff

• Kopfzeilentextgröße: 42 Pixel für Desktop, 20 Pixel für Tablet, 16 Pixel für Telefon
• Kopfzeilenhöhe: 1,1 em

Abstand

Scrollen Sie schließlich nach unten zu Abstand und fügen Sie 10 Pixel zum unteren Rand hinzu. Schließen Sie die Moduleinstellungen.

• Unterer Rand: 10px

Textbaustein für die Adresse

Fügen Sie ein weiteres Textmodul hinzu für Ihre physische Adresse.

Gestalten Sie das Textmodul für die physische Adresse

Adresstext

Fügen Sie Ihre Adresse als Absatztext hinzu.

• Stil: Absatz
• Text: Ihre Adresse

Absatztext

Gehen Sie dann zu Text in der Registerkarte Stil Style und wählen Sie Cormorant Infant, semi bold, und setzen Sie es auf Weiß.

• Schriftart: Cormorant Infant
• Weicher heller Text: halbfett
• Textfarbe Text: #ffffff

• Text Textgröße: 28 Pixel für Desktop, 20 Pixel für Tablet, 16 Pixel für Telefon
• Textzeilenhöhe: 1,2 em

Fügen Sie das Modul hinzu, folgen Sie uns in sozialen Netzwerken

Unser letztes Modul ist das Modul Folgen Sie uns in sozialen Netzwerken . Fügen Sie es am Ende der Zeile hinzu.

Stilisieren Sie das Modul „Folgen Sie uns auf Social Media“.

Wir beginnen mit der Registerkarte Stil Style diesmal. Wählen Sie Mitte für die Modulausrichtung und ändern Sie die Symbolfarbe in #442854.

• Modulausrichtung: Mitte
• Symbolfarbe: #442854

Scrollen Sie zu Bordurieren und 23 Pixel für abgerundete Ecken hinzufügen.

• Abgerundetes Rechteck: 32px

Fügen Sie Ihre sozialen Netzwerke hinzu und passen Sie sie an

Gehen Sie jetzt zurück zu Registerkarte Inhalt und fügen Sie alle sozialen Netzwerke hinzu, die Sie einbeziehen möchten. Klicken Sie auf das graue Plus-Symbol.

Öffne sie Einstellungen für jedes Ihrer sozialen Netzwerke , wählen Sie das Netzwerk aus und fügen Sie den Link zu Ihrem Konto hinzu. Stellen Sie die Hintergrundfarbe auf #f9f3fd ein. Schließen Sie die Submoduleinstellungen.

• Soziales Netzwerk: Ihre Wahl
• Kontolink-URL: Ihr Link
• Hintergrundfarbe: #f9f3fd

Speichern Sie die Blogseite und beenden Sie den Visual Builder

Endlich, Seite speichern in der unteren rechten Ecke und wählen Sie Beenden Sie Visual Builder oben auf der Seite. Sie sind bereit, Ihre Arbeit zu sehen.

Vorschau der Blog-Seite

Hier sind unsere Ergebnisse.

Laden Sie DIVI jetzt herunter!!!

Fazit

So ! Dies ist unser Blick darauf, wie man eine Blog-Seite mit Divi erstellt. 

Divi Builder macht es einfach, interessante Layouts zu erstellen, und es gibt mehrere Möglichkeiten, jedes der Module zu verwenden. Wie in diesem Tutorial untersucht wurde, ist es möglich, mehrere Versionen des Blog-Moduls auf derselben Seite zu verwenden, um den Blog-Feed auf unterschiedliche Weise anzuzeigen.

Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich aber auch beraten 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.

...

Divi: So erstellen Sie ein gleitendes und responsives Seitenmenü

von Gaeta Taffo | Divi, Divi Tutorials

Möchten Sie in Divi ein verschiebbares und reaktionsschnelles Seitenmenü erstellen?

Beim Erstellen einer Website fragt man sich oft, welche Art von Header erstellt werden soll. Am häufigsten wird im Web die horizontale Menüleiste oben verwendet, aber es gibt auch andere Optionen, wie z. B. ein Schiebemenü. 

Schiebemenüs helfen Ihnen meistens dabei, den Platz zu begrenzen, der von der globalen Kopfzeile eingenommen wird. So können Sie ein Schiebemenü erscheinen lassen, wenn Ihre Besucher auf das Hamburger-Symbol in der oberen rechten Ecke klicken. 

Daher hilft Ihnen die Verwendung eines Slideout-Menüs, Ihrer Website zusätzliche Interaktion hinzuzufügen.

In diesem Tutorial zeigen wir Ihnen daher, wie Sie eines mit Divis Theme Builder erstellen.

Fangen wir an!

Übersicht

Bevor wir in dieses Tutorial eintauchen, schauen wir uns zuerst das Ergebnis an, das wir erhalten werden.

Gehen Sie zum Theme Builder und erstellen Sie einen globalen Header

Gehen Sie zum Theme-Builder

Um zu beginnen, gehen Sie im Divi-Menü in Ihrem WordPress-Dashboard zu Theme Builder und klicken Sie auf „Globalen Header hinzufügen“.

Erstellen Sie den globalen Header

Fahren Sie fort, indem Sie „Globale Kopfzeile erstellen“ auswählen.

Erstellen Sie einen Kopfzeilenstil

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und machen Sie die Hintergrundfarbe transparent.

• Hintergrund: rgba (255,255,255,0)

Abstand

Wechseln Sie zur Registerkarte Stil und entfernen Sie alle unteren und oberen Ränder.

• Innerer Randscheitel: 0px
• Unterer interner Rand: 0px

Post

Als Nächstes ändern wir die Position des Abschnitts, indem wir zur Registerkarte Erweitert gehen und die Positionseinstellungen ändern.

• Position: Fest
• Ort: Oben in der Mitte

Fügen Sie die erste Zeile hinzu

Struktur der Spalte

Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Maximale Breite: 97%
• Maximale Breite: 100%

Abstand

Ändern Sie die Abstandseinstellungen.

• Maximale interne Marge: 1 %
• Unterer interner Rand: 0px

Hauptelement

Gehen Sie als Nächstes zur Registerkarte „Erweitert“ und fügen Sie dem Hauptzeilenelement zwei Zeilen CSS-Code hinzu. Dies hilft uns, den Spalteninhalt in unserer Zeile vertikal auszurichten.

display: flex;

align-items: center;

Fügen Sie Spalte 1 ein Bildmodul hinzu

Logo herunterladen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie Ihr Logo hoch.

Fügen Sie in Spalte 3 einen Textbaustein hinzu

Fügen Sie dem Inhaltsbereich 3 Leerzeichen hinzu

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe des Moduls.

• Hintergrund: rgba (0,0,0,0.04)

Texteinstellungen

Wechseln Sie als Nächstes zur Registerkarte Stil und entfernen Sie die Textzeilenhöhe. Dies wird uns helfen, die volle Kontrolle über die von uns hinzugefügten Bereiche zu haben.

• Textzeilenhöhe: 0em

Sizing

Wir werden die Moduldimensionierungsparameter ändern.

• Maximale Breite: 120 Pixel
• Textausrichtung: rechts

Abstand

Und wir werden die Modulparameter vervollständigen, indem wir das Modul in ein Quadrat umwandeln. Dazu verwenden wir benutzerdefinierte Auffüllwerte in den Abstandseinstellungen.

• Innerer Randscheitel: 40px
• Unterer interner Rand: 60px
• Linker innerer Rand: 40px
• Innerer Rand rechts: 40px

Fügen Sie die zweite Zeile hinzu

Struktur der Spalte

Nächste Reihe! Wir werden diese Linie verwenden, um unser gesamtes Gleitmenü zu gestalten. Verwenden Sie die folgende Spaltenstruktur:

Hintergrundfarbe

Ohne Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe wie folgt:

• Hintergrund: #e7e0e2

Hintergrundbild

Wir verwenden auch ein gemustertes Hintergrundbild. Sie können ein Hintergrundmuster Ihrer Wahl verwenden.

• Hintergrundbildgröße: tatsächliche Größe
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Wiederholen

Sizing

Wechseln Sie als Nächstes zur Registerkarte Stil und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Bundstegbreite verwenden: Ja
• Spaltenabstand: 1
• Maximale Breite: 20 % (Desktop), 40 % (Tablet), 60 % (Telefon)
• Höhe: 100 vh

Abstand

Ändern Sie auch die Abstandseinstellungen auf verschiedenen Bildschirmgrößen.

• Gipfelinterne Marge: 10 vw (Desktop), 30 vw (Tablet), 40 vw (Telefon)

Grenze

Und vervollständigen Sie die Linienparameter, indem Sie einen linken Rand hinzufügen.

• Linke Randbreite: 10px
• Linke Randfarbe: #24394a
• Linker Rahmenstil: Doppelt

Fügen Sie der Spalte ein Textmodul hinzu

Inhalt hinzufügen

Es ist an der Zeit, den ersten Textmodul-Menüpunkt hinzuzufügen! Fügen Sie die Kopie dem Inhaltsbereich hinzu.

Ajouter un lien

Fahren Sie fort, indem Sie dem Menüpunkt einen relevanten Link hinzufügen.

• Modul-Link-URL: #

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe.

• Hintergrund: rgba (216,210,212,0.35)

Texteinstellungen

Wechseln Sie als nächstes auf die Registerkarte Style'3 und ändern Sie die Texteinstellungen wie folgt:

• Schriftart: Domine
• Weicher heller Text: Fetter Text
• Textfarbe Text: #000000
• Text Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Textausrichtung: Zentriert

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Abstandswerte auf verschiedenen Bildschirmgrößen hinzufügen.

• Unterer Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Maximale interne Marge: 1vw
• Unterer Innenrand: 1vw

Textbaustein klonen (1 Baustein pro Menüpunkt)

Wenn Sie das Textmodul für den ersten Menüpunkt fertig gestellt haben, können Sie es so oft wie nötig klonen. Stellen Sie nur sicher, dass Ihre Module die Höhe des Fensters nicht überschreiten.

Bearbeiten Sie den Inhalt und die Links des doppelten Textmoduls

Bearbeiten Sie den Inhalt und die Links jedes Duplicate Text-Moduls.

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in dieser Reihe brauchen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ajouter un lien

Fügen Sie auch einen Link hinzu.

• Button-Link-URL: #

Ausrichtung

Wechseln Sie zur Registerkarte Stil und ändern Sie die Schaltflächenausrichtung.

• Schaltflächenausrichtung: zentriert

Tasteneinstellungen

Fahren Sie fort, indem Sie das Button-Modul wie folgt anpassen:

• Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,7 vw (Desktop), 1,5 vw (Tablet), 2,5 vw (Telefon)
• Textfarbe der Schaltfläche: #000000
• Hintergrund-Button: rgba (0,0,0,0)
• Farbe des Schaltflächenrahmens: #24394a
• Randradius-Schaltfläche: 0 Pixel
• Buchstabenabstand der Schaltfläche: 4px

• Schriftart-Schaltfläche: Keine öffnen
• Schaltfläche „Weiches Licht“: Fettgedruckter Text
• Schaltfläche „Stil kopieren“: TT

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Abstandswerte auf verschiedenen Bildschirmgrößen hinzufügen.

• Obere Marge: 5vw
• Maximale interne Marge: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Innenrand Unten: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Interner Spielraum links: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• Rechter Innenrand: 1,8 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)

Schiebefunktion hinzufügen

CSS-ID zum Menüsymbol-Textmodul hinzufügen

Jetzt, da wir alle Elemente an Ort und Stelle haben, ist es an der Zeit, den responsiven Sliding-Menü-Effekt zu erstellen! Öffnen Sie zunächst das Textmodul (das die Bereiche enthält) in der dritten Spalte Ihrer ersten Zeile und verwenden Sie eine benutzerdefinierte CSS-ID auf der Registerkarte „Erweitert“. Wir werden diese CSS-ID verwenden, um eine Klickfunktion in unserem Code zu erstellen.

• CSS-ID: slide-in-open

Fügen Sie der Zeile 2 eine CSS-Klasse hinzu

Öffnen Sie dann die zweite Zeile, gehen Sie zur Registerkarte Erweitert und fügen Sie eine benutzerdefinierte CSS-Klasse hinzu. Wenn Sie darauf klicken, verschiebt sich die Linie.

• CSS-Klasse: Slide-in-Menu-Container

Ändern Sie die Positionierung von Zeile 2

Auch diese Linie werden wir neu positionieren. Beachten Sie, wie der horizontale Versatz der Linienbreite auf verschiedenen Bildschirmgrößen in den Größeneinstellungen entspricht.

• Position: Absolut
• Ort: Oben rechts
• Horizontaler Versatz: -20 % (Desktop), -40 % (Tablet), -60 % (Telefon)

Ändern Sie die Deckkraft von Zeile 2

Und bringen Sie die Deckkraft in einem Standardzustand auf 0.

opacity: 0;

Fügen Sie das Code-Modul zur zweiten Spalte der ersten Zeile hinzu

CSS-Code einfügen

Um den Klickfunktionseffekt zu erstellen und die Notenzeilen unseres Hamburger-Symbols zu gestalten, benötigen wir etwas CSS-Code. Fügen Sie der zweiten Spalte Ihrer ersten Zeile ein Codemodul hinzu und Platzieren Sie die folgenden CSS-Codezeilen zwischen den Style-Tags, wie Sie auf dem Druckbildschirm unten sehen können:

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

JQuery-Code einfügen

Wir müssen auch etwas JQuery für die Klickfunktion hinzufügen. Stell sicher, dass du Platzieren Sie Code zwischen script-Tags , wie Sie im Druckbildschirm unten sehen können:

jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });

Speichern Sie Änderungen am Theme Builder und zeigen Sie das Ergebnis auf der Website an

Sobald Sie alle Elemente Ihres globalen Headers vervollständigt haben, müssen Sie nur noch alle Änderungen speichern und das Ergebnis auf Ihrer Website anzeigen!

Übersicht

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.

Fazit

Abschließend haben wir Ihnen in diesem Artikel gezeigt, wie Sie mit dem Theme Builder von Divi ein responsives Schiebemenü erstellen. Dafür haben wir die besten integrierten Elemente und Optionen von Divi mit einem benutzerdefinierten Klickfunktionscode kombiniert. Sie können sich also auf das Entwerfen des Slide-Out-Menüs konzentrieren und den Code den funktionalen Teil des globalen Headers erledigen lassen! 

Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Divi: So fügen Sie einem globalen Header ein Kontaktformular hinzu

von Gaeta Taffo | Divi, Divi Tutorials

Müssen Sie ein Kontaktformular zu einer globalen Kopfzeile hinzufügen?

Wenn Sie mit dem Theme Builder von Divi einen benutzerdefinierten Header für Ihre Website erstellen, suchen Sie nach der perfekten Möglichkeit, einen CTA (Call to Action) hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, ein Dropdown-Kontaktformular hinzuzufügen. 

Dies trägt dazu bei, das Gesamtbild Ihrer Kopfzeile sauber zu halten, und bietet gleichzeitig die Möglichkeit, Kontakt aufzunehmen, ohne scrollen zu müssen. 

In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi und etwas JQuery- und CSS-Code ein Dropdown-Kontaktformular erstellen.

Fangen wir an!

Übersicht

Bevor wir in dieses Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir erhalten werden.

Erstellen Sie einen globalen Header

Gehen Sie zum Theme-Builder

Gehen Sie im Divi-Menü in Ihrem WordPress-Dashboard zu Theme Builder und klicken Sie auf „Globalen Header hinzufügen“.

Wählen Sie „Globale Kopfzeile erstellen“.

Erstellen Sie einen Kopfzeilenstil

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrund: #FFFFFF

Abstand

Entfernen Sie dann die standardmäßigen oberen und unteren inneren Ränder aus dem Abschnitt.

• Innerer Randscheitel: 0px
• Unterer interner Rand: 0px

Schattenkiste

Wenden Sie auch einen subtilen Kastenschatten an.

• Box Shadow Blue Stärke: 50px
• Schriftfarbe Untertitel: rgba(0,0,0,0.15)

Fügen Sie eine neue Zeile hinzu

Struktur der Spalte

Fügen Sie dem Abschnitt eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Sizing

Öffnen Sie, ohne Module hinzuzufügen, die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Bundstegbreite verwenden: Ja
• Spaltenabstand: 1
• Spaltenhöhen harmonisieren: Ja
• Maximale Breite: 95%
• Maximale Breite: 100%

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

• Maximale interne Marge: 1vw
• Unterer Innenrand: 1vw

Hauptelement

Richten Sie den gesamten Spalteninhalt aus, indem Sie dem Hauptzeilenelement eine einzelne Zeile CSS-Code hinzufügen.

align-items: center;

Z Index von Spalte 2

Wir stellen auch sicher, dass die zweite Spalte einen höheren Z-Index-Wert für responsives Design hat.

• Z-Index: 12

Bildmodul zu Spalte 1 hinzufügen

Logo herunterladen

Es ist Zeit, Module hinzuzufügen! Beginnen Sie mit einem Bildmodul in Spalte 1. Laden Sie ein Logo hoch.

Ausrichtung

Ändern Sie dann die Ausrichtung des Moduls.

• Bildausrichtung: Zentriert

Sizing

Ändern Sie auch die Breite.

• Maximale Breite: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Wählen Sie Menü

In der zweiten Spalte fügen wir ein Menümodul hinzu.

Bereitstellung

Wechseln Sie auf die Registerkarte Modulstil und ändern Sie den Layoutstil.

• Stile: Zentriert

Menütexteinstellungen

Ändern Sie dann die Texteinstellungen im Modulmenü.

• Schriftmenü: Öffnen Sie Keine
• Menü für schwaches Licht: halbfett
• Menütextfarbe: #000000
• Menütextgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Buchstabenabstand im Menü: 1px

Texteinstellungen für Dropdown-Menüs

Ändern Sie als Nächstes die Linienfarbe aus dem Dropdown-Menü.

• Zeilenfarbe des Dropdown-Menüs: #007dff

Symbole

Ändern Sie die Farbe des Hamburger-Menüsymbols.

• Farbe des Hamburger-Menüsymbols: #007dff

Textbaustein zu Spalte 3 hinzufügen

Nachricht hinzufügen

Auf zum dritten Modul! Fügen Sie ein Textmodul mit einer Nachricht Ihrer Wahl hinzu.

Hintergrundfarbe

Fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #007dff

Texteinstellungen

Wechseln Sie in den Reiter Moduldesign und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Weicher heller Text: Fett
• Textfarbe Text: #ffffff
• Text Textgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Textausrichtung: Zentriert

Sizing

Ändern Sie dann die Modulgrößenparameter.

• Maximale Breite: 33%
• Modulausrichtung: Mitte

Abstand

Fügen Sie als Nächstes benutzerdefinierte obere und untere Polsterung hinzu.

• Höchste interne Marge: 0,8 vw (Desktop), 2 vw (Tablet und Telefon)
• Interne Marge niedrig: 0,8 vw (Desktop), 2 vw (Tablet und Telefon)

Grenze

Vervollständigen Sie die Modulparameter, indem Sie einen Rahmenradius hinzufügen.

• Abgerundetes Rechteck: 100px

Fügen Sie in Spalte 3 einen weiteren Textbaustein hinzu

Fügen Sie dem Inhaltsbereich ein Symbol hinzu

Kommen wir zum nächsten Modul, einem weiteren Textmodul. Fügen Sie im Inhaltsbereich folgendes Pfeilsymbol hinzu: '▼'.

Texteinstellungen

Wechseln Sie in den Reiter Moduldesign und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textfarbe: #007fff
• Text Textgröße: 3vw
• Textzeilenhöhe: 0em
• Textausrichtung: Zentriert

Z-Index

Lassen Sie uns auch den Z-Index des Moduls erhöhen.

• Z-Index: 11

Fügen Sie das Kontaktformular-Modul zu Spalte 3 hinzu

Fügen Sie Felder Ihrer Wahl in voller Breite hinzu

Das nächste und letzte Modul, das wir in der dritten Spalte benötigen, ist ein Kontaktformular-Modul. Fügen Sie alle benötigten Felder in voller Breite hinzu.

Fügen Sie einen Titel hinzu

Verwenden Sie auch einen Titel.

Hintergrundfarbe

Als nächstes ändern wir die Hintergrundfarbe.

• Hintergrundfarbe: #e7f2ff

Feldeinstellungen

Gehen wir zur Registerkarte Stil des Moduls und ändern die Feldeinstellungen.

• Felder mit Hintergrundfarbe: #ffffff
• Feldtextfarbe: #dddddd
• Fokustextfarbe: #007dff
• Vertex Padding Fields: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Füllfelder: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schriftfelder: Keine öffnen

• Felder Textgröße: 0,7 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)

Einstellungen für den Titeltext

Bearbeiten Sie die Titeltexteinstellungen.

• Überschrift 3 einfügen: HXNUMX
• Titel mit weichem Licht: Fetter Text
• Textausrichtung: zentriert
• Titeltextfarbe: #007dff
• Titel Textgröße: 1 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Höhe der Titelzeile: 1,6 em

Captcha-Texteinstellungen

Mit Captcha-Texteinstellungen.

• Schriftart-Captcha: Öffnen Sie Sans
• Captcha-Textfarbe: #007dff

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche anpassen.

• Benutzerdefinierte Stile für Button verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Textfarbe der Schaltfläche: #ffffff
• Hintergrund-Schaltfläche: #007dff
• Schaltfläche Rahmenbreite: 0 Pixel
• Randradius der Schaltfläche: 100 px

• Schriftart-Schaltfläche: Keine öffnen
• Schaltfläche „Weiches Licht“: Fettgedruckter Text

• Knopfrand: 1vw
• Obere Polstertaste: 1vw (Desktop), 2vw (Tablet und Telefon)
• Untere Polstertaste: 1vw (Desktop), 2vw (Tablet und Telefon)
• Linke Pad-Taste: 2vw (Desktop), 7vw (Tablet und Telefon)
• Rechte Pad-Taste: 2vw (Desktop), 7vw (Tablet und Telefon)

Abstand

Verwenden Sie benutzerdefinierte Auffüllwerte auf verschiedenen Bildschirmgrößen.

• Maximaler interner Headroom: 4vw (Desktop), 6vw (Tablet und Telefon)
• Interner Rand Unten: 4vw (Desktop), 6vw (Tablet und Telefon)
• Linker Innenrand: 2vw (Desktop), 6vw (Tablet und Telefon)
• Rechter Innenrand: 2vw (Desktop), 6vw (Tablet und Telefon)

Grenze

Ändern Sie dann die Rahmeneinstellungen.

• Abgerundetes Rechteck eingeben: 10px

Hauptelement, Kontakttitel und Captcha-CSS

Vervollständigen Sie die Moduleinstellungen, indem Sie einige kleine CSS-Änderungen auf der Registerkarte „Erweitert“ hinzufügen.

Hauptelement:

Kontakttitel:

Captcha:

Passen Sie Elemente an, um mit einem Klick ein Kontaktformular zu erstellen

Fügen Sie die Höhe von Spalte 3 hinzu

Sobald Sie alle Module an Ort und Stelle haben, ist es an der Zeit, den Effekt zu erstellen. Der erste Schritt, um das gewünschte Ergebnis zu erzielen, besteht darin, die 3-Spalten-Einstellungen zu öffnen und auf der Registerkarte „Erweitert“ eine benutzerdefinierte Reaktionshöhe hinzuzufügen.

Schreibtisch :

Tablette:

Telefon:

Fügen Sie der Schaltfläche und dem Pfeil eine CSS-Klasse hinzu

Als Nächstes fügen wir dieselbe CSS-Klasse den ersten beiden Textbausteinen in Spalte 3 hinzu.

• CSS-Klasse: show-contact

Fügen Sie dem Kontaktformular eine CSS-Klasse hinzu

Wir benötigen auch eine benutzerdefinierte CSS-Klasse für das Kontaktformularmodul.

• CSS-Klasse: Kontaktformular-Modul

Kontaktformularmodul ausblenden

Fahren Sie fort, indem Sie dem Hauptelement des Kontaktformularmoduls eine zusätzliche CSS-Codezeile hinzufügen. Dadurch können wir das Modul vor dem Klicken ausblenden.

Codemodul zu Spalte 3 mit JQuery- und CSS-Code hinzufügen

Und um die Klickfunktion zu erstellen, benötigen wir JQuery-Code. Wir werden auch benutzerdefinierten CSS-Code verwenden. Fügen Sie in Spalte 2 mit dem Code ein neues Codemodul hinzu. Achten Sie darauf, JQuery-Code zwischen script-Tags und CSS-Code zwischen style-Tags zu platzieren.

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

Übersicht

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.

Fazit

In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrer benutzerdefinierten Kopfzeile ein Dropdown-Kontaktformular hinzufügen.

Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Divi: So erstellen Sie eine globale Kopfzeile mit dem Vollbildmenümodul

von Gaeta Taffo | Divi, Divi Tutorials

Möchten Sie mit dem Vollbildmenümodul in Divi eine globale Kopfzeile erstellen?

Der Header ist eines der wichtigsten Elemente jeder Website und steht im Mittelpunkt die Benutzererfahrung. Das Navigationsmenü gibt Ihren Benutzern eine Vorstellung davon, was sie auf Ihrer Website erwarten können, und hilft ihnen, die benötigten Informationen zu finden. 

Darüber hinaus kann eine sekundäre Menüleiste ein großartiger Ort sein, um einen Aufruf zum Handeln hervorzuheben oder ein Angebot zu bewerben. Ganz zu schweigen davon, dass der Header einer der wichtigsten Teile Ihrer Website ist, da er normalerweise auf jeder Seite erscheint. Dies ist eine großartige Gelegenheit, Ihr Branding zu präsentieren und einen konsistenten Header mit dem Design des Rests Ihrer Website zu erstellen.

Mit den Theme Builder-Optionen von Divi können Sie einen benutzerdefinierten globalen Header erstellen und das Erscheinungsbild Ihrer Header- und Menümodule auf Ihrer gesamten Website anpassen. 

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Vollbild-Menümodul von Divi einen globalen Header erstellen.

Lassen Sie uns beginnen!

Übersicht

Hier ist eine Vorschau des globalen Headers, den wir entwerfen werden.

Öffnen Sie den Theme-Builder

Da wir in diesem Beispiel einen globalen Header erstellen, navigieren wir zu „Theme Builder“, den Sie im WordPress Divi-Menü finden. Wählen Sie Globale Kopfzeile hinzufügen und dann Globale Kopfzeile erstellen aus.

Erstellen Sie die sekundäre Menüleiste

Wenn Sie das globale Header-Layout zum ersten Mal öffnen, ist es mit einem regulären Abschnitt vorinstalliert. Wir ändern dies zu unserer sekundären Menüleiste, die sich über unserem Menü in voller Breite befindet und einen Call-to-Action-Text und eine Schaltfläche enthält.
Öffnen Sie zunächst die Abschnittseinstellungen und fügen Sie die Hintergrundfarbe hinzu.

• Hintergrund: #92A8A1

Als nächstes der Abschnittsrand.

• Innerer Randscheitel: 0px
• Unterer interner Rand: 0px

Fügen Sie nun eine Zeile ein. Für dieses Beispiel verwenden wir das unten gezeigte Layout.

Harmonisieren Sie in den Zeileneinstellungen unter Sizing des Reiters Style die Spaltenhöhen.

• Spaltenhöhen harmonisieren: JA

Legen Sie als Nächstes den oberen und unteren Rand wie folgt fest:

• Oberer innerer Rand: 5px
• Unterer Innenrand: 5px

Da unsere sekundären Header-Elemente vertikal ausgerichtet werden sollen, fügen wir dem Hauptzeilenelement benutzerdefiniertes CSS hinzu.

1. align-items:center;

Nachdem unsere Linie nun eingerichtet ist, können wir die Module für unseren Inhalt einfügen. Fügen Sie zunächst auf der linken Seite einen Textbaustein ein.

Textinhalt bearbeiten. Dies ist der perfekte Ort, um einen Aufruf zum Handeln einzufügen oder ein Angebot zu bewerben.

• Text: "Treten Sie unserer Mailingliste bei, um 10 % Rabatt auf Ihre Bestellung zu erhalten!" »

Greifen Sie auf die Registerkarte Stil des Textmoduls zu und ändern Sie die Parameter wie folgt:

• Schriftart „Text“: Poppins
• „Text“ Schwaches Licht: Mittel
• Textfarbe "Text": #FFFFFF

Als nächstes fügen Sie rechts das Button-Modul hinzu.

Schaltflächentext hinzufügen.

• Text: "Holen Sie sich ein kostenloses Angebot"

Richten Sie auf der Registerkarte „Stil“ die Schaltfläche in der Mitte aus.

• Tastenausrichtung: Mitte

Lassen Sie uns nun das Aussehen der Schaltfläche anpassen.

• Benutzerdefinierte Stile für „Button“ verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #FFFFFF
• Hintergrundschaltfläche: #2F5349

• Breite des Button-Rahmens: 0px
• Randradius-Schaltfläche: 50px
• Buchstabenabstand der Schaltfläche: 1px
• Button-Schriftart: Poppins

Fügen Sie das Modul Vollbildmenü hinzu

Nachdem das sekundäre Menü erstellt wurde, können wir zum Hauptmenü übergehen. Wir werden das Menü mit dem Modul Vollbildmenü erstellen. Fügen Sie der globalen Kopfzeile einen neuen Abschnitt „Vollbild“ hinzu.

Wählen Sie das Modul Vollbildmenü aus und fügen Sie es ein

Als Nächstes passen wir die Einstellungen des Vollbildmenüs an.

• Farbe des aktiven Links: #2F5349
• Schriftmenü: Poppins
• Dim Light Menu: Semi Bold
• Menü Stil kopieren: TT
• Menütextfarbe: #000000

• Textfarbe des Hover-Menüs: #2F5349
• Menütextgröße: 15px
• Buchstabenabstand im Menü: 2px

Ändern Sie die Farbe des Hamburger-Menüsymbols in Schwarz.

• Farbe des Hamburger-Menüsymbols: #000000

Bevor wir das Logo zu unserem Menü hinzufügen, ändern wir die Größenoptionen. Wir werden die integrierten Responsive-Optionen von Divi verwenden, um eine andere maximale Höhe für PC und Handy festzulegen.

• Maximale Logohöhe auf PC: 3vw

• Maximale Logohöhe auf Mobilgeräten: 6vw

Fügen Sie nun Ihr Logo zum Vollbildmenü hinzu.

Schließlich möchten wir, dass das Hauptmenü oben auf dem Bildschirm bleibt, wenn der Benutzer durch die Website scrollt, also verwenden wir dafür die integrierten Sticky-Sticky-Einstellungen von Divi.

• Klebeposition: Oben kleben

Damit ist unser globales Header-Design komplett.

Erstellen Sie eine neue Seite mit einem vordefinierten Layout

Um die Kopfzeile und das Menü in voller Breite in Aktion zu sehen, erstellen wir eine neue Seite mit einem vordefinierten Layout aus der Divi-Bibliothek. Für dieses Beispiel verwenden wir die Flooring Home Page aus dem Paket Grundriss.

Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.

Wir verwenden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek, also wählen Sie Layout auswählen.

Suchen Sie das Layout „Bodenbelag-Startseite“ und wählen Sie es aus.

Wählen Sie „Layout auswählen“, um das Layout zu Ihrer Seite hinzuzufügen.

Jetzt ist das Design fertig!

Endergebnis

Fazit

Wie bereits erwähnt, bilden die Kopfzeile und das Navigationsmenü das Herzstück der Benutzererfahrung Ihrer Website. Sie haben jetzt gesehen, wie einfach es ist, mit dem Divi-Modul "Vollbildmenü" einen beeindruckenden Gesamtkopf zu entwerfen. 

Glücklicherweise gibt Ihnen der Theme Builder von Divi die Kontrolle über jeden Aspekt des Menüs und der Kopfzeile Ihrer Website, und Sie können mit nur wenigen Klicks völlig benutzerdefinierte und einzigartige Designs erstellen.

Haben Sie die globalen Kopfzeilenoptionen von Divi verwendet, um Ihre Kopfzeile und Ihr Navigationsmenü anzupassen? Sag uns deine Meinung in den Kommentaren!