Cómo crear una barra de alertas en WordPress (3 formas fáciles)

¿Quieres agregar una barra de alerta a tu sitio de WordPress?

Una barra de alerta o barra de notificación es una excelente manera de informar a los visitantes sobre actualizaciones importantes, ofertas especiales, lanzamientos de nuevos productos y más.

En este artículo, te mostraremos cómo crear una barra de alerta en WordPress con 3 soluciones fáciles.

¿Por qué crear una barra de alerta en WordPress?

Una barra de alerta es una excelente manera de informar a tus visitantes sobre algo importante en tu sitio web. Podría ser un evento de ventas en curso, una actualización de tus horarios de apertura o cambios en tus servicios.

También puedes usar una barra de alerta para informar a los visitantes sobre una oferta especial, como una oferta de compra uno y llévate uno gratis. Esta es una excelente opción si tienes una tienda en línea.

Usar una barra de alerta es mejor que simplemente poner un anuncio en tu página de inicio. Tu barra de alerta puede aparecer de manera prominente justo en la parte superior de cada página de tu sitio completo.

Es fácil crear una barra de alerta en WordPress. Veremos métodos que utilizan los mejores plugins de barra de notificación y un método manual usando código HTML y CSS. Simplemente haz clic en los enlaces a continuación para saltar directamente a cada opción:

• Método 1: Crear una barra de alerta usando OptinMonster
• Método 2: Crear una barra de alerta usando Thrive Leads
• Método 3: Crear manualmente una barra de alerta usando HTML/CSS personalizado
• Bono: Agregar mensajes de alerta personalizados a páginas de WordPress

Método 1: Crear una barra de alerta usando OptinMonster

OptinMonster es el mejor software de optimización de conversiones y generación de leads del mercado. Te ayuda a convertir más visitantes de tu sitio web en suscriptores y clientes.

OptinMonster ofrece un creador de campañas de arrastrar y soltar. Viene con hermosas ventanas emergentes tipo lightbox, alfombras de bienvenida, temporizadores de cuenta regresiva y otras superposiciones dinámicas que te ayudan a aumentar suscriptores y ventas en tu sitio web.

También puedes usar OptinMonster para crear una barra de alerta para tu sitio web. Sus plantillas preconstruidas facilitan mucho la creación de una barra de alerta que se vea genial en minutos.

Primero, necesitas visitar el sitio web de OptinMonster y registrarte para obtener una cuenta. Necesitarás al menos el plan Básico porque incluye el tipo de campaña Barra Flotante.

A continuación, necesitas instalar y activar el plugin OptinMonster WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Este plugin te permite conectar tu sitio de WordPress con el software de OptinMonster.

Al activarse, verá la pantalla de bienvenida y el asistente de configuración. Haga clic en el botón ‘Conectar su cuenta existente’.

A continuación, se abrirá una nueva ventana donde deberá conectar su sitio de WordPress a OptinMonster.

Simplemente haga clic en el botón ‘Conectar a WordPress’ para continuar.

Ahora puede seguir las instrucciones en pantalla para conectar su cuenta de OptinMonster.

Luego, simplemente vaya a OptinMonster » Campañas en su panel de WordPress. Haga clic en el botón ‘Crear su primera campaña’.

Esto abrirá el constructor de campañas de OptinMonster.

Desde aquí, deberá seleccionar ‘Barra flotante’ como su Tipo de campaña para crear una barra de alerta.

A continuación, verá una selección de plantillas de campaña. Elija la plantilla que desea utilizar.

Solo necesita pasar el mouse sobre ella y hacer clic en el botón ‘Usar plantilla’ para seleccionarla. Vamos a usar la plantilla de promoción de código de cupón para nuestra barra de alerta.

A continuación, se te pedirá que le des un nombre a tu plantilla. Una vez que hayas nombrado tu campaña, simplemente haz clic en el botón ‘Iniciar construcción’.

Ahora, verás el editor de campañas. Aquí es donde puedes diseñar tu barra de alertas.

OptinMonster ofrece diferentes bloques que puedes simplemente arrastrar y soltar en la plantilla. Por ejemplo, puedes agregar una imagen, texto, botón y más a tu barra de alertas.

