Webflow: o que é e como usar essa alternativa ao WordPress?

Você chegou até aqui querendo saber tudo sobre o que é Webflow e como essa ferramenta pode ajudar você a criar sites, e-commerce e blogs? Então está no lugar certo! Criamos um guia (super!) completo, que vai abordar :

1. O que é Webflow?
2. Como criar um site em Webflow?
3. Webflow ou WordPress? O Webflow vale a pena?
4. Qual o preço do Webflow?

Continue lendo e descubra a resposta para todas essas perguntas!

1. O que é Webflow?

O Webflow é uma ferramenta de criação de sites ideal para quem não tem conhecimento em programação e não sabe nada sobre códigos. Para criar e publicar o seu site, basta selecionar os elementos disponíveis na ferramenta e arrastar na tela para colocar onde quiser – organizando sua página como desejar.

Enquanto você usa os recursos da plataforma e escolhe os elementos, cores, animações e texto que vão fazer parte do seu site, o Webflow cria o código automaticamente. É por isso que não é necessário saber nada sobre programação. 

A plataforma no-code (que dispensa que o usuário digite algum código) é muito visual e conforme você escolhe e distribui os elementos, seu site vai tomando forma. 

É muito fácil mudar o elementos de lugar até alcançar o resultado ideal, de acordo com o que você deseja. 

A tela de criação do site funciona como um quebra cabeça muito simples, em que as peças já estão disponíveis e você só precisa ir organizando cada uma delas até que a imagem surja na sua frente, pronta. 

Entretanto, diferentemente do quebra cabeça, é possível personalizar todos os elementos, reorganizando as peças do jeito que quiser. Todas as combinações formadas são aceitas, e as peças “sempre se encaixam”.  

O Webflow é destinado só para profissionais?

Diante de tamanha facilidade oferecida, o Webflow é para qualquer pessoa que deseja montar um site ou  aprender a criar projetos nessa área, mesmo sem dominar conceitos aprofundados sobre desenvolvimento web. 

É o seu caso? Então, se você quer montar um site para a sua empresa e não domina práticas de programação, esse sistema também é para você. Contudo, o Webflow atende também um perfil de público mais profissional, que não sabe programar, mas que trabalha em projetos que envolvam a criação de sites.

Profissionais como web designers, UI e UX designers são bons exemplos de especialistas que podem aproveitar os benefícios do Webflow.

Nesses casos, é possível criar o layout do projeto em uma outra plataforma, como Adobe XD ou Photoshop, e transformá-los em um site, migrando as páginas criadas para dentro do Webflow.

Entretanto, também é possível, e até recomendado, que todo o layout já seja elaborado dentro do próprio sistema, aproveitando as facilidades da plataforma. 

Ao adotar essa ferramenta, o designer  amplia seu leque de oportunidades de trabalho, sendo capaz de operar a parte técnica do projeto de criação de site, indo além da parte criativa. 

Afinal, com o Webflow, a pessoa pode organizar o layout criado, enquanto o sistema cria o código automaticamente. 

Depois, será só clicar em publicar, e pronto! O site estará no ar. 

Para completar o entendimento sobre o que é Webflow indicamos que assista ao vídeo abaixo. Ele é super completo e faz um resumão sobre o que falamos até aqui. 

Mas, calma! Ainda não acabou! Continue lendo e entenda como funciona, as vantagens e se vale a pena usar o Webflow. Também faremos um breve comparativo entre o Webflow e o WordPress.

Por que usar o Webflow?

Como já mencionamos, sem dúvida a primeira vantagem de usar o Webflow é o fato dele oferecer a criação profissional de um site, sem a necessidade de conhecer técnicas de desenvolvimento ou de  dominar programação e códigos. 

Diferentemente de outras ferramentas, que também permitem a criação de sites sem o uso de código (como o famoso WordPress) o Webflow é um sistema pensado para quem deseja desenvolver projetos de site com maior impacto visual e personalização.

A plataforma permite a criação livre de projetos mais customizados. Ela oferece elementos prontos, que podem ser incluídos no layout (editados e personalizados), mas sem reduzir a capacidade de personalização. 

Essa limitação na individualização do projeto é muito comum em sistemas que trabalham oferecendo templates prontos, É o que acontece com o WordPress, por exemplo. 

