Dispositions automatiques

Présentez votre équipe ou différents projets à l’aide d’ensembles d’images, de textes et de boutons dans une disposition personnalisable.

Dernière mise à jour le 23 décembre 2024

Utilisez des dispositions automatiques pour présenter des ensembles de contenus dans des colonnes et des lignes, des carrousels ou des diaporamas. Lorsque vous ajoutez un nouveau contenu à une disposition automatique, il est automatiquement réorganisé en fonction des paramètres que vous avez choisis. Les dispositions automatiques conviennent donc parfaitement au contenu que vous mettez régulièrement à jour, tels que les images de produits en vedette, les projets récents, les membres actuels de l’équipe, les témoignages ou les anciens clients.

Ce guide présente les dispositions automatiques qui combinent du texte et des images. Pour une disposition similaire qui présente principalement des images, utilisez plutôt une section Galerie. Pour créer manuellement des dispositions similaires, utilisez une section de blocs.

Accéder à cette fonctionnalité

Ce guide concerne la version 7.1. Pour obtenir un effet similaire dans la version 7.0, créez des colonnes et des lignes avec des blocs.

Regarder une vidéo

Ajouter une section de disposition automatique

Pour ajouter une section de disposition automatique qui comprend du texte et des images :

  1. Cliquez sur Modifier sur la page, puis sur Ajouter une section.
  2. Cliquez sur Personnes, Services ou Témoignages.
  3. Recherchez des dispositions avec une icône i en haut à droite et cliquez sur celle de votre choix.

Important :

  • Pour ajouter une disposition automatique qui présente des images, suivez nos étapes pour ajouter des sections Galerie.
  • Si vous cliquez dans une section sans icône i en haut à droite, vous ajouterez une section de bloc et les autres étapes de ce guide ne s’appliqueront pas. Les sections de blocs peuvent avoir des dispositions similaires, mais elles doivent être organisées manuellement.
  • Les dispositions automatiques apparaissent dans d’autres catégories, mais Personnes, Services et Témoignages offrent le plus d’options. Même si le thème ne correspond pas à ce que vous souhaitez pour votre site, vous pourrez remplacer tout le contenu de démonstration par le vôtre.

Définir les éléments à afficher

Pour définir l'affichage de votre section et de vos éléments :

  1. Survolez la section et cliquez sur Modifier le contenu.
  2. Activez ou désactivez chaque option dans l’onglet Éléments.

Pour l'ensemble de la section, utilisez ces options :

  • Titre : affiche un titre de texte en haut de la section
  • Bouton : affiche un lien de bouton en bas de la section

Pour modifier l'affichage des éléments, utilisez ces options :

  • Afficher l'image : affiche une image avec chaque élément
  • Afficher le titre : affiche le texte du titre avec chaque élément
  • Afficher le corps : affiche le corps de texte avec chaque élément
  • Afficher le bouton : affiche un lien de bouton avec chaque élément

Important :

  • Ces options s'appliquent à tous les éléments de cette section. Il n'est pas possible d'avoir des paramètres différents pour des éléments individuels d'une section.
  • La désactivation d'une option permet de masquer l'option correspondante dans l'onglet Contenu. Par exemple, si vous désactivez le bouton Afficher le titre, le champ Titre n'apparaîtra pas dans l'éditeur d'éléments.

Ajouter ou modifier des éléments

Chaque disposition automatique comprend des éléments de démonstration. Vous pouvez remplacer le contenu de ces éléments par le vôtre, ou les supprimer et ajouter de nouveaux éléments pour commencer à zéro.

Pour ajouter ou modifier des éléments :

  1. Survolez la section et cliquez sur Modifier le contenu, puis cliquez sur Contenu.
  2. Dans la liste Éléments, cliquez sur un élément pour modifier son contenu ou cliquez sur Ajouter pour en ajouter un nouveau.
  3. Pour déplacer un élément, cliquez sur l'icône et faites-la glisser à droite du titre de l'élément.
  4. Pour supprimer un élément, cliquez sur l'icône corbeille située à droite de l'élément.

Chaque élément peut comporter une image, un titre, une description et un bouton. Si aucune de ces options n’apparaît lorsque vous cliquez sur l’élément, vérifiez qu’elle est activée dans l’onglet Éléments.