Verás que tu barra de alertas aparece en la parte inferior de tu pantalla por defecto.

Para moverla a la parte superior de la pantalla, necesitas hacer clic en ‘Configuración de barra flotante’ en el lado izquierdo. Luego, simplemente haz clic en el control deslizante para mover la barra flotante a la parte superior de la página.

Para cambiar el texto de la barra flotante, simplemente haz clic en el área que deseas cambiar y escribe el texto que quieras.

También puedes cambiar la fuente, el tamaño y el color del texto, y más.

Para cambiar la configuración de la cuenta regresiva, simplemente selecciona el temporizador.

Luego, ingresa la fecha y hora de finalización deseadas. OptinMonster también te permite elegir el tipo de cuenta regresiva. Puedes seleccionar el tipo ‘Estático’ si deseas mostrar un temporizador estándar con tu fecha y hora de finalización especificadas.

Por otro lado, existe un tipo de cuenta regresiva ‘Dinámico’. El temporizador funcionará según el comportamiento de cada usuario en tu sitio. La cuenta regresiva se establece por separado para cada visitante de tu sitio web.

Una vez que estés satisfecho con el diseño de tu barra de alertas, no olvides hacer clic en el botón ‘Guardar’ en la parte superior de tu pantalla.

A continuación, necesitas ir a la pestaña ‘Reglas de visualización’ para seleccionar cuándo y dónde se mostrará tu barra de alertas en tu sitio. La regla predeterminada es que tu barra de alertas se muestre después de que el visitante haya estado en la página durante 5 segundos.

Vamos a cambiar esto a 0 segundos para que la barra de alertas aparezca instantáneamente. Para hacerlo, simplemente cambia el valor ‘seg’ a 0.

Además de eso, también puedes seleccionar dónde aparecerá la barra de alerta. Puedes usar la configuración predeterminada, que es 'la ruta de URL actual es cualquier página'. De esta manera, tu barra de alerta aparecerá en todas las páginas de tu sitio web de WordPress.

Luego, haz clic en el botón 'Siguiente paso' para cambiar la configuración de Acción. Puedes dejar la configuración 'mostrar la vista de campaña' como Optin y seleccionar si deseas reproducir un efecto de sonido cuando aparezca la barra de alerta.

Después de haber realizado tus cambios, haz clic en el botón 'Siguiente paso' una vez más.

Aquí, verás un resumen de tus reglas de visualización. Puedes realizar ediciones y cambios finales en tu campaña de barra de alerta.

Una vez que estés satisfecho, simplemente haz clic en el botón 'Guardar' en la parte superior de la pantalla.

Después de eso, puedes ir a la pestaña Publicar en la parte superior y cambiar el Estado de Publicación a 'Publicar'. Una vez hecho esto, deberás hacer clic en el botón 'Guardar' y cerrar el constructor de campañas.

A continuación, verás la Configuración de Salida de Campaña.

El último paso es activar la campaña en tu propio sitio web. Simplemente cambia el Estado de 'Pendiente' a 'Publicado'.

No olvides hacer clic en el botón 'Guardar Cambios' cuando hayas terminado.

Ahora, simplemente visita cualquier página de tu sitio web y verás tu campaña en acción.

Método 2: Crear una barra de alerta usando Thrive Leads

Otra forma en que puedes agregar barras de alerta a tu sitio web de WordPress es usando Thrive Leads. Es parte de la suite Thrive Themes y te ayuda a generar leads a través de barras de alerta, lightboxes, popups deslizables y más.

Primero, deberás visitar el sitio web de Thrive Themes y registrarte para obtener una cuenta. Simplemente haz clic en el botón 'Comenzar ahora' para empezar.

A continuación, necesitarás instalar y activar el plugin Thrive Product Manager en tu sitio web. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Puedes encontrar el plugin Thrive Product Manager en el área de tu cuenta.

Una vez que hayas instalado el plugin, simplemente ve a la página Product Manager desde tu área de administración de WordPress.

Desde aquí, haz clic en el botón 'Iniciar sesión en mi cuenta'.

Después de iniciar sesión en tu cuenta, verás diferentes plugins y herramientas ofrecidas por Thrive Themes.

Simplemente selecciona el plugin Thrive Leads y luego haz clic en el botón ‘Instalar productos seleccionados’ en la parte inferior.

Cuando Thrive Leads esté listo para usarse, verás un mensaje de éxito.

Luego puedes hacer clic en el botón ‘Ir al panel de Thrive Themes’.

A continuación, deberás ir a Panel de Thrive » Thrive Leads desde el panel de administración de WordPress.

Junto al encabezado Grupos de Leads, simplemente haz clic en el botón ‘Agregar Nuevo’.

Después de eso, ahora se abrirá una ventana emergente.

Puedes ingresar un nombre para tu nuevo grupo de leads y hacer clic en el botón ‘Agregar Grupo de Leads’.

A continuación, deberás crear un nuevo formulario de suscripción.

Haz clic en el botón ‘Agregar Nuevo Tipo de Formulario de Suscripción’.

Después de eso, Thrive Leads te pedirá que selecciones un tipo de formulario.

Puedes seleccionar el tipo ‘Cinta’ para agregar una barra de alerta a tu sitio web.

Después de agregar el tipo de formulario de suscripción Cinta, ahora deberás agregar un formulario.

Simplemente haz clic en la opción ‘Agregar un formulario’ debajo de Grupos de Leads.

En la siguiente pantalla, puedes elegir entre cualquiera de tus formularios existentes.

Como esta es la primera vez que creas un formulario, haz clic en el botón ‘Crear Formulario’.

Ahora, verás aparecer una ventana emergente en tu pantalla.

Puedes ingresar un nombre para tu formulario y hacer clic en el botón ‘Crear Formulario’.

Tu formulario se agregará al grupo de leads Cinta.

Para editar el diseño del formulario, simplemente haz clic en el ícono del lápiz.

A continuación, Thrive Leads te mostrará varias plantillas para elegir.

Simplemente selecciona una plantilla y haz clic en el botón ‘Elegir Plantilla’ en la parte inferior.

Esto iniciará el constructor visual con una vista previa en vivo, donde puedes personalizar tu barra de alerta.

Por ejemplo, puedes seleccionar el texto en la plantilla y cambiarlo según tus necesidades. O haz clic en la imagen en la barra de alerta y cámbiala.

Una vez que hayas terminado de editar, haz clic en el botón ‘Guardar Trabajo’ en la parte inferior.

Ahora puedes cerrar el editor visual y regresar a la configuración del formulario. Aquí, verás opciones para configurar el disparador de la barra de alerta, la frecuencia de visualización y la posición.

Por defecto, la barra de alerta aparecerá en la parte superior cuando se cargue una página. Sin embargo, puedes cambiar estas configuraciones.

Por ejemplo, si haces clic en la opción Disparador, verás más opciones, como mostrar la barra de alerta después de cierto tiempo, cuando un usuario se desplaza hacia abajo una cierta cantidad, o cuando un usuario llega al final de la página.

Además de eso, también puedes cambiar la frecuencia de visualización. La barra de alerta aparecerá todo el tiempo por defecto para todos los usuarios.

Sin embargo, puedes editar esto y mostrar tu barra de alerta al mismo visitante después de un cierto número de días.

A continuación, puedes regresar a la página de Thrive Leads desde tu panel de WordPress.

Después de eso, simplemente haz clic en el ícono del engranaje para abrir la Configuración de Visualización.

Desde aquí, puedes elegir en qué publicaciones y páginas aparecerá la barra de alertas.

Por ejemplo, puedes mostrarla solo en la página principal o elegir todas las publicaciones y páginas. También hay una opción para excluir algunas páginas y publicaciones de mostrar tu mensaje de alerta.

Cuando hayas terminado, simplemente haz clic en el botón ‘Guardar y Cerrar’.

El último paso es hacer clic en los interruptores para mostrar tu barra de alertas en dispositivos de escritorio y móviles.

Una vez hecho esto, tu barra de alertas estará lista para recopilar direcciones de correo electrónico de los usuarios y crear tu lista de correo electrónico.

Puedes visitar tu sitio web para verlo en acción.

Puedes ver nuestra reseña completa de Thrive Themes para más detalles.

