Block-Container
Der Block-Container ist ein grundlegender Baustein für deine Website-Bereiche. Er umhüllt andere Inhalte und sorgt für eine einheitliche Darstellung mit Abständen, Hintergrundfarben und Styling. Du siehst ihn normalerweise nicht direkt, aber er arbeitet im Hintergrund, um deine Inhalte schön zu präsentieren.
Voraussetzungen
- Du arbeitest im Website-Editor von weboffice
- Du hast bereits einen Block zu deiner Seite hinzugefügt
Aufbau des Block-Containers
Der Block-Container besteht aus mehreren Ebenen:
Äußerer Container: Hier werden die grundlegenden Eigenschaften wie Hintergrundfarbe, Textfarbe und zusätzliche CSS-Klassen angewendet.
Hintergrund-Bereich: Falls ein Hintergrundbild oder eine spezielle Hintergrundgestaltung definiert ist, wird sie hier angezeigt.
Inhalts-Container: Hier befinden sich deine eigentlichen Inhalte. Je nach Einstellung wird entweder die volle Breite (container-fluid) oder eine begrenzte Breite (container) verwendet.
Editor-Bereich: Wenn du im Bearbeitungsmodus bist, werden hier die Bearbeitungsschaltflächen angezeigt.
So arbeitest du mit dem Block-Container
Automatische Verwendung: Der Block-Container wird automatisch um jeden Block gelegt, den du zu deiner Seite hinzufügst. Du musst nichts Besonderes tun.
Anpassung über Block-Einstellungen: Die Eigenschaften des Containers änderst du über die Einstellungen des jeweiligen Blocks:
- Hintergrundfarbe über die Farbauswahl
- Textfarbe über die Textfarben-Optionen
- Volle Breite über den entsprechenden Schalter
- Zusätzliche Abstände über die Abstand-Einstellungen
Responsive Verhalten: Der Container passt sich automatisch an verschiedene Bildschirmgrößen an und sorgt für eine optimale Darstellung auf allen Geräten.
Tipps und Hinweise
Konsistente Gestaltung: Der Block-Container sorgt dafür, dass alle deine Blöcke ein einheitliches Erscheinungsbild haben.
Automatische Abstände: Standardmäßig werden automatisch Abstände hinzugefügt. Diese kannst du bei Bedarf über die Block-Einstellungen deaktivieren.
Hintergrund-Effekte: Wenn du Hintergrundbilder oder -farben verwendest, werden diese im Container korrekt dargestellt.
Bearbeitungsmodus: Im Editor siehst du zusätzliche Bearbeitungsschaltflächen, die auf der fertigen Website nicht sichtbar sind.