Un thème chaleureux et soigné pour les cabinets d’architecture, les architectes d’intérieur, les constructeurs et les bureaux d’études. Des courbes de niveau topographiques animées, des chapitres numérotés, une liste de services avec aperçus d’images au survol, une mosaïque de projets décalée, un accent vert sauge et une apparence claire par défaut, l’apparence sombre étant à un clic.
Ce qui rend Contour unique
Contour est dessiné comme un relevé de terrain : des murs blanc cassé chaleureux, de discrètes lignes topographiques et des projets disposés comme des plans épinglés sur un tableau.
- Des courbes de niveau vivantes. Des lignes topographiques dérivent lentement derrière le hero, les en-têtes de page, l’appel à l’action, le menu et le pied de page, et contournent doucement le pointeur. Chaque page a son propre relief.
- Typographie en largeur. Les titres d’affichage passent d’une largeur condensée à leur largeur normale lorsqu’ils apparaissent, et se resserrent légèrement quand la page défile vite.
- Cartes média qui s’agrandissent. L’image du hero, l’image d’en-tête de page, les couvertures de projet et les vidéos commencent en cartes arrondies en retrait des bords et s’ouvrent en pleine largeur au fil du défilement.
- Chapitres numérotés. Les titres de section s’ouvrent sur une petite marque de chapitre, numérotée dans l’ordre de la page, et un filet fin qui se trace.
- Lignes de spécialités. Les services, les fonctionnalités et les événements se lisent comme de grandes lignes de texte sur des filets fins ; au survol d’une ligne, son image flotte à côté du curseur.
- Une mosaïque de projets décalée. Les projets sont disposés en tailles variées et à des hauteurs décalées, avec des étiquettes en pilule.
- La lumière d’abord. L’apparence chaleureuse de plein jour est celle par défaut ; l’apparence sombre est à un clic et reste mémorisée pour chaque visiteur.
Contour 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 Contour. -
Activez Contour
Cliquez sur Activer sur la carte de Contour 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 Contour ; les sections interactives sont décrites plus bas.
-
Configurez les menus
Le menu Header Main s’affiche au centre de l’en-tête flottant sur les grands écrans (les sous-éléments s’ouvrent dans des menus déroulants), et dans le panneau de menu sur les écrans plus petits, où les sous-éléments se déplient sous leur parent. Gardez-le court : cinq ou six liens tiennent le mieux dans l’en-tête.
Code d’achat (clé de licence)
Le thème Contour 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 | #5f7d55 |
Le vert sauge : le panneau de transition de page, le curseur, la carte des témoignages, la formule mise en avant, les colonnes mises en valeur et les états actifs. Il est éclairci automatiquement en apparence sombre. |
| Couleur secondaire | #151515 |
Les aplats sombres de l’apparence claire : le bandeau de la section Appel à l’action (et les bannières sombres) et les boutons sombres. L’apparence sombre garde son propre bandeau et des boutons clairs. |
| Couleur d’accent | #c9a77c |
Les marques argile : badges de formule, badges de promotion et bannières d’avertissement. |
| Couleur du texte | #151515 |
L’encre de l’apparence claire. |
| Polices des titres et du texte | Instrument Sans | Instrument Sans est chargée avec son axe de largeur, dont l’effet de typographie en largeur a besoin. Les autres polices fonctionnent, sans l’élargissement. |
| Styles d’en-tête | Transparent / Sticky | Les pages à sections commencent avec une carte flottante transparente posée sur la première section, qui devient blanche au défilement ; les autres pages utilisent la carte blanche dès le départ. Les deux se masquent quand on descend et reviennent quand on remonte. Default laisse l’en-tête défiler avec la page. |
| Largeur et alignement de l’en-tête | Large, menu centré | La carte flottante occupe la largeur de la page avec le menu en son centre ; désactivez En-tête large pour la contenir. |
| Téléphone de contact | Vide | Lorsqu’un numéro de téléphone est défini dans vos paramètres de contact, l’en-tête l’affiche dans une pilule à côté du bouton Contact. |
| Largeur du contenu | 1440px |
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 couleur pierre chaude avec ses discrètes courbes de niveau, ou définissez vos propres couleurs de fond, de texte et de liens. |
| Couleur de fond du CTA | Vide | Laissez vide pour garder le bandeau sombre de la section Appel à l’action (la couleur secondaire). |
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 Contour, ils produisent les effets suivants :
| Option | Effet |
|---|---|
| Chargement d’introduction | Sur la première page de chaque visite, des anneaux de niveau se dessinent, puis le nom de votre site et votre slogan apparaissent avant que le panneau se soulève. |
| Transitions entre les pages | Un panneau vert sauge parcouru de courbes de niveau balaie l’écran 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 point vert sauge qui s’agrandit en pilule légendée au-dessus des médias (Voir, Lire, Glisser...). |
| Typographie élastique | Dans Contour, il s’agit de la typographie en largeur : les titres d’affichage s’élargissent depuis une largeur condensée en apparaissant, et se resserrent quand la page défile vite. |
| Parallaxe et effets de défilement | La profondeur des images, les cartes média qui s’ouvrent en pleine largeur (hero, en-tête de page, couverture de projet, vidéo) et l’image qui s’élève dans l’Appel à l’action. |
Les courbes de niveau et le remplissage mot à mot de la Déclaration font partie du design et ne dépendent pas de ces options ; pour les visiteurs qui demandent à leur appareil de réduire les animations, les lignes sont dessinées une seule fois, sans bouger. Avec toutes les options désactivées, Contour ne conserve que ses apparitions discrètes : texte qui s’élève, images dévoilées par le bas et filets fins qui se tracent.
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
Contour s’ouvre sur son apparence claire : des murs blanc cassé chaleureux et un texte couleur encre. Le bouton en forme de lune dans l’en-tête passe à l’apparence sombre, un noir chaud et profond avec un vert sauge éclairci pour le contraste, 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 Contour. Celles-ci bénéficient d’un design interactif :
| Section | Dans Contour |
|---|---|
| Hero | Une déclaration centrée au-dessus d’une carte média arrondie en retrait, qui s’ouvre en pleine largeur au fil du défilement, entourée de courbes de niveau qui dérivent ; en dessous, une ligne d’introduction associe l’appel à l’action à la description. La disposition d’image côte à côte garde le texte à côté de la carte. Le Héro Landing place une déclaration centrée sur des courbes de niveau, avec la couverture en carte arrondie en dessous. Les titres rotatifs sont pris en charge. |
| Bandeau défilant (thèmes interactifs) | De grands mots en casse de phrase, séparés par de petits points, qui dérivent plus vite pendant le défilement. Choisissez la vitesse, la direction, la taille et la typographie. |
| Déclaration (thèmes interactifs) | Un grand texte dont les mots passent du gris clair à l’encre en entrant dans l’écran (effet Remplir mot par mot au défilement), ou s’élève simplement, avec une image et un bouton facultatifs. |
| Mur de collection (thèmes interactifs) | Une toile d’œuvres arrondies, sur des courbes de niveau, 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 calme. |
| Portfolio | La mosaïque de projets décalée : tailles variées, hauteurs décalées et étiquettes en pilule. |
| Fonctionnalités, Grille de cartes, Aperçu des événements | De grandes lignes de texte séparées par des filets fins (la liste des spécialités, sur une ou deux colonnes), des lignes de services et un agenda d’événements ; au survol d’une ligne, son image flotte à côté du curseur. |
| Témoignages | Une carte vert sauge qui chevauche une photographie pleine largeur, une citation à la fois, avec des boutons ronds précédent / suivant. La photographie est l’image de fond de la section (onglet Style) si elle est définie, sinon l’image de la section ; sans l’une ni l’autre, la carte se pose sur des courbes de niveau. |
| Appel à l’action | Le chapitre final sombre : de discrètes courbes de niveau, un grand titre en typographie en largeur et une image qui s’élève à sa place. |
| Étapes, Chronologie | Des étapes numérotées en colonnes (horizontal) ou en lignes (vertical), chacune avec une image facultative, et des dates sur un filet fin qui se trace en apparaissant. |
| À propos, Métriques, Compte à rebours | L’introduction sur de discrètes courbes de niveau avec une photographie encadrée et les chiffres clés, des chiffres dans une grille à filets fins qui s’incrémentent une fois visibles, et les jours, heures, minutes et secondes en grands chiffres tabulaires. |
| Vidéo | Une carte d’affiche arrondie avec une pilule Lecture, qui s’ouvre en pleine largeur au fil du défilement ; le lecteur se charge au clic, avec le son. Avec la lecture automatique, la vidéo démarre en sourdine (les navigateurs n’autorisent que la lecture automatique sans son) dès que la moitié est à l’écran : vidéos YouTube (mode de confidentialité renforcée) et Vimeo, ou votre propre fichier vidéo, qui tourne aussi en boucle. Les visiteurs qui demandent à réduire les animations gardent l’affiche. |
| Accordéon, FAQ, Onglets | De grandes lignes de texte qui s’ouvrent sur place, un plus qui se change en moins (la FAQ avec une image encadrée facultative), et une liste d’onglets soulignée, en pilules ou verticale, avec un repère qui glisse. |
| Galerie, Galerie + Texte, Image + Texte, Image | Une mosaïque décalée de photographies arrondies qui s’ouvrent dans la visionneuse d’images, une petite mosaïque à côté d’une colonne de texte, des rangées en alternance et des photographies seules dévoilées par le bas. |
| Titres, Tarifs, Comparaison, Barre de logos, Aperçus du blog / des produits, Équipe, Séparateur, Bannière | Des ouvertures de chapitre numérotées, des formules en hautes cartes avec la formule mise en avant en vert sauge, un tableau à filets fins avec une colonne vert sauge, des partenaires dans une grille à filets fins ou un bandeau lent, des cartes de journal décalées, des cartes de boutique sobres, des cartes portrait avec étiquettes en pilule, un filet fin, une vague de niveau ou trois points, et une fine barre d’annonce. |
Œuvres & projets
L’index des projets place des pilules de catégorie animées au-dessus de la mosaïque de projets décalée : les pilules font glisser leur repère et réorganisent les projets sur place (lorsqu’ils tiennent tous sur une seule page : réglez Portfolio → Éléments par page assez haut), avec le nombre de projets affichés. Chaque page de projet s’ouvre sur son titre posé sur des courbes de niveau et une carte de couverture qui s’ouvre en pleine largeur, puis présente les informations et l’histoire du projet, ses films, ses comparaisons et sa galerie, des projets liés et 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, les cartes arrondies et les filets fins de Contour, dans les deux apparences.
Accessibilité
- Chaque effet est désactivé pour les visiteurs qui demandent à leur appareil de réduire les animations, et les courbes de niveau restent immobiles.
- Le mur de collection, les témoignages, la visionneuse d’images et les onglets se déplacent avec les touches fléchées, et la visionneuse se ferme avec Échap.
- L’en-tête s’efface pendant que les visiteurs descendent dans la page, mais jamais quand le focus est à l’intérieur, et le panneau de menu 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 Contour 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.
- Contour reste installé : ses fichiers restent dans
extensions/themes/contour/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 Contour et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/contour/; - ses ressources publiées dans
public/themes/contour/; - ses fichiers téléversés dans
storage/app/public/themes/contour/; - 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 Contour 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/contour/. 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
Contour est-il lent à cause de toutes ces animations ?
Non. Les effets tournent dans une seule boucle d’animation, les courbes de niveau sont dessinées sur un canevas léger qui se met en pause hors de 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, Contour devient un thème calme et chaleureux ; les courbes de niveau continuent de dériver, car elles font partie du design.
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. En dessous de la largeur d’un ordinateur de bureau, le menu s’ouvre en panneau avec des courbes de niveau, l’en-tête se masque quand on descend, le mur de collection et les témoignages suivent votre doigt, et les aperçus d’images des lignes ainsi que le curseur ne sont utilisés qu’avec une souris.