Divi Tips 71

¡5 ideas originales para personalizar el Bloom popup!

Actualizado el 26/02/2020 | Publicado el 12/10/2019 | 16 comentarios

2.475 palabras

10

Este artículo le mostrará que no es difícil personalizar la ventana emergente de Bloom.

¡Te ofrezco 5 ideas originales para modificar el diseño de tus popups optin de Bloom para optimizar la tasa de conversión y conseguir más suscripciones a tu newsletter!

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es Bloom?

Quizás valga la pena recordar lo que es "Bloom ? Este plugin, a veces desconocido, es sin embargo un muy buen plugin optin para WordPress !

En efecto, le permite vincular un formulario de inscripción a su proveedor de boletines .

En otras palabras, Bloom es un plugin que le permite recuperar las direcciones de correo electrónico de sus visitantes y almacenarlas en sus listas de marketing por correo electrónico como MailChimp, SendingBlue, MailPoet, etc.

También es necesario aclarar dos cosas importantes:

  • Bloom es un plugin premium incluido en el Licencia Divi. Si se ha suscrito a un licencia Elegant ThemesPuedes descargarlo desde tu cuenta y utilizarlo en un número ilimitado de sitios.
  • Bloom es compatible con cualquier tema de WordPress. No tienes que usar este plugin sólo en tus sitios Divi.

2 - ¿Por qué personalizar Bloom?

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

Ya sea la visualización de la ventana emergente o su apariencia, Bloom le permite elegir las imágenes, los colores, el tipo de apariencia, la animación, etc.

Pero, ¿sigue siendo suficiente? ¿No estás cansado de ver esas ventanas emergentes cuando estás visitando un sitio web? Nada más llegar a la página web, te "saltan" para que te apuntes al boletín. Por mi parte, hago clic en "cerrar" si realmente quiero leer el resto, o si el contenido no es interesante, me voy del sitio... Y si a todos les gusta: ¿qué debo hacer?

¿Cómo consigues que tus lectores te envíen correos electrónicos y los conviertas en clientes potenciales y luego en clientes si eres "bueno"?

El marketing por correo electrónico todavía tiene una larga vida por delante si cree en todo lo que lee sobre el tema y si se da cuenta de que todos los sitios actuales cuentan con un formulario de inscripción al boletín informativo...

Entonces, ¿cómo conseguir ese codiciado correo electrónico? ¿Y por qué el internauta se lo confía a usted y no a otro sitio?

Cada sitio intenta hacer lo mejor posible: algunos animan a los lectores a suscribirse a cambio de un Lead MagnetOtros ofrecen contenidos realmente interesantes y los lectores se apuntan seguro.

¿Y si ofreces ambas cosas? ¿Y si, además, su ventana emergente fuera realmente original, atractiva, incitante, bonita? ¿Qué crees que haría el internauta? ¿Estarían tentados?

Una buena idea: personalizar la ventana emergente de Bloom para aumentar la tasa de conversión.

3 - Creación de un formulario Bloom optin: caso general

Antes de ver en detalle los ejemplos de popups personalizados, me gustaría echar un vistazo rápido a la creación de un formulario optin de Bloom. Necesitaremos parte de esta información en las explicaciones de personalización que siguen...

3.1 - Paso 1: Elegir el tipo de ventana emergente

Création d'une popup Bloom - étape 1
Creación de una ventana emergente de Bloom - paso 1

Una vez que haya instalado el plugin Bloom, puede empezar a crear su primer formulario de suscripción.

Para ello, vaya a la sección Bloom > Formulario Optin y haga clic en "Nuevo Optin.

Para los siguientes ejemplos de personalización, sugiero utilizar el tipo "POP UP " (arriba a la izquierda).

Confirme su elección haciendo clic en " Siguiente: diseñe su optin.

3.2 - Paso 2: Conecte el formulario con su proveedor

Création d'une popup Bloom - étape 2
Creación de una ventana emergente de Bloom - paso 2

El siguiente paso le permitirá conectar el formulario Bloom opt-in con su "proveedor", es decir, su "solución de envío de boletines" (MailChimp, Sendinblue, MailPoet, etc.).

Este paso es obligatorio para validar su formulario.

Gracias a esta conexión, podrá recuperar las direcciones de correo electrónico de sus visitantes para almacenarlas en sus listas de marketing por correo electrónico.

Una vez establecida la conexión, valide su elección haciendo clic en " Siguiente: diseñe su optin.

3.3 - Paso 3: Elegir el diseño de la ventana emergente

