| | |

Kadence WP : Faites-vous ces erreurs sur votre site web ?

Kadence est un outil incroyable qui vous offre un contrôle total sur le design de votre site web, mais même les meilleurs outils peuvent être mal utilisés. Au fil des années, j’ai remarqué de nombreuses erreurs courantes. La bonne nouvelle ? Ces erreurs sont faciles à corriger !

Kadence WP : Faites-vous ces erreurs sur votre site web ?

Dans cet article, je vais passer en revue les erreurs les plus fréquentes commises par les utilisateurs de Kadence WP, allant des paramètres globaux mal configurés aux problèmes de typographie, et je vous montrerai exactement comment les corriger.
Que vous ayez des soucis de couleurs incohérentes, de largeur de contenu ou de choix de polices, ces conseils rapides vous aideront à peaufiner votre site et à lui donner un aspect cohérent et professionnel.

Plongeons directement dans le sujet pour assurer la réussite de votre site !

Vous avez un projet ? Parlons-en !

Mauvaise utilisation des paramètres globaux et individuels

L’un des plus grands avantages de Kadence est son puissant Customizer, qui permet de définir des styles globaux pour votre site. Ces paramètres garantissent une cohérence sur l’ensemble de votre site, notamment pour les couleurs et la typographie.

Cependant, une erreur fréquente est d’ignorer ces paramètres globaux et de modifier chaque page individuellement.

Erreur fréquente

  • Au lieu de définir leurs couleurs de marque dans le Customizer, certains utilisateurs saisissent manuellement les codes couleurs dans différentes sections de leur page d’accueil.
  • Plutôt que de configurer les polices globalement, ils les modifient directement dans chaque bloc.

Cette approche entraîne des incohérences et du travail supplémentaire à long terme. Si vous souhaitez modifier votre palette de couleurs ou changer de thème, vous devrez ajuster chaque élément un par un, ce qui est fastidieux.

Bonnes pratiques

1- Définissez vos couleurs principales dans le Customizer

  • Rendez vous dans : Apparence > Personnaliser > Couleurs & Polices > Couleurs
  • Si votre marque possède des couleurs supplémentaires, vous pouvez les ajouter globalement pour un accès plus facile. Je vous explique ça juste après.

2- Utilisez les paramètres typographiques globaux

  • Configurez les polices pour les titres, paragraphes et boutons directement dans le Customizer.
  • Évitez de modifier les polices au niveau des blocs sauf en cas de nécessité absolue.

Astuce : Ajoutez des couleurs personnalisées dans Kadence

Vous avez besoin de plus de couleurs que ce que propose la palette du customizer ? Aucun problème, voici comment les ajouter de façon globale :

  • 1- Modifiez une page ou un article dans WordPress.
  • 2- Cliquez sur l’icône K en haut à droite.
  • 3- Vous verrez votre palette globale ainsi qu’un bouton Ajouter une couleur.
  • 4- Ajoutez vos couleurs personnalisées ici : elles seront disponibles sur l’ensemble de votre site, vous évitant ainsi de copier/coller des codes HEX à chaque fois.

En appliquant ces bonnes pratiques, vous obtiendrez un design propre, cohérent et facile à mettre à jour au fil du temps.

Mauvais paramétrage de la palette de couleurs

Configurer correctement votre palette de couleurs Kadence est essentiel pour un rendu harmonieux et professionnel.

Erreur courante : Utiliser des couleurs avec une opacité réduite

Une des erreurs les plus fréquentes est d’attribuer des couleurs à la palette avec une opacité inférieure à 100 %. Cela peut provoquer des incohérences et un rendu visuel non maîtrisé.

Solution

  • Assurez-vous que chaque couleur de votre palette globale est à 100 % d’opacité.
  • Si vous souhaitez appliquer un effet de transparence à certains éléments (arrière-plan, superposition), ajustez l’opacité au niveau du bloc concerné et non dans la palette.

