使用Elementor编辑器完善外贸独立站导航菜单的全面指南

在做外贸独立站的时候,我们常常需要添加更多的菜单功能,这样可以让网站的各个页面更紧密地相互链接。虽然我们通常会想到顶部的主导航菜单,但也有人会用页面内的锚文本来进行页面跳转。不过,这种方法在视觉和功能上可能不如导航菜单丰富。

使用Elementor编辑器完善外贸独立站导航菜单的全面指南

为了提供更灵活的设计选项,Elementor编辑器引入了一个很实用的功能——“Nav Menu”。这个工具允许我们根据自己的设计需要自定义子导航菜单。

1、将Elementor编辑器中的“Nav Menu”功能元素添加到内容编辑版块

使用Elementor编辑器完善外贸独立站导航菜单的全面指南

要在Elementor编辑器中添加“Nav Menu”功能,你可以按照以下简单步骤操作:

  1. 在Elementor的元素库中找到“Nav Menu”元素。
  2. 使用鼠标左键点击该元素,并按住不放。
  3. 将鼠标拖动到页面的内容编辑区域。当你看到编辑区域的边框线从灰色虚线变成蓝色虚线时,释放鼠标左键。
  4. 这样,“Nav Menu”元素就成功添加到了内容编辑区。

2、对Elementor编辑器中的“Nav Menu”功能元素进行主体功能设置

使用Elementor编辑器完善外贸独立站导航菜单的全面指南

在Elementor编辑器中设置子菜单时,有几个关键的配置选项需要了解:

  1. 菜单(Menu)
    • 这里你选择子菜单的内容来源。首先,在WordPress的“外观 > 菜单”中创建并命名你的子菜单。完成后,这些菜单就会出现在Elementor的下拉菜单选项中。
  2. 布局(Layout)
    • 你可以选择子菜单的展现形式:水平(Horizontal)、垂直(Vertical)或下拉(Dropdown)。
  3. 对齐(Align)
    • 设置子菜单的对齐方式,包括左对齐、居中、右对齐或两端对齐。
  4. 指针(Pointer)
    • 这是指当鼠标悬停在菜单项上时的效果,如下划线(Underline)、上划线(Overline)、双线(Doubleline)、边框(Framed)、背景(Background)和文本(Text)。选择一个适合你风格的效果。
  5. 动画(Animation)
    • 鼠标悬停时的动态效果。这些动态效果无法截图展示,需要你亲自尝试和体验。
  6. 子菜单指示器(Submenu Indicator)
    • 这个设置用于指示子菜单的存在,但具体的变化可能不太明显。
  7. 断点(Breakpoint)
    • 设置在不同设备(如平板或手机)上的显示断点。当屏幕宽度小于此值时,横向单行的子菜单会变成多行显示。
  8. 全宽(Full Width)
    • 决定在断点之后子菜单是否以整行宽度显示。通常情况下,不推荐使用整行宽度。
  9. 对齐(Align)
    • 再次设置对齐方式,可选择居左(Aside)或居中(Center)。
  10. 切换按钮(Toggle Button)
    • 设置子菜单的显示方式,如无(None)或汉堡菜单(Hamburger)。选择汉堡菜单时,会显示一个图标,点击后弹出子菜单。
  11. 切换对齐(Toggle Align)
    • 设置切换按钮图标的位置,可选择居左、居中或居右。
使用Elementor编辑器完善外贸独立站导航菜单的全面指南

3、对Elementor编辑器中的“Nav Menu”功能元素进行样式设置

  1. “Dropdown”项目配置

在Elementor编辑器中设置下拉菜单(Dropdown)的样式时,你会涉及几个不同的状态和一些具体的样式设置。让我们简化并通俗地解释这些配置:

主菜单的三种状态设置:

  1. 普通状态(NORMAL):菜单在未被交互时的默认显示状态。
  2. 悬停状态(HOVER):鼠标移动到菜单项上时的显示状态。
  3. 活动状态(ACTIVE):菜单项被点击后的显示状态。
使用Elementor编辑器完善外贸独立站导航菜单的全面指南

在这三种状态下,你可以调整以下设置:

  • 文字颜色(Text Color):更改下拉菜单中所有菜单项的文字颜色,包括折叠菜单的图标。
  • 背景颜色(Background):设置菜单项的背景色。在“活动”状态中,你还可以指定点击后菜单的背景色。
  • 排版(Typography):调整菜单文字的字体、大小等排版属性。

下拉菜单的样式:

  • 水平填充(Horizontal Padding):设置菜单项距离左侧的空间。
  • 垂直填充(Vertical Padding):设置菜单项在其所在行的上下边界之间的空间。
  • 行间距(Space Between):设置各行菜单项之间的距离。
  • 边框圆角(Border Radius):设置菜单项边角的圆度,数值越大角越圆。
使用Elementor编辑器完善外贸独立站导航菜单的全面指南

下拉菜单的额外配置:

  • 边框类型(Border Type):设置整个下拉菜单的外边框样式。
  • 影子盒子(Box Shadow):为下拉菜单添加立体的阴影效果,使其更加突出。
  • 分隔器(Divider):在各个菜单项之间添加分隔线。
  • 间隔(Distance):设置菜单项之间的距离。
  1. “Toggle Button”项目配置

在Elementor编辑器中,配置下拉菜单的切换按钮(Toggle Button)涉及到几个简单的视觉设置。这个按钮通常是一个汉堡菜单图标(三条横线),你可以调整它的外观来更好地融入你的网站设计。下面是具体的配置选项:

使用Elementor编辑器完善外贸独立站导航菜单的全面指南
  1. 颜色(Color)
    • 这个设置改变汉堡菜单图标(三条横线)的颜色。
  2. 背景颜色(Background Color)
    • 这是汉堡菜单图标的背景色。选择一个颜色可以让图标更加突出或与网站的整体风格相协调。
  3. 尺寸(Size)
    • 调整汉堡菜单图标的大小,使其与你的网页设计和用户界面的其它元素协调。
  4. 边框宽度(Border Width)
    • 设置图标外边框的粗细。这可以帮助图标更加明显或者更加微妙地融入背景中。
  5. 边框圆角(Border Radius)
    • 调整图标边框的圆角程度。数值越大,角越圆润。例如,设为50将使图标完全变圆,呈现出一个圆形按钮的外观。

结论:

使用Elementor编辑器完善外贸独立站导航菜单的全面指南

使用Elementor编辑器来增强和优化外贸独立站的导航菜单。我们介绍了如何添加和配置“Nav Menu”功能,包括设置子菜单的来源、布局和对齐方式,以及自定义悬停和活动状态下的样式。此外,还探讨了如何配置下拉菜单的各种视觉效果,如背景色、边框和动画效果,以及如何调整切换按钮的大小、颜色和形状,确保导航菜单不仅功能全面,而且视觉上也能与网站的整体设计和风格协调。


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

(0)
上一篇 3天前
下一篇 3天前

相关推荐

发表回复

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

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

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

客服微信
购买我们的托管服务器,享受免费运维!