Selecting elements

Now that we know how to add elements let's see all ways in which we can select them and how to edit their attributes.

Selecting an element
Contextual Actions
Multiselect

1. Selecting an element

To select an element simply click on that element either from the Canvas or the Layers Panel.
In the Canvas you will see that selected elements have a blue border around them and in some cases resize handlers (see Styles Lesson). On top you will find information about the type of that element along with buttons for contextual actions.

In the case of components you will see that they always have the color purple associated so you can distinguish them better so the selection border is purple as well.

2. Contextual Actions

As mentioned above you can see the type of the element when you select it but you can also change the semantic type, attributes or transform the element into a link.

Changing the semantic type

For some elements, like text or containers you can change the semantic type. In most cases you will not see any change in the Canvas but it can be important for SEO purposes.

Setting attributes

For each type of element there is a specific set of attributes that you can edit like id, image source or whether the element is disabled. These can be changed from the Attributes section in the Contextual Actions Panel.

Adding links

If you click on the link icon you will open the Link Panel. You can add five types of links: absolute links, links to other pages, links to sections inside the page, email or phone links.

3. Multiselect

If you want to make changes to multiple elements you can do this by selecting them by holding ctrl or cmd pressed and clicking on elements.
If you select from the tree view try shift + click on an element to select all elements between that element and the initially selected element.

Drag Select

An easier way to select multiple elements is to use drag selection. Simply hold ctrl or cmd and click pressed while moving your mouse over the elements and release to select.

Updated on: 13/02/2023