如何使用 Divi 创建响应式图标导航主页

当您使用 WordPress 构建网站时，您始终可以选择当人们直接访问您的网站时首先显示哪个页面。 大多数网站创建者立即将访问者发送到他们的主页。 但是您也可以选择另一种方法，通过添加图标导航页面作为您的主页，允许访问者选择他们首先访问您网站上的哪个页面。 一旦人们点击进入他们选择的页面，他们将再次拥有正常的网站体验，页面顶部的菜单栏允许他们导航到其他页面。 这意味着一旦他们在第一次交互后通过它，他们就不必返回到这个图标导航页面。

在本教程中，我们将向您展示如何创建一个现代的 100% 响应式图标导航主页，该主页在所有屏幕尺寸上都看起来不错。 我们还将帮助您将其设为您网站的主页，并在第一次交互时删除主菜单栏和页脚。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。

创建新页面

订阅我们的 YouTube 频道

添加新页面

首先向您的 WordPress 网站添加一个新页面。

为您的页面命名并发布

为您的页面命名并立即发布页面。

将页面设置为主页

进入网站阅读设置

然后，转到您网站的阅读设置。

将新页面设置为主页

在这里，我们将选择新的图标导航页面作为我们网站的主页。

隐藏图标导航页面上的主菜单栏和页脚

返回图标导航页面并启用 Divi 的 Visual Builder

现在我们已经选择了主页，我们可以开始构建我们的图标导航页面。 返回您创建的页面并切换到 Divi 的 Visual Builder。

一旦你这样做，你会得到三种可能性。 您可以从头开始构建，选择预制布局或克隆现有页面。 选择第一个选项。

添加自定义 CSS 以仅在此页面上隐藏主菜单栏和页脚

因为这是一个导航页面，所以我们希望将焦点放在我们手动创建的菜单项上。 这就是我们将隐藏此页面上的主菜单栏和页脚的原因。 一旦人们继续访问该网站，他们就会恢复主菜单栏和页脚。

#main-header, #main-footer {
display: none;}

让我们开始设计吧！

添加第 1 节

让我们开始使用 Divi 创建我们的响应式设计！ 添加第一个常规部分。

添加行

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并在大小设置中启用“使此行全宽”选项。

• 使这一行全宽：是

添加图像模块

上传公司标志

我们在这一行中需要的第一个模块是图像模块。 上传您的公司徽标，让人们知道他们已登陆正确的网站。

结盟

然后，在设计选项卡中更改图像对齐方式。 确保禁用“在移动设备上始终居中图像”选项。

• 图像对齐：左

间距

接下来添加一些自定义底部边距。

• 底部：10vw（台式机），20vw（平板电脑和手机）

添加文本模块

添加H1内容

我们需要的下一个模块是文本模块。 添加一些您选择的 H1 内容。

H1 文本设置

继续修改设计选项卡中的 H1 文本设置。

• 标题字体：Didact Gothic
• 标题字体粗细：粗体
• 标题文本对齐方式：左
• 标题文字颜色：#333333
• 标题文字大小：5vw（桌面）、6vw（平板电脑）、7vw（手机）
• 标题线高度：0.8em

浆纱

接下来修改大小设置。

• 宽度：68%（桌面）、80%（平板）、88%（手机）
• 模块对齐：左

添加分频器模块

能见度

我们在这一行中需要的下一个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

颜色

然后，转到设计选项卡并更改图标颜色。

• 颜色：#333333

浆纱

也修改模块的大小设置。

• 分隔线重量：10px
• 宽度：8%（桌面）、20%（平板电脑）、25%（手机）
• 模块对齐：左

添加第 1 节

进入下一节！ 在前一个下面添加一个常规部分。

添加行

列结构

继续向该部分添加新行。

浆纱

在不添加任何模块的情况下，打开行设置并修改大小设置。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

然后，转到间距设置并在不同的屏幕尺寸上进行一些更改。

