Divi Builder Plugin Dokumentation

Wie man das Divi Blog Modul hinzufügt, konfiguriert und anpasst.

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. Einspaltige, zweispaltige oder dreispaltige Blogs können alle mit Blog- und Sidebar-Modulen erstellt werden.

Eine Live-Demo dieses Moduls ansehen

Wie man ein Blog-Modul zu seiner Seite hinzufügt

Bevor man ein Blog-Modul zu seiner Seite hinzufügen kann, muss man zuerst in den Divi Builder springen. Sobald das Divi-Theme auf deiner Website installiert ist, wirst du bei der Erstellung einer neuen Seite eine Schaltfläche „Divi Builder verwenden“ über dem Beitragseditor sehen. Wenn Du auf diese Schaltfläche klickst, wird der Divi Builder aktiviert und Du hast Zugriff auf alle Module des Divi Builders. Klicken Sie anschließend auf die Schaltfläche Use Visual Builder (Visuellen Builder verwenden), um den Builder im visuellen Modus zu starten. Sie können auch auf die Schaltfläche Visual Builder verwenden klicken, wenn Sie Ihre Website im Frontend durchsuchen, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Sobald Sie den Visual Builder aufgerufen haben, können Sie auf die graue Plus-Schaltfläche klicken, um ein neues Modul zu Ihrer Seite hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, zuerst eine Zeile zu Ihrer Seite hinzuzufügen. Wir haben einige großartige Anleitungen zur Verwendung von Divis Zeilen- und Abschnittselementen.

Suche das Blogmodul in der Liste der Module und klicke darauf, um es zu Deiner Seite hinzuzufügen. Die Modulliste ist durchsuchbar, d. h. Sie können auch das Wort „Blog“ eingeben und dann auf die Eingabetaste klicken, um das Blogmodul automatisch zu finden und hinzuzufügen! Nach dem Hinzufügen des Moduls werden Sie mit einer Liste von Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt, Design und Erweitert.

Anwendungsbeispiel: Hinzufügen eines Blog-Moduls mit einem Rasterlayout in einem Fachbereich mit rechter Seitenleiste

In diesem Beispiel werde ich ein Blog-Modul zu einer Blog-Seite hinzufügen. Diese Blogseite hat eine Kopfzeile mit voller Breite und ein Suchmodul darunter. Unter dem Suchmodul wird ein spezieller Bereich mit dem Blogmodul auf der linken Seite und einem Seitenleistenbereich auf der rechten Seite hinzugefügt. Die Seitenleiste auf der rechten Seite enthält ein Widget für die letzten Beiträge, ein E-Mail-Optin-Modul und ein Personenmodul.

So sieht die Beispielseite aus.

Beachten Sie, dass sich das Blog-Modul in einem Rasterlayout auf der linken Seite des Fachbereichs befindet.

Lassen Sie uns beginnen.

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

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

Fügen Sie dann das Blog-Modul zu der Zeile hinzu.

Aktualisieren Sie die Blog-Einstellungen wie folgt:

Inhaltsoptionen

Anzahl der Beiträge: 6
Weiter lesen Button: EIN
Paginierung anzeigen: NEIN
Gitterkachel Hintergrundfarbe: #ffffff

Designoptionen

Layout: Raster
Tropfenschatten verwenden: EIN
Symbolfarbe überlagern: #ffffff
Überlagerungsfarbe: rgba(224,153,0,0.51)
Kopfzeile Schriftart: Standard
Überschrift Schriftgröße: 21px
Überschrift Textfarbe: #333333
Kopfzeile Buchstabenabstand: 1px
Überschrift Zeilenhöhe: 1.2em
Rahmen verwenden: YES
Border Color: #f0f0f0
Border Width: 1px
Border Style: Solid

Erweiterte Optionen

Custom CSS (Read More Button):

Das erweiterte Custom CSS für den Read More Button erzeugt ein benutzerdefiniertes Aussehen, das sich gut in das Design einfügt.

Im rechten Sidebar-Bereich des Specialty Section Layouts müssen Sie ein Sidebar-Modul hinzufügen, das das Recent Posts Widget einbindet. Darunter müssen Sie ein E-Mail-Optin-Modul hinzufügen. Unter dem E-Mail-Optin-Modul fügen Sie das Personenmodul mit Informationen über den Autor hinzu.

Das war’s!

Blog-Inhaltsoptionen

In der Registerkarte „Inhalt“ finden Sie alle Inhaltselemente des Moduls, wie Text, Bilder und Symbole. Alles, was steuert, was in Ihrem Modul erscheint, befindet sich immer auf dieser Registerkarte.

Anzahl der Beiträge

Legen Sie die Anzahl der Beiträge fest, die Sie anzeigen möchten. Sie müssen Beiträge erstellt haben, damit in diesem Modul etwas angezeigt wird.

Wählen Sie die Kategorien aus, die Sie in den Beitrags-Feed aufnehmen möchten. Alle Beitragskategorien, die Sie erstellt haben, werden hier angezeigt und können ausgewählt bzw. abgewählt werden.

Eingeschlossene Kategorien

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

