The spacing is very important in a website design, as it may focus the attention on the content that’s important. Also, white space is a key factor for good web design.
Colibri provides some features that allow you to adjust spacing settings. These are:
Spacing between the letters in a text/lead text/heading
Also known as kerning, the space between the letters in a text (be it normal text, lead text or heading) can be adjusted as follows:
Click inside the container of the respective text and open, in Customizer, the list of settings for that text. Press the second Tab, for Style, and go to Typography.
A panel will open, where you will find an option for adjusting the spacing between the letters of the text. It is the last option in the settings panel, named Letter Spacing:
Spacing between columns
For sections that contain columns, you have the possibility to adjust the distance between columns.
Click on a column in the section you want to modify, and open, in the Customizer, the list of settings for Columns.
Under the first tab, Layout, go to Spacing.
- Enable the option to add some spacing between the columns (you can choose the spacing to be small, medium, large, or custom – you give your own values for the spacing)
- You can adjust the distance between content of the columns, by selecting your values on the corresponding slider.
Spacing of a content section from the top and to the bottom of that section
This option refers to the distance of a section content from the top and to the bottom of that section.
Click inside the section you want to modify, and open in Customizer the list of options for that section. Go to the Style tab -> Spacing.
You can select distinct values for the Top spacing (distance of the content from the top of the section) and for the Bottom spacing (distance of the content to the bottom of the section).
Padding
For a section you want to customize (it can be any section in the page), click on the Advanced tab and go to Spacing:
The padding refers to the surface a section occupies in the page. You can set individual values for all sides (top, right, bottom, left). The values can be expressed in pixels, em or rem.
Margins for the page sections
For a section you want to customize (it can be any section in the page), click on the Advanced tab and go to Spacing:
Set your values for the margins of that page section, by filling in the corresponding fields with values of your own.