{"id":50834,"date":"2022-04-22T08:27:24","date_gmt":"2022-04-22T06:27:24","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=50834&preview=true&preview_id=50834"},"modified":"2025-01-20T13:30:04","modified_gmt":"2025-01-20T12:30:04","slug":"elementor-cabeceras-fijas","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/","title":{"rendered":"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor"},"content":{"rendered":"

Tanto si eres un aspirante a desarrollador web<\/a> como un empresario de comercio electr\u00f3nico, es probable que tus sitios web compartan algunos elementos esenciales. Por ejemplo, todo sitio necesita una cabecera clara para ayudar a los visitantes a navegar entre las diferentes p\u00e1ginas. Sin embargo, si utilizas un constructor de p\u00e1ginas<\/a> como Elementor para reducir la codificaci\u00f3n, puede que te preguntes si todav\u00eda es posible hacer una cabecera fija de Elementor sofisticada pero f\u00e1cil de usar.<\/p>\n

Afortunadamente, el uso de una cabecera de Elementor<\/a> puede proporcionar a tus usuarios una forma simplificada de explorar tu sitio web. Con este popular constructor de p\u00e1ginas<\/a>, puedes construir una gran variedad de cabeceras que no desaparecen cuando los usuarios se desplazan por el sitio. Esta caracter\u00edstica es la que los hace \u00bb sticky \u00ab.<\/p>\n

En este post, hablaremos de c\u00f3mo funciona una cabecera fija y de las ventajas de utilizarla. A continuaci\u00f3n, te mostraremos c\u00f3mo hacer una cabecera fija de Elementor con las versiones gratuita y profesional de la herramienta. Por \u00faltimo, te proporcionaremos opciones de personalizaci\u00f3n adicionales para tus cabeceras fijas utilizando CSS. \u00a1Empecemos!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Introducci\u00f3n a las cabeceras fijas de Elementor<\/h2>\n

No hay dos sitios web iguales. Sin embargo, hay algunas caracter\u00edsticas que los sitios web de calidad tienen en com\u00fan.<\/p>\n

Si tienes un sitio de varias p\u00e1ginas, uno de estos elementos es la cabecera. Se trata de la barra horizontal situada en la parte superior de cualquier p\u00e1gina que contiene informaci\u00f3n \u00fatil.<\/p>\n

Normalmente una cabecera incluye tu men\u00fa de navegaci\u00f3n con p\u00e1ginas como Acerca de<\/strong> o Contacto<\/strong>:<\/p>\n

\"The
Zona de cabecera del sitio web de Kinsta<\/figcaption><\/figure>\n

Cuando los visitantes exploren tu p\u00e1gina, es probable que esperen una cabecera organizada que les ayude a guiarse por tu sitio. Dado que la experiencia del usuario (UX) es clave para el \u00e9xito de un sitio web, ser\u00eda conveniente crear un encabezado que sea intuitivo y sencillo. Ah\u00ed es donde una cabecera fija, dise\u00f1ada con Elementor, puede marcar una gran diferencia.<\/p>\n\n

C\u00f3mo funciona una cabecera fija<\/h3>\n

Antes de aprender c\u00f3mo funciona una cabecera fija de Elementor, vamos a ver c\u00f3mo se comporta una cabecera est\u00e1ndar cuando te desplazas por una p\u00e1gina:<\/p>\n

\"Example
Ejemplo de cabecera est\u00e1ndar<\/figcaption><\/figure>\n

Como puedes ver en el ejemplo anterior, esta cabecera contiene una compleja barra de navegaci\u00f3n con categor\u00edas como Rebajas<\/strong>, Ropa<\/strong>, Zapatos<\/strong> y otras. Estas pesta\u00f1as ayudar\u00e1n sin duda a los compradores a encontrar lo que buscan. Sin embargo, cuando se desplaza hacia abajo en la p\u00e1gina, la cabecera desaparece.<\/p>\n

Los usuarios pueden encontrar esto frustrante, ya que les obliga a volver a desplazarse hasta la parte superior de la p\u00e1gina para acceder al men\u00fa de navegaci\u00f3n. Afortunadamente, una cabecera fija ofrece una soluci\u00f3n sencilla.<\/p>\n

Al permanecer o \u00abpegarse\u00bb en su sitio en la parte superior de tu p\u00e1gina, una cabecera fija puede mejorar dr\u00e1sticamente la UX de tu sitio web:<\/p>\n

\"Example
Ejemplo de cabecera fija<\/figcaption><\/figure>\n

Cuando el dise\u00f1o de tu sitio incluye una cabecera fija, tus usuarios pueden saltar r\u00e1pidamente a nuevas p\u00e1ginas sin perder tiempo desplaz\u00e1ndose.<\/p>\n

Adem\u00e1s, con este elemento fijo, puedes incluir tu logotipo delante y en el centro en todo momento. Esta caracter\u00edstica puede ayudar a los usuarios a recordar tu marca m\u00e1s f\u00e1cilmente y animarles a permanecer en tu sitio m\u00e1s tiempo.<\/p>\n

Cu\u00e1ndo deber\u00edas considerar el uso de una cabecera fija<\/h3>\n

Es menos probable que los visitantes se pierdan al explorar sitios m\u00e1s grandes con una cabecera fija. Por ello, es posible que quieras aprovechar esta funci\u00f3n si tu sitio web tiene muchas p\u00e1ginas. Por eso, a menudo ver\u00e1s cabeceras fijas en sitios de comercio electr\u00f3nico<\/a>.<\/p>\n

Una cabecera fija puede ser especialmente \u00fatil si quieres incluir una funci\u00f3n de b\u00fasqueda en tu cabecera. De este modo, cuando los usuarios se desplacen y se den cuenta de que no encuentran lo que buscan, podr\u00e1n introducir r\u00e1pidamente una consulta en la barra de b\u00fasqueda.<\/p>\n

Adem\u00e1s, una cabecera fija puede ser un cambio de juego si tienes un blog monetizado<\/a> que muestra todas tus publicaciones en la p\u00e1gina de inicio. En general, esta cabecera puede garantizar el mantenimiento y la escalabilidad<\/a> de tu sitio web.<\/p>\n

Sin embargo, si tu sitio s\u00f3lo tiene una p\u00e1gina, no tiene mucho sentido transformar tu cabecera de esta manera. Adem\u00e1s, si tienes una buena cantidad de p\u00e1ginas en tu sitio web, pero cada una de ellas es relativamente corta, probablemente tampoco necesites una cabecera fija.<\/p>\n

En general, una cabecera fija reduce el tiempo de desplazamiento y aumenta la usabilidad y la navegaci\u00f3n del sitio. Si no est\u00e1s seguro de si esta funci\u00f3n beneficiar\u00eda a tu sitio web, puedes hacer una r\u00e1pida auditor\u00eda de la longitud de tus p\u00e1ginas y luego decidir.<\/p>\n

C\u00f3mo crear una cabecera fija de Elementor<\/h2>\n

En este tutorial, te guiaremos por los pasos para crear una cabecera fija de Elementor. Asumiremos que ya tienes el plugin de Elementor<\/a> instalado y activado en tu sitio.<\/p>\n

Cubriremos c\u00f3mo puedes hacer esta cabecera tanto con la versi\u00f3n gratuita como con Elementor Pro<\/a>. Seguramente te alegrar\u00e1 saber que no tendr\u00e1s que aprender HTML<\/a> ni editar mucho c\u00f3digo<\/a> para hacerlo<\/p>\n

C\u00f3mo crear una cabecera fija con Elementor (gratis)<\/h3>\n

La versi\u00f3n gratuita de Elementor ofrece algunas funciones potentes para la creaci\u00f3n de p\u00e1ginas. Sin embargo, si quieres hacer cambios en tus encabezados y pies de p\u00e1gina, necesitar\u00e1s algunas herramientas adicionales (tambi\u00e9n gratuitas).<\/p>\n

Teniendo esto en cuenta, \u00a1vamos a ver c\u00f3mo puedes crear una cabecera fija con Elementor!<\/p>\n

Paso 1: Instalar y activar tus plugins esenciales<\/h4>\n

Afortunadamente, unas cuantas herramientas fiables pueden ampliar f\u00e1cilmente la funcionalidad de la versi\u00f3n gratuita de Elementor.<\/p>\n

Ve a tu panel de control de WordPress para encontrar tu primera herramienta. Ve a Plugins > A\u00f1adir nuevo<\/strong> y busca los complementos de ElementsKit Elementor<\/a> utilizando la funci\u00f3n de b\u00fasqueda:<\/p>\n

\"Install
Instala y activa ElementsKit<\/figcaption><\/figure>\n

Instala y activa<\/a> este plugin como lo har\u00edas habitualmente. Cuando termines este proceso, ser\u00e1s llevado a tu p\u00e1gina principal de plugins:<\/p>\n

\"You
Plugin instalado<\/figcaption><\/figure>\n

Ahora, vuelve a hacer clic en A\u00f1adir nuevo<\/strong> para localizar el plugin Sticky Header Effects for Elementor<\/a> con la barra de b\u00fasqueda:<\/p>\n

\"Find
Efectos de cabecera fija para Elementor<\/figcaption><\/figure>\n

Repite el proceso de instalaci\u00f3n y activaci\u00f3n de esta herramienta, \u00a1y ya est\u00e1s listo para el siguiente paso!<\/p>\n

Paso 2: Crea tu men\u00fa<\/h4>\n

Antes de hacer cualquier tipo de cabecera, necesitar\u00e1s un men\u00fa de navegaci\u00f3n. Vamos a hacer un men\u00fa sencillo con los elementos m\u00e1s comunes. Incluir\u00e1 un logotipo, p\u00e1ginas y una llamada a la acci\u00f3n (CTA).<\/p>\n

Para crear tu propio men\u00fa dentro de tu panel de control de WordPress, ve a Apariencia > Men\u00fas<\/strong>. Junto al campo Nombre del men\u00fa<\/strong>, dale al tuyo un nombre descriptivo. Vamos a llamar al nuestro \u00abMen\u00fa de cabecera fijo\u00bb:<\/p>\n

\"Name
Dale un nombre a tu men\u00fa de cabecera fija<\/figcaption><\/figure>\n

Aseg\u00farate de elegir Encabezado<\/strong> como lugar de visualizaci\u00f3n<\/strong>. Tambi\u00e9n puedes seleccionar la casilla para a\u00f1adir nuevas p\u00e1ginas a tu men\u00fa autom\u00e1ticamente.<\/p>\n

A continuaci\u00f3n, tendr\u00e1s que a\u00f1adir algunas p\u00e1ginas a tu men\u00fa. En la secci\u00f3n P\u00e1ginas<\/strong> de la izquierda, marca las casillas de las p\u00e1ginas que quieras incluir, y luego haz clic en A\u00f1adir al men\u00fa<\/strong>:<\/p>\n

\"Add
A\u00f1ade p\u00e1ginas a tu men\u00fa de cabecera fija<\/figcaption><\/figure>\n

Entonces ver\u00e1s tus p\u00e1ginas transferidas a tu men\u00fa a la derecha. Sigue adelante y haz clic en Guardar men\u00fa<\/strong> en la parte inferior derecha de tu pantalla:<\/p>\n

\"Click
Guarda tu men\u00fa de cabecera fija<\/figcaption><\/figure>\n

Como puedes ver, hemos a\u00f1adido algunas p\u00e1ginas b\u00e1sicas, como Contacto <\/strong>Acerca de<\/strong><\/a>y P\u00e1gina de muestra<\/strong>. Puede que quieras reordenar tus p\u00e1ginas para que la secuencia sea intuitiva para los visitantes.<\/p>\n

Paso 3: Crea tu cabecera<\/h4>\n

Ahora tu men\u00fa de navegaci\u00f3n existe, pero no puedes acceder a \u00e9l en ning\u00fan sitio. Eso es porque necesitas crear una cabecera para \u00e9l.<\/p>\n

Para ello, ve a la pesta\u00f1a ElementsKit <\/strong>de tu men\u00fa izquierdo. Si a\u00fan no lo has hecho, tendr\u00e1s que hacer clic en algunas p\u00e1ginas de \u00abinicio\u00bb en este punto.<\/p>\n

Es probable que cada persona tenga preferencias diferentes, as\u00ed que t\u00f3mate tu tiempo para seleccionar las funciones que quieres activar. Sin embargo, aseg\u00farate de que el m\u00f3dulo de pie de p\u00e1gina de la cabecera<\/strong> est\u00e1 activado<\/strong>:<\/p>\n

\"Turn
Activa la opci\u00f3n de pie de p\u00e1gina de cabecera en el Kit de Elementos<\/figcaption><\/figure>\n

Ahora, ve a ElementsKit ><\/strong> Pie de p\u00e1gina de cabecera<\/strong>:<\/p>\n

\"Add
A\u00f1ade una nueva plantilla<\/figcaption><\/figure>\n

Esta p\u00e1gina estar\u00e1 vac\u00eda ya que a\u00fan no tienes ninguna plantilla de encabezado o pie de p\u00e1gina. Haz clic en A\u00f1adir<\/strong> nuevo<\/strong> en la parte superior de la pantalla para crear tu primera plantilla de cabecera:<\/p>\n

\"Fill
Rellena los ajustes de la plantilla<\/figcaption><\/figure>\n

En la pantalla de arriba, introduce un nombre descriptivo y aseg\u00farate de que se selecciona Cabecera<\/strong> como Tipo<\/strong>. Como est\u00e1s utilizando la versi\u00f3n gratuita, este encabezado aparecer\u00e1 en todo el sitio<\/strong>.<\/p>\n

Aseg\u00farate de poner el interruptor de Activar\/Desactivar<\/strong> en ON<\/strong> y haz clic en GUARDAR CAMBIOS<\/strong>. Ahora volver\u00e1s a tu p\u00e1gina de plantillas, donde podr\u00e1s ver tu nueva plantilla de cabecera en la lista:<\/p>\n

\"Now
Ya est\u00e1 disponible la nueva plantilla de cabecera<\/figcaption><\/figure>\n

Tambi\u00e9n puedes ver un icono verde de Activo<\/strong> junto a este encabezado. Sin embargo, a\u00fan no est\u00e1 activo.<\/p>\n

Para completar tu cabecera, pasa el rat\u00f3n por encima de ella en la lista de plantillas y haz clic en Editar en Elementor<\/strong>, justo debajo de su nombre. Esto te llevar\u00e1 a la pantalla de Elementor Builder.<\/p>\n

Aqu\u00ed, haz clic en el icono de ElementsKit<\/strong>:<\/p>\n

\"Click
Haz clic en el icono de ElementsKit<\/figcaption><\/figure>\n

En la siguiente pantalla, selecciona la pesta\u00f1a Secciones<\/strong>:<\/p>\n

\"Select
Selecciona la pesta\u00f1a \u00abSecciones\u00bb<\/figcaption><\/figure>\n

Despl\u00e1zate un poco hacia abajo hasta encontrar una secci\u00f3n de cabecera que te guste, y haz clic en Insertar<\/strong>. Nosotros elegimos Encabezado – Secci\u00f3n 5<\/strong>:<\/p>\n

\"Insert
Inserta el encabezado donde quieras<\/figcaption><\/figure>\n

Como probablemente puedas ver, nuestro men\u00fa de navegaci\u00f3n no es visible. As\u00ed que vamos a a\u00f1adirlo a nuestra plantilla de cabecera. Para ello, pasa el rat\u00f3n por encima de la secci\u00f3n del men\u00fa de navegaci\u00f3n de tu cabecera. En este caso, est\u00e1 justo en el centro:<\/p>\n

\"Hover
Pasa el rat\u00f3n por encima de la secci\u00f3n del men\u00fa de navegaci\u00f3n de la cabecera<\/figcaption><\/figure>\n

Haz clic en esta zona, y tu configuraci\u00f3n de men\u00fa<\/strong> deber\u00eda aparecer en el panel de la izquierda. Ahora, localiza el campo Seleccionar men\u00fa<\/strong>. En el desplegable, elige el men\u00fa que has creado antes:<\/p>\n

\"Choose
Elige el men\u00fa que creaste anteriormente<\/figcaption><\/figure>\n

En este punto, deber\u00edas ver c\u00f3mo se rellena el men\u00fa en tu plantilla de cabecera. Haz clic en ACTUALIZAR<\/strong> en la esquina inferior izquierda de la pantalla, y tu cabecera est\u00e1ndar estar\u00e1 terminada.<\/p>\n

Veamos c\u00f3mo funciona en acci\u00f3n:<\/p>\n

\"New
Nueva cabecera<\/figcaption><\/figure>\n

Como puedes ver, nuestra cabecera se ve muy bien. Sin embargo, desaparece cuando nos desplazamos hacia abajo. Veamos c\u00f3mo podemos hacer que se mantenga.<\/p>\n

Paso 4: Haz que tu cabecera sea fija<\/h4>\n

Para nuestro \u00faltimo paso, ve a ElementsKit > Pie de cabecera > Editar con Elementor<\/strong>. A continuaci\u00f3n, selecciona tu encabezado y haz clic en el icono central con seis puntos:<\/p>\n

\"Click
Haz clic en el icono de los puntos<\/figcaption><\/figure>\n

Cuando pases por encima de \u00e9l, ver\u00e1s que te permite editar la secci\u00f3n<\/strong>. Una vez que hagas clic en \u00e9l, aparecer\u00e1n las opciones de edici\u00f3n en el panel de la izquierda.<\/p>\n

Haz clic en la pesta\u00f1a Avanzado<\/strong> y despl\u00e1zate hacia abajo hasta Efectos de cabecera fija <\/strong>. Habr\u00e1 un mensaje de advertencia que dice que el plugin no controla la cabecera fija, pero puedes ignorarlo. Como tambi\u00e9n hemos a\u00f1adido el plugin Sticky Header Effects for Elementor, funcionar\u00e1 perfectamente.<\/p>\n

Ahora activa la cabecera fija de Elementor cambiando el interruptor a ON<\/strong>:<\/p>\n

\"Enable
Activa el encabezado fijo de Elementor<\/figcaption><\/figure>\n

Dependiendo de tu tema, tu cabecera fija puede parecer transparente. Si ese es el caso, es posible que quieras hacer un cambio de estilo.<\/p>\n

En tu panel Editar secci\u00f3n<\/strong>, en Estilo<\/strong>, ve a Fondo > Color<\/strong> y aseg\u00farate de que has seleccionado un tono que destaque sobre tu fondo normal:<\/p>\n

\"Make
Haz un cambio de estilo si es necesario<\/figcaption><\/figure>\n

A continuaci\u00f3n, haz clic en ACTUALIZAR<\/strong>. Ahora puedes previsualizar tu sitio para comprobar el resultado final:<\/p>\n

\"Your
Cabecera fija en acci\u00f3n<\/figcaption><\/figure>\n

\u00a1Eso es todo! Este es un simple encabezado fijo de Elementor, pero puede llevar f\u00e1cilmente tu sitio al siguiente nivel.<\/p>\n

C\u00f3mo crear una cabecera fija con Elementor Pro<\/h3>\n

Si utilizas Elementor Pro, crear una cabecera fija es un poco m\u00e1s sencillo. Puedes a\u00f1adir esta funci\u00f3n a tu sitio en s\u00f3lo tres sencillos pasos.<\/p>\n

Paso 1: Crea tu men\u00fa<\/h4>\n

Para crear tu men\u00fa, ve a Apariencia > Men\u00fas<\/strong> en tu panel de control de WordPress:<\/p>\n

\"Create
Crear un men\u00fa<\/figcaption><\/figure>\n

Dale a tu men\u00fa un nombre descriptivo, selecciona Men\u00fa principal<\/strong> junto a Ubicaci\u00f3n de la pantalla<\/strong> y haz clic en Crear men\u00fa<\/strong>:<\/p>\n

\"Give
Ponle un nombre a tu men\u00fa y selecciona una ubicaci\u00f3n<\/figcaption><\/figure>\n

En este punto, deber\u00edas tener unas cuantas p\u00e1ginas existentes en tu sitio web. Selecciona las p\u00e1ginas que quieres incluir en tu men\u00fa en el panel de la izquierda.<\/p>\n

A continuaci\u00f3n, haz clic en A\u00f1adir al men\u00fa<\/strong>, seguido de Guardar men\u00fa<\/strong>:<\/p>\n

\"Select
Selecciona las p\u00e1ginas a incluir en el men\u00fa<\/figcaption><\/figure>\n

Ahora tus p\u00e1ginas deber\u00edan estar pobladas en el lado derecho bajo la Estructura<\/strong> del Men\u00fa.<\/p>\n

Paso 2: Crea tu cabecera<\/h4>\n

A continuaci\u00f3n, tendremos que crear nuestra base. Vamos a crear una cabecera cl\u00e1sica.<\/p>\n

Para empezar, localiza la pesta\u00f1a de Elementor<\/strong> en tu barra lateral izquierda. Justo debajo, ve a Plantillas > Constructor de temas<\/strong>. La siguiente p\u00e1gina tendr\u00e1 este aspecto:<\/p>\n

\"Find
Busca \u00abPlantillas\u00bb dentro de \u00abConstructor de temas\u00bb<\/figcaption><\/figure>\n

Como probablemente veas, con Elementor Pro puedes empezar a dise\u00f1ar f\u00e1cilmente todos los elementos de tu sitio.<\/p>\n

Haz clic en el icono del signo m\u00e1s (+<\/strong>) en el elemento Cabecera<\/strong>. Ahora deber\u00edas ver una ventana emergente que muestra varios bloques de cabecera entre los que puedes elegir:<\/p>\n

\"Choose
Elige entre varios bloques de cabecera<\/figcaption><\/figure>\n

Si tienes una plantilla de cabecera preexistente, puedes seleccionarla en la pesta\u00f1a Mis plantillas<\/strong>. Si no, puedes utilizar uno de los bloques de secci\u00f3n que vienen incluidos en Elementor Pro.<\/p>\n

Cuando hayas hecho tu selecci\u00f3n, simplemente pasa el rat\u00f3n por encima del bloque deseado y haz clic en Insertar<\/strong>:<\/p>\n

\"Go
Inserta el bloque deseado<\/figcaption><\/figure>\n

Aqu\u00ed ver\u00e1s que este bloque viene con su propio logotipo, pero nuestro men\u00fa de navegaci\u00f3n se ha rellenado autom\u00e1ticamente. Ahora, haz clic en PUBLICAR<\/strong>:<\/p>\n

\"In
Haz clic en \u00abA\u00f1adir condici\u00f3n\u00bb dentro de la configuraci\u00f3n de publicaci\u00f3n<\/figcaption><\/figure>\n

La siguiente pantalla te pedir\u00e1 que determines tus AJUSTES<\/strong> DE PUBLICACI\u00d3N. Aqu\u00ed, selecciona A\u00d1ADIR COND<\/strong> ICI\u00d3N para decidir d\u00f3nde quieres mostrar tu cabecera:<\/p>\n

\"Select
Selecciona d\u00f3nde quieres mostrar la plantilla<\/figcaption><\/figure>\n

Probablemente querr\u00e1s seleccionar Todo el sitio<\/strong> junto a INCLUIR<\/strong>. Tambi\u00e9n puedes excluir ciertas \u00e1reas del sitio haciendo clic en la flecha junto a INCLUIR<\/strong> y cambiando a la alternativa. Cuando est\u00e9s satisfecho con tus selecciones, haz clic en GUARDAR Y CERRAR<\/strong>.<\/p>\n

En este momento, aparecer\u00e1 un mensaje emergente en la esquina inferior derecha de tu pantalla. Si no desaparece antes de que puedas hacer clic en \u00e9l, selecciona la opci\u00f3n para ver tu sitio en vivo.<\/p>\n

Alternativamente, vuelve a tu panel de control de WordPress<\/a> y obt\u00e9n una vista previa de tu sitio haciendo clic en el icono de la casa en la esquina superior izquierda y luego seleccionando Visitar el sitio<\/strong>:<\/p>\n

\"Header
La cabecera ya est\u00e1 disponible<\/figcaption><\/figure>\n

Como puedes ver, nuestra cabecera ya funciona, pero cuando nos desplazamos hacia abajo en la p\u00e1gina, desaparece. \u00a1Veamos qu\u00e9 podemos hacer al respecto!<\/p>\n

Paso 3: Haz que tu cabecera sea fija<\/h4>\n

\u00a1Ahora vamos a ver c\u00f3mo crear una cabecera fija de Elementor con la herramienta pro!<\/p>\n

Ve a Plantillas > Constructor de temas<\/strong> y selecciona la cabecera que acabas de crear. Luego, haz clic en Editar<\/strong> junto al icono del l\u00e1piz en la siguiente pantalla. Esto te devolver\u00e1 al editor de Elementor.<\/p>\n

Pasa el rat\u00f3n por encima de tu plantilla de cabecera y haz clic en el icono de los seis puntos del centro. Esto abrir\u00e1 el panel de la secci\u00f3n<\/strong> de edici\u00f3n a la izquierda:<\/p>\n

\"Click
Haz clic en la opci\u00f3n de puntos para editar<\/figcaption><\/figure>\n

Ahora, navega hasta la pesta\u00f1a Avanzado <\/strong>y localiza la secci\u00f3n Efectos<\/strong> de Movimiento. Aqu\u00ed, activa los Efectos de Desplazamiento<\/strong> cambiando el interruptor a ON<\/strong>:<\/p>\n

\"Toggle
Activa la opci\u00f3n \u00abEfectos de desplazamiento\u00bb<\/figcaption><\/figure>\n

A continuaci\u00f3n, despl\u00e1zate hacia abajo en la secci\u00f3n de Efectos de Movimiento<\/strong> para encontrar el campo Fijo<\/strong>. En el men\u00fa desplegable, selecciona Arriba<\/strong>:<\/p>\n

\"Now
Selecciona \u00abArriba\u00bb en el men\u00fa desplegable de la opci\u00f3n \u00abFijo\u00bb<\/figcaption><\/figure>\n

Ahora, haz clic en ACTUALIZAR<\/strong>. Ten en cuenta que, dependiendo del esquema de colores de tu tema, tu cabecera fija de Elementor puede parecer transparente:<\/p>\n

\"The
La cabecera fija ya funciona correctamente<\/figcaption><\/figure>\n

Si ese es el caso, y no te gusta c\u00f3mo se ve, siempre puedes cambiar el color de fondo. En tu panel de edici\u00f3n de la secci\u00f3n<\/strong>, ve a Estilo > Fondo<\/strong> y selecciona Cl\u00e1sico <\/strong>como tipo de fondo.<\/p>\n

Ahora, selecciona un nuevo color de fondo para tu plantilla de cabecera. Querr\u00e1s elegir un tono que sea complementario al del resto de la p\u00e1gina, pero que tambi\u00e9n cree un bonito contraste:<\/p>\n

\"Edit
Edita la cabecera fija si procede<\/figcaption><\/figure>\n

Como esto es s\u00f3lo un ejemplo, vamos a elegir simplemente un color gris para que nuestra cabecera sea menos transparente.<\/p>\n

Ahora, haz clic en ACTUALIZAR<\/strong> para guardar los cambios. Sigue adelante y obt\u00e9n una vista previa de tu resultado final:<\/p>\n

\"View
Ver los cambios realizados<\/figcaption><\/figure>\n

\u00a1Eso es todo! Seguramente querr\u00e1s ajustar el estilo y los colores de acuerdo con tu marca. S\u00f3lo aseg\u00farate de guardar siempre los cambios cuando hayas terminado.<\/p>\n

C\u00f3mo usar CSS para mejorar tu cabecera fija de Elementor<\/h2>\n

Cuando implementas una cabecera fija de Elementor en tu sitio web, puede parecer un importante lavado de cara para el dise\u00f1o de tu sitio. Sin embargo, es posible que te interesen m\u00e1s personalizaciones o caracter\u00edsticas m\u00e1s din\u00e1micas.<\/p>\n

Ahora que sabes c\u00f3mo crear una cabecera fija b\u00e1sica, veamos c\u00f3mo llevar tu dise\u00f1o al siguiente nivel. Puedes hacerlo utilizando el c\u00f3digo de las Hojas de Estilo en Cascada (CSS)<\/a> en WordPress.<\/p>\n

Si eres un principiante o no tienes experiencia en codificaci\u00f3n, no te preocupes. Mejorar tus dise\u00f1os es muy f\u00e1cil con Elementor.<\/p>\n

Para ello, ve a Plantillas > Constructor de temas > Encabezado<\/strong>:<\/p>\n

\"Add
A\u00f1adir CSS personalizado para hacer cambios en la cabecera<\/figcaption><\/figure>\n

En la secci\u00f3n Editar > Avanzado ><\/strong>CSS personalizado,<\/em> puedes a\u00f1adir un peque\u00f1o fragmento de CSS para realizar cambios estil\u00edsticos.<\/p>\n

Tipos de cabeceras fijas de Elementor<\/h2>\n

Aqu\u00ed tienes algunas mejoras populares que puedes considerar para tu cabecera fija de Elementor<\/p>\n

Cabecera fija transparente<\/h3>\n

Algunos temas pueden establecer autom\u00e1ticamente las cabeceras fijas como transparentes. Sin embargo, si quieres hacerlo mediante CSS<\/a>, puedes utilizar un fragmento de c\u00f3digo<\/a> como \u00e9ste:<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Simplemente copia y pega este c\u00f3digo en el campo CSS personalizado<\/strong> y ajusta los campos a tus preferencias. Este fragmento altera el color de fondo, la transparencia y la altura de tu cabecera, con un efecto de animaci\u00f3n:<\/p>\n
\"CSS
CSS para personalizar el fondo de la cabecera<\/figcaption><\/figure>\n
Las posibilidades de este tipo por s\u00ed solas son infinitas.<\/p>\n
Encabezado fijo que se encoge<\/h3>\n
Otra opci\u00f3n popular es un encabezado que se hace m\u00e1s grande y m\u00e1s peque\u00f1o a medida que los visitantes se desplazan. Aqu\u00ed tienes el c\u00f3digo que necesitar\u00e1s para este tipo de cabecera fija de Elementor:<\/p>\n
header.sticky-header {\n    --header-height: 90px;\n    --opacity: 0.90;\n    --shrink-me: 0.80;\n    --sticky-background-color: #0e41e5;\n    --transition: .3s ease-in-out;\n\n    transition: background-color var(--transition),\n                background-image var(--transition),\n                backdrop-filter var(--transition),\n                opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n    background-color: var(--sticky-background-color) !important;\n    background-image: none !important;\n    opacity: var(--opacity) !important;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n    transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n    min-height: calc(var(--header-height) * var(--shrink-me))!important;\n    height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n    transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n    padding-bottom: 10px !important;\n    padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n    transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n    max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Si no te sientes c\u00f3modo con un trozo de c\u00f3digo tan extenso, puedes consultar la gu\u00eda de Elementor para hacer un<\/a> encabezado fijo retr\u00e1ctil.<\/p>\n
Con este dise\u00f1o, acabar\u00e1s con este efecto:<\/p>\n
\"New
Nuevo efecto de cabecera<\/figcaption><\/figure>\n
Aunque esta cabecera tiene un toque sutil, su sofisticaci\u00f3n puede dar a tu dise\u00f1o un aspecto m\u00e1s profesional.<\/p>\n
Fundido de entrada \/ fundido de salida<\/h3>\n
Adem\u00e1s de estas opciones de moda, tambi\u00e9n existe la funci\u00f3n de fundido de entrada y salida (tambi\u00e9n llamada \u00abrevelaci\u00f3n\u00bb). Su aspecto es el siguiente:<\/p>\n
\"Fade
Fade in fade out<\/figcaption><\/figure>\n
Para este efecto, no tendr\u00e1s que tocar ning\u00fan c\u00f3digo. Simplemente navega hasta tu cabecera en tu constructor de temas. A continuaci\u00f3n, ve a la secci\u00f3n Editar > Avanzado > Efectos de movimiento > Efectos de desplazamiento<\/strong>:<\/p>\n
\"Edit
Edita la opci\u00f3n \u00abTransparencia\u00bb<\/figcaption><\/figure>\n
Aqu\u00ed, haz clic en el icono del l\u00e1piz situado junto al campo Transparencia<\/strong> y cambia la Direcci\u00f3n<\/strong> a Fundido de entrada<\/strong> o Fundido de salida<\/strong>. A continuaci\u00f3n, ajusta tu dise\u00f1o a tus preferencias.<\/p>\n
Hay muchas opciones para estos efectos de transparencia, as\u00ed que te recomendamos que consultes la documentaci\u00f3n de Elementor<\/a>. As\u00ed podr\u00e1s conseguir el aspecto exacto que deseas.<\/p>\n\n
Resumen<\/h2>\n
Trabajar con un constructor de sitios web de confianza es una excelente alternativa a pagar a un desarrollador web veterano<\/a> para que cree tu sitio. Si utilizas algunos de los mejores programas de dise\u00f1o de sitios<\/a> web, puedes crear f\u00e1cilmente los elementos esenciales para cualquier sitio web. Entre ellos se encuentran las pr\u00e1cticas pero bonitas cabeceras fijas .<\/p>\n
Una cabecera fija puede crear una experiencia m\u00e1s agradable para tus usuarios. Puedes elegir entre varios estilos de cabecera din\u00e1micos, incluidos el transparente y el encogido. Y lo que es mejor, puedes hacer estos impresionantes dise\u00f1os de cabecera tanto con Elementor Pro<\/a> como con su versi\u00f3n gratuita.<\/p>\n
Dise\u00f1ar tu sitio web es uno de los primeros pasos para lanzarlo. Sin embargo, primero necesitar\u00e1s un alojamiento fiable. Consulta los planes de alojamiento administrado<\/a> de Kinsta para ver c\u00f3mo podemos optimizar el rendimiento de tu sitio<\/p>\n","protected":false},"excerpt":{"rendered":"
Tanto si eres un aspirante a desarrollador web como un empresario de comercio electr\u00f3nico, es probable que tus sitios web compartan algunos elementos esenciales. Por ejemplo, …<\/p>\n","protected":false},"author":117,"featured_media":50835,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[795,270],"topic":[1345],"class_list":["post-50834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-desarrollo-wordpress"],"yoast_head":"\nLa Gu\u00eda Definitiva de las Cabeceras Fijas de Elementor<\/title>\n<meta name=\"description\" content=\"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor\" \/>\n<meta property=\"og:description\" content=\"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T06:27:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T12:30:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor\",\"datePublished\":\"2022-04-22T06:27:24+00:00\",\"dateModified\":\"2025-01-20T12:30:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\"},\"wordCount\":4095,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\",\"name\":\"La Gu\u00eda Definitiva de las Cabeceras Fijas de Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg\",\"datePublished\":\"2022-04-22T06:27:24+00:00\",\"dateModified\":\"2025-01-20T12:30:04+00:00\",\"description\":\"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg\",\"width\":1460,\"height\":730,\"caption\":\"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La Gu\u00eda Definitiva de las Cabeceras Fijas de Elementor","description":"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/","og_locale":"es_ES","og_type":"article","og_title":"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor","og_description":"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.","og_url":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-04-22T06:27:24+00:00","article_modified_time":"2025-01-20T12:30:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"26 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor","datePublished":"2022-04-22T06:27:24+00:00","dateModified":"2025-01-20T12:30:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/"},"wordCount":4095,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg","keywords":["Elementor","page builder"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/","url":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/","name":"La Gu\u00eda Definitiva de las Cabeceras Fijas de Elementor","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg","datePublished":"2022-04-22T06:27:24+00:00","dateModified":"2025-01-20T12:30:04+00:00","description":"Una cabecera fija (Sticky Headers) mantiene la informaci\u00f3n importante a la vista. Aprende a crear f\u00e1cilmente una cabecera fija de Elementor para mantener a tu p\u00fablico comprometido.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/elementor-sticky-header.jpg","width":1460,"height":730,"caption":"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/elementor-cabeceras-fijas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"La Gu\u00eda Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/50834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=50834"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/50834\/revisions"}],"predecessor-version":[{"id":51661,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/50834\/revisions\/51661"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/50834\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/50835"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=50834"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=50834"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=50834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}