Must watch

Hi, this is Sandra from GREYD and today I’d like to give you an overview of the block and site editor in WordPress, show you some tips and tricks on how to quickly get to grips with full site editing and above all draw your attention to some special features in GREYD.SUITE. One thing in advance, currently more and more features are being brought into the site editor. Theoretically you could build your entire website there, but since there are still some details missing and for example you can only edit pages there, but no posts, I will still also show you the traditional way using the menu here on the left. So let’s just jump into it and open any sample page. You will directly see that the block editor works like a frontend editor, so the backend looks more or less like your page will look like in the frontend. You can directly edit content here, for example enter texts or also make elements bigger or smaller. And you will have a preview for three different screen sizes. The block editor also offers you different views, which you can change here at the top. By default you will most likely be in the full screen mode, where you won’t see the navigation bar on the left and top. You can always activate and deactivate that here. The spotlight mode highlights the block you are currently editing, which makes it really easy to navigate on your page. The top toolbar moves this toolbar, that’s usually pinned to your blocks, to the top. And there’s also a distraction free mode which is very handy when you just want to manage your content.

Up here you can also always switch between the visual editor and the code editor and you can also activate and deactivate your post and page settings with this icon here. So here on the right you will then always be able to switch between the page or post you’re currently working on and the block settings. The page settings include for example the URL, also the template that’s being used or the comments function. And the block settings always offer some general settings for each block and some design settings. GREYD.SUITE now comes with two very handy additional options, that you can find up here in the GREYD Editor Helper. Depending on where you are, you will find different options now for pages, for example you will see the Hover Helper that is here to make it even easier to navigate on your page. To show you how it works, I’m going to a page with a little more content. I’ve already activated both options here and as you can see the Hover Helper highlights blocks that are nested into each other, it makes spacings visible and it’s just there to make it even easier to navigate on your page. And for forms, Dynamic Templates, etc. there are additional options. One thing here, this is something that sometimes still happens with the block editor. It doesn’t have any implications on the frontend, but still you need to click away all these error messages individually. So we added a feature here in the Editor Helper to restore all blocks on a page or form automatically. But what I wanted to show you now is the customize preview option, available in forms, templates, etc. Those elements usually are not displayed on the full page width and also they might be on a colored background that you can’t see in the preview. So what we offer here is, you can add a background to your preview page and you can also adjust the width to see your form exactly as it will later look like on your page. This has no implications at all on the frontend, it’s just here to make life easier for you.

So how can you now add blocks to your page? Well, there are different possibilities. For example just hover and use the plus and then search for the right block. Often, for example at the end of the page, you will also find a plus like that. You can also just hit enter and with slash start to search for the right block. Or just click on the plus here. Here you will find all available blocks by categories, for example here you have all GREYD blocks. With this plus you can also insert patterns, which are different types of templates. We’ll have a look at that later. And you will also be able to insert media, for example the images of your own library, but also from the WordPress open verse. And you can also just drag and drop the elements to insert them.

So, how can you now find your way around in the editor, which can be a little bit tricky, especially at the beginning. There are again different possibilities. For once, when you click in a block, you will not only find the settings for this certain block, but also here on the left you have the possibility to jump to the parent element, for example this paragraph lies in a quote, which lies in a column, etc. Very handy in my opinion is also this breadcrumb navigation down here, which enables you to quickly jump to the right element. If you don’t see the breadcrumb navigation here, have a look at the settings here on the right, where you can not only activate and deactivate the breadcrumb navigation, but also for example different views and features. And you could for example also hide certain blocks that you don’t want to use and features like that. Here, by the way you will also find a very handy feature to copy all blocks of this website or this page to use it for example on another page.

Okay, now back to page editing. A very, very handy feature is also the list view, which you will find here. Here you will find all blocks on your website and can also see which elements are nested into each other. If you have a lot of blocks nested into each other, we have added a very handy feature with which you can make this list view larger. Here you can also just drag and drop elements, you could also delete them, copy or group elements, you can lock blocks so that other editors won’t be able to move or delete them. So, a lot of very handy features here. Also, special blocks, for example reusable patterns are marked as such and also you will see your HTML anchors, that you can insert for any block or group in the advanced settings here. And you can also use them not just for anchor links, but also to make it easier to navigate on your page. The list view also offers you a very handy outline, for example with word and character counts, time to read and for SEO also very important the H-tag structure of your website.

