Accueil>Conception et contenu du site

Personnaliser des images et des images d’arrière-plans dans Vente en ligne Square

Les images sont un élément essentiel de tout site Web. Elles permettent d’ajouter une touche personnelle, de vendre plus d’articles et d’offrir une meilleure expérience globale de votre présence en ligne. Dans l’éditeur de site Vente en ligne Square, la plupart des sections comprennent une option d’images que vous pouvez personnaliser. Par exemple :

  • Téléversez plusieurs images dans une section galerie d’images et choisissez différents styles de disposition comme les galeries fixes, les diaporamas et plus encore.

  • Connectez une section fil d’actualité Instagram à votre compte Instagram pour vous permettre de choisir des images destinées aux réseaux sociaux à synchroniser et à afficher.

  • Présentez vos principaux articles et catégories dans une section articles en vedette pour permettre aux clients de commander ou d’acheter rapidement.

  • Les sections générales de texto et d’images vous permettent d’ajouter différentes formes de contenu, pour lequel des options de personnalisation supplémentaires sont offertes.

  • La plupart des autres sections vous permettent d’ajouter une image d’arrière-plan.

Remarque : Pour gérer les images d’articles et de catégories, accédez au Catalogue d’articles Square. Pour plus de détails, consultez l’article sur comment télécharger des images dans le Catalogue d’articles Square.

Images d’arrière-plan versus images non en arrière-plan

Square-Online-Non-Background-vs-Background-Images-FR

Lorsque vous traitez des images dans l’éditeur de site, vous avez accès à ces deux principaux types d’images :

  • Non en arrière-plan : Ces images font partie du contenu ajouté qui apparaît sur votre site, accompagné de texte. Il est généralement possible d’effectuer un clic droit sur ces images et de les copier ou de les ouvrir dans un nouvel onglet du navigateur. Vous pouvez aussi les considérer comme des images de premier plan.

  • En arrière-plan : Ces images ne font pas partie du contenu principal qui apparaît sur votre site, mais se trouvent à l’arrière-plan (ou derrière) les images et les textes de contenu. Elles font partie de la conception de votre site ou de son style. Il n’est pas possible de cliquer à droite sur ces images, ni de les copier ou de les ouvrir dans un nouvel onglet du navigateur.

Ajouter une section avec une option d’image à votre site

Square-Online-Add-Section-with-Image-Option-FR

Pour ajouter une image à votre site, la première étape consiste à ouvrir votre éditeur de site Vente en ligne Square et à choisir ou à créer la page créer une page à laquelle ajouter des images. Ensuite, sélectionnez > Section pour ouvrir le menu sections.

La plupart des sections de la catégorie Organiser comportent une image qui n’est pas en arrière-plan. Sélectionnez une section pour voir à quoi elle ressemblera sur la page. Vous pouvez aussi ajouter une autre section et modifier l’image d’arrière-plan. Une fois que vous avez trouvé une image qui vous convient, cliquez sur Ajouter pour l’ajouter à votre page.

Ajouter une image à une section

Square-Online-Image-Asset-Manager-in-Editor-FR

Pour ajouter des images à votre section :

  • Non en arrière-plan : Sous l’option d’image dans le volet d’édition, sélectionnez Ajouter une image.

  • En arrière-plan : Dans le volet d’édition, sous Personnaliser > Arrière-plan , choisissez Image dans le menu déroulant et sélectionnez Ajouter une image.

La fenêtre contextuelle du gestionnaire d’images s’ouvre dès que vous sélectionnez l’une ou l’autre de ces options et vous pouvez sélectionner ou téléverser des images.

Parcourir le gestionnaire d’images

Remarque : Accédez aux options de photos de première qualité en mettant à niveau votre abonnement à Vente en ligne Square.

