After a couple of hours of hit and trial, I finally made it and you can see the popup in action live by either clicking the button below or on the homepage.
I search the internet and none of the articles were accurate and to the point, like its all written for developers. So, I thought to make a tutorial on this that’s easy to understand and quite beginner friendly. Following this tutorial, you can easily display any popup you make using the Bloom plugin when a button is clicked anywhere throughout your WordPress blog with any theme.
Most of the posts online will tell you to install Divi builder for this one simple task. However, through this post, you’ll learn that this is possible with virtually any WordPress theme you have, You don’t even need to have a page builder plugin. seriously.
Let’s start by creating a popup optin form (if you already have a popup optin form, click on the select trigger section)
Step 1 Create Optin Form (Popup Type)
Firstly, go to your Bloom dashboard and click on new optin button.
Then select the popup type from the optin type menu. You can also select fly-in type as it supports the button trigger.
Now give a name and connect your optin form with an email marketing service by clicking on email accounts settings. Click next and select a template for your optin form. Once you select a template, start designing your form by adding images, content upgrade, lead magnets and information about your newsteller.
Click on the next “display settings” button.
That was the designing step. Now move to the next step.
Step 2 Select The Trigger “On-Click”
In the “Load-in” settings, uncheck every other trigger option and select trigger “on click“. When you will select the on click trigger, al new field will appear named “CSS Selector (string)”.
In the CSS Selector string field type:
Scroll down to “display on” settings, and select the everything option. By doing this your popup will appear everywhere when the trigger button is clicked no matter if it is in a post, page or in a sidebar or in a different category.
Remember to uncheck every other trigger and make sure the time delay trigger is also unchecked.
That’s it for the trigger step. click save and exit button and move to the third step.
Step 3 Use This Code To Display A Button Anywhere
Now edit any of your post or page where you want to show the button. Open the text editor and not the visual editor. In the text editor, copy and paste this code:
<a id="popup" class="button" href="#" rel="nofollow"> My Optin Form </a>
*You may change the highlighted text with your original call to action.
If you want to show the button in your sidebar, go to WordPress widget menu and add a new text widget in the sidebar. Copy/Paste the same code in the widgets text editor.
Preview the post or page. Your button should be there like this:
Depending on your theme and its style sheet, the button will change automatically whenever you change your theme or your plugin. It’s totally independent of any external CSS and will never get lost.
Also note that this same process can be implemented in any optin form plugin which supports CSS Class string. Bloom has a great interface and set of optin templates that’s why I use it. Rest of the process remains the same.
I shared this with you to help you save your time because I wasted more than 5 hours figuring how to do this, I hope this tutorial has helped you.
So, it was that easy to create a button and set your popup to appear when its clicked anytime, anywhere. Share this post and let me know your experience in the comments section below.