WordPress divi主题

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

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

让我们开始吧。

预览

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

风格#1

带有齐角的 4 角导航的 GIF

风格#2

带有内部浮动的 4 角导航的 GIF

订阅我们的 Youtube 频道

创建一个新的空白页

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

WordPress divi主题

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

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

进入 Divi Visual Builder 后,从 Premade Layouts 选项卡上传 Cryptocurrency Layout Pack 的登录页面。

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

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

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

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

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

divi builder的屏幕截图

选择四列

删除部分的默认填充

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

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

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

增加 Z 指数

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

fiverr建站WordPress程序员

divi builder的屏幕截图。  z-index

3.调整行的大小

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

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

divi builder 的屏幕截图 - 行设置

删除行的默认填充

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

删除行填充

独立站选品工具

将模块添加到列。

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

  • 第 1 列:图像
  • 第 2 列:按钮
  • 专栏#3:社交媒体关注
  • 第 4 列:按钮

divi builder的屏幕截图。  4列行

4. 为每列设置样式

第 1 列 – 图像模块

添加公司徽标

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

向图像模块添加徽标

高质量外链购买

对齐模块

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

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

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

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

JasperAI 10000字免费额度试用
position: fixed;
top: 0;
left: 0;

用于徽标图像的自定义 css

第 2 列 – 按钮

添加按钮

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

为按钮设置样式

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

WordPress备份工具updrafplus
  • 内容文本:我的比特币

divi builder的屏幕截图

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

divi builder的截图

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

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

按钮样式截图

按钮样式设置

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

最后,打开 Advanced 选项卡并添加 Custom CSS 以将模块的位置固定在页面的左下角。

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

按钮样式截图

专栏 #3 – 社交媒体关注

添加社交媒体关注模块

到第三栏。 这一次,我们需要一个社交媒体关注模块。 添加您选择的三个社交网络。

社交媒体

接下来,在 Design 选项卡中,选择 right Module Alignment。

divi builder的屏幕截图。 对齐权

为社交媒体图标设置样式

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

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

社交网络设置

后台控件截图

复制和粘贴项目样式

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

复制图像样式

粘贴项目样式

将自定义 CSS 添加到模块

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

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

添加自定义css

第 4 列 – 按钮

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

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

复制模块样式

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

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

更改按钮内容

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

  • 对齐方式:从左到右

更改按钮模块的对齐方式

最后,在 Advanced 选项卡中更改 Custom 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 角固定导航。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题