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.

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.

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 – Können auf jeder Seite angezeigt werden. Werden in Website-Stil 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. Klicken Sie im Hauptmenü auf Seiten.
2. Fahre mit der Maus über den Seitentitel, klicke auf 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 .

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 Blogseiten-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. Klicken Sie im Hauptmenü auf Seiten.
2. Bewege den Mauszeiger auf den Seitentitel im linken Menü und klicke auf .
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:

• Blog-Einträge
• Veranstaltungen
• Produktelemente

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.

Banner-Textoptionen nach 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	Seitenbeschreibung mit besonderen Formatierungsoptionen (Buttons, Kopfzeilen). Slideshow-Banner und Blog-Seitenbanner verfügen über weitere Optionen.	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		Blogeinträge: Titel des Beitrags und bis zu vier Metadaten-Elemente
Five	Seitentitel und Beschreibung, Seitentitel/Logo und Untertitel oder nur das Banner-Bild. Mehr erfahren.	Identisch mit Seiten-Bannern
Montauk	Seitentitel und Beschreibung.
Pacific	Seitentitel und Beschreibung. Unter Umständen auch Seitentitel und Navigation.
Skye		Blogeinträge: Datum kann in einem Callout dargestellt werden
Supply		Blog-Einträge, Events: Kein Overlay-Text
Tremont	Seitentitel und Beschreibung als Seiten-Overlay.
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:

• Adirondack – Inhaltshintergrundfarbe
• Bedford – Banner-Overlay-Farbe
• Brine – Overlay-Farbe im Abschnitt Hauptbereich: Overlay
• Farro – Hintergrundfarbe 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

Ermutige Besucher, auf einen Link zu einer bestimmten Seite zu klicken, an deine Organisation zu spenden oder sich für deinen Newsletter anzumelden, indem du einen Button zu deinem Banner hinzufügst.

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.

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.