Resources by A Girl and Her Mac
  • Divi Stuff
    • All Resources
    • CSS Tutorial
    • Free Layout
    • WooCommerce
Select Page

Last Updated on September 8, 2019

Bottom of Page Sticky Bloom Optin (incl. Mobile On-Click Version)

Nov 8, 2016 | Free Layout | 8 comments

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.

Free Divi Layout | A Girl and Her Mac
View DemoDownload

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).

Screen Shot 2016-08-05 at 6.24.44 PM

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.

Screen Shot 2016-08-05 at 7.07.28 PM

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! 😀

8 Comments

  1. Elisandro
    Elisandro on November 8, 2016 at 10:18 pm

    Wow! Love it, Leslie! Saved! Thanks a bunch! =)

    • Leslie
      Leslie on November 19, 2016 at 2:29 pm

      Thanks Elisandro!!

  2. Ekta
    Ekta on March 2, 2017 at 9:58 am

    worked …………… loved it thank you

  3. Alex
    Alex on May 11, 2017 at 12:46 pm

    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.

    • Leslie
      Leslie on May 15, 2017 at 7:12 pm

      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 :/

  4. aide
    aide on April 11, 2018 at 2:56 pm

    how do i modify this to stick on the header or top part of my website?
    like on this website: https://www.belindaowen.com

  5. kesly13
    kesly13 on November 4, 2019 at 9:00 pm

    Thank you! 🙂

    • Leslie
      Leslie on November 6, 2019 at 10:48 am

      Thank you! 🙂

  • A Girl and Her Mac
  • All Resources
  • Woo Styling
  • Free Layouts
  • CSS Tutorials
Resources by A Girl and Her Mac   —   This site does have a few affiliate links   —   The Fine Print

Read next article ...

Coming Soon Layout - Background Hero Slider with Bloom

Read previous article ...

Blog Grid with Categorized Colors (Background or Top Border)