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

Explore more from Divi Engine

Divi Form Builder

Divi Form Builder

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

Divi Form Builder
Find out more
Divi Machine

Divi Machine

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

Divi Machine
Find out more
Divi BodyCommerce

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
Find out more
Divi Handoff

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Divi Handoff
Find out more
Divi Loop Extender

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Divi Loop Extender
Find out more
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
Find out more
Divi Machine Accounts

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
Find out more
Divi Ajax Filter

Divi Ajax Filter

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

Divi Ajax Filter
Find out more
Divi Mobile

Divi Mobile

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

Divi Mobile
Find out more
Divi Nitro

Divi Nitro

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

Divi Nitro
Find out more
Divi Protect

Divi Protect

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

Divi Protect
Find out more
Divi Mega Menu

Divi Mega Menu

Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.  

Divi Mega Menu
Find out more
Buy all from £149 Discover all