2022 veröffentlichte Dr. Code einen Blog-Modul-Special mit zahlreichen Tipps und Tricks zum Blog-Modul des Divi-Themes. Diese Beiträge finden Sie in der folgenden Übersicht.
Die Metatexte (Datum, Kategorie, AutorIn) erscheinen im Divi-Blog-Modul standardmässig unter dem Titel als Links. Es gibt aber die Möglichkeit, daraus Schaltflächen zu bauen und diese über das Bild zu legen. Hier zeigen wir Ihnen, wie Sie dies hinkriegen.
Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem Beitrag verlinkt ist.
Das Divi-Modul «Blog» stellt allerlei Inhalte dar. Jedoch immer in derselben Reihenfolge: Titel, Meta-Angaben und am Schluss den Inhaltsauszug. Doch so fix ist diese Reihenfolge nicht: Um die Abfolge der Angaben zu ändern, greifen Sie via CSS-Code ein.
Das Blogmodul des Divi-Themes bietet eine Handvoll gute Einstellmöglichkeiten; die Paginierung allerdings - also z.B. der «ältere Beiträge»-Link - sieht etwas erbärmlich aus. Er lässt sich aber mit wenig CSS in eine ansprechende Schaltfläche umwandeln. Hier erfahren Sie, wie das geht.
Das Blog-Modul des Divi-Themes verlinkt standardmässig den Titel des Beitrags mit der Detailseite dessen, die Kategorie mit der entsprechenden Übersicht und den/die AutorIn mit der persönlichen Übersicht des/der Verfasserin. Das ist oft nützlich - es gibt aber Situationen, in welchen man dies nicht möchte. Mit wenig CSS-Code ist auch dies möglich.
Das Seitenverhältnis der Beitragsbilder, welche im Divi-Blog-Modul angezeigt werden lässt sich anpassen. Standardmässig bildet das Blogmodul Bilder mit 400x250px ab - was einem Seitenverhältnis von 8:5 entspricht. Die Darstellung lässt sich aber übersteuern; selbst dann, wenn das Bild auf dem Server gar nicht im gewünschten Format vorliegt. Wir zeigen Ihnen wie das geht.
Dieses Sujet ist für mich ein Highlight. Und ums highlighten geht es auch gleich in diesem Hack: Die Beiträge, welche im Blog-Modul des Divi-Themes gelistet werden, können nämlich farblich unterschiedlich hinterlegt werden. So finden sich User noch besser zurecht und finden Inhalte zu Themen, die sie interessieren, besonders schnell. Das aufzusetzen, ist wirklich unglaublich einfach. Auch darum: Ein Highlight.
Im Blog-Modul des Divi-Themes lassen sich Meta-Angaben anzeigen: Kategorien, Datum, AutorIn etc. Diesen Meta-Angaben können passende Icons vorangestellt werden. Wir zeigen Ihnen, wie dies geht.
Elegant-Themes hat zwar dem Divi-Blog-Modul eine Paginierung spendiert, mit welcher die gelisteten Beiträge durchforstet werden können. Es geht aber noch hübscher: Mit einem «Load more»-Button.
Wir werden ein Divi-Blogmodul verwenden um es in der Seitenleiste zu platzieren und die letzten Beiträge anzuzeigen. Ohne diese Methode müssten Sie ein Widget verwenden - verlören aber damit einige Gestaltungsfreiheit, weil Widgets meist etwas starr sind, was die Einstellungsmöglichkeiten betrifft.
Das Divi-Blog-Modul kennt offiziell nur das «Gitterlayout» und die «volle Breite». Es fehlt ein Listenlayout. Doch dieses können Sie mit ein wenig Handarbeit selber gestalten.
Das Blog-Modul des Divi-Themes bietet Usern Paginierungslinks an, die «ältere Einträge» und «neuere Einträge» anzeigen, damit sie in einer langen Liste von Beiträgen navigieren können. Bloss vermögen die Textlinks oft nicht so recht zu überzeugen - das Divi-Modul bietet aber keine Funktion an, um dies zu ändern. Wir zeigen Ihnen, wie Sie die Texte dennoch einfach anpassen können.
Das Blog-Modul des Divi-Themes kann schon vieles - die Beitragsbilder lassen sich aber nur bedingt steuern. Versehen Sie die Beitragsbilder mit einem Rotations- und Zoom-Effekt, der aktiv wird, sobald Sie die Maus über das Bild bewegen.
Das Blogmodul des Divi-Themes ist «out of the box» nur so halbwegs hübsch anzusehen. Nachstylen ist auf jeden Fall gefragt. Besonders das Bild, welches in der Grid-Darstellung breiter ist als der darauf folgende Text, ärgert. Doch ein einziger CSS-Befehl schafft Abhilfe.
Das Blog-Modul des Divi-Themes bietet an, Metadaten eines Beitrags (Datum, Kategorien, Schlagwörter, AutorIn) anzuzeigen. Doch werden diese Angaben stets mit einem Trennzeichen «|» getrennt. Und vor dem Autor schreibt Divi ein «von» (oder «by») hin. Das lässt sich ändern.
keine Beiträge gefunden.
Werbung
Mit Ankern lassen sich Benutzerinnen und Benutzer einer Website gerne zu den zentralen Inhalten lenken. Die Sprungmarken (oder eben Anker) sind darum ein beliebtes Tool auf Websites. Dr. Code hat eine kleine Beitragsreihe zum Thema geschrieben.
Der Font-Special war die erste Mini-Serie von Dr. Code im Jahr 2021. Mit kleinen Hacks, mit denen der Umgang mit Schriftarten im Divi-Theme im Handumdrehen gelingt.
Ein paar Unarten des Webdesigns der 90er-Jahre sind glücklicherweise längst verschwunden. Aus Spass lässt sie Dr. Code hier noch einmal aufleben.
Leiten Sie das Auge des Betrachters/der Betrachterin. Mit ein paar Gestaltungstricks, welche als Eyecatcher dienen. Eine Dr. Code-Serie aus dem Jahr 2025 mit vier Beiträgen.
Keine Inhalte gefunden.
Werbung
