Web part overview

The Separator web part allows you to add spaces and organization into your SharePoint pages. It allows you to be creative and adapts to your graphic charter.

Use cases

The separator web part can be used to create spacing, and name sections when used with a title, in order to provide a better page readability and structure.

Add the web part

1. Open the edit mode of the SharePoint page by clicking on edit at the top right of the page,
2. Position the mouse over or under an existing WebPart, and click the "+" button to open the web part catalog. 
3. Search or scroll down in the catalog to select the Separator WebPart in the category "Text, media and content". 
4. The web part is added to the desired location.  

Setting up the web part

There are 3 categories of settings available for the Separator web part:

• Content settings
• Display
• Advanced Setting

The generic customization options are not covered in this article. You can find details and tips on these options in the Design Customization of webparts article.

1. Content settings

Separator Style

You can customize several style options for the overall separator layout.

Alignment : Left, Center, Right. The title will change his alignment depending on his position

Separator length : Defined by the percentage of the width covered by the separator. 100% is a full line, and 0% will be the smallest separator possible

Separator thickness : Choose between a Thin and Large Separator. A third thickness is available when you position the title inside the separator

Separator text

You can choose whether you want to display a text on the separator, or if you only want a graphical component.

You can define the text with a Rich Text Editor to customize the fonts, size, color and style of the text.

The Separator text is limited to 2 lines.

You can then choose between 3 different layouts depending on where you position the text :

• In between the 2 sides of the separator
  
• On top of the separator
  
• Inside the separator
  

Image or Color

You can then fill the separator with a color or a picture to adapt the separator to your page design.

For more information, see Web part Design Customization.

Example of layout