[目的]
在製作Opt-in頁面中,最常用PopUp的方式呈現, 而其主要的功能就是運用彈出視窗抓住訪者目光, 並進一步的讓訪客付諸行動留下Email進而轉化為成客戶。
本篇介紹用Elememtor builder, 在Wordpress中實現彈跳表格的效果。
[方法]
1.在WP中,Popup會集中在Template底下,新增一個Popup(Add new)。
2.由於使用 Elememtor builder ,即會自動跳至 Elememtor 相關的編輯頁面,在此頁先自訂page名稱(Opt02)。
3. Elememtor 架構分為左右兩邊,左邊(A)為設定popup的細節處,右邊(B)則會顯示出當下所編輯的效果。elementor的是以段、欄,層級式的編輯方式。
每一個模塊進入,都有獨立的Style可以設定,如加入背景,文字大小顏色..等,都在這邊設定,非常簡單直覺。
這邊要注意的是,左邊模組都是有關於視窗中的內容設計設定的地方,若要設定整體版型的設定,如長寬等,必須要切換到左下方C的設定,才是整體的基本設定。
4.接著相關設定都製作完成,要設定關於Popup視窗的Trigger,也就是彈跳視窗要何時被觸發而彈跳出來。
點選儲存按鈕右邊的三角處,選擇Trigger,
會跳至以下頁面,這邊分為Conitions 、 Triggers、Advanced Rules三部分設定:
Conditions :第一個設定包含與不包含,第二個則是設定要在整個網頁中或是單一個網頁中會出現此彈跳視窗,第三個設定要在哪個頁面中顯示(若原本Page有很多,則要先填入頁面名稱,下拉選單才會出現喔,要不然都不會顯示出來)
而以下範例,則是設定為:Popup視窗被指定為在單一頁名為Landing02頁面出現。
Trigger:則是設定視窗該何時被觸動,如要在頁面Loading幾秒後會被觸發 ,或是滾動頁面到百分之幾會被觸發等的設定。
5.最後記得一定要先將這個popup發布,因為設定為草稿狀態,Popup是不會有作用的!
6.回到要設定Popup的頁面中(Landing02),選取需要Popup視窗出現的按鈕,在Link中設定Action>Popup,設定Settings屬性部分Action為Open Popup、Popup則指到所設定的Popup頁面(Opt02),最後發佈,即可完成設定。
[小結]
Opt-in page 的顯示形式有很多方式,popup是其中一種方式,但在設定時必須考量到訪客使用經驗、以及期望藉由此行動,達成什麼樣的轉換率,這些都會是在設計opt-in popup所需考量到的。