Seitenlayout

Der grundlegende Aufbau einer Seite erfolgt durch das Ablegen verschiedener Template-Elemente, welche mit Drag & Drop auf die Seite gezogen werden.

Eine vollkommen leere Seite enthält zunächst nur den rot gefärbten Basis-Container.

In diesen Basis-Container können Layout-Bereiche mit Drag & Drop abgelegt werden.

Ein Layout-Bereich erzeugt einen oder mehrere orange gefärbte Container, in denen Layout-Zeilen abgelegt werden können.

Layout-Zeilen erzeugen blau gefärbte Container, in denen Inhaltselemente abgelegt werden können.

Die Inhaltselemente stellen schließlich den eigentlichen Inhalt der Seite dar, so z.B. durch Inhalts-Abschnitte, Listen, Medien usw. 

Grundsätzlich können in jeden Container beliebig viele dafür passende Elemente eingefügt werden. So können z.B. in einen Layout-Bereich mehrere Layout-Zeilen untereinander eingefügt werden, um ein komplexes Seitenlayout zu erzeugen.

Eine Sonderstellung haben Layout-Gruppen. Diese erzeugen vorgegebene Layouts für spezielle Anwendungsbereiche, so z.B. für den Kopf- oder Fußbereich einer Seite. In welchem Container eine Layout-Gruppe eingesetzt werden kann ist abhängig von der Gruppe selbst. So können z.B. die Gruppen für Kopf- oder Fußbereiche wie Layout-Bereiche direkt in den Basis-Container abgelegt werden.

Das 'Gitter' für Seitenspalten besteht aus einer Kombination von bis zu 12 möglichen Spalten (Englisch „Columns“ bzw. „Col“) pro Zeile.

Bei der Darstellung einer Layout-Zeile werden diese 12 möglichen Spalten auf verschiedene Weise zu den tatsächlich sichtbaren Spalten zusammengefasst. Die Zahlen in der Klammer im Namen einer Layout-Zeile geben dabei an, wie viele der möglichen Spalten des Gitters zu einer sichtbaren Spalte zusammen gefasst werden:

• Die Layout-Zeile, Row 1 Spalte (12 - voll) nimmt die ganze verfügbare Breite ein, verwendet also alle 12 möglichen Spalten.
• Layout-Zeilen, welche 2 gleich große Spalten erzeugen, tragen die Bezeichnung Row 2 Spalten (6-6). 
• Layout-Zeilen mit 2 unterschiedlich großen Spalten sind z.B. Row 2 Spalten (9-3) oder Row  2 Spalten (8-4) etc. 
• Weiterhin gibt es noch die Row 3 Spalten (4-4-4), die Row 4 Spalten (3-3-3-3) sowie die Row 6 Spalten (2-2-2-2-2-2).

Es wird zwischen 6 möglichen Bildschirmgrößen unterschieden:

• XS: 552 Pixel oder kleiner - "normale" Smartphones
• SM: 553 bis 763 Pixel - übergroße Smartphones oder kleine Tablets
• MD: 764 bis 1013 Pixel - Tablets, z.B. iPad
• LG: 1014 bis 1199 Pixel - Kleinere Desktop-Bildschirme oder große Tablets
• XL: 1200 Pixel oder größer - Desktop Bildschirme
• XXL: 1400 Pixel oder größer - Große Desktop Bildschirme

Bitte beachten Sie, dass die Bezeichnungen wie "Desktop", "Tablet" oder "Smartphone" nur zur Orientierung dienen und die Template-Darstellung nicht wirklich von den Geräten, sondern alleine von der verfügbaren Bildschirmbreite abhängig ist. Für Desktop-Geräte bedeutet dies, die Darstellung verändert sich, wenn das Browser-Fenster größer oder kleiner gezogen wird. Für mobile Geräte ändert sich die Bildschirmbreite, wenn man das Gerät im Quer- oder Hochformat hält.

Abhängig von der Bildschirmgröße werden verschiedene Seitenelemente unterschiedlich angeordnet. Bei Layout-Zeilen wird in der Regel im Namen angegeben, ab wann die Elemente der Zeile vollständig nebeneinander dargestellt werden. Einige Beispiele:

• Die Row 2 Spalten (6-6) [Alle Bildschirmgrößen] stellt in allen Bildschirmgrößen 2 Elemente nebeneinander dar, also auch auf "kleinen" Smartphones.
• Die Row 2 Spalten (6-6) [Ab Bildschirmgröße LG] stellt für die Bildschirmgrößen XS, SM und MD die Elemente übereinander dar. Erst ab Bildschirmgröße LG werden die Elemente nebeneinander dargestellt.