A foundation to start from

Patterns Gallery

This site has a built in simple pattern library for anyone to use. Below are instructions for when to use the different styles and suggestions for how to customize them.

General Notes

To use the patterns on this page, you can copy and paste a block you need from the editor on this page onto your new page, but you can also access the patterns from the patterns section of the block inserter menu on the top left of the editor.

To access the patterns library:

Open the block inserter menu
Select the Patterns tab
Choose a category to browse.
Click or Drag the pattern you want to use onto the editor.

Using this theme template

This site runs on a customizations and patterns built in on the site level not the theme level. To use this setup, you will need to clone this site.

The patterns built into this site work best with the structure of this theme, so it’s not recommended to change the theme after unless absolutely necessary.

Overriding the page title display on a page by page basis

By default, all new pages in this theme have a built in page title. You can switch page titles off on the theme i n the customizer and add your own banners for each page, but for teaching and learning sites, you generally won’t want distracting banners on every page.

A recommended approach is to override that setting on the page level for a specific page such as the home page. When setting up your page, at the top right, click the “page settings” icon, then select the options to disable both the Page Title and the Content Vertical Spacing as shown in the graphic here.

Most patterns in the patterns library are based around the Row Layout Block. You can learn more about this and other blocks in the Kadence Blocks documentation.

You may notice that some of these blocks don’t align along the central column in the block editor. Always save and check on the front end before making edits to fix that. There are some discrepancies between how things display in the editor vs the front end. If it’s not aligning right on the front end, first try resetting the left and right padding on any row layout blocks in your pattern.

Quick dos and don’ts when designing a web layout

There are plenty of times when you can break these rules. They are just a guide for when you’re starting out.

Do use more spacing if necessary.
Do keep it simple especially on pages you want people to read a lot of content on. You may not use any patterns at all on information heavy pages.
Do be consistent with your styling on the page and your site regarding border radii, drop shadow size, card colors, etc.
Do reduce a heading’s size if it’s too big for its location and wraps too much.

Don’t alternate your row background colors, Instead, try to
Don’t set text blocks to go beyond the central column of the page as that can be hard to read on wider screens (ie don’t set a text block to full width)
Don’t center text more than 3 lines or 750px wide.
Don’t forget to check your design on mobile and tablet views.

A further note on spacing

In the patterns library, many patterns are all saved with a default margin of 2xl on the bottom. You are welcome to adjust these to suit your needs, but when designing a home page you want your blocks to have breathing room. We rely on proximity and repetition to show relationships. Good margins and padding help the user see that they are looking at a new topic on the page.

Overview

In general, choose images that are relevant to your subject matter and feel consistent together. If you’re using an image in one of the patterns, check and see how that image will look on various screen resolutions. Many of the patterns are set up in a way that might crop your images strangely at certain resolutions and you may want to choose another option.

Photos

For photos, the following all have beautiful images to choose from that allow users to use on their websites for free without attribution. Be sure to read the licenses to know your limitations.

Before uploading to your website, make sure your images are no wider than 2000px and be sure to optimize them using a tool like tinypng.

Icons

For icons, if the built in icon block doesn’t have options that will work for you, you may need to upload your own icons and use the image block instead. You can find options at SVG repo, but you’ll need to check the icon’s license. Use icons with CC0 and Public Domain licenses only unless your prepared to attribute correctly. Try to use icon sets from the repo instead of one offs so your site is consistent.

Illustrations

For Illustrations, be mindful that sites that are stylized with illustrations require a bit more work. Illustrations should be a consistent style and might not look good if you have a site that has a lot of photos on it as well. Some providers of free and non attribution illustrations are the Manypixels free images gallery and Themeisle’s illustrations gallery. Be sure to review their licenses first.

Fonts

To give your site more personality you can change the fonts in the customizer. Try to keep readablity in mind when choosing fonts. Some decorative fonts are best suited for just h1 and h2 text.

Colors

You can come up with your own color combinations or you can pick colors providede in the Kadence color pallette section of the customizer. If you come up with your own, it’s best to choose colors that are roughly as dark or light as the colors in the provided palette or to invert them all if you want a dark theme. This is because the colors are automatically updated in the patterns as well. If you don’t intend to use the patterns provided, then you don’t have to worry about that as much.

Headings

Overline text

Heading with overline text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar dolor vel turpis egestas, in volutpat nunc vestibulum. Donec quam lorem, mattis a egestas tincidunt, dapibus porttitor purus. Suspendisse dapibus quam ut urna lacinia dignissim. Cras id risus vel nisl pellentesque feugiat nec sit amet sem. Ut tincidunt ante at erat tempor, vitae sodales ex dictum. Nulla facilisi. Quisque porta eros sit amet sapien vulputate rhoncus.

