Un guide pratique sur la façon de styliser la pagination dans Divi

La pagination est l'un de ces éléments d'un site Web qui est souvent négligé, surtout en ce qui concerne la conception. Et il existe plusieurs endroits où la pagination peut être appropriée à utiliser dans votre site Web. Fondamentalement, la pagination (ou un menu de pagination) permet aux utilisateurs de naviguer à travers plusieurs pages d'éléments (une archive de messages par exemple). Ceci est particulièrement utile pour réduire le contenu de la page initiale.

Divi a plusieurs modules qui incluent la pagination (comme le module de galerie) qui peuvent être stylisés à l'aide de paramètres intégrés. Certains de ces modules (comme blog et portfolio) héritent de la pagination par défaut du thème Divi (ou WordPress) qui peut être trop simplifiée pour certains sites. Mais à l'aide d'un plugin, vous pouvez remplacer la pagination de l'ensemble de votre thème par une autre plus complexe. Ensuite, vous pouvez le styler avec CSS selon vos besoins.

Dans ce tutoriel, je vais vous montrer comment styliser la pagination dans Divi. Voici ce que nous allons parcourir :

• Éléments à prendre en compte lors de la mise en forme de la pagination dans Divi
• Styling Divi Gallery Module et pagination du module Portfolio filtrable
• Styles de pagination avancés pour le module Galerie et le module Portefeuille filtrable
• Pagination du module de blog de style et du module de portfolio
• Ajouter une pagination complexe à Divi à l'aide du plugin WP-PageNavi
• Styliser la pagination WP-PageNavi avec CSS personnalisé

Commençons.

Aperçu

Cet article traite principalement de la façon de styliser la pagination. Cependant, voici quelques styles de pagination complexes que je vais vous montrer comment créer.

Commencer

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, vous aurez besoin des éléments suivants :

• le thème Divi installé et actif.
• Pour tester les conceptions de pagination de différents modules, vous aurez besoin de contenu fictif. Par exemple, pour concevoir la pagination du module portfolio (ou portfolio filtrable), vous aurez besoin d'environ 12 à 16 projets ajoutés à votre thème afin que vous ayez suffisamment de contenu pour permettre à la pagination de prendre effet. Pour le module de galerie, vous aurez également besoin d'environ 12 à 16 images pour remplir la galerie.
• Si vous souhaitez utiliser le plugin WP-PageNavi, vous devrez installer et activer le plugin. Il s'agit d'un plugin gratuit qui peut être téléchargé à partir du répertoire WordPress à partir du tableau de bord WordPress de votre site. Accédez simplement à Plugin> Ajouter un nouveau et recherchez WP-PageNavi.
  

Une fois que vous avez mis en place du contenu fictif, vous êtes prêt à créer une nouvelle page. Depuis votre tableau de bord WordPress, accédez à Pages > Ajouter un nouveau. Donnez un titre à votre page et déployez le Divi Builder. Sélectionnez l'option "Créer à partir de zéro". Ensuite, cliquez sur Construire sur le frontal.

Vous êtes maintenant prêt à commencer à tester certaines conceptions de pagination.

Éléments à prendre en compte lors de la mise en forme de la pagination dans Divi

De manière générale, vous ne voulez probablement pas devenir trop fou avec la conception de la pagination car, comme tout menu de navigation, il est important de rester simple et intuitif. Cependant, voici quelques éléments à prendre en compte lors de la conception de la pagination dans Divi.

Police de pagination

La pagination est un excellent endroit pour rompre avec les principales polices que vous utilisez pour votre site. Vous souhaitez choisir les meilleures polices adaptées aux interfaces utilisateur et à la navigation. Et comme la pagination contient principalement des nombres, vous voulez vous assurer que la police affiche tous les nombres avec une hauteur et une largeur égales (ce que les experts en typographie appellent doublure et tabulaire). Quelques-uns de mes favoris conservateurs incluent Oxygen, Nunito Sans et Source Sans Pro. Et si vous avez beaucoup de pages dans votre pagination, vous devrez peut-être libérer de l'espace en optant pour une police condensée comme Fjalla One ou Roboto Condensed.

Style de police de pagination

Vous pouvez également essayer quelques styles de police pour différencier votre pagination. Par exemple, vous pouvez utiliser le style de police majuscule pour rendre les liens « suivant » et « précédent » plus prononcés et égaux à la hauteur des numéros de page. Cependant, l'ajout du style de police de soulignement peut être un peu redondant étant donné que les liens sont déjà dans un menu de navigation.

Espacement des lettres de pagination

L'espacement des lettres est un excellent moyen d'ajouter un peu plus d'espacement horizontal à votre pagination. Cela peut ajouter un bel élément de design et faire ressortir la navigation.

Alignement du texte de la pagination

Dans Divi, vous pouvez facilement aligner votre pagination à gauche, au centre ou à droite de la page. Alors n'oubliez pas cela chaque fois que vous concevez votre page Web.

Espace cliquable

