如何將固定地圖切換添加到您的 Divi 頁面模板

如果您經營實體店並為其創建網站，許多人可能會訪問您的網站以獲取實用信息，例如您的地址。 當然，這就是您的聯繫頁面派上用場的地方，但這並不是您與訪問者無縫共享聯繫方式的唯一方式。 如果您正在尋找一種創造性的方式來分享您公司的地址，您會喜歡本教程。 我們將向您展示如何使用 Divi 的 Theme Builder 將固定地圖切換動態添加到每個頁面。 我們將首先創建一個新的頁面模板。 然後，我們將在模板正文中包含動態頁面內容，並在動態頁面內容的頂部添加一個固定的地圖切換。 您也可以免費下載模板 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載頁面模板

要使用免費頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1.在Divi Theme Builder中創建頁面模板

轉到 Divi 主題生成器並添加新頁面模板

我們將通過導航到 Divi Theme Builder 並添加一個新頁面模板來開始本教程。

輸入模板的正文區域

然後，通過選擇“構建自定義主體”來輸入模板的主體。

2.將動態頁面內容添加到正文區域

部分設置

間距

進入模板編輯器後，您會注意到一個部分。 打開部分設置並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加第 1 行

列結構

繼續使用以下列結構添加新行：

漿紗

還沒有添加模塊，打開行設置並修改大小設置如下：

• 寬度：100%
• 最大寬度：100%

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

將帖子內容模塊添加到列

為了讓每個頁面的內容動態顯示，我們將在這一行中使用 Post Content Module。

3. 創建固定地圖圖釘設計

將第 2 行添加到部分

列結構

到下一行，它使用以下列結構：

漿紗

打開行設置，轉到設計選項卡並更改大小設置如下：

• 寬度：90%
• 最大寬度：
  • 桌面：600px
  • 平板電腦和手機：100%

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 列設置

背景顏色

然後，打開第 1 列設置並使用黑色背景色。

• 背景顏色：#000000

背景圖片

接下來上傳您選擇的背景圖片。 您可以在本教程開頭下載的壓縮文件夾中找到背景圖像。

主要元素 CSS

還將以下 CSS 代碼行添加到列的主元素中：

width: 80% !important;
max-height: 80vh;

能見度

然後，將垂直溢出設置為自動。 這與上一步中的最大高度相結合，確保當列超過 80vh 高度時立即出現滾動條。

• 垂直溢出：自動

第 2 列設置

主要元素 CSS

接下來打開第 2 列設置並將以下 CSS 代碼行應用到主元素：

width: 12% !important;

將地圖模塊添加到第 1 列

是時候添加模塊了，從第 1 列中的地圖模塊開始。添加您選擇的地圖圖釘。

漿紗

轉到模塊的設計選項卡並按如下方式更改大小設置：

• 寬度：88%
• 模塊對齊：居中

間距

接下來刪除默認的底部邊距。

• 下邊距：0px

將 Blurb 模塊添加到第 1 列

添加內容

在第 1 列的地圖模塊下方添加一個 Blurb 模塊。使用您選擇的一些內容。

選擇圖標

接下來選擇一個圖標。

圖像/圖標設置

轉到設計選項卡並按如下方式更改圖標設置：

• 圖標顏色：#ffffff
• 圖像/圖標放置：左

標題文字設置

接下來為標題文本設置樣式。

• 標題字體粗細：粗體
• 標題文字顏色：#ffffff
• 標題文字大小：16px
• 標題行高度：1.6em

正文設置

然後，相應地修改正文設置：

• 正文顏色：#ffffff
• 正文大小：
  • 桌面：16px
  • 平板電腦：14px
  • 電話：13px
• 車身線高：1.8em

間距

也應用以下填充值：

• 頂部填充：70px
• 底部填充：70px
• 左填充：7%
• 右填充：7%

動畫片

並在動畫設置中去掉默認的模塊動畫。

• 圖像/圖標動畫：無動畫

將 Blurb 模塊添加到第 2 列

將內容框留空

到第 2 列。在那裡，我們將添加一個沒有內容的 Blurb 模塊。

選擇圖標

接下來選擇一個圖標。

背景顏色

然後，更改背景顏色。

• 背景顏色：#0045ff

圖像/圖標設置

轉到設計選項卡並相應地設置圖標設置的樣式：

• 圖標顏色：#ffffff
• 圖像/圖標放置：頂部
• 圖像/圖標對齊方式：居中
• 使用圖標字體大小：是
• 圖標字體大小：25px

漿紗

接下來修改大小設置。

• 寬度：70px
• 高度：70px

間距

然後，刪除默認的底部邊距。

• 下邊距：0px

盒子陰影

還包括一個框陰影。

• 框陰影水平位置：6px
• 框陰影垂直位置：6px
• 陰影顏色：rgba(0,0,0,0.3)

主要元素和模糊圖像 CSS

然後，導航到高級選項卡並為主要元素使用以下 CSS 代碼行：

display: flex;
justify-content: center;
align-items: center;

並在 Blurb Image 框中添加這行 CSS 代碼：

margin-bottom: 0;

4. 添加切換功能

將 CSS 類添加到第 2 行

現在我們已準備好所有元素，是時候關注功能了。 首先打開第二行並應用以下 CSS 類：

• CSS 類：地圖切換行

將 CSS 類添加到第 2 列中的 Blurb 模塊

接下來打開第 2 列中的 Blurb 模塊並使用以下 CSS 類：

• CSS 類：地圖切換

在第 2 列中的 Blurb 模塊下方添加代碼模塊

然後，在第 2 列中的 Blurb 模塊下方添加一個代碼模塊。

添加樣式和腳本標籤

在代碼框中放置一些樣式和腳本標籤。

插入 CSS 代碼

我們在樣式標籤中使用以下 CSS 代碼：

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

插入 JQuery 代碼

以及腳本標籤中的以下 JQuery 代碼：

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

將具有水平偏移的固定位置添加到第 2 行

最後但並非最不重要的是，我們需要相應地修改第二行的位置設置：

• 位置：固定
• 位置：左中
• 水平偏移：
  • 桌面：-500px
  • 平板電腦和手機：-72%
• Z指數：11

5. 保存頁面和主題生成器更改

應用所有更改後，您可以保存所有 Divi Theme Builder 更改並在您的網站上查看結果！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在本教程中，我們向您展示瞭如何在整個頁面設計中創造性地包含您公司的地址詳細信息。 更具體地說，我們向您展示瞭如何構建包含固定地圖切換的頁面模板，以便您的訪問者可以隨時訪問您的公司位置！ 您也可以免費下載模板 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。