Graphic Dividers

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.

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.

• 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

1. Layout Settings

2. Triangle Settings

3. Wave Settings

4. Angle Settings (Trapezoidal shape)

5. Swift Tail Settings

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.

• Once the web part is added, choose any of the layouts from the web part's properties.

• Choose the same color for both the divider's color and its background.

For example: Pink (#e83782 or RGB 232, 55, 130)

• Select the height you want the divider to have. In our example, we've set it to 2.

Here's how it would look as a divider in a column.

Company Intranet for SharePoint and Microsoft 365intranet.ai