Heading with subtitle

Subtitle text here – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Noteboxes

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Buttons

Button

Button Button2

Tabs and Accordions

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum sodales ipsum vel varius. Nunc rhoncus tellus sit amet diam vulputate scelerisque. Quisque iaculis, arcu at laoreet pharetra, libero lacus vulputate nunc, et aliquet ex tellus nec magna. Proin eget pretium sapien. Donec porttitor venenatis risus, quis sollicitudin risus porttitor quis. Maecenas vitae magna et nibh viverra feugiat. Aenean finibus accumsan ultrices. Nam a tellus iaculis, laoreet risus in, condimentum elit.

Suspendisse egestas euismod dolor ut fermentum. Vestibulum mollis odio ut lectus iaculis lobortis. Fusce eget ante sit amet augue lobortis pellentesque ut vel risus. Nunc id nibh congue, dictum enim eget, viverra quam. Nunc porta sit amet nibh et aliquam. Pellentesque a magna scelerisque, finibus eros maximus, viverra purus. Nullam ornare tincidunt velit a fermentum. Morbi eget ligula nec nisi viverra tincidunt non eget neque. Praesent efficitur nisl dui, at convallis justo viverra nec. Etiam rutrum nunc sem, ultrices sagittis tortor interdum vitae. Cras eu dui tempus, dapibus ex ut, molestie dolor. Aliquam erat volutpat. Sed commodo lorem dui, vel sagittis nisi semper vel.

Morbi libero purus, tempus ac vestibulum vitae, volutpat eu libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Nulla varius id nunc eget pulvinar. Duis blandit dapibus nisl at feugiat. Quisque gravida sagittis mauris sit amet iaculis. Quisque facilisis ligula quis rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum lacus nisl. In vitae turpis efficitur nisi maximus scelerisque. Vivamus suscipit nulla semper mi malesuada tristique. Sed rutrum est sit amet sem rhoncus convallis sed eget enim. Aenean at enim ligula. Donec gravida dolor at turpis porta gravida. Ut vulputate felis in diam imperdiet ornare ac vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Contact/Meet the Team

Type 1

Duplicate the bio row to as many as you need.

Person’s Name

Person title or whatever you need here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris dui odio, malesuada nec ante lobortis, placerat suscipit magna. Vivamus consectetur ipsum tortor, ut tempus ante tincidunt et.

someone@tru.ca

Person’s Name

Person title or whatever you need here

someone@tru.ca

Type 2

Duplicate the bio row to as many as you need.

Person’s name

Person’s title

Person’s name

Person’s title

Type 3

Duplicate or remove the inner sections as necessary to have more or less users.

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Displaying Stats

Stat bars

50%

Stat title

10yr

Overline

Project Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum aliquam diam mattis suscipit. Morbi rutrum, turpis sit amet consequat varius, nunc dui imperdiet ante, vel ornare lectus orci a nisl.

Dark and light gradient banners

The section on the right is set to hide on mobile so don’t put content there. If you would like an image or something there you will need to turn that setting off.

Overline

Project Title

Info banner with color overlay

Use this further down a page to draw attention to something. You could include a call to action buttonat the bottom to get users to view something or fill out a form.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Columned Content Groups

Group related content you want to highlight with these blocks. Usually this content replaces short bulleted lists or groups summaries of different services you provide or are proud of with a call to action to learn more.

Add an overline text

Brief title for section

Add a descriptive title for the column.

3 columns with icons

Note that with TRU styling, we want to try and use line based icons. If the icon options available won’t work for what you are doing, try svg repo and check for icon collections that have public domain or CC0 license.

Heading

Nulla neque erat, aliquet nec pellentesque a, lobortis a nibh.

Heading

Suspendisse mollis nisi mi, consectetur dignissim mi tempor at. Mauris ac rhoncus elit.

Heading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit.

Image topped cards

Use these to highlight certain topics you want users to read more on where an image will help add context.

To change the background color of the card for these, make sure you’ve selected the correct “section” blocks. They are stacked with extra sections and groups to force the buttons to the bottom.

Set of 4

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Heading

liquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Button

Heading

Button

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Overlapping Cards

You can use these in pairs representing groups of content or as single items. You can also split them up with other content between them.

Heading

Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh.

Learn More

Heading

Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh.

Learn More

Constrained banners

Use these to highlight a single item of content.

Heading

Checkerboard

Keep the content in this section concise and the content related.

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Learn More

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Learn More

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Learn More