Umgang mit Layout-Elementen (Sektion, Container, Spalten, Bereich)

In diesem Beitrag lernst du die Layout-Elemente kennen und erfährst, wie du damit Webseiten und Landing Pages erstellst, die auf allen Geräten gut aussehen.

Bevor du anfängst, solltest du mit unserem Builder vertraut sein: Einführung in den Builder

Sektion

Sektionen sind ein wichtiges Element, um die Struktur deiner Seite zu bestimmen. Es sind einzelne Blöcke, die dein Layout einteilen:

skizze sektionen

Eine Sektion hat eine feste Breite von 100% und geht somit über den gesamten Bildschirm. Deshalb ist sie perfekt für eine Hintergrundfarbe, ein Hintergrundbild oder ein Hintergrundvideo:

Fullscreen 01 09 18 11 40

Dabei wird die Höhe automatisch berechnet und richtet sich nach dem Inhalt, der sich in dieser Sektion befindet. Wenn du dort also Elemente platzierst, wird die Sektion automatisch höher. Wir empfehlen dir, keine feste Höhe einzugeben, sondern die Höhe über die Elemente und den Innenabstand oben und unten zu lösen:

Fullscreen 01 09 18 11 42

Wenn es unbedingt sein muss (z. B. wenn du eine leere Sektion hast und dort ein großes Hintergrundbild darstellen möchtest), dann setze eine Mindesthöhe. Das erlaubt der Sektion, höher zu werden, wenn die Elemente darin die hinterlegte Höhe überschreiten. Generell ist es Bad Practice, eine feste Höhe zu vergeben, da sonst der Inhalt überlappt bzw. abgeschnitten wird.

Container

Wenn du z. B. Elemente direkt in eine Sektion packst, gehen sie meistens über die gesamte Breite und „kleben“ am Rand (siehe oben). 

Damit du nicht alle Elemente einzeln stylen und ausrichten musst, gibt es den Container. Er ist eine Sammelbox für Elemente mit fester Breite, die automatisch zentriert wird:

skizze container

Im Builder sieht das dann so aus:

Fullscreen 01 09 18 11 44

Er besitzt eine maximale Breite von 1170px auf großen Bildschirmen und wird bei kleineren Auflösungen automatisch berechnet.

Spalten

Spalten dienen dazu, deine Inhalte nebeneinander zu platzieren. Ähnlich wie bei einer Zeitung.

Dabei existiert jede Spalte in einem Spalten-Element (quasi die Zeile). Dort wiederum kannst du verschiedene Elemente platzieren:

Fullscreen 10 09 18 19 49

Standardmäßig ist das Spalten-Element in zwei Spalten aufgeteilt. Klicke auf eine Spalte (bzw. auf das gesamte Spalten-Element, das du über die Baumstruktur erreichst) und navigiere dann unter Element-Einstellungen. Hier kannst du unter "Desktop" die gewünschte Spaltenanzahl auswählen (diese muss immer 12 ergeben). Unter "Anpassen" kannst du das Spaltenverhältnis individuell bestimmen, indem du den Regler nach links oder rechts verschiebst. Abschließend hast du die Möglichkeit, das Spaltenverhältnis bei den unterschiedlichen Bildschirmgrößen anzupassen:

Fullscreen 10 09 18 19 51

Hinweis: Der Spalten-Konfigurator funktioniert nur für das neue Spalten-Element. Wenn du die Funktion benutzen möchtest, musst du das Element austauschen.

Außerdem haben Spalten standardmäßig einen Innenabstand links und rechts von 15px. Diesen kannst du natürlich verändern. Achte dabei aber darauf, dass dieser bei kleineren Bildschirmgrößen nicht zu viel ist. Ändere es deshalb ggf. für kleinere Auflösungen um!

Das Spalten-Element hat eine feste Breite von 100%. Auch die Breite der einzelnen Spalten wird automatisch berechnet. Wenn du eine kleinere Breite haben möchtest, pack das Spalten-Element in einen Container (wenn maximal 1170px passen):

Fullscreen 01 09 18 11 50

Wenn das nicht ausreicht, dann verwende anstelle eines Containers einen Bereich und gib ihm eine feste Breite.

Bereich

Ein Bereich ist eine Sammelbox für Elemente. Ähnlich wie ein Container. Nur ist dieser wesentlich flexibler und kann ineinander verschachtelt werden. Im Prinzip kannst du einen Bereich für viele Dinge verwenden:

Bereich als Layout-Element

Wenn dir der Container zu breit ist, kannst du zusätzlich einen Bereich hineinziehen und hier eine feste Breite eintragen. Arbeite hier am besten mit Prozent (und nicht mit Pixeln), damit es auf allen Geräten gut aussieht:

Fullscreen 01 09 18 11 53

Außerdem kannst du einem Bereich z. B. eine Hintergrundfarbe sowie Innenabstände vergeben und ihn so optisch hervorheben:

Fullscreen 01 09 18 11 54

Wenn du einen Bereich zentrieren möchtest, navigiere unter Außenabstände und aktiviere "Zentriert":

Fullscreen 04 09 18 15 16

Ferner kannst du einen Bereich inklusive aller seiner Elemente kopieren. Das ist auch noch mal ganz praktisch.

Bereich als Trennstrich

Aus einem Bereich kannst du auch einen Trennstrich machen. Ziehe ihn dafür an die gewünschte Stelle, vergib eine Hintergrundfarbe, eine kleine Höhe von z. B. 2px und evtl. noch eine feste Breite:

Fullscreen 01 09 18 11 56

Das klingt vielleicht etwas umständlich, ist aber der sauberste Weg, um einen Trennstrich zu erstellen.

Bereich als Form

Mit einem Bereich kannst du sogar Formen, wie z. B. einen Kreis, erstellen. Gib dafür einem Bereich eine gleiche Höhe und Breite, setze abgerundete Ecken auf 100% und wähle eine Hintergrundfarbe:

Fullscreen 01 09 18 11 58

In diesen Bereich kannst du jetzt ein Element, z. B. ein Text- oder ein Icon-Element hineinschrieben. Über die Schriftausrichtung und Innenabstand des Bereichs kannst du das darin liegende Element dann positionieren:

Fullscreen 01 09 18 12 01

Bereich als Abstand

Theoretisch kannst du einem Bereich eine feste Höhe vergeben und diesen als Abstand benutzen. Das ist aber Bad Practice. Benutze lieber den Außenabstand der einzelnen Elemente dafür:

Fullscreen 01 09 18 12 02

Best Practice

Damit du deine Layouts sauber strukturierst, füge zuerst Sektionen ein, die deine Seite in Blöcke einteilen. Füge danach Container in diese Sektionen, um eine Zentrierung zu erreichen. Bei Bedarf kannst du noch zusätzlich einen Bereich in den Container packen, falls dir die Breite zu viel ist. Manchmal brauchst du aber auch keinen Container, wenn du z. B. eine Sektion einfach nur in zwei Spalten aufteilen möchtest.

Generell solltest du versuchen, so wenig Layout-Elemente wie möglich zu verwenden, um schnelle Ladezeiten zu gewährleisten. Außerdem solltest du so wenig feste Höhen und Breiten angeben und alles automatisch berechnen lassen. Wenn du hier dennoch etwas ändern möchtest, solltest du mit Außen- bzw. Innenabständen arbeiten. Achte danach aber darauf, dass die Abstände bei kleineren Bildschirmgrößen nicht zu groß sind und passe diese dafür an.

© 2012-2018 by Chimpify UG (haftungsbeschränkt)