# How to Add Text Containers to Your Page ?

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

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

<span style="color: rgb(0, 0, 0);">Container feature allows you to add several numbers of text containers from (1 - 4).  
</span>

- **One container :** Add one block of paragraph/text.
- **Two containers :** Add two blocks of paragraph/text.
- **Three containers :** Add three blocks of paragraph/text.
- **Four containers :** Add four blocks of paragraph/text.

<iframe allowfullscreen="allowfullscreen" height="442" src="https://www.youtube.com/embed/0VbeCQAYPeU?feature=shared" style="width: 790px; height: 442px;" width="790"></iframe>

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

Once the container icon is activated, you can start entering your desired text directly into the text block. And upon entering text, a feature settings 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.

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

**Design Features**

- Access the "Design" feature to customize your container appearance. Within this feature, you can determine the following properties:
    
    
    - **Margin**: Set the spacing around your container to control its placement on the page.
    - **Border**: Define a border for your container 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 container, enhancing its visual appeal.
    - **Gradient**: Add gradient effects to your container for a more dynamic and modern look.

**Background Features**

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

**Style Customization**

- Within the "Style" section, further refine your container presentation by adding classes from a dropdown list with a plethora of options.
- Determine how your container is visible on devices (Mobile , Tablet , Desktop , Large desktop.  
      
    <iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/mL8aP83uo64?feature=shared" width="776"></iframe>