Mit Divi sind sogar Blogs ein Modul und Ihr „Blog“ kann überall auf Ihrem platziert werden Website und in verschiedenen Formaten. Sie können Blog- und Sidebar-Module kombinieren, um klassische Blog-Designs zu erstellen. 1-Spalte, 2-Spalte oder 3-Spalte können mit dem Blog- und Seitenleistenmodul erstellt werden.

So fügen Sie Ihrer Seite ein Blog-Modul hinzu

Bevor Sie Ihrer Seite ein Blog-Modul hinzufügen können, müssen Sie zunächst auf den Divi Builder zugreifen. Sobald die Divi-Thema auf deinem installiert Website, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Durch Klicken auf diese Schaltfläche können Sie Divi Builder aktivieren, wodurch Sie auf alle Divi Builder-Module zugreifen können. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder wenn Sie Ihre durchsuchen Website Upstream, wenn Sie in Ihr WordPress-Dashboard eingeloggt sind.

Nach der Eingabe in Visual Builder können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Elemente von Linien und Abschnitte von Divi.

Suchen Sie das Blog-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Blog" eingeben und dann auf die Eingabetaste klicken, um das Blog-Modul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Moduloptionen begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Anwendungsfall des Blog-Moduls mit einem Rasterlayout in einem speziellen Bereich mit einer rechten Seitenleiste

In diesem Beispiel füge ich einer Blog-Seite ein Blog-Modul hinzu. Diese Blog-Seite enthält eine vollständige Kopfzeile mit einem Suchmodul. Unter dem Suchmodul werde ich einen speziellen Bereich mit dem Blog-Modul auf der linken Seite und einem Seitenleistenabschnitt auf der rechten Seite hinzufügen. Die Seitenleiste rechts enthält ein Widget für aktuelle Beiträge, ein E-Mail-Anmeldemodul und ein Personenmodul.

So sieht die Beispielseite aus.

Beachten Sie, dass sich das Blogmodul in einem Rasterlayout auf der linken Seite des speziellen Abschnitts befindet.

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen speziellen Abschnitt mit dem folgenden Layout hinzuzufügen:

Sie werden aufgefordert, eine Spalte oder eine zweispaltige Zeile für die linke Seite hinzuzufügen. Wählen Sie Zeile 1 Spalte.

Fügen Sie dann das Blog-Modul in die Zeile ein.

Aktualisieren Sie die Blogeinstellungen wie folgt:

Inhaltsoptionen

Beitragsnummer: 6
Erfahren Sie mehr Button: ON
Paginierung anzeigen: NEIN
Gitterhintergrundfarbe: #ffffff

Design-Optionen

Layout: Gitter
Verwenden Sie Schlagschatten: EIN
Overlay-Farbsymbol: #ffffff
Hover-Overlay-Farbe: RGBA (224,153,0,0.51) -Header
Polizei:
Schriftgröße Header: 21px
Header Textfarbe: # 333333
Buchstabenabstand: 1px
Kopfzeilenhöhe: 1.2 em
Grenze: JA
Farbe des Rahmens: # f0f0f0
Breite des Rahmens: 1px
Rahmenstil: Einfarbig

Optionen Avancées

Benutzerdefiniertes CSS (Schaltfläche "Weitere Informationen"):

Farbe: # e09900;
Betrachtungsblock;
text-align: center;
Rand oben: 10px;
Rahmen: 1px solid #ccc;
Auffüllen: 5px;
Textumwandlung: Großschreibung;
Buchstabenabstand: 1px;

Mit der erweiterten benutzerdefinierten CSS-Schaltfläche für die Schaltfläche "Weitere Informationen" wird ein benutzerdefiniertes Erscheinungsbild erstellt, das dem Design entspricht.

Im rechten Seitenleistenbereich des Layouts des Fachbereichs müssen Sie ein Seitenleistenmodul hinzufügen, das das Widget für die letzten Beiträge einfügt. Unten müssen Sie ein Email Optin-Modul hinzufügen. Und dann müssen Sie unter Email Optin das Modul Person mit Autoreninformationen hinzufügen.

Das ist es!

Blog-Inhaltsoptionen

Auf der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer in dieser Registerkarte.

Artikelnummer (Anzahl der Artikel)

Legen Sie die Anzahl der Nachrichten fest, die Sie anzeigen möchten. Sie benötigen Nachrichten für alles, was in diesem Modul angezeigt wird.

Wählen Sie die Kategorien aus, die Sie in den Post-Feed aufnehmen möchten. Alle von Ihnen erstellten Nachrichtenkategorien werden hier angezeigt, damit Sie sie auswählen / deren Auswahl aufheben können.

Kategorien enthalten

Wählen Sie die Kategorien aus, die Sie in den Feed aufnehmen möchten.

Metadatum-Format

Legen Sie hier das Datumsformat fest, das in Ihren Blog-Posts angezeigt werden soll. Das Standardlayout ist das Format M j, Y (6. Januar 2014) WordPress Kodex Datumsformate für weitere Optionen.

