Bausteine

You can design your website by dragging and dropping building blocks, then editing them to fit your content and layout needs.

Add a building block

To add a block to a website page, access the page, click Edit, then drag and drop the desired building block into the appropriate location. Two types of building blocks are available: Categories and Inner Content. Inner Content building blocks can only be added into Categories building blocks.

When clicking on a category block, a popup appears, allowing you to select between multiple templates for each category.

Tipp

You can also search for a specific block in the Insert a block popup using the search bar.

Pop-up block selection

Once the category block is placed, you can drag and drop Inner content blocks within it. The Inner content blocks allow you to add elements, such as videos, images, social media buttons, etc., into pre-existing category blocks.

Bemerkung

Access to certain blocks requires the installation of their respective application or module (e.g., eCommerce for the Products block).

Example

Add all your social media accounts in one place with the inner content Social Media block. Toggle the switch on or off next to the desired platform and copy/paste your account URL.

Social Media inner content block

Formular

The Form block is used to collect information from website visitors and create records in your database, if applicable.

Beispiel eines Formularblocks

Aktion

By default, when the form is submitted, an email containing the information entered by the visitor is automatically sent. Depending on the apps installed on your database, additional actions that can automatically create records may become available. To choose a different action, click Edit, click the form, navigate to the Customize tab, and select the desired Action:

Bearbeitung eines Formulars zum Ändern der Aktion

By default, submitting the form redirects visitors to a Thank you page. Use the URL field to send them to a different page. Alternatively, you can choose not to redirect and keep them on the form’s page by selecting Nothing or Show Message in the On Success field.

Felder

To add a new field to the form, navigate to the Customize tab and click the + Field button next to the Form or Field section. To modify the new (or any other) field on the form, select the field, then use the options available in the Field section of the Customize tab. For example, you can:

  • Change the field Type.

    Tipp

    Es ist auch möglich, ein Vorhandenes Feld aus einer Datenbank auszuwählen und die darin enthaltenen Daten zu verwenden. Welche Felder verfügbar sind, hängt von der gewählten Aktion ab. Der Datenbank hinzugefügte Eigenschaftsfelder können ebenfalls verwendet werden.

    Alle Arten von Formularfeldern

    Einige Felder sind optisch ähnlich, aber die eingegebenen Daten müssen einem bestimmten Format entsprechen.

  • Edit the field’s Label and adapt its Position.

  • Enable a field Description. Click the default description on the form to modify it.

  • Add a Placeholder or Default value.

  • Specify if the field is Required.

  • Edit the field’s visibility settings.

  • Add an animation.

Once you have made the desired changes, click Save.

Code einbetten

Durch das Einbetten von Code können Sie Inhalte von Drittanbietern in eine Seite integrieren, z. B. Videos von YouTube, Karten von Google Maps, Social-Media-Beiträge von Instagram usw.

After adding the block to a page, click the block, then go to the Customize tab and click Edit. Replace the placeholder code with your custom embed code.

Hinzufügen des Links zum eingebetteten Code, auf den Sie hinweisen möchten

Warnung

Do not copy/paste code you do not understand, as it could put your data at risk.

Move, switch, or delete a building block

Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it.

Change the block order by clicking (chevron up) or (chevron down) and move the block on the page by clicking (arrows). When you have multiple columns, move a column to the left or right by clicking (chevron left) or (chevron right).

To delete a block, click (trash).

Extend margins on building block

Tipp

Quickly change the block category by clicking (exchange).

Edit a building block

To edit the content of a building block, click on it and go to the Customize tab. Available customization options vary depending on the type of block selected.

Hintergrund

To modify the background of a building block, select the block, go to the Customize tab, and click the color dot or another Background option. You can change the color and/or add an image, video, and/or shape. Once you’ve selected a shape, new fields appear to allow you to customize the shape.

Tipp

  • Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.

    Change block position
  • To resize a block, click and drag the dots around its edges to adjust it as needed.

    Adapt block size

Siehe auch

General theme

Layout: Raster und Spalten

For most building blocks, you can choose between two layout styles: grid or columns (cols). To change the default layout style, click the block, go to the Customize tab, and set the Layout field to Grid or Cols.

Raster

The Grid layout allows you to reposition and resize elements, such as images or text, by dragging and dropping them. When Grid is selected, additional options are available to Add Elements by clicking Image, Text, or Button.

Wenn das Rasterlayout ausgewählt ist, wählen Sie ein Bild aus und ziehen Sie es per Drag-and-drop an die gewünschte Stelle.

Spalten

Choosing the Cols layout allows you to determine the number of elements per line within the block. To do so, select the block to modify, click the dropdown next to the Cols field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Customize tab.

Bemerkung

By default, on mobile devices, only one element (column) is visible per line to ensure that content remains easily readable and accessible on smaller screens. To adjust the value, click the (mobile icon) at the top of the website editor and adapt the number of columns. Shapes are hidden by default on mobiles.

Duplicate a building block

To duplicate a building block, click the (duplicate) icon at the top of the Customize tab. Once duplicated, the new block appears on the page beneath the original one.

Save a custom building block

You can save a customized building block to reuse it elsewhere. To do so, select it, navigate to the Customize tab, and click the (floppy disk) icon. Click the Save and reload button in the popup to confirm saving your custom block.

To add a saved building block to the page, navigate to the Blocks tab and drag and drop the Custom block from the Categories section. In the popup that opens, click the desired block in the Custom category.

Tipp

In the Insert a block popup, click (edit) to rename the custom block or (delete) to delete it.