Add Social Icons Primary Menu 選單新增社群圖示

Add Social Icons Primary Menu 選單新增社群圖示
日期:2019-06-11
作者:max
分類:技巧提示

Add Social Icons Primary Menu 在選單上新增社群圖示,讓訪客的互動可以更方便!

Divi 佈景主題內建就支援幾款常見的社群圖示,有 Facebook、Twitter、Google+、Instagram(圖一、圖二),不過其中的 Google+ 消費者 (個人) 版在 2019 年 4 月 2 日已經停止服務。所以這一項設計在 Divi Theme Options 裡,就變成沒有用途了(圖三)。在 Elegant Themes 官方還沒有做修改設計前,先跟大家分享如何將這個沒有用途的社群圖示,替換成可用的社群圖示(例如:YouTube)。

(圖一)

Add Social Icons Primary Menu 上方選單社群圖示

 

(圖二)

Add Social Icons Primary Menu 在選單上新增社群圖示

 

(圖三)

Google+ 已經停止服務

 

Add Social Icons Primary Menu

接下來我將示範如何以 YouTube 社群圖示連結來取代 Google+,而這些社群圖示是 Elegant Themes 佈景主題原本就已經內建好的功能。

  • 前往 Elegant Themes 官網 Elegant Icon Font 社群圖示網頁,找到 YouTube 的 Unicode 對照碼,以 YouTube 來說是:(圖四)。
  • 接著到控制台的選單欄 Divi/Theme Options/General,找到 Google+ Profile Url,網址請填入 YouTube 頻道網址,例如:https://www.youtube.com/channel/UCulLH6jlfZTRPie90ra1Lvg(圖五)
  • 設定完成以後,往下到 Custom CSS,填入取代的式樣設計語法(圖六),為了快速轉換 YouTube 式樣設計編碼,將  改成 \e0a3。

(圖四)

YouTube 的 Unicode 對照碼

 

(圖五)

填寫 YouTube 頻道網址

 

(圖六)

Custom CSSS

 

式樣取代語法:

/*** 使用 YouTube 取代 G+ 社群圖示***/
.et-social-google-plus a.icon:before {
  content: "\e0a3";
}

 

  • 設定完成以後,就可以看到 YouTube 社群圖示已經替換成功了(圖七、圖八)。

(圖七)

上方選單 YouTube 社群圖示成功

 

(圖八)

頁尾 YouTube 社群圖示替換成功

max

Hi 大家好,我是 Max,這個網站要跟大家介紹的 Divi 佈景主題,實在是因為它與 WordPress 的搭配,可以讓我們很輕鬆的就建立好一個專業又優雅的網站,所以特別來推薦給大家!

相關文章

Spa Layout Pack for Divi

Spa Layout Pack for Divi

Elegant Themes 上週發佈了一套非常漂亮的網站範本 Spa Layout Pack,提供了七個頁面範例,可以直接匯入套用,有使用 Divi 的朋友不要錯過了。 -...

read more
Divi Vertically Align Content – 文字內容置中

Divi Vertically Align Content – 文字內容置中

這是一個經常在 Divi 編輯器中常見的功能,在圖片右側展示文字內容。 今天我們將分享一個簡單的技巧設定,讓文字內容可以置中展示,讓圖片與文字陳列更顯得平衡,有興趣的朋友可以參考一下。...

read more

有任何 Divi 或是網頁設計問題,都歡迎透過表單隨時與我聯繫。

7 + 15 =