Der Search Banner Background Hero nutzt ein vollflächiges Hintergrundbild, während eine linksbündige Überschrift und eine Suchleiste direkt im Fokus platziert werden, damit Kandidaten sofort passende Jobs finden können.
Zusätzlich können Sie unter der Suchleiste eine Liste mit „Quick Links“ für häufig gesuchte Begriffe einfügen.
So fügen Sie den Hero - Search Banner Background 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 - Search Banner Background“ 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 Hauptüberschrift ein, die direkt über der integrierten Suchleiste platziert wird. Sie können dann rotierende Wörter für den Header hinzufügen, um einen dynamischen Schreibmaschinen-Effekt zu erzeugen; geben Sie dazu einfach Ihre Wörter oder Phrasen ein und drücken Sie nach jedem Begriff die Eingabetaste, um sie der Sequenz hinzuzufügen.
Zusätzlich können Sie beliebte Suchbegriffe einfügen und verlinken, sodass diese zur einfachen Navigation direkt unter der Suchleiste erscheinen. Laden Sie schließlich Ihr Hintergrundbild hoch und geben Sie einen passenden Alternativtext an, um sicherzustellen, dass Ihr Inhalt für alle zugänglich ist.
So fügen Sie rotierende Wörter hinzu
Um Ihren Header dynamisch zu gestalten, können Sie beliebig viele Wörter hinzufügen. Jede neue Zeile steht für ein neues Wort in der Animation. Tippen Sie einfach ein Wort ein und drücken Sie die Eingabetaste (Enter), um zum nächsten Wort zu springen:
Design und Layout anpassen
Im nächsten Schritt verfeinern Sie die Optik Ihres Elementes. Nutzen Sie den LP Row Margin, um den vertikalen Abstand einzustellen und die gewünschte Struktur auf der Seite zu schaffen. Über die Overlay-Transparenz steuern Sie die Helligkeit des Hintergrundbildes: Während 100 % den Originalzustand darstellen, wird das Bild bei 0 % komplett schwarz angezeigt. Dies stellt sicher, dass Ihr Text jederzeit optimal lesbar bleibt.
Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie oben auf der Seite 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.