Pee-Aye Creative How To Style And Customize The Divi Blog Pagination Tutorial by Pee Aye Creative

Apprenez à ajouter quelques belles et fonctionnelles de la pagination à la Divi module de Blog ainsi que de personnaliser et de style avec CSS!

Belle Divi Blog De La Pagination

Nous avons eu beaucoup de plaisir avec la Divi Blog tutoriel de la série, et nous ne sommes pas encore fait! Aujourd’hui, nous ajouter de la beauté et de la fonctionnalité tout à la fois avec quelques grands la pagination! Je vous donne deux méthodes. Vous pouvez le style et personnaliser la valeur par défaut les boutons suivant et précédent, ou vous pouvez ajouter des avancées de la pagination avec le WP-PageNavi plugin. Les deux sont super, et fit magnifiquement dans notre série de blog. J’espère que vous apprenez quelque chose de nouveau aujourd’hui!

Ajuster La Divi La Pagination Des Paramètres De Calcul

Vous pouvez commencer par le réglage de certains paramètres de base qui sont inclus dans le module Blog onglet conception en vertu de la Pagination du Texte de la bascule. C’est très étrange, mais ils traitent ces liens en tant que texte plutôt que des liens, tout comme les Divi Blog lire plus de texte tutoriel. C’est pourquoi vous avez besoin de ce tutoriel et l’extrait.

Divi blog module pagination settings

Donc, aller de l’avant et de commencer avec des choses comme la police, le poids, la taille du texte, couleur du texte, etc.

Modifier Les Divi Blog De La Pagination Des Liens De Texte Dans Les Boutons

Maintenant que nous avons une certaine conception de base des styles de ensemble, nous allons continuer en ajoutant un peu de CSS pour faire de la pagination des liens ressemblent plus à des boutons. Nous sommes d’ajouter une couleur d’arrière-plan, bordure, et placez effet.

Si vous utilisez notre gratuit Divi thème de l’enfance, de la place de cet extrait dans le style.fichier css. Sinon, de le placer dans votre Divi>Options du Thème>Custom CSS code de la boîte. Si vous avez besoin d’aide, consultez notre guide complet sur l’endroit Où Ajouter du Code Personnalisé Dans Divi.

/*style de la Divi blog boutons de pagination*/ .la pagination .alignleft un, .la pagination .alignright a { color: #ffffff; background: #0071fc; border: 2px solid #0070fc; padding: .7em 1.3 em; border-radius: 50px; text-transform: capitalize; transition: all 0,3 s ease-in-out; } /*style de la Divi blog boutons de pagination sur hover*/ .la pagination .alignleft a:hover, .la pagination .alignright a:hover { background: transparent; color: #0070fc; border: 2px solid #0070fc; transition: all 0,3 s ease-in-out; }

Ajouter Avancée de la Pagination des Numéros de Page Avec Le WP-PageNavi Plugin

Sur notre page de blog et la plupart des sites que j’design, j’aime utiliser le plugin appelé WP-PageNavi. Ce plugin ajoute avancée de la pagination à la Divi module de Blog. Juste par l’installation et l’activation du plugin, il remplace l’ancien ← messages plus Anciens | Nouveaux messages → liens avec numérotée de la page de liens. J’aime vraiment cela et pense que son un excellent ajout à chaque blog.

Add pagination to the Divi blog with the WP PageNavi plugin

Une fois que vous installez et activez le plugin, la pagination s’affiche automatiquement dans le module blog. Il n’y a pas d’autres paramètres, de sorte que tous vous avez à faire maintenant est de style de la pagination. Je n’aime pas la façon dont il regarde par défaut, voici une capture d’écran:

Divi blog pagination with the WP PageNavi plugin

On peut améliorer ce tout à fait un lot avec un peu de CSS! Nous d’aller sur tous les détails dans la vidéo, alors assurez-vous de toujours regarder ceux depuis qu’ils accompagnent les articles du blog.

Vous pouvez ajouter le code à votre site web en copiant et collant l’ensemble de l’extrait de code ci-dessous. Si vous utilisez notre gratuit Divi thème de l’enfance, de la place de cet extrait dans le style.fichier css. Sinon, de le placer dans votre Divi>Options du Thème>Custom CSS code de la boîte.

/*style de la wp-pagenavi la pagination des liens*/ .wp-pagenavi un, .wp-pagenavi span { color: #000000; background: #f1f3f5; font-size: cadratin (1 em !important; line-height: cadratin (1 em; font-weight: bold !important; padding: 0.45 em 0.8 em !important; border-radius: 100px; transition: all .5s; } /*style de la wp-pagenavi numéro de la page actuelle*/ .wp-pagenavi durée.actuel { color: #ffffff !important; background: #0070fc !important; border-radius: 100px; } /*style de la wp-pagenavi la pagination des liens sur hover*/ .wp-pagenavi a:hover { color: #ffffff!important; background: #0070fc!important; } /*style de la wp-pagenavi pages de texte*/ .wp-pagenavi .pages { background: none; } /*suppression de la frontière et du centre de la wp-pagenavi des liens*/ .wp-pagenavi { border-top: none; text-align: center; }

Essayez de lire ce que chacune des parties sont en train de faire. La première partie des styles les nombres, la prochaine styles le numéro de la page actuelle, la prochaine styls les numéros lors du survol, les nexts on se cache à l’arrière-plan autour de la pages, et le dernier supprime la frontière et les centres de l’ensemble de la pagination. Encore une fois, nous allons sur tout cela dans la vidéo, donc si vous êtes sérieux au sujet de l’apprentissage, assurez-vous de regarder qui.

Voici le résultat final à l’aide de l’WP-PageNavi plugin et CSS pour ajouter du style et notre Divi module de Blog pagination:

Divi blog pagination with the WP PageNavi plugin after adding the CSS customization0

Ça y est!

J’espère que vous avez apprécié l’apprentissage de la manière De Style Et de Personnaliser Les Divi Blog de la Pagination. Merci de partager vos pensées dans les commentaires ci-dessous. Si vous trouver de la valeur dans ce type de post, merci de vous inscrire parce que nous avons des tonnes de tutoriels en cours à être posté!

Nous avons plus de trucs cool à venir pour nos abonnés!

Merci de partager ce post!

Aller En Groupe

Recent Posts

How To Place Multiple Dynamic Content Modules Side By Side

Cette rapide Divi Pro Astuce va vous montrer comment placer du contenu dynamique modules côte à côte dans la même colonne avec un simple et facile solution.

How To Customize And Style The Divi Mobile Menu

Dans cette Divi tutoriel, je vais vous montrer comment personnaliser et le style de la Divi mobile menu avec CSS en utilisant le module de Menu.

How To Make The Entire Divi Blog Module Posts Clickable

Cette rapide Divi Conseil Pro dans notre module de blog tutoriel de la série va vous montrer comment faire de l’ensemble du blog de la zone dans la Divi module de Blog cliquable.

Laisser Une Réponse!

become partners with Pee Aye Creative

Nous envoyer une roundup e-mail une fois ou deux fois par mois avec des tutoriels et des nouveaux produits, c’est ce que vous obtiendrez!

Abonnez-vous à l’aide de notre Divi vidéos!

Visitez Notre Chaîne



Source