El notificaciones Ten el viento en la web! Podemos usar el término "barrera de promoción" o "Notificación de barras" o Hola Bar.
Si desea agregar este tipo de artículo promocional a su sitio WordPress, muchas extensiones existen pero sabía que podría crear una barra de notificación simplemente utilizando Divi ?
No hay necesidad de añadir un plugin umpteenth y eso es lo que te estoy mostrando en este tutorial de imagen y vídeo, pero antes, mira el resultado final que obtendrás:
1 – ¿Qué es un "Bar de notificación" o "Hello Bar"
Uno notificaciones (notificaciones) o barra de promoción (promoción de bar) es un inserto que muestra en su sitio web para informar a Internet sobre una promoción continua, un acuerdo o un incentivo para suscribirse a su newsletter.
Estamos hablando de "bar" y no "popup" ya que es una inserción fina, que quiere menos intrusivo que un popup ocultaría el contenido de su sitio.
Uno notificaciones o Hola Bar es un elemento de marketing "soft" que no impide la experiencia de usuario de sus usuarios
¿Ves la diferencia?
He visitado algunos sitios web para encontrar algunos ejemplos:
Como puedes ver en esta foto, Hola Bar a menudo colores que atraen la mirada, son a menudo colocado en la parte superior de la pantalla y siempre incluyen petición de acción (un botón o un enlace).
Así que vamos a intentar crear un barra de notificación con Divi que sigue estas pocas reglas...
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2 - Barra de notificación Divi: el tutorial en vídeo
Antes de ir más lejos en las explicaciones, puede ver este vídeo que explica cómo crear una barra de notificación simple con Divi y cómo utilizarlo dentro del Theme Builder o incluso un diseño clásico creado con Gutenberg (sin utilizar Visual Builder).
Aquí vamos.
3 – Las explicaciones detalladas...
Ahora que has visto este video, aquí está la explicación paso a paso:
3.1 – Crear el Hello Bar en el Divi Theme Builder
Como se explica en el video tutorial, elegí Coloque mi Hola Bar directamente en el cuerpo de mi sitio.
Para ello, el Divi Theme Builder es perfecto ya que me permite actuar en todas las páginas de mi sitio gracias a "modelo de sitio predeterminado".
Pero de hecho, si desea que esta barra de notificación sea visible sólo en su página de inicio, por ejemplo, puede seguir el mismo procedimiento directamente dentro del diseño editado con el Editor Visual (no el Constructor de Tema), el procedimiento es el mismo...
Aquí están algunos pasos:
- Dentro de su diseño, inserte una nueva sección (azul)
- Añadir una línea 3/3
- Comience los pocos ajustes básicos:
- Por ejemplo, añadir un fondo gradiente en la parte inferior de la sección.
- También piense en reducir sus márgenes.
Otras sugerencias para la configuración son más detalladas en el vídeo. En realidad, haces lo que quieras, lado de diseño...
- Luego, en la primera parte de la línea, añadir un Módulo de texto e introducir un texto promocional.
- En la parte media, añadir un Módulo Roll Back MeterPor ejemplo.
- En la última parte, añadir un botón pedir acción.
Por supuesto, estas son sólo sugerencias, usted podría simplemente utilizar una línea 2/3 + 1/3 y eliminar la cuenta regresiva, por ejemplo...
- Abra la configuración de la sección y agregue una animación de entrada, por ejemplo (ubicada en la pestaña Estilo). Esto dará un poco de vida a su barra de notificación.
- Desde la pestaña Avances de la configuración de la sección, puede añadir el comportamiento necesario a un Hello Bar: el plaza fija. Para esto, ve a Avanzadas √≥ Efectos de desplazamiento y elegir una posición: arriba o abajo. En el ejemplo de mi video, elegí Pega a Bottom Pero sea lo que sea, depende de ti.
- Piense en habilitar la opción Zona corporal.
- Tu Divi notification bar Empieza a parecer uno de los mayores marketers Mientras tanto, piensa en guardar su sección en la Biblioteca Divi, para poder utilizarlo en otro lugar, por si acaso.
Para ver la entrega final, visite mi página demo para esta barra de notificación con Divi.
3.2 – Use esta barra de notificación con Gutenberg
Imagina eso, finalmente, la idea de mostrar esto barra de notificación en todas sus páginas No seas buena idea.
En este caso, eliminar esta sección creada anteriormente dentro de la Modelo del sitio por defecto divi Theme Builder e insertarlo en una pieza por pieza en algunos Disposiciones Divi de su elección.
Y tengo aún mejor oferta: incluso puedes implementar esto Hola Bar Divi en una página que no utiliza Divi, gracias a la funcionalidad de Divi Layout Block.
He aquí cómo añadir una barra de notificación Divi a un diseño con Gutenberg:
- Añade un bloque "Divi Disposition" a tu diseño de Gutenberg.
- Elija Construir nuevo diseño.
- El constructor abrirá: añadir una nueva sección azul (azul + icono)
- Y elija su sección pregrabada disponible en la pestaña "Añadir biblioteca".
- Su barra de notificación carga y aparece.
- Retire la sección inútil que se colocó por defecto al abrirse.
Aquí está el resultado obtenido o visitar la página demo :
3.3 – Las peculiaridades de esta barra de notificación hecha en casa
Usted notará que este tutorial le permite realizar fácilmente y rápidamente una barra promocional con Divi pero también ofrece una pequeña originalidad: la barra permanece fija al pergamino hasta llegar a su ubicación dentro de su diseño. Después de eso, esta barra se desliza con el contenido de su sitio.
Es original y no intrusivo pero uno Hola Bar debe ser capaz de ser cerrado o escondido por el usuario que no querría verla más.
Por lo tanto, he identificado varios recursos si quieres ir más lejos con esta característica...
4 – Alternativas y recursos ordenados sobre el componente
Para ir más lejos y si usted tiene necesidades reales de marketing, puede confiar en extensiones especializadas que ofrecen muchas características para sus barras promocionales:
- Divi Bar diviLife : una extensión especialmente diseñada para añadir barras de notificación a su sitio Divi.
- Hola Bar : Una de las extensiones de WordPress más efectivas y conocidas.
- Aquí encontrarás todo Extensiones de notificación de barra libre También está disponible desde la administración de su sitio (en la pestaña Extensiones > Add).
Además, puedes usar mi tutorial sobre Popups for Divi para desviarlo de su propósito primario y crear barras de notificación con.
De lo contrario, estos tutoriales también podrían interesarte:
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 ?
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 ?
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 🙂
Merci LC.
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 🙂
Salut Guillaume. Certainement mais avec du JS
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 🙂 )
Merci Guillaume