When editing a section or a widget, you have the option to edit the Layout on the Sideform. Apart from the alignment and size of an element, you can also edit the Box Model and, in some sections & widgets, the Box Shadow and Box Appearance.
Box Model
It is a functionality common among sections and widgets, where you can edit the Border, Padding, and Margin.
Border
It allows you to create a border around a section when you have specific information to highlight or when you want to set a section apart from the regular flow of the text. In that case, click on a Border style to enable the available options (Solid- Dashed - Dotted). You can also add a Border color, which sets the color of the section's border. The Border-radius option rounds the corners of the section's outer border edge.
Note: You can also apply a default border radius to your School's buttons! Check how here.
Padding
In the Box Model settings, padding refers to the space that is inside the element between the selected element and the element's border. Padding goes around all four sides of the content, and you change the padding for each side.
Section Padding:
Widget Padding:
Margin
Margin is the space between the border of the element and the next element of your design. Think of the space outside the border and between it and the other elements. This is the margin that goes around all four sides of the content. You can target and change the margin for each side.
Note 2: We recommend avoiding negative margins, as those will not be scaled properly on narrow devices. An alternative would be to make those elements visible only to desktop screens.
Box Shadow
When editing some specific widgets within a section (Icon, Image & SVG Images, Columns, Labels), the option to add Box Shadow appears. It allows you to add shadow in your selected element (Left - Right - Bottom - Round). You can also configure the Horizontal & Vertical offset to adjust the shadow's position, choose a color, and even add Spread and Blur to make it more special!
Box Appearance
In some widgets (Text, Animation, List, Image), you can add a different background color to differentiate it from the rest of the sections.
Find out more about the Layout tab in your sideform here.