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:
Bilder dreidimensional auf der Webseite darstellen
Bilder müssen nicht immer einfach nur so gerade dastehen. Ein kleiner Dreh kann ansprechend wirken. Dabei ist es nicht einmal nötig, das Originalbild im Photoprogramm zu bearbeiten. Ein wenig CSS-Code hilft Ihnen.
Benutzerdefiniertes Navigationsmenü in WordPress ohne Plugin erstellen
Unabhängig davon, welches WordPress-Theme Sie verwenden, wird es mit ziemlicher Sicherheit mindestens eine Menüposition bieten, an der Sie Ihr Menü anzeigen können – normalerweise in der Kopfzeile Ihrer Website. Aber was, wenn Sie ein weiteres Menü benötigen, das an anderer Stelle auf Ihrer Website angezeigt werden soll? Ein zusätzliches Menü lässt sich ganz einfach installieren.
Stylishe Ribbons in 15 Varianten – ein Weihnachtspräsent von Dr. Code
Divi-Module lassen sich recht einfach mit einem kleinen Textbanner – einem Ribbon – darstellen und hervorheben. Wir zeigen Ihnen heute, wie Sie solche Ribbons mittels CSS-Code erstelln können. Sie können aus 15 Varianten wählen.
Mit dem hr-Element Akzente setzen
Das hr-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler hr lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.
Drei CSS-Styling-Tricks für HTML-Buttons
Mit dem HTML-Element button können Sie ganz einfach Schaltflächen erstellen. Mit der Zugabe von noch ein wenig CSS-Code, werden die Buttons überdies richtig schmuck. Drei Gestaltungsmöglichkeiten zeigen wir Ihnen in diesem Beitrag.
URL der WordPress-Suche anpassen
WordPress hat eine hervorragende Suchfunktion. Die Suchresultate werden sauber gefunden und auf einer Resultatsseite angezeigt. Diese hat jedoch eine kryptische URL – sie lässt sich aber leicht verbessern. Wir zeigen Ihnen wie.
WordPress-Backend: Dashboard-Widgets generell ausblenden
WordPress zeigt im Backend mehrere Widgets auf der Dashboard-Seite an. Einige Plugins und Themes können auch ihre eigenen Widgets zu Ihrem WordPress-Dashboard hinzufügen. Das ist manchmal zuviel des Guten und kann mehr verwirren als informieren. Heute zeigen wir Ihnen, wie Sie die Standard-Backend-Widgets (oder einzelne davon) loswerden.
WordPress-Mediathek: Sonderzeichen aus Dateinamen entfernen
Meist wandelt WordPress beim Hochladen von Dateien die Umlaute ä, ö und ü korrekt um und macht daraus ae, oe und ue. Doch das klappt – je nach Spracheinstellung – nicht immer. Wenn Sie Dateinamen ohne Sonderzeichen bevorzugen – was sehr zu empfehlen ist – können Sie mit diesem Trick nachhelfen.
Dateigrösse in der Listen-Übersicht der WordPress-Mediathek anzeigen
In der Listenansicht der WordPress-Mediathek lässt sich auf einfache Weise auch die Dateigrösse der gespeicherten Bilder oder anderer Dateien der Mediathek anzeigen. Wie es geht, zeigen wir Ihnen heute.
Fluid-Typography: Immer und auf jedem Display die passende Schriftgrösse anzeigen
Fluid Typography ist ein Designansatz, bei dem die Grösse, der Zeilenabstand und die Proportionen von Text automatisch an die Grösse der Anzeige oder des Viewports angepasst werden, auf dem er angezeigt wird. Heute möchten wir Ihnen Fluid-Typography vorstellen.
Darstellungsbreite der Credit-Leiste im Divi-Footer anpassen
Der Standardfooter des Divi-Themes verfügt über eine Creditleiste. Deren Breite ist abhängig von der Breite der Website und wird stets mit den identischen Massen dargestellt. Falls Sie die Credit-Leiste selber definieren möchten, können Sie dies ganz einfach tun.
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.
Werbung
Werbung
