Je suis ravie de vous présenter dans cette vidéo, le nouvel éditeur Fluid Engine, la grosse nouveauté Squarespace de cette année 2022 ! ⭐

Si, bien sûr, Squarespace propose régulièrement des nouveautés en termes de fonctionnalités et d’outils, en ce qui concerne l’éditeur, cela faisait plusieurs années qu’il n’y avait pas eu de modification en profondeur en tant que tel.

Si la manière de concevoir un site reste inchangée, la manière de mettre en forme vos pages web, elle, est transformée.

Au programme, nous allons voir dans un premier temps le fonctionnement de base de ce nouvel éditeur, comment ajouter des blocs, comment les déplacer, comment gérer vos sections, et nous allons reproduire différentes mises en forme à travers trois tutoriels.

[L’article qui suit est une transcription de la vidéo associée !]

comment utiliser le nouvel éditeur intuitif de Squarespace, Fluid Engine ?

La bonne nouvelle, c'est que vous n'avez pas besoin de faire quoi que ce soit de particulier pour pouvoir utiliser ce nouvel éditeur. Squarespace va vous proposer automatiquement, à chaque fois que vous allez créer une nouvelle section, d'utiliser soit l'éditeur classique, soit d'utiliser le nouvel éditeur Fluid Engine.

Comme pour l'éditeur classique, Squarespace vous propose des mises en forme préconçues pour vos pages web, pour vous permettre encore une fois de gagner du temps.

basculer votre site vers Fluid Engine

Vous pouvez tout à fait basculer vos sections existantes vers le nouvel éditeur, en cliquant sur “Mettre à niveau”.

Précision importante, si vous avez déjà un site, ou une section, sur lequel vous avez du code personnalisé, ne transformez pas vos sections depuis l'éditeur classique vers l'éditeur. Pourquoi ? Car cela viendra annuler le code personnalisé.

Cependant, vous pouvez tout à fait, sur un même site, utiliser des sections avec l'éditeur classique, et créer vos nouvelles sections avec l'éditeur Fluid Engine.

utiliser Fluid Engine sur son site web Squarespace

1. Cliquons sur “Modifier” pour ouvrir l'éditeur, puis sur “Ajouter une section”. Squarespace nous propose d’ajouter une section vide, ainsi que d’autres types de sections : contact, à propos, etc. On a plus bas l'éditeur classique, si vous avez pas envie de basculer tout de suite sur Fluide Engine.

2. La première chose que l’on remarque, c’est en haut à gauche le bouton “Ajouter un bloc” avec, comme sur l'éditeur classique, tous les blocs de texte, bouton, etc.

La deuxième chose, c’est l’autre bouton bleu nous permettant de régler la hauteur de la section.

3. On va ajouter un nouveau bloc et on va commencer par quelque chose de très simple, un bloc de texte. N’oubliez pas de basculer en paragraphe 1 pour de la mise en forme classique ! Si je souhaite changer la taille du bloc, je vais venir cliquer sur le cadre pour étirer le bloc. On remarque en arrière-plan ce système de quadrillage sur lequel on va revenir juste après ! Si je veux le déplacer, je vais pouvoir cliquer dessus et glisser, jusqu'à le positionner là où je le souhaite. On conserve ce côté très intuitif, qui fait la marque de fabrique de Squarespace.

4. Pour supprimer un bloc de contenu, on va venir cliquer sur le bloc, puis sur la petite poubelle rouge.

5. L’une des grandes nouveautés de cet éditeur, est la possibilité de dupliquer un bloc de contenu ! Pour dupliquer un bloc, on va cliquer sur le bloc, puis sur l’icône “Dupliquer”.

6. A noter que les raccourcis clavier fonctionnent : Contrôle + C pour copier, Contrôle + V pour coller. En termes de gain de temps, c’est cadeau !

modifier une section sous Fluid Engine

Lorsqu'on veut déplacer un bloc de contenu, on remarque derrière, en arrière-plan, un système de quadrillage. C’est toute la nouveauté de Fluid Engine !

Dans les paramètres de section, vous pouvez régler le nombre de lignes, ainsi que l’écart de quadrillage. Personnellement, lorsque je construis un site sous le nouvel éditeur, je préfère utiliser un écart minimum. Je trouve que c'est beaucoup plus facile, plus précis, lorsque vous faîtes de la mise en page. Cependant, ça reste une question de préférences personnelles et d'habitude. Donc à vous de voir, testez et voyez ce que vous préférez !

Vous pouvez également régler la hauteur des sections, exactement comme dans l'ancien éditeur, ainsi que l'alignement.

Ce qui ne change pas : la possibilité d'ajouter une vidéo, une image en arrière-plan, l’utilisation des thèmes et des couleurs.

créer une “split section” avec Fluid Engine

