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.

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.

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.

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.

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.

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

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.

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-Komponenten beschreiben Inhalts-basierende Komponenten wie Texte, Buttons und Images.

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.

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.

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

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.

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 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.

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.

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

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

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.

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

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.

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

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.

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

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

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

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

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.

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

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

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

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“.

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.

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.

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.

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.

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.