在瀏覽網頁時，你應該常常會在閱讀一段時間後或是即將跳出頁面之際，突然看見一個彈跳視窗蹦出來希望你留下資料，這類型的表單型態又稱為 pop-up。
這篇中，我將會介紹如何使用 MailerLite 製作一個 pop-up 彈跳視窗。
Kevin 推薦 MailerLite 原因：
- 介面人性化、適合新手學習
- 唯一提供免費自動化電郵行銷的行銷供應商
- 有 7/24 線上客服人員可以諮詢
- 使用我的連結註冊即可享 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 貼到 </head> 前面，這樣 pop-up 彈出視窗就完成囉！
結論
在製作 pop-up 時所提供的內容必須跟網站一致，才能獲得最精準的客群。別人是帶著困擾到你的網站，因此在製作彈跳視窗時要去思考如何提供一些附加價值，方能吸引客戶留下資料。
以上是使用 MailerLite 製作 pop-up 彈跳視窗的教學，如果有任何問題也歡迎在下方留言跟我討論喔！
還沒有 MailerLite 帳號的人，可以用下面的連結註冊。這邊 Kevin 有跟 MailerLite 官方爭取到付費版 30 天的免費試用，希望大家能透過 MailerLite 輕鬆學習電郵行銷知識。
如果這篇文章對你有幫助，可以幫我按 Like 當作回饋，支持我繼續寫出更多好文章！
Kevin 推薦 MailerLite 原因：
- 介面人性化、適合新手學習
- 唯一提供免費自動化電郵行銷的行銷供應商
- 有 7/24 線上客服人員可以諮詢
- 使用我的連結註冊即可享 30 天免費 Pro 版試用
更多 Email 行銷相關文章
電郵行銷工具教學
最適合新手：【如何使用 MailerLite 製作電子報】
部落客專用：【ConvertKit 自動化電子報教學】
網路行銷私藏工具
選擇好的網路行銷工具，能夠讓你事半功倍。這裡有 Kevin 私藏的網路行銷工具，想要學習網路行銷一定不能錯過。
更多網路行銷工具請看：Kevin 私藏網路行銷工具
電郵行銷學習必看書籍：網路行銷究極攻略
歡迎按讚我的粉絲專頁，會有最新文章、Email 行銷知識、網路行銷工具優惠、網路學習資源的訊息。
我正在籌備一門課程”部落格斜槓學院”，歡迎加入等候名單！
==>加入”部落格斜槓學院”課程線上研討會等候名單
如果我的文章對你有幫助，歡迎贊助我一杯咖啡！
若你為海外讀者，也歡迎使用 Paypal 贊助喔！
你可能會想看
Email 行銷 – MailerLite 教學
Email 行銷 – ConvertKit 教學
Email 行銷 – Getresponse 教學
Email 行銷知識