Du entdeckst eine Webseite und denkst Dir: Genau so etwas würde ich gerne auf meiner eigenen Startseite haben. Vielleicht gefällt Dir ein großes Hintergrundbild oder die Anordnung von Überschrift und Button. Doch dann stellst Du fest: Die Vorlage lässt sich gar nicht in Divi oder WordPress importieren. Heißt das, Du musst auf die Gestaltung verzichten? Nein. Du kannst Dir einzelne Ideen als Inspiration nehmen und daraus mit Divi 5 einen eigenen Bereich entwickeln. Wir schauen uns an, welche Entscheidungen dahinterstecken und worauf Du bei Deinem eigenen Hero-Bereich achten solltest.
Was ist ein Hero-Bereich überhaupt?
Der Hero-Bereich ist meist der erste große Inhaltsbereich, den Besucher oben auf einer Webseite sehen. Häufig besteht er aus einem Bild oder einer Farbfläche, einer Überschrift, einem kurzen Text und einem Button. Er muss nicht spektakulär sein. Viel wichtiger ist, dass Besucher schnell verstehen, worum es auf Deiner Seite geht.
Stell Dir vor, jemand öffnet Deine Webseite zum ersten Mal. Diese Person kennt Dein Angebot vielleicht noch gar nicht. Dann sollte der erste Blick drei Fragen beantworten:
➡️ Bin ich hier richtig?
➡️ Was bekomme ich hier?
➡️ Was kann ich als Nächstes tun?
Ein schöner Hintergrund allein reicht dafür nicht aus. Deshalb lohnt es sich, zunächst über den Inhalt nachzudenken und erst danach über besondere Formen oder Effekte.
Ein Design als Inspiration nutzen, statt die ganze Vorlage zu kopieren
Wenn Dir eine Vorlage oder eine Webseite gefällt, übernimm nicht einfach die gesamte Gestaltung und auch keine fremden Bilder oder Texte. Ich schaue mir zuerst an, was mich an dem Design besonders anspricht. Anschließend überlege ich, wie ich diese Idee mit meinen eigenen Inhalten und Farben umsetzen kann.
Das kannst Du genauso machen. Vielleicht gefällt Dir an einer Seite die Bildaufteilung, an einer anderen der Abstand zwischen Überschrift und Button. Du musst Dich nicht auf eine einzige Demo festlegen. Achte aber darauf, dass am Ende ein zusammenhängendes Design entsteht und Du keine fremden geschützten Grafiken oder Texte einfach übernimmst.
Welche Elemente braucht Dein Hero-Bereich?
Für den Anfang reichen oft vier Bestandteile: eine klare Überschrift, ein kurzer Erklärungstext, ein passendes Bild oder eine Hintergrundfläche und eine verständliche Handlungsaufforderung.
Die Überschrift: Sag zuerst, worum es geht
Eine Überschrift darf schön klingen. Sie sollte aber vor allem verständlich sein. Gerade wenn Du ein besonderes Design nachbaust, besteht die Gefahr, dass Du Dich zuerst auf die Optik konzentrierst und die Aussage erst danach einfügst. Frag Dich deshalb: Würde jemand, der mein Unternehmen nicht kennt, allein durch die Überschrift verstehen, was ich anbiete?
Wenn nicht, ergänze die fehlende Information im kurzen Text darunter. Für Deine Startseitentexte gibt es bei BigBiggerBusiness bereits eine eigene Anleitung.
Startseitentexte schreiben: Schritt für Schritt zum Entwurf
Der kurze Text: Gib Orientierung, ohne alles zu erzählen
Im Hero-Bereich musst Du nicht Dein gesamtes Angebot erklären. Ein oder zwei verständliche Sätze reichen oft aus. Weitere Informationen können darunter oder auf einer eigenen Angebotsseite folgen.
Der Button: Wohin soll der nächste Klick führen?
Ein Button ist eine Handlungsaufforderung. Oft wird dafür auch der Begriff „Call to Action“, kurz CTA, verwendet. Entscheidend ist, dass die Beschriftung zum Ziel passt. Eine Beschriftung wie „Mehr Infos“ ist oft wenig aussagekräftig. „Mehr über mich erfahren“ oder „Meine Angebote entdecken“ zeigt deutlicher, was Besucher nach dem Klick erwartet. Überlege, welcher nächste Schritt für Deine Besucher tatsächlich hilfreich ist.
So wird aus der Gestaltungsidee ein eigener Bereich in Divi 5
In Divi besteht eine Seite aus Sektionen, Zeilen und Modulen. Stell Dir den Aufbau wie ein Haus vor: Das gesamte Haus ist Deine Webseite. Die Sektionen sind die einzelnen Etagen. Mit den Zeilen teilst Du eine Etage in Räume beziehungsweise Spalten auf. Und die Module sind die Einrichtung – zum Beispiel Texte, Bilder oder Buttons. So kannst Du Dir leichter merken, welches Element welche Aufgabe übernimmt.Für einen einfachen Hero-Bereich brauchst Du zunächst eine Sektion und eine Zeile mit den passenden Modulen. Ein Hintergrundbild kannst Du je nach gewünschtem Aufbau auf der Sektion oder einem anderen geeigneten Element platzieren. Den Kreis aus meinem Beispiel gestalte ich als eigene, halbtransparente Fläche. Die Inhalte sollen darüber gut lesbar bleiben.
Desktop, Tablet und Smartphone: Ein Design muss sich anpassen
Was am großen Bildschirm harmonisch aussieht, kann auf einem schmalen Smartphone zu eng werden. Kontrolliere deshalb nicht nur, ob alles technisch sichtbar ist, sondern auch, ob sich die Seite angenehm lesen und bedienen lässt. Vielleicht braucht die Überschrift auf dem Handy eine kleinere Schrift. Vielleicht müssen Bilder anders zugeschnitten, Spalten untereinander angeordnet oder Abstände angepasst werden. Es ist auch in Ordnung, wenn eine besondere Desktop-Gestaltung mobil etwas einfacher aussieht.
Prüfe zusätzlich auf einem echten Smartphone. Die Vorschau im Builder ist hilfreich, ersetzt aber nicht jeden Praxistest.
Diese Fehler solltest Du beim Nachgestalten vermeiden
Fehler 1: Nur die Optik betrachten
Ein auffälliges Design hilft wenig, wenn Besucher Dein Angebot nicht verstehen.
Fehler 2: Fremde Texte und Bilder übernehmen
Nutze Ideen als Inspiration und arbeite mit eigenen oder rechtmäßig verwendeten Inhalten.
Fehler 3: Zu viele Effekte kombinieren
Ein starker gestalterischer Akzent reicht oft aus.
Fehler 4: Den Button ohne klares Ziel einsetzen
Beschriftung und verlinkte Seite sollten zusammenpassen.
Fehler 5: Die Mobilansicht vergessen
Gerade besondere Formen und Bilder benötigen auf kleinen Bildschirmen häufig Anpassungen.
Fehler 6: Direkt auf der veröffentlichten Startseite experimentieren
Nutze eine Entwurfs- oder Testseite und sichere bestehende Inhalte vor größeren Änderungen.
Checkliste für Deinen eigenen Hero-Bereich
- Besucher verstehen auf den ersten Blick, was ich anbiete
- Meine Überschrift und mein kurzer Text passen zusammen
- Ich verwende eigene oder rechtmäßig nutzbare Bilder und Inhalte
- Mein Button hat eine verständliche Beschriftung und das richtige Linkziel
- Schrift und Hintergrund haben ausreichend Kontrast
- Die Gestaltung passt zu meinen Farben und meinem Unternehmen
- Auf dem Smartphone bleibt alles lesbar und bedienbar
- Ich habe den Bereich außerhalb des Divi Builders geprüft
- Ich habe den Button tatsächlich angeklickt und getestet
Häufige Fragen zum Hero-Bereich mit Divi 5
Brauche ich eine fertige Divi-Vorlage, um einen Hero-Bereich zu erstellen?
Nein. Du kannst einen Bereich mit Sektionen, Zeilen und Modulen selbst aufbauen. Eine passende Divi-Vorlage kann Dir Arbeit abnehmen, ist aber keine Voraussetzung
Kann ich eine Vorlage von einer anderen Webseite direkt in Divi importieren?
Nicht unbedingt. Eine Vorlage für einen anderen Page Builder, beispielsweise Elementor, ist nicht automatisch mit Divi kompatibel. Du kannst Dich aber von ihrer Gestaltung inspirieren lassen und eigene Elemente in Divi erstellen
Muss mein Hero-Bereich ein großes Bild enthalten?
Nein. Auch eine ruhige Farbfläche mit einer verständlichen Überschrift und einem passenden Button kann gut funktionieren. Entscheidend ist, was zu Deinen Inhalten passt
Sollte der Button direkt zu einem Buchungs- oder Kontaktformular führen?
Nicht immer. Wenn Besucher Dein Angebot zuerst kennenlernen müssen, kann eine Informationsseite der sinnvollere nächste Schritt sein. Das Linkziel sollte zur Erwartung passen, die Du mit dem Button weckst
Muss der Hero-Bereich auf dem Smartphone genauso aussehen wie am Computer?
Nein. Wichtig ist, dass die Inhalte auch auf kleineren Bildschirmen verständlich und gut bedienbar bleiben. Dafür darfst Du Abstände, Schriftgrößen und Anordnung anpassen
Fazit: Eine gute Idee wird erst mit Deinen Inhalten zu Deinem Design
Du musst nicht jede schöne Vorlage kaufen oder importieren können. Manchmal reicht es, einen einzelnen Bereich genauer anzuschauen und zu überlegen, was daran funktioniert.
Wenn Du das ebenfalls ausprobieren möchtest, schau Dir mein YouTube-Video an. Dort zeige ich die praktische Umsetzung mit Divi 5. Und wenn Du noch dabei bist, den grundsätzlichen Aufbau Deiner Webseite zu planen, hilft Dir mein Beitrag „Webseiten-Layout auswählen“ weiter.
Webseiten-Layout auswählen: So findest Du das passende Layout
Du weißt noch nicht, welche Inhalte Deine Webseite braucht? Dann nutze mein kostenloses Workbook „Dein roter Faden“.
