Un thème immersif et cinématographique pour l’immobilier haut de gamme, les résidences, les hôtels et les promoteurs. Un logotype serif monumental sur des images pleine largeur, une navigation flottante en forme de pilule, des images aux formes organiques douces, des mots qui deviennent nets au fil du défilement, des chapitres narratifs épinglés et une apparence claire par défaut, l’apparence sombre étant à un clic.
Ce qui rend Canopy unique
Canopy se lit comme une brochure de résidence : une couverture pleine largeur, un nom composé en très grand, puis des chapitres apaisés en vert forêt, crème et bronze.
- Un logotype monumental. Le hero compose votre titre dans un immense serif sur une couverture pleine largeur au zoom lent. Les titres courts sont dimensionnés pour occuper toute la largeur, et leurs lettres s’élèvent une à une.
- Masques organiques. Les images prennent des formes d’arche, de feuille et de galet dont les courbes évoluent doucement pendant qu’elles défilent.
- Texte qui se précise. Les déclarations et les récits de projet deviennent nets mot à mot, d’un léger flou à la netteté, au fil du défilement.
- Chapitres narratifs épinglés. Sur les grands écrans, les sections Étapes et Chronologie restent en place pendant que chaque chapitre occupe la scène à son tour, avec un compteur « 01 / 05 » et une ligne de progression vert citron.
- Une pilule flottante et un menu plein écran. Une pilule de verre vert forêt centrée contient le bouton du menu, votre logo et un bouton Contact. Le menu tombe comme un rideau vert forêt, avec de très grands liens serif, vos coordonnées et l’heure locale.
- Chapitres vert forêt. Des bandes vert forêt pleine largeur portent les déclarations, les témoignages et les appels à l’action, et le pied de page se termine par le nom de votre site qui s’élève lettre par lettre.
- La lumière d’abord. L’apparence crème est celle par défaut ; l’apparence sombre est à un clic et reste mémorisée pour chaque visiteur.
Canopy fait partie de la famille des thèmes interactifs. Les thèmes interactifs partagent les mêmes types de sections supplémentaires (Bandeau défilant, Déclaration, Mur de collection) et les mêmes réglages Animations et interactions, ce qui vous permet de passer de l’un à l’autre sans reconstruire vos pages.
Premiers pas
-
Installez le thème
Allez dans Panneau d’administration → Thèmes, cliquez sur Téléverser et sélectionnez le fichier
.zipde Canopy. -
Activez Canopy
Cliquez sur Activer sur la carte de Canopy et saisissez votre code d’achat lorsqu’il vous est demandé. Votre contenu n’est pas modifié : un thème ne change que la façon dont il est affiché.
-
Réglez les couleurs et les animations
Ouvrez les Paramètres du thème pour choisir les couleurs, les polices, le style d’en-tête et les effets d’animation à conserver.
-
Construisez vos pages
Modifiez n’importe quelle page en mode Sections. Tous les types de sections fonctionnent avec Canopy ; les sections interactives sont décrites plus bas.
-
Configurez les menus
Le menu Header Main s’affiche dans le menu plein écran, sur toutes les tailles d’écran ; avec l’option Méga menu, il s’affiche aussi dans la pilule sur les grands écrans. Ses liens sont composés en très grand : cinq ou six se lisent le mieux.
Code d’achat (clé de licence)
Le thème Canopy est vendu sous une licence distincte de celle de l’application principale et de chaque autre thème ou add-on, il possède donc son propre code d’achat (clé de licence). Il vous est demandé la première fois que vous activez le thème dans Panneau d’administration → Thèmes.
Nos produits sont vendus sur trois plateformes. La façon dont vous recevez un code d’achat dépend de l’endroit où vous avez acheté le produit.
| Plateforme / Marketplace | Comment obtenir le code d’achat | Où le retrouver |
|---|---|---|
| Boutique bedigit.com Achat sur le site (Shop) |
Généré automatiquement lorsque la commande est payée, puis envoyé par e-mail, soit dans un e-mail de licence dédié, soit dans l’e-mail de confirmation de commande. | Mon compte → Mes licences sur bedigit.com |
| Gumroad | Créé dès que Gumroad nous notifie la vente, puis envoyé dans un e-mail séparé, en plus du reçu Gumroad. | L’e-mail de licence, votre Bibliothèque Gumroad et Mon compte → Mes licences sur bedigit.com |
| Envato Market CodeCanyon |
Délivré par Envato, pas par nous, et jamais envoyé par e-mail : vous le téléchargez vous-même depuis votre compte Envato. | Compte Envato → Downloads → License certificate & purchase code |
Vérifiez votre dossier de spam. Pour les achats effectués sur la Boutique bedigit.com et sur Gumroad, le code d’achat est envoyé par e-mail, et les e-mails de licence automatiques sont très souvent filtrés. Si le message ne se trouve pas dans votre boîte de réception, regardez dans votre dossier spam / courrier indésirable avant de contacter le support, et ajoutez notre adresse d’expédition à vos contacts ou à votre liste d’autorisation.
1. Boutique bedigit.com (achat sur le site)
Dès que votre commande passe au statut Payée, une clé de licence est générée automatiquement pour chaque article sous licence de la commande (une clé par unité achetée) et envoyée par e-mail à l’adresse utilisée pour la commande, soit dans un e-mail de licence dédié, soit dans l’e-mail de confirmation de commande. La clé reste aussi disponible sous Mon compte → Mes licences, où vous pouvez l’afficher, la copier, voir les domaines sur lesquels elle est activée, et désactiver un domaine pour libérer un emplacement d’activation. La facture correspondante se trouve sous Mon compte → Mes commandes.
2. Gumroad
Un achat sur Gumroad produit deux e-mails distincts : le reçu Gumroad (envoyé par Gumroad, donnant accès aux fichiers) et un e-mail de clé de licence (envoyé par bedigit.com) qui contient votre code d’achat. Ce second e-mail est généré dès que Gumroad nous notifie la vente, il arrive donc normalement quelques secondes après le paiement. Lorsque le produit utilise la fonctionnalité de clés de licence propre à Gumroad, la même clé apparaît aussi dans le reçu Gumroad et sous Bibliothèque → votre achat sur gumroad.com. Utilisez la même adresse e-mail sur bedigit.com que sur Gumroad : vos clés sont alors liées automatiquement à votre compte, sous Mon compte → Mes licences ; vous pouvez aussi ajouter une clé Gumroad manuellement depuis Mon compte → Mes licences Gumroad.
3. Envato Market (CodeCanyon)
Envato délivre et fournit lui-même le code d’achat : nous ne l’envoyons jamais par e-mail, il n’y a donc rien à chercher dans votre dossier de spam. Connectez-vous à votre compte Envato / CodeCanyon, ouvrez la page Downloads, trouvez l’article et choisissez License certificate & purchase code dans le menu déroulant Download ; le code est inscrit dans ce certificat. Il ressemble à 12345678-90ab-cdef-1234-567890abcdef et ne change jamais, même lorsque vous renouvelez le support de l’article. Consultez l’article officiel : Where Is My Purchase Code?
Vous avez perdu votre code d’achat ? Recherchez dans votre messagerie (dossier de spam inclus) « licence » ou « code d’achat », puis consultez Mon compte → Mes licences sur bedigit.com pour les achats Boutique et Gumroad, ou Downloads → License certificate sur Envato. S’il est toujours introuvable, ouvrez un ticket sur notre Centre d’aide avec votre numéro de commande (Boutique), l’ID de vente Gumroad ou l’e-mail de l’acheteur (Gumroad), ou votre nom d’utilisateur Envato et le nom de l’article (Envato).
Contenu de démonstration
La démo en ligne présente un studio fictif d’architecture, d’intérieurs et d’expositions. Ses textes ont été écrits pour la démo ; les photographies proviennent d’Unsplash et les films sont intégrés depuis YouTube. Remplacez-les par vos propres travaux avant la mise en ligne.
Le contenu de démonstration n’est pas importé automatiquement lorsque vous activez le thème : construisez vos pages à partir des sections décrites plus bas, ou partez d’une page que vous avez déjà.
Personnalisation
| Réglage | Par défaut | Ce qu’il modifie |
|---|---|---|
| Couleur principale | #2e3a26 |
Le vert forêt : la pilule d’en-tête, les chapitres vert forêt (déclarations, témoignages, appels à l’action), le pied de page, le menu, le chargement d’introduction, la transition de page et les boutons de l’apparence claire. |
| Couleur secondaire | #a68150 |
Les détails bronze : filets, puces de liste, petites feuilles et règles des bannières de titre en contour. |
| Couleur d’accent | #e7fd55 |
Le vert citron électrique, utilisé avec parcimonie : sélection de texte, anneaux de focus, survols sur fond vert forêt, lignes de progression et anneau du retour en haut. |
| Couleur du texte | #2e3a26 |
L’encre de l’apparence claire. |
| Polices des titres et du texte | Instrument Serif / Work Sans | Instrument Serif compose les logotypes et les titres (elle n’a qu’une graisse normale, avec italiques) ; Work Sans porte le texte et les petits libellés en capitales. D’autres polices peuvent être choisies. |
| Styles d’en-tête | Transparent / Sticky | Les pages à sections commencent avec une pilule de verre plus claire posée sur la première section, qui devient opaque au défilement ; les autres pages utilisent la pilule de verre opaque dès le départ. Default laisse la pilule défiler avec la page. |
| Largeur et alignement de l’en-tête | Pilule centrée | La pilule flotte au centre de l’écran ; activez En-tête large pour qu’elle occupe toute la largeur. |
| Méga menu | Désactivé | Lorsqu’il est activé, le menu Header Main s’affiche aussi dans la pilule sur les grands écrans. Le menu plein écran reste disponible. |
| Largeur du contenu | 1640px |
Largeur maximale du contenu dans la mise en page large ; la mise en page encadrée utilise sa Largeur du conteneur à la place. |
| Couleurs du pied de page | Vide | Laissez vide pour garder le pied de page vert forêt et son logotype géant, ou définissez vos propres couleurs de fond, de texte et de liens. |
| Couleur de fond du CTA | Vide | Laissez vide pour garder le panneau vert forêt de la section Appel à l’action. |
Animations et interactions
La carte Animations et interactions des Paramètres du thème active ou désactive chaque effet. Les cinq sont activés par défaut. Dans Canopy, ils produisent les effets suivants :
| Option | Effet |
|---|---|
| Chargement d’introduction | Un écran vert forêt sur la première page de chaque visite : le nom de votre site émerge d’un flou, une ligne crème se remplit, le slogan apparaît, puis l’écran se soulève avec un bord incurvé. |
| Transitions entre les pages | Un panneau vert forêt au sommet en arc s’élève entre deux pages, en affichant le nom de la page qui s’ouvre. |
| Curseur contextuel | Sur les appareils avec souris, le curseur devient un petit anneau crème qui se fond dans la page et s’agrandit en pilule légendée au-dessus des médias (Voir, Lire, Glisser...). |
| Typographie élastique | Dans Canopy, il s’agit du texte qui se précise : les déclarations et les récits de projet deviennent nets mot à mot pendant qu’ils défilent. |
| Parallaxe et effets de défilement | La profondeur des images, les masques organiques qui se transforment, les images flottantes, la couverture du hero qui se réduit en coins arrondis au défilement, et les chapitres narratifs épinglés des sections Étapes et Chronologie. |
Avec toutes les options désactivées, Canopy ne conserve que ses apparitions douces : images, titres et textes apparaissent en douceur lorsqu’ils entrent dans l’écran.
Les visiteurs qui demandent à leur appareil de réduire les animations ne voient jamais ces effets, quels que soient les réglages : le contenu s’affiche directement, sans animation.
Clair & sombre
Canopy s’ouvre sur son apparence claire : une page crème à l’encre vert forêt. Le bouton en forme de lune dans la pilule passe à l’apparence sombre, une page vert-noir au texte crème où le bronze et le vert citron gardent leurs couleurs, avec un dévoilement circulaire depuis le bouton. Le choix est mémorisé pour chaque visiteur, y compris sur les pages de connexion et d’inscription.
Dans Paramètres du thème → Mode d’apparence, vous pouvez démarrer en sombre, suivre le réglage système du visiteur, ou masquer le bouton pour imposer une seule apparence.
Sections interactives
Tous les types de sections fonctionnent avec Canopy. Celles-ci bénéficient d’un design interactif :
| Section | Dans Canopy |
|---|---|
| Hero | Une couverture pleine largeur au zoom lent et un logotype monumental dont les lettres s’élèvent une à une ; les titres courts occupent toute la largeur. Au fil du défilement, la couverture se réduit en coins arrondis. Les titres rotatifs sont pris en charge : chaque nouveau titre s’élève à son tour. Le Héro Landing est identique, centré. |
| Bandeau défilant (thèmes interactifs) | De grands mots en serif et en sans-serif qui dérivent à travers la page, séparés par de petites feuilles bronze, plus vite pendant le défilement. Choisissez la vitesse, la direction, la taille et la typographie. |
| Déclaration (thèmes interactifs) | Un chapitre vert forêt où de grands mots en serif deviennent nets pendant qu’ils défilent (effet Remplir mot par mot au défilement), ou apparaissent simplement en fondu, avec une image et un bouton facultatifs. |
| Mur de collection (thèmes interactifs) | Une toile d’images aux masques organiques, avec cartels, que les visiteurs font glisser dans toutes les directions ; les œuvres les plus proches dérivent plus vite. Chacune s’ouvre dans une visionneuse d’images. Choisissez le mur déplaçable (normal ou haut) ou une grille. |
| Portfolio | De grandes cartes éditoriales aux masques organiques, décalées comme dans un livre imprimé, sur deux à quatre colonnes. |
| Étapes | Disposition horizontale : des chapitres narratifs épinglés avec un compteur et une ligne de progression vert citron sur les grands écrans. Disposition verticale : un parcours dont la ligne s’allonge au fil du défilement. Chaque étape peut avoir une image. |
| Chronologie | Des chapitres épinglés où chaque date occupe la scène à son tour (en alternance, à gauche ou à droite). |
| À propos | Une image en arc avec un badge d’années flottant, un titre en serif et de fins chiffres qui s’incrémentent. |
| Témoignages | Un chapitre vert forêt de grandes citations en serif, à faire défiler du doigt ou à faire glisser, avec un compteur et des boutons précédent / suivant. |
| Carrousel | Des diapositives pleine largeur en fondu enchaîné avec un zoom lent, un compteur et une ligne de progression vert citron. |
| Vidéo | Un cadre cinématographique avec une affiche et une grande pilule de lecture ; le lecteur s’ouvre sur place. Avec la lecture automatique, la vidéo démarre en sourdine dès que le cadre est visible. |
| Galerie, Galerie + Texte, Image + Texte | Une mosaïque organique de photographies masquées qui s’ouvrent dans la visionneuse, des images flottant à différentes profondeurs autour d’une colonne de texte en serif, et des rangées masquées en alternance avec un détail recadré flottant. |
| Accordéon, FAQ | Des lignes en serif qui s’ouvrent avec une douce animation de hauteur, une à la fois sauf si plusieurs sont autorisées ; la FAQ se place à côté d’une image en arc. |
| Métriques, Compte à rebours | D’immenses chiffres fins en serif qui s’incrémentent, et d’immenses chiffres fins en serif qui égrènent le temps jusqu’à une date d’ouverture. |
| Appel à l’action, Barre de logos, Avant/Après | Un panneau vert forêt avec un titre serif géant en capitales et un bouton en pilule, des logos de partenaires (ou leurs noms en serif) sur une rangée réglée ou un bandeau qui dérive, et des comparaisons dans des masques doux avec un séparateur déplaçable. |
| Grille de cartes, Fonctionnalités, Équipe, Tarifs, Comparaison, Aperçus du journal / des événements / des produits, Titres, Séparateur, Bannière | Des masques d’images en bourgeon et des titres en serif, une grille réglée d’équipements, des portraits en arc, des formules sur papier réglées de bronze (la formule mise en avant en vert forêt), un tableau à filets fins dont la colonne mise en avant est teintée de sable, des aperçus éditoriaux sobres, des titres en serif capitales (simples, scindés, dans un bandeau ou sur une photographie), des filets bronze avec feuilles ou une vague organique, et une fine bande d’annonce vert forêt. |
Œuvres & projets
L’index des œuvres présente de grandes cartes éditoriales aux masques organiques, avec des filtres par catégorie qui réorganisent les œuvres sur place (lorsqu’elles tiennent toutes sur une seule page : réglez Portfolio → Éléments par page assez haut) et le nombre d’œuvres affichées. Chaque page de projet s’ouvre sur une couverture cinématographique, présente les informations du projet, raconte son histoire avec le texte qui se précise, montre sa galerie dans la visionneuse et se termine par un bandeau menant au projet suivant.
Pages des add-ons
Les pages des add-ons (journal, événements, boutique, centre d’aide, compte...) utilisent les mises en page partagées, restylées avec la palette, la typographie serif et les formes douces de Canopy, dans les deux apparences.
Accessibilité
- Chaque effet est désactivé pour les visiteurs qui demandent à leur appareil de réduire les animations.
- Les titres découpés en lettres conservent leur texte complet pour les lecteurs d’écran.
- Le mur de collection se déplace avec les touches fléchées, le curseur de comparaison avec le clavier, la visionneuse d’images et les témoignages avec les touches fléchées, et la visionneuse se ferme avec Échap.
- Le menu plein écran garde le focus à l’intérieur tant qu’il est ouvert et se ferme avec Échap.
- Un lien « Aller au contenu » est le premier arrêt du clavier sur chaque page.
Mise à jour
Comment mettre à jour ce thème vers une version plus récente.
Téléversement depuis le panneau d’administration (recommandé)
- Téléchargez le dernier fichier
.zipde ce thème. - Allez dans Panneau d’administration → Thèmes et cliquez sur le bouton Téléverser.
- Sélectionnez ou faites glisser le fichier
.zipdans la zone de téléversement. - Une demande de confirmation affiche le numéro de la version actuelle et celui de la nouvelle version. Cliquez sur Remplacer pour continuer.
- Allez dans Panneau d’administration → Mise à jour du système (
/admin/update) pour appliquer les éventuelles migrations de base de données en attente.
Astuce : les paramètres de votre thème (couleurs, polices, CSS personnalisé) sont stockés dans la base de données et ne seront pas perdus lorsque vous remplacez les fichiers du thème.
Désinstallation
Comment cesser d’utiliser ce thème sans rien perdre.
Les thèmes ne s’activent pas et ne se désactivent pas un par un : un seul thème est actif à la fois, vous cessez donc d’utiliser Canopy en activant un autre thème. Allez dans Panneau d’administration → Thèmes et cliquez sur Activer sur le thème que vous souhaitez utiliser à la place.
- Canopy reste installé : ses fichiers restent dans
extensions/themes/canopy/et sa carte reste dans la liste. - Ses paramètres (couleurs, polices, mise en page, options d’en-tête et de pied de page, CSS personnalisé) restent enregistrés dans la base de données, tout comme le style que vous avez appliqué à chaque section de la page d’accueil.
- Le code d’achat enregistré lors de l’activation est conservé : réactiver le thème ne vous le redemandera pas.
Réactivez-le quand vous le souhaitez : le front-end revient exactement tel que vous l’avez laissé.
Suppression
Comment supprimer définitivement ce thème, et ce qui disparaît avec lui.
La suppression efface le thème définitivement. Le thème actif ne peut pas être supprimé, la suppression se fait donc toujours en deux étapes :
- Activez un autre thème (voir Désinstallation).
- Cliquez sur Supprimer sur la carte Canopy et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/canopy/; - ses ressources publiées dans
public/themes/canopy/; - ses fichiers téléversés dans
storage/app/public/themes/canopy/; - ses artefacts de build Vite : les fichiers hachés dans
public/build/et leurs entrées dans le manifeste ; - sa ligne dans la table
themes, c’est là que sont stockés ses paramètres, donc les couleurs, polices, options de mise en page et le CSS personnalisé que vous avez configurés pour lui sont perdus.
Cette action est irréversible. Exportez ou notez tout CSS personnalisé que vous souhaitez conserver avant de supprimer le thème : si vous le réinstallez plus tard, il repartira de ses paramètres par défaut.
Le style appliqué à chaque section de la page d’accueil est enregistré sous le nom du thème et non sur sa ligne dans la table, il survit donc à la suppression : réinstallez Canopy et vous retrouverez le style de vos sections, tandis que les paramètres propres au thème repartiront de leurs valeurs par défaut.
La suppression est refusée, avant toute suppression de fichier, lorsque le thème est encore actif ou lorsque l’utilisateur du serveur web (PHP) ne peut pas supprimer extensions/themes/canopy/. Dans ce dernier cas, donnez à cet utilisateur le droit d’écriture sur le répertoire et sur son répertoire parent, puis réessayez.
Supprimer le dossier par FTP ou SSH n’est pas équivalent : les ressources publiées, les artefacts de build et la ligne de la table themes restent en place. Utilisez plutôt Supprimer dans le panneau d’administration.
Questions fréquentes
Canopy est-il lent à cause de toutes ces animations ?
Non. Les effets de défilement tournent dans une seule boucle d’animation qui ne traite que ce qui est à l’écran, les images se chargent à la demande et les polices se chargent sans bloquer la page.
Puis-je garder le design mais atténuer les animations ?
Oui. Désactivez n’importe quel effet dans Paramètres du thème → Animations et interactions. Avec toutes les options désactivées, Canopy devient un thème éditorial calme aux apparitions douces.
Pourquoi Bandeau défilant, Déclaration et Mur de collection sont-ils grisés avec mon autre thème ?
Ce sont des sections des thèmes interactifs. Lorsqu’un autre thème est actif, elles restent sur vos pages mais ne sont pas affichées ; le sélecteur de sections les indique comme non disponibles dans le thème actif.
Le thème fonctionne-t-il sur les téléphones et les tablettes ?
Oui. La pilule s’efface pendant que les visiteurs descendent dans une page et revient quand ils remontent, le menu plein écran sert de navigation, les chapitres narratifs deviennent une simple liste, le mur de collection suit votre doigt et le curseur contextuel n’est utilisé qu’avec une souris.