Meta-Datumsformat

Definieren Sie hier das Datumsformat, das Sie in Ihren Blogbeiträgen anzeigen möchten. Das Standardlayout ist ein M j, Y-Format (6. Januar 2014). Weitere Optionen finden Sie im WordPress Codex zu Datumsformaten.

Inhalt

Die Anzeige des vollständigen Inhalts wird Ihre Beiträge auf der Indexseite nicht abschneiden. Bei der Anzeige des Auszugs wird nur der Auszugstext angezeigt.

Ausgleichszahl

Wählen Sie aus, um wie viele Beiträge Sie ausgleichen möchten. Wenn Sie z.B. einen Versatz von 3 Beiträgen angeben, werden die ersten drei Beiträge in Ihrem Blog-Feed nicht angezeigt.

Featured Image anzeigen

Mit dieser Option können Sie festlegen, ob in Ihrem Blog-Modul Miniaturbilder angezeigt werden sollen oder nicht.

Button zum Weiterlesen

Hier können Sie festlegen, ob der Link „Weiterlesen“ nach dem Auszug angezeigt werden soll oder nicht.

Autor anzeigen

Wählen Sie aus, ob Sie den Autor jedes Blogbeitrags im Metabereich unter dem Beitragstitel anzeigen möchten oder nicht.

Datum anzeigen

Wählen Sie aus, ob Sie das Datum, an dem jeder Beitrag erstellt wurde, im Metabereich unter dem Beitragstitel anzeigen möchten.

Kategorien anzeigen

Wählen Sie aus, ob Sie die Beitragskategorien im Metabereich unter dem Beitragstitel anzeigen möchten oder nicht.

Kommentaranzahl anzeigen

Wählen Sie aus, ob Sie die Anzahl der Kommentare im Metabereich unter dem Beitragstitel anzeigen möchten.

Paginierung anzeigen

Wählen Sie aus, ob Sie eine Paginierung für diesen Feed anzeigen möchten. Um die nummerierte Paginierung zu aktivieren, müssen Sie das WP Page Navi Plugin installieren.

Admin Label

Damit wird das Label des Moduls im Builder zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht im Visual Builder verwenden, erscheinen diese Beschriftungen innerhalb des Modulblocks in der Divi Builder-Oberfläche.

Blog-Design-Optionen

In der Registerkarte „Design“ finden Sie alle Styling-Optionen des Moduls, wie Schriftarten, Farben, Größe und Abstände. Dies ist die Registerkarte, mit der Sie das Aussehen Ihres Moduls ändern können. Jedes Divi-Modul hat eine lange Liste von Design-Einstellungen, mit denen du so ziemlich alles ändern kannst.

Layout

Du kannst entweder wählen, ob deine Blog-Posts in einem Raster oder in einem Layout mit voller Breite angezeigt werden sollen.

Featured Image Overlay

Wenn aktiviert, wird eine Overlay-Farbe und ein Symbol angezeigt, wenn ein Besucher mit dem Mauszeiger über das Featured Image eines Posts fährt.

Farbe des Overlay-Symbols

Hier können Sie eine benutzerdefinierte Farbe für das Overlay-Symbol festlegen.

Farbe des Overlay-Symbols

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

Hover Icon Picker

Hier können Sie ein benutzerdefiniertes Icon für das Overlay festlegen.

Text Color

Wenn Ihr Blog auf einem hellen Hintergrund platziert wird, sollte die Textfarbe auf ‚Dark‘ gesetzt werden. Umgekehrt, wenn Ihr Blog auf einem dunklen Hintergrund platziert wird, sollte die Textfarbe auf ‚Hell‘ eingestellt werden.

Kopfzeile 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 von großartigen 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. Du kannst den Stil deines Textes auch mit den Optionen fett, kursiv, Kapitälchen und unterstrichen anpassen.

Kopfzeilen-Schriftgröße

Hier kannst du die Größe deines Kopfzeilentextes anpassen. Sie können den Schieberegler ziehen, um die Größe Ihres Textes zu erhöhen oder zu verringern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Das Eingabefeld unterstützt verschiedene Maßeinheiten, d.h. du kannst „px“ oder „em“ nach deinem Größenwert eingeben, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

Standardmäßig erscheinen alle Textfarben in Divi als weiß oder dunkelgrau. Wenn Sie die Farbe Ihres Kopfzeilentextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus dem Farbwähler.

Kopfzeilen-Buchstabenabstand

Der Buchstabenabstand betrifft den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Schieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. Sie können „px“ oder „em“ nach dem Größenwert eingeben, um die Art der Einheit zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe beeinflusst den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsschieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts vom Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. du kannst „px“ oder „em“ nach deinem Größenwert eingeben, um die Art der Einheit zu ändern.

Schriftart

Die Schriftart deines Textes kannst du ändern, indem du die gewünschte Schriftart aus dem Dropdown-Menü auswählst. Divi wird mit Dutzenden von großartigen 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. Du kannst den Stil deines Textes auch mit den Optionen fett, kursiv, Kapitälchen und unterstrichen anpassen.

Schriftgröße

