fbpx
Créer des liens dʹancrage sur un site WordPress avec Divi

Créer des ancres pour améliorer l’expérience utilisateur

Dans ce nouveau tuto WordPress Divi, je vous montre comment réaliser des liens d’ancrage (anchor links) sur votre site Divi WordPress. Créer des ancres de liens sur une page web longue est intéressant et améliore l’expérience utilisateur en facilitant la navigation. En effet, vous pouvez créer une table des matières des sujets abordés en entête, ainsi vos visiteurs pourront accéder en un clic directement à la partie, à la section qui les intéresse. De plus, cette bonne pratique améliorera votre SEO.

Dans cette vidéo, je vous montre comment créer 4 types d’ancres :
– à partir de texte
– à partir d’un bouton
– à partir d’un élément du menu
– à partir du texte ou du bouton d’une page vers la partie précise d’une autre page.

Dans ce tuto, nous utiliserons le thème Divi d’Elegant Themes et son excellent Visual Builder !

Licence Divi
Code Promo Divi Supreme
.

Définir la cible du lien d’ancrage

    Vous pouvez définir la cible du lien d’ancrage sur la section, la rangée ou le module. A vous de voir selon la précision d’affichage que vous souhaitez obtenir.
    Dans notre tutoriel, nous ciblerons une section, mais pour la rangée ou le module, la procédure est la même. Pour cela rendez-vous dans les paramètres. Pour nous ce sera ici ceux de la section. Choisir ensuite l’onglet « Avancé » puis dans « ID et classe CSS » et dans « ID CSS », entrer votre mot cible (1 seul mot). Pour nous ce sera ici « ancre1 ». Sauvegarder ensuite vos changements.

    Lien Ancrage texte

    Lien d’ancrage à partir de texte

    Ouvrir ensuite les paramètres d’un module texte par exemple. Dans l’onglet « Contenu », sélectionner les mots du texte à lier, cliquer sur le maillon du menu, puis dans le pop-up « Insert Link » dans « URL » reporter le nom de votre cible précédé d’un #. Pour nous ce sera ici #ancre1. Sauvegarder vos changements, enregistrer votre page et quitter le Visual Builder pour tester votre lien.

    Presto Player lecteur vidéo WordPress
    Lien ancrage texte

    Lien d’ancrage à partir d’un bouton

    Même procédure que précédemment sauf qu’il faut se rendre dans les paramètres du module « Bouton ». Dans l’onglet « Contenu » puis « Lien » saisir le même le mot cible précédé d’un #.

    Amelia booking plugin
    Lien ancrage bouton

     Lien d’ancrage à partir d’un élément du menu

    Pour cela, il faut se rendre dans le menu WordPress de gauche dans « Apparence > Menu » et ici dans la colonne de gauche, cliquer sur « Liens personnalisés ». Dans URL entrer le mot cible précédé d’un #. Dans notre cas ce sera toujours #ancre1

    Dans « Texte du lien » entrer le mot qui figurera dans votre menu et qui déclenchera le lien. Vous pourrez ensuite réorganiser ce lien personnalisé comme une page classique de votre menu par simple « Glisser / Déposer ».

    Lien ancrage à partir du menu
    Thinkific one month free

    Lien d’ancrage à partir de texte ou d’un bouton d’une page vers la partie précise d’une autre page

    Pour cette dernière manière de procéder, ce sera exactement pareil que pour le texte ou le bouton sauf que dans URL, il faudra renseigner l’adresse complète de la page à atteindre suivie d’un /#votre mot cible. Pour nous ce sera toujours ici /#ancre1.

    Lien ancrage d'une page vers une autre page

    Vous serez peut-être intéressé aussi par…

    Hébergements web, quels sont les différents types ?

    Hébergements web, quels sont les différents types ?

    Quels sont les différents types d’hébergements proposés pour un site Internet ?  Mon hébergement est-il adapté à mon trafic web ? Ce sont des questions de ce type que l’on se pose lorsque l’on veut créer un site Internet et le mettre en ligne.

    read more
    Installer WordPress : Où et Comment ?

    Installer WordPress : Où et Comment ?

    Ce tutoriel WordPress est destiné aux débutants qui veulent créer un site web WordPress mais qui ne savent pas vraiment par où commencer.
    Si c’est votre cas, ce tutoriel est pour vous ! Je vous explique ici où et comment installer facilement WordPress. Je vous présente o2switch  l’hébergeur français de qualité.

    read more

    Les bons plans Alpa14 😉

    👉 Divi : Le meilleur Thème et Page Builder WordPress, -10% sur votre licence ! 💗
    👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 » 💗
    👉 o2switch : L’hébergement français mutualisé de qualité (5€HT/mois en illimité + nom de domaine compris)
    👉 Hostinger : Les hébergements mutualisés, VPS et Cloud de qualité. Tarifs compétitifs. -7% avec le code « ALPA14 » 💗
    👉 Amelia : Le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -10% avec le code Promo « E96DB94C » ! 💗
    👉 Presto Player
    : Le meilleur lecteur vidéo pour votre site WordPress !
    👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
    👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
    👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
    👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
    👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
    👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
    👉 Inleed : L’hébergeur suédois performant et de qualité 

    👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
    👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
    👉 duoLogo : Réalisez un logo pro, formule gratuite
    👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
    👉 Private Internet Access
    : Un VPN de qualité, protégez votre connexion Internet

     

    👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
    Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois moins cher 👍.

    0 Comments

    Submit a Comment

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *