編輯網頁內容 edit-web-content
在您將網頁體驗新增到歷程或行銷活動後，您可以使用網頁設計工具編輯您網站的內容。
在Journey Optimizer中，網頁製作是由 Adobe Experience Cloud Visual Helper Chrome瀏覽器擴充功能所支援。 了解更多
存取下列章節以深入瞭解每個主題：
使用網頁設計工具 work-with-web-designer
若要開始編寫您的Web體驗，請遵循下列步驟。
-
從歷程中行銷活動或網頁體驗活動的 動作 索引標籤，選取 編輯內容。
-
如果您已建立符合規則的頁面，則必須輸入符合此規則的任何URL：變更將套用至符合規則的所有頁面。 頁面內容隨即顯示。
note note NOTE 如果您輸入單一URL作為網頁設定，則會填入要個人化的URL。 
note caution CAUTION 網頁必須包含Adobe Experience Platform Web SDK。 了解更多 -
按一下 編輯網頁 以開始編寫它。 網頁設計工具隨即顯示。
note note NOTE 如果您嘗試載入無法載入的網站，則會顯示一則訊息，建議您安裝Visual Editing Helper瀏覽器擴充功能。 請參閱本節中疑難排解的一些提示。 -
從畫布中選取任何元素，例如影像、按鈕、段落、文字、容器、標題、連結等。 了解更多
-
使用：
-
上下文選單可編輯其內容、配置、插入連結或個人化等。
-
右側面板頂端的圖示可編輯、複製、刪除或隱藏每個元素。
-
根據所選元素動態變更的右側面板。 例如，您可以編輯元素的背景、印刷樣式、框線、大小、位置、間距、效果或內嵌樣式。
-
使用元件 content-components
-
從左側的 元件 窗格中，選取專案。 您可以將下列元件新增至網頁，並視需要加以編輯：
-
將游標停留在頁面上，然後按一下 插入在前 或 插入在後 按鈕，將元件附加至頁面上的現有元素。
note note NOTE 若要取消選取元件，請按一下畫布頂端所顯示內容藍色橫幅中的 ESC 按鈕。 -
視需要直接在頁面的內容中編輯元件。
-
調整從右邊內容窗格顯示的樣式，例如背景、文字顏色、邊框、大小、位置等。 — 視選取的元件而定。
新增個人化
若要新增個人化，請選取容器，然後從顯示的內容功能表列中選取個人化圖示。 使用個人化編輯器新增變更。 了解更多
瀏覽網頁設計工具 navigate-web-designer
本節詳細說明您可以瀏覽Web設計工具的各種方式。 若要檢視和管理新增至您網頁體驗的修改，請參閱本節。
使用階層連結 breadcrumbs
-
從畫布中選取任何元素。
-
按一下畫面左下方的 展開/摺疊階層連結 按鈕，即可快速顯示所選專案的相關資訊。
-
當您將游標停留在階層連結上時，編輯器中會反白顯示對應的元素。
-
您可以使用它輕鬆導覽至視覺編輯器中的任何父項、同層級專案或子項元素。
切換到瀏覽模式 browse-mode
您可以使用專用按鈕，將預設 設計 模式切換至 瀏覽 模式。
從 瀏覽 模式中，您可以瀏覽至您想要個人化之所選組態的正確頁面。
在處理經過驗證或無法從特定URL開始使用的頁面時，此外掛程式特別有用。 例如，您將能夠驗證、導覽至您的帳戶頁面或購物車頁面，然後切換回 設計 模式，以在您想要的頁面上執行變更。
使用 瀏覽 模式，您也可以在編寫單頁應用程式時，瀏覽您網站的所有檢視。 了解更多
變更裝置大小 change-device-size
您可以將網頁設計工具顯示的裝置大小變更為預先定義的大小，例如 平板電腦 或 行動裝置橫向，或輸入所需的畫素數來定義自訂大小。
您也可以將縮放焦點從25%變更為400%。
變更裝置大小的功能是專為可適當呈現在各種裝置、視窗和熒幕大小的回應式網站所設計。 回應式網站會自動調整並適應任何熒幕大小，包括桌上型電腦、筆記型電腦、平板電腦或行動電話。
操作說明影片 video
以下影片說明如何在Journey Optimizer行銷活動中使用Web設計工具來撰寫Web體驗。