How do I build individual popups?

Hi, this is Sandra from GREYD and today I’d like to introduce you to GREYD.Popups and show you how easily you can create individual popups in GREYD.SUITE. You’ll find GREYD.Popups on the left in our menu and we’ll then see an overview first of all existing popups including information on the triggers, where the popups appear, if there are any rules defined, priority, creation date, etc. When you click on “create new popup”, our wizard will open where you can enter the name of your popup. And you can either start from scratch or you can also work with a copy of an existing popup or you can work with one of our presets that already have some content and settings prepared, so that you don’t have to start from scratch. Let’s now have a look at the popup that I’ve prepared beforehand.

So in terms of the content for your popup you can work with the Block Editor and work with any core or GREYD.SUITE blocks as usual. And there’s one additional block that you’ll find, which is the close popup block that will add this little X icon to close the popup, that you can then define in colors and sizes individually. Or alternatively you could of course also work with a regular GREYD.Button and select the trigger “close popup” which is more or less the same. So much on the content of your popup.

Let’s now have a look at the general popup settings here on the right. Here under “layout” you can easily define the position and size of your popup, width and height. Custom, automatic or just 100 percent.

You can also work with paddings and margins. And you can also have individual settings for your mobile popup as well. Then here under “design”, you can define the colors for text, headlines, and the background. You can work with a hover effect if you want to, you can make a popup round with border radius, you can add a border and/or a drop shadow if you want to.

And last but not least, under “extended”, you can define what should happen to your page in the background when a popup is opened. You can activate or disable page overlay, that you can then define for example in color, different opacity, you can work with different effects such as blur or brightness and define that individually here. You can also define whether the popup should close when somebody clicks on the page overlay. You can disable scrolling on a page while the popup is active and here you can define how your popup should appear. You have different animations both for the body and popup itself and you can also always have a preview. Down here you can define what should happen if your content doesn’t fit into your popup. You can make it scrollable or define if the additional content should be visible or not.

Let’s now move on to when, how and to whom your popup should be visible. First, it’s about the triggers. You can define one or several triggers. For example you could activate the popup after x seconds on a page or after someone has scrolled to a certain amount of your page, after some seconds of inactivity, you could have an exit intent popup or you can also of course always have a button as a trigger. I’ve shown you how to use a button to close a popup. Of course you can also select the trigger “popup” and then select another popup on your page.

Next is about where your popup should appear. You can select normal, regular pages, special pages like the 404 or search page, or post pages. If you have any custom post types, you can also define custom post pages here. You can either show or hide popups entirely or also select some posts individually. If you want to, you can additionally set certain rules — one or several — that have to be met for your popup to be opened. For example you could define that at least 3 pages have to be visited before your popup is activated. Or you could make a popup dependent on a URL parameter and include it in a certain marketing campaign, or show it only to visitors who come from a special newsletter. You could also define that a certain page would need to be visited beforehand. With user role dependency, you can make your popup only visible to certain users. Or you could also make it dependent on time, device and/or the browser used by the user.

Down here you will find some additional settings. First is the priority: you can select a number between 1 and 10 and higher prioritized popups will always be visible above the other popups. With this option you can also define that all popups with a lower priority will be closed as soon as one of a higher priority is opened. This option here is actually quite handy: it sets a hashtag in the URL when the popup is opened, which makes it much easier to analyze your website activities in analytics tools like Google Analytics. So if you now open this page and trigger an exit intent, a popup opens and as you can see here this part was added to my web URL.

The last option is to make sure that the popup is only shown once, even if the conditions for the popup are met several times while the user visits your website. This prevents someone from seeing the same popup over and over again.

So much on GREYD.Popups. As you’ve seen, there are abundant possibilities, lots of design and admin features, while it is still very easy to create very individual custom popups.

For more videos and information, please visit our Helpcenter.