The Banners block type is a great way to add a great-looking full-width image to a page on your site, or include a call to action.
TABLE OF CONTENTS
Full Width Image Block
Insert an image block that spans the full width of your website. Unlike a regular image block, the full width image breaks out of the normal width of your content area, setting it apart from the rest of the content and serving as a good break or transition between content areas on a page.
Example
The example below highlights the differences. 
The image of Gandalf confronting the Balrog is set to the full width of the pages content area. Think of it like being confined to the span of the Bridge at Khazad-dûm.
The image below is not limited to just the content area of the page and expands to fill the entire width of the page. It illustrates Gandalf having tea in the Shire after wielding the Flame of Arnor and defeating the Balrog. Stretch those pixels, wizard, you earned it.
Properties Panel
Clicking the options button (...) in the block toolbar will open the properties panel for the Full Width Image Block.
| Property | Description |
|---|---|
Image | Select the image you want to use for the full width image block. |
Color Overlay | Add a color overlay to give the image a tint. |
Height | Set the height of the full width image block. |
Space Above/Below | Set the space above or below the full width image block. |
Full Width Banner Image with Text
The Full Width Banner Image with Text Block (fwbit) is a full width image with several text overlay options, including a title, content and button.
Insert the block by clicking on the Full Width Banner Image with Text graphic in the Add a Block > Banners panel.
Initial State
You'll be prompted to select an image or upload a new one when you first insert the block. The initial state of our Gandalf victory tea image is below:
There are placeholders for:
- Heading
- Paragraph
- Button
You can click and edit the Heading and Paragraph properties like any other Text Block. Edit and customize the Button like you would the Button Block.
Properties Panel
Click the options (...) button in the block toolbar to open the properties panel. You'll find the following properties available to edit:
| Property | Description |
|---|---|
Image | Choose another image or upload a new one |
Block Elements | Toggle the visibility of the Heading, Paragraph and Button |
Banner Image Overlay | Like the Full Width Image, add a color tint of color that overlays your image |
Text Color | Set the color of the Heading and Paragraph |
Height | Set the height of the banner |
Content Width | Set the percentage of the max width the content will occupy. This is a percentage of the page content area, not the width of the banner image. |
Space above/below | Set the space above and below the banner |
Call to Action Block
The Call to Action Banner is a simple block that can be used to call attention to a specific action. It is a full-width block with a text area and button, vertically and horizontally centered within the block.
Properties
Click the options (...) button in the block toolbar to view the Call to Action Banner properties panel. You can customize the following properties:
| Property | Description |
|---|---|
Background Color | The background color of the banner. Defaults to the primary link color used on the site |
Text Color | The text color of the banner. Defaults to the primary text color used on the site |
Height | The height of the banner. |
Gap Size | The size of the gap between the content area on the left and the button on the right. Default: 25px |
Space above/below | The space above and below the banner. |
