In this lesson, we’re going to take a look at global pop-ups. Now global pop-ups share a lot of things in common with the previous pop-ups, we’ve seen main difference being how we actually interact with them and how we can trigger them. We no longer need to click. A button so, for example, we may have something like when someone goes to exit your website. A pop-up pops up offers them a discount and helps them make a purchase now to access the options for these global pop-ups is a little bit different, also because global pop-ups can be assigned to multiple pages or an entire site.

The way we build them is a little different, so we need to do is go back into the dashboard of WordPress go to Brizy and inside there we choose the option for pop-ups. Now we go ahead and add a new pop-up. We’ll give this a name, we’ll publish it and then we’ll choose to edit this with Brizy. Now, once the Brizy editor opens, we can go ahead and use any of the pre-built designs or we can start from scratch for ease. Let’s just take a look at using one of the pre-built designs, but, like I say all the tools are there: should you want to create these totally from scratch?

For this example, we’re going to be using the option for subscribe, we’re going to select this I’m going to choose when the pre-defined layouts we’ll choose this first option and once you’ve done that you can see. This now shows us exactly what this is going to look like, so now we can go ahead and fine-tune and tweak this to make sure it is perfect to what we want. You’ll also notice that it picks up all the global styling that we set up for the particular design we’re working inside, so this just speeds up the whole process, even if you’re using any of the pre-built layouts. Okay, so let’s say we’re happy with the way. This looks now we need to go ahead and set up how it works and interacts with our site and our user.

To do this, all we need to do is come to the options in the top right hand, corner and select those choose the first icon and inside there we now have options. So you can see, we’ve got things like scroll page behind make it global those kinds of things. If you wanted to use this as a global template, we could do that inside you. For this example, though, I’m more interested in what we can do with the display conditions. So, let’s open that up now because we’ve used a predefined template, you can see, we already have a trigger and if we look at the conditions option, we’ve already got a condition, but let’s take a look and break those down into a little bit more detail.

The triggers are basically, how do you want this pop-up to actually work? What’s going to trigger this, you can see by default. This is set to be on page load. We can change this to any of a number of different options, so you could have, if someone’s on your website and they’re, doing nothing you can set after an activity. You can then choose the number of seconds to wait when that user is inactive before this popup.

Actually displays what we’re going to do, though, is we’re going to set this up to what’s called exit intent and what that really means is when someone goes to close the browser window down press the back button. Anything like that that moves them out of the page itself inside the browser this pop-up will appear so we’re going to do is we’re going to choose the options and we’re going to come down to on page exit intent. Now you can see, there’s no condition set up for this, because this is a kind of catch-all. You can also go ahead and add additional triggers if you want to and stack these on top of each other for various different things to happen to trigger this particular pop-up, we’ll leave it set to one for now, but just bear in mind. You can set this up for multiple triggers you’ll, also notice.

We can set this to only display this pop-up one single time, there’s nothing worse than going to a website and every time you go to the site. The same pop-up keeps on appearing and nagging you. So if you want to set this to only display one time, you simply need to check this, and it’s already set up for you really simple, we’ll unchecked that we’re going to power to conditions now now inside the conditions. This is where we want to display this. Now currently, this is set by default, to include every single page on our site and for lots of the cases that might be perfect, but you can get a little bit more granular.

Should you want to? You can also set things up to be included and excluded. Like we’ve seen in previous lessons, so let’s set this to include and we can drop this down and we can now filter things down even further, so we may say we only want to show this on the pages and we might want to show it. On specific pages, so, for example, our posts – you won’t see it things like that, so we can then go ahead and really fine-tune this on all of the pages on our entire site, so really cool. To see how easy this is.

You can also go ahead and add additional conditions to stack these, on top of each other, to create more comprehensive sets of conditions. So, for example, you may want to set this to display on all the pages, except for the home page. All you need to do is add a new condition set this to exclude and then choose the home page that you set up to be excluded, we’ll delete that for now just so, we can keep this really simple and we’ll click on save once you’ve done that We’re going to close this down and update the design. So now we’ve set our conditions of finish with our design. Let’s test this out on our website, so we’re on our website.

We can have a look around like a user. Normally would read what they’re interested in and then when they’re ready to leave and they pop out of the browser, our little pop-up appears prompted them to either subscribe to our newsletter or maybe have a discount. So they can complete the purchase really easy to do now. Before we wrap this video up, let me just show you a few more things about how you can adjust the positioning, the styling and those kinds of things when it comes to the actual pop-up itself, we’re back into the pop-up editor, and now we can do. Is we can select the actual pop-up itself by using this little grey circle in the top left?

Let’s choose the options for more settings, and once we do that, you can see. We can now do things like popping into the advanced section and we can control the entrance animation, the hover transition, the duration and the delay. So if we want to get a bit more creative on how this pops in or to grab the attention of the user, we can change the entrance animation at the moment. We’ve got slide in left. Let’s use something else: let’s try something like this rubber band option.

As you can see, that gives a completely different effect. We’ve got lots of different options inside you like data, for example, kind of announces itself. So if you want to get a bit creative, you can do that. You can also adjust the duration and the delay. So we say we put this duration up a lot higher.

You can see. It now becomes a much slower animation and if we drop that down to a really short time, you can see a very quick animation, we’ll reset that back to what it was okay. So that’s how easy it is to adjust these animations, but what about the position of the actual pop-up itself at the moment, it’s in the bottom left that might not be convenient so to do that to change things all we need to do is pop up to The top right hand, corner and pop out the options. Now we’ve already seen how we can go in and set the conditions and things and obviously you’ve got things like your background and so on. But we have these additional options for the alignment, so we can choose a line, you can see, we can say left centre or right and we can also then do the position.

So you can see we can put right at the top in the middle and we can place it at the bottom. So I’d absolutely suggest playing around with these options to find something a little bit more unique specific to the design that you.