Cómo crear una barra flotante "pegajosa" en WordPress

¿Quieres captar la atención de tus visitantes con una barra flotante pegajosa en WordPress?

Con un banner o barra flotante pegajosa, puedes mostrar un mensaje en la parte superior o inferior de tu sitio web sin interrumpir la experiencia del usuario. Esto te permite promocionar suscripciones por correo electrónico, productos, ofertas flash, cuentas de redes sociales y mostrar cualquier mensaje personalizado. Por ejemplo, es posible que desees mostrar la configuración de cookies para pedirle al visitante permiso para rastrear sus datos mientras navega por tu sitio.

En esta guía paso a paso, te mostraremos la forma más fácil de crear un banner flotante de WordPress. Antes de comenzar el tutorial, seamos claros sobre qué es exactamente una barra flotante pegajosa.

¿Qué es una Barra Flotante Pegajosa?

Un banner flotante pegajoso permanece en la parte superior o inferior de tu página web mientras tus visitantes se desplazan por ella. 

Estas barras son siempre visibles para el usuario y pueden interactuar con tu mensaje en cualquier momento durante su viaje de navegación.

Las barras pegajosas están diseñadas para ser flexibles y servir a múltiples propósitos. Así que puedes adaptarlas para mostrar cualquier mensaje que desees. Para darte algunos ejemplos, puedes agregar descuentos de bienvenida para nuevos visitantes o promocionar un producto recién agregado para maximizar la visibilidad.

Cuando se usan de la manera correcta, puedes usar barras flotantes para:

• Mejorar tus ventas e ingresos a través de ofertas flash, descuentos y promociones
• Dirigir tráfico a tu contenido en línea (podcasts, artículos, guías, videos y más)
• Aumentar la interacción y las conversiones del sitio web
• Genera leads y suscriptores para hacer crecer tu lista de email marketing 
• Impulsa la interacción y los seguidores en redes sociales
• Aumenta el reconocimiento de marca

Hay muchas maneras en las que puedes usar las barras adhesivas a tu favor. Con eso, aprendamos cómo crear un banner flotante atractivo de WordPress para tu sitio.

Creando un Banner Flotante Adhesivo para WordPress

Hay bastantes plugins de barras flotantes para WordPress, pero no todos ofrecen las funciones que necesitas para crear y personalizar uno con facilidad.

Te mostraremos cómo crear uno en menos de 5 minutos sin tocar una sola línea de código usando nuestra herramienta de banners flotantes favorita llamada OptinMonster.

OptinMonster es la herramienta de generación de leads #1 que te permite crear campañas de marketing llamativas para convertir a tus visitantes en clientes. Estas incluyen barras flotantes, pop-ups, slide-ins, formularios incrustados y más.

OptinMonster viene con una biblioteca de más de 50 plantillas de barras flotantes prediseñadas para que no tengas que empezar desde cero.

Encontrarás diseños para anuncios, descuentos, ofertas populares de festividades, suscripciones a boletines y mucho más.

Puedes previsualizar y seleccionar una plantilla de tu elección. Luego, hay un constructor de arrastrar y soltar que es muy fácil de usar. Puedes personalizar tu texto, el diseño de las imágenes, los colores y más, todo con clics del botón del ratón.

Además, OptinMonster te permite establecer reglas de segmentación para que puedas mostrar tus banners flotantes a las personas adecuadas en el momento y lugar adecuados. Por ejemplo, puedes configurar tu campaña para que aparezca solo a usuarios nuevos o a aquellos que están a punto de salir de tu sitio web. También te permite reorientar y dar seguimiento a tus prospectos para mejorar la interacción. 

Además de eso, OptinMonster rastrea y muestra todas las estadísticas importantes que necesitas directamente en su panel. Puedes ver el número de visitantes que vieron e hicieron clic en tu banner flotante de WordPress, e incluso cuánto dinero ganas con la campaña. 

Para darte una idea de lo que puedes hacer con OptinMonster, estas son algunas campañas de ejemplo:

Lo mejor de OptinMonster es que te da la flexibilidad de crear y administrar todas tus campañas, incluidas las barras flotantes, directamente desde tu panel de WordPress. 

Ahora, no perdamos tiempo y comencemos a crear nuestro banner flotante de WordPress con OptinMonster.

Paso 1: Instalar y Activar el Plugin OptinMonster

Primero, necesitas registrarte para obtener una cuenta de OptinMonster. El plugin comienza en $9 por mes con una garantía de devolución de dinero de 30 días.

Luego, necesitarás instalar el plugin de OptinMonster para conectar la cuenta a tu sitio. 

