En resumen: Cómo personalizo mi encabezado de WordPress sin romper mi tema
El encabezado de tu WordPress es lo primero que ven los visitantes, y la mayoría de los temas te dan mucho menos control sobre él del que esperarías. Aquí tienes los cuatro métodos que utilizo:
- Constructor de temas SeedProd: Control total de apuntar y hacer clic sobre cada elemento del encabezado, funciona con cualquier tema y mantiene tus cambios cuando actualizas o cambias de tema.
- Personalizador de temas de WordPress (o Editor del sitio): Bueno para ajustes básicos de logo, título y menú en temas clásicos. Los temas modernos de FSE usan Apariencia » Editor en su lugar.
- Plugin Insert Headers and Footers: Lo mejor para añadir scripts o fragmentos de código sencillos al área del encabezado sin tocar los archivos del tema.
- Ediciones de CSS y header.php: Solo para usuarios avanzados. Los cambios de CSS son seguros; editar header.php directamente requiere un tema hijo para sobrevivir a las actualizaciones.
Tu tema de WordPress eligió el diseño de tu encabezado. No tú.
He editado encabezados en docenas de sitios de WordPress a lo largo de los años, y esa es la cosa que más frustra a la gente. Ya sea que estés intentando añadir un logo, cambiar tu navegación o incluir un botón de llamada a la acción, tu encabezado marca el tono de todo tu sitio. Con el enfoque correcto, incluso puedes mostrar diferentes encabezados en diferentes páginas, algo que la mayoría de los temas de WordPress no pueden hacer por sí solos.
En esta guía, te mostraré cómo editar tu encabezado de WordPress utilizando cuatro métodos, desde el constructor visual hasta la personalización de CSS.
Resumen rápido: Cómo editar tu encabezado de WordPress
- Editar encabezado con un constructor visual (sin código)
- Edita el encabezado usando el personalizador de temas de WordPress
- Usa un plugin de encabezado para cambios sencillos
- Edita el código manualmente (avanzado)
¿Qué es el encabezado de WordPress?
El encabezado de WordPress es la sección en la parte superior de cada página de tu sitio. Típicamente incluye tu logo, menú de navegación y cualquier CTA como un número de teléfono o un botón de registro.
Por ejemplo, así es como se ve el encabezado en el sitio web de SeedProd.
Como puedes ver, tiene el logo de SeedProd, un menú de navegación y un botón de llamada a la acción para empezar con SeedProd.
Si tu sitio web tiene otras necesidades, puedes añadir elementos extra al encabezado de tu sitio WordPress. Al igual que SeedProd, podrías añadir botones de llamada a la acción o incluir una barra de búsqueda, iconos de redes sociales y otro contenido.
Puedes encontrar los detalles de tu encabezado de WordPress en el archivo header.php de tu tema de WordPress. Solo sugerimos editar ese archivo si eres un usuario avanzado que entiende lo que está haciendo.
¿Qué puedes cambiar en un encabezado de WordPress?
El encabezado es donde se hacen la mayoría de las primeras impresiones, y la mayoría de los temas de WordPress te dan casi ningún control sobre él. Entender qué es realmente editable te ayuda a elegir el método correcto a continuación.
La mayoría de las personalizaciones del encabezado entran en estas categorías:
- Logo y título del sitio
- Lema
- Menú de navegación
- Botones CTA (número de teléfono, “Empezar prueba gratuita”, “Contáctanos”)
- Barra de búsqueda
- Iconos de redes sociales
- Color de fondo y fuentes
- Comportamiento fijo (encabezado que permanece visible al desplazarse)
- Diseño móvil (menú hamburguesa, elementos apilados vs. en línea)
El método que elijas determina cuántos de estos puedes controlar realmente. Un personalizador de temas estándar podría darte opciones de logo y eslogan, pero nada más. El constructor de encabezados de WordPress de SeedProd te da control total sobre todos ellos.
1. Cómo personalizar encabezados en WordPress con SeedProd
Si deseas un control completo sobre tu encabezado de WordPress, SeedProd te ofrece el m uevo control. Es el mejor plugin constructor de temas de WordPress que te permite crear una plantilla de encabezado de WordPress personalizada sin escribir c o.
Como a n no hemos empezado, solo ver s una plantilla de CSS Global.
El constructor de temas de SeedProd es agn ostico del tema. Reemplaza completamente tu tema activo de WordPress, por lo que los cambios que realices nunca se perder al actualizar o cambiar de tema.
Crear un encabezado personalizado para tu sitio web de WordPress solo lleva unos pocos clics, y puedes agregar elementos populares de encabezado con arrastrar y soltar.
Dicho esto, estos son los pasos para editar tu encabezado de WordPress con SeedProd.
Paso 1. Instalar el Plugin Constructor de Temas SeedProd
El constructor de temas de SeedProd funciona con cualquier tema de WordPress, por lo que no necesitas eliminar tu configuraci existente primero.
Primero, instala y activa SeedProd en tu sitio de WordPress.
Para obtener ayuda con esto, consulta esta gu paso a paso sobre c mo instalar un plugin de WordPress.
Nota: Necesitar al menos el plan Pro o Elite para desbloquear el constructor de temas.
Despu s de activar el plugin, ve a SeedProd Config aciones para introducir tu clave de licencia del plugin. Puedes encontrarla en tu cuenta en el sitio web de SeedProd.
Una vez que introduzcas tu clave de licencia y hagas clic en Verificar Clave, estar listo para crear un encabezado de WordPress personalizado usando SeedProd.
Paso 2. Elegir una plantilla de tema de inicio
Para editar tu encabezado con SeedProd, primero crear s un tema personalizado. No te preocupes, es m s sencillo de lo que parece.
Ve a SeedProd Constructor de Temas. Ver s tus archivos de plantilla de tema actuales listados en esta p gina.
Como aún no hemos empezado, solo verás una plantilla CSS global.
Tienes dos opciones para empezar:
- Usar una de las plantillas de SeedProd listas para usar como punto de partida
- Crear manualmente plantillas de tema desde cero
Recomiendo empezar con un tema existente. SeedProd genera todos los archivos de plantilla autom ticamente, incluyendo las plantillas de encabezado, pie de p gina y p ginas. Estos son temas completos y de calidad profesional que te dan una ventaja.
Haz clic en Temas y elige el que mejor se adapte a las necesidades de tu sitio.
Despu s de elegir un tema, SeedProd crea autom ticamente todos los archivos de plantilla. A partir de ah , puedes editar cada plantilla individualmente en el editor de arrastrar y soltar.
Paso 3. Personalizar la sección de cabecera
Para editar tu encabezado con SeedProd, busca la plantilla Encabezado y haz clic en Editar Dise o.
Esto abre el archivo de plantilla en el constructor de temas de SeedProd. Ver s una vista previa en vivo de tu plantilla de encabezado de WordPress a la derecha, con un panel de edici n a la izquierda.
Para cambiar cualquier elemento de tu plantilla de encabezado, apunta y haz clic para editarlo.
Dependiendo del elemento en el que hagas clic, ver s diferentes opciones de edici n en la columna izquierda. Puedes cambiar fuentes, colores, fondo, espaciado y m s.
Para agregar elementos de encabezado personalizados, arrastra bloques de SeedProd desde la columna izquierda a tu plantilla. Estos son los tipos de bloques disponibles:
- Etiquetas de plantilla: bloques que generan elementos del tema a partir de tu base de datos de WordPress, como entradas de blog, comentarios e imágenes destacadas.
- Bloques estándar: elementos comunes de diseño web que te permiten añadir imágenes, botones, texto, divisores y más.
- Bloques avanzados: bloques para añadir formularios de contacto, perfiles sociales, botones para compartir, shortcodes de WordPress, Google Maps y más.
- WooCommerce: si tienes una tienda online, usa estos bloques para mostrar productos, carritos de compra y páginas de pago personalizadas.
Uso de secciones para personalizar tu encabezado de WordPress
Aparte de bloques individuales, también puedes añadir secciones completas a tu plantilla de encabezado.
Cambia a la pestaña Secciones en el panel de Diseño.
Las secciones son grupos de bloques para diferentes áreas del diseño de tu sitio web. Puedes encontrar secciones listas para usar para tu encabezado, pie de página, llamadas a la acción, características y más.
Haz clic en cualquier sección de encabezado para añadirla a tu plantilla, luego edítala según tus necesidades.
Cuando estés satisfecho con el aspecto de tu encabezado, haz clic en Guardar en la esquina superior derecha.
Ahora repite este proceso para las otras plantillas de tu tema para crear un tema de WordPress completamente personalizado.
Paso 4. Publica tu Encabezado Personalizado de WordPress
Cuando estés satisfecho con tu plantilla de encabezado personalizada de WordPress, el último paso es activarla en tu sitio.
En SeedProd, aplicas tu encabezado personalizado de WordPress con un simple interruptor.
Ve a SeedProd » Theme Builder y activa el interruptor junto a ‘Enable SeedProd Theme’ a ‘Yes’.
SeedProd reemplaza tu diseño existente con el nuevo tema y encabezado de WordPress.
Visita tu sitio web para ver tu encabezado personalizado de WordPress en acción.
Cómo hacer que tu encabezado de WordPress sea fijo
Un encabezado fijo permanece visible mientras los visitantes se desplazan hacia abajo en la página, lo que mantiene tu navegación y las llamadas a la acción accesibles en todo momento. Ya sea que uses SeedProd o un tema estándar, el enfoque es el mismo: un pequeño fragmento de CSS.
Añade esto al CSS adicional de tu tema (ve a Apariencia » Personalizar » CSS adicional) o, si usas SeedProd, pégalo en SeedProd » Theme Builder » CSS global:
.site-header {
position: sticky;
top: 0;
z-index: 999;
}El selector .site-header varía según el tema, por lo que es posible que necesites inspeccionar el elemento de tu encabezado para encontrar la clase correcta.
Creación de Múltiples Encabezados Personalizados con SeedProd
También puedes crear varios encabezados para diferentes secciones de tu sitio web.
Por ejemplo, es posible que desees un encabezado que solo se muestre en categorías o páginas de destino específicas. Para hacerlo, crea una nueva plantilla y cambia las condiciones de visualización para que se adapten a tus necesidades.
Usando el constructor de temas de arrastrar y soltar de SeedProd, puedes crear cualquier diseño de encabezado personalizado que tu sitio necesite.
Si bien el editor visual de SeedProd ofrece la forma más fácil de editar tu encabezado de WordPress, también hay otros métodos que vale la pena conocer.
2. Edita Encabezados de WordPress con el Personalizador de Temas
La mayoría de los temas de WordPress te dan cierto control sobre el encabezado de tu sitio en el Personalizador nativo de WordPress. No te dará un control profundo, pero obtendrás opciones básicas para cambiar el aspecto y el comportamiento de tu encabezado.
Las opciones disponibles dependen de tu tema. Para la mayoría de los temas clásicos, ve a Apariencia » Personalizar desde tu panel de administración de WordPress. Luego haz clic en Identidad del sitio en la columna de la izquierda.
La mayoría de los temas te permiten personalizar tu logotipo, el título del sitio y la descripción desde este panel.
A continuación, puedes hacer clic en Menús para cambiar el diseño de tu menú de navegación.
Nota: Si estás utilizando un tema basado en bloques (FSE) como Twenty Twenty-Five (el predeterminado actual), el Personalizador clásico no está disponible. En su lugar, ve a Apariencia » Editor para editar tu encabezado utilizando la interfaz de edición de sitio completo.
Con el Editor del sitio, puedes editar tu encabezado de WordPress con el editor de bloques al igual que cualquier otra entrada o página. Ofrece más flexibilidad que el Personalizador clásico, pero aún menos control que el creador de encabezados dedicado de SeedProd para WordPress.
3. Personalizar encabezados en WordPress con un plugin de encabezados
Otra forma sencilla de editar el encabezado en WordPress es con un plugin de encabezados simple. Esta es una buena opción si necesitas agregar scripts o código a tu encabezado sin tocar directamente los archivos de tu tema.
Aunque hay cientos de plugins para elegir, el plugin gratuito Insert Headers and Footers es la opción más popular.
Después de activar el plugin en tu sitio web, encuéntralo en Ajustes » Insertar encabezados y pies de página.
Desde allí, puedes pegar cualquier código que desees agregar al encabezado de tu sitio web.
Cualquier script que agregues aquí se incluye automáticamente en la etiqueta de encabezado de tu sitio de WordPress. Haz clic en Guardar para almacenar tus cambios.
4. Personaliza el código del encabezado de WordPress (Avanzado)
Si eres un usuario avanzado, puedes editar tu encabezado de WordPress directamente usando HTML, PHP y CSS. Este método no es adecuado para principiantes.
Importante: Si planeas editar header.php directamente, hazlo en un tema hijo. De lo contrario, tus cambios se sobrescribirán cuando actualices tu tema. El enfoque solo CSS a continuación no tiene ese problema.
Para editar el código de tu encabezado, ve a Apariencia » Editor de temas y abre el archivo Style.css.
Desde allí, desplázate hacia abajo hasta la sección Encabezado del sitio y agrega o elimina código para ajustar el estilo.
También puedes editar tu archivo header.php para realizar cambios estructurales y funcionales. Por ejemplo, si deseas agregar un número de teléfono o reestructurar el diseño del encabezado, eso se encuentra en header.php en lugar de CSS.
Esos cambios se aplican en todo el sitio. Si deseas que tu encabezado móvil se vea diferente, aquí te explicamos cómo manejar eso por separado.
Cómo personalizar tu encabezado de WordPress en dispositivos móviles
Los encabezados de escritorio y móviles a menudo necesitan diseños diferentes. Un menú de navegación que se ve limpio en una pantalla de 1440 px puede convertirse en un desastre abarrotado en dispositivos móviles, y la mayoría de los temas no te dan una forma visual de solucionar eso.
Aquí tienes las tres formas de manejar la personalización del encabezado móvil en WordPress:
- Modo de vista previa adaptable de SeedProd: En el editor de encabezados de SeedProd, haz clic en el icono del móvil en la parte inferior de la pantalla para previsualizar y editar tu encabezado en tamaño móvil. Puedes ocultar elementos, ajustar el espaciado y reordenar bloques específicamente para el móvil sin afectar el diseño de escritorio.
- Consultas de medios CSS: Para sitios basados en temas, añade reglas CSS adaptables para dirigir elementos del encabezado en puntos de interrupción específicos. Por ejemplo, para ocultar un lema en el móvil:
@media (max-width: 768px) { .site-description { display: none; } } - Ajustes del menú móvil integrados en tu tema: La mayoría de los temas manejan el menú de hamburguesa automáticamente, pero revisa Apariencia » Personalizar » Móvil (o un panel similar) para ver las opciones específicas para móviles que incluye tu tema.
El problema más común que he visto son los estilos de encabezado de escritorio y móvil que entran en conflicto después de una edición CSS. Si eso sucede, comprueba si tu regla CSS tiene un punto de interrupción adaptable o si estás editando el selector correcto para el móvil.
Preguntas frecuentes sobre el encabezado de WordPress
¿Cómo edito mi encabezado de WordPress sin romper mi tema?
El enfoque más seguro es usar el constructor de temas de SeedProd, que reemplaza tu tema activo en lugar de modificarlo. Eso significa que tu encabezado personalizado nunca corre peligro cuando actualizas o cambias de tema. Si prefieres quedarte con tu tema, cíñete a las ediciones CSS a través de Apariencia » Personalizar » CSS adicional y evita editar header.php directamente. Si necesitas editar header.php, usa siempre primero un tema hijo.
¿Cuál es la diferencia entre la edición de encabezados de WordPress.com y WordPress.org?
WordPress.org (autoalojado) te da control total sobre tu encabezado a través de la personalización del tema, plugins y edición directa de archivos. WordPress.com es un servicio alojado con más restricciones. En WordPress.com, editas tu encabezado a través de Sitio » Editor, y tus opciones dependen de tu plan. Los métodos de este artículo se aplican solo a sitios autoalojados de WordPress.org.
¿Cómo hago que mi encabezado de WordPress sea fijo?
Tanto SeedProd como las configuraciones de temas estándar usan el mismo enfoque CSS. Añade position: sticky; top: 0; z-index: 999; a la clase CSS de tu elemento de encabezado. Para usuarios de SeedProd, pégalo en SeedProd » Theme Builder » CSS global. Para temas estándar, ve a Apariencia » Personalizar » CSS adicional. La clase exacta varía según el tema, así que inspecciona tu elemento de encabezado para encontrar el selector correcto.
¿Puedo mostrar un encabezado diferente en páginas específicas en WordPress?
Sí, con SeedProd puedes crear múltiples plantillas de encabezado y asignar cada una a páginas, categorías o tipos de publicación específicos usando condiciones de visualización. Esto está integrado en el constructor de temas y no requiere codificación. Con un tema de WordPress estándar, mostrar encabezados diferentes en páginas diferentes requiere PHP personalizado o un plugin como Conditional Headers.
Personaliza tu encabezado de WordPress hoy mismo
Esperamos que este artículo te haya ayudado a aprender cómo editar encabezados en WordPress.
La forma más sencilla de tener control total sobre la configuración de tu encabezado personalizado de WordPress es con SeedProd. Ofrece un creador de encabezados de WordPress visual de arrastrar y soltar, no necesitas editar ningún código ni archivo de tema, y puedes hacer todos los cambios directamente desde el panel de administración de WordPress.
También te puede interesar esta guía sobre cómo editar el pie de página en WordPress.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
