如何使用 Elementor 创建粘性菜单和标题

已发表: 2020-10-23

我们的许多读者经常问我们，“如何使用 Elementor 创建粘性菜单和标题。” 为了解决这个问题，我们想到了为什么不写一篇文章解释如何使用 Elementor 创建粘性菜单和标题的整个过程。 有了这个想法，我们正在创建一个关于如何使用 Elementor 创建粘性菜单和标题的摘要。

首先，Elementor 是 WordPress 中的一个工具。 它是最著名且易于使用的页面构建器之一，可帮助您轻松创建和设计 WordPress 网站。 在使用 Elementor 作为自定义网站的工具时，您可以充分发挥创意。 粘性标题和菜单是指网站内的功能。 当您从移动设备或 PC 浏览网站时，当标题位于页面顶部时开始滚动。 但是，当您开始向下滚动时，标题会缩小并以略有不同的格式固定在页面顶部。

此功能的惊人之处在于它使您的网站看起来非常酷。 当访问者开始在您的网站上滚动时，您可以对标题的外观进行创意，因此它提供了许多新的探索途径。 此功能可被视为您网站的独特附加功能。 在这篇文章中，我们将展示有关如何使用 Elementor 创建粘性菜单和标题的分步指南。

在此之前，我们假设您熟悉 WordPress 和 Elementor。 您已经拥有一个与 Elementor 兼容的正常运行的 WordPress 网站。 此外，我们还假设您已经在标题菜单中插入了一些基本项目和徽标。 现在我们已经设置了场景，我们将详细介绍如何使用 Elementor 轻松创建 Elementor 粘性标题。

使用 Elementor 创建收缩标题的分步指南


如果您在 WordPress 主题上设置了常规标题，我们将研究如何使此 Elementor 粘性标题缩小的详细信息。 要使 Elementor 粘性标题有效缩小，您必须调整网站的自定义 CSS。 别担心，我们已经支持您了，因为我们将揭示为 Elementor 提供这种粘性标题效果所需的确切代码。

第 1 步：在 Elementor 中编辑标题模板


第一步是使用 Elementor 主题构建器编辑标题。 请采取以下步骤：

  • 登录到您的 WordPress 管理仪表板。
  • 从左侧菜单转到“模板”>>“主题生成器” 。
  • 单击“使用 Elementor 编辑”选项以开始编辑 Elementor 标题。

第 2 步：让您的 CSS 步入正轨


在这一步中，您需要对 CSS 设置进行一些基本的管理。 基本的内务管理将确保您的标题将与您将在以下步骤中放置的 CSS 代码一起使用。 请按照上述步骤操作：

  • 从标题部分打开设置
  • 在布局选项卡中，确保选择 HTML 标签下拉列表作为标题
使您的 CSS 步入正轨


  • 导航到布局选项卡。
  • 确保标题的最小高度为 90 像素。 大小可以稍后更改，但为了更容易理解，从 90px 开始。


使您的 CSS 步入正轨


  • 移至“高级”选项卡并为“标题部分”选择“粘性标题”。

使您的 CSS 步入正轨


  • 接下来，您必须打开包含徽标的图像小部件并导航到“高级”选项卡。
  • 在该部分中，将 Image 的CSS Classes字段设置为徽标图像。


Get-Your-CSS-on-Track-3.1



第 3 步：设置运动效果以创建 Elementor 粘性标题


要激活 Elementor 粘性标题，您可以使用 Elementor 的运动效果功能。 为此，请执行以下步骤：

设置运动效果以创建 Elementor 粘性标题


  • 打开标题部分的设置。
  • 导航到高级选项卡。
  • 打开运动效果设置。
  • 将粘性下拉菜单设置为顶部。
  • 确保Sticky On Box仅包含桌面。 其他设备需要删除，
  • 效果偏移应设置为 90。

4. 第 4 步：添加自定义 CSS：


当我们完成内务处理后，现在我们可以进入细节并将自定义 CSS 代码添加到网站。 我们将展示为 Elementor 免费获取粘性标题效果的基本和高级方法。 如果您使用的是 Elementor 2.9 及更高版本，则可以利用全局样式规则来添加此 CSS。

