Cómo personalizar tu encabezado de WordPress (Guía para principiantes)

¿Conoces esa sensación cuando visitas un sitio web de WordPress y se ve... genérico? ¿Como si viniera directamente de una plantilla, sin nada personal o memorable?

Esa es exactamente la impresión que das cuando te quedas con el encabezado predeterminado de WordPress, y puede costarte credibilidad con cada visitante.

Tu encabezado es lo primero que la gente ve cuando llega a tu sitio, por lo que debe causar una fuerte impresión. Personalizarlo te permite agregar elementos clave como enlaces de navegación, íconos de redes sociales y una barra de búsqueda.

Estas funciones hacen que tu sitio sea más fácil de usar y te ayudan a dejar una impresión duradera y profesional. Además, hemos visto cómo un encabezado personalizado puede aumentar tanto la confianza como la participación.

En esta guía, te mostraremos exactamente cómo personalizar el encabezado de tu WordPress, incluso si eres un principiante total. Aprenderás varios métodos que no requieren codificación, para que puedas crear un encabezado que destaque y sirva mejor a tus visitantes. 🌟

¿Qué es el encabezado en WordPress?

El encabezado de tu sitio web es la sección superior de cada página de tu sitio de WordPress y es probablemente lo primero que ven los visitantes. A menudo muestra el logotipo de tu sitio web y título, menús de navegación y otros elementos importantes que deseas que los usuarios vean primero.

Por ejemplo, esta es nuestra área de encabezado en WPBeginner que millones de lectores ven mensualmente.

Al personalizar el encabezado de tu sitio, puedes darle un toque único y hacerlo más útil para tus visitantes. Puedes enlazar a tus páginas más populares, mostrar íconos de redes sociales o tu número de teléfono de negocios, y mostrar botones de llamada a la acción para más conversiones.

En las siguientes secciones, te mostraremos cómo personalizar fácilmente el encabezado de tu WordPress. Puedes usar los siguientes enlaces para saltar a la sección que deseas leer:

• Personaliza el encabezado usando el personalizador de temas de WordPress
• Personaliza el encabezado usando el editor de sitio completo de WordPress
• Crea diseños de encabezado y página personalizados con SeedProd
• Añadir un encabezado personalizado para cada categoría
• Añade un área de widgets a tu encabezado de WordPress
• Añade imágenes de encabezado aleatorias a tu blog de WordPress
• Añade código al encabezado de tu sitio web (Avanzado)
• Consejo extra: Prueba diferentes estilos de encabezado (usando pruebas A/B)
• Preguntas frecuentes: Personaliza tu encabezado de WordPress
• Recursos adicionales: Más consejos de diseño y navegación para WordPress

¿Listo? Empecemos.

Personaliza el encabezado usando el personalizador de temas de WordPress

Los temas populares de WordPress te permiten usar el personalizador de temas de WordPress para hacer cambios en el área del encabezado de tu sitio. Esta función a veces se llama encabezado personalizado, pero ten en cuenta que no todos los temas lo admiten.

Deberías empezar navegando a Apariencia » Personalizar en tu área de administración de WordPress.

Tu tema puede incluir una sección de 'Encabezado' en el personalizador o proporcionar opciones de encabezado en la sección 'Color'. Sin embargo, esto varía de un tema a otro. Aquí tienes algunos ejemplos.

Algunos temas, como Twenty Twenty-One, no ofrecen opciones de personalización de encabezado en absoluto. En este caso, recomendamos usar un plugin de creación de temas de arrastrar y soltar como SeedProd, que cubriremos a continuación.

El tema Twenty Sixteen te permite agregar una imagen de fondo al encabezado e incluso agregar imágenes de encabezado aleatorias.

Algunos temas gratuitos y premium de WordPress ofrecen aún más opciones de personalización de temas.

Por ejemplo, es posible que puedas cambiar el estilo de fuente, el diseño, los colores y mucho más de tu encabezado. Pero aun así diferirá de un tema a otro, y estarás limitado a lo que el desarrollador del tema te permita hacer.

Por ejemplo, Sydney tiene una opción dedicada de 'Constructor de Encabezados' en su panel de personalización a la izquierda.

Aquí encontrarás diferentes configuraciones para editar la apariencia y el estilo del encabezado. Puedes construir un encabezado personalizado agregando bloques, al igual que cuando editas una publicación de blog o una página en el editor de contenido de WordPress.

Para empezar, simplemente pasa el cursor sobre un área vacía en el encabezado y haz clic en el ícono '+' para agregar un bloque de encabezado, ya sea en la fila superior, media o inferior.

