開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

Studio 編輯器:使用圖層

在 Studio 編輯器中製作頁面時,可管理頁面的圖層。所有區段和元件都會顯示於此,方便了解其階層結構。若難以在畫布上找到特定元件,也可透過「圖層」面板選取。
顯示頁面上已選取特定元件的「圖層」面板畫面截圖

「圖層」面板的結構

「圖層」面板會依照由上到下的階層結構,顯示目前頁面的所有區段。例如,若頁面頂端有頁首,該頁首便會顯示在清單頂端。
將元件巢狀置於其他元件內時,元件之間便會形成父子關係。例如,容器內的文字元件是該容器的子元件,而該容器則是顯示它的區段之子元件。
「圖層」面板會依照這種父子邏輯整理內容,因此可點擊父元件來查看其子元件。若頁面包含任何全域區段,這些區段會以綠色醒目提示。
使用搜尋列即可快速找到所需圖層。可輸入元件名稱或 ID。

A screenshot of the search bar in the Layers panel in the Studio Editor

選取及管理圖層

「圖層」面板可協助快速前往頁面上的特定元件,也能輕鬆尋找元件。例如,若有多個重疊元件,導致無法找到或選取所需元件,即可使用此面板。
將游標移至圖層上時,頁面會醒目提示該圖層。點擊圖層後,編輯器會直接捲動至該元件。此時即使關閉面板,系統仍會保留選取內容。
提示:
按住 Shift 鍵並依序點擊元件,即可選取多個元件。
GIF 顯示在「圖層」面板中選取登入列元件後,頁面如何捲動至該元件
知道嗎?
也可透過編輯器左下方的階層連結列選取圖層。
The breadcrumbs bar in the Studio Editor, showing a stack selected with 3 more levels of hierarchy - cell, section, page

管理圖層

找到所需圖層後,可在此面板執行多種操作,例如建立圖層複本、向上或向下移動圖層、選擇要在哪些頁面顯示圖層等。
透過下列任一方式管理圖層:
  • 在圖層名稱上按一下滑鼠右鍵。
  • 將游標移至圖層名稱上,然後點擊「更多操作」圖示 。
每個所選圖層可用操作選單的面板畫面截圖

圖層選取偏好設定

Studio 編輯器可讓您選擇在畫布上選取圖層時的預設路徑。點擊含有子元件的父容器時,可決定要選取哪個元件。
  • 優先選取父容器:點擊父容器(例如容器方塊、堆疊等)即可選取。接著,再次點擊其中的任何元件即可進行編輯。
  • 優先選取子元件:系統會選取所點擊的特定子元件,而非其父容器。

若要設定圖層選取偏好:

  1. 點擊左上角的 Wix Studio 圖示 。
  2. 將滑鼠游標移至「檢視」上。
  3. 將滑鼠游標移至「圖層 選取」上。
  4. 選取相關選項:「優先選取父容器」或「優先選取子元件」。
在 Studio 編輯器中設定圖層選取偏好

重新命名圖層

在頁面新增許多區段、容器和元件後,可能難以在「圖層」面板中分辨。重新命名圖層即可輕鬆識別各個圖層;在相關圖層上按兩下,即可輸入新名稱。
顯示如何在面板中按兩下圖層來重新命名的 GIF
使用開發模式?
在「圖層」面板中顯示元件 ID,即可在程式碼中輕鬆識別元件。啟用「顯示 ID」切換開關,即可查看「屬性」面板中界定的 ID。

重新排序圖層

使用拖放功能,即可輕鬆重新排序目前頁面上的元件和區段。由於「圖層」面板按由上至下的順序排列,移動元件也會影響元件在頁面上的位置。
處理重疊元件時,重新排序也會影響 Z 軸順序。例如,若要讓文字顯示在形狀上方,文字在「圖層」面板中必須位於形狀上方。
只能在同一個父項目中拖放元件,無法將元件拖曳至其他父項目。
顯示「圖層」面板拖放功能的 GIF
是否變更了較小斷點的區段順序?
隨時都能重新套用目前的桌面版順序。前往「圖層」面板,點擊「頁面」旁的「更多操作」圖示 ,再選取「在所有斷點使用區段順序」。

The Layers panel, selecting a page and clicking to apply the desktop breakpoint order to all other breakpoints

隱藏及取消隱藏元件

若要直接從畫布快速隱藏目前斷點中的元件,請點擊元件上的「更多操作」圖示 ,再選取「隱藏」。
在 Studio 編輯器的平板斷點中隱藏按鈕
不過,若要取消隱藏元件,則必須前往「圖層」面板操作。隱藏的元件會顯示「隱藏」圖示 ,方便在清單中快速找到。
提示:
在較小的斷點(例如行動裝置)新增元件時,較大的斷點(例如桌面)一律會隱藏該元件。按照這些步驟操作,即可讓元件顯示在較大的斷點中。

若要取消隱藏元件:

  1. 點擊編輯器左側的 「圖層」圖示 。
  2. 在清單中找到隱藏的元件。
  3. 點擊「顯示」圖示 。
在圖層面板中選擇隱藏元件時,「顯示」選項的畫面截圖