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编程。即，创造者不须要了解编程，只须要了解如何去发明产品。更好的把自家的产品推广销售分享给更多人。仅此而已。

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

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