What is a FSE theme – full site editing
What is a FSE full site editing theme?
Because Greenshift is one of the best, if not the best, FSE theme that we have experienced, an explanation about Full Site Editing where we regularly refer to the Greenshift FSE theme. However, this is almost identical in terms of the options discussed, for example, the Twenty-Twenty-Four theme. The explanation contains both the differences between a classic block theme and an explanation of how to use a FSE theme.
The difference between a classic theme and a FSE theme (Full Site Editing theme)
Templates
A classic theme contains a more or less pre-programmed number of ways to show the pages and posts to the visitor. The way this is determined is called a ‘template’. There is a template for a page, a post, an archive page, etc. Adjusting them to your wishes requires quite a lot of technical knowledge. That is also one of the reasons that many websites are very similar in terms of page layout. It is not for nothing that an FSE theme is called: it stands for ‘Full Site Editing’: you can edit the entire site through blocks, as if they are pages. A FSE theme also has templates. However, these are straightforward to adjust and even create yourself.
Difference classic and FSE theme
Difference classic and FSE theme
The technical difference is that a template of a classic (block) theme is written in a special programming language, namely PHP. A template of a FSE theme is much simpler: HTML. Every page that you find interesting in terms of design, can be viewed on WordPress in HTML code. With copy and paste, you can put that code in a FSE template, and you have adjusted the template!
The original template is kept
A FSE theme always stores the original template; The changes that you make are stored in the WordPress database. As a result, in an emergency you can always go back to the original version of a template.
The original template is kept
A FSE theme always stores the original template; The changes that you make are stored in the WordPress database. As a result, in an emergency you can always go back to the original version of a template.
Speed and no crashes
Because a classic theme contains much more ‘pre-programmed’ templates and other PHP files, and must consider all kinds of applications, a FSE theme is much lighter and generally considerably faster. Faster for the web builder, but also for the visitor. Greenshift FSE also has the advantage that it is not only an FSE theme, but that each part is only loaded when it is actually necessary. The basic theme that is loaded is only 2 KB; That is unimaginably light. As a designer/web builder, this means that storing a page does not take several seconds or even half a minute, but a maximum of one second. A classic theme has a very annoying feature that every user has experienced; You keep a page, and in another browser window you refresh the content to view the changed page. If you change this a little too quickly, often it crashes … you have to close the browser windows and reopen everything to continue. If you are unlucky, even the latest changes are gone. This has not happened to me, since I started using the Greenshift FSE theme.
Your customizer has disappeared
Yes, it’s true. A FSE theme no longer has a customizer, as you might be used to. That has a reason. The customizer of the classic theme mainly shows pre-programmed choices, which you can activate, or not. A FSE theme offers you many more options, so that does not apply. The stylebook (or stylebook) is the replacement for this. At Greenshift you reach the stylebook by opening the homepage in the processing mode, and clicking on ‘styles’ (the icon looks like the Yin/Yang sign) and then on the eye icon (stylebook). In the stylebook you see all the current settings, and you can adjust them directly at Settings. The tabs at the top depend on the installed plug-ins: if you only use the Greenshift theme, you will see fewer tabs than if you have also installed the Greenshift plug-ins. Keep in mind that every change relates to the entire website.
In addition, see the customizer of classic themes. This has become completely superfluous in an FSE theme.
All page options and widgets are gone?
A FSE theme doesn’t have those any more. At least, not in that form. A solid FSE theme has a variation of some templates. Greenshift, for example, has a page template and a page template without a title. If you want the title to deviate from the other pages, you can use it. In addition, it is straightforward to make an extra unique variation in an FSE theme. The widgets have completely disappeared. That is justified; I nearly don’t use them since 2016. They are awkward, combining widgets in one column is sometimes difficult and if you adjust one, it often influences multiple pages. Almost every website designer/builder uses columns today, and you can literally use everything there.
The options of a classic theme page are completely unnecessary in an FSE (full site editing) theme. FSE not only offers these options, but an infinite number of options. And you can make as many templates, or variations on it, if you like.
FSE is developing and you will notice
The user interface of the WordPress FSE themes is not bad, but the structure can certainly use improvement. You notice that if you are setting the theme. You change several settings to the Stylebook, others elsewhere.
Headings
Although the changes in the types of headings (H1, H2, etc.) are immediately visible in the stylebook, you cannot adjust everything there yet. You do that at Admin, display, Theme Options, Stylebook.
Colors (global)
A FSE theme uses global colours. That has two advantages. When choosing a colour, you can click the right colour without looking up. If you decide to adjust the style of the site, you do that with the stylebook and wherever you used that specific global colour, the colour is adjusted. We will be talking about priorities later.
Basic colours and night mode
Keep in mind that a FSE theme, such as Greenshift FSE, has two important types of colours: basic colour content and contrast colour content. The first is the text and the second the background. Those are reversed in Night modus!
Fonts
All Google Fonts are generally available in every block. However, you can also decide to upload a Local Font, for example because you do business in Germany with an extreme privacy legislation or to speed up your website load. You can upload at Admin, display, Theme Options, Global Settings. You set up at Admin, display, Theme Options.
Breakpoints
You can set the transition from one device to another, the breakpoints, yourself. You do that at Admin, display, Theme Options, Global Settings.
More settings
With some FSE themes, such as Greenshift, there are more settings. Such as the elimination of column Padding in the Row Block, the standard values such as PX, and even more. You do that at Admin, display, Theme Options, Global Settings.
Headings
Although the changes in the types of headings (H1, H2, etc.) are immediately visible in the stylebook, you cannot adjust everything there yet. You do that at Admin, display, Theme Options, Stylebook.
Colors (global)
A FSE theme uses global colours. That has two advantages. When choosing a colour, you can click the right colour without looking up. If you decide to adjust the style of the site, you do that with the stylebook and wherever you used that specific global colour, the colour is adjusted. We will be talking about priorities later.
Basic colours and night mode
Keep in mind that a FSE theme, such as Greenshift FSE, has two important types of colours: basic colour content and contrast colour content. The first is the text and the second the background. Those are reversed in Night modus!
Fonts
All Google Fonts are generally available in every block. However, you can also decide to upload a Local Font, for example because you do business in Germany with an extreme privacy legislation or to speed up your website load. You can upload at Admin, display, Theme Options, Global Settings. You set up at Admin, display, Theme Options.
Breakpoints
You can set the transition from one device to another, the breakpoints, yourself. You do that at Admin, display, Theme Options, Global Settings.
More settings
With some FSE themes, such as Greenshift, there are more settings. Such as the elimination of column Padding in the Row Block, the standard values such as PX, and even more. You do that at Admin, display, Theme Options, Global Settings.
Priorities
A good theme has a priority schedule. That sounds complicated, but it is not, and it is important to know what setting has priority over another. With editing the site you have the styling icon at the top right. If you click on that, you will see an overview of typography, colours, shadows, and layout. For example, if you click on colours and then palette, you will see all the set colours. If you hover above a colour, you will see a pop-up with the use of that colour. You can adjust every colour here.
Most FSE themes have setting for the Elements.
Elements are text, headings, buttons, links, captions. You can set a colour per element.
Also in the block editor are the settings for each block.
The colour you set for each block has priority over the colour of the elements. If no setting is found at a block, the system will look at which colour is set for the element and uses it.
With Typography, this works the same way.
You can set typography for every element. And you can set typography for every block; these have priority over the element settings.
Lay-out.
Also, important: with layout you set the width of the content and the entire width, as well as the padding of the layout page and the block distance (for example between blocks of a query).
Most FSE themes have setting for the Elements.
Elements are text, headings, buttons, links, captions. You can set a colour per element.
Also in the block editor are the settings for each block.
The colour you set for each block has priority over the colour of the elements. If no setting is found at a block, the system will look at which colour is set for the element and uses it.
With Typography, this works the same way.
You can set typography for every element. And you can set typography for every block; these have priority over the element settings.
Lay-out.
Also, important: with layout you set the width of the content and the entire width, as well as the padding of the layout page and the block distance (for example between blocks of a query).
Header, content, and footer work slightly differently
In principle, each page or post is based on a template, which consists of a header (with the logo and navigation menu), the content (the part with all the information on the webpage) and the footer (the part on which you often put some business details and copyright and the like). This applies to both a classic and a FSE theme. The workflow, however, is entirely different.
Reusable templates
The Greenshift theme has a function called ‘Reusable Templates’. This is mainly used to make headers and footers. So you can, according to your idea and taste, make a header with your colours, logo, the type of menu to your liking, such as a normal or a megamenu, socials or whatever you want. The same with the footer. You can then link it to one or more templates, but also one specific page where you want to apply another header. This is also possible in themes such as Divi and Kadence, but more difficult, and typically, you need the most expensive version of the theme to make this possible. In Divi, for example, this is easy to realize, but Divi is really literally full of bugs and problems, and is painfully slow, both for the builder and the visitor. With Greenshift FSE and other FSE themes, this is simply standard.
How do you change a header or footer in a FSE theme?
You can do that in several ways. I assume you already have a page, with a header and footer.
- Go to any page.
- Click on ‘Edit site’. This opens the total structure of the template of the current page, with the header, the content part (where you place the information) and the footer.
- You activate the element that you want to edit; there is a purple edge around it.
- At the top, you click on ‘Edit Original’.
Header
- The header now opens in editing mode.
- If you open the list view at the top left, you will see the build -up of the header. In principle, there is always a group at the top.
- When you open it, you see a row with a site logo block, sometimes a heading block (for the name of your site) and a navigation block.
- You can also open the navigation menu, after which you will see all the parts that the navigation menu consists of.
Each part can be adjusted as desired; colour, font, width or height, margin and padding. Once you have saved this after adjusting, the changes are made on all pages where you have applied this header.
Sticky header
- Make the group active.
- Click on Advanced in the right column.
- Choose ‘Sticky to Head on Scroll’. You can also pick a sticky colour: then the header gets a different background colour, as soon as it is sticky.
- You can also set a transparent header.
Content
This is the middle part of the template. This is for the text and images you place for the visitor, on every created page. One block is mandatory there: the ‘content’ block. Keep in mind that you are free to place any other block in the content part, but they will behave as a static block; Everything in the content block is dynamic in the sense that it adapts to the texts and illustrations that you will place on a page. If it is the intention that each page contains a logo or a fixed text, it’s best to place it on the template.
Footer
In the footer you can adjust everything as desired; colours, font, margin, and padding. These changes are also implemented on all pages where you have applied the footer.
Note: I think it is a beauty error from WordPress FSE themes, but the header is sometimes asked if you want to edit the original, not with the Footer. In both cases, you edit the original!
Creating a new page template
You can easily make a completely ‘fresh’ template.
Open an existing page, and click Edit. In the right column, you click on the name of the template behind the word “template”. In the pop-up now opening, you can edit the template, change template or make a new template.
- If you choose to make a new template, choose a name and click Make.
- You get an entirely new, blank template.
- Select a header *, a footer *, place on the template what you want and save. Thereafter, you still have to select the new template on that page through ‘template’.
* You can select the same header and footer or create/choose another header and footer. Those will only be visible on pages with this (new) template.
- You can make all types of templates by clicking in the admin menu on display, editor and then templates.
- At the top right, click Create New Template.
- You will then see an extensive choice of the type of template that you are going to make; page, archive, index or product, etc.
Importing Greenshift Templates
If you have purchased and installed the correct plug-ins from Greenshift, you can install extra templates at the top right at the Greenshift Helpers’ icon, for example for WooCommerce.
Disadvantages of FSE-Templates
When using FSE templates, I sometimes encountered something that I experienced as a disadvantage.
- You cannot place short code in the header. Not that this is now a big loss, but precisely because some plug-ins are not yet ready, such as Google Translate, placing a short code would be a solution. That is not yet possible; WordPress does not allow it yet.
- WooCommerce, while owned by WordPress …, is not yet 100% ready for FSE Blocks. For example, the check-out is still old-fashioned classic style, with a short code, while this would be straightforward with blocks. Even Divi has had that for years.
- There are more plug-ins that are still afraid of making the switch. It is getting less and less, but they are still there. Fortunately, so many plug-ins are already ready that there is an alternative to find an alternative for the lagging plug-ins.
- The menu still has limitations. Many translate plug-ins have the option to put the language options in the menu, and that is not yet possible. Many Membership Plug-ins also have an option to automatically include logging in and out in the menu. That works with some plug-ins and not yet with others; often you have to create it manually. For example, the WPASE plug-in is busy adding this for FSE themes.
- The Big Boys in the world of themes, such as Kadence and GeneratePress, are still behind with FSE. These are actually already hybrid themes (a mix of a classic and block theme) and it is precisely because of that, they now suffer from ‘the law of the inhibiting lead’. However, we know from Kadence that they are already working to release a Kadence FSE theme, so that is promising.
- Conclusion; although there are some disadvantages, the advantages are so outstanding, that I decided some time ago to make use of a FSE theme wherever possible.
Styles
