基於預設的設計如何改變Divi設計範式
已發表: 2025-04-10Divi的設計功能隨著Divi 5中的選項組預設的引入而發展。儘管元素預設長期以來可以輕鬆保存和重用完全樣式的元素,但新的選項組預設可以通過允許您重新使用設計屬性(如類型,間距,間隔)來增加靈活性,並在各種元素上進行效果。
這些內置的Divi功能一起,有助於重塑設計師如何達到一致性和效率,從而更快地設計迭代和更輕鬆的全局更新。在這篇文章中,我們將深入研究這些預設如何共同改變您的Divi 5設計工作流程!
- 1基於預設的設計的兩個支柱
- 1.1元素預設:可重複使用的設計軟件包
- 1.2選項組預設:模塊化設計控制
- 2創建帶有預設的結構化工作流程
- 2.1步驟1:使用選項組預設定義核心樣式
- 2.2步驟2:為特定模塊創建元素預設
- 2.3步驟3:根據需要實施和調整
- 2.4步驟4:保持您的樣式在Divi庫中組織
- 2.5步驟5:迭代和改進
- 3基於預設的工作流程的好處
- 3.1速度:使用現成的預設減少設計時間
- 3.2一致性:在頁面上保持統一樣式
- 3.3可伸縮性:輕鬆擴展和更新站點設計
- 3.4靈活性:覆蓋單個元素而不會破壞系統
- 4在Divi中使用預設開始設計智能
基於預設的設計的兩個支柱
在我們深入了解細節之前,重要的是要了解使Divi中基於預設設計的兩個主要組成部分如此強大。通過結合元素預設和選項組預設,您可以創建一個更有效,一致和可擴展的設計過程。讓我們看一下這兩個支柱,以及它們如何一起工作以提高您的設計工作流程。
元素預設:可重複使用的設計軟件包
元素預設為特定的分區元素保存整個設計配置。 Divi當前有4種不同的元素類型:模塊,列,行和部分。當涉及模塊時,元素預設也是模塊類型(按鈕,文本,CTA等)所獨有的。當您應用元素預設時,所有關聯的設置(例如排版,顏色,間距和效果)在應用時立即繼承。元素預設的重點如下:
- 確保跨頁面的視覺一致性
- 減少重複的樣式任務
- 允許全局更新以進行更快的編輯
選項組預設:模塊化設計控制
選項組預設專注於造型屬性,例如版式,框陰影,邊框和滾動效果。它們跨多個元素工作,使設計人員可以混合和匹配樣式而不會與單一元素類型綁定。這意味著您可以在行和模塊上使用相同的盒子陰影預設。使用選項組預設的主要好處是:
- 將共享樣式應用於不同的元素
- 可用於高級自定義的堆疊
- 允許實時全球編輯而不影響各個模塊
創建帶有預設的結構化工作流程
現在,我們已經向您展示了Divi中的兩個預設支柱,並簡要解釋了差異,讓我們瀏覽一些創建結構化工作流程的技巧。
步驟1:使用選項組預設定義核心樣式
首先建立網站的核心設計原則。這包括排版,顏色,按鈕樣式,間距等。這些基本元素對於在整個網站上保持一致性至關重要。
對於不斷重複的設置,您可以選擇將選項組預設設置為默認設置。一個很好的例子是對您的段落文本進行樣式,並將其用作默認情況。
選項組預設具有通用性和可重複使用,使您可以在多個元素上應用這些設置。例如,一旦定義了文本陰影預設,就可以將該預設應用於網站上所有元素類型的標題。在此階段,您將為其餘的設計奠定基礎,這些預設應作為您網站的基礎。
步驟2:為特定模塊創建元素預設
定義了核心樣式後,下一步是為更具體的設計元素創建元素預設。儘管從理論上講,遵循此順序是最合乎邏輯的,但您經常會發現自己同時創建兩者。元素預設是單個元素(部分,行,列,模塊)的完整設計軟件包,並允許您快速在整個站點上應用一致的樣式。

