5 original ideas to customize Bloom's popup!

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

This article will show you that it is not difficult to customize 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 recognize. The classic links are in purple and sponsored links are in pink.

1 - What is Bloom?

It is perhaps good to recall what is "Bloom" ? This plugin sometimes ignored is however 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 your visitors' email addresses and store them in your email marketing lists like 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 customize 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 colors, the type of appearance, the animation etc...

But is it still enough? Aren't you tired of seeing these popups appear when you are visiting a website? As soon as you arrive on the site, they "jump on" you 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 to do?

What can you do to get your readers' emails that you can then convert into leads 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 the current sites are well and truly equipped with a registration form for the newsletter...

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 truly captivating content and readers can't help but subscribe!

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 is a good idea: customize the Bloom popup to increase the conversion rate!

3 - Creating a Bloom optin form: general case

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

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 optin form.

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

For the following customization examples, I suggest you use the "POP UP " type (top left).

Validate 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 Bloom's optin 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 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

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

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 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 can vary according to your needs and the purpose of the customization:

  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 customization suggestions below).
  3. Add an image animation if needed.
  4. Set the display of the form fields (colors, 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

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.

Validate your choice by clicking on "Next: Successful action.

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

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 the Bloom popup

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

4.1 - Bloom Customization #1: Offset 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..."

Yet, 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 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 it in your stylesheet or directly in the 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 specify that the offset image (the one of the gift) has been inserted during the bloom setting (step 3.4 - insert n°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

Customisation de la popup de bloom : exemple 2

This other bloom customization 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 we see everywhere...

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

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

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

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

I wonder if this customization of Bloom would not be my favorite... It changes the popups we are used to see!

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

This is how the popup would look like without the CSS code 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 that I 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 it in your stylesheet or directly in the 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 specify that no image was 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

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

This customization is a variant of the previous ones... Here is how this popup would look like without the CSS you will find next:

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

Explanation:

1 - Add a background image (retrieve the URL of the image previously uploaded in 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 - Change 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 it in your stylesheet or directly in the 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 signup popup with an animated image (GIF)...

It's so easy to do!

This is how the popup would look like without the customization CSS:

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

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 needed:

.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 use this site to convert your Hex colors to RGBA.

Here is the final code I used to get this result (copy and paste it in your stylesheet or directly in the 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 from Giphy (see : Gif with transparent background) when designing my popup:

Insérer un GIF dans une popup de Bloom
Insert a GIF in a Bloom popup

5 - In conclusion...

Were you inspired by these 5 Bloom customization ideas? Do you have any other ideas?

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

It's up to you to make them your own so that they fit the needs of your project.

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

Read also: How to make Bloom RGPD compliant

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

2,475 words

10

You should like it too:

Product Carousel pour Divi et WooCommerce

Product Carousel for Divi and WooCommerce

If you're looking for a way to scroll through your WooCommerce store's products in a stylish carousel, the "Product Carousel" extension can help. It's quick and easy to use, and the results live up to expectations.

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

Popups for Divi: a smart free plugin!

Free plugins for Divi are pretty rare, but "Popups for Divi" is pretty effective and easy to use. This plugin converts any Divi section into a popup. I explain how to use it.

16 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/

  5. Dan Kacvinski

    My client is using bloom and I am trying to do version no. 3 with full background image. I can get the image to work but not the transparent box. We are not using Divi either. IS there different code for non divi theme to make this work

  6. Christophe

    Bonjour Lycia,
    Déjà merci beaucoup pour tout tes articles et astuces, je me suis mis sur Divi il y a 6 mois et je ne le regrette pas !
    Dans Bloom, il y a un encart pour du custom css. Je voulais changer la couleur du background derrière la pop-up, ça marche très bien avec la preview dans le plugin, mais pas d’effet sur le site.
    Une idée du pourquoi du comment ?!
    P. S. : bon, j’y suis arrivé en indiquant le code dans le style.css de mon thème enfant, mais ça fait quelques lignes en plus déclarées sur tout le site alors que je n’utilise la pop-up que sur une page.

  7. Lycia Diaz

    Hey Dan, in fact il could bête different, you have to read the code with inspector

  8. Lycia Diaz

    Salut Christophe, tu as raison, Bloom est très difficile à personnaliser avec du CSS, il ne le prend pas toujours en compte.

  9. Mamour Ly

    Bonsoir,

    Sincèrement merci Lycia pour toutes les infos que vous nous partagez. Avec Bloom, ce que je souhaiterai, est certes de récupérer des mail mais en permettant, juste après avoir cliqué sur le bouton « envoyer », aux visiteur de télécharger un ebook sans avoir à cliquer sur un autre bouton. Comment faire selon vous ?

    Cordialement,

  10. Lycia Diaz

    Salut Mamour. Tu n’as qu’à mettre ton Ebook en pièce jointe de l’e-mail de confirmation d’inscription. Sinon Bloom permet de verrouiller une partie de ta page et de la faire apparaître une fois le bouton cliqué.

  11. Sandrine

    Bonjour, Je cherchais un tuto pour customiser ma pop up sur bloom et je suis ravie du résultat. J’ai opté pour la première option avec logo en décalé.
    Le rendu est top sur Desktop et tablette mais pas du tout sur mobile.

    Existe-t-il une possibilité de ne paramétrer la pop up uniquement pour desktop et tablette, quitte à en créer une seconde optimisée pour mobile ?

    D’avance merci.

  12. Lycia Diaz

    Oui Sandrine tu dois créer un code CSS spécial en fonction de la taille des écrans, ça s’appelle les Media Queries. Il y a un très bon tutoriel sur le blog Alsacreation

  13. Paskline

    Bonjour Lycia, comme toujours, de supers articles ! Dès que j’ai une question, je regarde sur ton blog, franchement bravo !!
    Ce n’était apparemment pas le sujet précis de ton article mais j’ai cependant une question sur bloom : lorsque je crée des optins à insérer dans les articles (avec short codes), parfois l’image que je choisis apparait en énorme… J’ai cherché quel bout de code CSS je pourrais insérer pour choisir tout simplement la taille de l’image…

    Et sinon, tu aurais une formation pour apprendre les bases du CSS, vraiment simple ? Parce que jusqu’à présent je bidouille avec des copiers-collers mais ça a ses limites 😉 Merci

  14. Lycia Diaz

    Hello Paskline. Écoute, Bloom est super difficile à modifier avec du CSS, c’est son code qui est bizarre et qui fait que c’est très difficile d’y mettre une nouvelle couche. Pour apprendre le CSS, tu peux regarder sur AlsaCréation, il y a de très bon tutos

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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