Cómo crear cuadros de alerta en WordPress

Si su sitio web recibe un número sólido de visitantes, pero las suscripciones o las conversiones son más bajas de lo que le gustaría, no está solo. Hay toneladas de recursos disponibles para ayudarlo a aumentar su tráfico, pero lograr que ese tráfico tome las medidas correctas en su sitio es otra historia.

Una posible solución es usar un cuadro de alerta. Esta es una herramienta poderosa y simple que puede aumentar drásticamente las conversiones en su sitio de WordPress. Además, es muy fácil crear y personalizar esta función.

En este artículo, cubriremos qué es un cuadro de alerta y por qué debería usar uno. Luego le mostraremos cómo hacer su propio cuadro de alerta en WordPress. ¡Vamos a sumergirnos!

¿Qué es un cuadro de alerta?

Un cuadro de alerta es exactamente lo que parece. Es una alerta que aparece en un sitio web para notificar a los visitantes que algo ha ocurrido. Es posible que conozca mejor esta característica como una 'ventana emergente'.

Los cuadros de alerta en WordPress generalmente toman una de dos formas. Es posible que vea una ventana emergente que aparece en la pantalla o una barra que se ejecuta a lo largo de la parte superior de su página (a veces llamada "barra de saludo").

¿Por qué crear un cuadro de alerta?

Los cuadros de alerta generalmente se usan para notificar (o alertar) a los usuarios sobre algo importante que sucede en su sitio. Por ejemplo, puede usar un cuadro de alerta de WordPress para informar a los visitantes sobre una venta especial de un producto que de otro modo no verían, o de una serie de publicaciones destacadas.

Otro uso muy común de esta función es capturar las direcciones de correo electrónico de los visitantes. Muchos complementos de cuadro de alerta de WordPress se pueden configurar para que aparezcan cuando un usuario aleja el cursor del sitio (para cerrar la pestaña o presionar el botón Atrás, por ejemplo).

Estas alertas de 'último minuto' pueden ser una excelente manera de capturar los detalles de contacto de los visitantes antes de que se vayan, lo que podría resultar en una conversión en el futuro. Estas alertas pueden ser extremadamente efectivas: las ventanas emergentes de mejor rendimiento tienen una tasa de conversión de más del 9 por ciento. En otras palabras, vale la pena el esfuerzo de implementarlos.

Crear un cuadro de alerta con un complemento

Gracias a los complementos de WordPress, crear sus propios cuadros de alerta es simple. Lo guiaremos a través de cada paso utilizando el potente (y gratuito) complemento Popup Maker.

Paso 1: descargue un complemento (como Popup Maker)

Lo primero que deberá hacer es elegir un complemento dedicado. Como mencionamos anteriormente, el complemento gratuito Popup Maker está bien revisado y es una opción sólida.

Para instalar esta herramienta, diríjase a su panel de control de WordPress y navegue hasta Complementos > Agregar nuevo . Busque "popup maker", y debería ser la primera entrada:

Luego haga clic en Instalar ahora . Cuando termine de instalarse, no olvide activar el complemento seleccionando Activar . Tenga en cuenta que si bien Popup Maker es gratuito, algunas funciones requieren un plan premium para usar.

Paso 2: crea una ventana emergente

Con Popup Maker instalado, debería ver una nueva entrada en su barra lateral de WordPress que lleva el nombre del complemento . Haga clic en él para abrir una lista de todas sus ventanas emergentes. Al principio estará vacío, pero estás a punto de remediarlo.

Para crear una ventana emergente, haga clic en Agregar nueva ventana emergente en la parte superior de la pantalla. Esto abrirá el editor de WordPress:

Cuando visite esta pantalla, aparecerá un tutorial que le mostrará cómo crear una ventana emergente. Lo primero que se le pide que haga es ingresar un nombre, para que pueda identificar la ventana emergente más tarde.

Después de eso, puede ingresar un título opcional que aparecerá dentro de la ventana emergente como título. En el campo del editor principal, también puede ingresar el contenido que desea mostrar en la ventana emergente. Si solo desea crear un formulario de contacto simple, también puede usar un código abreviado predefinido.

Estos códigos abreviados se encuentran debajo de un nuevo botón con el logotipo de Popup Maker en la barra de herramientas:

Haga clic en Formulario de suscripción para insertar un formulario de contacto básico para capturar correos electrónicos. El texto de los campos y el aviso de privacidad se pueden personalizar haciendo clic en el formulario y seleccionando el botón de edición. Hay una serie de opciones para estilos y diseño, además de texto.

Paso 3: configure disparadores para su ventana emergente

Con su formulario emergente creado, el siguiente paso es configurar sus disparadores. Estos determinan cuándo aparece el cuadro de alerta.

En la pantalla del editor de elementos emergentes, desplácese hacia abajo hasta Configuración de elementos emergentes y seleccione Disparadores de la lista. Luego haga clic en Agregar nuevo activador :

El complemento básico de Popup Maker contiene tres opciones aquí: Haga clic en Abrir , Retraso de tiempo/Apertura automática y Envío de formulario . También puede seleccionar Exit Intent como disparador si tiene un plan premium; esta es la opción que debe usar si desea que aparezca la ventana emergente cuando un usuario intente abandonar su sitio.

También puede ajustar en qué páginas aparece el cuadro de alerta en la pestaña Orientación . Asegúrese de personalizar esta configuración si desea excluir ciertas páginas o tipos de dispositivos para que no vean la alerta.

Paso 4: Diseñe su cuadro de alerta

Finalmente, puede cambiar la apariencia de su nuevo cuadro de alerta para que coincida mejor con el tema de su sitio. En el área Configuración emergente , seleccione Mostrar . Allí, puede cambiar el lugar donde aparece la ventana emergente en la pantalla (incluso como una barra superior), establecer su tamaño y posición, y elegir uno de varios temas disponibles:

Cuando haya terminado, asegúrese de seleccionar el botón Publicar para guardar sus cambios y activar su ventana emergente.

Creación de un cuadro de alerta sin un complemento

Si prefiere no usar un complemento, también puede crear un cuadro de alerta usted mismo usando algún código y un poco de esfuerzo. Deberá editar su archivo header.php y agregar algo de CSS a su sitio. Para este ejemplo, crearemos una barra de alerta en la parte superior de la página.

Paso 1: edite su archivo header.php

Lo primero que deberá hacer es agregar un código a su archivo header.php . Se puede acceder a esto usando el Editor de temas de WordPress. Desde su tablero, vaya a Apariencia > Editor de temas . Luego seleccione Encabezado de tema (header.php) en la barra lateral de la derecha:

Copie y pegue el siguiente código en el archivo al final de la sección <head> :

<div class="alertbar">All items 20% off!</div>

Así es como debería verse el archivo después de esta adición:

Esto mostrará el mensaje "¡Todos los artículos tienen un 20 % de descuento!" en tu barra de alertas. Puedes personalizar el texto como quieras.

Paso 2: Agregar CSS personalizado

Finalmente, deberá usar hojas de estilo en cascada (CSS) para diseñar su alerta. Puede agregar CSS usando el Personalizador de WordPress.

Para hacerlo, dirígete a tu panel de WordPress y navega a Apariencia > Personalizar. Esto abrirá su sitio en el Personalizador. En la barra lateral, seleccione CSS adicional . Esto abre un cuadro de código donde puede ingresar CSS personalizado.

Pegue el siguiente código en el campo de texto:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Así es como se ve la alerta:

El código anterior crea una barra gris oscuro con texto blanco, pero puede modificar los colores y el tamaño como desee para que coincida con su tema. Cuando haya terminado, haga clic en Publicar para guardar los cambios.

Mejore su sitio con WP Engine

Ya sea que esté buscando aumentar las suscripciones de correo electrónico o necesite una forma simple de notificar a los visitantes sobre ofertas especiales, un cuadro de alerta es una solución elegante y efectiva. Implementar uno en su sitio de WordPress puede aumentar drásticamente su tasa de conversión.

Puede implementar un cuadro de alerta con un complemento de WordPress como Popup Maker. También puede codificar uno usted mismo con relativa facilidad con un poco de CSS. De cualquier manera, recibirá una alerta personalizable que está diseñada para aumentar las suscripciones y las conversiones.

Si desea mejorar aún más su sitio, ¡asegúrese de consultar nuestros planes de alojamiento de WordPress dedicados!