Apercu
Elegant est un theme premium pour la plateforme Larapen CMS concu avec une esthetique editoriale. Il allie une typographie raffinee, des mises en page en grille inspirees des magazines haut de gamme et une palette de couleurs sophistiquee or et anthracite pour donner a votre site web un aspect soigne et premium.
Avec son systeme distinctif de double en-tete, ses 42 sections reutilisables et son support complet pour les 20 types de pages des modules Larapen, Elegant est le choix ideal pour les entreprises, les professionnels et les marques souhaitant projeter sophistication et autorite.
Caracteristiques principales
- Typographie editoriale : Les titres en Poppins associes au texte courant en Source Sans Pro creent une hierarchie raffinee et lisible au rendu premium.
- Mises en page magazine : Le contenu est agence dans des grilles sophistiquees et asymetriques inspirees du design editorial haut de gamme.
- 42 sections reutilisables : La plus grande bibliotheque de sections, permettant de creer des mises en page entierement personnalisees.
- Mode sombre sophistique : Un mode sombre soigneusement concu avec des tons bleu marine profond (#1a1a2e) qui preserve l'elegance.
- Systeme de double en-tete : Un en-tete distinctif a deux niveaux avec une barre utilitaire et la navigation principale, totalisant 112px d'espace soigneusement concu.
- Support complet des modules : Des modeles de pages prets a l'emploi pour les 20 modules Larapen, incluant Blog, Boutique, Portfolio, Evenements, Forum, et plus.
Details du design
Typographie
Le theme est livre avec deux polices Google Fonts soigneusement choisies qui creent une hierarchie editoriale :
- Poppins : Utilisee pour tous les titres, la navigation, les etiquettes et les boutons. Classique et elegante avec une precision geometrique.
- Source Sans Pro : Utilisee pour le texte courant, les paragraphes et le contenu long. Tres lisible avec des proportions raffinees.
Les deux polices peuvent etre modifiees dans les Parametres du theme. Toute police Google Font est prise en charge, et le systeme de variables CSS assure une application coherente des nouvelles polices sur tous les modeles et sections.
Palette de couleurs
| Couleur | Code hexadecimal | Utilisation |
|---|---|---|
| Or primaire | #c9a87c |
Boutons, bordures, effets de survol et accents dores sur tout le site |
| Anthracite | #2c2c2c |
Titres, texte principal et elements sombres |
| Accent bronze | #8b7355 |
Accents decoratifs et mises en valeur secondaires |
| Arriere-plan | #faf9f7 |
Fond de page blanc casse chaleureux |
| Mode sombre | #1a1a2e |
Fond bleu marine profond du mode sombre |
Toutes les couleurs du theme sont definies en tant que proprietes CSS personnalisees prefixees par --el-. Lorsque vous modifiez les couleurs dans les Parametres du theme, les variables CSS sont mises a jour automatiquement sur l'ensemble du site.
Personnalisation
Le theme Elegant est concu pour etre personnalisable sans toucher au code. Ajustez les couleurs, les polices et le comportement de la mise en page directement depuis la page Apparence → Parametres du theme du panneau d'administration.
- Largeur du conteneur : Mise en page large de 1320px par defaut
- Style d'en-tete : Double en-tete active par defaut (peut etre reduit a un seul niveau)
- Disposition des colonnes du pied de page : Jusqu'a 4 colonnes avec des groupes de menus dynamiques
- Bascule du mode sombre : Activer, desactiver ou definir en automatique
- Intensite des ombres : Opacite de 0,08 par defaut pour une profondeur subtile
Systeme de double en-tete
L'une des caracteristiques emblematiques du theme Elegant est son en-tete a deux niveaux, qui cree une sensation editoriale raffinee tout en offrant un espace genereux pour la navigation et les liens utilitaires.
- Barre superieure (~40px) : Coordonnees, selecteur de langue, liens sociaux et liens de connexion/inscription. Fond sombre avec texte subtil.
- Navigation principale (~72px) : Logo, liens du menu principal et bouton d'appel a l'action optionnel. Fond blanc avec une ligne d'accent doree en bas.
- Comportement mobile : La barre superieure se masque au defilement. La navigation principale devient un menu hamburger avec un elegant panneau coulissant hors ecran.
- Mode fixe : Au defilement, la navigation principale se fixe en haut avec une ombre subtile, tandis que la barre superieure disparait.
Vous pouvez desactiver la barre superieure dans les Parametres du theme pour utiliser un en-tete a un seul niveau. La navigation principale s'elargira legerement, et la hauteur totale de l'en-tete passera de 112px a environ 72px.
Modeles de pages
Elegant comprend 20 modeles de pages couvrant toutes les fonctionnalites principales et les modules. Chaque modele suit le langage de design editorial avec des mises en page inspirees des magazines.
| Modele | Type | Description |
|---|---|---|
| Page | Coeur | Page de contenu standard avec typographie elegante et espacement raffine |
| Sectionne | Coeur | Constructeur de pages modulaire utilisant le systeme de 42 sections |
| Contact | Coeur | Formulaire de contact avec integration de carte et mise en page editoriale |
| Portfolio | Coeur | Grille de portfolio style magazine avec effets de survol |
| Blog | Module | Liste de blog editoriale avec article vedette en hero |
| Boutique | Module | Catalogue de produits avec fiches produits raffinee |
| Evenements | Module | Liste d'evenements avec calendrier et vues detaillees |
| FAQ | Module | Questions frequentes en style accordeon |
| Forum | Module | Forums de discussion communautaires |
| Equipe | Module | Profils des membres de l'equipe en grille editoriale |
| Tarifs | Module | Tableau de tarifs avec comparaison de fonctionnalites |
| Partenaires | Module | Vitrine de logos de partenaires et clients |
| Carrieres | Module | Offres d'emploi avec mises en page elegantes |
| Reservation | Module | Planification de rendez-vous et reservations |
| Petites annonces | Module | Annonces classees avec navigation par categories |
| Glossaire | Module | Definitions de termes par ordre alphabetique avec recherche |
| Centre d'aide | Module | Base de connaissances avec articles classes par categories |
| Licences | Module | Affichage de gestion des licences logicielles |
| Demande de devis | Module | Formulaire de demande de devis personnalise |
| Envato | Module | Affichage d'integration avec la marketplace Envato |
Sections de contenu
Les sections sont les elements constitutifs du theme Elegant. Chaque section est un composant autonome et reutilisable qui peut etre ajoute a n'importe quelle page via le modele de page Sectionne. Avec 42 sections, Elegant dispose de la bibliotheque la plus complete parmi tous les themes Larapen.
Les sections comprennent : Hero Banniere, Hero Diaporama, Hero Video, A propos, A propos Etendu, Services, Grille de Services, Fonctionnalites, Fonctionnalites Alternees, Grille Portfolio, Portfolio Masonry, Galerie, Temoignages, Carrousel de Temoignages, Equipe, Equipe Detaillee, Tarifs, Comparaison de Tarifs, FAQ, FAQ par Categories, Contact, Contact avec Carte, Derniers Articles, Articles en Vedette, Newsletter, Appel a l'action, Banniere CTA, Compteur de Statistiques, Statistiques Visuelles, Chronologie, Etapes du Processus, Logos Partenaires, Carrousel Partenaires, Bloc de Contenu, Contenu en Colonnes, Separateur, Espaceur, Carte Pleine Largeur, Video Integree, Banniere Image, Accordeon et Onglets.
Pied de page
Le theme Elegant utilise un pied de page epure qui maintient l'esthetique editoriale, prenant en charge jusqu'a 4 colonnes alimentees par des groupes de menus depuis le panneau d'administration. Il comprend une section marque avec logo, description et liens vers les reseaux sociaux, une barre inferieure avec mentions legales, et une integration optionnelle de newsletter lorsque le module Newsletter est actif.
Mode sombre
Le mode sombre d'Elegant va au-dela d'une simple inversion des couleurs. Il utilise une palette bleu marine profond avec des tons superposes qui creent de la profondeur et maintiennent la lisibilite. Les accents dores ressortent magnifiquement sur le fond sombre.
- Tons bleu marine profond : #1a1a2e (base), #141428 (plus sombre), #222240 (surface plus claire)
- Respect de l'attribut
data-bs-theme="dark"de Bootstrap - Bouton de preference utilisateur dans l'en-tete, memorise via localStorage
- Respect de la preference systeme
prefers-color-scheme - Les 42 sections s'adaptent au mode sombre
- Les images et les medias conservent un contraste adequat
Le mode sombre peut etre active, desactive ou defini en "automatique" (suivre la preference du systeme) depuis les Parametres du theme. Vous pouvez egalement choisir d'afficher ou de masquer le bouton de basculement pour les utilisateurs. Le mode sombre n'affecte que l'interface publique ; le panneau d'administration dispose de son propre parametre de mode sombre independant.
Design responsive
Chaque modele de page, section et composant est construit selon l'approche mobile-first en utilisant la grille responsive de Bootstrap 5.3.8. Le double en-tete se transforme en un elegant menu mobile hors ecran, et toutes les grilles magazine s'empilent harmonieusement sur les ecrans plus petits.