# How to Add Divider to Your Page ?

**Through this document , you will uncover the 'Divider' feature properties in site editor page through these key elements:  
  
<span style="color: rgb(0, 0, 0);">[1. Adding a Divider](https://kb.salerise.com/link/25#bkmrk-adding-a-slideshow)</span>  
<span style="color: rgb(0, 0, 0);">[2. Feature Settings Window](https://kb.salerise.com/link/25#bkmrk-feature-settings)</span>  
<span style="color: rgb(0, 0, 0);">[3. Style Settings Window](https://kb.salerise.com/link/25#bkmrk-style-settings)</span>**

### **<span style="color: rgb(186, 55, 42);">Adding a Divider</span>** 

- Drag the divider icon from the available features

[![image.png](https://kb.salerise.com/uploads/images/gallery/2023-11/scaled-1680-/Y93image.png)](https://kb.salerise.com/uploads/images/gallery/2023-11/Y93image.png)

- Drop the divider icon into the desired location on your website page

[![image.png](https://kb.salerise.com/uploads/images/gallery/2023-11/scaled-1680-/2rEimage.png)](https://kb.salerise.com/uploads/images/gallery/2023-11/2rEimage.png)

### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

Upon dropping the divider, a settings window will appear, offering four main features:

- **Themes**
    
    
    - Explore different themes for your divider to align with your website's aesthetic.

<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/B8jZoPb4lKs?feature=shared" width="776"></iframe>

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

- **Settings**
    
    
    - Determine how your divider is visible on devices (Mobile , Tablet , Desktop , Large desktop).

<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/e1HiAc5ypsE?feature=shared" width="776"></iframe>

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

- **Icons**
    
    
    - Select the icon of your divider that align with your website.

<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/vlSPdPR0QvU?feature=shared" width="776"></iframe>

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

- **Animations**
    
    
    - Add animation to your title from a long list of animation options.
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr">Enhance your animated title by incorporating timing in seconds.</span>

### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

**Design Features**

- Access the "Design" feature to customize your divider appearance. Within this feature, you can determine the following properties:
    
    
    - **Margin**: Set the spacing around your divider to control its placement on the page.
    - **Border**: Define a border for your divider to add a distinct visual element.
    - **Color**: Choose the color that best complements your website's theme or design.
    - **Style**: Apply different styles to your divider, enhancing its visual appeal.
    - **Gradient**: Add gradient effects to your divider for a more dynamic and modern look.

**Background Features**

- Navigate to the "Background" feature to enhance the backdrop of your divider.  
      
    
    - **Upload Images**: Insert images as a background for your divider, providing visual interest.
    - **Sample Images**: Explore pre-loaded image samples for quick and easy background selection.
    - **Background Styling**: Customize the divider background further with options like:
        
        \- Background Repeat: Control how the background image repeats.  
        \- Background Fill: Adjust how the background fills the space around the divider.  
        \- Background Position: Define the positioning of the background image for optimal display.

**Style Customization**

- Within the "Style" section, further refine your divider presentation by adding classes from a dropdown list with a plethora of options.
- Determine how your divider is visible on devices (Mobile , Tablet , Desktop , Large desktop.

  
<iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/Rfw9FiOQjQQ?feature=shared" width="776"></iframe>