Comment styliser la pagination dans le module Portfolio filtrable de Divi

Le module de portefeuille filtrable de Divi est un moyen simple et efficace d'afficher votre travail et vos projets sur votre site Web. Vous pouvez utiliser des catégories pour créer différents filtres pour votre module de portefeuille, et cela offre un moyen simple de garder un portefeuille à jour sans avoir à modifier la conception de votre site Web à chaque fois. Ajoutez simplement un nouveau projet dans le tableau de bord WordPress, puis il se remplira automatiquement dans le module de portefeuille sur votre site Web tant qu'il est correctement catégorisé.

Dans ce tutoriel, nous allons vous montrer 3 manières différentes de styliser la pagination dans le module portfolio filtrable de Divi. En personnalisant cette conception, vous pouvez adapter le module de portefeuille à la conception globale de votre site Web et attirer l'attention sur le travail que vous souhaitez afficher.

Commençons!

Aperçu

Voici un aperçu de ce que nous allons concevoir

Style de pagination un

Style de pagination deux

Style de pagination trois

Ce dont vous avez besoin pour commencer

Installer et activer Divi

Avant de commencer, installez et activez le thème Divi et assurez-vous d'avoir la dernière version de Divi sur votre site Web.

Ajouter des projets de portefeuille

Pour que le portefeuille soit rempli de projets une fois que nous l'avons ajouté à notre page, nous devons d'abord ajouter les projets dans le tableau de bord WordPress. Sélectionnez Projets dans la barre latérale du tableau de bord WordPress, puis ajoutez un nouveau projet. Assurez-vous que le projet a une image en vedette et une catégorie afin qu'il puisse être filtré.

Maintenant, vous êtes prêt à commencer !

Comment styliser la pagination dans le module Portfolio filtrable de Divi

Créer une nouvelle page avec une mise en page prédéfinie

Commençons par utiliser une mise en page prédéfinie de la bibliothèque Divi. Nous utiliserons la page Painter Portfolio du pack de mise en page Painter pour cette conception.

Ajoutez une nouvelle page à votre site Web, donnez-lui un titre et sélectionnez l'option Utiliser Divi Builder.

Nous utiliserons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Parcourir les mises en page.

Recherchez et sélectionnez la disposition de la page Painter Portfolio.

Sélectionnez Utiliser cette mise en page pour ajouter la mise en page à votre page.

Nous sommes maintenant prêts à construire notre conception.

Ajouter le module Portfolio filtrable

Nous remplacerons le contenu du portfolio existant sur cette page par le module de portfolio filtrable. Tout d'abord, supprimez la section de portefeuille existante.

Ensuite, insérez une nouvelle section sur la page, sous la section « Travaux récents ».

Ajoutez ensuite une ligne avec une seule colonne à la section.

Ajoutez le module de portefeuille filtrable à la nouvelle ligne.

Votre portefeuille filtrable devrait contenir vos projets, tant qu'ils ont été ajoutés à la section projet du tableau de bord WordPress.

Paramètres de portefeuille filtrables

Personnalisons maintenant la conception du portefeuille filtrable. Ouvrez les paramètres du module, puis modifiez le nombre de messages à 6.

• Nombre de messages : 6

Sous éléments, désactivez Afficher les catégories.

• Afficher les catégories : Non

Passez à l'onglet Conception et ouvrez les paramètres de mise en page. Définissez la mise en page sur Grille.

• Disposition : Grille

Ensuite, ouvrez les paramètres de superposition. Définissez la couleur de l'icône de zoom, la couleur de superposition de survol et le sélecteur d'icône de survol comme suit :

• Couleur de l'icône de zoom : #fdd23a
• Couleur de superposition de survol : rgba (61,61,61,0.28)
• Sélecteur d'icônes de survol : icône Plus

Ouvrez les paramètres d'image, puis ajoutez une ombre de boîte d'image.

Ensuite, définissez la couleur de l'ombre.

• Couleur de l'ombre : #f2f2f2

Ensuite, modifiez les paramètres de police du titre comme suit :

• Police du titre : Merriweather
• Épaisseur de la police du titre : gras
• Couleur du texte du titre#000000

Définissez la taille du texte du titre et la hauteur de la ligne.

• Taille du texte du titre : 25 px
• Hauteur de la ligne de titre : 2em

