Marvelous Hover Effects, an add-on for Visual Composer, is a collection of over 40 beautiful Hover effects or Tilt effects that helps you to easily create interactive IMAGES or GRID in your website. This article will show you hover effects tutorial on how to install and add Marvelous Hover Effects plugin.
To better understanding, you can watch hover effects tutorial video here
1. Install add-ons:
1.1. Visual Composer:
Visual composer is page builder for wordpress. To use this plugin please install Visual
1.2. Marvelous hover effects:
Download Marvelous plugin here: https://codecanyon.net/item/marvelous-hover-effects-visual-composer-addons/19137816
- Login to your WordPress admin dashboard >> Plugin >> Add new
- Hit “Upload plugin”
- Hit “Choose file”
- Then choose file vc-marvelous-hover.zip which you can find inside the package you
downloaded from Codecayon.
- Hit Install now
- Activate plugin
2. Let’s start our hover effects tutorial!
- 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.
3. Marvelous Hover effects tutorial:
- 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:
4. Marvelous hover effects tutorial 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.
5. Marvelous Tilt hover effects tutorial
- Choose “Marvelous Tilt” element.
- Customize with Marvelous Tilt setting tab
6. 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.