5 choses sympas que vous pouvez faire dans Divi avec des liens d'ancrage

Les liens d'ancrage peuvent améliorer la navigation et aider à organiser votre contenu, en particulier sur un site Web avec un contenu long. L'un des autres principaux avantages de l'utilisation de liens d'ancrage autres que la navigation est le fait qu'ils sont géniaux pour le référencement. Bien que le concept d'utilisation de liens d'ancrage soit très simple, il peut être difficile de savoir par où commencer. C'est en fait l'une des premières choses que j'ai recherchées lorsque j'ai commencé à développer des sites Web WordPress.

Cet article vous montre 5 choses sympas que vous pouvez faire dans Divi avec des liens d'ancrage. Pour ces exemples, il vous suffit de Divi et d'une envie d'apprendre.

Allons-y!

Vous apprendrez à :

1. Faites défiler et ouvrez une bascule avec un lien d'ancrage dans Divi
2. Créer un menu de navigation d'une page
3. Aller à une section de page à partir d'une autre page
4. Utiliser la navigation par points Divi
5. Ajouter des liens d'ancrage à vos en-têtes

5 choses sympas que vous pouvez faire dans Divi avec des liens d'ancrage

Abonnez-vous à notre chaîne Youtube

Faites défiler et ouvrez une bascule avec un lien d'ancrage dans Divi

