Blocksy 教學 – 使用強大的內容區塊製作「彈出視窗 (Popup Window)」

彈出視窗 (Popup Window) 幾乎是所有網站在宣傳、行銷、廣告時一定會使用到的功能，妥善的運用可以讓訪客獲得更多的資訊、增加點擊率、轉換率，積極地使用彈出視窗更可以結合錯失恐懼 (FOMO) 的飢餓行銷，提高電商的業績。

這類工具一般會被歸類於網路行銷工具，可以從 WordPress 外掛或 SaaS 工具中搜尋相關關鍵字找到，很大的機會都是需要付費的，因為這是屬於可以協助網站績效成長的工具。

這篇文章將與大家分享如何製作彈出視窗 (Popup Window)，只需要使用 Blocksy 佈景主題編輯器就能製作出輕量、能夠滿足各種需求用途的彈出視窗。文章內容將涵蓋：

• 彈出視窗的應用情景介紹。
• 透過 Blocksy 佈景主題編輯器，利用 Blocksy Pro 中 Popup 類別的 Content Blocks，搭配條件管理器、按鈕，決定彈出視窗出現的時間與位置。

提醒：這是一篇關於 Blocksy Popup 類型內容區塊的教學文章，內容較長。

彈出視窗的應用情景

大家可以回想一下，在訪問各類型網站時最常看到的彈出視窗有哪些類型？

最頻繁出現的應該就是各類型的「廣告」，煩人的程度從惱人到擾人，特別是一些內容農場或新聞網站；但如果能恰到好處的彈出就能達到最佳的行銷功效了。

接著就是「註冊表單」，例如電子報、免費加入會員等。

還有一些大家想不到的應用方式，例如我們在其他文章中討論過的「適合手機閱讀的文章目錄」。

也就是說，使用 Blocksy Pro 的內容區塊 (Content Blocks) 我們可以滿足以下應用情景的需求：

• 行銷活動、行動呼籲 CTA
  • 搭配區塊編輯器 (例如：Kadence Blocks)、設計能力，可以做出吸引人的行銷訴求。
  • 搭配提供倒數計時區塊的外掛 (例如：Kadence 的 Countdown 區塊)，就能做出「錯失恐懼」的行銷規劃。
• 註冊表單
  搭配 Email行銷工具外掛 (例如：Brevo 或 MailPoet) 或表單外掛 (例如：Fluent Forms 或 Kadence 的表單區塊)，可以做出邀請訪客加入訂閱電子報或成為網站會員的註冊表單。
• 特別應用
  搭配提供文章目錄 (Table of Contents) 的外掛 (例如：Kadence 或 RankMath SEO 的文章目錄區塊) 以及 Blocksy Hook 類型的內容區塊，可以做出適合手機閱讀的文章目錄。

文章回顧：「如何製作適合手機閱讀的文章目錄、內容大綱？」。

而這些彈出視窗的觸發條件有：

• 頁面捲動
• 點擊元素物件
• 頁面載入
• 訪客不活躍
• 訪問時間
• 訪問頁數
• 離開頁面

此外，更可以按照以下與「時間」相關的條件設定彈出視窗與否：

• 固定日期、時間區間內
• 固定每周幾的特定時段

善加運用這些條件功能，就能在網站頁面上的各個角落，按照規劃的時間彈出視窗。

Blocksy 佈景主題編輯器

在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 專業版擴充功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

Blocksy 的 Popup 類型內容區塊

我們接著來介紹今天的主題：Blocksy 的 Popup 類型內容區塊。

從 WordPress 的管理後台找到 Blocksy 的功能選單。

點擊 Content Blocks 進入內容區塊管理頁面。

新增內容區塊 (Content Blocks)

點擊 Add New 按鈕新增 Content Blocks。

選擇 Popup 類型的 Content Blocks。

內容區塊的設計

在編輯頁面中任意地揮灑你的設計能力，使用編輯器 (我們是用 Kadence Blocks 區塊編輯器) 做出適合推廣、行銷目的的內容區塊。

