Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Résoudre les problèmes de recadrage

De nombreuses images de votre site seront recadrées horizontalement, verticalement, voire les deux. L’aspect de vos images est ainsi optimisé selon la disposition de votre site, quelle que soit la taille de la fenêtre du navigateur.

Ce guide vous aidera à comprendre le recadrage normal qui se produit dans Squarespace et à découvrir comment le réduire autant que possible.

Conseil : pour recadrer l’image d’origine, utilisez l’éditeur d’image ou un logiciel tiers.

Comprendre le recadrage

Chaque image de votre site se trouve dans un conteneur, une zone invisible qui gère l’affichage de l’image par rapport aux autres contenus de la page. Lorsqu’une image est chargée dans un conteneur, vous pouvez être confronté(e) à l’une des deux situations suivantes, en fonction des paramètres du conteneur :

  • La plupart du temps - L’image s’adapte aux dimensions du conteneur, qui varient en fonction de la largeur du navigateur. Si l’image n’a pas la même forme que le conteneur, elle est recadrée de manière à occuper tout le conteneur.
  • Parfois - La forme du conteneur s’adapte aux dimensions de l’image, de sorte que toute l’image s’affiche.

Habituellement, les images de votre site s’affichent dans les dimensions des conteneurs et subissent un certain recadrage. Vos images sont ainsi plus belles tout en s’adaptant à différentes tailles de navigateurs.

bryler-overlay.png

Blocs Image

Les blocs Images affichent les images à leur rapport de hauteur et de largeur d'origine, dans le cadre des restrictions de disposition de votre site.

Astuces :

  • Recadrez l’image à l’aide de la poignée de recadrage. Pour réinitialiser l’image à ses dimensions d’origine, double-cliquez sur la poignée de recadrage.
  • Une fois l’image recadrée, utilisez le point focal pour la centrer.
  • Réduisez la taille de l’image en ajoutant des blocs Espaceur de chaque côté.

Bannières

Si vos images de bannière ont la même valeur de proportion, il est plus facile de prévoir leur recadrage. Assurez-vous d’optimiser vos images en suivant nos conseils de mise en forme des images de bannière.

Il existe d’autres moyens de contrôler le recadrage des bannières de votre site, selon la version de Squarespace qu’utilise votre site.

Les bannières sont toujours recadrées dans une certaine mesure, en particulier sur mobile. Pour personnaliser la bannière, vous pouvez :

Pour savoir comment vos bannières apparaissent sur les appareils mobiles, consultez lʼarticle Comment mon site sʼaffichera-t-il sur les appareils mobiles ?

Bannières de page

À quelques exceptions près, les bannières de page sont toujours plus ou moins recadrées, en particulier sur les appareils mobiles. Le degré de recadrage dépend de la hauteur de la bannière et de la largeur du navigateur.

Astuces :

Bannières de site

Les images ajoutées aux images de bannières sur l'ensemble du site (ajoutées dans les styles de site) peuvent se répéter, s'afficher à la hauteur ou à la largeur de la bannière ou remplir complètement le conteneur.

Astuces :

Images ou vidéos d’arrière-plan

La méthode à suivre pour contrôler le recadrage des images ou vidéos d’arrière-plan dépend de la version de Squarespace qu’utilise votre site.

Si l’image ou la vidéo d’arrière-plan de section est rognée, modifiez la hauteur ou la largeur de la section pour agrandir le cadre de l’image ou de la vidéo.

Pour en savoir plus, consultez l’article Les sections de page dans la version 7.1.

Les images d’arrière-plan peuvent se dupliquer, s’afficher à la hauteur ou à la largeur du navigateur ou occuper tout l’écran du navigateur.

Astuces :

  • Utilisez les styles de site pour choisir l'affichage de l'image de la bannière.
  • Consultez nos conseils de dépannage pour obtenir de l’aide sur l’affichage mobile.
  • Les images de plus de 2 500 pixels pour le bord le plus long peuvent causer des problèmes sur les appareils mobiles.
  • Lorsque vous choisissez une image d’arrière-plan en pleine page, pensez à la façon dont les visiteurs peuvent accéder à votre site.

Sections de galerie et pages Galerie

Selon la version de Squarespace qu’il utilise, votre site propose des options de galerie différentes.

Chargez et gérez les images directement dans la section Galerie, puis utilisez l'onglet Galerie pour contrôler l'affichage des images.

Pour en savoir plus, consultez l’article Les sections de galerie dans la version 7.1.

