Want to turn your dull website into something interactive?
Adding animations in your WordPress site can be a game changer. You can turn static images into a beautiful slideshow. Switch texts when you hover over them. Or customize your mouse cursor.
All of these features are possible if you pair your Breakdance Builder with Elements Hive.
Elements Hive is one of the latest extensions exclusively for Breakdance. It provides you with elements that will make your site more engaging. I guarantee, they’re pretty simple to use, just like your drag-and-drop builder. No coding needed..
Read on, and I’ll show you how you can take advantage of this feature to turn your website from static to interactive:
What is Elements Hive?
Elements Hive is basically an add-on for Breakdance. So, you'll need Breakdance to make it work. Once you've got both, your Breakdance Website Builder levels up with some really cool elements and extensions.
The best part? You can use all these fancy features right from the Breakdance Editor. You don’t need to have coding knowledge to level up your web page design.
Everything is drag-and-drop. Customize each element to your liking by simply editing the element attributes on the navigation bar..
Elements Hive Features
Elements Hive offers more than 13 free elements and extensions to get you started. These are:
- WebGL Kinetic Typography: Lets you mix and match to create 3D backgrounds in the Breakdance Section.
- Magnetic Cursor: Your mouse cursor now acts like a magnet. It wraps around links, buttons, or any element you pick.
- WebGL Slideshow: Adds a rad WebGL Slideshow to the Breakdance section background.
- Link Media Reveal: Hover over a link to reveal an image or video with smooth animations.
- Link Media Reveal Menu: It's the Link Media Reveal but made for the Breakdance Menu.
- WebGL Media Hover Distortion: Swap between images or videos with a WebGL distortion effect.
- Ink Mouse Cursor: Turn your mouse cursor into something that looks like liquid ink. Pick from 3 styles.
- Glue Button: Buttons now stick to your mouse when you hover.
- Glue Menu Button: It's the Glue Button but made for menus.
- Gooey Link: Makes text links gooey. Switch texts and control the gooeyness. There are 6 styles to play with.
- Gooey Menu Link: It's the Gooey Link but for menus.
- WebGL Fluid Simulation Background: Add a WebGL fluid effect to the Breakdance Section. Customize it your way.
Why Use Elements Hive?
Here are some of the use-cases of Elements Hive that you might find interesting:
Use Elements Hive as a Spotlight Stealer to Your Online Store
Add crucial elements on your site, such ‘Buy Now’ buttons and fresh product drops. I personally find this a neat trick to get people looking exactly where you want.
Use Elements Hive as Tour Guide for Newbies
First time on my site? Elements Hive can help users navigate easily with animations. It's like giving a VIP tour, showing off the cool bits and how stuff works.
Change Boring Load Times to Something Creative
Swapped the old dull loading spinner with some zippy animations. It's like a mini-show while the main event sets up.
Use Elements Hive Tell Your Story
Want to share your brand's journey? Use Elements Hive with custom animations to make it an engaging story.
Use Elements Hive to Animate Buttons Or Links
Adding animations can turn button clicks or hovering over a link special. They help increase your visitor’s engagement and keep them longer.
How to Install Elements Hive in Breakdance
Before we proceed, make sure you have installed the Breakdance Builder plugin in your WordPress account.
On your dashboard, go to Plugins > Add New. Search for Elements Hive For Breakdance. Go ahead and install the plugin. Then, click activate.
That’s it! Once you open your Breakdance editor, you should see some of the free elements on the left-hand side of the page.
Creating A Sample Page
Let’s create a homepage for a concert tickets website. Step by step, here’s what you need to do:
1) Add a Section
On the left side of the editor, click ‘Add’ (or the plus symbol at the center of the page). Then, choose ‘Section.’
2) Add WebGL Media Hover Distortion
Click ‘Add’ and head over to Elements Hive. Let’s choose ‘WebGL Media Hover Distortion.’
3) Upload Your Images
Go ahead and change the default and hover images.
Tap the photos then choose. On the pop-up window, upload your photos.
Note that you can also make this option dynamic. But for now, let’s just try to add the images manually.
4) Edit the Effects and Timing
This part is optional. If you like being creative, go ahead and add effects to your photos.
Within the WebGL Media Hover Distortion tab, edit the Distortion Map and Distortion Effects as desired.
5) Add a Title
This can be anything related to your site. Since we’re making a concert tickets website, I’m adding a title ‘Best Music Concerts & Shows.’
Here, I’ll be using Elements Hive’s ‘Gooey Link’ element. Then, I’ll display ‘View Events’ when the mouse hovers over the title.
Then, we’ll adjust the size and spacing to make it look better.
Here, I’ve changed the container width to 70% and text scale to 0.4%.
Let’s just leave the default link as it is. You’ll need to add a working link later when you’re ready to build a full website.
6) Save the Changes
When you’re done, go ahead and publish your simple homepage.
As you explore Elements Hive, you can add more functionalities to your page to make it even look better. For example, you can add a ‘Glue Button’ for buying tickets. The animated button should help catch your visitor’s attention and possibly increase your sales.
For now, let’s save our work and view the live page. It should look something like this.
When you hover the mouse on the title, you should see a clickable ‘View Events’ link, as shown.
When you move your mouse over the image, it should transition to another image with a distorted effect.
What’s Next?
That’s a wrap!
Now that you’ve learned how Elements Hive works, go ahead and try more complex features.
Third-party Breakdance developers have created a few more extensions to customize what you can do with the vanilla builder even more. Check out Destiny Elements or the bdd library!
