Du kannst die Hintergrundfarbe von Inhaltselementen bearbeiten, um deine Markenfarben zu nutzen und deine Website so zu gestalten, dass sie deinem Unternehmensauftritt und / oder deinem persönlichen Geschmack entspricht. Du kannst Hintergrundfarben auf verschiedene Weisen nutzen. Wenn du nur die Hintergrundfarbe eines Inhaltselementes bearbeitest, wird dieses Inhaltselement hervorgehoben und / oder Abwechslung in das Design deiner Website gebracht. Du kannst auch die Hintergrundfarbe aller Inhaltselemente einer Seite bearbeiten und so den Hintergrund der gesamten Seite verändern.
Springe zu:
So bearbeitest du die Hintergrundfarbe
Sobald du ein Inhaltselement zu deiner Website hinzugefügt hast, kannst du dessen Hintergrundfarbe wie folgt verändern:
- Wähle das Inhaltselement oder bewege deine Maus darüber. Du siehst dann einen blauen Balken im oberen Bereich des Inhaltselementes.
- Im blauen Balken, wähle
. - Du kannst nun die Hintergrundfarbe bearbeiten. Wähle die gewünschte Farbe aus der Farbpalette aus oder gib einen Hex-Code im Eingabefeld ein. Unter der Farbpalette findest du auch voreingestellte Farben. Zu diesen Farben gehören immer die Basisfarben Schwarz und Weiß. Außerdem siehst du dort die Farben deiner gewählten Design-Vorlage. Wenn du die Farben deiner Design-Vorlage geändert hast, siehst du die von dir festgelegten Farben.
Wie du in dem obigen Beispiel sehen kannst, wird dir direkt angezeigt, wie deine Änderungen auf deiner Website aussehen werden.
Hinweis
Du kannst jederzeit Zurücksetzen wählen, um die Standardeinstellung für die Hintergrundfarbe des Inhaltselements wiederherzustellen. Sei dir jedoch bitte bewusst, dass du die Standardeinstellung wiederherstellst, nicht die Farbe, die du ausgewählt hattest als du mit dem Bearbeiten begonnen hast (falls du vorher bereits eine Hintergrundfarbe gewählt hattest, die von der Standardeinstellung abweicht). Wenn du die Farbe beibehalten möchtest, die ausgewählt war, als du mit dem Bearbeiten begonnen hast, wähle Abbrechen. - Wenn du deine vorgenommenen Änderungen speichern möchtest, wähle Speichern.
Deine Änderungen sind nun auf deiner Website sichtbar. Wenn du für deine Website eine Design-Vorlage mit einem Header nutzt, der über die volle Seitenbreite angezeigt wird, wird auch die Hintergrundfarbe über die volle Seitenbreite geändert. Wenn das nicht der Fall ist, wird auch die Hintergrundfarbe nicht über die volle Seitenbreite geändert. Hierdurch wird ein harmonisches und konsistentes Design für deine Website gewährleistet.
Die gewählte Hintergrundfarbe wird beibehalten, wenn du deine Design-Vorlage wechselst. Falls du eine der vorgeschlagenen Farben aus deiner alten Design-Vorlage gewählt hast, wird die Farbe nicht automatisch zu einer Farbe aus deiner neuen Design-Vorlage geändert. Wenn du deine Design-Vorlage wechselst, möchtest du daher vielleicht die Einstellungen für deine Hintergrundfarben überprüfen und sicherstellen, dass die Farbgestaltung deiner Website weiterhin ansprechend und konsistent ist.
Tipps und Tricks
Farbeinstellungen bieten dir viele Möglichkeiten, können jedoch auch zu einer Herausforderung werden. Um dich hierbei zu unterstützen, haben wir einige Tipps und Tricks für dich zusammengestellt:
- Nutze Farben, die zu deiner Marke oder deinem Unternehmen passen und die deine Kunden bereits kennen. Hierdurch wird das Vertrauen in deine Website gestärkt und ein ganzheitliches Design unterstützt.
- Manchmal ist weniger mehr. Insbesondere, wenn du die Hintergrundfarbe von Inhaltselementen bearbeitest, die deine Produktpalette präsentieren, solltest du eine helle Hintergrundfarbe wählen, damit deine Besucher sich auf deine Produkte konzentrieren können.
- Wenn du die Hintergrundfarbe von Inhaltselementen bearbeitest, für die du nicht alle Komponentenfarben selbst einstellen kannst (wie beispielsweise die Farbe des Abschicken Buttons auf dem Kontaktformular), solltest du eine helle Hintergrundfarbe wählen, die zu den Farben des Inhaltselements passt.
- Versuche, Farben derselben Farbfamilie zu nutzen. Zu viele verschiedene Farben auf deiner Website können deine Besucher ablenken. Stelle dennoch sicher, dass der Farbkontrast zwischen Texten, Links, Buttons und deiner Hintergrundfarbe hoch ist, damit die Lesbarkeit nicht eingeschränkt wird.
Hier siehst du abschließend ein Beispiel mit einer Hintergrundfarbe, die zur der selben Farbfamilie gehört wie die Überschriften. Dennoch ist der Kontrast hoch und die Überschrift leicht lesbar. Da auch das Bild Farben aus der Farbfamilie aufgreift, wirkt die Seite harmonisch und bildet eine Einheit: