Diseño web de la página Sobre mí.

Play

¡Muy buenas, bienvenida, bienvenido! En esta sexta clase del curso gratuito de diseño web de un portafolio para presentar tus trabajos creativos en internet, nos enfocamos en crear la página «Sobre Mí». Además, personalizaremos y estilizaremos el encabezado (header) y añadiremos un menú secundario en el pie de página (footer). Este tutorial te guiará paso a paso en la construcción de una página «Sobre Mí» profesional y atractiva.

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.

Para empezar, analizamos la estructura de la página demo y replicamos su diseño. La página consta de cuatro contenedores principales, este es el resumen de la lección.

1. Primer contenedor.

Contiene una imagen con un borde degradado y un encabezado con un subencabezado. Añadimos un párrafo debajo del encabezado para presentarnos y añadir el texto que creas oportuno.

2. Segundo contenedor.

Este contenedor es para los logos de empresas con las que has trabajado, herramientas con las cuales trabajas, ilustraciones personalizadas, o lo que tu creas, el motivo de añadirlas es ropmper la uniformidad del diseño y crear cierto dinamismo.

3. Tercer contenedor.

Aquí puedes ampliar la información sobre ti, proporcionando más detalles personales o profesionales que quieras compartir en tu portafolio.

4. Cuarto contenedor.

Está dividido en dos columnas, una vacía y la otra con enlaces a tus redes sociales y un correo electrónico. También puedes añadir un botón con el enlace a la página de contacto que haremos en la siguiente lección.

Personalizamos el encabezado (header) de toda la web desde el personalizador de Astra. Cambiamos el color de fondo, el color del logotipo y del título, y añadimos un botón de contacto enlazado a la página de contacto.

En la configuración de la página «Sobre Mí», ajustamos el color del subencabezado a blanco y añadimos los textos correspondientes. También alineamos y estilizamos el botón con un fondo degradado y sin borde. Para la imagen, aplicamos un borde degradado al contenedor y configuramos la superposición para mostrar un encabezado y leyenda al pasar el cursor, enlazándola a la página «Sobre Mí». Posteriormente, duplicamos los contenedores iniciales según el diseño de ejemplo, ajustando el contenido y los enlaces.

En la configuración para móvil, revisamos y ajustamos los márgenes y espaciados para asegurar una visualización óptima. Añadimos un menú en el pie de página utilizando el personalizador de Astra, mejorando la usabilidad al permitir a los visitantes acceder fácilmente a diferentes secciones del sitio web. Finalmente, publicamos y revisamos la página para asegurarnos de que todo esté configurado y funcione adecuadamente.

La página «Sobre Mí» es muy interesante para cualquier portafolio, ya que permite a los visitantes, a parte de conocer tus habilidades como profesional, conocer más sobre ti fuera de del ámbito estrictamente laboral.

En la siguiente lección, nos centraremos en diseñar la página de contacto.  Si tienes alguna duda o comentario, no dudes en hacérmelo llegar a través de la página de contacto del blog.