Elementor: comment créer un lien sur une même page ?

Vous êtes ici:
< Tout sujet

C’est très simple ! Mais ce n’est pas intuitif.

Elementor mon cher Watson !

Sous Elementor, une page est composée d’élements: un titre, une image, un bouton ou un éditeur de texte, …

Eléments principaux d’Elementor

Pour bien comprendre, prenons l’exemple suivant. Soit une page composée d’un bouton en début de cette page, et d’une image bien plus loin dans cette même page. On désire accéder à l’image lorsqu’il y aura un clic sur le bouton, c’est-à-dire qu’un clic sur le bouton va automatiquement faire dérouler la page jusqu’à arriver à l’image cible. Voici comment paramétrer tout ça.

Paramétrage de l’image (élément cible)

Sélectionnez l’élément cible (ici dans l’exemple, c’est l’image), puis activer sa modification. Pour modifier, cliquez sur le petit stylo, dans le coin supérieur droit de l’élément:

Puis, cliquez sur Avancé. Dans le champ ID de CSS, vous allez définir un nom de lien interne. Dans l’exemple ci-dessous, le nom de lien interne est: Mon_lien_interne.

ID de CSS

Paramétrage du bouton (élément source)

Il ne reste plus qu’à renseigner ce lien interne au niveau du bouton. Pour cela, accédez à sa modification en cliquant sur le petit stylo, dans le coin supérieur droit de l’élément:

Puis dans le champ Lien en section Contenu, inscrivez le nom de votre lien interne précédé du symbole # (Atl Gr + 3): #Mon_lien_interne.

Lien

Pour finir

À présent, si vous cliquez sur le bouton (élément source), la page va défiler toute seule jusqu’à l’image (élément cible).

Cette manipulation peut être réalisée à partir de n’importe quel type d’éléments au sein d’une même page. Un clic sur l’élément source déroulera la page jusqu’à l’affichage de l’élément cible.

ParamétrageChampsContenu du champs
sourcesection Contenu: Lien#Mon_lien_interne
ciblesection Avancé: ID de CSSMon_lien_interne
Sommaire