Mit dem Split with Screen Hero können Sie ein spezifisches Bild oder einen Screenshot direkt im Header-Bereich präsentieren. Er bietet ein geteiltes Layout, bei dem Sie Ihr Bild wahlweise auf der linken oder rechten Seite platzieren können.
So fügen Sie den Hero - Split with Screen hinzu
Navigieren Sie im Backend zu Content > Landing Pages und wählen Sie die Seite aus, die Sie bearbeiten möchten. Um das Element zu Ihrer Seite hinzuzufügen, klicken Sie zunächst auf „Seitenabschnitt hinzufügen“. Wählen Sie in der Übersicht die Kategorie „Hero Section“ aus und fügen Sie das spezifische Element „Hero- Split with Screen“ hinzu, indem Sie auf die Schaltfläche „Diese Zeile hinzufügen“ klicken.
Inhalte Konfigurieren
Sobald die Zeile hinzugefügt wurde, können Sie den Inhalt anpassen. Geben Sie zuerst Ihre Überschrift sowie einen "Tag-Text" ein, der direkt darüber erscheint. Zusätzlich können Sie einen weiteren Text hinzufügen, der direkt neben dem Tag angezeigt wird. Fügen Sie einen Text unter der Überschrift ein, welcher verlinkt werden kann, um als Call-to-Action zu dienen.
Als Nächstes haben Sie die Möglichkeit, eine Suchleiste hinzuzufügen. Laden Sie schließlich Ihren Screenshot oder Ihr Bild hoch und geben Sie einen passenden Alternativtext an, um sicherzustellen, dass Ihr Inhalt barrierefrei und professionell dargestellt wird.
Design und Layout anpassen
Im nächsten Schritt verfeinern Sie die Optik Ihres Heros. Sie können wählen, ob Ihr Bild auf der linken oder rechten Seite des Bildschirms angezeigt werden soll, um das Layout optimal anzupassen. Zudem lassen sich die Farben für den Tag-Text und den Text unter der Überschrift individuell konfigurieren, damit diese perfekt zu Ihrem Branding passen.
Nutzen Sie den LP Row Margin, um den vertikalen Abstand einzustellen und die gewünschte Struktur auf der Seite zu schaffen. Sobald Sie mit den Einstellungen zufrieden sind, klicken Sie am oberen Seitenrand auf „Speichern“, um Ihre Konfiguration zu sichern.
Endergebnis
Um Ihre Arbeit zu überprüfen, wechseln Sie einfach oben auf den Reiter „Ansicht (Frontend)“. Hier sehen Sie die Live-Ansicht Ihres Elements genau so, wie es Ihren Nutzern auf der Website angezeigt wird.