Skip to main content
content...

Using spacing in your design

Joran Bloemen
  • Updated

Understanding spacing, and how to use it in your Foleon Doc, can be a great way to keep your pages well-ordered for your audience.

💡 When you're working with the Content Builder, you can't edit spacing to position the content on your page. 

In this article

What is spacing?

You can use spacing to create space in both blocks and columns. Spacing allows you to position the content on your page and ensure your design layout looks great on every screen.

Spacing will be visible in the Content Studio by default. If you want to hide spacing, click menu and toggle off show spacing.

💡 When you're working with the Content Builder, you won't see this option in the menu. Because our block templates seamlessly fit together on every device, we've introduced this limitation to safeguard an optimal responsive design. 

Screenshot_2023-05-11_at_10.05.48.png

 

Block spacing

You can set the spacing inside a block one side at a time or on all sides simultaneously. In the block settings, click spacing. As you change these values for your block, you will see that you create space between the outside border of the block and your columns.

💡 The content of your Foleon Doc content will grow according to your audience's screen size. Don't be afraid to apply plenty of spacing, as it gives the content you worked on enough room to breathe.

Screenshot_2023-05-11_at_10.08.04.png

You can also change the spacing between columns, which you can find in the general settings of your block. This feature allows you to control the space between columns.

Screenshot_2023-05-11_at_10.08.29.png

 

Column spacing

There are two types of spacing that you can apply within your columns. You can create space on the outside of a column and its outside border or between different elements within the column.

  • Green spacing

    The green spacing is the space between the content of a column and its outside border. You can apply the green spacing to every column.

    The spacing goes entirely around the column contents: top, bottom, right, and left sides. You can specify the spacing for each side; they don't have to be the same. This way, you can position all the content within a column.

    Check out the video below to see how changing the green spacing affects the position of the text element in the column.

    ezgif.com-video-to-gif__4_.gif

    You can also control this spacing by going to the column settings - spacing and then changing the values. The example below shows that "Spacing bottom" corresponds with the "100" value.

    Screenshot_2023-05-11_at_10.13.18.png

  • Red spacing

    In contrast, the red spacing is the space outside the border of an element, between elements and whatever is next to it.

    You can adjust the red spacing to the bottom of an element. The video below shows how changing the red spacing creates room between the divider and the text element. You can use this spacing to change the position of the elements in reference to the other elements within the column.

Quickly edit spacing

On top of dragging spacing with your mouse, the fastest way to set spacing is to click anywhere in the green or red spacing field — highlighting the spacing value. Use your keyboard to type your desired value and press enter. In the GIF below, we changed the spacing value from 100 to 20.

💡 If you copy a value, you can easily apply it elsewhere by clicking on a spacing field and pasting it. Use keyboard shortcuts to speed up the process: Command+C / Command+V (Mac users), Copy: Ctrl+C / Paste: Ctrl+V (Windows users).

 

Best practice — Using spacing in your content

Our in-house Foleon designers use spacing to create content that looks well-ordered on every screen. Check out these tips below to get the most out of these settings:

  • Use a default set of values
    Using a default set of spacing values makes your pages look better and improves consistency for all of the Foleon Docs in your account. Our designers use the following sets, depending on the use case:

    • Set 1: 200, 150, 100, 75, 50, 25, 15

    • Set 2: 160, 80, 40, 20, 10

      As you might have noticed, these numbers relate to each other. For example, you can apply a top spacing of 100 in your column and a spacing value of 50 for the left and right. Your audience will not see these numbers, but they will experience your content to be neat.

  • Use the same browser size
    Because the left and right spacing change according to your screen size, we recommend always using the same browser window size when creating your Foleon Doc. Using the same browser size every time you adjust the spacing, will make your designs more consistent.

    To enable this, we recommend installing the Google Chrome plugin Window Resizer. This plugin allows you to quickly alter your browser screen to adapt to different sizes, making it easier to adjust your design to various screens.

  • Spacing for text elements
    The default spacing of a text element is based on the size of the text inside of the text element. That means the value of the spacing at the bottom will increase and decrease when you change the size of your text. The default value is set to 50% of your line height.

Related articles

Powered by Zendesk