Anleitungen/Inhalte erstellen/Medien/Banner zu deiner Website hinzufügen

Banner zu deiner Website hinzufügen

Der Cover-Block wird oft als „Hero“- oder „Banner“-Bild bezeichnet und dient dazu, deiner Website ein großes Bild, Video oder Textbanner hinzuzufügen. Diese Anleitung zeigt dir, wie du ein Banner hinzufügst und das anzuzeigende Bild, Video oder die Farbe auswählst.

Video-Tutorial

In diesem Video erfährst du, wie du den Cover-Block verwendest, um deiner WordPress.com-Website einen visuellen Header oder einen Abschnitt im Banner-Stil hinzuzufügen. Es wird gezeigt, wie du ein Hintergrundbild oder Video hinzufügst, Text oder andere Blöcke darüber platzierst, das Layout und den Fokuspunkt anpasst, das Overlay anpasst und das Design auf Mobilgeräten in der Vorschau anzeigst.

Cover-Block hinzufügen

Du kannst den Cover-Block verwenden, um deiner Website ein Bannerbild hinzuzufügen. Um einer Seite, einem Beitrag oder einem Template ein Banner hinzuzufügen, gehst du wie folgt vor:

  1. Gehe zum Dashboard deiner Website.
  2. Je nachdem, wo du das Banner hinzufügen möchtest, gehe zu einer Seite, einem Beitrag oder einem Template und bearbeite ein vorhandenes oder erstelle ein neues:
    • Seite: Gehe in deinem Menü zum Abschnitt Seiten.
    • Beitrag: Gehe in deinem Menü zum Abschnitt Beiträge.
    • Template: Gehe zu Design → Editor und wähle das Template aus.
  3. Klicke auf das Symbol + (Block-Inserter) und suche nach „Cover“.
    • Oder gib /Cover dort ein, wo „Tippe /, um einen Block auszuwählen“ angezeigt wird.
The (+) block inserter sidebar open with the Cover block icon highlighted.
  1. Klicke auf das Cover-Symbol, um den Cover-Block einzufügen:
The Cover block before media is added, with the options to upload, select media, or use the featured image.

Bannermedien auswählen

Nachdem du einen Cover-Block hinzugefügt hast, wähle die Medien aus, die angezeigt werden sollen. Du kannst aus den folgenden Optionen wählen:

  • Hochladen: Klicke auf den Button „Hochladen“, um eine Datei von deinem Computer auszuwählen.
  • Medien auswählen: Finde Medien an einem der folgenden Orte:
    • Mediathek: Bilder und Videos, die bereits in die Mediathek deiner Website hochgeladen wurden.
    • Dein Telefon: Nutze die Jetpack-App, um Medien direkt von deinem Telefon hochzuladen.
    • Mit KI generieren: Gib eine kurze Beschreibung des Bildtyps an, den du verwenden möchtest, und die KI erstellt das Design.
    • Google Fotos: Wähle Medien aus deinem verbundenen Google-Fotos-Konto aus.
    • Pexels: Suche nach kostenlosen Bildern in der Pexels-Bibliothek.
    • Openverse: Suche nach kostenlosen Bildern in der Openverse-Bibliothek.
  • Beitragsbild verwenden: Zeigt das Beitragsbild der Seite oder des Beitrags an, wenn es festgelegt ist. Wenn du einen Cover-Block zu einem Template hinzufügst und diese Option auswählst, wird automatisch das Beitragsbild jeder Seite und jedes Beitrags angezeigt, die dieses Template verwenden.
  • Farbe: Statt ein Bild oder Video hinzuzufügen, wählst du eine Volltonfarbe für das Banner aus.

Anschließend kannst du Inhalte wie Text und Buttons zum Banner hinzufügen, das Layout des Banners anpassen und das Design des Banners anpassen.

Tipps zur Auswahl eines Bilds

