如何使用 Elementor 创建透明页眉?

已发表: 2022-03-01

透明标题是改善网站外观的好方法。 它使您的网站设计脱颖而出,并让您的网站访问者看起来更具互动性。

但是你可以在不了解任何编程语言的情况下使用 Elementor 在 WordPress 上创建一个透明的标题吗? 答案是肯定的! 你绝对可以。 本文将向您展示轻松创建 Elementor 透明标题的说明。

目录
[显示隐藏]
  1. 使用透明标头的优势
    1. 非常适合长网页
    2. 最适合可操作的网站
    3. 提高您的网站导航能力
  2. 如何使用 Elementor Pro 创建透明页眉?
    1. 安装并激活 Elementor Pro 插件
    2. 为您的网站创建菜单
    3. 使用 Elementor Pro 创建普通页眉
    4. 使用 Elementor Pro 创建透明的置顶标题
  3. 如何使用 Elementor 免费创建透明页眉?
    1. 安装并激活 Elementor 插件的 Elementor 和 Essential 插件
    2. 为您的网站创建菜单
    3. 使用 Elementor 的基本插件创建透明的粘性标题
  4. 如何为 Woostify 用户创建透明标题?
  5. 最后的话

使用透明标头的优势

elementor-transparent-header-1

您可以轻松创建引人入胜的 Elementor 透明标题。 但是,如果您愿意,您可以更进一步,在访问者滚动浏览页面内容时将其固定。 以下是优点:

非常适合长网页

使用透明的粘性标题是一种时尚且快速的方式,可确保您的访问者获得愉快的体验。

它们可以帮助您的网站拥有更加用户友好的导航系统。 如果您网站的内容很长,这个好处将非常有益。

最适合可操作的网站

透明的粘性标题最适合可操作的网站,例如零售或电子商务网站。 这是因为您希望访问者仍然在页面内容上时采取特定操作。

当您在浏览您的网站时漂亮地显示标题时,访问者会发现浏览起来更方便。

更重要的是,由于标题是透明的,它不会降低内容的可读性。 因此,添加一个透明的标题可能会降低您网站的跳出率,并有助于有效地引导您的访问者。

提高您的网站导航能力

在您的网站上使用透明的粘性标题可以鼓励您的访问者立即采取行动。 在搜索特定选项时,它可以节省他们的时间。

您无需将品牌徽标放在主页上的任何位置,您可以将其优雅地显示在透明的粘性标题上。

如何使用 Elementor Pro 创建透明页眉?

现在,让我们学习如何使用 Elementor Pro 创建和自定义透明标题。

安装并激活 Elementor Pro 插件

如果您的网站还没有 Elementor Pro,您需要安装并激活它。

  1. 在 WordPress 仪表板中,转到Plugins > Add New
elementor-transparent-header-2
  1. 通过输入“Elementor”找到插件。 然后,您将看到 Elementor Website Builder 作为一个选项列出。
  2. 分别单击立即安装按钮和激活按钮。
  3. 成功购买 Elementor Pro 后,访问 my.elementor.com。
  4. 购买后使用您在电子邮件中获得的信息登录。
  5. 接下来,您将被带到个人资料页面。 单击右上角的下载插件按钮,将 .zip 文件下载到您的计算机。
elementor-transparent-header-3
  1. 在您网站的 WordPress 仪表板中,单击Plugins > Add New 。 然后,单击左上角的上传插件按钮。
  2. 单击选择文件按钮。 选择您刚刚下载的 .zip 文件。 接下来,单击激活
  3. 在站点的仪表板顶部,您会收到一条通知,要求您激活许可证密钥。

为您的网站创建菜单

接下来,如果您还没有这样做,您必须使用 WordPress 仪表板创建一个标题菜单。 以下是入门指南。

  1. 在 WordPress 仪表板中,导航到外观>菜单
elementor-transparent-header-4
  1. 菜单名称文本框中输入菜单名称。 然后,单击创建菜单按钮。
  2. 专注于左侧面板。 在这里,您可以将站点的页面、帖子、类别和自定义链接添加到菜单中。
elementor-transparent-header-5
  1. 您可以拖放菜单项以重新排列它们或在右侧面板上创建子菜单。
elementor-transparent-header-6
  1. 当您满意时,请记住单击“保存菜单”按钮。

使用Elementor Pro创建普通页眉

  1. 从 WordPress 仪表板转到模板 > 添加新的。
elementor-transparent-header-7
  1. 将出现一个弹出窗口。 从下拉菜单中选择 Elementor 标头模板,然后在Name your template文本框中输入其名称。 然后,单击创建模板按钮。
elementor-transparent-header-8
  1. Elementor 模板库将出现在弹出窗口中。 您可以浏览所有 Elementor 标题样式。 一旦你选择了一个收藏夹,将光标移到它,然后单击插入按钮。 您还可以预览所有这些。
