Curso de Astra #3. Creando el encabezado de la web

En la tercera clase del curso básico de Astra vamos a tomar control de la cabecera de nuestra web. Veremos qué podemos diseñar, mostrar, modificar.

Y es que la cabecera de un site es una de las partes más importantes de la web, ya que es donde habitualmente se muestra nuestro logotipo, menú de navegación y probablemente botones de llamada a la acción.

Veremos cómo funciona la cabecera a tres niveles, así como los elementos que forman parte de ella, cómo modificar su aspecto, espaciado, e incluso comportamiento responsive. ¡Vamos a ello!

Este contenido está únicamente disponible para los suscriptores. Puedes identificarte en este enlace o suscribirte a los cursos.

¿Os dais cuenta de todo lo que podemos llegar a hacer? De forma fácil podemos mostrar los elementos que deseemos en las ubicaciones que deseemos, y además podemos elegir el comportamiento responsive.

Gracias al sistema de filas y columnas, podemos generar cualquier tipo de cabecera, en función de si la visita es en una pantalla completa, una tablet o un smartphone. Así pues, en esta ocasión os recomiendo hacer las siguientes tareas:

• Crear un menú de tres columnas trasparente:
  • Logo a la izquierda
  • Menú de navegación a la derecha
  • Botón a la derecha de la navegación
• Crear un doble menú:
  • Primer menú con cuenta de usuario, carrito y búsqueda a la derecha
  • Segundo menú con logo a la izquierda y menú de categorías a la derecha
• Crear un menú responsive sólo para tablets con fondo opaco
  • Logo centrado
  • Botón de hamburguesa que lleve abra un menú off-canvas
• Crear un menú responsive sólo para smartphones
  • Logo centrado
  • Botón de llamada a la acción debajo, también centrado

Estas son solamente unas pocas combinaciones de las que se pueden llegar a hacer, o sea que también os recomiendo seguir trasteando, para ver qué podéis hacer.

Tenéis a vuestra disposición tres filas y tres columnas, para mostrar todo lo que necesitéis. Probad a arrastrar los elementos en las distintas casillas para ver como queda a tiempo real, y elegid el aspecto que más os guste.

Una opción interesante es la de ocultar y mostrar ciertas filas en función de si la visita está en un navegador completo, tablet o smartphone, y ocultar el resto. De esta forma tenemos menús independientes para cada ocasión. ¡A por ello!

Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)