1. Let’s start!
- First, create a page with Visual Composer plugin
- Edit with Backend Editor (or Frontend editor)
- Add Element
- Search for “Marvelous Hover”
There are 3 elements in Marvelous v1.3 package: “Marvelous Hover” to add hover effects to Standalone Image, “Marvelous Grid” to Grid layout and “Marvelous Tilt” to add tilt effects to Standalone Image.
2. Marvelous Hover effects:
- Choose “Marvelous Hover” element.
- Customize with Marvelous Hover general setting tab:
Note: By default, the image will be automatically cut to fit the ratio (except for Original option). You can disable this function in Marvelous Hover general setting panel.
Or switch to “Customize” tab to deeper customize option:
You can also customize box settings with “Design Options” tab just like other Visual Composer addons:
3. Marvelous hover effects for Grid
- Choose “Marvelous Grid” element.
- Customize with Marvelous Grid general setting tab
- Choose appropriate options for Data via “Data Settings” tab
- “Marvelous Grid” has similar options for deeper customizing and designing, same as Marvelous Hover:
- Setting Effect for single Post or Page in Grid:
You can select single effect for individual with metabox “Marvelous Grid Custom Setting” below the post editor in each post/page:
Note: Please make sure that you’ve checked options to enable Metabox for Post or Page in Marvelous Hover general setting panel.
4. Marvelous Tilt
- Choose “Marvelous Tilt” element.
- Customize with Marvelous Tilt setting tab
5. General Settings
Finally, you can adjust some general setting to the whole website by using Marvelous Hover panel, located inside Visual Composer section on the left panel in WP administration.