So now let’s have a look at the individual block settings. We’ve already talked about this toolbar here, which generally offers you some block settings, but you can also use that to drag and drop elements, you could also use the arrows to move elements up or down. Here on the left you will also see which type of block you’re currently editing and can transform to other types of blocks. Then we have the width, which you can select. Which content width you’d like to use, the standard, wide width or full width. You can set the default settings for that in the site editor. And here under the three dots you will find some standard options like copy blocks, add blocks before or after that, again the lock function, etc. And you can also always mark several blocks and group them or also turn it into stack or row. These are just three different layout features with which you can group several blocks to edit them at once.

So now let’s have a look at some general settings and activate the block settings here on the right. When it comes to spacings for example, you will very often see these presets here. These are very handy. You can set the default values for these presets in the site editor, but of course instead of going with these presets you can always click here to enter custom values. To enter values you can just type in any number or there’s also a small slider hidden here and with shift you can also jump in steps of tens. Most often you can select between different entities here and when it comes to sizes with four different sides, for example paddings, margins or something like that, you can also click here to unlink the sides and enter individual values for each side.

So now one information on a special feature added by GREYD. When it comes to sizes and margins and spacings, you will often find the possibility with GREYD to edit the values for different screen sizes and make your website responsive very easily. For example here you can just enter a number for all breakpoints or you could have individual values for individual screen sizes. Additionally to that we have added a lot of features like Dynamic Tags, animations, the trigger picker which you will be able to find in a lot of blocks since we have integrated them into the native features of the block editor. Other than that we stick as much as possible to the core, which makes it possible for you to combine GREYD.SUITE with other block-based tools or also to use the GREYD.SUITE features in a non-GREYD.SUITE block theme for example. So, there are just very few situations where we create custom blocks, for example if there just is no native block or if the native blocks can’t be extended meaningfully. That’s why you will find for example individual GREYD.Buttons or list blocks.

We’ve pretty much done the same in the site editor, which is where you define the global styles for your website as well as templates and template parts. Templates define how for example the front page or regular pages look like, but also for example the 404 page, archive pages, the single template defines how post pages look like, etc. Template parts are as the name already indicates parts of these templates, so mainly the header and footer. In GREYD.SUITE you will now not only find the regular global styles to define for example typography and colors globally for your entire website, but you will also find the GREYD styles with a lot of additional options, for example to create different button variants globally for your entire website, also to define globally how input fields should look like, etc. And here under spacing you will also be able to define the presets that we just talked about, that are used in many blocks for spaces, margins, paddings, etc. individually and completely flexible. Other than that in the native global styles under layout, you can also define the content width default values. We’ve also talked about that earlier. Here you can define the content width, which is the default, and also the wide width. Up here under style book you will also get a preview of all your blocks with your global styles.

Finally a word on the difference on patterns, synced patterns and GREYD.SUITE Dynamic Templates, which are three different features that kind of seem similar, but do have significant differences. Whenever there’s a block or a group of blocks that you want to make reusable, you can turn that into a pattern and have the option to sync that pattern or not. Patterns that are not synced are completely static, for example you will also find that kind of patterns in most themes from the theme author. You can insert them as often as you like, edit them, change the content, etc. but the pattern itself will always stay the same, that one is not changeable. Different to that a synced pattern that when you click this option here, syncs the content. So when I have a synced pattern and I change for example this, then this will have an impact everywhere where the pattern is used. So the content is always the same. In that sense, these kind of synced patterns are also completely static. And this is where GREYD.SUITE’s Dynamic Templates come into place, because these templates are fully dynamic. You can use the same template with different content at different places of your website and even across installations, across websites, as design and content are completely separated. And the same template can even look different, but will still be the same basic template. There’s a dedicated tutorial on that. I won’t go much into the details now, I just want to highlight the difference to WordPress patterns, because here in Dynamic Templates I can define each and every element and say, do I want this to be static, should the text here always say “dynamic template” or do I want it to be dynamic and have the content editor change the headline whenever the template is used. So much on that difference.

In the GREYD.SUITE menu on the left under “templates” you will not only be able to access your GREYD.SUITE Dynamic Templates, but you will also find the link here to get to the WordPress default templates, like blog template, template parts, headers, footers and also patterns from here.

For more videos and information please visit our Helpcenter.

Hello I’m Jakob from Greyd and today I’m going to talk to you about responsive web design. You might have heard the term “intrinsic web design”, which could be described as a new era of responsive web design. And WordPress has a lot of the concepts of intrinsic web design already built into the site editor and the intrinsic behavior of the page, but we start off with kind of a classic responsive thing. We take a look at the header. The header if you actually resize it to mobile, doesn’t really break too beautiful. So actually, I don’t want to see these elements on mobile, I maybe just want to go down to the burger menu, but I have to test that out. And how I’m doing that, I will show you right now.

I have this header inside the site editor and I now take a look at my navigation element. So I have this navigation element and I go to the advanced tab, the settings tab and advanced panel, and here I can hide it for different breakpoints. So for example I want to hide it on tablet and mobile breakpoints and save that, and now this element doesn’t really get reflected in the preview, because we still need to be able to see the element, because otherwise we couldn’t really edit it. But we take a look of how this page is actually behaving in the frontend after I save the setting. So it looks the same on desktop, but as soon as I go down to this breakpoint, the element is gone. It already has a really nice behavior, so now I can go down to as much as 360 pixel and I still have a nice behavior.

So, I can maybe think about not having the burger menu on desktop devices, because I actually have all my menu items in the header and maybe I want to hide the download button as well when I come down to a mobile device. So let’s just do this. So similar here, I go into the buttons element and say, I want to hide them on mobile devices only, and I go into the popover block. The popover block, which is the off-canvas menu, is configured inside the popover block. I have the same navigation menu in here as well, so similar to the navigation element which I’m hiding on all my mobile devices, I now want to hide the popover element which pretty much just shows the navigation items. I want to hide them on desktop devices. I’m going to save this and I’m going to go back to my page and reload it. Now I have no burger menu on desktop devices. And I go down and the burger menu appears in the same moment the actual navigation elements are not shown anymore, so now I can highlight this navigation menu. I can put all my navigation items in this popover block and if I go further down to mobile, now I only have my burger menu and now I can easily go to really small screen sizes that actually do not really matter, because nobody has a screen size below 320 pixel I think. But this is the way I can configure a navigation, but also every single element inside your page, your post, whatever, can be displayed based on a specific screen size. That’s pretty much the default behavior how you can hide and show elements.

Now we want to take a closer look at what you can actually do to resize elements adjusting to the screen size you have. Before I show you how you can actually set this up, I want to show you how this actually is behaving when you build your website. First of all, we go down to these headlines and take a look at the font size setting. If I go to the design tab, I have font size settings in here, and these are just presets. I can take small, medium, large up to huge and huge is what is already defined. I can go down to small and huge is actually a pretty large headline, but if I go down to a mobile screen size, it still looks nice and behaves nice. And that’s actually based on a fluid preset which automatically resizes to the viewport width. And how to set this up I’m going to show you in a second.

But before I show you that, we are going to take a look at spacing sizes as well, because similar to font sizes, you have presets and you’re able to pick those presets in here. For example for my paddings, my margins and my spacings I have presets. It goes from zero to small, medium, up to extra large and I have the same for the padding on the side, I have the same for the margin and I have the same for the block spacing inside of the block. And this makes it really easy for the actual editor of the page to just select the padding sizes. Instead of having to define a padding, for example 80 pixels on desktop, 60 on tablet, 40 on mobile, where I always have to think about what pixel value is the best for my design, I can just select a preset and this preset is automatically resizing to the viewport width if I configured it correctly. And it makes it a lot easier for the user to actually set up these dimension widths, so these paddings, margins, spacings, whatever. I always have the option to go back to the classic approach and have for example my padding to be 100 pixels. And if I configured my padding to be 100 pixels you see the problem really fast. If I go down to a specific screen size, 100 pixel is just way too much.

