Coulisses de la vitrineComment ce site est construit.
Ce site montre les modèles et les modules dynamiques du CMS en situation, sur un client fictif : l’atelier d’une ébéniste lyonnaise. Pour chaque section, voici le modèle à chercher dans la bibliothèque, d’où viennent les informations et qui les met à jour.
Commerciaux et support : de quoi répondre à un client. Graphistes : le nom exact du modèle et les réglages utilisés.
AccueilUne page d’accueil qui vit toute seule.
Modèle : Héros — Vitrine : ouvert maintenant.
Ce qui se met à jour tout seul : « Ouvert » ou « Fermé » suit les horaires de la configuration générale ; la note et le nombre d’avis sont lus sur la fiche Google du client (clé Google active).
Qui remplit : le graphiste (photo, titre, boutons) ; les horaires viennent de la configuration du site.
Réglages utilisés : note Google affichée, hauteur « Grande ».
Modèle : Chiffres en grand.
Ce qui se met à jour tout seul : les chiffres défilent jusqu’à leur valeur quand le visiteur arrive dessus ; le vrai chiffre reste écrit dans la page.
Qui remplit : le graphiste, qui saisit « 64 ans », « 850+ »… Un nombre décimal ou à séparateur reste fixe.
Réglages utilisés : compteur animé (oui par défaut).
Modèle : Offre du moment (coupon).
Ce qui se met à jour tout seul : la section disparaît le lendemain de sa date de fin ; le code se copie en un clic.
Qui remplit : le graphiste ou le client : avantage, conditions, code, date de fin.
Réglages utilisés : forme coupon (ici) ou bandeau (page Boutique).
Modèle : Réalisations filtrables (Galerie photos) · Avis en grand (témoignages).
Ce qui se met à jour tout seul : les photos viennent du module Galerie photos, une sous-catégorie = un filtre ; les avis sont les trois premiers témoignages actifs, avec la note Google.
Qui remplit : le client, dans les modules Galerie photos et Témoignages.
Réglages utilisés : 9 photos par filtre, légendes affichées.
Modèle : Prochain événement (module Événements) · Contact : venez nous voir.
Ce qui se met à jour tout seul : l’événement le plus proche avec compte à rebours et ajout à l’agenda ; il disparaît une fois passé. Les horaires de la semaine, le jour en cours et la prochaine fermeture exceptionnelle viennent de la configuration.
Qui remplit : le client, dans le module Événements et dans ses horaires.
Réglages utilisés : carte Google de l’adresse affichée.
L’atelierRaconter le client.
Modèle : Héros — Mosaïque bento · Notre histoire en frise.
Ce qui se met à jour tout seul : la tuile de la note Google ; sans note, le chiffre clé prend la place.
Qui remplit : le graphiste : photos, chiffre clé, 3 à 6 étapes de la frise (date, titre, texte, photo).
Réglages utilisés : dernière date mise en avant ; la frise défile au doigt sur téléphone.
Modèle : Texte éditorial (lettrine + citation) · Image + texte en médaillon.
Ce qui se met à jour tout seul : le chiffre de la pastille s’anime.
Qui remplit : le graphiste.
Réglages utilisés : lettrine, deux colonnes ; les listes à puces deviennent des coches.
Modèle : Labels et garanties · Module — Partenaires · On recrute.
Ce qui se met à jour tout seul : les logos partenaires viennent du module Partenaires.
Qui remplit : le graphiste pour les labels et les offres ; le client pour ses partenaires.
Réglages utilisés : les postes s’affichent en cartes avec leurs étiquettes (contrat, lieu, date).
RestaurationUne page de service complète.
Modèle : Héros — Coupe en biais · 4 étapes en cartes translucides.
Ce qui se met à jour tout seul : rien : contenu fixe.
Qui remplit : le graphiste.
Réglages utilisés : image de fond de section avec voile sombre derrière les étapes.
Modèle : Module — Avant / Après.
Ce qui se met à jour tout seul : les paires de photos viennent du module ; le visiteur fait glisser le curseur.
Qui remplit : le client, dans le module Avant / Après.
Modèle : Zone d’intervention.
Ce qui se met à jour tout seul : chaque commune est placée à sa vraie position grâce à la base gratuite de l’État, avec sa distance à vol d’oiseau.
Qui remplit : le graphiste : ville, rayon, liste des communes, deux repères.
Réglages utilisés : résumé des communes, distances affichées.
Modèle : Questions en conversation.
Ce qui se met à jour tout seul : les questions-réponses s’affichent une à une comme une discussion, et sont aussi déclarées à Google pour son référencement.
Qui remplit : le graphiste, dans la section : jusqu’à 8 questions courtes et leurs réponses, propres à la section (indépendantes du module FAQ), le nom et l’avatar.
Réglages utilisés : une question à la fois, 6 questions.
Modèle : Appel à l’action en grand.
Ce qui se met à jour tout seul : le numéro de téléphone vient de la configuration.
Qui remplit : le graphiste.
Réglages utilisés : forme panneau, motif « Courbes de niveau » léger.
RéalisationsPhotos et vidéos qui se trient.
Modèle : Héros — Grand titre avec photo.
Ce qui se met à jour tout seul : rien : contenu fixe.
Qui remplit : le graphiste.
Réglages utilisés : taille du titre « Très grand ».
Modèle : Réalisations filtrables (Galerie photos).
Ce qui se met à jour tout seul : les sous-catégories de la Galerie photos deviennent les filtres ; la photo s’agrandit au clic.
Qui remplit : le client, dans le module Galerie photos.
Réglages utilisés : 12 photos par filtre.
Modèle : Vidéos filtrables (Galerie vidéos).
Ce qui se met à jour tout seul : les sous-catégories de la Galerie vidéos deviennent les filtres ; le lecteur YouTube ne se charge qu’au clic, sans cookie avant.
Qui remplit : le client, dans le module Galerie vidéos (un lien YouTube suffit). Ici, des vidéos publiques de chaînes institutionnelles (France 3, Château de Versailles, chambres de métiers, ministère de l’Économie), pour la démonstration.
Réglages utilisés : vidéos 16:9, 6 par filtre.
Modèle : Avant/Après + texte.
Ce qui se met à jour tout seul : la paire de photos vient du module Avant / Après.
Qui remplit : le graphiste pour le texte, le client pour les photos.
Boutique et contactVendre et être joint.
Modèle : Héros — Photo en arche + pastille · Offre du moment en bandeau · Trois atouts en escalier.
Ce qui se met à jour tout seul : l’offre se masque le lendemain de sa date de fin.
Qui remplit : le graphiste. Le code ARTISAN10 est aussi un code promo du module e-commerce (lien entre les deux à l’étude).
Réglages utilisés : forme arche, pastille « Livraison offerte dès 60 € ».
Modèle : Contact : venez nous voir · Appel à l’action en grand.
Ce qui se met à jour tout seul : horaires, ouvert / fermé, prochaine fermeture, carte et itinéraire depuis la configuration ; le téléphone de l’appel aussi.
Qui remplit : le client, dans ses horaires et coordonnées.
Réglages utilisés : forme ticket ; le bouton mène à la page Contact et à son formulaire.
Journal et réseaux sociauxInformer, montrer, faire suivre.
Modèle : Module — Actualités · Prochain événement.
Ce qui se met à jour tout seul : les dernières actualités et le prochain événement des modules.
Qui remplit : le client, dans les modules Actualités et Événements.
Modèle : Derniers posts Instagram / Facebook.
Ce qui se met à jour tout seul : les derniers posts du compte Instagram relié au site (module Réseaux sociaux), relus toutes les heures, images gardées sur le site. Ici, fil simulé : le compte de test d’Aerial relié au Playground n’a pas encore de publication.
Qui remplit : personne : c’est automatique une fois le compte du client relié dans le module Réseaux sociaux.
Réglages utilisés : Instagram, 6 posts, en grille.
Modèle : Vidéos verticales (1 à 4).
Ce qui se met à jour tout seul : chaque Short YouTube ou TikTok s’affiche avec sa vignette, gardée sur le site ; le lecteur ne se charge qu’au clic. Ici, des vidéos publiques du Château de Versailles, de France 3, de la Fondation Bettencourt Schueller et du Mobilier national.
Qui remplit : le graphiste : un lien par vidéo, une légende courte.
Réglages utilisés : 4 vidéos ; la page Restauration montre aussi « Vidéo verticale + texte » (vidéo Onisep).
Modèle : Publications des réseaux sociaux (1 à 3).
Ce qui se met à jour tout seul : chaque publication s’affiche en carte aux couleurs du site ; la publication officielle ne s’ouvre qu’au clic.
Qui remplit : le graphiste : un lien par publication (LinkedIn, X, Instagram, Facebook, Pinterest, TikTok), texte prérempli dans le back-office. Ici, des publications publiques du Château de Versailles, du Musée dauphinois et du Mobilier national.
Réglages utilisés : trois cartes.
Modèle : Fil Facebook + texte.
Ce qui se met à jour tout seul : le fil de la page Facebook du client, chargé seulement au clic du visiteur (RGPD : aucun cookie Facebook avant). Ici, la page d’Aerial Group, faute de page Facebook pour l’atelier fictif.
Qui remplit : le graphiste ; le lien de la page vient de la configuration (Réseaux sociaux).
Réglages utilisés : deux cartes sans bouton.