Ainda neste artigo falaremos mais sobre as diferenças entre Webflow e WordPress, para te ajudar a escolher o ideal para a sua necessidade. 

Mas, voltando aos benefícios do Webflow, em resumo, a ferramenta apresenta ótimos níveis de personalização de design, além de disponibilizar uma enorme variedade de templates que se adaptam tanto a sites de conteúdo dinâmico quanto a e-commerces.

Além disso, o Webflow ainda vale a pena por:

• Ser uma ferramenta visual de web design sem código;
• Oferecer uma solução all in one, com a criação de um protótipo desenvolvido com HTML e CSS;
• Fazer o trabalho de tradução dos elementos de imagem, texto, animação, e outros, que são inclusos na página, para o código;
• Oferecer um editor visual atrativo para seus usuários; 
• Incluir um sistema de gerenciamento de conteúdo (CMS);
• Realizar a hospedagem do site;
• Facilitar a criação do design responsivo;
• Oferecer uma melhor experiência para cliente que vai aprovar o projeto, do site em real funcionamento, vendo a mudanças de página realmente acontecer quando ele clicar em um link;
• Facilitar a publicação do site e mais.

Como funciona o Webflow?

O Webflow funciona a partir de um sistema de arrastar e soltar, que permite criar um site a partir da simples seleção de elementos que estão disponíveis na galeria de recursos da plataforma. 

Posteriormente, é possível personalizar o componente, incluindo texto, imagens, cores e animação. 

Esses elementos que você usa para construir o seu site são componentes HTML totalmente responsivos e codificados para a tela e podem ser personalizados dentro do sistema.

Enquanto arrasta e solta esses componentes, você não vê os códigos HTML, que são traduzidos automaticamente pelo sistema em elementos visuais. 

Em outras palavras, isso significa que o Webflow elimina a necessidade de se preocupar com a tradução do HTML para o CSS. O sistema faz tudo automaticamente. Mas, afinal, o que é HTML e CSS? 

A seguir, nós vamos explicar esses conceitos. Mas saiba que, mesmo sendo interessante conhecê-los para criar sites (principalmente, se você for um profissional de web design ou UX, por exemplo), não é obrigatório ter esse domínio para criar um site no Webflow. 

É possível apenas selecionar e posicionar os elementos que vão fazer parte das páginas do seu site, sem saber sobre a tecnologia por trás disso. 

Entretanto, por ser um conteúdo interessante, dedicamos algumas linhas para explicar como isso funciona.

HTML e CSS 

Sites são compostos por elementos HTML e CSS e para entender o que eles são, você pode usar o princípio de design que vê os sites a partir do modelo de caixa.

Esse princípio nos diz que tudo o que está em uma página da web é basicamente uma caixa que está dentro de outra caixa. Essas caixas são componentes HTML conhecidos como “divs”.

Com tantas caixas, é necessário distribuir etiquetas para rotular cada uma delas. Esses rótulos personalizam a caixa, para que ela tenha um visual único. Quem é responsável por criar o visual de cada caixa é o CSS.

O Webflow então funciona organizando as caixas (o HTML), permitindo a personalização da imagem de cada uma delas, por meio do CSS. 

Tudo isso, sem que você precise se preocupar em conhecer os códigos que fazem com que essas caixas sejam facilmente acessadas por pessoas usuárias  interessadas em visitar o site. 

A função de quem cria o site dentro do Webflow é adicionar as caixas que quiser. Essas caixas são os elementos disponíveis no sistema, que você seleciona e arrasta até o seu layout. 

Não  se preocupe, esses elementos não têm aparência de código, ou algo parecido. São recursos visuais facilmente identificados.

Com esses componentes definidos, você define o visual que cada um  terá, estabelecendo a cor, posição, tamanho e outras informações que desejar.

Fora do Webflow, o HTML e o CSS devem ser criados a partir de códigos, pixels e vetores. 

Dentro do Webflow, você projeta seu site facilmente, usando elementos visuais que podem ser organizados como você desejar enquanto monta cada página.

Para você entender melhor, a seguir vamos mostrar o passo a passo de como criar um site usando o Webflow.

Além de HTML e CSS, o Webflow inclui o CMS, ou Content Management System, ou Sistema de Gestão de Conteúdos. 

