Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Adding banner images

Banner-Bilder werden im oberen Bereich einer Seite dargestellt. Mithilfe dieses Elements können Sie Ihre Website visuell ins richtige Licht rücken. Bei zahlreichen Templates wird das Vorschaubild einer Seite automatisch zur Erstellung eines Banner-Bildes verwendet. Die Anzeige dieser Banner-Bilder und die entsprechenden Style-Optionen sind jedoch von Template zu Template verschieden.

Diese Anleitung zeigt Ihnen, wie man ein Banner-Bild hinzufügt, formatiert und gestaltet und führt Sie durch die einzelnen Schritte.

Tipp: Als Alternative zu unseren integrierten Banner-Optionen können Sie auch im oberen Bereich einer Layout-Seite einen Bild-Block hinzufügen. Dies gilt für alle Templates.

Ein Video anschauen

Tipps zur Bildformatierung

  • Wir empfehlen, Bilder mit einer Mindestbreite von 1500 Pixeln hochzuladen.
  • Wir raten davon ab, Bilder mit Textinhalt in der eigentlichen Bilddatei zu verwenden. Setzen Sie stattdessen Overlay-Text ein – diese Option wird von den meisten Templates unterstützt.
  • Sie können Bilder in den Formaten .jpg, .png, und .gif verwenden. Näheres über bestehende Anforderungen im Hinblick auf Bilder erfahren Sie hier: Bilder für Websites formatieren.
  • Hilfestellungen bei der Auswahl eines Bildes, das in allen Browsern großartig aussieht, erhalten Sie in unseren Tipps zu anpassungsfähigem Design.
  • Wenn Ihr Banner nicht korrekt angezeigt wird, sollten Sie sich näher mit unseren Tipps zur Fehlerbeseitigung beim Zuschnitt befassen.
  • Fügen Sie eine Mitteilungsleiste hinzu, um eigene Mitteilungen im oberen Bereich Ihrer Website einzublenden.
  • In sämtlichen Templates besteht die Möglichkeit, einen Bild-Block im oberen Bereich einer Layout-Seite einzufügen, der ähnlich wie ein Banner wirkt.

Bannerarten

Das Hinzufügen eines Banner-Bildes richtet sich nach den unterstützten Bannerarten Ihres Templates:

  • Seitenbanner - Anzeige im oberen Bereich von Einzelseiten. Wird als Seitenvorschaubild hinzugefügt.
  • Video-Banner - Kann das Seitenbanner in einigen Templates ersetzen. Wird als Seitenvorschaubild hinzugefügt.
  • Banner für Sammlungselemente - Wird oberhalb von einzelnen Blog-Einträ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. Öffnen Sie die Seite und klicken Sie auf die Anmerkung Settings (Einstellungen) in der Website-Vorschau. Alternativ können Sie auch die Seiteneinstellungen aufrufen.
  2. Klicken Sie im Reiter Media (Medien) auf Add an image (Bild hinzufügen).
  3. Klicken Sie auf Bild, um ein Bild von Ihrem Computer hinzuzufügen, oder klicken Sie auf Nach Bild suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen.
  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. Verwenden Sie Website-Stil, um den Stil Ihres Banners anzupassen.

Klicken Sie zur Bearbeitung eines vorhandenen Banners auf die Anmerkung Banner oder rufen Sie erneut die Seiteneinstellungen auf.

Tipp: Einige Templates unterstützen auch Video-Banner.

Page_Banner.png

Unterstützte Templates

Page banners are supported in these template families:

Template family Unterstützte Seiten

Adirondack

Layout-, Blog-, Veranstaltungs- und Produktseiten

Bedford

Layout-, Album-, Blog-, Veranstaltungs- und Produktseiten

Brine

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

Five

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

Montauk

Layout-, Blog-, Veranstaltungsseiten und die Haupt-Index-Seite

Pacific

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

Supply

Layout-, Blog-, Album- und Veranstaltungsseiten

Tremont

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

York

Layout-, Album-, Blog-, Veranstaltungs-, Galerie-, Projekt-, Produktseiten und die Haupt-Index-Seite

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.

So sieht das Banner für Blog-Einträge in Skye aus:

Tipp: Einige Banner für Sammlungselemente unterstützen Overlay-Text.

skye-blog-post-header.png

