Abschnittshintergrundbilder

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

Zuletzt aktualisiert: 3. Januar 2025

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.

So erlangst du Zugriff auf diese Funktion

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-, Kurs-, Events-, Shop- und Video-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 deinem Hintergrund immer noch sichtbar und lesbar ist. Verwende zum Ändern der Textfarbe die Schriftartanpassungen in der Farbpalette 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. Bewege den Mauszeiger über den Abschnitt, klicke auf das Bleistiftsymbol 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, ein Agenturbild zu verwenden oder ein Agentur-Hintergrundbild zu verwenden.
  5. (Optional) Klicke auf Bildeffekt, um einen Bildeffekt auszuwählen .
  6. (Optional) Gestalte das Bild mit Hintergrundbreite und Overlay-Deckkraft.
  7. (Optional) Klicke auf Format, um die Abschnittshöhe, die Inhaltsbreite und die Inhaltsausrichtung zu ändern.
  8. (Optional) Klicke auf Farben, um eine Farbpalette für das Overlay und alle hinzugefügten Inhalte auszuwählen. Weitere Informationen findest du unter Farben ändern. Wenn du das Bild entfernst, wird das Overlay zur Hintergrundfarbe des Abschnitts.
  9. 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

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 eine Palette und ein Design im Farben-Menü aus. Klicke auf das Bleistiftsymbol im Design deines Abschnitts, um bestimmte Elemente innerhalb dieses Designs zu gestalten. Weitere Informationen findest du unter 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.

Hintergrund: Breite

Für Hintergrundbreite:

  • Randlos verlängert das Bild von einem Rand deines Browserfensters zum anderen und erstreckt sich über die gesamte Breite deiner Website. Dies ist normalerweise die Einstellung, die für Banner-Bilder verwendet wird.
  • 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:

Overlay-Deckkraft

Overlay-Deckkraft legt die Deckkraft des Farb-Overlays deines Hintergrundbildes fest.

Es gibt nicht das richtige Maß an Deckkraft, daher empfehlen wir dir, verschiedene Einstellungen auszuprobieren, um herauszufinden, was für dich funktioniert. Im Allgemeinen empfehlen wir einen höheren Prozentsatz, wenn der Abschnitt viel Inhalt hat, da dies dazu beitragen kann, den Inhalt vom Hintergrundbild abzuheben.

Die Farbe der Deckkraft wird durch die Anpassung  Hintergrund-Overlay im Design deines Abschnitts festgelegt. Weitere Informationen findest du unter Farben ändern.

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, klicke im Tab Hintergrund auf 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 Kreise – Bricht das Bild durch ein Muster von Kreisen
  • Gebrochene Linien – Bricht das Bild durch ein Muster aus geraden Linien

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

Das Einstellungssymbol wird angezeigt, wenn du im Abschnitts-Editor auf einen der Bildeffekte klickst

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 besonders und umfassen Schieberegler und Schalter, die die Hauptkomponenten des Effekts ändern. Um mit einer zufälligen Konfiguration von Einstellungen zu experimentieren, klicke auf das Symbol Mischen, 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.

Section_background_image_with_the_Liquid_effect.gif

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.

Abschnittshintergründe als Banner

Ein Abschnitt mit einem Hintergrundbild oben auf der Seite kann als visueller Schwerpunkt dienen, um den Ton für deine Inhalte vorzugeben. Ein Bild wie dieses wird allgemein als Banner bezeichnet.

Banner-Bilder stehen in der Regel für sich allein ohne anderen Inhalt im Abschnitt oder haben sehr einfachen Text, wie z. B. einen Titel, der sie überlagert. Du kannst auch Banner mit anderen Arten von Hintergründen wie Videos oder Grafiken erstellen, um eine andere Ästhetik zu erzielen.

Auch wenn du sie möglicherweise anders verwenden kannst, funktionieren Banner wie jeder Abschnitt mit einem Hintergrundbild. Du kannst also die Schritte in dieser Anleitung befolgen, um:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.