Scroll Triggered Boxes. La mejor llamada a la acción no intrusiva que puedes tener en tu blog o web


Última modificación: 20 mayo 2016

La mejor llamada a la acción no intrusiva que puedas tener en tu blog. Con esta frase, que tomo prestada de Danny van kooten, desarrollador de plugins para WordPress, hoy quiero presentarte uno de sus plugins llamado, Scroll Triggered Boxes, un fantástico plugin que empleo a diario y me ayuda como herramienta de llamada a la acción -no intrusiva- para los visitantes y lectores del blog.

Citando literalmente la frase del autor del plugin éste dice así: “The best non-obtrusive call-to-action: Scroll Triggered Boxes. Show social media sharing options or sign-up forms in conversion boosting boxes”.

Este plugin te permite mostrar botones para compartir en social media, te permite insertar formularios de alta a la newsletter, banners aunciando cursos y algunas cositas más. La verdad que con este plugin el límite lo pones tu. Si te interesa y te apetece aprender qué hace este plugin, cómo se configura aparte de unas ideas que te facilito al final, adelante con la lectura. ¡Vamos alla!

Qué es lo que vas a ver sobre el plugin de WordPress Scroll Trigered Boxes

    • 1. ¿Qué hace este plugin? ¿Qué puedo hacer con él?
    • 2. ¿Dónde descargar el plugin? ¿Cómo se instala? Esto es básico pero no quiero dejar de contártelo. Seguro que muchos se saltan este punto.
    • 3. ¿Como funciona el plugin? Si te cuento que puedes hacer con el pero no te digo cómo, te quedas un poco a medias. No te preocupes, también te cuento el cómo.
    • 4. 5 ideas para tus llamadas a la acción

Scroll Trigered Boxes (1)

 

1. ¿Qué hace este plugin? ¿Qué puedes hacer con Scroll Trigered Boxes?

Vamos por el principio y te respondo a la pregunta ¿Qué hace este plugin?

Este plugin te permite crear cajitas emergentes que nacen a pié de tu blog (o no) -o web- en función de unos parámetros que puedes configurar. Podrás diseñar a tu gusto y discreción el contenido que construyes para cada una de tus cajas y las podrás mostrar: al pié de la portada de tu blog, sólo en determinadas páginas, sólo en determinados artículos, etc. Tendrás el control exacto de dónde, cómo y cuándo.

Scroll Triggerd Boxes

Con un sencillo conjunto de opciones de configuración puedes hilar fino en su comportamiento y diseño sin tocar ni una sola línea de código. Todo este conjunto de opciones se muestra cuando añades tu primera caja. Un apunte, actualmente este plugin se encuentra disponible en inglés pero ya está disponible para ser traducido. Estoy en contacto con el Danny, el desarrollador para realizar la traducción al castellano. Confío en que en breve quede resuelto.

2. Dónde descargar este plugin y cómo instalarlo

Este plugin es gratuito y lo puedes descargar desde el repositorio de WordPress. La instalación la puedes realizar como siempre desde el menu de plugins / añadir nuevo. Busca e instala Scroll Triggerd Boxes del desarrollador Danny van Kooten.

Una vez completada la instalación verás que se muestra un menu en la barra lateral izquierda que dice Scroll Triggered Boxes. Tienes dos opciones, mostrar todas las cajas “All boxes” o añádir una nueva “Add new”

Actualmente ha sido descargado en poco más de 16.000 ocasiones y de momento cuenta con un ratio de valoracion de 5 sobre 5 con 33 personas que han participado únicamente. 33 fans a tope de este plugin. De estas cifras puede llegar a la conclusión de que no se trata de un plugin mega popular como otros pero, personalmente te lo recomiendo si te gusta y quieres implementar llamadas a la acción en tu blog -o web- además de escribirte unas líneas sobre cómo puedes emplearlo.

Scroll Trigered Boxes (2)

3. ¿Cómo funciona este plugin?

Te cuento el siguiente paso en tu camino donde vas a ver lo interesante, la materia prima. ¿Cómo puedo configurar este plugin a mi gusto y discreción?

Una vez lo tengas claro, te daré unas ideas prácticas (punto 4) para que puedas implementarlas hoy mismo en tu blog -o web-.

Scroll Trigered Boxes (3)

3.1. Opciones de visualización. Display options

La opciones de visualización te permiten determinar el dónde y el cuándo. Me explico.

Scroll Trigered Boxes (4)

3.1.1. Show this box – 3.1.2. Box positions

