Cómo crear y aplicar un botón "Scroll to Top" en Elementor sin plugins

A "Ir arriba" es un complemento excelente para cualquier página larga. Proporciona a los usuarios una forma rápida de volver a la parte superior, haciendo que la navegación sea más accesible y fácil de usar. Esta guía le guiará a través de la creación de un botón "Desplazarse al principio" en Elementor, no necesita pluginsy aplicarlo en todo su sitio web para mantener un aspecto coherente.

Configurar una plantilla de botón global en Elementor

Comience creando una nueva plantilla:

1. En el panel de control de WordPress, vaya a "Plantillas" > "Añadir nuevo."

2. Seleccione "Página única" del menú desplegable como tipo de plantilla. Póngale un nombre como "Botón de desplazamiento hacia arriba".

3. Pulse "Crear plantilla" para abrir el editor de Elementor.

4. Salir de la biblioteca: Pulse el botón "X" en la esquina superior derecha para cerrar la biblioteca de plantillas.

Añadir y personalizar el botón:

1. Arrastre el "Botón" de la barra lateral en la plantilla.

2. Cambie el texto del botón por "Desplazarse al principio" o utilice un icono de flecha hacia arriba.

3. Vaya a la galería de iconos y seleccione la flecha hacia arriba icono.

4. Seleccione un botón diferente tipo para eliminar el texto.

5. Ir al "Estilo" y configure el color de fondo, la fuente y el radio del borde para que se ajuste al estilo de su sitio. Un botón redondo con un color que contraste funciona bien para mantenerlo visible.

Cambiar el estilo del botón

1. Utilice esquinas redondeadas
   • Ir a la Estilo en Elementor.
   • Fije el Radio del borde a 10% para crear un botón perfectamente redondo.
   • Modifique el Acolchado para ajustar el espaciado interior de un elemento. Esto define el espacio interior entre el contenido y el bordes del elemento.

2. Añadir un efecto de sombra
   • En el Caja Sombra (normalmente se encuentran en Estilo > Borde), añada una sombra sutil para crear profundidad. Utilice ajustes como
   • Desenfoque: 10px
   • Dispersión: 0px
   • Color: Elija un gris claro o un negro transparente para dar una sombra suave.

3. Elija una combinación de colores que contraste
   • Utilice colores que contrasten con el fondo de su sitio web. Por ejemplo, si su fondo es claro, opte por un color llamativo como el azul, el naranja o el verde.
   • Para el color del icono, asegúrese de que sea blanco u otro color que destaque sobre el fondo del botón.

4. Añadir un efecto Hover
   • En el Hover ajustes en el Estilo ficha, puede hacerlo:
     • Cambie el color de fondo al pasar el ratón a un tono más claro o más oscuro del color del botón.
     • Animación Hover le permite controlar la velocidad de las animaciones y transiciones.

5. Añada una animación de pulso (opcional)
   • En el Avanzado vaya a CSS personalizado (disponible en Elementor Pro) y añada una animación de pulso:
   • Sustituya #yourButtonID con el ID de su botón. Esto hará que el botón crezca y se encoja sutilmente, llamando la atención sobre él.

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #yourButtonID { animación: pulso 2s infinito; }

Este código añade un efecto de animación pulsante a un botón especificado. El botón se agranda suavemente y luego vuelve a su tamaño original durante 2 segundos, repitiéndose de forma continua. Este efecto llama la atención sobre el botón, haciéndolo más perceptible para los usuarios.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

Fije el botón en su sitio:

1. En el "Avanzado", en la pestaña "Posicionamiento," elija "Fijo."

2. Coloque el botón en la esquina inferior derecha con un 20px margen por ambos lados para que se mantenga en su sitio cuando los usuarios se desplacen.

3. Pulse "Publique". Ajuste las condiciones de visualización a "Todas las páginas." Esto asegurará que el botón se muestre en todas las páginas, proporcionando una experiencia de usuario consistente.

Añadir un ancla en la parte superior de la página

1. Abra la página en Elementor:
   • Vaya a su panel de control de WordPress, navegue hasta Páginas o Puestosy seleccione la página que desea editar.
   • Haga clic en Editar con Elementor para abrir la página en el editor de Elementor.

2. Seleccione el elemento superior:
   • Elija un elemento cerca de la parte superior de la página al que desee dirigir a los usuarios cuando pulsen el botón "Desplazarse al principio". Este suele ser el encabezado sección, a títuloo el primera sección de la página.
   • Pulse sobre el elemento para seleccionarlo.

3. Vaya a la pestaña Avanzado:
   • Con el elemento superior seleccionado, navegue hasta el Avanzado en el panel Elementor de la izquierda.
4. Establezca el ID de CSS:
   • Encuentre el CSS ID campo bajo el Avanzado ficha.
   • Introduzca la palabra top (o cualquier otra palabra sencilla que prefiera, como inicie).

5. Guarde sus cambios:
   • Una vez que haya establecido el ID de CSS, haga clic en Actualización para guardar los cambios en la página.

Nota importante:

• Asegúrese de que el ID de CSS que ha introducido coincide con el del botón "Desplazarse al principio enlace. Por ejemplo, si establece el ID de CSS como top, el enlace del botón debe ser #top.

Añada un ancla para el botón:

1. Abra cualquier página en Elementor y haga clic en el elemento superior (como un encabezado o una sección).
2. ISeleccione el enlace del botón. En el Enlace campo, introduzca #top (asegúrese de incluir el # símbolo).

3. Siga leyendo para ver los resultados.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

Conclusión

Añadir un botón "Desplazarse al principio" en Elementor es una forma sencilla de mejorar la experiencia del usuario en páginas más largas al permitir una navegación fácil de vuelta a la parte superior. Al crear una plantilla de botón global, se asegura una apariencia consistente en todo su sitio. El proceso incluye diseñar el botón, establecer estilos personalizados como esquinas redondeadas y efectos de sombra y, opcionalmente, añadir animaciones como un efecto de pulso para una mayor visibilidad.

Una vez diseñado el botón, puede fijarlo en su lugar utilizando el posicionamiento "Fijo" y asegurarse de que aparece en todas las páginas mediante las condiciones de visualización. Además, estableciendo un identificador CSS en la parte superior de cada página (como "top") y vinculando el botón a este anclaje (#top), los usuarios pueden retroceder rápidamente a la parte superior de la página al pulsar el botón.

Preguntas frecuentes

1. ¿Por qué debo añadir un botón "Desplazarse al principio"?

Este botón ahorra a los usuarios el desplazamiento constante, especialmente en páginas largas. Ofrece una forma rápida de volver al principio y facilita la navegación por el sitio.

2. ¿Puedo añadir más efectos de animación al botón?

Por supuesto. Los efectos de movimiento de Elementor le permiten añadir animaciones como el rebote o el deslizamiento para que el botón sea más llamativo.

3. ¿Existen plugins que puedan hacer esto?

Sí, varios plugins ofrecen botones de "Desplazamiento al principio". Pero añadirlos a través de código personalizado ayuda a mantener su sitio más rápido al evitar la necesidad de plugins adicionales.