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

¿Quiere mostrar un encabezado personalizado para su sitio web de WordPress?

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

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

¿Qué es un encabezado de WordPress?

El título de su sitio está en la parte superior de cada página de su sitio de WordPress y es probablemente lo primero que verán sus visitantes.

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

Por ejemplo, aquí está nuestra sección de encabezado WPBeginner, que millones de lectores ven cada mes.

Al personalizar el título de su sitio web, 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.

Veamos cómo puedes personalizar fácilmente el encabezado de WordPress. Puede usar los enlaces a continuación para ir a la sección que desea leer.

Personaliza el encabezado con el personalizador de temas de WordPress

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

Tienes que empezar a navegar Apariencia »Personalización en tu área administrativa de WordPress.

Su tema puede agregar una sección de título a la herramienta de personalización o agregar opciones de título a la sección Color, pero esto varía según el tema. Aquí hay algunos ejemplos.

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

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

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

Por ejemplo, puede usar el Personalizador de temas para crear un encabezado personalizado con el tema Astra.

Astra tiene una opción especial de "Creador de encabezados" en el panel izquierdo. Aquí encontrará varias configuraciones para editar la apariencia y el estilo del encabezado. Puede crear un encabezado personalizado agregando bloques, tal como edita una publicación de blog o una página en un editor de contenido de WordPress.

Para comenzar, simplemente pase el mouse sobre un espacio vacío en el encabezado y haga clic en el ícono "+" para agregar un bloque de encabezado.

Luego puede seleccionar cualquier bloque que desee agregar a su encabezado personalizado. Por ejemplo, puede agregar un bloque de widget, un bloque de cuenta, un bloque de búsqueda y más.

Además, el constructor de encabezado le permite arrastrar y soltar bloques encima o debajo del encabezado.

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

Por ejemplo, si selecciona el título de la página y el bloque del logotipo, obtendrá opciones para cargar un título y un logotipo de la página, cambiar el ancho del logotipo, mostrar un eslogan de la página y más.

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

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

Consulte nuestra guía final para usar la herramienta de personalización de temas de WordPress para obtener más detalles.

Personaliza el encabezado con WordPress Full Site Editor

WordPress agregó edición de página completa a WordPress en la versión 5.9. Si su tema es compatible con la nueva característica, reemplazará la herramienta de personalización de temas. Actualmente, sin embargo, solo hay unos pocos temas que funcionan con el editor de sitio completo.

Si usa un tema compatible, puede personalizar su encabezado yendo 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.

Si hace clic en el encabezado, notará que el nombre de la plantilla cambia a "Encabezado de página" en la parte superior de la 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 el tamaño del encabezado.

Como ejemplo, cambiemos el color de fondo del encabezado. Primero debe hacer clic en la sección "Color" para expandirla. Luego debe hacer clic en la opción "Fondo".

Aparecerá una ventana emergente donde puede seleccionar un color sólido o degradado. También habrá una gama de colores para elegir. Al hacer clic en un color, cambiará inmediatamente el fondo de su encabezado.

Puede encontrar más opciones de personalización haciendo clic en el ícono Estilos en la esquina superior derecha de la página. Esto le permite cambiar la fuente, los colores y el diseño del encabezado.

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

Si desea un control total sobre el encabezado, el pie de página y las barras laterales para darle a su sitio un diseño único, le recomendamos que utilice Producto de semilla.

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: Puedes usar ... versión gratuita de SeedProd para crear páginas de destino personalizadas, incluidos encabezados personalizados, pero necesita la versión Pro para crear temas totalmente 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 código. Una vez que haya hecho eso, SeedProd facilita la personalización de su encabezado.

Todo lo que tiene que hacer es hacer clic en el enlace "Editar tema" debajo del encabezado.

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

Desde aquí puede personalizar fácilmente su encabezado a través de añadir nuevos bloques.

Hay bloques para etiquetas de plantilla, como el logotipo de un sitio web, 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 con el generador de temas. Por ejemplo, puede cambiar el tamaño y la orientación de su logotipo o elegir qué páginas mostrar en el menú de navegación. Incluso puede agregar una imagen al encabezado.

SeedProd también le permite agregar una sección completa a la plantilla de encabezado de su tema.

Las secciones son un grupo de bloques que puedes usar para diferentes áreas de tu sitio. Esto incluye encabezados, pies de página, características, recomendaciones, llamados a la acción y más.

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

Luego seleccione el área de encabezado que desea usar para su sitio web. SeedProd proporciona varias plantillas de sección que puede usar.

Luego continúe y personalice el área del encabezado.

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

Ahora está listo para publicar su encabezado personalizado.

solo ve a SeedProd »Creador de temas Page desde su panel de control de WordPress y haga clic en el botón de opción Sí junto a "Habilitar tema de SeedProd".

Después de activar 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.

Crea diferentes encabezados personalizados para cada página

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

Theme Builder le permite agregar encabezados personalizados a cada página de su sitio web de WordPress. Esto le permite mostrar un encabezado personalizado para diferentes categorías, etiquetas, tipos de publicaciones, tipos de páginas y más.

Para empezar, necesitas caminar SeedProd »Creador de temas desde su tablero de WordPress y haga clic en el botón "Agregar una 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. A continuación, seleccione "Encabezado" como tipo de plantilla en el menú desplegable. Puede dejar el campo Prioridad en blanco.

