No-code

Webflow

Site builder visual profissional com CMS e código limpo

4.4 Plano grátis disponível

Para criar seu primeiro site no Webflow: crie a conta gratuita, comece de um template ou de uma página em branco, monte o layout no Designer (com caixas, classes e o controle visual de HTML/CSS), adicione conteúdo dinâmico no CMS se precisar, ajuste o responsivo para mobile e publique (no subdomínio grátis ou no seu domínio, com plano pago). Este tutorial mostra cada etapa — e onde está a curva — para quem nunca abriu a ferramenta. Por ter mais profundidade, o primeiro site leva mais tempo que num builder simples, mas o controle compensa.

Este tutorial mostra como criar seu primeiro site no Webflow — e onde está a curva. É a ferramenta mais poderosa do nicho em controle de design, então o primeiro site leva mais tempo que num builder simples; em troca, você ganha um controle que vale o aprendizado. O plano gratuito basta para construir e testar.

Passo 1 — Crie a conta e escolha o ponto de partida

O Webflow roda no navegador (use o desktop para o Designer). Crie a conta no plano gratuito e escolha como começar: um template (recomendado para aprender — veja como um site bem feito é estruturado) ou uma página em branco (controle total, curva maior). Para o primeiro site, partir de um template e adaptar economiza tempo.

Passo 2 — Monte o layout no Designer

O Designer é o coração do Webflow. Adicione elementos (caixas, textos, imagens), aplique classes de estilo (como CSS) e ajuste layout, espaçamento, tipografia e animações. Ele reflete a estrutura da web — é onde a curva aparece, e onde está o poder. Dedique tempo a entender caixas e classes; é o que destrava tudo.

Passo 3 — Adicione conteúdo dinâmico no CMS (se precisar)

Se o seu site tem blog, portfólio ou catálogo, use o CMS: crie uma Coleção (ex.: “Posts do blog”) com os campos desejados, adicione os itens e desenhe um template que exibe esses dados. Assim, cada item novo aparece automaticamente no layout — é o que torna o Webflow adequado para sites com muito conteúdo.

Passo 4 — Ajuste o responsivo

Use os breakpoints (desktop, tablet, mobile) para adaptar o layout a cada tela. Desenhe primeiro no desktop e refine nos tamanhos menores, garantindo que o site fique bom no celular. É um passo essencial — a maior parte do tráfego é mobile, e o Webflow dá controle total sobre isso.

Passo 5 — Publique

No plano gratuito, publique num subdomínio webflow.io para testar. Para o seu domínio próprio, assine um plano de site pago, conecte o domínio (apontando os registros de DNS) e publique com um clique. A hospedagem, o SSL e a CDN são gerenciados pela Webflow — você não cuida de servidor.

Passo 6 — Aprenda com a Webflow University

A curva assusta no começo, mas o Webflow University (tutoriais oficiais gratuitos) é reconhecido como um dos melhores materiais para aprender design web e a ferramenta. Use-o para acelerar — em vez de tentar adivinhar cada recurso, siga os cursos e construa um projeto real.

Erros comuns de quem está começando

  • Pular o aprendizado de classes. Sem entender caixas e classes, o Webflow vira frustração; com isso, vira poder. Invista nesse fundamento.
  • Ignorar o responsivo. Um site lindo no desktop e quebrado no mobile afasta a maioria dos visitantes — ajuste os breakpoints.
  • Esquecer o modelo de preço ao publicar. Para domínio próprio, é preciso um plano de site pago (mais workspace) — planeje o custo antes de prometer o site no ar.

Próximo passo

Com o primeiro site no ar, aprofunde nas animações e interações (um diferencial do Webflow), no CMS para conteúdo dinâmico e na otimização de SEO técnico (meta tags, estrutura). Para entender se o Webflow é a ferramenta certa para o seu caso, veja o review completo; para montar o plano certo (site + workspace), a análise de preços. Para sites mais rápidos de publicar, compare com o Framer.

Começar com Webflow

Parceria · pode gerar comissão, sem custo a mais · como funciona

Perguntas frequentes

Quanto tempo leva para criar um site no Webflow?

Mais que num builder simples, por causa da curva. Partindo de um template, um site básico sai em algumas horas; do zero, com layout próprio e CMS, leva mais. O tempo inicial é maior porque o Webflow expõe a estrutura da web — mas, depois de aprender, você ganha controle e velocidade nos próximos sites.

Preciso instalar algo para usar o Webflow?

Não. O Webflow roda no navegador (o Designer funciona melhor no desktop). Você cria a conta e já começa a montar o site. A hospedagem é gerenciada pela própria Webflow, então não há servidor para configurar nem software para baixar.

Como começar um site no Webflow: template ou do zero?

Para aprender, comece de um template (há gratuitos e pagos) e modifique — você vê como um site bem feito é estruturado. Do zero (página em branco) você tem controle total, mas a curva é maior. A maioria dos iniciantes ganha tempo partindo de um template e adaptando ao seu conteúdo e marca.

O que é o Designer do Webflow?

É o editor visual onde você constrói o site: adiciona elementos (caixas, textos, imagens), aplica classes de estilo (como CSS), define layout, espaçamento, tipografia e animações. Ele reflete a estrutura da web — daí o poder e a curva. Dominar o Designer é o que destrava o controle fino do Webflow.

Como usar o CMS do Webflow?

Crie uma Coleção (por exemplo, 'Posts do blog') com os campos que quiser (título, imagem, texto, data), adicione os itens e desenhe um template que exibe esses dados dinamicamente. Assim, ao adicionar um post novo, ele aparece automaticamente no layout. É o que torna o Webflow adequado para blogs e sites com muito conteúdo.

Como deixar o site responsivo no Webflow?

O Webflow tem breakpoints (desktop, tablet, mobile) onde você ajusta o layout para cada tamanho de tela. Você desenha primeiro no desktop e refina nos breakpoints menores, garantindo que o site fique bom no celular. É um passo essencial — a maioria do tráfego é mobile, e o Webflow dá controle total sobre isso.

Como publicar um site no Webflow?

No plano gratuito, você publica num subdomínio webflow.io para testar. Para publicar no seu domínio próprio, é necessário um plano de site pago: você conecta o domínio (apontando os registros de DNS) e publica com um clique. A hospedagem, o SSL e a CDN são gerenciados pela Webflow.

Dá para usar um domínio próprio no Webflow?

Sim, num plano de site pago. Você conecta o seu domínio configurando os registros de DNS conforme o Webflow indica, e o site passa a ser servido nele, com SSL automático. No plano gratuito, o site fica no subdomínio webflow.io — bom para testar, mas não para publicar profissionalmente.

Como aprender o Webflow mais rápido?

Use o Webflow University — os tutoriais oficiais (gratuitos) são reconhecidos como dos melhores do mercado para aprender design web e a própria ferramenta. Comece por um template, siga os cursos e construa um projeto real. A curva do Webflow assusta no começo, mas o material de aprendizado encurta bastante o caminho.