当您使用 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%（手机）
- 模块对齐：左
添加分频器模块
能见度
我们在这一行中需要的下一个也是最后一个模块是 Divider 模块。 确保启用了“显示分隔线”选项。
颜色
然后，转到设计选项卡并更改图标颜色。
浆纱
也修改模块的大小设置。
- 分隔线重量：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 Module 添加到第一列并输入标题。
选择图标
然后，选择您选择的图标。
关联
也添加到模块的链接。 确保使用正确的 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
更改模糊渐变背景
然后，更改两个副本的渐变背景的第一种颜色。
更改第 2 列中 Blurb 模块的图标和文本颜色
并将 Blurb 模块的图标和文本颜色与新的渐变背景颜色相匹配。
- 图标颜色：#000000
- 标题文字颜色：#000000
克隆整行
完成该行后，您可以完全克隆它。
第 2 列中的克隆 Blurb 模块
克隆第 2 列中的 Blurb 模块。
在第 1 列和第 3 列中放置浅背景模糊模块
并将浅背景模糊模块放在第 1 列和第 3 列中。
将颜色背景模糊模块放在第 2 列中
将其中一个颜色背景的模糊模块移动到第二列。
移除剩余的模糊模块
并删除剩余的 Blurb Module。
更改模糊内容
同样，您需要更改每个 Blurb 模块的标题。
更改模糊图标
连同图标。
更改模糊链接
还有链接。
- 模块链接网址：https://www.yourwebsite.com/shop
更改第 2 列中 Blurb 模块的渐变背景
最后但同样重要的是，更改第 2 列中模糊模块渐变背景的第一种颜色。
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
最后的想法
在这篇文章中，我们向您展示了如何创建图标导航页面并将其用作您的主页。 这种方法允许您的访问者在查看网站内容之前选择他们导航到的页面。 一旦有人点击了一个菜单项，他们将再次体验到通过主菜单栏的正常导航。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
