Nachdem wir uns im letzten Teil unserer Serie mit dem Einstellungsbereich des Divi Blog Moduls unter „Inhalt“ vertraut gemacht haben, kümmern wir uns diesmal um die Optionen im Bereich „Ansicht“ und „Fortgeschritten“.
Entwurf
Im Einstellungsbereich Entwurf finden sich überwiegend Optionen, die sich auf die Darstellung der Elemente des Blog Moduls beziehen.
Entwurf: Layout
Über die Layout Auswahl kann zwischen der Anzeige der Blogbeiträge über die volle Breite oder als Gitter gewählt werden.
Volle Breite:
Gitter:
Falls die Option „Gitter“ gewählt wird, erscheint eine zusätzliche Schaltfläche „Schlagschatten verwenden„. Bei Aktivierung werden die Gitterelemente mit einem leichten Schlagschatten versehen.
Overall: Angezeigtes Bild-Overlay
Die Aktivierung dieser Option sorgt für einen Overlay Effekt. Fährt der Mauszeiger über einen Beitrag, wird dessen bevorzugtes Bild (auch Beitragsbild, Featured Image oder Thumbnail genannt) mit einer Overlay Farbe versehen und ein Symbol angezeigt.
Die genauen Einstellungen erscheinen erst nach Aktivierung der Option:
- Overlay-Symbolfarbe
- Farbe des Overlays beim Herüberfahren
- Iconpicker fürs Herüberfahren zur Auswahl des Symbols
Header, Body, Meta Text
Es folgen hintereinander drei Abschnitte für die Texteinstellungen der Überschrift (Header), des Fließtextes (Body) und der Metainformationen (Meta) wie Datum etc. Jeder Einstellungsabschnitt ist gleich aufgebaut:
Als erstes wird die Schriftart festgelegt inkl. der gewünschten Formatierung wie fett, schräggestellt, nur Großbuchstaben oder unterstrichen. Anschließend die Schriftgröße, -farbe, der Abstand zwischen den Zeichen und zwischen den Zeilen.
Rand
Wenn die Option „Rand“ aktiviert wird, erscheinen weitere Einstellungsmöglichkeiten, die die Art des umschließenden Rahmens um die einzelnen Elemente bestimmt. Wobei in der Gitteransicht auch ohne aktiviertem Rand stets ein feiner grauer Rahmen verwendet wird.
Fortgeschritten
Im Einstellungsbereich „Fortgeschritten“ finden sich fast ausschließlich Optionen im Zusammenhang mit CSS.
CSS-ID & Klassen
Dem eingebundenen Blog-Modul kann sowohl eine „CSS-ID“ als auch eine „CSS-Klasse“ zugewiesen werden. Damit besteht die Möglichkeit dieses Elemente über CSS-Code noch individueller zu gestalten.
Benutzerdefinierte CSS
Im Folgenden Abschnitt „Benutzerdefinierte CSS“ kann CSS für verschiedene Elemente des Blogmoduls vergeben werden. Dazu gehören: Vorher, Hauptelement, Nachher, Titel, Post Meta, Seitennavigation, Angezeigtes Bild, Mehr-lesen-Button.
Sehr praktisch: Wenn auf den jeweiligen Titel oder in den darunterliegenden Bereich geklickt wird, erscheint neben dem Titel der dazugehörige CSS-Selektor mit dem das Element auch direkt in der style.css eines Child Themes angesprochen werden kann.
Sichtbarkeit: Deaktivieren auf
Mit dieser Einstellung lässt sich die Anzeige des Blog Moduls auf bestimmten Gerätearten deaktivieren, falls z.B. die Anzeige des Moduls auf einem Handy nicht erwünscht ist.
Artikelreihe Divi Blog Modul
Alle Artikel zum Einsatz des Blog Moduls im Page Builder des Divi Theme:
- Divi Theme Blogansicht: Standardoptionen verstehen & nutzen
- Divi Blog Modul 1: Einstellungen für Inhalt
- Divi Blog-Modul 2: Einstellungen für Entwurf & Fortgeschritten
Ist es möglich anstelle von nur 3 Beiträgen, 5 Beiträge nebeneinander anzuzeigen zu lassen?
Vielen Dank für die Hilfe
Hi Catharina,
das ist nicht direkt über eine einfache Einstellung möglich. Aber Elegant Themes bietet hier eine passende Anleitung wie Du das mit Hilfe von CSS erreichen kannst: „How to Add More Columns to Your Divi Builder Posts or Pages“ oder hier noch ein anderes Tutorial „How to Add 5 or 6 Columns in Divi“ (leider beide nur in Englisch).
Ich habe das Problem, dass mein Layout nur in dem Blog und den Beiträgen richtig angezeigt wird. Wenn ich aber Kategorien in WordPress anlege erstellt WordPress automatisch Kategorieseiten auf die ich dann aber keinen Einfluss mehr habe. Diese Kategorieseiten übernehmen leider nicht das Layout von meiner Blogseite. Kann ich da irgendwas tun? Habe bisher leider vergeblich nach einer Lösung gesucht.
Hallo Jan-Ole,
diese Funktion ist leider derzeit noch nicht in Divi integriert. Du hast drei Möglichkeiten:
I. Falls es nicht allzu dringend für Dich ist, wurde am 17. Mai in einem Sneak Peak eine entsprechende Theme Builder Funktionalität für Divi angekündigt, die vermutlich das ermöglicht was Du willst. Allerdings legt Elegant Themes sich bei solchen Vorschauen nicht auf einen genauen Veröffentlichungstermin fest. Meist dauert es zwar nur einige Wochen bis die neue Funktion verfügbar ist, aber das kann Dir niemand sicher sagen.
II. Du legst ein Divi Child Theme an und erstellst Dir ein eigenes WordPress Template für die Archivseiten, dass Du dir anpasst. Allerdings musst Du dabei mit PHP-Code und ggf. mit CSS arbeiten. Es gibt auch Varianten, um eigene Layouts in die Templates einzubinden.
Ein paar ggf. hilfreiche Links:
III. Du siehst Dir das Page Builder Everywhere Plugin für Divi an, das die Möglichkeit bietet auch auf Indexseiten Layouts vor oder nach dem eigentlichen Inhalt einzubinden.
Allerdings vermute ich, dass Du auch das Design der angezeigten Beiträge beeinflussen willst und nicht nur oberhalb und unterhalb davon ein eigenes Layout einbinden. Dann musst Du doch wieder das Archiv Template bearbeiten und ggf. mit CSS nachhelfen.
Ist es möglich den Abstand zwischen Inhalt (Text) und Seitenrand zu minimieren. Auf anderen Seiten ist dieser Rand (besonders auf mobil) geringer, was die ohnehin schon geringe Fläche besser nutzt. Kann man das einstellen, muss man über CSS ran oder geht es gar nicht? Würde mich über Hilfe sehr freuen 🙂 Dennis
Hallo Dennis,
mir ist nicht klar in welchem Bereich der Website (allgemein, nur Blogansicht oder einzelner Beitrag, etc.) du etwas ändern möchtest.
Allgemeine Einstellungen zur Breite des Inhalts findest Du im Designmodifikator (Customizer) unter „Allgemeine Einstellungen“ > „Layout Einstellungen“. Dort lässt sich die Bereite des Inhalts einstellen.
Ich wäre aber achtsam mit dieser Einstellung, zumindest wenn Du viele Texte auf Deiner Website anzeigst. Denn genau genommen ist in der Desktopansicht nicht so wichtig wie viel Rand rechts und links zu sehen sind, als dass grob über den Daumen gepeilt eine Textzeile nicht viel mehr als 70-80 Zeichen besitzen sollte. Darüber hinaus leidet die Lesbarkeit der Texte. Weitere Infos findest du z.B. hier.
Da ist die Grundeinstellung in Divi leider nicht so optimal.
Wie kann ich die automatische Verlinkung von Beitragsbild und -überschrift entfernen? Von der Blogansicht soll man nicht in die Ansicht der einzelnen Beiträge gelangen!
Auf den Seiten gibt es verschiedene Blogs. Bei einem anderen sollen die Links vorhanden sein.
Mit den normalen Bordmitteln ist das derzeit nicht zu machen. Das ist ja auch ein eher ungewöhnliches Ziel eine unverlinkte Blogansicht zu erstellen. Im Moment müsstest Du vermutlich eine entsprechend angepasste eigene Template Datei in Deinem Child Theme erstellen oder vielleicht ließe sich das auch über die
functions.phperledigen. Das ist nicht so ganz einfach. Ich würde einfach mal den Elegant Themes Support anschreiben, vielleicht haben die eine Lösung parat.Schon vor einiger Zeit hat Elegant Themes ja angekündigt, dass es ein Update geben wird, das Divi mit Theme Builder Funktionen ausstattet. Damit wirst Du Dir wohl auch relativ frei eine ganz eigene Blogansicht gestalten können und vermutlich so auch Deinen Wunsch nach einer unverlinkten Ansicht realisieren können. Allerdings weiß niemand, wann Elegant Themes so weit ist.
Hallo,
ist es möglich die Länge in der einzelnen Kästen so einzustellen, das diese immer gleich sind und nicht wie auch oben zu sehen der rechte Kasten kürzer ist. Also unabhängig des Inhalts immer gleiches Format der Voransicht. Vielen Dank.
Hallo Andreas,
das ist mit Bordmitteln nicht möglich, aber mit Hilfe von ergänzendem CSS schon. Ein paar Beispiele:
Hallo Nils,
super vielen Dank für die schnelle Hilfe. Hat mir echt Zeit gespart. VG
Hallo Nils,
wie oder wo kann ich das Layout beeinflussen, das beim Aufruf eines einzelnen Blogbeitrags angezeigt wird? Da wird mir das Hintergrundbild der Webseite nicht angezeigt. Alle Beiträge sollen den gleichen Hintergrund haben wie die normalen Seiten. Hast Du da einen Tipp für mich?
Vielen Dank!
Und zum Schluss noch die Masterfrage 😀
Wie kann ich die Seite, die einen Blogbeitrag anzeigt, mit Divi gestalten. Wenn ich auf einen Eintrag in der Übersicht des Moduls klicke, wird mir der ganze Artikel in einem Standardlayout präsentiert 🙁 Aber ich möchte ja nicht durch hunderte Blogartikel durchgehen und ein neues Layout eintragen. Wie kann ich also den Standard selbst verändern? Mit dem Divi Builder natürlich.
Simple Antwort: Derzeit mit Bordmitteln gar nicht. Nachdem Elegant Themes vor knapp einem Jahr angekündigt hat Divi entsprechende Theme Builder Funktionen zu verpassen, warten nun alle mittlerweile mehr oder weniger ungeduldig darauf, dass das entsprechende Update endlich veröffentlicht wird.
Es gibt ein paar Workarounds, wie sich eine globale Vorlage anzulegen, aber so richtig cool sind die Lösungen nicht und vor allem nicht nachträglich.
Leider ein Grund warum auch einige schon in Richtung Elementor Pro abgewandert sind.
Danke für die Info, auch wenn sie etwas frustrierend ist. Elementor ist für mich aber eher keine Option derzeit. Daher komme ich grad 😉
Wie kann ich aus dem Text „mehr lesen“ einen Button machen? Irgendwo habe ich das mal in einem Bild zum Blog-Modul gesehen. Aber nur als Ergebnis, nicht als Beschreibung, wie man es macht.
Grundsätzlich hat man bei Divi immer mit dem Einsatz des Blog Moduls im Builder mehr Optionen als wenn man die „normale“ Blogfunktionalität des Themes verwendet.
Trotzdem sind Deine Anliegen derzeit auch nicht über Bordmittel zu erreichen. Die Gestaltung eines Buttons ist im Moment auch nur über CSS machbar. Hier ist eine ganz gute Anleitung.
Wie kann ich am Ende der Blogartikelübersicht nicht nur „Ältere Einträge“ sehen, sondern eine Liste der Seitennummern entsprechend der Anzahl der Einträge in der Übersicht? Bei 100 Artikeln und 20 Einträgen pro Übersichtsseite sollte es die Seiten 1,2,3,4,5 geben.
Auch hier nicht mit Bordmitteln zu erreichen. Elegant Themes empfiehlt selbst den Einsatz eines Plugins zu diesem Zweck.
Hey Nils,
toll deine Website hier. Vielleicht kannst du mir helfen. Ich möchte gern, dass meine einzelnen Beiträge, also die Blogposts, den gleichen Aufbau haben wie meine Seiten im Menü. Kann ich den oberen Bereich des Blogposts, also da wo die Überschrift, Autor etc. steht irgendwo verändern? Die Farbeinstellung habe ich hinbekommen, Ich würde aber gern den Posttitel rechts haben (anstatt links) und mein Headerbild darunter legen. Falls du magst siehst du es auf all meinen einzelnen Seiten, wie es aussehen soll. Danke für deine Zeit und vielleicht hast du ja einen Tipp für mich.
Liebe Grüße,
Franzi
Hallo Franzi,
entweder verstehe ich Dein Anliegen nicht richtig oder Du hast es in der Zwischenzeit schon so hinbekommen wie Du es wolltest!? Denn wenn ich mir den Blogartikel bei Dir ansehe liegt dort bereits das Headerbild unter der nach rechts ausgerichteten Überschrift.
PS: Ich musste etwas recherchieren/raten um zu Deiner Seite zu kommen, denn Du hattest in Deiner URL einen Tippfehler eingebaut herzens-kommunikations.de
Jap, hat alles geklappt 🙂