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:
Auf der Loginseite verheimlichen, dass WordPress im Spiel ist
Wer die Login-Seite einer WordPress-Installation aufruft, bekommt im Title-Tag prompt den Hinweis, dass hier WordPress am Werk ist. Das ist weder hübsch noch nötig – und aus Sicht von Sicherheit und Branding sogar kontraproduktiv. Dr. Code zeigt, wie Sie diesen Hinweis elegant bodigen.
Mobiles Divi-Menu mit Scrollfunktion
Wenn Sie viele Menüpunkte in Ihrem Divi-Menü aufführen, kann es vorkommen, dass es auf Mobilanzeigen höher ist als der anzeigbare Bereich des Displays. Gerade bei Untermenüs kann das schnell mal passieren und es können einige der Menü-Punkte abgeschnitten und nicht mehr erreichbar sein. Heute zeigen wir Ihnen, wie Sie das Divi Mobile-Dropdown-Menü bei Bedarf in der Höhe scrollbar machen.
Bilder im Blog-Modul des Divi-Themes abwechslungsweise links und rechts anzeigen
Das Blogmodul kennt eine Rasteransicht und die Ansicht in voller Breite. Die Gestaltungsmöglichkeiten sind damit beschränkt. Eine interessante Form – nämlich die alternierende Anzeige des Beitragsbilds links und rechts – können Sie mit ein wenig CSS-Code erreichen.
Seiten ohne Divi-Builder einen Abstand zum Footer hinzufügen
Der Divi-Builder ist zwar famos – ab und an wird er aber nicht benötigt. Die Impressum- oder Disclaimer-Seite etwa könnten Sie auch ohne den Divi-Builder erstellen. Das lässt sich zwar schon machen – ergibt aber einen Schönheitsfehler: Der Abstand zwischen Inhalt und Footer fehlt. Lässt sich aber leicht beheben.
Divi-Projects als Widget in der Seitenleiste anzeigen
WordPress liefert ein Widget mit, um Beiträge in der Seitenleiste anzuzeigen. Wer jedoch das Divi-Theme benutzt und stattdessen die Projects auflisten lassen möchte, sucht vergebens. Die Projects lassen sich jedoch fast ebenso einfach auflisten, wie die WordPress-Beiträge. Wir zeigen Ihnen wie.
Edel geprägte Texte für jede Website
Neulich hat uns ein Mail erreicht: Darin war die Frage enthalten, wie sich Texte als Prägung auf der Website darstellen lassen. Natürlich ist das mit einem Grafikprogramm schnell gemacht – aber noch eleganter lösen wir dies mittels CSS-Code.
Pre-Loader auf der Divi-Website einrichten
Ein Pre-Loader ist in der Regel eine einfache Animation, die angezeigt wird, wenn Ihre Website geladen wird. Er kann äusserst hilfreich sein, wenn eine Website komplex ist und ihre Ladezeit einige Sekunden beträgt. Um das Interesse Ihrer Besucher aufrechtzuerhalten und zu verhindern, dass sie durch das Warten frustriert werden, sollten Sie einen Pre-Loader erwägen. Wie Sie Ihre Divi-Website mit einem Pre-Loader versehen, zeigen wir in diesem Tutorial.
3D-Bilder-Animation: Das Bild, das sich um die eigene Achse dreht
Zugegeben: Der heutige Hack ist eine Spielerei. Und gleich vorneweg: Er lässt sich mit beliebigen Elementen – also auch mit Texten u.ä. – bewerkstelligen. Aber am sinnvollsten (wenn sich denn überhaupt was drehen soll) sind schon Bilder. Wir zeigen Ihnen heute, was Sache ist.
So erstellen Sie eine Lesefortschrittsanzeige im Divi-Theme – der 500. Beitrag von Dr. Code
Heute – zum Anlass des 500. Beitrags aus der Praxis von Dr. Code – stellen wir ein Tutorial zur Verfügung, mit welchem sich ganz einfach eine Lesefortschrittsanzeige auf der Divi-Website erstellen lässt. Sie besteht aus einem Balken, der auf 100 Prozent anwächst, je weiter in einem Beitrag gescrollt wird. Das hilft Ihren Leserinnen und Lesern abzuschätzen, wieviel Content sie schon bewältigt haben und soll sie motivieren, weiter auf der Seite zu bleiben.
Anzahl der Spalten im Divi-Portfolio-Modul anpassen
Das Portfolio-Modul des Divi-Themes lässt einige Einstellungen zu; jedoch können Sie die Zahl der dargestellten Spalten nicht fix festlegen – es sei denn, Sie setzen CSS ein. Hier erklären wir Ihnen wie’s geht.
Textauszug-Feld (Excerpt) im WordPress-Backend für Seiten oder Beiträge deaktivieren
WordPress bietet die Option an, im Backend den Seiten und Beiträgen Textauszüge (oder Excerpts) zuzuweisen. Wenn Sie diese Auszüge nicht benötigen, kann es übersichtlicher sein, wenn Sie das Auszugfeld deaktivieren. Hier zeigen wir Ihnen, wie das geht.
Persönlichen Unterstreich-Effekt einrichten – für wichtige Texte und/oder Links
Wichtige Textpassagen können Sie augenfällig unterstreichen – mit einer kleinen Grafik, die dann exakt unter den hervorzuhebenden Text platziert wird. Wie das geht, zeigen wir in diesem Trick aus der Dr.-Code-Praxis.
Werbung
Werbung
