如何使用Elementor的谷歌地圖功能？

2020年12月28日 9:29:06 來源：喜運達

如何使用Elementor的谷歌地圖功能

在外貿(mào)建站過程中，特別是B2B類型的企業(yè)網(wǎng)站，往往很重視展現(xiàn)自己的公司實力和形象，所以在做網(wǎng)站的時候，大部分的站長都會要求添加一個谷歌地圖來標示自己的公司所在位置。Jack老師也比較贊同這種做法，網(wǎng)站上的谷歌地圖功能能夠提供給訪客實時查詢公司所在地址信息的相關情況，無形中給訪客吃了一顆定心丸。我們在這里先不說這個谷歌地圖的標示地址和公司或者工廠的實體地址是不是完全相同的，因為訪客在看到網(wǎng)站中企業(yè)信息的初期并不一定會對這些信息進行鑒別和求證。要知道客戶與我們展開合作的前提就是信任，其次才是利益的銜接。那么谷歌地圖就很好的給我們提供了一種無形中提升訪客信任度的效果。

接下來，我們就來看看Elementor編輯器中內(nèi)置的谷歌地圖功能是如果進行相關操作的：

第一步：將Elementor編輯器中的谷歌地圖功能添加到內(nèi)容編輯版塊

如上圖所示，我們找到Elementor編輯器中的“谷歌地圖”元素，然后左鍵點擊它不松開，移動到上圖中箭頭2所指的“內(nèi)容編輯版塊”，等它的灰色外邊框線變色之后再松開鼠標的左鍵即可。這樣我們就完成了將谷歌地圖元素添加到了內(nèi)容編輯版塊。接下來我們繼續(xù)學習如何對谷歌地圖元素進行相關的設置。

第二步：將Elementor編輯器中的谷歌地圖主體功能進行相關的設置

當我們將谷歌地圖元素放到內(nèi)容編輯版塊之后，就出現(xiàn)了如上圖一樣的效果。默認狀態(tài)下，Elementor編輯器的谷歌地圖展示的地址就是英國倫敦的摩天輪—倫敦眼。可能是因為這個代表性建站實在是太知名了吧，以至于Elementor編輯器的開發(fā)團隊將它設置成了默認展示對象。

那么問題來了，我們要展示的是自己的公司或者工廠的地址，我并不想要倫敦眼的地圖信息，我該如何設置？別急，Jack老師將在下面的內(nèi)容中逐一講解

“位置”：在內(nèi)容框中，我們輸入自己的公司或者工廠地址。注意書寫習慣，在中文的表達中，一般是國家、省份、縣市、鄉(xiāng)鎮(zhèn)、具體地址。而英文的書寫狀態(tài)是不一樣的，需要將這個過程反過來書寫，先將國家放在最后，再添加身份到國家之前，以此類推。

“縮放”：縮放指的就是谷歌地圖的顯示等級。縮放等級越高，顯示的地址越精確。

“高度”：指的是谷歌地圖的這個內(nèi)容顯示版塊的高度，數(shù)值越高，那么這個谷歌地圖顯示的內(nèi)容高度就越高。因為我們的astra主題的默認寬高值默認為1440px，所以谷歌地圖的高度顯示值最高為1440px。

第三步：將Elementor編輯器中的谷歌地圖樣式功能進行相關的設置

樣式設置中給出了兩種效果，“標準”和“懸停”。標準就是谷歌地圖的正常表現(xiàn)形式，而懸停指的就是當鼠標移動到地圖上的時候，谷歌地圖所展現(xiàn)的相關效果。

Elementor編輯器的谷歌地圖在樣式功能中，只提供了css過濾器的效果。而在css過濾器中，Elementor編輯器有5種，分別是“模糊”、“亮度”、“對比度”、“飽和度”和“色調(diào)”，雖然這部分css過濾器效果我已經(jīng)在其他文章中講解過，但是為了避免同學們找不到之前的文章，我在這里再重復講解一下

“模糊”：指的是谷歌地圖的模糊程度，一般情況下不建議同學們?nèi)ゲ僮魉吘骨逦木W(wǎng)站地圖才是我們需要的

“亮度”：指的是谷歌地圖的顯示亮度，亮度值越高，谷歌地圖的顯示就越亮

“對比度”：對比度和亮度這兩個功能畢竟相似，對比度高的產(chǎn)品在一些暗部場景中的細節(jié)表現(xiàn)、清晰度和高速運動物體表現(xiàn)上優(yōu)勢更加明顯。?亮度是指畫面的明亮程度。

“飽和度”：飽和度指的是谷歌地圖的顏色顯示，如果飽和度為零，那么顯示的地圖是黑白色的。

“色調(diào)”：對谷歌地圖當前的顏色進行調(diào)整，進行RGB顏色的相關轉(zhuǎn)化。

懸停狀態(tài)和標準狀態(tài)是一樣的，除了CSS過濾器之外，還有個額外的css過渡時間，這個過渡時間指的是谷歌地圖從標準狀態(tài)轉(zhuǎn)換到懸停狀態(tài)的時間。

那么到這里為止，我們就將Elementor編輯器中谷歌地圖元素功能講解完了。谷歌地圖元素操作很簡單，相信同學們肯定能夠一學就會。

如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關鍵詞--“Jack外貿(mào)建站”，排名首頁首位的就是我的網(wǎng)站，網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開發(fā)等實操干貨內(nèi)容在等著你哦!

來源：Jack SEO

來源：喜運達