Divi设置和自定义博客翻数字页码
作者:小朱笔记
发布日期:2020年12月18日
摘要:默认的Divi文章分类太难看了,不利于翻页查找文章,可以通过CSS或插件设置数字翻页,这样就比较美观,数字翻页 […]

默认的Divi文章分类太难看了,不利于翻页查找文章,可以通过CSS或插件设置数字翻页,这样就比较美观,数字翻页效果如下:

Divi设置和自定义博客翻数字页码 7

一、将Divi Blog分页文本链接更改为按钮

1、默认设置Blog分页

Divi设置和自定义博客翻数字页码 9

2、将Divi Blog分页文本链接更改为按钮。设置CSS(如果你使用的是免费的Divi子主题,将代码放入style.css 文件中。否则,将代码放在Divi>主题选项>自定义CSS 代码框中。

/*style the Divi blog pagination buttons*/

.pagination .alignleft a,
.pagination .alignright a {
  color: #ffffff;
  background: #0071fc;
  border: 2px solid #0070fc;
  padding: .7em 1.3em;
  border-radius: 50px;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
}

/*style the Divi blog pagination buttons on hover*/

.pagination .alignleft a:hover,
.pagination .alignright a:hover {
  background: transparent;
  color: #0070fc;
  border: 2px solid #0070fc;
  transition: all 0.3s ease-in-out;
}

二、使用WP-PageNavi插件添加页码

1、安装插件,设置页码。

Divi设置和自定义博客翻数字页码 11

2、设置CSS优化外观。

/*style the wp-pagenavi pagination links*/

.wp-pagenavi a,
.wp-pagenavi span {
  color: #000000;
  background: #f1f3f5;
  font-size: 1em !important;
  line-height: 1em;
  font-weight: bold !important;
  padding: 0.45em 0.8em !important;
  border-radius: 100px;
  transition: all .5s;
}


/*style the wp-pagenavi current page number*/

.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #0070fc !important;
  border-radius: 100px;
}


/*style the wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {
  color: #ffffff!important;
  background: #0070fc!important;
}


/*style the wp-pagenavi pages text*/

.wp-pagenavi .pages {
  background: none;
}


/*remove border and center the wp-pagenavi links*/

.wp-pagenavi {
  border-top: none;
  text-align: center;
}
相关文章

官方正版Divi主题和EXTRA主题插件终身授权出售

小朱笔记出售正版的Divi主题(本站使用主题)以及配套插件的终身授权。永久可以升级,而且不限网站数量。 关于主题和插件,你可以自行去Divi官网了解详细功能和官方价格。本站出售的授权为官方终身LIFETIME ACCESS。 正版授权,可在线升级,官方正版中文,绝非盗版、汉化版和破解版。 官方正版5套: Divi主题...

Divi默认Blog模块优化列表布局

Divi Blog模块默认有两种布局:网格和列表,但默认的样式都不怎么好看,利用css优化列表布局,使用blog分类展示更美观。达到以下展示效果: 优化Divi Blog模块图像在左侧,内容在右侧 第一步:将Blog模块设置布局:列表(虽然默认非常难看,但通过以下CSS就可以改变效果)...

Divi builder设计弹出式窗口演示

使用Divi builder建站,设计Divi的弹出窗口,需要使用到一个弹出插件:Popups for Divi(免费):演示网站:https://www.zhudc.com/demo/popup-id 1、任意窗口都可以设计弹出,2、支持页面,整站弹出,无限制,3、支持按钮或链接触发弹出窗口,等等。 操作教程非常教程:...

评论

0条评论

递交一条评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

欢迎来到我的博客!

好记性不如烂笔头

为什么要写博客?

记性不好。

本站所有内容都是我在工作中所遇到的问题,通过搜索引擎查到资料,有自己原创经验分享,有收集来的,记录并分享,方便自己以后查阅。

主要:建站资料,网络推广,服务器,软件分享,办公软件操作,阿里巴巴国际站,国外社交平台,各类工具等等。

我的收藏,希望对你有帮助。

收藏本站(Ctrl+d)加入收藏