BOWWE University
How to properly create spacing between elements on your site?
Incorrectly adding spaces between individual elements can harm your website and significantly lower its position in search engines. In this tutorial, we'll show you the best way to create spacing between elements.
The most common mistakes in creating spacing between elements:
Each of these errors reduces the quality and effectiveness of your website. Check what you should especially avoid:
Multiple enters
Your visitors will not see it. But for SEO robots, creating a large space between a paragraph of text and another element by pressing the Enter key multiple times is treated as an error. This practice lowers the ranking of your website in the search engine.
Empty AREA widget
Spacing between elements with a blank area is also a mistake. For indexing robots, an Area is a collection that should contain other elements. If it is empty, indexing robots will classify it as an unreadable error, which lowers your site's ranking.
Empty COLUMNS widget
Like the blank Area widget, empty columns are also treated as an error.
Moving green border lines
By using the green border outline of the widget, you can give each element constant, unchanging dimensions: width and height. This means that regardless of the circumstances (e.g., changing the screen resolution to a smaller one on a mobile device), the dimensions of such an element will remain the same. This is associated with risk, e.g., website elements displayed on a mobile device will not adapt to the smaller screen size!
Remember about:
Green widget borders are not used to create spaces between items!
How to properly create spacing between widgets?
To create spacing that will guarantee your website:
- readability,
- professional appearance,
- high positioning.
You must use at least one of the two values that each widget on your website has. These are:
- Padding,
- Margin.
The difference between paddings and margins
Padding
This is the interior spacing given inside the element and separates the element's content from its edges.
Margin
It is external spacing given to the outside of an element and separates one element from another.
In practice, margins and paddings are often the same, as there are not many significant differences between them. If necessary, you can use both the padding and the margin at the same time.
How to create spacing using padding?
When you place the widget in another one, you can use padding to separate the contents of the internal widget from the external one.
For example, you put the TEXT widget in the COLUMNS widget and use padding to separate the text contents from the border of the column.
1
Click the widget and then select Widget Styles.
2
Go to the SIZE tab.
3
Set the Padding for any edge of the selected widget.
4
Click SAVE and PUBLISH.
How to create spacing using margin?
If you want to separate two or more widgets from each other - use margins.
1
Click the widget and then select Widget Styles.
2
Go to the POSITION tab.
3
Set the Margin for any edge of the selected widget.
4
Click SAVE and PUBLISH.
Congratulations!
You already know how to properly create spacing on your website!
You already know how to properly create spacing between individual elements on your website. Thanks to this, you will not make fundamental mistakes in building and designing your website. If you want to know more handy ways to create a functional and beautiful website, check out the following tutorial!
Remember about:
In addition to Portfolio, you can put on the Customer Reviews page. You will build even greater trust of potential customers in your company.
Use only high-quality photos in the Portfolio. Find out where to get them here!
Update Portfolio min. 1 a week. You will achieve higher rankings in search engines!
Dedicated to you
Didn't find the answer?
No matter what your problem is. We are here to help you find a solution
