How to create a standalone WordPress site: Mega Menu

In this section, we will talk about how to use the powerful WP plug-in to create a standalone site owner, dream of super Menu, English called, Mega Menu! Now we really began the first step of cross-border e-commerce foreign trade independent station. Start with the super menu.

preface

As always, when we want to do an independent foreign trade station, we have to first think about their own business model, what is our professional, what we can sell, how much we know about the products we sell. Of course, these do not have to have, when the knowledge to know. The question of selection is not my point. As a tech blogger, it’s still about technology. Clothing, food, shelter, transportation, clothing related content, will always be the majority, is a must, a pair of shoes, a pair of socks, a silk scarf, all have their value. As a teaching example, the topic of fashion and beauty should not be the worst choice. In this section, we’ll use the Flatsome theme to design your own header.

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

Look for header design

Now, I have a shopify top ranking, webinopoly.com/blogs/news/… And www.shopistores.com/top-500-mos… It’s pretty much the same overall. As a teaching case, I chose a website that sells clothes for imitation.

See along while, he, have men’s and women’s clothing, www.beeinspiredclothing.com/

Careful students such as you, browse a few web pages, will also be found, Shopify shopkeepers are super like super menu, the most intuitive feeling is to improve the site force, of course, the most practical or beneficial to SEO index, the current site product sales scope to do a finalize the design. Convenient for customers to find the entrance quickly.

Now let’s see what we’re going to do.

That’s right, that’s right, that’s right. But since we don’t have a designer, the WP add-ons, no matter how awesome they are, can be pretty useless when it comes to the details. We had to settle for the next best thing. Do a spirit like structure, from the overall effect style is not so violate. If you must pursue perfect copy, then I can only say sorry, you have to wait, I will continue the tutorial, starting from the design, through their own code. Step by step to complete the perfect fine replication.

Mega Menu plugin

To implement this super menu, our first step was of course to find a menu plugin that was compatible with our current Flatsome theme. In fact, in the Flatsome theme, the Mega Menu is also supported by default. However, Flatsome itself is not as supportive as the menu itself, so we used third-party plug-ins to extend the menu. If you just want to use the default super menu, you just need to set the options in the menu, as shown in the figure below. Select Full Width for Design, and use UX Block to Design the contents of the super drop-down menu.

Here I refer to a list of super menu plug-ins, athemes.com/collections… You can find one you like. Or just try it. As for how to free access to the trial, you can refer to my previous article [www.toutiao.com/item/698089… Mega Menu, of course, is for reference only.

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

When the installation is complete, this is what it looks like. We need to edit the menu. Before editing, we first set up the product category, which is very important. After all, as an independent e-commerce site, the first way is best to use the product category to navigate.

We need to add one by one, after the completion of the addition, back to the menu options, first in the display selection, find the product category.

Select the main menu and add it. After that, we’ll go back to Groovy Menu and do some simple Settings like,

In this way, the style of the menu is set, and the color font and other content, you can choose freely. After the adjustment, remember that there is a “save” option on the right. Remember to click it and you can see the setting result. After a simple setting, I can see the following content.

Is that close?

Super submenu

Now, we can move on to the real protagonists. The main module of super menu is the personalized submenu, in which we can directly display our product pictures, our activity theme, our location information, and directly submit forms.

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, and the Pro trial version can also be found on some small websites. Just like the way you find the Flatsome free theme, THIS is just for example reference, not for commercial use. If you want to use it in a real environment, please buy a genuine copy. elementor.com/

After installation, go to Elementor menu Settings and select all Post Types. Note that it supports UX Blocks, which is great because our theme will primarily use UX to create pages.

Next, let’s create a menu block,

We designed the page directly with Elementor, created four columns,

We can add the Nav Menu module in the first column and set the Menu. Mens Frist can be added in the menu options, but when there are too many menu lists, we will split them into two menus, such as,

In the select style, we can set the font size, the activation style of the menu, and so on, as shown in the picture below. The same is true for the menu in the second column.

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

So, the end result of our setup is,

Isn’t it? It’s very much in line with our goals. There are a few details, though, such as fonts, Hover’s activation mode, picture text mode. But the impact has not been great, after all, every product, there must be some unique style. And we’re just using the UI to set it up, so we haven’t written a single word of code.

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

This afterword.

Starting with this article, the graphic tutorial will most likely move into the direction of larger granularity, with the main emphasis on the selection and introduction of tools. I will create a final result and explain some key configurations. There’s no need to go into detail. Because in the actual combat, only the students who have operated it can understand, after setting up and multiple attempts, they can understand that those can be achieved, and those are not possible to achieve. What I insist is to practice the design without touching the code. The purpose was also to explore where WP’s code-free upper limits might be.

For example, in this super menu, I planned to imitate the same submenu as Shopify, but when setting the selection effects, I didn’t have enough options and couldn’t add to the selection effects. For example, in the Call to Action component, I can’t change the button style to hyperlink. Or instead of this, use images + hyperlinks. But it failed because of problems with altitude adjustment. When menu navigation is presented on the mobile end, the effect is not satisfactory.

Although part of it can be displayed, the second column is missing. When I pull it down, the effect is lost again. And so on and so forth.

Of course, my real goal is not to solve it. It’s not that it can’t be fixed. Just to explore where the upper limits of componentized design are today. Everything we do is programming for No Code. That is, creators don’t need to understand programming, just how to make products. Better to share their product sales to more people. That’s it.

Ok, no more nonsense, the menu article so pass, the future has a better plan, I will continue to update. If you have any questions, please leave a comment. I will update the answers in a recent post.

Next, we’ll explore how to design your home page. Stay tuned!