Füge Hintergrundbilder für die Seitenabschnitte deiner Website hinzu und passe sie an.

Es gibt mehrere Möglichkeiten, den Hintergrund deiner Website zu gestalten. Eine Möglichkeit besteht darin, Hintergrundbilder zu Seitenabschnitten hinzuzufügen und diese Bilder mit einer Vielzahl von Bildeffekten anzupassen. So kannst du Seiten-Banner und auffällige visuelle Elemente erstellen, die zu deiner Marke passen.

In dieser Anleitung erfährst du, wie du Fotos und andere Hintergrundbilder, die du auf Squarespace hochlädst, hinzufügen und anpassen kannst. Weitere Informationen zu all deinen Optionen für die Hintergrundgestaltung findest du unter Den Hintergrund deiner Website gestalten.

Diese Anleitung gilt für Version 7.1. Wenn deine Website Version 7.0 nutzt, kannst du je nach Template Banner-Bilder und Hintergrundvideos für ähnliche Effekte hinzufügen.

Video ansehen

Bevor du loslegst

• Auto-Layouts, Portfolio-Abschnitte und alle Block-Abschnitte unterstützen das Hinzufügen von Hintergrundbildern. Du kannst zu diesen Abschnitten auch Hintergrundvideos und Creative Backgrounds hinzufügen.
• Es ist nicht möglich, Hintergrundbilder zu Galerie-Abschnitten hinzuzufügen, aber du kannst eine Hintergrundfarbe hinzufügen oder das Layout Slideshow: Voll verwenden, um einen ähnlichen Effekt zu erzielen.
• Blog-, Events- und Shop-Abschnitte unterstützen keine Hintergrundinhalte, aber du kannst eine Hintergrundfarbe hinzufügen.
• Wenn dein Abschnitt Text oder andere Inhalte enthält, stelle sicher, dass er vor deinen Creative Backgrounds immer noch sichtbar und lesbar ist. Verwende zum Ändern der Textfarbe die Schriftanpassungen im Farbschema dieses Abschnitts.
• Hintergrundbilder werden automatisch basierend auf der Menge des Inhalts im Abschnitt und der Größe des Browser-Bildschirms des Besuchers zugeschnitten. Verwende einen Bild-Block, um festzulegen, wie ein Bild zugeschnitten werden soll. Um zu erfahren, wie Hintergrundbilder auf Mobilgeräten angezeigt werden, besuche Wie wird meine Website auf Mobilgeräten dargestellt?

Tipps zur Bildformatierung

Überprüfe die Formatierung deiner Bilder, bevor du sie auf deine Website hochlädst. Befolge für Hintergrundbilder die folgenden Richtlinien:

• Verwende Bilder mit einer Breite zwischen 1500 Pixel und 2500 Pixel.
• Verwende keine Bilder, die Text in der eigentlichen Bilddatei enthalten. Füge stattdessen Text über dem Bild hinzu.
• Wenn du Text zum Bild hinzufügen möchtest, verwende ein Bild mit einem abstrakten Muster.
• Informationen zu Bilddateitypen und den vollständigen Anforderungen im Hinblick auf Bilder findest du unter Bilder für Websites formatieren.

Füge Hintergrundbilder hinzu

Verwende ein Hintergrundbild, um Kontrast zu Text oder anderen Inhalten hinzuzufügen, die den Abschnitt überlagern, oder erstelle ein Banner, wenn sich der Abschnitt oben auf der Seite befindet.

So fügst du ein Abschnitts-Hintergrundbild hinzu:

1. Öffne das Seiten-Menü und klicke dann auf die Seite mit dem Abschnitt, den du bearbeiten möchtest.
2. Klicke in der linken oberen Ecke auf Bearbeiten.
3. Klicke auf das Stift-Symbol des Abschnitts und dann auf Hintergrund.
4. Klicke auf Bild und dann auf +. Wähle eine Bildquelle aus dem Drop-down-Menü aus, um ein Bild hochzuladen, ein zuvor hochgeladenes Bild wiederzuverwenden oder ein Agenturbild zu verwenden.
5. Lege die Hintergrundbreite und die Deckkraft des Overlay fest.
6. Klicke auf Format, um die Abschnittshöhe, die Inhaltsbreite und die Inhaltsausrichtung zu ändern.
7. Klicke auf Farben, um ein Farbdesign für das Overlay und alle hinzugefügten Inhalte auszuwählen. Mehr dazu erfährst du unter Farben ändern. Wenn du das Bild entfernst, wird das Overlay zur Hintergrundfarbe des Abschnitts.
8. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Nachdem du ein Bild hinzugefügt hast, kannst du:

