Transcript
Introduction
Let’s explore the Site Editor, which allows you to design everything on your site using blocks, from the header to the footer and everything in between. Let’s make our way to Appearance and click on Editor. This will open the Site Editor. On the left, there’s the site view sidebar, and this nifty tool lets you dive into the key parts of your site, including navigation, styles, pages, templates, and patterns. This tutorial aims to gain a deep understanding of these elements.
Navigation
Let’s start at the top with navigation. Here, you can quickly see and tweak all your menus. It’s your command center for menu management. You can make simple edits directly. Like Reordering. When you click on the three vertical dots next to the menu item’s name, you can rename, duplicate, and delete the item as required. If opened in the editing mode, you can make certain changes without distractions. And updates will sync across your site. You can add new pages or other menu items when you click on the plus icon. You will notice that the Navigation block is locked in this area. If you want to style your navigation menu, you must open a template or the template part it is part of.
Styles
Next, let’s talk about styles. When you select Styles, you will be able to browse through a variety of different style combinations that come with your theme. When you click Edit Styles, you can browse your styles from here and then change your site’s typography, colors, and layout. Let’s see how it works. When you click Typography, you can manage the typography settings for text, links, headings, captions, and buttons. A wonderful new feature is that you also now have access to a font library. Below Fonts, we will see the fonts added to our theme. But when we click Manage Fonts, we can install, remove, and activate local and Google fonts across your site with any block theme. When you click on Install Fonts, you can install any Google font on your website and click on Upload if you want to upload a font from your computer. Make sure you have the right to use any fonts you are uploading. Below Typography, we will see colors. Here, you can also change the colors for different global elements on your site. When we make our way to Layout, we will notice you even have control of elements such as padding and block spacing.
Style Book
If you look down further below, you can customize the appearance of specific blocks for your whole site. To see how these blocks will change if you edit them, go to your site’s Style Book. You will notice there is a little eye at the top. The Style Book allows a user to preview every block that can be inserted into your site. It gives you or provides you a glance preview of how global styles will affect any blocks displayed without the user inserting those blocks into a template. It is also important to note that a block’s styling can be adjusted within the Style Book. Let’s update the Buttons block, for example, by changing the background color and the letter case to upper case. If you like what you see, you can go ahead and click Save. Please also note that changing an individual block in your Style Book takes precedence over the global styles you’ve set.
Style Revisions
While we are here, we also need to talk about style revisions. Let’s go ahead and click on Style Revisions next to the Style Book icon. Style revisions will open up when you’re editing a template in the Style Book. The styles revisions feature adds a visual way to browse changes to your styles over time, and you can easily revert to a previous stage if you find a style you prefer or want to revert back to a previous version. You merely have to select the version and then click on Apply. In this example, I am editing a template and will follow the same process. I will open up style revisions, select a previous style, and then click Apply to revert. When you click on the three vertical dots next to styles, you can reset styles and add additional CSS.
Pages
Below Styles, we can go to Pages to create and publish pages. To add a new page, click the plus icon next to pages and create a draft. But you can also, of course, create a new page when you are in your Dashboard or WP Admin. Next, let’s open up one of our existing pages, my About Page. When you open a page, it is important to remember to add content to the Content block. To put it another way, the Content block is the house or the container for all your content. The second thing to remember is that you can’t customize your header and footer when editing a page. That’s all part of managing templates. If you click on the header, you’ll get a message that says, ‘Edit your template to edit this block.’ If you want to modify the template that has been assigned to this page, you can click on Edit Template. This will take you to your page template in this example. Here, you can modify your header and your footer. You will not be able to add content to a template. Content, of course, gets added to posts and pages. The Content block is merely a placeholder in this context.
Templates
This brings us to our next topic, namely templates. Templates provide the structure for how your content is displayed. When you select templates, you will notice a range of templates that come with your theme, built-in templates. For example, the page template that displays a single page, the index template that is a fallback template, or the single post template that displays the layout of single posts. And right at the bottom, we will see any custom templates. When you click on the plus icon next to templates, you can add a variety of new templates, even a custom template that can be applied to any post or page. Let’s open the page template to understand how a template works better. A template provides structure. A template usually includes a header template part and a footer template part.
The Post Content block pulls the content from the page or post assigned to the template. So, a template is only used to modify the layout or design of the page, namely the header, footer, and even sidebar. The Site Editor, therefore, makes a clear distinction between editing the template and the page. You can modify your header and footer within the template. One of the options you also have is to click on the three vertical dots and select Replace Header. Then, you can replace your current header with one of your existing header template parts or header patterns that come with your theme. Another option you have is to select your header and then click on Edit. This will allow you to modify your header or footer within template editing mode without any other distractions.
Assigning a template
To assign a new template to a page or post, open the relevant content, in this case, my About Page, and then open the sidebar settings on the right. Next to Template, click on the name of the template, select Swap Template, and then you can choose a custom template to assign to your page or post.
Managing templates
It is also worth mentioning that when you click on Manage all templates and then select Bulk Edit, you can explore and filter through your templates via table or grid view. And when you select Bulk Edit again, there are more filtering options. Please note that you can explore and filter pages and template parts in exactly the same way.
Patterns
Finally, let’s talk about patterns. At the top, you can view all the available patterns. When you select My Patterns, you can create and manage your own custom synced and non-synced patterns. Below My Patterns, we can view all our custom patterns and patterns that come with our theme in their relevant categories. Below Template Parts, we can also create and manage our header, footer, and general template parts. Template parts are essentially patterns. They are synced reusable components that can be used across your site.
Custom patterns
Let’s start with My Patterns. To create your custom pattern, click the Inserter next to patterns and then select Create Pattern. After naming it, you can select to add it to the relevant category and then decide to sync or not sync your pattern. A synced pattern will sync across your entire site, meaning if you change your pattern in one place, it will update anywhere it is used. You can also toggle this off if you prefer to have a non-synced pattern. Non-synced patterns are just regular patterns that can be edited independently. When you return to your custom pattern area, you will notice that synced patterns have a purple icon and non-synced patterns don’t. Next, you will notice that the patterns that come with your theme are locked, and you cannot edit them. But when you click on the three vertical dots below a pattern, you can copy it to your My Patterns area.
Template Parts
At the bottom, we can create and manage our header, footer, and general template parts. You have two options here. You can create custom headers and footers or customize template part patterns that come with your theme. To create your own template part, click on the plus icon at the top next to patterns and select Create a template part. When you add a new template part, you can choose between general header and footer template parts. General template parts are not tied to any particular area, so remember to give them a descriptive name. When you open up a template part from here, you will be able to modify and edit your template part in template editing mode without any distractions. You can also open up the relevant template and, in this case, my custom template, and then you can modify your header or footer template part from within the template. As shown earlier, you can easily replace one of your headers or footers with a pattern or an existing template part from the library.
Command Palette
To end, I also want to highlight an extremely helpful feature called the Command palette that will save you loads of time and help you move around your Site Editor more effectively. The command palette allows you to complete tasks and navigate within the Site Editor swiftly. You can, for example, type in ‘New’ to create a page or template or just the name of the area where you want to go. For example, pattern to manage all my patterns. You can access the command palette using the shortcut command+k on Mac or control+k on Windows. You will also find it in the site view sidebar by clicking the search icon. Or you can merely click on the title bar.
Conclusion
That concludes our brief overview of what you can achieve using the Site Editor.
Practical
Go to WordPress Playground and complete the following tasks to test your knowledge. Click on ‘Activate Live Preview’ to get started:
- Choose a different style combination that comes with your theme.
- Add a Google Font to your library below Typography.
- Assign a custom template to the Sample page, such as Page with Sidebar. You can do this when you open a page from within the dashboard or the Site Editor.