El plugin conector está disponible gratis, por lo que puedes descargarlo fácilmente desde tu panel de WordPress. Para más detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Cuando instales y actives el plugin de OptinMonster en tu sitio, se iniciará un asistente de configuración. Tendrás la opción de conectar tu cuenta recién creada.

Ten en cuenta que si has iniciado sesión en tu cuenta de OptinMonster en otra pestaña, el plugin lo detectará automáticamente y sincronizará tu sitio web.

Ahora, puedes empezar a crear tu primera barra flotante de WordPress con OptinMonster.

Paso 2: Crear una nueva campaña de barra flotante

OptinMonster te permite crear y personalizar barras flotantes dentro de tu panel de administración de WordPress. 

Para ello, ve a la pestaña de OptinMonster y verás diferentes tipos de campañas de generación de leads, como pop-ups, barras flotantes, pantalla completa, en línea y más. 

Para crear una campaña de barra fija de WordPress, elegiremos la opción Barra flotante. 

Esto iniciará la biblioteca de plantillas que consta de impresionantes plantillas de barras flotantes entre las que puedes elegir. 

Aquí, puedes pasar el cursor sobre cualquier plantilla para previsualizar la barra flotante fija en la misma página. Cuando hayas encontrado el mejor diseño para tu campaña, haz clic en el botón Usar plantilla para crear tu barra flotante.

Esto abrirá una ventana emergente donde puedes darle un nombre a tu campaña de barra flotante. 

Luego, haz clic en el botón Empezar a construir para iniciar el constructor de campañas de OptinMonster. 

Paso 3: Personaliza tu barra flotante de WordPress

En el constructor de campañas, verás todos los bloques de elementos a la izquierda y la vista previa de tu barra fija a la derecha. Aquí, puedes arrastrar y soltar fácilmente los bloques necesarios en tu barra.

Encontrarás 12 bloques que puedes usar para hacer tu barra más atractiva e interactiva. 

Algunos de los bloques de elementos útiles son: 

• Cuenta regresiva
• ChatBot
• Iconos sociales
• Campos de registro
• Botón Sí/No

1. Editar bloques de contenido

Si deseas personalizar cualquier bloque de contenido, simplemente haz clic en él y verás el editor de bloques abrirse en la barra de tareas izquierda.

Por ejemplo, puedes reemplazar la imagen subiendo la tuya o eligiendo una de la biblioteca de medios existente. También puedes cambiar la configuración de la imagen, como la opacidad, el ancho, el texto alternativo y más.

Además de eso, OptinMonster te permite agregar enlaces a tus imágenes para que los usuarios puedan hacer clic en ellas y ser redirigidos a la página de tu elección. Hay una opción para que la URL del enlace se abra en una nueva ventana y puedes habilitar el seguimiento de clics para ver cuántas personas hacen clic en la imagen.

De la misma manera, puedes cambiar el texto del contenido en tus banners flotantes y editar también el botón de optin. Todo lo que tienes que hacer es seleccionar el elemento en tu vista previa e ingresar tu texto personalizado.

Una vez que hayas terminado de personalizar tus bloques de contenido, haz clic en el botón Guardar.

2. Configurar Ajustes de Campaña

OptinMonster te permite editar la configuración de la campaña dentro del constructor. Para ello, deberás hacer clic en el ícono Ajustes en la parte inferior izquierda del constructor de campañas.

Luego, verás las 4 configuraciones principales en el lado izquierdo y la vista previa en vivo de la barra flotante en el lado derecho de la página. Las configuraciones incluyen:

• Detalles de la Campaña: Te permite editar el nombre de la campaña, la descripción y otra información sobre tu barra flotante.
• Estilo de Vista: Te ofrece muchísimas opciones de diseño y estilo para que coincidan con la marca de tu sitio web.
• Ajustes de Visualización: Elige la cantidad de veces que se mostrará tu campaña a los visitantes.
• Ajustes de la Barra Flotante: Cambia la posición de tu barra flotante de arriba hacia abajo y viceversa.

Dado que las plantillas de OptinMonster lucen y funcionan muy bien de inmediato, no necesitarás personalizarlas mucho, excepto por cambiar algunos detalles para que coincidan con los objetivos de tu campaña. Pero puedes hacer cambios fácilmente en el diseño y el estilo si lo necesitas.

En la opción Estilo de visualización, puedes cambiar el estilo general y la opción de diseño. La configuración básica te permite editar el estilo, el color de fondo, la imagen, el botón de cierre y más.

La configuración avanzada te permite personalizar hasta los más pequeños detalles, como bordes, espaciado, sombras y más.

Por defecto, OptinMonster muestra banners flotantes en la parte inferior de tu sitio, pero puedes cambiar eso y moverlo a la parte superior.

Para ello, ve a Configuración flotante y activa la opción Cargar barra flotante en la parte superior de la página allí. 

No olvides guardar tu configuración cuando hayas terminado.

Ahora, aprenderemos sobre las reglas de visualización que puedes establecer para tu campaña de banner flotante para dirigirte a los visitantes. 

Paso 4: Establecer reglas de segmentación para mostrar tu banner flotante

Optinmonster ofrece potentes funciones de segmentación de audiencia para optimizar conversiones y generar clientes potenciales a partir de tus campañas.

Para agregar nuevas reglas de segmentación, deberás navegar a la pestaña Reglas de visualización en la parte superior del editor.

Luego, verás el conjunto de reglas predeterminado que muestra tu banner si un visitante permanece en cualquier página de tu sitio durante 5 segundos. 

Si deseas cambiar la regla de visualización, puedes hacer clic en el botón Editar o hacer clic en la regla existente, y verás la lista de reglas de visualización predefinidas que ofrece OptinMonster. 

Todas las reglas están organizadas en diferentes pestañas para que puedas encontrar fácilmente la regla de segmentación para tu campaña. Algunos puntos destacados incluyen:

• Distancia de desplazamiento: Mostrar solo una vez que un visitante ha desplazado una cierta profundidad en la página
• Hora y fecha: Segmentar días festivos específicos, días de la semana y períodos de tiempo para ejecutar ventas flash u ofertas por tiempo limitado
• Ubicación física: Interactuar con usuarios según su área geográfica para localizar la oferta de la campaña
• Dispositivo del visitante: Mostrar/No mostrar campañas según si un usuario está en un dispositivo de escritorio o móvil

Para agregar una regla, todo lo que tienes que hacer es hacer clic en ella. ¡Es así de simple!

Nunca necesitarás agregar código o trabajar con configuraciones complejas para dirigirte a tu audiencia. A continuación, te mostraremos cómo conectar tu campaña a tu cuenta de correo electrónico para que todos tus nuevos prospectos se agreguen automáticamente a tu lista de contactos.

Paso 5: Conéctate a tu proveedor de correo electrónico

OptinMonster se integra con todos los principales servicios de marketing por correo electrónico como Constant Contact, Aweber, ActiveCampaign y ConvertKit.

Cuando sincronizas tu cuenta de correo electrónico, puedes recopilar direcciones de correo electrónico y enviar correos electrónicos automatizados a tus nuevos suscriptores. OptinMonster también viene con opciones integradas para segmentar tus prospectos, de modo que tu lista se mantenga organizada y puedas enviar correos electrónicos relevantes según para qué se registraron.

Para conectarte a tu proveedor de correo electrónico, abre la pestaña Integraciones en el editor de campañas. 

Aquí, puedes elegir tu proveedor de correo electrónico e iniciar sesión en tu cuenta. Algunos proveedores necesitan una API para funcionar, la cual puedes encontrar dentro de la configuración de tu cuenta de correo electrónico.

No olvides guardar tu configuración después de configurar tu integración.

Ahora estás listo para publicar tu campaña de banner flotante fijo en tu sitio de WordPress

Paso 6: Publica tu banner flotante de WordPress

Dirígete a la pestaña Publicar en el editor y verás opciones para ver una vista previa en vivo de tu campaña. Cuando estés listo, todo lo que tienes que hacer es cambiar el estado a Publicar.

Después de hacer clic en el botón Publicar, verás que el estado de la campaña cambia a 'Publicado'. 

Dirígete a tu panel de WordPress y abre la pestaña OptinMonster » Campañas. Asegúrate de que el estado también esté configurado como Publicar aquí.

Ahora, cuando visites tu sitio, deberías ver tu campaña de barra flotante aparecer según las reglas de visualización que estableciste.

¡Y eso es todo por hoy! Esperamos que este artículo te haya ayudado a aprender fácilmente cómo crear un banner flotante fijo para tu sitio de WordPress.

Ahora que sabes cómo usar OptinMonster, puedes crear más campañas de alta conversión en tu sitio como pop-ups, slide-ins, juegos de ruleta de cupones y más. 

A continuación, para generar más leads y conversiones en tu sitio, definitivamente querrás leer estos artículos:

• Cómo crear una página de captura de leads en WordPress
• Cómo crear un popup en WordPress (paso a paso)
• Crea una página de aterrizaje de alta conversión

Estas publicaciones te muestran más oportunidades para dirigirte a tus usuarios y lograr que interactúen y se suscriban a tu marca.