Remarque : même si nos guides les plus populaires ont été traduits en espagnol, certains guides sont uniquement disponibles en anglais.
Créer des colonnes et des lignes avec des blocs

Vous pouvez organiser votre contenu en lignes et en colonnes en faisant glisser les blocs et en suivant les repères d'aide au placement.

Si vous débutez avec Squarespace, nous vous conseillons de consulter ces guides et vidéos avant de commencer la lecture de ce guide :

Astuce : gardez un œil sur les repères ; les lignes noires qui apparaissent lorsque vous cliquez sur des blocs et les déplacez. Si la ligne s'étend sur toute la hauteur de la page, cela créera une colonne. Si la ligne s'étend sur toute la largeur de la page, cela créera une rangée.

Watch a video

Glossaire

Avant de créer des colonnes et des lignes, nous vous conseillons de prendre connaissance de ces termes :

Grille de zone de contenu

La grille de zone de contenu est un plan invisible qui gère où vous pouvez placer des blocs. Dans la plupart des zones, comme les Pages Normales et les articles de blog, la grille accepte jusqu'à 12 colonnes et un nombre illimité de lignes.

Certaines zones propres à un template, telles que les barres latérales ou les pieds de page, ont des limites différentes. Pour en savoir plus sur ces zones propres à votre template, consultez nos guides de templates.

Repères

Lorsque vous déplacez un bloc, ces lignes noires vous indiquent l'endroit où vous le placez.

À mesure que vous faites glisser les blocs sur la page, les repères changent pour vous indiquer si le bloc va :

  • S'étendre sur toute la hauteur de la page, ce qui créera une colonne.
  • S'étendre sur toute la largeur de la page, ce qui créera une ligne.
  • Ajuster sa hauteur et sa largeur à celles d'un autre bloc, ce qui placera le bloc dans une ligne ou une colonne existante.

Blocs en mouvement

Lorsque vous faites glisser un bloc pour le déplacer dans la grille, il devient semi-transparent. Si vous survolez une zone de texte avec un bloc, un cadre gris apparaît à l'endroit où est placé le bloc pour indiquer la façon dont le texte se placera autour.

Bloc Ligne et Bloc Séparateur

Le Bloc Ligne et le Bloc Séparateur sont des outils utilisés pour séparer le contenu en colonnes et en lignes.

Étant donné que les Blocs Texte fusionnent souvent lorsqu'ils sont empilés, un Bloc Ligne ou Séparateur peut diviser le texte et les empêcher de fusionner. Consultez le champ ci-dessous sur les Blocs Texte pour obtenir de l'aide à ce sujet.

Les Blocs Séparateurs et Ligne peuvent aussi séparer temporairement votre contenu lorsque vous organisez une mise en page ou une zone de contenu. Utilisez un Bloc Ligne pour séparer des lignes, puis ajoutez des blocs pour créer des colonnes parallèles. Une fois le contenu mis en page, supprimez les Blocs Ligne et Séparateurs. Veuillez noter que les Blocs Texte risquent de fusionner une fois les Blocs Ligne ou Séparateurs supprimés.

Créer des colonnes

Il existe deux types de colonnes dans Squarespace :

  • Une colonne pleine page est une nouvelle colonne qui s'étend sur toute la hauteur d'une page. Elle divise la page en deux, créant plus de place pour empiler des blocs verticalement.
  • Une colonne de même hauteur s'aligne à un bloc dans une ligne existante. Elle ne s'insère pas dans les lignes au-dessus ou en dessous. Au lieu de créer une colonne qui divise la page entière, une colonne de même hauteur forme une mise en page plus complexe.

Pour créer une colonne :

  1. Survolez un bloc que vous voulez déplacer avec votre souris.
  2. Votre curseur prendra la forme d'une main, avec laquelle vous pouvez faire glisser le bloc pour le déplacer sur la page.
  3. Lorsque vous déplacez le bloc, des repères vous indiquent la nouvelle colonne ou ligne qu'il occupera.
  4. Suivez les étapes ci-dessous pour ajouter une colonne pleine page ou une colonne de même hauteur.

Créer une colonne pleine page

Pour créer une colonne qui s'étire sur toute la hauteur de la page, faites glisser un bloc jusqu'à ce que le repère vertical prenne la page entière. Cela créera une nouvelle colonne qui divisera la page sur toute sa longueur.

Créer une colonne de même hauteur

Pour faire correspondre la hauteur d'une nouvelle colonne à celle d'un autre bloc, faites glisser le bloc jusqu'à ce que la hauteur du repère s'aligne à celle de l'autre bloc. C'est une méthode utile pour placer des blocs côte à côte au-dessus ou en dessous de blocs plus grands.

Modifier la largeur d'une colonne

Pour créer des colonnes de la même largeur, vous devrez en avoir l'un des nombres suivants :

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Si vous avez un nombre de colonnes différent, elles ne seront pas de la même largeur. Cette règle s'applique à l'ensemble des zones de contenu de votre site, à l'exception des barres latérales et de certains pieds de page. 

Pour modifier la largeur d'une colonne :

  1. Placez votre curseur entre deux blocs.
  2. Cliquez et faites glisser la bordure de la colonne pour l'agrandir ou la réduire.
  3. Cela modifie à la fois la largeur de la colonne et la taille globale des deux blocs.
  4. Répétez l'opération avec les espaces situés entre d'autres blocs de la ligne si besoin.

Créer des lignes

Tout comme les colonnes, vous pouvez créer deux types de lignes. Les lignes peuvent prendre toute la largeur de la zone de contenu ou bien s'aligner à un bloc dans une colonne existante pour créer un effet d'empilement.

