Elements and Widgets

Components

5min



Component is an element or a group of elements that can be used multiple times in a single project. All Component instances have the same styles and data.

Changes to the styles and data of a Component are automatically applied to all its instances. Also, changes to any Component instance apply to the original Component and all of its instances.



Examples of using components:

  • buttons
  • menus
  • icon blocks for social networks

For example, you can create a Component from a menu and add it to different pages of your website. If you need to make changes to the menu, you need to do this only in one component instance. All other instances will be changed automatically.



Creating a Component 

  • Select an element or a group of elements on the Canvas that you want to add to the Component
  • Click on the Create component button on the Top Bar
Document image


The created component will have a purple outline and a label.

Document image


You can create a Component from any element or group of elements except for the Root element and the List and Block List elements.

The created components are displayed on the Assets tab.

Document image


By right-clicking on a Component, you can:

  • Rename component
  • Delete component
Document image




Adding Component instances

You can add any number of Component instances to the Canvas. To do this, select the desired Component on the Assets tab and drag it onto the Canvas. Component instances will also have a purple outline and a label.

On the Layers tab, the Component and its instances are also shown in purple and marked with the component icon.

Document image


You can detach an element from a Component by right-clicking on it on the Layers tab and selecting Detach from the menu.

Document image




Updated 05 Oct 2023
Did this page help you?