{"id":712,"date":"2026-06-10T03:20:11","date_gmt":"2026-06-10T03:20:11","guid":{"rendered":"https:\/\/docs.wpinterface.com\/?p=712"},"modified":"2026-06-10T03:21:54","modified_gmt":"2026-06-10T03:21:54","slug":"page-header-configuration-guide","status":"publish","type":"post","link":"https:\/\/docs.wpinterface.com\/page-header-configuration-guide\/","title":{"rendered":"Page Header Configuration Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Our theme allows you to display your page and post titles in a dedicated, stylish banner area above your content, known as the <strong>Page Header<\/strong>. This is great for creating a magazine or premium corporate look.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Page Header Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To configure the global Page Header style, navigate to <strong>Appearance \u2192 Customize<\/strong> in your WordPress dashboard, then go to <strong>Header \u2192 Page Header<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Toggle the <strong>Enable Page Header<\/strong> switch ON to activate this layout globally for pages and posts (that have the title position set to &#8220;In Page Header&#8221;).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Layout &amp; Alignment<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Title Alignment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control where the title text sits within the banner area:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Left Align:<\/strong> The title sits flush with the left edge of your content container.<\/li>\n\n\n\n<li><strong>Center Align:<\/strong> The title is perfectly centered on the screen.<\/li>\n\n\n\n<li><strong>Right Align:<\/strong> The title sits flush with the right edge.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Page Title Spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The height of your Page Header banner is determined by its padding.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Page Title Spacing<\/strong> section to add padding (in pixels) to the <strong>Top<\/strong> and <strong>Bottom<\/strong> of the title.<\/li>\n\n\n\n<li>To create a tall, dramatic banner, increase these numbers (e.g., 100px top and bottom).<\/li>\n\n\n\n<li>You can set different spacing for Desktop, Tablet, and Mobile using the responsive device icons.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Design Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To make your Page Header stand out, you can apply custom backgrounds and colors under the <strong>Design Options<\/strong> section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Solid Color:<\/strong> Choose a flat background color for the banner.<\/li>\n\n\n\n<li><strong>Gradient:<\/strong> Create a beautiful color transition behind your title.<\/li>\n\n\n\n<li><strong>Image:<\/strong> Upload a background image to create a textured or photographic banner.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Font Color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you set a dark background color or image, you will need to change your text color so it remains readable.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> The color of the main Page\/Post Title.<\/li>\n\n\n\n<li><strong>Link Color &amp; Hover Color:<\/strong> The color of any links that might appear in the header area (like breadcrumbs, if enabled).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can add a border to the <strong>Top<\/strong> or <strong>Bottom<\/strong> of the Page Header area to separate it from the navigation menu above it or the content below it.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Typography<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want the titles inside this specific banner area to be larger or smaller than the default headings on your site, open the <strong>Typography<\/strong> section.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the <strong>Page Title Font Size<\/strong> slider to explicitly set the size of the title text in this area. You can adjust this independently for Desktop, Tablet, and Mobile.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Overriding on Specific Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The settings here dictate the <em>global default<\/em> for your Page Headers. However, the Business Interface theme allows you to override these settings on a <strong>per-page<\/strong> basis!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When editing any Page or Post in the WordPress editor, look for the theme&#8217;s Page Settings meta box. From there, you can upload a unique background image or change the colors just for that specific page.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your global Page Header is styled to your liking, click the blue <strong>Publish<\/strong> button at the top of the Customizer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our theme allows you to display your page and post titles in a dedicated, stylish banner area above your content, known as the Page Header. This is great for creating a magazine or premium corporate look. Accessing Page Header Settings To configure the global Page Header style, navigate to Appearance \u2192 Customize in your WordPress &hellip; <a href=\"https:\/\/docs.wpinterface.com\/page-header-configuration-guide\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Page Header Configuration Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[21],"class_list":["post-712","post","type-post","status-publish","format-standard","hentry","category-general","tag-business-interface"],"_links":{"self":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":2,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/712\/revisions\/714"}],"wp:attachment":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/media?parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/categories?post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/tags?post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}