我們?cè)谑褂肊lementor編輯器構(gòu)建網(wǎng)頁(yè)的時(shí)候，Elementor的彈出窗口這個(gè)功能也不錯(cuò)；這個(gè)功能可以幫助你吸引用戶的注意力，提供重要的信息或優(yōu)惠活動(dòng)等。我們看看Elementor如何創(chuàng)建一個(gè)彈出窗口并配置彈出窗口

創(chuàng)建一個(gè)彈出窗口

首先，需要?jiǎng)?chuàng)建一個(gè)彈出窗口，可以按照下面的步驟設(shè)置你的第一個(gè)彈出窗口。按照這個(gè)指南，使用的是按鈕手動(dòng)觸發(fā)彈出窗口。

轉(zhuǎn)到儀表盤> 模板 > 彈出窗口 > 添加新的
為模板命名并單擊“創(chuàng)建模板”
從庫(kù)中選擇模板或創(chuàng)建你自己的設(shè)計(jì)
單擊“發(fā)布”，然后單擊“保存并關(guān)閉”
在 Elementor 中打開新頁(yè)面（CTRL / CMD + E，新頁(yè)面）
拖入按鈕小部件
在“布局”下，選擇“鏈接”>“動(dòng)態(tài)”>“操作”>“彈出窗口”
單擊彈出窗口>打開彈出窗口> 選擇您創(chuàng)建的彈出窗口
轉(zhuǎn)到實(shí)時(shí)頁(yè)面，單擊按鈕并看到彈出窗口出現(xiàn)

對(duì)于單擊按鈕時(shí)出現(xiàn)的這種類型的基本彈出窗口，??不需要條件、?觸發(fā)器或?高級(jí)規(guī)則。

這是基本設(shè)置。嘗試一下以掌握如何使用 Elementor 彈出窗口。

配置彈出窗口

彈出窗口是在特定時(shí)刻或特定觸發(fā)器和條件下彈出并覆蓋頁(yè)面的行動(dòng)召喚模式窗口。彈出窗口的設(shè)計(jì)目的是在用戶采取行動(dòng)后集中其注意力。

首先，轉(zhuǎn)到模板 > 彈出窗口。控制彈窗的布局、條件、規(guī)則和樣式，然后設(shè)計(jì)彈窗內(nèi)容。注意：?jiǎn)螕裘姘宓撞抗ぞ邫谥械膹棾鲈O(shè)置齒輪圖標(biāo)可編輯彈出設(shè)置。

設(shè)置

布局

寬度：設(shè)置彈出窗口的確切寬度，使用 px 或 vh
Height：使用 px 或 vh 設(shè)置彈出窗口的確切高度。使用 100vh 的寬度和高度來(lái)創(chuàng)建全屏彈出窗口
水平：選擇彈出窗口的水平位置，從左、中或右
垂直：選擇彈出窗口的垂直位置，從頂部、中心或底部
Overlay：顯示或隱藏背景疊加
關(guān)閉按鈕：選擇顯示或隱藏關(guān)閉按鈕
多少秒后顯示按鈕（如果選擇顯示關(guān)閉按鈕）：選擇顯示關(guān)閉按鈕之前等待的秒數(shù)
入口動(dòng)畫：從下拉選項(xiàng)中選擇彈出窗口的入口動(dòng)畫，例如淡入淡出和縮放。選擇任何動(dòng)畫效果來(lái)預(yù)覽效果。
退出動(dòng)畫：從下拉選項(xiàng)中選擇彈出窗口的退出動(dòng)畫，例如淡入淡出和縮放。選擇任何動(dòng)畫效果來(lái)預(yù)覽效果。
動(dòng)畫持續(xù)時(shí)間：設(shè)置動(dòng)畫的時(shí)間長(zhǎng)度，以毫秒為單位

常規(guī)設(shè)置

標(biāo)題：輸入彈出窗口的標(biāo)題。該標(biāo)題只會(huì)顯示在后端，不會(huì)顯示給用戶。
狀態(tài)：草稿、待審、私有或已發(fā)布

預(yù)覽設(shè)置

將動(dòng)態(tài)內(nèi)容預(yù)覽為：從任意檔案、頁(yè)面、帖子、媒體或 404 頁(yè)面中進(jìn)行選擇。

注意：要查看選擇的內(nèi)容，必須在選擇動(dòng)態(tài)內(nèi)容后重新加載頁(yè)面。

風(fēng)格

背景類型：選擇背景顏色、圖像或漸變
邊框類型：選擇邊框類型，可以選擇無(wú)、實(shí)線、雙線、點(diǎn)線、虛線或凹槽
邊框半徑：設(shè)置邊框半徑以控制彈出窗口每側(cè)的角圓度
框陰影：調(diào)整框陰影選項(xiàng)

覆蓋

背景類型：選擇背景顏色、圖像或漸變

關(guān)閉按鈕

位置：選擇在彈出窗口的內(nèi)部或外部顯示關(guān)閉按鈕
垂直位置：使用滑塊選擇關(guān)閉按鈕的垂直位置
水平位置：使用滑塊選擇關(guān)閉按鈕的水平位置

正常 |懸停

顏色：選擇“正?！焙汀皯彝！睜顟B(tài)下“關(guān)閉”按鈕的顏色
背景顏色：選擇“正常”和“懸?！睜顟B(tài)下“關(guān)閉”按鈕的背景顏色
Size?: 設(shè)置關(guān)閉按鈕的大小

先進(jìn)的

顯示關(guān)閉按鈕的時(shí)間間隔（秒）：輸入秒數(shù)。關(guān)閉按鈕僅在該時(shí)間過(guò)后才會(huì)出現(xiàn)。
自動(dòng)關(guān)閉時(shí)間（毫秒）：輸入自動(dòng)關(guān)閉彈出窗口之前要等待的毫秒數(shù)。留空以禁用自動(dòng)關(guān)閉。
防止關(guān)閉疊加層：選擇“是”可防止用戶通過(guò)單擊疊加層來(lái)關(guān)閉彈出窗口。
阻止按 ESC 鍵關(guān)閉：選擇“是”可阻止用戶通過(guò)按 ESC 鍵關(guān)閉彈出窗口。
禁用頁(yè)面滾動(dòng)：選擇“是”以防止用戶滾動(dòng)彈出窗口后面顯示的頁(yè)面
避免多個(gè)彈出窗口：如果用戶在他訪問的頁(yè)面上看到另一個(gè)彈出窗口，請(qǐng)選擇“是”隱藏此彈出窗口
通過(guò)選擇器打開：輸入將手動(dòng)觸發(fā)彈出窗口的選擇器列表（CSS ID、類或數(shù)據(jù)元素）。
邊距：調(diào)整邊距
Padding：調(diào)整彈出窗口周圍的填充
CSS 類：添加不帶點(diǎn)的自定義類（例如 my-class）

自定義CSS

自定義 CSS：輸入你自己的 CSS

設(shè)置條件

條件允許你設(shè)置彈出窗口將顯示在網(wǎng)站的哪些頁(yè)面上。

設(shè)置確定彈出窗口使用位置的條件（不包括手動(dòng)觸發(fā)）。例如，添加“包含”條件并選擇“Singular”>“首頁(yè)”以僅在站點(diǎn)主頁(yè)上顯示彈出窗口。

設(shè)置觸發(fā)器

觸發(fā)器是導(dǎo)致你的廣告活動(dòng)彈出的用戶操作。對(duì)于將導(dǎo)致出現(xiàn)彈出窗口的每個(gè)選項(xiàng)，選擇“是”或“否”。

頁(yè)面加載時(shí)：如果設(shè)置為“是”，則設(shè)置頁(yè)面加載時(shí)觸發(fā)彈出窗口之前等待的秒數(shù)。
滾動(dòng)時(shí)：如果設(shè)置為“是”，請(qǐng)?jiān)谟|發(fā)彈出窗口之前選擇方向（向上或向下）和滾動(dòng)量。向下滾動(dòng)是根據(jù)頁(yè)面向下滾動(dòng)的百分比；向上滾動(dòng)基于向上滾動(dòng)的像素?cái)?shù)。
On Scroll To Element：如果設(shè)置為 Yes，請(qǐng)輸入選擇器名稱 (CSS ID)，當(dāng)用戶滾動(dòng)到它時(shí)將觸發(fā)彈出窗口。還必須將 CSS ID 添加到元素的“高級(jí)”選項(xiàng)卡中。
單擊時(shí)：如果設(shè)置為“是”，請(qǐng)輸入將觸發(fā)彈出窗口的單擊次數(shù)
不活動(dòng)后：如果設(shè)置為“是”，請(qǐng)輸入將觸發(fā)彈出窗口的用戶不活動(dòng)秒數(shù)。
On Page Exit Intent：設(shè)置為“是”，以在用戶的??鼠標(biāo)活動(dòng)指示退出頁(yè)面的意圖時(shí)觸發(fā)彈出窗口

