關於Divi 5的屬性管理,您需要了解的一切
已發表: 2025-05-27Divi 5引入了一種簡化的構建網站的方法。從字體到顏色再到間距,每個設計都會調整,毫不費力地在您的網站上流動,節省了數小時的重複工作。 Divi 5的屬性管理功能使您可以更快地構建網站,並具有更高的靈活性,從而使其成為Divi 5 Alpha階段的實用新功能推出。
在這篇文章中,我們將深入了解有關Divi 5的屬性管理所需的所有信息 - 它是什麼,是什麼使它對設計師如此有用,以及如何使用它來更快,更有效地構建凝聚力,專業的網站。
Divi 5已準備好在新網站上使用,但我們不建議將現有網站轉換為Divi 5。
讓我們潛水。
- 1 Divi 5中的屬性管理是什麼?
- 1.1屬性管理的關鍵組成部分
- 1.2為什麼屬性管理很重要
- 2理解Divi 5中的預設
- 2.1通過屬性管理提高功能
- 3屬性管理如何工作
- 3.1複製屬性
- 3.2粘貼屬性
- 3.3重置屬性
- 4個實際應用和福利
- 4.1用例
- 4.2好處
- 5個技巧和最佳實踐
- 5.1學習屬性管理接口
- 5.2從變量和預設開始
- 5.3組織預設
- 5.4檢查斷點
- 6釋放Divi 5的應用程序管理的力量
Divi 5中的屬性管理是什麼?
Divi 5中的屬性管理是一項功能,可以改善Web設計人員在其網站上管理和應用樣式,預設和內容的方式。無論您是要更改按鈕的排版樣式,複製整個CTA模塊的樣式,還是將部分的外觀重置為默認的外觀,屬性管理使過程比以往任何時候都更加容易,更快,更直觀。
此功能集成到視覺構建器中,並可以通過右鍵單擊菜單和設置面板訪問。這種方法是Divi基於預設的設計方法的基石。
屬性管理的關鍵組成部分
屬性管理建立在兩個關鍵支柱上:顆粒控制和預設整合。
粒狀控制屬性
設計人員可以在多個級別上管理屬性 - 元素,例如整個CTA模塊,選項組預設(版式或邊框樣式),選項卡(設計,內容或高級)或單個字段(例如按鈕的背景顏色)。這種靈活性可以進行廣泛而精確的調整。例如,您可以將模塊的所有屬性或選擇性粘貼的所有屬性複製到另一個元素中,從而確保您在沒有不必要的更改的情況下精確地應用了所需的內容。
與選項組和元素預設集成
屬性管理與Divi 5的預設系統並駕齊驅。選項組預設是可重複使用的樣式集(例如背景,邊框或填充樣式),可以在多個模塊上應用於網站的一致性。
另一方面,元素預設是預先使用的設計軟件包,可與設計模塊(例如blurb,cta,手風琴或滑塊)一起使用。屬性管理使您可以復制並粘貼這些預設或它們的屬性,從而易於復制複雜的設計或在網站上更新特定樣式。
為什麼屬性管理很重要
屬性管理使設計師和開發人員可以通過Divi更快,更有效地構建網站。在保持精確度的同時,應用預設或複制屬性可以快速原型製作和大規模樣式更改。作為Divi 5預設驅動的框架的骨幹,它可以輕鬆地專注於創建美麗,具有凝聚力的網站。
了解Divi 5中的預設
預設是Divi 5高效設計工作流程的基石,可以輕鬆實現一致,可擴展的網站。讓我們探討它們如何增強屬性管理。
通過屬性管理提高功能
通過將預設集成到副本和播放工作流程中,Divi 5允許設計人員:
有效地複制設計
元素預設使用戶能夠複製完整的模塊設計(例如,一個完全樣式的CTA模塊),並將其粘貼到其他地方,從而確保使用單個操作來確保相同的樣式和內容。粘貼元素預設可以立即將CTA的背景,排版和按鈕樣式應用於另一個模塊。
應用目標樣式
您可以復制並粘貼更多針對性的樣式,例如選項組預設。複製和粘貼奇異設計元素的能力允許顆粒狀控制,讓設計人員在多個元素(例如邊界,陰影或標題的設計設置)上複製和粘貼特定樣式屬性。這樣可以確保範圍內的站點一致性,而不會覆蓋無關的屬性,例如內容或佈局。
通過減少手動樣式來預設屬性管理,從而使整個網站上的凝聚力設計變得更加容易。他們橋接各個元素和全球設計系統,實現快速更新和一致的樣式。
實際例子
考慮一個方案,您要設計一個多頁網站,並在CTA模塊中使用一致的按鈕樣式。以下是預設和屬性管理的方式:
首先,定義一個名為品牌按鈕的選項組預設。使用屬性管理,您可以從CTA中的按鈕中復制此預設,並將其粘貼到有關我們部分,英雄或頁面上的任何其他按鈕中的按鈕上。這樣可以確保每個按鈕在整個網站上都具有相同的外觀和感受,並完好無損地設置。
屬性管理如何工作
Divi 5的屬性管理系統通過模塊,列,行和部分複制,粘貼和重置屬性的工具簡化了樣式和管理設計元素。
複製屬性
該過程很簡單。右鍵單擊任何元素 - 模塊,列,行或部分 - 然後選擇複製屬性。這將捕獲所有屬性,包括內容,樣式和與模塊相關的任何預設。另外,您可以在Windows計算機上使用鍵盤快捷鍵(Mac或Shift + Alt + C上的Shift + Command + C)來複製樣式,而無需訪問模塊的設置。
要獲得更多粒狀控制,您可以在現場,選項組或元素預設級別複製屬性,以獲得更精確的控制。例如,您可以前往標題模塊的內容選項卡,並通過右鍵單擊特定字段組來複製標題,鏈接,背景或admin標籤屬性。

