Comment utiliser l'onglet Styles de votre site web Houzz ?

Il est important de bien comprendre les nombreuses fonctionnalités de la barre d’outils de votre site web Houzz. Cet article vous présente l’onglet « Styles », que vous trouverez dans la barre d’outils située à gauche. Pour une vue d’ensemble plus générale des barres d’outils de l’éditeur de site, consultez cet article.

L’onglet « Styles » est votre centre de contrôle pour gérer l’apparence visuelle des différents éléments de votre site. Les modifications effectuées ici s’appliquent de manière globale à l’ensemble du site.

Pour y accéder, trouvez et cliquez sur l’onglet « Styles » situé sur le côté gauche de votre écran.

Panneau des couleurs

Le panneau des couleurs vous permet de définir et de contrôler les couleurs de votre site web. Comme les autres paramètres de l'onglet « Styles », les modifications effectuées ici sont globales. Cela signifie que la mise à jour d’une couleur mettra automatiquement à jour tous les éléments de votre site utilisant cette couleur spécifique.

Pour modifier les couleurs globales de votre site, cliquez sur « Couleur » dans l’onglet « Styles ». Dans le panneau des couleurs, vous verrez la section « Couleurs du site ».

Vous y trouverez six pastilles de couleur qui définissent l’identité visuelle de votre site web.

Modifier une pastille de couleur
Pour modifier l’une des pastilles de couleur, cliquez simplement dessus pour ouvrir le sélecteur de couleurs.

Ici, vous pouvez :

• Ajuster la teinte : déplacez le curseur du bas pour modifier la couleur elle-même.
• Ajuster la saturation : faites glisser le sélecteur de couleur vers la gauche ou la droite pour contrôler l’intensité de la couleur.
• Ajuster la luminosité : déplacez le sélecteur vers le haut ou le bas dans le panneau principal pour éclaircir ou assombrir la couleur.
• Utiliser un code hexadécimal : si vous disposez d’une couleur précise correspondant à votre marque, vous pouvez coller son code hexadécimal dans le champ prévu à cet effet.

Une fois vos modifications terminées, cliquez simplement en dehors du sélecteur de couleurs pour enregistrer. Toutes les sections ou blocs de votre site utilisant cette couleur seront automatiquement mis à jour avec votre nouvelle sélection.

Utilisation des préréglages de couleur

Les préréglages de couleur sont des ensembles prédéfinis de couleurs appliqués à différents éléments de votre site web, tels que le texte, les boutons, les arrière-plans, et bien plus encore. Ils permettent de garantir une cohérence visuelle et de modifier rapidement le style global du site. Ces préréglages peuvent être appliqués facilement aux sections, encadrés, à l'en-tête et au pied de page.

Votre site comprend trois préréglages de couleur. Chacun d’eux est entièrement personnalisable.

Modifier un préréglage de couleur

Pour modifier un préréglage de couleur existant, cliquez sur le préréglage que vous souhaitez éditer afin d’ouvrir la fenêtre de préréglage de couleur.

Dans la colonne de gauche, vous verrez différentes catégories d’éléments. Dans la colonne centrale, vous trouverez les pastilles de couleur attribuées à chaque élément de la catégorie sélectionnée. Dans la colonne de droite, un aperçu vous montrera le rendu visuel de l’ensemble des couleurs choisies.

Cliquez sur une pastille pour ouvrir le sélecteur de couleurs.

En bas du sélecteur, vous verrez les pastilles principales de couleur de votre site. Si l’une d’elles est entourée en noir, cela signifie que la couleur de cet élément est liée à cette couleur globale du site. Toute modification de cette pastille principale mettra automatiquement à jour la couleur de l’élément dans le préréglage.

Depuis le sélecteur de couleurs, vous pouvez également choisir une couleur manuellement. Dans ce cas, la couleur devient indépendante et n’est plus liée aux couleurs globales de votre site.

Appliquer un préréglage de couleur

Les préréglages de couleur peuvent être appliqués aux sections, encadrés, à l'en-tête et au pied de page de votre site web.

Section

Pour appliquer un préréglage à une section, cliquez sur la section souhaitée dans l’aperçu du site. À droite, à côté du bouton « Modifier Section », vous verrez une petite icône en forme de pinceau.

Cliquez dessus, puis sélectionnez l’un de vos préréglages de couleur. Les couleurs de la section seront mises à jour instantanément dans l’aperçu.

Encadré

Vous remarquerez peut-être qu’un encadré à l’intérieur d’une section ne change pas toujours de couleur lorsque vous appliquez un préréglage à la section. Cela s’explique par le fait que les encadrés peuvent avoir leurs propres préréglages de couleur indépendants.

Si vous souhaitez modifier le préréglage de couleur d’un encadré, sélectionnez-le, puis cliquez sur l’icône du pinceau à côté de l’icône du crayon.

Choisissez un préréglage de couleur pour l’appliquer.

Remarque : Les encadrés disposent également d’une quatrième option, qui leur permet d’hériter du préréglage de couleur appliqué à la section dans laquelle ils se trouvent. Cela garantit une cohérence visuelle si vous le souhaitez.

En-tête et pied de page

L’en-tête et le pied de page peuvent également recevoir des préréglages de couleur, tout comme n’importe quelle autre section.

Pour les modifier, cliquez sur l’en-tête ou le pied de page, puis cliquez sur l’icône du pinceau à côté du bouton de modification. Choisissez un préréglage de couleur pour l’appliquer.

Panneau des typographies

Le panneau des typographies est l’endroit où vous définissez et contrôlez toutes les polices de votre site web.

Pour ajuster vos polices, cliquez sur « Typographie » sous l’onglet « Styles ». Vous verrez une liste de tous vos réglages de polices. Vous pouvez faire défiler vers le bas pour voir la liste complète.

Sélectionner des préréglages de typographie

Si vous souhaitez sélectionner rapidement un nouvel ensemble de choix typographiques pour votre site, vous pouvez le faire via le bouton « Préréglage de la typographie ».

Remarque : Le choix d’un préréglage de typographie remplacera toutes les sélections de polices que vous avez déjà effectuées.

Sélectionnez un autre préréglage pour l’appliquer à l’ensemble du site. Assurez-vous de cliquer sur « Sauvegarder ». Toutes les polices seront mises à jour pour refléter le nouveau préréglage.

Ajuster les styles de texte

Vous pouvez ajuster la typographie des éléments de texte à l’échelle du site, comme les titres, les paragraphes et les boutons.

Pour modifier une police, cliquez sur celle que vous souhaitez changer. Cliquez sur le menu déroulant « Famille de polices » pour choisir une nouvelle police.

Notre créateur de site utilise l’ensemble de la bibliothèque Google Fonts, qui contient plus d’un millier de polices uniques. Faites défiler la liste des polices populaires ou cliquez sur « Plus de polices » pour rechercher dans toute la bibliothèque.

Vous pouvez également ajuster la taille, l’épaisseur, l’espacement et les interlignes pour chaque police. Par exemple, augmenter la taille des titres les rend plus visibles, et ajuster l’espacement des paragraphes peut améliorer la lisibilité.

Paramètres supplémentaires

Au-delà des couleurs et de la typographie, l'onglet Styles propose d’autres paramètres pour vous aider à personnaliser davantage l’apparence de votre site web. Ceux-ci incluent des options pour la navigation, le pied de page, les boutons et liens, les icônes, les séparateurs, les formulaires, les avis et les projets.