Divi想複製樣式卻把文字也換掉:Copy Design保留內容

頁面已有兩個不同標題,只想讓第二個使用相同外觀,貼上後卻連文字一起變了。這通常需要先看貼上的是哪些屬性。Divi 5可以複製元素,也可以只貼內容或設計;同樣叫貼上,操作範圍並不相同。

若目標是保留第二個標題的文字,在目前的Divi 5介面應核對Paste Design Attributes。它處理設計相關的樣式與預設,不含內容。這個範圍比「複製整個模組」更符合需求,也要注意它不只是單一字級的複製,其他相容設計可能一併跟著套用。

貼上Design Attributes後副本仍保留自己的文字
官方Divi 5演示;貼上設計後副本字級為48像素,內容仍是Demo copy only。

先準備內容不同的來源與目標

這次使用Elegant Themes官方Divi 5公開演示的未儲存畫布。第一個Heading保留官方首頁標題,字級是48像素;第二個Heading的文字是Demo copy only,先把字級改為24像素。兩份的文字與大小不同,方便看出貼上後改了哪個部分。

來源與目標都是Heading,是為了讓屬性相容性容易判斷。若改為從Row複製到Image,或從不同模組互貼,不能期待所有屬性都有相同位置與作用。官方文件說明,Divi只會套用相容的屬性,不適用的部分會被略過。

自己的頁面可以先記下目標文字、連結與需要保留的設定。來源若有特定的裝置覆寫、間距或邊框,也要先了解。不要只因畫面上的字級剛好想要,就把整組設計當成只有那一個數字;貼上前看清楚來源,能減少事後逐項還原。

Copy Attributes與貼上範圍要配合

在Layers對來源Heading開啟右鍵選單,選Copy Attributes,取得來源屬性。接著選中目標Heading,使用Paste Design Attributes,讓目標接收設計相關屬性。這個操作不會新增第三個Heading,也不是把來源元素本身複製到另一個位置。

本例使用右鍵選單的Copy Attributes,貼上時以Windows的Ctrl + Alt + V執行Paste Design Attributes。官方文件列出這個快捷鍵;若你的系統或瀏覽器有衝突,應依介面選單操作,不必強行使用快捷鍵。Mac等平台的組合鍵也應以目前官方說明為準。

不要把它和Paste All Attributes混用。全部屬性貼上包含的範圍更大,可能把目標本來的內容一起換掉;Paste Content Attributes則針對內容,與這次想沿用外觀的需求不同。選單中看到的精確名稱,比自己心裡簡稱的「貼樣式」更值得核對。

貼上後字級變了,文字仍保留

操作前,兩個Heading的計算字級分別為48與24像素;操作後,兩份都為48。第二份仍然顯示Demo copy only,第一份也保留原標題。這組對照證明當次Paste Design Attributes沿用了設計,同時沒有把目標的文字改成來源內容。

兩份在本例中的文字顏色原本就相同,貼上後也仍然相同。因此本篇沒有用這次操作宣稱顏色從不同值改成相同值;實際可辨認的差異是目標字級由24成為48,以及文字保持不變。核對結果時要看真的發生過什麼,不把未變動的欄位當成另一項效果。

這些結果讀自正在編輯的官方演示畫布,沒有儲存,也沒有修改正式網站。自己的頁面若使用不同設計來源,或目標欄位有其他設定,應用同樣的前後對照方式驗證。不能只因這個Heading案例成功,就預設所有元素和所有屬性都以同一方式處理。

設計屬性也可能包含預設關係

官方Paste Design Attributes的範圍包含樣式與預設,不含內容。這代表你得到的可能不只是目前看到的外觀數值,也包含設計來源的關係。若後續修改預設,相關模組可能依那個關係變動;貼上成功並不等於已經把所有設計來源完全拆開。

如果只想複製特定的樣式,不想帶入預設,應查看目前介面提供的選擇性Style Attributes操作,確認它的範圍。這份案例沒有實測選擇性貼上或解除預設,不能把它們說成本例已完成的效果。讀者要另按實際需求和介面選項操作。

同樣地,從來源貼上全部設計,可能改到間距、對齊或其他相容欄位。目標字級正確後,仍要看看它的整體位置是否改變。若只需要某一個欄位,先評估欄位層級的複製方式,避免為了48像素把目標原本適合的其他設計一起換掉。

內容有沒有保留,要逐項確認

本例目標只是一個文字標題,因此對照內容集中在文字。換成含圖片、描述和按鈕的模組時,需要核對那些內容是否仍符合目標用途。不要只看標題沒變,就宣稱整個服務卡片的連結和圖片也都正確。

貼上前後可以各看一次目標的Content頁籤,再回到畫布閱讀。若按鈕應前往不同服務頁,仍需確認URL;若是Image,仍需查看來源與替代文字。這些核對屬於目標內容本身的需要,並不會因為選了設計貼上就自動變成完整的內容驗收。

若發現文字已經換成來源,先停止其他修改,核對剛才的貼上選項和目標模組。必要時依編輯器操作紀錄回到貼上前,再選正確範圍重做。不要急著重新手打整段原文,否則可能遺漏原有連結或其他格式,也不容易知道還有哪些內容被改掉。

裝置設計與文字長度要一起看

來源的設計可能有桌機、平板與手機差異。套到另一份標題後,要在各裝置視圖查看,而不是只確認當下桌機的48像素。這次演示的目標是內容保留與字級套用,沒有宣稱所有裝置下的版面都已適合正式內容。

目標文字比來源長或短時,相同字級也不會產生相同行數。若貼上後標題占了更多高度,先看文字長度與容器寬度,再決定是否需要調整字級、行高或間距。不要為了讓兩個標題高度一致,就把其中一個重要內容刪掉。

可以先以真的中文標題檢查桌機,再切到手機看換行與可讀性。這份英文短字串主要用於辨認貼上範圍,不是可直接套用的中文排版範本。若換了字型,也要再看實際載入結果,避免只憑編輯器中的暫時外觀作決定。

最後回到自己的訪客頁

自己的網站完成設計貼上並依流程儲存後,退出Visual Builder,重新載入公開頁,查看來源與目標是否各自保留正確內容,且目標外觀符合需求。公開頁仍是舊設計時,先核對儲存與快取,再回頭查貼上範圍。

這個方法適合已有內容、希望沿用另一份設計的情況。若是要增加一個全新的元素,Duplicate更符合起點;若只想換文字,應處理內容欄位。先把目的對回精確操作,再比較前後結果,頁面就不會在複製與貼上之間多出不需要的元素或丟掉原本內容。

參考資料

原文鏈接:https://wntheme.com/divi-copy-design-keep-content/,轉載請註明出處。
0

評論0

顯示驗證碼
沒有帳號?註冊  忘記密碼?