Définition des couleurs et des styles du site Web

Comment définir les couleurs et les styles à l'échelle du site pour les boutons, le texte, les titres et les liens
Les couleurs et les styles sont spécifiés dans les paramètres du site et s'appliquent à toutes les pages. Grâce aux styles, il est plus facile de maintenir la cohérence dans la conception de votre site Web et de respecter l'identité approuvée par le concepteur.
Comment configurer les couleurs sur l'ensemble du site
En savoir plus
Comment configurer les styles dans le projet
En savoir plus
Comment configurer les styles pour les couleurs, la typographie et les boutons
En savoir plus
Comment modifier les styles pour les couleurs, la typographie et les boutons
En savoir plus
Comment appliquer des styles pour les couleurs, la typographie et les boutons
En savoir plus
Comment transférer des styles d'un projet à un autre
En savoir plus
Comment transférer la page avec les styles
En savoir plus
Paramètres de couleur
Pour définir les couleurs et les styles du site Web, accédez à « Paramètres du site » et cliquez sur l'onglet « Couleurs et styles ».
Pour définir une couleur pour tous les titres, textes, liens ou arrière-plans de page sur l'ensemble du site, cliquez sur le champ souhaité et sélectionnez manuellement une couleur dans l'un des trois formats proposés ou saisissez directement un code couleur.
La couleur peut être spécifiée dans trois formats : HEX, RGB, HSL.
Pour modifier le style de tous les liens du site Web, cliquez sur le lien « Paramètres supplémentaires ». Dans les paramètres, spécifiez la largeur et la couleur du soulignement, ainsi que les styles des liens au survol.
Paramètres de style
Pour créer votre propre bibliothèque de styles pour le projet, cliquez sur le bouton « Gérer les styles ».
Dans le panneau de gestion des styles, vous pouvez ajouter une couleur, un style typographique et un bouton. Vous pouvez également télécharger les styles créés et les importer dans un autre de vos projets.
Ajouter des styles 
Pour ajouter un nouveau style au projet, cliquez sur « Gérer les styles » et sélectionnez l'une des options suivantes : Créer un style de couleur, Créer un style typographique ou Créer un style de bouton.
Si vous disposez déjà de styles et souhaitez en ajouter un autre, cliquez sur l'icône « + » à côté de l'option « Couleur », « Typographie » ou « Bouton » pour en ajouter un nouveau. Le nouveau style apparaîtra à côté du précédent.
Pour modifier un style, cliquez dessus.
Styles d'édition
Couleur. Lorsque vous créez un style de couleur, spécifiez un nom et une description qui seront ensuite affichés dans les styles de projet.
Typographie. Lors de la création d'un style typographique, vous pouvez définir les paramètres de couleur du texte, la taille de la police pour différentes résolutions d'écran, le type de police, le poids et d'autres paramètres de police.

En haut de l'éditeur de style typographique, vous pouvez prévisualiser une police. Pour voir comment la police s'affiche sur un appareil mobile, sélectionnez la plage dont vous avez besoin dans le panneau des paramètres des points de rupture.
Pour modifier les points d'arrêt, cliquez sur l'icône en forme d'engrenage. Un menu contenant les périphériques par défaut s'ouvrira.
Bouton. Lorsque vous créez un style de bouton, vous pouvez également choisir d'afficher une icône ou un texte enveloppant. Vous pouvez également définir les paramètres typographiques, le style au survol et d'autres paramètres de base.

Le style du bouton peut également être prévisualisé sur différents appareils, et les points d'arrêt peuvent être modifiés.
Utilisation des styles
Couleur. Pour utiliser le style de couleur créé, cliquez sur n'importe quel élément auquel vous souhaitez attribuer une couleur, puis sélectionnez Styles du projet dans l'éditeur.
Sélectionnez le style dont vous avez besoin, et il sera automatiquement appliqué au bloc. Le champ avec la couleur spécifiée affichera le nom de votre style, ainsi qu'une icône indiquant que le style de couleur du projet a été appliqué au champ.
Typographie. Pour utiliser le style typographique créé, dans les paramètres du bloc, sélectionnez l'onglet « Typographie » et cliquez sur « Styles ».

Dans le menu contextuel, cliquez sur le style dont vous avez besoin, et il sera automatiquement appliqué au bloc. Pour accéder aux paramètres du style, cliquez sur « Aller à la bibliothèque de styles ».
Si aucune description n'est spécifiée pour le style, ses paramètres s'affichent : nom de la police, taille et interligne.
Le style typographique peut être appliqué à n'importe quel bloc contenant des éléments textuels. Il n'est pas nécessaire d'utiliser l'onglet « Typographie » dans les paramètres du bloc.
Après avoir appliqué des styles pour la typographie, seules les options qui n'ont pas été spécifiées pour ce style seront affichées dans les paramètres. Après avoir modifié ces options, les changements ne s'appliqueront qu'au bloc actuel et n'affecteront pas le style typographique défini dans le projet.
Important: si un paramètre n'a pas été spécifié dans le style appliqué et que vous l'avez spécifié directement dans le bloc, un conflit se produira si vous ajoutez ultérieurement le même paramètre avec les mêmes valeurs ou d'autres valeurs au même style. Dans ce cas, le paramètre spécifié dans le bloc prévaudra.
Si un style est déconnecté du bloc, tous les champs de paramètres de l'élément de texte seront remplis avec les valeurs spécifiées pour le style précédemment appliqué.
Bouton. Pour utiliser le style de bouton créé, dans les paramètres du bloc, sélectionnez l'onglet « Bouton » et cliquez sur « Styles » à côté des préréglages.

