Editor Basics

Get to know the basic functionalities of the snappify Editor

---

At the heart of the Editor is a canvas where you can freely arrange your elements. Here we'll discuss the basics and common functionalities across all elements.

Select Elements

There are multiple ways to select elements in the snappify Editor:

• via the Element Tree (select multiple elements by holding the Shift or key)
• via Drag Select on the Canvas
• by clicking on Elements on the Canvas (select multiple elements by holding the Shift or key)

Edit Multiple Elements at once

When you have an element selected, you'll see all the properties that can be edited on the right toolbar.

It's also possible to edit multiple elements at once. Simply select the desired elements like described above and you'll be able to edit all the properties that those elements have in common.

Positioning

Elements can be placed anywhere on the canvas using drag-and-drop.

To be more precise, use the input fields for the X and Y coordinates on the right toolbar.

Position Constraints

Elements are usually constrained to the Top-Left, which means they stay in the same place when you resize the background. Position Constraints can be specified for any element, except Group Elements (because they are made up of multiple elements which have their own Position Constraints).

You can change the position constraints of an element to keep it in a certain position while resizing.

Below we describe the different position constraints which can be specified for the X and Y axis individually.

Bottom Right

The Element sticks to the bottom right corner, keeping the same distance from the bottom and right side.

Center

The element stays proportionally positioned in relation to the background as it is being resized. That means when an element is centered, it will stay centered while resizing.

Scale

The Element keeps its size relative to the background. This can be very useful for placing background images and keeping them cover the whole canvas.

Alignment

The right toolbar also contains alignment buttons that can quickly position elements in specific locations. These buttons allow you to align elements to the start, end, or center horizontally or vertically.

When multiple elements are selected, the alignment buttons can align them horizontally or vertically to each other.

Size

Elements in the snappify Editor can have different sizing behaviors. Some elements can be resized, while others are sized automatically to fit their content.

To resize an element, simply drag the resizing handle directly on the canvas.

For more precise sizing, you can adjust the width and height values using the input fields located on the right toolbar.

Keep aspect ratio

As you can see in the screenshot above, there's a button between the width and height input fields. This button allows you to maintain the aspect ratio of the element when resizing.

Image elements have this button enabled by default, to keep the original aspect ratio of the image.

Scale

On some elements (e.g. the code editor), the size can't be adjusted, but you're still able to "resize" them by adjusting their scale.

Rotate

Some elements also allow you to rotate them, either via the rotation handle on the canvas or via the corresponding input field on the right toolbar.

Advanced Styles

There are various styling options that can be applied to elements. These options are available in the "Advanced Styles" accordion on the right toolbar.

Have a look at the video below to see what styling options are available 👇

Element Tree

Now let's move on to the next page, where we learn more about the Element Tree which gives you the possibilities like grouping, lock & hide or duplicating elements.