Dans cet article, nous allons vous montrer comment déplacer des blocs pour personnaliser la disposition de votre site web. Que vous souhaitiez réorganiser votre contenu, créer des colonnes ou des lignes, nous allons vous guider pas à pas pour y parvenir. Alors, préparez-vous à donner une nouvelle vie à votre site Squarespace !
Sections
Cliquez sur les blocs et glissez-les vers de nouveaux emplacements pour réorganiser le contenu de votre site web.
Déplacer 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 :
Regarder une vidéo
Cette vidéo montre l’éditeur classique.
Déplacer un bloc
Où que vous ajoutiez des blocs dans Squarespace, vous pouvez en déplacer pour personnaliser la disposition. Pour déplacer un bloc :
Conseil :
Dispositions de l’Éditeur intuitif
L’expérience actuelle d’édition de blocs sur Squarespace s’appelle Éditeur intuitif. Il est pris en charge sur les sites qui utilisent la version 7.1 dans toutes les zones où vous ajoutez des sections de blocs, y compris les pages Disposition, les sous-pages Portfolio et votre pied de page. Les éléments de collection et toutes les sections de blocs ajoutés avant la sortie de l’Éditeur intuitif utilisent l’éditeur classique.
En raison du système de grille de l’Éditeur intuitif, le fait de déplacer un bloc peut légèrement modifier le positionnement des autres blocs situés tout autour. Cela permet de préserver l’équilibre global de la disposition des sections.
N’oubliez pas que dans l’Éditeur intuitif, vous allez définir les vues ordinateur et mobile séparément.
Centrer les blocs
Pour centrer un bloc horizontalement, cliquez sur le bloc et faites-le glisser vers le milieu de la section, puis relâchez-le lorsqu’une ligne jaune apparaît verticalement au centre de la grille. Il est possible que le bloc soit légèrement redimensionné afin de s’assurer qu’il se trouve bien au centre de la section.
Affichez des blocs en pleine page
Lorsque vous déplacez un bloc en dehors de la grille de l’Éditeur intuitif, il est redimensionné pour atteindre la limite de la largeur du contenu de la section. Cela crée un effet de pleine page. Certains blocs, tels que les blocs Image configurés pour être remplis, peuvent devoir être recadrés différemment pour créer cet effet.
Définir l’alignement et le chevauchement
Après avoir déplacé un bloc vers un nouvel emplacement dans l’Éditeur intuitif, la barre d’outils du bloc apparaît.
- Pour aligner le contenu du bloc horizontalement, verticalement ou les deux à l’intérieur des bordures du bloc, cliquez sur les icônes d’alignement de la barre d’outils du bloc. Sachez que certains blocs comme les blocs Image et les blocs Bouton définis sur Remplir n’ont pas d’options d’alignement.
- Si des blocs se chevauchent, la barre d’outils affiche les icônes Avancer et Reculer afin que vous puissiez définir le bloc qui se trouve en haut.
- Pour améliorer la visibilité du contenu des blocs sur les blocs qui se chevauchent, ajoutez des couleurs d’arrière-plan à certains blocs.
Organiser plusieurs blocs en même temps
Mettez plusieurs blocs en surbrillance en cliquant dessus et en les faisant glisser dans l’arrière-plan de la section. Ensuite, déplacez ou disposez tous les blocs en surbrillance en même temps :
- Pour déplacer plusieurs blocs en surbrillance en même temps, cliquez sur l’un des blocs et faites-le glisser. Cette opération déplace tous les blocs en surbrillance en même temps, tout en préservant leur disposition actuelle.
- Pour aligner simultanément tous les blocs en surbrillance, cliquez sur le bouton Alignement groupé qui apparaît dans la barre d’outils. Sélectionnez ensuite l’une des options d’alignement.
- Pour déplacer tous les blocs en surbrillance vers l’arrière ou vers l’avant, cliquez sur les boutons Reculer ou Avancer qui apparaissent dans la barre d’outils.
- Pour redimensionner tous les blocs mis en surbrillance, survolez l’un des carrés du contour d’un bloc jusqu’à ce qu’il devienne une flèche, puis cliquez et faites glisser les blocs pour les agrandir ou les réduire.
Pour mettre en surbrillance et déplacer tous les blocs d’une section de l’Éditeur intuitif en même temps, appuyez sur Commande + A ou Ctrl + A, puis cliquez dessus et faites-les glisser.
Dispositions de l’éditeur classique
Toutes les zones de blocs des sites qui utilisent la version 7.0 utilisent l’éditeur classique. C’est également le cas dans certaines zones des sites qui utilisent la version 7.1 :
- Billets de blog, événements et informations supplémentaires sur les produits
- Sections de bloc ajoutées avant l’Éditeur intuitif
Déplacer des blocs
Dans la plupart des zones utilisant l’éditeur classique, une grille invisible prend en charge jusqu’à 12 colonnes et un nombre illimité de lignes. Certaines zones, comme les pieds de page, peuvent avoir des restrictions différentes.
- Lorsque vous cliquez sur un bloc et que vous le faites glisser pour le déplacer dans la grille, il devient semi-transparent.
- 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.
- Si vous faites flotter un bloc dans une zone de texte, comme lors de la création d’une citation en exergue, une zone grise apparaît à l’endroit où le bloc est placé pour indiquer la façon dont le texte se placera autour.
Placer des blocs
Lorsque vous faites glisser un bloc, des instructions apparaissent pour indiquer ce qui se passera lorsque vous le relâcherez :
- Ligne verticale correspondant à la hauteur de la zone de contenu : Le bloc s’étendra sur toute la hauteur de la page, créant ainsi une nouvelle colonne
- Ligne horizontale de la largeur de la zone de contenu : Le bloc s’étendra sur toute la largeur de la page, créant ainsi une nouvelle ligne
- Ligne correspondant à la hauteur ou à la largeur d’un autre bloc : Le bloc sera ajouté à une colonne ou à une ligne existante, à la même hauteur ou largeur que ce bloc
Séparer les blocs en colonnes et en lignes
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, utilisez un bloc Ligne ou Espaceur pour diviser le texte et les empêcher de fusionner. Consultez ci-dessous la section 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 pendant que 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 fusionneront.
Dispositions sur mobile
La façon dont les blocs sont organisés sur les navigateurs mobiles dépend de l’éditeur dans lequel ils se trouvent :
- Éditeur intuitif : Les dispositions pour mobile et ordinateur sont séparées. Cliquez sur l’icône Vue mobile dans le coin supérieur droit pour afficher et modifier la disposition pour mobile de la page. Le déplacement de blocs dans la disposition pour ordinateur n’a aucune incidence sur celle pour mobile.
- Éditeur classique : Il n’est pas possible de modifier la disposition pour ordinateur et celle pour mobile séparément. La disposition mobile correspond à celle pour ordinateur et les blocs se réorganisent automatiquement pour s’adapter aux appareils avec un écran plus petit.
Créer des colonnes et des lignes
Votre site inclut un certain nombre d’options permettant de créer automatiquement des colonnes et des lignes avec des types de contenu courants. Vous pouvez y ajouter davantage de contenu au fil du temps sans trop de réorganisation manuelle. Nous vous recommandons d’utiliser ces options pour des colonnes et des lignes propres et cohérentes, notamment :
- Dispositions automatiques (version 7.1) – images, texte et boutons
- Sections Galerie (version 7.1) – images et texte
- Blocs Galerie : Images et texte
- Blocs Sommaire – images et texte extraits de pages de collection, comme des blogs
Toutefois, si vous devez créer des colonnes et des lignes avec d’autres types de contenu, ou dans des dispositions non prises en charge par les options ci-dessus, vous pouvez créer des colonnes et des lignes avec des ensembles de blocs :
- Éditeur intuitif : Mettez les blocs en place et redimensionnez-les en utilisant les instructions de la grille pour obtenir des colonnes et des lignes cohérentes, puis organisez la disposition mobile en différentes colonnes et lignes si nécessaire.
- Éditeur classique : La création de colonnes et de lignes est plus complexe.Le reste de ce guide explique comment créer manuellement des colonnes et des lignes dans l’éditeur classique.
Cette vidéo montre la version 7.0, mais s’applique également à l’éditeur classique de la version 7.1.
Créer des colonnes dans l’éditeur classique
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 :
- Survolez avec votre souris un bloc que vous souhaitez 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.
- Cliquez sur le bloc et faites-le glisser pour le déplacer sur la page.
- Lorsque vous déplacez le bloc, des repères vous indiquent la nouvelle colonne ou ligne qu’il occupera.
- 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.
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.
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 :
- Placez votre curseur entre deux blocs jusqu’à ce que deux flèches pointant vers la gauche et la droite apparaissent.
- Cliquez sur la bordure de la colonne et faites-la glisser pour l’agrandir ou la réduire.
- Cela modifie à la fois la largeur de la colonne et la taille globale des deux blocs.
- Répétez l’opération avec les espaces situés entre d’autres blocs de la ligne si besoin.
Créer des lignes dans l’éditeur classique
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 :
- Survolez avec votre souris le bloc que vous souhaitez 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.
- Cliquez sur le bloc et faites-le glisser pour le déplacer sur la page.
- Lorsque vous déplacez le bloc, des repères vous indiquent la colonne ou la ligne qu’il occupera.
- Suivez les étapes ci-dessous pour placer votre bloc dans une ligne pleine page ou une ligne parallèle.
Astuce
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.
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.
Créer des colonnes et des lignes de texte uniquement dans l’éditeur classique
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 :
- Ajoutez votre premier Bloc Texte n’importe où sur la page.
- 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.
- 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é.
- 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.
- 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.
- 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 colonnes et des lignes dans l’éditeur classique
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 :
- 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.
- 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 des problèmes au niveau des colonnes et des lignes dans l’éditeur classique
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 réactif 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, consultez l’article Empilement des blocs sur mobile dans l’éditeur classique.
