如何在WordPress中添加水平线分隔符(5种方法)

技术教程 2025年4月13日
3.18 0

您想在 WordPress 中的帖子或页面上添加一条水平线吗?

水平线分隔线是将长帖子分成更小的部分、突出显示特别公告或促销以及清楚地分隔页面的不同部分的好方法.

在本文中，我们将向您展示如何在 WordPress 中轻松添加水平线分隔符.

How to add a horizontal line in WordPress

由于这是关于如何在 WordPress 中添加水平线分隔符的综合指南，您可能会发现使用我们的目录很有帮助:

  • 如何在块编辑器中添加水平线分隔符
  • 如何在经典编辑器中添加水平线分隔符
  • 如何使用手动 HTML 添加水平线分隔符
  • 如何在 WordPress 中添加其他类型的间隔符和分页符
  • 如何将长的 WordPress 表单分成多个部分

在 WordPress 块编辑器中添加水平线

要使用 WordPress 块编辑器添加水平线，请单击 (+) 图标以在您希望该线所在的位置添加新块.

Adding a new block where you want your horizontal line

接下来，从 Layout Elements 部分选择 Separator 块或使用搜索栏搜索它.

Find and add the Separator block

添加后，您将在内容区域中看到水平线分隔线.

在 WordPress 块编辑器中设置水平线样式

默认情况下，水平分隔线是横跨帖子或页面中心的淡灰色线.

您可以通过单击该行选择其块来更改其外观.然后，"阻止"编辑面板将在屏幕右侧打开.

Click on the Separator block to select it and edit the settings

要更改线条的样式，只需单击样式旁边的小箭头.然后，您将看到不同的选项.

如果需要，您可以将水平线更改为其中之一:

  • 一条宽线，覆盖帖子内容的整个宽度.
  • 显示在帖子中心的三个点.

The different styles available for the Separator block

注意:在某些 WordPress 主题中，宽线和默认线都将覆盖您帖子的整个宽度.

您还可以在颜色设置下更改水平线的颜色.只需点击显示的选项之一，或使用"自定义颜色"链接选择任何颜色.

Change the color of the horizontal line

如果您想回到默认的灰色，只需点击颜色选项下的"清除"按钮.

这里，我们的水平线是蓝色的，并使用了"宽"样式.

A horizontal line that's been modified to be wide and blue

在 WordPress 经典编辑器中添加水平线

如果您仍在使用经典编辑器，则可以添加基本的水平线.为此，只需编辑现有帖子或页面或创建一个新帖子或页面即可.

如果您在帖子编辑器上方的工具栏中只看到一行按钮，请点击右侧的工具栏切换图标:

Click the Toolbar Toggle button to see the second row of icons

这将打开第二行按钮，其中包括水平线选项.

现在，继续并在您希望水平线所在的段落之间换行.然后您可以单击水平线按钮.这是第二行左起第二个:

The horizontal line button in the classic WordPress editor

您的水平线将是浅灰色.它会像这样覆盖整个帖子的宽度:

A horizontal rule created using the classic editor

使用 HTML 手动添加水平线分隔符

在极少数情况下，您可能需要在 WordPress 内容中手动添加水平线分隔符.

如果是这样，您只需在内容中使用 hr HTML 标签即可:

这将在您的帖子内容中添加水平线分隔符.

您可以在帖子和页面中使用的其他分隔符

默认的 WordPress 块编辑器允许您向帖子和页面添加多种类型的分隔符.

除了水平线分隔符之外，布局元素块组中的其他选项包括 Spacer、更多链接和分页符块.

间隔块

Spacer 可让您在块之间添加空白.例如，如果您希望在特别优惠之前在帖子末尾留出一点空隙，则可以使用 Spacer.

您可以自定义垫片的高度.以下是您在块编辑器中创建帖子时的外观:

The Spacer block in the block editor

以下是间隔符在您网站上的显示方式:

How the spacer block appears in a page or post

更多块

如果您的主题在您的主要博客页面上显示了完整的帖子(而不是摘录)，那么添加"更多"链接将在此时中断您的帖子.访问者可以点击阅读更多.

以下是您创建帖子时的外观:

The More block in the post editor

以下是更多链接在您的网站上的显示方式:

The Read More block in a post on the site

您可以在我们关于如何在 WordPress 中轻松自定义摘录的指南中了解有关摘录的更多信息.

分页符块

分页符可让您将长博客文章拆分为多个页面.您无法以任何方式对其进行自定义.这是您创建帖子时的外观:

The page break block shown in the block editor

以下是分页符在您网站上的显示方式:

The page break as it appears on a site

根据您的目标，任何这些都可能是在 WordPress 中添加水平线的不错选择.

使用 WPForms 在 WordPress 表单中添加分页符

如果您不想在帖子或页面中休息，而是想在 WordPress 联系表格中休息怎么办?你也能做到.为此，我们将使用 WPForms.

首先，您需要下载、安装并激活 WPForms 插件.如果您不确定如何安装，请查看我们关于如何安装 WordPress 插件的分步指南.

接下来，转到WPForms »在您的 WordPress 仪表板中添加新.

Creating a new form using WPForms

为您的表单输入一个名称，然后选择一个模板.我们将使用"请求报价表"模板.将鼠标光标移到模板上，然后单击按钮以创建表单.

Creating a quote form in WPForms

接下来，将左侧的"添加字段"选项卡向下滚动到"花式字段"部分.将分页符拖放到表单上您想要的任何位置.我们将它放在请求框之前.

Adding a page break in WPForms

您会看到表单现在分为两部分.WPForms 也自动添加了一个"下一步"按钮.

如果需要，您可以更改"下一个"标签，也可以添加一个"上一个"按钮以进入表单的第二页.只需点击分页符字段即可对其进行编辑.

Editing the page break field in WPForms

完成后保存您的表单，点击右上角的保存按钮.

您现在可以将表单添加到您的网站.首先，您需要创建一个新的帖子或页面，或者编辑现有的.

单击 (+) 将新块添加到您的帖子或页面并找到 WPForms 块.您可以使用搜索栏或查看小部件部分.将该块添加到您的页面.

Adding the WPForms block to your page or post

现在，从下拉列表中选择您的表单.

Choose your form from the dropdown list

完成此操作后，您可以发布帖子或页面并查看您的表单在网站上的外观.

The form with a page break on the website

我们希望本教程能帮助您学习如何在 WordPress 中添加水平线分隔符.如果您想为帖子和页面添加更多设计和布局元素，请查看我们关于最佳拖放 WordPress 页面构建器的文章.

WordPress(893)水平线(2)添加(37)
♥赞4

相关文章

发表回复