以 Quants Note 網站上的「歡迎加入我們的社團」的彈出視窗來說，只需要 Kadence 的幾種基礎區塊組合搭配，就能做出這個漂亮的設計。

• Row Layout
• Section
• Text (Adv)
• Buttons (Adv)

題外話，在社團中有更多架站的討論與經驗交流，歡迎大家加入社團一起討論唷！

內容區塊中的「Blocksy 頁面設定」

在「Blocksy 頁面設定」中的「一般」設定頁籤下提供了各種決定 Popup 彈出視窗的顯示與觸發條件，「設計」頁籤則是決定這個彈出視窗的 Padding、Border Radius 等與外觀細微調整有關的功能設定。

接著，我們來一一說明相關的功能設定。

[一般設定] 顯示條件

首先是決定這個彈出視窗顯示條件的設定。

點擊「編輯條件」按鈕可以開啟條件編輯器。

Blocksy 的「Popup 顯示條件 (Popup Display Conditions)」中提供了相當豐富的各類條件規則，可以「包含」或「排除」這些條件，條件彼此間可以是「OR」或「AND」，條件類型則有：

• 整個網站
• 基本
  • All Singulars – 所有單頁。例如：頁面、文章等。
  • All Archives – 所有彙整頁面。例如：作者、類別、標籤等。
• 文章
  • 所有文章彙整
  • 文章分類
  • 文章標籤
  • 單一文章
• 頁面
  • 單一頁面
  • 404
  • 搜尋
  • 網誌
  • 首頁
  • Privacy Policy Page
  • Author Archive – 選擇特定作者
• Custom Post Type
  自動偵測網站目前使用的 CPT 類型
• 特定的
  • 文章 ID – 選擇特定文章
  • 頁面 ID – 選擇特定頁面
  • 自訂文章類型 ID – 選擇特定 CPT 頁面
  • 有分類法 ID 的文章 – 選擇特定文章分類或標籤
  • Post with Author ID – 選擇特定作者
  • 分類法 ID – 選擇特定頁面分類或標籤
• 使用者驗證
  • 使用者已登入
  • 使用者已登出
  • User Role – 選擇特定使用者角色
• Date & Time
  • Range Date/Time
    指定開始 (Start Date) 的日期、時間，以及結束 (Expiration Date) 的日期、時間。
  • Recurring Days
    選擇重複發生的每周幾，以及一天內的開始與結束的時間。
• Requests
  • Request Referer – Referer 的 domain 網址
  • Request Cookie – 選擇特定 Cookie 名稱
  • Request URL – 選擇特定的 (URL 中的) query string

舉例來說，假設我們需要這個彈出視窗在所有分類為「架站筆記」的文章中出現，並且出現時間為周一至周五的每天早上九點到晚上九點，顯示條件可以設定為：

結合「顯示條件」功能與「倒數計時」區塊，更可以做出「錯失恐懼」的行銷規劃。

讓潛在客戶看著有興趣的商品，而折扣、優惠的時間隨著倒數計時器一點一滴的流逝即將結束，在銷售季節 (例如：中國的雙十一、女神節，西方的黑五、網路星期一等) 使用這個功能可以獲得最大的效益。

[一般設定] 觸發條件

Blocksy 的 Popup 內容區塊提供了 9 種觸發條件 (Trigger Condition) 可供站長根據不同應用情景下靈活使用。

• 無觸發條件
• 頁面捲動
• 點擊元素物件
• 頁面載入
• 訪客不活躍
• 訪問時間
• 訪問頁數
• 離開頁面

無觸發條件

雖然不常見，但對於我們前面談論到的特殊應用情景「適合手機閱讀的文章目錄」，就是按下文章目錄的小圖示才會顯示彈出視窗。

也就是說，可以結合任何其他功能，例如：點擊文字、點擊圖片、點擊按鈕等，作為顯示彈出視窗的觸發機制，實際的應用可能性會更加寬廣。

頁面捲動 (On scroll、On scroll to element)