¿Dónde quiero que se muestre mi caja?

Esta opción hace referencia tanto la “ubicación física de la caja” –box positions– (abajo a la derecha, abajo a la izquierda, arriba a la derecha o arriba a la izquierda) cómo a la “ubicación en función del contenido”Show this box– (en todas partes, en la home, solo en los artículos, solo en las páginas o incluso hilar más fino si lo hacemos manual).

3.1.3. Trigger Point

Respecto al cuándo, éste se determina mediante un desencadenador, es decir, quiero que mi caja se muestre cuando el lector se ha desplazado un 65% hacia abajo del contenido de mi artículo o, podemos hilar mas fino empleando un selector.

3.1.4. Animation

Podemos determinar la animación, es decir, el comportamiento visual de la caja cuando se muestre. Las alternativas son dos: Fade in o Slide in.

Personalmente me gusta más Slide in. Mi consejo aquí es que diseñes tu caja, observes el comportamiento de la animación que elijas y lo que más te guste, adelante con ello. Ni más ni menos. Lo dejo a tu discreción.

3.1.5. Cookies expiration days

Podemos determinar el número de días que queremos que la caja cese en su comportamiento emergente mediante las cookies. ¿Cuánto tiempo quieres que tarde la caja en volverse a mostrar a tu visitante, lector cuando éste previamente la ha cerrado?

Este valor es algo que dejo a tu discreción, me explico. Personalmente he configurado este valor en 1 día, es decir, si un lector aterriza hoy en el blog y se cumple el requisito configurado en el desencadenador -trigger- para que se muestre la caja, el lector verá la caja emergente que podrá cerrar a su voluntad si el contenido no se le satisface y no volverá a mostrarse durante todo el día.

Si este lector vuelve pasadas 48 horas la caja volverá a mostrarse. En función de la recurrencia de tus visitas y del trato que tengas con ellas, este valor lo puedes ajustar a tu discreción. Podemos decir que con este valor decides el grado de intrusismo que quieres aportar en tu blog, ¿no?

3.1.6. Auto-hide?

Presuponemos que has configurado la caja emergente para que se muestra cada vez que el visitante ha visualizado el 65% del contenido de uno de tus artículos, en ese momento, se cumple la condición establecida y, ‘voila! se muestra la caja. Hasta aquí todo bien.

Ahora, ¿Qué pasa si el lector vuelve a desplazarse hacia arriba? ¿Qué hacemos con la caja? ¿La dejamos fija o volvemos a ocultarla?

Con la opción Auto-hide tienes la posibilidad de configurar esto mismo en plan, Si marcas la opción SI, esto viene a significar: ocúltate cuando el lector vuelva a desplazarse hacia arriba (intrusismo suave). En cambio, si marcas la opción NO, decimos algo así como: permanece visible todo el rato, da igual lo que haga el visitante o lector (¡intrusismo a tope!)

3.1.7. Enable test mode

Con esta opción se habilita el modo de pruebas y la caja se muestra si o si independientemente de lo que hayas configurado en la opción Cookies Expiration Days.

Te dejo cuatro ejemplos donde puedes ver parte del proceso del diseño de las cajas

 

3.2. Opciones de apariencia. Appearance

Las opciones de apariencia se centran en el cómo de bonita voy a dejar mi caja. Las herramientas que tenemos a mano para este fin son cinco:

    • 1. Color de fondo. Elije tu color de fondo. Poco tengo que contarte aquí sobre esta herramienta. Lo que si voy a hacer es contactarte un truco, verás. Si quieres que tu color de fondo sea igual a un color de los que tiene tu plantilla puedes sacar el color de una forma muy fácil con picpick, una herramienta para realizar capturas de pantalla que cuenta con un conjunto de herramientas adicionales como el selector de color. Aquí te dejo un video para que me entiendas mejor.
    • 2. Color de texto: Elije tu color de texto. Poco tengo que contarte aquí.
    • 3. Ancho de la caja: Elije el ancho de tu caja (pixels). Si empleas picpick tienes la regla de pixels una herramienta fantástica que te ayuda a determinar y calcular en que ancho quieres.
    • 4. Color del borde. El color de borde. El mismo truco que te he explicado para el color de fondo puedes emplearlo para el color del borde de tu caja.
    • 5. Ancho del borde. El ancho del borde. Cual es el grosor del borde de tu caja medido en pixels.

Scroll Trigered Boxes (5)

