Cómo crear una barra de notificación en WordPress (3 formas sencillas)

¿Quiere agregar una barra de notificaciones a su sitio de WordPress?

La barra de notificaciones o la barra de notificaciones es una excelente manera de notificar 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 notificaciones en WordPress con tres soluciones simples.

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

La barra de notificaciones es una excelente manera de informar a sus visitantes sobre algo importante en su sitio web. Esto podría ser un evento de venta actual, una actualización de su horario comercial o cambios en sus servicios.

También puede usar una barra de notificación para notificar a los visitantes sobre una oferta especial, como una oferta de compre uno y obtenga uno gratis. Esta es una gran opción si tiene una tienda en línea.

Usar una barra de notificaciones es mejor que simplemente poner un mensaje en tu página de inicio. Su barra de notificación se puede mostrar de manera destacada en la parte superior de cada página de su sitio.

Es fácil crear una barra de notificación en WordPress. Veremos métodos que usan los mejores complementos de la barra de notificaciones y un método manual que usa 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 y generación de leads del mercado. Le ayuda a convertir más visitantes del sitio web en suscriptores y clientes.

OptinMonster ofrece un creador de campañas de arrastrar y soltar. Cuenta con hermosas ventanas emergentes de caja de luz, paneles 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. Sus plantillas preconstruidas hacen que sea realmente fácil crear una barra de alertas de gran apariencia en minutos.

Debes visitar primero Sitio web OptinMonster y abrir una cuenta. Necesitas al menos el plan básico ya que incluye el tipo de campaña Barra Flotante.

Entonces necesitas instalarlo y activarlo. OptinMonster WordPress enchufar. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

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

Después de la activación, verá la pantalla de inicio y el asistente de configuración. Continúe y haga clic en el botón "Vincular su cuenta existente".

Se abrirá una nueva ventana en la que deberá conectar su sitio de WordPress a OptinMonster.

Simplemente haga clic en el botón "Conectar a WordPress" para continuar.

Ahora puede seguir las instrucciones en pantalla para vincular su cuenta de OptinMonster.

Entonces solo ve a OptinMonster » Campañas en tu panel de WordPress. Continúe y haga clic en el botón "Crear su primera campaña".

Esto abrirá el creador de campañas de OptinMonster.

Desde aquí, debe seleccionar "Barra flotante" como tipo de campaña para crear una barra de notificación.

A continuación, verá una selección de plantillas de campaña. Seleccione una plantilla para usar.

Todo lo que tiene que hacer es pasar el cursor sobre él y hacer clic en el botón Usar plantilla para seleccionarlo. Usaremos una plantilla de código de cupón promocional para nuestra barra de notificaciones.

Luego se le pedirá que asigne un nombre a su plantilla. Después de darle un nombre a su campaña, simplemente haga clic en el botón "Comenzar a construir".

Ahora verá el editor de campañas. Puedes diseñar el tuyo aquí barra de notificación.

OptinMonster proporciona diferentes bloques que simplemente puede arrastrar y soltar en la plantilla. Por ejemplo, puede agregar una imagen, texto, botón, etc. a la barra de notificaciones.

Verás que la barra de notificaciones está en la parte inferior de la pantalla por defecto.

Para moverlo a la parte superior de la pantalla, debe hacer clic en "Configuración de la barra flotante" en el lado izquierdo. Luego simplemente haga clic en el control deslizante para mover la barra flotante a la parte superior de la página.

Para cambiar el texto de 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, etc.

Para cambiar la configuración de la cuenta regresiva, simplemente seleccione el temporizador.

Luego ingrese la fecha y hora de finalización deseada. OptinMonster también te permite elegir el tipo de cuenta atrás. Puede elegir el tipo estático si desea mostrar un temporizador estándar con la fecha y hora de finalización que especificó.

Por otro lado, existe un tipo de cuenta regresiva "dinámica". El temporizador funciona en función del comportamiento de cada usuario en su sitio web. La cuenta regresiva se establece por separado para cada visitante de su sitio web.

Cuando esté satisfecho con el diseño de la barra de notificaciones, asegúrese de 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 elegir cuándo y dónde mostrar su barra de notificaciones en su sitio web. La regla predeterminada es que su barra de notificación se muestre después de que el visitante permanezca en la página durante 5 segundos.

Cambiaremos esto a 0 segundos para que la barra de alerta se muestre inmediatamente. Para hacer esto, simplemente cambie el valor de "seg" a 0.

Además, también puede elegir dónde mostrar la barra de alerta. Puede usar el valor predeterminado que es "La ruta URL actual es cualquier página". De esta manera, su barra de notificaciones se mostrará en todas las páginas de su sitio web de WordPress.

