Fundações de fluxo de web: como criar uma landing page

1. Introdução: Todos, e bem-vindos às fundações do Webflow. Este curso tem como objetivo ser uma introdução ao Webflow e forneceremos todas as habilidades necessárias para começar na plataforma O site que vamos construir neste curso é da Tesla Inspires Landing É apenas uma única página. Nessa página, abordaremos todos os elementos essenciais do Webflow Ao final deste curso, você deve entender a plataforma com muito mais profundidade. Vamos falar sobre a plataforma Webflow e como ela realmente funciona Vamos analisar como criar seu próprio site obsoleto, você está em seções personalizadas, seus próprios layouts, bloqueando seu site para garantir que ele seja exatamente como você deseja e garantir que seu site seja e garantir que seu site seja responsivo Quando combinamos todas essas habilidades, o produto final deve ser uma página de destino bem projetada. E até o final deste curso, você deverá ser capaz de continuar expandindo suas habilidades no Webflow e criar um site totalmente abrangente com Tas brancas neste curso Então, estou muito animado para entrar neste curso com você. Então, com isso dito, vamos começar. 2. Como criar sua landing page: O projeto deste curso é muito simples. Tudo o que você precisa fazer é seguir todas as etapas que vou seguir neste curso. Ao final, você deve ter uma página parecida com esta, inspirada na Tesla Agora, as imagens podem ser baixadas nos arquivos do projeto deste curso. Mas também se você quiser criar sua própria página com seu próprio tema, que siga uma camada semelhante na estrutura, tudo bem. Isso é totalmente aberto. O objetivo disso é apenas familiarizá-lo com Webflow e se sentir mais confortável com a plataforma Independentemente do que você acabe fazendo aqui, ainda é um progresso. O que quer que você acabe dizendo, compartilhe-o no painel de discussão para que todos possam aprender com o que você construiu, e possamos realmente levar isso adiante Estou ansioso para começar com isso. Se você tiver alguma dúvida sobre o projeto ou sobre o webflow, comente sobre o curso e eu entrarei em contato com você assim que possível . Vamos entrar. 3. Aula 2 Design antes do desenvolvimento: Ok. Antes de realmente entrarmos no mundo da web e começarmos a criar nossa página de destino, havia algo muito importante que eu queria discutir primeiro Isso é sobre wireframing e design e como isso é diferente do desenvolvimento e como o design de wireframing deve sempre vir Porque esse é um erro que pode ser cometido com muita facilidade, e você pode nem perceber que é um erro para cometer mais tarde, mas pode ser muito caro em termos de tempo E na minha opinião, de qualquer forma, porque isso é algo que eu fiz incorretamente no início Quando comecei a usar o Webflow, eu costumava fazer tudo dentro dos fluxos da web Eu costumava fazer todo o meu design lá e meu desenvolvimento lá. Você só está fazendo um. No começo, você acha que pode. Você realmente não vê a diferença. Você realmente não entende essa diferença entre design e desenvolvimento. E eu acho que essa diferença seria muito mais prevalente se você não tivesse fluxo na web e fosse forçado a codificar seus projetos, se estivesse construindo um novo site e tivesse que escrever o código do zero Isso seria muito mais óbvio porque é muito difícil para maioria das pessoas escrever código do zero para um novo site e fazer o design quando estão fazendo isso. Essa é uma pergunta muito difícil. Mas se você tem uma plataforma como o Webflow frame, etc., é muito fácil entrar lá e pensar que você pode simplesmente fazer todo o design, estrutura e desenvolvimento, basta fazer tudo Mas isso é um erro. O que é , na verdade, um processo muito melhor a seguir. É entrar no FM ou criar uma conta na Figma como eu tenho aqui Se você ainda não ouviu falar do Figma em um futuro próximo, vou criar um curso completo sobre Figma e design e tudo o que você precisa saber sobre ele Será totalmente adequado para iniciantes se você for completamente novo Mas, apenas como uma observação lateral neste curso, eu recomendo fortemente que você e experimente essa plataforma. Você pode me acompanhar enquanto eu faço isso. Talvez você não precise fazer isso para este projeto em particular, mas eu definitivamente vou adquirir o hábito e definitivamente o recomendaria. Então, aqui, eu tenho esse curso aqui e vou fazer esse curso aqui chamado Skillshare course assets Este é para o curso que estamos fazendo agora, obviamente. Eu não me dediquei muito a isso, mas vou te mostrar o que eu tenho dentro. Aqueles que eu realmente queria chamar sua atenção para alguns dos projetos que fiz no passado. Eu tenho um para me deixar ver. Estou tentando pensar em uma boa que eu possa te mostrar. Provavelmente um que eu possa mostrar que não é trabalho do cliente, seria Vamos continuar com este. Então, A, sem perder muito tempo do foco real, está aqui. A Abi é uma empresa de software. Estou projetando o back-end do meu software e o front-end dele no Figma por falta de mais contexto Mas uma coisa que costumo fazer é tentar projetar tudo no Figma primeiro Este é um resumo da landing page que você pode ver aqui. E o fato de eu ter realmente acabado criando esta página ficou um pouco diferente. Você pode ver aqui que faltam imagens em determinados espaços Mas, na maioria das vezes, fiz quase todo o design de que precisava aqui. E também para essas páginas aqui em cima. Agora, isso é que você nunca conseguirá ficar perfeito quando fizer isso no Figma, a menos que aqui esteja um exemplo de mais páginas que eu crio, não é meu melhor trabalho, mas não é ruim Mas a questão é que, quando você está trabalhando na Figma, você pode se concentrar totalmente no design devido à forma como a Figma projetou sua própria interface de usuário Porque eu não preciso me preocupar com bloqueios mortais e aulas, instruções e tudo mais. Eu posso me concentrar apenas no design e na colocação, você está criando o que eu quero criar. E esse é o benefício disso. Então, quando estou satisfeito, projetei tudo em toda a extensão, posso entrar no Webflow e simplesmente me concentrar em copiar esse design e recriá-lo no Webflow, o que é muito, muito mais fácil do que ter que fazer as duas Estou lhe dizendo isso por experiência própria. Bem, isso foi ambu. Isso basicamente dá uma ideia de como eu acho que seria um documento figma se você fosse designer dele Você pode ir ainda mais longe do que isso Sou muito ruim por não manter tudo organizado e atualizado, e isso é algo para mim que preciso melhorar à medida que prossigo em minha própria jornada. Este aqui para o curso contém apenas imagens que usaremos no site, como já foi dito, mas é um bom ponto para ter em mente o design antes do desenvolvimento, e eu encorajo você a fazer isso no futuro. Projeto que você pode até querer experimentar neste. Como eu disse, tenho um curso completo sobre Figma em um futuro próximo. Ok. E é isso. Vamos começar a realmente entrar no fluxo úmido, criar essa página de destino e realmente criar algo. Então, vamos fazer isso. Ok. 4. Lição 1 Como entender o usuário do Webflow Int(1): OK. Tudo bem. A primeira coisa que veremos aqui é entender a interface de usuário do Webflow Acho que esse é um ponto de partida muito importante , pois fornece um contexto essencial sobre como o Webflow realmente funciona e o que ele está fazendo nos bastidores quando você está desenvolvendo nele Porque o Webflow é um pouco diferente de algumas das outras plataformas com as quais ele compete Então, se estivéssemos olhando para bicicletas ou Schramerbflow faz a Todas essas plataformas fazem o mesmo. Todos eles têm como objetivo ajudar você a criar sites com mais facilidade, rapidez e menos complicações, na verdade Porque se você sabe escrever código e é bom nisso , é isso que você fará, será ótimo nisso e alcançará as mesmas coisas que faríamos se não usássemos nenhuma plataforma de código. Mas se você não sabe programar e não tem tempo para aprender a programar, essas plataformas fazem uma grande diferença. Eles realmente preenchem uma lacuna porque fornecem uma interface de usuário mais acessível que realmente ajuda você a obter ajuda alcançar o que você está tentando alcançar com muito mais rapidez Mas o Webflow é diferente em comparação com essas plataformas porque está mais alinhado com o programa e as linhagens que geralmente associamos associamos Está mais alinhado com HTLCSS Javascript do que outros como X e Framer E o que quero dizer com isso é que quando você cria no We framer, quando você cria no We framer, você vê uma tela em branco diretamente no Webflow, você também recebe uma Mas no We and Framer, quando você realmente tem uma lousa em branco, como um pedaço de papel em branco para escrever, você pode arrastar e soltar elementos nela e movê-los Você não precisa realmente pensar muito nessas coisas. No Webflow, você precisa pensar sobre essas coisas e ter muito mais consideração com elas O mesmo acontece com as aulas e apenas com a forma geral como você está estruturado em todo o site. Tenho certeza de que é arrastar e soltar, mas é arrastar e soltar com restrições Mas essas restrições são, na verdade, muito mais úteis do que você imagina que são à medida que você se aprofunda no processo de desenvolvimento e entende mais sobre o que realmente é essa plataforma OK. Então, para ajudar nisso, o que eu quero fazer aqui é conversar. Eu quero te dar uma pequena introdução ao HTML, CSS e JavaScript. Em seguida, vamos entrar no próprio Webflow, e vou falar sobre a interface e onde essas linguagens de programação se encaixam e as diferentes partes da plataforma em que o Webflow está realmente lidando com essas linguagens de programação Com HTML, CSS e JavaScript, não estou tentando dar uma visão aprofundada de cada uma dessas linguagens, porque cada uma delas, por si só é muito aprofundada e se torna muito complicada, muito rapidamente. Tudo o que estou tentando ajudar você a entender é o que eles são e o propósito que eles cumprem. HTML ou linguagem de mercado de hipertexto, você deve basicamente pensar nisso como o alicerce da web Agora, as duas metáforas que tenho aqui para tentar ajudá-lo a melhorar um pouco isso você deve pensar em HTML como a estrutura de um carro ou a estrutura de uma casa, ele simplesmente fornece Para a estrutura de um carro, a estrutura não me diz nada sobre o que é o carro, qual será a aparência de seu interior, velocidade com que irá, como será a aparência. Não me dá nada, tudo o que eu sei do ponto de vista é que é um carro, e é muito semelhante ao HTML quando se trata de sites. Se eu usar HTML sem estilo, sem CSS, sem javascript, não vai ficar muito bom. E abaixo, tenho um exemplo de como seria um site HTML básico. Esse código aqui, como você pode ver, você não precisa entender muito do que está acontecendo aqui, mas basicamente tudo o que temos é um título, texto de alguém e alguns links. Isso é o que parece em HTML, e não há CSS nisso, não há estilo nisso, isso é apenas HTL puro E isso é o que parece. Agora, se eu tivesse um cliente ou um cliente e eu criasse um site parecido com isso, não ficaríamos muito felizes e eles não ficariam muito felizes com isso, porque isso não é o que esperaríamos de um site moderno. Esperamos que algo seja estilizado adequadamente para que uma marca seja única e siga os princípios de design moderno, todo esse tipo de coisa. Isso não funcionaria, mas é isso que quero dizer com ser o quadro, porque o HTML fornece a estrutura. Se você pensar apenas uma página da web individual, o HTML forneceria a estrutura dessa página inteira para esta, ele me forneceria uma estrutura. Eu tenho uma seção, tenho um título, tenho corpo de texto e links, e se eu quisesse adicionar mais conteúdo a esta página, eu adicionaria isso em HTML. Mas se eu quisesse adicionar qualquer cor de fundo, se eu quisesse mudar as fontes, se eu quisesse mudar alguma coisa sobre isso, eu faria isso com CSS. Da mesma forma, se eu quisesse adicionar alguma interação, se eu quisesse que os pilares de link mudassem quando eu passasse o mouse sobre eles, eu usaria o Java Script para fazer Se eu quisesse que o tamanho do texto mudasse ao passar o mouse sobre ele, eu usaria JavaScript para Qualquer coisa que envolva pequenas animações ou interações, tudo isso é JavaScript que está fazendo isso De qualquer forma, isso dá um exemplo de HTML. Vamos seguir em frente. Se estamos migrando para o CSS, CSS basicamente define aparência da nossa página da web e é isso que eu já mencionei. É sobre design : é quando você leva o pincel para a página e o cria exatamente como deseja . Cores, fontes, tamanho e proporções, capacidade de resposta, como esses elementos e os elementos HTML mudam à medida que uma página aumenta de tamanho ou diminui de tamanho Por exemplo, à medida que ele passa do desktop para o celular, é aí que o CSS entra em ação, seguindo a metáfora que usei anteriormente O CSS ditará a aparência da sua casa. É isso que o leva de uma moldura para uma casa. mesmo para um carro, o CSS em termos de web design é a diferença entre a estrutura de um carro e um Tesla totalmente construído No final das contas, é o que torna um site um site. Um exemplo de CSS, este é um exemplo muito básico e não é necessariamente um bom exemplo, mas ilustra exatamente o que é O CSS aqui à esquerda está basicamente nos dizendo que queremos que as cores de fundo desses dois elementos mudem. Agora, esse código, como você pode ver, é HTML, e o CSS foi aplicado dentro do código HTML. Isso geralmente não seria o caso. Se você tiver um projeto real em andamento, seu CSS estará em um arquivo diferente do seu HTML e você importará seu CSS sempre que precisar. Agora, tudo o que estou fazendo aqui é adicionar os estilos CSS dentro dos elementos HTML por conveniência porque sei que não preciso de um arquivo separado para isso Para o primeiro, para o H Okay. É para a cabeça em um estilo. Estamos mudando o fundo disso para azul. E para o parágrafo, estamos trocando aquele tomate, como você pode ver aqui, e o azul Dodger pelo primeiro E isso é apenas para ilustrar como é quando estamos tentando mudar esses elementos e o que isso realmente faz Isso é tudo o que estamos tentando mostrar aqui. Agora, se pegarmos o que sabemos sobre HTML e CSS e passarmos para Javascript. Se pensarmos em um carro, o JavaScript é como o motor de um carro. É sobre movimento. É uma questão de interação. É sobre para onde o site está indo. Portanto, o JavaScript é um programa poderoso, e o line é usado principalmente para adicionar interatividade e comportamentos dinâmicos aos sites Ele opera junto com HTML e CSS, onde o HTML lida com a estrutura do conteúdo da web e o CSS gerencia sua aparência. O JavaScript dá vida aos elementos estáticos, permitindo que eles respondam às ações do usuário e executem funções complexas. Portanto, o JavaScript pode ficar muito complicado muito rapidamente e você pode fazer muita coisa com ele Em um nível muito básico, é aí que você adiciona interações para passar o mouse sobre os botões ou se quiser um botão faça alguma coisa ao clicar nele, hum, se quiser ter uma apresentação de slides em seu site e quiser que um botão acione isso, tudo isso é Javascript Mas o Javascript pode ir muito além disso. Mas, na verdade, é o motor de um site. Se você quiser que seu site faça coisas, o JavaScript fará com que isso aconteça. Um exemplo. E, novamente, devo dizer que um exemplo muito básico de JavaScript é o que eu tenho aqui. Novamente, temos o código HTML à esquerda e a saída à direita. Tudo o que acontece nessa interação é que, quando alguém clica no botão que diz, clique em mim, uma notificação aparece dizendo olá, mundo, e esse é o código que faz isso Não seria possível criar algo assim sem o JavaScript. Quando eu estiver bem. Se houver alguma interação como essa, qualquer coisa desse tipo envolve script Java. E vou mostrar exatamente onde isso entra em jogo no Webflow, porque não se parece com isso Você sabe, no Webflow, você não precisará escrever nenhum código Você não vai precisar se preocupar com nada disso. Mas ajuda entender que isso é o que você teria que fazer se estivesse projetando isso. Se estivesse escrevendo código do zero, teria que escrever seu próprio script Java, teria que criar essas funções sozinho. Pode ser, aqui mesmo. Esta é a função JavaScript aqui no verde, você teria que escrever suas próprias funções e criá-las do zero, basicamente. Acho que mencionei isso no início, mas a maioria dos sites na Internet é construída usando uma combinação de HTML CSS JavaScript, acho que a porcentagem exata disso é de 94% de todos os sites na Internet, que são uma combinação desses três idiomas E a questão é que mesmo quando você usa uma plataforma como o Webflow, seu site ainda está sendo publicado nessas linguagens. Um Webflow fornece uma interface em seu site e, em seguida, é uma interface em seu site e, em seguida, traduzido para um idioma que Não é como se o site fosse publicado forma Webflow, como se Webflow tivesse uma maneira especial de fazer isso Todas essas plataformas, todas essas plataformas locais fazem a mesma coisa. Eles pegam seu design. Eles o convertem em um código que a Internet possa entender e eles o publicam. Mflows não é diferente nesse aspecto, mas a maneira como ele faz isso é melhor do que a maioria Então, o que vou fazer agora é sair daqui e entrar no webflow e realmente dar uma olhada na plataforma e ver o que está acontecendo Vou me mudar para cá, e então este é um site da minha startup chamado ambo Isso não é para promover ambos, apenas este é o site em que escolhi fazer uma demonstração. Mas esta página em si deve ser bem direta e simples, e a página de destino bem direta e simples, e que vamos criar também será a Vamos nos concentrar na simplicidade e criar algo bem projetado, mas com foco na interface do usuário. Há algumas áreas importantes que eu quero discutir aqui e todas elas se relacionam com tudo o que acabamos de falar anteriormente. Porque eu não quero complicar demais isso. Eu só quero explicar basicamente as principais áreas que você mais usará ao projetar com o mais usará ao projetar com Webflow e por que elas são importantes Resumidamente, essa primeira guia aqui é a guia de suas páginas. É aí que você criará e adicionará novas páginas e gerenciará as páginas que você tem. Estas são suas coleções de CMS. Não vamos abordar isso agora, mas abordaremos isso em outra ocasião. O segundo é em algum lugar onde você passará muito tempo. Essa é a estrutura da sua página, e é disso que eu estava falando quando se trata de HTML. Para mim, quando vejo isso, isso representa uma estrutura HTML para mim. Essa é a estrutura do seu site. Para cada site, costumo classificar tudo com seção padrão, contêiner padrão, a menos que eu tenha algo exclusivo que estou fazendo. Mas, como você pode ver aqui nesta seção superior, chamei essa seção de heróis de um contêiner de heróis e depois coloquei um envoltório em volta dela e todo o meu conteúdo está nela. Depois, estilizei cada um desses impasses basicamente no lado direito, que é o que vou abordar a seguir. Então, se eu quiser adicionar elementos à página, eu os adiciono com o botão de adição e, se eu quiser adicionar um deck, posso arrastá-lo, mas não é como se eu pudesse simplesmente arrastar ou arrastar o texto e colocá-lo como eu quiser. Eu tenho que estilizar adequadamente, usando os princípios adequados de HTML e CSS. Eu só vou deletar isso por enquanto. Se eu voltar aqui, se eu quisesse editar esse título, eu faria isso no lado direito, no lado direito, isso é o que eu considero serem todas as suas edições de CSS Quando pensamos em CSS e estilo, tudo acontece do lado direito Muitas vezes penso nisso do lado esquerdo, estou lidando com HTML aqui. E então, no lado direito, estou lidando com meu CSS. Agora, eventualmente, você não pensará muito sobre isso dessa forma, mas para começar, ajuda ver as coisas dessa forma. Sempre que quiser fazer edições no título botão, cor ou qualquer coisa faça isso no lado direito Mas, finalmente, quando pensamos JavaScript, JavaScript é interação Na parte inferior dessa coluna à direita, você verá que pode adicionar efeitos. Agora, o Webflow adicionou isso inicialmente como uma maneira mais fácil de adicionar interações que não são enormes e complexas e exigem muito tempo para serem criadas. Você pode ter animações para sua opacidade, contornos, sombras de caixa e transformações de Tudo isso pode acontecer aqui. Mas se você quiser criar interações mais sofisticadas, faça isso nas interações Parel. Portanto, podem ser animações para quando páginas são clicadas ou passadas com o mouse, se você rola a página, os elementos IN são rolados para exibição, tudo isso seria considerado interações de Então, com isso, espero ter explicado e dado um pouco mais de contexto sobre a plataforma como um todo. Mas vamos nos aprofundar muito mais nisso e você poderá acompanhar todo o caminho como eu. O objetivo era apenas dar a você um pouco mais de uma introdução sobre como a plataforma funciona. E as tecnologias poderosas que o sustentam Mas vamos entrar em tudo isso e criar uma ótima landing page. Vamos para o próximo vídeo. 5. Lição 3 Como criar seu guia de estilo: OK. Agora que falamos um pouco sobre a interface de usuário do webfll, falamos sobre a importância design antes do desenvolvimento, e eu dei uma pequena introdução é o GM e por que você deve usá-lo Agora, o que realmente vamos fazer é começar a criar essa landing page. E se você é iniciante nisso, como se pretende com este curso, eu recomendo que você siga eu recomendo que você siga exatamente o que estou fazendo para se familiarizar com a plataforma e depois compartilhar seu projeto no final, para que eu possa revisar Posso te dar alguns conselhos sobre como melhorá-lo. Mas, na verdade, o objetivo deste curso é apenas familiarizar você com a plataforma, e é isso que espero que consigamos . É aí que estou tentando chegar aqui. Então, a primeira coisa que vamos fazer e a primeira coisa que eu sempre recomendaria que alguém fizesse. Sempre que eles estão criando um novo site no Webflow, é preciso criar um portal de estilo Agora, talvez você já saiba o que é uma porta de estilo, se já usou uma para criar uma marca. Basicamente, ele fornece uma visão geral do que é sua marca e suas especificações, o que deve ser seguido se você estiver criando algum ativo de design para uma marca específica No Webflow, o uso disso é um pouco diferente. Não se trata apenas de demonstrar a marca, mas há uma aplicação muito mais prática para ela. Então, quando criamos uma porta de estilo, escolhemos fontes ou cores. Criamos botões, é aí que podemos estilizar nossas fazendas ou blocos de rich text, basicamente, tudo o que vamos usar de forma consistente em todo o site, é aí que estilizaríamos quando estilizamos no guia de estilo, podemos reutilizar os elementos que criamos em qualquer outro lugar do site sem precisar recriá-los sempre O Webflow tem tudo a ver com elementos reutilizáveis. Acho que essa é uma coisa importante que, se você é novo nisso, quanto mais cedo entender isso, melhor, porque o Webflow pode ser muito, muito rígido se você estiver construindo tudo do zero todas as vezes O que você fará se fizer isso, tudo o que você fará é explodir todas as suas aulas. Você vai fazer com que seja um pouco mais lento. Seu site será muito mais pesado do que precisa ser. Mas se você se concentrar na criação de elementos reutilizáveis, seu site será muito mais leve , mais rápido e será muito mais fácil expandir e desenvolver Então é isso que eu realmente quero dizer aqui. Você pode ver isso aqui dentro do painel de fluxo da web. O que vamos fazer é criar muitas pastas aqui chamadas sites de demonstração Vamos começar dizendo que vamos criar um novo site para começar a partir de um documento em branco. Vou chamá-lo apenas de site Tesla Inspires Model 3 A outra coisa que quero dizer são as imagens que vou usar neste site. Você os encontrará no link abaixo em algum lugar para baixar e poderá usá-los para acompanhar. Não vou usar muitas imagens nesta primeira página, mas nas aulas que se seguem, eu usarei. Vamos começar com isso. Ótimo. Então, quando você começa com um novo projeto no WebP, você sempre verá uma tela em branco parecida com esta Mas se você acessar a guia Páginas aqui, por padrão, terá uma página inicial, uma página de senha e uma página 404 Essa é a sua linha de base. É com isso que você vai começar. O que vamos adicionar aqui é clicar nesse botão e adicionar uma página chamada Snail guys OK. E você não precisa se preocupar com mais nada dentro da frase da página por enquanto, mas vamos seguir em frente e criar isso. Então, a primeira coisa que eu quero que você pense aqui é voltar ao que eu estava falando sobre as diferentes linguagens de programação e o layout de caixa que a web usa. Tecnicamente, ainda é um cobrador de arrastar e soltar, mas exige que você faça isso com o layout da caixa Tem um pouco mais de restrições, mas elas são úteis quanto mais você se aprofunda no aprendizado sobre essa plataforma Quando você aprende sobre essa plataforma, prefere trabalhar dessa maneira, na minha opinião, de qualquer maneira. Então, a primeira coisa que vamos fazer é adicionar uma seção. E aqui no canto superior direito, é aqui que você vai criar classes. Agora, você pode ter apenas classes de linha base, que são apenas classes únicas em que eu digito uma coisa aqui, que é minha classe, ou podemos ter classes combinadas, que é onde temos uma classe base, que você vai me ver criar aqui para nossos chefes Além disso, adicionaremos outras classes para que possamos adicionar vendas e opções individuais a cada elemento. Então, vamos começar um pouco mais tarde. Mas a primeira coisa que sempre farei quando chego aqui. Acabei de criar uma classe chamada seção básica. Portanto, esta é apenas uma seção reutilizável que usarei nesta página e na maioria das outras páginas, porque as seções geralmente não precisam de muito estilo Então essa é a primeira coisa que vou fazer, e vou definir a largura para 100%. E não vou adicionar nenhum preenchimento ou algo parecido, só porque não há necessidade real de fazê-lo Essa é a primeira coisa. Então, aqui, você pode ver o valor da seção. Agora vou adicionar um bloco div. Agora, quero destacar uma coisa aqui que acho que seria muito bom que você adquirisse o hábito de usar em contêineres. Tente não usar a estrutura de contêineres Webflos que eu forneço aqui com destreza. Sempre use um impasse e depois estilize-o da maneira que quiser Não há diferença entre nenhum deles em termos de desempenho do site ou da forma como ele o usará. Eles são usados da mesma forma. Containers Webflow é a versão de um impasse personalizado, mas disponível apenas se você precisar maioria das vezes, porém, acho que o contêiner é muito mais redundante do que talvez o pretendido Eu sempre uso um impasse e o estilizo como achar melhor. Isso é o que eu recomendaria. Eu adicionei um impasse aqui e vamos chamar esse contêiner básico. Essa é a primeira coisa. Dentro disso, este é o último bloco que vamos adicionar antes de realmente começarmos a adicionar elementos. Vou chamar esse rapper. Porque vamos colocar o título da página. Você não precisa fazer isso. Eu só tenho um treino. Também é um bom lugar para começar de verdade. Além disso, adicionaremos nosso primeiro título aqui. E vamos adicionar um parágrafo. Ainda não vamos estilizá-los. Nós vamos voltar a isso. Nós os estilizaremos mais tarde, porque simplesmente não adianta adiantar nenhum deles ainda E então, se formos para a embalagem Tao, faremos algumas alterações no lado direito Vamos definir o preenchimento para cada lado disso , vou colocá-lo como 60 Na verdade, posso mudar para 40 e depois vou mostrar o que vou fazer em um segundo. Em seguida, vou alterar o alinhamento do bloco de etapas para que todo o texto mostre que todo o texto está centralizado Então, o que vamos fazer aqui é mudar para flex, e vamos fazer com que ele diminua, e então o queremos no centro Queremos tudo no centro. Agora, você pode vê-lo centralizado no título, mas não fez isso com o parágrafo Isso porque precisamos mudar isso no nível do parágrafo, mas vamos deixar isso por enquanto. Agora, em termos da largura do invólucro do título, vou mudar isso para uma porcentagem e vou fazer com que seja 60% porque acho que são duas Agora, você pode ver que ele puxou tudo para o lado esquerdo, e é aqui que temos que subir na hierarquia e mudar isso para garantir que o invólucro do título esteja puxou tudo para o lado esquerdo, e é aqui que temos que subir na hierarquia e mudar isso para garantir que o invólucro do título Então, vamos para o contêiner básico. E isso é realmente algo que eu pretendia fazer de qualquer maneira. Vamos fazer essa flexão, garantir que seja essa a sensação, e vamos garantir que ela desça de maneira vertical. Agora, voltaremos a isso um pouco mais tarde, mas vou colocar no seu estilo que o texto de preenchimento pode permanecer o mesmo Mas nada do estilo disso não importa por enquanto, vamos voltar para Então, o que vamos fazer é adicionar outra seção. Vamos colocar outro bloco div dentro dele e outro dentro dele Agora vou mostrar a vocês como elas se parecem desse lado. Temos apenas uma seção com o dvlock e outro diblock dentro dela, mas queremos dar uma aparência mais ou menos assim E é a isso que me refiro quando falamos sobre elementos reutilizáveis Vamos levar isso um pouco mais longe mais tarde, mas agora estamos nos concentrando apenas no básico. Já criamos uma seção básica clássica, um invólucro básico de títulos de contêineres Aqui nesta seção, vamos chamá-la de uma seção básica básica. Então vamos chamar isso de contêiner básico. E nós já os temos lá e você pode ver que aplicarão as opções de estilo que criamos a essas classes por padrão. Então, neste último bloco, vamos chamar isso de algo diferente. Vou chamar isso de invólucro de cabeçalhos. Porque é aqui que os títulos estarão. Então, dentro da embalagem dos títulos. É aqui que vamos ver nossos títulos. Vamos estilizá-los. Vamos aplicar as fontes de cores certas. Vamos fazer com que tenham a aparência exata que queremos e garantir que tenham o estilo adequado em cada dispositivo Então, primeiro, vamos adicionar seis cabeçalhos porque há seis tags de cabeçalho diferentes em HTML que são H um, H dois, H, H quatro, cinco, seis, e queremos que isso reflita nossa porta de estilo Você pode não usar todos os cabeçalhos H six, mas é uma boa prática tê-los e saber que você os criou. Então esse é o título um. E então, para o invólucro de cabeçalhos, queremos alterar a largura para 100% E isso é porque eu tenho os estilos de recipiente para ser Essential the vesicle Ele simplesmente inserirá tudo, a menos que eu diga ao elemento filho que deve ter a largura total da página. Então fizemos isso, e então eu também vou adicionar quatro Px de cada lado para que pareça um pouco proporcional. Então, vamos duplicar essas seis vezes. Vamos chamá-lo de título um, título dois, três ou cinco e seis. Certo. Então, agora podemos nos concentrar um pouco nisso. É aqui que vamos criar uma classe de combinação. A primeira classe que vamos criar é apenas para um título em si. Então, vamos adicionar uma classe a todos esses estilos, mas vamos adicioná-la de qualquer maneira. Vamos adicionar um título aqui. Aqui, você pode ver como o Webflow o recomendará para mim, porque sabe é um que eu acabei de criar Palavras, queremos mudar as propriedades, todos esses elementos terão em comum. Então, sabemos que a fonte é algo que todos eles terão em comum, sabemos que a cor é algo que todos eles terão em comum. A única coisa que eles não terão em comum é o tamanho e a altura. Mas outro que eles terão em comum é altura da linha, só para ressaltar isso . Mas vamos continuar. Então, vamos mudar a fonte disso para ferrovia. Agora, se formos para a tipografia do lado direito, e você já puder ver, só porque eu a tenho sobre ela, você pode ver como todas elas mudam Mas a primeira que queremos adicionar é qual é a fonte que eu quero usar, mas a ferrovia não é mostrada aqui. Então, se quisermos adicionar uma fonte personalizada do Google ao Webflow. Isso é muito fácil de fazer porque o Webflow tem todas as fontes personalizadas criadas Mas se quisermos adicionar um fundo verdadeiramente personalizado que baixamos ou compramos de um site de terceiros, na verdade teríamos que fazer o upload. Então, vamos apertar o botão adicionar fontes aqui. E isso nos levará ao site do Webflow. E quando carregar, veremos. Portanto, para o Google Fonts, posso escolher uma fonte dessa lista. Então eu vou pegar a ferrovia. Vou apenas verificar tudo isso. Às vezes, o Webflow pode impedi-lo de verificar tudo isso Outras vezes, isso não é um problema. Mas estou apenas verificando todos eles só porque quero ter controle total sobre a fonte que estou usando. Então, vamos adicionar isso. E se você tivesse um fundo personalizado que quisesse adicionar, você faria isso aqui, faria o upload de um. Então, você faria o upload de seus arquivos. Geralmente, eles seriam TTF ou arquivos OTF De qualquer forma. Continuando, fizemos o upload disso. Então, vamos voltar ao designer e ver se agora podemos acessar a ferrovia ou pelo menos ver se podemos usá-la em nosso projeto. Então, estamos de volta aqui e vamos para Stairway. Então, se eu for para a direção, lá vamos nós. Você pode ver que a ferrovia está lá. Então essa é a fonte que vamos usar. Agora, a cor para os propósitos deste curso, vou usar basicamente preto e branco. Não vou fazer nada exagerado com os esquemas de cores, especialmente porque as imagens da página de destino farão a maior parte da conversa Seria muito redundante para mim tentar usar novas cores e eles só querem manter as coisas bem Então, eu quero que as fontes, eu quero que as cores sejam pretas. Você nunca quer realmente usar preto para este, eu estou usando um preto bem pesado. Mais pesado do que o que o Webflow fornece por padrão. Mas sim, você sempre quer permanecer preto verdadeiro ou, às vezes, branco verdadeiro é frequentemente usado como preto verdadeiro, do qual eu sempre fico longe. Eu defini a cor para isso. Nós definimos a frente. A última coisa que queremos fazer é definir a altura da linha. Então, na pografia, você pode ver aqui que temos altura. Agora, uma coisa que eu recomendaria com isso é o Webflow, vamos defini-lo em 44 px por padrão Eu recomendaria editar isso o que estamos fazendo agora em nosso nível de classe base, e eu recomendaria alterá-lo para uma porcentagem, e você pode ver que ele entra E então eu recomendaria alterá-lo para 145% a 125% seria o mínimo Eu recomendaria 145%. E se você sentir que realmente precisa, pode aumentá-lo para 165% Mas esse é o tipo de intervalo que estamos analisando em termos da altura da cabeça e do texto do parágrafo. Então, vamos 145. Acho que é um bom lugar para nós. Por padrão, todos os seus títulos terão margem adicionada Você pode ver que eu tenho uma margem de 20 na parte superior para este, e eu tenho dez na parte inferior. Vou deixá-los assim por enquanto. Posso voltar e alterá-los mais tarde, se achar que não se encaixam no texto, mas, como padrão geral, eles devem estar bem. Agora, isso aciona a classe base para isso. A próxima coisa que vamos fazer é ajustar cada um deles individualmente. Para o título um, vou adicionar outra classe chamada H one. O segundo que vou adicionar é H dois. Então, outro é H três. OK. H quatro Ok. Agora que valorizamos cada um deles, o que realmente queremos fazer agora é alterar o tamanho de cada um desses títulos para garantir que sejam consistentes em cada dispositivo como podemos ver aqui A ferramenta que vou recomendar que você use para isso é chamada de escala de tipos, e eu a usei na maioria das vezes. Basicamente, o que vou fazer é fornecer os tamanhos corretos que você deve usar para cada uma de suas cabeças. Então, neste caso, eu defini a base para 18. Suportamos cada um desses REM PX ou PT. Mas eu ficaria com P x, e eles serão usados em cada dispositivo. O primeiro que vamos pegar é 53,75, e estamos literalmente passando direto E você pode ver que, como adicionamos essas classes de combinação, agora posso obsoletar cada uma dessas cabeças individualmente sem que, ao criar um título, ele não se aplique a todas elas, mas apenas àquela em que estou E vamos fazer isso. Em 44,79, depois de entrar em linha reta. Três e por último, seis Eu diria que parece bom. Agora que estilizamos isso, vamos dar uma olhada em como eles se parecem em diferentes dispositivos Acho que, em geral, eles se estilizam à medida que caem. Quando chegarmos aqui, acho que, no geral, o H ficará bem. Acho que isso é um pouco grande. Mas voltaremos a isso qualquer maneira se acharmos que é demais. Mas além disso, vamos criar outra seção. Na próxima seção, vamos fazer os parágrafos, na verdade, vou adicioná-los diretamente aqui Vou mudar o nome dessa classe para criar o invólucro de texto Eu deveria ajudar. Vamos voltar até aqui. Vamos adicionar um parágrafo. Agora, o que eu geralmente faria com parágrafos adicionar texto grande, texto médio ou padrão e, em médio ou padrão seguida, texto pequeno, porque talvez você precise de tamanhos diferentes de texto, dependendo da parte do site em que está trabalhando Então, de um a três e basicamente vamos repetir a mesma coisa novamente. Vamos apenas colocar um parágrafo. Ou, às vezes, coloque um parágrafo ou texto padrão. Vamos usar apenas o parágrafo agora. E vamos definir a frente ferrovia e vamos mudar o tamanho para 18, porque foi isso que dissemos seria o tamanho base do nosso texto. Então, a última coisa que vamos fazer é mudar a altura. Agora isso vai ser 125 ou um quatro, cinco, acho que vamos usar um quatro, cinco, então vamos pegar o parágrafo. Vamos nos inscrever em cada um deles. Isso apenas nos dá um parágrafo com aparência padrão. Em seguida, vamos adicionar grandes, padrões e médios, e depois pequenos. O primeiro será grande. Eu vou usar o padrão aqui porque eu sei disso. Esse é o primeiro e depois pequeno. E o que queremos fazer é um texto grande, eu normalmente colocaria dois P x acima da linha base, texto pequeno, dois P x, abaixo da linha base. Então, se nossa base 1 é 18, então eu vou fazer um grande e vou fazer um pequeno 16. Você poderia expandir isso. Você pode ter um extra grande e um extra pequeno. Você pode subir ou descer conforme achar melhor. Mas, para mim, geralmente precisarei desses grandes, médios e pequenos. Então, agora que isso foi feito, novamente, podemos dar uma olhada nisso e ver como ele diminui. Para mim, isso parece muito bom. O tamanho parece bom e as proporções parecem corretas. Agora você pode estar se perguntando o que estamos fazendo com isso aqui. Agora que tenho o tamanho e o estilo corretos para cada um deles, e a única coisa que esqueci de Vamos fazer esse aqui em cima. Vamos reutilizar essas classes como deveríamos cabeçalho e, em seguida, vamos colocar a sugestão C Webflow agora, depois vamos colocar H Em seguida, vamos colocar um parágrafo. E vamos usar padrões. Agora, o que eu costumo fazer é que há duas maneiras de fazer isso. Você pode duplicar isso porque o que você quer aqui é que seus títulos ou texto sejam enviados em determinados pontos Agora, o que acontecerá é que, se eu realmente mudar isso agora, vou usar o padrão desses exemplos. Se eu centralizar isso, agora mudei essa propriedade para cada lugar, o parágrafo da classe comum no padrão aparece e eu não quero isso Então, o que eu realmente gostaria é adicionar outra classe Ok. E o que eu vou fazer na verdade, aqui é demonstrar isso. Vou apenas duplicar essa seção inteira para mostrar a você Então, agora temos uma duplicata. E o que vou fazer aqui é para cada seção. Temos uma cabeça em H 1, e vou adicionar sensores. Você pode nomear isso como quiser. Essa é apenas minha preferência pessoal. Esse é o jeito que eu escolhi. Mas eu adicionaria sensores. E então eu mudaria a propriedade disso para sensores. OK. Espero que você possa ver aonde estou indo com isso E agora eu vou pegar isso e vou fazer isso com cada um deles. Então, se eu quiser adicionar um título de sensor, adicionaria um sensor vez do cabeçalho H um ou algo diferente. Isso torna mais fácil para mim categorizar exatamente o que eu quero enquanto estou criando meu site Vou para C Esta será aplicada automaticamente porque, basicamente, embora a chamemos da mesma coisa, o Webflow tratará cada uma delas como classes individuais que estão sendo usadas como parte dessa classe combinada Voltando a isso, vamos fazer esses sensores. OK. Vou copiar isso apenas no momento em que estiver interessado. E podemos ver que isso está funcionando muito bem no geral E então vamos fazer o mesmo por aqui. Ótimo. É isso que está feito. E agora, voltando ao ponto inicial que eu ia abordar, se voltarmos até aqui, agora eu posso simplesmente adicionar este formulário central, e isso não vai quebrar todo o meu site no meu sistema de classificação Então é assim que eu recomendaria fazer isso. Agora temos cabeçalhos padrão, temos cabeçalhos centralizados O que vem depois disso? A próxima coisa que eu analisaria são as mudanças de fundo. Temos esses títulos em preto. Mas o que acontece se tivermos um fundo preto ou um fundo muito escuro e quisermos adicionar nossos contras e não quisermos criar um conjunto totalmente novo de classes apenas para torná-las brancas ou mais claras. O que eu recomendaria fazer aqui é duplicar isso novamente. Só mais uma vez. Essa seção inteira. Pegue essa cópia por vez. E então, o que faremos rapidamente aqui é mudar o plano de fundo da seção. Então, isso é outra coisa que eu faria para as seções. Você criará várias classes diferentes porque seções diferentes terão origens diferentes, naturalmente, essa é uma das que você mudará muito Então, vou chamar isso de fundo escuro. Tudo bem. E então, quando eu faço isso agora posso editar esta seção individualmente. Então, vou apenas adicionar uma cor aqui para tornar isso basicamente preto quase totalmente preto. E agora que fizemos isso, vou analisar cada um deles individualmente novamente e vou adicionar um fundo escuro. Bem, eu diria que muitas vezes aqui eu adicionaria um fundo escuro, mas talvez você queira adicionar algo que talvez seja um pouco mais relevante para você. Então, luzes, vamos apenas torná-la branca. Isso pode levar um minuto quando você está fazendo isso. Agora que fizemos isso para o céu, e você só quer fazer a mesma coisa novamente com o texto então eu ilumino o texto Eu sinto que tenho que cometer um erro. Você tem todos os seus textos e tudo mais. Agora você precisa definir um conjunto diferente de classes. Você tem uma classe de combinação diferente se quiser colocar a cabeça e o texto em uma bolsa mais escura E esse é apenas um bom hábito para começar a fazer tudo isso. Pode parecer um pouco entediante e demorado, mas, no final das contas, essas coisas realmente fazem uma grande diferença se você estiver em um projeto maior e estiver tentando trabalhar com rapidez. , agora que fizemos isso, nossos textos estão praticamente resolvidos. Talvez você queira voltar e ajustar algumas dessas coisas em determinados pontos, especialmente se você tivesse cores específicas que estivesse tentando usar ou se algum desses elementos precisasse de mais trabalho, nós faríamos isso Mas como estou usando apenas preto e branco na maior parte desta página de destino, não vou precisar de muita cor nem nada. Eu sei que isso será suficiente. A última coisa que você quer fazer aqui, eu recomendaria, no mínimo, adicionar seus botões e estilizá-los adequadamente. Provavelmente também é um problema muito grande. E a última, depois disso, analisaremos o rich text, faremos rapidamente os botões e, pelo menos, você poderá ver como fazer isso corretamente. Vamos apenas adicionar outra seção, permite. Às vezes, isso pode ser engraçado. Então, uma nova seção está aí, então teremos que bloquear. Então, tudo o que vamos fazer é simplesmente duplicar esta seção novamente, porque não adianta ter que criar uma totalmente nova Basicamente, vou excluir tudo o que está nele e alterá-lo novamente. Livre-se do escuro Para este, vamos nos livrar dele , nos livrar de E, para isso aqui, vou me livrar do invólucro de texto porque sei que não precisamos dele Em seguida, adicionaremos outro bloco aqui. E vou chamar isso por adição para que possamos ver. E faremos algo semelhante ao que fizemos antes. Podemos escolher os brancos centenas por sets. E vamos simplesmente arrastar um botão e continuar assim como acharmos melhor. O que vou fazer aqui antes e com as cabeças do texto no texto. Eu teria três botões, grande, médio, pequeno. Esse é um bom hábito para se adquirir. Vamos fazer isso e ver aqui continuamos. Se vira para, vou embora Ok. OK. Então, agora que temos os filhos e aqui, vamos ficar, vamos continuar E acho que, neste caso, provavelmente vou torná-los todos pretos e depois vou duplicá-los e torná-los brancos, porque acho que não vou precisar de nada mais do que isso Mas vamos apenas garantir que eles fiquem do lado. O que faremos aqui para este primeiro botão ou para todos esses botões, sabemos que eles serão brancos. Então, vamos mudar o fundo para branco. Vou adicionar uma borda P x apenas para poder ver cada uma delas. E então, para o texto, vamos torná-lo preto. Você pode ver lá. Vamos mudar os cantos para pelo menos 20 px. Curva exatamente assim. Em seguida, vou me certificar de que a fonte foi alterada para ferrovia e que estamos usando negrito. Em seguida, vou mudar o preenchimento para 20 P x na parte interna em vez de 15, porque acho que vai ficar melhor Em seguida, vou mudar o para grande e pequeno. Para cada um deles, vou adicionar uma sombra de caixa para me ajudar. O padrão para isso está bem. Depois de adicionar a sombra da caixa, posso remover a borda porque já sei como ela fica. Você pode se livrar disso. E lembre-se de que esses botões brancos geralmente serão mostrados com um fundo escuro. Portanto, mesmo que você não possa vê-los muito bem aqui, você os verá muito melhor em um fundo escuro. É isso mesmo. E a última coisa que quero fazer é adicionar um estado de passar o mouse e clicar Então, eu quero acrescentar não uma transição. Eu quero adicionar Sim, uma transição. E eu quero mudar a cor de fundo. Agora, o que vou fazer agora que adicionei essa transição. Se eu for para Hover, posso simplesmente mudar a cor de fundo para o que eu quero que seja o estado de foco, e vou deixá-la um pouco esbranquiçada , nada muito Agora eu passo o mouse sobre isso. Você realmente não pode saber com fundo branco, mas eu apenas dou feedback ao usuário quando ele passa o mouse sobre ele Eles podem ver que é clicável. E isso é apenas uma boa prática. Novamente, é apenas mais uma dessas coisas. É uma boa prática. Agora, feita a última coisa que queremos mudar como tamanho, temos a classe base do botão, eles vão querer mudar para grande. Mira e pequena. Tão grande que vou trazer isso, vou torná-lo . Vamos chamá-lo de 30 30, e então vamos até 12 no topo 12 na parte inferior. E então vamos mudar o tamanho para um texto grande, estamos vendo 20. Ótimo. Então esse parece bom. Então, para o segundo, veremos 18 para o tamanho do texto, porque esse é o tamanho base do texto. Vamos aumentar isso para , acho que, na verdade vamos para 15 e o do meio 12. E eu vou fazer com que sejam 25. E então, para os pequenos, vamos sair, vamos até 16. Vamos sair às 28 e nove. E isso é tudo o que realmente precisamos mudar para isso. E então eu vou pegar cada um desses botões. Eu vou pegar o botão. Vou duplicá-lo. Vou mudar o plano de fundo disso para novamente. OK. E agora que dupliquei isso, o que vou fazer é alterá-los para , só preciso alterar a cor do irmão e a cor do texto deles Vamos apenas fazer. Vou colocar o invertido aqui. Novamente, você pode chamar essas classes do que quiser. Você não precisa fazer exatamente o que estou fazendo aqui. É só que se trata mais de você entender o que são as aulas. Então, vou colocar a cor invertida porque isso é algo que eu normalmente faria se estivesse literalmente fazendo inverso de tudo o que está É cor. Então, vamos deixar os fundos pretos Vamos tornar o texto branco. Lá vamos nós. Não. Essas são as principais coisas que você precisa fazer ao criar seu guia de estilo, porque quero dizer, os elementos foram criados aqui, esses são os elementos mais reutilizáveis Quero dizer, você precisa de cabeçalhos, precisa de texto, precisa de botões e esses são Mas em vez de levar mais 25 minutos para passar por tudo isso e continuar mostrando porque acho que espero que agora, se você me seguir, tenha entendido Você deve saber como estudar. Você deve saber quais propriedades devem ser alteradas e quais não devem e estar familiarizado com a criação de classes Cbo Mas vou mostrar rapidamente um guia de estilo totalmente concluído. Isso provavelmente levará mais de uma hora. Eu diria que se você está fazendo isso corretamente, depende de quanto do seu site você criou. Então, vou voltar ao painel. E o que vou te mostrar é para Ambi novamente, eu suponho demais. Eu só quero que você entenda a aparência de um guia de estilo totalmente acabado. Então, novamente, este é o site da minha startup que vou demonstrar para você. Então, aqui. E, novamente, quando eu estava construindo o site, essa é a primeira coisa que cria. Guia de estilo. Eu tenho meus logotipos aqui. Você sabe, eu criei mais títulos e outras coisas aqui para dar um pouco mais de contexto a todas as cores diferentes que estou usando Porque, como eu disse anteriormente neste vídeo, este é mais um site ilustrado, então as cores e a marca precisam ser um pouco mais, você sabe, elas precisam fazer mais do trabalho para Então, eu tenho minhas cores lá dentro, eu tenho minhas cabeças. Eu tenho diferentes tipos de textos, tamanhos de links diferentes, vários tamanhos de botões diferentes e apenas formações diferentes. Então eu tenho meu texto, formulários, textos inversos. Quero dizer, tudo está aqui porque quando eu saio e estou realmente incorporado no site porque eu já fiz todo esse trabalho. É muito mais fácil criar páginas do zero. Porque eu não preciso criar nada usado do zero, talvez às vezes eu consiga, mas qualquer coisa reutilizável, eu não preciso fazer isso Então é aí que vou deixar para os guias de estilo, porque sei que temos o suficiente em mais um prédio para uma página de destino, agora posso usá-la guias de estilo, porque sei que temos o suficiente em mais um prédio para uma página de destino . Eu não vou, não vou ter que mexer muito com isso. Eu tenho todos os sites importantes todas as classes importantes de que eu preciso já foram criadas, qual delas tem Ok. Então, o que eu encorajo você a fazer, se você quiser adicionar mais variação nas propriedades a elas se quiser usar cores diferentes, talvez você queira adicionar botões vermelhos, botões azuis, o que quiser, talvez você queira as cores do texto sejam um pouco diferentes. Eu recomendo que você reserve um tempo para fazer isso. Mas vou deixar isso aqui para o portão de venda. E no próximo cronograma, vamos realmente seguir em frente e começar a criar a página do zero. E vamos usar essas classes para nos ajudar a fazer isso. Te vejo na próxima. OK. 6. Lição 4 Como criar seu Navbar: Ok. Então, agora, você já deve ter criado seus guias de estilo e pode ter continuado adicionando mais elementos aos seus que eu fiz no vídeo anterior qualquer forma, a próxima etapa é seguir em frente com a criação de sua navegação. Agora, realmente, você não precisa começar com isso, mas eu recomendaria isso. Sua barra de navegação e seu fo geralmente são coisas que aparecerão em todas as páginas do seu site Nesse caso, estamos apenas criando uma landing page. Mas se você tivesse um grande projeto e fosse um site maior. Eu sempre recomendaria comprar o Nav Bar primeiro A razão para isso é que, embora a que vamos construir aqui seja relativamente direta e simples, barras de navegação podem definitivamente ficar mais complicadas rapidamente, especialmente se você estiver trabalhando em um projeto maior, que é algo que você deve ter Além disso, eles podem apresentar um pouco de erros quando você está tentando a obter a capacidade de resposta em todos os Novamente, para isso que estamos fazendo aqui, não devemos ter problemas, mas eu diria que é mais provável que você problemas aqui no pátio e em outros lugares em sua jornada de desenvolvimento. Então, na verdade, há duas maneiras de fazer isso. A primeira é ir até a guia de elementos e rolar para baixo e você pode simplesmente arrastar uma barra de navegação a partir daqui, mas ela não terá muitos estilos e opções Na verdade, eu provavelmente não recomendaria usar este porque sempre há algo que eu tenho que mudar toda vez que o uso, mas deixe-me puxá-lo para cima se eu puder ver como eles funcionariam. Então, quando você abre isso, a principal coisa que enfatizo sobre isso é que ele vem com um contêiner embutido. Agora, isso pode ser um pouco problemático se você quiser fazer coisas diferentes com a capacidade de resposta E, como eu disse anteriormente, contêineres integrados ao Webflow são restritos Eles não são como um bloco normal porque o Webflows acabou de editar certas partes dele, como as teias e o teclado, e é bastante fixo e rígido em comparação com Não vamos usar isso. Na verdade, o que recomendamos fazer para ficar tranquilo é entrar nos layouts plus e depois nos layouts Agora, vou falar rapidamente sobre isso porque o Webflow é construído em bibliotecas para cada projeto que você criar, você terá sua biblioteca iniciada, mas há outras bibliotecas que você pode adicionar ao seu espaço de trabalho Se você clicar aqui, navegar em Mais bibliotecas, você tem todos esses UIKits diferentes que você pode usar E se você está nos estágios iniciais disso, prefiro que você passe pelo processo de criar suas aulas e projetar seus próprios elementos para se familiarizar mais com esse processo. Se você realmente quer criar algo rápido, está com pressa e tem prazos, essas bibliotecas podem realmente fazer uma grande diferença, pois fornecem tudo o que você precisa basicamente para criar um site do zero e, em seguida, você pode simplesmente personalizar esses elementos conforme achar melhor está com pressa e tem prazos, essas bibliotecas podem realmente fazer uma grande diferença, essas bibliotecas podem realmente fazer uma grande pois fornecem tudo o que você precisa basicamente para criar um site do zero e, em seguida, você pode simplesmente personalizar esses elementos conforme achar Voltando ao assunto. Flow, vamos começar nossa biblioteca e, em seguida, vou usar um desses layouts de navegação, que não é realmente um grande problema Vamos embora, vamos pegar esse. Vamos levar essa até aqui. E isso nos fornece uma navegação realmente padrão. E se eu for para a visualização gratuita aqui em cima, podemos ver que ela vem. Não tenho certeza do quanto eu gosto disso, mas vamos ver como fica no celular. Eu virei com navegação embutida. E, na verdade, veja que está tudo bem. da forma como aparece no Não sou fã da forma como aparece no tablet, mas na verdade está tudo bem. Na verdade, eu olho para isso de perto. Mas, independentemente disso, vamos voltar ao desktop por um minuto. E sairemos da análise. Portanto, o Webflow escalará sua barra de navegação, mesmo se você usar os outros métodos e pegar um diretamente na guia de elementos É necessário que isso aconteça e analmente, será responsivo por padrão Portanto, não há nenhuma configuração especial que você precise fazer para que apareça assim no celular ou tablet. Ele fará isso por padrão, e você poderá editá-las adequadamente para frentes e apenas para as coisas usuais. O que vamos fazer aqui é fazer com que isso se encaixe com nossa marca. Lembre-se de que somos a página de destino inspirada pela Tesla. Portanto, esse botão vem com uma classe padrão de Bustin primary Vamos mudar isso para apenas um botão e vamos usar , acho que vamos usar o meio aqui. E então vamos torná-lo preto. Agora isso vem com todas as nossas fontes. Mas o que precisamos fazer aqui é realmente alterar a configuração do navlink Se fosse algo diferente, eu o teria excluído e alterado para Nav link é a classe geral que eu frequentaria se estivesse fazendo isso Queremos mudar a fonte para ferrovia e deixe-me ver isso por um segundo. Sim. Queremos que o tamanho da fonte seja 18. Na verdade, estou pensando que isso é muito grande. Vamos voltar atrás nisso. O botão, eu vou reduzir um tamanho para pequeno. Ok. E então vamos inverter a cor disso Volte para piscar. Ferrovia, faremos 16, e então faremos isso, acho que vamos torná-la semi-ousada Sim. Então faremos o mesmo aqui. As classes que este usou por padrão Webflow. Essas são as classes que eu criaria de qualquer maneira se estivesse criando isso do zero, para sua lista suspensa, esse é o nome da classe que usamos Eu simplesmente copiaria esses. Quanto mais você fizer, mais você os memorizará, mais adquirirá o hábito de apenas usá-los. Vamos fazer o mesmo, aqui está o que eu sou. E então não consigo me lembrar daquelas piscinas ou semifinais Legal. Agora, tudo isso vai continuar. Na verdade, vou continuar e, na verdade, vou mantê-los para fins ilustrativos, mas nenhum desses comprimentos aqui estará Então, vamos deixá-los como estão por enquanto. Eu vou mudar esse. Podemos mudar essa visão a última coisa que queremos fazer é adicionar o logotipo. Então você encontrará o logotipo no arquivo que eu tenho para você no curso que você pode baixar. Então, vamos escolher as imagens, fazer o upload de uma imagem. E eu vou fazer o download e eu o tenho aqui, e isso é um logotipo. É um logotipo vetorial, um vetor diz um logotipo. É SVG. Você realmente não conseguirá mudar muito disso. Mas quando você faz o upload, está tudo bem. Se isso adicionar. Lá vamos nós. Eu vou derrubar isso. Ótimo. Lá vamos nós. Basicamente, as corridas ou Na sempre precisam se unir. Mas, novamente, estamos apenas criando uma landing page aqui. Não vou precisar vincular tudo isso, mas você faria isso aqui embaixo. Se você está indo em frente e está tentando criar um site completo com base nisso, se estiver adicionando links à sua Barra NaF, faça isso no menu de links aqui e aqui e selecione sua página ou selecione uma seção da página, o que é mais provável que seja o que faremos com isso Voltarei a isso um pouco mais tarde. Ok. Então, sim, isso é essencialmente uma barra de NaF e é escalável, como você pode ver, trazê-la de volta para alguns modos gratuitos Então, se eu tirar isso, vai aumentar e diminuir comigo. Como eu disse, na minha experiência, eu fiz muitos desses Naar valor nominal, geralmente podem ser muito simples, mas eles podem se complicar muito rapidamente, dependendo do que você está tentando fazer, especialmente se você tem uma ideia muito específica em mente do que está tentando criar Nesse caso, isso não me incomoda muito, isso parece absolutamente bom Mas, além de uma coisa, eu realmente vou consertar. Mas se isso fosse meu e eu realmente me importasse marca e com a certeza de que fosse uma forma realmente particular, eu poderia estar nisso por muito tempo. Então, neste caso, pode levar 10 minutos, mas em outra ocasião pode demorar muito mais Mas sim. É isso mesmo. Então, nos vemos na próxima. Ok. 7. Lição 5 Como criar um símbolo: Tudo bem. Havia uma última coisa que eu queria acrescentar sobre o Navbar Depois de criar sua barra de navegação, você a estiliza corretamente. Tudo está exatamente como você quer que fique. A última coisa que precisa fazer dele um componente. Um componente está basicamente de volta a essa ideia de elementos reutilizáveis No momento, estamos usando elementos reutilizáveis no sentido de classes Estamos adicionando classes aos elementos para facilitar nosso trabalho de desenvolvimento. Mas criar um componente basicamente cria um elemento fixo que você pode arrastar e soltar em qualquer página, o que torna tudo muito mais fácil. Isso ajuda a tornar seu processo de design mais eficiente novamente. Então, o que vamos fazer aqui é clicar na barra de navegação Agora, você quer ter certeza de que realmente clicou na coisa toda. No meu caso aqui, e depois vamos até aqui e vamos criar um novo componente, e vamos chamá-lo de N acontecerá é que se eu, por exemplo, acessar os guias obsoletos e quiser adicionar essa barra de navegação, eu simplesmente volto aos componentes e, em seguida, posso simplesmente arrastá-la Para. E então eu posso literalmente pegá-lo e adicioná-lo ao topo da minha página assim. Obviamente, isso não parece correto. Então, o que eu vou fazer é rapidamente manter isso. E como você pode ver lá, eles têm uma barra NaF em nossa página de portão de vendas Então, isso acaba para o bar Nath. Qualquer dúvida, deixe alguns comentários e ficarei feliz em respondê-los . Então, vou ver o próximo. OK. 8. Lição 6 Como criar sua seção de herói: Tudo bem Então, agora que criamos a barra NaF, a próxima coisa que vamos fazer é criar a seção de heróis Agora, se você não sabe o que é a seção do herói, a seção do herói é simplesmente o banner que aparecerá acima das dobras da página Então, basicamente, é a primeira coisa que as pessoas vão ver quando visitam uma página específica. Nesse caso, se fosse sua página inicial, é a primeira coisa que a maioria das pessoas verá quando visitarem seu site como um todo. Hum, eles podem não ir mais fundo. Eles podem não ver mais nada no site. Eles podem nem rolar, mas a primeira coisa que verão é a seção de heróis. Então você quer que seja o melhor possível, basicamente. Então, é aqui que você normalmente verá vídeos adicionados como plano de fundo. Você verá profissionais de marketing e designers dedicarem mais tempo e esforço para garantir que esta seção seja o mais atraente possível E neste caso, vamos apenas tentar e, sim, vamos tentar criar uma boa seção de heróis que motive os usuários. Então, o que vamos fazer é adicionar uma nova seção. Novamente, acho que vou construir essa peça do zero, mas vou mencioná-la apenas no caso de você querer seguir esse caminho. Você pode simplesmente adicionar uma seção de heróis de um desses layouts, se quiser Você não obterá o máximo benefício disso do ponto de vista do aprendizado, mas pode fazer, se quiser literalmente, ter seções de heróis que você pode adicionar aqui. Eles têm modelos. Mas o que vou fazer é criá-lo do zero, para que você possa ver o processo completo e o que você precisa fazer se estiver construindo do zero. Vamos adicionar uma nova seção. Nessa seção, vamos adicionar o Diplock. Vou me certificar de que entrou e não entrou. Então, vamos corrigir isso, vou garantir que esses nomes sejam corretos. Seção básica básica. Recipiente básico. Na verdade, esse é um dos casos em que, na verdade, sou como classes da minha seção básica e do contêiner básico , dependendo do tamanho e da proporção que eu quero que seja. Isso é o que eu normalmente faria e normalmente chamaria o herói da classe, mas vou falar sobre isso quando chegarmos lá. Então, dentro do meu contêiner, quero adicionar outro cadeado. E eu realmente não sei o que vou colocar aqui ainda, então vamos voltar a isso. Então, para a seção, o que eu quero fazer é que o wtf seja 100% de tamanho e proporção O que vou fazer primeiro é adicionar a imagem, eu acho. Vou tirar todas as imagens que tenho porque ainda não fiz isso. Vou adicionar todas as imagens da minha pasta ao site. Então você pode ver aqui que nós carregamos a imagem antes, então você deve saber como fazer isso, mas vamos apenas fazer o upload. E então são essas imagens aqui, uma saída Então, temos todos eles dentro do Webflow. Muitas dessas imagens são bastante grandes. Normalmente, eu gastaria tempo para reduzi-los para um tamanho menor, porque você pode ver. Tenho certeza de que o Webflow os sinalizará quando eu os carregar. Sim, eu fiz. Parece que não foram enviados todos eles, mas sim a maioria deles. Isso é bom. Eu vou vir aqui rapidamente e vou fazer algumas mudanças rápidas. Eu já tinha me configurado. Ok. Pegue-os, coloque-os lá. E acho que isso bastará. Não sei se vou deixar isso no vídeo ligado, mas se você quiser saber como converter imagens algo menor no Mac, aí está. Vamos voltar para a tela cheia aqui. Então, quando você está adicionando um plano de fundo à sua seção e eu vou adicionar essa classe, você vai colocar e eu vou tirar o máximo proveito disso. Vou fazer algo para que eu possa ver o plano de fundo inicialmente. Faremos isso e depois chamaremos de 500 para que eu possa ver exatamente o que está aqui. Agora, o que vamos fazer é rolar até os planos de fundo e adicionar a imagem de fundo Agora, um que eu ainda não decidi. Estou seguindo o fluxo aqui, ser honesto com você, mas acho que vamos escolher algo um pouco mais brilhante Como um desses, na verdade, acho que este deveria fazer isso. Certo. Agora, você tem algumas opções aqui. Você tem capa e conteúdo personalizados. Personalizado é onde você pode escolher exatamente onde na imagem, o que você quer mostrar. É na capa que você pode tentar mostrar toda a imagem, mas você ainda pode selecionar a parte que realmente deseja mostrar. Personalizar é apenas definir a largura e a altura, você define tudo, mas você acaba com uma coisa estranha em que a imagem começa a se repetir nesse caso, três vezes ela está tentando se repetir porque simplesmente não cabe e não sabe realmente o que você está pedindo que ela faça Vamos usar uma capa para que sempre caiba na tela. Vamos centralizá-lo e eu vou ajustar a altura disso para 800, eu acho, talvez menos do que isso, talvez sete Sim, e então eu quero mudar a forma como o fundo também fica sentado. Isso não vai fazer muita diferença. Vamos tentar seis. Talvez essa seja a parte do switch. Sim, isso parece melhor. 600. O que eu quero fazer aqui é que minha barra de navegação apareça sobre a imagem E o que eu quero dizer com isso é que eu quero que ela fique em cima da imagem, e eu não quero nenhum fundo branco. Eu só queria me sentar bem. Eu quero que tudo se encaixe. O que vamos fazer é voltar ao NaF Bar E vamos mudar o pano de fundo disso. Então, vamos até aqui, e acho que o pano de fundo pode estar vindo do Nope Deve estar vindo do contêiner. Não, não está vindo do contêiner. Mas vamos ver, vamos tentar do início. Então, o branco, na verdade, pode não ser. O que vamos fazer é criar deixar essa barra de soneca pegajosa, que significa que em termos de onde ela fica na página, ela não tem uma calçada ou não herdou Portanto, ele ficará apenas como um elemento fixo em cima de tudo o mais na página. E à medida que rola, ela permanecerá fixa. Então, vamos fazer isso agora. Então, se eu for até aqui, agora, está configurado como estático, mas vou mudar isso e vou configurá-lo para, e você pode ver que não havia fundo branco. Eu estava errado sobre isso inicialmente. Agora que mudei isso, o logotipo e o texto, agora a Barra de Navegação, agora ficam no topo da seção de heróis Mas como eu mudei para fixo, ele fez algo com a largura da barra de navegação, então vamos seguir em frente e corrigir isso E precisamos ter certeza de que isso esteja definido para 100% de largura. Ok. Porque agora, como você pode ver, está em 86. Nós fazemos isso, é tudo de volta. Agora, acho que está tudo bem, mas não tenho certeza sobre essa imagem agora que estou olhando para ela. Acho que talvez queira mudá-lo se conseguir encontrar um que seja mais brilhante ou uma cor clara no sentido de que não há padrões Acho que vou usar uma imagem como essa. Vamos ver o que temos. Então, vamos voltar aqui, escolher a imagem. E esse com o azul aqui, aí está. Isso parece 100 vezes melhor. Assim, podemos ver facilmente todo o texto do ponto de vista da acessibilidade, ninguém terá problemas em ler isso, e a imagem do carro está muito mais focada e provavelmente se encaixa um pouco melhor como seção de heróis. Agora, em termos de texto, essa foi a próxima coisa que precisamos fazer. E nós vamos subir até aqui. Eu já adicionei um bloco de desenvolvimento, então vamos voltar a isso e ver como está funcionando. Isso está no topo aqui. Então é aqui que eu vou na verdade, vou colocar um pouco de preenchimento nisso e não vou estudá-lo ainda Vou mudar isso mais tarde, só para que você possa ver exatamente onde está, agora você pode ver esse bloco de desenvolvimento aqui. Deixe-me voltar ao assunto. Ok. Você pode ver como está no topo da página. Se eu começar qualquer texto com isso, não vai parecer certo e eu teria o macaco por perto com muita coisa para realmente tentar obtê-lo se eu mantivesse essa opção de layout Mas se eu for até o par desse desbloqueio, que é o contêiner básico Vou fazer desse herói o s for home container. O que vou fazer é editar o layout do contêiner. Eu vou fazer com que tudo seja enviado basicamente. Então, aqui. Na verdade, está tudo bem. Agora que vamos seguir em frente e adicionar alguns textos. Há algumas coisas que devemos considerar antes de fazer isso. Lembre-se de que eu estava falando sobre colocar classes de combinação fora da seção básica e do contêiner É aqui que realmente teremos que fazer isso porque se eu começar a tentar adicionar texto e adicionar elementos e movê-los da maneira que estão configurados, vai ser muito difícil para mim fazer isso O que eu quero fazer são duas coisas que eu tenho que acrescentar aqui. Preciso editar o contêiner básico e editar o cadeado de desenvolvimento que adicionei, mas na verdade ainda não fiz nenhuma personalização Se formos até o contêiner básico, o que vamos fazer, vou fazer com que a altura desse seja de 100%. Qual foi a porcentagem, e vamos fazer isso 100 e você pode ver que agora caberá 100% na vertical e na horizontal Mas o que isso me permite fazer é colocar o bloco da morte no centro, basicamente. Agora que está feito, eu posso voltar aqui, e isso deveria ser, e podemos ver os impasses aqui no centro Agora vamos para o bloco D e vou mudar o nome para uro Content wrap ou algo parecido. Novamente, você pode chamar suas aulas do que quiser. Só que algumas pessoas preferem usar códigos ou abreviações para suas aulas porque querem usar pequenas quantidades Para mim, sou uma pessoa bastante linguística, então gosto de usar as palavras que, como ideal, às vezes, talvez você queira que suas aulas sejam um pouco curtas, acho mais fácil identificá-las e também lembrá-las Sou só eu. Todo mundo é diferente. Agora que temos isso aqui, a largura disso, vamos fazer 100% novamente, o que é atualmente. Assim como o contêiner, vamos fazer com que a altura seja de 100%. Fica divertido. Então você deve estar se perguntando por que eu aceitei o impasse e basicamente o tornei o mesmo que um contêiner E isso porque, quando adiciono os elementos a esse texto, o que vou adicionar e as mudanças que talvez precisem fazer com que eu tenha meu próprio impasse para tudo isso, em vez de tentar fazer edições diretamente no contêiner todas as vezes Porque mesmo sendo uma classe combinada, eu ainda não quero fazer muitas edições Quero que isso seja bastante consistente não importa aonde eu vá, porque eu poderia criar uma seção de heróis totalmente diferente com uma intenção completamente e quero mostrar coisas diferentes, quero que sejam completamente diferentes. Essa classe de combinação que eu tenho para a seção de heróis então pode se tornar redundante porque eu a personalizei especificamente para o que estou fazendo aqui Sempre faz sentido usar um novo bloco morto sempre que possível , e isso não afeta muito o site. Aqui, vamos adicionar alguns textos. Essa será a primeira coisa. Você pode ver onde isso está acontecendo aqui. Em termos de texto, vou ser rápido. Vai ser elétrico rápido. Eu vou voltar e mudar, eu acho. Mas para que possamos fazer isso. E nós vamos, Clase, vamos fazer um cabeçalho e vamos colocar um. Qual foi a última coisa que eu queria fazer aqui? Vamos torná-lo centralizado e isso deve ser o que eu penso Agora, o que eu tenho que fazer aqui é posicionar o texto um pouco alto demais, então eu quero diminuí-lo um pouco e é aí que posso acessar invólucro de conteúdo do heedro e basicamente mudar Em vez de fazer 40, posso fazer 60, 100, 140. Você pode ver que é muito baixo. 160, talvez um pouco alto demais, então vamos de 65 a talvez 70. Sim. Isso parece fazer a verificação para mim. Agora, e se eu quiser adicionar algo na parte inferior desta seção aqui, como apenas algumas informações, pequenos blocos de texto. O que eu realmente vou fazer é adicionar outro bloco de. E eu vou colocar isso para realmente fazer qualquer coisa, na verdade. Vamos começar e ver se podemos adicionar uma grade diretamente a isso. Vou me livrar do desbloqueio. Vou usar uma pilha rápida de grade, na verdade, é uma coisa boa, apenas uma oportunidade para eu ressaltar isso As grades são algo que você vai se acostumar a usar muito no fluxo da web, eu diria Os rids facilitam muito a adição de elementos de posição, especialmente se forem colunas, um pouco de texto, coisas que você deseja alinhar e que estejam em formato de grade Você não gostaria de usar muitos deplocks assim. Talvez você não queira usar muitas colunas para isso. No geral, usar uma grade geralmente faz mais sentido. Você pode ver aqui que eu adicionei uma grade de dois por um. Eu vou fazer quatro por um. Então, dentro dele, vou adicionar Dlocks it lets me permite, o que não é normal Então, estamos aqui embaixo. Vamos apenas adicioná-lo diretamente às células. Ainda não parece estar nele. Tenha paciência comigo. Eu faço esses 20. E em cada uma dessas células, vou simplesmente colocá-lo sobre o texto para que você possa ver como estou trabalhando nisso, se ele permitir, o que não parece ser. Vou pegar , copiar e colar em cada célula porque acho que seria muito mais fácil. De qualquer forma, vamos copiar, colar, colar aqui. E cole aqui. Agora, antes de começar a personalizar tudo isso, quero ter certeza de que a posição na página está correta Então, o que queremos fazer é voltar ao nosso invólucro de conteúdo E a maneira como temos essa configuração e acho que me enganei é. Então, queremos usar o Flex. Queremos que isso aconteça verticalmente. E queremos que seja o que queremos que eles apareçam na parte superior e inferior. Então, deixe-me ficar comigo por 1 segundo. Lá vamos nós. Então, queremos um espaço entre eles. Então, eu quero ter meu bloco aqui na parte superior e, em seguida, quero ter todos os meus elementos de texto na parte inferior. Então, o que vamos fazer é criar essa grade, e vamos chamá-la de grade que realmente não importa. Vamos fazer com que isso fique bem. 100%. Agora, aqui dentro, eu quero adicionar texto de parágrafo, então vamos pegar isso e adicioná-lo lá. Novamente, isso vai mudar, então não se preocupe. No final, ficará muito melhor. Ok. Agora, obviamente, as cores do texto e outras coisas, estamos prestes a mudar o conteúdo. Na verdade, não vou mexer em muita coisa. De qualquer forma, começaremos a personalizá-lo. Vamos fazer o cabeçalho e vou compartilhar com vocês algo aqui. Os h12 345, aqueles que foram estilizados no guia Eles podem ser aplicados a tags diferentes. Então, as configurações, que algo que deve ser mostrado aqui, você verá essas são as configurações da sua cabeça aqui. Este está correto, obviamente, no topo da página, o H que também é seu padrão. Esse é o que vamos usar. Para este aqui, tecnicamente seria um H dois, e aumentará proporcionalmente sem nenhuma classe Mas quando eu vou aqui, posso fazer disso um H três ou um H quatro, se eu quiser. Eu posso torná-lo um H cinco se eu quiser, e isso não afetará a etiqueta. Então, o que quero dizer com isso é que você não precisa se restringir ao estilo específico que criou para uma tag específica. Portanto, pode ser marcado como H dois, mas na verdade você está usando o estilo H quatro, algo a ter em mente ao passar por isso. Vamos escolher cinco porque eu quero que seja bem pequeno e, no cabeçalho H cinco, você vai escolher esses dois. Pgraph, então o que vamos fazer é torná-lo pequeno E vamos aplicar tudo isso rapidamente. Gráfico pequeno. M. Ok. E precisamos mudar a cor deles porque, no momento, eles não parecem certos. Vamos fazer cada um desses sensores e eu quero que eles tenham uma cabeça de luz. A célula em si, precisamos configurar esse sensor. Então você pode ver que acabei de trocá-lo por aquela célula e vou criar uma célula. Às vezes também para as células. Se você não quiser editá-los diretamente, você pode adicionar um impasse diretamente a eles neste caso e apenas fazer a célula, porque eu posso, se fosse uma camada mais complicada, eu apenas adicionaria um impasse apenas para me dar aquela camada extra de personalização, se Certo. E precisamos nos livrar de parte do texto aqui, então vamos pegar isso. Agora, este texto, você deve estar se perguntando, quase definitivamente vai ter que mudar. Não quero dizer que o texto terá que mudar sozinho. Quero dizer, o estilo , porque acho que isso não vai se encaixar muito bem quando eu estilizo tudo isso que estou debatendo aqui, debatendo agora, também algo que você pode ver Estou fazendo tudo isso individualmente. Normalmente, eu apenas os copio e colo. Isso é apenas para fins de demonstração. Além disso, demonstra como é fácil adicionar classes rapidamente Não é difícil porque a web é bastante intuitiva, ela sabe mais ou menos o que você vai pedir que ela faça antes de perguntar , porque sabe quais são as classes como existentes. No momento, isso está feito, esse texto não parece certo. Então, acho que o texto do parágrafo deve ser menor. É aqui que, novamente, podemos adicionar outra classe comum para fazer isso funcionar. Então eu preciso que isso seja menor. Então, agora que está sentado, acho que 16 podem ver isso lá. Realmente precisa ter 14 anos. Então, o que eu faria é adicionar outra classe de combinação, normalmente. Agora, em um mundo ideal, vou acomodá-lo pelo fato de precisar texto ainda menor do que 16p. Eu o adicionaria ao meu guia de estilo. Eu o traria de volta aqui e aplicaria neste caso e não. Vou criar uma nova turma aqui agora porque é mais conveniente e me poupa um pouco de tempo. Então, vamos colocar um pequeno texto vermelho para heróis. E isso é especificamente apenas para esse elemento. Eu uso essa camada e, se eu reutilizar uma camada e estiver usando em lugares diferentes , renomearei novamente Vamos pegar isso e fazer com que seja 14. Isso é muito melhor e os cem 45% podem ficar. Tudo bem. Vou considerar que isso se aplica a todos eles. Quero ver se devo manter esse debate sombrio, debater E acho que, na verdade, acho que vou mantê-lo preto. Então, agora que eu passei por tudo isso, você pode ver que isso não está realmente aparecendo tão bem quanto eu talvez quisesse. Então, vou prosseguir e na verdade, fazer mais algumas edições Então, eu quero reduzir um pouco essa grade, e vou fazer com que talvez até dez, trazê-la até lá. No nível da seção, vou adicionar algo apenas para que essa textura fique um pouco melhor. Se voltarmos aos planos de fundo, podemos clicar. Podemos clicar em mais e vamos adicionar um gradiente. Agora, o nível superior desse gradiente será zero de transparência, traga isso, livre-se disso Na parte inferior, vamos mudá-lo para preto, assim mesmo. Em seguida, vamos baixar esse controle deslizante desse jeito. Então, podemos ver que criamos um contraste suficiente entre o plano de fundo e o texto para que o texto em branco apareça corretamente agora. Mas isso realmente não interfere na imagem ou no texto superior, posso simplesmente embranquecer muito bem Então, novamente, não vou gastar muito tempo com a cópia aqui porque é claro que isso não é sobre direitos autorais. Eu vou colocar superior. Nunca dirigi uma tele, nunca dirigi uma, mas se você acha que era superior, então para jogar Então, esse é um bom exemplo de uma seção de heróis. Agora, você pode estar se perguntando: o que fazemos aqui quando queremos estilizar esse estilo, desculpe, quando queremos torná-lo responsivo Agora, vou adicionar uma lição um pouco mais tarde sobre a capacidade de resposta como um todo Mas só para fins de demonstração aqui, se eu levar isso para o tablet, na verdade não parece muito ruim, mas há algumas edições que eu vou querer fazer Então, no invólucro do conteúdo, isso vai ter que mudar para provavelmente zero, eu acho. Sim. E então, em termos da grade em si, se você clicar na grade e apenas nela, poderá diminuir o padrão da história da margem entre cada elemento, e eu realmente não sei se quero fazer isso. Talvez eu queira manter isso exatamente onde está. Mas, como você pode ver, esse texto não mostra exatamente como parece um pouco complicado trabalhar em conjunto. E para o tamanho da tela, esse texto parece um pouco grande demais. Então, como eu já adicionei minha classe de combinação, posso voltar à tipografia e provavelmente vou mudar isso para 12 Eu acho que isso parece certo. Você pode ver a diferença que parece mais fácil de ler e ver. Em seguida, estamos nos resumindo aos menores, telefone horizontal e telefone, e é aqui que podemos realmente mudar a grade y. O que eu gostaria de fazer é me livrar dessas colunas e torná-la quatro por quatro E isso parece bom, mas se choca com a imagem, e vou ter que estender o tamanho da seção para que esta funcione Então era 600, descarte-o gradualmente em 100 e veja se obtemos 700 é melhor, 800, seja demais. Não, na verdade, está tudo bem. 800 também funciona. Isso parece bom para mim. Por fim, a última coisa que vamos querer ver é o próprio celular. Então, agora no celular. Este realmente parece bom. Eu só preciso estender isso um pouco mais para que o texto não atrapalhe. E talvez eu queira diminuir esse gradiente mas , mais ainda, o texto ainda é fácil ler no topo da página, onde diz mais rápido e poderoso Vamos para a seção. Vamos aumentar isso para 900. Isso parece melhor. Vamos descer até os planos de fundo e podemos ver nosso gradiente de fundo Vamos trazer isso de volta um pouco e isso já parece muito mais fácil de ler Agora, você notará aqui não vou gastar muito tempo com isso para fins desta demonstração, mas isso é uma ilustração de onde as barras de pressão podem se tornar bastante complicadas Você pode ver aqui, quando eu começo a rolar, que os elementos foram corrigidos, e isso ficará mais evidente medida que adicionarmos mais elementos à página Mas o preto não vai ficar bem quando eu estiver descendo a página e os elementos não são dinâmicos, então eles não mudarão de cor à medida que passarem por cima de coisas mais escuras ou mais claras O que eu realmente quero aqui é que eu queira alguma interação ou animação que, quando eu começar a rolar, o fundo fique branco Agora, interações não são algo em que vou trabalhar aqui, mas liderar o curso que seguirá este, que será chamado de Mastery for web flow ou algo parecido Quando expandimos este site e o transformamos em um site completo da Tesla com todos os veículos e outras coisas, você me verá criando interações e, na verdade, vou expandir isso muito mais, mas vamos deixar as coisas assim por enquanto Mas você pode ver que parece bom. Na minha opinião, esta é uma herosseção completa, tão boa quanto Tesla Na verdade, agora que estou relembrando isso, talvez torne isso um pouco maior. Então, volte para baixo para mover meu rosto para fora do caminho de volta para a seção. E eu vou fazer com que sejam 700. Ok. Batedor. Sim, isso é definitivamente. Não há um pouco mais de espaço apertado. O espaço é seu amigo quando se trata de design e sites. Isso, na minha opinião, tendo analisado muitos deles. Isso seria considerado muito bom. Ele coloca ênfase no veículo. Receberemos o texto abaixo e acima. Se estivermos colocando uma boa cópia nisso, provavelmente seria bastante convincente Agora que criamos nossa seção de heróis, a próxima coisa a fazer é adicionar mais conteúdo a esta página e torná-la mais uma página totalmente formada. Nós faremos isso. Te vejo na próxima. 9. Lição 7 Como criar o corpo da sua página: Tudo bem. Acabamos de construir nossa seção de heróis. A próxima coisa que precisamos fazer agora é seguir em frente e começar a preencher o restante desta página. Eu não pensei muito nisso neste caso. Se você seguiu meu conselho no vídeo anterior e tentou criar uma estrutura de arame ou se inspirou na página, está tentando criar uma página brilhante. Neste caso. Estou apenas indo para o fluxo. Essa não vai ser uma página enorme. Tudo o que eu realmente estou tentando fazer aqui é cobrir todas as estruturas básicas dos layouts básicos de página que você provavelmente implementará A primeira que vamos fazer é criar uma coluna básica. Basicamente, devido ao layout da coluna. Vou pegar o contêiner da seção. E quando se trata de colunas, há duas coisas que você pode fazer. Webflow logo abaixo. Eles costumavam colocar muito mais ênfase nisso do que davam. Agora eles costumavam usar o Quickstak para tudo. Portanto, você pode usar as colunas ou a função de grade aqui embaixo. Não recomendo o declam porque você realmente não precisa se preocupar com nenhum deles Eu me concentraria apenas em usar o Quicksta para tudo. É muito mais fácil, atenda todas as suas necessidades e você não precisará alternar entre o antigo sistema de layout dri ou o sistema de colunas Então, basta usar o Quickstak. Então, vamos arrastar isso Em seguida, vou rapidamente me certificar de que adicionei minhas classes a elas corretamente, então vamos para a seção básica. Recipiente básico. E então eu vou chamar isso de grade de coluna dupla. E vamos transformar as palavras em centenas. Em termos de antecedentes. Essas são algumas coisas que podemos fazer aqui. Nós podemos agora mesmo, eu vou deixá-la preta. Eu volto e adiciono uma imagem, ainda não decidi, mas vamos adicionar outra. Vamos aqui e literalmente, vamos fazer isso preto. Então, na célula, vamos adicionar outro diploma e é disso que eu estava falando anteriormente, era só um pouco mais de personalização Vou adicionar uma imagem aqui. Ok, e vamos escolher uma imagem. Vou escolher a imagem? Essa é a questão. Agora, novamente, se estamos realmente focando no conteúdo desta página e tudo mais, estaríamos fazendo algo que talvez falasse sobre acessibilidade ou o interior ou as especificações do motor, coisas assim No momento, estamos nos concentrando apenas nas camadas e, na verdade, usando o fluxo da web. Então, vamos fazer algo assim, eu acho. Então, aqui, vamos adicionar outro bloco de imersão se adicionarmos um parágrafo Vamos adicionar um título acima e abaixo dele, vamos adicionar um botão. Vamos criar um cabeçalho e, em seguida, vamos torná-lo um H dois. Nós vamos fazer isso, não queremos que seja censurado. Nós vamos conseguir. Faça com que se dirija. Tive que criar outra classe aqui chamada light heaven porque quero mantê-la à esquerda. Quero mantê-la à esquerda, um título padrão. Eu quero torná-lo branco. Mas como não estou usando o centro do que a classe combinada de faróis, quero tirar o centro Estou tendo que criar uma nova classe que a torne branca. Novamente, é apenas algo que você precisa fazer de tempos em tempos, mas não é grande coisa. Provavelmente vou pedir para fazer o mesmo com este, o que está bem. Parágrafo. Vamos seguir os padrões, vamos usar um parágrafo e vamos tornar isso branco Mas acho que vamos realmente fazer o pequeno. Acho que não gosto muito das arquibancadas, talvez eu as deixe muito grandes. Isso é melhor. Então faremos o. Acho que vai ficar bem. Agora, se estamos olhando para eles, eu realmente pareço bem no geral, mas quero ter certeza de que o padrão para isso é um pouco mais ajustado, vamos colocar talvez 40 Acho que vamos escolher 4020 desse conjunto , então, em termos de g, vamos primeiro aqui e 40 abaixo Estou pensando em tecer mais espaço, então talvez 60100100 É melhor tecer mais espaço. E eu vou colocar o interior. Essa é uma seção concluída. A seguir, vamos mais uma seção de foco de imagem. Abaixo, vou adicionar outra seção. Outro desenvolvedor. E o que faremos é fazer outro título e outro desenvolvedor. Em seguida, faremos um parágrafo e, abaixo disso, criaremos um botão. E você verá aonde eu vou com isso em um segundo. Então, vamos voltar aqui, seção básica. Então você notará enquanto eu vou. Não tenho trabalhado na capacidade de resposta enquanto faço isso, mas vou voltar a isso e fazer isso no final Então, este será um contêiner básico. E então, para esta seção, eu vou fazer planos de fundo Um. E aqui, vamos garantir que tenhamos uma imagem. Vamos escolher uma imagem. Então, uma que provavelmente poderíamos ser bastante impressionante, eu acho que seria boa. Quero dizer, temos muito por onde escolher aqui. Talvez aquela que tínhamos inicialmente possa ser um bom começo para isso novamente, queremos ter certeza de que a altura da seção é adequada, então vamos fazer 800. E estou apenas me certificando de que isso esteja correto à medida que avança. E eu preciso de um invólucro aqui, que é algo que você notará que não foi adicionado, então eu preciso entrar no recipiente e depois vou colocar todo o resto dentro dele Eu só vou chamar isso de conteúdo. Não, como vou fazer seus invólucros, talvez seja apenas ter uma classe básica de invólucro de conteúdo Além disso, talvez você queira adicionar outra classe de combinação para tornar as coisas mais específicas, mas, novamente, isso é inteiramente para você E, em seguida, invólucro de conteúdo novamente, vamos embora. Precisamos fazer com que a largura disso seja 100%. Nós fazemos a altura 100%. E conserte, esse era o contêiner. Isso deve ser definido de forma um pouco diferente. Então, com o capturador de conteúdo , vamos flexionar, descer e queremos ter certeza de que está esticado, mas acho que ainda não está funcionando está esticado, mas acho que ainda não está Vou fazer isso para que você possa ver isso, mas isso não parece certo, então precisamos adicionar um pouco de preenchimento ao redor disso Há algumas coisas que precisamos fazer , talvez fotografadas na altura da seção, porque pode ser que sejamos altos demais para o que almejamos OK. E queremos que seja o centro desta vez, e queremos que seja assim e, para o impasse, novamente, queremos centralizar esse OK. Vou apenas adicionar algo ao botão. Eu me importo. Depois de fazer isso por um tempo, acaba se tornando uma segunda natureza. É claro que leva tempo, mas Webflow não é tão difícil quanto algumas pessoas imaginam. Acho que uma reclamação comum que eu tive sobre Rigid. Eu entendo de onde as pessoas vêm por causa disso, mas quando você está fazendo esse tipo de trabalho por tempo suficiente, você começa a apreciar um pouco mais as restrições Emmausalmente, tenha uma estrutura com a qual você está trabalhando. Quando você conhece, você sabe, outras plataformas como o Wicks, que eu já usei muitas vezes Definitivamente, não sou muito fã de. E isso não quer dizer que sejam plataformas ruins. É só que quando você começa a tentar fazer coisas mais complicadas ou realmente quer reduzir algumas coisas, ou, eu digo que o principal é a complexidade Se você está iniciando a complexidade de tipos do seu projeto, então wx não é o único a ser usado eu não diria que realmente não tem minha opinião, eu não diria que realmente não tem os recursos, mas, novamente, todo mundo tem sua própria opinião. Então, de qualquer forma, então vamos trazer isso OK. Reduza isso e tudo isso deve se encaixar muito bem. Acho que, por aqui, precisamos alterar a largura disso porque você notará que, com este parágrafo na parte inferior, é muito largo, se estivéssemos falando sobre estivéssemos experiência do usuário com isso e com o design, isso não é uma boa experiência do usuário e não é um bom uso do design. Queremos que isso seja muito mais aceito. Então, vamos fazer 60 até lá, e então eu preciso ter certeza de que são sensores. OK. Lá vamos nós. O que vou fazer com nosso plano de fundo novamente é adicionar outra coisa a esta seção. Novamente, trata-se de garantir que o texto seja legível. Esse está bem. Aquele que vamos ver no meio. Livre-se da transparência disso. No final, vamos adicionar outra cor, que vai ser bla Você pode ver lá. Parece que sim. OK. OK. Vou colocar o desempenho em primeiro lugar para o fundo. Novamente, essa é outra seção. Sem pensar muito sobre isso. A melhor coisa sobre esse tipo de mistura de páginas, quero dizer, isso é crédito para Ted, não tem nada a ver comigo, mas a qualidade das imagens é muito alta. Acho que se você está passando por isso e está trabalhando em seu próprio projeto e está tentando dar vida às suas próprias ideias, suas próprias ideias. Você não pode, você não pode subestimar a importância Eu não posso subestimar a importância de ter boas imagens E se é do seu produto. Quero dizer, essas são tecnicamente imagens de produtos que estamos vendo Eles têm um padrão tão alto e tão alto. Mas se você estiver ligado, você só quer tentar garantir que o conteúdo seja o mais alto possível. Porque isso simplesmente reúne todo o resto e torna tudo muito mais fácil. OK. Então essa seção está pronta. Agora, vamos pegar esta seção. Novamente, isso é apenas um pequeno trabalho de recortar e colar, mas vamos colocar essa pasta na parte inferior e depois virar o conteúdo dela E essa vai para a próxima célula. Vamos mudar a imagem. Algo parecido. Seja um bom equipamento que esteja com boa aparência novamente. Vamos mudar, obviamente, você mudaria o texto da mesma forma que fez, então vou colocar não sei. Drive sabe como pensar pouco no conteúdo da página de destino. Mas, no geral, acho que, do ponto de vista do design, acho que é total. Então, faríamos isso e tudo bem. E com essa seção concluída, vou chamá-la de lá para o corpo da página. Então você pode ver como isso é fácil de montar. Não é muito complexo, eu não diria. Esses são layouts bastante simples, mas quanto mais você fizer esses efeitos , mais confortável ficará mais confortável O Webflow é mais assustador do que parece. Não é tão difícil de usar. Vou entrar no ritmo de ser uma plataforma muito, muito útil. Então, eu vou chamar isso aqui por enquanto. A próxima coisa que precisamos fazer criar uma seção agrícola para geração de leads, algo bastante normal que você verá muitos sites e provavelmente desejará sozinho. E depois disso, vamos criar o fzer que vamos começar a partir daí Então veja no próximo. 10. Lição 8 Como criar seu formulário de geração de leads: Ok. Agora que temos o corpo da nossa página. A última coisa que quero fazer, uma das últimas coisas que quero fazer nesta página, é criar nossa fazenda de geração, e as fazendas são uma grande parte do Webflow e são uma grande parte porque são muito personalizáveis, e isso é algo que você não encontra em muitos outros criadores de sites e até mesmo criadores maioria das vezes, você realmente não pode fazer muita coisa para personalizar os formulários, a aparência deles, a forma como interagem, as interações de foco ou a animação de foco. Há muitas coisas que você pode fazer em muitos outros formulários que você obtém nessas outras plataformas. Mas, no Flow, você pode estilizar exatamente como quiser. Eu queria dedicar um tempo para me aprofundar nos formulários especificamente, porque normalmente eu os adicionaria mais cedo no processo quando você estava criando seu guia de estilo, é aí que eu trabalhava nele, e então você simplesmente o importava para qualquer página que quisesse. Mas, neste caso, eu quero agir, quero dar um passo a passo. Vamos voltar ao guia de estilo. Vamos fazer todas as configurações de que precisamos lá. Em seguida, adicionarei uma nova seção aqui embaixo e farei com que pareça que vou ajustá-la a esta página e espero que pareça rápida e ajude a contribuir com esta página Vamos pular de volta para um portão obsoleto. Vou rolar até o final aqui. Vamos criar outra nova seção. Você só tem paciência comigo. Isso é algo com o qual podemos ficar bastante confusos : quando você coloca seções em uma página, às vezes ela simplesmente não gosta muito dela Vamos reduzir isso até o botão. Delo por dentro. Outro bloco de desenvolvimento dentro dessas classes é adicionado. O contêiner. E então vamos acrescentar que vamos chamar esse formulário de referência. Provavelmente vou usar isso na página de Landon, mas veremos. Ganharemos 100%. E também faremos esse 100%. Vou apenas adicionar um pouco de almofada e espaço. Vamos fazer com que seja um pouco mais fácil de ver. Certo. E então vamos simplesmente arrastar um formulário e eu vou passar por tudo isso com você passo a passo. A principal coisa que estamos tentando fazer aqui, assim como fizemos com todos esses outros elementos do estilo apenas para fazer uma rápida recapitulação Estamos adicionando o formulário. Vamos adicionar o estilo das classes corretas e, em seguida, podemos usar esse formulário e adicionar essas classes em qualquer outro lugar do site. Então, vamos arrastar um formulário e começar a fazer isso. Ok. Este é apenas um formulário muito básico, mas há outras coisas que eu quero adicionar aqui porque há outras funcionalidades que você pode ter com os formulários do Webflow Assim, você pode ter seu bloco de formulário e, em seguida, recebermos rótulos, pois já vimos uma caixa de seleção Em seguida, queremos adicionar um botão de rádio. Se isso me deixar. Se formos. E então vamos adicionar um menu suspenso. E depois recapture. Eu só vou passar por tudo isso. Vamos falar sobre eles e vamos apenas personalizá-los. Então, vamos começar com os rótulos dos campos. Então, eu vou apenas como rótulos, queremos fazer essa ferrovia. A fonte pode dizer rapidamente sobre isso e vamos fazer essa aula e adicioná-la lá. Certo. Entradas As entradas são importantes Quero dizer, é isso que as pessoas vão digitar. Você quer garantir que os usuários recebam o feedback correto deles. Você quer ter certeza de que é fácil de digitar, ler e entender. Então, vamos seguir em frente e fornecer informações. Vamos garantir que a topografia esteja definida como ferroviária Neste em particular, quero fazer com que a altura disso seja, acho que vamos usar 30 40. Tenho certeza de que normalmente. 50 Eu vou dizer 51. E então, com isso, vamos adicionar texto de espaço reservado a isso para que seja mais fácil de entender Então, vamos adicionar na verdade. Aqui eu vou fazer o mesmo. Ok. Certo. E acho que gostaria que fossem curvos. No momento, parece um pouco quadrado. Então, se descermos até o final, talvez eu precise adicionar mais do que isso. Talvez sete pés, eu deveria fazer isso. Ok. E o tamanho do texto dentro , então estou pensando em 16 a 181618 Acho que 18 é melhor. E aqui em cima, vou mudar um pouco a almofada. Eu quero 20 de cada tamanho, não 12. Eu estava com a melhor aparência. E então eu realmente não quero uma fronteira. O que eu quero é uma caixa de sombra, então se descermos até o fundo aqui. E isso é bom para uma sombra de caixa, e não precisamos mudá-la muito. Eu realmente não sou tão rápido nisso. Então, nós delimitamos lá que é cinza. Novamente, porque G vai falar muito por nós. Nós realmente não precisamos nos preocupar com a fronteira. A sombra da caixa ajuda apenas a ver se estamos olhando para ela em um fundo branco, mas, no geral, tudo bem. A única coisa que eu realmente mudaria aqui é outra interação a ser adicionada. Vamos adicionar uma transição e será a cor da borda ou Sim, vamos torná-la a cor da borda. E quando um usuário está focado, e foco significa que quando ele está digitando ativamente dentro dele, queremos que a cor das bordas mude E vamos mudar para Eu quero mudar para vermelho. Eu só vou tentar fazer isso aqui, eu acho. Não, na verdade, vamos mudar isso. Sim, vamos mudar para vermelho. Vamos mudar para isso. Vamos ver como isso fica. Agora, se eu for pré-visualizar, se eu começar a digitar sobre isso, você verá as alterações Uma última coisa que eles precisam mudar é a cor do texto e alguém está digitando nele porque, no momento, está muito fraco. Então, vamos sair aqui. E espero que eu mude. Ok. Lá vamos nós. É assim que queremos. Isso é bom. Você verá aqui que as placas estão mudando de cor. Isso é algo que você provavelmente já viu quando interage com muitos sites. Estamos acostumados com pequenas coisas como essa. Cada empresa faz isso de forma um pouco diferente. Mas o principal aqui é dar feedback ao usuário. Se isso ficar vermelho, exceto o cursor que pisca para eles digitar, isso apenas indica que eles clicaram nele e podem começar digitar É uma coisa de design. É bom para a experiência do usuário, esse é o resultado final. Podemos vir aqui e eu vou receber a entrada do formulário. Vou aplicá-lo aqui. Ok, então isso já está parecendo melhor. Agora, para a caixa de seleção, isso será semelhante novamente, mas vamos mudar a fonte para Railway, não costumávamos fazer muito mais Ok. E vamos mudar o rádio para rádio. Acabei de fazer isso sem adicionar nenhuma classe personalizada porque sei que essas são as classes que eu quero usar para isso e, em seguida, você poderá ver se ela vai ser revisada se você verificá-la lá O rádio tem que estar dentro de suas próprias perguntas, então não funcionará aqui. Tenho certeza de que também não funciona se você testar. Não funcionará na visualização gratuita do Flow, você terá que testar no site ao vivo ou em um link de avaliação Por fim, temos isso agora, vou pegar a entrada do formulário e vou colocar isso aqui E isso provavelmente vai ficar bem, na verdade. Então, você notará que isso permanecerá cinza. Apenas deixe assim. Não tente mudar isso. Essa é uma das formas We Fell. É um pouco mais rígido. Eu recomendaria deixar isso como está. E quando você aparece, não precisa se preocupar com o menu suspenso nem com nada, pois ele fornece suas opções, e essas são as opções que você tem. E é isso mesmo. Agora recapture, este é um em que eu quero passar um segundo. Então, se você ativou a recaptura, vou entrar na frase do site porque é aí que ela deve ser ativada Portanto, se você tiver a recaptura ativa, ela deverá ser adicionada a todos os formulários do site Se não estiver ativo, você não poderá usá-lo. Ative-o o mais difícil possível, basta criar uma chave de leitura para o Webflow rest É. Não é muito complicado. Você vai para fazendas. E então vamos até aqui para recapturar a validação. E então nos registramos no Reino Unido. Então você pode ver que eu já tenho alguns deles aqui para sites diferentes. Você só quer adicionar um aqui. Vou apenas cobrir o site deste modelo três. A que você usa é a versão dois. Sim. É a versão dois e eu não sou uma caixa de bate-papo robótica. Esse é o que podemos usar. O site suporta apenas esse. Esse é um que você quer ter certeza de usar sempre. E então não temos o domínio aqui. Bem, neste caso, vou ter que colocar apenas um no site Just put Model 3. Não venha. Quando eu fizer isso, pego duas chaves posso pegar e você simplesmente as pega e copia, cola de volta no Webflow e aqui Certifique-se de que esteja habilitado a salvar suas alterações. Depois de publicá-los e começar a recapturar todo o seu formulário Então, de qualquer forma, isso é recaptura. Novamente, se você habilitá-lo, ele deverá ser adicionado a todos os formulários do site. Esse é um equívoco comum que é cometido e que evitará dores de cabeça se você se lembrar de uma coisa Então, voltaremos ao guia de estilo aqui. No geral, isso é basicamente diferente do botão na parte inferior aqui. Precisamos mudar isso. Ok. Novamente, como já criamos as classes de botões, elas podem simplesmente ser adicionadas. Geralmente, você gostaria de usar um botão grande para o botão de envio. É basicamente isso. Não há muito mais do que isso. Agora que criamos o formulário que as classes criaram, estamos felizes com isso. Podemos voltar para casa e começaremos a criar esta seção de formulários. Vamos apenas ter certeza de que estamos usando corretamente contêiner básico da seção Básica. Fechadura. Então, vamos adicionar um invólucro de formulário aqui, na verdade Acho que essa é a melhor aposta. Porque eu já adicionei invólucro de formulário no portão obsoleto, mas sei que vou ter que me trocar Então, o que vamos fazer é adicionar um bloco de formulário. E o que vamos fazer aqui é mudar o plano de fundo da seção para algo legal. Então, isso se encaixa no tema do resto do site. Então, vamos para a seção e eu vou colocar o fundo da imagem em algo para tornar a altura dessa provavelmente 800 novamente. Talvez não seja tão grande assim. Talvez tenha sido 600. Uma vez feito isso. Pegue isso e adicionaremos uma imagem. A imagem para escolher qualquer uma aqui que eu esteja escolhendo é, na verdade, bem parecida com essa ou com uma dessas imagens vermelhas. Isso é muito bom, mas a capa formal da imagem. Então, acho que vamos escolher algo diferente. O que? Não sei como me sentir em relação a isso. Sim, vamos fazer algo assim. Eu acho. Agora, o que queremos fazer é aplicar as classes a esse formulário. E acho que vamos mudar algumas coisas, mas vou te mostrar isso. Ok. Então você pode ver que esse é o formulário que vai ter um grande contraste com o fundo, certo? E isso é algo que você pode deixar e trabalhar, mas eu sempre tentaria evitá-lo. E eu vou te mostrar o que eu costumo fazer para tentar fazer isso. Então, para o rótulo, e depois vamos você vai usar brancos Ok. Certo. Ok. Então, para a entrada, vou me certificar de que tenho um lugar aqui novamente. Vamos para mail.com Se quisermos adicionar. Vou apenas adicionar uma área de texto aqui também. Eu continuo assim. E acho que não adiciono um E então, no final, precisamos tentar fazer isso um pouco. Isso pode ser muito entediante, como tenho certeza que você pode ver, mas no final vale a pena e o resultado final será satisfatório, real Isso vai ter que chegar. Sim, está tudo bem. Acho que os dois são consistentes. Sim, está tudo bem. Ok. Agora, o que eu quero fazer é não querer que a imagem pareça a imagem de fundo, desculpe, eu sinto que está divorciada do formulário Eu quero que tudo se misture. Quero que sejam bons anos de experiência quando alguém interage com Então, para a entrada, vou fazer uma versão mais legal, vamos colocar Queremos treinar Irmãos sombrios. O que vamos fazer aqui, o Background ainda não decidiu, na verdade. A primeira coisa que vamos fazer é diminuir opacidade para 75%, 50%, talvez você queira apenas o suficiente para que seja um número misto do plano de fundo, mas não queira Essa é a primeira coisa que vamos fazer. Eu poderia voltar e mudar isso, mas tenha paciência comigo. Em seguida, vamos mudar a cor do texto p em geral, mas também vou mudar a cor do espaço reservado para completamente branco, desse jeito As tábuas são A borda, eu acho que vai ser completamente branca, vai ser preta. Acho que vamos escolher o branco. Acho que isso mantém a acessibilidade bastante alta. Então, se eu apenas revisar isso, vamos garantir essa bagunça. Parece que está tudo bem. Vamos fazer aquela aula, vamos colocar isso aqui. Em seguida, vamos colocar isso na área de texto também, mas só para ter certeza e preciso fazer com que os lugares guardados texto fique branco novamente e leve 2 segundos. Ótimo. Então, vamos dar uma olhada melhor. Tudo o que realmente está acontecendo aqui é que eu estou tentando unir o plano de fundo com o formulário Não, como eu disse, não quero que eles se sintam divorciados um do outro Então, isso faz um trabalho muito melhor, na minha opinião, eu só preciso centralizá-lo agora e eles precisam de texto no topo Então, vamos adicionar um título aqui, parágrafo aqui. Este será o cabeçalho Heading Jump myself, então faremos esse H dois. Nesse caso, sim, acho que vamos conseguir. Texto de parágrafos. Em seguida, vou detalhar isso porque preciso ter certeza de que, novamente, o parágrafo é muito largo. E vamos criar esse impasse. Rapper principal. Acho que esse deveria ser o único. Eu acho. Independentemente disso, vamos continuar com isso. Chegando a rapper e depois vamos fazer a largura de 60% E então eu preciso ter certeza de que o rapper do formulário está centralizado para que tudo funcione, torne essa vertical correta o rapper do formulário está centralizado para que tudo funcione, torne essa vertical correta. Ok. Então eu preciso que seja detectado, mas você pode ver que quando eu faço isso, isso traz a fazenda dentro. O que vamos fazer é simplesmente ir para a fazenda E então vamos fazer isso. Isso não é bom por algum motivo. Em 800%. Ok. Só me supere enquanto tento consertar esse bloqueio. Então você pode ver aqui os problemas que você pode encontrar ao fazer isso. Sim, aí vamos nós. Acho que deve ter sido apenas um bug fraco. Lá vamos trabalhar. O formulário ainda é branco. Na verdade, vou mudar isso. Para Você sabe o que é. É o bloco de formulários que está causando problemas aqui. Acabei de perceber que são 60%. Talvez 70. Você pode se decidir, mas eu só estou tentando encontrar esse equilíbrio. Parece que está tudo bem. Para a etiqueta do formulário, quero adicionar uma pequena margem na parte superior aqui para tudo isso, porque é uma amostra Agora, só preciso ter certeza de que a seção tem uma altura adequada. Devemos estar prontos para ir. Ok. Ok. Lá vamos nós. Isso é um formulário. Novamente, voltaremos e editaremos a capacidade de resposta. Novamente, vamos voltar e editar a capacidade de resposta disso, mas isso dá uma boa ideia de onde estamos No geral, parece bom. Não vou pedir para fazer nenhuma edição nesta página Acho que não, mas podemos ver aqui o formulário de fatura. E vou rapidamente levá-lo às configurações da página para mostrar o que você precisa fazer para garantir que seus formulários sejam acessados. Portanto, se você acessar as configurações do site e depois entrarmos aqui, poderá alterar o nome do remetente Você quer ter certeza de que as submissões da sua empresa estão sendo encaminhadas para o endereço de e-mail correto e garantir que seu endereço de e-mail esteja lá Você pode adicionar sua linha de assunto conforme achar melhor. O Webflow deixa notas sobre isso no lado direito. Se quiser um modelo de e-mail, você pode adicioná-lo lá. Já falamos sobre recaptura. Se você quiser integrar suas empresas com outros lugares, mas eu acho que. A maioria das pessoas não se preocupará isso porque isso é para empresas Filtragem de spam, ative isso. E sim, você definitivamente deseja restringir o acesso ao arquivo de upload. Eu vou te dizer lá embaixo quantos envios de formulários você usou no mês. Fora isso, é isso. Os formulários podem ser um pouco difíceis de estilizar e outras coisas, mas quando você se acostuma, eles são bem simples Eu diria que todas as coisas no ecossistema Webflow: os formulários são provavelmente os mais subdesenvolvidos em termos do fato de que “O fato de você precisar estar no plano corporativo da Web para integrar adequadamente esses formulários a outras plataformas é integrar adequadamente esses formulários mas quando você se acostuma, eles são bem simples. Eu diria que todas as coisas no ecossistema Webflow: os formulários são provavelmente os mais subdesenvolvidos em termos do fato de que “O fato de você precisar estar no plano corporativo da Web para integrar adequadamente esses formulários a outras plataformas é real. chute nos dentes porque fica muito mais difícil quando você está apenas tentando enviar informações para lugares diferentes, como se você quase precisasse usar o Zapier o tempo todo Mas, além disso, para envios de formulários básicos , eles são muito simples Então é isso. E a próxima coisa que precisamos fazer ou a última coisa que precisamos fazer nesse caso é criar o rodapé e faremos isso no próximo vídeo Ok. 11. Lição 9 Como criar seu rodapé: Tudo bem. Então, fizemos a maioria das coisas que precisamos fazer para esta página de destino. A última coisa que precisamos fazer é adicionar um instalador e, em seguida, temos algumas coisas de responsividade em que trabalhar, e há algumas pequenas coisas que vou mostrar para aprimorar tudo Então, vamos adicionar um instalador. E o processo que vamos seguir para adicionar o instalador será simples Então, será semelhante ao que fizemos para adicionar a barra de navegação Então, você pode fazer isso, eu realmente não acho que o Webflow não tenha Vamos ver os layouts, reiniciar a biblioteca e rolar para baixo até o fusor, você pode escolher o que quiser aqui fusor, você pode escolher o que quiser Isso realmente não faz diferença. Apenas para demonstrar isso, vamos escolher este, e eu vou colocar isso na parte inferior Feito isso, estamos no fundo do poço. Ótimo. Temos um pé no lugar. Agora só precisamos fazer as edições necessárias. A primeira coisa que vou fazer é deixar o fundo preto. Na verdade, antes de fazer isso, acho que vou me certificar de adicionar todos os ativos corretos aqui. Sim. Na verdade, o preto o tornará branco. Acho que eu poderia simplesmente remover o logotipo por completo. Porque isso não precisa ser muito complicado. Então vamos mudar tudo isso para ferrovia. Quase lá. E eu vou deixar isso em Nós não vamos definir essa parte. A parte em que pedimos aos usuários que usem roupas universitárias e outras coisas. Não há necessidade, mas vou vendê-lo e veremos. Então, vamos mudar isso da maneira real. E vamos fazer com que seja c Eu acho que será, nós faremos. Então, aqui, faça com que sirva para isso. A última coisa que vamos fazer é deixá-los todos brancos. Então vamos mudar isso para o médico para que a aula seja precisa. Eu faço Nós vamos fazer esse botão. Eu acho que seria. OK. Na verdade, não parece mudar a idade. Então, vamos deixar isso como por enquanto. Basicamente, é preciso estilizar mais. Não vou perder muito tempo com isso. Mas há muitas coisas diferentes que você pode fazer aqui. Esses são, eu não posso mudar. Essas são imagens, então eu vou realmente vê-las. Limite aqui que definitivamente vamos querer mudar, porque é um pouco. E então é isso. E então deve escalar porque é a nossa zona, o que sim. Está tudo bem. Sim. Isso é perfeito. Só queremos fazer esse símbolo da mesma forma com a roupa, não é Componentes do componente, chamado The create create após a instância em que estamos criando várias páginas aqui, poderíamos simplesmente adicionar essa barra e filtrar cada página em que estamos trabalhando É isso mesmo. Então, a última coisa que precisamos fazer é editar esta página para agilizar e então estaremos em um bom lugar. Te vejo na próxima. 12. Lição 10 Como tornar sua página responsiva: OK. Então, agora que terminamos basicamente de criar nosso site inteiro, só queremos ter certeza de que ele seja responsivo em todos os dispositivos aqui Então, no desktop, acho que, no geral, esta página parece muito boa, muito feliz com ela. Você sabe, eu não vou gastar muito mais tempo com isso, mas se eu fosse, quero dizer, eu acho que este seria um site muito, muito bom. OK. De qualquer forma, vamos nos concentrar na capacidade de resposta. No geral, no desktop, acho que tudo isso é como seria de esperar. Vá para o tablet, e a única coisa aqui. O que vou fazer é querer que a imagem fique centralizada, a imagem está muito alta aqui Então, na célula, vou pegar isso e centralizá-lo para que já pareça melhor E o que eu quero ressaltar aqui é que em cada ponto de interrupção, que é o que esses são pontos de interrupção, quando você faz uma alteração, ela não muda no desktop Mas, neste caso, qualquer alteração que eu fizer na tabela será aplicada ao telefone horizontal e ao telefone. Isso meio que funciona. E da mesma forma, todas as alterações que eu fizer no desktop se aplicam a todas elas. E qualquer alteração que eu faça no celular, ela se aplica apenas ao celular, então você pode ver o tipo de hierarquia lá Tudo isso parece bom. O mesmo novamente aqui. Eu quero centralizar isso desta forma, este ano, vou aumentar para 70%, acho que isso é suficiente Ótimo. E isso parece bom aqui. E na horizontal, vamos voltar ao topo aqui. Isso parece bom. Isso aqui À medida que entramos, você pode ver que eu provavelmente não ficaria muito feliz com isso, mas à medida que saímos, parece realmente bom. Esse é um, vamos tentar. Se formos até o limite e excluirmos essa coluna, vamos ver como fica Na verdade, parece bom assim. Estou muito feliz. Na verdade, estou feliz com isso porque esse é o problema. Às vezes, as imagens não são boas o suficiente para ter . Às vezes, em alguns sites elas não são boas o suficiente para que você não queira dar tanta ênfase a elas. Nesse caso, essa imagem é boa o suficiente para enfatizar. Na verdade, isso funciona muito bem, então vou fazer isso na outra seção aqui embaixo. Ótimo. Isso funciona muito bem. E ótimo. Vamos deixar isso assim. Então aqui, novamente, vou mudar isso para provavelmente. Isso é melhor. Por fim, celular Este não deve demorar muito. Esse parece bom. Isso precisa ser estendido. Vou retirar isso um pouco. Sim, isso foi corrigido. Isso tem que ser alterado para 100% eles precisarão um bloco na parte interna daqui e tornarão 20. E então, para o tamanho do texto em si, OK. O lado do texto. Eu acho que deixe-me ver. Se eu aumentasse a seção, ela a expandiria e talvez mais gradiente capturasse esse texto e fizesse com mais gradiente capturasse que parecesse bom Vamos fazer isso 800. É isso que vamos descer até aqui. Vamos ver nosso gradiente. Então vamos trazer aquela metade que é muito melhor. Essa parece boa. Isso é brilhante. Adoro isso. Isso tem que mudar para 100%. O mesmo com isso. Bloco de formulários. Ótimo. E essa feira solta, ótima. Então vamos lá. É isso mesmo. Então essa é a resposta da senhorita Dunn. Portanto, tudo o que você precisa ter em mente ao fazer isso é apenas tentar fazer o site ou a página tenham a melhor aparência possível em cada ponto de interrupção individual É isso mesmo. Depois de fazer isso, seja Esta página da web está em um bom lugar. Há algumas pequenas coisas que eu quero fazer aqui. E no próximo vídeo, vou falar com você sobre. Vou te mostrar uma interação específica. Quero adicionar algo a esta página apenas para realmente trazê-la para casa porque agora está 99% pronto. Há apenas uma coisa que eu preciso mudar para trazê-lo ao padrão que eu quero, e vou compartilhar isso com você no próximo. 13. Lição 11 Uma introdução às interações: OK. Então é por isso. Portanto, esta página de destino está praticamente concluída e espero que você tenha gostado este curso comigo até agora, mas há apenas uma coisa que não posso deixar e tem a ver com a barra de navegação Você pode ver aqui como um pergaminho. Às vezes, o texto é completamente misturado com o plano de fundo e realmente não funciona Diminui, simplesmente não parece certo. Isso não pôde ser publicado como uma página finalizada. Para corrigir isso, preciso adicionar uma interação porque, no topo, ainda quero ser claro e me misturar com a seção de heróis. Mas, como pergaminho, quero que o fundo da barra na mude de cor para branco, para que ainda fique legível e fácil de usar no site quando alguém está ainda fique legível e fácil de usar rolando Então, o que vamos fazer aqui é as interações são algo que vou abordar muito mais profundamente na continuação deste curso, que é o domínio do wi flow Mas neste caso específico, vamos criar uma interação muito simples, e essa é provavelmente uma boa oportunidade para ver como as interações realmente funcionam. Porque já vimos como algumas interações menores e menos significativas são usadas na seção de estilo na coluna de efeitos. Mas as interações são um pouco diferentes. Eles são mais complicados. Então, eles podem se complicar muito rapidamente. Nesse caso, é bastante simples e provavelmente é um exemplo muito bom de usar Então, eu vou fazer isso. O que precisamos fazer aqui é criar uma animação de rolagem Quando alguém rola para baixo, algo acontece e quando a rolagem volta ao topo, ela volta a ser como era Para fazer isso, precisamos de um gatilho de página. O que vamos usar é enquanto a página está rolando, este aqui Vou clicar nele e, em seguida, selecionar uma ação e clicar em reproduzir animação de rolagem. Agora, não tenho animações atuais que tenham sido criadas, e esse é um lugar em que o fluxo geralmente não fornece nenhum padrão Você tem que construir com eles do zero. Vamos criar uma nova animação. Vamos clicar no ícone de adição aqui e na cor de fundo. Você pode ver aqui, ele me deu dois lugares para eu descobrir a cor de fundo. Neste primeiro, vamos definir a cor de fundo como completamente transparente, exatamente como estava, e isso é 0%. E a porcentagem representa a distância na página que estamos percorrendo Então, o segundo aqui, vamos subir para cerca de 5%. Vamos chegar a 4%. Então, para este, vamos torná-lo completamente branco. Agora, o que vamos fazer é ativar a pré-visualização ao vivo. Então, enquanto eu rolo, você pode ver que a barra de navegação agora fica branca, e isso é tudo o que estamos fazendo aqui Mas isso faz uma grande diferença experiência do usuário e na acessibilidade como um todo. Do jeito que era antes, não podia publicado neste caso, pode. Então, eu só preciso ter certeza de que salvamos isso e que está ativo. Como você pode ver aqui, o que vamos fazer aqui para ativar o que vamos fazer está aqui, você não verá isso no designer, mas se você apertar o botão play aqui em cima, e não é isso que eu realmente estou procurando, esses 50% aqui, você pode ver como uma rolagem muda, o que é perfeito. Isso é exatamente o que estamos procurando. E você pode ver aqui, quando começamos a rolar, isso muda, e é exatamente isso que estamos procurando. É isso mesmo. Esta página está praticamente pronta. Estou absolutamente feliz com esta página. Se eu tivesse todo o tempo do mundo para gastá-lo, eu poderia torná-lo muito melhor do que isso, mas no geral, acho que esta é uma demonstração muito boa do que você pode fazer no Webflow, se você for um iniciante e é um exercício muito bom de seguir É isso mesmo. Hum ok. E é isso. No próximo vídeo, falarei com você sobre as picadas de página deste site e falarei sobre como publicá-lo e colocá-lo no ar. Mas depois disso, sim. Então, espero que você já esteja em um lugar melhor com o Webflow e entenda muito mais sobre a plataforma . Te vejo no próximo vídeo. OK. 14. Lição 12 Como publicar seu site: Então, agora que estamos na posição em que concluímos nossa página de destino, você pode estar na posição em que está pronto para publicá-la. Então é isso que vou mostrar rapidamente como fazer. Então, antes mesmo de começarmos conectar seu domínio ou algo parecido, vou levar você para a frase da página por um segundo. Então vamos às páginas e aqui. Em sua tag de título, essa seria a página inicial em geral, mas é aqui que você deseja otimizar para colocar o nome da marca, que pode ser Tesla Então, colocaríamos o modelo ou pediríamos o modelo C hoje ou algo assim. Algo parecido. E então você teria uma descrição aqui. Essa tag de título e descrição, você pode então definir como a descrição do seu método na tag de título. Se você tem uma imagem que deseja adicionar, aceite-a. Vou apenas mostrar como exemplo. Então, vamos pegar este. Provavelmente não funcionará porque não é correto copiar essa frase de volta à sua página. E então você colaria o URL aqui. Tudo bem. Isso funciona. OK. Então você pode ver isso lá. É assim que apareceríamos se as pessoas compartilhassem nas redes sociais. Em seguida, aqui embaixo, você pode adicionar qualquer código personalizado que desejar. Provavelmente não vou fazer isso neste caso, mas se houvesse algo que você precisasse adicionar, é aqui que você o adicionaria. E depois é só salvar. Agora, esta página estaria pronta para ser publicada, mas suponha que você tenha um projeto inteiro, você teria muito disso para fazer e provavelmente gostaria de pensar com um pouco mais cuidado sobre como lidar com o SEO. Agora, se quisermos publicar, basta ir até aqui, publicar, podemos publicá-lo em nosso domínio de teste Eu só vou fazer isso agora. De qualquer forma. Em seguida, aqui para produção. Preparação, esse é o seu domínio de teste, e então gostaríamos de colocá-lo em produção. Se terminarmos, gostaríamos de adicionar um domínio personalizado Se estivermos nas configurações do site, você precisará escolher um plano de site. Agora, a estrutura de preços do weblos geralmente depende do pagamento por um Eles têm níveis diferentes para isso e, quando estiver pronto para publicar um site individual, você pagará por um plano de site O que eu normalmente escolheria no que eu normalmente recomendaria é o plano CMS Você pode pagar mensalmente ou anualmente. Se você estivesse literalmente publicando algo parecido com o que acabamos de fazer, não precisaria da versão CMS, precisaria apenas da versão básica E a razão para isso é que, na verdade, não usamos o CMS Webflow Não criamos nenhuma coleção. Não há conteúdo dinâmico. Não precisamos de nada disso. Então, você usaria apenas o plano básico. Mas espero que isso ajude a dar um pouco mais de contexto sobre isso Em termos de realmente adicionar o domínio, começaríamos a publicar, tenho certeza de que é. Portanto, você precisaria adicionar um plano do site antes que possamos fazer isso. Mas vou te mostrar outro site muito rapidamente. Vou te mostrar o ambio para que você saiba exatamente como é Se eu for aqui e aqui, você pode ver aqui que eu tenho ambu como padrão e também tenho able como outro domínio que posso usar Para adicioná-los, basta inserir alguns TXT e um registro de nome que você insere nele Por exemplo, eu uso name sheep, adiciono isso ao name sheep e, em seguida, posso usar os domínios no fluxo da web E é isso. Isso é o que você faria para publicar. Quando criasse seu domínio, selecionasse um que deseja publicar e, em seguida, um botão de publicação, e pronto. 15. Conclusão Próximos passos: Tudo bem, então estamos agora no final deste curso. Em primeiro lugar, eu só quero agradecer por você dedicar seu tempo para fazer este curso E qualquer feedback que você possa fornecer sobre a qualidade e qualquer coisa que eu possa fazer para melhorá-la seria muito, muito apreciado. Além disso, espero que agora você esteja em uma posição em que possa seguir em frente e continuar desenvolvendo suas habilidades no Webflow e se tornar um designer melhor Abordamos tudo, desde a interface de usuário do Webflow como a plataforma realmente funciona Portanto, o layout da caixa e todos os outros componentes introdutórios que você precisa conhecer para poder construir com eficácia nessa plataforma Se você está em uma posição em que, digamos proprietário de uma pequena empresa e está tentando criar seu site, mas talvez ainda sinta que não tem todas as habilidades necessárias para criar o site que deseja, sinta-se à vontade para entrar em contato comigo e ficarei feliz em ajudá-lo. Ou então, simplesmente deixe o que você tem a dizer na seção de comentários deste curso e eu entrarei em contato com você assim que puder. Mas, no geral, gosto muito de ministrar esse curso e mal posso esperar para lançar mais conteúdo como esse em um futuro próximo. Então, obrigado, e nos vemos na próxima