A continuación, puedes seleccionar cualquier bloque que desees agregar a tu encabezado personalizado. Por ejemplo, puedes agregar un bloque de widget, un bloque de cuenta, un bloque de búsqueda y más.

El constructor de encabezados también te permite arrastrar y soltar bloques para colocarlos encima o debajo del encabezado.

Luego, puedes personalizar aún más cada bloque que agregues al encabezado.

Por ejemplo, seleccionar el bloque Título del sitio y logotipo te dará opciones para subir un título y logotipo del sitio, cambiar el ancho del logotipo, mostrar un eslogan del sitio y más.

Además de eso, también puedes cambiar el color de fondo del encabezado o agregar una imagen de fondo que aparezca en el encabezado.

Cuando hayas terminado de editar el encabezado personalizado, simplemente haz clic en el botón ‘Publicar’.

Para más detalles, consulta nuestra guía definitiva sobre cómo usar el personalizador de temas de WordPress.

Personaliza el encabezado usando el editor de sitio completo de WordPress

WordPress agregó la edición de sitio completo a WordPress en la versión 5.9. Si tu tema soporta la nueva función, entonces reemplaza el personalizador de temas. Sin embargo, en este momento, solo hay unos pocos temas que funcionan con el editor de sitio completo.

Cuando uses un tema compatible, puedes personalizar tu encabezado navegando a Apariencia » Editor. Esto iniciará el editor de sitio completo, que es similar al editor de bloques que usas para escribir publicaciones y páginas de WordPress.

Cuando hagas clic en el encabezado, notarás que el nombre de la plantilla en la parte superior de la página cambia a ‘Encabezado de página’.

Ahora, cuando hagas clic en el ícono ‘Configuración’ en la barra de herramientas, verás opciones para personalizar el diseño, color, borde y dimensiones del encabezado.

Como ejemplo, cambiaremos el color de fondo del encabezado. Primero, deberás expandir la sección ‘Color’ y luego hacer clic en la opción ‘Fondo’.

En la ventana emergente que aparece, primero seleccionarás un color sólido o un degradado.

Luego, puedes elegir entre una variedad de colores preestablecidos. Al hacer clic en un color, el fondo de tu encabezado se cambiará inmediatamente.

Puedes encontrar más opciones de personalización haciendo clic en el ícono de ‘Estilos’ en la parte superior derecha de la página. Esto te permitirá cambiar la fuente, los colores y el diseño del encabezado.

Para obtener más información sobre cómo funciona el editor de sitio completo, consulta nuestra guía para principiantes sobre cómo personalizar tu tema de WordPress.

Crea diseños de encabezado y página personalizados con SeedProd

¿Quieres tener control total sobre tus encabezados, pies de página y barras laterales para darle a tu sitio web un diseño único? Entonces te recomendamos usar SeedProd, el mejor plugin constructor de temas de WordPress.

SeedProd te permite crear fácilmente un tema personalizado de WordPress sin escribir código. Esto incluye la creación de encabezados, pies de página y todo lo necesario para un tema atractivo de WordPress.

Incluso puedes crear múltiples estilos de encabezado personalizados para diferentes páginas y secciones de tu sitio web.

Algunas de nuestras marcas asociadas usan SeedProd para construir sus sitios web, y les ha funcionado de maravilla. Para saber más al respecto, puedes consultar nuestra reseña completa de SeedProd.

Primero, te recomendamos seguir nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress sin código. Una vez que hayas hecho esto, puedes empezar a personalizar tu encabezado en el editor de SeedProd.

Para acceder al editor, todo lo que necesitas hacer es hacer clic en el enlace 'Editar Diseño' que se encuentra debajo del encabezado.

Esto abrirá el encabezado en el editor de arrastrar y soltar de SeedProd.

Desde aquí, puedes personalizar fácilmente tu encabezado agregando nuevos bloques.

Hay bloques para etiquetas de plantilla como el logotipo del sitio o cualquiera de tus widgets de WordPress, y bloques avanzados como un temporizador de cuenta regresiva, menú de navegación o botones para compartir en redes sociales.

La mejor parte es que puedes personalizar aún más cada bloque usando el constructor de temas. Por ejemplo, puedes cambiar el tamaño y la alineación de tu logotipo o elegir qué páginas mostrar en el menú de navegación. Incluso te permite agregar una imagen en el encabezado.

Con SeedProd, también puedes agregar una sección completa al encabezado de tu tema.

Las secciones son grupos de bloques que puedes usar para diferentes áreas de tu sitio web. Estas incluyen encabezados, pies de página, características, testimonios, llamadas a la acción y más.

