Comment ajouter une table des matières à vos articles de blog dans Elementor

La création de contenu de blog longs est idéal pour le référencement, mais cela peut également faire en sorte que vos messages se sentent… enfin, longtemps. Parcourir un article massif sans savoir où vous vous êtes ou la quantité qui reste peut être frustrant pour les lecteurs. C'est là qu'une table des matières (TOC) est utile.

Une table des matières (TOC) agit comme une carte, aidant les lecteurs à trouver rapidement ce dont ils ont besoin, à sauter dans une section et à mieux comprendre votre structure de contenu. De plus, cela peut augmenter votre référencement en permettant des extraits riches dans les résultats de recherche.

Si vous utilisez Elementor pour concevoir votre site et vos articles de blog, l'ajout d'une table des matières est super simple, surtout lorsque vous utilisez le plugin PowerPack Addons.

Dans ce guide, nous vous montrerons comment ajouter une table des matières à votre article de blog dans Elementor sans ajouter de code HTML ou CSS.

Pourquoi devriez-vous ajouter une table des matières

Avant de sauter dans le mode d'emploi, expliquons rapidement pourquoi un TOC est un ajout intelligent à vos articles de blog.

• Améliore l'expérience utilisateur: les lecteurs peuvent instantanément passer à la section qui les intéresse.
• Booste SEO: les moteurs de recherche affichent souvent les liens TOC en tant que lilinks, ce qui peut améliorer les taux de clics.
• Encourage un engagement plus long: en donnant aux utilisateurs le contrôle de la navigation, vous les gardez plus longtemps sur la page.
• Réduit le taux de rebond: les visiteurs ne se sentent pas submergés par un long contenu lorsqu'ils peuvent le parcourir facilement.

Voyons maintenant dans la façon dont vous pouvez ajouter un TOC entièrement fonctionnel et élégant dans Elementor.

Comment ajouter une table des matières à vos articles de blog dans Elementor

Étape 1: Installez les addons PowerPack pour Elementor

Avant de continuer, assurez-vous que vous avez installé et activé des addons Powerpack pour Elementor sur votre site Web. Pour en savoir plus, consultez notre guide sur la façon d'installer et d'activer Powerpack Addons Pro.

Étape 2: Activez le widget de la table des matières

Une fois le plugin actif, c'est une bonne idée de s'assurer que le widget TOC est réellement activé.

Pour ce faire, accédez à Elementor >> PowerPack >> Éléments de votre tableau de bord WordPress. À partir de là, recherchez le widget «Table des matières» et assurez-vous que la bascule à côté est allumée (bleu).

Vous êtes maintenant prêt à l'utiliser dans Elementor.

Étape 3: Créez un seul modèle de message dans Elementor

Pour appliquer la table des matières de manière cohérente sur tous vos articles de blog, il est préférable de l'ajouter dans un seul modèle de publication.

Voici comment:

• Allez dans Modèles >> Ajouter nouveau.
• Dans le menu déroulant, choisissez une seule publication.
• Donnez un nom à votre modèle, tel que « disposition du blog » ou « modèle de publication », puis cliquez sur « Créer un modèle ».

Elementor vous demandera maintenant si vous souhaitez commencer à partir d'une toile vierge ou utiliser une disposition prédéfinie.

Étape 4: Utilisez un modèle de publication pré-conçu (facultatif)

Si vous ne voulez pas construire la disposition à partir de zéro, Elementor facilite l'insérer un modèle prêt à l'emploi. Choisissez l'une des options pré-conçues; Il comprendra généralement des éléments essentiels tels que le titre de publication, l'image en vedette, la boîte d'auteur et le contenu du message.

Vous pouvez toujours les modifier plus tard pour s'adapter mieux à la conception de votre blog.

Étape 5: Ajoutez le widget de la table des matières à votre modèle

Ensuite, nous devons ajouter le widget de la table des matières.