La façon dont les images apparaissent dans votre page Galerie dépend de votre modèle. Consultez le guide de votre modèle pour savoir comment les images peuvent être recadrées en fonction de la conception de votre page Galerie.

Blocs Galerie

L'affichage des images dans un bloc Galerie dépend du format : diaporama, grille, carrousel ou empilé.

Astuces :

  • Pour n’importe quel format, vous pouvez redimensionner l’ensemble du bloc en ajoutant des blocs Espaceur de chaque côté.
  • Diaporama - La hauteur de la galerie est définie par l’image la plus large. Pour éviter le recadrage ou l’espace vide autour des images, utilisez des images avec des proportions similaires.
  • Grille - Dans l’onglet Design, utilisez la valeur de proportion pour recadrer toutes les images à la même forme et changez le nombre de miniatures par ligne pour modifier leur taille. Utilisez le point focal pour ajuster le centrage de chaque image.
  • Carrousel - Ajustez la hauteur à l’aide de la poignée de recadrage.
  • Empilé - Chaque image s’agrandit de manière à couvrir toute la largeur de la page ou de la colonne dans laquelle se trouve le bloc.

Portfolio et pages d'index

Les pages Portfolio et les pages d’index sont des types de pages différents selon les versions de Squarespace, mais leur fonctionnement est similaire :

Survolez une section de portfolio pour ajouter une image, puis utilisez l’onglet Galerie pour contrôler son affichage.

Pour en savoir plus, consultez l’article Pages Portfolio.

La façon dont les images apparaissent dans une page d'index dépend de votre modèle. Consultez le guide de votre modèle pour en savoir plus.

Pages Boutique

La façon dont le recadrage affecte les images des produits dépend de la version de Squarespace qu’utilise votre site.

Après avoir téléchargé des images dans les sections de votre boutique, utilisez les réglages de la section boutique pour les modifier. Lorsque vous modifiez une page, cliquez sur l'icône en forme de crayon. Vous pouvez modifier l'espacement, les colonnes, le rapport longueur/largeur et l'alignement du texte. Expérimentez différents réglages de style pour définir l'affichage des images de vos produits. Pour en savoir plus sur la personnalisation de votre page Boutique, consultez les sections Page de collection de la version 7.1.

Valeur de proportion des images de produits

Il n'est pas possible de recadrer automatiquement les images de produits dans les pages de la boutique. Nous recommandons que les images de vos produits aient des rapports longueur/largeur similaires. Par exemple, avant de télécharger des images sur votre site, assurez-vous que les images de vos produits sont toutes orientées en paysage ou en portrait.

Si les images de vos produits ont des orientations différentes, utilisez notre éditeur d’image intégré ou des outils tiers pour recadrer vos images. Vous pouvez également créer une disposition personnalisée pour vos produits à l’aide des blocs Produit.

La façon dont les images de vos produits sont recadrées sur la page de destination dépend du type de page Boutique de votre template.

Classique

  • Dans les styles de site, utilisez le réglage Recadrage automatique de l'image produit pour choisir si les images doivent être recadrées à la même forme ou si elles doivent s'afficher dans leurs formes d'origine.
  • Si vous souhaitez recadrer, utilisez le réglage Taille du produit pour définir la forme.
  • Utilisez le point focal pour ajuster le centrage de l’image.
  • Si vous ne souhaitez pas recadrer, utilisez le réglage Couleur de superposition du produit pour choisir la couleur qui s'affiche derrière l'image.
  • Pour plus d'aide, consultez l'article sur comment personnaliser les pages Boutique.

prodpagebackground.png

Avancé

  • La page Boutique avancée recadre toujours les images à la même forme. Cela permet de donner à votre page une apparence homogène.
  • Pour définir la forme de toutes les images de votre page Boutique, utilisez l’ajustement Valeur de proportion de l’image dans la section Produits : Disposition du panneau Styles du site.
  • Utilisez le point focal pour ajuster le centrage de l’image.

advancedprodcutscropping.png

Unique

Consultez les liens suivants pour en savoir plus sur les styles des miniatures pour chacune des pages Boutique uniques :

Pages de couverture

La version 7.1 ne prend pas en charge les pages de couverture.

Les pages de couverture sont toujours plus ou moins recadrées, particulièrement sur les appareils mobiles. Le degré de recadrage dépend de la hauteur de l’image, de la largeur du navigateur et de la disposition choisie.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 14 sur 152