如何使用 Divi 的效率功能將新的設計風格轉移到另一個頁面

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的家具店佈局包將新的設計風格轉移到另一個頁面。 隨著所有新佈局包的出現，您可能希望使用新佈局包的樣式更改現有頁面的樣式。 除了替換整個頁面，您還可以使用 Divi 的效率功能來轉移設計風格。 Visual Builder 中包含的最新選項之一是跨頁複製和粘貼功能。 這將允許您在整個佈局中進行許多更改，而無需觸及設計元素的設置。

但當然，每個佈局都是獨一無二的，這意味著您還必須應用一些手動更改。 好消息是，您可以一鍵將這些手動設置擴展到頁面上的類似元素。 這篇文章希望能幫助你在轉移設計風格時遵循一定的結構。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下結果。

方法

頁面結構各不相同，這就是為什麼很難一鍵完全轉換設計風格的原因。 但是使用 Divi，您可以使用效率功能來加快流程。 我們將結合跨頁複製粘貼功能、擴展樣式功能和查找和替換功能，以節省將設計樣式轉移到現有頁面的時間，而無需更改頁面結構。

第 1 部分：打開彼此相鄰的兩個頁面

我們將首先打開彼此相鄰的兩頁。 現有頁面和包含我們要應用的設計風格的新頁面。 我們將採用家具店佈局包的登陸頁面（我們想要應用到現有頁面的設計風格）和託管公司佈局包的登陸頁面（我們想要改變的頁面）。

第 2 部分：重置某些部分設置

第二部分將是關於重置某些部分設置。 您需要重置的設置因佈局而異，但通常包括背景設置和分隔線設置。

第 3 部分：為英雄部分使用 Divi 的跨頁複製粘貼和擴展樣式功能

然後，我們可以開始使用 Divi 的跨頁複製粘貼功能來開始更改內容。 自然而然的事情是從英雄部分開始。 我們將復制新設計風格的設置並將它們粘貼到現有頁面上，將英雄部分中的每個設計元素更改為新設計風格。 之後，我們會將這些樣式擴展到頁面上的類似元素。

第 4 部分：進行手動更改（根據佈局）和使用效率功能

如前所述，每個佈局都是獨一無二的。 這就是為什麼對現有頁面進行手動更改也是必要的。 進行少量更改後，您可以擴展樣式或使用查找和替換將其應用於頁面上的類似元素。

第 5 部分：添加設計特徵

最後但並非最不重要的一點是，您還可以向現有頁面添加某些設計特徵。

第 1 部分：打開彼此相鄰的兩個頁面

使用家具店佈局包的登陸頁面使用佈局創建新頁面

現在我們已經完成了這篇文章的方法部分，讓我們開始使用 Divi！ 使用家具店佈局包的登錄頁面添加一個新頁面。

使用託管公司佈局包的登陸頁面創建新頁面

也使用託管公司佈局包的登錄頁面創建另一個頁面。 我們將用家具店佈局包的登錄頁面設計替換此佈局的設計風格。

第 2 部分：重置某些部分設置

重置託管公司登陸頁面的部分特定設置

打開英雄部分

一旦您接近兩個佈局，請繼續打開託管公司登錄頁面的英雄部分設置。

重置部分背景並擴展到所有部分

轉到背景設置並通過右鍵單擊並單擊重置背景來重置選項。 完成後，您可以將這些背景樣式擴展到頁面上的所有部分，以確保頁面上沒有任何部分包含背景元素。

重置分隔線並擴展到所有部分

對分區分隔符執行相同的操作，以確保頁面上的所有分區分隔符都消失了。

第 3 部分：為英雄部分使用 Divi 的跨頁複製粘貼和擴展樣式功能

跨頁複製粘貼英雄部分元素

部分設置

是時候開始使用跨頁複製粘貼選項了！ 我們將修改英雄部分中的每個設計元素。 首先複製家具店登錄頁面上的英雄部分樣式。 然後，返回託管公司登錄頁面並粘貼複製的部分樣式。

行設置

對行做同樣的事情。

標題文本模塊

複製標題文本模塊的模塊樣式，並將它們應用於託管公司登錄頁面的標題。

正文模塊

接下來打開描述文本模塊並複製文本樣式。 完成後，將它們應用於託管公司頁面上的文本模塊。

擴展樣式

應用新的文本樣式後，繼續將這些樣式擴展到整個頁面的所有模塊。

在需要的地方將文本方向改回居中

您會注意到左側文本方向將應用於整個頁面的所有設計元素。 您可以保持這種方式或手動更改文本方向。

按鈕設置

您需要應用新模塊樣式的英雄部分中的最後一個模塊是按鈕模塊。

擴展按鈕設置的樣式

我們將擴展特定的按鈕設置，而不是擴展整個按鈕模塊樣式。

擴展間距樣式

隨著間距設置。

擴展框陰影的樣式

還有框陰影設置。

複製粘貼剩餘元素一次 + 擴展樣式

分隔線

我們還需要復制並粘貼分隔線模塊樣式，並使它們應用於託管公司登錄頁面上的分隔線。

擴展樣式

同樣，在整個頁面中擴展此模塊的樣式。

第 4 部分：進行手動更改（根據佈局）和使用效率功能

佈局特定更改

查找和替換標題字體

是時候開始進行一些手動更改了！ 我們要做的第一件事是匹配字體。 打開頁面上的文本模塊，找到整個頁面使用的 Rubik 字體。 然後，單擊“查找和替換”並將字體替換為 Montserrat。

查找和替換標題字體粗細

對字體粗細做同樣的事情。 選擇 Light 而不是使用 Medium。

查找和替換圓角

我們還通過使用“查找和替換”並將“0px”應用於整個頁面的每個角來移除整個頁面的圓角邊框。

在部分中重置 CTA 背景設置和擴展樣式

繼續在頁面上找到號召性用語模塊並重置第一個模塊的後台設置。 然後，將這些樣式擴展到該部分中的所有號召性用語。

在部分中查找和替換 CTA 背景顏色

完成後，將出現默認背景顏色。 在整個部分中查找並替換此顏色並將其更改為“#1a2545”。

在部分中查找和替換 CTA 文本顏色

在整個部分中也將文本顏色替換為“淺色”。

更改定價表按鈕設置

然後，轉到頁面上的定價表並更改按鈕設置：

• 按鈕背景顏色：#ef6f49
• 按鈕邊框寬度：8px
• 按鈕邊框顏色：#ef6f49
• 按鈕邊框半徑：0px
• 按鈕字母間距：2px（默認），1px（懸停）
• 按鈕字體：蒙特塞拉特
• 字體粗細：半粗體
• 字體樣式：大寫
• 按鈕對齊：左

擴展定價表和 CTA 模塊的樣式

將新按鈕設置擴展到整個頁面的所有定價表和號召性用語模塊。

第 5 部分：添加設計特徵

部分背景顏色 #1

在本教程的最後一部分，我們將手動添加一些設計特徵。 這包括但不限於背景設置。 打開下面打印屏幕中標記的部分並更改背景顏色。

• 背景顏色：#f7f3ec

部分背景顏色 #2

對下面的部分做同樣的事情。

• 背景顏色：#f7f3ec

部分漸變背景 #1

然後，在下面的打印屏幕中找到該部分並添加漸變背景。

• 顏色 1：#ffffff
• 顏色 2：#1a2545
• 梯度方向：90度
• 起始位置：55%
• 結束位置：55%

部分漸變背景 #2

為以下部分使用另一個漸變背景：

• 顏色 1：RGBA(210,218,228,0.38)
• 顏色 2：#ffffff
• 梯度方向：90度
• 起始位置：45%
• 結束位置：45%

部分漸變背景 #3

最後但並非最不重要的一點是，還要為頁面的最後一部分添加線性漸變背景。

• 顏色 1：#ffffff
• 顏色 2：#f7f3ec
• 起始位置：40%
• 結束位置：40%

預覽

現在我們已經完成了所有步驟，讓我們最後看看結果。

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的效率功能轉移佈局的設計風格。 本教程利用了作為新 Visual Builder 一部分的新跨頁複製粘貼功能。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下面留下評論部分！