Tips and best practices for the new UW wordpress theme
This page provides best practices and recommendations for how to use the new UW WordPress theme on any page. In the sidebar, you’ll find examples of sidebar widgets you can mix and match on your pages. Below, find examples of different shortcodes and other content areas.
Headline Styles
Using Headline styles correctly will make it easier for all your users to scan and find content, and also make your webpage more accessible for people who use screen readers and other adaptive technology. When deciding what headline level to use, it can be helpful to think of the content on your page as if it were outlined in a bulleted list. H1 is the main title of your page. For each level of indent on your bulleted list, you go down one headline level.
Your main page headline is written using H1
Introduce the main subsections of your pages with H2
Any sub-heads within those subsections use H3
Further sub-sections will use H4
Editorial Headline that describes your program
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.
Maecenas finibus sed nunc a varius. In hac habitasse platea dictumst. Phasellus rhoncus eros lectus, quis lobortis ante eleifend et. Curabitur augue augue, aliquet accumsan venenatis sed, porttitor nec orci.
Headline with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.
Subhead for secondary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.
Subhead for tertiary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.
Card Styles
The new theme has a wide variety of card styles to chose from to help you organize and feature content. You have a lot of options for color, size, using an image or icons. Cards are best used to feature or promote important content, or to help users scan a set of related content (for example – if you offer three main programs, you can introduce them using three matching cards).
Featured Content Option
Featured Content No Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.
Featured Content Option
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.
title_goes_here
Something goes here…
title_goes_here
Something goes here…
Testimonial or quote
Use the “blockquote” shortcode to feature quotes or testimonials on your page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu.
Organizing a lot of content
Tabbed sections, accordions and modal windows are great tools for organizing a large volume of content. Choose horizontal tabs if you have just a few categories, and vertical tabs if you have a lot of categories, or long category names.
You can include text, images, links, and many kinds of content within the sections of tabs and accordions, or in modal windows.
Tabs
Accordions
Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,
Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,
Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,
Modal Windows
Modals are another great way to organize a large volume of content that is useful to the user, but not essential that they see on the first scan of a page. Stories, biographies, and deeper content are great in modals. Modal windows can contain many types of content, including images, embedded videos and text.
