DOCS

Animations for WordPress

Voom.sh Animations integrates seamlessly with WordPress, allowing you to add stunning animations to your site without touching a single line of code. This guide will walk you through the installation process and show you how to add animations using popular WordPress page builders.

Quick Installation Guide

Method 1: Using a Site-Wide Script (Recommended)

The easiest way to add Voom.sh Animations to your entire WordPress site is by adding the script to your theme:

  1. Go to your WordPress dashboard
  2. Navigate to Appearance > Theme Editor
  3. Select your theme's footer.php file
  4. Add the following code just before the closing </body> tag:
    ‍<script src="https://cdn.jsdelivr.net/gh/ktonik/voom@v1.0.4/dist/voom-demo.min.js"></script>‍
  5. Click Update File
Method 2: Using a Header & Footer Plugin

If you're not comfortable editing theme files directly, you can use a plugin:

  1. Install and activate a header and footer plugin such as "Header and Footer Scripts" or "Insert Headers and Footers"
  2. Go to the plugin settings page
  3. Add the Voom.sh script to the "Footer" section:
    ‍<script src="https://cdn.jsdelivr.net/gh/ktonik/voom@v1.0.4/dist/voom-demo.min.js"></script>
  4. Save your changes

Using Voom.sh with WordPress Page Builders

Elementor Integration

Elementor makes it easy to add Voom.sh animation classes to any element:

  1. Edit your page with Elementor
  2. Select the element you want to animate
  3. Go to the Advanced tab
  4. Add your animation class (e.g., voomsh-hdr-1) to the CSS Classes field
  5. Click Update to save your changes
Gutenberg Integration

To add Voom.sh animations in the Gutenberg editor:

  1. Select the block you want to animate
  2. Click on the block settings (⚙️) in the right sidebar
  3. Expand the Advanced panel
  4. Add your animation class (e.g., voomsh-hdr-1) to the Additional CSS Class(es) field
  5. Update or publish your page
Beaver Builder Integration

For Beaver Builder users:

  1. Edit your page with Beaver Builder
  2. Select the element you want to animate
  3. Go to the Advanced tab
  4. Add your animation class (e.g., voomsh-hdr-1) to the Class field
  5. Save and publish your changes
Divi Builder Integration

To add animations with Divi Builder:

  1. Edit your page with Divi Builder
  2. Select the module you want to animate
  3. Go to the Advanced tab
  4. Expand the CSS ID & Classes section
  5. Add your animation class (e.g., voomsh-hdr-1) to the CSS Class field
  6. Save and publish your changes

Need help?

Contact our support team at support@voom.sh