So I go back to desktop and now I want to set it up for tablet, make it maybe not 80, make it 60, and I want to go down to mobile and make it 20. So this way I did define a responsive value and it actually looks okay, but I have to define three different values just to set up our largest or medium spacing size. So usually I just don’t want to do it this way, I would highly recommend doing it the intrinsic way by just setting up and selecting one preset and you can select and you can configure these presets globally. And how you do this we take a look at this now.

So I have the Greyd Global Styles, which are pretty much a version of the global styles, but it has a lot more options. First we take a look at font sizes. In font sizes I can define all my presets. By default these presets are mapped upon my headline sizes, so huge as headline one, extra large as headline two and so on, but you can of course set up each headline one to be 40 pixels or to be extra large or large, but by default those are mapped upon each other. And you see here, you can configure this font size by choosing a fluid value or a static value. So what a static value does, is pretty easy, for example I want to go back to my 100 pixels, I want to have a huge headline one, looks really nice on desktop, but the problem is, if I go down to mobile, I now have the issue that this is way too large. So I’d rather like to configure my font size in a fluid way. And what fluid does in this example is, it has a minimum and a maximum value. The minimum, it’s never smaller than this value, which is kind of necessary for mobile devices. If I go down to mobile again, I need to scroll a lot here, you see this value, is now probably around 1rem, but I need to make the least amount a little bit bigger, so 2.5rem is pretty good, because it’s a bit larger than the large preset and the extra large preset and the huge preset looks nice on mobile devices, but I still want to have a huge headline on desktop.

And this way I configured it by using viewport width. 10 viewport width is 10% of the actual width of my viewport of my device. This way I can use this dynamic value to make like huge headline, 15 viewport width, this is a huge headline or desktop I can make really statements, but if I go down to mobile it still looks all right because it’s actually resizing adjusting to the viewport width and then never gets smaller than 2.5rem. And actually WordPress does all the calculations for you to resize this element in between the smallest breakpoint and the largest breakpoint and calculates all the values for you. You don’t have to think about that too much. And this is, if we go down back to desktop, pretty similar to spacing sizes. Spacing sizes you have a lot more options, but at the end of the day it’s pretty much built the same. So what you’ve seen in fluid typography sizes, clamp is actually the CSS function that is all based upon, but with spacing sizes you have all the CSS functionalities yourself and you can configure it yourself.

So again I can configure this extra large preset that I’ve selected in this group to be a static value, for example make it 100 pixels. 100 pixels does look all right on desktop, but looks terrible on mobile. So again I want to make it more dynamic. And what I can do for example, I can select min. Just shortly explained what min does: min always selects the smallest value of these two. So it actually makes sure that it’s never getting bigger than any of these values. Max does the opposite, it actually selects the largest of these two values, so it makes sure it’s never smaller than both of these two values. And the one we’re looking at a bit closer is clamp. Clamp is what fluid is actually based upon. We have a minimum value, again never smaller than this value, I want to make a 2.5, bit larger, and maximum value – never larger than this value. And I want to make this pretty large make it 6rem. And the preferred values, actually as long as I’m in between these two values I’m trying to be this one. So three viewport width, 3% of the viewport width, is actually not really much, so I want to make it six. So now it’s automatically resizing to my viewport width, but it’s never getting smaller than 2.5rem, which makes sure that it’s always larger than the large setting. And it’s never getting any larger than the maximum value, which again makes sure that it’s never too large, that if I view this on a really huge desktop, it’s never actually too large it’s always kind of restricted in this behavior.

So I have a lot of options on a global stage to actually configure these values, these unit values and font sizes to be automatically responsive and I later on just select them. So if I think about this at this stage, I do not have to set these values again for every single breakpoint separately. And one more thing when it comes to responsive web design and the entire intrinsic approach of WordPress, the alignment is one important thing we have to talk about. I want to quickly explain how alignments work inside the block editor. By default, we have three different alignment types. I can show them right here. We have none, which is the content width, so the width of the content pretty much. We have wide width and we have full width. Full width explains itself, it’s just full width. Wide width is a wider size that is configured and selectable in most of the elements. And inside these groups I can set the wide and content width myself.

