Banner-Bilder in Version 7.0 hinzufügen

Füge oben auf einer Seite einen visuellen Bildausschnitt hinzu, um die Aufmerksamkeit deiner Besucher zu halten.

Zuletzt aktualisiert: 10. Dezember 2024

Ein Bannerbild wird oben auf der Seite angezeigt und fügt ein visuelles Element hinzu, das die Stimmung für deine Website festlegt. In dieser Anleitung werden die Schritte zum Hinzufügen und Stylen von Bannerbildern in Version 7.0 beschrieben. Wie du Banner-Bilder hinzufügen und gestalten kannst, hängt von deinem Template ab.

So erlangst du Zugriff auf diese Funktion

Um ein Banner-Bild in Version 7.1 zu erstellen, füge ein Abschnittshintergrundbild zu einem Abschnitt oben auf einer Seite hinzu.

Ein Video anschauen

Tipps zur Bildformatierung

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

  • Verwende Bilder mit einer Breite zwischen 1500 Pixel und 2500 Pixel.
  • Stelle sicher, dass die Breite des Bildes größer ist als seine Höhe.
  • Verwende Bilder mit abstrakten Mustern und ohne Ränder
  • Verwende keine Bilder, die Text in der eigentlichen Bilddatei enthalten. Füge stattdessen Text über dem Bild hinzu.
  • Informationen zu Bilddateitypen und den vollständigen Anforderungen im Hinblick auf Bilder findest du unter Bilder für Websites formatieren
  • Wenn du oben auf deiner Website eine Nachricht nur mit Text haben möchtest, füge anstelle eines Banners eine Mitteilungsleiste hinzu

Hinzufügen eines Bannerbilds

Verschiedene Templates unterstützen verschiedene Arten von Bannerbildern:

  • Seiten-Banner – Wird oben auf einzelnen Seiten angezeigt. Wird als ausgewähltes Bild der Seite hinzugefügt.
  • Banner für Sammlungsinhalte – Wird oberhalb von einzelnen Blogeinträgen, Produkten und Events angezeigt. Wird als ausgewähltes Bild des Elements hinzugefügt.
  • Banner für gesamte Website – Kann auf jeder Seite angezeigt werden. Werden in Website-Stile hinzugefügt.

Weitere Informationen findest du in unserer Vergleichstabelle der Banner-Optionen nach Template oder sieh dir unser Videobeispiel zum Hinzufügen der einzelnen Banner-Optionen an.

Ein Seitenbanner hinzufügen

So fügen Sie ein Seitenbanner hinzu:

  1. Öffne das Menü „Seiten“.
  2. Fahre mit der Maus über den Seitentitel, klicke auf das Zahnrad-Symbol und dann auf Medien.
  3. Klicke auf Bild hinzufügen, um ein Bild von deinem Computer hochzuladen, oder klicke auf Nach Bildern suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen. Einige Templates unterstützen auch Video-Banner.
  4. Klicken Sie auf den Fokuspunkt und ziehen Sie ihn auf die gewünschte Stelle, um den Bildmittelpunkt festzulegen. Dies erleichtert in den meisten Templates das Zuschneiden.
  5. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen.
  6. Verwende Website-Stil, um dein Banner zu gestalten.

Um ein vorhandenes Banner zu bearbeiten, bewege den Mauszeiger über die Seite und klicke auf Banner, oder öffne die Seiteneinstellungen erneut mit das Zahnrad-Symbol.

Mehr darüber, welche Templates Seiten-Banner unterstützen, findest du unter Banner-Optionen nach Vorlage.

Tipp

Alternativ zu unseren integrierten Optionen kannst du einen Bild-Block oben auf einer Layout-Seite auf jeder Squarespace-Website hinzufügen.

Banner für Artikelübersichten hinzufügen

Banner für Sammlungselemente werden oberhalb von einzelnen Blog-Einträgen, Produkten und Events angezeigt.

Um ein Banner für Sammlungsinhalte hinzuzufügen, öffne den Editor für dieses Element und füge dann im Tab Optionen ein ausgewähltes Bild hinzu. Ausführliche Schritte findest du unter Ausgewählte Bilder hinzufügen.

Für einige Sammlungsinhalte werden stattdessen Seitenbanner angezeigt. Beispielsweise kann für einen Blogeintrag das Blog-Seiten-Banner angezeigt werden. Weitere Informationen darüber, welche Templates Banner für Sammlungsinhalte unterstützen, findest du unter Banneroptionen nach Template.

Seitenübergreifende Banner hinzufügen

