Personnalisez le texte aucun résultat du module blog de Divi - Divi Community

“Aucun résultat. La page demandée est introuvable…”. Vous connaissez tous par cœur cette phrase qui apparait lorsqu’on utilise un module “blog” ou un module “portefeuille” du Divi Builder et qu’aucun article n’existe.
Dans ce court tutoriel, je vous explique comment facilement personnaliser ce texte pour l’adapter aux besoins de votre site Divi.

Ajoutez un ID CSS ou une classe CSS

Ajouter un ID CSS pour cibler un module blog dans Divi

Tout d’abord, par mesure de précaution, attribuez un ID CSS ou une classe CSS à votre module “blog” ou votre module “portefeuille”.
Ceci afin de cibler précisément votre élément et restreindre la portée les modifications que vous allez apporter.

Si votre modification ne porte que sur un seul module : précisez un ID CSS.
Si elle doit s’appliquer à l’identique sur plusieurs modules : utilisez une classe CSS.

Pour rappel, les champs “ID CSS” et “classe CSS” se trouvent dans les paramètres du module, onglet Avancé -> ID et classes CSS.

Un peu de jQuery

Et oui, nous allons utiliser du Javascript pour modifier le texte “Aucun résultat”.
Mais ne paniquez pas, rien de terrible je vous rassure !

Il est bon de savoir qu’il est aussi possible de changer cette chaine en modifiant le fichier de traduction de Divi.
Mais dans le cas présent, l’utilisation de jQuery rend la manipulation plus simple et offre de plus grandes possibilités en terme de personnalisation.
On peut notamment utiliser un texte personnalisé par module ou, nous le verrons en fin d’article, enrichir ce texte avec des balises html.

Ajoutez un module “code”

Insérer un module code avec le Divi Builder

Comme je l’explique dans cet article, il y a plusieurs méthodes pour ajouter du Javascript dans Divi.
Ici, un simple module “code” inséré sur la page qui contient le module “blog” ou le module “portefeuille” fera l’affaire.
Ainsi, le script ne sera pas chargé inutilement sur d’autres pages.

Remplacez le texte “Aucun résultat” et sa phrase d’accompagnement

Les lignes de jQuery ci-dessous vous permettrons de remplacer le titre “Aucun résultat” ainsi que la phrase “La page demandée…” par le texte de votre choix.

Mon exemple expose l’utilisation du module “blog” pour afficher des offres d’emplois.

N’oubliez pas d’encapsuler ce code entre des balises <script>.

JS

Détaillons ce code

  • Ligne 1 : on déclare notre fonction lorsque la page est prête
  • Ligne 2 :
    • on cible le titre “Aucun résultat” qui est défini par la classe .not-found-title
    • on utilise la méthode .text de jQuery qui permet de définir un nouveau texte pour l’élément ciblé
  • Ligne 3 :
    • on cible la phrase “La page demandée…” en s’appuyant sur le titre et en cherchant la première balise p qui suit
    • on utilise ici aussi la méthode .text de jQuery pour remplacer le texte

Le résultat en image pour la personnalisation en texte seul

Aperçu du texte "aucun résultat" modifié avec la méthode .text de jQuery

Et voila, c’est tout de même plus approprié avec un texte adapté au type de publication.

Personnalisez le texte en html

L’intérêt d’utiliser jQuery pour modifier le texte “Aucun résultat” est de pouvoir l’enrichir avec des balises html. Et donc potentiellement, d’ajouter des classes complémentaires permettant de styler plus précisément votre texte.

JS

Détaillons ce code

  • Ligne 1 : on déclare notre fonction lorsque la page est prête
  • Ligne 2 :
    • on cible le titre “Aucun résultat” qui est défini par la classe .not-found-title
    • on utilise la méthode .html de jQuery qui permet de définir un nouveau contenu html pour l’élément ciblé
    • j’ai mis ici le mot “Aucune” en gras grâce à la balise <strong>
  • Ligne 3 :
    • on cible la phrase “La page demandée…” en s’appuyant sur le titre et cherchant la première balise p qui suit
    • on utilise ici aussi la méthode .html de jQuery pour remplacer le texte par du code html
    • j’ai ajouté en début de phrase une icône issue de la police FontAwesome (lire notre tuto pour l’utiliser dans Divi)

Le résultat en image pour la personnalisation en html

Aperçu du texte "aucun résultat" modifié avec la méthode .html de jQuery

Ce n’est bien sûr qu’un exemple de personnalisation parmi d’autre car l’utilisation du html élargi grandement le champ des possibles.

À vous de jouer maintenant !