Cette page interne montre un exemple réel de chaque composant disponible dans le système de sections réutilisables, avec le vrai CSS du thème — pas une maquette. Chaque page du site (Accueil, La Sophrologie, Infos pratiques…) se construit en empilant ces mêmes composants via "+ Ajouter une section" dans Réglages du thème.

Chaque composant a une "mise en page" (le type de bloc) et quelques champs à remplir selon ce type. Les champs "Cartes" et "Chiffres clés" utilisent un format texte simple : une ligne par élément, avec :: pour séparer un nom d'une description quand les deux existent.

Voici à quoi ressemble le composant Texte simple avec un titre et un paragraphe de texte formaté. On peut y mettre du texte en italique, des liens, des listes, etc. — tout ce que l'éditeur riche de Publii permet.

Une grille de cartes, chacune avec un nom et une description optionnelle. Champs : label, titre, éléments (une ligne par carte, format Nom :: Description).

Une simple liste verticale, une ligne = un élément — ou deux listes côte à côte si les champs "colonne 2" sont remplis. Champs : label, titre, éléments (une ligne par point), et en option label/titre/éléments — colonne 2.

Une liste verticale d'étapes numérotées (1, 2, 3…) — le numéro est calculé automatiquement, pas besoin de le taper. Champs : label, titre, éléments (format Titre de l'étape :: Description).

Une bande horizontale de logos avec étiquette optionnelle — jusqu'à 10 emplacements, chacun un vrai champ photo (glisser-déposer) directement sur cette ligne, plus son propre texte alternatif et un lien optionnel (le logo devient alors cliquable, nouvel onglet). Un emplacement vide ne s'affiche simplement pas, inutile de remplir les 10. La bordure au-dessus du bloc est un réglage réel, désactivé par défaut (évite un double trait si ce bloc suit directement une autre section).

Une grille de petites lignes à puce (qualifications, chiffres de confiance…). Champs : label, titre, éléments (une ligne par point).

Un vrai tableau HTML "prestation / tarif". Champs : label, titre, éléments (format Prestation :: Tarif).

Une grille de fiches encadrées — pas de titre/label sur le composant lui-même, comme "Chiffres clés". Champ : éléments (format Libellé :: Valeur).

La grande bannière d'introduction — mêmes classes CSS que la bannière actuelle de la page d'accueil. Champs : eyebrow, titre, sous-titre, texte, 2 boutons, photo (+ forme, ajustement, bordure), qualifications. Le bouton principal peut être un lien, un appel téléphonique, un email, ou ouvrir le formulaire de prise de rendez-vous — avec la possibilité d'un comportement différent sur mobile (ex. lien vers une page de RDV sur desktop, appel direct sur mobile).

Jusqu'à 8 cartes de spécialités (titre, texte, icône et lien optionnels), chacune un vrai champ directement sur cette ligne — un emplacement vide ne s'affiche simplement pas. Comme n'importe quel autre composant : le contenu ET la position se règlent au même endroit. Voir le README du composant.

Pas de champs propres — Cabinets reste un champ global : le pied de page affiche un résumé des adresses sur chaque page, indépendamment de l'endroit où ce composant est placé. Gérez vos vrais cabinets et leurs cartes sous Réglages du thème → Infos pratiques. Voir le README du composant.

Pas de champs propres non plus, mais différent de Services/Cabinets : au lieu de lire un champ Réglages du thème, ce composant interroge en direct vos vrais articles Publii étiquetés publications et affiche les 6 derniers, à jour, sans jamais retoucher les Réglages du thème. Étiquetez un article publications (+ une étiquette secondaire pour la mention en majuscules) dans Publii → Articles pour qu'il apparaisse ici. Voir le README du composant.

Même mécanisme que Publications, en grille de 3 colonnes avec photo à la une. Étiquetez un article actualites dans Publii → Articles pour qu'il apparaisse ici, sur n'importe quelle page.

Même mécanisme que Publications/Actualités, mais avec un style volontairement différent : un bloc plus grand par article (date, titre, extrait, lien « Lire la suite ») plutôt qu'une liste compacte ou une grille — deux façons d'afficher des articles, au choix. Étiquetez un article conferences dans Publii → Articles pour qu'il apparaisse ici ; le programme complet de la conférence s'écrit dans le corps de l'article lui-même, pas dans ce composant.

