Monstroid2 is a recommended theme if you want to create a website with WordPress, yet have no PHP or CSS knowledge at all. It is an Elementor-based WordPress theme. Most of its parts — such as the footer and the header — can be customized via Elementor’s drag-and-drop visual interface. You can use Monstroid2 to create any kind of website. From a blog, e-commerce, online magazine, real estate website, and so on. It’s a feature-rich WordPress theme. One of the features offered by Monstroid2 is the ability to create popups.
Monstroid2 is bundled with some Elementor add-ons developed by Crocoblock. One of which is JetPopup which you can use to create popups on your website. In this article, we will show you how to create an email subscription popup on the Monstroid2 theme.
Please note that Monstroid2 only supports Mailchimp so before you continue, make sure that you use Mailchimp as your email newsletter service.
Integrating Monstroid2 with Mailchimp
On Monstroid2, there are two widgets to create the email subscription form: Mailchimp and Subscribe. The Mailchimp widget is presented by JetPopup itself, while the Subscribe widget is presented by JetElements. On the JetPopup Library (where you can create a popup from a template), you will find some email subscription form popup templates that require JetElements. So, to ease your job, we suggest you integrate both JetElements and JetPopup with Mailchimp.
- Integrating JetElements with Mailchimp
You need two components to integrate JetElements with Mailchimp: Mailchimp API key and Mailchimp list ID. Mailchimp API key is used to connect your Mailchimp account with JetElements. While for list ID, you need it to specify to which audience the email addresses entered via the email subscription form to be sent to.
A little note: list is now audience in Mailchimp
To get a Mailchimp API key, login to the Mailchimp dashboard and go to your profile by clicking your profile icon on the upper right and select Profile.
Click Extras and select API keys.
Next, click the Create A Key button to get the API key. You can copy the API key on the API key column.
To get the list ID, click the Audience menu and select the audience you want the email addresses to be sent to. Click Manage Audience and select Settings.
Scroll down to the very bottom and you will see the list ID on the Unique id for audience your audience name field. Copy this ID.
Next, login to your WordPress dashboard and go to JetPlugins -> JetElements Settings. Click the Integrations tab and paste the Mailchimp API key and the Mailchimp list ID to the respective fields on the Mailchimp section.
- Integrating JetPopup with Mailchimp
To integrate JetPopup with Mailchimp, simply go to JetPlugins -> JetPopup Settings and paste your Mailchimp API key to the available field. Click the Save Settings button to apply the new change.
Creating the popup
On Monstroid2, you can either create a popup from scratch or from a template. In this post, we will create the popup from a template. There are about 17 email subscription popup templates offered by Monstroid2.
Go to JetPlugins -> JetPopup Library to open the popup template library. Select a popup template you want to use and click the Install button. You can also preview the popup first by clicking the Preview button. To make it easy for you to find an email subscription popup template, you can filter the templates by sliding the Subscribe button.
You will be directed to the Elementor’s editor after clicking the Install button above. Open the Settings panel by clicking the gear icon on the bottom-left corner.
Open the Display Settings option and click the DISPLAY CONDITIONS button to set the display condition of the popup.
On the appearing popup, click the Add Condition button and set on which page you want your popup to appear. You can set the popup to appear on the entire site, on the specific page(s), on the specific post(s), on the specific category(ies), and so on. You can add multiple display conditions. Once done setting the display conditions, click the Save Conditions button and close the popup.
Next, open the Settings option and set the trigger type on the Open event section. In this example, we use the on page load trigger. This trigger will open the popup once the page is fully loaded. You can use other trigger type if you want.
Lastly, click the PUBLISH button.
If you want to delete the popup you have published, you can go to JetPopup -> All Popups. Hover your mouse over a popup you want to delete and click Trash.
