Cómo añadir un mensaje de alerta personalizado a WordPress 

He utilizado mensajes de alerta en WordPress para advertir a los clientes sobre bajo stock, confirmar carritos de compra completados e incluso destacar nuevas funciones del blog. Son esas pequeñas cajas estilizadas que aparecen en tu sitio para compartir actualizaciones, errores o avisos, justo cuando tus visitantes necesitan verlos.

WordPress muestra algunas alertas por defecto, como cuando un formulario falla o un inicio de sesión tiene éxito. Pero son limitadas, y personalizarlas suele implicar meterse con el código.

En esta guía, te mostraré dos formas sencillas de crear tus propios mensajes de alerta utilizando herramientas que no necesitan código personalizado. Simplemente arrastra, suelta y listo.

¿Qué es un mensaje de alerta en WordPress?

Un mensaje de alerta es un cuadro de notificación con estilo que aparece en tu sitio de WordPress para mostrar a los visitantes actualizaciones importantes, errores o confirmaciones. Puedes mostrarlos en varios lugares de tu sitio, como la cabecera, el pie de página, la barra lateral o dentro de las entradas y páginas del blog.

WordPress proporciona mensajes de alerta predeterminados para varios eventos, como cuando un usuario inicia sesión correctamente o cuando hay un error al enviar un formulario de contacto. Estos mensajes de alerta predeterminados están diseñados para ser informativos y fáciles de usar, pero es posible que no siempre sean suficientes para las necesidades específicas de tu sitio web.

¿Por qué añadir un mensaje de alerta a tu sitio de WordPress?

Tu visitante está a punto de abandonar la página de pago sin completar su pedido. Una única alerta de advertencia, "Solo quedan 2 artículos en stock", puede ser el impulso que cierre la venta.

Por ejemplo, es posible que desees informar a los usuarios sobre una nueva función en tu sitio web o proporcionarles un código de descuento para un producto de comercio electrónico. De manera similar, es posible que desees advertir a los usuarios sobre artículos que aún están en sus carritos de compra y mostrar un mensaje de éxito después de completar la compra.

Los estudios demuestran que las ventanas emergentes de notificación con mejor rendimiento convierten a más del 9 %, un aumento significativo en comparación con los elementos de página estándar. Al añadir un mensaje de alerta personalizado, puedes comunicar información importante a tu audiencia y aumentar la urgencia.

Tipos de mensajes de alerta que puedes usar en WordPress

Existen varios tipos de mensajes de alerta en WordPress, a veces llamados cuadros de alerta de WordPress, que puedes añadir dependiendo de lo que quieras que los visitantes hagan o sepan. Cada uno cumple un propósito diferente, y el estilo del mensaje ayuda a los usuarios a reconocer lo que está sucediendo de un vistazo.

• Mensajes informativos: Úsalos para consejos generales, recordatorios o actualizaciones, como informar a los usuarios sobre nuevas funciones o entradas de blog.
• Mensajes de éxito: Estos confirman cuando algo ha funcionado, como el envío de un formulario, la creación de una cuenta o una compra completada.
• Mensajes de advertencia o error: Ideales para alertas que necesitan atención urgente, como bajo stock, acciones fallidas o errores del sistema.

Aquí tienes una guía rápida para combinar cada tipo con el momento adecuado:

• Información: Nuevas funciones, anuncios o consejos útiles que no requieren acción.
• Éxito: Confirmaciones de pedidos, envíos de formularios o cualquier acción completada.
• Advertencia: Avisos de bajo stock, ofertas que caducan o artículos dejados en un carrito.
• Peligro: Errores del sistema, alertas de seguridad o problemas críticos que requieren atención inmediata.

Cómo añadir un mensaje de alerta personalizado en WordPress (2 métodos sencillos)

Hay varias formas de añadir un mensaje de alerta personalizado a WordPress. Puedes codificar manualmente la funcionalidad, instalar un plugin de barra de notificaciones de WordPress, usar un plugin de pop-ups o probar software de notificaciones. Hoy, te mostraré cómo usar 2 de los métodos más fáciles: usar un constructor de sitios web de arrastrar y soltar de WordPress y un potente software de pop-ups.

