Mostra la diferència a les teves pàgines d'HubSpot
Aconsegueix el Before After Image Slider a l'HubSpot Marketplace i afegeix-lo a qualsevol pàgina en minuts.
Before After Image Slider
Mostra el canvi, no només el resultat. Un slider d'arrossegar per comparar a les teves pàgines d'HubSpot: reformes, fotos retocades, redissenys i resultats de clients amb un sol gest.
Funciona en qualsevol tema d'HubSpot · Totalment editable des de la pestanya Estils · Accessible · Sense llibreries
Reforma
Mira la diferència
Arrossega el tirador per comparar l'habitació abans i després de la reforma.
Pensat per a qualsevol tema
Instal·la'l un cop i fes-lo servir a qualsevol pàgina, sigui quin sigui el tema del teu web. Per defecte agafa les fonts del teu tema i el color de la teva marca, i en pots canviar cada detall.
Funciona en qualsevol tema
CSS i JavaScript propis amb classes prefixades, de manera que mai xoca amb el teu tema. Les fonts que deixis buides fan servir les del teu web.
Personalitza cada detall
Quatre formes de tirador, tres icones, línia divisòria, etiquetes, cantonades, vora, espaiat, disposició i forma de la imatge, tot des de la pestanya Estils.
El color de la teva marca
El tirador i l'etiqueta Després agafen el color principal del teu kit de marca d'HubSpot. La icona i el text de l'etiqueta passen a negre o blanc per mantenir el contrast.
Horitzontal o vertical
Compara esquerra i dreta o a dalt i a baix. Posa el text a sobre, a sota o al costat de les imatges, o mostra només les imatges.
Accessible de sèrie
Funciona amb teclat (fletxes, Re Pàg, Av Pàg, Inici i Fi), és un slider real per a lectors de pantalla i respecta la preferència de moviment reduït.
Lleuger i ràpid
JavaScript natiu, sense jQuery ni llibreries externes. Ratolí, pantalla tàctil i llapis. Afegeix tants sliders com vulguis a una mateixa pàgina.
Un mòdul, molts estils
Aquests tres sliders són el mateix mòdul amb ajustos diferents a la pestanya Estils. Arrossega'ls o fes servir les fletxes del teclat.
Vertical
A dalt i a baix
Direcció vertical, tirador tipus píndola amb galons i etiquetes a baix.
Estil fosc
Tirador quadrat
Tirador fosc amb línies d'agafada, cantonades rectes i etiquetes tal com s'escriuen.
Minimalista
Només línia
Sense tirador ni etiquetes, i a l'escriptori segueix el punter del ratolí.
Qui fa servir un slider d'abans i després?
Qualsevol negoci la feina del qual s'entén millor veient-la que explicant-la.
Reformes i interiorisme
Constructores, interioristes i arquitectes que mostren un espai abans i després de l'obra.
Immobiliàries
Agències que comparen un pis buit amb el home staging, o un plànol amb l'obra acabada.
Retoc fotogràfic
Fotògrafs i estudis que demostren el valor de la seva edició, etalonatge i restauració.
Redissenys web
Agències que ensenyen la versió antiga i la nova del web d'un client als seus casos d'èxit.
Salut i bellesa
Clíniques, salons i dentistes que presenten resultats de tractaments, amb el consentiment dels seus clients.
Productes i resultats
Empreses de neteja, reparació i programari que comparen un tauler, una superfície o un producte abans i després.
A punt en tres passos
- Instal·la'l des de l'HubSpot Marketplace. El mòdul s'afegeix al teu portal i queda disponible en tots els temes.
- Afegeix-lo a una pàgina. A l'editor de pàgines, prem Afegeix, cerca Before After Image Slider i arrossega'l a qualsevol secció.
- Tria les teves dues imatges. Selecciona la imatge d'abans i la de després, escriu el text alternatiu i, si vols, ajusta colors, tirador i disposició a la pestanya Estils.
Consell: fes servir dues imatges amb la mateixa mida i enquadrament, per exemple dues fotos fetes des del mateix punt.
Què pots canviar
- Contingut: avanttítol, títol, nivell de títol, descripció, imatges, text alternatiu, peu de foto i etiquetes.
- Comportament: horitzontal o vertical, posició inicial, arrossegar o seguir el punter, pas del teclat i nom accessible.
- Estils: fonts, alineació del text, fons, vora, cantonades, espaiat, posició del text, amplada màxima, forma i ajust de la imatge.
- Tirador i etiquetes: color i gruix de la línia, forma, mida, color i icona del tirador, posició, colors i majúscules de les etiquetes.
- Animació: un petit moviment d'avís en aparèixer i moviment suau en fer clic.
Preguntes freqüents
Funciona amb el meu tema?
Sí. El mòdul porta el seu propi CSS i JavaScript amb classes prefixades, de manera que funciona en qualsevol tema d'HubSpot, inclosos els del marketplace i els personalitzats. Fa servir les fonts del teu tema tret que en triïs unes altres.
El puc fer servir diverses vegades a la mateixa pàgina?
Sí. Cada slider funciona pel seu compte i desa els seus propis ajustos, així que en pots afegir tants com necessitis.
Funciona al mòbil?
Sí. A les pantalles tàctils s'arrossega amb el dit, la pàgina continua desplaçant-se amb normalitat i el text col·locat al costat de les imatges passa a sobre en pantalles petites.
És accessible?
El tirador funciona com un slider per a lectors de pantalla i amb el teclat: fletxes, Re Pàg, Av Pàg, Inici i Fi. L'animació d'avís no es mostra a qui prefereix moviment reduït. Recorda omplir el text alternatiu de les dues imatges.
El puc adaptar a la meva marca?
Sí. El tirador i l'etiqueta Després comencen amb el color principal del teu kit de marca d'HubSpot, i pots canviar cada color, font, mida i cantonada a la pestanya Estils.
Necessita alguna llibreria o compte extern?
No. Fa servir JavaScript natiu, sense jQuery, sense llibreries externes i sense comptes de tercers.
On puc trobar ajuda?
Escriu-nos a hola@digitalmakers.cat. Responem en català, castellà i anglès.