¿Busca una manera fácil de personalizar el encabezado de WordPress?
Debido a que su encabezado se encuentra en la parte superior de cada página, juega un papel esencial en la marca de su sitio web, ayudando a sus visitantes a navegar y promoviendo su contenido más importante.
Sin embargo, para obtener los mayores beneficios del encabezado de tu sitio, necesitas una forma de editarlo, que muchos temas no ofrecen.
En esta publicación, compartiremos algunas tácticas diferentes que puedes usar para personalizar el encabezado en WordPress utilizando interfaces simples de arrastrar y soltar y tu propio código.
La opción más fácil es usar el tema Astra y su generador de encabezados de arrastrar y soltar, pero también compartiremos algunas otras tácticas que funcionarán con cualquier tema de WordPress.
- ¿Qué es el Encabezado de WordPress?
- Cómo Personalizar el encabezado de WordPress Con Astra
- 1. Abra el Creador de encabezados Astra
- 2. Agregue y Organice contenido de encabezado
- 3. Personalizar el diseño del encabezado
- 4. Experimente con diferentes Tipos de Encabezados
- Otras tres Formas de Personalizar el encabezado de WordPress
- 1. Usa la configuración del Personalizador de tu tema
- 2. Usa Elementor y un Complemento de Encabezado Personalizado Gratuito
- 3. Usar Código personalizado (Avanzado)
- Personaliza tu encabezado de WordPress Hoy
¿Qué es el Encabezado de WordPress?
El encabezado de WordPress es la parte de tu sitio que aparece en la parte superior de cada página. Por lo general, incluye al menos dos elementos como mínimo:
- Logotipo/identidad del sitio
- Menú de navegación)
Por ejemplo, así es como se ve el encabezado en el blog de Astra. Puede ver que incluye el logotipo de Astra, así como dos menús de navegación separados:
Dependiendo de sus necesidades, también puede incluir otros elementos, como iconos de redes sociales, un cuadro de búsqueda, promociones, su número de teléfono y otra información.
Si alguna vez necesitas ver cómo funciona, el encabezado de WordPress está contenido en el encabezado.archivo php en tu tema de WordPress.
Cómo Personalizar el encabezado de WordPress Con Astra
Si desea un control total sobre su encabezado de WordPress, el tema gratuito de Astra le ofrece una forma de arrastrar y soltar, sin código, para personalizar completamente su encabezado de WordPress.
Podrás ver tus cambios de inmediato en una vista previa en vivo de tu sitio web y puedes agregar fácilmente diferentes tipos de contenido, como botones, iconos sociales, un cuadro de búsqueda y más.
Para comenzar, deberás instalar y activar el tema Astra. También puede importar uno de los cientos de pre-construcción de sitios de demostración para obtener fácil y rápidamente. Si necesita ayuda con cualquiera de esos pasos, tenemos muchas guías para ayudarlo:
- Cómo instalar Astra
- Cómo importar sitios de inicio
Una vez que tenga su sitio básico listo para funcionar, le mostramos cómo personalizar su encabezado con Astra.
Hola! Me llamo Sujay y soy CEO de Astra.
Nuestra misión es ayudar a las pequeñas empresas a crecer en línea con productos de software asequibles y la educación que necesita para tener éxito.
Deje un comentario a continuación si desea unirse a la conversación, o haga clic aquí si desea ayuda personal o para interactuar con nuestro equipo en privado.
1. Abra el Creador de encabezados Astra
Para comenzar, vaya a Apariencia → Personalizar en su panel de WordPress para iniciar el Personalizador nativo de WordPress. A continuación, seleccione el Encabezado de Generador de opción:
una Vez que inicie el encabezado builder, usted verá un nuevo conjunto de opciones donde se puede controlar el diseño de la cabecera:
2. Agregue y Organice contenido de encabezado
Ahora para la parte divertida: agregar contenido. Puede ver que tiene tres filas en el creador de encabezados. Cada fila controla el contenido de una parte diferente del encabezado:
- Encabezado anterior
- Encabezado principal: aquí es donde pondrás tu contenido «principal».
- Encabezado inferior
Querrás incluir contenido en el encabezado principal, y luego tienes la opción de agregar contenido por encima o por debajo de eso de acuerdo a tus necesidades.
Para agregar contenido, puede hacer clic en el lugar donde desea agregar contenido. Esto abrirá un conjunto de opciones:
- menú Principal
- menú Secundario
- Logo
- Botón
- Buscar
- Social
- HTML 1
- HTML 2
tenga en cuenta que, como agregar contenido, podrá ver menos opciones. Por ejemplo, solo puede agregar su logotipo una vez, por lo que esa opción desaparecerá una vez que ya haya agregado un logotipo a su encabezado:
Una vez que hayas agregado algún contenido, puedes hacer clic en ese contenido para abrir su configuración. Por ejemplo, si agregas un botón, podrás controlar el texto del botón y el enlace.
Usted también puede abrir las opciones de Diseño para personalizar más las cosas:
Si desea reorganizar su contenido o se mueve a una fila diferente, todo lo que necesitas hacer es arrastrar-y-soltar:
3. Personalizar el diseño del encabezado
Arriba, le mostramos cómo personalizar los elementos individuales dentro de su encabezado. También tiene varias opciones para personalizar su encabezado como un todo.
En primer lugar, puede ir a la pestaña Diseño del creador de encabezados principal para controlar el ancho y el espaciado de su encabezado. También puede hacer clic en el icono de engranaje de cada fila de encabezado para personalizar su altura y diseño:
4. Experimente con diferentes Tipos de Encabezados
Dependiendo de si está utilizando la versión gratuita de Astra o Astra Pro, también tendrá acceso a tipos adicionales de encabezados, como los encabezados transparentes (gratuitos) y los encabezados adhesivos (Pro).
Puede usar el mismo generador de encabezado y pie de página anterior para diseñar su encabezado transparente o pegajoso. Verás esas opciones en la sección Tipos de encabezado. Puede hacer clic en ellos para expandir la configuración y diseñar los diferentes tipos de encabezado:
Otras tres Formas de Personalizar el encabezado de WordPress
Mientras que el creador de encabezados de arrastrar y soltar de Astra ofrece la forma más fácil de personalizar el encabezado de WordPress, también hay otras tácticas que puedes usar, sin importar el tema que estés usando.
Aquí están algunas de las mejores estrategias…
1. Usa la configuración del Personalizador de tu tema
La mayoría de los temas de WordPress te dan cierto control sobre el encabezado de tu sitio en el Personalizador nativo de WordPress. Es poco probable que obtenga el nivel de detalle que Astra le da, pero obtendrá algunas opciones para controlar cómo se ve y funciona su encabezado.
Estas opciones variarán en función de su tema, pero generalmente puede abrirlas haciendo clic en el icono de lápiz azul junto a los elementos en su encabezado. Por ejemplo, en el nuevo tema predeterminado Twenty Twenty-One, puedes ver que puedes personalizar tu:
- Logo
- Titular del sitio
- Menú
Si necesitas ayuda adicional, puedes consultar la documentación de tu desarrollador de temas.
2. Usa Elementor y un Complemento de Encabezado Personalizado Gratuito
Si no estás familiarizado con Elementor, es una herramienta de diseño visual de arrastrar y soltar que puedes usar para crear contenido en tu sitio. Con el plugin gratuito Elementor – Header, Footer & Blocks Template custom header de WordPress, puedes usar la versión gratuita de Elementor para diseñar tu propio encabezado personalizado de WordPress.
Este plugin funciona perfectamente con el tema gratuito Astra, así como con cualquier otro tema de WordPress que puedas estar utilizando.
Para comenzar, instale y active el complemento gratuito desde WordPress.org. También necesitarás instalar la versión gratuita de Elementor si aún no lo has hecho.
Una vez hecho esto, vaya a Apariencia → Pie de página de encabezado & Bloques y haga clic en Agregar nuevo:
Dale un nombre a tu plantilla y elige Encabezado en Tipo de plantilla. También puede usar las opciones Mostrar en o Roles de usuario para dirigir el encabezado a contenido o usuarios específicos.
Luego, publica tu encabezado y haz clic en Editar con Elementor para abrir el creador visual:
Ahora, puede personalizar completamente su encabezado utilizando la interfaz visual de arrastrar y soltar de Elementor. El complemento también le da un nuevo encabezado, pie de página & Bloquea widgets que puede usar para agregar elementos importantes del sitio, como el logotipo de su sitio o un menú de navegación:
Para obtener más información sobre el uso de Elementor, consulte nuestro tutorial completo de Elementor o revisión de Elementor.
3. Usar Código personalizado (Avanzado)
Finalmente, si eres un usuario avanzado, también puedes personalizar el encabezado de WordPress usando tu propio código. Para hacer esto, necesitarás al menos un conocimiento práctico de HTML, PHP y CSS, por lo que esta no es una opción para usuarios no técnicos.
Si no conoce esos lenguajes de codificación, querrá seguir uno de los métodos anteriores de esta lista.
Hay dos partes para usar el código para personalizar el encabezado:
- HTML / PHP-esto controla el contenido real de su encabezado.
- CSS: esto controla el estilo de su encabezado.
Como mencionamos anteriormente, el contenido del encabezado de su sitio reside en el encabezado.archivo php. Por lo tanto, para personalizar el contenido de tu encabezado, tendrás que trabajar directamente con este archivo. O bien, algunos temas, como Astra, también ofrecen ganchos que puedes usar para agregar contenido al encabezado.
En la guía de ganchos Astra visual, puede ver que tiene varias opciones para personalizar el encabezado:
Si quieres editar el encabezado de tu tema.archivo php directamente, debe usar un tema hijo para asegurarse de que no sobrescriba sus cambios cuando actualice su tema.
Por otro lado, si estás usando hooks, no necesitas usar un tema hijo siempre y cuando uses un plugin como Astra Hooks o Fragmentos de código. Si agregas tus ganchos directamente a las funciones de tu tema.archivo php, sin embargo, aún debe usar un tema hijo.
Con Astra Pro, también tiene la opción de agregar ganchos utilizando la función de diseño personalizado de Astra Pro.
Lo bueno de los diseños personalizados de Astra Pro es que puede usar reglas de visualización para controlar exactamente cuándo cambia la visualización. Por ejemplo, puede agregar contenido personalizado a su encabezado que solo aparezca para los usuarios que han iniciado sesión.
Así es como personalizar el contenido de tu encabezado, pero ¿qué pasa con el estilo?
Para personalizar el estilo de tu encabezado, puedes editarlo.archivo css directamente si está utilizando un tema secundario. O bien, puede usar el área CSS adicional en el Personalizador de WordPress para agregar sus propios estilos personalizados al encabezado.
Personaliza tu encabezado de WordPress Hoy
Tu encabezado de WordPress juega un papel esencial en el éxito de tu sitio. Ayuda a marcar tu sitio web, guiar a tus visitantes a contenido clave, promover información importante o perfiles sociales, y mucho más.
La forma más fácil de obtener el control total sobre el encabezado de su sitio es usar el tema Astra gratuito. Con Astra, obtienes acceso a un creador de encabezados visual de arrastrar y soltar. No necesita ningún código o complementos externos, obtendrá el 100% de control de su encabezado desde el interior del Personalizador de WordPress.
En otras situaciones, también puede usar la configuración del Personalizador de un tema diferente, el complemento de plantilla de bloques Elementor – Header, Footer & o su propio código si tiene los conocimientos técnicos.
