1. Tutorials
  2. Paragraph Options Layouts
  3. Image (Banner)

Image (Banner)

View the example page to see this paragraph-type in action.

Image (Banner) example

Guidelines for use

  1. This paragraph is always used at 100% width of the browser window

  1. Consider where the focal point of your background image is, and align the content in the section with your best attempt to not overlap it. 
  2. If your image has a lot of bright and dark areas, you may have legibility issues with your content. Consider either a new image or re-cropping your image in a different way.

Elements

Colour Overlay: This is the colour that will overlap the image

Image: This is the image that will be displayed as a banner. 

Title: An optional <h2> heading that will appear on top of the image, according to selected alignment (left, center or right). Maximum character count: 100.

Body: Optional <p> paragraph text that will appear on top of the image, according to selected alignment (left, center or right). Maximum character count: 300

Button: Optional. A link with custom text and button styling will appear on top of the image,according to selected alignment (left, center or right). Maximum character count on link text: 50 characters.

Use this Image (Banner) paragraph to highlight an important section of text or call to action.

 

Since the ability to move content from left to center to right is removed, the banner content is displayed below the image section to ensure good legibility.

How to implement

  1. Create a Basic Page.

  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Image (Banner)"
    Selecting Add Image (Banner) Menu Item

  3. Proceed to the Overview of an Image (Banner) section of this page

  4. Once you've added your Image (Banner) content, choose your publishing options and click Save at the bottom of the page.

Overview of an Image (Banner)

Overview of An Image (Banner) Paragraph

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. (Optional) Anchor ID: Add a unique ID, if you would like to link to this specific section of the page from another location. 
  4. Colour overlay - the colour selected will overlap the image
  5. Minimum Height - if you are not adding text to your banner, you can increase the minimum height of the image to ensure it is visible.
  6. Image - the image will span the width of the page with the colour overlay and any text appearing on top.
  7. (Optional) Mobile image - you can optionally add a mobile version of the image, if there is a specific section of the image on desktop that you'd like displayed on mobile.
  8. Text alignment - this will determine where any text (title, body, button) is placed on the image. 
  9. Text Area Width - select from widths of 1/3, 1/2 and 2/3 of the page for text to span on the banner
  10. (Optional) Title: Add a title for the banner image - it will appear on the image according to your selected alignment
  11. (Optional) Body: Add a paragraph of text for the banner - it will appear on the image according to your selected alignment.
  12. (Optional) URL: Add a reference to an internal or external page to be included. A link will be added with button styling - it will appear on the image according to your selected alignment
  13. (Optional) Link text: the link text will be displayed in the button styling on the image.