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

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

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 Blog-Seite mit dem Divi-Blog-Modul

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
Erstellen Sie eine Blog-Seite mit dem Divi-Blog-Modul

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
Erstellen Sie eine Blog-Seite mit dem Divi-Blog-Modul

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.

Erstellen Sie eine Blog-Seite mit dem Divi-Blog-Modul

Ö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
Erstellen Sie eine Blog-Seite mit dem Divi-Blog-Modul

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.

Erstellen Sie eine Blog-Seite mit dem Divi-Blog-Modul

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ü

Divi: So erstellen Sie ein gleitendes und responsives Seitenmenü

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.

Erstellen Sie ein verschiebbares und reaktionsschnelles Seitenmenü in Divi

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)
Erstellen Sie ein verschiebbares und reaktionsschnelles Seitenmenü in Divi

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
Erstellen Sie ein verschiebbares und reaktionsschnelles Seitenmenü in Divi

Ä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)
Erstellen Sie ein verschiebbares und reaktionsschnelles Seitenmenü in Divi

Ä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

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

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.

Kontaktformular zum globalen Header in divi hinzufügen

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
Kontaktformular zum globalen Header in divi hinzufügen

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
Kontaktformular zum globalen Header hinzufügen

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
Kontaktformular zum globalen Header hinzufügen

Sizing

Ändern Sie dann die Modulgrößenparameter.

  • Maximale Breite: 33%
  • Modulausrichtung: Mitte
Kontaktformular zum globalen Header hinzufügen

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)
Kontaktformular zum globalen Header hinzufügen

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: '▼'.

Kontaktformular zum globalen Header hinzufügen

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
Kontaktformular zum globalen Header hinzufügen

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:

01border-radius: 20px;

Kontakttitel:

01margin-bottom: 1vw;

Captcha:

01margin-top: 1.5vw;

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 :

01height: 3vw;

Tablette:

01height: 5vw;

Telefon:

01height: 6vw;

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.

01display: none;

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.

Kontaktformular zum globalen Header in divi hinzufügen

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 zeigen Sie Artikelauszüge beim Hover an

Divi: So zeigen Sie Artikelauszüge beim Hover an

Möchten Sie wissen, wie Sie Artikelauszüge beim Hover in Divi anzeigen können?

Die Vorschau von Blogpost-Snippets beim Hovern kann eine effektive Möglichkeit sein, ein kompaktes Rasterlayout für Ihre Blogposts beizubehalten, ohne diese Snippets ganz aufzugeben. 

Die Idee ist also, Snippets zunächst auszublenden und sie dann anzuzeigen, wenn Sie mit der Maus über einen Beitrag im Raster fahren. Daher können Leser mehr Posts sehen und gleichzeitig Ausschnitte der Posts sehen, die sie interessieren.

In diesem Tutorial zeigen wir Ihnen also, wie Sie diese Blog-Post-Snippets für den Hover-Toggle-Effekt in Divi erstellen. 

Lassen Sie uns beginnen!

Übersicht

Hier ist zunächst ein Überblick darüber, was wir in diesem Tutorial erstellen werden.

Auszüge von Artikeln auf Hover in Divi anzeigen

Erstellen des Blog-Modul-Layouts

Zuerst müssen wir ein grundlegendes Layout für unsere Blogbeiträge erstellen. Für dieses Tutorial fügen wir einer Spalte eine Zeile hinzu und fügen ein Blog-Modul darin ein.

Erstellen Sie eine Linie

Fügen Sie zunächst eine Zeile mit einer Spalte in den Abschnitt ein

Linienbreite

Gehen Sie dann zu den Leitungseinstellungen. Ändern Sie dann auf der Registerkarte „Stil“ unter „Größe“ die Breiten wie folgt:

  • Maximale Breite: 90 %
  • Maximale Breite: 1200px
Auszüge von Artikeln auf Hover in Divi anzeigen

Fügen Sie ein Blog-Modul hinzu

Fügen Sie dann ein Blog-Modul in die Spalte der zuvor erstellten Zeile ein.

Blog-Modul-Einstellungen

Gehen Sie dann zu den Einstellungen des Blog-Moduls, setzen Sie auf der Registerkarte Inhalt unter Elemente die Option „Weiterlesen-Schaltfläche anzeigen“ auf „Ja“.

Gehen Sie nun auf die Registerkarte Stil, wählen Sie unter Vorlage die Vorlage „Raster“ als Layout für den Blog aus.

Gehen Sie schließlich zur Registerkarte Erweitert und fügen Sie die folgende CSS-Klasse hinzu: 

