¿Desea agregar una barra de recordatorio a su sitio de WordPress?

Las barras de alerta o las barras de notificación son una excelente manera de mantener informados a sus visitantes sobre actualizaciones importantes, ofertas especiales, lanzamientos de nuevos productos y más.

En este artículo, le mostraremos cómo crear una barra de alerta en WordPress usando 2 soluciones simples.

Crea una barra de alerta para tu sitio de WordPress

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

Las barras de alerta son una excelente manera de mantener informados a sus visitantes sobre cualquier información importante. Esto podría ser una venta en curso, una actualización sobre su horario comercial o un cambio en su servicio.

También puede usar la barra de alerta para informar a los visitantes sobre ofertas especiales, como compre uno y llévese otro gratis. Esta es una gran opción si tiene una tienda en línea.

Usar una barra de recordatorio es mejor que hacer un anuncio en la página de inicio. Su barra de alerta se puede mostrar de manera destacada en la parte superior de cada página en todo su sitio web.

Crear una barra de alerta en WordPress es fácil. Cubriremos los mejores complementos de barra de notificación y métodos manuales usando código HTML y CSS. Simplemente haga clic en los enlaces a continuación para ir directamente a cada opción:

Método 1: Crear una barra de alertas con OptinMonster

OptinMonster es el mejor software de optimización de conversión del mercado. Puede ayudarlo a convertir más visitantes del sitio web en suscriptores y clientes.

Viene con hermosas ventanas emergentes de caja de luz, tapetes de bienvenida, temporizadores de cuenta regresiva y otras superposiciones dinámicas para ayudarlo a aumentar los suscriptores y las ventas de su sitio web.

También puede usar OptinMonster para crear una barra de alerta para su sitio web. Esto es lo que vamos a crear:

Barra de alertas creada en OptinMonster

Hay muchas plantillas prediseñadas en OptinMonster. Esto hace que sea muy fácil crear una barra de alertas de gran apariencia en minutos.

Primero, debe visitar el sitio web de OptinMonster y registrarse para obtener una cuenta.

A continuación, debe instalar y activar el complemento OptinMonster WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Este complemento le permite conectar su sitio de WordPress al software OptinMonster.

Después de la activación, ahora necesita conectar su cuenta.Primero, solo ve a OptinMonster » Ajustes desde tu panel de WordPress.

A continuación, continúe y haga clic en el botón “Conectar cuenta existente”.

Conecta tu cuenta de OptinMonster

Ahora verá una ventana emergente que le pedirá que ingrese su dirección de correo electrónico. Simplemente seleccione su dirección de correo electrónico y haga clic en el botón “Conectar a WordPress”.

Haga clic en el botón Conectar a WordPress

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

Una vez que OptinMonster esté conectado, simplemente vaya a OptinMonster » Eventos en tu panel de WordPress. Continúe y haga clic en el botón “Crear su primera campaña”.

Crear una nueva campaña

Desde aquí, deberá seleccionar “Barra flotante” como su tipo de campaña para crear una barra de alerta.

Elija un tipo de campaña de barra flotante

A continuación, verá una selección de plantillas de actividades. Simplemente elija la plantilla que desea utilizar. Puede seleccionarlo simplemente moviendo el mouse sobre él y haciendo clic en el botón “Usar plantilla”.

Usaremos la plantilla “Promoción” para la barra de alerta.

Elige un tema para tu barra de alertas

A continuación, se le pedirá que asigne un nombre a la plantilla. Una vez que hayas nombrado tu campaña, haz clic en el botón “Comenzar a construir”.

Introduce un nombre para la campaña.

Ahora verá el editor de campañas. Aquí puedes diseñar tu campaña.

Verá su barra de alerta en la parte inferior de la pantalla de forma predeterminada. Para moverlo a la parte superior de la pantalla, haga clic en Configuración flotante a la izquierda.

Cambiar la configuración flotante de la barra de alerta

A continuación, simplemente haga clic en el control deslizante para mover la barra flotante a la parte superior de la página.

La barra flotante ahora está en la parte superior de la página.

Para cambiar el texto en la barra flotante, simplemente haga clic en el área que desea cambiar y escriba el texto que desee.

Editar el texto de la barra de alerta

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

Para cambiar el temporizador de cuenta regresiva, simplemente seleccione el temporizador en la plantilla y haga clic en la pestaña Cuenta regresiva en el menú de la izquierda. Luego continúe e ingrese la fecha y hora de finalización deseadas.

Edite el temporizador de cuenta regresiva para la barra de recordatorios

