En este post, veremos cómo configurar las fuentes y los colores con Elementor para garantizar que suEl sitio web mantiene un estilo coherente, conservando al mismo tiempo 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 "convencional (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 su flujo de trabajo de diseño. Cuando deshabilite estas opciones predeterminadas, Elementor dejará de forzar la aplicación de sus colores o fuentes predeterminados, utilizando en su lugar la configuración predeterminada que ve en la sección "Configuración del sitio" Los colores y fuentes globales definidos en el

De esta forma podrá adaptarlo a las necesidades de su sitio sin verse limitado por los preajustes de Elementor.

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

1. La necesidad de coherencia

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

Caso: el efecto de desmarcar dos casillas Suponga que Montserrat La fuente se aplica como fuente global y cuando desmarque ambas casillas, cualquier nuevo widget de texto que se añada heredará automáticamente esa fuente y el color global que haya establecido. Esta coherencia 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 predeterminados.hará las cosas mucho más flexibles. La ventaja de esto es que Elementor no aplica automáticamente sus estilos globales, lo que le permite definir el estilo de los elementos de la página completamente a través de CSS.

Sin embargo, si desactiva la configuración predeterminada pero no utiliza CSS personalizado, puede encontrarse con que el texto y los colores de la página no tienen el aspecto esperado. Por esta razón, deshabilitar 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 desea cambiar el H1 Para el color y el tipo de letra del título, puede utilizar el siguiente código:

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

En este ejemplo, si no añade el Importante es posible que sus estilos personalizados no se apliquen porque las etiquetas 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 cómodo para los usuarios que no estén familiarizados con CSS o quieran ahorrar tiempo. Por ejemplo, si elige un determinado color como esquema de color global en la configuración del sitio, todos los botones, encabezados y texto tendrán automáticamente aplicado ese color. 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, puede controlar el estilo de su sitio completamente a través de CSS personalizado, en lugar de utilizar la función Importante para anular la configuración global. Por ejemplo, el siguiente código puede aplicarse a los encabezados H1:

cssCopiar código
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

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

• Desmarcado: Esto puede comprobarse si desea mantener la coherencia del 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 página 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.

Establecimiento mediante un método híbrido

Desmarque la configuración de fuentes y deje la configuración de colores en su sitio. De este modo, puedo asegurarme de que las fuentes globales (como Montserrat) se aplican 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 puede considerar la posibilidad de crear colecciones globales personalizadas de colores y fuentes. Esto garantiza que todas las páginas y widgets hereden automáticamente sus estilos predefinidos cuando se añadan, y también facilita las 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. Personalice sus esquemas de color y estilos de fuente guardándolos como estilos globales.

3. Todos los widgets heredarán automáticamente estos ajustes globales cuando añada un nuevo elemento a la página.

Al configurarlo de esta forma, no sólo podrá ahorrar tiempo, sino que también podrá garantizar la coherencia en el estilo de su sitio web.

Conclusión:

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

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