The hero banner is a customizable section that is added at the top of a page. Its default settings are defined in the config.json file which can be modified to change the background image or other properties.

The page layout uses global CSS classes to define styles for different page types. These classes are applied to the root element of the HTML, enabling you to specify styles for various page categories.

index-root

Typically referred to as the “root page”, “root path”, “home”, or “index” page, etc.

.section-index

The first layer of the top-level site sections and potentially a version. For example:

• /product/2022-r1

• /customers

• /content-strategies.

.search-index

The search page accessible under /search.

.content-index

Any other page or URL slug path.

By default, the hero section is shown on all pages. Below, you can see the default settings of the hero section applied in the config.json file.

"hero": {
        "position": "relative",
        "height": "auto",
        "backgroundPosition": "center",
        "backgroundSize": "cover",
        "marginBottom": "0",
        "opacity": 1,
        "alignItems": "center",
        "alignContent": "center",
        "& i18n-message": {
            "flex": 1
        },
        "&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": {
            "backgroundImage": "url(https://assets.portal.heretto.com/themes/whitelabel/Geometric-Background.webp)",
        },
    },
    "heroSearchWrapper": {
        "height": "2.25rem",
        "width": "30rem",
        "margin": "0 auto",
        [MAX_S]: {
            "display": "none"
        }
},

However, you can easily override it, for example, to remove the background image throughout different pages or introduce a different image URL:

"hero": {
        "height": "350px",
        "&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": { "backgroundImage": "none",
        },
   },

These settings should be always added to the theme JSON object:

{
	"theme": {
		"hero": {
        		"height": "350px",
        		"&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": {
				"backgroundImage": "none",
			},
		}
	}
}