5 ideas originales para personalizar el popup de Bloom!

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

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!

Anuncio: 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 sea bueno recordar lo que es "Bloom" ? Este plugin a veces ignorado 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 del popup 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 que aparezcan estas ventanas emergentes cuando visitas un sitio web? En cuanto llegas a la página, te "saltan" para que te apuntes al boletín. En cuanto a mí, hago clic en "cerrar" si realmente quiero leer el resto, o si el contenido no es interesante, me voy del sitio... Y si todos hacen como yo: ¿qué hacer?

¿Qué puedes hacer para conseguir los correos electrónicos de tus lectores que luego puedes convertir en clientes potenciales y luego en clientes si eres "bueno"?

El marketing por correo electrónico tiene todavía una larga vida por delante si nos creemos todo lo que leemos sobre el tema y si nos damos cuenta de que todos los sitios actuales están bien dotados de 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 un contenido realmente cautivador y los lectores no pueden evitar suscribirse.

¿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?

He aquí 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 los ejemplos de ventanas emergentes personalizadas en detalle, 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 Pestaña "Nuevo Optin".

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

Valide su elección haciendo clic en " A continuación: 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 optin 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 propósito 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. Establezca 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.

Valide 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 acabamos de recordar los pasos para crear el formulario, te propongo 5 formas originales de personalizar fácilmente el aspecto de tu Bloom popup sólo con CSS. Esto significa que un principiante podrá hacerlo sin muchos conocimientos en 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 vas a decir: "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 estilos 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;
}

Preveo que la imagen de offset (la del regalo) ha sido insertada durante el ajuste de la floración (paso 3.4 - inserción n°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 se parece a la anterior, salvo que he cambiado el color de fondo por un color degradado... 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 no será mi favorita... ¡Cambia 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.

Así es como se vería la ventana emergente sin el código CSS de abajo:

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

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 recuperé 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 estilos 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;
}

Especifico que no se ha insertado ninguna imagen en la configuración de la ventana emergente de 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... Así es como se vería este popup sin el CSS que encontrarás a continuación:

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

Explicación:

1 - Añada una imagen de fondo (recupere la URL de la imagen previamente cargada en su 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 - Cambiar los márgenes y 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 estilos 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.

Así es como se vería el popup sin la personalización CSS:

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 sitio para convertir sus colores Hex a RGBA.

Este es el código final que utilicé para obtener este resultado (copie y pegue en su hoja de estilos 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!

De ti depende hacerlos tuyos para que se ajusten a las necesidades de tu 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
how to customize Bloom popup

2.475 palabras

10

A ti también te debería gustar:

Product Carousel pour Divi et WooCommerce

Carrusel de productos para Divi y WooCommerce

Si estás buscando una forma de desplazarte por los productos de tu tienda WooCommerce en un elegante carrusel, la extensión "Product Carousel" puede ayudarte. Es rápido y fácil de usar, y los resultados están a la altura de las expectativas.

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

Popups para Divi: ¡un plugin inteligente y gratuito!

Los plugins gratuitos para Divi son bastante raros, pero "Popups for Divi" es bastante efectivo y fácil de usar. Este plugin convierte cualquier sección de Divi en una ventana emergente. Te explico cómo usarlo.

14 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

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.

Pínchalo en Pinterest

Acciones
Comparte esto