¿Cómo personalizar la cabecera de un sitio web WordPress?

Diseñar un bonito banner en un sitio web WordPress (Banner) es una forma estupenda de mostrar la cultura de su sitio web. Facilita la navegación y mejora la estética del sitio desde el punto de vista del diseño.

Muchos temas vienen con cabeceras prediseñadas, o puede personalizarlas, por ejemplo:

• Añadir enlaces a redes sociales
• Añadir menú desplegable
• Añadir opciones de búsqueda

ElEditor del sitio completopuede utilizar la funciónEditor de bloquesCree cabeceras profesionales sin escribir código personalizado ni depender de plugins.

A lo largo de esta guía, mostrará 3 formas diferentes Personalice la cabecera de su WordPress compartiendo algunos consejos avanzados de personalización de cabeceras y cómo crear varias plantillas de cabecera.

¿Qué es una cabecera de WordPress?

La cabecera es la parte superior de un sitio web y suele aparecer en la parte superior de cada página de un sitio web. Normalmente, la cabecera contendrá lo siguiente:

• Logotipo del sitio web
• función de búsqueda
• Menús de navegación básicos (como blogs,Quiénes somosyContacte con nosotrosetc.)

La cabecera del sitio puede personalizarse para que resulte más útil a los visitantes, por ejemplo añadiendo:

• Pancartas promocionales
• botón de llamada(CTA)
• redes socialesenlace (en una página web)
• Páginas popularesenlace (en una página web)

A continuación, vea cómo personalizar la cabecera de su sitio web WordPress.

Personalizar la cabecera de WordPress

Método 1: Utilizar el personalizador de temas de WordPress

muchos de Temas de WordPressAyuda restante Personalizador de temas de WordPressEs una forma estupenda de personalizar el aspecto de su sitio web. Por ejemplo, estoy utilizando Twenty Twenty | Tema de WordPress que es compatible con el personalizador de temas, ya que se lanzó antes de que WordPress 5.9 introdujera la funcionalidad de edición completa del sitio.

Nota: Este enfoque funciona para los temas más antiguos, ya que los temas más nuevos están cambiando aArquitectura basada en bloques. En la siguiente sección, aprenderemos cómoPersonalice las cabeceras con todas las funciones de edición del sitio, continúe bajando por la página.

Para acceder al personalizador de temas de WordPress, vaya a Apariencia > Personalización. Si no ve esta opción, significa que el sitio admite la función de edición completa del sitio.

existeTema Twenty TwentyNo hay muchas opciones para editar títulos. De hecho, no hay ninguna sección dedicada a la edición de títulos. Para personalizar el título, vaya a"Color"Cambios parcialesTítulo Color.

También se puede acceder a ella yendo a Opciones del temaEn el título añadaOpciones de búsqueda.

Si desea añadir la cabeceraLogotipo del sitio webresponder cantandoTítulo del sitio webPuede dirigirse a"Logotipo de la página web"Opciones.

Eso es. En Veinte En el tema no es posible añadir o eliminar menús de navegación ni realizar otras personalizaciones de la cabecera.

Si utiliza un tema que ofrece opciones de personalización de cabecera dedicadas como AstraA continuación, puede realizar más cambios en la cabecera del sitio.

existe Astra En el tema, puede ir a Creador de cabeceras(Constructor de cabecera) para personalizar la cabecera del sitio.

Ahora, es posible realizar muchos cambios en la cabecera del sitio. Por ejemplo, podemos empezar actualizando el menú de navegación. Para ello, vaya a "menú principal"(Menú principal)Opciones.

Ahora desea personalizar el menú de navegación existente.

Haré clic en "Configurar menú desde aquí > Menú principal > + Crear nuevo menú. Crear nuevo menú").

Asigne un nombre al nuevo menú y pulse "Siguiente, añada las páginas que desea enlazar en el menú de navegación.

Ahora, si se fija, se eliminará el menú de navegación existente.

Para añadir un nuevo menú, pulse "+ Añadir artículosBotón.

Ahora, voy a ponerPágina de inicio, Página de precios.responder cantandoInicio de sesiónAñádalo a la cabecera y haga clic en "PubliqueBotón.

Ahora, verá que el nuevo menú de navegación se ha añadido a la cabecera del sitio.

Para una mayor personalización, también se puede añadir una cabecera alEnlaces a medios sociales. En la parte inferior de la página de personalización, verá un botón Añadirgadgetopciones, como se muestra a continuación:

Se han añadido widgets sociales al menú de navegación del sitio.

Ahora.Para añadir enlaces a widgets sociales, haga clic en el gadget social que acaba de añadir.

Ahora aparecerá un menú independiente para añadir enlaces en la parte izquierda. Los enlaces pueden añadirse desde este menú y el icono puede cambiarse según sea necesario.

A continuación, realizamos algunos cambios de diseño en la cabecera. Tiene que ir a la sección Diseño (DESIGN) Menú.

Añadiré un efecto de subrayado al menú de navegación.

También cambiará el color del texto del menú de navegación. Cuando se cambie, el color del texto será negro, rojo al hacer clic y azul al pasar el ratón por encima.

Se pueden hacer más personalizaciones según sea necesario, pero me detendré aquí en aras de un tutorial menos complicado. Si previsualizamos el sitio ahora, la cabecera tiene este aspecto:

No es bonito, pero viene personalizado. Se puede personalizar a su gusto.

Método 2: Personalizar con la función de edición de todo el sitio

