Apercu
Le theme Creative est un theme audacieux et asymetrique concu pour les freelances, les agences et les professionnels creatifs qui souhaitent se demarquer. Riche en effets de parallaxe, en animations de defilement avancees et en une utilisation audacieuse de la couleur, il s'affranchit des grilles rigides pour creer un flux visuel dynamique sur chaque page.
Avec 42 sections preconcues, plus de 20 modeles de pages et un support complet des modules complementaires, le theme Creative offre une identite visuelle percutante tout en restant entierement personnalisable depuis le panneau d'administration.
Caracteristiques principales
- Mises en page asymetriques : Des compositions audacieuses et decalees qui attirent le regard et creent un flux visuel dynamique.
- Profondeur parallaxe : Des effets de parallaxe multicouches ou les arriere-plans, les images et le contenu se deplacent a des vitesses differentes lors du defilement.
- Typographie audacieuse : Titres en Space Grotesk associes au texte courant en Plus Jakarta Sans, avec des titres surdimensionnes et un espacement serre des lettres.
- Mode sombre complet : Un mode sombre entierement concu avec des fonds profonds (#1e1e2e), des ratios de contraste ajustes et des decalages de couleurs pour un confort nocturne.
- 42 sections : Des modeles de sections preconcus pour les bannieres hero, les fonctionnalites, les tarifs, les temoignages, les portfolios, les appels a l'action, et bien plus.
- Compatible avec les modules : Support complet des modeles pour Blog, Boutique, Portfolio, FAQ, Carrieres, Evenements, Forum, et plus encore.
- Animations au defilement : Les elements de contenu s'animent a l'apparition grace a IntersectionObserver pour une detection efficace et econome en batterie.
- En-tete fixe : Navigation fixe avec effet de flou d'arriere-plan et menu mobile hors ecran.
Details du design
Typographie
Deux polices Google Fonts soigneusement associees definissent l'identite Creative :
- Space Grotesk : Police sans-serif geometrique et moderne pour les titres. La graisse bold avec un espacement serre des lettres cree un impact visuel.
- Plus Jakarta Sans : Police sans-serif conviviale et lisible pour le texte courant. Ses courbes douces equilibrent les titres geometriques.
- Taille de base : 16px avec une hauteur de ligne de 1.7 pour une lecture confortable.
Les polices de titre et de texte peuvent etre modifiees dans les Parametres du theme. Toute police Google Font est prise en charge.
Palette de couleurs
| Couleur | Code hexadecimal | Utilisation |
|---|---|---|
| Primaire (Orange vif) | #ff6b35 |
Couleur de marque principale pour les boutons, liens et accents |
| Secondaire (Bleu profond) | #004e89 |
Elements secondaires et sections contrastantes |
| Accent (Bleu marine fonce) | #1a1a2e |
Couleur d'accent pour la profondeur et le contraste |
| Primaire clair | #ff8c5a |
Variante plus claire pour les etats de survol et les mises en valeur |
| Fond sombre | #1e1e2e |
Arriere-plan du mode sombre |
Personnalisation
Chaque aspect du theme Creative peut etre adapte depuis le panneau d'administration sous Apparence → Parametres du theme. Aucune connaissance en code n'est requise.
| Parametre | Valeur par defaut | Description |
|---|---|---|
| Couleur primaire | #ff6b35 | Couleur de marque principale (Orange vif) |
| Couleur secondaire | #004e89 | Couleur secondaire (Bleu profond) |
| Couleur d'accent | #1a1a2e | Couleur d'accent (Bleu marine fonce) |
| Police de titre | Space Grotesk | Police Google Font pour les titres |
| Police du texte | Plus Jakarta Sans | Police Google Font pour le texte courant |
| Style de mise en page | Large (1250px) | Mise en page large ou encadree |
| Style d'en-tete | Fixe | En-tete fixe ou statique |
| Mode sombre | Active | Activer le support du mode sombre |
| Parallaxe | Active | Activer les effets de parallaxe |
| Animations | Activees | Activer les animations au defilement |
| Retour en haut | Active | Afficher le bouton de retour en haut |
Modeles de pages
Chaque type de page dispose d'un modele dedie concu avec le langage visuel Creative. Les modeles principaux (Accueil, Page, Contact, Portfolio, Compte) sont toujours disponibles. Les modeles des modules (Blog, Boutique, Evenements, etc.) apparaissent automatiquement lorsque le module correspondant est installe et active.
Les modeles disponibles comprennent : Accueil (Sectionne), Page, Contact, Portfolio, FAQ, Equipe, Tarifs, Partenaires, Compte, Blog, Boutique, Reservation, Carrieres, Evenements, Forum, Petites annonces, Glossaire, Centre d'aide, Licences, Envato et Demande de devis.
Sections de contenu
Construisez vos pages en combinant les 42 blocs de sections. Chaque section est une unite de design autonome que vous pouvez melanger, associer et reorganiser. Les pages utilisant le modele "Sectionne" peuvent inclure autant de blocs que necessaire, et chaque section charge ses propres styles uniquement lorsqu'elle est utilisee.
Les sections couvrent de nombreuses categories, notamment les heros, l'introduction, les fonctionnalites, les services, le portfolio, les temoignages, les tarifs, l'equipe, les partenaires, les statistiques, la chronologie, la FAQ, les appels a l'action, le contact, la newsletter, la galerie, les cartes, la video, les apercu du blog et de la boutique, les evenements, les carrieres, la reservation, le forum, les utilitaires de mise en page, et des sections uniques au theme Creative comme l'Image Parallaxe et le Defilement Marquee.
Parallaxe et animations
Le theme Creative propose un design de mouvement subtil et reflechi qui ajoute de la profondeur et de l'energie :
- fadeInUp : Les elements montent depuis le bas avec un fondu — l'animation d'entree signature.
- scaleIn : Les elements grandissent depuis le centre avec un effet de ressort, utilise pour les icones et les boutons.
- slideInLeft : Entree horizontale depuis la gauche, utilisee pour les elements de mise en page asymetrique.
- rotateIn : Rotation avec echelle pour des entrees ludiques sur les elements decoratifs.
Les effets de parallaxe utilisent les transformations CSS et requestAnimationFrame pour des performances fluides a 60 fps sans bibliotheque externe. Les animations de defilement utilisent IntersectionObserver avec un easing cubic-bezier pour un mouvement naturel.
Le theme respecte automatiquement le parametre "prefers-reduced-motion" du navigateur. Vous pouvez egalement desactiver les animations et la parallaxe dans les Parametres du theme pour une presentation plus simple et statique.
En-tete et pied de page
En-tete fixe
La barre de navigation reste fixee en haut de la fenetre lors du defilement, avec un fond semi-transparent et un effet de flou. Elle prend en charge les menus deroulants jusqu'a 2 niveaux, la navigation mobile hors ecran et un selecteur de langue integre.
Pied de page multi-colonnes
Une zone de pied de page substantielle avec plusieurs colonnes configurables prenant en charge les menus dynamiques, l'inscription a la newsletter, les liens vers les reseaux sociaux, les mentions legales et un bouton de retour en haut. Configurez vos menus sous Admin → Menus.
Mode sombre
Le theme Creative comprend un design de mode sombre complet avec des fonds bleu marine profond (#1e1e2e), des cartes avec une transparence subtile (rgba blanc a 4%), du texte blanc a differentes opacites pour les titres, le texte courant et le texte attenue, et des bordures ultra-subtiles. La couleur orange primaire reste vibrante, offrant un contraste chaleureux sur les fonds sombres et froids.
Le mode sombre s'active automatiquement selon les preferences du systeme ou peut etre bascule via l'interrupteur de l'en-tete.
Design responsive
Le theme Creative est construit avec une approche mobile-first et des mises en page responsives. L'en-tete fixe se transforme en menu hamburger, les grilles s'empilent verticalement, et les gestes tactiles sont pris en charge pour les carrousels et les diaporamas. Le theme vise la conformite WCAG AA avec un contraste de couleurs adequat, un HTML semantique, des labels ARIA et une navigation complete au clavier.
Support des modules complementaires
Lorsque vous installez et activez un module Larapen, le theme Creative fournit automatiquement des modeles de pages et des blocs de sections correspondants. Les modules pris en charge incluent Blog, Boutique, Portfolio, Evenements, FAQ, Equipe, Tarifs, Reservation, Carrieres, Forum, Glossaire, Centre d'aide, Petites annonces, Partenaires et Licences.
Si vous installez un module pour lequel Creative n'a pas encore de modele personnalise, le module fonctionnera toujours en utilisant ses propres vues par defaut.