# How to Add Image to Your Page ?

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

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

- Drag the Image icon from the available features

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

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

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

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

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

- **Images**
    
    
    - <span class="ui-provider ef 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 azr" dir="ltr">Include an image on your website by choosing from three options: select from your uploaded images, use sample images from the website, or upload a new image.</span>

<iframe allowfullscreen="allowfullscreen" height="451" src="https://www.youtube.com/embed/8h6GrIXOvKs?feature=shared" style="width: 804px; height: 451px;" width="804"></iframe>

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

- **Settings**
    
    
    - Customize your image dimensions (Width , Height).
    - Determine how your image is visible on devices (Mobile , Tablet , Desktop , Large desktop).

<iframe allowfullscreen="allowfullscreen" height="451" src="https://www.youtube.com/embed/OcNEUI5wf8o?feature=shared" style="width: 804px; height: 451px;" width="804"></iframe>

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

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

**Background Features**

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

**Style Customization**

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

<span style="background-color: rgb(255, 255, 255);"><iframe allowfullscreen="allowfullscreen" height="449" src="https://www.youtube.com/embed/3t7dBBsyAu0?feature=shared" style="width: 804px; height: 449px;" width="804"></iframe>

</span>