NRCL

Uno de los recursos visuales más empleados actualmente es el efecto parallax o de paralaje, pues aporta dinamismo a las secciones de la web en las que se utilice, convirtiendo contenido estático en atractivos elementos que se mueven con la navegación del usuario.

Qué es el efecto parallax

El efecto parallax no es nuevo, proviene de los antiguos videojuegos, y se refiere al efecto de elementos que se mueven sobre un fondo que permanece fijo.

Es un efecto en el que los distintos elementos de una misma sección están como en distintas capas, y se mueven independientemente unos de otros, permaneciendo algunos fijos mientras otros se mueven a distintas velocidades encima o detrás del resto.

El ejemplo más simple, y también mas habitual en las webs actuales es una sección con una imagen o vídeo de fondo sobre la que se mueven, al hacer scroll el usuario, otros elementos superpuestos, como textos o botones.

Cómo aplicar el efecto parallax en WordPress

Lo mejor de todo es que puedes aplicar efectos parallax en WordPress de muy distintas maneras, y casi todas de modo muy sencillo, sin tener que aprender a programar con la mayoría de métodos.

¿Los vemos?

Aplicar efecto parallax en WordPress con temas

Hay montones de temas que ofrecen secciones por defecto que ya incluyen efectos parallax. Con estos temas solo tienes que añadir la sección y esta ya dispone de los controles necesarios para crear el efecto parallax, mientras que tú solo tienes que elegir los distintos elementos de la sección, los fijos y los que «flotarán» al navegar.

Algunos temas gratuitos que encontrarás que ofrecen este tipo de secciones parallax son los siguientes:

• Parallax Frame
• AccessPress Parallax
• Illdy
• ParallaxSome
• ScrollMe

Aplicar efecto parallax con Elementor

Si usas el maquetador Elementor, tanto en su versión gratuita como en la Pro, puedes aplicar efectos parallax de manera muy sencilla a cualquier sección, modificando el estilo para hacer fijo el adjunto de la misma, ya sea una imagen o un vídeo.

Aplicar efecto parallax con Divi

Si utilizas Divi también puedes aplicar efecto parallax de manera realmente sencilla.

Solo tienes que abrir el apartado del fondo de la sección con la imagen a la que quieras aplicar el efecto de parallax (paralaje) y elegir entre los 2 métodos de aplicar paralaje:

• Paralaje verdadero
• CSS

Ambos métodos aplican el efecto parallax pero aplicando de manera diferente el efecto:

• El paralaje verdadero utiliza JavaScript para aplicar distintas velocidades a los elementos.
• El paralaje CSS solo usa estilos CSS y el efecto es menos impactante en según qué secciones.

Por cuestiones de rendimiento y optimización de carga es más ligero el método de paralaje por CSS, pero en ocasiones querrás el paralaje verdadero para efectos de impacto.

Aquí tienes los 2 métodos aplicados, para que veas las diferencias. Haz clic en la galería para ver el efecto…

Aplicar efecto parallax en WordPress con plugins

¿No usas Elementor, Divi ni un tema que venga ya con secciones parallax? No hay problema, también tienes plugins con los que aplicar el efecto parallax.

Un par de ellos realmente interesantes son los siguientes:

Parallax Section block

Este es muy interesante y sencillo de utilizar, solo tienes que hacer lo siguiente:

1. Instalas y activas el plugin
2. En el editor de bloques de WordPress añade el bloque «Parallax section block» que encontrarás en el grupo de widgets.
3. Personaliza el comportamiento del efecto parallax en los ajustes del bloque «Parallax section block»
4. Dentro de este bloque añade cualquier otro bloque estándar o personalizado, que heredarán el efecto parallax del bloque del plugin.

Advanced WordPress Backgrounds

Este otro plugin no solo te permite añadir efectos parallax con bloques sino también con el editor clásico, incluso con el famoso maquetador WP Bakery.

Permite aplicar todo tipo de efectos parallax a imágenes, vídeos y fondos de color, con montones de ajustes y posibles personalizaciones, tanto mediante el bloque que añade al editor, como mediante el generador de shortcodes del editor clásico.

Aplicar efecto parallax en WordPress sin plugins ni temas

Bueno, y llegamos al final de esta guía, y ya solo nos queda una posibilidad, y es la de aplicar el bonito efecto parallax pero sin usar maquetadores, ni plugins, ni temas específicos, usando WordPress con cualquier tema.

