Wordpress hover effects

Hover Effects tutorial

Posted on Posted in Getting Started

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
composer first:
https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431?s_rank=1

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”

untitled-1

untitled-2

  • Hit “Choose file”

untitled-3

  • Then choose file vc-marvelous-hover.zip which you can find inside the package you
    downloaded from Codecayon.
  • Hit Install now

untitled-4

  • Activate plugin

untitled-5

All done!

 

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:
Hover Effects tutorial for image settings
Settings for Hover Effects image

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:

Hover effects tutorial on Customize option for Standalone Image
Customize Hover effects option for Standalone Image

You can also customize box settings with “Design Options” tab just like other Visual Composer addons:

Visual Composer's Design Option tab
Visual Composer’s Design Option tab

 

4. Marvelous hover effects tutorial for Grid

  • Choose “Marvelous Grid” element.
  • Customize with Marvelous Grid general setting tab
Hover effects tutorial for Grid layout
Settings Hover effects for Grid layout
  • Choose appropriate options for Data via “Data Settings” tab
Data settings for Grid
Data settings for Grid
  • “Marvelous Grid” has similar options for deeper customizing and designing, same as Marvelous Hover:
Hover effects tutorial on Customize option for Grid
Customize Hover effects for Grid
  • 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:

Hover effects tutorial for Post settings
Settings Hover effects for Post

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
Settings Tilt Hover effects tutorial
Settings Tilt Hover effects

 

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.

Marvelous Hover effects settings panel
Marvelous Hover effects settings panel

Leave a Reply

Your email address will not be published. Required fields are marked *