Eaque (going)

Eaque (going)

image

Table des matières

Vous avez choisi le thème Eaque

Ses particularités

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

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-image3:4 (vertical)
  • Blocs Colonnes5:3
  • Bloc News5:3
  • Bloc Event5:3
  • Bloc Image5:3
  • Bloc Video5:3
  • Bloc Profile1: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

💡
Conseils
  • 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.
💡
Il est important de bien choisir les couleurs des boutons et de la navigation pour que ceux-ci restent également bien visible au survol. N’hésitez pas à faire des tests! METTRE UN VISUEL

→ Application des couleurs non customisables

💡
Ce sont les paramètres de couleurs que vous ne pouvez pas choisir à partir des réglages de Minos

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

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 arrondis Fond plein

Capture

Bouton secondaire

Flèche à droite Bords arrondis Fond transparent + bordure

Capture

Bouton tertiaire

Flèche à droite Pas de fond

Capture

Déclinaisons

Voici des exemples qui utilisent des couleurs et des typographies différentes.

Déclinaison thème nourriture

image

Déclinaison ONG

image