CSS-Klasse: Toggle-Blog-Auszug

Anschließend verwenden wir diese Klasse im nächsten Schritt als Selektor für unseren benutzerdefinierten CSS-Code.

Fügen Sie benutzerdefiniertes CSS mit dem Code-Modul hinzu.

Zu diesem Zeitpunkt sind unsere Blog-Beiträge in einem Raster angeordnet und dem Blog-Menü wurde eine benutzerdefinierte CSS-Klasse hinzugefügt. Wir werden also diesen CSS-Klassenselektor verwenden, um dieses Blog-Modul gezielt anzusprechen und einen Umschalteffekt hinzuzufügen, wenn wir mit der Maus über einen Artikel fahren.

Um CSS hinzuzufügen, verwenden wir das Code-Modul. Fügen Sie dazu ein Code-Modul unter dem Blog-Modul hinzu.

Fügen Sie als Nächstes das benutzerdefinierte CSS unten ein, das zum Erstellen des Artikel-Snippet-Umschalteffekts beim Hover benötigt wird. Stellen Sie vor allem sicher, dass Sie den CSS-Code zwischen den erforderlichen Style-Tags einfügen.

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

Sehen wir uns das bisher erzielte Ergebnis an.

Ergebnis

Fügen wir dem Blog-Modul mit dem Divi-Builder ein zusätzliches Styling hinzu

Jetzt, da das CSS vorhanden ist, um uns den Umschalteffekt für unsere Blog-Post-Snippets zu geben, können wir dem Blog-Modul mit dem Divi-Builder beliebige zusätzliche Stile hinzufügen.

Für dieses Beispiel nehmen wir minimale Anpassungen am Stil vor, aber Sie können auch Ihren eigenen Stil ausprobieren.

Stil des Artikeltitels

  • Titel bei schwachem Licht: Fetter Text
  • Titeltextfarbe: #6D6A7E
  • Titeltextgröße: 20px
  • Höhe der Titelzeile: 1.3 em
Auszüge von Artikeln auf Hover in Divi anzeigen

Textstil "Weiterlesen"

  • Lesen Sie mehr Schwaches Licht: Fetter Text
  • Lesen Sie mehr Kopierstil: TT
  • Textfarbe Lesen Sie mehr: #6D6A7E
  • Buchstabenabstand Weiterlesen: 1px
  • Zeilenhöhe Weiterlesen: 3.5 m

Ändern Sie die Anzeige der Textpaginierung

  • Paginierung anzeigen Schwaches Licht: Fetter Text
  • Textfarbe Paginierung anzeigen: #6D6A7E
  • Buchstabenabstand Paginierung anzeigen: 1px
  • Paginierung anzeigen Kopierstil: TT
Auszüge von Artikeln auf Hover in Divi anzeigen

Rand entfernen

  • Rahmenbreite des Rasterlayouts: 0px

Hover-Schattenbox-Stil

  • Schattenbox: Siehe Screenshot
  • Ausgangsposition: 0px
  • Box-Schattenunschärfe-Stärke: 38px
  • Schriftfarbe Untertitel: rgba (109,106,126,0.25)

Endergebnis

Fazit

Zusammenfassend lässt sich sagen, dass Ihnen das Hinzufügen einiger CSS-Snippets, wie in diesem Tutorial gezeigt, die Funktionalität bietet, die Sie benötigen, um Blog-Post-Snippets mit einem schönen Hover-Effekt zu rocken. 

Das Wichtigste bei dieser Methode ist, dass wir dem Blog-Modul mit den integrierten Optionen von Divi nach Belieben zusätzliches Styling hinzufügen können. Darüber hinaus können Sie Post-Elemente anpassen, einschließlich des Hinzufügens weiterer Hover-Effekte. 

Hoffentlich wird dies dazu beitragen, Ihrem Divi-Website-Blog einen zusätzlichen Schub in Design und Funktionalität zu verleihen. Erzähl uns von deinen Erfahrungen in den Kommentaren.

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

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

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.

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

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
Divi: So erstellen Sie eine globale Kopfzeile mit dem Vollbildmenümodul

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;

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

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
Divi: So erstellen Sie eine globale Kopfzeile mit dem Vollbildmenümodul

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
Divi: So erstellen Sie eine globale Kopfzeile mit dem Vollbildmenümodul
  • 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!

Divi: So erstellen Sie einen globalen Header mit dem Builder-Design

Divi: So erstellen Sie einen globalen Header mit dem Builder-Design

Müssen Sie mit Divi einen globalen Header für Ihre Website erstellen?

