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, das Ihnen beim Erstellen hilft Ihr Blog schnell genug. 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 erstellen Sie die Formular Email . 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 Stile für Schaltflächen . Ä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, Kontakt und Social-Following-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 Restauranturieren 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!!!

Zusammenfassung

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.

...