使用預定義的選件組預設設計預定的CTA按鈕,重點介紹按鈕的版式,背景顏色和懸停效果。
將其作為元素預設供將來使用。構建其他重複的元素,例如證明模塊,特徵部分或定價表,並相應地樣式。這些預製的模塊中的每一個都可以保存為可以在需要時應用的元素預設。
設計時,請考慮保存在Divi庫中包含這些預設的佈局。這使您可以維護所有設計的概述,從而幫助您跟踪創建的每種預設樣式。您不必擔心從一開始就能獲得完美的一切。當您構建網站時,您可能會在進行時調整這些元素。
步驟3:根據需要實施和調整
創建了選項組和元素預設後,您可以通過網站應用它們。如果您在不提前使用設計軟件的情況下從頭開始構建網站,則很可能在首頁構建期間已經應用了預設。
您可能需要在工作時在元素級別進行調整。例如,如果您將預設應用於證明模塊,但需要更改特定頁面上的間距,則可以在不影響網站的其餘部分的情況下這樣做。這種靈活性使您可以隨時進行調整,從而確保您的設計保持可擴展和適應性。
這裡的關鍵是將預設視為創建靈活,凝聚力設計系統的工具,而不是必須準確遵循的剛性框架。在繼續構建時,您可能需要調整樣式,因此請務必在需要時修改預設並在元素級別上覆蓋它們。繼續完善您的設計,並充分利用Divi的實時編輯,以便進行這些調整。
步驟4:保持您的樣式在Divi庫中
要跟踪所有元素預設和佈局,請將它們保存在可以保存在Divi庫中的佈局中。
隨著網站的增長,您將能夠調整保存的預設以改善設計。您始終能夠在您正在處理的元素中修改預設。更新預設後,它將在整個網站中進行更新。
步驟5:迭代並改進
Divi預設系統的偉大一面是能夠不斷改進和完善設計的能力。當您構建更多頁面和佈局時,請重新訪問您的選項組和元素預設以進行全局調整。
如果您決定更改主按鈕顏色或更新所有標題的字體尺寸,則可以在應用該預設的所有實例中反映在地點範圍內。
當您繼續工作時,您將更深入地了解哪些元素可以很好地工作,哪些要素需要進一步調整。不要害怕修改預設,並利用Divi的靈活性來做出適合您不斷發展的設計視覺的小更改。
通過不斷迭代和改進預設,您將創建一個網站,不僅具有凝聚力,而且還適合將來的變化或設計趨勢。請記住,預設系統是幫助簡化流程的工具 - 從第一天開始,您必須嚴格遵守一組規則。
基於預設的工作流程的好處
現在,我們已經完成了使用Divi預設創建結構化工作流程的基礎知識,讓我們介紹這種方法帶來的一些好處。
速度:使用現成的預設減少設計時間
借助Divi的預設系統,您可以大大減少設計網站所需的時間。只需創建和重用元素和選項組預設,而不是每次設計元素時從頭開始。無論是CTA按鈕,標題樣式還是推薦模塊,這些預設都可以單擊單擊使用完整的設計包。
例如,一旦您設計了帶有選項組預設的邊框樣式,就可以在所有頁面上始終如一地應用它,而無需重做工作。
元素預設通過允許您重複使用整個預先使用的模塊來節省更多的時間。您只需單擊即可部署一個完全設計的模塊,以確保您的佈局立即與您的視野匹配。
這種現成的設計方法使您可以更快地構建和專注於項目的創造性方面,而不是重複性化單個元素的重複任務。
一致性:在頁面上保持統一樣式
基於預設的工作流程的主要優點是一致性。通過使用元素和選項組預設,您可以確保網站上的每個頁面都遵守相同的設計規則,從字體到間距到顏色。
將單個選項組預設設置為按鈕默認值可確保您網站的字體大小和样式保持均勻,無論它們出現在哪裡。這種一致性增強了您網站的視覺標識,並使其具有拋光,具有凝聚力的外觀。
您可以維護一個統一的設計系統來改善用戶體驗並使您的網站顯得更加專業,而不是處理不同頁面的不一致樣式。
可伸縮性:輕鬆擴展和更新站點設計
預設使您的網站隨著擴展而擴展非常容易。無論您是添加新頁面還是修改現有頁面的設計,都可以快速有效地更新設計。如果需要添加新頁面,只需應用現有元素和選項組預設,以確保新頁面與網站其餘的設計無縫符合。
需要進行全局更新嗎?使用Divi的預設系統,您可以一次更改預設,並在應用預設的所有實例中自動反映它。例如,如果要更改網站上所有按鈕的顏色,只需更新按鈕預設,並且鏈接到該預設的每個按鈕都會立即更新。
這種可伸縮性意味著,隨著您網站的發展,您可以繼續增長設計,而無需單獨重新工作。無論您是添加博客,新產品還是全新的部分,您的設計都將保持凝聚力和一致。
靈活性:覆蓋單個元素而不會破壞系統
儘管預設為您提供了結構化的Web設計方法,但它們仍然允許靈活性。如果您需要對特定元素進行調整,則可以覆蓋該元素的預設,而不會影響其餘的設計。
例如,如果您將元素預設應用於Blurb模塊,但需要調整特定實例的圖標大小或間距,則可以直接在模塊上進行這些更改,而不會影響站點其他地方的其他實例。使用選項組預設,您可以調整單個設置,例如字體尺寸或按鈕顏色,以便在整個網站上保持核心樣式的同時。
這種靈活性是實現網站獨特部分的自定義外觀的關鍵。它允許詳細的自定義,而無需破壞預設提供的一致性和結構。隨著設計的發展,您可以根據需要繼續微調元素,提供控制和輕鬆的平衡,使過程變得更加順暢,更適應性。
在Divi 5中開始使用預設設計更智能
擁抱基於預設的工作流將重新定義如何使用Divi構建網站。通過利用元素預設和選項組預設,您可以創建視覺令人驚嘆,高度適應性且易於管理的網站。選項組預設可在Divi 5中獨家提供,因此現在是開始熟悉Divi 5接口的最佳時機!