Lesefortschritt:

Filterbuttons im Divi-Portfolio-Modul stylen

19. November 2023 | CSS-Stylesheet, Divi-Theme

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This