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 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 normalen Seite einen Bild-Block hinzufügen. Dies gilt für alle Templates.

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 zur Anzeige im Web 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 normalen 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.
  • Seitenübergreifende Banner - Können auf jeder Seite angezeigt werden und lassen sich über den Style Editor hinzufügen.

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 Image (Bild), um ein vorhandenes Bild von Ihrem Computer zu verwenden, oder auf Getty, um für 10 USD die Lizenz für ein Archivbild zu erwerben.
  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 den Style Editor, um gestalterische Änderungen an Ihrem Banner vorzunehmen.
Tipp: Klicken Sie zur Bearbeitung eines vorhandenen Banners auf die Anmerkung Banner oder rufen Sie erneut die Seiteneinstellungen auf.

editor.png

Unterstützte Templates

Folgende Templates unterstützen Seitenbanner:

  • Adirondack - Normale sowie Blog-, Event- und Produkt-Seiten
  • Bedford, Anya, Bryant, Hayden - Normale sowie Album-, Blog-, Event- und Produkt-Seiten
  • Brine, Basil, Basil, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne – Normale sowie Album-, Blog-, Event-, Galerie- und Produkt-Seiten
  • Five - Normale sowie Album-, Blog-, Event-, Galerie- und Produkt-Seiten
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift – Normale sowie Blog-, Event- und Produkt-Seiten
  • Montauk, Julia, Kent, Om - Normale Seiten, Blog- und Event-Seiten sowie die Index-Hauptseite
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi - Normale sowie Album-, Blog-, Event-, Galerie- und Produkt-Seiten
  • Supply - Normale sowie Blog-, Album- und Event-Seiten
  • Tremont, Carson, Henson - Normale sowie Album-, Blog-, Event-, Galerie- und Produkt-Seiten
  • York, Artesia, Harris, Lange, Jasper, Shibori, Taylor - Normale Seiten, Album-, Blog-, Event-, Galerie-, Projekt- und Produkt-Seiten sowie die Index-Hauptseite

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 Marquee aus:

Hinweis: Nicht alle Banner für Sammlungselemente unterstützen Overlay-Text.

blog-post-marquee.png

Unterstützte Templates

Folgende Templates unterstützen Banner für Sammlungselemente:

  • Adirondack - Blog-Einträge, Events, Produkte
  • Bedford, Anya, Bryant, Hayden - Blog-Einträge, Events
  • Farro, Haute - Blog-Einträge
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift – Blog-Einträge, Events, Produkte
  • Skye, Foundry, Tudor - Blog-Einträge
  • Supply - Blog-Einträge, Events
Hinweis: In einigen Templates zeigen Sammlungselemente stattdessen das Seitenbanner an. Ein Blog-Eintrag zeigt beispielsweise das Banner der Blog-Seite an.

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

Banner gestalten

Näheres über die Style-Optionen der Banner Ihres Templates erfahren Sie in unseren Template-Anleitungen:

Banner-Höhe ändern

In dieser Übersicht erfahren Sie, wie Sie die Höhe der Banner in jedem Template einstellen. Ausführlichere Hilfestellungen zur Gestaltung finden Sie in den verlinkten Template-Anleitungen im vorherigen Abschnitt.

Adirondack

Anpassung über Height (Höhe)

Bedford, Anya, Bryant, Hayden

Seiten- und Video-Banner - Fügen Sie der Seitenbeschreibung Zeilenumbrüche hinzu. Erfahren Sie mehr.

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

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

Fügen Sie dem Einführungsbereich Zeilenumbrüche hinzu.

Für Index-Banner gelten separate Höheneinstellungen.

Farro, Haute

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.

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Seiten- und Video-Banner - Fügen Sie der Seitenbeschreibung Zeilenumbrüche hinzu. Erfahren Sie mehr.

Event- und Produkt-Banner - Fügen Sie der Beschreibung des Elements Zeilenumbrüche hinzu.

Blog-Einträge - Festgelegte Höhe.

Für Index-Banner gelten separate Höheneinstellungen.

Montauk, Julia, Kent, Om

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, Bryler, Charlotte, Fulton, Horizon, Naomi

Fügen Sie Zeilenumbrüche in der Seitenbeschreibung hinzu oder verwenden Sie die Anpassung Padding. Erfahren Sie mehr.

Für Index-Banner gelten separate Höheneinstellungen.

Skye, Foundry, Tudor

Verwenden Sie die Anpassung Banner Image Width (Breite des Banner-Bildes) zur Einstellung der Bannergröße.

Supply

Die Seitenbreite ist festgelegt, damit das Banner die gesamte verbleibende Browserbreite ausfüllt.

Tremont, Carson, Henson

Anpassung über Page Banner Image Height (Bildhöhe des Seitenbanners)

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Anpassung über Height (Höhe)

Banner auf Mobilgeräten

  • Banner-Bilder werden auf Mobilgeräten immer ein wenig zugeschnitten.
  • Video-Banner werden auf Mobilgeräten nicht angezeigt. Richten Sie ein Alternativbild für Mobilgeräte ein, das anstatt des Videos angezeigt wird.
  • 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.

