FSE workflow with Greenshift theme that will improve site – 3 simple steps

The FSE workflow, which is based on block themes, is gaining popularity. However, some users still face issues because they try to use the Classic workflow in FSE.

You must forget everything you know about using the Classic theme and start with a clean mind.

In this tutorial, we try to show you practical workflows for the Greenshift FSE theme that we use on our sites. We will update this page regularly to include all new features and updates as the workflow evolves and improves.

Installation of FSE theme

For this workflow, we will use the free Greenshift theme and Greenshift plugin.

After installing, you can access the Theme settings page to easily set basic configurations. This eliminates the need to visit the Site editor, saving you time.

Brand settings

The first thing that differentiates one brand from another is color. You will use global colors on the whole site and local colors you may need from time to time. The theme has several global colors, but you need to change only 6 (all others are used in different system elements, like input borders and light backgrounds, and they are not required to change).

Primary color is the main accent color used for highlighting elements such as buttons, borders, and texts. Practically, you may keep all other colors as is and change only the Primary color

The secondary color is used as a companion color in places where we need more variations. For instance, in the category of links, this color is usually used only on small elements or in a group of elements where the primary color is placed near the secondary color. Make sure that the secondary color fits well with the primary color.

Text on primary – it must match both secondary and primary colors. Think about this color as text on the button with a primary color

Secondary Button and Text – there are some situations when you need a button that is different from the main button. For example, when you have a main CTA button on site, and you need to have another button but do not want to pay big attention to it from users. Here is where you can use the secondary button.

You can see such a button even on this site in the header. Usually, I keep this color as default. Again, changing this color is not required, in many scenarios, you will not use secondary buttons on site.

Site title, Description, Logo, Icon

You can fill these fields in Settings—general, but to save you time, we centralized them all in the Brand settings option.

For the logo, I recommend using SVG format (you will also need to install plugins like Safe SVG to allow WP to upload SVG files). If you can’t use SVG, then use WebP format. For icons, it’s better to use PNG format.

Site title will be used in the SEO settings of the site so make sure that it has good keywords which you want to promote in search engines.

Homepage FSE template

From my point of view, the only two things on the site that you MUST change are its brand settings and Homepage. All other things are optional because they have dynamic data or already have preinstalled configurations.

You can change the Homepage in two basic ways: in the Site editor or by setting it as a page.

It’s even simpler in the Greenshift theme because you can click to create a page and automatically select it as your homepage.

While you can edit the homepage in the Site editor, I recommend using a custom page. It has many benefits:

1. You can create several pages and put them on the Homepage at any time.
2. You can make split A/B testing.
3. Pages load faster in the editor, and WP doesn’t load the whole Site editor when you edit a page.
4. You can still edit such pages from the Site editor (which also shows the header and footer) or from the Page editing interface (which shows only the content area).
5. You can import ready Homepage templates more easily.

How to set a Clean Canvas or remove titles for pages

I see this kind of bug again and again. Users try to overwrite Page template when they want to build homepage or landing page with full width and without title. Don’t do this.

Greenshift theme already has these templates. Simply click on template and Swap template, you will see Blank Template and “Page without title” templates

Header and Footer in FSE templates

When You edit the Homepage (or any template) in the Site editor, you can also change the Header and footer. I recommend you edit them from Template editing instead of editing the Template part. This is because when you edit from Templates, you can see how it looks exactly on site. When you edit from the Template part, you can see only the header or only the footer, and you can’t know how it’s matched with other parts.

In the GS theme, you can select one of the predefined headers/footers that you can customize further. Also, you can use more advanced templates from the library.

Setup Menu in FSE themes

The menu is a complex topic that deserves to have a separate tutorial. Here I just show basic things which you need to know

1. To edit the menu, you must edit the header part via one of the available methods described above
2. You can edit the menu directly by clicking the Plus icon in the editor but a more user-friendly way is to use the Sidebar Inspector
3. You can add different items in the menu, not only links but also Social share, buttons, carts, etc
4. Each menu item in the GS theme has additional GS settings where you can control padding, width, etc These options are unique to the GS theme and they are not available if you change the theme
5. You can drag and drop menu items
6. If you want to add the mega menu, add the item “SubMenu item” and select one of the mega menu type
7. The mobile menu is generated automatically based on the desktop menu, but you can add also specific templates to the mobile section

How to add images and icons to the menu

You can do this by clicking on the toolbar in the menu item and selecting Show Inline Image.

You can add some options for this image inside the Extended Greenshift options of the menu

How to style the menu

The navigation block in FSE has two tabs related to design, and they are on the next screenshot

How to enable sticky header

There are some options in the Header template part; one such option is a Sticky header. Check the tutorial on how to enable a sticky header in the FSE Greenshift theme

Template library for FSE

The theme has many ready patterns for templates, but if you use our Query and Woocommerce addon, you have access to the wider library. In each section of settings, you will find the Template Button. Simply select the template that you like and click on import. The plugin will take care of the proper replacement of content and adding a header/footer

How to create a separate Blog page

This part is very common where users have a misunderstanding of FSE. I think it’s because wrong names in WordPress for many templates. A long time ago, WordPress was a blog platform, and many names are still from those days.

Also, the settings—reading option, where you select a custom page for your posts, simply doesn’t work as it should and creates much confusion.

To prevent this, in the Greenshift FSE theme you have a special area “Extra pages” where you can create additional pages, including a Separate Blog page

This option will create page with title Blog and link “blog”, on this page theme will add Query loop block with latest posts of your site. If you want to edit this page further, find it in Pages – All pages and edit. It’s real page and you have full access to content, you can use other pattern for Query loop block (theme has many of them).

After page creation, you can easily change the pattern, click on the query loop block, and select “Replace”

