How to Create a Custom Popup by Using OptiMonk

How to Create a Custom Popup by Using OptiMonk

How to create a custom popup? A step-by-step guide for OptiMonk users

Using the renewed OptiMonk, you can display different types of on-site messages to visitors to convert them. Our new toolkit comes with 200+ ready-to-use templates to help you grow your email list, Facebook Messenger list, decrease cart abandonment, promote special offers, get customer feedback and much more.

That’s great for users with basic needs. But you might want to create a unique on-site message with full control over the design, in order to fit your website’s design for example. You might want to add a unique appearance.

If that’s the case, don’t worry! Using our Drag & Drop editor creating a custom popup is as easy as pie. No HTML or CSS knowledge is needed, you can simply drag and drop the elements you need.

In this article, we’ll show you how you can create a custom popup from the base in a few minutes, step by step.

Ready? Let’s get started!

Step 1: Create your new campaign

Log in to your OptiMonk dashboard. Click on “Add new” to create a new campaign. Now you will see the window below, here choose the Drag & Drop Editor button.

OptiMonk Drag & Drop editor

On the next screen you will see the pre-built templates. You can see the preview of each template by moving your mouse to the template.

OptiMonk pre-built templates

In this case, we want to create a custom popup, so we need to scroll down to the end of the page and select the empty one.

Create a custom popup using OptiMonk

Choose the domain and add a name to your campaign, as you would do with any other ready-to-use templates, then click on “Create campaign”.

Create a custom popup

Step 2: Edit your campaign

You’ll be redirected to our editor and you’ll see the empty popup – as on the screenshot below.

Create a custom popup

Since Black Friday is getting closer, let’s start to prepare for that and create a Black Friday popup. First, click on the Settings tab.

Create a custom popup

Here you can set up the general settings for the popup, like background color, width and height, and more. Let’s edit the “Page”. First, I’ll add the background color I want to use.

Create a custom popup

Then change the size of my popup.

Create a custom popup

As you can see above, the background of the closing “X” button is orange. I want to change that, so let’s navigate to the General settings.

Create a custom popup

Open the Close Button tab and change the background color. Here you can also change the X color or the alignment.

Create a custom popup

Now that we changed the color, we can start adding elements to our popup. I’m going to add a block that has two columns.

Create a custom popup

To the left side, I’ll add an image.

Create a custom popup

For now, I’ll leave it like that – later I’ll see if I need to change the position or the size of the photo.

Create a Black Friday custom popup

Now, I’ll drag a text element to the right side.

Create a Black Friday custom popup

I’ll add the text I want and edit the font, size, color, weight and line height to my needs.

Create a Black Friday custom popup

Let’s move this text element a little bit lower by editing the “Margin”.

Create a Black Friday custom popup

Now, let’s add another block under this one. I’ll change the column count to 1 in this case.

Create a Black Friday custom popup

A Black Friday offer should always have a sense of urgency, so I will add a countdown element to this block.

Create a Black Friday custom popup

Firstly, I will set the countdown period, then edit every bit of the clock: vertical padding, horizontal padding, font size, font family, and colors as well.

Create a Black Friday custom popup

How about adding an email signup form? Let’s drag another block with 1 column to the bottom of the popup.

Create a custom popup

Then add an input element. Choose email and click on the “Use field” button.

Create a custom popup

Create a custom popup

It doesn’t look as good, so I want to edit it as well. First, I want the email field to be required, so I’ll turn it on. Then, I’ll move the text to the center.

Create a custom popup

A few more changes and it already looks better.

Create a custom popup

Now, of course we need a button as well under the email field, so let’s add it!

Create a custom popup

Again, I’ll edit every bit of the button, like the width, the background color, the margin, and the font of the text as well.

Create a custom popup

We’re almost there! We can still change the color and the opacity of the overlay in the “General settings” tab.

Create a custom popup

And that’s it!

Well, maybe not. It looks like we don’t have a call-to-action, let’s add another text element.

Create a custom popup

Move the text elements a little bit upper to look better. And now it’s worth to change our CTA button text, so it’ll be in synchrone with the text we just added.

Create a custom popup

We have created a totally unique custom popup in a few minutes. Great job, guys! 🙂

Now all you have to do is to save it, then edit the settings – as you would do with a ready-to-use template.

If you’re interested in how to make a new popup from scratch, then watch the video below.

Conclusion

You have taken the first step to create a unique and good popup campaign. As you can see, thanks to our Drag and Drop editor, the many elements it has, and to the advanced settings, it’s easy to create a custom popup. I hope you liked our tutorial. How about giving it a try right now? Click here to login to your account.

Not an OptiMonk user yet? Create a free account to see our Drag and Drop editor with your own eyes.

Create free account

One thought on “How to Create a Custom Popup by Using OptiMonk

Leave a Reply

Your email address will not be published. Required fields are marked *