Articles on: Elements

Elements basics

Find out how to add elements and play around with them to create any layout you want.



Elements panel
Layout elements behaviour
Adding elements in stage

1. Elements panel



In the Elements panel you can find all the elements that will help you build your website's structure. The types of elements that we currently support are:



Layout‚ÄčTypographyMediaListFormsInteractions
RowTextImageListFormDropdown
ColumnHeadingVideoList-itemButtonNavbar
LinkIframeLabel
Code embedInput
LottieTextarea
Checkbox
Radio button
Select


All the above are bound to existing HTML tag elements. In the brackets there are the keyboard shortcuts that you can use to add these elements into Canvas.

Types of elements available

2. Layout elements



Learn how layout elements work



The two main elements that help you build your layout are Row and Column containers. These elements are the HTML equivalent to div blocks and come with some predefined styles: display flex and horizontal (row) or vertical (column) direction set.

By default all layout elements will have a gray border to be easily identified when added in the Canvas. On adding the first child inside the element, the border will disappear. On deleting the last child, the border will be visible again.

Adding layout elements to containers

We refer to the initial size of the layout elements as 'fake' size because it will update on adding a new child. Considering the element flex direction, the drop position and the size of the child node to be added, either the width or height will change to auto to nicely wrap around the content.

This behavior will automatically happen only if the initial size has not been changed before.

Adding elements to different containers

3. Adding elements in stage



Learn how to add elements in stage



Open the Elements Panel and simply click and drag over the Canvas the element you want to use.

Adding elements to the canvas

As noted before, in the Elements Panel some items have the keyboard shortcut added in parentheses next to the title. Simply press the right key and the element will be added as a child of the currently selected node. If the selected node doesn't support children, it will be added as a sibling.

Adding elements using keyboard shortcuts

Updated on: 13/02/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!