The banner shows up below the title bar on home pages. It provides a great way to welcome users first visiting your site and also showcases your brand.
Customizing The Banner
There are a lot of variables that control the look of the banner. They are edited in your variables.json or the Style tab of the theme editor.
Basic Customizations
banner.colors.bg: The background color of the banner.banner.colors.fg : The foreground (text) color of the banner.
Customizing The Search Bar
The banner usually contains a large search bar. You can customize it with the following variables.
banner.font.color : The text color of the search bar.banner.searchBar.border.radius : You can change the border radius of the search text box.
Banner options
There are different options of banners. The two main elements in the banner are the search bar and the title. You can add a description and a logo too. See below the variants:
Banner with search bar and title
Banner with search bar on the bottom
Banner with logo
There are 2 options here. You can use the banner with logo and search bar or the banner with logo and search bar on the bottom.
Banner with left alignment elements
You can have your elements like title, description and search bar with a left-align position.
Why is the banner area only on the homepage?
We only show the banner on the homepage because it takes up a lot or screen real estate. Users that are navigating within your site are now familiar with your brand and so having to scroll past the banner every time harms UX.
You might also have users landing on a page from a search engine. In that case the user is already keyed in on the title of the page that they just clicked and we want them to see that content as soon as they click into the site to give integrity between the content on your site and the search engine.
