How to Use Windmill BDD Library in Breakdance

Want to develop a professional-looking website without the fuss? Breakdance’s Windmill library might be the right solution for you. Read our guide to learn more.  

Christy Cañete

Updated August 25, 2023

Reading Time: 6 minutes

Breakdance allows anyone to build a website without coding experience. But with the recent creation of the Windmill library, creating stunning websites has become easier and faster!

Looking for an easy and quick solution? Then follow this guide. I’ll show you how to design a professional-looking webpage without starting everything from scratch. Let's do it.

What is Windmill BDD Library?

Windmill is a Breakdance library that allows you to copy and paste blocks from pre-built templates. 

If you need inspiration on your website layout, this library is pretty useful. You get almost everything you need to build a website, from the header to the footer. The pre-built blocks save you the hassle of doing everything from scratch.

Honestly, I find the Windmill library a great starting point for beginners. Just copy the blocks you want from the library and paste them into your Breakdance page. 

One thing I noticed though is that the library is designed to not override your global styles.

So, if you have chosen a Breakdance dance for your library, the Windmill blocks will adjust to your site’s look and feel. Pretty nice.

When copying a section element with images and buttons, you might notice that the elements in the library look different when pasted onto your Breakdance page.

Basically, you’re copying a pre-designed layout, which is great to accelerate the development process. This makes it possible to design a complete website within hours and not days.

In a few minutes, I’ll show you how to integrate this cool library in Breakdance.

How to Copy Blocks from Windmill Library to Breakdance Page

Let’s say we wanted to create a home page for a photography website. 

We’ll need to add a few elements: a header, a footer, and sections for the cover photo, portfolio, testimonials, and newsletter.

Here’s how you can do it in Breakdance.

1) Copying a Header

First, you’ll need to create a header template. From your WordPress menu, head over to Breakdance > Headers. Click ‘Add Header.’ Enter a name, set the location to ‘everywhere,’ and enter a priority number. Then, hit save.

create header template in Breakdance

Open the header template on your Breakdance editor. Your page should look like a blank canvas. This is where you’re going to paste blocks from the Windmill library.

I assume that you already have a Windmill account. Go ahead and click ‘preview blocks’ on top of your Windmill dashboard.

On the left side, you should see a list of pre-designed blocks you can use on your website. 

For this example, let’s click the headers option. You should now see different header designs on the page.

Choose a header design you want. Then, click the ‘Copy Block’ button below the header.

choose header block from Windmill

Back to your Breakdance editor, paste the block you’ve just copied. You can right-click and tap paste, or use the keyboard shortcut CTRL + v. And, that’s it.

paste Windmill block on Breakdance page

As I’ve mentioned before, Windmill will adapt to your website’s global style. So don’t be surprised if the block’s appearance looks a bit different from the one in the library. But the layout should be exactly the same. 

Breakdance Windmill header block

But go ahead and tweak it a little bit to make it look nicer. Click an element you want to style and go to the style tab on the left. Here, you can add a background color, change the image, adjust the spacing, or change the font style.

Breakdance style tab

Once you’re done, save the changes.

Breakdance Windmill header

2) Copying a Footer

Same with creating a header template, go to Breakdance > Footers and click ‘Add New.’

On the pop-up window, enter a name for your footer. Set the location to everywhere and enter a priority number. Then, click save.

add footer template in Breakdance

Open your footer template in the Breakdance editor. 

On a separate tab, head over to your Windmill library and choose a block under the ‘Footer’ option. Then, copy the block.

copy footer block from Windmill

Back to your Breakdance editor, paste the block.

paste Windmill footer block in Breakdance

Then, modify the style as you want. Click save. 

style Breakdance footer

3) Copying Section Blocks to Breakdance Page

Now that you have the header and footer, let’s try to add sections to our homepage.

On your WordPress dashboard, go to Pages > Add New. Enter a title and click publish. Then, edit your page on the Breakdance editor. 

add new page in WordPress

The Windmill library offers many block designs you can add to enhance your homepage. Choose as many blocks as you want, and simply copy and paste them on your Breakdance page.

For the sake of this tutorial, let’s try to add a header section. On the Windmill library, click ‘Header Page’ and copy a block that you want. Then, paste it on your Breakdance page.

copy Windmill heading page to Breakdance

Feel free to modify the style. Here, I’ve changed the background image and style of the Call-to-Action (CTA) buttons.

style Breakdance heading page

Next, let’s try to add a portfolio section. Click the Grids and Cards option from the Windmill library. Copy a block that you want and paste it to your Breakdance editor. Style it as you desire.

copy Windmill grid and cards

Having a testimonial section for a business homepage would be great! So, let’s try to add one. 

Again, on your Windmill library, click Testimonials on the left-side menu. Choose a block. Then, copy this block and paste it to your Breakdance page.

add testimonial section in Breakdance

Here, I’ve added a profile picture to make the testimonials look nicer. 

add testimonial section in Breakdance

Later on, you can make the elements on your page dynamic. This will automatically pull real reviews, names, user profile pictures, and star ratings.

Read this guide if you want to learn how to add dynamic data in Breakdance.

Lastly, a homepage would not be complete without a newsletter sign-up form. Windmill has pre-built blocks for this one, too, so you won’t have to create it from scratch.

The process is the same. Head over to the Windmill library and copy one of the blocks from the ‘Newsletter’ option.

add Breakdance Windmill newsletter block

Back to your Breakdance editor, paste the block. Modify the style. Then, save your work. 

And, you’re done!

Here’s the final output of our photography home page.

create homepage using Breakdance and Windmill Library

That’s a Wrap!

Windmill has almost everything you need to create a beautiful website in Breakdance, whether you’re building a blog, a portfolio, or an online store.  There are even extra options to modify the text alignments and columns.

Windmill's blocks are currently limited because it’s pretty new. But I’m sure they’ll come up with more stunning blocks over time. 

For now, I find that all the basic blocks you’ll need for a fully functioning website are there. So if you want to save time in developing a website, I suggest you give this a try!

If you’ve built cool projects with Breakdance and/or Windmill Library, please share them in the comments.

Want to Learn Even More?

If you enjoyed this article, subscribe to our free 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
Most Voted
Newest Oldest
Inline Feedbacks
View all comments