Gestion des couleurs et de la typographie

TABLE DES MATIÈRES

Les couleurs de votre site se gèrent dans les settings de Minotaure: dans le menu de gauche du dashboard, cliquez sur ‘Minotaure’ tout en bas. Vous arriverez sur un dashboard avec un menu, dont l’onglet “Colors”.

Un choix de 5 couleurs

image

  • Couleur primaire
  • Couleur secondaire
  • Couleur tertiaire
  • Couleur sombre
  • Couleur claire

Ces couleurs-ci vont se retrouver dans tous les éléments (titres, liens, boutons) et couleurs d’arrière-plan de blocs et/ou du site complet selon certains thèmes.

Une fois que les couleurs ont été choisies, il ne vous reste plus qu’à passer à l’étape suivante : le choix de la typographie et les couleurs que vont prendre les éléments (titres, liens, navigations et boutons) de votre site. Cliquez sur l’onglet suivant: “Typography”.

🙂
Conseil : N’hésitez pas à faire appel à nos designers pour vous aidez dans cette phase cruciale. D’un thème à un autre, il y a des variantes au niveau de là où les couleurs sont utilisées.

💡
Important

N’oubliez pas de sauvegarder vos réglages avant de passer à l’étape suivante 🙂

La typographie

La sélection de la police

Pour les typographies, vous avez pour le moment à dispositions 12 polices qui sont toutes des “Google fonts”.

Les polices 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.

image

Vous pouvez choisir jusqu’à 3 polices différentes et les hiérarchiser comme telle:

  • la typographie primaire
  • la typographie secondaire
  • la typographie tertiaire

🙂
Pensons à l’accessibilité : Les utilisateur·trice·s malvoyant·e·s ou dyslexiques  adaptent parfois le contenu pour mieux lire. Privilégions les police sans-serif pour rendre la lecture plus agréable pour toutes et tous.

Attribution de la police et des couleurs aux différents éléments

Les couleurs et les polices choisies sont ensuite attribuer à chacun des éléments suivants:

image

Pour tous les éléments sus-cités, vous pourrez définir :

  • La couleur parmi les 5 dont vous disposez
  • La police parmi les 3 choisies
  • La graisse de la police : fine, normale ou grasse
  • Le style de la police : en italique ou normal
  • Le caractère de la police : tout en majuscule ou non
  • La taille de la police
  • La hauteur de la ligne de texte (très utile pour rendre les sites encore plus accessibles)

Pour les liens et la navigation, en plus des réglages mentionnés ci-dessus, vous pouvez également définir une couleur et une couleur de survole.

Lorsque le curseur passe au dessus des éléments, ils seront ainsi mis en avant pour les utilisateur·trice·s.

Pour les boutons, en plus de tous les réglages de la police déjà mentionnés précédamment, des précisions au niveau des couleurs sont à ajouter:

  1. Pour le bouton primaire :
    • Outre ses quelques particularités propre au thème, le bouton primaire a toujours (dans cet ordre):
      • Une couleur de texte a définir
      • Une couleur de fond à choisir
      • Une couleur de texte lors du survol à régler
      • Une couleur de fond lors du survol à fixer
      • image
  2. Pour le bouton secondaire :
    • Outre ses quelques particularités propre au thème, le bouton secondaire a toujours (dans cet ordre):
      • Une couleur de texte ET de bordure identique à choisir
      • Une couleur de texte lors du survol à régler
      • Une couleur de fond lors du survol à fixer
      • 🔥
        NB: le bouton secondaire n’a pas de couleur d’arrière plan → pensez-y lorsque vous l’utiliser dans un bloc qui prend la même couleur que la bordure et le texte. Cela peut aussi être un jeu de style et de créativité ;)
        image
  3. Pour le bouton tertiaire :
    • Outre ses quelques particularités propre au thème, le bouton tertiaire a toujours:
      • Une couleur de texte à choisir
      • Une couleur de texte lors du survol à régler
      • image

💡
Important

N’oubliez pas de sauvegarder vos réglages avant de passer à l’étape suivante 🙂

🔥
NB : Par défaut, aucune couleur n’est attribuée sur chacun des éléments. Il n’y a une sélection que si la bulle de couleur est plus grande que les autres. Sélectionnez donc toujours une couleur (et, lorsque mis à disposition, une couleur de survole même si elle est identique à l’état normal), autrement l’élément pourrait ne pas apparaître.

Les compositions

Vous souhaitez par exemple changer la couleur d’arrière plan d’un bloc en particulier sur une page pour le mettre en avant ? Utilisez l’outil “Composition” !

🙂
Vous n’avez pas l’obligation d’utiliser et de régler dès le début cet outil. Commencez par mettre en place vos différents blocs et une fois que vous avez la bonne disposition des blocs sur vos pages, vous pouvez employer l’outil à votre guise pour mettre en avant un ou des widgets/blocs.

Les “Compositions” se préparent dans les settings de Minotaure et s’appliquent ensuite sur un bloc lors de l’édition d’une page. Pour accéder à l’outil, rendez vous dans le menu de gauche du dashboard, cliquez sur ‘Minotaure’ tout en bas. Vous arriverez sur un dashboard avec un menu, dont l’onglet “Composition”.

