Page Layouts

Within the WDS pattern library, you’ll find seven predesigned page layouts. Each layout combines several individual WDS patterns into a complete ready-made page that can be added with a single click.

Using a page layout is optional. These layouts are simply starting points to help content managers avoid building a page from scratch. Once a layout is added, you can customize it freely—adding or removing individual patterns as needed.


How to Add a Page Layout

Adding a page layout is just like inserting any other WDS pattern. Open the block inserter, navigate to the Patterns tab, scroll down to Page Layouts, and choose the one you want. The selected layout will appear in the page’s list view as a series of individual patterns.

Tip: If you’re using a template without a title, be sure to set the headline in the top pattern to Heading 1 (H1). This ensures your page has a proper main heading.

This short video demonstrates the process of adding a page layout:

Available Layouts

Screenshot of detail option one layout

Detail Option One

Ideal for pages that provide in-depth information on a specific topic. This layout includes multiple patterns to help organize and present detailed content clearly.

Screenshot of detail option two layout

Detail Option Two

This layout provides an alternative to the detail option one layout.

Screenshot of homepage option one layout

Homepage Option One

Designed to serve as the main landing page for your site, this layout highlights key content and helps visitors navigate to important sections.

Screenshot of homepage option two layout

Homepage Option Two

This layout provides an alternative to the homepage option one layout.

Screenshot of landing page layout

Landing Page

Perfect for pages aimed at visitors arriving through social media, email, or marketing campaigns. This layout is designed to capture attention and guide users toward a specific action or message.

Screenshot of program page layout

Program Page

Created to help colleges quickly build pages for individual academic programs. This layout provides a time-saving structured starting point for showcasing program details.

Screenshot of turnpike with image page layout

Turnpike with Images

A turnpike page gives users a variety of link options to explore. This layout uses patterns with images to make what might be simple lists of links more visually engaging and easier to navigate.