General segmentation components

Note: This information can be outdated. We are working on an updated version of this article.

The components used in the WYSIWYG builder can be divided into different segments. These segments are:

  • Dynamic Table. Using this feature you can create a dynamic table which will show specific data from a collection.


  • Button. The UI builder provides an easy way to create buttons in different styles:

  • Button Group. Using this feature you can group a series of buttons together (on a single line) in a button group:

  • Heading. You use headings to give structure to your page or parts of your page.

This is an example heading

  • Horizontal rule. This component is used to divide different parts of a web page, for example:

  • HTML. Using this component you can add your own custom HTML to you UI page.

  • Image. This component is used to add an image to your page. You can upload your own files, look for public files, use a variable or an URL.

  • Label. Labels are used to provide additional information about something:

  • Paragraph. A paragraph is used to group a piece of text

  • Progress Bar. A progress bar can be used to show a user how far along he/she is in a process:

  • Container. Containers are used to specify the layout of your page. In here we use the Grid system.

  • Dynamic tiles. With this feature, you can create dynamic tiles based on a collection.

  • Grid. Use this option to create the grid for your layout.

  • Include. Using this option you can include your own created partials.

  • Page container. Base container for the layout of your page.

  • Panel. A panel is a bordered box with some padding around its content:

  • Tab group. You can combine different tabs:

  • Table. Using this option you can easily create a new table.

Object tree

The object tree is used for a graphical view of the current hierarchy for your components. In here you can also drag and drop a component to another place within the tree view.


You can turn the guidelines on or off for your components. This will show you the component's borders.

This will show you the component's borders.


The settings can be opened using the following button:

From here you can change the following settings:

  • Page settings (e.g. changing the URL or adding (input) variables)

  • Layout settings. You can change the used layout for your page. By default, the layout is set to a Bootstrap layout.

  • Save as a page template. Using this option you can create a page template so you can re-use this in other applications.

  • Convert to HTML. You have the possibility to convert your page to custom HTML. Please beware that you can't undo this action.

  • Delete page. With this option, you can delete the current page.

Responsive design

In the UI designer different buttons are available to test the responsiveness of the design:

Did this answer your question?