{"id":862,"date":"2022-08-16T10:56:08","date_gmt":"2022-08-16T10:56:08","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6475040-hostinger-website-builder-how-to-add-and-customize-website-sections\/"},"modified":"2026-03-16T12:12:06","modified_gmt":"2026-03-16T12:12:06","slug":"6475040-hostinger-website-builder-how-to-add-and-customize-website-sections","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475040-hostinger-website-builder-how-to-add-and-customize-website-sections\/","title":{"rendered":"Hostinger Website Builder: How to Add and Customize Website Sections"},"content":{"rendered":"

Together with pages<\/a><\/b> and elements<\/a><\/b>, sections are important structural components of a website. <\/p>

\n<\/p>

While using Hostinger Website Builder<\/b>, you may choose from a variety of section types: image gallery, footer, contact, etc. You can even insert blank sections into your page and design them from scratch – all website sections are easily customizable.<\/p>

\n<\/p>

Adding a New Section<\/h2>

To add a new section, access the builder, place the cursor in between two sections, and click on Add section<\/b>:<\/p>

\n<\/p>

\"The<\/div>

\n<\/p>

On the left, choose the type of a section or get creative with a blank section:<\/p>

\n<\/p>

\"Types<\/div>

\n<\/p>

If you select a specific type of section, you’ll get a variety of section templates to choose from. Click on the preferred template, and such a section will be inserted into your page:<\/p>

\n<\/p>

\"Section<\/div>

\n<\/p>

Remember that you can easily personalize sections: add, remove, or re-organize elements, change the background, and so on!<\/p>

\n<\/p>

Customize Section Settings<\/b><\/h2>

To open section settings, click on the section in question. You’ll see the settings menu in the top-right corner of a section. There’s also a section height handle on the bottom section border – drag it up or down to resize the section:<\/p>

\n<\/p>

\"Section<\/div>

\n<\/p>

Here, you can do the following:<\/p>

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

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

\n

It consists of three main tabs:<\/p>\n

    \n
  1. \n

    Background<\/b> – change the section background<\/a><\/b><\/p>\n<\/li>\n

  2. \n

    Layout<\/b> – these options help align elements and maintain consistent spacing; these settings are saved for each section individually:<\/p>\n

      \n
    1. \n

      Snap to guides<\/p>\n<\/li>\n

    2. \n

      Snap to elements<\/p>\n<\/li>\n

    3. \n

      Row height<\/p>\n<\/li>\n

    4. \n

      Row gap<\/p>\n<\/li>\n<\/ol>\n<\/li>\n

    5. \n

      Anchor<\/b> – create a link to a section<\/a><\/b><\/p>\n<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n

\n

Generate image<\/b><\/p>\n<\/td>\n

\n

Use the AI Image Generator<\/a><\/b> to create an authentic image background for the section<\/p>\n<\/td>\n<\/tr>\n

\n

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

\n

Duplicate a section<\/p>\n<\/td>\n<\/tr>\n

\n

Hide\/Show<\/b><\/p>\n<\/td>\n

\n

How to Hide Elements and Sections<\/a><\/b><\/p>\n<\/td>\n<\/tr>\n

\n

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

\n

Delete a section<\/p>\n<\/td>\n<\/tr>\n

\n

Move up\/down<\/b><\/p>\n<\/td>\n

\n

Move a section up or down<\/p>\n<\/td>\n<\/tr>\n

\n

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

\n

How to Copy and Paste Website Sections<\/a><\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Learn how to create and manage website sections using Hostinger 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":[279],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","hentry","category-website-sections"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6475040-hostinger-website-builder-how-to-add-and-customize-website-sections\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6475040-hostinger-creador-de-sitios-web-como-agregar-y-administrar-secciones\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6475040-hostinger-createur-de-sites-web-comment-ajouter-et-gerer-les-sections-d-un-site-web\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6475040-hostinger-website-builder-bagaimana-cara-menambahkan-dan-mengelola-bagian-website\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6475040-hostinger-svetainiu-kurimo-irankis-svetaines-skiltys\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6475040-hostinger-criador-de-sites-como-adicionar-e-gerenciar-secoes-no-site\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/862","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=862"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"predecessor-version":[{"id":3524,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/862\/revisions\/3524"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}