Solution pratique au problème des polices Elementor qui ne remplacent pas les styles Gutenberg

Lors de la création d'un site web avec WordPress, de nombreuses personnes utilisent à la fois la fonction Elementor répondre en chantant Éditeur Gutenberg. Les deux ont leurs avantages, mais vous pouvez parfois rencontrer des conflits de style de police. Par exemple, si vous définissez des polices dans Elementor, mais dans le contenu que vous modifiez à l'aide de Gutenberg, ces paramètres de police ne fonctionnent pas et il semble qu'ils soient remplacés par les styles par défaut de Gutenberg. Cet article explique pourquoi c'est le cas, et partage quelques solutions pratiques pour vous permettre d'obtenir facilement des polices correctement stylisées.

Pourquoi les paramètres de police d'Elementor sont-ils remplacés par les styles de Gutenberg ?

L'éditeur Gutenberg est livré avec un ensemble de spécifications de style par défaut, en particulier pour les éléments tels que les paragraphes, les titres et les listes, avec des règles CSS intégrées pour les polices, les tailles de police, les hauteurs de ligne, etc. Ces règles ont tendance à avoir une priorité élevée et sont écrites directement dans les fichiers de style de Gutenberg. Même si Elementor définit les polices de manière globale sur la page, l'option Gutenberg Le bloc de contenu lui-même est doté d'un style obligatoire, ce qui rend inefficaces les ajustements de police que vous effectuez dans Elementor.

En bref.Conflits de stylerépondre en chantantprioritéGutenberg a ajouté des styles de police par défaut aux blocs de contenu, remplaçant les polices définies par Elementor.

Solution 1 : ajouter un CSS personnalisé aux blocs de contenu de Gutenberg

La manière la plus directe d'y parvenir est d'écrire desCSS personnalisépour augmenter la priorité du sélecteur afin que les styles de police d'Elementor soient pris en compte.

• Allez dans "wordpress appearance" → "customise". Cela ouvrira le personnalisateur de thème.

• Trouvez l'option "Extra CSS" ou "Custom CSS". La plupart des thèmes permettent d'ajouter un code CSS supplémentaire à cet endroit.

• Copiez et collez le code suivant dans la boîte d'édition CSS

.entry-content p,
.entry-content h1, .
.entry-content h2, .
.entry-content h3, .
.entry-content h4, .
.entry-content h5, .entry-content h7, .entry-content h8, .entry-content h9
.entry-content h6 {
  font-family : 'the name of your font', sans-serif !important ;
}

Voici .entry-content est le nom de la classe conteneur principale pour de nombreuses zones de contenu du thème, qui peut être adaptée à votre thème.!important Utilisé pour augmenter la priorité et s'assurer que les paramètres de police remplacent les paramètres par défaut de Gutenberg.

Solution 2 : Ajustement via le CSS global dans Elementor

Si vous avez l'habitude d'utiliser Elementor pour un contrôle unifié des polices, vous pouvez également tirer parti de la fonction globaleCSS personnalisé(Obligatoire) Elementor Pro) :

• Ouvrez le backend de WordPress, allez dans Elementor → Custom Code → Add Code

• Ajoutez le code suivant à la boîte de saisie CSS personnalisée

sélecteur p,
le sélecteur h1,
sélecteur h1, sélecteur h2, sélecteur h2
sélecteur h2, sélecteur h3,
selector h3, selector h4, selector h4
sélecteur h4, sélecteur h5, sélecteur h6 {
selector h6 {
  font-family : 'The name of your font', sans-serif !important ;
}

Voici sélecteur Il sera automatiquement positionné dans la zone actuellement éditée. N'oubliez pas d'ajouter le paramètre de police au style du thème Elementor avec!importantpour éviter d'être écrasé par d'autres styles.

Solution 3 : Désactiver les styles propres à Gutenberg

Si vous ne comptez pas beaucoup sur le style par défaut de Gutenberg, vous pouvez également choisir de le désactiver. Il est possible de désactiver le chargement du style frontal de Gutenberg par le biais d'un thème ou d'un plugin, par exemple :

• Allez dans le backend de WordPress et sélectionnez "Appearance" → "Theme File Editor".

• Ouvrez le fichier functions.php du thème

• Ajoutez le code suivant à la fin du fichier

function disable_gutenberg_frontend_styles() {
    wp_dequeue_style( 'wp-block-library' ) ;
}
add_action('wp_enqueue_scripts', 'disable_gutenberg_frontend_styles', 100 ) ; }

Toutefois, cette opération doit être effectuée avec précaution et peut affecter les performances de style des autres blocs. Il est recommandé de commencer parsauvegarder, tester et réutiliser.

Solution 4 : donner la priorité à la création de contenu avec Elementor

Si votre site a des exigences élevées en matière de style visuel et que l'uniformité des polices est importante, envisagez d'utiliser Elementor pour le contenu de plus de pages ou d'articles que Gutenberg.De cette façon, les styles de polices et les mises en page sont dans le Elementor pour éviter les conflits.

court

Les styles de police incohérents sont généralement dus au fait que le CSS de Gutenberg a une priorité élevée et l'emporte sur les paramètres d'Elementor. Résolvez ce problème en augmentant la priorité avec un CSS personnalisé, ou en désactivant les styles de Gutenberg, ou même en réduisant l'utilisation du contenu de Gutenberg. Avec ces méthodes en place, les polices de votre site web seront cohérentes et auront un aspect plus professionnel et uniforme.

Mises à jour récentes

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.