HEY

Participate in the next Webflow Challenge!

Webflow: 15 Things you need to know (the complete list)

Webflow: Creating a site has never been easier, but I think it's not for everyone.

Updated on

14/12/2020

Webflow: 15 Things you need to know (the complete list)
Webflow: 15 Things you need to know (the complete list)

Webflow: It's true that creating a site has never been easier, but I think it's not for everyone. Only those who have the motivation and perseverance to become webdesigners will be able to do it, in my opinion. And if you think you can do it, that's more than enough.

There is currently a wide range of tools available to create high-performance sites easily, including Webflow. The latter stands out from the others by its ease of use. You'll see, after you've read this guide through to the end, you'll have an idea of what to expect and the benefits you'll gain by using Webflow.

#webflow #wordpress #squarespace #shopify #wix

🌈 Survey

What do you use to create Web Sites?
Wix, Squarespace, Wordpress, Shopify, or Manually?

Give me your opinion in comments!

Summary

1- to create a website design
2- to manage text content
3- to test and publish your website
4- to open an online shop

Conclusion

Video

What is the Webflow platform?

Webflow surfaced in 2013, and its authors are none other than two brothers with a passion for technology and the Internet and an associate. Here's a link about them

Webflow is a tool for creating websites. It is similar to Wix in that you can create sites there easily, using drag and drop, and therefore without code (but obviously better); and to Wordpress because it is possible to manage the contents of your site or blog via Webflow.

I am aware that this definition may not be enough for you. That's why I've written this comprehensive guide on Webflow.

As this is a platform, you need to create a free account that allows you to create 2 projects. It's perfect to start mastering the tool. Click here to create a Webflow account

First step on Webflow?

The first thing to do if you want to start on Webflow is to register on the platform. All you need is some contact information: your email address and your password. All you have to do is wait a few minutes for your registration to be validated, and the rest is open to you!

Why don't you log on? You finally have the Webflow interface in front of you. You also have access to different site templates ready to be used on Webflow (and there's something for everyone), but fortunately for you, customization is still possible :) It can happen that none of the templates fit you. This is where you need to use your creative skills and create your own design. By the way, the interface is easy to understand. Try it for yourself; you'll see that the drag-and-drop functionality is very easy.

Let's assume you've finished your project, that you're quite satisfied with your work. The last step is to publish the site. On this button, other functions are also possible: add page, export codes, design preview...

Webflow Training
Webflow Training

What is Webflow for?

This guide will not be enough if I write a user manual for Webflow. On the other hand, I can say that Webflow is easy to use , as long as you are familiar with this site creator. I would even go so far as to say that the user experience with Webflow is the most fluid of all the other CMS I have ever known.

So what's the role of Webflow? Here are four of them:

  • to realize a website design
  • to manage text content
  • to test and publish your site
  • to open an online shop

1. To realize a website design

On the Webflow interface, you will see a window almost similar to the Photoshop one (but of course, it is not used to edit or process an image). It is an HTML/CSS automation tool. On this bar, you will be able to write, customize... codes in order to make your site even more beautiful. But of course, this is not mandatory. Everything can be modified from the page itself, visually.

If this window exists, it is so that you can understand how they work, and this is true even for those who know nothing about the codes. Over time, as you come into contact with this world, you will come to understand them.

Even though Webflow allows you to create a site without touching the codes, don't expect to see an empty window (unless there's nothing on the page). Indeed, there is an underlying system in Webflow that allows you to generate these codes automatically. Whenever the page is modified, the codes are changed.

Create a design from predefined templates or a blank page

You have the choice between working on an empty page or using a predefined template. Some of them are free, some are not. If you want something more original, you'd better turn to the premium templates (there are hundreds of them in the template library). Their price is between 40 and 80 dollars.

Where do these models come from? That is the question. Contrary to what some might think, they do not come from Webflow. On the contrary, they were created by people outside the company. They formed a Webflow community, made up of professional web designers and developers.

In short, if you have extensive skills (both on codes and on Webflow), I advise you to start from an empty page. The predefined templates are rather made to get familiar with the tool, and therefore for beginners. However, nothing prevents experienced users from using them from time to time.

Webflow Training
Webflow Training

Create an interactive design

