Hi there! I’m Anastasiia Grianchenko - no-code developer, UX designer and founder of Elish.

I’m here to introduce you to Webflow features and all. But most interesting thing for you is how to build your professional business website with Webflow, right?

Grab a drink of your choice, and let's start our journey!

Webflow is a responsive web design tool, CMS, and hosting platform which empowers designers to create stunning websites.

Webflow in web development

According to Webflow, over 500,000 businesses, start-ups, brands, studios, and freelancers use their platform to create and host websites today. 

I’ve built this very platform joinelish.com for you on Webflow as well. Elish website has all features I needed and the best part - I’ve built everything myself!

Webflow has become an absolute game-changer since its launch as a powerful no-code web design tool, leaving WordPress, Wix, Tilda, and other outdated website building platforms behind. I would say webflow is a visual programming platform that combined web design and front-end development we were used to.

Webflow made it simple, affordable, and user-friendly. It created an opportunity to build extraordinary user experiences and quality digital products for both developers and users.

Why build my business website on Webflow again?

Webflow is my tool of choice building professional websites for my clients. It provides me with a flexible and powerful solution to create fully custom websites, where i’m not limited by templates or pluggins. Sounds like a developer dream, but its true!

You create a web-page layout on a canvas called the Designer Panel: you use built-in modules as drag and drop to build blocks of content and style them. Examples of such modules are sections, div blocks, headings, paragraphs, text blocks, images, videos, sliders, tabs, forms, maps, and many other modules that empower your design process.

Webflow empowers designers to build professional, custom websites in a completely visual canvas.

You assign a class to each element. Those classes are reusable and they make it easy to keep your website design consistent. 

You’re building a page where you want to place text blocks of 3 different sizes: big, regular, and small. To do this, you simply add the paragraph or the text block elements to your canvas and give them classes: “text-big”, “text-regular” and “text-small” (or call them whatever you want). After you gave them classes, you can style them: adjust their font size, weight, color, line height, and any other parameters you desire.

You can reuse the classes you create throughout your website. And if you make changes to any of the classes, all the other elements of the same class, will inherit those changes.

You can also create combo classes. For example, you have an element with a class of “text-big” and you want to make it in red color, but you don’t want to change the other elements of the same class. In this case, you add a so-called combo-class to the “text-big”, let’s call it “red”, and adjust the font color. It is done!

It's also fast and easy to move objects around and make changes to the layout. Overall, I applaud their UI-UX standing.

Webflow CMS makes content updates easy.

One of the greatest Webflow features is CMS - a content management system for creating collection lists. A collection list is a group of content units of the same category, e.g. blog posts, team members, photos, client reviews, etc.

For example, you can organize your blog posts and writers in 2 different collection lists - blog posts and writers correspondingly. It automatically creates a dynamic template page for each collection which you build and style as you want. That means you will reuse each template for all of your items within the collection, so you don’t have to create a new page every time you want to add a new blog post or when you have a new hire.

You can also export, update and import your collections as a .CSV file from Microsoft Excel or Google Sheets. Powerful time-saver, isn't it?

Importing data from a .CSV file to Webflow collection is invaluable when you need to move huge number of pages with similar type of content from your old website. Or if you have an idea of creating multiple pages - just mark down the new collection in webflow and update it with a file export!

100% Responsive website builder

Another cool feature is responsiveness. You start building your webpage for a desktop, and then you switch your canvas to the tablet mode and adjust the elements' sizes, location, whatever, right away!

After that you switch to a horizontal mobile and later to a vertical mobile mode to make your adjustments there. As a result, you get a perfectly responsive webpage that fits all screen sizes. The changes you make in each mode affect only smaller screen sizes, so be sure your site looks great on all types of devices.

You can also set custom screen size adjustments, for example, when you want to make sure your website will look beautiful on a bigger screen like a retina.

Is Webflow good for SEO?

Who needs a website when noone sees it? Yep, nobody. The next fantastic benefit of Webflow is built-in SEO tools that make your website discoverable on the web. 

Set and update meta such as pages titles and descriptions and OpenGraph tags in Webflow native interface. It's easy to put those for your CMS too! All content on Webflow sites is rendered on their servers and served through SSL. So be sure Google indexes and prioritizes your pages.

Webflow has Sitemap pre-built for you, and even offers content improvement advice when you are publishing a new page! It will give you a note of the quich SEO improvements to your new page to make you more visible on Google. It gives advice about fixing image alts, broken links, adding Meta and all the small things you might have missed when creating your dream business website.

Custom code for webflow projects

Webflow removes your creativity limits by giving you custom code fields. That means if you feel like built-in modules are not enough for you, you can code a fully customized experience and make it live on your website. It relates to Javascript things you might want to use in your project, like complex interactions and building custom fields.

You can also make changes to the modules mentioned above. For example, Webflow's slider navigation dots are not customizable in the native Designer's Panel. But you can easily change them the way you want using a custom code.