elementor-transparent-header-9

使用Elementor Pro创建透明的置顶标题

  1. 现在,您需要使用 Elementor Pro 使标题透明。 为此,请单击标题上方的六点按钮。
elementor-transparent-header-10
  1. 在“布局”部分,在菜单下拉菜单中选择所需的菜单。
elementor-transparent-header-11
  1. 转到样式选项卡以更改标题的背景颜色和透明值。 在“背景”部分,选择经典背景类型(用画笔表示)。
elementor-transparent-header-12
  1. 单击颜色选择器按钮。 然后,选择您想要的颜色和透明值。
  2. 您可以进一步更改页眉的整体外观,包括排版、背景覆盖、边框和分隔线。 随意尝试。
  3. 接下来,转到“高级”选项卡。 然后,滚动到运动效果部分。 启用滚动效果选项。
elementor-transparent-header-13
  1. 效果相对于下拉菜单中选择整个页面选项。
  2. 最后,从粘性下拉菜单中选择顶部选项。
  3. 如果您满意,请单击“发布”按钮以应用更改。

结果将如下所示:

elementor-transparent-header-14

如何使用 Elementor 免费创建透明页眉

如果您预算不足并且不想在 Elementor Pro 上花钱,则需要另一个插件来创建透明标题。

在本文中,我们将使用 Elementor 插件的基本插件。 这是最受欢迎的小部件库,拥有超过一百万的活跃用户。

您将免费获得许多小部件,以使网站脱颖而出并尽可能吸引人。 请注意,您不需要高级版本来创建透明标题。

安装并激活 Elementor 插件的 Elementor 和 Essential 插件

  1. 在 WordPress 仪表板中,转到Plugins > Add New
elementor-transparent-header-15
  1. 通过输入“ Elementor ”找到插件。 然后,您将看到 Elementor 插件作为一个选项列出。
  2. 分别单击“立即安装”按钮和“激活”按钮。
  3. 使用 Elementor 插件的基本插件重复上述过程。

为您的网站创建菜单

我们已经在上面介绍了这一点。 请向上滚动以了解诀窍。

使用Elementor的基本插件创建透明的粘性标题

  1. 导航到Essential Addons > Elements 。 在这里,激活简单菜单小部件。 请记住单击“保存设置”按钮。
elementor-transparent-header-16
  1. 使用 Elementor 创建新页面/帖子或打开现有页面。
  2. 单击左下角的“设置”按钮(由齿轮表示)。 在页面布局下拉菜单中选择“Elementor Canvas”。 这样,您可以摆脱主题附带的标题。
elementor-transparent-header-17
  1. 单击九方形图标返回小部件菜单。 搜索简单菜单小部件。 将其拖放到所需位置。
elementor-transparent-header-18
  1. 在“常规”部分中,在“选择菜单”下拉菜单中选择所需的菜单。
elementor-transparent-header-19
  1. 转到样式选项卡以更改标题的背景颜色和透明值。
elementor-transparent-header-20
  1. 背景部分,选择经典背景类型(由画笔表示)。
  2. 单击颜色选择器按钮。 然后,选择您想要的颜色和透明值。
  3. 您可以进一步更改页眉的整体外观,包括排版、背景覆盖、边框和分隔线。 随意尝试。
  4. 接下来,转到“高级”选项卡。 然后,滚动到定位部分。 在位置下拉菜单中选择固定选项。
elementor-transparent-header-21
  1. 单击九方形图标返回小部件菜单。 搜索Spacer小部件。 将其拖放到Simple Menu小部件的正下方。
elementor-transparent-header-22
  1. Spacer部分,调整Space值以匹配页眉的高度。
elementor-transparent-header-23
  1. 如果您满意,请单击“发布”按钮以应用更改。

如何为 Woostify 用户创建透明标题?

如果您使用 Woositfy 主题,甚至是免费版本,您可以在几分钟内快速为您的整个网站应用漂亮的透明标题。 请按照以下说明了解相关知识:

  1. 从 WordPress 仪表板导航到外观 > 自定义
elementor-transparent-header-24
  1. 然后,转到Layout > Header Transparent
elementor-transparent-header-25
elementor-transparent-header-26
  1. 打开启用透明标题开关。
elementor-transparent-header-27
  1. 在新的常规设计选项卡中,您可以根据需要自定义新的透明标题。 例如,您可以在特定页面上启用/禁用它,例如 404、帖子等,
elementor-transparent-header-28
elementor-transparent-header-29
  1. 当您对结果感到满意时,不要忘记单击“发布”按钮。

最后的话

创建 Elementor 透明标题是帮助用户浏览您的网站的一种时尚方法。

我们创建的标题是完全响应的。 因此,您不必太担心这个问题。 对于那些使用 Woostify 的人,你应该选择第三种方式。 当您想要创建一个漂亮的透明标题时,这也是最简单和最快的方法。