Muestra la diferencia en tus páginas de HubSpot
Consigue el Before After Image Slider en el HubSpot Marketplace y añádelo a cualquier página en minutos.
Before After Image Slider
Muestra el cambio, no solo el resultado. Un slider de arrastrar para comparar en tus páginas de HubSpot: reformas, fotos retocadas, rediseños y resultados de clientes con un solo gesto.
Funciona en cualquier tema de HubSpot · Totalmente editable desde la pestaña Estilos · Accesible · Sin librerías
Reforma
Mira la diferencia
Arrastra el tirador para comparar la habitación antes y después de la reforma.
Pensado para cualquier tema
Instálalo una vez y úsalo en cualquier página, sea cual sea el tema de tu web. Toma por defecto las fuentes de tu tema y el color de tu marca, y puedes cambiar cada detalle.
Funciona en cualquier tema
CSS y JavaScript propios con clases prefijadas, así que nunca choca con tu tema. Las fuentes que dejes vacías usan las de tu web.
Personaliza cada detalle
Cuatro formas de tirador, tres iconos, línea divisoria, etiquetas, esquinas, borde, espaciado, disposición y forma de la imagen, todo desde la pestaña Estilos.
El color de tu marca
El tirador y la etiqueta Después toman el color principal de tu kit de marca de HubSpot. El icono y el texto de la etiqueta pasan a negro o blanco para mantener el contraste.
Horizontal o vertical
Compara izquierda y derecha o arriba y abajo. Coloca el texto encima, debajo o al lado de las imágenes, o muestra solo las imágenes.
Accesible de serie
Funciona con teclado (flechas, Re Pág, Av Pág, Inicio y Fin), es un slider real para lectores de pantalla y respeta la preferencia de movimiento reducido.
Ligero y rápido
JavaScript nativo, sin jQuery ni librerías externas. Ratón, pantalla táctil y lápiz. Añade tantos sliders como quieras a una misma página.
Un módulo, muchos estilos
Estos tres sliders son el mismo módulo con ajustes distintos en la pestaña Estilos. Arrástralos o usa las flechas del teclado.
Vertical
Arriba y abajo
Dirección vertical, tirador tipo píldora con chevrones y etiquetas abajo.
Estilo oscuro
Tirador cuadrado
Tirador oscuro con líneas de agarre, esquinas rectas y etiquetas tal como se escriben.
Minimalista
Solo línea
Sin tirador ni etiquetas, y en escritorio sigue el puntero del ratón.
¿Quién usa un slider de antes y después?
Cualquier negocio cuyo trabajo se entiende mejor viéndolo que explicándolo.
Reformas e interiorismo
Constructoras, interioristas y arquitectos que muestran un espacio antes y después de la obra.
Inmobiliarias
Agencias que comparan un piso vacío con el home staging, o un plano con la obra terminada.
Retoque fotográfico
Fotógrafos y estudios que demuestran el valor de su edición, etalonaje y restauración.
Rediseños web
Agencias que enseñan la versión antigua y la nueva de la web de un cliente en sus casos de éxito.
Salud y belleza
Clínicas, salones y dentistas que presentan resultados de tratamientos, con el consentimiento de sus clientes.
Productos y resultados
Empresas de limpieza, reparación y software que comparan un panel, una superficie o un producto antes y después.
Listo en tres pasos
- Instálalo desde el HubSpot Marketplace. El módulo se añade a tu portal y queda disponible en todos los temas.
- Añádelo a una página. En el editor de páginas, pulsa Añadir, busca Before After Image Slider y arrástralo a cualquier sección.
- Elige tus dos imágenes. Selecciona la imagen de antes y la de después, escribe el texto alternativo y, si quieres, ajusta colores, tirador y disposición en la pestaña Estilos.
Consejo: usa dos imágenes con el mismo tamaño y encuadre, por ejemplo dos fotos hechas desde el mismo punto.
Qué puedes cambiar
- Contenido: antetítulo, título, nivel de título, descripción, imágenes, texto alternativo, pie de foto y etiquetas.
- Comportamiento: horizontal o vertical, posición inicial, arrastrar o seguir el puntero, paso del teclado y nombre accesible.
- Estilos: fuentes, alineación del texto, fondo, borde, esquinas, espaciado, posición del texto, ancho máximo, forma y ajuste de la imagen.
- Tirador y etiquetas: color y grosor de la línea, forma, tamaño, color e icono del tirador, posición, colores y mayúsculas de las etiquetas.
- Animación: un pequeño movimiento de aviso al aparecer y movimiento suave al hacer clic.
Preguntas frecuentes
¿Funciona con mi tema?
Sí. El módulo trae su propio CSS y JavaScript con clases prefijadas, así que funciona en cualquier tema de HubSpot, incluidos los del marketplace y los personalizados. Usa las fuentes de tu tema salvo que elijas otras.
¿Puedo usarlo varias veces en la misma página?
Sí. Cada slider funciona por su cuenta y guarda sus propios ajustes, así que puedes añadir tantos como necesites.
¿Funciona en móvil?
Sí. En pantallas táctiles se arrastra con el dedo, la página sigue desplazándose con normalidad y el texto colocado al lado de las imágenes pasa encima en pantallas pequeñas.
¿Es accesible?
El tirador funciona como un slider para lectores de pantalla y con el teclado: flechas, Re Pág, Av Pág, Inicio y Fin. La animación de aviso no se muestra a quien prefiere movimiento reducido. Recuerda rellenar el texto alternativo de las dos imágenes.
¿Puedo adaptarlo a mi marca?
Sí. El tirador y la etiqueta Después empiezan con el color principal de tu kit de marca de HubSpot, y puedes cambiar cada color, fuente, tamaño y esquina en la pestaña Estilos.
¿Necesita alguna librería o cuenta externa?
No. Usa JavaScript nativo, sin jQuery, sin librerías externas y sin cuentas de terceros.
¿Dónde consigo ayuda?
Escríbenos a hola@digitalmakers.cat. Respondemos en español, catalán e inglés.