Divi Tips : Hello Bar - Notification Bar

Crear una barra de notificaciones o promociones con Divi (Hello Bar)

Publicado el 03/11/2020 | 8 comentarios

1.212 palabras

5

Las barras de notificación están de moda en la web. Se puede utilizar el término " barra de promoción" o "barra de notificaciones" o "Hello Bar".

Si quieres añadir este tipo de elemento promocional a tu sitio de WordPress, hay muchas extensiones disponibles, pero ¿sabías que puedes crear una barra de notificaciones simplemente usando Divi?

No hace falta añadir otro plugin más y eso es lo que te muestro en este tutorial con imágenes y vídeo 🤩 pero antes, mira el resultado final que obtendrás :

Notif Bar Demo 1

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 una "barra de notificaciones" o "Hello Bar"?

Unabarra de notificación o barra depromoción es una inserción que se muestra en su sitio para informar al usuario de una promoción actual, una oferta o un incentivo para suscribirse a su boletín de noticias.

El término "bar " se utiliza en lugar de "popup ya que se trata de una inserción muy fina, que es menos intrusiva que una ventana emergente que ocultaría el contenido de su sitio.

Una barra de notificaciones o Hello Bar es un elemento de marketing "suave" que no entorpece la experiencia de usuario de sus visitantes

¿Puedes ver la diferencia?

He buscado en algunas páginas web para encontrar algunos ejemplos:

Exemples de barres de notification
Ejemplos de barras de notificación

Como puedes ver en esta imagen, las Hello Bars suelen tener colores llamativos, suelen estar situadas en la parte superior de la pantalla y siempre tienen una llamada a la acción (un botón o enlace).

Vamos a intentar crear una barra de notificaciones con Divi que siga estas pocas reglas...

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

2 - Barra de notificaciones de Divi: video tutorial

Antes de seguir, puedes ver este vídeo que explica cómo crear una sencilla barra de notificaciones con Divi y cómo utilizarla dentro del Theme Builder o incluso un diseño clásico creado con Gutenberg (sin utilizar el Visual Builder).

Aquí vamos 👉

3 - Explicaciones detalladas...

Ahora que has visto este vídeo, aquí tienes las explicaciones paso a paso:

3.1 - Creación de la Barra de Hola en el Constructor de Temas Divi

Como se explica en el video tutorial, elegí colocar mi Hello Bar directamente en el cuerpo de mi sitio.

Para ello, el Constructor de temas Divi es perfecto ya que me permite actuar en todas las páginas de mi sitio gracias a la "plantilla de sitio por defecto".

Pero, de hecho, si quieres que esta barra de notificaciones sea visible sólo en tu página de inicio, por ejemplo, puedes seguir el mismo procedimiento directamente dentro del diseño editado con el Constructor Visual (y no con el Constructor de Temas), el procedimiento es idéntico...

Estos son algunos pasos:

Divi Notification Bar 1
  1. Dentro de su diseño, inserte una nueva sección (en azul)
  2. Añadir una línea 3/3
  3. Comienza con algunos ajustes básicos:
Divi Notification Bar 2
  1. Por ejemplo, añada un fondo degradado en la parte inferior de la sección.
  2. Considere también la posibilidad de reducir sus márgenes.

En el vídeo se detallan otras sugerencias de configuración. Básicamente, haces lo que quieres, en cuanto a diseño...

Divi Notification Bar 3
  1. A continuación, en la primera parte de la línea, añada un Módulo de texto e introduzca un texto promocional.
  2. En la sección central, añada un Módulo de cuenta atráspor ejemplo.
  3. En la última parte, añade un botón llamada a la acción.

Por supuesto, estas son sólo sugerencias, podría simplemente utilizar una línea 2/3 + 1/3 y eliminar el temporizador de cuenta atrás, por ejemplo...

Divi Notification Bar 4
  1. Abra la configuración de la sección y añada una animación de entrada, por ejemplo (situada en la pestaña Estilo). Esto le dará algo de vida a tu barra de notificaciones.
  2. Desde la pestaña Avanzado de la configuración de la sección, puede añadir el comportamiento esencial de una Hello Bar: la posición fija. Para ello, vaya a Avanzado > Efectos de desplazamiento y elija una posición: superior o inferior. En el ejemplo de mi vídeo, elegí "Stick to Bottom" , pero no importa, depende de ti.
  3. Recuerde que debe activar la opción de Área Corporal.
  4. Tu barra de notificaciones de Div i empieza a parecerse a la de los mercadólogos de arriba 🤣 pero seguro que tienes que hacer algunos retoques para que quede bien, como se explica en el vídeo... Mientras tanto, recuerda guardar tu sección en la Biblioteca de Divi, para poder usarla en otros sitios, por si acaso.

