Hero Banner

The hero banner features prominently on the homepage, commanding attention with its banner title, captivating images, engaging descriptions, useful links etc. The Hero Banner Content Model is thoughtfully crafted to gather and organize essential information for the hero banner content that adorns the front page of your website.

Prerequisites

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

Schema for Hero Banner Content Model

The Hero Banner Content Model contains a Content Type named Hero Banner.

Schema for Hero Banner Content Type

• Banner Title: This is a Title field that displays the title of the Hero Banner. This is a mandatory field and must be unique.
• Banner Image: This is a File field where you can choose an appropriate image to add in the banner.
• Background Color: This is a Custom field that adds Color Picker as an extension that you can use to set the default background color of the page.
• Text Color: This is a Custom field containing Color Picker as an extension that you can use to set the default text color.
• Banner Description: This is a Multi Line Textbox field to add the banner description.
• Call To Action: This is a Link field to add links based on your requirement.
• Is Banner Image Full Width?: This is a Boolean field that lets you enable or disable a full-width banner image on a web page. By default, this field is set to true, i.e. the Banner Image is in full-width.
• Banner Image Alignment: This is a Select field with Single Choice as the Selection Type to select the alignment of the Banner Image.
• Content Alignment: This is a Select field with Single Choice as the Selection Type to select the alignment of the content.

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 Hero Banner Content Modeling documentation to understand how to model the "Hero Banner".

Here’s how your hero banner looks after you publish the entry: