Ein Promo-Banner mit Bild und SEO-Daten einrichten

Ein Promo-Banner ist ein großes, auffälliges Werbeelement mit Hintergrundbild und Text. Hier stellst du das Bild ein, vergibst eine Bezeichnung für deine Verwaltung und optimierst das Banner für Suchmaschinen – damit es nicht nur schön aussieht, sondern auch online gefunden wird.

So kommst du hierher

Öffne in der Seitenleiste Websites.
Wähle die Website, an der du arbeiten möchtest.
Öffne die Seite oder den Abschnitt, wo das Banner stehen soll, und füge dort einen Promo-Banner-Block ein.
Klicke auf das Banner – der Bearbeitungsbereich öffnet sich auf der rechten Seite.

Voraussetzungen

Du brauchst eine Website, die bereits angelegt ist, und die Berechtigung, diese zu bearbeiten.

So gehst du vor

Lade ein Hintergrundbild für die Desktopansicht hoch. Klicke unter Desktop auf Datei auswählen und wähle dein Bild (PNG, JPG oder GIF). Weboffice zeigt dir eine Vorschau. Du kannst das Bild mit dem Stift-Symbol bearbeiten oder mit dem Mülleimer-Symbol löschen – lade dann ein neues hoch.
Lade auch ein Bild für die mobile Ansicht hoch. Klicke unter Mobile auf Datei auswählen. So sieht dein Banner auf Smartphones genauso professionell aus wie auf dem Computer.
Gib dem Banner eine Bezeichnung. Trage im Feld Bezeichnung (für Verlinkung) einen Namen ein, unter dem du das Banner später wiederfindest – zum Beispiel, wenn du es per Link ansteuern möchtest. Dieses Feld ist nur für deine interne Verwaltung.
Ergänze einen aussagekräftigen Alternativtext. Das Feld Alternativtext (Barrierefreiheit) beschreibt in wenigen Worten, was auf dem Bild zu sehen ist. Das hilft Menschen mit Sehbehinderung und unterstützt Suchmaschinen beim Verstehen des Bildes.
Gestalte die Schaltflächen, Farben und den Text, wenn nötig. Öffne dazu Layout & Design – dies wird in einer separaten Anleitung beschrieben.
Speichere deine Änderungen mit der grünen Schaltfläche Speichern oben rechts.

Aufbau des Bearbeitungsbereichs

Der rechte Bereich zeigt die Einstellungen für das Promo-Banner in folgender Struktur:

ImageBlock: Hier legst du die Bilder fest
- Desktop: Dein Hintergrundbild für große Bildschirme. Mit Datei auswählen lädst du es hoch, mit dem Stift bearbeitest du es, mit dem Mülleimer löschst du es.
- Mobile: Dein Hintergrundbild für Smartphones. Falls leer, wird das Desktop-Bild verwendet – mit einem separaten Bild kannst du aber sicherstellen, dass das Banner auf allen Geräten gut aussieht.
Desktop: Zeigt die Vorschau des Bildes für große Bildschirme
Mobile: Zeigt die Vorschau des Bildes für Smartphones
Bezeichnung (für Verlinkung): Ein Name für deine Verwaltung, damit du das Banner später wiederfindest. Du kannst ihn auch per Link ansteuern.
Alternativtext (Barrierefreiheit): Eine kurze Beschreibung des Bildes für Suchmaschinen und Menschen mit Sehbehinderung.
Link: Falls das Banner auf eine andere Seite verlinken soll, trägst du hier die URL ein. Das Feld ist optional.
Layout & Design: Hier gestaltest du die Schaltflächen, Farben und Text des Banners.

Was danach passiert

Dein Promo-Banner wird gespeichert und erscheint auf der Website genau dort, wo du es eingefügt hast. Die Bilder werden für verschiedene Bildschirmgrößen optimiert. Der Alternativtext hilft Suchmaschinen zu verstehen, worum es auf deiner Seite geht – das verbessert deine Suchmaschinen-Platzierung.

Tipps und Hinweise

Bilder in guter Qualität verwenden: Je größer und schärfer dein Bild, desto besser sieht das Banner auf großen Monitoren aus. Achte aber darauf, dass die Datei nicht zu groß wird (ideal: unter 1 MB).
Alternativtext prägnant halten: Schreib kurz auf, was das Bild zeigt – nicht länger als ein Satz. Beispiel: „Frau am Schreibtisch mit Laptop" statt „Eine Person mit braunen Haaren sitzt an einem Holztisch und nutzt einen Computer."
Verschiedene Bilder für Desktop und Mobil: Auf dem Smartphone ist weniger Platz. Mit einem separaten Bild für die mobile Ansicht kannst du sicherstellen, dass dein Banner auf allen Geräten gut aussieht.
Bild bearbeiten: Du kannst das hochgeladene Bild direkt mit dem integrierten Editor zuschneiden, drehen oder anpassen – ohne ein externes Programm zu öffnen.