Unterstützte Templates

Collection item banners are supported in these template families. Some collection items display page banners; for example, a blog post might display the Blog Page banner.

  • Adirondack - Blog posts, events, and products display collection item thumbnails.
  • Bedford - Blog posts, and events display collection item thumbnails.
  • Farro - Blog posts display collection item thumbnails.
  • Five - Blog posts, events, products display page banners.
  • Montauk - Blog posts, events display page banners.
  • Skye - Blog posts display collection item thumbnails.
  • Supply - Blog posts and events display collection item thumbnails.

 

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, die kein eigenes Seitenbanner haben.

Befolgen Sie die Schritte für Banner in Five, um ein seitenübergreifendes Banner hinzuzufügen. Wenn Sie ein eingestelltes Template verwenden, gelten dieselben Schritte. Die Anpassungsoptionen für Banner-Bilder könnten jedoch eine andere Bezeichnung haben.

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

Overlay-Text einfügen

Verwenden Sie die integrierten Optionen Ihres Templates, um Overlay-Text zu erstellen, der im Vordergrund des Bildes angezeigt wird. Hier erfahren Sie Näheres: Text zu Bannern hinzufügen.

Hinweis: Wir raten davon ab, ein Bild hochzuladen, das Text oder Worte enthält. Textinhalte innerhalb einer Bilddatei werden von Suchmaschinen nicht erfasst und können beim Zuschnitt des Bildes abgetrennt werden.

Im Template Pacific sieht Overlay-Text beispielsweise folgendermaßen aus:

pacific-page-banner.png

Inhalt als Overlay hinzufügen

In einigen Templates können Inhalts-Blöcke auch über einem Banner hinzugefügt werden. So lässt sich beispielsweise ein Video-Block über einem Banner-Bild hinzufügen, wie im Screenshot unten dargestellt.

You can add content blocks over a banner image or video in these template families:

video-block-on-background-image.png

Banner gestalten

Learn about the style options for these template families:

Banner-Höhe ändern

To set the height for banners in these template families:

Template family

So wird die Höhe geändert

Adirondack

Anpassung über Height (Höhe)

Bedford

Page and video banners - Add line breaks to the page description. Learn more.

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

Brine

Add line breaks to the intro areaIndex banners have separate height options.

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

Add line breaks to the page description or use the Padding tweak. Learn moreIndex banners have separate height options.

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)

Banner auf Mobilgeräten

  • Banner-Bilder werden auf Mobilgeräten immer ein wenig zugeschnitten.
  • Video-Banner werden je nach Verbindungsgeschwindigkeit des Besuchers und Browser-Version gelegentlich nicht auf Mobilgeräten angezeigt. Legen Sie ein Ersatzbild für Mobilgeräte fest, das erscheint, wenn das Video-Banner nicht geladen werden kann.
  • Die Höheneinstellungen eines Banners werden auf Mobilgeräten nicht immer übernommen.
  • Parallax Scrolling funktioniert in den meisten Fällen auch auf Mobilgeräten.
  • Auf einigen Mobilgeräten wird die Einstellung Fix Position (Feste Position) für seitenübergreifende Banner nicht angezeigt, darunter auch auf iOS-Geräten.
  • 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.

Was passiert beim Wechsel zwischen Templates?

Seiten-Vorschaubilder, Vorschaubilder von Sammlungselementen und Video-Vorschaubilder werden beim Wechsel zwischen Templates übernommen. Wenn Sie von einem Template, das diese Banner unterstützt, zu einem anderen Template wechseln, wird im neuen Template dasselbe Banner-Bild angezeigt.

Hinter der Kopfzeile angezeigte Banner

Banner images and video banners can display behind the site header in these template families (click the links to learn more):

Tip: Banners in Five display below the header, but the site title, logo, and tag line can display over the banner.

bedford-transparent-header.png

Banner stapeln

Some templates support an Index Page that displays multiple banners stacked vertically on one page, creating a long scrolling effect. You can stack banners in an Index in these template families (click the links to learn more):

Hinweis: Banner in einem Index weisen im Normalfall eigene Style-Einstellungen auf.

Banner, die nicht zugeschnitten werden