單純頁面捲動 (On scroll) 條件提供了以下功能設定：

• Scroll Direction (捲動方向) – 往上捲動或往下捲動
• Scroll Distance (捲動距離) – 捲動多少距離就會顯示彈出視窗
• Close Popup On Scroll Back – 當反向捲回頁面時，是否關閉彈出視窗

如果選擇捲動至頁面中的 element 元素 (On scroll to element)，則需要指定這些元素的 class 選擇器名稱，一旦頁面捲動至指定的元素就會顯示彈出視窗。

點擊元素物件 (On element click)

選擇點擊元素物件的話，則需要指定這些元素的 class 選擇器名稱，一旦訪客點擊頁面中的指定元素就會顯示彈出視窗。

應用：文章、頁面中埋了伏筆！

頁面載入 (On page load)

在頁面載入時顯示彈出視窗。

應用：快來訂閱我們的電子報吧~~ (急)

訪客不活躍 (After inactivity)

設定訪客停留在頁面上無回應的時間秒數，一旦超過設定的秒數就顯示彈出視窗。

應用：可以在訪客逐漸失去對網站的關注時拉回訪客的注意力。

訪問時間 (After x time)

設定訪客造訪網站的時間秒數，一旦超過設定的秒數就顯示彈出視窗。

應用：花越多時間瀏覽網站的訪客，我們就給他一些優惠折扣吧！

訪問頁數 (After x pages)

設定訪客造訪網站的頁面數量，一旦超過設定的訪問頁數就顯示彈出視窗。

應用：看來是對我們網站文章有興趣的訪客，歡迎加入會員、訂閱電子報。

離開頁面 (On page exit intent)

當訪客滑鼠離開頁面時即顯示彈出視窗。

應用：別走呀~ 我這還有一些優惠折扣可以給你~

[一般設定] 額外觸發關閉條件

當 Popup 視窗彈出後，也可以設定觸發關閉視窗的條件 (Additional Close Trigger)。總共有 3 種條件：

• 無觸發關閉條件
• 送出表單
• 按下按鈕

無觸發關閉條件

不設定額外的觸發關閉條件下，可以利用內建的關閉視窗按鈕/圖示直接關閉彈出視窗。

或是開啟後面會提到的 Popup Backdrop Background 功能，點選彈出視窗外的空間都可以關閉視窗。

送出表單 (On form submit)

當送出彈出視窗中嵌入的表單時，自動關閉彈出視窗。

按下按鈕 (On button click)

設定按鈕的 class 選擇器名稱，一旦按下指定按鈕就會自動關閉彈出視窗。

[一般設定] 重新觸發條件

這個選項在 Trigger Condition 中選擇「無觸發條件」時不會顯示。在其他情況下，可以有 2 種重新觸發條件 (Relaunch Trigger) 可使用。

• 絕不重新觸發
• 自訂

絕不重新觸發 (Never relaunch)

Popup 彈出視窗在符合條件時顯示一次之後就不會再次出現。

實際是否要重新觸發顯示彈出視窗需要視行銷目的而定，在達到目的與提供良好使用者體驗之間取捨並達到一個可以接受的平衡點，是站長與行銷團隊需要仔細思考與評估的地方。

自訂

設定重新觸發的間隔天數，經過指定的天數之後，符合觸發條件就會再次顯示彈出視窗。

[一般設定] 彈出視窗顯示特效

彈出視窗顯示特效 (Popup Animation) 決定了彈出視窗出現的方式，總共有 6 種方式可以選擇。

• Fade in fade out
• Zoom in zoom out
• Slide in from left
• Slide in from right
• Slide in from top
• Slide in from bottom

Fade in fade out

彈出視窗會以淡入、淡出的方式出現，可以設定視窗淡入、淡出的顯示速度。

Zoom in zoom out

彈出視窗會以放大、縮小的方式出現，可以設定視窗放大、縮小的顯示速度。

Slide in from left/right/top/bottom

