Participate in the next Webflow Challenge!

How do I use Webflow's prefabricated layouts?

I found a way to design a website quickly: using Webflow's prefabricated layouts. How does it work?

Updated on


prefabricated webflow layouts
Photo by Andriyko Podilnyk on Unsplash

How long does it take you to complete the mock-up of your site? Actually, I found a way to do it quite quickly: using Webflow's prefabricated layouts. How does it work?

Why do we need prefabricated layouts from Webflow?

Webflow is very professional. That's why, thanks to this platform, you can create websites of all kinds: from the most classic to the most stylish. You might think that it is therefore difficult to manipulate. But no, it's not.

Without having to code, you can make very complex sites! What more could you ask for? I repeat: Webflow is suitable for beginner web designers. Moreover, it is precisely for beginners that Webflow's prefabricated layouts have been set up (this does not mean that professionals cannot use it).

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

prefabricated webflow layouts
Photo by Bartosz Sujkowski on Unsplash

You haven't registered yet, and yet you're very interested in everything he has to offer? I advise you to register on Webflow :) You won't regret it. Moreover, I give you daily advices to improve yourself more and more on this platform. Even better, I offer a Webflow training course.

How do Webflow's prefabricated layouts work?

This is not a ready-made site. It is the elements that make up the site that are prefabricated, i.e.: the image galleries, the navigation menus and any other sections. You only have to choose the sections you would like to put on your site, and drag them onto the page concerned. All that's left to do is to customize all these elements according to the design you want.

prefabricated webflow layouts
Photo by Volodymyr Hryshchenko on Unsplash

To do so, you'll have to go to the sidebar on the left. Then click on add (the plus-shaped button). You can choose between :

  • add items
  • add symbols
  • add layouts

In this article, we will focus in particular on layouts. It contains different elements (everything you will eventually need to create a complete site: navigation menu, hero, galleries, testimonials, call to action...).

You've probably noticed: no need to resort to codes. The drag and drop function will be the most used. However, once everything is finished, you can export the codes. They were automatically generated by Webflow when the page was modified.

prefabricated webflow layouts
Photo by Nordwood Themes on Unsplash

Creating a Webflow website from prefabricated layouts is very simple and convenient! While beginners use it to make their first step in Webflow, professionals are used to using it to make website layouts quickly. However, these layouts are somewhat restrictive. In some cases, you won't be able to modify elements (their size for example).

YouTube: Webflow's prefabricated layouts (2020)

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like


Register here to receive the free Discovery Training

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training