2021 年 Wordpress 手把手教你做个独立站——超级菜单 Mega Menu

本节咱们来讲讲如何借助 WP 弱小的插件来制作一个独立站主，梦寐以求的超级菜单，英文叫做，Mega Menu！当初咱们才真正的开始跨境电商外贸独立站的第一步。从超级菜单开始。

前言

判若两人，当咱们想做个外贸独立站的时候，咱们得先想分明本人的商业模式，咱们的业余是什么，咱们能够销售什么，咱们对所销售的产品有多少理解。当然这些不肯定要有，当常识得晓得。对于选品问题不是我的重点。作为一个技术博主，还是会以技术为主。衣食住行，衣服相干的内容，总会是大多数，是必须品，一双鞋，一双袜子，一块丝巾，都有其价值。作为教学示例，用时尚美衣为主题切入，应该不是一个最差的抉择。那么本篇，咱们来主讲应用 Flatsome 主题来设计属于本人的页头局部。

作为一个从零开始的独立站买家，兴许咱们最好的形式是去应用 Shopify，应用他人曾经提供好的模板，又或者去虾皮，敦煌，Wish 这些平台间接入驻，但，当咱们抉择 Woo 的时候，就意味着，咱们先把产品牢牢地把控在本人的手中，不违心去缴纳低廉平台服务费，超过个把月的平台结算。那么咱们当初就开始搭建吧。

寻找页头设计

当初，我有一个 shopify 排名靠前的的排行榜，
https://webinopoly.com/blogs/… 和 https://www.shopistores.com/t… 整体看下来，都差不多。作为教学案例，我抉择了一个卖衣服的网站进行模拟。

看了半天，就他了，有男装和女装，
https://www.beeinspiredclothi…

仔细的同学如你，多浏览几个网页，也肯定会有所发现，Shopify 的店主都超喜爱超级菜单，最直观的感触是一下子进步了网站的逼格，当然最实用的还是利于 SEO 的索引，将以后网站的产品销售范畴做了一个定型。不便客户快捷地找到入口。

当初咱们来看看，咱们要实现的成果。

对没错，就是这个样子。不过因为咱们没有设计师，WP 插件再怎么牛掰，但在解决细节的时候，也会显得无能为力。咱们只得退而求其次。做一个神似的构造，从整体成果格调上不那么违和。如果肯定要谋求完满 copy，那我只能说道歉，你要等一等了，我前面会继续出教程，从设计讲起，通过本人撸代码。一步步地实现完满精细化复制。

超级菜单 Mega Menu 插件

为了实现这个超级菜单，咱们第一步当然是去找一款兼容咱们以后 Flatsome 主题的菜单插件。其实，在 Flatsome 主题中，也是默认反对的 Mega Menu 菜单的。但对于菜单自身的款式，Flatsome 自身的选项反对力度上并不是那么敌对，所以咱们采纳第三方插件进行扩大。如果只是想应用默认的超级菜单，只须要在菜单中的选项设置一下即可，如下图，Design 抉择 Full width，超级下拉菜单的内容，则须要应用 UX Block 来设计。

这边我援用一个超级菜单的插件列表，
https://athemes.com/collectio… 大家能够找个本人喜爱的。或者轻易试一试。至于怎么收费获取试用，能够参考我上一篇文章【https://www.toutiao.com/item/…】外面的形式，收费的模板网站应该都能够找到。本篇教程，咱们应用，Groovy Mega Menu 当然也仅供参考。

当然第一步是装置插件，实现后，进行简略的几步设置。首先是在 Groovy menu 的菜单找到 Integration 的选项，如下图，进行 Flatsome 的菜单兼容装置。

装置实现后，就是这个样子了。咱们须要编辑一下菜单，编辑前，咱们先去设置一下产品分类，这很重要，毕竟作为一个电商独立站，首要的方法最好是用产品分类来做导航，

大家依据须要，一个个的增加即可，增加实现后，回到菜单选项中，先在显示抉择中，找到产品分类。

抉择主菜单，增加进去即可。尔后，咱们再回到 Groovy Menu 中进行简略设置，比方，

这样对菜单的整顿格调进行设置，还有色彩字体等内容，大家能够进行自由选择。调整实现后，记得右侧有个保留的选项，记得点一下，即可看到设置后果，我简略的设置一下，能够看到如下内容，

是不是很靠近了？

超级子菜单

当初，咱们能够进入真正的配角了。超级菜单的次要模块，就是个性化子菜单，咱们能够间接在子菜单中展现咱们的产品图片，咱们的流动主题，咱们的地位信息，还能够间接提交表单等。

创立子菜单前，咱们须要装置 WP 最为风行的编辑插件之一 Elementor，及其 Pro 版。收费入门版能够间接在插件库中搜寻，pro 的试用版，同理，能够在某些小网站上自行寻找，和找 Flatsome 收费主题的方法一样，我这边仅作示例参考试用，不作为商业用途。如果你在实在的环境中应用，请购买正版。https://elementor.com/

装置之后，先去 Elementor 菜单的 Settings 中，将 Post Types 全副选上。留神一下，它是反对 UX Blocks 的，这会十分赞，因为咱们的主题次要会应用 UX 来制作页面。

下一步，咱们去创立一个菜单块，

咱们间接应用 elementor 进行页面设计，创立四列，

咱们能够在第一列中增加 Nav Menu 模块，并设置菜单。对于 Mens Frist，能够在菜单选项进行增加，但菜单列表过多的时候，咱们给宰割成为两个菜单，如，

在抉择款式外面，咱们能够设置字体的大小，以及菜单的激活款式等，如下图，第二列的菜单也是一样的设置。

在第三列和第四列，设置图片和按钮，组件是 Call to Action。

如此，咱们设置的最终成果就是，

是不是，曾经和咱们的指标十分统一了。尽管还有一些细节，比方字体，hover 的激活模式，图片文字模式。但影响曾经不大了，毕竟每个产品，都要有一些独特的格调。况且咱们只是用 UI 进行设置，一句话的代码都没有写呢。

前面还有个 Wemens 的子菜单，就留着大家去增加了，我这边就不演示了。

本篇后记

从本篇开始，图文教程前面大概率会往大的颗粒度方向上解说，次要重点会放在工具的抉择和介绍。我会操作制作出一个最终的成果，并阐明一些关键性配置。没有必要事无巨细。因为实战中，只有操作过的同学才了解，设置和多方尝试之后，才明确，那些是能够实现的，那些是没有方法实现的。我所保持的是，不碰代码的去实际设计内容。这一目标，也是为了摸索 WP 在无代码的状况下的下限在哪儿。

比方，这篇超级菜单中，我原打算是模拟个和 Shopify 一样的子菜单，然而奈何在设置抉择成果的时候，选项不够用，也没方法对选项的成果进行减少。比方，Call to Action 的组件中，我没方法把按钮的款式，改成超链接。或者不必这个，应用图片 + 超链接的模式。然而还是失败了，因为遇到高度调整艰难等问题。当菜单的导航在手机端出现的时候，成果又差强人意。

尽管能够显示一部分，然而第二列却失落了。下拉的时候，成果又失落了。等等，诸如此类问题。

当然，我的真正目标并不是去解决它。也不是说解决不了。只是去探讨当下组件化的设计的下限在哪儿。咱们所做的所有，都是为了 no code 编程。即，创造者不须要了解编程，只须要了解如何去发明产品。更好的把自家的产品推广销售分享给更多人。仅此而已。

好了，废话不多说，菜单篇先这样过了，将来有更好的计划，我会继续更新。如有问题，欢送留言。我会在最新的一篇文章中进行更新解答。

下一篇，咱们来摸索如何做好首页的设计。敬请期待！