Table des matières
- Vous avez choisi le thème Eaque
- Ses particularités
- Paramètres globaux
- Quel est le format idéal pour vos images?
- Couleurs
- → Application des couleurs non customisables
- Pied de page et Menu Off canvas
- Typographies
- Boutons
- Déclinaisons
Vous avez choisi le thème Eaque
Ses particularités
Démo live : https://minos.minotaure.io/eaque
Eaque est un thème originale grâce à son background parsemé de bulles colorées, son alternance de couleurs de fond et ses arrondis. C’est un thème élégant et polyvalent qui s’adaptera à tous les types de contenus et qui mettra en valeur votre travail.
Paramètres globaux
- Les titres et description de section sont centrés
- Le fond de page utilise la couleur secondaire
- Les images utilisées dans les widgets sont à bords arrondis
- Il y a une alternance des couleurs de fond des blocs (couleur Primaire et Secondaire).
- Cercles transparents positionnés aux extrémités gauche et droite de l’interface (couleur tertiaire à 5%)
- Un calque d’une opacité de 50% assombrit le Héro
- Les Heros avec images alignés à gauche ou à droite affichent celles-ci sur 50% de la largeur, format carré.
Quel est le format idéal pour vos images?
- Bloc Hero
- Centré → 16:9
- Gauche/droit → 1:1
- Arrière-plan → 2:1
- Bloc Text-image → 3:4 (vertical)
- Blocs Colonnes → 5:3
- Bloc News → 5:3
- Bloc Event → 5:3
- Bloc Image → 5:3
- Bloc Video → 5:3
- Bloc Profile → 1:1
- Bloc Form → N/A
- Bloc Fact and Figure → N/A
Couleurs
Concernant le choix de couleur, le contraste doit rester important entre la couleur des titres et textes et la couleur de fond afin de garantir la meilleure lisibilité. Certaines combinaison de couleur “texte-fond” sont a éviter: exemples → du vert et du rouge, du jaune et du blanc, etc. N’hésitez pas à faire des tests!! Voici un outil pour vérifier le contraste
- Succession des sections avec alternance des couleurs de fond (couleurs primary et secondary). Pour cette raison, il est conseillé que ces deux couleurs aient des teintes très proches l’une de l’autre pour envisager une alternance agréable visuellement. Il est néanmoins possible de jouer avec les “compositions” de Minos pour changer localement cette logique.
- Nous conseillons pour le texte et les titres d’utiliser une couleur sombre si les couleurs réglées derrière les variables de couleurs primaire et secondaire sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
- Pour une question de contraste, la couleur tertiaire doit être plus foncée que les couleurs primaires et secondaires.
→ Application des couleurs non customisables
Couleur Primaire
Utilisée par défaut pour la couleur du:
- La couleur du fond de la navigation du haut
- La couleur des blocs impairs dans la page
Couleur Secondaire
Utilisée par défaut pour la couleur du:
- La couleur de fond de la page
- La couleur des blocs pairs dans la page
- La couleur de fond de la navigation du bas
Couleur Tertiaire
Utilisée par défaut pour la couleur du:
- La couleur des cercles aux extrémités de l’interface (opacité 5%)
- la couleur du bouton langue (bordure et flèche seulement) dans les menus
- la couleur des icons du bloc Profil
Couleur Sombre
Utilisée par défaut pour la couleur du:
- Fond du sous-menu dans la barre de navigation du haut
- L’arrière-plan du Pied de Page
- L’arrière-plan du menu off-canvas en mobile
Couleur Claire
Utilisée par défaut pour la couleur du:
- fond du sous-menu dans la barre de navigation
- couleur du texte du menu off-canvas en mobile
Pied de page et Menu Off canvas
Les couleurs des éléments et d’arrière-plan du Pied de page et du menu-off canvas sont également customizables: pour plus de renseignements voir comment changer les couleurs des éléments du footer
Il y a 3 variables de couleurs utilisées dans le footer et le menu off-canvas
- La couleur sombre pour l’arrière-plan
- La couleur light pour les icons, les titres et le texte des menus (et la barre de séparation des menus dans le menu off-canvas)
- La couleur secondaire pour le survol des éléments
Typographies
- Vous pouvez choisir jusqu’à 3 polices différentes pour l’ensemble des textes de votre site.
- Nous vous conseillons d’utiliser la police principale pour les titres
- Nous vous conseillons d’utiliser la police secondaire pour les paragraphes, liens et la navigation. Celle-ci sera de préférence classique pour favoriser la lisibilité des textes.
- La police tertiaire s’applique par défaut aux citations, aux catégories, et au titre du Pied de page.
- Pour une bonne utilisation de la hiérarchie des titres, nous vous conseillons d’utiliser uniquement le style H1 pour le titre du premier bloc de chaque page. Les titres des autres blocs utilisent alors le style H2. (cf. Conseils à la rédaction)
- Pour le menu secondaire, le texte prendra en compte le réglages de la police du menu principal (cf. Attribution de la police et des couleurs aux différents éléments), à l’exception des paramètres suivants: - la taille du texte est de 12px - le texte est en majuscule
Boutons
Trois niveaux de boutons ne signifie pas seulement 3 esthétiques différentes, mais surtout 3 niveaux d'importance. En savoir plus sur les boutons
Déclinaisons
Voici des exemples qui utilisent des couleurs et des typographies différentes.