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.
Video showcasing the Bottom-Right Position Constraint
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.
Video showcasing the Center Position Constraint
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.
Video showcasing the Scale Position Constraint
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 π
Video showcasing the Advanced Style options
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.
Previous Article
Next Article