We have a feature to add margin or padding by adding class/classes to your preferred module/section.
In this article
List of Classes
| Type of MARGIN AND PADDING | CSS Class |
| Margin 70px Top and Bottom | margin-70 |
| Margin 70px Top | margin-top-70 |
| Margin 70px Bottom | margin-bottom-70 |
| Padding 70px Top and Bottom | padding-70 |
| Padding 70px Top | padding-top-70 |
| Padding 70px Bottom | padding-bottom-70 |
Basically, this classes are consist of 3 parts (Margin/Padding)-(Top/Bottom/Nill)-Number. If you need margin top 50px, then the class is 'margin-top-50', if you need both top and bottom you can write it as 'margin-50' (So, no top nor bottom if you need both).
The Number/value of the margin/padding is starting from 10px to 120px, always incremented by 10.
If you need to adjust the margin/padding on mobile devices (below 768px) you can add 'mb-' at the beginning of the class. For example 'mb-margin-top-50'.
How to use the CSS class:
1. Open the template from design manager
2. Scroll to the section you want to edit
3. Click Settings > Edit CSS
4. A popup appear then you can add the CSS class in the 'Custom CSS Class' input field
5. Click Save and Publish the template
