Overview of the Layout Panel
Overview of the Layout Panel
CREATING AND CHANGING LAYOUTS
What are 'Liquid' Layouts?
Overview of the Layout Panel
Grouping Elements
Aligning Elements
Distributing Your Content Evenly
Creating Overlapping Content
Making Elements Sticky
Overflow
Guides
Create Consistent Spacing
< BACK TO OVERVIEW
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.
Locating the Layout Panel
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.
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.
Layout actions
Here is an overview of the sections of the Layout Panel:
1. Grouping & Distributing Evenly
Grouping:
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. 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 rightRead more about aligning elements here:
'Aligning Elements.'
3. Position
Sticky
Activating this option for an element will make the position of an element on the canvas fixed.
Read more here about 'Sticky Elements.'
Z-index Value / 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
4. 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.
5. 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
Contact Support
STAY IN THE LOOP
Sign up for product updates