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:
- Abrir el editor de plantillas
- Crear una cabecera con bloques
- Añadir bloques y elementos de la cabecera (logo, nombre del sitio y menú)
- Agrupar y alinear elementos de la cabecera de WordPress
- Añadir una línea de separación inferior
- Configurar y gestionar el menú de WordPress con bloques
- Elegir la cabecera a mostrar en la página web
- Configurar y ajustar el nombre del sitio
- Añadir una imagen de fondo en la cabecera de WordPress
- 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.

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.

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.

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.

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.

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