Ahora vamos a personalizar la cabecera utilizando la función de edición de todo el sitio de WordPress. Cambiará a la Veinticuatro Tema. El cambio de un tema compatible con la arquitectura basada en bloques revela que el anterior "Se ha eliminado la opción "PersonalizadoEn lugar de "Opción de editor. Púlselo para iniciar la operación.

Una vez dentro del editor, las opciones de personalización son ilimitadas. En primer lugar, será como antesMenús de navegación personalizadosporque es demasiado confuso para mí.

Cómo editar el menú de navegación

• Pulse en el menú de navegación y después en "Edite).

• Sólo quiero mantenerlo en la cabecera".Páginas de inicio, Acerca de e Inicio de sesión.

• Cuando esté satisfecho con el ajuste, pulse"Save" (Guardar).

Este es el nuevo menú:

A continuación, añada un color de fondo a la cabecera.

• Seleccione la que contiene el título del sitio, el logotipo y el menú de navegación.Bloque de filas.

• Vaya a la configuración del bloque en el"Color"buscar debajo"Fondo"Opciones.

He añadido un color de fondo degradado a la cabecera. Debería ver el siguiente efecto al previsualizar:

El menú de navegación se ve demasiado pequeño y apiñado en las esquinas. Hagamos el texto ligeramente más grande y añadamos algo de espaciado.

• opciónBloque de navegaciónIr a "Estilospara cambiar el tamaño del texto a mediano y añadir espaciado entre los elementos del menú.

La cabecera debería verse mucho mejor ahora que está previsualizada:

A continuación, añadimos un submenú al menú de navegación que muestra las distintas opciones de idioma.

• Añadir "Bloque de submenúy lo llamó "Idiomas.
• A continuación, añada elementos de submenú como se muestra a continuación:

El efecto de previsualización es el siguiente:

Puede probar a utilizar el editor de sitios completo para crear cabeceras de navegación completamente únicas para los sitios de WordPress, ¿verdad?

Crear varias plantillas de cabecera

Una de las grandes ventajas del editor de sitios web de WordPress es la posibilidad de crear diferentes cabeceras para distintas plantillas.

Cambiar la apariencia y el estilo de la cabecera es muy fácil con el Editor de Sitios, que le permite utilizar las cabeceras preestablecidas en modo bloque.

Por ejemplo, me gustaría crear una cabecera única para una página individual, en lugar de una cabecera para todo el sitio.
Yo seleccionaría la plantilla para la que quiero crear cabeceras individuales y luego seguiría los pasos que se indican a continuación:

1. Eliminar la cabecera existente

Cuando se selecciona una plantilla, verá que la cabecera que se muestra actualmente es la que hemos creado anteriormente.

Consejo importante: No edite el encabezado existente directamente en esta ni en ninguna otra plantilla, ya que esto afectará al encabezado de todo el sitio.
Por lo tanto, tenemos que eliminar esta cabecera y crear una nueva para la plantilla actual.

• mostrar (una entrada)Vista de lista.
• opción"Cabecera"Haga clic enIcono elipses > Borrar.
• Esto borrará la cabecera existente.

El efecto de la eliminación del encabezado es el siguiente:

2. Añadir una nueva cabecera

Ahora podemos añadir un nuevo encabezado a la plantilla. Opcional:

• Creación de una nueva cabecera desde cero.o
• gasto o desembolsoPatrón de cabecera prefijado (Cabecera de patrón prefijado).

El texto opta por utilizar el modo de cabecera preestablecido con los siguientes pasos:

• entrar en Patrones > Cabeceras.

• Elija un patrón de encabezado que satisfaga las necesidades de un encabezado que sólo aparecerá en páginas o entradas individuales utilizando esta plantilla personalizada, sin afectar a todo el sitio.

Este es el aspecto de mi plantilla con una cabecera preestablecida:

El estilo y el contenido de la cabecera personalizada pueden ahora ajustarse aún más según sus necesidades.

Método 3: Crear un encabezado personalizado utilizando el constructor de páginas

Otra forma de personalizar la cabecera es utilizar la funciónconstructor de páginas. Sin embargo, si el sitio utiliza un tema personalizado con reglas de diseño estrictas y no permite el uso de creadores de páginas para anular su cabecera, puede que este método no sea adecuado.

Pero si está construyendo un sitio web desde cero, entonces un constructor de páginas sería una buena elección.

Aquí utilizo Elementor La versión gratuita (con opciones de personalización limitadas) del

Paso: Encabezado personalizado con Elementor

1. Vaya a Configuración de la apariencia
golpe (en el teclado) Apariencia > Personalizar.

2. Seleccione las opciones de encabezado y pie de página
golpe (en el teclado) Encabezado y pie de página Opciones.

3. empezar a diseñar
golpe (en el teclado) Empezar a diseñar para editar la cabecera con Elementor.

4. Seleccionar tema de cabecera
golpe (en el teclado) Encabezado Tema Encabezado (Header) Opciones.

5. Personalización sencilla
Debido a las limitadas opciones de personalización de la versión gratuita, aquí sólo podemos demostrar lo fácil que es ajustar las distintas opciones para personalizar la cabecera de la página web cambiando las opciones de color.

Este es el aspecto de la cabecera después de personalizar los colores:

alcanzar un veredicto

Arriba encontrará nuestra guía para personalizar la cabecera de su WordPress. Hemos descrito tres formas diferentes de hacerlo: utilizando la función Herramienta de personalización de temas de WordPressMediante el Función de edición en todo el sitioy el uso de una nueva tecnología como el Elementor page builder así.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres