Redimensionner des blocs

Modifiez les blocs Contenu de votre site en les agrandissant ou en les réduisant.

Dernière mise à jour le 17 juin 2024

Redimensionnez les blocs à tout moment pour modifier la disposition et afficher le contenu de nouvelles manières. La façon dont vous redimensionnez les blocs dépend de l’éditeur, et les différents blocs peuvent avoir un comportement de redimensionnement différent. Ce guide présente plusieurs façons de redimensionner des blocs.

Les exemples de ce guide utilisent une page Disposition, mais vous pouvez ajouter et redimensionner des blocs dans de nombreuses zones de votre site. Si vous avez besoin d’aide pour organiser des blocs dans une zone de contenu, consultez l’article Déplacer des blocs pour personnaliser les dispositions.

Regarder une vidéo  

Redimensionner les blocs dans l’Éditeur intuitif

L’Éditeur intuitif est la toute dernière expérience d’édition de Squarespace. Il est pris en charge sur les sites qui utilisent la version 7.1 là où vous pouvez ajouter des sections de blocs. Si un bouton Ajouter un bloc apparaît en haut à gauche lors de la modification, alors cette section utilise l’Éditeur intuitif.

Dans l’Éditeur intuitif, redimensionnez les blocs directement sur la page en cliquant et en les faisant glisser :

  1. Cliquez sur Modifier sur la page.
  2. Cliquez sur le bloc que vous souhaitez redimensionner. Pour redimensionner plusieurs blocs en même temps, cliquez et faites glisser le curseur sur l’arrière-plan de la section pour mettre en surbrillance tous les blocs que vous souhaitez redimensionner.
  3. Survolez l’un des carrés du contour d’un bloc jusqu’à ce que le curseur prenne la forme d’une flèche, puis cliquez et faites glisser le curseur pour augmenter ou diminuer la largeur, la hauteur ou les deux du bloc. Maintenez la touche ou Ctrl enfoncée tout en faisant glisser le curseur pour redimensionner le bloc de manière symétrique. Une grille apparaît en arrière-plan pour vous aider à redimensionner votre image.
  4. Cliquez sur l’icône Vue sur appareil mobile pour redimensionner les blocs de la disposition mobile. Le redimensionnement des blocs dans la vue pour ordinateur ne redimensionnera pas les blocs dans la disposition mobile.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

N’oubliez pas que le redimensionnement peut varier selon les types de blocs. Par exemple, vous pouvez modifier la largeur d’un bloc Formulaire, mais la seule façon de modifier sa hauteur est d’ajouter ou de supprimer des champs.

Remarque

l’ajustement de style Largeur de la page (max.) peut affecter votre capacité à redimensionner les blocs dans l’Éditeur intuitif. Si vous ne parvenez pas à redimensionner un bloc, essayez d’en augmenter la largeur.

Indicateurs de redimensionnement

Lorsque vous redimensionnez un bloc, des indicateurs jaunes apparaissent lorsque le bloc a la même hauteur, la même largeur ou les mêmes hauteur et largeur que les autres blocs de la section. Par exemple, si vous modifiez la largeur d’une image au-dessus d’un bouton, des indicateurs jaunes apparaissent sur la bordure supérieure ou inférieure des deux blocs lorsque la largeur du bloc Image correspond à celle du bloc Bouton. Lorsque vous modifiez la hauteur, des indicateurs jaunes apparaissent sur la bordure gauche ou droite lorsque les hauteurs correspondent ; lorsque les blocs ont la même largeur et la même hauteur, les indicateurs délimitent l’ensemble du bloc.

When_resizing_blocks__indicators_display_when_boxes_match_height__width__or_both.png

When_resizing_blocks__indicators_display_when_boxes_match_height__width__or_both.png

Redimensionner les blocs dans l’éditeur classique

Tous les sites qui utilisent la version 7.0 et des emplacements spécifiques des sites sur version 7.1 utilisent notre éditeur classique pour les zones de blocs de contenu. Dans l’éditeur classique, lorsque plusieurs blocs sont placés côte à côte, ils sont redimensionnés les uns par rapport aux autres. Vous pouvez ainsi redimensionner les blocs de cette manière.

En particulier, les blocs Espaceur permettent de créer un espace vide. Vous pouvez les redimensionner afin d’agrandir ou de réduire les blocs environnants. Par exemple, pour centrer un bloc dans la zone de contenu, ajoutez un bloc Espaceur sur un côté, puis donnez la même taille à chaque bloc Espaceur.

Astuce

des repères noirs apparaissent lorsque vous cliquez sur des blocs et que vous les faites glisser. Si le repère s’étend uniquement sur la hauteur du bloc que vous redimensionnez, le bloc Espaceur redimensionnera uniquement ce bloc. Si le repère s’étend sur toute la hauteur de la zone de contenu, une colonne est créée.

Pour redimensionner avec des blocs :

  1. Cliquez sur un point d’insertion.
  2. Sélectionnez Espaceur ou un autre bloc dans le menu des blocs.
  3. Cliquez sur le nouveau bloc et faites-le glisser à côté du bloc que vous voulez redimensionner.
add_spacer.gif
  1. Placez le curseur entre les deux blocs jusqu’à ce qu’il prenne la forme de l’outil de redimensionnement des colonnes, puis cliquez et faites glisser pour modifier leur taille. Les blocs environnants sont alors redimensionnés et un espace vide supplémentaire est créé dans la zone de contenu.
centering_with_spacers.gif

Astuce

pour créer des dispositions plus avancées, consultez nos guides Déplacer les blocs et Créer des colonnes et des lignes.

Poignées de recadrage dans l’éditeur classique

Dans l’éditeur classique, vous pouvez modifier la hauteur de certains blocs à l’aide d’une poignée de recadrage afin de redimensionner le contenu sans qu’il ne soit déformé. La poignée de recadrage est disponible dans les blocs suivants :

Pour utiliser la poignée de recadrage, cliquez sur le bloc, puis cliquez et faites glisser le cercle qui apparaît en bas du bloc.

Conseils pour utiliser la poignée de recadrage avec des blocs :

  • Maintenez la touche Maj enfoncée pendant que vous faites glisser la poignée de recadrage afin de redimensionner l’image par incréments de 20 pixels. Ceci peut vous aider à aligner le bas de l’image sur un autre bloc.
  • Dans les blocs Image, la poignée de recadrage s’affiche uniquement après avoir ajouté une image.
  • Double-cliquez sur la poignée pour annuler le recadrage.
  • Tirez la poignée vers le bas pour zoomer sur le bloc.
  • Cliquez sur la poignée de recadrage et faites-la glisser vers le bas pour recadrer l’image horizontalement. Dans le cas des blocs Image, un zoom est alors effectué sur l’image en rognant les côtés.
cropping_handle.gif
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é.