{"id":9264,"date":"2026-04-23T13:51:11","date_gmt":"2026-04-23T13:51:11","guid":{"rendered":"https:\/\/www.airsang.com\/?p=9264"},"modified":"2026-04-23T13:52:17","modified_gmt":"2026-04-23T13:52:17","slug":"como-ocultar-facilmente-el-encabezado-en-elementor-wordpress","status":"publish","type":"post","link":"https:\/\/www.airsang.com\/es\/como-ocultar-facilmente-el-encabezado-en-elementor-wordpress\/","title":{"rendered":"C\u00f3mo ocultar f\u00e1cilmente el encabezado en Elementor WordPress"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-1024x683.png\" alt=\"C\u00f3mo ocultar f\u00e1cilmente el encabezado en Elementor WordPress\" class=\"wp-image-9265\" srcset=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-1024x683.png 1024w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-300x200.png 300w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-768x512.png 768w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-18x12.png 18w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-1000x667.png 1000w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-1x1.png 1w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184-10x7.png 10w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-184.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Al crear un sitio web moderno, la experiencia del usuario lo es todo. Los visitantes esperan dise\u00f1os limpios, tiempos de carga r\u00e1pidos y una navegaci\u00f3n intuitiva. Un truco de dise\u00f1o sencillo pero eficaz que puede mejorar dr\u00e1sticamente la usabilidad es ocultar el encabezado cuando los usuarios se desplazan hacia abajo y volver a mostrarlo cuando se desplazan hacia arriba.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si est\u00e1s usando Elementor en un <strong><a href=\"https:\/\/www.WordPres.com\" target=\"_blank\" rel=\"noopener\">WordPress<\/a><\/strong> En tu sitio web, ya cuentas con un sistema de dise\u00f1o flexible. Sin embargo, Elementor no ofrece por defecto una opci\u00f3n sencilla para activar o desactivar el comportamiento del encabezado basado en el desplazamiento. Por eso, muchos dise\u00f1adores buscan maneras de implementar esta funci\u00f3n manualmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En esta gu\u00eda, explicaremos c\u00f3mo ocultar el encabezado en Elementor WordPress, por qu\u00e9 es importante y las diferentes maneras de implementarlo, incluso si no eres desarrollador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 significa ocultar un encabezado al desplazarse?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-1024x683.png\" alt=\"C\u00f3mo ocultar f\u00e1cilmente el encabezado en Elementor WordPress: \u00bfQu\u00e9 significa ocultar un encabezado al desplazarse?\" class=\"wp-image-9266\" srcset=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-1024x683.png 1024w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-300x200.png 300w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-768x512.png 768w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-18x12.png 18w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-1000x667.png 1000w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-1x1.png 1w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185-10x7.png 10w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-185.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de adentrarnos en los pasos, es importante comprender el concepto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un encabezado &quot;oculto al desplazarse&quot; es una barra de navegaci\u00f3n que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Desaparece cuando el usuario se desplaza hacia abajo.<\/li>\n\n\n\n<li>Reaparece cuando el usuario se desplaza hacia arriba.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este comportamiento ayuda a reducir el desorden visual y proporciona m\u00e1s espacio para el contenido, especialmente en pantallas m\u00e1s peque\u00f1as.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 ocultar el encabezado en Elementor?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-1024x683.png\" alt=\"C\u00f3mo ocultar f\u00e1cilmente el encabezado en Elementor WordPress: \u00bfPor qu\u00e9 ocultar el encabezado en Elementor?\" class=\"wp-image-9267\" srcset=\"https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-1024x683.png 1024w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-300x200.png 300w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-768x512.png 768w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-18x12.png 18w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-1000x667.png 1000w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-1x1.png 1w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186-10x7.png 10w, https:\/\/www.airsang.com\/wp-content\/uploads\/2026\/04\/image-186.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mejorar el enfoque del usuario<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando los usuarios se desplazan por el contenido, el encabezado puede convertirse en una distracci\u00f3n. Ocultarlo permite que el contenido sea el protagonista.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Maximizar el espacio de la pantalla<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Esto resulta especialmente \u00fatil en dispositivos m\u00f3viles, donde el espacio de la pantalla es limitado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Tendencias modernas en dise\u00f1o UX<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Muchos sitios web de alto rendimiento adoptan este patr\u00f3n de interacci\u00f3n para crear una experiencia fluida, similar a la de una aplicaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Mayor interacci\u00f3n con el contenido.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Al eliminar los elementos innecesarios durante el desplazamiento, es m\u00e1s probable que los usuarios se mantengan interesados en tu contenido.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comprender la estructura del encabezado de Elementor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En Elementor, los encabezados se crean normalmente utilizando:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creador de temas Elementor Pro<\/li>\n\n\n\n<li>Una plantilla de encabezado asignada a todas las p\u00e1ginas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La secci\u00f3n de encabezado suele ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Establecer como fijo<\/li>\n\n\n\n<li>Situado en la parte superior<\/li>\n\n\n\n<li>Visible en todo momento por defecto<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Para ocultarlo din\u00e1micamente, necesitamos agregar un comportamiento personalizado usando CSS y JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo 1: Uso de CSS personalizado y JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este es el enfoque m\u00e1s com\u00fan y flexible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 1: Hacer que el encabezado sea fijo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En Elementor:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Edita la plantilla de encabezado<\/li>\n\n\n\n<li>Seleccione la secci\u00f3n principal<\/li>\n\n\n\n<li>Ve a Avanzado \u2192 Efectos de movimiento<\/li>\n\n\n\n<li>Establecer adhesivo: Superior<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Esto garantiza que el encabezado permanezca fijo antes de que agreguemos el comportamiento de desplazamiento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 2: A\u00f1adir una clase CSS personalizada<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Asigne una clase a la secci\u00f3n de encabezado, por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ocultar encabezado<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esta clase se utilizar\u00e1 para controlar la visibilidad.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 3: A\u00f1adir CSS para efectos de transici\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agrega el siguiente c\u00f3digo CSS a tu sitio (a trav\u00e9s del Personalizador o Elementor Custom CSS):<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.header-hide {<br>    transici\u00f3n: transformar 0,3 s de entrada y salida suave;<br>}.header-hide.hide {<br>    transformar: translateY(-100%);<br>}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esto es lo que hace:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A\u00f1ade animaci\u00f3n fluida<\/li>\n\n\n\n<li>Mueve el encabezado fuera de la vista cuando est\u00e1 oculto.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 4: A\u00f1adir JavaScript para la detecci\u00f3n de desplazamiento<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora necesitamos l\u00f3gica para detectar la direcci\u00f3n de desplazamiento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agregue este script a su sitio (mediante un script de pie de p\u00e1gina o un plugin):<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let lastScrollTop = 0;<br>const header = document.querySelector(&#039;.header-hide&#039;);window.addEventListener(&#039;scroll&#039;, function () {<br>    let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop &gt; lastScrollTop) {<br>        \/\/ desplaz\u00e1ndose hacia abajo<br>        encabezado.classList.add(&#039;ocultar&#039;);<br>    } dem\u00e1s {<br>        \/\/ desplaz\u00e1ndose hacia arriba<br>        encabezado.classList.remove(&#039;ocultar&#039;);<br>    } lastScrollTop = scrollTop;<br>});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo funciona<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El script rastrea la direcci\u00f3n de desplazamiento.<\/li>\n\n\n\n<li>Al desplazarse hacia abajo \u2192 agrega <code>.esconder<\/code><\/li>\n\n\n\n<li>Al desplazarse hacia arriba \u2192 elimina <code>.esconder<\/code><\/li>\n\n\n\n<li>CSS se encarga de la animaci\u00f3n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo 2: Uso de Elementor Pro con c\u00f3digo personalizado<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si utilizas Elementor Pro, puedes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Agregar JavaScript mediante la funci\u00f3n de c\u00f3digo personalizado<\/li>\n\n\n\n<li>Aplicar CSS directamente en la plantilla del encabezado<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este m\u00e9todo evita el uso de complementos externos y mantiene todo centralizado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo 3: Uso de complementos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si prefieres un enfoque sin c\u00f3digo, algunos complementos pueden ayudarte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los ejemplos incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Plugins de efectos de encabezado fijo<\/li>\n\n\n\n<li>Plugins de animaci\u00f3n de encabezado<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sin embargo, tenga en cuenta lo siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los complementos pueden a\u00f1adir peso extra<\/li>\n\n\n\n<li>El control personalizado es limitado en comparaci\u00f3n con la codificaci\u00f3n manual.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Buenas pr\u00e1cticas para ocultar encabezados<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mant\u00e9n la animaci\u00f3n fluida.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Evite los movimientos bruscos. Utilice transiciones entre 0,3 s y 0,5 s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Garantizar la accesibilidad<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aseg\u00farese de que los usuarios puedan seguir accediendo f\u00e1cilmente a la navegaci\u00f3n al desplazarse hacia arriba.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Prueba en dispositivos m\u00f3viles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El comportamiento en dispositivos m\u00f3viles debe ser natural y receptivo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Evitar conflictos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Si utilizas otros scripts de desplazamiento o de elementos fijos, comprueba si hay conflictos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Problemas comunes y soluciones<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">El encabezado no se oculta.<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compruebe si se ha aplicado la clase correcta.<\/li>\n\n\n\n<li>Aseg\u00farese de que JavaScript se cargue correctamente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">La animaci\u00f3n se siente lenta.<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Optimizar las transiciones CSS<\/li>\n\n\n\n<li>Evite ejecutar scripts pesados simult\u00e1neamente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Parpadeo del encabezado<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Agregue un peque\u00f1o umbral de desplazamiento para evitar el cambio constante.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ejemplo de mejora:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Si (Math.abs(scrollTop - lastScrollTop) &gt; 10) {<br>    \/\/ Activar solo cuando se produzca un desplazamiento significativo<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Mejoras avanzadas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que hayas implementado la versi\u00f3n b\u00e1sica, podr\u00e1s mejorarla a\u00fan m\u00e1s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. A\u00f1adir sombra al desplazarse<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">.header-hide.scrolled {<br>    box-shadow: 0 2px 10px rgba(0,0,0,0.1);<br>}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Cambiar el estilo del encabezado din\u00e1micamente<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes modificar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color de fondo<\/li>\n\n\n\n<li>Tama\u00f1o del logotipo<\/li>\n\n\n\n<li>espaciado del men\u00fa<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Seg\u00fan la posici\u00f3n de desplazamiento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cu\u00e1ndo no debes ocultar el encabezado<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si bien esta funci\u00f3n es \u00fatil, no siempre es apropiada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ev\u00edtalo cuando:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tu sitio web depende en gran medida de la navegaci\u00f3n.<\/li>\n\n\n\n<li>Los usuarios necesitan acceso constante a los men\u00fas.<\/li>\n\n\n\n<li>Tu p\u00fablico prefiere los dise\u00f1os tradicionales.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Casos de uso en el mundo real<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esta t\u00e9cnica se utiliza com\u00fanmente en:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>P\u00e1ginas de destino de SaaS<\/li>\n\n\n\n<li>Sitios web de portafolio<\/li>\n\n\n\n<li>Tiendas de comercio electr\u00f3nico<\/li>\n\n\n\n<li>Blogs con contenido extenso<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ayuda a crear una experiencia de navegaci\u00f3n m\u00e1s inmersiva.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Consideraciones de rendimiento<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mant\u00e9n JavaScript ligero<\/li>\n\n\n\n<li>Evite consultas DOM innecesarias.<\/li>\n\n\n\n<li>Prueba el rendimiento con herramientas<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un c\u00f3digo eficiente garantiza un desplazamiento fluido y una mejor experiencia de usuario.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender a ocultar el encabezado en Elementor <strong><a href=\"https:\/\/www.WordPres.com\" target=\"_blank\" rel=\"noopener\">WordPress<\/a><\/strong> Es una forma sencilla pero eficaz de mejorar la usabilidad y el dise\u00f1o de tu sitio web. Al combinar la funci\u00f3n de encabezado fijo de Elementor con CSS y JavaScript personalizados, puedes crear una experiencia de desplazamiento fluida y moderna que mantiene a los usuarios concentrados en tu contenido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ya sea que optes por la codificaci\u00f3n manual o una soluci\u00f3n basada en plugins, la clave es garantizar un funcionamiento fluido, una buena capacidad de respuesta y una usabilidad \u00f3ptima en todos los dispositivos. Con la implementaci\u00f3n adecuada, esta peque\u00f1a interacci\u00f3n puede marcar una gran diferencia en la experiencia de usuario y el rendimiento de tu sitio web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfC\u00f3mo puedo ocultar el encabezado al desplazarme en Elementor WordPress?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-1\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Puedes ocultar el encabezado al desplazarte haci\u00e9ndolo fijo en Elementor y luego agregando CSS y JavaScript personalizados para detectar la direcci\u00f3n de desplazamiento y alternar su visibilidad.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfPuedo ocultar el encabezado en Elementor sin necesidad de programar?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-2\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">S\u00ed, puedes usar complementos de terceros que ofrecen efectos de encabezado fijo y animaciones basadas en el desplazamiento, pero es posible que tengan opciones de personalizaci\u00f3n limitadas en comparaci\u00f3n con el c\u00f3digo personalizado.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfPor qu\u00e9 no se oculta el encabezado de Elementor al desplazarse?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-3\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Esto suele ocurrir si el encabezado no est\u00e1 configurado como fijo, falta la clase CSS o el c\u00f3digo JavaScript no se carga correctamente en la p\u00e1gina.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-4&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-4-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-4\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfOcultar el encabezado mejora la experiencia del usuario?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-4\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-4-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">S\u00ed, puede mejorar la experiencia del usuario al reducir las distracciones, aumentar el espacio en pantalla y crear una experiencia de navegaci\u00f3n m\u00e1s limpia y moderna.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-5&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-5-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-5\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfOcultar el encabezado afectar\u00e1 la usabilidad en dispositivos m\u00f3viles?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-5\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-5-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Si se implementa correctamente, puede mejorar la usabilidad en dispositivos m\u00f3viles al liberar espacio, pero conviene realizar pruebas exhaustivas para garantizar que la navegaci\u00f3n siga siendo de f\u00e1cil acceso.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-6&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-6-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-6\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00bfCu\u00e1l es la diferencia entre un encabezado fijo y un encabezado que se oculta al desplazarse?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-6\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-6-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Un encabezado fijo permanece visible en la parte superior en todo momento, mientras que un encabezado que se oculta al desplazarse desaparece al desplazarse hacia abajo y reaparece al desplazarse hacia arriba.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Introduction When building a modern website, user experience is everything. Visitors expect clean layouts, fast loading times, and intuitive navigation. One small but powerful design trick that can dramatically improve usability is hiding the header when users scroll down\u2014and revealing it again when they scroll up. If you\u2019re using Elementor on a WordPress website, you [&hellip;]<\/p>","protected":false},"author":2,"featured_media":9268,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,20,1],"tags":[],"class_list":["post-9264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-studies","category-industry-insights","category-web-knowledge"],"_links":{"self":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts\/9264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/comments?post=9264"}],"version-history":[{"count":0,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts\/9264\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/media\/9268"}],"wp:attachment":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/media?parent=9264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/categories?post=9264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/tags?post=9264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}