Popup询价

创建Popup

按照以下步骤设置您的第一个弹出窗口。使用本指南，您将使用按钮手动触发弹出窗口。

1. 转到 Dashboard（控制面板）> Templates（模板）> Popups（弹出窗口）> Add New（添加新项）
2. 为您的模板命名并点击 ‘Create Template’（创建模板）
3. 从库中选择一个模板或创建您自己的设计
4. 点击 ‘Publish’（发布），然后 ‘Save and Close’（保存并关闭）
5. 在 Elementor 中打开一个新页面（CTRL / CMD + E, new page）
6. 拖入一个按钮小部件
7. 在 Layout（布局）下，选择 Link（链接）> Dynamic（动态）> Actions（动作）> Popup（弹出窗口）
8. 点击 Popup（弹出窗口）> Open Popup（打开弹出窗口）> Select the popup you created（选择您创建的弹出窗口）
9. 转到实时页面，点击按钮，看到弹出窗口出现

对于这种基本的弹出窗口，当按钮被点击时出现，不需要设置 Conditions（条件），Triggers（触发器）或 Advanced Rules（高级规则）。

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

一个可能想要使用此功能的例子是创建一个包含表单的弹出窗口，该表单在按钮被点击时触发。查看此视频教程以了解如何操作。

对于更复杂的场景，请查看 Popups（弹出窗口）文档。

配置Popup

弹出窗口是在指定时刻或在特定触发器和条件下覆盖页面的呼叫操作模式窗口。弹出窗口旨在在用户进行操作后将其注意力集中。

开始操作，请转到 Templates（模板） > Popups（弹出窗口）。控制弹出窗口的布局、条件、规则和样式，然后设计弹出窗口内容。

注意：点击面板底部工具栏中的弹出窗口设置齿轮图标以编辑弹出窗口设置。

设计弹出窗口

Layout（布局）

• Width（宽度）：使用 px 或 vh 设置弹出窗口的确切宽度。
• Height（高度）：使用 px 或 vh 设置弹出窗口的确切高度。使用 100vh 作为宽度和高度以创建全屏弹出窗口。
• Horizontal（水平位置）：选择弹出窗口的水平位置，从 Left（左）、Center（中）或 Right（右）中选择。
• Vertical（垂直位置）：选择弹出窗口的垂直位置，从 Top（顶部）、Center（中部）或 Bottom（底部）中选择。
• Overlay（覆盖层）：显示或隐藏背景覆盖层。
• Close Button（关闭按钮）：选择显示或隐藏关闭按钮。
• Show Button After x seconds（x秒后显示按钮）（如果选择了显示关闭按钮）：选择显示关闭按钮前的等待秒数。
• Entrance Animation（进入动画）：从下拉菜单中选择弹出窗口的进入动画，如 fade（淡入）和 zoom（缩放）。选择任何动画效果以预览效果。
• Exit Animation（退出动画）：从下拉菜单中选择弹出窗口的退出动画，如 fade（淡入）和 zoom（缩放）。选择任何动画效果以预览效果。
• Animation Duration（动画持续时间）：以毫秒为单位设置动画的持续时间。

General Settings（常规设置）

• Title（标题）：输入弹出窗口的标题。此标题仅在后端显示，不会显示给用户。
• Status（状态）：Draft（草稿）、Pending Review（待审核）、Private（私有）或 Published（已发布）。

Preview Settings（预览设置）

• Preview Dynamic Content as（以动态内容预览为）：选择从任何 Archives（档案）、Pages（页面）、Posts（帖子）、Media（媒体）或 404 pages（404页面）中预览。

Style（样式）

• Popup（弹出窗口）
  • Background Type（背景类型）：选择背景颜色、图片或渐变。
  • Border Type（边框类型）：选择边框类型，从 none（无）、solid（实线）、double（双线）、dotted（点线）、dashed（虚线）或 grooved（槽线）中选择。
  • Border Radius（边框半径）：设置弹出窗口每侧的圆角控制。
  • Box Shadow（盒子阴影）：调整盒子阴影选项。

Advanced（高级）

• Show Close Button After (sec)（几秒后显示关闭按钮）：输入秒数。关闭按钮将在该时间过后才会出现。
• Automatically Close After (ms)（自动关闭后（毫秒））：输入等待时间，以毫秒计，之后自动关闭弹出窗口。留空以禁用自动关闭。
• Prevent Closing on Overlay（防止在覆盖层上关闭）：选择是，以防止用户通过点击覆盖层来关闭弹出窗口。
• Prevent Closing on ESC Key（防止使用 ESC 键关闭）：选择是，以防止用户按 ESC 键来关闭弹出窗口。
• Disabl
• e Page Scrolling（禁用页面滚动）：选择是，以防止用户滚动显示在弹出窗口后面的页面。
• Avoid Multiple Popups（避免多个弹出窗口）：如果用户在他访问的页面上看到了另一个弹出窗口，选择是来隐藏这个弹出窗口。

 

