In the first steps, you use the Section components to build your landing page. Section components are transparent elements in which other components can be placed.

In most cases, the Section is the first component. It is a transparent base component. You can fill a section with other components such as a container, an image, or a text element. You can give a section a background color, a size, and different spacings.

The Footer component works basically the same as Sections and have the same settings. The difference is only the additional function for SPAs (Single Page Applications) if they are enabled in the web page settings. Here, the Footer component is used to mark the general content that can be seen on each page.

💡 Since with SPAs only the content is exchanged and never the page is changed completely, components marked with SPA are excluded from the exchange of content when changing pages.

The header (SPA) component usually contains the navigation and any other elements that are to be displayed in the header area on each page of an SPA (Single Page Application).

💡 Since with SPAs only the content is exchanged and never the page is changed completely, components marked with SPA are excluded from the exchange of content when changing pages.

In the Background Pattern section, you can add a background image that is repeated horizontally and vertically like a tile and fills the entire background of the component.

You can use the grid to divide your content horizontally. First use the grid and then at least two grid items.

With grid items, you create columns to separate content horizontally. You can put as many grid items as you want in a grid. Each grid item within a grid can have its own size.

With the use of containers, content elements such as texts, buttons, images or grids can be positioned flexibly and responsively. Nevertheless, a container should be located within a section. Additional components can then be added to a container.

Content components describe content-based components such as texts, buttons and images.

Create exciting headlines and continuous texts with the Text component. Click on a text to open the text editor. Here you can choose colors, headlines and assignments.

Use the Image component to add images. Images and GIFs can be selected from the Media Library. Royalty-free images can also be used.

Select this component to use linked images.

Link to your website or landing page using buttons. In the component settings, you can select different button types and design them according to your wishes in the Styles menu.

The Social Wall can be linked to a list that receives data from a social media page (e.g. Facebook or Instagram). It renders the records of the list using a customizable template and updates itself automatically. The default template should be sufficient in most cases.

Masonry is a simplified grid that displays the given content side by side instead of one below the other. It should be noted that the content is not divided into horizontal rows. Thus, it may cause the individual columns to be unaligned, creating stairs. The Masonry component is usually used to display images that have different dimensions.

Embed a video from YouTube or Vimeo into your landing page. In the component settings, you only need to add the link to the video.

In contrast to the image component, you can insert a video file here. Simply upload the file from the Media Library on your desktop.

Build attractive forms and embed them into your landing pages to generate new leads.

A form should first contain this component. All other form elements are then placed in the form container. In the Form Container settings, you can select a list to store the input.

With this component, you can create an input field so that users can enter their name or e-mail address.

The checkbox allows users to click on a response option. This allows them to easily check their gender or interests, for example. The checkbox can be displayed as a square or a circle.

This component has the same functions as the checkbox. In contrast to the component, the round box is displayed here for ticking.

Here, you can create a dropdown menu so that users only have to select their answer option. Users can select only one answer option.

This button is used to save the user's input. Add it at the end of each form.

Here, you can create a dropdown menu so that users only have to select their answer options. Users can select multiple answer options.

The component allows users to select a date, such as their date of birth.

Use this component if you want to allow users to upload a file such as their resume.

The navigation is placed above each landing page. It refers you to other subpages and helps to structure the whole website.

Navigations are usually marked as a reference. This creates a copy of the navigation under Favorites > References, which can then be used on all subpages. This is so that you don't have to maintain the navigation on every page when you make a change to it.

This component is the framework of the navigation. Place it above a landing page.

The individual subpages can be displayed and linked with this category in the navigation.

Add a dropdown menu if you have numerous subpages and want to categorize them.

A slideshow allows you to include multiple images. The images are displayed in a gallery. With the help of arrows, you can switch between the images. Use this component first and use “Slideshow Item” for the single slides.

Put this component into a “Slideshow Container”. Add as many slideshow items as you like. In the single items you can place e.g. components.

Your content can be displayed not only in the form of grids, images or individual sections, but also with the help of tabs. Here, the content is organized into individual tabs. A user can then select a specific tab to open the corresponding text. This mechanic can help you if you want to display a lot of text on one page.

First, use the “Tab Container” and add as many “Tab Items” as you like. In a tab item you can add content elements like texts. Buttons, images as well as containers can be added. In the component settings, you can also define the title of the tab category.

A decorator can be added to any container and is mainly used to add decorative images to the edge of the container without interfering with or moving the rest of the content.

With this component, you can add pop-ups. Add content elements like text or buttons to this component. You can also add a registration form here. Use the form components and the form container. In the component settings of the modal, you can define at which time the pop-up should appear.