Aussehen eines Inhaltsblocks anpassen

Du gestaltest hier das Layout und die Farben eines Inhaltsblocks – unabhängig von seinem Typ. Egal ob Text, Bild, Formular oder anderer Inhalt: mit diesen Einstellungen legst du fest, wie der Block auf der Seite wirkt.

Voraussetzungen

Du bearbeitest bereits einen Block auf einer Seite. Der Block muss zur Bearbeitung geöffnet sein.

Aufbau des Einstellungsbereichs

Der Bereich Layout & Design zeigt alle Gestaltungsoptionen für diesen Block. Er ist anfangs eingeklappt; du klappst ihn auf, um die Einstellungen zu sehen.

Die Optionen sind in mehreren Gruppen angeordnet:

• Oben: Grundeinstellungen (Breite, Farbschema, Animation)
• Mitte links: Abstände (Padding und Margin)
• Mitte rechts: Hintergrundbild
• Unten: CSS-Klasse für fortgeschrittene Anpassungen

So gehst du vor

1. Breite festlegen: Schalte Volle Breite ein, wenn der Block von links bis rechts über die gesamte Seitenbreite gehen soll. Ausgeschalten erstreckt sich der Block nur so weit wie der Seiteninhalt.

2. Farbschema wählen: Öffne das Auswahlfeld Farbschema und wähle einen Stil:

   • Standard (hell): Der Standardabschnitt, passend für die meisten Blöcke
   • Sanft (Cream): Ein cremiger, sanfter Hintergrund – gut zum Auflockern von Bereichen wie FAQ oder Zitaten
   • Markenfarbe: Der Block nutzt deine Unternehmensfarbe – für Hervorhebungen und Call-to-Actions
   • Akzent: Nutzt eine Akzentfarbe – für auffällige Banner und Promo-Streifen
   • Akzent (alternativ): Eine dritte Akzentfarbe – für besondere Themen wie Sale oder Sonderaktionen
   • Dunkel: Ein dunkler Block – für Hero-Bereiche, Footer oder Kontrast
   • Individuell: Du wählst Hintergrund-, Schrift- und Akzentfarbe selbst

   Wenn du Individuell wählst, erscheinen drei Farbwähler: öffne jeden und klicke auf die gewünschte Farbe. Du kannst auch aus deinen Markenfarben wählen oder eine völlig neue Farbe eingeben.

3. Animation beim Scrollen hinzufügen (optional): Wähle im Feld Animation beim Einblenden einen Effekt, wie der Block erscheint, wenn der Leser die Seite hinunterscrollt. Leer lassen bedeutet keine Animation.

4. Abstände anpassen (optional): Klappe Padding auf, um den inneren Abstand zwischen Blockrand und Inhalt zu setzen – oben, rechts, unten, links einzeln oder gemeinsam. Klappe Margin auf, um den äußeren Abstand zu anderen Blöcken festzulegen.

5. Hintergrundbild hinzufügen (optional): Klappe Hintergrundbild auf und lade ein Bild. Du kannst dann Größe, Position und Wiederholung einstellen.

6. CSS-Klasse eintragen (optional, nur für Fortgeschrittene): Klappe CSS-Klasse auf und gib einen Klassennamen ein, wenn du über eigene CSS-Regeln zusätzliche Effekte möchte – z.B. my-custom-class. Leer lassen ist normal.

7. Alle Änderungen werden sofort gespeichert, sobald du sie vornimmst.

Was danach passiert

Der Block wird auf der Seite sofort mit den neuen Einstellungen angezeigt. Die Vorschau zeigt dir, wie der Block später im Browser aussieht.

Wenn du mit einem bestimmten Block-Typ (z.B. Text, Bild oder Formular) arbeitest, gibt es zusätzlich noch spezifische Einstellungen für dessen Inhalt – die findest du in den entsprechenden Hilfeseiten zu diesem Block-Typ.

Tipps und Hinweise

• Farbschema testen: Probiere verschiedene Farbschemata aus – die Vorschau zeigt dir sofort, wie sie wirken. Nutze Standard (hell) als Standardwahl für über 80 % deiner Blöcke.
• Individuell vs. vordefiniert: Vordefinierte Farbschemata sehen konsistent aus und passen sich automatisch an dein Design an. Individuell bietet Freiheit, kann aber das Gesamtbild zersplittern – nutze es gezielt für Highlights.
• Abstände verstehen: Padding ist der Abstand innen (zwischen Rahmen und Inhalt), Margin ist der Abstand außen (zwischen diesem und dem nächsten Block).
• Hintergrundbild und Text: Stelle sicher, dass Text auf dem Hintergrund lesbar bleibt – nutze ggf. eine dunkle Schriftfarbe bei hellem Bild oder umgekehrt.