Cómo editar un header de WordPress usando el editor de sitio y personalizador + consejos útiles

Los headers de WordPress ayudan a causar una primera impresión en los visitantes. Saber cómo editarlos puede mejorar la identidad de tu marca, optimizar la navegación o renovar la apariencia y experiencia de tu sitio web.

WordPress permite a los usuarios editar fácilmente los encabezados de su sitio utilizando el personalizador y el editor de sitio. Ambas opciones son rápidas y aptas para principiantes, la elección dependerá de tus preferencias personales y tu tema de WordPress.

Veamos cómo puedes acceder a estas herramientas y probar algunos consejos para crear encabezados efectivos.

Cómo editar headers de WordPress

Los pasos para personalizar tu encabezado en WordPress dependerán del tema y la versión del software principal que estés utilizando, ya que estos afectan las características y herramientas disponibles.

Dicho esto, los dos métodos comunes para crear headers personalizados son utilizar el editor de sitio y el personalizador. Para este tutorial, utilizaremos la última versión de WordPress 6.5.

Cómo editar un header en WordPress usando el Editor de sitio

El editor predeterminado de WordPress está integrado con Gutenberg desde la versión 5.0 en adelante. Este utiliza bloques para agregar elementos del sitio web, como encabezados, párrafos, listas e imágenes.

Ten en cuenta que no todos los temas son compatibles con el Editor Gutenberg, solo puedes usarlo para trabajar un tema de bloques.

Aquí te mostramos cómo personalizar tu header con el editor de sitio:

1. Navega a Apariencia → Editor en tu panel de WordPress.
2. Una vez que se inicie el Editor del Sitio, elige Patrones en el menú de la barra lateral izquierda.
3. Desplázate hacia abajo hasta la sección de Partes de plantilla, selecciona Cabecera. El número headers depende de tu tema de bloque elegido.

4. Elige el encabezado que quieres personalizar, luego haz clic en el botón de editar para abrir el modo de edición del sitio del header.

5. En la interfaz del editor de encabezado, ajusta, reemplaza o añade nuevos bloques a la parte de la plantilla del header.

6. Cada tema compatible con Gutenberg utiliza diferentes elementos predeterminados en las partes de la plantilla del header. Haz clic en el botón de de Vista de lista para ver todos los bloques en el que estás editando.

En este ejemplo, utilizamos el tema de bloques Twenty Twenty-Four, que utiliza un grupo de bloques en el header predeterminado. Si tu plantilla elegida también la usa, al hacer clic en la flecha se mostrarán todos los bloques agrupados.

Si deseas eliminar el header por completo, puedes borrarlo seleccionando Grupo en la lista. Luego, debes hacer clic en el botón de Opciones en Grupo,y luego en Borrar.

Usa el Insertador de bloques para añadir nuevos elementos, como un lema del sitio o una barra de búsqueda en el encabezado. Encuentra el botón de signo más pasando el cursor sobre la plantilla del encabezado o dentro de la barra de herramientas superior del Editor de sitio.

Luego, busca cualquier bloque disponible para agregar a tu encabezado. Arrastra y suelta los elementos recién añadidos a la posición que quieras. También puedes hacerlo a través del panel de Vista de lista mientras previsualizas los cambios directamente en el lado derecho de la pantalla.

Dado que el tema Twenty Twenty-Four ya tiene los elementos esenciales del encabezado, los mantendremos tal como están. En los siguientes pasos, personalizaremos el título del sitio web, el logotipo y el menú de navegación en el editor completo del sitio.

Cambiando el título del sitio

Puedes ajustar el título del sitio predeterminado en el modo de edición completa del sitio de la plantilla del encabezado, seleccionando el bloque Título del sitio.

Alternativamente, puedes cambiarlo a través del menú de Ajustes en tu panel de WordPress, lo que también ajustará automáticamente el bloque de header.

Añadiendo el logo del sitio

Hay varias formas de cambiar tu logo en WordPress, incluyendo el uso del Editor de sitio. Dado que este tema muestra un logo de forma predeterminada, simplemente reemplaza el marcador de posición seleccionando el bloque Logotipo del sitio en el encabezado.

Haz clic en el botón Añadir un logotipo del sitio en el centro del bloque.

Se va a abrir como ventana emergente la biblioteca de medios. Sube el nuevo archivo de imagen, y no olvides agregar el texto alternativo antes de hacer clic en Seleccionar.

Verás el logo de tu sitio en tu encabezado personalizado. Puedes cambiar su tamaño arrastrando los puntos de selección hacia adentro o hacia afuera. Si quieres reposicionar el logo, usa las teclas direccionales en la barra de herramientas del editor de bloques.

Añadiendo el menú de navegación

El tema de WordPress que hayas elegido puede mostrar un menú de navegación designado en el área del encabezado. Por ejemplo, el tema Twenty Twenty-Four utiliza el bloque Navegación, que te permite editar la estructura y el diseño del menú directamente.

