Trick # 293 | Dieser Beitrag beinhaltet 584 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Divi enthält ein Portfoliomodul mit Filtern, mit dem Sie Ihre Projekte zusammen mit Registerkarten-Schaltflächen anzeigen können. So können Ihre User bestimmte Projektkategorien zur Ansicht auswählen. Die Filter kommen aber etwas öde daher. Hier finden Sie Tipps für die Gestaltung der Filterbuttons des Portfoliomoduls.
Ohne Zutun fallen die Filterbuttons des Portfoliomoduls einigermassen langweilig aus.
Ungefähr so:
Das ist natürlich noch nicht das Ende der Fahnenstange, denn die Buttons lassen sich leicht umgestalten. Das gelingt mittels CSS-Code, den Sie im WordPress-Backend unter Design/Customizer/weiteres CSS einfügen können:
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
border: 1px solid black;
background-color: green !important;
color: white;
}.et_pb_filterable_portfolio_0.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active {
font-weight: bold;
}Dieser Code hinterlegt die Filterbuttons mit grüner Farbe (Zeile 3), setzt die Beschriftung auf weiss (Zeile 4) und stellt sicher, dass der aktive Filter halbfett beschriftet wird (Zeile 8). Ausserdem wird ein dünner schwarzer Rahmen um die Filterbuttons gelegt (Zeile 2).
Etwa in diesem Stil:
Selbstverständlich lassen sich die Buttons nach Gusto und zum Design der Website passend anders gestalten.
Werbung
Werbung
