Utiliser le point focal pour centrer des images

Contrôlez la façon dont une image est centrée en réglant manuellement le point focal.

Dernière mise à jour le 3 janvier 2025

De nombreuses zones d'image de votre site disposent d'une fonction de centrage intégrée appelée point focal. Le point focal définit le centre d'une image, ce qui vous permet de contrôler l'endroit où l'image est centrée.

Images avec points focaux

Vous pouvez régler le point focal pour la plupart des images.

Dans la version 7.1, vous pouvez ajuster le point focal pour les éléments suivants :

  • Blocs Image
  • sections Galerie
  • Images mises en avant
  • Images d'arrière-plan des sections

Dans la version 7.0, vous pouvez ajuster le point focal pour les éléments suivants :

  • Blocs Image
  • Blocs Galerie
  • Pages Galerie
  • Images mises en avant
  • La plupart des images de bannières

Remarque

Il n’est pas possible de modifier le point focal de l’image mise en avant d’un produit.Pour en savoir plus, consultez l’article Modification de l’image mise en avant d’un produit.

Les points focaux ne sont pas optimisés pour :

  • Les images d’arrière-plan dans la version 7.0 téléchargées dans Styles de site : ces images n’ont pas de points focaux. Pour ajuster le point focal et le recadrage de l’image, utilisez les ajustements de styles de site Position et Taille.
  • Les images au défilement avec effet parallaxe : ces images ont des points focaux. Cependant, en raison du fonctionnement du défilement avec effet parallaxe, les modifications peuvent ne pas avoir d’impact notable sur la position d’une image, en particulier pour les images courtes et larges.
  • Vidéos dans n'importe quelle zone de votre site.

Astuce

Vous pouvez recadrer et redimensionner des images à l'aide d'autres outils intégrés.

Définir le point focal

  1. Ouvrez le bloc, la section ou l’image.
  2. Survolez l’image pour afficher le point focal, qui ressemble à un petit cercle. Pour cet exemple, nous avons utilisé une image mise en avant de page, mais le processus est similaire pour tous les points focaux.
The_focal_point_in_the_center_of_the_image.png
  1. Cliquez sur le point focal et faites-le glisser pour définir la zone de mise au point centrale.
The_focal_point_moved_to_the_top_of_the_image.png

La zone définie par le point focal apparaît désormais comme centre de votre image. Le nouveau point focal est automatiquement enregistré dans la nouvelle position, même si vous ne cliquez pas sur Enregistrer.

Astuce

pour certaines images, le point focal peut sauter au centre de l’image lorsque vous tentez de la placer très près du centre. Ceci est normal et ne se produit que lorsque le déplacement de l’image ne fait aucune différence visuelle.

Aide supplémentaire

Taille et forme de l’image

La hauteur et la largeur de votre image, ainsi que la forme du conteneur qu’elle remplit, ont un impact important sur l’effet du point focal.

Par exemple, si vous ajoutez une image orientée paysage à un bloc Image configuré pour s'afficher sous forme de carré, toute modification horizontale apportée au point focal fera une grande différence. L'image est plus large que le conteneur, il y a donc de la place de chaque côté pour qu'elle soit recentrée.

image au format paysage dans un conteneur carré

D’un autre côté, si le conteneur de votre image et l’image d’origine ont la même forme et la même taille de base, déplacer le point focal ne fera pas une grande différence.

Astuce

pour régler la hauteur du conteneur des blocs Image, utilisez la poignée de recadrage.

image au format paysage dans un conteneur au format paysage

Images de Galerie

  • Vous pouvez ajuster le point focal dans la page Galerie principale ou dans l'éditeur de section Galerie. Pour apporter des modifications plus précises, utilisez l'éditeur d'images.
  • Dans la version 7.0, si vous avez configuré un bloc Galerie pour extraire des images d'une page Galerie, effectuez les modifications du point focal dans la page Galerie.

Affichage des images

Si votre image semble floue ou déformée :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.