• Text oder andere Inhalte hinzufügen, die das Bild überlagern
• Das Bild gestalten
• Bildeffekte hinzufügen
• Bearbeite das Bild
• Lege den Bildausschnitt des Bildes fest
• Das Bild ändern, indem du auf Ersetzen klickst
• Das Bild löschen

Text oder andere Inhalte hinzufügen

Du kannst Text oder andere Inhalte über einem Hintergrundbild hinzufügen. Da sich der hinzugefügte Text an jede Bildschirmgröße oder jedes Mobilgerät anpasst, ist dies eine hervorragende Möglichkeit, Text hinzuzufügen, wenn du das Hintergrundbild als Banner verwendest.

Tipp: Wenn du oben auf deiner Website eine Nachricht nur mit Text haben möchtest, füge anstelle eines Banners eine Mitteilungsleiste hinzu.

Wir empfehlen dir aus folgenden Gründen, kein Hintergrundbild hinzuzufügen, das Text in der eigentlichen Bilddatei enthält:

• Computer können diesen Text nicht lesen, so dass Suchmaschinen ihn nicht für Ergebnisse indizieren werden.
• Wenn dein Bild die Form ändert, um sich an unterschiedliche Browser-Breiten anzupassen, werden Teile des Textes abgeschnitten.

So fügst du Text oder anderen Inhalt hinzu:

1. Klicke auf der Seite mit dem Hintergrundbild auf Bearbeiten.
2. Klicke auf Block hinzufügen oder auf eine Einfügemarke, um einen Text-Block hinzuzufügen. Klicke in den Block, um Text hinzuzufügen, und verwende dann das Drop-down-Menü Format, um einen Absatz-Stil auszuwählen.
3. Füge weitere Text-Blöcke oder andere Inhalte zum Abschnitt hinzu (z. B. einen Button-Block).
4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Textstile

Die Stil-Einstellungen deiner Website im Design-Menü legen fest, wie Text auf deinem Hintergrundbild angezeigt wird.

• Um die Schriftarten deiner Website zu ändern, wähle im Menü Schriftarten ein Schriftartpaket und eine Basisgröße aus. Scrolle zu Stile zuweisen, um bestimmten Text zu formatieren. Weitere Informationen findest du unter Schriftarten ändern.
• Um deine Schriftfarbe zu ändern, wähle im Menü Farben eine Palette und ein Design aus. Öffne dein Abschnittsdesign und klicke auf das Bleistiftsymbol, um bestimmte Elemente innerhalb dieses Designs zu gestalten. Um mehr zu erfahren, besuche Farben ändern.

Video ansehen

Hintergrundbilder gestalten

Um das Hintergrundbild zu formatieren, klicke auf der Seite auf Bearbeiten, klicke auf das Bleistiftsymbol im Bannerabschnitt und dann auf Hintergrund. Du kannst die Hintergrundbreite und die Deckkraft des Overlay festlegen.

Für Hintergrundbreite:

• Randlos erweitert das Bild von einem Rand deines Browserfensters zum anderen <, sodass es sich über die gesamte Breite deiner Website erstreckt.
• DurchEinrückung wird das Bild leicht eingerückt und ein Rahmen um das Bild herum erstellt.

Wenn das Bild auf „Einrückung“ gesetzt ist, kannst du die Rahmenfarbe festlegen:

Hinweis: Wenn du eine PNG-Datei mit einem transparenten Hintergrund hochlädst, zeigt der Browser immer einen weißen Hintergrund hinter dem Bild an. Um diese Hintergrundfarbe zu ändern, musst du das Bild in einer Bildbearbeitungssoftware eines Drittanbieters bearbeiten, bevor du es auf deine Website hochlädst.

Größe von Hintergrundbildern ändern

So änderst du die Höhe eines Hintergrundbilds:

1. Klicke auf der Seite auf Bearbeiten und dann auf das Bleistiftsymbol im Abschnitt des Hintergrundbilds.
2. Wähle im Tab Format unter Abschnittshöhe eine voreingestellte Höhe aus, oder klicke auf …, um eine benutzerdefinierte Höhe festzulegen. Wenn du einen Abschnitt des Kreativen Editors bearbeitest, kannst du die Höhe des Rasters des Abschnitts ändern, indem du auf das blaue Pfeilsymbol in der unteren rechten Ecke klickst und es ziehst.
3. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Die Abschnittshöhe wirkt sich darauf aus, wie das Hintergrundbild sowohl auf Computern als auch auf Mobilgeräten zugeschnitten wird. Wir empfehlen, verschiedene Höhen zu testen, um das gewünschte Aussehen zu erhalten.

