Objective
There are many ways to provide vertical spacings within an elementor section. Typical approaches include adding empty space elements, setting margin top/bottom, or padding top/bottom. These many possible approaches can create confusion in finding where to adjust the settings during configuration for the responsive design.
The guidelines in this article aim to provide a consistent approach in order to avoid this confusion and improve the working efficiency.
Single Column
The vertical spacings shall be mainly provided by the element’s margin-top.
The last element’s margin-bottom shall provide the spacing between the element and the section bottom.
Multi Column
- The section’s top spacing is contributed by the empty space element and the margin-top of elements.
- The top element in each column shall provide a margin-top of around 50px. This is to provide a reasonable spacing between itself and the top element when the column is wrapped in smaller screen.
- The section bottom space shall be provided by the margin-bottom of the lowest element, when the columns are wrapped in small screen size. It is necessary to identify which is the lowest element especially when columns are reversed in responsive mode.