如何使用獨家網絡星期一麵包店佈局包為您的企業創建位置頁面

今年，讓自己獲得網絡星期一特惠也意味著獲得大量免費物品！ 除了享受 25% 的折扣外，購買新 Elegant Themes 會員資格或升級其現有帳戶（或已經擁有終身會員資格）的每個人還將獲得 6 個免費的獨家佈局包，僅在我們的網絡星期一特賣期間提供下載。

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

看看獨家網絡星期一麵包店佈局包

作為終身會員和網絡星期一的新客戶，我們為您提供的獨家佈局包之一是用於 Bakeries 的佈局包。 它由 5 個美味的頁面組成，這將使任何麵包店網站都無法抗拒。

登陸頁面設計

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

食譜頁面設計

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

菜單頁面設計

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

關於頁面設計

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

聯繫頁面設計

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

獲取獨家網絡星期一麵包店佈局包

在進入此用例之前，您需要先了解獨家網絡星期一麵包店佈局包，您可以通過成為新的優雅主題會員、升級您現有的帳戶或已經成為我們的終身會員來獲得。 如果您確實已經是終身會員，您可以登錄我們的會員區並在此處下載我們所有的獨家版式包。 其他所有人都需要使用下面的按鈕購買或升級，然後才能學習我們教程的其餘部分。

在它消失之前下載獨家佈局！

已經是終身會員？ 您可以立即下載該包，無需參與我們的網絡星期一特賣！

如何使用獨家網絡星期一麵包店佈局包為您的企業創建位置頁面

對於本文的其餘部分，我們將假設您已經利用了我們的網絡星期一優惠，或者您已經是終身會員並且可以訪問 Bakery Layout Pack。

從我們的會員區下載新的 Bakery Layout Pack 後，您可以觀看下面的視頻，了解設置的簡單程度。 我們還鼓勵您按照本教程進行操作，以使您的網站為進一步定製做好準備。

現在讓我們進入用例本身。

在為擁有多個地點的公司建立網站時，重要的是要考慮向訪問者傳達該信息的最佳方式。 他們需要知道哪個位置離他們最近，以及任何特定於該位置的重要信息。 而且，為網站構建位置頁面是一個很好的開始。

在這個用例中，我將向您展示使用 Bakery Layout Pack 為您的企業構建專業位置頁面是多麼容易。

使用 Bakery Contact Page Layout 的框架，我將向您展示如何向地圖模塊添加額外的圖釘以反映您的業務的所有位置，以及用於顯示每個位置的重要信息的組織良好且設計良好的部分。 因為我們可以使用佈局已經提供的設計元素，這個過程是清爽有趣的（至少對我來說是這樣）。

讓我們開始吧。

首先使用聯繫人佈局來構建您的位置頁面

Bakery Contact 頁面佈局非常適合用作我們新 Locations 頁面的基礎。 它在頂部有一個地圖模塊，我們將用它來展示我們公司的每個位置。 此外，它還有一些其他元素，例如已經設計好的文本模塊，我們可以根據需要重新排列和修改。

創建新頁面

首先，您需要創建一個新頁面並為其命名（類似於“我們的位置”），然後單擊以使用 divi Builder，然後單擊可視化構建器。

加載麵包店聯繫頁面佈局

此時，您應該已經將頁面佈局上傳到您的 Divi 庫。 單擊以打開頁面底部的紫色菜單，然後選擇帶有加號圖標的“從庫中添加”按鈕。 選擇從庫選項卡加載，然後從列表中選擇 Bakery Contact 佈局。 佈局將立即加載到頁面上。

發布。

為您的特定位置信息添加部分

我們在聯繫頁面上確實沒有太多內容可用於為我們的特定位置構建附加內容。 因此，讓我們轉到 Bakery Landing 頁面並從頁面的第二部分中選擇行並將其保存到庫中。

現在返回位置頁面。 複製頁面底部包含聯繫表格的部分（不要刪除它，我們稍後會用到它）。 在地圖正下方的部分中，從該部分刪除整行並添加您從庫中保存的行。

