WordPress 5.0 llegó con un nuevo tema llamado Twenty Nineteen, este theme esta adaptado a la personalización de contenido con Gutenberg y aprovecha todas sus ventajas. En este artículo verás cómo configurar Twenty Nineteen y adaptarlo a tus necesidades.
1- Generalidades
Luego de actualizar o instalar la versión 5.x verás que tienes la opción de activar y personalizar el nuevo theme Twenty Nineteen.
Desde esta pantalla puedes ingresar a la opción de personalizar para realizar los cambios en la configuración del theme.
2- Identidad del sitio
En la personalización tienes la opción de Identidad del Sitio, tal como se muestra en la imagen adjunta, verás que puedes cambiar el nombre del sitio, colocar una descripción y añadir una imagen.
Toda esta configuración se mostrará en la parte superior del sitio, la imagen que agregues se verá como un círculo.
3- Personalizar Colores
Twenty Nineteen tiene la opción de definir un color corporativo para tu sitio, lo puedes hacer desde las opciones de personalización, tal como se muestra en la siguiente imagen.
En esta pantalla también se puede ver una opción de aplicación de filtro en las imágenes usando el color seleccionado, esta característica la notarás cuando agregues una imagen destacada a tus entradas.
4- Opciones de Menús
El tema tiene por defecto tres posiciones de menú que se detallan a continuación.
Menú Principal: Este menú se mostrará en la parte superior al costado de la imagen del logo y bajo el nombre del sitio, aquí puedes colocar las opciones principales del sitio.
Menú del Pie de Página Se mostrará enlaces de menú en el pie de página del sitio. Puedes usarlo para poner enlaces de la política de privacidad o contacto.
Menú de redes sociales: Este menú se mostrará debajo del menú principal, los iconos de las redes se generan automáticamente de acuerdo a la url que ingreses en los enlaces personalizados del menú.
5- Zona de Widgets
El tema Twenty Nineteen tiene por defecto sólo una zona en donde puedes agregar Widgets, lo puedes comprobar desde Apariencia – Widgets, tal como se muestra en la imagen.
Puedes agregar cualquier tipo de Widgets en esta posición y se mostrará en la parte inferior del theme, en nuestro ejemplo agregamos dos Widgets de HTML Personalizado obteniendo el siguiente resultado:
6- Ajustes de Portada
Para los ajustes de portada te recomiendo tener una página de Bienvenida y una página para de Blog, tal como se muestra en la siguiente imagen.
7- Construcción de la página de Inicio con Gutenberg
Para el maquetado de la página de inicio del theme Twenty Nineteen usamos Gutenberg, una de las primeras opciones es colocar un bloque de imagen de fondo con la siguiente configuración que se muestra en la siguiente imagen:
Luego agregamos un bloque de párrafo con la opción de capitalizar tal como se muestra en la siguiente imagen:
Agregamos la sección de servicios con un bloque de columnas y en cada columna un bloque de medios y texto con el cual puedes agregar una imagen y un texto. La imagen será necesario redimensionarla manualmente, al final obtendremos algo similar a la siguiente imagen:
Agregamos una nueva sección colocando un bloque de encabezado, tal como se muestra en la siguiente imagen:
Agregamos una frase usando el bloque de Párrafo de cita, tal como se muestra a continuación:
Agregamos un bloque de Galería de imágenes, con la configuración que aparece en la siguiente imagen:
Agregamos un bloque de espaciado tal como se muestra en la siguiente imagen:
Finalmente agregamos un bloque de cita, similar a como se muestra en la siguiente imagen:
8- Resultado Final
Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:
Ver comentarios (5)
Cómo podría hacer para mostrar resumenes de los post?
Hola, puedes usar un Leer más, en Gutenberg lo puedes encontrar como un bloque "más" o "more", revisa también el siguiente artículo de referencia: https://decodecms.com/leer-mas-y-extracto-en-wordpress/ , recuerda que estos resúmenes sólo se verán en una página que liste varias entradas.
Hola, gran vídeo, estoy configurando mi primera web con su ayuda.
Estéticamente me gusta, pero para darle un toque más personal, querría quietar esa pequeña línea horizontal que se sale encima de los encabezados, podría quitarse de algún modo ??
Saludos
Hola, si podrías quitarlo con CSS, prueba con el siguiente código CSS:
Puedes agregar este código en la configuración del theme: Apariencias > Personalizar > CSS.
Saludos.
Muchísimas gracias Jhon, me va a quedar una web estupenda !!
Grande !