在5分鐘內將網站重新命名為擴展屬性

已發表: 2025-09-01

重新命名您的網站不需要全面重建,儘管通常會感覺到這種方式。字體被卡在單獨的部分中,顏色分佈在各個部分中,並且間距隱藏在各個設置中。更新主頁後,您會發現其他需要相同更改的頁面。這是通常的例行程序,但是有一種更快的方法。

使用Divi 5中的擴展屬性,您可以設計一個單個元素,並立即將其外觀應用於各行,部分甚至整個頁面上的每個類似模塊。讓我們瀏覽如何使用它來在幾分鐘而不是數小時內重新品牌重塑一個完整的網站。

目錄
  • 1 divi 5中的擴展屬性是什麼
  • 2擴展屬性如何幫助更快地重塑品牌
    • 2.1使用Divi 5中的擴展屬性
    • 2.2使用帶有擴展屬性的選項組預設
  • 3如何重塑具有擴展屬性的網站
    • 3.1在整個佈局上的視覺重塑鍵模塊
    • 3.2使用保存預設的其他頁面更名
  • 4 Pro提示:使用設計變量的擴展屬性
  • 5擴展屬性可讓您不重建品牌

Divi 5中的擴展屬性是什麼

擴展屬性是一個Divi 5功能,可讓您使用一個模塊的設計並將其應用於其周圍的其他元素或模塊。這意味著,如果您已經設計了一個按鈕,標題或文本塊,則不必從頭開始重新創建這些樣式,因為您可以將它們擴展到其他元素。

這是它在實踐中的工作方式。您首先要編輯視覺構建器中的任何模塊。然後,而不是通過模塊重複這些更改模塊,而只需右鍵單擊模塊並選擇擴展屬性即可。

擴展屬性面板

Divi會問您想要這些樣式去哪裡。確認後,所有匹配模塊都採用相同的樣式。擴展屬性不會尋找匹配的內容,而是複制當前外觀並將其應用於您選擇的目標。

這使其成為推出設計更改的最快方法之一,而無需對每個塊進行微觀管理。它可以幫助您將重複的樣式變成單個動作,無論您是從頭開始構建還是重新命名整個佈局。

擴展屬性如何幫助更快地重塑品牌

我們將仔細研究如何單獨使用擴展屬性,並使用選項組預設來加快網站更名的過程。

使用Divi 5中的擴展屬性

該過程很簡單:樣式一個模塊,右鍵單擊以選擇擴展屬性,並將這些設計選擇擴展到每個類似模塊,而無需兩次打開單個設置面板。讓我們以一個真實的示例來瀏覽它。

假設您想重新命名所有呼叫行動按鈕。首先造型視覺構建器內部的一個按鈕模塊。

完成後,右鍵單擊並選擇“擴展屬性”。 (我們選擇了擴展按鈕設計屬性,因為我們只想擴展樣式,而不是內容。您還會注意到許多選項,這些選項可幫助您微觀選擇特定的屬性。)

選擇擴展屬性

擴展屬性面板將打開,您可以從幾個不同的選項中進行選擇,以確定應如何以及在何處應用設計更改。

擴展屬性面板選項

  • (1)從元素延伸:您要從元素延伸的模塊,例如我們的情況下的按鈕。這是根據您右鍵單擊的內容自動填充的。
  • (2)擴展到位置:選擇設計應該走多遠。我們選擇了整個頁面,因為我們希望該頁面中的所有按鈕都可以更改。
  • (3)擴展到元素類型:選擇哪種模塊類型應接收新樣式。例如,只有按鈕模塊或所有類似的模塊。
  • (4)屬性類型要擴展:指定要復制的內容。我們選擇了設計屬性並遺漏了其他人。
  • (5)要擴展的選項組:確定要應用的選項組:文本,按鈕,邊框,間距等。
  • (6)要擴展的修改字段:您還可以將選擇僅限為一個樣式屬性或選擇所有修改的字段以擴展您所做的所有更改。

選擇首選項後,單擊“擴展屬性”,新樣式將應用於頁面上的所有其他按鈕。

您是否注意到如何搜索匹配值?那是因為擴展屬性不在乎原始樣式是什麼。它從所選模塊中復制當前外觀,並將其直接粘貼到您選擇的位置中的每個類似模塊上。

這就是使其對於佈局包和現有網站如此有用的原因。擴展屬性可為您提供一個樣式的模塊和一鍵單擊,無論您是在調整字體尺寸,更新顏色還是調整間距。

了解有關擴展屬性的所有內容

使用帶有擴展屬性的選項組預設

當您在具有多個頁面的網站上工作時,僅在視覺上複製樣式還不足。您想要一個堅持的系統,這就是預設的地方。

預設可讓您在任何模塊中保存一組樣式,並在您的網站上重複使用它們。將其與擴展屬性相結合,您有一種快速,靈活的方式來重塑品牌,而不僅僅是整個網站。這種組合還可以幫助您對未來的網站進行防護,以便如果您需要再次重新品牌,則可以輕鬆地修改預設和所有使用的模塊也將更新。

讓我們回到按鈕示例以了解其工作原理。

我們為一個按鈕設計了一個全新的外觀。現在,我們沒有將設置作為靜態值擴展,而是將其保存為預設。

這是擴展屬性所在的地方。當您單擊擴展屬性時,您會看到保存的預設出現。如果您只想擴展選定的預設,請單獨選擇,或選擇“擴展”按鈕預設以攜帶所有預設。

擴展按鈕預設

當您擴展時,Divi不僅複製外觀;它應用了您保存的預設在幕後。因此,它觸摸的任何其他按鈕現在都使用相同的預設。

