【WordPress 按鈕】利用精美外掛,改善網站的 Call to Action

你是否有這種經驗?我們曾在電視上,看到許多報導實體店面倒的倒、虧損硬撐的新聞,這種現象在競爭這麼激烈的社會裡,近年來算是很常見了,因此為了適應市場的瞬息萬變,部份店家漸漸的轉型做電子商務

【WordPress 按鈕】利用精美外掛,改善網站的 Call to Action

隨著時代進步,社會環境型態變化太快,筆者也不得不轉型

電子商務是什麼?

電子商務,簡稱電商,主要透過在網際網路【Internet】、內部網路【Intranet】和增值網【VAN,Value Added Network】以電子交易方式進行交易活動和相關服務活動,可想像將傳統商業活動的各個環節加以電子化、網路化

電子商務應用在全球各地廣泛的商業貿易活動中,藉由網際網路開放的環境下,買賣雙方不謀面地進行各種商貿活動,進而滿足消費者與商戶之間的網上交易,是一種新型的商業運營模式。可參考維基百科

行動呼籲是什麼?

行動呼籲,英文叫【Call-to-Action】,是一種廣告和銷售中廣泛使用的營銷術語,主要目的是在促使消費者,立即響應或鼓勵立即銷售的動作。因為現今社會的人沒有耐心,加上資訊太普遍,為了讓訪客可以快速的找到你想要他去的頁面,這時候就是發揮行動呼籲的功用了

作為一個網路零售商,如果你的網站內容豐富,會讓讀者留下深刻的印象之外,必須告知來訪的客戶下一步該做什麼,然後轉換到你想要他去的地方,最後將訪客轉換成為自己的顧客!沒有明確的 Call To Action,即使消費者有再多的購物慾望,你也很難將這些人潮帶來有效的轉換率,所以明確的 Call To Action 是多麼重要

那麼如何在文章中,加入明確的 Call To Action 呢?答案就是按鈕

WordPress 製作按鈕有許多種,經過筆者反覆測試後,推薦兩種製作按鈕的方法,其中一種就是利用 MaxButtons 外掛。在本文當中,就讓筆者來一一介紹,以及分析優缺點,接下來讓我們繼續看下去…

MaxButtons 安裝與介紹

Step1.MaxButtons 安裝

Step2.MaxButtons 介紹

  • Buttons:設計製作按鈕,客製化按鈕文字、顏色,以及連結網址與代碼
  • Share Buttons:許多社群分享的按鈕,包含 Facebook、Twitter、Instagram
  • Upgrade to Pro:購買 MaxButtons 外掛升級版,取得更多功能
  • Settings:一般設定與清除按鈕快取,原則上這個部份不須更動修改
  • Support:詳細介紹使用外掛的各種資訊

Step3.MaxButtons 預覽畫面

無論怎麼調整客製化 MaxButtons,右邊都會有即時預覽畫面可供參考

MaxButtons 操作方式

Step1.選擇 Buttons

Step2.客製化按鈕 Basic

  • Button Name:按鈕名稱,當製作完成客製化按鈕時,所要貼上的代碼名稱
  • URL:可直接輸入連結的網址,也可點擊 Select Site Content 選擇內部連結
  • Open in New Windows:勾選開啟新分頁
  • Text:按鈕文字,編輯時也會即時顯示在右側預覽畫面
  • Text Color:沒滑鼠靠近時的文字顏色
  • Text Color Hover:有滑鼠靠近的文字顏色
  • Button Width:按鈕寬度
  • Button Height:按鈕高度

Step3.客製化按鈕 Border

  • Style:邊框種類樣式
  • Width:調整邊框寬度
  • Border Color:滑鼠靠近前與靠近後的邊框設計
  • Shadow Blur:邊框陰影調整

Step4.客製化按鈕 Background

  • Use Gradients:是否開啟陰影特效
  • Background color:滑鼠靠近前陰影
  • Background color:滑鼠靠近後陰影

Step5.按鈕存檔

MaxButtons 嵌入方式

Step1.嵌入代碼

嵌入代碼與表格、表單的方式一樣,選擇複製其中一個代碼即可

☞ 延伸閱讀:輕鬆打造客製化的聯絡表單

Step2.貼上代碼

在任何文章裡,貼上想要的代碼位置即可

Step3.前台顯示效果

內建按鈕的操作

Step1.點擊新增按鈕

Step2.輸入按鈕文字與網址

Step3.按鈕文字與網址完成

Step4.調整按鈕樣式與文字背景顏色

按鈕樣式

文字背景顏色

Step5.前台顯示效果

內建按鈕分頁問題

如果你使用的是內建古騰堡製作按鈕的方式,眼尖的朋友不難發現,點擊按鈕無法開啟新分頁,必須手動利用滑鼠右鍵才能開啟,這樣會降低閱讀體驗,容易提高網站文章的跳出率,針對這個問題,可利用簡單的 HTML 語法改善

Step1.輸入 HTML 語法 target=”_blank”

在按鈕網址後面輸入 HTML 語法 target=”_blank”

Step2.正常出現錯誤訊息

如果出現這個區塊包含未預期或無效的內容,不用管它,直接存檔發表文章

Step3.影片示範

Step4.分頁語法的不同

