Si eres de los que no les gusta cargar su WordPress con plugins para cada funcionalidad, hoy te traigo un sencillo tutorial para que aprendas a crear un botón «Back to Top» desde cero, y sin conocimientos de programación, con Elementor Pro (puede que también con la versión gratuita).
Para crear el botón back to top con Elementor, sigue los siguientes pasos.
1. Selecciona editar el Pie de página. Con esto conseguirás que el icono que vas a poner en el siguiente paso esté presente en todas las páginas.
2. Una vez estamos en pie de página crea una Sección con una Columna e inserta un widget de Icono con una flecha dirigiendo arriba.
3. Posiciona este widget con la siguiente configuración:
El Ancho en inline –integrado(auto)–. Orientación horizontal a izquierda y Orientación vertical a arriba. En la Compensación (offset) vertical y horizontal selecciona los parametros en porcentaje que más se ajusten a tus necesidades. Si tienes un plugin de cacheo recuerda reiniciar la caché para ver los cambios.
4. Ahora vete a editar la Cabecera. En la cabecera selecciona la Sección y vete a la pestaña de Avanzado. En ella, edita la Id de css introduciendo un nombre, por ejemplo, «backtotop» (sin las comillas). Este id será donde apunte el enlace del botón.
5. Ahora vuelve a editar el Pie de página, en concreto el Icono del paso 2.
6. En la pestaña Avanzado, selecciona editar Efectos de movimiento con la siguiente configuración:
Efectos de scroll activado. Después te vas a Transparencia y seleccionas Dirección, Nivel 10 y Vista Abajo 20%, Vista Arriba 80%. Esta configuración hará que el icono aparezca al hacer scroll de más de un 20% de la altura de la pantalla.
7. Finalmente vete al Icono del paso 2. Introduce el enlace que concuerde con Id de css que introdujiste en el paso 4. Si fue «backtotop» introduce en este paso «#backtotop», sin comillas:
Y con esto ya tendrías un botón Volver arriba totalmente funcional y construido con Elementor Pro.
Basado en el vídeo de youtube «Back to top button with elementor pro»
