Crear página inicial con el tema Twenty Nineteen – Parte 2

En esta segunda parte agregaremos elementos adicionales a nuestra página inicial basada en el tema Twenty Nineteen. Nos enfocaremos en los bloques de Gutenberg que nos permiten dar formato a columnas y a las secciones de fondo con videos y texto. Asi mismo daremos un vistazo al bloque de párrafo de cita y a los bloques de  imágenes.

Adicionando el formato de columnas

Algo que vale la pena mencionar es que cada vez que adicionamos un bloque, no es necesario recorrer el listado completo de los mismos. Podemos utilizar el buscardor en la parte superior para poder visualizar el bloque que necesitamos.  En la imagen siguiente hemos digitado solamente “espaciador” y podemos ver que justo debajo sem muestra el bloque del mismo nombre

Bloque espaciador

Para ajustar la altura del espaciador arrastramos el pequeño círculo azul hasta la posición deseada.

Como  paso siguiente insertaremos un bloque de formato de columna en el cual colocaremos un video de fondo y una parrafo con cita.

Columnas Gutenberg

Incrustar bloques dentro de otro bloque

Otra característica muy interesante al trabajar con los bloques de Gutenberg es que se puede “incrustar” un bloque dentro de otro, tal como un fondo con video dentro de una de las columnas. También, para visualizar la lista de bloques podemos utilizar la tecla “/” tal como vemos en la siguiente imagen.

Seleccionar bloques con /

En este caso seleccionamos el bloque de fondo y asignaremos un video desde  nuestro computador.

Fondo para seleccionar video

Una vez seleccionamos el video, nuestra página en vista de edición se mostrará de acuerdo a la figura siguiente:

Fondo con figura adicionada

Al incluir el Párrafo de cita utilizamos el formato de bloque que se muestra a la derecha de la imagen a continuación.

Párrafo de Cita

Bloques Adicionales

Ahora incluiremos  unos bloques más siguiente la misma lógica.

Adicionaremos un bloque de parrafo de cita con las configuraciones indicadas en la imagen para que la cita pueda desplegarse a lo ancho de la página.

Parrafo de Cita

Asignaremos los estilos de bordes en la parte superior e inferior  en lugar del color sólido.

Parrafo de Cita

Agregamos un bloque de título como el siguiente…

Bloque de título

Colocamos las imágenes de los profesores dentro de un formato de 3 columnas. Para poder definir el numero de columnas damos un clic sobre el ícono de propiedades (ícono con seis puntos) como se muestra a continuación.

Columnas

Asignamos la cantidad de columnas en el cuadro de configuración

Numero de columnas

Y para finalizar adicionamos las imágenes. Utilizamos la opción de acceso a los bloques digitando “/”.

Adición de imágenes

Veamos el progreso hasta el momento.

Y el resultado hasta este momento de nuestra página inicial es la siguiente:

Avance de la página

Solo nos restaría acomodar los widgets en el pie de página para finalizar.  Los pasos a seguir los explicaremos en la tercera y última parte de esta demostración de edición del tema Tweenty Nineteen utilizando Gutenberg.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *