This tutorial will show you how to create "promotion" boxes that have been pre-set and comes with this template. You just need to use the "correct" HTML scheme to activate it. They can be used in articles, modules and so forth. (Basically anyplace where you can type HTML)

IMPORTANT NOTICATION: In CSS3 hover effects, RGBA Color codes rgba(37,79,120, 0.5) are used for MASK to get transparent backgrounds. For instance, the rgba color code for the color "RED" is: rgba(255,0,0,0.5). The first 3 numbers 255,0,0 represents the color ingredients and the last number 0.5 indicates the trasparency. (mininum 0, maximum 1)

Live Preview	HTML  Scheme (just copy-paste the HTML lines, then customize the contents.)
iPad Two sizes do all. Shop Now	Promotion Box <div class="promo-box">     <h5>iPad</h5>     <h6>Two sizes do all.</h6>     <a href="#URL_GOES_HERE"><img src="images/promo_1.png" alt="" border="0" /></a>     <a href="#URL_GOES_HERE">Shop Now</a> </div>
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #1 <div class="FlexibleHover effect1">     <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">     <div style="background-color: rgba(37,79,120, 0.5);" class="mask">     <h2>MENS SHOES</h2>     <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>     <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(37,79,120, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #2 <div class="FlexibleHover effect2">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(255,188,92, 0.5);" class="mask">&nbsp;</div>     <div class="content">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(255,188,92, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #3 <div class="FlexibleHover effect3">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(231,68,68, 0.5);" class="mask">&nbsp;</div>     <div class="content">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(231,68,68, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #4 <div class="FlexibleHover effect4">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(231,243,43, 0.5);" class="mask">&nbsp;</div>     <div class="content">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(231,243,43, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #5 <div class="FlexibleHover effect5">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(46,206,76, 0.5);" class="mask">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(46,206,76, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #6 <div class="FlexibleHover effect6">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(46,140,206, 0.5);" class="mask">&nbsp;</div>     <div class="content">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(46,140,206, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #7 <div class="FlexibleHover effect7">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(46,206,159, 0.5);" class="mask">&nbsp;</div>     <div class="content">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(46,206,159, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #8 <div class="FlexibleHover effect8">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />     <div style="background-color: rgba(37,79,120, 0.5);" class="mask">         <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(37,79,120, 0.5), which is this:
MENS SHOES The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men! Shop Mens Shoes	Hover Effect #9 <div class="FlexibleHover effect9">     <img src="images/stories/homeBanner2.jpg" alt="" border="0" class="maxwidth" />      <div class="mask mask-1" style="background: rgba(119, 0, 36, 0.5);"></div>      <div class="mask mask-2" style="background: rgba(119, 0, 36, 0.5);"></div>      <div class="content">                        <h2>MENS SHOES</h2>         <p>The best brands in mens dress and casual shoes, sandals, sneakers, and boots. Shop the latest styles of shoes, sandals, and heels for men!</p>         <a href="#" class="info">Shop Mens Shoes</a>     </div> </div> You can change the mask color. The default is: rgba(119, 0, 36, 0.5), which is this:
MENS SHOES Shop latest styles.Shop Now	Hover Effect #10 <div style="width:290px;" class="FlexibleHover2 effect10">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles.</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>
MENS SHOES Shop the latest styles.Shop Now	Hover Effect #11 <div style="width:290px;" class="FlexibleHover2 effect11">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles.</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>
MENS SHOES Shop the latest styles.Shop Now	Hover Effect #12 <div style="width:290px;" class="FlexibleHover2 effect12">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles.</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>
MENS SHOES Shop the latest styles.Shop Now	Hover Effect #13 <div style="width:290px;" class="FlexibleHover2 effect13">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles .</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>
MENS SHOES Shop the latest styles.Shop Now	Hover Effect #14 <div style="width:290px;" class="FlexibleHover2 effect14">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles.</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>
MENS SHOES Shop the latest styles.Shop Now	Hover Effect #15 <div style="width:290px;" class="FlexibleHover2 effect15">     <div class="figure">         <img border="0" alt="" src="images/stories/homeBanner2.jpg" class="maxwidth">         <div class="figcaption">             <h3>MENS SHOES</h3>             <span>Shop the latest styles.</span>             <a href="#URL_GOES_HERE">Shop Now</a>         </div>     </div> </div>

This tutorial will show you how to have multiple columns for the menu items (2.child).

For instance, in this DEMO:

KIDS menu item have 4 columns for 2.child items. But on the other hand; TEMPLATE menu item has 3 columns for 2.child items. You can define those columns through the menu manager.

1- Open the 1.child menu item (that you are going to add columns for its child menu items)

2- Click the "Page Display Options" Tab and type the column number as you wish.

IMPORTANT NOTICE: The level-1 menu item can't be "Text Seperator" type, otherwise "Page Display Options" would disappear.

3- To the "Page Class" field, enter one of these:

• columns-1: NO NEED TO TYPE ANYTHING, LEAVE BLANK. DEFAULT IS ALREADY columns-1
• columns-2: to make 2 columns
• columns-3: to make 3 columns
• columns-4: to make 4 columns
• ....
• ....
• ....
• columns-N: to make N columns

IMPORTANT: Look at this screenshot below to understand the idea to build menu items like "MAN" and "WOMAN" as you see in this DEMO:

[Click to enlarge the picture]

NOTICE: Before reading this tutorial, you should read "Multiple Columns for the Menu Items" tutorial first

This tutorial will show you how to create menu item with a product picture (just like how it is in this DEMO)

1- Open the "Menu Manager" and open the 2.child. Be careful, this should be 2. child (level 2). For instance; In this DEMO 1.CHILD is KIDS, and the 2.CHILDs are Boys-Baby, Boys-Junior, Girsl-Baby and Girls-Junior..

2- Then from the left hand side, click the "Link Type Options" TAB and then click the "Select" button from the "Link Image" section.

3- You might guess the rest. Just pick an image from there. and boom!

Make sure all the pictures you are going to pick for those menu items have exact same resolutions or same aspect ratio.

NOTE: The || seperator in the menu items make the subtitle. As you can see in the DEMO or in the screenshots, the "6-30 months" and "4-16 years" texts are subtitle and they are written after || seperator.

Usage:

Result:

That's all!

This page has the Official VM - Product Module, as you can see; CoolMart styles the VM Product Module as well.

You can use this module in any page and any module position as you want.