In this article, we’re going to discuss the basic anatomy of a webpage, review the traditional approach to the components of a webpage, then we’ll take a closer look at what has come to be known as Full Site Editing (FSE) and break it down into a few bite size pieces, specifically for beginners.
Caveat: The term Full Site Editing (FSE) has been a work-in-progress name and could well be subject to change.
Structure of a basic webpage
Setting aside the countless options for types of content, the basic anatomy of a webpage is pretty consistent.
Header
At the very top of the site themes provide a section referred to as the Header, which typically includes a logo, site title, site tagline, and a menu. It might also have some other features, or exclude some of these components, but these are the typical pieces of a website Header.
Footer
At the very bottom of the site, the theme may also provide a section called a Footer where you can place a limited amount of content, typically referred to as widgets.
Sidebar
Some themes might also include a Sidebar area on the left or right, where you can again place certain pieces of additional content.
Main Content
Between the Header and Footer section is the Main Content area that displays the information you add to Pages or Posts.
Whether you’re using the Classic editor or the Block editor, this is the basic anatomy of a webpage.
First, let’s look at the traditional way
You spend some time choosing a theme and then activate it. The theme you choose provides you with a particular layout, likely representing something similar to the screenshot above.
In a traditional theme the Header, Footer, and Sidebar are typically managed from the Customizer and the Widgets area, both found under Appearance in the main dashboard.
With a traditional theme, in most cases, you have very little (if any) control over the general layout of the Header, Footer, and Sidebar (without the use of code). They have a set structure to them. You can change what information they display, you can change some colors and maybe the font, but not the structure of them. If the logo is on the left and the menu is on the right, that’s what you get. If you don’t want that structure, you pick a different theme.
This is true of Classic and Hybrid type themes. For simplicity’s sake, this article is not going to touch on all the possible exceptions or workarounds to this scenario.
We are assuming that you don’t know how to code, you don’t know what CSS is (or don’t have access to it), and you are using a standard, basic theme. The structure of that theme is what you get. Period. Remember, this is an article for beginners.
You then create a Page (or Post) and you add content to it. You can’t see the structure of the theme while you add this content, but you are creating the pieces that are going to display between the predefined Header and Footer of the theme structure, in the Main Content area.
When you save (or publish) that Page you can then view the website and see that Page content displayed on a webpage with the theme structure surrounding it, as one combined piece. Your theme structure and Page content have merged together to form a complete picture.
Unsuspecting analogy
For those of you who remember the days of overhead projectors along with the use of transparencies and dry erase markers, this analogy will help.
You have a transparency sheet that was created with some specific information. It’s a template that you place on the projector and it displays on a wall (or screen). You can also (optionally) place a blank transparency over top of the template and then use a dry erase marker on the protective overlay to add information to the transparency that also shows up on the wall. You can erase that new information and/or add more information. You can swap out the transparency template with a different one and your dry erase marker information will combine with the new template. What you see on the wall is the combination of the transparency template and the dry erase markup, to form a complete picture.
The transparency template is your website theme. The information added with the dry erase marker is the content you added in the Block editor for the Page content.
You can purchase or create new transparency templates, but you can’t change the structure of existing ones.
You can switch themes on your website, but you can’t change the structure of an existing theme (without special skills or tools).
What is FSE?
As caveated above, the WordPress community has been using the terms FSE and Full Site Editing since the introduction of this new feature. It is a work-in-progress name and there is a possibility that it will evolve. But for now, and for simplicity, we’ll continue to call it FSE for the rest of this article.
Full Site Editing (or “FSE”) is a collection of interrelated features that unlocks the ability to edit your entire site using blocks. This allows you to take advantage of the familiar and flexible experience of the Block Editor in more places. In short, you can now change the structure of your theme, without any special skills or tools.
A better way to think of FSE is as a “Site Designer” tool.
Like all aspects of WordPress, it’s a powerful feature that can feel a bit complex, but can be approached in layers, one step at a time, and then grow with you.
When a WordPress site is using a particular type of theme that enables the features of FSE it opens up a whole new world for creating a website. But just because you can doesn’t mean you have to. Keep that in mind as you start to explore and learn about this game changing feature.
Now, let’s look at an FSE theme
When you activate an FSE theme you’re given access to an additional editor called the Site editor. Naming things is hard, especially when technology is progressive. At the time of this article we can think of the Site editor as a type of theme or Template editor. It’s capabilities will likely evolve over time, but for now, let’s focus on what we have.
This Site editor is going to allow us to edit the structure of our chosen theme. We do that by editing our templates.
So now, if the Header is displaying the logo on the left and the menu on the right, and we want to change that, we can.
Without having to switch to a different theme. And without having to understand any kind of code.
The basic structure described previously still applies. Our FSE template can have a Header, a Footer, and even a Sidebar, if we want. But we can also choose which of the pieces we do have and how they’re arranged. And our Page or Post content will still be displayed in the Main Content area between the Header and Footer when we’re finished.
Basically, the Site editor is allowing us to create/edit our own custom transparency templates (theme templates) that will then merge together with our dry erase markups (Page and Post content), to form a complete picture.
Distilled down like this, it’s not a particularly complicated concept. You have a Site editor where you can create and edit templates. You have a Block editor where you can create content for Pages and Posts. Both editors use blocks. The content created in these different editors then merge together to form the finished look of the website.
Learning Curve
When you’re already familiar with the Block editor used to create Pages or Posts, the basic process of creating a template isn’t all that difficult, in that you are adding blocks within an editor, just like you do for Pages or Posts.
IF you jump from using the Classic editor to working with FSE, the learning curve will be a bit steeper, because you won’t already be familiar with the concept of blocks. So gaining a basic understanding of the Block editor first is recommended.
Where the Site editor can get a bit tricky is in understanding which blocks you need to use and should use.
If you want your website to have a Header section at the top of a page, the template that you use for that page needs to include the blocks for that Header (such as a logo and menu).
If you want the Page to have a Footer area, you need to add the blocks you want for the Footer in the template.
If you want your Page to include a Sidebar, then your template needs to include a Columns block with perhaps a 70/30 split.
But most importantly, if you want your Page content to be displayed, then the template must include a block called “Post Content”. It’s important to note that whether you’re working with a Template for “Page” or for a “Post” this all important block is always called “Post Content”.
Without this block placed in a template you’ll think something is wrong because the Main Content area of your Pages and Posts will be blank.
Though the specific blocks you use matter, the process is still simply a case of adding blocks to an editor.
Once you have all the blocks in place for the template, you then go over to the Block editor to create/edit the Page content that will merge with this template. You need to make sure that the Page you’re creating is assigned to use the specific template that you built in the Site editor.
When you then save (or publish) this Page and view it, you will see the template and Page content merge together for one complete picture.
You can have different templates for different pages. And your Posts have their own template as well. Changing one template doesn’t change other templates. But there is also a feature called “template parts” that work similarly to Reusable blocks, that you can use to unify certain aspects of your different templates. So, you’ve got a big playground to explore!
Summary
The key thing to remember is the Site editor is for building the templates, which are the structure or framework for the website, and they need to include some very specific blocks to work properly. The Block editor for Pages or Posts is where you add the content that will merge with the template to create the finished website.
This is an extremely simplified explanation to give a basic understanding of the concept of FSE. It doesn’t dig into all the many extras and exceptions that may be encountered along the way. It also doesn’t address future changes that we will be seeing as a result of FSE evolving and maturing. But for the time being, this should provide a basic, foundational understanding on the difference between a Template and Page/Post content. Between the Site editor and the Block editor.
The best way to understand these parts is to dig in and play, to see them in action. The real beauty of a WordPress.com account is that you can even set up a separate test site, completely for free and try out these FSE features, without any worry of affecting your live site.
For additional ideas on working with blocks and layouts for your blog posts, check out the Content Design lesson in our Intro to Blogging course.
Have fun!
Let’s take FSE for a spin. Click here to expand a list of instructions and an accompanying video.
Below is a step-by-step exercise to get you playing with FSE. (Don’t let the number of steps worry you, they’re broken down into really small steps!) This 7 minute video also demonstrates every single step below from start to finish:
- Create a new site, choose all the free options, and then Skip to Dashboard in the last step. (Don’t worry if your screen doesn’t match mine exactly, the steps are the same.)
- Go to Appearance > Themes and activate the Russell theme. (Be sure to use their provided Homepage so you have some content to play with.)
- Preview the site so you see what it looks like.
- Go to Pages and click on the Home title so you can see what content is included in the Block editor for this page.
- If the Settings sidebar isn’t visible on the right, click the gear/cog icon in the top right corner. Notice how it says Page at the top.
- Open the List View by clicking the stack of three horizontal lines in the top left corner. Notice the names of the blocks in the List View.
- Click on the image in the editor to see how the blocks on the left expand to show more pieces.
- Change the name Ellen Russell in the text to your own name.
- Click Update in the top right corner.
- Go back to the main dashboard by clicking the logo/image icon in the top left corner and then click View Pages.
- Go to Appearance > Editor.
- Note that you can see the same content that was in the Block editor for the page, but that you can now also see other parts of the site, such as the Header.
- If the Settings sidebar isn’t visible on the right, click the gear/cog icon in the top right corner. Notice how it says Template at the top, instead of Page or Post.
- Open the List View by clicking the stack of three horizontal lines in the top left corner. Notice the names of the blocks in the List View and how they’re different from the Block editor for the Home page content. We’ve got one called Header now.
- Click the 3 dots in the top right corner, and click on Top Toolbar. (This will pin the Toolbar for individual blocks to the top of the Editor so it doesn’t get in your way.)
- Click on the Site Title text in the editor to see how the blocks in the List View expand. (Starting to see some similarities on how this works?)
- Click on the down pointing arrow in the toolbar to see how the Site Title can be moved. You can do the same thing with any blocks that have those arrows. Blocks can be moved up and down, or left and right depending on the layout.
- Replace the text of Site Title with: My FSE Test.
- In the List View click on the arrow to the left of the Header block. Notice how it collapses all the pieces.
- Click on the arrow to the left of the Group block just below the Header block. Do you see the one called “Post Content”? Keep clicking the arrows to expand out the blocks. Then click on the Post Content block again.
- Click the 3 dots option menu for the Post Content block and click Remove block. Notice how all the Home page content disappears! Yikes!
- Click the undo icon in the top left corner. Phew! It’s back. Remember, the Post Content block is the number 1 most important block for any Template. (Unless you want an empty website.)
- Click Save in the top right corner. Notice how it then shows you that you’re saving changes to the Site, a Template and a Template Part. Click Save again.
- Go back to the main dashboard by clicking the logo/image icon in the top left corner and then click on Dashboard.
- Preview the site again. Notice how the changes you made in both the Block editor and the Site editor are displaying together as a complete picture.
How did that feel? You just played around with editing an FSE Template and some Homepage content! Feel free to rinse and repeat in order to explore other blocks and possibilities with your FSE Test site. Don’t worry about breaking it, you can always delete the entire site under Settings > General and start a new one.
One more note about the FSE templates. Sometimes creators are tempted to add their Main Content directly to a template in the Site editor. In some ways it feels logical to do this. However, keep in mind that all of the blocks you include in a template will display on every single page through your website that is using that particular template. So, you could end up with every page in your site looking like your Home page if you do this. The best approach to working with templates is to use them for the framework/structure of the site, include the Post Content block, and then build your “content” within Pages and Posts.
Have fun with FSE!
Additional Resources: