Creating Smart-Boxes with Overlay MagicPVII is the leader in creative extensions for Dreamweaver
Buy ($95) | Finished Page | Overlay Magic Home
Learn how to create Smart-Boxes that pop up overlaid on your page with Overlay Magic menu. This tutorial requires that version 1.2.9 (or higher) of Overlay Magic by PVII is installed on your system.
1. Download the Assets
We've prepared a folder so that you can complete a finished page in a few minutes. Download the folder, unzip it, and place it inside a defined Dreamweaver site.
Download smart-box-tutorial folder
Unzip the folder inside your defined Dreamweaver site.
2. Open the Supplied Work Page
In your smart-box-tutorial folder, locate finished.htm and open it.
3. Add the first Smart-Box
Place your cursor inside the link labeled Smart-Box Link One
Open the OMM interface
Add two Menu Items, labeled Orange Flower and Street
Add one Sub Menu Row to each of the Menu Items
Leave Column Configuration set to default (Single Column)
Select (check) all four Outer Box Styling options
Select Style Theme 02-Dark
Click OK
Replace the boilerplate Latin text in the first panel with the orange-flower.jpg image, which can be found in the smart-box-tutorial/images folder.
Insert street.jpg into the second panel, replacing the boilerplate Latin text.
Preview the page and click the Smart-Box Link One link.
Good job!
4. Insert the second Smart-Box
Place your cursor inside the link labeled Smart-Box Link Two
Open the OMM interface
Add one Sub Menu Row to the default Menu Item
Leave Column Configuration set to default (Single Column)
For Outer Box Width, select (check) the Enable Max Width option and enter 1000 in the box
Select (check) all four Outer Box Styling options
Select Style Theme 01-Light
Click OK
Replace the Latin text with text of your own (or leave the Latin text as a placeholder). Make a new line below the text and insert blue-flower.jpg, which can be found in the smart-box-tutorial/images folder.
Preview the page and click the Smart-Box Link Two link.
Good job!
5. Insert the third Smart-Box
Place your cursor inside the link labeled Smart-Box Link Three
Open the OMM interface
Add one Sub Menu Row to the default Menu Item
Leave Column Configuration set to default (Single Column)
For Outer Box Width, select (check) the Enable Max Width option and enter 840 in the box
Select (check) all four Outer Box Styling options
Select Style Theme 02-Dark
Click OK
Replace the Latin text with text of your own (or leave the Latin text as a placeholder).
Select the text.
Switch to Code View:
<div class="p7OMM-column w100">
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens.</p>
</div>
Make a new line below the text and insert the embed code from a YouTube video. The embed code, which is an iframe, must be wrapped, by you, inside a DIV, to which is assigned the class video-wrapper.
You can copy our code below for now. It will work fine. Later, you can replace it with your own YouTube or Vimeo iframe code.
<div class="video-wrapper">
<iframe width="1280" height="720" src="//www.youtube.com/embed/Q0nDQOrBx4A" frameborder="0" allowfullscreen></iframe>
</div>
Video will probably not work in a local Preview, so you will probably need to upload to a swever before you can see the video. This is how it will look, running on a server:
Good job!