Seitenübergreifende Banner sind im Template Five sowie in einigen eingestellten Templates verfügbar. Sie werden auf sämtlichen Seiten angezeigt, denen kein Seiten-Banner hinzugefügt wurde.

Um ein Banner für die gesamte Website hinzuzufügen, klicke in Website-Stil auf dessen Stil-Anpassung.

  • In Five heißt die Anpassung Header: Hintergrundbild.
  • In eingestellten Templates kann die Anpassung einen anderen Namen haben.

Nachdem du das Bild hinzugefügt hast, gestalte es mit den angezeigten Optionen.

Hinweis

Seitenübergreifende Banner sollten nie größer als 2500 Pixel sein, da dies andernfalls zu Problemen auf Mobilgeräten führen könnte.

Banner-Optionen nach Template

Die folgenden Template-Gruppen unterstützen eine oder mehrere Banner-Arten:

Template-Gruppe

Seiten

Video-Banner

Sammlungselemente

Sonstige Optionen

Adirondack

Layout
Blog
Events
Produkte

Ja

Blog-Einträge
Events
Produkte

Fade-Effekt beim Scrollen

Bedford

Layout
Album
Blog
Events
Index
Produkte

Ja

Blog-Einträge
Events

Banner können hinter der Kopfzeile angezeigt werden

Slideshow-Banner

Gestapelte Index-Banner

Slideshow-Banner von Blog-Seiten

Brine

Layout
Album
Blog
Events
Galerie
Index
Produkte

Ja

entf.

Banner können hinter der Kopfzeile angezeigt werden

Slideshow-Banner

Gestapelte Index-Banner

Parallax Scrolling

Farro entf. Nein Blog-Einträge entf.

Five

Layout
Album
Blog
Events
Galerie
Produkte

Ja

Seitenbanner werden in Blog-Einträgen, Events und Produkten angezeigt

Seiten-übergreifende Banner

Website-Titel, Logo und Slogan können Banner überlagern

Montauk

Layout
Blog
Events
Index

Ja

Seitenbanner werden in Blog-Einträgen und Events angezeigt

Banner werden nicht vertikal zugeschnitten

Pacific

Layout
Album
Blog
Events
Galerie
Index
Produkte

Ja

entf.

Banner können hinter der Kopfzeile angezeigt werden

Slideshow-Banner

Gestapelte Index-Banner

Nicht zuschneidbare Banner

Skye entf. Nein Blog-Einträge entf.

Supply

Layout
Blog
Album
Events

Nein

Blog-Einträge
Events

Banner wird außer auf Mobilgeräten rechts angezeigt.

Tremont

Layout
Album
Blog
Events
Galerie
Produkte

Ja

entf.

Banner können hinter der Kopfzeile angezeigt werden

Seiten-Overlays

York

Layout
Album
Blog
Events
Galerie
Index
Produkte
Projekt

Nein entf.

Index-Banner

Einblend-Effekt

Hinzufügen von Text zu einem Banner

Abhängig von deiner Website kannst du Text oder andere Inhalte hinzufügen, die Bannerbilder überlagern. Da der Text, den du hinzufügst, sich jeder Bildschirmgröße oder jedem Mobilgerät anpasst, ist dies eine gute Möglichkeit, Text zu deinem Banner hinzuzufügen.

Wir empfehlen dir aus folgenden Gründen, kein Banner-Bild 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 Banner die Form ändert, um sich an unterschiedliche Browser-Breiten anzupassen, werden Teile des Textes abgeschnitten.

Verschiedene Templates unterstützen verschiedene Arten von Text-Overlays:

  • Seitentitel und Beschreibung - Zeigt den Titel und die Beschreibung an, die in den Seiteneinstellungen über Seitenbanner hinzugefügt wurden.
  • Sammlungsinhalt-Bannertext - Zeigt Text aus den Einstellungen für Sammlungsinhalte über Blogeinträge, Events oder Produktartikel an.
  • Indexseiten-Bannertext - Zeigt Beschreibungstext an, der das Banner überlagert, oder der Seiteninhalt kann das Banner je nach Template überlagern.
  • Überlagerungstext im Intro-Bereich - Text-Blöcke und andere Blockinhalte überlagern den Kopfzeilenbereich der Seite, auf der das Banner angezeigt wird.

Weitere Informationen darüber, welche Templates welche Typen von Overlay-Text unterstützen, findest du unter Banner-Textoptionen nach Template.

Overlay-Text im Einführungsbereich hinzufügen

