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:
Glänzenden Hover-Effekt bei Bildern anzeigen
Bilder lassen sich ganz einfach mit einem Glanz-Effekt versehen, sobald der Mauszeiger über das Bild bewegt wird. Dieser Hover-Effekt wird mit ein wenig CSS-Code erzielt.
Eine «Sticky-Widget»-Seitenleiste für Ihre Divi-Website
Mit einem «Sticky-Widget» können Sie Ihrem Theme Widgets hinzufügen, die auch dann angezeigt werden, während der Benutzer auf der Seite nach unten scrollt. Wir zeigen Ihnen, wie Sie dem Divi-Theme einen «Sticky-Widget»-Bereich für die Seitenleiste hinzufügen.
Sämtliche Buttons im Visual Builder des Divi-Themes links anzeigen
Der Visual Builder des Divi-Themes bietet am Seitenfuss mehrere Buttons an, welche auf die gesamte Darstellungsbreite verteilt werden. Wer die Buttons lieber zusammen gruppieren möchte, kann diese auch auf einfache Weise links darstellen lassen. Wir zeigen Ihnen wie’s geht.
Einfache Checklisten mit HTML- und CSS-Code erstellen
Auf Ihrer Website können Sie ganz einfach Checklisten darstellen. Bloss ein wenig HTML- und CSS-Code ist nötig.
Seitenaufrufe zählen und auf der Website anzeigen
Der Mensch ist ein soziales Wesen. Das lässt sich für Ihre Website nutzen: Interessieren einzelne Beiträge Ihrer Website besonders viele Menschen, können Sie dies mit einem Aufrufzähler ausweisen. Die Chance, dass noch mehr Leute klicken, steigt. Und einzurichten, ist es auch ganz einfach.
Das Divi-Slider-Modul vertikal statt horizontal darstellen
Aus dem üblicherweise horizontalen Slider-Modul des Divi-Themes lässt sich ganz einfach ein vertikaler Slider machen. Sie benötigen bloss ein wenig CSS-Code.
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.
Werbung
Werbung
