Un thème moderne de page d’atterrissage SaaS basé sur le design des pages front LpStudio, avec une barre de navigation à méga-menu, un hero animé et un mode clair/sombre complet.
Présentation du thème
Un front-end soigné de style SaaS pour votre site Larapen, avec une barre de navigation flottante en forme de pilule, un hero à dégradé animé et une expérience claire/sombre entièrement thématisée.
Points forts
- 49 sections de contenu
- Plus de 80 modèles de page
- Navigation à méga-menu
- Modes clair, sombre & système
- Entièrement responsive
- Prêt pour le multilingue
- Prise en charge du blog & de la boutique
- Optimisé pour le SEO
- Injection de CSS & JS personnalisés
- Deux variantes d’en-tête
Palette de couleurs
| Couleur | Valeur |
|---|---|
| Principale | #7367f0 |
| Secondaire | #808390 |
| Accent | #ff9f43 |
| Texte | #444050 |
| Fond | #f8f7fa |
Typographie
- Public Sans : titres, graisse 600–700
- Public Sans : texte courant, 16px de base
À qui s’adresse ce thème ? Studio est idéal pour les produits SaaS, les startups, les pages d’atterrissage d’applications et les sites centrés sur des outils qui recherchent une esthétique contemporaine de type tableau de bord. Sa barre de navigation en pilule effet verre, le titre hero à dégradé « brillant » et sa couleur de marque violet vif donnent à votre site un rendu de produit résolument moderne, et chaque couleur de marque s’adapte automatiquement depuis le panneau d’administration.
Premiers pas
Activez le thème Studio et commencez à construire votre site en quelques minutes.
-
Connectez-vous à votre panneau d’administration
Accédez à l’espace d’administration de votre site (généralement
/admin) et connectez-vous avec vos identifiants d’administrateur. -
Allez dans Apparence → Thèmes
Dans la barre latérale de l’administration, cliquez sur Apparence puis sur Thèmes. La liste de tous les thèmes installés s’affiche.
-
Activez « Studio »
Trouvez la carte du thème Studio et cliquez sur le bouton Activer. Le thème devient immédiatement le thème front-end actif de votre site.
-
Personnalisez-le à votre goût
Rendez-vous dans Apparence → Paramètres du thème pour modifier les couleurs, les options d’en-tête et de pied de page, le méga-menu, le comportement du mode sombre, et plus encore. Les modifications s’appliquent instantanément.
-
Ajoutez du contenu
Créez des pages depuis la rubrique Pages du panneau d’administration. Utilisez le modèle de page à sections pour combiner librement 49 sections de contenu différentes.
Code d’achat (clé de licence)
Le thème Studio 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).
Personnalisation
Adaptez chaque aspect du thème depuis le panneau d’administration, sans aucune ligne de code.
Couleurs
Changez la couleur principale grâce à un sélecteur de couleur. Studio recalcule automatiquement toutes les teintes qui en dépendent (boutons, liens, anneaux de focus, dégradé du hero) à partir de la couleur choisie.
Polices
Ajustez la police des titres, celle du texte courant et la taille de police de base. Studio est livré avec Public Sans, le système typographique de sa source de design LpStudio.
Mise en page
Basculez entre les styles de mise en page large et encadrée, et définissez des largeurs de conteneur personnalisées. Par défaut, le conteneur est large, à 1250px.
En-têtes
Configurez deux variantes d’en-tête indépendantes (l’une pour les pages à sections (superposée au hero), l’autre pour les pages standard) ainsi que le méga-menu, l’alignement de la navigation, les couleurs et la hauteur du logo.
Pied de page
Choisissez un style de pied de page prédéfini (par défaut, sombre ou minimal), définissez la couleur ou l’illustration de fond, les coins supérieurs arrondis et les couleurs distinctes de la barre inférieure.
Avancé
Injectez du CSS et du JavaScript personnalisés directement depuis le panneau d’administration. Parfait pour de petits ajustements sans toucher aux fichiers du thème.
Astuce : toutes les options de personnalisation se trouvent dans Apparence → Paramètres du thème du panneau d’administration. Les modifications sont enregistrées dans la base de données et prennent effet immédiatement : inutile de recompiler ou de redéployer quoi que ce soit.
Modèles de page
Plus de 80 modèles Blade couvrent chaque page principale et chaque add-on pris en charge.
| Modèle | Usage | Add-on |
|---|---|---|
| Sectioned | Combinez librement 49 modèles de section pour construire n’importe quelle mise en page | Core |
| Page | Page statique standard avec titre, contenu et image à la une | Core |
| Full Width | Canevas pleine largeur sans habillage pour du contenu personnalisé | Core |
| Contact | Page de contact avec formulaire, carte intégrée et coordonnées | Core |
| Account | Tableau de bord utilisateur, gestion du profil et préférences de notification | Core |
| FAQ | Questions fréquentes avec sections en accordéon dépliables | FAQ |
| Team | Profils des membres de l’équipe avec photos, fonctions et pages de détail | Team |
| Partners | Grille de logos de partenaires, clients ou sponsors | Partners |
| Pricing | Tableaux de prix avec comparaison des fonctionnalités et formules mises en avant | Pricing |
| Quote Request | Formulaire de demande de devis personnalisé pour vos services | Quote |
| Portfolio | Vitrine en grille de vos réalisations avec vues de détail | Portfolio |
| Blog | Liste des articles, articles individuels, catégories et tags | Blog |
| Shop | Catalogue de produits, panier et paiement avec une sous-navigation thématisée | Shop |
| Appointment | Assistant de rendez-vous, paiement, confirmation et vues « mes rendez-vous » | Appointment |
| Booking | Assistant de réservation, paiement, confirmation et vues « mes réservations » | Booking |
| Events | Liste des événements, détail, création/modification, paiement et vues de participation | Events |
| Careers | Tableau d’offres d’emploi avec pages de détail | Careers |
| Forum | Forums communautaires avec catégories, sujets, recherche et réponses | Forum |
| Classified | Petites annonces avec vues de création, d’annonces enregistrées et « mes annonces » | Classified |
| Glossary | Glossaire de A à Z avec pages par lettre et pages de détail des termes | Glossary |
| HelpDesk | Base de connaissances, création de tickets et suivi des tickets | HelpDesk |
| Licenses | Vues d’enregistrement et de gestion des licences | Licenses |
| School Portal | Portail parents/élèves : notes, présences, frais de scolarité, emploi du temps, messages, et plus encore | School |
| Envato | Vérification des achats Envato et liste des achats | Envato |
Remarque : les modèles de page des add-ons n’apparaissent que lorsque l’add-on correspondant est installé et activé. Les modèles principaux sont toujours disponibles.
Sections de contenu
49 sections en glisser-déposer vous permettent de construire des pages riches et uniques sans écrire une seule ligne de code.
Sections de titre de page
- Titre simple
- Titre bannière
- Titre en superposition
- Titre animé
- Titre scindé
Hero & appel à l’action
- Hero
- Hero d’atterrissage
- Bannière
- CTA
- Boutons
- Compte à rebours
Contenu & texte
- Texte enrichi
- Contenu texte
- Image & texte
- À propos
- Étapes
- Chronologie
- Accordéon
- Onglets
- FAQ
- Liste à puces
Médias & visuels
- Image
- Galerie
- Galerie & texte
- Carrousel
- Vidéo
- Avant & après
- Intégration
- Carte
- Séparateur
Données & fonctionnalités
- Fonctionnalités
- Grille de cartes
- Indicateurs
- Tableau de prix
- Tarifs Wallet
- Tableau comparatif
- Témoignages
- Équipe
- Téléchargements
- Outils
Formulaires & engagement
- Formulaire de contact
- Newsletter
- Formulaire de newsletter
Aperçus des add-ons
- Portfolio
- Aperçu du blog
- Aperçu des produits
- Aperçu des événements
- Aperçu des annonces
- Aperçu des offres d’emploi
Comment utiliser les sections : lorsque vous créez ou modifiez une page, choisissez le modèle de page Sectioned. Vous pouvez alors ajouter, réorganiser et configurer chaque section. Chaque section dispose de ses propres réglages de contenu, de fond (couleur, dégradé ou image avec superposition et parallaxe), de couleurs de texte, d’espacement, et d’un motif décoratif optionnel.
En-tête & pied de page
Une barre de navigation flottante en pilule avec deux variantes indépendantes, un méga-menu et un pied de page à deux niveaux entièrement configurable.
Deux variantes d’en-tête
Studio configure l’en-tête deux fois : une fois pour les pages à sections (la page d’accueil et les pages construites avec des sections dynamiques, qui s’ouvrent généralement sur un hero que l’en-tête peut recouvrir) et une fois pour les pages standard (pages de contenu simple et pages front des add-ons, où l’en-tête est opaque). Chaque variante dispose de son propre jeu complet d’options.
| Option | Description |
|---|---|
| Style | Par défaut (défile avec la page), Transparent (pilule effet verre superposée au hero, qui devient opaque au défilement) ou Sticky (pilule flottante fixée). Les pages à sections utilisent Transparent par défaut, les pages standard Sticky. |
| Large | Étire la barre de navigation sur toute la largeur du conteneur |
| Alignement de la navigation | Aligne les éléments du menu (centrés par défaut) |
| Hauteur | Hauteur de l’en-tête réglable |
| Fond | Couleur unie ou image |
| Couleur du texte | Recolore les liens de navigation et le texte de la marque |
| Bouton | Couleur du libellé et fond personnalisés |
| Hauteur du logo | Réglable pour s’adapter à votre logo ; une variante du logo pour le mode sombre est prise en charge |
| Ombre du texte | Effet d’ombre portée optionnel sur le texte |
| Bordure inférieure | Épaisseur et couleur de la bordure configurables |
Méga-menu
Les éléments de menu qui ont des petits-enfants s’affichent automatiquement sous forme de méga-menu déroulant sur plusieurs colonnes. Des options globales contrôlent son comportement :
- Méga-menu : active ou désactive le mode méga-menu déroulant
- Disposition Masonry : répartit les blocs de catégories dans une grille Masonry plutôt qu’en colonnes égales
- Ouverture au clic : ouvre les panneaux au clic plutôt qu’au survol
- Icônes de premier niveau : affiche des icônes à côté des éléments de menu de premier niveau
Sélecteur de langue
- Masquez entièrement le sélecteur, ou donnez au menu déroulant des langues son propre méga-menu avec un nombre configurable de langues par colonne
- Affichez le drapeau du pays pour chaque langue, ou une icône de globe générique
Options du pied de page
| Option | Description |
|---|---|
| Style | Préréglage Par défaut, Sombre ou Minimal |
| Mise en page | 4 colonnes avec des groupes de menus dynamiques |
| Fond | Couleur unie ou illustration décorative (le thème fournit sa propre image de fond de pied de page) |
| Couleurs des titres / du texte / des liens | Entièrement personnalisables |
| Coins supérieurs | Rayon d’arrondi supérieur (3.75rem dans le design d’origine, carré par défaut) et bordure supérieure configurable |
| Barre inférieure | Barre inférieure distincte avec ses propres couleurs de fond, de texte et de liens |
Les menus du pied de page se gèrent depuis la rubrique Menus du panneau d’administration. Associez des groupes de menus aux colonnes du pied de page pour une flexibilité totale.
Mode sombre
Offrez à vos visiteurs un confort de lecture optimal, de jour comme de nuit.
Détection du système
Choisissez le mode Système par défaut et le thème suit automatiquement la préférence du système d’exploitation de chaque visiteur.
Bascule manuelle
Un bouton soleil/lune dans l’en-tête permet aux visiteurs de passer du mode clair au mode sombre. Leur choix est mémorisé d’une visite et d’une page à l’autre, sans flash au chargement.
Contrôles d’administration
Choisissez le mode par défaut (clair, sombre ou système) et indiquez si les visiteurs peuvent le changer. La configuration se trouve dans les Paramètres du thème.
Options de configuration :
- Mode par défaut :
light,darkousystem - Autoriser le changement de mode : affiche ou masque le bouton clair/sombre dans l’en-tête
- Les préférences des visiteurs sont enregistrées via
localStorageet conservées d’une session à l’autre
Prise en charge des add-ons
Le thème Studio inclut des modèles conçus sur mesure pour chaque add-on Larapen.
Blog & News
De belles listes d’articles, des vues d’article individuel, des catégories, des tags et des sections de commentaires, le tout harmonisé avec le thème.
Shop
Catalogue de produits, pages de détail des produits, panier et tunnel de paiement, avec une barre de sous-navigation thématisée.
Portfolio
Vitrine de portfolio en grille avec vues de détail et galeries d’images.
FAQ
Sections de questions-réponses organisées, avec disposition en accordéon et regroupement par catégorie.
Team
Profils des membres de l’équipe avec photos, biographies, fonctions et pages de détail, dans une disposition en cartes épurée.
Events
Listes d’événements avec dates, lieux, paiement de la billetterie et gestion des participants.
Pricing
Tableaux de prix avec comparaison des formules, listes de fonctionnalités et formules recommandées mises en avant.
Careers
Tableau d’offres d’emploi avec pages de détail et formulaires de candidature.
Appointment & Booking
Assistants étape par étape pour les rendez-vous et les réservations, avec vues de paiement, de confirmation et d’historique.
Forum
Forums de discussion communautaires avec catégories, sujets, recherche et fils de réponses.
HelpDesk
Base de connaissances avec articles classés par catégorie et workflow complet de tickets de support.
Et plus encore...
Classified, Glossary, Licenses, Partners, Quote Request, School Portal, Newsletter et la vérification Envato sont tous entièrement pris en charge.
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, options d’en-tête et de pied de page, 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 Studio 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.
- Studio reste installé : ses fichiers restent dans
extensions/themes/studio/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 Studio et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/studio/; - ses ressources publiées dans
public/themes/studio/; - ses fichiers téléversés dans
storage/app/public/themes/studio/; - 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 Studio 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/studio/. 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
Réponses aux questions courantes sur le thème Studio.
Le thème Studio est-il gratuit ?
Non. Studio est un thème premium sous licence payante. Vous pouvez l’acheter via le site web de BeDigit. Une fois installé, il fonctionne comme n’importe quel autre thème Larapen.
Puis-je changer les couleurs sans coder ?
Absolument. Choisissez une nouvelle couleur principale dans Apparence → Paramètres du thème et Studio recalcule automatiquement toutes les nuances qui en dépendent : boutons, liens, anneaux de focus, et même le dégradé animé du hero. Aucune modification de code n’est nécessaire.
Le thème fonctionne-t-il sur les appareils mobiles ?
Oui. Studio est entièrement responsive. Sur les petits écrans, la navigation se replie dans un menu hors-canevas, et chaque modèle de page s’adapte aux téléphones, tablettes, ordinateurs portables et écrans de bureau de toutes tailles.
Comment utiliser le constructeur de sections ?
Lorsque vous créez ou modifiez une page, choisissez le modèle Sectioned. Une interface s’affiche, dans laquelle vous pouvez ajouter des sections, les réorganiser par glisser-déposer et configurer individuellement le contenu, le fond et l’apparence de chacune.
Quelle est la différence entre les deux configurations d’en-tête ?
Les pages à sections (comme la page d’accueil) s’ouvrent généralement sur un hero : leur en-tête utilise donc par défaut la pilule transparente effet verre qui flotte au-dessus. Les pages standard (blog, boutique et autres pages d’add-ons) n’ont pas de hero : leur en-tête utilise donc par défaut une pilule sticky opaque. Chaque variante se configure indépendamment dans les Paramètres du thème.
Les pages du blog et de la boutique seront-elles assorties à mon thème ?
Oui. Chaque add-on dispose de modèles de page dédiés, assortis au thème. Lorsque vous activez un add-on comme Blog ou Shop, ses pages héritent automatiquement des couleurs, de la typographie et du langage visuel de Studio.
Puis-je injecter du CSS ou du JavaScript personnalisé ?
Oui. Dans Apparence → Paramètres du thème, vous trouverez des champs pour le CSS et le JavaScript personnalisés. Le code saisi ici est injecté dans chaque page, ce qui facilite l’ajout de petites personnalisations ou de scripts de suivi tiers.
Le thème prend-il en charge plusieurs langues ?
Oui. Studio est entièrement compatible multilingue, y compris avec les langues qui s’écrivent de droite à gauche. Le sélecteur de langue peut afficher des drapeaux ou une icône de globe, et peut même utiliser son propre méga-menu lorsque vous avez de nombreuses langues. Gérez les langues dans Paramètres → Langues.
Puis-je passer à un autre thème plus tard ?
Oui. Vous pouvez changer de thème à tout moment depuis le panneau d’administration. Votre contenu, vos pages et vos paramètres sont conservés : seule la présentation visuelle change.