{"id":98183,"date":"2022-06-27T09:01:57","date_gmt":"2022-06-27T13:01:57","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=98183"},"modified":"2022-06-27T12:18:30","modified_gmt":"2022-06-27T16:18:30","slug":"build-website-with-patterns","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/","title":{"rendered":"How to Build a Website Using Patterns in WordPress FSE"},"content":{"rendered":"<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\" alt=\"How to Build a Website Using Patterns in WordPress FSE - header image\"><\/figure>\n\n\n\n<p>WordPress websites are often built based on a theme, and they often have predefined formats on what their pages will look like.\u00a0 With patterns, you can take a simple theme like the default Twenty Twenty-two theme and use the full site editing system to create your own template. Since free Patterns are also available on the web through the WordPress.org site, this makes the ability to create new sites based on patterns much easier.<\/p>\n\n\n\n<p>This tutorial will walk you through the steps of building a site by first creating a rough draft or wireframe of your eventual site, building the templates of your pages using patterns, and then showing how you can fill those templates with your own information.\u00a0\u00a0<\/p>\n\n\n\n<p>We will be building a simple informational site with only four pages, but you will be able to see how easy it is to expand the site for your needs.\u00a0\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#rough\">Starting with a Rough Draft or Wire Frame<\/a><\/li><li><a href=\"#patterns\">Using Patterns to Build your Website Templates<\/a><\/li><li><a href=\"#filling\">Filling Your Content Based on Your Selected Patterns<\/a><\/li><\/ul>\n\n\n\n<p class=\"alert alert-info\">This tutorial uses WordPress 6.0 and the default Twenty Twenty-two theme.\u00a0 We will also be using patterns from the Pattern directory in WordPress.org.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rough\">Starting with a Rough Draft or Wire Frame<\/h2>\n\n\n\n<p>One of the best practices you can do when building a website is to create a rough draft or wireframe of the website you intend to build.\u00a0 You can use pencil\/pen and paper to draw it out, get graphics programs, or even use programs dedicated to creating prototypes of applications\/websites.\u00a0\u00a0<\/p>\n\n\n\n<p>Before you start drafting your website (or while you\u2019re doing it), you will need to make a list of the pages that you intend to include in your website.\u00a0 The website we will demonstrate in this tutorial is a simple informational site with the following pages:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#front\">Front Page (home page)<\/a><\/li><li><a href=\"#about\">About Page<\/a><\/li><li><a href=\"#contact\">Contact Page<\/a><\/li><li><a href=\"#info\">Info Page<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"front\">Front Page<\/h3>\n\n\n\n<p>The front page is important because it is the first page that anyone sees when navigating to your site.\u00a0 It will also include the menu system to navigate your site, information that you want to present immediately to your viewers, and a footer that can include other reference information or contact information.<\/p>\n\n\n\n<p>We will keep things simple and use the tools provided by <a href=\"https:\/\/www.google.com\/slides\/about\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Slides<\/a> to create the rough draft.\u00a0 Basically, we can draw shapes on the slide and it can provide a model of how we want the website to be arranged.\u00a0 This is also an opportunity to put notes about what will be placed on a page.<\/p>\n\n\n\n<p>The rough draft is not intended to be a pure representation of how the site will appear, but it will give you and others who might be part of the website building process insight into what will be on the site and your intentions for the operation. It is an approximate appearance of the site.<\/p>\n\n\n\n<p>For example, this screenshot is a slide that represents the front page of the site:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/YS0CcWLIKYT138gmZcJl5ItF8EMtIcXz4UUmkW5XHFXMYVlze8oaIxnqSW2lbJLVuWTKdbPyr6a3SSAFYZJT6a7csC3u8nay60Rw6fjpv8xTO8q5vOaI9TcAJtYCzosc44O_JsdX7jep5wNEew\" alt=\"\"><\/figure>\n\n\n\n<p>Although I\u2019m providing a general description of these pages, you can be really specific when building the draft so that you have a better idea of the items on the front page.\u00a0\u00a0<\/p>\n\n\n\n<p>Additionally, since the Google Slide can be shared with people, you can collaborate with others.\u00a0 For example, you might have a strong graphics person who can provide your site graphics or other images. You can add the images to the slide to help make it closer to how the page will appear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"about\">About Page<\/h3>\n\n\n\n<p>The about page is generally a biographic or information page that describes the history of an organization or person or the story behind it.\u00a0 It can also be used to provide mission statements or other important information that characterizes the organization or people who are represented by this website.<\/p>\n\n\n\n<p>In the screenshot of the rough draft below, you can see that the header and footer remain in place.\u00a0 You can leave them the same, or change the size of the header or footer depending on the links you want to display when a person is viewing this page.\u00a0 At the very least, you should provide a link back to the home page of your website.<br><br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/hSqjsTwpN0SZbPMPZu2HKTxvdf-Y88g3vGst9Ox_fc-3J339FOeGKb2qIVTNblRrgscQXfTsufOsxXtpZrZNoTmVpw-XjX1-kdQs6DrMposIOpXzaDtiTmLJa04QCTpPtGGGqsD9FXWf7glw_w\" width=\"1198\" height=\"673\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"contact\">Contact Page<\/h3>\n\n\n\n<p>A contact page is generally a form that can be filled online through a computer or mobile device so that contact can be established with someone who may be interested in your products or services.\u00a0\u00a0<\/p>\n\n\n\n<p>There are many different plugins that can be provided to create contact forms.\u00a0 We have provided a link to a weForms article that shows you <a href=\"https:\/\/www.inmotionhosting.com\/support\/product-guides\/weforms\/how-to-create-a-contact-form-using-weforms\/\">how to create a contact form<\/a>.\u00a0 The plugin provides the form as well as the tracking of responses to the form.\u00a0\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/a4s5X0jcJjcSKVmVTXYHOhna0WG3qJ_yw9Vw-P7wBI231UnoIRPHlW92_WLgpg_8l73b2YxRwLvaAeKdLmq31S8VNpkPioUXqaW7pgiSBWJEY3u9lUf21en1WCJns2eTh0WzHsILFRE2VQI7xQ\" alt=\"\"><\/figure>\n\n\n\n<p>Contact pages should not include email addresses as they can be read by robots used by spammers who look for email addresses to send their spam.\u00a0 However, if you feel that an email address should be provided for further contact, then definitely include it.\u00a0 We would recommend a good spam filtering service to help fight spam emails that hit that address.<\/p>\n\n\n\n<p>Phone numbers are generally not listed either, but if you have a business phone number and it is imperative that you are contacted by phone, then it can be added to this page.\u00a0\u00a0<\/p>\n\n\n\n<p>Addresses for businesses should be added if a physical location is part of the information you\u2019re trying to provide through the website.\u00a0\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"info\">Info Page<\/h3>\n\n\n\n<p>The info page can also be called a product information page or curricula vitae (of a person) \u2013 it\u2019s generally a page (or pages) that include information on the persons(s), group, organization, or service that you want to advertise on the web.\u00a0\u00a0<\/p>\n\n\n\n<p>You should provide media such as images or videos that will help to show visitors your knowledge or products.\u00a0\u00a0<\/p>\n\n\n\n<p>The info page is different from the about page in that the information you are providing is more specific to describing your services or products that you want people to know about.\u00a0 You may also want to rename the page to something more appropriate.\u00a0\u00a0<\/p>\n\n\n\n<p>Header and footers should remain on the page and provide navigation options for the viewer.\u00a0 This also helps to maintain colors and format that can help to establish the professionalism of your website.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/zmynRgmZnb6Xm564QK9To2oRAbtIkE1eJpQe4RTgx1cpO2iAUgfT_5e2xyKWvfDe0M4CI4UIWMz-3B0j3rHhX4-Ty72nJGu7n2SWOgCAE3PrYm2IS-xo1TX4EJg1GBrJDRm3QdzDuY9Ugm6Rvw\" alt=\"\"><\/figure>\n\n\n\n<p>Make sure to include a call to action that encourages interested parties to contact you through the contact page.<\/p>\n\n\n\n<p>As you can see, it\u2019s really very simple to quickly build an informative website.\u00a0 The next step is to find patterns that you can use to quickly build your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"patterns\">Using Patterns to Build your Website Templates<\/h2>\n\n\n\n<p>Patterns can be found in block themes that include them and in the WordPress.org Pattern directory.\u00a0 While you can go crazy choosing all kinds of patterns, it\u2019s best to try and keep it simple so that website has a more uniform look.\u00a0\u00a0<\/p>\n\n\n\n<p><strong>Editing the Templates<\/strong><\/p>\n\n\n\n<p>To keep the website consistent, it\u2019s best to first modify the website templates.  The templates make up each page within the site.  To see a list of the pages, you will first need to be in the site editor.  If you\u2019re in the WordPress Dashboard, click on <strong>Appearance<\/strong>, then click on <strong>Editor<\/strong>.  Click on the WordPress symbol in the top left corner of the screen, then click on <strong>Templates<\/strong>.  <\/p>\n\n\n\n<p>Each template represents a page within your website.  If you wish to add your own page, then click on the  <strong>Add New<\/strong> button in the top right corner.<\/p>\n\n\n\n<p><strong>Changing the Header on the Home Page<\/strong><\/p>\n\n\n\n<p>Making changes to some of the pages may at first seem daunting, but it\u2019s a very simple process once you understand the elements of each page.  The Home page is very important since that is the first page that anyone sees. <\/p>\n\n\n\n<p>The Twenty Twenty-two theme home page uses a header and footer.  In order to make changes to these elements, you will need to work with Template parts.  Follow the steps below in order to change the header of the Home page by first changing the template part.<\/p>\n\n\n\n<ol start=\"1\" class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log in to the WordPress Administrator.<\/a><\/li><li>Click on <strong>Appearance<\/strong>, then click on <strong>Editor<\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1421\" height=\"733\" src=\"https:\/\/lh4.googleusercontent.com\/nwbKo1xpEbz7Z_JWs4y5qTNlzOF3hTr9yC7ElozSwsLWv4aww2A88eymRjDYEJgH3P5h2bed6KCXvq450AUDqxlFzzgQ_MyNdapW3qIKsaUlVX4Zyxmua-AEu06_fXvSXUjxv_D7bEzMpvLV_A\"><br><\/li><li>You will see the editor open the Twenty Twenty-two website.\u00a0 In the top left corner, click on the <strong>WordPress symbol<\/strong>.\u00a0 This will display a menu on the left side of the screen.<br><\/li><li>Under Editor, click on <strong>Template Parts<\/strong>.\u00a0 This will show the template parts included with the Twenty Twenty-two theme. Template parts make up the templates used as headers or pages and in order to make changes to those elements in your site, you will need to first change the template parts or add to them.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"638\" class=\"wp-image-96035\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/select-template-parts-editor.jpg\" alt=\"Select Template Parts\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/select-template-parts-editor.jpg 1176w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/select-template-parts-editor-300x191.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/select-template-parts-editor-1024x653.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/select-template-parts-editor-768x490.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>You will see that there are several headers here that you can select.  You can also add your own.  In the top right corner, click on <strong>Add New<\/strong>.<br><\/li><li>You will be given the choice of template part you want to create:  General (checked by default), Header, or Footer.  Since we\u2019re modifying the header first, click on <strong>Header<\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98188\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part.jpg\" alt=\"Create template part\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>You will notice that the <strong>Create<\/strong> button is grayed out.  In order to make it clickable, you will need to name your template part first.  Type a name for your new template part, then click on the <strong>Create<\/strong> button.<br><\/li><li>You will see a blank white rectangle where you can create a new header.  For this example, we\u2019re going to use the patterns within the Twenty Twenty-two theme.  Click on the <strong>+ sign<\/strong> in the top <em>left<\/em> corner.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98189\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor.jpg\" alt=\"Template part editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Next, click on <strong>Patterns<\/strong>. By default, there is a filter that is set to <em>Featured <\/em>directly beneath the<em> Blocks<\/em>, <em>Patterns<\/em>, and <em>Reusable <\/em>options in the left column.  Click on the drop-down arrow in the box and select <strong>Headers<\/strong>.  You will then see a list of header patterns that come with the Twenty Twenty-two theme.  Select the one you want to use.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"471\" class=\"wp-image-98194\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor.jpg\" alt=\"patterns in the the editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor-300x141.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor-1024x483.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor-768x362.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/patterns-in-editor-1536x724.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on <strong>Save <\/strong>in the top right corner. It will confirm that you\u2019re saving your new header.  Click on the <strong>Save <\/strong>button again to confirm, or cancel to choose a different pattern for the header.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"458\" class=\"wp-image-98195\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/save-new-header.jpg\" alt=\"Save new header\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/save-new-header.jpg 1026w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/save-new-header-300x137.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/save-new-header-1024x469.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/save-new-header-768x352.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Now we need to return to the <strong>Editor <\/strong>menu so that we can select the <strong>Home <\/strong>template to modify it.  Click on the WordPress symbol in the top left corner, then click on <strong>Templates<\/strong>.<br><\/li><li>Click on the <strong>Home<\/strong> template. To see this change more clearly, first, click on the <em>List view<\/em> option in the top-left corner.<br><\/li><li>This will bring up the list of blocks making up the Home page. The default header should be in place.    Click on the <strong>Header<\/strong> (either in the editor screen or in the list view).<br><\/li><li>You will see a contextual menu bar appear and you will see a <strong>REPLACE <\/strong>option on it.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"469\" class=\"wp-image-98196\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header.jpg\" alt=\"Replace header\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header-300x141.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header-1024x480.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header-768x360.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/replace-header-1536x720.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on <strong>Replace<\/strong>.  This will bring up the list of available headers (from the template parts) and should include your newly created header.  Choose your header.<br><\/li><li>Click on <strong>Save <\/strong>in the top right corner. It will confirm that you\u2019re saving your modified <strong>Home<\/strong> page.  Click on the <strong>Save <\/strong>button again to confirm, or cancel to choose a different header for the <strong>Home<\/strong> page.<br><\/li><\/ol>\n\n\n\n<p>To make changes to the other pages of your WordPress site, repeat these steps, but select the page that you wish to edit (other than the home page).  If you want to make further changes to the Home page template, then you can edit it without having to change a template part.  <\/p>\n\n\n\n<p>Just remember that template parts make up the header and footer.  So, if you wish to change those elements, then you will need to change the corresponding template part first.<br><br>The Twenty Twenty-two theme only has header and footer template parts.  This may differ in other themes.<\/p>\n\n\n\n<p><br><strong>Using Patterns from the WordPress.org Site<\/strong><br><\/p>\n\n\n\n<p>If you want to use a pattern from the WordPress.org site, then follow the steps below:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log in to the WordPress Administrator.<\/a><\/li><li>Click on <strong>Appearance<\/strong>, then click on <strong>Editor<\/strong>.<\/li><li>This will take you to the home page.  In this example, we will demonstrate changing the header pattern. Click on list view at the top left corner of the editor. You can then see that the header consists of multiple blocks.  The header is a template part in this pattern so, in order to create a custom one, we will need to create a new header.  <br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98185\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page.jpg\" alt=\"Click List view\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editor-home-page-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on the WordPress symbol in the top left corner. This will open the menu for the template and template parts that are part of the theme and make up the site. Click on <strong>Template Parts<\/strong>.<br><br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98186\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts.jpg\" alt=\"Editor menu for templates\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/open-wp-menu-template-parts-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>You will see a footer and three headers that are in the Twenty Twenty-two theme.  Click on the blue button labeled <strong>Add New<\/strong> in the top right corner.  <br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98187\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new.jpg\" alt=\"List of template parts\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-parts-list-add-new-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>You will see a dialogue window open asking if you want to create a general(checked by default), header, or footer template part.  We are creating a custom header, so select header, then add a name for the customer header.  You will need to do this before you can click on the <strong>Create<\/strong> button.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98188\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part.jpg\" alt=\"Create template part\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/create-template-part-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Once you click on the <strong>Create <\/strong>button, you will see the editor screen for the template part. Keep the editor open (don\u2019t close it). Open a new tab in your internet browser and go to the <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress.org Patterns directory<\/a> and then select a new header pattern there.  <br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98189\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor.jpg\" alt=\"Template part editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/template-part-editor-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>If you use a pattern from the online directory, click on the copy button of the pattern you have selected and then paste it into the editor. For example, I have selected a pattern from the online directory and clicked on the copy button.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98190\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy.jpg\" alt=\"Online pattern - copy\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/online-header-pattern-copy-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br>In the template editor, right-click on the block, then select <strong>Paste<\/strong>.<br><br>You will see the pattern added.  It will appear like this:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"496\" class=\"wp-image-98191\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added.jpg\" alt=\"Customer header added from online\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added-300x149.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added-1024x508.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added-768x381.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/custom-header-added-1536x762.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on the blue <strong>Save <\/strong>button in the top right corner of the template editor. Note that the graphics of the custom header can\u2019t be edited unless you edit the template part.  There you can select the graphic and replace it using the blocks.  <\/li><\/ol>\n\n\n\n<p>You can repeat this process, but selecting the footer and then using the same steps to make changes.  You would be creating a custom footer.  The next step is to add your content to the modified theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"filling\">Filling Your Content Based on Your Selected Patterns<\/h2>\n\n\n\n<p>The final step in using patterns to build a WordPress site is to fill your modified site using your own content.  This is typically the easiest part of the process.  You would go into the editor and add your content starting with the front page (home page).  <\/p>\n\n\n\n<p>Typically, the home page may have elements on it that don\u2019t regularly change.  These elements can be changed using the Site Editor (from the WordPress Dashboard:  Appearance &gt;Editor).<br><br>Otherwise, the content that is on your front page comes from posts that are displayed between the header and the footer.  Create new content by creating posts.  <\/p>\n\n\n\n<p>You can also create new menus or submenus.  To learn more about building menus you can go to <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/menus-in-full-site-editor\/\">Working Menus in WordPress FSE<\/a>, or you may need to <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/creating-submenus-with-fse\/\">create submenus for your site.<\/a><\/p>\n\n\n\n<p>Patterns are not restricted to simply making changes to the templates or template parts that make up your WordPress site.  You can use them in a post to help provide some creativity in its appearance.<\/p>\n\n\n\n<p>Finally, if you\u2019re working with patterns, don\u2019t be shy in editing them when using the WordPress full site editing system.  They\u2019re excellent guides in giving you a format to work with but they don\u2019t need to have the same elements.  Change them as needed per your needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern-1024x480.jpg\" alt=\"\" class=\"wp-image-98197\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern-1024x480.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern-300x141.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern-768x360.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern-1536x720.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/editing-a-pattern.jpg 1920w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Here you can see the text highlighted for editing.  You can also easily replace the background graphic or add other blocks.  Have fun and be creative!<\/p>\n\n\n<div class=\"alert alert-info\">A modern, user-friendly website can boost your online engagement and help build your business. <a href=\"https:\/\/www.inmotionhosting.com\/services\/wordpress-website-design?mktgp=t&amp;utm_source=id$$post_id$$&amp;utm_medium=link&amp;utm_campaign=supportcenter&amp;utm_term=imw\">Contact our professional web design team today<\/a>\u00a0for a beautiful, custom WordPress website.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress websites are often built based on a theme, and they often have predefined formats on what their pages will look like.\u00a0 With patterns, you can take a simple theme like the default Twenty Twenty-two theme and use the full site editing system to create your own template. Since free Patterns are also available on<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4532],"tags":[],"class_list":["post-98183","post","type-post","status-publish","format-standard","hentry","category-full-site-editing"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"WordPress websites are often built based on a theme, and they often have predefined formats on what their pages will look like.\u00a0 With patterns, you can take a simple theme like the default Twenty Twenty-two theme and use the full site editing system to create your own template. Since free Patterns are also available on Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-27T13:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-27T16:18:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"How to Build a Website Using Patterns in WordPress FSE\",\"datePublished\":\"2022-06-27T13:01:57+00:00\",\"dateModified\":\"2022-06-27T16:18:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\"},\"wordCount\":2694,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\",\"articleSection\":[\"Full Site Editing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\",\"name\":\"How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\",\"datePublished\":\"2022-06-27T13:01:57+00:00\",\"dateModified\":\"2022-06-27T16:18:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage\",\"url\":\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\",\"contentUrl\":\"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Website Using Patterns in WordPress FSE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting","og_description":"WordPress websites are often built based on a theme, and they often have predefined formats on what their pages will look like.\u00a0 With patterns, you can take a simple theme like the default Twenty Twenty-two theme and use the full site editing system to create your own template. Since free Patterns are also available on Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-06-27T13:01:57+00:00","article_modified_time":"2022-06-27T16:18:30+00:00","og_image":[{"url":"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"How to Build a Website Using Patterns in WordPress FSE","datePublished":"2022-06-27T13:01:57+00:00","dateModified":"2022-06-27T16:18:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/"},"wordCount":2694,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ","articleSection":["Full Site Editing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/","name":"How to Build a Website Using Patterns in WordPress FSE | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ","datePublished":"2022-06-27T13:01:57+00:00","dateModified":"2022-06-27T16:18:30+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#primaryimage","url":"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ","contentUrl":"https:\/\/lh3.googleusercontent.com\/gmnCwoPJ2uZvIFHUwajIwMADYmlQfb_B7uAUz24r3WVm05kEClj6tE9ueYQzlEg4Tot0W_dYG3yDDuAbFmY5tARDjIY197I-Lygscy3oQwrusT39D4D9QnqgxFJzM-uiWoy4kZMVKY0Etn5JUQ"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/build-website-with-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Build a Website Using Patterns in WordPress FSE"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/98183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=98183"}],"version-history":[{"count":6,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/98183\/revisions"}],"predecessor-version":[{"id":98200,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/98183\/revisions\/98200"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=98183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=98183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=98183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}