What I do on a global level is actually, you might have seen that before. In the layout tab of the global styles I can set up my content and my wide size, also my paddings and spacings by default. But my content and my width set actually the size I’m referring to in here. So content width is when you think about WordPress as a blog system, content width is usually what your text content should be. So your text content usually should never be much wider than 600 to 800 pixels, because that’s the most readable width. It obviously depends on your font size, but that’s one of the recommended values. And the wide width is usually what you use for pages, for featured images and everything like that. And then of course you have full width. You cannot configure full width here, because it is always 100% of the viewport. So I can set them in here globally. I don’t want to do it for now, but just to let you know that you configure them globally and refer to them, but I’m happy with the values how they are and I can select them here, so I have this content width, which is the default behavior. I picked no alignment. I have wide width and full width.

One thing I forgot to mention, but that’s actually really important, is this only affects elements on the first level of a page. On the first level actually it affects elements that can be aligned, for example this group block. And I can set my wide and my content width for this element. And I now can say okay, all my blocks inside of me, they should be using the content width. So the content width is again what I figured in content, usually around 600 to 800 pixels. And you see all the elements are perfectly aligned to the elements outside of it, because they all use the content width. If I deselect that now, they’re just inside this group and aligning to the padding of my group. So if I go to my padding step, you can see that’s where the elements do align to, but by default I want to make it my inner blocks use the content width.

This now allows me to do something. I make it full width. That’s actually really interesting. I can now select these elements inside and I have the alignment controls again. And I can now select these to be a wide width. And maybe the headline as well to be a wide width. I can even make it full width. It doesn’t really make sense in my opinion, but yeah. Maybe make this full width as well, but as soon as I say okay this doesn’t need to be full width, but wide width or even content width, you see the wide alignment doesn’t have any effect. Full width does, but doesn’t really make sense, does not have the effect that I wanted to have to be actual full width. But this is how alignments work and this is how the settings work. You can select the default behavior, configure it on your own. If I deselect it again, I have all the blocks aligning to the padding of the group. And that’s how alignments work inside the site editor and the block editor.

One last thing I want to highlight today is column behavior and column behavior especially inside the Greyd.Suite, because we took the core columns and built a brute STP grid inside of them. So for example I have these three columns and they’re looking really nice. And on mobile, if I go down to that breakpoint, actually this highlight one it could be a highlight product, could be whatever, I want this to be the most important thing, so I want this to be the first thing. So what I can do here is, I can configure the order based on my breakpoint. So I want to be this to be the start element. So now it’s the first element inside my columns, but if I go back to desktop, it is still the first element, because I haven’t actually configured the order to be something different on a desktop device. So from smaller desktops on, I want this to be in the second position.

One tricky thing here is, offset in CSS are always based on a numeric value and the default is zero. So if I configure something to be the position one, it has the value one. If I configure something to be at position two, it has the value two. But by default everything has the value zero, which leads to this column actually being in the second position, because it still has the value zero, but I want this to always be in the third position. And now I have on desktop devices this as my middle column and if I go down to mobile devices I have this as my first column. And maybe I want to do something different. I now want to have on tablet, because the content in here could be way larger, I want this to break out of this column and actually highlighted on top. So starting with this breakpoint, I want this to be very large, so this doesn’t actually make sense for the other contents, but we get there. And I want this to be in the middle. So I have this in a eight column grids. So I want to have this as an offset with two and now this breaks already, which is nice, but I need this to be breaking as well. So what I want to do is, based on my screen size, I want this to be a small column on the left. And now it automatically breaks into the next row pretty much, because it doesn’t have enough space in this first one. So it looks nice in here. Let’s go down to mobile. Mobile should be unchanged, because we changed everything from this point up, but desktop should look pretty terrible. And it actually does.

So what I want to do on desktop, I want to kind of reset the settings, so I want this to be automatically sized, to have no offset. And there we go, it’s reset already. This has no offset, it’s automatically sized, so every single column of these three has the same space, so the same width again. And this is just one last thing that I wanted to highlight, where you can actually define responsive behavior in kind of a nice way and define columns without actually hiding and displaying everything based on a breakpoint, but naturally just by resizing them in this layout. I hope you learned a lot. This is what responsive web design and especially intrinsic web design is all about. See you in the next one.

For more videos and information please visit our Helpcenter.