Inhalt

Durch das Anzeigen des vollständigen Inhalts werden Ihre Beiträge auf der Indexseite nicht abgeschnitten. Show Snippet zeigt nur Ihren Snippet-Text an.

Versatznummer

Wählen Sie die Anzahl der Nachrichten, die Sie versetzen möchten. Wenn Sie beispielsweise mit 3 Posts kompensieren, werden die ersten drei Posts in Ihrem Blog-Feed nicht angezeigt.

Vorgestelltes Bild anzeigen

Mit dieser Option können Sie auswählen, ob Thumbnails in Ihrem Blog-Modul angezeigt werden sollen oder nicht.

Lesen Sie mehr Schaltfläche

Hier können Sie festlegen, ob der Link "Lesen Sie mehr" nach dem Snippet angezeigt werden soll oder nicht.

Autor anzeigen

Wählen Sie aus, ob Sie den Autor jedes Blogposts im Post-Meta-Feld unter dem Post-Titel anzeigen möchten.

Datum anzeigen

Wählen Sie aus, ob Sie das Datum anzeigen möchten, an dem jeder Artikel im Feld "Artikel-Meta" unter dem Nachrichtentitel erstellt wurde.

Kategorien anzeigen

Wählen Sie aus, ob die Beitragskategorien im Beitrags-Metabereich unter dem Veröffentlichungstitel angezeigt werden sollen.

Zeigen Sie die Anzahl der Kommentare an

Wählen Sie aus, ob Sie die Anzahl der Kommentare im Post-Meta-Feld unter dem Titel des Posts anzeigen möchten.

Paginierung anzeigen

Wählen Sie aus, ob Sie die Paginierung für diesen Feed anzeigen möchten. Um nummeriertes Paging zu aktivieren, müssen Sie das Plug-In installieren WP Seite Navi .

Administrationsetikett

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Bei Verwendung der WireFrame-Ansicht in Visual Builder werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Blog-Design-Optionen

Auf der Registerkarte Design finden Sie alle Optionen für den Modulstil, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie nahezu alles optimieren können.

Bereitstellung

Sie können wählen, ob Ihre Blog-Beiträge in einem Raster oder in einem Layout in voller Breite angezeigt werden sollen.

Überlagertes Bild

Wenn diese Option aktiviert ist, werden eine Farbe und ein Überlagerungssymbol angezeigt, wenn sich ein Besucher über dem ausgewählten Bild einer Nachricht befindet.

Farbe des Überlagerungssymbols

Hier können Sie eine benutzerdefinierte Farbe für das Überlagerungssymbol festlegen.

Deckfarbe schwebend

Hier können Sie eine benutzerdefinierte Farbe für die Überlagerung definieren.

Hover-Symbolauswahl

Hier können Sie ein benutzerdefiniertes Symbol für die Überlagerung definieren.

Textfarbe

Si Ihr Blog auf einem hellen Hintergrund platziert wird, sollte die Textfarbe auf „Dunkel“ eingestellt werden. Visum, ja Ihr Blog auf einem dunklen Hintergrund platziert wird, sollte die Textfarbe auf „Hell“ eingestellt werden.

Header-Schriftart

Sie können die Schriftart Ihrer Kopfzeile ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihrer Kopfzeile ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl aus.

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Kopfzeilentextes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mithilfe des Bereichsreglers anpassen oder die gewünschte Abstandsgröße eingeben das Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Körper Schriftart

Sie können Ihre Body-Schriftart ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Textfarbe des Körpers

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Körpertextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand der Körperbuchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Textes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Textzeilen aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Metas Schriftart

Sie können die Schriftart Ihres Meta-Textes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Metas Schriftgröße

Hier können Sie die Größe Ihres Metatextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Textfarbe für Meta

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Meta-Textes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand von Meta-Buchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Meta-Textes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Meta-Linie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Meta-Textes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Feld ein rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Unterstützte benutzerdefinierte Maßeinheiten, dh Sie können die Standardeinheit von "px" in etwas anderes ändern, z. B. em, vh, vw usw.

Grenzstil

Rahmen unterstützen acht verschiedene Stile, darunter: fest, gepunktet, gepunktet, doppelt, Nut, Grat, Einschub und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.

Erweiterte Blogoptionen

Auf der Registerkarte Erweitert finden Sie Optionen, die erfahrene Webdesigner möglicherweise nützlich finden, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann verwendet werden, um ein benutzerdefiniertes CSS-Styling zu erstellen. Sie können mehrere Klassen hinzufügen, getrennt durch ein Leerzeichen. Diese Klassen können in Ihrem verwendet werden Divi-Thema Untergeordnet oder in benutzerdefiniertem CSS, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt CSS hinzufügen können. Die CSS-Einträge in diesen Einstellungen sind bereits mit Stil-Tags eingebettet. Sie müssen also nur CSS-Regeln eingeben, die durch Semikolons getrennt sind.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Das war's für dieses Tutorial.