AutoGrid 2.2 | 1-Click Grid

AutoGrid 2.2 besteht aus drei Komponenten:

Grid Spalten | 1-Click Grid

Mit dem 1-Click Grid können Grid-Spalten angelegt werden in denen jeder beliebige Inhalt platziert werden kann. Die Breite kann per +/- Button angepasst werden. Den Grid-Spalten steht eine Vielzahl von Designeinstellungen zur Verfügung.

Grid-Spalten Designeinstellungen

Grid-Reihen

Die Grid-Reihen sind für ein Inhaltselement je Spalte konzipiert. In Grid-Reihen kann die Breite der Spalte mit den +/- Buttons eingestellt werden. Das CSS baut auf display: flex auf und verfolgt einen Bootstrap ähnlichen Ansatz mit 12 Spalten.

Grid-Vorlage

Bei den Grid-Vorlagen können mehrere Inhaltselemente pro Spalte platziert werden. Das CSS baut auf display: grid auf.

Designeinstellungen und Ausrichtung auf Grid-Spalten

Grid-Element inkl. Inhalt löschen

Reihung je nach Endgerät steuern

Mit folgenden CSS-Klassen kann die Reihenfolge der Grid-Elemente je nach Endgerät gesteuert werden. Die CSS-Klassen können je nach Grid-Aufbau, bei Grid-Zeilen direkt dem Inhaltselement bzw. bei Grid-Presets den Grid-Spalten, vergeben werden.

Tablet

order_1_t 1. Position auf Tablet
order_2_t 2. Position auf Tablet
order_3_t 3. Position auf Tablet
order_4_t 4. Position auf Tablet
order_5_t 5. Position auf Tablet
order_6_t 6. Position auf Tablet

Smartphone

order_1_m 1. Position auf Smartphone
order_2_m 2. Position auf Smartphone
order_3_m 3. Position auf Smartphone
order_4_m 4. Position auf Smartphone
order_5_m 5. Position auf Smartphone
order_6_m 6. Position auf Smartphone

Grid-Live-Vorschau deaktivieren

Mit der Grid-Live-Vorschau sieht man den realen Aufbau des Grids bereits im Backend. Bei Bedarf lässt sich die Grid-Live-Vorschau in den Contao Einstellungen deaktivieren. Info: befindet sich ein Grid-Element in einen Artikel so ist die Drag&Drop Funktion für diese Inhaltselemente deaktiviert.