Alle Kollektionen
Landing Pages
Landing Page Editor
Komponenten im Landing Page Editor
Komponenten im Landing Page Editor

Der Landing Pages Editor bietet unterschiedliche Komponenten zum Aufbau deiner Website.

Hannah Krüger avatar
Verfasst von Hannah Krüger
Vor über einer Woche aktualisiert

Der Landing Pages Editor bietet eine große Auswahl an vorgefertigten Komponenten. Mithilfe der Komponenten baust du deine Website per Drag & Drop auf.

In diesem Artikel:

Section

In den ersten Schritten verwendest du die Section-Komponenten, um deine Landing Page aufzubauen. Section-Komponenten sind transparente Elemente, in die weitere Komponenten platziert werden können.

Section

In den meisten Fällen ist die Section die erste Komponente. Sie ist eine transparente Basis-Komponente. In eine Section können andere Komponenten wie ein Container, ein Image oder ein Text-Element gefüllt werden. Du kannst einer Section eine Hintergrundfarbe, eine Größe und unterschiedliche Spacings verleihen.

Footer (SPA)

Die Footer-Komponente funktioniert grundsätzlich genauso wie Sections und haben die gleichen Einstellungen. Der Unterschied ist nur die zusätzliche Funktion bei SPAs (Single Page Applications), falls diese in den Webseiten-Einstellungen aktiviert sind. Hier dient die Footer-Komponente dazu, den allgemeinen Inhalt, der auf jeder Seite zu sehen ist, zu kennzeichnen.

💡 Da bei SPAs nur der Inhalt ausgetauscht wird und niemals die Seite komplett gewechselt wird, sind Komponenten, die mit SPA gekennzeichnet sind, von dem Austausch des Inhaltes beim Seitenwechsel exkludiert.

Header (SPA)

In der Header (SPA) Komponente befindet sich meistens die Navigation sowie etwaige andere Elemente, die in dem Kopfbereich auf jeder Seite einer SPA (Single Page Application) abgebildet werden sollen.

💡 Da bei SPAs nur der Inhalt ausgetauscht wird und niemals die Seite komplett gewechselt wird, sind Komponenten, die mit SPA gekennzeichnet sind, von dem Austausch des Inhaltes beim Seitenwechsel exkludiert.

Background Pattern

In der Background Pattern Section lässt sich ein Hintergrundbild hinzufügen, das wie eine Fliese horizontal und vertikal wiederholt wird und den gesamten Hintergrund der Komponente ausfüllt.


Layout

Grid

Mithilfe des Grids kannst du deine Inhalte horizontal unterteilen. Verwende zunächst das Grid und anschließend mindestens zwei Grid Items.

Grid Item

Mit Grid Items bildest du Spalten, um Inhalte horizontal zu trennen. Du kannst beliebig viele Grid Items in ein Grid setzen. Jedes Grid Item innerhalb eines Grid kann eine eigenständige Größe bekommen.

Container

Mit der Verwendung von Containern können Content-Elemente wie Texte, Buttons, Images oder Grids flexibel und responsive positioniert werden. Dennoch sollte ein Container innerhalb einer Section liegen. Zu einem Container können dann weitere Komponenten hinzugefügt werden.


Content

Content-Komponenten beschreiben Inhalts-basierende Komponenten wie Texte, Buttons und Images.

Text

Kreiere spannende Headlines und Fließtexte mit der Text-Komponente. Klicke auf einen Text, sodass sich der Text-Editor öffnet. Hier kannst du u.a. Farben, Headlines und Assignments auswählen.

Image

Nutze die Image-Komponente, um Bilder hinzuzufügen. Bilder und GIFs können aus der Media Library ausgesucht werden. Ebenso können lizenzfreie Images verwendet werden.

Image Linked

Wähle diese Komponente aus, um verlinkte Bilder zu verwenden.

Button

Verlinke mithilfe von Buttons auf deine Website oder Landing Page. In den Komponenten-Settings kannst du unterschiedliche Button Types auswählen und diese im Styles-Menü nach deinen Wünschen designen.

Social Wall

Die Social Wall kann mit einer Liste verknüpft werden, die ihrerseits Daten von einer Social Media Page empfängt (z. B. Facebook oder Instagram). Sie gibt die Datensätze der Liste mithilfe eines einstellbaren Templates wieder und aktualisiert sich automatisch. Das Default Template sollte in den meisten Fällen ausreichen.

Masonry

Masonry ist ein vereinfachtes Grid, das die gegebenen Inhalte nebeneinander darstellt anstatt untereinander. Dabei ist zu beachten, dass die Inhalte nicht in horizontalen Reihen eingeteilt sind. Es kann also dazu führen, dass die einzelnen Spalten nicht ausgerichtet sind, wodurch Treppen entstehen können. Die Masonry-Komponente wird in der Regel dafür verwendet, Bilder dazustellen, die unterschiedliche Dimensionen haben.

Youtube/Vimeo Embed