Dans le menu contextuel, cliquez sur le style dont vous avez besoin, et il sera également appliqué automatiquement.
Comme précédemment, seuls les paramètres qui n'ont pas été spécifiés dans le style lui-même s'affichent dans les paramètres du bouton. Vous pouvez les modifier ou les conserver tels quels.
Pour ajouter une icône au bouton, rendez-vous dans la section « Contenu » du bloc.
À côté du bouton, un emplacement pour l'icône apparaîtra. Cliquez dessus pour ajouter une icône. Un menu s'ouvrira, dans lequel vous trouverez différentes options d'icônes : flèches, emojis, Tilda , The Noun Project, ainsi que la possibilité de télécharger vos propres fichiers d'icônes.
Pour modifier l'affichage de l'icône au survol du bouton, cliquez sur l'option « Ajouter une icône au survol ».
Sélectionnez une icône et enregistrez les modifications.
Pour supprimer une icône, cliquez sur son image à côté du texte du bouton. Sélectionnez l'onglet « Icône » et cliquez sur la corbeille. Enregistrez les modifications et l'icône disparaîtra.
Si vous devez modifier un style après l'avoir appliqué dans le bloc, accédez aux paramètres du site, sélectionnez l'onglet « Couleurs et styles » et modifiez le style. Veillez à enregistrer les paramètres du projet et à le republier pour que les modifications soient appliquées.

Dans les blocs où le style a été utilisé, les modifications de style seront appliquées automatiquement. Il n'est pas nécessaire de modifier ou de réattribuer le style dans le bloc.
Dans le bloc, vous pouvez combiner le style de couleur et le style de typographie/bouton dans le même élément. Par exemple, si le style de typographie ne spécifie pas de couleur de texte, vous pouvez attribuer ce style dans les paramètres du bloc et définir le style de couleur pour la couleur.
Importation, exportation et suppression de styles à partir du projet
Pour télécharger le style du projet, cliquez sur le bouton « Gérer les styles » et sélectionnez l'option souhaitée. Un fichier portant le nom du projet et l'extension .tildastyles sera téléchargé sur votre appareil.
Vous ne pouvez utiliser qu'un fichier avec l'extension .tildastyles pour le télécharger dans les styles du projet, les autres fichiers ne peuvent pas être utilisés.
Pour télécharger un style, sélectionnez également l'option correspondante dans le menu contextuel. Les nouveaux styles seront ajoutés aux styles créés précédemment dans le projet. Les styles créés précédemment dans le projet ne seront ni supprimés ni mis à jour.
Vous pouvez télécharger le style vers Tilda autre Tilda ou vers votre propre projet uniquement. Vous ne pouvez pas modifier manuellement les fichiers .tildastyles.
Si vous supprimez un style du projet puis enregistrez les paramètres, le style continuera d'être appliqué aux paramètres du bloc pendant les deux semaines suivantes. Une notification apparaîtra dans les blocs où le style était précédemment appliqué.

Au bout de deux semaines, le style sera complètement supprimé du projet et les paramètres du bloc seront réinitialisés.
Transférer la page avec les styles vers un autre projet
Si vous avez ajouté des styles à une page dans un projet et que vous devez ensuite transférer cette même page vers un autre projet dans le compte actuel ou un autre compte, la page sera transférée avec les styles.

Lors du transfert, les styles seront copiés vers le nouveau projet afin que les blocs s'affichent correctement.
Lisez ce guide pour en savoir plus sur la manière de transférer une page vers un autre projet dans le compte actuel ou dans un autre compte.
La limite totale pour la création de styles de tous types dans le projet est de 500.
Lorsque vous essayez de transférer une ou plusieurs pages avec des styles vers un projet au sein du même compte où la limite de styles a été ou sera atteinte, un message d'erreur s'affiche. Pour terminer le transfert de la page, vous devez supprimer les styles supplémentaires dans un autre projet.
Lorsque vous transférez une ou plusieurs pages avec des styles vers un projet dans un autre compte où la limite a été atteinte, les pages ne seront pas transférées. Lorsque vous cliquez sur Accepter, une notification s'affiche pour vous informer que la limite a été dépassée et que vous devez supprimer les styles supplémentaires.
Fabriqué le
Tilda