La section Wysiwyg comprend beaucoup de blocs déjà existants en tant que section. Ils ont été ajoutés comme tel, car la page est limitée à 25 sections. Cela posait problème pour l'animation des articles de blog et les CGV notamment. En les regroupant sous une même section, cela permet de contourner le problème et de se donner un peu plus de marge.

Le bloc Texte riche permet de presque tout mettre en forme :

• niveaux de titres (en cliquant sur Aa),
• listes à puces,
• liens,
• graisse,
• italique.

☝🏽 Bien que les titres puissent être intégrés facilement depuis le bloc Texte riche, je préconise d'utiliser le bloc Titres, au moins pour les niveaux H2, afin de mieux s'y retrouver dans la structure de page lorsque l'on se réfère à la colonne de gauche.

Pour les listes à puces ou à numéros, un retour à la ligne entre les éléments est nécessaire. Aussi, écrire un tiret ne mettra pas en forme automatiquement comme sur Word par exemple.

Les liens peuvent se faire vers :

• des collections,
• produits,
• pages,
• articles de blog,
• pages externes,
• ancres dans une même ou une autre page.

Pour ces dernières, il faut avoir renseigner un ID sur le bloc que l'on veut cibler. Elle n'est possible que sur les blocs Titres pour le moment. Une fois l'ID renseigné, il faut le copier, précédé d'un # lorsque l'on crée le lien.

Étapes :

1. Choisir le Titre (bloc contenu dans Wysiwyg)
2. Modifier l'ID (ex. ancre-1)
3. Copier cet ID
4. Choisir et surligner le texte pour lequel on veut insérer un lien ancre
5. Cliquer sur Insérer un lien et écrire dièse puis l'ancre (ex. #ancre-1)

Exemple avec le bloc Liste de liens avec ancre présent en haut de page.

Tous les boutons peuvent être modifiés en apparence par :

1. La couleur de fond et celle au survol (hover)
2. La couleur de bordure et celle au survol (hover)
3. La couleur du texte et celle au survol (hover)

Titre, texte et bouton sont optionnels dans le sens où il ne conditionne pas l'affichage du carrousel produits.

Il est possible de choisir une collection et/ou des produits directement. Si les deux sont choisis, les produits sélectionnés manuellement s'afficheront en première position, avant les produits de la collection.

À savoir que l'ordre d'affichage des produits d'une collection est celui déterminé dans la collection elle-même directement depuis Shopify ou bien Algolia. Il n'est possible de changer l'ordre que pour les produits sélectionnés manuellement.

Ce bloc existe aussi en bloc dans la section Wysiwyg et fonctionne de la même manière.

Pour chaque image : lien et texte/titre optionnels.

Pour le reste, même fonctionnement et spécificités que pour le slider produit, géré au niveau de la section.

Push pleine largeur souvent utilisé pour des bandeaux de pages, type collections jusqu'à présent.

Le texte peut être aligné à gauche, à droite ou centré.

Par défaut, en ajoutant cette section, il propose Anchor/Sur-titre, Titre, Texte riche et Bouton. Ils sont tous modulables, c'est-à-dire qu'il est possible d'ajouter autant de blocs que souhaité et dans l'ordre que l'on veut.

À noter que, plus il y a d'éléments textuels, plus la zone image prend de la hauteur.

Cette section existe aussi en bloc dans la section Wysiwyg. En termes d'animation, la section Présentation 1x1 avec grille se présente légèrement différemment.

Pour les deux, il est possible de choisir l'alignement du texte (Gauche/Centre/Droite), les couleurs de fond* (gauche et droite, peut être différent), et par défaut de préférence Désactiver les marges pour un gain de place dans la page.

*Si l'on ne souhaite aucune couleur, mettre blanc #FFFFFF ou bien laisser le champ vide pour que la couleur soit "transparente".

Exemple d'usage de la section ou du bloc Présentation 1x1 avec grille - Image + Informations 👉🏼 Future Dusk : la couleur déco de l'année.

👇🏽 Exemple d'usage de la section Présentation 1x1 avec grille - Informations + Informations : bloc Services.

Dans ce bloc, il n'y a que la possibilité d'avoir une Image d'un côté et Informations de l'autre. Pour plus d'options, choisir la section Présentation 1x1 avec grille détaillée précédemment.

La section Présentation 1x1 avec grille, il est possible de choisir l'alignement du texte (Gauche/Centre/Droite), les couleurs de fond* (gauche et droite, peut être différent), et par défaut de préférence Désactiver les marges pour un gain de place dans la page.

*Si l'on ne souhaite aucune couleur, mettre blanc #FFFFFF ou bien laisser le champ vide pour que la couleur soit "transparente".

Images :

• Pour choisir l'image qui sera à gauche ou à droite, la renseigner dans Médias > Choisir une image.
• Pour choisir une image qui se placera au-dessus de la zone texte, la renseigner dans Informations > Choisir une image.

Ce bloc, ainsi que Push 3 colonnes, permet de mettre en avant des visuels et de faire plusieurs liens (jusqu'à 3) vers des collections, des produits ou tous types de pages, sous forme de facettes, dont le style peut également être modifié, même si dans un souci de cohérence visuelle avec les autres facettes du site, on n'y touchera pas.

Pour le Push 2 colonnes, pour inverser les éléments gauche/droite tout en conservant le style / la taille des visuels, cela se fait en deux étapes :

1. glisser l'élément dessus/dessous de l'autre (colonne gauche),
2. modifier l'alignement une fois la section sélectionnée.

Autrement, on peut les passer de gauche à droite, mais il faut penser à modifier le format de l'image à nouveau.

Utiliser la section Hotspot V2 qui, à terme, doit remplacer Hotspot initialement créée.

Cette nouvelle version permet de choisir entre :

• une seule image en pleine largeur,
• ou bien deux images carrées côte à côte.

Par défaut à l'ajout de cette section, un bloc Hotspot est présent. Seul, l'image est en pleine largeur. Pour ajouter une autre image, il faut alors + Ajouter un bloc.

Pour ajouter un point sur l'image qui va permettre de faire le lien vers un produit (produit uniquement ici), il faut + Ajouter un bloc imbriqué dans le bloc Hotspot concerné.

Les points se déplacent en abscisses (axe horizontal) et ordonnées (axe vertical) :

• Haut : plus le curseur est à gauche, plus le point est positionné haut sur l'image.
• Gauche : plus le curseur est à gauche, plus le point est positionné à gauche sur l'image (ça, c'était facile).

Pour chaque, il est possible d'adapter en desktop comme en mobile.

Les points étant les mêmes pour les deux formats, il faut de préférence partir du format mobile, car la surface est plus restreinte. Ensuite, s'assurer qu'il y ait les mêmes produits à identifier sur les deux.

Dernier élément, sur desktop : il est possible de modifier la position de la popin produit. Par rapport au point, est-ce que l'on veut qu'elle s'ouvre à gauche, à droite, en haut, en bas. Est-ce qu'elle se positionne depuis le coin haut, bas, ou centrée, etc.