So erstellen Sie eine Blog-Seite in Divi

Normalerweise enthält jedes Themenpaket ein Blog-Layout, mit dem Sie Ihr Blog schnell zum Laufen bringen können. Wollten Sie jedoch schon immer wissen, wie eine dieser Blogseiten aufgebaut ist? In diesem Beitrag verwenden wir eines dieser Blog-Layouts, um zu demonstrieren, wie man das Blog-Modul von Divi zum Erstellen einer Blog-Seite verwendet. Wir führen Sie Schritt für Schritt durch jede Einstellung.

Lasst uns anfangen!

Designvorschau

Eine Seite erstellen

Gehen Sie zunächst zu Seiten > Neu hinzufügen und erstellen Sie eine neue Seite.

Geben Sie daher einen Titel für die Seite an, der für Sie plausibel klingt. Ich verwende den Seitennamen Acai Blog Page aus dem Layoutpaket. Wählen Sie in der rechten Seitenleiste die gewünschten Seiteneigenschaften aus. Ich behalte die Attribute allein.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Seitentitel: Acai-Blogseite

Wechseln Sie zu Divi Builder

Anschließend möchten Sie zum Divi Builder wechseln. Nutzen Sie Divi Builder, indem Sie auf die violette Schaltfläche in der Mitte der Seite klicken. Dadurch gelangen Sie zum Frontend, wo der Divi Builder aktiv ist und wir mit dem Aufbau der Seite beginnen können.

Heldenabschnitt mit Titel

Style Hero-Bereich

Wir beginnen mit dem ersten Abschnitt. Öffnen Sie die Optionen für den Abschnitt.

Nehmen Sie einige Änderungen an den Abschnittseinstellungen vor.

Hintergrund: #f9f3fd
Admin-Label: Blog

Titel der Blog-Seite

Anschließend erstellen wir eine Zeile für den Titel. Wählen Sie die Zeile mit dem grünen Signal mit einer einzelnen Spalte aus.

Fügen Sie dann einen Textbaustein hinzu.

Gestalten Sie das Textmodul

Öffnen Sie die Texteinstellung und nehmen Sie die folgenden Änderungen für die H1-Überschrift vor.

Schriftart: Überschrift 1
Text: Unser Blog

Wechseln Sie nun zur Registerkarte „Design“ und nehmen Sie die folgenden Änderungen vor.

Textausrichtung: Mitte
Überschriftentext: H1
Schriftart: Cormorant Infant
Gewicht: Fett

Ändern Sie auch die Schriftfarbe, -größe und -höhe.

Farbe: #442854
Desktop-Textgröße: 130 Pixel
Linienhöhe: 0,8 cm

Ändern Sie nun die Textgröße der Überschrift.

Tablet-Textgröße: 60 Pixel

Ändern Sie nun die Größe des Telefonsymbols.

Telefon: 40px

Erstellen Sie den neuesten Blog-Beitrag und CTA

In unserem Heldenbereich finden Sie den neuesten Beitrag und ein Opt-in-E-Mail-Formular. Erstellen Sie eine neue Zeile unter unserer ersten Zeile und wählen Sie das Spaltendesign mit zwei Dritteln links und einem Drittel rechts.

Öffnen Sie die Zeileneinstellung und ändern Sie den Abstand auf der Registerkarte „Design“.

Untere Polsterung: 0px

Empfohlenes Blog-Post-Modul

Anschließend stellen wir ein Blog-Modul zur Verfügung. Dieser Abschnitt enthält unsere neuesten Inhalte. Fügen Sie das Blog-Modul hinzu, indem Sie auf das graue Hinzufügungssymbol in der linken Spalte unserer neuen Zeile klicken.

Geben Sie unter „Inhaltseinstellungen“ 1 für den Post Count-Block ein.

Anzahl der Beiträge: 1

Elemente

Gehen Sie auf der Registerkarte „Inhalt“ nach unten zum Abschnitt „Elemente“ und deaktivieren Sie „Autor“ und „Paginierung“.

Autor anzeigen: Nein
Paginierung anzeigen: Nein

Layout

Ändern Sie auf der Registerkarte „Design“ die Layout- und Overlay-Einstellungen.

Layout: Volle Breite
Überlagerung hervorgehobener Bilder: Aus

Titeltext

Ändern Sie nun den Titeltext gemäß den folgenden Einstellungen.

Überschriftenebene: H2
Schriftart: Cormorant Infant
Gewicht: Fett
Farbe: #442854

Ändern Sie außerdem die Schriftgröße.

Größe: 30 Pixel Desktop, 20 Pixel Tablet, 18 Pixel Telefon
Höhe der Titelzeile: 1,1 cm

Hauptteil

Ändern Sie für die Textkörpereinstellungen Folgendes.

Schriftart: Cabin
Farbe: #442854
Linienhöhe: 1,8 cm

Metatext

