如何在 WordPress 中加入水平分隔線(5 種方法)

03/18/2023

如何在 WordPress 中加入水平分隔線(5 種方法)

你是否想在 WordPress 的文章或頁面中添加一條水平分隔線?水平分隔線是一種很好的方式,可以將長篇文章分成多個小節、突出特別公告或促銷、並清楚地分開頁面的不同部分。

為什麼你應該在 WordPress 添加水平分隔線?

只需幾秒鐘,訪客就會決定是否離開你的頁面。根據設備的不同,有時瀏覽器會將你的博客文章顯示為長長的文字牆。許多讀者如果覺得內容難以閱讀,即使文章非常有價值,也會選擇離開。

添加水平分隔線可能是提高內容可讀性所需要的一點,這將改善可讀性,並最終提升你的博客文章和頁面的用戶參與度。此外,水平分隔線還可以突出關鍵點。例如,它可以幫助強調內容中的重要引述或過渡段落。

由於這是一個全面的指南,介紹了如何在 WordPress 中添加水平分隔線,你可能會發現使用我們的目錄來找到你想要的方法時很有幫助:

  • 在 WordPress 區塊編輯器中添加水平分隔線
  • 在 WordPress 經典編輯器中添加水平分隔線
  • 在你的文章和頁面中使用其他分隔符
  • 在 WPForms 中的 WordPress 表單添加頁面分隔線

在 WordPress 區塊編輯器中添加水平分隔線

要在 WordPress 區塊編輯器中使用水平分隔線,點擊 (+) 圖標以添加新區塊在你想要的位置。

接下來,從佈局元素部分選擇分隔符區塊。你也可以使用搜索欄來查找它。

添加後,你會在內容區域看到你的水平分隔線。

在 WordPress 區塊編輯器中設計水平分隔線

默認情況下,水平分隔線是貼近文章或頁面中心的淡灰色線條。

你可以通過點擊線條來選擇其區塊來更改其外觀。然後,位於屏幕右側的『區塊』編輯面板將會打開。

要更改線條的樣式,只需點擊樣式旁邊的小箭頭。你將看到不同的選項。

你可以更改水平線為其中之一:

  • 覆蓋你的文章內容全寬的一條寬線。
  • 顯示在文章中心的三個點。

注意:在某些 WordPress 主題中,寬線和默認線條都會覆蓋你的文章的整個寬度。

你還可以在顏色設置中改變水平線的顏色。只需點擊顯示的選項之一或使用『自定義顏色』鏈接來選擇任何顏色。

如果想回到默認的灰色,只需點擊顏色選項下的『清除』按鈕即可。

在這裡,我們的水平線是藍色並使用『寬』樣式。

在 WordPress 經典編輯器中添加水平分隔線

如果你仍在使用經典編輯器,那麼你可以添加基本的水平線。為此,只需編輯現有文章或頁面或創建一個新的。

如果你在文章編輯器上方的工具欄中只看到一排按鈕,點擊右側的工具欄切換圖標:

這將打開第二排按鈕,其中包括水平線選項。

現在,在你希望插入水平線的段落之間放置一個換行符。然後點擊水平線按鈕。它在第二排上的左邊第二個位置:

你的水平線將會是淡灰色並像這樣覆蓋整個文章寬度:

手動使用 HTML 添加水平分隔線

在某些罕見情況下,你可能需要手動在 WordPress 中添加水平分隔線。

如果是這樣,你可以簡單地使用 hr HTML 標籤在內容中添加:

<hr>

這將在文章內容中添加水平分隔線。

在你的文章和頁面中使用其他分隔符

默認 WordPress 區塊編輯器允許你在文章和頁面中添加多種類型的分隔符。

除了水平分隔線,佈局元素區塊組中的其他選項還包括間隔符、「更多」鏈接和頁面分隔塊。

間隔符區塊

間隔符用於在區塊之間添加空白。例如,如果你希望在文章末尾的特別優惠前添加一個細小的間隔,你可以使用間隔符。

在區塊編輯器中創建文章時,它會這樣顯示:

你可以自定義間隔的高度。

這是間隔符在你網站上的顯示方式:

「更多」區塊

如果你的主題在主博客頁面上顯示完整的文章(而不是摘要),那麼添加『更多』鏈接將在此點打斷你的文章。訪客可以點擊以閱讀更多。

上面圖像顯示的是你在內容編輯器中看到的。

下面是在你網站上訪客看到的顯示方式。

你可以在我們的指南中了解更多關於如何輕鬆自定義摘要的內容。

頁面分隔區塊

頁面分隔允許你將長篇博客分割成多個頁面。你無法對其進行任何方式的自定義。在你創建文章時,它顯示如下:

這是它在你網站上的顯示方式。

注意它使用頁碼並允許讀者選擇他們想要前往的頁面。

根據你的目標,這些任何一個都可能是添加水平線在 WordPress 中的好替代方案。

在 WPForms 中的 WordPress 表單添加頁面分隔線

如果你想在 WordPress 聯絡表單中插入分隔線而不是在文章或頁面中,也可以做到。我們將使用 WPForms 來進行這個操作。

首先,你需要下載、安裝並激活 WPForms 插件。如果你不確定如何操作,只需查看我們的分步指南,了解如何安裝 WordPress 插件。

接下來,在 WordPress 儀表板中前往 WPForms » 新增。

輸入表單的名稱,然後選擇模板。我們將使用『請求報價表格』模板。

將鼠標光標移至模板上方並點擊按鈕,以創建你的表單。

接下來,向下滾動左側添加欄位選項卡至高級欄位區段。

拖放頁面分隔線到你希望的位置。我們將其放在請求框之前。

你會看到表單現在分為兩部分。 WPForms 自動添加了一個『下一步』按鈕。

你可以更改『下一步』標籤,如果需要還可以在表單的第二頁添加『上一步』按鈕。只需點擊頁面分隔欄位以進行編輯。

完成後點擊右上角的保存按鈕保存你的表單。

現在可以將表單添加到網站中。

首先,你需要創建一個新文章或頁面或編輯現有文章或頁面。

點擊(+)以在文章或頁面中添加新區塊,並找到 WPForms 區塊。可以使用搜索欄或在小部件區段中查找。將該區塊添加到頁面。

現在,你會看到一個選擇表單的選項。

從下拉列表中選擇表單。

完成後,你可以發布文章或頁面。

接下來,檢查你網站上的表單外觀。

希望本教程能幫助你了解如何在 WordPress 中添加水平分隔線。如果你希望在文章和頁面中添加更多設計佈局元素,請查看我們的關於最佳拖放式 WordPress 页面构建器的文章,或閱讀我們的博客文章,了解如何在 WordPress 中創建自定形狀分隔線。

如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>