Luego haga clic en el botón Siguiente paso para cambiar la configuración de la acción. Puede dejar la configuración "Mostrar vista de campaña" en "Optar" y elegir si desea reproducir un efecto de sonido cuando se muestra la barra de notificaciones.

Después de realizar los cambios, haga clic en el botón Siguiente paso nuevamente.

Puede ver un resumen de sus políticas de visualización aquí. Puede realizar ediciones y cambios finales en su campaña en la barra de notificaciones.

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

Luego puede ir a la pestaña Publicación en la parte superior y cambiar el estado de publicación a Publicación. Una vez hecho esto, debe hacer clic en el botón Guardar y cerrar el generador de campañas.

A continuación, verá la configuración de salida de la campaña.

El último paso es activar la campaña en el propio sitio web. Simplemente cambie el estado de pendiente a publicado.

Asegúrese de hacer clic en el botón "Guardar cambios" cuando haya terminado.

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

Método 2: Cree una barra de alerta con clientes potenciales de Thrive

Otra forma de agregar barras de alerta a su sitio de WordPress es usar tripa lleva. esto es parte de prosperar temas Kit y lo ayuda a generar clientes potenciales a través de barras de notificación, cajas de luz, ventanas emergentes deslizantes y más.

Primero, debe visitar el sitio web de Thrive Themes y registrarse para obtener una cuenta. Simplemente haga clic en el botón "Comenzar ahora" para comenzar.

A continuación, debe instalar y activar el complemento Thrive Product Manager en su sitio web. Para obtener más información, consulte nuestra guía de instalación del complemento de WordPress.

Puede encontrar el complemento Thrive Product Manager en la sección de su cuenta.

Después de instalar el complemento, simplemente vaya a la Gerente de producto Una página de su panel de administración de WordPress.

Desde aquí, haga clic en el botón "Iniciar sesión en mi cuenta".

Una vez que inicie sesión en su cuenta, se le presentarán varios complementos y herramientas que ofrece Thrive Themes.

Simplemente seleccione el complemento Thrive Leads y luego haga clic en el botón Instalar productos seleccionados a continuación.

Cuando Thrive Leads esté listo para usar, verá un mensaje de éxito.

A continuación, puede hacer clic en el botón Ir al panel de Thrive Themes.

Entonces deberías ir Prosperar tablero » Prosperar clientes potenciales desde el panel de administración de WordPress.

Simplemente haga clic en el botón Agregar nuevo junto al encabezado Grupos de clientes potenciales.

A continuación, se abrirá una ventana emergente.

Puede ingresar un nombre para su nuevo grupo de prospectos y hacer clic en el botón Agregar grupo de prospectos.

A continuación, debe crear un nuevo formulario de suscripción.

Continúe y haga clic en el botón Agregar nuevo tipo de formulario de suscripción.

Thrive Leads luego le pedirá que seleccione un tipo de formulario.

Puede seleccionar el tipo de barra para agregar una barra de notificación a su sitio web.

Después de agregar el tipo de formulario para incluir la cinta, ahora debe agregar un formulario.

Simplemente haga clic en la opción Agregar formulario en Grupos de clientes potenciales.

En la siguiente pantalla, puede seleccionar uno de sus formularios existentes.

Dado que es la primera vez que crea un formulario, haga clic en el botón Crear formulario.

Ahora aparecerá una ventana emergente en su pantalla.

Puede ingresar un nombre para su formulario y hacer clic en el botón Crear formulario.

Su formulario se agregará al grupo principal en la cinta.

Para editar el diseño del formulario, simplemente haga clic en el icono del lápiz.

Thrive luego muestra a los clientes potenciales varias plantillas para elegir.

Simplemente seleccione una plantilla y haga clic en el botón "Seleccionar plantilla" a continuación.

Esto iniciará el generador visual con una vista previa en vivo donde puede personalizar su barra de notificaciones.

Por ejemplo, puede seleccionar el texto en la plantilla y cambiarlo según sus necesidades. O haga clic en la imagen de la barra de notificaciones y cámbiela.

Cuando haya terminado de editar, haga clic en el botón "Guardar trabajo" en la parte inferior.

Ahora puede cerrar el editor visual y volver a la configuración del formulario. Aquí verá opciones para configurar el activador de la barra de alerta, mostrar la frecuencia y la ubicación.

De forma predeterminada, la barra de alerta se muestra en la parte superior al cargar la página. Sin embargo, puede cambiar esta configuración.

Por ejemplo, si hace clic en la opción "Activar", verá más opciones como: B. mostrar la barra de notificaciones después de cierto tiempo, cuando el usuario se desplaza hacia abajo en cierta parte o cuando el usuario llega al final de la página.

Además, también puede cambiar la frecuencia de la pantalla. De forma predeterminada, la barra de alerta siempre está visible para todos los usuarios.

