¿Alguna vez te has encontrado con una página muy larga y necesitas volver a la parte superior? Desplazarse puede ser mucho trabajo, especialmente en dispositivos móviles, pero puede resolver esto agregando un botón «Volver al principio» con Elementor en WordPress.
Los botones siempre son una gran parte de los sitios web de WordPress y Elementor hace que agregar botones sea muy fácil. A menudo, las personas quieren ver que tienen la capacidad de volver a la parte superior de una página inmediatamente sin desplazarse. Aquí es donde el botón Volver arriba de Elementor resulta útil.
En este tutorial, le mostraré un proceso simple de 3 pasos para agregar un botón de inicio de Elementor dentro de su generador de páginas de Elementor.
Nota: Para realizar este proceso utilizando Clases CSS personalizadas, deberá tener instalado Elementor Pro .
Perfecto para sitios web de una página y contenido de formato largo
Quizás se esté preguntando qué tipo de sitio web realmente necesita un botón «Volver al principio». Y la respuesta a esa pregunta es un sitio web de una página.
Un sitio web de una página es un sitio web que solo consta de una sola página. Es obvio, lo sé, pero hay un gran inconveniente en este diseño. Las páginas se hacen demasiado largas. Esto puede ser frustrante para los visitantes que desean volver rápidamente a la cima.
De hecho, algunos usuarios pueden simplemente decidir cerrar la página y escribir la URL para volver a la parte superior. Eso si deciden volver.
Las páginas normales del sitio web no suelen ser lo suficientemente largas como para justificar este botón. Dicho esto, hay excepciones, por lo que realmente depende del contenido de su sitio web.
También ten en cuenta que este botón no es exclusivo de páginas en WordPress, también funciona en publicaciones. Para publicaciones muy largas, también debe considerar agregar una tabla de contenido para ayudar a los visitantes a encontrar rápidamente lo que están buscando.
Los artículos que tienen más de 2000 palabras o el contenido extenso pueden necesitar un botón para volver al principio según el contexto. Es una manera fácil de ayudar a los visitantes a volver a la parte superior de la publicación en caso de que haya enlaces u otras llamadas a la acción que quieran usar.
De cualquier manera, entremos en ello.
Agregar el botón Volver arriba usando Elementor
El proceso de agregar un botón de regreso al principio no es difícil y se puede lograr con bastante rapidez siguiendo los pasos a continuación. Solo recuerda que necesitas Elementor Pro para usar Clases CSS.
Paso 1: haga clic en el identificador de sección
Para comenzar, ingresa al editor de Elementor. Haga clic en el identificador de sección de la primera sección de su página para ingresar su configuración.
En la pestaña «Avanzado» de la sección, ingrese un nombre en el campo ID de CSS, como «arriba» o «Volver al principio». Cuanto más descriptivo, mejor.
Nota: Recuerda, para usar el CSS necesitas tener instalado Elementor Pro. Si no lo hace, desplácese más allá de este paso y continúe a continuación.
Paso 2: arrastre el widget de botón a una sección
Arrastre un widget de botón a su página donde quiera que se coloque. Simplemente lo estoy arrastrando a la sección superior de la página en blanco para la demostración. Puede arrastrarlo a cualquier lugar que desee, incluido el área de pie de página si tiene uno construido.
Paso 3: Establecer configuraciones de botones
Ahora haga clic en la sección del botón de nuevo. Use la pestaña «Contenido» para completar las configuraciones adecuadas. Escriba la palabra «Superior» en el campo de texto del botón.
Luego, escriba «superior» en el campo Enlace, o cualquier ID de CSS (Pro) que haya elegido en el paso número 1 anterior.
Ahora puede publicar o actualizar la página y cuando un usuario haga clic en su botón superior, lo llevará automáticamente a la sección superior de la página. Esto es útil para algunos usuarios que prefieren no desplazarse hacia atrás hasta la parte superior de la página manualmente.
Esta puede ser una herramienta aún más útil cuando un usuario está viendo su sitio desde un dispositivo móvil y ya se ha desplazado hacia abajo en la página.
Además, asegúrese de que coincida con el diseño del resto de su página. Un botón rosa en una página en blanco y negro se destacará como un pulgar adolorido, así que asegúrese de que el color sea apropiado. Además, asegúrese de que el texto sea legible.
Felicitaciones por agregar un botón «Volver al principio» en WordPress. Si desea agregar esto a varias páginas, deberá repetir estos pasos.
Ocultar o mostrar el botón «Volver al principio» en Elementor
La funcionalidad de ocultar o mostrar funciona de manera un poco diferente. Dado que este es un tutorial basado en la versión gratuita del complemento, sería mejor arrastrar y soltar el botón de volver arriba en la parte inferior de la página.
De esa manera, cuando un usuario llegue al final, simplemente puede hacer clic en él y permanecerá en la parte inferior de la página fuera de la pantalla.
Dicho esto, también puede «pegar» el botón en la parte inferior de la página si tiene Elementor Pro instalado y en ejecución. Deberá usar el «Efecto de desplazamiento adhesivo», al que tendrá acceso en la versión pro.
La opción adhesiva es mucho más versátil porque un usuario podrá acceder al botón en cualquier lugar de la publicación o página.
Agregue un botón «Volver al principio» en Elementor hoy
Elementor es un fantástico creador de páginas para WordPress. Puedes hacer mucho con él, incluso si solo estás usando la versión gratuita. Dicho esto, a veces los pasos que necesita para lograr algo en la versión gratuita serán diferentes de lo que sería si estuviera ejecutando la versión pro del complemento.
Dependiendo de sus necesidades, la versión gratuita será más que suficiente para realizar la tarea. Sin embargo, hay muchos casos en los que la versión Pro bien vale el costo.
De cualquier manera, espero que este tutorial haya podido mostrarle lo fácil que es agregar un botón de regreso al principio en Elementor. Con unos pocos clics rápidos aquí y allá, puede dar fácilmente a los usuarios de su sitio la capacidad de desplazarse hacia atrás a la parte superior de cualquier página o publicación en su sitio.
¿Por qué necesita un botón «Volver al principio»? ¿Encuentra Elementor fácil de usar?