Dans ce guide, nous allons voir comment vous pouvez créer un lien d'ancre avec défilement via la plateforme FRAMEWORK360.
Qu'est-ce qu'un lien d'ancre défilant ?
Les liens d'ancre défilants sont des liens, des éléments, présents sur la page ou dans le menu qui, lorsqu'ils sont cliqués, effectuent un défilement vers une section spécifique.
Maintenant, voyons en quelques étapes simples comment créer vos liens d'ancre avec la plateforme FRAMEWORK360.
Étape 1 : Ajoutons un menu à l'intérieur de la page
La première chose à faire sera d'insérer un menu à l'intérieur de la page que nous pouvons peupler avec des éléments qui, lorsqu'ils sont cliqués, feront descendre la page jusqu'à la section que nous souhaitons afficher.
Par exemple, nous pourrions créer un en-tête, c'est-à-dire une section que nous voulons répéter sur toutes les pages de notre site.
Pour créer notre en-tête, nous devrons nous rendre dans le menu principal de FRAMEWORK360 et aller aux éléments suivants :
Contenus > Blocs Globaux
À l’intérieur de la rubrique Blocs Globaux , nous allons créer un bloc en sélectionnant le type de bloc Header comme montré sur la figure :
Bien, nous avons maintenant créé notre Header, il ne nous reste plus qu'à ajouter notre menu à l’intérieur du Header créé.
Pour commencer, nous devrions cliquer sur la rubrique Faites glisser un contenu présente dans notre Header.
Maintenant, l’écran apparaîtra où nous pouvons choisir le bloc à insérer, nous choisirons le bloc Navbar et nous le ferons glisser à l’intérieur.
Une fois le bloc Navbar glissé, nous sélectionnerons le menu, précédemment créé, à insérer à l’intérieur du bloc.
Étape 2 : Ajoutons les éléments dans notre menu
Pour ajouter les éléments dans notre menu, nous devrions accéder à l'élément Menu du menu principal de la plateforme FRAMEWORK360 et aller accéder au menu que nous avons sélectionné à l'étape précédente dans la Navbar.
Bien, maintenant nous sommes dans le menu que nous voulons peupler. Nous allons maintenant insérer nos liens d'ancrage dans le menu.
IMPORTANT !
Lors de la création du lien d'ancrage, il nous est demandé d'insérer un lien (comme montré sur la figure), ici nous devrions insérer le lien de la section vers laquelle le lien doit nous renvoyer, le lien doit être précédé de l'insertion du #.
Le choix du nom qui compose le lien est à notre convenance, dans notre exemple nous avons utilisé le lien suivant : #section-1.
Garde à l'esprit le lien que tu es en train d'insérer car ce lien nous sera utile pour l'étape suivante !
Une fois que nous avons inséré tous les liens d'ancre dont nous avons besoin, il ne nous reste plus qu'à enregistrer.
Étape 3 : Connectons le lien d’ancre à la section
Une fois notre lien créé, pour compléter le processus, nous devons nous assurer que lorsque l'on clique sur le lien, la page effectue un défilement jusqu'à arriver à la section souhaitée.
Pour ce faire, nous devons nous rendre sur la page et cliquer sur la petite roue de la ligne de la section à laquelle nous voulons connecter notre lien d'ancre comme montré dans l'image :
Maintenant, nous sommes entrés dans le menu qui nous permettra de modifier la ligne que nous avons sélectionnée. Nous devrions aller dans la section Design, une fois dans la section Design descendons dans le menu jusqu'à Attributs d'où nous trouverons l'élément ID Élément. En résumé, vous devrez suivre les étapes suivantes :
Design > Attributs > ID Élément
À ce stade, nous devons insérer à l'intérieur de l'élément ID Élément le même lien que dans l'étape précédente nous avons inséré pour la création du lien d'ancrage, encore une fois le lien doit être précédé par le #. Dans notre exemple, rappelons-nous que le lien était le suivant : #section-1.
Maintenant le jeu est fait!
Nous avons créé notre lien d'ancrage défilement, donc, chaque fois que nous cliquons sur le lien présent dans l'en-tête, la page effectuera un défilement jusqu'à la section souhaitée.
