5 original ideas to customize Bloom's popup!

Updated on 26/02/2020 | Published on 12/10/2019 | 6 comments

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

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

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is Bloom?

It may be worth recalling what it means to be "Bloom" ? This sometimes unknown plugin is nevertheless a very good one optin plugin for WordPress !

Indeed, it allows you to link a registration form to your newsletter provider (also called "provider").

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

It is also necessary to specify two important things:

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

2 - Why customize Bloom?

The Bloom settings already offer many design options.

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

But is that still enough? Aren't you tired of seeing these unwanted popups appear when you quietly visit a website? As soon as you arrive on the site, you are "jumped on" so that you can subscribe to the newsletter. For my part, 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 to do?

What can you do to successfully obtain the email from your readers that you can then convert into prospects and then into customers if you are "good"?

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

So how can we get this famous and coveted "email"? And why would the Internet user entrust it to you instead to another site?

Each site is trying to do its best: some encourage readers to subscribe in exchange for a Lead Magnetwhile others offer really exciting content and readers can only register!

Why don't you offer both? What if, in addition, your popup was really original, attractive, incentive, pretty? What do you think the Internet user would do? Would he let himself be tempted?

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

3 - Create a Bloom opt-in form: general case

Before seeing in detail the examples of custom popups, I suggest you to come back quickly to the creation of a Bloom opt-in form. We will need this information partially during the following customization explanations....

3.1 - Step 1: Choose the type of popup

Création d'une popup Bloom - étape 1
Creating a Bloom popup - step 1

Once you have installed the Bloom plugin, you can start creating your first opt-in form.

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

For the customization examples that follow, I suggest you use 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

Création d'une popup Bloom - étape 2
Creating a Bloom popup - step 2

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

This step is mandatory to validate your form.

It is through this connection that you will be able to retrieve your visitors' email addresses in order to store them in your email marketing mailing 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

Création d'une popup Bloom - étape 3
Creating a Bloom popup - step 3

At this stage, Bloom suggests that you choose a design "template" for your popup.

Although there are many choices, these popups all look the same... It is precisely for this reason that I propose this tutorial, by the way...

For all the customization 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

Création d'une popup Bloom - étape 4
Creating a Bloom popup - step 4

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

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

3.5 - Step 5: Other settings

Création d'une popup Bloom - étape 5
Creating a Bloom popup - step 5

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: Success action".

3.6 - Step 6: Success message and popup validation

Création d'une popup Bloom - étape 6
Creating a Bloom popup - step 6

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

4 - Original ideas to customize Bloom's popup

Now that we have just reminded you of the steps involved in creating the form, I suggest 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 this without much knowledge of code.

4.1 - Bloom customization #1 : shifted image

Customisation de la popup de bloom : exemple 1
Customization of the bloom popup: example 1

Here is a nice popup....

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

However, here is what it would look like without customization:

Popup Bloom n°1 without customization

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

1 - CSS to shift the image up and 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 shift 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 (to copy and paste into your style sheet or directly into the tab Appearance > Customize > 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 configuration (step 3.4 - tablet n°2 of this article).

Of course, do not hesitate to modify this code according to your needs and projects...

4.2 - Bloom customization #2 : gradient background/opacity

Customisation de la popup de bloom : exemple 2

This other customization of bloom looks like the previous one, except that I changed the background color with a gradient color... It brings a nice effect that changes the anthracite background that you see everywhere...

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

Popup de Bloom sans customisation
Popup Bloom n°2 without customization

To obtain this result, you just have to retrieve all the CSS code from popup #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 CSS gradient generator.

4.3 - Bloom customization #3 : background image

Customisation de la popup de bloom : exemple 3
Customization of the bloom popup: example 3

I wonder if this customization of Bloom wouldn't be my favorite... It changes the popups we're used to seeing!

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

Here is what the popup would look like without the CSS code you will find below:

Popup de Bloom sans customisation
Popup Bloom n°3 without customization

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 I retrieved its URL.

2 - Make the background of Bloom's popup transparent:

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

Here is the final code I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > 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 bloom popup settings (step 3.4 - tablet n°2 of this article).

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

Customisation de la popup de bloom : exemple 4
Customization of the bloom popup: example 4

This customization is a variation of the previous ones... Here is what this popup would look like without the addition of CSS that you will find later:

Popup de Bloom sans customisation
Popup Bloom n°4 without customization

Explanations :

1 - Add a background image (retrieve the URL of the previously uploaded image from your media library). In this case, this image is the semi-transparent background with 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 shadows):