彈出視窗會從畫面左/右/上/下側滑入，可以設定視窗滑入的顯示速度與位置。

[一般設定] 彈出視窗尺寸

設定彈出視窗的尺寸 (Popup Size)，提供了 4 個選項。

• Small Size – 小尺寸
• Medium Size – 中型尺寸
• Large Size – 大尺寸
• Custom Size – 自訂尺寸
  可按照電腦、平板、手機等裝置個別設定彈出視窗的最大寬度與最大高度。

[一般設定] 彈出視窗位置

用九宮格的方式來決定 Popup 彈出視窗進入畫面的位置 (Popup Position)。

不同裝置 (例如：電腦 vs 手機) 適合顯示彈出視窗的位置不一定相同，所以內容、功能相同的彈出視窗有可能需要為不同裝置個別製作一個 Popup 類型的內容區塊。

[一般設定] Load Content with AJAX

是否使用 AJAX 的方式載入內容區塊。

如果啟用此功能，還可以針對內含動態內容的彈出視窗決定是否要重新載入內容，以確保內容狀態是最新的。

[一般設定] 彈出視窗可見度

設定彈出視窗的裝置可見度 (Popup Visibility)。

如果需要為不同裝置個別製作內容區塊，可以善加利用這個功能。

[設計] 彈出視窗外觀

包含 Padding、Border Radius、Shadow、Popup Offset 等功能，可以設定在不同裝置下 Popup 彈出視窗的顯示外觀。

[設計] Scroll Lock

當「彈出視窗」顯示之後，決定訪客是否還可以上下捲動畫面的設定。

啟用 Scroll Lock 的話，訪客需要關閉彈出視窗才能繼續閱讀頁面的內容。是一種增加與訪客互動的方式，但運用不良可能會造成訪客的反感與流失。

[設計] Container Overflow

當 Popup 彈出視窗的「內容」過大，超過能夠顯示的螢幕範圍時的處理方式。

• Hidden – 隱藏
• Visible – 顯示
• Scroll – 將內容顯示在可捲動頁面中

[設計] Close Button

彈出視窗的「關閉視窗」按鈕/圖示的顯示機制，可以自訂按鈕/圖示的顏色。

• 無 – 不提供關閉按鈕
• Inside – 關閉按鈕顯示於彈出視窗「內」的右上角
• Outside – 關閉按鈕顯示於彈出視窗「外」的右上角

選擇不提供關閉按鈕時，可以搭配下述的 Popup Backdrop Background 功能使用。

[設計] Popup Background

設定彈出視窗的背景底色。顏色選項包含一般調色板選色、漸層色彩或是以圖片、花樣做為背景。

[設計] Popup Backdrop Background

設定了 Popup Backdrop Background 之後，就會啟用點選彈出視窗外的空間都可以自動關閉視窗的功能。

可設定彈出視窗外的背景底色。顏色選項包含一般調色板選色、漸層色彩或是以圖片、花樣做為背景。

結語

呼~ 終於介紹完 Blocksy 內容區塊的 Popup 彈出視窗功能了。

綜合以上的說明，我們知道了：

• 彈出視窗的應用情景介紹。
• 如何使用 Blocksy 佈景主題編輯器，利用 Blocksy Pro 中 Popup 類別的 Content Blocks，搭配條件管理器、按鈕，決定彈出視窗出現的時間與位置。

這應該會是目前看過最完整的說明教學，搭配「彈出視窗的應用情景」中提到的各種應用的可能性，我想大家應該都會知道要如何運用 Blocksy 的彈出視窗來搭配接下來的宣傳或行銷活動了。

我本身也嘗試使用過一些 SaaS 工具在網站中嵌入這類功能，但 SaaS 工具需要從第三方網站載入資源，其程式碼設計、規劃也比不上 Blocksy 的輕量化，後來找到 Blocksy 可以滿足這方面的使用需求而且不會對頁面載入效率造成影響，真的是太開心了。

如果有什麼心得、想法或建議，歡迎大家加入社團一起討論唷！