Il est important d'avoir suffisamment d'espace cliquable pour vos liens de pagination. Par défaut, ce sera assez petit. Vous pouvez augmenter l'espace cliquable en utilisant un texte plus gros ou en augmentant la hauteur de la ligne. Mais vous pouvez également ajouter un peu de remplissage autour de ces liens avec du CSS.

Taille du texte de la pagination

La taille du texte de pagination est normalement assez petite. C'est probablement pour l'empêcher de distraire les utilisateurs du contenu de la page. Cependant, avoir une taille de texte plus grande peut augmenter l'espace cliquable du lien de pagination et le rendre plus visible pour les utilisateurs. J'aime utiliser une unité de longueur vw pour un texte de pagination plus grand afin qu'il s'adapte bien au navigateur et au contenu.

Hauteur de la ligne de pagination

Étant donné que la pagination reste normalement sur une seule ligne, vous pouvez vous contenter d'ajouter un peu plus de hauteur de ligne aux liens afin d'ajouter un espace cliquable supplémentaire.

Ombre de texte de pagination

Text Shadow peut être gênant s'il est mal utilisé. Le mieux est de le laisser de côté à moins que vous ne prévoyiez de le garder subtil. Il peut également être utilisé pour ajouter une lueur créative autour de votre texte si vous voulez ce genre de chose.

Page active de pagination

Cet aspect de la pagination est important pour permettre aux utilisateurs de savoir sur quelle page ils se trouvent actuellement lors de la navigation. Il devrait y avoir un contraste clair entre le style du lien de page actif et les liens de page non actifs. Par défaut, Divi utilisera la couleur d'accentuation principale définie dans le Personnalisateur de thème comme couleur du lien de la page active dans Divi. Cependant, vous pouvez remplacer cela par une ligne de CSS.

Pour les modules qui ont une pagination, Divi a des options de conception intégrées pour styliser différents éléments de la pagination. De plus, vous pouvez facilement ajouter des extraits de CSS dans l'onglet avancé pour encore plus de contrôle sur la conception en un seul endroit pratique.

Mais pour la pagination au niveau du thème, vous pouvez obtenir une solution complexe en utilisant le plugin WP-PageNavi avec CSS personnalisé (nous en parlerons plus tard).

Pour l'instant, commençons par comment styliser la pagination dans les modules Divi.

Styling Divi Gallery Module et pagination du module Portfolio filtrable

Avec le Divi Builder actif sur une nouvelle page, créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module de portefeuille filtrable à la ligne. Comme mentionné précédemment, assurez-vous d'avoir créé 12 à 16 projets afin de pouvoir voir la pagination.

Dans les paramètres de portefeuille filtrable, mettez à jour les éléments suivants :

Nombre de messages : 4 (vous pouvez donc voir plus de liens de page dans la pagination)

Titre du spectacle : NON
Afficher les catégories : Non

Par défaut, Divi affichera la pagination, laissez donc cette option définie sur OUI.

Vous devriez voir la pagination en bas à droite du portfolio.

Pour styliser la pagination, accédez à l'onglet Conception et ouvrez la bascule Texte de pagination pour voir toutes les options disponibles. Mettez à jour les éléments suivants :

Disposition : Grille
Police de pagination : Source Sans Pro
Style de police de pagination : TT
Alignement du texte de pagination : Centre
Couleur du texte de pagination : #cccccc
Taille du texte de pagination : 4vw (ordinateur de bureau), 38px (tablette et téléphone)
Espacement des lettres de pagination : 1vw
Hauteur de la ligne de pagination : 2 em

Cliquez ensuite sur l'onglet avancé et ajoutez l'extrait de code CSS suivant sous Pagination Active Page :

color: #0096eb !important;

En agrandissant le texte avec une hauteur de ligne plus grande, il y a plus d'espace cliquable pour les utilisateurs. Changer l'alignement au centre et ajouter un petit espacement des lettres aide à rendre la pagination plus visible. Et la couleur du texte de pagination personnalisée avec la couleur contrastée de la page active aide l'utilisateur à savoir sur quelle page il se trouve.

Autres extraits CSS rapides

Voici quelques extraits CSS rapides et faciles pour modifier la conception de la pagination.

Pour supprimer la ligne de bordure par défaut qui se trouve directement au-dessus de la pagination, vous pouvez entrer le CSS suivant sous Pagination du portfolio :

border: none;

Pour donner à votre pagination une bordure complète, vous pouvez entrer le CSS suivant sous Pagination du portfolio :

border: 2px solid #dddddd;

Pour donner à la pagination une couleur d'arrière-plan, vous pouvez entrer le CSS suivant sous Pagination du portfolio :

background: #333333;

Fonctionne également pour le module Galerie

Ces mêmes paramètres de conception fonctionneront également pour le module Galerie. En fait, vous pouvez copier les styles de texte de pagination à partir du module Portfolio filtrable et les coller dans un module Gallery ! Assurez-vous simplement de transférer également tous les extraits CSS.

Styles de pagination avancés pour le module Galerie et le module Portefeuille filtrable

Si vous souhaitez obtenir une conception plus avancée pour la pagination de vos modules Portfolio filtrable et Galerie, vous pouvez utiliser des CSS personnalisés plus avancés. Ce que j'aime dans cet exemple particulier, c'est que le CSS personnalisé fonctionne en tandem avec les paramètres intégrés du module.