Hinter der Kopfzeile angezeigte Banner

In den folgenden Templates können Banner hinter dem Inhalt der Website-Kopfzeile angezeigt werden, wie etwa im Seitentitel und in der Seitennavigation. Klicken Sie auf den gewünschten Link, um nähere Informationen zu erhalten.

Hinweis: In Five werden Banner immer unterhalb der Kopfzeile angezeigt. Seitentitel, Logo und Kurzbeschreibung können als Overlay-Text jedoch auch im Banner angezeigt werden.

So sieht dies in Bedford aus:

bedford-transparent-header.png

Gestapelte Banner in einem Index

Einige Templates unterstützen eine Index-Seite, die mehrere Banner vertikal gestapelt auf einer Seite anzeigt und so einen langen Scrolling-Effekt erzeugt.

Hier finden Sie eine Liste der Templates, die diese Option unterstützen. Die Templates sind in Gruppen eingeteilt.

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.

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

Tipp: Es könnte hilfreich sein, den Fokuspunkt des Vorschaubildes zu ändern, um Seitenbanner und Banner für Sammlungselemente zuzuschneiden.

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.

Banner in anderen Templates erstellen

Durch Hinzufügen eines Bild-Blocks im oberen Bereich einer normalen 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

Die folgenden Templates unterstützen eine oder mehrere Banner-Arten. Die Templates sind in Gruppen eingeteilt.

Template

Seitenbanner: unterstützte Seiten

Video-Banner

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

Sonstige Optionen

Adirondack

Normale sowie
Blog-, Event-
und Produkt-
Seiten

ja

Blog-Einträge
Events
Produkte

Ausblend-Effekt beim Scrollen (Desktop-Ansicht)

Bedford, Anya, Bryant, Hayden

Normale sowie
Album-, Blog-,
Event- und
Produkt-Seiten

ja

Blog-Einträge
Events

Slideshow-Banner

Blog-Seite Slideshow-Banner

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

Normale sowie
Album-, Blog-,
Event-, Galerie-
und Produkt-Seiten

ja

 

Parallax Scrolling

Farro, Haute

   

Blog-Einträge

 

Five

Normale sowie
Album-, Blog-,
Event-, Galerie-
und Produkt-Seiten

ja

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

Seiten-übergreifende Banner

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Normale sowie
Blog-, Event-
und Produkt-
Seiten

ja

Blog-Einträge
Events
Produkte

Parallax Scrolling

Montauk, Julia, Kent, Om

Normale sowie
Blog-, Event-
und Index-Seiten

ja

Seitenbanner werden in Blog-Einträgen und Events angezeigt

 

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Normale sowie
Album-, Blog-,
Event-, Galerie-
und Produkt-Seiten

ja

   

Skye, Foundry, Tudor

   

Blog-Einträge

 

Supply

Normale sowie
Blog-, Album-
und Event-Seiten

 

Blog-Einträge
Events

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

Tremont, Carson, Henson

Normale sowie
Album-, Blog-,
Event-, Galerie-
und Produkt-Seiten

ja

  Seiten-Overlay

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Normale sowie
Album-, Blog-,
Event-, Galerie-,
Projekt- und
Produkt-Seiten und Haupt-Index

   

Einblend-Effekt

Transparente Bilder

Wenn Sie eine .png-Datei mit transparentem Hintergrund verwenden, nutzen Sie die folgenden Anpassungen zur Einstellung der Farbe im Hintergrund des Banners. In dieser Liste werden die Templates in Gruppen eingeteilt.

  • Adirondack - Content Background Color (Hintergrundfarbe des Inhalts)
  • Bedford, Anya, Bryant, Hayden - Banner Overlay Color (Banner-Overlay-Farbe)
  • Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne - Overlay-Farbe im Bereich Main: Overlay
  • Farro, Haute - Post Background Color (Hintergrundfarbe des Eintrags). Die Overlay-Farbe hat ebenfalls Einfluss auf die Farbgebung.
  • Five - Header Background (Hintergrund der Kopfzeile)
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift - Content Background Color (Hintergrundfarbe des Inhalts)
  • Montauk, Julia, Kent, Om - Canvas Background (Leinwand-Hintergrund)
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi - Overlay Color (Overlay-Farbe)
  • Skye, Foundry, Tudor - Site Background (Website-Hintergrund)
  • Supply - Page Color (Farbe der Seite)
  • Tremont, Carson, Henson - Site Background Color (Website-Hintergrundfarbe)
  • York, Artesia, Harris, Lange, Jasper, Shibori, Taylor - Background Color (Hintergrundfarbe) im Bereich Banner.
Tipp: In den meisten Fällen wird die Farbe mit 100% Opazität angezeigt. Wenn Sie Schwierigkeiten dabei haben, den gewünschten Farbton zu treffen, passen Sie die Transparenz an.
War dieser Beitrag hilfreich?
4 von 18 fanden dies hilfreich