Para ver el renderizado final, visite mi página de demostración de esta barra de notificación con Divi.

3.2 - Uso de esta barra de notificaciones con Gutenberg

Imagínese que, después de todo, la idea de mostrar esta barra de notificaciones en todas sus páginas no es una buena idea.

En este caso, simplemente elimine esta sección creada previamente de la Plantilla de Sitio Predeterminada del Constructor de Temas Divi e insértela por partes en algún Diseños de Divi de su elección.

Y tengo una noticia aún mejor: puedes incluso implementar esta Divi Hello Bar en una página que no utilice Divi, gracias al Bloque de diseño Divi.

A continuación se explica cómo añadir una barra de notificaciones de Divi a un diseño con Gutenberg :

Divi Notification Bar 5
  1. Añade un bloque "Divi Layout" dentro de tu diseño Gutenberg.
  2. Seleccione "Construir nuevo diseño".
Divi Notification Bar 6
  1. Se abrirá el constructor: añada una nueva sección azul (icono azul +)
  2. Y elija la sección que haya guardado previamente en la pestaña "Añadir desde la biblioteca".
  3. La barra de notificaciones se carga y aparece.
  4. Eliminar la sección innecesaria que se colocó por defecto al abrir.

Y aquí está el resultado o visite la página de demostración :

Notif Bar Demo 2

3.3 - Las particularidades de esta barra de notificación "casera"

Notarás que este tutorial hace que sea rápido y fácil crear una barra promocional con Divi, pero también ofrece un poco de originalidad: la barra se mantiene fija cuando se desplaza hasta que llega a su lugar en tu diseño. Después, la barra se desliza con el contenido de su sitio.

Es original y no intrusiva, pero una verdadera Hello Bar debería poder ser cerrada u ocultada por el usuario que no quiera verla más.

Por eso he enumerado varios recursos por si quieres ir más allá con esta función...

4 - Alternativas y recursos seleccionados

Para ir más allá y si tienes verdaderas necesidades de marketing, puedes contar con extensiones especializadas que ofrecen muchas funcionalidades para tus barras promocionales:

Además, puedes utilizar mi tutorial sobre Popups para Divi para desviarlo de su propósito original y crear barras de notificación con él.

Si no es así, puede que también te interesen estos tutoriales:

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:

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

8 Commentaires

  1. LC

    Super tuto encore, merci !
    De mon côté, j’ignore pourquoi, la barre ne reste stiky/collée que en Visual builder, dès que je passe en « réel », la barre défile et ne reste pas collée, ni en stik to bottom ni en top.
    J’ai essayé aussi avec « Body area » mais rien n’y fait. As-tu une idée ? ou une précision que je n’aurais pas faite ?

  2. Lycia Diaz

    Tiens c’est bizarre LC, comme tu peux le voir dans ma vidéo et mes démo que ça marche. Alors n’aurais-tu pas un script qui empêcherait cela ?

  3. LC

    J’ai la réponse (cela aidera peut-être d’autres): Elegant Theme vient de me dire que c’est un bug lié au fait que j’avais mis la section en global. Quand on la remet en non global, ça marche parfaitement ! Merci 🙂

  4. Lycia Diaz

    Merci LC.

  5. Guillaume

    Merci pour cet article, c’est très clair.
    Je me pose toutefois une question : est il possible (facilement) par un code ou autre de masquer cette barre de notification sans passer par un plugin. En clair, qu’il y ait une croix sur la droite pour la masquer ?
    En vous remerciant 🙂

  6. Lycia Diaz

    Salut Guillaume. Certainement mais avec du JS

  7. Guillaume

    Bonjour Lydia, merci pour ton retour très rapide. Effectivement oui, c’est ce que je pensais mais n’étant pas spécialiste je ne voyais pas trop comment m’y prendre. J’ai donc cherché un peu plus loin et j’ai trouvé un article sur le sujet en anglais qui détaille tout cela avec un peu de CSS, de PHP et de JS. Si cela peut en aider d’autres voici le lien : https://www.peeayecreative.com/how-to-add-a-promo-bar-in-divi-(without-plugins)/ (je te laisse modérer ou non le lien 🙂 )

  8. Lycia Diaz

    Merci Guillaume

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.