• 底部填充：0.2vw
• 左填充：4vw（桌面）、2vw（平板电脑）、1vw（手机）
• 右填充：25vw（桌面）、2vw（平板电脑）、1vw（手机）
• 第 1 列右填充：0.2vw
• 第 2 列左填充：0.1vw
• 第 2 列右填充：0.1vw
• 第 3 列左填充：0.2vw

自定义 CSS

通过向高级选项卡中的主要元素添加一行 CSS 代码，我们确保所有列都彼此相邻显示，即使在平板电脑和手机上也是如此。

display: flex;

将 Blurb 模块添加到第 1 列

添加标题

现在我们可以开始添加我们的模块了！ 将新的 Blurb 模块添加到第一列并输入标题。

选择图标

然后，选择您选择的图标。

关联

还要添加到模块的链接。 确保使用正确的 URL，将访问者引向他们想要访问的页面。

• 模块链接网址：https://www.yourwebsite.com/homepage

渐变背景

接下来添加渐变背景。

• 颜色 1：#4b42ff
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心
• 起始位置：60%
• 结束位置：60%

背景图片

连同背景图片。 将以下图像保存到桌面：

并将其与以下背景设置结合使用：

• 背景图片位置：中心
• 背景图像重复：不重复

图标设置

继续修改设计选项卡中的图标设置。

• 图标颜色：#ffffff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：4vw（桌面）、6vw（平板电脑）、8vw（手机）

标题文字设置

也更改标题文本设置。

• 标题字体：Didact Gothic
• 标题文本对齐：居中
• 标题文字颜色：#ffffff
• 标题文字大小：2vw（桌面）、3vw（平板电脑）、4vw（手机）
• 标题字母间距：-2px
• 标题行高度：0em

间距

并为不同的屏幕尺寸添加一些自定义的顶部和底部填充值。

• 顶部填充：9vw（台式机和平板电脑），12vw（手机）
• 底部填充：9vw（台式机和平板电脑），12vw（手机）

克隆 Blurb 模块两次并在剩余列中放置重复项

修改完第 1 列中的 Blurb 模块后，您可以继续克隆该模块两次。 将重复项放在行的其余列中。

更改模糊内容

当然，您需要更改每个副本的标题。

更改模糊图标

随着图标。

更改模糊链接

将新的 Blurb 模块与指向正确页面的唯一 URL 匹配。

• 模块链接网址：https://www.yourwebsite.com/about

更改模糊渐变背景

然后，更改两个副本的渐变背景的第一种颜色。

• 颜色 1：#f9f9f9

• 颜色 1：#ff445d

更改第 2 列中模糊模块的图标和文本颜色

并将 Blurb 模块的图标和文本颜色与新的渐变背景颜色相匹配。

• 图标颜色：#000000
• 标题文字颜色：#000000

克隆整行

完成该行后，您可以完全克隆它。

克隆第 2 列中的 Blurb 模块

克隆第 2 列中的 Blurb 模块。

将光背景模糊模块放在第 1 列和第 3 列中

并将浅色背景的 Blurb Modules 放在第 1 列和第 3 列中。

将颜色背景模糊模块放在第 2 列中

将颜色背景模糊模块之一移动到第二列。

移除剩余的模糊模块

并删除剩余的 Blurb 模块。

更改模糊内容

同样，您需要更改每个 Blurb 模块的标题。

更改模糊图标

随着图标。

更改模糊链接

还有链接。

• 模块链接网址：https://www.yourwebsite.com/shop

更改第 2 列中 Blurb 模块的渐变背景

最后但并非最不重要的一点是，更改第 2 列中 Blurb 模块的渐变背景的第一种颜色。

• 颜色 1：#000000

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

最后的想法

在这篇文章中，我们向您展示了如何创建图标导航页面并将其用作主页。 这种方法允许您的访问者在查看网站内容之前选择他们导航到的页面。 一旦有人点击菜单项，他们将再次体验通过主菜单栏的正常导航。 如果您有任何问题或建议，请务必在下方评论区留言！