Si trabajas con Elementor para diseñar tu página web te habrás visto en la situación de querer crear un botón que te lleve de vuelta al principio de tu página. En Elementor no encontramos esa opción. Por esa razón, vamos a ver cómo crear un botón de volver arriba con Elementor Pro mediante un Pop up.
Qué vas a encontrar en esta entrada:
Elementor es una de las mejores herramientas de maquetación con la que nos encontramos en la actualidad. Aún así, podemos encontrar ciertas carencias. En este caso, si estas creando una landing o una página dentro de tu web que es extensa, nos encontramos con que en Elementor no podemos añadir un botón de volver arriba por defecto.
¡Pero existe una solución! Es muy sencilla y resuelve de forma eficaz este problema.
Qué es el botón de volver arriba
Si no sabes muy bien a que nos estamos refiriendo, os dejamos una imagen sobre el botón en cuestión, porque una imagen vale más que mil palabras.
Su función es simple: Devolvernos de forma rápida a la parte superior de la página sin que tengamos que hacer scroll.
Cuando usar el botón de volver arriba
Como hemos comentado anteriormente, este botón es importante tenerlo si vas a diseñar una landing o página de tu web y son muy extensas.
Pero en realidad puedes añadirlo en cualquier caso ya que no está de más dar esa opción al usuario para facilitar la rápida navegación por la web.
Cómo crear un botón de volver arriba con Elementor Pro mediante un Pop up
Ya hemos visto que por defecto Elementor no nos da la posibilidad de añadir este botón. La opción que si tenemos en Elementor Pro es la de crear un Pop up. Es una forma rápida de realizarlo y además es muy sencillo.
¡Te lo explicamos!
Vamos a la opción de Pop Up
En el escritorio de WordPress, iremos a la parte de Plantillas > Pop Ups (o Ventanas emergentes)
Una vez aquí, le daremos a Crear una ventana emergente nueva y le pondremos un nombre. En este caso, le llamaremos Botón. Una vez hecho, le daremos a Crear plantilla.
Creación de del botón
Como podrás comprobar, lo primero que te va a salir son una serie de plantillas predeterminadas para realizar un Pop up, pero no nos sirve ninguna, por lo que cerraremos la biblioteca.
Ahora nos deja añadir un Widget, por lo que añadiremos el Botón.
Configuración de botón volver arriba
Iremos a Ajustes y desactivaremos las opciones:
- Overlay
- Botón de cerrar
En cuanto a la posición lo pondremos abajo y a la derecha y el ancho a 100.
Ahora le daremos al lápiz azul del botón y editaremos lo siguiente:
Quitamos el texto y ponemos un icono que sea una flecha hacia arriba. Dejamos el espacio a cero.
Nos vamos a estilo y modificamos el relleno a 10 – 12 px, según os guste más.
Volvemos a los ajustes y le quitamos la sombra de caja y ponemos el fondo transparente.
Ahora en este paso vamos a Editar columna, Avanzado. En el relleno le quitamos todo. También le vamos a añadir los márgenes para que no se nos quede pegados al aviso de recaptcha que tenemos en el mismo sitio.
Enlazar a una ID para que nos lleve al comienzo
Ya tenemos el botón listo, ahora solo falta que lo enlacemos a una ID que estará en nuestra cabecera para que el botón haga ese efecto. En este caso hay dos formas de hacerlo.
Buscar en el Código fuente de la cabecera una ID
Esta opción consiste en hacer click con el botón izquierdo en la parte del header de tu web y darle a ver código fuente.
Cuando se nos abra el código, buscaremos cualquier ID que podamos poner en el enlace del botón.
Si no encuentras ninguna ID o no sabes cómo buscarla. Te damos otra opción.
Crear la ID en tu Menú
En este caso, iremos a nuestro menú creado con Elementor. Le daremos a los 3 puntos, y en las opciones avanzadas crearemos nuestra ID. En nuestro caso la hemos llamado volverarriba.
Ahora solo tendremos que volver a la edición del botón y crear el enlace con # + la ID. En nuestro caso: #volverarriba
Publicar Pop Up
Para publicar nuestro botón, le configuraremos las condiciones. Nosotros le vamos a dar que queremos que aparezca en todo el sitio web.
Aquí podréis ponerlo como queráis, si solo queréis en un sitio, en toda la web menos en algunas páginas, etc.
Una vez lo tengamos, le daremos a seguir y deberemos elegir cuando queremos que salte dicho botón.
Recomendamos que sea la opción del porcentaje. Así solo saldrá si el usuario baja el porcentaje que establezcamos en este punto.
En las reglas avanzadas no tocaremos nada y le daremos a Guardar y Cerrar.
Con esto ya tendremos nuestro botón de volver arriba listo para usar.
Puede que también te interese
Cómo conseguir clientes locales con Google Business
Cuando una persona busca un producto o servicio cerca de su ubicación, Google suele mostrar negocios locales relacionados con esa búsqueda. Para una empresa que
Las mejores herramientas de inteligencia artificial para marketing digital en 2026
La inteligencia artificial se ha convertido en una de las tecnologías más relevantes para el marketing digital. En 2026, las empresas pueden utilizar diferentes herramientas
Cómo crear una estrategia de contenidos para una pyme paso a paso
Tener presencia en Internet ya no consiste únicamente en disponer de una página web o publicar ocasionalmente en redes sociales. Para conseguir resultados es necesario
Diseño web orientada a la conversión (CRO): Por qué tu página tiene visitas pero no genera ventas
Atraer tráfico web mediante campañas de pago (PPC) o posicionamiento orgánico (SEO)es solo la mitad de la ecuación del marketing digital. Si un sitio web
Meta Ads vs. Google Ads: Dónde invertir el presupuesto publicitario de tu empresa para maximizar el ROI
Elegir el canal publicitario adecuado es una de las decisiones más complejas a las que seenfrentan las empresas al planificar su estrategia de marketing digital.
Google Street View para negocios: Cómo una visita virtual en Google Maps multiplica tus clientes locales
En el ecosistema digital actual, el primer contacto que un cliente potencial tiene con una empresa local rara vez ocurre en la puerta física del