X

Configura el theme Twenty Twenty de WordPress

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.

El tema Twenty Twenty es muy flexible, se integra con Gutenberg y esta pensado tanto para un sitio web empresarial como para un blog personal.

 

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.

Si tienes dudas sobre el uso de imágenes de diferente resolución puedes revisar cómo usar imágenes retina en WordPress.

 

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,

En la mayoría de las veces dejaremos que sólo se muestre el resumen y para ver la entrada completa se debe ingresar al enlace «leer más»

 

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

El tema Twenty Twenty viene con dos plantillas de página llamadas: Cover Template y Full Width Template

 
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.

Las imágenes de fondo suelen ser mayormente imágenes repetitivas como patrones

 

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.

Los ítems de menú de la posición de Social Menú son reemplazados con iconos, esto se detecta en base a la url usada.

En la siguiente imagen se muestra un menú en las posiciones Desktop Horizontal Menu y en Desktop Expanded Menu.

Lo normal es no usar la posición de menú Expanded en desktop, es mejor conservar sólo un menú principal y un menú de móvil para la parte superior.

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.

 

Categorías: Themes
Etiquetas: dashboard

Ver comentarios (22)

  • 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, 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, 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

      h2.entry-title{
        font-size:2rem
      }
      h1.entry-title{
        font-size: 2.4rem;
      }

      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, 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

  • Buenos días, mi pregunta es, quiero quitar el rectángulo rosa gigante que sale en la web justo debajo del titulo de la web, y no lo consigo por ninguna parte, no es un bloque de la página ni tampoco lo encuentro personalizando el theme, ¿cómo podría hacerlo? gracias!

  • Hola, gracias por el tutorial, he aprendido algunas cosas, pero me gustaría desactivar los gravatares que salen en los comentarios, o al menos que no salgan esos que parecen un QR, y me parece que en esta plantilla no hay la opción de quitarlos en ajustes comentarios como en otros temas no? un saludo

    • Hola, desde el backend de tu sitio: Ajustes > Comentarios > Avatares, puedes deshabilitar los avatares o cambiar la configuración.

  • Hola, muchas gracias por responder. En otras ocasiones, hace años, es eso lo que he hecho, pero en esta no me da esa opción, en ajustes de comentarios no hay nada referente a los avatares. No sé si es esta plantilla en concreto, o que ahora Wordpress ha puesto es limitación para los blogs gratuitos de wordpress.com

    • Hola, puedes hacerlo con código CSS, por ejemplo:

      h2.entry-title{
        font-size: 20px;
      }