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

¿Quieres mostrar un encabezado personalizado para tu sitio web de WordPress?

Muchos temas de WordPress vienen con un encabezado incorporado que se encuentra en la parte superior de cada página. Es posible que deba personalizarlo para agregar enlaces importantes, íconos sociales, búsqueda en el sitio u otros elementos para causar una buena primera impresión.

En este artículo, le mostraremos cómo personalizar su encabezado de WordPress e incluso crear un encabezado totalmente personalizado para todo su sitio o páginas específicas.

¿Qué es el encabezado en WordPress?

El encabezado de su sitio web es la sección superior de cada página en su sitio web de WordPress, y probablemente lo primero que verán sus visitantes.

A menudo muestra el logotipo y el título de su sitio web, los menús de navegación y otros elementos importantes que desea que los usuarios vean primero.

Por ejemplo, aquí está nuestra área de encabezado en AprenderWP que millones de lectores ven cada mes.

Al personalizar el encabezado de su sitio, puede darle un diseño único y hacerlo más útil para sus visitantes. Puede vincular a sus páginas más populares, mostrar íconos sociales o el número de teléfono de su empresa y mostrar botones de llamada a la acción para obtener más conversiones.

Dicho esto, echemos un vistazo a cómo personalizar fácilmente su encabezado de WordPress. Puede usar los siguientes enlaces para saltar a la sección que desea leer.

• Personalice el encabezado usando el personalizador de temas de WordPress
• Personalice el encabezado usando el editor de sitio completo de WordPress
• Cree diseños de página y encabezado personalizados con SeedProd
• Agregar un encabezado personalizado para cada categoría
• Agregue un área de widgets a su encabezado de WordPress
• Agregue imágenes de encabezado aleatorias a su blog de WordPress
• Agregue un código personalizado al encabezado de su sitio web (avanzado)

Personalice el encabezado usando el personalizador de temas de WordPress

Muchos temas populares de WordPress le permiten usar el personalizador de temas de WordPress para realizar cambios en el área de encabezado de su diseño de WordPress. Esta función a veces se denomina encabezado personalizado, pero no todos los temas la admiten.

Debe comenzar navegando a Apariencia »Personalizar en su área de administración de WordPress.

Su tema puede agregar una sección de 'Encabezado' al personalizador, o agregar opciones de encabezado en la sección 'Color', pero esto varía de un tema a otro. Aquí están algunos ejemplos.

Algunos temas, como Twenty Twenty-One, no ofrecen ninguna opción de personalización de encabezado. En este caso, le recomendamos que use un complemento de creación de temas de arrastrar y soltar como SeedProd que cubrimos a continuación.

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

Algunos temas de WordPress gratuitos y premium ofrecen aún más opciones de personalización de temas. Por ejemplo, puede cambiar el estilo de fuente, el diseño, los colores y mucho más de su encabezado. Pero está limitado a lo que el desarrollador del tema le permite hacer.

Por ejemplo, puede crear un encabezado personalizado utilizando el personalizador de temas con el tema Astra.

Astra tiene una opción dedicada de 'Creador de encabezados' en el panel a su izquierda. Aquí encontrarás diferentes configuraciones para editar la apariencia y el estilo del encabezado. Puede crear un encabezado personalizado agregando bloques, al igual que cuando edita una publicación de blog o una página en el editor de contenido de WordPress.

Para comenzar, simplemente coloque el cursor sobre un área vacía en el encabezado y haga clic en el ícono '+' para agregar un bloque de encabezado.

A continuación, puede seleccionar cualquier bloque que desee agregar a su encabezado personalizado. Por ejemplo, puede agregar un bloque de widgets, un bloque de cuentas, un bloque de búsqueda y más.

Además, el generador de encabezados también le permite arrastrar y soltar los bloques y colocarlos encima o debajo del encabezado.

Puede personalizar aún más cada bloque que agregue al encabezado.

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

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

Cuando haya terminado de editar el encabezado personalizado, simplemente haga clic en el botón 'Publicar'.

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

Personalice 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 su tema es compatible con la nueva característica, 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 usa un tema compatible, puede personalizar su encabezado navegando a Apariencia » Editor . Esto iniciará el editor de sitio completo, que es como el editor de bloques que usa para escribir publicaciones y páginas de WordPress.

Cuando haga clic en el encabezado, notará que el nombre de la plantilla en la parte superior de la página cambia a 'Encabezado de página'.

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

Como ejemplo, cambiaremos el color de fondo del encabezado. Primero, debe hacer clic en la sección 'Color' para expandirla. Después de eso, debe hacer clic en la opción 'Fondo'.

Aparecerá una ventana emergente que le permitirá seleccionar un color sólido o degradado. También habrá una serie de colores que puede seleccionar. Cuando hace clic en un color, el fondo de su encabezado cambiará inmediatamente.

Puede encontrar más opciones de personalización haciendo clic en el ícono 'Estilos' en la parte superior derecha de la página. Esto le 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, consulte nuestra guía para principiantes sobre cómo personalizar su tema de WordPress.

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

Si desea tener un control total sobre sus encabezados, pies de página y barras laterales para darle a su sitio web un diseño único, le recomendamos que use SeedProd.

SeedProd es el mejor complemento de creación de temas de WordPress que le permite crear fácilmente un tema de WordPress personalizado sin escribir ningún código. Esto incluye la creación de encabezados, pies de página y todo lo demás necesario para un tema de WordPress atractivo.

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

Nota: puede usar la versión gratuita de SeedProd para crear páginas de destino personalizadas que incluyan encabezados personalizados, pero necesitará la versión Pro para crear temas completamente personalizados que incluyan diseños de encabezado para todo el sitio.

Primero, recomendamos seguir nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress sin ningún código. Una vez que haya hecho esto, SeedProd simplifica la personalización de su encabezado.

Todo lo que necesita 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í, puede personalizar fácilmente su encabezado agregando nuevos bloques.

Hay bloques para etiquetas de plantilla como el logotipo de un sitio, cualquiera de sus widgets de WordPress y bloques avanzados como un temporizador de cuenta regresiva, un 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 generador de temas. Por ejemplo, puede cambiar el tamaño y la alineación de su 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 puede agregar una sección completa a la plantilla de encabezado de su tema.

Las secciones son un grupo de bloques y puede usarlos para diferentes áreas de su sitio web. Esto incluye encabezados, pies de página, características, testimonios, llamadas a la acción y más.

Para usar una sección de encabezado, primero cambie a la pestaña 'Secciones' en el panel Diseño.

Después de eso, elija una sección de encabezado que le gustaría usar para su sitio web. SeedProd ofrece múltiples plantillas de secciones que puede usar.

A continuación, continúe y personalice la sección del encabezado.

Una vez que esté satisfecho con su encabezado personalizado, asegúrese de hacer clic en el botón 'Guardar' para almacenar sus cambios.

Ahora, está listo para publicar su encabezado personalizado.

Simplemente vaya a la página SeedProd » Theme Builder desde su panel de WordPress y haga clic en el interruptor junto a la opción 'Habilitar tema de SeedProd' para Sí.

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

Ahora puede visitar su sitio web para ver el nuevo encabezado personalizado en acción.

Cree diferentes encabezados personalizados para cada página

¿Sabía que con SeedProd puede crear encabezados personalizados para diferentes páginas?

El generador de temas le permite agregar encabezados personalizados para cada página en su sitio web de WordPress. De esta manera, puede mostrar un encabezado personalizado para diferentes categorías, etiquetas, tipos de publicaciones, tipos de páginas y más.

Para comenzar, deberá ir a SeedProd » Theme Builder desde su panel de control de WordPress y hacer clic en el botón 'Agregar nueva plantilla de tema'.

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

Continúe e ingrese un nombre para su plantilla de tema. Después de eso, elija 'Encabezado' como tipo de plantilla en el menú desplegable. Puede dejar el campo 'Prioridad' en blanco.

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

No olvide hacer clic en el botón 'Guardar' cuando haya terminado.

Después de eso, puede continuar y editar el encabezado personalizado utilizando el generador de temas de arrastrar y soltar de SeedProd.

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

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

Agregar 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, puede mostrar un encabezado diferente para cada categoría de WordPress.

Esto se puede hacer agregando código a sus archivos de temas, pero tendrá más control usando un generador de temas.

Anteriormente le mostramos cómo personalizar su encabezado usando el complemento de creación de temas SeedProd. SeedProd también le permite crear múltiples encabezados personalizados y mostrarlos para diferentes categorías usando lógica condicional.

Para crear un nuevo encabezado, debe navegar a SeedProd » Theme Builder y hacer clic en el botón naranja 'Agregar nueva plantilla de tema'. Alternativamente, puede duplicar su encabezado actual y usarlo como punto de partida.

Aparecerá una ventana emergente en la que puede asignar un nombre a la plantilla de tema y seleccionar "Encabezado" en el menú desplegable Tipo.

También debe ingresar una prioridad. Esto se usa si más de un encabezado cumple con las condiciones para una página determinada, y se mostrará el encabezado con mayor prioridad. El encabezado predeterminado tiene una prioridad de 0, así que asegúrese de ingresar 1 o superior.

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

En los dos primeros menús, debe seleccionar 'Incluir' y luego 'Tiene categoría'. En el último campo, debe escribir el nombre de la categoría donde desea que se muestre el encabezado.

Puede mostrar fácilmente el mismo encabezado para varias categorías haciendo clic en el botón "Agregar condición" e incluyendo otra categoría. Cuando haya terminado, asegúrese de hacer clic en el botón 'Guardar' para guardar el nuevo encabezado.

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

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

Agregue un área de widgets a su encabezado de WordPress

Si está creando un tema personalizado desde cero usando código, entonces podría estar buscando agregar un widget de WordPress a su encabezado para captar la atención de sus visitantes. Los widgets le permiten agregar fácilmente bloques de contenido a secciones específicas de su tema, pero no todos los temas incluyen un área de widget de encabezado.

Anteriormente mencionamos lo simple que es agregar widgets a su encabezado usando el generador de temas SeedProd. Pero, ¿qué sucede si desea agregar un widget al encabezado de un tema normal de WordPress?

Algunos temas, como el tema Astra, te permiten hacer esto usando el personalizador de temas de WordPress. Por ejemplo, Astra agrega una opción llamada 'Creador de encabezados' que le permite personalizar completamente el encabezado, incluida la adición de widgets.

Si su tema de WordPress actualmente no tiene un área de widget de WordPress en el encabezado, deberá agregarlo manualmente agregando el siguiente código a su archivo functions.php, en un complemento específico del sitio o usando un código Complemento de fragmentos.

Esta es una opción más avanzada, ya que necesitará saber dónde colocar el código y cómo diseñarlo usando CSS.

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 registra una nueva barra lateral o un área lista para widgets para su tema.

Si va a Apariencia » Widgets , verá una nueva área de widgets etiquetada como 'Área de widget de encabezado personalizado'. Ahora, puede agregar sus widgets a esta nueva área.

Finalmente, debe agregar algo de código a la plantilla de encabezado de su tema que se encuentra en el archivo header.php de su tema. Esto agregará el área de widgets que creó anteriormente a su encabezado para que los widgets se muestren en su sitio web.

Debe copiar este fragmento de código y pegarlo donde desea que se muestre el widget.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

Dependiendo de su tema, es posible que también deba agregar CSS a WordPress para controlar cómo se muestra el área del widget.

Para obtener más detalles, consulte nuestra guía sobre cómo agregar un widget de WordPress al encabezado de su sitio web.

Agregue imágenes de encabezado aleatorias a su blog de WordPress

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

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

Para agregar imágenes de encabezado aleatorias a su blog de WordPress, puede usar el personalizador de temas y cargar imágenes en la sección de encabezado. Esta opción puede variar según el tema de WordPress que estés usando.

A continuación, continúe y seleccione la opción 'Aleatorizar encabezados cargados'.

Si desea más control y flexibilidad para mostrar imágenes aleatorias en la sección del encabezado, también puede usar un complemento de WordPress.

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

Agregue código al encabezado de su sitio web (avanzado)

Finalmente, si desea agregar un código personalizado a la sección de encabezado de su sitio web, puede hacerlo fácilmente desde su tablero de WordPress. Este método es recomendable para usuarios avanzados y no apto para principiantes porque incluye edición de código y requiere conocimientos técnicos.

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

Nota: no recomendamos que edites directamente los archivos del tema porque el más mínimo error puede romper tu sitio web y estropear el diseño.

Una forma más fácil de agregar código personalizado para editar el encabezado de su sitio es usar el complemento Insertar encabezados y pies de página.

Primero, instale y active el complemento Insertar encabezados y pies de página. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Tras la activación, puede ir a Configuración » Insertar encabezados y pies de página desde su panel de WordPress. Luego, ingrese el código personalizado en la sección 'Scripts en encabezado'.

Después de ingresar el código, guarde sus cambios.

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

Esperamos que este tutorial te haya ayudado a aprender a personalizar tu encabezado de WordPress. También puede aprender a elegir el mejor software de diseño web o consultar nuestra lista de complementos imprescindibles para hacer crecer su sitio.

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