如何使用 Divi 创建 4 角固定导航

已发表: 2019-07-08

独特的导航设计可以给任何网站带来一点优势。 例如，4 角固定导航是一种很好的方式，可以为查看者提供更多选项来与您的网站设计进行交互。 事实上，它为整个网站的用户体验设计添加了另一层。

在这篇文章中，我们将向您展示如何创建自己的 4 角固定导航。 我们将解释如何创建两种略有不同的样式，但这只是冰山一角。 由于导航是使用 Divi 的内置元素创建的，因此定制的可能性是无穷无尽的。

我们希望这个想法能激发您为即将到来的 Divi 项目创建惊人的 4 角固定导航设计。

让我们开始吧。

预览

让我们快速浏览一下我们今天将要创建的 4 角导航。 第一种样式将按钮放置在屏幕的边框处，另一种样式具有内部浮动。

风格 #1

带齐平角的 4 角导航 GIF

风格#2

带内部浮动的 4 角导航 GIF

订阅我们的 YouTube 频道

创建一个新的空白页

打开一个新页面，在使用 Divi 编辑之前，在页面属性中选择“空白页面”。 完成后，启用 Divi Builder。

Divi 页面属性的屏幕截图 - 空白页面

上传加密货币登陆页面布局

进入 Divi Visual Builder 后，从预制布局选项卡上传加密货币布局包的登录页面。

Divi 布局包的屏幕截图 - 加密货币

Divi 加密货币布局包的屏幕截图

2. 创建一个 4 列行的新部分

添加具有 4 列行的新常规部分

要创建 4 个导航项，我们需要一个具有 4 列行的新部分。 一直滚动到页面底部并添加一个新的常规部分。 然后，选择具有 4 个相同大小列的行。

divi 生成器的屏幕截图

选择四列

删除部分的默认填充

在添加模块之前，请确保通过在顶部和底部添加“0px”来删除该部分的填充。 此外，仔细检查该部分没有背景颜色或渐变背景。

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

divi builder的屏幕截图 - 调整部分中的填充

增加 Z 索引

我们希望此部分在我们滚动时高于所有其他部分。 这就是为什么我们需要增加截面的 Z 索引值。 为此，请打开“高级”选项卡，然后转到可见性设置并增加 Z 索引。

  • Z指数：10

divi 生成器的屏幕截图。 z-索引

3. 调整行的大小

接下来，我们需要调整行的大小设置。 打开设计选项卡并相应地调整设置：

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 均衡列高度：否
  • 宽度：100%
  • 最大宽度：100%

divi builder的屏幕截图 - 行设置

删除行的默认填充

为确保页面底部没有剩余空间，请删除该行的默认填充。 在“设计”选项卡中，将顶部和底部填充的间距输入更改为“0px”。

删除行填充

将模块添加到列。

现在是时候向每列添加一些模块了，从左到右。

  • 第 1 列：图像
  • 第 2 列：按钮
  • 第 3 列：社交媒体关注
  • 第 4 列：按钮

divi 生成器的屏幕截图。 4列行

4. 为每一列设置样式

第 1 列 – 图像模块

添加公司徽标

打开第 1 列中的图像模块。 上传您的徽标（宽度为 220 像素，高度为 100 像素）。 确保它是徽标居中的透明图像。

为图像模块添加徽标

对齐模块

我们希望将徽标放置在页面的左上角，因此我们需要将模块与左侧对齐。 打开图像模块中的设计选项卡并选择左图像对齐。

  • 对齐方式：左

divi builder的屏幕截图 - 图像设置

添加自定义 CSS 以修复模块的位置

要确保模块的位置保持固定，请转到“高级”选项卡并将自定义 CSS 添加到主元素。 

position: fixed;
top: 0;
left: 0;

用于徽标图像的自定义 css

第 2 列 – 按钮

添加按钮

现在，在第 2 列中，添加一个按钮模块。

样式按钮

在“内容”选项卡中，为按钮添加文本。

  • 内容文本：我的比特币

