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

Share on facebook
Share on google
Share on twitter
Share on linkedin

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:

#secfija{
   position:fixed; 
   width: 100%;
   top:0; 
   right:0;
   padding-top:20px;
   padding-right:20px;
   z-index:999;
   display:none;
}

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.

add_action( 'wp_footer', 'ool_script_muestra_oculta' );

function ool_script_jqueryvisible() {
 wp_register_script( 'jquery-visible', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.1.0/jquery.visible.min.js', false );
 wp_enqueue_script('jquery-visible');
}

add_action( 'wp_enqueue_scripts', 'ool_script_jqueryvisible' );
 
function ool_script_checkScroll() {
 echo '<script type="text/javascript"> 
 $("#secfija").hide();
 window.addEventListener("scroll", checkScroll, false);
 window.addEventListener("resize", checkScroll, false);
 window.addEventListener("load", checkScroll, false);
 
 function checkScroll(){
 if (($(".elementor-element-58b23db3").visible(true)) || 
 ($(".elementor-element-8d74cc8").visible(true)) ||
 ($(".elementor-element-eed3609").visible(true))){
 $("#secfija").fadeOut();
 }else{
 $("#secfija").fadeIn();
 }
 }
 </script>';
}

add_action( 'wp_footer', 'ool_script_checkScroll' );

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.

Share on facebook
Share on google
Share on twitter
Share on linkedin

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

    • Hola Jose ¿qué tal?,

      Me alegro de que te resulte interesante. Solemos utilizarlo para mantener visible un botón que lleve a un formulario al pie de la landing, y lo ocultamos cuando llegamos al formulario o a una sección donde también se incluya un botón con la misma finalidad.

      Respecto a lo que me preguntas de la cabecera, en nuestro caso, la función nos la da el tema que utilizamos (GeneratePress, en su versión de pago). Permite, como ves, fijar la cabecera y ocultarla al hacer scroll. Esto, sobre todo en la versión móvil, facilita la lectura.

      Un saludo,

    • Hola,

      Este código lo tienes que insertar en los ficheros de theme que estés utilizando:

      – El código CSS en el fichero css del theme. En función del theme el nombre varía, pero puede ser style.css o similar.
      – Las funciones se integran en el archivo functions.php del theme. En este caso el nombre no varía.

      Un saludo,

Deja un comentario