El Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.

Mira la guía en vídeo:

Steps to Use ElementsKit Sticky Content:

• Ir a ElementsKit → Módulos → Enable Contenido fijo → Save.
• Open page in Elementor.
• Select section/column/widget → Advanced → ElementsKit Sticky.
• Choose Sticky Type (Top / Bottom / Scroll Up / Column).
• Set Offset, Sticky Until (CSS ID), Background if needed.
• Update and test on devices.

Follow the module’s detail functions:

Habilitar módulo de contenido fijo #

To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to Kit de elementos from your dashboard and follow the steps:

1. Kit de elementos bajo Kit de elementos enchufar
2. Go to MODULES
3. Toggle the Sticky Content module EN
4. Haga clic en Guardar cambios

Steps 2: Sticky on Top #

Esta función le ayudará a colocar cualquier sección en la parte superior de la página.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso:

• Navegar a ElementsKit→ Pie de página de encabezado→ hacer clic Editar con Elementor.

• Crear una nueva página-> Haga clic en el Icono de ElementsKit para insertar cualquier página lista de nuestras plantillas prediseñadas.

1. Clickea en el Icono de sección interior.
2. Ir a Avanzado
3. Expandir ElementsKit Sticky.
4. Seleccione la opción Adhesiva➔ Arriba desde el menú desplegable

• Ahora ve a tu página-> Puedes ver que tu encabezado está pegado en la parte superior..

Cambio de color de fondo del adhesivo en la parte superior #

You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.

• Elija un color de fondo adhesivo: Blue.
• Haga clic en Actualizar

Pegajoso hasta arriba #

Si desea que sus secciones sean fijas en varias secciones y dejen de ser fijas después de una sección específica, puede configurar esa ID de sección aquí. Dejémoslo fijo hasta la sección Acerca de nosotros.

• Haga clic en Editar con Elementor.

1. Clickea en el Our School Goals 2019 inner section icon
2. Ir a avanzado
3. Find Layout

Selecciona el CSS ID and Copy it.

• Ir a Encabezamiento➔Avanzado➔Kit de elementos pegajoso➔pegajoso hasta.
• Ahora pega la sección sobre nosotros. ID CSS en el pegajoso hasta campo.

• Ahora puedes ver que el encabezado es Sticky Until the Our School Goals 2019 Section.

Función de agregar clase #

ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.

1. Ir al personalizador-> CSS adicional.
2. Usa la clase: “ekit-efectos-pegajosos” y hacer el color de fondo Gris.

• Ir al encabezado-> Eliminar el Color de fondo.
• Agregar compensación. Por ejemplo: 50 píxeles.

• Puedes ver que el color de fondo es Transparente. Pero después de desplazarse hasta 50 píxeles, se agrega un color de fondo.

Desplazamiento adhesivo en la parte superior #

• Puedes decidir la cantidad de espacio que quedará mientras tu contenido o imagen permanecerá fijo en la parte superior. Puedes hacer lo mismo con otras posiciones adhesivas. Proporcione el desplazamiento adhesivo: 100 px. Puede ver que el encabezado se muestra después de 100 px.

• Hay tres opciones de elección de dispositivo para mostrar el adhesivo: Todos los dispositivos, solo computadora de escritorio, computadora de escritorio y tableta. Elija una opción para decidir exactamente en qué dispositivo desea mostrar el contenido como fijo.

Mostrar adhesivo al desplazarse hacia arriba #

Esta función le ayudará a fijar cualquier sección de la página cuando se desplace hacia arriba.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso:

• Go back to ElementosKit Adhesivo opciones.

• Seleccione la opción fija➔ Mostrar al desplazarse hacia arriba desde el menú desplegable.

Haga clic en Actualizar-> Ir a su página->Actualizar-> Desplazarse hacia arriba.

Puedes ver que el encabezado es fijo cuando te desplazas hacia arriba.

Fijo hasta que se desplaza hacia arriba #

Let’s make it sticky until the Care About Us Section.

• Click on the sticky Care About Us Icono de sección interior.
• Now, going to the Layout settings from Advanced tab, selecciona el ID de CSS y cópielo.

• Haga clic en el encabezado de navegación fijo Icono de sección interior.
• Ir a Avanzado
• Encontrar Kit de elementos pegajoso and paste that sticky header section’s ID CSS en el pegajoso hasta campo.

• Haga clic en Actualizar-> Ir a la página de inicio-> Actualizar-> Desplazarse hacia arriba.
• Ahora puede ver que el encabezado es fijo hasta que la sección del encabezado fijo y cuando aparece la sección de video en el encabezado ya no es fijo.

Pegajoso en la parte inferior #

Esta función le ayudará a colocar cualquier sección en la parte inferior de la página.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso:

• Clickea en el Icono de ElementsKit para insertar cualquier pie de página de nuestras plantillas prediseñadas.

Ir a Elementos ➔ Arrastre los siguientes widgets y suéltelos en el área seleccionada.

• Título.
• Logotipo del cliente.
• Video.
• Título.

• Clickea en el Icono de sección interior de pie de página.
• Ir a Avanzado-> Expandir ElementsKit Sticky.
• Seleccione la opción fija➔ Abajo desde el menú desplegable.

• Haga clic en Actualizar-> Ir a su página->Actualizar-> Desplazarse hacia arriba.
• Puedes ver que el pie de página es fijo cuando te desplazas hacia arriba.

Pegajoso hasta el fondo #

Hagámoslo pegajoso hasta la sección inferior pegajosa.

• Clickea en el Fondo pegajoso Icono de sección interior.
• Ahora, yendo a la configuración avanzada, configure el ID de CSS y cópielo.

• Haga clic en el pie de página Icono de sección interior.
• Ir a Avanzado➔ Kit de elementos pegajoso➔ pegajoso hasta.
• Ahora pega la sección adhesiva inferior. ID CSS en el pegajoso hasta campo.

• Haga clic en Actualizar-> Ir a la página de inicio-> Actualizar-> Desplazarse hacia arriba.
• Ahora puede ver que el encabezado es fijo hasta que la sección adhesiva inferior y cuando la sección del logotipo del cliente aparece en el pie de página ya no es adhesivo.

Pegajoso en la columna #

Esta función le ayudará a pegar cualquier sección en la columna.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso:

• Seleccione su estructura del área seleccionada. Aquí estoy tomando 3 columnas.

Ir a Elementos ➔ Arrastre los siguientes widgets y suéltelos en el área seleccionada.

• Título.
• Imagen.
• Cuadro de iconos.

Hagamos que la sección de encabezado e imagen sea adhesiva.

• Clickea en el Icono de sección interior de encabezado.
• Ir a Avanzado-> Expandir ElementsKit Sticky.
• Seleccione la opción adhesiva➔ Columna desde el menú desplegable.

• Clickea en el Icono de sección interior de imagen.
• Ir a Avanzado-> Expandir ElementsKit Sticky.
• Seleccione la opción adhesiva➔ Columna desde el menú desplegable.

• Haga clic en Actualizar-> Ir a su página->Actualizar-> Desplácese hacia abajo.
• Puede ver que el encabezado y la imagen son fijos y que el lado derecho del contenido del cuadro de íconos aún se está moviendo.