Cómo crear una barra de alerta de WordPress (2 modos de luz)

¿Le gustaría agregar una barra de alerta a su sitio web 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 de luz.

¿Por qué crear una barra de alerta en WordPress? Un bar de alerta es una excelente manera de informar a sus visitantes sobre cualquier cosa importante. Este podría ser un evento de ventas en curso, una actualización sobre las horas de apertura o los cambios en sus servicios.
También puede usar un bar de alerta para informar a los visitantes sobre una oferta especial, como una compra, obtener una oferta gratuita. Esta es una excelente opción si ejecuta una tienda en línea. Usar una barra de alerta es mejor que simplemente colocar un anuncio en su página inicial. Su barra de alerta puede aparecer visiblemente justo en la parte superior de cada página de todo el sitio. Es fácil crear una barra de alerta en WordPress. Cubriremos el mejor complemento para la barra de notificación y un método manual utilizando el código HTML y CSS. Simplemente haga clic en los enlaces a continuación para moverse directamente a cada opción:
Método 1: Optinmonster
Método 2: HTML y CSS personalizado
Método 1: Crear una barra de alerta que use OptinMonster OptinMonster es el mejor software de optimización de conversión. Le ayuda a convertir más visitantes al sitio en suscriptores y clientes. Viene con hermosas ventanas de la caja de luz, alfombras de bienvenida, temporizador y otras superposiciones dinámicas que lo ayudan a crecer suscriptores y ventas para su sitio web. También puede usar OptinMonster para crear una barra de alerta para su sitio web. Esto es lo que crearemos: hay muchas plantillas preconstruidas en OptinMonster. Esto hace que sea muy fácil crear una barra de alerta que se vea genial en unos minutos.

En primer lugar, debe visitar el sitio web de OptinMonster y registrarse para obtener una cuenta. Luego debe instalar y activar el complemento OptinMonster WordPress. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Este complemento le permite conectar su sitio web de WordPress al software OptInmonster. Después de la activación, ahora tendrá que conectar su cuenta. Para comenzar, simplemente cambie a la configuración de OptinMonster »desde el tablero de WordPress. Luego continúe y haga clic en el botón “Conecte una cuenta existente”.
Ahora verá una ventana emergente que le pide que ingrese la dirección de correo electrónico. Simplemente seleccione la dirección de correo electrónico y haga clic en el botón “Iniciar sesión en WordPress”.

Ahora puede seguir las instrucciones en la pantalla para conectar su cuenta OptinMonster. Después de conectar OptinMonster, simplemente vaya a campañas de OptinMonster »en el tablero de WordPress. Continúe y haga clic en el botón “Crea tu primera campaña”.

Desde aquí, debe seleccionar la “barra flotante” como un tipo de campaña para crear una barra de alerta. Luego verá una variedad de plantillas de campaña. Simplemente elija una plantilla que desee usar. Solo tiene que cruzar el mouse sobre él y hacer clic en el botón “Usar plantilla” para seleccionarlo. Usaremos la plantilla de “promoción” para nuestra barra de alerta.

Luego se le pedirá que le dé un nombre a la plantilla. Después de haber llamado a la campaña, haga clic en el botón “Iniciar el edificio”.

Ahora, verá al editor de la campaña. Aquí puedes diseñar tu campaña. Verá que la barra de alerta aparece 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” en el lado izquierdo.

Luego 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 cualquier texto que desee.

También puede cambiar la fuente, el tamaño y el color del texto y muchos más. Para cambiar el temporizador de conteo inverso, simplemente seleccione el temporizador de plantilla y luego haga clic en el conteo inverso en el menú izquierdo. Luego continúe e ingrese la fecha y hora de finalización deseadas.

También puede configurar el temporizador para que actúe como un recuento siempre verde en lugar de un recuento inverso estático, si lo prefiere. Un recuento inverso eterno se establece por separado para cada visitante de su sitio.

Continúe y haga cuántos cambios desee en la barra de alerta. Después de estar satisfecho con él, asegúrese de hacer clic en el botón Guardar en la parte superior de la pantalla.

Luego, debe acceder a la pestaña “Reglas de visualización” para seleccionar cuándo y dónde se mostrará la barra de alerta en su sitio web es que la barra de alerta se mostrará después de que el visitante esté en la página durante 5 segundos. Cambiaremos esto a 0 segundos, por lo que la barra de alerta aparece instantáneamente. Para hacer esto, cambie el recuento inverso “SEC” a 0. Luego, haga clic en el botón “siguiente paso” para cambiar la configuración de acción. Puede dejar la configuración “Visualización de visualización de la campaña” en Optin y puede seleccionar si desea reproducir un efecto de sonido cuando aparece la barra de alerta.

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

Una vez que disfrute, haga clic en el botón “Guardar” en la parte superior de la pantalla. Después de eso, puede acceder a la pestaña Publicar en la parte superior y puede cambiar el estado de publicación para “publicar”.

El último paso es activar la campaña directamente en su sitio web. Para esto, puede cerrar el editor de la campaña y luego ir a las campañas de OptinMonster ». Verá su campaña en la lista aquí, y su condición estará esperando. Vaya más allá y haga clic en el estado de espera para cambiarlo en la “publicación” del menú Drop -down.

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

Método 2: Crear manualmente una barra de alerta usando HTML / CSS personalizado ¿Qué pasa si no desea usar OptinMonster? En este método, le mostraremos cómo crear una barra de notificación utilizando el código HTML y CSS. Nota: No recomendamos este método para principiantes. Si es nuevo en WordPress o no confía en el código agregado en su sitio, le sugerimos que use el método anterior. Primero, deberá copiar y pegar un código CSS personalizado para la barra de alerta. Simplemente acceda a la página de la página »Personalizador en el tablero, luego haga clic en la pestaña” CSS adicional “en la parte inferior. Ahora, continúe y copie y pegue este código CSS en ese cuadro: .alertbar {

Color de fondo: #FF0000;

Color: #ffffff;

Bloqueo de pantalla;

Línea de altura: 45px;
Altura: 50px;
Posición: relativo;
Text-Align: Center;
Decoración de texto: ninguna;
Arriba: 0px;
Ancho: 100%;
Índice Z: 100;
}
Después de haber copiado el código, debería verse así. Simplemente haga clic en el botón Publicar en la parte superior de la página para guardar el código CSS.
Luego, debe agregar el código HTML para el texto de la barra de alerta a su sitio. La mejor manera de hacerlo es instalar y activar el complemento IEADers y los pies. Nota: Insertar encabezados y pies de página es uno de los complementos propios de WPBeginner. Lo creé para facilitar la adición de escrituras, código HTML y muchos más en las páginas de su sitio web. Después de activar el complemento, vaya a Configuración »Inserte encabezados y sótanos en su administrador de WordPress. Simplemente copie y pegue la siguiente línea de código HTML en el cuadro “Escrituras en el cuerpo”: Actualmente cerramos debido a Covid-19. Escrituras en el cuerpo “de los encabezados y los pies: por supuesto: por supuesto , puede cambiar el texto de alerta con lo que desee. Recuerde hacer clic en el botón “Guardar” en la parte inferior de la página después de que haya terminado. Ahora puede visitar su sitio para ver la barra de alerta. Debe aparecer en la parte superior de cada página, como sigue: