Die Layout-Elemente umfassen Spaltensysteme, Farb-Sektionen, Rasterzeilen und Reiter-Sektionen. Mithilfe dieser Elemente können Sie den Aufbau Ihrer Seite und die Anordnung der Inhalte bestimmen.
Eine Website besteht, wie bereits erwähnt, aus vielen Inhalts-Elementen wie Texten, Bildern und Tabellen. Die Spalten helfen Ihnen dabei, diese Inhalts-Elemente visuell passend auf der Website zu arrangieren. Sie positionieren so z.B. ein Bild neben den dazu passenden Text auf der Seite. Die Einstellungen der Spalten gelten immer nur für die Desktop-Ansicht. Auf kleineren Endgeräten werden die Spalten automatisch untereinander angezeigt (Responsive Layout).
Es stehen Ihnen unterschiedliche Spalten Größen zur Verfügung. Der folgenden Grafik können Sie entnehmen, welche unterschiedlichen Kombinationen mit dem Spaltensystem möglich sind.
Bei der Auswahl der unterschiedlichen Spalten müssen Sie beachten, dass die Anzahl der Spalten immer ein Ganzes ergibt. Eine Kombination aus ⅖ + ⅖ + ⅖ würde nicht funktionieren. Die letzte Spalte würde entsprechend in die nächste Zeile umbrechen.
Um nun ein entsprechendes Layout aufzusetzen ziehen Sie einfach die gewünschten Spaltengrößen aus der Toolbar in den unteren Inhaltsbereich (1). Bereits dort wird Ihnen visualisiert, wie die Aufteilung später auf der Website aussehen wird. Ebenfalls erkennen Sie bereits in dieser Ansicht, wenn das Layout aufgrund der Spaltenkombination nicht passt (2).
Sobald Sie mit den Spalten arbeiten, orientieren sich die Spalten immer im dafür festgesetzten Inhaltsbereich (1).
Wenn sich die Spalten über die gesamte Breite (2) des Bildschirms erstrecken sollen nutzen Sie eine Rasterzeile. Die genaue Definition dazu folgt in dem dazugehörigen Abschnitt.
Bei einer Farb-Sektion handelt es sich um ein Element das immer 100 % Breite der Seite einnimmt. Sie können unterschiedliche Höhen definieren oder die Höhe durch den Inhalt bestimmen lassen. In einer Sektion können alle Elemente platziert werden, also Spalten, Inhalts Elemente und Media Elemente. Durch die Farb-Sektionen können Sie Struktur auf Ihrer Website erzeugen, indem Sie unterschiedlichen Bereichen auf einer Seite unterschiedliche Farben oder Hintergrundbilder zuweisen. Über das Einstellungs-Icon gelangen Sie zu der entsprechenden Konfiguration der Farb-Sektion.
Die Rasterzeile ist ein nützliches Element um spezielle Box-Layouts zu erstellen. Das Element erstreckt sich immer auf die volle Breite und ermöglicht Ihnen beliebig viele Reihen untereinander hinzuzufügen. Eine Reihe besteht in diesem Fall aus mindestens einer und bis zu fünf Zellen die entsprechend nebeneinander ausgerichtet werden. Jede Zelle kann eine unabhängige Hintergrundfarbe oder ein Bild haben. Die einzelnen Zellen können Textblöcke, Bilder oder jedes andere Inhalts Element aufnehmen.
Die Reiter-Sektion lässt Sie Inhalte in unterschiedlichen Tabs darstellen. Auch dieses Element nimmt die volle Breite ein. In die einzelnen Reiter lassen sich beliebige Inhalte platzieren.
Im oberen Bereich des Elements können Sie die Reiter bearbeiten. Per Klick auf den Reiter lässt sich der Titel des Reiters individualisieren und ein Icon hinzufügen. Über den Doppelpfeil neben dem Titel lässt sich die Reihenfolge der Reiter per Drag-and-drop verändern. Über den Button Reiter hinzufügen lassen sich weitere leere Reiter hinzufügen.