使用 Web 设计器 work-with-web-designer
在Journey Optimizer中，可视化Web创作由 Adobe Experience Cloud Visual Helper Chrome浏览器扩展提供支持。 了解详情
开始创作您的Web体验
要开始使用可视化Web设计器创作Web体验，请执行以下步骤。
-
在 编辑内容 屏幕中，单击 编辑网页 以打开Web设计器。
note note NOTE 如果尝试加载无法加载的网站，则会显示一条消息，建议您安装可视化编辑帮助程序浏览器扩展。 请参阅本节中的疑难解答提示。 您也可以在不加载可视编辑器的情况下编辑Web内容。 为此，请取消选择 可视编辑器 选项以改用非可视编辑模式。 了解详情 -
在Web设计器中，从画布中选择任意元素，如图像、按钮、段落、文本、容器、标题、链接等。 了解详情
-
要编辑元素，您可以使用：
-
上下文菜单，用于编辑其内容、布局、插入链接或个性化等。
-
右侧面板顶部的图标用于编辑、复制、删除或隐藏每个元素。
-
根据所选元素动态更改的右侧面板。 例如，您可以编辑元素的背景、排版规则、边框、大小、位置、间距、效果或内联样式。
-
编辑Web内容后，即可管理您的修改。 了解详情
使用组件 content-components
-
从左侧的 组件 窗格中，选择一个项。 您可以将以下组件添加到网页中，并根据需要对其进行编辑：
-
将鼠标悬停在页面中并单击 此项前插入 或 此项后插入 按钮以将组件附加到页面上的现有元素。
note note NOTE 要取消选择组件，请单击画布顶部显示的上下文蓝色横幅中的 ESC 按钮。 -
根据需要直接在页面的内容中编辑组件。
-
调整从右侧的上下文窗格显示的样式，例如背景、文本颜色、边框、大小、位置等。 — 取决于所选的组件。
添加个性化
要添加个性化，请选择一个容器，然后从显示的上下文菜单栏中选择个性化图标。 使用个性化编辑器添加更改。 了解详情
在Web设计器中导航 navigate-web-designer
本节详细介绍在Web设计器中导航的各种方式。 要查看和管理添加到您的Web体验的修改，请参阅此部分。
使用痕迹导航 breadcrumbs
-
从画布中选择任意元素。
-
单击屏幕左下方的 展开/折叠痕迹导航 按钮，可快速显示有关所选元素的信息。
-
将鼠标悬停在痕迹导航上时，编辑器中会突出显示相应的元素。
-
使用该编辑器，您可以轻松导航到可视编辑器中的任何父元素、同级元素或子元素。
切换到浏览模式 browse-mode
您可以使用专用按钮将默认 设计 模式交换为 浏览 模式。
从 浏览 模式中，您可以导航到要个性化的选定配置中的相应页面。
在处理身份验证后的页面或在特定URL处从头开始不可用的页面时，此插件特别有用。 例如，您将能够进行身份验证，导航到您的帐户页面或购物车页面，然后切换回 设计 模式，以便在所需页面上执行更改。
使用 浏览 模式还允许您在创作单页应用程序时浏览网站的所有视图。 了解详情
更改设备大小 change-device-size
您可以将Web设计器显示的设备大小更改为预定义的大小，如 平板电脑 或 移动设备横向，或者通过输入所需的像素数来定义自定义大小。
您还可以将缩放焦点从25%更改为400%。
更改设备大小的功能专为可在各种设备、窗口和屏幕大小上呈现出良好效果的响应式网站而设计。 响应式网站会自动调整和适应任何屏幕大小，包括台式机、笔记本电脑、平板电脑或手机。
操作方法视频 video
以下视频说明如何在Journey Optimizer营销活动中使用Web设计器创作Web体验。