如何在Divi中創建流程圖佈局

了解如何在 Divi 中創建流程圖佈局為在網站上交流流程和想法開闢了許多機會。 在某些情況下，流程圖可用於解釋涉及大量項目的極其複雜的想法。 然而，在網站上，這些更複雜的流程圖可能難以實現，特別是如果您希望它具有響應性。

在本教程中，我們將向您展示如何創建可在您的網站上使用的簡單、有效且響應迅速的實用流程圖佈局。 基本上，我們將通過 Divi 邊框、分隔線、簡介和轉換選項發揮創意，以創建流程圖佈局，您可以根據自己的需要輕鬆自定義。 另外，我們只會使用 Divi 的內置選項來創建它，因此您不必擔心添加自定義代碼或插件。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的流程圖設計的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

如何在Divi中創建流程圖佈局

第 1 步：創建帶有中心模糊的行

要開始在 Divi 中創建流程圖佈局，我們將從創建包含居中簡介的行開始。 這將是流程圖中的第一項。

部分填充

首先，打開默認部分的部分設置並將底部填充設置為 0px。

行

在該部分內，添加一列行。

打開行設置並更新以下設計設置：

• 天溝寬度：1
• 填充：0px 頂部，0px 底部

這兩個設計設置將用於此流程圖佈局中的所有行，以確保不會在模塊和行之間添加額外的空間。

模糊模塊設計

為了創建我們的第一個流程圖項目，我們將使用一個模糊模塊。

向該行添加一個新的模糊模塊。

模糊設置

打開模糊設置。 在內容選項卡下，您可以保留默認的標題和正文文本。

然後使用小圖標圖像更新圖像或使用內置的 Divi 圖標之一。 在本教程中，我將使用 Crowdfunding Layout Pack 中的圖標。

然後給blurb一個背景顏色：

• 背景顏色：#f8f8f8

在設計選項卡下，更新以下內容：

• 文本對齊：居中
• 最大寬度：400px（桌面和平板電腦），90%（手機）
• 模塊對齊：居中
• 填充：頂部 6%，底部 6%，左側 3%，右側 3%

注意：此簡介大小將由流程圖佈局中的所有簡介共享。 這個尺寸適用於這種佈局，因為流程圖永遠不會有超過兩個相鄰（並排）的簡介。 這使我們能夠保持設計的響應性，並且在平板電腦和手機上看起來也很棒。

接下來，給blurb一個邊框，如下所示：

• 邊框寬度：2px

步驟 2：使用垂直線和箭頭創建連接線

對於流程圖佈局的下一部分，我們將創建一個具有居中垂直線和箭頭的連接器行。 此行將用於連接需要向下繼續頁面的流程圖內容行。

在這種情況下，我們希望通過在具有居中模糊模塊的前一行下方添加一條線和箭頭來開始流程圖。

從上一行創建新行和復制/粘貼行樣式

為此，請在前一行下添加一個新的單列行。

使用“更多選項”菜單（或右鍵單擊選項），從上面的前一行複制行樣式並將它們粘貼到新行。

創建垂直分線器

要創建垂直線分隔線，請向該行添加一個新的分隔線模塊。

在分隔線設置下，更新設計設置如下：

• 線條顏色：#333333
• 線位置：底部
• 分隔線重量：150px
• 寬度：2px
• 模塊對齊：居中
• 邊距：-1px 底部

在高級選項卡下，隱藏溢出如下：

• 水平溢出：隱藏
• 垂直溢出：隱藏

使用 Blurb 模塊創建箭頭

接下來，我們將使用模糊模塊創建一個箭頭圖標以位於分隔線的頂部。

要創建箭頭，請在分隔線下添加一個新的模糊模塊。

箭頭模糊設置

在模糊設置下，取出默認標題和正文，然後單擊以使用底部箭頭圖標（見截圖）。

在設計選項卡下，更新以下內容：

• 圖標顏色：#bbbbbb
• 圖像/圖標對齊方式：居中
• 圖標字體大小：50px（桌面），40px（平板電腦和手機）

• 最大寬度：50%
• 模塊對齊：居中
• 高度：50px（桌面），40px（平板和手機）

在高級選項卡下，將以下 CSS 添加到 Blurb 圖像：

margin-bottom: 0px;
background: #ffffff;

一旦我們將圖標放置在線條的頂部，這將去除模糊的默認邊距並添加一個白色背景，以便在圖標和線條之間創建空間的外觀。

要將箭頭放在行的頂部，請更新以下內容：

• 位置：絕對
• 地點：中心
• Z指數：10

第 3 步：使用相鄰的流程圖模糊和箭頭創建一行

一旦連接器行完成，我們將添加另一行多個相鄰的簡介以繼續流程圖設計。

要添加該行，只需將第一行（我們在佈局頂部創建的帶有居中模糊的行）複製並粘貼到連接器行下方。

打開行設置並更新以下內容：

• 最大寬度：50%
• 邊框寬度：2px

50% 的最大寬度對於佈局響應式工作很重要。 它將確保在行的右側和左側溢出的簡介不會超過瀏覽器寬度。

在左邊界線上創建流程圖模糊

現在我們的邊框已添加到行中，我們將把模糊定位在左邊框線的頂部。

為此，請更新以下設計設置：