Différentes options s’offrent à vous pour ajouter une image à partir de la fenêtre contextuelle du gestionnaire d’images :

  • Sélectionnez Mes images pour consulter toutes les images générales téléversées sur les sites Web sélectionnés de votre compte Square. Si vous avez plus d’un site, utilisez le menu déroulant Site pour passer de l’un à l’autre.
  • Sélectionnez Mes logos pour consulter tous les logos téléversés sur les sites Web sélectionnés de votre compte Square. Si vous avez plus d’un site, utilisez le menu déroulant Site pour passer de l’un à l’autre.
  • Choisissez Photos de première qualité pour accéder à plus de 100 millions de photos de première qualité, libres de droits (mise à niveau requise).
  • Sélectionnez Instagram pour connecter votre compte Instagram et utiliser des photos de votre profil sur votre site.

Types de fichiers image pris en charge

Pour téléverser une nouvelle image, accédez soit à Mes images ou à Mes logos dans le gestionnaire d’images, puis sélectionnez le lien à cet effet pour choisir un fichier sur votre appareil. Vous pouvez téléverser les types de fichiers images suivants :

  • JPG
  • PNG
  • GIF

Caractéristiques recommandées pour les images

Pour des astuces en lien avec les images affichées sur votre site Vente en ligne Square, référez-vous aux directives générales ci-dessous.

Images qui ne sont pas en arrière-plan :

  • La meilleure approche pour les images qui ne sont pas en arrière-plan ajoutées à n’importe quelle page de votre site est d’utiliser des fichiers JPEG dont la taille ne dépasse pas 1 000 pixels sur leur côté le plus long.
  • Pour des images de haute qualité, nous recommandons d’utiliser un site d’hébergement de photos conçu pour les photographes (p. ex. Flickr.com) et d’intégrer les images à votre site par la suite. Nous ne concevons pas d’images de grande taille, non comprimées et de haute qualité, car nous devons traiter des millions d’images provenant de millions de vendeurs et de créateurs. Par conséquent, l’hébergement d’images par des tiers peut être un meilleur moyen de vous assurer que la qualité de vos images demeure intacte.

Images d’arrière-plan :

  • Pour les images faisant partie de la conception de votre site (p. ex. images d’en-tête, bannière et images d’arrière-plan), il est recommandé d’utiliser une image d’environ 2 000 pixels sur 1 000 pixels. Ainsi, elle sera suffisamment grande pour que sa reproduction en pleine largeur soit belle sur toute taille d’écran.

Modifier les groupes de sections

Certaines mises en page vous permettent de copier des parties de la section, appelées Groupes. Vous ajoutez du contenu et des images sans devoir ajouter une autre section à la page. Dans le volet d’édition, sous Groupes, il y a la liste des groupes existants dans la section.

Pour insérer un nouveau groupe d’images et de textes avec le texte par défaut, sélectionnez Ajouter un groupe. Pour copier un groupe existant, sélectionnez ••• et Dupliquer. Les nouveaux groupes ou les groupes dupliqués apparaîtront dans la liste du volet d’édition. Vous pouvez réorganiser l’ordre des groupes sur la page en faisant glisser un groupe vers un nouvel emplacement dans la liste.

Modifier les images de contenu qui ne sont pas en arrière-plan

Square-Online-Edit-Non-Background-Image-FR

Modifier les images sans arrière-plan

Pour modifier une image sans arrière-plan sur votre site Vente en ligne Square :

  1. À partir de votre éditeur de site Vente en ligne Square, accédez à la page contenant l’image que vous souhaitez modifier.
  2. Sélectionnez la section contenant l’image, puis sélectionnez l’image elle-même pour afficher les options de l’image dans le volet d’édition.
  3. Sélectionnez Modifier pour régler les options offertes si nécessaire. Si vous n’êtes pas satisfait des modifications, sélectionnez Revenir à l’original.
  4. Enregistrez vos modifications et Publiez votre site pour voir vos changements en direct.

Remarque : Selon la disposition de votre section, vous pouvez voir plus ou moins d’options de modification de l’image.

Remplacer et supprimer vos images sans arrière-plan

Pour téléverser une image différente, sélectionnez Remplacer dans le volet d’édition. Vous pouvez également sélectionner l’icône de la corbeille si vous souhaitez supprimer l’image. Si vous changez d’idée, utilisez la flèche d’annulation pour revenir en arrière d’une étape.

Ajouter des liens et du texte alternatif à vos images sans arrière-plan

Dans le volet d’édition, vous pouvez également ajouter un lien à l’image ou un texte alternatif pour améliorer le référencement et l’accessibilité au Web. Découvrez comment ajouter un lien à votre site et optimiser les pages de votre site Web pour le référencement.

Remarque : L’accessibilité du Web est un aspect important de la conception d’un site Web accessible au plus grand nombre de personnes possible, notamment celles souffrant de handicaps ou de déficiences. Apprenez-en plus sur l’accessibilité Web des sites Vente en ligne Square pour obtenir des conseils sur l’accessibilité des images.

Ajouter une protection par clic à droite aux images qui n’ont pas d’arrière-plan

Avec autant de solutions de contournement, il est pratiquement impossible de protéger totalement une image sur Internet. Vous avez la possibilité d’utiliser des pages protégées par mot de passe sur votre site Vente en ligne Square pour protéger votre contenu.

Vous pouvez également désactiver le clic droit sur votre site dans certains navigateurs afin d’empêcher les gens de copier facilement vos photos. Gardez à l’esprit que cette mesure n’offre pas une protection totale, mais qu’elle contribue à ralentir certaines tentatives. Pour désactiver le clic droit sur votre site, veuillez suivre les étapes ci-dessous :

  1. À partir de votre page Aperçu de Vente en ligne Square, accédez à Paramètres > Outils de suivi.
  2. Sélectionnez Ajouter un nouveau code.
  3. Dans la fenêtre contextuelle, entrez le nom du code et le code lui-même dans les champs correspondants (voir le code ci-dessous).
  4. Placez le code dans le pied de page en sélectionnant Fin du corps.
  5. Sélectionnez Enregistrer.
  6. Publiez votre site à partir de l’éditeur de site Vente en ligne Square pour voir les modifications en direct.

Code : <body oncontextmenu=”return false;”>

Au lieu de protéger les images ainsi, de nombreuses personnes qui ont des images en ligne (p. ex. les photographes) choisissent d’utiliser des programmes graphiques pour ajouter un filigrane ou un tampon sur la version en ligne de leurs photos. Bien que cela n’empêche pas le vol de la photo, cela la protège contre une utilisation malveillante puisque, dans la plupart des cas, le filigrane rend la photo inutilisable.

Modifier les images d’arrière-plan

Square-Online-Edit-Background-Image-FR

Modifier les images d’arrière-plan

Vous pouvez améliorer la lisibilité d’une section dans Vente en ligne Square en réglant l’obscurité ou la clarté de l’image d’arrière-plan. Les images claires peuvent devenir plus claires là où le texte aura une couleur plus foncée par défaut, et les images foncées peuvent devenir plus sombres là où le texte aura une couleur plus claire par défaut. Pour régler la lisibilité d’une section de votre site Vente en ligne Square :

  1. Dans l’éditeur de site Vente en ligne Square, accédez à la page contenant l’image d’arrière-plan que vous souhaitez régler.
  2. Sélectionnez la section contenant l’image et accédez à Personnaliser > Arrière-plan dans le volet d’édition.
  3. Sélectionnez Modifier et réglez la lisibilité de l’image en déplaçant le curseur.
  4. Enregistrez vos modifications et Publiez votre site pour voir vos changements en direct.

Vous pouvez également zoomer et redresser l’image d’arrière-plan selon l’apparence souhaitée.

Remplacer et supprimer les images d’arrière-plan

Pour téléverser une image différente, sélectionnez « … » > Remplacer dans le volet d’édition. Vous pouvez également sélectionner l’icône de la corbeille si vous souhaitez supprimer l’image. Si vous changez d’idée, utilisez la flèche d’annulation pour revenir en arrière d’une étape.

Transformer les images d’arrière-plan en fond coloré

