{"id":3088,"date":"2024-10-18T16:30:09","date_gmt":"2024-10-18T08:30:09","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3088"},"modified":"2024-10-18T16:36:55","modified_gmt":"2024-10-18T08:36:55","slug":"how-to-create-and-apply-a-scroll-to-top-button-in-elementor-without-plugins","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/es\/como-crear-y-aplicar-un-boton-de-desplazamiento-hacia-arriba-en-elementor-sin-plugins","title":{"rendered":"C\u00f3mo crear y aplicar un bot\u00f3n \"Scroll to Top\" en Elementor sin plugins"},"content":{"rendered":"

A \"Ir arriba<\/strong>\" es un complemento excelente para cualquier p\u00e1gina larga. Proporciona a los usuarios una forma r\u00e1pida de volver a la parte superior, haciendo que la navegaci\u00f3n sea m\u00e1s accesible y f\u00e1cil de usar. Esta gu\u00eda le guiar\u00e1 a trav\u00e9s de la creaci\u00f3n de un bot\u00f3n \"Desplazarse al principio\" en Elementor, no necesita plugins<\/strong>y aplicarlo en todo su sitio web para mantener un aspecto coherente.<\/p>

\"\"<\/figure>

Configurar una plantilla de bot\u00f3n global en Elementor<\/h3>

Comience creando una nueva plantilla:<\/strong><\/h4>
  1. En el panel de control de WordPress, vaya a \"Plantillas<\/strong>\" > \"A\u00f1adir nuevo<\/strong>.\"<\/li><\/ol>
    \"\"<\/figure><\/div>
    1. Seleccione \"P\u00e1gina \u00fanica\"<\/strong> del men\u00fa desplegable como tipo de plantilla. P\u00f3ngale un nombre como \"Bot\u00f3n de desplazamiento hacia arriba<\/strong>“.<\/li><\/ol>
      \"\"<\/figure>
      1. Pulse \"Crear plantilla<\/strong>\" para abrir el editor de Elementor.<\/li><\/ol>
        \"\"<\/figure>
        1. Salir de la biblioteca<\/strong>: Pulse el bot\u00f3n \"X<\/strong>\" en la esquina superior derecha para cerrar la biblioteca de plantillas.<\/li><\/ol>
          \"\"<\/figure><\/div>

          A\u00f1adir y personalizar el bot\u00f3n:<\/strong><\/h4>
          1. Arrastre el \"Bot\u00f3n<\/strong>\" de la barra lateral en la plantilla.<\/li><\/ol>
            \"\"<\/figure>
            1. Cambie el texto del bot\u00f3n por \"Desplazarse al principio\" o utilice un icono de flecha hacia arriba.<\/li><\/ol>
              \"\"<\/figure>
              1. Vaya a la galer\u00eda de iconos y seleccione la flecha hacia arriba icono<\/strong>.<\/li><\/ol>
                \"\"<\/figure>
                1. Seleccione un bot\u00f3n diferente tipo<\/strong> para eliminar el texto<\/strong>.<\/li><\/ol>
                  \"\"<\/figure>
                  1. Ir al \"Estilo<\/mark><\/strong>\" y configure el color de fondo, la fuente y el radio del borde para que se ajuste al estilo de su sitio. Un bot\u00f3n redondo con un color que contraste funciona bien para mantenerlo visible.<\/li><\/ol>

                    Cambiar el estilo del bot\u00f3n<\/strong><\/h4>
                    1. Utilice esquinas redondeadas<\/strong>
                      • Ir a la Estilo<\/strong> en Elementor.<\/li>\n\n
                      • Fije el Radio del borde<\/strong> a 10% para crear un bot\u00f3n perfectamente redondo.<\/li>\n\n
                      • Modifique el Acolchado<\/strong> para ajustar el espaciado interior de un elemento. Esto define el espacio interior entre el contenido y el bordes del elemento<\/strong>.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure>
                        1. A\u00f1adir un efecto de sombra<\/strong>
                          • En el Caja Sombra<\/strong> (normalmente se encuentran en Estilo > Borde<\/strong>), a\u00f1ada una sombra sutil para crear profundidad. Utilice ajustes como<\/li>\n\n
                          • Desenfoque: 10px<\/li>\n\n
                          • Dispersi\u00f3n: 0px<\/li>\n\n
                          • Color: Elija un gris claro o un negro transparente para dar una sombra suave.<\/li><\/ul><\/li><\/ol>
                            \"\"<\/figure>
                            1. Elija una combinaci\u00f3n de colores que contraste<\/strong>
                              • 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.<\/li>\n\n
                              • Para el color del icono, aseg\u00farese de que sea blanco u otro color que destaque sobre el fondo del bot\u00f3n.<\/li><\/ul><\/li><\/ol>
                                \"\"<\/figure>
                                1. A\u00f1adir un efecto Hover<\/strong>
                                  • En el Hover<\/strong> ajustes en el Estilo<\/strong> ficha, puede hacerlo:
                                    • Cambie el color de fondo<\/strong> al pasar el rat\u00f3n a un tono m\u00e1s claro o m\u00e1s oscuro del color del bot\u00f3n.<\/li>\n\n
                                    • Animaci\u00f3n Hover<\/strong> le permite controlar la velocidad de las animaciones y transiciones.<\/li><\/ul><\/li><\/ul><\/li><\/ol>
                                      \"\"<\/figure><\/div>
                                      1. A\u00f1ada una animaci\u00f3n de pulso (opcional)<\/strong>
                                        • En el Avanzado<\/strong> vaya a CSS personalizado<\/strong> (disponible en Elementor Pro<\/strong>) y a\u00f1ada una animaci\u00f3n de pulso:<\/li>\n\n
                                        • Sustituya #yourButtonID<\/code> <\/mark>con el ID de su bot\u00f3n. Esto har\u00e1 que el bot\u00f3n crezca y se encoja sutilmente, llamando la atenci\u00f3n sobre \u00e9l.<\/li><\/ul><\/li><\/ol>
                                          @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #yourButtonID { animaci\u00f3n: pulso 2s infinito; }<\/code><\/code><\/pre>
                                          \"\"<\/figure><\/div>
                                          Este c\u00f3digo a\u00f1ade un efecto de animaci\u00f3n pulsante<\/strong> a un bot\u00f3n especificado. El bot\u00f3n se agranda suavemente y luego vuelve a su tama\u00f1o original durante 2 segundos, repiti\u00e9ndose de forma continua. Este efecto llama la atenci\u00f3n sobre el bot\u00f3n, haci\u00e9ndolo m\u00e1s perceptible para los usuarios.<\/p>