El proceso es muy sencillo, y solo requiere que uses el bloque o editor HTML y copiar y pegar un poco de CSS ¿nos animamos? Verás qué fácil es…

Sube la imagen de fondo

Lo primero es subir la imagen que usaremos como fondo del efecto parallax. Súbela como harías normalmente y copia la URL, porque la usaremos a continuación.

Un poco CSS

Ahora vamos a crear los estilos CSS que harán posible el efecto parallax, creando unas clases que luego usaremos en el HTML y, muy importante, poniendo como imagen de fondo la URL que antes copiamos.

Sería tal que así:

.paralaje { 
background-image: url("http://midominio.com/wp-content/uploads/2022/04/mi-imagen-de-fondo.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.contenido-paralaje { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
}

Este CSS es un ejemplo, aplica los cambios de estilos CSS que consideres que mejor encaja con el diseño de tu web.

El CSS añádelo en la sección de CSS adicional del personalizador de WordPress (Administración de WordPress → Apariencia → Personalizar → CSS adicional) y publica los cambios.

Un poco de HTML

Ahora que ya tenemos definidas y aplicados estilos a las clases CSS que aplicarán el efecto parallax, solo nos queda editar el contenido que irá sobre el fondo especificado en el CSS.

Mi consejo es el siguiente:

• Si usas el editor clásico crea primero el contenido que irá sobre el fondo con parallax, usando el editor visual, al modo en el que lo hagas habitualmente. Luego, cuando lo tengas, añade los divs (ver abajo)en la pestaña del editor HTML, encima y debajo del contenido creado.
• Si usas el editor de bloques crea el contenido que irá sobre el fondo con parallax con tus bloques habituales y, cuando lo tengas, edítalo como HTML y añade los divs (ver abajo).

De este modo es del que cambiarás menos tu modo habitual de trabajar.

Así sería un ejemplo con el editor clásico:

Y así con el editor de bloques:

Ahora, cuando ya tengas tu contenido que irá sobre la imagen de fondo con parallax, el HTML a añadir es este:

<div class="paralaje">
<div class="contenido-paralaje">

Aquí está tu contenido...

</div>
</div>

Y tendrás tu efecto parallax sin plugins ni temas, solo con HTML, un poco de CSS y tu editor de WordPress.

Entre las muchas estrategias de incentivación de la venta por impulso y aumento de conversiones hay una que funciona muy bien y que habrás visto en algunas de las tiendas online más populares es la generación de urgencia, de ansiedad por la compra.

Cómo generar compras de impulso por sensación de carencia o urgencia

De estas estrategias, hay varias que funcionan muy bien. Una de ellas es la sensación de carencia, normalmente provocada cuando el cliente quiere adquirir un producto o servicio y observa que quedan pocas existencias.

Esto es muy fácil de conseguir, simplemente manteniendo el inventario en números bajos, y teniendo configurado WooCommerce para que muestre un mensaje cuando hay pocas existencias.

Hay otro método adicional, aún mas potente, para generar ansiedad y urgencia y es mostrar un mensaje al visitante en el que se indique que «hay x personas viendo este producto ahora mismo».

Este tipo de avisos, si ademas lo unimos a la sensación de carencia comentada antes, puede impulsar las ventas de impulso de nuestros productos más populares.

Cuando el cliente se encuentre este tipo de mensajes, si realmente tiene un cierto interés en el producto, se le genera una sensación de urgencia difícil de controlar.

Solo imagina que estás reservando a última hora un alojamiento para tus vacaciones, has encontrado el apartamento perfecto y ves en la página del producto que solo queda un alojamiento disponible y además que hay otras 20 personas viendo el alojamiento en ese mismo momento. Mucha templanza debes tener para no reservar a toda hostia ese «preciado» alojamiento.

Entonces … ¿cómo se añaden esos mensajes de cuántas personas están viendo el producto?

Cómo mostrar un aviso de la cantidad de personas que están viendo un producto

Al contrario que con el truco anterior, WooCommerce no ofrece por defecto un modo de mostrar cuántos visitantes están viendo un producto, así que tenemos que recurrir a plugins que cubran esta carencia.

Y uno que funciona muy bien y es totalmente gratuito es Counter Live Visitors for WooCommerce, de Daniel Riera.

Solo tienes que instalar y activar el plugin y por sí solo ya mostrará los visitantes que están viendo un producto, incluido el propio usuario. O sea, que si estás viendo tú solo el producto el plugin te dirá que «Hay 1 persona viendo este producto» y, en cuando haya otro visitante más ya te dirá que hay 2 personas viéndolo.

Pero la diversión no acaba aquí…

El plugin tiene una página de ajustes escasa pero más que suficiente, con algunas opciones muy interesantes.

Modo normal, modo directo y modo usuarios falsos

Antes de nada debes conocer los 3 modos de funcionamiento del plugin, con sus peculiaridades:

• Modo normal – Este es el modo por defecto del plugin nada más instalarlo, y mostrará la cantidad de personas viendo el producto en cada recarga de la página del producto.
• Modo directo – Activando el modo directo se generan peticiones que actualizarán la visualización de los visitantes viendo el producto en tiempo real, sin tener que recargar la página. Puedes configurar cada cuantos segundos se producirá la petición y actualización automática de la visualización de usuarios viendo el producto. Esto consume bastantes recursos, pues genera peticiones AJAX, por por otra parte es muy potente ver cómo van aumentando los visitantes viendo el producto mientas el cliente decide si lo compra o no. La ansiedad se multiplica si cada vez hay más usuarios viendo la página del producto.
• Modo de usuarios falsos – ¿Tu tienda tiene aún pocos visitantes? Con este plugin puedes igualmente generar esa inquietud, esa ansiedad por la compra mostrando cantidades aleatorias de usuarios falsos. Solo tú sabrás que no son reales, y el efecto de urgencia en tus visitantes será el mismo. Con este modo activo puedes configurar el umbral de usuarios que se mostrará, por ejemplo, entre 2 y 30, o lo que tú creas conveniente. Este valor cambiará automáticamente cada 25 minutos, para una sensación más real.

En la siguiente captura tienes los ajustes disponibles para el modo de usuarios falsos.

Más ajustes

Pero hay más ajustes interesantes, en la administración de tu tienda online, en el menú WooCommerce → Contador de visitas, que debes revisar sí o sí, para una experiencia personalizada para tu tienda online.

• ¿Tu sitio usa un sistema de caché? – Si tienes activo algún sistema de caché activa este ajuste y, a continuación, añade wcvisitor a las excepciones de caché.
• ¿Con qué frecuencia hay que actualizar el número de usuarios del producto? – Si tienes activo el modo directo aquí puedes cambiar el valor por defecto de las actualizaciones (5 segundos) al valor que consideres más adecuado para tu tipo de visitantes y recursos de tu servidor.
• Duración – Con este valor (en milisegundos) estableces cada cuánto tiempo se considera que un usuario está inactivo, y debería quitarse del contador de personas visualizando el producto.
• Posición – Aquí puedes seleccionar dónde se visualizará el mensaje de cuantos usuarios están viendo el producto. Las opciones son las siguientes:
  • Después del botón del carrito (por defecto)
  • Antes del botón del carrito (como está en mis capturas)
  • Antes de los datos meta del producto
  • Antes del texto de resumen del producto
  • Después del texto de resumen del producto (similar a antes del botón de añadir al carrito pero un poco más arriba, sobre el valor de inventario)
  • En la miniatura del producto (debajo de la imagen destacada del producto.
  • Shortcode [wcvisitor] (si lo prefieres puedes usar este shortcode donde quieras que se muestre el mensaje, ideal si usas maquetadores)
• Icono – Por defecto se mostrará el icono del ojo antes del número del usuarios pero puedes cambiarlo a otro de la biblioteca Font Awesome.
• ¿Problemas con el icono? – Si por defecto compruebas que no se carga ningún icono activa esta casilla y el plugin cargará la biblioteca Font Awesome.
• Mensaje para más de un usuario / para un solo usuario – En estas cajas puedes personalizar el texto a mostrar en el mensaje.

¿Debería activar el modo de usuarios falsos?

Vistas las funcionalidades y oportunidades que ofrece este fantástico plugin hay una cuestión que debes valorar antes de usar todo su potencial. Me refiero, en concreto, a la opción de activar el modo de usuarios falsos, ciertamente tentador ¿verdad?

Pero hay una pega, y es que este tipo de técnicas no son éticas, ni siquiera legales en la mayoría de países. Allí donde haya una legislación de protección del consumidor que penalice cualquier tipo de informacion falsa sobre ventas y/u opiniones de clientes estarás incumpliendo la ley, además de mintiendo a tus clientes.

Así que, aunque tengas ahí la opción disponible, tentándote cada vez que la veas, como pizza recién sacada del horno, evítalo, y mejor muestra los usuarios reales, en el modo normal o el modo directo.

El problema

Cuando tienes una web WordPress y descubres que hay textos que no están traducidos a tu idioma ,del mismo WordPress, un plugin o el tema, la solución suele ser alguna de estas 3:

1. Pedir al autor que traduzca el texto a tu idioma
2. Traducir el texto mediante programación
3. Instalar un plugin como Loco Translate o WPML para traducir el texto

Ahora bien, estos métodos tienen cada uno sus respectivos problemas …

1. El autor no siempre está por la labor de ofrecer traducciones.
2. No tienes conocimientos de programación o no te atreves a tocar código
3. Los plugins de traducción consumen muchos recursos pues añaden mucho más que la traducción manual de textos

La solución más sencilla para estos problemas es un plugin que descubrí hace poco en la web de un cliente al que le hacemos mantenimiento, y da respuesta a la necesidad de traducir textos a tu idioma de manera sencilla y ligera.

La solución

El plugin se llama Gettext override translations y ofrece una interfaz sencilla en la que sustituir textos originales de WordPress, temas y plugins instalados en tu web por los textos que tú quieras que se muestren.

Por ejemplo, acabas de activar un tema nuevo y ves que faltan cosas por traducir…

Pues es tan sencillo como pasarte por la página del plugin en Plugins → Gettext override translations y empieza a añadir tus traducciones/sustituciones de textos.

Es importante que marques la casilla de «Protect setting?» por 2 motivos:

1. Poder revisar las traducciones posteriormente
2. Que las traducciones se guarden de manera consistente

Cuando añadas tus traducciones/sustituciones estas aparecerán ya en tu web cambiadas por tu texto.

Restricciones

Ahora bien, el plugin no es capaz de traducir todo, pues no traducirá/sustituirá textos que contengan valores dinámicos. Por ejemplo, en la captura que he utilizado el tema muestra 2 tipos de textos:

• Read full – Texto normal, que no depende de ningún valor dinámico.
• views / comments – Texto dinámico, que puede cambiar dependiendo de la cantidad (de views o comments)

Esto es debido a que en el código de temas y plugins estos textos vienen precedidos del caracteres dinámicos %s o %d, que serán sustituidos por una cantidad (vistas, comentarios, etc.) y este plugin no traducirá cadenas con estos caracteres, pues un error podría arruinar completamente el tema o plugin.

Así, si el plugin detecta que en el texto a traducir hay una cadena de este tipo, por ejemplo «%d views» no traducirá views por tu texto, no tocará esa cadena de texto/programación.

Eso sí, el resto de cadenas de texto que no lleven esos caracteres dinámicos los traduce todos sin problema, y es una solución sencilla y ligera a un problema que te vas a encontrar en montones de ocasiones al activar plugins y temas.

Para sustituir/traducir cadenas de texto complejas, incluso dinámicas, entonces ya tienes que recurrir a plugins como WPML, Loco Translate o alguna de estas guías:

• Cómo cambiar, moderar, sustituir o reemplazar textos en WordPress
• Cambiar textos de WordPress sin modificar la traducción
• Cómo cambiar cualquier texto en WooCommerce

Si ofreces productos digitales de descarga gratuita en tu tienda online WooCommerce ya deberías saber que para tus usuarios es un engorro innecesario tener que pasar por la página de finalizar compra para poder descargar tus archivos ¿o no lo sabías?

Vale que tiene sus ventajas hacer pasar a los usuarios por la página de finalizar compra, como por ejemplo forzar a que se registren, y así enviarles posteriormente tus fantásticas ofertas … igual ya no tan gratuitas, pero si no es el caso, si no vas a realizar esta inteligente y «novedosa» acción de marketing es totalmente inútil y molesto hacer que tus visitantes tengan que realizar todo el proceso de compra solo para descargar un producto digital gratuito.

Además, que para captar clientes para mandarles ofertas hay otras maneras de hacerlo, pero no adelantemos acontecimientos…

Por qué deberías plantearte ofrecer un botón de descarga rápida para productos digitales gratuitos

Volviendo al objetivo inicial, si tienes en tu tienda online productos digitales de descarga gratuita, puedes ofrecer un método de descarga rápida, evitando que el usuario pase por todo el proceso de …

1. Añadir al carrito
2. Ir a la página de finalizar compra
3. Rellenar datos de facturación
4. Finalizar compra
5. Descargar (por fin) el producto digital gratuito.

¡Un peñazo!

¿A qué sería mejor para tus visitantes algo así?…

Y que al hacer clic en el botón se descargase el producto digital gratuito de inmediato… pues vamos a ello…

Cómo ofrecer descargas gratuitas sin tener que pasar por la página de pago de WooCommerce

La solución es sencilla, instala y activa el plugin Free Downloads WooCommerce, verás que ricura.

Una vez activo debes pasarte por su página de configuración, pues tiene montones de ajustes, a cuál más interesante. Y los vamos a ver en detalle…

Ajustes generales

 

Aquí tienes lo fundamental, a saber:

• Textos de los botones – Aquí puedes personalizar los botones de descarga y visualización, tanto si el usuario está registrado como si no.
• Mostrar el botón solo a usuarios registrados – Esto es perfecto si sigues queriendo ofrecer descargas gratuitas rápidas, pero solo a usuarios registrados, incitando al registro de los nuevos visitantes. También puedes personalizar el texto a mostrar.
  
• También permitir descargas en los listados de productos – Para facilitar aún más las descargas.
  
• Incluir también artículos con precio actualmente en oferta gratuita – Para esas ofertas…
• Solo para productos incluidos/excluidos – Por defecto el plugin se aplica a todos los productos, pero con estas casillas puedes configurarlo para que solo ofrezca descargas rápidas gratuitas de productos concretos, por inclusión o por exclusión, lo que te sea más rápido. Si activas alguna de estas casillas tendrás una nueva caja meta en el editor de productos para incluir/excluir cada producto de las descargas rápidas.
  
• Contador de descargas – Por si quieres mostrar un conteo de las descargas de cada producto digital gratuito.
• Clases y CSS – Aquí puedes añadir clases y CSS personalizados a los botones y enlaces, si fuese necesario.

Solo con esto ya consigues lo que buscábamos, de ofrecer botones de descarga rápida para productos digitales gratuitos, pero aún puedes configurar algunos aspectos más al detalle.

Archivos únicos

En los ajustes para archivos únicos puedes elegir la visualización del enlace de descarga como botón o enlace, especificar el texto del botón o el enlace, si quieres mostrar el nombre del archivo e incluso si quieres que se genere un archivo ZIP automáticamente de tus archivos digitales, por ejemplo para los PDF.

Múltiples archivos

Si tu producto ofrece varios archivos para descarga gratuita también puedes elegir el modo de visualización de las descargas, aquí con más opciones:

• Solo enlaces
• Botón único (para descargar todos)
• Botón + casillas de selección (para elegir cuáles descargar)
• Botón + enlaces (lo mismo)
• Botón + nombres de los archivos (idem)

Luego puedes personalizar los distintos textos según el tipo de visualización.

El resultado es genial del todo:

Productos ya adquiridos

¿Quieres también personalizar la visualización cuando el usuario ya haya adquirido previamente el producto digital gratuito? También puedes, incluso añadiendo una insignia bien visible para el usuario.

Vista rápida

Esta funcionalidad, en fase beta, te permite activar un nuevo botón, que podrás personalizar tras activar la característica, de vista rápida del producto, y así evitarte el uso de este tipo de plugins.

Visor de PDF

Para finalizar, puedes activar el visor de archivos PDF para que, en vez de descargarse los productos digitales que sean un PDF, el usuario pueda visualizarlos en una ventana del navegador y luego, si quiere, ya descargarlos o imprimirlos directamente.

Este ajuste es algo rarito pues, como indica en la documentación, lo que hace el plugin es crear una especie de duplicado del archivo PDF mediante la vista previa de PDF de Google Docs, para proteger tus archivos originales, y luego los borra al cabo de 1 hora.

---

Al final lo que puedes ofrecer con este plugin, también gratuito, como tus descargas, es un modo rápido, sencillo y muy personalizable de ofrecer descargas rápidas de tus productos digitales gratuitos, sin tener que estar haciendo pasar a los visitantes de tu tienda online por todo el largo y tedioso proceso de compra habitual.