Pour remplacer les images d’arrière-plan de votre section par un fond coloré dans Vente en ligne Square :

  1. Dans l’éditeur de site Vente en ligne Square, accédez à la page contenant l’image d’arrière-plan que vous souhaitez régler.
  2. Sélectionnez la section contenant l’image et accédez à Personnaliser > Arrière-plan dans le volet d’édition.
  3. Dans le menu déroulant, choisissez soit votre Couleur choisie pour la remplacer par la couleur de votre site ou Couleur personnalisée pour la remplacer par une autre couleur.

Obtenez plus d’information sur la façon de choisir les couleurs de votre site Vente en ligne Square.

Modifier les vidéos d’arrière-plan

Remarque : Effectuez la mise à niveau de votre abonnement Vente en ligne Square pour utiliser une vidéo comme arrière-plan.

En plus des GIF de haute qualité, vous pouvez aussi téléverser vos propres vidéos comme arrière-plan pour ajouter des animations à votre contenu. Commencez par sélectionner la section de la bannière principale de votre page Web et choisissez Vidéo comme option d’arrière-plan dans le volet d’édition. Vous pouvez ensuite remplacer ou supprimer le fichier vidéo à tout moment. Vous pouvez aussi ajuster l’heure de début, l’heure de fin ou la vitesse de lecture de la vidéo.

Remarque : La capacité maximale de stockage de fichiers vidéo est de 20 Go.

Vous pouvez aussi ajouter à votre site des vidéos avec audio et avec d’autres fonctionnalités qui ne seront pas utilisées comme arrière-plan. Elles peuvent provenir de YouTube, d’autres sites de vidéos ou de vos propres fichiers. En savoir plus sur l’intégration de vidéos sur votre site Web.

Options d’images réactives pour les sites mobiles

Même si la version mobile de votre site Web ne peut pas être modifiée séparément de la version pour ordinateur, vous disposez d’options conçues spécialement pour la version mobile de votre site Web. Elles sont destinées à préserver la qualité de vos images sur les écrans de toutes les tailles. Ces options sont les suivantes :

Régler le point focal de l’image d’arrière-plan mobile

Vous pouvez régler le point focal de l’image d’arrière-plan d’une section afin que le sujet de l’image reste centré sur votre site mobile Vente en ligne Square. Pour commencer :

  1. Dans l’éditeur de site Vente en ligne Square, accédez à la page contenant l’image d’arrière-plan que vous souhaitez configurer pour un appareil mobile.
  2. Sélectionnez la section contenant l’image et accédez à Personnaliser > Arrière-plan dans le volet d’édition.
  3. Sélectionnez « … » > Configurer le sujet de l’image.
  4. Placez le point indicateur sur l’objet principal de votre image d’arrière-plan. Vous pourrez ainsi vous assurer que l’objet de votre photo est toujours centré sur votre site mobile.
  5. Sélectionnez Enregistrer lorsque vous avez terminé. Vous pouvez vérifier le site mobile avec cette modification en passant à la vue mobile. Réglez-le à nouveau dans la vue de bureau si nécessaire.
  6. Publiez votre site pour voir vos changements en direct.

Dépannage

Si vous avez téléversé plusieurs images avec le même nom de fichier sur votre site Vente en ligne Square, des anomalies d’affichage peuvent survenir sur votre site. Par exemple, les images peuvent soudainement apparaître sur la mauvaise page ou changer de place, ou même ne pas apparaître du tout. Pour cette raison, il est important de s’assurer que chaque image a son propre nom de fichier unique avant de la téléverser dans l’éditeur de site pour éviter une situation similaire à l’avenir.

Si vous rencontrez ce genre de problème, suivez les étapes suivantes pour le solutionner :

  1. À partir de votre éditeur de site Vente en ligne Square , supprimez toutes les images qui ne s’affichent pas correctement.

  2. Sur votre ordinateur ou autre appareil, assurez-vous que vos fichiers d’images ont tous un nom unique.

  3. Dans l’éditeur de site, téléversez à nouveau les images sur votre site Web.

  4. Publiez le site pour afficher les modifications en direct.

Vous ne trouvez pas ce que vous cherchez?