• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Configura el theme Twenty Twenty de WordPress

Configura el theme Twenty Twenty de WordPress

Configura el theme Twenty Twenty de WordPress

[ 27 noviembre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Pantalla temas WordPress Twenty Twenty

 
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.

Configurar identidad del sitio Twenty Twenty

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.

Configurar colores en Twenty Twenty

 

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,

Configurar opciones del tema en Twenty Twenty

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.

Opcion de Cover Template en Twenty Twenty

 
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

Plantilla de página Cover Template

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

Resultado página Cover Template

 

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.

Imagen de fondo en Twenty Twenty

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.

Posiciones de menús en Twenty Twenty

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.

Posiciones Desktop Horizontal y Expanded de Twenty Twenty

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.

Aspecto del menú en movil

 

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.

Zona de Widgets en Twenty Twenty

 

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.

Configurar inicio Twenty Twenty

 
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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Configura el Tema Twenty Nineteen WordPressConfigura el Tema Twenty Nineteen WordPress
  • Twenty Seventeen WordPressConfigura el Tema Twenty Seventeen WordPress
  • Agregar rel=0 a videos YouTube de manera automática en WordPressAgregar rel=0 a videos YouTube de manera automática en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 3,67 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. aldo nestares

    23 enero, 2020

    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

    • Jhon Marreros Guzmán

      23 enero, 2020

      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/

  2. Angel Fraiz

    5 abril, 2020

    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.

    • Jhon Marreros Guzmán

      5 abril, 2020

      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/

  3. natalia

    24 junio, 2020

    hola hay un demo de la plantilla inicial no lo he podido encontrar?

    • Jhon Marreros Guzmán

      24 junio, 2020

      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.

  4. Marta

    28 febrero, 2021

    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?

    • Jhon Marreros Guzmán

      28 febrero, 2021

      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.

      • Alexander Mena

        6 junio, 2021

        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

        • Jhon Marreros Guzmán

          6 junio, 2021

          Hola
          Si que debería cambiar, borra cache de tu navegador o pruébalo en tu navegador en modo responsive.

  5. Ana

    11 junio, 2021

    Hola! Podría recomendarme algún plugin para incorporar una sidebar al tema?

    • Jhon Marreros Guzmán

      15 junio, 2021

      Hola, posiblemente algún constructor te puede ayudar, sin embargo evaluaré hacer un artículo sobre esto para agregarlo por código. Saludos.

  6. Caro

    12 julio, 2021

    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

    • Jhon Marreros Guzmán

      14 julio, 2021

      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/

  7. Paz Fernández Sánchez

    24 noviembre, 2021

    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!

    • Jhon Marreros Guzmán

      24 noviembre, 2021

      Hola, no detecto lo que comentas, sin embargo puedes probar ocultarlo por CSS, revisa este artículo de referencia: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

  8. Ana

    19 febrero, 2022

    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

    • Jhon Marreros Guzmán

      21 febrero, 2022

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

  9. Ana

    22 febrero, 2022

    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

    • Jhon Marreros Guzmán

      28 febrero, 2022

      Hola, si tienes tu sitio en WordPress.com puede ser que haya algunas diferencias.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Estilos CSS por defecto que genera WordPress

Búsqueda en tabla personalizada en WordPress

Generación de archivos de traducción en WordPress

Mostrar categorías y etiquetas en lista de productos WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados