{"id":884,"date":"2022-08-11T13:57:29","date_gmt":"2022-08-11T13:57:29","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/11\/6463582-hostinger-website-builder-how-to-change-website-colors\/"},"modified":"2026-03-20T11:37:49","modified_gmt":"2026-03-20T11:37:49","slug":"6463582-hostinger-website-builder-how-to-change-website-colors","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6463582-hostinger-website-builder-how-to-change-website-colors\/","title":{"rendered":"Hostinger Website Builder: How to Change Website Colors"},"content":{"rendered":"<p class=\"no-margin\">There are two ways to customize colors in <b>Hostinger Website Builder<\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_8909628122\" target=\"_blank\" rel=\"noopener\">Globally<\/a><\/b> &ndash; in the global website style settings<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_274585db87\" target=\"_blank\" rel=\"noopener\">Locally<\/a><\/b> &ndash; for each element or section individually<\/p>\n<\/li>\n<\/ul><h2 id=\"h_8909628122\">Global Styles Settings<\/h2><p class=\"no-margin\">Within the editor, expand the <b>Styles<\/b> panel on the left and open the <b>Colors <\/b>tab. Here, you&rsquo;ll find all colors that are used across your website. The most frequently used colors appear at the top of the list. Click on <b>Change <\/b>next to any color, then&nbsp;<strong>Select<\/strong>, pick a new color and click <strong>Accept<\/strong>, and it will replace the previous color all across your website:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/b7ef88f7-b248-4795-899b-51cc463e7ca5.jpg\" width=\"300\"><\/div><p class=\"no-margin\">Remember that you can still edit the appearance of individual elements and sections manually anytime (see below).<\/p><h2 id=\"h_274585db87\">Local Style Settings<\/h2><p class=\"no-margin\">Click once on a preferred element, select <b>Edit<\/b>, and change its color individually. For example, click once on a <b><a class=\"intercom-content-link\" href=\"\/support\/6436143-website-builder-text-element\" target=\"_blank\" rel=\"noopener\">text element<\/a><\/b> and select <b>Edit text<\/b> on the top left corner. Then, select (highlight) a portion of text you&rsquo;d like to change the color of and click on the color picker (if you double-click the text, the color picker will show up from the start):<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/7e83cb18-333f-4398-8cea-ac19ceb263ff.jpg\" alt=\"The color settings in a text element \"><\/div><p class=\"no-margin\">Learn more:<\/p><ul>\n<li>\n<p class=\"no-margin\">Customize the <b><a class=\"intercom-content-link\" href=\"\/support\/6463972-website-builder-customizing-the-style-of-the-navigation-menu\" target=\"_blank\" rel=\"noopener\">style of the website&rsquo;s navigation menu<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Change the <b><a class=\"intercom-content-link\" href=\"\/support\/6462732-website-builder-section-background\" target=\"_blank\" rel=\"noopener\">section background<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Add <b><a class=\"intercom-content-link\" href=\"\/support\/6632359-website-builder-how-to-add-text-background\" target=\"_blank\" rel=\"noopener\">background to text elements<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Customize <b><a class=\"intercom-content-link\" href=\"\/support\/6823389-website-builder-how-to-change-text-color-in-the-online-store\" target=\"_blank\" rel=\"noopener\">text color in the online store<\/a><\/b><\/p>\n<\/li>\n<\/ul><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">Note: if you wish to edit the Header navigation styles, you should do it via Header settings. Learn more about it <a href=\"https:\/\/www.hostinger.com\/support\/6463972-hostinger-website-builder-how-to-edit-the-header-section\/#h-edit-styles\"><strong>here<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to change colors 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-884","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463582-hostinger-website-builder-how-to-change-website-colors\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463582-hostinger-creador-de-sitios-web-como-personalizar-los-colores-de-la-web\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463582-hostinger-createur-de-sites-web-comment-personnaliser-les-couleurs-du-site-web\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6463582-hostinger-website-builder-cara-mengubah-warna-website\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463582-hostinger-svetainiu-kurimo-irankis-kaip-keisti-spalvas\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6463582-hostinger-criador-de-sites-como-personalizar-as-cores-do-site\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/884","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=884"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/884\/revisions"}],"predecessor-version":[{"id":8920,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/884\/revisions\/8920"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}