Dans ce premier tutoriel, nous allons voir comment recréer cet effet de “split section”, de section partagée.

1. Je vais venir cliquer sur “Ajouter un bloc” et y ajouter un bloc d'image. Mon conseil en termes de format : le format 4:5, ou le format 1:1. En fonction de l'esthétique, de votre identité visuelle, de l'effet que vous voulez recréer.

2. On va venir glisser et agrandir l’image, afin qu’elle soit “collée” jusqu’aux bords de la section, et qu’elle recouvre la moitié de notre quadrillage d’arrière-plan. Comment réduire l’écart en haut et en bas ? En cliquant sur “Modifier la section” puis en réduisant la hauteur de section : en cliquant sur les trois petits points, on va venir réduire au minimum et mettre zéro.

3. Pour supprimer l’écart sur la droite, vous allez venir continuer à agrandir votre photo jusqu'à ce que vous n'ayez plus d'écart. Pour corriger les micro écarts sur les bords, on va venir dans modifier la photo : je clique sur “Modifier design” et sur “Ajuster” : la photo s'est ajustée d'elle-même !

créer un effet de superposition d’image et de texte avec Fluid Engine et Squarespace

On va venir créer un effet de superposition d'image, et vous allez voir que c'est très, très simple. Par souci de rapidité pour ce tutoriel, j'ai déjà préparé tous les éléments à intégrer. Pour créer cet effet de superposition, vous allez vouloir utiliser des éléments au format PNG, avec un fond transparent. Pour créer ce genre de visuels, vous pouvez utiliser n'importe quel logiciel de création graphique, donc Photoshop inDesign, Canva, etc.

1. Dans l’éditeur Fluid Engine, je vais à nouveau cliquer sur “Ajouter un bloc” puis “Image”. Je positionne ce bloc au milieu, et je l'agrandis. Je fais de même pour les deux autres photos.

2. Pour les déplacer, cliquez sur le rebord et glissez-les simplement. Une fois positionnées au bon endroit, on va pouvoir créer cet effet de superposition. En cliquant sur l’image, à côté de “Modifier”, on a désormais l’option “Avancer” et “Reculer”, car il y a plusieurs éléments dans la section. Vous pouvez continuer à déplacer les éléments, une fois leur position définie !

Autre nouveauté du CSS Squarespace intéressante : vous avez désormais la possibilité d'ajuster la taille du texte et de la mettre à l'échelle de votre bloc de contenu !

Attention cependant, à conserver de la cohérence dans vos balises, mais aussi votre mise en page : évitez d'utiliser différentes tailles de texte pour votre contenu rédactionnel. Si vous avez une taille pour vos titres, vos paragraphes, conservez toujours la même taille. C'est sur ce genre de détail que va se jouer la cohérence et la qualité visuelle sur votre site internet.

l’optimisation mobile avec Fluid Engine

Et pour terminer, j'aimerais qu'on s'arrête sur l'optimisation mobile. La façon d'optimiser sur mobile a été vraiment simplifiée avec ce nouvel éditeur. Comme d’habitude avec Squarespace, aucun plugin à installer, tout se fait directement dans l’éditeur !

En haut à droite, on a désormais l’icône de téléphone, qui s’illumine d’une pastille bleue, pour nous indiquer que nous avons du “travail” d’optimisation à faire. En cliquant, on bascule sur la vue sur appareils mobiles.

De base, Squarespace se charge de l’optimisation mobile. Avec ce nouvel éditeur, ce sera à nous d’optimiser de façon plus précise. La fonctionnalité étant encore récente (Fluide Engine est sorti il y a quelques quelques semaines en France, quelques mois maintenant aux États-Unis), j’aime à penser que cette partie là sera améliorée au fur et à mesure.

Si auparavant, on devait se charger d’optimiser certaines choses “à la main” (comprendre, via du code), vous allez pouvoir désormais le faire directement dans l'éditeur, sans coder. Et ça, en termes de gain de temps et de simplicité, c'est cadeau !

Pour optimiser et modifier la mise en page, je viens glisser-déposer les sections, comme dans l’éditeur en vue bureau !

Précision concernant les effets de superposition en vue mobile : ils fonctionnent beaucoup moins bien. Je vous conseille de partir sur une mise en page plus classique. Vous voulez privilégier l'accessibilité à votre contenu sur votre site : on parle beaucoup d'inclusivité en 2022, mais, les grands oubliés de ce débat, ce sont toutes les personnes qui ont des handicaps de lecture et de vision. Ne cherchez pas désespérément à faire joli, en particulier sur mobile ou sur tablette. Choisissez toujours l'accessibilité, privilégiez la bonne lisibilité de votre contenu sur les plateformes mobiles.

N’oubliez pas de cliquer sur “Terminer” et “Enregistrer” pour finaliser votre travail !

le nouvel éditeur Fluid Engine, par Squarespace