One of the things that distinguish Webflow the most from all other site creation tools is the ability to create animations (transitions, transformations of an element, etc.). With more traditional tools, this task seems impossible to achieve! But then again, if you've done it, you know there's a lot of work behind it; you would have had to write long lines of code.

So, if I asked you to choose between a huge amount of work and a few clicks to achieve the same result, what would you have taken? I think I know the answer. So to do that, go to the interactions panel and click on the lightning bolt icon. A wide range of choices depending on the status of the page you want to modify are available there.

2. To manage content (CMS)

From the page to be designed, a live modification of the contents is possible on Webflow, be it blog articles, team member sections or customer testimonials...

But how can they be changed? Just go to the tab on the left side of the screen, after you have added a content field. So much for the CMS back-end.

Did you know that there is also thewebflow editor? This allows you to publish new content on an existing page (static or dynamic). It is very popular with both site creators and their team and customers, especially because of its ease of use. No plug-in required, unlike other CMS creation tools such as WordPress.

Before, the creation of a multilingual site seemed impossible on Webflow. Fortunately, this has changed thanks to the appearance of a third party extension: Weglot . Moreover, I also use it for my site and those of my customers.

3. To host and develop your site

Now that you've chosen the design you like and added all the interesting content, all that's left to do is to publish the site. It's that simple! In fact, it has never been easier. Just click on publish and a drop-down list will appear. You will be asked to choose between the sub-domain of webflow.com and your custom domain. For a first publication, it would always be better to publish on the sub-domain. Once you have finished testing the whole site, you are finally free to publish on your own domain.

How exactly does that happen? I touched on a bit earlier, but as a reminder, you have to proceed this way:

  • For the free plan, you will be entitled to 2 static pages to publish. Here, you are still only entitled to one sub-domain nomdusite.webflow.com. If you want to take it to the next level, simply upgrade your hosting offer.
  • Then you'll get a premium plan. There at last, you will be able to publish on your personalized domain.

To sum up, Webflow offers in-house hosting. This avoids users having to worry about the different types of hosting on the market. All the more so as other advantages are present:

  • You are spared the manual tasks associated with hosting, such as updating it manually. Indeed, Webflow collaborates with powerful providers such as Amazon Cloudfront and Fastly.
  • The content delivery network (CDN) is immediately available in the proposed plans; a feature that allows Internet users who navigate on your site to access it without any problem, wherever they are (in terms of geography). Additional payments are therefore unnecessary.
  • Loading time is fast.
  • The site's availability rate is high, almost 100%, regardless of site traffic peaks or attempted cyber attacks.
  • An SSL (secure sockets layer) certificate is also integrated.

This type of accommodation is ready to use. However, if you prefer to export the codes and import them to another hosting, you are free to make your choice.

Webflow Training
Webflow Training

4. To carry out an e-commerce activity

The e-commerce version has only recently been available on Webflow, but I promise you it's worth it! Its functionalities are very complete:

  • product inventories
  • product stewardship
  • baskets
  • payment
  • customer emails
  • self-hosted payment page...

Even better, for each of these features, customization is possible; obviously, you won't even need to have HTML or CSS skills to achieve it.

However, the prices are different.

If you are already using Webflow e-commerce, you are in the best position to know that the team is constantly trying to improve it. Their goal is surely to compete with the biggest tools such as Shopify.

How much does Webflow cost?

It would take a long time to explain, but to help you better understand, I've categorized the plans as follows:

The free plan

Although free, this plan offers the full functionality of Webflow. The only catch is that you have to work on a sub-domain (nomdusite.weblow.com). For a custom domain, and therefore, without this extension webflow.com, you have no choice but to subscribe to one of the paid plans that I will explain in the following paragraphs.

Anyway, if you're planning to get into webdesign, but you're only just getting to know Webflow now (or just recently), this free plan is for you. It helps you get familiar with the platform and test if its performance meets your expectations. 2 pages will be at your disposal, which is more than enough for a first learning experience. These are statistics pages. Once you feel ready to get started, you know what you have to do: choose a paying plan adapted to your project.

Once the free plan is no longer enough for you, you will have to make 2 payments.

The first is to pay for the Webflow platform and the use of ci. And the second one is to pay for the hosting of the Website created on the platform.

Here are the details of the tariff

1. Designer plan

This allows you to manage several projects at the same time. It is also divided into 3 sub-categories. It's up to you to find the one you're interested in.

The starter

