Building blocks for faster prototyping

Build real responsive pages in minutes

Learn quickly on the fly, improve content in saved time
1
Jump-start your prototype or page with BlueKit template
2
Delete blocks you don't need, copy-paste or move them
3
Write in real content, match visuals, style any element
Clone this templateSend feedback

Link webflow videos:
- adding extra fonts
- adding backgrounds
- working with symbols
- embeding other code
- tips for copywriter (editor)

See how to use it
Page build example (coming soon)
Useful tips & tricks
☰ menu
Go to
Styles and icons
Navigation
Hero blocks
Content blocks
FAQ
Footer
Start your projectWatch video tutorials
This is help-bar
You will find info how blocks work here. Don't feel like reading? Just watch the video inside instead :)
Elements for bulk styling & video

Icons
Copy icon symbol bellow or search for it at fontawesome.com and paste it to selected element
You can change size and color in the right panel under Typography

To use it, select FONT: FA Solid Icons
To use it, select FONT: FA Regular Icons
To use it, select FONT: FA Brand Icons
We just launched new awesome thing. Check it out!
To replace logo image, click on the image placeholder then gear icon. Select image and upload image from your computer. It will resize automatically.
Click on the link text or logo image, select parent element Brand and add links to this page, external page, email, phone etc.
(i) You can easily switch left and right blocks (here and anywhere else). Select Container, go to right sidebar and under Layout click "Switch"
Also content will automatically align vertically so add or delete whatever you need!

No more static prototypes

Simplify your landing page development, make it faster and responsive for any device, focus on content

Clone this templateTell me more
To change the video, click on it, go to right panel Settings then paste Youtube/Vimeo URL and hit Enter to load it. Psssst there's also video background in left sidebar Elements if you want to experiment

Build your landing page during Design Sprint in minutes

Simplify your landing page development, make it faster and responsive for any device, focus on content

Clone this templateTell me more
Need non-breaking space to hold words together? Use SHIFT+SPACEBAR

No more static wireframes

Simplify your landing page development, make it faster and responsive for any device, focus on content

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This hero is built with a flex layout, aligned and justified so that the content will always be centered horizontally and vertically. To change this section’s background, select the “Hero Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast.

Build your landing page
during Design Sprint in minutes

Just like that! Clone the template and speed up your process

Clone this templateTell me more
Launching soon

No more static wireframes, we hope

"But I like static prototypes that won't display properly on user's device."
Stay with your old workflow then :)

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Delete or add new logos, they will distribute evenly, automatically with the power of flex!

Line of fancy logos

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Supported by
You can udjust the number of columns to: 2, 3, 4 or 6. Select Columns in Navigator (left) and go to Element Settigns (right, second tab)

Very important numbers

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

189
Countries
24
Hours
7
Days
1
Template
Simply copy-paste the icons, if  shows up, just change Font under typography to match the icon type (FA Solid, Regular or Brand) to see the actual icon

You will definitely get

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Free shipping
Badge of honor
Extra gift
Lovely dog
Free shipping
Badge of honor
Extra gift
Lovely dog

Lots of unused features

Simplify your landing page development, make it faster and responsive for any device, focus on content:

  • Lorem ipsum dolor sit amet bmet even cmet, consectetur adipiscing elit elementum.
  • Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet bmet even cmet, consectetur adipiscing elit elementum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Another neat section

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Multipurpose block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero.

Team members

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh.

Clone template

Features

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh.

Clone template

Team members

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh.

Clone template

How to work with this template?

1

Clone template

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Clone template
2

Edit & style it

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Edit template
3

Publish your page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Publish template

Social proof from antisocial people

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Bob Builder

Founder

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maurice Moss

IT person

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Jaime Green

Designer

Slider that will make your client happy

Copy and paste anything you want in there, or set background image

Too much content? Tab it!

Copy and paste anything you want in there

First tab
Second tab
Last so far

Tab title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Try BlueKit

Typical project timeline

Delete or duplicate Timeline Items to match it your idea

Kick-off
This is some text inside of a div block
This is some text inside of a div block
Round 1
This is some text inside of a div block
on a multiple lines,
yeah, not just two!
Round 42
This is some text inside of a div block
This is some text inside of a div block
Final Final v4.8
This is some text inside of a div block
Start new project

We have plans for everyone

Afordable Subscription Pricing

Plans here, plans there, plans everywhere

To test

Free
To show value
Register

Starter

$10
Limited functionality
Select plan

Pay more

$20
We need to pay our team
Select plan
FAQ block text will hide automatically when you preview the page. We keep it visible here for easier editing.
You can also copy the inside blocks and put it in a column.

FAQ

Lorem ipsum dolor sit amet subtext

Here's your burning question
Here's another burning question
Here's one more burning question

Get superb content

  • Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet bmet even cmet, consectetur adipiscing elit elementum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Buy ebook for $9.99

Much SSL, very secure, wow!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Call to action

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Click here to start
© 2020 ACME Corporation Inc.| Privacy Policy | Terms of Use
Go and build something amazing!
Clone this template

Get updates for BlueKit

Thank you! All set, your email was saved and we'll be in touch!
Oops! There was a problem, please try again.
Missing something? Send us feedback
‍
BlueKit for fast prototyping was made with ♥ in 2020 by Marek Lumi,
‍this page uses Webflow affiliate links