Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Ein Banner-Bild hinzufügen

Banner-Bilder werden oberhalb von Ihrem Seiteninhalt angezeigt und fügen ein visuelles Element hinzu, das dabei hilft, die Stimmung Ihrer Website zu kreieren. Viele Templates unterstützen Banner-Bilder. Deren Anzeigeart und Style-Optionen variieren zwischen den Templates. Diese Anleitung zeigt Ihnen, wie man ein Banner-Bild hinzufügt, formatiert und gestaltet und führt Sie durch die einzelnen Schritte.

Tipp: In einigen Templates können Sie anstelle eines Bildes ein Video zu einem Banner hinzufügen.
Hinweis: Wenn Ihr Banner nicht wie gewünscht aussieht, gehen Sie zum Abschnitt Zuschneide-Probleme.

Banner-Optionen nach Templates

Banner-Bilder sind in den folgenden Templates verfügbar. Diese Liste teilt Templates in Gruppen ein. Klicken Sie auf den Link „Erfahren Sie mehr“, um die Template-Anleitung für diese Gruppe aufzurufen.

Hinweis: Einige der eingestellten Templates unterstützen Banner-Bilder für einzelne Seiten und/oder die gesamte Website. Diese Anleitung gilt auch für diese.

Adirondack

  • Seiten-Banner – Normale Seiten, Events, Blog und Produkt-Seiten. Kein Overlay-Text.
  • Banner für Artikelübersichten – Blog-Einträge, Events, Produkte.
  • Ausblend-Effekt beim Scrollen (Desktop-Ansicht)
  • Video-Banner
  • Erfahren Sie mehr

Bedford, Anya, Bryant, Hayden

  • Seiten-Banner – Normale Seiten, Alben, Events, Blog und Produkt-Seiten. Seiten-Beschreibung als Overlay-Text mit speziellen Formatierungsoptionen
  • Banner für Artikelübersichten – Blog-Einträge, Events
  • Unterstützt einzigartige Slideshow-Banner
  • Video-Banner
  • Erfahren Sie mehr

Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

  • Seiten-Banner – Normale Seiten, Alben, Events, Blog, Galerien und Produkt-Seiten.
  • Wird in der unteren Hälfte der Kopfzeile angezeigt. Die seitenspezifische Kopfzeile (Einleitungsbereich) wird auch über dem Banner-Bild angezeigt.
  • Parallax Scrolling
  • Video-Banner
  • Erfahren Sie mehr

Farro, Haute

Five

  • Seitenübergreifende Banner
  • Seiten-Banner – Normale Seiten, Alben, Events, Blog, Galerien und Produkt-Seiten
  • Banner können Seitentitel und Beschreibungen, den Titel/Logo sowie eine Tagline oder nur ein Bild enthalten.
  • Video-Banner
  • Erfahren Sie mehr

Marquee, Adversary, Alex, Eamon, Shift

  • Seiten-Banner – Normale Seiten, Blog-Seiten, Produkt-Seiten und Event-Seiten. Seitentitel und Beschreibung als Overlay-Text mit speziellen Formatierungsoptionen
  • Banner für Artikelübersichten – Blog-Einträge, Events, Produkte
  • Parallax Scrolling
  • Video-Banner
  • Erfahren Sie mehr

Montauk, Julia, Kent, Om

  • Seiten-Banner - Normale Seiten, Blog- und Event-Seiten.
  • Seitentitel und Beschreibung als Overlay-Text
  • Video-Banner
  • Erfahren Sie mehr

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

  • Seiten-Banner – Normale Seiten, Alben, Events, Blog, Galerien und Produkt-Seiten.
  • Seitentitel und Beschreibung als Overlay-Text, kann auch im Hintergrund der Kopfzeile angezeigt werden.
  • Video-Banner
  • Erfahren Sie mehr

Skye, Foundry, Tudor

Supply

  • Banner für Artikelübersichten – Blog-Einträge und Events. Banner wird rechts angezeigt.
  • Erfahren Sie mehr

Tremont, Carson, Henson

  • Seiten-Banner – Normale Seiten, Alben, Events, Blog, Galerien und Produkt-Seiten.
  • Video-Banner
  • Erfahren Sie mehr

