CountTo

In der Version 2.1.0 des Mate Theme ist das CountTo Feature hinzugekommen. Damit können Zahlen hochgezählt werden, wenn Sie in das Sichtfenster gelangen. Ein Beispiel finden Sie in der Mate Theme Demo.

Sollen die Elemente wie im Beispiel nebeneinander dargestellt werden, platzieren Sie Textelemente innerhalb eines Elementes vom Typ Grid (Grid-Start) und Grid (Grid-Stop). Im Textelement können Sie unter Erweiterte CSS-Klassen die Spaltenbreiten festlegen, siehe Bild. Im Abschnitt Grid wird dies nochmal genauer beschrieben.

Dem Grid-Start-Element müssen Sie unter den Experten-Einstellungen die Klasse count-to-container geben, ansonsten wird es nicht wie im Beispiel gestylt.

Nutzen Sie unseren Material Icons Inserttag um ein Icon zu setzen, z. B. {{mi::place}}. place wäre in diesem Fall der Name des Icons und kann beliebig getauscht werden. Eine Liste mit den Material Icons und deren Namen finden Sie ebenfalls in unserer Dokumentation.

Das Label haben wir in unserem Beispiel als h6-Überschrift im Text gesetzt.

Für die Zahl nutzen Sie ebenfalls unseren CountTo Inserttag, z. B. {{countTo::929::founded}}. An zweiter Stelle steht immer die Zahl, an dritter Stelle können Sie eine ID vergeben. Wenn Sie mehrere Inserttags auf einer Seite einbinden, müssen Sie jeweils eine eindeutige ID vergeben.

Beispiel:

Beispielhafte Platzierung der Elemente im Artikel:

Textelement:

Spaltenbreiten setzen im Textelement: