Graphic Dividers

The component that helps you differentiate intranet content by extending the shape and color of a SharePoint page sections.

What is Graphic Dividers

Graphic Dividers is a feature that allows you to create dividers not only in different colors but also with shapes like the triangle, the wave, the angle and the swift tail. These shapes can add motion to your SharePoint pages and provide them with a stylish touch, making them even more appealing.

Explore the advantages of Intranet.ai features by clicking here to learn more.

Add the Graphic Dividers web part to a SharePoint page

If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter IAI - Divider to quickly find and select the IAI - Divider web part.

We recommend using the divider in a full-width section to ensure it covers the entire page width.

Click on the Edit button on the left of the web part to open the property pane, where you will have a few sections to configure. See below for more information on each of these sections.

Configuration

Layout Settings

Choose a layout: in this section, you can choose the divider layout from the drop-down menu. Your options include triangle, wave, trapezoidal shape (angle) and swift tail.

Choose divider: here you can select the divider color by simply moving the circle on the color palette or by entering the hexadecimal and/or RGB code.

Choose background color: here you can select the background color by simply moving the circle on the color palette or by entering the hexadecimal and/or RGB code.

Webpart height: by adjusting the slider within the bar, you can choose the divider thickness. The thickness will depend on how prominently you want the chosen layout effect to be visiblei

Triangle Settings

Edit the tip direction: here you can decide whether to change the direction of the tip (if you have chosen the triangle layout). If you enable Yes, you will have the option to select the tip direction by moving within the bar.

Wave Settings

Choose the wave: you can choose the desired wave effect by moving within the bar.

Angle Settings (trapezoidal shape)

Trapezoidal direction: here you can decide the direction of the trapezoid angle. By default, it is set to the right, but you can enable the button to orient it to the left.

Swift Tail Settings

Edit the tip direction: here you can decide whether to change the direction of the tip. You will have the option to select the tip direction by moving within the bar.

Create a colored divider line

The Graphic Dividers web part can also be used to create a colored divider line. In this case, we suggest creating a section that is not full-width and adding our graphic divider web part as described at the beginning of this guide.