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:
Hover-Animation für das Divi-Standard-Menü
Die Gestaltungsmöglichkeiten des Standard-Menüs im Divi-Theme sind beschränkt. Es lässt sich aber noch das eine oder andere herauskitzeln. Heute zeigen wir Ihnen eine einfache Animation für das Standardmenü.
Notfallplan: Admin-Zugang zur WordPress-Website durch die Hintertür
Es kann vorkommen, dass Sie aus Ihrem Wordpress-Administratorkonto ausgesperrt werden und weder Ihr Passwort ändern noch auf Ihre Website zugreifen können. Mit diesem Tweak haben Sie eine zusätzliche Möglichkeit, den Zugang per FTP wiederherzustellen.
Schaltflächen im Divi-Visual Builder links gruppieren
Der Visual-Builder des Divi-Themas bietet am unteren Rand des Monitors eine Reihe von Schaltflächen, mit denen Sie verschiedene Aktionen durchführen können – etwa das Speichern der Seite etc. Einige dieser Schaltflächen befinden sich unten rechts auf der Seite. An dieser Stelle werden jedoch auch häufig Benachrichtigungs- und Chat-Komponenten angezeigt. Wenn Sie vermeiden möchten, dass die Schaltflächen diese Komponenten verdecken, können Sie die Steuerelemente des Visual Builders auf die linke Seite verschieben.
Divi-Button anstelle eines beliebigen Standardbuttons anzeigen
Häufig verwenden Plugins oder Hacks den Standardbutton, wie er ihn HTML üblich ist. Doch das können Sie ändern und stattdessen den hübschen Divi-Button anzeigen lassen.
Automatische URL-Verlinkung in Kommentaren deaktivieren
In WordPress-Kommentaren werden eingefügte URL automatisch in Links umgewandelt. Das kann mal praktisch und mal störend sein. Wie man die Funktion ausschaltet, zeigen wir in diesem Tipp.
Zweite Textzeile zum Divi-Button hinzufügen
Im Button-Modul des Divi-Themes lässt sich standardmässig bloss eine einzige Textzeile platzieren. Wem das nicht genügt und wer gerne eine zweite Textzeile hätte, muss ein wenig nachhelfen. Wir zeigen Ihnen wie.
Aktuellen Beitragstitel und Link zum Mail des Divi-Kontaktformulars hinzufügen
Das Divi-Theme enthält ein Kontaktformularmodul, mit dem Website-User Nachrichten an Ihr E-Mail-Postfach senden können. Wenn das Kontaktformular auf mehreren Beiträgen oder Seiten erscheint, kann es nützlich sein, zu wissen, auf welchem Beitrag oder auf welcher Seite das Kontaktformular abgeschickt wurde. Hier erfahren Sie, wie der Beitragstitel und/oder die URL in die E-Mails des Kontaktformular-Moduls eingefügt werden.
Abgestempelt: Hinweis-Badge im Look & Feel eines Poststempels
Hinweise, welche auf die Website «gestempelt» werden, sind beliebt und ein auffälliges Element dazu. Oft werden dafür Grafiken verwendet. Das ist aber gar nicht nötig – mit dem Text-Modul des Divi-Themes und etwas CSS-Code geht das ganz praktisch.
WordPress-Schlagwörtern (Tags) einen passenderen Namen geben
Wordpress bietet für Beiträge die so genannten Tags (oder Schlagwörter) an. Damit lassen sich Beiträge gut thematisch ordnen. Oft gäbe es aber einen passenderen Namen als das standardmässige «Schlagwort». Wie ebendiese neu benamst werden können, zeigen wir Ihnen in diesem Hack.
Lightbox-Popup des Divi-Galerie-Moduls deaktivieren
Das Divi-Theme kommt mit einem ansprechenden Galeriemodul daher. Wird es mit Bildern befüllt, wird ein Klick das jeweilige Bild als Popup in der Lightbox anzeigen. Das behagt nicht in jedem Fall – manchmal wäre eine reine Bildershow ausreichend. Darum zeigen wir heute, wie Sie das Bilder-Popup deaktivieren.
Pflichtfelder im Kontaktformular-Modul des Divi-Themes automatisch mit Stern * markieren
Das Divi-Theme enthält ein Kontaktformular-Modul, welches für einfache Formulare ganz praktisch ist. Es fehlt ihm aber beispielsweise bereits die übliche Option, Pflichtfelder des Formulars mit einem Asterisk oder Stern * anzuzeigen – so wie dies in anderen Formulartools völlig normal ist. Dies können Sie mit einem einfachen Script nachrüsten.
Animation der Filter-Portfolio-Übersichten deaktivieren
Die Portfolio-Übersichten werden out of the box elegant in den Inhaltsbereich «eingeschoben». Das mag einigen der Spielerei zu viel sein. Wer die Liste lieber ohne Slide-In-Bewegung angezeigt erhalten möchte, kann die Animation ganz einfach deaktivieren.
Werbung
Werbung
