Mit Elementor Free eine Hero Section bauen

August 6, 2019

In diesem Tutorial zeigen wir dir wie du mit dem Elementor Pagebuilder in Free Version eine Hero Section mit Bildhintergund, einer Headline, einer Subheadline und einem Click-Trought-Button bauen kannst

Schritt 1: 1-spaltige Zeile mit Elementor erzeugen

Mit Klick auf das Plus Icon fügst du eine neue Zeile hinzu. Du benötigst eine 1-spaltige Zeile.

Schritt 2: Zeilenhöhe auf gesamten Bildschirm anpassen

In der linken Sidebar passt du die Zeilen höhe auf die gesamte Höhe des Bildschirms an. Die Spaltenposition bleibt auf „Mitte“. Mit der Spaltenposition bestimmst du wo der Inhalt angezeigt werden soll.

Schritt 3: Hintergrund Bild hinzufügen

Mit Klick auf den Tab „Stil“ kommst du zur Bearbeitung des Stils der Zeile. Hier fügst du in dem Reiter „Hintergrund“ den Hintergrundtyp „Klassisch“ das Hintergrundbild ein.

Schritt 4: Position des Hintergrundbildes bestimmen

In der linken Sidebar hast du nun verschiedene Einstellungsmöglichkeiten für dein Hintergrundbild. Position, Anhang, Repeat und Größe. Alle vier Einstellungen definieren die Position deines Bildes in der Zeile. Die Darstellung kann je nach Bild unterschiedlich sein. Es kommt darauf an welchen Bereich des Bildes du zeigen möchtest.

Schritt 5: Hintergrundüberlagerung

Klick auf den Reiter „Hintergrundüberlagerung“ um ein Overlay des Hintergrundbildes zu erzeugen. Das macht Sinn, wenn du ein helles Bild eingefügt und eine helle Schrift verwenden willst. Wähle den Hintergrundtyp „Klassisch“ und deine gewünschte Farbe. In diesem Beispiel verwenden wir schwarz #000000. Alle anderen Einstellungen kannst du so bestehen lassen.

Schritt 6: Überschrift Hinzufügen

Um weitere Widgets hinzuzufügen klicke in der linken Sidebar oben rechts auf das Icon mit den neun Kästchen.

Füge nun via Drag&Drop das Überschrift-Widget in die Zeile
Bearbeite in der linken Sidebar deine Überschrift und füge deinen Text ein
Richte die Überschrift mittig aus

Klicke auf das Tab „Stil“ und bearbeite dort den Stil deiner Überschrift.

Schritt 7: Subheadline hinzufügen

Klicke wieder auf das Icon mit den neun Kästchen in der linken Sidebar um in die Widget-Übersicht zu gelangen. Gehe bitte genauso vor wie beim hinzufügen deiner Überschrift. Füge via Drag&Drop das Überschrift-Widget in die Zeile, unterhalb der Headline Füge deinen Text ein Richte die Überschrift mittig aus Passe das HTML-Tag auf p an Klicke auf den Tab „Stil“ und bearbeite den Stil deiner Subheadline.

Schritt 8: Button hinzufügen

Navigiere in der linken Sidebar auf das Icon oben rechts um in die Widget-Übersicht zu gelangen.

Ziehe via Drag&Drop das Button-Widget in die Zeile, unterhalb deiner Subheadline
Passe in der linken Sidebar die Button-Beschriftung an [Tipp: wähle eine Beschriftung mit einer klaren Handlungsaufforderung für den Besucher. Zum Beispiel „Jetzt klicken und…“. Platziere hier eine Begründungskonjunktion um dem Besucher zu sagen, was ihn nach dem Klick tolles erwartet.]

Richte deinen Button mittig aus
Wähle die Größe „Mittel“

Klicke auf den Tab „Stil“ um in die Stilbearbeitung deines Buttons zu gelangen.

Tipp für deine Hero Section

Setzt du die Hero Section direkt im ersten sichtbaren Bereich (Above-the-Fold) ein, kannst du bereits hier den Besucher überzeugen. Denke daran, dass du mit der Headline und der Subheadline den Klick auf den Button deinem Besucher „verkaufen“ musst.

Gehe hier in die Nutzenkommunikation und zeige dem Besucher direkt und ohne Umwege welchen Nutzen und welchen Vorteil er nach dem Klick auf den Button hat.

Uncategorized