Colors, fonts and layout

Line up and space out items in a section

Center or align the items in a section, choose how many sit in each row and set an even gap between them.

Print this sheet (PDF, opens in a new tab)

When a row of photos, buttons or cards looks crooked, the fix is usually in alignment and spacing. You can set both for a whole group at once.

Align everything in a section or column

  1. Log in to your site editor and open the page.
  2. Click the section or column that holds the items.
  3. Open the small menu and use the alignment icon to pick how the items line up.

For more control, right-click the section or column and click Edit design. In the Layout section, under Content alignment, choose the vertical and horizontal alignment.

Align one item

  1. Click the item.
  2. Use the alignment icon in the small menu.
  3. Choose left, center or right. You can also stretch it to fill the full width of its space.

You can also right-click the item, click Edit design and use the Align section.

Choose how many items sit in each row

  1. Right-click the section or column and click Edit design.
  2. Open the Layout section.
  3. Under Presets, pick a layout. The choices include lining items up vertically or horizontally.
  4. If the content runs over more than one row, use Items per row to choose how many go in each.
  5. Items fit appears when you have rows of content. Use it to decide how items fill each row. It can help when the number of items is odd.

Set the gap between items

  1. In the design panel, open the Spacing section.
  2. Find Space Between Items and type a number or use the slider.

You set it once, and it covers every column in the section or every item inside a column. Side-to-side gaps use percentages and top-to-bottom gaps use pixels.

When you're happy, publish. If you don't see a Publish button, tell us and we'll publish it for you.

Tips

  • Align first, then spacing. It's easier to judge a gap once things sit in a straight line.
  • Use the same alignment through a section. Mixed alignment looks messy.
  • Check the phone view, because a layout can look different there. See Check how your site looks on a phone.

Need a hand?

Email hello@zossoz.com with your business name, the page and what looks off, and we'll take care of it. We reply within one business day. See Request a change.

Last reviewed