Bienvenido a la Parte 3 de nuestra guía. En los capítulos anteriores, instalamos nuestro hosting y configuramos el «stack» ganador (Astra + Elementor). Ahora, es tentador lanzarse a arrastrar botones y fotos a lo loco. ¡Alto ahí! Ese es el error de novato más común. Antes de colocar un solo widget, debemos definir las «reglas del juego». Hoy aprenderás a configurar los Ajustes Globales, el secreto que diferencia a un «usuario que hace webs» de un desarrollador profesional.
El Error Nº1: Empezar a «Diseñar» Demasiado Pronto
Imagina que empiezas a construir una casa sin planos, decidiendo el color de cada ladrillo sobre la marcha. El resultado es predecible: un desastre.
En el diseño web ocurre lo mismo. Cuando empiezas a maquetar sin haber definido tus estilos globales, acabas con el «síndrome del caos visual»:
- Tienes 5 tonos diferentes de azul repartidos por la web porque siempre los eliges «a ojo».
- Usas 3 tipografías distintas y 4 tamaños de letra diferentes para los párrafos.
- El Dolor Real: Cuando el cliente (o tú mismo) decide cambiar el color principal de azul a verde, te das cuenta de que tienes que ir página por página, botón por botón, editándolo manualmente. Un cambio de 5 minutos se convierte en 5 horas de trabajo tedioso.
¿Qué es un «Sistema de Diseño»? (Tu Panel de Control Central)
Para evitar ese caos, los profesionales utilizamos un Sistema de Diseño. En el contexto de WordPress, esto significa definir tus fuentes, colores y espaciados en un único lugar centralizado.
La filosofía es: Define una vez, aplica en todas partes. Si configuras tu «Azul Corporativo» en los ajustes globales, todos los botones y enlaces de tu web heredarán ese color automáticamente. ¿Quieres cambiarlo mañana? Lo cambias en el panel global y se actualiza instantáneamente en las 50 páginas de tu sitio. Esto garantiza coherencia visual y una eficiencia brutal.
Paso 1: Configurando los Ajustes Globales de Astra
Astra actúa como nuestro «chasis», así que definiremos las reglas base aquí primero.
- Desde tu escritorio, ve a Apariencia > Personalizar.
- Busca la pestaña Global. Aquí está la magia:
- Tipografía:
- Entra en «Tipografía». Aquí definirás la Tipografía del Cuerpo (para los textos largos, ej: Open Sans o Roboto) y la Tipografía de Encabezados (para los Títulos H1, H2, etc., ej: Montserrat). Astra aplicará esto a toda la web por defecto.
- Colores:
- Entra en «Colores». Configura tu Paleta Global. Define tu «Color de Marca» (Theme Color), el color de los enlaces y el color de texto. Al usar la paleta global, si cambias un color aquí, cambiará en todo el sitio.
- Contenedor:
- Define el ancho máximo de tu contenido. Un estándar moderno y cómodo suele ser 1140px o 1200px. Esto asegura que tu web no se vea «estirada» en pantallas gigantes.
Una vez listo, haz clic en «Publicar».
Paso 2: Sincronizando los «Ajustes de Sitio» de Elementor
Aquí viene la parte crítica. Elementor tiene su propio «cerebro» y, a veces, intenta imponer sus propios colores y fuentes, ignorando a Astra. Debemos alinearlos.
1. Configura los Ajustes de Sitio (Site Settings):
- Abre cualquier página y haz clic en «Editar con Elementor».
- Haz clic en el Menú Hamburguesa (≡) situado arriba a la izquierda.
- Selecciona «Ajustes del sitio».
- Aquí verás opciones similares a las de Astra (Colores Globales, Fuentes Globales). Asegúrate de que coinciden con lo que definiste en Astra para mantener la coherencia.
2. El Truco Pro (La Casilla Mágica): La Fuente de la Verdad Para evitar conflictos y asegurar que Elementor respete siempre tu sistema, haz esto:
- Sal al Escritorio de WordPress.
- Ve a Elementor > Ajustes.
- En la pestaña General, marca estas dos casillas:
- ☑ Inhabilitar colores por defecto
- ☑ Inhabilitar fuentes por defecto
- Guarda los cambios.
Al marcar esto, estás forzando a Elementor a «heredar» los estilos de tu tema (Astra). Ahora tienes una única «fuente de la verdad». Si cambias algo en el Personalizador de Astra, Elementor lo respetará.
Conclusión y Próximo Paso
¡Felicidades! Has pasado de ser un simple «arrastrador de widgets» a un diseñador de sistemas. Ahora tienes un lienzo profesional configurado. Cualquier elemento que añadas a partir de ahora tendrá automáticamente la fuente y el color correctos. Tu web será 100% coherente y escalable.
En la Parte 4, con nuestro sistema ya listo, empezaremos lo divertido: maquetar la Homepage paso a paso.
¿Prefieres que un experto defina tu identidad visual y sistema de diseño? En GAB Developers creamos sistemas web robustos y escalables para que tú solo te preocupes de tu negocio. Consulta nuestros servicios en gabdevelopers.es. ¡Optimiza tu huella digital!
