Working with Page Layouts: Banners
Modified on: Tue, Feb 27 2024 12:29 PMBanners can be accessed through the Patterns block and are typically used to replace the default page title and to give the page a more attractive appearance. All five of our banners work in the same basic way. Let's create a fresh new page, title it, and then replace the default title with a banner.
Once you've created a new page, give it a title and follow the instructions below:
- Click the Block Inserter.
- From the block menu, click Patterns.
- In this example, we will select the Banner titled "Banner - Page Title with Image and Buttons" from the modal window.
- This should replace the first paragraph block.
- Click the blue Update button.
For a larger image, right-click and select Open Image in New Tab
Your web page should resemble the image below.
For a larger image, right-click and select Open Image in New Tab
If you preview this web page, you will find that while it is placed correctly, some minor configuration changes will ensure the banner looks good and the content below will suit it.
- Click the Settings icon.
- Click the Page tab.
- Select No Sidebars from the Sidebar Layout menu.
- Select Full Width from the Content Container menu.
- Select the checkbox titled Content Title from the Disable Elements list.
- Click the blue Update button and preview your changes.
For a larger image, right-click and select Open Image in New Tab
Your web page should now resemble the image below.
- Notice the background color extends to the menu.
- Notice the background color extends to the footer. * This is before adding our content area.
For a larger image, right-click and select Open Image in New Tab
To add the body content pattern, do the following:
- Click the Add Block icon.
- Click the Pattern Library icon.
- From the Pattern modal, click the option Page Layout - Full-Width Text
- Click the blue Update button.
For a larger image, right-click and select Open Image in New Tab
Once saved, you can preview your new page with the banner and some sample body content configured to be viewable on desktop, tablet, and smartphone.
For a larger image, right-click and select Open Image in New Tab