Want to know how to align the elements in your geniallys with mathematical precision in just a few clicks? You can do this with the Position elements feature, one of the many useful features that Designer mode offers.


There is a tutorial for each feature in Designer mode. Discover them all here.


In this tutorial you’ll learn how to use the Position feature to place elements on your canvas. Discover:


What is the Position feature used for?


With the Position feature you can align the elements of your creations with precision, without needing to go to great lengths with your mouse to drag the elements to their exact position.


You’ll be able to produce creations that have a much more professional appearance, in less time and with less effort.


How to position an element


In the Elements tab of Designer mode, there are two fields for defining the horizontal (X) and vertical (Y) positions of each element. 


Activate Designer mode using the keyboard shortcut CTRL/CMD + M, or by opening the dropdown menu in the top right of the Editor and clicking on Designer mode. Then enter numerical values in the fields Position X (horizontal) and Position Y (vertical) to set the coordinates. 



The values are set in pixels, so you’ll need to know the dimensions of your canvas. Find out how to check or change the size of your canvas. 


Positioning your elements on the canvas is easy if you bear in mind that:

  • The starting point: is the point in the top left corner of the canvas (0,0)
  • The finishing point: is the point in the bottom right corner of the canvas. Its coordinates are the same as the dimensions of the canvas. For example: if the dimensions of the canvas are 1200x675, the finishing point corresponds to (1200, 675).


For an element to be visible, the values you enter in Position X and Position Y need to be values between the starting and finishing points.


You can also assign negative values to place a part of an element outside of the canvas. For example, imagine you want half a star to appear on the edge of your genially. If the width of the star is 500 pixels, you can assign -250 in the Position X field so that only half of the star appears on the canvas.


How to find out the exact position of an element


Open the Element tab of Designer mode and select the element whose exact position you want to know.