How to display the page banner image lighter

Owned by
Alejandra Rosales
Last updated: Sept 21, 2023 by
Smita Nair
1 min read

Purpose

This documentation will help you to display the page banner image in a lighter color tone. Below you can see the before and after comparison:

Before:

 After:

Answer

To achieve the lighter banner image color tone, we will need the help of an HTML macro. It will be placed on top of the Page Banner with the following code: 

  1. Click Edit to edit the page > enter a HTML macro with the content below:

    <style> .composition-banner-overlay {background-color:rgba(0,0,0,0);} </style>

  2. Below the HTML macro, enter a Page Banner macro. 

  3. In the Page Banner macro, enter the Title and Image URL. 
    Read this documentation to understand how to include a Image URL inside the macro.

  4. Save the changes, the page banner image now has a lighter color tone.

Â