Création d'une popup Bloom - étape 3
Creación de una ventana emergente de Bloom - paso 3

En esta etapa, Bloom le ofrece elegir una "plantilla" de diseño para su ventana emergente.

Aunque hay muchas opciones, estas ventanas emergentes tienen todas el mismo aspecto... Por eso precisamente te ofrezco este tutorial, por cierto...

Para todos los ejemplos de personalización que siguen, elija la primera plantilla (arriba a la izquierda).

A continuación, valide su elección haciendo clic en "Siguiente: personalizar.

3.4 - Paso 4: Configurar el diseño de la ventana emergente

Création d'une popup Bloom - étape 4
Creación de una ventana emergente de Bloom - paso 4

El paso 4 le permite configurar la pestaña "diseño". Aquí encontrará varios parámetros que pueden variar según sus necesidades y el objetivo de la personalización:

  1. Introduzca el título "pegadizo" de su optin.
  2. Sube tu imagen si lo necesitas (no será el caso de todas las sugerencias de personalización que se presentan a continuación).
  3. Añade una animación de imagen si es necesario.
  4. Configurar la visualización de los campos del formulario (colores, diseño, etc.).
  5. Definir un "mensaje de éxito": aparecerá cuando el visitante haya enviado el formulario.
  6. Confirme su elección haciendo clic en " Siguiente: configuración de la pantalla.

3.5 - Paso 5: Otros ajustes

Création d'une popup Bloom - étape 5
Creación de una ventana emergente de Bloom - paso 5

En la pestaña "Configuración de la pantalla", encontrará varias opciones para mostrar la ventana emergente.

Lee atentamente las opciones y elige: puedes volver a ellas más tarde si es necesario.

Confirme su elección haciendo clic en " Siguiente: acción exitosa.

3.6 - Paso 6: Mensaje de éxito y validación de la ventana emergente

Création d'une popup Bloom - étape 6
Creación de una ventana emergente de Bloom - paso 6

Finalmente, llegarás al último paso donde sólo tienes que hacer clic en "Save & Exit" para guardar tu popup.

4 - Ideas originales para personalizar la ventana emergente de Bloom

Ahora que hemos recordado los pasos para crear el formulario, te propongo 5 formas originales de personalizar fácilmente la apariencia de tu Bloom popup sólo con CSS. Esto significa que un principiante podrá hacerlo sin muchos conocimientos de código.

4.1 - Personalización de la floración nº 1: Imagen de desplazamiento

Customisation de la popup de bloom : exemple 1
Personalización de la ventana emergente de floración: ejemplo 1

Aquí hay una bonita ventana emergente...

Me dirás: "No veo que esta ventana emergente sea original...".

Sin embargo, este es el aspecto que tendría sin la personalización:

Popup Bloom n°1 sin personalizar

Propongo, pues, estas pocas líneas de código para permitir el desplazamiento de la imagen y la salida de la ventana emergente:

1 - CSS para desplazar la imagen hacia arriba y hacia la izquierda :

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

2 - Hacer visible todo lo que está "fuera del marco":

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

3 - Añade un margen a la izquierda para compensar el texto y evitar que quede oculto tras la imagen:

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

4 - Añade un pequeño margen en la parte inferior del texto para que no quede "pegado" a los campos:

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

Este es el código final que utilicé para obtener este resultado (copie y pegue en su hoja de estilo o directamente en el Apariencia > 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;
}

Me gustaría señalar que la imagen desplazada (la del regalo) fue efectivamente insertada durante el ajuste de la floración (paso 3.4 - ficha 2 de este artículo).

Por supuesto, siéntase libre de modificar este código según sus necesidades y proyectos...

4.2 - Personalización de Bloom #2: Fondo degradado/opaco

Customisation de la popup de bloom : exemple 2

Esta otra personalización de bloom es similar a la anterior, salvo que he cambiado el color de fondo por un color degradado... Esto aporta un bonito efecto que cambia el fondo antracita que vemos en todas partes...

Este es el aspecto que tendría la ventana emergente sin estas personalizaciones:

Popup de Bloom sans customisation
Popup Bloom n°2 sin personalización

Para obtener este resultado, basta con obtener todo el código CSS de la ventana emergente n°1 y añadir un fondo transparente-gradiente:

.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 utilizar este sitio que ofrece un generador de gradientes en CSS.

4.3 - Personalización de Bloom #3: imagen de fondo

Customisation de la popup de bloom : exemple 3
Personalización de la ventana emergente de floración: ejemplo 3

