Produits

Shop / Marques

On a ce qu'il te faut… On en a plus…

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 ?

0 Article
LirePause
LecteurMasquer