Ambas soluciones son fáciles, no requieren conocimientos técnicos y no necesitarás usar CSS, HTML, PHP, Javascript ni ningún otro código personalizado.

Si te sientes cómodo editando PHP y CSS, también puedes añadir una barra de alerta con unas pocas líneas de código. Pero estos métodos sin código son más rápidos y no requieren un desarrollador.

Método 1: Mostrar un mensaje de alerta en WordPress usando SeedProd

Para el primer método, usaremos SeedProd. Es un creador de sitios web de arrastrar y soltar para WordPress con más de 1 millón de usuarios.

SeedProd facilita la adición de cuadros de alerta en cualquier lugar de tu sitio de WordPress sin tocar ningún código. Eliges el tipo, personalizas el estilo y ya está en línea.

Por lo tanto, si estás listo para empezar, sigue los pasos a continuación para crear un mensaje de alerta personalizado en WordPress con SeedProd.

Paso 1: Instalar y activar el plugin SeedProd

Lo primero que tendrás que hacer es visitar la página de precios de SeedProd y descargar el plugin. Si necesitas ayuda con esto, puedes seguir nuestra documentación sobre cómo instalar SeedProd.

Nota: SeedProd tiene una versión gratuita y usaremos SeedProd (el bloque de Alerta está disponible en todos los planes, incluido el Básico).

Después de activar el plugin, ve a SeedProd » Ajustes y pega tu clave de licencia en el cuadro de licencia.

La clave de licencia está en el sitio web de SeedProd en el panel de tu cuenta. Después de introducir tu clave, haz clic en el botón Verificar clave.

A continuación, tendrás que decidir el tipo de diseño que quieres crear. Con SeedProd, puedes crear páginas individuales de WordPress con el Constructor de Páginas de Destino o crear temas personalizados de WordPress con el Constructor de Temas.

Si quieres seguir usando tu tema de WordPress actual, te recomendamos la opción del Constructor de Páginas de Destino. Sin embargo, si quieres reemplazar tu tema y añadir cajas de alerta a tu encabezado, pie de página, barra lateral y otras plantillas de tema, el Constructor de Temas es la mejor opción.

Para este tutorial, usaremos la opción Constructor de Temas. Pero si quieres crear una página de destino, puedes seguir esta guía sobre cómo crear una página de destino en WordPress.

Consejo profesional: Puedes usar la función de cuadro de alerta con ambas opciones.

Paso 2: Elegir un kit de plantillas de WordPress

Dado que vamos a usar la opción Theme Builder, el siguiente paso es visitar la página SeedProd » Theme Builder. En esa página, deberás hacer clic en el botón Kits de plantillas de tema para elegir un diseño de sitio web prefabricado.

Verás inmediatamente una biblioteca de kits de sitios web que puedes añadir a tu sitio con un solo clic. Usando los filtros de la barra superior, puedes ordenar las plantillas por popularidad, novedad, WooCommerce y más.

Cuando encuentres una plantilla que te guste, pasa el ratón sobre ella y selecciona el icono de marca de verificación para añadirla a tu sitio de WordPress. En unos segundos, SeedProd importará toda la plantilla, incluyendo páginas y contenido específicos de la demostración.

A partir de ahí, verás las partes individuales que componen tu tema en tu panel de WordPress. Puedes personalizar cualquier parte del tema pasando el ratón por encima y haciendo clic en el enlace Editar diseño.

Por ejemplo, con la ayuda de los tutoriales a continuación, puedes:

• Crear una página de blog personalizada
• Construir una plantilla de entrada única personalizada
• Editar tu página de inicio de WordPress
• Personalizar tu encabezado de WordPress
• Editar tu pie de página de WordPress
• Crear una barra lateral personalizada
• Y m ilde;s.

Además, puedes personalizar páginas individuales, como tu página de Acerca de, Contacto y Servicios. Simplemente visita Páginas » Todas las páginas y haz clic en el enlace Editar con SeedProd junto a la página que deseas personalizar.

