Au moment de la préparation de votre campagne, vous devrez intégrer et mettre en forme les contenus de votre page grâce au langage Markdown. Cela peut sembler assez impressionnant, mais n’importe qui peut coder en Markdown facilement. Il vous suffit de suivre les indications de cet article et vous devriez pouvoir réaliser des mises en forme assez visuelles pour attirer le regard de vos potentiels contributeurs.
💬 En cas de pépin, n’hésitez pas à demander de l’aide à votre référent Zeste, qui pourra réaliser certaines manipulations à votre place.
Comment intégrer des contenus
C’est la partie la plus simple, qui ne demande pas de programmation, et qui est la première étape de la création de votre page projet. Vous trouverez, dans plusieurs onglets de personnalisation (par exemple dans "Description"), des champs où vous pourrez intégrer vos contenus et présenter votre projet. Ils ressembleront à ça :
Vous pouvez écrire directement vos textes dans le champ. Les petits boutons verts au dessus du champ vous permettent de réaliser des manipulations de base :
Une fois tous vos contenus intégrés, vous pourrez commencer à les mettre en forme. C’est ici que le principe des balises et du langage Markdown vont vous être utiles.
Le principe des balises
Le langage Markdown fonctionne selon le principe de balises : des lignes de code qui donnent des indications à appliquer aux contenus concernés.
Une balise est toujours composée de deux lignes de code, une “ouverture” et une “fermeture”.
L’ouverture, placée avant le contenu concerné, donne l’indication de la modification à apporter au contenu qui va suivre. Pour plus de clarté dans cet article, toutes les lignes de code “ouverture” seront indiquées en bleu.
La fermeture, placée à la fin du contenu concerné, donne l’indication que la modification prend fin à cet endroit. Pour plus de clarté dans cet article, toutes les lignes de code “fermeture” seront indiquées en rouge.
Les vraies lignes de code sur la plateforme Zeste ne sont pas colorées.
Par exemple, si vous voulez qu’une partie du contenu soit centrée au milieu de la page, il faut entrer avant le contenu la ligne de code {{div.center-align}}. Et à la fin du texte concerné, il faudra fermer la balise en entrant la ligne de code {{end}}. Ainsi, voici ce que vous écrivez dans votre champ de code :
Mais voici ce qui apparaît sur votre page projet (visible quand vous cliquez sur “preview”) :
Il est possible d’appliquer plusieurs balises à la fois sur une même portion de texte.
Ainsi, pour que mon texte soit centré et de couleur orange, je peux appliquer la balise {{div.center-align}}, qui se ferme avec {{end}}, ainsi que la balise {{div.orange-text}}, qui se ferme également avec {{end}}.
Et voilà le résultat !
Vous savez tout du langage Markdown : i ne vous reste plus qu’à appliquer les balises de votre choix parmi les suivantes afin de rendre votre page projet unique !
Liste de balises utiles
Position du texte et des images (basique)
Centrer un contenu : {{div.center-align}} TEXTE ou IMAGE {{end}}
Aligner à gauche : {{div.left-align}} TEXTE ou IMAGE {{end}}
Aligner à droite : {{div.right-align}} TEXTE ou IMAGE {{end}}
Justifier un texte : {{p.justify}} TEXTE ou IMAGE {{end-p}}
Mettre le contenu dans un encart blanc avec ombre : {{div.card-panel}} TEXTE {{end}}
Redimensionner une image : juste avant la fermeture des parenthèses de l’image, coller ceci : | width=100px sans oublier l’espace au début, et ajuster le nombre de pixels à votre convenance. Exemple : ![](https://res.cloudinary.com/hm3mec8bl/image/upload/u8vezn | width=100px)
Voilà le résultat de ces lignes de code :
Couleurs et encadrés
La liste des couleurs disponibles en Markdown est disponible en cliquant sur le lien suivant : Couleurs. Une couleur en Markdown est composée de trois éléments :
- Sa classe de couleur (par exemple, “green” ou “blue”)
Et de façon optionnelle, selon la nuance voulue :
- L’une de ces trois indications : “lighten” (plus clair), “darken” (plus foncé), ou “accent” (accentué)
- Un numéro de 1 à 5 pour exprimer l’intensité de cette dernière indication
Ces couleurs peuvent être utilisées dans différents cas (pour ces exemples nous utilisons la couleur blue-lighten-3, mais n’importe quelle couleur de la liste peut être utilisée en suivant le modèle) :
Mettre un texte en couleur : {{div.blue-text.text-lighten-3}} TEXTE {{end}}
Surligner un texte avec une couleur : {{div.blue.lighten-3}} TEXTE {{end}}
Mettre le texte dans un encadré coloré avec ombre : {{div.blue.lighten-3.card-panel}} TEXTE {{end}}
Personnaliser la couleur d’un bouton cliquable : {{a.btn.blue.lighten-3 href=INSERER LIEN COMPLET}} TITRE DU BOUTON {{end-a}}
Voilà le résultat de ces balises :
Boutons cliquables / interactifs
Il est possible de créer des boutons cliquables, qui peuvent soit dérouler des contenus cachés, soit emmener le visiteur vers une autre page web. En voici les balises :
Bouton simple vers une page web (par défaut de couleur jaune ambrée, mais voir la partie sur les couleurs pour personnaliser la couleur)
{{a.btn href=INSERER LIEN COMPLET}}
TITRE DU BOUTON
{{end-a}}
Bouton déroulant du contenu
{{ul.collapsible}}
{{li}}
{{div.collapsible-header}}
{{div.center-align}}
TITRE BOUTON
{{end}}{{end}}
{{div.collapsible-body}}
CONTENU CACHÉ
{{end}}
{{end-li}}
{{end-ul}}
Voici le résultat de ces lignes de code :
Plusieurs colonnes de contenus
Il vous est possible de scinder la largeur de la page en plusieurs zones de la taille de votre choix, afin de pouvoir personnaliser plusieurs colonnes de contenus sur une même largeur. Pour cela, il faut avoir recours aux grilles. Ce sont des lignes de code exprimant une ou plusieurs parts de la largeur, en anglais (half, third, fourth, fifth... jusqu’à twelfth), se juxtaposant.
Une grille commence toujours par {{grid}} et se finit toujours par {{end}}. À l’intérieur de ces grilles, on peut mettre des balises :
- indiquant la part que prend cette nouvelle zone de contenus dans la largeur de la page, ainsi que le nombre de parts (one-quarter, two-thirds, three-fifths…). Exemple de balise d’ouverture : {{grid-item:five-twelfths}}
- se finissant elle-même par {{end}}
Voici un exemple de grille qui scinde la largeur de la page en trois zones de taille égale.
{{grid}}
{{grid-item:one-third}}
TEXTE OU IMAGE
{{end}}
{{grid-item:one-third}}
TEXTE OU IMAGE
{{end}}
{{grid-item:one-third}}
TEXTE OU IMAGE
{{end}}
{{end}}
Voilà le résultat :
Il est également possible de jouer avec les pourcentages pour créer des zones de tailles inégales, par exemple :
{{grid}}
{{grid-item:five-sixths}}
TEXTE OU IMAGE
{{end}}
{{grid-item:one-sixth}}
TEXTE OU IMAGE
{{end}}
{{end}}
On remarque que lorsqu’on évoque plusieurs parts, la part en question prend un “s” (“five-sixths”). Voilà le résultat de ces lignes de code :
Ainsi, il est possible de personnaliser vos grilles à votre guise. Pour en savoir plus sur les possibilités de grille, consultez ce lien dédié à la question.
Vous êtes rassurés sur l'utilisation du langage Markdown et vous avez plein d'idées pour faire la meilleure présentation jamais vue sur Zeste ? On a hâte de voir le résultat ! Et en cas de pépin, n’hésitez pas à faire signe à votre référent Zeste !