Element Tree

This is the place where you manage and rearrange the elements of your Snap


On the left toolbar of the editor, you can find the Element Tree. It gives you an overview of the elements in the current snap. You're able to rearrange the elements, group them and have several other options via the context menu.

Screenshot of the Element Tree
Screenshot of the Element Tree

Let's have a look at the different possibilities.

Group Elements

After selecting one or more elements, you're able to group them by opening the context menu and clicking on "Group selection". This will create a new group element, which contains all the selected elements.

Hint: Groups can be nested maximum 5 levels deep.

Video showing how to group selected elements

Grouped elements act like a single element on the canvas. You can move them around and they'll stick together, which can be pretty handy when you want to group several design elements together. On the canvas, you can also double-click on a group to select underlying child elements.

After selecting a group on the Element Tree, you can also ungroup the elements by opening the context menu and clicking on "Ungroup selection".

Shortcuts

Ctrl+G

- Group selected elements

Ctrl+Shift+G

- Ungroup selected elements

Rearrange Elements

You can rearrange elements in the tree via drag and drop. While dragging you'll see an indicator where the new position of the element will be (you can also move the element inside a group). You can also rearrange multiple elements at once.

The order of the elements in the Element Tree also specifies the z-index of the elements on the Canvas (the first element in the three will be rendered on top of the others).

Video showing how to rearrange elements

Lock & Hide Elements

Another handy feature is to lock & hide elements on the Element Tree.

Hidden Elements won't be visible on the canvas, but they will still be part of the snap. This can be useful if you want to keep elements in your snap as work in progress, but don't want to see them on the canvas.

Locked Elements can't be selected on the canvas. This will prevent you from accidentally moving or editing those elements which can be useful when you have some fixed design elements which shouldn't be changed.

Video showing how to lock and hide elements

You can lock or hide elements by clicking on the corresponding icons on the Element Tree. You can also apply it to multiple elements at once by selecting them and lock or hide them via the context menu. When you lock or hide a group it will also apply to all of its children.

Rename Elements

Having a lot of elements in your tree and losing track of them because they're all named the same?

No problem, you can rename elements by double-clicking on their name and editing it. Press Enter to save the new name.

Video showing how to rename elements

Copy & Paste Elements

Of course, it's also possible to copy and paste elements. You can copy elements by selecting them and then pressing Ctrl + C. Afterward, you can paste them by pressing Ctrl + V.

By default, the elements will be pasted into the top of the Element Tree. If you have one or more groups selected, the elements will be pasted into all selected groups.

Pro Tip πŸ’‘

Elements can even be copied and pasted between different snaps! So when you for example have a design element that you want to use in multiple snaps, you can copy it from one snap and paste it into another one.

Additionally to Copy & Paste there's also a "Duplicate" option in the context menu. This will create a copy of the selected element and paste it right after the original element.

Context Menu

The context menu comes in handy when you like to perform actions on several selected elements at once. You can open it by right-clicking on a selected element in the Element Tree.

It also offers additional functionalities like Duplicating or Deleting elements.

Screenshot of the Context Menu for the selected elements
Screenshot of the Context Menu for the selected elements

Shortcuts

Ctrl+D

- Duplicate selected elements

Del

- Delete selected elements

The Spotlight Element

As you may have noticed, there's a special element in the Element Tree with a purple color. This is the Spotlight Element.

There can only be one Spotlight Element per snap and only Code Editors can be the Spotlight Element.

As soon as you have an active Spotlight Element, you can't specify an absolute width or height for the background anymore. Instead, you only specify padding. When you then edit the code of the Spotlight Element, the background will automatically adjust its size to the content, respecting the configured padding. That's also why there can only be one Spotlight Element and why you can't drag it around, the Spotlight Element is always centered on the background.

It comes in handy when you want to share a simple code snippet with only one Code Edtior and you don't want to adjust the size of the background manually.

Any questions?
Don't hesitate to ask them! πŸ‘‡