Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

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

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

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Desea añadir un mensaje de alerta a su sitio web WordPress?

Con un mensaje de alerta personalizado, puede informar a los visitantes sobre actualizaciones importantes, notificaciones o errores. Sin embargo, es posible que las funciones predeterminadas de WordPress no siempre sean suficientes para el tipo de alerta que desea mostrar.

Afortunadamente, añadir mensajes de alerta personalizados en WordPress es un proceso sencillo que puede mejorar la experiencia de usuario de su sitio web. En este artículo, exploraremos los pasos necesarios para añadir un mensaje de alerta personalizado en WordPress.

¿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 no siempre son 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.

checkout mensaje de alerta

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.

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

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: utilizando un plugin de 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.

Sumerjámonos.

Método 1: Crear un mensaje de alerta de WordPress con 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 Arrastrar y soltar WordPress constructor de sitios web

SeedProd cuenta con una potente interfaz de arrastrar y soltar que facilita la adición de nuevos diseños a WordPress. Con su biblioteca de plantillas profesionales y su sistema de diseño basado en bloques, puedes añadir mensajes de alerta y widgets personalizados en cualquier parte de tu sitio en cuestión de minutos.

También puede utilizar SeedProd para:

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 SeedProd Instale y active 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.

introduzca su clave 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 Bu ilder 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.

Segundo paso Elija una plantilla prefabricada

Ya que vamos a utilizar la opción del Theme Builder, el siguiente paso es visitar la página 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.

Kits de plantillas temáticas

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.

Kits de plantillas SeedProd

Cuando encuentres una plantilla que te guste, pasa el ratón sobre ella 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.

Elija una plantilla personalizada

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.

Partes temáticas de SeedProd

Por ejemplo, con la ayuda de los siguientes tutoriales, podrá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.

editar página de inicio

Paso 3. Añadir el bloque de mensajes de alerta Añadir 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.

Interfaz del constructor de páginas SeedProd

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.

Bloque de alerta SeedProd

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.

opciones de tipo de cuadro de alerta

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.

Título del mensaje de alerta de WordPress

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.

Mensaje de alerta Descripción de WordPress

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.

Icono de mensaje de alerta de WordPress

If you want to use custom colors for your alert message, click the Advanced tab in the block settings. Here, you can edit the typography, change the colors for the description, title, and background, and select a text shadow.

Configuración avanzada del bloqueo de alertas

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

Animaciones de mensajes de alerta

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

Guardar los cambios de SeedProd

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.

mensaje de alerta de confirmación de pedido WordPress

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. Publique sus cambios Publique sus cambios

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í".

activar el tema seedprod

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

Mensaje de alerta Ejemplo de WordPress

Método 2: Crear una barra de alerta 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. Con su interfaz fácil de usar, le ayuda a convertir a los visitantes del sitio en suscriptores y clientes.

kit de herramientas de optimización de la conversión optinmonster

OptinMonster ofrece varios tipos de opt-in, incluyendo lightbox popups, alfombras de bienvenida, temporizadores de cuenta atrás, y más, que pueden ayudarle a aumentar los suscriptores y las ventas en su sitio web. También ofrece tipos de notificación ilimitados y complementos para varios servicios de marketing por correo electrónico y API.

Además, como hemos 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:

Barra de alerta OptinMonster

Empecemos.

Paso 1. Instale y active OptinMonster Instale y active OptinMonster

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.

Conecte su cuenta OptinMonster

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

Conectar OptinMonster a WordPress

Paso 2. Elija una plantilla de barra 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.

Crear la primera campaña OptinMonster

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.

Elegir opciones de campaña

En esta página, elija la Barra Flotante como Tipo de Campaña para crear su barra de alerta.

Tipo de campaña de barra flotante

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.

Plantilla de barra flotante de alerta

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.

nombre de la barra de alerta flotante

Paso 3. Personalice su barra de mensajes 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.

Personalizar el texto de la barra de alertas

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ñadir barra de alerta con cuenta atrás

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.

Ajustes del temporizador de cuenta atrás

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. Configure los ajustes de pantalla

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.

Reglas de visualización de OptinMonster

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.

Configuración de la acción de campaña OptinMonster

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. Publique su barra de alertas

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

Publicar campaña OptinMonster

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.

Activar la barra de alertas en WordPress

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.

Barra de alerta flotante WordPress ejemplo

¡Eso es!

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 dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.