{"id":4840,"date":"2026-04-04T07:43:56","date_gmt":"2026-04-04T07:43:56","guid":{"rendered":"https:\/\/docs.themeansar.com\/docs\/ansar-elements\/site-builder\/header\/"},"modified":"2026-04-04T09:31:39","modified_gmt":"2026-04-04T09:31:39","slug":"header","status":"publish","type":"docs","link":"https:\/\/docs.themeansar.com\/docs\/ansar-elements\/site-builder\/header\/","title":{"rendered":"Header"},"content":{"rendered":"\n

The Header Template Builder<\/strong> in Ansar Elements for Elementor allows creating custom headers visually with Elementor.
Instead of using a theme\u2019s default header, this feature gives full control to design and style the header using Ansar Elements widgets such as Site Logo, Menus, Search, Site Title, Tagline, Social Icons<\/strong>, and more.
The template can then be assigned globally or conditionally to different parts of the website.<\/p>\n\n\n\n

\n
<\/div>\n\n\n\n

How to Create a Header Template<\/h4>\n\n\n\n

Follow these steps to create a custom header with Site Builder:<\/p>\n\n\n\n

    \n
  1. Navigate to the WordPress Dashboard<\/strong>.<\/li>\n\n\n\n
  2. In the left sidebar, go to Ansar Elements \u2192 Site Builder<\/strong>.<\/li>\n\n\n\n
  3. Select the Header<\/strong> tab and click Create Template<\/strong>.<\/li>\n\n\n\n
  4. Choose Display Conditions<\/strong> (Only For Pro)<\/strong>, such as:\n
      \n
    • Entire Site<\/strong> \u2013 apply this header across the whole site.<\/li>\n\n\n\n
    • Specific Pages<\/strong> \u2013 apply only to selected pages.<\/li>\n\n\n\n
    • Categories\/Archives<\/strong> \u2013 apply to certain post categories or archives.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Click Create Template<\/strong> to launch the Elementor editor.<\/li>\n\n\n\n
    • Design the header using Ansar Elements widgets like Site Logo<\/strong>, Menu<\/strong>, Search<\/strong>, etc.<\/li>\n\n\n\n
    • Once finished, click Publish<\/strong> to make the header active based on the display conditions set.<\/li>\n<\/ol>\n<\/div>\n\n\n\n
      \n
      <\/div>\n\n\n\n

      Content & Display Settings<\/h4>\n\n\n\n

      When creating a header, the Site Builder provides:<\/p>\n\n\n\n

        \n
      • Template Name<\/strong>: Assign a unique name for easy identification.<\/li>\n\n\n\n
      • Display Conditions<\/strong>: Control where the header appears (entire site, single page, archive, etc.).<\/li>\n\n\n\n
      • Edit with Elementor<\/strong>: Use Elementor\u2019s drag-and-drop interface to design the header visually.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
        \n
        <\/div>\n\n\n\n

        Styling Controls<\/h4>\n\n\n\n

        Since the header template is built with Elementor, all styling settings<\/strong> of Ansar Elements widgets are available:<\/p>\n\n\n\n

          \n
        • Container Styling<\/strong>: Background color, gradient, image, padding, margin, and box-shadow.<\/li>\n\n\n\n
        • Widget Styling<\/strong>: Each widget (Logo, Menu, Search, etc.) includes its own color, typography, alignment, hover, and spacing controls.<\/li>\n\n\n\n
        • Responsive Controls<\/strong>: Adjust the header design for desktop, tablet, and mobile separately.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
          \n
          <\/div>\n\n\n\n

          Pro Tip<\/h4>\n\n\n\n
            \n
          • For news and magazine sites, combining the Site Logo<\/strong>, Navigation Menu<\/strong>, and Search Widget<\/strong> provides an optimal user experience.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"featured_media":0,"parent":4820,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-4840","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs\/4840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/comments?post=4840"}],"version-history":[{"count":1,"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs\/4840\/revisions"}],"predecessor-version":[{"id":4897,"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs\/4840\/revisions\/4897"}],"up":[{"embeddable":true,"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs\/4820"}],"next":[{"title":"Footer","link":"https:\/\/docs.themeansar.com\/docs\/ansar-elements\/site-builder\/footer\/","href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/docs\/4841"}],"wp:attachment":[{"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/media?parent=4840"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.themeansar.com\/wp-json\/wp\/v2\/doc_tag?post=4840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}