Identidad visual global en Elementor

Configurar la identidad visual de un sitio en WordPress con Elementor te permite transformar una página plana en una experiencia coherente con tu marca. Aquí aprenderás a definir colores globales, tipografías, logo y favicon usando una guía de estilos, para que cada elemento del sitio respire la misma personalidad.

La página de inicio inicial tenía el contenido correcto, pero le faltaba atractivo visual. Al editarla con Elementor desde el panel de administración, se carga un editor visual con barra lateral de elementos, vista previa en tiempo real y una interfaz que se acerca mucho al resultado final. Antes de rediseñar la página, conviene dejar listos los estilos globales.

¿Qué son los ajustes del sitio en Elementor y para qué sirven?

Los ajustes del sitio funcionan como el panel de control central de tu identidad visual. Desde ahí defines reglas que se aplican en todas las páginas sin tener que repetir configuraciones manualmente.

Dentro de Elementor, en la sección de ajustes del sitio, se despliega un menú que permite configurar colores globales, fuentes, estilos de tipografía, estilos de botones, estilos de imágenes e identidad del sitio. Cada bloque trabaja sobre una guía previa, en este caso una guía de estilos en Notion con logo, paleta de colores, tipografías sugeridas y recomendaciones generales.

¿Qué son los estilos globales en Elementor? Son configuraciones de colores, fuentes y botones que se aplican a todo el sitio desde un solo lugar. Si cambias el color primario, se actualiza en cada página automáticamente.

¿Cómo definir colores globales y tipografías para todo el sitio?

Los colores globales evitan inconsistencias y aceleran cualquier cambio futuro de marca.

¿Cómo aplicar la paleta de colores desde Notion a Elementor?

En la guía, el color principal es un verde monte y el secundario un marrón tierra. El proceso es directo:

• Copia el código RGB del color desde Notion.
• En Elementor, entra a colores globales.
• Haz clic en primario y pega el código del verde monte.
• Repite con el secundario usando el marrón tierra.
• Completa el resto de colores de la paleta y guarda los cambios.

Con eso, cualquier elemento que use el color primario se actualiza en todo el sitio sin tocar página por página.

¿Qué tipografías usar para títulos y texto base?

La guía recomienda Playfair para títulos y Open Sans o Roboto para texto base. Dentro de fuentes globales, busca Playfair, confirma que esté disponible en WordPress y configúrala como tipografía primaria. Para el cuerpo, Roboto viene por defecto y funciona bien como secundaria. Guarda los cambios y la jerarquía tipográfica queda lista.

¿Cómo configurar el logo y el favicon en WordPress?

La identidad del sitio incluye el nombre, el logo y el favicon, tres elementos que reemplazan el dominio temporal con la marca real.

El sitio se llama Manos del Monte. Desde la sección de identidad del sitio, sube el logo desde la biblioteca de archivos. Conviene usar la versión con fondo transparente para que se adapte a cualquier color de cabecera.

Cada vez que subes una imagen nueva, ponle un título descriptivo y una descripción alternativa. Esto mejora la accesibilidad: las personas con discapacidad visual usan lectores de pantalla que leen ese texto alternativo. Para el logo, el título sería logo de Manos del Monte.

¿Qué es el favicon y por qué importa? Es el ícono pequeño que aparece al lado del título en la pestaña del navegador. Refuerza el reconocimiento de marca cada vez que alguien tiene tu sitio abierto entre varias pestañas.

Para cargar el favicon de Manos del Monte, sube la versión recortada con máscara redondeada, ponle como título Manos del Monte Icon y como descripción icono de Manos del Monte. Al guardar y previsualizar, el logo aparece en la cabecera, el nombre reemplaza al dominio temporal y el favicon se ve en la pestaña.

¿Cómo personalizar los botones con estilos globales?

Los botones son uno de los elementos más visibles y conviene que respondan a la identidad de marca.

Desde estilos de botones puedes definir:

• Tipografía específica del botón.
• Color de texto.
• Color de fondo, eligiendo desde los colores globales ya definidos, por ejemplo el verde primario.
• Radio de los bordes, que controla qué tan redondos o cuadrados se ven.
• Relleno o padding, que es el aire o espacio entre el texto y los bordes del botón.

Al seleccionar un color, Elementor muestra los colores por defecto que ya configuraste como globales, así que aplicar el verde primario al fondo del botón toma un par de clics.

¿Qué es el padding en un botón? Es el espacio interno entre el texto y los bordes. Más padding hace el botón más grande y respirable; menos padding lo hace compacto.

Habilidades y conceptos clave de la clase

• Editor visual de Elementor: interfaz con barra lateral de elementos y vista previa que reemplaza al editor estándar de WordPress.
• Ajustes del sitio: panel central donde defines colores, fuentes, identidad y estilos de botones de forma global.
• Colores globales: paleta reutilizable que se aplica a todo el sitio; aquí se usaron verde monte como primario y marrón tierra como secundario.
• Tipografía primaria y secundaria: Playfair para títulos y Roboto para texto base.
• Identidad del sitio: nombre, logo y favicon que reemplazan el dominio temporal.
• Texto alternativo: descripción que leen los lectores de pantalla, clave para accesibilidad.
• Favicon: ícono pequeño en la pestaña del navegador.
• Radio y padding de botones: controlan la forma de los bordes y el espacio interno.
• Guía de estilos en Notion: documento de referencia con logo, paleta, tipografías y recomendaciones generales.

Ahora te toca a ti: termina de configurar el resto de colores y los estilos de botones como creas conveniente. ¿Qué paleta vas a usar en tu propio sitio? Cuéntalo en los comentarios.