Q10: Create a Transparent Bloom Optin

by | Jan 15, 2017 | Bloom, Quick Snacks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: Create a Transparent Bloom Optin Form

 

The other day I was asked how to make the Bloom optin form transparent. Bloom is notoriously difficult to target but thankfully I had done this just the day before for an optin layout that will be available in my soon to open Divi Membership Club.

Here is a quick snack to get your optins transparent!

So let’s get cooking!

ingredients

The Bloom Plugin from Elegant Themes

cooking-time

This should take you around 5 minutes max.

preparation

Let’s set up our optin. 

In Bloom, add a new optin and after setting your list, select your layout type. I am using the inline form but this should work with any of the layouts.

I’ve chosen the first design as I want my form fields to be at the bottom.

Create a transparent bloom optin form

 

Remove the title and message text, I always find it’s much easier to add any text you want within your actual module as the styling options are more flexible.

Now you can change any settings you want, but you don’t need to touch the Background Color or Form Background Color fields as these are what we are going to make transparent. You will notice in those fields, unlike the Divi colour pickers, they don’t have the transparency option and you can’t insert an RGBA value 🙁 .

When you’re finsihed, at the bottom right of the page, grab your form shortcode and then save & exit.

Create a transparent bloom optin form

method

 

Now let’s add our form. Add a new text module wherever you want your form and paste in the shortcode you grabbed from Bloom.

Create a transparent bloom optin form

 

If you preview your page your form should look something like this (I have added a background image and 30px left and right padding to the module so you can more easily see the difference).

So what we need to do is get rid of that grey form background colour and also hide the header container as we are not using it.

Click on the Custom CSS tab in your text module and give it a CSS ID of ds-transparent-optin then save & exit. We are using an ID rather than a class to make it easier for us to target the form.

Create a transparent bloom optin form

 

Now copy and paste the following CSS into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box. The CSS has comments so you can see what each section is doing.

/*----------------------------------------------*/
/*-----Transparent Bloom Optin by Divi Soup-----*/
/*----------------------------------------------*/


/*Hides the header container*/
#ds-transparent-optin .et_bloom_header_outer {
    display: none;
}


/*Removes form container background colour*/
#ds-transparent-optin .et_bloom_form_container {
    background: none !important;
}


/*Removes form background colour and sets padding*/
#ds-transparent-optin .et_bloom_form_content.et_bloom_bottom_inline {
    padding: 0;
    background: none !important;
}

/*----------------------------------------------*/
/*---End Transparent Bloom Optin by Divi Soup---*/
/*----------------------------------------------*/

 

Now preview your form and it should look like this (without the background image).

Want your form fields and button transparent too? No problem, just add this additional CSS and adjust borders as required…

/*Set the input field and button transparency and border*/
#ds-transparent-optin input, #ds-transparent-optin button {
    background: none !important;
    border: 1px solid #ffffff !important;
}

 

Now you should see something like this, you’ll obviously need to set a background image to get the full effect.

Here’s the complete CSS:

Complete CSS
/*----------------------------------------------*/
/*-----Transparent Bloom Optin by Divi Soup-----*/
/*----------------------------------------------*/


/*Hides the header container*/
#ds-transparent-optin .et_bloom_header_outer {
    display: none;
}


/*Removes form container background colour*/
#ds-transparent-optin .et_bloom_form_container {
    background: none !important;
}


/*Removes form background colour and sets padding*/
#ds-transparent-optin .et_bloom_form_content.et_bloom_bottom_inline {
    padding: 0;
    background: none !important;
}


/*Set the input field and button transparency and border*/
#ds-transparent-optin input, #ds-transparent-optin button {
    background: none !important;
    border: 1px solid #ffffff !important;
}

/*----------------------------------------------*/
/*---End Transparent Bloom Optin by Divi Soup---*/
/*----------------------------------------------*/

 

And that’s it. 

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

     

Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!