5 original ideas to customize the Bloom popup!

This article will show you that it is not difficult to customise the Bloom popup.

I offer you 5 original ideas to modify the design of your Bloom optin popups in order to optimize the conversion rate and get more subscriptions to your newsletter!

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is Bloom?

It is perhaps worth recalling what is "Bloom ? This sometimes unknown plugin is nevertheless a very good optin plugin for WordPress !

Indeed, it allows you to link a registration form to your newsletter provider .

In other words, Bloom is a plugin that allows you to retrieve the email addresses of your visitors and store them in your email marketing lists such as MailChimp, SendingBlue, MailPoet etc.

It is also necessary to clarify two important things:

• Bloom is a premium plugin included in the Divi license. If you have subscribed to a license Elegant ThemesYou can download it from your account and use it on an unlimited number of sites.
• Bloom is compatible with any WordPress theme! You don't have to use this plugin only on your Divi sites.

2 - Why customise Bloom?

Bloom's settings already offer many design options.

Whether it is the display of the popup or its appearance, Bloom allows you to choose the images, the colours, the type of appearance, the animation etc...

But is it still enough? Aren't you tired of seeing those pop-ups when you're just visiting a website? As soon as you arrive on the site, you are "jumped on" to sign up for the newsletter. As for me, I click on "close" if I really want to read the rest, or if the content is not interesting, I leave the site... And if everyone does like me: what should I do?

How do you get your readers to email you and then convert them into leads and then into customers if you are "good"?

Email marketing still has a long life ahead of it if you believe everything you read on the subject and if you notice that all the current sites are indeed equipped with a newsletter registration form...

So how do you get that coveted email? And why would the Internet user entrust it to you rather than to another site?

Each site tries to do its best: some encourage readers to subscribe in exchange for a Lead MagnetOthers offer really exciting content and readers are bound to sign up!

What if you offered both? What if, in addition, your popup was really original, attractive, inciting, pretty? What do you think the Internet user would do? Would they be tempted?

Here's a good idea: customize the Bloom popup to increase the conversion rate!

3 - Creating a Bloom optin form: general case

Before looking in detail at the examples of custom popups, I'd like to take a quick look at the creation of a Bloom optin form. We will need some of this information in the customisation explanations that follow...

3.1 - Step 1: Choose the type of popup

Once you have installed the Bloom plugin, you can start creating your first optin form.

To do this, go to the Bloom > Optin Form tab and click on "New Optin.

For the following customisation examples, I suggest using the "POP UP " type (top left).

Confirm your choice by clicking on "Next: design your optin.

3.2 - Step 2: Connect the form with your provider

The next step will allow you to connect the Bloom opt-in form to your "provider", i.e. your "newsletter sending solution" (MailChimp, Sendinblue, MailPoet etc.).

This step is mandatory to validate your form.

It is thanks to this connection that you will be able to retrieve the email addresses of your visitors in order to store them in your email marketing lists.

Once your connection is established, validate your choice by clicking on "Next: design your optin.

3.3 - Step 3: Choose the design of the popup

At this stage, Bloom offers you to choose a design "template" for your popup.

Although there are many choices, these popups all look the same... That's precisely why I'm offering you this tutorial, by the way...

For all the customisation examples that follow, choose the first template (top left).

Then validate your choice by clicking on "Next: customize.

3.4 - Step 4: Set up the popup design

Step 4 allows you to set up the "design" tab. Here you will find several parameters that can vary according to your needs and the purpose of the customisation:

1. Enter the 'catchy' title of your optin.
2. Upload your image if you need to (this will not be the case for all the customisation suggestions below).
3. Add an image animation if necessary.
4. Set up the display of the form fields (colours, layout etc.).
5. Define a "success message": this will appear when the visitor has submitted the form.
6. Confirm your choice by clicking on "Next: display settings.

3.5 - Step 5: Other settings

In the "Display settings" tab , you will find several options for displaying the popup.

Read the options carefully and make your choices: you can come back to them later if necessary.

Confirm your choice by clicking on "Next: successful action.

3.6 - Step 6: Success message and validation of the popup

Finally, you will arrive at the last step where you just have to click on "Save & Exit" to save your popup.

4 - Original ideas for customising the Bloom popup

Now that we have recalled the steps to create the form, I propose 5 original ways to easily customize the appearance of your Bloom popup with CSS only. This means that a beginner will be able to do it without much knowledge of code.

4.1 - Bloom Customization #1: Offset Image

Here is a nice popup...

You'll tell me: "I don't really see how this popup is original...".

However, this is what it would look like without customisation:

I propose, then, these few lines of code to allow the image to be shifted and to exit the popup:

1 - CSS to shift the image up and to the left :

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -100px;
    left: -100px;
}

2 - Make visible everything that is "outside the frame":

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

3 - Add a margin on the left to offset the text and avoid it being hidden behind the image:

.et_bloom .split .et_bloom_form_text {
    padding-left: 25% !important;
}

4 - Add a little margin at the bottom of the text so that it is not "stuck" to the fields:

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding-bottom: 30px;
}

Here is the final code I used to get this result (copy and paste into your style sheet or directly into the Appearance > Customise > Additional CSS) :

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -100px;
    left: -100px;
}

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

.et_bloom .split .et_bloom_form_text {
    padding-left: 25% !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding-bottom: 30px;
}

I would like to point out that the offset image (the one of the gift) was inserted during the bloom setting (step 3.4 - tab 2 of this article).

Of course, feel free to modify this code according to your needs and projects...