高級(jí)規(guī)則

高級(jí)規(guī)則指定生成彈出窗口必須滿足的其他要求。

在多少次頁(yè)面瀏覽后顯示：如果設(shè)置為是，則設(shè)置觸發(fā)彈出窗口之前的頁(yè)面瀏覽數(shù)。
在多少個(gè)會(huì)話后顯示：如果設(shè)置為“是”，則設(shè)置觸發(fā)彈出窗口之前的用戶會(huì)話數(shù)（會(huì)話在用戶訪問網(wǎng)站時(shí)開始，在用戶關(guān)閉瀏覽器時(shí)結(jié)束）。
顯示最多多少次：彈出窗口顯示的最大次數(shù)。如果“計(jì)數(shù)”設(shè)置為“打開時(shí)”，則僅允許彈出窗口打開所設(shè)置的次數(shù)。如果將“計(jì)數(shù)”設(shè)置為“關(guān)閉時(shí)”，則彈出窗口只會(huì)打開，直到用戶第 X 次關(guān)閉它，之后將不會(huì)再次打開。此設(shè)置在本地存儲(chǔ)中設(shè)置，并將保留在那里直至刪除。
從特定 URL 到達(dá)時(shí)：如果設(shè)置為“是”，則在用戶從特定 URL 到達(dá)時(shí)顯示或隱藏彈出窗口（輸入特定 URL）。 Regex 是高級(jí)用戶設(shè)置匹配 URL 模式的高級(jí)規(guī)則的選項(xiàng)。
到達(dá)時(shí)顯示：如果設(shè)置為是，則顯示用戶是否從搜索引擎、外部鏈接（輸入特定鏈接的 URL）和/或內(nèi)部鏈接（輸入特定鏈接的 URL）到達(dá)。
對(duì)登錄用戶隱藏：設(shè)置為“是”可為所有登錄用戶或選定的自定義角色隱藏彈出窗口。對(duì)于有緩存的網(wǎng)站，此功能可能無(wú)法正常工作
在設(shè)備上顯示：設(shè)置為“是”以選擇在臺(tái)式機(jī)、平板電腦和/或移動(dòng)設(shè)備上顯示

注意：如果頁(yè)面未重新加載或重新進(jìn)入，則彈出窗口無(wú)法顯示多次。

可以手動(dòng)觸發(fā)彈出窗口。動(dòng)態(tài)鏈接可以使用 Popup Action 來(lái)打開或關(guān)閉 Popup。表單可以使用“提交后操作”選項(xiàng)來(lái)打開或關(guān)閉彈出窗口。任何元素都可以使用唯一的選擇器（類、ID 或數(shù)據(jù)元素）在單擊該元素時(shí)手動(dòng)觸發(fā)彈出窗口。

從任何鏈接元素中，選擇Dynamic > Actions > Popup。單擊“彈出窗口”以選擇“打開彈出窗口”或“關(guān)閉彈出窗口”。如果選擇關(guān)閉彈出窗口，“不再顯示”選項(xiàng)將成為可用選項(xiàng)。
從 Elementor 表單中，選擇提交后操作 > 添加操作 > 打開彈出窗口或關(guān)閉彈出窗口
從自定義選擇器：任何元素都可以有一個(gè)選擇器集，可用作手動(dòng)彈出觸發(fā)器。編輯元素并轉(zhuǎn)到高級(jí) > CSS 類（或CSS ID），然后為元素指定類名稱（不帶前面的點(diǎn)）或 ID 名稱（不帶前面的 #）。在彈出窗口的Conditions中，使用唯一選擇器選擇包含該元素的頁(yè)面（例如Conditions > Include > Singular > Pages > Your Page Title）。當(dāng)用戶訪問該頁(yè)面并單擊該元素時(shí)，將觸發(fā)彈出窗口。這對(duì)于從主題的導(dǎo)航菜單項(xiàng)、文本編輯器小部件中的內(nèi)容、從非 Elementor 元素或腳本等打開彈出窗口非常有用。

從自定義選擇器觸發(fā)彈出窗口時(shí)，請(qǐng)注意元素不一定是 “鏈接”。通常不可點(diǎn)擊的元素（如純文本）也可以通過(guò)點(diǎn)擊來(lái)生成彈出窗口。還請(qǐng)注意，使用此選項(xiàng)時(shí)，觸發(fā)器和高級(jí)規(guī)則將被忽略。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息