南开建站：Divi中分页样式的实用指南

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

divi有多个模块，包括分页(如图片库模块)，可以使用内置设置进行样式设计。其中一些模块(如blog和Portfolio)继承Divi主题(或WordPress)的默认分页，这对于某些站点来说可能过于简化。但是在插件的帮助下，您可以将整个主题的分页替换为一个更复杂的主题。然后，您可以使用CSS样式，无论您需要什么。南开建站

在本教程中，我将向您展示如何在整个Divi中进行分页。下面是我们将要讨论的问题：

• 在Divi中设计分页时要考虑的问题

• 设计Divi库模块和可过滤的组合模块分页

• 图库模块和可过滤组合模块的高级分页样式

• Blog模块和Portfolio模块分页的样式设计

• 使用WP-PageNavi插件向divi添加复杂分页

• 用自定义CSS设计WP-PageNavi分页

我们开始吧。

偷窥

这篇文章主要是关于如何进行分页。然而，这里有几个复杂的分页样式，我将向您展示如何构建。南开建站

开始

已安装并活动的Divi主题。

• 为了测试不同模块的分页设计，您需要一些模拟内容。例如，为了设计项目组合(或可过滤的组合)模块分页，您将需要在您的主题中添加大约12-16个项目，以便您有足够的内容允许分页生效。对于图片库模块，您还需要12-16张图片来填充图库。
• 如果要使用

  WP-PageNavi插件南开建站

  ，您将需要安装和激活插件。这是一个免费的插件，可以从WordPress目录从网站的WordPress仪表板下载。只需导航到plugin>AddNew并搜索WP-PageNavi。

  
  

一旦有了一些模拟内容，就可以创建一个新页面了。从WordPress仪表板，导航到Pages>AddNew。给页面一个标题并部署DiviBuilder。选择“从头开始构建”选项。然后单击以在前端构建。

现在，您可以开始测试一些分页设计了。

在Divi中设计分页时要考虑的问题

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

分页字体

分页是一个很好的地方，脱离主要字体您正在使用您的网站。你想选择最好的字体面向用户界面和导航。而且，由于分页主要包含数字，所以您需要确保字体显示所有高度和宽度相等的数字(排版专家称之为里里安和表格)。我的一些保守的最爱包括氧气，努尼托桑斯，和源桑斯专业。如果你有很多页面在你的分页，你可能需要释放一些空间，使用一个浓缩字体，如FjallaOne或RobotoCon299。

分页字体样式

您也可以尝试一些字体样式，以使您的分页分开。例如，您可以使用大写字体样式使“Next”和“前文”链接更显着，并且等于页码的高度。但是，考虑到链接已经在导航菜单中，添加下划线字体样式可能会有些多余。

分页字母间距

字母间距是一个很好的方式来增加一个更多的水平间距到您的分页。这可以增加一个不错的设计元素，并使导航脱颖而出。

分页文本对齐

在Divi中，您可以轻松地将分页对齐到页面的左、中或右。所以，当你设计你的网页时，不要忘记这一点。

可点击空间

重要的是要有足够的可点击空间为您的分页链接。默认情况下，这将是相当小的。您可以通过使用更大的文本或增加线条高度来增加可单击空间。但是你也可以在这些链接周围加上一些CSS。

分页文本大小

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

分页线高度

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

分页文本阴影

如果使用不当，文本阴影会分散注意力。除非你计划让它保持微妙，否则最好把它排除在外。它也可以用来在你的文本周围添加一个创造性的光辉，如果你想这样做的话。

分页活动页南开建站

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

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

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