Transcription
This is revelry. They’re an WooCommerce brand that makes bank by helping wedding parties find dresses that actually fit and look good for everyone in the party. The first time you visit the Revelry website, you’re going to see this pop up, which helps them grow their email list. Now, we know that most ecommerce brands earn up to 40% of their revenue from their email list, so chances are this pop up is extremely important to Revelry success. In today’s video, I’m going to try to recreate that pop up inside of four different services that help WooCommerce owners build pop ups for their website.
They’re going to vary between self hosted solutions and software as a service, lifetime deals and monthly reoccurring costs. Now, I’m not going to show you every feature of every platform, but what you will see is what delights me about each platform and what frustrates me and maybe makes me want to close the window and never look back at that software. I’ll also talk about important things like compatibility with certain websites, as well as integrations with email service providers so that you can get that contact over onto your email list with great ease. All right, if you’re excited for this video, make sure you click that like button and let’s go.
What’s going on, everybody? It’s dave here from profitable Tools. To start off our our pop up comparison, I want to go through each of the four tools and just give you a broad overview of what they’re all about and you can start to get a good idea of which one might be a good fit for your business. And then we’ll dig into the nitty gritty and talk more about what I specifically like and don’t like about each one. So this is Convertbox, and the good things to say about Convertbox is that it integrates with a lot of different platforms.
It is a hosted solution, so it’ll work just about anywhere on the net, regardless of whether your site is on Shopify, WordPress, Squarespace, you name it, it’s going to work just fine. And the other thing that people seem to really like about Convertbox is that it is a lifetime deal, meaning that you pay $500 upfront and you’ll get to use it forever on up to ten websites with 250 page views per month. That is actually going to be a considerable savings when you look at the monthly cost of competitors, although you have to pay everything upfront. So if you’re just getting started, this may actually be a drawback. The next tool we’re going to look at is called Optimunk, and this is a hosted solution as well.
It’s actually pretty similar in features to ConvertKit, but it has a monthly offering, so we can actually get started here completely for free. You can see they have a free plan for a single site, up to 3000 page views per month. So if you’re just brand new to WooCommerce, testing the waters. This might be the service you want to go for because you don’t have to pay anything. However, as you scale as you grow, you can see that we’re getting up around the ConvertKit numbers.
$200 a month for ten websites, and you’re only getting twice as many page views. And obviously three months here and you’ll be over the cost of convertbox. So definitely something to keep in mind. However, on the other hand, it is pretty appealing to start off at, say, around $29 a month and then scale up as your business grows. Of course, these are business expenses that are tax deductible is nothing that you really need to freak out about spending an extra 29 or $79 a month in reoccurring costs if they have a positive ROI for your business.
The last two tools we’re going to look at are WordPress Focus, meaning that they’re only going to work on WordPress sites. The first one is Elementor, which is actually a page builder. You can build full websites using Elementor, but here we’re going to focus on their pop up building functionality. Specifically, Elementor starts at just $49 a year, and it’s a really great option if you need something to build out an entire website. But even if you only need the pop up builder, it’s still going to be cheaper than the other options that we’ve seen.
At $49 a year, you could use this for roughly ten years before you hit the price of convert box. However, because it is WordPress focused, if you’re building your website on shopify or squarespace, you’re out of luck. You do need a WordPress website to use Elementor. In the same vein, Convert Pro is also a WordPress plugin. You’re going to need a WordPress website to use it.
And this one is not a page builder. It’s only focused on gathering leads for your business. It can do things like hello bars, you know, those messages that go across the top of the screen or other pop ups that are going to show up on your website, but it is focused on lead gathering. Pricing for Convert Pro starts at $79 a year, but the benefit here is that you can use it on unlimited websites. So if you have multiple websites, this actually is a fairly cost effective option.
You can also buy a lifetime license, which is $400. And again, you’ll get that unlimited site usage here as well. It’s part of what they call their growth bundle. So if you want to grab some other products from the same company, you can actually save a little bit of money while bundling them together. All right, to get started, I need to grab some information about this popup.
I need to know the dimensions I need to download the assets, the images, and then I’ll try to recreate them in each of the four platforms to be as pixel perfect identical as I possibly can.
Okay, so I’m in the Chrome browser right now. And what I did is I right click on the pop up. I chose Inspect and then I headed over to the network tab here. You might need to reload the page once you get here. What will happen is you’ll get a list of all of the files that are loaded on this page.
So I went ahead and sorted by images and I found the three files that I need, which are this image right here and then there’s two background patterns. I assume one is for mobile and one is for desktop. So it’s just these little textured backgrounds and we’ll use that to recreate the pop up inside of the four applications.
So I’m going to get started. Over in Convertbox, I’ll use the center modal type and let’s get building.
So, just getting going here in ConvertKit, I’ve got my background image loaded up and what I want to do is add the image of the two women on the left hand column here. One thing that I find a little frustrating about ConvertKit is that when I drop in the element to add the widget, then I still need to click over here to find my image. And then if I want to drop in an image here, when I drag and drop an image, it actually just opens up inside of a new browser. So basically this is not a drop zone. I need to click a third time here to actually open up the selector.
Not a huge deal breaker, but just mildly frustrating.
So I’m using this Chrome extension here called What Font to figure out a little bit more about the typography on this pop up. I can see that they’re using a different font for the text below the heading than they are the actual heading. This extension will also show me the size of the type in pixels as well as the color of the type.
Okay, so this is really as close as I’m going to be able to get using Convertbox. Now you can see that this really doesn’t look a heck of a lot like the original pop up and that is a little disappointing. However, it speaks to Convertbox’s strengths, actually. So the reason that ConvertKit is a popular tool is that it is not for power users. It is very easy to use and it makes it very easy to do advanced things like A B testing and doing some analytics, some integrations with other platforms.
What it falls down at is for power users, pixel perfect designers that want to recreate pop VPs on other popular websites. Exactly. It’s just not going to be well suited to that. We can go through a few of the things that are troublesome here and can maybe decide whether this is important or not to you. First of all, you can see that there is this padding all the way around the edge of the pop up, whereas you compare that to the original, and there’s no padding at all.
Now, inside of Convert box, if I edit my background, there are simply no options to change this margin. So if it’s very important to you to eliminate margins and have pixel perfect designs, ConvertKit probably isn’t the right choice. Things also fall down a little bit when it comes to custom typography. You can see that the typefaces don’t really look alike when you compare it to the original. Now, the reason for that is I didn’t spend any time trying to match it, since there simply isn’t a similar font available.
We have very limited amount of typefaces available to us. Most of them are Google fonts. But the one upside here is that you can have it inherit the website’s font family. So if you’re already using a custom font on your website, you don’t need to worry about uploading it to Convertbox. It will simply adopt that as you display the pop up on your website.
So that isn’t actually as bad of a thing as it looks like. But what isn’t necessarily so great is the fact that we have some styling options that are just missing here. So, for example, the button styling, I would love to have an outline. I think this is a very modern style for a button. Have a nice little hover and a color, simple plain button.
However, ConvertKit just does not allow for that. If I go over to my button family here, I can choose a font family, a button color, a text color, and then I have some options here for my checkboxes, which I actually didn’t style at all yet. But there are no options for hover. There’s no options to have, say, if I make the button itself transparent, which I definitely can do, I’ll see button color right here. I’ll change it to transparent, but I can’t have an outline.
There’s no outline options. So that is definitely a little bit disappointing. The same thing goes with our form here. You can see I’ve got the typical form field. The way they did it over here in the pop up was to have a single line.
So there’s basically no border on the left, right or top of this field. And I just simply can’t do that. Inside of Convert box, it’s not equipped to have that many options for styling. The upsides of Convertbox is that it makes it very easy to do advanced marketing. So I can go into my form settings here under Actions, I can have it fire a tracking script.
When someone goes to the next section. There can be conditional actions, and it integrates with a ton of different platforms. So overall, I don’t think this is a bad looking pop up. It’s just a little bit disappointing when you compare it to the original. I’m just not able to recreate it.
Next up is Optimonk, and right out of the gates, you can see they have a niches little touch here. They ask what domain the pop up is going to be used on. I entered in my demo Profitable Tools domain and they actually show it in the background so I get a feel for what the pop up is going to look like on my actual website. It’s got a nice grayed out overlay. I really like how this is going.
Unlike ConvertKit, I can in fact just drag and drop my images into their upload zone here. Makes it a lot easier to get my images up for the pop up.
An interesting feature of Optimunk is that it lets me resize the canvas for my pop up. Just dragging these little handles here on the side. So that is really nice. What I don’t like is it doesn’t give me a pixel option here so I can’t set it to be the exact width that I want. We do have two different options for images here, which is kind of interesting.
Loading images are ones that you can simply just have the image go wherever you want so I can resize the image here and have it kind of fit onto the canvas. I also just have regular images which I can drop into a column or add to the canvas directly. There’s a lot more pro options here like I can change the padding around the edges of the pop up. There’s also a layout tab here so I can see all of the elements that have been added to my popup and I can go directly to work on the one that I want. So you can see I have a two column set up here.
Each one of the columns in fact has their own padding. So I had to go through each one and find it in order to get things to go edge to edge. Now I was able to do do that, but it was certainly more complicated and time consuming than say, just dropping it in convert box and then not having to worry about anything.
We do have just a ton more options here when it comes to editing the typography. In fact, you can even upload your own custom fonts. They have a font manager so you can go ahead and choose the fonts that you want to use. It also comes out of the box with a ton more fonts. But once again, with added features comes added complexity.
I can’t simply just drag and drop some text onto the screen and consider it good to go. I need to find some way to change the margins for this to line up with this image over here.
Okay, I was able to do so. It’s fairly easy. I just went under advanced and I added some padding in order to make the spacing correct.
Changing something like the close button is fairly easy. I went ahead and changed the background color to a gray color. Now I’m going to make the radius more circular to match what we saw over on the Revelry site. I even have some vertical and horizontal alignment options for the close button. I don’t know if you’re a regular person, if you’re really going to enjoy editing the padding for each element that you add.
I think that might get a little bit annoying. I think people are probably going to want to just grab stuff and move it where they want it to go on the screen. Now, this is a little bit different than building a full website because we really just need two versions of the pop up. We need one that works on medium sized screens to large screens. So that’s going to be your desktop view.
And then we need one that works on small screens. People who are on mobile phones, we don’t really have to worry about it adapting perfectly across all screen sizes. It just has to not blow up on any of them. For the purpose of this video, I’m not going to be focusing on the mobile responsive aspect of it, but know that every single one of these applications can do what I just said. It can develop a pop up that works on desktop as well as one that works on mobile.
Just a ton more styling options here. I can change the border to just be on the bottom. I can actually change the width of this entire element so that I can have it display only where I want it to and add the perfect pixel, perfect amount of margin across the sides. So you can see right here, I’m getting a heck of a lot closer using Optimunk to the original design here than I was using ConvertKit. We’ve just got way more features.
It makes it a lot easier to get the exact design that you want to have on your website. Obviously, that makes things a little bit more complex, as I’ve already mentioned. But if you’ve ever built a website with a page builder, you’re going to be pretty comfortable right out of the gates with Optimonk. One thing that you’re not going to be getting from Optimonk until you get to the 199 per month plan is an unbranded version. I know that’s very important to a lot of people, but if you look at the pop up here, it does say made with love by Optimonk in the lower left hand corner.
So that is a little bit frustrating. The only way you can get rid of that is to upgrade to a very expensive plan. Optimunk Light ConvertKit does integrate with just a ton of different email service providers. You’ll want to check through this list and make sure that your tool of choice is on here before you go ahead and get started with Optimonk, because really, what’s the point of working with a popup builder if it doesn’t integrate with your email marketing application? For the last two plugins, I’m going to be working inside of WordPress.
That means that you can’t use these tools unless you’ve already built your website using WordPress. So let’s get started with the first one, which is Elementor. Now, Elementor is a very full featured tool because it’s meant to design entire websites. Here, we’re just using the pop up generation part of it.
Now, I’m really just getting started with Elementor here, but it’s coming together a heck of a lot quicker. One, because I’m getting more experience with what is in the form, but two, I just can act quicker in Elementor, it’s just easier to use. But I am finding that it doesn’t have quite as many features as optimunk because I can’t do things like change the border radius of my close button. I think what probably looks best here is to actually just make it a solid color and then not have a background color at all. When it comes to fonts inside of Elementor, you’re really not limited to anything.
It comes with all of the Google fonts available to you, and you can, of course, upload your own custom fonts to WordPress. That’s not a very difficult thing to do.
All right, so here we are inside of Elementor. I will say that this took by far the shortest amount of time. However, there are some limitations. First of all, you can see that the text on the Enter your email address field cannot be centered inside of Elementor. Without further coding, I’m limiting any external CSS in this video.
We’re simply using the features that are available to us. Further, I cannot choose the spacing between the items in the radio list without impacting the spacing of this form for the email because it’s all technically part of the same Elementor form. Again, I’d need some custom coding in order to do that. Not terribly difficult, but the average person isn’t going to really know where to begin here. I was able to accomplish just about everything else.
You can see we have no margins on the pop up. I have a nice hover color for my button. Everything’s looking pretty good when we compare it to the original. Elementor is no slouch when it comes to integrations. After your form has been submitted, it is very easy to connect it to a ton of different providers.
Of course, you can always use another tool like WP, Fusion or Zapier to go outside of the WordPress ecosystem and connect to even more email marketing providers. All right, let’s get started with our last tool, which is Convert Pro. I’m going to build a new modal pop up. Now, Convert Pro takes a very different approach, and I really like it. I’ve heard other people complain about it, but what it allows me to do is literally just position things exactly where I want them on the canvas.
I can resize the canvas at any time clicking this gear icon. I want this one to be about 860 pixels in width and about 506 pixels in height, much like ConvertKit, convert Pro will also inherit the global settings for your font, so you don’t have to reset them every time. Elementor will do that as well, but it’s a little bit different since it’s actually a page builder. You can have global fonts for your entire website set up inside of Elementor.
I can do things like add some rounded corners to the borders here, which obviously I don’t want for this particular pop up, but that’s something that wasn’t available to us in Convert Pro. You can also change the overlay color here. It’s not displaying what the website would look like underneath. I think that would be a very simple extra touch to add in, just like Optimonk did inside of Convert Pro, we get these more advanced features, just like we saw in all of the other builders, except for ConvertKit Box, where I can change things like the border on a side by side basis. ConvertKit didn’t let you change the borders at all in this case.
I just want a bottom border here. If I click away, you’ll see that there’s only a border on this field. Now I still need to make the background transparent.
There we go. That looks pretty good.
One thing that I do find a little irritating about Convert Pro is that as I move things around on the screen, it bops me out into another settings page that I don’t want to be in. So here I’m in the general settings for the radio button settings. I have to actually hit Done before I can get back to my styling. I decide I want to move this over a little bit. I am back inside of the general settings.
I’ve got to hit Done again. Just a little annoying.
All right, so we’re getting pretty close here. Another thing I wanted to point out that ConvertKit seems to be doing, and I’ve never encountered this before, at least not that I’ve realized. But when using a background image here, it seems to be putting an overlay over the background image, even when I don’t have one. I’ll show you what I mean. If you go into the gear settings here, I can see, hey, Oliver, my background panel here, it’s got the background image.
And if I scroll down there is the option for a background overlay. Right now, I’ve got it set to kind of a white color, and if I turn it all the way off, it looks like it’s really making that background quite dark. If I compare that to the original image here, you can see that it’s a nice, bright white background. So for some reason, I’m not able to do that right now. Inside of Convert Pro, I think I see what the problem is.
So there’s an overlay in the background, but for some reason, that’s also applying to my popup. You can see as I make the background darker, my popup also gets darker now that’s obviously not what you want to have happen. I’m actually doubting this is going to apply to the Live website. I think there’s something wrong in their preview engine. So things are looking pretty good here.
I’m sure I could refine it slightly further, but I’m really enjoying working inside of Convert Pro. I would say it’s probably one of my favorites because just like everything else in Convert Pro, if I want to add, say, a closed image, I can just drag and drop it and it goes exactly where I want it to. There’s no messing around with padding or typing in numbers on the side. It’s very intuitive for a non coder to use. So here I’ve got several images for my Close button.
If I want to just go ahead and choose that size x, I can do that. And then I can go ahead and modify the size of the Close button by simply dragging the corner until it’s the right size. So I’m able to recreate every effect inside of the original pop up inside of Convert Pro, with the one limitation being the styling options for these closed buttons. I can upload my own Close button so I could add an image and just upload it that matches the other one exactly. But there’s no way to add a background color and border radius to the uploaded buttons.
So here’s the integration list for Convert Pro. It really works with a ton of different tools, which is definitely one of the strong points if you’re using WordPress. You can probably connect your email service provider up to Convert Pro directly. So when comparing all of these tools together, I’m going to look at a few more things like A B testing. So Optimunk has A B testing available, but you have to do the $29 a month plan.
A B testing is included in ConvertKit right out of the kit. You don’t need to do anything. You can simply create an A B test. Over here, doing A B testing inside of Elementor not really a thing without third party tools. And even then it’s a little sketchy on whether or not it works.
Well, just know that A B testing is a little bit more difficult in Elementor. A B. Testing is definitely a thing in Convert pro. It functions very much like Convertbox. However, it does require a separate add on.
It is included with the package, they just don’t install it unless you want to use it. When deciding on a pop up tool, I think you want to start with, does it work with my website? Does it work with my email provider? And then we can look look at how it actually functions when you use it. After that, we’re going to look at specific features like A B testing and like this one right now, which is analytics.
It’s going to be very easy to get analytics out of Optimonk, out of ConvertKit, and out of Convert Pro. Elementor is not really set up to provide you pop up analytics right out of the gate. So that is definitely a weak side of using Elementor for popups. One of the reasons that I almost never use it for Pop VPs anywhere that I actually have to gather data, maybe we’re driving traffic and it’s important. I’ll always go with Convert Pro on WordPress for that reason.
So there you have it for pop up builders compared. Now, I think these are all great tools and if you’re already using one, you probably shouldn’t feel compelled to switch to another one. The one exception to that being if you’re only using Elementor and you’re not looking at the data, I might consider switching over to another tool just to get some more analytics. You got to love Convertbox because it’s very easy to use. It doesn’t get cluttered with too many options.
They give you a lot of great templates to start from. It doesn’t really shine in an application like this, but that doesn’t mean it’s a bad product. Besides, it’s also a lifetime deal. So it’s a good way to lock in a one time cost for your business and then just use that for many, many years to come. Optimonk definitely has the most features and the most ways to customize your pop ups.
However, it has that branding, which is probably going to be a little bit of a turn off to smaller sites that aren’t really willing to pay that $200 a month fee but still want to look like they have a nice custom design to them. Over on the WordPress side, using Elementor is quick and easy if you just need to get a pop up loaded right now and you’re already familiar with the builder, you’ll feel right at home using Elementor. But I tend to favor Convert Pro for all of my WordPress based pop ups just because I can get things to look exactly as I want on a desktop and a mobile view. And I’ve got all of the great analytics and ad testing that I’d like out of a tool such as a pop up builder. Now, there are a ton of pop up tools out there.
I’m sure I miss the one that you really love or the one that you use on your business. So leave me a comment and let me know what I’m missing. Make sure you get signed up for my free weekly newsletter. You can join the Facebook group that is also free. We’re hanging out in there chatting about software tools to grow our business.
It’s going to do it for this video. If you’ve enjoyed it, click the like button, don’t forget to subscribe, and I’ll see you in the next one.
