关于如何在 Divi 中设置分页样式的便捷指南

分页是网站中经常被忽视的元素之一，尤其是在设计方面。 并且有多个地方可能适合在您的网站中使用分页。 基本上，分页（或分页菜单）允许用户浏览多个项目页面（例如帖子存档）。 这对于减少初始页面内容特别有用。

Divi 有多个模块，包括可以使用内置设置设置样式的分页（如画廊模块）。 其中一些模块（如博客和投资组合）继承了 Divi 主题（或 WordPress）的默认分页，对于某些站点可以过度简化。 但是在插件的帮助下，您可以用更复杂的分页替换整个主题的分页。 然后，您可以根据需要使用 CSS 设置样式。

在本教程中，我将向您展示如何在整个 Divi 中设置分页样式。 这是我们将要讨论的内容：

• 在 Divi 中设置分页样式时需要考虑的事项
• 造型 Divi Gallery 模块和可过滤的作品集模块分页
• 图库模块和可过滤作品集模块的高级分页样式
• 样式博客模块和投资组合模块分页
• 使用 WP-PageNavi 插件向 Divi 添加复杂的分页
• 使用自定义 CSS 设置 WP-PageNavi 分页样式

让我们开始吧。

抢先看

这篇文章主要是关于如何设置分页样式。 但是，这里有一些复杂的分页样式，我将向您展示如何构建。

入门

订阅我们的 YouTube 频道

对于本教程，您将需要以下内容：

• 已安装并激活 Divi 主题。
• 要测试不同模块的分页设计，您需要一些模拟内容。 例如，为了设计作品集（或可过滤的作品集）模块分页，您需要将大约 12-16 个项目添加到您的主题中，以便您有足够的内容让分页生效。 对于图库模块，您还需要大约 12-16 张图像来填充图库。
• 如果您要使用 WP-PageNavi 插件，则需要安装并激活该插件。 这是一个免费插件，可以从您站点的 WordPress 仪表板中的 WordPress 目录下载。 只需导航到插件 > 添加新并搜索 WP-PageNavi。
  

准备好一些模拟内容后，您就可以创建新页面了。 从您的 WordPress 仪表板，导航到页面 > 添加新。 为您提供页面标题并部署 Divi Builder。 选择“从头开始构建”选项。 然后单击以在前端构建。

现在您已准备好开始测试一些分页设计。

在 Divi 中设置分页样式时需要考虑的事项

一般来说，您可能不想对分页的设计过于疯狂，因为与任何导航菜单一样，保持简单和直观很重要。 但是，在 Divi 中设计分页时，您可能需要考虑以下几点。

分页字体

分页是摆脱网站使用的主要字体的好地方。 您想选择适合用户界面和导航的最佳字体。 由于分页主要包含数字，因此您需要确保字体显示所有数字的高度和宽度相等（排版专家称之为衬里和表格）。 我最喜欢的一些保守派包括 Oxygen、Nunito Sans 和 Source Sans Pro。 如果你的分页中有很多页面，你可能需要使用像 Fjalla One 或 Roboto Condensed 这样的压缩字体来释放一些空间。

分页字体样式

您还可以尝试一些字体样式来设置您的分页。 例如，您可以使用大写字体样式使“下一个”和“上一个”链接更加明显并等于页码的高度。 但是，考虑到链接已经在导航菜单中，添加下划线字体样式可能有点多余。

分页字母间距

字母间距是为分页添加更多水平间距的好方法。 这可以添加一个很好的设计元素并使导航脱颖而出。

分页文本对齐

在 Divi 中，您可以轻松地将分页与页面的左侧、中间或右侧对齐。 因此，无论何时设计网页，都不要忘记这一点。

可点击空间

为分页链接留出足够的可点击空间很重要。 默认情况下，这将是相当小的。 您可以通过使用较大的文本或增加行高来增加可点击的空间。 但是您也可以使用一些 CSS 在这些链接周围添加一些填充。

分页文字大小

分页文本大小通常相当小。 这可能是为了防止它分散用户对页面内容的注意力。 但是，较大的文本大小可以增加分页链接的可点击空间，并使用户更容易注意到。 我喜欢对较大的分页文本使用 vw 长度单位，以便它可以很好地随浏览器和内容缩放。

分页行高

由于分页通常停留在一行上，因此您可以为链接添加更多行高以增加额外的可点击空间。

分页文字阴影

如果使用不当，文本阴影可能会分散注意力。 除非您打算保持微妙，否则最好将其排除在外。 如果你想要那种东西，它也可以用来在你的文本周围添加创造性的光芒。

分页活动页面

分页的这一方面对于让用户在导航时知道他们当前所在的页面很重要。 活动页面链接和非活动页面链接的样式之间应该有明显的对比。 默认情况下，Divi 将使用主题定制器中设置的主要强调色作为 Divi 中活动页面链接的颜色。 但是，您可以使用 CSS 行覆盖它。

对于具有分页的模块，Divi 具有内置的设计选项，可以为分页的不同元素设置样式。 此外，您可以在高级选项卡中轻松添加一些 CSS 片段，以便在一个方便的地方更好地控制设计。

但是对于主题级别的分页，您可以使用带有自定义 CSS 的 WP-PageNavi 插件获得复杂的解决方案（稍后会详细介绍）。

现在，让我们从如何在 Divi Modules 中设置分页样式开始。

造型 Divi Gallery 模块和可过滤的作品集模块分页

在新页面上激活 Divi Builder 后，创建一个具有一列行的新常规部分。 然后向该行添加一个可过滤的投资组合模块。 如前所述，确保您创建了 12-16 个项目，以便您可以看到分页。

在可过滤的投资组合设置中，更新以下内容：

