Graphic Dividers
The component that helps you differentiate intranet content by extending the shape and color of a SharePoint page sections.
Last updated
The component that helps you differentiate intranet content by extending the shape and color of a SharePoint page sections.
Last updated
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.
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.
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
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.
Choose the wave: you can choose the desired wave effect by moving within the bar.
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.
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.
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)
Please note: the chosen layout doesn't matter, but it's essential to set the same color for both the divider and the background.
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.
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.