4.2 - Bloom Customization #2: Gradient/Opacity Background

This other bloom customisation is similar to the previous one, except that I changed the background colour with a gradient colour... This brings a nice effect which changes the anthracite background that we see everywhere...

This is what the popup would look like without these customizations:

To get this result, you just have to get all the CSS code of the popup n°1 and add a gradient-transparent background:

.et_bloom .et_bloom_popup::after {
background: rgba(255,93,177,1);
    background: -moz-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,93,177,1)), color-stop(100%, rgba(167,3,237,0.4)));
    background: -webkit-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
    background: -o-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
    background: -ms-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
    background: linear-gradient(to right, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#a703ed', GradientType=1 );
}

To get the right CSS code for your gradient and transparent background, you can use this site which offers a gradient generator in CSS.

4.3 - Bloom Customization #3: background image

I wonder if this customisation of Bloom would be my favourite... It's a change from the popups we're used to seeing!

The popup is transparent and the background, usually anthracite-opaque, has been replaced by a background image.

This is what the popup would look like without the CSS code below:

Here are some explanations:

1 - Add a background image :

.et_bloom .et_bloom_popup::after {
    background-image: url("placez l'URL de votre image");
}

Note that this image was previously added to my media library and that I have retrieved its URL.

2 - Make the background of the Bloom popup transparent:

.et_bloom .et_bloom_optin div{
    background: transparent !important;
}

Here is the final code I used to get this result (copy and paste into your style sheet or directly into the Appearance > Customise > Additional CSS) :

.et_bloom .et_bloom_popup::after {
    background-image: url("placez l'URL de votre image");
}

.et_bloom .et_bloom_optin div{
    background: transparent !important;
}

I would like to point out that no image has been inserted in the settings of the bloom popup (step 3.4 - tab 2 of this article).

4.4 - Bloom Customization #4: background image + background image

This customisation is a variant of the previous ones... This is what the popup would look like without the added CSS that you will find next:

Explanation:

1 - Add a background image (get the URL of the image previously uploaded to your media library). In this case, this image is the semi-transparent background with the raindrops.

.et_bloom .et_bloom_popup::after {
    background-image: url("placez l'URL de votre image");
}

2 - Make the background of Bloom's popup completely transparent (and without shadow):

.et_bloom .et_bloom_optin div{
    background: transparent !important;
    box-shadow: none;
}

3 - Make visible everything that is "outside the frame":

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

4 - Shift the image (of the cloud) so that it is behind the fields:

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -100px;
    left: 0px;
    z-index: -1;
}

5 - Enlarge the size of the image (cloud) if necessary:

.et_bloom .et_bloom_form_header.split img {
    max-width: 100%;
}

6 - Changing the margins and alignments of the text and the form :

.et_bloom .et_bloom_form_container .et_bloom_form_content {
    padding: 0px;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding: 0px;
}

.et_bloom .et_bloom_form_header h2 {
    text-align: center
    padding-left: 10%;
    padding-right: 10%;
}

Here is the final code I used to get this result (copy and paste into your style sheet or directly into the Appearance > Customise > Additional CSS) :

.et_bloom .et_bloom_popup::after {
    background-image: url("placez l'URL de votre image");
}

.et_bloom .et_bloom_optin div{
    background: transparent !important;
    box-shadow: none;
}

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -100px;
    left: 0px;
    z-index: -1;
}

.et_bloom .et_bloom_form_header.split img {
    max-width: 100%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
    padding: 0px;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding: 0px;
}

.et_bloom .et_bloom_form_header h2 {
    text-align: center
    padding-left: 10%;
    padding-right: 10%;
}

4.5 - Bloom Customization #5: Gif + background colour

I think this popup is great! It's just that I've rarely (if ever) seen a newsletter signup popup with an animated image (GIF)...

It's so easy to do!

This is what the popup would look like without the custom CSS:

Explanation:

1 - CSS to shift the GIF up and to the left (+ size change if needed):

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -180px;
    left: -200px;
    z-index: 9999;
    max-width: 60%;
}

2 - Make visible everything that is "outside the frame":

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

3 - Add padding if necessary:

.et_bloom .split .et_bloom_form_text {
    padding-left: 13% !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding-bottom: 30px;
}

4 - Add a background colour with opacity :

.et_bloom .et_bloom_popup::after {
    background-color: rgba(140, 196, 162, 0.85);
}

You can use this site to convert your Hex colours to RGBA.

Here is the final code I used to get this result (copy and paste into your style sheet or directly into the Appearance > Customise > Additional CSS) :

.et_bloom .et_bloom_form_header.split img {
    position: absolute;
    top: -180px;
    left: -200px;
    z-index: 9999;
    max-width: 60%;
}

.et_bloom .et_bloom_form_container div {
    overflow: visible !important;
}

.et_bloom .split .et_bloom_form_text {
    padding-left: 13% !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
    padding-bottom: 30px;
}

.et_bloom .et_bloom_popup::after {
    background-color: rgba(140, 196, 162, 0.85);
}

Note that to achieve this result, I inserted a GIF using a URL obtained from Giphy (see : Gif with transparent background) when designing my popup:

5 - In conclusion...

Did these 5 ideas for personalisation from Bloom inspire you? Do you have any other ideas?

Any CSS customization is really personal: here, I give you some avenues to explore!

It is up to you to make them your own so that they fit your project needs.

Note also that you will have to check the rendering in mobile version, you may (or probably will) have to optimize the media queries from Divi...

Read also: How to make Bloom RGPD compliant