How to Add Bloom Widget to the WordPress Sidebar

Most of you probably already know that it is possible to add the Bloom plugin email opt-in box to your sidebar as a widget. In this article I will explain how to do it and how to use some custom CSS code to debug its position.

 

 

I suppose you already own the Bloom plugin license. If you own the Elegant Themes “Developer” or “Lifetime Access” license, you can download it from your ET dashboard. So just download it and install it on your WordPress website.

Then in your WP admin panel go to Bloom > Optin Forms and create a new optin. Select “widget” as the type of your optin. Give your new optin a name and configure your email marketing provider (I use MailChimp) – select your account and your email list. In the next step design your optin. I have chosen no image in the image settings and I also wrote my optin’s title and message. Don’t forget to preview your new optin before you click “Save & Exit“. You can preview it by clicking the blue button on top right corner.

To add this Bloom opt-in that we have created to the sidebar, we will have to go to Appearance > Widgets and drag & drop the “Bloom“ widget to your sidebar. Click on the small arrow on this widget and give a title to this widget and select your Bloom optin’s name. I have left the title blank. Now preview your website and you should see your Bloom optin box in your sidebar.

If you are not happy with its vertical position, like I was, go back to your Bloom optin form design setting and scroll down to “Custom CSS“. Here you can enter some custom CSS code for your Bloom form. I needed to move it a little higher, as there was too much space above it, so I used the following code:

.et_bloom .et_bloom_form_container_wrapper { margin-top: -30px !important; }

You can play with the margin value and see what works for you.

And you might also like to check out my other tutorial on how to add a CTA button to you sidebar or a guide on how to add email subscription boxes to your website with Bloom.

I hope you will find this article helpful. :)

For more Divi tutorials like this one, you can subscribe to my newsletter.