O curso intensivo de WebFlow é para você que deseja entrar no WebFlow e adquirir noções de como construir seu primeiro site de maneira prática e fácil este curso garante a você todas as informações e aprendizado para isto.
Se você está começando agora e nunca usou o WebFlow, esse curso é para iniciantes, completo e essencial para tal. Neste curso de Webflow em Português você irá aprender uma visão geral da interface, será analisado os blocos de construção básicos e além disso você irá conferir sugestões e práticas recomendadas para a criação da Web com muita qualidade. Neste curso há muitos conceitos e ensinamentos básicos de posicionamento e layout para que você comece a usar e aprender sobre o design da Web.
O curso foi totalmente desenvolvido por nosso fundador Marcos Custódio, ele é uma das principais autoridades no Brasil quando se fala em Ferramenta de SEO/SEO.
Para iniciar o Curso de WebFlow em Português é imprescindível ter:
O curso é composto por 39 vídeo aulas, que varias de 2 a 3 minutos, por ser em vídeo é de fácil aprendizado e explicativo, no total o curso de Webflow em Português tem a duração de 1h e 55 minutos, e é perfeito para iniciantes em design na Web.
O curso de Webflow é dividido em 9 categorias:
A introdução é composta por dois vídeos, sendo eles:
O designer é o centro da plataforma de design de web visual do webflow, a tela na qual você irá projetar e desenvolver sites bonitos e responsivos. Na introdução ao designer você aprenderá os principais recursos e seção do designer, de forma rápido e fácil, antes dos aprofundamentos nos detalhes do designer.
Se você está iniciando em web design, é importante entender quais as diferenças entre HTML e CSS e como juntos eles funcionam para mostrar o conteúdo da web, através do html, e controlar como ele é exibido nos navegadores, pelo CSS. Nesse segundo vídeo você terá o conhecimento desses conceitos e aprenderá a utilizar as ferramentas.
Esse tópico é formado por três vídeos explicativos sobre a estruturação da web, sendo eles:
No vídeo sobre o modelo de caixa será tratado como o layout funciona na web. Diferente de outros ambientes direcionado ao design que posicionam elementos em qualquer lugar em certo documento ou imagem, a web coloca elementos para que você consiga controlar o posicionamento, criando indiretamente layouts. Nesta etapa irá ser discutido o modelo de caixa, como o modelo de caixa facilita o design na internet, caixa de agrupamento e o posicionamento de caixas para criação de layouts.
A hierarquia de elementos afeta o estilo e o dimensionamento, e é muito importante para se obter sucesso na web design e com o Webflow. A hierarquia é abordada de três formas bem simples e exemplificada de como os objetos se encaixam uns nos outros, como o design é passado de pai para filho e como os tamanhos dos elementos pai e dos elementos filhos afetam um ao outro.
Através do navegador do Webflow você terá de maneira visual de interagir com todos os elementos de uma página e entender como os elementos irão se relacionar na hierarquia do documento. Nessa etapa os ensinamentos serão do uso do navegador para selecionar um elemento, entender as relações hierárquicas entre tal e mover elementos.
Nessa etapa relata de forma simples os princípios do elemento, sendo composta por cinco vídeos explicativos, sendo eles:
Através do painel de elementos do Webflow você consegue acesso de forma rápida e visual dos vários elementos que você pode adicionar ao projeto, como elementos de layouts, divs, componentes complexos pré construídos, como controles deslizantes. No vídeo é ensinado a estrutura do painel de elementos e como adicionar estes elementos ao projeto.
Você aprenderá a usar a seção do Webflor e porque usar, um layout com largura máxima para ocupar toda a janela do navegador. As seções são importantes na estrutura e no layout de uma página, com elas é possível criar blocos separados de conteúdo. E é justamente por isso que nesse tópico você aprenderá a adicionar um elemento de seção ao seu design e controlar a altura dos elementos de seção.
Aqui você saberá motivos para usar o elemento de contêiner do Webflow e como fazer o uso correto, ação que mantém o seu conteúdo em uma região legível e razoável no centro de sua página. Qual a anatomia de um recipiente, como adicionar um contêiner ao seu design, estilizando o recipiente e envolvendo o container, serão alguns ensinamentos passados.
Os elementos podem passar informações de estilo tipográfico para seus filhos. É possível definir estilos de texto nos elementos pai, que serão utilizados em estilo cascata, e pode substituir o estilo em seus elementos filhos.
Técnica comum usada para definição de estilos de fonte globais na tag Body, alinhar texto e outros elementos dentro de seções e substituir estilos de blocos de links padrão. Será ensinado a como o estilo de texto em cascata funciona a partir da marca corporal, do elemento de seção, do bloco de link.
É o elemento mais básico e versátil usado no design e desenvolvimento de sites. Um bloco div, pode ser o que você desejar, até uma parte, podendo ser também usado para criar espaço ou divisores, seu uso mais comum é para um bloco div é agrupar outros elementos. Uma das principais coisas a ser ensinada nesse vídeo é adicionar, estilo, duplicar blocos div e ninho.
Conheça o Curso de WebFlow em Português na integra!
Esse tópico é formado por quatro videos de aprendizagem, sendo eles:
Uma das ferramentas mais potentes que qualquer site pode ter são os formulários, através deles você pode coletar inscrições em boletins informativos por e-mail ou consultas de trabalhos. Nessa etapa é falado sobre os fundamentos do uso de formulários no Webflow.
A barra de navegação é uma das formais mais simples e essenciais para adicionar navegação ao seu projeto, através dela é possível oferecer aos visitantes do seu site uma visão de alto nível do conteúdo do site. Caso tenha menos espaço na tela a barra pode ser configurada para exibir um botão de menu para acessar a mesma navegação.
O controle deslizante é simples e interessantes do Webflow Designer, ele pode ser usado para apresentar imagens, textos e vídeos. Assim será aprendido cinco aspectos fundamentais de um slide: a anatomia de um slide, como criar e alterar slides, adicionar imagens de fundo aos slides e adicionar conteúdo e por último as configurações do slide.
Os símbolos fazem a diferença em qualquer elemento e em componentes reutilizáveis. As alterações feitas em um símbolo atualizará todas as ocorrências desse símbolo no seu projeto. Útil para elementos recorrentes como navbars, rodapés ou seções de inscrições. Não sendo necessário a alteração desses elementos individualmente, com o símbolo é possível fazer alterações e afetar todas as instâncias de uma só vez.
Nesse tópico será descrito as principais noções básicas de esterilização, sendo compostas por cinco vídeos de aprendizagem, sendo eles:
Através do Painel de Estilo do Webflow Designer você pode personalizar como os elementos serão mostrados em seu site e como eles reagem a interação. Você consegue criar uma classe permitindo estilizar elementos e reutilizar estilos em todo o projeto.
Sem criar uma classe exclusiva, no Webflow, as tags HTML, permite o controle de estilo padrão de um determinado elemento de forma fácil de controlar. Neste vídeo será ensinado: acesso a tags, tags etiquetas de estilo versus classes, todos os cabeçalhos H1 marcam, tag Todos os Links, tag Todas as imagens.
As classes salvam informações do estilo que você pode aplicar a quantos elementos desejar em todo o seu projeto. Nessa aula você vai aprender como usar, criando aulas, aplicando classes, edição de aulas e muito mais.
Ao aplicar uma classe a um elemento e adicionar um estilo, você pode desejar fazer uma mudança no estilo em uma instância dessa classe, sem afetar outros elementos dessa classe. Através do Webflow é possível criar uma classe de combinação e aplicar sobreposições de estilo para criar uma variação exclusiva. Não é demais? Além de economizar tempo e trabalho.
No Webflow para adicionar alguma interatividade aos seus elementos é possível alterar a aparências e o comportamento deles utilizando os estados. Ao estilizar um elemento você pode alternar entre vários estados, podendo acessar e estilizar.
Uma das partes mais importantes do design certamente é o layout, para explicar melhor sobre esse tópico é separado em 5 temas interessantes e explicativos, sendo eles:
Para você posicionar melhor o conteúdo em seu projeto, o painel de estilo do webflow disponibiliza vários métodos de layout para te ajudar. Alguns métodos de layout podem dar o mesmo efeito, mas alguns são melhores que os outros, comparado a confiabilidade e desempenho entre navegadores. Nessa etapa será ensinado sobre as várias ferramentas de layout.
O Preenchimento permite adicionar espaço interno e a margem espaço externo do limite de um elemento. Com o uso dessas formas a criação de um site responsivo com um conteúdo melhor centralizado, mantendo um bom espaço de um para o outro. Nessa etapa cinco maneira de aplicar será ensinado.
A configuração de exibição que você escolhe para um elemento mostra seu comportamento em um layout, seja no Webflow ou no design da web em geral. Esses elementos podem estar na vertical ou horizontal, dependendo da configuração de exibição que será usada, podendo mudar a exibição de qualquer elemento.
O Flexbox é uma ferramenta de layout que promove o alinhamento necessário e controla o empilhamento para todo o conteúdo dentro de um elemento. Neste tópico os principais conceitos serão passados e a forma correta de usar. E foi criado um jogo de flexbox para ajudar a aprender o flexbox ainda mais rápido.
O uso da propriedade de posição é uma das várias maneiras de alterar o layout e o posicionamento de um elemento. Sendo a única na medida em que permite que os elementos sejam posicionados em relação a si mesmos, relativos a um elemento pai (absoluto) ou relativos à viewport, mesmo quando a página é rolada. A flexibilidade da propriedade de posição possibilita a criação de layouts da Web únicos. Podendo até mesmo especificar a ordem de empilhamento de elementos posicionados que se sobrepõem a outros elementos usando a propriedade z-index.
Quando você acessa um site em seu celular, pode ver uma versão de área de trabalho do site espremida em uma tela menor, forçando você a aplicar zoom para ver qualquer conteúdo. Ou você pode chegar a uma "versão móvel" diluída que não tenha o conteúdo e a experiência que tornam a versão para desktop superior. Espero que, no entanto, você veja um website responsivo - um design que mostre e reposicione o conteúdo com base na largura do navegador.
Pensando em ajudar você a criar designs elegantes e responsivos, o Webflow permite personalizações em quatro diferentes pontos de divisão / tamanhos de dispositivo: desktop, tablet, paisagem móvel e retrato móvel.
Nessa etapa será explicado as diferenças entre conteúdo estático e dinâmico e ensinado por que o último é tão útil para alguns dos tipos de conteúdo mais populares na Web, de postagens de blog a páginas de produtos.
Um CMS (sistema de gerenciamento de conteúdo) é uma ferramenta para gerenciar e publicar conteúdos dinâmicos. O site faz referência a esse conteúdo dinâmico em diferentes páginas. Portanto, sempre que você ou seu cliente criar ou alterar conteúdo no CMS, ele atualizará todas as páginas em que é referenciado, instantaneamente. O Webflow CMS oferece controle total sobre sua estrutura de conteúdo e como esse conteúdo é projetado em todo o projeto - tudo isso sem você tocar em uma linha de código.
Uma coleção é como um banco de dados - é onde o conteúdo pode ser armazenado e referenciado dinamicamente ao longo de um projeto. Coleções diferentes significam diferentes tipos de conteúdo, e uma parte individual de conteúdo dentro de uma coleção é chamada de item de coleção.
Depois de conectar uma Lista de Coleções a uma Coleção no Webflow, ela exibirá todos os itens dessa Coleção. Mas muitas vezes isso não é o que você quer. Felizmente, você pode usar as Configurações da lista de coleta no Painel de configurações para filtrar, classificar e limitar os itens na lista Coleção. Neste vídeo, é mostrado como filtrar, classificar e limitar seus itens de coleção, além de discutir algumas maneiras de usar esse poderoso recurso.
Neste vídeo você aprenderá como filtrar e limitar itens nas listas de coleções de maneira fácil e rápida, tornando ainda mais eficiente o uso para seu design.
Quando você cria um novo item (por exemplo, postagem de blog, artigo de ajuda, etc.) em uma coleção CMS do Webflow, uma página é criada automaticamente para ele. As Páginas de Coleta funcionam como modelos - o layout e o design da Página de Coleta serão aplicados à página de cada item da Coleção. Isso significa que as Páginas de coleção são essencialmente modelos para partes recorrentes de conteúdo, como postagens de blog, artigos de ajuda ou até mesmo páginas de destino.
O Editor de Fluxo da Web faz a edição do site e publicar novos conteúdos, realmente fáceis para o seu cliente ou sua equipe. O Webflow Designer é uma ferramenta poderosa para a criação de sites, enquanto o Webflow Editor é uma interface simplificada voltada para a edição de conteúdo do site. Você pode editar o conteúdo diretamente na página ou nos painéis abaixo da página.
O campo de texto simples é um campo do CMS que você pode usar nas suas Coleções. Esse campo é melhor usado para conteúdo textual básico que não precisa de formatação especial, como títulos, estilos embutidos ou mídia incorporada, como imagens ou vídeos. Neste vídeo, explicaremos como adicionar e usar campos de texto simples em suas Coleções de CMS do Webflow.
O campo rich text é um campo do CMS usado em Coleções, que você pode usar para fornecer aos seus colaboradores todas as opções de formatação de texto que eles esperam de uma ferramenta de escrita, incluindo negrito, itálico, imagens em linha, links e muito mais. Neste vídeo, explicaremos como adicionar e usar campos de rich text em suas Coleções de CMS do Webflow.
O campo de imagem é um campo do CMS usado em Coleções que permite que você e seus colaboradores envie uma imagem para seus itens de Coleção e a usem em seus projetos. Neste vídeo, mostraremos como usar o campo da imagem.
O campo de troca é um campo do CMS usado em coleções, geralmente como uma ferramenta de filtragem. Como qualquer alternância, ela possui dois valores: Sim ou Não. Os colaboradores podem ativar ou desativar um alternador para especificar, por exemplo, se uma postagem do blog "está em destaque".
O campo Referência é um campo Coleção que você pode adicionar a qualquer uma de suas Coleções. Esse campo poderoso permite vincular a um item em uma coleção diferente. Você pode então usar o conteúdo do item referenciado em Listas de Coleta e Páginas de Coleta. Neste vídeo, discutiremos alguns usos comuns do campo de referência e mostraremos como aproveitar ao máximo seus projetos. Para referenciar vários itens de uma Coleção diferente, use o campo Multi Referência.
Um campo de referência múltipla é igual a um campo de referência, exceto pelo fato de permitir que você faça referência a mais de um item. Isso é ótimo para marcar sistemas, conteúdo relacionado e outras instâncias nas quais você deseja conectar um item a muitos outros. Neste vídeo, mostraremos como usar esse poderoso campo em seus websites acionados por CMS.
Conheça o Curso de WebFlow em Português na integra!
Mantenha a objetividade: Informações pouco claras, sem um objetivo definido, textos longos e explicativos em demasia podem confundir e fatigar um usuário de landing site. Use parágrafos curtos e concisos. Criar uma sensação de necessidade ou vantagem ao visitante compensam a pergunta em suas mentes, que é: "Por que eu deveria tomar a ação que você quer”.
Sua marca exposta: Ao clicam em um anúncio para comerciantes em uma newsletter, um link em um e-mail solo por exemplo, eles estão sendo transportados de um meio para outro. Colocar a logomarca da empresa no topo da página de destino, além de informações de contato visíveis é um indicativo ao usuário de que pousou no lugar certo, além de demonstrar profissionalismo e confiança.
Crie diversos landing sites: Quantos de você realmente tem o trabalho de criar mais de uma página a fim de testar as diferentes variáveis? Um landing site sozinho pode atrair todos os perfis de potenciais clientes para sua empresa? Uma boa ideia é testar quantos campos você pedir em seu formulário de pedido. Pode ser que você vá encontrar menos pessoas dispostas a preencher o formulário de inscrição, mas são mais qualificados e com um perfil muito melhor traçado do que os dos usuários que preenchem menos campos de informação. Campanhas sazonais, direcionados a datas comemorativas, black friday entre outros também cria uma atmosfera mais personalizada, melhor direcionada ao nicho de oferta/procura de épocas específicas.
Como você já pode perceber o curso de WebFlow em Português é muitíssimo completo e de fácil aprendizado, se você é iniciante ou deseja aperfeiçoar seus conhecimentos, vale a pena realizar esse curso e se atentar as novidades dos designers da web.
Continue nos acompanhando e até a próxima!
.png)
.png)
.png)
Solicite um orçamento
.png)