Astuce

Pour obtenir des teintes plus claires ou plus foncées sans réduire l’opacité, utilisez un outil comme Canva ou Adobe color pour explorer des variations de couleurs.

Choix typographiques inappropriés

La typographie joue un rôle majeur dans l’apparence et la lisibilité de votre site. Kadence propose par défaut des polices bien assorties, mais de nombreuses erreurs peuvent nuire à l’expérience utilisateur.

Erreurs fréquentes

  • Associer des polices qui ne se complètent pas, créant un effet désordonné.
  • Mélanger des polices avec et sans empattement (serif et sans-serif) de manière déséquilibrée.
  • Utiliser des polices trop décoratives ou en italique pour le texte principal, rendant la lecture difficile.
  • Appliquer des majuscules ou du gras partout, réduisant la lisibilité.

Bonnes pratiques

1- Choisissez avec soin vos polices pour le texte et les titres

  • Définissez les polices du corps de texte et des titres globalement.
  • Elles doivent être harmonieuses et adaptées à votre style de marque.
  • Évitez les polices décoratives pour le texte principal.

2- Utilisez les polices décoratives avec parcimonie

  • Si vous voulez une touche d’originalité, utilisez une police script uniquement pour les titres H6 (sous-titres, citations, signatures).
  • Évitez de l’utiliser pour les titres principaux ou le corps de texte.

3- Identifiez la structure des titres dans Kadence

  • H1 → Titre des pages et articles
  • H2 → Titres des articles dans la vue d’archive
  • H3 → Titres des sections comme “Articles similaires” ou “Commentaires”
  • H4, H5, H6 → Personnalisables pour les sous-titres et les mises en avant

Astuce

N’hésitez pas à vous appuyer sur des associations de police reconnues comme sur Adobe Font ou en utilisant des outils comme Fontpair.

Espacement incorrect des lettres (Kerning) dans la typographie

Si vous vous demandez : « Qu’est-ce que le kerning ? », il s’agit de l’espacement entre les lettres d’un mot. Cela peut sembler être un détail insignifiant, mais un mauvais kerning peut donner à votre typographie un aspect maladroit et difficile à lire.
Et malheureusement, cette erreur est bien trop courante.

Erreurs fréquentes

Le problème le plus courant que je remarque concerne les polices script.
Rappelez-vous de vos cours d’écriture cursive à l’école : chaque lettre était censée s’enchaîner naturellement avec la suivante. Il en va de même lorsque vous utilisez une police script sur votre site web !
Si l’espacement entre les lettres est trop important dans une police script, cela brise le flux naturel de l’écriture et donne un rendu désordonné et peu élégant.

Ce problème se retrouve notamment dans :

  • Vos réglages typographiques par défaut
  • Vos logos et éléments de branding

Bonnes pratiques

  • Si vous utilisez une police script, assurez-vous que les lettres sont bien connectées. Vérifiez vos paramètres typographiques et ajustez l’espacement des lettres pour que l’écriture reste fluide et naturelle.
  • Pour le texte du corps et les titres, évitez un espacement excessif entre les lettres. Une bonne typographie doit être équilibrée et facile à lire. Ni trop serrée, ni trop espacée.
  • Lors de la création d’un logo, vérifiez le kerning manuellement. De nombreux outils de design appliquent un espacement automatique aux lettres, ce qui peut nécessiter des ajustements pour un rendu plus harmonieux.

En prêtant attention au kerning, vous pouvez améliorer instantanément la lisibilité et le professionnalisme de votre site web et de votre identité visuelle. Un bon espacement des lettres donne un aspect plus soigné, plus élégant et plus agréable à lire.

Astuce

Si vous souhaitez perfectionner votre branding, n’hésitez pas à vous former ou lire mes articles de blog.
Je peux également être à vos cotés et vous accompagner dans la refonte ou la création de votre logo et de votre identité visuelle.

Wordpress

