Customize a banner’s layout

The Cover block is a container block that holds your banner’s content. You can adjust the layout by changing the alignment, content position, and other settings. In this guide, we’ll show you how to customize your banner’s layout.

You can align the banner within your page, post, or template. To align your banner, follow these steps:

1. Click on the Cover block to select it.
2. In the block toolbar that appears, click the Align button.

3. Choose from the following options:
   • Full width: Expands the banner to the full width of the screen.
   • Wide width: Makes the banner wider than the main content area, but not full width.
   • Left, center, or right alignment: Aligns the banner within the content area.

You can position the text, buttons, and other content inside your banner. To adjust how the content is positioned within your banner, follow these steps:

1. Click on the Cover block to select it.
2. In the block toolbar that appears, click the “Change content position” button.

3. Select one of the preset options to move the content to the top, center, or bottom of the banner.

To set the image to always show the full height, you can set the “Toggle Full Height” option in the block’s toolbar.

1. Click on the Cover block to select it.
2. In the block toolbar that appears, click the “Full Height” button (the icon looks like a square with just the corners shown):

You can click the button again to remove the full height setting.

You can change how the content is arranged inside the Cover block by following these steps:

1. Click the Cover block.
2. In the block settings sidebar, toggle “Inner blocks use content width” to adjust how content inside the Cover block is displayed.
3. When “Inner blocks use content width” is switched on, blocks inside the Cover block will adhere to these width settings:
   • Content: The width of the content area for blocks not set to wide or full-width.
   • Wide: The width of the content for blocks set to wide width.

Learn more about how to change the width of a block.

You can add padding and margins to the Cover block by following these steps:

1. Click on the Cover block.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Locate the Dimensions section.
4. Adjust the padding, margins, and block spacing.

To ensure consistent banner sizing, set a minimum height, follow these steps:

1. Click on the Cover block.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Locate the “Minimum height” setting.
4. Enter a specific height in units to ensure the banner maintains consistent sizing.