Webflow: the essential tool for creating a professional website without writing a single line of code

Webflow is a no-code website builder that allows users to create professional websites without having to write a single line of code. It has become one of the most popular no-code tools in the world, with over 3.5 million users. It allows you to design responsive and innovative websites. It is therefore ideal for people who want to create a website without having any technical knowledge of web development.
Over the years, the Easyweb agency has specialized in the use of this software, which is why we have chosen to present it to you in this article.

Why Webflow?

Webflow is a visual content management system (CMS) that allows users to create websites without having to learn how to code, based on artificial intelligence. The tool (launched in 2013 by Vlad Magdalin, Sergie Magdalin, and Bryant Chou) quickly became popular with web designers and developers looking for a simple and effective way to create professional websites, as it offers a variety of features that make it appealing to users of all skill levels. These features include:

• An intuitive drag-and-drop interface
• A large library of components and templates
• A responsive layout system
• Support for e-commerce
• Free hosting for personal websites

This has set Webflow apart from the competition, because yes, there are many innovative CMSs available in 2024, but let's stick with the one without which our agency would not exist. 🌞

How do I use Webflow?

Webflow is a very intuitive and easy-to-use tool. It consists of three main sections:

• Designer: This section allows you to create the layout and design of the website.
• Code: This section allows you to customize the HTML code of the website.
• CMS: This section allows you to manage the content of the website.

We will now help you use it effectively.

Create a website with Webflow

Choose a layout

Webflow offers a wide range of ready-to-use templates that can be used to create different types of websites. These templates are designed by professional designers and can be easily customized to meet your needs.

To choose a template, you can use the search bar or filters to find a template that suits your needs. Once you have found a template you like, you can edit it to customize it.

If you want to create your own layout, you can use the Webflow editor (intuitive for those new to web design), which allows you to create complex layouts without having to write a single line of code.

To create your own layout, you can use the following elements:

• Sections: which allow you to create independent content blocks
• Components: predefined elements that can be used to create complex layouts
• Grids: for positioning elements precisely.

Add items

Once you have created the layout for your site, you can add content elements.

The text

Text is as important to a website as an engine is to a car. You can modify the size, color, font, and formatting of text according to your expectations while considering the conversion funnel you want to implement.

The images

Images are used to enhance the user experience and also appeal to Google's robots. You can change the size, position, brightness, and contrast of the images you import into your website. Don't forget to convert them to Webp format and compress them before importing, then describe them by adding an alt tag for each one. If you encounter difficulties with this last step, here is an article that will show you two methods for finding missing alt attributes for your web images.

The forms

Forms are used to collect data from confirmed visitors. You can create forms to collect email addresses, contact details, or order information. This will enable you to convert your prospects into customers through automated prospecting, for example.

The videos

Videos are used to add quality content to the various pages of your website. You can easily import videos from YouTube, Vimeo, or your own computer into Webflow. As with images, don't forget to include the content mentioned in the video in the form of an alt tag.

Customize the style

You can customize the style of your site by changing the colors, font, or animations.

Colors

To customize the colors of your Webflow website, you can use the color settings in the panel Stylepanel. These settings allow you to change your site's base colors, accent colors, and contrast colors.

Base color

The base colors are the colors that serve as the foundation for your site. They are used for elements such as the background, titles, and fonts.

To change the basic colors of your site, click on Basic Colors in the Stylepanel. You can then change the following colors:

• Background color: The color of your site's background
• Text color: The color of the text on your site
• Title color: The color of your site's titles
• Link color: The color of hyperlinks on your site.

Accent color

Accent colors are used to draw attention to important elements on your site. They are found in elements such as buttons, links, and navigation elements.

To change the accent colors of your site, click on Accent Colors in the Stylepanel. You can then change the following colors:

• Accent color: The primary color of the accent elements on your site
• Secondary accent color: The secondary color for accent elements on your site.

