Anthony
NICOLAIEFF

Comment mettre une ancre dans Elementor ?

Tuto : Comment mettre une ancre Elementor
SOMMAIRE

Vous possédez un site web one page créé avec le page builder Elementor ? Vous souhaitez ajouter une ancre pour diriger vos visiteurs sur la bonne rubrique de votre page ?

Je vous montre comment ajouter un lien d’ancrage rapidement sur votre site WordPress depuis un menu et depuis un bouton Elementor.

ETAPE 1 : Ajouter un identifiant à votre contenu cible

Pour connaitre vers quelle partie de votre page vous souhaitez amener votre visiteur quand il cliquera sur le lien d’ancrage (soit sur un bouton, soit depuis le menu), il est important de déposer un identifiant sur le contenu cible.

Pour cela, vous avez 2 possibilités :

Ajouter un "ID de CSS" sur votre contenu cible

Pour cela, cliquez sur votre contenu (section, colonne, widget) de destination. 

Rendez-vous dans l’onglet « Avancé » puis saisissez un identifiant dans le champ « ID de CSS ». Attention, il s’agit d’une information technique/informatique, les accents et les espaces ne sont pas autorisés.

Exemple d’ID CSS pour votre ancre HTML : nosservices ou nos-services

Conservez bien ce que vous avez saisi dans ce champ car vous en aurez besoin plus tard, au moment de paramétrer le menu ou le bouton !

Ajouter un ID CSS pour créer une ancre avec Elementor
Modifier Section > Avancé > ID de CSS

Ajouter le widget "Ancre de Menu" sur votre contenu cible

La deuxième solution pour ajouter un identifiant sur votre contenu de destination est de placer le widget « Ancre de Menu » juste avant votre section cible.

Saisissez un identifiant avec les mêmes contraintes techniques expliquées plus haut.

Ajouter une ancre de menu dans une page Elementor
Ancre de Menu > ajouter un identifiant

ETAPE 2 : Ajouter un lien d'ancrage avec Elementor

Depuis votre menu

Généralement utilisé pour un site one page, les ancres se trouvant sur un menu permettent de rediriger les visiteurs vers des parties d’une page WordPress :

Exemple d’un menu One page : Nos services, Nos réalisations, A propos, Contact

Retrouvez le paramétrage de votre menu depuis l’administration WordPress.
Allez dans « Apparence » > « Menus ».

Au lieu de mettre une page ou un article déjà publié, choisissez l’option « Liens personnalisés ». Dans le champ URL, reportez le nom de votre ancre WordPress en ajoutant un « # » devant.

Exemple : Ajoutez « #nos-services » dans le champ URL puis entrez « Nos Services » dans « Texte du lien ». Ce dernier paramétrage sera visible sur votre menu. Enregistrez votre menu et ajoutez-le dans votre header (en-tête) si cela n’est pas encore le cas.

Ajouter un lien d'ancrage sur une Menu WordPress
Apparence > Menus > Liens personnalisés

Depuis un bouton Elementor

Cette solution est encore plus rapide !

Ajoutez votre « Bouton » sur la page puis en le paramétrant :

Dans l’onglet « Contenu », saisissez votre identifiant #nos-services dans le champ « Lien » et c’est fini ! 

Mettez à jour, rendez-vous côté visiteur pour tester votre lien qui redirige à présent vers une partie interne de votre page Elementor.

Ajouter un lien sur un bouton Elementor vers une section interne
Bouton > Onglet Contenu > Lien > Ajout de l'ancre avec le # devant

Conseil Bonus

En utilisant WordPress, nous allons plus vite pour créer un site et nous n'avons pas besoin de connaissances en codage informatique. Pourtant, Il est important de connaitre les bases du HTML et CSS pour vous sortir de certaines situations.

Par exemple, vous avec une très bonne explication du code pour réaliser une ancre en HTML.

On peut donc très bien utiliser le widget "HTML" d'Elementor pour créer une ancre pour faire des liens à l'intérieur d'une page.

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.