Apercu
Olive est un theme premium pour Larapen CMS concu autour d'une esthetique de tons terreux attenues. Il presente une palette soigneusement selectionnee de vert sauge, terre cuite et argile sur un fond creme chaleureux, creant une atmosphere organique et accueillante pour votre site web.
Le theme utilise une typographie premium avec Outfit pour les titres et Satoshi pour le texte courant, charge via l'API Fontshare. Chaque element visuel, des coins arrondis aux ombres aux tons chauds, contribue au caractere organique distinctif du theme. Avec 42 sections, 20 modeles de pages et un mode sombre complet aux tons chauds, Olive s'adapte magnifiquement a tout type de site web tout en conservant son caractere terreux.
Caracteristiques principales
- En-tete transparent : L'en-tete se superpose elegamment a votre contenu, creant une experience visuelle fluide qui fond la navigation avec les sections hero.
- Typographie premium : Les titres en Outfit associes au texte courant en Satoshi via l'API Fontshare offrent une experience de lecture epuree, moderne et chaleureuse.
- Palette de tons terreux : Vert sauge, terre cuite et argile sur un fond creme chaleureux creent une esthetique organique inspiree de la nature.
- 42 sections : Une bibliotheque complete de sections joliment concues, pretes a etre combinees pour creer n'importe quelle mise en page.
- Mode sombre chaleureux : Le mode sombre utilise des tons sombres chaleureux au lieu du noir pur, conservant le caractere organique.
- Compatible avec les modules : Support complet de tous les modules Larapen avec 20 modeles de pages.
Details du design
Typographie
- Outfit : Police sans-serif moderne et arrondie pour les titres. Chargee depuis Google Fonts.
- Satoshi : Police sans-serif epuree et geometrique pour le texte courant. Chargee via l'API Fontshare (gratuite, aucune cle API requise).
- Taille de base : 16px.
Palette de couleurs
| Couleur | Code hexadecimal | Utilisation |
|---|---|---|
| Vert sauge | #7c8c6e | Couleur primaire pour les boutons, liens et accents |
| Terre cuite | #c67a5c | Couleur secondaire pour les mises en valeur et les appels a l'action |
| Argile | #a0845c | Couleur d'accent pour les elements decoratifs et les badges |
| Creme chaleureux | #faf8f5 | Couleur de fond |
| Sauge clair | #9aab8b | Variante plus claire du vert sauge |
| Sauge fonce | #5e6b53 | Variante plus sombre pour les etats de survol |
| Terre cuite claire | #d9987f | Variante plus claire de la terre cuite |
| Terre cuite foncee | #a85e42 | Variante plus sombre pour les etats actifs |
| Texte principal | #3d3a36 | Texte courant principal |
| Bordure | #e5e0d8 | Bordures et separateurs |
Toutes les couleurs de la palette Olive sont deliberement attenuer et desaturees, creant le rendu organique et mat qui distingue ce theme. Evitez d'ajouter des couleurs hautement saturees ou fluo, car elles entreront en conflit avec l'esthetique terreuse.
Personnalisation
Rendez-vous dans Panneau d'administration → Apparence → Parametres du theme pour personnaliser ces options :
- Couleur primaire : Vert sauge (#7c8c6e) par defaut. Utilisee pour les boutons, les liens et les accents.
- Couleur secondaire : Terre cuite (#c67a5c) par defaut. Utilisee pour les mises en valeur et les appels a l'action.
- Couleur d'accent : Argile (#a0845c) par defaut. Utilisee pour les elements decoratifs et les badges.
- Couleur de fond : Creme chaleureux (#faf8f5) par defaut. Peut etre ajustee a tout ton chaud.
- Style de mise en page : Large (conteneur de 1250px) par defaut.
- Transparence de l'en-tete : Activer ou desactiver la superposition transparente de l'en-tete.
- Mode sombre : Basculer le support du mode sombre aux tons chauds.
Olive utilise des proprietes CSS personnalisees prefixees par --ol- pour une personnalisation facile.
Vous pouvez les surcharger dans votre CSS personnalise pour ajuster le theme sans modifier les fichiers principaux.
En-tete transparent
Le theme Olive presente un en-tete transparent qui se superpose au contenu de votre page plutot que de le pousser vers le bas, creant une sensation sophistiquee en plein ecran ou les sections hero s'etendent jusqu'au sommet de la fenetre.
- L'en-tete commence entierement transparent avec du texte blanc sur les fonds sombres.
- Lorsque l'utilisateur fait defiler, l'en-tete acquiert un fond creme chaleureux avec une ombre subtile.
- Les liens de navigation passent du blanc a la couleur de texte du theme.
- Le logo peut avoir des variantes claire/sombre separees pour chaque etat.
- La transition est fluide et utilise des transitions CSS pour un rendu soigne.
Vous pouvez desactiver l'en-tete transparent dans les Parametres du theme et utiliser un en-tete solide standard a la place. Lorsque vous utilisez l'en-tete transparent, commencez les pages avec une section hero ayant une image de fond ou une couleur sombre pour que le texte blanc de l'en-tete reste visible.
Modeles de pages
Modeles principaux
| Modele | Fonction |
|---|---|
| Page | Pages de contenu standard |
| Sectionne | Pages d'atterrissage basees sur des sections |
| Contact | Formulaire de contact avec carte |
| Portfolio | Galerie et detail de portfolio |
| Equipe | Vitrine des membres de l'equipe |
| FAQ | Questions frequentes |
| Partenaires | Logos de partenaires et clients |
| Tarifs | Plans et tableaux de tarifs |
| Demande de devis | Formulaire de demande de devis |
| Compte | Pages du compte utilisateur |
Modeles des modules
| Modele | Module |
|---|---|
| Reservation | Module Reservation |
| Carrieres | Module Carrieres |
| Petites annonces | Module Petites annonces |
| Envato | Module Envato |
| Evenements | Module Evenements |
| Forum | Module Forum |
| Glossaire | Module Glossaire |
| Centre d'aide | Module Centre d'aide |
| Licences | Module Licences |
| Boutique | Module Boutique en ligne |
Sections de contenu
Olive comprend 42 sections qui sont les elements constitutifs de vos pages. Utilisez le modele de page Sectionne dans le panneau d'administration pour glisser et organiser les sections dans l'ordre souhaite. Chaque section est concue avec l'esthetique terreuse d'Olive, avec des coins arrondis (0.625rem), des ombres chaudes et un espacement organique.
Les categories de sections comprennent :
- Hero : Banniere, Diaporama, Video, Divise
- A propos : A propos, A propos Etendu
- Fonctionnalites : Grille, Icones, Liste
- Services : Services, Services Detailles
- Portfolio : Grille, Masonry, Carrousel
- Equipe : Grille, Carrousel
- Temoignages : Cartes, Carrousel
- Tarifs : Tableaux, Bascule
- FAQ : Accordeon, Deux colonnes
- Partenaires : Grille de logos, Carrousel
- Contact : Formulaire, Divise
- CTA : Appel a l'action, Banniere, Newsletter
- Statistiques : Compteur, Mise en valeur
- Chronologie : Chronologie, Etapes du processus
- Galerie : Grille, Visionneuse
- Blog : Derniers articles, Articles en vedette
- Utilitaires : Carte, Bloc de contenu, Separateur, Espaceur, HTML personnalise
Les sections alternent entre le fond creme chaleureux et un creme legerement plus fonce pour un rythme visuel.
Pied de page
Le pied de page utilise une disposition en 4 colonnes avec un style chaleureux. Il comprend des informations de marque avec logo et liens vers les reseaux sociaux, des liens de navigation provenant de groupes de menus configurables, et une barre inferieure avec le texte de copyright, le selecteur de langue et les liens de navigation inferieure. Le pied de page utilise un fond sombre aux tons chauds (pas du noir pur) qui complete la palette de tons terreux.
Mode sombre
Contrairement aux themes qui utilisent du noir pur pour le mode sombre, Olive utilise des tons sombres chaleureux qui se fondent naturellement avec la palette de tons terreux.
| Element | Couleur |
|---|---|
| Arriere-plan | #1e1c1a |
| Surface | #2a2725 |
| Bordure | #383432 |
| Texte | #e8e2db |
- Respect de la preference systeme de l'utilisateur via
prefers-color-scheme. - Un basculement manuel est disponible dans la navigation de l'en-tete.
- La preference est enregistree dans le stockage local et persiste entre les visites.
- Les 42 sections disposent de styles dedies au mode sombre.
- Les images peuvent optionnellement avoir une luminosite reduite en mode sombre pour le confort visuel.
- Les couleurs d'accent vert sauge, terre cuite et argile sont legerement eclaircies en mode sombre pour un contraste adequat.
Design responsive
Olive est entierement responsive et mobile-first. Les 42 sections, les modeles de pages et l'en-tete transparent s'adaptent harmonieusement du mobile au bureau. L'en-tete se reduit en menu mobile sur les ecrans plus petits, et les mises en page en grille s'empilent verticalement pour une experience de visualisation optimale.
Support des modules complementaires
Olive comprend des modeles stylises pour tous les principaux modules Larapen. Lorsqu'un module est active dans le panneau d'administration, les modeles stylises d'Olive sont automatiquement utilises. Chaque modele de module suit l'esthetique terreuse avec une typographie coherente, des coins arrondis et des ombres chaudes.
Les modules pris en charge incluent Pages, Portfolio, Equipe, FAQ, Partenaires, Tarifs, Blog, Boutique, Reservation, Carrieres, Evenements, Forum, Centre d'aide et Glossaire. Pour les modules non listes, le systeme utilise les vues par defaut du module, qui fonctionnent toujours mais peuvent ne pas correspondre exactement a l'esthetique terreuse.