Luego, debe ingresar las condiciones de visualización para su encabezado personalizado. Por ejemplo, usamos las condiciones bajo las cuales se mostrará en todas las publicaciones y páginas que están en la categoría Lecciones.

Asegúrese de hacer clic en el botón "Guardar" cuando haya terminado.

Luego puede continuar y editar el encabezado personalizado usando 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.

Para obtener más ideas sobre cómo personalizar su encabezado SeedProd, consulte nuestra guía para principiantes para crear fácilmente un tema de WordPress personalizado con el generador de temas SeedProd.

La mayoría de los sitios web muestran el mismo título 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 tiene más control si usa un generador de temas.

Anteriormente le mostramos cómo personalizar su encabezado con Producto de semilla Complemento para crear temas. 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 SeedProd »Creador de temas y haga clic en el botón naranja Agregar una nueva plantilla de tema. Alternativamente, puede duplicar su encabezado actual y usarlo como punto de partida.

Aparecerá una ventana emergente en la que puede nombrar la plantilla de diseño y seleccionar "Encabezado" en el menú desplegable "Tipo".

También debe ingresar una prioridad. Se utiliza cuando hay más de un título, se cumplen las condiciones de una página en particular y se muestra el título con mayor prioridad. El encabezado predeterminado tiene una prioridad de 0, así que asegúrese de ingresar 1 o superior.

A continuación, debe especificar una o más condiciones. Esto permite que SeedProd sepa cuándo mostrar un encabezado específico. Simplemente elija los términos de los menús desplegables.

En los dos primeros menús tienes que seleccionar "Incluir" y luego "Hay una categoría". En el último campo, ingrese el nombre de la categoría en la que desea que aparezca el encabezado.

Puede mostrar el mismo título para varias categorías haciendo clic en el botón Agregar condición y agregando 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 utilizando el editor de arrastrar y soltar de SeedProd, como le mostramos antes.

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

Si usa código para crear un tema personalizado desde cero, es posible que desee agregar el widget de WordPress a su encabezado para llamar la atención de sus visitantes. Los gadgets facilitan la adición de bloques de contenido a secciones específicas de su tema, pero no todos los temas incluyen un área de widget de encabezado.

Ya mencionamos lo fácil que es agregar widgets a su encabezado Creador del tema SeedProd. Pero, ¿qué sucede si desea agregar el widget al título de un tema simple de WordPress?

Para algunos temas, como el tema Astra, puede hacerlo con la herramienta de personalización de temas de WordPress. Por ejemplo, Astra agrega una opción llamada "Header Builder" que le permite personalizar completamente el encabezado, incluida la adición de widgets.

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

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

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '



',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Este código registra una nueva barra lateral o área lista para widgets para tu tema.

Si vas a ... Apariencia »Widgets, verá una nueva área de widget denominada "Área de widget de encabezado personalizado". Ahora puede agregar sus widgets a esta nueva área.

Finalmente, debe agregar 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 gadgets que creó anteriormente a su encabezado, lo que permitirá que los gadgets aparezcan en su sitio web.

Debe copiar y pegar este fragmento de código donde desea que aparezca el widget.

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

Para obtener más detalles, consulte nuestra guía sobre cómo agregar el 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 al área del encabezado.

Mostrar imágenes que cambian aleatoriamente ayuda a atraer 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 la herramienta de personalización de temas y cargar imágenes de encabezado. Esta opción puede variar según el tema de WordPress que está utilizando.

Luego seleccione la opción Aleatorizar encabezados cargados.

Si desea más control y flexibilidad al mostrar imágenes aleatorias en el área del encabezado, también puede usar el complemento de WordPress.

Para obtener más información, consulte nuestra guía para agregar imágenes de encabezado aleatorias a su blog de WordPress.

Finalmente, si desea agregar un código personalizado al área de encabezado de su sitio web, puede hacerlo fácilmente desde el panel de control de WordPress. Este método se recomienda para usuarios avanzados y no es adecuado para principiantes, ya que implica la edición de código y requiere conocimientos técnicos.

Puede encontrar los archivos de encabezado en su tema yendo a Apariencia »Editor de temas de archivo desde el panel de administración de WordPress. En los archivos style.css, puede desplazarse hacia abajo hasta el área del encabezado del sitio y agregar o quitar código.

Nota: No recomendamos editar los archivos del tema directamente, ya que el más mínimo error puede dañar su sitio web y confundir el tema.

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

Primero, instale y active el complemento Insertar encabezados y pies de página. Consulte nuestra guía de instalación del complemento de WordPress para obtener más detalles.

Después de la activación, puede ir Ajustes »Insertar encabezados y pies de página desde tu panel de WordPress. Luego ingrese el código personalizado en la sección Scripts del encabezado.

Una vez que haya ingresado el código, guarde los cambios.

Para obtener más información, consulte nuestra guía para agregar código de encabezado y pie de página a WordPress.

Esperamos que este tutorial te haya ayudado a aprender a personalizar el encabezado de WordPress. También puede querer aprender a elegir el mejor software de diseño web o navegar por nuestra lista de complementos que necesita para mejorar su sitio web.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.