Método 3: Crear manualmente una barra de alerta usando HTML/CSS personalizado

¿Qué pasa si no quieres usar OptinMonster o Thrive Leads? En este método, te mostraremos cómo crear una barra de notificaciones usando código HTML y CSS.

Primero, necesitarás copiar el siguiente código CSS personalizado para la barra de alertas:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Una forma fácil de agregar código CSS a tu sitio web es usando WPCode. Es el mejor plugin de fragmentos de código para WordPress que te ayuda a agregar código personalizado a tu sitio web.

Nota: WPCode es uno de los propios plugins de WPBeginner. Lo creamos para que sea muy fácil agregar scripts, código HTML y más a las páginas de su sitio web. Viene con funciones como una biblioteca de fragmentos de código incorporada, lógica condicional, píxeles de conversión y más.

Primero, necesitará instalar y activar el plugin gratuito WPCode. Para más detalles, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, debe dirigirse a Fragmentos de código » + Agregar fragmento desde el panel de WordPress y seleccionar la opción ‘Agregar su código personalizado (Nuevo fragmento)’.

Después de eso, ingrese un título para su fragmento en la parte superior y pegue el código CSS en el área de vista previa del código.

También deberá cambiar el Tipo de código a la opción ‘Fragmento CSS’.

A continuación, puede desplazarse hacia abajo hasta la sección de Inserción. Aquí es donde puede elegir dónde se ejecutará el código.

Dado que queremos que la barra de alerta aparezca en todo el sitio web, puede usar el método predeterminado ‘Inserción automática’. También puede mantener la configuración ‘Ejecutar en todas partes’.

Una vez hecho esto, puede hacer clic en el botón ‘Guardar fragmento’ en la parte superior.

También deberá hacer clic en el interruptor para activar el código.

Después de eso, vaya a Fragmentos de código » Encabezados y pies de página en su panel de administración de WordPress.

Simplemente copie y pegue la siguiente línea de código HTML en el cuadro ‘Encabezado’:

<div class="alertbar">We are currently closed due to Covid-10.</div>

Así es como debería verse ese código en el cuadro ‘Encabezado’ en WPCode:

Puedes cambiar el texto de la alerta a lo que prefieras. No olvides hacer clic en el botón ‘Guardar Cambios’ en la parte superior de la página una vez que hayas terminado.

Ahora, puedes visitar tu blog de WordPress para ver la barra de alertas. Debería aparecer en la parte superior de cada página así:

Consejo: En algunos temas de WordPress, tu barra de alertas puede superponerse a tu menú. Puedes modificar la altura de la barra a 40px o 30px para evitar esto. También necesitarás reducir la altura de línea en consecuencia para que tu texto permanezca centrado verticalmente en la barra.

Bono: Agregar mensajes de alerta personalizados a páginas de WordPress

Si deseas agregar mensajes de alerta personalizados a diferentes partes de tu sitio web, como páginas de productos, páginas de pago y páginas de tienda, entonces puedes usar SeedProd. Es el mejor constructor de sitios web y constructor de páginas de destino para WordPress.

El plugin ofrece un constructor de arrastrar y soltar para crear un tema personalizado y páginas web sin editar código. También ofrece un bloque de Alerta que puedes colocar en cualquier lugar de tu sitio.

Este bloque de Alerta puede advertir a los clientes que tu inventario se está agotando, que artículos específicos están en oferta u otras advertencias sensibles al tiempo.

Simplemente puedes agregar el bloque de Alerta a tu página y luego agregar un título y una descripción. El plugin también te permite agregar contenido dinámico, lo que te permite insertar fechas y otros parámetros de consulta.

También hay más opciones de personalización para el bloque de Alerta. Por ejemplo, puedes cambiar su alineación, ajustar el tamaño de la fuente y editar el ícono.

Para obtener más información sobre el uso de SeedProd, puedes consultar esta guía sobre cómo crear páginas personalizadas en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear una barra de alertas en WordPress. También puedes consultar nuestra guía sobre los mejores constructores de páginas de arrastrar y soltar de WordPress para ayudarte a personalizar aún más tu sitio y los mejores plugins de WooCommerce para aumentar las ventas de tu tienda.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.