En esta clase nos centraremos en cómo configurar la paleta de colores y las tipografías o fuentes en nuestro sitio WordPress.

Paleta de Colores

Para empezar, vamos a configurar los colores base del sitio web.
Estamos trabajando con un WordPress que ya tiene instalado el tema Astra.

Acceso a la Configuración de Colores

1. Dirígete a Opciones de Astra.
2. Haz clic en Establecer colores o Personalizar.

Esto abrirá el personalizador de WordPress en la sección de colores.

Configuración de la Paleta

• Cambiaremos el azul por un verde personalizado para adaptarlo a nuestra marca.
• Editaremos los colores principales y secundarios:
  • Color primario: Verde (éxitos y enlaces).
  • Color oscuro: Verde oscuro.
  • Color de fondo: Personalizable con gradientes o imágenes.

Además, puedes modificar los bordes, fondos y otros elementos visuales según tus necesidades.

Ejemplo:

Seleccionamos un verde oscuro para los enlaces y un verde más claro para los énfasis. Una vez configurada, esta paleta estará disponible globalmente en el sitio para un acceso rápido.

Tipografías

Ahora pasamos a la configuración de las fuentes.

Fuentes Base y Encabezados

1. En el personalizador, selecciona la opción Fuentes.
2. Podrás modificar:
   • Fuente del cuerpo: Elegimos una fuente estándar o personalizada.
   • Fuente de encabezados (H1, H2, H3...): Opcionalmente, puedes usar la misma fuente que en el cuerpo o configurarlas por separado.

Configuración Personalizada

• Tamaño: Ajusta el tamaño de cada nivel de encabezado.
  Ejemplo:
  • H1: 50px
  • H2: 42px
• Peso y estilo: Define el grosor y la transformación (mayúsculas, cursivas, etc.).
• Altura de línea: Configura el espaciado entre líneas.

Uso de Google Fonts o Custom Fonts

• Astra permite seleccionar fuentes de Google Fonts.
• También puedes activar el plugin Custom Fonts para subir tus propias fuentes y evitar depender de Google Fonts.

Enlaces Subrayados

Por accesibilidad, es recomendable mantener los enlaces subrayados para facilitar su identificación visual.

Conclusión

Cuando desarrolles una web con Astra, sigue estos pasos iniciales:

1. Configura tu paleta de colores: Define los colores principales y secundarios que utilizarás.
2. Selecciona tus tipografías: Elige una fuente para el texto general y otra para los encabezados.

Recuerda que estas configuraciones pueden ajustarse más adelante según las necesidades de diseño. ¡Personaliza cada detalle para que se adapte perfectamente a tu proyecto!

Esto ha sido todo por esta clase. Nos vemos en la próxima, donde seguiremos explorando las funcionalidades de Astra.