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:
Login-Special – Trick #2: Automatisches Aktivieren der «Angemeldet bleiben»-Option in WordPress
Das Login-Formular von WordPress bietet die Option «Angemeldet bleiben», mit der sich BenutzerInnen bei zukünftigen Besuchen nicht erneut einloggen müssen. Standardmässig ist dieses Kästchen nicht aktiviert, was unbequem sein kann. Mit einem kleinen PHP-Snippet können Sie die Option automatisch aktivieren, um den Login-Prozess zu vereinfachen.
Login-Special – Trick #3: Website nur eingeloggten Usern anzeigen
Ab und an möchten Sie vielleicht eine vollständige WordPress-Website schützen und sicherstellen, dass nur eingeloggte BenutzerInnen Zugriff auf die Inhalte haben. Dies ist besonders nützlich für private Blogs, interne Unternehmenswebsites oder Mitgliederseiten. Es gibt zahlreiche Plugins, die dies bewerkstelligen – es geht aber noch einfacher: mit einem einfachen PHP-Snippet.
Login-Special – Trick #4: Eingabefelder des Divi-Login-Moduls horizontal darstellen
Das Divi-Theme kommt mit einem patenten Login-Modul daher. Doch es lässt sich nicht komplett stylen: So sind etwa horizontal angeordnete Anmeldefelder von Haus aus nicht möglich. Es sei denn, Sie verwenden unseren CSS-Trick.
Bilder mit einem hübschen Innenrahmen präsentieren
Bilder auf der Website zu verwenden, ist eine einfache Übung. Heute versehen wir die dargestellten Bilder zusätzlich mit einem schönen Innenrahmen. So was habe ich unlängst auf der Website einer Kollegin entdeckt – sieht sehr hübsch aus. Musste ich gleich nachbauen.
Shortcodes in WordPress-Text-Widgets verwenden
Mit Shortcodes können Sie ganz einfach kleine Funktionen in WordPress-Beiträge und -Seiten einfügen. Leider funktionieren diese Shortcodes jedoch nicht in Textwidgets der Seitenleiste. Das lässt sich mit einer einzigen Codezeile nachbessern.
Eigenes Gravatar-Bild als Default festlegen
WordPress verwendet Gravatar, um Benutzerprofilbilder in WordPress anzuzeigen. Wenn ein Benutzer keinen Gravatar hat, verwendet WordPress ein Standardbild. Dieses Standard-Gravatar-Bild wird häufig in Ihrem WordPress-Kommentarbereich erscheinen, weil viele Benutzer kein Gravatar-Bild mit ihrer E-Mail-Adresse verknüpft haben. Sie können dieses Standardbild jedoch ganz einfach durch Ihr eigenes benutzerdefiniertes Standard-Gravatarbild ersetzen.
Bezeichnungen der Divi-Formularfelder links anzeigen
Die Formularfelder des Kontaktformular-Moduls im Divi-Theme werden normalerweise innerhalb der eigentlichen Felder angezeigt. Doch das lässt sich ändern: Die Feldbezeichnungen können auch links der Eingabefelder platziert werden. Wie das geht, zeigen wir Ihnen heute,
Back-Button im Divi-Theme anzeigen
Den «Back-Button» in Ihrem Browser werden Sie kennen und ihn bestimmt auch rege nutzen. In diesem Artikel zeigen wir Ihnen, wie Sie eine Browser-Verlaufsschaltfläche in das Divi-Thema einfügen. Wenn Sie auf diesen Button klicken, gelangen Sie zu jener Seite, auf der Sie waren, bevor Sie die aktuelle Seite besucht haben.
«Load More»-Schaltfläche zum Divi-Galeriemodul hinzufügen
Das Galerie-Modul des Divi-Themes lässt sich recht einfach mit einem «Load More»-Button ergänzen. Wie das funktioniert, zeigen wir Ihnen im heutigen Trick.
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.
Werbung
Werbung