Die meisten Banner-Bilder werden leicht zugeschnitten, damit sie an unterschiedliche Bildschirmgrößen angepasst werden können. Dies sorgt dafür, dass Ihre Bilder innerhalb des Layouts Ihrer Website und unabhängig von der jeweiligen Browsergröße immer optimal zur Geltung kommen.

You can create banners that won't crop in these template families:

  • Montauk - Banners don't crop vertically. They always display at the width of the site content. Tall, skinny banners may pixelate as they stretch to fill the width.
  • Pacific - Create a banner image that doesn't crop by adding a Gallery Page to an Index Page.
Tip: Changing the focal point of the thumbnail might help with cropping in page and collection item banners. For more help with cropping, visit our troubleshooting tips.

Slideshow-Banner

You can create slideshow banners in these template families:

Tip: In other templates, add a Slideshow Gallery Block at the top of a Layout Page for a similar effect.

Banner in anderen Templates erstellen

Durch Hinzufügen eines Bild-Blocks im oberen Bereich einer Layout-Seite können Sie in jedem Template einen Banner-Effekt erzielen.
Jedes Layout verfügt über eigene Overlay-Text-Optionen.

Bild-Blöcke werden innerhalb des Padding des zentralen Inhaltsbereichs dargestellt. Sie verfügen über keine integrierten Vollbildoptionen.

Tipp: Einige Templates verfügen über eigene Bereiche für Seiten-Kopfzeilen, in denen auch Bild-, Text- und Video-Blöcke unterstützt werden.

image-block-as-a-banner.png

Banner-Optionen nach Template

These template families support one or more banner types:

Template family

Seitenbanner: unterstützte Seiten

Video-Banner

Banner für Sammlungs-
elemente: unterstützte Elemente

Sonstige Optionen

Adirondack

Layout-
Blog-
Veranstaltungs- und
Produktseiten

Ja

Blogeinträge
Veranstaltungen
Produkte

Ausblend-Effekt beim Scrollen (Desktop-Ansicht)

Bedford

Layout-
Album-
Blog-
Veranstaltungs- und
Produktseiten

Ja

Blogeinträge
Veranstaltungen

Slideshow-Banner

Blog-Seite Slideshow-Banner

Brine

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

Ja

 

Parallax Scrolling

Farro

   

Blog-Einträge

 

Five

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

Ja

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

Seiten-übergreifende Banner

Montauk

Layout-
Blog-
Veranstaltungs- und
Index-Seiten

Ja

Seitenbanner werden in Blog-Einträgen und Events angezeigt

 

Pacific

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

Ja

   

Skye

   

Blog-Einträge

 

Supply

Layout-
Blog-
Album- und
Veranstaltungsseiten

 

Blogeinträge
Veranstaltungen

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

Tremont

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

Ja

  Seiten-Overlay

York

Layout-
Album-
Blog-
Veranstaltungs-
Galerie-
Projekt-
Produkt- und
Haupt-Index-Seiten

   

Einblend-Effekt

Transparente Bilder

If you use a .png file with a transparent background, the following tweaks adjust the color that displays behind the banner in these template families:

  • Adirondack - Content Background Color
  • Bedford - Banner Overlay Color
  • Brine - Overlay Color in the Main: Overlay section
  • Farro - Post Background Color. The Overlay Color also affects the color.
  • Five - Header Background
  • Montauk - Canvas Background
  • Pacific - Overlay Color
  • Skye - Site Background
  • Supply - Page Color
  • Tremont - Site Background Color
  • York - Background Color in the Banner section
Tip: In most cases, the color displays at 100% opacity. If you're having trouble getting the color you want, change the transparency.

Ein Banner-Bild entfernen

Um ein Banner-Bild zu entfernen, öffnen Sie den entsprechenden Banner-Bereich und löschen Sie das Bild.

  • Page banners - In the Media tab of the page's settings, click Image, then click the trash can icon.
  • Video banners - In the Media tab of the page's settings, click Video, the delete the video URL.
  • Sammlungsinhalts-Banner - Öffnen Sie das einzelne Element (Blogeintrag, Produkt oder Veranstaltung), klicken Sie auf den Tab Optionen und dann auf das Papierkorb-Symbol.
  • Banner für die gesamte Website – Öffnen Sie die spezifische Anpassung in Website-Stile und klicken Sie auf Entfernen.
War dieser Beitrag hilfreich?
26 von 129 fanden dies hilfreich