divi 生成器的屏幕截图

接下来，在“设计”选项卡中，选择“左按钮对齐”。

  • 对齐方式：左

divi builder的截图

之后，将自定义按钮样式滑动到是并相应地调整值：

  • 自定义按钮样式：是
    • 按钮文字大小：桌面； 25px，平板电脑：20px，手机：20px
    • 按钮文字颜色：白色，#ffffff
    • 按钮背景颜色：渐变
      • 顶部颜色：#1c076d，底部颜色：#185475
      • 渐变类型：线性
    • 按钮边框半径：7 px
    • 按钮字体：Tantillium Web（与布局相同）
    • 显示按钮图标：是
    • 按钮图标：交通锥
    • 按钮图标颜色：白色，#ffffff
    • 按钮图标位置：右

按钮样式截图

按钮样式设置

添加自定义 CSS 以修复模块的位置

最后，打开高级选项卡，添加自定义 CSS，将模块的位置固定在页面的左下角。 

position: fixed;
bottom: 0;
left: 0;

按钮样式截图

第 3 列 – 社交媒体关注

添加社交媒体关注模块

进入第三列。 这一次，我们需要一个社交媒体关注模块。 添加您选择的三个社交网络。

社交媒体

接下来，在“设计”选项卡中，选择“正确的模块对齐”。

  • 对齐方式：右

divi 生成器的屏幕截图。右对齐

设计社交媒体图标

打开第一个社交网络的个人设置，转到设计选项卡并相应地更改图标设置：

  • 图标颜色：白色#ffffff
  • 使用自定义图标大小：是
    • 图标字体大小：桌面； 25px，平板电脑：20px，手机：20px
  • 背景：无

社交网络设置

后台控件截图

复制和粘贴项目样式

返回主社交媒体关注窗口，右键单击第一个项目并选择“复制项目样式”。 然后右键单击剩余的两个社交网络并粘贴样式。

复制图像样式

粘贴项目样式

向模块添加自定义 CSS

最后，在高级选项卡中，添加以下 CSS 代码，使模块贴在页面的右上角： 

position: fixed; 
top: 0; 
right: 0;

添加自定义css

第 4 列 – 按钮

从模块 #2 复制模块样式并调整

为了使模块 #4 中的按钮看起来与模块 #2 中的按钮完全相同，我们将使用“复制模块样式”选项。 首先，右键单击第 2 列中的按钮模块，单击“复制模块样式”，然后将其粘贴到第 4 列中的按钮模块。

复制模块样式

现在是时候更改内容选项卡中的设置了。 首先，更改文本内容。

  • 文本：从“我的比特币”到“阅读我们的博客”

更改按钮内容

然后，更改按钮对齐方式。

  • 对齐方式：从左到右

更改按钮模块的对齐方式

最后，更改高级选项卡中的自定​​义 CSS 代码：

  • 将代码更改为： 
position: fixed; 
bottom: 0; 
right: 0;

更改自定义 css

结果

带齐平角的 4 角导航 GIF

5.更改自定义CSS实现第二个StyleExample

在第一个样式示例中，角粘在角上。 为了获得第二种样式，您只需要调整 CSS 代码，使角落模块向内浮动一点。

只需在所有四个模块的高级选项卡中调整自定义 CSS

模块#1 

position: fixed; 
top: 1vw; 
left: 1vw;

模块#2 

position: fixed; 
bottom: 2vw; 
left: 2vw;

模块#3 

position: fixed; 
top: 3vw; 
left: 2vw;

模块#4 

position: fixed; 
bottom: 2vw; 
right: 2vw;

最后结果

带内部浮动的 4 角导航 GIF

结论

本教程仅简要介绍了使用 Divi 使用 4 角固定导航可以执行的操作。 最终，您可以为每列选择任何模块，只要您保留我们提供的自定义 CSS。 我们希望这个创意教程能激发您制作自己的 4 角固定导航。 如果您有任何问题或建议，请务必在下方评论区留言！