如何為 WordPress 網站創建精美的分區分隔線

已發表: 2022-06-09

您想為您的 WordPress 網站添加一個分區分隔符嗎?

部分分隔符是分隔內容和創建視覺效果以吸引網站訪問者的絕佳方式。 但是,如果您缺乏設計和編碼經驗,則很難創建它們。

這聽起來像你嗎? 不用擔心; 我們將在本文中向您展示如何在沒有代碼的情況下創建網站分隔線。

什麼是 WordPress 中的分區分隔符?

在 WordPress 中,分區分隔器也稱為形狀分隔器。 它們允許您向頁面添加自定義形狀和效果,在內容之間創建引人入勝的過渡。

您可以在內容塊的上方和下方放置分區分隔符,以便更輕鬆地組織和分隔不同的主題。

網站分隔符有多種格式,例如具有 SVG 形狀的頁面分隔符和文本分隔符,它們是分隔文本塊的文本邊框。 在許多情況下,您還可以自定義分隔線。

使用形狀分隔器有什麼好處?

形狀分隔線是在您的網站上吸引註意力的有效工具。 它們使用戶停止滾動,將他們的注意力吸引到您不希望他們錯過的信息上。

一些網站所有者使用華麗的動畫和引人注目的圖像來吸引訪問者。 但是,形狀分隔器可以在視覺混亂較少的情況下完成相同的工作。

此外,形狀分隔器可以立即改變您的網站設計,而無需從頭開始創建新設計。

如何將花式分隔線添加到您的 WordPress 網站

正如我們前面提到的,您通常需要一些設計和編碼知識才能在 WordPress 中創建精美的分區分隔符。 但是,我們將分享 2 種在您的站點中添加分區分隔符的方法,而無需以下代碼。

目錄
  1. 方法 1:使用 SeedProd 創建網站分隔線
  2. 方法 2:在沒有插件的 WordPress 中創建分區分隔符

方法 1:使用 SeedProd 創建網站分隔線

對於第一種方法,我們將使用 SeedProd 將形狀分隔符添加到您的 WordPress 網站。

SeedProd WordPress website builder

SeedProd 是 WordPress 最好的網站建設者之一。 它使您無需代碼即可創建自定義 WordPress 主題、登錄頁面和響應式網站佈局。

它帶有數百個預製模板、大量內容元素和一個簡單的拖放式可視化編輯器,用於自定義您的 WordPress 頁面。

我們將在本指南中使用的功能之一是 SeedProd 的內置精美形狀分隔符。 它們讓您只需單擊幾下即可將有吸引力的形狀分隔符添加到任何帖子或頁面,無需編碼。

按照以下步驟使用 SeedProd 將形狀分隔符添加到 WordPress。

安裝並激活 SeedProd WordPress 插件

首先,單擊此處開始使用 SeedProd 並將插件下載到您的計算機。 然後,將插件 .zip 文件上傳到您的 WordPress 網站。

如果您需要幫助,可以按照本指南安裝 WordPress 插件。

注意:有免費版本的 SeedProd,但我們將使用高級版本的 SeedProd 來實現 Shape Divider 功能。

安裝並激活 SeedProd 後,轉到SeedProd » 設置並輸入您的插件許可證密鑰。

enter your license key

您可以通過登錄 SeedProd 網站並查看“下載”部分來找到您的許可證密鑰。

copy your seedprod license key

創建 WordPress 主題或登錄頁面

在 SeedProd 中有 2 種方法可以使用部分分隔符。

您可以創建一個新的 WordPress 主題並將形狀分隔線添加到不同的主題部分。 或者,您可以創建一個獨立的登錄頁面並將形狀分隔線添加到單個頁面。

以下是設置兩者的說明:

WordPress 主題

SeedProd 的主題構建器可讓您使用其拖放編輯器創建新的 WordPress 主題。

它會創建構成您的主題的所有文件,包括側邊欄、頁眉、頁腳、單個帖子等。然後您可以直觀地自定義每個文件,無需代碼。

Seedprod theme builder template files

當您激活新主題時,它將覆蓋您現有的 WordPress 主題,因此只有在您對丟失現有主題感到滿意時才選擇此選項。

按照本教程使用 SeedProd 創建自定義 WordPress 主題。

登陸頁面

SeedProd 的登錄頁面構建器允許您使用其拖放界面在 WordPress 中創建單個登錄頁面。 您可以完全自定義設計,但與主題生成器版本不同,它不會覆蓋您現有的主題。

SeedProd landing page dashboard

如果您想保留當前的 WordPress 主題但仍想使用形狀分隔符功能,這是一個很好的解決方案。

按照此分步指南在 WordPress 中創建登錄頁面。

創建 WordPress 主題或登錄頁面後,您可以繼續下一步。

