DIVI and Bloom Transparency

DIVI and DIVI Extra are wonderful software from the team at Elegant Themes. The theme allows high level Drag and Drop development of websites.

One excellent feature you get with DIVI subscription is you also get to download all other plugins from Elegant themes that adds functionality to DIVI.

Bloom is one of those Plugins. It will help you build an email list with an e-mail Optin form, that can be placed as a pop-up or fly-in, and even In-line with your pages.

Bloom Email Optin Plugin

“Disclosure: Some of the links in this post are ‘affiliate links.’ This means if you click on the link and purchase the item, we will receive an small affiliate commission.”

For this tutorial we going to focus on the in-line Bloom Optin.

As default Bloom admin area allows you to make an Optin with a background and standard images. Though attractive as is for those who just want to get up and running. However in many cases, you may want more design functionality.

So making the optin form transparent will allow you to use DIVI own frontend editor to make changes to how and where the optin on you page is displayed.

[NOTE: you can use the Tutorial below to directly add to Style sheet in DIVI parent theme, HOWEVER we strongly suggest to use CHILD theme. We have a full tutorial how to easily make a child theme see the link: How to make a Child Theme Easily]

 

So lets begin to make the bloom transparent.

Step 1: Login to your WordPress admin and create a new Optin

Step 2: Within the Bloom Admin Select New Optin

Step 3: Select OPTIN TYPE

After that select a Optin Type. There are currently 6 Optin Types, and this method should work with all layouts. For this tutorial, we will be using the Inline Type, as it allows you to place the Optin in any place on a page.

 

Step 4: Select a suitable template for your OPTIN.

 

Step 5: Remove Text in OPTIN

Now, remove all the text in the OPTIN TITLE and OPTIN MESSAGE area. You will be able to add these text or any other text on the page using DIVI builder, so you do not need it here.

As you will have far more flexibility with the DIVI builder.

Below that you can now choose to make other changes within the OPTIN STYLING, FORM SETUP and FORM STYLING.

But most important here is under the FORM STYLING>Form Background color you notice there is no transparency option. So just click Clear, to ensure no colors are picked, as using CSS code we will make it transparent.

 

After you have finished customizing the content of the form at the bottom click Generate Code, which will generate a shortcode, and Save it, as you will need it in the next steps

Then click Save and Exit

From now on we will begin some technical steps.

Step 5: Add the code to style sheet

Add the below code to your Child These style.

You will find the style sheet by going to Admin > Appearance > Editor > Style

Step 6: Insert Code in the style sheet

Example image is below and cut and paste the code as below

Custom code:

copy and paste exactly the CSS code below into the Child Theme Stylesheet.

/*----------------------------------------------*/
/*-----Divi Bloom Transparent Optin by Riseink -----*/
/*----------------------------------------------*/
/*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 Divi Bloom Transparent Optin by Riseink---*/
/*----------------------------------------------*/

 

If you want your buttons and form fields to also be transparent then add this CSS code as well in the stylesheet.

  • /*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;
  • }

Here’s the complete CSS:

COMPLETE CSS
/*----------------------------------------------*/
/*-----Divi Bloom Transparent Optin by Riseink-----*/
/*----------------------------------------------*/


/*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 Divi Bloom Transparent Optin by Riseink ---*/
/*----------------------------------------------*/

 

Step 7: Add Optin Form on Website page/Post

You can use 2 modules to insert the OPTIN form you created earlier.

a) DIVI Text Module

b) Code module

If using a Text Module make sure you select the Text Tab on the Divi module

I suggest you use the Code Module to insert the OPTIN shortcode.

Step 8Now lets make it transparent with ease.

Click on the Custom CSS at the top next to the Advanced Design Settings.

And insert the custom CSS ID

Then Save and Exit.

Congratulations !

You now have a transparent OPTIN, and now you can use DIVI builder to customize the Row, and add other content like images, social media links and so on.