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 的搭配,可以讓我們很輕鬆的就建立好一個專業又優雅的網站,所以特別來推薦給大家!

相關文章

Divi Vertically Align Content – 文字內容置中

Divi Vertically Align Content – 文字內容置中

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

read more
Divi Child Theme Guide 如何建立子佈景主題

Divi Child Theme Guide 如何建立子佈景主題

Divi Child Theme Guide 在開始網頁設計之前,建立一個子佈景主題,是必要的步驟。Divi 佈景主題是一款非常優秀的付費佈景主題,透過內建強大的功能設計,可以很輕鬆的就建置好一個專業又漂亮的網站。

read more

最新留言

0 Comments

Submit a Comment

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

5 + 13 =