Editar el sitio con Gutenberg 4

La cabecera

Me atrevería a decir que la parte más representativa de tu web es la cabecera.  La cabecera ilustra también todo lo que podemos conseguir al editar y personalizar nuestro sitio con Gutenberg y el tema “Twenty Twenty-three”, que es el tema gratuito que viene con la última versión de WordPress. Hoy en Editar el sitio con Gutenberg 4 te hablo de la cabecera.

Antes de hacer alguna modificación, te recuerdo que lo primero que tienes que hacer es crear un tema hijo de lo que también te he hablado en Tema hijo en WordPress. También puedes hacerlo desde la web de WordPress en donde te proporcionan un entorno seguro para hacer pruebas.

Como te comentaba en artículos anteriores, todo el poder de la personalización de tu sitio radica en las plantillas. En el caso que nos ocupa, un fragmento de plantilla. La cabecera es una parte de plantilla.

Crear nuevas partes de plantilla

Puedes trabajar con las partes de plantilla que vienen con tu tema tal cual, modificarlas, o puedes crear unas nuevas. Cuando creamos nuevas partes de plantillas podemos elegir entre:

• General (No tiene propósito definido. Muy útil para cualquier elemento que quieras volver a utilizar en repetidas ocasiones).
• Cabecera
• Pie de página

Se pueden borrar las personalizaciones que hayamos realizado en las plantillas. Cuando estemos en la lista de plantillas se muestra un puntito azul que nos muestra que la plantilla ha sido modificada haciendo clic en los tres puntitos nos dan la opción de eliminar las personalizaciones y de renombrar la plantilla.

Bueno, pues después de estos preámbulos vamos con la cabecera.

Cabecera

La cabecera es quizá la parte más importante de tu web. Va a acompañar al usuario en su viaje a través de tu sitio. Será la parte que mejor te defina por eso es importante que la trabajes bien.

Las posibilidades son infinitas. Nuestra cabecera puede tener una imagen de fondo con el grado de opacidad de nuestra elección o un color que podrá ser uniforme o degradado. Podemos crear la cabecera desde cero arrastrando todos los bloques que deberían formar parte de ella y modificándolos a nuestro gusto.

Estos bloques deberían formar parte de tu cabecera:

• Logo. Tu identidad.
• Título de la web. Haz que te recuerden.
• Navegación. Haz que el usuario se mueva libremente por tu web.
• Búsqueda. Para que todo el mundo encuentre lo que busca.
• Mini–carrito. Imprescindible si tienes una tienda.

Podremos colocar estos elementos en el orden que queramos y apilarlos en horizontal o vertical. También es posible definir la separación entre ellos y la disposición en las versiones ordenador y móvil.

La barra de navegación

Los elementos del menú aparecen como una lista, para poder cambiarlos de lugar necesitamos convertirlos en enlaces. Esto es algo que podemos hacer desplegando los elementos que tenemos haciendo clic en las tres líneas en forma de escalera. Después elegimos la barra de navegación y en los tres puntitos que aparecen a la derecha seleccionamos “Convertir en enlaces”.

Una vez hecho esto podremos reorganizarlos a nuestro gusto en el menú. Hay un montón de cosas que podemos hacer con nuestro menú.

Para añadir elementos al menú hacemos clic en el más y podemos elegir enlazar páginas, posts, etiquetas o categorías, o un enlace personalizado a otra web, también podemos transformarlo en el logo, una caja de búsqueda o los iconos sociales.

Podemos crear el borrador de una página que desarrollaremos después. Para esto damos el título de la página que queramos, que aún no existe, por ejemplo «Acerca de». Nos aparecerá un «Crear página en borrador: Acerca de», le damos clic y tendremos un elemento de menú con el nombre «Acerca de (borrador)». En el apartado de “Páginas”, al que podemos acceder desde la barra lateral de WordPress, tendremos una página “Acerca de” esperando para que la editemos y la publiquemos.

Edición de la barra de navegación

Al seleccionar un bloque nos aparece la barra de herramientas para ese bloque en concreto y también los ajustes en el lado derecho de la pantalla. Las opciones cambian dependiendo de si tenemos seleccionado el menú o sólo un elemento.

Cuando seleccionamos un elemento, Si el tema lo soporta podemos desplegar una descripción en el menú, entre otras cosas.

Cuando seleccionamos el menú tenemos la opción de definir un menú tipo hamburguesa para el móvil, o decidir si los elementos se apilan en horizontal o en vertical. Desde aquí también se cambia el tamaño de fuente y el color.

Es posible añadir un submenú para cualquier elemento haciendo clic en el icono que está junto al icono del enlace en la barra de herramientas.

Si volvemos a añadir un menú añadiremos el mismo menú que hemos creado. Podemos crear un nuevo menú desde los controles de la derecha del editor.

Hasta aquí la entrega de hoy, espero haberte ayudado.

¿Qué tal va la edición de tu cabecera? Déjamelo en los comentarios.