Blöcke gestalten mit Layout, Farben und Abständen

Wenn du einen Block auf deiner Seite eingefügt hast, kannst du sein Aussehen anpassen: Farbe, Breite, Abstände zum Rand und zum Text, Animation beim Scrollen, sogar ein Hintergrundbild. Alle diese Einstellungen befinden sich in einer gemeinsamen Oberfläche.

Voraussetzungen

Du brauchst einen Block, den du bearbeiten kannst – zum Beispiel einen Text-, Bild- oder Karussellblock. Die Gestaltungsoptionen öffnen sich automatisch, wenn du einen Block auswählst oder erstellst.

So gehst du vor

1. Öffne den Block zur Bearbeitung. Der Block zeigt dann eine Seitenleiste oder ein Eingabefenster mit verschiedenen Bereichen. Suche die Sektion Layout & Design – sie ist normalerweise eingeklappt.

2. Klappe die Sektion Layout & Design auf. Klicke auf den Namen oder das Symbol daneben, um alle Gestaltungsoptionen sichtbar zu machen.

3. Wähle die Blockbreite. Der Schalter Volle Breite bestimmt, ob der Block die gesamte Seitenbreite nutzt oder sich an den Seiteninhalt anpasst. Schalte ihn an oder aus, je nachdem, wie breit der Block sein soll.

4. Wähle ein Farbschema. Das Auswahlfeld Farbschema bietet mehrere Vorgaben:

   • Standard (hell): Das normale Farbschema – für fast alle Blöcke geeignet.
   • Sanft (Cream): Ein cremiger, warmer Hintergrund – gut für Abwechslung bei FAQ oder Zitaten.
   • Markenfarbe: Der Block nutzt deine Unternehmensfarbe – für Hervorhebungen und wichtige Bereiche.
   • Akzent: Eine Akzentfarbe für auffällige Banner und Statistiken.
   • Akzent (alternativ): Eine dritte Farbvariante für besondere Themen wie Aktionen oder Hinweise.
   • Dunkel: Dunkler Hintergrund – für Hero-Bereiche oder starke Kontraste.
   • Individuell: Du wählst selbst Hintergrundfarbe, Schriftfarbe und Akzentfarbe – nur dann sichtbar, wenn du diese Option auswählst.

5. Stelle individuelle Farben ein (nur bei „Individuell"). Wenn du Individuell ausgewählt hast, erscheinen drei Farbwähler:

   • Hintergrundfarbe: Die Farbe hinter dem Blockinhalt.
   • Schriftfarbe: Die Farbe der Texte im Block.
   • Akzentfarbe: Für Hervorhebungen wie Links oder Buttons.

   Klicke auf jeden Farbwähler, um eine Farbe zu wählen. Du kannst auch auf die Farbvorgaben deiner Website klicken.

6. Wähle eine Animation beim Einblenden (optional). Das Auswahlfeld Animation beim Einblenden bestimmt, wie der Block erscheint, wenn der Besucher die Seite nach unten scrollt. Lass es leer, wenn der Block direkt sichtbar sein soll, oder wähle eine Animation wie Einblenden oder Einfahren.

7. Stelle Abstände ein (optional). Klappe die Unterbereiche Padding und Margin auf:

   • Padding: Der Abstand zwischen Blockrand und Inhalt (innen).
   • Margin: Der Abstand zwischen Block und anderen Elementen (außen).

   Du kannst für alle vier Seiten (oben, unten, links, rechts) unterschiedliche Werte setzen oder einen Wert für alle übernehmen.

8. Füge ein Hintergrundbild ein (optional). Klappe den Unterbereich Hintergrundbild auf. Wähle ein Bild von deinem Computer oder aus der Bilderbibliothek. Du kannst einstellen, wie das Bild angeordnet wird (gekachelt, gestreckt oder positioniert).

9. Füge eine CSS-Klasse hinzu (optional). Wenn du den Block mit eigenem Code styling-n möchtest, klappe den Unterbereich CSS-Klasse auf und trage den Namen einer Klasse ein – zum Beispiel my-custom-class. Das ist nur für Webdesigner sinnvoll.

10. Speichere deine Änderungen. Deine Änderungen werden sofort übernommen. Der Block wird in der Vorschau sofort mit den neuen Einstellungen angezeigt.

Aufbau der Gestaltungsoptionen

Die Sektion Layout & Design enthält folgende Elemente:

• Volle Breite: Schalter, um den Block über die ganze Seitenbreite zu spannen oder nicht.
• Farbschema: Auswahlfeld mit sieben Farbvarianten – jede mit einer Vorschau und einer Erklärung, wann man sie einsetzt.
• Animation beim Einblenden: Auswahlfeld für Scroll-Effekte wie Fade-In oder Slide-Up.
• Padding / Margin: Zwei Unterbereiche zum Einstellen der inneren und äußeren Abstände oben, unten, links und rechts.
• Hintergrundbild: Ein Unterbereich zum Hochladen und Positionieren eines Hintergrundbildes.
• CSS-Klasse: Ein Textfeld für Custom-Code (für fortgeschrittene Anwender).

Was danach passiert

Die Einstellungen werden sofort gespeichert und auf deiner Website sichtbar – in der Vorschau und später auch live. Du kannst jederzeit zurückkommen und die Einstellungen ändern oder einzelne Optionen deaktivieren. Welche Farbe und Animation der Block konkret zeigt, hängt von den Einstellungen deiner Website ab (siehe Erscheinungsbild).

Tipps und Hinweise

• Farbvorgaben mit Bedacht auswählen: Die vordefinierten Farben passen optisch zusammen. Nutze Individuell nur, wenn du sicher bist, dass deine Farbkombination gut aussieht.
• Animation sparsam einsetzen: Eine Animation pro Seite wirkt professionell; zu viele wirken unruhig.
• Padding vs. Margin verwechselt? Padding ist der Abstand innen (zwischen Rand und Inhalt), Margin der Abstand außen (zwischen Block und nächstem Element).
• Hintergrundbild mit Text kombinieren: Wähle eine Hintergrundfarbe, die auch ohne Bild gut aussieht – falls das Bild nicht laden sollte.