{"id":50933,"date":"2023-01-26T07:12:09","date_gmt":"2023-01-26T15:12:09","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=50933"},"modified":"2025-01-16T17:38:19","modified_gmt":"2025-01-17T01:38:19","slug":"startseiten-heldendesign","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/startseiten-heldendesign\/","title":{"rendered":"Wie man eine aufmerksamkeitsstarke Homepage-Heldensektion gestaltet (+25 Beispiele)"},"content":{"rendered":"\n

Wenn Sie m\u00f6chten, dass neue Besucher weiterhin Ihre Webseite betrachten, m\u00fcssen Sie schnell ihre Aufmerksamkeit gewinnen. Ohne ansprechenden Inhalt oberhalb der Falz k\u00f6nnten die Nutzer gelangweilt sein, bevor sie Ihre Produkte anschauen oder Ihre Blogbeitr\u00e4ge lesen k\u00f6nnen.<\/p>\n\n\n\n

Gl\u00fccklicherweise k\u00f6nnen Sie ein Heldenbild als erstes visuelles Element auf Ihrer Website verwenden. Wenn Sie hochwertige Fotos, einzigartige Schriftarten<\/a> und ein poliertes Layout einbeziehen, k\u00f6nnen Sie bei Besuchern einen fantastischen ersten Eindruck hinterlassen.<\/p>\n\n\n\n

In diesem Beitrag erkl\u00e4ren wir, was ein Hero-Bild ist und wie Sie eines f\u00fcr Ihre Website gestalten k\u00f6nnen. Dann zeigen wir Ihnen 25 Beispiele, um etwas Inspiration zu bieten. Fangen wir an!<\/p>\n\n\n\n

Was ist ein Held?<\/h2>\n\n\n\n

Ein Held ist ein gr\u00f6\u00dferes Banner, das oben auf einer Website \u00fcber dem Falz angezeigt wird. Dies ist das erste Element, das Besucher \u00fcber dem Falz sehen werden. Es zeigt typischerweise ein Foto, Video, Grafik oder Illustration zusammen mit einer Aussage oder einem CTA, um Besucher sofort zu fesseln.<\/p>\n\n\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

Was ist ein Held?<\/h3>\n

Ein Heldbild oder Hero-Bereich ist ein gro\u00dfes Banner, das oben auf einer Website angezeigt wird. Es kann das erste Element sein, das Besucher aufgrund seiner prominenten Platzierung sehen.<\/p>\n \n Weiterlesen <\/a>\n\n<\/div>\n\n\n\n

Hero-Bilder sind eine gro\u00dfartige M\u00f6glichkeit, Aufmerksamkeit zu erregen. In den ersten entscheidenden Sekunden des Besuchs Ihrer Webseite m\u00f6chten die Nutzer von einem hochwertigen Webdesign<\/a> fasziniert werden. Helden k\u00f6nnen sofort einen positiven Eindruck Ihres Unternehmens oder Blogs hinterlassen.<\/p>\n\n\n\n

Da sie oben auf der Startseite<\/a> erscheinen, k\u00f6nnen Hero-Sektionen einen gro\u00dfen Einfluss auf Ihre Website haben. Wenn sie richtig eingesetzt werden, k\u00f6nnen sie alles vermitteln, was Besucher \u00fcber Ihre Marke wissen m\u00fcssen. Dies kann verhindern, dass neue Besucher gleich zu Beginn mit zu vielen Informationen \u00fcberladen werden.<\/p>\n\n\n\n

In einem Hero-Bereich k\u00f6nnen Sie einen Aufruf zum Handeln (CTA)<\/a> einbinden, um Benutzer zu motivieren, eine andere Seite auf Ihrer Website zu besuchen. Interaktive Hero-Bereiche k\u00f6nnen auch Karussells, Schieberegler und andere Animationen<\/a> enthalten. Letztendlich sollen Hero-Bilder attraktiv, ansprechend und auff\u00e4llig sein.<\/p>\n\n\n\n

Wie man eine aufmerksamkeitserregende Homepage-Heldenfigur gestaltet<\/strong><\/h2>\n\n\n\n

Nun, da Sie wissen, was Hero-Bilder sind, lassen Sie uns einige der besten Praktiken f\u00fcr deren Erstellung besprechen. Auf diese Weise k\u00f6nnen Sie Hero-Header entwerfen, die Benutzer auf Ihre Website ziehen.<\/p>\n\n\n\n

1. Hochwertige Bilder finden<\/h3>\n\n\n\n

Das Hero-Bild wird das Erste sein, was Besucher auf Ihrer Homepage sehen, daher m\u00fcssen Sie ein hochwertiges Foto finden. Wenn das Bild zu k\u00f6rnig ist oder nicht f\u00fcr schnelles Laden komprimiert wurde, kann dies die Benutzererfahrung (UX)<\/a> auf Ihrer Website beeintr\u00e4chtigen.<\/p>\n\n\n\n

Um Bilder zu beschaffen, k\u00f6nnen Sie Stockfotos auf Websites wie Unsplash<\/a> verwenden. Diese Plattform bietet kostenlose hochaufl\u00f6sende Fotos ohne Urheberrechtsschutz:<\/p>\n\n\n\n

\"Unsplash<\/figure>\n\n\n\n

Denken Sie daran, dass Sie auch Grafikdesigns und Videos anstelle von statischen Fotos verwenden k\u00f6nnen. Dies kann Ihrer Website helfen, sich von Ihren Mitbewerbern abzuheben.<\/p>\n\n\n\n

Zusammen mit Stockbildern bietet Pexels<\/a> viele kostenlose Videos, die Sie durchsuchen k\u00f6nnen. Wie bei Bildern k\u00f6nnen Sie die Gr\u00f6\u00dfe vor dem Herunterladen anpassen:<\/p>\n\n\n\n

\"Pexels<\/figure>\n\n\n\n

F\u00fcr Grafikdesigns empfehlen wir die Verwendung eines flexiblen Tools wie Canva<\/a>. Dieses kommt mit Tausenden von Startvorlagen f\u00fcr Hero-Banner:<\/p>\n\n\n\n

\"Canva-Website-Held\"<\/figure>\n\n\n\n

Zuletzt stellt WordPress vordefinierte Kopfzeilen in seiner Block Pattern Library<\/a> zur Verf\u00fcgung. Beim Entwerfen Ihrer Homepage k\u00f6nnen Sie diese vollfl\u00e4chigen Hero-Bereiche einfach einf\u00fcgen. Wenn Sie sich entscheiden, diese manuell zu erstellen, m\u00fcssen Sie stattdessen HTML-Container<\/a> verwenden:<\/p>\n\n\n\n

\"Wordpress-Muster\"<\/figure>\n\n\n\n

Denken Sie daran, w\u00e4hrend Sie nach Bildern suchen, sollten Sie sich an das Branding Ihrer Website<\/a> erinnern. Auch wenn Sie ein hochwertiges Foto finden, stellen Sie sicher, dass es f\u00fcr Ihre Nische relevant ist.<\/p>\n\n\n\n

Zus\u00e4tzlich sollten Sie \u00fcberlegen, ob Sie eine Emotion hervorrufen, ein Produkt bewerben oder ein anderes spezifisches Ziel erreichen m\u00f6chten. Und nat\u00fcrlich, wenn es angemessen ist und Ihr Budget es zul\u00e4sst, k\u00f6nnten Sie erw\u00e4gen, einen professionellen Fotografen zu engagieren, um Bilder Ihrer Produkte oder Dienstleistungen zu erstellen.<\/p>\n\n\n\n

2. \u00dcberzeugenden und informativen Text hinzuf\u00fcgen<\/strong><\/h3>\n\n\n\n

Viele Websites zeigen nicht nur ein Bild im Hero-Bereich. Um neue Leads zu generieren<\/a> und Konversionen zu erzielen, f\u00fcgen sie oft einen Text\u00fcberlagerung hinzu. Durch das Einbeziehen von Produktwerbungen und Handlungsaufforderungen kann ein Hero die gleichen Ziele wie eine Landingpage<\/a> erreichen.<\/p>\n\n\n\n

Obwohl Ihr Heldentext je nach Ihren Zielen variieren sollte, sind hier einige Dinge, die Sie beim Verfassen Ihres Textes beachten sollten:<\/p>\n\n\n\n