要添加自定义 CSS，请按照以下步骤操作：

  • 单击位于 Elementor 菜单左上角的汉堡菜单图标。
  • 导航到“全局样式”部分下方的“选择主题样式” 。
  • 从该部分中，选择Select Custom CSS （颜色将从之前的遗传红色变为蓝色）。
  • 然后添加以下CSS 代码。
 header.sticky-header { --header-height: 90px; --opacity: 0.90; --shrink-me: 0.80; --sticky-background-color: #0e41e5; --transition: .3s ease-in-out; transition: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; background-image: none !important; opacity: var(--opacity) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!important; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }
添加自定义 CSS



如果您的 Elementor 不是 2.9 版本，则必须访问标题部分的设置，导航到Advanced >> Custom CSS 。

第 5 步：自定义 CSS


上述步骤将帮助您在 Elementor 上创建一个缩小的粘性标题。 如果您想了解更多有关如何自定义标题的详细信息，您可以查看下面给出的 CSS 代码，以便对标题更具创意。 您可以根据需要更改标题的许多变量并自定义 Elementor 粘性标题。 为了将此 CSS 编辑直接放入 Elementor，我们建议使用代码编辑器。 您可以使用 Visual Studio Code 或 Atom，它们将帮助您轻松放置代码并从中受益。 这些编辑器是免费的，您可以在不同的平台上使用它，例如 Windows、macOS 和 Linux。

下面，我们将说明如何使用 CSS 来自定义 Elementor 缩小标题的效果。 如果自定义属性编辑一次，它将自动更新以匹配整个 CSS 代码。

可以使用总共五个变量来自定义收缩标题。 您不必使用所有变量进行自定义，但您可以选择这样做。 一旦您决定要自定义哪些变量，您就只能自定义这些变量，其余的保持原样。 在下文中，我们将举例说明您可以自定义的变量以及如何进行自定义。

这是五个 CSS 变量，它显示了变量的默认值。

  • --header-height: 90px;
  • -不透明度：0.90；
  • –收缩我：0.80；
  • --sticky-background-color: #0e41e5;
  • – 过渡：300 毫秒缓入缓出；

您会看到这些列在我们的示例代码的顶部——自定义属性是双破折号“-”之后的项目。 您需要做的就是更新冒号之后和分号之前的值。

例如，如果您想将标题高度更改为 100 像素，则其前后的外观如下所示：

  • 之前：--header-height: 90px;
  • 之后：--header-height: 100px;

这些是您可以使用 Elementor 创建粘性标题菜单的方法。 您不仅可以免费创建 Elementor 粘性标题，还可以使用自定义 CSS 自定义标题。 通过此分步指南，您可以清楚地了解如何使用 Elementor 创建缩小的粘性 Elementor 标题和自定义 CSS。

在结束之前，我们想讨论一下使用收缩粘性标题的意义。

使用缩小的粘性标题的好处

眼部舒缓

缩小粘性 Elementor 标题将为您提供更多空间来显示您的内容。 有了更多的空间来显示您的内容，读者在浏览网站时会很舒服。 随着标题的缩小，它为您的内容向读者展示提供了更多空间。 另外，如果您选择了正确的颜色，它也会对网站访问者的眼睛产生一种享受。

访问导航菜单

当网页顶部始终有一个粘性标题时，您的读者可以更轻松地浏览菜单栏上的项目。 如果您的读者阅读了足够多的内容并计划移至您网站的不同页面，那么在页面顶部设置粘性菜单将使他们更轻松地导航到不同的页面。 他们不必一直向上滚动然后转到不同的页面。

标志存在

如果您在页面上保留粘性标题，它将始终显示您的徽标。 您可以减小徽标的大小以使其适合视网膜，但是在读者浏览网站时让徽标的存在非常重要。 例如，读者喜欢一个内容并对该内容进行截图。 如果您的粘性菜单带有徽标，他们将保存带有徽标的屏幕截图。 如果他们在其他地方共享屏幕截图，它仍将包含您的徽标。

外观和感觉

拥有引人注目且设计巧妙的缩小 Elementor 标题将使您的网站具有不同的外观和感觉。 如果您想通过缩小的标题和粘性菜单为网站带来独特的触感，您可以轻松实现。 它展示了您在简单标题后面所做的工作量，并在读者心中留下了良好的印象。

这些是您可以使用 Elementor 创建粘性菜单和标题的方法。 我们希望这是一个简单的分步指南，可以展示在 Elementor 上添加缩小的粘性标题的过程。

如果您喜欢这篇文章，请随时查看我们的博客。