Les bascules sont l'un de ces éléments qui peuvent améliorer l'expérience utilisateur. Appelez-moi paresseux (j'utiliserais le mot efficace) mais plus il m'est facile d'obtenir mes informations, mieux c'est. Je suis un grand fan des bascules pour certains types de contenu.

L'une des meilleures utilisations que j'ai vues pour les bascules concerne les pages FAQ. Ils fonctionnent très bien pour révéler de petites informations sur lesquelles l'utilisateur souhaite se concentrer. Cela ne prendra qu'une minute et quelques lignes de JavaScript. Vous pouvez également utiliser une variante de cette méthode pour ouvrir des onglets ou des accordéons et bien que cela puisse sembler difficile, ce n'est vraiment pas trop complexe.

Tout d'abord, créez une nouvelle page et déployez le générateur visuel. Sélectionnez ensuite l'option « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle Charger à partir de la bibliothèque, recherchez la présentation de la page FAQ du comptable en tapant « faq » dans la barre de recherche. Cliquez ensuite sur la mise en page et sur l'aperçu qui s'affiche, cliquez sur le bouton Utiliser cette mise en page pour le déployer sur votre page.

Vous êtes maintenant prêt à ajouter votre fonctionnalité de lien d'ancrage. Pour cet exemple, je vais utiliser le bouton dans la section d'en-tête supérieure comme lien d'ancrage afin que, lorsque vous cliquez dessus, la page défile vers une bascule spécifique qui s'ouvre simultanément automatiquement.

Pour ce faire, ouvrez d'abord les paramètres du bouton et ajoutez l'URL du lien suivant pour votre bouton :

URL du lien du bouton : #toggle3

J'ai donné à ce lien d'ancrage l'identifiant « toggle3 » pour m'aider à me souvenir que je veux créer un lien vers la troisième bascule sur la page. Ce nom d'identifiant sera en corrélation avec l'identifiant CSS de la bascule que nous ajouterons plus tard afin que le bouton sache vers quelle bascule faire défiler.

Ajoutez ensuite une classe CSS unique au module de boutons :

Classe CSS : basculement ouvert

Ensuite, enregistrez vos paramètres.

Ce nom de classe permet de vous rappeler l'action de l'ouverture à bascule lorsque vous cliquez sur le bouton. Nous utiliserons cette classe dans notre jqeury personnalisé pour obtenir rapidement la fonctionnalité souhaitée.

Faites ensuite défiler la page jusqu'à la ligne contenant les deux colonnes de modules à bascule qui sont utilisés pour les FAQ. Ouvrez le réglage du troisième module à bascule dans la première colonne. C'est le module vers lequel nous voulons faire défiler et ouvrir lorsque vous cliquez sur le bouton (ou le lien d'ancrage).

Sous l'onglet Avancé, ajoutez l'ID CSS suivant :

Identifiant CSS : toggle3

Il est important que cela corresponde exactement à l'URL du lien du bouton utilisée précédemment. La seule différence ici est que vous devez omettre le « # ».

La dernière étape consiste à ajouter du code personnalisé au corps de notre page. Pour ce faire, accédez aux options du thème Divi, ouvrez l'onglet Intégration, puis collez ce qui suit dans la section du corps, comme indiqué dans le GIF ci-dessous.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

N'oubliez pas d'envelopper le code dans la balise de script appropriée.

Vous pouvez maintenant tester votre page pour voir si cela fonctionne.

Pour comprendre un peu ce que fait ce code. Regardons de plus près. Voici à nouveau l'extrait :

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Dans le code, le sélecteur "a.open-toggle" fait référence au bouton avec notre classe personnalisée. Le sélecteur « #toggle3.et_pb_toggle_2 .et_pb_toggle_title » fait référence au titre de la bascule avec l'id « toggle3 » et la classe « et_pb_toggle_2 ».

La classe « et_pb_toggle_2 » est en fait la classe associée à la troisième bascule. C'est parce que Divi donne au premier bascule la classe « et-pb_toggle_0 », le second bascule « et-pb_toggle_1 », et ainsi de suite.

Donc, si vous voulez savoir quelle est la classe pour une bascule particulière sur votre page, vous pouvez simplement compter à partir de 0 en commençant par la première bascule sur la page et continuer vers le bas. Ou vous pouvez toujours simplement inspecter le code html pour trouver la classe de cette façon.

Ceci est important à savoir afin que vous puissiez mettre à jour votre code en conséquence. Par exemple, si je voulais que mon bouton ouvre la deuxième bascule sur la page, je remplacerais « #toggle3.et_pb_toggle_2 .et_pb_toggle_title » par « #toggle3.et_pb_toggle_1 .et_pb_toggle_title ».

Cet extrait de code est une variante du concept suivant. J'ai essayé de rester aussi simple que possible.

Cette technique cool fonctionnerait également pour les tablatures et les accordéons. L'astuce consiste à identifier les bonnes classes CSS pour l'élément ou l'onglet accordéon afin que vous puissiez l'utiliser dans le code.

Créer un menu de navigation d'une page

Ce type de conception de menu est populaire pour les sites d'une page. Il peut être utile de créer des liens dans le menu pour passer d'une section à l'autre sur votre page. Ceci est particulièrement utile si vous créez un site d'une page ou une page de destination. Vous pouvez consulter la documentation sur la façon de créer des sites Web d'une page avec Divi pour plus d'informations sur ce processus.

Voici un bref aperçu de la façon de procéder.

Cela fonctionnera pour toute mise en page prédéfinie, mais pour cet exemple, je vais utiliser la mise en page de la page d'accueil Web Freelancer. Créez une nouvelle page, déployez le générateur visuel, sélectionnez « Choisir une mise en page prédéfinie », puis déployez la mise en page de la page d'accueil Freelancer sur votre page.

Vous devez maintenant ajouter des identifiants CSS à chaque section vers laquelle vous souhaitez créer un lien (ou faire défiler). Trouvez la section intitulée « Mes services ». Ouvrez les paramètres de la section, cliquez sur l'onglet Avancé et ajoutez l'ID CSS suivant :

Identifiant CSS : services

Ensuite, recherchez la section « travail en vedette » et attribuez à cette section un identifiant CSS comme suit :

Identifiant CSS : travail

Et ajoutez également l'ID CSS suivant à la section « À propos de nous » :

Identifiant CSS : à propos de

Avec ces trois sections correctement configurées avec leurs identifiants CSS uniques, nous pouvons savoir créer nos liens d'ancrage de menu.

Depuis le tableau de bord, accédez à Apparence > Menus et créez un nouveau menu principal . Créez ensuite trois liens personnalisés avec l'URL et le texte du lien suivants :

Lien personnalisé 1
URL : #services
Texte du lien : Services

Lien personnalisé 2
URL : #travail
Texte du lien : Travail

Lien personnalisé 3
URL : #à propos
Texte du lien : À propos

N'oubliez pas de sélectionner définir votre emplacement d'affichage sur le menu principal. Ensuite, enregistrez votre menu.

Maintenant, lorsque vous visitez votre page, vous pouvez l'essayer. Vous remarquerez peut-être que le défilement est fluide. En effet, le thème Divi ajoute automatiquement un défilement fluide – cette fonctionnalité a été ajoutée dans Divi version 2.4.

Pour plus d'inspiration sur la création de sites Web de style tueur à une page, consultez ces articles :

• Comment créer une barre latérale fixe réactive avec des liens d'ancrage
• Comment créer des sections plein écran avec des liens de défilement haut et bas avec Divi
• Comment créer des liens actifs sur le défilement pour les sites Web Divi d'une page

Aller à une section de page à partir d'une autre page

Nous pouvons utiliser l'exemple ci-dessus pour le démontrer. Étant donné que nous avons ajouté un identifiant CSS à trois sections de la page (services, travail, à propos), non seulement nous pouvons accéder à ces sections à l'aide de nos liens d'ancrage de menu, mais nous pouvons également accéder à ces sections à partir d'une page complètement différente.

Tout ce que vous avez à faire est d'utiliser l'URL du lien d'ancrage lors de la création d'un lien sur une autre page. Si vous vouliez mettre un lien vers la section des services avec l'ID « services », cela ressemblerait à quelque chose comme, www.votredomaine.com/page/#services .

Voici un exemple de la façon dont la page se chargera et défilera jusqu'à la section « Mes services » lors du lien vers cette section à partir d'une autre page.

Cela fonctionne très bien pour de nombreux appels à l'action différents (c'est-à-dire en savoir plus, obtenir Divi, voter pour moi !, etc.) auxquels vous voudrez peut-être accéder à partir de différentes pages de votre site.

Utiliser la navigation par points Divi

Techniquement, ce sont des liens d'ancrage intégrés. Vous n'aurez pas besoin d'ajouter vos propres identifiants de section CSS. La fonction de navigation par points crée automatiquement des liens d'ancrage à partir de vos sections. Pour activer la navigation par points pour votre page, réglez simplement l'option de navigation par points sur « ON » dans les paramètres de la page Divi en haut à droite de l'écran lors de la modification de votre page. Une fois que vous avez activé la navigation par points, Divi ajoute automatiquement un menu transparent sur le côté de votre page. Chaque point défile vers les sections de votre page lorsque vous cliquez dessus.

Pour plus d'informations, il existe un excellent article sur la façon d'ajouter des étiquettes à votre navigation par points.

Ajouter des liens d'ancrage à vos en-têtes

L'ajout de liens d'ancrage à vos titres est toujours une bonne idée. C'est un excellent moyen d'indexer des pages plus longues avec beaucoup de contenu, vous permettant de naviguer facilement vers chaque rubrique d'une même page ou de créer des liens vers ces rubriques à partir d'autres pages de votre site Web. Il aide également les moteurs de recherche à explorer votre site.

Pour ajouter un identifiant CSS à vos en-têtes à l'aide du Divi Builder, ouvrez le module contenant votre texte d'en-tête. Assurez-vous que l'onglet texte est ouvert. Recherchez la balise d'en-tête (h1, h2, h3, etc…), puis entrez un identifiant entre les crochets de la balise d'en-tête de début. Voici un exemple de rubrique h3 avec l'id « webdesign » :

<h3 id="webdesign">Website Design</h3>

Maintenant, je peux créer un lien vers cet en-tête de n'importe où tant que j'utilise l'URL de lien d'ancrage correcte. Ce qui pour cet exemple devrait ressembler à ceci :

www.votredomaine.com/page/#webdesign

Cela sera également utile pour les pages ou les publications qui n'utilisent pas le constructeur Divi. Pour ajouter des liens d'ancrage à vos en-têtes pour ces pages ou articles, ouvrez l' onglet Texte dans l'éditeur de texte WordPress. Localisez simplement l'en-tête de votre choix et ajoutez l'identifiant à l'intérieur de la balise d'en-tête, comme indiqué ci-dessous.

C'est exactement ce que j'ai fait pour ce post. Les liens de section en haut de cet article servent de belle table des matières qui renvoie aux différentes rubriques de l'article.

Des trucs assez cool.

Emballer

Les liens d'ancrage ont quelques grandes utilisations pratiques, mais ne devenez pas trop fou avec eux car vous devez toujours d'abord considérer votre public et vos objectifs. N'oubliez pas qu'une bonne conception concerne la convivialité et la fonction. Dans certains cas, les liens d'ancrage peuvent être très utiles. Mais dans d'autres, cela signifie simplement que les utilisateurs vont et viennent sur les sections de parallaxe et finissent par se perdre. J'espère que vous avez pu obtenir des conseils utiles de cet article.

Avez-vous des conseils ou des questions sur les liens d'ancrage? Faites-nous part de vos expériences dans la section commentaires ci-dessous.