Switching to Full Site Editing – How it works

Hi, this is Sandra from Greyd. This video is for all of you who have been working with the Customizer or who haven’t had any experience yet with the site editor and now want to make the switch to full-site-editing. I’m going to show you where all the areas like Customizer, menus, templates have been moved to and in general, what’s different with full site editing.

As an example, I’m going to work with the former Greyd.Suite, as we already had extended the Customizer and all the other areas by a lot of options, more or less having the entire functionality of full site editing already in the Greyd.Suite, but just at a different place.

So let’s start with a quick overview in the full site editing theme. The biggest difference or what’s new is the site editor. Here in the site editor, you can do a lot of things. In theory, you don’t even have to leave the site editor as you can also take care of your content for your pages here, but you can also define the global styles for your websites like colors, fonts, etc. with the core global styles and the Greyd global styles. More on that later.

You can also edit your templates, for example the homepage, 404 page, single templates, post templates, etc. here in the site editor and also so-called template parts, which is mainly the header and footer that can be found here in the library, as well as patterns which are little templates or reusable sections for your website.

So what you won’t find anymore is the Customizer which had been here under appearance. Also you won’t find the menu settings here anymore, because all that happens now in the site editor. And also if you take a look at the templates where formerly you not only found the Greyd.Suite Dynamic Templates but also the templates for navigation, post and archive. Here in the new Greyd.Suite with full site editing, you will only have the Dynamic Templates as all the other templates as we’ve just seen can now be found in the site editor.

So what I’m going to do now is open the Customizer and go through all the options that have been there and show you where you can now find them in the site editor. So, under basics we started with the website title and logo. Both can be dealt with in the template part, for example header or footer. Let’s just open the header and you will now find several blocks that you can use here. For example, one is the site logo. So if you change the logo here in that block, it will change on the entire website. Same goes for the site title, which you can insert and edit here. And again, it will change on the entire website and not just in this template. Other than that, you can also change the site title as usual in the WordPress settings.

Next in the basic Customizer settings were the fonts and colors. Both can now be found in the global styles. I’ve just shown you how you can access them in the site editor menu, but whenever you are somewhere in the site editor, you can also just use these icons here and for example you have the global styles and colors. And here you can set up to 24 different global colors for your website. And for the fonts we have to move to the Greyd global styles.

Why are there two global styles at all? In our opinion the core global styles are not sufficient yet, so there are lots of options we wanted to add for you. However, at the moment it is not yet possible to add them directly here in the core global styles. So what we did is, we just added the Greyd styles and at the moment you just have to switch between these two. Hopefully in the future we will be able to merge that all together.

So now back to fonts in the Greyd global styles. You can define the font families, up to three different as before, again custom fonts, Google fonts, Websafe fonts, as it was before. And here in the basic settings there are some general settings that you don’t need anymore. That’s that. So let’s move on.

Next was navigation with a lot of options regarding the header, off menu, drop down menus, etc. You can do all that out of the box now directly from the template parts in your site editor. We’ve already had a look at the header with the website logo and site title. With full site editing, you can now build individual headers. And you can also build more than one header template. For example, if you want to have different headers or footers on different subpages. Also if you want to have a second header and place two header templates below each other, all that’s possible here out of the box.

And then you have a lot of interesting blocks that basically build all these options that you know from here. So one of the most important blocks is the navigation block where you can have all the menu settings. So in the navigation block, you can have, for example, just a page list. You can add individual links, individual page links, site titles, sub menus. You can also work with any social icons, for example, so you have lots of different options. And what’s also very important is this little block here. It’s called the Greyd popover block, which can be used for different use cases for burger menus and off canvas, but also for dropdowns and inline popups. So lots of different possibilities here, which is also why we have both dedicated tutorial videos on headers and footers in general, but also on the popover block where we will discuss in much more detail all these options here.

In the Customizer we had the elements with the global settings for headlines, buttons, links, etc. This is what is now also placed in the global styles and the Greyd styles. So if you go to the Greyd styles, for example, as you’ve noted before, you can now define your three different button styles or also input fields. And you will also find some global settings here in the global styles, like for example, define how texts and headings should look like.

You may wonder why there are some options that you can find both here and in the global styles, for example, buttons and links. As I mentioned before, it’s not possible unfortunately yet to add our options directly here, but we are missing some options. For example, there are no hover states for buttons, which in our opinion is really important. So we just added the Greyd styles and have the buttons here. So, my recommendation is whenever you find a setting here in the Greyd styles, do it here. And only if there is no setting available, for example for texts and headlines, then do it here in the core global styles.

Also there’s the possibility to define each and every block globally here, but that’s also something we don’t recommend. For once as it overrides your global Greyd styles, for example for buttons, but also as these settings here are only applicable to one dedicated block. So for example if you change buttons, this will not apply to Greyd buttons, nor to forms buttons, etc. So again, my recommendation, whenever there is a setting in the Greyd styles, use these. And if you need to, you can work with the global styles here, but I wouldn’t recommend working with those global styles here.

So much for the elements. Now let’s move on to the extended settings. We don’t need features and widgets anymore, but global CSS is something that can also be found in the site editor here, additional CSS. And then we had the grid. This is very interesting as the whole grid system works a little bit different in full site editing than as you’ve known before. So instead of row sizes, S, M, L and XL, we now have content width, wide width, and full width. All these options can be found in the core global styles under layout. You have the content width and wide width that can be defined here. Content width is comparable to the former row M and it’s the default. And wide width is comparable to the former row L. And in the blocks you can then select which one you’d like to have and you can also select full width, which is the former XL.

Also the system of how spacings, paddings, margins etc. work is a little bit different than before. In most blocks you can select it individually but you will also find these five presets to choose from. And these five presets, in Greyd.Suite you can define them individually in the Greyd styles under spacing. You have the five presets and can define them completely individually. This may be a little bit overwhelming at the beginning, but it enables you to create a really, really responsive page layout automatically. And it also makes content editing much easier for the content editor, as he or she doesn’t have to worry about all these detailed settings, but just has to select one of these presets.

Where did we have it, for example, let me just have one here again. The content editor just has to select one of these options, but as I just said, it is a little bit difficult to understand. So that’s why we also have a dedicated tutorial video on that. And similar to our classic version, you also still have the opportunity here under grid in the Greyd styles to adjust the breakpoints that are used for all the responsive settings in our blocks. So you can do that here. And also further down, we just talked about content and wide size in full site editing. If you want to go even deeper here and not just go with the core options where you can just use like pixels, rem, etc. If you want to use, for example, a little bit more sophisticated way of entering this value you can also overwrite the content and wide size here.

For more videos and information please visit our Helpcenter.