Du kannst das Hintergrunddesign oder die Hintergrundfarbe von Inhaltselementen ändern, um deine Markenfarben zu integrieren und deine Webseite an deine Corporate Identity anzupassen. Wenn du nur das Hintergrunddesign einzelner Inhaltselemente bearbeitest, werden diese hervorgehoben und sorgen für mehr visuelle Abwechslung im Layout deiner Webseite.
Themenübersicht:
So bearbeitest du das Hintergrunddesign
Sobald du ein Inhaltselement hinzugefügt hast, kannst du dessen Hintergrunddesign bearbeiten.
- Wähle das Inhaltselement aus oder fahre mit der Maus darüber. Am oberen Rand des Inhaltselements erscheint eine blaue Leiste.
- Wähle
.
- Wähle eine der folgenden Optionen:
-
Einfarbiger Hintergrund:
Wähle das Farbfeld aus, um deine Hintergrundfarbe auszuwählen. -
Farbverlauf:
Nimm die gewünschten Einstellungen für einen Farbverlauf vor. Weitere Informationen findest du unter Verwenden von Farbverläufen als Hintergrund. -
Hintergrundbild:
Ziehe ein Bild auf das Feld oder wähle Bild hinzufügen, um eines hochzuladen. Lege die Bildausrichtung fest, indem du entweder oben, unten
oder die Mitte
als Mittelpunkt für das Bild auswählst. Verwende den Schieberegler Transparenz der Farbüberlagerung, um eine schwarze Überlagerung hinzuzufügen. Je nach Farbe der Elemente auf dem Bild kann eine weniger transparente Überlagerung die Barrierefreiheit und Lesbarkeit verbessern.
-
Einfarbiger Hintergrund:
-
Unter Hintergrundbreite kannst du festlegen, ob sich der Hintergrund an die Breite der Seiteninhalte anpasst oder die gesamte Seitenbreite einnimmt.
Info
Je nach der ausgewählten Design-Vorlage haben manche Designs links und rechts Weißraum, während andere die gesamte Breite nutzen. Mit dieser Option kannst du entscheiden, ob das Hintergrunddesign der Standardbreite der Design-Vorlage folgen oder davon abweichen soll.
-
Wenn du die Standard-Hintergrundfarbe deiner Design-Vorlage wiederherstellen möchtest, wähle Zurücksetzen.
Hinweis
Die Option Zurücksetzen stellt die Standardfarbe der Design-Vorlage wieder her, nicht die zuvor ausgewählte Farbe. Wenn du die Farbe behalten möchtest, die ausgewählt war, bevor du mit der Bearbeitung begonnen hast, wähle Abbrechen.
- Wähle Speichern.
Du hast das Hintergrunddesign bearbeitet.
Wenn du das Hintergrunddesign weiterer Inhaltselemente ändern oder erneut bearbeiten möchtest, wiederhole die oben beschriebenen Schritte. Deine Änderungen werden direkt auf deiner Webseite angewendet.
So wählst du eine Farbe aus
Wähle deine gewünschte Farbe in der Farbpalette . Du kannst auch eine der vordefinierten Farben auswählen
. Diese Optionen enthalten immer die Grundfarben Schwarz und Weiß. Außerdem findest du hier die aktuell verwendeten Shop-Farben. Wenn du einen exakten Farbton auswählen möchtest, gib einen Hex-Farbcode im Eingabefeld ein
.
Wenn du Zurücksetzen auswählst, stellst du die Standardfarbe deines Themes wieder her – nicht die zuvor ausgewählte Farbe. Wenn du die aktuell aktive Farbe behalten möchtest, wähle Abbrechen, bevor du die Änderungen speicherst.
Hinweis
Wenn du für deine Webseite eine bestimmte Farbe verwenden möchtest, kannst du mit einem "Color Picker" den entsprechenden Hex-Code ermitteln. So kannst du den gewünschten Farbton schnell ermitteln und auswählen. Color Picker sind kostenlos auf verschiedenen Webseiten und als Browser-Erweiterungen verfügbar.
Tipps für das Hintergrunddesign
Die folgenden Tipps helfen dir dabei, ein stimmiges und professionelles Erscheinungsbild für deine Webseite zu erzielen.
-
Wenn du eine Design-Vorlage im Vollbreiten-Layout ausgewählt hast, wird das Hintergrunddesign über die gesamte Seite angezeigt. Wenn die Design-Vorlage nicht im Vollbreiten-Layout ist, wird das Hintergrunddesign auf den Inhaltsbereich begrenzt. Das sorgt für ein konsistentes Layout, das zur Struktur des Themes passt.
Design über die gesamte Breite Kein Design über die gesamte Breite - Deine ausgewählten Hintergrundfarben bleiben erhalten, wenn du die Design-Vorlage wechselst. Wenn du eine Farbe aus einer anderen Design-Vorlage als Hintergrundfarbe gewählt hast, wird diese Farbe beibehalten und nicht automatisch an die neue Design-Vorlage angepasst. Überprüfe nach einem Wechsel deine Einstellungen, damit deine Webseite weiterhin einheitlich aussieht.
- Verwende Farben, die zu deiner Marke oder deinem Unternehmen passen und die Besucher wiedererkennen. Das sorgt für ein einheitliches und vertrauenswürdiges Erscheinungsbild.
- Nutze bevorzugt Farben einer ähnlichen Farbfamilie. Zu viele unterschiedliche Farben können Besucher vom Wesentlichen ablenken.
- Für Inhaltselemente, die dein Produktsortiment zeigen, eignen sich meist helle Hintergrundfarben. So bleibt der Fokus auf deinen Produkten.
- Achte auf einen hohen Kontrast zwischen Hintergrundfarbe und Elementen wie Text und Schaltflächen, um eine gute Lesbarkeit und Barrierefreiheit sicherzustellen.