Springe zum Hauptinhalt

Wie verwende ich das Blog-Modul in Divi Builder?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Mit Divi sind sogar Blogs ein Modul und Ihr "Blog" kann überall auf Ihrer Website und in verschiedenen Formaten platziert werden. Sie können Blog- und Sidebar-Module kombinieren, um klassische Blog-Designs zu erstellen. 1-Spalten, 2-Spalten oder 3-Spalten können mithilfe des Blog- und Sidebar-Moduls erstellt werden.

Vorschau Blog Divi Modul blog.png

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

Bevor Sie Ihrer Seite ein Blog-Modul hinzufügen können, müssen Sie zuerst auf den Divi Builder zugreifen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Wenn Sie auf diese Schaltfläche klicken, können Sie Divi Builder aktivieren, mit dem Sie auf alle Module von Divi Builder 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 beim Surfen auf Ihrer Upstream-Website, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Button Divi Builder Modul Blog divi.png

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

füge Blog-Modul divi builder.png hinzu

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, dh Sie können auch das Wort "Blog" eingeben und dann auf "Enter" klicken, um das Blog-Modul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

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

In diesem Beispiel werde ich einer Blog-Seite ein Blog-Modul hinzufügen. Diese Blog-Seite enthält eine vollständige Kopfzeile mit einem Suchmodul darunter. Unter dem Suchmodul werde ich einen speziellen Bereich mit dem Blog-Modul auf der linken Seite und einem Seitenleistenbereich auf der rechten Seite hinzufügen. Die Seitenleiste auf der rechten Seite enthält ein aktuelles Veröffentlichungswidget, ein Optin-E-Mail-Modul und ein Personenmodul.

So sieht die Beispielseite aus.

Beispiel für die Seite divi.jpg

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:

layout speciality divi.png

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

Auswahlzone divi builder.png

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

Verwenden Sie das Modul blog.png

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
Kopfzeile Hö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;

Blogeinstellungen divi.png

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

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Block Design Artikel divi.jpg

Im Abschnitt der rechten Seitenleiste des Layouts "Spezialisierter Abschnitt" müssen Sie ein Seitenleistenmodul hinzufügen, mit dem das Widget für die letzten Veröffentlichungen eingefügt wird. Unten müssen Sie ein Email Optin-Modul hinzufügen. Anschließend müssen Sie unter "E-Mail-Anmeldung" das Modul "Person" mit Informationen zum Autor hinzufügen.

Das ist alles!

Blog-Inhaltsoptionen

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

Blogmodul divi.png

Anzahl der Positionen (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 Publikationsstream aufnehmen möchten. Alle von Ihnen erstellten Nachrichtenkategorien werden hier angezeigt, damit Sie sie auswählen bzw. deren Auswahl aufheben können.

Kategorien enthalten

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

Metadatum-Format

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

Inhalt

Durch das Anzeigen des vollständigen Inhalts werden Ihre Posts auf der Indexseite nicht abgeschnitten. Show Preview zeigt nur Ihren Auszugstext.

Versatznummer

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

Zeige ausgewähltes Bild

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 "read more" nach dem Auszug angezeigt werden soll oder nicht.

Autor anzeigen

Wählen Sie aus, ob der Autor jedes Blogposts im Post-Meta-Feld unter dem Titel des Artikels angezeigt werden soll.

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.

Elemente zum Anzeigen von divi module blog.png

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 die nummerierte Paginierung zu aktivieren, müssen Sie das Plug-In installieren WP Seite Navi .

Label der Verwaltung

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Blog-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, 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 Konstruktionsparametern, mit denen Sie so gut wie alles bearbeiten können.

Design Option Divi Builder Modul blog.png

Bereitstellung

Sie können Ihre Blogposts in einem Raster oder in einem Layout mit voller Breite anzeigen.

Ü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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Wenn Ihr Blog auf einem hellen Hintergrund platziert ist, sollte die Textfarbe auf "Dunkel" eingestellt sein. Visa, wenn Ihr Blog auf einem dunklen Hintergrund platziert ist, sollte die Textfarbe auf "Hell" eingestellt sein.

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 großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Größe der Kopfzeile

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 Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Farbe des Kopftextes

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 Farbe Ihrer Wahl in der Farbauswahl.

Abstand der Briefköpfe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Intervall-Schieberegler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Abstands in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Konfigurationsabstand Header divi.png

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen im Kopfzeilentext aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Intervallregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in ein das Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen verschiedene 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 die Schriftart Ihres Körpers ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Körper Schriftgröße

Hier können Sie die Größe Ihres Textkörpers anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene 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örpertexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Körperbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Textes vergrößern möchten, stellen Sie den Abstand mit dem Intervall-Schieberegler ein oder geben Sie den gewünschten Abstand in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene 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 Zeilen des Textkörpers 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 verschiedene 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 Metatexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

section meta data diiv builder.png

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 Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene 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 Metatextes ändern möchten, wählen Sie die Farbe Ihrer Wahl in der Farbauswahl mit dieser Option.

Abstand von Meta-Buchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Metatexts vergrößern möchten, verwenden Sie den Intervall-Schieberegler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Abstands in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene 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 Metatexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Intervallregler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Abstands in das Feld ein Eingabe rechts vom Cursor. Die Eingabefelder unterstützen verschiedene 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 Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern 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 haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Schieberegler in den Bereich 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 eine andere Einheit ändern, z. B. em, vh, vw usw.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Grenzstil

Die Ränder unterstützen acht verschiedene Stile, darunter: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inset 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 für erfahrene Webdesigner hilfreich sind, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie ein benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

Erweiterter Bereich des Moduls blog.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Ein Bezeichner kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem Divi Child-Design oder in dem benutzerdefinierten CSS verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi Theme-Optionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Ein benutzerdefiniertes CSS kann auch auf das Modul und eines der 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 in Style-Tags eingebettet. Sie müssen 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Das war es für dieses Tutorial.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
10 Aktien
Aktie4
tweet2
Registrieren4