# How to Add Div Container to Your Page?

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

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

- Drag the div container icon from the available features

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

- Drop the div container icon into the desired location on your website page

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

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

Upon dropping the div container, a settings window will appear, offering three main features:

- **Settings**
    
    
    - Add several classes from a long list of 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">Determine how your heading is visible on devices (Mobile , Tablet , Desktop , Large desktop).  
          
        </span>
- **Design**
    
    
    - Include images for your div container on your website by choosing from three options: select from your uploaded images, use sample images from the website, or upload new images.

- **Animations**
    
    
    - Add animation to your div container 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 div container by incorporating timing in seconds.  
          
        </span>

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

Once the div container icon is activated, you can start entering your desired text directly into the section test. And upon entering text, a window will appear, providing options for customization.

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

- **Customize Font:** In the feature settings, customize your text by selecting from various font families, adjusting font sizes, and choosing different headers.
- **Text Alignment:** Modify the alignment of your text as needed, whether it's left-aligned, center-aligned, right-aligned, or justified.
- **Lists:** Utilize numbered and bullet lists to organize your text content efficiently.
- **Insert/Edit Links:** Add hyperlinks to your text by using the insert/edit link option, allowing users to navigate to external pages or resources.
- **Remove Links:** If needed, easily remove any existing links within your text.
- **Subscript and Superscript:** Apply subscript or superscript formatting to specific text elements for a more dynamic presentation.
- **Text Color:** Customize the color of your text to match your website's design or emphasize specific information.
- **Background Color:** Enhance the visibility of your text by adjusting the background color to create a visually appealing contrast.
- **Special Characters:** Access a range of special characters to enhance the richness of your text content.
- **Additional Features:** Explore other available features to further enhance your text, ensuring a comprehensive and polished appearance.