image

  1. Que voulez-vous changer ?
  2. Juste les éléments qui ont la couleur primaire ?

    Juste les éléments qui ont la couleur tertaire ?

    Etc.

    → Reportez-vous alors dans les réglages de la police (l’onglet “Typographie”) et notez les couleurs qui ont été attribués pour les éléments. Revenez ensuite dans l’outil de composition.

  3. Donnez un titre pour votre composition: n’hésitez pas à être précis·e. Les utilisateur·trice·s ne le voient pas.
  4. Référencez-vous au descriptif des particularités des thèmes pour vous aider avant de choisir les couleurs de vos compositions et contactez notre équipe de designers si vous souhaitez un accompagnement.
  5. Une fois sauvegardée, appliquez la composition au bloc souhaité:
    1. Aller sur la page contenant le bloc a customizer et cliquer sur “éditer la page”
    2. Sélectionner le bloc sur lequel la composition doit s’appliquer
    3. Sur la droite, dans “Custom style”, sélectionner dans la liste déroulante la composition à mettre
    4. image

      image

🔥
NB : Les compositions ont un impact uniquement sur les couleurs des éléments et non la police (graisse, taille, caractère).

Exemple #1 - viser la simplicité

Selon les couleurs choisies, vous décidez de ne changer que la couleur sombre et la couleur claire en les inversant:

Couleurs par défaut

  • la couleur primaire = bleu
  • la couleur secondaire = bleu ciel
  • la couleur tertiaire = bleu clair
  • la couleur sombre = noire
  • la couleur claire = blanc

Couleur de la composition

  • la couleur primaire = bleu → restera inchangée
  • la couleur secondaire = bleu ciel → restera inchangée
  • la couleur tertiaire = bleu clair → restera inchangée
  • la couleur sombre = devient le blanc
  • la couleur claire = devient le noir
🙂
Pour les couleurs qui restent inchangées, pas besoin de sélectionner de nouveau la couleur par défaut.

Exemple #2 - une envie plus créative

Couleurs par défaut

  • la couleur primaire = bleu
  • la couleur secondaire = bleu ciel
  • la couleur tertiaire = bleu clair
  • la couleur sombre = noire
  • la couleur claire = blanc

Couleur de la composition

  • la couleur primaire = devient le blanc
  • la couleur secondaire = bleu ciel → restera inchangée
  • la couleur tertiaire = bleu clair → restera inchangée
  • la couleur sombre = devient le blanc
  • la couleur claire = devient le noir
🔥
NB : dans l’exemple ci-dessous, il y a un bouton tertiaire. La composition aura également un impact dessus. Vérifiez bien dans votre bloc tous les éléments et leurs couleurs respectives.
Avant ajout de la composition sur le bloc Colonnes
Avant ajout de la composition sur le bloc Colonnes
Après ajout de la composition sur le bloc Colonnes
Après ajout de la composition sur le bloc Colonnes

🙂
Vous avez plusieurs sites car plusieurs langues ? Les compositions créées

Plusieurs langues et les compositions

Les compositions créées dans les réglages de l’outil sont bien sauvegardées. Pas besoin de les re-créer mais il faudra par contre les appliquer de nouveau sur le bloc de la page de votre site dans l’autre langue.

Pratique, non ? Comme d’un site à un autre, tous les blocs et leur position peuvent variés, vous pouvez encore plus faire de personnalisations d’une langue à une autre.

Changer les couleurs des éléments du footer

Une envie de différencier le haut du bas de votre site ? C’est tout à fait possible sous Minos !

En effet, les couleurs des éléments et d’arrière-plan du footer sont customizables.

🙂
Pour le thème Eaque, le menu off-canvas et le footer sont liés. Ainsi, si des changements de couleurs sont opérés pour le footer du thème, ils s’appliqueront également sur le lenu en version mobile. Référez-vous aux particularités du thème Eaque pour plus de précisions des variables exploitées.
🔥
NB : Les compositions ne sont pas applicables sur le footer (ni le menu-off canvas du thème Eaque).

Par défaut, les couleur du footer sont déjà définies selon le thème de votre choix. Pour changer la couleur de fond et celle des éléments, rendez-vous dans les réglages de Minotaure, tout en bas. Vous arriverez sur un dashboard avec un menu, dont l’onglet “Footer”.

Selon le thème choisi, toutes les variables de couleurs ne sont pas exploitées. Référez-vous aux différents thèmes pour savoir lesquels sont employées.

image

Pour le thème Achille ici en exemple:

Il y a 3 variables de couleurs utilisées dans le footer

La couleur primaire pour l’arrière-plan

La couleur light/claire pour les titres et les menus

La couleur tertiaire pour le survol des éléments

💡
Il faudra alors modifier uniquement ces variables pour avoir un rendu différent.

Exemple - Un fond avec une couleur plus claire

Couleurs par défaut

🙂
Pour les couleurs qui restent inchangées, pas besoin de sélectionner de nouveau la couleur par défaut.

💡
Important

N’oubliez pas de sauvegarder vos réglages avant de passer à l’étape suivante 🙂

Avant modification des couleurs des éléments du Footer
Avant modification des couleurs des éléments du Footer

Après modification des couleurs des éléments du Footer
Après modification des couleurs des éléments du Footer

Le logo du footer ne passe plus avec le nouveau réglage des couleurs footer ? Vous pouvez changer le logo sur l’identité de votre site. Pour plus de renseignements, rendez-vous sur l’identité du site.

Plusieurs langues et les footer

Vous avez plusieurs sites ?

Tous comme les réglages pour les menus ou pour les réseaux sociaux & informations de contact, vous aurez donc deux onglets qui correspondent respectivement à la langue de vos sites.

Si vous voulez changer les couleurs des éléments, la manipulation expliquée ci-dessus devra être effectuée autant de fois qu’il y a de sites en langues différentes (cf. ci-contre un site bilingue).

image