Extra pages: Price page, Contacts, Team, Wishlist, Comparison

The FSE theme also has many other ready page templates, which you can enable in one click on the “Extra pages” section. You can edit them further and replace by own data

Single, Archive pages for Posts

The theme also has several ready templates for single Posts and Product templates. Unlike Homepage templates, such templates are 100% dynamic, data on these templates will be replaced by dynamic data on site, so, you don’t need to edit them. At the same time, you can do this and extend such templates with your own design, blocks, etc

Single/Archive for Products

If you use Woocommerce, the Greenshift FSE theme will install several ready-improved templates for all basic Woocommerce pages. If you use our Woocommerce addon, you will get access to Improved templates with GS Woo blocks that have many more design and functional options

You can also import many ready Single product templates from the Library

Index FSE Template. Why do you need this?

If you open the Site editor, you will see that it also has an Index template. Why do you need this? Is it a Home template?

No, the Index template is used as a fallback. There are situations when WordPress can’t find which template to use for the specific archive of something. In this situation, the Index template will be used. Mostly, you don’t need to change it.

Typography and Global Elements

Technically, when you finish brand settings, menus, and templates, your site can be published. But it is highly likely that you have custom fonts in your designs and custom sizes for headings and buttons, so you need to set them up.

You can do this in the Site Editor (FSE), but in GS theme we provide a better workflow and you can use also Stylebook

If you want to load custom fonts, do this in Greenshift – settings. We strongly recommend you use variable fonts; in this scenario, you need only one file for all font variations. If you use Google Fonts, you can enable the Variable filter to show only fonts with the available variable font files. We do not recommend using more than 1 custom font. Maximum 2

When you have local fonts, you can select them in Stylebook for global elements. If you want to use a custom font for all text on the whole site, select the custom font for the Body element. If you do this, all items, including headings and buttons, will have this font, and you don’t need to select it inside all separate elements.

If you want to change the size of headings or add custom spacing, simply click on an element in Stylebook and add your settings in the dropdown.

You can also create presets for elements (and all global settings) and change them via one click.

Using headings everywhere when you need custom sizes is a good idea, but you need to keep in mind that you must have semantic code for SEO. You can’t use an H5 heading without H2, H3, and H4, and you can’t use two H1 on a page. So, for custom pages, you will likely need custom design presets. This is where you may need variables AND/OR classes.

Global Classes, custom Variables. Do you need them?

Before you start making custom templates and implementing custom designs on your site, you need to answer the question of whether you will use Local attributes everywhere, global attributes, or both. When you use local attributes, all your design settings are added inside block options independently from other blocks. If you use Global styles, they are added to a global class or global variable, and then you can attach them to blocks and reuse them across different pages.

There are many pros and cons for each scenario, but please understand important things. You should not use a specific option just because someone on YouTube told you that you must do this. Yes, variables and utility classes are cool, but they can be redundant in some scenarios, for example, if you have 1-2 custom pages and don’t plan to make others. So, I give you a few advice on when you should use Classes and Variables and make them before you start to work on templates.

Variables

You may need to make custom global variables if you want

1. Make your own presets for size and space. You can import/export these presets from site to site and easily increase/reduce them on-site.
2. You find that you use specific values for different options very often, and you want to change them on the whole site. For example, you use 18px as the main size for your icons across many pages, but one day, you decide to make them a bit bigger. If you use a variable instead of a static value, you can change it on the whole site without editing each block.
3. You plan to use fluid and variable options widely (clamp, min, max, etc). It’s more practical to create variables and attach their custom CSS values then set them in the block

By default, WordPress core blocks and Theme blocks already use variables under the hood, so in most of scenarios, inner variables are enough.

You can select core variable presets in the following panels.

Typography panel

In the Size option, click on the settings icon to open font size presets of the theme

Spacing panel

In the spacing panel, click on the Preset button

Color panel

Global colors from the Brand panel also use variables, you can find them when you select the color

Class first system and utility classes

Variables allow you to set custom reusable values; classes allow you to combine them in reusable design components.

The class first workflow is when you build the whole design around classes with the attached design. For example, you use design for boxes when you have 2rem padding, a grey background, and light shadows. And you do this very often across the site. You can create a global class for this and attach the design to the class. When you need it next time, simply select this class. You can also change this design, and it will be changed on the whole site where you used this class.

There are also design systems like Tailwind that have classes for all possible use scenarios. But from my point of you, making complex designs via such utility class frameworks has no big benefits because instead of many attributes, you will have many classes.

More practical, it will be to make common variables and then combine them into classes for common parts.

As an example, related to the previous Box with 2rem padding, grey background, and light shadows, it’s more practical to have variables for padding, grey color, and shadow. Then, you can attach them to the class. In this way, if you want to change only color across the whole site, you change only a variable and not a class. If you want to change everything in the design of the box, then you can change it in class.

When do you need global classes?

1. You have common parts with similar designs across the whole site and you want to control it from one place
2. You can combine several variables or values in a group and reuse them in your design
3. You want to build complex designs with pseudoselectors (:before, :after, sub classes etc)
4. You want to have a design preset for component with inner elements. So, you can make class for parent element and add styles to subselectors of class
5. You build your own design system with components that you plan to reuse on other sites

CSS frameworks

If you know that you can’t leave without variables and classes, you may want to have an improved Management Ecosystem for them. Here is when you need to study CSS framework tools. One such tool is the free Core Framework. It has good integration with Greenshift, check more tutorials on how to enable it

Element block

From the 8 version of Greenshift, there is a special Element block that works a bit differently from other blocks.

This block has no attributes and predefined styles or WordPress wrappers. It’s like a clean HTML tag for building perfect, clean sites. Technically, you can build a whole site with just one block that can replace all others. I recommend you to study this block