Création de sites internet

  • Gestion/Accompagnement
  • Charte graphique
  • SEO
  • Sécurisé et performant
  • Conforme RGPD
  • Modules/Plugins selon votre projet et le cahier des charges.
  • Hébergement et maintenance
  • Support humain et réactif

Des conseils, astuces ou envie de suivre l’actu digitale ? C’est par ici !

*1 à 2 newsletters maximum sont envoyées par mois et toujours sur l’actualité marketing, la création digitale, l’IA et bien d’autres.

Wordpress

Création de sites internet

  • Gestion/Accompagnement
  • Charte graphique
  • SEO
  • Sécurisé et performant
  • Conforme RGPD
  • Modules/Plugins selon votre projet et le cahier des charges.
  • Hébergement et maintenance
  • Support humain et réactif

Mauvaise gestion des largeurs de contenu

L’une des erreurs les plus courantes en matière de mise en page concerne les paramètres de largeur de contenu, notamment sur mobile et desktop. Bien paramétrer ces réglages garantit que votre site s’affiche correctement et reste fonctionnel sur tous les écrans.

Largeurs sur mobile

Un problème fréquent que je rencontre dans les demandes de support concerne l’ajustement manuel de la largeur du déclencheur du menu mobile, ce qui perturbe l’affichage sur ordinateur.

Où trouver ce paramètre ?

Allez dans Apparence > Personnaliser > En-tête > Onglet Apparence > Taille d’écran pour passer à l’en-tête mobile.

Erreur fréquente

  • Modifier manuellement ce champ alors que ce n’est pas nécessaire.

Bonnes pratiques

  • Laissez ce champ vide sauf si vous avez une raison spécifique d’afficher plus tôt le menu mobile (ce qui est rare). Un réglage inutile peut provoquer l’apparition du menu mobile sur de grands écrans alors qu’il ne devrait pas.

Largeurs de contenu

Un autre problème récurrent concerne les largeurs de contenu mal définies, ce qui impacte la répartition des espaces blancs sur les côtés de l’écran.

Une question fréquente : « Pourquoi y a-t-il autant d’espace blanc sur mon site ? »
Réponse : Sur les grands écrans, un site bien structuré génère naturellement plus d’espace blanc sur les côtés.

Erreur fréquente

  • Régler l’ensemble du site en Pleine largeur (Full Width). Cela étire excessivement le contenu sur les grands écrans, nuisant à l’expérience utilisateur.

Bonnes pratiques

  • Le contenu doit être centré pour une meilleure lisibilité sur tous les appareils.

Où régler la largeur de contenu dans Kadence ?

Bien paramétrer ces réglages garantit une mise en page équilibrée et améliore l’expérience utilisateur :

  • Pages : Apparence > Personnaliser > Mise en page des articles/pages > Mise en page par défaut
  • Articles de blog : Apparence > Personnaliser > Mise en page des articles uniques > Mise en page par défaut
  • Pages d’archives : Apparence > Personnaliser > Mise en page des archives > Mise en page des archives
  • Archives boutique WooCommerce : Apparence > Personnaliser > WooCommerce > Catalogue produits > Mise en page des archives
  • Fiches produits WooCommerce : Apparence > Personnaliser > WooCommerce > Mise en page produit unique > Mise en page produit

Options de mise en page Kadence WP

Kadence propose cinq options de mise en page, et savoir quand utiliser chacune d’elles est essentiel pour un design propre et fonctionnel.

Mise en page

Utilisation idéale

Normale (Recommandé)

Centre le contenu avec un espacement naturel. Idéal pour la plupart des pages.

Étroite

Parfait pour les pages riches en texte (Mentions légales, CGV, Politique de confidentialité), améliorant leur lisibilité.

Pleine Largeur (Non recommandé)

À éviter sur des pages entières : cela étire trop le contenu sur les grands écrans. Utilisez plutôt des blocs de mise en page en rangée (Row Layout) pour des sections en pleine largeur.

