Using Bloom for an Image or Text Pop Up with a CTA Button

Jul 1, 2016 | CSS Tutorial | 53 comments

I posted about using Elegant Theme’s Bloom plugin to make a pop up with no signup in the Facebook groups and a few people asked how to do it. I realized instead of my answer getting lost in the weeds I should make a quick blog post that can be bookmarked.

All I’m doing is hiding the email fields, nothing fancy, and while hiding elements isn’t really considered the best practice at achieving something I think in this case it’s a better option than adding a whole new plugin if you’re already using Bloom. I’m no blogger/writer and I just wanted to keep this simple so bear with me 😛

UPDATE: Bloom now has an HTML option that I haven’t played with but it may replace this tutorial, you might want to check it out. This will still work, just sayin.

Instructions

  • Start a pop up optin.

  • Add your account info, etc., etc…

  • Select the second template. You could select any template that has the image at the top really, but the second one is right there so… 😉

  • If you want text and/or an image add your text and upload your image.

  • To add a button go to one of your pages and start a new text module (it won’t be saved so it doesn’t really matter where you put it). Go into text mode and paste this code, remember to change the URL and the button text to your liking.

</> html code

<a href="theentireurlhere">Read More</a>
  • Switch back to visual mode and copy your highlighted text

  • Paste your copied text in the editor in your bloom optin settings

Add the CSS

  • Now the Bloom CSS! Copy and paste the code below into the custom CSS panel of your newly created optin
  • **IMPORTANT** The number of your optin needs to be replaced in the CSS. If this is your first optin created on your site the number will be 1, if it is the second the number will be 2, and so on. You can just try numbers 1-x and test, it will probably be quicker if you have more than one optin

{;} css code

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding: 0 !important;
}
.et_bloom .et_bloom_optin_4 .et_bloom_form_content {
    display: none !important;
}
.et_bloom .et_bloom_form_container a {
    padding: 6px 12px !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    background: #1d1d1d;
    border-radius: 3px;
    transition: all 0.2s;
}
.et_bloom .et_bloom_form_container a:hover {
    color: #1d1d1d !important;
    background: #15bf86;
}
.et_bloom .et_bloom_form_header p {
    margin-bottom: 15px !important;
}

Notes

  • Preview will not recognize the CSS so don’t think it’s not working, publish it first to see.
  • The very first bit of code is just to take away the padding. I found I didn’t like the padding for my pop up but you may want it for yours.
  • I did not comment out my CSS because Bloom removes the pretty stacked formatting and it would look like a jumbled mess after saving. Sorry, I know that would have been helpful for some.
  • Anything using the !important rule was attempted without using it first, so if it’s being used it’s because it has to be.
  • Why not just use ET’s inherent button class so that it would take on the look of the button settings in the customizer? I tried, but without the !important rule on some of the selectors the class would not apply, so I went this route of using the Bloom a class instead. You’ll have more control over the look now anyway so that’s a plus.
  • What about making the image clickable? Honestly that’s a bit trickier and not exactly in my wheelhouse, but if anyone would like to post a way in the comments I’ll be happy to update this post and credit you.
This is the pop up that will be made

This is the pop up that will be made

I've added a link button (idea courtesy of a guy named Steve who commented) 

Read More

You have Successfully Subscribed!