Templates in der Brine-Gruppe unterstützen ein Intro, das über dem Banner angezeigt wird. Du kannst diesen Bereich mit Blöcken wie einem Text-Block oder einem Button-Block anpassen.

Hinzufügen eines Seitentitels und einer Beschreibung

Die meisten Templates zeigen den Seitentitel und die Beschreibung über Seitenbannern an. So fügst du einem Banner in Templates Text hinzu:

  1. Öffne das Menü „Seiten“.
  2. Bewege den Mauszeiger auf den Seitentitel im linken Menü und klicke auf das Zahnrad-Symbol.
  3. Füge Text zu den Feldern Seitentitel und Seitenbeschreibung im Tab Allgemein hinzu.
  4. Klicke auf Speichern und aktualisiere die Seite. Manchmal werden Änderungen am Banner in der Website-Vorschau nicht angezeigt, bis die Seite neu geladen wird.

Denk daran:

  • Für diese Templates sollten Seitenbeschreibungen nicht ausschließlich zum Hinzufügen von SEO-basierten Inhalten verwendet werden. Die Verwendung von Seitenbeschreibungen für das Banner hat keine negativen Auswirkungen auf die SEO.
  • Um einen anderen Titel in Suchergebnissen und auf Social-Media geteilten Inhalten anzuzeigen, füge einen SEO-Titel hinzu.
  • Du kannst in den meisten Templates zusätzliche Höhe schaffen, indem du der Beschreibung Leerzeichen hinzufügst. Drücke die Enter- oder Eingabetaste im Beschreibungstext, um mehr vom Bild anzuzeigen. Das kann helfen, Probleme beim Zuschneiden zu beheben und die Höhe des Banners zu erhöhen, um einen dramatischen Effekt zu erzielen.

Banner-Text für Sammlungsinhalte hinzufügen

Sammlungsinhalt-Banner erstellen in der Regel ihren Overlay-Text aus den Einstellungen für den Blogeintrag, das Event oder das Produkt. Verwende die folgenden Links, um mehr über das Hinzufügen von Text zu jedem Elementtyp zu erfahren:

Fehlerbehebung

Wenn dein Text nicht angezeigt wird, führe die folgenden Schritte zur Fehlerbehebung aus:

  • Laden Sie die Seite neu
  • Überprüfe die Template-Tabelle, um zu bestätigen, dass dein Template Vorlage Bannertext für diesen Seitentyp unterstützt.
  • Öffne Website-Stile und überprüfe, ob deine Vorlage Stil-Optionen hat, um das Banner oder den Bannertext auszublenden.
  • Stelle sicher, dass du ein Bannerbild hinzugefügt hast, da für einige Templates ein Bannerbild erforderlich ist, um den Text anzuzeigen.
  • Überprüfe die Anleitung für dein Template.

Hier sind die Banner-Text-Optionen in diesen Template-Gruppen:

Template-Gruppe

Seiten Banner

Übersicht Artikel Banner

Adirondack

  • Kein Overlay-Text.
  • Blog-Einträge, Events, Produkte: Kein Overlay-Text

Bedford

  • Blogeinträge: Titel, ein Metadaten-Element.
  • Events: Kein Text-Overlay

Brine

  • Offener Block-Bereich („Einführungsbereich“)
  • Kopfzeilen-Inhalt (wie Seitentitel und Navigationslinks) kann über dem Banner angezeigt werden.

 

Farro

 

Five

  • Seitentitel und Beschreibung, Seitentitel/Logo und Untertitel oder nur das Banner-Bild. Mehr erfahren.
  • Identisch mit Seiten-Bannern

Montauk

  • Seitentitel und Beschreibung.

 

Pacific

 

Skye

 

Supply

 

  • Blog-Einträge, Events: Kein Overlay-Text

Tremont

 

York

  • Seitentitel und Beschreibung.

 

Banner gestalten

Verwende die Anpassungen in Website-Stile, um Schriftarten, Farben und andere Bannerelemente zu ändern. Anpassungen des Banner-Stils werden normalerweise auf alle Banner auf deiner Website angewendet.

Erfahre mehr über die Banner-Stil-Optionen in der Anleitung deines Template.

Transparente Bilder

