✅Cómo Personalizar el Header en el Tema Ohio Paso a Paso

Si has llegado hasta aquí, probablemente ya hayas visto el artículo principal donde explico qué es el tema Ohio, cómo instalar la demo y cómo sacarle el máximo partido desde el primer momento. Si no lo has leído aún, te recomiendo empezar por ahí:
Ohio Theme para WordPress: Guía completa + vídeo

Ahora que ya tienes una base, vamos a profundizar en una de las partes más visibles y potentes del tema Ohio: el header. Aquí te explico paso a paso cómo personalizarlo al detalle, sin perderte entre opciones ni romper nada.

Dónde se edita el header en Ohio

En Ohio puedes trabajar el encabezado usando las opciones prediseñadas que vienen en Theme Options.

Accede al personalizador del header

Ve a tu panel de WordPress y entra en:

Ohio > Theme Settings > Header

General

En esta pestaña se configuran los ajustes base del encabezado para todo el sitio.

• Header
  Activa o desactiva el encabezado global en toda la web. Si lo desactivas, no se mostrará ningún header por defecto.
• Layout
  Permite elegir entre varios diseños prediseñados:
  • Standard: logo a la izquierda, menú a la derecha.
  • With top logo: logo centrado arriba, menú debajo.
  • With center menu: menú centrado, logo a un lado.
  • With center logo: logo en el centro, menú a ambos lados.
  • With sidebar menu: menú vertical en la izquierda.
  • With top hamburger: menú tipo hamburguesa arriba.
  • With center hamburger: hamburguesa centrada (más minimalista).
  • With boxed area: todo centrado dentro de un contenedor estrecho.
• Wrap Container
  Restringe el ancho del header a un contenedor interno, en lugar de usar todo el ancho de pantalla. Útil para diseños más centrados.
• Side Gaps
  Define los márgenes laterales del header cuando está a ancho completo. Puedes usar unidades como px, em, %, etc.
• Blank Spacer
  Activa un espacio en blanco debajo del header cuando es fijo o sticky, para que el contenido no se solape.
• Fixed Position
  Hace que el header se quede fijo en la parte superior al hacer scroll, sin importar si es sticky o no.
• Background
  Permite establecer el fondo del header, ya sea con color sólido o una imagen. Si eliges color, puedes usar cualquier valor de la paleta o personalizado.
• Border
  Activa un borde inferior en el header. Puedes elegir estilo (sólido, punteado, etc.) y color. Aporta una línea visual de separación con el resto del contenido.
• Header Typography
  Personaliza completamente la tipografía del encabezado:
  • Tamaño, grosor, estilo (negrita, cursiva)
  • Color del texto
  • Transformaciones (mayúsculas, subrayado, etc.)
  • Altura de línea y espacio entre letras
  • Fuente de Google Fonts, variantes y subsets

Sticky Header

En esta pestaña se configuran las opciones del encabezado flotante que permanece visible al hacer scroll.

• Sticky Header
  Activa o desactiva el modo sticky. Al activarlo, el header se mantiene visible en la parte superior al hacer scroll.
  Importante: esta opción no funciona si tienes activada la opción «Fixed Position» en la pestaña General, ya que son comportamientos distintos.
• Sticky Header (Mobile)
  Permite activar o desactivar el sticky header también en dispositivos móviles. Puede ser útil desactivarlo en móviles si quieres una experiencia más limpia.
• Initial Offset
  Define a partir de cuántos píxeles de scroll debe activarse el sticky header. Por ejemplo, si pones 150, el header aparecerá como sticky al bajar 150 píxeles.
• Height
  Permite establecer una altura diferente del header cuando está en modo sticky. Puedes definirlo por separado para escritorio, tablet y móvil.
  Esto es útil si quieres que el sticky header sea más compacto que el header normal.
• Background
  Permite personalizar el fondo del sticky header. Puedes elegir:
  • Solo color
  • Imagen de fondo
    Esto puede ser distinto al fondo del header original, para lograr contraste al hacer scroll.
• Border
  Activa o desactiva un borde inferior en el sticky header. Puede usarse como línea divisoria para diferenciarlo del contenido al hacer scroll.
• Sticky Header Typography
  Define el estilo del texto específicamente para el modo sticky:
  • Tamaño de fuente, grosor, estilo
  • Color del texto
  • Transformaciones (mayúsculas, subrayado, etc.)
  • Altura de línea y espaciado
  • Fuente de Google Fonts, variantes y subsets

Mobile Header

Esta pestaña permite personalizar cómo se muestra el header en dispositivos móviles, separando el estilo del diseño de escritorio.

• Search Icon
  Activa o desactiva el icono de búsqueda dentro del header móvil.
  Para que funcione correctamente, también debes tener activada la búsqueda desde Theme Settings > General > Search.

Esta opción es útil si quieres ofrecer una barra de búsqueda accesible en pantallas pequeñas sin ocupar demasiado espacio.

• Mobile Header Typography
  Aquí puedes ajustar el estilo del texto del encabezado específicamente para móviles. Las opciones son las siguientes:
  • Font Size: tamaño de fuente en unidades CSS (px, em, rem, etc.)
  • Font Weight: grosor del texto (normal, negrita, etc.)
  • Font Style: estilo del texto (normal, cursiva)
  • Color: color de los elementos de texto en el header móvil
  • Text Transform: control de mayúsculas, minúsculas o capitalización
  • Text Decoration: subrayado, tachado, etc.
  • Line Height: altura de línea
  • Letter Spacing: espacio entre caracteres
  • Font Family: fuente de Google Fonts seleccionable
  • Variants y Subsets: opciones adicionales que se activan según la fuente elegida

