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:
RSS-Feed auf der Website anzeigen
Wenn Sie auf Ihrer Website einen RSS-Feed anzeigen möchten, lässt sich dies ganz einfach bewerkstelligen. Ein wenig PHP-Code im Hintergrund, ein Shortcode im Content und gut ist.
WordPress: Login-Zwang für bestimmte IPs deaktivieren
Ist Ihre ganze WordPress-Site (oder Teile davon) nur für eingeloggte User erreichbar? Im Alltag kann der Zwangs-Login ganz schön nerven. Praktisch wäre es, wenn gewisse IPs «whitelisted» wären. Die User müssten sich dann nicht wieder einloggen, bzw. müssten sich nur dann neu einloggen, wenn sie mal von woanders auf die Website zugreifen wollen. Ist gar nicht mal so schwierig einzurichten.
Starke Passwörter erzwingen
WordPress lässt sich recht sicher machen; aber es erlaubt Usern bisweilen auch, ziemlich einfache Passwörter zu setzen. Es gibt zwar Warnungen; aber teilweise bleibt es beim Mahnfinger. Sie können aber nachbessern und die Passwortrichtlinien verschärfen. Wir zeigen Ihnen wie’s geht.
WordPress-Bildskalierung: Bildergrösse selber festlegen
WordPress legt bisweilen automatisch eine «-scaled»-Version Ihrer hochgeladenen Bilder an. Diese Funktion wurde eingeführt, um extrem grosse Bilder zu verkleinern und somit Serverressourcen zu schonen. Standardmässig werden Bilder, die grösser als 2560 Pixel in Breite oder Höhe sind, automatisch auf diese Maximalgrösse heruntergerechnet. Doch dieser Wert lässt sich mit einem kleinen Code-Snippet nach Ihren Wünschen anpassen.
Schwarze WordPress-Admin-Bar nach Login ein- und ausblenden
Sobald sich ein User (mit etwas höheren Rechten) ins WordPress-Backend einloggt, erscheint bei einem Blick auf die Live-Website immer ein schwarzer Balken am oberen Bildrand. Der ist eigentlich ganz praktisch und enthält einige Tools. Optisch stört er aber häufig. Mit unserem heutigen Trick zeigen wir Ihnen, wie sich der schwarze Balken ganz einfach aus- und wieder einblenden lässt.
Hexagon-Bildergalerie – Marke «Eigenbau»
Heute gestalten wir eine kleine Bildergalerie. Doch diese zeigt die einzelnen Bilder nicht im üblichen Zuschnitt an, sondern macht jedes Element zu einem Hexagon. Sieht ganz hübsch aus und ist gar nicht schwierig.
Divi-Such-Modul-Special – Trick #1: Text der Suchschaltfläche ausblenden und Lupe anzeigen
Wenn Sie auf Ihrer Divi-Website ein Such-Modul einfügen, wird normalerweise auf dem Suchbutton ein Text erscheinen. Wahlweise können Sie diesen Text aber ganz einfach mit einer Lupe ersetzen. Wir zeigen Ihnen wie das geht.
Divi-Such-Modul-Special – Trick #2: Button und Suchbox abrunden
Das Such-Modul des Divi-Themes hat standardmässig Ecken und Kanten. Je nach Webdesign möchten Sie es vielleicht ein wenig runder. Geht ganz einfach. Wir zeigen wie.
Divi-Such-Modul-Special – Trick #3: Innenabstand verändern
Die Divi-Suche hat eine fixe Höhe, die Sie aber mit CSS leicht anpassen können. Je nach Webdesign kann dies empfehlenswert sein. Heute legen wir einen Innenabstand im Such-Modul des Divi-Themes fest.
Divi-Such-Modul-Special – Trick #4: Suchfeld und Schaltfläche optisch trennen
Das Divi-Suchmodul zeigt üblicherweise ein Eingabefeld links und den Suchbutton rechts. Die beiden Elemente können Sie aber vertauschen – wie das geht, zeigen wir Ihnen heute.
Divi-Such-Modul-Special – Trick #5: Suchfeld und Schaltfläche vertauschen
Das Divi-Suchmodul zeigt üblicherweise ein Eingabefeld links und den Suchbutton rechts. Die beiden Elemente können Sie aber vertauschen – wie das geht, zeigen wir Ihnen heute.
Cooler Eselsohren-Effekt im Divi-Theme
Das Erstellen eines Eselsohr-Effekts auf Ihren Elementen der Divi-Website kann eine ansprechende visuelle Note hinzufügen und den Eindruck erwecken, dass eine Ecke der Seite umgeknickt ist. Geht mit Divi und ein wenig CSS ganz einfach.
Werbung
Werbung
