Achille (going)

Achille (going)

image

Table des matières

image

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
image
  • 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
image
⚠️
On ne peut pas changer les icônes et les pictos.

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

💡
Conseils d’utilisation
  • 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

💡
Par défaut non customisable à partir des réglages de Minos

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

⚙
Les polices installées ne vous inspirent pas ? Nous pouvons en rajouter une pour vous. Nous vous conseillons des google fonts et il est toujours possible de trouver une typographie équivalente à celle de votre charte graphique.
  • 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.
      • 💡
      Vous pouvez tout à fait utiliser la même police partout ou pour deux niveaux (ex: la même sélection pour police secondaire et tertiaire).
  • 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.

Rapport d’activités 2021 de VIVAQUA