像專業人士一樣瀏覽 Divi 5 介面的 5 個技巧

隨著 Divi 5 公共 Alpha 版的發布，用戶現在可以探索優雅主題幕後醞釀的強大增強功能。 Divi 5 是一項重大更新，為提高速度、穩定性和可擴展性提供了改進的基礎。無論您是經驗豐富的專業人士還是剛開始使用 Divi，這個新的 Visual Builder 都將允許您更有效地建立網站，步驟更少，載入時間更快。參與優雅主題的這項新更新，並像專業人士一樣導航。

了解有關 Divi 5 Public Alpha 以及如何下載的更多資訊。

下載 Divi 5 公共 Alpha 版

掌握 Divi 5 介面的 5 個技巧

對於新用戶和有經驗的用戶來說，導航 Divi 5 介面可能會令人興奮。更新後的介面以其現代化的設計和改進的功能提供了一種全新的網站建立方法。以下是我們分享的一些提示，可幫助您熟悉該介面：

1.透過圖層視圖快速存取元素

圖層面板對於 Divi 5 來說並不新鮮。它也是您在建造過程中希望保持可見的關鍵可停靠面板之一。它是管理複雜佈局的遊戲規則改變者，尤其是當元素重疊或難以選擇時。按您要尋找的不同元素進行搜尋/篩選也很有幫助，可以快速在大頁面上找到多個元素。

打開螢幕左側的「圖層面板」以查看佈局中的所有元素，無論它們在畫布上的位置或可見性如何。您可以直接從那裡選擇任何圖層，即使隱藏在另一個模組或部分後面。

專業提示

始終保持圖層視圖作為停靠面板之一可見。它太有幫助和方便了，不容忽視。

實際例子

假設您想要使用新內容更新頁面上的所有 CTA 按鈕。在 Divi 5 中，您可以使用圖層面板搜尋所需的元素（按鈕）以將它們全部顯示在視圖中。然後，只需單擊每個按鈕，您就可以更新設置面板中的設置，該面板將立即彈出。這種無縫的工作流程是處理複雜、內容豐富的設計的遊戲規則改變者。

2. 使用可停靠面板和一鍵式操作加快編輯速度

Divi 5 的可停靠面板和一鍵編輯功能可讓您保持多個設定面板打開，同時只需單擊即可快速變更。這樣可以實現快速調整和更順暢的模組導航，而無需反覆打開和關閉面板。

專業提示

將相關面板停靠在螢幕一側以便快速訪問，尤其是在同時處理多個部分或模組時。這減少了所需的點擊次數並加快了您的工作流程。

實際例子

繼續我們第一個技巧中的範例，您需要調整所有模組的按鈕文字。透過將圖層和按鈕面板停靠在同一側，您可以輕鬆地在它們之間切換以進行快速一鍵編輯，從而省去了每次需要進行調整時重新打開面板或將遊標從一個面板移開的麻煩。當處理需要更新的多個部分時，此設定非常理想。

3. 使用設定面板麵包屑簡化導航

設定面板中的麵包屑是 Divi 5 中的任何獨特功能。父元素基本上是子元素的容器。下面是 Divi 元素的父子結構的簡單說明。

甚至模組也有子元素（如手風琴或聯絡表單），並且部分以“Page”作為其父元素，這使得麵包屑更加有用。以前，在 Divi 4 中，您必須依賴圖層視圖或嘗試透過在建構器內部按一下來尋找父元素。

當您開啟 Divi 5 中任何模組的設定時，設定面板頂部會出現一條麵包屑路徑。該軌跡顯示您目前的位置，並允許您透過點擊返回到父元素。以下是選擇手風琴項時麵包屑的範例。您將看到“手風琴”作為麵包屑菜單中的連結之一，因為它是所選手風琴項目的直接父級。

在設計使用多個父元素建立單一設計的聯絡表單或 CTA 時，麵包屑特別有用。設計完模組後，您可以輕鬆跳到列或行元素以相應地調整設計。

實際例子

假設您正在設計一個聯絡表單，並希望將行和部分合併到您的設計中。您可以進行更改並使用麵包屑存取所需的父元素，而無需關閉面板。

4. 輕鬆響應式設計與畫布縮放

在 Divi 5 中，您可以即時縮放畫布，以模擬您的設計在行動裝置、平板電腦和桌面裝置上的外觀。該工具可讓您在不離開建構器的情況下直觀地調整畫布大小，這意味著您不再需要切換到預覽模式或手動調整瀏覽器視窗大小。當您縮放畫布時，Divi 5 的建構器會自動進行調整，以顯示特定裝置尺寸的更改，從而更輕鬆地微調響應式設計。

專業提示

使用 Canvas Scaling 確保您的行動設計看起來完美。在移動視圖中調整內邊距、字體和對齊方式，以便您的佈局在較小的螢幕上無縫運行。

實際例子

對文字進行調整後，您現在需要確保設計在行動裝置上看起來不錯。透過使用 Canvas Scaling，您可以輕鬆調整行動裝置和平板電腦視圖的佈局，而無需在不同裝置或螢幕之間切換。

有關更多信息，請查看如何在 Divi 5 中掌握響應式編輯。

5. 簡化不同視圖模式下的不同互動層

Divi 5 簡化了懸停效果、黏性元素和響應式設計的管理。在 Divi 4 中，您必須手動為每個元素啟用這些設置，並且經常在不同面板之間切換，這使得應用程式和預覽效果非常耗時。 Divi 5 透過在同一設定面板中直接提供互動層來簡化此流程，從而減少微調設計所需的步驟和點擊次數。

它是如何運作的

在 Divi 5 中，懸停、黏滯和響應狀態的設計選項直接內建到每個模組的設定面板中。您可以透過點擊模組設定中的標籤在預設、懸停和黏滯狀態之間快速切換。這個直覺的介面可讓您套用設計效果（例如懸停動畫或黏性行為），而無需瀏覽不同的選單或手動編碼。

專業提示

在懸停和黏滯模式之間切換，以預覽設計元素在跨裝置和互動期間的行為。 Divi 5 可以輕鬆即時查看效果並快速調整。以前，在 Divi 4 中，您必須將變更套用到每個對應的功能，這非常耗時。

實際例子

我們在主頁上新增了諮詢按鈕。透過 Divi 5 的簡化互動層，您可以直接在同一設定面板中在響應式設定、懸停和黏性狀態之間切換，確保每個元素在不同裝置上都能完美運作。我們將首先更改主頁按鈕的背景顏色並檢查其在響應式設定上的行為。

我們將進入懸停模式，更改按鈕背景顏色，並在進行更改後恢復到桌面模式。這將表明桌面版本中的按鈕在遊標移向它之前將具有其原始（黑色）顏色。

最後，我們將在檢查黏滯模式下按鈕的行為之前啟動黏滯模式。這使您可以在滾動不同視圖時快速套用和預覽效果，而無需離開建構器或啟用單獨的設定。

在此處了解有關 Divi 5 如何簡化設計流程的更多資訊。

像專業人士一樣駕馭 Divi 5

透過掌握 Divi 5 介面的這些基本功能，您可以更有效地導航您的設計，並避免可能減慢工作流程的常見問題。無論是使用圖層面板管理重疊元素，還是利用一鍵編輯和畫布縮放進行響應式設計，這些技巧都將幫助您充分利用 Divi 5。

開始在 Divi 5 Public Alpha 中嘗試這些工具，將您的設計提升到一個新的水平。有關 Divi 5 入門的更多提示和資源，請查看我們的完整介面概述和其他部落格文章。

下載 Divi 5 公共 Alpha 版