En esta clase, vamos a replicar la página principal de Trinchera WordPress, pero utilizando Astra y el plugin de bloques Spectra. Vamos a trabajar en el ordenador y a intentar duplicar esta página paso a paso.

Creación de la Página Principal

1. Creación de la Página

   • Vamos a la sección de Páginas y creamos una nueva página llamada Inicio.
   • Publicamos la página.

2. Configuración de la Página Principal

   • Vamos a Ajustes > Lectura y configuramos la página Inicio como nuestra página principal.
   • Recargamos la página y ya la tenemos configurada.

Diseño de la Página

1. Contenedor Principal

   • Vamos a crear un Contenedor con una sola columna (sin columnas adicionales).
   • Dentro del contenedor, agregamos un Encabezado utilizando el bloque de Spectra.
   • Cambiamos la alineación del encabezado a centrada.

2. Texto Resaltado

   • Modificamos el texto resaltado utilizando los estilos de Spectra. El color y estilo del resaltado se ajustan según lo deseado.

3. Configuración Tipográfica

   • Cambiamos la tipografía de "Creemos que el conocimiento tiene que ser accesible" a Roboto y ajustamos el peso de la fuente a 600-800 para darle más fuerza.

4. Agregar Párrafo

   • Agregamos un Párrafo debajo del encabezado y corregimos el texto (por ejemplo, "accesible" con solo una "s").

5. Ajustes de Ancho del Contenedor

   • Ajustamos el ancho del contenedor a 800px para que se vea mejor, eliminando los márgenes y ajustando los estilos del contenedor.

6. Botón de Acción

   • Agregamos un Botón dentro del contenedor, el cual también se ajusta en estilo, tamaño y espacio.

Gestión de Espacios y Estilos

1. Espaciado entre Contenidos

   • Ajustamos los márgenes y el espaciado entre los elementos para que se vean más compactos y sin espacio innecesario.

2. Problemas con Márgenes Predeterminados

   • Nos encontramos con algunos problemas de márgenes predefinidos que modificamos manualmente utilizando opciones de personalización.

Configuración de las Columnas

1. Agregamos Tres Columnas

   • Después del primer contenedor, agregamos un segundo contenedor con tres columnas, que es lo que tenemos en el diseño original.
   • Cada columna tiene diferentes opciones y contenido (encabezados, párrafos, etc.).

2. Personalización de Tipografía

   • Vamos a Personalizar > Fuentes en Astra para cambiar la tipografía de los encabezados y hacerlos más robustos (por ejemplo, Meryweather, peso 700).

Ajustes Finales y Estilos de Iconos

1. Problema con Iconos

   • No encontramos una opción gratuita para agregar iconos en Spectra. Esto limita algunas opciones de personalización, pero seguimos adelante con otras alternativas.

2. Textos y Botones

   • Finalmente, ajustamos los textos, iconos y botones, cambiamos colores y márgenes para acercarnos lo más posible al diseño original.

Ajuste del icono y estilos

1. Activación del icono:

   • Activamos el icono "cap" (gorrito).
   • Ajustamos el icono en el estilo, haciéndolo más grande.
   • Ajustamos el espaciado:
     • Relleno superior: 20
     • Relleno izquierdo: 20
     • Relleno inferior: 15
     • Relleno derecho: 15
   • Actualizamos y recargamos.

2. Ajustes en el borde y margen:

   • Ajuste del borde superior a 105px.
   • Intentamos aplicar un margen inferior de 10 en los botones, pero hay problemas en el frontend.

3. Duplicación y personalización del botón:

   • Duplication del botón y ajuste del texto.
   • Usamos el botón para ajustar el icono.

4. Finalización de icono y estilo:

   • Recargamos y verificamos que el ajuste del icono esté correcto.
   • Añadimos espaciado y ajustes en los márgenes.

Ajustes de la tipografía y columnas

1. Ajuste de tipografía:

   • Reducimos el tamaño de la fuente a 30px para que se ajuste mejor.

2. Contenedor con dos columnas:

   • Creamos un contenedor con dos columnas.
   • Añadimos un encabezado con texto "Misión liberar el conocimiento".
   • Configuramos el espaciado entre columnas a cero.

3. Estilos y márgenes:

   • Ajustamos el espaciado en los márgenes y el borde superior.
   • Usamos un divisor para separar contenido.

4. Usuarios +900:

   • Cambiamos el texto "Usuarios más 900" a negrita con tamaño 28px.
   • Configuramos el borde superior en el contenedor.

Ajustes de espaciado y estructura

1. Espaciado en el contenedor:

   • Añadimos espaciado entre los dos contenedores y ajustamos el relleno.
   • Eliminamos espacios innecesarios y configuramos las propiedades de Flex.

2. Fondo degradado y tipografía:

   • Configuramos un fondo degradado para el contenedor.
   • Añadimos una imagen de fondo con opacidad.

Personalización avanzada

1. Imagen y opacidad:

   • Añadimos una imagen de fondo con opacidad para mejorar la visualización.

2. Ajustes finales:

   • Configuramos el borde redondeado de 20px para el contenedor.
   • Ajustamos el espaciado y el tamaño de la imagen de fondo.

3. Conclusión:

   • Realizamos ajustes finales y comprobamos que el diseño es funcional.
   • Reflexión sobre las limitaciones de la versión gratuita de Spectra y la versión Pro de pago.
   • Recomendación de Spectra Pro para mayor funcionalidad.

Experiencia y conclusión

• Reflexión final: A pesar de las limitaciones de la versión gratuita de Spectra, se logró conseguir un diseño bastante funcional.