The Banner Block

The Banner block in WordPress allows you to create impactful visual sections with options to add video or image backgrounds and optional content. Each block includes a “Content” and “Settings” tab for easy customization. Here’s a step-by-step guide on how to use the Banner block.

Step-by-Step Instructions

1. Log in to Your WordPress Admin Dashboard:
   • Open your web browser and navigate to your WordPress login page (usually yourdomain.com/wp-admin).
   • Enter your username and password, then click “Log In.”
2. Navigate to the Page Editor:
   • In the left-hand sidebar, click on “Pages” and select the page where you want to add the Banner block.
   • Click on the page title to open the page editor.
3. Add a Banner Block:
   • Scroll down to the “Flexible content blocks” section in the page editor.
   • Click the “+” button to add a new block and select “Banner.”

Content Tab Configuration

1. Add a Subheading:
   • In the “Content” tab, enter an optional subheading in the “Subheading” field.
2. Add Text Content:
   • Enter the primary content for the block in the text editor. Use the formatting toolbar to style your text, insert headings, create lists, add links, and more.
3. Add a Call to Action Button:
   • Click “Select Link” to add a call to action button with a link. Enter the URL and button text as required.
4. Add an Image Background:
   • Click “Add Image” in the “Image” section to upload a new image or select one from your media library.
5. Add a Background Video:
   • In the “Background video” section, upload a video from your media library to use as a background.

Settings Tab Configuration

1. Remove Bottom Margin:
   • If you want the Banner block to sit flush with the block below it, toggle the “Remove bottom margin” option to “Yes.”
   • This removes the default margin added to the block, ensuring it aligns perfectly with the next section.
2. Banner Size:
   • Choose the display size of the banner by selecting an option from the “Banner size” dropdown. Options include narrow, default, and fullscreen.
3. Centre Content:
   • If you want to centre the content within the banner, toggle the “Centre content” option to “Yes.”

Save and Publish

1. Save Your Changes:
   • After configuring the content and settings for your Banner block, ensure you save your changes by clicking “Save Draft” or “Update” if the page is already published.
2. Preview and Publish:
   • Use the “Preview” button to see how the Banner block will appear on your page.
   • Once satisfied, click “Publish” to make your changes live.