Si vous ne donnez pas de titre à un élément, celui-ci affiche un titre par défaut dans l’éditeur en fonction de son ordre dans la disposition automatique, comme « Élément 1 » ou « Élément 2 ». Les titres par défaut ne sont pas visibles par vos visiteurs. Pour donner un titre à l’article, cliquez dessus et entrez un titre dans le champ Titre.

Astuce

Vous allez ajouter manuellement tous les éléments et leurs composants sur une disposition automatique. Si vous souhaitez afficher des éléments de collection d’une collection existante sur votre site, utilisez plutôt Bloc Sommaire.

Modifier le titre et le bouton de section

Dans l’onglet Contenu, vous pouvez également modifier le titre et le bouton de la section dans son ensemble. Le titre s’affiche en haut de la section et le bouton s’affiche en bas. Pour les ajouter et les modifier : 

  1. Dans l'onglet Élément, assurez-vous que les options Titre et Bouton sont activées.
  2. Dans l'onglet Contenu, cliquez sur Titre pour ajouter du texte et modifier l'alignement.
  3. Cliquez sur Bouton pour modifier le texte du bouton, configurer un lien et modifier la taille et l'alignement du bouton.

Pour masquer un de ces éléments, désactivez-le dans l'onglet Éléments.

Modifier la conception de la disposition automatique

Pour modifier la disposition d'une section :

  1. Survolez la section et cliquez sur Modifier le contenu, puis cliquez sur Design.
  2. Cliquez sur le menu déroulant en haut pour modifier la disposition.

Vous avez le choix entre trois dispositions :

  • Liste simple : affiche les éléments et leurs composants dans une ligne de gauche à droite. Selon vos paramètres et le nombre d'éléments, la disposition peut créer d'autres lignes sous la première.
  • Diaporama de bannière : affiche un élément à la fois, avec des éléments superposant l'image, qui sert d'arrière-plan pour la section. Les visiteurs cliquent sur les commandes pour faire défiler les éléments.
  • Carrousel : affiche les éléments et leurs éléments de gauche à droite dans un carrousel tournant. Les visiteurs cliquent sur les commandes pour faire défiler d'autres éléments.

Chaque disposition possède ses propres paramètres de design pour plus de personnalisation. Par exemple, avec les dispositions en liste simple et en carrousel, vous pouvez recadrer les images en cercles. Cliquez sur Style pour accéder à d’autres paramètres, tels que la modification de la taille du texte ou l’ajout d’un arrière-plan de carte pour chaque élément. Cliquez sur Taille et espace pour accéder aux paramètres d’espacement et de marge intérieure, tels que la définition de la largeur du contenu, la modification de l’espace entre les éléments ou l’ajustement de l’emplacement des images. Les options disponibles dans les onglets Style et Taille et espace dépendent de la disposition.

Si vous changez de disposition, la section enregistre vos paramètres sur la disposition précédemment sélectionnée, ce qui vous permet d’y revenir si vous le souhaitez.

Remarque

Il n'est pas possible de passer de ces options à une disposition de galerie. Pour cela, créez une section Galerie.

Taille du texte

Une fois que vous avez choisi la disposition de votre section Liste, faites défiler la page vers le bas dans l’onglet Design, puis cliquez sur Style pour choisir une taille de police. Vous pouvez choisir parmi des tailles prédéfinies qui modifient à la fois le titre et la description, ou cliquer sur  afin de définir des tailles personnalisées pour les titres et les descriptions des articles séparément. En fonction de votre disposition et de ses paramètres actuels, d’autres options peuvent vous être proposées.

Hauteur de section

La hauteur de la section de disposition automatique est définie par l’élément comportant le plus de texte. Il est ainsi possible que la section ait une marge intérieure supplémentaire au-dessus ou en dessous des éléments comportant moins de texte dans les bannières en diaporama et les dispositions en carrousel. Dans la disposition en liste simple, la même chose peut se produire pour la hauteur des lignes.

Nous vous recommandons de conserver la même quantité de texte dans chaque élément afin de contrôler au mieux la hauteur et la marge intérieure de la section.

Séparateur de section

