Mit einem passenden Hintergrund können Sie einzelne Inhaltsbereiche Ihrer Webseite hervorheben, optisch voneinander trennen oder ihnen eine besondere Atmosphäre verleihen.
Der Smart-Editor bietet dafür verschiedene Gestaltungsmöglichkeiten. Sie können beispielsweise eine Hintergrundfarbe festlegen, ein Bild verwenden, einen Farbverlauf erstellen oder mehrere Hintergrundebenen miteinander kombinieren.
In dieser Anleitung erfahren Sie, wie Sie Hintergründe gestalten, Bilder richtig positionieren und die Lesbarkeit Ihrer Inhalte sicherstellen.
1. Welche Hintergrundarten gibt es?
Ein Inhaltsblock kann auf unterschiedliche Weise gestaltet werden.
Der Smart-Editor unterstützt unter anderem folgende Hintergrundarten:
- Einfarbiger Hintergrund: Der Block erhält eine einheitliche Hintergrundfarbe.
- Farbverlauf: Mehrere Farben gehen fließend ineinander über.
- Bildhintergrund: Ein Foto oder eine Grafik wird hinter den Inhalten angezeigt.
- Videohintergrund: Ein Video dient als bewegter Hintergrund.
- Mehrschichtiger Hintergrund: Verschiedene Hintergrundarten werden miteinander kombiniert, beispielsweise ein Bild mit einer halbtransparenten Farbfläche.
Welche Variante am besten geeignet ist, hängt vom Zweck des Inhaltsbereichs und dem gewünschten Erscheinungsbild ab.
Tipp: Für gewöhnliche Textbereiche sind ruhige, einfarbige Hintergründe häufig die beste Wahl. Bilder und aufwendigere Effekte sollten Sie gezielt zur Hervorhebung besonderer Inhalte einsetzen.
2. Einen Block zur Hintergrundbearbeitung auswählen
Bevor Sie den Hintergrund verändern, müssen Sie den gewünschten Inhaltsblock auswählen.
- Öffnen Sie die betreffende Seite im Smart-Editor.
- Scrollen Sie zum gewünschten Inhaltsbereich.
- Wählen Sie den vollständigen Block über die entsprechenden Blockwerkzeuge aus.
- Öffnen Sie im Eigenschaftenfenster den Bereich für die Hintergrundgestaltung.
Hier finden Sie die verfügbaren Hintergrundoptionen.
Den richtigen Bereich auswählen
Achten Sie darauf, tatsächlich den gesamten Block auszuwählen.
Wenn stattdessen ein Textfeld, eine Rasterzelle oder ein Container ausgewählt ist, verändern Sie möglicherweise nur dessen Hintergrund.
Das kann durchaus erwünscht sein, ist aber nicht dasselbe wie die Gestaltung des vollständigen Blocks.
Wichtig: Ein Block, ein darin enthaltener Container und eine einzelne Rasterzelle können unterschiedliche Hintergründe besitzen. Kontrollieren Sie deshalb vor jeder Änderung die aktuelle Auswahl.
3. Eine Hintergrundfarbe festlegen
Die einfachste Möglichkeit zur Hintergrundgestaltung ist eine einheitliche Farbe.
Damit können Sie Inhaltsbereiche optisch voneinander trennen, ohne zusätzliche Bilddateien verwenden zu müssen.
Die Hintergrundfarbe ändern
- Wählen Sie den gewünschten Block aus.
- Öffnen Sie die Hintergrund-Einstellungen im Eigenschaftenfenster.
- Wählen Sie einen Farbhintergrund aus oder fügen Sie eine entsprechende Farbebene hinzu.
- Klicken Sie auf die gewünschte Farbe.
- Übernehmen Sie die Einstellung.
Die neue Hintergrundfarbe wird direkt im Bearbeitungsbereich angezeigt.
Vorgegebene Farben verwenden
Der Smart-Editor bietet eine Farbauswahl, die unter anderem Farben des vorhandenen Designs enthalten kann.
Diese eignen sich besonders, wenn Ihre Webseite bereits ein einheitliches Farbschema besitzt.
Eine individuelle Farbe festlegen
Sie können auch eigene Farbwerte verwenden.
Eine Farbe lässt sich beispielsweise durch einen sogenannten HEX-Farbcode beschreiben.
Einige Beispiele:
- #FFFFFF – Weiß
- #000000 – Schwarz
- #F2F2F2 – sehr helles Grau
- #333333 – dunkles Grau
- #FF6A00 – kräftiges Orange
Tipp: Wenn Sie eine bestimmte Farbe mehrfach verwenden möchten, notieren Sie sich den Farbcode. So können Sie dieselbe Farbe auch in anderen Inhaltsbereichen einsetzen.
4. Inhaltsbereiche mit unterschiedlichen Farben gestalten
Hintergrundfarben können helfen, den Aufbau einer längeren Webseite verständlicher zu machen.
Beispielsweise können Sie einen weißen Einleitungsbereich verwenden, anschließend einen hellgrauen Informationsblock und danach wieder einen weißen Abschnitt.
Dadurch werden die Themenbereiche auch ohne zusätzliche Rahmen oder Trennlinien optisch voneinander abgegrenzt.
Helle Hintergründe
Helle Hintergründe eignen sich besonders für längere Texte und gewöhnliche Informationsbereiche.
Dunkle Schrift ist darauf normalerweise gut lesbar.
Dunkle Hintergründe
Dunkle Hintergründe können wichtige Bereiche hervorheben, beispielsweise eine Handlungsaufforderung oder einen besonderen Hinweis.
Verwenden Sie darauf entsprechend helle Schriftfarben.
Einheitliche Gestaltung
Versuchen Sie, nicht für jeden Block eine völlig andere Farbe zu verwenden.
Ein überschaubares Farbschema sorgt dafür, dass Ihre Webseite zusammenhängend und professionell wirkt.
Tipp: Wechselnde Hintergrundfarben sollten die Orientierung unterstützen. Zu viele unterschiedliche Farben können dagegen vom eigentlichen Inhalt ablenken.
5. Ein Hintergrundbild hinzufügen
Hintergrundbilder eignen sich besonders für großflächige Begrüßungsbereiche, Unternehmensvorstellungen oder andere hervorgehobene Abschnitte.
Im Gegensatz zu einem gewöhnlichen Bildelement liegt das Hintergrundbild hinter den übrigen Inhalten des Blocks.
Ein Hintergrundbild festlegen
- Wählen Sie den gewünschten Block aus.
- Öffnen Sie die Hintergrund-Einstellungen.
- Wählen Sie die Hintergrundart Bild oder fügen Sie eine Bildebene hinzu.
- Öffnen Sie die Bildauswahl.
- Wählen Sie ein vorhandenes Bild oder laden Sie eine eigene Datei hoch.
- Übernehmen Sie das gewünschte Bild.
- Kontrollieren Sie die Darstellung im Block.
Das Bild wird anschließend als Hintergrund des ausgewählten Bereichs verwendet.
Ein geeignetes Motiv wählen
Achten Sie darauf, dass das Motiv zur Aussage des Inhaltsbereichs passt.
Wenn Text vor dem Bild erscheinen soll, sind Motive mit ruhigen Flächen häufig besonders geeignet.
Ein sehr detailreiches Bild kann die Lesbarkeit von Überschriften und Beschreibungstexten erschweren.
Tipp: Wählen Sie ein Bild, bei dem das wichtigste Motiv auch dann noch erkennbar bleibt, wenn an den Seiten oder am oberen und unteren Rand etwas abgeschnitten wird.
6. Größe und Bildausschnitt anpassen
Ein Hintergrundbild wird nicht zwangsläufig vollständig angezeigt.
Sein sichtbarer Ausschnitt hängt unter anderem von der Größe des Blocks und vom Seitenverhältnis des Bildes ab.
Ein breites Foto kann auf einem großen Bildschirm anders aussehen als auf einem schmalen Smartphone.
Den Bildausschnitt verändern
Über die Bildeinstellungen können Sie den sichtbaren Ausschnitt beziehungsweise die Positionierung des Hintergrundbildes beeinflussen.
Je nach verfügbarer Funktion können Sie außerdem den Bildausschnitt zuschneiden oder die Darstellung vergrößern.
Den wichtigen Bildbereich erhalten
Wenn sich eine Person oder ein wichtiger Gegenstand im Bild befindet, sollte dieser möglichst nicht durch den Zuschnitt verschwinden.
Überprüfen Sie deshalb die Bildposition besonders sorgfältig.
Was bedeutet „Hintergrund ausfüllen“?
Bei einer flächendeckenden Hintergrunddarstellung wird das Bild so skaliert, dass der vorgesehene Bereich vollständig ausgefüllt wird.
Dadurch können Teile des Bildes außerhalb des sichtbaren Bereichs liegen.
Wichtig: Ein Hintergrundbild ist nicht mit einem gewöhnlichen Bildelement gleichzusetzen. Wenn ein Foto unbedingt vollständig angezeigt werden muss, kann ein normales Bildelement die bessere Wahl sein.
7. Einen Farbverlauf als Hintergrund verwenden
Ein Farbverlauf besteht aus mehreren Farben, die fließend ineinander übergehen.
Dadurch lassen sich Hintergründe gestalten, die abwechslungsreicher wirken als eine einzelne Farbfläche.
Einen Farbverlauf hinzufügen
- Wählen Sie den gewünschten Block aus.
- Öffnen Sie die Hintergrund-Einstellungen.
- Wählen Sie die Hintergrundart Farbverlauf beziehungsweise Gradient.
- Legen Sie die gewünschten Farben fest.
- Passen Sie bei Bedarf Richtung und Verlauf an.
- Kontrollieren Sie das Ergebnis.
Lineare Farbverläufe
Bei einem linearen Farbverlauf gehen die Farben entlang einer bestimmten Richtung ineinander über.
Beispielsweise kann ein Block links dunkelblau beginnen und nach rechts in ein helleres Blau übergehen.
Radiale Farbverläufe
Bei einem radialen Farbverlauf breiten sich die Farben kreisförmig von einem Bereich aus aus.
Dadurch lassen sich beispielsweise dezente Licht- und Helligkeitseffekte erzeugen.
Weitere Farbpositionen
Der Farbverlaufseditor erlaubt es, zusätzliche Farbpunkte festzulegen und ihre Position innerhalb des Verlaufs zu verändern.
Auf diese Weise können auch komplexere Übergänge gestaltet werden.
Tipp: Für gewöhnliche Inhaltsbereiche reichen häufig zwei harmonierende Farben. Aufwendige Farbverläufe sollten Sie gezielt einsetzen, damit die Gestaltung nicht zu unruhig wirkt.
8. Hintergrundbilder mit einer Farbüberlagerung versehen
Wenn Sie Text vor einem Hintergrundbild verwenden, kann eine zusätzliche Farbüberlagerung die Lesbarkeit deutlich verbessern.
Diese Technik wird häufig als Schattierung, Shade oder Overlay bezeichnet.
Dabei wird über dem Hintergrundbild eine teilweise transparente Farbfläche angezeigt.
Eine Schattierung hinzufügen
- Wählen Sie den Block mit dem Hintergrundbild aus.
- Öffnen Sie die Hintergrund-Einstellungen.
- Fügen Sie eine zusätzliche Farbebene hinzu oder verwenden Sie die angebotene Funktion für ein Bild mit Schattierung.
- Wählen Sie eine geeignete Farbe.
- Passen Sie die Deckkraft der Farbebene an.
- Kontrollieren Sie die Lesbarkeit der Texte.
Dunkle Überlagerungen
Eine dunkle, halbtransparente Fläche eignet sich besonders, wenn helle Überschriften vor einem Foto stehen.
Das Bild bleibt sichtbar, während sich der Text deutlicher vom Hintergrund abhebt.
Helle Überlagerungen
Eine helle Überlagerung kann sinnvoll sein, wenn Sie dunkle Schrift vor einem Bild verwenden möchten.
Tipp: Die Überlagerung sollte nur so stark sein wie nötig. Ziel ist es, die Lesbarkeit zu verbessern, ohne das Bild vollständig zu verdecken.
9. Mehrere Hintergrundebenen kombinieren
Der Smart-Editor unterstützt mehrschichtige Hintergründe.
Damit können Sie verschiedene Hintergrundarten miteinander kombinieren.
Eine solche Gestaltung kann beispielsweise bestehen aus:
- einem Hintergrundbild,
- einer halbtransparenten Farbfläche darüber,
- einem zusätzlichen Farbverlauf.
Die Hintergrundebenen werden im Eigenschaftenfenster verwaltet.
Eine weitere Ebene hinzufügen
- Wählen Sie den gewünschten Block aus.
- Öffnen Sie den Bereich für Hintergründe.
- Verwenden Sie die Funktion zum Hinzufügen einer Hintergrundebene.
- Wählen Sie deren Art, beispielsweise Farbe, Farbverlauf oder Bild.
- Passen Sie die Eigenschaften der neuen Ebene an.
Die Ebenenreihenfolge verändern
Die Reihenfolge der Hintergrundebenen bestimmt, welche Ebene vor oder hinter einer anderen angezeigt wird.
Sie können diese Reihenfolge mithilfe der entsprechenden Verschiebefunktion verändern.
Eine Hintergrundebene entfernen
Nicht mehr benötigte Hintergrundebenen können Sie über die dafür vorgesehene Entfernen-Funktion löschen.
Wichtig: Die Hintergrundebenen eines Blocks sind nicht mit der gewöhnlichen Ebenenansicht seiner Texte, Bilder und Container gleichzusetzen. Sie werden innerhalb der Hintergrund-Einstellungen verwaltet.
10. Die Transparenz eines Hintergrunds einstellen
Mit Transparenz bestimmen Sie, wie stark eine Hintergrundebene die darunterliegenden Inhalte verdeckt.
Eine vollständig deckende Farbebene lässt den darunterliegenden Hintergrund nicht mehr erkennen.
Eine teilweise transparente Farbebene ermöglicht dagegen den Blick auf das darunterliegende Bild.
Was bedeutet Deckkraft?
Die Deckkraft wird häufig als Opacity bezeichnet.
Ein Wert von 100 % entspricht einer vollständig deckenden Darstellung.
Bei niedrigeren Werten wird die Ebene entsprechend transparenter.
Transparente Farbverläufe
Auch Farbverläufe können transparente Farben enthalten.
Dadurch lässt sich beispielsweise ein Bild auf einer Seite stärker abdunkeln, während es auf der anderen Seite nahezu unverändert sichtbar bleibt.
Das kann hilfreich sein, wenn sich ein Text nur auf einer Seite des Hintergrundbildes befindet.
Hinweis: Die verfügbaren Transparenzeinstellungen hängen von der jeweiligen Hintergrundart ab. Nicht jede Ebene besitzt dieselben Einstellmöglichkeiten.
11. Den Parallax-Effekt verwenden
Der Smart-Editor bietet für bestimmte Bildhintergründe einen sogenannten Parallax-Effekt.
Dabei bewegt sich das Hintergrundbild beim Scrollen optisch anders als die übrigen Inhalte.
Dadurch kann ein Eindruck von räumlicher Tiefe entstehen.
Den Effekt aktivieren
- Wählen Sie einen Block mit Hintergrundbild aus.
- Öffnen Sie die Einstellungen des Bildhintergrunds.
- Suchen Sie die Option Parallax.
- Aktivieren Sie die Funktion.
- Öffnen Sie die Vorschau beziehungsweise die veröffentlichte Webseite.
- Scrollen Sie durch den betreffenden Bereich, um den Effekt zu überprüfen.
Warum sehe ich im Editor keinen Unterschied?
Ein Parallax-Effekt lässt sich nicht immer direkt in der statischen Bearbeitungsansicht beurteilen.
Er wird vor allem beim Scrollen in der Vorschau beziehungsweise auf der tatsächlichen Webseite sichtbar.
Parallax auf Smartphones
Die Darstellung solcher Effekte kann abhängig vom Browser und vom verwendeten Gerät unterschiedlich ausfallen.
Insbesondere mobile Browser können bestimmte Hintergrundeffekte einschränken oder anders darstellen.
Tipp: Verwenden Sie Parallax-Effekte sparsam. Ein einzelner hervorgehobener Abschnitt kann wirkungsvoller sein als zahlreiche bewegte Hintergründe.
12. Videos als Blockhintergrund verwenden
Neben Farben und Bildern können auch Videos als Hintergrund eines Blocks eingesetzt werden.
Das eignet sich beispielsweise für besondere Begrüßungsbereiche oder kurze atmosphärische Aufnahmen.
Einen Videohintergrund hinzufügen
- Wählen Sie den gewünschten Block aus.
- Öffnen Sie die Hintergrund-Einstellungen.
- Wählen Sie eine Video-Hintergrundebene aus.
- Wählen Sie die gewünschte Videoquelle beziehungsweise Videodatei.
- Übernehmen Sie die Einstellung.
- Kontrollieren Sie die Darstellung in der Vorschau.
Welche Quellen und Einstellungen angeboten werden, hängt von den verfügbaren Funktionen Ihrer Smart-Editor-Version ab.
Lesbarkeit beachten
Bewegte Bilder können von Texten und Schaltflächen ablenken.
Verwenden Sie deshalb möglichst ruhige Videos und achten Sie auf einen ausreichenden Kontrast.
Ladezeit beachten
Videodateien können wesentlich größer sein als gewöhnliche Bilder.
Dadurch kann sich die Ladezeit einer Webseite deutlich erhöhen.
Wichtig: Ein Videohintergrund sollte eine gestalterische Ergänzung sein. Wichtige Informationen müssen auch dann verständlich bleiben, wenn das Video nicht abgespielt wird.
13. Hintergründe auf Smartphones und Tablets überprüfen
Ein Hintergrundbild kann auf unterschiedlichen Bildschirmgrößen sehr verschieden aussehen.
Ein breites Foto wird auf einem schmalen Smartphone-Bildschirm möglicherweise stark zugeschnitten.
Dadurch können wichtige Bildbereiche aus dem sichtbaren Ausschnitt verschwinden.
Die verschiedenen Ansichten kontrollieren
- Gestalten Sie den Hintergrund zunächst in der gewünschten Bildschirmansicht.
- Wechseln Sie zur Tablet-Ansicht.
- Prüfen Sie den sichtbaren Bildausschnitt und die Lesbarkeit der Texte.
- Wechseln Sie zu den Smartphone-Ansichten.
- Kontrollieren Sie erneut den Bildausschnitt, die Blockhöhe und die Abstände.
- Nehmen Sie bei Bedarf Anpassungen vor.
- Überprüfen Sie das Ergebnis anschließend auf der tatsächlichen Webseite.
Wichtige Motive richtig positionieren
Wenn ein Bild beispielsweise eine Person zeigt, sollte diese möglichst auch auf kleineren Bildschirmen erkennbar bleiben.
Verwenden Sie die verfügbaren Positionierungs- und Zuschnittfunktionen, um den Bildausschnitt entsprechend anzupassen.
Texte und Hintergrund gemeinsam betrachten
Achten Sie darauf, dass Texte nicht plötzlich vor sehr hellen oder detailreichen Bildbereichen stehen, wenn sich der Ausschnitt verändert.
Gegebenenfalls kann eine stärkere Schattierung die Lesbarkeit verbessern.
Wichtig: Verlassen Sie sich nicht ausschließlich auf die Editoransicht. Prüfen Sie die fertige Seite nach Möglichkeit auch direkt auf einem Smartphone.
14. Hintergrundbilder für schnelle Ladezeiten optimieren
Ein großflächiges Hintergrundbild kann das Erscheinungsbild einer Seite wesentlich prägen.
Gleichzeitig kann eine sehr große Bilddatei die Ladezeit erheblich beeinflussen.
Die richtige Auflösung wählen
Ein Hintergrundbild sollte eine ausreichende Auflösung besitzen, damit es auf größeren Bildschirmen nicht unscharf erscheint.
Allerdings ist es normalerweise nicht notwendig, jedes Foto in der vollständigen Originalauflösung einer modernen Kamera hochzuladen.
Geeignete Bildformate verwenden
Für viele fotografische Hintergründe eignen sich gut komprimierte Formate wie JPEG oder WebP.
WebP kann bei vergleichbarer Bildqualität häufig kleinere Dateien ermöglichen.
Bilddateien vor dem Hochladen bearbeiten
Sie können Bilder bereits vor dem Hochladen zuschneiden, verkleinern und komprimieren.
Dadurch reduzieren Sie die benötigte Datenmenge und verbessern häufig die Ladegeschwindigkeit Ihrer Webseite.
Tipp: Verwenden Sie für Hintergrundbilder nicht unnötig große Dateien. Eine sorgfältige Bildoptimierung verbessert besonders auf mobilen Geräten die Ladegeschwindigkeit.
15. Häufige Probleme mit Blockhintergründen lösen
Bei der Hintergrundgestaltung können verschiedene Probleme auftreten.
Die Hintergrundfarbe ändert sich nicht
Prüfen Sie zunächst, ob Sie den richtigen Block ausgewählt haben.
Kontrollieren Sie außerdem, ob eine andere Hintergrundebene die gewählte Farbe überdeckt.
Das Hintergrundbild wird abgeschnitten
Überprüfen Sie den Bildausschnitt und die Positionierung des Bildes.
Bei einer flächendeckenden Darstellung ist ein gewisser Zuschnitt häufig unvermeidbar.
Die Schrift ist schwer lesbar
Verwenden Sie eine passende Textfarbe oder eine zusätzliche halbtransparente Hintergrundebene.
Bei sehr unruhigen Motiven kann auch ein anderes Hintergrundbild sinnvoll sein.
Ein Hintergrund sieht auf dem Smartphone anders aus
Kontrollieren Sie den verfügbaren Platz, den Bildausschnitt und die Höhe des Blocks.
Gegebenenfalls benötigen die verschiedenen Bildschirmansichten unterschiedliche Anpassungen.
Der Parallax-Effekt ist nicht sichtbar
Öffnen Sie die Vorschau beziehungsweise die tatsächliche Webseite und überprüfen Sie den Effekt beim Scrollen.
Beachten Sie, dass nicht jeder Browser und jedes Gerät dieselbe Darstellung unterstützt.
Ein Hintergrundvideo wird nicht abgespielt
Überprüfen Sie die Videoquelle und die Einstellungen.
Beachten Sie außerdem, dass Browser die automatische Videowiedergabe unter bestimmten Bedingungen einschränken können.
Tipp: Wenn eine Hintergrundgestaltung unerwartet aussieht, überprüfen Sie zunächst den ausgewählten Block, die vorhandenen Hintergrundebenen und deren Reihenfolge.
16. Empfehlungen für eine gelungene Hintergrundgestaltung
Mit einigen einfachen Gestaltungsregeln können Sie Ihre Webseite ansprechend und übersichtlich gestalten.
- Farben gezielt einsetzen: Nutzen Sie unterschiedliche Hintergründe, um wichtige Inhaltsbereiche hervorzuheben.
- Einheitlich bleiben: Verwenden Sie möglichst ein überschaubares Farbschema.
- Lesbarkeit sicherstellen: Texte müssen sich deutlich vom Hintergrund abheben.
- Bildmotive bewusst auswählen: Hintergrundbilder sollten zum Inhalt passen und einen geeigneten Bildausschnitt besitzen.
- Überlagerungen verwenden: Halbtransparente Farbflächen können Texte vor Bildern besser lesbar machen.
- Effekte sparsam einsetzen: Parallax und bewegte Hintergründe sollten den Inhalt unterstützen, nicht von ihm ablenken.
- Dateigrößen beachten: Optimierte Bilder und Videos verbessern die Ladegeschwindigkeit.
- Responsive Ansichten kontrollieren: Prüfen Sie Bildausschnitte, Kontraste und Blockhöhen auf unterschiedlichen Geräten.
- Frontend überprüfen: Kontrollieren Sie die endgültige Gestaltung nach dem Speichern im Browser.
17. Wie geht es weiter?
Sie wissen jetzt, wie Sie die Hintergründe Ihrer Inhaltsblöcke mit Farben, Bildern, Farbverläufen und zusätzlichen Hintergrundebenen gestalten können.
Sie haben außerdem gelernt, wie Sie Bildausschnitte anpassen, Texte durch Farbüberlagerungen besser lesbar machen und die Darstellung auf unterschiedlichen Bildschirmgrößen überprüfen.
In der nächsten Anleitung beschäftigen wir uns mit der Größe von Inhaltsblöcken und den Abständen zwischen ihren Elementen.
Als Nächstes empfehlen wir Ihnen die Anleitung „Blockgrößen und Abstände einstellen“. Dort erfahren Sie, wie Sie Höhen, Breiten, Innenabstände und Außenabstände gezielt verändern können.