Introdução ao Webflow - Ajuda do Webflow
Aprenda a usar o Webflow.
No Webflow, você pode estruturar, construir e projetar seu site em páginas, ramificações e locais. O Webflow permite que você crie e gerencie conteúdo dinâmico e dados de forma eficaz e fornece ferramentas para analisar e otimizar o desempenho do site. Você também pode compartilhar seu trabalho, solicitar feedback e, finalmente, publicar seu site em ambientes dedicados (ou seja, teste e produção).
Você pode acessar o Webflow a partir do Painel clicando na miniatura do seu site ou nas Configurações do site clicando em Abrir site na barra de ferramentas superior. As ferramentas que você tem acesso no Webflow diferem dependendo do seu papel no site (por exemplo, revisor, editor de conteúdo, etc.), para que você possa acessar rapidamente as ferramentas de que precisa — e esquecer as ferramentas que não precisa.
Antes de começar
Verifique os navegadores, dispositivos e resoluções de tela suportados pelo Webflow.
Colaboração de múltiplos usuários
Vários membros da equipe podem colaborar em um site juntos no Webflow. Para manter o processo de design fluido, você pode transferir o controle de design entre seus colegas de equipe e ver onde outras pessoas estão trabalhando dentro do seu site em tempo real.
Visão geral da interface do Webflow
Quando você abre seu site no Webflow, a tela principal que mostra seu site é a tela de edição. Ao redor da tela de edição estão as seguintes barras de ferramentas e painéis:
- A barra superior inclui navegação com abas, a barra de contexto e ações do site (por exemplo, ferramentas de colaboração e publicação).
- A barra da tela de edição inclui desfazer/refazer, navegação de breadcrumb, pontos de interrupção expandidos e configurações da tela de edição.
- A barra de ferramentas à esquerda inclui o menu principal, vários painéis de ferramentas e navegação, configurações, auditoria do site e tutoriais.
- A barra de ferramentas à direita inclui estilos de elementos, configurações e interações.
A tela de edição
A maior área no Webflow é a tela de edição. É aqui que você pode interagir com a página e projetar em tempo real. Você pode selecionar elementos, movê-los e editar o conteúdo diretamente na página. O Webflow salva seu trabalho automaticamente, mas você pode salvar manualmente seu site pressionando Command + S (no Mac) ou Control + S (no Windows).
A barra superior
A barra superior oferece acesso rápido aos modos de design, CMS, Analyze, Optimize, locais, um alternador de páginas e ações do site.
A navegação principal com abas inclui a aba Design, a aba CMS e a aba Insights.
- Aba Design — Esta aba indica o modo atual (por exemplo, design, construção, etc.) e permite alternar entre modos ou criar ramificações de página. O papel no site de um membro determina quais modos estão disponíveis. Por exemplo, gerentes de site e designers podem acessar o modo de design, enquanto marketeiros só podem acessar o modo de construção.
- Aba CMS — Abre o painel CMS (Sistema de Gerenciamento de Conteúdo), onde você pode criar e gerenciar Coleções, Itens de Coleção e produtos e categorias de Ecommerce.
- Aba Insights — Abre o painel de Insights, onde você pode acessar Analyze e Optimize. Analyze fornece análises de site com insights acionáveis. Optimize permite que você execute experimentos em seu site para testar diferentes estilos, layouts, fluxos, verbos, imagens e mais.
Barra de contexto
A barra de contexto permite que você gerencie otimizações do site com Optimize e alterne entre localizações, páginas, páginas de Coleção e itens de Coleção. Ela também indica quando você está editando o componente principal (em vez de uma instância do componente), assim como o status de aprovação de design.
Ações do site
As ações do site estão relacionadas à página específica em que você está ou ao próprio site. Membros da equipe colaborando no site em tempo real também são listados aqui com um avatar ou contagem.
- Modo de análise — Obtenha análises e insights ao nível da página (por exemplo, até onde os visitantes rolam e onde clicam).
- Comentários — Revise comentários deixados por outros membros da equipe ou adicione seu próprio feedback/notas.
- Pré-visualização — Alterne para o modo de pré-visualização.
- Compartilhar — Gere um link de site somente leitura.
- Publicar — Publique seu site.
A barra de canvas
A barra de canvas está posicionada acima do canvas por padrão, mas você pode movê-la para baixo nas configurações do canvas.
- Ícones de desfazer/refazer — Reverter ou reaplicar mudanças rapidamente.
- Navegação de breadcrumb — Mostra a hierarquia de elementos do elemento selecionado.
- Configurações do canvas — Diferentes opções (ex.: réguas, guias, pré-visualização de zoom de texto).
- Pontos de interrupção — Pré-visualizar e editar para diferentes tamanhos de dispositivos.
A barra de ferramentas à esquerda
Contém o menu principal e painéis para estruturação do site.
Clique no logo do Webflow para acessar o menu principal.
- Busca rápida para elementos, componentes, páginas, etc.
- Ações de desfazer/refazer
- Exportar código
- Atalhos de teclado
- Abrir pré-visualização de CSS
- Obter ajuda ou enviar feedback
Painéis e registro de atividades do site
- Painel de adicionar — Atalho: A
- Painel de páginas — Atalho: P
- Painel de navegação — Atalho: Z
- Painel de componentes — Atalho: Shift + A
- Painel de variáveis — Atalho: G
- Painel de seletores de estilo — Atalho: J
- Painel de ativos — Atalho: L
- Painel de bibliotecas — Atalho: L
- Painel de aplicativos — Atalho: E
- Registro de atividades do site — Alterações de design feitas no seu site
Configurações, assistente de aprendizado de IA, auditorias, busca rápida e tutoriais
- Painel de configurações — Interface, busca, backup, localização.
- Assistente de aprendizado de IA — Ajuda com IA.
- Painel de auditoria — Atalho: U.
- Busca rápida — Atalho: Command + E (Mac), Control + E (Windows).
- Painel de tutoriais em vídeo — Cursos em vídeo gratuitos.
A barra de ferramentas à direita
Contém painéis para estilos de elementos, configurações e interações.
- Painel de estilo — Atalho: S.
- Painel de configurações de elementos — Atalho: D.
- Painel de interações — Atalho: H.
FAQ
Quais navegadores o Webflow suporta?
O Webflow suporta oficialmente as três últimas versões principais de todos os navegadores modernos: Chrome, Edge, Firefox e Safari. Isso se aplica tanto à plataforma quanto aos sites publicados.
Para recursos com suporte limitado, veja os artigos relacionados:
O Webflow não suporta o Internet Explorer.
Quais resoluções de tela/dispositivos o Webflow suporta?
O Webflow requer um computador desktop/laptop com uma largura de tela de pelo menos 1268px.
Por que o Webflow é um aplicativo online/hospedado — por que não um aplicativo para download?
O Webflow é online/hospedado para permitir design no navegador e atualizações rápidas.
- Design WYSIWYG — efeito direto no HTML/CSS.
- Atualizações rápidas — Sempre a versão mais recente, sem atualizações manuais.