# Designer mode in Genially

> Did you know about Geniallys Designer mode Its one of the most powerful features in Genially itll help you to create amazing content in less time and with 

Source: https://help.genially.com/en_us/designer-mode-in-genially-HkxvowBho

Last updated: 2025-10-21T16:35:26.526Z

Designer Mode in Genially is a tool that allows you to design with greater precision and have more control over the elements in your creation. You can use it to:

1.  Resize elements
2.  Position elements
3.  Rotate elements
4.  Edit layers

  

## How to activate Designer Mode

To activate it, simply:

1.  Click the main menu **☰** located in the upper left corner of the editor.
2.  Select **Show** – **Designer Mode**.

Want to activate it even faster? Use the keyboard shortcut CTRL/CMD + M.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/15def0a21b892cbe1e730fb2a9c5a6d9.gif)

  

## Resize elements

By clicking on any image, icon, widget, question, or other element, you can see its current dimensions. From the **Element** tab, decide whether you want to keep or adjust them.

You can change the size while keeping the proportions of the element, or you can set custom width and height values.

If you choose to keep proportions, width and height will change together when you edit one of them.

When you’re done, click **Apply changes**.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/f1c5387c083dc7b6a379c0aa9d0b71ed.gif)

  

## Position elements on the canvas

Place your design elements precisely, no need to struggle with your mouse trying to drag them into the exact spot.

In the **Element tab**, you’ll see two values: **horizontal position (X)** and **vertical position (Y)**. Enter the values you need or use the arrows to increase or decrease them. Keep in mind:

*   The value **0,0** corresponds to the **top-left corner** of the canvas.
*   The highest value corresponds to the **bottom-right corner** of the canvas and matches the canvas size. For example, if your canvas is 1200x675, the highest value will be **1200, 675**.
*   If you enter negative values or values higher than the canvas dimensions, the element will be placed outside the canvas.
*   The position of the element won’t change until you click **Apply changes.**

**![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/195a9071ccb676fb59910f08f806c4f8.gif)**

  

## Rotate any element

Use the **rotation tool** when you want to set the exact angle of your elements especially if you want several of them to share the same **degree of tilt.**

By clicking on each element, you can see its current rotation angle. Enter the value you want, from **0° to 180°**, or use the arrows to increase or decrease it.

*   If the values are **positive**, the rotation happens **clockwise.**
*   If the values are **negative**, the rotation happens **counterclockwise**.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/da7cd4c639962b1a8529582c6f9abc6a.gif)

  

## Edit layers

Each time you add an element to your canvas, a new **layer** is created. This means there will be as many layers as elements on your canvas. New elements appear **in the foreground**.

Follow these tips to edit layers effectively:

1.  **Rename each layer.** By default, the name of a layer matches the format or element type. Giving it a clear name helps you quickly identify its interactions in the **Activity** panel.
2.  **Reorder layers.**Decide which element sits above another. With a single click, you can invert the order of all layers. Keep in mind:
    1.  You can even change the order of **grouped elements.**
    2.  To improve accessibility for screen reader users, review and define the **reading order**. You can open it from Designer Mode, or via **Main menu****☰ > Accessibility.**
3.  **Hide upper layers to edit lower ones.** Hover over a layer and click the eye icon to hide an element when needed. This is especially useful when you have overlapping elements and want to focus only on certain ones.
4.  **Lock or unlock layers.** Locking elements is handy when you want to edit without accidentally altering something else. Hover over a layer and click the **lock icon** to lock or unlock it.

If you’re using a template, some elements may already be locked—this way, you’ll spot them right away!

**![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/bad7c3c4a3de498ca61d09ba569997a5.gif)**