{"id":852,"date":"2022-08-16T14:29:54","date_gmt":"2022-08-16T14:29:54","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6475646-hostinger-website-builder-how-to-customize-a-website-template\/"},"modified":"2026-03-16T12:12:06","modified_gmt":"2026-03-16T12:12:06","slug":"6475646-hostinger-website-builder-how-to-customize-a-website-template","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475646-hostinger-website-builder-how-to-customize-a-website-template\/","title":{"rendered":"Hostinger Website Builder: How to Customize a Website Template"},"content":{"rendered":"<p class=\"no-margin\">Personalizing <b>Hostinger Website Builder<\/b> templates is easy and enjoyable!<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_d51aac3a05\" target=\"_blank\" class=\"intercom-content-link\">Changing Colors<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_285a5b2297\" target=\"_blank\" class=\"intercom-content-link\">Changing fonts<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_dca8d9e95c\" target=\"_blank\" class=\"intercom-content-link\">Adding New Items<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_ab9466c07d\" target=\"_blank\" class=\"intercom-content-link\">Changing Buttons<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_bec443fceb\" target=\"_blank\" class=\"intercom-content-link\">Editing the Navigation Menu<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_dff2373dc9\" target=\"_blank\" class=\"intercom-content-link\">Copy-Pasting Sections and Elements<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_ea5471644c\" target=\"_blank\" class=\"intercom-content-link\">Duplicating Items<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_15f90e79ec\" target=\"_blank\" class=\"intercom-content-link\">Deleting or Hiding Items<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_ed99b23b6a\" target=\"_blank\" class=\"intercom-content-link\">Adding Custom Code<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_d7cce1e54a\" target=\"_blank\" class=\"intercom-content-link\">Editing the Mobile Version<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_62e6cb515e\" target=\"_blank\" class=\"intercom-content-link\">Adding a Blog<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_d2fcbac6aa\" target=\"_blank\" class=\"intercom-content-link\">Enabling eCommerce Tools<\/a><\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><h2 id=\"h_d51aac3a05\">Changing Colors<\/h2><p class=\"no-margin\">You can customize colors in two ways: globally and locally. Learn more: <b><a href=\"\/support\/6463582-website-builder-how-to-customize-website-colors\" target=\"_blank\" class=\"intercom-content-link\">How to customize website colors<\/a><\/b><\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_285a5b2297\">Changing fonts<\/h2><p class=\"no-margin\">Just like colors, you can customize text styles in two ways: globally and locally. Learn more: <\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6463286-website-builder-how-to-change-text-style\" target=\"_blank\" class=\"intercom-content-link\">How to Change Text Style<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6539079-website-builder-how-to-customize-text-style-in-the-online-store\" target=\"_blank\" class=\"intercom-content-link\">How to Customize Text Style in the Online Store<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6435859-website-builder-how-to-upload-a-custom-font\" target=\"_blank\" class=\"intercom-content-link\">How to Upload a Custom Font<\/a><\/b> <\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><h2 id=\"h_dca8d9e95c\">Adding New Items<\/h2><p class=\"no-margin\">You can add an unlimited number of <b>pages<\/b>, <b>sections<\/b>, and <b>elements<\/b> to your website:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6456705-website-builder-how-to-add-more-pages\" target=\"_blank\" class=\"intercom-content-link\">Add More Pages<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6475040-website-builder-how-to-add-and-manage-website-sections\" target=\"_blank\" class=\"intercom-content-link\">Add and Customize Website Sections<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6435894-website-builder-how-to-add-and-customize-website-elements\" target=\"_blank\" class=\"intercom-content-link\">Add and Customize Website Elements<\/a><\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><h2 id=\"h_ab9466c07d\">Changing Buttons<\/h2><p class=\"no-margin\">Click on a <b><a href=\"\/support\/6435964-website-builder-button-element\" target=\"_blank\" class=\"intercom-content-link\">button element<\/a><\/b> and select <b>Edit button <\/b>to open its settings. There are two tabs of them (<b>General <\/b>and <b>Style<\/b>):<\/p><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>General<\/b><\/p>\n<\/td>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Style<\/b><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Button text<\/b>: rename the button<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Link to<\/b>: set up <b><a href=\"\/support\/6454367-website-builder-how-to-add-links\" target=\"_blank\" class=\"intercom-content-link\">linking options<\/a><\/b> <\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Open in new tab<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Make link <a href=\"\/support\/6615140-website-builder-dofollow-and-nofollow-links\" target=\"_blank\" class=\"intercom-content-link\">nofollow<\/a><\/b>: search engines will ignore the link<br>&#8203;<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Fill color<\/b> (normal and hover)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text color<\/b> (normal and hover)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text font<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text size<\/b>; <b><a href=\"\/support\/6491230-website-builder-how-to-resize-elements-and-sections\" target=\"_blank\" class=\"intercom-content-link\">enlarging<\/a><\/b> the button text size also affects the size of the button itself<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Border radius<\/b>: change the <b><a href=\"\/support\/6614604-website-builder-how-to-change-the-button-shape\" target=\"_blank\" class=\"intercom-content-link\">button shape<\/a><\/b><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Learn more: <b><a href=\"\/support\/6570087-website-builder-add-to-bag-buttons\" target=\"_blank\" class=\"intercom-content-link\">&ldquo;Add to bag&rdquo; buttons<\/a> <\/b>&#128161; <\/p>\n<\/div><p class=\"no-margin\">\n<\/p><h2 id=\"h_bec443fceb\">Editing the Navigation Menu<\/h2><p class=\"no-margin\">The navigation menu is visible in the <b>header <\/b>section, which is the topmost section of your website. The header can also contain a <b><a href=\"\/support\/6435805-website-builder-logo\" target=\"_blank\" class=\"intercom-content-link\">logo<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">To edit the navigation menu, click on the header, and you&rsquo;ll see the settings menu on the bottom-right side of the header section:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/514ebfe8-e1bf-4cdc-9324-7419c3677aad.jpg\" alt=\"Header management options in Hostinger Website Builder\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">If you can&rsquo;t see the header section, it&rsquo;s likely that all your website pages are<b> <a href=\"\/support\/6456821-website-builder-hiding-a-page-from-the-menu-bar\" target=\"_blank\" class=\"intercom-content-link\">hidden from the navigation menu<\/a><\/b><\/p>\n<\/div><p class=\"no-margin\">\n<\/p><h2 id=\"h_dff2373dc9\">Copy-Pasting Sections and Elements<\/h2><p class=\"no-margin\">To speed up the website-building process, you can copy-paste elements and sections to other sections or even other pages of your website:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6475073-website-builder-copy-and-paste-website-sections\" target=\"_blank\" class=\"intercom-content-link\">Copy and Paste Website Sections<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6475096-website-builder-copy-and-paste-website-elements\" target=\"_blank\" class=\"intercom-content-link\">Copy and Paste Website Elements<\/a><\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><h2 id=\"h_ea5471644c\">Duplicating Items<\/h2><p class=\"no-margin\">To save up some time, you can duplicate website pages, sections, and elements:<\/p><ul>\n<li>\n<p class=\"no-margin\">To duplicate a<b> website page<\/b>, follow <b><a href=\"\/support\/6498490-website-builder-how-to-duplicate-a-website-page\" target=\"_blank\" class=\"intercom-content-link\">this guide<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">To duplicate an <b>element<\/b> or <b>section<\/b>, click on it and hit the <b>Duplicate<\/b> button<\/p>\n<p class=\"no-margin\">\n<\/p><\/li>\n<\/ul><h2 id=\"h_15f90e79ec\">Deleting or Hiding Items<\/h2><p class=\"no-margin\">You can easily remove &ndash; delete, or hide &ndash; irrelevant content from your website:<\/p><ul>\n<li>\n<p class=\"no-margin\">Pages:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6466176-website-builder-how-to-delete-a-website-page\" target=\"_blank\" class=\"intercom-content-link\">Delete a Website Page<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6456821-website-builder-how-to-hide-a-page-from-the-website-s-navigation-menu\" target=\"_blank\" class=\"intercom-content-link\">Hide a Page From the Navigation Menu<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6456836-website-builder-how-to-hide-a-page-from-search-engines\" target=\"_blank\" class=\"intercom-content-link\">Hide a Page From Search Engines<\/a><\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\">Elements and sections:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">To delete an <b>element<\/b> or <b>section<\/b>, click on it and hit the <b>Delete <\/b>button (the trash bin icon)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/6721428-website-builder-how-to-hide-elements-or-sections-on-desktop-mobile\" target=\"_blank\" class=\"intercom-content-link\">Hide Elements and Sections<\/a><\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><h2 id=\"h_ed99b23b6a\">Adding Custom Code<\/h2><p class=\"no-margin\">There are two ways to add custom code to your website, and it depends on the type of code you want to add.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">If code needs to be added to the <b>&lt;head&gt;&lt;\/head&gt;<\/b> part of your website&rsquo;s source code, use the <b><a href=\"\/support\/6445594-website-builder-adding-a-custom-code-to-the-head-part-of-a-website-s-code\" target=\"_blank\" class=\"intercom-content-link\">Custom code<\/a><\/b> field in your website&rsquo;s <b>integrations settings<\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">If code needs to be added to the <b>&lt;body&gt;&lt;\/body&gt;<\/b> part of your website&rsquo;s source code, use the <b><a href=\"\/support\/6463152-website-builder-embed-code\" target=\"_blank\" class=\"intercom-content-link\">Embed code<\/a><\/b> element.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_d7cce1e54a\">Customizing the Mobile Version<\/h2><p class=\"no-margin\">Make sure the <b><a href=\"\/support\/6475658-website-builder-mobile-mode\" target=\"_blank\" class=\"intercom-content-link\">mobile version<\/a><\/b> of your website looks good. Switch to the mobile view by clicking on the<b> mobile phone icon<\/b> in the upper toolbar:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/f69bd341-b7b5-4339-bffd-dbab61054c7c.jpg\" alt=\"The option to check the mobile version in Hostinger Website Builder\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">By default, <b>the mobile website&rsquo;s version displays elements in the order they&rsquo;ve been added to the desktop version<\/b>. 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.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_62e6cb515e\">Adding a Blog<\/h2><p class=\"no-margin\">You can <b><a href=\"\/support\/6462842-website-builder-how-to-create-a-blog\" target=\"_blank\" class=\"intercom-content-link\">add a blog<\/a><\/b> to any website template. Expand the <b>Blog<\/b> panel on the left and click on <b>Start a blog<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/86d4e121-1301-4dc7-a6fc-572453579c3e.jpg\" width=\"270\"><\/div><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/c1d5fc39-768d-4199-b027-36d08c7e527b.jpg\" width=\"300\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_d2fcbac6aa\">Enabling eCommerce Tools<\/h2><p class=\"no-margin\">With the help of <b><a href=\"\/support\/6538310-website-builder-how-to-create-an-online-store\" target=\"_blank\" class=\"intercom-content-link\">eCommerce tools<\/a><\/b>, you can do the following:<\/p><ul>\n<li>\n<p class=\"no-margin\">Sell physical products<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Sell digital products<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Sell services<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Accept appointments<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Accept donations<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">To learn more about builder capabilities, refer to this collection of help articles: <b><a href=\"https:\/\/support.hostinger.com\/en\/collections\/3587143-website-builder\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Website Builder<\/a> &#128640; <\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to customize any website template 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":[281],"tags":[],"class_list":["post-852","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6475646-hostinger-website-builder-how-to-customize-a-website-template\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6475646-hostinger-creador-de-sitios-web-como-personalizar-una-plantilla-de-sitio-web\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6475646-hostinger-createur-de-site-web-comment-personnaliser-un-modele-de-site-web\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6475646-hostinger-svetainiu-kurimo-irankis-kaip-redaguoti-svetaines-sablona\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6475646-hostinger-criador-de-sites-como-personalizar-um-site\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/852","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=852"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/852\/revisions"}],"predecessor-version":[{"id":3495,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/852\/revisions\/3495"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}