5 ideas originales para personalizar el popup de Bloom!

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

Te propongo 5 ideas originales para 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" ? Este plugin a veces desconocido es muy bueno plugin d'optin pour WordPress !

De hecho, te permite relier un formulaire d'inscription à votre fournisseur d'envoi de newsletter (también llamado "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.

También es necesario aclarar dos cosas importantes:

• Bloom es un plugin premium incluido en el Licencia Divi. Si usted se ha suscrito a Licencia Temas elegantes, vous pourrez le télécharger depuis votre compte et vous pourrez l'utiliser sur un Número ilimitado de sitios.
• 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 ?

Los ajustes de Bloom ya ofrecen muchas opciones de diseño.

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

¿Pero es suficiente? 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... ¿Y si todos hacen lo que hago?

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 ?

Cada sitio intenta sacar su pin del juego: algunos animan a los lectores a 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 !

¿Y si propusieron ambos? Y si, además, tu ¿El popup era realmente original, atractivo, incentivo, bonito? Que ferait l'internaute selon vous ? Se laisserait-il tenter ?

He aquí una buena idea: personalizar Bloom popup para aumentar la tasa de conversión !

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

Antes de ver en detalle el ejemplos de popups personalizadosTe propongo que regreses rápidamente a la 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 > Formulario de opción entonces haga clic "New Optin".

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

Validar su elección haciendo clic en "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...).

Este paso es necesario para validar su formulario.

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.

Una vez establecido su conexión, confirme su elección haciendo clic "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...

Para todos los ejemplos de personalizaciones que siguen, elija la primera plantilla (arriba izquierda).

Luego confirma tu elección haciendo clic "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. Cargue su imagen si es necesario (este no será el caso con todas las sugerencias de personalización sugeridas a continuación).
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. Validar su elección haciendo clic en "Next : display settings".

3.5 - Étape 5 : les autres réglages

En la pestaña "Display settings", vous trouverez plusieurs options d'affichage de la popup.

Lea cuidadosamente las opciones y tome sus opciones: puede volver más tarde si necesita.

Validar su elección haciendo clic en "Next : succes action".

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

Por último, llegará al último paso donde simplemente haga clic en "Save & Exit" para salvar tu popup.

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

Ahora que acabamos de recordar los pasos para crear la forma, propongo 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..."

Sin embargo, esto es lo que parece sin personalización:

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 Aspecto √≥ Personalizar √≥ CSS adicional) :

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

Esta otra personalización de la floración ressemble à la précédente, à la différence près que j'ai cambiar el color de fondo con un color gradiente... Cela apporte un effet sympa qui change du background anthracite que l'on voit partout...

Esto es lo que el popup parecería sin estas personalizaciones:

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 );
}

Para obtener el código CSS adecuado para su fondo degradado y transparente, puede ayudarse con este sitio que ofrece un generador gradiente en 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.

Esto es lo que el popup parecería sin el siguiente código CSS:

Aquí están algunas explicaciones:

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 Aspecto √≥ Personalizar √≥ CSS adicional) :

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

Explicación:

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 Aspecto √≥ Personalizar √≥ CSS adicional) :

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

Esto es lo que el popup parecería sin la personalización CSS:

Explicación:

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);
}

Puedes ayudarte con esto. sitio para convertir su Colores hex a 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 Aspecto √≥ Personalizar √≥ CSS adicional) :

.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 (véase: Gif con fondo transparente) al diseñar mi popup :

5 - En conclusion...

¿Son estos? 5 ideas de personalización de Bloom vous ont inspirées ? Avez-vous d'autres idées ?

Cualquier personalización de CSS es realmente personal: aquí, te doy conduce a explorar!

À 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 Consultas de medios...

Lee también: cómo hacer que Bloom sea compatible con el GDPR