⬆ Cómo Crear un BÓTON SCROLL hacia ARRIBA en ELEMENTOR PRO

Поділитися
Вставка
  • Опубліковано 21 жов 2024

КОМЕНТАРІ • 43

  • @berthortiz
    @berthortiz  Рік тому +8

    ----- CSS -----
    selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
    }
    body.show selector{
    opacity: 1;
    }
    ---- JAVASCRIPT -----
    var offset = 400
    $(window).on('load scroll', function(){

    if( $(window).scrollTop() > offset ){
    $('body').addClass('show')
    }else{
    $('body').removeClass('show')
    }
    })

  • @_brahan
    @_brahan Рік тому +1

    Gracias, me funciona perfectamente

  • @alimenadia9281
    @alimenadia9281 11 місяців тому +1

    muchas gracias

    • @berthortiz
      @berthortiz  11 місяців тому

      Gracias por comentar

  • @sherlwinc
    @sherlwinc Рік тому +1

    Buen video!!!!.

  • @veronika.cvergaran.1181
    @veronika.cvergaran.1181 Рік тому +2

    Esta muy bien pero tendrias que copiarlo y pegarlo en todas las paginas, no se puede poner en el footer?

    • @berthortiz
      @berthortiz  Рік тому

      no lo he intentado. pero en teoría, si se puede. no se me había ocurrido.

  • @julioignacioberriossmok6311
    @julioignacioberriossmok6311 8 місяців тому +1

    Hola, está super bueno, el punto es que pasa si tu menú de cabecera es sticky osea que siempre está presente el menu de navegación..

    • @berthortiz
      @berthortiz  8 місяців тому

      Te causa algún error? Si lo pones abajo no creo que cause error . Aunque si te falla dime y lo solucionamos.

  • @soyManuelh
    @soyManuelh Рік тому +1

    Muy buen video, continua con los tutoriales

  • @LeoCubaYt
    @LeoCubaYt Рік тому +1

    Genial bro! los tutos estan super bien hechos. Una vez llegues al 1k tu crecimiento será imparable!!! Sigue así!!!

    • @berthortiz
      @berthortiz  Рік тому

      Gracias por tu apoyó y tu suscripción amigo.👍

  • @jhonatancolorado234
    @jhonatancolorado234 6 місяців тому +1

    gracias amigo, muy amable, pero por que el boton afecta a los botones que quedan por debajo de el, no permite que se les de clic en especian en la vista de celular, agradezco tu ayuda

    • @berthortiz
      @berthortiz  6 місяців тому

      En móvil y PC Vete a personalizar y en ancho completo haz que solo mida lo apropiado y no ocupe el 100% de ancho. Si el contenedor ocupa el 100% no te dejará clickear por qué el contenedor está encima de todo y parece que no por qué es transparente, intenta ponle un color solo para probar cuánto ocupa realmente. Coméntame si es eso

  • @RuizSo1
    @RuizSo1 Рік тому +1

    Gracias por eso

  • @RemeDiaz-er6rr
    @RemeDiaz-er6rr 5 місяців тому

    Hola; Gracias por tu video, tengo una duda sobre como establecer un efecto donde a simple vista se vea sólo la cabeza de la fecha pero cuando ponga el cursor encima se ponga en forma de fecha hacia arriba. ¿sabrías que efecto, animación o CSS debo establecer y cómo puedo hacer para que me aparezca en la vista móvil dado que no me aparece? gracias.

    • @berthortiz
      @berthortiz  5 місяців тому

      En móvil tienes que mover la compensación hasta que aparezca, ahí en avanzado, lo más seguro es que se salió de la parte visible, pasa mucho!. Para la animación revisa en la parte de transformación ahí podrías lograr ese efecto. Juega un poco con las opciones hasta lograr el efecto que buscas, saludos.

    • @andreagonzalez9465
      @andreagonzalez9465 5 місяців тому

      Gracias por tu respuesta y por la información, pero todavía no encuentro la forma de que me haga dicho efecto. Por otra parte, tampoco me lleva arriba de todo de la página a pesar de que le tengo el ancla en el encabezado. ¿sabes el motivo?.

  • @ErnestoFrias
    @ErnestoFrias 5 місяців тому +1

    Buena explicación. Me pasa que el botón en vez de subir arriba, sube a pequeños pasos. Sabés cómo se soluciona?

    • @berthortiz
      @berthortiz  5 місяців тому

      La verdad no. Pero prueba hacerlo en otros dispositivo o afuera del navegador que usas habitualmente. Aveces es cosas del navegador. Si quieres manda mensaje al grupo de telegram y vemos.

    • @berthortiz
      @berthortiz  5 місяців тому

      Otra cosa que se me ocurre es que puede ser que haiga otro anclaje que está interfiriendo.

    • @ErnestoFrias
      @ErnestoFrias 5 місяців тому

      @@berthortiz muchas gracias. Voy a revisar bien tema anclajes. Me funcionó bien en varias webs, y en las últimas comenzó a dar ese error.

  • @danielgaitan7018
    @danielgaitan7018 Рік тому +1

    muy buen vídeo amigo ¿sabes como quitó ese botón de una plantilla determinada? no me sale ninguna opción en elementor pro para cambiarle el color. Muchas gracias.

    • @josegabrielpolancoramos4310
      @josegabrielpolancoramos4310 Рік тому +1

      Tenía el mismo problema, estaba utilizando el tema astra el cual trae por defecto el scroll azul, lo quería modificar y pude hacerlo de la siguiente manera: 1ro, en wordpress ir al tema (en mi caso astra) y darle clic en personalizar, luego en la barra lateral darle a la opción "global" y por último en "scroll al inicio".
      Ya después te aparece todas las opciones para su modicación.

    • @danielgaitan7018
      @danielgaitan7018 Рік тому

      @@josegabrielpolancoramos4310 si ya pude amigos gracias

  • @YouGraphs
    @YouGraphs 7 місяців тому

    Hola tengo un problema, y es que cuando pulso el botón me lleva correctamente hacia arriba, pero en el dominio se añade el id CSS que estoy utilizando, hay alguna forma de ocultarlo?? Gracias

  • @josephsilva35
    @josephsilva35 2 роки тому +1

    Excelente explicación, pero como podría hacer para hacer este botón de forma global a todas las páginas y entradas?

    • @berthortiz
      @berthortiz  2 роки тому

      Hola! Puedes hacerlo con los Pop Up y pidiendo en las condiciones que lo muestre en toda la web, incluso en las entradas o puedes instalar el plugins (Social Pug) en caso de que no tengas Elementor Pro. Saludos. 👋

  • @juanpabloangel5499
    @juanpabloangel5499 5 місяців тому

    Brother como hago para quitarle el zoom que se genera al pasar el mouse en los productos con el tema astra ayuda por fa

    • @berthortiz
      @berthortiz  5 місяців тому

      Normalmente eso está en la parte de personalización, busca las opciones del los productos, debería estar por ahí. Ahorita no sabría decirte por qué no me lo sé de memoria. También hay que ver si el tema permite desactivarlo.

  • @nicxs131
    @nicxs131 10 місяців тому

    Implementé todo tal cual lo mostras en el video pero no me funciona para tablet y mobile. Sin embargo, para desktiop si funciona. ¿por qué puede ser?

    • @berthortiz
      @berthortiz  10 місяців тому +1

      hola, cuando esté en movil y en tablet pon en compensación "0" o simplemente elimina el numero que tenga, dejalo en blanco he intenta posicionarlo, aumentando o disminuyendo los pixeles en negativo, primero en table y luego en mobil. espero te sirva, sino , manda mensaje al grupo de telegram, link en la descrip.

    • @nicxs131
      @nicxs131 10 місяців тому +1

      Muchas gracias @@berthortiz. Muy buen video

    • @berthortiz
      @berthortiz  10 місяців тому

      @@nicxs131 te funcionó?

  • @albarocastillo8885
    @albarocastillo8885 Рік тому +1

    Quien me puede ayudar con el código CSS, el link ya caducó. gracias

    • @berthortiz
      @berthortiz  Рік тому +2

      Hola.
      ----- CSS -----
      selector{
      opacity: 0;
      transition: all 0.3s ease-in-out;
      }
      body.show selector{
      opacity: 1;
      }
      ---- JAVASCRIPT -----
      var offset = 400
      $(window).on('load scroll', function(){
      if( $(window).scrollTop() > offset ){
      $('body').addClass('show')
      }else{
      $('body').removeClass('show')
      }
      })

    • @lissettetalhouk4436
      @lissettetalhouk4436 Рік тому +1

      @@berthortiz Hola!!! sabes no me funciona el link ni tampoco el css, me ayudarias ? gracias

    • @berthortiz
      @berthortiz  Рік тому

      @@lissettetalhouk4436 revisé el código y si me funciona. no se que podría estar pasando. si quieres mándame capturas por correo o instagram y vemos como lo resolvemos.

  • @alexmartinez745
    @alexmartinez745 9 місяців тому +1

    no funciona el link para el CSS

    • @berthortiz
      @berthortiz  9 місяців тому

      ----- CSS -----
      selector{
      opacity: 0;
      transition: all 0.3s ease-in-out;
      }
      body.show selector{
      opacity: 1;
      }
      ---- JAVASCRIPT -----
      var offset = 400
      $(window).on('load scroll', function(){

      if( $(window).scrollTop() > offset ){
      $('body').addClass('show')
      }else{
      $('body').removeClass('show')
      }
      })

    • @berthortiz
      @berthortiz  9 місяців тому

      acá te dejo el código