Pour le démontrer, utilisons à nouveau le portfolio filtrable. Cette fois, mettez à jour les options de conception avec les éléments suivants :

Disposition : Grille
Taille du texte de pagination : 16px
Hauteur de la ligne de pagination : 2,5 em

Sous l'onglet avancé, ajoutez la classe CSS suivante :

Classe CSS : pagi-espace

Cela permettra à notre CSS d'être appliqué uniquement à ce module.

Enregistrez maintenant vos paramètres et ouvrez le modal contextuel Paramètres de la page. Sous l'onglet avancé, ajoutez le code CSS suivant dans la zone CSS personnalisée.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Avec le code en place, vous pouvez voir que la pagination a maintenant plus d'espace cliquable pour chacun des liens de page. Et les liens ont également des couleurs d'arrière-plan ajoutées afin qu'ils ressemblent davantage à des boutons cliquables. Une bordure subtile est également ajoutée à chacun des liens en survol. Le lien de la page active se distingue par un fond sombre contrastant avec une couleur de texte plus claire.

Ce code stylisera la pagination pour le module de portfolio filtrable et le module de galerie. Assurez-vous simplement d'ajouter la classe CSS "pagi-space" au module pour qu'elle prenne effet.

Voici le résultat sur le module portfolio filtrable.

Pagination du module de blog de style et du module de portfolio

Le module Blog et le module Portfolio héritent de la pagination WordPress par défaut qui vous permet de naviguer dans vos archives de publication avec un lien vers « Entrées plus anciennes » et un lien vers « Entrées suivantes ».

Voici à quoi ressemble la pagination par défaut sur la page d'archive du blog dans le thème Divi :

Cette même pagination est utilisée par le module blog et le module portfolio.

Si vous utilisez le module Blog (ou le module portfolio), vous pouvez styliser le texte de la pagination à l'aide des paramètres intégrés.

C'est une solution simple et élégante pour la plupart des cas. Cependant, si vous recherchez une pagination plus complexe pour remplacer la pagination Divi/WordPress par défaut, il existe une solution si simple qu'elle peut vous surprendre.

Ajouter une pagination complexe à Divi à l'aide du plugin WP-PageNavi

Si vous souhaitez une pagination plus avancée pour l'ensemble de votre thème Divi, y compris le module de blog et le module de portfolio, vous pouvez remplacer la pagination WordPress par défaut par une autre à l'aide du plugin populaire appelé WP-PageNavi. Ce plugin fonctionne bien avec Divi. Le design est basique mais peut facilement être personnalisé à l'aide de CSS.

Ajouter le plugin à Divi

Si vous ne l'avez pas déjà fait, allez-y et installez le plugin comme décrit dans la section « Mise en route » en haut de l'article. Une fois le plugin installé et actif, la nouvelle forme de pagination apparaîtra automatiquement tout au long de votre thème.

Cela affectera également le module de blog et le module de portefeuille.

Paramètres du plugin

Vous pouvez localiser les paramètres du plugin à partir de votre tableau de bord WordPress en accédant à Paramètres > WP-PageNavi.

Les paramètres servent principalement à personnaliser la fonctionnalité et le contenu du texte affiché. Cependant, si vous souhaitez styliser la pagination, vous devrez utiliser du CSS personnalisé.

Styliser la pagination WP-PageNavi avec CSS personnalisé

Étant donné que vous voudrez probablement styliser la pagination pour l'ensemble du thème, il est plus logique d'ajouter le CSS au personnalisateur de thème ou à votre fichier style.css de thème enfant. Allez-y et placez le CSS suivant dans la zone CSS supplémentaire du personnalisateur de thème :

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Voici le résultat final.

Styliser WP-PageNavi dans le module Blog et le module Portfolio

Comme mentionné précédemment, le module Blog et le module Portfolio héritent de la navigation par défaut des pages WordPress. Comme cela a été remplacé par la nouvelle pagination complexe de WP-PageNavi, les modules afficheront également cette nouvelle pagination.

Vous pouvez utiliser les options de conception de texte de pagination intégrées pour ajouter un style supplémentaire à la pagination.

Gardez simplement à l'esprit que certaines des options peuvent ne pas fonctionner comme prévu avec un CSS personnalisé externe en place.

Dernières pensées

La pagination ne doit pas rester une réflexion après coup lors de la création d'un site Web dans Divi. Il existe des options intégrées utiles pour aider avec les modules qui utilisent la pagination. Et avec du CSS personnalisé, vous pouvez créer le style de votre choix. Le plugin WP-PageNavi est une solution élégante pour ajouter une pagination complexe tout au long du thème Divi. Non seulement cela fonctionne de manière transparente avec Divi, mais cela vous offre des options supplémentaires que vous pouvez facilement personnaliser. Le style de la pagination WP-PageNavi nécessite du CSS, mais j'espère que le modèle utilisé dans cet article vous mettra sur la bonne voie.

Les exemples de conception dans cet article étaient volontairement simples.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!