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: