您是否正在寻找一种方法来创建令人惊叹的菜单来帮助改善网站的 UI/UX? 如果是这样,那么您来对地方了。 在这里,我们整理了一份详细的指南来帮助您。
首先,我们向您展示如何为 WordPress 网站创建菜单的分步演练。 一旦您掌握了窍门,我们将指导您如何使用 Elementor 导航菜单小部件来自定义和增强您的 WordPress 菜单。
目录:
重要的是要知道导航菜单不仅对于为您的网站带来流量很重要,而且对于更好的 SEO 排名也很重要。
事实上,导航菜单主要是为了用户参与而设计的,但这并不是唯一的目的。
第二个最重要的因素是关注“WebCrawler”或机器人的角色,这些机器人旨在抓取网站并将内容索引到相关级别,并向搜索引擎报告以将内容排名在正确的位置。
因此,如果您创建的菜单过于复杂,那么机器人将很难对您的内容进行排名,而且您也会失去访问者。
简而言之,“导航的便捷性”是增强用户体验的关键因素,对于提高网站排名和增加流量也起着至关重要的作用。
这是许多商业网站保留单个导航图标而不是复杂的菜单栏的一个很好的理由,点击菜单栏会加载到全屏菜单。
借助Elementor pro 小部件,您无需使用任何代码即可创建像素完美且极其灵活的菜单栏。
在本教程中,我们将向您演示如何使用Elementor 导航菜单小部件来获取自定义的高级 WordPress 菜单。
在开始使用 Elementor 导航小部件之前,我们先探讨一下如何使用 Elementor 免费版本创建简单的 WordPress 菜单。
现在,要创建 WordPress 菜单,您不需要安装任何特殊的plugin。 默认情况下,WordPress 附带一个易于使用的菜单生成器,它将帮助您为您的网站创建简单的导航菜单。
话虽这么说,您将无权访问菜单的任何自定义选项。 它将采用当前活跃的 WordPress 主题的设计。 但如果这就是您想要的,那么这是为您的 WordPress 网站设置导航菜单的绝佳方法。
首先,您需要登录 WordPress 后端仪表板。
现在,从左侧边栏转到“外观”>“菜单” 。 在这里,您会发现一个两列布局,左侧为“添加菜单项”,右侧为“菜单结构”。
在菜单结构下,您将找到“菜单名称”字段。 这将是我们现在要创建的菜单的名称。 我们将其称为菜单 1。
注意:别担心。 您的读者将无法看到菜单名称。 该功能可帮助您整理所有不同的菜单。
为菜单命名后,单击“创建菜单”按钮使其可用。 现在,您需要添加不同的菜单项。
现在是用菜单项填充新菜单的部分。 在左侧的“添加菜单项”部分下,您将找到可以添加到菜单中的内容的有序列表。
默认情况下,这包含您的任何页面、帖子、登陆页面、自定义链接和类别。
只需使用复选框选择要添加的菜单项,然后单击“添加到菜单”按钮。 这将用您选择的所有菜单项填充您的菜单。
注意:请注意“添加菜单项”下的每个部分都可以选择在“最近” 、 “查看全部”和“搜索”。 如果物品很多,请记住使用这些选项。
添加完所有菜单项后,点击“保存菜单”按钮,然后继续下一步。
您是否知道默认情况下 WordPress 也允许您创建子菜单? 创建子菜单结构时,您有一个父菜单项和一个子菜单项。
当用户将鼠标悬停在父菜单项上时,它将显示隐藏在其下方的所有子菜单项。
很酷吧?
现在要创建子菜单结构,您所要做的就是选择一个想要出现在父菜单上的菜单项。 接下来,将所有想要作为子菜单项的菜单项拖放到其下方。 现在只需将其拖到右侧即可完成!
现在您已经创建了新菜单并添加了子菜单,是时候管理其位置了。
在菜单编辑器的顶部,您应该注意到一个名为“管理位置”的选项。 单击它,应该会显示类似于以下屏幕的内容:
现在,可用的菜单位置将取决于您安装的主题。 在此amp中,我们有一个支持 3 个菜单的主题。
将菜单分配给每个可用菜单位置后,单击“保存更改”即可。
您现在已经了解了 WordPress 默认提供的所有基本菜单功能。 但是,如果您想要更多自定义和功能,请继续阅读以了解 Elementor Pro 导航菜单小部件。
如果您想向 WordPress 网站添加自定义导航菜单,则需要 Elementor Pro 版本。 Elementor Pro 版本附带Elementor 导航小部件以及许多其他特殊功能,例如 300 多个模板、主题生成器、弹出小部件、WooCommerce 小部件和许多其他有趣的功能。
导航菜单小部件本身有哪些具体的关键功能? 这里简单介绍一下。
您需要创建一个基本的 WordPress 菜单,如上所述,然后您将使用 pro-nav-menu 小部件自定义默认的 WordPress 菜单。 创建主列表后,下一步是将其添加到您所需的位置,即标题部分。
现在,完成基本设置后,让我们使用导航菜单小部件自定义菜单。
在设置部分的最上角,有三个可用选项; 内容、风格和高级。
布局部分:您有三个选项:水平、垂直或隐藏的下拉手风琴。
对齐部分:此部分帮助您对齐菜单文本项; 中心、右侧或左侧。
动画部分:此部分将允许您在动画效果下方、上方或双线动画效果下添加动画效果。 您还可以选择框架、背景和微妙的文本动画。
下划线动画如下:
类似的还有加框动画、上划线动画、双线动画、背景动画和文本动画。 他们每个人都提供了自己的一组动画,您可以亲自查看它们以了解您能得到什么。
指针部分:从下拉菜单中选择指针类型。
子菜单指示器部分:Elementor 小部件包含许多子菜单样式选项。 您不仅可以控制菜单的颜色、样式,还可以控制背景。
填充和菜单间距:填充可以快速调整。 您可以更改菜单和子菜单的水平填充、垂直填充、中间空间以及右对齐、左对齐和居中对齐。
Elementor 非常好地处理菜单间距和填充。 他们在幕后努力工作,以确保能够将工具带给开发人员,以便他们可以轻松创建他们正在考虑的设计。
菜单间距提供了很多选项,包括:
颜色背景和版式:借助所需的配色方案和背景颜色,您可以获得定制的品牌外观。 此外,您还可以选择透明或半透明菜单选项。
作为设计师,您可以尽可能多地使用这些选项,并确保根据您的喜好设计背景。
移动设备是网络的重要组成部分,因此 Elementor 开发人员还提供工具,以便您也可以为移动设备创建导航栏。
Elementor 小部件允许您完全控制 WordPress 上的移动菜单选项。 您可以使用一组单独的仅限移动屏幕的设置来控制移动屏幕视图。 Elementor 设置部分底部有一个移动屏幕设置选项,您可以在其中查看移动屏幕选项。
简而言之,Elementor 的移动菜单功能如下:
响应式导航:提供菜单的响应式定位。
菜单是任何网站最重要的功能之一。 因为它可以帮助访问者浏览您的网站,如果您巧妙地创建了一个列表,它将有助于让访问者在您的网站上停留很长时间。 菜单与任何网站的整个布局、页眉和页脚部分同样重要。
因此,菜单小部件必须能够提供您独特的品牌外观和所有基本功能。 Elementor导航小部件具有丰富的功能,允许客户自定义菜单部分以适应您的品牌声音。 现在,您可以在整个网站、登陆页面、标题或您想要显示菜单的任何其他部分使用定制的时尚菜单。
查看评论
您好,感谢您的帖子,如果您有任何疑问,请告诉我,请留言,您是该元素的编辑或您在您的页面上,不要忘记发表评论。 Como puedo solucionarlo? 恩典
你好! 通常,当您的菜单为空或未保存时,就会出现此问题。 请仔细检查 WordPress 菜单侧。
您好,欢迎您向我们咨询您的子菜单或菜单项的自动说明。
谢谢。
你好,抱歉我不完全明白你的问题? 你能具体说明一下吗?
你好,子菜单中的声音是否会出现在分隔线中?
您好,不建议这样做,因为导航阅读起来会非常复杂,在这种情况下最好使用大型菜单样式
菜单 w wersji mobilenej nie otwiera sie。 Jak 可以 utworzyc zeby wyswietlalo sie na telefonach吗?
您好,如果您使用 Elementor 导航小部件,移动菜单会自动显示。 但是您应该在菜单设置中检查一个名为“断点”的设置。 这是菜单切换时的屏幕尺寸。
现在是下一次,我将继续下一步,现在这是下一个主题 Creaton。 Có gì hỗ trợ mình với nhé。
Sziasztok,az miképp old ható meg,hogy egy vertikális menüben az almenüre kattintás után ne zárja ossze a menüt az oldal betöltésekor? 埃普罗
您好,不幸的是这是不可能的,Elementor 导航小部件中没有这样的选项。
再见。 可以在完全可见的情况下使用菜单并查看页面的视觉内容。 Purtroppo tutte le volte che ci ho provato il menuscende ma il colore di menu no renendolo praticamente Illegibile le scritte. 感恩