Get Started

Vanta.js & Three.js Backgrounds for Divi & WordPress

Easy

Javascript

Details

Memorable Divi Header Backgrounds can leave a lasting impression!

Elevate the visual experience of your Divi website by incorporating stunning, interactive 3D effects into your header backgrounds. This Divi snippet leverages the power of Vanta.js and Three.js, two renowned JavaScript libraries, to add captivating cloud animations to sections, rows, and modules within Divi. Perfect for designers and developers looking to introduce a dynamic element to their sites, this easy-to-implement code enhances user engagement through beautifully animated backgrounds. Not only does it offer a unique aesthetic appeal, but it also provides interactive functionality, responding to mouse and touch inputs, ensuring a memorable browsing experience. Dive into the world of 3D web design with this seamless integration for Divi, and watch your website come to life like never before.

To get rolling with these, you must first add a selector to the Gutenberg Block, or Divi Section/Row/Module in the advanced tab. Then, just load the Three.js library from the first snippet, then select the Vanta.js effect you want to use, and load the accompanying script. Lastly, copy the parameter JavaScript for the effect in a separate script tag and change the selector to that of your target.

For those interested in exploring more about these awesome libraries, visit Three.js and Vanta.js for additional information and documentation on how to use them to create engaging web experiences.

Snippets Demo

vanta.js and three.js in Divi WordPress Snippet

w

THIS IS TEXT

w

THIS IS TEXT

w

THIS IS TEXT

Code

1

Description:
This loads the three.js library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options. This only gets loaded once.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

2

Description:
This loads the vanta.js Birds effect library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>

3

Description:
This is the code for the Birds parameters and should be added in a separate script tag.

Language: Javascript

Where to add: Divi Code Module

                        <script>
VANTA.BIRDS({
  el: "#yourSelectorHere",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

4

Description:
This loads the vanta.js Clouds2 effect library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>

5

Description:
This is the code for the Clouds2 parameters and should be added in a separate script tag.

Language: Javascript

Where to add: Divi Code Module

                        <script>
VANTA.CLOUDS2({
  el: "#yourSelectorHere",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  texturePath: "Add your texture URL here"
})
</script>

6

Description:
This loads the vanta.js Cells effect library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.cells.min.js"></script>

7

Description:
This is the code for the Cells parameters and should be added in a separate script tag.

Language: Javascript

Where to add: Divi Code Module

                        <script>
VANTA.CELLS({
  el: "#yourSelectorHere",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 400.00,
  minWidth: 200.00,
  scale: 1.00
})
</script>

8

Description:
This loads the vanta.js Waves effect library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>

9

Description:
This is the code for the Waves parameters and should be added in a separate script tag.

Language: Javascript

Where to add: Divi Code Module

                        <script>
VANTA.WAVES({
  el: "#yourSelectorHere",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 400.00,
  minWidth: 400.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

10

Description:
This loads the vanta.js Rings effect library from a CDN and can be added to either a page with the Divi Code Module, or to the Integration Tab in the Divi Theme Options.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.rings.min.js"></script>

11

Description:
This is the code for the Rings parameters and should be added in a separate script tag.

Language: Javascript

Where to add: Divi Code Module

                        <script>
VANTA.RINGS({
  el: "#yourSelectorHere",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 400.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

Related Snippets

Divi Text Module with Animated Shadow Gradient

Intermediate | CSSHTML

Divi Text Module with Animated Shadow Gradient

Apr 30 2024

Divi Text Module Gradient with Gradient Shadow

Easy | CSS

Divi Text Module Gradient with Gradient Shadow

Apr 30 2024

Confetti Effect When Clicking a Divi Button Module

Easy | Javascript

Confetti Effect When Clicking a Divi Button Module

Jan 23 2024

Confetti Effect When Submitting a Divi Contact Form

Easy | Javascript

Confetti Effect When Submitting a Divi Contact Form

Jan 23 2024

Explore more from Divi Engine

Divi Membership

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Divi Membership

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active

Divi Machine Accounts

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Divi Form Builder

Divi Ajax Filter

Filter WooCommerce, Posts & Custom Posts without reloading the page.

Divi Ajax Filter

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Divi Machine

Divi Mobile

Divi Mobile helps you create beautiful looking mobile menus without having to code.

Divi Mobile

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Divi BodyCommerce

Divi Nitro

Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.

Divi Nitro

Divi Protect

Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!

Divi Protect

Divi Mega Menu

Improve the user experience of your Divi website with our Divi Mega Menu plugin by creating dynamic menus using the Divi Builder.

Buy all from £149 Discover all