專注於架設企業網站,分享WordPress教學和Elementor教學
image 15

網站右側邊懸浮聯繫按鈕

價格:39元/不限網站/終生

這個模組可以在全站右側添加圖示的4個懸停聯繫按鈕,可連結到發郵件、打電話、skype、whatsapp,這在企業網站建設中挺常見到的。

每個按鈕的圖示、鏈接、顏色、大小、邊角、位置都是可以修改的,你也可以新增或刪除按鈕。

它是用Elementor製作並放置於網站頁腳的,所以只能用於:用Elementor製作頁腳的WordPress網站。 目前頁腳通常由外掛程式Elementor Pro(付費版)Elementor –頁眉,頁腳和塊範本外掛程式(免費版)製作。

你需要知道的事:
1.请在购买前体验演示模板和阅读以下教程,以便了解这个模块的真实情况与使用方法。
2.因模块销售是微利且无授权控制的,一经售出不能退款。

使用教學

使用教程分別製作了視頻和圖文。 下方視頻教程請開啟VPN后科學上網查看。

如何將模組導入到網站中

  1. 購買后下載模組到你的電腦里,接下來我們將它傳到網站的頁腳中
  2. 在你的網站中,用Elementor編輯頁腳Footer檔,你可以從任一頁面頂部的控制欄里找到Footer的編輯入口
image 14
  1. 接下來,如下圖所示,在Footer已有內容下方點擊資料夾圖示
image 5
  1. 在彈出的範本庫中,點擊右上角的上傳圖示
image 6
  1. 將剛才下載的模組檔上傳到範本庫中,以後再用就不用重傳了
image 7
  1. 傳完后,在範本庫清單中找到:側邊欄懸浮聯繫按鈕,在右側點擊插入按鈕,即可將它導入到footer頁面中
image 8
  1. 接下來在導入文檔設置的確認介面,點擊否
image 9
  1. 你將看到懸浮按鈕已經成功導入,你可以發佈footer頁面去前臺查看一下效果。
image 10

如何更換圖示與圖示的連結

备注:如果你想在制作网站期间使用中文界面以增加便利,可以按照这篇教程的第二节的第一步修改站点语言为中文即可,期间你会发现部分页面有中文文案,等做完网站再改回目标语言通常即可恢复。此外,当插件无中文语言包或中文语言包不完整时,切换站点语言也是徒劳的。

如下圖所示,請在導入後點選需要修改的圖示,然後在左側的面板中更換圖示和圖示的連結,點擊圖示可以連結到對應內容。

image 11

按鈕常用的連結

下面列舉了發郵件、打電話、對接skype和whatsapp的鏈接代碼,記得做完后自己測試一下功能是否正常。

  1. 信箱:
    1. 如果需要點擊按鈕實現向郵箱發郵件,請在鏈接處填入:mailto:[郵箱],譬如:mailto:[email protected]
    2. 如果需要點擊按鈕打開詢盤彈窗,你需要使用Elementor Pro的Popup功能
  2. 電話:如果需要點擊按鈕實現撥打電話,請在鏈接處填入:tel:[電話號碼],譬如:tel:+8618100000000 或者 tel:+86(25)11112222
  3. skype:記得把下面的號碼或名稱(name)換成你的資訊
    1. 點擊按鈕直接撥打skype電話:skype:+1234567890?call,或者skype:+name?call
    2. 點擊skype按鈕加好友:skype:name?add
    3. 點擊skype按鈕傳送訊息:skype:name?chat
  4. Whatsapp:https://wa.me/+86180xxxxxxxx,其中國際代碼+86要保留,+86之後的號碼之間不要有任何符號(譬如括號)

如何修改圖示的顏色、尺寸、邊框半徑

點選需要修改的圖示,然後在左側面板的style/樣式中,修改圖標的標準顏色(normal)和懸停顏色(hover);

調整尺寸數值可以修改圖示的大小(Size),設置邊框半徑(border radius)為0時,圖示是直角; 隨著數位越大,邊角越圓。

image 12

如何調整圖示的位置

如果你需要調整按鈕的位置,可以在按鈕的高級設置中,修改定位欄目的水準偏移和垂直偏移數值。

英汉对照:高级设置:Advanced;定位:Positioning;水平方向:Horizontal Orientation;垂直方向:Vertical Orientation;偏移:offset

增大水準偏移數值,能夠加大按鈕與右側的距離,反之亦然。

增大垂直偏移數值,能夠加大按鈕與底部的距離,你可以通過調整每個按鈕的垂直偏移數值,來排列按鈕的順序、調整按鈕的間距。

image 13

如何新增圖示

image 16

如果你需要複製一個按鈕,請在按鈕上右鍵,然後點擊複製功能(duplicate),複製后的按鈕會重疊在原按鈕上,記得按照上一段說的,調整垂直偏移量。

如果按鈕重疊導致你無法選中,那你可以如下圖所示,右鍵后點擊導航功能(navigator),在導航中,給按鈕命名以便識別,並且在導航中點擊按鈕,即可選中對應按鈕,同時頁面左側的配置欄也是針對當前所選按鈕的。

image 20 11 03 10 59 09

如何刪除圖示

image 17

如果你需要刪除一個按鈕,請在按鈕上右鍵,然後選擇刪除

服務流程及明細
点赞
0 / 5 0

Your page rank:

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我
來開通 SEO 工具20+