{"id":920,"date":"2022-08-02T17:06:34","date_gmt":"2022-08-02T17:06:34","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/02\/6437094-hostinger-website-builder-how-to-add-an-image-gallery\/"},"modified":"2026-09-23T07:24:25","modified_gmt":"2026-09-23T07:24:25","slug":"6437094-hostinger-ai-builder-manual-mode-how-to-add-an-image-gallery","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6437094-hostinger-ai-builder-manual-mode-how-to-add-an-image-gallery\/","title":{"rendered":"Hostinger AI Builder: How to add an image gallery in manual mode"},"content":{"rendered":"

Add an image gallery to your Hostinger AI Builder<\/a> manual mode website using the Gallery element or a third-party widget.<\/p>

Image gallery element<\/h2>
    \n
  1. Within the website editor, expand the Add element <\/b><\/a>panel on the left.<\/li>\n
  2. Drag and drop the Gallery<\/b> element to the preferred place on your web page:
    \n\"\"<\/li>\n
  3. Click on the element to see more options (edit, manage, duplicate, hide, delete, resize, etc.):
    \n\"\"<\/li>\n<\/ol>
    <\/div>
    \n\n\n\n\n
    \n

    Edit gallery<\/b><\/p>\n<\/td>\n

    		\n

    Manage gallery<\/b><\/p>\n<\/td>\n<\/tr>\n

    \n

    Click on Edit gallery<\/b> to open the settings<\/p>\n

    General <\/b>settings:<\/p>\n

      \n
    • \n

      Select the layout: grid on masonry<\/p>\n<\/li>\n

    • \n

      Set a number of images <\/b>per row<\/p>\n<\/li>\n

    • \n

      Change the gap between photos<\/p>\n<\/li>\n

    • \n

      Choose what happens on click: by default, a clicked gallery image is shown in the full-screen preview, but you can easily turn it off<\/p>\n<\/li>\n<\/ul>\n

      Animation<\/b> settings: How to Add Animations<\/a><\/b><\/p>\n<\/td>\n

    		\n

    Click on Manage gallery <\/b>(the small picture icon located to the right of the Edit gallery button) to do the following:<\/p>\n