发布Popup

设置条件
条件允许您设置弹窗显示在您网站的哪些页面上。

通过发布设置控制弹窗
设置决定弹窗使用地点的条件（不包括手动触发）。例如，添加一个包含条件并选择 Singular > Front Page，使弹窗仅在网站首页显示。了解更多关于条件的信息。

设置触发器
触发器是导致您的活动弹出的用户操作。为每个可能触发弹窗的选项选择是或否。

触发器

• On Page Load（在页面加载时）：如果设置为是，设置页面加载后弹窗触发前的等待秒数。
• On Scroll（在滚动时）：如果设置为是，选择方向（向上或向下）和触发弹窗前的滚动量。向下滚动基于页面向下滚动的百分比；向上滚动基于向上滚动的像素数。
• On Scroll To Element（滚动至元素时）：如果设置为是，输入将在用户滚动至该元素时触发弹窗的选择器名称（CSS ID）。您还必须将 CSS ID 添加到元素的高级标签页中。
• On Click（点击时）：如果设置为是，输入将触发弹窗的点击次数。
• After Inactivity（在不活跃后）：如果设置为是，输入用户不活跃将触发弹窗的秒数。
• On Page Exit Intent（在页面退出意图时）：设置为是以在用户的鼠标活动表明意图退出页面时触发弹窗。

 

高级规则
高级规则指定生成弹窗必须满足的其他要求。

高级规则

• Show after X page views（在 X 个页面浏览后显示）：如果设置为是，设置触发弹窗前的页面浏览次数。
• Show after X sessions（在 X 个会话后显示）：如果设置为是，设置触发弹窗前的用户会话次数（一个会话从用户访问网站开始，直到用户关闭浏览器结束）。
• Show up to X times（显示至多 X 次）：弹窗将被显示的最大次数。如果计数设置为在打开时，这将只允许弹窗打开设定次数那么多次。如果计数设置为在关闭时，弹窗将只打开直到用户第 X 次关闭后，之后将不再打开。此设置设置在本地存储中，除非删除，否则会一直保留。
• When arriving from specific URL（从特定 URL 到达时）：如果设置为是，如果用户从特定 URL 到达，则显示或隐藏弹窗（输入特定的 URL）。Regex 是为高级用户设置匹配 URL 模式的高级规则的选项。
• Show when arriving from（从到达时显示）：如果设置为是，如果用户从搜索引擎、外部链接（输入特定链接的 URL）和/或内部链接（输入特定链接的 URL）到达，则显示。
• Hide for logged in users（对登录用户隐藏）：设置为是以对所有已登录用户或从特定自定义角色中选择的用户隐藏弹窗。对于使用缓存的网站，此功能可能无法正常工作。
• Show on devices（在设备上显示）：设置为是以选择在桌面、平板电脑和/或移动设备上显示。

注意：如果页面没有重新加载或重新进入，弹窗不会被显示超过一次。

 

通过手动触发控制弹窗
弹窗可以手动触发。动态链接可以使用弹窗操作来打开或关闭弹窗。表单可以使用提交后操作选项来打开或关闭弹窗。任何元素都可以使用唯一选择器（类、ID 或数据元素）在该元素被点击时手动触发弹窗。

从任何链接元素中，选择 Dynamic > Actions > Popup。点击 Popup 以选择 Open Popup 或 Close Popup。如果选择 Close Popup，选项“Don’t Show Again（不再显示）”将变为可用选项。 从 Elementor 表单中，选择 Actions After Submit > Add Action > Open Popup 或 Close Popup 从自定义选择器：任何元素都可以设置选择器，这可以用作手动触发弹窗的选择器。编辑元素并转到 Advanced > CSS Classes（或 CSS ID）并给元素一个类名（不带点前缀）或 ID 名（不带#前缀）。在弹窗的条件中，选择包含具有唯一选择器的元素的页面（例如，Conditions > Include > Singular > Pages > Your Page Title）。当用户访问该页面并点击该元素时，将触发弹窗。这对于从主题的导航菜单项、文本编辑器小部件中的内容、非 Elementor 元素或脚本等打开弹窗很有用。 当从自定义选择器触发弹窗时，请注意，元素不必是“链接”。通常不可点击的元素，如纯文本，也可以被点击以生成弹窗。还请注意，使用此选项时将忽略触发器和高级规则。

通过退出意图弹窗保持访客参与。Elementor Premium Services 提供专家帮助设计和实施完美的弹窗。