Pour créer une colonne :

  1. Survolez le bloc que vous voulez déplacer avec votre souris.
  2. Votre curseur prendra la forme d'une main, avec laquelle vous pouvez faire glisser le bloc pour le déplacer sur la page, en gardant le clic enfoncé.
  3. Lorsque vous déplacez le bloc, des repères vous indiquent la colonne ou ligne qu'il occupera.
  4. Aidez-vous des repères pour placer votre bloc dans une ligne pleine page ou de même longueur.
Conseil : les Blocs Image, Blocs Séparateurs, Blocs Carte et Blocs Galerie en Carrousel sont dotés d'une poignée de recadrage vous permettant d'ajuster la hauteur du bloc. Utilisez ces blocs pour personnaliser la hauteur des lignes de votre page.

Créer une ligne pleine page

Pour créer une ligne qui s'étire sur toute la page ou tout l'article, faites glisser un bloc de manière à ce que le repère horizontal prenne toute la largeur de la page.

Créer une ligne de même largeur

Pour faire correspondre la largeur d'un bloc à celle d'un autre bloc, déplacez le premier au-dessus ou en dessous du second jusqu'à ce que le repère se réduise à la même largeur que celle du bloc existant. Au lieu de créer une ligne qui prend toute la page, cette action empile les blocs individuels les uns au-dessus des autres.

Créer des lignes et des colonnes de texte uniquement

Agencer du texte en colonnes ou en lignes peut être délicat. Les Blocs Texte placés côte à côte ont tendance à fusionner. Vous pouvez éviter cela en utilisant un Bloc Séparateur qui divisera le contenu lors de la création de la page

Colonnes de texte

Placer le texte dans des colonnes est un excellent moyen de séparer visuellement le contenu ou d'associer un texte avec d'autres blocs, comme des Blocs Image.

Ajoutez votre premier Bloc Texte n'importe où sur la page.

Cliquez ensuite sur un Point d'Insertion n'importe où sur la page pour ajouter un Bloc Séparateur, puis faites glisser le bloc près du premier Bloc Texte.

Cliquez sur un Point d'Insertion n'importe où sur la page pour ajouter votre prochain Bloc Texte. Les Blocs Texte pouvant parfois être difficiles à déplacer une fois positionnés sur la page, faites glisser ce second bloc directement depuis l'option Text (Texte) du Menu des Blocs. Les repères apparaîtront, tout comme lorsque vous déplacez un bloc qui était déjà positionné.

Déplacez le second Bloc Texte près du Bloc Séparateur jusqu'à ce que la hauteur du repère s'y adapte, puis déposez le bloc. Saisissez votre texte dans le nouveau bloc. 

Vous avez maintenant deux colonnes de texte séparées par un espace. Répétez la procédure consistant à ajouter des Blocs Séparateurs et des Blocs Texte pour autant de colonnes de texte dont vous avez besoin. Une fois toutes vos colonnes de texte en place, supprimez les Blocs Séparateurs pour ne laisser que les colonnes de texte.

Lignes de texte

Les Blocs Texte empilés ont tendance à fusionner pour ne former qu'un seul bloc. Pour maintenir ces blocs séparés, nous vous recommandons de diviser votre texte à l'aide d'un Bloc Ligne ou Séparateur. Pour des espacements plus définis, optez pour un Bloc Ligne.

Pour aérer vos paragraphes, utilisez un Bloc Séparateur.

Combiner des lignes et des colonnes

Vous souhaiterez peut-être combiner des colonnes et des lignes pour personnaliser votre page. Prenons l'exemple courant de la page de présentation, ou « À propos », d'une entreprise, sur laquelle vous voulez peut-être aligner des Blocs Texte et des Blocs Image se correspondant.

Dans cet exemple, nous combinons trois Blocs Image et trois Blocs Texte. Vous retrouverez cette structure dans le contenu de démo de certains templates tels que Five.

Commencez par ajouter trois Blocs Image, chacun dans leur propre colonne, en suivant les étapes pour la création de lignes de même largeur ci-dessus.

Ensuite, ajoutez un Bloc Texte sous chaque Bloc Image. Veillez à ce que le repère corresponde au Bloc Image qui se trouve au-dessus, ce qui créera une ligne dans la colonne existante, sous chaque image.

Si vous souhaitez ajouter des titres, insérez-les en haut de chaque colonne en intégrant de nouveaux Blocs Texte alignés aux Blocs Image.

Résolution de problèmes

Astuce : lorsque vous réalisez une mise en page, vous amuser à déplacer et déposer les blocs à différents endroits de la page peut vous être utile. Si vous débutez avec Squarespace, vous entraîner à mettre des blocs en place est un excellent moyen de vous familiariser avec notre plateforme et d'obtenir la mise en page idéale.

Mes images sont de tailles différentes

Vous obtiendrez les meilleurs résultats en vous assurant que chacune des images ont le même rapport d'aspect avant de les charger. Dans la plupart des cas, nous vous recommandons d'utiliser des images d'une largeur d'au moins 1 500 pixels. Pour obtenir de l'aide sur l'ajustement de vos images, rendez-vous sur Formatage de vos images pour l'affichage sur Internet.

Mes colonnes sont inégales

Pour créer des colonnes de la même largeur, vous devrez en avoir l'un des nombres suivants :

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Pour modifier la largeur des colonnes dans ces cas précis, suivez les étapes décrites dans la section Colonnes de ce guide. Si vous avez un nombre de colonnes différent (par exemple, si vous avez cinq ou sept blocs dans une ligne), elles ne pourront pas être de la même largeur.

Mes colonnes se transforment en lignes sur un appareil mobile

C'est normal. Le design adaptatif de Squarespace empile automatiquement les blocs verticalement sur les appareils mobiles

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 49 sur 128
Créer des colonnes et des lignes avec des blocs