{"id":921,"date":"2022-08-02T16:40:29","date_gmt":"2022-08-02T16:40:29","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/02\/6437004-hostinger-website-builder-how-to-add-images\/"},"modified":"2026-08-21T06:03:47","modified_gmt":"2026-08-21T06:03:47","slug":"6437004-hostinger-ai-builder-manual-mode-how-to-add-images","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6437004-hostinger-ai-builder-manual-mode-how-to-add-images\/","title":{"rendered":"Hostinger AI Builder: How to add images in manual mode"},"content":{"rendered":"

Add images to your Hostinger AI Builder manual mode website using the image element.<\/p>

Add an image<\/h2>
    \n
  1. Open the builder and expand the Add elements<\/b> panel on the left.<\/li>\n
  2. Select the image element<\/b>, and drag and drop it to the preferred section of your site:
    \n\"\"<\/li>\n
  3. Click on the element to see more options (edit, generate, change, crop & position, duplicate, hide\/show, delete, resize, etc.):
    \n\"\"<\/li>\n<\/ol>

    To add your own image, click on Edit image <\/b>→ Replace image<\/b>, and select a file from your media library, browse free images, or upload your own.<\/p>

    Customize your image<\/h2>

    Click on Edit image<\/b> to see more options:<\/p>

    \n\n\n\n\n\n\n\n
    \n

    Image<\/b><\/p>\n<\/td>\n

    		\n
      \n
    • \n

      Replace image<\/b><\/p>\n<\/li>\n

    • \n

      Add alt text<\/b> to make your website more accessible and improve its SEO ranking<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

    \n

    Style<\/b><\/p>\n<\/td>\n

    		\n
      \n
    • \n

      Reset image proportions<\/b>: bring the original image proportions back<\/p>\n<\/li>\n

    • \n

      Select the preferred corner radius units<\/b><\/p>\n<\/li>\n

    • \n

      Corner radius<\/b>: round the corners of your image or make it completely round<\/p>\n<\/li>\n

    • Hover effect: <\/b>You can add a zoom-in effect to image elements that activates when a visitor hovers over the image. This adds movement and liveliness to your website.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
    \n

    Action<\/b><\/p>\n<\/td>\n

    		\n
    \n

    Shape<\/b><\/p>\n<\/td>\n

    		\n
      \n
    • \n

      Set a preferred shape for the image element<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

    \n

    Animation<\/b><\/p>\n<\/td>\n

    		\n