WordPress divi主题

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

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

让我们开始吧。

抢先看

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

divi中的样式分页

divi中的样式分页

入门

订阅我们的 Youtube 频道

对于本教程,您将需要以下内容:

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

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

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

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

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

分页字体

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

分页字体样式

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

分页字母间距

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

分页文本对齐

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

可点击空间

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

分页文字大小

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

分页线高度

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

fiverr建站WordPress程序员

分页文字阴影

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

分页活动页面

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

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

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

现在,让我们从如何在 Divi 模块中设置分页样式开始。

独立站选品工具

样式 Divi Gallery 模块和可过滤的投资组合模块分页

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

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

帖子数:4(这样你可以在分页中看到更多的页面链接)

节目名称:否
显示类别:否

默认情况下,Divi 将显示分页,因此将该选项设置为“是”。

高质量外链购买

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

divi中的样式分页

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

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

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

JasperAI 10000字免费额度试用
color: #0096eb !important;

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

其他快速 CSS 片段

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

要取出位于分页正上方的默认边框线,您可以在投资组合分页下输入以下 CSS:

border: none;

divi中的样式分页

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

WordPress备份工具updrafplus
border: 2px solid #dddddd;

divi中的样式分页

为了给你分页一个背景颜色,你可以在 Portfolio Pagination 下输入以下 CSS:

background: #333333;

divi中的样式分页

也适用于画廊模块

同样的设计设置也适用于图库模块。 事实上,您可以从 Filterable Portfolio Module 复制分页文本样式并将它们粘贴到 Gallery Module 中! 只要确保你也转移了任何 CSS 片段。

divi中的样式分页

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

divi中的样式分页

如果你想为你的 Filterable Portfolio 和 Gallery 模块的分页获得更高级的设计,你可以使用一些更高级的自定义 CSS。 我喜欢这个特定示例的原因是自定义 CSS 与模块的内置设置协同工作。

为了演示,让我们再次使用 Filterable Portfolio。 这一次,使用以下内容更新设计选项:

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

divi中的样式分页

在高级选项卡下,添加以下 CSS 类:

CSS 类:页面空间

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

divi中的样式分页

现在保存您的设置并打开页面设置弹出模式。 在高级选项卡下,在自定义 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;
}

divi中的样式分页

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

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

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

divi中的样式分页

造型博客模块和投资组合模块分页

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

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

divi中的样式分页

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

divi中的样式分页

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

divi中的样式分页

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

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

如果您想为整个 Divi 主题(包括博客模块和作品集模块)提供更高级的分页,您可以使用名为 WP-PageNavi 的流行插件将默认的 WordPress 分页替换为不同的分页。 该插件适用于 Divi。 该设计是基本的,但可以使用 CSS 轻松定制。

将插件添加到 Divi

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

divi中的样式分页

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

divi中的样式分页

插件设置

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

divi中的样式分页

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

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

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


/*styles...
5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题