如何將 Divi 佈局變成可重用的線框

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的食品餐飲佈局包將佈局轉換為可重複使用的線框。 線框非常適合構建網站的開始過程。 它們幫助您決定網站的整體結構和設計風格。 他們還可以幫助獲得客戶對設計風格的意見，而無需提前定制所有內容。

讓我們開始吧！

預覽

在我們深入研究之前，讓我們先看看我們將創建的最終結果。

將佈局變成線框

使用 Visual Builder 打開餐飲登陸頁面

繼續並打開您使用 Divi 的 Food Catering Layout Pack 創建的登錄頁面。

刪除部分和全角標題背景圖像、背景顏色和漸變背景

創建線框的第一步是刪除頁面上各個部分的所有背景圖像、漸變背景和背景顏色以及英雄部分中的全角標題模塊。

給交替部分改為灰色背景色

為了幫助確定頁面設計中的不同部分，請繼續為每個交替部分指定一個“#f9f9fb”背景色。 稍後，當您使用線框創建頁面時，您將能夠使用“查找和替換”功能將調色板無縫添加到您的頁面。

使用修改後的樣式過濾器刪除設計元素中的所有顏色

在按鈕模塊上啟用修改的樣式過濾器

我們也將擺脫正在使用的調色板。 這樣，我們在構建頁面時就不會受到它的影響。 打開頁面上的按鈕模塊之一併啟用修改樣式過濾器以查看所有當前設置。

給按鈕模塊深色背景和邊框顏色

將按鈕背景顏色和按鈕邊框顏色更改為“#2b2b2b”。

複製按鈕樣式並應用於其他按鈕

繼續通過右鍵單擊按鈕設置並單擊“複製按鈕樣式”來複製按鈕樣式。 然後，將按鈕樣式添加到頁面上剩餘的每個按鈕模塊中。

刪除額外的設計設置（例如框陰影）

移除按鈕框陰影

我們還將刪除其他元素，例如 Box Shadow。 打開您正在處理的相同按鈕模塊並完全刪除框陰影。

複製按鈕模塊框陰影設置

複製此按鈕模塊的框陰影樣式並將其添加到其餘按鈕模塊中。

在英雄和聯繫部分手動刪除框陰影

僅有的兩個按鈕需要手動移除 Box Shadow 是包含在 Fullwidth Header Module 和 Contact Module 中的一個。 這些按鈕是具有多個設計元素的模塊的一部分，這就是我們需要手動刪除它們的原因。

為突出顯示的部分提供與 CTA 相同的背景顏色

然後，向下滾動，直到遇到“突出顯示”部分。 在這裡，使用“#2b2b2b”部分的背景顏色。 CTA 使用了相同的顏色。

確定圖像尺寸

前往媒體庫

為了完全刪除我們佈局的佈局主題，我們將用包含所需圖像尺寸的佔位符替換所有圖像模塊。 要查找這些尺寸，請轉到您的媒體庫。

單獨打開使用過的圖像

分別打開頁面中包含的每張圖像。

在頁面上記下圖像的不同尺寸

完成後，您將能夠特別看到該圖像的尺寸。 在進入下一步之前，通過將它們寫在某處來跟踪頁面上所需的所有尺寸。

創建具有維度的佔位符

打開 Photoshop

是時候創建佔位符了！ 打開 Photoshop 或任何其他圖像編輯軟件。

為維度創建新項目

為頁面上的每組維度創建一個新項目。 在我們的例子中，我們需要為以下每個維度創建單獨的項目：

• 800 x 1029
• 400 × 400
• 48 × 48

選擇灰色

選擇“#e7e8ed”作為您的顏色。

解鎖背景層

也解鎖您的背景圖層。

選擇油漆桶工具並為圖層添加顏色

然後，使用油漆桶工具將畫布塗成灰色。

添加帶有尺寸的文本

為了幫助您跟踪圖像尺寸，您還可以在佔位符的中間添加尺寸。 這樣，一旦您編輯將替換它們的圖像，您就會知道頁面需要哪些圖像尺寸。

保存為 Web

完成後，保存您的網絡圖像佔位符。

對頁面上的每個圖像尺寸重複

對頁面上的每個維度集重複這些步驟。 對於此頁面，您總共需要三個不同的集合：

• 800 x 1029（關於我們部分
• 400 x 400（畫廊部分）
• 48 x 48（圖標）

用佔位符替換圖像

導出所有圖像佔位符後，請繼續替換圖像。

使線框易於重用

在計算機上創建線框圖

完成創建線框後，建議您將其外觀保存在某處。 在您的計算機上的某處創建一個新文件夾。

屏幕截圖佈局和本地保存

然後，使用您選擇的屏幕截圖插件/擴展程序來捕獲您的頁面。 在下圖中，我們使用了 Mozilla Firefox 的 FireShot 插件。 確保在保存屏幕截圖時為其指定一個正確的名稱。

將佈局保存到具有相同名稱的庫

使用您用於屏幕截圖的相同名稱將線框佈局保存到您的 Divi 庫。 這允許您在將線框上傳到您的頁面之前先查看計算機上的線框。

更改個性化線框的設計設置

添加分區分隔線

您不僅限於每頁創建一個線框。 您可以輕鬆調整設計設置以創建新的線框。 例如，您可以使用分區分隔符來創建獨特的設計。

玩轉排版

在標題字體上啟用查找和替換

或者，您也可以使用排版。 在您的英雄部分打開全角標題模塊，然後右鍵單擊標題字體。 繼續啟用查找和替換功能。

更改字體

將頁面上使用的字體更改為另一種字體，您將擁有一個全新的線框！

使用類別保存單獨的設計元素

單擊“添加到庫”圖標

您可以做的另一件事是在頁面上單獨保存特定的設計元素。 比如說，你想創建一個英雄部分的集合，你可以輕鬆地將你的英雄部分添加到你的 Divi 庫中。

添加新類別並為設計元素命名

要使結構更有條理，請繼續添加一個名為“英雄部分”的新類別部分，這樣您就可以輕鬆找到您選擇的英雄部分並探索商店中的所有設計。

預覽

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

最後的想法

在此用例博客文章中，我們向您展示瞭如何將 Divi 佈局轉換為可重用的線框。 將佈局轉換為線框有助於您保持對網站結構外觀的整體看法。 它們也非常適合在網站建設過程的第一階段向客戶介紹設計風格。 如果您有任何問題或建議，請務必在評論區留言！