Die Verwendung eines Zählermoduls auf Ihrer Website kann einen grossartigen Effekt erzielen, indem ein Wert mit dem zusätzlichen Bonus einer Animation angezeigt wird. Aber das Zählermodul des Divi-Themes ist ziemlich begrenzt: Es verfügt nur über ein Eingabefeld und eine Option zum Ein- oder Ausblenden eines Prozentsymbols, was die möglichen Anwendungsfälle für dieses Modul nicht annähernd abdeckt. Hier erfahren Sie, wie Sie beliebigen Text oder Symbole hinzufügen können.
So wie nebenan präsentiert sich das Zählermodul unter Divi von Haus aus. Schön animiert, aber doch nicht so ganz aussagekräftig:
Doch da geht mehr.
Der erste Schritt besteht darin, das Zähler-Modul in Ihrem Layout zu platzieren und Ihren eigenen Zahlenwert zu erfassen. Jedes Modul muss über eine CSS-Klasse verfügen, um den CSS-Code mit dem Modul zu verbinden. Gehen Sie zu den Einstellungen des Zähler-Moduls, dann auf die Registerkarte «Erweitert» und auf «CSS-ID & Klassen» und fügen Sie den entsprechenden Klassennamen in das Eingabefeld «CSS-Klasse» ein.
- «number-counter-before»: Um eine Bezeichnung VOR dem Zahlenwert einzufügen.
- «number-counter-after»: Um eine Bezeichnung NACH dem Zahlenwert einzufügen.
- «number-counter-both»: Um eine Bezeichnung VOR und NACH dem Zahlenwert einzufügen.
Wählen Sie aus den folgenden CSS-Blöcken den/die passenden aus und fügen Sie den Inhalt in das CSS-Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:
Für Bezeichnung VOR dem Zahlenwert
.number-counter-before .percent-value:before {
content: "Ihre Bezeichnung VOR dem Zahlenwert";
}
Für Bezeichnung NACH dem Zahlenwert
.number-counter-after .percent-value:after {
content: "Ihre Bezeichnung NACH dem Zahlenwert";
}
Für Bezeichnung VOR und NACH dem Zahlenwert
.number-counter-both .percent-value:before {
content: "Ihre Bezeichnung VOR dem Zahlenwert";
}
.number-counter-both .percent-value:after {
content: "Ihre Bezeichnung NACH dem Zahlenwert";
}
Unseren obigen Zähler rüsten wir mit einer Bezeichnung vor und nach dem Wert aus, was folgendes Resultat ergibt:
Zusatztipp: Wenn Sie für mehr als ein Zähler-Modul einen Text vor oder nach den Zahlen benötigen, kopieren Sie einfach die entsprechenden Schnipsel und erstellen Sie für jedes Modul einen eigenen CSS-Klassenselektor.
Werbung