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:
Zufälliges Bild auf der Website anzeigen
Möchten Sie auf Ihrer Website verschiedene Bilder zeigen, welche bei jedem Aufruf zufällig dargestellt werden? Das geht natürlich. Mit ein wenig JavaScript und unserem Hack für alle Websites.
Website automatisiert neu laden und einen passenden Timer anzeigen
Websites ständig von Hand neu zu laden kann mühsam sein. Lassen Sie die Maschine übernehmen. Als kleines Supplement zeigen wir Ihnen gleich noch, wie Sie auf der Website einen Livecountdown bis zum Refresh anzeigen.
Einzelne Beiträge oder ganze Kategorien vom WordPress-Blog auf der Startseite ausschliessen
Viele Wordpress-Seiten listen auf der Startseite gleich mal die neusten Beiträge auf. Das will man aber häufig gar nicht. Das selektiv zu verhindern ist aber keine schwierige Angelegenheit. In diesem Beitrag erfahren Sie wie es geht.
Mobiles Menü im Divi-Theme über gesamte Breite laufen lassen
Standardmässig legt das Divi-Theme beim Menu für die Mobilansicht links und rechts noch einen Rand fest. Besonders bei längeren Wörtern in der Navigation kann das in der schmalen Mobilansicht suboptimal sein. Mit wenig CSS-Code lässt sich die gesamte Breite nutzen.
Zweite Textzeile zu den Divi-Schaltflächen hinzufügen
Eine gute Möglichkeit, zusätzliche Marketinginformationen auf einer Landing-Page bereitzustellen, ist eine zweite Textzeile auf einer Call-to-Action-Schaltfläche. Da es standardmässig keine Möglichkeit gibt, dem Divi-Button eine zweite Textzeile hinzuzufügen, werden wir dies mit einigen Codeschnipseln tun.
Menülinks im Divi-Theme stylen
Das Menümodul des Divi-Themes bietet schon einige Styling-Möglichkeiten. Um so richtig Chef über die Darstellung zu werden, bedarf es aber ein wenig CSS-Code. Diesen stellen wir Ihnen hier vor.
Mit zwei kleinen PHP-Hacks Beitragsübersichten für alle Lebenslagen selber bauen – der 200. Beitrag von Dr. Code
So ein klein wenig stolz sind wir schon: 200 Tipps und Tricks für Wordpress, CSS, HTML und das Divi-Theme haben wir bis zum heutigen Tag veröffentlicht. Heute wagen wir uns an ein klein wenig PHP-Programmierung. Wir bauen uns kinderleicht massgeschneiderte Beitragsübersichten. Vorzüglich geeignet für Widgets in der Seitenleiste – aber natürlich auch für anderswo.
Mehrere Divi-Buttons in einer Spalte nebeneinander anordnen
Wenn Sie Buttons im Divi-Theme nebeneinander statt untereinander anordnen wollen, müssen Sie dies im Normalfall mit einer mehrspaltigen Zeile lösen. Es gibt aber einen Trick, mit welchem auch mehrere Buttons in derselben Spalte nebeneinander platziert werden.
Absendernamen in ausgehenden WordPress-E-Mails ändern
Wenn WordPress eine E-Mail-Benachrichtigung sendet, verwendet das System standardmässig «WordPress» als Absendernamen. Für Mails an Sie als AdministratorIn ist das ja noch OK – aber für Mails nach aussen (an Ihre WebsitebesucherInnen) sieht das etwas unprofessionell aus. Ändern Sie den Namen in eine echte Person oder den Titel Ihrer Website. Geht ganz einfach.
Toolbar im Divi-Texteditor jederzeit zur Hand und im Blickfeld halten
Wer längere Texte im Divi-Theme bearbeitet, kennt das Problem: Die Toolbar verschwindet nach oben und man muss ständig wieder hochscrollen um eine bestimmte Funktion zu aktivieren – etwa Zwischentitel setzen, BulletPoint-Listen erstellen, Texte zentrieren. Mit einem wirklich einfachen Trick ist aber die Editor-Toolbar immer sichtbar.
Reihenfolge von Divi-Elementen in Responsive-Ansichten korrigieren
Im Divi-Theme können Sie mehrere Elemente nebeneinander darstellen. Für die Responsive-Ansichten auf Tablets und Mobiltelefonen reiht Divi diese Elemente dann untereinander auf. Das ist meist gut so – hin und wieder passt das aber eben nicht. Die Reihenfolge lässt sich jedoch auf Mobilanzeigen mit einem kleinen Trick korrigieren.
WordPress-Updates ohne Standard-Themes
Kürzlich beglückte uns Wordpress wieder einmal mit einem neuen Standard-Theme. Immer um den Jahreswechsel herum, sind wir verdonnert, ein neues, unerwünschtes Theme aus dem Hause Wordpress von Bord zu werfen. Eine kleine Einstellung erlaubt aber, die Zwangsinstallation gleich ganz zu umgehen.
