Styles du site Wix Studio : couleurs et typographies pour tout le site 🎨

Les styles du site sont le point de départ du design dans Wix Studio. Vous y définissez vos couleurs et vos typographies une seule fois, et chaque élément relié à ces styles se met à jour automatiquement.

En bref : ouvrez le panneau Styles du site depuis la barre latérale gauche de l’éditeur. Il contient 4 onglets : Couleurs, Typographie, Largeur maximale et Transitions de page. Réglez-les avant de construire vos pages : vous gagnerez un temps considérable.

Où trouver les styles du site dans Wix Studio ?

Cliquez sur l’icône Styles du site dans la barre latérale gauche de l’éditeur Wix Studio. Le panneau s’ouvre avec ses 4 onglets :

Les couleurs du site : la palette de Wix Studio

Chaque site a au moins 6 couleurs par défaut, chacune avec un rôle précis :

Vous pouvez aller jusqu’à 25 couleurs, les renommer et saisir chaque teinte en HEX, RGB ou HSB, ou avec la pipette. Attention : modifier une couleur change instantanément tous les éléments qui l’utilisent. Dans l’Inspecteur, choisissez ensuite vos couleurs parmi les couleurs du thème plutôt qu’en saisie libre.

La typographie du site

L’onglet Typographie contient 9 styles de texte : 6 titres et 3 paragraphes. Pour chacun, vous réglez la police, la taille, le gras, l’italique, l’interlignage, l’espacement des lettres et la couleur.

Une option permet de faire varier la taille du texte proportionnellement à l’écran, avec une taille minimale et maximale en pixels. C’est très utile pour que les grands titres restent lisibles sur mobile. Si vous changez une police dans la liste des polices, tous les styles qui l’utilisent sont mis à jour.

Un texte devient relié à la typographie du site quand vous lui attribuez un style depuis l’Inspecteur. Voir aussi les textes Wix Studio.

Les limites des styles du site

Les styles de couleurs et de typographie s’appliquent à tous les points de rupture : on ne peut pas encore définir un style différent pour la tablette ou le mobile. Pour adapter une taille de texte à l’écran, utilisez plutôt l’option de taille proportionnelle.

Autre piège : le style « Titre 1 » est un style visuel. Vérifiez aussi la hiérarchie réelle de vos titres pour le SEO, avec le vérificateur de site.

Mon avis de webdesigner sur les styles du site

C’est la première chose à régler sur un nouveau site Wix Studio, avant même de poser une section. Un site dont les couleurs et les titres sont reliés aux styles se modifie en quelques clics. À l’inverse, un site où chaque texte a été mis en forme à la main devient pénible à faire évoluer : il faut tout reprendre élément par élément.

Mon conseil : limitez-vous à 2 polices et à une palette courte. Si votre marque n’a pas encore de charte graphique, commencez par là. Voir notre agence de graphisme.

Questions fréquentes sur les styles du site Wix Studio

Comment changer la police de tout le site sur Wix Studio ?

Ouvrez Styles du site, onglet Typographie, et remplacez la police dans la liste des polices : tous les styles de texte qui l’utilisaient sont mis à jour.

Pourquoi un texte ne change pas quand je modifie les styles ?

Il n’est probablement pas relié à un style de texte. Sélectionnez-le et attribuez-lui un style depuis l’Inspecteur.

Peut-on supprimer une couleur du site ?

Oui, en choisissant une couleur de remplacement. Les couleurs par défaut utilisées par les applis ne se suppriment pas, mais peuvent être remplacées.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : à propos des styles du site, Wix : travailler avec la typographie du site.