Les paramètres de police d'Elementor ne fonctionnent pas ? Résoudre les conflits avec Gutenberg

Lors de la création de sites web avec WordPress, de nombreuses personnes choisissent Elementor comme outil de conception de pages et l'utilisent également pour le contenu des articles. Gutenberg Éditeur. Beaucoup d'entre vous auront rencontré un problème frustrant : les styles de police définis dans Elementor ne sont pas synchronisés avec les paragraphes ou les titres créés dans Gutenberg. C'est assez courant, surtout si le thème n'est pas spécifique à l'éditeur Gutenberg. Gutenberg et Elementor Faire un bon travail d'adaptation du dossier.

cause fondamentale

Ce problème se pose généralement dans les situations suivantes :

• Gutenberg utilise une feuille de style CSS distincte, qui a la priorité.
• Le thème ou le plugin est Gutenberg Fournit un support de style supplémentaire qui remplace les paramètres d'Elementor.
• Les styles globaux d'Elementor ne prennent effet que dans la zone rendue par Elementor, alors que le corps de l'article est généralement rendu sous le contrôle du thème WordPress.

guérir

1) Utiliser Elementor pour contrôler le style de l'ensemble de l'article.

Si votre page de publication a été créée à l'aide d'un modèle Elementor, essayez d'ajouter le widget "Post Content" à Elementor et d'ajuster les polices dans ses paramètres de style. Cela aura un impact direct sur Contenu GutenbergLa présentation de la

Procédure d'exploitation :

• Elementor > Templates > Theme Builder.

• Ajouter un "Pièce unique" Template (Single Post).

• Ouvrez l'éditeur Elementor et trouvez le widget "Post Content".

• Faites-le glisser dans votre modèle de message.

• Dans les paramètres de style, ajustez les options "Typographie" telles que la police, la taille, la hauteur de ligne, etc.

• Mettre à jour l'enregistrement et rafraîchir la page d'accueil.

2. ajouter une feuille de style CSS personnalisée

Si vous utilisez la mise en page par défaut du thème, il est recommandé d'ajouter un élément CSS qui applique les styles de police d'Elementor aux éléments de paragraphe et d'en-tête de Gutenberg.

.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 : var(--e-global-typography-text-font-family) ; font-weight : var(--e-global-typography-text-font-family)
  font-weight : var(--e-global-typography-text-font-weight) ;
  font-size : var(--e-global-typography-text-font-size) ;
}

Ce code suppose que vous avez défini l'optionpolice globaleVariables. Vous pouvez vérifier si ces variables existent dans Paramètres du site > Typographie.

3) Vérifier si le thème est injecté avec les styles Gutenberg.

Certains sujets (tels que AstraetBlocksy) charge activement les styles de l'éditeur de Gutenberg sur le front-end, ce qui affecte la cohérence visuelle de la page. Vous pouvez savoir s'il existe une option pour désactiver le chargement des styles de Gutenberg dans les paramètres de votre thème. Procédure :

• Rafraîchissez la page pour savoir si le wp-block-library.css ou des fichiers de nom similaire chargés
• Ouvrez les outils de développement de votre navigateur (appuyez sur F12 peut-être Ctrl+Shift+I)
• Passez à l'onglet "Réseau".

Si vous ne trouvez pas les paramètres correspondants, essayez de désactiver ces styles à l'aide du code suivant :

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

Ajoutez le code ci-dessus à la section functions.php Documentation.

court

Gutenberg et Elementor La question des conflits de style est une question de "qui contrôle la sortie frontale". Si vous souhaitez Elementor Si vous voulez prendre le contrôle du style global, laissez le contenu de l'article entrer dans la juridiction d'Elementor ; sinon, vous devez utiliser CSS pour renforcer manuellement. N'oubliez pas de tester la police avant et après l'unité, ne vous contentez pas de regarder l'effet dans l'éditeur, la performance de la page frontale est la plus critique.

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.