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:
Dem Informationstext-Modul (Blurb-Modul) des Divi-Themes einen hübschen Hover-Effekt hinzufügen
Mit dem Informationstext-Modul des Divi-Themes – auch «Blurb-Modul» genannt – lassen sich Teaser ganz einfach anlegen. Und mit ein wenig CSS-Code auch ganz nett aufhübschen. Wir zeigen Ihnen, wie das geht.
Styling-Showcase: Zeigen Sie die wichtigsten Stile Ihrer Website in einer Übersicht
Wenn Sie eine neue Website aufbauen werden Sie zweifelsohne oft im CSS-Stylesheet unterwegs sein und Anpassungen vornehmen. Praktisch wäre es, wenn Sie da eine Übersichtsseite mit den gängigsten Darstellungen hätten. So sehen Sie am besten, wie die Stylings zusammenpassen. Ein solches Styling-Showcase ist mit unserem Baukasten-Code schnell erstellt.
Radio-Buttons und Checkboxes in Divi-Formularen inline ausrichten
Im Kontaktformular-Modul des Divi-Themes lassen sich auch Radio-Buttons und Checkboxes anlegen. Bloss stellt Divi dann diese Felder immer untereinander als Block dar. Mit ein wenig CSS-Code lassen sich die Felder aber auf einer Zeile – eben: inline – oder in Spalten ausrichten.
Download-Button im Audio-Modul des Divi-Themes anzeigen
Geben Sie Ihren HörerInnen einen Bonus und bieten Sie die Möglichkeit, Audios von Ihrer Website herunterzuladen. Mit dem Audio-Modul des Divi-Themes geht das ganz simpel: Sie fügen dem Modul einfach einen Download-Button hinzu.
Bild mit einem Text- oder Button-Overlay versehen
Ein Bild können Sie auf Ihrer Divi-Website auch mit einem Button oder mit einem Textabschnitt überlagern. Das geht ganz einfach mit ein wenig CSS-Code.
Abhilfe bei verkorksten Icons: Icon-Font des Divi-Themes automatisch laden
Das Divi-Theme kommt mit einem eigenen Icon-Font daher. Meist wird der sauber angezeigt – es gibt aber ab und an Pannen. Wenn Sie sicherstellen möchten, dass der Divi-Icon-Font in jedem Fall angezeigt wird, sollten Sie den Font in Ihre Website einbinden. Es ist ganz einfach.
So schliessen Sie das Divi-Mobile-Menü – mit einem simplen Klick ausserhalb des Dropdowns
Wenn Sie eine Divi-Website auf dem Handy betrachten und das Menü öffnen, es dann aber schliessen möchten, neigen Sie vielleicht dazu, auf den Bereich ausserhalb des Dropdowns zu klicken (oder ihn zu berühren) – in der Annahme, dass dies wie bei anderen Apps funktioniert. Aber nein, im Divi-Theme ist das von Haus aus nicht der Fall. Dafür benötigen Sie ein jQuery-Snippet, das genau das tut.
Prozessschritte mit dem Divi-Theme abbilden
Hin und wieder stellen Websites Prozesse dar. Schritt 1, Schritt 2, Schritt 3 usw. Solcherlei lässt sich mit dem Divi-Theme gut bewerkstelligen. Die Schritte lassen sich mit einem Pfeilsymbol verdeutlichen. Wir zeigen Ihnen wie das geht.
Fünf Varianten, um Online-Texte zu highlighten
Mal eben mit dem Textmarker was markieren – das sollte man natürlich am Monitor nicht tun. Trotzdem zeigen wir Ihnen, wie Sie Text-Highlights hinzufügen können. Gleich fünf Varianten haben wir am Start.
Titel mit dekorativem Balken ergänzen
Titeldarstellungen im Divi-Theme lassen sich hübsch gestalten. Heute zeigen wir Ihnen zwei Beispiele, wie Sie die Titelzeile mit einem Rahmen «auffüllen» können. Das ist ein echter Eyecatcher. Und ganz einfach zu machen.
App-Farbe für den Mobilbrowser festlegen
Den Mobilversionen der Browser lässt sich – vornehmlich unter Android – Farbe geben. Statt in eintönigem Hellgrau erscheint der Mobilbrowser beim Seitenaufruf in Farbe. Ist ganz einfach zu machen und wir zeigen Ihnen wie.
Wenn das Icon im Divi-Testimonial-Modul verschwindet – der Bugfix
Mit dem Testimonial-Modul des Divi-Themes lassen sich Zitate und KundInnen-Meinungen adrett darstellen. Allerdings gibt es einen kleinen – aber nicht unerheblichen – Bug: Rundet man die Ecken des Moduls ab, wird das Icon des Moduls abgeschnitten. Unser CSS-Code schafft Abhilfe.
Werbung