Documentation mise en page
Ce document présente le système de mise en page et ses options, pour les contenus de types Pages et Articles.
Concept général
Le contenu est organisé par blocs (texte, image, galerie, etc.). Chaque bloc est définit par un "marqueur". Dans l'éditeur de texte de l'article ou de la page, on signale le début d'un bloc avec son marqueur. Ci-dessous la liste des marqueurs disponibles:
#INTRO
#TEXT
#IMAGE
#TITLE
#SUBTITLE
#GALLERY
#VERB
#COL
#EMB
Pour que le système fonctionne, il faut impérativement que chaque bloc soit fermé par une marqueur de fermeture: #CLOSE. Ci-dessous un exemple pour le bloc "Intro":
#INTRO
Contenu du bloc d'intro
#CLOSE
Le premier marqueur #INTRO ouvre le bloc, le marqueur #CLOSE ferme le bloc. La logique est la même pour tous les blocs.
Construction d'un bloc
Pour la construction d'un bloc, il est important de respecter quelques règles pour éviter des bugs d'affichage. Dans l'éditeur de texte de Shopify, il faut ajouter un marqueur par paragraphe, le contenu des blocs doit être dans des paragraphes après celui du marqueur d'ouverture et avant le marqueur de fermeture. Il ne doit pas avoir de paragraphe "vide", ni entre les marqueurs, ni entre les éléments à l'intérieur des marqueurs. Exemple ci-dessous:
#TEXT [paragraphe]
Contenu texte entre les marqueurs [paragraphe]
#CLOSE [paragraphe]
#IMAGE [paragraphe]
<image> [paragraphe]
Commentaire photo [paragraphe]
#CLOSE [paragraphe]
Attention, les blocs ne peuvent pas être imbriqués, l'imbrication de marqueurs casse le système de rendu.
Détails types de blocs
Bloc #TEXT
Le bloc texte est destiné à contenir du contenu texte régulier. Il est possible d'ajouter de la graisse, l'italic, ou faire un lien vers une adresse. Pour les liens, il est préférable de les utiliser pour site web tiers et d'ouvrir la fenêtre dans un nouvel onglet pour ne pas perdre le visiteur. Pour les liens avec les produits, voir la section de la documentation plus loin dans cette page. Ce bloc de contenu est un bloc de type #TEXT.
#TEXT
Contenu du bloc
#CLOSE
Bloc #TITLE et #SUBTITLE
Les bloc titre et sous-titre, fonctionne de manière similaire. La différence étant que le bloc #TITLE insère une ligne de séparation. Le contenu des titre doit être dans un paragraphe entre les marqueurs. Cependant, pour le SEO, il est possible de remplacer ce formatage paragraphe par un Heading2, 3, etc. selon les besoins de hiérarchisation du contenu. Note: le heading H1 est déjà attribuer au titre de la page généré par le theme, celui-ci doit être unique, préféré un H2 ou H3 selon l'importance du titre. Rester logique, un H3 ne devrait pas précéder un H2 dans la logique du texte. Exemples:
#TITLE
Contenu du bloc
#CLOSE
#SUBTITLE
Contenu du bloc
#CLOSE
Titre du bloc titre formaté en h2 dans l'admin
Titre du bloc sous-titre formaté en h3 dans l'admin
Texte ou élément à la suite d'un titre ou sous-titre. On peut noter que l'espace entre ces éléments est moindre que pour les autres blocs, pour créer une liaison.
Bloc #INTRO
Le bloc d'introduction est conçu pour être utilisé en début d'article en temps que premier bloc. Le premier bloc de cette page est un bloc #INTRO.
#INTRO
Contenu du bloc
#CLOSE
Bloc #IMAGE
Le bloc image permet d'insérer des images et de les accompagner d'un commentaire. L'image doit impérativement être dans le 1er paragraphe à l'intérieur des marqueurs. Le commentaire dans le second. Il est important qu'image et commentaire soit dans des paragraphes différents. Exemple ci-dessous:
#IMAGE
<image>
Commentaire
#CLOSE
Le Chat Doc en vacances au Groenland
Le marqueur image possède un option qui permet d'aligner la photo à gauche ou à droite. Il faut ajouter -LEFT ou -RIGHT -› #IMAGE-LEFT, #IMAGE-RIGHT, exemples ci-dessous:
#IMAGE-LEFT
<image>
Commentaire
#CLOSE
#IMAGE-RIGHT
<image>
Commentaire
#CLOSE
Aligné à gauche
Aligné à droite
Bloc #GALLERY
Le bloc Galerie permet de contenir un nombre indéfini d'images. Il est préférable de rester dans une tranche résonnable, minimum 3 à 4 photo, maximum 8 à 10. Comme pour le bloc #IMAGE, chaque photo doit être dans un paragraphe. Exemples ci-dessous:
#GALLERY
<image>
<image>
<image>
#CLOSE
Galerie avec peu d'images
Galerie avec beaucoup d'images
Block #COL
Le bloc colonne permet d'organiser 2 éléments en colonnes (photo+texte). À noter que sur mobile, les éléments seront l'un en dessous de l'autre. Chaque élément doit être dans un paragraphe. Le marqueur colonne a une option qui permet d'inverser l'ordre d'affichage: #COL-INV. Le premier élément, initialement à gauche, passera à droite. Cela est utile pour les combinaisons photo+texte, sur mobile, la photo sera toujours le premier élément affiché. Exemples ci-dessous:
#COL
Contenu colonne 1
Contenu colonne 2
#CLOSE
#COL-INV
Contenu colonne 1
Contenu colonne 2
#CLOSE
Colonne #COL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed lorem mattis, condimentum augue ut, tincidunt elit. Mauris eu tortor mauris. Ut ut mi et mauris iaculis pulvinar.
Colonne #COL-INV
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed lorem mattis, condimentum augue ut, tincidunt elit. Mauris eu tortor mauris. Ut ut mi et mauris iaculis pulvinar.
Bloc #VERB
Le bloc verbatim permet de mettre en avant un extrait de contenu, une citation ou une information important. Il n'est pas conçu pour contenir de liens ou tout type de formatage (gras, italic, etc.). Exemple ci-dessous:
#VERB
Contenu du bloc
#CLOSE
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Bloc #CARD
Le bloc card permet de créer un cadre autour d'un texte, il est utile pour une explication précise ou une portion de texte qui nécessite d'apparaître différente du reste du texte. Veiller à ne pas abuser de ce bloc: son intérêt, comme pour le verbatim, reste d'être moins fréquent pour ressortir et contraster avec l'ensemble du texte. Exemple ci-dessous:
#CARD
Contenu du bloc
#CLOSE
Integer odio nisl, posuere id interdum nec, ullamcorper id neque. Fusce vel velit non nibh rhoncus pharetra nec ut elit. Suspendisse eu urna a lacus condimentum accumsan.
Bloc #EMB
Le bloc embedded permet d'inclure des médias externes, ex.: Youtube, Vimeo, etc. Sa condition d'utilisation est que le code source récupéré pour le partage commence par <iframe> et finit par </iframe>. La plupart des plateformes qui propose une intégration, fournissent ce code, souvent via l'option "intégrer". Exemple ci-dessous:
#EMB
Code à copier-coller
#CLOSE
Bloc #DRAWER
Le bloc tiroir permet de créer des listes avec titres et contenus que l'on peut afficher ou masquer. Contrairement aux autres blocs, il faut ici utiliser 2 marqueurs, avec les options -HEADER pour le titre et -CONTENT pour le contenu. Par exemple:
#DRAWER-HEADER
Titre du bloc
#CLOSE
#DRAWER-CONTENT
Contenu du bloc, initialement, cette partie est masquée.
#CLOSE
Exemple titre 1, cliquer ici
Contenu du bloc, initialement, cette partie est masquée.
Exemple titre 2, cliquer ici
Contenu du bloc, initialement, cette partie est masquée.
Le bloc #DRAWER marche par paire, une erreur se produit si #DRAWER-HEADER n'est pas suivi d'un #DRAWER-CONTENT.
Résolution de problèmes & recommendations
Problèmes connus
Dans certains cas il est possible que l'affichage soit brisé. Cela est souvent lié à l'une de ces raisons:
- Il manque un marqueur d'ouverture ou de fermeture
- Un espace s'est glissé avant ou après le marqueur
- Les éléments ne sont pas dans des paragraphes
- Les éléments sont dans le même paragraphe
- Une balise "poubelle" s'est insérée: utiliser bouton "Clear formatting"
Vérification des marqueurs
Lorsque l'affichage est brisé, le problème se situe là ou l'affichage ne se comporte plus comme souhaité. Repérer alors dans l'éditeur la partie concernée, puis vérifier les marqueurs. Pour cela placer le curseur au début du paragraphe qui contient le marqueur et vérifier qu'il n'y a pas d'espace avant le caractère #, ni à la fin de la ligne: dans le cas de #VERB, le curseur ne doit plus se déplacer après la lettre B (ou alors passer au paragraphe suivant). Si un espace s'est inséré, le supprimer et relancer une pré-visualisation de la page. De même pour les paragraphes vides, penser à la supprimer, leur présence créer des espaces non désirés entre les blocs.
Nettoyage de contenu
Le bouton "Clear formatting" permet de supprimer des "balises poubelles". Ces balise proviennent souvent de copier-coller (Word par exemple) ou autre page web. Invisibles dans l'éditeur de texte mais présentes et interprétées dans le code source, elles peuvent générer un problème d'affichage. Pour nettoyer ces balises, sélectionner la partie concerner et cliquer sur le bouton "Clear formatting" (dernier bouton de l'éditeur, icône cercle barré).
Attention, le nettoyage de contenu supprime également les liens, gras et italique
Astuces
Mise à jour de la taille d'une photo
Pour changer une taille de photo et éviter des problèmes d'affichage: supprimer d'abord la photo et faire un nouvel ajout dans le paragraphe.
Contrôler le contenu
Lorsqu'un contenu est prêt, repasser en revu dans l'éditeur de Shopify après rafraichissement de la page (CMD+R) pour vérifier qu'il n'y a pas de paragraphes vides.
Recommendations de rédaction
Titres
Préférer une écriture en minuscule, le full caps peut être géré par une évolution du marqueur #TITLE. Cela évite les soucis de cohérence entre les contenus.
Règles typographiques
La règle de typographie française considère qu'il faut mettre un espace avant les caractères ?, !, :. Ces espaces sont mal gérés par les navigateurs web, il est possible que ces caractères passent à la ligne. Considérer de rédiger plutôt de cette manière :
Comment allez-vous?
au lieu de :
Comment allez-vous ?