如何使用Elementor Pro和WordPress优化网站导航菜单

如果你想给网站设计一个漂亮的菜单,你可以选择几种不同的方法。一种是使用WordPress的默认菜单编辑器,这种方法简单实用。另一种是利用Elementor的导航菜单小部件,这样可以高度定制你的菜单,让它更符合你的需求。

在 WordPress 中创建导航菜单

如何使用Elementor Pro和WordPress优化网站导航菜单

在WordPress中创建一个导航菜单很简单,首先,登录到WordPress仪表板,然后点击侧栏上的“外观 > 菜单”。找到 并点击create a new menu,在页面你会看到一个输入框,用于输入你想要的新菜单的名称。输入名称后,点击蓝色的“创建菜单”按钮,就可以开始添加你的菜单项了。

如何使用Elementor Pro和WordPress优化网站导航菜单

2. 添加和自定义导航菜单

在页面一侧,应该看到包含页面、帖子、自定义链接和类别的下拉菜单可供选择。

如何使用Elementor Pro和WordPress优化网站导航菜单

在WordPress中向导航菜单添加页面非常直接。首先,确保你在“菜单”页面上点击了“查看全部”选项卡来浏览所有可用的页面。如果页面较多,可以使用“搜索”功能快速找到所需页面。选中你想要添加的页面旁的复选框,然后点击“添加到菜单”。

添加了几个页面到菜单后,你可以进一步自定义每个菜单项。点击菜单结构中每个项目旁边的箭头,你将看到以下选项:

  • 导航标签:这是菜单中显示的链接名称,如“商店”、“图库”和“关于”。
  • 标题属性:这是鼠标悬停在菜单项上时显示的提示文本,可以提供更多信息或说明。
  • 在新窗口中打开链接:通常,除非链接到外部网站,否则不建议勾选此项。
  • CSS类:这里可以添加CSS类来自定义样式,比如增加填充或加粗文本。
  • 链接关系:如果链接指向相关联的第三方网站,这里可以说明关系,比如是合作伙伴、家庭成员网站或自己的另一个网站。
  • 描述:如果你的主题支持显示描述,这里可以填写菜单项的简短描述。

3.更改导航菜单结构

当你添加完所有的菜单项后,你还可以进一步优化你的菜单,比如设置子菜单。WordPress允许你创建层级菜单,这意味着你可以设立父菜单项和它们下面的子菜单项。这样,当访问者将鼠标悬停在父菜单项上时,就会显示出其下的子页面。

要调整菜单项的顺序或创建子菜单,你可以通过拖放来操作。具体做法是:如果你想要设置某个菜单项为子菜单,只需将它拖到其对应的父菜单项下方,并稍向右拖动,这样就设置好了子菜单项。这样操作后,你的网站导航会更有层次感,也更易于浏览。

如何使用Elementor Pro和WordPress优化网站导航菜单

4. 发布你的菜单

在菜单编辑器界面中,点击“管理位置”选项卡。然后,选择你想要设置为新菜单的位置。可选的位置取决于你的网站主题,但一般来说,你可能会看到像“主菜单”或“顶部菜单”这样的选项。勾选对应的框,就可以将你的新菜单设置在这些位置了。这一步骤能帮助你确保菜单出现在网站的合适位置。

如何使用Elementor Pro和WordPress优化网站导航菜单

你也可以在主菜单页面的底部找到类似的设置选项,它们以复选框的形式呈现。

如果这种方法不适用,你可以尝试另一种方式:前往“外观”>“小部件”区域,然后把新的自定义菜单或导航菜单小部件拖到你希望的位置。这样就可以按照你的需求安排网站的菜单布局了。

如何使用Elementor Pro和WordPress优化网站导航菜单

Elementor Pro 的导航菜单小部件

为了使用导航菜单小部件,需要安装任意版本的Elementor Pro。如果使用免费版本,则必须坚持使用默认的 WordPress 菜单或使用第三方。

使用 Pro,还可以访问 300 多个模板、主题构建器WooCommerce 网站营销弹出窗口、更多网站动画以及专为 WooCommerce 用户提供的额外小部件。

如何使用Elementor Pro和WordPress优化网站导航菜单

如何在 Elementor 中制作导航菜单

导航菜单小部件非常灵活,功能丰富,可以让你自由地在网站上放置菜单,不仅限于页面顶部或标题区域。你可以将它放置在任何你喜欢的位置,甚至包括在文章中。以下是它的一些主要特点:

  • 你可以在网站上任意位置添加多个菜单。
  • 轻松添加吸引人的悬停动画效果。
  • 支持移动设备响应设计,可以自定义在电脑、平板和手机上的显示方式。
  • 可调整的版式、颜色和其他设计元素,让你可以精确控制菜单的外观。
  • 提供详尽的填充、间距和对齐选项,确保菜单的每一个细节都完美无瑕。
如何使用Elementor Pro和WordPress优化网站导航菜单

首先,创建一个默认的 WordPress 菜单。务必遵循上述提示来了解具体操作方法。

如果你的 WordPress 菜单已完成,则可以使用导航菜单小部件将其添加到你的网站。为此,创建或编辑你希望菜单出现的模板(例如header)。在这里,查找导航菜单小部件并将其添加到您想要的位置。

完成后,你的 WordPress 菜单现在可以在 Elementor 中编辑 – 进行自定义了!

1. 布局和动画

在左侧边栏上,应该看到三个选项卡:内容、样式和高级。第一件事(如果尚未完成)是转到内容”并将“菜单更改为你要显示的菜单。这可以在预览屏幕中看到它。

如何使用Elementor Pro和WordPress优化网站导航菜单

在设置菜单的布局时,你可以选择水平布局、垂直布局,或者是隐藏的下拉折叠式菜单。尝试不同的布局选项,你会立刻看到菜单在各种风格下的变化。此外,你还可以调整菜单项的对齐方式,以满足你的设计需求。

在动画方面,你有多种选择来增加菜单的吸引力。这些动画包括下划线、上划线、双划线动画,以及边框动画、背景动画和文本动画。只需点击“指针”下拉菜单选择你喜欢的动画类型,然后点击“动画”查看和选择具体选项。这里你可以看到一些具体的动画效果示例。

子菜单指示器可以帮你修改子菜单箭头图标的显示样式。如果你想进一步自定义子菜单的外观,可以转到“样式”选项卡并点击“下拉菜单”部分进行展开。这里,你可以调整子菜单在正常显示和鼠标悬停状态下的行为,改变文字排版,添加边框、阴影或分隔线,并调整内边距以适应你的设计需求。这样的设置将使你的菜单更具个性和功能性。

2. 颜色和间距

你按照自己喜欢的方式设置了菜单布局,就可以通过颜色和填充调整对其进行更多自定义。转到样式选项卡并展开主菜单

如何使用Elementor Pro和WordPress优化网站导航菜单


在版式设置中,你可以编辑文本的大小、字体和粗细,并可以选择将文本设置为全部大写或小写。此外,你还可以针对不同类型的设备进行单独的样式调整。例如,你可以设置在移动设备上增大文本大小,在桌面设备上改变文本颜色,或者根据你的喜好进行其他任何调整。这些选项让你能够为每种设备提供最佳的浏览体验。

如何使用Elementor Pro和WordPress优化网站导航菜单

你可以使用“文本颜色”和“指针”选项来定制菜单链接在正常浏览、悬停以及被激活时的颜色。针对这些不同状态,你可以分别调整悬停和活动状态下的样式。

调整间距也很简单且精确,你可以设置文本的填充、字母间距、行高等:

  • 行高:调整行的高度,类似于垂直填充,影响文本上方和下方的空间。
  • 字母间距:设置字母之间的距离,间距越大,字母之间的空隙越宽。
  • 指针宽度:设置悬停或活动状态下线条的粗细。
  • 水平填充:这是菜单项之间的空间,或在垂直布局中,菜单项与列边缘之间的空间。
  • 垂直填充:在垂直布局中,这是菜单项之间的空间,或列顶部和底部之间的空间。
  • Space Between:这个选项可以增加菜单项之间的空间。
  • 边框半径:如果你使用背景色,这个设置可以添加圆角效果。

如果你设置了移动设备的断点,你可以为桌面和平板电脑模式设置不同的间距。如果没有,你需要单独编辑移动选项。

最后,在“高级”选项卡中,你可以设置CSS类、调整边距和填充、添加背景图片、更改响应式设置等。编辑这些选项时需要小心,以避免影响网站在移动设备上的表现。

3. 配置移动菜单

导航菜单小部件在“布局”选项卡中提供了一些专门为小尺寸设备优化的设置选项。下面是这些选项的简单说明:

  • 断点:设置在何时改变菜单的布局,以便在平板电脑或手机等小屏幕设备上更好地显示。
  • 全宽:启用此选项后,移动设备上的菜单会扩展到整个屏幕宽度,而不仅限于原有的导航栏宽度。
  • 对齐:可以选择将移动菜单中的链接居中显示,或者让它们靠左或靠右显示。
  • 切换:可以选择保留汉堡菜单(三条横线的图标)或在移动设备上完全隐藏它。
  • 切换对齐:设置汉堡菜单图标的位置,可选居中、左对齐或右对齐。

在“样式”选项卡中,你还可以找到调整移动菜单切换按钮外观的选项,包括自定义颜色、背景、大小和添加边框等。这些设置帮助你进一步美化和优化移动端的菜单显示。

如何使用Elementor Pro和WordPress优化网站导航菜单

Elementor 侧边栏底部有一个响应模式选项。它可以让你预览移动菜单在平板电脑和移动设备屏幕上的外观。

总结:

在WordPress中创建自定义导航菜单有多种方式。虽然平台的默认菜单设置简单易用,能够满足基本需求,但如果你发现这些菜单不够灵活或缺少某些功能,那么Elementor的导航菜单小部件可能是更好的选择。使用Elementor,创建和自定义菜单变得非常简单且灵活,拥有广泛的定制可能性。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/9737/

(0)
上一篇 2024年 5月 14日 上午11:56
下一篇 2024年 5月 15日 上午10:05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
为方便全球用户注册登录,我们已取消电话登录功能。如遇登录问题,请联系客服协助绑定邮箱。