帖子数：4（因此您可以在分页中看到更多页面链接）

节目名称：NO
显示类别： 否

默认情况下，Divi 将显示分页，因此将该选项设置为 YES。

您应该会在投资组合的右下角看到分页。

要设置分页样式，请转到设计选项卡并打开分页文本切换以查看所有可用选项。 更新以下内容：

布局：网格
分页字体：Source Sans Pro
分页字体样式：TT
分页文本对齐：居中
分页文字颜色：#cccccc
分页文字大小：4vw（桌面），38px（平板电脑和手机）
分页字母间距：1vw
分页行高：2em

然后单击高级选项卡并在分页活动页面下添加以下 CSS 片段：

color: #0096eb !important;

通过使用更大的行高使文本更大，为用户提供更多可点击的空间。 将对齐更改为居中并添加一点字母间距有助于使分页更加明显。 自定义分页文本颜色与对比活动页面颜色有助于用户了解他们在哪个页面上。

其他快速 CSS 片段

这里有一些快速简单的 CSS 片段来改变分页设计。

要去掉位于分页正上方的默认边框线，您可以在 Portfolio Pagination 下输入以下 CSS：

border: none;

为了给你的分页一个完整的边框，你可以在 Portfolio Pagination 下输入以下 CSS：

border: 2px solid #dddddd;

要为您的分页提供背景颜色，您可以在 Portfolio Pagination 下输入以下 CSS：

background: #333333;

也适用于画廊模块

同样的设计设置也适用于画廊模块。 事实上，您可以从可过滤组合模块中复制分页文本样式并将它们粘贴到图库模块中！ 只要确保你也转移了任何 CSS 片段。

图库模块和可过滤作品集模块的高级分页样式

如果您想为可过滤组合和图库模块的分页获得更高级的设计，您可以使用一些更高级的自定义 CSS。 我喜欢这个特定示例的地方在于，自定义 CSS 与模块的内置设置协同工作。

为了演示，让我们再次使用可过滤组合。 这一次，使用以下内容更新设计选项：

布局：网格
分页文字大小：16px
分页行高：2.5em

在高级选项卡下，添加以下 CSS 类：

CSS 类：页面空间

这将允许我们的 CSS 仅应用于此模块。

现在保存您的设置并打开页面设置弹出模式。 在高级选项卡下，在自定义 CSS 框中添加以下 CSS 代码。

.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;
}

代码就位后，您可以看到分页现在为每个页面链接提供了更多的可点击空间。 并且链接还添加了背景颜色，使它们看起来更像是可点击的按钮。 悬停时的每个链接也会添加一个微妙的边框。 活动页面链接以对比鲜明的深色背景和较浅的文本颜色脱颖而出。

此代码将为可过滤的投资组合模块和图库模块设置分页样式。 只需确保将 CSS 类“pagi-space”添加到模块中即可生效。

这是可过滤投资组合模块的结果。

样式博客模块和投资组合模块分页

博客模块和投资组合模块继承了默认的 WordPress 分页，允许您通过指向“旧条目”的链接和指向“下一个条目”的链接浏览您的帖子存档。

以下是 Divi 主题中博客存档页面上的默认分页：

博客模块和投资组合模块使用相同的分页。

如果您使用博客模块（或投资组合模块），您可以使用内置设置设置分页文本的样式。

对于大多数情况，这是一个简单而优雅的解决方案。 但是，如果您正在寻找更复杂的分页来替换默认的 Divi/WordPress 分页，那么有一个非常简单的解决方案可能会让您大吃一惊。

使用 WP-PageNavi 插件向 Divi 添加复杂的分页

如果您想要对整个 Divi 主题（包括博客模块和投资组合模块）进行更高级的分页，您可以使用名为 WP-PageNavi 的流行插件将默认的 WordPress 分页替换为不同的分页。 这个插件适用于 Divi。 该设计是基本的，但可以使用 CSS 轻松定制。

将插件添加到 Divi

如果您还没有这样做，请按照帖子顶部的“入门”部分中的说明继续安装插件。 安装并激活插件后，新的分页形式将自动显示在整个主题中。

它也会影响博客模块和投资组合模块。

插件设置

您可以通过导航到设置 > WP-PageNavi 从 WordPress 仪表板中找到插件设置。

这些设置主要用于自定义显示的功能和文本内容。 但是，如果要设置分页样式，则需要使用一些自定义 CSS。

使用自定义 CSS 设置 WP-PageNavi 分页样式

由于您可能希望为整个主题设置分页样式，因此将 CSS 添加到主题定制器或您的子主题 style.css 文件是最有意义的。 继续将以下 CSS 放入 Theme Customizer Additional CSS 框中：

/*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;
}

这是最终结果。

在博客模块和投资组合模块中设计 WP-PageNavi

如前所述，博客模块和投资组合模块继承了默认的 WordPress 页面导航。 由于这已被 WP-PageNavi 的新复杂分页取代，因此模块也将显示此新分页。

您可以使用内置的分页文本设计选项为分页添加更多样式。

请记住，使用外部自定义 CSS 时，某些选项可能无法按预期工作。

最后的想法

在 Divi 中构建网站时，分页不必继续成为事后的想法。 有一些有用的内置选项可以帮助那些使用分页的模块。 使用一些自定义 CSS，您可以创建您想要的任何样式。 WP-PageNavi 插件是一个优雅的解决方案，用于在整个 Divi 主题中添加复杂的分页。 它不仅可以与 Divi 无缝协作，还为您提供了可以轻松自定义的其他选项。 设计 WP-PageNavi 分页样式确实需要一些 CSS，但希望本文中使用的模板能让您走上正轨。

这篇文章中的示例设计故意简单。

我期待在评论中收到您的来信。

干杯!