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

Tabla de contenidos

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', 'tk_script_muestra_oculta' );

function tk_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', 'tk_script_jqueryvisible' );
 
function tk_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', 'tk_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.

12 comentarios

    1. 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,

    1. 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,

  1. buenas,

    mi pregunta es, para insertar los códigos en esos archivos has de hacer untema hijo??,
    y por otro lado yo no tengo la versión de pago ni de elementor ni de generate press, se puede hacer igualmente??
    Gracias, un saludo.

    1. Hola Isabel,

      Conviene crear el tema hijo, ya que así podrás actualizar tu tema sin que los archivos se sobreescriban. Crear un tema hijo es muy fácil, dinos si no sabes cómo y te mandamos alguna referencia.

      Respecto a tu pregunta sobre las versiones de pago, no son necesarias. En realidad esta acción no está condicianada ni al tema GP ni al editor visual Elementor, podrías hacerlo con cualquier otro tema y/o editor visual.

      Un saludo,

  2. Hola tengo elementor y me gustaria poner un header que tenga mi numero y whatsapp pero quiero que aparezca despues de que haga scroll hasta cierto punto y que sea en toda mi web, como podria hacer? gracias

    1. Hola Jesús,

      Puedes crear una sección dentro de tu header con esa información, así se mostrará en todas las páginas.

      Después tienes que modificar ligeramente la función, y en lugar de que se muestre cuando aparecen determinadas secciones, indicar que no se muestre cuando está visible la sección justo anterior. Para ello tendrás que jugar con true/false y con .fadeOut/.fadeIn.

      Un saludo,

    1. Hola Giorgio,

      Puedes utilizar Elementor Pro para realizarlo. Necesitas los elementos siguientes:

      • Creas un popup de Elementor a través de Plantillas > Popups, y en el mismo creas el formulario con los campos que quieras.
      • Creas un botón, que maquetas a tu estilo, y al que mantienes en una sección fija (Elementor ya trae esta función, puedes fijarlo en Editar sección > Avanzado > Efectos de movimiento > Sticky o puedes utilizar el código del post)

      • En la edición del botón, al incluir el enlace, tienes a la derecha un icono que corresponde a las etiquetas dinámicas. Pinchas, seleccionas popup. Una vez seleccionado, a través del icono (llave inglesa) a la izquierda, seleccionas el popup creado anteriormente.

      Con esto lo tienes en funcionando. Si lo quieres en toda la web, crea el botón en el footer.

      Si no tienes Elementor Pro puedes conseguirlo aquí.

      Saludos,

  3. Buenas tengo un problema cada ves que intento escribir en cualquier formulario ya sea para iniciar sesión o registro o en el formulario de contacto o cualquier otro en el modo móvil este al tocarlo cambia de posición es decir se mueve de lugar, subiendo este para arriba al incorporarse el teclado del móvil lo que es incomodo para todos los usuarios ya que no se mantiene fijo. De que forma pudiera poner fijo esto para que no se mueva de lugar. Les agradecería su ayuda. Trabajo con elementor

  4. Buenos días, una pregunta quiero colocar una sección fija donde va a sonar una emisora, la idea es cuando ponga a sonar la emisora pueda navegar por toda la web, sin que tenga que activar cada vez que cambio de página o de entrada (que no se interrumpa lo que está sonando), agradezco su guía.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Abrir el chat
1
¿Necesitas ayuda?
Alimento Web
Hola,
¿Podemos ayudarte?