Eastern Washington University

(509) 359-2247
Login

Working with Page Layouts: Patterns

Modified on: Tue, Feb 27 2024 11:40 AM

We've added Patterns to our toolbox to help content managers create consistent page layouts and features.  Patterns are templates or features like banners, buttons, accordions, and tabs.  A big advantage of using patterns is that the padding and space settings are mainly done for you.  This means that your website will be usable on desktops, tablets, and mobiles.


  1. Click the Block Inserter.
  2. Click the Pattern Library block.
  3. You should see Pattern choices in a popup modal window.



Pattern BlockFor a larger image, right-click and select Open Image in New Tab



Pattern Block OptionsFor a larger image, right-click and select Open Image in New Tab



On the popup modal window, you should see twelve patterns: banners, page layouts, sections, and basic features, including accordions, tabs, and buttons. Typically, pages are designed from the top down. With this in mind, we can list the order of how the patterns should be used.


Banner

Patterns prefaced with "Banner -" are usually positioned at the top of the page and used for the page title to replace the default page title.  Listed in order from simple to more complex, our current banners include:

  • Banner - Page Title and Summary
  • Banner - Page Title with Buttons
  • Banner - Page Title with Image and Buttons
  • Banner - Small Page Title with Background Image and Buttons
  • Banner - Large Page Title with Background Image and Buttons


Page Layout

Patterns prefaced with "Page Layout -" are inserted after you choose the Banner block.  

  • Page Layout - Full-Width Text
  • Page Layout - With Custom Sidebar


Sections

  • Section - Team
  • Section - Four Column


Misc

  • Accordions
  • Tabs
  • Button