Guía de configuración global de estilos de Elementor Pro

Elementor Pro proporciona la función de ajuste de estilo global, sólo tiene que instalar Elementor Pro, puede hacer ajustes globales, similar a la configuración del tema del tema. Esto puede ayudarle a preestablecer el estilo general de color, estilo de fuente, diseño y elementos preestablecidos de su sitio web, lo que reduce en gran medida la carga de trabajo de la producción de sitios web de post-producción.

Por ejemplo, podemos establecer varios colores globales y seleccionarlos directamente al establecer el color del contenido.

Este tutorial presentará las características comunes de los estilos y ajustes globales del editor web Elementor, como la configuración de fuentes globales, colores, anchos de contenido de página, espaciado predeterminado de elementos, etc.

Vaya a [Configuración del sitio

Después de instalar y activar Elementor Pro, vaya a cualquier página de la ventana del editor de Elementor y haga clic en "Configuración del sitio" como se muestra en la siguiente figura, verá las siguientes opciones de configuración.

Sistema de diseño

El sistema de diseño permite establecer colores y fuentes globales.

Configuración global del color

La mayor ventaja de establecer colores globales es la posibilidad de cambiar rápidamente el estilo de color de su sitio web. Por ejemplo, si en su sitio web predomina actualmente el verde, puede cambiar rápidamente a un estilo azul simplemente cambiando los colores en la configuración de colores globales. Para ello, deberá diseñar sus páginas con todos los colores utilizando la configuración global de colores. Si los colores se añadieron manualmente, tendrá que modificarlos manualmente.

Métodos para establecer y utilizar colores globales:

1. Vaya a Colores globales en Configuración del sitio.
2. Establezca algunos colores globales de uso común.
3. Utilice estos colores globales para la configuración al diseñar las páginas.

La configuración global contiene los colores del sistema y los colores personalizados. Hay cuatro colores de sistema, que no pueden borrarse, pero sí modificarse. Los colores personalizados pueden añadirse y renombrarse según sus necesidades.

Una vez que hayas establecido el color global, puedes llamar al color global desde la configuración de color de cualquier elemento en Elementor.

Configuración global de fuentes

Al igual que los colores globales, las fuentes globales pueden personalizarse para añadir más de una. Utilizar fuentes globales al diseñar una página puede aumentar la eficiencia y facilitar su cambio coherente en una fase posterior.

Las fuentes globales tienen cuatro configuraciones de fuentes del sistema que no se pueden eliminar, pero sí modificar. También puedes añadir fuentes globales personalizadas.

Para una fuente global concreta, puede establecer lo siguiente: fuente, tamaño, grosor, conversión de mayúsculas a minúsculas, estilo (por ejemplo, cursiva), decoración (por ejemplo, subrayado, subrayado), altura de línea, espaciado entre letras e interlineado entre palabras.

Estilo del tema/Configuración global del estilo del tema

En Estilos globales de tema, puede establecer estilos para fuentes, botones, imágenes y campos de formulario.

Como cada tema tiene una compatibilidad diferente con Elementor, no existe una solución unificada. Como se muestra en la siguiente imagen, Elementor ofrece la opción de desactivar su propia función de colores y fuentes y elegir heredar la configuración del tema. Con estas dos opciones, puede ayudarte a depurar los estilos.

Tipografía

En [Tipografía], puede definir el color del texto, el estilo de fuente, el espaciado entre párrafos, el color de los enlaces y el efecto hover del contenido de la página web, así como el color y el estilo de fuente de las etiquetas H1-H6. También puede utilizar directamente los colores y fuentes de la configuración global para unificar el estilo tipográfico.

Botón/Configuración global de botones

En la Configuración global de botones, puede establecer las siguientes propiedades del botón: tipografía del texto, proyección del texto, color normal y color de fondo, color del texto y color de fondo al pasar el ratón por encima, tipo y color del borde, radio de las esquinas y espaciado interior.

Imágenes/Configuración global de la imagen

En la Configuración global de la imagen, puede configurar las siguientes propiedades de la imagen: bordes, radio de las esquinas, transparencia, proyección, filtros CSS para normal y hover, y tiempo de transición del estado normal al hover.

Formulario archivado/Configuración global de campos de formulario

Cuando el sitio utiliza formularios, como formularios de contacto y formularios de consulta, el estilo de los campos del formulario se puede configurar aquí.

Puede establecer el color y la tipografía de los encabezados de campo, la tipografía del propio campo, el color de la fuente para normal y mecanografiado, el color de fondo, la sombra, el borde, el radio de las esquinas y el espaciado interno.

Configuración

Configuración de la identidad del sitio (Site Identity)

Aquí puede cargar y configurar el nombre, la descripción, el logotipo y el icono de su sitio web.

Configuración global del fondo

Aquí puede establecer el color de fondo de la página web, sólido o degradado, así como la imagen de fondo, y también puede establecer por separado el color de fondo para móviles.

Diseño/Configuración predeterminada del diseño (puntos de interrupción para móviles)

1. anchura del contenido: Establece el ancho por defecto del área de contenido de la página, el valor por defecto es 1140px. si quieres que la página sea más ancha o más estrecha, puedes ajustarlo aquí.
2. Espacio para widgets: Establece el espaciado entre bloques de elementos, por defecto 20px.
3. Selector de título de páginaPermite ocultar los títulos de las páginas. Si el selector de título de página del tema no es entrada-títuloSi estás usando el tema Hello Elementor, necesitas cambiarlo aquí. Si utiliza el tema Hello Elementor, no es necesario realizar ningún cambio. Solo deberías considerar cambiar esta configuración si la función Ocultar encabezados no funciona.
4. Sección estirada Ajustar aAl utilizar la sección de Elementor, puede activar la función "estirar sección" para estirar la sección a una anchura especificada. Introduzca aquí el selector del elemento padre (p. ej. #primarioy.envolturayprincipal etc.), el tramo se adaptará a ese selector. Por defecto cuerpoA continuación se indican algunos de los cambios más importantes que no suelen ser necesarios.
5. diseño de página por defecto: Establece el diseño predeterminado de la página, que es de ancho completo por defecto (Elementor ancho completo), que contiene la cabecera y el pie de página. Si se establece en Lienzo ElementorEn lugar de un encabezado y un pie de página, la página será un lienzo en blanco. Si selecciona temaSi tienes un tema que tiene un diseño diferente, hereda la configuración del tema. Diferentes temas pueden ofrecer diferentes opciones de diseño, por favor, depurar y utilizar según sea necesario.

Puntos de interrupción

Puede añadir artificialmente puntos de interrupción para adaptar su sitio web a dispositivos con distintas resoluciones, lo que suele denominarse responsive.

Caja de luz/Configuración de la caja de luz

Las cajas de luz pueden entenderse como ventanas emergentes para imágenes, y la pestaña Caja de luz global le ofrece la posibilidad de ajustar las siguientes opciones:

1. Caja de luz de imágenesInterruptor deslizante para activar o desactivar globalmente la caja de luz.
2. contadoresSólo para galerías multi-imagen. Si está activado, el contador se muestra en la esquina superior izquierda de la caja de luz. Por ejemplo, para una galería que contenga 6 imágenes, el contador mostrará 1/6, 2/6, etc. para indicar la posición de la imagen actual en la galería.
3. Pantalla completaCuando se activa, se añade un icono en el que se puede hacer clic y que permite al usuario abrir la imagen en un lightbox a pantalla completa.
4. ZoomCuando se activa, se añade un icono en el que se puede hacer clic y que permite al usuario ampliar la imagen en la caja de luz. Una vez ampliada, la vista puede desplazarse para ver distintas zonas de la imagen.
5. CompartirCuando está activada, la función de compartir se añade a la caja de luz, lo que permite a los usuarios compartir imágenes en Twitter, Facebook y Pinterest, o descargarlas en sus ordenadores.
6. TítuloOpcionalmente, el título puede mostrarse debajo de la imagen en el lightbox. Elija entre Ninguno, Título, Pie de foto, Alt o Descripción.
7. DescripciónOpcionalmente, se puede mostrar una descripción debajo de la imagen en el lightbox. Elija entre Ninguno, Título, Pie de foto, Alt o Descripción.
8. color de fondo: Selecciona el color de fondo y la opacidad de la caja de luz.
9. Colores de la interfaz de usuario: Selecciona el color de la interfaz de usuario. Esto afecta a las flechas de la caja de luz, la navegación por puntos, los botones de cierre, etc.
10. Color de la interfaz de usuario: Selecciona el color de la interfaz de usuario. Esto afecta a las flechas de la caja de luz, la navegación por puntos, el botón de cierre, etc. cuando el usuario pasa el ratón por encima de cada botón.

CSS personalizado

Cuando la configuración de diseño existente no satisface sus necesidades, puede definir estilos añadiendo CSS personalizado. Pero solo si dominas bien cómo se escribe CSS.

Resumen:

Con la función de configuración de estilo global de Elementor Pro, es fácil predefinir y ajustar los estilos de color generales, los estilos de fuente, los diseños y los elementos predefinidos de tu sitio web. Esto no sólo mejora la eficiencia del diseño, sino que también garantiza un estilo coherente del sitio. Ya se trate de establecer colores globales, fuentes o ajustar el estilo de elementos como botones, imágenes, campos de formulario, etc., puedes reducir drásticamente el trabajo de mantenimiento posterior a la producción. Además, Elementor Pro también proporciona potentes funciones CSS personalizadas, que permiten a los usuarios alcanzar necesidades de diseño más sofisticadas, mejorando por completo la experiencia del usuario y el efecto visual del sitio web.