In 2021, WordPress will teach you how to create a standalone site — Mega Menu

In this section, we’ll show you how to use WP’s powerful plugin to create a standalone site owner’s dream super Menu, called Mega Menu! Now we are really beginning the first step of cross-border e-commerce foreign trade independent station. Start with the super menu.

preface

As always, when we want to set up an independent foreign trade station, we have to think clearly about our business model, what our major is, what we can sell, and how much we know about the products we sell. Of course these do not have to have, when the knowledge to know. The selection question is not my point. As a tech blogger, I will still focus on technology. Clothes, food, shelter and transportation, clothing related content, will always be the majority, is a must, a pair of shoes, a pair of socks, a piece of silk scarf, have its value. As a pedagogical example, it’s probably not the worst choice to start with the theme of beautiful fashion. In this article, we will focus on using the FlatSome theme to design your own header section.

As an independent site buyer starting from scratch, perhaps the best way for us is to use Shopify, use the template already provided by others, or directly enter such platforms as Shaoxiapi, Dunhuang, and Wish. However, when we choose Woo, it means that we firmly control the product in our own hands first. Unwilling to pay the expensive platform service fee, more than a month of platform settlement. So let’s start building now.

Look for the header design

Now, I have a shopify top ranking, https://webinopoly.com/blogs/… And https://www.shopistores.com/t… All of them look pretty much the same. As a teaching case, I chose a website selling clothes to imitate.

See along while, he, have men’s and women’s clothing, https://www.beeinspiredclothi…

The shopkeepers of Shopify are all very keen on the super menu. The most intuitive feeling is that it has improved the pretend bility of the website. Of course, the most practical index is conducive to SEO, which has made a design of the current product sales range of the website. Convenient customers to find the entrance quickly.

Now let’s look at what we’re trying to achieve.

Yeah, yeah, that’s what it looks like. However, since we don’t have a designer, the WP plugin is great, but when it comes to handling the details, it can be quite useless. We had to settle for the next best. Do a spirit similar structure, from the overall effect of the style is not so inconsistent. If you must pursue perfect copy, then I can only say sorry, you have to wait, I will continue to give a tutorial, from the design, through their own code. Step by step to complete the perfect fine copy.

Mega Menu plugin

To implement this super menu, our first step is of course to find a menu plugin that is compatible with our current FlatSome theme. In fact, in the FlatSome theme, the Mega Menu Menu is also supported by default. However, as for the styling of the menu itself, Flatsome’s option support is not so friendly, so we used third-party plugins to extend it. If you just want to use the default super menu, you just need to set it in the menu option, as shown in the figure below. Select “Design Full Width” and the contents of the super drop-down menu, then you need to use UX Block to Design.

Here I quote a super menu plugin list, https://athemes.com/collectio… You can find one you like. Or just try it. As for how to free access to the trial, you can refer to my last article “https://www.toutiao.com/item/…” Inside the way, the free template website should be able to find. In this tutorial, we’ll use Groovy Mega Menu for reference only.

The first step, of course, is to install the plug-in. Once you’re done, take a few simple steps to set it up. The first step is to find the Integration option in the Groovy Menu menu, as shown in the figure below, for a menu-compatible installation of FlatSome.

Once installed, this is what it looks like. We need to edit the menu, before editing, we first set the product classification, which is very important, after all, as an independent e-commerce station, the first way is best to use the product classification to do the navigation,

Everyone according to the need, one by one can be added, after the completion of the addition, back to the menu options, first in the display selection, find product classification.

Select the main menu and add it. From there, let’s go back to the Groovy Menu and make some simple Settings, such as,

In this way, the arrangement style of the menu is set, as well as the color font and other contents, you can choose freely. After the adjustment is completed, remember that there is a save option on the right side, remember to click it, and you can see the setting result. I simply set it, and you can see the following content.

Is that close?

Super submenu

Now, we can get to the real protagonist. The main module of the super menu is the personalized sub-menu, in which we can directly display our product pictures, our activity theme, our location information, and submit forms directly.

To create the submenu, we need to install Elementor, one of WP’s most popular editing plug-ins, and its Pro version. The free starter version can be searched directly in the plugin library, the pro trial version, and the same can be found on some small websites. Just like finding the Flatsome free themes, I’m here for sample reference and trial, not for commercial use. If you are using it in a real environment, please buy a genuine copy. https://elementor.com/

After installation, go to Settings on the Elementor menu and select all Post Types. Note that it supports UX Blocks, which would be great, since our theme will mostly use UX to create the page.

Next, let’s create a menu block,

We directly designed the page using elementor, creating four columns,

We can add the Nav Menu module in the first column and set the Menu. For Mens Frist, it can be added in the menu option, but when the menu list is too much, we divide it into two menus, such as,

In the selection style, we can set the font size and the activation style of the menu, as shown in the following figure. The menu in the second column is also set.

In the third and fourth columns, set the image and button, and the component is Call to Action.

So, what we’re going to end up doing is,

Isn’t it? It’s very much in line with our goals. Although there are some details, such as fonts, hover activation mode, image text mode. But the influence is not big, after all, every product, there should be some unique style. And we’re just setting it up with the UI, we haven’t written a single word of code.

There’s also a WEMENS submenu in the back, so I’ll leave it up to you to add it, but I won’t show it here.

This afterword.

From the beginning of this article, the tutorial will probably focus on the direction of granularity, with the main focus on tool selection and introduction. I’ll do this to create a final look and explain some of the key configurations. There’s no need to micromanage. Because in actual combat, only the students who have operated can understand, after setting up and trying many ways, they can understand that what can be realized and what can not be realized. What I insist on is practicing the design without touching the code. For this purpose, it is also to explore where the upper limit of WP is in the absence of code.

For example, in this super menu, I originally planned to imitate a sub-menu similar to Shopify, but when setting the selection effect, there were not enough options, and I could not increase the effect of the options. For example, in the Call to Action component, I can’t change the style of the button to a hyperlink. Or instead, use images and hyperlinks. But it still failed because of problems with altitude adjustment. When the menu navigation is presented on the phone, the results are less than satisfactory.

Although part of it is displayed, the second column is missing. When you pull it down, it’s lost again. And so on and so forth.

Of course, my real goal is not to solve it. Not that it can’t be solved. It’s just a question of where are the limits of componentized design today. Everything we do, we do for no code programming. That is, creators don’t need to understand programming, they need to understand how to create products. Better to share their own product promotion and sales with more people. That’s all.

All right, without more nonsense, the menu article is so over, there is a better plan in the future, I will keep updating. If you have any questions, please leave a message. I will update my answers in an upcoming article.

In the next article, we will explore how to do a good home page design. Stay tuned!