Subheader

La subcabecera es una franja adicional que aparece por encima del header principal. Puede ser útil para mostrar información extra, accesos rápidos o elementos como selector de idioma o divisa.

• Subheader
  Activa o desactiva la subcabecera en todo el sitio.
• Content (Left Part) y Content (Left Right)
  Permiten añadir contenido en la parte izquierda y derecha de la subcabecera, respectivamente.
  Puedes añadir ítems como texto, enlaces, iconos o incluso shortcodes.
  Cada ítem tiene la opción de mostrarse o no en móviles.
• Height
  Permite definir la altura de la subcabecera de forma independiente en escritorio, tablet y móvil. Se recomienda ajustar este valor si cargas mucho contenido para evitar solapamientos.
• Background
  Puedes establecer el fondo de la subcabecera como un color sólido o una imagen personalizada.
• Currency Switcher
  Muestra un selector de moneda en la subcabecera si estás usando el plugin WOOCS (FOX).
  Ideal para tiendas online con múltiples divisas.
• Language Switcher
  Activa un selector de idioma compatible con WPML.
  Se mostrará en la subcabecera si tienes WPML activo en tu web.
• Content Typography
  Permite personalizar la tipografía del texto en la subcabecera:
  • Tamaño, grosor y estilo
  • Color, transformación de texto y decoración
  • Altura de línea y espaciado entre letras
  • Fuente desde Google Fonts, con opciones de variantes y subsets

CTA Buttons

Esta pestaña permite añadir botones de llamada a la acción (CTA) directamente en el header, lo que puede ser útil para destacar enlaces importantes como contacto, login, descarga de catálogo, etc.

• CTA Buttons
  Activa o desactiva por completo los botones de CTA en el header.
  Si está desactivado, no se mostrará ningún botón aunque estén configurados.
• Primary Button
  Aquí puedes definir el botón principal:
  • Texto del botón (ejemplo: Let’s talk)
  • Enlace (URL a la que apunta)
  • Opciones para editar, abrir en nueva pestaña o eliminar el botón
• Extra Button
  Permite añadir uno o varios botones adicionales. Al hacer clic en + Add Button, puedes personalizar los atributos y el tipo de cada botón adicional, por ejemplo, si es un enlace, ancla interna, etc.
• Button Text Color
  Define el color del texto dentro de los botones.
• Button Fill Color
  Permite elegir el color de fondo de los botones.
  Esto afecta al aspecto visual general, especialmente si los botones están sobre un fondo claro u oscuro.

Other

Esta pestaña incluye una única opción avanzada relacionada con la adaptación visual del encabezado.

• Dynamic Colors
  Activa o desactiva el modo de colores dinámicos.
  Cuando está activado, el tema Ohio ajusta automáticamente el color de los elementos del header (como el logo, iconos o texto) según el fondo de la sección sobre la que se encuentre.

Esto es especialmente útil en diseños con secciones claras y oscuras combinadas, ya que mejora la legibilidad y evita tener que usar múltiples headers con colores distintos.

Ajustes generales del header vs personalización por página

Todos los ajustes que se realizan desde Ohio > Theme Settings > Header son de carácter general y afectan a todo el sitio. Sin embargo, el tema Ohio también permite personalizar el header de forma individual en páginas, entradas y otros tipos de contenido.

Desde el editor de cada página, encontrarás una sección llamada Page Settings (normalmente al final del editor), donde puedes:

• Activar o desactivar el header solo en esa página
• Hacer que el header sea transparente
• Cambiar el logo específicamente para esa vista
• Ajustar el esquema de color del texto del header
• Alterar su comportamiento en función del fondo de la sección superior

Esto resulta especialmente útil para crear landing pages, portadas de secciones o diseños personalizados que necesitan un encabezado distinto del global, sin tener que duplicar plantillas ni usar plugins externos.

Conclusión

El encabezado es uno de los elementos más visibles e importantes de cualquier sitio web. En el caso del tema Ohio, tienes un sistema bastante flexible que te permite combinar diseño, funcionalidad y usabilidad sin necesidad de recurrir a constructores externos ni plugins adicionales.

Aquí van algunos consejos para que aproveches al máximo todo lo que ofrece:

• No te limites al diseño por defecto. Prueba distintas combinaciones de layout, subheader y botones CTA hasta encontrar la estructura que mejor se adapte a tu sitio y a tus objetivos.
• Aprovecha los ajustes por dispositivo. El header móvil y el sticky header pueden tener estilos y comportamientos diferentes. Asegúrate de revisar cada pestaña y ajustar el diseño para que se vea bien en todos los tamaños de pantalla.
• Cuida la legibilidad. Usa bien el contraste entre fondo y texto, especialmente si activas el modo sticky o los colores dinámicos. Un header que no se lee bien puede hacer que los usuarios abandonen antes de navegar.
• Evita recargarlo demasiado. Si bien puedes añadir muchos elementos (subheaders, botones, iconos…), recuerda que el objetivo del header es guiar, no distraer. Prioriza lo importante.
• Aprovecha las opciones por página. Ohio te permite cambiar el comportamiento del header en páginas individuales. Usa esto para crear landings sin header, headers transparentes para secciones visuales, o incluso headers con botones diferentes según el contexto.

Y si aún no lo has hecho, no olvides revisar el artículo principal sobre el tema Ohio, donde explico desde cero cómo empezar a usarlo con una demo preinstalada y una visión global de todas sus posibilidades.