Ajoutez du contenu aux pages de votre site grâce à ce système d’édition entièrement personnalisable par glisser-déposer.

L’Éditeur intuitif est le principal éditeur de contenu pour les sites qui utilisent la version 7.1 de Squarespace. Dans tous les types de pages, les projets de portfolio et le pied de page de votre site, les sections de blocs utilisent l’Éditeur intuitif.

L’éditeur intuitif est disponible pour toutes les sections de blocs sur les sites utilisant la version 7.1. Il n’est actuellement pas pris en charge dans :

• Les zones de blocs qui n’utilisent pas de sections, comme les billets de blog, les descriptions d’événements et les informations supplémentaires sur les produits
• Les sections qui n’utilisent pas de blocs, comme les dispositions automatiques, les sections de collection et les sections Galerie
• Les sites de la version 7.0

Dans l’application Squarespace, il n’est actuellement pas possible d’ajouter ou de modifier des blocs dans les sections de l’Éditeur intuitif.

Regarder une vidéo

Démarrage rapide avec l’Éditeur intuitif

l’Éditeur intuitif est l’expérience d’édition pour les sections de page qui utilisent des blocs dans les sites de la version 7.1. Si votre site utilise la version 7.1, vous pouvez commencer à utiliser l’Éditeur intuitif à tout moment en ajoutant une page de disposition, une section de bloc à une page existante ou en modifiant votre pied de page. Si votre site contient des sections de blocs créés avant la sortie de l’Éditeur intuitif, vous pouvez les mettre à niveau.

Grâce à la grille flexible de l’Éditeur intuitif, placez les blocs n’importe où, même des blocs qui en chevauchent d’autres, et redimensionnez-les directement sur la page. N’oubliez pas que vous allez créer deux types de disposition : l’un pour les visiteurs qui consultent votre site depuis un ordinateur, et l’autre pour ceux qui utilisent un appareil mobile. Cliquez sur les icônes correspondant à un type d’appareil dans le coin supérieur droit pour définir les différentes dispositions.

Pour plus de détails, lisez la suite de ce guide.

Est-ce que j’utilise l’Éditeur intuitif ?

L’Éditeur intuitif est pris en charge sur les sites qui utilisent la version 7.1 dans :

• Les sections de blocs de n’importe quelle page
• Pieds de page
• Projets de portfolio

Lorsque vous vous trouvez sur la page et que vous cliquez sur Modifier, les sections de l’Éditeur intuitif proposent un bouton Ajouter un bloc en haut à gauche. Lorsque vous cliquez sur un bloc et que vous le faites glisser, une grille doit apparaître en arrière-plan.

Astuce : faites en sorte que la grille reste visible en appuyant sur G. Appuyez de nouveau sur G pour masquer la grille.

Si aucun bouton ou aucune grille n’apparaît, cela signifie que cette zone de blocs utilise l’éditeur classique.

Éditeur classique

Toutes les zones de blocs de la version 7.0 utilisent l’éditeur classique. Sur les sites utilisant la version 7.1, certaines zones de blocs utilisent toujours notre éditeur classique, notamment :

• Billets de blog
• Descriptions d'événements
• Informations produit supplémentaires
• Sections de blocs ajoutées avant la sortie de l’Éditeur intuitif

Pour en savoir plus sur les différences entre l’Éditeur intuitif et l’éditeur classique, consultez l’article Éditeur intuitif ou éditeur classique. 

Ajouter une section Éditeur intuitif

Pour ajouter une section Éditeur intuitif à une page :

1. Cliquez sur Modifier sur la page.
2. Cliquez sur Ajouter une section.
3. Cliquez sur Ajouter une section vierge pour ajouter une section Éditeur intuitif vide, ou cliquez sur une catégorie pour trouver des sections prédéfinies. Notez que si la section comporte une icône i en haut à droite, cela signifie qu’il s’agit d’une disposition automatique, et donc qu’elle n’utilise pas l’Éditeur intuitif.

