I’m sure you’ve been annoyed by pop up windows on other websites. But they exist for a reason! The truth is that a pop up window can be extremely effective. You can use pop ups to get visitors to sign up for your mailing list, to tell them about sales or promote specific items, or to point them in the direction of important content. Most people put them on their landing pages, but you can really use pop ups anywhere on your site. Pop up windows are super effective marketing, no matter what call to action you give them.
Why do I need a pop up window on my website?
Aside from marketing reasons, pop ups are great for content as well. I’ve used them for everything from image galleries to board member bios. It’s a great way to add content without making your page really long and boring.
How do Pop Up Windows Work?
There are basically two kinds of pop ups on websites. There are ones that activate automatically, and these are the more annoying/ common pop ups. But you can also have pop ups that appear when someone clicks a button on your site, to give them more information or content.
How to add a pop up window to your website:
Okay, so now you’ve decided that you need a pop up on your site, yeah? But how do you get one? It’s actually easier than you think. If you’re using WordPress, there are some great plug ins that make it easy to add a pop up.
How to add a pop up window to your website using Divi:
If you’re using Divi like I do, I use and recommend the “Popups for Divi” plug in. It’s super easy to use. Once you install & activate it, a new feature will appear when you build a section in Divi.
1. Add a pop up as a section:
Add or edit a Divi section so that it’s now a pop up. To do this, open the section and click on the new ‘pop up’ tab at the top of module. Under “general,” click “this is a popup.”
2. Give your pop up an ID:
Right under the “this is a popup” toggle is a box labeled “popup ID.” This gets into some code and CSS a bit, but luckily, you don’t really need to know that because Divi and the plugin do all of that for you. Put a tag in that box that will easily identify the pop up window. Just be aware that, because it’s code, you can’t use any spaces. Use a – or _ dash instead. For example, if it’s a pop up of a bio, I’ll use the person’s name, like chris-cadalzo. Or if it’s an optin, I’ll use opt-in-box. Make sure it’s specific and each one has its own unique name.
3. Style your pop up:
Use the Divi builder to style your pop up however you want. You can add rows and whatever modules you need to build your window. If it’s a bio, I usually add an image and text module. For a portfolio, I’ll add an image gallery. And for marketing pop ups, I usually add an opt in form so people can subscribe to the email list.
4. Connect your pop up to a button:
So, now you have your pop up all set, but how do people open it?? This comes back to the code and CSS from step 2. Take your popup ID and add it as the link in your button. The magic comes in from adding in the hashtag (pound sign, if you’re from the 80s!) at the front. In CSS code, adding that # symbol turns it into a link on the same page.
That’s it!! Now that you know how to add pop ups to your website, you can get creative and find lots of ways to use them.
