WordPress Elementor|popup彈跳視窗(上)

熱門推薦、查看更多內容的好朋友-彈跳視窗

大家在做 Landing Page 時,是否會有需要做促銷或推廣商品的時候呢?
這時~一進入網頁跳出的小視窗就很重要!
一般來說,彈跳視窗若是有「Call to action」的按鈕,和 促銷「倒數計時」的功能,將有助於增加瀏覽者下單購買的慾望 🤩

而這個功能,其實不需要另外安裝外掛,Elementor 就可以輕易做到囉!
現在就來教教大家如何使用 Elementor 來做 popup 彈跳視窗😛

  • Step1:於「Templates」選單中,點擊 popups

接著就會進入下方的畫面,讓我們來建立第一個Popup吧 🏃‍♀️

  • Step2:選擇版型類型「 popup 」並命名後,就可以建立版型囉!
  • Step3:選擇一個你想要的版型,點擊並插入

版型庫裡通常會有幾種類型及相當多版型可以使用~
當然如果你要自行建置版型也是可以的!

  • Step4:進入編輯畫面,調整成自己想要的樣子
  • Step5:找到 popup 整個視窗的設定處

有在使用elementor編輯器的朋友都知道,elementor的是以段、欄⋯⋯一直往下,層級式的編輯方式。
這時若你想調整「整個視窗」的基本設定,在 Navigator 中是找不到他的區塊的!
只要點擊左下角的齒輪,就可以進行整體基本的設定囉~

  • Step6:開始調整 popup 基本設定

1️⃣ 調整寬度、長度數值(這邊我想調成1000*475)
只要點擊左下角的齒輪,就可以進行整體基本的設定囉~

2️⃣ 置換背景

3️⃣ 將圖片上蓋上一層顏色(這邊我想使用半透明的紅~綠的漸層)
漸層可以調整的數值有:
.顏色位置
.漸層類型(擴散、線性)
.角度
如果不知道做出來的效果怎麼樣,試試看就知道囉^^

4️⃣ 開啟overlay 並調整顏色(這邊我想使用半透明的白色!)

5️⃣ 調整動畫
分為進入和退出的動畫,這邊就自己試試看吧~

  • Step7:加入倒數計時功能

這個功能在Elementor pro中就有囉~
將小工具拉近編輯區塊,並修改樣式就完成了!

  • Step8:發佈並設定「於首頁出現」

第一個選項 INCLUDE:選擇「包含」,即代表哪些頁面會出現~
第二個選項 Singular:選擇「單一」,即代表只有這個頁面會出現~
第三個選項 Front Page:顧名思義就是只有在首頁會出現啦~

  • Step9:設定「Loading」時出現

一般來說,彈跳視窗要觸發都必須有機制,像是按鈕、連結⋯等
若今天我們要讓它在網頁載入時就出現,在這邊進行設定就可以囉!
數值部分還能決定要它在網頁載入後幾秒內跑出來唷!

 

  • Step10:按下「Next」就完成啦~

彈跳視窗是不是超簡單的呢?

仔細研究其實他有很多詳細的地方可以進行設定,並達到不同的效果唷!
下一篇將告訴大家,要如何設定於按鈕觸發彈跳視窗

敬請期待 ✨