# 网页弹出窗口内容

**网页弹出窗口内容**是当网页弹出窗口出现在您的网站上时，访问者看到的视觉布局。在**内容 (Content)** 下构建它，然后将其附加到 [网页弹出窗口营销活动](/zh/product/messaging-channels/web-popups/create-web-popups-campaigns/)。

## 创建网页弹出窗口内容

1. 前往**内容 (Content)** → **网页弹出窗口内容 (Web popup content)**。
2. 点击**创建网页弹出窗口内容 (Create web popup content)**。
3. 从库中选择一个起始模板。

<img src="/content-web-popups-content-1.webp" alt="网页弹出窗口模板库，显示模态框、图片、底部栏和多页产品导览起始模板"/>
4. 选择模板后，在编辑器中自定义弹出窗口。

### 为弹出窗口命名

点击顶部栏中的弹出窗口名称进行编辑。该名称用于在 Pushwoosh 内部、内容列表和营销活动向导中识别此内容。网站访问者看不到它。

### 编辑弹出窗口设置

在画布左侧的设置面板中调整弹出窗口的外观和位置：

<Aside type="note">
这些设置仅控制弹出窗口的设计。受众、页面定位、延迟、频率和启动设置在 [网页弹出窗口营销活动](/zh/product/messaging-channels/web-popups/create-web-popups-campaigns/#start-a-new-campaign) 中配置。
</Aside>

#### 图片

如果布局包含一张或多张图片，每张图片在面板顶部都有自己的区块，带有预览和控件。

点击**更改图片 (Change image)**，从您项目的 [媒体库 (Media store)](/zh/product/content/media-store/) 中选择一个文件。

<img src="/content-web-popups-content-2.webp" alt="弹出窗口设置部分，在网页弹出窗口编辑器中显示空的图片预览和“更改图片”按钮"/>

预览下方：

- **适应 (Fit)：** 图片如何填充其框架：**自然 (Natural)**、**覆盖 (Cover)** 或 **包含 (Contain)**。背景图片不显示此选项，因为它总是覆盖其区域。
- **模糊 (Blur)：** 柔化图片，范围从 0 到 20 像素。
- **变暗 (Dim)：** 仅限背景图片。在照片上添加一个深色遮罩，以便放置在其上的文本保持可读，范围从 0 到 100%。

某些布局还会添加一个**布局 (Layout)** 部分，其中包含图片放置设置：

- **图片宽度 (Image width)：** 占弹出窗口宽度的百分比。
- **图片位置 (Image position)：** **左 (Left)** 或 **右 (Right)**，适用于图片在文本旁边的布局。

只有当当前布局具有此类设置时，**布局 (Layout)** 部分才会出现。在底部栏布局上，它提供的是**按钮宽度 (Buttons width)** 而不是图片控件。

#### 弹出窗口尺寸和样式

在**弹出窗口 (Popup)** 部分：

- **宽度、高度（留空 = 自动）：** 两者都留空，让弹出窗口根据其内容自动调整大小，或设置以像素为单位的固定大小。在具有多个页面的弹出窗口中，每个页面都有自己的大小。
- **圆角半径、阴影：** 弹出窗口的圆角和投影。
- **动画 (Animation)：** 弹出窗口出现的方式：**无 (None)**、**淡入 (Fade)** 或 **滑入 (Slide)**。

<img src="/content-web-popups-content-3.webp" alt="设置面板中的弹出窗口部分，包含宽度、高度、圆角半径、阴影和动画控件"/>

#### 颜色

点击**颜色 (Colors)** 展开弹出窗口的调色板：

- **背景、强调色（按钮）：** 弹出窗口背景和应用于按钮的强调色。
- **文本、次要文本：** 正文文本和次要文本（如说明文字和眉题）的颜色。
- **图片上的文本：** 仅在文本位于背景图片之上的布局中显示。设置该文本使用的颜色。

<img src="/content-web-popups-content-11.webp" alt="颜色部分已展开，显示背景、强调色、文本、次要文本和图片上文本的颜色选择器"/>

#### 位置和遮罩层

在**位置 (PLACEMENT)** 部分：

- **位置 (Position)：** 使用 3×3 网格选择弹出窗口在页面上的锚定位置。
- **边缘偏移 (Edge offset)：** 设置与所选边缘的距离（以像素为单位）。

在**遮罩层 (OVERLAY)** 部分：

- **调暗页面背景：** 打开此选项可在显示弹出窗口时使页面其余部分变暗。
- **颜色、不透明度：** 设置遮罩层的颜色和不透明度，范围从 0 到 1。

<img src="/content-web-popups-content-4.webp" alt="网页弹出窗口设置面板，包含 POPUP、PLACEMENT 和 OVERLAY 部分，其中包括位置网格和遮罩层控件"/>

### 编辑文本

点击弹出窗口上的任何文本块进行内联编辑。其上方会出现一个工具栏：

- 应用**粗体**、*斜体*或下划线格式。
- 添加或删除链接。
- 设置左对齐、居中对齐或右对齐。
- 选择文本样式：**图标 (Icon)**、**眉题 (Eyebrow)**、**标题 1–3 (Heading 1–3)**、**正文 (Body)** 或 **说明文字 (Caption)**。

<img src="/content-web-popups-content-5.webp" alt="网页弹出窗口画布上选定的文本，带有内联编辑工具栏，显示格式、对齐、链接和样式控件"/>

### 编辑按钮

点击一个按钮以打开其工具栏：

- 选择按钮样式：**主要 (Primary)** 或 **次要 (Secondary)**。
- 选择按钮的功能：
  - **打开链接：** 输入目标 URL。
  - **关闭弹出窗口**。
  - **转到页面：** 选择弹出窗口的另一个页面进行切换。一旦弹出窗口有多个页面，此选项就会出现。请参阅 [使用多个页面](#work-with-multiple-pages)。

<img src="/content-web-popups-content-8.webp" alt="网页弹出窗口画布上选定的按钮，按钮编辑工具栏已打开"/>

<Aside type="tip">
当选中文本块或按钮时，使用工具栏上的 **+T** 或 **+B** 在其下方添加文本块或按钮，使用上下箭头在页面上移动它，使用删除图标将其移除。页面的最后一个元素无法删除。

点击弹出窗口下方的 **+ 添加 (+ Add)** 在页面末尾添加文本块或按钮。
</Aside>

## 使用多个页面

一个网页弹出窗口可以有多个页面，例如引导访问者完成一个简短的多步骤优惠。

### 添加页面

点击 **+ 添加页面 (+ Add page)** 打开添加页面菜单：

- **复制当前页面：** 将活动页面（包括您所做的任何编辑）复制为一个新页面。
- 选择一个单页布局，以添加一个包含该布局演示内容的新页面。新页面独立于其他页面，因此可以使用不同的布局。

<img src="/content-web-popups-content-6.webp" alt="网页弹出窗口编辑器页面选项卡，包含多个页面、起始页标记和“添加页面”"/>

<Aside type="note">
多页示例布局，如**产品导览（多页）(Product tour (multi-page))**，总是以完整的页面集形式提供，因此它们仅在起始库中可用，而不能从此菜单中选择。
</Aside>


每个选项卡都是一个页面。点击一个选项卡以切换到它。

### 设置起始页

标有 ★ 的选项卡是**起始页**，即访问者首先看到的页面。要更改它，请打开另一个选项卡并点击该选项卡上的 ☆。

<img src="/content-web-popups-content-7.webp" alt="页面选项卡，在一个选项卡上显示起始页星形标记，在活动选项卡上显示删除控件"/>

### 删除页面

在活动选项卡上，点击 **✕**。将打开一个确认对话框。点击**删除 (Delete)** 以移除该页面。此操作无法撤销。

<Aside type="note">
操作为**转到页面 (Go to page)** 且指向已删除页面的按钮将回退到**起始页**。
</Aside>

## 保存内容

检查内容、图片和按钮操作。完成后，点击顶部栏中的**保存 (Save)**。

<Aside type="note">
保存内容不会在您的网站上显示网页弹出窗口。只有在您于网页弹出窗口营销活动中选择该内容并启动营销活动后，内容才会出现在网站上。
</Aside>

## 在营销活动中使用内容

保存后，内容会出现在**内容 (Content)** → **网页弹出窗口内容 (Web popup content)** 中。从列表中打开它以继续编辑。

要将其显示在网站上，请前往**营销活动 (Campaigns)** → **网页弹出窗口 (Web popups)**，创建或编辑一个营销活动，并在**内容 (Content)** 步骤中选择此内容。

然后配置受众、显示设置、频率和启动选项。有关完整流程，请参阅 [创建网页弹出窗口营销活动](/zh/product/messaging-channels/web-popups/create-web-popups-campaigns/)。