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

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 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 Espaceur 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 Espaceur 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. Votre curseur se transforme en icône en forme de main. Si l’icône en forme de main n’apparaît pas, cliquez d’abord sur le bloc.
  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 montre la version 7.0, mais 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 le fonctionnement de la version 7.0, mais s'applique également à la version 7.1. Toutefois, si votre site est sur la version 7.1, nous vous recommandons d'utiliser les dispositions automatiques pour créer automatiquement des colonnes et des lignes de contenu au lieu d'organiser manuellement les blocs.

Créer des colonnes

Les colonnes peuvent occuper toute la hauteur de la zone de contenu ou s’aligner à un bloc dans une ligne existante afin de créer une colonne de même hauteur. Pour créer une colonne :

  1. Survolez un bloc que vous voulez déplacer. Votre curseur se transforme en icône en forme de main. Si l’icône en forme de main n’apparaît pas, cliquez d’abord sur le bloc.
  2. 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, cliquez sur un bloc et faites-le glisser jusqu’à ce que le repère vertical prenne la page entière. Une nouvelle colonne qui divise la page sur toute sa longueur est alors créée.

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, cliquez sur le bloc et faites-le glisser jusqu’à ce que la hauteur du repère s’aligne à celle de l’autre bloc. Cette méthode est 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 sur la bordure de la colonne et faites-la glisser 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 occuper toute la largeur de la zone de contenu ou s’aligner à un bloc dans une colonne existante afin de créer un effet d’empilement. Pour créer une ligne :

  1. Survolez le bloc que vous voulez déplacer. Votre curseur se transforme en icône en forme de main. Si l’icône en forme de main n’apparaît pas, cliquez d’abord sur le bloc.
  2. 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 colonne ou la 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 les 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 toute la publication, cliquez sur un bloc et faites-le glisser 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 à celle d’un autre bloc, déplacez un bloc au-dessus ou en dessous d’un autre bloc 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 occupe toute la page, les blocs sont empilés 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 sont souvent fusionnés lorsqu’ils sont empilés. Vous pouvez éviter cela en utilisant un bloc Espaceur 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. 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 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. Faites glisser l’icône Texte vers le bloc Espaceur jusqu’à ce que le repère se réduise à la même hauteur. Relâchez le bouton de la souris 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 Espaceur pour ne conserver 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 permettant de créer des 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. En règle générale, 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 : 45 sur 190
Déplacer des blocs pour personnaliser les dispositions