Para usar una sección de encabezado, deberás cambiar a la pestaña 'Secciones' en el panel 'Diseño'.

Después de eso, elige una sección de encabezado que te gustaría usar para tu sitio web. SeedProd ofrece plantillas de varias secciones que puedes usar.

Continúa y comienza a personalizar la sección del encabezado.

Una vez que estés satisfecho con tu encabezado personalizado, asegúrate de hacer clic en el botón 'Guardar' para almacenar tus cambios.

Ahora, estás listo para publicar tu encabezado personalizado.

Simplemente ve a SeedProd » Theme Builder desde tu panel de WordPress y haz clic en el interruptor junto a la opción ‘Enable SeedProd Theme’ a ‘Yes.’

Una vez que habilites la opción, SeedProd reemplazará tu tema predeterminado de WordPress con un nuevo tema y encabezado personalizados.

Ahora puedes visitar tu sitio web para ver el nuevo encabezado personalizado en acción.

Crea diferentes encabezados personalizados para cada página

Además, SeedProd hace que sea súper fácil diseñar encabezados personalizados para páginas específicas de tu sitio.

El constructor de temas te permite agregar encabezados personalizados para cada página de tu sitio web de WordPress. De esta manera, puedes mostrar un encabezado personalizado para diferentes categorías, etiquetas, tipos de publicaciones, tipos de páginas y más.

Para empezar, necesitarás ir a SeedProd » Theme Builder desde tu panel de WordPress y hacer clic en el botón ‘Add New Theme Template’.

Aparecerá una nueva ventana emergente donde deberás ingresar los detalles de la plantilla del tema.

Adelante, ingresa un nombre para tu plantilla de tema. Después de eso, simplemente elige 'Encabezado' como tipo de plantilla en el menú desplegable. Puedes dejar el campo 'Prioridad' en blanco.

A continuación, deberás ingresar las condiciones de visualización para tu encabezado personalizado. Por ejemplo, usamos las condiciones en las que se mostraría en todas las publicaciones y páginas que estén en la categoría de tutoriales.

No olvides hacer clic en el botón ‘Guardar’ cuando hayas terminado.

Después de eso, edita el encabezado personalizado usando el constructor de temas de arrastrar y soltar de SeedProd.

Cuando hayas terminado de editar el encabezado personalizado, simplemente haz clic en el botón 'Guardar' en la parte superior.

Puedes ver más ideas sobre cómo personalizar tu encabezado usando SeedProd en nuestra guía para principiantes sobre cómo crear fácilmente un tema personalizado de WordPress usando el constructor de temas de SeedProd.

Añadir un encabezado personalizado para cada categoría

La mayoría de los sitios web muestran el mismo encabezado en todas las publicaciones, páginas, categorías y páginas de archivo. Sin embargo, puedes mostrar un encabezado diferente para cada categoría de WordPress.

Esto se puede hacer agregando código a los archivos de tu tema, pero tendrás más control usando un constructor de temas.

Te mostramos anteriormente cómo personalizar tu encabezado usando el plugin creador de temas SeedProd. Ahora, SeedProd también te permite crear múltiples encabezados personalizados y mostrarlos para diferentes categorías usando lógica condicional.

Para crear un nuevo encabezado, necesitas navegar a SeedProd » Theme Builder y hacer clic en el botón naranja ‘Add New Theme Template’. Alternativamente, puedes duplicar tu encabezado actual y usarlo como punto de partida.

Aparecerá una ventana emergente, donde puedes darle un nombre a la plantilla de tema y seleccionar ‘Header’ del menú desplegable Type.

También necesitas ingresar una prioridad. Así, si más de un encabezado cumple las condiciones para una página determinada, se mostrará el encabezado con la prioridad más alta.

El encabezado predeterminado tiene una prioridad de 0, así que asegúrate de ingresar 1 o superior.

Después de eso, necesitarás configurar una o más condiciones. Esto le permite a SeedProd saber cuándo mostrar un encabezado determinado. Simplemente selecciona las condiciones de los menús desplegables.

En los dos primeros menús, tendrás que seleccionar ‘Include’ y luego ‘Has Category’. En el último campo, debes escribir el nombre de la categoría donde quieres que se muestre el encabezado.

Puedes mostrar fácilmente el mismo encabezado para múltiples categorías haciendo clic en el botón ‘Add Condition’ e incluyendo otra categoría. Cuando hayas terminado, asegúrate de hacer clic en el botón ‘Save’ para guardar el nuevo encabezado.

