The layout panel will open automatically every time you select an element (unless another panel is already opened). Alternatively, you can open it by clicking the icon on the left side menu.

Locating the Layout Panel

This article gives you a quick overview of the Layout Panel, which groups the layout manipulations you can perform on an element or a group of elements.
Here is an overview of the sections of the Layout Panel:

Layout actions

You can move around the layout panel by hovering over the 'move' icon in the top right corner of the panel and moving the panel while holding down the left click button of your mouse.
1. Grouping & Distributing Evenly
Grouping is a key feature of Readz, and you will use it all the time while creating layouts in Readz.
Not unlike groups in traditional design tools, our Grouping feature allows multiple elements to act as a single one. But you can also change and edit elements in groups.
Read more about grouping in this overview: 'Grouping elements.'

Distributing Evenly:
This feature will help you distribute multiple elements evenly within a group or on the canvas. You have both horizontal and vertical distribution available to you.
Read more about using this feature in 'Distributing Elements Evenly.'
2. Element Name & Type
The second section on the Layout Panel shows the name and the type of the element you selected. The layout panel will only show when you have an element selected.

The icon on the left will show you the type of element, followed by the element name.

You can change the name of the element by hovering over the name, and then an 'edit' pencil will appear.
3. Alignment Tools
This set of tools allows you to add alignments to one or more elements:
- vertical: top, center, and bottom
- horizontal: left, center and right

Read more about aligning elements here: 'Aligning Elements.'
4. Position
Activating this option for an element will make the position of an element on the canvas fixed.
Read more here about 'Sticky Elements.'

Place On Top / Forward / Backward
This option will affect the z-index layer of your elements. This typically is applicable for overlays, fixed elements, and sometimes headers and footers.

X / Y Coordinates
You can see the exact position of your element here. To change the values, click in a box, and enter the desired value.
- X shows vw or 1/100 of the viewport width
- Y shows vh or 1/100 of the viewport height to the element above or the top of the parent container
5. Size
Width / Height
- X shows the width of your element in vw or 1/100 of the viewport width

- Y shows the height of your element in vh or 1/100 of the viewport height

mH - Minimum Height
A parameter related to online design, minimum height defines how small an element can become.
6. Overflow
The overflow property determines how you want an element to behave when the content of the element is larger than its actual size.

There are three options:
- Show the 'overflowing' content
- Don't show the 'overflowing' content
- Add a scroll so the user can move the 'overflowing' content

Overview of the Layout Panel