Un thème entièrement interactif et riche en animations pour les architectes, les designers, les galeries et les musées. Des titres qui s’étirent vers le pointeur, des cadres qui s’ouvrent au défilement, un mur de collection déplaçable, des transitions de page et une apparence claire par défaut, l’apparence sombre étant à un clic.
Ce qui rend Atrium unique
Atrium est construit autour de la façon dont on regarde les œuvres dans une galerie : lentement, de près, avec le cartel à côté de la pièce.
- Typographie élastique. Les grands titres utilisent une police variable dont les lettres s’élargissent et s’allègent près du pointeur. Sur les écrans tactiles, ils respirent doucement à la place.
- Cadres animés au défilement. Le hero de la page d’accueil passe d’un petit cadre à une image plein écran au fil du défilement, et les pages de projet ouvrent une image à travers une fenêtre en arc.
- Cartels. Chaque œuvre, réalisation ou photographie porte une légende façon musée : le titre en italique, puis le lieu, l’année et le matériau.
- Mur de collection. Une toile d’œuvres que les visiteurs font glisser dans toutes les directions, chacune s’ouvrant dans une visionneuse qui zoome depuis sa vignette.
- Transitions de page et curseur contextuel. Un panneau de couleur balaie l’écran entre deux pages, et sur les appareils avec souris le curseur indique Voir, Lire ou Glisser.
- Un pied de page dévoilé. La page se soulève au-dessus d’un pied de page bleu Klein dont le logotype géant s’étire en apparaissant.
- La lumière d’abord. L’apparence claire est celle par défaut ; l’apparence sombre est à un clic et reste mémorisée pour chaque visiteur.
Atrium 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
.zipd’Atrium. -
Activez Atrium
Cliquez sur Activer sur la carte d’Atrium 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 la couleur d’accent, 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 Atrium ; les sections interactives sont décrites plus bas.
-
Configurez les menus
Le menu Header Main s’affiche dans l’en-tête sur les grands écrans et dans le menu plein écran sur tous les écrans. Gardez-le court : cinq ou six liens se lisent le mieux.
Code d’achat (clé de licence)
Le thème Atrium 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 et d’exposition. 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 | #1238d6 |
L’accent : boutons, liens, repères, le panneau de transition de page et le pied de page. Elle est éclaircie automatiquement en apparence sombre. |
| Couleur d’accent | #e0a526 |
Le petit indicateur « à l’affiche » et les mises en valeur. |
| Couleur du texte | #15161a |
L’encre de l’apparence claire. |
| Polices des titres et du texte | Archivo | Archivo possède un axe de largeur : l’effet de typographie élastique en a besoin. Les autres polices fonctionnent, sans l’étirement. |
| Styles d’en-tête | Transparent / Sticky | Les pages à sections commencent avec un en-tête posé sur la première section, qui devient du verre dépoli au défilement ; les autres pages utilisent l’en-tête en verre dès le départ. |
| Couleurs du pied de page | Vide | Laissez vide pour garder le pied de page bleu Klein, ou définissez vos propres couleurs de fond, de texte et de liens. |
Animations et interactions
La carte Animations et interactions des Paramètres du thème active ou désactive chaque effet :
| Option | Effet |
|---|---|
| Chargement d’introduction | Un chargement animé avec le nom de votre site sur la première page de chaque visite. |
| Transitions entre les pages | Un panneau de votre couleur principale 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 anneau qui indique l’action sous lui (Voir, Lire, Glisser, Ouvrir). |
| Typographie élastique | Les grands titres s’étirent vers le pointeur et respirent sur les écrans tactiles. |
| Parallaxe et effets de défilement | La profondeur des images, le cadre du hero qui s’ouvre, la fenêtre d’image en arc et le processus horizontal épinglé. |
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
Atrium s’ouvre sur son apparence claire (les murs d’une galerie en plein jour). Le bouton en forme de lune dans l’en-tête passe à l’apparence sombre avec un dévoilement circulaire, et 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 Atrium. Celles-ci bénéficient d’un design interactif :
| Section | Dans Atrium |
|---|---|
| Hero | Un titre élastique au-dessus d’une image encadrée qui s’ouvre en plein écran au fil du défilement. Les titres rotatifs en mode mots remplacent les mots entre accolades et l’image du cadre. |
| Bandeau défilant (thèmes interactifs) | Des mots qui dérivent à travers la page, plus vite pendant le défilement. Choisissez la vitesse, la direction, la taille et la typographie. |
| Déclaration (thèmes interactifs) | Une ou deux grandes phrases qui se remplissent mot à mot en entrant dans l’écran, avec une image et un bouton facultatifs. |
| Mur de collection (thèmes interactifs) | Des œuvres que les visiteurs font glisser dans toutes les directions (ou une grille), chacune s’ouvrant dans une visionneuse avec son cartel. |
| Portfolio | Un accrochage « façon salon » de six œuvres avec cartels, dévoilements masqués et parallaxe (trois colonnes), ou une grille classique (deux ou quatre). |
| Accordéon | De grandes lignes dépliables dont les titres s’étirent au survol : idéal pour des disciplines ou des services. |
| Étapes | Disposition horizontale : la section est épinglée et les étapes glissent latéralement pendant le défilement. Chaque étape peut avoir une image. |
| Avant / Après | Une comparaison pleine largeur avec un séparateur déplaçable qui se signale lorsqu’il apparaît à l’écran. |
| Chiffres clés | Les chiffres se mettent en place en roulant comme un compteur mécanique. |
| Vidéo | Une large affiche qui s’agrandit jusqu’à la pleine largeur au défilement ; le lecteur s’ouvre dans une boîte de dialogue. Ajoutez une image d’affiche ou laissez les vidéos YouTube utiliser leur propre miniature. |
| Aperçu des événements | Une liste façon exposition (à l’affiche, à venir, passés) ; une image suit le pointeur sur chaque ligne. |
| Témoignages, Bandeau de logos, Aperçu du blog, Équipe, Chronologie, Compte à rebours, Galerie, Image + texte, Appel à l’action, Titres | De grandes citations en serif dans un carrousel déplaçable, une grille de clients réglée, des cartes de journal éditoriales, des portraits en niveaux de gris qui s’inclinent, une ligne qui se dessine seule, un compte à rebours d’ouverture, une galerie éditoriale, des rangées d’images masquées, un lien élastique géant et des titres scindés. |
Œuvres & projets
L’index des œuvres propose 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 une vue en liste où une image suit le pointeur. Chaque page de projet s’ouvre sur une couverture plein écran, présente les informations du projet comme un cartel, puis montre ses films, ses comparaisons et sa galerie avant de mener 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 et les formes d’Atrium, 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, et la visionneuse se ferme avec Échap.
- Le focus est toujours visible, et le menu plein écran se ferme avec Échap.
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 Atrium 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.
- Atrium reste installé : ses fichiers restent dans
extensions/themes/atrium/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 Atrium et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/atrium/; - ses ressources publiées dans
public/themes/atrium/; - ses fichiers téléversés dans
storage/app/public/themes/atrium/; - 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 Atrium 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/atrium/. 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
Atrium est-il lent à cause de toutes ces animations ?
Non. Les effets tournent dans une seule boucle d’animation qui ne traite que ce qui est à l’écran, les images se chargent à la demande et rien de lourd n’est chargé avant que la page soit lisible.
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, Atrium devient un thème éditorial calme.
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. Le menu passe en plein écran, le processus épinglé devient une rangée que l’on fait défiler du doigt, le mur de collection suit votre doigt et les titres respirent au lieu de suivre un pointeur.