Brizy WordPress 101

Lesson 29

Global Blocks & Display Conditions

We’re going to take a look at how we can set up Brizy global blocks, we’re also going to take a look at display conditions. So, first of all, let’s take a look at those Brizy global blocks. Now, when you create a design, there are going to be various different parts of your page that are going to be global across all the different pages things like headers and footers. So, let’s take a look first of all how we can make this header a global section. So all we need to do is come over the section.

We want click on our pop out in the top right hand corner and then we’re going to choose the very first icon. Once we select that we get two radio boxes, the first one is to make it Global. All we need to do is Select that and that will now create this and set it up as a global section. If you want to check to see if any sections are global, simply mouse over any section, you need to design, and then we’ve got the section options. You’ll see above that we get a little blue circle with the global icon.

This denotes the fact that this is a global section, simple, as that couldn’t be easier now, once you’ve created your global sections, we then have the option to deal with the visibility conditions. All we need to do is come over any of our global sections. Click to open up the settings choose the first icon again and inside there you’ll see. Now we have an option that says display conditions. If we select that that will then show us the condition or conditions that apply to this particular global section and where and when it will be displayed, so you can see as soon as we make this global we get automatically one condition applied to it.

In this example include the page or pages on this home page, which is where this particular section was created, but we can set up, includes and excludes across our entire site design. So you can see, we can choose the option for inside there and we can set this to be all so now. Every page we have on our site and any page we create in the future will have the header automatically inserted into the design. Let’s choose that option you can see, we can also choose between, include and exclude. This allows us to very quickly and easily create really comprehensive conditions for displaying and hiding various different parts of our site design.

You can also see we can choose between pages we’re going to have all system pages, blog categories and so on. So you get a lot of control of exactly where and when your particular global sections will display. So let’s go ahead and test this out. Let’s just make a few changes set up some more conditions, so I can show you how this all works. So, let me just say include all pages.

This is a global override now, so all pages will have this displayed. Now, let’s say on top of that, we actually want to hide it, but only for certain sections or pages on our site. We can add a second condition in this time: we’re going to choose the option for exclude, then we can go ahead and we can add our second condition. So, let’s open up pages – and you can see inside here – we’ve got all system pages and so on. Let’s just choose pages and from there we’re also going to come down and we’re going to just choose the option for food blog once we’ve done that.

We’re now saying include this in all the pages, except for the pages that are food blogs, let’s go ahead and save this. We’ll close this down, update our page and we’ll take a look at preview in this. So now you can see on our home page. We’ve got our menu and our top bar all in place. Let’s come into our food blog section.

As you can see, the menu now disappears all down through those global conditions for setting up visibility. Okay, so we’ve seen how to set up global blocks and how to set display conditions, there’s a few more things to do with global blocks. I want to show you, let’s scroll down our page until we get to this session, which then a kind of gallery section. Let’s select the section choose the Cog icon and from there we’re going to make this global again, like we see before it loads that in now sets that to be global. Now, when you create global box, there are some limitations to how you work with them.

First of all, let’s go and take a look at how you would normally insert a global block into your design and take a look at some of those limitations. Let’s go ahead and click the plus, as if we’re going to add a new section inside there we’re going to choose the option for global blocks. This will now list all of the blocks we’ve set to be global inside our entire website. You can see. There’s our header on the left, hand, side and there’s our new section.

We’ve also made global on the right hand, side now, you’ll find when we hover over any of these. If they’re included in the page one time, for example the header section or this gallery you’ll see, we get a little notification saying you can’t add this again. We can only add one instance of this design global block to a single individual page. So you may be wondering: how do you go about adding multiple instances to your page? Well, you can’t do those with global blocks, but you can do them with saved blocks.

So at the moment we don’t have any save blocks inside our design. So let’s go ahead and save something: let’s come down and say we, like the look of this section, we’ll select it we’ll, choose the heart icon to add this to our saved or favourites, and then we’re going to go ahead and we’re going to open up our browser again this time, we’re going to open, saved and you’ll see, there’s our saved block. Now we can simply go ahead. Click to insert that in again, and we now get two instances of that on our page. Let’s remove that instance for now and let’s go back into our blocks browser now you may be wondering why would you use a saved block over a global block?

There’s one key difference between them, apart from how you save them and so on. So, for example, if we come to the save blocks, we can insert multiple instances of this particular block in the same page or throughout our entire site, but if we make a change to any of those instances, only that instance is changed everywhere else that our block Is used throughout your entire site will stay exactly as it was when you inserted it, however, with global blocks, it works in the opposite way. So if you inserted this header section, for example, and then we go in and make a change to the header, we change the logo, for example, everywhere. Site-wide that uses that particular block template will be updated and changed. That’s the key difference between the two of those, and that will give you a good idea of when you should use one over the other now.

The final thing we need to look at is: how do you go about deleting global blocks? It’s very easy! We’re inside the block browser like we are now we can simply hover over and you can see we get a little delete trash can in the top right hand, corner if we select that that’s now been deleted from the global blocks, but don’t worry that hasn’t been Taken out of your site design, it’s just been removed from being a Brizy global block. You can easily go back in and add it again if you wanted to, if you’ve done this by mistake, all very, very easy to do.