Ahora, puedes personalizar el diseño de cada nuevo encabezado usando el editor de arrastrar y soltar de SeedProd, como te mostramos anteriormente.

Para obtener más información, incluido cómo hacerlo mediante código, consulta nuestra guía sobre cómo agregar un encabezado, pie de página o barra lateral personalizados para cada categoría.

Añade un área de widgets a tu encabezado de WordPress

Si estás creando un tema personalizado desde cero usando código, es posible que desees agregar un widget de WordPress a tu encabezado para captar la atención de tus visitantes.

Los widgets te permiten agregar bloques de contenido a secciones específicas de tu tema fácilmente, pero ten en cuenta que no todos los temas incluyen un área de widget en el encabezado.

Mencionamos anteriormente lo fácil que es agregar widgets a tu encabezado usando el constructor de temas SeedProd. Pero, ¿qué pasa si deseas agregar un widget al encabezado de un tema normal de WordPress?

Algunos temas, como el tema Sydney, te permiten hacer esto usando el personalizador de temas de WordPress. Sydney agrega una opción llamada 'Header Builder' para personalizar completamente el encabezado, incluida la adición de widgets.

Si tu tema de WordPress actualmente no tiene un área de widget en el encabezado, deberás agregarla manualmente.

Si bien el enfoque general es agregar fragmentos de código al archivo functions.php, el enfoque más fácil y seguro es usar WPCode. Es el mejor plugin para agregar fragmentos de código sin romper tu sitio.

Algunas de nuestras marcas asociadas usan WPCode para agregar y administrar sus fragmentos de código personalizados. Escuchamos cosas geniales sobre el plugin, y también puedes leer nuestra reseña detallada de WPCode para obtener más información al respecto.

Para comenzar, asegúrate de tener el plugin de fragmentos de código WPCode instalado y activado en tu sitio web de WordPress. Si necesitas ayuda, no dudes en consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, querrás navegar a Fragmentos de código » + Agregar fragmentos.

Ahora, lo primero que necesitarás hacer es crear el título del fragmento. Por ejemplo, nosotros nombramos el nuestro 'Agregar un Widget de WordPress al Área de Encabezado'. El segundo paso es expandir el menú desplegable de tipo de código y elegir 'Fragmento PHP'.

Una vez hecho esto, simplemente copia el siguiente código y pégalo en la sección 'Vista previa del código'.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Este código registrará un nuevo encabezado o un área lista para widgets para tu tema.

Así es como podría verse en tu editor de WPCode:

Para activar el fragmento, puedes cambiar el interruptor junto al botón azul 'Guardar fragmento' a 'Activo'. Luego, no olvides hacer clic en el botón 'Guardar fragmento' para almacenar tus cambios.

Una vez que hayas activado el interruptor y guardado tus cambios, así es como debería verse el editor:

Ahora, si vas a Apariencia » Widgets, verás una nueva área de widgets etiquetada como 'Área de Widgets de Encabezado Personalizado'.

Aquí es donde agregarás tus widgets. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo agregar y usar widgets en WordPress.

Dependiendo de tu tema, también podrías necesitar agregar CSS a WordPress para controlar cómo se muestra el área de widgets.

Para instrucciones detalladas, puedes consultar nuestra guía sobre cómo agregar un widget de WordPress al encabezado de tu sitio web.

Añade imágenes de encabezado aleatorias a tu blog de WordPress

Otra forma en que puedes hacer que tus encabezados de WordPress sean más atractivos es agregando imágenes aleatorias a la sección del encabezado.

Mostrar imágenes que cambian aleatoriamente ayuda a captar la atención de tus visitantes y hace que tu contenido sea más atractivo.

Para agregar imágenes de encabezado aleatorias a tu blog de WordPress, puedes usar el personalizador de temas y subir imágenes a la sección de encabezado. Esta opción puede variar dependiendo del tema de WordPress que estés usando.

A continuación, procede a seleccionar la opción 'Aleatorizar encabezados subidos'.

Si deseas más control y flexibilidad para mostrar imágenes aleatorias en la sección de encabezado, también puedes usar un plugin de WordPress.

Para más detalles, consulta nuestra guía sobre cómo agregar imágenes de encabezado aleatorias a tu blog de WordPress.

Agregar código al encabezado de tu sitio web (Avanzado)

Finalmente, si deseas agregar código personalizado a la sección de encabezado de tu sitio web, puedes hacerlo fácilmente desde tu panel de WordPress. Este método se recomienda para usuarios avanzados y podría no ser adecuado para principiantes, ya que implica editar código y requiere conocimientos técnicos.

