Grew up on Canva? Luckily, you don’t need killer design skills to create high-converting popups. Our OptiMonk library is decked out with 200+ ready-to-use, on-site messaging templates. You can use our templates to grow your email list, beat cart abandonment, promote special offers, collect customer feedback, and so much more.
But what about when you’re ready to create more personalized, custom popups? You can easily create sleek on-site messages with our drag-and-drop editor even if you’re not confident in your design skills.
In this article, we’ll show you how you can make your own popups for both desktop and mobile in minutes.
Ready? Let’s do this!
Step 1: Create your custom popup with just a few clicks
First, log in to your OptiMonk dashboard. Click on the ‘New Campaign’ button. Then click on the ‘Start from Scratch’ button.
Choose your domain and hit ‘next’ in this window:
Step 2: Edit your custom popup campaign
You’ll see an empty popup once you’re redirected to the editor. Here’s a preview:
Let’s create a popup for summer sales.
To do that, click on the layout tab:
Next, choose ‘frame’ to edit it—like so:
You can then edit the popup size under the same tab:
Next, head to the style tab and choose the background color you’d like to use:
Want to change the background of the ‘X’ button that closes the popup? Go back to layout and choose the ‘close button’ tab.
Here, you can change the popup’s background color and the color of the ‘X’ button.
Now you can start adding structural elements, your options include: a block, spacer, or divider.
Below, we add a block—listed under ‘Structural Elements’:
Choose a column layout for the block. Here, we’ve gone for one with two columns:
To the left side, we’ve also added an image. You can do this by heading to ‘Add Element’ and clicking ‘Image’, found under ‘Basic Elements’.
We can always change the position or the size of the photo in the future.
You can drag-and-drop a text element in the right-hand column:
You can add the text you want and edit the font, size, color, weight, and line height to suit your needs:
To add text, follow these 3 simple steps:
1. Go to ‘Add Element’
2. Click ‘Text’ under ‘Basic Elements’
3. Drag and drop the text icon into your popup
Click on the advanced tab and edit the margin to place the text where you want it to be on your popup:
Now, let’s add another block under this one. Let’s change the column count to 1 in this case:
You can also add a countdown element to this block to increase urgency and boost conversions. The countdown timer can be found under the ‘Add Element’ tab, under ‘Product Offers’.
First, set the timer.
You can do this by clicking on the ‘General’ tab, here you’ll find options to:
1. Opt for a fixed time or fixed date (select your option from the dropdown list).
2. Edit the days, hours, and minutes, and seconds by typing in your desired duration in the assigned boxes or experimenting with the toggle feature listed below them.
Then edit the style.
Click on the Style tab, use the toggles to experiment with font size, height, and width. You can also choose your font by selecting your font of choice from the drop-down menu.
Below this section, you also have the option of selecting a different color for your text, and the background. You can also add a border and shadow by selecting these options from the drop-down menu – also found under the style tab.
How about adding an email signup form? Add an input element below the timer. You can find it under ‘Form Elements’. To place it, drag and drop it into your popup.
Unhappy with how it looks? You can edit it to your taste. To do that, just click on the Style tab and change the width to manual. We also edit the margin on the advanced tab to move it lower. Take a look:
Looks better already—right?
Now, we can change the placeholder of the field and align it center.
Now, we need a button.
Go to ‘Add Element’, ‘Basic Elements’, and then select ‘Button’.
You can edit multiple elements like the width, the background color, the margin, and the text font to craft a high-converting button.
The edit button option will automatically open once you drag and drop your button into your popup. To edit your button’s style, navigate to ‘Style’ under the ‘Edit Button’ tab. Like so:
To perfect your popup, you’ll also need a call-to-action, which you can include by adding another text element. To do so:
1. Click the ‘Add Element’ tab
2. Drag and drop the text element into your popup
Here’s how we styled ours:
Ta-dah! That’s how you can create a custom popup in minutes.
You can do some final changes in the design if you’d like to, e.g. change the font type.
Now all you have to do is save it and edit the settings just like any ready-to-use template.
In a few steps, you learned how to customize a popup. Next, we’re diving into successful popup examples that you can easily personalize for your customers. Ready?
Custom popups done right
OptiMonk makes it fast and easy to create custom popups that will help you grow. Looking for inspiration on how to customize your popup displays? Check out these striking designs below to style your own custom popup.
Popups can help build your email list and boost your reach. Fitness company Crossrope.com grew their list by a massive 900% with a simple popup.
Here’s how to replicate what’s awesome about this list-building popup:
1. Go for bold hues and draw the eye.
2. Always use one call-to-action to boost your conversion rates.
3. The ask from visitors is a minimal one: drop in your email address. Never overload your customers with too many asks.
4. A clear ‘X’ button in a contrasting color to the background makes it easy for visitors to exit the popup. This helps you avoid irritating visitors if they don’t want to share their email addresses.
Drive sales by using popups to promote special offers. The best popups have more than a 50% conversion rate, here’s why this popup is likely to be a success and what you can do to replicate it:
1. Go for a bright color palette to attract attention.
2. Minimal text pushes the visitor towards clicking the button to get their 63% off. If you want your visitors to convert, then focus their attention with minimal text.
3. You can drive conversions by using contrasting shades for the button and the popup’s background.
To build your list by trading inside info on sales and sales promotions for your visitors’ email addresses, follow these steps:
1. Increase urgency by focusing on a seasonal, time-sensitive sale.
2. Highlight the benefit of sharing an email address in an eye-catching shade (“74%”).
3. Promotes a desirable item that visitors would like to get a deal on to increase your click-through rates.
This popup accomplishes this in style. Here’s what you can take away from it:
1. Evocative copy: “Hello to Summer” inspires images of BBQs with friends and lazy beach days. Use language tied to positive events and emotions to help draw in your visitors.
2. Promotes a strategic offer that boosts your average order value (e.g. spend $500 to get $100).
3. Ensure your visitor has to copy and paste their discount code. This encourages them to use it as soon as possible.
Create your first custom popup with OptiMonk
With the right inspiration, it can be easy to know how to plan your own custom popup. Don’t have a clue about how to create a CSS or HTML popup? No sweat.
You don’t need design skills to create a beautiful, custom popup. Create awesome custom popups with our drag-and-drop editor and watch crazy growth roll in for your ecommerce store.