Cette page explique comment modifier chaque partie du site depuis Ghost. Rien ici ne demande de toucher au code : tout se fait dans l'éditeur.
Le principe
La page d'accueil est faite de sections, et chaque section est une page. Si la page existe, la section apparaît. Si elle n'existe pas, ou si elle est vide, ou si elle porte l'étiquette #hidden, la section disparaît — sans rien casser.
Ces pages ont un identifiant (le « slug ») qui ne doit pas changer : c'est par lui que le site les retrouve. Le renommer fait disparaître la section, sans message d'erreur.
Les pages de la page d'accueil
| Slug | Section |
|---|---|
| index-hero | le bandeau vert du haut |
| index-atouts | le bandeau violet juste en dessous |
| index-formes | « Commencez par la forme » |
| index-fait-main | « Le fait main » |
| index-tissus | « Le tissu fait tout », le bandeau orange |
| index-surmesure | « Vous imaginez, je façonne », le bandeau violet |
| index-avis | « Ce qu'on m'écrit » |
| index-atelier | « Bonjour, moi c'est Sophie » |
| index-agenda | le titre au-dessus des dates |
| index-newsletter | le bandeau vert du bas |
La page « Accueil » elle-même sert à deux choses : sa photo à la une est la grande photo du bandeau vert, et son texte s'affiche sous le bandeau violet, avant les autres sections.
Les trois champs, toujours les mêmes
| Champ | Ce qu'il devient |
|---|---|
| Titre | le titre de la section |
| Extrait | la phrase sous le titre (dans les réglages de la page, « Excerpt ») |
| Contenu | ce que la section répète : les photos, les cartes, les boutons |
| Photo à la une | la photo de la section, quand elle en a une (l'accueil, l'atelier, le sur-mesure) |
L'extrait n'est pas le début du texte : c'est un champ à part, dans les réglages de la page. Laissé vide, la ligne n'apparaît pas.
Deux sections font exception, et leur titre ne s'affiche pas : le bandeau vert du haut, dont le grand titre est le premier titre (Heading) écrit dans le contenu, et le bandeau violet, qui n'a pas de titre du tout. Dans les deux cas le champ Titre ne sert plus qu'à retrouver la page dans l'admin et à Google.
Ajouter une entrée
Les formes
Dans le contenu de index-formes, le premier paragraphe est l'introduction : il s'affiche à côté du titre. Écrivez ensuite un paragraphe par forme : le nom en gras, un retour à la ligne (Maj + Entrée), l'accroche en italique (facultative), un retour à la ligne et la description. Chacun de ces paragraphes devient une carte, et les numéros 01, 02… sont ajoutés tout seuls. Il n'y a pas de nombre imposé.
Un tissu
Dans le contenu de index-tissus, ajoutez une carte Image par entrée, et écrivez sa légende : la légende devient le nom sous la photo. Une image = une case. Il n'y a pas de nombre imposé.
Une carte du « fait main », un avis
Dans le contenu de index-fait-main ou index-avis, écrivez un titre (Heading) puis un paragraphe, autant de fois que nécessaire. Chaque paire titre + paragraphe devient une carte. Pour les avis, le titre est le prénom et la date, le paragraphe est le message.
Un mot en jaune
Dans le contenu de index-hero, écrivez le grand titre comme un titre (Heading) tout en haut, puis le paragraphe en dessous. Mettez en italique le mot à faire ressortir : il s'affiche en jaune, et pas en italique. Cela marche dans le grand titre comme dans le paragraphe.
Le bandeau violet
Dans le contenu de index-atouts, écrivez une liste à puces : un argument par ligne (« Fait main », « Pièce unique »…). Le losange orange entre les arguments est ajouté tout seul, il n'y a rien à taper.
La photo du bandeau « Vous imaginez, je façonne »
Ce bandeau affiche la photo à la une de la page index-surmesure, à droite du texte. Tant qu'il n'y en a pas, le texte occupe toute la largeur du bandeau : rien ne casse.
Un bouton
Dans le contenu de index-hero ou index-surmesure, ajoutez une carte Bouton. Le lien se choisit dans la fenêtre de l'éditeur, il n'y a pas d'adresse à taper.
Une date d'agenda
Créez une page, étiquetez-la #agenda. Le titre est le type et le lieu (« Marché de créateurs — Groffliers »), l'extrait est la date et le lieu (« 6–7 juin 2026 · Groffliers (62) »), le contenu est le détail. Les trois prochaines s'affichent sur l'accueil, toutes sur la page Agenda.
La page « Qui suis-je »
Cette page s'écrit entièrement dans l'éditeur, d'un seul tenant : il n'y a pas de sous-pages à créer.
- La photo à la une est le portrait, en haut à droite ; l'extrait est la petite ligne orange au-dessus du titre ; le titre est le grand titre.
- Chaque chapitre commence par un petit titre (Heading 3) : c'est l'étiquette orange dans la marge, et le trait au-dessus est ajouté tout seul. Le grand titre du chapitre (Heading 2) vient juste après, puis les paragraphes.
- Pour le parcours, écrivez une liste à puces. Dans chaque puce : la date et le titre en gras, puis un retour à la ligne (Maj + Entrée) et le texte.
- Pour les étapes de fabrication, écrivez une liste numérotée et mettez le nom de l'étape en gras au début : les numéros 01, 02… sont ajoutés tout seuls.
- Une photo insérée seule occupe toute la largeur.
- Pour l'encadré de fin, insérez une carte Rappel (Callout) jaune, puis les cartes Bouton juste en dessous.
La page « Créations »
La page elle-même donne l'ouverture : son extrait est la ligne orange, son titre le grand titre, son contenu le paragraphe à droite.
Chaque création est une page étiquetée #creation. Elle occupe une ligne, photo d'un côté et texte de l'autre, en alternance — l'ordre est celui des dates de publication.
| Champ de la création | Ce qu'il devient |
|---|---|
| Titre | le titre de la création |
| Extrait | la petite ligne verte au-dessus du titre |
| Photo à la une | la photo de la ligne |
| Contenu | le texte sous le titre |
La page « Collections »
La page elle-même donne le bandeau violet du haut : son extrait est la petite ligne jaune, son titre le grand titre, son contenu le paragraphe en dessous. Les pastilles sous le texte sont ajoutées toutes seules, une par collection.
Chaque collection est une page étiquetée #collection. Elle occupe une bande à elle, photo d'un côté et texte de l'autre, en alternance — l'ordre est celui des dates de publication.
| Champ de la collection | Ce qu'il devient |
|---|---|
| Titre | le nom de la collection |
| Extrait | l'accroche orange sous le nom |
| Photo à la une | la photo de la bande |
| Contenu | la description |
| Dernier paragraphe tout en gras | la note verte en dessous, par exemple où voir la collection |
| Étiquette #bientot | la collection est annoncée « En préparation » au lieu de « Disponible » |
La page « Professionnels »
Elle s'écrit dans l'éditeur elle aussi, mais elle contient des bandeaux de couleur et des grilles. L'éditeur ne sait pas les créer : chaque bloc est ouvert et fermé par deux cartes HTML, et tout ce qui est écrit entre les deux se retrouve à l'intérieur.
Pour insérer une carte HTML, tapez / puis choisissez HTML, et collez la ligne indiquée. La carte de fermeture contient uniquement </div>.
Ne supprimez pas ces cartes et ne les déplacez pas : s'il manque une fermeture, la couleur du bandeau déborde sur la suite de la page. Rien d'autre ne casse, et remettre la carte suffit à réparer.
| Carte d'ouverture | Ce qui s'écrit entre les deux cartes |
|---|---|
| <div class="pro-pledges"> | les trois garanties : un petit titre et une phrase, trois fois |
| <div class="v5-pairs pro-cards"> | les quatre prestations : un titre et un paragraphe, quatre fois |
| <div class="pro-band pro-why"> | le bandeau vert : son titre, sa phrase, puis trois raisons (petit titre + phrase) |
| <div class="pro-facts"> | les trois encadrés jaunes : trois cartes Rappel (Callout) jaunes |
| <div class="pro-band pro-cta"> | le bandeau violet de fin : son titre et sa phrase |
| <div class="blk-actions"> | les deux boutons du bandeau de fin, à l'intérieur de celui-ci |
Le reste s'écrit normalement : l'extrait est la ligne orange du haut, le titre est le grand titre, le premier paragraphe est l'introduction, puis viennent les deux boutons et la photo. Les cinq étapes sont une liste numérotée, écrite comme celle de « Qui suis-je » : le nom de l'étape en gras, un retour à la ligne (Maj + Entrée), puis le texte.
La page doit garder le slug professionnels, et son entrée de menu s'ajoute dans Réglages → Navigation.
La page « Sur-mesure »
Elle est construite comme la page « Professionnels » : le texte s'écrit normalement, et les blocs que l'éditeur ne sait pas dessiner sont ouverts et fermés par deux cartes HTML.
| Carte d'ouverture | Ce qui s'écrit entre les deux cartes |
|---|---|
| <div class="sm-pledges"> | les trois garanties : un petit titre et une phrase, trois fois |
| <div class="sm-offers"> | les trois prestations : un titre et un paragraphe, trois fois |
| <div class="sm-band sm-how"> | le bandeau vert : son titre, sa phrase, puis la liste numérotée des quatre étapes |
| <div class="sm-tiers" id="tarifs"> | les trois tarifs : le format en petit titre, puis le prix en gras, un retour à la ligne et la description |
| <div class="sm-faq"> | les questions : un petit titre par question, un paragraphe par réponse |
| <div class="sm-band sm-cta" id="projet"> | le bandeau violet de fin : son titre et sa phrase |
| <div class="blk-actions"> | les deux boutons du bandeau de fin, à l'intérieur de celui-ci |
Les deux boutons du haut renvoient aux tarifs et au bandeau de fin. Leurs adresses sont /sur-mesure/#tarifs et /sur-mesure/#projet : les identifiants sont portés par les cartes d'ouverture ci-dessus, ne les enlevez pas.
La page « Contact »
Le texte de la page s'écrit normalement : le titre, l'introduction, les deux cartes et le bouton sont à vous.
Le formulaire, lui, fait partie du site et non de l'éditeur — il n'y a rien à installer ni à recopier. Par défaut il s'affiche à la fin de la page. Pour le placer ailleurs, insérez une carte HTML contenant uniquement cette ligne, à l'endroit exact où il doit apparaître :
<div class="contact-anchor"></div>En pratique elle se met juste après le paragraphe « Plus vous m'en dites… », pour que le formulaire tombe avant les deux cartes de contact.
Les messages arrivent sur ampoule@sophie.jolliton.com. Le visiteur laisse au choix son email ou son numéro de téléphone : quand c'est un email, il suffit de répondre au message reçu, l'adresse est déjà en destinataire. Quand c'est un numéro, il est écrit dans le message et c'est à vous de rappeler.
La liste déroulante « Sujet » est fixe (devis, abat-jour, création textile, autre) : elle est dans le thème, la modifier depuis l'éditeur n'aurait aucun effet.
Le blog
La page « Journal » donne l'en-tête : son extrait est la ligne orange, son titre le grand titre, son contenu le paragraphe à droite. La date « mis à jour le… » est ajoutée toute seule, d'après le dernier billet publié.
Chaque billet montre sa rubrique (son étiquette principale), sa date, le temps de lecture, sa photo à la une si elle existe, puis ses premières lignes. Six billets par page.
| Colonne de droite | D'où ça vient |
|---|---|
| Photo et texte « Qui écrit ici » | votre photo et votre bio dans Réglages → Staff |
| Rubriques | les étiquettes publiques, avec le nombre de billets |
| À lire | les billets marqués « Feature this post » dans l'éditeur |
| La lettre | fixe ; le bouton mène à la page Contact tant que la lettre d'information n'est pas en place |
Les étiquettes
| Étiquette | Effet |
|---|---|
| #hidden | masque la section ou la date, sans la supprimer |
| #agenda | la page devient une date de l'agenda |
| #conseils | la page est listée dans « Conseils », en bas |
| #footer | la page est listée dans « Informations », en bas |
| #contact | la page est listée dans « Contact », en bas ; son titre est le texte du lien |
| #collection | la page est une collection (page Collections) |
| #bientot | la collection est annoncée « En préparation » |
| #creation | la page est une création (page Créations) |
Les étiquettes qui commencent par # sont internes : elles ne s'affichent nulle part sur le site.
Ce qui ne se modifie pas ici
- Le menu du haut et le bouton Contact : Réglages → Navigation.
- Le nom en haut à gauche, le texte de bas de page et les libellés des boutons « En savoir plus » : ils sont dans le thème.
- Les couleurs et les polices : elles sont dans le thème aussi.
À savoir
- Une section vide se cache toute seule : tant qu'il n'y a pas au moins une image ou une carte, elle n'apparaît pas.
- Ne renommez pas le slug d'une page index-… : la section disparaîtrait silencieusement.
- Ces pages sont visibles à leur propre adresse (par exemple /index-formes/), où elles s'affichent sans mise en forme. C'est normal.
- Le formulaire d'inscription à la lettre d'information ne fonctionne pas encore.
- Le formulaire de contact a besoin de JavaScript. Un visiteur qui l'a désactivé voit à la place l'adresse à laquelle écrire.
- Il refuse les envois répétés : au-delà de quelques messages dans l'heure depuis la même connexion, il demande de réessayer plus tard. C'est ce qui tient les robots à distance.