Selecciona el bloque Navegación en el encabezado para editar la entrada del menú y haz clic en Añadir un bloque.

Se creará automáticamente un marcador de posición de link que puedes conectar con cualquier página de tu sitio web.

Para facilitar la edición del menú de navegación, selecciona el bloque y haz clic en Ajustes para abrir el panel.

Allí, puedes cambiar las configuraciones del enlace, que incluyen la edición de la etiqueta, URL, atributo y diseño. Si tienes un CSS personalizado para el menú, también puedes añadirlo.

Si quieres crear un menú desplegable, navega hasta las opciones del enlace personalizado, luego elige Añadir enlace al submenú. Alternativamente, puedes añadir Submenú desde el insertador de bloques.

Una vez que hayas terminado de hacer los cambios deseados, no olvides hacer clic en Guardar antes de cerrar el editor de encabezado.

Cómo editar un encabezado de WordPress usando la opción Personalizar

Si estás utilizando una versión antigua de WordPress o un tema clásico, usa Personalizarpara cambiar la plantilla del header. Dependiendo del tema que actives, los pasos para acceder a la opciónPersonalizar de WordPress pueden variar.

Por ejemplo, el tema predeterminado Twenty Twenty-One y los más antiguos solo tienen la opción Identidad del sitio para personalizar el logotipo y el título del sitio en el header.

Por otro lado, los temas de terceros más populares como Astra y Neve tienen opciones de header dedicadas que ofrecen más flexibilidad para ajustar los elementos del sitio web, como agregar iconos de redes sociales, si actualizas al plan premium.

Para este tutorial, utilizaremos el tema Astra. Sin embargo, los pasos para acceder al personalizador de WordPress son los mismos: ve a Apariencia → Personalizar.

El personalizador del tema Astra tiene un creador de temas de arrastrar y soltar con una interfaz fácil de usar. En el panel de la izquierda, puedes elegir los elementos del sitio web para editar. Mientras, es posible previsualizar los cambios en el lado derecho de la pantalla.

Para comenzar a editar el header de tu sitio web, elige Maquetador de cabeceras de la lista.

Verás los patrones de header para editar en el panel izquierdo y el creador de encabezados en la parte inferior derecha de la pantalla.

Hay 3 filas de headers disponibles de manera predeterminada. Puedes agregar un nuevo elemento de header pasando el cursor sobre el espacio en blanco y haciendo clic en el botón de añadir (+) que aparece.

También puedes mover los elementos del encabezado arrastrándolos y soltándolos en la posición que prefieras. Una vez que coloques todo como desees, puedes  personalizarlos.

Cambiando el título del sitio y el logo

Para abrir la pestaña de configuración general, haz clic en el menú Título y logotipo del sitio en el panel de configuración de headers.

Cliquea Seleccionar el logotipo para abrir la Biblioteca de medios y subir el logo de tu sitio. Después, ajustá el ancho de la imagen a tu gusto. 

También puedes eliminar el marcador de posición de la imagen si no quieres agregar ningún logotipo en tu encabezado.

Al desplazarte por el panel, verás la configuración general del Título del sitio. Allí, puedes editar el texto, administrar su visibilidad en diferentes dispositivos, añadir un eslogan y elegir mostrar ambos elementos en el encabezado o esconderlos.

En la parte inferior del panel de configuración, puedes editar el ícono del sitio. Los visitantes verán esta imagen en sus navegadores cuando recorran tu sitio web.

Puedes configurar cómo se ven el título, el logo y el lema del sitio cambiando a la pestaña Design en el panel de configuración.

Añadiendo el menú de navegación

Para cambiar el menú de navegación en tu nuevo encabezado, haz clic en la opción Menú principal desde el panel de configuración. En cuanto al título del sitio y el logotipo, puedes personalizar las configuraciones generales y de diseño del menú.

Si quieres cambiar las entradas del menú en el encabezado, haz clic en configura el menú aquí para abrir directamente las configuraciones del menú en el panel. De esta manera, puedes realizar las modificaciones mientras las previsualizas en el sitio.

Como alternativa, puedes configurar los menús en a través de Apariencia → Menús y se adaptarán automáticamente al encabezado del tema.

Asegúrate de hacer clic en Publicar antes de cerrar, para que todos los cambios en el header se apliquen.

Por qué es importante el header de WordPress

Como el header de un sitio web WordPress está ubicado en la parte superior, es clave para establecer el tono para la experiencia de usuario.

Un header personalizado de WordPress puede brindarle los siguientes beneficios a tu sitio web:

• Centro de navegación: el área del header suele contener el menú de navegación, guiando a los visitantes para encontrar lo que están buscando de manera eficiente.
• Exhibición de marca: el header es el lugar donde toma protagonismo la identidad de tu marca, ya sea a través de tu logo, eslogan o paleta de colores.
• Atractivo estético: más allá de la funcionalidad, los headers personalizados contribuyen al atractivo visual de tu sitio. Un encabezado bien diseñado mejora el engagement del usuario y hace que tu sitio web se vea más profesional.

En otras palabras, tu header de WordPress va a ser un elemento clave en la experiencia de usuario (UX) de tu sitio, teniendo influencia directa en cómo las personas navegan. Además, impactará en tu optimización para motores de búsqueda (SEO), proporcionando la información de indexación necesaria para los rastreadores de bots.

Consejos para un header de WordPress efectivo

Mantén tu encabezado de WordPress funcional y visualmente atractivo con los siguientes consejos:

Hazlo consistente

Tu encabezado juega un papel fundamental en ayudar a las personas a navegar por tu sitio web. Por este motivo, deberías asegurarte de que la consistencia de su apariencia se alinee con las mejores prácticas de diseño web.

Independientemente de si los visitantes acceden a tu página principal, a una entrada de blog o a una página de producto, mantener un encabezado consistente en todas las páginas brinda una experiencia de usuario fluida. Mantenerlo el header uniforme ayuda a que las personas reconozcan tu sitio web y tengan más confianza.

Además, asegúrate de editar el header si el nuevo contenido de tu sitio web modifica alguno de sus elementos. Por ejemplo, si agregas una página nueva, no olvides actualizar el menú de navegación.

Algunos temas de WordPress ajustan automáticamente la sección del header después de cualquier actualización, mientras que otros no lo hacen. Por eso, es crucial revisarlo después de cada cambio.

Mantén simplicidad en el header

Si bien el header es una sección esencial de tu sitio web, sobrecargarlo puede ser contraproducente. Una de las mejores prácticas de diseño es mantener su minimalismo.

Optimizar el header asegura simpleza en la navegación de tu sitio, para que los visitantes puedan concentrarse fácilmente en elementos cruciales, como el logo de tu sitio, el título, el lema y los menús de navegación.

Si consideras que un elemento de tu sitio web ocupará mucho espacio, colócalo en otra sección del sitio. Por ejemplo, no sería conveniente agregar un bloque de búsqueda grande en un encabezado con un menú de navegación extenso.

Usa imágenes de alta calidad

Te recomendamos mostrar un logo en la sección de imagen del header de tu sitio en WordPress. Esto funcionará como un ancla visual para fortalecer el reconocimiento de tu marca.

Asegúrate de usar imágenes en alta resolución para dar una apariencia profesional, pues un logo borroso puede restarle atractivo visual a tu sitio. Las imágenes de alta calidad contribuyen a causar una excelente primera impresión en los visitantes.

Encargar a un profesional el diseño tu logo o usar una herramienta de creación de logos con IA puede ayudarte con eso.

Presta atención a la compatibilidad con dispositivos móviles

Casi el 60% de las búsquedas en Internet se realizan utilizando un dispositivo móvil. Por este motivo, lo ideal es que los usuarios de móviles no tengan que alejar la pantalla para explorar un sitio web. La versión móvil de tu sitio web tiene que ser fácil de leer y navegar.

Un encabezado adaptable a móviles garantiza una experiencia de usuario fluida en diferentes tamaños de pantalla. Asimismo, mantener tu sitio web compatible con móviles es uno de los factores que mejorarán tu SEO.

Para lograr la adaptabilidad de tu header de forma sencilla, es importante seleccionar temas de WordPress o creadores de páginas optimizados para móviles.

Si quieres comprobar la adaptabilidad de tu sitio web, utiliza herramientas como la prueba de compatibilidad con móviles de Google Search Console.

Conclusión

Cambiar el header en WordPress puede mejorar tanto la estética como la funcionalidad de tu sitio web. Afortunadamente, hacerlo con el editor de sitios y el personalizador es sencillo y se realiza en pocos pasos.

Aparte de explicar los pasos para modificar tu header de WordPress con ambas herramientas, también hemos hablado de cómo asegurar que sea efectivo. Aquí te dejamos un breve resumen:

• Mantén el header de tu sitio consistente para un aspecto más profesional.
• Crea un área de header limpia que se centre en los elementos cruciales, como el logo de tu sitio, el título, el lema y los menús de navegación.
• Sube imágenes de header de alta calidad para mejorar tu branding.
• Usa un tema de WordPress adaptable a móviles para que tu header se ajuste a varios tamaños de pantalla.

Finalmente, utiliza servicios de hosting WordPress confiables para asegurarte de que tu sitio web siempre esté disponible y se cargue rápidamente.

Cómo editar un header de WordPress: preguntas frecuentes

Lee las preguntas más frecuentes para aprender más sobre cómo editar el header de WordPress.