A la hora de crear un sitio web con WordPress, muchas personas utilizarán tanto el botón Elementor responder cantando Editor Gutenberg. Ambos tienen sus ventajas, pero a veces puedes encontrarte con conflictos de estilos de fuente. Por ejemplo, si configuras fuentes en Elementor, pero en el contenido que editas con Gutenberg, estas configuraciones de fuentes no funcionan y parece que son anuladas por los estilos predeterminados de Gutenberg. En este artículo se explica por qué ocurre esto y se comparten algunas soluciones prácticas para que te resulte más fácil aplicar el estilo correcto a tus fuentes.

?Por qué los estilos de Gutenberg anulan la configuración de fuentes de Elementor?

El editor Gutenberg viene con un conjunto predeterminado de especificaciones de estilo, especialmente para elementos como párrafos, encabezados y listas, con reglas CSS integradas para fuentes, tama?os de fuente, alturas de línea, etc. Estas reglas suelen tener una prioridad alta y se escriben directamente en el archivo de estilo de Gutenberg. Aunque Elementor establece las fuentes globalmente en la página, el archivo de estilo de Gutenberg El bloque de contenido en sí viene con un estilo obligatorio, lo que hace que los ajustes de fuente que hagas en Elementor parezcan ineficaces.

En pocas palabras.Conflictos de estiloresponder cantandoprioridadGutenberg ha a?adido estilos de fuente predeterminados a los bloques de contenido, anulando las fuentes establecidas por Elementor.

Solución 1: A?adir CSS personalizado a los bloques de contenido de Gutenberg

La forma más directa de hacerlo es escribir unosCSS personalizadopara aumentar la prioridad del selector y hacer que los estilos de fuente de Elementor surtan efecto.

• Vaya a "Apariencia de wordpress" → "Personalizar". Se abrirá el personalizador de temas.

• Busque la opción "CSS adicional" o "CSS personalizado". La mayoría de los temas permiten a?adir código CSS adicional aquí.

• Copie y pegue el siguiente código en el cuadro de edición CSS

.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: 'el nombre de su fuente', sans-serif !important;
}

aquí están .entry-content es el nombre de la clase contenedora principal para muchas áreas de contenido del tema, que puede ajustarse para adaptarse a su tema.Importante Se utiliza para aumentar la prioridad y garantizar que la configuración de la fuente anule la predeterminada de Gutenberg.

Solución 2: Ajuste mediante CSS global en Elementor

Si estás acostumbrado a utilizar Elementor para el control unificado de fuentes, también puedes aprovechar la función global de ElementorCSS personalizado(Obligatorio) Elementor Pro):

• Abre el backend de WordPress, ve a Elementor → Código personalizado → A?adir código.

• A?ada el siguiente código al cuadro de entrada CSS personalizado

selector p,
selector h1,
selector h1, selector h2, selector h2
selector h2, selector h3
selector h3, selector h4, selector h4
selector h4, selector h5, selector h6 {
selector h6 {
  font-family: 'El nombre de su fuente', sans-serif !important;
}

aquí están selector Se posicionará automáticamente en el área actualmente editada. Recuerde agregar la configuración de fuente al estilo del tema Elementor conImportantepara evitar ser sobrescrito por otros estilos.

Solución 3: Desactivar los estilos propios de Gutenberg

Si no confías mucho en el estilo predeterminado de Gutenberg, también puedes optar por desactivarlo. Es posible desactivar la carga de estilos frontales de Gutenberg a través de un tema o plugin, por ejemplo:

• Ve al backend de WordPress y selecciona "Apariencia" → "Editor de archivos de temas".

• Abra el archivo functions.php del tema

• A?ada el siguiente código al final del archivo

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

Sin embargo, esto debe hacerse con cuidado y puede afectar al rendimiento estilístico de otros bloques. Se recomiendacopia de seguridadprobar y reutilizar.

Solución 4: Priorizar la creación de contenidos con Elementor

Si su sitio tiene altos requisitos de estilo visual y la uniformidad de la fuente es importante, considere el uso de Elementor para el contenido en más páginas o artículos que Gutenberg.De esta manera, los estilos de fuente y los dise?os están en el Elementor para evitar conflictos.

corto

Los estilos de fuente incoherentes suelen deberse a que el propio CSS de Gutenberg tiene una prioridad alta y anula la configuración de Elementor. Soluciona este problema aumentando la prioridad con CSS personalizado, o desactivando los estilos de Gutenberg, o incluso reduciendo el uso de contenido de Gutenberg. Con estos métodos aplicados, las fuentes de tu sitio web serán coherentes y tendrán un aspecto más profesional y uniforme.

Actualizaciones recientes

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