Un thème technique inspiré des plans pour les logiciels d’architecture, les bureaux d’études, les SaaS et les équipes produit. Des cadres sur grille de papier à dessin, une typographie grotesque en capitales grasses avec des annotations en police mono, des dessins au trait qui se tracent au défilement, un unique accent orange signal et une apparence claire par défaut, l’apparence sombre étant à un clic.
Ce qui rend Vellum unique
Vellum transforme chaque page en feuille de dessin : un cadre en filet fin, des cellules réglées au lieu de cartes flottantes, et de petites notes en police mono dans les marges.
- La feuille de dessin. Un cadre fixe en filet fin, avec des repères en croix aux angles, entoure la page. Ses marges portent le nom de votre site, un numéro de feuille avec le titre de la page, et la position de défilement.
- Typographie de dessinateur. Les titres sont tracés lettre par lettre derrière un bloc curseur orange, chaque lettre passant par plusieurs glyphes avant de se fixer.
- Grilles réglées. L’en-tête, les sections, les aperçus et les formulaires sont construits en cellules qui partagent leurs filets de 1px : angles droits, aucune ombre, titres en grotesque capitale et libellés en police mono.
- Des dessins qui prennent couleur. Les images s’affichent comme des dessins en niveaux de gris avec des lignes de cote ; elles prennent leur couleur en atteignant le milieu de l’écran, ou au survol.
- Des lignes tracées au défilement. Les contours des cadres, le tracé qui relie les étapes et la ligne de la chronologie se dessinent au fil du défilement, et le cercle orange du hero grandit depuis l’angle de son cadre.
- Un curseur en croix. Sur les appareils avec souris, le curseur devient une croix avec les coordonnées X / Y en direct, et un carré légendé au-dessus des médias.
- La lumière d’abord. L’apparence papier à dessin est celle par défaut ; l’apparence sombre est à un clic et reste mémorisée pour chaque visiteur.
Vellum 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 Vellum. -
Activez Vellum
Cliquez sur Activer sur la carte de Vellum 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 Vellum ; les sections interactives sont décrites plus bas.
-
Configurez les menus
Le menu Header Main s’affiche comme une rangée de cellules réglées dans l’en-tête sur les grands écrans (les sous-éléments s’ouvrent dans un panneau numéroté), et dans la feuille de menu plein écran sur les écrans plus petits. Gardez-le court : cinq ou six liens tiennent le mieux dans la rangée d’en-tête.
Code d’achat (clé de licence)
Le thème Vellum 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 | #fa3600 |
L’orange signal : les boutons, la cellule Contact et les cellules d’appel à l’action, les états actifs et le curseur de dessin. Il reste identique en apparence sombre. |
| Couleur secondaire | #282828 |
Les aplats d’encre de l’apparence claire : états de survol, boutons sombres, notifications, page active d’une pagination et cases cochées. L’apparence sombre garde sa propre encre claire. |
| Couleur d’accent | #fa3600 |
Les marques d’annotation : repères carrés, ligne de balayage des apparitions d’images et cercle du hero. Par défaut, c’est le même orange que la couleur principale. |
| Couleur du texte | #282828 |
L’encre de l’apparence claire. |
| Polices des titres et du texte | Schibsted Grotesk / Geist | Schibsted Grotesk est composée en capitales pour les titres ; Geist sert à la lecture. Geist Mono, utilisée pour les libellés, les annotations et les boutons, est toujours chargée par le thème et n’est pas un réglage. |
| Styles d’en-tête | Transparent / Sticky | Les pages à sections commencent avec des cellules d’en-tête vides, qui se remplissent de papier dès que la page défile ; les autres pages utilisent des cellules remplies dès le départ. Les deux restent fixées en haut. Default laisse l’en-tête défiler avec la page. |
| Largeur et alignement de l’en-tête | Large, à gauche | La rangée d’en-tête occupe toute la largeur de la feuille et les cellules du menu commencent à gauche ; désactivez En-tête large pour la contenir. |
| Méga menu | Désactivé | Lorsqu’il est activé, l’en-tête affiche le méga menu sur plusieurs colonnes dans sa propre cellule sur les grands écrans, au lieu d’une cellule par lien. |
| Largeur du contenu | 1680px |
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 en papier réglé sous le très grand nom de site en contour, ou définissez vos propres couleurs de fond, de texte et de liens. |
| Couleur de fond du CTA | Vide | Laissez vide pour garder la section Appel à l’action comme un bloc réglé sur la feuille, ou donnez-lui une couleur de fond. |
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 Vellum, ils produisent les effets suivants :
| Option | Effet |
|---|---|
| Chargement d’introduction | Sur la première page de chaque visite, les lignes du cadre de la feuille se tracent depuis les angles pendant qu’un compteur passe de 000 à 100 à côté du nom de votre site, puis la feuille glisse vers le haut. |
| Transitions entre les pages | Six stores réglés se ferment sur la page en affichant le nom de la page qui s’ouvre, puis se rouvrent sur la page suivante. |
| Curseur contextuel | Sur les appareils avec souris, le curseur devient une croix avec les coordonnées X / Y en direct, et un carré légendé au-dessus des médias (Voir, Glisser, Lire, Ouvrir). |
| Typographie élastique | Dans Vellum, il s’agit de la typographie de dessinateur : les titres sont tracés lettre par lettre derrière un bloc curseur orange. |
| Parallaxe et effets de défilement | Les lignes et les contours de cadres tracés au défilement, les dessins qui prennent leur couleur en atteignant le milieu de l’écran, la profondeur des images, le cercle du hero qui grandit et la Déclaration épinglée. |
Avec toutes les options désactivées, Vellum ne conserve que ses apparitions discrètes (fondus et balayages sur les images), et les dessins prennent leur couleur au survol.
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
Vellum s’ouvre sur son apparence claire : papier à dessin et encre graphite. Le bouton carré de l’en-tête retourne la feuille vers l’apparence sombre, une feuille presque noire où l’orange signal garde sa couleur ; la nouvelle feuille est révélée depuis le bord supérieur. 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 Vellum. Celles-ci bénéficient d’un design interactif :
| Section | Dans Vellum |
|---|---|
| Hero | Un dessin encadré avec des lignes de cote, qui prend sa couleur au fil du défilement, et un cercle orange qui grandit depuis son angle quand le hero quitte l’écran. Le titre tracé se place en bas à gauche, à côté d’une cellule avec le paragraphe et les cellules d’appel à l’action. Le Héro Landing superpose le titre tracé à un dessin encadré pleine largeur. Les titres rotatifs sont pris en charge. |
| Bandeau défilant (thèmes interactifs) | Une bande défilante d’éléments en police mono ou en capitales séparés par « / » et « + », plus rapide pendant le défilement. Choisissez la vitesse, la direction, la taille et la typographie. |
| Déclaration (thèmes interactifs) | Avec l’effet Remplir mot par mot au défilement, la section épingle une ligne en capitales au centre d’une feuille vide et fait défiler la déclaration au rythme du défilement, chaque ligne passant du gris à l’encre, avec un compteur. La déclaration est découpée selon vos retours à la ligne et votre ponctuation. Sinon, elle se lit comme un grand paragraphe. |
| Mur de collection (thèmes interactifs) | Une table de plan avec une grille pointillée que les visiteurs font glisser dans toutes les directions, avec des dessins encadrés, des graduations de cote et un affichage des coordonnées ; chaque dessin s’ouvre dans la visionneuse d’images. Choisissez le mur déplaçable (normal ou haut) ou une grille réglée. |
| Portfolio | Une grille réglée de dessins avec des index en police mono, qui prennent leur couleur au survol. |
| Étapes | Disposition horizontale : un tracé façon plan, dessiné au défilement, relie des repères carrés orange numérotés. Disposition verticale : une ligne tracée au défilement. Chaque étape peut avoir une image, affichée comme un dessin. |
| Chronologie | Une ligne verticale tracée au défilement ; ses repères deviennent orange à mesure qu’ils sont dépassés. |
| À propos | Une cellule de dessin encadré à côté de la cellule du récit, et une rangée réglée de chiffres. |
| Témoignages | Un tableau réglé de citations avec un repère de citation orange, paginé selon le réglage Éléments par page avec des cellules précédent / suivant. |
| Image, Vidéo | Un dessin encadré dont le contour se trace au défilement, avec des lignes de cote et une légende en police mono ; un lecteur encadré dont l’affiche s’affiche comme un dessin, avec un curseur Lire. Avec la lecture automatique, le lecteur se charge dès qu’il est visible. |
| Galerie, Galerie + Texte, Image + Texte | Une grille réglée de dessins qui s’ouvrent dans la visionneuse d’images, une cellule de dessins à côté du texte, et des rangées numérotées de cellules de dessin et de texte. |
| Fonctionnalités, Grille de cartes, Métriques, Tarifs, Comparaison | Une fiche technique de cellules réglées avec des icônes dans des carrés réglés, des cellules avec un dessin, un index et un titre en capitales, de grands chiffres en capitales avec des unités en police mono, des formules présentées comme les colonnes d’un tableau technique (la formule mise en avant signalée en orange) et un tableau technique avec une colonne mise en valeur. |
| Carrousel, Avant/Après, Barre de logos, Compte à rebours | Des diapositives révélées par une ligne de balayage avec des commandes réglées et un compteur en police mono, des cadres de comparaison réglés avec une poignée orange (ou une paire côte à côte), une rangée réglée de cellules clients avec des cellules flèches (ou une bande défilante), et quatre cellules en police mono qui égrènent le temps. |
| Accordéon, FAQ, Onglets, Titres, Séparateur, Bannière, Appel à l’action | Des rangées réglées numérotées, des cellules d’onglets sur un panneau réglé, des titres tracés avec des filets dessinés, un filet dessiné, une vague tracée ou une rangée de repères carrés, une fine bande réglée, et un bloc réglé avec une cellule d’appel à l’action orange. |
Œuvres & projets
L’index des œuvres présente ses catégories comme des cellules d’onglets qui filtrent les œuvres sur place (lorsqu’elles tiennent toutes sur une seule page : réglez Portfolio → Éléments par page assez haut), avec le nombre d’œuvres affichées. Un sélecteur affiche les œuvres en grille réglée de dessins ou en liste technique où une image suit le pointeur ; la vue est mémorisée pour chaque visiteur. Chaque page de projet s’ouvre sur un cartouche comme celui d’un dessin, puis une couverture encadrée avec des lignes de cote, l’histoire, les films, les comparaisons et la galerie, un bouton pour copier le lien de la page, et une cellule 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 feuille de Vellum : angles droits, filets fins, libellés en police mono et orange signal, dans les deux apparences.
Accessibilité
- Chaque effet est désactivé pour les visiteurs qui demandent à leur appareil de réduire les animations.
- Les titres tracés 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 et les onglets avec le clavier, et les lignes d’accordéon sont des éléments dépliables natifs.
- La feuille de menu garde le focus à l’intérieur tant qu’elle est ouverte 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 Vellum 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.
- Vellum reste installé : ses fichiers restent dans
extensions/themes/vellum/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 Vellum et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/vellum/; - ses ressources publiées dans
public/themes/vellum/; - ses fichiers téléversés dans
storage/app/public/themes/vellum/; - 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 Vellum 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/vellum/. 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
Vellum 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, Vellum devient un thème technique calme.
Pourquoi mes images sont-elles en noir et blanc ?
Vellum affiche les images comme des dessins : elles restent en niveaux de gris jusqu’à ce qu’elles atteignent le milieu de l’écran, puis prennent leur couleur. Avec Parallaxe et effets de défilement désactivé, elles prennent leur couleur au survol.
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. L’en-tête garde une cellule Menu qui ouvre une feuille réglée plein écran avec des liens numérotés, vos coordonnées et l’heure locale, le mur de collection suit votre doigt, et le curseur en croix n’est utilisé qu’avec une souris.