Cómo permitir que los usuarios desplacen la página al bloque especificado

Cómo funciona

Si desea llamar la atención de los usuarios sobre un bloque concreto de su sitio web, puede establecer el desplazamiento automático a este bloque mediante un código HTML personalizado. Puede utilizar una solución existente o añadir su propio código.

Cómo conseguirlo

Utilizar una solución existente

1. Abra su proyecto en Cuenta del editorr.
2. En la barra lateral haga clic en Site Builder.
3. Haga clic en Open Site Builder.
4. Añada el componente Button al bloque donde debe comenzar el desplazamiento. Cambie el texto del botón.
5. Establezca el tipo de componente como Link e inserte cualquier enlace en el campo.
6. Inserte el siguiente código en el bloque Custom code:

<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

7. Modifique los siguientes parámetros:
   • scrollBlock - el nombre de la clase CSS del bloque que contiene el botón de desplazamiento. Las opciones posibles son:
     • .block--header (el bloque Header )
     • .block--hero (el bloque Call-to-action )
     • .block--packs (el bloque Packs )
   • scrollBlockNumber - el número de secuencia del bloque que contiene el botón de desplazamiento. El valor mínimo es 0.
   • scrollButtonNumber - el número de secuencia del botón de desplazamiento. El valor mínimo es 0.
   • scrollToBlockName - el nombre de la clase CSS del bloque hacia el cual se debe desplazar la página. Las opciones posibles son:
     • .block--header (el bloque Header )
     • .block--hero (el bloque Call-to-action )
     • .block--html (el bloque Custom code )
     • .block--packs (el bloque Packs )
     • .block--description (el bloque Description )
     • .block--gallery (el bloque Gallery )
     • .block--requirements (el bloque System requirements )
     • .block--faq (el bloque FAQs )
     • .block--embed (el bloque Social media widgets )
     • .block--news (el bloque News )
     • .block--footer (el bloque Footer )
   • scrollToBlockNumber - el número de secuencia del bloque hacia el cual se debe desplazar la página. El valor mínimo es 0.

8. Haga clic en Preview para ver sus cambios.

Vea el tutorial en vídeo para seguir estas instrucciones:

Agregar su propio código

1. En Builder, haga clic en Add block y seleccione Custom code.

2. Inserte su propio código en el bloque.

Enlaces útiles