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

  • Wir empfehlen, Bilder mit einer Mindestbreite von 1500 Pixeln hochzuladen.Hilfestellungen bei der Auswahl eines Bildes, das in allen Browsern großartig aussieht, erhältst du in unseren Tipps zu Responsive Design.
  • Es wird nicht empfohlen, ein Bild zu verwenden, das Text in der eigentlichen Bilddatei enthält. Füge stattdessen Text über dem Bildhinzu.
  • Du kannst JPG-, PNG- und GIF-Bilder verwenden. Die vollständigen Bildanforderungen findest du unter Formatieren von Bildern für das Web.
  • Wenn du oben auf deiner Website eine Nur-Text-Nachricht wünschst, füge stattdessen 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 mit einem Hintergrundbild hinzufügst. Es ist'nicht möglich, Bannerbilder zu einzelnen Blogeinträgen, Events oder Produkten hinzuzufügen.

So fügst du ein Bannerbild hinzu:

  1. Klicke im Hauptmenü auf Seiten, und klicke dann auf die Seite.
  2. Klicke in der linken oberen Ecke auf Bearbeiten.
  3. Klicke oben auf der Seite auf +, um einen Abschnitt hinzuzufügen. Wähle Leer hinzufügen, wenn du nur ein Bannerbild ohne Inhalt-Overlay möchtest.
  4. Klicke auf das Stiftsymbol des neuen Abschnitts und klicken dann auf Hintergrund.
  5. Klicke auf Bild hinzufügen, um ein Bild hochzuladen, oder klicke auf Bilder suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen. Um stattdessen ein Video hinzuzufügen, besuche Hinzufügen von Hintergrundvideos.
  6. Lege die Hintergrundbreite und die Deckkraft des Overlay fest.
  7. Klicken Sie auf Format, um die Abschnittshöhe, die Inhaltsbreite und die Inhaltsausrichtung anzupassen.
  8. Klicke auf Farben, um ein Farbdesign für das Overlay und alle hinzugefügten Inhalte auszuwählen.

Du kannst Inhalte hinzufügen, die das Banner überlagern, oder weitere Abschnitte für Seiteninhalte hinzufügen. Nachdem du die Änderungen vorgenommen hast, bewege den Mauszeiger auf Fertig und klicke auf Speichern.

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 und klicke auf das Zahnrad-Symbol und anschließend 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 Vorlagen unterstützen auch Videobanner.
  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 den Stil deines Banners anzupassen.

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 inWebsite-Stile auf dessen Stil-Anpassung.

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

Nachdem Sie das Bild hinzugefügt haben, gestalten Sie es mit den daraufhin erscheinenden 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-
Veranstaltungs- und
Produktseiten

Ja

Blogeinträge
Veranstaltungen
Produkte

Fade-Effekt beim Scrollen

Bedford

Layout
Album
Blog
Events
Index
Produkte

Ja

Blogeinträge
Veranstaltungen

Banner können hinter der Kopfzeile angezeigt werden

Slideshow-Banner

Gestapelte Index-Banner

Blog-Seite Slideshow-Banner

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-
Veranstaltungs-
Galerie- und
Produktseiten

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-
Veranstaltungs- und
Index-Seiten

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- und
Veranstaltungsseiten

Nein

Blogeinträge
Veranstaltungen

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

Tremont

Layout-
Album-
Blog-
Veranstaltungs-
Galerie- und
Produktseiten

Ja

n/a

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

Vorlagen in der Brine-Familie unterstützen einen Intro-Bereich, der über dem Banner angezeigt wird. Du kannst diesen Bereich mit Blöcken, z. B. 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 Bereich 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 einrichten, indem du der Beschreibung Leerzeichen hinzufügst. Drücke die Enter- oder Eingabetaste im Beschreibungstext, um mehr vom Bilder anzuzeigen. Das kann helfen, Probleme beim Zuschneiden zu beheben und die Höhe des Banners zu erhöhen, um einen dramatischen Effekt zu erzielen.

Bannertext 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

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

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 Stiftsymbol 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 ein Schriftartpaket und eine Basisgröße im Menü Schriftart aus. Klicke auf das Zahnrad-Symbol, um bestimmten Text zu formatieren. Weitere Informationen findest du unter Schriftarten ändern.
  • Um die Schriftfarbe zu ändern, wähle im Menü Farben eine Palette und ein Design aus. Bewege den Mauszeiger über das Design und klicke auf das Stiftsymbol, um bestimmte Elemente innerhalb dieses Designs zu formatieren. Weitere Informationen findest du unter Ändern von Farben.

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 Haupt: Overlay
  • FarroHintergrundfarbe des Eintrags. Die Overlay-Farbe hat ebenfalls Einfluss auf die Farbe.
  • Five – Hintergrund der Kopfzeile
  • Montauk – Leinwand-Hintergrund
  • Pacific – Overlay-Farbe
  • Skye – Website-Hintergrund
  • Supply – Seitenfarbe
  • Tremont – Website-Hintergrundfarbe
  • York – Hintergrundfarbe im Abschnitt Banner

In den meisten Fällen wird die Farbe mit 100 % Deckkraft angezeigt. Wenn du Probleme hast, die gewünschte Farbe zu erhalten, ändere die Transparenz.

Banner-Höhe ändern

Wie du die Bannerhöhe ä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 Stiftsymbol im Bereich 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 Bannerhöhe hängt auch von der Menge des Inhalts im Abschnitt ab. Um die Bannerhöhe zu erhöhen, ohne sichtbaren Inhalt hinzuzufügen, füge Abstands-Blöcke hinzu.

So legen Sie die Höhe für Banner in diesen Template-Gruppen fest:

Template-Gruppe

So wird die Höhe geändert

Adirondack

Anpassung über Height (Höhe)

Bedford

Seitenund Video-Banner – Fügen Sie der Seitenbeschreibung Zeilenumbrüche hinzu. Mehr erfahren.

Slideshow-Banner, Blog-Slideshow-Banner und Banner für Sammlungselemente - 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

Verwenden Sie die Anpassungsoptionen Banner Area Height (Höhe des Banner-Bereichs) oder Banner Area Spacing (Zwischenraum des Banner-Bereichs). Die Option Banner Area Height (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 Freiraum. Mehr erfahren. Für Index-Banner gelten separate Höheneinstellungen.

Skye

Verwenden Sie die Anpassung Banner Image Width (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

Beachte bei der Anzeige deiner Website auf Mobilgeräten Folgendes:

  • Banner-Bilder werden auf Mobilgeräten immer ein wenig zugeschnitten.
  • Die Höheneinstellungen eines Banners werden auf Mobilgeräten nicht immer übernommen.
  • Lege für Videobanner ein Ersatzbild für Mobilgeräte fest, das angezeigt wird, wenn das Video aufgrund der Verbindungsgeschwindigkeit oder des Browsertyps nicht geladen werden kann.
  • Auf einigen Mobilgeräten wird die Einstellung Fix Position (Feste Position) für seitenübergreifende Banner nicht angezeigt, darunter auch auf iOS-Geräten.

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 Stiftsymbol im Bereich des Banners.
  2. Klicke auf Hintergrund.
  3. Klicke 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?
34 von 195 fanden dies hilfreich