Para empezar, te mostraremos cómo añadir un mensaje de alerta a la página de inicio de tu WordPress. Así que adelante, pasa el ratón por encima de la plantilla de página de inicio y haz clic en el enlace Editar diseño.

Paso 3: Añadir y personalizar el bloque de mensaje de alerta

Cuando abras la plantilla, verás el creador de sitios web de arrastrar y soltar de SeedProd. Tendrá bloques de WordPress y ajustes a la izquierda y una vista previa en vivo de tu página de inicio a la derecha.

Puedes hacer clic en cualquier lugar de la vista previa para personalizar el contenido de la plantilla y ver los cambios en tiempo real. Además, puedes arrastrar nuevos bloques de WordPress desde el panel izquierdo a tu página para añadir más funciones y características.

Así es como añadiremos un mensaje de alerta a la página de inicio. Busca el bloque de Alerta en el panel de bloques avanzados y arrástralo donde quieras mostrarlo.

Una vez que el bloque esté en su lugar, puedes personalizar su apariencia y el mensaje que muestra a los visitantes de tu sitio web.

Primero, haz clic en el menú desplegable 'Tipo' y elige un tipo de alerta, como Info, Éxito, Advertencia o Peligro.

A continuación, dale un título a tu alerta. También puedes habilitar o deshabilitar el botón de cierre, que permite a los usuarios descartar el mensaje.

Ahora, introduce una descripción para tu alerta para dar más información a los usuarios. Debajo de eso, puedes cambiar el título y la descripción, el tamaño, la alineación y el nivel del encabezado.

Para que la alerta destaque, puedes añadir un icono personalizado. SeedProd tiene cientos de iconos de Font Awesome, por lo que existen muchas opciones.

Si deseas usar colores personalizados para tu mensaje de alerta, haz clic en la pestaña Avanzado en la configuración del bloque. Aquí, puedes editar la tipografía, cambiar los colores de la descripción, el título y el fondo, y seleccionar una sombra de texto.

En el mismo panel, puedes editar el espaciado del bloque, la visibilidad e incluso añadir una animación para hacerlo más llamativo.

Asegúrate de hacer clic en el botón Guardar antes de personalizar cualquier otra página.

Los mensajes de alerta son una excelente manera de llamar la atención sobre otras áreas de tu sitio. En la captura de pantalla a continuación, añadimos un mensaje de éxito a la página de confirmación de pedido de una tienda en línea.

Así que sé creativo con las notificaciones personalizadas, luego sigue el último paso para publicarlas en tu sitio web.

Paso 4: Publica el mensaje de alerta en tu sitio de WordPress

Después de editar cualquier plantilla de tema de SeedProd, deberás habilitar el tema para mostrar los cambios en tu sitio web en vivo. Para hacer esto, sal del editor de páginas y regresa al panel del Creador de Temas.

A partir de ahí, busca el interruptor Habilitar tema SeedProd y cámbialo a la posición verde de ‘Sí’.

¡Ahora, puedes visitar tu sitio web y ver tu mensaje de alerta en acción!

Uso de mensajes de alerta en páginas de WooCommerce

Si tienes una tienda WooCommerce, los mensajes de alerta son aún más útiles en los momentos más importantes: advertencias de stock bajo en las páginas de productos, confirmaciones de pago o recordatorios de carritos abandonados.

El Theme Builder de SeedProd te da control total sobre las plantillas de páginas de WooCommerce. Puedes añadir el bloque de Alerta directamente a las plantillas de tu carrito, pago o página de producto utilizando el mismo flujo de trabajo de arrastrar y soltar del Método 1.

Aquí tienes algunos casos de uso con los que empezaría:

• Stock bajo: Añade una alerta de Advertencia a las plantillas de página de producto, como "Solo quedan 3, pide antes de que se agoten".
• Éxito en el pago: Añade una alerta de Éxito a la plantilla de tu página de agradecimiento para confirmar que el pedido se ha completado.
• Carrito abandonado: Añade una alerta de Advertencia a la página del carrito, como "Tienes artículos en tu carrito. Completa tu pedido para asegurar el precio de hoy".

