Retranscription :
Bonjour à tous, je suis Carlota de l’agence Wiiv et dans cette vidéo, nous allons voir comment configurer votre charte graphique (votre identité visuelle) sur votre site WordPress.
Avant de commencer, on va faire un point rapide sur ce qu’est une charte graphique et ensuite nous verrons l’importance de configurer celle-ci sur votre site et comment le faire.
Pour commencer, une charte graphique c’est l’identité de votre marque et cette identité elle est traduite souvent à la travers un logo, à travers une typographie, à travers des couleurs.
Pour illustrer cette idée nous allons prendre l’exemple des JO 2024. Pour ces nouveaux Jeux Olympique, qui auront lieu à Paris, il y a bien sûr eu une nécessité de décliner une nouvelle charte graphique. Et pour cela, on voit ici dans le site de Paris 2024, que l’on a les différents éléments qui composent cette charte graphique. Ces éléments se composent tout d’abord d’un emblème, d’un logo, mais aussi d’une palette de couleurs. Par exemple ici, nous avons une palette de couleurs qui se compose de couleurs principales avec le doré, avec le blanc, avec le noir. Mais également de couleurs secondaires qui vont aider à la communication et ces couleurs secondaires, elles sont utilisés pour traduire l’énergie de l’évènement et évoquer aux visiteurs des ressentis. Après les couleurs, on a également une police de caractère qui est associée à notre charte graphique, à notre identité de marque. Dans le cas de JO 2024 il s’agit d’un typographie qui emprunte un style ART déco.
Pourquoi il est important de définir une charte graphique pour toutes marques ? Tout simplement pour arriver à garder une cohérence dans toutes nos communications et avoir une image qui est vite identifiable par les utilisateurs. Notre charte graphique permet également de s’assurer que les différents éléments visuels soit correctement utilisés.
Pour cela, dans votre site web, il est très important de pouvoir configurer les éléments qui composent votre branding de marque et pour cela, Elementor vous permet de le faire pour garder une image de marque cohérente tout au long de votre site.
Mais comment faire ? Rendez-vous sur notre site WordPress pour voir comment configurer tout ça. Ici, nous sommes dans notre site de démo puis nous nous rendons sur n’importe quelle page nous cliquons sur ‘Modifier avec Elementor’. Nous arrivons alors sur la plateforme de modification d’une page Elementor.
Ce qui va nous intéresser aujourd’hui c’est d’aller dans ce qu’on appelle le design system. Pour cela on va cliquer ici sur le petit menu hamburger, situé en haut à gauche de votre écran, et on va aller dans ‘réglages du site.’
Dans un premier temps nous allons nous concentrer sur les couleurs de notre marque. Lorsque je clique sur les couleurs globales, on a ici un ensemble ensemble d’éléments qui vont nous permettre de configurer nos couleurs. Pour cela, ça va être très simple. On va venir cliquer ici sur le petit carré de couleur et on va pouvoir venir chercher notre couleur.
Si votre charte graphique a été définie par un une agence de branding comme la notre, on va vous fournir un document avec les codes couleurs de votre identité de marque. Ces codes peuvent être sous le format hex ou rgba pour vous permettre de venir chercher la couleur que vous souhaitez simplement. Donc c’est souvent un ensemble de 5 chiffres qui définissent votre code couleur vous aurez ici uniquement à venir le taper.
Par exemple ici, nous allons prendre le code couleur du violet Wiiv que nous allons rentrer dans le champs HEX. Pour retrouvez la couleur que vous souhaitez, vous avez également la possibilité d’utiliser la pipette. Mais qu’est ce que c’est la pipette de couleurs ? Il s’agit tout simplement d’un outils qui va vous permettre d’identifier une couleur en selection la pipette puis en se rendant sur l’element que l’on souhaite copier. Dans notre exemple, si je n’avais pas le code couleur de mon vert, je pourrais cliquer sur ma pipette, me rendre sur l’élément vert, cliquer dessus et voilà, elle m’identifierait la couleur ainsi que le code couleur associé.
Ici, vous allez donc créer les différentes couleurs qui composent votre charte graphique. Vous pouvez bien sûr venir changer les noms de votre couleur en cliquant simplement sur le nom et en venant lui donner un autre nom. Vous pouvez ici ajouter autant de couleurs que vous le souhaitez. Donc par exemple, on a vu dans la charte graphique des JO 2024, on avait sept couleurs secondaires, donc on pourrait venir ici ajouter autant de couleurs que l’on souhaite, leur donner un nom et venir chercher notre couleur en question et l’attribuer. Une fois que cela est fait, on n’oublie pas de mettre à jour, bien sûr, et on va revenir en arrière puisque maintenant on va se concentrer sur les polices de notre site.
On va cliquer ici sur ‘Polices globales’ pour arriver sur le système de configuration des polices de caractères. Maintenant, on va venir configurer celles-ci.
Lorsqu’à l’agence Wiiv, on travaille sur une charte graphique pour un client, très souvent on conseille d’avoir deux typographies différentes.
Pourquoi ? Principalement pour avoir un contraste entre la police de nos titres et celle de nos textes et ainsi permettre une meilleure lisibilité. Pour la police de nos titres, on va pouvoir utiliser une typo un peu plus originale, plus marquée, avec plus de caractère, puisqu’elle va être utilisée pour des titres courts et donc elle peut être impactante. Il peut être très intéressant d’utiliser une police un peu spécifique. Ensuite, pour la police du texte, on conseille plutôt d’avoir une typographie qui soit en accord avec l’image de votre marque mais également qui soit très lisible, puisqu’elle va être utilisée pour des textes plus longs et donc il faut qu’elle soit confortable à la lecture pour les utilisateurs.
On va venir ici configurer nos différentes polices. Comme pour les couleurs, on peut venir changer ici le nom de notre police puis en cliquant sur l’icône du crayon on va venir chercher notre police parmi la famille de polices que nous propose Elementor. Il s’agit de l’ensemble des polices Google. Donc on a un large choix pour notre police de titre.
Si vous disposez d’une police par exemple Adobe ou autre, on pourra la rajouter à votre site, mais d’une façon différente et ensuite venir la chercher ici.
En tout cas pour notre exemple, on va venir chercher notre police principale, on va définir son épaisseur, si elle va être utilisée en majuscule, en minuscule, etc. Ainsi que les différents styles.
On va également définir notre police secondaire. Donc, par exemple, celle du haut, ça peut être celle de nos titres et ici, celle de nos textes.
Pour finir on va venir également configurer des types de textes qui seront utilisés sur notre site. On peut, par exemple, venir définir comment sera la configuration de nos titres, nos sous-titres, et venir ici configurer la police de ces éléments là, et donc venir ici concrètement leur donner une certaine taille, une certaine épaisseur, etc. Et de cette façon, tout au long de notre site, on donnera la même police à tous nos titres, à tous nos sous-titres, à tous nos textes, et ainsi, on aura une cohérence globale dans notre site.
Après avoir fini de configurer vos polices globales, vous venez ici, mettre à jour et on va retourner sur notre page donc en cliquant ici tout simplement sur la petite croix on va se retrouver au niveau de notre page et ici ce qu’on va pouvoir venir faire c’est mettre la police que l’on a configuré. On sélectionne ici notre element de titre puis on va se rendre sur l’onglet Style.
Donc ici, pour l’instant, on avait configuré tout simplement une couleur en cliquant sur l’élément de configuration, mais si on clique sur la petite map monde qui apparait ici, on va arriver sur notre couleur globale qui a été définie et donc on va l’attribuer à notre titre.
On l’attribue à notre titre et on va faire de même chose pour notre typographie et on va lui donner le style que l’on a configuré pour les titres.
Et voilà, nous pouvons visualiser notre modifications sur la colonne de droite.
On va ensuite faire la même chose pour tous les éléments texte de notre site en leur attribuant une couleur et une police globale. De cette façon ou pourra garder une cohérence global sur tous les titres de notre site et éviter toute variation de couleurs/police. Mais au-delà de pouvoir garder une cohérence, cela nous permettra le jour où on modifie la charte de notre site de venir modifier notre site plus simplement puisque plutôt que d’aller chercher chacun de nos éléments un par un et de modifier le style pour chacun, on pourra se rendre dans les réglages du site, retourner dans les couleurs et définir que le vert est remplacé par du bleu foncé. Et de cette façon je vois qu’en fait tous mes titres et tous mes éléments qui avaient ma police globale verte ont été changés par la nouvelle couleur. Et de cette façon je gagne du temps lors des modifications.
Et voilà comment configurer votre charte graphique au sein de votre site WordPress et comment ça peut vous aider à gagner du temps.
