xavi cabrera kn UmDZQDjM unsplash

利用 WordPress 可重複使用區塊功能,製作提升 1 倍轉換率的行動呼籲按鈕!

最後更新時間:2020 年 8 月 11 日

你還在使用圖片當作網站的行動呼籲嗎?你的行動呼籲按鈕不夠明顯,導致網站轉換率偏低嗎?找了許多外掛與頁面編輯器,但還是做不出想要的樣式嗎?

其實很多人不知道,WordPress 有一個超好用的內建功能「可重複使用區塊」,可以讓你輕輕鬆鬆在文章中建立出更吸睛的行動呼籲,並且不需要使用任何外掛或是改佈景主題。

這篇文章主要是幫助完全不懂程式碼的新手站長,透過 WordPress 內建的「可重複使用區塊」功能,來製作出更引人注目的行動呼籲 ( CTA ) 區塊,並提高讀者的點擊率,進而為網站帶來更多收益。

什麼是「可重複使用區塊」?

在我剛開始學習網站相關的程式語言時,有一個很重要的概念,是很多網路上的前輩不斷告訴我的:

不要重複你自己。 ( Don’t repeat yourself. )

這是一個非常重要的概念,因為一般我們在撰寫文章時,一定會有一些區塊是需要很常重複出現的,例如:行動呼籲、延伸閱讀、資訊表格…等等。

而這些都不是一次性的區塊,我們常常得在文章的很多地方,重複用到這些區塊。

而如果你沒有這個概念,你就會在每次要用到的時候,自己就又重新做一個;所以如果你也有過這樣的經驗,就知道這是一種很麻煩又沒效率的作法,非常浪費時間也浪費心力。

但透過 WordPress 提供給我們的一個內建功能「可重複使用區塊」,我們就可以只做一次,然後打包成一個可以重複使用的區塊,以後要用到的時候,直接叫出來套用。

2020 07 05 23 11 00

這樣的做法,就好比像是 Youtuber 們常常會在影片前面加上一段片頭,但是你用膝蓋想也知道,這些 Youtuber 絕對不是每支影片都重做一次片頭,而是做好一次片頭儲存起來,然後套用在所有的影片上

而「可重複使用區塊」做到的就是這件事情,你可以把一些常用到的區塊儲存起來,然後再寫其它文章的時候直接套用上去,如此一來,便可以達到重複使用、節省時間與心力的效果。

如何製作更吸睛的行動呼籲?

可重複使用區塊可以應用的範圍非常廣泛,由於文章篇幅有限,因此,在這邊我以一個大家最常用到的區塊「行動呼籲」作為教學,幫助你更快地學會如何應用可重複使用區塊,並且舉一反三,應用在自己的網站之中。

CTA

這是一篇普通的文章,而如果我想要跟文章中一樣,設計一個類似長這樣的行動呼籲 ( CTA ) 區塊,並且在文章各個段落出現的話,該如何進行呢?

分析成品

可重複使用區塊

在開始製作之前,首先,我們要先來簡單分析一下這個區塊是由那些東西組成的,而你可以很清楚地發現,這個區塊主要是分成 3 個部分:

  1. 一段內文。
  2. 一個按鈕。
  3. 一個把這兩個東西包起來的虛線框框。

開始製作

新增內文與按鈕

知道了這個區塊是怎麼組成的之後,我們就依樣畫葫蘆,在 WordPress 把這個區塊製造出來:

  • 這是在後台顯示的部分:
2020 07 05 22 05 04
  1. 一個內文區塊。
  2. 一個按鈕區塊。
  • 這是在前台顯示的部分:
2020 07 05 22 05 39

這時候我們發現,在前台顯示中還缺少了第 3 個,也就是把這兩個東西包起來的虛線框框,這個虛線框框該如何製作呢?

要製作出這樣的一個效果,我們會需要使用到 HTML 中的 <div> ( Division )區塊的概念,並搭配 CSS 語法中的 border 來進行製作,如果你不懂什麼是 HTML 與 CSS 的話,那你就照著做就可以了。

建立 HTML 區塊
2020 07 05 22 16 55

回到 WordPress 的文章編輯之中,在你要包起來的物件的前後,分別建立一個 HTML 的區塊,並依序輸入以下程式碼:

2020 07 05 22 13 07
  1. <div class="call-to-action">
  2. </div>