O programa é fundamental para que o conteúdo do site seja publicado, atualizado e excluído.

Entre os modelos de canais que são muito beneficiados pela tecnologia dos sistemas de gestão de conteúdos estão sites que não são totalmente estáticos, entre os principais exemplos estão e-commerces e blogs. 

Afinal, são plataformas que exigem a constante atualização de conteúdos.

Nessas plataformas, o CMS facilita a criação, organização e publicação de conteúdos. 

O Webflow tem um CMS próprio, intuitivo e simples de usar que permite editar todo o conteúdo e criar novas páginas e conteúdos.

2. Como criar um site em Webflow?

É possível criar diferentes tipos de sites no Webflow, desde e-commerces, blogs até sites institucionais. 

A seguir, mostraremos como fazer isso, começando com um site tradicional:

1. Acesse o site do Webflow;
2. Clique em “começar de graça” e faça seu cadastro;
3. Selecione a opção “Criar um projeto”;
4. Escolha um modelo de site, o que inclui a possibilidade de selecionar um site em branco para você começar um projeto do zero. Existem opções pagas e gratuitas;
5. Clique sobre o modelo escolhido, renomeie e salve;
6. Abra o projeto e escolha os elementos para personalizar. Com a opção “site em branco” você vai personalizar todo o seu site;
7. Uma tela, como uma lousa em bramco, irá aparecer para que você possa começar a adicionar os componentes ao seu layout;
8. No menu superior direito você vai encontrar o ícone “Adicionar’, clique para começar começar a escolher seus elementos (inclui layout, símbolos, tipografia, CMS, formulários e mais);
9. No menu superior à  esquerda defina a quantidade de páginas do site e adicione a hospedagem;
10. Observe quais ícone estão ativos, acessando o menu superior esquerdo em “ícones ativos”;
11. Monte o layout usando os recursos que você encontrará na ferramenta. Lembrando que é só arrastar e soltar;
12. Com o layout concluído, clique em “Publicar”. Pronto! Você tem um site incrível, sem precisar mexer com códigos.

Que tal agora ver um site sendo de fato criado do zero para que você entenda como funcionam os recursos de personalização do layout, onde encontrar os elementos, como inserir imagem e mais? 

No vídeo abaixo você tem acesso a um passo a passo, dentro da ferramenta, e poderá acompanhar a construção de um site, do zero. Vale a pena assistir!

Como criar uma loja com Webflow ?

Você também pode usar o Webflow não só para criar conteúdo dinâmico, mas também para colocar uma loja virtual no ar e vender seus produtos online. Para isso, algumas etapas são importantes:

1. Crie sua conta no Webflow;
2. Acesse a área de templates e clique no meu “e-commerce”, que irá mostrar os modelos de sites para lojas virtuais (também é possível criar uma loja virtual totalmente do zero, sem usar templates pré-definidos); 
3. Escolha um template entre os disponíveis (um dos mais usados é o Luma, que é gratuito);
4. Clique no template escolhido e para ser redirecionado ao painel de criação;
5. No menu superior direito, selecione “dashboard” e clique sobre o template selecionado; 
6. Renomeie seu projeto;
7. Selecione um projeto em branco, para criar um novo e-commerce;
8. Clique no ícone do carrinho de compras na barra de ferramentas do lado esquerdo. Aparecerá uma opção para você converter a sua loja em uma loja virtual, o que é fundamental para que você tenha acesso a múltiplos recursos especiais;
9. Importe algumas imagens de produtos apenas para que elas possam ilustrar os locais em que as mercadorias estarão distribuídas em sua loja. Com as fotos os produtos importadas, você poderá usá-las também no modo arrastar e soltar, dentro da ferramenta;
10. Volte à página principal do template e comece a customizar a página com os elementos que desejar. 

Com ele, você terá acesso a prints de tela e ao caminho detalhado para criar uma loja virtual e colocá-la em funcionamento, além de dicas, truques e  tudo oque você precisa para tirar o projeto do papel e transformar em uma loja que, de fato, funciona.

O material está em inglês, então se você não domina o idioma, pode ser interessante usar o Google Tradutor para facilitar a sua compreensão. 

Como integrar sua loja do Webflow a outras ferramentas?

