Explicación de la configuración de fuentes y colores de Elementor: Cómo optimizar el diseño de su sitio web con estilos globales y CSS personalizados

En este post, veremos cómo configurar las fuentes y los colores con Elementor para garantizar que suEl sitio web mantiene un estilo coherentey manteniendo la flexibilidad para las partes que la necesitan.

Configuración predeterminada de las fuentes y colores de Elementor

En Elementor, puedeActivar o desactivar los ajustes globales predeterminados de color y fuente.. Estos ajustes se encuentran en la sección "convencionales (armas)" que se encuentra en los ajustes, ofrece dos opciones principales:

• Desactivar colores por defecto
• Desactivar fuentes por defecto

Activar o desactivar estas opciones puede afectar en gran medida a tu flujo de trabajo de diseño. Al deshabilitar estos ajustes predeterminados, Elementor ya no forzará la aplicación de sus colores o fuentes predeterminados, sino que utilizará los ajustes predeterminados que se ven en la sección "Configuración del sitio" Los colores y tipos de letra globales definidos en el

De esta forma puedes adaptarlo a las necesidades de tu sitio sin estar limitado por los preajustes de Elementor.

Cuándo desactivar los colores y tipos de letra por defecto

1. Necesidad de coherencia

Deshabilitar los colores y fuentes predeterminados puede ser una buena opción si quieres que las fuentes y colores de tu sitio sean consistentes en todas las páginas, secciones o widgets. Al desactivar estas opciones, Elementor utilizará los estilos globales preestablecidos. Por ejemplo, si quieres que todos los encabezados de tu sitio utilicen una fuente específica, como por ejemplo Montserratsimplemente configúrala como fuente global en los ajustes del sitio y se aplicará automáticamente cuando arrastres un nuevo widget de cabecera a la página.

Caso: el efecto de desmarcar dos casillas Supongamos que Montserrat La fuente se aplica como una fuente global y cuando desmarcas ambas casillas, cualquier nuevo widget de texto que se añada heredará automáticamente esa fuente y el color global que hayas establecido. Esta consistencia es importante para el diseño y la experiencia del usuario, ya que garantiza un estilo coherente del sitio.

2. Flexibilidad para utilizar CSS personalizado

Si prefiere controlar el estilo de su sitio mediante CSS personalizadoSe anulan los colores y tipos de letra por defecto.hará las cosas mucho más flexibles. La ventaja de esto es que Elementor no aplica automáticamente sus estilos globales, lo que te permite definir el estilo de los elementos de la página completamente a través de CSS.

Sin embargo, si desactivas la configuración predeterminada pero no utilizas CSS personalizado, es posible que el texto y los colores de la página no tengan el aspecto esperado. Por este motivo, desactivar la configuración predeterminada suele ser para usuarios que desean un control total sobre el estilo, especialmente aquellos que están familiarizados con CSS.

Consejos para añadir CSS personalizado

Cuando se utiliza CSS personalizado, a veces es necesario utilizar la función Importante para anular los estilos predeterminados de Elementor. Por ejemplo, si quieres cambiar la etiqueta H1 Para el color y el tipo de letra del título, se puede utilizar el siguiente código:

cssCopiar código
h1 {<br>    color: var(--e-global-color-accent) !important;<br>    font-family: Verdana !important;<br>}<br>
h1 {<br>    color: var(--e-global-color-accent) !important;<br>    font-family: Verdana !important;<br>}<br>
h1 {
    color: var(--e-global-color-accent) !important;
    font-family: Verdana !important;
}

En este ejemplo, si no se añade el botón Importante es posible que sus estilos personalizados no se apliquen porque la etiqueta Los ajustes globales de Elementor tienen mayor prioridad.

Activar o desactivarDiferentes efectos de colores y fuentes globales

1. Aplicación de colores y fuentes globales