屬性也可以從“設計”選項卡複製,從而可以易於復制選項組預設或字體,文本大小,字母間距等的設置。您可以僅複製所需的樣式,而不必擔心複製屬性的覆蓋設置。
您還可以在“高級”選項卡中復制屬性,從而輕鬆複製CSS片段,顯示條件,過渡,滾動效果以及一鍵定位。
粘貼屬性
粘貼屬性時,這個概念是相同的,但是還有更多選擇。在Divi 5中,您可以粘貼所有屬性,這些屬性會將所有內容,樣式和關聯的預設從源模塊的設置粘貼到新的屬性。類似於復制屬性,您可以使用鍵盤快捷鍵粘貼它們 - 在Windows上的Mac或Shift + Alt + V上的Shift + Command + V-單擊一次。
您還可以僅粘貼某些屬性,例如標題模塊的設計設置,該設置複製了設計標籤中的所有設置 - 文本陰影,字體,標題大小,間距,邊界等。
同樣,您只能粘貼模塊的樣式設置,其中包括間距(填充或邊距)和尺寸。
如果您只想將相同的內容從一個模塊粘貼到另一個模塊,請選擇“粘貼內容屬性”,而Divi將用模塊中的現有內容替換上一個從上一個中復制的內容。
最後,如果源模塊具有任何相關的預設,則選擇粘貼標題預設將將關聯的預設應用於模塊,並在預設下拉菜單中分配。
除了粘貼樣式,設計設置和預設外,您還可以選擇粘貼的特定屬性。例如,您可以選擇粘貼設計,樣式或內容屬性,而Divi 5將在附加菜單中填充選項,從而可以選擇要粘貼的特定設置。
重置屬性
Divi 5的屬性管理系統允許您完全或僅重置任何模塊的屬性。
例如,您可以重置所有屬性 - Windows上的Mac或Shift + Alt + R上的Shift + Command + R-單擊一鍵刪除所有內容,樣式和任何關聯的預設。
但是,您可以重置某些屬性,例如樣式或設計設置。為了更具體,您只能重置選擇樣式,設計或應用的內容設置,例如間距,滾動動畫或CSS片段。
實際應用和利益
我們已經證明了為什麼屬性管理是Divi 5所需的補充。在下面,我們探索關鍵用例,突出該功能的好處,並提供一個實用的示例,以說明其對培養簡化工作流程的影響。
用例
屬性管理通過允許設計師在多個頁面上複製和粘貼樣式來確保品牌一致性。例如,如果您的品牌要求所有手風琴模塊具有特定的字體和圖標顏色,則可以從一個手風琴模塊中復制屬性並將其應用於所有情況。
屬性管理使您可以快速復制並修改預設以測試設計變化。例如,您可以將元素預設複製為CTA模塊,調整其顏色或佈局,並將其應用於不同的模塊以比較設計而無需從頭開始。這加快了設計過程中的實驗和迭代。
您還可以通過重置特定屬性以與更新的設計指南保持一致來執行選擇性更新。例如,如果客戶端請按鈕請求新的背景顏色,則可以重置CTA中按鈕的按鈕屬性,創建新樣式,然後將其粘貼到頁面上的其他按鈕,並留下其他樣式,例如版式或邊框,未觸及。
好處
使用屬性管理在Divi 5中構建您的網站有一些好處,包括:
- 他們節省了時間:屬性管理消除了重複的手動樣式,這是大型網站的主要時間。跨元素複製和粘貼屬性或預設需要幾秒鐘,使設計師釋放專注於創造力,而不是乏味的任務。
- 它們使您的設計可擴展:預設和屬性管理使網站範圍內的更新毫不費力。對選項組預設的單一更改可以在所有鏈接元素上傳播,從而確保即使在具有數十個頁面的龐大站點上也保持一致性。
- 屬性提供精度:屬性管理的顆粒狀控制可確保僅複製,粘貼或重置所需的屬性。這種精度阻止了不必要的變化,例如應用樣式預設時覆蓋內容,使設計師對其編輯充滿信心。
技巧和最佳實踐
採用智能策略和最佳實踐對於最大化屬性管理的潛力很重要。這些技巧將幫助您有效利用屬性管理,確保有效的工作流程,一致的設計和平穩的設計過程。
學習屬性管理接口
屬性管理的最佳方面之一是它在視覺構建器中的深入集成程度。確保嘗試每個快捷方式的作用,並花時間學習如何使用它們。每個選項都有特定的目的。例如,在懸停在標題模塊上並右鍵單擊時,您可以復制屬性。
當您想粘貼這些屬性時,有幾種選擇可供選擇。例如,您可以粘貼所有標題的屬性(包括設計,樣式和內容)或粘貼特定屬性或在任何具有標題的模塊中選擇性地預設。
從變量和預設開始
通過建立全球設計變量,默認的預設,元素預設和選項組預設,建立強大的設計基礎。例如,為圖像邊界創建一個選項組預設,並為圖像模塊創建一個默認元素預設,以確保從一開始就確保一致的樣式。這種主動的方法可以最大程度地減少返工,並將所有元素與您品牌的身份保持一致。
組織預設
清晰,描述性地命名,以避免在屬性管理任務中混淆。例如,將選項組預設標記為圓形邊框15px,而不是通用名稱,例如樣式1 。清晰的命名使得在復製或粘貼跨模塊的預設屬性時更容易識別和應用正確的預設。
檢查斷點
確保複製的屬性(例如響應方式)與Divi 5的台式機,平板電腦和手機的可自定義響應斷點保持一致。例如,在復製文本樣式時,請驗證它是否在視覺構建器的響應視圖中正確地呈現在其他地方的響應視圖中。這樣可以確保您的設計在每個屏幕尺寸上保持拋光和功能。
遵循這些最佳實踐,您可以利用管理層在Divi 5中創建一致,高效和專業設計。
釋放Divi 5的應用程序管理的力量
Divi 5的屬性管理功能通過使設計人員能夠跨模塊,列,行或部分複制,粘貼和重置屬性來重新定義Web設計中的效率,從而為一致的品牌開發。它的顆粒狀控制和直觀的界面使其成為現代網絡設計的基石,將復雜的任務簡化為精確的動作。
您準備好自己體驗屬性管理嗎?下載最新的Divi 5 Public Alpha,然後潛入此新功能,以了解它如何改變您使用Divi構建網站的方式。快速注意:Divi 5已準備好在新網站上發光,但我們不建議將現有網站遷移到它。
隨著Divi 5繼續具有令人興奮的功能,例如查詢循環構建器和Flexbox控件,現在是時候利用管理管理並將您的網頁設計提升到一個新的水平。
我們很想听聽您的想法。在下面的評論部分與我們分享您的經驗,或通過在您喜歡的平台上標記我們在社交媒體上的對話。