# Webflow

## O que é

Software para criação de páginas publicas (área não logada) sem a necessidade de ter uma pessoa de desenvolvimento ajudando.

### Prós

* Tira a dependência do time de tecnologia pra criar LPs
* Tem serviço de hospedagem embarcado
* Relativamente fácil e rápido de usar

### Contras

* As páginas não são tão rápidas, muito código "sujo" no meio
* Temos um limite de acessos em cada conta
* Cenários mais complexos (ex: criar um simulador) precisam de tech

## Criando um projeto no Webflow

Agende um horário na [agenda Webflow](https://calendar.google.com/calendar/embed?src=c_f4d23f1596kmkfd1n6m5q68t1c%40group.calendar.google.com\&ctz=America%2FSao_Paulo), do Google Calendar. Coloque seu nome e qual conta você vai usar (marketing ou produto). Se é um projeto novo, dê preferência pra conta de produto

Duplique um projeto já existente (exemplo: feed de talentos)

Se familiarize com os estilos do projeto (texto, cores, etc)

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad05JUF9qTK424i0VU%2Fimage.png?alt=media\&token=4ec0f065-80ae-458f-8782-d273555ce0fa)

Se precisar alterar algum estilo, crie uma combo class na sua página

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad-yeUq3aaVDaQ40b7%2Fimage.png?alt=media\&token=d4377d17-5dad-45ee-b6ac-e2c4c27a303f)

Se estiver mexendo em um projeto já existente, cuidado para não sobrescrever as classes usadas em outras página\


Estrutura básica da página: section > container > div

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad0RKxQliB_jlJ-9Vj%2Fimage.png?alt=media\&token=0b060763-36dd-4c26-87b7-6157cff44b38)

{% hint style="info" %}
**jump of the cat**: entre em outros projetos (em outra aba), copie e cole módulos no seu projeto para ganhar tempo
{% endhint %}

Se você for usar um mesmo elemento em várias páginas (ex: menu), você pode criar um symbol. Eles ficam agrupados no menu à esquerda.

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad0gUNnl-TIdgsif5H%2Fimage.png?alt=media\&token=4db8f2bb-6afc-40bf-a069-67eb41d9b880)

Quando terminar, você tem que publicar sua página. Se estiver trabalhando em um projeto já existente, primeiro publique na URL do Webflow. Assim que você testar e estiver tudo ok, publique na URL oficial da Revelo.

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad15E6l82ONayR14Yb%2Fimage.png?alt=media\&token=e64e1ff1-2d8e-4b97-a09c-d3c145c8c08f)

Para projetos novos, se precisar cadastrar um subdomínio, tem que pedir pro Lucas Vieira do time de SRE.

Webflow também tem a funcionalidade de CRM, permitindo que se crie projetos com conteúdo dinâmico (ex: blogs, lista de cursos, etc)

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad1Q0jwo1O5lEFU0W8%2Fimage.png?alt=media\&token=25013305-13fc-4e59-9efe-99777d19132b)

Ele tem integrações bem poderosas (jetboost, memberstack), e uma [base de templates](https://webflow.com/templates?utm_source=dashboard) prontos caso você queira duplicar e ganhar tempo.

![Exemplo de aplicação do Jetboost: filtros e busca dinâmica no projeto beneficios.revelo](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad2LyTJa5y8sPnIICT%2FMay-26-2021%2011-21-00.gif?alt=media\&token=e7187eaa-4fae-4e97-8972-93cc6b5291b3)

![Exemplo de aplicação do Memberstack para login/cadastro no projeto projeto up4b.revelo](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-Mad-2VdmKiUc5D70Das%2F-Mad2wdXFLgCweoQbpYl%2Fimage.png?alt=media\&token=caa31eef-ab50-40d5-b880-b924e0c07de0)

### Checklist

**Conteúdo**

* [ ] Título da página
* [ ] Descrição da página (SEO)
* [ ] Texto revisado
* [ ] Links levam para o lugar certo
* [ ] Formulário tem ID
* [ ] Imagens tem alt text definido

**Imagens**

* [ ] Imagem do open graph
* [ ] Imagens foram comprimidas (tiny png)
* [ ] Favicon (general settings)

**Configurações**

* [ ] Subdomínio
* [ ] Google analytics

**Layout**

* [ ] Versão mobile
* [ ] Estilo das outras páginas não quebrou
