Comment créer une table des matières sous forme d’un tableau ? (Créer un compte)

Salut, si tu utilises Elementor PRO tu as le widget Table des matières qui correspond à ce que tu cherches.

Bonjour,

Si cela peut vous être utile, on peut faire ça sans Elementor, en utilisant uniquement les blocks wordpress colonnes, colonne, titre, paragraphe et image. et pas mal de CSS personnalisées. Cela donne quelque chose comme ce qui est en pj .

Ca serait parfait mais j’y connais rien en CSS…

C’est pour ça (entre autres ) que le forum existe. Cependant, pour pouvoir voir s’il est possible de vous aider ( ce n’est pas garanti), il faudrait voir autrement qu’en copie d’écran la page de votre site contenant cette table des matières.

Bonjour,

Sur la page actuelle, les listes de pages sont simplement des images. On peut cliquer sur ces images, ce qui renvoie vers la page correspondante (par ex:  « retrouver la ligne »). Quels liens supplémentaires voulez-vous créer? Des liens à partir de chaque ligne (par exemple vers  « 1 Changer certaines habitudes alimentaires »)? Il existe une extension (peut-être plusieurs), qui permet de sélectionner des zones d’image au survol de la souris et d’y attacher un lien. Je l’ai utilisée il y a assez longtemps et ça fonctionnait bien mais ce n’est pas très précis. De plus si vous voulez une zone/lien par ligne, cela risque  d’être problématique. L’avantage est que vous ne changez pas grand chose à ce que vous avez fait; il suffit de créer une image représentant la page entière et ensuite de créer des « hot spots » à votre convenance. Il n’y a pas à s’occuper de CSS personnalisées. Une autre solution (ce que je vous montrais précédemment) est de mettre la table des matières sous forme de tableaux. L’avantage est que cette méthode est beaucoup plus précise. L’inconvénient: vous devez revoir la conception de votre page qui ne serait plus basée sur des images.  Je pense que le mieux serait de tester l’extension  avant de choisir une méthode.

• Cette réponse a été modifiée le il y a 1 semaine et 4 jours par ferman.

Bonjour,

Et en plus, qu’au survol des liens, j’ai une image de la page de garde qui apparaisse.

Ce serait compliqué à mettre en place et en plus, à mon avis, pas recommandé (voir en fin de réponse).

Voici une marche à suivre pour créer une table des matières comme vous le souhaitez avec WordPress (sans Elementor). Le principe est de construire un modèle dans l’admin et de le modifier en front-end avec des CSS.

Notez d’abord les 50 urls pour lesquelles vous voulez créer des liens

Dans l’admin:

1.  Sur une nouvelle page, insérez un bloc « colonnes » et choisissez l’option « 3 icônes égales »
2. Dans chaque colonne insérez un bloc titre avec les titres qui conviennent: Retrouver sa ligne, Macronutriments & aliments, Micronutriments & organisme. Choisissez le type de titre que vous voulez par exemple h4) puis pour chaque titre, allez dans les réglages du bloc-> avancés -> classes additionnelles et tapez: colonne-1, colonne-2, colonne-3.
3. Dans chaque colonne insérez un bloc tableau (2 colonnes) et insérez le numéro et le sous-titre adéquat (par exemple:   1 | Changer certaines habitudes alimentaires. Dans les contrôles du bloc, ajouter le lien correspondant (pour le premier c’est: https://sport-adapte-nutrition.fr/wp-content/uploads/2024/10/1.Changer-certaines-habitudes-alimentaires.pdf).
4. Vérifiez que ça fonctionne et si oui complétez les 3 tableaux.
5. Faites la même chose pour les 3 tableaux inférieurs.
6. Insérez avant le dernier tableau de la colonne 2 un bloc image avec l’image souhaitée

A ce stade vous devriez voir ce qui est pièce jointe.

Côté utilisateur

Avec les CSS ci-dessous, vous deviez avoir un résultat proche de ce que vous souhaitez , qu’il est possible de modifier.

.colonne-1{
  margin-top:60%
}
.colonne-3{
  margin-top:40%
}
.wp-block-column h4{
  font-family:"Comic Sans MS";
  font-size:1.3em;
  background-color:blue;
  color:white!important;
 border-style:groove;
  border-radius:10px;
}
.wp-block-column p {
 font-size:1.5em; 
} 
table {border-style:solid}
table tr td {
font-family:"Comic Sans MS";
}
table td:nth-child(1){
width:10%;
}

Il est sans doute possible de faire la même chose avec Elementor mais je ne l’utilise pas.

A noter: votre site se comporte de manière anormale: il est très lent à charger et souvent ne se charge que partiellement et il y a des blocages. Il y a forcément quelque chose à améliorer et dans ces conditions je pense qu’il n’est pas bon d’essayer d’ajouter encore plus d’éléments (tels que des images au survol).

Regardez le test de chargement de pages ICI.

Je suis incompétent pour régler ce genre de problème.

• Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
• Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
• Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.

Bonjour,

Mais est-ce-que je pourrai fusionner les 2 : le sommaire en block WordPress + ma page Elementor afin de bénéficier encore de ma présentation.

Je ne sais pas du tout ce qu’on peut faire ou pas faire avec Elementor ni si une même page peut avoir des parties Elementor et d’autres non-Elementor. Si la réponse est « non » je pense que le principe colonnes/tableaux peut s’appliquer avec Elementor (gratuitement?). Si vous en venez là, il faudra déjà regarder les possibilités offertes par que vous avez (Elementor Pro, Essential addons). Si rien ne correspond à vos besoins, vous pourrez contacter le support Elementor Pro et faire une petite recherche sur internet. Par exemple on trouve CECI et il y a bien d’autres réponses que je n’ai pas regardées.

Bonjour,

Je pense que avec ou sans Elementor, vous pourrez seulement vous rapprocher de ce que vous souhaitez. Ensuite pour le fignolage vous devrez en passer par les CSS. Donc faites au mieux sans CSS, mettez la page en ligne et on verra ce qu’il est possible (en CSS ) de faire à partir de là.