{"id":624,"date":"2023-09-08T09:11:00","date_gmt":"2023-09-08T09:11:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/09\/08\/8347670-hostinger-website-builder-how-to-change-the-header-section-color-on-specific-pages\/"},"modified":"2026-10-29T14:43:22","modified_gmt":"2026-10-29T14:43:22","slug":"8347670-hostinger-ai-builder-manual-mode-how-to-change-the-header-section-color-on-specific-pages","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8347670-hostinger-ai-builder-manual-mode-how-to-change-the-header-section-color-on-specific-pages\/","title":{"rendered":"Hostinger AI Builder: How to change the header color on specific pages in manual mode"},"content":{"rendered":"

Set only one header background color<\/a> by default in Hostinger AI Builder<\/a> manual mode. Keep the header transparent to make it match the color of each page’s first section, or use custom code to set different header colors on different pages.<\/p>

Enable a transparent header<\/h2>
    \n
  1. Click Edit header<\/strong>:
    \n\"Edit<\/li>\n
  2. Open the tab Style<\/strong><\/a>, and toggle on Transparent header<\/strong>. In this specific case, this would make the header purple, taking the color of the narrow section about free shipping:
    \n\"Header<\/li>\n<\/ol>

    Alternatively, if you want to use different header background colors on different pages, you can do so using custom code<\/a>.<\/p>

    \n

    Changes made via custom code will be visible in preview mode and online, but not within the editor.<\/p>\n<\/div>

    Set different header colors per page using custom code<\/h2>
      \n
    1. Copy the code below for your desired setup into a plain text editor: one specific page, multiple pages, or all pages except one.<\/li>\n
    2. Customize the code:\n
        \n
      1. Replace '#f00'<\/code> with your preferred color name (e.g., 'green'<\/code>) or HEX code (e.g., '#008000'<\/code>).<\/li>\n
      2. Replace the page path (e.g., '\/contact'<\/code>) with the slug<\/strong> of the page you want to target.<\/li>\n<\/ol>\n<\/li>\n
      3. In the AI Builder, go to (⋯) more → Integrations<\/strong>.<\/li>\n
      4. Paste the code into the Custom code<\/strong> field and save your changes.<\/li>\n
      5. Publish<\/a> your website to apply the changes.<\/li>\n<\/ol>

        What is a slug?<\/strong><\/h3>

        A slug is the part of a URL that identifies a specific page on your website. For example:<\/p>

          \n
        • \n

          https:\/\/domain.tld\/contact<\/code> → \/contact<\/code><\/p>\n<\/li>\n

        • \n

          https:\/\/domain.tld\/about-us<\/code> → \/about-us<\/code>
          To target the homepage, use \/<\/code> only.<\/p>\n<\/li>\n<\/ul>

          Change the header background color on one specific page<\/h3>

          Copy the code below and customize it:<\/p>

          \n

          <script><\/p>\n

          let newHeaderColor = ‘#f00’;<\/p>\n

          setInterval(() => {<\/p>\n

          if (document.querySelector(‘.background’)) {<\/p>\n

          if (window.location.pathname === ‘\/contact’) {<\/p>\n

          document.querySelector(‘.background’).style.backgroundColor = newHeaderColor;<\/p>\n

          document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {<\/p>\n

          dropdown.style.backgroundColor = newHeaderColor;<\/p>\n

          })<\/p>\n

          }<\/p>\n

          else {<\/p>\n

          document.querySelector(‘.background’).style.backgroundColor = ”;<\/p>\n

          document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {<\/p>\n

          dropdown.style.backgroundColor = ”;<\/p>\n

          })<\/p>\n

          }<\/p>\n

          }<\/p>\n

          });<\/p>\n

          <\/script><\/p>\n<\/div>

          Change the header background color on multiple pages<\/h3>

          Copy the code below and customize it:<\/p>

          <script>\r\n    let newHeaderColor = '#f00';\r\n    setInterval(() => {\r\n        if (document.querySelector('.background')) {\r\n            if (window.location.pathname === '\/' || window.location.pathname === '\/contact') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = newHeaderColor;\r\n                })\r\n            }\r\n            else {                document.querySelector('.background').style.backgroundColor = '';\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = '';\r\n                })\r\n            }\r\n        }\r\n    });\r\n<\/script><\/code><\/pre>
            \n
          • To change the header color on more pages, copy this part:<\/li>\n<\/ul>
            || window.location.pathname === '\/contact'<\/code><\/pre>
              \n
            • Change the slug (\/contact<\/code>) and add it to the end of the statement, for instance:<\/li>\n<\/ul>
              if (window.location.pathname === '\/contact' || window.location.pathname === '\/about-us' || window.location.pathname === '\/blog')\r\n<\/code><\/pre>
               <\/p>
              Change the header background color on all pages except one<\/h3>
              Copy the code below and customize it:<\/p>
              <script>\r\n    let newHeaderColor = '#f00';\r\n    setInterval(() => {\r\n        if (document.querySelector('.background')) {\r\n            if (window.location.pathname !== '\/') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = newHeaderColor;\r\n                })\r\n            }\r\n            else {                document.querySelector('.background').style.backgroundColor = '';\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = '';\r\n                })\r\n            }\r\n        }\r\n    });\r\n<\/script><\/code><\/pre>
              Your header now displays your chosen colors across the pages you’ve configured.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Set different header background colors on specific pages in Hostinger AI Builder manual mode using custom code.<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_content_updated_date":"","include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-624","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8347670-hostinger-ai-builder-manual-mode-how-to-change-the-header-section-color-on-specific-pages","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624","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=624"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":22608,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624\/revisions\/22608"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}