Trick # 188 | Dieser Beitrag beinhaltet 631 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
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:
Höhe von Testimonial-Modulen im Divi-Theme angleichen
Beim Designen mit dem Divi-Theme bedeutet ein einheitliches und ansprechendes Erscheinungsbild oft, dass man sich mit unterschiedlichen Höhen von Inhalten in Modulen wie dem Testimonial-Modul auseinandersetzen muss. Ungleichmässige Höhen können den visuellen Fluss Ihrer Website stören. Hier erfahren Sie, wie Sie die Höhen Ihrer Testimonial-Module angleichen können.
Eigene Farben im Divi-TinyMCE-Farbwähler
Der TinyMCE-Texteditor des Divi-Themes liefert standardmässig einige mögliche Farben. Jedoch passen die meist nur mehr schlecht als recht zumn Design der Website, was die Farbpalette weitgehend unbrauchbar macht.. Heute fügen wir der Farbpalette des Divi-Text-Editors weitere Farben hinzu.
«Divi AI» im Rolleneditor des Divi-Themes standardmässig deaktivieren
Divi AI ist das integrierte Tool für künstliche Intelligenz im Divi-Theme. Damit lässt sich im Handumdrehen Content – etwa Texte oder Bilder – erstellen. Oft kann es entscheidend sein, die Kontrolle über die AI-Nutzung zu behalten. Das Deaktivieren von Divi AI, wo es nicht benötigt wird, hilft dabei.
Erlaubte Dateigrösse für Mediathek-Uploads einfach anpassen
Die Optimierung von Bildern ist ein entscheidender Aspekt des Website-Managements. Leider laden viele User zu grosse Bilder auf ihre Website. Das 30-Megabytebild aus der Kamera ist im Web schlicht unnötig, verlangsamt den Pageload, verschlechtert die Suchmaschinenresultate und frisst unnötig Speicherplatz. Um dies zu verhindern, können Sie die maximale Grösse für das Hochladen von Dateien auf der WordPress-Website begrenzen.
Aprilscherz: «Der nervige Hover-Effekt»
Heute ist der 1. April. Zeit für einen kleinen Streich! Mit einem kleinen CSS-Code erreichen Sie, dass jegliche Buttons im WordPress-Backend verschwinden, sobald man die Maus darüber bewegt. Ist ganz einfach und bringt WordPress-Admins zum Staunen. Und Verzweifeln.
Register im Divi-Theme vertikal statt horizontal anordnen
Das Divi-Theme hat ein übersichtlicher Registermodul an Bord, mit dem sich Inhalte schön strukturieren lassen. Allerdings bietet das Modul von Haus aus nur eine horizontale Navigation – bzw. Tab-Auswahl. Eine horizontale Anordnung fehlt. Das lässt sich natürlich leicht anpassen.
Beitragsnummerierung im Backend anzeigen – wahlweise auch im Frontend
Möchten Sie die fortlaufende Beitragsnummer in der WordPress-Beitragsübersicht anzeigen lassen? Dieser Trick kann besonders hilfreich sein, wenn Sie Beiträge chronologisch analysieren oder organisieren möchten. In diesem Beitrag zeigen wir, wie Sie mit einer handlichen Funktion Beitragsnummern aufgrund des jeweiligen Veröffentlichungsdatums berechnen, in der Übersicht hinzufügen und die Backend-Spalte sortierbar machen.
Suchformular des Divi-Themes stylen
Out oft the box schaut das Suchfeld des Divi-Themes etwas ärmlich aus. Mit unserem CSS-Bausatz können Sie das Suche-Modul aber ganz einfach dem Styling Ihrer Website anpassen.
Mediathek: Upload-Ordner in WordPress definieren
Wenn Sie mit WordPress arbeiten, haben Sie sich vielleicht schon einmal überlegt, den Standardordner für hochgeladene Dateien zu ändern. WordPress speichert die Mediathek standardmässig im Verzeichnis wp-content/uploads und legt alle Oploads dort ab. Es gibt jedoch eine einfache Möglichkeit, diesen Speicherort zu ändern.
Der Speed-Booster-Hack: WordPress-Seite in Rekordzeit laden – der 550. Beitrag von Dr. Code
Zur Feier des 550. Website-Hacks hat Dr. Code in der Trickkiste gekramt. Wir bauen uns heute den eigenen Speed-Booster für die WordPress-Website. Funktioniert garantiert und macht die Website merklich schneller.
Link-Special – Trick #1: Externe Links automatisch mit einem Icon versehen
Externe Links in einem Blogbeitrag oder auf einer Website zu kennzeichnen, ist nicht nur eine Frage des Designs, sondern auch der Benutzerfreundlichkeit. Es hilft den Besuchern, schnell zu erkennen, dass sie die Website verlassen, wenn sie auf einen bestimmten Link klicken. Eine elegante Lösung dafür ist das Hinzufügen eines Icons zu externen Links.
Link-Special – Trick #2: Automatische Verlinkung von Schlagwörtern in WordPress-Beiträgen
Schlagwörter (Tags) sind ein wesentlicher Bestandteil, um Inhalte auf einer WordPress-Website besser zu organisieren und die Navigation für User zu vereinfachen. Doch meist werden die Schlagwörter in den Lauftexten der Beiträge nicht mit den entsprechenden Tag-Archiven verlinkt. Dieser Beitrag zeigt, wie Sie mit einem einfachen PHP-Snippet Schlagwörter in Texten automatisch verlinken können.
Werbung
Werbung