Binde ein Video aus Youtube oder Vimeo in deine Landing Page ein. In den Komponenten-Einstellungen muss nur der Link zum Video eingefügt werden.

Video

Im Gegensatz zur Image-Komponente kannst du hier eine Videodatei einfügen. Lade die Datei einfach über die Media Library von deinem Desktop hoch.


Form

Baue attraktive Formulare auf und binde sie in deine Landing Pages ein, um neue Leads zu generieren.

Form Container

Ein Formular sollte zunächst diese Komponente beinhalten. In den Form Container werden anschließend alle weiteren Form-Elemente platziert. In den Einstellungen des Form Containers kannst du eine Liste auswählen, die die Eingaben speichern soll.

Input

Mit dieser Komponente kannst du ein Eingabefeld erstellen, sodass User ihren Namen oder E-Mail-Adresse eingeben können.

Check Box

Durch die Checkbox können User eine Antwortoption anklicken. Hierdurch können sie z. B. ganz leicht ihr Geschlecht oder ihre Interessen ankreuzen. Die Checkbox kann als Quadrat oder Kreis dargestellt werden.

Radio Group

Diese Komponente hat dieselben Funktionen wie die Checkbox. Im Gegensatz zu der Komponente wird hier das runde Kästchen zum Ankreuzen dargestellt.

Select

Hier kannst du ein Dropdown-Menü anlegen, sodass die User ihre Antwortoption nur auswählen müssen. User können nur eine Antwortoption auswählen.

Submit Button

Mit dem Button werden die Eingaben der User gespeichert. Füge ihn am Ende jedes Formulars ein.

Multi Select

Hier kannst du ein Dropdown-Menü anlegen, sodass die User ihre Antwortoptionen nur auswählen müssen. User können mehrere Antwortoptionen auswählen.

Form Datepicker

Mit der Komponente können User ein Datum, wie z. B. ihr Geburtsdatum, auswählen.

Upload

Verwende die Komponente, wenn du es ermöglichen möchtest, dass die User eine Datei wie z. B. ihren Lebenslauf hochladen sollen.


Navigation

Die Navigation wird oberhalb jeder Landing Page platziert. Sie verweist du anderen Unterseiten und hilft, die gesamte Website zu strukturieren.

Navigationen werden in der Regel als Referenz markiert. Damit wird unter Favoriten > Referenzen eine Kopie der Navigation erstellt, die dann auf allen Unterseiten verwendet werden kann. Das dient dazu, dass man die Navigation nicht auf jeder Seite pflegen muss, wenn man eine Änderung an ihr vornimmt.

Navigation

Diese Komponente ist das Gerüst der Navigation. Platziere sie oberhalb einer Landing Page.

Link

Die einzelnen Unterseiten können mit dieser Kategorie in der Navigation dargestellt und verlinkt werden.

Dropdown

Füge ein Dropdown Menü hinzu, sofern du zahlreiche Unterseiten hast und diese kategorisieren möchtest.


Slideshow

Slideshow Container

Eine Slideshow ermöglicht dir, mehrere Bilder einzubinden. Die Bilder werden in einer Galerie dargestellt. Mithilfe von Pfeilen kann zwischen den Images gewechselt werden. Nutze zunächst diese Komponente und verwende für die einzelnen Slides „Slideshow Item“.

Slideshow Item

Setze diese Komponente in einen „Slideshow Container“. Füge beliebig viele Slideshow Items hinzu. In die einzelnen Items können dann z. B. Komponenten platziert werden.


Interactive Elements

Tab Container

Dein Content lässt sich nicht nur in Form von Grids, Images oder einzelnen Sections darstellen, sondern auch mithilfe von Tabs. Hier wird der Content in einzelne Tabs geordnet. Ein User kann dann einen bestimmten Tab auswählen, sodass der dazugehörige Text geöffnet wird. Diese Mechanik kann dir helfen, wenn du sehr viele Texte auf einer Seite darstellen möchtest.

Tab Item

Nutze zunächst den „Tab Container“ und füge in ihm beliebig viele „Tab Items“ hinzu. In einem Tab Item können dann Content-Elemente wie Texte. Buttons, Images sowie auch Container hinzugefügt werden. In den Komponenten-Settings kannst du auch den Titel der Tab-Kategorie festlegen.

Decorator

Ein Decorator kann in jeden Container gebaut werden und dient hauptsächlich dazu dekorative Bilder an den Rand des Containers zu bauen, ohne den restlichen Content zu behindern oder zu verschieben.

Intent Modal

Mit der Komponente kannst du Pop-ups einbinden. Füge in diese Komponente Content-Elementen wie Text oder Button. Du kannst hier auch ein Anmeldeformular einbinden. Nutze dafür die Form-Komponentem sowie den Form-Container. In den Komponenten-Einstellungen des Modals kannst du definieren, zu welchem Zeitpunkt der Pop-up erscheinen soll.

Hat dies Ihre Frage beantwortet?