# 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. {% hint style="info" %} Explore the **advantages** of Intranet.ai features by [**clicking here**](https://intranet.ai/features/) to learn more. {% endhint %} *** ## 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 Graphic Dividers web part, which is named "IAI - Divider". {% hint style="info" %} We recommend using the divider in a full-width section to ensure it covers the entire page width. {% endhint %}
* Click on the **Edit** properties 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](#layout-settings) 2. [Triangle settings](#triangle-settings) 3. [Wave settings](#wave-settings) 4. [Angle settings (Trapezoidal shape)](#angle-settings-trapezoidal-shape) 5. [Swift Tail settings](#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](#add-the-graphic-dividers-web-part-to-a-page) 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)
{% hint style="info" %} **Please note**: the chosen layout doesn't matter, but it's **essential to set the same color** for both the **divider** and the **background**. {% endhint %} * **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.
{% embed url="" %}