如何将固定地图切换添加到您的 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 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。