Banners


Banners

Poster Banner Block Types

The banner block is designed to be used at the head of a page to introduce the user to the section of the website they have entered. There are several variations to utilize based on the area of the site that the page resides in. Content within these blocks should be minimal.

Large Poster Banner

Large poster banner with feature image. Used for root pages to sections of the site.

Large Poster Banner with feature image

Large poster banner with no feature image or call to action button.

Large poster banner with no buttons

Small Poster Banner

Small poster banner with feature image. Used for interior sections within the site (pages below root).

Small poster banner with feature image

Small poster banner with no feature image.

Mini Banner

Mini banner. Used for pages below interior pages.

Mini Banner

Tips

You can remove the default button in a banner if it is not required for the current section you are in.

Note

The breadcrumb navigation is automatically inserted for you. No need to insert into the page.

Using the block in WordPress

Adding a block to the page

To add the banner block, toggle the block inserter and search for the block named banner. For more information on adding blocks see Getting Started.

Banner block inserter

Tips

Included in the block inserter are an assortment of pre-defined banners for use in various sections throughout the IHPME website.

Editing

Editing the banners is much like editing any block within the WordPress editor. However it is encouraged to use caution when inserting elements within it. If inserting images please use the image settings in the configuration panel.

::: Alert - Adding Images Images should only be added to the banner block in the configuration panel. :::

Configuration options

With the banner block selected in the WordPress editor, the right-hand sidebar will display the follow configuration options:

  • Transform to variation: Changes banner type variation to one of three pre-defined versions.
    • Large Poster Banner: Standard banner for interior pages
    • Small Poster Banner: Standard banner for major pages
    • Mini Banner: Minimal banner for detail pages
  • Sync Controls
    • Sync title: Syncs the title of the banner inserted with the title of the WordPress page
    • Sync poster: Syncs poster image of the banner with the featured image of the WordPress page
  • Image settings: Allows for selection of feature image on the page. Default handling syncs the feature image with the page banner. If the feature image is set, it cannot be removed while the sync poster option is toggled. Once a feature image is selected, the option to adjust the focal point of the image can be utilized.
  • Decor Options (Small Poster Banner Only)
    • Colour 1: Colour option one for the Small Poster Banner
    • Colour 2: Colour option two for the Small Poster Banner

Configuration panel

Banner block configuration panel

Last update:
Contributors: Colin Payson,Doug Wollison