代码观察者

如何在 WordPress 上创建宽大的移动 Divi 菜单

Rifat Divi Tutorials Sep 26, 2024

使用 Divi 为您的 WordPress 网站创建宽大的移动菜单可以显著增强移动设备上的用户体验。默认的汉堡菜单通常无法满足复杂的导航需求。本文将指导您自定义 Divi 菜单，以创建既实用又美观的全宽移动菜单。我们将探索使用主题构建器、调整菜单模块和应用自定义 CSS 来实现所需的结果。无论是使用子主题还是直接在 Divi 的主题定制器中工作，这些技术都将帮助您制作出与默认 Divi 菜单截然不同的移动友好型导航。

如何在 WordPress 上创建宽大的移动 Divi 菜单

为什么在移动设备上使用宽 Divi 菜单

在当今以移动为先的世界中，优化网站导航以适应移动设备至关重要。虽然带有汉堡图标的默认 Divi 菜单适用于简单的网站，但宽大的移动菜单可以提供以下几个优势：

  1. 提高可见性：宽菜单利用整个屏幕宽度，使得菜单项在小屏幕上更加突出且更易于阅读。
  2. 增强的用户体验：通过一次显示更多选项，用户可以更有效地浏览您的网站，而无需反复打开和关闭紧凑的汉堡菜单。
  3. 定制机会：广泛的移动菜单允许更大程度地定制菜单样式，包括背景颜色、菜单字体大小，甚至合并社交媒体图标。
  4. 品牌一致性：您可以通过自定义移动菜单来匹配您的整体设计，从而在桌面版和移动版上保持您网站的视觉形象。
  5. 减少点击次数：用户无需额外点击即可访问所有主菜单项，从而简化他们在您网站上的旅程。
  6. 多功能性：宽菜单可以容纳更复杂的导航结构，包括超级菜单，这在传统的移动菜单中很难实现。
  7. 独特的设计：自定义菜单使您的网站与使用默认 Divi 菜单的网站区分开来，从而有可能提高用户参与度和保留率。

通过利用 Divi 的主题构建器并应用自定义 CSS，您可以创建一个不仅外观精美而且还能增强 WordPress 网站整体移动用户体验的移动菜单。

如何创建宽大的 Divi 移动菜单

对于熟悉 Divi Theme Builder 教程的人来说，默认标题中缺少的一个常见功能是全屏菜单选项。虽然开发起来很有挑战性，但这个分步教程旨在帮助用户创建引人入胜的全屏菜单体验。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

CodeWatcher 拥有丰富的 Divi 教程，为 Divi 用户经常遇到的问题提供解决方案。请继续关注。

主题构建器标题

为了实现此功能，必须在主题构建器标题模板中使用菜单模块。如果您已经熟悉 Divi 主题构建器，那么您就可以开始了。

fullscreen global header

第一步是导航到 Divi > 主题构建器并添加或编辑标题模板。要在整个网站范围内应用菜单，请使用第一个模板创建全局标题。如果您希望它出现在特定页面上或想要测试它，请创建一个新模板并应用自定义标题。

菜单模块调整

modified styles for the fullscreen Divi menu tutorial 1

进入标题模板后，首先添加单列行并插入菜单模块。虽然菜单模块设置不需要进行强制调整，但建议进行一些调整：

  1. 在“设计”选项卡 > 菜单文本切换下设置文本颜色。
  2. 在“设计”选项卡 > 菜单文本切换中增加文本字体大小，并针对桌面、平板电脑和手机进行调整。
  3. 将文本行高设置为1.2em。
  4. 在“设计”选项卡 > 图标切换中自定义汉堡菜单颜色。
  5. 在“设计”选项卡 > 图标切换中增加汉堡菜单图标的字体大小。

这些调整是可选的，但它们可以帮助您快速实现令人印象深刻的设计。向下滚动查看创建的菜单的屏幕截图 - 它真的很棒！

自定义 CSS 到该部分

现在，我们不再直接向模块添加 CSS 类，而是将自定义 CSS 类应用于蓝色部分。这是上一步中添加菜单模块的同一部分。

将 css 类添加到标题部分以使 Divi 全屏菜单

为此，请打开部分设置，导航到“高级”选项卡，然后展开“自定义 CSS 和 ID”切换。在 CSS 类输入字段中，输入“pa-fullscreen-menu

现在到了最重要的教程部分：免费代码片段！此代码可执行多项功能，因此建议同时参考视频教程和代码注释以全面理解。否则，请随意复制和粘贴代码。

/*align the hamburger menu to the right right*/

.pa-fullscreen-menu .et_pb_menu__wrap {
	justify-content: flex-end !important;
}


/*hide the desktop version of the menu*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
	display: none !important;
}


/*show the mobile version of the menu on desktop*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
	display: block !important;
	align-items: center !important;
}


/*style the opened menu*/

.pa-fullscreen-menu .opened #mobile_menu1 {
	width: 100vw !important;
	position: fixed !important;
	top: 0em !important;
	left: 0vw !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	flex-direction: column !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
	padding: 0 !important;
}


/*style the closed menu*/

.pa-fullscreen-menu .closed #mobile_menu1 {
	background-color: #fff !important;
	text-align: center !important;
	width: 100vw !important;
	position: fixed !important;
	left: 100vw !important;
	top: 0em !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
	opacity: 0 !important;
	visibility: hidden !important;
}


/*remove the bullet points from the list items*/

.pa-fullscreen-menu #mobile_menu1 li {
	list-style: none !important;
	text-align: center !important;
	width: 100%
}


/*move the menu to the top above other elements*/

.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
	z-index: 999999 !important;
}


/*change the opened menu icon*/

.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
	content: "\4d" !important;
}


/*make the hamburger menu fixed position on mobile*/

.pa-fullscreen-menu .opened .mobile_menu_bar {
	position: fixed !important;
}


/*remove the default blue border top on the mobile menu*/

.pa-fullscreen-menu .et_mobile_menu {
	border-top: none;
}


/*remove the default background color on menu items*/

.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*remove the default hover background color and adjust opacity*/

.et_mobile_menu li a:hover {
	background-color: transparent;
	opacity: 1;
}


/*remove the default border bottom on menu items*/

.pa-fullscreen-menu .et_mobile_menu li a {
	border-bottom: none;
}

您可以通过以下系统应用代码 -

  • Divi Assistant 插件：如果使用 Divi Assistant 插件，请将代码粘贴到 Divi Visual Builder 的自定义代码窗口内的 CSS 选项卡中。
  • 子主题：对于使用子主题的用户，请将代码添加到style.css文件中。如果您没有子主题，您可以直接在您的网站上生成一个子主题，也可以下载提供的免费子主题。
  • Divi 主题选项集成：或者，将代码粘贴到 Divi > 主题选项 > 自定义 CSS 代码框中。

您已经完成了！

总结

为您的 Divi WordPress 网站创建宽大的移动菜单可增强移动设备上的用户体验，同时保持网站的美观性。通过利用 Divi 主题构建器、调整菜单模块和应用自定义 CSS，您可以将默认的汉堡菜单转变为全宽导航功能。

这种定制不仅提高了可见性和可访问性，而且还允许更大的设计灵活性，包括社交媒体图标和自定义背景颜色等元素。请记住，成功的关键在于平衡功能与设计。无论您是经验丰富的开发人员还是 Divi 新手，这些技术都可以提供工具来制作在拥挤的数字环境中脱颖而出的移动菜单。

Divi WordPress Theme