筆者在測試 HTML 語法時,有爬文找到國外的相關資訊,說明語法可簡單輸入 target=”blank” 不需在 blank 前面加上底線,不過筆者還是建議,輸入完整語法 target=”_blank” 會比較好

_blank:開啟連結在新視窗或者新分頁

☞ 參考網站:w3schools.com

MaxButtons 與內建按鈕的優缺點

 MaxButtons內建按鈕
優點1.功能強大
2.效果較好
3.製作簡單
1.不需外掛
2.製作簡單
缺點1.需要安裝外掛1.需要懂點語法
2.按鈕效果陽春

結論

一個好的電商網站,為了將潛在客戶轉換成自己的客戶,就必須要有明確的 CTA,因此如何做出明確又效果好的按鈕,來達到 CTA 的目的,就是每個網站管理員所需要思考的事情

製作按鈕的方式與外掛不只幾種,本文當中所推舉的外掛與內建製作方式,都是筆者反覆測試實驗達到理想的效果,至於其他方式就無法一一測試與教學。筆者所寫的教學文章方針,盡量推舉最適合新手,也容易達成所需要的。如果你剛好有製作按鈕的需求,相信這篇教學應該都能夠滿足你了

Previous Post

【Contact Form 7 免費表單】,教你解決信箱設定問題

Next Post

【WordPress 媒體庫】分類管理,你絕對需要的 Media Library 外掛

45 comments

  1. 蔡瀚晟表示:

    這篇文以收藏~~
    感謝版主介紹
    每次看到別人網站都有小按鈕都超想加一個的
    現在有版主這篇文我也能自己加一個小按鈕了

  2. 民樂電腦表示:

    是ㄚ,終於不用羨慕別人有文章按鈕了

  3. Buzz表示:

    感謝版主的詳細介紹!
    我自己也有用這個外掛~

  4. Daniel Li表示:

    哇!謝謝你提供這篇教學
    我會好好學習應用在我的網站上的

  5. JC YANG表示:

    很實用的一篇文,最近剛好需要用到,非常謝謝版主分享~~~~

  6. 潔西卡表示:

    筆記筆記,正在尋找可以製作可愛按鈕的外掛
    請問版主未來會介紹Elementor嗎?

  7. Jasper表示:

    真是太仔細啦!! 感謝版主的分享

  8. shane表示:

    終於有其他方式使用按鈕了,謝謝民樂電腦!

  9. cloud表示:

    正在煩惱按鍵怎麼做,也有安裝這個外掛但不太會用分頁,
    感謝版主詳細的教學。

  10. 民樂電腦表示:

    哈哈,這外掛還不錯用

  11. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  12. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  13. 民樂電腦表示:

    之後有機會,也許可以嘗試測試 Elementor

  14. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  15. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  16. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  17. 波德表示:

    好實用喲,比起原本的樣式,有更多不一樣可以選擇,感謝版主介紹

  18. Cuby表示:

    連按鈕也有學問~雖然目前還在慢慢建構中,可能還不會需要
    但先儲存下來,以備不時之需!
    (偷偷說 我常常默默藉由你的網站來找資料 實在太實用了~)

  19. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  20. 民樂電腦表示:

    真的嗎?非常感謝你的肯定,能幫助到你,是我的榮幸

  21. Annie表示:

    最近剛好被內建按鈕煩到不行,後來直接捨棄按鈕XD 太晚看到這篇了ㄚㄚㄚ

  22. Dean表示:

    我很早就發現MaxButtons超好用了,自己也好多篇文章都是用MaxButtons!
    只不過我還真不知道WP內建的按鈕可以搞那麼多花樣,但是我還是會繼續用MaxButtons XD

  23. 民樂電腦表示:

    哈哈,現在看到了也不嫌晚

  24. 民樂電腦表示:

    是ㄚ,雖然內建可以變化一些,不過還是Maxbutton好用,只可惜要多裝一個外掛

  25. Joseph表示:

    實用外掛分享!!我也要有漂亮按鈕

  26. Jane表示:

    感謝版大!!!! 這篇太實用了,解決了我一直以來的問題><

  27. 民樂電腦表示:

    不客氣唷,趕緊去製作一個吧

  28. 民樂電腦表示:

    太好了,能幫助到你,是我的榮幸

  29. Sun表示:

    非常實用的文章,我以往都是用Maxbutton製作按鈕,但是我認為WP內建的按鈕建置更為快速,但是我以為它一定沒辦法在新分頁開啟,直到我看到了這篇文章,學到了!

  30. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  31. KG表示:

    這完全解決我的問題點!!! 感謝分享!!!!

  32. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  33. Zyaire表示:

    超級實用!!!而且解釋的很詳細,真的非常感謝!??

  34. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  35. host表示:

    非常棒的文章,謝謝站長熱心分享。

  36. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  37. Daniel Li表示:

    多謝你的文章教學,讓我也能運用在我的網站裡!

  38. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  39. ELTON表示:

    最近也在思考CTA該如何建立及使用時機
    感謝版主分享
    文章清楚明瞭
    看完馬上清楚該如何製作??

  40. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  41. hunter表示:

    困扰我多时的问题,在这里解决了,赞!

  42. 民樂電腦表示:

    感謝肯定!

  43. Kendrick表示:

    這個插件確實很好用,比文字更能吸引用戶

  44. 民樂電腦表示:

    是ㄚ,況且又是免費的,真的可以推薦這外掛

Scroll to top