Si lo prefiere, también puede configurar el temporizador para una cuenta regresiva perenne en lugar de una cuenta regresiva estática. Establezca una cuenta regresiva perenne individualmente para cada visitante de su sitio web.

Continúe y realice tantos cambios en la barra de alerta como desee. Una vez que esté satisfecho con él, no olvide hacer clic en el botón “Guardar” en la parte superior de la pantalla.

Guarde su actividad de OptinMonster

A continuación, debe ir a la pestaña Reglas de visualización para elegir cuándo y dónde aparecerá la barra de alerta en su sitio web. La regla predeterminada es mostrar la barra de alerta 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 alerta aparezca inmediatamente. Para hacer esto, simplemente cambie la cuenta regresiva de “segundos” a 0.

Cambiar las reglas de visualización de la barra de alertas

Luego, haga clic en el botón Siguiente para cambiar la configuración de la acción. Puede dejar la configuración “Mostrar vista de campaña” en Optin y elegir si desea que se reproduzca un efecto de sonido cuando aparezca la barra de alerta.

Cambiar la configuración de la acción de la barra de alertas

Después de realizar los cambios, continúe y haga clic en el botón Siguiente nuevamente y verá un resumen.

Mostrar resumen de reglas

Cuando esté satisfecho, simplemente haga clic en el botón “Guardar” en la parte superior de la pantalla.

Después de eso, puede ir a la pestaña “Publicar” en la parte superior y cambiar el “Estado de publicación” a “Publicar”.

Cambiar el estado de la publicación

El paso final es activar la campaña en su propio sitio web.

Para ello puedes cerrar el editor de actividades e ir a OptinMonster » EventosVerá su campaña aquí y su estado será Pendiente.

Continúe y haga clic en el estado “Pendiente” para cambiarlo a “Publicar” en el menú desplegable.

Cambiar el estado de la actividad de pendiente a liberado

Ahora, simplemente visite cualquier página de su sitio web y verá su campaña en ejecución.

Barra de alertas creada en OptinMonster

Método 2: crear manualmente la barra de alerta con HTML/CSS personalizado

¿Qué sucede si no desea utilizar OptinMonster? En este método, le mostraremos cómo crear una barra de notificación usando código HTML y CSS.

notas: No recomendamos este método para principiantes. Si es nuevo en WordPress o no se siente seguro de agregar código a su sitio, le recomendamos que utilice el método anterior.

Primero, debe copiar y pegar un código CSS personalizado para la barra de alerta.solo ve a Apariencia » Personalizador página, luego haga clic en la pestaña “CSS adicional” en la parte inferior.

Ingrese CSS adicional en el personalizador de temas

Ahora, adelante, copie y pegue este código CSS en el cuadro:

.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;
}

Después de copiar ese código, debería verse así. Simplemente haga clic en el botón publicar en la parte superior de la página para guardar su código CSS.

CSS adicional mostrado en el personalizador de temas

A continuación, debe agregar el código HTML para el texto de la barra de alerta en su sitio.

La mejor manera es instalar y activar el complemento gratuito Insertar encabezado y pie de página.

notas: Insertar encabezados y pies de página es uno de los complementos propios de AprenderWP. Lo creamos para que sea muy fácil agregar scripts, código HTML y más a las páginas de su sitio web.

Después de activar el complemento, vaya a Configuración » Insertar encabezado y pie de página en tu administrador de WordPress. Simplemente copie y pegue las siguientes líneas de código HTML en el cuadro “Script en el cuerpo”:

<div >We are currently closed due to Covid-19.</div>

Así es como se ve el código en el cuadro “Script en el cuerpo” insertado en el encabezado y pie de página:

Agregue código HTML usando el complemento Insertar encabezado y pie de página

Por supuesto, puede cambiar el texto de alerta a cualquier otra cosa que desee. No olvide hacer clic en el botón “Guardar” en la parte inferior de la página cuando haya terminado.

Ahora puede visitar su sitio para ver la barra de alertas. Debería aparecer en la parte superior de cada página como esta:

Barra de alerta CSS en el sitio web

propina: En algunos temas de WordPress, su barra de alerta puede superponerse a su menú. Puede cambiar la altura de la barra a 40px o 30px para evitar esto. También deberá reducir la altura de la línea en consecuencia para que su texto permanezca centrado verticalmente en la columna.

Esperamos que este artículo te haya ayudado a aprender cómo crear una barra de alerta en WordPress. También le puede interesar nuestra comparación de los mejores creadores de páginas de arrastrar y soltar de WordPress para ayudarlo a personalizar aún más su sitio sin escribir ningún código, y nuestra lista de los mejores complementos de WooCommerce para aumentar las ventas de su tienda.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.