Check out webflow tutorial on using the custom code here.

Flexible interactions (website animation)

Webflow makes it easy to create click and hover interactions without any coding skills - in just a few clicks. You can also make your website dynamic by using pre-build animations like sliding in/out, fading in/out, flipping, and other. Or create custom and absolutely crazy things! 

Basically, you choose an element you want to animate, then generate an interaction type for it, e.g.:

• on click,
• on/off hover,
• when the item is scrolled into/out of view, 
• when the page starts/finishes loading,
• when the page is scrolled up/down,
• while the page is scrolling;

Then you set up behavior (moving, scaling, changing size/color/opacity/etc.) and proper timing for your interactions and manage them right in the interactions panel. You can set an easing type by choosing from an extensive collection of pre-built units (linear, quad, cubic, etc.).

It's also easy to integrate Lottie animations to your page using a build-in module and setting timing for it. Excellent job, Webflow!

Get up and running with your own website fast!

Many design companies and studios switch to Webflow as it is easy to get started. If you are familiar with basic coding, you will feel at home in the Designer Panel interface. 

If not, you can start learning the tool with free video lessons from Webflow University. It took me just a couple of hours to start my first project from zero level, thanks to their lessons library. Don’t know how to build something? Trust me - they’ve got a video about it. 

Webflow hosting and code export

When it comes to publishing your website, you'll be pleased to know that there are two options for your hosting:

• You can host your project right on Webflow by choosing the suitable plan for you (I’ll talk more about it below);
• You can export the code of your website for free and host it anywhere else.

Depending on your budget, you choose whatever is best for you. If you want to export and host some other place, you can still store and manage your project in your account and re-export it every time you need an updated version of your website.

If you choose to host on Webflow, you can connect a custom domain to your website if you have one or buy a domain right there.

Webflow page speed

If you chose to host your website on Webflow, good news - you’d get the fastest loading!

47% of your visitors expect your site to load within two seconds, and 40% of them will leave if it takes more than three seconds. Each second of delay decreases customer satisfaction by around 16% and reduces your sales by 7%.

To save you from boring technical details, you want fast servers located closer to your website visitors to provide the fastest page load speed. If your visitors are worldwide, so should be your servers. 

Webflow’s hosting is built on Amazon AWS’s CDN servers - a leading hosting provider that has servers distributed in 11 regions worldwide.

Webflow platform and hosting Pricing 2023 (updated)

Webflow has site plans and workspace plans.

To outline it all, you pay Webflow once you get serious about using the platform to build your professional websites. Then you pay them every time you want to host a website on their server. You choose the plan that suits you the best and save money if you pay annually.

Site plans

Those are the hosting plans for your projects. They are:

• Basic - $14/mo* 
• CMS - $23/mo* 
• Business - $39/mo* 
• Enterprise - price on request;

Separately, there are Ecommerce plans:

• Standard - $29/mo*
• Plus - $74/mo*
• Advanced - $212/mo*

* per month if you pay annually (prices are up to 22% higher if you pay monthly)

All site plans include:

• Automatic backups and versioning,
• Password protection for whole website or individual pages,
• Advanced SEO controls such as automatic sitemaps and 301 redirects,
• The fastest page load via Amazon’s CDN servers,
• SSL certificate and 24/7 hosting monitoring,

Workspace plans 

Those are for building websites. Workspace plans are suitable for in-house teams, as well as freelancers and agencies. These plans allow you to collaborate on your project with your fellow designers and developers so that you can be logged in to a workspace from different accounts simultaneously.

Workspace plans are:

• Starter - free; 1 seat (team member) maximum; 2 projects maximum; no code export;
• Core - $19/mo*; up to 10 projects; up to 100 static pages and 50 CMS items; unlimited project transfers; code export;
• Growth - $49/mo*; unlimited projects; up to 100 static pages and 50 CMS items; unlimited project transfers;

For Freelancers and agencies the plans are:

• Freelancer - $16/mo*; up to 3 seats; 10 unhosted sites; free guest access in client Workspaces;
• Agency - $35/mo*; up to 9 seats; unlimited unhosted sites; free guest access in client Workspaces; manage publishing permissions for your team;

* per month if you pay annually (prices are up to 33% higher if you pay monthly)

What’s next?

Webflow has brought web development to a new quality level empowering your design process through straightforward drag and drop website builder, enhancing it with interactions, CMS, hosting with the fastest page loading, and SEO tools.

It makes it faster and easier to build websites, even complex ones like e-commerce, and focus on delivering a great user experience.

You’ve made it this far, so you must be interested in trying Webflow yourself. And I'll be happy to share some ideas on how you can get started.

Check out the new Webflow 101 course rebuilt and reshoot for new users to help them get started with Webflow under 16 lessons or under 2 hours. Upon completion, you will receive a certificate and can start building fully functioning websites.

Also, check out Webflow university for more free tutorials and guides. Cheers!