使用網頁設計工具 work-with-web-designer
在Journey Optimizer中,視覺化網頁製作是由 Adobe Experience Cloud Visual Helper Chrome瀏覽器擴充功能所支援。 了解更多
開始編寫您的網頁體驗
若要開始使用視覺化網頁設計工具製作您的網頁體驗,請遵循下列步驟。
-
在編輯內容 屏幕中,按兩下編輯 網頁頁面 以打開網頁設計器。
note note NOTE 如果嘗試載入無法載入的網站,則會顯示一條消息,建議你安裝 可視化編輯幫助程式瀏覽器擴展。 請參閱本節🔗中的一些故障排除提示。 您也可以在不載載視覺編輯者的情況下编辑網页內容。 為此,請取消選擇“ 可視編輯者 ”選項以改用非可視版本模式。 了解更多 -
進入網頁設計器后,從畫布中選擇任何元素,例如圖像,按鈕,段落,文本,容器,標題,連結等。 了解更多
-
要編輯元素,您可以使用:
-
上下文功能表,用于编辑其內容、佈局、插入連結或個人化等。
-
右側面板頂端的圖示可編輯、重複、刪除或隱藏各元素。
-
根據所選取元素動態變更的右側面板。 例如,您可以編輯元素的背景、排版、邊框、大小、位置、間距、效果或內聯樣式。
-
編輯網頁內容後,您就可以管理您的修改。 了解更多
使用元件 content-components
-
從左側的 元件 窗格中,選取專案。 您可以將下列元件新增至網頁,並視需要加以編輯:
-
將滑鼠懸停在頁面中並按兩下 “在前面 插入”或 “在後 插入”按鈕以將元件附加到頁面上的現有元素。
note note NOTE 要取消選擇元件,請按兩下 畫布頂部顯示的上下文藍色橫幅中的 ESC 按鈕。 -
根據需要直接在頁面內容中編輯元件。
-
調整從右側上下文窗格顯示的樣式,例如背景、文本顏色、邊框、大小、位置等。 - 取決於所選元件。
新增個人化
若要添加個人化,請選擇一個容器,然後從顯示的上下文功能表中選擇個人化圖示。 使用 個人化 編輯者新增變更。 了解更多
瀏覽網頁設計器 navigate-web-designer
本節詳細說明您可以瀏覽Web設計工具的各種方式。 若要檢視和管理新增至您網頁體驗的修改,請參閱本節。
使用階層連結 breadcrumbs
-
從畫布中選取任何元素。
-
按一下畫面左下方的 展開/摺疊階層連結 按鈕,即可快速顯示所選專案的相關資訊。
-
當您將游標暫留在痕跡導航上時,編輯者中會反白顯示相應的元素。
-
使用它可以輕鬆導航到可視化編輯者中的任何父元素、同層級元素或子元素。
切換到瀏覽模式 browse-mode
您可以使用專用按鈕從默認 設計 模式 切換到瀏覽 模式。
在 瀏覽 模式下,您可以從要個性化的選定配置中導航到確切的頁面。
在處理身份驗證後面的頁面或無法從特定URL的開始獲得的頁面時,它特別有用。 例如,您將能够進行身份驗證,導航到帳戶頁面或購物車頁面,然後切換回 設計 模式,以便對所需頁面執行更改。
使用瀏覽 模式還可以 在創作單頁面應用程式時瀏覽網站的所有視圖。了解更多
變更裝置大小 change-device-size
您可以將 Web 設計器顯示器的裝置大小更改為預定義的大小,例如 平板電腦 或 行動裝置橫向,或透過輸入所需的像素數來定義自定義大小。
您也可以將縮放焦點從25%變更為400%。
變更裝置大小的功能是專為可適當呈現在各種裝置、視窗和熒幕大小的回應式網站所設計。 回應式網站會自動調整並適應任何熒幕大小,包括桌上型電腦、筆記型電腦、平板電腦或行動電話。
操作說明影片 video
以下影片說明如何在Journey Optimizer行銷活動中使用Web設計工具來撰寫Web體驗。