Sem código de design web - fundamentos do Webflow para iniciantes

1. Vídeo de introdução: Olá, eu sou Kai. E juntos aprenderemos todos os fundamentos do Webflow criando seu primeiro site do zero. Agora, o Webflow é uma ferramenta de desenvolvimento web sem código que permite criar sites personalizados completos sem o incômodo de ter que aprender HTML, CSS e JavaScript. Em vez disso, criaremos o site forma totalmente visual usando a interface do editor Webflow. Agora, neste curso, você aprenderá os detalhes de como os sites são estruturados e como criar todos os elementos necessários para um bom site. Abordaremos a diferença entre seções, contêineres, margem e preenchimento e muito mais. Este curso é baseado em projetos, o que significa que aprenderemos todas as características fundamentais criando uma página de destino completa do zero. Trabalharemos com imagens, classes CSS e classes combinadas, cores e tipografia. Mas também aprenderemos como criar layouts mais complexos usando grid e flexbox. Obviamente, também aprenderemos como criar um formulário de contato e como tornar nosso site responsivo para que possa ser usado em todos os dispositivos. Quer aprender o fluxo de trabalho. Se sim, nos vemos na primeira palestra. 2. O que é o Webflow?: Agora, antes de mergulharmos em nosso projeto, vamos falar sobre o que é o Webflow e o que você pode fazer com ele. Nosso fluxo de trabalho não é exatamente um construtor de páginas, mas também não está cheio de programação, como desenvolvimento. Não vamos digitar nenhum código. É a chamada nota chamada ferramenta. Agora, o que fazemos o upload faz é usar o designer, a interface do Webflow para fazer todas as nossas mudanças de estilo e o design e desenvolver nosso lado visualmente usando o chamado painel de estilo. Esse aqui mesmo. Então, como você pode ver, temos acesso a todas essas opções diferentes. Podemos adicionar um tipo, planos de fundo e coisas assim. E usando isso, podemos criar nosso site visualmente via Webflow em segundo plano, com um código HTML, CSS e JavaScript muito limpo para nós. Agora, temos acesso a esse código. E também podemos exportar nosso site como código. Mas se você não quiser, não precisa tocar nesse lado. E isso é muito bom sobre o Webflow. Assim, você sempre vê exatamente no que está trabalhando. Tudo é visual, o que é perfeito para designers. E isso nos permite criar praticamente todos os sites. Mas nós queremos. Agora, há algumas coisas que podemos fazer especificamente com esse fluxo. Agora, o Webflow é perfeito para sites estáticos simples como este que vamos criar nesta classe. No entanto, também podemos criar CMS, orientados por sistemas de gerenciamento de conteúdo sites orientados por sistemas de gerenciamento de conteúdo que são mais dinâmicos. Você também pode criar lojas on-line, bem como sites de associação. Portanto, temos muitas opções. Podemos criar uma grande variedade de sites diferentes. E tudo isso sem escrever uma única página de código, o que é perfeito. É isso que o Webflow é: é uma ferramenta de desenvolvimento sem código que permite criar e desenvolver sites sem a escrita de código. 3. Projeto do curso: Tudo bem, então, antes de mergulharmos no Webflow, vamos dar uma olhada rápida no que você aprenderá. Então, nesta aula, vamos criar um site completo do início ao fim. Agora você aprenderá como criar essas navegações. Você dará uma olhada em nosso trabalho de tipografia. Então você vai construir esse site inteiro. Portanto, temos um layout de três colunas. Portanto, temos um layout de duas colunas, o que significa que todos trabalharemos com o chamado componente de grade. Você aprenderá como criar os efeitos de passar o mouse sobre o botão. Você criará essas seções de preços mais complexas e até mesmo como criar um formulário de contato funcional. E, no final, você também adicionará essas luzes nas animações, além de vincular todo o site usando nossos links. E é isso que vamos construir nesta aula. 4. Criar e gerenciar sites: Tudo bem, então, depois sua conta de overflow e estiver pronto para começar, criar sua conta de overflow e estiver pronto para começar, acesse o painel simplesmente clicando no item de navegação do painel. E agora precisamos criar nosso primeiro projeto. Então, em seu painel, você tem aqui uma lista do projeto em que está trabalhando. Agora você pode colocá-los em pastas para criar uma nova pasta, você pode clicar neste botão aqui. Isso permite que você crie novas pastas para que você possa organizar seus documentos um pouco melhor. Agora, para criar um novo documento, um novo site, basta clicar no botão do novo site. Agora, quando se trata de iniciar um novo projeto, temos algumas maneiras diferentes de fazer isso. Agora, minha forma preferida é simplesmente usar a predefinição do lado em branco. É um site sem conteúdo algum, sem aulas, sem nada. Uma ficha limpa. Podemos começar do zero se você quiser ter um ponto de partida, mas o flow tem alguns modelos gratuitos prontos para uso. Mas você também pode comprar modelos no mercado de modelos. Quem iniciará um novo projeto. Basta passar o mouse sobre o modelo que deseja escolher. No nosso caso, coloque o lado em branco e clique em Selecionar. Agora podemos dar um nome a ele. Vamos chamá-lo de projeto Skillshare. Curta isso e clique em Criar site. E desse jeito, nosso site foi criado. E agora podemos começar a dar uma olhada na interface do usuário e em como realmente trabalhar em nossos sites. 5. A interface: Tudo bem, agora que criamos nosso site, vamos fazer um rápido tour pela interface do usuário ou pelo Webflow. Agora, vamos começar aqui no lado esquerdo. Então, aqui temos esse fluxo de trabalho que o veterinário local muda para o menu de hambúrguer quando temos um pássaro que nos dá acesso ao nosso menu. Então, aqui, podemos acessar o painel ou as configurações do site, por exemplo, sempre que você precisar voltar para uma delas, basta usar o menu aqui em cima. E, abaixo, temos vários menus diferentes. Então, por exemplo, temos isso e eu posso adicionar um menu de elementos. E aqui, por exemplo, temos acesso a todos os diferentes elementos, mas podemos adicionar à nossa página e usar para criar nossos sites. Você também tem esse menu de componentes. Você tem acesso ao V Navigator, que nos mostra a estrutura da página. Sempre que trabalhamos em nosso projeto, sempre queremos que o feed navegue para abrir. Portanto, se não estiver fixado na lateral, você pode fixá-lo no site clicando nesse ícone no navegador até que fique assim. Você também pode redimensioná-lo se passarmos o mouse sobre a borda , dessa forma. Agora, se você trabalha em uma tela muito pequena, pode mantê-la flutuando assim. Certifique-se de que sempre que você pesquisar por um elemento, você queira verificar a estrutura do seu site, certifique-se de usar o navegador para isso. Vou fixá-lo no Navigator. Você adora isso. Também temos acesso às nossas páginas. Agora, esse menu nos permite gerenciar e pesquisar todas as nossas páginas, mas temos em nosso site para criar novas páginas, basta clicar aqui, criar uma nova página no botão. Você também pode estruturá-los em pastas para mantê-los mais organizados. E abaixo disso, temos ícones gratuitos. Um é o menu CMS, um é o menu V Usuários e um V menu de comércio eletrônico. E isso será usado para trabalhar com qualquer uma dessas opções. Então, se você quer um sistema de gerenciamento de conteúdo, então se você criar um blog, por exemplo, você quer usar o CMS. Se você criar sites de associação, precisará do menu do usuário e assim por diante. Agora, abaixo disso, temos o painel de ativos, e é aí que carregamos todas as nossas imagens, nossos ícones e coisas assim. Você pode gerenciar tudo isso no painel Ativos. E, claro, temos algumas configurações que podemos usar. Agora, isso não é algo que nos preocupa agora. Vamos fechar isso. Tudo bem, agora vamos para o meio. Temos essa grande área direita. É aqui que construímos nossa página, visitas, nosso site agora, é uma folha em branco. Nada foi honrado ainda. Além do elemento corporal, que é basicamente um suporte para nosso conteúdo, para nosso site. Aqui em cima temos alguns ícones. Então, esses são os pontos de interrupção. Usando isso, podemos alternar entre o modo tablet, Enscape, a visualização móvel ou móvel. Também podemos usar os padrões para decidir se a mudança deve ser o tamanho. Estou fora da tela. E usando esses pontos de interrupção, podemos verificar rapidamente a aparência de algo em diferentes tamanhos de tela. E é uma web muito moderna. Todo mundo tem um monitor diferente. A maioria das pessoas acessa alguns sites usando telefones ou tablets. Portanto, todos os nossos designs precisam ser responsivos. E usando esses pontos de interrupção, se pudermos garantir que nosso site funcione e tenha uma boa aparência, tamanhos de tela diferentes. Agora, no lado direito, temos nosso painel. E aqui podemos aplicar todos os estilos diferentes e fazer com que nossos sites tenham uma boa aparência. Isso se comportará de forma muito semelhante ao trabalho no Figma ou no Photoshop. E a maneira como você ajusta topografia de entrada e coisas assim. Agora, aqui em cima, temos mais algumas abas. Portanto, temos algumas configurações de elementos que mudarão dependendo do elemento selecionado. Temos um Gerenciador de Estilo que nos mostrará uma lista de todos os diferentes clusters que estamos usando em nosso projeto. E nossa atividade também pode limpar nosso produto, nosso site, de estilos, mas não estamos usando e a gordura não é usada. Podemos excluí-los com muita facilidade clicando no botão de limpeza. E também o menu de interações, que nos permite criar interações e animações para o nosso site. Agora, o evento é sobre a interface do usuário. Não é demais. É simples. E nos vemos na próxima palestra. 6. Adicionando fontes personalizadas: Tudo bem, então, antes de começarmos a trabalhar no projeto do nosso site, precisamos fazer algumas coisas. Então, antes de tudo, precisamos adicionar algumas fontes personalizadas ao nosso projeto, que é o que faremos nesta palestra. Agora, adicione novas fontes aos seus projetos. Ou você não quer usar apenas as fontes básicas que já estão pré-instaladas e o Webflow. Agora, adicionar novas fontes é muito simples e temos algumas maneiras diferentes de fazer isso. Vamos até as configurações do nosso site. Então, se você clicar no ícone do Menu e acessar as configurações do site. Agora, nas configurações deste site, você pode alterar seu nome, por exemplo, aqui nas configurações gerais. E podemos adicionar um favicon e coisas assim. Há muito mais opções aqui. O que é interessante para nós agora é a etapa da fonte. Então, aqui mesmo, clique nas fontes. Agora, aqui temos três maneiras diferentes de realmente adicionar novas fontes ao Webflow. Em primeiro lugar, a maneira mais fácil é usar o Google Fonts. Então, aqui temos uma grande lista de fontes diferentes às quais podemos adicionar facilmente dois fluxos de trabalho, temos fontes personalizadas. Então, se você já tem uma fonte instalada no seu computador, ou talvez queira, você quer usar suas próprias fontes que você mesmo criou. Você pode enviá-los aqui mesmo. , também podemos conectar nossa conta da Adobe usando a chave de API e as fontes da Adobe, se você quiser. Agora, vamos instalar duas fontes diferentes. Um será o Open Sans e o outro será o ferroviário, que usaremos para títulos e coisas assim. Gosto bastante da combinação. Então, vamos ao Google Fonts. E depois de clicar nesse menu suspenso, você pode começar a digitar o nome da fonte que deseja adicionar. Vamos digitar ferrovia e pesquisar ferrovia aqui. Aqui está. No momento, temos muitas variantes diferentes, temos muitos pesos de fonte diferentes, mas podemos adicionar. Agora eu quero usar o que encontramos principalmente para títulos. Então, o que eu vou fazer é pegar os 700 dólares, o que é um peso ousado. Também vou manter a versão normal , por precaução. Agora, a razão pela qual você não deseja habilitar tudo isso é reduzi-lo ao mínimo. Quanto mais fontes você tiver instalado em seu site, mais tempo será realmente necessário para carregar. Portanto, escolher os que realmente precisaremos aumentará a velocidade de cada velocidade lenta do seu site. Então, vamos escolher irregular e 700. E então simplesmente clicamos em Adicionar fonte. E, assim, adicionamos o fundo ferroviário ao nosso projeto Webflow. Agora também queremos o Open Sans e eu forneço isso. Eu tenho isso. Você também pode instalá-lo via fontes do Google. Mas, para demonstrar como instalamos fontes personalizadas, você pode encontrar isso nos arquivos do seu projeto na pasta de fontes. Então, o que vamos fazer é clicar em Carregar em fontes personalizadas. Em seguida, pesquise as pastas de fontes nos arquivos do seu projeto. E aqui temos Open Sans Light e Dracula. Selecione os dois e clique em Abrir. E agora, como você pode ver, temos nossas duas fontes aqui. E precisaremos clicar em Carregar arquivo de fonte ou em ambos. E, desse jeito, instalamos o Open Sans e a ferrovia em nosso site. Se você voltar ao nosso designer, o que podemos fazer clicando nesta parte roxa aqui. E vamos selecionar o elemento do corpo. Desça até suas configurações de topografia no USD manager. E aqui você pode ver as fontes personalizadas, que são Open Sans. Então, como você pode ver, se o selecionarmos, teremos uma praga e um normal. E também temos a Ferrovia aqui. Temos um site editorial normal e ousado. E é assim que você adiciona fontes personalizadas ao seu projeto. 7. Construindo a primeira seção - trabalhando com seções e containers: Tudo bem, então, nas lições a seguir, vamos construir nossa primeira seção, que será essa seção bonita e limpa de heróis. Vamos adicionar um pouco de preenchimento ao elemento de seção b, r. Bem, primeiro aprenderemos como adicionar novos elementos. E também falaremos sobre classes CSS. E então vamos adicionar algum texto como esse título aqui, neste parágrafo. Eu vou te mostrar como você também pode realmente enviar este parágrafo. E é isso que vamos abordar nesta primeira palestra. Vamos criar o elemento de seção real, vamos construir esse contêiner. E então também vamos adicionar toda a nossa tipografia. Esta seção. Vamos começar a construir isso em nosso projeto. Agora. Em primeiro lugar, deixe-me deletar isso bem rápido. Tudo bem, agora temos uma ficha limpa. Tivemos um cluster criado pelo fluxo de trabalho porque eu mostrei as configurações de tipografia do UP no vídeo anterior. Agora, antes de tudo, precisamos criar. Você precisa informar ao nosso site quais fontes usar e as configurações básicas de digitação. Sempre que adicionarmos um novo elemento de parágrafo, por exemplo, certifique-se de ter seu corpo selecionado. E aqui nesse seletor de estilo, agora, no estilo selecionado, podemos criar novas classes e também editar as tags HTML. Agora, tags HTML, por exemplo, você tem a tag de corpo de todas as páginas, edita V e tira o pneu. Portanto, todos os elementos deste site, em todas as páginas em que negociamos neste site, todos têm o corpo, todas as tags das páginas. Então, por exemplo se você disser Queremos Open Sans, um tamanho normal e de 16 pixels em todas as páginas do corpo. Você pode fazer um veterinário aqui mesmo e ter uma pele limpa e consistente. Na verdade, nosso projeto e nossas classes são praticamente todas as mudanças de estilo que fazemos em um objeto e são armazenadas em uma classe. Por exemplo, se você criar um botão e nós atribuirmos o botão, agrupe-o. Se ele cair em um novo botão do nosso painel de elementos, você pode simplesmente atribuir essa classe de botão e ela terá exatamente a mesma aparência. Tudo bem, chega de falar. Então, vamos clicar no corpo. Todas as páginas estão marcadas aqui. E sob a fonte, não serei a fonte Open Sans que adicionamos ao nosso projeto anteriormente. Então vá até fontes personalizadas e clique em Open Sans. Quero mantê-lo com uma espessura de fonte padrão normal. No entanto, quero aumentar o tamanho para 16 pixels. Assim. A cor da fonte está boa por enquanto, a cor cinza. Uma coisa que eu preciso fazer é alterar a altura da fonte. Agora, nesse caso, eu não gosto de trabalhar com pixels. O que eu vou fazer é digitar 1,5 e m. Agora que vamos usar unidades EM, uma tem 16 pixels porque dissemos que nossa tag de corpo de todas as páginas tem 16 pixels no tamanho da fonte. Mas um m é igual ao tamanho da topografia que você disse em seu corpo. Tag de todas as páginas. Queremos que tenha um e meio de 16 pixels. Então 1,5 e M. E agora temos uma boa, uma boa altura de fonte. Ser texto é legível. Agora, examina o VET por enquanto. Agora, vamos adicionar nosso primeiro elemento. Vá para o menu de elementos do ícone de adição. E em Layout, vamos adicionar nossa primeira seção, clique no MPD e arraste-a para sua tela. Ou você também pode arrastá-lo diretamente no navegador. Agora, aqui temos nossa primeira seção. Agora, vamos dar uma aula a esta seção. Agora, essa seria nossa área de heróis. Então, vamos chamá-la de seção de heróis. E para criar o cluster, basta clicar em Enter no teclado. Assim. Agora vamos dar uma olhada rápida em que tipo de configurações queremos dar a essa seção de heróis. Então, neste projeto, se selecionarmos a seção de heróis, você pode ver que queremos um preenchimento de 150, tanto na parte superior quanto na inferior, para que tenhamos muito espaço para respirar em torno do nosso conteúdo. Nós adicionamos molhado. É muito simples. Vamos para nossas opções de espaçamento no painel lateral com a seção do herói selecionada. E então podemos clicar e arrastar no preenchimento. Se mantivermos a tecla Shift por todos os lados, obteremos acolchoamento. E se você segurar Alt Control ou Command Control, você pode aplicar isso nos dois lados. Então, nós de cima e de baixo. Para esquerda e direita. Agora, para remover um estilo que você criou, basta clicar no tipo azul. E então você pode clicar em redefinir. Você também pode, como você pode ver, Alt e clicar em alguns atalhos. Então segure a tecla Alt. E é assim que você pode remover o estilo de algo. Também podemos digitá-lo. Então clique nos números. Então 150.150, assim. Agora temos 150 pixels, ambos adicionando tanto a parte superior quanto a inferior. Agora não queremos margem. Então, eu ainda não expliquei isso. Portanto, o preenchimento é o espaço que está dentro do elemento e a margem é o espaço v, mas nós o atribuímos fora dos elementos. Então, se você quiser colocar algo no chão, a seção inteira, podemos fazer isso adicionando alguma margem. Tudo bem, agora, uma coisa importante é que queremos adicionar um contêiner. Agora, a razão para isso é que nem todas as telas são FE, do mesmo tamanho. Então, algumas pessoas têm telas muito grandes com uma resolução muito alta ou um monitor ultraleve. Precisamos conter nosso conteúdo e limitá-lo a uma certa largura para que possamos mantê-lo contido. E, na verdade, uma informação bonita e realmente acessível e legível está bem estruturada. Agora, para adicionar um contêiner, você clica no ícone de adição e adicionamos elemento de contêiner V do painel de layout B. E queremos direcionar a leitura para nossa seção de heróis desta forma. Agora, como você pode ver, aplicamos o preenchimento, então nosso contêiner fica bem no meio. E agora queremos adicionar um pouco de tamanho a ele. Porque agora está completamente vazio e nada. Não está realmente lá. Essa fronteira é a confiança do Webflow nos dizendo, ei, há um contêiner lá. Nós vemos isso durante a edição. Agora vamos para o painel lateral e dar a ele uma largura máxima de 1.340 pixels, assim. Agora, por que usamos a largura máxima? A largura máxima significa simplesmente que essa é a maior que o contêiner pode obter. Ele pode encolher. Então, se formos para um ponto de interrupção diferente, você pode ver que ele realmente se expande muito bem assim. Portanto, é responsivo. Se você tivesse feito isso de forma irregular, mas não responderia. E se você comprasse alguns SV, com largura mínima , eles simplesmente escalariam até as bordas, mas nunca abaixo desse ponto. É por isso que também usamos largura máxima e largura mínima em alguns casos. Agora, o que queremos acrescentar? Próximo? Queremos adicionar um título e alguns textos. E queremos que isso fique centralizado no meio. Então, vamos adicionar um pouco de topografia ao nosso site. Clique no ícone de adição e pesquise as configurações de topografia. Agora queremos um título. Então, vamos clicar e entrar diretamente em nosso contêiner. E aqui, como você pode ver, temos algumas opções o pop-up será então veterano direto. Então, temos H1 até H6. Agora isso é apenas o, quão importantes são os elementos? Então, cada um será o elemento mais importante. H2b, o segundo mais importante, e assim por diante. Então, sendo este o nosso título de herói, este será definido como um. E então também queremos adicionar um parágrafo. Tudo bem, ao lado do título está o elemento do parágrafo. Basta clicar e arrastar isso abaixo seu título dentro do contêiner. E, como você pode ver, ele sempre é preenchido com algum texto de espaço reservado, que podemos manter. Você pode trabalhar com isso. Agora, vamos dar uma olhada em nosso projeto de exemplo. Você pode ver que isso parece completamente diferente. Portanto, precisamos adicionar uma classe a esse título. E também precisamos estilizá-lo. Portanto, precisamos dar a ela um tamanho diferente, uma fonte diferente, uma espessura de fonte diferente. E vamos fazer isso. Vamos começar com o veterinário. Eles selecionarão o título. E antes de tudo, precisamos dar uma aula sobre isso. Se não criarmos uma classe ao fazer pequenas alterações, Webflow criará automaticamente uma classe para nós, o que é útil. No entanto, não é. Isso não permite que nosso site seja muito limpo. Então, por exemplo , se é uma classe chamada título principal e queremos reutilizar a aula veterinária em uma página posterior, simplesmente não. Ok, esse é o título principal. Podemos aplicar essa classe a esse texto. Com nossa classe, nosso título negociado. Derrubado. E 44. E instalamos a família de fontes ferroviárias aqui. E queremos que a taxa seja em negrito e tamanho V. Queremos ter 56 pixels. E vamos dar a isso uma altura de fonte de 1,5 e m. Assim. Agora vamos também nos dar um texto. Então, sites do Webflow que funcionam, vamos digitá-los. Podemos editar o conteúdo do nosso título simplesmente clicando duas vezes nele. E agora podemos editar o texto da mesma forma que faríamos no Google Docs ou em Harvard. Então, Webflow, sites que funcionam como loucos e veterinários, nossa aula de cabeçalho acabou. A seguir, vamos dar uma olhada neste parágrafo, neste parágrafo principal. Então, como você pode ver, é menor, não atinge as bordas do nosso contêiner como o título. E está contido em 650 pixels, então não pode crescer mais do que isso. Vamos construir isso. Escolha seu parágrafo. Dê uma aula. Então, vamos para o parágrafo principal. Vamos chamá-lo de parágrafo heróico. Sabemos exatamente onde é usado. Para realmente tornar isso menor. Você pode ir até a largura máxima e digitar 650 pixels. Como você pode ver, ele encolhe. Agora, um fato muito óbvio agora é que isso não está centrado. Então, se você olhar nosso projeto aqui, esse texto está no meio. Agora, para conseguir isso, basta selecionar primeiro o título principal. E vamos centralizá-lo clicando em uma linha e no centro. Agora, essa é a parte mais fácil. A única razão pela qual isso funciona é porque o título principal ocupa todo o espaço até as bordas do contêiner. Como você pode ver. O mesmo não se pode dizer que, para o parágrafo do herói, se você quiser centralizá-lo , isso é algo que queremos. Ele não coloca sua caixa de parágrafo no meio. Agora, uma maneira de conseguir isso, você pode acessar nossas opções de margem. Se você clicar nele, verá que temos esse botão Automático. Agora, o que o automático faz é simplesmente empurrar os elementos para o lado. E se aplicarmos o marginal IN para automóveis, ele está sendo empurrado perfeitamente no centro do nosso contêiner. Simples assim. Agora, veterinários, VET para este vídeo. Na próxima palestra, vamos adicionar algumas imagens. Então, vamos adicionar essa imagem de fundo. Você também adicionará essa sobreposição escura. E então estamos mudando a cor da nossa fonte de forma muito rápida e fácil . Essa cor branca. Você vai dar uma olhada nos botões depois disso. Primeiro de tudo, vamos começar com a imagem do herói. 8. Otimização e carregamento de imagens - adicionando imagens ao seu fundo: Tudo bem, a seguir, vamos adicionar uma imagem V a esse plano de fundo. Também vamos mudar a cor da fonte para branco. E estamos fornecendo a imagem de fundo versus sobreposição escura para que possamos ler melhor os textos e aumentar um pouco o contraste. Agora, em primeiro lugar, quando se trata de imagens na web, se você precisar otimizá-las, queremos que as imagens sejam tão pequenas quanto possível. Portanto, os tempos de carregamento são reduzidos ao mínimo. Agora, como podemos conseguir isso? Com sites como Image Compress our.com, por exemplo , now, vis a vis website, por exemplo nos permite colocar nossa imagem aqui e, em seguida, comprime um débito e reduz o tamanho do arquivo. Agora, em seus arquivos de exercícios, você pode encontrar a pasta de imagens. E aqui em nome da imagem do herói J peg. Basta clicar e arrastar isso para o otimismo. E então você pode ver que ele começa a comprimir nossa imagem como um louco. Então, como você pode ver, ele removeu 55 por cento de todos os dados. Então, basicamente cortou o tamanho pela metade. Baixado. Eu já criei essa pasta otimizada e a salvei em seu computador. Agora, a seguir, vamos colocar essa imagem na parte de trás da nossa seção de heróis. Em primeiro lugar, vamos fazer o upload dessa imagem para o nosso projeto Webflow. Agora, como fazemos o upload de imagens para Webflow no painel Ativos? Obviamente, abra o painel de ativos e clique neste ícone de upload. Vá para sua pasta de imagens. Certifique-se de usar a versão otimizada e fazer o upload para o Webflow. Agora, uma coisa muito importante, o web design é onde nem todo mundo pode ver e algumas pessoas usam leitores de tela. Então, se eles não conseguem ver, se tiverem uma deficiência visual, fazemos com que o leitor de tela leia o feed do site para eles. Então, precisamos dar a essa imagem, alguns textos, uma breve descrição do que é. Só para que algumas pessoas possam experimentar nosso site como qualquer outra pessoa. Vamos chamar essa mesa limpa com um computador de computador nela. Estou pensando muito mal. Agora, uma coisa que também queremos fazer é expandir primeiro o painel V Assets. Temos mais opções aqui. E quando quisermos selecionar nossa imagem de herói clicando nesta marca de seleção aqui. E depois clicando em compactar. Isso reduz ainda mais o tamanho do nosso arquivo , transformando-o em um arquivo p.sit. Simples assim. Isso é algo com o qual eu gostaria me acostumar, apenas para que possamos otimizar nosso site o máximo possível. Mas agora vamos adicionar essa imagem ao plano de fundo da nossa seção de heróis. Agora, adicione uma imagem para ser a seção do herói, o plano de fundo. Primeiro, selecione sua seção de heróis e, em seguida, role até os planos de fundo em seu gerenciador de estilo. Agora, aqui podemos dar uma cor de fundo, se você quiser. Vamos remover esse estilo. Você pode clicar neste ícone de adição aqui, imagem e gradiente. Agora, aqui temos algumas opções diferentes. Podemos adicionar algumas imagens. Podemos dar a ele um gradiente, gradiente radial ou uma cor sólida. Queremos a imagem. Agora. Escolha a imagem V, que será a imagem do nosso herói. E então, abaixo do tamanho, queremos que ele cubra toda a seção, então desse jeito. Mas o posicionamento está um pouco errado. Então, agora, vamos clicar no ponto do meio aqui. Centralizado. Simples assim. Você também deseja desativar o uso de rejeitos. Portanto, não queremos que, se você não tiver, se a imagem não preencher a seção inteira e o ladrilho estiver desativado, ela ficará assim. Se for ladrilhado, simplesmente repetirá a imagem V. Nossos veterinários VET para a imagem de fundo. No entanto, também podemos adicionar uma sobreposição exatamente da mesma maneira. Então, clique no ícone de adição novamente. Desta vez, clicamos em Color Overlay. Agora podemos simplesmente acessar nosso seletor de cores, talvez aumentar a opacidade um pouco para 70. E agora temos duas camadas aqui. Podemos movê-los, assim como o painel de camadas no Figma ou no Photoshop. Você quer que a sobreposição de cores fique no topo da imagem, assim. Agora temos a imagem, mas nosso texto é ilegível, não como aqui. Como alteramos a variável um? Maneira extremamente fácil de fazer isso. Selecione seu contêiner. E em Topografia e em cores. Mude para branco. Agora, por que esse bloqueio, esses dois estilos? Tire essa cor do recipiente. Então, CSS, folhas de estilo em cascata. Desde que não sobrescrevamos essa cor, ela obterá o valor da cor do contêiner, de seu elemento pai. Assim. Isso pode nos poupar muito tempo. E eu recomendaria que você trabalhasse assim sempre que puder. Assim, você pode tornar sua vida um pouco mais fácil. Agora, é basicamente assim que você faz o upload, otimiza suas imagens. Como você pode adicioná-los ao plano de fundo de uma seção. E também aprendemos como fazer ditri e simplesmente ler de forma rápida e fácil. Agora, na próxima palestra, você vai construir esses dois botões. Aqui. Vou adicionar algumas animações a elas. E também vamos usar algo chamado classes combinadas para criar várias variações de um único objeto, como esse botão sólido e esse botão de contorno. Isso é o que você vai negociar na próxima palestra. 9. Criando um elemento de botão: Tudo bem, então nesta palestra, vamos construir esse botão do zero. Vamos começar. Então, em nosso projeto Webflow, você deseja adicionar um botão. Agora, poderíamos ir se os elementos, no entanto, uma maneira mais rápida de adicionar novos elementos seria simplesmente pressionar o atalho de teclado V Control E no teclado. E isso abre essa barra de pesquisa. E agora podemos simplesmente digitar o elemento v que queremos pesquisar. Então, no nosso caso, você pode simplesmente clicar no elemento e adicioná-lo à nossa página. Agora, dependendo do elemento que você selecionou, ele pode não estar dentro do contêiner. Você pode simplesmente arrastá-lo para um contêiner ou bloco de disco simplesmente usando o Navigator e arrastando-o para dentro do contêiner onde você deseja que ele esteja. Simples assim. Agora, precisamos centralizar esse botão. Se você quiser centralizar algo ou alinhar coisas. A primeira coisa que você deve fazer é examinar seu elemento principal. Temos esse elemento de contêiner, mas ele não está configurado para centralizar tudo. Nós mesmos enviamos todos esses elementos com os respectivos elementos. Portanto, neste parágrafo, se usarmos a margem automática e quem está liderando, use o alinhamento na tipografia. Vamos fazer algo diferente com esse botão. Portanto, selecione seu contêiner e local, vá até a tipografia e alinhe-a ao centro. Simples assim. Agora, toda a topografia em seu contêiner estará centralizada. Tudo bem, vamos criar o botão real. Portanto, certifique-se de selecionar seu botão. Antes de tudo, temos que dar uma aula. Então, em nosso seletor de estilo, vamos chamar esse botão. Agora, podemos alterar o texto desse botão, assim como acontece com os outros tipos de topografia simplesmente clicando duas vezes nele. E agora podemos digitar nosso texto. Vamos entrar em contato. Assim. Tudo bem, então o que queremos com esse botão? Queremos que a tipografia V seja preta ou cinza. E o botão em si deve ter uma cor branca e alguns cantos, então um raio de canto é aplicado a ele. Então selecione o botão e vamos começar com o. Vamos às nossas opções de tipografia e agora podemos ajustar tudo como queríamos. Nós poderíamos mudar a fonte, nós poderíamos mudar o tamanho. No nosso caso, queremos apenas mudar a cor do botão. Vamos digitar no campo de texto, Grátis, Grátis. E isso selecionará automaticamente essa cor preta acinzentada. Agora, vamos usar isso em todo o projeto. Portanto, certifique-se de clicar nesse ícone de adição, que nos permitirá adicionar uma amostra ao nosso site. Agora, usando essa amostra, podemos aplicar essa cor com muita facilidade e rapidez em praticamente todos os elementos. E se você fizer uma alteração na amostra em si, todas as cores, todos os elementos com luz de cor ruim mudarão. Portanto, é muito parecido amostras globais em Figma, se você estiver familiarizado com isso. Agora, uma coisa muito importante a ter em mente é a taxa de contraste aqui. Neste momento, temos uma pontuação muito ruim. Então, diz falha. E vet significa apenas que quase não há contraste entre o fundo e a cor da tipografia, mas não conseguimos ver isso muito bem. Agora, isso não é um problema para nós, porque queremos mudar a cor do plano de fundo para branco. Vamos aos planos de fundo. E nossa cor. Arraste o controle deslizante até a borda B no canto e torne-o branco. Agora, se você voltar à nossa cor tipográfica, verá que temos essa classificação tripla a verde, mas a proporção é muito, muito boa e extremamente legível. Ok, agora temos o fundo branco e mudamos a cor do nosso texto. Como fazemos esses cantos arredondados? É muito simples com o botão profundo selecionado, anotado em duas águas. E aqui podemos dar a ele um raio de fronteira. Agora, podemos ajustar todas as bordas de uma só vez, dessa forma. E se quiséssemos ajustar cada um individualmente? Você pode clicar nesse ícone. E agora podemos ajustar tudo o compramos de acordo com o que precisamos. Queremos trocar todas as garrafas compradas individualmente, todas as garrafas ao mesmo tempo. E vamos ver o raio da borda de oito pixels. Agora, mais uma coisa que eu quero mudar é você quer dar a este botão um bônus pelo nosso efeito de passar o mouse. Quando passamos o mouse sobre o botão, quero deixar o plano de fundo transparente e ele precisa mudar para branco. Mas isso significa que precisamos de uma borda ao redor do botão V. Para adicionar uma borda, um elemento, basta acessar Bordas. E aqui temos cinco opções diferentes. Podemos definir uma borda para todos os lados ou podemos alterá-las individualmente. Essas opções, vamos dar uma largura aqui de um pixel. E certifique-se de alterar a cor da borda para branco. Assim. Agora, se visualizarmos nosso projeto com esse ícone, você poderá ver que nosso botão parece muito bom. Talvez queiramos ajustar o acolchoamento interno, então dê a ele um pouco mais de espaço para respirar. Mas se você passar o mouse sobre o botão, somente a mudança do cursor nos diz que se trata de um elemento interativo. Queremos criar uma pequena animação. Então, temos aquele feedback que diz, ei, você pode clicar nesse elemento. Antes de tudo, vamos ajustar o preenchimento. Agora, se você segurar o controle Alt ou o controle de comando, você está usando um Mac. Você pode mudar os dois lados opostos. Assim. Vamos usar 30 pixels. E agora queremos criar um estado de flutuação. Agora, os estados de passar o mouse são realmente muito fáceis criar com nossos elementos de botão selecionados em nosso seletor de estilo Você clica nessa seta suspensa. E o veterinário nos dá acesso aos nossos estados. Embora cliquemos em passar o mouse. que esse campo novo, dizem os textos da tela , é que atualmente estamos editando o estado do mouse. Agora, se você rolar para baixo, vamos fazer as alterações. Então, para essa animação, para esse estado de passar o mouse, quero que o texto fique branco e o fundo fique transparente. Vamos mudar a tipografia e depois mudar o plano de fundo. Basta torná-lo transparente assim. Agora, como você pode ver, se passarmos o mouse sobre o elemento, texto muda e o padrão de v bits se torna transparente. Agora, uma coisa que você quer fazer é que a transição seja um pouco mais suave. Agora mesmo. É instantâneo. Não parece muito bom, certo? Podemos ver que, Ei, você pode interagir com esse elemento. Não é a maneira mais limpa de fazer isso. Agora, para fazer uma transição para esse botão, botão D e certifique-se de que você está simplesmente editando a classe dos botões e não o estado do mouse. Se você ainda estiver no estado do mouse, basta clicar em nenhum no seletor de estado. Quando rolamos até o painel de efeitos. Aqui, tenha cuidado com esta pequena seção chamada Transições. Clique no ícone de adição. E agora temos essa grande lista de todas as diferentes transições que podemos editar. Poderíamos adicionar a cor de fundo e cor da tipografia, ambas individualmente. No entanto, se rolarmos até o fim na seção avançada, teremos todas as propriedades. Taxas veterinárias, uma transição para cada mudança de propriedade que fizemos. Agora podemos mudar a duração do mesmo. Então, vamos usar 400 milissegundos. E também poderíamos mudar a flexibilização aqui. Eu quero manter isso assim. Basta deixá-lo como padrão. Agora, se visualizarmos nosso projeto e tivermos nosso botão de visão geral, você verá que é muito mais fácil. É uma sensação muito boa. E na verdade parece um botão real. E é assim que você pode tratar esses botões. Agora, na próxima aula, aprenderemos como usar algo chamado classes combinadas para criar variações de certos elementos. Então, como você pode ver, temos esse botão normal aqui. Mas ao lado dele, também temos esse botão que descrevemos , mas muda para um botão sólido quando passamos o mouse sobre ele. E, como você pode ver em nosso seletor de estilo, temos um esboço de aula de feedback , invenção e combinação de classes. E eu vou te mostrar na próxima palestra como podemos criar o mal. 10. Aulas de combinação - faça variações para diferentes elementos: Tudo bem, nesta palestra, vamos falar sobre aulas combinadas. Agora vamos aprender como usar classes combinadas criando essa segunda variação de botão, que terá o contorno e quando mudará para uma cor sólida. Agora, vamos construí-lo. Em nosso projeto Webflow. Você pode começar simplesmente fazendo uma cópia desse elemento de botão. Então, o botão giratório selecionou e aqui, poderíamos entrar e simplesmente clicar com o botão direito do mouse e copiar ou duplicar. Você também pode simplesmente pressionar Control C e Control V para duplicar objetos, assim como em outros softwares. Agora, antes de fazermos a aula combinada, quero esclarecer isso um pouco porque, como você pode ver, os botões estão apertados juntos. Mas neste exemplo de projeto que eu tenho aqui, há um pouco de espaçamento. Agora, como podemos conseguir isso? Minha maneira preferida de fazer esse espaçamento é simplesmente enrolar os dois botões em um bloco de disco e, em seguida, deixar um pouco de espaço usando o Flexbox. Agora, isso parece muito complicado, mas na verdade não é. Então, vamos criar esse invólucro bem rápido. Vá até a guia Elementos e adicione um bloco de disco ao nosso contêiner, assim mesmo. E quando quisermos arrastar os dois botões para dentro desse bloco rígido, clique e segure o primeiro botão, arraste-o para o bloco de disco e repita o processo para o segundo botão. Agora, certifique-se de selecionar esse bloco de definição. E vamos dar uma aula chamada button wrapper ou hero, Hero Button Rapper. Assim. Agora, como criamos isso, essa lacuna entre os dois botões? Em Layout, você pode simplesmente clicar em flex, que é o segundo ícone. E agora, como você pode ver, temos muito mais controle sobre o posicionamento dos itens. Agora mesmo. Eles são justificados para V. Comece com a borracha. Se você clicar no ícone do centro V, podemos centralizá-los novamente. E para criar uma lacuna entre dois elementos. Você pode usar essa área aqui. Sim. E depois em colunas. Vamos usar 18 pixels. Sim, acho que isso parece bom. Tudo bem, e agora temos a lacuna negociada. Vamos falar sobre aulas combinadas. Então, selecione o segundo botão. E o que é uma classe combinada, basicamente, ela nos permite criar uma variação das classes que criamos antes. Haverá falta de um botão, mas não vamos estilizar e, em geral, o botão seja exatamente o mesmo, com pequenas alterações aplicadas a ele. Então, selecione o botão e vá até o seletor de estilo. E como você pode ver, ele já diz novo tipo de classe combinada para criar uma nova classe combinada. Agora, no nosso caso, queremos chamá-lo esboçado porque é um botão de esboço. Fui esboçado e clique no esboço da negociação. Agora temos um botão com o esboço da classe combinada. Agora, se fizermos uma alteração nesse elemento de botão, ela só será aplicada à classe de esboço. Esse botão, essa classe, não será afetada por ele. Agora, isso nos poupa muito tempo, mas não precisamos duplicar várias aulas. Temos que construí-lo do zero. É árabe, uma maneira limpa de ler desvios de certos elementos. Tudo bem, a seguir. Primeiro de tudo, vamos dar uma olhada nisso. Esse é o estado do contorno da animação ao passar o mouse. É assim que queremos que seja. Mas vamos mudar a tipografia para branca, assim. E a cor de fundo para transparente assim. Agora, se você visualizá-lo, verá que temos dois tipos de botões. Um deles é o botão sólido, que mudará para o contorno. E um deles é o botão de contorno sem animação no momento, porque a animação é o próprio botão de contorno. Vamos transformar isso nesse estado sólido. Portanto, a edição por meio de estados de foco para classes combinadas funciona exatamente como o elemento de botão anterior. Então, neste menu suspenso, vá para o mouse. E agora podemos editar o estado do mouse da classe combinada delineada. Então, vamos anotar isso. Mude a tipografia para nossa cor cinza e torne o plano de fundo 100%. Assim. Agora, anteriormente em nossa classe de botões, já temos uma transição fornecida, então não precisamos fazer nenhum trabalho aqui. Vamos pré-visualizar isso. E, como você pode ver, nosso botão de contorno se transforma em um botão sólido. E ao contrário. Se o botão sólido. E é assim que você pode usar classes combinadas para criar revelações de botões ou parágrafos desativados. Contenha-nos praticamente tudo em que você precisa de pequenas variações em relação às aulas já existentes. 11. Trabalhando com as Grids: Tudo bem, agora que terminamos nossa área de heróis, seguir, vamos criar esta seção gratuita de serviços de colunas. Nesta palestra, aprenderemos como usar o componente escrito para criar esse layout de três colunas. E também vamos criar os cartões de serviço VCE com blocos, que manterão nosso conteúdo. Vamos adicionar alguns ícones um título e um texto de parágrafo. Você cuidará desse link animado na próxima palestra. Tudo bem, vamos começar a construir isso. Então, em nosso projeto, primeiro lugar, vamos encerrar tudo isso. Então, se clicarmos nesse ícone aqui, ele poderá fechar todas as nossas seções abertas. E agora, com o corpo selecionado, use o atalho de teclado Control E. Abra a barra de pesquisa e procure o componente da seção. Você pode simplesmente, uma vez que você o tenha, depois de encontrá-lo na barra de pesquisa, e ele seja o único elemento, você pode simplesmente pressionar Enter no teclado e adicioná-lo automaticamente. Agora, a razão pela qual queremos que o corpo seja selecionado é porque ele simplesmente adicionará o elemento na parte inferior do nosso navegador. Assim. Agora, um atalho adicional em que é realmente útil em termos de velocidade é o Controle. Enter seleciona automaticamente o seletor de estado. Então, se você tiver um elemento selecionado, por exemplo esta seção aqui, e pressionar Control Enter. Você pode selecionar instantaneamente o seletor de estilo e pesquisar sua turma. Agora, como ainda não temos uma classe de seção, vamos fazer isso e dar um pouco de preenchimento. Vamos usar 100 na parte superior e 100 na parte inferior. Assim. Agora, se voltarmos à nossa seção, podemos ver que é uma seção branca. E agora precisamos do contêiner para manter nosso contador. Então, mais uma vez, controle E e procure os componentes do contêiner. Igualmente ruim. Controle Enter para selecionar o seletor de estilo. E então podemos simplesmente selecionar a classe do contêiner. Tudo bem, então agora vamos falar sobre grades. Agora, em nossos elementos, Elementos, layout do painel, temos esse componente de grade. Basta clicar e arrastar isso para o seu contêiner. E agora temos essa área aqui. E dá para ver que, desse lado, você também tem esse novo menu. Agora, aqui podemos editar nossa grade. Aqui em cima, podemos mudar as lacunas entre essas grades. Então, vamos aumentar a diferença em V aqui para cerca de 48 pixels, talvez. Sim, acho que gosto disso. Como vamos trabalhar com um layout de três colunas, vamos adicionar uma coluna ou colunas. Basta pressionar o ícone Plus, dessa forma. Não queremos crescer. Então, vamos removê-lo. Então, se você passar o mouse sobre uma dessas linhas aqui embaixo, verá que temos esse ícone de lixo. Basta clicar em Remover. Quando terminar, clique em Feito aqui. E terminamos de negociar nossa rede básica. Agora, à medida que fizemos algumas alterações, você pode ver que o fluxo de trabalho criou automaticamente essa classe. Se você clicar nessa seta suspensa, poderá clicar em Renomear classe. Vamos chamar isso de rede de serviços. Logo a seguir. Vamos criar nossos corações. Vamos criar um deles e depois simplesmente copiá-lo e colá-lo duas vezes. Agora, para criar um corte de serviço como esse, basta adicionar um bloco de disco, que será o próprio v cart. E vamos chamar isso de bloco de serviços. Bem, vamos chamar isso de cartão de serviço. Sempre nomeie suas aulas. Agora, queremos um pouco de preenchimento, então mantenha pressionada a tecla Shift e então podemos ajustar o preenchimento em todos os lados. Vamos usar 31 pixels por enquanto. Sempre podemos ajustar isso mais tarde. Dê a ele uma cor de fundo branca. E como você pode ver, também temos essa cor na parte externa com sombra projetada. Agora, isso é realmente muito fácil de adicionar no Webflow. Em nossa seção Efeitos de seu painel de estilo, temos sombras de caixa. Clique em Mais. E aqui temos todas essas opções diferentes. Agora podemos aumentar o desfoque, dessa forma. Também pode aumentar a distância. Vamos marcar por pixels. E também podemos aumentar o tamanho, se quisermos. Agora, em cores, podemos mudar a cor. Então, vamos diminuir um pouco a opacidade, como dez. E agora temos essa sombra projetada muito básica. Agora, vamos adicionar algum conteúdo a isso. Mas nós queremos um ícone. Então você quer esse ícone, um título e um parágrafo. Vamos começar com o ícone D. Agora, para ver o ícone em seus painéis de elementos, basta procurar a imagem. Na mídia, temos o elemento de imagem. Clique e arraste isso para sua Escócia. Como você pode ver, fica um pouco mais complicado. Então, o que vamos fazer simplesmente arrastá-lo diretamente para o cartão em nosso navegador, dessa forma. Agora também queremos um título. Mais uma vez, vá para o painel de elementos e destrua o título abaixo da imagem. Assim mesmo. E então também queremos alguns textos de parágrafos como esse. Agora, neste momento, todo o texto é branco. Vamos mudar isso selecionando nosso cartão de serviço para tipografia e selecionando nossa amostra de cores que já lemos antes. Tudo bem, agora precisamos da nossa imagem. Precisamos fazer o upload de nossos ícones. Vamos até o painel Ativos. Clique no ícone do arquivo v. E em nossos arquivos de projeto e nossos arquivos de exercícios, temos a pasta do ícone. E aqui temos todos esses ícones diferentes. Basta fazer uma seleção e abrir todas elas. Como você pode ver agora, temos nossos ícones prontos para uso. Agora, esse será o bloco de serviços de design. Então, vamos clicar em. Isso. Aparecerão as configurações dos elementos. E quando eles podem escolher uma imagem. Vamos usar o ícone v Design. E, assim, adicionamos nosso ícone. Agora vamos começar a estilizar o título e o parágrafo. Se você der uma olhada neste projeto aqui, você tem esse título de serviço. E a fonte é ferroviária e tem 28 pixels de tamanho. Selecione o título, dê a ele um nome de classe. Controle, entre e chame de serviço. Cabeçalho. Suas opções de tipografia. E procure imediatamente, aqui mesmo. E 28 pixels? Sim. Assim. Vamos também alterar a altura da fonte para 1,3 EM. Sim, parece bom. Vamos também alterar o texto, então clique duas vezes nele. E mais uma coisa muito importante sobre cabeçalhos. Clique no real e altere-o para H2. título H1 é sempre o que queríamos estar no topo e depois ele desce em cascata. Então, vamos usar o H2 para não pular nada. Vamos também remover um pouco desses textos que são um pouco demais. Então, vamos ajustar um pouco mais algumas dessas distâncias de espaçamento entre esses dois objetos. Então, vamos selecionar a configuração do serviço. Isso pode ver que temos essa margem de 20 pixels aplicada automaticamente a ela. Vamos colocar isso em zero. E acho que gosto do espaçamento entre esses objetos por enquanto. Mais uma coisa é que podemos contornar esses cortes de serviços. Selecione seu cartão de serviço, acesse nos comprou. E para todos os cantos, só um pouquinho. E agora queremos dar uma classe ao texto do serviço caso façamos alguns ajustes nele. Então, é traduzido como nossos blocos. E agora vamos selecionar o cartão de serviço e duplicá-lo. Clique com o botão direito em duplicar e duplicar. S pode ver que o espaçamento entre essas colunas é exatamente o mesmo. E v, uma coisa que precisamos fazer agora é ajustar os ícones. Isso será desenvolvimento. Primeiro, altere o título do filme e clique nas configurações do elemento do seu ícone. Substitua a imagem e use v development. Eu posso sentir isso. E quando publicamos e também mudamos o ícone V, assim. Agora, é isso por enquanto. Na próxima palestra, vamos dar uma olhada em como trabalhar com links de textos e como podemos fazer essa pequena animação. Então, como você pode ver, se passarmos o mouse sobre o link, ele sobe um pouco. Ou seja, as mudanças de cor de você criarão esse estado de flutuação na próxima aula. 12. Estilando links: Tudo bem, agora que criamos os cortes básicos de serviços e nossa grade de serviço de três colunas, a única coisa que resta a fazer é adicionar esse link com links animados. Portanto, se você passar o mouse sobre ele, ele ficará mais claro e se moverá um pouco para cima, indicando que você pode clicar e interagir com esse elemento. Tudo bem, então vamos adicionar um link primeiro. Antes de adicionarmos o link, vamos selecionar o cartão de serviço e precisamos garantir que todos os elementos estejam centralizados. Também sejam elementos que vamos adicionar. Cortes no serviço de cinema. A maneira mais fácil de fazer isso é simplesmente transformá-lo em um flexbox. Dos poucos cartões de serviço selecionados, acesse suas opções de layout e clique em flex. Agora que inicialmente ele quebrará o layout, porque primeiro precisamos dizer que você não quer que ele seja horizontal. Você quer que seja vertical, assim. E então queremos alinhá-lo ao centro, o que fixará nossos ícones dessa maneira. E isso apenas garantirá que, independentemente do elemento que adicionarmos a esse cartão de serviço, ele sempre estará centralizado. Tudo bem, então vamos adicionar o piscar de texto. Agora, uma maneira mais rápida de adicionar um novo elemento, esse cartão de serviço é selecionar os textos de serviço. Pesquisa avançada pelo link de texto. E a razão pela qual selecionamos o texto do serviço primeiro é para que o elemento V que vamos adicionar seja colocado abaixo. O elemento selecionado permanece dentro do nosso cartão de serviço. Agora, há algumas coisas que precisamos fazer. Primeiro, em primeiro lugar, todos os links no Webflow têm esse estilo básico, o texto em azul e nós sublinhamos. E uma maneira de se livrar disso é editar a própria tag HTML, assim como fizemos com a tag body. Então selecione seu link, acesse seu seletor de estilo e selecione a tag HTML Todos os links. Agora, se rolarmos para baixo, podemos remover na seção de tipografia que sublinhamos. E também queremos mudá-la para nossa cor preta. Então agora temos esse link. É indistinguível do texto do parágrafo. Isso não é um problema. Nós vamos cuidar disso imediatamente. Agora, selecione seu link e vamos dar uma aula sobre isso. Vamos chamar isso de slink sérvio. E queremos adicionar um sublinhado a ele. Então, se você olhar para esse projeto que eu construí anteriormente, você tem esse belo subjacente por cima, embaixo do nosso elemento. Agora, poderíamos apenas sublinhar. Mas eu acho que nós, não. Está um pouco perto demais. Quem são os textos reais. Eu não gosto disso. Mas vamos remover isso. E o que vamos fazer é simplesmente dar a esse link uma borda inferior. Certifique-se de clicar na parte inferior das configurações da garrafa. Se David, de um pixel e também uma cor de preto. Assim mesmo. Agora também temos o subjacente. Vamos mudar o texto disso. Você aprenderá mais. Agora, a seguir, queremos criar a animação para esse efeito de passar o mouse do link V. Se você der uma olhada neste projeto, como você pode ver, se passarmos o mouse sobre o link, ele ficará um pouco mais claro ele ficará um pouco mais claro e subirá um pouco. Agora, vamos construir isso. Em primeiro lugar, vá para o seu estado na sua classe de links. E vamos mudar a cor primeiro. Tipografia. Escolha uma cor um pouco mais clara, talvez essa aqui. Por conveniência, vamos também fazer uma amostra disso. Também podemos ser facilmente aplicados em nossa fronteira. Agora, se você passar o mouse sobre um botão, a cor muda. A seguir. Vamos garantir que ele realmente cresça como no projeto de exemplo. Agora, podemos fazer isso em nosso estado de flutuação. Na guia Efeitos, temos transformações 2D e 3D. Aqui, podemos mover nosso objeto um pouco. Como você pode ver, se você clicar no eixo y, poderá movê-lo para cima e para baixo. Agora só queremos um pouco de movimento. Então, digamos que menos dois pixels, um pouco acima. Agora, se passarmos o mouse sobre esse link, ele subirá em dois pixels. Vamos simplificar as coisas adicionando a transição. Vamos usar todas as propriedades e 400. Agora, é uma transição suave para nossa animação. E isso nos dá, assim como com os botões, uma indicação visual de que, ei, você pode interagir com esse elemento. Agora, a seguir, vamos copiar e colar este link para esses cortes de serviço. Poderíamos copiá-lo e colá-lo, basta selecionar copiar com o botão direito do mouse e, em seguida, simplesmente colá-lo com o Control V. Às vezes, é um pouco complicado não permitir que você pague coisas antes de clicar com o botão direito do mouse. Mas nós controlamos que o atalho sempre funciona. Agora, uma maneira de também adicionar esse link é simplesmente adicionar uma nova mensagem de texto. Quando simplesmente fornecemos o link de serviço de classe. É assim. E todas as propriedades são vendidas nesta classe. Então, nosso link funciona exatamente assim. Você só precisa mudar seus textos. Tudo bem, e é assim que você cria esses links. Agora, como podemos realmente unir as coisas? Bem, faremos isso quando terminarmos de criar nosso site. Mas se você clicar nas configurações do elemento, terá muitas opções diferentes. Podemos adicionar um URL a ele. Podemos criar links para páginas, você pode vincular duas seções. Vamos fazer isso no final da construção do nosso projeto. 13. Construindo uma disposição de 2 colunas usando grides: Tudo bem, então, nesta palestra, vamos começar a criar nossas seções de recursos. Começaremos com esse layout de duas colunas. É bastante normal. Vamos criar essa variação sombria de nossa seção. E então você vai criar um layout de duas colunas, uma contendo alguns textos e outra segurando nossa imagem. Agora vamos começar a construir. Em nosso projeto. Vamos selecionar o corpo e adicionar outra seção. Controle E para abrir a barra de pesquisa e adicionar uma seção ao nosso site. Obviamente, com o Control Enter, podemos selecionar esse seletor de tipo e selecionar a classe da seção, mas fizemos anteriormente. Agora, desta vez, não queremos que essa seção tenha um fundo branco. Você queria ter um fundo mais escuro. Então, vamos criar um formato de classe combinada. Selecione seu seletor de estilo e simplesmente crie uma nova classe de composição chamada dark. E agora podemos alterar a topografia e a cor de fundo da nossa seção. Como vamos criar um fundo escuro, queremos que o contraste seja o mais alto possível. Para nossa tipografia, a cor será branca e nossa cor de fundo será preta. Vamos usar a amostra de cores que criamos anteriormente. Tudo bem, agora, nesta seção, é claro, precisamos adicionar nosso contêiner. Vamos adicionar um contêiner e atribuir a ele a classe container. Mas, como você pode ver, quanto mais seções, mas você cria, mais componentes você terá acabado de reutilizar, como a seção B, o contêiner, links, botões e tudo mais. Agora, a seguir, precisamos adicionar nossa grade. Você tem um layout de duas colunas e vamos usar uma grade para criar esse layout. Então, vamos procurar o elemento da grade e adicioná-lo ao nosso contêiner. Agora, não queremos, podemos deixar o, obtemos o mesmo que 16 pixels. Queremos remover a segunda linha, dessa forma. Vamos renomear o fluxo de trabalho ruim da classe criado para nós apenas para manter as coisas organizadas. Digamos que ligue para ler. Agora, a seguir, queremos criar, queremos adicionar algum texto. Quem? Nossa seção. Agora, se fôssemos simplesmente adicionar o título, vamos adicionar um título. E também queremos um parágrafo. Então, se você adicionar o elemento de parágrafo, verá que ele salta para a segunda linha, para a segunda coluna da nossa grade. Agora, o que precisamos fazer é agrupar nosso conteúdo dentro de um bloco de disco. Portanto, definimos que o bloco manterá o conteúdo em uma linha da nossa grade. Assim como usamos, servimos como formato de cartão. Vamos excluir o cabeçalho v, que provavelmente coagulará, e adicionar um bloco div simples. Vamos dar a ele a classe de serviço. Próximo rapper. E dentro desse bloco div, podemos adicionar nosso título e nosso parágrafo. E, como você pode ver, também queremos ter um botão e uma campainha. Então, vamos adicionar o botão também. Agora, não queremos que isso seja centralizado. Estava tirando o , está tirando esse estilo do contêiner. Se você selecionar o service wrapper e rolar até o fim, o estilo é, como no laranja, fundo é laranja e você clicar nele, poderá ver de onde vem o valor. Então, está tirando esse estilo do contêiner. Podemos ignorar isso simplesmente dando a ele um estilo diferente, sem mais nem menos. Alinhe-o à esquerda. A seguir, vamos ver se esse botão, nossa classe, é igual a esse. E também vamos começar a trabalhar no cabeçalho v. Agora, antes de tudo, precisamos criar uma classe de cabeçalho. Agora vamos chamar esse título. E agora vamos dar uma aula combinada. Antes de atribuirmos a classe combinada, vamos mudar a fonte desse rumo para ferrovia. Um poste e dois EM de altura, sem mais nem menos. E o que você vai fazer a seguir é dar a ele a classe combinada de H2. Agora, por que H2? Porque é o segundo tipo de título mais importante. Portanto, temos o topo H1 e, em seguida, para cada seção, temos o título H2. E a razão pela qual adicionamos a classe de combinação como classe título é que agora podemos simplesmente alterar seu tamanho e manipulá-la sem ter que sempre voltar e alterar a cor da fonte, a fonte em si, o peso da fonte e coisas assim. Agora vamos dar uma olhada na configuração que eu tenho aqui. Então, oito pixels, um ponto para EM. Você pode deixar como está. Vamos mudar o escritório de texto clicando duas vezes nele. Algo parecido com isso. E então, se esse parágrafo for uma classe, eu tenho um gráfico. E queremos que isso seja um tamanho definido de 650 pixels. Agora, nós temos a própria classe de parágrafos. Podemos mantê-lo como está porque está retirando informações do corpo, de todas as páginas. Bem, vamos dar a isso uma classe de combinação de 650 pixels. E com essa classe de combinação selecionada, podemos atingir a largura máxima de 650 pixels. E agora sempre será definida uma largura máxima de 650 pixels. Agora, a seguir, vamos mudar o texto do botão para entrar em contato. Assim. Se olharmos para o nosso projeto, você pode ver que também temos esse rapper de imagens. Apesar. Vamos selecionar V2 chamado grão. Em uma derivada negativa, blog, salta automaticamente para a segunda coluna. E isso manterá nossa imagem. Vamos chamá-la de imagem Rabaa. E dentro dessa borracha de imagem, vamos colocar o elemento de imagem v. Agora, vamos usar a imagem do herói que enviamos anteriormente. Eu simplesmente o selecionei e agora temos um layout básico de duas colunas. Então, temos nosso texto no lado esquerdo e uma imagem no lado direito. O que eu quero fazer é empurrar esse texto um pouco para baixo. Só para que seja um pouco mais interessante. Atendemos o coletor de impostos selecionado. Vá até o acolchoamento e simplesmente empurre-o um pouco para baixo. Assim, por exemplo, vamos usar 38 pixels. E também quero aumentar algumas mudanças no espaçamento entre esses elementos. Agora, uma maneira de fazer isso é aplicar o título diretamente ao elemento do parágrafo VI. Sempre que usarmos a classe de parágrafo ou a classe combinada de parágrafos de 650 pixels, o preenchimento ou a margem também serão usados. Então, o que vamos fazer é adicionar um, outro bloco de disco. E vamos rastrear nosso parágrafo dentro desse bloco div. Agora, nada mudou. Somos difíceis, simplesmente contornamos o parágrafo sem trocar mais espaçamento entre os elementos. O que vamos fazer é agora adicionar alguma margem para ser surdo. Digamos que seja como alugar pixels na parte superior. E vamos ver. Vamos usar 28 pixels na parte inferior. Agora, a razão pela qual resumimos isso em algo difícil é porque agora temos uma maneira muito não destrutiva de escrever essas margens. Agora vamos mudar o nome da classe desse bloco def. Clique vazio no menu suspenso, renomeie e chame de margem. Temos 20 pixels na parte superior, então a parte superior e inferior irradiam. Agora, a razão pela qual uma ênfase, então, se cair no navegador, pode ver instantaneamente, ok, esses presentes diferentes, uma margem severa. Nossos elementos. Tudo bem, agora temos essa seção básica negociada. E como você pode ver, se formos para o nosso projeto de pré-visualização que eu fiz, você tem mais duas dessas seções. Um será exatamente o mesmo e o outro será invertido. E a cor do texto e a cor do plano de fundo também mudarão. Vamos criar isso muito rápido. Você pode simplesmente copiar e colar a seção V. Então, controle a seção Z selecionada e Controle V para colá-la. Uma maneira muito rápida de simplesmente mudar a seção. Então, vamos remover a escuridão. Agora, como você pode ver, temos algumas coisas. Esses elementos têm a cor certa. Eles estão tirando isso do contêiner. Agora, uma solução rápida para isso seria simplesmente pegar o coletor de impostos sobre serviços, escolher a cor e alterar o texto aqui e alterá-lo para nossa amostra preta. Agora, não está pegando as informações do contêiner, mas da nossa embalagem fiscal de serviços. Agora, uma coisa que precisamos mudar é o botão. Precisamos criar uma nova classe de combinação para um botão mais escuro com o botão selecionado na classe de combinação. Ok. E agora podemos simplesmente mudar as cores do botão vermelho. Queremos que o texto seja branco e o fundo do botão seja cinza. E, claro, também precisamos alterar o efeito de passar o mouse. Clique no menu suspenso. Evento de flutuação dos estados. Também queremos usar tipografia. O fundo da perna deve ser transparente. E compramos um testamento preto. Agora vamos dar uma olhada nisso. Parece muito bom, mas acho que precisamos mudar, sim, precisamos mudar a cor da borda da classe de combinação escura para peste também. Perfeito. Agora temos um padrão de caminhada para esta seção. E uma maneira rápida de dizer sim, e é por isso que você precisa realmente ter cuidado quando se trata de mudar essas classes. Então, como você pode ver, esta seção parece muito boa. Vou deixar isso ligado para que você possa ver o que precisa procurar ao criar V. E você mudará o estilo com a classe porque eu saio e você pode quebrar muitas coisas. Então, como você pode ver, a cor do texto também mudou. Portanto, não é mais que os textos em branco , porque servimos esse texto para embrulhar o que usamos em ambas as seções foi alterado. Então, a classe em si, você fez as mudanças de cor para a própria classe v? Uma solução rápida para isso seria simplesmente adicionar uma classe combinada e chamá-la de branca. Agora, existem soluções mais elegantes para isso. Mas essa é apenas uma maneira rápida de corrigir isso. Então, com a classe de combinação ampla, vamos mudar a tipografia de volta para branca. E como você pode ver, agora está corrigido. Essas são apenas algumas das pequenas coisas que você precisa procurar. E esteja consciente do que você está fazendo e da aula que está editando. Tudo bem? Mas o que queremos fazer é inverter a imagem e o texto. Sim, nada mais fácil do que isso. Olá para você e para o navegador. E basta clicar e arrastar sua imagem para cima do service wrapper de um switch em lugares como esse. E agora também queremos ter uma terceira seção da área Publicar. Vamos simplesmente copiar e colar a seção mais escura e colá-la abaixo. Uma nova seção branca. Isso vai ser o mesmo de qualquer maneira. Agora temos essas seções gratuitas para reconhecer quem as chama. Vamos ajustar o conteúdo bem rápido. Então, vamos nos interessar por um desenvolvimento rápido. E isso será uma publicação rápida. Simples assim. Nós mudaremos as imagens mais tarde. Quando adicionamos mais algumas e otimizamos mais algumas imagens, elas podem sair e o mesmo por enquanto. Agora, isso é tudo para esta palestra. E eu vou te ver na próxima. 14. Layouts complexos - criando uma seção de preços: Tudo bem, agora que terminamos nossas seções de recursos, vamos criar um layout mais complexo. Vamos criar uma seção gratuita de preços de colunas. Agora, para começar, mais uma vez, direcione seu elemento corporal e crie uma nova seção. Vamos fazer isso da maneira mais rápida com nosso atalho de teclado Control. Procurando o espectro. E ao usar Control, insira a busca por nossa classe de seção. Vamos usar a versão lite disso. Quando, mais uma vez, controle E, procure seu contêiner e aplique rapidamente o agrupado. Agora, como você pode ver, se você tem esses clusters preparados e conhece os atalhos do teclado. Construir o layout básico é incrivelmente rápido. Tudo bem, próximo aplicativo, e queremos uma grade de colunas gratuita. Agora, já temos um, e poderíamos realmente usá-lo. Portanto, é uma classe de rede de serviços. Vamos até nosso contêiner e procurar uma grade. Basta clicar em Concluído aqui. Portanto, temos acesso ao nosso seletor de estilo. E nosso grupo é chamado de rede de serviços. Então, vamos ver isso aqui em cima, essa rede de serviços. E assim, temos uma grade de colunas gratuita. Tudo bem, a seguir, se você quiser criar a própria placa V. Então, o plano de fundo da nossa seção de preços ou o contêiner para ela. Vamos adicionar um bloco e Controlar Enter para selecionar o seletor de estilo. Dê a ele o nome do cartão de preços. Assim. A seguir, vamos começar um pouco antes de adicionarmos algum conteúdo a ele. Bem, vamos descer e adicionar tipografia. Queremos que seja sempre preto. Nós poderíamos. Vamos fazer com que a topografia do descarte seja nossa cor preta. E o fundo será de um branco sólido, assim mesmo. Agora, a seguir, quero estruturar esse cartão de preços. Agora, vamos dar uma olhada nesse exemplo de projeto aqui. Você não vai construí-lo exatamente assim. Então, eu quero um pequeno título para nosso cartão de preços , bem como um subtítulo. Então eu quero, bem, primeiro precisamos saber o quanto realmente é. Portanto, vamos criar esse nível de preço e v por mês ou por ano, dependendo do seu caso de uso. E tudo isso está envolto em diferentes blocos de diferença para que possamos alinhá-los um pouco melhor. Queremos um botão e também queremos essa lista aqui. Agora, vamos criar tudo além da lista. A lista será o próximo vídeo. Tudo bem, então vamos começar com isso. Adicione nosso div. Antes de tudo, vamos nos certificar de que se trata de um flexbox. Agora vá até o layout e abaixo da tela. Certifique-se de que seja um flexbox. O alinhamento que eu quero alinhar ao centro ficaria bem. E então queremos alinhá-lo ao topo também. Então, alinhe na parte superior e justifique com o vCenter. Vamos tentar contornar se o centro parecer melhor com o alinhamento à direita, o alinhamento esquerdo parecer melhor. Você pode brincar com isso. Tudo bem, agora, se tivermos um cartão de preços configurado para flexibilizar, temos as opções de alinhamento prontas. Mas antes de tudo, vamos mudar para duas verticais. Esse foi o meu erro. Certifique-se de que esteja definido como vertical, a linha para o centro e justifique para estar no topo. Tudo bem, agora eu quero ter um título e um subtítulo. Vou embrulhar os dois dentro de um bloco de disco. Vamos procurar um bloco de definição simples e dar a ele o nome de preço. Agora, antes de continuarmos, vamos também usar uma sombra projetada para esse cartão de preços. Só para que possamos realmente ver no que estamos trabalhando. Talvez algo assim. Distância até o sopro 15, tamanho 5,0, 0,15 em valor de opacidade V. Tudo bem, agora temos nosso cabeçalho de preços. Na prensagem úmida com mais força, você quer etiquetar. Um será o nome e o outro será o subtítulo. Agora, do jeito que vou construí-lo, vou usar um elemento de título para o título do cartão de preços. Vou configurá-lo para três anos. Além disso, adicionaremos um pouco de texto depois de concluirmos a criação da seção de preços real. Agora, para a classe desse título, você usará a classe de cabeçalho básica V. Aposto que você vai criar uma nova classe combinada chamada h three. Agora, vamos estilizar com um pouco, torná-lo um pouco maior. Talvez oito pixels pareçam bons. E nós lhe daremos o nome de cervejaria. Simples assim. Em seguida, selecione o preço. Você vai procurar por um elemento de bloco de texto simples, este aqui. E certifique-se de colocá-lo dentro do cabeçalho de preços V. Vamos chamar isso de. Basta digitar. Perfeito também. Perfeito para iniciantes, algo assim. E também dê a ele a classe de preços. Subtítulo. Algo nesse sentido. Aumente o tamanho para cerca de 18 pixels. E podemos deixar isso no Open Sans apenas para torná-lo um pouco diferente. Nós lideramos o elemento. Não gosto do espaçamento entre esses dois. Então, o que vamos fazer é ir até nosso espaçamento e remover o valor do espaçamento. Em vez disso, marginalizamos a margem inferior para zero. Vamos considerar que agora estão um pouco mais próximos. Agora, o que também podemos ver é que não há preenchimento aplicado a esse cartão de preços. Portanto, selecione seu cartão de preços e acesse suas opções de preenchimento. Mantenha pressionada a tecla Shift e aplique alguma forma de preenchimento, como 18, em todos os lados. Talvez possamos brincar com isso mais tarde. Tudo bem, e agora temos o cabeçalho de preços praticamente concluído. Em seguida, vamos construir isso. O preço em si. Então, mais uma vez, o cartão de preços da palestra e um bloco de disco, exatamente assim. E desta vez vamos chamá-lo de blog v def. Simplesmente preço ou etiqueta de preço. Bem, vamos manter isso por um preço. Esse será o nosso bloco de disco. E inverta o rebanho. Queremos um bloco de texto e outra caixa de texto. Então, vamos Controlar C e Controle V para adicionar dois blocos de texto para nós. Agora, digamos que o preço base seja três. E isso vai ser qualquer coisa. É grátis para sempre. Agora, vamos dar a esse bloco de texto uma classe como o seletor de adição. E vamos chamar essa etiqueta de preço assim. Vamos dar a ela a fonte ferroviária V. Novamente, para apenas algumas variações. Eu quero a versão em negrito. E para além de talvez 32, talvez até 36. Sim, isso parece melhor. E certifique-se de que é 1,2 E m, pois a altura parece boa. Agora, o segundo livro didático, nós seremos este aqui, aquele que diz por mês ou por ano, dependendo do que você quer. Então, vamos chamar isso tempo de ascensão. Sim. Tempo de precificação. Desde que você saiba com o que está trabalhando, sua equipe sabe. Tudo bem, desde que você saiba exatamente o que cada classe representa. Tudo bem, vamos manter isso no Open Sans. Talvez seja um pouco maior, como 18 pixels. E 1.3 EM parece bom. Agora, uma coisa que eu não gosto nisso agora é que não temos espaçamento entre o cabeçalho e a etiqueta de preço em si. Portanto, selecione seu cabeçalho de preço e aplique alguma margem inferior a ele, dessa forma. 28 parece perfeitamente bom. Agora temos o nome do nosso cartão de preços. Temos uma etiqueta de preço e agora queremos adicionar um botão simples a ela. E isso é basicamente selecionar o cartão de preços, pesquisar o elemento do botão no veterinário. E quando adicionarmos nossa classe de botões a ela, certifique-se de que seja a que parece melhor. Poderíamos escolher a versão escura ou o contorno. Vamos usar a versão escura e aprender tudo. Assim. Agora, é claro, precisamos adicionar um pouco de espaçamento entre esses dois elementos. Você pode aplicar alguma margem inferior ao elemento de preço V. Isso é flexível. Talvez um pouco menos na parte superior, 24 pixels. Tudo bem, agora temos praticamente tudo feito. A única coisa que precisaremos fazer com o cartão de preços é ver uma lista de recursos que essa categoria de preços possui. E é isso que vamos fazer na próxima palestra. 15. Trabalhando com listas - listas desordenadas e ordenadas: Tudo bem, agora, para finalizar nossa seção de preços, precisamos adicionar uma pequena lista de recursos a esse cartão de preços. Agora, no Webflow, temos sobre web design em geral, temos dois tipos de listas, listas ordenadas e listas não ordenadas. Agora vamos dar uma olhada nos dois. Então, abra sua barra de pesquisa e simplesmente digite a lista. E isso lhe dará acesso ao elemento da lista V do seu cartão de preços. Agora, como você pode ver, temos esses marcadores. E aqui podemos clicar duas vezes e digitar algum conteúdo. Agora, no entanto, mais algumas opções, é claro, nas configurações da lista. Se você clicar nesta roda aqui , você tem algumas opções. Portanto, temos dois tipos de listas. Temos uma lista não ordenada D, que é a lista de marcadores. E também temos a lista ordenada, que está simplesmente caindo de 1 a 3 e assim por diante. E também temos a opção de remover completamente a bala. Se você quiser apenas uma lista. Não precisamos de marcadores ou números na lateral. Podemos removê-lo dessa forma. Agora, no nosso caso, queremos criar uma lista não ordenada. E se clicarmos duas vezes sobre isso, vamos simplesmente digitar uma lista a outra apenas como um espaço reservado. Agora podemos simplesmente me encaixar em cada ponto, assim. E para estilizar esses itens da lista, temos algumas maneiras de fazer isso. Então, nas eleições do nosso estado, ele pode Eva, podemos criar uma nova classe para os itens da lista. Embora seja ainda mais fácil, podemos acessar a tag HTML, todos os itens da lista. E agora podemos fazer os ajustes da maneira que precisarmos deles. E, como você pode ver, cada item da lista em nosso site muda de acordo com as mudanças que fazemos. Então, digamos que queremos que isso tenha 18 pixels. E eu acho que podemos deixar o resto igual. Simples assim. Sim. O que eu quero fazer , no entanto, é ter isso centrado. Então, eu quero que esteja perfeitamente no centro, como você pode ver agora. É um pouco mais para a direita. E isso porque o elemento da lista tem um preenchimento básico de 40 aplicado a ele. Vamos remover esse preenchimento, torná-lo zero. Como você pode ver, o Webflow criou nossa classe de matriz V que centralizou perfeitamente nossa lista. Agora, um veterinário não inclui os marcadores. Talvez precisemos empurrá-lo para dentro, só precisávamos dar uma olhada nele. Algo assim, tipo dez. Isso parece bem centrado para mim. E também queremos dar uma margem para separá-lo um pouco do botão. Talvez 24. E, desse jeito, criamos esse cartão de preços muito básico. Agora, se você quiser ter mais itens da lista, basta copiar e colar um item da lista e adicionar quantos quiser ou removê-los. E isso é basicamente o suficiente para este cartão de preços. Agora, vamos opiá-lo e colá-lo, para que ele salte automaticamente para a segunda fila. Vamos mudar o texto também. Então, isso será básico. E serão, digamos, $4 ao contrário e por mês. Então copie isso. E isso será zero. Isso custará $9 por mês. Perfeito para o básico. E perfeito para fileiras como essa. Agora, como adicionamos mate v ao cabeçalho de um campo H, queremos ter uma tag H2 acima disso. Vamos tornar essa grade um pouco menor. E com nosso contêiner selecionado, vamos adicionar um título. Certifique-se de que esteja no topo do contêiner, no topo da grade. E também precisamos dar a ele a classe da classe de cabeçalho H2. E agora está configurado para a direita, muito ruim porque nosso contêiner tem a cor base branca. Vamos mudar isso. Agora vamos verificar se tudo ainda está funcionando. Não é. Se você fizer essas alterações, sempre desejará ficar atento a essas coisas. Então, porque tínhamos apenas a classe básica de contêineres em nossa seção de heróis e a tornamos branca. Precisamos ajustar isso de acordo. Então, digamos container e atribuamos a ele a classe combinada. Ou para a direita? Agora podemos corrigir problemas, reduzidos novamente. E agora, para cada recipiente que temos, a cor será preta. Isso é chamado de preço. E também vamos adicionar um parágrafo. A classe de parágrafos. E eu acho que a classe combinada 650 deve parecer bastante decente. Sim. Vamos nos certificar de que está centralizado. Agora, se mudarmos essas margens, é claro que isso também mudará aqui, onde usamos a mesma classe de combinação. Agora, uma forma de combater isso é simplesmente envolvê-lo em um bloco de disco. Assim. Vamos ligar para esse centro e garantir que ele esteja alinhado à esquerda, não funcionando. Precisamos flexioná-lo? Às vezes você acha que algo deveria funcionar. Se algo não fizer sentido, experimente de uma maneira diferente, brinque com as configurações. Isso poderia resolver seu problema. Na maioria das vezes, você conseguirá encontrar uma solução. Vou começar a tentar algumas maneiras diferentes de fazer algo. Agora. Eu quero criar um pouco de preenchimento para ser, então vamos adicioná-lo ao centro. Se alguma margem. Então, empurre isso um pouco para baixo. Então, com nosso centro, esse empurrão de volta para baixo. E acho que gosto disso. Poderíamos remover parte do texto base do espaço reservado dessa forma. E assim, criamos uma seção básica de preços com aparência bastante decente. 16. Construindo um formulário de contato: Tudo bem, então agora a seção de 50 preços está pronta. Vamos falar sobre uma das coisas mais importantes de cada site ou contato do cliente ou de seu cliente em potencial. Eles precisam ter uma maneira de entrar em contato com você para prestar seu serviço. Então, é claro, precisamos adicionar um formulário de contato ao nosso site. Agora, criar formulários de contato é incrivelmente fácil no Webflow e são apenas algumas etapas. Então, primeiro de tudo, vamos criar uma seção exatamente como fizemos com nossa seção, elemento de seção. Se for nossa seção plus. Agora, como usamos o fundo branco aqui, quero que você alterne entre escuro e claro. Então, vamos adicionar a classe de combinação, escura. E, claro, precisamos colocar em um recipiente. E esse contêiner ou classe de contêiner. Agora, nesse contêiner, quero ter um título e um parágrafo. Vamos adicionar o título exatamente como aqui em cima. E certifique-se de escolher o tipo de título v H2. E, como você pode ver, a cor do texto é exatamente a mesma cor do plano de fundo. Então vá até seu contêiner e adicione V combo class white a ele. Isso é apenas um tipo de para configurações de hipertrofia de preto a branco. Agora, vamos dar um nome a isso e digamos que entre em contato. E também precisamos aplicar nossa classe de cabeçalho, título H2. E também queremos adicionar um pequeno parágrafo abaixo disso. Então, mais uma vez, gráfico da barra de pesquisa de aveia. Dê a ele uma classe de parágrafo de alimentação, mas nós criamos e queremos usar o formato de classe combinada V 650 pixels. Vamos escolher um pouco do texto de espaço reservado. E queremos centralizá-lo. Então, vamos fazer a mesma configuração aqui com essa classe central, mas fizemos: Vamos esfregar em um bloco de definição. Coloque o parágrafo dentro do nosso bloco def e presenteie-o com a classe vCenter do bloco. E desse jeito, centralizamos nosso texto. Tudo bem, a seguir, vamos falar sobre o formulário de contato. Agora, temos acesso a todos os nossos elementos de contato no painel de elementos, o painel aqui embaixo em formulários. Temos acesso a todos os elementos individuais, mas podemos ter também esse bloco de formulário básico. Ao adicioná-lo, adicionamos um elemento de bloco de formulário ao nosso site. Agora vamos dar uma olhada rápida nas configurações. Temos três estados diferentes para isso. Acabe com o estado normal, que é a própria forma B. O estado de sucesso, que aparece se o e-mail foi enviado com sucesso e se algo der errado, é claro que você tem um estado de erro. Agora, também podemos dar nosso nome anterior. Você vai deixar todas essas opções, SVR. Agora, se abrirmos o bloco de formulários em nosso navegador, você pode ver que temos três divs diferentes. Um deles é o próprio formulário V, que na verdade nos ajuda a identificar campos de texto e botões. E quando temos dois motivos, a mensagem de sucesso e a mensagem de erro. Eles estão escondidos agora. E eles são exatamente a mesma coisa, mas eu já mostrei antes que diferentes estados, eles estão simplesmente ocultos. Agora, o que eu quero fazer é não querer que o formulário se estenda até o fim. Então, o que vamos fazer é adicionar um novo bloco de disco, esfarrapado em cima do bloco de formulário e colocar o bloco de formulário dentro desse bloco div. Você vai dar a esse bloco def uma classe de invólucro de formulários e uma largura máxima de, digamos, 750 pixels, talvez. Sim, isso parece bom. E, claro, precisamos centralizá-lo. Então, vamos aplicar alguma margem automática em ambos os lados. Como um veterinário. Tudo bem, agora centralizamos nosso elemento, nosso bloco de formulários. E vamos dissecar isso um pouco. Portanto, para cada campo de texto geralmente temos um rótulo e o próprio campo. Esse campo simplesmente nos diz, é rotulado, nos diz do que se trata o campo, que tipo de informação precisamos colocar nele. E é assim que esses campos individuais são estruturados e, claro, no final, temos um simples botão de envio. Agora, mesmo que isso seja chamado de botão de envio aqui, podemos simplesmente aplicar nossa classe de botão a ele. Simples assim. Agora, o padrão combina com todos os outros botões. Você pode até mesmo alterar as ofertas de texto clicando duas vezes sobre ela. E aqui podemos digitar o texto do botão V. Vamos receber uma mensagem, assim. Tudo bem, agora uma coisa que eu quero mudar como eu quiser, tudo isso alinhado à esquerda. Então, o Bloco de Formulário foi selecionado. Vamos até as configurações de topografia e alinhá-las para a esquerda. Como você pode ver, o Webflow foi criado automaticamente antes da aula para nós. Agora, com esses rótulos de campo, a melhor coisa sobre eles é que não precisamos realmente criar uma classe para eles. Se você selecionar o rótulo do campo e acessar o seletor de sites, verá que temos uma tag HTML para todos os rótulos. Podemos adicioná-lo. Então, vamos fazer isso. Selecione o peso normal da fonte Open Sans. Vamos mantê-lo em 16 pixels. Acho que isso parece bom por enquanto. Agora, o que eu quero, no primeiro formulário, quero clicar no nome, no endereço de e-mail. Então, esses dois estão perfeitamente bem. Podemos mantê-los como relações públicas, mas eu também quero um campo de mensagem. Agora, vamos ao menu Adicionar e aos formulários. Em primeiro lugar, vamos lançar um novo rótulo. Por aqui. Vamos chamar essa mensagem. E vamos adicionar o elemento da área de texto. Agora, esse elemento permite que você digite sua mensagem real. E vamos colocá-lo abaixo da mensagem V, sem mais nem menos. Tudo bem? Agora, uma coisa que você vê instantaneamente é que temos um texto com espaço reservado aqui, mas não no endereço de e-mail ou no campo do nome. Agora, como podemos adicionar texto reservado basta clicar no ícone Configurações. Aqui, temos acesso às nossas configurações de campo e podemos dar um nome a elas. E então podemos declarar o tipo de entrada que queremos que seja. Agora mesmo. São textos simples, então vale tudo. Assim, você pode digitar um nome, digitar mensagens e coisas do tipo. Mas também temos senha de e-mail, número de telefone. Para isso. Como é apenas um nome simples, você o manterá no avião. E podemos dar a ele alguns textos de espaço reservado. Basta usar algo básico, John Doe, ponto, ponto, ponto. E então você tem dois campos. É necessário um. Portanto, o formulário não pode ser enviado se as informações não tiverem sido preenchidas. Então, nós queremos isso. E temos o foco automático, o que não queremos. Nesse caso, foco automático simplesmente seleciona para ser formado para você. Depois de acessar o site, podemos começar a digitar instantaneamente. Você não quer isso neste caso. Agora vamos editar as configurações do nosso campo de e-mail. Altere o tipo para e-mail. Eu tenho sido um e-mail reservado. Vamos usar algo fictício como John doe@gmail.com. Mantenha-o conforme necessário, e pronto. Agora, é claro, podemos editar esses campos, mas temos controle total do design sobre eles. Uma coisa que eu quero fazer é mudar o texto do espaço reservado. Então, primeiro de tudo, vamos dar a isso uma classe chamada campo de texto. E para editar o espaço reservado ego levantou o campo de texto selecionado. Nós caímos. E como esse é um campo de texto, temos esse estado de espaço reservado. Agora ele fecha imediatamente muitas janelas. E aqui temos acesso à topografia do mesmo. E como você pode ver, podemos estilizá-lo como qualquer outro. Vamos usar algo assim, como 30, 30% no valor de opacidade V, e talvez torná-lo um pouco menor, como 14 pixels. Sim, eu gosto disso. Não é muito intrusivo, mas não é muito pequena Eva. Agora, vamos adicionar a classe V TextField aos outros campos de texto. Assim. Agora, uma coisa que ainda precisamos projetar são os diferentes estados do estado de sucesso, bem como o estado v Aero. Agora selecione seu bloco de formulário e você pode alternar o sucesso e nosso estado aqui nas configurações do bloco de formulários. Se você simplesmente clicar nas configurações do Bloco de Formulário aqui, você pode clicar em sucesso. E vamos criar um estilo muito simples. Vamos fazer disso um fundo verde. Um pouco mais escuro, só que isso, fica verde, nos diz, ok, funcionou. Além disso. Vamos arredondar um pouco as esquinas. Assim, você pode deixar seu texto como está. Esse seria nosso estado de sucesso. E para editar o estado v Aero, mais uma vez, o bloco de formulário inativo. E clique na seta aqui. E vamos estilizar o estado do erro. Agora, aqui queremos apenas um preto vermelho um pouco mais escuro , então também arredondar os cantos um pouco mais ou menos assim. E eu acho que isso parece muito decente. 17. Construindo uma navegação: Tudo bem, se o formulário de contato estiver pronto por enquanto, restam apenas duas seções em que realmente não podemos chamá-las de seções para construirmos. E um, é claro, será o rodapé e o outro será a navegação. Então, vamos começar a criar uma navegação para esse site de representação. Agora, um Webflow torna isso muito fácil e conveniente para nós, porque se você olhar para o painel Elements e rolar para baixo algumas variedades, aqui na parte inferior. Na categoria avançada, você tem um componente Navbar pré-fabricado para nós projetarmos e estilizarmos. Então, vamos arrastar isso para dentro e garantir que esteja no topo da seção de heróis. É assim mesmo. Agora vamos começar a estilizar essa barra de navegação. Agora, se você olhar para isso, como você pode ver, o néfron é seu próprio pequeno ícone. E então tem apenas um contêiner, um bloco de ramificação, um blog de links onde podemos colocar nosso logotipo, bem como um div chamado menu de navegação, que conterá nossos links de navegação. Esses títulos estão aqui. E quando também é um botão invisível. Em um tamanho de tela menor. Você pode ver que temos esse Berg que eu posso. Agora, nesta palestra, vamos estilizar a versão desktop dessa barra de navegação. Vamos começar com o topo. Agora eu quero que isso seja uma cor branca simples. Então, antes de tudo, dê a ela um estilo, uma classe, e vamos chamá-la de navegação. Em seguida, vamos mudar a cor do plano de fundo de cinza para branco. Em seguida, você selecionará o contêiner. E vamos dar a ele a classe básica de contêineres. Portanto, tem exatamente a mesma largura do site restante. A seguir, vamos dar uma olhada nesse bloco de ramificações. Agora, poderíamos, simplesmente, em uma imagem, também adicionar alguma topografia básica a ela. Se você não tem um logotipo pronto no momento, vamos fazer isso na verdade. Vamos acrescentar, na verdade, vamos usar um bloco de texto e colocá-lo na marca. Assim. Vamos chamar esse site de fluxo de trabalho. Agora, uma coisa que precisamos corrigir agora é que precisamos fazer com que ela seja realmente enviada. Então, se você selecionar o contêiner que queremos, poderíamos flexioná-lo e depois alinhar tudo para ficar centralizado. Então, 50 contêineres selecionados. Vamos dar a ela uma classe combinada chamada nav e colocá-la como Flexbox. E vamos fazer isso horizontalmente e alinhá-lo ao centro. Assim. Tudo bem, agora o que você provavelmente percebeu é que o menu Nav foi pressionado totalmente para o lado esquerdo. Agora isso é muito fácil de corrigir. Selecione o menu, vamos dar a ele um menu de navegação por classe. Basta aplicar alguma margem automática e ela será empurrada de volta para a direita, assim. Você também pode estilizar o texto desse logotipo. Vamos chamar isso de banco de logotipo. Formamos duas ferrovias. Seja ousado e aumente o tamanho até ficar feliz. 24 pixels parecem bons. Por enquanto. Tudo bem, agora temos nosso logotipo. Então, tudo está centralizado, e temos esses links de navegação aqui. Agora vamos dar uma olhada nelas. Em primeiro lugar, como você pode ver, nenhum estilo foi aplicado a ele, então nenhuma classe foi aplicada. Então, vamos mudar isso antes de fazer qualquer alteração. É chamado de nav link e aplica a classe a todos os links. Assim. Agora, se você fizer algumas alterações, já que estamos usando a mesma classe, tudo será exatamente o mesmo. Na verdade, vamos fazer isso como 18 pixels, apenas um pouco maior que V ou o texto. Agora, já que estamos acostumados, já que esses são links que queremos estilizar, faça alguns efeitos de passar o mouse sobre eles. Então, vamos fazer algumas coisas básicas. Vamos adicionar um estado básico de flutuação. no menu suspenso, vá para os estados de flutuação da classe do naftaleno e deixe-a um pouco mais leve. Vamos usar essa cor cinza. Também poderíamos aumentá-lo um pouco. Eu acho. Vamos às transformações 2D e 3D. Menos dois, talvez menos dois no eixo y do movimento. Vamos adicionar uma transição para a cama. Em uma transição ou propriedades, vamos passar de 400 milissegundos. E agora temos essas pequenas animações bonitas em nosso Netflix. Certo? Agora. É basicamente isso. No entanto, há um caminho para os elementos de navegação. Então, se você acessar as configurações do Elements e selecionar o menu de navegação, verá que temos várias novas configurações nas configurações da barra de navegação. Agora, você pode alternar o menu do celular como você pode ver, você também pode ocultá-lo. Agora, vamos dar uma olhada nisso na próxima palestra, onde vamos tornar esse celular responsivo. O que eu quero te mostrar é isso aqui. O F é uma pequena opção bacana chamada Adicionar link, que nos permitirá adicionar um novo link de navegação que nos permitirá adicionar um novo link de navegação à barra de navegação. Agora, lembre-se de que nenhuma classe foi aplicada a ela, mas precisamos aplicar essa classe. Mas a opção é sempre onde você pode, é claro, também copiar e colar quantos desses links precisar. Tudo bem, agora vamos editar esses links. Portanto, não precisamos de um link inicial porque esse será o nosso logotipo em si. Então, se você clicar no logotipo, voltaremos para a página inicial, para o topo aqui. Você quer, no entanto, recursos, que serão exibidos aqui. E então queremos um link para preços e contato. Vamos entrar o iPad. Preços. E o contato já falhou , então podemos mantê-lo como está. E é assim que você cria uma navegação básica para seu site. 18. Fazendo a navegação móvel: Tudo bem, então, na aula anterior, criamos essa barra de navegação básica, o site. Agora, precisamos torná-lo responsivo para dispositivos móveis. Então, se você for para um ponto de interrupção menor aqui, poderá ver o ícone mudar, o ícone do hambúrguer e o próprio menu desaparecer. Então, nosso local de navegação desapareceu. Mas temos esse botão aqui. Assim como você sabe, de outros sites móveis. Agora, em primeiro lugar, não acho que seja necessário. Tenha o botão de menu e a visualização do tablet. Agora, como ajustamos isso? Nas configurações do ícone do menu da barra de navegação para tablet e abaixo, você pode simplesmente arrastar o controle deslizante até o próximo ponto de interrupção. E como você pode ver agora, temos nosso menu principal visível no tamanho do tablet, mas invisível, e o ícone VFD no telefone de paisagem e abaixo. E é exatamente isso que queremos porque não temos muitos elementos e uma barra f. Isso está perfeitamente bem. Vamos mudar para o modo paisagem móvel. E vamos começar a estilizar agora. Em primeiro lugar, gases antes de querermos o ícone aqui. Portanto, a maneira mais fácil de fazer isso é simplesmente dar uma margem à esquerda da margem automática empurrá-la totalmente para a direita. Simples assim. Agora, a seguir, como estilizar isso. Porque se visualizarmos isso e você clicar no menu, agora, veremos uma demanda agora, mas não em nosso design de visualização. Então, vamos voltar às configurações da barra V f. Você pode mostrar o menu aqui usando Mostrar e apertar. E agora você pode voltar ao Gerenciador de Estilo e estilizar esse menu. Antes de tudo, precisamos alterar a cor de fundo do botão do menu. Então, vamos selecionar o elemento. E vamos mudar isso. Vamos fechá-lo. Na verdade, eu sei que podemos esconder isso assim. E vamos fechar o fundo, com a cor do fundo ventral para branco. E selecione o ícone. Agora você pode importar seu próprio ícone. Esqueça se você quiser. Acho que está em Tipografia. Sim. Você pode alterar a cor da tipografia do ícone. É um ícone SVG aqui. E mude para preto. Agora isso está resolvido. E quando precisamos trocar essa caixa cinza muito feia. Agora, essa caixa cinza é na verdade a definição do menu Nav. Agora eu quero que isso cubra toda a tela. Agora, como fazemos isso? Selecionamos o menu Nav e o valor da altura. Você pode alterar isso para 100 vh e verificar a altura da janela de visualização. Se você fizer isso, não importa qual tela você esteja vendo da janela de visualização, altura será sempre a altura total da tela da janela de visualização. Usando isso, essa medida garante que o menu cubra toda a tela. Agora vamos também mudar a cor de fundo, branca, assim. Agora, se quisermos aumentar o tamanho desses links de navegação, vamos selecionar um link de navegação e aumentar o tamanho. Agora você não precisa se preocupar com a possibilidade fazer alterações em nossa visualização de desktop. Como estamos trabalhando essencialmente com HTML e CSS, com folhas de estilo em cascata CSS C e F, as alterações serão feitas apenas neste ponto de interrupção e abaixo. Mas, como você pode ver, as mudanças são as mesmas. Se formos para um ponto de interrupção maior. Como você pode ver, ainda é o mesmo antes e sabe que uma mudança na dieta foi feita. Essa é a melhor coisa sobre CSS. Vamos abrir o menu novamente para que possamos continuar editando. Agora eu também quero centralizar esses botões. Vamos clicar em Align Center. E também poderíamos adicionar estofamento na parte superior. Mas vamos selecionar o menu de navegação e adicionar um pouco de preenchimento na parte superior, empurrá-lo um pouco para baixo. 100 pixels. Também poderíamos aumentar o espaçamento entre eles, dar um pouco de preenchimento e margem inferior. Então, eles têm cerca de 48 pixels. E agora temos um menu móvel muito bonito. Agora, se você der uma olhada. Então, como você pode ver, temos a versão desktop. Você tem a versão para tablet. Quando atingimos a versão paisagem, a versão móvel de paisagem, temos nosso ícone. E se você clicar nesse menu, desliza para baixo. E temos nossos itens de menu. O mesmo vale para a versão móvel desse tipo. E é assim que você cria um serviço, uma barra de navegação responsiva para dispositivos móveis. 19. Criando e editando componentes: Tudo bem, neste vídeo, quero mostrar um recurso muito útil do Webflow, que são os componentes. Agora, um componente é simplesmente um elemento reutilizável que você criou. Assim, você pode transformar praticamente tudo em um componente. E você pode fazer alterações nesse componente. E cada componente usado, esse mesmo componente pode ser usado várias vezes em seu site e todas as alterações feitas nele atualizarão cada componente. Portanto, é muito poderoso. Por exemplo, podemos transformar a navegação em um componente. E se adicionarmos um novo link, por exemplo, não precisamos nos preocupar com o Upload, atualizando a barra v Neff para cada página. Ele apenas é atualizado automaticamente. Criar um novo componente é muito, muito fácil. Selecionando a navegação. E quando clicamos em Criar componente em nosso painel lateral aqui em cima. E agora, à esquerda, podemos dar um nome a ele. Vamos chamar isso de navegação. Clique em negociar. E é isso. É assim que podemos criar componentes. Agora, como você pode ver, tudo fora de nossos componentes, fora da nossa barra de navegação, está escuro. Você pode, na verdade, não pode editar nada. Se você quiser voltar. Você pode ir e clicar em Voltar para a instância. E agora, como você pode ver, o contorno da nossa navegação tem essa cor verde e também esse ícone de componente. Agora, você pode, como você pode ver, não podemos realmente editar nada no momento para editar um componente. Mas se eu clicar duas vezes nele e tivermos o controle completo do design, clique nesse ícone ao lado do nome. Depois de fazermos uma alteração aqui, essa alteração será atualizada todas as páginas da web em que esse componente é usado. Um recurso muito poderoso e que economiza tempo. 20. Construindo o rodapé: Agora, falta um elemento importante em nosso site, que é o rodapé. Então, vamos direto ao assunto e criar uma seção de fotos simples para este site. Agora, vamos rolar até o fim e selecionar nossa etiqueta corporal, elemento corporal. E vamos adicionar uma seção simples. A forma como construímos essa foto será muito semelhante à forma como construímos nossas outras seções. Selecione esse seletor lateral e dê classe a ele. Você vai fazer disso uma foto branca. E você também vai adicionar v basic container e atribuí-lo à classe container. Uma coisa que eu quero mudar é com a seção selecionada. Eu quero dar a ele uma classe combinada de rodapé. E eu quero reduzir um pouco o acolchoamento. Então, vamos usar 50 na parte superior e na parte inferior. Só para não ocupar muito espaço. Agora, a seguir, vamos ver como queremos estruturar nosso pé para cima. Então, eu quero meu logotipo aqui. E então podemos ter algumas linhas, como duas ou três colunas com alguns links de navegação. Certo? Agora, a maneira como podemos construir isso é realmente muito simples. Primeiro, vamos adicionar uma grade a essa foto. E a grade veterinária terá uma linha. Mas agora vamos dar uma olhada nessas unidades de fração aqui. Então, como você pode ver, temos essas alças na grade. E se você clicar e arrastar sobre eles, verá que pode realmente ajustar a aparência dos grãos e a quantidade de espaço que cada linha ocupa. Isso nos dá muito controle de design. Agora, se você clicar em Concluído, temos um vermelho com uma seção maior à direita e uma seção menor à esquerda. Agora, vamos colocar um bloco de definição simples e chamar esse logotipo de invólucro. E um bloco inventivo. Quero colocar um bloco de marca simples, um bloco de links. Aquele aqui mesmo. E dentro desse link do blog. Ele quer ter um bloco de texto simples com nossa classe local aplicada a ele. Agora, se você estiver usando uma imagem para seu logotipo, você pode simplesmente inserir uma imagem e isso é ruim. Assim. Uma coisa que precisamos garantir é que ele esteja alinhado à direita e à esquerda em relação ao invólucro do logotipo. E certifique-se de que todos os textos estejam alinhados à esquerda. Agora temos nosso logotipo pronto. O que poderíamos fazer para adicionar um pouco mais de personalidade a ele. Poderíamos adicionar um parágrafo. Então, isso pode ser apenas um texto nos dizendo mais sobre para quem é esse site, o que você está fazendo, certo? Que serviço você costuma usar coisas assim. Nós poderíamos colocar lá. Agora eu quero aumentar a marginal na parte superior direita para dar a ela um pouco mais de espaço para respirar. Então, vamos adicionar um div. Coloque em nosso parágrafo. E eu já criei, ou já criamos uma classe para isso. Então, vamos selecionar o seletor de estilo e digitar a margem. E selecione margem, top 20, inferior 28. E isso só torna o espaço um pouco mais amplo aqui. Tudo bem. Essa é a primeira parte da foto. Agora, para algo um pouco mais complexo, vamos colocar um bloco dentro dessa grade, pegando a coluna certa. E vamos chamar isso de rede de Neff. Porque há duas maneiras de adicionar grades a um site do Webflow. Um com o elemento de grade. Um. Se houver opções de exibição no layout, você pode simplesmente clicar na primeira grade de opções. E isso nos permite transformar qualquer div em uma grade. Agora, vamos excluir essa linha e, na verdade, mantê-la em dois. Então agora temos duas grades, temos uma grade e temos outra grade dentro. No grid, parece muito complicado, mas ajudará muito quando tornarmos o site responsivo. Tudo bem, então nesta grade, você vai colocar um div. Vamos chamar isso de nav wrapper. E aqui queremos ter um pequeno título. Vamos usar H, pois esse será o site. E vamos garantir que esteja alinhado à esquerda. Assim. Vamos manter a classe V de cabeçalho e a classe combinada, de quatro anos. Vamos estilizar isso um pouco, torná-lo um pouco grande, tipo 22 pixels. Poderíamos ser uma bancada colorida e uma criança. Não seja opacidade para gostar de 70%, gosto mal. Além disso, o que eu quero fazer é remover a margem do título para que ele se alinhe perfeitamente com este. E agora está perfeitamente alinhado na parte superior. E agora o que vamos fazer é criar uma nova div dentro do néfron. Agora, como você pode ver, trabalharemos muito com vários blocos div diferentes apenas para encerrar nosso conteúdo. Portanto, temos um pouco mais de controle sobre tudo. Você vai chamar isso de bloco de definição. O que são Neff? E dentro desse bloco de disco, você vai colocar alguns links de texto. E esses serão nossos itens de navegação. Este será o lar. Vamos dar uma aula sobre isso. Poderíamos simplesmente continuar assim. Na verdade, vamos dar a ele um link de navegação de classe. Serão usados para a mesma aula que aqui em cima. E você vai dar a ela a foto combinada da aula. Porque na visualização móvel, não queremos que seja muito grande, então vamos cuidar disso mais tarde. Mas não queremos isso. Eu mudo da foto para entrar em vigor na navegação na parte superior. Então, vamos fazer isso dessa maneira. E então você vai simplesmente copiar e colar esse link de navegação. Algumas vezes onde temos serviços. Então, temos a ascensão e também temos contato. Agora, você vê imediatamente que algo não está certo aqui. Precisamos mudar a opção de exibição. E a maneira mais fácil é ir até Layout, Lex it e vertical. Esse era o objeto errado. Não queremos que isso esteja no néfron. E só para estar no fóton F. Queremos flexionar essa linha vertical para a direita, desse jeito. E no fóton F13 o flexionou. Você também pode adicionar um dente aberto. 18 pixels. Isso é um pouco demais. Vamos usar 12 pixels entre o elemento VCE. Isso é até um pouco demais. Vamos com oito. Sim, isso parece bom. E como você pode ver, já que usamos a classe do naftaleno, todas as animações, cada óvulo. Tudo bem, a seguir, vamos simplesmente copiar o néfron e colá-lo. E agora temos uma segunda linha para itens de navegação. É chamado de serviços. Dependendo da aparência do seu site, é claro que você pode completamente a foto de uma maneira diferente. Isso será design. Isso será desenvolvimento e isso será publicação. E você pode excluir o último. E isso é basicamente o suficiente para o nosso fóton. Uma coisa que eu realmente quero mudar linha é o alinhamento dessa linha. Acho que ficaria melhor se estivesse realmente alinhado a esse lado. Vamos ver, como podemos consertar isso? Assim? Você pode simplesmente alinhá-la à direita, selecionar a grade Neff e alinhá-la à direita. Porque agora está realmente alinhado ao nosso contêiner. Parece muito mais limpo. Mas também poderíamos aplicar um parágrafo mais esse parágrafo aqui. E talvez 350 pixels ficassem bem. Largura máxima de 350 pixels. Sim. Não ocupa todo o espaço aqui. É só um pouco mais limpo. Agora. É isso por enquanto. Essa será a foto. Portanto, é muito básico. Nós podemos fazer muito mais disso, é claro. Mas acho que parece muito decente até agora. Uma última coisa que eu quero fazer é transformá-lo em um componente. Então clique em Criar componente. E agora, sempre que precisarmos usar isso novamente, temos um componente disso. 21. Tornando nosso site responsivo: Tudo bem, agora é hora de algo extremamente importante em nossos dias. Cada site precisa ser responsivo e ter uma boa aparência em todos os tamanhos de tela. No momento, parece bastante decente em desktops. Mas assim que mudamos para um tamanho menor, como o modo tablet, você pode ver que isso não parece muito bom. Não deveria parecer assim. Agora, vamos realmente corrigir isso. Agora, a melhor coisa sobre CSS está molhada. Depois de selecionar esse ponto de interrupção, fazemos alterações de estilo em todos os nossos elementos. Essas mudanças só serão levadas até os pontos de interrupção mais baixos. Eles não afetam os pontos de interrupção mais altos. Pontos de interrupção que são maiores do que eles mesmos. Se você fizer algumas alterações no modo tablet, a será transferido para as visualizações móveis, mas não para as visualizações de desktop. Vamos começar a estilizar nossos elementos. Agora. Primeiro de tudo, vamos começar com a seção Serviços. Agora, um layout de três colunas não parece bom neste shopping do tamanho de uma tela. E como você pode ver, ele também não tem espaço para respirar. Aqui mesmo. Agora, como podemos mudar de onde? É super simples? Primeiro de tudo, vamos começar com essa sala de respiração. Selecione nosso contêiner e simplesmente colocamos um pouco de preenchimento nos dois lados, como dez pixels, talvez 2020 pixels nos dois lados. E agora, como você pode ver, todos os contêineres foram atualizados e tudo mais, isso é um pouco mais de espaço para respirar, parece muito mais limpo. Nenhum elemento está tocando as bordas como queríamos. Em seguida, vamos mudar essa grade aqui em que servimos como Gretchen. Então, como eu disse antes, um layout de coluna gratuito, acho que não vai relaxar muito bem. Então, vamos mudar isso. Agora, para editar uma grade, você pode clicar no botão Editar grade ou no ícone vermelho aqui no canto. E a melhor maneira de fazer isso, acho que vamos adicionar outra linha. E quando excluímos um elemento aqui, vet automaticamente empurra o objeto para a segunda linha. E aumenta a quantidade de espaço que os elementos V têm. Se você clicar em Concluído. Agora temos esse layout de duas colunas. E a placa de firmware restante é pressionada para baixo. Acho que isso parece muito bom por enquanto. Talvez pudéssemos até mesmo torná-lo um layout de uma coluna. Então, quando realmente atribuímos a isso uma largura máxima, selecione a placa de serviço, dê a ela uma largura máxima de 350. Talvez um pouco mais de 450 pixels assim. E quando precisamos empurrar isso para o centro, agora como fazemos isso? Selecionamos a grade de serviços e a alinhamos para que ela fique centralizada aqui. Agora, como você pode ver, parece muito mais limpo do que antes. Embora tenhamos muito espaço para respirar em todos esses sites, você não tem o problema de ser assimétrico. Se você tiver apenas duas colunas, haverá espaço vazio aqui. Nós não queremos isso. Outra vantagem disso é que , se você optar por um tamanho de tela menor, como você pode ver, ela ainda parece muito boa e simplesmente funciona. Tudo bem, vamos voltar à visualização do tablet. Role para baixo e vamos adicionar seções V. Agora, a melhor maneira de fazer isso, eu acho, é simplesmente editar a grade, adicionar outra linha a ela e excluir uma linha. E como você pode ver, agora temos esse belo layout de uma coluna. Agora, mais uma coisa que podemos fazer é separar esses dois elementos um pouco mais um do outro. Então, vamos voltar às nossas configurações de grade. E embora possamos digitar um valor definido aqui, você também pode perguntar sobre o espaço entre as duas linhas. Clique e arraste. Para aumentar o espaçamento. Vamos usar 42. E isso só dá a tudo um pouco mais de espaço para respirar. Parece um pouco melhor. Acho que, para a visualização do tablet mantê-la quero mantê-la alinhada à esquerda por enquanto. Talvez possamos mudar isso mais tarde. O que também queremos fazer é remover o preenchimento da parte superior. Acho que parece muito melhor. Se definirmos o preenchimento como zero em nosso pacote de texto de serviço. Simples assim. Agora, se você rolar até aqui, acho que queremos fazer o mesmo aqui. Sim. Então, vamos ver este resumo do texto do serviço. Isso não tem a classe de combinação correta aplicada, então vamos aumentar para zero aqui também. E como você pode ver, como editamos a grade em si, a classe, a distância entre as colunas entre os diferimentos está em cada seção. Agora, isso parece perfeitamente bom. Agora, vamos dar uma olhada nesta seção de preços. Agora, como você pode ver, isso não parece nada bom. Por quê? Sou fã do layout de uma coluna. É muito necessário ajustar os custos de preços em si. Tudo já está alinhado à esquerda, alinhado ao centro. Só precisamos aumentar o tamanho disso. Portanto, selecione seu cartão de preços e vá para o menu de tamanhos, para suas opções de tamanho. E vamos usar uma largura máxima de 450 pixels. Você também precisa ajustar o lance mínimo. Definiremos a largura mínima em V, lance máximo entre esses dois elementos. Agora, tudo tem um pouco mais de espaço para respirar. O que também podemos fazer é aumentar o preenchimento na parte superior e inferior. Digamos que a bandeira f, um acolchoamento inferior de talvez, se mais como 48, E possa mantê-la em 18 na parte superior, acho que parece bem decente. E se aumentarmos o tamanho, tudo ficará perfeitamente bem. Sim, eu gosto dessa seção de preços. Agora, vamos dar uma olhada nesse formulário. Na seção de contato. Acho que podemos deixar como está. É muito bom. Parece que, essa visão responsiva do tablet Avi, podemos mantê-la como está. Agora, uma coisa que resta é o rodapé. Agora vamos entrar nos componentes. Então clique em Editar componente. E agora vamos ver por que queríamos nos esforçar. Em primeiro lugar, quero que esses dois fiquem próximos um do outro na visualização do tablet. Mas eu quero esse bloco no topo. Então selecione a grade que criamos e vamos para suas opções. Você vai adicionar outra linha. E também vamos excluir v é 0,5 fração rho dele, a coluna dele. E agora, se você clicar em Concluído, verá que essa grade ainda está na parte inferior. E esse rapper com logotipo aqui está agora no topo. Agora vamos configurá-los. Portanto, selecione a borracha do registrador e simplesmente clique em justificar para ficar no centro. E faça o mesmo. Suas opções de tipografia e clique na linha para ficar no centro. Apenas o texto do Toby está alinhado ao centro. Agora, o que resta é que precisamos ir para a grade v Neff. E agora está alinhado à direita. Queremos alinhá-lo ao centro. Simples assim. Mais uma coisa que queremos é realmente entrar no pé e no F Now e alinhá-lo ao centro também. Então, vamos às opções de epigrafia. Acho que precisamos editar o ano. Você precisa editar o link de navegação em. Vamos ver para onde é preciso V? Sim, temos um F e o alinhamos ao centro. Assim. E, claro, faça o mesmo. Estamos indo para H? Assim mesmo? Agora, tudo está bem alinhado ao centro. Agora, claro, um muco veterinário, isso. Ainda não terminei. Embora a maior parte do site pareça muito boa, mesmo em telas muito pequenas, temos algumas coisas que precisamos ajustar. Então, aqui, por exemplo você poderia, na verdade, sim, nós podemos fazer isso na visualização do tablet. O espaçamento entre essas linhas é um pouco demais para mim. Título principal seletivo enquanto estiver no ponto de interrupção do tablet. E acesse suas opções de altura na topografia V. E vamos reduzir a altura da linha. Tipo 1,21. Parece muito decente. Vamos verificar isso nos outros pontos de interrupção. Sim, isso parece bom. Embora quanto menor a tela fique, acho que se nosso rumo precisa ser um pouco menor, é um pouco demais. Então, na visualização móvel da paisagem. Faça com que estejamos adicionando um tamanho como talvez 48. Sim, isso parece muito **** bom. Vamos verificar isso no menor tamanho. Estou feliz com isso. Agora, uma coisa que eu quero mudar agora, essas patentes para Berg, em seguida, bem próximas uma da outra. No entanto, no modo paisagem, você precisa ajustá-los na visualização móvel real, eu não quero que eles fiquem juntos desse jeito. Vamos até nossa embalagem padrão de heróis. Em nosso ponto de interrupção móvel. Vamos ver. Justifique-os. Mude a direção da flexbox para vertical e alinhe-a para que fique centralizada desse jeito. Vamos ver a aparência do resto do site. Acho que quero, na verdade, acho que eles também ficam muito bem em um tamanho menor como esse. O preço também funciona. A única coisa que realmente precisamos ajustar é o rodapé. Então, vamos voltar para a V0. Clique em Editar componente na sua foto. E agora uma coisa. Em primeiro lugar, precisamos ter certeza de que nós, a Netflix, permanecemos os mesmos. Então, 18 pixels, 1,5 e m. No momento, ele obtém as informações do valor Knaflic, que é do nosso menu móvel que criamos anteriormente. Mas, como aplicamos a classe de rodapé, podemos alterar esses valores novamente para 18. E eu também quero remover a remoção , talvez como fazer com que a margem inferior seja seis. Isso parece muito melhor. Acho que, para o cenário móvel, podemos mantê-lo em duas colunas. Versão imóvel, no entanto, eu quero ser ótimo. Não são duas colunas, mas 22 linhas, desse jeito. Também queremos aumentar o que mantivemos entre as duas rotas para cerca de 36 pixels. Então, agora, se você visualizá-lo, ele ficará bem decente em todos os tamanhos de tela. E é assim que você torna seus sites responsivos. Como você pode ver, é um processo bastante simples. Você simplesmente percorreria suas seções. Agora, você pode até mesmo fazer isso no final do seu projeto. Ou você pode fazer isso no final de cada seção e ajustar ao longo do caminho. Vamos fazer tudo de acordo com sua preferência. 22. Adicionando animações básicas - a guia de interações: Tudo bem, agora que terminamos de criar nosso site, vamos pré-visualizá-lo. Você pode ver que parece bastante decente, mas falta algo. E esse algo são algumas animações básicas. Depois de rolar para baixo, queremos que essa seção desapareça suavemente da parte inferior. Só para que seja um pouco mais interativo. Agora, como fazemos isso? Agora, quando mostrei gerenciador de estilo e a interface, falei rapidamente sobre o menu de interações, que pode ser encontrado aqui no seu gerenciador de estilo. Agora, usando vet no menu Ações, podemos criar facilmente algumas animações básicas ou animações muito complexas para cada uma de nossas seções, para cada um de nossos elementos. Agora, do jeito que eu gosto de fazer isso, pelo menos neste exemplo, certifique-se de selecionar seu contêiner. Agora, vamos tornar isso realmente básico, então não vamos gastar muito tempo nessas animações com vários slides e efeitos e coisas do tipo. O que queremos é que isso desapareça lentamente. Então, antes de tudo, precisamos pensar o que exatamente queremos animar? Agora, no nosso caso, queremos que o texto e os botões desapareçam lentamente. Não queremos desaparecer nem toda a seção. Então, selecione nosso contêiner. E então, em nossos elementos, em nosso painel de ações, vá para o acionador do elemento e clique no ícone de adição. E aqui temos alguns gatilhos. Acione nossas animações. Isso pode ser um clique do mouse, podem ser efeitos de passar o mouse. Para a maioria de nós. O que queremos é navegar até a visualização. Assim que o elemento estiver em nossa janela de visualização, a animação começará. Agora, quando clicamos em rolar para ver, temos esse novo menu aqui. Em primeiro lugar, podemos selecionar a ação. Então, o que deve acontecer quando o elemento é exibido? Agora, como você pode ver, temos várias animações pré-fabricadas para escolher, mas também podemos criar animações personalizadas. Agora, para fins deste curso, vamos usar as animações pré-fabricadas. Como queremos apenas abordar o básico, leitura de animações personalizadas pode ser extremamente demorada e um pouco mais complicada e complexa. Tudo bem, então queremos que isso deslize de baixo para baixo. Então, neste menu suspenso, vamos escolher a pequena animação. E agora temos várias opções diferentes. Você pode fazê-lo deslizar para dentro, nós podemos fazê-lo deslizar para fora. E como você pode ver, também temos esse botão de pré-visualização. Então, agora está configurado para a esquerda. E se você visualizá-lo, ele desliza pela esquerda. Agora queríamos deslizar de baixo para baixo. Então, você escolherá este menu suspenso de baixo. Vamos pré-visualizá-lo. Vamos adicionar um pouco de atraso a isso. Então, cerca de 200 milissegundos. Isso parece muito melhor. Agora, também podemos adicionar uma animação quando ela for removida de você. Agora, isso não é algo que queremos nesse caso, mas a opção está sempre lá. E, claro, também podemos limitar a animação v a certos pontos de interrupção. Agora, abaixo disso, temos os botões de elemento e classe. Agora podemos escolher o que a animação deve começar apenas no elemento ou na classe inteira? Portanto, todas as aulas com classes de contêineres de óleo farão que essa animação inove. Também temos esse menu suspenso. E como você pode ver, temos nossas duas classes. Então contêiner, entidade, classe branca. Se você clicar nele, poderá selecionar a classe de contêiner simples. Agora, o que isso faz é cada elemento com a classe de contêiner aplicada a ele. Teremos esse slide em animação. Vamos fechá-lo. Agora. Se quiser editar a animação, basta selecionar o elemento com a animação. Para clicar nesta animação aqui. E agora você tem todas as suas opções de edição. Você também pode ver se um elemento é animado por esse ícone verde no canto superior direito. Em seu navegador na lateral. Agora vamos pré-visualizar nosso site. Como você pode ver. Os elementos promovem esse crescimento. E quando rolamos para baixo, já que todos esses contêineres USB da mesma classe de contêineres, eles desaparecem lentamente. E isso só dá a todo o site uma sensação um pouco mais completa. Agora, um visto, apenas o básico das interações. Se você realmente passa muito tempo, pode criar algumas interações incríveis e exclusivas para o seu site. Agora, uma coisa que você deve ter notado é que a navegação e nosso rodapé também desaparecem. Agora isso não é algo que eu quero. Então, o que vamos fazer é que a maneira mais rápida de fazer isso é simplesmente duplicar a classe do contêiner para nossa navegação, seguir nosso rodapé e alterar seu nome. Então, vamos clicar em sua navegação e clicar em Editar componente. E procure a classe de contêiner. E o que vamos fazer é simplesmente clicar nesse menu suspenso e clicar em Duplicar classe. E vamos chamar isso de contêiner de navegação. Assim mesmo. Agora, se você visualizá-lo, como você pode ver, a navegação não deslizará para dentro. Vamos repetir o mesmo processo para nosso componente de rodapé, contêiner B. E vamos dar a ele o mesmo contêiner de navegação de classe, como aquela instância do EC2. E vamos ver. Como você pode ver, ele não desaparece mais. Exatamente como queríamos. E é assim que você cria algumas animações básicas para o seu site. Agora eu recomendo que você apenas brinque com essas opções diferentes. Como realmente temos, não há limite para o que podemos fazer usando as interações. Então, sempre que você tiver uma ideia para uma animação que você quer, experimente e tente construí-la. 23. Vinculando nossos botões para diferentes páginas e seções: Tudo bem, então nesta palestra, vamos falar sobre botões de vinculação e nossos links. Agora que terminamos, praticamente terminamos nosso site. Temos a animação pronta e está tudo pronto. É responsivo para dispositivos móveis. A única coisa que resta é realmente fazer esses botões sinalizarem. Como você pode ver, se você clicar em qualquer um desses links dos padrões dos Andes. Nada acontece porque ainda não dissemos o que deveria acontecer. Agora, o que realmente queremos alcançar? Eu quero, se eu clicar no botão de recurso, eu queria que a página rolasse para ser seção de Recursos. E o mesmo acontece com preços e contatos. E se esses dois botões estiverem aqui. Agora, vamos começar com a seção de heróis. Então, se eu quiser, se eu clicar no botão de entrar em contato, quero que o padrão me leve até o formulário de contato que criamos. Agora, como podemos vincular isso? Então, se você selecionar o botão e acessar as configurações dos elementos, aqui temos as configurações do link. Podemos vincular o padrão a um URL específico. Podemos vinculá-lo a uma página em nosso site. Você pode vinculá-lo a uma seção que é o que queremos. E também podemos dizer que você deseja abrir um e-mail a partir de um número de telefone ou até mesmo de um download de arquivo. Agora, queremos criar um link para uma seção específica. Então, vamos até a guia da seção e escolher uma seção da página. Agora, como você pode ver, temos apenas seções de e-mail e essas seções de e-mail e elas vêm do nosso formulário de contato. Eles são pré-fabricados na cama. Então, antes de tudo, precisamos dizer ao Webflow o que é cada seção. Precisamos dar a eles a suposta ideia. Portanto, as poucas seções de heróis selecionadas, por exemplo, nas configurações dos elementos. A primeira opção é com o campo ID para na página Lincoln. E aqui podemos dar um nome a essa seção. Vamos chamá-lo de herói. E agora essa seção de heróis será chamada de heroína. Se você acessar nosso botão e escolhermos uma seção de página, temos a seção de heróis aqui. Tudo bem, agora vamos repetir esse processo e dar uma ideia a todas as nossas seções. Portanto, essa seria a seção de recursos. Não precisa dar essa para N. Do. Queremos retornar à nossa seção de preços? E também nossa seção de contato. Assim. Agora, mais uma coisa que queremos é que, se você clicar no logotipo, queremos rolar até o topo. Portanto, também precisamos fornecer nossa navegação e identificação. Então, vamos editar esse componente e dar uma ideia. Vamos chamá-lo de navegação, desse jeito. Tudo bem, agora vamos começar a vincular essas seções. Então, vamos começar com D, entrar nas configurações do botão de toque e dos elementos MP. Seção Lincoln. E vamos procurar o contato. E agora, com o selecionado, a seção de contato do link. Se você visualizá-lo e clicarmos neste botão Obter e tocar. Como você pode ver, rolamos suavemente até o formulário de contato que criamos. E assim, podemos unir todas essas seções. Agora, vamos repetir esse processo para os links restantes, como o botão de preços ou para você na vinculação de seções. E procure a seção de preços. Na verdade, também poderíamos ligá-los. Vamos fornecer essas seções e identificações. Então, vamos chamar isso de design. Também podemos vincular esses botões. Isso será desenvolvimento e isso será publicação. Simples assim. E agora selecione o link de design V. E escolha a seção de design V. O link de desenvolvimento será vinculado à seção de desenvolvimento. E o link publicado será vinculado à seção de filmes publicados, na parte inferior. Tudo bem. Agora temos alguns botões de mercado e de toque. E podemos vincular isso à nossa seção de contato. Então, agora não vamos vincular esses botões. Vamos trabalhar em nossa navegação. Então edite o componente, selecione o link de navegação dos recursos. Queremos que isso seja vinculado a uma seção. Portanto, neste caso, você acessa as configurações do Knaflic e, em Tipo, basta selecionar seção e escolher uma seção da página que será exibida. Vamos fazer o mesmo com o tipo de entrada de preços do URL externo para a seção. E vá e vincule-o à seção de preços. E o mesmo acontece com o contato. Assim. Agora também queremos vincular esse logotipo. Selecione o bloco de marca em seu navegador em um blog de links, ou seja, onde podemos conectar um link a ele. Aqui nas configurações da marca, tipo de entrada da seção URL externa. E vamos definir isso para Neff. Depois de clicarmos nesse botão, ficaremos automaticamente desse lado. Na verdade, poderia fazer isso e simplesmente vinculá-lo a Paige. Paige está em casa. Então, se você clicar nele, ele recarregará a página e nos levará até a página inicial. E agora vamos para o componente de edição de rodapé. E vamos vincular os links de navegação também. Desta vez, o link da página inicial será a seção Neff. Portanto, na parte superior, os serviços serão vinculados à seção Serviços, à seção de recursos. É assim que o chamamos, elevando Foucault a preços e contatos. Vamos para a seção de contato. Agora, vamos vincular esses links de serviços também. Então, um design, vamos ser a seção de sinais, desenvolvimento. Vamos para a seção de desenvolvimento e publicação vai para a seção de publicação. Agora, é claro, precisamos editar nosso bloco de links a partir do logotipo, da nossa foto. E vamos criar um link para a página. Simples assim. Tudo bem, agora vamos ver se tudo está funcionando bem. Você pode fazer a seção de preços. Isso nos leva ao preço. Você clica em Entrar em contato. Você desce até aqui. Se você acessar nossos links de rodapé e clicar em Início, você estará no topo. E nossos links de navegação também devem funcionar. Então, vamos para a seção de recursos. Sim, tudo está bem interligado agora, é assim que você vincula seus botões e todos os seus links e reúne seu site. 24. Publicando o site: Tudo bem, então, nesta palestra final, faremos alguns ajustes em nosso design primeiro. E depois falaremos sobre a publicação do site. Oh, está ao vivo e disponível para todos. Agora, primeiro de tudo, vamos acessar este site e ver algumas das coisas que talvez queiramos mudar. Por exemplo, nesta seção de heróis, algo que me incomodou desde o início é o espaçamento entre esses elementos. Eu quero fazer um pouco de musgo, adicionar um pouco mais de espaçamento entre o parágrafo e esses dois botões e também reduzir o espaçamento entre o título e o parágrafo. Agora, primeiro de tudo, vamos selecionar o título principal. E usamos a margem até zero. Na parte inferior, margem para zero, assim. E a seguir, vamos selecionar a classe de embalagem do botão herói e aplicar uma margem superior a ela. Talvez 24, 24 pixels pareçam perfeitamente bons. A seguir, mais uma coisa que queremos mudar é a distância entre essas duas colunas. Então selecione você para quadrar. E a razão pela qual estou fazendo isso na seção branca, porque temos uma visão um pouco melhor de quão próximos eles estão realmente juntos. Então selecione sua grade e aumente um pouco o espaçamento. Mas dois pixels parecem bons. Sim, parece muito bom. E acho que isso é tudo para os retoques finais que eu queria fazer. E agora vamos falar sobre a publicação de um site de negócios. Então você tem esse botão Publicar aqui. E se você clicar nele, verá que temos esse domínio temporário, esse subdomínio, mas podemos publicar nosso site no. Então, agora é o projeto Skillshare e esse ponto numérico Webflow dot io. Agora podemos publicar este site no domínio veterinário e ele estará disponível na Internet e todos poderão acessá-lo. Ele também pode conectar um domínio personalizado a ele. No entanto, isso só é possível com um plano de site. Portanto, se você quiser ficar livre, se não quiser pagar pela hospedagem ou se for apenas um projeto prático, não poderá conectar um cliente para gerenciá-lo. Agora, para publicar o projeto nesse domínio temporário, basta clicar em publicar nos domínios selecionados. Agora vamos esperar um pouco enquanto está sendo publicado. E agora, como você pode ver, publicado com sucesso. Agora, se você clicar aqui, você pode abrir o projeto nesse domínio. E como você pode ver, tudo está funcionando perfeitamente bem. Exatamente como queríamos. Agora, a melhor coisa sobre o Webflow é que podemos fazer mudanças muito rápidas. E uma vez que o publicamos, ele é realmente completo, ele é atualizado de forma incrivelmente rápida. Então, digamos que queremos mudar a cor desse título. Selecione o título principal, vá para a guia Cor. E vamos embora. Se essa cor azul clara, não parece boa, mas tudo é apenas para demonstração. Volte para publicar, publicar e selecionar os domínios. Agora, vamos voltar ao nosso projeto e atualizar o site. Como você pode ver, a mudança já está ativa. Vamos voltar a todo esse projeto de fluxo. Mova essa alteração e publique-a em tamanho pequeno para se livrar dessa cor azul. Tudo bem? Agora, se você quiser conectar um cliente para fazer isso, o que você precisa fazer é acessar as configurações do seu site. Então clique neste menu, configurações do site. E então temos terras e faturamento. E aqui temos todos os diferentes planos do site. Agora, como você pode ver no lado da inicialização. Então, ganhamos dólares por mês com a versão gratuita. Temos o domínio Webflow dot io. Agora, uma vez que você vá, começando com o básico por $14 por mês, se Bill, idealmente, tiver acesso a um domínio personalizado e poderá conectar um domínio personalizado a ele. Agora, uma vez que você, se você seguir esse caminho, se quiser criar seu próprio blog ou seu próprio site pessoal, existem algumas maneiras de conectar um domínio. A maneira mais fácil é fazer isso por meio do Webflow. Então, se você clicar em publicar, você terá algumas opções para um domínio personalizado aqui. E você pode comprar um domínio diretamente por meio do fluxo de representantes usando os domínios do Google. Sua configuração é incrivelmente rápida. Ou seu tipo no domínio que você comprou em outro lugar. E então você será como uma integração. Dependendo da sua hospedagem ou de onde você comprou, suas etapas principais serão um pouco diferentes. Não é nada difícil. Na verdade, é incrivelmente simples. Agora, para este site que criamos, você vai ficar com o domínio backflow dot io. E é assim que publicamos nosso site. Agora, mais uma coisa que eu quero mostrar a vocês está volta no painel do designer. Nós projetamos. Também temos o botão Compartilhar, que nos permite compartilhar uma opção de pensar somente para leitura. Temos esse novo link, mas podemos enviar para nossos colegas de trabalho que são nossos clientes. E isso lhes dará essa visão de editor. E poderemos fazer alterações neste site. No entanto, eles não serão salvos. Então, logo após a abertura do editor de fluxo de eventos, eles podem inspecionar todos os diferentes elementos e coisas assim. Fora, destruindo qualquer coisa em coisas de mudança provocadas pelo homem. Então, esses são os links somente para leitura. Então, talvez você precise de ajuda com alguma coisa. Você pode fornecer um link somente para grade e permitir que alguém dê uma olhada em seu projeto. E talvez você possa encontrar a flecha dessa forma. Isso também é muito importante. 25. Conclusão: Tudo bem, agora que você criou seu primeiro site no Webflow e chegou ao final desta aula. Agora, o que vem a seguir? Bem, eu recomendo fortemente que você brinque com o Webflow e experimente diferentes layouts. E você está simplesmente trabalhando em vários projetos diferentes para se acostumar mais a ser o editor de fluxo de trabalho e a criar sites. Agora, se você tiver alguma dúvida, restar restaurantes, basta me enviar uma mensagem ou perguntar na seção de perguntas frequentes. E eu voltarei para você o mais rápido possível e tentarei ajudá-lo. Com isso. Agradeço por assistir esta aula e nos vemos na próxima vez.