Das Grid-System

Um den vollen Funktionsumfang des Grids zu nutzen, installiere die Contao-Erweiterung CustomElements von Rocksolid und verwende das "Grid-System" von themore. Wie alle Wrapper-Elemente besteht es aus einem Start- und End-Element.

Das Grid verwenden

Erstelle eine neues Inhaltselement vom Elementtypen "Grid-Wrapper [Anfang]" und Treffe die Einstellungen für das Grid-Format und optional der der Ausrichtung, sowie einem individuellen Abstand zwischen den Elementen. Erstelle dann ein Inhaltselement vom Elementtypen "Grid-Wrapper [Ende]". Zwischen diesen Wrapper-Elementen fügst du nun deine Inhalte ein.

Beachte: jedes Element ergibt eine Spalte, um verschiedenen Content in einer Spalte zusammenzufassen, müssen sich diese in einem Wrapper befinden. Dazu eignet sich Hintergrund-Wrapper Anfang / Ende, wieso (ab Contao 5) die Elementgruppe.

 

Hier ein Bespielaufbau:

Grid-Wrapper [Anfang]
    Bild-Element
    Hintergrund-Wrapper [Anfang]
        Text
        Hyperlink
    Hintergrund-Wrapper [Ende]
Grid-Wrapper [Ende]

Responsives Grid erweitern

Mithilfe von drei Dropdowns kannst du das Grid für die Desktop-, Tablet- und Smartphonebreite definieren. Die Breakpoints dafür sind in der files/themore/assets/scss/custom/variables.scss definiert.

Möchtest du die vorgegebenden Grids erweitern, tust du das in zwei Schritten:

1. Im CSS anlegen: öffne files/themore/assets/scss/system/grid.scss und definiere in den Blöcken Desktop, Tablet und / oder Smartphone neue Grid-Classen
2. Im Inhaltselement: öffene templates/themore/rsce_themoreGrid_config.php und ergenze die neuen Klassen in den Feldern für Desktop, Tablet und / oder Smartphone

Wichtig: nach Änderungen im SCSS musst du die Seite ohne Cache neu laden, um die Änderungen zu sehen. Alternativ leere den Cache.