Hey there Divi people! This is John from Divi Ready Themes. In this tutorial, I’m going to show you how I create those beautiful, custom Bloom Inline Email Optin modules.
When I first started designing Divi Layout Packs, I used javascript to get my inline optins to work – but they kept breaking with every few Divi updates. Then I discovered Bloom, and found a way to get the look I want with a little design and CSS. You can stick these guys wherever you want and they look great.
You’re going to need the following to create these email optins:
- Bloom Installation
- Photoshop (or your favorite photo editor)
- CSS Code (below)
/* Bloom Transparent Background */
.trans-module .et_bloom_form_content {
background: transparent !important;
}
.trans-module .et_bloom_header_outer {
background: transparent !important;
}
.trans-module .et_bloom_form_container {
background: transparent !important;
}
.trans-module .et_bloom_form_header {
background: transparent !important;
}
.trans-module .et_bloom_form_content:before {
opacity: 0 !important;
}
So, let’s get started.
First, we are going to design the Bloom optin. Go into your WordPress administration. Click on ‘Bloom’ and then click ‘New Optin’.

From the selection of optins choose ‘Inline’ You will then be brought into your setup optin form.

You will then be brought into your setup optin form. Let’s give our optin a name. Next let’s choose our form integration, Select your email provider from the dropdown list. Then select your account, and then finally your email list. When that is completed let’s click on ‘Design your Optin’.

Next you will be presented with a list of templates. It doesn’t matter which you choose, because we will be getting rid of most of the information anyway. So the first one should work perfectly. Click the template then click ‘Next Customize’.

You should now be on your “design your optin page”. Remove the information from the optin title and the optin message.

Go down to ‘Image Settings’ and choose ‘No Image’.

In the optin styling section, I usually remove any background colors by clicking ‘Select Color’ and then ‘Clear’. Do the same in the ‘Form Styling’ section, choosing the form background color and clicking clear. Choose your button color and button text, and click ‘Save and Exit’.
Once you save and exit you will be presented with your list of optins. Your new optin should be listed. If you click the brackets next to your optin name, it will show you the shortcode for your optin. Let’s copy that, because we are going to need it later.

Now let’s create our optin page. Let’s go into your WordPress Admin, ‘Pages’, ‘Add New’. I’m just going to name mine ‘Email Optins’. In the Divi Page settings lets choose ‘No sidebar’. Click the ‘Use Divi Builder’. Let’s go ahead and save that because we will be working in the visual builder.

Now in the visual builder, we are going to add a regular section with a row with one column.

We will be inserting the code module into this row. In the code settings under ‘Content’ add the short code that we copied from the Bloom Module and save your changes.

Your Bloom optin should now appear in the section. Notice that even though we cleared the values for the background colors, they are still showing up. This is where the CSS comes in.

Take the following code and copy it into your additional CSS section.
/* Bloom Transparent Background */
.trans-module .et_bloom_form_content {
background: transparent !important;
}
.trans-module .et_bloom_header_outer {
background: transparent !important;
}
.trans-module .et_bloom_form_container {
background: transparent !important;
}
.trans-module .et_bloom_form_header {
background: transparent !important;
}
.trans-module .et_bloom_form_content:before {
opacity: 0 !important;
}
Let’s go back to our Bloom optin, we are going to enter in a CSS class “Trans-Module”.

You will now see that all background colors from your module have been removed. So now we need a background picture for our section. Click the gear icon in your Section Settings, go to ‘Background’ and add a background image. Now our email optin is starting to take form. Save your changes.

Let’s add a text module and put something to attract our customers. Let’s drag our text module so it sits above our email optin. Next let’s give our text a little styling so that we can see it on top of the background.

Last thing we need to do is take care of some spacing issues.

Let’s go into our code module settings ‘Design’, ‘Spacing’ and let’s get rid of some of that extra spacing on top and bottom of the form. Chain the Top and Bottom Custom Margins and enter a value of -80px. That looks a lot better. better.

Finally, let’s adjust our section margins and we’re done! Now if we save the section to the library we can use our new optin on any page of the site.

And that’s it! Hope you enjoyed this video, if you did, please like and subscribe.This is John from Divi Ready Themes, I’ll catch you on the next video.
My Optin Bloom does not appear after placing the code, the space remains blank. Why? I need help, urgently!:(
Jen:
Go into Bloom > Optin Forms and check to see if your form is Inactive. Make it Active and it should work. Give it a try.