Website Header

The website header is a consistent presence atop every page, featuring essential elements such as the website title, logo, navigation menu, etc. The Website Header Content Model is meticulously crafted to capture and organize crucial information for the header of your website, ensuring a cohesive and impactful brand experience.

Prerequisites

• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin or Stack Developer

Schema for Website Header Content Model

The Website Header Content Model contains one Content Type named Header.

Schema for Header Content Type

• Title: This is a Title field that displays the title of the website header entry. This is a mandatory field and must be unique.
• Logo: Logo is a File field that allows you to choose the website logo and add it to the entry. This is a mandatory field. Ideally, the image file for the logo should be less than 100KB in a PNG format.
• Navigation Menu: This is a Group field which can be used to add multiple navigation items, with the following fields in it:
  • Label: This Single Line Textbox field is used to name the navigation items in the Navigation Menu.
  • Call To Action: This is a Link field where you can add the URLs to the navigation items in the Navigation Menu.
  • Open in New Tab: This is a Boolean field that, if enabled, lets you open the link in a new tab.
• Notification Bar: This is a Group field with the following fields in it:
  • Announcement Text: You can add any announcement to your website using this JSON Rich Text Editor field.
  • Show Announcement?: You can enable or disable the announcement in this Boolean field.

Additional Resource: You can import the prebuilt Content Models via the Marketplace (refer to How to Import a Content Model) or via the CMS (refer to Import Prebuilt Content Models to your Stack). Refer the Website Header Content Modeling documentation to understand how to model the "Website Header".

Here’s how your Website Header looks after you publish the entry: