Das Zähler Modul in Divi ist eine geniale Sache, wenn man eine Zahl leicht animieren möchte. So kann man dann den Webseiten Besuchern zeigen, wieviele Kunden man bisher hatte oder wieviele Kaffeetassen man bereits getrunken hat.

Ich setze dieses Modul fast jedesmal ein, wenn ich ein Kundenprojekt erstelle.

In diesem Video zeige ich euch wie ihr nun dieses Zählermodul so erweitern könnt, dass ihr auch vor und nach der Zahl etwas anzeigen lassen könnt. Als Beispiel habe ich hier jetzt die CSS Klasse werte genommen – ihr müsst natürlich den Klassennamen so anpassen, dass er euch gefällt. Denkt ebenfalls daran, dass ihr für jedes Zählermodul einen eigenen Klassennamen verwenden müsst 🙂 aber daran muss ich euch sicher nicht erinnern.

Video

CSS – Werte vor der Zahl

1
2
3

.werte .percent-value:before {
	content: "AAA ";
}

CSS – Werte nach der Zahl

1
2
3

.werte .percent-value:after {
	content: " XXX";
}

CSS – Werte vor und nach der Zahl

1
2
3
4
5
6
7

.werte .percent-value:before {
	content: "AAA ";
}
 
.werte .percent-value:after {
	content: " XXX";
}