A Guide To Customizing The Bloom Opt-in Form

by

bloomBloom is a very powerful email optin plugin. If customized in the right way, you can actually replicate functionality that normally costs $600+ dollars a year (I’m talking about leadpages right now).

Although Bloom comes with many pre-built templates, customizing those templates can be a little tricky. In this article, I will show you how to customize your optin to stand out from the crowd of Bloom users. Most interenet marketers regard LeadPages popup box to be one of the highest converting popups available. Therefore, in this tutorial I am going to strive to replicate that design (see below).

To get started, I’ve created a “pop up” optin with the following style:

After customizing the basic values on the “design settings” tab I have the following popup:

Now, I’m going to begin adding custom css to this plugin. To do so, on the “display settings” tab scroll down to the box at the bottom.

The first thing I’m going to do is customize the “Optin Title” with the following CSS snippet:

.et_bloom .et_bloom_form_header h2 {
font-size: 42px !important;
}

Now for the optin message:

.et_bloom .et_bloom_form_header p {
font-size: 28px;
color: #444444;
}

The real customization begins with the email address field and submit button. In order to optimize the popup, I want to make both fields much larger. I’m going to use the following snippet to do so:

.et_bloom .et_bloom_popup_input.et_bloom_subscribe_email input {
font-size: 30px;
color: 444444;
width: 154.5%;
}

.et_bloom button.et_bloom_submit_subscription {
width: 100%;
font-size:30px;
margin-top: 20px;
}

Finally, I also want to customize the footer text that appears below the submit button:

.et_bloom .et_bloom_form_footer p {
font-size: 16px !important;
font-family: Lato;
text-align: center;
color: #F8F8F8 !important;
}

That is it! In terms of custom CSS, my optin now looks like this:

Of course, I have extensively changed a number of this popup’s “design settings.” If you’d like to replicate this opt-in precisely, you can download it.

Download The Customized Optin File

It’s pretty easy to import opt-ins into Bloom, simply unzip the zip file and then navigate to the “Import/Export” tab inside of Bloom. Just be sure to import the .json file.

Hope this was helpful! If you are ever looking for landing pages to complement Bloom be sure to check out the 20+ layouts available in our library.

Download

Level Up Your Website!

Get the free triangle separator pack (15+ Seprarators) emailed to you instantly! 

Check Your Inbox For Your Download

Download

Level Up Your Bottom Bar!

Get the Divi bottom bar cheat sheet emailed to you instantly! 

Check Your Inbox For Your Download

Download

Level Up Your ConversionRate!

Get the Divi byline optin plugin emailed to you instantly! 

Check Your Inbox For Your Download

Download

Increase TheEngagement On Your Site!

Get the Divi perfect blog post checklist emailed to you instantly! 

Check Your Inbox For Your Download

Download

Increase TheEngagement On Your Site!

Get the Divi perfect blog post checklist emailed to you instantly! 

Check Your Inbox For Your Download

Wistia Video

Get The Layout Of The Week!

I'll email you the download link instantly! 

Check Your Inbox For Your Download

Download

Get The File To Make A Popup like This!

I'll email you the download link instantly! 

Check Your Inbox For Your Download

Download

Get The Social Media Icon Cheat Sheet!

I'll email you the download link instantly! 

Check Your Inbox For Your Download

Download

Get The Countdown TimerCheat Sheet!

I'll email you the download link instantly! 

Check Your Inbox For Your Download

Download

Get This Guide As A PDF!

I'll email you the download link instantly! 

Check Your Inbox For Your Download

Divi Snippets

Get my best snippets in a book!

I'll email you the download link instantly! 

Check Your Inbox For Your Download