Configuración Profesional de Elementor: Cómo Preparar tu Entorno de Trabajo

Introducción

Cuando estamos diseñando nuestra página web, nos vamos a encontrar con obstáculos de manera permanente. El propósito de esta guía es evitar todos estos errores anticipándonos, de manera que cuando estemos en WordPress y Elementor diseñando, lo podamos hacer de manera veloz y evitando un montón de problemas.

En este artículo vamos a ver cómo configurar correctamente nuestro entorno de trabajo en Elementor, basándonos en las decisiones que tomamos previamente con la ayuda de Gamma.app sobre paleta de colores, tipografías y estilo gráfico. Esta preparación es crucial porque nos permitirá:

• Diseñar mucho más rápido
• Mantener coherencia visual en todo el sitio
• Actualizar el diseño global con un solo clic
• Aprovechar al máximo los bloques prediseñados

💡 Importante: Esta configuración está pensada específicamente para trabajar con Elementor Pro y Starter Templates. Si usás otros plugins o temas, el proceso podría variar ligeramente.

Antes de empezar: Nuestra maqueta de referencia

En videos anteriores trabajamos con Gamma.app y la ayuda de inteligencia artificial para crear una maqueta o bosquejo de nuestro sitio web. Esta página nos sirve como inspiración y referencia, mostrándonos cómo funcionan los elementos que elegimos:

• Nuestra paleta de colores
• Las tipografías seleccionadas
• La estructura general de la página
• Los elementos visuales como fotografías, íconos y bloques

Esta maqueta no es el diseño definitivo, pero nos da un punto de partida claro y nos permite ver cómo quedarían todos los elementos juntos antes de empezar a trabajar en WordPress.

Paso 1: Desactivar colores y fuentes por defecto

Lo primero que vamos a hacer es desactivar los colores y fuentes que vienen por defecto en Elementor, para poder trabajar con nuestra configuración personalizada:

1. En el panel de WordPress, andá a Elementor → Settings
2. Marcá las casillas para desactivar los colores y fuentes por defecto
3. Guardá los cambios

Paso 2: Crear una página para trabajar

Ahora necesitamos una página donde configurar nuestro entorno:

1. Andá a Páginas → Añadir nueva
2. Ponele un título (en este caso, “Home”)
3. Publicá la página
4. Hacé clic en “Editar con Elementor”

Una vez en Elementor, lo primero es ocultar el título de la página:

1. Hacé clic en el ícono de ajustes (ruedita) en la parte superior
2. Buscá la opción “Ocultar título” y activala
3. Con esto ya tenemos una hoja en blanco para trabajar

⚠️ Recordá: Esta configuración afecta solo a la página actual, no a todo el sitio web.

Paso 3: Configurar los colores globales

Ahora vamos a configurar los colores que usaremos en todo el sitio:

1. Hacé clic en el ícono de “Site Settings” (arriba a la izquierda)
2. Seleccioná “Global Colors”

En este punto, necesitamos hacer un cambio importante para que funcione correctamente con Starter Templates:

Intercambiar secundario por accent

1. Cambiá el nombre “Accent” por “Secundario”
2. Cambiá el nombre “Secundario” por “Accent”

Asignar los colores de nuestra paleta

Ahora vamos a cambiar cada color global por los de nuestra paleta:

• Primario: Nuestro azul marino
• Accent: Nuestro color turquesa
• Texto: El color para textos y párrafos
• Secundario: Nuestro color violeta

Añadir colores adicionales

Para tener una paleta más completa, vamos a agregar algunos colores básicos:

1. Agregá el blanco puro
2. Agregá el negro
3. Agregá un gris claro

También podemos añadir variaciones de nuestros colores principales:

1. Añadí “Azul claro” (una versión más clara de nuestro color primario)
2. Añadí “Violeta oscuro” (una versión más oscura de nuestro color secundario)

💡 Truco: Para crear variaciones de un color, copiá el código hexadecimal y modificalo manualmente siguiendo una línea recta en el selector de color para mantener la misma gama.

Paso 4: Configurar las fuentes globales

Ahora vamos a trabajar con las tipografías:

Configurar System Fonts

1. En Site Settings, seleccioná “Global Fonts”
2. En System Fonts, devolvé Primary, Secondary y Accent a su configuración por defecto
3. Para el texto, configurá:
   • Fuente: Nunito Sans
   • Peso: 400
   • Tamaño: 1 Rem