Sin embargo, puede editar esto y mostrar su barra de notificación al mismo visitante después de una cierta cantidad de días.

Luego puede regresar a la página Thrive Leads desde su panel de WordPress.

Luego simplemente haga clic en el icono de engranaje para abrir la configuración de pantalla.

Desde aquí puede elegir en qué publicaciones y páginas mostrar la barra de notificaciones.

Por ejemplo, puede mostrarlo solo en la página de inicio o seleccionar todas las publicaciones y páginas. También puede optar por excluir ciertas páginas y publicaciones para que no muestren su alerta.

Cuando haya terminado, simplemente haga clic en el botón "Guardar y cerrar".

El paso final es hacer clic en los botones para mostrar la barra de alertas en el escritorio y el móvil.

Una vez hecho esto, su barra de notificaciones está lista para recopilar las direcciones de correo electrónico de los usuarios y crear su lista de correo electrónico.

Puedes visitar su sitio web para verlo en acción.

Método 3: crear manualmente una barra de alerta con HTML/CSS personalizado

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

Primero necesitas copiar lo siguiente código CSS personalizado para la barra de alerta:

<pre class="wp-block-syntaxhighlighter-code">
.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;
}
</pre>

Una manera fácil de agregar código CSS a su sitio web es usar Código WP. Este es el mejor complemento de fragmento de código de WordPress que lo ayuda a agregar código personalizado a su sitio web.

Nota: Código WP es uno de los propios complementos de AprenderWP. Lo construimos para que sea realmente fácil agregar scripts, código HTML y más a las páginas de su sitio web. Viene con características como biblioteca de fragmentos de código incorporada, lógica condicional, píxeles de transformación y más.

Primero necesitas instalarlo y activarlo. Complemento WPCode gratuito. Para obtener más información, consulte nuestra guía de instalación del complemento de WordPress.

Después de la activación, debe ir Fragmentos de código » + Agregar fragmento Desde su panel de WordPress, seleccione la opción Agregar código personalizado (nuevo fragmento).

Luego, ingrese un título para su fragmento en la parte superior y pegue el código CSS en el área de vista previa del código.

También debe cambiar el tipo de código de la opción de fragmento de CSS.

A continuación, puede desplazarse hacia abajo hasta la sección Insertar. Aquí puede elegir dónde ejecutar el código.

Dado que queremos que la barra de alerta aparezca en todo el sitio, puede utilizar el método de inserción automática predeterminado. También puede mantener la configuración Ejecutar en cualquier lugar.

Una vez hecho esto, puede hacer clic en el botón "Guardar fragmento" en la parte superior.

También debe hacer clic en el interruptor para activar el código.

Luego ve a Fragmentos de código » Encabezados y pies de página en tu panel de WordPress.

Simplemente copie y pegue la siguiente línea de código HTML en el campo Encabezado:

<div class="alertbar">We are currently closed due to Covid-10.</div>

Así es como debería verse este código en el campo Encabezado en WPCode:

Puedes cambiar el texto de alerta a lo que quieras. Asegúrese de hacer clic en el botón "Guardar cambios" en la parte superior de la página cuando haya terminado.

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

Arriba: En algunos temas de WordPress, la barra de notificaciones puede superponerse a su menú. Para evitar esto, puedes cambiar la altura de la barra a 40px o 30px. También debe reducir la altura de la línea en consecuencia para mantener el texto centrado verticalmente en la barra.

Bonificación: agregue alertas personalizadas a los sitios de WordPress

Si desea agregar alertas personalizadas a diferentes partes de su sitio web, p. B. a las páginas de productos, páginas de pago y páginas de compras, puede usarlas Producto de semilla. Es la mejor herramienta para crear sitios web y páginas de destino para WordPress.

El complemento ofrece un generador de arrastrar y soltar para crear temas personalizados y páginas de sitios web sin editar el código. También ofrece un bloque de alerta que puede colocar en cualquier lugar de su sitio web.

Este bloque de alerta puede alertar a los clientes que su inventario se está agotando, ciertos artículos están en oferta o recibir otras alertas sensibles al tiempo.

Simplemente puede agregar el bloque de notificación a su página y luego agregar un título y una descripción. El complemento también le permite agregar contenido dinámico, lo que le permite insertar datos y otros parámetros de consulta.

Hay otras opciones para personalizar el bloque de alarma. Por ejemplo, puede cambiar la alineación, ajustar el tamaño de fuente y editar el icono.

Para obtener más información sobre el uso de SeedProd, puede consultar esta guía para crear uno personalizado. páginas de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear una barra de notificaciones en WordPress. También puede consultar nuestra guía de los mejores creadores de páginas de arrastrar y soltar de WordPress para ayudarlo a personalizar aún más su sitio y los mejores complementos de WooCommerce para aumentar las ventas de su tienda.