如何使用 Divi 更改滚动上的粘性标题徽标

Rifat Divi Tutorials Jan 28, 2022

在为您的网站创建粘性标题时,更改徽标可能会导致未来的样式选项。 例如,您可能想更改粘性标题的背景颜色,但需要不同的徽标来完成设计。 或者,您可能需要一个不同版本的徽标,该版本不太容易分散用户的注意力。

在今天的Divi教程中,您将看到如何更改粘性标题上的徽标。 但是,首先,我们将使用 Divi 主题构建器创建一个带有两个徽标的新标题,当用户使用标题的粘性状态时,它们会切换。

让我们开始吧!

预览

Changin 粘头标志是最近几天非常有吸引力的项目。 看看今天的设计预览。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

第 1 部分:构建新标题

为了学习今天的教程,让我们使用 Theme Builder 选项创建一个新标题。 只需转到主题构建器选项并继续为所有页面构建自定义标题

第 2 部分:创建粘性部分和行

行加法

选择要在该部分插入的标记行模式。

部分设置

我们希望这个标题是粘性的。 因此,我们即将在该部分添加一个粘性位置。 让我们从设置的高级选项卡中对滚动效果进行以下调整。

  • 粘性位置:坚持顶部

现在从内容选项卡添加背景颜色。 此颜色将应用于桌面和粘滞状态,如下所示:

  • 背景颜色(桌面):#f6f0e7
  • 背景颜色(粘性):#000000

从设计选项卡更新填充。

  • 内边距:0px 顶部,0px 底部

行设置

完成部分设置后,现在我们必须在行设置中做一些工作。 在设计选项卡上,

  • 天沟宽度:1
  • 宽度:96%
  • 内边距:顶部 10 像素,底部 10 像素

第 3 部分:添加徽标

是的,我们将使用两个不同的徽标,因为使用单独的徽标更方便。 将有两个不同的图像将滑入和滑出视线。 逻辑是——页面完全加载后,用户会在标题中看到一个标志,但一旦开始滚动,它就会改变。

手标志

在我们行的左列添加一个图像模块。

现在添加一个徽标。 确保将徽标保持在 200 px * 67 px 范围内。 您可以将主页链接添加到此徽标以动态执行它。

在设计选项卡中进行以下更改。

  • 最大高度:67px(桌面),45px(平板电脑和手机)

修改粘滞状态下的transform translate选项:

  • 变换平移 Y 轴(粘性):-100%

这会将徽标向上移动到列之外,以在粘性状态下将其隐藏起来。

粘性状态徽标

要制作一个可以在粘性状态下工作的徽标,首先,我们需要复制我们刚刚创建的图像模块。

现在替换图像/徽标。 保持此图像与前一个图像大小相同。

在高级选项卡中,编辑职位设置。

  • 职位:绝对

徽标现在应该直接位于主徽标的顶部。

在设计选项卡下,更新转换选项如下:

  • 变换平移 Y 轴(桌面):100%
  • 变换平移 Y 轴(粘性):0%

第 4 节:隐藏的列溢出

粘性状态徽标的可见性将在列之外,但要改变这一点,我们将修改溢出可见性。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

第 5 部分:菜单

这是我们教程的最后一部分。 没有菜单,标题部分毫无价值。 让我们添加一个菜单模块并将所需的菜单项放在上面。

使菜单背景透明。

现在按照以下调整使菜单更具吸引力。

  • 菜单字体:Roboto
  • 菜单字体粗细:粗体
  • 菜单文字颜色:#ff9900
  • 菜单文字大小:18px
  • 菜单行高:1.3em
  • 文字对齐:右
  • 下拉菜单背景颜色:#fff
  • 下拉菜单行颜色:#000
  • 下拉菜单文本颜色:#000(桌面)、#000(粘性)
  • 移动菜单背景颜色:#fff
  • 移动菜单文本颜色:#000(桌面)、#000(粘性)
  • 汉堡菜单图标颜色:#000(桌面)、#fff(粘性)
  • 边距(桌面):顶部 14px
  • 边距(平板电脑和手机):5px 顶部
  • 填充(平板电脑和手机)5px 底部
  • 圆角:3px
  • 边框宽度(平板电脑和手机):1px
  • 边框颜色:#ddd(桌面),#333(粘性)

最终视图

这是我们设计的最终视图。

整理思路

使用Divi时,不必为粘性标题使用相同的徽标。 我们刚刚演示了使用Divi的内置功能创建动态标题是多么简单。 不需要额外的代码。 一旦您释放了Divi粘性设置的全部潜力,您可能会在徽标的进出视图方面变得相当有创意。 希望这个小技巧对您即将进行的项目很有用!