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.

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;
}

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

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.