Pour modifier la hauteur de la grille de section, cliquez sur l’icône en forme de flèche bleue en bas à droite et faites-la glisser. Il est à noter que la hauteur pourra être réduite ou non selon le nombre de blocs présents et leur position. Chaque section d’éditeur intuitif est limitée à 1000 lignes.

Mettre à niveau les sections de l’éditeur classique

Remarque : Il n’est pas possible de revenir à l’éditeur classique d’une section après l’avoir mise à jour et enregistré la page. Si vous n’êtes pas sûr(e) de vouloir utiliser l’Éditeur intuitif pour une section, nous vous recommandons de dupliquer la section avant de procéder à la mise à niveau.

Si vous avez ajouté des sections de blocs qui utilisent l’éditeur classique avant la sortie de l’Éditeur intuitif, vous pouvez les convertir en sections Éditeur intuitif. Pour ce faire :

1. Cliquez sur Modifier sur la page.
2. Cliquez sur Mettre à niveau en haut à gauche de n’importe quelle section de l’éditeur classique.
3. La section d’éditeur classique devient une section d’éditeur intuitif. Si la hauteur de l’éditeur classique dépasse la limite de 1000 lignes par grille, elle sera divisée en plusieurs sections d’éditeur intuitif.

En raison des différences entre l’éditeur classique et l’Éditeur intuitif, votre disposition peut être légèrement modifiée et des blocs peuvent ne pas être alignés lors du changement d’éditeur. De plus, les dispositions de l’éditeur classique n’auront pas toujours d’équivalent exact dans l’Éditeur intuitif. Toutefois, le changement d’éditeur peut être une excellente occasion de réinventer la disposition de vos blocs grâce aux nouvelles options et à la flexibilité accrue de l’Éditeur intuitif.

Si vous décidez de ne pas utiliser l’Éditeur intuitif avec cette section, cliquez sur Annuler avant d’enregistrer.

Ajouter des blocs

Pour ajouter des blocs à une section de l’Éditeur intuitif :

1. Cliquez sur Modifier sur la page.
2. Cliquez sur Ajouter un bloc en haut à gauche.
3. Sélectionnez le bloc que vous souhaitez ajouter. Pour en savoir plus sur les différents types de blocs, consultez l’article Ajouter du contenu avec les blocs.

Il n’existe pas de limite stricte au nombre de blocs que vous pouvez ajouter, mais nous vous recommandons de ne pas ajouter plus de 60 blocs par page, car trop de contenu peut ralentir le chargement de votre site. Les navigateurs mobiles en particulier peuvent rencontrer des difficultés pour télécharger des pages contenant un trop grand nombre de contenu.

Une fois vos blocs ajoutés, vous pouvez :

• Épingler des blocs
• Dupliquer des blocs déjà existants dans la section
• Copier et coller des blocs depuis et vers d’autres sections de l’Éditeur intuitif
• Déplacer et redimensionner des blocs en cliquant dessus et en les faisant glisser
• Modifier la disposition mobile pour définir son affichage sur les appareils mobiles
• Découvrez les bonnes pratiques à appliquer pour rendre les sections de l’Éditeur intuitif accessibles, notamment si vous superposez des blocs

Remarque : les blocs Espaceurs ne sont pas pris en charge dans l’Éditeur intuitif. Dans l’éditeur classique, les blocs Espaceurs ajoutent des espaces entre les blocs, mais avec l’Éditeur intuitif, vous pouvez le faire en cliquant et en faisant glisser les blocs ailleurs dans la section.

Épingler des blocs

Épinglez un ou plusieurs blocs dans les sections Éditeur intuitif pour les maintenir en place pendant que vos visiteurs font défiler le contenu de la section. C’est un excellent moyen de mettre en valeur un contenu spécifique et de donner à votre page un design unique.

Pour épingler un bloc :

