To add the popup we’re going to use the Spectra Page builder plugin.
It’s a great addition to any WordPress website and includes an easy to use popup builder.
Here’s what to do. You’ll find more details in the video.
Add a Popup to WordPress
1. Install the Spectra Plugin
You can easily add the plugin from within the plugin section in the WordPress dashboard.
- Click Add New
- Search for ‘Spectra’
- Click Install
- Click Activate
2. Create your Popup
You’ll find the popup builder in the Spectra options down the left side.
- Click on Popup Builder
- Click Create Popup
3. Choose the Popup type
You have the option to create a simple bar across the top of your site, although you’ll probably want to go for the more traditional overlay style popup.
4. Create your Popup
You’re now ready to create your popup. The popup builder uses the block editor so it’s very easy to do.
You can drag and drop any blocks you like into the popup.
To see exactly how I create my beautiful popup, be sure to watch the video.
If you want extra options like the ability to set when and where the popup displays, I suggest you upgrade to Spectra Pro.
You’ll probably want to add a form like I have.
You can use any form plugin to do this, like Gravity Forms or WPForms as both of these can connect to a wide range of popular email marketing platforms, like Mailchimp.
In the video, I use WPForms.
Add a Form to your Popup
1. Install the WPForms plugin
Install the WPForms plugin in the usual way from the plugins sections.
- Click on Add New Plugin
- Search for ‘WPForms‘
- Click Install
- Click Activate
2. Create your form
Once activate you should be greated with a welcome screen. Click the big orange button to create your first form.
if you don’t see this page you can find the option in the WPForms section in the left side menu.
3. Choose a template
WPForms has loads of templates. The newsletter signup one is perfect for a popup.
Give it a click.
4. Customize and Configure your Form
You can now customize your form.
I like to do the following to give it a sweet look…
- Make the field size large
- Turn off the all the labels
- Add some placeholder text
I do this on all the fields.
Click Save when you’re done.
5. Connect your form to your email platform
In the marketing sectiojn within WPForms you can connect your form to your email marketing platform.
If you’re not using constant contact you’ll need to upgrade to WPForms Pro.
6. Add your form to your Popup
Go backinto the Popup builder and edit your popup.
Insert a WPForm block to add the form.
For more flexibility, add the block inside a container block.
And that’s it. Make your final adjustments, and you should be ready to go.
Remember, there are more details on my exact process in the video above.
How did it go? Let me know ⬇️
I hope you were able to get your popup working quickly and easily.
Let me know in the comments how it went! I read all the comments I get.
Leave a Reply