Popup Builder

Create popups on your page, which we will refer to as on Click popups, and this can be done wherever you have a clickable element. This is a pro feature. I'll use a button element in this instance. Select to interact with it, and from the toolbar at the top, select the link. You will see that we have the URL, blog, popup, and file. This will be the same for all elements that can be linked within the builder. Select popup, and then click on the plus in the middle. This opens the popup blog manager where you get a lot of pre-made pop-ups that you can choose from. On the left, you will also see there's a few handy categories if you need something quickly, like a sale or a sign-up form, or you just want notifications. Let's stick with this sale, and I'll choose this one over here that says 10% off. This will bring in the pop-up, and it will populate it within this screen from the options toolbar. If I want to use a different popup, I will delete this by clicking on the X and then click again on the plus to open the manager.

Let's select sale again, and I'll choose this one with the countdown. To edit it, you have to click again on the thumbnail in the popup. This opens the popup builder, which for all intents and purposes, are very similar to the builder. A quick overview is that we have the background here, which is this transparent area, and then we have the canvas for the pop-up here in the middle. To access the settings for the pop-up, you go to the top right-hand corner and treat it very much like you would treat a block. From the right, we have the option to align it vertically and horizontally. You can save it like usual, and then you have your color styling over here. This is for the overlay in the background. Currently, you can see there is a transparency effect applied, but we can move it all the way to the top if you want solid opaque color. If you want to bring in an image, you can do so In most cases, you're probably going to stick to a color or no color at all. The settings all the way to the left, and you have the option to scroll page behind if you want people still to be able to scroll the page, and you can make the popup also global.

This is great if you have a discount and you want to make sure that people don't miss out on it. The close is the close button that you see here, that X. Click outside to close, and this means that if people click within the overlay, it It will also close the popup. This is a good idea to keep this activated, especially for people on mobile and tablet devices. You can delay the display of the close button by adding a delay here. And that means that when this pop-up appears, people cannot close it immediately. They actually need to take some time to read it. If you want to disable the display, untoggle it from here. Now you can add a button to close out. Styling the pop-up is as similar as anything else you would build out. That happens within the canvas that is accessed here in the top left corner, and it has a background for images, color, and then the settings where you can bring in styling and effects. The other one is the close out button. Select it, change the icon, change the position, and you can change the size. Also, add a background and change the colors if you want to.

The next option allows you to move the close button to the inside or to the outside of the pop-up. I'll put it on the inside, and you can see it there, and combine with the next function, which moves it around the corners of the pop-up. Put it in a place which is more convenient to your needs. Once you have done editing the pop-up, go to the top left-hand corner and select Go Back, and you're back in the main builder. Remember that when working with your pop-up, you also need to go and check responsive display on tablet as well as mobile because they need to look good on these devices as well.