Comment remplacer n’importe quel texte sur un site internet Divi

24 Jan 2023 | Création site, Tutoriel, Web

Dans ce tutoriel, nous allons vous montrer comment remplacer n’importe quel mot ou phrase de texte sur votre site Divi en utilisant un simple bout de code jQuery.
jQuery étant utilisé par Divi, vous n’avez rien à installer et évite d’utiliser un plugin pour une petite personnalisation.

Remplacer n’importe quel texte sur votre site web Divi

Il existe plusieurs cas dans lesquels nous sommes obligés de remplacer un texte ou un juste un seul mot par un autre mot ou texte de notre choix, mais nous ne pouvons tout simplement pas le modifier dans le Divi Builder ou dans l’éditeur de contenu. Cela provient généralement d’un plugin qui génère un affichage ou une structure sur le site non voulus.

Par exemple, c’est le cas dans le module « Commentaire » de Divi, où il n’y a aucune option pour modifier les textes dans les paramètres. Ou également de modifier un texte contenu dans un bouton d’un plugin où seul le lien hypertexte peut être personnalisé. Il est facile de surmonter cette limitation, alors ne vous inquiétez pas !
Dans ce tutoriel, vous apprendrez comment remplacer un mot ou une phrase de texte n’importe où sur votre site Divi à l’aide d’un simple code jQuery.

Dans un premier temps : localisez le sélecteur CSS du texte

Avant de vous montrer le code permettant de remplacer le texte, vous devez d’abord trouver le sélecteur CSS exact de ce texte, son « ID » ou « classe ». Pour ce faire, vous pouvez utiliser l’outil d’inspection du navigateur. Après avoir trouvé le sélecteur, je vous recommande de le tester en changeant la couleur en rouge, juste pour vérifier que vous avez bien trouvé le bon sélecteur. Cette technique permet de modifier la couleur du texte que vous voulez modifier, en rouge, afin d’être sûr de modifier le texte (et uniquement celui-ci) voulu.

.nomdelaclass {
  color: red;
}

Remplacer l’ensemble du texte

Pour remplacer l’ensemble du texte, trouvez d’abord le sélecteur de classe CSS exact de l’élément et mettez-le en surbrillance. Ensuite, une fois que ce sélecteur est correctement trouvé, placez ce sélecteur de classe CSS dans le code jQuery ci-dessous. Très utile pour modifier le texte d’un bouton par exemple.

<script>
 jQuery(document).ready(function(){
  setInterval(function(){
     jQuery(".nomdelaclass").html("Texte de remplacement personnalisé") ;
  },100)
 })
</script>

Placez ce code dans votre onglet Divi > Options du thème > Onglet « L’intégration » dans la zone de code « Ajouter ligne de code à la < head > de votre blog« . Comme ci-dessous :

Refonte de site Internet avec DIVI module de code personnalisé

Remplacer un seul mot dans un texte ou uniquement une partie de texte

Pour remplacer un seul mot spécifique dans une phrase de texte, trouvez d’abord le sélecteur de classe CSS exact de l’élément de texte entier et mettez-le en surbrillance. Ensuite, une fois ce sélecteur correctement trouvé, placez ce le dans le code jQuery ci-dessous. Remarquez que vous devrez ajouter le sélecteur deux fois. Voici ensuite la partie qui diffère de la méthode précédente.
Vous devez d’abord placer le mot ou le texte (plusieurs mots, donc) existant que vous souhaitez remplacer, puis après la virgule, placer le mot ou le texte par lequel vous souhaitez le remplacer.

<script>
jQuery(document).ready(function(){
  jQuery(".nomdelaclass").text(jQuery(".nomdelaclass").text().replace("le texte à remplacer", "le nouveau texte")) ;
})
</script>

Placez ce code dans votre onglet Divi > Options du thème > Onglet « L’intégration » dans la zone de code « Ajouter ligne de code à la < head > de votre blog »

Voilà, c’est changé !

J’espère que vous avez apprécié cette technique pour remplacer n’importe quel texte sur un site Divi.
Besoin d’aller plus loin ? Contactez l’agence OpenMyDiv, sans oublier que nous proposons également des services de refonte complète de votre site internet, pour un look professionnel afin de vous démarquer de la concurrence.

Pour aller plus loin

Exemple de e-commerce simple, direct pour achat
Avr 12 2024

L’importance de l’UX/UI pour booster les conversions sur un e-commerce

La réussite d’un site e-commerce repose largement sur l'expérience qu'il offre à ses utilisateurs. Cet article explore comment une excellente expérience utilisateur...
Agence web d'optimisation de site internet
Juil 04 2023

Les stratégies de marketing en ligne pour promouvoir votre site web et augmenter votre visibilité en 2023

Aujourd'hui, en 2023, il est essentiel d'adopter des stratégies de marketing en ligne efficaces pour promouvoir votre site web et augmenter votre visibilité sur...
Création site agence openmydiv maintenance
Mar 13 2023

Entretien avec notre partenaire consultant marketing

Aujourd’hui nous recevons notre consultant marketing partenaire pour une présentation complète de son métier. Quel est votre rôle en tant que consultant marketing ? En...
Développements sur mesure de site, ERP, application et e-boutique.
Juin 21 2022

Comment créer une application web ?

Les web apps (ou application web) sont aujourd’hui devenues incontournables et servent de nombreux objectifs. Elles sont un excellent moyen de développer des outils en...
Infographie sur les résultats des géants du web
Mar 11 2022

[Infographie] Chiffres clés des géants de l’internet en 2022

Les réseaux sociaux et services du web ne font qu'augmenter depuis ces 10 dernières années, retrouvez ici dans cette infographie ce qu'ils représentent : Chiffres clés...
particularité des liens sur Internet.
Mar 02 2022

Guide 2022 complet des liens (links)

Il y a beaucoup à apprendre sur les liens en HTML. De l'implémentation du balisage et les attributs associés, les meilleures pratiques de style aux choses à éviter, et...
Développements sur mesure agence web Openmydiv
Déc 06 2021

Les pour et les contre du long défilement (Long Scrolling)

Les concepteurs de sites Web adoptent la tendance des sites à long défilement pour leurs divers avantages. Mais un site Web à page unique n'est peut-être pas le bon...
Rédiger une documentation utilisateur pour site web
Oct 14 2021

Documentation utilisateur site web

Qu'est-ce qu'une documentation utilisateur ? Une documentation utilisateur, c'est un support qui décrit l'ensemble du fonctionnement d'une solution d'un point de vue...
Rédiger une documentation technique pour site web
Oct 13 2021

Documentation technique site web

À quoi sert la documentation technique d'un site web ? La documentation technique va permettre d'aborder tous les aspects techniques d'un projet web. Elle va décrire...
Audit réalisé avec Ligthouse d'un site optimisé et performant
Oct 13 2021

À quelle vitesse un site doit-il charger en 2021 ?

Voici des conseils pour booster votre site internet. Le chargement rapide est primordial pour l’expérience utilisateur, mais également pour les moteurs de recherche....