It is free, but unlike the Hosting Plans, the hosting of your site (if you choose this offer) is done by Webflow itself.

Offer lite

$16 will be paid to you for the Lite offer. Its perk? You can handle 10 projects simultaneously.

Pro Offer

It costs $35, which is not much for a professional. The advantages are not the least: the number of sites you have access to is unlimited.

You ever heard of teamwork? Actually, it's allowed for the pro bid. Maybe you even want your client to have a preview of the project before delivery.

Teamplans

Anyway, I saved the best for last: the team plans. Usually, agencies use this offer, but that doesn't prevent you from using it if you're dealing with a big project. You will certainly have a team you work with: other designers like you, developers, writers... In short, a team of freelancers. But then again, this plan splits in two.

Team offer

$35 is what you need. Just like the designer plan, you can invite your colleagues or clients to the project in question. But here are the extra features: there will be a dashboard from which you can manage the team.

Large Team offer

The advantages are rather the same as those of the previous offer, the only difference being that this one is more suitable for large-scale works.

In short, if I were to summarize these plans, I would categorize them in two, as follows:

  • Account-based offer: the choice is mainly based on the number of people in your team who will be able to use Webflow.
  • Offer according to the use of the site : this one is especially adapted to those who have big e-commerce projects, and thus, expect an important traffic on their site.

2. Hosting plan

You will still have to choose between 3 sub-categories. Let's start with Basic Hosting, which is available at a rate of $12 per month. As it is the basic, the basic features offered are: 500 form submissions and 25,000 monthly visits.

The second choice is CMS Hosting? Its rate is slightly higher, as it is $16. It differs from the first one in that there are 2,000 CMS tools at your disposal. The number of form submissions is 1,000 and the number of monthly visits can be as high as 100,000. It is also possible to access a CMS API thanks to CMS Hosting. Finally, you will have 3 different editors at your disposal.

Finally comes the hosting business. A little more expensive, it's $36, with 1,000 CMS tools, 10 authoring editors and unlimited form submissions. Monthly visits can be as high as 1,000,000.

A free plan is available here, except that if you go for it, you will have to choose a hosting outside Webflow.

The fact that you choose an offer that counts does not mean that you can no longer combine it with the other formula. On the contrary, you can take two.

In any case, I advise you to consult the source page of these Webflow rates before making your final decision.

Webflow Training
Webflow Training

Webflow and its drawbacks?

I'm not going to lie to you: Webflow is not without its drawbacks. As they say: Nothing's perfect... :

  • If you have never created a site before, you will need to take the time to familiarize yourself with the interface. Besides, there's no hurry. But once you've done the trick, you'll see that nothing is difficult!
  • I got a little close to that earlier. For a multilingual site, you'll have to use an external extension (but it's the only one, don't worry!). Webflow is indeed limited on that side.
  • I think without the pricing summary picture, you'd be lost. The pricing structure is complex.

In any case, the disadvantages outweigh the advantages.

Why use Webflow?

Given its price and the few drawbacks I've just listed, are there any other reasons why you should use Webflow? Here are 11 good reasons to use Webflow today.

  1. It's economical. For a first use, you don't need to pay anything. A free plan is offered by Webflow for the different plans. Especially since there is no free period of use. It's permanent.
  2. It's easy, because no one needs to master HTML or CSS to use it. The drag-and-drop function is very interesting.
  3. In addition, content management and editing is possible. They are even very intuitive.
  4. On the SEO side, there's nothing to worry about. All sites hosted on Webflow can be easily referenced on the web. Even better, for premium plans, it is possible to have additional SEO management tools.
  5. A whole range of templates is available on Webflow; they can be used as a basis for beginners, making learning and familiarisation easier. For the more professional, they will be a source of design inspiration?
  6. Always in terms of design, you kill two birds with one stone. All you have to do is create the design on the desktop; the design on the mobile is created automatically. But you can always customize it.
  7. Let's not forget the point that particularly distinguishes Webflow from other tools: it allows a site with custom animations.
  8. All codes that are automatically created during the design of the site can be exported.
  9. Webflow is very convenient. Once the site is finished, you are able to test it to see if it really works. All you have to do is publish it on the sub-domain. This is done in two clicks maximum.
  10. With Webflow, you can create all kinds of things, from static to dynamic content : pages, blog posts, reviews, team member introductions, etc.
  11. The hosting of all sites created on Webflow is provided by Amazon Cloudfront. Be sure that the navigation on your site will be done quickly, which has a positive impact on the SEO.

How about you? Do you think you should use Webflow?

Given all that we have just seen on Webflow, it is made for all site creators who want to combine flexibility and efficiency. Indeed, thanks to Webflow, you can not only create a design site , but you can also manage content easily .Hosting being free and internal, it gives you a lot of advantages. The Internet users who will follow you will also benefit. Finally, the e-commerce version of Webflow is just great! The functionalities are complete (or almost). In any case, the team keeps improving it day by day.

To get a taste of what Webflow has to offer, what do you say you try it for yourself. Yes, I would, a free trial is possible.

Webflow Training

What are the advantages of using Webflow compared to others?

Its first asset is that it is intuitive.

This is what its familiar interface for graphic designers proves: a Photoshop look that allows you to create a Website. If you've ever used Photoshop before, you'll soon get the hang of it.

Webflow is therefore a Pro tool for web designers (or aspiring web designers) because it allows you to do just about anything you want. However, it should not be confused with drag and drop tools like Wix or Sketch, Adobe xD or Figma.

Webflow is html, css and Javascript code created in a visual way with the constraints of the real "Code"; But much more pleasant because it is 100% visual.

No need to write lines of code to create a Pro Website.

What is the level of customization of Webflow?

Creating a website with webflow is creating a custom website. It is indeed endowed with several functionalities that allow you to obtain an original site and above all, 100% adapted to the expectations of your customers!

To carry out some modifications on the architecture of the site, you just have to click on the concerned elements. Especially since many formats, styles, colours, fonts, etc. are available on Webflow.

The customization is infinite because you will create a structure from a drawing you will have made on Sketch, Adobe xD, Figma or in a simple notebook.

Again, knowledge of the code is not required.

What is the time saving for the creation of a Webflow Website?

One thing leads to another: ease of use means unparalleled time savings! Once you have the platform in your hands, everything quickly becomes intuitive and will save you an incredible amount of time.

A Web page on Webflow can be realized in 1 hour according to your skills and the design to be realized.

If you prefer to start from a Theme, Webflow offers a large catalogue of ready to use Themes

Moreover, if you are one of those who know how to code, you will be able to add code manually this time to go beyond the basic functionality of Webflow.

Webflow Training
Webflow Training

What are the Webflow integrations?

I could write a full article for that point, which I will soon! It goes without saying that Webflow is super connected to all modern software today.

This means that you can integrate almost any No code tool and software.

A simple method is for example to use Zapier to connect Webflow to another software without having to write a line of code.

How does the setting up of a Webflow Website happen?

As Webflow takes care of the hosting part, you only have to connect your domain name to the platform. This procedure is not complicated and only takes a few minutes.

The first time may be a little more complicated than expected, so here's a little recap for the maneuver:

1- Copy the 2 A records that Webflow gives you in the parameters
2- Paste them in the DNS part of your host.
3- Then Copy the CNAME that Webflow gives you
4- And then paste it also in the DNS part of your host.

Then you have to wait sometimes an hour, it depends on your host.

Once you've turned Webflow green, all you have to do is publish.

Team collaboration on Webflow

Collaboration on Webflow is also possible. Let's say you want to work with a teammate on the same project at the same time, it's possible.

You must use the "Team Plan" formula which will have a separate price plan from the Solo plan and the amount will then be increased according to the number of teammates.

What's really practical is that the backup is done automatically, so there's no risk of losing data.

The Growing Francophone Community (and the Webflow Mutual Aid Group)

If you want to get started on Webflow, you're probably going to need some help, especially in the beginning. That's why you can join the private Facebook group "Webflow Mutual Aid" to discuss and share your experience.

There is always someone to answer your requests (including me too) so it's a good way to start the adventure.

Conclusion

In the end, all you need is a willingness to get there and a dose of motivation to read and analyze this complete guide :)

And I can also tell you that in all the years I've been using Webflow, it's gotten easier and easier. Not only do the functionalities complement each other as you go along, but they are super intuitive.

All of this will help you create professional, personalized and unique sites for you or your clients, whether you work alone or in teams.

Webflow Training
Webflow Training

Comments

Coffee break

4 items you might like

FREE TRAINING

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