Un texte + le bouton de contact du site (le même bouton partout où il apparaît — bandeau supérieur, menu mobile, barre de contact…), en version bandeau complet ou ligne compacte. Champ : style (complet/compact). Le bouton lui-même (Doctolib/email/téléphone/WhatsApp/lien/formulaire de RDV) se règle dans Réglages du thème → CTA, avec la possibilité d'une action différente sur mobile — ex. appel direct sur mobile, lien de réservation en ligne sur desktop.

Logo (ou nom du site) + sous-titre optionnel + description — utilisé pour la colonne « identité » du pied de page et le logo de l'en-tête, avec un style différent selon l'endroit. Champs : style (navigation/pied de page), affichage (logo/logo+texte/texte — un nom de site est lui-même une forme de logo), sous-titre, description, encadré sombre autonome (à activer hors pied de page — son texte clair n'est lisible que sur fond sombre, voir ci-dessous).

Une liste plate de liens, lue en direct depuis Publii → Menus — pas de champs de liens ici, ce composant se contente d'afficher l'un des 3 menus nommés du thème. Champs : source (navigation principale / pied de page / autres liens), encadré sombre autonome (à activer hors pied de page).

Téléphone, email, WhatsApp et adresses des cabinets — lit les mêmes champs globaux (Réglages du thème → Structure du site → Coordonnées) que la barre de contact et le pied de page, placeable n'importe où en plus (activez l'encadré sombre autonome pour un rendu lisible hors pied de page).

Un lien unique (texte + URL), en style texte simple ou bouton — pas un composant « mentions légales » à part, juste un lien générique réutilisable pour ce cas comme pour n'importe quel autre. Champs : texte, URL, style.

Les vrais liens de navigation (menus déroulants desktop) + le bouton burger mobile + le panneau mobile, comme un seul bloc — pas de champs propres, lit directement le menu « Navigation principale » de Publii. C'est le composant qui construit la barre de navigation réelle du site.

Un bouton icône (☀/☾) qui bascule le site entre son mode clair et son mode sombre — ne s'affiche que si le mode sombre manuel est activé dans Réglages du thème → Apparence → Couleurs, invisible sinon (pas de bouton mort).

Une liste flexible, entièrement personnalisable : adresse, téléphone, horaires, note de visioconférence… une ligne par élément, icône optionnelle. Champs : label, titre, éléments (format icône :: label :: valeur), style (encadré ou liste simple).

Un vrai formulaire de contact (Prénom/Nom/Email/Message, + Téléphone/Motif en option) avec validation en direct et retour visuel réel à l'envoi — succès, erreur, ou ouverture de la messagerie selon la configuration. Champs : label, titre, sous-titre, texte du bouton.

Une vraie notification flottante, contrôlée par vous — pour un message réel (ex. « Le cabinet 1 sera fermé 4 jours »). Champs : style (info/succès/attention/erreur), visuel (normal/compact/plein), position à l'écran, fréquence d'affichage (à chaque visite ou une fois par visiteur), fermeture manuelle.

Un vrai carrousel, jusqu'à 8 images (glisser-déposer) + leur texte alternatif, flèches précédent/suivant et puces réelles, défilement automatique optionnel. Champs : étiquette, image 1 à 8 (+ texte alternatif de chacune), taille (fixe/grande), alignement, format des images (16:9/4:3/1:1), bordure (désactivée par défaut), défilement automatique, intervalle.

Les 3 images ci-dessous sont des espaces réservés générés en interne (ce thème ne contient aucune image intégrée) — remplacez-les par vos propres photos.

Une liste verticale de liens tapée à la main, un par ligne — différente de « Liens » (lit le menu Publii en direct) et « Lien simple » (un seul lien). Champs : label, titre, liens (format Texte affiché :: URL, une ligne sans URL reste un texte simple).

Une vidéo intégrée (lien YouTube/Vimeo/autre plateforme, converti automatiquement) ou une vidéo mise en ligne (votre propre fichier). Champs : source (lien/fichier), lien ou fichier + image d'aperçu, taille (fixe/grande), alignement, format (16:9/4:3/1:1/9:16 — pour un lien uniquement, un fichier garde son format naturel sans recadrage).