creat my own product with affiliate link

【圖文教學】-利用 MailerLite 製作 pop-up 彈跳視窗

在瀏覽網頁時,你應該常常會在閱讀一段時間後或是即將跳出頁面之際,突然看見一個彈跳視窗蹦出來希望你留下資料,這類型的表單型態又稱為 pop-up

這篇中,我將會介紹如何使用 MailerLite 製作一個 pop-up 彈跳視窗。

Kevin 推薦 MailerLite 原因:

  1. 介面人性化、適合新手學習
  2. 唯一提供免費自動化電郵行銷的行銷供應商
  3. 有 7/24 線上客服人員可以諮詢
  4. 使用我的連結註冊即可享 30 天免費 Pro 版試用

Pop-up 彈跳視窗的功能及常見型態

Pop-up 彈跳視窗代表進入網站或者離開網站時,彈出一個表單讓網頁瀏覽者留下 Email 資料,藉以收集更多名單、培養未來的潛在客戶。

為了要吸引更多人留下名單,pop-up 的設計要能吸引人,常見的型態有小測驗提供免費資源、下載電子書、折價優惠、線上研討會報名等等。

MailerLite 製作 pop-up 彈跳視窗教學

Step 1:創建訂閱名單

在創建 pop-up 彈跳視窗之前,首先你必須要先創立一個訂閱名單,提供給 pop-up 蒐集名單用。這樣當別人在你的 pop-up 留下資料,就會直接紀錄到這個名單中。

登入 MailerLite 後台,看到最上排的功能列,點選 Subscriber 並選擇 Groups

這時你會看見右上方出現 Create group 的橘色按鈕,點選並自訂你想要記錄到的名單名稱。

Step 2:建立一個新的 pop-up

接著看回最上排的功能列,點選 Forms 進入表單製作。

這時你會看到右上方 Create pop-up 的橘色按鈕,點擊並自訂你想要的彈跳視窗名稱(給自己看的)。

命名完成後需要選擇前面建立好的名單,用來蒐集未來填寫 pop-up 彈出視窗表單的網頁瀏覽者名單。

Step 3:選擇模板使用

Pop-up 名稱和紀錄名單都設定完成後,就能開始設計自己的彈跳視窗表單啦!這裡 MailerLite 提供了 4 種類型的彈跳視窗模板,目前每種類型都提供 4 個模板:
Feature pop-up (一般在正中間的)
Full-screen(全螢幕)
Slidebox pop-up(滾動式)
Half-screen pop-up(半螢幕)

Feature pop-up 

Full-screen 

Slidebox pop-up

Half-screen

Step 4:開始製作你的 pop-up

選定模板後,你就可以進去客製化自己的 pop-up。MailerLite 的表單製作使用的是拖拉式(如下圖),因此要多一張圖就拉 Image,要新增文字就拉 Text,非常容易操作。

下方是我使用 MailerLite 製作出來的 pop-up 表單,供參考。

表單製作完別忘了還有填寫成功訊息要製作,點選上方的 Success 頁面繼續製作。

Step 5:設定 pop-up 出現時機和出現頁面

Pop-up 彈出視窗表單製作完成後,就要來設定出現頁面和時機。彈跳時機設定(Mode)依序為:
1. 在頁面待多久彈跳出來
2. 頁面瀏覽到幾%跳出來
3. 要跳出頁面時跳出來

Frequency 的地方可以設定如果一位使用者看見彈跳視窗沒有填入資料,他下一次要隔多久,回來網頁造訪才能再次看到 pop-up 彈跳視窗。

Visibility 的地方可以設定哪個頁面要放彈出視窗,以及是否要在不同裝置(桌機、手機、平板)上彈出。

Step 6:啟用 pop-up 彈跳視窗表單

出現頁面及時機設定完成後,會跳到確認頁。這裡有一個雙重驗證(Double opt in)的選項,代表是否要在別人填入資料後再寄一封信給他驗證(建議開啟)。

如果你不需要驗證資料,可以直接將狀態(Status)開啟,然後跳到下一步;如果需要雙重驗證,就要去設計雙重驗證的 Email。

看到上方列有 Double Opt-in Email 以及 Double Opt-in Thank You page,雙重驗證的 Email 要從這裡去編輯。

Step 7:將 pop-up 放到網站中

回到 Overview,確認自己的狀態是啟用的(Active)。拉到最下方你會見 Javascript code,將那一長串複製起來,後面需要將它放到網站中。

來到 WordPress 後台,選擇外觀佈景主題編輯器

點選 header.php,將前面複製的 Javascript code 貼到 前面,這樣 pop-up 彈出視窗就完成囉!

結論

在製作 pop-up 時所提供的內容必須跟網站一致才能獲得最精準的客群。別人是帶著困擾到你的網站,因此在製作彈跳視窗時要去思考如何提供一些附加價值,方能吸引客戶留下資料。

以上是使用 MailerLite 製作 pop-up 彈跳視窗的教學,如果有任何問題也歡迎在下方留言跟我討論喔!

還沒有 MailerLite 帳號的人,可以用下面的連結註冊。這邊 Kevin 有跟 MailerLite 官方爭取到付費版 30 天的免費試用,希望大家能透過 MailerLite 輕鬆學習電郵行銷知識。

如果這篇文章對你有幫助,可以幫我按 Like 當作回饋,支持我繼續寫出更多好文章!

Kevin 推薦 MailerLite 原因:

  1. 介面人性化、適合新手學習
  2. 唯一提供免費自動化電郵行銷的行銷供應商
  3. 有 7/24 線上客服人員可以諮詢
  4. 使用我的連結註冊即可享 30 天免費 Pro 版試用
更多 Email 行銷相關文章
電郵行銷工具教學

網路行銷私藏工具

選擇好的網路行銷工具,能夠讓你事半功倍。這裡有 Kevin 私藏的網路行銷工具,想要學習網路行銷一定不能錯過。 

更多網路行銷工具請看:Kevin 私藏網路行銷工具

電郵行銷學習必看書籍:網路行銷究極攻略

歡迎按讚我的粉絲專頁會有最新文章、Email 行銷知識、網路行銷工具優惠、網路學習資源的訊息。

如果我的文章對你有幫助,歡迎贊助我一杯咖啡!




若你為海外讀者,也歡迎使用 Paypal 贊助喔!

​你可能會想看

Email 行銷 – MailerLite 教學

Email 行銷 – ConvertKit 教學

Email 行銷 – Getresponse 教學

Email 行銷知識

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *