如果你想给网站设计一个漂亮的菜单,你可以选择几种不同的方法。一种是使用WordPress的默认菜单编辑器,这种方法简单实用。另一种是利用Elementor的导航菜单小部件,这样可以高度定制你的菜单,让它更符合你的需求。
在 WordPress 中创建导航菜单
在WordPress中创建一个导航菜单很简单,首先,登录到WordPress仪表板,然后点击侧栏上的“外观 > 菜单”。找到 并点击create a new menu,在页面你会看到一个输入框,用于输入你想要的新菜单的名称。输入名称后,点击蓝色的“创建菜单”按钮,就可以开始添加你的菜单项了。
2. 添加和自定义导航菜单
在页面一侧,应该看到包含页面、帖子、自定义链接和类别的下拉菜单可供选择。
在WordPress中向导航菜单添加页面非常直接。首先,确保你在“菜单”页面上点击了“查看全部”选项卡来浏览所有可用的页面。如果页面较多,可以使用“搜索”功能快速找到所需页面。选中你想要添加的页面旁的复选框,然后点击“添加到菜单”。
添加了几个页面到菜单后,你可以进一步自定义每个菜单项。点击菜单结构中每个项目旁边的箭头,你将看到以下选项:
- 导航标签:这是菜单中显示的链接名称,如“商店”、“图库”和“关于”。
- 标题属性:这是鼠标悬停在菜单项上时显示的提示文本,可以提供更多信息或说明。
- 在新窗口中打开链接:通常,除非链接到外部网站,否则不建议勾选此项。
- CSS类:这里可以添加CSS类来自定义样式,比如增加填充或加粗文本。
- 链接关系:如果链接指向相关联的第三方网站,这里可以说明关系,比如是合作伙伴、家庭成员网站或自己的另一个网站。
- 描述:如果你的主题支持显示描述,这里可以填写菜单项的简短描述。
3.更改导航菜单结构
当你添加完所有的菜单项后,你还可以进一步优化你的菜单,比如设置子菜单。WordPress允许你创建层级菜单,这意味着你可以设立父菜单项和它们下面的子菜单项。这样,当访问者将鼠标悬停在父菜单项上时,就会显示出其下的子页面。
要调整菜单项的顺序或创建子菜单,你可以通过拖放来操作。具体做法是:如果你想要设置某个菜单项为子菜单,只需将它拖到其对应的父菜单项下方,并稍向右拖动,这样就设置好了子菜单项。这样操作后,你的网站导航会更有层次感,也更易于浏览。
4. 发布你的菜单
在菜单编辑器界面中,点击“管理位置”选项卡。然后,选择你想要设置为新菜单的位置。可选的位置取决于你的网站主题,但一般来说,你可能会看到像“主菜单”或“顶部菜单”这样的选项。勾选对应的框,就可以将你的新菜单设置在这些位置了。这一步骤能帮助你确保菜单出现在网站的合适位置。
你也可以在主菜单页面的底部找到类似的设置选项,它们以复选框的形式呈现。
如果这种方法不适用,你可以尝试另一种方式:前往“外观”>“小部件”区域,然后把新的自定义菜单或导航菜单小部件拖到你希望的位置。这样就可以按照你的需求安排网站的菜单布局了。
Elementor Pro 的导航菜单小部件
为了使用导航菜单小部件,需要安装任意版本的Elementor Pro。如果使用免费版本,则必须坚持使用默认的 WordPress 菜单或使用第三方。
使用 Pro,还可以访问 300 多个模板、主题构建器、WooCommerce 网站和营销弹出窗口、更多网站动画以及专为 WooCommerce 用户提供的额外小部件。
如何在 Elementor 中制作导航菜单
导航菜单小部件非常灵活,功能丰富,可以让你自由地在网站上放置菜单,不仅限于页面顶部或标题区域。你可以将它放置在任何你喜欢的位置,甚至包括在文章中。以下是它的一些主要特点:
- 你可以在网站上任意位置添加多个菜单。
- 轻松添加吸引人的悬停动画效果。
- 支持移动设备响应设计,可以自定义在电脑、平板和手机上的显示方式。
- 可调整的版式、颜色和其他设计元素,让你可以精确控制菜单的外观。
- 提供详尽的填充、间距和对齐选项,确保菜单的每一个细节都完美无瑕。
首先,创建一个默认的 WordPress 菜单。务必遵循上述提示来了解具体操作方法。
如果你的 WordPress 菜单已完成,则可以使用导航菜单小部件将其添加到你的网站。为此,创建或编辑你希望菜单出现的模板(例如header)。在这里,查找导航菜单小部件并将其添加到您想要的位置。
完成后,你的 WordPress 菜单现在可以在 Elementor 中编辑 – 进行自定义了!
1. 布局和动画
在左侧边栏上,应该看到三个选项卡:内容、样式和高级。第一件事(如果尚未完成)是转到“内容”并将“菜单”更改为你要显示的菜单。这可以在预览屏幕中看到它。
在设置菜单的布局时,你可以选择水平布局、垂直布局,或者是隐藏的下拉折叠式菜单。尝试不同的布局选项,你会立刻看到菜单在各种风格下的变化。此外,你还可以调整菜单项的对齐方式,以满足你的设计需求。
在动画方面,你有多种选择来增加菜单的吸引力。这些动画包括下划线、上划线、双划线动画,以及边框动画、背景动画和文本动画。只需点击“指针”下拉菜单选择你喜欢的动画类型,然后点击“动画”查看和选择具体选项。这里你可以看到一些具体的动画效果示例。
子菜单指示器可以帮你修改子菜单箭头图标的显示样式。如果你想进一步自定义子菜单的外观,可以转到“样式”选项卡并点击“下拉菜单”部分进行展开。这里,你可以调整子菜单在正常显示和鼠标悬停状态下的行为,改变文字排版,添加边框、阴影或分隔线,并调整内边距以适应你的设计需求。这样的设置将使你的菜单更具个性和功能性。
2. 颜色和间距
你按照自己喜欢的方式设置了菜单布局,就可以通过颜色和填充调整对其进行更多自定义。转到“样式”选项卡并展开“主菜单”。
在版式设置中,你可以编辑文本的大小、字体和粗细,并可以选择将文本设置为全部大写或小写。此外,你还可以针对不同类型的设备进行单独的样式调整。例如,你可以设置在移动设备上增大文本大小,在桌面设备上改变文本颜色,或者根据你的喜好进行其他任何调整。这些选项让你能够为每种设备提供最佳的浏览体验。
你可以使用“文本颜色”和“指针”选项来定制菜单链接在正常浏览、悬停以及被激活时的颜色。针对这些不同状态,你可以分别调整悬停和活动状态下的样式。
调整间距也很简单且精确,你可以设置文本的填充、字母间距、行高等:
- 行高:调整行的高度,类似于垂直填充,影响文本上方和下方的空间。
- 字母间距:设置字母之间的距离,间距越大,字母之间的空隙越宽。
- 指针宽度:设置悬停或活动状态下线条的粗细。
- 水平填充:这是菜单项之间的空间,或在垂直布局中,菜单项与列边缘之间的空间。
- 垂直填充:在垂直布局中,这是菜单项之间的空间,或列顶部和底部之间的空间。
- Space Between:这个选项可以增加菜单项之间的空间。
- 边框半径:如果你使用背景色,这个设置可以添加圆角效果。
如果你设置了移动设备的断点,你可以为桌面和平板电脑模式设置不同的间距。如果没有,你需要单独编辑移动选项。
最后,在“高级”选项卡中,你可以设置CSS类、调整边距和填充、添加背景图片、更改响应式设置等。编辑这些选项时需要小心,以避免影响网站在移动设备上的表现。
3. 配置移动菜单
导航菜单小部件在“布局”选项卡中提供了一些专门为小尺寸设备优化的设置选项。下面是这些选项的简单说明:
- 断点:设置在何时改变菜单的布局,以便在平板电脑或手机等小屏幕设备上更好地显示。
- 全宽:启用此选项后,移动设备上的菜单会扩展到整个屏幕宽度,而不仅限于原有的导航栏宽度。
- 对齐:可以选择将移动菜单中的链接居中显示,或者让它们靠左或靠右显示。
- 切换:可以选择保留汉堡菜单(三条横线的图标)或在移动设备上完全隐藏它。
- 切换对齐:设置汉堡菜单图标的位置,可选居中、左对齐或右对齐。
在“样式”选项卡中,你还可以找到调整移动菜单切换按钮外观的选项,包括自定义颜色、背景、大小和添加边框等。这些设置帮助你进一步美化和优化移动端的菜单显示。
Elementor 侧边栏底部有一个响应模式选项。它可以让你预览移动菜单在平板电脑和移动设备屏幕上的外观。
总结:
在WordPress中创建自定义导航菜单有多种方式。虽然平台的默认菜单设置简单易用,能够满足基本需求,但如果你发现这些菜单不够灵活或缺少某些功能,那么Elementor的导航菜单小部件可能是更好的选择。使用Elementor,创建和自定义菜单变得非常简单且灵活,拥有广泛的定制可能性。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |