Crear un sección fija con Elementor y posibilidad de mostrar y ocultar en la navegación

Crear un sección fija con Elementor y posibilidad de mostrar y ocultar en la navegación

Hay casos en la que nos es de utilidad tener elementos fijos en una landing page. Por ejemplo, un menú, la política de cookies, etc. También es útil para elementos (por ejemplo, botones) con llamadas a la acción (CTA) que nos lleven, por ejemplo, a una parte determinada de la landing: formulario de contacto, cabecera, etc.

En estos últimos casos, en determinadas posiciones, conviene ocultar estos elementos. Por ejemplo, el botón de arriba cuando estamos en la cabecera, o el botón que lleva al formulario cuando éste se muestra.

Para crear una sección fija con esta funcionalidad, realizamos los siguientes pasos:

Crear la sección en Elementor

Con Elementor, creamos la sección que queramos dejar fija y le asignamos un ID. Por ejemplo: secfija

Fijamos la sección con estilo CSS

A través del ID, fijamos la sección en el lugar deseado, y la ocultamos a través de display. Por ejemplo:

Añadimos la funcionalidad de mostrar/ocultar

A través del fichero functions.php insertamos la función que hará que la sección se muestre u oculte se función de la presencia de otros elementos de la página.

Esto hará que la sección con el id secfija esté visible sólo cuando se vean los elementos reflejados en la función checkScroll (elementor-element-58b23db3, etc) Estos id los podemos seleccionar a través del inspector de código del navegador.

Deja un comentario