Our brands

Ves Megamenu

Ves megamenu provides powerful and most advanced menu, we’re going to describe detailed instructions how to use this powerful menu features as our demo site.

For general menu settings, please go to Admin Panel > Ves Megamenu > Menu Management like below image and then follow the below instructions. It shows you how to config:

 

1. Horizontal menu:

Note:
– You can review “Structure Preview” to easy config the module.
– You must press “Update” button after each amendment.

 

Menu item “HOME”

How to config menu item, namely “Home” on back-end :

  1. Enter Name for item menu
  2. Add class “full-width” to fullwidth or Setting width dropdown
  3. Add image in pub/media/wysiwyg/ves_fresh/all/megamenu/icons/ or add class Awesome
  4. Setting Main Content Type: Child menu item
  5. Setting Child Menu Column: 3 columns

 

Menu item “PRODUCTS”

 

How to config menu item, namely “Products” on back-end

– Add Header block width html content:

<div class="pull-left">
 <ul class="links">
  <li>Recommended:</li>
  <li><a href="#">Configurable</a></li>
  <li><a href="#">Galaxy S3</a></li>
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>
<div class="pull-right">
 <ul class="links">
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>

 

– Add left block width: 25% and content:

<img src="{{media url="wysiwyg/ves_fresh/all/megamenu/5.jpg"}}" alt="" width="370" height="320" />
<h4 class="block-title">Featured Category</h4>
<p>This is a custom block ready to display any content. You can add blocks to any category in the catalog...</p>
<br>
<a href="#">View Category <em class="fa fa-angle-double-right"> </em></a>

 

– Add Main content width : 50%

Setting Main Content Type: Child menu item

Setting Child Menu Column: 3 columns

 

– Add Right Block width 25% and widget to content:

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" widget_title="Latest Products" product_source="latest" categories="20" number_item="2" column="1" enable_owlcarousel="1" number_item_percolumn="1" autoplay="1" autoplay_timeout="3000" autoplay_hoverpause="1" nav="1" loop="1" show_name="1" show_price="1" show_review="1" show_image="1" image_width="270" image_height="290"}}</div>

 

– Add Bottom block width html content:

<div class="pull-left">
 <ul class="links">
  <li>Recommended:</li>
  <li><a href="#">Configurable</a></li>
  <li><a href="#">Galaxy S3</a></li>
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>
<div class="pull-right">
 <ul class="links">
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>

 

Menu Item “Vegetables”

How to config menu item, namely “Vegetables” on back-end

– Add submenu

– On each submenu of “Vegetables”, Main Content dropdown, add width Ves-Megamenu:Product

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" product_source="latest" categories="11" number_item="3" column="3" number_item_percolumn="1" show_name="1" show_price="1" show_review="1" show_image="1" image_width="270" image_height="290"}}</div>

You can change “categories” for each submenu item. ex: categories=”11″ (category width ID=11)

 
 

2. Vertical menu (in demo 3):

 

Icon for each menu item is configured:

– You can setting show icon change value “yes”

– Upload icon image

– Choose position for icon show

How to config Vertical Menu on back-end

 

 

How To Create Simple Menu & Change Top Menu – Magento 2 Mega Menu Tutorials

How To Create 6 Menu Types – Drag & Drop Magento 2 Mega Menu Tutorials

How To Style Your Menu without editing css file – Magento 2 Mega Menu Tutorials

 

Share this Post!

0 Comment

Do NOT follow this link or you will be banned from the site!