如何使用Elementor在WordPress中添加顶级栏

顶级栏提供了一种有效的方法来突出重要的消息，促销和对WordPress上的行动。它位于网页的顶部，目的是吸引访问者的注意力而不会阻碍用户的浏览体验。

精心设计的顶级酒吧可以大大提高转化措施，因为它可以立即吸引访客的注意力，并指导他们采取诸如报名新闻通讯，获取限时报价和探索新内容之类的行动。 它可以作为持续的提醒而无需打扰用户。

对于Elementor，将顶级条添加到WordPress非常简单。在本文中，我们将介绍如何在WordPress中使用Elementor添加顶级栏。与我们在一起直到最后。

什么是顶级酒吧？

顶部栏是一个狭窄的水平部分，该部分显示在主标题上方的网站顶部。与弹出窗口或横幅不同，它用于展示联系方式，链接描述，重要公告，促销优惠和消息。您可以通过广泛的自定义（例如颜色，字体和特定品牌的按钮）来增强用户参与度。

顶级栏并不总是显示在24/7网站的顶部。相反，它通常在竞选期间出现出于促销目的。它由不同的名称定义，具体取决于其用例。我们将在下一节中进行讨论。继续阅读。

网站上的顶级酒吧是什么？

正如一分钟前所说，网站上的顶级栏是根据其目的和功能来定义的。看看下面列出的顶级栏的一些常见术语。

• 公告栏 -用于共享公告，事件通知和重要更新。

• 通知栏 -显示限时报价，系统维护新闻和紧急消息。

• 促销栏 -突出显示特殊促销活动，独家折扣和广告系列以提高销售额。

• 信息栏 -展示联系电话，购物详细信息，当地地址和营业时间。

• 粘性条 -即使用户滚动帖子和页面，也可以固定在网站的顶部。

• 浮子栏 -滚动帖子和页面时移动以确保明显的存在。

如何使用Elementor在WordPress中添加顶级栏

理论部分结束了。现在，我们将介绍本节中的教程部分，并解释了如何使用Elementor中的WordPress添加顶级栏的分步指南。

先决条件：安装Elementor或Happyaddons

要在整个网站上创建顶级栏，您必须可以访问Elementor主题构建器，这是高级功能。如果您想使用插件的高级版本并正在寻找免费选项，则必须尝试HappyAddons插件。

HappyAddons实际上是Elementor插件的插件，其许多免费功能通常在Elementor中很高。例如，HappyAddons也有一个主题构建器，它与Elementor非常相似，但完全免费使用。

因此，在本节中，我们将使用HappyAddons插件来解释本教程。在您的网站上安装并激活以下插件。

• Elementor
• Happyaddons

在您的网站上安装并激活它们后，开始遵循下面解释的教程。我们将向您展示如何在WordPress上创建顶级栏，就像您在下图中看到的那样。

步骤01：转到Happyaddons主题建造者

导航到HappyAddons>主题构建器。像Elementor插件一样，您可以使用HappyAddons插件的主题构建器创建标题，页脚，博客文章模板和存档页面。

步骤02：转到标题部分

当顶部栏显示在网络标头顶部的顶部时，您必须从“标头”部分自定义它。因此，使用Elementor选项打开标题。

了解如何在Elementor中创建外面的内容。

步骤03：在标题上方添加一个新容器

将您的光标悬停在标题上，将显示加号（+）图标。单击此图标将使您可以在上面的标头中添加一个新容器。做到。

步骤04：自定义顶部栏并添加内容

您必须在顶栏的背景中添加对比色的颜色。为此，请单击“容器”上的六点图标>转到“样式”选项卡>找到颜色选项>选择颜色。

将文本编辑器小部件添加到顶级条形部分。这将使您可以在本节中添加文本内容。

在右侧栏上的文本编辑器下，您可以编写所需的文本内容，这些内容将实时显示在顶部栏上。

从“文本编辑器”部分下的下面标记的选项中，您可以更改已添加到顶部栏的文本的颜色和大胆性。

您甚至可以在单词之间添加空间并强调某些单词。我们已经对本教程的文本做了这一点。您可以在下面看到它们。

HappyAddons允许您在顶级栏的背景中添加粒子效果。快乐的粒子效应是一种视觉动画技术，在网页上，小型发光的粒子动态移动，创造活泼而引人入胜的用户体验。

要添加此信息，请导航到样式>快乐粒子效果。之后，将切换到启用粒子背景。

接下来，您可以选择粒子样式，粒子，不透明度，颗粒数，粒度和移动速度。希望你能自己做。

我们添加了一个简短的剪辑，因此您可以检查快乐粒子功能的工作原理。这确实使顶部的酒吧看起来很不错。

扩展边界部分。您可以根据需要设置边框宽度和颜色。但是，我们认为添加边框对顶级栏并不重要。因此，您可以避免它。

现在，扩展形状分隔部分。 Shape Divider选项使您可以在各节的顶部或底部添加可自定义和动态的形状。

但是，此选项对于顶级栏也不重要。因此，最好避免它。但是，如果您想将此功能添加到顶级栏中，则可以做到。

这是有关如何使用Elementor创建信息图网页的指南。

步骤05：配置顶级栏的高级设置

最后，来到高级选项卡。您将在这里获得许多选择，以自定义边距，填充，订单，订单，位置，身高，运动效果，响应能力等等。自己进行必要的自定义。

步骤06：在设备类型上隐藏顶部栏

您可以在所需的任何设备上隐藏顶部栏。例如，我们想隐藏平板电脑设备上的顶部栏。为此，扩展响应部分。然后，切换要隐藏顶部栏的设备模式的选项。

步骤07：使顶部栏移动响应能力

单击Elementor面板的页脚上的响应模式选项。然后，选择移动肖像模式。

您会看到，顶级栏内容以三行出现，并且与在桌面模式下看到的方式不同，并且不是完全对齐。

为了使文本看起来很适合屏幕尺寸，请在移动肖像模式下执行所需的自定义。

我们已经将文本中心对齐。现在看起来好吗？您可以以任何想要的方式对其进行定制。

步骤08：发布/更新更改

完成所有自定义时，请单击Elementor面板底部的发布/更新按钮，以保留所有更改。

探索如何使用Elementor在WordPress中创建一个Lightbox。

步骤09：预览网站上的顶级栏

现在，来到您网站的前端。您会看到顶部的顶部显示在您的网站顶部。

因此，您可以免费使用Elementor插件在WordPress上轻松创建顶级条。

最后的想法

希望您喜欢这个教程。但是，要从顶级栏中获得最好的东西，您必须仔细遵循几件关键的事情。专注于保持与网站品牌相吻合的干净和视觉上吸引人的设计。选择对比色的颜色，以实现可读性，使用清晰而简洁的文本，并使信息与您的受众相关。

此外，对移动响应性进行优化，因此顶部栏在所有设备中都保持功能，而不会阻碍用户体验。避免将顶部栏过多的信息超载，因为它会压倒访问者。如果使用动画或效果，请保持其微妙以保持专业精神。

如果您仍然有任何混乱或疑问，请通过下面的评论框让我们知道它们。