1. Cliquez sur le bloc, puis sur l’icône épingle dans la barre d’outils du bloc. Tout type de bloc peut être épinglé.
2. Par défaut, les blocs épinglés sont configurés pour s’aligner avec le haut de la section. Vous pouvez également cliquer sur les icônes correspondantes pour aligner au centre ou aligner en bas.
3. Utilisez le curseur Décalage pour modifier la distance entre le bloc épinglé et la bordure du navigateur, entre 0 px et 50 px. Par exemple, un bloc épinglé aligné en haut à 0 px restera en bordure du navigateur lorsque le visiteur fait défiler la page.

Nous vous recommandons de tester différents paramètres afin d‘obtenir l’effet souhaité.

À retenir :

• Les blocs épinglés ne restent épinglés que dans leur section. Si votre section ne contient pas assez de contenu ou est très courte, le bloc épinglé risque de faire moins d’effet.
• Les blocs épinglés dans la disposition sur ordinateur ne seront pas épinglés dans la disposition mobile et vice versa.
• Les blocs épinglés ne sont pas pris en charge dans l’éditeur classique ni dans d’autres types de sections de page.
• Bien qu’il n’y ait pas de limite au nombre de blocs que vous pouvez épingler, les sections contenant beaucoup de contenu peuvent mettre plus de temps à charger. Nous vous recommandons de ne pas ajouter plus de 60 blocs, épinglés ou non, par page. Pour en savoir plus, consultez l’article Mon site se charge lentement.

Ajouter une couleur d’arrière-plan au bloc

Lorsque des blocs contenant beaucoup de texte se chevauchent avec d’autres contenus, améliorez la lisibilité du texte en ajoutant au bloc une couleur d’arrière-plan. Pour en savoir plus sur le fonctionnement des palettes et des thèmes de couleurs, consultez l’article Modifier les couleurs.

Ajuster ou remplir des blocs

Pour définir la marge intérieure entre les blocs Image et les blocs Bouton, définissez-les sur Ajuster ou Remplir. Si un bloc est défini sur Remplir, l’image ou le bouton occupe tout l’espace du bloc, de sorte que les bordures de l’image ou du bouton affleurent les blocs adjacents. Si un bloc est défini sur Remplir, un espace supplémentaire entoure l’image ou le bouton.

Pour définir des blocs Image ou des blocs Bouton sur Ajuster ou Remplir :

1. Cliquez sur un bloc Image ou un bloc Bouton, puis sur l’icône crayon, et enfin sur l’onglet Design.
2. Cliquez sur Ajuster ou Remplir Les blocs Image sont définis sur Ajuster par défaut, tandis que les blocs Bouton sont définis sur Remplir.
3. Si vous sélectionnez Ajuster, les options d’alignement apparaissent en dessous ou dans la barre d’outils du bloc.
4. Lorsque vous avez apporté les modifications, cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Éditeur intuitif et design réactif

Tous les sites Squarespace utilisent un design réactif afin de garantir que l’affichage de votre site est impeccable, quel que soit le type de navigateur et d’appareil utilisé. La grille flexible de l’éditeur intuitif, en particulier, est conçue de telle sorte que lorsque des blocs sont réorganisés, redimensionnés ou modifiés, d’autres blocs de la page peuvent être déplacés ou redimensionnés pour préserver des dispositions plus complexes.

Par exemple, si vous placez un bloc Texte sur un bloc Image, puis que vous ajoutez du texte au bloc Texte, le bloc Image peut s’agrandir pour s’adapter au texte ajouté.

Si les blocs se déplacent ou se redimensionnent d’une manière que vous ne souhaitez pas, annulez vos dernières modifications, puis essayez de déplacer les blocs avant d’effectuer à nouveau les modifications. Dans l’exemple ci-dessus, si vous souhaitez ajouter du texte sans modifier la taille du bloc Image, vous pouvez déplacer le bloc Texte hors du bloc Image, ajouter le texte, puis le superposer à nouveau avec le bloc Image.

Disposition pour mobile

Dans les sections de l’Éditeur intuitif, les dispositions pour mobile affichent le même contenu, mais vous pouvez organiser la disposition pour mobile et redimensionner ses blocs indépendamment de la disposition pour ordinateur. Pour définir la disposition pour mobile de votre section :

