{"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-03-16T12:12:08","modified_gmt":"2026-03-16T12:12:08","slug":"6437094-hostinger-website-builder-how-to-add-an-image-gallery","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6437094-hostinger-website-builder-how-to-add-an-image-gallery\/","title":{"rendered":"Hostinger Website Builder: How to Add an Image Gallery"},"content":{"rendered":"<p class=\"no-margin\">In <b>Hostinger Website Builder<\/b>, there are several ways to add an image gallery:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_29b3419880\" target=\"_blank\" rel=\"noopener\">Using the image gallery element<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_f780b6e9ed\" target=\"_blank\" rel=\"noopener\">Embedding a third-party widget<\/a><\/b><\/p>\n<\/li>\n<\/ul><h2 id=\"h_29b3419880\">Image Gallery Element<\/h2><p class=\"no-margin\">Within the website editor, expand the <b>Add element <\/b>panel on the left. Drag and drop the<b> Gallery<\/b> element to the preferred place on your web page:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/5f923cf7-671c-411a-b00d-4da9966537e8.jpg\" width=\"400\"><\/div><p class=\"no-margin\">Click on the element to see more options (edit, manage, duplicate, hide, delete, resize, etc.):<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/0e34fb01-6918-477a-8afb-13bbed7604ca.jpg\" alt=\"Galery management element options in Hostinger Website Builder\"><\/div><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Edit gallery<\/b><\/p>\n<\/td>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Manage gallery<\/b><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p class=\"no-margin\">Click on <b>Edit gallery<\/b> to open the settings<\/p>\n<p class=\"no-margin\"><b>General <\/b>settings:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Select the layout: grid on masonry<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Set a number of images<b> <\/b>per row<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Change the gap between photos<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">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<p class=\"no-margin\"><b>Animation<\/b> settings: <b><a class=\"intercom-content-link\" href=\"\/support\/6463358-website-builder-how-to-add-animations\" target=\"_blank\" rel=\"noopener\">How to Add Animations<\/a><\/b><\/p>\n<\/td>\n<td>\n<p class=\"no-margin\">Click on <b>Manage gallery <\/b>(the small picture icon located to the right of the Edit gallery button) to do the following:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Add more images<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Sort images: drag and drop images to switch their places<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Delete images: hover the mouse over an unnecessary image, and you&rsquo;ll see a little trash bin icon &ndash; click it to delete the image<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><p class=\"no-margin\"><b>NOTE<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">The <b>grid<\/b> <b>layout<\/b> displays images in strict squares and the <b>masonry layout<\/b> displays images in their original proportions:<\/p>\n<div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/11\/f0218343-cc86-4f43-ae3e-86d3b4e3bc1b.jpg\"><\/div>\n<\/li>\n<\/ul><h2 id=\"h_f780b6e9ed\">Third-Party Image Gallery Widget<\/h2><p class=\"no-margin\">If you want something more custom, feel free to use third-party tools. <b><a class=\"intercom-content-link\" href=\"https:\/\/elfsight.com\/\" target=\"_blank\" rel=\"noopener\">Elfsight<\/a> <\/b>is one of many platforms that offer various embeddable widgets, including the <b><a class=\"intercom-content-link\" href=\"https:\/\/elfsight.com\/photo-gallery-widget\/\" target=\"_blank\" rel=\"noopener\">Photo Gallery widget<\/a><\/b>.<\/p><p class=\"no-margin\">On <b>Elfsight<\/b>, you&rsquo;ll find a variety of image gallery templates. Once you select a template, customize it to your liking:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/11\/94a05432-6b11-474f-9ba1-11fab67f2244.jpg\" alt=\"Creating a gallery widget on Elfsight\"><\/div><p class=\"no-margin\">Once you&rsquo;re finished creating your widget, save it:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/11\/847856a7-1f38-4e48-94e6-3fe78d64af35.jpg\" alt=\"Creating a gallery widget on Elfsight\"><\/div><p class=\"no-margin\">Then, click on <b>Add to website <\/b>and copy the integration code:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/11\/15aa7e1e-7430-4af1-99dd-c3dd60ebeda6.jpg\" alt=\"Copying the integration code on Elfsight\"><\/div><p class=\"no-margin\">Paste the code into your website using the <b><a class=\"intercom-content-link\" href=\"\/support\/6463152-website-builder-embed-code\" target=\"_blank\" rel=\"noopener\">embed code element<\/a><\/b> and <b><a class=\"intercom-content-link\" href=\"\/support\/6491230-website-builder-how-to-resize-elements-and-sections\" target=\"_blank\" rel=\"noopener\">resize<\/a> <\/b>it if necessary. Once done, <b><a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-updating-a-website\" target=\"_blank\" rel=\"noopener\">update your website<\/a><\/b> for the changes to reflect online.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to add an image gallery to your website using the website builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[280],"tags":[],"class_list":["post-920","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6437094-hostinger-website-builder-how-to-add-an-image-gallery\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6437094-hostinger-creador-de-sitios-web-como-agregar-una-imagen-a-la-galeria\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6437094-hostinger-createur-de-site-web-comment-ajouter-une-galerie-d-images\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6437094-hostinger-svetainiu-kurimo-irankis-galerijos-elementas\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6437094-hostinger-criador-de-sites-como-adicionar-uma-galeria-de-imagens\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=920"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"predecessor-version":[{"id":8599,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/920\/revisions\/8599"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}