{"id":2749,"date":"2024-02-06T10:20:54","date_gmt":"2024-02-06T15:20:54","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2749"},"modified":"2026-08-05T22:55:16","modified_gmt":"2026-08-06T02:55:16","slug":"understanding-patterns","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-6-patterns\/understanding-patterns\/","title":{"rendered":"Understanding Patterns"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Understanding Block Patterns\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Advanced Training Module 6: Patterns<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns are reusable collections of blocks that help you create content more efficiently and consistently across your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather than rebuilding the same layout over and over again, you can save a collection of blocks as a pattern and insert it whenever needed. Patterns can consist of a single block or an entire page section containing text, images, buttons, layouts, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns are particularly useful when creating content that follows a consistent structure, appearance, or workflow.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"what-is-a-pattern\" class=\"wp-block-heading\">What Is a Pattern?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A pattern is a pre-designed collection of blocks that can be inserted into pages and posts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a pattern might include:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Heading\nIntroduction Text\nButton<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Or a more complex layout such as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image\nHeading\nParagraph\nCall to Action Button<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of building these layouts repeatedly, they can be saved and reused throughout your site.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"why-use-patterns\" class=\"wp-block-heading\">Why Use Patterns?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns help:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save time<\/li>\n\n\n\n<li>Maintain consistency<\/li>\n\n\n\n<li>Reduce repetitive work<\/li>\n\n\n\n<li>Improve content quality<\/li>\n\n\n\n<li>Standardize layouts across a site<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you find yourself recreating the same section more than once, it may be a good candidate for a pattern.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"types-of-patterns\" class=\"wp-block-heading\">Types of Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two different types of patterns:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Synced Patterns<\/li>\n\n\n\n<li>Non-Synced Patterns<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">While both allow you to reuse content and layouts, they behave very differently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding the difference is one of the most important aspects of working with patterns.<\/p>\n\n\n\n<h3 id=\"synced-patterns\" class=\"wp-block-heading\">Synced Patterns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A synced pattern creates a shared version of content that remains connected wherever it is used.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the pattern is updated:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Every instance updates automatically.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This makes synced patterns ideal for content that should remain identical across the website.<\/p>\n\n\n\n<h3 id=\"when-to-use-synced-patterns\" class=\"wp-block-heading\">When to Use Synced Patterns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A synced pattern works best when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content should be the same everywhere.<\/li>\n\n\n\n<li>Updates should occur site-wide.<\/li>\n\n\n\n<li>Consistency is important.<\/li>\n\n\n\n<li>The content changes infrequently.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact information<\/li>\n\n\n\n<li>Feedback forms<\/li>\n\n\n\n<li>Newsletter signup sections<\/li>\n\n\n\n<li>Standard calls to action<\/li>\n\n\n\n<li>Social media follow sections<\/li>\n\n\n\n<li>Seasonal announcements<\/li>\n\n\n\n<li>Site-wide promotional banners<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"important-editing-synced-patterns\" class=\"wp-block-heading\">Important: Editing Synced Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Because synced patterns are connected site-wide:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Any changes made to a synced pattern will automatically appear everywhere that pattern is used.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is extremely powerful, but it also requires caution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before editing a synced pattern, ask yourself:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How many pages use this pattern?<\/li>\n\n\n\n<li>Should the change be applied everywhere?<\/li>\n\n\n\n<li>Could the change have unintended consequences?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Always verify updates after saving.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Non-Synced Patterns<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">A non-synced pattern acts as a reusable starting point or template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When inserted:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 The blocks become independent.<\/li>\n\n\n\n<li>\u2705 Changes remain local to that page.<\/li>\n\n\n\n<li>\u2705 Other instances are unaffected.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This makes non-synced patterns ideal for content structures and layouts that will be customized after insertion.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"when-to-use-non-synced-patterns\" class=\"wp-block-heading\">When to Use Non-Synced Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Non-synced patterns are useful when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A common structure is needed.<\/li>\n\n\n\n<li>Content will be unique on each page.<\/li>\n\n\n\n<li>Editors need flexibility.<\/li>\n\n\n\n<li>Consistency is important, but content should remain editable.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Landing pages<\/li>\n\n\n\n<li>Program pages<\/li>\n\n\n\n<li>Service pages<\/li>\n\n\n\n<li>Research project pages<\/li>\n\n\n\n<li>News article layouts<\/li>\n\n\n\n<li>Training modules<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"important-editing-non-synced-patterns\" class=\"wp-block-heading\">Important: Editing Non-Synced Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike synced patterns:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Changes made to a non-synced pattern do not automatically update existing pages.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once a non-synced pattern has been inserted and edited, it becomes independent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 You can customize content freely.<\/li>\n\n\n\n<li>\u2705 Other pages remain unaffected.<\/li>\n\n\n\n<li>\u2705 There is less risk of unintended site-wide changes.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Choosing the Right Pattern Type<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">A simple rule:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use a Synced Pattern When:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The content should always be identical.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact information<\/li>\n\n\n\n<li>Newsletter signup<\/li>\n\n\n\n<li>Department-wide call to action<\/li>\n\n\n\n<li>Legal notices<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use a Non-Synced Pattern When:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The layout should be reused, but the content should change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Program pages<\/li>\n\n\n\n<li>Service pages<\/li>\n\n\n\n<li>News story templates<\/li>\n\n\n\n<li>Event pages<\/li>\n\n\n\n<li>Training modules<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Examples<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Content<\/th><th>Pattern Type<\/th><\/tr><\/thead><tbody><tr><td>Contact information<\/td><td>Synced<\/td><\/tr><tr><td>Newsletter signup<\/td><td>Synced<\/td><\/tr><tr><td>Department announcement<\/td><td>Synced<\/td><\/tr><tr><td>Program page structure<\/td><td>Non-Synced<\/td><\/tr><tr><td>Service page layout<\/td><td>Non-Synced<\/td><\/tr><tr><td>Training module template<\/td><td>Non-Synced<\/td><\/tr><tr><td>Research project template<\/td><td>Non-Synced<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When deciding between the two, focus on whether the <strong>content<\/strong> or the <strong>layout<\/strong> is what needs to remain consistent.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Best Practices<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Start With Non-Synced Patterns<\/strong><br>If you&#8217;re unsure which type to use, non-synced patterns are usually safer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Synced Patterns Carefully<\/strong><br>Only use synced patterns when content truly needs to remain consistent across the entire website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Create Patterns for Repeated Work<\/strong><br>If you&#8217;re rebuilding the same section multiple times, consider creating a pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Name Patterns Clearly<\/strong><br>Use descriptive names such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact Section<\/li>\n\n\n\n<li>Program Landing Page<\/li>\n\n\n\n<li>Homepage CTA<\/li>\n\n\n\n<li>Research Highlight<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Think Long-Term<\/strong><br>Ask yourself: Will I want to update this content everywhere at once? If yes, a synced pattern may be appropriate.ges or posts where the pattern is used.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"cutheme Mastery Training - Understanding Block Patterns\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QBDb8_ssY6Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    <strong class=\"myprefix-text-bold\">Transcript<\/strong>\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript\">\n            \n\n<p class=\"wp-block-paragraph\">Hello, today I will be going over how you can better understand block patterns within CuTheme.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, a block pattern is a pre-designed template that lets you easily create consistent&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">and reusable content within your site. This can include one block, or a combination of blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns streamline the content creation process, by providing you with ready-to-use designs for common page elements, like headers, information sections, and so much more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are two different kinds of patterns:&nbsp;synced and non-synced. They both solve&nbsp;&nbsp;a similar problem: providing users with ways to easily add commonly used blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, it is important to note that the two are very different.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should make sure to use the right patterns in the right places. Otherwise, using the wrong type can result in major unintentional changes to your site, which will have to be fixed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, onto the types of patterns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A synced pattern is useful to lay out content that will be exactly the same everywhere on your&nbsp;site. It likely does not change often and when it does, you want the changes to be sitewide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you could use a synced pattern for things like a newsletter signup,&nbsp;links to social media sites, and forms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should be aware that when you create a synced pattern, any changes that you make to the pattern will cascade throughout your entire site, wherever it is implemented. This is an important distinction to keep in mind as every change may affect several pages across your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the other hand, a non-synced pattern provides a foundational set of blocks that you can use as a starting point (or template) to lay out content and then customize as you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Non-synced patterns can be used for things such&nbsp;as module pages on a training site, and research projects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Changes that you make to a non-synced pattern or to a page that contains a non-synced pattern are localized. They will not affect any other pages or posts where the pattern is used.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out!<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Review the pages on your website.<\/li>\n\n\n\n<li>Identify content that appears repeatedly.<\/li>\n\n\n\n<li>Determine whether the content should be:\n<ul class=\"wp-block-list\">\n<li>Synced across all pages, or<\/li>\n\n\n\n<li>Customized on each page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Make a list of potential pattern ideas.<\/li>\n\n\n\n<li>Decide whether each would be better as a synced or non-synced pattern.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn the difference between synced and non-synced patterns and when to use each to improve consistency and efficiency.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2769,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[72],"class_list":["post-2749","page","type-page","status-publish","hentry","cu_page_type-advanced-training-module-6"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=2749"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2749\/revisions"}],"predecessor-version":[{"id":4250,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2749\/revisions\/4250"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2769"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=2749"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}