1. Cliquez sur Modifier sur la page, puis sur l’icône Vue mobile dans le coin supérieur droit.
2. Organisez et redimensionnez vos blocs comme vous le souhaitez.Pour déplacer automatiquement un bloc au-dessus ou en dessous d’un bloc adjacent, cliquez sur le bloc, puis sur ↑ ou ↓. C’est un excellent moyen de réorganiser rapidement les blocs de votre disposition mobile sans avoir à cliquer et à faire glisser.
3. Lorsque vous avez apporté les modifications, cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Les modifications que vous apportez à la position ou à la taille des blocs n’affecteront pas la disposition pour ordinateur, y compris l’utilisation de l’icône de flèche bleue pour augmenter ou diminuer la hauteur de la grille. Les modifications apportées au contenu du bloc ou aux styles de section sont globales, affectant à la fois les dispositions pour appareil mobile et pour ordinateur. Par exemple :

• Si vous déplacez un bloc Texte pour qu’il chevauche un bloc Image sur la disposition pour appareil mobile, la disposition pour ordinateur ne change pas.
• Si vous modifiez le texte ou la couleur du texte, ces modifications affectent les deux dispositions.

Si vous ajoutez de nouveaux blocs à votre site après avoir modifié la disposition pour appareil mobile, notre système organise ces blocs de façon à ce que la disposition sur mobile ressemble le plus possible à celle sur ordinateur. Nous vous conseillons de vérifier la disposition pour appareil mobile au fur et à mesure des modifications apportées au site.

Personnaliser les sections de l’Éditeur intuitif

Pour personnaliser les sections de l’Éditeur intuitif :

1. Cliquez sur Modifier sur la page, puis sur Modifier la section dans le coin supérieur droit de la section que vous souhaitez personnaliser.Si Modifier la section n’apparaît pas, il se peut que vous ayez sélectionné un bloc.Cliquez sur l’arrière-plan de la section pour faire apparaître Modifier la section.
2. Dans l’onglet Format, modifiez le style de l’espacement et de la marge intérieure de la section.Nous vous recommandons d’essayer différents paramètres pour avoir une idée de leur impact sur l’apparence de votre site.En savoir plus sur vos options ci-dessous.
3. Cliquez sur Arrière-plan pour modifier les paramètres d’arrière-plan.Pour en savoir plus, consultez les articles Images d’arrière-plan des sections, Ajouter des vidéos d’arrière-plan et Motifs d’arrière-plan de section.
4. Cliquez sur Couleurs pour modifier le thème de couleurs de la section.Pour en savoir plus, consultez l’article Modifier les couleurs.
5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Options de design

Modifiez les paramètres de style suivants dans l’onglet Design :

• Nombre de lignes : Définissez le nombre de lignes dans la grille de la section.Il s’agit de la seule option de personnalisation de section qui vous permet de définir différents paramètres sur la disposition pour ordinateur et mobile. Toutefois, le nombre minimum de lignes dépend également du nombre de blocs que vous avez ajoutés et de leur disposition.
• Écart : Définissez l’espace entre les unités de la grille pour contrôler l’espace entre les blocs.Vous pouvez choisir de ne laisser aucun écart, un écart prédéfini ou cliquer sur... pour définir des espaces verticaux et horizontaux personnalisés.
• Remplir l’écran : activez ce paramètre pour mieux contrôler la hauteur et l’alignement de votre contenu. Si vous ne voulez pas de marge intérieure autour du contenu de la section, ne l’activez pas. Les options suivantes ne s’affichent que si Remplir l’écran est activé :
  
  • Hauteur : ajoutez une marge intérieure à votre section, en dehors de la grille de section. Choisissez entre une hauteur petite, moyenne ou grande, ou cliquez sur ... pour définir une hauteur personnalisée.
  • Alignement : Définissez l’endroit où la hauteur supplémentaire de la marge intérieure apparaît.Alignez le contenu en haut pour ajouter une marge intérieure sous le contenu.Alignez le contenu au centre pour ajouter une marge intérieure au-dessus et en dessous du contenu.Alignez le contenu en bas pour ajouter une marge intérieure au-dessus du contenu.