Hier kannst du die Größe deines Textes anpassen. Sie können den Schieberegler ziehen, um die Größe Ihres Textes zu erhöhen oder zu verringern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Das Eingabefeld unterstützt verschiedene Maßeinheiten, d.h. du kannst „px“ oder „em“ nach deinem Größenwert eingeben, um die Art der Einheit zu ändern.

Textfarbe

Standardmäßig erscheinen alle Textfarben in Divi als weiß oder dunkelgrau. Wenn Sie die Farbe Ihres Textes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus dem Farbwähler.

Buchstabenabstand

Der Buchstabenabstand betrifft den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Fließtext vergrößern möchten, verwenden Sie den Schieberegler, um den Abstand einzustellen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. Sie können „px“ oder „em“ nach dem Größenwert eingeben, um den Einheitentyp zu ändern.

Zeilenhöhe

Die Zeilenhöhe beeinflusst den Abstand zwischen den einzelnen Zeilen Ihres Fließtextes Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsschieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts vom Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. du kannst „px“ oder „em“ nach deinem Größenwert eingeben, um die Art der Einheit zu ändern.

Meta-Schrift

Du kannst die Schriftart deines Metatextes ändern, indem du die gewünschte Schriftart aus dem Dropdown-Menü auswählst. Divi wird mit Dutzenden von großartigen Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Deiner Seite. Du kannst den Stil deines Textes auch mit den Optionen fett, kursiv, Kapitälchen und unterstrichen anpassen.

Meta-Schriftgröße

Hier kannst du die Größe deines Metatextes anpassen. Sie können den Schieberegler ziehen, um die Größe Ihres Textes zu erhöhen oder zu verringern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Das Eingabefeld unterstützt verschiedene Maßeinheiten, d.h. du kannst „px“ oder „em“ nach deinem Größenwert eingeben, um den Einheitentyp zu ändern.

Meta-Textfarbe

Standardmäßig erscheinen alle Textfarben in Divi als weiß oder dunkelgrau. Wenn Sie die Farbe Ihres Meta-Textes ändern möchten, wählen Sie die gewünschte Farbe aus dem Farbwähler mit dieser Option.

Meta Letter Spacing

Der Buchstabenabstand betrifft den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Metatext vergrößern möchten, verwenden Sie den Schieberegler, um den Abstand einzustellen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. Sie können „px“ oder „em“ nach dem Größenwert eingeben, um den Einheitstyp zu ändern.

Meta-Zeilenhöhe

Die Zeilenhöhe beeinflusst den Abstand zwischen den einzelnen Zeilen Ihres Meta-Texts. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsschieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts vom Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, d.h. Sie können „px“ oder „em“ nach dem Größenwert eingeben, um den Einheitentyp zu ändern.

Rahmen verwenden

Wenn Sie diese Option aktivieren, wird ein Rahmen um Ihr Modul gelegt. Dieser Rahmen kann mit den folgenden bedingten Einstellungen angepasst werden.

Rahmenfarbe

Diese Option beeinflusst die Farbe des Rahmens. Wählen Sie eine benutzerdefinierte Farbe aus dem Farbwähler, um sie auf Ihren Rahmen anzuwenden.

Rahmenbreite

Standardmäßig haben Rahmen eine Breite von 1 Pixel. Sie können diesen Wert erhöhen, indem Sie den Bereichsschieberegler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts vom Schieberegler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, d. h. Sie können die Standardeinheit „px“ in eine andere Einheit wie em, vh, vw usw. ändern.

Rahmenstil

Rahmen unterstützen acht verschiedene Stile, darunter: durchgezogen, gepunktet, gestrichelt, doppelt, Rille, Grat, Einschub und Ausschnitt. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihre Umrandung anzuwenden.

Erweiterte Log-Optionen

In der Registerkarte „Erweitert“ finden Sie Optionen, die für erfahrene Webdesigner nützlich sein könnten, wie z. B. benutzerdefiniertes CSS und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können auch benutzerdefinierte CSS-Klassen und IDs auf das Modul anwenden, die zur Anpassung des Moduls in der style.css-Datei Ihres Child-Themes verwendet werden können.

CSS ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet wird. Eine ID kann verwendet werden, um ein benutzerdefiniertes CSS-Styling zu erstellen oder um Links zu bestimmten Abschnitten Ihrer Seite zu erstellen.

CSS-Klasse

Geben Sie optionale 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, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem Divi Child Theme oder in den benutzerdefinierten CSS verwendet werden, die Sie Ihrer Seite oder Ihrer Website über die Divi Theme Options oder Divi Builder Page Settings hinzufügen.

Custom CSS

Custom CSS kann auch auf das Modul und alle internen Elemente des Moduls angewendet werden. Im Abschnitt „Custom CSS“ finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS hinzufügen können. Die CSS-Eingaben in diesen Einstellungen sind bereits in Style-Tags verpackt, so dass Sie nur noch die CSS-Regeln durch Semikolons getrennt eingeben müssen.

Sichtbarkeit

Mit dieser Option können Sie steuern, auf welchen Geräten Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktop-Computern einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Module auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente aus der Seite entfernen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.