Nehmen Sie außerdem einige Änderungen am Metatext vor.

Schriftart: Cormorant Infant
Gewicht: Normal
Stil: Keine
Farbe: #442854
Größe: Desktop 16 Pixel, Tablet 15 Pixel, Telefon 14 Pixel
Linienhöhe: 1,8 cm

Abstand

Fügen Sie nun etwas Abstand hinzu.

Oberer Rand: 0vw

Box Schatten

Deaktivieren Sie abschließend den Box-Shadow.

Boxschatten: Deaktivieren

Blog-E-Mail-Textmodul

Wir gehen jetzt zur rechten Spalte und entwickeln den E-Mail-CTA. Fügen Sie zunächst ein Textmodul in die rechte Spalte ein. Wählen Sie das graue +-Symbol aus und geben Sie Text ein.

Inhalt

Wählen Sie Überschrift 2 aus und geben Sie einen ansprechenden Text ein.

Schriftart: H2
Text: Abonnieren Sie Angebote und Rezepte

Überschriftentext

Wählen Sie für den Überschriftentext die Option „Mittige Ausrichtung“, „H2“ und „Cormorant Infant“ aus, und stellen Sie die Option auf „Fett“ ein.

Textausrichtung: Mitte
Überschriftentext: H2
Schriftart: Cormorant Infant
Gewicht: Fett

Farbe: #442854
Größe: 32px
Linienhöhe: 0,95 cm

Abstand

Zum Schluss fügen Sie dem Artikel einen unteren Rand hinzu.

Unterer Rand: 10 Pixel

Blog-E-Mail-Optin-Modul

Fügen Sie nun in der rechten Spalte ein E-Mail-Optionsmodul hinzu.

Inhalt

Entfernen Sie den Titel und den Textkörper.

Titel: Keine
Textkörper: Keine

Scrollen Sie nach unten zu E-Mail-Konto und fügen Sie Ihren Dienstanbieter hinzu.

Scrollen Sie als Nächstes zu „Hintergrund“ und heben Sie die Auswahl auf.

Hintergrundfarbe verwenden: Nein

Felder

Gehen Sie zur Registerkarte „Design“ und ändern Sie die Hintergrundfarbe der Felder.

Hintergrundfarbe: rgba(255,255,255,0)
Feldtextfarbe: #442854

Scrollen Sie nach unten zu den Schriftartoptionen und nehmen Sie die folgenden Änderungen vor.

Fields-Schriftart: Cabin
Größe: 16px
Linienhöhe: 1,8 cm

Abgerundete Ecken der Felder: 32px
Rahmenbreite: 2 Pixel
Randfarbe: #442854

Taste

Scrollen Sie nach unten zu „Schaltfläche“ und wählen Sie „Benutzerdefinierte Stile für Schaltfläche verwenden“ aus.

Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
Größe: 18px
Farbe: #ffffff
Schaltflächenhintergrund: #442854

Randradius: 50 Pixel
Schriftart: Cormorant Infant
Gewicht: Fett

Fügen wir etwas „Button Margin“ und „Padding“ hinzu.

Oberer Rand der Schaltfläche: 20 Pixel
Obere, untere Polsterung: 12px
Linker, rechter Abstand: 32px

Neue Zeile für Blog-Eintrag hinzufügen

Fügen wir unter dem Heldenabschnitt eine Zeile mit einer einzelnen Spalte hinzu.

Einstellungen für Blog-Eintragszeilen

Gehen Sie zur Registerkarte „Design“ und passen Sie die Polsterung an.

Obere Polsterung: 0px

Blog-Modul zu Ihrer Zeile

Fügen Sie Ihrer neuen Zeile ein Blog-Modul hinzu.

Gestalten Sie den Blog-Feed

Blog-Feed-Inhalte

Geben Sie in den Einstellungen des Blog-Moduls für die Beitragsanzahl den Wert 3 ein. Mit der Option „Beitragsanzahl“ können Sie die Anzahl der auf dem Bildschirm angezeigten Beiträge anpassen.

Eine niedrigere Zahl, beispielsweise 3, ermöglicht es uns, uns auf die neuesten Beiträge zu konzentrieren und gleichzeitig die Seite überschaubar zu halten. Dies ist eine ausgezeichnete Option, wenn Sie nicht viel aktualisieren oder die Seite sauber halten möchten. Wenn Sie sich auf den Blog-Feed konzentrieren möchten, empfiehlt es sich, die Anzahl der angezeigten Beiträge zu erhöhen, z. B. 6–9.

Anzahl der Beiträge: 3

Geben Sie 1 als Offset ein. Dadurch wird Divi angewiesen, mit dem zweiten Blog-Beitrag zu beginnen, wodurch verhindert wird, dass wir denselben Inhalt wie die hervorgehobene Blog-Beitrag-Zeile darüber anzeigen.

Post-Offset-Nummer: 1