Dans le panneau Elementor, recherchez «Table des matières». Lorsque le widget apparaît (recherchez l'icône PP dans le coin), faites glisser et déposez-la dans votre disposition.

Un endroit commun pour placer la table des matières (TOC) est juste en dessous du titre de publication ou de l'image en vedette, mais vous pouvez le placer partout où il est logique pour votre contenu.

Une fois que vous ajoutez le widget, il détectera et affichera automatiquement tous les en-têtes (tels que H2S et H3S) à partir de votre message.

Étape 6: Personnalisez les paramètres de contenu

Avec le widget sur la page, vous verrez une liste de tous les en-têtes de votre contenu de message. Maintenant, personnalisons la table des matières.

Dans l'onglet Contenu, vous trouverez plusieurs paramètres:

Vous pouvez modifier le titre de la table des matières (COT) en quelque chose comme «navigation rapide» ou «sur cette page». Si vous pensez au référencement et à l'accessibilité, vous pouvez également ajuster la balise HTML du titre et la définir en tant que H2 ou H3 , selon la façon dont elle s'intègre dans votre hiérarchie.

Ensuite, il existe des paramètres pour inclure ou exclure certains niveaux de cap . Par exemple, vous ne devez afficher H2S et H3S et sauter H4S et ci-dessous. Et vous pouvez choisir le style de liste, aller avec des nombres pour une sensation structurée et étape par étape ou des balles pour un look plus minimal.

Étape 7: Explorez des fonctionnalités supplémentaires (facultative mais utile)

Le widget PowerPack Table Table des matières est rempli de fonctionnalités qui aident à améliorer à la fois l'utilisabilité et la conception.

Vous pouvez rendre la table des matières (TOC) pliable , ce qui est idéal pour les utilisateurs mobiles ou lorsque vous souhaitez garder la mise en page propre. Ajoutez une icône pour développer / s'effondrer et spécifier quand le widget doit s'effondrer sur le mobile, la tablette, le bureau ou tous les appareils.

Il y a aussi une option de vue hiérarchique . Cela montre la relation entre H2S, H3S et H4S en indantant les sous-titres sous leurs rubriques parent. Si vous avez un article détaillé, la création d'une table des matières (COT) la rend plus organisée et plus facile à scanner.

Pour les messages plus longs, l'activation de TOC collante sur Scroll est super utile. Il maintient le COT visible lorsque les utilisateurs font défiler afin qu'ils puissent sauter entre les sections à tout moment. Vous pouvez même ajouter un bouton de défilement vers le haut à l'intérieur du widget pour aider les utilisateurs à revenir rapidement au début de votre message.

Si vous avez un en-tête collant sur votre site, envisagez de régler le défilement du défilement t pour que les en-têtes ne soient pas cachés derrière lorsqu'un utilisateur clique sur un lien TOC.

Étape 8: Style le TOC pour correspondre à votre site

Maintenant que la fonctionnalité est configurée, assurez-vous que le widget a fière allure. Dans l'onglet Style, vous trouverez une suite complète d'options de personnalisation:

• Styling de la boîte: Vous pouvez ajuster la couleur d'arrière-plan du TOC, le type de bordure et le rayon de la bordure et même ajouter une ombre de boîte pour le faire ressortir. Si vous optez pour une disposition propre, une bordure subtile et un fond léger fonctionnent magnifiquement.
• Style de l'en-tête: Vous souhaitez personnaliser le titre TOC? Vous pouvez définir l'alignement du texte, modifier le rembourrage et modifier les couleurs, la typographie et les icônes. Vous pouvez même ajouter une ligne de séparateur et personnaliser sa largeur et sa couleur.
• Style de liste: c'est là que vous personnalisez les éléments TOC réels les liens de la section. Ajustez le rembourrage, modifiez le texte et tirez la typographie, choisissez l'indentation pour les sous-titres et personnalisez le style de marqueur (tel que la couleur et la taille des balles).

Avec ces options de style, vous pouvez faire en sorte que le TOC se sente comme une extension naturelle de votre site Web au lieu de quelque chose qui vient d'être déposé.

Étape 9: publier et définir des conditions

Une fois que tout a l'air comme vous le souhaitez, allez-y et appuyez sur Publier. Elementor vous demandera alors où afficher ce modèle.

Choisissez la condition 'Inclure >> Tous les articles' afin que le modèle (et le TOC à l'intérieur) soit appliqué à chaque article de blog de votre site.

Cliquez sur Enregistrer et Clos E, et vous avez terminé!

Faits saillants clés du widget PowerPack Tablepack des matières

Le widget PowerPack Table des matières regorge de fonctionnalités utiles qui améliorent non seulement l'expérience de lecture mais vous fournissent également un contrôle complet sur la façon dont votre table des matières apparaît et fonctionne sur votre site Web.

Personnalisez facilement le titre de table

Vous pouvez personnaliser le titre de votre table des matières pour mieux adapter le ton ou le but de votre message. Que vous souhaitiez le nommer «navigation rapide», «contenu» ou «Sautez à la section», le widget PowerPack TOC vous permet de le mettre à jour en quelques clics.

Inclure ou exclure les titres

L'une des caractéristiques remarquables de ce widget est la flexibilité qu'il vous offre en ce qui concerne la gestion des niveaux de cap. Vous pouvez choisir les balises d'en-tête (H1, H2, H3, etc.) doivent apparaître dans le TOC. Encore mieux, en utilisant la fonctionnalité du sélecteur CSS intégré, vous pouvez spécifiquement inclure ou exclure des sections ou des titres particuliers de votre table, vous donnant un contrôle complet sur ce qui apparaît.

Choisissez votre style de liste préféré

Vous voulez présenter votre contenu dans une liste propre et minimaliste ou opter pour un format numéroté plus structuré? Vous avez des options. Le widget vous permet de définir votre style de liste sur «aucun», des «balles» ou des «numéros», en fonction de votre préférence de conception.

Longs titres? Aucun problème

Si vos titres ont tendance à être longs, ne vous inquiétez pas. Vous pouvez activer l'option Word Wrap pour vous assurer que le texte se casse soigneusement et que votre table des matières (COT) reste propre et alignée.

Effondrer le TOC en fonction du type d'appareil

Vous pouvez choisir d'effondrer la table des matières par défaut, selon le type de périphérique: mobile, tablette ou bureau. Cela aide à garder les choses bien rangées sur les petits écrans. De plus, vous pouvez permettre à une vue hiérarchique, permettant aux rubriques imbriqués (tels que H3S sous H2S) soit clairement en retrait et structuré.

Table des matières collante pour les longs poteaux

Pour un contenu de forme longue, avoir une table des matières (COT) qui défile avec l'utilisateur change la donne. La fonction Sticky TOC permet à la liste des contenus de rester visible pendant que les visiteurs du site font défiler la page. Cela leur permet de sauter facilement entre les sections à tout moment sans avoir à faire défiler vers le haut.

Meilleures pratiques pour utiliser la table des matières dans les articles de blog

Pour profiter au maximum de votre TOC, gardez ces conseils à l'esprit:

• Utilisez une structure de cap appropriée: Commencez avec H2S pour les sections principales, suivie de H3S et H4S selon les besoins. Évitez de sauter des niveaux, comme passer de H2 à H4, car cela peut confondre les lecteurs et la table des matières (TOC) elle-même.
• Gardez vos rubriques claires et concises: N'oubliez pas que vos lecteurs les utiliseront pour naviguer dans votre message. Gardez la table des matières (TOC) courte et pliable. Surtout pour les utilisateurs mobiles, l'activation de l'effondrement peut garder votre disposition propre.
• Aperçu sur tous les appareils: assurez-vous que votre table des matières (TOC) apparaît correctement et fonctionne correctement sur les ordinateurs de bureau, les tablettes et les téléphones mobiles.

Questions fréquemment posées

Ques. Puis-je cacher la table des matières (TOC) sur les appareils mobiles?

Ans. Oui, vous pouvez utiliser le paramètre «Effondrement sur» pour rendre le TOC minimisé par défaut sur mobile ou tablette.

Ques. Va-t-il mettre à jour automatiquement lorsque j'ajouterai de nouvelles sections à mon message?

Ans. Oui! Le widget tire dynamiquement des balises de cap de votre contenu, il se met donc automatiquement à jour.

Ques. Puis-je utiliser ce widget en dehors des articles de blog?

Ans. Absolument. Vous pouvez l'ajouter à n'importe quelle page de mise en page Elementor, type de message personnalisé ou même description du produit, tant qu'il y a des balises à capter.

Enveloppez-vous!

Une table des matières n'est pas seulement une fonctionnalité de conception; C'est une mise à niveau de l'utilisabilité qui peut améliorer l'expérience de vos lecteurs, stimuler le référencement et rendre votre contenu plus attrayant.

Avec les addons Elementor et PowerPack, l'ajout et la personnalisation d'une table des matières (COT) est étonnamment facile. Vous obtenez un contrôle total sur son apparence et son comportement, le tout sans écrire une seule ligne de code.

Vous pouvez faire beaucoup plus avec les addons PowerPack pour Elementor. Il existe plus de 70 widgets créatifs que vous pouvez utiliser pour personnaliser vos pages Elementor. Si vous souhaitez en savoir plus sur les addons PowerPack pour Elementor, consultez ici.