Cabecera fija que oculta contenido en enlaces ancla
～ sin CSS ～
Happytoru es apoyado por los lectores. Cuando hace clic y compra a través de mis enlaces, puedo recibir una pequeña comisión sin costo adicional para ti. ¡Muchas gracias por su apoyo!
¡¿Tienes problemas con tu cabecera fija cubriendo contenido al usar enlaces de ancla?!
¡En esta publicación, encontrarás una solución simple y útil para solucionar el problema!
¡Una solución imprescindible para los usuarios de Elementor!
Índice de Contenidos
YouTube
Haz clic aquí para ver el video ↓
目次
3. オーバーフロー（Overflow）を開く
a
基本情報
使う前にアクティベイトする必要あり
2.1. eSIMのメリット
＊本ページにはプロモーションが含まれています。
¿Qué «Cabecera fija oculta contenido» significa?
a
Con Problema: Título está oculto debajo de cabecera
Cuando se navega a un enlace, como los enlaces ancla, algunos contenidos pueden quedar ocultos por el cabecera fija, como la foto de arriba — el área resaltada en naranja en la parte superior de la pantalla.
En esta foto, al hacer clic en el «6. Selecciona el siguiente contenedor» en Índice de Contenidos a la derecha, el título queda oculto debajo de la cabecera fija, y solo es visible el título de la sección 7.
Lo ideal sería que el título «6. Selecciona el siguiente contenedor» fuera visible, como se muestra en la siguiente foto. ↓
Problema Resuelto: Título no está oculto debajo de cabecera
Después de resolver este problema, el título «6. Selecciona el siguiente contenedor» se mostrará justo debajo de la cabecera fija, como se muestra en la foto de arriba — el área resaltada en naranja en la parte superior de la pantalla.
Se visualizará sin quedar oculto con la cabecera fija, incluso si haces clic en «6. Selecciona el siguiente contenedor».
¿Cómo resolver el problema?
Aquí tienes cómo resolver el problema, paso a paso.
Es fácil de solucionar con Elementor, ¡así que vamos a intentarlo!
1. Abre «Motion Effects» (Efectos de Movimiento)
Primero, abre la página de edición de Elementor.
Selecciona un contenedor en la parte superior de la página — que sea visible sin desplazar hacia abajo.
(Por ejemplo, el contenedor señalado en rojo)
Puedes seleccionar cualquier contenedor que aparezca en la primera página.
Luego, ve a la pestaña Avanzado y abre la configuración de «Motion Effects» (Efectos de Movimiento).
2. Pon «Sticky» a «Bottom» (abajo)
Abre la configuración de «Sticky», luego cambia «None» (nada) a «Bottom» (abajo).
3. Pon «Anchor Offset» (desplazamiento de ancla)
Una vez que configures el Sticky a Bottom (abajo), ajusta el «Anchor Offset» (desplazamiento de ancla) a la altura de tu cabecera fija.
Asegúrate de que esta configuración se aplique a las pantallas de Escritorio, Tableta y Móvil.
(Como se muestra en el lado izquierdo de la foto, con el subrayado rosa.)
*Si no estás seguro de la altura, puedes establecer un valor aproximado y ajustarlo mientras previsualizas la página para obtener la altura precisa.
4. Verifica en todos los dispositivos
Una vez que hayas configurado el «Anchor Offset», verifica que se muestre correctamente en las pantallas de «Escritorio», «Tableta» y «Móvil».
Vista de Escritorio (Desktop)
¡En la pantalla de escritorio, se muestra perfectamente sin quedar oculto por la cabecera fija!
Vista móvil
En la vista móvil, sin embargo, el título sigue estando ligeramente oculto debajo de la cabecera fija…
Por lo tanto, necesitas hacer un pequeño ajuste adicional al «Anchor Offset» (desplazamiento de ancla).
5. Ajusta «Anchor Offset» (desplazamiento de ancla)
El offset estaba un poco corto en la pantalla móvil, así que añadiré solo «5» y lo ajustaré a «75».
Ajusta la altura para que coincida con la de tu cabecera.
Algunas personas podrían pensar que puedes cambiar la altura directamente desde la vista móvil en Elementor.
Sin embargo, aunque lo ajusté en la vista móvil, nada cambió… No estoy seguro de por qué no funciona (a partir de abril de 2025).
(Si alguien sabe la razón, no dude en compartirla en la sección de comentarios abajo — ¡lo agradecería mucho!)
Así que, recomiendo cambiar la altura del Anchor Offset (desplazamiento de ancla) desde la página de edición en escritorio en su lugar.
6. Revisión final
Una vez que hayas ajustado el «Offset», asegúrate de volver a verificar que se muestre correctamente en las pantallas de «Escritorio», «Tableta» y «Móvil».
Vista de Escritorio (Desktop)
En la pantalla de escritorio, el contenido vinculado se muestra justo debajo de la cabecera, ¡lo cual es perfecto!
Vista móvil
El título ahora se muestra perfectamente después de ajustar el offset a «75», aunque antes la parte superior del título estaba oculta bajo la cabecera fija.
El problema está resuelto, ¡una vez que se muestra correctamente y no queda oculto por la cabecera en las pantallas de Escritorio, Tableta y Móvil!
Si no estás utilizando Elementor, haz clic aquí para comprar un plan y probarlo.
¡Puedes crear tu sitio web fácilmente sin necesidad de conocimientos de HTML o CSS!
Para quienes no usan CSS, el plan Essential, que es el más barato, es la mejor opción — ¡yo también lo uso!
A continuación se presenta un resumen de los procedimientos para esta solución.
こんな方には Totumas Lodge がオススメ！
ホテルの周りが静かなところがいい
宿泊している人や現地のオーナーの方と話したい
おすすめの観光地をホテルで聞きたい（オーナーが詳しく教えてくれます）
市内から少し離れたところがいい
調味料がそろっているホテルがいい（自分で買いたくない）
絶景の朝日とパナマ市を一望したい
Revisión de los pasos
¡Espero que puedas solucionar el problema de «Cabecera fija oculta contenido en enlaces ancla» utilizando la solución de esté artículo, y hacer tu sitio web más atractivo!
¡Por favor, déjame saber en los comentarios si te funcionó! ¡Gracias!
¡Que te vaya bien construyendo tu sitio web!
Temas relacionados
Creé mi sitio web y comencé canales de YouTube en mi último año de universidad.
Para lograr mi meta de vida de «hacer feliz a muchas personas», decidí aprender a crear un sitio web desde cero a través de YouTube y de Internet, y lancé mi propio sitio, “happpytoru”.
Dirijo blogs sobre diversos temas, como viajes, aprendizaje de idiomas, consejos para vivir una vida plena y más.
También tengo varios canales de YouTube donde comparto videos sobre viajes y consejos prácticos para la vida.
¡Deja tu mensaje, por favor!