為什麼要添加另一步?這是對未來網站的影響的地方。假設在接下來的幾個月中,您決定以後調整按鈕樣式。您想再次擴展樣式嗎?不,對吧?

好吧,您甚至不必這樣做,因為您只需要更新一次預設即可。由於您的所有按鈕模塊都是使用相同預設構建的,因此使用它的每個實例都會自動更新。

另外,一旦保存,選項組預設也可以在其他頁面上提供。因此,當您完成主頁並移至他人的品牌重新品牌後,您只需應用保存的預設並在幾分鐘內將其擴展。

這就是為什麼將選項組預設具有擴展屬性是一種更具創新性的重塑方式的原因。您將獲得視覺一致性和一個易於更新的系統,而無需重做您的工作。

了解有關選項組預設的所有內容

想自己嘗試嗎?您需要Divi 5,這將為新構建器帶來擴展屬性,選項組預設以及更多功能。它已從地面重新設計,以獲得速度,控制和更平滑的設計工作流程。

下載Divi 5learn更多有關Divi 5的信息

如何重塑具有擴展屬性的網站

現在,您已經看到了擴展屬性的工作原理以及它如何與期權組預設配對,現在該將其應用於真實網站了。

在此演練中,我們將使用AI軟件佈局包。這是一個完整的網站,其中包含家庭,聯繫,聯繫和定價之類的頁面。我們不是要在這裡進行全面大修。這只是一個輕微的品牌重塑,我們通常在每月更新中會做的那種。

AI軟件佈局

首先,查看定義網站視覺標識的元素,例如按鈕,標題,漏洞和身體文本。這些模塊顯示在多個頁面上,並具有大部分品牌個性。一旦重新設計了其中的幾個,擴展屬性就可以使您可以將這些變化推向各地。

讓我們仔細閱讀該更新的內容。

在整個佈局上的視覺重塑鍵模塊

我們將從主頁開始,因為它為網站其餘部分設定了基調。大多數網站都重複了多個頁面上相同的設計模式,因此,一旦我們更新主頁,您就會為其他所有內容提供基礎。

掃描佈局後,我們確定了塑造品牌外觀的最明顯元素。這些是按鈕,標題,漏洞,身體文本和圖像。由於我們已經將按鈕重新命名,因此我們將從標題開始。

更名的標題模塊

首先,自定義任何標題模塊以反映您的新品牌。我將從H4S開始。

一旦您對樣式滿意,請右鍵單擊模塊,然後選擇“擴展屬性” 。選擇整個頁面模塊類型的範圍。將更改應用於頁面上的所有H4模塊。

同樣,您將重新命名H1,H2和H4S以統一排版,並在僅幾下單擊幾下即可為您的網站提供一致的聲音,而無需手動重新啟動每個標題模塊。

重新命名的身體文本以獲得更好的可讀性

現在讓我們更新身體文本。首先選擇具有段落塊的任何文本模塊。自定義以符合品牌的音調。當您對更改感到滿意時,右鍵單擊模塊並選擇擴展屬性。選擇在頁面上的所有文本模塊上應用更新。

這為您的段落提供了一秒鐘的整個頁面的一致樣式,並消除了單獨編輯每個頁面的必要性。

更名為藍色邊界

接下來,我想添加一個邊框以簡化我所有的blurb模塊。因此,我將對一列進行樣式,然後右鍵單擊“行設計”選項卡中的列,然後選擇“複製樣式” 。然後,將樣式粘貼到下一列,依此類推。

您會注意到,我將行的佈局更改為Flex和Divi會自動均衡列高度,無論其包含多少內容,都可以使Blurbs對齊。這是因為Divi現在支持Flexbox功能,這可以幫助您更快地構建響應式,智能的佈局。

使用保存的預設更名

現在更新了主頁,您無需從頭重複該過程。您可以將部分或行複製到其他頁面中,或者,由於您將新樣式保存為選項組預設,因此您已經設置了。

您保存的預設將顯示在所有頁面上。

在新頁面上保存的預設

您需要做的就是在需要的地方應用它們,並使用擴展屬性立即推動樣式。沒有手動編輯,也沒有重複的設計工作。

您可以按照相同的過程重新命名網站上的其他頁面。

擴展屬性使您可以靈活地享受重塑品牌。當您想在頁面上視覺上重複模塊時,它們很棒。

但是,如果您需要在不同的模塊上交換特定值,例如十六進制代碼,字體大小或間距單元,則需要嘗試查找和替換。它對於使用硬編碼值的佈局包特別效果。您可以使用查找並替換將這些變量交換為將來更新的靈活性。

專家提示:使用設計變量的擴展屬性

擴展屬性不僅複製靜態樣式;它還可以延續您保存的設計變量。例如,如果您已將標題字體變量分配給一個文本模塊,則可以將該模塊的設置擴展到頁面上的所有其他文本模塊。它們並不是每個攜帶硬編碼值的標題,而是繼承了相同的變量。

這意味著將來更新更容易:在變量管理器中調整一次變量,每個擴展模塊會自動更新。這是將擴展屬性與Divi 5的變量系統相結合的強大方法,以進行可擴展,範圍範圍的控制。

擴展屬性可讓您重新品牌而無需重建

更名不一定意味著重建。借助擴展屬性,您可以將一個模塊定型,然後將其塗在其餘部分中,將數小時的編輯縮短到幾秒鐘。

無論您是使用佈局包還是更新實時網站,Divi 5都可以為您提供最快的方法來刷新設計而無需觸摸每個元素。

下載Divi 5learn更多有關Divi 5的信息