Diseño web de la página inicial del portafolio: videotutorial.

Play

En este video tutorial, nos sumergimos en la parte más divertida, el diseño. En esta quinta clase del curso gratuito donde hacemos un sitio web desde cero que es un portafolio, vamos a dejar completamente terminada la página inicial, la home de la web.

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 de ejemplo. Observamos que consta de cinco contenedores, cada uno con dos contenedores internos: uno para el encabezado, párrafo y botón, y otro para la imagen. Esto se repetirá en todos los contenedores de la Home.

1. Añadimos contenedores y elementos.

Vamos a Páginas > Añadir nueva y creamos la página Home. Añadimos el primer bloque de contenedor de Spectra con dos contenedores internos. En el primer contenedor, agregamos un encabezado H1 con el subencabezado «Ilustrador», un párrafo y un bloque de botones, todos del plugin Spectra.

2. Damos estilo de diseño a los elementos.

Configuramos el color del subencabezado a blanco. Añadimos y configuramos el texto del párrafo y el botón «Contact». Ajustamos la alineación y el estilo del botón, aplicando un fondo degradado y quitando el borde.

3. Añadimos imágenes.

En el segundo contenedor, añadimos una imagen desde la biblioteca de medios. Aplicamos un borde degradado al contenedor de la imagen. Configuramos la superposición de la imagen para mostrar un encabezado y leyenda al pasar el cursor, y añadimos el enlace a la página correspondiente (Sobre mí).

4. Duplicamos contenedores.

Duplicamos el contenedor inicial cuatro veces para completar los cinco contenedores necesarios. Ajustamos el contenido y enlaces de cada uno según el diseño de ejemplo (Personajes, Espacios, etc.).

5. Diseño responsive de la Home.

Ajustamos la vista móvil para que la imagen aparezca arriba, seguida del encabezado, descripción y botón alineado a la izquierda.

Descarga archivos curso diseño web de un portafolio.

Revisamos y ajustamos márgenes y espaciado en la vista móvil. Añadimos el pie de página (footer) desde el personalizador de Astra, aplicando el estilo y CSS necesario para un diseño coherente. Publicamos y revisamos nuestra página inicial terminada.

Aquí tienes el código CSS, simplemente lo copias y pegas como te indico en el video.

/*TEXTO DEL FOOTER*/

.ast-footer-copyright p {
    background: linear-gradient(266deg,rgb(92,54,126) 0%,
                 rgb(17,86,127) 100%)!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
}

En el siguiente video, diseñaremos la página «Sobre mí» y continuaremos con las demás páginas necesarias para completar nuestro portafolio. Si tienes alguna duda o comentario, no dudes en hacérmelo llegar a través de la página de contacto del blog.