使用部分分隔線自定義您的設計

要將形狀分隔線添加到 WordPress,請編輯主題模板或登錄頁面,這將打開 SeedProd 的可視頁面構建器。 我們將在本教程中編輯自定義 WordPress 主題的主頁。

edit homepage design

進入可視化編輯器後,您需要在頁面中找到要添加形狀分隔符的區域。 SeedProd 允許您將形狀分隔符添加到部分、列和行。

單擊您選擇的部分或行以在左側打開其設置面板。 在該面板中,單擊高級選項卡以查看更多自定義選項。

Open the advanced section settings panel

您將在面板底部看到形狀分隔符標題。 單擊標題以打開“形狀分隔線”設置。

Open the shape divider settings

首先,您可以選擇在部分的頂部或底部添加分隔線。

Add a shape divider to the top or bottom of a section

然後,您可以單擊下拉菜單為分隔線選擇 18 種不同的形狀。

Choose a section divider shape

選擇形狀後,SeedProd 將顯示用於自定義形狀外觀的額外設置。

Choose a section divider color

例如,您可以:

  • 更改形狀的顏色
  • 選擇自定義寬度和高度
  • 翻轉形狀
  • 將形狀放在前面
Change section divider width

您可以按照相同的步驟將形狀分隔線添加到部分的底部。 您只需單擊幾下即可創建一些引人注目的視覺效果。

bottom section divider WordPress

以下是您可以使用 SeedProd 的形狀分隔器創建的不同效果的更多示例:

山脈

SeedProd mountains shape divider

波浪

SeedProd waves shape divider

曲線

SeedProd curve fancy divider on columns

嘗試使用不同的網站分隔線,直到您對所有內容的外觀感到滿意為止。

在 WordPress 中發布您的精美分隔線

現在您的形狀分隔線已就位,您可以發布您的新設計。

如果您正在製作 WordPress 主題,您可以通過轉到 SeedProd 主題生成器並單擊“啟用 SeedProd 主題”切換到是位置來發布它。

enable seedprod theme

只需單擊“保存”按鈕上的下拉箭頭,然後單擊“發布”以獲得登錄頁面。

publish landing page seedprod

您現在可以訪問您的實時網站並查看您的部分分隔符。 這是我們的演示站點的示例,在我們的英雄背景圖像部分有部分劃分:

section divider example wordpress

方法 2:在沒有插件的 WordPress 中創建分區分隔符

您還可以使用內置的 WordPress 設置將分隔線添加到您的站點。 如果您不想安裝其他 WordPress 插件,此方法很有幫助。

但是,自定義選項更加有限。 例如,您只能添加不同的線條樣式並更改每個換行符的背景顏色。

我們建議將方法 1 用於高級自定義選項。 按照以下步驟在沒有插件的 WordPress 中添加水平線部分分隔線。

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

要使用 WordPress 塊編輯器添加水平部分分隔線,請打開帖子或頁面,然後在您想要分隔線的任何位置單擊加號 (+) 圖標。

add WordPress block

接下來,在搜索框中輸入“分隔符”,然後單擊分隔符塊。

add the separator block

將塊添加到頁面後,您會在每個文本部分之間看到一個水平分隔符。

WordPress section divider

您可以通過單擊右側面板中的默認、寬線或點來更改分隔線樣式。

change text divider style

您還可以在同一面板中更改分隔符背景顏色。

text divider background color

當您對所有內容的外觀感到滿意時,請更新或發布您的頁面以查看結果。

horizontal section divider example

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

按照這些說明使用 WordPress 經典編輯器將部分分隔符添加到您的網站。

編輯現有的帖子或頁面或創建一個新的。 如果您看不到所有編輯器設置,請單擊切換工具欄圖標。

toggle WordPress toolbar

接下來,單擊頁面上要添加分隔線的位置。 然後,單擊水平線圖標。

horizontal line divider WordPress

您的水平線分隔線將是黑色和白色或淺灰色,並將覆蓋您的整個帖子或頁面,如下所示:

horizontal section divider in WordPress classic editor

SeedProd 和您的小型企業

我們希望這篇文章能幫助您學會在 WordPress 中添加分區分隔符。 借助 SeedProd 強大的拖放式網站構建器,創建精美的形狀分隔線輕而易舉。

立即開始使用 SeedProd

SeedProd 在這裡幫助您以各種方式發展您的業務! 有關更多小型企業和 Web 開發技巧,請查看我們的博客。 以下是一些我們最喜歡的相關帖子:

  • 如何在 WordPress 上創建博客頁面
  • 如何在 WordPress 中添加作者框
  • 如何向 WordPress 添加自定義側邊欄

謝謝閱讀。 請在 YouTube、Twitter 和 Facebook 上關注我們,獲取更多有用的內容來發展您的業務。