While modifying a section or widget, you'll find the option to adjust the layout within the Sideform. In addition to altering the alignment and size of an element, you can also customize the Box Model and tweak the box shadow and box appearance in certain sections and widgets.
In this article, we will learn how to adjust and edit the box model, shadow, and appearance of certain sections and widgets.
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.
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 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 and 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.
- Each widget and section has a separate Layout Setting. When repositioning an element, you need to click on the correct one to edit it (for example, a list widget can also be edited as a column widget).- We recommend avoiding negative margins, as they will not be scaled properly on narrow devices. An alternative would be to make those elements visible only on 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.
Box Appearance
You can add a different background color to some widgets (text, animation, list, image) to differentiate them from the rest of the sections.
Find out more about the Layout tab in your sideform here.