Améliorer la navigation de votre blog est essentiel pour offrir une expérience utilisateur optimale. Dans le module Blog de Divi, la pagination par défaut se limite aux liens « Précédent » et « Suivant ». Pour une navigation plus intuitive, il est possible de remplacer cette pagination par des numéros de page. Voici comment procéder :
- Dans votre tableau de bord WordPress, allez dans Extensions → Ajouter.
- Utilisez le champ de recherche en haut à droite pour trouver « WP-PageNavi ».
- Installez et activez le plugin WP-PageNavi.
Une fois le plugin activé, la pagination de votre module Blog affichera des numéros de page, offrant une navigation plus claire à vos visiteurs.
Pour adapter l’apparence de la pagination au design de votre site :
- Ouvrez les paramètres du module Blog dans Divi.
- Accédez à l’onglet Avancé → CSS personnalisé → CSS libre.
- Collez le code CSS suivant :
selector .wp-pagenavi { text-align: center; border-top: 1px solid #dddddd; padding-top: 15px; }
selector .wp-pagenavi .pages { border: none; }
selector .wp-pagenavi a, selector .wp-pagenavi span.current { border-radius: 50%; padding: 5px 10px; border: 1px solid #dddddd !important; }
selector .wp-pagenavi a.last { border: none !important; }Remarque : Dans ce code, le mot-clé selector sera automatiquement remplacé par le sélecteur CSS approprié, ciblant les éléments PageNavi générés pour ce module Blog spécifique.
Après avoir appliqué ces modifications, votre pagination apparaîtra avec un style personnalisé, harmonisé avec le design de votre site.