Wenn du eine PNG-Datei mit transparentem Hintergrund verwendest, kannst du anhand der folgenden Anpassungen die Farbe im Hintergrund des Banners ändern:

  • AdirondackInhaltshintergrundfarbe
  • Bedford – Banner-Overlay-Farbe
  • Brine – Overlay-Farbe im Abschnitt Hauptbereich: Overlay
  • FarroHintergrundfarbe des Eintrags. Die Overlay-Farbe hat ebenfalls Einfluss auf die Farbe.
  • Five – Header-Hintergrund
  • Montauk – Leinwand-Hintergrund
  • Pacific – Overlay-Farbe
  • Skye – Website-Hintergrund
  • Supply – Seitenfarbe
  • Tremont – Website-Hintergrundfarbe
  • York – Hintergrundfarbe im Abschnitt Banner

Normalerweise wird die Farbe mit 100 % Deckkraft angezeigt. Wenn du Schwierigkeiten hast, den gewünschten Farbton zu treffen, musst du die Transparenz ändern.

Banner-Größe ändern

In der folgenden Tabelle erfährst du, wie du die Banner-Größe in diesen Template-Familien änderst. Beachte, dass es in den meisten Templates nicht möglich ist, die Breite des Banners zu ändern.

Template-Gruppe

So änderst du die Größe

Adirondack

Anpassung über Height (Höhe)

Bedford

Seiten- und Video-Banner – Füge der Seitenbeschreibung Zeilenumbrüche hinzu. Mehr erfahren.

Slideshow-Banner, Blog-Slideshow-Banner und Banner für Sammlungsinhalte – Festgelegte Höhe

Brine

Fügen Sie dem Intro-Bereich Zeilenumbrüche hinzu. Für Index-Banner gelten separate Höheneinstellungen.

Farro

Verwenden Sie die Anpassung Header (Kopfzeile) im Bereich Blog: Item (Blog: Element) zur Einstellung der Banner-Größe.

Five

Verwende die Anpassungen Höhe des Banner-Bereichs oder Zwischenraum des Banner-Bereichs. (Die Höhe des Banner-Bereichs hat auf Mobilgeräten keinerlei Auswirkung.)

Montauk

Festgelegte Höhe, abhängig vom Originalbild. Die Darstellung der Seitenbanner richtet sich immer nach der Breite des Seiteninhalts. Es findet kein vertikaler Zuschnitt statt.

Pacific

Fügen Sie Zeilenumbrüche in der Seitenbeschreibung hinzu oder verwenden Sie die Anpassung Padding. Weitere Informationen. Für Index-Banner gelten separate Höheneinstellungen.

Skye

Verwende die Anpassung Breite des Banner-Bildes zur Einstellung der Bannerbreite. Die Höhe richtet sich nach dem Originalbild und wird proportional zur Breite angepasst.

Supply

Die Seitenbreite ist festgelegt, damit das Banner die gesamte verbleibende Browserbreite ausfüllt.

Tremont

Anpassung über Page Banner Image Height (Bildhöhe des Seitenbanners)

York

Anpassung über Height (Höhe)

Wenn dein Banner nicht richtig aussieht, besuche Fehlerbehebung beim Zuschneiden.

Einen Button zu einem Banner hinzufügen

Füge einen Button-Block zu einem Banner für folgende Optionen hinzu:

  • Besucher dazu ermutigen, auf einen Link zu einer bestimmten Seite zu klicken
  • An deine Organisation spenden
  • Anmeldung für deinen Newsletter

Diese Template-Gruppen enthalten spezielle Overlay-Optionen zum Hinzufügen von Buttons über Banner-Bildern und Videos auf einzelnen Seiten:

  • Bedford – Formatierung des Seitenbeschreibungstexts, um einen Button in der letzten Zeile zu erstellen.
  • Brine – Füge einen Button-Block zum Intro-Bereich auf einer Seite mit einem Banner hinzu.
  • Pacific – Füge auf einer Index-Seite einen Button-Block zu einer Seite mit einem Banner hinzu.

Banner auf Mobilgeräten

Banner-Bilder werden auf Mobilgeräten immer ein wenig zugeschnitten.

Um zu erfahren, wie Banner auf Mobilgeräten angezeigt werden, besuche Wie wird meine Website auf Mobilgeräten dargestellt?

Ein Banner-Bild entfernen

Wie du ein Banner-Bild entfernst, hängt davon ab, wo es sich auf deiner Website befindet:

  • Seiten-Banner – Klicke im Tab Medien der Seiteneinstellungen auf Bild entfernen.
  • Banner für Sammlungsinhalte - Öffne das einzelne Element (Blogeintrag, Produkt oder Event), klicke auf den Tab Optionen und klicke dann auf das Papierkorb-Symbol.
  • Banner für die gesamte Website – Öffne die spezifischen Anpassungen in Website-Stile und klicke auf Entfernen.
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.