如何使用點擊呼叫、電子郵件、短信和方向鏈接創建 Divi 移動聯繫欄
已發表: 2020-06-04隨著世界生活在移動設備上，在您的網站上提供可點擊的聯繫鏈接以利用移動體驗是有意義的。 這些聯繫鏈接，就像點擊通話鏈接一樣，只需單擊一下，就可以在您的手機上快速開始通話。 其他人（如路線鏈接）可以在 Google 地圖中打開前往商家地址的路線。 這些對用戶來說真的很方便，對某些企業來說是必須的。
在本教程中，我們將向您展示如何使用點擊通話、電子郵件、短信和路線鏈接創建 Divi 移動聯繫欄。 為此，我們將使用 Divi 構建器來設計全局頁腳上的欄和按鈕。 然後我們將向每個聯繫鏈接添加自定義 URL，以將我們需要的功能帶回家。
讓我們開始吧！
搶先看
這是我們將在本教程中構建的設計的快速瀏覽。
免費下載佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
如何將固定聯繫欄模板下載添加到您的 Divi 站點
警告！：添加此模板將覆蓋 Divi 站點上的默認網站模板（如果有）。 我們建議將此添加到測試站點，這樣您就不會在實時站點上搞砸任何事情。
要將固定頁腳欄模板導入您自己的網站，請解壓縮下載的 zip 文件以訪問 JSON 文件。
然後轉到 WordPress 儀表板並導航到 Divi > Theme Builder。
然後單擊頁面右上角的便攜性圖標。
在可移植性彈出窗口中，選擇您剛剛解壓縮的 JSON 文件，然後選擇“導入前下載備份”選項，以防萬一您之前在默認網站模板中有不想覆蓋的內容。
然後單擊導入按鈕。
最後，保存 Theme Builder 更改並查看實時頁面以查看固定的頁腳欄。
現在，讓我們進入教程，好嗎？
第 1 部分：創建全局頁腳
在本教程中，我們將使用 Divi Theme Builder 將移動聯繫欄添加到全局頁腳。 首先導航到 Divi > Theme Builder。 然後單擊默認網站模板內的全局頁腳區域。 從下拉列表中，選擇構建全局頁腳。
注意：如果您已經有一個全局頁腳，您可以打開編輯全局頁腳並在當前頁腳之外添加聯繫欄。
選擇“從頭開始構建”選項。
第 2 部分：創建固定內容欄
在全局頁腳佈局編輯器中，通過向默認部分添加一列行來開始設計過程。
部分設置
在我們開始添加模塊之前，打開部分設置給它一個設置高度，如下所示：
- 高度：80px
這對於在頁面底部創建固定行最終靜止的空間很重要。 我們還將刪除默認的頂部和底部填充。
- 填充：0px 頂部，0px 底部
行設置
現在我們的部分已經準備好了，我們準備自定義行作為固定聯繫欄。 打開該行的設置，然後更新以下內容：
背景
- 背景顏色：#751136
尺寸
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
- 身高：繼承
儘管該行是固定的，但我們希望該行的高度與父節的高度相匹配，以便頁面底部的空間能夠充分容納該行。 為此，我們必須輸入文本“繼承”作為高度。
間距
- 填充：頂部 0px，底部 0px，左 15%，右 15%
自定義 CSS
我們希望確保行內的內容保持垂直對齊，並且列不會在移動設備上中斷。 為此，請將以下自定義 CSS 添加到行的主要元素：
display:flex; flex-wrap:nowrap; align-items:center;
固定定位
為了使行固定使其浮動在屏幕底部，我們需要在左下角位置給它一個固定位置，如下所示：
- 位置：固定
- 位置：左下角
- Z指數：99999
第 3 部分：構建點擊呼叫、電子郵件、短信和方向鏈接
現在我們的聯繫欄已經完成，我們準備添加可點擊的聯繫按鈕以及自定義 URL。
設計點擊通話按鈕
我們要創建的第一個聯繫按鈕是點擊通話按鈕。 要創建它，請向該列添加一個新的模糊模塊。
內容
在內容選項卡下，將標題和圖標添加到簡介中，如下所示：
- 標題：打電話
- 使用圖標：是
- 圖標：電話
背景
給它一個白色的背景顏色：
- 背景顏色：#ffffff
設計設置
跳轉到設計選項卡，並按如下方式更新設置：
圖標
- 圖標顏色：#751136
- 使用圖標字體大小：是
- 圖標字體大小：2em
標題字體
- Tite 字體樣式：TT
- 標題文本對齊：居中
- 標題文字顏色：#751136
- 標題文字大小：1em
正文大小
如果您注意到，我們一直在使用“em”長度單位來調整模糊元素的大小。 這與正文的大小有關。 因此，調整簡介正文的大小（即使它沒有顯示正文）將使用 em 長度單位調整所有簡介元素的大小。 這只是一種無需單獨調整每個元素即可更改按鈕大小的便捷方式。
更新正文如下：
- 正文文字大小：12px
尺寸
給模糊設置一個高度和寬度，如下所示：
- 寬度：4.5em
- 模塊對齊：居中
- 高度：4.5em
填充和角落
- 填充：0.5em 頂部
盒子陰影
- 盒子陰影：見截圖
- 框陰影水平位置：0px
- 框陰影垂直位置：2px
- 陰影顏色：rgba(255,255,255,0.55)
自定義 CSS
為了使模糊模塊的內容垂直居中，將以下自定義 CSS 添加到主元素：
display:flex; align-items:center;
並通過添加以下 Blurb Image 取出模糊圖標下的間距：
margin-bottom: 0.3em;
添加呼叫鏈接 URL
要添加將在移動電話上發起呼叫的呼叫鏈接 URL，請在前綴“tel:”後添加號碼。
- 模塊鏈接網址：電話：555-555-5555
設計電子郵件按鈕
要創建電子郵件按鈕，請複制整個列。
添加電子郵件圖標和鏈接 URL
然後使用新的標題和圖標更新第 2 列中的重複信息。
要添加將在移動應用程序上發起電子郵件的呼叫鏈接 URL，請在前綴“mailto:”之後添加電子郵件地址。
- 模塊鏈接 URL：mailto:[電子郵件保護]
設計 SMS(Text Message) 按鈕
要創建 SMS 按鈕，請複制第 2 列。
添加短信圖標和鏈接 URL
然後使用新的標題和圖標更新第 2 列中的重複信息。
要添加將在移動應用程序上發起電子郵件的呼叫鏈接 URL，請在前綴“sms:”之後添加電子郵件地址。
- 模塊鏈接網址：短信：+15555555555
設計方向按鈕
要創建 SMS 按鈕，請複制第 3 列。
添加路線圖標和鏈接 URL
然後使用新的標題和圖標更新第 3 列中的重複信息。
要添加將通過 Google 地圖啟動路線的呼叫鏈接 URL，請使用這些路線 URL 結構。
在本教程中，我們將添加一個路線鏈接，該鏈接將生成從用戶當前位置到加利福尼亞州山景城的 GooglePlex 的路線。
- 模塊鏈接網址：
https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA
要將您自己的地址添加到 URL，請替換 URL 中“destination=”之後的文本，確保用加號 (“+”) 分隔單詞。
單擊按鈕應該會給你類似的東西......
在桌面上隱藏部分
因為我們希望聯繫欄只顯示在移動設備上，所以我們可以在桌面上禁用整個部分。 為此，請打開部分設置並更新以下內容：
- 禁用：桌面
最終結果
更多聯繫方式
使用 HTML5，您不僅限於電話號碼。 您可以添加其他號召性用語，例如電子郵件、消息、傳真等。 HTML5 協議包括：
電話： – 撥打電話
mailto: – 打開一個電子郵件應用程序
呼叫：打開Skype
短信： – 發送短信
傳真： – 發送傳真
如果需要，您還可以為路線 URL 添加有針對性的位智鏈接。
最後的想法
對於任何希望讓用戶通過移動設備與他們聯繫的公司網站，聯繫欄似乎都是一個很好的補充。 一旦您熟悉了鏈接 URL 的結構，您就可以設置為所需的任何類型的聯繫鏈接。
有關更多信息，請查看我們關於電話鏈接的帖子。
我期待在評論中收到您的來信。
乾杯!