Se você usa (ou pretende utilizar em breve) o Webflow para vender seus produtos e serviços online, já deve saber que gerenciar um e-commerce não é simples e depende do acesso a diversos tipos de ferramentas. 
As tarefas do dia a dia apenas começam com a criação e manutenção do site no Webflow, incluindo uma lista de outras necessidades como:

• Criação, execução e planejamento de ações de marketing;
• Processos de vendas;
• Gestão do fluxo de caixa;
• Qualidade do atendimento aos clientes, etc.

A boa notícia é que existem facilitadores, como a Pluga, que permite que você integre várias ferramentas e aproveite ao máximo todas elas, sem retrabalho e buscando o maior desempenho possível. 

Com a Pluga, você pode capturar dados sobre vendas realizadas através dessas plataformas para e-commerce e enviá-los para outras ferramentas que você também usa no seu dia a dia – deixando as tarefas chatas e repetitivas do seu dia a dia nas mãos dos robôs.
Quer ver como é simples?

📺 Assista ao vídeo tutorial abaixo e entenda como as automatizações podem transformar a gestão da sua loja virtual ao integrar dezenas de ferramentas.

Olha só mais alguns exemplos do que você pode fazer automáticamente ao optar por integrações em sua loja virtual:

Webflow ou WordPress? O Webflow vale a pena?

Em sua essência, o Webflow e o WordPress são plataformas para a criação de sites que dispensam o conhecimento de código por parte do seu criador. 

As duas plataformas oferecem alguns recursos bem similares, como por exemplo:

• Temas e templates prontos para usar, que facilitam a criação do site do zero;
• Sistema de gerenciamento de conteúdo (CMS);
• Estrutura para Blog;
• Estrutura para  montar um e-commerce;
• Recursos de otimização para SEO;
• Possibilidade de instalar certificados SSL e mais!

No entanto, elas não são iguais. Cada uma delas possui sua própria forma de oferecer o serviço de criação de sites, blogs e lojas virtuais. 

O WordPress segue o caminho da modularidade, enquanto o Webflow visa tornar a experiência o mais integrada e fluida possível.

O WordPress é famoso por oferecer milhares de plugins gratuitos e pagos, bem como temas, tornando-o quase infinitamente flexível e personalizável.

Por outro lado, toda essa abundância traz consigo uma alta proporção de extensões mal feitas e que não oferecem 100% de segurança a seus usuários.

O Webflow permite que você crie seus sites mesmo sem partir de um template pré definido, o que te ajuda a alcançar quase qualquer configuração que desejar para seu site.

Além disso, o Webflow conta com recursos de otimização de desempenho prontos para uso. 

Já sites em WordPress podem apresentar dificuldade para o carregamento rápido, que na prática pode exigir esforço manual e conhecimento de código. 

Também é importante considerar que como o WordPress alimenta mais de 42% de todos os sites na Internet, é muito fácil encontrar documentação sobre WordPress e aprender por conta própria.

O Webflow não tem o mesmo alcance, logo não oferece tantas opções de conteúdo gratuito. Por outro lado, é possível ter acesso a suporte da equipe interna da ferramenta, algo que não é encontrado no WordPress. 

Como você viu, tanto Webflow quanto o WordPress apresentam prós e contras, benefícios e desvantagens. 

Contudo, o Webflow se mostra uma boa alternativa ao WordPress, principalmente, para profissionais como web designers e designer UX. 

Enquanto isso, o WordPress tem uma curva de aprendizado menor, o que atrai muitas pessoas que desejam criar o próprio site. 

Com essas informações, agora é a sua vez de responder: Webflow ou WordPress?

4. Qual o preço do Webflow?

Você pode começar a utilizar o Webflow de forma gratuita, no plano Starter. No entanto, para ter acesso a mais recursos, existem as versões pagas, que variam de US$ 12 a  US$36 por mês*, conforme a demanda por volume de dados cadastrados e editores de conteúdo. 

Veja um resumo dos recursos disponíveis em cada plano na tabela abaixo:

Para o uso do Webflow para criação de e-commerce os valores e planos são outros. Confira, a seguir. 

*Valores verificados em março de 2022. Para visualizar a tabela de preços do Webflow, clique aqui.

Agora que você já sabe o que é Webflow, que tal compartilhar esse conteúdo com outras pessoas que você conhece e que estão em busca de opções para facilitar a criação de sites, blogs e e-commerce?