Para agregar links en un layer Before/After de Smart Slider 3 tenés que seleccionar el layer (o el slide), ir a la pestaña Content dentro del editor y cargar el enlace en el campo Link, ya sea apuntando a una página de WordPress, a un lightbox o a una acción interna. La función de links forma parte del comportamiento estándar del plugin, y las opciones más potentes (como las Actions) están reservadas a Smart Slider Pro. Si necesitás agregar links en este tipo de slider, el truco está en saber si querés que el clic afecte al slide entero o solo a una de las dos imágenes.
El Before/After Layer de Smart Slider 3 es un elemento que muestra dos imágenes superpuestas con un divisor arrastrable, pensado para comparaciones visuales tipo «antes y después». Permite orientación horizontal o vertical y se edita desde el mismo canvas que el resto de las capas del slider. Los links se asignan en la pestaña Content, no en una sección aparte.
En 30 segundos
- Dónde se cargan: en la pestaña Content del editor, tanto a nivel layer como a nivel slide completo.
- Tipos de link: a posts/páginas de WordPress, lightbox (galería o imagen ampliada) y Actions internas (scroll, ir a un slide, disparar animaciones).
- Pro vs gratis: el link básico a una URL existe en la versión free; las Actions avanzadas necesitan Smart Slider Pro.
- El error más común: un overlay estático encima del Before/After que se «come» el clic, o un
#duplicado en la URL. - Layer o slide: si querés que el clic dependa de la imagen, va en el layer; si querés que todo el slide sea clickeable, va en el slide.
¿Para qué sirve el Before/After Layer en Smart Slider 3?
Ponele que tenés un cliente de reformas y querés mostrar cómo quedó un baño después de la obra. Subís la foto del «antes», la del «después», y el visitante arrastra el divisor para comparar. Eso es el Before/After Layer: un elemento de comparación con dos capas de imagen y un control deslizante en el medio.
No es solo para obras. Funciona para retoque fotográfico (foto cruda contra edición final), variaciones de un producto, o cualquier comparación donde la gracia esté en ver las dos versiones en el mismo espacio. La orientación del divisor podés ponerla horizontal o vertical según cómo encuadre mejor. Te puede servir nuestra cobertura de crear landing pages que conviertan.
El tema es que muchos lo usan solo como adorno y se pierden lo interesante: que cada parte puede llevar a algún lado. Un portfolio de fotografía, ponele, puede mostrar el antes/después de una edición y que el clic mande a la nota donde explicás la técnica. Ahí el slider deja de ser decorativo y empieza a cumplir una función.
¿Qué necesitás para agregar links en Before/After?
Antes de pelearte con el editor, chequeá que tengas todo en orden. La lista es corta pero cada punto te ahorra un dolor de cabeza después.
- Smart Slider 3 instalado y activo: el plugin tiene una versión gratuita (en el repositorio de WordPress.org) y la Pro. El Before/After Layer existe en ambas, pero las acciones avanzadas no.
- Smart Slider Pro para las Actions: si querés que el clic dispare un scroll, navegue a otro slide o ejecute una animación, eso es exclusivo de la licencia Pro.
- WordPress actualizado: mantené el core y el plugin al día para evitar conflictos con Gutenberg o con el editor visual del slider.
- Permisos de edición: tu usuario tiene que poder editar sliders (rol de administrador o editor con capacidades sobre el plugin).
- Un navegador moderno: el editor de Smart Slider 3 es pesado en JavaScript. Si te tira raro, probá en otro navegador antes de asumir que es un bug.
Una cosa más sobre dónde corre todo esto. El editor de Smart Slider 3 consume recursos del servidor, y si tu WordPress vive en un hosting ajustado, vas a sentir la lentitud al guardar sliders complejos. Si estás armando algo serio, un hosting WordPress de Donweb te da margen para que el editor no se arrastre.
¿Dónde están las opciones de links: en el layer o en el slide?
Acá viene la confusión número uno. Smart Slider 3 tiene dos lugares para cargar un link y no son lo mismo.
- Link a nivel layer (Layers → Content): seleccionás el Before/After Layer en el panel de capas, vas a la pestaña Content y cargás el link ahí. El clic afecta solo a ese elemento.
- Link a nivel slide (Slides → Content): el enlace cubre el slide completo. Cualquier clic en cualquier parte del slide dispara la navegación.
¿Por qué importa la diferencia? Porque si ponés el link en el slide y además tenés un botón con otro link adentro, podés generar un conflicto: el visitante hace clic en el botón y termina yendo a la URL del slide. La regla práctica es simple. Si querés control fino, trabajá a nivel layer. Si querés que «todo lleve al mismo lado», usá el slide. Esto se conecta con lo que analizamos en probar cambios en ambiente seguro.
Tipos de links disponibles en Smart Slider 3
No todos los links son una URL pelada. El plugin te da tres familias, y elegir bien cambia la experiencia del usuario.
Links a contenido de WordPress
Al lado del campo Link hay un botón «+» que abre un buscador del contenido de tu sitio. Escribís el nombre de un post o una página y Smart Slider te arma la URL solo. Esto es lo que la documentación llama framework-specific links: en vez de pegar a mano la dirección, el plugin la resuelve desde la base de datos de WordPress. Menos errores de tipeo, menos URLs rotas.
Lightbox
En lugar de mandar al usuario a otra página, el lightbox abre una imagen ampliada o una galería sobre el slider, sin recargar. Sirve cuando querés que el clic muestre la versión grande del «después» sin sacar a la persona de donde está. Lo configurás en el mismo campo de link, eligiendo el tipo lightbox.
Actions (solo Pro)
Las Actions son la parte que justifica la Pro. Con un clic podés hacer scroll hasta un elemento de la página, saltar a un slide específico, o disparar una animación. Ponele que tu Before/After está arriba de todo y querés que el botón «Ver presupuesto» baje suave hasta el formulario de contacto: eso lo resolvés con una Action de scroll, sin plugins extra. Tema relacionado: verificar que todos tus links funcionen.
Cómo agregar un link en Before/After, paso a paso
Vamos a lo concreto. Estos son los pasos para cargar un link de WordPress en tu Before/After Layer.
- Abrí el slider en el editor de Smart Slider 3 y entrá al slide que tiene el Before/After.
- Seleccioná el layer Before/After en el panel de capas (o el slide, si querés que el link sea global).
- Andá a la pestaña Content. Ahí vive el campo Link, no en Style ni en Animations.
- Hacé clic en el «+» al lado del campo para abrir el buscador de contenido de WordPress.
- Buscá y seleccioná la página o post de destino. El plugin completa la URL automáticamente.
- Guardá los cambios con el botón Save del editor. Sin guardar, el link no se aplica.
- Probá el clic en Preview. Abrí la vista previa y verificá que el enlace dispare y vaya al lado correcto.
Si en vez de una página querés un lightbox o una Action, el paso 4 cambia: elegís el tipo de link correspondiente en lugar de buscar contenido. El resto es igual.
Tabla: tipos de link según versión y caso de uso
| Tipo de link | ¿Necesita Pro? | Para qué sirve |
|---|---|---|
| URL / contenido WordPress | No | Mandar a un post, página o enlace externo |
| Lightbox | No | Abrir imagen ampliada o galería sin recargar |
| Scroll a elemento | Sí | Bajar suave a un formulario o sección |
| Ir a un slide específico | Sí | Navegación interna del slider |
| Disparar animación | Sí | Efectos al hacer clic en el layer |
Casos de uso reales: links en Before/After
La teoría está linda, pero ¿dónde se usa esto de verdad? Cuatro escenarios que aparecen seguido.
- Portfolio de fotografía: antes/después de una edición, con el clic apuntando a la nota donde explicás el proceso. El divisor engancha, el link convierte la curiosidad en lectura.
- E-commerce y variaciones: dos colores del mismo producto lado a lado, cada uno con link a su variante en WooCommerce. El visitante compara y entra directo a comprar.
- Reformas y renovaciones: la transformación de un local, con link a la galería completa del proyecto. Ideal para estudios de arquitectura o constructoras.
- Comparativas de producto: dos opciones enfrentadas, cada lado con su botón de «ver más» o «comprar». Funciona para reviews y páginas de afiliados.
Errores comunes al agregar links (y cómo evitarlos)
Estos son los tropezones que veo una y otra vez. Si tu link no funciona, empezá por acá. Lo explicamos a fondo en mantener tus complementos al día.
- El overlay estático se come el clic: si tenés un Static Overlay (un elemento fijo sobre todos los slides) encima del Before/After, puede tapar el área clickeable. Revisá el orden de capas y bajá el overlay o achicalo.
- URL relativa donde va una absoluta: si pegás
/mi-paginaen vez dehttps://tusitio.com/mi-pagina, en algunos contextos el link rompe. Usá el buscador «+» de WordPress y te ahorrás el problema. - El
#duplicado: al armar anclas internas a veces queda una URL con dos#(por ejemplotusitio.com/#/#seccion). Eso no resuelve. Limpiá la dirección a un solo ancla. - Falta el http/https: un link externo sin protocolo se interpreta como ruta interna y tira 404. Siempre el enlace completo.
- Conflicto slide vs layer: pusiste link en el slide y también en un botón, y el botón «no anda». El clic se lo lleva el slide. Decidí dónde va el enlace y dejá uno solo.
- Esperar Actions en la versión gratis: si configuraste un scroll o un «ir a slide» y no pasa nada, fijate la licencia. Esas funciones son Pro.
¿Probaste todo y sigue sin andar? Vaciá la caché del navegador y, si usás un plugin de cache, purgá la del sitio. Más de una vez el link estaba bien y lo que veías era una versión vieja guardada.
Preguntas Frecuentes
¿Se pueden agregar links en Before/After con Smart Slider 3 gratis?
Sí, los links básicos a una URL, a contenido de WordPress y a lightbox están en la versión gratuita. Lo que necesita Smart Slider Pro son las Actions avanzadas: scroll a un elemento, navegación a un slide específico o disparo de animaciones al hacer clic.
¿Dónde se carga el link en el editor?
En la pestaña Content del editor, con el layer o el slide seleccionado. El campo Link tiene un botón «+» que abre un buscador del contenido de tu sitio para que no escribas la URL a mano.
¿Por qué mi link no funciona en el Before/After?
La causa más frecuente es un Static Overlay u otro elemento que se superpone y captura el clic. Le siguen las URL mal formadas (sin http/https o con # duplicado) y el conflicto entre un link a nivel slide y otro a nivel layer.
¿Conviene poner el link en el layer o en el slide?
Depende del control que quieras. Si necesitás que distintas partes lleven a distintos destinos, cargá el link a nivel layer. Si querés que todo el slide sea clickeable hacia un único lugar, usalo a nivel slide.
¿El Before/After Layer afecta el SEO o la velocidad del sitio?
Carga dos imágenes por slide, así que el peso depende de cómo optimices esas imágenes. Comprimilas, usá formatos modernos como WebP y un buen hosting para que el LCP no se resienta. El slider en sí no penaliza el SEO si las imágenes están livianas.
Conclusión
Agregar links en un Before/After de Smart Slider 3 no tiene ciencia una vez que entendés dos cosas: que todo se carga en la pestaña Content, y que no es lo mismo enlazar el layer que el slide completo. Esa decisión te evita el 80% de los problemas. Para destinos simples, la versión gratis te alcanza; si querés scroll, navegación interna o animaciones al clic, ahí sí necesitás la Pro.
Si tu link no responde, no asumas que es un bug del plugin: revisá overlays, formato de URL y caché antes que nada. Y acordate de probar siempre en Preview con un clic real, no de oído. Un Before/After bien linkeado deja de ser decoración y empieza a mandar tráfico donde te interesa.
![[PROMOTION] Wow Elements - Addons for Elementor - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/06/wow-elements-addons-elementor-hero.jpg)