Eine globale Kopfzeile erscheint überall auf Ihrer Website, es sei denn, Sie haben einer Seite oder einem Beitrag eine andere Kopfzeile zugewiesen.

Fangen wir an!

Übersicht

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

Konfigurieren Sie Ihr Hauptmenü

Erstellen Sie zunächst Ihr Menü in den Darstellungseinstellungen Ihrer WordPress-Site.

Greifen Sie unter Divi auf die Option Theme Builder zu

Klicken Sie in den Divi-Theme-Optionen auf Theme Builder. Dort sehen Sie eine Standard-Website-Vorlage.

Fügen Sie einen globalen Header hinzu und erstellen Sie ihn

In der Standard-Website-Vorlage können Sie mit der Erstellung Ihrer benutzerdefinierten globalen Kopfzeile, des globalen Textkörpers und der globalen Fußzeile beginnen. Klicken Sie auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie auf „Globalen Header erstellen“ klicken, um den Vorgang zu starten.

Abschnittseinstellungen

Sizing

Öffnen Sie die Abschnittseinstellungen, die Sie auf der Seite finden, ändern Sie auf der Registerkarte Stil die Abmessungen für verschiedene Bildschirmgrößen.

  • Maximale Breite: 100 %
  • Maximale Breite: 1280 Pixel (für PC und Tablet), 100 % (für Mobilgeräte)

Abstand

Entfernen Sie alle oberen und unteren inneren Ränder

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

Grenze

Fügen Sie nun einen Randradius an der unteren linken und rechten Ecke des Abschnitts hinzu.

  • Unten links: 50px
  • Unten rechts: 50px

Schattenkiste

Lassen Sie uns auch einen subtilen Kastenschatten hinzufügen.

  • Box-Schattenunschärfe-Stärke: 60px
  • Schriftfarbe Untertitel: rgba(0,0,0,0.13)

Sichtbarkeit

  • Horizontaler Überlauf: Sichtbar
  • Vertikaler Überlauf: Sichtbar

Weisen Sie der Kopfzeile eine neue Zeile zu

Nachdem wir die allgemeinen Abschnittseinstellungen abgeschlossen haben, können wir mit dem Hinzufügen von Zeilen beginnen. Insgesamt benötigen wir zwei Zeilen; eine, die der Kopfzeile gewidmet ist, und eine, die die Anzeige von Menüelementen ermöglicht. Wir beginnen mit der Kopfzeile, indem wir eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Leitungseinstellungen

Hintergrundeinstellungen

Ohne der Linie Module hinzuzufügen, öffnen Sie die Linieneinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrund: #38383F

Sizing

Ändern Sie dann die Liniengrößenparameter.

  • Benutzerdefinierte Bundstegbreite verwenden: JA
  • Spaltenabstand: 1
  • Maximale Breite: 100 %
  • Maximale Breite: 100 %

Anzeigen

Stellen wir nun sicher, dass die Spalten auf kleineren Bildschirmen nebeneinander angezeigt werden, indem wir diese CSS-Codezeile zum Hauptzeilenelement hinzufügen.

01 display: flex;

Bildmodul in Spalte 1 hinzufügen

Logo herunterladen

Nachdem Sie die Zeileneinstellungen vorgenommen haben, können Sie mit dem Hinzufügen von Modulen beginnen. Fügen Sie in Spalte 1 ein Bildmodul hinzu und laden Sie Ihr Logo hoch.

Ausrichtung

Gehen Sie zur Registerkarte Stil und richten Sie das Bild links aus.

Sizing

Ändern Sie auch die Breite des Moduls.

Abstand

Fügen Sie auch benutzerdefinierte Randwerte hinzu.

Erstellen Sie eine globale Kopfzeile mit dem Divi Builder-Design

Fügen Sie das Social-Media-Tracking-Modul in Spalte 2 hinzu

Fügen Sie soziale Netzwerke hinzu

Kommen wir zur zweiten Spalte. Dort benötigen wir ein Social-Media-Tracking-Modul. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu. Sie können so viele soziale Medien hinzufügen, wie Sie möchten.

Erstellen Sie eine globale Kopfzeile mit dem Divi Builder-Design

Hintergrundfarbe des sozialen Netzwerks

Öffnen Sie als Nächstes jedes soziale Netzwerk einzeln und ändern Sie die Hintergrundfarbe in eine vollständig transparente Farbe.

  • Hintergrundfarbe: rgba (0,0,0,0)
Erstellen Sie eine globale Kopfzeile mit dem Divi Builder-Design

Ausrichtung