Accédez à la section Filtrer le texte des critères et modifiez les paramètres de police comme suit :

• Police des critères de filtrage : Montserrat
• Épaisseur de la police des critères de filtrage : gras
• Couleur du texte des critères de filtrage : #000000

Maintenant que la majeure partie de la conception de nos modules est terminée, nous pouvons passer à la personnalisation des styles de pagination.

Style de pagination un

Pour le premier style de pagination, nous définirons une couleur de police différente pour la page active. De plus, nous définirons la taille du texte de pagination pour qu'elle augmente au survol. Commençons.

Dans les paramètres de portefeuille filtrables, ouvrez les paramètres de texte de pagination. Personnalisez la police comme suit :

• Police de pagination : Montserrat
• Poids de la police de pagination : Gras
• Alignement du texte de pagination : à droite
• Couleur du texte de pagination : #000000

Définissez la taille du texte. Alors. utilisez les paramètres de survol pour augmenter la taille du texte au survol.

• Taille du texte de pagination : 17 px
• Taille du texte de pagination au survol : 21px

Enfin, accédez à l'onglet Avancé et ajoutez le CSS personnalisé suivant à la section Pagination Active Page CSS. Cela active la couleur jaune sur la page active.

color: #FDD23A !important;

Conception finale

Et voici le look final de notre premier design.

Style de pagination deux

Le deuxième style de pagination que nous allons concevoir comprend une couleur d'arrière-plan derrière la pagination, des effets de couleur de survol et une couleur différente pour la page active.

Dans les paramètres de portefeuille filtrables, ouvrez les paramètres de texte de pagination. Personnalisez la police comme suit :

• Police de pagination : Merriweather
• Poids de la police de pagination : Gras
• Alignement du texte de pagination : centré
• Couleur du texte de pagination : #9e9e9e
• Couleur du texte de pagination au survol : #000000

Ensuite, définissez la taille du texte et la hauteur de ligne.

• Taille du texte de pagination : 26 px
• Hauteur de la ligne de pagination : 2em

Passez à l'onglet Avancé et ajoutez le CSS personnalisé suivant à la section CSS de pagination du portefeuille. Cela ajoutera une couleur d'arrière-plan et supprimera la bordure :

background:#f2f2f2;
border:none;

Enfin, ajoutez le CSS suivant à la section Pagination Active Page CSS pour définir une couleur de texte différente pour la page active.

color: #000000 !important;

Conception finale

Voici la conception finale de notre deuxième style de pagination.

Style de pagination trois

Pour notre conception de pagination finale, nous ajouterons un cercle jaune derrière la page active. Nous définirons également une couleur de police différente pour la page active et au survol.

Dans les paramètres de portefeuille filtrables, ouvrez les paramètres de texte de pagination. Personnalisez ensuite la police comme suit :

• Police de pagination : Merriweather
• Poids de la police de pagination : Gras
• Alignement du texte de pagination : centré
• Couleur du texte de pagination : #000000
• Couleur du texte de pagination au survol : #FDD23A
• Taille du texte de pagination : 26 px

Accédez à l'onglet Avancé et ajoutez le CSS personnalisé suivant à la section CSS de pagination du portfolio pour supprimer la bordure :

border:none;

Enfin, ajoutez le CSS suivant à la section Pagination Active Page CSS. Ce CSS définira une couleur de texte différente et un arrière-plan circulaire pour la page active.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Conception finale

Voici la conception finale de notre dernière mise en page.

Résultat final

Examinons maintenant les trois conceptions finales avec nos différents styles de pagination.

Style de pagination un

Style de pagination deux

Style de pagination trois

Dernières pensées

Le module de portefeuille filtrable est facile à personnaliser pour s'adapter à la conception de votre site Web, et vous pouvez rapidement ajouter de nouveaux projets à partir du tableau de bord WordPress pour maintenir votre portefeuille à jour. Ce module est idéal pour les designers, artistes, photographes et autres créatifs pour montrer leur travail avec de belles images et une navigation facile. Pour des idées de conception de portefeuille plus uniques, consultez ce didacticiel sur la création d'un modèle de projet de portefeuille dynamique. Avez-vous utilisé le module de portfolio filtrable sur votre site Web ? Faites le nous savoir dans les commentaires!