Para hacer esto, ve a SeedProd » Theme Builder y abre la plantilla de WooCommerce (Carrito, Pago o Producto Individual) que quieras editar. Luego sigue los mismos pasos del Método 1 para añadir y configurar el bloque de Alerta.

Método 2: Muestra una barra de notificación en WordPress con OptinMonster

Otra forma de añadir un mensaje de alerta a tu sitio de WordPress es creando una barra de notificación flotante. La barra de alerta se situará en la parte superior o inferior de tu sitio web y mostrará un mensaje personalizado a los visitantes.

Para este método, usaremos OptinMonster, una herramienta de optimización de conversiones que forma parte de la familia Awesome Motive.

OptinMonster te permite añadir barras de alerta flotantes que se fijan en la parte superior o inferior de tu sitio. Puedes usarlas para ofertas por tiempo limitado, advertencias de productos o anuncios en todo el sitio, todo sin código.

Aquí está la que haremos en este tutorial:

¡Empecemos!

Paso 1: Instala OptinMonster y conecta tu sitio

Primero, dirígete al sitio web de OptinMonster y regístrate para obtener tu cuenta.

A continuación, instala y activa el plugin de WordPress OptinMonster. Para obtener ayuda con esto, puedes visitar esta guía sobre cómo instalar un plugin de WordPress.

El plugin de OptinMonster te permite conectar fácilmente tu sitio web al software con unos pocos clics.

Después de activar el plugin, necesitarás conectar tu cuenta. Para ello, ve a OptinMonster » Ajustes desde tu administrador de WordPress.

Desde allí, haz clic en el botón Conectar una cuenta existente.

Aparecerá una ventana pidiéndote que introduzcas tu dirección de correo electrónico. Una vez que hayas añadido tu correo, haz clic en el botón Conectar a WordPress.

Paso 2: Selecciona una plantilla de barra de alerta flotante

Después de conectar tu cuenta de OptinMonster, dirígete a OptinMonster » Campañas desde tu panel de WordPress. Ahora, puedes hacer clic en el botón Crear tu primera campaña.

OptinMonster ofrece la opción de una plantilla predefinida o el uso de sus playbooks, que replican campañas exitosas de marcas reales. Para esta guía, seleccionaremos la opción Plantillas.

En esta página, elige la Barra flotante como Tipo de campaña para crear tu barra de alerta.

A continuación, verás una selección de diferentes plantillas de campaña. Para elegir una plantilla, pasa el ratón por encima y haz clic en el botón Usar plantilla.

Usaremos la plantilla 'Alerta' para nuestra barra de alerta.

Después de seleccionar la plantilla, verás un aviso pidiéndote que nombres tu campaña. Una vez que hayas introducido tu nombre, haz clic en el botón Empezar a construir.

Paso 3: Edita el texto y el diseño de tu barra de alerta

En la siguiente pantalla, verás el editor de campañas de OptinMonster. Aquí es donde puedes diseñar y personalizar tu mensaje de alerta.

Verás la barra de alerta aparecer en la parte superior de tu pantalla por defecto. Para cambiar el texto de la barra flotante, haz clic en el área que deseas editar y escribe tu mensaje personalizado.

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

Si deseas aumentar la urgencia de tu barra de alerta, puedes arrastrar el bloque de cuenta atrás y soltarlo en la barra flotante.

Desde allí, puedes seleccionar el temporizador de la plantilla, personalizar su configuración e introducir la fecha y hora de finalización deseadas.

También puedes configurar el temporizador como una cuenta atrás perpetua. Una cuenta atrás perpetua se configura por separado para cada visitante de tu sitio web.

Una vez que estés satisfecho con tu barra de alerta, haz clic en el botón Guardar en la parte superior de tu pantalla.

Paso 4: Configura las reglas de visualización y los ajustes de activación

El siguiente paso es ir a la pestaña 'Reglas de visualización' y seleccionar cuándo y dónde mostrar tu barra. La regla predeterminada muestra la barra después de que un visitante ha estado en la página durante 5 segundos.

