Eastern Washington University

(509) 359-2247
Login

Working with Page Layouts: Banners

Modified on: Tue, Feb 27 2024 12:29 PM

Banners 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:


  1. Click the Block Inserter.
  2. From the block menu, click Patterns.
  3. In this example, we will select the Banner titled "Banner - Page Title with Image and Buttons" from the modal window.
  4. This should replace the first paragraph block.
  5. Click the blue Update button.



Banner BlocksFor a larger image, right-click and select Open Image in New Tab


Your web page should resemble the image below.


Pattern BlockFor 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.

  1. Click the Settings icon. 
  2. Click the Page tab. 
  3. Select No Sidebars from the Sidebar Layout menu. 
  4. Select Full Width from the Content Container menu. 
  5. Select the checkbox titled Content Title from the Disable Elements list. 
  6. 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.


Banner PatternsFor 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.


Banner PatternsFor 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.


Banner PatternFor a larger image, right-click and select Open Image in New Tab