Guides & Smart Guides
Guides & Smart Guides
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
Guides can be super helpful when you're trying to position elements in your layouts. In the Readz platform you will find both guides and 'smart' guides which will appear automatically.
Guides
Hover over the horizontal or vertical ruler on the canvas.
Click where you want to place the guide.
Adding Guides
Moving Guides
To move a guide, hover over the guide in the ruler on top or on the left. An indication with the position will appear and you can now move the guide.
Deleting Guides
To delete a Guide, hover over the Guide in the ruler, and right-click. A menu with the delete option will appear. You can delete just one specific guide or all of them in one go.
'Smart' Guides
Green guides
When you're dragging and dropping an element, you'll occassionally see green lines appear. These green lines show the user alignment in relation to the canvas. 25%, 50%, and 75% are the areas on the canvas that will light up with green guide-lines when your selected element lines up with those areas. The image above shows that our selected element (the title) is aligned with 25% on the height of the canvas (side)
Orange guides
It's also important to ensure that your elements are lined up with other elements. From a design perspective, we want to make our pages look as polished as possible, and alignment and consistent margins help a lot with achieving that polished look. The image above shows an example of what our guide-lines look like when you align elements. The selected textbox element containing the text "So, why should I care"? has its left-side, middle, and right-side all in alignment with the textbox element above it, as it should.
Orange guides
It's also important to ensure that your elements are lined up with other elements. From a design perspective, we want to make our pages look as polished as possible, and alignment and consistent margins help a lot with achieving that polished look. The image above shows an example of what our guide-lines look like when you align elements.
Contact Support
STAY IN THE LOOP
Sign up for product updates