Component Overview

To capture your employees' attention and strengthen their engagement within the organization, it is useful to have a beautifully designed workspace. The Designer component allows you to graphically customize pages by adding backgrounds and modifying the default SharePoint design. This article describes the features and use cases of the Designer component.

 

Add the Component

• If you are not already in edit mode, click edit at the top right of the page.

• Place the mouse pointer above or below an existing WebPart or below the title area and click the + button, then select the WebPart component Designer. It is recommended to place the WebPart at the top of the relevant section so that it loads first when the page loads.

• Click edit items on the left to set the WebPart component options.

WebPart Component Options

• This component allows you to modify the design of the entire page, the whole section or the column.
• You can choose the background color of the theme.
• You can choose the text color "black/white" by adapting the text color.
• You can also add an image as a background. Then choose whether you want the image to cover the entire width or the entire height of the area. The other dimension adjusts to maintain the proportions, as well as the image anchoring (top left, top right, bottom left, bottom right, or customize your anchoring).
• Custom positioning allows you to enter the CSS position properties of the background yourself. Description of CSS properties.
• You can add a shadow effect to the entire page, the whole section, or the column.
• You can set the size of the margins on all four sides of the section, the column and the WebPart.
• You can set the size of the inner padding on all four sides of the section, the column, and the WebPart.
• You can customize the title of the WebPart component.

Margin Management

The Designer component allows you to customize the margins of your SharePoint pages. Once the component is added to your page (preferably at the top of the section so it loads first), you can adjust the margins according to your needs. 

It is possible to synchronize or unsynchronize the margins by clicking the link button, which allows you to modify only one side at a time (top, bottom, left, right).

To adjust the margins, simply enter the desired values. For example, negative values will reduce the margin. It is recommended to maintain consistency between horizontal and vertical margins for a harmonious design. 

You can also bring two elements closer together or even overlap components by adjusting the margins.

For more information, a tutorial video is available via the following link: https://www.loom.com/share/c63fb56461d34ff7aba89d208d2df59f

 

Margin changes are not applied on mobile

 

Usage

You can add a background color and image with the component:

• Add the WebPart in the area where you want to apply a background color and image. 
• The area is automatically colored with the site's theme color and the WebPart displays a horizontal bar that will only be present in edit mode (to facilitate its manipulation).

Layout Example

You can choose to apply the color section and background image only to the WebPart area or to the entire section.