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.
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.
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.
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.
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.
Once you’re done, save the changes.
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.
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.
Back to your Breakdance editor, paste the block.
Then, modify the style as you want. Click save.
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.
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.
Feel free to modify the style. Here, I’ve changed the background image and style of the Call-to-Action (CTA) buttons.
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.
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.
Here, I’ve added a profile picture to make the testimonials look nicer.
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.
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.
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.