我们在使用Elementor编辑器构建网页的时候，Elementor的弹出窗口这个功能也不错；这个功能可以帮助你吸引用户的注意力，提供重要的信息或优惠活动等。我们看看Elementor如何创建一个弹出窗口并配置弹出窗口

创建一个弹出窗口

首先，需要创建一个弹出窗口，可以按照下面的步骤设置你的第一个弹出窗口。按照这个指南，使用的是按钮手动触发弹出窗口。

1. 转到仪表盘> 模板 > 弹出窗口 > 添加新的
2. 为模板命名并单击“Creating Templates"
3. 从库中选择模板或创建你自己的设计
4. Click "post", and then click "Save and close"
5. 在 Elementor 中打开新页面（CTRL / CMD + E，新页面）
6. 拖入按钮小部件
7. 在“布局”下，选择“链接”>“动态”>“操作”>“弹出窗口”
8. click (using a mouse or other pointing device)pop-up window>Open pop-up window> 选择您创建的弹出窗口
9. 转到实时页面，单击按钮并看到弹出窗口出现

对于单击按钮时出现的这种类型的基本弹出窗口，  不需要条件、 触发器或 高级规则。

这是基本设置。尝试一下以掌握如何使用 Elementor 弹出窗口。

Configuring pop-up windows

弹出窗口是在特定时刻或特定触发器和条件下弹出并覆盖页面的行动召唤模式窗口。弹出窗口的设计目的是在用户采取行动后集中其注意力。

First, go toTemplates > Popup Window。控制弹窗的布局、条件、规则和样式，然后设计弹窗内容。take note of：单击面板底部工具栏中的弹出设置齿轮图标可编辑弹出设置。

Designing pop-up windows

set up

opening (chess jargon)

1. height：设置弹出窗口的确切宽度，使用 px 或 vh
2. Height：使用 px 或 vh 设置弹出窗口的确切高度。使用 100vh 的宽度和高度来创建全屏弹出窗口
3. level (of achievement etc): Select the horizontal position of the pop-up window from left, center or right
4. perpendicular: Select the vertical position of the pop-up window from top, center or bottom
5. Overlay：显示或隐藏背景叠加
6. close button: Choose to show or hide the close button
7. 多少 秒后显示按钮（如果选择显示关闭按钮）：选择显示关闭按钮之前等待的秒数
8. 入口动画：从下拉选项中选择弹出窗口的入口动画，例如淡入淡出和缩放。选择任何动画效果来预览效果。
9. Exit animation：从下拉选项中选择弹出窗口的退出动画，例如淡入淡出和缩放。选择任何动画效果来预览效果。
10. 动画持续时间: set the duration of the animation in milliseconds

General Settings

1. caption：输入弹出窗口的标题。该标题只会显示在后端，不会显示给用户。
2. state of affairs：草稿、待审、私有或已发布

Preview Settings

将动态内容预览为：从任意档案、页面、帖子、媒体或 404 页面中进行选择。

注意：要查看选择的内容，必须在选择动态内容后重新加载页面。

hairstyle

pop-up window

1. Background type: Select background color, image or gradient
2. Border type：选择边框类型，可以选择无、实线、双线、点线、虚线或凹槽
3. Border radius: Set the border radius to control the corner rounding on each side of the popup window
4. shadow of the frame: Adjustment box shading options

overwrite

Background type: Select background color, image or gradient

close button

1. placement：选择在弹出窗口的内部或外部显示关闭按钮
2. vertical position：使用滑块选择关闭按钮的垂直位置
3. horizontal position：使用滑块选择关闭按钮的水平位置

正常 |悬停

1. color：选择“正常”和“悬停”状态下“关闭”按钮的颜色
2. background color: Choose the background color of the Close button in Normal and Hover states.
3. Size : 设置关闭按钮的大小

先进的

先进的

1. 显示关闭按钮的时间间隔（秒）：输入秒数。关闭按钮仅在该时间过后才会出现。
2. Auto Off Time (ms)：输入自动关闭弹出窗口之前要等待的毫秒数。留空以禁用自动关闭。
3. 防止关闭叠加层：选择“是”可防止用户通过单击叠加层来关闭弹出窗口。
4. 阻止按 ESC 键关闭：选择“是”可阻止用户通过按 ESC 键关闭弹出窗口。
5. Disable page scrolling：选择“是”以防止用户滚动弹出窗口后面显示的页面
6. 避免多个弹出窗口：如果用户在他访问的页面上看到另一个弹出窗口，请选择“是”隐藏此弹出窗口
7. 通过选择器打开: Enter the list of selectors (CSS IDs, classes, or data elements) that will manually trigger the popup.
8. margin: Adjustment of margins
9. Padding: Adjust the padding around pop-up windows
10. CSS class: Add custom classes without dots (e.g. my-class)

Customized CSS

Custom CSS：输入你自己的 CSS

Controlling pop-ups through publishing settings

Setting conditions

prerequisite允许你设置弹出窗口将显示在网站的哪些页面上。

设置确定弹出窗口使用位置的条件（不包括手动触发）。例如，添加“包含”条件并选择“Singular”>“首页”以仅在站点主页上显示弹出窗口。

Setting Triggers

flip-flop (electronics)是导致你的广告活动弹出的用户操作。对于将导致出现弹出窗口的每个选项，选择“是”或“否”。

1. When the page loads：如果设置为“是”，则设置页面加载时触发弹出窗口之前等待的秒数。
2. rolling：如果设置为“是”，请在触发弹出窗口之前选择方向（向上或向下）和滚动量。向下滚动是根据页面向下滚动的percentage；向上滚动基于向上滚动的像素数The
3. On Scroll To Element：如果设置为 Yes，请输入选择器名称 (CSS ID)，当用户滚动到它时将触发弹出窗口。还必须将 CSS ID 添加到元素的“高级”选项卡中。
4. 单击时：如果设置为“是”，请输入将触发弹出窗口的单击次数
5. post-inactivity：如果设置为“是”，请输入将触发弹出窗口的用户不活动秒数。
6. On Page Exit Intent：设置为“是”，以在用户的​​鼠标活动指示退出页面的意图时触发弹出窗口

Advanced Rules

Advanced RulesSpecifies additional requirements that must be met to generate a popup window.

1. 在多少次页面浏览后显示：如果设置为是，则设置触发弹出窗口之前的页面浏览数。
2. 在多少个会话后显示：如果设置为“是”，则设置触发弹出窗口之前的用户会话数（会话在用户访问网站时开始，在用户关闭浏览器时结束）。
3. 显示最多多少次：弹出窗口显示的最大次数。如果“计数”设置为“打开时”，则仅允许弹出窗口打开所设置的次数。如果将“计数”设置为“关闭时”，则弹出窗口只会打开，直到用户第 X 次关闭它，之后将不会再次打开。此设置在本地存储中设置，并将保留在那里直至删除。
4. 从特定 URL 到达时：如果设置为“是”，则在用户从特定 URL 到达时显示或隐藏弹出窗口（输入特定 URL）。 Regex 是高级用户设置匹配 URL 模式的高级规则的选项。
5. Displayed on arrival：如果设置为是，则显示用户是否从搜索引擎、外部链接（输入特定链接的 URL）和/或内部链接（输入特定链接的 URL）到达。
6. 对登录用户隐藏：设置为“是”可为所有登录用户或选定的自定义角色隐藏弹出窗口。对于有缓存的网站，此功能可能无法正常工作
7. Displayed on the device：设置为“是”以选择在台式机、平板电脑和/或移动设备上显示

Attention:如果页面未重新加载或重新进入，则弹出窗口无法显示多次。

Control popups by manual triggers

可以手动触发弹出窗口。动态链接可以使用 Popup Action 来打开或关闭 Popup。表单可以使用“提交后操作”选项来打开或关闭弹出窗口。任何元素都可以使用唯一的选择器（类、ID 或数据元素）在单击该元素时手动触发弹出窗口。

• From any linked element, selectDynamic > Actions > PopupClick on the Click on the“弹出窗口”choose by“打开弹出窗口”maybe“关闭弹出窗口”。如果选择关闭弹出窗口，“no longer displayed" option will become available.
• From the Elementor form, select提交后操作 > 添加操作 > 打开弹出窗口或关闭弹出窗口
• 从自定义选择器：任何元素都可以有一个选择器集，可用作手动弹出触发器。编辑元素并转到高级 > CSS 类(orCSS ID），然后为元素指定类名称（不带前面的点）或 ID 名称（不带前面的 #）。在弹出窗口的Conditions中，使用唯一选择器选择包含该元素的页面（例如Conditions > Include > Singular > Pages > Your Page Title）。当用户访问该页面并单击该元素时，将触发弹出窗口。这对于从主题的导航菜单项、文本编辑器小部件中的内容、从非 Elementor 元素或脚本等打开弹出窗口非常有用。

从自定义选择器触发弹出窗口时，请注意元素不一定是 “链接”。通常不可点击的元素（如纯文本）也可以通过点击来生成弹出窗口。还请注意，使用此选项时，触发器和高级规则将被忽略。