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

Déplacer des blocs pour personnaliser les dispositions

Déplacez des blocs autour de vos pages pour personnaliser les dispositions ou créer des colonnes et des lignes.

Ce guide fait suite à Ajouter du contenu avec des blocs que nous vous suggérons de lire en premier si vous débutez avec Squarespace.

Remarque : vous pouvez déplacer les blocs à l’intérieur de la zone de contenu de la page dans laquelle ils ont été ajoutés. Vous ne pouvez pas déplacer les blocs entre les pages ou entre différentes zones de contenu (d’un pied de page vers un en-tête, par exemple).

Regarder une vidéo

Cette vidéo concerne la version 7.0, mais elle s’applique également à la version 7.1.

Fonctionnement des dispositions des blocs

Avant de déplacer des blocs, nous vous recommandons de revoir ce document pour en savoir plus sur le fonctionnement de notre système de blocs.

Grille de zone de contenu

La grille de la zone de contenu est un plan invisible qui contrôle le positionnement des blocs. Dans la plupart des zones (comme les pages Disposition et les billets de blog), la grille accepte jusqu’à 12 colonnes et un nombre illimité de lignes. Certaines zones, comme les pieds-de-page, peuvent avoir des restrictions différentes.

Blocs en mouvement

Lorsque vous cliquez sur un bloc et que vous le faites glisser pour le déplacer dans la grille, il devient semi-transparent.

Cadres gris

Si vous faites flotter un bloc dans une zone de texte, un cadre gris apparaît à l’endroit où est placé le bloc pour indiquer la façon dont le texte se placera autour.

Repères

Lorsque vous déplacez un bloc, des lignes noires appelées repères apparaissent pour vous indiquer où vous placez le bloc. Elles sont très pratiques lorsque vous créez des colonnes et des lignes.

À 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 ligne et blocs espaceurs

Les Blocs Ligne et les Blocs Espaceurs 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 Espaceur 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.

Vous pouvez également utiliser les Blocs Espaceurs et Ligne pour séparer temporairement votre contenu lorsque vous mettez en forme une page ou une zone de contenu. Utilisez un Bloc Ligne ou Espaceur pour séparer les lignes, puis ajoutez des blocs pour créer de nouvelles colonnes parallèles. Une fois le contenu organisé, supprimez les Blocs Ligne et Espaceur, en sachant qu’une fois les Blocs Ligne ou Espaceurs supprimés, les blocs Texte risquent de fusionner. 

Déplacer un bloc

Pour déplacer un bloc :

  1. Survolez le bloc que vous voulez déplacer avec votre souris. Votre curseur prendra la forme d'une main.
  2. Cliquez sur le bloc et faites-le glisser pour le déplacer sur la page.
  3. Lorsque vous faites glisser le bloc, utilisez les repères et les zones pour choisir le nouvel emplacement.
  1. Appuyez sur le bloc à déplacer et maintenez votre doigt appuyé. Le bloc devient gris et survole le contenu.
  2. Faites glisser le bloc pour le déplacer sur la page.
  3. Lorsque vous faites glisser le bloc, utilisez les repères et les zones pour choisir le nouvel emplacement.

Images flottantes et autres blocs dans le texte

Vous pouvez faire flotter un bloc dans une zone de texte pour créer un effet d’encadrement. Cette vidéo concerne la version 7.0, mais elle s’applique également à la version 7.1.

Vous pourriez ainsi créer une Mise en Page à Colonnes Multiples dans un article de blog ou une page de texte.

Pour créer cette disposition, cliquez et faites glisser un bloc sur un bloc Texte. Un cadre gris apparaît à l’endroit où le bloc s’affichera dans le texte.

Créer des colonnes et des lignes

Cette vidéo montre la version 7.0, mais s'applique également à la version 7.1.

Créer des colonnes

Les colonnes peuvent prendre toute la hauteur de la zone de contenu ou bien s'aligner à un bloc dans une colonne existante pour créer une colonne de même hauteur. Pour créer une colonne :

  1. Survolez un bloc que vous voulez déplacer avec votre souris.
  2. Votre curseur se transforme en icône en forme de main. Cliquez sur le bloc et faites-le glisser 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.

full_height_column.gif

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.

matching_height_column.gif

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 jusqu'à ce que deux flèches pointant vers la gauche et la droite apparaissent.
  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

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. Suivez les étapes ci-dessous pour placer votre bloc dans une ligne pleine page ou une ligne parallèle.
Astuce : les blocs Image, les blocs Espaceur, les blocs Carte et lesblocs 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.

full_width_row.gif

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.

matching_width_row.gif

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 empilés ont tendance à fusionner. Vous pouvez éviter cela en utilisant des Blocs Espaceurs qui diviseront 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. Pour créer des colonnes de texte :

  1. Ajoutez votre premier Bloc Texte n'importe où sur la page.
  2. Cliquez sur un point d’insertion n’importe où sur la page pour ajouter un Bloc Espaceur. Cliquez sur le bloc et faites-le glisser à côté du premier Bloc Texte.

add_spacer_block.gif

  1. Cliquez sur un point d’insertion n’importe où sur la page pour ajouter le Bloc Texte suivant. Les Blocs Texte étant parfois difficiles à déplacer une fois positionnés sur la page, cliquez et directement sur l'icône Texte dans le menu des blocs et faites glisser vers l’emplacement souhaité. Des repères apparaîtront, de la même façon que lorsque vous déplacez un bloc déjà positionné.
  2. Déplacez l'icône Texte vers le Bloc Séparateur jusqu'à ce que la hauteur du repère s'y adapte. Ensuite déposez le bloc et saisissez votre texte. 

second_text_block.gif

  1. Répétez la procédure consistant à ajouter des Blocs Espaceurs et des Blocs Texte pour autant de colonnes de texte dont vous avez besoin.
  2. Une fois toutes vos colonnes de texte en place, supprimez les Blocs Espaceurs 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 Espaceur. Pour des espacements plus définis, optez pour un bloc Ligne. Pour aérer vos paragraphes, utilisez un bloc Espaceur.

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 d’une entreprise, sur laquelle vous voulez peut-être aligner des blocs Texte et des blocs Image qui se correspondent. Dans cet exemple, nous combinons trois blocs Image et trois blocs Texte.

Combiner des lignes et des colonnes :

  1. Ajoutez trois Blocs Image, chacun dans leur propre colonne, en suivant les étapes pour la création de colonnes de même hauteur ci-dessus.
  2. 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.

text_under_image.gif

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.

Dépannage

Mes images sont de tailles différentes

Pour des résultats optimaux, veillez à ce que toutes les images que vous utilisez ont la même valeur de proportion 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. Si vous avez besoin d’aide pour modifier vos images, consultez l’article Mettre en forme les images pour un affichage sur le web

Ma disposition en lignes et en colonnes ne s’affiche pas sur les appareils mobiles

Pour que votre site reste lisible et pour éviter aux visiteurs d’avoir à zoomer en avant et en arrière et à faire défiler les pages pour voir votre contenu, le design adaptatif de Squarespace empile automatiquement les blocs à la verticale sur les appareils mobiles. L’ordre de vos blocs dépendra de la structure de vos colonnes et lignes.

Pour en savoir plus, rendez-vous sur Apparence des pages et des blocs sur appareils mobiles.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 35 sur 144
Déplacer des blocs pour personnaliser les dispositions