Spaltendesign

Du kannst Spalten verwenden, um Inhalte in strukturierten Layouts anzuordnen, damit deine Website optisch ansprechend und leicht zu navigieren ist. In diesem Ratgeber erfährst du, wie du Designaspekte deiner Spalten wie Farben, Ausrichtung und Design auf Mobilgeräten anpassen kannst.

So kannst du eine Hintergrundfarbe zu Spalten hinzufügen oder eine vorhandene ändern:

1. Wähle in der linken oberen Ecke des Editors die Option „Listenansicht“ aus. Das Icon besteht aus drei waagerechten Linien übereinander.
2. Suche hier den Spaltenblock und klicke darauf:

3. Klicke in den Spaltenblock-Einstellungen auf der rechten Seite des Bildschirms auf den Tab Stile (das Icon sieht aus wie ein schwarz-weißer Kreis):

4. Klicke in den Farbeinstellungen auf „Hintergrund“ und wähle eine Hintergrundfarbe aus.
5. Klicke auf den Button „Speichern“, um deine Änderungen zu speichern.

Wenn du für jede Spalte unterschiedliche Farben auswählen möchtest, führe dieselben Schritte aus, wähle aber in der Listenansicht anstelle des gesamten Spaltenblocks einen einzelnen Spaltenblock aus.

Wenn du Inhalte zu einer neuen Spalte hinzufügst, werden sie standardmäßig am oberen Spaltenrand ausgerichtet. Du kannst die Ausrichtung des Inhalts innerhalb von Spalten ändern, indem du folgende Schritte durchführst:

1. Wähle in der linken oberen Ecke des Editors die Option „Listenansicht“ aus. Das Icon besteht aus drei waagerechten Linien übereinander.
2. Suche hier den Spaltenblock und klicke darauf:

3. Klicke in der Werkzeugleiste, die über oder unter den ausgewählten Spalten angezeigt wird, auf die Option für vertikale Ausrichtung:

4. Wähle zwischen „Oben ausrichten“, „Mittig ausrichten“ oder „Unten ausrichten“ aus, damit der gesamte Inhalt innerhalb der Spalten oben, in der Mitte oder unten in der Spalte angezeigt wird.

Wenn du für jede Spalte unterschiedliche Ausrichtungen auswählen möchtest, führe dieselben Schritte aus, wähle aber in der Listenansicht statt aller Spalten nur eine einzelne Spalte aus. Dadurch kannst du ein verteiltes Layout wie dieses erstellen:

Bei der Verwendung eines Spalten-Layouts sollte berücksichtigt werden, wie deine Spalten für Besucher deiner Website auf Mobilgeräten angezeigt werden. Mobiltelefone haben kleinere Bildschirme, sodass mehrere Spalten möglicherweise nicht alle problemlos nebeneinander angezeigt werden können und deine Inhalte so nicht mehr vollständig lesbar sind.

Du kannst die Spalten auf Mobilgerätebildschirmen so „stapeln“, dass sie übereinander und nicht in einer einzigen Zeile angezeigt werden:

1. Wähle den Spaltenblock mithilfe der Listenansicht oder der Block-Werkzeugleiste aus.
2. Aktiviere in den Spaltenblock-Einstellungen rechts auf dem Bildschirm den Schalter „Auf Mobilgeräten stapeln“:

Mit diesem Umschalter wird festgelegt, ob die Spalten horizontal oder vertikal gestapelt angezeigt werden, wenn die Seite oder der Beitrag auf einem mobilen Gerät angezeigt wird. Hier ein Beispiel, wie gestapelte Spalten auf Desktop-/Laptop-Bildschirmen im Vergleich zu einem Mobilgerätebildschirm angezeigt werden: