Crear una cabecera con bloques de Gutenberg en WordPress

por | Guías de WordPress

WordPress está insertando de forma nativa una especie de constructor de páginas a través de los bloques de Gutenberg. Lo que en un principio parece que tendría que ser algo más cómodo e intuitivo, es en realidad algo caótico y difícil de entender si no se explica bien, como ocurre a la hora de crear una cabecera con bloques personalizada.

En el vídeo podéis seguir todo el proceso de creación de una cabecera con bloques donde incluyo los siguientes pasos:

  1. Abrir el editor de plantillas
  2. Crear una cabecera con bloques
  3. Añadir bloques y elementos de la cabecera (logo, nombre del sitio y menú)
  4. Agrupar y alinear elementos de la cabecera de WordPress
  5. Añadir una línea de separación inferior
  6. Configurar y gestionar el menú de WordPress con bloques
  7. Elegir la cabecera a mostrar en la página web
  8. Configurar y ajustar el nombre del sitio
  9. Añadir una imagen de fondo en la cabecera de WordPress
  10. Ajustar los estilos y las propiedades de la estructura de la página web

Cómo crear una cabecera con bloques

Lo primero que tenemos que saber es que en los temas que se editan con bloques ha desaparecido el personalizador del tema desde donde podíamos configurar muchos aspectos de la web.

Ahora todo se hace desde las opciones de cada bloque que insertemos y desde el apartado de estilos de la página.

Para crear una cabecera personalizada tenemos dos opciones, modificar la que viene por defecto o crear una partiendo de cero.

Añadir nueva plantilla de cabecera con bloques
Añadir nueva plantilla de cabecera

Al iniciar la construcción de la cabecera con bloques, veremos que todos los bloques de WordPress tienen la posibilidad de ser insertados en cualquier sitio, lo que hace que sea más difícil entender cómo funciona o debería ser una cabecera de una página web.

No debería ser un elemento sobrecargado con excesiva información, ya que se repetirá en toda la web y puede llegar a ser muy pesada y ralentizar la carga del sitio constantemente.

Por eso en el vídeo solo me centro en los elementos principales, como el logo, el nombre del sitio y un menú de navegación, aunque se podría añadir también un buscador o enlaces a redes sociales.

Bloques básicos para la cabecera de WordPress
Bloques básicos para la cabecera

En el vídeo superior podéis aprender cómo se colocan y agrupan estos elementos.

Cómo gestionar el menú con bloques

Al desaparecer el personalizador desde donde se creaban los menús, ahora hay que crearlos con el bloque de «navegación» directamente en el diseño de la página.

Aunque su funcionamiento parece sencillo, los que venimos de versiones anteriores de WordPress vemos que no lo es tanto.

La forma de añadir enlaces en el menú ahora se hace directamente como elementos independientes, cada ítem del menú es un bloque de «enlace personalizado» dentro del bloque de «navegación».

Cada vez que queramos añadir un enlace tenemos que colocar un bloque de «enlace personalizado» y configurarlo para que apunte donde nosotros queremos».

La ventaja de este sistema (que alguna hay), es que podemos personalizar cada enlace de forma individual con las opciones del bloque que aparecen en la columna de la derecha.

Menú con bloques de Gutenberg
Menú con bloques de Gutenberg

Para recolocar los enlaces añadidos o eliminar el que no usemos, es necesario desplegar el listado de los bloque utilizados y gestionar los ítems del menú desde ahí.

Seleccionando cada elemento y manteniendo pulsado el ratón se pueden mover de posición, y para borrar el que no queramos, picamos en los tres puntitos de la derecha y seleccionamos eliminar.

Eliminar elemento del menú
Eliminar elemento del menú

Por último, para configurar submenús, hay que indicarlo en las opciones del bloque, indicando en cualquiera de los enlaces personalizados del menú que de él se desplegará un segundo nivel. Luego colocaremos dentro de ese enlace (convertido en un sub bloque) los links del submenú que queramos de la misma forma que lo hemos hecho con los elementos del menú principales.

Crear submenús con Gutenberg

He intentado mostrar de la forma más sencilla posible el proceso de crear una cabecera con bloques de Gutenberg, pero como podéis ver, aún queda mucho camino por hacer para conseguir que la forma de construir páginas sea tan intuitiva como lo es en el constructor Divi o Elementor.

Si quieres aprender a manejar WordPress como un profesional, te dejo este curso completísimo y GRATUITO que puedes consultar las veces que quieras.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.