Blockoptik anpassen

Du formatierst das Aussehen eines Blockinhalts – etwa die Farben, den Abstand oder eine Hintergrundgrafik. Diese Einstellungen beeinflussen, wie der Block im Browser deiner Besucher wirkt, ohne den Inhalt selbst zu verändern.

Voraussetzungen

Du bearbeitest gerade einen Block auf einer Seite. Das Einstellungsfenster des Blocks ist offen.

So gehst du vor

1. Öffne den Bereich Layout & Design – klicke auf den Schieberegler oder Pfeil daneben.

2. Volle Breite: Aktiviere diese Option, damit der Block die gesamte Seitenbreite nutzt statt nur die mittlere Spalte. Lasse das Häkchen weg, um den Block schmäler zu halten.

3. Farbschema: Wähle aus, in welchen Farben der Block erscheinen soll.

   • Standard (hell): Der neutrale Standardabschnitt – passt zu über 80 % aller Blöcke.
   • Sanft (Cream): Ein cremiger, weicher Hintergrund – gut um monotone Bereiche wie FAQ oder Zitate aufzulockern.
   • Markenfarbe: Der Block leuchtet in deiner Unternehmensfarbe – für Hervorhebungen, Hero-Bereiche und Aufrufe zum Handeln.
   • Akzent: Farbige Akzentfarbe – für auffällige Banner und Statistik-Bereiche.
   • Akzent (alternativ): Eine dritte Akzentfarbe – für besondere Themen wie Sale oder Sonderaktionen.
   • Dunkel: Ein dunkler Block – für Helden-Abschnitte, Footer und kontraststarke Sektionen.
   • Individuell: Du legst die Farben selbst fest – dann erscheinen drei weitere Farbwähler (siehe Schritt 4).

4. Falls du Individuell gewählt hast, bestimme jetzt die Farben:

   • Hintergrundfarbe: Die Farbe hinter dem Blockinhalt.
   • Schriftfarbe: Die Farbe des Textes.
   • Akzentfarbe: Die Farbe für Hervorhebungen und Schaltflächen im Block. Jeder Farbwähler zeigt dir deine Markenfarben als Vorschläge.

5. Animation beim Einblenden: Wähle, wie der Block optisch erscheint, wenn der Besucher zu ihm scrollt.

   • Keine Animation: Der Block ist sofort sichtbar, sobald er in den Sichtbereich kommt.
   • Andere Optionen: Der Block fliegt, verblasst oder wächst hinein – achte darauf, dass die Animation zum Design deiner Seite passt. Leer = keine Animation.

6. Padding (Innerer Abstand): Öffne diesen Bereich, um Platz zwischen dem Rand des Blocks und dem Inhalt einzustellen – oben, unten, links, rechts einzeln. Ein größerer Padding macht den Block luftiger.

7. Margin (Äußerer Abstand): Öffne diesen Bereich, um Platz zwischen diesem Block und dem nächsten einzustellen.

8. Hintergrundbild: Öffne diesen Bereich, um ein Bild hochzuladen oder auszuwählen, das hinter den Block-Inhalt passt. Das Bild wird je nach Größe gestreckt oder wiederholt.

9. CSS-Klasse: Trage hier eine eigene Klasse ein, falls du den Block mit eigenem Code formatieren möchtest – etwa my-custom-class. Dies ist nur für Fortgeschrittene nötig. Leer = keine zusätzliche Formatierung.

Alle Änderungen werden sofort gespeichert, während du sie vornimmst.

Aufbau der Einstellungen

Layout & Design gliedert sich in folgende Abschnitte:

• Volle Breite / Farbschema: Oben Seite an Seite – die wichtigsten Gestaltungsentscheidungen auf einen Blick.
• Animation beim Einblenden: In der zweiten Reihe – unabhängig von Farbwahl.
• Benutzerdefinierte Farben (nur bei Auswahl »Individuell«): Drei Farbwähler nebeneinander für Hintergrund, Schrift und Akzent.
• Padding / Margin / Hintergrundbild: Drei Abschnitte in der unteren Hälfte – Padding und Margin links nebeneinander, Hintergrundbild rechts.
• CSS-Klasse: Ganz unten, falls du den Block mit eigenem CSS weitergestalten möchtest.

Jeder Abschnitt lässt sich ein- und ausklappen. Eingeklappte Bereiche zeigen keine Details.

Was danach passiert

Die Änderungen wirken sich sofort auf die Vorschau des Blocks aus – du siehst die neuen Farben, den Abstand und die Animation live, während du einstellt. Sobald du die Blockbearbeitung speicherst oder verlässt, werden alle Optik-Einstellungen übernommen.

Tipps und Hinweise

• Farben und Kontrast: Wenn du Individuell wählst, achte darauf, dass die Schriftfarbe gegen die Hintergrundfarbe einen ausreichenden Kontrast hat – sonst ist der Text für deine Besucher schwer lesbar.
• Padding vs. Margin: Padding ist der Platz innen im Block (zwischen Rand und Inhalt). Margin ist der Platz außen (zwischen Blocks). Oft reicht es, nur eines zu ändern.
• Hintergrundbilder: Sehr große Bilder machen die Seite langsamer. Nutze Bilder von maximal 2–3 MB und lasse weboffice sie vor Upload verkleinern, wenn die Option angeboten wird.
• Animationen sparsam: Jede Animation lenkt ab. Eine Seite mit zu vielen Animationen wirkt unruhig. Nutze Animationen nur bei Blöcken, die du hervorheben möchtest.