Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

41 vues

4 min

Comment afficher une définition au survol des termes techniques dans Webflow ?

Apprenez à afficher automatiquement une définition au survol des termes techniques dans vos articles Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher automatiquement une définition au survol des termes techniques dans vos articles Webflow, sans plugin.

Exemple

Survolez les termes soulignés en violet

Pour améliorer votre CROConversion Rate Optimization : optimisation du taux de conversion., commencez par auditer votre SEOSearch Engine Optimization : optimisation pour les moteurs de recherche. technique. Surveillez votre CTRClick-Through Rate : taux de clic sur un lien ou une annonce. dans la Search Console et vos métriques LCPLargest Contentful Paint : métrique Core Web Vitals de vitesse de chargement. et CLSCumulative Layout Shift : métrique de stabilité visuelle de la page.. Pensez aussi au GEOGenerative Engine Optimization : visibilité dans les IA comme Perplexity ou ChatGPT. pour apparaître dans les réponses des IA. Gérez votre contenu via un CMSContent Management System : système de gestion de contenu. comme Webflow pour publier rapidement.
TermeDéfinition affichéePersonnalisable
CROConversion Rate Optimization...Oui, dans le tableau JS
GEOGenerative Engine Optimization...Oui
LCPLargest Contentful Paint...Oui
Tout terme customVotre définitionOui, ajoutez une entrée

1. Ajoutez la classe sur votre zone article

Sur le Div qui contient votre Rich Text, ajoutez la classe article-content. Le script cherche les termes uniquement dans cette zone, pas dans la navbar ou le footer.

2. Personnalisez le glossaire

Modifiez le tableau glossary dans le script avec vos propres termes et définitions. Le script détecte automatiquement les occurrences dans le texte.

3. Ajoutez le script dans Footer code

(function() {
var glossary = {
'CRO': 'Conversion Rate Optimization : optimisation du taux de conversion.',
'GEO': 'Generative Engine Optimization : visibilité dans les IA comme Perplexity ou ChatGPT.',
'SEO': 'Search Engine Optimization : optimisation pour les moteurs de recherche.',
'CMS': 'Content Management System : système de gestion de contenu.',
'CTR': 'Click-Through Rate : taux de clic sur un lien ou une annonce.',
'ROAS': 'Return On Ad Spend : retour sur les dépenses publicitaires.',
'LCP': 'Largest Contentful Paint : métrique Core Web Vitals de vitesse de chargement.',
'CLS': 'Cumulative Layout Shift : métrique de stabilité visuelle de la page.',
};

var style = document.createElement('style');
style.textContent = '.glossary-term { border-bottom: 1px dashed #a78bfa; cursor: help; position: relative; }' +
'.glossary-tip { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);' +
'background: #111; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 13px;' +
'white-space: normal; min-width: 200px; max-width: 280px; z-index: 999; line-height: 1.5;' +
'opacity: 0; pointer-events: none; transition: opacity 0.2s; }' +
'.glossary-term:hover .glossary-tip { opacity: 1; }';
document.head.appendChild(style);

var content = document.querySelector('.article-content') || document.body;
var walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
var nodes = [];
while (walker.nextNode()) nodes.push(walker.currentNode);

nodes.forEach(function(node) {
var text = node.textContent;
Object.keys(glossary).forEach(function(term) {
if (text.includes(term) && node.parentElement.tagName !== 'SCRIPT') {
var span = document.createElement('span');
span.innerHTML = text.replace(new RegExp('\b' + term + '\b', 'g'),
'' + term +
'' + glossary[term] + '
');
node.parentNode.replaceChild(span, node);
}
});
});
})();

bon à savoir

Le script utilise un TreeWalker pour parcourir les noeuds texte sans casser le HTML existant. Évitez d'ajouter des termes trop courts (1-2 lettres) ou trop communs : ils pourraient matcher dans des contextes non désirés. Testez toujours en preview avant de publier.

Conclusion

Un glossaire inline améliore la compréhension et réduit le taux de rebond sur les articles techniques. Cas d'usage :

  • Articles SEO/marketing avec jargon technique
  • Documentation produit ou SaaS
  • Guides pour débutants avec termes métier

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...