Elements Hive in Breakdance Builder: Showcasing Creative Examples

Web Development & Design
Surfer AI - Best All-in-one Assistant

- Your article will be ready in less than 20 minutes and it will be 10 times cheaper than using a dedicated writer.
- Create ready-to-rank articles in minutes with Surfer AI.
- Research, write, and optimize across industries with the click of a button.

Want to flip your boring site into some thing interactive?

Incorporating animations in your WordPress website can be a game changer. You can flip static pictures into a stunning slideshow. Switch texts when you hover more than them. Or customize your mouse cursor.

All of these functions are feasible if you pair your Breakdance Builder with Elements Hive.

Aspects Hive is 1 of the most recent extensions solely for Breakdance. It gives you with components that will make your website much more engaging. I promise, they are rather basic to use, just like your drag-and-drop builder. No coding necessary..

Study on, and I’ll demonstrate you how you can consider benefit of this attribute to flip your site from static to interactive:

What is Aspects Hive?

Aspects Hive is generally an include-on for Breakdance. So, you are going to require Breakdance to make it perform. When you have acquired the two, your Breakdance Site Builder amounts up with some genuinely awesome components and extensions. 

The ideal component? You can use all these fancy functions proper from the Breakdance Editor. You really do not require to have coding information to degree up your internet webpage design and style. 

Every little thing is drag-and-drop. Customize every single component to your liking by just editing the component attributes on the navigation bar..

Aspects Hive Functions

Aspects Hive delivers much more than 13 free of charge components and extensions to get you began. These are:

  • WebGL Kinetic Typography: Lets you combine and match to develop 3D backgrounds in the Breakdance Segment. 
  • Magnetic Cursor: Your mouse cursor now acts like a magnet. It wraps about hyperlinks, buttons, or any component you choose. 
  • WebGL Slideshow: Adds a rad WebGL Slideshow to the Breakdance part background.
  • Website link Media Reveal: Hover more than a hyperlink to reveal an picture or video with smooth animations.
  • Website link Media Reveal Menu: It really is the Website link Media Reveal but manufactured for the Breakdance Menu.
  • WebGL Media Hover Distortion: Swap amongst pictures or video clips with a WebGL distortion impact. 
  • Ink Mouse Cursor: Flip your mouse cursor into some thing that seems to be like liquid ink. Choose from three variations.
  • Glue Button: Buttons now stick to your mouse when you hover.
  • Glue Menu Button: It really is the Glue Button but manufactured for menus.
  • Gooey Website link: Helps make text hyperlinks gooey. Switch texts and management the gooeyness. There are six variations to perform with.
  • Gooey Menu Website link: It really is the Gooey Website link but for menus.
  • WebGL Fluid Simulation Background: Include a WebGL fluid impact to the Breakdance Segment. Customize it your way.

Why Use Aspects Hive?

Right here are some of the use-circumstances of Aspects Hive that you may possibly discover exciting: 

Use Aspects Hive as a Spotlight Stealer to Your On the internet Keep

Include critical components on your website, this kind of ‘Buy Now’ buttons and fresh merchandise drops. I personally discover this a neat trick to get individuals hunting specifically in which you want.

Use Aspects Hive as Tour Manual for Newbies 

Very first time on my website? Aspects Hive can assist end users navigate effortlessly with animations. It really is like providing a VIP tour, displaying off the awesome bits and how things functions.

Adjust Dull Load Instances to One thing Innovative

Swapped the previous boring loading spinner with some zippy animations. It really is like a mini-demonstrate whilst the primary occasion sets up.

Use Aspects Hive Inform Your Story

Want to share your brand’s journey? Use Aspects Hive with customized animations to make it an engaging story.

Use Aspects Hive to Animate Buttons Or Backlinks

Incorporating animations can flip button clicks or hovering more than a hyperlink unique. They assist boost your visitor’s engagement and hold them longer.

How to Set up Aspects Hive in Breakdance

Ahead of we proceed, make positive you have put in the Breakdance Builder plugin in your WordPress account.

On your dashboard, go to Plugins &gt Include New. Search for Aspects Hive For Breakdance. Go ahead and set up the plugin. Then, click activate.

install elements hiveinstall elements hive

That is it! When you open your Breakdance editor, you need to see some of the free of charge components on the left-hand side of the webpage.

Making A Sample Web page

Let’s develop a homepage for a concert tickets site. Stage by stage, here’s what you require to do:

one) Include a Segment

On the left side of the editor, click ‘Add’ (or the plus symbol at the center of the webpage). Then, pick ‘Section.’

two) Include WebGL Media Hover Distortion

Click ‘Add’ and head more than to Aspects Hive. Let’s pick ‘WebGL Media Hover Distortion.’ 

add WebGL Media Hoveradd WebGL Media Hover

three) Upload Your Pictures

Go ahead and alter the default and hover pictures. 

Tap the pictures then pick. On the pop-up window, upload your pictures. 

edit webGL media imagesedit webGL media images

Note that you can also make this choice dynamic. But for now, let’s just attempt to include the pictures manually.

four) Edit the Results and Timing

This component is optional. If you like becoming innovative, go ahead and include results to your pictures. 

edit webGL media effectsedit webGL media effects

Inside the WebGL Media Hover Distortion tab, edit the Distortion Map and Distortion Results as preferred. 

five) Include a Title

This can be something relevant to your website. Given that we’re creating a concert tickets site, I’m incorporating a title ‘Best Music Concerts &amp Exhibits.’ 

Right here, I’ll be utilizing Aspects Hive’s ‘Gooey Link’ component. Then, I’ll show ‘View Events’ when the mouse hovers more than the title.

add Breakdance page titleadd Breakdance page title

Then, we’ll alter the dimension and spacing to make it appear greater.

Right here, I’ve altered the container width to 70% and text scale to .four%.

edit Breakdance container sizeedit Breakdance container size

Let’s just depart the default hyperlink as it is. You will require to include a functioning hyperlink later on when you are prepared to create a total site.

six) Conserve the Alterations

When you are carried out, go ahead and publish your basic homepage.

As you investigate Aspects Hive, you can include much more functionalities to your webpage to make it even appear greater. For instance, you can include a ‘Glue Button’ for acquiring tickets. The animated button need to assist catch your visitor’s focus and potentially boost your revenue.

For now, let’s conserve our perform and see the dwell webpage. It need to appear some thing like this.

elements hive sampleelements hive sample

When you hover the mouse on the title, you need to see a clickable ‘View Events’ hyperlink, as proven.

elements hive mouse hoverelements hive mouse hover

When you move your mouse more than the picture, it need to transition to an additional picture with a distorted impact.

elements hive swap imageelements hive swap image

What’s Up coming?

That is a wrap!

Now that you have discovered how Elements Hive functions, go ahead and attempt much more complicated functions. 

Third-get together Breakdance developers have developed a number of much more extensions to customize what you can do with the vanilla builder even much more. Verify out Destiny Elements or the bdd library!