When adding a custom code, it is best that you follow the HTML structure below as much as possible.

It is suggested that when you are creating a section or column that can be re-used in the future, you may use the “Save in My Components” in that element.

Saving the element into my components will help you save time when creating a new one as it will serve as the template of the section or column when you add a new element.

There would be times that a certain element will be hard to select because it has no padding / margin in it. When that happens, you can try the following methods:

1. Click “Structure View”, located in the top-left corner of the page, when it is clicked, all elements in the canvas will have enough spacing in it and there will be a grid lines to indicate the element position.

2. Select the child element and navigate the parent using the “Up One Level” icon of the selected element.

3. Structure View (Advanced Mode Only) - Located in the left side bar, beside the Properties - when clicked this will show all the elements in the canvas and is displayed in tree view. You may select the element that you are trying to look for, and when you select it from the tree view, the selected element will be highlighted on the canvas.

Open

When applying the padding or margins in a section or container, it is best to use the Brand Style Guide on Element Config > Parent Element Configuration. In this way, you’ll have a default value in your project which can be controlled or adjusted later on and would be applied across the project.

For cases that there is a specific margin or padding that you would want to set and it is only for that section or container, you can use the CSS framework’s utility classes on that element (E.g. mt-5 for margin top, etc.).