Pour ajouter un indicateur visuel entre le bas de la disposition automatique et la section suivante, activez un séparateur de section :

  1. Survolez la disposition automatique et cliquez sur Modifier la section.
  2. Sous Format, activez le Séparateur.
  3. Définissez les paramètres du séparateur tels que la forme, le trait, la couleur et l’épaisseur.

Pour en savoir plus sur les séparateurs de sections, consultez l’article Sections de page.

Conception de disposition automatique sur les appareils mobiles

Certaines options de design peuvent varier sur les ordinateurs et sur les appareils mobiles. Les bannières en diaporama et les dispositions en carrousel, par exemple, peuvent afficher des flèches de navigation pour permettre aux visiteurs de cliquer sur les éléments. Si vous désactivez les flèches de navigation, les visiteurs qui utilisent un ordinateur cliqueront et glisseront pour faire défiler les éléments, mais les flèches s’affichent toujours sur les appareils mobiles pour s’assurer que tous les éléments puissent être visualisés.

Modifier les couleurs de disposition automatique

Pour modifier les couleurs de disposition automatique, ouvrez Styles du site, puis cliquez sur Couleurs. Sélectionnez la palette de couleurs de la section, puis utilisez les réglages correspondant au type de section de liste correspondant : Simple, Carrousel ou Bannière.

Modifier la police de disposition automatique et les boutons

Les dispositions automatiques suivent les paramètres généraux de police et de style de bouton dans les styles du site.

Police

La disposition automatique du texte suit les paramètres de police généraux de votre site dans le panneau Polices des styles du site. Les titres des éléments suivent les titres et le corps du texte suit les paragraphes. Si vous utilisez un titre de section pour votre mise en page automatique, vous pouvez le mettre en forme indépendamment des autres paramètres de police en cliquant sur Assigner des styles, puis sur Titre sous Section de liste.

La taille du texte est définie dans les paramètres de disposition automatique.

Boutons

Personnalisez la police, la couleur et la forme des boutons dans le panneau Boutons des styles du site. Les boutons d’élément et les boutons de section suivent les paramètres de style Principal. Veuillez noter que pour garantir une apparence uniforme, ces paramètres s’appliquent à la plupart des boutons de votre site.

Pour définir la taille des boutons de disposition automatique :

  1. Survolez la section et cliquez sur Modifier le contenu
  2. Sous Design, choisissez Style.
  3. Sous Taille du texte, cliquez sur .
  4. Utilisez le curseur de l’élément pour modifier la taille.

Dispositions automatiques ou sections Galerie

Les dispositions automatiques et les sections Galerie permettent toutes les deux d’organiser automatiquement votre contenu sous forme de dispositions personnalisables, mais il faut savoir qu’elles proposent des fonctionnalités différentes. Il est impossible de passer d’une disposition automatique à une section Galerie ou inversement. Voici les principales différences :

  • Les dispositions automatiques peuvent afficher différentes combinaisons d’images, de plus grandes quantités de texte et des liens de boutons. Elles sont idéales pour présenter des membres de l’équipe, d’anciens clients ou des projets récents.
  • Les sections Galerie ne mettent en évidence que les images, ce qui les rend plus adaptées aux portfolios d’artistes ou aux sites de photographie. Même s’il est possible d’ajouter du texte aux images des sections Galerie, il s’agit uniquement de courtes légendes.

Pour en savoir plus sur les différences entre les deux sections et choisir celle qui répond le mieux à vos besoins, reportez-vous au tableau ci-dessous.

Fonctionnalité Dispositions automatiques Sections Galerie
Recadrage automatique des images
  • Disposition en liste simple
  • Disposition en carrousel
  • Non
Lecture automatique des diaporamas
  • Non
  • Disposition en diaporama : simple
  • Disposition en diaporama : complet
Boutons
  • Oui
  • Non
Affichage du texte uniquement
  • Oui
  • Non
Les URL de destination images
  • Non
  • Oui
Dispositions
  • Liste simple
  • Diaporama de bannière
  • Carrousel
  • Grille : simple, bandeaux, mosaïque
  • Diaporama : simple, complet, bobine
Lightbox
  • Non
  • Dispositions en grille
Superposition du texte sur l’image
  • Disposition en diaporama de bannière
  • Non
Titre de section
  • Oui
  • Non
Vidéos
  • Non
  • Non
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é.