Découvrez les bons plans & les réductions Alpa14

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

Alpa14 les tutoriels faciles !

Catégories

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é par les articles suivants :

    Tutoriel Divi : Inverser les colonnes selon la vue

    Tutoriel Divi : Inverser les colonnes selon la vue

    En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
    On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

    lire plus
    Un menu hamburger ? en vue ordinateur : site WordPress Divi

    Un menu hamburger ? en vue ordinateur : site WordPress Divi

    Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

    lire plus
    Créer un site WordPress parfaitement responsive

    Créer un site WordPress parfaitement responsive

    Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.

    lire plus