• 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 Tema Twenty Nineteen WordPress

Configura el Tema Twenty Nineteen WordPress

Configura el Tema Twenty Nineteen WordPress

[ 6 febrero 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Apariencia - Themes - Twenty Nineteen

 
Desde esta pantalla puedes ingresar a la opción de personalizar para realizar los cambios en la configuración del theme.

El theme Twenty Nineteen esta pensado para un blog profesional, sin embargo es posible adaptarla para una marca empresarial
Los bloques de ejemplo, imágenes y contenido estan basados en la demo del theme Twenty Nineteen en WordPress.com

 

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.

Opción de identidad del sitio en personalización del theme

 
Toda esta configuración se mostrará en la parte superior del sitio, la imagen que agregues se verá como un círculo.

Parte superior del theme mostrando información del sitio

 

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.

Personalización de colores sitio

 
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.

Tres posiciones por defecto tema Twenty Nineteen

 
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ú.

Menús en Front-end del tema Twenty Nineteen

 

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.

Zona de Widgets para el pie de página

 
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:

Front-end con Widgets agregados

 

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.

Opciones en a configuración portada

 

Para aprender más sobre esta configuración, revisa el artículo de Página de Inicio y Página de Entradas en WordPress

 

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:

Añadir imagen fondo con Gutenberg

 
Luego agregamos un bloque de párrafo con la opción de capitalizar tal como se muestra en la siguiente imagen:

Capitalizar texto Gutenberg

 

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:

Agregar Columnas y medios y texto en Gutenberg

 
Agregamos una nueva sección colocando un bloque de encabezado, tal como se muestra en la siguiente imagen:

Agregar Encabezado en Gutenberg

 
Agregamos una frase usando el bloque de Párrafo de cita, tal como se muestra a continuación:

Párrafo de cita en Gutenberg

 
Agregamos un bloque de Galería de imágenes, con la configuración que aparece en la siguiente imagen:

Galería de imágenes en contenido Gutenberg

 
Agregamos un bloque de espaciado tal como se muestra en la siguiente imagen:

Agregar espaciador texto en Gutenberg

 
Finalmente agregamos un bloque de cita, similar a como se muestra en la siguiente imagen:

Agregar cita texto Gutenberg

 

8- Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Resultado final configuración inicio

 

¿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 theme Twenty Twenty de WordPressConfigura el theme Twenty Twenty de WordPress
  • Twenty Seventeen WordPressConfigura el Tema Twenty Seventeen WordPress
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. danilo

    11 agosto, 2019

    Cómo podría hacer para mostrar resumenes de los post?

    • Jhon Marreros Guzmán

      11 agosto, 2019

      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.

  2. francisco

    6 febrero, 2020

    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

    • Jhon Marreros Guzmán

      6 febrero, 2020

      Hola, si podrías quitarlo con CSS, prueba con el siguiente código CSS:

      .entry .entry-title::before,
      h1:not(.site-title)::before, 
      h2::before{
        display: none;
      }

      Puedes agregar este código en la configuración del theme: Apariencias > Personalizar > CSS.

      Saludos.

  3. francisco

    7 febrero, 2020

    Muchísimas gracias Jhon, me va a quedar una web estupenda !!
    Grande !

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

Añadir código de Google Tag Manager sin plugins en WordPress

Qué son los Shortcodes en WordPress y cómo usarlos

Remover el slug de la página padre en WordPress

Copiar al portapapeles en WordPress sin plugins

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