Wordpress hover effects

Plugin customize

Posted on Posted in Getting Started

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

Customize Hover effects 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

3. Marvelous hover effects for Grid

  • Choose “Marvelous Grid” element.
  • Customize with Marvelous Grid general setting tab
Settings Hover effects 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:
Customize Hover effects 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:

Settings Hover effects for Post
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.

4. Marvelous Tilt

  • Choose “Marvelous Tilt” element.
  • Customize with Marvelous Tilt setting tab
Settings Tilt Hover effects
Settings Tilt Hover effects

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.

Marvelous Hover effects settings panel
Marvelous Hover effects settings panel

Leave a Reply

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