York, Artesia, Harris, Lange, Jasper, Shibori

  • Seiten-Banner - Normale Seiten, Alben, Events, Blog, Galerien, Projekt- und Produkt-Seiten.
  • Seitentitel und Beschreibung als Overlay-Text
  • Erfahren Sie mehr

Bewährte Verfahrensweisen

Da Ihre Website mit Responsive Design optimiert ist, sind die Banner-Bilder für viele verschiedene Browser-Größen und Geräte anpassungsfähig. Sie werden immer etwas zugeschnitten, besonders auf Mobilgeräten. Im Allgemeinen empfehlen wir folgendes:

  • Verwenden Sie ein Bild, welches breiter als hoch ist (Querformat).
  • Stellen Sie sicher, dass das zum Upload vorgesehene Bild an seinem längsten Punkt zumindest 1500 Pixel aufweist. Kleinere Bilder können pixelig wirken, wenn sie auf die volle Bannergröße gestreckt werden. Banner, die die gesamte Breite der Website ausfüllen, sollten nie größer als 2500 Pixel sein, da dies andernfalls zu Problemen auf Mobilgeräten führen könnte.
  • Vermeiden Sie Bilder mit Rahmen oder Text, da diese Probleme beim Zuschneiden verursachen. Zum Beispiel wird ein Bild mit Text, das hervorragend auf den Breitbild-Monitor eines Desktop-PCs passt, wahrscheinlich nicht auf dieselbe Weise auf einem Smartphone angezeigt.

Weitere Hilfestellungen zur richtigen Darstellung Ihres Banners erhalten Sie in unseren bewährten Verfahrensweisen.

Ein Seitenbanner-Bild hinzufügen

Seiten-Banner verwenden das Vorschaubild, welches unter den Seiteneinstellungen hochgeladen wurde.

Hinweis: Bedford, Anya, Bryant und Hayden verfügen über zusätzliche Banner-Optionen.

Schritt 1 - Seiteneinstellungen öffnen

Es gibt zwei Möglichkeiten, die Seiteneinstellungen zu öffnen.

Möglichkeit 1: Seiten-Menü

  1. Im Home Menu (Hauptmenü), klicken Sie auf Pages (Seiten).
  2. Fahren Sie mit der Maus über den Seitentitel im linken Menü und klicken Sie auf das  Symbol.

Möglichkeit 2: Anmerkung

Klicken Sie auf die Anmerkung zum Banner, die erscheint, wenn Sie mit der Maus über die Website-Vorschau fahren. Das Erscheinungsbild dieser Anmerkung variiert je nach Template.

Schritt 2 - Ein Banner-Bild hinzufügen

Klicken Sie im Reiter (Media) Medien auf das Feld Add an image (Bild hinzufügen).

Tipp: Wenn Ihr Template Video-Banner unterstützt, sieht Ihr Medien-Reiter etwas anders aus.

Ein Fenster mit zwei Optionen erscheint.

  • Um ein Bild von Ihrem Computer hinzuzufügen, klicken Sie auf Image (Bild).
  • Um die Lizenz für ein Archivbild für 10 USD zu erwerben, klicken Sie auf Getty Images. Dies ist eine großartige Möglichkeit, wenn Sie noch nicht über eigene Bilder verfügen, die Sie benutzen können. Um mehr zu erfahren, besuchen Sie die Getty Images und Squarespace-Übersicht.

Klicken Sie auf den Fokuspunkt und ziehen Sie ihn dorthin, wo Sie das Zentrum des Bildes festlegen wollen. Dies hilft in den meisten Templates beim Zuschneiden.

Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen.

Gestaltung

Bei einigen Templates können Sie die Höhe und den jeweiligen Style des Banner-Bildes im Style Editor anpassen. Nähere Informationen über die Banner Ihrer Website erhalten Sie in unserer Anleitung zu Struktur und Style Ihres Templates.

Einige Seiten-Banner unterstützen Overlay-Text.

Banner für Artikelübersichten hinzufügen

