Table des matières
- Vous avez choisi le thème Achille
- Ses particularités
- Ses paramètres globaux
- Ratio image @Zoe Naniot
- Conseils de choix de couleurs @Zoe Naniot
- Application des variables de couleurs inhérentes au thème
- Pied de page
- Typographies
- Boutons
- Navbar
- Exemples de sites web utilisant ce thème
- Rapport d’activités 2021 de VIVAQUA
Vous avez choisi le thème Achille
Ses particularités
Voir la démo du thème : https://minos.minotaure.io/achille/
Achille est un thème originale de par sa pattern en forme de vague entre les blocs, l’alternance de couleurs de fond et ses bords arrondis. Avec son design original et joyeux, il offre une expérience unique aux visiteurs. Ce thème pensé au départ autour du milieu aquatique peut également convenir à de nombreux sujets.
Ses paramètres globaux
- Le fond de page utilise la couleur Claire
- Les titres H1 (les titres les plus importants) sont centrés. Les autres titres sont alignés à gauche
- Les images utilisées dans les widgets sont à bords arrondis et ont un masque gradient du clair vers le sombre
- Il y a une succession des sections avec alternance des couleurs de fond (couleur tertaire et claire).
- Un calque en forme de vague délimite les widgets et assure la succession des sections
Ratio image @Zoe Naniot
- Bloc Hero
- Centré → 5:3
- Gauche/droit → 16:9 adaptable en fonction du bloc texte à l’intérieur
- Arrière-plan → 16:9 adaptable en fonction du bloc texte à l’intérieur
- Bloc Text-image → 4:3
- Blocs Colonnes
- 4 colonnes → 4:3
- 3 colonnes → 5:3
- 2 colonnes → 16:9
- Bloc News → 5:3
- Bloc Event → 5:3
- Bloc Image → 16:9
- Bloc Video → 16:9
- Bloc Profile → 1:1
- Bloc Form → N/A
- Bloc Fact and Figure → N/A
Conseils de choix de couleurs @Zoe Naniot
- La succession des sections utilise une alternance des couleurs de fond (couleur Tertiaire et Claire). 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 (et respectant un niveau suffisant de contraste). 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 tertiaire et claire sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
- Pour une question de contraste, la couleur primaire doit être plus foncée que les couleurs secondaire et tertiaire.
Application des variables de couleurs inhérentes au thème
Couleur Primaire
Utilisée par défaut pour la couleur du:
- l’arrière-plan du Pied de Page
- la couleur de fond du menu du haut
Couleur Secondaire
Utilisée par défaut pour la couleur du:
Aucun paramètres
Couleur Tertiaire
Utilisée par défaut pour la couleur du:
- des blocs pairs dans la page
- du fond des sous-menus
- de fond du menu mobile (off-canvas)
Couleur Sombre
Utilisée par défaut pour la couleur:
- la bordure des éléments du formulaire
Couleur Claire
Utilisée par défaut pour la couleur du:
- des blocs impairs dans la page
- de fond de la page
- La couleur de fond du menu principal (menu primaire)
- du texte (titre, menu et icon) du footer
Pied de page
Il y a 3 variables de couleurs utilisées dans le footer
- La couleur primaire pour l’arrière-plan
- La couleur Claire pour les titres et les menus
- La couleur Tertiaire pour le survol des éléments
Les couleurs des éléments et d’arrière-plan du Pied de page sont également customizables: pour plus de renseignements voir comment changer les couleurs des éléments du footer
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
Bouton primaire
Flèche à droite Bords peu arrondis Fond plein
Capture
Bouton secondaire
Flèche à droite Bords peu arrondis Fond transparent + bordure
Capture
Bouton tertiaire
Flèche à droite Pas de fond
Capture
Navbar
Nous vous conseillons d’utiliser en priorité la barre de navigation du bas pour contenir votre menu principal (ainsi que le menu Boutons et le sélecteur de langues). Voir plus d’informations sur la gestion des menus et l’affichage des menus dans le Header.
Exemples de sites web utilisant ce thème
Voici des exemples qui utilisent des couleurs et des typographies différentes.