Beachte Folgendes bei der Auswahl eines Bilds für dein Banner:

  • Dekorative oder abstrakte Bilder eignen sich am besten, da auf Mobilgeräten möglicherweise nicht immer das ganze Bild angezeigt wird.
  • Gib Text über dem Bild ein, statt den Text direkt in das Bild einzubauen. Dadurch wird sichergestellt, dass der Text auf allen Bildschirmgrößen gut skaliert.
  • Der Cover-Block verwendet das Bild als Hintergrundbild und passt seine Größe auf kleineren Geräten nicht so an, dass die gesamte Bildbreite sichtbar ist. Mit der Fokuspunkt-Auswahl kannst du festlegen, auf welchen Teil des Bilds auf kleineren Bildschirmen der Fokus gelegt wird.
    • Wenn dein Bild Inhalte enthält, die auf allen Gerätegrößen vollständig angezeigt werden müssen, kannst du stattdessen einen Bild-Block verwenden.

Ein Videobanner erstellen

Der Cover-Block unterstützt Bilder, Videos und Volltonfarben. Um ein Video in den Cover-Block hochzuladen, gehst du wie folgt vor:

  1. Füge einen Cover-Block zu einer Seite oder einem Beitrag hinzu.
  2. Klicke in der Block-Werkzeugleiste auf die Option „Medien hinzufügen“:
"Add media" is highlighted in the Cover block toolbar.
  1. Wähle eine der folgenden Optionen:
    • Hochladen: Lade eine Videodatei von deinem Computer hoch (geeigneter Tarif erforderlich).
    • Mediathek öffnen: Wähle eine Videodatei aus, die du bereits hochgeladen hast.
    • Video von URL einbetten: Füge eine URL von YouTube, Vimeo oder einem anderen Anbieter ein.

Der Cover-Block ist dekorativ und nicht funktional. Deshalb wird bei einer Videodatei kein Ton wiedergegeben. Wenn du den Ton des Videos einbinden möchtest, verwende den VideoPress-Block für Videos mit Ton.

Bannermedien ersetzen oder entfernen

Nachdem du einen Cover-Block hinzugefügt hast, kannst du die Medien jederzeit ändern. So ersetzt oder entfernst du die Medien in deinem Banner:

  1. Gehe zum Dashboard deiner Website.
  2. Navigiere zu der Seite, dem Beitrag oder dem Template, in dem sich das Banner befindet.
  3. Wähle links oben im Editor die Option Listenansicht aus.
  4. Klicke in der Listenansicht auf den Cover-Block.
The list view open and an arrow pointing from the "List View" icon to the Cover block.
  1. Klicke in der Block-Werkzeugleiste auf den Ersetzen-Button, um ein neues Bild oder Video auszuwählen.
The "Replace" option highlighted in the Cover block's toolbar.

Du kannst eine neue Mediendatei mit einer der folgenden Optionen auswählen:

  • Mediathek öffnen: Wähle ein Bild aus, das du bereits hochgeladen hast.
  • Hochladen: Wähle ein Bild von deinem Gerät aus, um es auf deine Website hochzuladen. Sieh dir die unterstützten Dateitypen an.
  • Beitragsbild verwenden: Verwende das Beitragsbild der Seite oder des Beitrags.
  • Zurücksetzen: Entferne das Bild, aber lass den Bild-Block an Ort und Stelle, damit du aus Optionen wie Hochladen, Bild auswählen, Mit KI generieren oder Von URL einfügen wählen kannst.
  • Dein Telefon: Füge mit der Jetpack-App ein Bild von deinem Telefon hinzu.
  • Mit KI generieren: Erstelle ein Bild mit KI, indem du beschreibst, was du möchtest. 
  • Google Fotos.
  • Kostenlose Pexels-Fotobibliothek.
  • Kostenlose Openverse-Bilder.
  • Video von URL einbetten: Füge eine URL von YouTube, Vimeo oder einem anderen Anbieter ein.
Copied to clipboard!