Einige Templates erstellen artikelspezifische Banner oberhalb von individuellen Blog-Einträgen, Events oder Produkt-Elementen.

Um ein Banner-Bild zu erstellen, fügen Sie zu diesem Eintrag, Event oder Produkt ein Vorschaubild der Artikelübersicht hinzu. Die Anzeige des Banners für Artikelübersichten hängt von dem gewählten Template ab. Einige Templates zeigen den Titel des Artikels und die Metadaten im Banner für Artikelübersichten an.

Hier sehen Sie ein Beispiel eines Banners für Blog-Einträge in Farro:

Seitenübergreifende Banner-Bilder

Fügen Sie ein Banner-Bild für die gesamte Website im Style Editor hinzu.

Hinweis: Seitenübergreifende Banner-Bilder werden nicht auf Seiten angezeigt, die eigene Banner-Bilder für Einzelseiten verwenden.

Schritt 1 - Klicken Sie auf Anpassung im Style Editor.

  1. Klicken Sie im Hauptmenü auf Design (Design) und dann auf Style Editor.
  2. Klicken Sie auf die Anpassungsoptionen für Banner-Bilder.

Der Name der Anpassung variiert je nach Template. So sieht die Anpassung für Seitenübergreifende Banner in Five aus:

Schritt 2 - Bild hinzufügen

Ein Popup erscheint.

  • Klicken Sie auf Add a background image (Ein Hintergrundbild hinzufügen), um ein Bild hochzuladen. Sie können auch ein Bild mit der Maus hierhin ziehen.
  • Klicken Sie auf Getty Images, um die Lizenz für ein Archivbild für 10 USD zu erwerben. Dies ist eine großartige Möglichkeit, wenn Sie noch nicht über eigene Bilder verfügen, die Sie benutzen können. Um mehr zu erfahren, besuchen Sie die Getty Images und Squarespace-Übersicht.

Schritt 3 - Gestalten Sie das Bild

Nachdem Sie das Bild hinzugefügt haben, können Sie die folgenden Werte einstellen. Wir empfehlen Ihnen, die Einstellung in dieser Reihenfolge vorzunehmen:

Größe

Wählen Sie, wie Ihr Banner in den Bannerbereich eingepasst werden soll. Hierzu bestehen folgende Möglichkeiten:

  • Auto (Auto) – Ursprüngliche Höhe und Breite des Bildes werden beibehalten. Dies eignet sich gut für kleinere Bilder, die Sie wiederholen wollen.
  • Cover (Bedecken) – Skaliert das Bild so groß wie nötig, um den Container vollständig abzudecken (Vollbild). Im Ergebnis kann das Banner auf verschiedenen Seiten anders aussehen.
  • Contain (Enthalten) – Skaliert das Bild, damit der längste Rand in den Bannerbereich passt.
Wiederholen

Wiederholen Sie Ihr Banner-Bild. Dies funktioniert über die Größeneinstellungen: Auto (Auto) und Contain (Enthalten). Wiederholen eignet sich am Besten für Muster und am Wenigsten für Fotos.

  • No-repeat (Keine Wiederholung) – Zeigt das Bild nur einmal an.
  • Repeat (Wiederholen) – Wiederholt das Bild in alle Richtungen.
  • Repeat-x (Wiederholen X)– Wiederholt das Bild in Reihe auf der horizontalen Achse.
  • Repeat-y (Wiederholen Y) – Wiederholt das Bild in einer nach unten verlaufenden Zeile auf der vertikalen Achse.
Position

Legen Sie die Position des Banner-Bildes fest.

  • Oben links, oben mittig, oben rechts
  • Mitte links, Mitte mittig, Mitte rechts
  • Unten links, unten mittig, unten rechts
Fix Position (Feste Position)

Wenn aktiviert, bleibt die Bildposition stationär hinter den scrollenden Inhalten fixiert. Wenn deaktiviert, scrollt das Bild mit der Seite hoch und runter.

Dieser Effekt wird auf einigen Mobilgeräten nicht angezeigt, darunter iOS.

Tipp: Seitenübergreifende Banner-Bilder weisen dieselben Style-Optionen wie Hintergrundbilder auf.

