【圖文教學】-利用 MailerLite 製作 pop-up 彈跳視窗Email行銷推薦, MailerLite教學 / 2022 年 5 月 18 日 在瀏覽網頁時,你應該常常會在閱讀一段時間後或是即將跳出頁面之際,突然看見一個彈跳視窗蹦出來希望你留下資料,這類型的表單型態又稱為 pop-up。 這篇中,我將會介紹如何使用 MailerLite 製作一個 pop-up 彈跳視窗。 Kevin 推薦 MailerLite 原因: 介面人性化、適合新手學習唯一提供免費自動化電郵行銷的行銷供應商有 7/24 線上客服人員可以諮詢使用我的連結註冊即可享 30 天免費 Pro 版試用 前往 MailerLite 內容目錄 Pop-up 彈跳視窗的功能及常見型態MailerLite 製作 pop-up 彈跳視窗教學Step 1:創建訂閱名單Step 2:建立一個新的 pop-upStep 3:選擇模板使用Step 4:開始製作你的 pop-upStep 5:設定 pop-up 出現時機和出現頁面Step 6:啟用 pop-up 彈跳視窗表單Step 7:將 pop-up 放到網站中結論你可能會想看 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 版試用 前往 MailerLite 更多 Email 行銷相關文章 ♦【電郵行銷退流行?】告訴你7大電郵行銷的優勢♦ 2021年免費爆增 Email 名單技巧,取得名單培養潛在客戶♦ 【如何避免成為垃圾郵件?】成為垃圾郵件的 12 大原因及 7 大解決方式♦ 8 大 Email 行銷供應商比較-如何選擇適合的 EDM 電子報製作平台♦ 行銷漏斗 – 2021 你不可不知道的網路創業成功行銷秘密武器 電郵行銷工具教學 最適合新手:【如何使用 MailerLite 製作電子報】 部落客專用:【ConvertKit 自動化電子報教學】 最全方位:【全方位電郵行銷工具 GetResponse 教學】 網路行銷私藏工具 Kevin 私藏網路行銷工具 選擇好的網路行銷工具,能夠讓你事半功倍。這裡有 Kevin 私藏的網路行銷工具,想要學習網路行銷一定不能錯過。 Kevin 私藏網路行銷工具 更多網路行銷工具請看:Kevin 私藏網路行銷工具電郵行銷學習必看書籍:網路行銷究極攻略歡迎按讚我的粉絲專頁,會有最新文章、Email 行銷知識、網路行銷工具優惠、網路學習資源的訊息。我正在籌備一門課程”部落格斜槓學院”,歡迎加入等候名單!==>加入”部落格斜槓學院”課程線上研討會等候名單如果我的文章對你有幫助,歡迎贊助我一杯咖啡! 若你為海外讀者,也歡迎使用 Paypal 贊助喔! 你可能會想看 Email 行銷 – MailerLite 教學 【電郵服務商】- 15分鐘迅速掌握 MailerLite 介面操作【圖文教學】-利用 MailerLite 製作 pop-up 彈跳視窗【如何使用MailerLite製作電子報】-Top1電郵行銷工具推薦如何將MailerLite和Elementor聯絡表單串接,自動收集客戶名單資訊【圖文教學】-利用 MailerLite 製作 Landing Page Email 行銷 – ConvertKit 教學 【ConvertKit 自動化電子報教學】-適合新手部落客的電郵行銷工具【ConvertKit 結合 Woocommerce 購物車】-虛擬商品搭配自動化寄信流程 Email 行銷 – Getresponse 教學 【全方位電郵行銷工具推薦】- GetResponse 電郵行銷自動化流程教學 行銷漏斗 – 2022 你不可不知道的網路創業成功行銷秘密武器 Email 行銷知識 【電郵行銷退流行?】告訴你7大電郵行銷的優勢 2022年免費爆增 Email 名單技巧,取得名單培養潛在客戶【如何避免成為垃圾郵件?】成為垃圾郵件的 12 大原因及 7 大解決方式 8 大 Email 行銷供應商比較-如何選擇適合的 EDM 電子報製作平台