Gestion des couleurs et de la typographie

TABLE DES MATIÈRES

• Un choix de 5 couleurs
• La typographie
• La sélection de la police
• Attribution de la police et des couleurs aux différents éléments
• Les compositions
• Exemple #1 - viser la simplicité
• Exemple #2 - une envie plus créative
• Plusieurs langues et les compositions
• Changer les couleurs des éléments du footer
• Exemple - Un fond avec une couleur plus claire
• Plusieurs langues et les footer

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

• 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”.

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”.

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

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

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:

• Les paragraphes
• Les titres allant du H1 au H4
• Les liens
• La navigation du ou des menu(s)
• Les 3 types de boutons (cf. Boutons et CTAs pour plus d’information)

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

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é ;)

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

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

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” !

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”.

1. Que voulez-vous changer ?

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.

2. Donnez un titre pour votre composition: n’hésitez pas à être précis·e. Les utilisateur·trice·s ne le voient pas.
3. 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.
4. 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

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:

Exemple #2 - une envie plus créative

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.

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.

Pour le thème Achille ici en exemple:

Exemple - Un fond avec une couleur plus claire

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

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).