{"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-10-01T11:34:24","modified_gmt":"2026-10-01T11:34:24","slug":"6475040-hostinger-ai-builder-manual-mode-how-to-add-and-customize-website-sections","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475040-hostinger-ai-builder-manual-mode-how-to-add-and-customize-website-sections\/","title":{"rendered":"Hostinger AI Builder: How to add and customize website sections in manual mode"},"content":{"rendered":"

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

While using Hostinger AI Builder<\/a> manual mode<\/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>

Adding a new section<\/h2>

To add a new section, you can follow these steps:<\/p>

    \n
  1. Access the builder, place the cursor in between two sections, and click on Add section<\/b>:
    \n\"Website<\/li>\n
  2. On the left, choose the type of a section, generate section with AI<\/a>, or get creative with a blank section:
    \n\"\"<\/li>\n<\/ol>

    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>

    \"\"<\/div>

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

    \"Hostinger<\/div>

    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>

    Your website now has sections added, customized, and organized the way you want.<\/p>

    Additional resources for section types and features:<\/p>