The advance banners are best used for home pages and primary category pages.
Banner images are individual to that page.
Pages with advance banners don’t have Side Navigation.
Implementation
Page settings
| Page Attributes > Template | 100% Width |
| Feature image | None |
| Avada Page Options > Page Title Bar > Page Title Bar | Hide |
Containers & columns
- New container at top (flex – not legacy)
- 1/1 column
- Column-align: Center
- Container class: qh-advanced-banner
Elements
- Widget area > Custom banner breadcrumbs
- Use Avada Title element (default is H1) not a Text Block element
- Add a Text Block element (class of: qh-advanced-banner-abstract) for the introduction/abstract text.
- Add a Code Block element with the following:
Usage guidelines
When to use it
- Major categories pages (ie: pages in the primary nav)
- Landing pages (major topics not in the primary nav)
When not to use it
- Content pages
How to use
Keep it simple
A banner should be easy to understand and not cluttered. Avoid too much text, too many images, and too many colours. Keep it simple and visually appealing.
Keep it brief
The hero banner should be short and to the point. Avoid long paragraphs of text. Headings should ideal be 20-30 characters or fewer and not more than 60 characters. Abstract text should be no more than 160 characters.
Don’t use too many calls-to-action
Avoid including too many calls-to-action in your banner. Having multiple calls-to-action can be confusing and overwhelming for the reader. Instead, focus on one primary call-to-action that is clear and easy to understand.