• 模塊對齊：左
• 邊距：頂部 70 像素，底部 70 像素

• 變換平移 X 軸：-50%

這是使簡介水平居中位於邊界線頂部的關鍵。

在右邊界線上創建相鄰流程圖模糊

要在右邊界線上添加另一個宣傳語，請複制現有的宣傳語。

要將模糊定位在右邊界線上，請轉到高級選項卡並為其指定絕對位置：

• 位置：絕對
• 位置：右中心

然後更新邊距和轉換翻譯選項如下：

• 保證金：無
• 變換 平移 Y 軸：-50%
• 變換 平移 X 軸：50%

向每條邊界線上的角添加箭頭模糊

為了使流程圖更清楚線條的前進方向，我們將在行的邊界線上添加額外的箭頭圖標。

左上箭頭

要將箭頭添加到左上邊界線，請複制我們在連接器行中創建的箭頭說明並將其拖到包含相鄰說明的行中。

打開重複的箭頭模糊並將圖標更改為向左箭頭。

然後更新箭頭模糊的位置位置：

• 位置：左上角

最後，更新transform translate選項如下：

• 變換 平移 Y 軸：-50%

右上箭頭

要創建位於右上角邊界線上的箭頭，請複制我們剛剛創建的“左上角”箭頭。 然後打開設置，更改位置位置：

• 位置：右上角

此外，使用右箭頭更新箭頭圖標。

左下箭頭

要創建位於左下邊界線上的箭頭，請複制我們剛剛創建的“右上角”箭頭。

然後打開設置，更改位置位置：

• 位置：左下角

接下來，更新轉換翻譯選項：

• 變換 平移 Y 軸：50%

右下箭頭

要創建位於右下邊界線上的箭頭，請複制我們剛剛創建的“左下”箭頭。

然後打開設置，更改位置位置：

• 位置：右下角

此外，使用左箭頭更新箭頭圖標。

放置所有箭頭後，您可以使用圖層視圖更新每個箭頭的標籤。

步驟 4：添加另一個連接器行

一旦我們完成了帶有兩個相鄰流程圖簡介和所有箭頭的行，我們可以通過添加另一個連接器行來繼續流程圖。

為此，複製我們在上面創建的連接器行並將其粘貼到包含相鄰流程圖簡介的行下方。

步驟 5：使用右邊界線連接器自定義流程

在現有的流程圖設計中，流程從最上面的項目開始，然後分支到左右相鄰的項目，然後回到中間並進行到下一個居中的項目。 為了自定義流程，我們將復制該部分，以便我們可以自定義流程圖以在左側相鄰的宣傳項目上停止並從右側的宣傳項目繼續。

重複部分

為此，首先複製流程圖內容的整個部分。

添加另一個左模糊項

在副本（底部）部分中，在包含兩個相鄰廣告的行中找到左側廣告。 然後復制左側的宣傳語以在其正下方創建一個新的宣傳語。

刪除底部箭頭和邊框

接下來，刪除左下箭頭和右下箭頭模糊。

打開包含多個模糊的行的行設置並取出底部邊框：

• 底部邊框寬度：0px

創建帶有右邊界線連接器的行

現在我們要使用右邊界線連接器自定義流程圖的設計，該連接器將連接行的右邊界線與下方的連接器行。

為此，我們將創建另一行並在右側添加自定義分隔線和箭頭模糊。

在現有行下方添加一個新的一列行，其中包含三個簡介。

更新行的設計設置如下：

• 天溝寬度：1
• 最大寬度：50%
• 填充：0px 頂部，0px 底部

接下來，向行添加右邊框。

• 右邊框寬度：2px

然後在行中添加一個分隔模塊。

更新分頻器設置如下：

• 線條顏色：#333333
• 線位置：底部
• 分隔線重量：2px
• 寬度：50%
• 邊距：-2px 底部

在高級選項卡下，更新分隔線位置：

• 位置：絕對
• 位置：右下角

分隔線就位後，從第一部分的第三行複制右下箭頭模糊，並將其粘貼到帶有右側分隔線的行中。

打開剛剛複制和移動的箭頭模糊的設置並更新以下內容：

• 位置：默認

• 模塊對齊：右

停止左邊界線的流動

現在，有一些左邊界線暴露在左下角的宣傳語下。 要隱藏它，只需取出底部宣傳語的底部邊距。

步驟 6：使用左邊界線連接器更新行

您的流程圖可能還需要有一個左邊界線連接器。 要創建它，我們可以使用右邊界線連接器更新行，如下所示：

• 左邊框寬度：2px
• 右邊框寬度：0

使用新位置更新行內的分隔線：

• 位置：左下角

然後更新箭頭模糊的對齊方式：

• 模塊對齊：左

並將圖標更改為向右箭頭。

最後結果

查看最終結果。 我繼續複製了第二部分，並在其中添加了左邊界線連接器，以便您可以看到兩者。

最後的想法

在本教程中，我們創建了一個有用的流程圖佈局，任何人都可以使用它通過令人驚嘆的響應式設計向訪問者傳達流程和想法。 使用它來展示服務或設計過程、創建信息圖或以新方式引導客戶瀏覽內容。 希望它對您的下一個項目有用。

我期待在評論中收到您的來信。

乾杯!