Moving Image Shortcode

Last Updated on

Moving image shortcode gives your images nice moving effects to grab visitor’s attention. Using this shortcode you can apply CSS3 animation effects such as Pulse, Tossing, Vertical Float and Horizontal Float.

In this article, we will explain displaying and configuring Moving Image shortcode.

To see the Moving Image shortcode in action, you may check the demo page.

In this article


Displaying Moving Image

To add Moving image shortcode:

1
Add or edit an existing page or post.
2
In Visual Composer section, Click + button.

Moving image shortcode - visual composer screen

3
In Add Element pop-up screen, search for Moving Image and click on it to be added to the page.

Moving image shortcode - add element

4
When the shortcode is added, a new pop-up screen called Moving Image Settings opens. It allows you to configure the shortcode settings.

Moving image shortcode - Moving image settings

5
From Upload Your Image field, choose an image.

Moving image shortcode - upload image

6
Click Save Changes and publish or update the page to check the result.

Configuring the Settings

There are several types of settings in the Moving Image Settings pop-up. We explain all the settings in the follow sections.

SettingDescription
Animation Style Defines the animation of the image. There are 4 animation type: Vertical, Horizontally, Pulse, Tossing
Align Defines the alignment of the image
Title & Alt Sets the title and alt attribute of the image
Link Makes the image clickable

Adding an Entrance Animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

Configuring the Visibility for Devices

Visibility For Devices field in the setting pop-up allows you to configure the visibility of the shortcode in different devices.

You can read Configuring the visibility for devices article for further explanation.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket