【WP Popups – WordPress Popup builder 】WordPress彈出視窗外掛

最後更新 2022-02-08 作者 Roy

WP Popups 是一個網頁彈跳視窗的外掛,在平時也可以用於活動宣傳、社群按鈕、訂閱等相關活動。在五月份疫情突然升級造成很多商家在營運上必須調整,為了讓顧客可以更快速了解店家的營業時間,這時網站上就可以特別使用這類外掛讓顧客明顯知道我們做了調整。

注:在寫這邊文章時原先是要分享 Popups – WordPress Popup 這個外掛,不過寫到一半發現開發者目前沒有開發新功能只有進行安全性更新,現在建議轉移到 WP Popups – WordPress Popup builder 這套外掛

外掛資訊

作者:  timersys
網址:  https://wordpress.org/plugins/wp-popups-lite/
版本: 2.1.4.4

首先安裝好外掛後,點擊上方的Add New

Setup

首先我們在Popup Name 填寫名稱

Content

這邊是基本內容撰寫,右側有提供預覽畫面可以參考

這個工具還有額外提供社群相關選項,只需要將以下標籤貼上並填入資料即可
關閉按鈕 Close Button:
[spu-close class=”” text=”” align=”” conversion=”false”]

紛絲頁面 Facebook Page:
[spu-facebook-page href=”填入網址” name=”” show_faces=”” hide_cover=”” width=””]

按讚按鈕 Facebook Button:
[spu-facebook href=”填入網址” layout=”” show_faces=”” share=”” action=”” width=””]

推特按鈕 Twitter Button:
[spu-twitter user=”填入推特ID” show_count=”” size=”” lang=””]

Appearance

這邊就提供了外觀的設計樣式,可以依需求做調整,只有文字顏色大小需要在Content做調整

  • 彈出位置 Popup Position:設定出現在畫面的位置
  • 彈出動畫 Popup Animation:設定一開始出現的效果
  • 彈出框 Popup Box:設定邊框大小
  • 背景/顏色 Background/Colors:背景顏色修改
  • 彈出邊框 Popup Border:設定邊框樣式
  • 彈出陰影 Popup Shadow:設定邊框陰影
  • 關閉按鈕 Close Button:設定右上角的關閉顏色
  • 自訂 Custom Css:如果上面的功能還不夠,就可以自訂CSS效果

Display Rules

這邊是設定彈跳視窗要在哪個頁面出現,我是採用預設的所有頁面皆出現
All Pages是全部頁面,你也可以指定在某個頁面才出現

Settings

General

這邊可以設定這個彈跳視窗的名稱和說明

Triggers

這個是設定進入網頁後何時出現彈跳視窗,預設是3秒鐘後自動出現,你可以更改成向下滑動多少後出現彈跳視窗

Cookies/Close

這是採用cookie紀錄用戶的訪問時間,可以設定用戶關閉彈跳視窗後一天內不再顯示,避免用戶觀看一個頁面就出現一次畫面導致直接離開網站

最終在網站上所呈現的效果

關於作者 Roy

曾經北漂的工程師,現在專注於WordPress、.Net Core開發


發佈留言