Referencia de ajustes de la cabecera

El área Header de Settings → POM Theme → Site layout está dividida por responsabilidades. Esta referencia te ayuda a localizar un ajuste una vez que la cabecera inicial se ha construido.

Ajustes generales de la cabecera.

Usa esta subsección para la estructura y el comportamiento principales del escritorio:

• The header style and layout. selecciona la variante estructural, incluidas las disposiciones predeterminada, centrada, de menú dividido y de navegación en barra lateral.
• Full-width header controla si el contenido de la cabecera usa el ancho disponible.
• Sticky header on scroll mantiene la cabecera disponible mientras el visitante se desplaza hacia abajo por la página.
• Auto hide header on scroll la oculta al desplazarse hacia abajo.
• Navigation bar transparency ofrece Partially transparent, Totally transparent, Gradient (top to bottom) y Opaque.
• Header navigation bar alpha establece la opacidad usada por el tratamiento transparente correspondiente.
• Header navigation bar padding controla el relleno superior e inferior.
• Prepend reusable block coloca un bloque reutilizable seleccionado antes de la cabecera.

Esta subsección también incluye la presentación opcional de inicio de sesión, con su posición, la visualización del nombre de usuario y del Gravatar, y Login icon action.

Áreas opcionales de la cabecera

Cuando se activa una barra, guarda los ajustes del tema antes de comprobar Appearance → Menus → Manage Locations para sus ubicaciones de menú izquierda y derecha.

Contenido de navegación a pantalla completa

Activa Full screen navigation y elige cualquier combinación del siguiente contenido:

1. Asigna un menú a la ubicación Full screen en Appearance → Menus → Manage Locations.
2. Usa Append reusable block para añadir una sección reutilizable diseñada.
3. Deja Display copyright in full screen navigation activada para mostrar el texto de copyright del pie de página y los créditos debajo del menú, o desactívala para eliminar esa fila completa.

El panel de pantalla completa omite la fila del menú cuando no hay ningún menú asignado. También omite el contenedor circundante de menú y copyright cuando no hay ningún menú asignado y la opción de copyright está desactivada, lo que permite que el bloque reutilizable seleccionado sea el único contenido del panel.

Cuando la función está activa, Settings → POM Theme → Advanced → Custom CSS → Component CSS → Fullscreen navigation proporciona un control completo de la superposición generada, los niveles de menú, los controles, los enlaces sociales, la tipografía adaptable y el fondo configurado. Guardar ese componente reemplaza el fragmento completo en su posición normal dentro de website.min.css.

CSS de búsqueda

Activa Settings → POM Theme → Templates → Search → Search form para mostrar el formulario de búsqueda nativo en la navegación del sitio. Mientras esté activo, Settings → POM Theme → Advanced → Custom CSS → Component CSS → Search proporciona la superposición completa de búsqueda de navegación, el formulario en línea, los resultados, los estados de carga y adaptables, además del color de búsqueda en línea generado para cada preajuste de color de cabecera configurado. Guardar Search reemplaza ese fragmento completo en su posición normal dentro de website.min.css.

El siguiente editor Advanced search form controls pertenece al framework WP Advanced Search incluido, y no a la búsqueda nativa de navegación. Sigue estando disponible cuando Search form está desactivado porque los formularios avanzados pueden usar sus controles de botones de opción y casillas de verificación de forma independiente.

Ajustes visuales

Usa Header colors para la paleta compartida de la cabecera y Header typography para el texto de navegación. Mantén el tipo y los colores globales de marca en el Design system; usa estos valores específicos de la cabecera cuando la navegación necesite un tratamiento distinto.

Cada preajuste adicional de Header colors puede proporcionar sus propios logotipos de cabecera para escritorio y móvil. Usa los campos opcionales de anchura y altura junto a cada logotipo cuando ese preajuste necesite dimensiones intrínsecas distintas de las de los logotipos de marca principales. Deja una dimensión vacía para omitir ese atributo de imagen.

Con POM Translate, traduce las URL de imagen de Header logo y Header mobile logo de cada preajuste en Translations → Translate URLs → Custom links. Al abrir esa pantalla se detectan las URL guardadas y se identifica su Config name en Used in. Introduce la URL de reemplazo para el idioma de destino y guarda. El preajuste seleccionado permanece activo, incluidas sus dimensiones; una traducción vacía conserva la imagen original de ese preajuste. La selección de Logo version del módulo Logo usa el mismo mapeo de URL, incluso cuando se usa en el contenido de navegación a pantalla completa.

Áreas separadas

Lo siguiente es adyacente a la cabecera, pero no se configura en esta subsección:

• Mobile navigation tiene su propio diseño de panel, colores, títulos de menú, imagen de fondo y texto de copyright.
• Subheader controla el área del título de página debajo de la cabecera.
• Breadcrumbs controla la ruta de navegación y si aparece después de la cabecera o después del subencabezado.

Control avanzado de CSS de la cabecera

Usa Settings → POM Theme → Advanced → Custom CSS → Component CSS → Header cuando necesites reemplazar el CSS generado completo de la base de navegación compartida, la navegación principal, la Top bar y la Bottom bar. El editor también incluye sus familias de fuentes, colores, espaciados, estados y comportamiento adaptable configurados. Por lo tanto, las reglas de familia de fuentes de navegación aparecen en Header y no en el componente general Typography.

Guardar este componente reemplaza ese fragmento completo en su posición normal dentro de website.min.css. Los cambios posteriores en los ajustes relacionados de Header se siguen guardando, pero no afectan al fragmento personalizado hasta que revises el Theme CSS actual y actualices tu versión o uses Revert to theme CSS. Para una regla pequeña que simplemente deba sobrescribir el resultado generado, usa en su lugar el editor general Custom CSS.

La navegación lateral y móvil, la navegación Fullscreen, Search, así como Header title y subheader conservan sus propios editores de componentes completos porque ocupan posiciones separadas en la hoja de estilos generada.

Guías relacionadas

• Sigue Build a complete site header para conocer el orden de configuración.
• Usa Configure the desktop header para la estructura y la asignación de menús.
• Usa Sticky and transparent header behavior para los estados de desplazamiento.
• Usa Configure mobile navigation para el panel de pantalla estrecha.