Me pregunto si esta personalización de Bloom será mi favorita... ¡Es un cambio respecto a las ventanas emergentes que estamos acostumbrados a ver!

La ventana emergente es transparente y el fondo, normalmente antracita-opaco, ha sido sustituido por una imagen de fondo.

Este es el aspecto que tendría la ventana emergente sin el código CSS de abajo:

Popup de Bloom sans customisation
Popup Bloom n°3 sin personalizar

He aquí algunas explicaciones:

1 - Añadir una imagen de fondo :

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

Tenga en cuenta que esta imagen fue añadida previamente a mi biblioteca multimedia y que he recuperado su URL.

2 - Haz que el fondo de la ventana emergente de Bloom sea transparente:

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

Este es el código final que utilicé para obtener este resultado (copie y pegue en su hoja de estilo o directamente en el Apariencia > 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;
}

Me gustaría señalar que no se ha insertado ninguna imagen en los ajustes de la ventana emergente de la floración (paso 3.4 - pestaña 2 de este artículo).

4.4 - Personalización de Bloom #4: imagen de fondo + imagen de fondo

Customisation de la popup de bloom : exemple 4
Personalización de la ventana emergente de floración: ejemplo 4

Esta personalización es una variante de las anteriores... Este es el aspecto que tendría el popup sin el CSS añadido que encontrarás a continuación:

Popup de Bloom sans customisation
Popup Bloom n°4 sin personalizar

Explicación:

1 - Añade una imagen de fondo (obtén la URL de la imagen previamente cargada en tu biblioteca de medios). En este caso, esta imagen es el fondo semitransparente con las gotas de lluvia.

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

2 - Haz que el fondo de la ventana emergente de Bloom sea completamente transparente (y sin sombra):

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

3 - Hacer visible todo lo que está "fuera del marco":

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

4 - Desplazar la imagen (de la nube) para que quede detrás de los campos:

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

5 - Ampliar el tamaño de la imagen (nube) si es necesario:

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

6 - Modificar los márgenes y las alineaciones del texto y del formulario :

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

Este es el código final que utilicé para obtener este resultado (copie y pegue en su hoja de estilo o directamente en el Apariencia > 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 - Personalización de Bloom #5: Gif + color de fondo

Customisation de la popup de bloom : exemple 5
Personalización de la ventana emergente de floración: ejemplo 5

Creo que esta ventana emergente es genial. Es que rara vez (o nunca) he visto una ventana emergente de suscripción al boletín con una imagen animada (GIF)...

Es muy fácil de hacer.

Este es el aspecto que tendría la ventana emergente sin el CSS personalizado:

Popup de Bloom sans customisation : exemple 5
Popup Bloom n°5 sin personalizar

Explicación:

1 - CSS para desplazar el GIF hacia arriba y hacia la izquierda (+ cambio de tamaño si es necesario):

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

2 - Hacer visible todo lo que está "fuera del marco":

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

3 - Añada relleno si es necesario:

.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 - Añadir un color de fondo con opacidad :

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

Puede utilizar este para convertir los colores Hex a RGBA.

Este es el código final que utilicé para obtener este resultado (copie y pegue en su hoja de estilo o directamente en el Apariencia > 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);
}

Tenga en cuenta que para conseguir este resultado, he insertado un GIF utilizando una URL obtenida de Giphy (véase : Gif con fondo transparente) al diseñar mi ventana emergente:

Insérer un GIF dans une popup de Bloom
Insertar un GIF en una ventana emergente de Bloom

5 - En conclusión...

¿Te han inspirado estas 5 ideas de personalización de Bloom? ¿Tiene alguna otra idea?

Cualquier personalización de CSS es realmente personal: ¡aquí te doy algunas pistas para explorar!

Usted debe hacerlos suyos para que se adapten a las necesidades de su proyecto.

Tenga en cuenta también que tendrá que comprobar la representación en la versión móvil, puede (o probablemente) tendrá que optimizar el consultas de medios de Divi...

Lea también: Cómo hacer que Bloom cumpla el RGPD

optimiser le design des popups Bloom
customiser Bloom
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

DiviGrid : ajoutez 27 modules au Visual Builder !

DiviGrid : ajoutez 27 modules au Visual Builder !

J’ai testé DiviGrid et ses 27 modules. Découvrez avec moi ce que nous offre ce plugin premium pour Divi, comment l’utiliser et comment importer les démos. Vous allez certainement adorer le module « Justified Gallery » !

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 *

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