💡 Sobre Rem: Esta unidad de medida es relativa al tamaño base del navegador (generalmente 16px). Es mejor que usar píxeles porque se adapta automáticamente a diferentes dispositivos y preferencias del usuario.

Configurar Custom Fonts

Ahora vamos a crear configuraciones personalizadas para cada nivel de título:

1. Añadí un nuevo estilo de fuente llamado “Título 1”
   • Fuente: Kanit
   • Peso: 600
   • Tamaño: clamp(2.4rem, 5vw + 1rem, 4rem)
2. Repetí el proceso para crear:
   • Título 2: Kanit, 600, clamp(2rem, 4vw + 1rem, 3.5rem)
   • Título 3: Kanit, 600, clamp(1.8rem, 3vw + 1rem, 3rem)
   • Título 4: Kanit, 600, clamp(1.6rem, 2vw + 1rem, 2.5rem)
   • Título 5: Kanit, 600, clamp(1.4rem, 1.5vw + 1rem, 2rem)
   • Título 6: Kanit, 600, clamp(1.2rem, 1vw + 1rem, 1.5rem)
3. Añadí una fuente para los botones:
   • Fuente: Nunito Sans
   • Peso: 500
   • Tamaño: 1.1 Rem

💡 Sobre clamp(): Esta propiedad CSS moderna permite definir un tamaño mínimo, uno máximo, y uno dinámico en el medio que se ajusta según el tamaño de la pantalla. Esto nos ahorra tener que crear diferentes configuraciones para móvil, tablet y escritorio.

Paso 5: Aplicar la tipografía a los elementos globales

Ahora vamos a aplicar nuestras fuentes personalizadas a los elementos de la página:

1. En Site Settings, andá a “Theme Style” → “Typography”

Configurar el cuerpo del texto

1. En “Body”, establecé:
   • Color: Nuestro color de texto global
   • Tipografía: La fuente global de texto que configuramos

Configurar los enlaces

1. Para el estado normal:
   • Color: Nuestro color “Accent”
2. Para el estado Hover:
   • Color: Nuestro color “Secundario”

Configurar los títulos

Para cada nivel de título (H1 a H6), establecé:

• Color: Asigná diferentes colores globales según tu preferencia
• Tipografía: Asigná la fuente personalizada correspondiente (Título 1 para H1, etc.)

Paso 6: Configurar los botones

Finalmente, vamos a estilizar los botones:

1. En Theme Style, andá a “Buttons”
2. Establecé la tipografía como nuestra fuente de botón personalizada
3. Para el estado normal:
   • Color de texto: Blanco
   • Color de fondo: Nuestro color secundario
4. Para el estado Hover:
   • Color de texto: Blanco
   • Color de fondo: Nuestro color “Violeta oscuro”

Probando nuestra configuración

Para comprobar que todo funciona correctamente, podemos agregar diferentes elementos a nuestra página y ver cómo se aplican los estilos:

1. Añadí diferentes niveles de títulos (H1 a H6)
2. Añadí un párrafo con algunos enlaces
3. Añadí un botón
4. Añadí un formulario
5. Importá un bloque de Starter Templates

Si todo está bien configurado, deberías ver que:

• Los títulos tienen la tipografía y colores correctos
• Los párrafos tienen la fuente y color de texto configurados
• Los enlaces cambian de color al pasar el cursor sobre ellos
• Los botones tienen el estilo y animación configurados
• Los bloques importados de Starter Templates adoptan automáticamente tu configuración

Conclusión

Acabamos de configurar profesionalmente nuestro entorno de trabajo en Elementor. Ahora, cada vez que agreguemos un nuevo elemento o bloque a nuestra página, tomará automáticamente nuestros colores y tipografías, lo que nos permitirá:

• Trabajar mucho más rápido
• Mantener una coherencia visual en todo el sitio
• Hacer cambios globales con facilidad

En el próximo artículo, veremos cómo empezar a elegir los mejores bloques para nuestra página web definitiva, y cómo personalizarlos manteniendo esta coherencia visual que hemos configurado.

💡 Consejo final: Esta configuración inicial puede parecer laboriosa, pero te ahorrará muchísimo tiempo a largo plazo. Es una inversión que vale la pena hacer al comienzo de cualquier proyecto.