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 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.
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.
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.
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.
