#3 Estilos globales — tipografía, colores y fondos – Curso Woocommerce con Elementor

Aprende a configurar los estilos globales en Elementor para mantener coherencia en toda tu web. Define tipografías, colores y fondos de forma estratégica, mejora la identidad visual y ahorra tiempo al aplicar cambios globales que optimizan diseño y experiencia de usuario.

Contenido de la lección

(Recordar que este contenido es la escaleta)

1. ¿Qué son los estilos globales y por qué son importantes?
   • Impacto en velocidad de carga y caché del servidor
   • Definir estilos antes de empezar a maquetar
2. Acceso al Kit por defecto en Elementor
   • Desde el panel de WordPress → Kit por defecto → Editar
   • Acceso alternativo desde el editor → Ajustes del sitio
3. Colores globales
   • Definir color principal, secundario, textos y énfasis
   • Añadir colores personalizados a la paleta
   • Ventaja: cambiar un color lo actualiza en toda la web
4. Fuentes globales
   • Definir tipografía principal, secundaria, texto y énfasis
   • Tamaños recomendados (desktop, tablet y mobile)
   • Tip: ajustar altura de línea en mobile para aprovechar espacio
5. Tipografía del sitio (h1, h2, enlaces, cuerpo)
   • Color del cuerpo y font-family general
   • Configurar h1, h2 y demás encabezados
   • Cambiar el color de los enlaces desde aquí
   • Configuración de botones globales
6. Imágenes: border-radius y efectos hover
7. Identidad del sitio: logotipo, nombre, descripción y favicon
8. Fondo global del sitio
   • Por qué cambiar el fondo aquí y no sección por sección
   • Fondo de navegador móvil
9. Disposición y ancho del contenido
   • Por qué limitar el ancho máximo (experiencia de usuario en pantallas grandes)
   • Ancho recomendado: 1600px con relleno de 20px
10. Otras opciones: puntos de ruptura, transiciones de página, CSS personalizado, ajustes WooCommerce

Objetivo de la lección

Que el alumno sepa configurar los estilos globales de Elementor antes de empezar a construir cualquier página, definiendo colores, tipografías y fondos de forma centralizada para optimizar la velocidad de carga y facilitar el mantenimiento futuro de la web.

Recursos

• Documentación oficial de Elementor sobre el Kit de sitio (Global Styles): https://elementor.com/help/site-settings/
• Herramienta para definir paleta de colores antes de empezar: https://coolors.co
• Herramienta para elegir tipografías:https://fonts.google.com