Contrast color

Contrast colors are used to create contrast between different elements of your site such as borders, shadows, and fonts.

The contrast colors to be modified are as follows:

• Primary contrast color: The primary color of the contrasting elements on your site
• Secondary accent color: The secondary color for contrasting elements on your site.

Cast iron

To change the font on your Webflow website, you can once again use the font settings in the Stylepanel. These settings allow you to change the font, its size, and the style of the text elements on your site.

To change the font on your site, click on Fonts in the Stylepanel. You can then change the following settings:

• Base font: The main font for elements on your site
• Title font: The font used for titles on your site. Note that it often varies depending on the hierarchy of your pages (H1, H2, H3, etc.).
• Button font: The font used for buttons on your site.

The animations

You can add animations to your site to make it more appealing and interactive. To add animations to your Webflow site, you can use the animation settings in the panel. Stylepanel. These settings allow you to add animations to individual elements or to your entire site.

To add animations to your site, click on Animations. You can then modify the following settings:

• The animation effect you want to apply to the element
• The duration of the animation.

Publish your website

Once you have finished creating your site, you can publish it online.

To publish your Webflow website, you must follow these steps:

1. Log in to your Webflow account
2. Click the "Publish" button in the upper right corner of the screen.
3. Select a hosting plan after reading our article on Webflow costs
4. If you already have a domain, connect it to your Webflow website.
5. Click the "Publish" button.

If you already have a domain, you can connect it to your Webflow website. This will allow your website to be accessed at your domain address.

To connect your domain, you must follow these steps:

1. Click on the "Domains" button in the left-hand menu.
2. Enter your domain address.
3. Click the "Connect" button.

Once you have selected a hosting plan and connected your domain, you can publish your website by clicking the Publishbutton.

Pricing plans

Webflow offers three pricing plans:

• Solo: $16/month
• Business: $35/month
• Enterprise: on estimate

The Solo plan is ideal for small businesses or individuals who want to create a simple website. It allows you to create a website with a limit of 10 pages and 100 GB of storage.

The Business plan is designed for medium-sized businesses or freelancers who want to create a more complex website. It allows you to create a website with a limit of 100 pages and 1 TB of storage.

The Enterprise plan, meanwhile, is offered to large companies that need customized features and integrations.

In addition, the Webflow CMS will charge you for your website's domain and hosting fees, as well as other additional features if you require them. That's why we recommend reading our article on the costs of a Webflow website.

Specific features tailored to your project

SaaS site

Webflow is a highly versatile tool that can be used to create different types of websites, including SaaS and e-commerce sites.

To create a SaaS website with Webflow, you need to think about integrating login, profile, payment, and support pages, as well as adding the necessary user management features such as billing and support.

Learn how to create your first SaaS website on Webflow with the attached article Webflow: Creating an Effective SaaS Website.

E-commerce website

A Webflow e-commerce website is designed to sell, which is why it is important to add product pages, a shopping cart, payment and tracking pages, and to integrate the necessary features into the website, such as inventory management, order management, and payment processing.

Find out how to create an e-commerce website with Webflow here.

Templates

Webflow offers a wide range of ready-to-use templates that can be used to create different types of websites. These templates (as shown in the screenshot below) are designed by professionals and can be easily customized to meet your needs.

Here is some additional documentation to help you learn which templates to choose based on your expectations.

Integrations

Webflow integrates with many third-party applications and services, allowing you to create more comprehensive and functional websites. Here we present our selection of the best Webflow integrations to help you improve the traffic you generate and potentially increase your leads.

Conclusion

Webflow is a powerful and versatile CMS that allows users to create professional, responsive websites without having to write a single line of code. It is ideal for small businesses, freelancers, and large companies that want to create an effective website at a low cost.
If you are not very familiar with Webflow, we recommend that you consult with a digital agency specializing in no-code to monitor the progress of your project and avoid unnecessary complications.