• Séparateur : ajoutez un séparateur au bas de la section et personnalisez-le. Pour en savoir plus, consultez l’article Sections de page.

Éditeur intuitif ou éditeur classique

Ce tableau présente les différences entre l’Éditeur intuitif et l’éditeur classique. Bien qu’ils aient certaines capacités et fonctionnalités similaires, les configurations varient et, souvent, seul l’Éditeur intuitif propose les options les plus récentes.

Fonctionnalité	Éditeur intuitif	Éditeur classique
Disposition et composition	Grille flexible où vous pouvez placer des blocs n’importe où par cliquer-glisser, et même superposer d’autres blocs. Utilisez le sélecteur de disposition pour essayer différentes dispositions avec le contenu que vous avez ajouté.	Grille fixe par cliquer-glisser dans laquelle les blocs ne peuvent être placés qu’à côté d’autres blocs, à quelques exceptions près, comme les blocs flottants dans le texte.
Blocs disponibles	Tous les blocs sauf les blocs Espaceurs, qui ne sont pas nécessaires dans l’Éditeur intuitif. Créez de l’espace en cliquant et en faisant glisser les blocs vers de nouveaux emplacements.   Les blocs Image n’ont pas de disposition intégrée, mais vous pouvez recréer ces dispositions et bien d’autres dans l’Éditeur intuitif en utilisant des blocs Image, des blocs Texte et des arrière-plans de blocs.	Tous les blocs sauf les blocs Forme, qui sont exclusifs à l’Éditeur intuitif.
Dupliquer des blocs	Dupliquez un ou plusieurs blocs en même temps, ou copiez et collez des blocs dans d’autres sections de l’Éditeur intuitif.	Il n’est pas possible de dupliquer des blocs ou d’en copier-coller. Vous pouvez dupliquer des pages, des articles ou des sections à la place.
Déplacer des blocs	Cliquez et faites glisser les blocs pour les déplacer n’importe où dans la section de l’Éditeur intuitif. Faites se chevaucher les autres blocs et utilisez les instructions pour les centrer.	Cliquez et faites glisser des blocs pour les déplacer à côté d’autres blocs dans des grilles de 12 colonnes maximum. Les blocs ne peuvent pas chevaucher d’autres blocs et l’espacement entre les blocs est fixe.
Redimensionner des blocs	Cliquez et faites glisser les bordures et les coins de n’importe quel bloc pour les redimensionner. La quantité et le type de contenu peuvent avoir une incidence sur la façon dont un bloc peut être redimensionné.	Utilisez d’autres blocs dans la disposition pour les redimensionner. Certains blocs ont également des poignées de recadrage.
Design mobile	Concevez votre disposition mobile indépendamment de la disposition pour ordinateur.	L’emplacement des blocs sur ordinateur définit la disposition mobile grâce à un design réactif. Il n’est pas possible d’organiser la disposition mobile de manière indépendante.

Aide supplémentaire

Ce guide présente les fonctionnalités et les options de base de l’Éditeur intuitif. Consultez les guides suivants pour en savoir plus sur les autres paramètres de contenu et de personnalisation qui apparaissent dans les sections de l’Éditeur intuitif :

• Pour déplacer, dupliquer et supprimer des sections, consultez la section Sections de page
• Pour obtenir des informations sur les différents types de blocs, consultez l’article Ajouter du contenu avec les blocs.
• Pour déplacer des blocs et organiser des dispositions, consultez l’article Déplacer des blocs pour personnaliser les dispositions
• Pour redimensionner les blocs, consultez l’article Redimensionner les blocs
• Pour définir les styles globaux de votre site, consultez l’article Effectuer des changements de style
• Pour que le design de votre site soit accessible au plus grand nombre, consultez l’article Ressources concernant l’accessibilité.