Definir estilos globales de diseño con ASTRA

Play

Empezamos la parte más divertida del curso gratuito en el cual diseñas tu propio sitio web para que sea tu portafolio, empezamos con el diseño. En este video, nos enfocamos en definir los estilos globales utilizando el tema Astra. Aquí tienes un resumen detallado de los pasos clave que vemos.

Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.

Comenzamos creando las páginas necesarias para nuestro sitio web. Vamos a «Páginas» en el panel de WordPress y añadimos nuevas páginas como «Home», «Contacto», «Enlaces», «Categoría Espacios», «Sobre mí» y «Detalle del proyecto». Esto nos permite tener una estructura básica lista para el diseño.

Hacemos una primera herramienta clave que usaremos en todo el curso, el editor de bloques de WordPress, fundamental para construir el diseño de todas nuestras páginas. Desde este editor, podemos añadir y organizar distintos bloques como imágenes, textos y muchísimos más. Utilizamos las herramientas del editor, como las tres rayitas que muestran la estructura de nuestra página, para facilitar la construcción y organización de contenidos.

La personalización global es esencial para mantener una coherencia visual en todo el sitio web. Vamos a «Apariencia» y luego a «Personalizar» para definir estos estilos globales. Aquí ajustamos la tipografía, colores y otros aspectos visuales esenciales en el diseño de nuestra web al completo.

1. Tipografía.

Para la tipografía del sitio, seleccionamos la fuente «Poppins» tanto para el cuerpo del texto como para los encabezados. Definimos tamaños específicos para distintas vistas: 26 píxeles en ordenador, 24 en móvil para el cuerpo, y ajustamos tamaños y pesos para los encabezados desde el H1 hasta el H6, de esta manera aseguraremos coherencia, legibilidad y un toque personal en todas las páginas.

2. Colores.

Definimos una paleta de colores personalizada para los enlaces, encabezados, cuerpo de texto y fondos, para continuar con la coherencia que buscamos para todo el sitio web.

3. Contenedor.

Ajustamos el diseño del contenedor, asegurando que no tenga caja y establecemos un ancho de contenido.

4. Botones.

Configuramos los colores y estilos de los botones para mantener una apariencia consistente y atractiva en toda la web. Spoiler, en una clase más adelante del curso personalizamos con código el comportamiento de los botones.

5. Scroll.

Activamos el scroll en escritorio y móvil, posicionándolo a la derecha y definiendo un tamaño de 15 píxeles.

Para implementar estos estilos, utilizamos las opciones de personalización de Astra y Spectra. Astra nos permite ajustar los estilos de manera global, mientras que Spectra añade bloques adicionales al editor de WordPress, facilitando el diseño.

Después de definir y personalizar los estilos globales, publicamos los cambios y revisamos cada página para asegurarnos de que el diseño sea el deseado. Esto incluye verificar los colores, tipografías y la disposición de los elementos en distintas vistas (ordenador, tablet, móvil).

Con estos pasos, hemos dejado preparado WordPress y el tema Astra para empezar a diseñar cada página de nuestro portafolio, asegurando una apariencia profesional y coherente en todo el sitio web.

En la siguiente clase, comenzaremos a diseñar la página Home. Si tienes alguna duda o comentario, no dudes en hacérmelo llegar a través de la página de contacto del blog.