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.

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.

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.

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.