接下來將行的列佈局更改為三分之二三分之一佈局。

在底部的右欄中找到帶有地址內容的文本模塊。 將其拖到其上方部分行右列中的圖像模塊下方。

然後更新左列文本模塊中的內容以表示您的特定公司位置。 對於我的示例，我將添加以下內容：

總部
紐約市

現在更新右欄中的圖像模塊以包含您公司位置的圖像。

這將作為您每個特定位置簡介的一個很好的部分。

現在您需要做的就是複制此部分以添加其他位置。

將此部分複制兩次，以便您總共有 3 個位置部分。 然後將中間位置部分的背景顏色更改為白色以幫助更好地劃分部分。

然後使用特定於位置的內容更新重複的部分。 對於此示例，除了我的紐約位置之外，我還將為舊金山和休斯頓創建一個分區。

設計聯繫表格頁腳部分

請記住我們保存在底部的包含聯繫表格的部分。 這將作為我們位置頁面的一個很好的頁腳部分。 我們需要做的就是稍微調整一下。

首先讓我們刪除右列中的剩餘模塊。 然後將行列佈局更新為一列佈局。 現在您應該看到的只是一列行中的聯繫表。

接下來單擊以編輯行設置並更新以下內容：

在內容選項卡下...

背景顏色：#ffffff

在設計選項卡下...

自定義填充：頂部 5%，右側 5%，底部 5%，左側 5%

框陰影：[選擇框陰影]

現在讓我們為我們的部分添加背景圖像。 轉到部分設置並選擇佈局中包含的背景圖像之一。

偉大的！ 現在進入地圖模塊。

添加您的 Google API 密鑰

此時，您需要確保創建您的 Google API 密鑰，然後將其添加到主題選項中。

使用新的位置圖釘更新地圖模塊

至此，我們的大部分頁面已經完成。 剩下的就是對頁面頂部地圖模塊的更新。 我們需要為我們在頁面部分（紐約市、舊金山和休斯頓）中創建的三個部分添加新的圖釘位置。

單擊以編輯地圖模塊並更新設置如下：

擦除模塊中顯示的一個引腳，以便重新開始。 然後添加一個新引腳並按如下方式更新設置：

名稱：紐約市麵包店
內容：更多信息
地圖別針地址：紐約市

單擊查找按鈕。

然後添加一個新引腳並更新設置，如下所示：

標題：舊金山麵包店
內容：更多信息
地圖別針地址：舊金山

單擊查找按鈕。

然後添加一個新引腳並更新設置，如下所示：

標題：休斯頓麵包店
內容：更多信息
地圖別針地址：德克薩斯州休斯頓

單擊查找按鈕。

您可以將地圖中心地址保留為紐約市。 但是調整地圖顯示以縮小到足夠遠，以便在訪問者第一次查看地圖時能夠看到所有位置。

將錨鏈接添加到 Pin 內容框

作為附加功能，您可以通過在點擊大頭針時顯示的大頭針內容中添加錨鏈接來提升用戶體驗。 此錨鏈接會將用戶帶到頁面上顯示該位置信息的特定部分。

打開地圖模塊設置，然後編輯第一個引腳設置。 突出顯示內容框中顯示“更多信息”的文本，然後單擊鏈接圖標使其成為鏈接。 對於 URL，輸入“#newyork”並單擊“確定”。

對舊金山圖釘（使用網址“#sanfran”）和休斯頓圖釘（使用網址“#houston”）做同樣的事情。

現在您需要做的就是為每個部分添加一個自定義 CSS ID，這些 ID 將對應於您剛剛在 pin 中創建的鏈接 url。

對於“紐約市”部分，使用 CSS ID“newyork”更新“高級”選項卡中的部分設置並保存您的設置。

現在，當用戶單擊紐約圖釘中的“更多信息”鏈接（使用 url #newyork）時，頁面將跳到該部分。

對 San Francisco 部分（使用 CSS ID“sanfran”）和 Houston 部分（使用 CSS ID“houston”）執行相同操作

就是這樣。 你都完成了！