Cómo añadir un slider de antes y después en WordPress

¿Eres estilista, decorador, retocador o cualquier otro profesional que necesita mostrar los resultados visuales de su trabajo? Un slider de antes y después en tu sitio web es fácil de usar y comunica valor al instante. Por desgracia para los usuarios de WordPress, la plataforma no incluye una función de slider de forma nativa.

Aun así, añadir un slider a WordPress no es imposible. Tienes tres opciones: usar un plugin de terceros, usar un widget externo ligero y gratuito, o crear un slider desde cero escribiendo código personalizado.

Este artículo explica cómo añadir un slider de antes y después en WordPress con los tres métodos, para que sepas cuál se adapta mejor a tus necesidades.

Watch on youtube

How to Add a Before and After Slider in WordPress

Opción 1: instala un plugin de slider para WordPress 

Una de las formas más habituales de añadir un slider de antes y después es usar un plugin de WordPress. Sin embargo, este enfoque tiene un par de inconvenientes.

Algunos plugins añaden CSS y JavaScript adicionales en todo tu sitio, lo que aumenta los tiempos de carga de las páginas. Además, los constructores de páginas «pesados», como Elementor, te obligan a gestionar el slider mediante shortcodes complejos (códigos basados en texto y específicos de WordPress), lo que puede ser un auténtico quebradero de cabeza para los usuarios principiantes. Si borras por accidente una parte del código, el slider deja de funcionar al instante. Y, por si fuera poco, algunos plugins tienen un modelo de negocio freemium que reserva las funciones avanzadas tras un muro de pago.

Los plugins no son la mejor opción para todos los usuarios, pero son una solución sólida si tienes conocimientos técnicos y te desenvuelves bien con WordPress. Sigue estas instrucciones para instalar un plugin de antes y después en WordPress:

1. Instala el plugin: ve al escritorio de WordPress y haz clic en Plugins. Escribe «before-and-after slider» en la barra de búsqueda y selecciona el plugin que quieras usar entre los resultados. (Hay decenas. Consulta una lista de los mejores plugins de WordPress para otro tipo de tareas.)

Sigue las indicaciones para instalar el plugin. (Las instrucciones exactas de instalación dependerán del plugin concreto.)

Ten en cuenta que, aunque muchos plugins son gratuitos, otros tienen un coste único. En la mayoría de los casos, solo puedes usarlos con un plan de pago de WordPress.

2. Crea el slider de antes y después: abre el plugin desde el escritorio de WordPress. Selecciona la opción para crear un nuevo slider de antes y después. Sube tus imágenes de antes y después. Para seguir las buenas prácticas, usa imágenes con el mismo encuadre y las mismas dimensiones.
3. Personaliza el slider de antes y después: la mayoría de los plugins te permiten ajustar opciones como las etiquetas de las imágenes, la posición inicial, el aspecto del control deslizante y la orientación del slider. Ajusta la configuración y guarda los cambios.
4. Añade el slider de antes y después a tu sitio de WordPress: abre la página de WordPress en la que quieras que aparezca el slider. Según el plugin, puedes añadirlo creando un bloque de WordPress específico o insertando un shortcode en la página.

Opción 2: usa un widget de slider gratuito y sin código (recomendado) 

Si no quieres lidiar con shortcodes tediosos ni con plugins pesados que ralentizan la carga de tu sitio de WordPress, la mejor opción es usar un widget de slider sin código. El widget de slider de antes y después de Jotform es totalmente gratuito y fácil de usar. Como el widget funciona sin servidor, no afecta en absoluto a la velocidad de tu sitio. Además, funciona a la perfección tanto en ordenador como en smartphone.

El widget de slider de antes y después de Jotform ofrece una interfaz visual que no requiere programar. Solo tienes que subir dos imágenes al creador de widgets, personalizar los colores del control de arrastre y establecer la posición inicial predeterminada. Después, copia el código y pégalo en WordPress.

Estos son los detalles:

1. Añade pares de imágenes: ve a la página del widget de slider de antes y después de Jotform y sube tus imágenes de antes y después en el cuadro de ajustes del widget. Edita el título del widget y especifica el tipo de interacción que quieres ofrecer (arrastrar y hacer clic frente a pasar el cursor). Haz clic o toca Continuar.

2. Personaliza los ajustes del slider: puedes modificar opciones como la relación de aspecto de la imagen, el radio de las esquinas, el grosor del divisor y los colores del slider. Desplázate hacia abajo para seleccionar todas tus especificaciones.

3. Obtén el código de inserción del widget de slider: haz clic o toca Pruébalo gratis en tu sitio web. Jotform te proporcionará un código de inserción para el widget de slider. Haz clic o toca Copiar. Jotform te pedirá que te registres o inicies sesión para obtener el código.

4. Pega el código de inserción del slider en WordPress: ve a tu sitio de WordPress y añade un bloque de HTML personalizado desde el insertor de bloques. Pega el código de inserción en el bloque de HTML. Haz clic o toca Actualizar. WordPress insertará automáticamente el widget de slider de antes y después en tu sitio de WordPress.

Opción 3: programa un slider personalizado con HTML/CSS 

Si eres un purista de WordPress y prefieres evitar los plugins de terceros o los widgets externos, puedes crear un slider desde cero usando código puro.

Aunque este método es técnicamente gratuito y nativo de WordPress, no es nada sencillo. Necesitarás tener experiencia avanzada en programación, sobre todo si quieres que los visitantes de tu sitio web puedan usar el slider desde un smartphone. Y un solo error de código puede romper el slider y afectar, entre otras cosas, a la adaptación a dispositivos móviles.

Así se añade un slider de antes y después en WordPress con código personalizado:

1. Sube las imágenes de antes y después: añade ambas imágenes a la biblioteca de medios de WordPress.
2. Crea el código HTML/CSS personalizado para el slider: escribe el código HTML/CSS para estructurar y dar estilo al slider. Es posible que también necesites JavaScript para añadir la interacción de arrastrar y deslizar.

Puedes escribir este código tú mismo, trabajar con un compañero que tenga experiencia en programación o usar una herramienta de IA para generarlo.

Copia el código.

3. Añade el código a tu sitio de WordPress: en tu sitio de WordPress, añade un bloque de HTML personalizado y pega tu código en él. Añade el CSS y el JavaScript que necesites a través del tema de WordPress o de la configuración del sitio.

Mejora tu sitio de WordPress con widgets inteligentes y sin código 

Si quieres dar prioridad a la velocidad y la seguridad de tu sitio, reducir costes y evitar el código complejo, el widget de slider de antes y después de Jotform es una excelente forma de añadir contenido multimedia interactivo y atractivo a tu sitio web. Es totalmente gratuito, ideal tanto para principiantes como para profesionales, y no requiere escribir código.

¡Pero eso no es todo lo que Jotform tiene para ofrecerte!

En el directorio de widgets para sitios web de Jotform encontrarás más de 150 widgets gratuitos para sitios web que pueden mejorar tu sitio de WordPress. Por ejemplo, el widget de contador de visitas es una forma estupenda de mostrar lo popular que es tu sitio, mientras que el widget de cuenta atrás ayuda a generar sensación de urgencia en torno a eventos y campañas importantes.

Jotform también ofrece miles de formularios para WordPress, como formularios de contacto, formularios de captación de clientes potenciales y formularios de pedido. Añádelos a tu sitio para recopilar información importante de tus visitantes.

Jotform tiene un plan gratuito. Pruébalo para empezar a explorar los widgets y comprobar lo fácil que es mejorar la funcionalidad de tu sitio de WordPress sin sacrificar el rendimiento ni escribir código.