¿Desea agregar una barra de alerta a su sitio de WordPress?
Una barra de alerta o barra de notificación es una excelente manera de informar a los 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 con 2 soluciones sencillas.
¿Por qué crear una barra de alerta en WordPress?
Una barra de alerta es una excelente manera de informar a sus visitantes sobre cualquier cosa importante. Eso podría ser un evento de ventas en curso, una actualización sobre sus horarios de apertura o cambios en sus servicios.
También puede usar una barra de alerta para informar a los visitantes sobre una oferta especial, como una oferta de compre uno y llévese otro gratis. Esta es una gran opción si tiene una tienda en línea.
Usar una barra de alerta es mejor que simplemente poner un anuncio en tu página de inicio. Su barra de alerta puede aparecer de manera destacada en la parte superior de cada página en todo su sitio.
Es fácil crear una barra de alerta en WordPress. Cubriremos el mejor complemento de la barra de notificaciones y un método manual 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: Creación de una barra de alerta usando OptinMonster
OptinMonster es el mejor software de optimización de conversión del mercado. Le ayuda 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 que lo ayudan 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. Este es el que vamos a crear:
Hay muchas plantillas prediseñadas dentro de OptinMonster. Esto hace que sea muy fácil crear una barra de alertas que se vea muy bien en cuestión de minutos.
En primer lugar, debe visitar el Sitio web OptinMonster y registrarse para obtener una cuenta.
A continuación, debe instalar y activar el OptinMonster WordPress enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Este complemento le permite conectar su sitio de WordPress al software OptinMonster.
Tras la activación, ahora deberá conectar su cuenta. Para comenzar, simplemente diríjase a OptinMonster » Ajustes desde tu panel de WordPress.
A continuación, continúe y haga clic en el botón ‘Conectar una cuenta existente’.
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 ‘Conectarse a WordPress’.
Ahora puede seguir las indicaciones en pantalla para conectar su cuenta de OptinMonster.
Después de conectar OptinMonster, simplemente vaya a OptinMonster » Campañas en tu panel de WordPress. Continúe y haga clic en el botón ‘Crear su primera campaña’.
Desde aquí, debe seleccionar la ‘Barra flotante’ como su Tipo de campaña para crear una barra de alerta.
A continuación, verá una selección de plantillas de campaña. Simplemente elija una plantilla que desee utilizar. Solo necesita pasar el mouse sobre él y hacer clic en el botón ‘Usar plantilla’ para seleccionarlo.
Vamos a utilizar la plantilla ‘Promoción’ para nuestra barra de alertas.
A continuación, se le pedirá que asigne un nombre a su plantilla. Una vez que haya nombrado su campaña, haga clic en el botón ‘Comenzar a construir’.
Ahora, verás el editor de campañas. Aquí es donde puedes diseñar tu campaña.
Verás que tu barra de alertas aparece en la parte inferior de tu pantalla por defecto. Para moverlo a la parte superior de la pantalla, haga clic en ‘Configuración flotante’ en el lado izquierdo.
A continuación, simplemente haga clic en el control deslizante para mover la barra flotante a 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.
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 luego 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.
También puede configurar el temporizador para que actúe como una cuenta regresiva perenne en lugar de una cuenta regresiva estática, si lo prefiere. Se establece una cuenta regresiva perenne por separado para cada visitante de su sitio.
Continúe y realice tantos cambios en su 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.
A continuación, debe ir a la pestaña «Reglas de visualización» para seleccionar cuándo y dónde se mostrará su barra de alerta en su sitio. La regla predeterminada es que su barra de alerta se muestre 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 instantáneamente. Para hacer eso, simplemente cambie la cuenta regresiva de ‘seg’ a 0.
Luego, haga clic en el botón ‘Siguiente paso’ para cambiar la configuración de la acción. Puede dejar la configuración de ‘mostrar la vista de la campaña’ en Optin y seleccionar si desea reproducir un efecto de sonido cuando aparezca la barra de alerta.
Una vez que haya realizado los cambios, continúe y haga clic en el botón «Siguiente paso» una vez más y verá un resumen.
Una vez que 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’.
El paso final es activar la campaña en su propio sitio web.
Para hacer eso, puede cerrar el editor de campañas y luego ir a OptinMonster » Campañas. Verá su campaña enumerada aquí y su Estado será Pendiente.
Continúe y haga clic en el estado Pendiente para cambiarlo a ‘Publicar’ en el menú desplegable.
Ahora, simplemente visite cualquier página de su sitio web y verá su campaña en acción.
Método 2: Cree manualmente una barra de alerta usando 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.
Nota: No recomendamos este método para principiantes. Si es nuevo en WordPress o no se siente seguro agregando código a su sitio, le sugerimos que utilice el método anterior.
Primero, deberá copiar y pegar un código CSS personalizado para la barra de alerta. Simplemente ve a Apariencia » Personalizador en su tablero, luego haga clic en la pestaña ‘CSS adicional’ en la parte inferior.
Ahora, adelante, copie y pegue este código CSS en ese 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 haber copiado 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.
A continuación, debe agregar el código HTML para el texto de la barra de alerta en su sitio.
La mejor manera de hacer esto es instalar y activar la versión gratuita Insertar complemento de encabezados y pies de página.
Nota: Insertar encabezados y pies de página es uno de los complementos propios de AprenderWP. Lo creamos para que sea realmente 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 encabezados y pies de página en tu administrador de WordPress. Simplemente copie y pegue la siguiente línea de código HTML en el cuadro ‘Scripts in Body’:
<div class="alertbar">We are currently closed due to Covid-19.</div>
Así es como debería verse ese código en el cuadro ‘Secuencias de comandos en el cuerpo’ de Insertar encabezados y pies 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 una vez que haya terminado.
Ahora, puede visitar su sitio para ver la barra de alerta. Debería aparecer en la parte superior de cada página, así:
Consejo: En algunos temas de WordPress, su barra de alerta puede superponerse a su menú. Puede modificar 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 barra.
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.
.