WordPress 5.3 nos trae un nuevo tema por defecto llamado Twenty Twenty, al igual que el theme Twenty Nineteen, esta pensado para trabajar con Gutenberg. Twenty Twenty esta basado en el tema Chaplin, sin embargo el diseño final es muy diferente al tema base que se utilizó.
1- Generalidades
Cuando instales o actualizas WordPress a partir de la versión 5.3 verás que tienes ahora el nuevo tema Twenty Twenty disponible, tal como se muestra en la siguiente imagen.
Desde esta pantalla puedes ingresar a la opción de personalizar para configurar el theme.
2- Identidad del Sitio
En esta sección se puede definir el título del sitio y una descripción breve, adicionalmente se puede usar una imagen como logo, la novedad es que ahora es posible mostrar el logo en resolución retina, la idea es subir el logo al doble de tamaño para que se escale a la mitad cuando se visualice en pantallas retina.
3- Configuración de Colores
El tema permite configurar colores para la cabecera y pie, y otro color diferente para la parte media en donde irá el contenido, tal como se muestra en la siguiente imagen.
4- Opciones del Tema
En esta sección podemos configurar si se muestra o no la opción de búsqueda que aparece en la cabecera, además se puede configurar si las entradas se mostrarán como resumen o de manera completa en el listado de entradas,
5- Cover Template
El tema tiene la opción de que la imagen destacada se muestre con un color de overlay, se puede configurar el color de fondo y el color del texto, tal como se muestra en la siguiente imagen.
Para poder ver el efecto de esta configuración en una página, será necesario establecer una plantilla de página tal como se muestra en la siguiente imagen
Adicionalmente tendremos que agregar a la página una imagen destacada, al final el resultado será algo similar a la siguiente imagen
6- Imagen de Fondo
Anteriormente habíamos visto que se puede establecer un color de fondo en el contenido, sin embargo también es posible colocar alguna imagen como fondo, cuando establecemos una imagen de fondo veremos una configuración similar a lo que se muestra en la siguiente imagen.
7- Posiciones de Menus
El tema viene con cinco posiciones de menú, tal como se muestra en la imagen adjunta. La novedad es que para desktop tenemos dos posiciones, una posición desktop normal y otra desktop expanded que muestra el menú a modo de sidebar desplegable.
En la siguiente imagen se muestra un menú en las posiciones Desktop Horizontal Menu y en Desktop Expanded Menu.
La siguiente imagen muestra el aspecto que tiene el menú Desktop Expanded, similar al menú móvil.
8- Zona de Widgets
El tema sólo incluye dos posiciones para Widgets y que se ubican en la parte inferior del tema, tal como vemos en la siguiente imagen.
9- Página de Inicio
Si instalas un WordPress 5.3, por defecto viene una página de inicio asignada, tal como se muestra en la siguiente imagen.
La pagína llamada «The New UMoMA Opens its Doors» esta construída íntegramente en Gutenberg.
Conclusión
Tal como hemos podido ver, el nuevo tema Twenty Twenty de WordPress es un tema que tiene las opciones de configuración mínimas para estilizar un sitio web profesional, además de venir preparada para el editor Gutenberg lo cual nos brinda flexibilidad al momento de diseñar nuestras páginas.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 3,67 de 5)
Cargando...
Hola, agradecerte por el tutorial, relamente muy valioso, queria hacer una consulta, esta plantilla me gusta mucho, pero como podria insertar un slide de imagenes en la cabecera. gracias
Hola, lamentablemente veo que no hay posición de Widgets para la parte superior en ese theme. Algo que podrías evaluar es usar un plugin de slider, por ejemplo MetaSlider, este tipo de plugins te crean un shortcode que puedes insertar en la página de inicio del sitio. La otra opción sería crear una nueva zona de Widgets, tal como lo planteo en: https://decodecms.com/anadir-una-nueva-zona-de-widgets-a-un-theme-wordpress/
Hola, se podría poner una imagen de fondo que ocupara toda la página?? o sea, la cabecera y el pie de página también con la imagen.
O poner el color de fondo de la cabecera y el pie transparente??
Saludos.
Hola, podrías revisar el siguiente artículo que explica cómo localizar los cambios CSS que puedas hacer con el Inspector de código. https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
hola hay un demo de la plantilla inicial no lo he podido encontrar?
Hola, efectivamente, no encontré un sitio web de una demo como se muestra en la imagen del theme. Sin embargo puedes guiarte de lo que hay en este artículo para obtener un resultado similar a la demo.
Hola! Los títulos de las páginas tienen una letra bastante grande, pero no me deja cambiarlos como en los bloques…se puedo mediante algún código en el CSS modificar ese tamaño?
Hola, si, prueba con el siguiente código CSS, uno es para la el título que aparece en la lista de entradas h2, y el otro para el detalle de artículo h1
Puedes cambiar los valores e incluso la unidad rem si lo deseas
Saludos.
Hola Jhon, con ese código me cambia bien pero solo para ordenadores. Como sería para que el cambio también funcione en móviles.
Gracias y saludos
Hola
Si que debería cambiar, borra cache de tu navegador o pruébalo en tu navegador en modo responsive.
Hola! Podría recomendarme algún plugin para incorporar una sidebar al tema?
Hola, posiblemente algún constructor te puede ayudar, sin embargo evaluaré hacer un artículo sobre esto para agregarlo por código. Saludos.
Hola cómo estás ? Existe alguna forma de cambiar el color de letra del menú? Ya que no se encuentran los grises por ejemplo en la paleta de colores permitida
Hola, tendrías que hacerlo por CSS, revisa este artículo de referencia: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/