{"id":644,"date":"2024-06-27T17:40:36","date_gmt":"2024-06-27T17:40:36","guid":{"rendered":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/27\/site-editor-wordpress-tutorials-for-beginners-wordpress-com\/"},"modified":"2024-06-27T17:40:36","modified_gmt":"2024-06-27T17:40:36","slug":"site-editor-wordpress-tutorials-for-beginners-wordpress-com","status":"publish","type":"post","link":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/27\/site-editor-wordpress-tutorials-for-beginners-wordpress-com\/","title":{"rendered":"Site Editor \u2013 WordPress Tutorials for Beginners &#8211; WordPress.com"},"content":{"rendered":"<p>6 of 10 lessons complete (60%)<br \/>Last updated:<br \/>The Site Editor is a part of the Full Site Editing (FSE) capabilities that have been progressively integrated into WordPress since the release of WordPress 5.9 in January 2022, and has been evolving ever since. While there are several minor updates completed throughout a year, WordPress typically releases two or three main version updates per year. WordPress 6.4 was released on November 7, 2023. All WordPress.com sites use the most recent version.<br \/>The Site Editor expands the block editing experience, which was initially limited to post and page content, to the entire site. This means you can use blocks to design and customize headers, footers, sidebars, and other areas of your site. It provides a no-code, visual way of building and customizing your website from top to bottom. It allows you to edit templates and template parts, styles, and site-wide defaults, offering a more holistic approach to site design compared to the traditional WordPress Customizer.&nbsp;<br \/>Whether you&#8217;re building a blog, a business site, or a personal portfolio, the Site Editor offers a user-friendly way to bring your vision to life without needing deep technical knowledge or coding skills.&nbsp;<br \/>However, as with any new technology, there&#8217;s a learning curve involved. In this lesson, we offer an introduction to navigating the Site Editor and the features it offers.<br \/>To get started, hover over <strong>Appearance<\/strong> in the left sidebar of your <a href=\"https:\/\/wordpress.com\/home\" target=\"_blank\" rel=\"noreferrer noopener\">main dashboard\u2197\ufe0e<\/a> and click on the link for <strong>Editor<\/strong>.&nbsp;<br \/><strong>Note:<br \/><\/strong>If your site doesn\u2019t include a link for Editor under Appearance, your site is using a Classic theme. You\u2019ll need to activate a <a href=\"https:\/\/wordpress.com\/themes\/all\/filter\/full-site-editing\" target=\"_blank\" rel=\"noreferrer noopener\">Block theme\u2197\ufe0e<\/a> in order to access the Site Editor. Before switching themes on an existing site, please review our <a href=\"https:\/\/wordpress.com\/learn\/courses\/create-your-site\/switching-themes\/\">Switching Themes<\/a> lesson. Alternatively, <a href=\"https:\/\/wordpress.com\/learn\/courses\/getting-started\/quick-start-guide\/#Account-Creation\">create a new, free site<\/a> to explore Block themes and the Site Editor.<br \/>Appearance is a parent item in the left sidebar menu of your main dashboard. Hover over it to see the submenu items. This is where the link to the Editor will be located when a Block theme is active.<br \/>When you first enter the Site Editor, you\u2019ll see a navigation Design panel on the left and a preview of your complete Homepage, including the content. Clicking anywhere on the preview portion of the screen will open the Site Editor, which is an editor screen that looks similar to the editor used when creating pages.<br \/>In the top left corner of the editor you&#8217;ll find: the + icon which opens the Block Inserter, this is where you&#8217;ll also find Patterns. Your Undo and Redo action icons. And the 3 horizontal lines will open the List View. <br \/>This title bar is one of the indicators that you are in the Site Editor. When the name here is purple, you&#8217;re editing a template.<br \/>In the top right corner of the editor, you&#8217;ll find icons for:<br \/>Hover over any icon to see a text label indicating what the icon is for.<br \/>At the top of the Settings sidebar there are tabs telling you what you&#8217;re currently working on. When this says &#8220;Template&#8221; it means you&#8217;re editing a template, not a &#8220;page&#8221;.<br \/>The breadcrumb in the bottom left corner also tells you what you&#8217;re editing. <br \/>Depending on your theme and setup, this homepage will either be a dedicated template, called the Default Homepage, or it will be a page combined with a template, called a Custom Homepage. Our <a href=\"https:\/\/wordpress.com\/learn\/courses\/getting-started\/homepage-and-posts-page\/\">Homepage and Posts Page<\/a> lesson further explains these different configurations.<br \/>The name and label in the center at the top of your screen is your first clue to whether you\u2019re editing a template or a page. A gray \u201cpage\u201d name means this content is <strong>built in a page and paired with a template<\/strong>. A purple \u201ctemplate\u201d name means this content is <strong>built directly in the template<\/strong>.<br \/>If you click the Settings icon in the top right corner of the editor, you\u2019ll open the Settings sidebar on the right, and here you\u2019ll also see either Template or Page as the label at the top of this sidebar. These are your primary tell-tale signs that you are in the Site Editor and whether you are editing a template <em>or<\/em> your \u201ccontent\u201d.<br \/>As you further explore the Site Editor and Templates, you\u2019ll learn that there are multi-use templates as well as single-use templates, which are managed differently. We recommend reviewing the <a href=\"https:\/\/wordpress.com\/learn\/courses\/getting-started\/templates-explained\/\">Templates Explained<\/a> lesson to gain a better understanding of when <em>content<\/em> will be included in a template and when it won\u2019t.<br \/>For beginners, we recommend using the Site Editor to focus on editing your multi-use and single-use <em>templates<\/em> and manage your regular page and post <em>content<\/em> from their respective sections from the <a href=\"https:\/\/wordpress.com\/home\" target=\"_blank\" rel=\"noreferrer noopener\">main dashboard\u2197\ufe0e<\/a>. As a rule of thumb, other than for a Default Homepage, avoid editing any page specific <em>content<\/em> within the Site Editor (for now).<br \/>Confirm that you\u2019re seeing the purple template name at the top of the Site Editor screen. If the name at the top of the screen is gray and you see Page at the top of the Settings sidebar, click on the template name in the Settings sidebar to Edit the template.<br \/>Next, click the List View icon in the top left corner. Here, you can explore what blocks this particular template already has in place. Clicking the arrow next to any block will expand it to reveal more blocks. You\u2019ll notice that some blocks may have a lock next to them, this is to act as a warning that these blocks are important for this particular template, and you should be careful about deleting them. Further details are covered in the <a href=\"https:\/\/wordpress.com\/learn\/courses\/getting-started\/templates-explained\/\">Templates Explained<\/a> lesson. For now, let\u2019s explore.<br \/>If you click the Site Icon image in the top left corner, you\u2019ll close the editing mode and return to the preview mode with the Design panel on the left. (Clicking the Site Icon again will take you back to your main dashboard and out of the Site Editor.) From this Design panel you can explore the different options currently available within the Site Editor.&nbsp;<br \/>As the Site Editor feature is evolving, you may sometimes find that it has changed. Always be willing to read and explore the items in this panel, and don\u2019t be thrown off if they happen to change order, or the available items change.<br \/>This section is the primary function of the Site Editor. When you click this section you\u2019ll see a list of active templates that are in use within your site. There\u2019s also an option to manage all templates, and to create new templates. Clicking on a template name will display a description and preview of the template, and access to edit the template.<br \/>This is the next most important section of the Site Editor and includes the full library of pre-designed patterns that come with WordPress.com and your specific theme. It\u2019s also where you\u2019ll find dedicated Header and Footer template parts, and any custom patterns that you create.<br \/>This section provides quick access to the color palettes, if available, for your particular theme. You can click on the palettes in the left panel to apply it to your entire site. These palettes are a premium feature that is included with the Explorer plan and higher.<br \/>The \u201ceye\u201d icon will open the Style Book where you can scroll to see the various styles applied across your site. The \u201cpencil\u201d icon will take you into the editor and open the Styles panel on the right.<br \/>Some themes may not offer a selection of predefined color palettes, in which case this option in the main Design panel will take you into the editor and open the Styles panel on the right.<br \/>In this section you can access your site pages, and you can even edit them directly in the Site Editor. The Manage All Page link at the bottom will take you back to the main Pages section accessed from the main dashboard. There is nothing wrong with editing page content from this section, just remember that these are pages and you\u2019re editing content. Edits you make here are the same as editing the content from the Pages section of your main dashboard. The page settings available within the Site Editor are also limited to what you\u2019ll find from the main Page section.<br \/>As mentioned, for beginners, we recommend managing pages from the main Pages section from the <a href=\"https:\/\/wordpress.com\/home\" target=\"_blank\" rel=\"noreferrer noopener\">main dashboard\u2197\ufe0e<\/a> and just use the Site Editor for editing templates, until you\u2019re clear and confident with the different sections.<br \/>When you\u2019re editing templates, you\u2019ll find a level of convenience at being able to access specific pages within the Site Editor for quick edits, but it\u2019s also a feature that can cause some confusion. So be intentional about where you are and what you\u2019re editing.<br \/>This is an evolving feature that currently allows you to perform some basic edits such as reordering and removing menu items from the available menus in your site. More advanced menu management happens directly in the Site Editor wherever you have placed the Navigation block. For further information on managing menus for Block themes in the Site Editor see our lesson on <a href=\"https:\/\/wordpress.com\/learn\/courses\/create-your-site\/working-with-menus\/\">Working With Menus<\/a>.<br \/>It\u2019s worth spending some time investigating these items and reading the explanations provided for each.<br \/>Remember, the Site Editor is a dynamic and evolving feature, so staying curious and open to learning is key to making the most of it.<br \/>As you continue to explore and experiment with the Site Editor, feel confident in your ability to bring your unique vision to life on your website. Whether you\u2019re adjusting templates, experimenting with patterns, or refining page layouts, each step you take is an opportunity to enhance your site\u2019s functionality and aesthetics.<br \/>We encourage you to revisit lessons, explore new updates as they come, and practice regularly. The more you use the Site Editor, the more intuitive it will become. And don&#8217;t forget, our comprehensive lessons and resources are always here to support you.<br \/><span id=\"docs-internal-guid-925f309d-7fff-23d4-a89c-ddf26ea5d064\"><\/span><br \/>Understanding Themes<br \/>Templates Explained<br \/> \t\tQuestions?\t\t<a href=\"https:\/\/wordpress.com\/help\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"> \t\t\tContact our Happiness Engineers.\t\t<\/a> \t<br \/> \t\tSelf-hosted WordPress site?\t\t<a href=\"http:\/\/wordpress.org\/support\" target=\"_blank\" rel=\"noreferrer noopener\"> \t\t\tFind support here.\t\t<\/a> \t<br \/> \t\tNew to WordPress.com? \t\t<a href=\"https:\/\/wordpress.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener\"> \t\t\tFind your perfect-fit plan here.\t\t<\/a> \t<br \/>Questions?<\/p>\n<p><a href=\"https:\/\/news.google.com\/rss\/articles\/CBMiQGh0dHBzOi8vd29yZHByZXNzLmNvbS9sZWFybi9jb3Vyc2VzL2dldHRpbmctc3RhcnRlZC9zaXRlLWVkaXRvci_SAQA?oc=5\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>6 of 10 lessons complete (60%)Last updated:The Site Editor is a part of the Full Site Editing (FSE) capabilities that have been progressively integrated into WordPress since the release of WordPress 5.9 in January 2022, and has been evolving ever since. While there are several minor updates completed throughout a&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":0,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}