Si te fijas, el empleo de estas cinco herramientas es básico y muy, muy sencillo de hacerte con el control. Tan sólo tienes que jugar con ellas y adaptarlo a tus necesidades concretas. Paloma Reino y Mariel Bonnefon han aprendido a emplearlo con algún consejillo privado que les he proporcionado pero, el trabajo al completo corre por su cuenta. Si te asomas por sus blogs puedes ver que uso están haciendo del plugin.

Te dejo unos ejemplos prácticos como resultado de jugar con las opciones de configuración

 

4. Cinco ideas para tus llamadas a la acción

Te cuento ahora cinco ideas a las que puedes darle forma con este plugin. Si te has parado a observar las imágenes anteriores, creadas con un carrusel de jetpack, te puedes hacer una idea.

    • 1. Insertar un formulario de alta a la newsletter. Puedes crear un formulario de alta para que los usuarios se den de alta a tu newsletter. Mi experiencia me dice que se producen bastantes altas mediante esta cajita y eso que inicialmente era bastante escéptico respecto a ello. Hasta la fecha no he tenido ningún visitante que me haya manifestado explicitamente que la caja le molesta.
    • 2. Insertar una encuesta. Introducir un texto para que te rellenen una encuesta. Personalmente tengo una encuesta creada en Survey Monkey y con una cajita invito a los visitantes a que me rellenen una encuesta.
    • 3. Anunciar un evento. Hangout, webminar, etc. ¿Tienes un evento en el que vas a participar? Puedes emplear esta cajita para anunciarlo en tu blog, en la portada, o donde estimes oportuno. En el diseño de la caja puedes insertar un contador incluso.
    • 4. Anunciar un curso. Otra idea interesante es promocionar un curso. Coloca un banner, haz el diseño y envía a tus visitantes a la página de aterrizaje.
    • 5. Anunciar un servicio. Es la misma idea que el caso anterior solo que ahora la idea es llevar a tus visitantes a una página de aterrizaje de un producto o servicio.

Tan solo son unas ideas sencillas para que puedas emplear en tu blog o web. ¿Se te ocurre alguna otra más? Déjame tu comentario.


8 comentarios en “Scroll Triggered Boxes. La mejor llamada a la acción no intrusiva que puedes tener en tu blog o web”

  1. Juan Carlos Castañeda

    Este plugin es excelente, lo he utilizado en varios diseños de sitios WEB y me ha ido super. Tengo una inquietud, hace unos días necesité hacer varias “cajitas” y noté que solo me visualiza 5, es decir si tengo mas de 5 las primeras no aparecen y las más nuevas si. Lo que me ha tocado hacer es colocar en modo Draft (borrador) las que no voy necesitando y así puedo visualizar las otras. Alguna idea?

    1. Hola Juan Carlos, interesante observación la que haces. No he tenido ocasión de poner más de 5 cajitas a la vez por lo que desconocía ese comportamiento. Desconozco si es forzado por parte del desarrollador o obedece a otra causa. En mi caso personal, solo empleo una cajita y hago tal cual tu haces, dejo el resto en borrador y a medida que me hacen falta, las voy cruzando. En cuanto tenga oportunidad le preguntaré a Danny, el desarrollador. Saludos.

  2. Muy buen post Paul. Un tutorial excelente, bien explicado y con detalles. Me has dado buenas ideas para mi blog.
    Muchas gracias por incluir un enlace a mi post sobre Canva para aprender a hacer tus diseños con esta maravillosa herramienta.
    Un saludo 🙂

    1. Hola Susana. Gracias a ti por la crítica. Me alegro que te sea de ayuda y te de ideas para tu blog. 😉

      Con canva.com he creado algunas cosillas, sencillas con un resultado, en mi opinión estupendo. Como bien dices, es una maravilla, lo comparto totalmente. Por otro lado me pareció francamente apropiado el enlace ya que conocí la herramienta gracias a ti. Saludos.

  3. Paul, hace tiempo estuve buscando un plugin como este sin éxito. Este está fenomenal, permite todas las opciones, insertar formularios, imágenes, me imagino que también vídeos.
    Pude configurarlo en mi página pero este tutorial me ha servido para entender mejor opciones que no tenía claras y que no tenía paciencia para ir experimentando. Me ahorras tiempo de pruebas con este post. Gracias, Paul.

    1. Me alegro Mariel de que te parezca excelente el post, además de claro y práctico. Muchas gracias a ti por tus comentarios. Si tienes alguna sugerencia para un próximo tutorial, no dudes en pedirlo. Saludos.

Los comentarios están cerrados.