完成之後,按下儲存或發布,這時候到前台去看,你會發現什麼都沒有改變,這樣是正常的,因為我們還沒有設定 CSS 改變它的外觀。

自訂 CSS

要修改 WordPress 的 CSS,請依序進行以下步驟:

2020 07 05 22 18 51
2020 07 05 22 19 22
2020 07 05 22 18 19
  1. 在登入狀態下,點選上方工具列的「自訂」。
  2. 點選「附加的 CSS」。
  3. 貼上你要修改的 CSS 程式碼。
  4. 完成之後按下「發佈」即可。

如果你想跟我範例中的虛線一模一樣,請輸入以下程式碼:

.call-to-action{
    border: 2px dashed #aaa;
    padding: 2rem;
}
2020 07 05 22 22 52

這時候回到前台,你就會發現我們做出跟範例一模一樣的 CTA 區塊了!

新增至可重複使用區塊

做到這邊,已經完成一半了!

但是這個 CTA 區塊在後台中,還是處於 4 個分離的不同區塊,該怎麼在文章中重複使用它呢?

2020 07 05 22 26 37

非常簡單,先壓住shift 拖曳滑鼠反白,接著點選圖示中的「新增至可重複使用區塊」。

儲存區塊
2020 07 05 22 27 18

接著再幫這個區塊取個你自己記得住的名字,並按下儲存。

上面寫著「這個區塊包含未預期或無效的內容」,是正常的,不需要擔心。

找到可重複使用區塊
2020 07 05 22 28 19

儲存完成之後,前往文章中任何一個你想要插入 CTA 區塊的部分,點選 + 號,並在「可重複使用」區域中,找到你剛剛新增的區塊名字。

成功插入區塊
2020 07 05 22 29 09

最後,回到前台,你就會看到之前製作的 CTA 區塊已經完成插入了,不需要再做一次,也可以一直重複使用,非常方便!

應用在其它文章
2020 07 05 22 47 45

除此之外,即使在其它不同的文章之中,你一樣可以叫出之前製作好的區塊,快速再次進行行動呼籲!

補充

2020 07 05 22 50 40

如果你想要修改之前做過的可重複使用區塊的話,在叫出它的地方,下面有一個連結可以連過去修改。

結語

可重複使用區塊還可以做非常多事情,例如像我網站中最後面的行動呼籲區塊,邀請大家訂閱我的 Email 以及加入 Facebook 社團,就是用這個功能做到的。

2020 07 05 22 54 08

透過這樣一個簡單的 WordPress 內建功能,你不需要用到任何程式碼或是外掛,就能夠一次動態管理文章中你想要重複出現的區塊,因此,我個人是非常喜歡可重複使用區塊這個功能的。

如果你想要學更進階的使用方法,做到類似的效果,你可以參考工具王阿璋的這篇教學:

延伸閱讀:【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

而因為我們都是受過程式語言訓練的人,知道「不要重複你自己」是在經營網站上最重要的概念之一。

所以,基本上我的教學跟他的這篇教學是同樣概念的,只是做法不同而已,因此,我把兩個做法放在一起,歡迎大家參考看看。

更多可重複使用區塊的說明,請參考官方文件:WordPress.com 可重複使用區塊

額外資訊

獲得更多 WordPress 最新資訊

我目前正在製作一部 WordPress 網站的線上課程,主要內容會是教你如何從完全不懂程式碼的新手,透過學習架設 WordPress 網站與 SEO,打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話,歡迎填寫下方的訂閱表單,我將會告訴你最新的開課資訊。

加入 FB 討論社團

另外,我最近 ( 2020/06/14 ) 開設了一個 Facebook 社團,叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」,社團中討論的主題主要會是關於 WordPress 網站架設部落格經營、以及網路賺錢

如果你也對這些內容有興趣的話,歡迎你點擊下方的連結進行加入,我將會在那邊發佈一些這些主題的相關議題與討論,當然,對於 WordPress 有問題的話也可以直接在裡面詢問我唷!

你可能會想看

網路賺錢
部落格經營
基礎教學
站長必學
網站行銷
疑難雜症
進階技巧
Elementor
Woocommerce
學習資源

這篇文章有 4 則留言:

  1. 版大請問~請問此篇教學內文中提到的→包起來的物件建立的 HTML 區塊,輸入的程式碼:,
    請問在class屬性中後面的”call-to-action”,這call-to-action是CSS中規定的語法嗎?還是這call-to-action是自己隨意編打的呢?謝謝

留言回應

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top