All Collections
Website Builder
Website Builder: How to Customize a Website Template
Website Builder: How to Customize a Website Template

Learn how to customize any website template using Hostinger Website Builder

Updated over a week ago

Personalizing website templates is easy and enjoyable:

Customize colors

You can customize colors in two ways: globally and locally.

Change fonts

Just like colors, you can customize text styles in two ways: globally and locally.

Learn more:

Add new items: pages, sections, elements

You can add an unlimited number of pages, sections, and elements to your website.

Customize buttons

Click on a button element and select Edit button to open its settings. There are two tabs of them (General and Style):



Button text: rename the button

Fill color: change the button color (normal and hover)

Link to: set up linking options

You can link a button to a specific page or section within your website, any URL, phone number, email address, or file

Text color: change the button text color (normal and hover)

Open in new tab: the link will open in a new browser tab

Text font: change the button text font

Make link nofollow: search engines will ignore the link

Learn more: Dofollow and nofollow links

Text size: change the button text size; enlarging the button text size also affects the size of the button itself

Border radius: change the button shape

Learn more: How to change the button shape (globally)

Edit the website's navigation menu

The navigation menu is visible in the header section which is the topmost section of your website. The header can also contain a logo.

To edit the navigation menu, click on the header and you'll see the settings menu on the bottom-right side of the header section:

NOTE: If you can't see the header section, it's likely that all your website pages are hidden from the navigation menu

Copy-paste sections and elements

To speed up the website-building process, you can copy-paste elements and sections to other sections or even other pages of your website:

Duplicate pages, sections, elements

To save up some time, you can duplicate website pages, sections, and elements:

Delete or hide pages, sections, elements

You can easily remove – delete or hide – irrelevant content from your website.


Elements and sections:

Add a custom code

There are two ways to add a custom code to your website, and it depends on the type of code you want to add.

If the code needs to be added to the <head></head> part of your website's source code, use the Custom code field in your website's integrations settings.

If the code needs to be added to the <body></body> part of your website's source code, use the Embed code element.

Customize the mobile version of your website

Make sure the mobile version of your website looks good. Switch to the mobile view by clicking on the mobile phone icon in the upper toolbar:

By default, the mobile website's version displays elements in the order they've been added to the desktop version. Even if you, later on, reorder elements on the desktop, these changes are not automatically applied to the mobile version. You can sort elements on the mobile view manually. This way, you can lay out elements differently on desktop and mobile views.

Add a blog

You can add a blog to any website template. Simply expand the Blog panel on the left and click Start a blog:

Enable the eCommerce platform in any website template

With the help of eCommerce tools, you can do the following:

  • Sell physical products

  • Sell digital products

  • Sell services

  • Accept appointments

  • Accept donations

Did this answer your question?