Last Updated on September 8, 2019
Bottom of Page Sticky Bloom Optin (incl. Mobile On-Click Version)
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.
{;} css code
.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! 😀
Wow! Love it, Leslie! Saved! Thanks a bunch! =)
Thanks Elisandro!!
worked …………… loved it thank you
Thanks Leslie.
I am using the Extra theme, and I imported your layout, but can’t seem to be able to select it inside the category builder. Do I have to modify the JSON file to make it work with the Extra theme?
Also,
Is there a way to do this without using the divi builder at all? Just using your bloom import + a bit of html I was able to replicate the bar (minus the text). If I could figure out how to also add the “please subscribe” text just using html/css that’d be awesome.
I’m so sorry, I don’t use Extra myself and I don’t write any tutorials or layouts for it. I’m not really sure what would be needed to make them work for Extra :/
how do i modify this to stick on the header or top part of my website?
like on this website: https://www.belindaowen.com
Thank you! 🙂
Thank you! 🙂