5 original ideas to customize Bloom's popup!

Cet article va vous montrer qu'il n'est pas difficile de customize Bloom's popup.

I propose you 5 original ideas for modifier le design de vos popups d'optin Bloom afin d'optimiser le taux de conversion et obtenir davantage d'inscriptions à votre newsletter !

1 - Qu'est-ce que Bloom ?

Il est peut-être bon de rappeler ce qu'est "Bloom" ? This sometimes unknown plugin is a very good plugin d'optin pour WordPress !

Indeed, it allows you to relier un formulaire d'inscription à votre fournisseur d'envoi de newsletter (also called "provider").

En d'autres termes, Bloom est un plugin qui permet de récupérer les adresses email de vos visiteurs et de les stocker dans vos listes d'envoi d'email marketing comme 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 License Elegant Themes, vous pourrez le télécharger depuis votre compte et vous pourrez l'utiliser sur un unlimited number of sites.
• Bloom est compatible avec n'importe quel thème WordPress ! Vous n'êtes pas obligé d'utiliser ce plugin uniquement sur vos sites Divi.

2 - Pourquoi customiser Bloom ?

Bloom's settings already offer many design options.

Que ce soit au niveau de l'affichage de la popup ou au niveau de son apparence, Bloom permet de choisir les images, les couleurs, le type d'apparition, l'animation etc...

But is that still enough? N'en avez-vous pas marre de voir apparaître ces popups intempestives lorsque vous visitez tranquillement un site Web ? À peine arrivé sur le site, on vous "saute dessus" pour que vous vous inscriviez à la newsletter. Pour ma part, je clique sur "fermer" si j'ai vraiment envie de lire la suite, ou si le contenu n'est pas intéressant, je quitte le site... What if everyone does what I do?

Que faire pour réussir à obtenir l'email de vos lecteurs que vous pourrez, ensuite, convertir en prospects puis en clients si vous êtes "bon" ?

L'email marketing a encore une longue vie devant lui si on en croit tout ce qu'on lit sur le sujet et qu'on constate que tous les sites actuels sont bel et bien dotés d'un formulaire d'inscription à la newsletter...

Comment faire, alors, pour obtenir ce fameux "email" tant convoité ? Et pourquoi l'internaute vous le confirait-il plutôt à un autre site ?

Each site tries to pull its pin from the game: some encourage readers to s'abonner en échange d'un Lead Magnet, tandis que d'autres proposent des contenus vraiment captivants et les lecteurs ne peuvent que s'inscrire !

What if you proposed both? And if, in addition, your Was popup really original, attractive, incentive, pretty? Que ferait l'internaute selon vous ? Se laisserait-il tenter ?

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

3 - Créer un formulaire optin Bloom : cas général

Before seeing in detail the examples of custom popups, I propose you to quickly return to the création d'un formulaire d'optin de Bloom. Nous aurons besoin partiellement de ces informations lors des explications de customisations qui suivent...

3.1 - Étape 1 : choisir le type de popup

Une fois que vous avez installé le plugin Bloom, vous pourrez commencer à créer votre premier formulaire d'optin.

Pour cela, allez à l'onglet Bloom > Optin Form then click "New Optin".

Pour les exemples de customisations qui vont suivre, je vous propose d'utiliser le type "POP UP" (top left).

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

3.2 - Étape 2 : connecter le formulaire avec votre "provider"

L'étape suivante va vous permettre de connecter le formulaire d'optin de Bloom à votre "provider", c'est-à-dire à votre "solution d'envoi de newsletter" (MailChimp, Sendinblue, MailPoet etc...).

This step is required to validate your form.

C'est grâce à cette connexion que vous pourrez récupérer les adresses mail de vos visiteurs afin de les stocker dans vos listes d'envoi d'email marketing.

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

3.3 - Étape 3 : choisir le design de la popup

À cette étape, Bloom vous propose de choisir une "template" de design pour votre popup.

Bien qu'il y ait de nombreux choix, ces popups se ressemblent toutes... C'est justement pour cette raison que je vous propose ce tuto, d'ailleurs...

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

Then confirm your choice by clicking "Next : customize".

3.4 - Étape 4 : paramétrer le design de la popup

L'étape n°4 vous permet de paramétrer l'onglet "design". Ici, vous trouverez plusieurs paramètres qui pourront varier en fonction de vos besoins et de la finalité de la customisation :

1. Saisissez le titre "accrocheur" de votre optin.
2. Upload your image if necessary (this will not be the case with all the suggested customization suggestions below).
3. Ajoutez une animation d'image si besoin.
4. Paramétrez l'affichage des champs du formulaire (couleurs, disposition etc.).
5. Définissez un "message de succès" : celui-ci apparaîtra lorsque le visiteur aura envoyé le formulaire.
6. Validate your choice by clicking on "Next : display settings".

3.5 - Étape 5 : les autres réglages

In the tab "Display settings", vous trouverez plusieurs options d'affichage de la popup.

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

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

3.6 - Étape 6 : message de succès et validation de la popup

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

4 - Des idées originales pour customiser la popup de Bloom

Now that we have just recalled the steps to create the form, I propose 5 façons originales de customiser facilement l'apparence de votre popup Bloom avec du CSS seulement. Cela signifie qu'un débutant pourra y parvenir sans beaucoup de connaissances en code.

4.1 - Customisation Bloom #1 : image en décalé

Voici une popup sympa...

Vous allez me dire : "je ne vois pas vraiment en quoi cette popup est originale..."

Yet this is what she would look like without customization:

Je vous propose, alors, ces quelques lignes de code pour permettre à l'image d'être décalée et de sortir de la popup :

1 - CSS pour décaler l'image vers le haut et vers la gauche :

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

2 - Rendre visible tout ce qui se trouve "en dehors du cadre" :

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

3 - Ajouter une marge à gauche pour décaler le texte et éviter qu'il se trouve caché derrière l'image :

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

4 - Ajouter un peu de marge en bas du texte pour qu'il ne soit pas "collé" aux champs :

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

Voici le code final que j'ai utilisé pour obtenir ce résultat (à copier et coller dans votre feuille de style ou directement dans l'onglet 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;
}

Je précise que l'image en décalé (celle du cadeau) a bien été insérée lors du paramétrage de bloom (étape 3.4 - pastille n°2 de cet article).

Bien sûr, n'hésitez pas à modifier ce code en fonction de vos besoins et projets...

4.2 - Customisation Bloom #2 : arrière-plan en dégradé/opacité

This other customization of bloom ressemble à la précédente, à la différence près que j'ai change the background color with a gradient color... Cela apporte un effet sympa qui change du background anthracite que l'on voit partout...

Here's what popup would look like without these customizations:

Pour obtenir ce résultat, il vous suffit de récupérer tout le code CSS de la popup n°1 et d'ajouter un arrière-plan en dégradé-transparent :

.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 obtain the appropriate CSS code for your degraded and transparent background, you can help yourself with this site that offers a gradient generator in CSS.

4.3 - Customisation Bloom #3 : image de fond

Je me demande si cette customisation de Bloom ne serait pas ma préférée... Elle change des popups qu'on a l'habitude de voir !

La popup est en transparence et l'arrière-plan, généralement anthracite-opaque, a été remplacé par une image de fond.

Here is what the popup would look like without the following CSS code:

Here are some explanations:

1 - Ajouter une image en background :

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

Notez que cette image a été préalablement ajoutée à ma bibliothèque de médias et que j'ai récupéré son URL.

2 - Rendre l'arrière-plan de la popup de Bloom transparent :

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

Voici le code final que j'ai utilisé pour obtenir ce résultat (à copier et coller dans votre feuille de style ou directement dans l'onglet 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;
}

Je précise qu'aucune image n'a été insérée dans les paramétrages de la popup de bloom (étape 3.4 - pastille n°2 de cet article).

4.4 - Customisation Bloom #4 : image en arrière-plan + image de fond

Cette customisation est une variante des précédentes... Voici à quoi ressemblerait cette popup sans l'ajout de CSS que vous trouverez ensuite :

Explanation:

1 - Ajouter une image d'arrière-plan (récupérer l'URL de l'image préalablement téléversée dans votre bibliothèque de médias). Dans ce cas, cette image est le fond semi-transparent avec les gouttes de pluie.

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

2 - Rendre totalement transparent l'arrière-plan de la popup de Bloom (et sans ombre) :

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

3 - Rendre visible tout ce qui se trouve "en dehors du cadre" :

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

4 - Décaler l'image (celle du nuage) pour qu'elle se place derrière les champs :

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

5 - Agrandir la taille de l'image (nuage) si besoin :

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

6 - Changer les marges et les alignements du texte et du formulaire :

.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%;
}

Voici le code final que j'ai utilisé pour obtenir ce résultat (à copier et coller dans votre feuille de style ou directement dans l'onglet 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 - Customisation Bloom #5 : Gif + couleur de fond

Je trouve cette popup géniale ! C'est juste que j'ai rarement vu (pour ne pas dire jamais) une popup d'inscription à une newsletter avec une image animée (GIF)...

C'est pourtant si facile à faire !

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

Explanation:

1 - CSS pour décaler le GIF vers le haut et vers la gauche (+ changement de taille si besoin) :

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

2 - Rendre visible tout ce qui se trouve "en dehors du cadre" :

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

3 - Ajouter des marges (padding) si besoin :

.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 - Ajouter une couleur de fond avec opacité :

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

Voici le code final que j'ai utilisé pour obtenir ce résultat (à copier et coller dans votre feuille de style ou directement dans l'onglet 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);
}

Notez que pour parvenir à ce résultat, j'ai inséré un GIF à l'aide d'une URL obtenue sur Giphy (see: Gif with transparent bottom) when designing my popup :

5 - In conclusion...

Are these 5 personalization ideas from Bloom vous ont inspirées ? Avez-vous d'autres idées ?

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

À vous de vous les approprier afin que cela s'accorde avec les besoins de votre projet.

Notez également qu'il faudra vérifier le rendu en version mobile, il faudra peut-être (ou sûrement) optimiser les Divi media queries...

Also read: how to make Bloom compatible with GDPR