Comment créer une table des matières cliquable pour un article de blog avec le bloc de mise en page Divi
Publié: 2020-03-14L'ajout d'une table des matières cliquable à un article de blog est un excellent moyen d'améliorer l'expérience utilisateur. Dans de nombreux cas, la table des matières d'un article de blog utilise des liens d'ancrage pour aider les utilisateurs à naviguer dans le contenu. Et, une table des matières (avec des liens d'ancrage) est vraiment simple à créer en utilisant du HTML de base. Cependant, ajouter un design personnalisé/CSS pour le personnaliser peut être un défi. C'est là que le Divi Layout Block est utile.
Dans ce didacticiel, nous allons concevoir une table des matières cliquable pour un seul article de blog (à Gutenburg) qui utilise des liens d'ancrage pour amener les utilisateurs vers des en-têtes désignés tout au long de l'article. Pour ce faire, nous utiliserons le bloc Divi Layout pour créer la table des matières avec tous les puissants outils de conception du constructeur Divi à notre disposition.
Commençons!
Aperçu
Téléchargez GRATUITEMENT le bloc de mise en page réutilisable de la table des matières
Pour mettre la main sur le bloc de mise en page Table des matières de ce tutoriel, vous devrez d'abord les télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Comment utiliser le téléchargement pour importer ce bloc de mise en page sur votre site
Pour importer ces blocs de disposition d'images Divi réutilisables sur votre site, vous devez d'abord décompresser le fichier de téléchargement. Vous y trouverez les trois fichiers JSON que vous devrez importer sur votre site.
Allez éditer un article en utilisant l'éditeur par défaut (Gutenberg). Ouvrez le menu « Plus d'outils et d'options » en haut à droite de la page et sélectionnez « Gérer tous les blocs réutilisables ».
Cliquez ensuite sur le bouton Importer depuis le JSON. Choisissez l'un des fichiers JSON dans le dossier de téléchargement et cliquez sur le bouton d'importation.
Une fois cela fait, ajoutez un nouveau bloc dans Gutenberg. Nous pourrons trouver les blocs de mise en page réutilisables importés sous la bascule d'option Réutilisable. Cliquez simplement sur celui nommé "Table des matières" pour l'ajouter à votre message.
C'est ça!
Passons au tutoriel, voulez-vous ?
Ce dont nous avons besoin pour commencer
Pour commencer, nous devrons effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez un nouveau message dans WordPress et utilisez l'éditeur par défaut (Gutenberg) pour ajouter du contenu fictif (titre, en-têtes, paragraphes, image vedette, etc.). Assurez-vous de créer au moins trois blocs de titre avec du contenu sous chacun. Étant donné que nous ajouterons des liens d'ancrage à la table des matières, nous avons besoin de trois en-têtes à lier pour aller plus loin dans la publication.
Après cela, nous sommes prêts à commencer.
Créer une table des matières cliquable pour un article de blog avec le bloc de mise en page Divi
Ajouter un bloc de mise en page Divi
Tout d'abord, ajoutez un nouveau bloc de mise en page Divi en haut du contenu de votre article de blog.
Cliquez ensuite sur le bouton Créer une nouvelle mise en page. Cela va déployer l'éditeur de mise en page qui est le constructeur Divi pour un bloc de mise en page.
Ajouter une rangée
Dans l'éditeur de mise en page, lancez la conception en ajoutant une ligne à une colonne.
Ajouter un séparateur supérieur
A l'intérieur de la colonne, ajoutez un module diviseur. Ce sera l'un des deux séparateurs que nous utiliserons pour encadrer la table des matières.
Paramètres du diviseur
Mettez ensuite à jour les paramètres du diviseur comme suit :
- Couleur de la ligne : #eeeeee
- Position de la ligne : centrée verticalement
- Poids du diviseur : 3px
- Largeur : 25 %
- Rembourrage : 30 pixels en haut, 30 pixels en bas
Ajouter un séparateur inférieur
Pour créer le deuxième diviseur, dupliquez le diviseur précédent.
Créer l'en-tête de la table des matières avec un module Blurb
Une fois les intercalaires en place, créons notre en-tête pour la table des matières.
Ajoutez un nouveau module de présentation entre les deux séparateurs.
Contenu de présentation
Ouvrez les paramètres de présentation et mettez à jour le contenu comme suit :
- Titre : « Table des matières »
- Utiliser l'icône : OUI
- Icône : voir capture d'écran
Paramètres de conception de présentation
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Couleur de l'icône : #eeeeee
- Placement des images/icônes : à gauche
- Utiliser la taille de la police de l'icône : OUI
- Taille de la police de l'icône : 100 px
- Titre Titre Niveau : H2
- Largeur du contenu : 100 %
- Hauteur : 38px
Notez que la hauteur du texte de présentation est inférieure à la hauteur de l'icône. Cela permet à l'icône de s'étendre vers le bas à côté des éléments de présentation que nous ajouterons ensuite.
Une fois le texte de présentation du titre en place, nous sommes prêts à commencer à ajouter les éléments/textes cliquables qui composent notre table des matières. Pour ce faire, nous allons également utiliser des modules de présentation.
Ajouter l'article n° 1
Ajoutez un nouveau module de présentation sous le titre de présentation.
Contenu de présentation
Ouvrez les paramètres de présentation et supprimez le contenu du corps par défaut afin que seul le titre soit visible. Le titre est l'endroit où vous ajouterez le bloc de texte qui correspond à la section/titre que nous voulons lier à plus bas dans le message.
Ensuite, mettez à jour le contenu avec l'icône flèche droite sur le bureau.
Déployez l'option de survol pour l'icône et remplacez l'icône par la flèche vers le bas lors du survol. Ce sera une belle micro-interaction qui souligne que le lien défilera jusqu'à un emplacement en bas de la publication.
Conception de présentation
Maintenant, nous pouvons concevoir le module de présentation comme nous le souhaitons. Pour cet exemple, mettons à jour les paramètres du texte de présentation comme suit :
- Couleur de l'icône : #b856c7
- Icône de cercle : OUI
- Couleur du cercle : #ffffff
- Afficher la bordure du cercle : OUI
- Couleur de la bordure du cercle : #b856c7
- Placement des images/icônes : à gauche
- Utiliser la taille de la police de l'icône : OUI
- Taille de la police de l'icône : 16px
- Taille du texte du texte : 16px
- Hauteur de la ligne de titre : 2 em
- Largeur du contenu : 100 %
- Marge : 118px à gauche
- Rembourrage : 10px haut
- Remplissage (survol): 10px à gauche
Dupliquer le Blurb pour plus d'articles
Maintenant que notre premier élément de présentation est terminé, nous pouvons le dupliquer autant de fois que nécessaire en fonction du nombre de liens cliquables que nous souhaitons inclure dans la publication. Pour l'instant, dupliquons-le deux fois pour créer un total de trois éléments pour notre table des matières.
Ajout des URL du lien d'ancrage
À l'heure actuelle, nos éléments de présentation ne sont pas cliquables, nous devons donc ajouter les URL de lien d'ancrage nécessaires à chacun d'eux. L'URL du lien d'ancrage commence toujours par un hashtag (#) suivi de l'ID que vous souhaitez inclure.
Lien d'ancrage #un
Pour plus de simplicité, nous allons ajouter le lien d'ancrage "#one" au premier texte de présentation de la liste. Pour ce faire, ouvrez les paramètres du premier module de présentation de la liste (pas le présentation du titre) et mettez à jour les éléments suivants :
- URL du lien du module : #one
Lien d'ancrage # deux
Ouvrez ensuite les paramètres du deuxième élément de présentation et ajoutez le lien suivant :
- URL du lien du module : #deux
Lien d'ancrage # trois
Enfin, ajoutez le lien suivant au troisième élément de présentation :
- URL du lien du module : #trois
Resserrer l'espacement
Paramètres de ligne
En ce moment, il y a un peu trop d'espace entre les éléments de notre rangée. Pour résoudre ce problème, ouvrez les paramètres de ligne et mettez à jour la largeur et le rembourrage de la gouttière comme suit :
- Largeur de gouttière : 1
- Largeur : 100 %
- Remplissage : 0px en haut, 0px en bas
Paramètres de section
Enlevons également le rembourrage de la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :
- Remplissage : 0px en haut, 0px en bas
Enregistrer la mise en page
Nous en avons terminé avec la conception de notre table des matières. Assurez-vous d'enregistrer et de quitter l'éditeur de mise en page.
Vous devriez maintenant voir votre nouvelle table des matières dans l'éditeur de blocs par défaut.
Ajout des ancres HTML aux en-têtes de publication
Nous avons ajouté les URL des liens d'ancrage à chacun des textes de présentation qui composent les éléments de notre table des matières. Nous devons maintenant ajouter l'ID CSS (ou l'ancre HTML) correspondant aux blocs d'en-tête plus loin dans la publication.
Ancre HTML 1
Cliquez sur le bloc contenant le premier en-tête auquel vous souhaitez lier/accéder. Ensuite, ouvrez les paramètres de ce bloc. Sous la bascule Options avancées, ajoutez « un » à la zone de saisie Ancre HTML :
Ancrage HTML : un
N'oubliez pas que notre premier élément de présentation a l'URL « #one » qui renvoie à celui-ci. Mais n'ajoutez pas le hashtag à cette ancre HTML. Ce n'est pas nécessaire.)
Ancre HTML deux
Ensuite, sélectionnez le deuxième bloc d'en-tête et mettez à jour les éléments suivants :
- Ancre HTML : deux
HTML Ancre trois
Et enfin, sélectionnez le troisième bloc d'en-tête et ajoutez l'ancre HTML comme suit :
- Ancre HTML : trois
Résultat final
Voyons le résultat final sur le post en direct.
Et voici comment les liens d'ancrage fonctionneront. Remarquez l'effet de survol sur les icônes et la façon dont le lien défile en douceur jusqu'à l'ancre correspondante sous la page.
Ajout de la table des matières en tant que bloc de mise en page réutilisable
Si vous souhaitez continuer à utiliser ce bloc de mise en page comme modèle pour de futurs articles, ce serait une bonne idée d'enregistrer le bloc de mise en page en tant que bloc de mise en page réutilisable. Cela vous permettra d'ajouter facilement un bloc "table des matières" à partir de la liste de blocs intégrée.
Pour ce faire, cliquez sur le Divi Layout Block contenant la table des matières et ouvrez le menu Plus de paramètres. Sélectionnez ensuite « Ajouter aux blocs de mise en page réutilisables ».
Saisissez un nom pour le bloc réutilisable (« Table des matières ») et cliquez sur Enregistrer.
Maintenant, vous aurez le bloc disponible dans la liste Blocs réutilisables lors de l'ajout d'un nouveau bloc à la publication.
Désormais, le bloc de mise en page sert de modèle pratique pour créer une table des matières pour votre article. N'oubliez pas de convertir le bloc en un bloc de mise en page standard avant de le personnaliser pour un article particulier. Vous ne voulez pas modifier le bloc de mise en page réutilisable.
Pour ce faire, ouvrez le menu Plus de paramètres du bloc de mise en page réutilisable et sélectionnez « Convertir en bloc normal ».
Dernières pensées
J'espère que ce bloc de mise en page Divi de table des matières s'avérera utile pour les publications suffisamment longues pour en avoir besoin. Si vous souhaitez que cela soit fait pour vous de manière dynamique (comme créer automatiquement la table des matières pour vous en fonction des en-têtes d'un article), il existe des plugins comme Table of Contents Plus qui font ce genre de chose pour vous. Cet article est destiné à ceux qui aiment concevoir avec Divi et qui ne craignent pas de créer la table des matières article par article.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!