找我們做網站
↑
Wordpress · Elementor 教學

Elementor 彈跳視窗教學:建立 Popup 範本並設定顯示條件與觸發

Elementor 教學發布 2023.05.24更新 2026.10.02閱讀約 3 分鐘
Elementor 彈跳視窗教學:建立 Popup 範本並設定顯示條件與觸發

重點整理
Elementor 不用另裝外掛就能做彈跳視窗:在後台「範本 → 彈出式視窗」新增並編輯內容,於「彈出式視窗設置」調整大小、背景與關閉按鈕,發布時再設定顯示在哪些頁面與觸發條件。彈出式視窗屬於 Elementor Pro 功能。

彈跳視窗,在很多網站都可以看到,多數都是在廣告的時候會看到,雖然很煩人,但不可否認運用也很廣泛,除了廣告之外,其實也可以用在呈現一些資訊上!

Elementor 彈跳視窗快速上手

這個功能,如果有使用ELementor 編輯器,其實就有內建了,無須再安裝其他外掛,我們就來看看怎麼使用吧!

在網站後台,找到「範本」,滑鼠移過去後,選擇「彈出式視窗」
Elementor 彈跳視窗快速上手 - 步驟 01

 新增後,輸入想要的標題就可以進到編輯畫面,可以用預設的版型去改,也可以自行設計,這邊以內建的版型為例
操作方式跟一般在使用Elementor時一樣
Elementor 彈跳視窗快速上手 - 步驟 02

 編輯版面不是問題,主要還是關於彈跳視窗的設定,點擊畫面左下角的齒輪切換到「彈出式視窗 設置」
這邊可以針對彈出視窗的大小、背景、關閉按鈕等等做一系列的設定
Elementor 彈跳視窗快速上手 - 步驟 03

 在彈出視窗的「進階」分頁,可以看到簡單的邏輯設定
Elementor 彈跳視窗快速上手 - 步驟 04

 都設定完畢後,就可以直接進行發布,而在點擊發布按鈕時,也會跳出視窗讓你選擇顯示位置、觸發條件等等
這些務必要設定清楚才不會出問題喔
Elementor 彈跳視窗快速上手 - 步驟 05

Elementor 彈跳視窗快速上手 - 步驟 06
Elementor 彈跳視窗快速上手 - 步驟 06

 

Elementor 彈跳視窗快速上手 - 步驟 07
Elementor 彈跳視窗快速上手 - 步驟 07

 全部完成後,就可以在前台檢視成果了!

彈跳視窗適合用在哪些情況?

彈跳視窗會打斷閱讀,用在對訪客有價值的資訊上才不會惹人厭:

  • 限時公告:例如連假出貨時間、活動截止日。
  • 按鈕觸發的內容:例如點「聯絡我們」開啟表單、點商品尺寸開啟尺寸表,訪客主動點擊,不會被打擾。
  • 離開前提醒:滑鼠移出視窗時提示優惠或訂閱電子報。
  • 年齡或地區確認:特定產業需要的進站確認。

一般文章頁面不建議一進站就彈出廣告,會影響閱讀,也會讓訪客直接離開。

彈跳視窗會影響 SEO 嗎?

可能會。Google 對手機版的干擾式插頁有明確立場:訪客從搜尋結果點進來,內容馬上被大型彈跳視窗遮住,會影響使用體驗與排名評估。設定時可以注意:

  • 手機版不要一進站就跳出全螢幕視窗,改用捲動一段後或點擊才觸發。
  • 視窗大小適中,留下明顯的關閉按鈕。
  • Cookie 同意、年齡確認等法規需要的視窗,不在此限。
  • 在進階規則中限制顯示次數,同一位訪客不要每頁都看到。

常見問題

Elementor 彈跳視窗是免費功能嗎?

不是,彈出式視窗屬於 Elementor Pro 功能,需要安裝並啟用 Elementor Pro 才會在「範本」選單看到「彈出式視窗」。只用免費版時,需要另外安裝提供彈跳視窗的外掛。

Elementor 彈跳視窗可以設定哪些觸發條件?

常用的觸發條件有:頁面載入後、捲動到一定比例、點擊頁面、停止操作一段時間,以及滑鼠移出視窗準備離開時。另外可在進階規則中限制只對特定裝置、來源或瀏覽次數顯示,避免每次進站都跳出來。

怎麼讓按鈕點下去才開啟彈跳視窗?

在按鈕的連結欄位點動態標籤圖示,選擇「動作 → 彈出式視窗」,再選要開啟的彈跳視窗即可。這種情況下,彈跳視窗本身的觸發條件可以不設,顯示條件則要包含按鈕所在的頁面。

結語

以上就是Elementor 彈跳視窗快速上手的使用教學,未來也會分享其他社群外掛給大家參考。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。