{"id":752,"date":"2020-05-28T16:15:34","date_gmt":"2020-05-28T16:15:34","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=752"},"modified":"2026-08-07T11:21:24","modified_gmt":"2026-08-07T15:21:24","slug":"header-options-theme","status":"publish","type":"page","link":"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-web-platform\/site-settings\/header-options-theme\/","title":{"rendered":"Page Header Options"},"content":{"rendered":"\n\n\n<nav class=\"wp-block-ncst-table-of-contents\" aria-label=\"On This Page\">\n      <h2 class=\"eyebrow\">On This Page<\/h2>\n    <ul role=\"list\">\n                  <li role=\"listitem\">\n          <a href=\"#change-header\">Change the Header<\/a>\n        <\/li>\n                        <li role=\"listitem\">\n          <a href=\"#default-header\">Default Header<\/a>\n        <\/li>\n                        <li role=\"listitem\">\n          <a href=\"#split-header\">Split Header<\/a>\n        <\/li>\n                        <li role=\"listitem\">\n          <a href=\"#floating-box-header\">Floating Box Header<\/a>\n        <\/li>\n            <\/ul>\n<\/nav>\n\n\n\n\n<p class=\"wp-block-paragraph\">A header is essential on every page. It gives users a starting point for viewing content and is typically the first thing a screen reader picks up when scanning a page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each header serves as the page title, which starts the heading hierarchy that structures a site. In HTML, the page title is heading level one, or &#8220;H1.&#8221; All following headings build out that hierarchy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For more on heading hierarchy, an important part of digital accessibility, see the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/heading-block\/\">Heading Block documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"change-header\">Change the Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The NC State Theme offers three header options: Default, Split and Floating Box. The appropriate header depends on what area of the site you&#8217;re editing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To change the header layout, select the parent header area block (hover over the current header block&#8217;s icon for easy selection) and click on the paintbrush icon. This opens a menu of available header layout options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1808\" height=\"910\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/09\/header-selection-example.gif\" alt=\"Animated screenshot of header selection via selection of parent header block.\" class=\"wp-image-1016\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Available Settings<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Table of Contents<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">All three header options allow you to toggle on a Table of Contents to increase the navigability of lengthy pages by creating an organized list of anchor links. This page currently uses the Table of Contents feature.<\/p>\n\n\n<div class=\"is-text wp-block-ncst-buttons\">\n    \n<div class=\"is-style-secondary wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/table-of-contents-block\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Learn more about Table of Contents<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n  <\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"default-header\">Default Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Of the three header types, the Default will likely be the most frequently used. Most subpages will want to use the Default header, since it will in many cases be linked to from a homepage or top-level landing page using the Split or Floating Box header. The Default is the most straightforward, since it only allows for adjusting the header text and providing a subtitle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See an example of the Default Header below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default.png\" alt=\"Example of a default header with a subtitle, heading and paragraph text.\" class=\"wp-image-39987\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"split-header\">Split Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Split Header includes an image alongside a content box with a heading, subtitle and the option to add a call to action button that links to another page. It is best used on homepages or top-level landing pages of specific menus. This header is visually eye-catching and a great way to leverage stunning photography that can lead users to explore a site further.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See an example of the Split Header below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split.png\" alt=\"Splitbox header with an image on one side and a red box containing header and subtitle text on the other, with a heading and paragraph below\" class=\"wp-image-39988\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Split Header Settings<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To see the available settings, click on the Settings menu next to the blue Save button, then click on the content box. Available settings include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Focal point picker\n<ul class=\"wp-block-list\">\n<li>Select which part of the image is central for different screen sizes<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Content box settings\n<ul class=\"wp-block-list\">\n<li>Toggle on the CTA (call to action) to add a button. Toggle off to remove it<\/li>\n\n\n\n<li>Change the location of the box (left or right)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Color settings\n<ul class=\"wp-block-list\">\n<li>Change the background color of the content box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"floating-box-header\">Floating Box Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Floating Box Header, <strong>available only in the Pro and Premium tiers of the NC State Web Platform<\/strong>, includes a content box over a full-width image that features a heading, subtitle and the option to add a call to action button that links to another page. It also supports a silent, looping moving media file in place of a static image; specifications are below. It is best used on homepages or top-level landing pages of specific menus. This header is visually eye-catching and a great way to leverage stunning photography or video that can lead users to explore a site further.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See an example of the Floating Box Header below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box.png\" alt=\"A floating box header with an image in the background and a floated redbox over the image with the header and subtitle text.\" class=\"wp-image-39989\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Floating Box Header Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To see the available settings, click on the Settings menu next to the blue Save button, then click on the content box. Available settings include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Focal point picker\n<ul class=\"wp-block-list\">\n<li>Select which part of the image is central for different screen sizes<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Moving media file\n<ul class=\"wp-block-list\">\n<li>Gives you the option to upload a silent, looping video<\/li>\n\n\n\n<li>Video specifications\/requirements:\n<ul class=\"wp-block-list\">\n<li><strong>Video length:<\/strong> 10 seconds or less<\/li>\n\n\n\n<li><strong>Video size: <\/strong>1500 x 643 pixels<\/li>\n\n\n\n<li><strong>File type: <\/strong>MP4, without audio <\/li>\n\n\n\n<li><strong>File size: <\/strong>5 MB or less<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Upload an image as a backup in case of a weak network connection or if the page is viewed on a mobile device.<\/li>\n\n\n\n<li><strong>Each website is limited to one moving media file.<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Content box settings\n<ul class=\"wp-block-list\">\n<li>Toggle on the CTA (call to action) to add a button. Toggle off to remove it<\/li>\n\n\n\n<li>Change the location of the box (left or right)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Color settings\n<ul class=\"wp-block-list\">\n<li>Change the background color of the content box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A header is essential on every page. It gives users a starting point for viewing content and is typically the first thing a screen reader picks up when scanning a page. Each header serves as the page title, which starts the heading hierarchy that structures a site. In HTML, the page title is heading level&hellip;<\/p>\n","protected":false},"author":82,"featured_media":0,"parent":179,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"A look at the various header options available for pages.\",\"backgroundColor\":\"custombg_one\",\"boxPosition\":\"left\",\"ctaNum\":\"one\",\"useCTA\":false,\"imageID\":39877,\"imageURL\":\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/4-17-theme-release.jpg\",\"imageAlt\":\"Yellow Black Eyed Susan Flowers in front of Talley Student Union\",\"focalPoint\":{\"x\":0.5,\"y\":0.34}}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-752","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":37,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/752\/revisions"}],"predecessor-version":[{"id":40168,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/752\/revisions\/40168"}],"up":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/179"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}