Spacing and alignment

Learning objective

By the end of this session, you will be able to:

• Fix some common issues such as scrolling tiles
• Align image captions

Video tutorial

Video transcript

One easy way to up your game for your site is to create alignment throughout and have the correct spacing between your section and your tiles. I’m going to talk about some common spacing and alignment issues I see across different sites and how to quickly fix them.

Text tile spacing

So let me go to the site preview and let’s look at the team section. I would say 80% of the sites I see have a team section. Often a question that comes up is, “my image caption is not aligned; how do I fix that?” It’s very easy. Let’s go back to the site editor, go to our team page and try to investigate. The first thing to do in this situation is to figure out if there is any added spacing before or after your copy. If we look at the left-hand side, we can see the caption. Can you see how it has some extra spacing? That’s what you want to remove.

Suddenly it’s alined. But there might be a situation where your text is not even. Here it works quite well because the tiles have the same amount of text. But let’s say you want to make it bigger because Jerry has another line. You want to play around with his spacing. It sounds simple, but this is something that I see a lot. So just check the spacing before and after your copy.

Scrolling tiles

The other thing that I want to address is scrolling tiles. If we look at our home page, you can see that I have a scrolling text. This is something you want to avoid as much as possible. In this specific example it’s okay because it’s only ACME Overview Market, so I’m not missing out on anything. But let’s say we had a scrolling for the copy in the text section. What’s the problem? You risk your visitors not seeing your content.

• The rule is to make it easy for your visitors to get to important content.
• Avoid hiding key information from them.

The accordion section is great for QA. Not so much for sharing important contact information. That goes the same way for scrolling tiles. Let’s look at quick fixes that we can implement when you’re in this situation. Let’s go back to the site editor. I’m going to go to the homepage where we have that example and try to figure out how we can fix it.

One thing that we can easily do is just make our tiles slightly bigger. Remember, now that we have the 30-column grid, we have a lot more flexibility. This takes me back to the way the grid works. This is a really nice segue for me to introduce another feature that has been recently released.

View Columns

By clicking on the eye icon in the left-hand panel, we can see the actual columns. I know it might appear simple, but I think it will help a lot of you understand how the grid works. If I had a grid with three columns, the tiles would be a bit large. By having a 30-column grid, I can make small adjustments because now my minimum size is that square. So now it looks like it fits, but not really because we can see the scrolling. So make your column count 30, because that’s really going to give you a lot more flexibility, and just make the text box slightly bigger.

Creating white space

Sometimes when I suggest that, I hear some concerns that this is creating too much white space. That’s understandable, but to that, I have two responses. White space is your friend. Please, your site shouldn’t be too packed. Visitors scan through content, but they don’t read. If everything is packed, they don’t know where to look. They don’t concentrate. It doesn’t work. So really, do not be afraid of white space. If you feel it’s way too much space. Remember that you have the option on the left-hand side to play with your margin and padding. If I go to the left-hand panel and click padding it removes some space. That’s because we have a padding of 30 built-in pixels, which can be seen if your columns are shown. So by clicking padding, you’re removing it. This is where if you want to, you can add more or less padding in between your sections.

Text tile versus a text section

When to use a text tile versus a text section? What’s the difference? In a text section, by default, you have a lot less padding than in a text tile. I often recommend using a text section for titles and using the grid for your actual content for images, copy, and so on. But sometimes it is a lot easier to use a text tile for alignment reasons because then it’s a lot easier to align the title with the rest of your copy. So I’m going to copy-paste the text tile for the purpose of this example. Let’s go back here to the ACME Overview and Market grid. If I were to add the text tile that I copied here, I would have to make the tile bigger, and I’m going to position that to the top and align it to the right. If I were to do the same under the alignment section of the left-hand panel, you can see how it’s a lot easier to align my text with my title. That’s why sometimes you might want to use a text tile for your title instead of a text section,

Whatever you do, be consistent

If you’re going to use a textile for your titles, do it throughout your site. If you’re going to use a text section, the same rule. To make your site look nice, you want consistency. This is a very simple rule you can apply to make sites look really nice. By being consistent, and also by adding some white space your site will look a lot better.