超簡單|如何幫部落格網站,加上側邊的「聯絡資訊」(含影片教學) - 早安傑森

今天要來個簡單的教學,教你如何在網站的側邊,加上一排聯絡資訊,讓對你有興趣,想找你寫業配的人,可以毫不費力地聯絡到你。

光用講的可能有點抽象,之接看下圖,你就知道我在說什麼。

部落格網站聯絡資訊
就是這個玩意

其實有很多外掛都可以達到這效果,甚至可以做到非常華麗。

但我們不需要華麗,簡單大方美觀才是我的擇偶條件,讓人家聯絡起來輕鬆寫意,別人才不會半路棄坑,而我今天介紹的外掛,就有這樣單純的特質。

必須先說,除非你真的有在賣服務或產品,不然會找你的人可能不多,不要以為放個聯絡資訊你就會變得很夯。

不囉唆,開始了!

安裝My Sticky Elements外掛

這類型的外掛真的很多,我以前用過Float menu,現在網站用的是Floating Chat Widget

今天要介紹的是My Sticky Elements,因為他有我說的優點,簡單、美觀,設定起來又非常簡單,它是由premio開發,這間公司旗下的外掛都挺不錯。

部落格網站聯絡資訊
居然還有中文化的介紹

安裝外掛這麼簡單的事情我就不另外寫了。

My Sticky Elements 免費版與付費版

付費版可以讓你有:

  • E-mail 名單不只可加入網站,可以直接串連第三方E-mail行銷(Mailchimp)
  • 無限制聯絡icon(免費版限制兩個)
  • 可自行調整CSS外觀
  • icon能自己上傳
  • 位置能完全客製(免費版只能選上下左右)
  • 更多客製化的選項

以一般使用者來說,免費版就夠用囉,所以我這篇文章也只會介紹免費版而已。

My Sticky Elements 基本設定

部落格網站聯絡資訊
myStickyelements->settings

Contact Form設定

部落格網站聯絡資訊

最上方是聯繫表單的設置,如果你網站還沒有串接任何E-mail的系統,可以先用這個來做簡單搜集名單的工具。

預設用戶需要填的資訊是:

  • Name
  • Phone
  • E-mail
  • Message

你可以勾選自己需要與不要的,並選擇哪些是「必填」(Required)

Contact Form 按鈕設定

部落格網站聯絡資訊

1. Background Color:調整按鈕的背景色

2. Text Color:調整按鈕文字的顏色

3. Text on the Submit button:調整按鈕上要顯示什麼文字(預設是Submit)

Contact Form 外觀設定

部落格網站聯絡資訊
\

1. Device:聯絡表單要在哪些裝置顯示(桌機/手機)

2. Direction:文字是由左至右還是由右至左

3. Background Color:聯絡表單那個表單背景顏色是什麼

4. Text Color:字的顏色

5. Form Background Color:表單的背景顏色

6. Form Headline Color:表單標題的字體顏色

7. Text in Tab:表單上顯示什麼字(預設為Contact US)

8. Contact Form Title :表單標題上顯示什麼字(預設為Contact Form)

9. Send lends to:表單填完的資料要送去哪?(預設是進入Wordpress資料庫,免費版無法調整)

Social Channels Tabs 設定

部落格網站聯絡資訊

上方這些社交平台你都可以選,但免費版的只能選兩個(兩個就夠多了)

以台灣人的使用習慣,建議選Line跟Facebook為主,選好之後,就在下方填入你的聯絡網址。

要注意的是,Line沒辦法直接聊,還是會跳轉到加Line的畫面。

Social Channels 設定

部落格網站聯絡資訊

1. Templates:整個側欄的外觀有幾個套版可以選

2. Position on desktop:在桌機版時他的位置

3. Position on mobile:在手機版時他的位置

4. Open tabs when:何時打開這些聯繫的tab(hover/滑過、Click/點擊)

5. Open the form automatically:自動打開表單(不建議開啟)

6. Minimize tab:調整隱藏聯絡清單tab的顏色(見下圖)

部落格網站聯絡資訊
Minimize tab

7. Minimize bar on load:載入時先處在隱藏的情況

部落格網站聯絡資訊

Font Family:調整字型

Desktop Widget size:調整整個「聯絡表單」外觀在桌機顯示的大小

Mobile Widget size:調整整個「聯絡表單」外觀在手機顯示的大小

Entry effect:進場的動畫

還是來個影片教學好了

寫了老半天,覺得拍影片一下就講完了…

結語

如果你們剛好有這個需求,那這篇文章一定能解決這個問題啊!

原本想說今天星期六,不太想動太多腦,就來寫點輕鬆的,沒想到還是寫了超久…可惡啊!

這篇文章就先這樣囉!掰~

部落格網站聯絡資訊
請大家繼續保持健康

加入早安傑森的訂閱

如果 部落格經營|寫作|不離職創業 是你感興趣的內容,可以加入我的電子報,我會定期寄送很棒的內容給你(加入還會送個小禮物)
— 追蹤早安傑森 —

留言