Saludo iniciado #

El módulo Sticky Content de ElementsKit le permite hacer que cualquier sección de la página o publicación sea fija en una posición seleccionada. En este tutorial, explicaremos diferentes características del módulo Sticky Content y cómo aprovecharlas para que su contenido se destaque.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso:

Habilitar módulo de contenido fijo #

Para comenzar a utilizar el módulo Sticky Content, lo primero que debes hacer es habilitarlo desde la lista de módulos de ElementsKit. Sin habilitar este módulo, no podrá usarlo con Elementor. A continuación se explica cómo habilitar el módulo de contenido fijo:

• Ir a Kit de elementos ➔ Módulos. Ahora, cambie el módulo de contenido fijo EN y haga clic en Guardar cambios.

Pegajosa en la parte superior #

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.

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

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

• 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 #

Puedes ver el problema de que la parte del encabezado es pegajosa pero es transparente. Entonces necesitamos cambiar el color de fondo. En la función Fija hasta, puede encontrar la opción para cambiar el color de fondo de la sección fija.

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

• Vaya a la página de inicio-> Actualizar-> Desplácese hacia abajo.
• Puede ver que el color de fondo del encabezado se muestra blanco.

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.

• Haga clic en sobre nosotros Icono de sección interior.
• Ahora, yendo a la configuración avanzada, configure el ID de CSS y cópielo.

• 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 Fijo hasta la sección Acerca de nosotros.

Función de agregar clase #

Cuando utiliza un encabezado transparente, es posible que tenga un problema con el color de fondo. Si se desplaza hacia abajo, es posible que necesite un color de fondo. Aquí, ElementsKit le ofrece otra opción y es una función de adición de clases. Si se desplaza hacia abajo, por ejemplo 50 px, se agregará una nueva clase y esa es "ekit-sticky-effects". Usando esta clase puedes crear cualquier CSS que desees. Veamos cómo puedes hacerlo.

• Ir al personalizador-> CSS adicional.
• 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:

• Clickea en el Icono de ElementsKit para insertar cualquier encabezado de nuestras plantillas prediseñadas.

• Clickea en el Icono de sección interior.
• Ir a Avanzado-> Expandir ElementsKit Sticky.
• Seleccione la opción fija➔ Mostrar al desplazarse hacia arriba desde el menú desplegable.

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

• Título.
• Botón creativo.
• Imagen.
• Título.
• Video.

• 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 #

Hagámoslo adhesivo hasta la sección de encabezado adhesivo.

• Haga clic en el encabezado adhesivo Icono de sección interior.
• Ahora, yendo a la configuración avanzada, configure el ID de CSS y cópielo.

• Haga clic en el encabezado de navegación fijo Icono de sección interior.
• Ir a Avanzado➔ Kit de elementos pegajoso➔ pegajoso hasta.
• Ahora pegue la sección de encabezado adhesivo 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.