Container Blöcke

19. September 2024

Ein Container bündelt mehrere Inhalte zu einer Einheit und bildet die Grundlage für den strukturierten Aufbau einer Webseite. Er ermöglicht es, Inhalte übersichtlich anzuordnen, Abstände festzulegen, Hintergründe oder Rahmen zu vergeben und das Layout flexibel an verschiedene Bildschirmgrößen anzupassen. Container können beliebig verschachtelt werden und helfen dabei, komplexe Seiten übersichtlich zu strukturieren.

Wofür wird ein Container verwendet?

  • Gruppieren zusammengehöriger Inhalte
  • Erstellen von Spalten- und Zeilenlayouts
  • Definieren von Abständen (Innen- und Außenabstände)
  • Anwenden gemeinsamer Hintergrundfarben, Bilder oder Rahmen
  • Ausrichten von Inhalten (links, rechts, zentriert)
  • Erstellen responsiver Layouts für Desktop, Tablet und Smartphone
  • Strukturieren komplexer Seiten durch verschachtelte Bereiche

In WordPress (Block-Editor / Gutenberg) erfüllen „Gruppe“ und „Spalte“ unterschiedliche Layout-Zwecke. Sie werden auch als Container bezeichnet, da man hier diverse weitere Blöcke hinzufügen kann.

Gruppe

Eine Gruppe kann

  • eine Hintergrundfarbe oder Hintergrundbild bekommen
  • einen Rahmen mit Radius angezeigt werden
  • eine minimal Höhe erhalten
  • als Slider aktiviert werden
  • einer Einblend-Animation erhalten
  • eine Horizontale-Animation erhalten
  • mit einem Milchglas-Effekt (Hintergrund) anzeigen werden
  • als Link fungieren

Eine Gruppe hat standartisierte Abstände, insbesondere beim verwenden von Hintergründen.

Spalten

Spalten können auch mit Gruppen erstellt werden.

Unser Vorteil: Die Reihenfolge auf Mobilen Geräten kann getauscht werden.

Cover

Der Cover-Block dient zur Darstellung eines Hintergrundbildes oder -videos mit darüberliegendem Inhalt

Cover

  • Hintergrund fixieren
  • Parallax
  • Hero (Vollbild)
  • Overlay-Farbe
  • Duotone-Effekt
  • Rahmen mit Radius
  • min. Höhe

Medien und Text

Der Medien & Text-Block kombiniert ein Bild oder Video mit einem Textbereich, die nebeneinander angeordnet sind.

Medien und Text

  • lässt sich auf Textinhaltshöhe begrenzen
  • Hintergrundfarbe
  • Verlinkung