.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 (the one of the cloud) so that it is placed behind the fields:

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

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

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

6 - Change margins and alignments of text and 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 (to copy and paste into your style sheet or directly into the tab Appearance > Customize > 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 color

Customisation de la popup de bloom : exemple 5
Customization of the bloom popup: example 5

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

It's so easy to do, though!

Here is what the popup would look like without the customization CSS:

Popup de Bloom sans customisation : exemple 5
Popup Bloom n°5 without customization

Explanations :

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

.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 color with opacity:

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

You can help yourself with this site to convert your Hex colors to RGBA.

Here is the final code I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > 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 on Giphy (see : Gif with transparent bottom) when designing the design of my popup:

Insérer un GIF dans une popup de Bloom
Inserting a GIF into a Bloom popup

5 - In conclusion....

Did these 5 Bloom customization ideas inspire you? Do you have any other ideas?

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

It is up to you to appropriate them so that they are in line with the needs of your project.

Also note that it will be necessary to check the rendering in mobile version, it may be necessary (or surely) to optimize the Divi's media queries

Also read: how to make Bloom compatible with the DGMP

optimiser le design des popups Bloom
customiser Bloom
how to customize Bloom popup

2,475 words

10

You should like it too:

Popups for Divi : un plugin gratuit très malin !

Popups for Divi: a very clever free plugin!

Free plugins for Divi are quite rare, but "Popups for Divi" is very effective and easy to use. This plugin converts any Divi section into a pop-up window. I'll explain how to use it.

Divi Switch : un plugin multifonction qui vous veut du bien !

Divi Switch: a multifunctional plugin that wants you to feel good!

You are looking for ways to remove the grey line under the menu, make your phone number clickable in the top menu, change the hamburger icon or even the color of the "back up" button... Don't waste any more time coding and install Divi Switch ! A multifunctional plugin in-dis-pen-sa-ble!

6 Commentaires

  1. Marion

    Merci pour les différents articles 🙂
    Je souhaite rajouter une pop up tout en haut du site, on parle de divibar mais c’est payant. Est qu’il existe une autre solution :)?
    Bonne journée

  2. alain

    Bonsoir,

    Mon formulaire via bouton s’affiche mal, j’ai les champs mais l’image et la couleur de fond qui n’est pas centré dans le cadre du popup, je n’arrive pas à l’agrandir pour qu’il prenne l’ensemble des champs.

    Je n’arrive pas à ajouter une checkbox pour le RGPD, si vous avez une idée ou via un autre plugin.

    Merci,

  3. Harry

    Depuis deja 03 mois qu je vous suis, je ne cesse d’acquerir des compétences effrayantes. Merci beaucoup.
    Comment faire si je veux enlever juste le contenu « Email » de mon popup et garder « inscription » pour rediriger les internautes vers un autre site.
    Bonne journée.

  4. Lycia Diaz

    Salut Harry ! Suis-je si effrayante? 😉 Blague à part, pour tes besoin, je pense que ce n’est pas Bloom dont tu as besoin. Ce plugin est justement fait pour récupérer les emails des internautes. Je pense que tu as plus besoin d’une Popup dans laquelle tu places un bouton qui renvoie vers un autre lien (un autre site)… Pour cela, un simple plugin de popup fera l’affaire. Lis cet article, il devrais t’intéresser : https://astucesdivi.com/popups-for-divi/

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This