iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To customize a Hostinger AI Builder template manually, choose Manual during site setup, select and preview a pre-made template, then use the editor’s Styles, Pages, and section and element controls to make it your own. Choose carefully: Hostinger says a created site’s template cannot be changed in place; switching templates means creating another site.
Choose and preview a template before creating the site
- In your Hostinger dashboard, go to Websites and select the hosting plan.
- Choose Create website, select AI Builder, then choose Manual.
- Open Pre-made templates. Browse categories such as Portfolio, Fashion, Marketing, Events, or eCommerce; categories help you browse, but Hostinger says the templates use the same editor tools.
- Preview a template and check its page structure and layout, then select Use template to create the site.
Hostinger’s template setup guide says the choice is fixed after the website is created. To start with a different template, you must create a new site, disconnect the domain from the old site, and connect it to the new one. If your goal is only to rearrange content or make a section full width, edit the existing layout instead of replacing the template.
Set the site-wide visual style
Open Styles on the left to adjust global colors, text, buttons, and animations. Text settings include headings, paragraphs, and navigation links. These global settings establish a consistent baseline, while selected sections and elements can still have their own styling.
Change a site-wide color
- Open Styles → Colors.
- Choose Change beside the color you want to replace.
- Select the replacement color and accept it to apply the change across the site.
For a one-off color adjustment, select the specific element, choose Edit, and use its local color controls. Header navigation has separate header settings. See Hostinger’s global styles instructions.
Edit text, images, buttons, and other elements
Open Add elements on the left. Drag an item to the desired position, or click it to insert it into the selected section. Select an element already on the page to open its settings. Available element types include text, running text, buttons, “Add to bag” buttons, images, galleries, video, and forms; Hostinger describes the manual-mode builder as offering 15 website elements in its elements guide.
Configure a button
Button settings are divided into General and Style tabs. General settings let you change the button text and link target, choose whether the link opens in a new tab, and set a nofollow option. Style settings control normal and hover fill and text colors, font, text size, and border radius. Use the link settings to make the button’s destination and behavior match its purpose; use the style settings to make it fit the design.
Reshape the page with sections
Sections control larger blocks of page content; elements are the individual items placed within them. To add a section, hover between two existing sections and choose Add section, then select a section type or template, or start with a blank section.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Select a section to adjust its background and layout. Available controls include snap-to-guide and snap-to-element behavior, row height, row gap, and resizing. You can also anchor, duplicate, hide or show, delete, move sections up or down, and copy or paste them. Hostinger’s section controls guide covers these options.
Rank #3
- Book - 1, 000 books to read before you die: a life-changing list (1000 before you die)
- Language: english
- Binding: hardcover
Manage pages and navigation
Use the Pages panel to add, rename, duplicate, and delete pages; edit a page URL; set the homepage; or hide a page from navigation. The panel also supports navigation links, dropdowns, and menu reordering.
The navigation menu is in the header. Select the header section to edit its settings. If the header or menu is not visible, check whether all pages have been hidden from navigation. Hostinger describes these controls in its manual-mode overview and template customization guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Review the mobile layout separately
Select the phone icon in the upper toolbar to switch to mobile view. Hostinger says the initial mobile order follows the order in which elements were added on desktop, but later desktop reordering does not automatically update that mobile order. Sort and review the mobile layout independently.
Deleting an element or section in desktop view also removes it from mobile view, and deletion in mobile view affects desktop too. Treat removal as a shared change, even though element order can be adjusted separately. See Hostinger’s mobile editing guidance and manual-mode overview.
Optional features you can add later
- Blog: Add blog functionality from the Blog panel.
- eCommerce: Hostinger’s tools support physical or digital products, services, appointments, and donations.
- Custom code: Put code intended for the document head in the Custom code field in integrations settings. For code intended for the page body, use the Embed code element.
These are optional additions, not prerequisites for customizing a template.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