Gehen Sie zurück zu den normalen Moduleinstellungen und ändern Sie dann die vollständige Ausrichtung des Moduls.

Symbol

Ändern Sie auch die Symboleinstellungen.

  • Symbolfarbe: #FFFFFF
  • Benutzerdefinierte Symbolgröße verwenden: Ja
  • Symbolschriftgröße: 16px (PC und Tablet), 12px (Telefon)

Abstand

Fügen Sie einen oberen Rand hinzu.

Fügen Sie das Button-Modul in Spalte 3 hinzu

Wechseln Sie in die dritte Spalte und fügen Sie ein Button-Modul mit einem Text Ihrer Wahl hinzu.

Ausrichtung

Ändern Sie die Ausrichtung der Schaltfläche auf der Registerkarte Stil.

Tasteneinstellungen

Passen Sie die Schaltflächeneinstellungen wie folgt an:

  • Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
  • Schaltflächentextgröße: 12 Pixel (Desktop), 10 Pixel (Tablet), 8 Pixel (Telefon)
  • Textfarbe der Schaltfläche: #ffffff
  • Hintergrundschaltfläche: #ffae25
  • Rahmenbreite der Schaltfläche: 0 Pixel
  • Randradius-Schaltfläche: 0 Pixel
  • Buchstabenabstand der Schaltflächen: 5 px (Desktop), 3 px (Tablet und Telefon)
  • Schriftart-Schaltfläche: Keine öffnen
  • Schaltfläche „Weiches Licht“: Fettgedruckter Text
  • Schaltflächenstil kopieren: TT

Abstand

Marginwerte anpassen.

Weisen Sie der Menüleiste eine neue Zeile zu

Nachdem Sie die Zeile für den globalen Header ausgefüllt haben, können Sie direkt darunter eine weitere Zeile hinzufügen.

Leitungseinstellungen

Sizing

Öffnen Sie, ohne noch Module hinzuzufügen, die Linieneinstellungen und ändern Sie die Größeneinstellungen auf der Registerkarte Stil.

Abstand

Entfernen Sie dann alle unteren und oberen Ränder.

Fügen Sie der Spalte ein Menümodul hinzu

Wählen Sie Menü

Fügen Sie als Nächstes ein Menümodul zur Spalte hinzu und wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials erstellt haben.

Bereitstellung

Wechseln Sie auf die Registerkarte Stil und ändern Sie die Layouteinstellungen wie folgt:

Connections

Ändern Sie auch die Farbe des aktiven Links auf der Registerkarte Stil.

  • Farbe des aktiven Links: #ffae25
Erstellen Sie eine globale Kopfzeile mit dem Divi Builder-Design

Menüführung

Machen Sie dasselbe für die Linienfarbe des Dropdown-Menüs in den Dropdown-Menüeinstellungen.

  • Farbe der Dropdown-Zeilen: #ffae25

Symbol

  • Farbe des Hamburger-Menüsymbols: #ffae25

Menütext

Mit Menütexteinstellungen.

  • Menüschriftart: Prata
  • Menütextfarbe: #000000

Header und Menüleiste bleiben oben

Bereichseinstellungen öffnen

Sobald Sie die zweite Zeile ausgefüllt haben, müssen Sie nur noch sicherstellen, dass der Abschnitt oben auf unseren Seiten und Beiträgen bleibt. Dazu öffnen wir erneut die Abschnittseinstellungen.

Fügen Sie dem Hauptelement benutzerdefiniertes CSS hinzu

Als nächstes gehen wir zur Registerkarte „Erweitert“ und fügen dem Hauptelement des Abschnitts einige Zeilen CSS-Code hinzu.

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

Speichern Sie globale Header- und Design-Builder-Optionen

Nachdem Sie das gesamte globale Header-Design fertiggestellt haben, speichern Sie das Design, bevor Sie das Vorlagenlayout verlassen. Sobald Sie das Vorlagenlayout verlassen haben, speichern Sie Ihre gesamten Theme Builder-Änderungen und Sie sind fertig!

Übersicht

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

Erstellen Sie eine globale Kopfzeile mit dem Divi Builder-Design

Fazit

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit dem neuen Theme Builder von Divi einen benutzerdefinierten globalen Header erstellen. Dieses Tutorial zeigt, wie einfach es ist, schöne Überschriften zu erstellen und sie auf Ihre gesamte Website oder auf bestimmte benutzerdefinierte Beitragstypen anzuwenden. 

Wir hoffen, dass es Ihnen beim Anpassen Ihrer Website mit Theme Builder hilft.

Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie uns bitte einen Kommentar in der Kommentarbereich unten.

...