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.
Konkret: Das Divi-Theme kann von Haus aus nicht unterscheiden, welcher Art die Artikel sind, welche in einem Blog-Modul angezeigt werden. Sie hingegen können das und vergeben vermutlich verschiedene Kategorien.
Das machen auch wir in der Praxis von Dr. Code nicht anders. Wobei WordPress jeder Kategorie einen Slug vergibt. Diese Slugs werden für diesen Tipp benötigt – Sie finden diese im WordPress-Backend unter Beiträge/Kategorien.
Wir verwenden etwa die Kategorien
- Divi-Theme – Slug: divi-theme
- WordPress – Slug: wordpress
- PlugIns – Slug: plugins
- Scripts – Slug: scripts
Nun benötigen Sie noch den CSS-Code, der die Farbe eingiesst. Der steht unten und gehört in das CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:
.et_pb_blog_grid .category-divi-theme.et_pb_post {
background-color: lightgreen;
}
.et_pb_blog_grid .category-wordpress.et_pb_post {
background-color: lightblue;
}
.et_pb_blog_grid .category-scripts.et_pb_post {
background-color: lightgrey;
}
.et_pb_blog_grid .category-plugins.et_pb_post {
background-color: pink;
}Betrachten Sie z.B. Zeile 4. Da steht .et_pb_blog_grid .category-wordpress.et_pb_post {
Der Begriff wordpress ist der Slug unserer WordPress-Kategorie und spricht also diese Beiträge an. Sie ersetzen diese Namen also mit einem Ihrer existierenden Slugs und schon funktionierts. Wichtig ist bloss, dass Sie dem Slug noch ein category- voranstellen. Anpassen möchten Sie vielleicht überdies auch die Hintergrundfarben.
Tatsächlich ein Highlight.
Unser Code ergibt übrigens folgende Blog-Darstellung:
Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code
Wordpress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.
Portfolio-Titel und Meta-Texte im Divi-Portfolio-Modul als Einblendung über dem Beitragsbild anzeigen
Die Module Portfolio und filterbares Portfolio des Divi-Themes haben einige Einschränkungen: Der Titeltext und der Metatext (Kategorie) befinden sich unter dem Bild. Was aber, wenn Sie das ändern und auf dem Bild platzieren möchten? Dafür gibt es in den Modulen keine Einstellungen. Hier erfahren Sie, wie Sie den Titel- und Metatext über dem Bild im Divi Portfolio-Modul platzieren können.
Icons im Divi-Toggle-Modul und in den Accordions links statt rechts platzieren
Die beiden Divi-Theme-Module «Toggle» (bzw. «Umschalter») und «Accordion» (auch «Akkordeon» genannt) ähneln sich stark – und doch sind beide verschieden. In diesem Beitrag zeigen wir Ihnen den Unterschied zwischen den beiden Modulen und demonstrieren Ihnen eine einfache Lösung, um die Modul-Icons weg vom gewohnten Platz rechts nach links zu verschieben.
Links des WordPress-Menüs im neuen Browserfenster oder -Tab öffnen lassen
Die Menüs auf der Wordpress-Website öffnen Links standardmässig im selben Fenster. Doch das ist nicht immer ideal – ab und an sollte vielleicht auch ein Menülink im neuen Fenster oder Tab geöffnet werden. Das lässt sich ganz einfach definieren.
Titel und Überschriften global stylen
Im Divi-Theme können Sie die Titel und Überschriften via Customizer stylen. Es geht aber auch via CSS und wirkt global. Heute geben wir Ihnen einen kleinen Bausatz für individuell gestaltete Titel zur Hand.
ALT- und Title-Tags aus der Mediathek in Divi verwenden
Im Bild-Modul des Divi-Themes lassen sich ALT-Texte, welche etwa das abgebildete Bild in Worten beschreiben, problemlos erfassen. Ebenso die Title-Tags. Wer aber – und das tun sicher viele – Bilder direkt aus der Mediathek übernimmt, wird bald feststellen: Weder die ALT-Tags noch die Title-Tags werden in Divi nicht angezeigt. Das lässt sich aber nachbessern und wir zeigen Ihnen, wie das geht.
Klickflächen der Divi-Umschalter und -Accordions vergrössern
Ist Ihnen schon einmal aufgefallen, dass die Divi Toggle- und Accordion-Module schwer anzuklicken sind? Der klickbare Bereich ist nur so hoch wie der Text selbst – also etwa 1/4 der Höhe des Toggles. Wir zeigen Ihnen eine einfache Möglichkeit, den klickbaren Bereich der Divi Toggle- und Accordion-Module über den Text hinaus auf das gesamte Modul zu erweitern.
WordPress-Beiträge und/oder -Seiten duplizieren – ganz ohne Plugin
Es gibt zahlreiche Plugins im Wordpress-Directory, welche das Duplizieren bestehender Wordpress-Beiträge und/oder -Seiten erlauben. Das ist zwar praktisch; es geht aber auch ganz ohne Plugin – dafür mit ein wenig PHP-Code. Wir zeigen Ihnen wie.
Update-Option für das Divi-Theme ausschalten
Das Divi-Theme lässt sich in Wordpress automatisch aktualisieren. Das ist eigentlich keine schlechte Idee, denn Themes und Plugins sollten aktuell gehalten werden, um Sicherheitslücken zu vermindern. Jedoch kann das Update auch Fallstricke mit sich bringen – besonders bei umfangreichen Websites. In so einem Fall ist es klüger, Updates jeweils händisch auszuführen und zu kontrollieren, ob alle Funktionen noch wie gewünscht arbeiten.
Formularfelder bei Bearbeitung highlighten
Formulare sind beliebt im Internet. Kaum eine Website, die ohne Formulare auskommt. Sie können den Usern bei der Orientierung aber zusätzlich helfen, wenn Sie ihnen zeigen, wo genau sie sich im Formular befinden. Das geht ganz einfach mit ein wenig CSS.
Statt Zufall: Spaltenzahl im Divi-Blogmodul definieren
Das Blog-Modul des Divi-Themes ist recht beschränkt, was die Einstellungsmöglichkeiten für die Ausgabe betrifft. Vor allem hinsichtlich Spalten wünscht man sich oft mehr Optionen. Die gibt es auch: mit einem einfachen Trick. Hier zeigen wir Ihnen wie’s geht.
Länge des Auszugs (Excerpt) unter WordPress anpassen
Die Standardlänge des WordPress-Auszugs ist oft zu kurz, um die Zusammenfassung eines Beitrags zu beschreiben. Sie können aber die Länge des Auszugs jederzeit ändern.
Werbung
Werbung
