{"id":2799,"date":"2024-02-06T14:59:56","date_gmt":"2024-02-06T19:59:56","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2799"},"modified":"2026-08-05T22:28:29","modified_gmt":"2026-08-06T02:28:29","slug":"creating-patterns","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-6-patterns\/creating-patterns\/","title":{"rendered":"Creating 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                        Creating 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 allow you to save groups of blocks and reuse them throughout your website. Instead of recreating the same layout, call to action, or content structure multiple times, you can build it once and save it as a pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns help maintain consistency across your website, reduce repetitive work, and make content creation faster and easier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Call-to-action sections<\/li>\n\n\n\n<li>Contact information blocks<\/li>\n\n\n\n<li>Staff profile layouts<\/li>\n\n\n\n<li>Event promotion sections<\/li>\n\n\n\n<li>Frequently used page layouts<\/li>\n\n\n\n<li>Reusable content components<\/li>\n<\/ul>\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 are most useful when you find yourself creating the same combination of blocks repeatedly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, instead of rebuilding this section on every page:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Heading<\/li>\n\n\n\n<li>Introduction Text<\/li>\n\n\n\n<li>Button<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can create a pattern and insert it whenever needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns help ensure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Consistent layouts<\/li>\n\n\n\n<li>Consistent messaging<\/li>\n\n\n\n<li>Faster page creation<\/li>\n\n\n\n<li>Reduced maintenance<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"creating-a-pattern\" class=\"wp-block-heading\">Creating a Pattern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A pattern can be created from any compatible set of blocks.<\/p>\n\n\n\n<h3 id=\"step-1-create-or-locate-content\" class=\"wp-block-heading\">Step 1: Create or Locate Content<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start with a group of blocks that you would like to reuse.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A heading and button<\/li>\n\n\n\n<li>A callout section<\/li>\n\n\n\n<li>A contact block<\/li>\n\n\n\n<li>A page introduction layout<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can use existing content or create a new block layout specifically for your pattern.<\/p>\n\n\n\n<h3 id=\"step-2-select-the-blocks\" class=\"wp-block-heading\">Step 2: Select the Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select all blocks that should be included in the pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Using <strong>List View<\/strong> often makes selecting multiple blocks much easier than selecting them directly within the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verify that all required blocks are selected before proceeding.<\/p>\n\n\n\n<h3 id=\"step-3-create-the-pattern\" class=\"wp-block-heading\">Step 3: Create the Pattern<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With the blocks selected:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the block options menu.<\/li>\n\n\n\n<li>Select <strong>Create Pattern<\/strong>.<\/li>\n\n\n\n<li>Enter the pattern details.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The selected blocks will become a reusable pattern.<\/p>\n\n\n\n<h3 id=\"step-4-name-and-organize-the-pattern\" class=\"wp-block-heading\">Step 4: Name and Organize the Pattern<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When saving a pattern, provide:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pattern Name<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a descriptive name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Page Introduction<\/li>\n\n\n\n<li>Contact Section<\/li>\n\n\n\n<li>Event Promotion Banner<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Clear names make patterns easier to find later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pattern Category (Optional)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Categories can help organize larger pattern collections.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"synced-vs-non-synced-patterns\" class=\"wp-block-heading\">Synced vs Non-Synced Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One of the most important decisions when creating a pattern is whether it should be synced or non-synced.<\/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 remains connected everywhere it is used.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If 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\">If the phone number changes and the pattern is updated, every page using that pattern will automatically display the new information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Synced patterns are ideal for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact information<\/li>\n\n\n\n<li>Reusable notices<\/li>\n\n\n\n<li>Standard calls to action<\/li>\n\n\n\n<li>Consistent site-wide content<\/li>\n<\/ul>\n\n\n\n<h3 id=\"non-synced-patterns\" class=\"wp-block-heading\">Non-Synced Patterns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A non-synced pattern acts as a starting point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After insertion:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 The content can be edited independently.<\/li>\n\n\n\n<li>\u2705 Changes do not affect other copies.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Editors can customize each instance without affecting other pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Non-synced patterns are ideal for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Page layouts<\/li>\n\n\n\n<li>Content templates<\/li>\n\n\n\n<li>Starting structures<\/li>\n\n\n\n<li>Customizable designs<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"which-type-should-i-choose\" class=\"wp-block-heading\">Which Type Should I Choose?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A simple rule:<\/p>\n\n\n\n<h3 id=\"use-synced-patterns-when\" class=\"wp-block-heading\">Use Synced Patterns When<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The content should be identical everywhere.<\/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>Legal notices<\/li>\n\n\n\n<li>Reusable announcements<\/li>\n<\/ul>\n\n\n\n<h3 id=\"use-non-synced-patterns-when\" class=\"wp-block-heading\">Use Non-Synced Patterns When<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The layout should be reused but the content will change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Landing page templates<\/li>\n\n\n\n<li>News article layouts<\/li>\n\n\n\n<li>Department introduction sections<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When in doubt, choose carefully. Converting a frequently edited section into a synced pattern can create unintended site-wide changes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"not-all-blocks-support-patterns\" class=\"wp-block-heading\">Not All Blocks Support Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Some blocks cannot be used inside patterns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you do not see the <strong>Create Pattern<\/strong> option:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Review the selected blocks.<\/li>\n\n\n\n<li>Remove incompatible blocks.<\/li>\n\n\n\n<li>Try again.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Most common content and layout blocks work well within patterns.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"best-practices\" class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Descriptive Names<\/strong><br>Future editors should immediately understand the purpose of the pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Start Small<\/strong><br>Simple patterns are often more useful and flexible than large complex ones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Synced Patterns Sparingly<\/strong><br>Only use synced patterns when content truly needs to remain identical across the website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Create Patterns for Repeated Content<\/strong><br>If you&#8217;ve recreated something more than two or three times, it may be a good candidate for a pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Review Existing Patterns First<\/strong><br>Before creating a new pattern, check whether a similar one already exists.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"common-pattern-examples\" class=\"wp-block-heading\">Common Pattern Examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Patterns are commonly used for:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Call-to-Action Sections<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Heading\nDescription\nButton<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Contact Information<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Department Name\nEmail\nPhone Number<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Page Introductions<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Heading\nIntroduction\nImage<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Promotional Sections<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image\nText\nButton<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">These reusable elements can save significant time across a website.<\/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 - Creating Patterns\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/UZTHGlcyU9Q?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-creating-patterns\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Creating Patterns\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-creating-patterns\">\n            \n\n<p class=\"wp-block-paragraph\">Hello, and welcome to cutheme Mastery Training, Module 6. In this video, we will go over creating patterns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, now that you know what a pattern is, it\u2019s time to see how they can be created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, create the base for your pattern, the specific blocks in their specific locations. I have this one made here, but feel free to experiment with different layouts for your patterns, and use what works best for your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, select the blocks you want included within your pattern. To do this, select the three lines here. You can select what blocks you want in it. So, select your first block, and select your end block, and shift-click. This will select all blocks in between, so now all your blocks have been selected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once all your blocks are highlighted, select the three dots, and select \u201ccreate pattern\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will then be able to give your pattern a name, and place it in any categories you feel fit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly, you can choose whether this pattern is synced or non-synced.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, synced is selected, which means when you edit the pattern, it will update every instance of that pattern across your site. Make sure your choice is the one that will work the best with your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now click create, and you now have your own pattern.<\/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<ol class=\"wp-block-list\">\n<li>Create a small group of blocks.<\/li>\n\n\n\n<li>Save them as a <strong>Synced Pattern<\/strong>.<\/li>\n\n\n\n<li>Create a second group of blocks.<\/li>\n\n\n\n<li>Save them as a <strong>Non-Synced Pattern<\/strong>.<\/li>\n\n\n\n<li>Give both patterns descriptive names.<\/li>\n\n\n\n<li>Add them to a page and compare how they behave.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Create reusable block patterns to save time, maintain consistency, and simplify page creation across your website.<\/p>\n","protected":false},"author":2,"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-2799","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\/2799","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=2799"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2799\/revisions"}],"predecessor-version":[{"id":4249,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2799\/revisions\/4249"}],"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=2799"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}