In Abschnitten des Klassischen Editors hängt die Höhe des Hintergrundbildes auch von der Menge des Inhalts des Abschnitts ab. Um die Höhe zu erhöhen, ohne sichtbaren Inhalt hinzuzufügen, füge Abstands-Blöcke hinzu.

Obwohl Hintergrundbilder sich normalerweise über die Breite der Website erstrecken, kannst du das Hintergrundbild so gestalten, dass es einen Rand enthält. Dies erweckt den Eindruck, dass die Breite des Bildes geringer ist.

Hintergrundbildeffekte hinzufügen

Nach dem Hinzufügen eines Hintergrundbilds kannst du Effekte hinzufügen, um dem Bild ein stilisierteres Aussehen zu verleihen. Einige Effekte fügen eine Animation hinzu, sodass sich das Bild immer bewegt, während andere nur angezeigt werden, wenn der Besucher durch diesen Abschnitt deiner Website scrollt.

So fügst du einen Bildeffekt hinzu:

1. Nachdem du ein Hintergrundbild im Abschnittseditor hinzugefügt hast, scrolle im Tab Hintergrund nach unten zu Bildeffekt.
2. Wähle einen Effekt aus dem Menü. Um den Effekt anzupassen, klicke auf das Einstellungssymbol, um das Details-Menü zu öffnen. Alle Änderungen, die du an dem Effekt vornimmst, werden in deiner Website-Vorschau angezeigt. Um mehr über deine Optionen zu erfahren, besuche den folgenden Abschnitt.
3. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Denk daran:

• Bildeffekte werden nur auf Browsern und Geräten angezeigt, die das Tool WebGL unterstützen, das den Grafikprozessor deines Geräts nutzt. Auf get.webgl.org kannst du testen, ob dein Browser dies unterstützt. Wenn ein Browser WebGL nicht unterstützt, bleibt der Abschnittshintergrund statisch.
• Bildeffekte gelten nicht für Creative Backgrounds oder Hintergrundvideos, selbst wenn das Video ein Ersatzbild für Mobilgeräte verwendet.

Bildeffekt-Stile

Du kannst aus diesen Bildeffekten wählen:

• Keine – Kein Effekt, abgesehen von der Einstellung der Overlay-Deckkraft
• Liquid – Verleiht dem Bild einen Welleneffekt
• Filmkörnung – Fügt dem Bild ein animiertes statisches Overlay hinzu
• Parallax – Das Bild bewegt sich, wenn Besucher scrollen
• Gebrochene Linien – Bricht das Bild durch ein Muster aus geraden Linien
• Gebrochene Kreise – Bricht das Bild durch ein Muster von Kreisen

Du kannst deinen Bildeffekt im Details-Menü anpassen. Um das Details-Menü zu öffnen, klicke auf einen Bildeffekt und dann auf das Einstellungssymbol.

Scrolle durch die Optionen und Einstellungen, bis du ein Muster findest, das dir gefällt. Klicke auf eine beliebige Kategorie, um das Drop-down-Menü zu erweitern und weitere Optionen angezeigt zu bekommen. Je nach der Art des Bildeffekts werden verschiedene Kategorien angezeigt.

Du kannst beispielsweise Folgendes tun:

• Bearbeite die Größe und Form des Effekts.
• Bearbeite die Geschwindigkeit und Richtung von Effekten mit Bewegung, wie z. B. Liquid.

Andere Einstellungen sind für jeden Bildeffekt einzigartig und umfassen Schieberegler und Schalter, die die Hauptkomponenten des Effekts ändern. Um mit einer zufälligen Konfiguration von Einstellungen zu experimentieren, klicke auf das Zufällig-Symbol, wenn du einen Effekt auswählst, oder klicke im Details-Menü des Effekts auf Zufällig ändern.

Wir empfehlen, jeden Effekt zu testen, um ein besseres Gefühl dafür zu bekommen, wie er aussieht und wie er für deine Website funktioniert.

Hier ist ein Beispiel für ein Abschnittshintergrundbild mit dem Effekt Liquid.

Ein Hintergrundbild entfernen

So entfernst du ein Hintergrundbild:

1. Klicke auf der Seite auf Bearbeiten und klicke dann auf das Bleistiftsymbol im Abschnitt des Banners.
2. Klicke auf Hintergrund.
3. Klicken Sie auf Löschen.
4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.