Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Banner-Bilder hinzufügen

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 beschrieben.

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

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

Wie du Bannerbilder hinzufügst und die Layouts, die du mit ihnen erstellen kannst, hängt von der Version deiner Website ab.

Du kannst Bannerbilder auf jeder Seite erstellen, indem du oben auf der Seite einen Blockabschnitt hinzufügst und dann ein Hintergrundbild hinzufügst. Du kannst Inhalte hinzufügen, die das Banner überlagern, oder weitere Abschnitte für Seiteninhalte hinzufügen. Es ist nicht möglich, Bannerbilder zu einzelnen Blogbeiträgen, Events oder Produkten hinzuzufügen.

Ausführliche Schritte zum Hinzufügen eines Hintergrundbildes zu einem Abschnitt findest du in Seitenabschnitte in Version 7.1.

Verschiedene Templates unterstützen verschiedene Arten von Bannerbildern:

  • Seitenbanner - Anzeige im oberen Bereich von Einzelseiten. Wird als Seitenvorschaubild hinzugefügt.
  • Banner für Sammlungsinhalte - Wird oberhalb von einzelnen Blogeinträgen, Produkten und Events angezeigt. Wird als Vorschaubild des Elements hinzugefügt.
  • Banner für gesamte Website – Können auf jeder Seite angezeigt werden. Werden in Website-Stil hinzugefügt.

An dieser Stelle finden Sie eine nach Templates geordnete Vergleichstabelle der verschiedenen Banner-Optionen.

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 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, finden Sie unter Banner-Optionen nach Vorlage.

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 Sammlungselemente hinzuzufügen, öffnen Sie das gewünschte Element im Editor und fügen Sie dann ein Vorschaubild über den Reiter Options (Optionen) hinzu. Eine ausführlichere Anleitung finden Sie hier: Vorschaubilder hinzufügen.

Einige Sammlungsinhalte zeigen stattdessen Seitenbanner an. Beispielsweise kann ein Blogeintrag das Blogseiten-Banner anzeigen. 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.

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 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.

Wie du Banner-Text hinzufügst, hängt von der Version deiner Website ab.

So fügst du Text oder anderen Inhalt hinzu:

  1. Klicke auf der Seite mit dem Banner auf Bearbeiten.
  2. Wenn du einen leeren Abschnitt hinzugefügt hast, enthält er bereits einen Text-Block. Klicke in den Block, um Text hinzuzufügen und wähle dann in der Dropdown-Liste Format eine Absatzvorlage aus.
  3. Klicke auf einen Einfügepunkt, um weitere Text-Blöcke oder andere Inhalte hinzuzufügen.
  4. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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 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.

Denken Sie 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.

 

Dieses Video gilt für Version 7.1.

Banner gestalten

Wie du das Banner gestaltest, hängt von der Version deiner Website ab.

Banner-Bild

Um das Bannerbild zu formatieren, klicke auf der Seite auf Bearbeiten, klicke auf das Bleistiftsymbol im Bereich des Banners 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:

Banner-Text

Die Stil-Einstellungen deiner Website im Design-Menü legen fest, wie Text im Bannerabschnitt 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.

Verwende die Anpassungen in Website-Stile, um Schriftarten, Farben und andere Bannerelemente anzupassen. Banner-Stil-Anpassungen beeinflussen in der Regel jedes Banner auf deiner Website.

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

Transparente Bilder

Wenn du eine PNG- Datei mit transparentem Hintergrund verwendest, nutzt du die folgenden Anpassungen zur Einstellung der Farbe im Hintergrund des Banners:

  • 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

Wie du die Höhe oder Breite deines Banners änderst, hängt von der Version deiner Website ab.

So änderst du die Höhe des Banners:

  1. Klicke auf der Seite auf Bearbeiten und klicke dann auf das Bleistiftsymbol im Abschnitt des Banners.
  2. Wähle im Tab Format unter Abschnittshöhe eine voreingestellte Höhe aus, oder klicke auf ..., um eine benutzerdefinierte Höhe festzulegen.
  3. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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.

Die Höhe des Banners hängt auch von der Menge des Inhalts im Abschnitt ab. Um die Höhe des Banners zu erhöhen, ohne sichtbaren Inhalt hinzuzufügen, füge Abstands-Blöcke hinzu.

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

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.

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 Bannerbild entfernst, hängt von der Version deiner Website ab.

So entfernst du ein Bannerbild:

  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. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.
  • 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.

Ein Video anschauen

Dieses Video bezieht sich auf Version 7.0.

War dieser Beitrag hilfreich?
51 von 258 fanden dies hilfreich