This Divi freebie makes a skinny Bloom signup that sticks to the bottom of your site. This feature can be great for conversions and it’s not terribly intrusive or too distracting (depending on your colors I guess).

This includes the 2 Bloom optins (desktop and mobile) and their sections that you can add through your library. Be sure to read my notes at the bottom of this post if you already have Bloom optins on your site.

Install the layout

• Go to your Divi Library Import & Export choose Import and locate the .json layout file from your UNZIPPED folder and upload it.
• On your page add both the desktop and mobile sections to the bottom. You may want to make them global if you want them to show sitewide OR try using the Page Builder Everywhere Divi plugin if you want to inject it sitewide much faster than manually (not an affiliate link, I just think it would help).

Install the Bloom optin

• Go to Bloom Optins look for the 2 arrows and click import the Bloom .json file in your folder and upload. Don’t forget to set up your email service and activate the optin.

Adding the CSS

• The following CSS can go in your Divi options panel or child stylesheet.

.et_bloom .et_bloom_inline_form {
    margin: 0px !important;
}
.et_bloom .et_bloom_optin_2 .et_bloom_form_container .et_bloom_form_header {
    display: none;
}
.et_bloom .et_bloom_optin_2 .et_bloom_form_container .et_bloom_form_content {
    padding: 10px 15px !important;
}
#bloom-sticky-desktop,
#bloom-sticky-mobile-tablet {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
}
.et_bloom .et_bloom_optin_2 .et_bloom_form_content button {
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
/*** CHANGE YOUR BUTTON HOVER COLOR - OPTIONAL ***/
.et_bloom .et_bloom_optin_2 .et_bloom_form_content button:hover {
    background: #7c8d9b !important;
}
/*** CHANGE YOUR BUTTON FONT - OPTIONAL ***/
.et_bloom .et_bloom_form_container .et_bloom_form_content span,
.et_bloom .et_bloom_form_header h2 {
    font-family: 'Cantata One', Georgia, serif !important;
}

Notes

• If you already have Bloom optins on your site in the CSS where it says “.et_bloom_optin_2” the 2 might need to change after import. If you see that the CSS is not being applied check the shortcode in Bloom and compare it to the CSS, change that number accordingly. Only the desktop optin has a shortcode, the on-click optin does not and you shouldn’t need to worry about that one.
• For mobile if you know how to integrate Font Awesome or ET’s icon font you could add an icon before the text, you could use a blurb module instead of a button, you can tweak this several ways to suit your needs. Play with it! 😀