Builder Page Layout: Perfect Spacing & Styling Guide
Create a Page Layout w/ Proper Spacing & Styling
While it is extremely easy to build pages with EzyCourse Builder, you might still want a little guide on your first go. That’s why we’ve prepared this documentation to give you a tour of how you can use the builder properly with no spacing or layout issues.
Create a Section
You need to create a section first. To do that, click the Add new section button on the builder. Then click Add new section from scratch and select the layout you want from the popup.
Default Layout System
Before you start adding content or drop widgets, it is very important to understand how the EzyCourse default layout works.
To understand, you need to take into account the borders. Here, the outermost black border is the section. Then you have the orange container border after which comes the blue row border. And the innermost two borders are the pink column border and black element border respectively.
Never add any content (button, text, etc.) into the column area. You have to first insert a div widget into the space which says “Drop Widget”. To add a div widget, simply drag and drop into the empty space.
Now, you can add any content into the empty space.
Spacing
Spacing is a very delicate subject in terms of our builder. So, please follow this documentation or you will face issues every now and then.
In the builder, you will see spaces between sections and elements by default. These are only because we use Fake Spacing on the builder. You will not be able to see these spaces when you preview the page layout, and one section/element might overlap another section/element.
To avoid this dilemma and see proper spacing on preview, you need to add your own spacing on the builder elements. To do that, you have to use CSS properties (margin, padding). Otherwise, you will not be able to see the spacing when you preview.
For spacing, remember these two points-
→ To set spacing between two sections, always use the padding property. More specifically, padding-top and padding-bottom properties.
→ To set spacing between two elements or contents, use the margin property.
Styling
To put an style on the builder, follow these two rules-
→ To style an entire section, select the section (the outermost black border) and style. For example, applying background color for the whole section.
→ Sometimes, you might do the styling or add CSS on the column area. But, we highly discourage that and you should always avoid doing that. Any styling that you want to do should always be done on the div widget area.
[Note: Never do any styling on the container, row, or the column area. Always use the div area to style elements and the section area to style the whole section.]