Avada Theme How to Set Mega Super Menu

Mega menu (super menu) is a good-looking and practical design of Avada theme, which can be used as navigation menu and fully reflect the product characteristics. Visitors can see it clearly and intuitively, and it is especially popular with foreign users. It takes some effort and time to make the mega menu. After you fully understand the internal design logic of the wordpress menu, now Lao Wei shares it in this article Avada theme setting mega super menu The detailed graphic process of.

WordPress adds pages for product classification

In order to look good, Lao Wei has specially created three new product categories, products A，products B，products C， All are sub classifications (primary classifications) under the products product. In addition, several basic pages of Foreign Trade English Station have been created, including common home, about us, Services, contact us, etc. Today's focus is on the three product categories of product A~C, and the others are foil.

As shown in the figure below, several common column names of foreign trade websites have been created in [Page], added to the menu structure on the right and sorted. Remember to save them, or they will work for nothing.

WordPress Add Gadget

In Wordpress background>Appearance>Widgets, as shown in the figure below, click add new widget area to add a widget named A, B, and C.

You plan to create several first level product categories. Here are a few gadgets to add.

Later, we will add content to these gadgets.

WordPress Settings Mega Menu

Let's go back to [Menu] [Menu Structure], find the main menu of products, click avada menu options, and start setting the mega menu.

There are mainly three items to be set as follows:

Fusion Mega Menu: on Open;

Mega Menu Wrapper Width: the maximum width of max width or fit content is suitable for content. You can try each one to see the effect, and then make a choice after comparison;

Mega Menu Number of Columns: How many columns do you want to add to the mega menu? Lao Wei has 3 columns here, and can have 6 columns at most.

After setting, remember to go back to the right side of the Menu Structure page and click Save Menu, otherwise this step will be in vain. Every time you change the menu, you should save it. Old Wei will stop talking.

Now let's take a look at the changes of the home menu. As shown in the figure below, the primary menu is arranged horizontally and divided into three columns according to the above settings.

Some students don't like the gray separation line in the middle of the first level menu in the above figure. You can change it to off in avada>options>menu>mega menu>mega menu item divider.

Create image link code

To add an image link to the gadget, we can find a page at random and add a product image. In order to unify the size and look beautiful, it is recommended that the size ps be the same. Upload all 3 product pictures to the "Media Library".

It should be noted that the page is only used to generate image link code, and it is not actually saved. It means "borrowing chicken to make eggs".

There are two ways to insert a picture. Now let's start.

The first method is to add a product picture in the media library on the page. On the right side of the interface for inserting pictures in the media library, you can see the following figure in the drop-down box [Attachment Display Settings]

• Alignment: centered;
• Link to: custom url;
• URL: add the first level product classification link address corresponding to this image, such as your domain name/products/products-a/;
• Size: full size, the original super menu does not need large pictures, so at the beginning, the ps pictures should also be smaller;

Click [Insert to Page]

If your hand is too fast and you forget to set it, you can also follow the second method below.

Click the picture on the page editing page, see the "pencil" icon above and click to enter the picture editing status,

In the image details, the following settings are the same as the first method above.

Next, switch to the [Text] mode of this page and copy these codes, as shown in the following figure.

Add Code to Widget

Go to [Appearance] [Gadget], drag a [Text] from the left side to the added gadget A on the right side, switch the gadget A to the text mode, paste the code, and then switch to the visualization mode. When you see the picture in the center, save it if there is no problem.

The other two gadgets, B and C, are also added like widget A. Add another two product images in turn to the new page, add a link to the first level product classification, copy the code, drag [Text] to the right, switch the text mode, paste, and view.

Add a gadget to the super menu

The next step is to add a gadget to the mega menu.

Let's go back to [Appearance] [Menu], find the first level product category: products A in the menu structure, click [avada menu options], find the mega menu widget area super menu gadget in the pop-up window, and select the added gadget A.

Products B and products C also add gadgets B and C in turn.

Remember to save everything.

Avada Theme Super Menu Effect

Let's take a look at the effect. The following figure shows the effect of the mega menu super menu in this case.

Lao Wei is just giving examples. If you are a foreign trade website, this super menu needs to be carefully crafted. For example, the image processing is not clean, the text size, font, background color, green stripes on the first level menu, what color, spacing, etc., too many things in the main menu and the first level menu need to be slowly adjusted later, Be patient and you will be able to make a beautiful webpage super menu.

That's it Avada theme making mega menu super menu This is a detailed tutorial of graphics and text. Students who are interested in it can follow it. It is mainly to understand the logical relationship of the wordpress menu in the early stage, and then you won't be confused when you read this article.