為下一個項目使用新的 Divi 佈局包的 10 個步驟
已發表: 2017-11-08作為 Elegant Themes 的 Divi 設計計劃的一部分，Kenny 和設計團隊每週都會用全新的免費 Divi 佈局包寵愛我們。 佈局包可以從每週一介紹佈局包的博客文章中下載。 你們中的許多人已經使用佈局包在很短的時間內構建了全新的網站。
在今天的帖子中，我將向您展示如何在下一個項目中使用新的 Divi 佈局包時提供 10 個要遵循的關鍵步驟來充分利用這些佈局。 我還包含了一些不太知名的技巧來像專業人士一樣處理這些佈局。
享受！
注意：與所有步驟一樣，這些步驟應按列出的順序完成。 例如，如果您沒有先設置默認調色板，則在更改默認強調色時它將不可用。
為下一個項目使用新的 Divi 佈局包的 10 個步驟
訂閱我們的 YouTube 頻道
#1 首先將佈局導入您的 Divi 庫
將新佈局添加到 Divi 主題的最佳方法是先將它們導入 Divi 庫。 然後，在創建新頁面時，您可以從庫中添加新佈局。
在將佈局添加到您的網站之前，您需要確保並從博客文章中下載佈局包並解壓縮文件。
從您的 WordPress 儀表板，轉到 Divi > Divi 庫，然後單擊頁面左上角的導入和導出按鈕。 在彈出的可移植性模式中，選擇導入選項卡，然後單擊選擇文件。 找到解壓後的佈局包文件夾並選擇文件名中帶有“All”的json文件。 這會將所有佈局一次上傳到您的庫，而不必單獨執行每個佈局。 例如，如果您要上傳時尚版式包，您可以從版式文件夾中選擇名為 Fashion_All.json 的文件。 然後單擊導入 Divi Builder 佈局。
#2 向新頁面添加佈局
這個過程非常簡單。 從您的 WordPress 儀表板，轉到頁面 > 添加新的。 輸入您需要創建的頁面的標題。 單擊以使用 Divi Builder 並部署 Visual Builder。 打開頁面底部的設置菜單，然後單擊左側的“從庫加載”加號圖標。 在彈出的從庫加載模式中，單擊“從庫添加”選項卡並從列表中選擇新佈局以加載新佈局。
對每個新頁面重複此過程，為每個頁面添加一個新佈局。
#3 創建主菜單
如果這是新安裝，您將開始在頂部標題的主菜單欄中看到這些新頁面。 這是因為您還沒有創建主菜單，因此默認情況下，您添加到站點的所有頁面和帖子都會填充您的菜單。
要創建主菜單，請轉到 WordPress 儀表板執行以下操作：
1. 導航到外觀 > 菜單。
2. 選擇頁面頂部的“創建新菜單”鏈接。
3. 輸入菜單名稱。
4. 在頁面下方的左側切換中選擇您的菜單項。
5. 單擊添加到菜單
6. 通過將菜單項拖到位來組織菜單項。
7. 在頁面底部的菜單設置下，選擇“主菜單”作為顯示位置。
8. 保存菜單
#4 設置默認調色板
經常忘記做這一步，每次都後悔。 設置默認調色板可以非常方便地使用 Divi builder 編輯顏色。 我無法告訴你我必須返回另一個模塊多少次才能找到顏色代碼，或者使用開發人員工具檢查項目，或者使用我的滴管瀏覽器擴展找到我一直在使用的相同顏色，然後再次。 不要對自己這樣做！
您可以通過轉到 WordPress 儀表板並導航到 Divi > 主題選項來設置默認調色板。 在常規選項卡中，您會找到列出的選項。 在那裡添加您需要的顏色。 保持白色 (#ffffff) 和幾種深色（如 #333333 或您為深色字體顏色設置的任何顏色）輕鬆用於樣式化背景和文本始終是一個好主意。
#5 設置全局重點色
在自定義新站點的過程中，您可能會很早就找到使用主題定制器的方法。 這樣做時，您應該首先更改全局強調色。
要更改全局強調色，請轉到主題定制器並導航到常規設置 > 佈局設置，然後在底部找到主題強調色選項。
請注意調色板中可用的新顏色，因為您更新了主題選項中的默認調色板。
然後，一旦您更改它，保存並發布您的設置並刷新您的頁面。
更新後的主題強調顏色將自動應用於大約 20 個其他元素，這就是為什麼首先更新它很重要。
一些自動更新的元素包括：
車身鏈接顏色
小部件標題顏色
小部件項目符號顏色
頁腳社交圖標懸停顏色
圖標的默認顏色
頁腳菜單活動鏈接顏色
二級菜單背景色
滑入和全屏標題樣式背景顏色
移動菜單顏色的漢堡菜單圖標
主菜單活動鏈接顏色
下拉菜單行顏色
二級菜單背景色
二級下拉菜單背景顏色
二級菜單背景色
活動主菜單鏈接顏色
頁腳菜單活動鏈接顏色
如果您沒有看到更改立即對這些元素生效，您可能需要保存並退出定制器，刷新頁面，然後返回定制器。
#6 設置標題樣式
您可以從主題定制器中設置標題樣式。 只需轉到您的 WordPress 儀表板並導航到 Divi > 主題定制器 > 標題和導航。
您肯定需要設計標題以匹配您的新佈局。 首先，我會先決定您想要的標題樣式（默認、全角、居中等……），但無論您選擇什麼，請確保將標題樣式與新佈局相匹配。 並且，確保菜單中的項目易於閱讀和導航。
您可以選擇主要、次要和固定導航菜單。 花點時間設計所有適用於您網站的樣式。
如果您設置了全局強調色，一些標題顏色設置將會為您更改。 這就是為什麼首先設置該顏色很重要的原因。
#7 設計你的底部欄
您也可以從主題定制器設置底部欄的樣式。 只需轉到您的 WordPress 儀表板並導航到 Divi > 主題定制器 > 頁腳 > 底部欄。
底部欄不應該被忽視。 與頁面頂部的導航欄相結合，它成為一個必要的書擋，可以構成整個頁面的框架。 當然，默認的黑色背景幾乎可以在任何網站上“工作”，但我會嘗試更多。 有時我喜歡給底部欄一個背景顏色，它是直接位於它上面的頁腳部分背景顏色的略深陰影。
#8 使用快捷方式對頁面佈局進行設計更改
由於您的佈局帶有內置於模塊中的設計設置，因此在全球範圍內（站點範圍內）更改您的設計設置可能有點乏味。 但是有一些技巧可以加快這個過程。 首先，我會先更改一個頁面佈局。 這樣您就可以保存編輯頁面中的元素以添加到需要更改設計的其他頁面。 這裡有一些技巧可以加快對特定佈局進行設計更改的過程。
使用右鍵單擊選項
不要忘記您可以使用右鍵單擊選項將模塊樣式從一個模塊複製並粘貼到下一個模塊，只要它是相同的模塊類型。
恢復默認值，以便您可以使用主題定制器控制它們
目前，某些設置可用於主題定制器無法定制的模塊（例如框陰影）。 作為一般規則，如果該設置在定制器中可用，則主題定制器將更改模塊中保留的默認設置。 但是對於某些模塊，您可以繼續將某些設計設置恢復為默認值，以便您可以從主題定制器中控製樣式。
一個很好的用例是正文和標題文本設置。 因此，例如，如果您的佈局中有一個具有自定義字體、文本顏色和文本大小的文本模塊，則在將它們恢復到默認狀態之前，您將無法從主題定制器中更改這些元素。
使用搜索框找到要更改的設置
輕鬆識別設置為默認值的內容
當您搜索要更改的選項時，您會注意到某些選項旁邊有一個“恢復默認值”圖標。 這意味著它已從默認值更改。
一鍵將所有設計設置恢復為默認值
對於那些和我一樣喜歡視覺構建器的人，您可能還沒有發現這個有用的技巧。 如果您在後端構建器中，請單擊以編輯模塊的設置，然後選擇設計選項卡。 注意到什麼了嗎？ 它是位於選項卡內的一個小“恢復為默認值”圖標/按鈕。
單擊它會提示您確認要丟失這些設置。 如果您選擇是，您的所有設計選項卡設置都將恢復為默認狀態。 當然，這將在未來添加到可視化構建器中。
#9 保存關鍵元素以構建新頁面或帖子
有時您需要創建需要不同佈局的其他頁面或帖子。 也許您想要一個更通用的頁面佈局，包括頁眉、內容部分和頁腳部分。 或者，您可能想創建一個更精細的登錄頁面。 您甚至可以為您的博客文章創建自定義文章佈局。 實現這一點的最簡單方法是使用您已經擁有的佈局元素來構建新的佈局。 而且，這是在整個站點中保持設計一致的最有效方法。 讓我們回顧一些您應該考慮使用的基本元素來構建其他頁面佈局。
頁眉
這是不費吹灰之力的。 每個頁面都需要一個標題。 我肯定會為您的圖書館保存一個標題部分。 我建議找到一個更通用的標題版本，以便它適合任何頁麵類型。 通常聯繫頁面佈局是一個很好的候選者，因為它通常有一個基本的居中標題、副標題和背景顏色。
章節標題
保存部分標題的版本也是一個好主意。 這樣，當您向新頁面添加更多內容時，您將擁有一個新的標題樣式並準備就緒。
內容部分
在許多情況下，您只需要一個帶有白色背景的簡單文本模塊即可，但有時您的新佈局具有獨特的內容部分。 這可能是帶有框陰影的文本模塊或以獨特方式設計的多個模糊模塊。 為了保持一致性，請將您需要的內容保存到庫中以備將來使用。
按鈕（淺色和深色）
創建新頁面時，您可能需要添加更多按鈕。 在您的庫中提供深色和淺色版本的按鈕非常方便。 我建議為深色和淺色版本保存一個按鈕模塊。
頁腳部分
每個佈局通常都有一個漂亮的頁腳部分，位於頁面底部欄的正上方。 某些佈局具有此頁腳部分的不同版本。 這些部分通常包括聯繫信息、電子郵件選項和其他重要信息。 找到您要使用的一個並將其保存到您的庫中以備將來使用。
現在，無論何時您想要構建新頁面，您都可以從這些部分、行和模塊中進行選擇。
#10 設置全局項目
將來對您的網站進行編輯時，全局可以節省大量時間，但這需要一點遠見。 您需要確定哪些佈局元素將在整個站點中頻繁使用，並且需要更統一的更新。 全局項目的良好候選者是頁腳部分、號召性用語模塊、按鈕模塊和電子郵件選項，因為它們需要分散在您的網站中，但需要相同的統一樣式和內容。 這樣更新一個將更新所有。
最後的想法
希望這些步驟對您有所幫助。 我這篇文章的目標是在新安裝中導入這些佈局以創建新網站時提供一些通用指南或最佳實踐。 按順序執行這些步驟將使您免於浪費時間，並為您打下良好的基礎。