Blockdesign anpassen
Hier stellst du Farbe, Abstände, Animation und Hintergrundbild für einen einzelnen Block ein. Das Design gilt nur für diesen Block – es beeinflusst nicht die anderen Blöcke auf der Seite.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
Aufbau der Einstellungen
Die Einstellungen sind in einer Gruppe namens „Layout & Design" zusammengefasst. Sie sind normalerweise eingeklappt – klappe sie aus, um alle Optionen zu sehen.
Oben findest du zwei schnelle Optionen:
- Volle Breite: Schalter, ob der Block die gesamte Seitenbreite nutzen soll oder in die Standardbreite passt
- Farbschema: Auswahlfeld mit vordefinierten Farbkombinationen (Hintergrund, Schrift, Akzente)
Darunter folgt die Animation beim Scrollen, dann – je nach Farbschema – die Felder für Abstände und Hintergrundbild. Am Ende kannst du eine CSS-Klasse eintragen, wenn du Zusatzformatierungen brauchst.
So gehst du vor
Breite einstellen: Schalte „Volle Breite" ein, wenn der Block von links bis rechts reichen soll. Lass es aus, wenn er die normale Seitenbreite nutzen soll.
Farbschema wählen: Klicke auf das Auswahlfeld „Farbschema". Dir werden mehrere Varianten angeboten:
- Standard (hell): Der Standardabschnitt – geeignet für über 80 % aller Blöcke
- Sanft (Cream): Cremiger Hintergrund – lockert Bereiche auf, z.B. bei FAQ oder Zitaten
- Markenfarbe: Block in deiner Unternehmensfarbe – für Hervorhebungen und Call-to-Actions
- Akzent: Auffällige Akzentfarbe – für Banner und Promo-Streifen
- Akzent (alternativ): Dritte Akzentfarbe – für besondere Themen
- Dunkel: Dunkler Block – für Hero-Bereiche und kontrastreiche Sektionen
- Individuell: Du wählst alle Farben selbst (siehe Schritt 5)
Animation beim Scrollen (optional): Wähle aus dem Auswahlfeld „Animation beim Einblenden", wie der Block erscheinen soll, wenn der Besucher zu ihm scrollt. Lass es leer, wenn keine Animation erfolgen soll.
Farben anpassen (nur bei „Individuell"): Hast du „Individuell" gewählt, erscheinen drei zusätzliche Farbwähler:
- Hintergrundfarbe: Farbe des Block-Hintergrunds
- Schriftfarbe: Farbe des Texts
- Akzentfarbe: Farbe für Hervorhebungen (z.B. Buttons, Links)
Klicke auf einen Farbwähler, um eine Farbe zu picken oder aus den Markenfarben-Vorschlägen zu wählen.
Abstände einstellen (optional): Klappe den Bereich „Padding" auf, um Innenabstände zu setzen (Abstand zwischen Rand und Inhalt). Klappe „Margin" auf, um Außenabstände zu setzen (Abstand zu anderen Blöcken). In beiden Bereichen kannst du Oben, Unten, Links und Rechts einzeln einstellen – oder alle zusammen mit einem Wert.
Hintergrundbild hinzufügen (optional): Klappe „Hintergrundbild" auf und lade ein Bild hoch. Das Bild liegt hinter dem Blockinhalt. Du kannst einstellen, wie es positioniert und skaliert wird.
CSS-Klasse eintragen (optional): Klappe „CSS-Klasse" auf und trage einen Klassennamen ein, wenn du zusätzliche HTML-Formatierungen brauchst (z.B. für spezielle Designanpassungen). Das ist nur für fortgeschrittene Anwender nötig.
Speichern: Die Änderungen werden sofort gespeichert, während du tippst oder eine Option wählst.
Was danach passiert
Die neuen Einstellungen wirken sich sofort auf den Block in der Vorschau aus. Alle Änderungen werden gespeichert, sobald du sie vornimmst – ein separates Speichern ist nicht nötig.
Das Blockdesign wirkt sich nur auf diesen einzelnen Block aus. Andere Blöcke auf der Seite behalten ihre Einstellungen. Wenn du die gleiche Gestaltung auf einen anderen Block übertragen möchtest, musst du die Einstellungen dort wiederholen.
Um deine Website zu veröffentlichen und die Änderungen live zu nehmen, siehe Website veröffentlichen.
Tipps und Hinweise
Markenfarben nutzen: Wähle „Markenfarbe" oder „Akzent", um ein einheitliches Design zu bewahren. Diese Farben stammen aus deinem Erscheinungsbild und passen sich automatisch an, wenn du dort etwas änderst.
Abstände: Padding vs. Margin: Padding ist der Innenabstand (zwischen Rand und Inhalt). Margin ist der Außenabstand (zwischen Block und nächstem Block). Nutze Padding, um mehr Luft um den Inhalt zu schaffen, und Margin, um Blöcke voneinander zu trennen.
Animation sparsam einsetzen: Animationen lenken Aufmerksamkeit. Sie wirken besser bei wenigen, wichtigen Blöcken – nicht auf der ganzen Seite.
Hintergrundbild und Text: Stelle sicher, dass der Text auch über dem Bild noch gut lesbar ist. Dunkle Schriftfarbe auf hellem Bild funktioniert besser als helle auf dunkelm.