How to Use with WPBakery / Visual Composer

Image Hover Effects Ultimate has a built-in integration with WPBakery Page Builder (formerly Visual Composer). Unlike Elementor where you paste a shortcode, WPBakery has a native “Image Hover Ultimate” element you can add directly from the element picker, no copying and pasting needed. Here’s how to use it.

What the WPBakery Integration Offers

• A dedicated “Image Hover Ultimate” element in the WPBakery element library
• A dropdown to select your hover effect style by name, no need to look up shortcode IDs
• Full compatibility with WPBakery’s row and column layout system
• Works in both Classic and New Skin (backend editor)

Step 1: Create Your Hover Effect Style

Before using it in WPBakery, make sure you have at least one saved style in Image Hover Ultimate.

1. Go to Image Hover Ultimate in the WordPress admin.
2. Create a style, add images, customize, and save.

Step 2: Open the WPBakery Editor

Open the page you want to edit in WPBakery (click Backend Editor or Frontend Editor).

Step 3: Add the Image Hover Ultimate Element

1. Click the Add Element button (the blue + button in your layout).
2. In the element search bar, type “Image Hover”.
3. Click on Image Hover Ultimate in the search results.

Step 4: Select Your Style

1. A settings popup opens for the element.
2. You’ll see a dropdown list of all your saved Image Hover Ultimate styles.
3. Select the style you want to display.
4. Click Save changes.

Step 5: Preview and Publish

The element now appears in your WPBakery layout. Click Preview to check the frontend appearance, then Update to save the page.

Alternative: Using the Shortcode Directly in WPBakery

If you prefer, you can also use the standard Raw HTML or Shortcode element in WPBakery and paste the shortcode manually:

[iheu_ultimate_oxi id="1"]

Add a Raw HTML element → paste the shortcode → save. This achieves the same result as the dedicated element.

Placing the Element in Your Layout

The Image Hover Ultimate element works in any WPBakery layout structure:

• Full-width rows: Great for full-bleed gallery sections
• Two or three-column rows: Place a gallery next to text content
• Tabs element: Different hover galleries in each tab
• Accordion element: Hidden galleries revealed in accordion sections

Troubleshooting WPBakery Integration

• “Image Hover Ultimate” not in element picker: Make sure both WPBakery and Image Hover Effects Ultimate are activated. Deactivate and reactivate Image Hover Effects Ultimate to re-register the element.
• Dropdown is empty (no styles): You need to create and save at least one style in Image Hover Ultimate before it appears in the dropdown.
• Effect not rendering in backend editor: The hover animation may not work in WPBakery’s backend editor. Switch to Frontend Editor or preview the live page to see the full effect.
• CSS conflicts: WPBakery adds its own CSS to rows and columns. If your hover effect looks off, try using the Custom Parent Class setting in Image Hover Ultimate to scope your CSS.

The WPBakery-Specific Shortcode

When you use the native WPBakery element, it generates a different shortcode internally:

[iheu_oxi_VC id="1"]

This shortcode is functionally identical to the standard one but is used specifically within WPBakery’s shortcode output. You don’t need to manually use this, it’s handled automatically by the element.