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 , 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
Muy interesante tu aporte aporte. Por cierto cómo haces para que la cabecera se oculte al bajar y aparezca al subir?
Gracias
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 (, 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, busco el paso a paso para un nivel más bajo. Por ejemplo, en qué archivos inserto ese codigo?
Gracias!
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,
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.
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,
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
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,
Hola, quiero saber si en elementor se puede hacer un formulario en un botón flotante fijo como el de esta página https://scanner.international/ y si es así como se puede realizar?
Muchas gracias de antemano.
Hola Giorgio,
Puedes utilizar Elementor Pro para realizarlo. Necesitas los elementos siguientes:
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)
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 .
Saludos,
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
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.