¿Te preocupa elegir un plugin before/after que sea fiable, fácil y que no rompa la web? ¿No sabe cómo montar un slider comparador sin conocimientos técnicos? Esta guía soluciona eso: selección de plugins segura para principiantes, una guía simple paso a paso para crear sliders before/after en WordPress, cómo arreglar fallos comunes y cuánto cuesta realmente usar estas herramientas.
Puntos clave: Lo que debes saber en 1 minuto
Before/After imágenes necesita dos fotos alineadas y optimizadas para evitar saltos o distorsiones en el slider.Elegir un plugin simple y actualizado reduce el riesgo de conflictos y ralentización del sitio.Para principiantes, las opciones gratuitas son suficientes en la mayoría de webs (portfolio, estética, remodelación), y las versiones premium añaden animaciones y soporte.Si el slider falla, comprobar compatibilidad con el tema y la optimización de imágenes suele resolver el 80% de los problemas.Coste real : se puede empezar gratis; precios premium usualmente entre 20€-70€ por licencia anual.
Mejores plugins before/after para principiantes
Para usuarios con nivel técnico bajo o medio, la prioridad es: instalación con un clic, interfaz visual (arrastrar/soltar o shortcode sencillo), buena reputación y actualizaciones recientes.
Recomendaciones seguras:
Twenty20 / Before After: plugin ligero para comparaciones simples, ideal para portfolios y blogs. Fácil de usar con shortcode y bloque para Gutenberg.
Before After Image Comparison Slider (freemium): interfaz clara, ajustes de responsividad y opciones de orientación vertical/horizontal.
WPBakery / Elementor (módulos integrados): si ya se usa un maquetador, su widget comparador evita instalar plugins adicionales.
Enlace de referencia para buscar plugins verificados: Repositorio WordPress - búsqueda before after .
Cómo elegir según el tipo de web
Web de estética/odonto: priorizar precisión visual y control de resolución.
Web de reformas/arquitectura: buscar ancho completo y comparaciones en alta resolución.
Blog personal o tienda pequeña: una solución gratuita con bloque Gutenberg suele ser suficiente.
Plugin
Facilidad (1-5)
Ideal para
Coste
Twenty20 / Before After
5
Portfolios, blogs
Gratis
Before After Image Comparison Slider
4
Estética, remodelación
Freemium (20€-50€/año)
Elementor / WPBakery (widget)
4
Usuarios de maquetadores
Incluido en constructor
Guía simple: slider before y after en WordPress (paso a paso)
Este tutorial usa el flujo más seguro para principiantes: instalar desde el repositorio, crear el comparador y optimizar imágenes.
Paso 1: prepara las imágenes correctamente
Usar misma proporción y dimensión para ambas fotos (por ejemplo 1200x800 px).
Guardar en WebP o JPG optimizado (70-85% calidad).
Añadir texto alternativo (alt) descriptivo por accesibilidad y SEO.
Paso 2: instala y activa el plugin desde el panel
Ir a Plugins → Añadir nuevo.
Buscar “before after” y elegir un plugin con buenas valoraciones y actualizaciones recientes.
Pulsar Instalar y Activar. Evitar plugins sin descargas ni reseñas.
Paso 3: crea el comparador (bloque o shortcode)
Crear una nueva entrada o página.
Insertar el bloque del plugin (o pegar el shortcode que genera el plugin).
Subir ambas imágenes y ajustar el ancho, orientación y etiqueta del control.
Paso 4: prueba en móvil y escritorio
Revisar la vista móvil en el editor.
Ajustar el punto de corte inicial (handle) y la animación si existe.
Comprobar que la imagen carga rápido y no provoca CLS (saltos de diseño).
Paso 5: optimización final
Activar lazyloading si el plugin lo permite o usar la función nativa de WordPress.
Servir imágenes WebP si el servidor lo admite.
Si el slider añade JS grande, valorar cargarlo solo en la página donde se usa.
✉
¿Quieres más información? Escríbenos y te orientamos
Plugin before y después: paso a paso (tutorial avanzado para evitar errores comunes)
Paso A: comprobar compatibilidad con el tema
Algunas plantillas tienen estilos que afectan al posicionamiento. Antes de publicar, probar el slider en una página temporal y en el modo inspección móvil.
Paso B: ajustar CSS si es necesario (solución básica, sin programar)
Muchos plugins ofrecen opción “full width” o “container width”. Si el slider se sale, cambiar esa opción. Si el control (handle) no se ve, aumentar su z-index desde opciones del plugin.
Paso C: uso con constructores visuales
Si se usa Elementor o WPBakery, insertar el widget propio del constructor en lugar de un plugin adicional cuando sea posible. Evita duplicar funciones.
Cómo funciona realmente un slider before/after imágenes
Un slider before/after superpone dos imágenes y usa un «control» (handle) para revelar progresivamente la imagen superior. Para mantener la ilusión visual, ambas imágenes deben compartir exacta proporción y alineación. Si hay discrepancia en iluminación o encuadre, el comparador resaltará diferencias no deseadas.
Proceso simple: crear un slider before/after
📷 Paso 1 → Sube dos imágenes con la misma proporción
🔧 Paso 2 → Instala un plugin fiable desde el repositorio
⚙️ Paso 3 → Inserta el bloque/shortcode y ajusta el handle
📱 Paso 4 → Prueba en móvil y activa lazyloading
✅ Éxito → Slider responsivo y rápido
Ventajas, riesgos y errores comunes
Beneficios / cuándo aplicar ✅
Mejora la percepción visual en servicios con transformaciones (estética, reformas, fitness).
Aumenta el tiempo en página y la claridad del mensaje.
Es ideal para mostrar comparativas directas que convencen a clientes.
Errores que debes evitar / riesgos ⚠️
Usar imágenes con distinta proporción: produce saltos y mala experiencia.
Cargar imágenes sin optimizar: afecta a Core Web Vitals y conversiones.
Instalar múltiples plugins comparadores: aumenta riesgo de conflictos y ralentización.
✉
¿Quieres más información? Escríbenos y te orientamos
Qué hacer si el plugin before después falla
Síntoma: el slider no aparece
Comprobar que el plugin está activado .
Verificar que el bloque/shortcode se ha insertado correctamente.
Probar desactivando otros plugins para detectar conflictos.
Síntoma: el slider aparece pero se rompe en móvil
Revisar opciones de responsividad del plugin.
Comprobar que no haya CSS del tema que fuerce imágenes a un tamaño fijo.
Usar imágenes con la misma proporción y suficiente resolución.
Evitar agrandar una imagen pequeña; en su lugar subir una versión mayor optimizada.
Pasos rápidos de solución
Desactivar cache y comprobar cambios en modo incógnito.
Cambiar temporalmente al tema predeterminado (Twenty Twenty-Six) para descartar conflicto con el tema.
Actualizar plugin y WordPress a la última versión.
Contactar al soporte del plugin si persiste (adjuntar URL y captura).
Cuánto cuesta un plugin comparador before y after
Modelo gratuito: funcionalidades básicas, bloque/shortcode, limitadas opciones de estilo. Perfecto para probar y para la mayoría de webs pequeñas.
Freemium: añadir opciones de animación, capas múltiples o soporte prioritario. Precio típico: 20€–50€ al año .
Premium único o anual: licencias de desarrollador o con extras (múltiples instancias, soporte extendido) pueden costar 50€–120€ al año .
Recomendación: empezar con una solución gratuita y solo pagar si se necesita animación avanzada o soporte. Para webs con alto tráfico, invertir en una versión optimizada puede ahorrar tiempo y evitar problemas de rendimiento.
Buenas prácticas SEO y accesibilidad para before/after imágenes
Añadir alt y title descriptivos a ambas imágenes.
Incluir una leyenda breve que describa la transformación para usuarios que no usan el slider.
Usar atributos srcset y tamaños para servir imágenes adaptadas a dispositivo.
Evitar texto importante incrustado en las imágenes; si es imprescindible, repetir el texto en el HTML.
✉
¿Quieres más información? Escríbenos y te orientamos
Preguntas frecuentes
¿Qué plugin before/after es más fácil para principiantes?
Twenty20 o un bloque integrado en Gutenberg/Elementor son las opciones más sencillas por su interfaz inmediata.
¿Puedo hacer un slider before/after sin plugin?
Sí, usando código CSS/JS manual o bloques de maquetador, pero no es recomendable para principiantes por el mantenimiento.
¿Cómo optimizo las imágenes para que no ralenticen la web?
Usar WebP, ajustar dimensiones al tamaño mostrado y activar lazyloading para imágenes fuera de pantalla.
¿Puedo usar before/after en WooCommerce para productos?
Sí, se puede insertar el slider en la ficha de producto usando shortcode o bloque; es útil para mostrar procesos o mejoras.
¿Qué debo comprobar antes de comprar la versión premium de un plugin?
Comprobar actualizaciones recientes, política de soporte, compatibilidad con el tema y opiniones de usuarios.
¿Es legal publicar before/after con rostros de clientes?
Se requiere consentimiento explícito del cliente; conservar el consentimiento firmado y, si se publica en la UE, cumplir RGPD.
TU PRÓXIMO PASO:
Instalar un plugin gratuito recomendado y crear una página de prueba con dos imágenes alineadas.
Probar el slider en móvil y medir la velocidad con Lighthouse; optimizar imágenes si la puntuación baja.
Si hay errores, seguir la lista de solución rápida (desactivar cache, probar tema predeterminado, actualizar).
