TRANSCRIPT

In this video, we'll look at the quick alignment menu, which will save you a lot of time when you're trying to align things in Readz. So now, we're in the Readz dashboard. First, let's find the menu. I'll select an element, and go over to my left-hand side menu. I'll find the alignment menu, and open it by hovering over it. Here we have lots of useful options for alignment. I think this will be better demonstrated with the blue box, so I'll go and select my blue elements within the larger grey box. And we'll change around its alignment within this containing element. So I can try align left, it'll be aligned to the left-hand side of its container. Same with align center and align right. We also have align top, align center vertically, and align bottom.

Then, we also have a centered in container, where it will be equally horizontally and vertically centered. With the dark blue box, we were aligning with an apparent or containing element. Now, let's see the difference when we align this light blue box within the page. The light blue box has no parent or containing element. So, we'll select the blue box and go back to our alignment menu, and I'll try align left. And as you can see, when I click align left, it goes to upmost left of the page. And then, we have center, right, top, all the same options will align the box within the page.

Now, let's check out some more complicated alignment options. For example, when we want to align multiple elements. So, I'll start by selecting all of the elements. Selecting one then holding down command and control and selecting the others. Once I have them all selected, I'll go over to my alignment panel. I can still do such things as align left, align center, align right. But, what will be more useful is to distribute them horizontally within their containing box. So, I'll click distribute horizontally. Now, they're all aligned vertically, centered, as well as distributed equidistant within their containing box, and it looks quite nice.

Now, let's try distributing these same boxes vertically. First, I'll make my containing grey box a little bit larger so they can all fit nicely. Then, I'll select my boxes again. Come over to my alignment menu and choose distribute vertically. The other two options I have here are make into columns and make into rows.

So just to show you what those look like when I make them into columns, I get three equally sized, equally spaced columns. And rows, three equally sized rows that fill the container. So just to sum up, we've seen how to select multiple elements to align them, how alignment happens within the parent element versus within the page, and lastly, how we can horizontally or vertically distribute elements.

And that's all. Using these tools when you can will save you time, and it's always better than eyeballing it.

The quick alignment bar in Readz can save you time. Learn about the different possibilities for aligning elements with it!
Quick Alignment
GET UPDATES
Thank you & welcome!