Cambiamos esto a 0 segundos para que aparezca un mensaje de alerta al instante. Para hacerlo, simplemente cambia la cuenta atrás de 'seg' a 0.

Una vez que lo hayas hecho, haz clic en el botón Siguiente paso para cambiar los ajustes de Acción. Puedes dejar el menú desplegable 'mostrar la vista de campaña' en Optin y seleccionar si quieres reproducir un efecto de sonido cuando aparezca la barra de alerta.

Tras realizar esos cambios, haz clic en el botón Siguiente paso. En la página siguiente, verás un resumen de tu campaña.

Si estás satisfecho con la configuración, haz clic en el botón Guardar.

Consejo profesional: Para obtener mejores resultados, dirige tu barra de alertas a páginas específicas o comportamientos de los visitantes. Muestra una alerta de ventas solo en páginas de productos; muestra una advertencia de pago solo en la página del carrito. La configuración de Segmentación por página de OptinMonster controla esto.

Paso 5: Publica la barra de alerta en tu sitio de WordPress

El siguiente paso es cambiar a la pestaña Publicar y cambiar el estado de publicación a Publicar.

El último paso es activar la campaña en tu sitio de WordPress.

Para hacerlo, cierra el editor de campañas y ve a OptinMonster » Campañas. Verás tu campaña en la lista, y el Estado será Pendiente.

Para cambiarlo, haz clic en el estado Pendiente y selecciona Publicar en el menú desplegable.

Ahora, puedes visitar cualquier página de tu sitio web y ver tu barra de alertas en acción.

Preguntas Frecuentes

¿Necesito SeedProd Pro para añadir mensajes de alerta en WordPress?

No. El bloque de Alerta está disponible en todos los planes de SeedProd, incluido el plan Básico gratuito. Puedes añadir mensajes informativos, de éxito, de advertencia o de peligro a cualquier página sin necesidad de actualizar.

¿Cuál es la diferencia entre una barra de alerta y un cuadro de alerta en WordPress?

Un cuadro de alerta es un bloque de mensaje en línea colocado dentro de una página o publicación; se sitúa dentro de tu contenido donde lo coloques. Una barra de alerta es una tira flotante que se adhiere a la parte superior o inferior de tu sitio y permanece visible mientras los visitantes se desplazan.

El bloque Alerta de SeedProd crea cuadros de alerta en línea. La Barra Flotante de OptinMonster crea barras de alerta en todo el sitio.

¿Puedo mostrar un mensaje de alerta de WordPress solo en páginas específicas?

Sí. Con SeedProd, añades el bloque Alerta a páginas individuales o plantillas de tema, por lo que solo aparece donde lo colocas. Con OptinMonster, usa la regla de visualización de Segmentación por página para restringir tu barra de alertas a URLs o tipos de página específicos.

¿Cómo añado un mensaje de alerta de WooCommerce para bajo stock o pago?

Usa el Creador de Temas de SeedProd para editar tus plantillas de página de carrito, pago o producto de WooCommerce. Arrastra el bloque Alerta a la plantilla, establece el tipo en Advertencia o Éxito y añade tu mensaje.

Por ejemplo, una alerta de Advertencia en la página del carrito ("Solo quedan 2 en stock") puede reducir el abandono del carrito sin necesidad de código personalizado.

¿Puedo añadir un mensaje de alerta a WordPress sin un plugin?

Sí, puedes añadir un cuadro de mensaje de WordPress con HTML y CSS personalizados directamente en una página o publicación, o añadiendo PHP al archivo functions.php de tu tema. Pero este enfoque requiere conocimientos de codificación y puede fallar si tu tema se actualiza.

Usar un plugin como SeedProd es más rápido, seguro y no requiere un desarrollador.

Empieza a añadir mensajes de alerta de WordPress hoy mismo

Los mensajes de alerta son una de las formas más rápidas de comunicarte con los visitantes en el momento adecuado: advertencias de bajo stock, confirmaciones de pago o anuncios en todo el sitio.

El bloque Alerta de SeedProd facilita añadirlos en cualquier lugar de tu sitio sin código. Consigue SeedProd y empieza a construir.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.