Puedes encontrar los archivos de encabezado de tu tema yendo a Apariencia » Editor de archivos de temas desde el panel de administración de WordPress. En los archivos del tema 'style.css', puedes desplazarte hacia abajo hasta la sección del encabezado del sitio y agregar o eliminar código.

Una forma más sencilla de agregar código personalizado para editar el encabezado de tu sitio es usando WPCode, el mejor plugin de fragmentos de código del mercado.

Primero, instala y activa el plugin gratuito WPCode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes ir a Fragmentos de código » Encabezado y pie de página desde tu panel de WordPress. A continuación, simplemente introduce el código personalizado en la sección 'Encabezado'.

Después de introducir el código, haz clic en el botón 'Guardar cambios'.

Para más detalles, puedes ver nuestra guía sobre cómo agregar código de encabezado y pie de página en WordPress.

¡Eso es todo!

Consejo extra: Prueba diferentes estilos de encabezado (usando pruebas A/B)

Después de personalizar tu encabezado, está totalmente bien preguntarse: “¿Es esta la mejor versión para mis visitantes?” Ahí es donde entra la prueba A/B.

Te permite comparar diferentes versiones de tu encabezado, ya sea un cambio de diseño, color de botón o un elemento agregado como una barra de búsqueda, y ver cuál funciona mejor.

Podrás tomar decisiones de diseño basadas en el comportamiento real del usuario, no solo en suposiciones.

No te preocupes, no necesitas ser un desarrollador para hacer esto.

Con herramientas fáciles de usar para principiantes como Thrive Optimize y Nelio AB Testing, estarás haciendo pruebas como un profesional en poco tiempo. Este enfoque ayuda a que tu encabezado mejore con cada ajuste.

Para obtener todos los detalles, consulta nuestra guía sobre cómo hacer pruebas A/B en WordPress.

Preguntas frecuentes: Personaliza tu encabezado de WordPress

¿Todavía tienes preguntas sobre cómo personalizar tu encabezado de WordPress? No te preocupes, ¡te tenemos cubierto! Aquí tienes algunas preguntas comunes que los principiantes suelen hacer:

¿Qué es un encabezado de WordPress y por qué es importante?

El encabezado es la sección superior de tu sitio de WordPress y es lo primero que ven los visitantes. Generalmente incluye el logo de tu sitio, el menú de navegación y otros elementos clave. Un encabezado bien diseñado te ayuda a causar una excelente primera impresión y guía a las personas a las partes más importantes de tu sitio.

¿Necesito saber programar para personalizar el encabezado de mi WordPress?

¡Para nada! No necesitas ninguna habilidad de programación. Muchos temas de WordPress y plugins (como SeedProd) te permiten personalizar tu encabezado con un simple constructor de arrastrar y soltar, perfecto para principiantes.

¿Cuáles son los beneficios de usar un plugin como SeedProd para los encabezados?

SeedProd facilita el diseño de encabezados personalizados sin necesidad de tocar código. Tienes control total sobre el aspecto y la distribución, además de opciones avanzadas para que coincidan con el estilo de tu sitio y mejorar la experiencia general del usuario.

¿Cómo puede agregar un widget a mi encabezado mejorar mi sitio?

Agregar widgets a tu encabezado, como una barra de búsqueda, iconos sociales o información de contacto, facilita la búsqueda de funciones clave. Esto ayuda a los visitantes a navegar por tu sitio más rápido y le da a tu sitio una sensación más pulida y profesional.

¿Puedo tener diferentes encabezados para diferentes páginas o publicaciones?

¡Sí! Con las herramientas adecuadas, como SeedProd, puedes agregar encabezados personalizados a diferentes páginas, publicaciones, categorías o incluso etiquetas. Esto te da más control sobre cómo se ve y se siente tu sitio en diferentes secciones.

Recursos adicionales: Más consejos de diseño y navegación para WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo personalizar el encabezado de tu WordPress. A continuación, también puedes consultar nuestras guías sobre:

• Cómo agregar imágenes correctamente en WordPress
• Cómo agregar un redimensionador de fuentes en WordPress para accesibilidad
• Cómo dar estilo a cada publicación de WordPress de manera diferente
• Cómo crear un menú lateral colapsable en WordPress
• Cómo mostrar diferentes barras laterales para cada publicación y página de WordPress
• Cómo crear una página de destino de lista de espera viral en WordPress
• Elementos clave de diseño para un sitio web de WordPress efectivo
• Guía definitiva: Cómo cambiar correctamente un tema de WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.