CuandoColores y fuentes globales activadosElementor aplicará automáticamente estilos globales a todos los elementos de la página. Esto resulta muy práctico para los usuarios que no están familiarizados con CSS o que desean ahorrar tiempo. Por ejemplo, si eliges un determinado color como esquema de color global en la configuración del sitio, todos los botones, encabezados y texto tendrán automáticamente ese color aplicado. Esta configuración garantiza un diseño coherente y ahorra mucho tiempo en ajustes manuales.

2. El efecto cuando la casilla está marcada

Al marcar la casilla Desactivar, Elementor ya no aplicará automáticamente ningún color o fuente. En este punto, puedes controlar el estilo de tu sitio completamente a través de CSS personalizado, en lugar de utilizar el botón Importante para anular la configuración global. Por ejemplo, el siguiente código puede aplicarse a los encabezados H1:

cssCopiar código
h1 {<br>    color: var(--e-global-colour-accent).<br>    font-family: Verdana.<br>}<br>
h1 {<br>    color: var(--e-global-colour-accent).<br>    font-family: Verdana.<br>}<br>
h1 {
    color: var(--e-global-colour-accent).
    font-family: Verdana.
}

Esto significa que sus estilos personalizados tendrán prioridad sobre cualquier configuración global, y no hay necesidad de utilizar la opción Importante Etiquetas a cubrir.

Cuándo marcar o desmarcar la casilla de desactivación

Dependiendo de sus necesidades y flujo de trabajo, puede optar por marcar o desmarcar la casilla de desactivación:

• Desmarcado: Esto se puede comprobar si desea mantener la coherencia en el diseño de su sitio, ya que ElementerAplicación automática de colores y fuentes globales. Este método es especialmente adecuado para los usuarios que no desean personalizar demasiado el estilo de su sitio web.
• Seleccionado: Para aquellos que deseen tener un control total sobre el estilo de su sitio web a través de CSS personalizado, permitirá una mayor flexibilidad de diseño. En este caso, ElementorNo se aplicarán estilos globalesEn su lugar, le permite tener un control total a través de CSS personalizado.

Configuración mediante un método híbrido

Desmarque la configuración de fuente y deje la configuración de color en su lugar. De este modo, me aseguro de que las fuentes globales (como Montserrat) se apliquen automáticamente en todo el sitio, al tiempo que controlo los colores de elementos específicos mediante CSS personalizado. Este enfoque garantiza la coherencia del diseño, al tiempo que me permite realizar otras personalizaciones si es necesario.

Para los ajustes de color, marque la opción Desactivar, especialmente si desea aplicar un esquema de color único a elementos específicos.

Consejos para utilizar colores y fuentes globales personalizados

Para gestionar mejor las fuentes y los colores en Elementor, también puedes considerar la posibilidad de crear colecciones globales personalizadas de colores y fuentes. Esto garantiza que todas las páginas y widgets hereden automáticamente tus estilos predefinidos cuando se añadan, y también facilita futuras actualizaciones de estilo.

Paso: Crear un estilo global personalizado

1. En la configuración del sitio, busque "color global"y"fuente global"Opciones.

2. Personaliza tus esquemas de color y estilos de fuente guardándolos como estilos globales.

3. Todos los widgets heredarán automáticamente esta configuración global cuando añadas un nuevo elemento a la página.

Si lo configura de este modo, no sólo ahorrará tiempo, sino que también podrá garantizar la coherencia del estilo de su sitio web.

Conclusión:

Los ajustes de fuente y color de Elementor te ofrecen una gran variedad de opciones de diseño. La clave está en encontrar los ajustes que mejor se adapten a tu flujo de trabajo:

• Coherencia por diseño: Desmarcar los colores y tipos de letra por defecto ayuda a garantizar un estilo coherente en todo el sitio.
• Diseño flexible: Marcar ambas casillas te da un control total sobre el uso de tu CSS personalizado sin tener que preocuparte de que la configuración global interfiera.