Hero Section und Slider

Die Hero Section ist das Erste, was Besucher sehen. Sie nimmt die volle Breite ein und zeigt ein Hintergrundbild oder ein Video, darüber einen Titel, eine Tagline und bis zu zwei Call-to-Action-Buttons.

Einstellungen der Hero Section

In der Meta-Box findest du folgende Felder:

• Medientyp: Bild oder Video (Vimeo-URL oder MP4-Datei)
• Hintergrundbild Desktop: Querformat empfohlen, mit Fokuspunkt-Steuerung (X/Y-Koordinaten)
• Hintergrundbild Mobil: Separates Bild für Smartphones, idealerweise ein engerer Ausschnitt
• Titel: Die Hauptüberschrift, die über dem Bild liegt. Du kannst wählen, ob es eine H1, H2 oder H3 wird
• Tagline: Untertitel unter dem Haupttitel
• Primärer CTA: Button-Text und Ziel-URL, zum Beispiel "Rezepte entdecken"
• Sekundärer CTA: Zweiter Button, etwa "Über mich"
• Overlay-Deckkraft: Wie stark das Bild abgedunkelt wird (0-100 %), damit der Text lesbar bleibt

Du kannst für Desktop und Mobil unterschiedliche Bilder hinterlegen. Das ist wichtig, weil ein breites Querformat-Bild auf dem Handy oft schlecht aussieht. Viele unserer Blogs nutzen ein stimmungsvolles Food-Foto im Querformat für Desktop und einen engeren Ausschnitt im Hochformat für Mobil.

Der Fokuspunkt ist besonders nützlich. Wenn dein Food-Foto den Teller in der rechten Hälfte zeigt, stellst du den X-Wert auf 70 %. So bleibt das Hauptmotiv auch bei unterschiedlichen Bildschirmgrößen im sichtbaren Bereich.

Videos als Hintergrund sehen eindrucksvoll aus, kosten aber Ladezeit. Wenn du ein Video verwendest, lege unbedingt ein Poster-Bild als Fallback fest. Das Poster wird angezeigt, solange das Video lädt, und auf Mobilgeräten, wo Autoplay oft blockiert wird. Die meisten erfolgreichen Foodblogs fahren mit einem starken Hero-Bild besser als mit einem Video.

Der Slider

Der Slider funktioniert anders. Er hat zwei Modi:

• Hero-Modus: Wirkt wie eine durchklickbare Hero Section in voller Breite. Jeder Slide hat ein eigenes Bild, Titel, Text und Button.
• Karussell-Modus: Zeigt Karten nebeneinander, durch die Besucher blättern.

Pro Slide kannst du einstellen: Bild, Überschrift (H1/H2/H3), Text, Button mit URL, Overlay-Farbe und Overlay-Deckkraft. Autoplay lässt sich aktivieren mit einem Intervall von 3 bis 10 Sekunden.

Wann Hero, wann Slider? Wenn du eine klare Botschaft hast, etwa "Die besten italienischen Rezepte", reicht die Hero Section. Der Slider lohnt sich, wenn du mehrere gleichwertige Themen oder saisonale Aktionen zeigen willst und keines davon den Vorrang haben soll.

Ich empfehle dir, mit der Hero Section zu starten und den Slider nur dann einzusetzen, wenn du wirklich mehrere Inhalte rotieren musst. Ein einziges, gut gewähltes Bild mit einer klaren Aussage schlägt fast immer fünf mittelmäßige Slides. Das haben wir im Vorgängerkurs WordPress Startseite aufbauen bei der Seitengeschwindigkeit schon gesehen.