Gold Penguin Logo with Text

Elements Hive In Breakdance Builder – Some Examples

Wondering how you can make your dull website more interactive? Discover how Elements Hive can help you in this guide!
Updated August 18, 2023

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.

install elements hive

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.’ 

add WebGL Media Hover

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. 

edit webGL media images

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. 

edit webGL media effects

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.

add Breakdance page 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%.

edit Breakdance container size

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.

elements hive sample

When you hover the mouse on the title, you should see a clickable ‘View Events’ link, as shown.

elements hive mouse hover

When you move your mouse over the image, it should transition to another image with a distorted effect.

elements hive swap image

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!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
magnifiercross