En esta guía vamos a ver cómo puedes crear un enlace ancla con desplazamiento a través de la plataforma FRAMEWORK360.
¿Qué es un enlace ancla desplazamiento?
Los enlaces ancla desplazamiento son enlaces, entradas, presentes en la página o dentro del menú que al ser clicados realizan un desplazamiento bajando hasta una sección específica.
Ahora vamos a ver en pocos pasos simples cómo crear tus enlaces ancla con la plataforma FRAMEWORK360.
Paso 1: Agreguemos un menú dentro de la página
Lo primero que debemos hacer será insertar un menú dentro de la página que podemos poblar con entradas que al ser clicadas harán descender la página hasta la sección que deseamos visualizar.
Por ejemplo, podríamos crear un Header, es decir, una sección que queremos repetir en todas las páginas de nuestro sitio.
Para crear nuestro Header deberíamos ir al menú principal de FRAMEWORK360 y seguir las siguientes entradas:
Contenidos > Bloques Globales
Dentro de la entrada Bloques Globales crearemos un bloque seleccionando la tipología de bloque Header como se muestra en la figura:
Bien, ahora hemos creado nuestro Header, solo nos queda agregar nuestro menú dentro del Header creado.
Primero debemos hacer clic en la opción Arrastra un contenido presente en nuestro Header.
Ahora nos aparecerá la pantalla en la que podemos elegir el bloque a insertar, nosotros elegiremos el bloque Navbar y lo arrastraremos al interior.
Una vez arrastrado el bloque Navbar vamos a seleccionar el menú, previamente creado, para insertar dentro del bloque.
Paso 2: Agreguemos las voces dentro de nuestro menú
Para agregar las voces dentro de nuestro menú deberíamos acceder a la voz Menú del menú principal de la plataforma FRAMEWORK360 y acceder al menú que tenemos en el paso anterior seleccionado dentro de la Navbar.
Bien, ahora estamos dentro del menú que queremos poblar. Ahora vamos a insertar dentro del menú nuestros enlaces Anchor.
¡IMPORTANTE!
En la creación del enlace ancla se nos solicita insertar un enlace (como se muestra en la figura), aquí debemos insertar el enlace de la sección a la que el enlace debe llevarnos, el enlace debe estar precedido por la inserción del #.
La elección del nombre que compone el enlace é a nuestro gusto, en nuestro ejemplo hemos utilizado el siguiente enlace: #sección-1.
Ten en cuenta el enlace que estás insertando ya que este enlace nos servirá nuevamente en el próximo paso!
Una vez insertados todos los enlaces ancla que necesitamos, solo nos queda guardar.
Paso 3: Conectamos el enlace ancla a la sección
Una vez creado nuestro enlace, para completar el proceso debemos asegurarnos de que al hacer clic en el enlace, la página realice un desplazamiento hasta llegar a la sección deseada.
Para hacerlo, debemos ir a la página y hacer clic en la ruedecita de la fila de la sección a la que queremos conectar nuestro enlace ancla como se muestra en la figura:
Ahora hemos entrado en el menú que nos permitirá modificar la fila que seleccionamos. Debemos ir a la sección Diseño, una vez dentro de la sección Diseño bajamos en el menú hasta Atributos donde encontraremos la opción ID Elemento. Resumiendo, deberás seguir los siguientes pasos:
Diseño > Atributos > ID Elemento
A este punto debemos insertar dentro de la opción ID Elemento el mismo enlace que en el paso anterior hemos insertado para la creación del enlace Anchor, también en este caso el enlace debe estar precedido por el #. En nuestro ejemplo recordamos que el enlace era el siguiente: #sección-1.
¡Ahora el juego ésta hecho!
Hemos creado nuestro enlace de anclaje scroll, por lo tanto, cada vez que hacemos clic en el enlace presente en el encabezado, la página realizará un scroll hasta la sección que deseamos.