Schritt 4 - Speichern

Klicken Sie außerhalb des Pop-ups, um es zu schließen. Klicken Sie dann auf Save (Speichern), um Ihre Änderungen zu veröffentlichen. Weitere Hilfestellungen zur Verwendung des Style Editor finden Sie unter Style-Änderungen durchführen.

Video-Banner

Videos

Einige Templates unterstützen Video-Banner. In dieser Liste werden die Templates in Gruppen eingeteilt:

  • Adirondack
  • Bedford, Anya, Bryant, Hayden
  • Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
  • Five
  • Marquee, Adversary, Alex, Eamon, Shift
  • Montauk, Julia, Kent, Om
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
  • Tremont

Hier erfahren Sie mehr: Ein Hintergrund-Video hinzufügen.

Hinweis: In den Templates Bedford, Anya, Bryant und Hayden können Sie ein Video auch in ein Slideshow-Banner einfügen.

GIFs

Sie können in sämtlichen Templates eine GIF-Datei als Banner-Bild einfügen, um ein sich bewegendes Banner zu erstellen.

Text auf Banner hinzufügen

Wir empfehlen, kein Bild hinzuzufügen, das Text in der eigentlichen Bilddatei enthält. Wenn Ihr Banner die Form verändert, um sich an verschiedene Browser-Breiten anzupassen, ist es wahrscheinlich, dass Teile des Textes innerhalb des Bildes abgeschnitten werden. 

Um ein ähnliches Erscheinungsbild zu erzielen, besitzen die meisten Templates mit Seitenbannern eine Funktion zur Erstellung von separaten Overlay-Texten. Auf diese Weise können Sie Ihren Text an verschiedene Browser-Breiten anpassen, was auch besser für die SEO ist. Einige Templates unterstützen spezielle Formatierungen mit Kopfzeilen und Buttons. Hier erfahren Sie Näheres: Text auf Banner hinzufügen.

Fehlerbehebung beim Zuschneiden

In den meisten Templates werden Banner-Bilder entweder vertikal, horizontal oder an allen vier Seiten zugeschnitten. Dies hilft bei der Anpassung an verschiedene Browser-Breiten und Geräte und optimiert Ihre Website für Mobilgeräte.

  • Befolgen Sie die bewährten Verfahrensweisen für Banner-Bilder.
  • Ausführliche Hilfestellungen zur Behebung von Problemen beim Zuschneiden und anderen Darstellungsproblemen von Bannern erhalten Sie in unseren bewährten Verfahrensweisen.
  • Besuchen Sie die Anleitung für Ihr Template, um zu erfahren, wie der Style Ihrer Banner verändert werden kann.
  • Verwenden Sie Fokuspunkte, um das Zentrum Ihres Bildes festzulegen. Fokuspunkt-Änderungen können bei Bildern mit Parallax Scrolling weniger auffällig sein.
  • Erkunden Sie den Style Editor Ihres Templates, um herauszufinden, ob Ihnen Anpassungen zur Verfügung stehen, welche die Abmessungen Ihres Banners beeinflussen.

Banner, die nicht zugeschnitten werden

In einigen Templates können Sie Banner erstellen, die nicht zugeschnitten werden:

  • Die Banner in Montauk, Julia, Kent und Om werden nicht vertikal zugeschnitten sondern je nach Breite des Seiteninhalts dargestellt. Beachten Sie, dass hohe, schmale Banner pixelig wirken können, da sie auf die volle Breite gestreckt werden.
  • In den Templates Pacific, Bryler, Charlotte, Fulton, Horizon und Naomi können Sie ein Banner-Bild erstellen, das nicht zugeschnitten wird, wenn eine Galerie-Seite innerhalb einer Index-Seite hinzugefügt wird.

Sie können den Effekt eines Banners auch erstellen, indem Sie einen Bild-Block oberhalb einer normalen Seite hinzufügen. Einige Templates weisen zudem Seiten-Kopfzeilen auf, die Blöcke auf anderen Seiten als den normalen Seiten unterstützen.

War dieser Beitrag hilfreich?
2 von 10 fanden dies hilfreich