Personalitza les imatges i les imatges de fons a Vendes en línia Square
| Estàs a punt per configurar el teu web amb Square? Comença > |
Les imatges són fonamentals a qualsevol lloc web. Poden afegir-hi un toc personal, ajudar a vendre més articles i millorar l’experiència de la teva presència en línia en general. A l’editor de webs de Vendes en línia Square, la majoria de seccions ofereixen opcions d’imatges perquè les personalitzis, com ara:
Pujar diverses imatges amb una sección Galería de imágenes i triar entre diferents estils de disseny, com ara galeries estàtiques o presentacions de diapositives.
Connectar el teu compte d’Instagram amb una sección Feed de Instagram per sincronitzar i mostrar les imatges de les xarxes socials.
Destacar els teus millors articles i categories amb una sección de artículos destacados que permeti als clients fer comandes i comprar en un tres i no res.
Les seccions generals de mensaje i imatge et permeten afegir diversos tipus de contingut, amb altres opcions de personalització.
A la majoria de les altres seccions hi podràs afegir una imatge de fons.
Nota: també pots afegir imatges d’articles i categories a Vendes en línia Square directament des de l’editor.
T’oferim alguns consells més per gestionar les imatges de fons i les imatges que no són de fons al lloc web de Vendes en línia Square.
Diferències entre les imatges de fons i les imatges que no són de fons
Quan treballis amb imatges a l’editor de webs, veuràs que n’hi ha de dues classes principals:
Imatges que no són de fons: són part del contingut afegit que es mostra al lloc web, juntament amb els textos. Normalment, s’hi pot fer clic amb el botó dret i copiar-les o obrir-les en una altra pestanya del navegador. També les podríem anomenar imatges en primer pla.
Imatges de fons: no són part del contingut principal que apareix al web, sinó que se situen al fons (o al darrere) del text i les imatges que no són de fons. Poden considerar-se com a part del disseny o estil del lloc web i no permeten fer-hi clic amb el botó dret i copiar-les o obrir-les en una altra pestanya del navegador.
Afegeix una secció amb una opció d’imatge al lloc web
Per afegir una imatge al web, el primer pas és obrir l’editor de webs de Vendes en línia Square. Escull o crear una página a la qual vulguis afegir imatges. A continuació, selecciona +Afegeix > Secció per obrir el menú de les seccions.
La majoria de seccions que hi ha a la categoria Organitza disposen d’una imatge que no és de fons. Selecciona qualsevol secció per veure com queda a la pàgina. També pots afegir una altra secció i modificar la imatge de fons. Quan trobis la que t’agrada, selecciona Afegeix per afegir-la a la pàgina.
Afegeix una imatge a la secció
Per afegir imatges a la secció:
Imatges que no són de fons: a l’opció d’imatge del tauler d’edició, selecciona Afegeix una imatge.
Imatges de fons: al tauler d’edició, ves a Personalitza > Fons. Tria Imatge al menú desplegable i selecciona Afegeix una imatge.
Amb qualsevol d’aquestes opcions, s’obrirà la finestra emergent del gestor de recursos, on podràs seleccionar o pujar les imatges.
Nota: per accedir a les opcions de fotos prèmium, has de canviar el pla del teu web de Vendes en línia Square.
Hi ha diverses opcions per afegir una imatge des de la finestra emergent de l’administrador de recursos:
- Selecciona Les meves imatges perquè es mostrin totes les imatges generals que s’han pujat als llocs web del teu compte de Square. Si tens més d’un lloc web, fes servir el menú desplegable Web per passar d’un a l’altre.
- Selecciona Els meus logotips perquè es mostrin tots els logotips que s’han pujat als webs del teu compte de Square. Si tens més d’un web, fes servir el menú desplegable Web per passar d’un a l’altre.
- Selecciona Fotos Prèmium per tenir accés a més de 100 milions de fotos de qualitat prèmium i lliures de drets d’autor (cal canviar de pla).
- Selecciona Instagram per connectar el teu compte d’Instagram i fer servir les fotos del perfil al web.
Per pujar una imatge nova, ves a Les meves imatges o a Els meus logotips a l’administrador de recursos i selecciona l’enllaç per triar un fitxer al dispositiu. Pots pujar aquests tipus de fitxer:
- JPG
- PNG
- GIF
A continuació, volem compartir amb tu una sèrie de recomanacions pel que fa a les imatges del teu web de Vendes en línia Square.
Imatges que no són de fons:
- A l’hora d’afegir imatges que no siguin de fons a qualsevol pàgina del web, la millor opció és fer servir arxius .jpeg que no superin els 1000 píxels del costat més llarg.
- Si vols imatges d’alta qualitat, et recomanem que recorris a un web d’imatges per a fotògrafs (per exemple, Flickr.com) i que incrustis les imatges al teu web des d’allà. No oferim dissenys amb imatges més grans, sense comprimir i d’alta qualitat perquè hem d’allotjar milions d’imatges de milions d’usuaris. Per tant, fer servir fotografies de tercers pot ser la millor manera de garantir la qualitat de les imatges al teu web.
Imatges de fons:
- Pel que fa a les imatges que formen part del disseny de la pàgina (capçalera, bàner, imatges de fons, etcètera), la millor opció és fer servir una imatge de 2000 x 1000 píxels com a mínim, així es veurà bé a gairebé qualsevol pantalla.
Modifica grups de seccions
Alguns dissenys de secció et permeten copiar parts de la secció anomenada Grups perquè puguis afegir més contingut i imatges sense haver d’afegir una altra secció a la pàgina. Al tauler d’edició, ves a Grup i veuràs una llista dels grups que hi ha ara mateix a la secció.
Per inserir un nou grup d’imatge i text amb el text predeterminat, selecciona Afegeix grup. Per copiar un grup existent, selecciona ... > Duplica. Els grups nous o duplicats es mostraran a la llista del tauler d’edició. Pots reorganitzar l’ordre dels grups a la pàgina arrossegant un grup cap a una altra posició de la llista.
Modifica les imatges que no són de fons
Per modificar una imatge que no és de fons al lloc web de Vendes en línia Square:
- A l’editor de webs de Vendes en línia Square, ves a la pàgina que conté la imatge que vols modificar.
- Selecciona la secció que conté la imatge i, a continuació, selecciona la imatge en qüestió perquè apareguin les opcions d’imatge al tauler d’edició.
- Selecciona Modifica per ajustar com calgui les opcions disponibles. Si no t’agraden els canvis, selecciona Recupera l’original.
- Desa les modificacions i Publica el web per veure-hi els canvis.
Nota: depenent del disseny de la secció, veuràs més o menys opcions per editar les imatges.
Per pujar una altra imatge, selecciona Substitueix al tauler d’edició. També pots seleccionar la icona de la paperera per eliminar la imatge. Si canvies d’idea, fes servir la fletxa de Desfés per tornar un pas enrere.
Al tauler d’edició, també pots afegir un enllaç a la imatge o afegir text alternatiu per millorar el SEO i l’accessibilitat web. Aquí t’expliquem com afegir un enllaç al web i optimitzar les pàgines web per millorar el SEO.
Nota: l’accessibilitat és un aspecte important del disseny d’un lloc web, per fer-lo accessible a tantes persones com sigui possible, molt especialment aquelles que tenen alguna discapacitat. Pots consultar més informació sobre accessibilitat per als llocs web de Vendes en línia Square si vols veure més consells relacionats amb les imatges.
Amb totes les alternatives i solucions que existeixen, protegir del tot una imatge a internet pot ser pràcticament impossible. No obstant això, tens l’opció de fer servir les pàgines protegides amb contrasenya al lloc web de Vendes en línia Square per protegir-ne el contingut.
També pots desactivar l’opció de fer clic amb el botó dret al teu lloc web en alguns navegadors, per impedir que les imatges es puguin copiar fàcilment. Tingues en compte que fer això no et proporciona una protecció total, però ajuda a frenar alguns intents. Per desactivar el clic amb el botó dret al lloc web:
- A la Vista general de Vendes en línia Square, ves a Configuració > Eines de seguiment.
- Selecciona Afegeix un nou codi.
- A la finestra emergent, introdueix el codi i el nom del codi als camps corresponents (et mostrem el codi a continuació).
- Col·loca el codi al peu de pàgina seleccionant Final del cos.
- Selecciona Desa.
- Publica el web des de l’editor de webs de Vendes en línia Square per veure-hi els canvis.
Codi: <body oncontextmenu=”return false;”>
Hi ha molta gent que treballa amb imatges en línia (com ara fotògrafs) que, en comptes de fer això per protegir les imatges, fa servir programes de disseny gràfic per afegir un segell o una marca d’aigua a les versions en línia de les seves fotos. Tot i que això no n’evita el robatori, les protegeix de l’ús maliciós, ja que, en la majoria de casos, treure la marca d’aigua fa que la foto quedi inservible.
Modifica les imatges de fons
Pots millorar la llegibilitat d’una secció a Vendes en línia Square ajustant la foscor o la claredat de la imatge de fons. Les imatges clares poden fer-se més clares si el text té per defecte un color més fosc, i les imatges fosques es poden enfosquir si el text té per defecte un color més clar. Per ajustar la llegibilitat d’una secció al lloc web de Vendes en línia Square:
- A l’editor de webs de Vendes en línia Square, ves a la pàgina que conté la imatge de fons que vols ajustar.
- Selecciona la secció on hi ha la imatge i ves a Personalitza > Fons al tauler d’edició.
- Selecciona Modifica i ajusta la llegibilitat de la imatge movent el lliscador.
- Desa les modificacions i Publica el web per veure-hi els canvis.
Si vols, també pots ampliar i redreçar la imatge de fons.
Per pujar una altra imatge, selecciona … > Substitueix al tauler d’edició. També pots seleccionar la icona de la paperera per eliminar la imatge. Si canvies d’idea, fes servir la fletxa de Desfés per tornar un pas enrere.
Per canviar la imatge de fons de la secció per un color a Vendes en línia Square:
- A l’editor de webs de Vendes en línia Square, ves a la pàgina que conté la imatge de fons que vols ajustar.
- Selecciona la secció on hi ha la imatge i ves a Personalitza > Fons al tauler d’edició.
- Al menú desplegable, tria Color seleccionat, per canviar-lo pel color del web que tens seleccionat, o bé Color personalitzat, per canviar-lo per un altre color.
Aquí t’expliquem com triar colors per al lloc web de Vendes en línia Square.
Opcions d’imatge a la versió per a mòbils del lloc web
Tot i que la versió per a mòbils del lloc web no es pot modificar per separat respecte de la versió per a escriptori, tens opcions d’imatge específiques per a mòbils, pensades perquè que les imatges tinguin el millor aspecte possible sigui quina sigui la mida de la pantalla. A continuació t’indiquem algunes d’aquestes opcions:
Pots ajustar el punt focal de la imatge de fons d’una secció perquè el tema de la imatge es mantingui centrat al lloc web per a mòbils de Vendes en línia Square. Per començar:
- A l’editor de webs de Vendes en línia Square, ves a la pàgina que conté la imatge de fons que vols configurar per a mòbils.
- Selecciona la secció on hi ha la imatge i ves a Personalitza > Fons al tauler d’edició.
- Selecciona … > Estableix el tema de la imatge.
- Col·loca el punt indicador al tema o element principal de la imatge de fons. Això ajudarà a mantenir-lo sempre centrat al lloc web per a mòbils.
- Selecciona Desa quan hagis acabat. Pots assegurar-te que la modificació s’ha fet correctament al lloc web per a mòbils si canvies a la vista per a mòbils. Ajusta-la de nou a la versió per a ordinador com escaigui.
- Publica el lloc web per veure-hi els canvis.
Resoldre problemes amb l’Stand
Si has pujat diverses imatges al lloc web de Vendes en línia Square amb el mateix nom de fitxer, és possible que presentin problemes al lloc web publicat. Per exemple, podrien aparèixer de sobte en una pàgina equivocada, canviar de lloc o, fins i tot, no aparèixer. Per això, et recomanem que comprovis que cada imatge tingui un nom de fitxer propi i diferent abans de pujar-les a l’editor de webs, per evitar que torni a passar.
Si ara mateix t’estàs trobant amb aquest problema, prova de solucionar-lo amb aquests passos:
A l’editor de webs de Vendes en línia Square, elimina totes les imatges que es mostren de manera incorrecta.
A l’ordinador o a dispositiu, gestiona els fitxers d’imatge comprovant que tots tinguin noms de fitxer propis i diferents.
A l’editor de webs, torna a pujar les imatges al lloc web.
Publica el web per veure-hi els canvis.