Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Use the Layout Sideform - Box Model(Padding/Margin), Shadow and Appearance

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,and 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, 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 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 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:  Each widget and section has separate Layout Settings. When repositioning a widget, for example, you need to click on the correct element to edit (e.g. a Heading, a Column, a button). 

Box Shadow - Icon, Image, SVG image, Text, Columns widgets

When editing some specific widgets within a section (Icon, Image, SVG Image, Text, Columns) the option to add Box Shadow appears. It allows you to add shadow in your selected element (Left - Right - Bottom - Round). You can as well 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 - Text, Animation, List, Image widgets

In some widgets (Text, Animation, List, Image), you can add a different background color to differentiate it from the rest of the sections.

Note: Find out more about the Layout tab in your side form, here

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.