{"id":44634,"date":"2025-01-11T03:52:12","date_gmt":"2025-01-11T02:52:12","guid":{"rendered":"\/tutoriales\/?p=44634"},"modified":"2026-03-10T16:27:20","modified_gmt":"2026-03-10T15:27:20","slug":"como-editar-un-header-de-wordpress","status":"publish","type":"post","link":"\/mx\/tutoriales\/como-editar-un-header-de-wordpress","title":{"rendered":"C\u00f3mo editar un header de WordPress usando el editor de sitio y personalizador + consejos \u00fatiles"},"content":{"rendered":"

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.<\/p>

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

Veamos cómo puedes acceder a estas herramientas y probar algunos consejos para crear encabezados efectivos.<\/p>

Cómo editar headers de WordPress<\/h2>

Los pasos para personalizar tu encabezado en WordPress<\/a> 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.<\/p>

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

Cómo editar un header en WordPress usando el Editor de sitio<\/h3>

El editor predeterminado de WordPress está integrado con Gutenberg<\/a> 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.<\/p>

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

¡Importante!<\/strong> Si no ves el menú del Editor<\/strong> en el panel, tu tema de WordPress no admite el editor completo del sitio. Como alternativa, usa la opción Personalizar<\/strong>.<\/p><\/div><\/p>

Aquí te mostramos cómo personalizar tu header con el editor de sitio:<\/p>

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

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

    \"Editar<\/figure>

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

    \"Sección<\/figure>

    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<\/strong> para ver todos los bloques en el que estás editando.<\/p>

    \"Vista<\/figure>
      \n
    1. \n<\/li><\/ol>

      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.<\/p>

      \"\"<\/figure><\/div>

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

      \"Vista<\/figure><\/div>

      Usa el Insertador de bloques<\/strong> 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.<\/p>

      \"Insertador<\/figure>

      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<\/strong> mientras previsualizas los cambios directamente en el lado derecho de la pantalla.<\/p>

      Dado que el tema Twenty Twenty-Four<\/strong> 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.<\/p>

      Cambiando el título del sitio<\/strong><\/p>

      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<\/strong>.<\/p>

      \"Sección<\/figure><\/div>

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

      \"Ajustes<\/figure>

      Añadiendo el logo del sitio<\/strong><\/p>

      Hay varias formas de cambiar tu logo en WordPress<\/a>, 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<\/strong> en el encabezado.<\/p>

      Haz clic en el botón Añadir un logotipo del sitio<\/strong> en el centro del bloque.<\/p>

      \"Añadir<\/figure><\/div>

      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<\/strong>.<\/p>

      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.<\/p>

      Añadiendo el menú de navegación<\/strong><\/p>

      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<\/strong> utiliza el bloque Navegación<\/a>, que te permite editar la estructura y el diseño del menú directamente.<\/p>

      Selecciona el bloque Navegación<\/strong> en el encabezado para editar la entrada del menú y haz clic en Añadir un bloque<\/strong>.<\/p>

      \"Sección<\/figure><\/div>

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

      \"Marcador<\/figure>

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

      \"Ajustes<\/figure>

      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.<\/p>

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

      \"Añadir<\/figure>

      Una vez que hayas terminado de hacer los cambios deseados, no olvides hacer clic en Guardar<\/strong> antes de cerrar el editor de encabezado.<\/p>

      Cómo editar un encabezado de WordPress usando la opción Personalizar<\/h3>

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

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

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

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

      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.<\/p>

      Para comenzar a editar el header de tu sitio web, elige Maquetador de cabeceras<\/strong> de la lista.<\/p>

      \"Maquetador<\/figure><\/div>

      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.<\/p>

      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.<\/p>

      \"Maquetador<\/figure>

      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.<\/p>

      Cambiando el título del sitio y el logo<\/strong><\/p>

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

      \"Título<\/figure><\/div>

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

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

      \"Seleccionar<\/figure><\/div>

      \n

      Consejo profesional<\/strong><\/h4>\n

      El tema Astra te permite subir un logo diferente para mostrar en una pantalla retina. A menudo se utiliza para dispositivos de alta gama como los productos de Apple. Para usar esta función, debes proporcionar un archivo de logo que sea dos veces más grande en resolución que el original.<\/p>\n <\/div><\/p>

      Al desplazarte por el panel, verás la configuración general del Título del sitio<\/strong>. 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.<\/p>

      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.<\/p>

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

      \"Sección<\/figure><\/div>

      Añadiendo el menú de navegación<\/strong><\/p>

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

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

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

      Asegúrate de hacer clic en Publicar <\/strong>antes de cerrar, para que todos los cambios en el header se apliquen.<\/p>

      \n

      Consejo <\/strong>profesional<\/h4>\n

      La configuración del menú de navegación predeterminado puede variar en cada tema clásico. Puedes leer la documentación de tu tema elegido para conocer los pasos específicos necesarios para personalizar el menú de navegación.<\/p>\n <\/div><\/p>

      Por qué es importante el header de WordPress<\/strong><\/h2>

      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.<\/p>

      Un header personalizado de WordPress puede brindarle los siguientes beneficios a tu sitio web:<\/p>