Hero-Banner sollten ein wichtiger Bestandteil deiner Homepage sein. Visualisierungen in Verbindung mit verlockenden Inhalten müssen die wichtigsten 3 Sekunden im Leben eines Besuchers sein. Banner können aussagekräftige Schlagzeilen, beeindruckende Bilder, verlockende Snippets und einen Aufruf zum Handeln enthalten, alles mit dem Ziel, den Besucher zum Weitergehen zu bewegen.
Du kannst das Banner auch weglassen und dich nicht um den CTA-Button kümmern. Das ist gut, wenn du riskieren willst, dass der Besucher deine Website in 0,001 Sekunden verlässt.
Die richtige Gestaltung des Banners macht einen großen Unterschied, wenn es darum geht, den Besucher für seine Zeit zu belohnen. Gebe ihm die Gewissheit, dass er die richtige Entscheidung für seinen Besuch getroffen hat. Denke an die Verpackung eines Produkts in einem Geschäft: Wenn sie vermittelt, was sich darin befindet, ist die Wahrscheinlichkeit größer, dass du es in die Hand nimmst.
Das Interesse zu wecken ist der springende Punkt des Banners.
Wenn man auf der Domain Einhörner.com landet und dann eine Seite mit GIFs mit geschmolzener Lava vorfindet, führt das unweigerlich zu Enttäuschung und Vertrauensverlust.
Diese Erfahrung bringt mich zu 5 fantastischen Tipps, die meine Checkliste für die Erstellung eines effektiven Hero-Banners bilden. Darf ich einen Schritt auslassen – ich glaube nicht!
Tipp 1: Der ideale Zeitpunkt für die Erstellung des Hero-Banners
Direkt nachdem der Header in Stein gemeißelt wurde (oder ein Elementor Template), arbeite ich an dem Banner. Es macht mir nichts aus, zu viel Zeit darauf zu verwenden, denn es hilft dabei, die Botschaft zu definieren, die auf der gesamten Website weitergetragen wird.
Wenn das Banner den Betrachter darüber informiert, dass du ein preisgekrönter Architekt bist, dann sollte der nächste Abschnitt dies besser untermauern, anstatt die Seite mit Bildern zu überhäufen, die nichts mit deinem Inhalt zu tun haben. Würdest du ein Produkt wieder kaufen, wenn der Inhalt nicht mit der Verpackung übereinstimmt? Nein, natürlich nicht.
Mit dem Banner kannst du das Fenster für das, was als Nächstes kommt, aufstoßen, und es wird die Entscheidungen für den Inhalt und andere Seiten beeinflussen. Das Hero-Banner war die Karotte, und jetzt ist der Service die Mahlzeit!
Dieses Banner demonstriert den Einsatz digitaler Technologie durch den Kunden, ohne komplex zu wirken oder mit dem Schwerpunkt der Überschrift auf Social Media Marketing in Konflikt zu geraten. Anstelle eines techniklastigen Bildes haben wir uns für ein Unternehmen entschieden, das mobile Geräte verwendet, um den Wiedererkennungswert zu erhöhen.
Tipp 2: Bildgröße und Reaktionsfähigkeit sind wichtig
Wenn dir die Nutzererfahrung wichtig ist, dann sind die Größe und die Reaktionsfähigkeit der Bilder entscheidend. Je nach dem von dir gewählten Bildtool sollte ein Querformat von mindestens 1920 x 1080 Pixeln der Ausgangspunkt sein. Strebe die beste Auflösung an, die du erreichen kannst, wenn dein Gehirn auf das Farbschema der Website fixiert ist. Wenn das Farbthema der Website rot ist, solltest du dich von blau angedeuteten Bildern fernhalten, es sei denn, du planst eine kontrastreiche Wirkung. Und weiche bitte nicht auf die Bildkomprimierung aus. Denke immer daran, PNG bei Bedarf in JPG oder das eventuelle WebP-Format zu konvertieren.
Das Einrichten des Bildes innerhalb des Banners ist ein wunderbarer Spaß, wenn es darum geht, zu entscheiden, ob das Bild gescrollt oder fixiert werden soll. Wer hat nicht schon einmal damit verbracht, mit den Optionen herumzuspielen? Achte aber immer darauf, dass der Text und das Bild sich gegenseitig ergänzen sollten.
Das erhabene Bild steht im Einklang mit dem Branding und sollte die Besucher so verlocken, dass sie tiefer einsteigen wollen. Egal, wie groß der Bildschirm ist, die Schokolade steht hinter den Überschriften und kämpft nicht um Aufmerksamkeit.
Nur weil es auf dem Desktop funktioniert, kann man leicht mit den Schultern zucken, wenn das Bild in der mobilen Ansicht seine Wirkung verliert. Keine Sorge, Elementor bietet die Möglichkeit, ein alternatives Bild für die mobile Version hinzuzufügen, damit du nicht einen separaten Abschnitt für die mobile Version erstellen musst.
Klicke im mobilen Modus auf das Hintergrundbild des Abschnitts und füge ein Bild in angemessener Größe hinzu. Mein schneller Tipp ist, eine Kopie des Originalbildes hinzuzufügen und dann die Größe mit WordPress‘ Skalierung und Beschneidung anzupassen, um das Hochformat-Layout zu erhalten.
Das Hintergrundbild für die mobile Ansicht hat eine alternative Größe von 400px x 700px im Vergleich zum Desktop-Bild von 1920px x 1080px, was eine bessere Darstellung der Überschriften ermöglicht. Die Responsivität sollte immer auch die Schriftgrößen mit einbeziehen, und ich empfehle die Verwendung von REM anstelle von Pixeln für die Größenbestimmung, um den Inhalt des Banners besser zugänglich zu machen. Unten sehen Sie das Endergebnis auf der Grundlage der alternativen Bilder.
Tipp 3: Schieberegler und Karussells sollten eher unterhalb des Falzes als auf dem Banner zu sehen sein
[Dieses Argument hält sich hartnäckig, obwohl ich der festen Überzeugung bin, dass das Zeitalter der Schieberegler, das vor einem Jahrzehnt aufkam, für das Hero-Banner nicht zu empfehlen ist.
[Moment mal, Schieberegler können auch an anderen Stellen der Homepage eingesetzt werden, insbesondere unterhalb der Falz (das ist der untere Teil der Seite, bevor du auf deinem Gerät nach unten scrollst). Schieberegler verursachen Ladeverzögerungen auf deiner Seite, und selbst wenn sie superschnell geladen wird, muss der Betrachter möglicherweise viele Folien ansehen, um die gesamte Botschaft zu verstehen. Du könntest sein Interesse verlieren, bevor er den Höhepunkt erreicht hat, ganz zu schweigen davon, ob du genug aussagekräftige Sätze und Bilder hast, um den Schwung aufrechtzuerhalten.
Brauchten wir drei Folien, um einfach zu sagen: „Wir zeigen dir, wie du in 3 einfachen Schritten tanzen kannst“? Und stelle dir vor, der Betrachter sieht Folie 2 vor Folie 1; nun, in diesem Fall ist die Reihenfolge völlig durcheinander.
Wir haben an einer Website gearbeitet, bei der die Bilder in Farbe und Qualität so unterschiedlich waren, dass mich die Vorgabe von 12 Folien verrückt gemacht hat. Nur weil zwanzig andere Websites das so machen, heißt das nicht, dass du diesem Weg folgen musst. Wenn die Beweise stichhaltig sind, solltest du es tun, aber bedenke die Verzögerung, die du dadurch in Kauf nehmen musst.
Ich fordere dich auf, die Ergebnisse mit dem Schieberegler oberhalb und unterhalb des Falzes zu überprüfen, und der Unterschied wird deutlich sein. Das Gleiche gilt für Videohintergründe oder animierte GIFs, bei denen das „Lazy Loading“ auf alle Bilder angewandt wurde; du wirst einen Rückgang des %-Scores feststellen.
Tipp 4: Die Wichtigkeit der Seitengeschwindigkeit und der 3-Sekunden-Konversion
Nicht optimierte Bilder beeinträchtigen das Laden der Homepage, was zu einem Rückgang der Seitengeschwindigkeit führt, und letztlich dazu, ob der Besucher auf der Website bleibt. Homepages mit einem großen Banner, vielen Schiebereglern und mehreren Schriftfamilien erhöhen die Wahrscheinlichkeit, dass die 3-Sekunden-Regel nicht eingehalten wird.
Zweideutige Kommentare wirken sich ebenfalls auf die Konversion aus. Wenn das Banner nicht zu dem Grund passt, der den Betrachter auf deine Website geführt hat, ist die Vertrauensgleichung hinfällig. Wähle deine Formulierungen sorgfältig. Bringe es auf den Punkt. Wecke das Interesse des Besuchers, weiter zu gehen.
Google versteht die Ungeduld der Menschen und hat deshalb die Core Web Vitals ins Leben gerufen. Ich kann nicht anders, als die Seitenwerte regelmäßig zu testen, wenn ich Abschnitte erstelle. Wenn ich Bilder optimiere, dafür sorge, dass Schriftarten vorgeladen sind, und nicht zu viel Text einfüge, kann ich verhindern, dass Besucher bei der Ankunft das Schiff verlassen.
Immer wieder erlebe ich, dass Websites beim Desktop-Score 98+ % erreichen, obwohl man alles tun sollte, um beim Mobile-Score 90+ % zu erreichen, denn 70 % der Besucher kommen von diesen Geräten.
Was oberhalb des Falzes geschieht, wirkt sich erheblich auf den Score aus, und deshalb rate ich dazu, Slider/Karussells unterhalb des Falzes einzusetzen. Wenn die gesamte Überschrift des Banners den Betrachter dazu zwingt, nach unten zu scrollen, ist das zu viel verlangt.
Um die Konvertierung abzurunden, wird der Call-to-Action-Button oft als einfacher „Kontakt“- oder „Mehr sehen“-Link missverstanden, obwohl er in Wirklichkeit eine Botschaft enthalten kann, die den Betrachter konvertiert. Anstatt „Mehr sehen“ zu sagen, solltest du die Schaltfläche in eine aktivere Aufforderung umwandeln, z. B. „Finden Sie das beste Design für Sie.
Tipp 5: Setze SEO-Schlüsselwörter ein und entwerfe eine aussagekräftige Überschrift
Es ist sehr wichtig, dass die Überschriften des Banners für Suchmaschinen relevant sind und auf die Basis der Website verweisen. Schlüsselwörter sind ein wichtiger Bestandteil von SEO. Überschriften ohne Schlüsselwörter sind wie ein Auto ohne Räder (was in Ordnung ist, wenn Sie es zu einem einzigartigen Gartenstudio umgebaut haben).
In den entscheidenden ersten 3 Sekunden, wenn die Besucher auf deiner Website ankommen, werden sie auf die Überschrift achten. Prägnante und gefühlsbetonte Worte, die eine Lösung aufzeigen oder sich in ein Problem einfühlen, können den Betrachter fesseln. Abhängig von der Domain oder dem Versprechen, das im Google-Snippet gemacht wird, kann die Überschrift die Besucher besser dafür belohnen, dass sie auf Ihre Website klicken.
Es besteht die Gefahr, dass die Überschriften verwässert werden und an Wirkung verlieren, wenn sie mit Schlüsselwörtern unterlegt werden. Achte also darauf, dass der Text bei der Übermittlung unnatürlich klingt. Spreche ihn laut aus und überdenke ihn, wenn du die Worte nicht verstehst.
Ein gängiger Trick ist das Einfügen von Kraftwörtern in Verbindung mit Zahlen, die zu einem Versprechen führen, das nur eingelöst werden kann, wenn der Leser weiterliest. Einzelne Sätze mit weniger als 10 Wörtern sind stärker als ein langer Absatz. Ein gutes Beispiel sind Nachrichtenseiten mit hohen Konversionsraten.
Obwohl das Schlüsselwort „Architekt“ nur in der Zwischenüberschrift vorkommt, sollte die Überschrift „In 3 erschwinglichen Schritten – wir entwerfen Ihr perfektes Zuhause“ eine ansprechende Garantie für das geben, was erwartet werden kann, wenn sie fortfahren.
Versuche zu definieren, was du von den Mitbewerbern unterscheidet. Verzichte auf hochtrabende Worte, denn niemand möchte ein Wörterbuch aufschlagen, um den Zusammenhang zu verstehen, und vermeide überstrapazierte Klischees und Slogans.
Die Aufforderung „Holen Sie sich den Bauplan“ sollte den Betrachter dazu veranlassen, genau das zu tun, nachdem er von den Worten „erschwinglich“ und „perfektes Zuhause“ gefesselt wurde. Lasse das Herz höher schlagen, ohne wie eine überspielte Schallplatte zu klingen.
Halte deinen Hero-Bereich frisch und einladend
Wenn ein Hero-Banner genug Fantasie und durchdachte Formulierungen aufweist, um den Betrachter davon abzuhalten, das Fenster zu schließen, dann bist du auf dem richtigen Weg. Halte sie stets einfach und sorge dafür, dass die Botschaft klar und deutlich zu weiteren Aktionen auffordert. Und scheue dich nicht, sie regelmäßig zu wechseln, mindestens alle zwei Monate. Sonst verlieren die wiederkehrenden Besucher den anfänglichen Anreiz. Denn so wie sich die Basis der Website ändert, sollte sich auch das Banner ändern.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/elementor-hero-banner
