¿No funciona la configuración de fuentes de Elementor? Resolver conflictos de Gutenberg

A la hora de crear sitios web con WordPress, muchas personas eligen Elementor como herramienta de diseño de páginas y también lo utilizan en el contenido de las entradas. Gutenberg Redacción. Muchos de vosotros os habréis encontrado con un problema frustrante: los estilos de fuente configurados en Elementor no se sincronizan con los párrafos o encabezados creados en Gutenberg. Esto es bastante común, sobre todo si el tema no es específico para el Gutenberg y Elementor Hacer un buen trabajo de adaptación del caso.

causa principal

Este problema suele surgir en las siguientes situaciones:

• Gutenberg utiliza una hoja de estilos CSS independiente, que tiene prioridad.
• El tema o plugin es Gutenberg Proporciona soporte de estilo adicional que anula la configuración de Elementor.
• Los estilos globales de Elementor sólo tienen efecto en el área renderizada por Elementor, mientras que el cuerpo de la entrada suele renderizarse bajo el control del tema de WordPress.

curar

1. Utiliza Elementor para controlar el estilo de todo el artículo.

Si la página de la entrada se creó con una plantilla de Elementor, prueba a añadir el widget "Contenido de la entrada" a Elementor y a ajustar las fuentes en su configuración de estilo. Esto tendrá un impacto directo en Contenido GutenbergLa presentación de la

Procedimiento operativo:

• Elementor > Plantillas > Creador de temas.

• Añadir un "Pieza Única" Plantilla (puesto único).

• Abre el editor de Elementor y busca el widget "Post Content".

• Arrástrelo a su plantilla de entrada.

• En la configuración de estilo, ajuste las opciones de "Tipografía", como fuente, tamaño, altura de línea, etc.

• Actualizar guardar y actualizar la página de front-end.

2. Añadir CSS personalizado

Si utilizas el diseño de publicación predeterminado del tema, se recomienda añadir un fragmento de CSS que aplique los estilos de fuente de Elementor a los elementos de párrafo y encabezado de Gutenberg.

.entry-content p,
.entry-content h1, .
.contenido-entrada h2, .
.contenido-entrada h3, .
.contenido-entrada h4, .
.entrada-contenido h5, .entrada-contenido h7, .entrada-contenido h8, .entrada-contenido h9
.entrada-contenido 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);
}

Este código supone que se ha configurado el parámetrofuente globalVariables. Puede comprobar si estas variables existen en Configuración del sitio > Tipografía.

3. Compruebe si el tema está inyectado con estilos Gutenberg.

Algunos temas (como AstrayBlocksy) carga activamente los estilos del editor de Gutenberg en el front-end, lo que afecta a la coherencia visual de la página. Puedes averiguar si existe una opción para desactivar la carga de estilos de Gutenberg en la configuración de tu tema. Procedimiento:

• Actualice la página para saber si el wp-block-library.css o archivos de nombre similar cargados
• Abra las herramientas para desarrolladores de su navegador (pulse F12 tal vez Ctrl+Mayús+I)
• Cambia a la pestaña "Red".

Si no encuentra los ajustes correspondientes, intente desactivar estos estilos con el siguiente código:

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

Añada el código anterior al tema hijo de funciones.php Documentación.

corto

Gutenberg y Elementor El tema de los conflictos de estilo es una cuestión de "quién controla la salida del front-end". Si desea Elementor Si desea tomar el control del estilo global, a continuación, dejar que el contenido del artículo también entran en la jurisdicción de Elementor, de lo contrario, usted tiene que utilizar CSS para fortalecer manualmente. Recuerde que debe probar la fuente antes y después de la uniformidad, no se limite a mirar el efecto en el editor, el rendimiento de la página front-end es el más crítico.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres