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

Banner-Bilder 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 Layout-Seite einen Bild-Block hinzufügen. Dies gilt für alle Templates.
Diese Schritte gelten für die Version 7.0. Wenn Ihre Website Version 7.1 nutzt, gehen Sie zu Stil- und Design-Optionen für Version 7.1.

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üge eine Mitteilungsleiste hinzu, um benutzerdefinierte Mitteilungen im oberen Bereich Ihrer Website einzublenden.

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.
  2. Klicken Sie im Tab Medien auf Bild hinzufügen, um ein Bild von Ihrem Computer hochzuladen, oder klicken Sie auf Nach Bildern suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen.
  3. 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.
  4. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen.
  5. Verwenden Sie Website-Stil, um den Stil Ihres Banners anzupassen.

Klicke zur Bearbeitung eines vorhandenen Banners auf die Anmerkung Banner oder rufe erneut die Seiteneinstellungen auf.

Mehr darüber, welche Templates Seiten-Banner unterstützen, finden Sie unter Banner-Optionen nach Vorlage.

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

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

Folgende Template-Gruppen unterstützen Banner für Sammlungsinhalte. Bei einigen Sammlungsinhalten werden Seiten-Banner angezeigt. Ein Blogeintrag kann beispielsweise das Blogseiten-Banner anzeigen. 

  • Adirondack – Blogeinträge, Veranstaltungen und Produkte zeigen Vorschaubilder für Sammlungsinhalte an.
  • Bedford – Blogeinträge und Veranstaltungen zeigen Vorschaubilder für Sammlungsinhalte an.
  • Farro – Blogeinträge zeigen Vorschaubilder für Sammlungsinhalte an.
  • Five – Blogeinträge, Veranstaltungen und Produkte zeigen Seiten-Banner an.
  • Montauk – Blogeinträge und Veranstaltungen zeigen Seiten-Banner an.
  • Skye – Blogeinträge zeigen Vorschaubilder für Sammlungsinhalte an.
  • Supply – Blogeinträge und Veranstaltungen zeigen Vorschaubilder für Sammlungsinhalte 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 Seiten-Banner haben.

Um ein seitenübergreifendes Banner hinzuzufügen, klicken Sie auf dessen Anpassung unter Website-Stile. 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.

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.

Inhalts-Blöcke können in den folgenden Template-Gruppen über einem Banner-Bild oder -Video hinzugefügt werden:

video-block-on-background-image.png

Banner gestalten

Mehr über die Stil-Optionen für diese Template-Gruppen.

Banner-Höhe ändern

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)

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-Bilder und Video-Banner können in diesen Template-Gruppen hinter der Kopfzeile der Website angezeigt werden (klicken Sie auf die Links, um mehr zu erfahren):

Hinweis: In Five werden Banner unterhalb der Kopfzeile angezeigt. Seitentitel, Logo und Slogan können als über dem Banner angezeigt werden.

bedford-transparent-header.png

Banner stapeln

Einige Templates unterstützen eine Index-Seite, die mehrere Banner vertikal gestapelt auf einer Seite anzeigt und so einen langen Scrolling-Effekt erzeugt. In diesen Template-Gruppen können Sie Banner in einem Index stapeln (klicken Sie auf die Links, um mehr zu erfahren):

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 diesen Template-Gruppen können Sie Banner erstellen, die nicht abgeschnitten werden:

  • Montauk – Banner werden vertikal nicht abgeschnitten. Sie werden stattdessen je nach Breite des Website-Inhalts dargestellt. Hohe, schmalere Banner können verpixelt wirken, da sie auf die volle Breite gestreckt werden.
  • Pacific – Erstellen Sie ein Banner-Bild, das nicht abgeschnitten wird, indem Sie eine Galerie-Seite zu einer Index-Seite hinzufügen.
Tipp: Es könnte hilfreich sein, den Fokuspunkt des Vorschaubildes zu ändern, um Seiten-Banner und Banner für Sammlungsinhalte zuzuschneiden. Weitere Hilfestellungen zum Thema Zuschnitt erhalten Sie in unseren Tipps zur Fehlerbehebung.

Slideshow-Banner

In diesen Template-Gruppen können Sie Slideshow-Banner erstellen:

Tip: Fügen Sie in anderen Templates einen Galerie-Block (Slideshow) zu einer Layout-Seite hinzu, um einen ähnlichen Effekt zu erzielen.

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

Transparente Bilder

Wenn Sie eine PNG- Datei mit transparentem Hintergrund verwenden, können Sie in diesen Template-Gruppen mit den folgenden Anpassungen die Farbe anpassen, die hinter dem Banner angezeigt wird.

  • 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
Tipp: In den meisten Fällen wird die Farbe mit 100 % Deckkraft angezeigt. Wenn Sie Schwierigkeiten dabei haben, den gewünschten Farbton zu treffen, ändern Sie die Transparenz.

Banner-Optionen nach Template

Die folgenden Template-Gruppen unterstützen eine oder mehrere Banner-Arten:

Template-Gruppe

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
Veranstaltung
Galerie
Projekt
Produkte
Index

   

Einblend-Effekt

Ein Banner-Bild entfernen

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

  • Seiten-Banner – Klicken Sie im Tab Medien der Seiteneinstellungen auf Bild entfernen.
  • Video-Banner – Klicken Sie im Tab Medien der Seiteneinstellungen auf Video und löschen Sie dann die 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?
29 von 161 fanden dies hilfreich