Avec barre latérale

Idéal pour les articles de blog, pages boutique WooCommerce ou archives, si vous souhaitez une navigation supplémentaire.

Mauvaise utilisation des styles de contenu

Kadence propose deux styles principaux pour le contenu : Encadré (Boxed) et Non encadré (Unboxed). Bien que ces deux options aient leur utilité, l’erreur la plus fréquente est une mauvaise utilisation du style Encadré, ce qui peut entraîner un design désorganisé et incohérent.

Contenu encadré (Boxed)

  • Le contenu est placé dans une boîte, généralement avec un fond blanc et un arrière-plan plus clair autour.
  • Exemple : Utilisé dans les pages d’archives ou les articles de blog uniques pour bien séparer visuellement le contenu de l’arrière-plan.
  • Meilleure utilisation : Archives de blog & articles individuels où la lisibilité est essentielle.

Contenu non encadré (Unboxed)

  • Le contenu est affiché directement sur l’arrière-plan blanc, sans effet d’encadrement.
  • Meilleure utilisation : Pages classiques du site où vous souhaitez un contrôle total sur la mise en page, sans restriction visuelle inutile.

Kadence propose cinq options de mise en page, et savoir quand utiliser chacune d’elles est essentiel pour un design propre et fonctionnel.

Erreurs fréquentes : Appliquer un contenu « Boxed » à toute une page

Cela crée une mise en page incohérente avec des sections encadrées entre des sections pleine largeur.

Bonnes pratiques

  • Utilisez Boxed uniquement pour les archives et articles de blog.
  • Préférez Unboxed pour les pages normales, et gérez la mise en page via les blocs de Kadence.

Où ajuster les paramètres de style de contenu dans Kadence ?

  • Pages : Apparence > Personnaliser > Mise en page des articles/pages > Mise en page > Style de contenu
  • Articles de blog uniques : Apparence > Personnaliser > Mise en page des articles uniques > Mise en page > Style de contenu
  • Pages d’archives : Apparence > Personnaliser > Mise en page des archives > Mise en page > Style de contenu
  • Archives boutique WooCommerce : Apparence > Personnaliser > WooCommerce > Catalogue produits > Style de contenu
  • Fiches produits WooCommerce : Apparence > Personnaliser > WooCommerce > Mise en page produit unique > Style de contenu

Astuce : modifier la couleur d’arrière-plan pour le contenu encadré

Si vous utilisez le contenu encadré, vous pouvez ajuster sa couleur d’arrière-plan ici :

Apparence > Personnaliser > Couleurs & Polices > Couleurs > Arrière-plan du site
Cette couleur correspond généralement à la couleur #8 de votre palette globale Kadence.

Bien que le choix du style de contenu soit une préférence de design, je recommande fortement d’éviter l’encadrement sur les pages.
En utilisant les blocs de mise en page en rangée de Kadence, vous bénéficiez d’une flexibilité totale pour structurer votre site et obtenir une mise en page moderne, fluide et esthétique.

Kadence WP : De petits ajustements pour un grand impact !

Votre site web est le reflet de votre marque. En évitant ces erreurs courantes (paramètres globaux mal configurés, choix typographiques inadaptés, mauvaise gestion des couleurs et des largeurs de contenu), vous obtiendrez un site plus cohérent, professionnel et facile à gérer.

  • Bonne nouvelle : toutes ces corrections sont simples à appliquer ! Quelques ajustements suffisent pour améliorer considérablement l’apparence et la fonctionnalité de votre site.

Prenez quelques minutes pour revoir vos réglages, effectuez les modifications nécessaires et observez à quel point votre site devient plus fluide et harmonieux.

Vous hésitez à vous lancer avec Kadence Pro ? Découvrez en plus dès maintenant !

Besoin d’aide ? Je serai ravi de vous accompagner !

*Lien sponsorisé vers Kadence

Ces publications vont vous intéresser