Advanced Elements - Using Shortcodes with Best Practices
H - Header
The header shortcode allows you to style your page or sections of your page with a block header. Please note, these headers are formatted to be H3 or 'medium' level heading text. Be sure to use them in the correct order with your other titles and headings.
This is a Basic Header
This header displays the default header style. This subtitle is optional.
In your text editor, the above header looks as follows:
This is a Light Header
The type of header can be set to dark, dark-striped, light, and light-striped.
This is a Dark Striped Header with no subtitle
This is a Light Striped Header with no subtitle
In your text editor, the headers above look as follows:
These headers are designed to use an image as a background. To use an image, you need to first upload the image file to your media bank. You can do this by inserting the image on to the page and copying the link, then deleting the image.
This is a default (dark) header with a background image.
In your text editor, the above header looks as follows:
The various striped options create a different overlay on your image:
This is a dark striped header with a background image.
This is a light header with a background image.
Always ensure readability and accessibility is met with your colour contrasts. Use darker images and dark banner settings behind white text and lighter images with light banner settings behind black text.