He utilizado mensajes de alerta en WordPress para avisar a los clientes de la falta de existencias, confirmar que la compra se ha realizado correctamente e incluso destacar nuevas funciones del blog. Son esos pequeños recuadros estilizados 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 desordenar 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: sólo tienes que arrastrar, soltar y listo.
¿Qué es un mensaje de alerta en WordPress?
Un mensaje de alerta es un mensaje que aparece en su sitio web WordPress para informar a los visitantes sobre actualizaciones importantes, notificaciones o errores. Puedes mostrarlos en varias ubicaciones 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 se produce 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 puede que no siempre sean suficientes para las necesidades específicas de su sitio web.
¿Por qué añadir un mensaje de alerta a su sitio WordPress?
Añadir mensajes de alerta personalizados a WordPress le permite mostrar mensajes adaptados a sus requisitos específicos.
Por ejemplo, puede que desee informar a los usuarios sobre una nueva función de su sitio web o proporcionarles un código de descuento para un producto de comercio electrónico. Del mismo modo, es posible que desee advertir a los usuarios acerca de los artículos que todavía están en sus carritos de la compra y mostrar un mensaje de éxito después de pasar por caja con éxito.
Al añadir mensajes de alerta personalizados, puede mejorar la experiencia del usuario en su sitio web, comunicar información importante a su audiencia y aumentar la urgencia para animarles a actuar.
Tipos de mensajes de alerta que puede utilizar en WordPress
Existen varios tipos de mensajes de alerta en WordPress que puedes añadir en función de lo que quieras que hagan o sepan los visitantes. Cada uno sirve para un propósito diferente, y el estilo del mensaje ayuda a los usuarios a reconocer lo que está pasando de un vistazo.
- Mensajes informativos: Utilícelos para consejos generales, recordatorios o actualizaciones, como informar a los usuarios sobre nuevas funciones o entradas de blog.
- Mensajes de éxito: Confirman que algo ha funcionado, como el envío de un formulario, la creación de una cuenta o la finalización de una compra.
- Mensajes de advertencia o error: Ideal para alertas que requieren atención urgente, como existencias bajas, acciones fallidas o errores del sistema.
Cada método de esta guía le muestra cómo crear uno o más de estos tipos de mensajes utilizando herramientas visuales, de modo que no necesita escribir ni una sola línea de código.
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. Puede codificar manualmente la funcionalidad, instalar un plugin de barra de notificaciones de WordPress, utilizar un plugin de ventanas emergentes o probar un software de notificaciones. Hoy, le mostraremos cómo utilizar 2 de los métodos más fáciles: el uso de un plugin WordPress page builder y un potente software popup.
Ambas soluciones son superfáciles, no requieren conocimientos técnicos y no tendrás que utilizar CSS, HTML, PHP, Javascript ni ningún otro código personalizado.
- Método 1: Mostrar un mensaje de alerta de WordPress usando SeedProd
- Método 2: Mostrar una barra de notificaciones en WordPress con OptinMonster
Método 1: Mostrar un mensaje de alerta de WordPress usando SeedProd
Para el primer método, utilizaremos SeedProd. Con más de 1 millón de usuarios, es el mejor plugin constructor de páginas para WordPress.
SeedProd hace que sea fácil añadir mensajes de alerta personalizados a su sitio de WordPress sin tocar ningún código. Puede elegir dónde aparecerá la alerta, adaptarla al estilo de su sitio y controlar el tipo de mensaje, desde cuadros de información hasta avisos de advertencia.
También puede utilizar SeedProd para:
- Crear una página Coming Soon en WordPress
- Personaliza el diseño de tu sitio web WooCommerce
- Crear un tema de WordPress personalizado
- Añade iconos personalizados de redes sociales a tu sitio
- Ponga su sitio en modo de mantenimiento
- Y mucho más.
Así que, si estás listo para empezar, sigue los siguientes pasos para crear un mensaje de alerta personalizado en WordPress con SeedProd.
Paso 1: Instalar y activar el plugin SeedProd
Lo primero que debe 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 la instalación de SeedProd.
Nota: SeedProd tiene una versión gratuita; sin embargo, utilizaremos SeedProd Pro para la función Alert Box.
Después de activar el plugin, vaya a SeedProd " Configuración y pegue su clave de licencia en el cuadro de licencia.
La clave de licencia se encuentra en el sitio web de SeedProd, en el panel de control de su cuenta. Después de introducir la clave, haga clic en el botón Verificar clave.
A continuación, tendrá que decidir sobre el tipo de diseño que desea crear. Con SeedProd, puede crear páginas individuales de WordPress con el Landing Page Builder o crear temas personalizados de WordPress con el Theme Builder.
Si desea continuar utilizando su tema actual de WordPress, le recomendamos la opción del Constructor de Páginas de Aterrizaje. Sin embargo, si desea reemplazar su tema y agregar cajas de Alerta a su encabezado, pie de página, barra lateral y otras plantillas de tema, el Theme Builder es la mejor opción.
Para este tutorial, usaremos la opción Theme Builder. Pero si quieres hacer una landing page, puedes seguir esta guía sobre cómo crear una landing page en WordPress.
Consejo profesional: puede utilizar la función de cuadro de alerta con ambas opciones.
Paso 2: Elegir un kit de plantillas de WordPress
Ya que vamos con la opción de Theme Builder, el siguiente paso es visitar la página de SeedProd " Theme Builder. En esa página, tendrá que hacer clic en el botón Theme Template Kits para elegir un diseño de sitio web pre-hecho.
Inmediatamente verás 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 por encima y selecciona el icono de la marca de verificación para añadirla a tu sitio WordPress. En unos segundos, SeedProd importará toda la plantilla, incluyendo páginas y contenidos específicos de la demo.
A partir de ahí, verá las partes individuales que componen su tema en el panel de control de WordPress. Puedes personalizar cualquier parte del tema situándote sobre ella y haciendo clic en el enlace Editar diseño.
Por ejemplo, con la ayuda de los siguientes tutoriales, podrás:
- Crear una página de blog personalizada
- Crear una plantilla personalizada de entrada única
- Edite su página de inicio de WordPress
- Personalizar la cabecera de WordPress
- Editar el pie de página de WordPress
- Crear una barra lateral personalizada
- Y mucho más.
Además, puede personalizar páginas individuales, como su página Acerca de, Contacto y Servicios. Simplemente visite Páginas " Todas las páginas y haga clic en el enlace Editar con SeedProd junto a la página que desea personalizar.
Para empezar, te mostraremos cómo añadir un mensaje de alerta a tu página de inicio de WordPress. Así que adelante y se ciernen sobre la plantilla Homepage y haga clic en el enlace Editar diseño.
Paso 3: Añadir y personalizar el bloque de mensajes de alerta
Cuando abras la plantilla, verás el constructor de páginas de arrastrar y soltar de SeedProd. Tendrá bloques y ajustes de WordPress a la izquierda y una vista previa en vivo de tu página de inicio a la derecha.
Puedes hacer clic en cualquier parte 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 características y funcionalidades.
Así es como añadiremos un mensaje de alerta a la página de inicio. Busca el bloque Alerta en el panel Bloques avanzados y arrástralo donde quieras que aparezca.
Una vez colocado el bloque, puede personalizar su aspecto y el mensaje que muestra a los visitantes de su sitio web.
En primer lugar, haz clic en el menú desplegable "Tipo" y elige un tipo de alerta, como Información, Éxito, Advertencia o Peligro.
A continuación, ponle un título a tu alerta. También puedes activar o desactivar el botón de cierre, que permite a los usuarios descartar el mensaje.
Ahora, introduce una descripción de tu alerta para dar más información a los usuarios. Debajo, puedes cambiar el título y la descripción, el tamaño, la alineación y el nivel de encabezamiento.
Para que la alerta destaque, puede añadir un icono personalizado. SeedProd cuenta con cientos de iconos Font Awesome, por lo que existen multitud de opciones.
Si desea utilizar colores personalizados para su mensaje de alerta, haga clic en la pestaña Avanzado de 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 entre bloques, la visibilidad e incluso añadir una animación para hacerlo más vistoso.
Asegúrese de hacer clic en el botón Guardar antes de personalizar cualquier otra página.
Los mensajes de alerta son una forma fantástica de llamar la atención sobre otras áreas de su sitio. En la captura de pantalla siguiente, hemos añadido un mensaje de éxito a la página de confirmación de pedidos de una tienda online.
Así que ponte creativo con las notificaciones personalizadas y, a continuación, sigue el paso final para hacerlas realidad en tu sitio web.
Paso 4: Publicar el mensaje de alerta en su sitio WordPress
Después de editar cualquier plantilla de tema SeedProd, tendrá que habilitar el tema para mostrar los cambios en su sitio web en vivo. Para ello, salga del constructor de páginas y vuelva al panel del Theme Builder.
Desde allí, busque el conmutador Activar tema SeedProd y póngalo en la posición verde "Sí".
Ahora, ¡puede visitar su sitio web y ver su mensaje de alerta en acción!
Método 2: Mostrar una barra de notificaciones en WordPress con OptinMonster
Otra forma de añadir un mensaje de alerta a su sitio WordPress es mediante la creación de una barra de notificación de alerta. La barra de alerta se situará en la parte superior o inferior de su sitio web y mostrará un mensaje personalizado a los visitantes.
Para este método, utilizaremos OptinMonster, el mejor software de optimización de conversiones del mercado.
OptinMonster le permite añadir barras de alerta flotantes que se adhieren a la parte superior o inferior de su sitio. Puede utilizarlas para ofertas de tiempo limitado, advertencias sobre productos o anuncios para todo el sitio, todo ello sin código.
Además, como he mencionado anteriormente, puede utilizar OptinMonster para crear una barra de mensajes de alerta para su sitio web. El software tiene un sinnúmero de plantillas pre-construidas, por lo que es muy fácil crear una barra de alerta de gran apariencia en cuestión de minutos.
Este es el que haremos en este tutorial:
Empecemos.
Paso 1: Instale OptinMonster y conecte su sitio web
En primer lugar, diríjase al sitio web de OptinMonster y regístrese para obtener su cuenta.
A continuación, instale y active el plugin de WordPress OptinMonster. Para obtener ayuda con esto, puede visitar esta guía sobre cómo instalar un plugin de WordPress.
El plugin OptinMonster le permite conectar fácilmente su sitio web al software con unos pocos clics.
Después de activar el plugin, tendrá que conectar su cuenta. Para ello, vaya a OptinMonster " Configuración desde el administrador de WordPress.
A continuación, haga 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 dirección de correo electrónico, haz clic en el botón Conectar con WordPress.
Paso 2: Seleccionar una plantilla de barra de alerta flotante
Después de conectar su cuenta de OptinMonster, diríjase a OptinMonster " Campañas desde su panel de WordPress. Ahora, puede hacer clic en el botón Crear su primera campaña.
OptinMonster ofrece la posibilidad de elegir entre una plantilla prefabricada o utilizar sus playbooks, que reproducen campañas de éxito de marcas auténticas. Para esta guía, seleccionaremos la opción Plantillas.
En esta página, elija la Barra Flotante como Tipo de Campaña para crear su barra de alerta.
A continuación, verás una selección de diferentes plantillas de campaña. Para elegir una plantilla, sitúate sobre ella y haz clic en el botón Usar plantilla.
Utilizaremos la plantilla 'Alerta' para nuestra barra de alerta.
Después de seleccionar la plantilla, aparecerá un mensaje pidiéndole que dé nombre a su campaña. Una vez introducido el nombre, haz clic en el botón Empezar a crear.
Paso 3: Edite el texto y el diseño de su barra de alerta
En la siguiente pantalla, verá el editor de campañas de OptinMonster. Aquí es donde puedes diseñar y personalizar tu mensaje de alerta.
Verás que la barra de alerta aparece por defecto en la parte superior de la pantalla. Para cambiar el texto de la barra flotante, haz clic en el área que quieras editar y escribe tu mensaje personalizado.
También puedes cambiar el tipo de letra, el tamaño, el color, etc.
Si quieres aumentar la urgencia de tu barra de alerta, puedes arrastrar el bloque Cuenta atrás y soltarlo sobre la barra flotante.
A partir de ahí, puedes seleccionar el temporizador de la plantilla, personalizar su configuración e introducir la fecha y hora de finalización que desees.
También puede configurar el temporizador como una cuenta atrás permanente. Una cuenta atrás permanente se establece por separado para cada visitante de su sitio web.
Cuando estés satisfecho con tu barra de alertas, haz clic en el botón Guardar situado en la parte superior de la pantalla.
Paso 4: Establecer reglas de visualización y 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 la barra. La regla por defecto muestra la barra después de que un visitante ha estado en la página durante 5 segundos.
Cambiaremos esto a 0 segundos para que un mensaje de alerta aparezca instantáneamente. Para ello, basta con cambiar la cuenta atrás 'seg' a 0.
Una vez hecho esto, haga clic en el botón Paso siguiente para cambiar la configuración de la acción. Puede dejar el menú desplegable 'mostrar la vista de campaña' en Optin y seleccionar si desea reproducir un efecto de sonido cuando aparezca la barra de alerta.
Tras realizar estos cambios, haz clic en el botón Paso siguiente. 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.
Paso 5: Publicar la barra de alertas en su sitio 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 su sitio de WordPress.
Para ello, cierre el editor de campañas y vaya a OptinMonster " Campañas. Verá su campaña en la lista, y el Estado será Pendiente.
Para cambiarlo, haga clic en el estado Pendiente y seleccione Publicar en el menú desplegable.
Ahora, puede visitar cualquier página de su sitio web y ver su barra de alertas en acción.
Preguntas frecuentes
¡Ya está!
Esperamos que este artículo te haya ayudado a aprender cómo crear un mensaje de alerta en WordPress. Si buscas otra forma de recopilar opiniones, echa un vistazo al plugin UserFeedback. Es súper fácil de usar y te permite añadir elegantes formularios emergentes en cuestión de minutos.
Antes de irte, puede que también te gusten estas guías sobre cómo añadir Google Analytics a WordPress y los mejores proveedores de alojamiento para WordPress.
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
