2021年，Wordpress教你做独立站-Mega Menu

本节我们来聊聊如何在帮助下做独立站WP 强大的插件。 Lord，梦寐以求的超级菜单，英文叫Mega Menu！现在我们真正开始了独立跨境电商外贸站的第一步。从超级菜单开始。

前言

一如既往，我们想做一个独立的外贸站，首先要考虑我们的商业模式，我们的专业是什么，我们能卖什么，我们对我们卖的产品了解多少。当然，这些不必存在，因为知识必须是已知的。产品选择的问题不是我的重点。作为一个技术博主，我还是会专注于技术。衣食住行，与衣有关的内容，永远是大多数，是必须的，一双鞋，一双袜子，一条丝巾，都有它的价值。作为教学示例，以时尚服装为主题并不是最糟糕的选择。所以在本文中，我们将重点介绍使用 Flatsome 主题来设计我们自己的页眉。

作为一个白手起家的独立网站买手，也许我们最好的方式是使用Shopify，使用别人已经提供的好的模板，或者直接去小皮、敦煌、Wish等平台。但是，当我们选择Woo，就意味着我们首先牢牢控制了自己手中的产品，不愿意支付昂贵的平台服务费，也就是一个多月的平台结算。所以让我们现在开始构建。

寻找页眉设计

现在，我有一个shopify的顶级排行榜，https://webinopoly.com/blogs/news /top- 100-most-successful-shopify-stores 看起来与整体相似。作为教学案例，我选择了一个卖衣服的网站来模仿。

看了半天，是他，有男装女装，src="http://p0.qhimg.com/t0185e843b447641df8.jpg?size=1200x276"/>

没错，就是这样。但是，由于我们没有设计师，WP插件再厉害，在处理细节时也无能为力。我们必须退到第二位。做一个看起来像神的结构，从整体效果风格上不要那么不一致。如果一定要追求完美的副本，那我只能说抱歉了，你要等一会，我以后会继续发教程，从设计开始，我用的是自己的代码。一步步完成完美精致的副本。

Super Menu Mega Menu Plugin

为了实现这个超级菜单，我们第一步当然是找一个和我们现在的Flatsome兼容的菜单插件主题 。事实上，在 Flatsome 主题中，Mega Menu 菜单也是默认支持的。但是对于菜单本身的风格，Flatsome 的选项支持不是那么友好，所以我们使用第三方插件来扩展。如果只想使用默认的超级菜单，只需要设置菜单中的选项即可，如下图，Design选择Full width，超级下拉菜单的内容需要使用UX设计堵塞。

这里我引用了一个插件列表超级菜单，https://athemes.com/collections/best-wordpress-menu-plugins 你可以找到你喜欢的。或者只是试一试。至于如何获得免费试用，可以参考我上一篇文章【Mega Menu，当然，仅供参考。

当然，第一步是安装插件。完成后，执行几个简单的步骤。首先是在Groovy菜单中找到Integration选项，如下图，安装Flatsome菜单兼容。

安装完成后是这个样子。我们需要编辑菜单。在编辑之前，让我们设置产品类别。这个非常重要。毕竟作为一个独立的电商网站，导航的第一种方式是使用产品类别。

< img src="http://p0.qhimg.com/t01a13a65410f913074.jpg?size= 640x287"/>

您可以根据需要一一添加。添加完成后，返回菜单选项，在显示选择中，首先找到产品类别。

选择主菜单并添加。之后我们会回到Groovy Menu进行简单的设置，例如

< /p >

这样设置菜单的样式，如以及彩色字体等内容，大家可以自由选择。调整完成后记得右边有个保存选项。记得点击查看设置结果。我简单设置一下就可以看到如下内容，

很近吗？

超级子菜单

现在，我们可以进入真正的主角了。超级菜单的主要模块是个性化的子菜单。我们可以直接在子菜单中展示我们的产品图片、我们的活动主题、我们的位置信息，并直接提交表单。

在创建子菜单之前，我们需要安装 Elementor，WP 最受欢迎的编辑插件之一，及其 Pro 版本。免费的入门版可以直接在插件库中搜索，试用版的pro，同样的，你可以在一些小网站上自己找到。找到 Flatsome 免费主题的方法是一样的。我仅作为示例参考，不用于商业用途。 .如果在真实环境中使用，请购买正版。 https://elementor.com/