# Animated Ads (Pro)

The Animated Ads feature helps you to select multiple ads, arrange them in the desired order and display them with animation effects.\
\
Note: AMP Ads are not compatible with animation effects.

### Displaying Animated Ads

#### Display Animated Ads using Gutenberg Block

{% hint style="danger" %}
Please note that the Gutenberg Block for displaying Animated Ads will be deprecated soon. Refer <https://docs.wpeka.com/wp-adcenter/placing-ads/placing-ad-using-consolidated-block-elementor-widget> to replace the Animated Ads Gutenberg block with the Consolidated Ad Gutenberg Block.
{% endhint %}

* Select **WPAdCenter Animated Ads** block in the editor as shown below.

![](https://456431625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhZhxDAXbXHWmZ3dUIK-754427264%2Fuploads%2Fjn8Pjfd1MrlxPuL4aAFN%2Fanimatedads1.png?alt=media\&token=534296c7-5964-4721-a9c5-76b6058cc992)

* Select the display animation type from the dropdown.
* Display animation types are Carousel, Top Scrollbar, Bottom Scrollbar, Floating Top Right, Floating Top Left, Floating Bottom Right, Floating Bottom Left and Pop Up.
* Select ads that are to be displayed on the front end.
* The order of the ads can be set by drag and drop or also clicking on the arrow buttons.
* Set the number of columns for displaying ads( if applies to animation-type ).
* To provide maximum width for an ad, enable the **Max Width** option and provide a maximum width value.
* To display ads on specific devices, select the corresponding checkboxes. The changes will take effect on the preview page or live page and not while editing.
* Click on **Publish**/**Update** button.

#### Display Animated Ads using Shortcode

* Shortcode for reference:\[wpadcenter\_animated\_ads ad\_ids=48,49 display\_animation\_type='carousel' num\_columns=1 max\_width='on' max\_width\_value=300 devices=mobile,tablet,desktop]

![](https://456431625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhZhxDAXbXHWmZ3dUIK%2F-MeStjYp2vhuvPxJUaQk%2F-MeT5WwhRtCg7lKq7Uwa%2Fanimated%20shorcode.png?alt=media\&token=1c2b0e71-058d-479a-a339-fee854d19d47)

* Provide the display animation value as carousel, scrollbar-top, scrollbar-bottom, floating-top-right, floating-top-left, floating-bottom-right, floating-bottom-left or popup.
* Provide comma-separated ad IDs in the order that they should be displayed on the front end.
* Set number of columns for displaying ads on the front end( if applies to animation-type ).
* Max width can be set to  "on" or "off".
* Max Width Value is the value in pixels.
* To display ads on specific devices, specify the names of devices. If the 'devices' attribute is not provided the ad will be shown on all devices.
* Click on **Publish**/**Update** button to save the shortcode.

#### Display Animated Ads using Widget

* Select **WPAdCenter Animated Ads** widget as shown in the image below.

![](https://456431625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhZhxDAXbXHWmZ3dUIK%2F-MeStjYp2vhuvPxJUaQk%2F-MeT8eLejtPIsMcFrwSR%2Fanimated%20widgets.png?alt=media\&token=f51ffa15-f02e-47c1-8f41-977c7da1a030)

* Select the display animation type from the dropdown.
* Display animation types are Carousel, Top Scrollbar, Bottom Scrollbar, Floating Top Right, Floating Top Left, Floating Bottom Right, Floating Bottom Left and Pop Up.
* Select ads that are to be displayed on the front end.
* The order of the ads can be set by drag and drop or also clicking on the arrow buttons.
* Set the number of columns for displaying ads( if applies to animation-type ).
* To provide maximum width for an ad, enable the **Max Width** option and provide a maximum width value.
* To display ads on specific devices, select the corresponding checkboxes.
* Click on the **Save** button.

#### Display Animated Ads using Elementor

{% hint style="danger" %}
Please note that the Elementor Widget for displaying Animated Ads will be deprecated soon. Refer <https://docs.wpeka.com/wp-adcenter/placing-ads/placing-ad-using-consolidated-block-elementor-widget> to replace the Animated Ads Elementor widget with the Consolidated Ad Elementor widget.
{% endhint %}

* Select **WPAdcenter Animated Ads** widget which is present under the **General** category.

![](https://456431625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhZhxDAXbXHWmZ3dUIK-754427264%2Fuploads%2Fjn8Pjfd1MrlxPuL4aAFN%2Fanimatedads1.png?alt=media\&token=534296c7-5964-4721-a9c5-76b6058cc992)

* Select the display animation type from the dropdown.
* Display animation types are Carousel, Top Scrollbar, Bottom Scrollbar, Floating Top Right, Floating Top Left, Floating Bottom Right, Floating Bottom Left and Pop Up.
* Click on the **ADD ITEM** button to add ads.
* Set the order by drag and drop of the items in the ads list.
* Specify the number of columns for ads( if applies to animation-type ).
* To provide maximum width for an ad, enable the **Max Width** option and provide a maximum width value.
* To display ads on specific devices, select the corresponding checkboxes. The changes will take effect on the preview page or live page and not while editing.
* Click on **Publish**/**Update** button.

{% embed url="<https://youtu.be/wbhhO_p5gx8>" %}