Bootcamp completo de Webflow: design no Figma, desenvolvimento e trabalho freelance

1. Introdução: Bem-vindo ao bootcamp The Complete Webflow. Você já quis construir sites modernos, mas não sabia como codificar? Deseja converter seu web design em um site totalmente responsivo sem código? Oi, eu sou [inaudível] e sou designer de UX. Eu também ensino design UI UX e desenvolvimento web na Universidade de Economia e Ciências Humanas em Varsóvia. Neste curso, vou mostrar-lhe como você pode converter qualquer design em um site totalmente funcional sem codificação. Sim, ouviste bem? Sem escrever uma única linha de código. Se você não tem experiência de desenvolvimento anterior, não se preocupe, porque este curso abrange tudo o que você precisa saber. Primeiro, vamos mergulhar nos conceitos básicos de web design e desenvolvimento web, e então vamos entrar em Webflow. Webflow é uma ferramenta poderosa que permite que você construa sites modernos completamente visualmente sem código. Ele tem sido usado por empresas famosas como Dell, Upwork, Zendesk e muito mais. Vamos passar por elementos de Webflows, estilo, animações, interações e muito mais. Depois de aprender os conceitos básicos do Webflow, começaremos a construir um site completo para uma agência de design a partir do zero. Você aprenderá a converter seu design Figma em um site totalmente responsivo com animações complexas e interações que funcionam melhor em qualquer dispositivo, não importa se é um celular, tablet ou computador. Em seguida, vou compartilhar algumas dicas e truques avançados para ajudá-lo a aumentar o nível suas habilidades de web design e se tornar um desenvolvedor web de classe mundial. Na última parte deste curso, vou ensiná-lo a administrar seu próprio negócio de web design como freelancer. Você aprenderá como obter seu primeiro cliente, como avaliar seu trabalho, como preparar grandes propostas e muito mais. Este curso é destinado a pessoas que são completamente novas no mundo do desenvolvimento web. Se você é um iniciante completo ou um designer de UI UX que quer construir sites incríveis sem código, este curso é para você. Se você está pronto para se tornar um desenvolvedor sem código e criar sites impressionantes em pouco tempo, eu vou vê-lo na sala de aula. 2. Introdução ao webflow: O que é o Webflow? Bem, Webflow é uma ferramenta moderna e poderosa que permite criar sites de design profissionais e personalizados visualmente sem código. Não me entenda mal. Não é outro construtor de sites baseado em modelos, como Wix e Squarespace, que limita sua criatividade em grande medida. Na verdade, é uma ferramenta incrivelmente poderosa que permite codificar visualmente. Sim, você me ouviu bem. Com o Webflow, podemos realmente desenvolver sites personalizados visualmente. Ele não vem com todas as limitações desses sites baseados em modelos. Quando se trata de desenvolvimento web, há uma grande variedade de maneiras de desenvolver um site. Podemos construir um site escrevendo código personalizado, quero dizer HTML, CSS e JavaScript, podemos usar plataformas baseadas em modelos como Wix, Squarespace e WordPress, ou podemos usar Webflow. Se você não sabe como eles diferem um do outro, não se preocupe, deixe-me elaborar mais sobre isso. A primeira opção requer saber como codificar. Você precisa aprender HTML, CSS e JavaScript para criar um site. A segunda opção não requer codificação, e oferece alguns modelos pré-construídos para trabalhar. Esta opção é adequada para quem quer construir um site simples rapidamente, mas o trade-off é a limitação que ele vem com. Por último, mas não menos importante, você pode usar o Webflow para realmente desenvolver um site do zero sem escrever uma única linha de código, e o mais importante, sem quaisquer limitações. Mas como isso é possível? Bem, quando você está usando o Webflow, você está codificando um site do zero, mas visualmente. É por isso que o Webflow permite que você crie sites profissionais e personalizados sem quaisquer limitações. 3. Meio de webflow: Ei, neste vídeo, vamos falar sobre o ambiente do Webflow. Vou mostrar-lhe como você pode se registrar e como você pode fazer login, qual plano você deve usar, e também como toda a interface parece. Sem mais delongas, vamos começar. Em primeiro lugar, para trabalhar com o Webflow, você precisa se registrar. Se você clicar no botão “Começar” na parte superior aqui, você pode fazer login com sua conta do Gmail ou se registrar com seu e-mail. É totalmente com você. Depois de entrar, você será redirecionado para o painel. Para usar o Webflow, você pode usar diferentes opções. Você pode usar a conta gratuita ou você pode usar um de seus planos. Qual é a diferença? Deixe-me mostrar-lhe qual plano você precisa para prosseguir com as pontuações. Basicamente, o Webflow tem planos de site e planos de conta. Vamos mergulhar nos detalhes mais tarde. Mas, por enquanto, você precisa saber que o Webflow oferece três planos de conta diferentes. O iniciante, que é gratuito, lite, que é de US $16 por mês, e Pro, que é de US $35 por mês. Para as pontuações, você precisa usar um plano gratuito. O plano inicial, você pode criar até dois projetos. Existem algumas limitações, mas é perfeito para fins educacionais e para você se acostumar com a ferramenta e a prática. Mais tarde, quando você quiser criar projetos para seus clientes, você pode atualizar para o plano lite ou o plano pro. Vamos falar sobre isso mais tarde. Mas, por enquanto, basta registrar e usar uma conta gratuita. Uma vez registrado, você será redirecionado para esta página. Este é o painel. Você pode pressionar o botão “Novo projeto” e você verá esta página. Existem alguns modelos gratuitos que você pode usar e há também alguns modelos pagos. No entanto, para este curso, não vamos usar nenhum desses modelos porque vamos aprender a construir um site do zero. Precisamos sempre criar um site em branco. Você só precisa selecionar esta opção, a primeira. Aqui você pode especificar o nome do seu projeto. Por padrão, ele fornece um nome padrão. No entanto, você também pode especificar um nome preciso para o seu projeto. Vamos chamá-lo de novo. Vou tocar em “Criar Projeto”. Lá vamos nós. Aqui está o designer. Na verdade, podemos dividir toda a interface em diferentes partes principais. No lado esquerdo, você pode ver que há a barra de ferramentas. Temos opções diferentes. Então temos o navegador. Neste momento, o navegador está selecionado. Temos a opção add que inclui alguns elementos sobre os quais falaremos mais tarde. Nós temos símbolos, temos novamente navegador, eu já mostrei. Temos páginas, temos coleções CMS, temos e-commerce, e finalmente temos ativos. Por último, mas não menos importante, temos configurações. No topo, temos diferentes opções. Estes são os nossos pontos de interrupção que vamos falar mais tarde. Mas como você pode ver, temos desktop, temos tablet, temos paisagem móvel, e temos retrato móvel. Basicamente, isso determina a dimensão da nossa tela. Do lado direito aqui, você pode ver que temos diferentes opções. Temos o botão de publicação, que é tão importante. Temos o botão de compartilhamento de projeto, e temos um código de exportação. No lado direito, temos o painel de estilo. Temos outras configurações, temos o gerenciador de estilo, e temos a guia de interações. Nós vamos falar sobre cada uma dessas guias especificamente em detalhes mais tarde. Mas, por enquanto, você só precisa saber como é a interface. Bem no meio, temos a tela. Este é basicamente o lugar onde nós projetamos nosso site e construímos nosso site. É uma tela vazia. Como você pode ver, desde que eu selecionei este elemento corpo aqui, você pode ver que o painel de estilo tem algumas propriedades agora. Estas são as propriedades CSS que podemos modificar e usar para nossos projetos. Cada projeto tem uma configuração de projeto. Se você for até o canto superior esquerdo, poderá ver este logotipo W ou Webflow. Se você passar o mouse sobre este logotipo, você verá este botão de menu de hambúrguer. Se eu clicar nisso, temos três opções. Temos painel de instrumentos. Se você clicar nisso, você será redirecionado para o painel. Temos configurações do projeto e temos editor. Por enquanto, não vamos falar editor porque temos um vídeo específico para isso. Mas agora, vou mostrar a vocês como as configurações do projeto se parecem. Se eu clicar nisso, seremos redirecionados para as configurações do projeto. Aqui temos opções diferentes. Temos geral, podemos especificar o nome do projeto. Temos diferentes opções aqui que não vamos falar agora. Temos hospedagem, temos editor, temos faturamento, SEO, formulários, fundos, backups, integrações e código personalizado. Assim que começarmos a criar nossos projetos, mostrarei como você pode usar essas opções uma a uma. Mas, por enquanto, você só precisa saber que as configurações do projeto existem na verdade. Existem algumas opções que você pode obter acesso também aqui. Se eu clicar em “Designer”, seremos redirecionados para a ferramenta de designer, que é esse ambiente. Isso é tudo por este vídeo. Vejo-te no próximo. 4. Introdução para HTML e CSS: O que acontece quando você abre uma página da Web? Quando você visita uma página da Web, o navegador realmente renderiza o código escrito pelo programador e mostra o resultado. Por exemplo, se você acessar seu site favorito e inspecionar o código por conta própria, poderá ver como esse site foi criado. Você também pode modificar o conteúdo desse site para se divertir um pouco, mas localmente porque uma vez que você atualiza a página, todo o seu trabalho duro se foi. Você pode perguntar, por que estamos falando sobre isso, não deveríamos construir sites sem codificação? Sim, como prometi, não vamos escrever nem uma única linha de código. Mas, como um web designer e um desenvolvedor web, é crucial para você entender como uma página da Web é construída e estruturada. Quando se trata de desenvolvimento web, há dois componentes principais que cada página web vem com, HTML e CSS. HTML significa HyperText Markup Language, e é tudo sobre o conteúdo de uma página web. Basicamente diz ao navegador o que mostrar na página; cabeçalhos, imagens, vídeos, botões, etc. Este é um código HTML simples, e como você pode ver, ele inclui alguns elementos como título, corpo, h1, e p. Tags HTML. É assim que um navegador entende o que deve exibir para o usuário, mas esta página é chata. Você não acha isso? Bem, podemos estilizar cada uma dessas tags para tornar o conteúdo mais interessante. Antigamente, sempre que queríamos estilizar nossas páginas da web, precisávamos estilizar cada tag uma por uma. Sempre que queríamos modificar nossos estilos, adivinha? Tivemos que mudar cada estilo em linha um por um. Não é muito eficiente. É por isso que usamos CSS. CSS significa folhas de estilo em cascata. Ele nos permite criar nossos estilos uma vez em um arquivo separado e reutilizá-los novamente e novamente em nosso arquivo HTML. Ele pega todas as informações sobre cor, posicionamento, tamanho, alinhamento, topografia e muito mais, e coloca-os em uma folha de estilos separada. Agora, sempre que queremos fazer alterações, fazemos isso uma vez e as alterações se aplicam a todas essas tags HTML simultaneamente. Mas como funciona o Webflow? Lembra quando eu disse que vamos programar, mas visualmente, eu realmente quis dizer isso? Deixa-me mostrar-te como funciona. Aqui está o designer e não há nada sob Canvas. Se você for para a seção Adicionar, podemos encontrar alguns elementos. Estes são os elementos HTML exatos, ou digamos tags HTML que falamos. Temos seção, div blog, cabeçalho, parágrafo, e muito mais. Aqui no navegador, temos os elementos do corpo. Você se lembra da tag body no arquivo HTML? Isso define o conteúdo principal do arquivo HTML. Qualquer arquivo HTML tem uma tag body, e é por isso que quando você cria uma página no Webflow, você sempre verá o elemento body lá por padrão. Podemos adicionar outras tags HTML dentro da tag body. Por exemplo, se eu for para a seção Adicionar, posso arrastar e soltar um elemento de cabeçalho na minha Tela de pintura. Olha o que acontece. O título está dentro do elemento do corpo. Em vez de escrever um monte de códigos, basta arrastar e soltar código pronto para produção com o qual podemos interagir. E quanto ao estilo? Bem, se eu selecionar este cabeçalho e ir para o painel de estilo no lado direito, eu posso facilmente modificar as propriedades CSS deste elemento em particular assim. Para provar que você está realmente codificando a página do zero, Eu posso clicar neste botão CSS Preview no canto inferior esquerdo para visualizar meu código CSS ao vivo. Se eu mudar a cor deste cabeçalho, você pode ver que uma nova propriedade foi adicionada aqui. Agora espero que você tenha uma melhor compreensão de como uma página da Web funciona e, o mais importante, como funciona o Webflow. 5. Introdução ao modelo da caixa: Aqui está uma página web simples que tem alguns elementos HTML como cabeçalho, parágrafo, uma imagem. O modelo de marcas realmente define como o layout funciona na web. Por exemplo, aqui, cada um desses elementos HTML é tratado como uma caixa. É como um limite em cada um deles. Todas essas caixas podem ser posicionadas e alinhadas de acordo com as propriedades CSS que lhes damos. Mas por que a web funciona assim? Não podemos simplesmente criar uma página da Web como um slide do PowerPoint? Bem, nós podemos, mas o problema é que quando você cria um snide, ele não é responsivo e você o desenha para uma dimensão específica, mas não é o caso de uma página web. Ao construir um site, queremos sempre torná-lo responsivo para que ele possa ser exibido perfeitamente em qualquer dispositivo. Não importa se é um MacBook, iMac, iPhone, você tem a idéia. Usando o modelo de caixa e CSS, podemos fazer páginas web responsivas. Outra coisa importante sobre o modelo de caixa é que podemos colocar caixas dentro de outras caixas. Desta forma, podemos decidir se eles se empilham um em cima do outro ou ao lado do outro. Nós também podemos alinhá-los como você quiser. Se quisermos modificar o espaçamento, podemos usar margens e preenchimento. Margem adiciona espaço fora da caixa, enquanto o preenchimento adiciona espaço dentro da caixa. Vamos dar uma olhada em um exemplo do mundo real. Aqui temos cartões diferentes e dentro temos elementos diferentes. Na verdade, todos eles são considerados como caixas, que eles estão posicionados quer ao lado do outro ou dentro um do outro. Podemos modificar as propriedades CSS de cada uma dessas caixas para controlar o estilo e layout de cada elemento. Vamos dar uma olhada em alguns sites famosos. Como você pode ver, todos esses sites são construídos usando o modelo de caixa. Se você quiser se tornar um web designer profissional e desenvolvedor, você precisa entender como o modelo de caixa funciona completamente. 6. Elementos de webflow: Como você se lembra, falamos sobre elementos HTML ou digamos tags HTML. No Webflow, você pode encontrá-los na seção Adicionar. No lado esquerdo, se você clicar neste ícone “Plus”, você pode ir para a seção Adicionar, e aqui temos duas guias diferentes, Elementos e Layouts. Na verdade, a guia Layouts inclui alguns layouts pré-construídos. Nós não vamos trabalhar com esses layouts pré-construídos em nossos projetos, já que vamos criar nosso próprio layout, mas você só precisa saber que eles existem. No entanto, se você for para a guia Elementos, você pode encontrar todos os elementos HTML aqui. Temos diferentes seções como Layout, Básico, Topografia, CMS, Mídia, Fóruns e Componentes. Vamos falar sobre cada um desses elementos especificamente nos próximos vídeos, mas por enquanto, vou mostrar como você pode usar esses elementos, como você pode adicionar esses elementos ao seu Canvas. Bem, a fim de adicionar um elemento ao seu Canvas, você pode simplesmente arrastar e soltar esse elemento em particular aqui, exatamente assim. Como você pode ver, agora temos o elemento seção. Podemos ver todos os nossos elementos diretamente no navegador. Se você quiser encontrar o navegador, você pode clicar neste ícone. Se eu ir para o Adicionar e tentar arrastar e soltar outro elemento. Por exemplo, um recipiente, lá vamos nós, você pode ver que o recipiente foi adicionado logo abaixo da seção. Você precisa entender que no web design e desenvolvimento web, a hierarquia de nossas camadas é importante. Por exemplo, aqui, quando temos uma seção, como você pode ver, esta seção é colocada diretamente no topo. É por isso que quando você dá uma olhada no Canvas, você pode ver que a seção foi colocada acima do contêiner. Se eu quiser colocar o recipiente acima da seção, eu posso simplesmente arrastá-lo e soltá-lo logo acima da seção e lá vamos nós. Seu lugar foi mudado. Cada elemento tem seu ícone específico ao lado de seu nome. Por exemplo, aqui, como você pode ver, o contêiner tem um ícone exclusivo e uma seção tem seu próprio ícone exclusivo. É uma boa maneira de descobrir que tipo de elemento você está usando. Como você se lembra, quando falamos sobre o modelo da caixa, eu mencionei que você pode colocar caixas dentro de outras caixas. Vamos dar uma olhada em um exemplo. Se eu selecionar este recipiente, eu posso arrastá-lo e soltá-lo, e colocá-lo dentro da seção. Lá vamos nós. Agora, este recipiente está aninhado dentro desta seção, e como você pode ver, ele foi recuado. Eu posso adicionar outro elemento, por exemplo, um bloco Div dentro do meu recipiente aqui, lá vamos nós, e ele foi aninhado também. O contêiner é agora o pai deste elemento de bloco Div e bloco Div é o filho deste contêiner. O contêiner é filho da seção e a seção é o pai do contêiner. Então eu posso facilmente entrar em colapso e expandir esses elementos. Se você tem várias seções e vários elementos, exatamente como este, e você quer recolher todos ao mesmo tempo, você pode clicar neste ícone direito no topo, e se eu clicar nele, mais uma vez, eu posso expandi-los todos. Você pode expandir o navegador, bem como clicando neste ícone, e você pode fixar o navegador apenas assim. Nos próximos vídeos, vamos mergulhar nos elementos do Webflow. Vejo você então. 7. Bloco Div: O que é um bloco Div? Bem, um bloco Div é a caixa mais básica em uma página web. Se você for para a seção adicionar, você pode ver que temos seções diferentes aqui. Temos layout, básico, topografia, etc Agora, sob a seção básica, temos elementos diferentes e o primeiro é chamado bloco Div. Se eu tentar arrastá-lo e soltá-lo na minha tela, você pode ver que o bloco Div foi adicionado à minha tela aqui, e ele ocupa toda a largura da tela. Um bloco Div realmente é dimensionado com base no conteúdo dentro. No entanto, aqui, como você pode ver, criou um limite, e parece que há alguns dentro. No entanto, se eu visualizar isso, se eu apenas clicar neste ícone i, podemos ver que nada está aqui. Na verdade, é uma caixa vazia. É uma caixa dinâmica porque quando você adiciona mais e mais elementos nele, seu tamanho será alterado de acordo. Vamos tentar. Vou tentar adicionar um título a este bloco Div. Simplesmente assim. Agora, vou em frente e adicionar um parágrafo. Lá vamos nós. Deixe-me ir em frente e adicionar um botão. Legal. Estes três elementos estão dentro deste bloco Div. Como você pode ver, o tamanho do bloco Div foi alterado de acordo. Se eu remover um desses elementos, você pode ver que o tamanho do bloco Div foi alterado novamente. Um bloco Div geralmente pode ser qualquer coisa. Pode ser uma imagem, pode ser uma linha. Mas na maioria das vezes, usamos um bloco Div para alinhar elementos e agrupar elementos juntos. Por exemplo, aqui nós agrupámos esses dois elementos juntos. Sempre que quisermos modificar, por exemplo, a margem destes bloco Div particular, podemos apenas ir para esta seção de colagem no painel lateral aqui. Por exemplo, posso definir a margem superior para 70. Lá vamos nós. Ambos os elementos foram movidos porque eles são agrupados dentro deste bloco Div. Embora um bloco Div ocupe toda a largura da tela por padrão, também podemos dar-lhe uma largura e altura específicas. Se você passar para a seção de tamanho no painel de estilo aqui, você pode especificar uma largura específica, por exemplo, 400 pixels. Lá vamos nós. Podemos modificar a altura também. Podemos configurá-lo para 300 pixels, e a altura do bloco Div foi modificada. Agora este bloco Div tem uma largura e altura fixas. Dependendo de nossas necessidades, podemos dar aos nossos blocos Div largura e altura específicas. Como mencionei antes, um bloco Div pode ser qualquer coisa, por exemplo, uma imagem. Deixe-me ir em frente e arrastar e soltar e outro bloco Div aqui logo abaixo deste parágrafo. Vamos supor que queremos adicionar uma imagem aqui, por exemplo, queremos fazer este Div bloquear uma imagem. Podemos ir para o painel de slides, podemos rolar para baixo. Se formos para a seção de fundo. Aqui temos imagem e gradiente. Se eu clicar neste botão mais a partir daqui, Eu posso clicar em Escolher imagem e eu posso obter acesso a todos os meus ativos. Por exemplo, vamos usar essa imagem. Por enquanto, não vamos falar sobre todas essas configurações, mas deixe-me mudar a posição para centro e cor. Lá vamos nós. Como você pode ver, nós temos este bloco Div, mas este bloco Div realmente tem um fundo de imagem. Se eu quiser torná-lo maior, posso definir o tamanho, por exemplo, a altura como pixels. Claro, vamos falar sobre todas essas propriedades. Na verdade, estas são propriedades CSS nos próximos vídeos, mas por enquanto só precisamos nos concentrar nos elementos de fluxos da web. Precisamos entender como eles funcionam, e por que precisamos deles para construir um site profissional e moderno. 8. Seção: O que é uma Seção? Neste vídeo, vamos falar sobre Seções. Se você for para a seção Adicionar aqui, sob o layout, você pode ver que temos elementos diferentes. Temos Seção, Contêiner, Grade e Colunas. Aqui, vou em frente e adicionar uma Seção na minha tela. Deixe-me arrastar e soltar uma Seção aqui, e lá vamos nós. A Seção foi adicionada. Bem, uma Seção realmente ocupa toda a largura da janela do navegador, mas espere, não é como um bloco Div? Sim, ele realmente atua como um bloco de Div, no entanto, com uma diferença. A única diferença entre uma Seção e um Bloco Div é realmente o significado do conteúdo que você coloca dentro desses elementos. Quando usamos uma Seção, o conteúdo dentro deve ser logicamente conectado. Por exemplo, quando criamos um site, podemos ter seções diferentes, a seção de herói, a seção de cliente, a seção de depoimento, e cada seção tem algum conteúdo. Por exemplo, um título, um subtítulo, um botão. Quando agrupámos todo esse conteúdo, colocamos eles dentro de uma Seção, então os agrupamos usando uma Seção e não um Bloco Div. Para qualquer outra coisa, podemos usar um bloco Div. Por exemplo, quando queremos alinhar alguns elementos, quando agrupámos alguns elementos, a fim de modelá-los. Esta é basicamente a principal diferença entre um bloco de Div e uma seção. Quando começarmos a projetar nossos projetos, você entenderá realmente qual é a diferença entre uma Seção e um Div Block. Mas, por enquanto, deixe-me dizer-lhe que usamos Seções para estruturar nossos sites. Basicamente para qualquer site, para qualquer projeto, o que você precisa fazer é adicionar uma seção logo após o elemento corpo. Aqui precisamos adicionar uma Seção e podemos adicionar nosso conteúdo e nossos Blocos Div dentro desta Seção. Vamos tentar. Vou levar este bloco de Div. Uma vez que este bloco Div tem uma altura específica, deixe-me configurá-lo para auto. Vou ajustar a altura para auto. Então eu vou arrastá-lo e soltá-lo dentro da Seção. Lá vamos nós. Uma seção é dimensionada com base no conteúdo interno. Para entender melhor, eu vou selecionar esta Seção e eu vou para o painel lateral do lado direito e deixe-me modificar a cor do fundo. Eu vou para Fundo e, por padrão, ele é definido como transparente. Vou configurá-lo para outra coisa. Por exemplo, este roxo. Agora você pode ver que a altura desta seção é determinada pelo conteúdo dentro. Se eu selecionar este Bloco Div, esta imagem, e modificar sua altura para 200 pixels, você pode ver que a altura desta Seção foi modificada também. Você deve sempre ter em mente que a altura da Seção é determinada com base no conteúdo interno. Como eu mencionei antes, uma Seção por padrão pega toda a largura da tela, ou digamos que a janela do navegador. No entanto, podemos modificar isso. Podemos substituir essas preferências e essas propriedades. Se você passar para o tamanho aqui, deixe-me mostrar-lhe, eu posso definir a largura para 500 pixels, por exemplo, apenas assim. Você pode facilmente substituir todas essas propriedades. Vamos falar sobre essas propriedades mais tarde, mas por enquanto, você só precisa saber que estruturamos nossos sites sempre assim. Após a Seção, geralmente colocamos um Container e, em seguida, vamos adicionar nosso conteúdo dentro de um Container. Vamos falar sobre o Container no próximo vídeo. 9. Recipiente: O que é um contentor? Neste vídeo, vamos falar sobre contêineres. Se eu for para a seção Adicionar como de costume, eu posso ir para a seção de layout e daqui mesmo ao lado da seção, eu posso encontrar recipiente. Como mencionei no vídeo anterior, quando projetamos um site, tentamos estruturar nosso site de uma maneira particular. Na verdade, tentamos manter tudo organizado. É por isso que temos todos estes elementos diferentes aqui. Basicamente, seções e contêineres são apenas blocos div com alguns estilos predefinidos. Por exemplo, um contêiner tem uma largura específica. Se eu tentar arrastar e soltar um contêiner na minha tela, lá vamos nós. Como você pode ver, é apenas uma div simples que tem uma largura máxima. Ele tem uma largura específica de 940 pixels por padrão. Se eu quiser manter tudo organizado, eu posso tomar este bloco div, eu vou definir a largura para auto assim. Como você pode ver este bloco div uma vez que a largura ea altura são definidos para auto leva toda a largura da página. Se eu quiser manter tudo ordenadamente organizado no centro, eu posso selecionar esta div como e arrastá-lo e soltá-lo no meu recipiente. Lá vamos nós. Agora tudo é colocado dentro deste recipiente que tem uma largura padrão. Claro, você pode ir em frente e modificar sua largura, se quiser. Por exemplo, para telas maiores, você pode ir para a propriedade size, para a seção de tamanho aqui e definir a largura máxima para 1100. Simplesmente assim. Cabe a você como você quer usá-los. Você pode decidir não usar um recipiente e apenas usar um bloco div e definir uma largura específica para isso. Isso é totalmente bom. Você só precisa saber que estes são apenas elementos pré-construídos, a fim de tornar nossas vidas muito mais fáceis. Espero que agora você saiba a diferença real entre uma seção, contêiner, e um bloco div. Eles são basicamente todos iguais. São variações de um bloco div com estilos predefinidos. Como mencionei no vídeo anterior, sempre que quisermos projetar um site, sempre que quisermos construir um site, primeiro usamos uma seção, depois usamos um contêiner e dentro colocaremos nossos elementos. Esta é a melhor maneira de organizar e estruturar um site. Se precisarmos criar mais seções, podemos simplesmente arrastar e soltar mais seções aqui, ou simplesmente copiar e colar nossas seções assim. 10. Diagrama: O que é uma grade? Neste vídeo, vamos falar sobre grades CSS. Se você passar para a seção Adicionar sob a categoria Layout, você pode ver que temos um elemento de grade. Na verdade, é uma grade CSS. Não é uma tag HTML porque basicamente, podemos transformar qualquer bloco em uma grade. Vamos falar sobre isso nos próximos vídeos, mas por enquanto, vamos arrastar e soltar esses elementos de grade em nossa tela. Lá vamos nós. Aqui eu tenho uma seção, e então eu tenho um recipiente. Dentro deste contentor, vou largar a minha grelha. Como você pode ver, uma grade não é nada além de um guia. Grades nos ajudam a organizar nosso conteúdo de forma dinâmica. Quando temos várias imagens, por exemplo, que queremos organizar dinamicamente, ou mesmo quando temos alguns blocos Div que queremos organizar de forma dinâmica e ordenada, podemos usar grades. Você precisa entender que uma grade serve como guia, portanto, é como um espaço reservado para nosso conteúdo. Como você pode ver agora, estamos no modo de edição. Aqui, por padrão, temos duas colunas e duas linhas, e se você der uma olhada no lado direito, você pode ver que aqui podemos modificar as preferências de nossa grade. Por exemplo, podemos modificar a quantidade da calha, que é o espaçamento entre linhas e colunas. Por padrão, ele é definido como 16 por 16 pixels. Você pode configurá-lo para o valor que você quiser. Você também pode modificá-lo aqui manualmente assim, e se você quiser adicionar mais colunas e mais linhas à sua grade, você pode simplesmente clicar neste botão Plus aqui para adicionar mais colunas, e se você quiser adicionar mais linhas, você pode clicar neste botão Plus aqui. Alternativamente, você pode clicar neste botão Plus direito nas configurações para adicionar uma nova coluna e para linhas, você pode clicar neste botão Plus. Depois de criar sua grade, você precisa sair do modo Editar. Para fazer isso, você pode pressionar Escape no seu teclado ou você pode clicar neste botão azul Concluído na parte inferior aqui. Como você pode ver, eu já criei quatro blocos Div simples, e cada um deles inclui um cabeçalho, um parágrafo e um botão. O que vamos fazer é arrastar e soltar esses blocos Div em nossa grade, mas primeiro, vamos ver quantos blocos temos. Na verdade, temos quatro blocos Div diferentes, portanto, eu vou selecionar meus elementos de grade aqui e então eu vou clicar neste botão vermelho ou rosado. Já que temos quatro blocos Div diferentes, vou remover algumas dessas colunas e linhas. Vamos remover duas dessas colunas e duas dessas linhas. Agora temos uma grade de dois por dois; temos duas colunas e duas linhas. Isso é perfeito. Agora, eu vou ajustar o espaço ou a calha, então vamos ajustá-lo para 20 para colunas e linhas. Vou clicar neste botão Concluído, e isso é tudo. Agora o que precisamos fazer é selecionar nosso bloco Div, arrastá-lo e soltá-lo dentro da grade, exatamente assim. Uma coisa a mencionar sobre grades é que quando você adiciona conteúdo à grade, o conteúdo levará a próxima célula disponível dentro da grade. Como você pode ver, o primeiro bloco Div levou a primeira célula, e agora se eu selecionar este bloco Div e arrastá-lo e soltá-lo dentro da grade, podemos ver que ele levou a próxima célula disponível. Claro, se eu modificar sua ordem no navegador, você pode ver que seu lugar muda, exatamente assim. Agora vamos fazer a mesma coisa para os dois blocos Div restantes. Vou selecioná-los e arrastá-los e soltá-los aqui. Lá vamos nós. Vamos fazer a mesma coisa para o último bloco Div. Nossos blocos Div estão dentro de nossa grade. No entanto, se eu selecionar minha grade, e se eu for para o modo de edição, você pode ver que essas células são maiores, e esses blocos Div não ocupam toda a largura de cada célula. Isso é porque eu dei a esses blocos Div uma largura fixa. Então, se eu selecionar conteúdo e modificar a largura de 400 para Auto, veja o que acontece. Agora ele ocupa toda a largura da célula, e isso é exatamente o que queremos. Se você quiser modificar a altura da grade, você pode selecionar a grade e definir a altura como, por exemplo, 700 pixels, exatamente assim. Ou posso configurá-lo para 500 pixels. Deixe-me remover esta seção por um segundo. Uma das coisas mais importantes sobre grades é que elas são por padrão responsivas. Vamos dar uma olhada. Se eu apertar o botão Visualizar aqui e tentar modificar a dimensão da minha tela, você pode ver que esses conteúdos são dinâmicos. Eles são responsivos por padrão porque usamos uma grade. É por isso que as grades são tão poderosas em termos de capacidade de resposta. Se eu ir para o ponto base da área de trabalho e eu quiser adicionar algum preenchimento, eu posso selecionar o Container, e então aqui eu posso definir algum preenchimento. Claro que falaremos sobre todas essas propriedades mais tarde, mas eu só quero mostrar como as grades funcionam, na verdade, em termos de capacidade de resposta. Lá vamos nós. Mas e se eu quiser modificar o layout desta grade? Isso é tão simples. Posso selecionar minha grade, posso ir para o modo Editar. A partir daqui, posso modificar o número de linhas e colunas. Vamos supor que eu queira empilhar esses conteúdos verticalmente. Só preciso de uma coluna. Eu vou remover esta coluna, e eu vou adicionar mais duas linhas e apertar “Concluído” e está feito. Como você pode ver, agora temos quatro linhas diferentes que são colocadas uma sobre a outra e elas são dinâmicas. Se eu tentar verificar sua capacidade de resposta, você pode ver que eles ainda são dinâmicos em todos os dispositivos. Mas e se você quiser fazer um desses blocos Div tomar mais de uma célula? Podemos fazer isso também. Vamos adicionar uma coluna e remover essas duas linhas adicionais, assim como isso. Vou remover o cabeçalho 4, este último bloco Div. Suponha que você quer tomar o título 3, este último bloco Div, e você quer pegar as duas últimas células? Para fazer isso, você pode usar essa alça diretamente no canto inferior. Se eu clicar com o botão esquerdo sobre isso e arrastar e soltar, lá vamos nós, agora ele poderia facilmente gastar o conteúdo para ocupar mais células. A boa notícia é que ele ainda é dinâmico e ainda é responsivo. Vamos dar uma olhada. Às vezes, talvez seja necessário colocar nosso conteúdo manualmente. Como você se lembra, eu mencionei que quando você adiciona conteúdo à sua grade, ele ocupa a próxima célula disponível por padrão. Mas e se eu quiser colocá-los manualmente? Bem, podemos fazer isso. Deixe-me desfazer a operação. E se eu quiser colocar este último bloco Div aqui nesta última cela? Bem, podemos fazê-lo. Primeiro precisamos selecionar este bloco Div, e se nos dirigirmos para as configurações Grid Child no lado direito, você pode ver que, por padrão, sua posição está definida como auto. Se eu configurá-lo para manual, agora, eu posso apenas arrastá-lo e soltá-lo aqui. Agora podemos facilmente posicionar nosso conteúdo manualmente. Espero que agora você tenha uma melhor compreensão das grades. Vamos trabalhar com grades quando começarmos a criar nossos projetos. Então, vejo você então. 11. Lista: Há momentos em que queremos listar alguns elementos em nosso projeto, não importa se temos uma lista de imagens ou uma lista de itens, o Elemento List pode ser tão útil. Se você for para a seção Adicionar na categoria básica, você pode encontrar uma lista. Se eu arrastar e soltar a lista no meu contêiner, você pode ver que, por padrão, ele tem três itens da lista. Como você pode ver, essa janela Configurações de lista aparece. Temos dois tipos de listas. Temos a lista desordenada e a lista ordenada. A diferença é esta. Quando você usa uma lista não ordenada, não há número. Se você definir como ordenado, você pode ver que temos números. Deixe-me selecionar esta lista e modificar a cor deste texto para branco para que você possa ver melhor. Perfeito. Se eu configurá-lo para não ordenado, você pode ver que nós só temos pontos de bala. Em termos de estilo, não temos balas e balas. Deixe-me clicar duas vezes no primeiro item da lista aqui para adicionar algo. Vamos escrever elementos. Para o segundo, vou escrever outra coisa, vamos escrever web design. Para o último, vou escrever desenvolvimento web. Ótimo. Agora, temos três itens de lista diferentes e se eu quiser adicionar mais itens de listas, eu posso simplesmente copiá-lo e colá-lo usando Comando C e Comando V ou Controle C e Controle V. Alternativamente, você pode ir para a seção Adicionar e sob a categoria Básico, você pode ver que temos um elemento separado para o item da lista. Você pode arrastar e soltar um item de lista apenas dentro de uma lista, exatamente assim. Mas podemos listar algumas imagens? Claro que podemos. Deixa-me mostrar-te. Eu posso ir para o Assets e eu posso arrastar e soltar uma imagem aqui. Lá vamos nós. Vou diminuir sua largura para, digamos, 300 pixels. Não importa o tipo de elementos que você tenha, você sempre pode listá-los. Se você quiser abrir as configurações da lista, você pode selecionar seu elemento de lista no navegador e você pode clicar neste ícone “Configurações” ao lado do nome da lista. Lá vamos nós. Alternativamente, você pode selecionar seus elementos de lista e você pode ir para as Configurações de elementos ao lado do painel de estilo bem aqui, e nós temos as Configurações de lista. 12. Bloco de links: O que é um bloco de links? Bem, um bloco de links é um contêiner clicável. Qualquer conteúdo que você colocar dentro de um bloco de link se tornará clicável. É muito útil porque às vezes podemos precisar redirecionar os usuários para outra página ou outra seção do nosso site, ou até mesmo para outro site. Podemos fazer isso usando um bloco de link. Se você for para a seção Adicionar sob o básico, você pode ver que temos este bloco de link. Deixe-me arrastar e soltar um bloco de link direito neste recipiente e como você pode ver é apenas um bloco div no entanto, é clicável. Este bloco de links tem algumas configurações. Por padrão, você pode ver o URL, aqui você pode especificar o URL para o qual deseja redirecionar o usuário. Por exemplo, aqui posso escrever google.com. Eu posso ir para a página quando criamos mais páginas para o nosso site, por exemplo, página de contato, página de registro, etc, podemos escolher nossa página aqui. Quando criamos seções diferentes em nosso site, podemos usar esta seção de página. Por exemplo, quando criamos um [inaudível], podemos ter alguns menus. Quando o usuário clica em um desses menus, o usuário deve ser levado para uma seção específica de nossa página de aprendizado. Podemos escolher uma seção aqui. Vamos falar sobre todas essas configurações mais tarde quando realmente começar a usá-las, você pode definir um endereço de e-mail, o assunto desse e-mail, você pode definir um número de telefone e, finalmente, você pode até mesmo escolher um anexo. Você precisa lembrar que você pode usar um bloco de link para qualquer coisa. Você pode usá-lo para cartões, você pode usá-lo para elementos específicos, um ícone, qualquer coisa. Deixe-me ir em frente e adicionar um cabeçalho aqui dentro só para mostrar como funciona. Como você pode ver, assim que eu adicionar o título aqui neste bloco de link, seu estilo foi alterado porque agora é um link. Posso ir em frente e substituir manualmente essas configurações. Por exemplo, sob a seção de tipografia no painel lateral, posso definir sua declaração como nenhuma. Deixe-me modificar sua cor para branco, exatamente assim. Se eu visualizar nosso projeto, agora você pode ver que assim que eu passar o mouse sobre este cabeçalho, o cursor foi alterado para um ponteiro. Agora, se você não consegue ver o ponteiro, provavelmente é por causa do seu navegador. Você pode limpar o cache do navegador ou experimentá-lo em outro navegador. Mas um bloco de link muda automaticamente o cursor para um ponteiro. Se eu clicar nisso, nada acontece porque não especificamos um link para isso. Se eu selecionar esse bloco de links e modificar o URL, por exemplo, vamos configurá-lo para google.com. Agora, se eu visualizar isso e se eu clicar nele, eu serei redirecionado para o Google. Em poucas palavras, um bloco de link é um bloco div clicável. Bem, há momentos em que queremos converter nossos blocos div em um bloco de link em vez de criar um bloco de link a partir do zero. Claro, podemos ir em frente e arrastar e soltar um bloco de link aqui e adicionar um bloco div dentro e projetar nossos cartões e elementos. Mas às vezes podemos projetar nosso cartão ou nossos elementos primeiro, e então podemos precisar convertê-lo em um bloco de link. Como podemos fazer isso? Se selecionarmos nosso bloco div, por exemplo, aqui, este cartão, e se você clicar com o botão direito do mouse em seu nome direito em Canvas, temos muitas opções. O segundo diz “converter para bloco de ligação”. Se eu clicar nele, lá vamos nós. Agora, o estilo desses elementos, os elementos filho foi alterado porque agora é um link. Claro, eu posso ir em frente e substituir essas configurações, mas eu não vou fazer isso porque eu só quero mostrar como o bloco de links funciona. Se eu visualizar meu projeto, agora você pode ver que este cartão é clicável assim. No entanto, as outras cartas não são porque as outras cartas são apenas blocos div simples. 13. Botão: Quase todos os sites usam botões. Botões são tão importantes quando se trata de web design e desenvolvimento web, porque eles permitem que os usuários tomem ações. Eles são geralmente usados para o nosso apelo à ação. Se você for para a seção Adicionar, podemos ver que temos o botão sob o básico. Na verdade, um botão não passa de um bloco de links. São apenas marcas clicáveis com um bloco de texto dentro. Se eu arrastar e soltar este botão no meu cartão, você pode ver que ele tem alguns estilos padrão, e eu posso dar-lhe um URL como um link como se tivéssemos todas essas configurações que já discutimos. Mas, por enquanto, vamos em frente e pré-visualizar isso. Como você pode ver, o cursor foi alterado, porque é realmente um bloco de links. Podemos modificar todas as propriedades deste elemento botão. Por exemplo, podemos modificar sua cor aqui no painel de estilo. Se você clicar duas vezes sobre isso, você pode modificar o texto. Vamos escrever o login assim, mas às vezes podemos precisar criar um botão personalizado. Por exemplo, se você quiser adicionar um ícone a este botão, não podemos usar o elemento botão. Precisamos usar um bloco de link, e então precisamos adicionar um bloco de texto dentro e também uma imagem. É assim que você pode criar um botão personalizado, e falaremos sobre isso mais tarde. O elemento botão tem estados diferentes. Vamos falar sobre estados em detalhes, mas por enquanto você só precisa saber que cada botão tem alguns estados. Ele não tem nenhum, pairar, pressionado, focado e visitado. Se você passar para a seção Seletor, aqui é onde nós especificamos nossas classes CSS sobre as quais falaremos mais tarde, e se você clicar nesta seta para baixo, você pode ver todos os estados do seu botão. Se eu passar o mouse, posso modificar o estilo simplesmente, assim. Agora, se eu for para o estado nenhum e visualizar esse botão, e passar o mouse sobre, você pode ver que o estado do mouse tem um estilo diferente. Quando mergulharmos nas propriedades de estilo e CSS, falaremos sobre todos esses detalhes. 14. tipografia: Quando se trata de web design e desenvolvimento web, tipografia desempenha um papel importante. Não consigo imaginar criar um site sem usar texto, não é? Neste vídeo, vamos falar sobre tipografia. Se você passar para a seção Adicionar sob a categoria Tipografia, você pode ver que temos seis elementos diferentes. Temos cabeçalho, parágrafo, link de texto, bloco de texto, aspas de bloco e rich text. Vamos mergulhar em cada um deles. Vou começar com o rumo. Cabeçalho é uma tag HTML. Ele é usado para criar títulos e legendas. Temos seis títulos diferentes, de H1 a H6. Uma coisa importante sobre títulos é que os motores de busca e leitores de tela tentam entender o conteúdo do nosso site com base em títulos, então você precisa ter certeza de usá-los corretamente. Neste momento, aqui eu tenho duas cartas diferentes, e bem no topo eu tenho um título. Como você pode ver, diz H1. Se eu clicar neste ícone “Configurações”, posso escolher o tipo de cabeçalho. Como podem ver, temos seis títulos diferentes. H1 é o maior, e H6 é o menor. H1 define o título ou legenda mais importante em sua página da web, enquanto H6 define o título ou legenda menos importante em sua página da web. Você precisa ter certeza de usá-los com sabedoria porque o Google, por exemplo, verifica seus títulos para analisar seu conteúdo e classificar seu site. Quando começamos a construir nosso projeto vamos falar muito sobre títulos, mas por enquanto você só precisa saber que temos seis títulos diferentes, e H1 é o mais importante, e H6 é o menos importante. Uma coisa a mencionar aqui é que você nunca deve usar cabeçalhos apenas para tornar um texto maior ou negrito, isso é errado. Para fazer isso, você pode usar propriedades CSS sobre as quais falaremos mais tarde. Os cabeçalhos têm estilos padrão. Eles têm tamanhos de fonte padrão, pesos de fonte, etc. Mas você pode substituir esses estilos padrão mais tarde. Agora vamos passar para os próximos elementos de tipografia, que é parágrafo. Parágrafo nos permite criar conteúdo multi-frase. Como você pode ver aqui, eu tenho um parágrafo e há várias linhas de texto aqui. Eu posso clicar duas vezes para modificar facilmente este parágrafo, e se eu quiser estilizar uma palavra específica ou várias palavras aqui eu posso selecioná-la, assim como este, e eu posso usar o estilo embutido aqui. Por exemplo, posso torná-lo em negrito, posso torná-lo um link assim, ou posso apenas selecionar meu parágrafo e limpar a formatação. Vamos falar sobre esta opção Envolver com spam mais tarde, é mais avançado, então vamos deixá-la por enquanto. Vamos passar para o próximo elemento. Como você pode ver aqui temos um link de texto. Um link de texto é apenas um texto que é clicável como um botão, você pode usá-lo para um botão de texto. Deixe-me arrastar e soltar um link de texto aqui, e eu vou colocá-lo bem ao lado deste botão. Como você pode ver, isso é apenas um link. Ele tem todas as características de um link como você pode ver, podemos especificar um URL. Podemos modificar todas essas preferências aqui. Na verdade, este botão Ler Mais é um link de texto com algum preenchimento, então, se você quiser criar um botão personalizado, você simplesmente usa um link de texto e, em seguida, estilizá-lo. Vamos passar para o próximo elemento, que é bloco de texto. Um bloco de texto é usado para qualquer coisa que não seja um cabeçalho, parágrafo ou um link de texto. Deixe-me ir em frente e arrastar e soltar este bloco de texto aqui, lá vamos nós. Como você pode ver, é apenas um recipiente com um texto dentro. Você pode clicar duas vezes sobre ele para modificar o texto, estilizá-lo, e você pode até transformá-lo em um link de texto exatamente como esse. Agora o texto dentro é um elemento de link. Ele é usado para algo como uma descrição ou a isenção de responsabilidade de direitos autorais. Vamos falar sobre os casos de uso de blocos de texto mais tarde. Vamos passar para o próximo elemento, que é aspas de bloco. Bloquear aspas, permite que você crie uma cotação. Deixe-me arrastar e soltar esta citação de bloco aqui, e como você pode ver, é apenas um bloco de texto com alguns estilos predefinidos. Se eu clicar duas vezes sobre isso, eu posso simplesmente modificar o texto. Esta é uma citação em bloco. Tem essa borda esquerda. por padrão você pode obviamente modificar todas as propriedades, vamos falar sobre isso. Se você quiser usar uma cotação em seu projeto, você pode usar os elementos de cotação de bloco ou, alternativamente, você pode criá-lo manualmente. Vamos passar para o próximo elemento que é rich text. O elemento rich text é tão poderoso. Por quê? Porque reúne todos os tipos de elementos juntos. Por exemplo, aqui temos um texto rico. Este rich text pode usar muitos elementos diferentes, como cabeçalhos, parágrafos, imagens, vídeos, links, você nomeá-lo. Por que precisamos usá-los? É útil porque é mais fácil modificar o conteúdo quando temos um rich text. Se eu clicar duas vezes aqui, eu posso simplesmente modificar este parágrafo. Eu posso apenas criar um novo parágrafo se eu pressionar “Enter” apenas assim, ou eu posso simplesmente clicar neste botão “Plus” e carregar uma imagem, um vídeo, código personalizado, ou até mesmo uma lista. Deixe-me ir em frente e enviar uma imagem aqui. Lá vamos nós, nossa imagem está pronta. Posso alinhá-lo à esquerda. É muito fácil personalizar tudo dentro do rich text. Mais importante ainda, quando você cria um site para um cliente é muito prático usar um rich text porque o cliente não é um desenvolvedor web ou um web designer. Ele ou ela precisa modificar o conteúdo facilmente. Eles podem simplesmente ir para este rich text e apenas adicionar imagens, vídeos, modificar o conteúdo, estilizar o título, estilizar o parágrafo, e assim por diante. Falaremos sobre o editor mais tarde, mas por enquanto você só precisa saber que o rich text pode agrupar todos os elementos: imagens, vídeos, títulos, parágrafos, qualquer coisa. 15. Imagem: Você pode imaginar projetar um site sem imagens? Eu não posso. Neste vídeo, vamos falar sobre imagens. Eu vou bater sobre a seção Adicionar, e da categoria de mídia, eu vou arrastar este elemento de imagem e soltá-lo dentro do meu contêiner no navegador, exatamente assim. Aqui está um elemento de imagem, e tem configurações diferentes. Podemos usar este elemento de imagem para fazer upload de formatos de arquivo populares como PNG, JPG, SVG, e assim por diante. Bem, as imagens são nossos bens. Portanto, para usar uma imagem em seu projeto, primeiro, você precisa carregá-las. A prática recomendada é carregar todos os seus ativos no painel Ativos primeiro, quando você começar a criar seu projeto e, em seguida, começar a trabalhar no layout e no conteúdo. Dessa forma, você pode facilmente ter acesso aos seus ativos sempre que quiser. Alternativamente, você pode simplesmente arrastar e soltar um elemento de imagem, e a partir daqui, você pode clicar em Escolher imagem e, em seguida, carregar sua imagem aqui. Por enquanto, vou selecionar esta imagem. Lá vamos nós. Esta imagem tem algumas configurações. Como pode ver, é muito grande. Vou mudá-lo para este, é muito melhor. Como você pode ver, ele tem a largura e a altura definidas para auto. Significa que o Webflow determina a largura e a altura aqui. Há também a caixa de seleção HiDPI, e quando está marcada, a largura da nossa imagem será dividida por duas para ser exibida perfeitamente nas telas retina. Por exemplo, aqui, uma vez que a largura da nossa imagem é de 640 pixels, quando eu verifico isso, Webflow define como 320 pixels, desta forma podemos ter certeza de que nossa imagem será exibida surpreendentemente em diferentes dispositivos. É opcional usar HiDPI, mas na maioria das vezes, se você verificar isso, você pode ter certeza de que tudo parece ótimo em todos os tipos de dispositivos. Você pode especificar a largura e a altura de suas imagens aqui ou pode estilizá-las no painel de estilo aqui sob a seção de tamanho. Falaremos sobre o estilo mais tarde, mas por enquanto, você só precisa saber que é possível especificar a dimensão de suas imagens aqui nas configurações da imagem. Você também pode substituir suas imagens se você clicar nessa imagem de substituição e, no painel de ativos, você pode escolher imagens diferentes como essa. Uma coisa importante sobre as imagens é que você pode carregar imagens de até quatro megabytes. Qualquer coisa maior que isso, você não pode carregá-lo. Por quê? Porque não é prático usar imagens tão grandes, uma vez que elas diminuem a velocidade de carregamento da página da Web. É por isso que você pode carregar imagens de até quatro megabytes. Existem algumas opções avançadas aqui, como todos os textos e carregar. Nós não vamos abordá-los agora porque estes são tópicos avançados e vamos falar sobre eles mais adiante neste curso. Você pode usar um elemento de imagem para ícones também. Como um ícone é uma imagem, basicamente, você pode simplesmente ir para seus ativos, e se você carregar um ícone, você pode simplesmente arrastá-lo e soltá-lo aqui assim ou você pode simplesmente arrastar e soltar um elemento de imagem e , em seguida, escolher o seu a partir das configurações da imagem. É totalmente com você. 16. Vídeo: Às vezes, podemos precisar usar um vídeo em nosso projeto. Neste caso, podemos usar um elemento de vídeo. Se você for para a mídia daqui, você pode arrastar e soltar um elemento de vídeo em seu Canvas, eu vou colocá-lo dentro do meu contêiner para manter tudo organizado. Este elemento de vídeo funciona como um espaço reservado, você pode colar um link de vídeo de qualquer fonte de terceiros como Vimeo ou YouTube, não importa. Por enquanto, vou colar um link do YouTube, e assim que eu colá-lo, ele o carrega aqui, e eu posso simplesmente visualizar meu projeto. Eu posso reproduzir este vídeo facilmente, e como você pode ver, temos todas as opções do player de vídeo do YouTube, mas temos outro elemento também. Deixe-me remover este elemento de vídeo, então eu vou arrastar e soltar este elemento do YouTube. Qual é a diferença? Bem, com o elemento de vídeo, você pode usar qualquer link de qualquer plataforma, mas com o elemento YouTube, você só pode usar um link do YouTube. Qual é a principal diferença aqui? Com o elemento YouTube, temos mais opções para trabalhar. Temos configurações diferentes como iniciar em, podemos silenciar o vídeo por padrão, podemos ativar a reprodução automática. Podemos modificar outros controles do jogador, quer queiramos mostrar os controles do jogador ou não. Também podemos modificar as configurações de privacidade. Esta é basicamente a principal diferença entre esses dois elementos. Assim como qualquer outro elemento, você pode modificar todas as propriedades CSS desses elementos de vídeo também. 17. Animação de Lottie: Você já se perguntou como você pode usar uma animação em seu projeto? A resposta é animação Lottie. Se você passar para a seção Mídia aqui no painel de adição, você pode ver que há um elemento chamado animação Lottie. Deixe-me arrastar e soltar este elemento no meu recipiente. Bem, Lottie é um tipo de arquivo para animação. É tão poderoso porque nos permite usar animações de alta qualidade e, o mais importante, permite controlar diferentes propriedades dessa animação. Por exemplo, podemos torná-lo interativo, podemos fazê-lo jogar ao contrário, e outras coisas. Vamos falar sobre animações do Lottie em detalhes mais tarde, mas por enquanto, vamos tentar. No arquivo Assets, eu tenho um arquivo JSON, que é basicamente o que precisamos se quisermos usar uma animação Lottie, se eu apenas clicar neste botão Substituir Sequência Lottie, eu posso simplesmente escolher esta animação, e lá vamos nós. Agora temos a animação, mas deixe-me ver isso. Se eu clicar nesta Animação de Visualização, a animação é reproduzida de zero a 100 por cento. Quão legal é isso? Posso verificar a opção de loop, vamos pré-visualizar. Lá vamos nós. Ele toca de novo e de novo. Eu posso escolher o jogo na opção inversa, apenas assim. 18. Formulários: Se você quiser construir um site que tenha uma página de contato conosco ou até mesmo uma seção de boletim informativo, certeza, você precisa usar Formulários. Bem, um formulário pode ter diferentes elementos como rótulo, entradas, área de texto, caixas de seleção, botões de opção, botão de formulário, etc. Se você passar para a seção Formulários no painel de adição, você pode ver que temos diferentes elementos aqui. Temos Form Block que agrupa diferentes elementos do formulário como rótulo, entradas, botão de formulário. Temos Label, que é apenas um bloco de texto simples. Temos entrada, é um campo de texto. Temos a área de texto para frases longas e conteúdo longo. Temos caixas de seleção, temos botões de opção para seleções. Temos o elemento select, se você quiser deixar o usuário selecionar a partir de diferentes opções. Temos recaptura e temos o botão Formulário. Também temos o elemento de upload de arquivo aqui, mas ele só está disponível quando você adiciona um plano de site ao seu site. Quando queremos criar um formulário, primeiro, precisamos de um bloco de formulário. Como mencionei antes , reúne todos esses elementos de forma, os necessários. Vou arrastá-lo e soltá-lo no meu recipiente na tela. Lá vamos nós. Como você pode ver, este bloco de formulário já tem alguns elementos, como dois rótulos, dois campos de texto e um botão. Você não pode ver essas camadas de texto por causa de sua cor. Vou modificar a cor e o estilo aqui. Agora é melhor. Quando você arrasta e solta um formulário no seu Canvas, as configurações do formulário são exibidas. Um bloco de formulário tem propriedades diferentes, tem estados diferentes e tem um nome de formulário. Aqui deixe-me mostrar-lhe diferentes estados de um bloco de formulário. Quando trabalhamos com formulários, temos o normal, um sucesso e estados de erro. Qual é a diferença entre eles? O estado normal é aquele que você está olhando. É apenas uma forma normal. O estado de sucesso, na verdade, mostra uma mensagem para o usuário. Uma vez que o formulário tenha sido enviado com sucesso, podemos personalizar facilmente cada um desses estados. O estado do erro mostra um erro para o usuário quando algo dá errado. Por enquanto, você não pode ver o texto porque já alteramos o estilo dessas camadas de texto. Mas se eu selecionar este bloco de texto, eu posso ir em frente e modificar a cor para preto, e agora você pode vê-lo melhor. Quando você deseja projetar diferentes estados de seu formulário, você precisa se certificar de selecionar primeiro o bloco de formulário no navegador, não os elementos de formulário. Primeiro selecione seu bloco de formulário e, em seguida, você pode clicar duas vezes em [inaudível]. Ou você pode simplesmente selecionar seu bloco de formulário e clicar neste ícone de configurações, assim como isso. Agora vamos falar sobre a formação. Bem, você pode precisar usar diferentes formulários em seu site e é importante nomeá-los corretamente, porque mais tarde, quando recebermos envios de formulários, podemos facilmente reconhecer quais informações estão associadas a qual formulário. Vou nomear este formulário de demonstração. Eu vou para o normal. Esses elementos têm algum estilo por padrão que podemos substituir. Não vamos falar de estilo agora, mas vou mostrar a vocês que este é um campo de texto. Um campo de texto também tem algumas propriedades. Se eu selecionar o campo de texto, se eu clicar duas vezes nele, você pode ver que as configurações de entrada aparecem. Cada campo de texto tem configurações diferentes, como nome, espaço reservado, tipo de texto, e aqui temos as opções necessárias e focagem automática. Você pode facilmente nomear esses campos de texto. Por exemplo, se esse campo de texto estiver associado a esse rótulo de nome, podemos simplesmente chamá-lo de nome. Se vai ser sobrenome, podemos simplesmente nomeá-lo por sobrenome aqui. Temos o suporte do lugar também. Se eu quiser apresentar um lugar titular direito no campo de texto, eu posso escrevê-lo aqui. Vamos escrever para digitar seu sobrenome. Simplesmente assim. Temos o tipo de texto também. Por padrão, ele é definido como plano e isso significa que o texto pode ser qualquer coisa. Podemos configurá-lo para e-mail, podemos configurá-lo para senha, podemos configurá-lo para telefone ou número. Por que isso importa? Porque aqui para o campo de texto de email, o Tipo de texto já está definido como email. Por quê? Porque quando o usuário tenta preencher esses campos de texto e clicar no botão “Enviar”, esse campo de texto verifica se há um endereço de e-mail válido ou não. Por exemplo, se tivermos algo como test@, ele dará ao usuário um erro. Deve haver um endereço de e-mail válido. Ele não verifica se esse endereço de e-mail existe ou não porque não é possível, mas apenas verifica o formato desse endereço de e-mail. O mesmo acontece com senha, telefone ou número. Agora vamos falar sobre essas duas opções. Temos a opção necessária. Se eu marcar essa caixa de seleção, isso significa que o usuário deve preencher esses campos de texto. Se eu desmarcar isso, esse é um campo de texto opcional. Marque eu verifico o foco automático, isso significa que sempre que a página é carregada, este campo de texto é focagem automática e o cursor já está piscando. Vou configurá-lo como obrigatório, e vou desmarcar o autofocus. Em seguida, vamos selecionar este botão “Enviar”. Se eu clicar duas vezes sobre isso, eu posso simplesmente modificar essas propriedades. Existem duas propriedades quando se trata de botões de forma, botão e texto de espera. Posso configurá-lo para qualquer coisa como enviar, por exemplo, e depois o texto de espera. Esse texto aparece quando o usuário clica nesse botão e ele está aguardando o envio do formulário. Deixe-me modificar isso para esperar um momento. A propósito, não é a melhor mensagem de espera. Agora, vamos tentar. Para tentar um formulário, você não pode simplesmente ir para o modo de visualização porque ele não funciona assim. Você precisa primeiro publicar seu site. Não falamos sobre a opção de publicação, mas é tão simples. Primeiro, vou clicar neste botão Publicar no canto superior direito. Não precisamos mudar nada. Basta clicar em Publicar para selecionar os domínios. Simplesmente assim. Este é um domínio único criado pela Webflow para o nosso projeto. Então, uma vez que este botão fica verde, isso significa que nosso site é publicado. Se eu clicar neste botão, este pequeno ícone ao lado deste link, eu posso verificar o meu site. Deixe-me ampliar. Aqui está a nossa forma. Deixe-me ir em frente e verificar o tipo deste campo de texto porque eu mudei para número erroneamente deve ser simples, já que é apenas o sobrenome. Vou publicar meu site mais uma vez, e vou atualizar esta página. Lá vamos nós. Agora, este é um campo de texto simples. Aqui, deixe-me escrever o teste. Para o endereço de e-mail vou escrever test@. Este não é um endereço de e-mail correto, este não é um formato correto para esse endereço de e-mail. Se eu apertar o botão “Enviar”, veja o que acontece. Insira uma parte a seguir @. Isso é o que acontece quando você escolhe o e-mail, tipo de campo de texto. Então vamos escrever gmail.com. Agora tudo deve funcionar perfeitamente. Vou apertar o botão “Enviar”. Espere um momento, e receberemos a mensagem de sucesso. Claro, o estilo não é bom porque já mudamos a cor, mas você acabou de ter a idéia. Se algo estiver errado com a conexão com a Internet, obteremos o erro. Deixe-me atualizar a página e eu vou apenas desconectar minha conexão com a Internet por um segundo. Aqui, vamos escrever o Teste 2 e eu vou escrever outro endereço de e-mail, hello@gmail.com. Se eu apertar o botão “Enviar”, veja o que acontece. Oops, algo deu errado ao enviar o formulário. Esta é a diferença entre diferentes estados de um formulário. Agora vamos ver como podemos obter acesso aos envios de formulário. Bem, precisamos ir para as configurações do projeto. Como te mostrei antes. Se você dirigir-se para este ícone W no canto superior esquerdo, e se você passar o mouse sobre ele, você verá este ícone de menu de hambúrguer. Eu vou clicar sobre isso, e eu vou para Configurações do projeto. A partir daqui eu vou para a guia Formulários. Aqui temos diferentes configurações de um formulário. Podemos especificar o nome do formulário aqui, podemos enviar os envios de formulário para um endereço de e-mail específico, podemos escrever a linha de assunto, podemos especificar um endereço de e-mail para respostas, e também o modelo de e-mail. Falaremos sobre essas opções mais tarde. Mas, por enquanto, você só precisa saber que se você rolar para baixo aqui, você pode encontrar um formulário de dados de envio. Como podemos ver, enviamos um formulário. Ele diz sobrenome, Teste, endereço de e-mail test@gmail.com Você pode simplesmente excluir o envio. Você pode baixar todos os dados de envio usando este botão CSV de download como um arquivo CSV. Uma coisa que você precisa ter em mente é que há um limite para receber envios. Se você não adicionar hospedagem ao seu projeto, você pode obter até 50 envios por mês. Vamos mergulhar nessas configurações avançadas de formulários mais tarde quando começarmos a criar nossos projetos. Mas isso é basicamente tudo sobre formas. Vamos voltar para o designer. Vou apertar o botão “Designer”. Vou selecionar meu bloco de formulários assim. Deixe-me verificar outros elementos aqui. Aqui temos uma área de texto de entrada de rótulo. Podemos simplesmente arrastar e soltar qualquer um desses elementos em nosso bloco de formulário. Todos esses elementos têm suas próprias propriedades. Deixe-me ir em frente e arrastar e soltar uma caixa de seleção aqui. Assim, tem propriedades diferentes. Podemos arrastar e soltar um elemento de seleção aqui. Se eu quiser especificar as opções de seleção, posso selecionar este campo de seleção e ir para as configurações de elementos. A partir daqui, você pode ver que nós temos as escolhas. Temos selecionar 1, primeira escolha, segunda escolha, terceira escolha. Podemos simplesmente modificá-los, mas vamos pré-visualizar. Lá vamos nós. É assim que parece. A caixa de seleção pode ser marcada e desmarcada. A área de texto pode ser ampliada e tudo funciona como esperado. 19. Barra de Nav: Hoje em dia, a maioria dos sites tem uma barra de navegação no topo. Se você der uma olhada em alguns sites famosos, você pode ver que eles usam uma barra de navegação a fim de mostrar algumas opções para o usuário. Por exemplo, aqui temos a barra de navegação que tem alguns menus como MAC, iPad, iPhone, ou aqui temos a barra de navegação que tem produtos, casos de uso, desenvolvedores, etc, e também um botão. A maioria das barras de navegação tem alguns elementos comuns, como um logotipo que é clicável. Este é um bloco Link. Eles têm algumas opções de menu. Eles também são geralmente blocos Link, e eles têm um botão no lado direito. Podemos criar barra de navegação manualmente usando um bloco Div e um link blocos e outros elementos. Mas há um elementos pré-construídos no Webflow. Se eu rolar para baixo abaixo dos Componentes, há a barra de navegação. Se eu arrastar e soltar no meu elemento corpo aqui, como você pode ver, esta barra de navegação foi adicionada ao meu Canvas e tem alguns elementos. Dentro há um recipiente, é apenas um bloco Div, já falamos sobre isso, e dentro há alguns outros elementos. Há um bloco Link em que vamos colocar o nosso logotipo, e então temos os menus de navegação. Este é outro bloco Div que contém todos esses links. Finalmente, há o botão Menu. Mas não podemos ver nenhum botão de menu aqui. Espere um segundo. Um elemento navbar é dinâmico e responsivo. Se passarmos do ponto de interrupção da área de trabalho para o ponto de interrupção do tablet, você pode ver o que acontece. Todos os links do menu desapareceram, e em vez disso, temos o botão do menu do hambúrguer. Isto está associado a este botão de menu no navegador, que não estava visível no ponto de interrupção da área de trabalho. A barra de navegação já está responsiva. Se eu visualizar este projeto, este botão Menu aparece e não há logotipo porque ainda não adicionamos um. Isto é basicamente como uma barra de navegação funciona. Podemos personalizar esses links. Se clicar duas vezes em qualquer um desses links, podemos modificar o texto. Também podemos selecionar este elemento Nav Link, e se eu clicar neste ícone Configurações, Eu posso modificar a URL. Podemos pedir isso para levar o usuário a uma página específica ou a uma seção específica do nosso site. Isto é apenas um bloco Link. Portanto, temos todas as propriedades de um bloco Link. Um navbar é basicamente um bloco Div que já é responsivo e tem alguns elementos pré-construídos que podemos usar. Se você quiser criar uma barra de navegação personalizada, tudo bem. Podemos fazer isso simplesmente. Mas na maioria das vezes, usaremos o elemento navbar porque torna nossa vida muito mais fácil, já que já é responsiva e tudo está pronto para nós. 20. Mesa de luz: Se você quiser que suas imagens ou vídeos sejam exibidos em uma exibição em tela cheia em qualquer dispositivo, use uma lightbox. Se você passar para a seção de componentes no painel Adicionar, poderá encontrar um componente lightbox. Vou arrastá-lo e soltá-lo no meu contêiner. Lá vamos nós. Este é um link lightbox e, para trabalhar com isso, precisamos de uma miniatura. Se eu clicar duas vezes sobre isso, eu posso escolher a imagem dentro porque por padrão ela tem uma imagem, e dos meus ativos, eu vou escolher essa imagem, e eu vou diminuir a largura e a altura para 300 pixels e a altura vai ser de 400 pixels, exatamente assim. Este é um link lightbox. Vamos pré-visualizar e ver o que acontece. Se eu clicar em que nada acontece porque para que uma lightbox funcione, precisamos especificar uma mídia para isso. Precisamos ir em frente e selecionar nosso link lightbox. Então precisamos ir para as configurações de elementos ao lado do painel lateral e a partir daqui podemos encontrar configurações de lightbox. Há essa seção de mídia. Podemos escolher uma imagem ou um vídeo. Vamos começar com uma imagem. Vou selecionar uma imagem, a mesma imagem dos meus bens, lá vamos nós. Há esta legenda aqui. Nós não vamos adicionar uma legenda por enquanto porque eu vou mostrar a diferença entre essas duas opções. Eu vou salvar e depois vamos pré-visualizar. Lá vamos nós, se eu clicar no meu link lightbox, podemos visualizar esta imagem em uma visualização em tela cheia em qualquer dispositivo. Ele funciona perfeitamente em dispositivos móveis, tablets ou qualquer tela, exatamente assim. Mas e se eu quiser ter vários links lightbox? Bem, isso é muito simples. Eu posso simplesmente arrastar e soltar mais lightboxes, ou eu posso simplesmente copiar esses lightbox e colá-lo novamente e novamente. Deixe-me remover este novo link lightbox. Vou copiar este link lightbox, comando C ou controle C e comando V ou controle V, mais uma vez, para obter três links de lightbox diferentes. Por padrão, não há preenchimento entre eles então eu vou selecionar este link lightbox, o primeiro e eu vou para o espaçamento e apenas adicionar algum preenchimento direito como 10 pixels, e como você pode ver, imediatamente, uma classe foi criada. Ainda não falamos sobre aulas, mas por enquanto, só precisamos desse link de luz de nome. Mais tarde vamos mergulhar nas aulas. Eu vou selecionar a segunda lightbox e daqui eu vou procurar uma classe de link lightbox, assim como, e uma vez que eu aplicar esta classe para o segundo link lightbox, esses elementos podem usar todos os estilos que eu já defini para esta classe em particular. Agora eu vou mudar a miniatura desses dois links lightbox. Deixe-me clicar duas vezes sobre ele e substituir a imagem por esta e para a terceira, eu vou fazer a mesma coisa, lá vamos nós. Nossas miniaturas estão prontas. Agora vamos pré-visualizar. O primeiro parece bem. A segunda mostra a mesma imagem porque nós apenas copiamos e colamos, a terceira é a mesma. O que precisamos fazer é selecionar nosso segundo link lightbox, em seguida, passar para as configurações de elementos, e a partir daqui, precisamos remover essa mídia e adicionar outra imagem que corresponda a essa miniatura. Legal. Vou guardá-lo para o terceiro. Eu vou fazer a mesma coisa. Vou remover esta mídia e escolher a imagem adequada e salvar, agora deve funcionar perfeitamente. Vamos dar uma chance. Vou clicar na primeira imagem, na segunda e na terceira. Mas aqui, como você pode ver, não há legenda. O que acontece se eu adicionar uma legenda à nossa mídia? Vamos lá ver isso. Vamos selecionar o primeiro link lightbox, e a partir daqui eu vou clicar nesta primeira imagem, e vamos adicionar uma legenda. Esta é uma boa imagem, legal, salvar. Agora vamos ver o que acontece se eu clicar nele. Como você pode ver, uma legenda foi adicionada à parte inferior desta imagem. Isso é muito útil, mas e se eu quiser conectar minhas caixas de luz juntas, para que possamos fazer isso? Isso é muito simples. Primeiro, precisamos selecionar este link lightbox, o primeiro, e sob a mídia há uma caixa de seleção que diz link com outras caixas de luz. Se eu verificar isso, aqui eu posso especificar um nome de grupo. É muito importante porque se você tiver várias caixas de luz em uma página, é assim que podemos conectá-las corretamente. Vamos dar-lhe um nome. Vou escrever o principal, vou copiá-lo. Deixe-me selecionar meu segundo link lightbox, vou colar esse nome aqui. Para o terceiro, eu vou fazer a mesma coisa, e agora nossos links lightbox estão conectados. Vamos dar uma chance. Vou clicar neste primeiro link e lá vamos nós. Agora temos essa interação deslizante. Eu posso clicar neste botão de seta para a direita e eu posso simplesmente mover através desses itens. Isso é muito útil. Por exemplo, se você quiser criar um site de comércio eletrônico e precisar mostrar imagens diferentes de um determinado produto, você pode usar uma lightbox. Vamos recapitular. Para trabalhar com lightboxes, primeiro, você precisa arrastar e soltar um link lightbox em seu Canvas. Em segundo lugar, você precisa escolher sua miniatura, que é essa imagem. Em terceiro lugar, o que é tão importante, você precisa adicionar uma mídia para esse link específico lightbox. Se você quiser conectar seus links lightbox, você precisa verificar esse link com outras lightboxes e especificar um nome de grupo. Pessoal, espero que tenham gostado deste vídeo. Vejo-te no próximo. 21. Controle deslizante: Se você quiser criar uma galeria de imagens ou uma apresentação de slides para o seu site, você pode usar o componente de controle deslizante. A partir daqui, você pode arrastar um controle deslizante e soltá-lo dentro do contêiner, ou pode colocá-lo onde quiser. Vou colocá-lo dentro do contêiner, e ele ocupa toda a largura do meu contêiner. Como você pode ver, este controle deslizante tem vários elementos. Se eu expandi-lo, você pode ver que existem quatro componentes principais aqui: a máscara, que inclui nossos slides, que inclui nossos slides seta para a esquerda, o link de seta para a direita, e o Slide Nav, que é este indicador na parte inferior. Se você clicar nesses indicadores, você pode se mover entre seus slides, e se você quiser adicionar mais slides, você precisa selecionar o controle deslizante e ir para as configurações do controle deslizante. A partir daqui, você pode obter acesso às configurações do controle deslizante. Temos muitas opções para modificar. Vamos passar por cada um deles. Se você quiser adicionar mais slides, você pode pressionar este botão Adicionar Slide, exatamente assim. Se você quiser percorrer seus slides, você tem maneiras diferentes. Primeiro, você pode clicar nesses indicadores, em segundo lugar, você pode usar essas setas aqui nas configurações do controle deslizante, e em terceiro lugar, se você sabe exatamente onde deseja ir, você pode escolher seu slide aqui, por exemplo, slide 3 ou um slide 5. Deixe-me remover estes dois slides por enquanto. Vou explicar as diferentes opções aqui. O controle deslizante tem propriedades diferentes. Ele tem a propriedade de animação, o método de atenuação e a duração, e também você tem algumas configurações avançadas aqui. A animação permite controlar o tipo de transição que ocorre. Você pode escolher slide, crossfade, fade out- in, fade over e slide over. Você pode verificá-los e ver qual deles se adapta às suas necessidades. O método de atenuação também está relacionado à animação e à transição. Como é um tópico mais avançado, não vamos falar sobre isso agora, mas depois, quando começarmos a falar sobre interações, falaremos muito sobre o método de flexibilização. Então temos a duração. Esta é a duração da nossa transição, e a unidade é de milissegundos. Aqui, se eu especificar 1.000, a animação ocorre precisamente em um segundo. Aqui, também temos opções diferentes. Temos os slides repetitivos infinitos, temos desativar gestos de deslizamento. Por padrão, o controle deslizante tem os gestos de deslizar sempre que o usuário interage com ele no tablet ou telefone. Você pode desabilitar essa opção se desejar. Você tem a opção de reprodução automática de slides. Você tem a pele em cada extremidade. O que ele faz é isto. Se eu marcar esta opção, ela esconde a seta para a esquerda para o primeiro slide e a seta para a direita para o último slide. Vamos tentar. Aqui, não temos a seta para a esquerda. Então, se eu for para o terceiro, aqui, não temos a seta certa. Você pode personalizar essas opções da maneira que quiser. Então temos o slide Nav. Isso é tudo sobre esses indicadores. Eu posso checar isso ou você pode desmarcar isso para obter esses quadrados. Você pode verificar rótulos numéricos, você pode verificar sombra, inverter cores, e também você pode especificar o espaçamento em pixels, como eu posso especificar 10. Eu vou desmarcar todos eles e eu vou verificar em torno dele. Ótima. Agora, vamos adicionar conteúdo aos nossos slides. Um slide pode conter qualquer tipo de recipiente. Você pode adicionar alguns espaços em branco div a ele, você pode adicionar imagens de fundo, você pode adicionar uma imagem a ele. Isso é totalmente com você. Mas, por enquanto, vou selecionar este slide 1, e vou rolar para baixo no painel de estilos. Do fundo, vou apertar “Image and “Gradient” e escolher “Image”. Dos meus bens, vou escolher uma destas imagens. Legal. Vamos definir a posição para o centro, e ele vai cobrir assim, e não azulejo. Para a próxima, vou fazer a mesma coisa. Deixe-me escolher a minha imagem, assim como esta. Deixe-me mudar a posição e o tamanho. Por último, mas não menos importante , para o último slide, vou escolher outra imagem. Este, vamos mudar a posição para o centro, e o tamanho vai ser cobertura e não azulejo. Ótima. Nosso controle deslizante está pronto. No entanto, vou modificar sua altura. Vou selecionar o controle deslizante, certifique-se de selecionar o seu elemento deslizante. A partir do tamanho, posso especificar uma altura específica, por exemplo, 500 pixels. Parece muito melhor agora. Agora, se eu clicar nesses indicadores, posso me mover entre essas imagens. Agora, vou selecionar o controle deslizante e, em seguida, vamos para as configurações de elementos. A partir daqui, vou verificar os slides de reprodução automática. Aqui, posso especificar o tempo ou atraso. Por padrão, ele está definido para 4.000 milissegundos. Isso significa que a transição ocorre em precisamente quatro segundos. Se eu visualizá-lo agora, após quatro segundos, a transição ocorre. Você pode modificar isso. Vou ajustá-lo para 1.000. Lá vamos nós. É demais. Talvez eu possa ajustá-lo para 2.000. Agora, é melhor. Como eu mencionei antes, um slide pode conter qualquer coisa. Aqui, posso adicionar alguns outros elementos, por exemplo, um título. Vamos arrastar e soltar um cabeçalho dentro deste slide. Lá vamos nós. Posso dar-lhe um título, Slide 1. Posso modificar suas propriedades CSS, tudo. Para cada slide, posso fazer a mesma coisa. Posso acrescentar um parágrafo também aqui. Tudo bem, pessoal. Isso é tudo para os componentes do controle deslizante. Espero que tenha gostado, e te vejo no próximo vídeo. 22. Guia de abas: Às vezes, talvez seja necessário ter algum conteúdo com guias, algum conteúdo interativo com guias. Nesse caso, podemos usar o elemento tabs. Sob a seção de componentes, temos o elemento abas. Um dos casos de uso mais comuns de guias é a seção de preços de diferentes sites. Aqui, como você pode ver, eu preparei dois blocos Div diferentes e dentro, existem alguns outros blocos Div com alguns elementos. O que vamos fazer é colocar esses blocos de preços em guias. A linha superior é o nosso plano mensal e a linha inferior é o nosso plano anual. Vamos precisar de duas guias diferentes. Mas primeiro, vamos em frente e arrastar e soltar o elemento abas no meu contêiner, assim mesmo. Por padrão, como você pode ver, o elemento tabs tem três guias diferentes. Basicamente, o elemento tabs tem componentes diferentes. O menu de guias, que são essas guias na parte superior, e o conteúdo das guias. Dentro do conteúdo das abas, como você pode ver, é uma máscara. Este ícone indica que é uma máscara. Dentro destas abas conteúdo, temos três painéis diferentes. Temos Tab Pane, Tab 1, Tab 2 e Tab 3. O conteúdo da nossa guia deve ser colocado dentro do painel de guias. Sempre que queremos modificar o nome das abas, precisamos trabalhar com o menu abas. Aqui, se eu apenas clicar duas vezes sobre este texto, eu posso modificá-lo. Vamos escrever mensalmente e para o próximo, vou escrever anualmente. Este terceiro não é necessário. Posso clicar em Excluir ou Backspace no teclado para remover este link de guia. Assim, agora eu tenho duas guias diferentes, mas e o conteúdo? Bem, primeiro, eu vou selecionar este bloco Div, esta marca de preço de topo. Vou arrastá-lo e soltá-lo dentro do primeiro painel de abas, certifique-se de que ele está aninhado corretamente. Dê uma olhada no seu navegador e certifique-se de que ele está aninhado dentro do Painel de Tabulação 1, exatamente assim. Agora, esta caixa de preços. Estas são caixas, fazem parte do Painel de Tabulação 1. Vamos fazer a mesma coisa para este plano inferior ou anual. Vou arrastá-lo e soltá-lo. Vou certificar-me de que está aninhado dentro do Painel de Tabulação 2, assim, mas agora é invisível. A partir de agora, se eu quiser conferir meu conteúdo de guias, eu preciso clicar nesses painéis de guias. Por exemplo, vou clicar no Painel de Tabulação 1. Este é o nosso plano mensal. Se eu clicar no Painel de Tab 2, este é o nosso plano anual. Por padrão, não há margem superior, então eu vou selecionar o conteúdo de guias, que é basicamente um wrapper para nossos painéis. Então eu vou dar uma margem superior, talvez 30 pixels. Vamos ver o que acontece agora. Vou pré-visualizar. Estamos no plano anual. Vou clicar em mensalmente. Lá vamos nós. Consegues ver esta transição? É basicamente assim que as abas funcionam. Claro, você pode estilizar essas guias e falaremos sobre estilos mais tarde. Mas, por enquanto, você só precisa saber como o elemento tab funciona. Se eu quiser adicionar mais guias, eu posso selecionar meu elemento tabs no navegador. Se eu passar para as configurações da aba, eu posso clicar neste botão Adicionar, assim como para adicionar mais guias. Como você pode ver, Tab 3 foi adicionado aqui. Posso reorganizar minhas guias assim. Posso definir a guia inicial que o usuário vê. Por exemplo, vai ser Tab 1. Vou remover o Tab 3 por enquanto. Você pode renomear as guias aqui, mas apenas em termos de organização. Se eu renomeá-lo aqui, nada muda na guia real, no link real porque este é um texto e você precisa modificá-lo na tela. Mas se você quiser organizá-los corretamente, você pode simplesmente escrever um por exemplo, e para isso também, apenas assim, você pode modificar o método fácil. Por enquanto, você não sabe o que é, mas falaremos sobre isso mais tarde. É tudo sobre a animação. Aqui o fade-in é definido para 300 milissegundos e o fade-out é definido para 100 milissegundos. É muito rápido. Para ver a verdadeira diferença aqui, eu vou configurá-la para, o desvanecimento vai ser 500 milissegundos e o desvanecimento vai ser 500 milissegundos também. Agora vamos pré-visualizar. O plano mensal já está selecionado. Eu vou clicar em anualmente. Lá vamos nós. Está muito mais lento agora. Vamos recapitular. O elemento tabs tem dois componentes principais, menu de guias e conteúdo de guias. O menu de abas inclui todas essas guias. Estes links de guia na parte superior. O conteúdo das abas inclui nossos painéis de guias aqui. Sempre que quisermos modificar o conteúdo de nossas guias, devemos apenas ir para o conteúdo das guias e selecionar nosso painel de guias. Se você quiser modificar a aparência de nossos links de guia ou mesmo o nome, o texto, devemos sempre ir para o menu abas e escolher o nosso link guia. Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 23. Mídias sociais: Acho que os botões de mídia social do seu site podem ajudar a gerar mais tráfego para suas contas de mídia social. Para fazer isso, você pode usar os componentes do Facebook ou do Twitter. Vou começar com o Facebook. Deixe-me arrastar e soltar no meu contêiner. Como você pode ver, por padrão, há um botão semelhante. Há o número padrão como, e esta inscrição para ver o que seus amigos gostam de sentença. Aqui, você pode especificar o URL da conta do Facebook. Pode ser a conta do Facebook dos clientes ou sua própria conta do Facebook se você estiver construindo seu próprio site. Você pode modificar o layout aqui de padrão, para caixa, para botão. Isso é totalmente com você. Você pode especificar a largura e altura aqui, e também você pode modificar o idioma. Por exemplo, eu posso escolher alemão, eu posso mudá-lo para espanhol, apenas assim. Mas, por enquanto, vamos manter em inglês. Se eu visualizar isso, se você clicar sobre isso, você será levado para o Facebook. Mas como não especificamos nenhuma conta aqui, vamos apenas para facebook.com. Mas se você especificar uma conta aqui, o usuário pode gostar dessa conta em particular. Mas e o Twitter? Deixe-me remover este componente do Facebook. Vou arrastar e soltar componente, os componentes do Twitter aqui. Vamos ver o que temos aqui. Temos diferentes opções, tipos de botões como Tweet ou Seguir. Se você quiser que o usuário tweet algo, você pode escolher o Tweet e aqui você pode especificar o URL do site. Aqui você pode especificar um texto de tweet como, “Confira”. Então você pode decidir se a bolha deve ser mostrada ou não, assim. Você pode modificar o layout. Aqui temos o layout horizontal. Você pode alterá-lo para vertical ou o tamanho, você pode alterá-lo para grande. Vou esconder a bolha por enquanto. Agora vamos pré-visualizar isso. Se eu visualizá-lo e eu clicar sobre isso, lá vamos nós. Eu posso ver isso Confira webflow.com. Esta é a URL que podemos especificar quando estamos modificando as preferências desse componente. Se eu for seguir, aqui, posso especificar o nome de usuário das contas, sem o sinal @, porque o sinal @ já está lá. Eu posso escrever meu nome de usuário de contas e imediatamente o número de seguidores dessa conta em particular será mostrado aqui. Vou esconder a bolha por enquanto, e vamos torná-la maior. Agora vamos ver o que acontece. Se eu clicar nele, eu posso decidir se eu quero seguir esta página ou não. Já que esta é a minha página, não vou seguir essa. Vamos voltar para trás. Isso é tudo sobre componentes de mídia social. Espero que tenha gostado, e te vejo depois. 24. Pesquisa: Se você quiser adicionar a funcionalidade de pesquisa ao seu site, você pode usar o elemento de pesquisa, na verdade este componente de pesquisa aqui sob a seção de componentes. Este é um componente muito poderoso porque você não precisa se preocupar em indexar suas páginas e preparar seus resultados de pesquisa. O que você precisa fazer é simplesmente arrastá-lo e soltá-lo em seu Canvas. Vou colocá-lo dentro da minha seção, como você pode ver aqui. Deixe-me adicionar um recipiente aqui que você poderia vê-lo facilmente. Vou pô-lo dentro do meu contentor. Agora, parece melhor. Também vou modificar a cor da palavra de pesquisa para branco. Agora, é bem visível. Este é apenas um campo de texto, e se você clicar duas vezes sobre ele, você pode encontrar esta propriedade placeholder aqui que você pode modificar. Você também pode ativar ou desativar o foco automático. Isso é totalmente com você. Uma coisa a mencionar é que quando você adiciona um elemento de pesquisa ao seu Canvas, uma nova página de utilitário é criada automaticamente para você. Se você vai para as páginas aqui, você pode ver que em páginas de utilitários, temos esta nova página de resultados de pesquisa. Se eu clicar nisso, lá vamos nós. Você pode ver que temos alguns resultados de amostra aqui. Deixe-me modificar a cor destes leva também para branco e este para branco também. Legal. Isso é basicamente o que o usuário vê. Você pode facilmente estilizá-lo, mas você precisa entender que ele não funciona para todos os sites e todos os planos. Por quê? Se você vai para as configurações aqui e você vai para a pesquisa, você pode ver que ele diz, uma vez que você configurar o CMS ou a hospedagem de negócios, Webflow indexa automaticamente o conteúdo do seu site publicado para criar um índice de pesquisa atualizado. Sem o CMS ou hospedagem de negócios, você não pode usar essa funcionalidade de pesquisa. Se você quiser trabalhar em um projeto cliente e eles precisarem dessa funcionalidade de pesquisa, você precisa se certificar de adicionar a hospedagem CMS ou a hospedagem de negócios ao seu projeto. Falaremos sobre esses planos mais tarde, mas por enquanto você só precisa saber que essa funcionalidade existe. Se você precisa de uma barra de pesquisa, você pode usar isso. 25. Símbolo: Como designers e desenvolvedores, sempre tentamos não nos repetir. Queremos evitar copiar e colar e refazer tudo de novo e de novo e de novo. Para fazer isso, precisamos aprender como podemos criar um elemento uma vez e reutilizá-lo várias vezes em nosso projeto. Como podemos fazer isso? Bem, podemos usar símbolos. Se eu for para a seção Adicionar e tentar arrastar e soltar uma barra de navegação aqui. Assim mesmo, vou colocá-lo bem abaixo do meu corpo. Aqui, temos uma barra de navegação e vamos supor que queremos transformá-la em um símbolo. Como podemos fazer isso? Temos maneiras diferentes de fazer isso. Primeiro, podemos ir para a página Símbolos aqui e, em seguida, podemos apertar o botão Criar Novo Símbolo, e precisamos nomear o nosso símbolo. Vou chamá-lo de Navbar e depois Criar Símbolo. Como você pode ver, ele fica verde, um limite verde aparece aqui. Significa que o nosso símbolo foi criado com sucesso. Mas agora estamos dentro do símbolo mestre. Você pode pressionar Escape para sair do símbolo mestre ou clicar neste botão verde Voltar à Instância. Aqui temos um símbolo, como podemos reutilizar isso? Bem, vamos em frente e criar uma nova página. Eu vou para Pages e a partir daqui eu vou clicar em Criar Nova Página. Vamos dar um nome a ele. Vou chamá-lo de Contact and Create. Agora temos uma tela vazia. Eu vou para Símbolos daqui nós temos a nossa barra de navegação. Se eu arrastar e soltar aqui, lá vamos nós temos a nossa barra de navegação. Mas espere, não podemos copiar e colar em vez de criar símbolos? Sim, podemos, mas não é uma maneira eficiente. Por quê? Porque quando você copia e cola um elemento, se você fizer qualquer alteração em um desses elementos que mudam é exclusivo desse elemento específico e isso não afeta os elementos duplicados. Mas quando usamos símbolos, deixe-me mostrar como funciona. Vamos supor que eu queira mudar este contato, este contato leva para entrar em contato conosco em vez disso. Para fazer isso, primeiro você precisa ir para o símbolo mestre. Se você clicar duas vezes sobre isso, como você pode ver agora estamos dentro do símbolo mestre. Posso clicar duas vezes sobre este texto e vou modificar isso para Fale Conosco. Então eu vou apertar o botão Voltar para Instância aqui. Agora mudamos isso aqui em nossa página de contato. Se eu voltar à minha página inicial, você pode ver que a alteração foi aplicada automaticamente a esta instância também. Quando você trabalha com símbolos, você faz alterações uma vez e as alterações se aplicam automaticamente a todas as ocorrências desse símbolo específico. É tão poderoso porque imagine que você tem 100 páginas diferentes em seu site. Se você quiser apenas ir em frente manualmente e modificar sua barra de navegação ou qualquer outro elemento um por um, vai levar muito tempo e acredite em mim, é um processo chato. Se você pode usar símbolos, certifique-se de usá-lo. Geralmente é útil para criar barras de navegação, rodapés. Falaremos sobre os casos de uso mais tarde. Mas, por enquanto, vou mostrar-lhe como você pode usá-los e como você pode modificar o conteúdo, como você pode substituir o conteúdo aqui. Até agora aprendemos como criar um símbolo, como reutilizar um símbolo, como editar um símbolo. Agora, vamos falar sobre sobressair. Como podemos anular o conteúdo dos nossos símbolos. Aqui, eu criei um cartão simples com alguns elementos, um cabeçalho, uma imagem, um parágrafo e um botão. Vou transformá-lo em um símbolo. A outra forma de criar um símbolo é clicar com o botão direito do mouse no seu elemento e, a partir daqui, você pode escolher Criar Símbolo, exatamente assim. Agora podemos nomeá-lo, digamos cartão. Nosso símbolo de cartão está pronto. Agora o que eu vou fazer é copiar e colar duas vezes. Vou acertar o Comando C ou o Controle C e o Comando V ou o Controle V duas vezes. Estes dois novos cartões são instâncias do nosso símbolo de cartão. Se eu fizer alguma alteração no primeiro cartão, por exemplo, se eu mudar o tamanho desta imagem, as alterações se aplicarão imediatamente a outros cartões também. Se eu modificar esse cabeçalho para H2, você pode ver que as alterações se aplicam a todas as instâncias. Mas como podemos substituir o conteúdo dessas duas instâncias? Como temos três cartões diferentes e com certeza não vamos usar o mesmo conteúdo para todos os cartões, precisamos aprender como podemos substituir o conteúdo. Para fazer isso, primeiro você precisa criar alguns campos para seus símbolos. Vou clicar duas vezes sobre este símbolo para ir para o símbolo mestre e eu serei capaz de editar as coisas. Em seguida, vou selecionar o elemento para o qual eu quero criar um campo. Vou começar com esta imagem porque esta imagem deve ser substituível. Vou selecionar isso. Se eu for para as Configurações de Imagem aqui na parte superior, eu posso ver que há Configurações de Imagem aqui e eu tenho este botão roxo direito no canto superior esquerdo. Se eu passar o mouse sobre isso, você pode ver que ele vira um botão de mais. Eu vou clicar nele e então eu vou apertar “Novo campo”, exatamente assim. Como você pode ver, “ Este novo campo será automaticamente vinculado a esta substituição de imagem”, e eu vou chamá-lo de Imagem. Criar e vincular, ele diz que você acabou de criar e vincular um campo de substituição. Agora eu vou selecionar este título e a partir daqui, eu vou clicar neste link para campo, Criar novo campo e vamos chamá-lo de Título. Criar e vincular. Ótima. Eu vou fazer a mesma coisa para o parágrafo. Vamos criar um novo campo. Aqui, eu vou escrever descrição, Criar e Link e isso é tudo. Eu não vou criar um campo para o fundo, mas se você quiser você pode fazer isso também. Como é que funciona? Primeiro, deixe-me sair do símbolo mestre. Vou clicar em “Voltar à Instância”. Agora, se eu selecionar meu segundo cartão no lado direito, você pode ver que temos Substituições de Instância. Temos a imagem, estes são os campos que acabamos de criar. Temos a imagem, o título e a descrição. Cada campo tem um conteúdo padrão. Vou substituir esta imagem simplesmente por isto. Vou modificar o texto aqui para o cartão 2, e podemos modificar o parágrafo também assim. Então deixe-me escolher a terceira carta e vamos fazer a mesma coisa para esta. Este vai ser o Cartão 3. Para este eu vou remover a primeira frase assim. Isto é basicamente como você pode substituir seu conteúdo de símbolos. A última coisa que vou falar é desvincular seus símbolos. Como você pode desvincular um símbolo? Há momentos em que você deseja fazer algumas alterações e você deseja que essas alterações sejam aplicadas a elementos específicos. Para fazer isso, primeiro, selecione seu símbolo, clique com o botão direito do mouse nele. A partir daqui você pode encontrar Unlink Instance. Se você clicar em Editar símbolo principal, você será levado para o símbolo mestre e você será capaz de editá-lo. Mas se você desvincular instância, assim, agora é apenas uma div simples. Como você pode ver, ele não é mais um símbolo e você pode reconhecer isso do navegador, porque aqui o ícone desses símbolos é verde. Mas este é apenas um bloco div simples. Agora, se eu mudar uma dimensão desta imagem, esta mudança é única para este cartão específico.. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 26. Atalhos importantes: Neste vídeo, vamos falar sobre os atalhos do Webflow. Quando trabalhamos em um projeto, talvez precisemos usar alguns atalhos para acelerar nosso processo de design, e neste vídeo, vou falar sobre os mais importantes porque há muitos atalhos diferentes que você pode usar, mas nós não vamos falar sobre todos eles porque na maioria das vezes nós não vamos usar todos esses atalhos. Se você passar para o canto inferior esquerdo do Webflow aqui, você pode ver estes pontos de interrogação. Se você clicar nele, aqui no painel de ajuda, temos diferentes opções. A segunda opção é atalhos de teclado. Eu vou clicar nele, e lá está ele. Como eu mencionei antes, podemos não precisar de todos eles, mas alguns deles são tão importantes para saber, como copiar e colar, desfazer, refazer, encontrar, etc Sempre que você quiser copiar algo, você pode usar o Comando C ou Controle C, se você estiver usando o Windows. Se você quiser cortar algo, você pode usar Command X ou Control X, e se você quiser colar algo, você pode usar Command V ou Control V. Basicamente, se você é um usuário Mac, você precisa usar Command. Se você for um usuário do Windows, será necessário usar o Controle. Aqui, por exemplo, para duplicar, ele diz Option plus Drag. Portanto, se você segurar a tecla Option no teclado e clicar e arrastar, poderá duplicar um elemento. Nas janelas em vez de Option, você precisa manter pressionada a tecla Alt no teclado. Aqui como você pode ver, para desfazer, usamos Command Z ou Control, e para refazer, usamos Command Shift e Z. Os outros atalhos importantes são visualizações de dispositivos. Aqui, como você pode ver, se você quiser ir para outro ponto de interrupção, por exemplo, se você quiser ir para o ponto de interrupção do tablet, você pode pressionar o número 2 no seu teclado. Se você quiser ir para o retrato móvel, você pode bater o número 4. Usar esses atalhos é opcional, mas acredite em mim, vai tornar sua vida muito mais fácil se você aprendê-los. O outro atalho importante que usamos quase o tempo todo é Encontrar. Há um recurso muito bom chamado Busca Rápida. Quando você quiser abri-lo, você pode pressionar Command E ou Command K, ou Control E ou Control K. Falaremos sobre Busca Rápida mais tarde, mas por enquanto, você só precisa saber como usar esses atalhos. Se você quiser saber mais sobre esses atalhos, você pode ir para o painel de ajuda e clicar em atalhos de teclado e apenas verificá-los, mas por enquanto, esses são os atalhos mais importantes que você precisa conhecer. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 27. Cursos: Quase todos os sites modernos hoje em dia são criados usando classes. Por quê? Porque as classes nos permitem armazenar nossas informações de estilo e, em seguida, reutilizá-los de novo e de novo e de novo para tantos elementos quanto queremos. É por isso que as aulas são tão poderosas e é quase impossível criar uma página web moderna sem aulas. Deixa-me mostrar-te como funciona. Quando você adiciona um elemento ao seu Canvas, por exemplo, um bloco Div, assim como este, você pode ir para o painel de estilo no lado direito e na parte superior temos a seção “Seletor”. Aqui é onde vamos adicionar uma classe ou digamos selecionar uma classe. Por padrão, nossos elementos não têm nenhuma classe e se quisermos modificar as propriedades CSS de nossos elementos, precisamos adicionar uma classe específica a isso. Se não o fizermos, o Webflow atribui automaticamente uma classe a este elemento específico. Vamos ver como funciona. Primeiro, eu não vou adicionar nenhuma classe aqui, eu só quero modificar a cor do fundo, e lá vamos nós. Assim que eu mudei uma dessas propriedades, esta classe de bloco Div foi criada automaticamente. Se quisermos renomear nossa classe, podemos apenas clicar com o botão esquerdo sobre ela e simplesmente renomeá-la. Vou chamar-lhe “Div”. Isto é basicamente como você pode criar uma classe. A outra maneira, que é melhor na minha opinião, é criar uma classe uma vez que você tenha adicionado seu elemento ao seu Canvas. Então, em vez de modificar as propriedades de seus elementos, primeiro adicione uma classe a ele. Dessa forma, você pode se certificar de que suas aulas estão organizadas porque mais tarde vamos reutilizar essas classes e nomeá-las corretamente é tão importante. Agora eu vou selecionar este bloco Div e não há nenhuma classe aqui porque eu acabei de remover isso. Deixe-me mostrar-lhe como você pode remover uma aula. Vou escrever “Div” para escolher a classe que criei. Para remover uma classe, você pode apenas clicar nesta seta para baixo e apenas clicar em “Remover classe”. Alternativamente, você pode clicar em algum lugar aqui e, como podemos ver, este cursor está piscando. Se você pressionar a tecla Delete ou Backspace no teclado, essa classe será removida. Agora não temos nenhuma classe aplicada a este elemento. Vou clicar aqui e posso começar a criar uma nova classe. Precisamos nomear nossa turma aqui. Vou escrever “New Div”, “Enter”, assim mesmo. Nossa classe foi criada e não modificamos as propriedades deste elemento ainda. Se eu rolar para baixo, você pode ver que existem algumas propriedades e eles são destacados com essas cores âmbar. Isso significa que essa propriedade particular é herdada de outra classe. Se eu clicar nisso, você pode ver que o valor vem de “Corpo (Todas as Páginas)”. Vamos falar sobre essas tags mais tarde, mas por enquanto você só precisa saber que essa cor âmbar significa que na verdade, a propriedade e o estilo estão vindo de outro lugar. Claro que você pode anular isso, e uma vez que você anule isso, veja o que acontece, ele fica azul. Significa que esta propriedade está vindo desta classe. Se eu clicar nele, você pode ver que podemos redefinir esta propriedade e redefinir herdará o valor de Body (All Pages). Agora vamos em frente e modificar o plano de fundo. Vou mudar para branco. Por que precisamos usar aulas? Bem, como eu mencionei antes, as aulas armazenam informações sobre nosso estilo. Agora que modificamos a cor do fundo e também a fonte, podemos reutilizar essa classe. Como reutilizar uma classe. Primeiro, deixe-me ir em frente e adicionar outro bloco Div aqui e eu vou colocá-lo bem ao lado dele, e agora em vez de criar uma nova classe, eu posso apenas aplicar a nova classe Div para este bloco Div particular. Vou escrever “New”. Eu posso encontrá-lo sob as classes existentes aqui e lá vamos nós. Uma coisa que você precisa lembrar é que estamos fazendo mudanças no estilo, não estamos fazendo alterações no próprio elemento. É por isso que podemos aplicar uma classe a qualquer elemento. Nós definimos as propriedades para uma classe específica e, em seguida, podemos aplicar a qualquer elemento. Agora vou mudar a cor do fundo, e vamos ver o que acontece. Lá vamos nós. Como você pode ver, a mudança aplicada a ambos os blocos Div porque ambos os elementos estão usando esta nova classe Div. Mas e se eu quiser ter uma classe única para o segundo bloco Div? Para fazer isso, podemos duplicar uma classe. Podemos clicar nesta seta para baixo e eu vou apertar “ Classe Duplicada ”, e vamos escrever “Segunda Div”, assim mesmo. Agora, não há nenhuma conexão entre este bloco Div e este bloco Div porque nós apenas duplicamos a classe e não há nenhuma relação entre essas duas classes. Então, se eu decidir modificar a cor aqui, a cor do fundo, a mudança que eu faço aqui só se aplica a este elemento em particular. Mas como você pode renomear uma aula? Para renomear uma classe, você pode simplesmente clicar nela e simplesmente renomeá-la. Vou mudar para “Demo”. Agora a nossa turma foi renomeada. Deixe-me mostrar-lhe outro exemplo. Eu vou para a seção “Adicionar”, e daqui eu vou trazer um botão para o meu Canvas, exatamente assim. Deixe-me colocá-lo dentro do meu recipiente e eu vou remover esses blocos Div. Legal. Este botão não tem classe. Vou adicionar uma aula a ele. Vou escrever “Botão Primário”. Legal. Agora este botão primário tem alguns estilos padrão porque este é um elemento pré-construído, e eu vou substituir esses elementos. Vou começar com o espaçamento. Aqui temos propriedades diferentes e posso modificar o preenchimento. Eu vou manter pressionada a tecla de opção no meu teclado ou tecla Alt e apenas clique com o botão esquerdo e arraste para modificar o preenchimento de ambos os lados simultaneamente, exatamente assim. Como você pode ver, ficou azul. Isso significa que essas propriedades estão vindo desta classe, desta classe particular. Agora vamos fazer outra alteração neste botão. Vou modificar sua cor para outra coisa. Agora o que eu vou fazer é adicionar outro botão aqui. Lá vamos nós, e eu vou aplicar a mesma classe para este novo botão. Vamos procurar o botão primário. Todos os estilos foram aplicados a este novo botão também. E se eu quiser criar variações para o meu botão? Bem, neste caso, podemos usar algo muito útil, uma classe de combinação. Uma classe de combinação é um tipo de classe que é construído sobre sua classe base. Neste momento, criamos a classe base e se eu quiser criar uma classe de combinação, eu posso clicar em algum lugar aqui e como você pode ver, ela diz “Nova classe Combo”. Por quê? Porque já temos a classe base e podemos criar uma classe de combinação em cima desta classe base. Então vamos escrever “Luz”. Mas não aconteceu nada. Claro que nada aconteceu porque não mudamos nada. Agora que criamos esta classe de combinação, este elemento está herdando o estilo de duas classes diferentes. Primeiro herda todas as propriedades da classe Primary Button e, em seguida, herda mais propriedades da classe Light. Então, primeiro, todas as propriedades da classe Primary Button serão aplicadas a este botão e, em seguida, se modificarmos algo aqui, desde que criamos uma classe de combinação, ele substitui essas propriedades do botão primário. É tão poderoso. Vamos supor que eu queira criar um botão Light aqui. Eu vou modificar a cor para branco e como você pode ver, ela fica azul, e eu vou modificar a cor da tipografia aqui para preto, exatamente assim. Deixe-me explicar o que aconteceu. Como podem ver, o espaçamento não mudou e temos esta cor âmbar aqui. Isso significa que essas propriedades estão vindo de nossa classe de botão principal. No entanto, se nos dirigirmos para a seção de fundo, você pode ver que temos essas cores azuis e isso significa que esta cor, esta propriedade particular vem da classe de combinação de luz. Mas para entender melhor, vou selecionar o botão principal. Como você pode ver, há apenas uma classe aplicada, nós não temos nenhuma classe combo, e eu vou modificar o preenchimento de 30 para 40 assim. Como você pode ver, a mudança que eu fiz aqui se aplica automaticamente a este botão, embora tivéssemos uma classe combo. Por quê? Porque quando criamos a classe de combinação, não tocamos na propriedade espaçamento, apenas modificamos a cor do plano de fundo. É assim que as aulas combinadas funcionam. Eles são construídos no topo da nossa classe base. Além dessas duas classes, a classe base e a classe combo, temos outro tipo de classe que é chamado de classe global. Deixa-me mostrar-te como funciona. Vou arrastar e soltar um bloco Div aqui no meu contêiner. Lá vamos nós. Este é um bloco Div vazio. Eu vou ir em frente e atribuir uma classe para ele. Então eu vou criar uma nova classe e vamos chamá-la de “Sombra”. Eu vou colocá-lo fora do meu recipiente que você poderia ver melhor. Está bem aqui no topo, e dei-lhe esta aula de Shadow. Agora eu vou para a seção “Efeitos”, e a partir daqui, eu vou clicar neste botão mais para adicionar algumas sombras a este bloco Div particular. Como você pode ver, a sombra foi adicionada aqui. Vou modificar as propriedades, a quantidade de desfoque e o tamanho, e deixe-me modificar a opacidade também. Legal. Agora temos uma classe global. O que isso significa? Sempre que queremos aplicar algum estilo específico para muitos elementos em nossa página web, podemos usar classes globais. Por exemplo, vamos supor que temos botões diferentes e temos imagens diferentes. Deixe-me arrastar e soltar uma imagem aqui que você poderia ver melhor. Vou diminuir sua largura para 300 pixels. Legal. Vamos supor que queremos ter uma sombra consistente para todos os nossos elementos. Neste caso, vou selecionar meu botão principal aqui e vou adicionar nossa classe global a ele. Vamos procurar sombra. Como você pode ver, diz “Global Combo Classes”. Lá vamos nós. A sombra foi adicionada aqui. Agora vou selecionar este botão primário e aqui vou escrever “Sombra”. Lá vamos nós. A sombra foi aplicada e vamos fazer a mesma coisa para esta imagem. Não há classe aqui. Então primeiro eu vou dar uma aula, Image, e então eu vou adicionar a sombra, Classe Global a isso, exatamente assim. Como você pode ver, agora esses três elementos usam nossa Classe Global Sombra. Mas e se eu quiser modificar as propriedades desta Classe Global Sombra? Eu posso selecionar este bloco Div. Este é um elemento temporário. Eu posso simplesmente remover isso e nada acontece, mas se eu quiser modificar as propriedades desta classe global, eu vou precisar selecionar este bloco Div. Vamos supor que eu queira mudar, digamos, a quantidade de tamanho aqui. Como você pode ver, as mudanças se aplicam a todos os elementos que estão usando nossa classe global. Se você está familiarizado com diferentes softwares de design como Figma ou Sketch, certeza você usou estilos. Em Figma, podemos criar estilos de cores, estilos de tipografia. Este é exatamente o mesmo conceito. Criamos nossos estilos uma vez e os aplicamos a vários elementos de novo e de novo e de novo, e desta forma, quando queremos fazer algumas mudanças, podemos fazê-lo uma vez e as mudanças se aplicam imediatamente a todos os elementos que estão usando essa classe específica. Pessoal, isso é tudo por este vídeo. Espero que tenham gostado e espero que agora tenham uma melhor compreensão das aulas. Vamos usar aulas quase o tempo todo quando trabalhamos em nossos projetos. Portanto, certifique-se de entender o conceito de classes corretamente, já que vamos usá-los em todos os nossos projetos. Vejo você no próximo vídeo. 28. Configurações de exibição: Qualquer site que você visitar hoje em dia está usando uma das seis configurações de exibição aqui. Se você ir para a seção de layout no lado direito, verá que temos seis configurações de exibição diferentes. Neste vídeo, vamos falar sobre cada uma dessas configurações de exibição, qual é a diferença entre elas, como você pode usá-las e quando você deve usar cada uma delas. É importante aprender muito, muito bem essas configurações de exibição, porque se você não fizer isso, é muito difícil criar layouts diferentes para seus projetos. Certifique-se de prestar atenção aos detalhes porque às vezes a diferença é sutil. No entanto, em projetos do mundo real, isso faz a diferença. Sem mais delongas, vamos começar. Primeiro de tudo, vou seguir em frente e adicionar um cabeçalho a este contêiner. Vou seguir em frente e selecionar este contêiner e remover esse preenchimento superior. Não preciso disso. Agora temos esse título. Deixe-me dar uma aula. Vou escrever H1. Então vou seguir em frente e modificar sua cor para que você possa vê-la melhor. Qualquer elemento como cabeçalho, parágrafo, bloco div, botão, etc., use a configuração de exibição de blocos por padrão. Aqui temos seis configurações de exibição diferentes. Temos o bloco, temos o flex ou flexbox, temos a grade, temos o bloco em linha, temos o inline e, finalmente, não temos nenhum. Como você pode ver por padrão, ele tem a configuração de exibição do bloco. O que isso significa? Quando a configuração de exibição está definida como bloqueada, isso significa que seu elemento ocupa toda a largura de seu pai. Nesse caso, os pais desse elemento são contêineres. Como você pode ver quando seleciono esse elemento H1, esse limite ocupa toda a largura desse contêiner. A largura desse contêiner é definida como 1.100 pixels. Portanto, esse elemento H1 ocupa 1.100 pixels aqui também. Mais uma coisa importante é que, se eu adicionar mais elementos aqui, já que esse cabeçalho está definido para bloquear, se eu adicionar mais títulos, assim, você pode ver que ela pega a próxima linha disponível. Não vai ficar bem ao lado deste título. É assim que o elemento bloco se comporta. Deixe-me dar a etiqueta H1, assim. Se eu copiar e colar várias vezes, você poderá ver que cada um desses elementos ocupa toda a largura de seu pai, que é nesse caso o contêiner. É por isso que eles não podem sentar um ao lado do outro. A próxima configuração de exibição sobre a qual vamos falar é chamada flex ou flexbox. É uma das configurações de exibição mais importantes com as quais podemos trabalhar para desenvolvimento web. Deixe-me mostrar como funciona. Ao contrário da configuração de exibição de blocos aplicada ao próprio elemento, a configuração de exibição flexível é aplicada ao pai de nossos elementos. Nesse caso, é esse contêiner. Não selecionamos nosso elemento e alteramos a configuração de exibição para flexbox. Por quê? Porque flexbox é usado para alinhar elementos diferentes, horizontal ou verticalmente. Deixe-me mostrar como funciona. Vamos supor que temos vários títulos aqui. Assim, temos três cabeçalhos diferentes, e a configuração de exibição desses cabeçalhos está definida como bloqueada. Eles ocupam toda a largura desse contêiner. Então, se eu selecionar esse contêiner, como você pode ver por padrão, a configuração de exibição será definida como bloqueada. Se eu alterá-lo para flexbox, veja o que acontece. Agora, esses elementos estão alinhados um ao outro, e aqui sob o layout, tenho propriedades diferentes para trabalhar. Eu tenho direção. Por padrão, ele está definido como horizontal. Posso configurá-lo para vertical para empilhá-los verticalmente. Posso alinhar o elemento ao centro, tanto horizontal quanto verticalmente. Posso alinhar esses elementos como eu quiser. Mas, por enquanto, você só precisa saber que sempre que quisermos criar layout unidimensional, podemos usar flexbox. Mas e se eu quiser criar layout bidimensional? Nesse caso, precisamos usar uma grade. Você está certo. Já falamos sobre grade. Se você se lembra, eu disse que podemos transformar qualquer tipo de caixa em uma grade, e isso é exatamente o que eu quis dizer. Aqui, se eu alterar a configuração de exibição de flexbox para grade, veja o que acontece. Agora, temos uma grade dois por dois. Agora posso modificar minha grade da forma que quiser. Basicamente, você pode transformar um bloco div em uma grade, um contêiner em uma grade, porque você pode alterar facilmente a configuração de exibição desses elementos. Se você tiver um contêiner e quiser transformá-lo em uma grade, você pode simplesmente alterar a configuração de exibição aqui e, em seguida, você receberá uma grade. Agora vamos falar sobre o bloco em linha. Primeiro, vou configurá-lo de volta para a configuração de exibição de bloqueio. Se eu quiser que esses títulos se sentem um ao lado do outro, posso usar o bloco em linha. Vamos transformá-lo em bloco em linha e lá vamos nós. Como você pode ver agora, esses elementos ficam um ao lado do outro e eles não ocupam toda a largura de um pai, que é esse contêiner. É bom para quando você deseja criar algumas tags que elas precisam ser colocadas próximas umas das outras ou de outros casos de uso diferentes. Mas e o inline? Este é chamado de bloco em linha. Temos o inline também. Se eu transformá-lo em linha, vamos ver o que acontece. A principal diferença entre o bloco em linha e em linha é que o inline não respeita a propriedade de espaçamento. Você não pode modificar as propriedades de espaçamento aqui, mas você pode modificar as propriedades da topografia ou digamos que a propriedade backgrounds. Vamos tentar. Agora que nossa configuração de exibição está definida como embutida, vou mudar o plano de fundo aqui para outra coisa, assim, e não consigo modificar o preenchimento ou a margem. Mas por que devemos usar a configuração de exibição em linha quando não podemos modificar o preenchimento ou a margem? Bem, deixe-me mostrar um bom caso de uso para isso. Vou remover esses títulos. Vou para a seção Adicionar e daqui vou arrastar e soltar um parágrafo no meu contêiner. Agora, deixe-me ir em frente e mudar a cor deste parágrafo. Mas primeiro deixe-me dar uma etiqueta. Vou chamá-lo de P para parágrafo, e deixe-me mudá-lo para branco. Por padrão, este parágrafo está usando a configuração de exibição de blocos, e isso é totalmente bom. Primeiro, deixe-me modificar a largura deste parágrafo. Vou configurá-lo para 500 pixels, assim. Deixe-me aumentar um pouco o tamanho da fonte. Legal. Além disso, a altura da linha, vou defini-la para 150 por cento. Falaremos sobre essas unidades mais tarde. Mas, por enquanto, só quero que você se concentre neste parágrafo. Neste momento, este parágrafo tem algum estilo. Ele usa a classe P, e essa classe P tem algum estilo. E se eu quiser estilizar uma palavra específica aqui de forma diferente? Bem, nesse caso, posso selecionar essa palavra em particular, por exemplo, esta, e então daqui vou clicar neste ícone de pincel, e diz: “Enrole com extensão”. Vamos ver o que ele faz. Se eu clicar nisso, ele criará uma extensão de texto e essa extensão de texto por padrão está usando a configuração de exibição embutida. Podemos modificar o preenchimento ou a margem. Mesmo se quisermos alterar as propriedades de tamanho aqui, isso não afeta essa palavra. Deixe-me provar isso para você. Vou escrever 500 aqui. Como você pode ver, nada acontece porque a configuração de exibição em linha não respeita as propriedades de tamanho ou espaçamento. Deixe-me redefinir isso por enquanto. Desde que criamos esse período de texto, vou seguir em frente e chamá-lo de destaque. Lá vamos nós. O que vou fazer é mudar a cor de fundo dessa extensão de texto em particular. Vou para a seção de planos de fundo aqui, e deixe-me mudar a cor de fundo para outra coisa assim. Deixe-me torná-lo mais leve. Então eu vou modificar a propriedade topográfica aqui. Assim mesmo. Como você pode ver, podemos estilizar essa palavra em particular usando uma extensão de texto, e essa extensão de texto está usando a exibição em linha. Este é um caso de uso muito bom da configuração de exibição em linha. Se tivermos vários parágrafos em nosso projeto como este, e quisermos apenas destacar outra palavra, podemos simplesmente escolher essa palavra, envolvê-la com a extensão e, a partir daqui, vou dar a mesma classe que nós acabou de criar; destaque. Lá vamos nós. Se eu modificar as propriedades aqui, já que é apenas uma classe, as alterações se aplicarão imediatamente a todos os elementos que estão usando essa classe específica. Deixe-me modificar isso. Lá vamos nós. Agora vamos passar para a última configuração de exibição, que não é nenhuma. Nenhum realmente esconde os elementos. Deixe-me mostrar como funciona. Vou seguir em frente e remover esses parágrafos e aqui dentro deste contêiner, vou adicionar um bloco div. Assim, e esse bloco div vai ter uma aula. Vou escrever um novo cartão e depois vou mudar sua cor de fundo para branco. Agora vou seguir em frente e adicionar mais alguns elementos a esse bloco div específico. Deixe-me começar adicionando um cabeçalho e, em seguida, vou adicionar um parágrafo aqui e, finalmente, vou adicionar um botão assim. Então deixe-me selecionar este novo bloco div de cartão e modificar sua altura. Por padrão, ele está definido como automático. Vou alterá-lo para 400 pixels. Como mencionei antes, por padrão, o título e parágrafo estão usando a configuração de exibição de blocos. Mas e se eu quiser esconder um elemento aqui? Bem, vamos ver o que acontece se eu clicar nessa configuração de não exibição, a última opção. Lá vamos nós. Agora está escondido. Se eu virar de volta, assim, você pode ver que agora está visível. Mas você pode dizer: “Não podemos simplesmente diminuir a opacidade desse elemento?” Vamos ver qual é a diferença entre diminuir a opacidade e definir a configuração de exibição como nenhuma. Vou selecionar este parágrafo e, na seção de tipografia, vou diminuir a opacidade desses elementos usando esse controle deslizante. Lá vamos nós. Não é visível. No entanto, ele ainda está lá. Como você pode ver, ele ocupa algum espaço e se eu visualizá-lo, você pode ver que algo está lá e eu posso selecionar esse texto, mas ele não está visível. Nesse caso, é melhor usar um display none. Uma coisa a mencionar é que quando você usa a configuração display none aqui, o elemento ainda aparece em seu código. Ele simplesmente desaparece na página e na interface. Não ocupa nenhum espaço, mas ainda está lá em nosso código. Se você quiser remover algo completamente do seu código, você precisa remover esse elemento. Para fazer isso, basta clicar no botão Excluir ou Backspace no teclado ou clicar com o botão direito do mouse em seu elemento e clicar em Excluir. Tudo bem pessoal, isso é tudo para este vídeo. No próximo vídeo, falaremos sobre marcas flexíveis em detalhes. Vejo você então. 29. Flexbox: No vídeo anterior, falamos sobre todas as configurações de exibição que você pode usar para seus layouts. Neste vídeo, vamos mergulhar nos detalhes do uso do Flexbox. Como mencionei antes, flexbox é muito útil para layouts unidimensionais. Vou mostrar-lhe alguns exemplos úteis que você poderia realmente entender como você pode usar diferentes recursos e propriedades diferentes de uma flexbox. Aqui, como você pode ver, eu criei alguns cartões simples. Se eu for a este invólucro, eu tenho três cartas diferentes. Como você pode ver, cada cartão tem uma imagem, um título, e um bloco de texto, nada extravagante. Mas o alinhamento deles não é o que eu quero, na verdade eu quero que eles se sentem um ao lado do outro. Para isso, o que podemos fazer é usar um flexbox. Sempre que você quiser alinhar alguns elementos, você precisa ter certeza de não definir a configuração de exibição desses elementos para flexbox. Isso é errado. Deixe-me mostrar-lhe o que acontece. Se eu selecionar este cartão, por exemplo, o primeiro, e eu virar a configuração de exibição para flexbox, isso é o que acontece, e não é nossa intenção. Você precisa sempre ter certeza de escolher o pai desses elementos. Neste caso, o pai destes cartões é este invólucro. Vou selecionar o wrapper, que é o pai, e vou transformá-lo em uma flexbox. Lá vamos nós. Agora essas cartas sentam-se um ao lado do outro, e se eu quiser que elas empilhem verticalmente, eu posso mudar a direção da horizontal para a vertical, assim mesmo. Por enquanto eu vou mantê-lo horizontal, e vamos falar sobre o alinhamento e a justificativa. Quando eu transformo qualquer coisa para um flexbox, eu posso controlar o alinhamento de seus filhos. Neste momento, as crianças deste flexbox são estas cartas. O que eu vou fazer, eu vou mostrar a vocês como o alinhamento funciona. Se eu mudar o alinhamento agora, você não pode ver o que está acontecendo. Por quê? Porque a altura deste invólucro está definida como auto. Deixe-me definir uma altura específica para este invólucro, eu vou defini-lo para 500 pixels. Agora, como você pode ver, esses cartões são esticados, porque a opção Alinhar está definida para esticar. Mas e se eu quiser que eles estejam alinhados ao centro, tanto na horizontal como na vertical? A justificativa é definida como centro, se eu mudar a opção Alinhar para centro também, isso é o que acontece. Como você pode ver, estes primeiro cartão é menor. A razão é, se eu clicar neste cartão, você pode ver que a altura está definida como auto. Aqui nestes dois cartões, temos quatro linhas de texto, e aqui temos apenas três linhas de texto. Se eu apenas ir em frente e adicionar algumas palavras fictícias aqui, você pode ver que nós vamos ter a mesma altura aqui agora. Agora vamos falar sobre o alinhamento. Posso alinhá-lo ao topo, ao fundo, ao centro, posso ajustá-lo para esticar. Posso mudar a justificativa, para a esquerda, para o meio, para a direita, e estas duas justificativas são tão importantes. Este aqui diz Espaço entre, então vamos ver o que acontece. Se eu clicar nisso, ele distribui um espaçamento uniforme entre esses cartões. No entanto, a primeira carta ficará no lado esquerdo do limite, que é esse invólucro. A carta direita ficará no lado direito deste limite. Mas se eu mudar a justificativa para a última opção, Espaço ao redor, você pode ver que temos um espaçamento uniforme entre as cartas, mas as primeiras e as últimas cartas não estão anexadas às bordas deste invólucro. Esta é a principal diferença entre eles. Na maioria das vezes usamos o Espaço entre, é muito mais seguro trabalhar com essa opção, mas você só precisa entender a diferença entre essas opções. Até agora temos trabalhado com os elementos pai. Mas quando transformamos o elemento pai para uma flexbox, o próprio filho tem algumas propriedades também. A criança aqui é este cartão. Vou selecionar um cartão, e no lado direito podemos ver que temos a criança flexível, e temos opções diferentes aqui. Temos dimensionamento e, em seguida, temos Alinhamento e ordem. Se eu clicar sobre isso, você pode ver que teremos algumas opções também. Vamos ver o que vai acontecer se eu mudar a opção de dimensionamento. Temos três opções de dimensionamento diferentes aqui. O primeiro diz Encolher se necessário e, por padrão, está definido para esta opção. Significa que se formos a outros pontos de interrupção, por exemplo, dispositivos menores como este, ele encolhe, já que é necessário, já que não temos muito espaço. Mas vamos verificar a próxima opção que diz Crescer se possível. Se eu clicar nisso, como você pode ver, não há espaço no meio, e ele preenche todo o espaço dentro do nosso invólucro, então esta é a diferença entre eles. Então temos “Não encolhe ou cresça”. Agora, se eu for para o ponto de interrupção do tablet, você pode ver que eles não encolhem, e isso não é bom em termos de capacidade de resposta. Você também pode usar a opção manual, mas eu nunca usei isso, e é melhor evitá-lo, já que vai tornar sua vida muito complicada. Vou mudar para psiquiatra, se necessário. Agora vamos falar sobre alinhamento e ordem. Aqui temos Align, e temos Ordem. Às vezes, podemos precisar mudar a ordem dos nossos cartões. Claro que podemos fazer isso dentro do navegador, assim, mas também podemos fazer isso aqui usando as opções flex child. Se eu selecionar este cartão e adicionar uma classe de combinação. Por exemplo, vamos chamá-lo de Summer, e eu quero que ele seja sempre a última carta, eu posso defini-lo para durar, e lá vamos nós. A colocação deles foi alterada. Posso mudá-lo para primeiro, e posso configurá-lo para Não mudar. Novamente, eu posso usar o pedido personalizado bem, mas na maioria das vezes usamos primeiro e último, assim como isso. Vamos falar sobre o alinhamento. Vamos supor que eu quero alinhar esta primeira carta de forma diferente, eu posso fazer isso. Eu posso selecionar este cartão, uma vez que uma classe de combinação foi adicionada a esta criança. Posso mudar o alinhamento para cima, centro, inferior, ou novamente, esticar ou linha de base. Eu vou com o carro. O auto leva o alinhamento que definimos para o elemento pai aqui, Stretch. Mas às vezes, por alguns motivos, talvez seja necessário substituir essas preferências, as propriedades que definimos para o elemento pai. Agora vamos dar uma olhada em outro exemplo. Aqui na parte inferior eu criei alguns blocos de ligação. Estes são alguns blocos de link simples, e eu criei algumas tags aqui, como você pode ver. Há um wrapper chamado Tags, e todas essas tags estão dentro deste wrapper. Se eu selecionar essa tag como wrapper, e transformá-la em uma flexbox, veja o que acontece. Como você pode ver, nada é organizado e nossas etiquetas são destruídas. Como podemos consertar isso? É muito simples. Você pode ver esta opção Crianças aqui, que diz Não embrulhar, por padrão? Se eu colocá-lo para “Enrole “, ele envolve todos os nossos filhos. Essas tags são os filhos do wrapper desta tag, e agora eu tenho acesso a essa opção de alinhamento antecipado. Aqui eu posso configurá-lo para Alinhar Linhas: Start. Agora o invólucro desta etiqueta envolve todas as crianças dentro. Se eu ir em frente e copiar e colar essas tags novamente e novamente, você pode ver que elas estão alinhadas perfeitamente como esperado. Você pode ver como é poderoso trabalhar com flexbox? Vamos dar uma olhada no pedido mais uma vez. Aqui, se eu quiser que esta tag de design UI/UX seja sempre o nosso último elemento, eu posso dar-lhe uma classe de combinação específica. Por exemplo, eu vou escrever UI/UX, e então eu vou mudar a ordem para durar, exatamente assim. Pessoal, isso é tudo por este vídeo, espero que tenham gostado, vemo-nos no próximo. 30. Desafio de Flexbox: Agora que aprendeu a trabalhar com o Flexbox, é hora de desafiar suas habilidades. O Workflow criou um jogo Flexbox muito legal para que você pratique o que aprendeu. Se você vai para flexboxgame.com, você pode pré-visualizar este jogo e você pode realmente jogar este jogo. Você pode fazer alguns exercícios. Existem 28 desafios CSS Flexbox diferentes que você pode resolver para ver se você realmente entende como o Flexbox funciona ou não. O que eu quero que vocês façam é ir em frente e resolvam esses desafios, um por um, desde o nível um até o 28. À medida que você move um do nível um para o nível 28, fica cada vez mais difícil resolver esses desafios, mas não se preocupe, tenho certeza que você pode resolvê-los. O que importa é que você tente resolvê-los. Não importa quanto tempo leve para resolvê-los. O que importa é tentar. No próximo vídeo, vamos resolver todos esses desafios juntos. Vejo-te no próximo. 31. Solução de desafio: Espero que tenha sido capaz de resolver todos os 28 desafios Flexbox. Mas se você não pôde, tudo bem, porque juntos você e eu vamos passar por todos os 28 níveis e vamos resolver cada um deles. Você está pronto? Vamos começar. Primeiro de tudo, vamos começar com o Nível 1. Vamos ver o que temos aqui. Ele diz mover o círculo verde para o contorno usando a configuração Flex Layout. Primeiro, precisamos selecionar o pai. Lembre-se, sempre selecione o pai primeiro. Diz: selecione esta caixa branca e, em seguida, jogue com o layout flexível no painel direito. Aqui, a única coisa que precisamos fazer é mudar a justificativa para a direita. Isso é tudo. Nível 1 está fixo. Vamos passar para o próximo, Nível 2. Aqui temos dois círculos com dois espaços reservados. É simples também. Eu vou selecionar um pai que é este playground e justificá-lo para o centro exatamente assim. Vamos passar para o próximo. Aqui temos um, dois, três círculos. Como posso ver, precisamos modificar a justificativa para o espaço assim. Agora vamos para o Nível 4. Legal. Aqui a única coisa que precisamos fazer é modificar o Alinhar para baixo. Que tal aqui? Bem, precisamos mudar o Alinhar e Justificar aqui para alinhar este círculo ao centro. Vou mudar o Alinhar e o Justificar. O número 5 está resolvido. Vamos passar para o próximo. Aqui, primeiro, eu vou alinhá-lo ao centro, e então eu vou escolher Espaço em torno deste. A próxima aqui, só precisamos mudar a direção. Esses círculos devem ser empilhados verticalmente. Vou mudar a direção para vertical e está resolvido. Vamos passar para o número 8. Aqui, novamente, precisamos mudar a Direção para Vertical. Além disso, vou mudar o Justify, e finalmente, vou alinhá-lo à direita. Feito. O próximo. Aqui vamos usar a opção inversa. Nós não falamos sobre isso antes, mas se você der uma olhada na seção Direção ao lado dessas guias, nós temos esse ícone. Existem duas setas, e esta é a opção Inverter. Vamos clicar nisso. Feito. Vamos passar para o próximo. Aqui primeiro eu vou mudar a direção para vertical e depois eu vou alinhá-lo para o lado direito e para baixo, mas nós temos um problema. Aqui temos o número 1, mas o número 1 deve ser colocado aqui no fundo. Portanto, vou selecionar a criança, que é esse círculo. Certifique-se de selecionar a criança, e eu vou modificar a ordem. Aqui eu vou mudar a ordem para fazer o último. Para este, o do meio, vou mudar a ordem para primeiro. Feito. Consegues ver como é fácil trabalhar com o Flexbox? E quanto a este? Primeiro, vamos fazer a direção vertical, então eu vou mudar a justificativa para o espaço entre, e finalmente, eu vou modificar a ordem. Vou primeiro selecionar o círculo, que é esta criança, e mudar a ordem para durar, e esta, a segunda deve ser a primeira. Agora vamos ver o que temos aqui. Como podem ver aqui, temos um, dois, três, e os espaços reservados são três, dois, um. Precisamos reverter o layout primeiro assim. Eu vou clicar neste botão Inverter, e então eu vou alinhá-lo ao fundo, e finalmente, eu vou usar o Espaço Entre. Feito. Vamos passar para o próximo. Vamos ver o que temos aqui. Como você pode ver, esses círculos estão encolhidos, e isso não é o que queremos. Então, o que devemos fazer? Lembras-te do exemplo de etiqueta que te mostrei antes? Mudamos as crianças para embrulhar. Isso é exatamente o que precisamos fazer aqui. Primeiro, selecione o pai e altere os filhos para Embrulhar e pronto. Não precisamos tocar em mais nada. Vamos para o Nível 14. Novamente aqui, você só precisa mudar as crianças para Wrap, e então precisamos modificar o alinhamento. Primeiro vou alinhá-lo aqui ao centro, e depois vou modificar o Justify para centralizar. Vamos para o Nível 15. Novamente, precisamos mudar as crianças para Embrulhar, e então eu vou mudar o Alinhar aqui para o espaço entre, e finalmente, eu vou mudar o Justificar para Espaço Entre. Agora vamos passar para o próximo. Aqui, novamente, precisamos mudar as crianças para Wrap. Vamos ver o que temos aqui. Bem no topo, temos espaços reservados verdes, em seguida, espaços reservados laranja e, finalmente, os espaços reservados roxos. Vamos ver o que acontece se eu mudar a direção de Horizontal para Vertical. Lá vamos nós. Estamos quase lá. Agora o que eu vou fazer é mudar o Justify para Center, e também vou mudar o Alinhar aqui para Center. Vamos passar para o próximo. Vamos ver o que temos aqui. Um, dois e quatro, e cinco são colocados corretamente, a única coisa que precisamos fazer é mudar o alinhamento desses círculos verdes. Eu vou selecionar este círculo e, em seguida, eu vou mudar o alinhamento para baixo feito. Agora estamos no Nível 18. Vamos ver o que temos aqui. Podemos sempre dar uma olhada em uma dica aqui também. Diz layout reverso no recipiente flexível e alterar o alinhamento em dois dos filhos flex. Primeiro, eu vou selecionar o contêiner que é este playground, e então eu vou revertê-lo. Agora vamos selecionar este círculo um, alinhá-lo ao centro, este Círculo três, alinhá-lo ao fundo, e finalmente, eu vou selecionar novamente o pai e mudar o Justify para o espaço entre Simplesmente assim. Agora vamos passar para o próximo nível, Nível 19. Primeiro aqui, eu vou selecionar este círculo e eu vou mudar o tamanho para crescer, se possível, e está feito. Vamos para o Nível 20. número um é colocado corretamente, o número três e dois devem ser modificados. Vou selecionar o número dois e mudar o tamanho para crescer, se possível, e está feito. Vamos passar para o próximo nível 21. Aqui vamos dar uma olhada na dica. Diz que o círculo verde deve ter 200 pixels de largura. Sim, isso mesmo. Vou selecionar o círculo um, e vou mudar a largura de 100 pixels para 200 pixels. Vou selecionar o círculo dois, e mudar o tamanho para crescer, se possível. Vamos para o Nível 22. Aqui, o número um deve estar aqui no meio, e o número três deve ser colocado aqui. Primeiro, eu vou selecionar o número três, e eu vou mudar a ordem para primeiro, e está feito. Vamos passar para o próximo desafio. Vamos ver o que temos aqui. Este número dois deve ser o último filho. Vou mudar a ordem para durar. número três deve ser o primeiro filho, então eu vou mudar o pedido para primeiro, e o resto está bem. Vou passar para o próximo nível 24. Vamos ver o que temos aqui. Primeiro, eu vou selecionar o playground, que é o pai aqui, e eu vou mudar as crianças de Não Embrulhar para Embrulhar. Nada acontece ainda. Isso é bom. Então este número três deve ocupar toda a largura deste recipiente aqui. Como podem ver aqui, temos uma dica. Ele diz, adivinhe o que você precisa fazer se você quiser flexionar filho para abranger toda a largura de seu contêiner pai? Basta definir sua largura para 100 por cento, e isso é exatamente o que vamos fazer. Vou selecionar o número três, e vou mudar a largura para 100 por cento. Então eu vou mudar o pedido para primeiro. Agora o que eu preciso fazer é selecionar o pai e alterar a opção de linha aqui. Vou mudar as linhas Alinhar para Alinhar, iniciar, e está feito. Vamos passar para o próximo. Não há nenhuma pista desta vez, tudo bem. Vamos ver o que temos. Primeiro, o segundo círculo deve ser colocado aqui em vez deste círculo verde, portanto, eu vou selecionar isso e eu vou mudar sua ordem para primeiro. Então, como você pode ver, número um deve ocupar toda a largura deste espaço verde. Portanto, eu vou mudar sua largura para 100 por cento, e como você pode ver, como nós não mudamos seus filhos para Wrap, tudo está confuso aqui. Vou mudar as crianças para “Wrap”. Estamos chegando lá e vamos ver o que temos. Primeiro, vou selecionar este círculo três e mudar o tamanho para crescer, se possível. A única coisa que resta é o alinhamento. Então eu vou selecionar o pai e mudar o alinhamento aqui para o espaço entre. Tudo bem, feito. Vamos passar para o próximo. Dica, a configuração Alinhar em crianças flexíveis individuais irá ajudá-lo. Primeiro, este círculo deve ser o último, uma vez que vai ser colocado na parte inferior. Vou mudar a ordem para durar. A ordem está correta agora. Então eu vou selecionar o círculo um e definir sua largura para 100 por cento. Finalmente, vou selecionar o pai e alterá-lo para Embrulhar. Vou selecionar o círculo um, este, e mudar o alinhamento para baixo. Vou selecionar os pais mais uma vez. Vamos ver como podemos alinhar esses dois círculos. Se eu mudar a justificativa para a direita, número dois será colocado corretamente. Agora, eu preciso mudar o alinhamento deste círculo em particular, número três. Eu preciso selecioná-lo e vamos mudar seu alinhamento para baixo. nível 26 também está feito. Vamos passar um para o nível 27. Vamos ver o que temos aqui. O número dois deve ocupar toda a largura deste espaço reservado. Vou selecionar isso e vou mudar a largura para 100 por cento. Então, como você sabe, precisamos selecionar o pai e alterá-lo para embrulhar. Então vamos selecionar o círculo dois, e fazê-lo primeiro. O que mais temos aqui? Se eu selecionar o círculo um e alterar o tamanho para crescer, se possível, ele crescerá, mas o pedido não está correto. O que eu vou fazer é selecionar o pai e reverter a direção assim. Vou selecionar este círculo cinco e definir o tamanho para crescer, se possível. Finalmente, enquanto estiver selecionado, vou alinhá-lo ao fundo. Feito. Por último, mas não menos importante, Nível 28, agora combine todas as coisas que você aprendeu hoje para resolver isso. Vamos ver como podemos resolver este. Interessante, não é? Vamos ver o que temos. Aqui, temos um, quatro, cinco. Vou selecionar o pai e reverter a direção primeiro, assim, já que um está aqui. Então eu vou selecionar o segundo círculo e torná-lo primeiro. Como revertemos isso, a ordem não funciona como esperado. Então, quando eu escolher primeiro, significa último agora, e se eu escolher por último, significa primeiro. Mas, por enquanto, vamos escolher primeiro. Vou selecionar este círculo verde e fazê-lo durar. Em seguida, enquanto estiver selecionado, vou definir sua largura para 100%, selecionar o pai e escolher Embrulhar. Vou selecionar este círculo verde e mudar seu alinhamento para baixo. Vou selecionar este círculo, este roxo, e mudar sua ordem para durar. Vamos selecionar um desses círculos laranja e alinhá-los ao fundo. Finalmente, precisamos selecionar nosso segundo círculo e mudar seu tamanho para crescer, se possível. Lá vamos nós. Resolvemos com sucesso todos os 28 desafios do CSS Flexbox. Deixe-me dizer uma coisa se você não conseguiu resolver alguns desses desafios, tudo bem porque, em projetos do mundo real, nunca usamos alguns desses layouts. Mas é bom para você ver o que é possível e como você pode utilizar o Flexbox. Isso é tudo por este vídeo. Espero que tenha gostado. Vejo-te no próximo. 32. Flexbox vs Grade: Agora que você aprendeu sobre flexbox e grid, é hora de compará-los lado a lado para ver qual deles você deve usar para qual finalidade. Deixe-me mencionar que às vezes não há maneira certa ou errada quando se trata desenvolvimento web porque você pode conseguir algo usando grid e você pode conseguir a mesma coisa usando um flexbox. Às vezes, tudo se resume às nossas preferências e à forma como queremos estruturar o nosso site. Portanto, vou mostrar-lhe alguns exemplos para entender melhor a diferença. Primeiro de tudo, você precisa saber que quando temos layouts unidimensionais, provavelmente é melhor usar um flexbox, mas às vezes se você quiser tornar nosso design responsivo e tornar nossa vida muito mais fácil, podemos fazer o mesmo usando uma grade. Aqui eu tenho um cartão dentro desta seção. Vou em frente e adicionar um recipiente aqui. Vou arrastar e largar um contentor. Então deixe-me adicionar o contêiner de classe a isso. Finalmente, vou arrastar e soltar este cartão no meu contêiner. - Legal. Agora vou copiá-lo e colá-lo três vezes. Deixe-me selecionar minha seção desde que a virei para uma flexbox, e agora vou selecionar meu contêiner e vou mudar a configuração de exibição para flexbox. Aqui temos uma flexbox horizontal. Como você pode ver, tudo parece ótimo. Posso mudar a justificativa para o espaço entre o espaço ao redor, à esquerda, ao meio, o que eu quiser. Mas agora estou usando um layout unidimensional. Se eu tiver dois contêineres como este, agora temos um layout bidimensional. Provavelmente faz mais sentido usar uma grade. Agora vamos verificar esse layout em diferentes pontos de interrupção. Vou ao Tablets e, como podem ver, encolhe. - Legal. No entanto, se você quiser tornar nosso design mais responsivo, faria sentido usar uma grade também, mesmo para layout unidimensional. É totalmente com você. Como mencionei antes, não há caminho certo ou errado. Às vezes, só precisamos nos concentrar em nossas preferências e nos concentrar no fato de que maneira se adequa melhor às nossas necessidades. Agora deixe-me ir em frente e arrastar e soltar uma grade aqui. Vou colocá-lo dentro da minha seção e deixe-me arrastar estas cartas para dentro desta grade. Claro, eu poderia transformar este contêiner em uma grade, mas eu vou fazer isso manualmente, assim como este. Vou remover o recipiente. Agora temos essa grade, que está dentro da nossa seção. Opa, eu vou copiar e colar este cartão mais uma vez. Deixe-me selecionar esta grade e eu vou adicionar uma classe a ela. Vou chamá-lo de Grid. Então deixe-me acrescentar alguma margem de ambos os lados. Legal. Assim como um flexbox, podemos controlar a criança de uma grade também. Aqui, se eu selecionar esta criança, este cartão, eu posso modificar o alinhamento, eu posso mudar a justificativa aqui, eu posso mudar a ordem, e assim por diante. Chega a você para decidir se você precisa usar uma grade ou flexbox. Certifique-se de trabalhar com ambos e verificar qual deles faz mais sentido usar para suas necessidades. Tudo bem, pessoal, isso é tudo por este vídeo, vejo vocês no próximo. 33. Espaçamento: Aqui tenho um cartão, mas não parece bom. Por quê? Por causa do espaçamento. Aqui, o conteúdo não pode respirar, portanto, eu preciso modificar o espaçamento entre esses elementos. Como mencionei antes, quando se trata de espaçamento, temos dois componentes principais. Temos a margem e o estofamento. A margem é o espaço fora do elemento, e o preenchimento é o espaço dentro de um elemento. Vamos dar uma olhada. Aqui, vou selecionar meu cartão. Se eu quiser adicionar algum espaço de respiração para o bloco de texto aqui, eu vou selecionar isso, e eu posso adicionar preenchimento esquerdo e preenchimento direito, exatamente assim. Alternativamente, o que eu posso fazer é selecionar o cartão e adicionar o preenchimento. No entanto, este preenchimento aplica-se a todos os elementos dentro deste cartão, a todos os filhos deste bloco. Vamos tentar. Assim, e lá vamos nós. Mas isso não é o que eu quero. Eu vou desfazer o processo, e eu vou selecionar o bloco de texto, e eu vou adicionar 20 pixels e preenchimento esquerdo e direito. No entanto, é muito tedioso e demorado adicionar o preenchimento para cada lado um por um, portanto, eu posso manter pressionada a tecla Option no macOS e a tecla Alt no Windows e, em seguida, clicar e arrastar para ajustar o preenchimento para os lados opostos. Simplesmente assim. Se eu quiser alterar o preenchimento de todos os lados, como superior, inferior, esquerda e direita, em vez da tecla Option ou Alt, eu preciso manter pressionada a tecla Shift no meu teclado e, em seguida, clicar e arrastar. Verifica isso. Isso poupa muito tempo. Mas e a margem? Deixe-me ajustar o estofamento de cima aqui para zero. Vou selecionar este título. Desta vez, em vez de estofamento, vou mudar a margem, a margem inferior. Como mencionei antes, a margem é o espaço fora de um elemento. Portanto, eu vou aumentar isso 10 pixels e a margem superior em 10 pixels também. Parece muito melhor agora. Agora esta carta está dentro de um recipiente. Se eu levá-lo para fora deste recipiente por um segundo, você pode ver que ele toca as bordas. Se eu quiser alinhá-lo ao centro da minha seção, deixe-me remover este recipiente por um segundo. Se eu quiser centralizar tanto horizontalmente quanto verticalmente, eu tenho algumas opções. A primeira opção é que eu posso ir em frente e definir a margem manualmente, assim como esta, o que não é uma boa opção e você não deve tentar isso nunca. A razão é que, quando você define a margem manualmente, ela pode ficar boa em um dispositivo. No entanto, se você acessar o ponto de interrupção do iPad, você pode ver que ele não está centralizado porque ele ainda tem uma margem de 435 pixels. Você nunca deve fazer isso. Vou redefinir esta margem. Vou clicar nisso. Vamos clicar em Redefinir. Alternativamente, você pode manter pressionada a tecla Option ou Alt e, em seguida, clicar sobre isso assim. Como posso alinhá-lo ao centro? Tenho opções diferentes. Sempre que você tem um elemento que tem uma largura fixa como esta, quando a largura é definida aqui, como você pode ver aqui, a largura é de 300 pixels, você pode definir a margem esquerda e direita para auto. Se eu clicar sobre isso, eu posso definir a margem esquerda para auto e, em seguida, eu vou definir a margem direita para auto também. Lá vamos nós. Agora está centrado perfeitamente. Vamos tentar. Vou verificar se é responsivo e se funciona corretamente. Eu vou para o Tablet, como você pode ver, ele ainda está no meio. Isso é perfeito. Esta é uma opção. Deixe-me redefinir essas margens. Você poderia apenas clicar neste botão aqui. Agora, ambas as margens esquerda e direita estão definidas como auto. No entanto, tenha em mente que desta forma só funciona quando você tem uma largura definida. Caso contrário, você pode usar outra maneira, e isso é marcas flexíveis. Deixe-me redefinir essas margens. Agora, eu tenho este cartão, e eu vou selecionar a seção e a configuração de exibição está definida para bloquear. Vou ajustá-lo para flexionar. Vou alinhá-lo ao centro e justificá-lo ao centro. Lá vamos nós. Temos a mesma coisa, mas esta opção funciona mesmo se o seu elemento não tiver uma largura definida. Agora vou mostrar-vos outro exemplo. Primeiro, vou selecionar este cartão, e como você pode ver, sua configuração de exibição está definida para bloquear. Vou mudá-lo para flexionar por um segundo e tudo está desorganizado porque a direção está ajustada para horizontal. Vou mudá-lo para vertical, estamos bem de novo. Agora, vou mudar o alinhamento para o centro. Deixe-me selecionar a imagem agora. Deixe-me mudar sua largura para 200 pixels e sua altura para 200 pixels também. Às vezes, talvez seja necessário mover esta imagem para cima para ter uma imagem sobreposta. Para fazer isso, podemos usar espaço negativo. Deixa-me mostrar-te como funciona. Vou selecionar esta imagem, e aqui na margem, vou dar-lhe uma margem negativa. Simplesmente assim. Lá vamos nós. Usar margens negativas é totalmente bom. Na verdade, muitos sites populares os usam. Tudo bem, pessoal, isso é tudo sobre espaçamento. Espero que tenha gostado. Vejo você no próximo vídeo. 34. Tamanho: No desenvolvimento web, existem diferentes unidades de tamanho que podemos usar. Neste vídeo, vamos falar sobre cada um deles. Vamos começar. Primeiro, vou arrastar e soltar uma imagem no meu Canvas. Deixe-me deixar cair dentro da minha seção aqui. Para imagens, você pode especificar as dimensões aqui mesmo nas configurações da imagem, mas não é uma boa maneira. Por quê? Deixa-me mostrar-te. Aqui, eu vou mudar a largura para 400 pixels e a altura vai ser automática. Por enquanto, parece bem. Mas se eu for para o ponto de interrupção da área de trabalho e se eu quiser fazer algumas alterações, especificamente para essa dimensão, as alterações se aplicarão também à versão da área de trabalho. Deixa-me mostrar-te. Vou clicar duas vezes sobre ele, e vou diminuir a largura aqui para 300 pixels. Se eu voltar para o ponto de interrupção da área de trabalho, lá vamos nós, nossa imagem é redimensionada e isso não é bom quando queremos projetar páginas web responsivas. Portanto, é sempre bom usar classes para dimensionar suas imagens. Você deve evitar dimensionar suas imagens aqui tanto quanto possível. Vou ajustá-lo para auto. Ótima. Agora, no lado direito, você pode ver que está no painel lateral, nós temos a seção de tamanho. Como mencionei antes, estas são todas as propriedades CSS e o tamanho também é uma propriedade CSS. Temos diferentes unidades para trabalhar. O mais simples é o pixel. As dimensões de qualquer elemento por padrão são definidas como auto. Como pode ver, diz “auto”. Auto determina as dimensões desse elemento em relação ao pai desse elemento. Neste caso, os pais desta imagem são esta seção. Aqui a largura e a altura são definidas como auto. Vou selecionar esta imagem e em vez de auto vou dar-lhe um valor específico. Digamos 350 pixels. Para escrever a unidade, você pode simplesmente escrever px, ou você poderia apenas clicar neste pequeno “PX” aqui e você verá todas as unidades disponíveis. Vou selecionar “PX”, deixe-me torná-lo maior. Vou configurá-lo para 450 pixels. Agora esta imagem tem uma largura específica. Podemos definir uma altura específica para isso também. Vamos configurá-lo para 350 pixels, exatamente assim. Mas e as outras unidades? Nós temos porcentagem. Eu vou escolher isso. Bem, a porcentagem é realmente relativa ao elemento pai também. Por exemplo, se eu quiser que esta imagem ocupe 30% do espaço disponível aqui nesta seção, que é o elemento pai, posso selecioná-la e configurá-la para 30%. Tenha em mente que a porcentagem realmente ocupa um pouco do espaço disponível. Aqui para esta seção, agora eu tenho um preenchimento de 40 pixels esquerda e direita. Portanto, ocupa 30 por cento do espaço esquerdo aqui. Deixe-me selecionar minha imagem. Eu posso simplesmente configurá-lo para 50% ou qualquer quantidade que eu quiser. A mesma coisa acontece com a altura. Se eu mover esta imagem para fora da minha seção aqui, e o pai desta imagem agora é o corpo, então ela ocupa 50% da janela do navegador. Vamos verificar isso. Se eu visualizar isso, como você pode ver, ele ocupa 50% da janela do meu navegador. Se eu apenas modificar a dimensão, você pode ver que ela ainda ocupa 50% da dimensão. É fácil, não é? Agora vamos passar para a próxima unidade. A próxima unidade é em. Vamos falar sobre EMS e REMS, embora não sejam tão úteis. Vamos começar com EMS. Na verdade, ems e rems são relativos ao tamanho da fonte. Aqui o tamanho da fonte é definido como 14 pixels. Um em é igual a 14 pixels. Se eu quiser definir a largura para 280 pixels, eu posso apenas multiplicar essa quantidade por esse tamanho de fonte. Digamos 20. Então, 20 ems é igual a 280 pixels. Vamos escrever 20 EMS. Lá vamos nós. Se eu escrever 280 pixels, então você pode ver que isso é a mesma coisa. Deixe-me provar isso para você. Lá vamos nós. Nada muda, porque 280 pixels é igual a 20 ems. Deixe-me escrever 20 EMS novamente. Agora, se eu tentar aumentar o tamanho da fonte, essa largura também muda de acordo. Vou manter pressionada a tecla Option no meu teclado ou a tecla Alt se você estiver usando o Windows e basta clicar e arrastar. Lá vamos nós. Vou definir o tamanho da fonte para 30. Um em agora é igual a 30 pixels. Portanto, a largura desta imagem agora é de 600 pixels. Você pode usar EMS às vezes. Por exemplo, se você quiser criar um cartão e quiser que todos os elementos respeitem o tamanho da fonte. Mas um dos melhores casos de uso para usar ems é em botões. Vou arrastar e soltar um botão aqui. Este botão, por padrão, tem 15 pixels à esquerda no preenchimento direito. Vamos ver o que acontece se eu mudar o tamanho da fonte. Primeiro, deixe-me dar uma aula a este botão. Vou escrever “New Button”. Se eu tentar aumentar o tamanho da fonte, vamos ver o que acontece. Você pode ver isso? O estofamento permanece o mesmo. Podemos resolver este problema. Primeiro, vou definir o tamanho para 16 pixels. Agora aqui para o preenchimento, eu vou usar ems, para o acolchoamento superior, inferior, esquerdo e direito. Vou selecionar o preenchimento superior e aqui vou escrever um em para o fundo. A mesma coisa, um em para a esquerda, um em e para o direito. Agora temos um botão totalmente responsivo, porque esses preenchimento agora são relativos ao nosso tamanho de fonte, então eles respeitam nosso tamanho de fonte. Vou em frente e aumentar o tamanho da fonte. Como você pode ver, a escala de preenchimento também. Este é um dos casos de uso mais populares. Mas e quanto a rems? Deixe-me selecionar esta imagem. Bem, rems na verdade significa emagrecer raiz, e isso significa que não respeita o tamanho da topografia que definimos aqui. Ele só verifica o tamanho da fonte do navegador do usuário. Por padrão, ele é definido para 16 pixels, a menos que o usuário altere isso. Mas se eu definir a largura para 20 rem aqui, exatamente assim, e eu tentar aumentar o tamanho da fonte, nada acontece porque rem não respeita o tamanho da fonte aqui. Vamos tentar. Lá vamos nós. Nada acontece. No entanto, se eu for para as configurações do meu navegador e tentar aumentar o tamanho da fonte, essa imagem será maior. Estas são algumas unidades avançadas que você pode não precisar usá-las, mas eu só quero que você saiba que elas existem. Agora vamos falar sobre ch. Deixe-me ir em frente e arrastar e soltar um parágrafo aqui que você poderia realmente entender o que o ch significa. Vou arrastá-lo e soltá-lo dentro da minha seção. Deixe-me modificar a cor aqui para branco. Legal. Como podemos ver, a largura do texto aqui é tão longa, portanto, é muito difícil ler este parágrafo, e é uma boa prática limitar o número de caracteres em um parágrafo. Então, como podemos fazer isso? Podemos definir uma largura específica para isso. Podemos usar porcentagem ou podemos usar CH. Vou configurá-lo para CH. Então, o que é um CH? Na verdade, 10 CH é igual a 10 zeros dessa fonte específica. O que eu quero dizer com isso? Deixe-me definir esta largura para, digamos 50 CH. Isso significa que a largura deste parágrafo está agora definida como 50 zeros dessa fonte específica. Deixa-me mostrar-te como funciona. Vou escrever uma coisa aqui. Deixe-me fazer este tamanho de fonte maior, eu vou ajustá-lo para 20. Vamos escrever “Olá”. Então eu vou mudar a largura para 10 CH. Dez CH não significa 10 caracteres. Este é um erro muito comum que a maioria dos iniciantes comete. Não se trata de personagens. Deixe-me provar isso para você. Aqui eu vou escrever “olá”. Mais uma vez vou escrever “olá”. Mais uma vez, vamos escrever, olá, apenas, ele, aqui. Vamos contar, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 e 12. São 12 personagens. Mas se eu apertar “Enter” e tentar escrever zeros, devemos ser capazes de escrever precisamente 10 zeros, 1, 2, 3, 4,5, 6, 7, 8, 9 e 10, o próximo zero vai para a próxima linha. É assim que a CH funciona. Se eu mudar a fonte aqui para outra coisa, você pode ver que a largura também muda. Você pode ver isso? Tudo bem. Agora vamos passar para a próxima unidade, que é VW e VH. VW significa largura viewport e VH significa altura viewport. Então, o que eles querem dizer? Bem, eu vou selecionar esta imagem e eu vou definir a largura para 50 VW. O que isso significa? Viewport é, na verdade, o tamanho da janela do nosso navegador. Se eu usar uma tela de 13 polegadas, meu visor é um 13 polegadas. Se eu usar uma tela maior, minha viewport será maior. Ok, então se eu definir a largura para 50 VW, isso significa que esta imagem deve ocupar 50% da largura da janela de exibição. Vamos tentar. Lá vamos nós. Como você pode ver, ele ocupa 50 por cento da largura da janela de exibição. Podemos fazer a mesma coisa pela altura. Posso ajustar a altura para, digamos, 50 VH. Vamos tentar. Como podemos ver, ele ocupa 50% da altura das janelas do meu navegador, exatamente assim. Agora vamos falar sobre largura mínima e altura mínima. Estes são super, super poderosos. Às vezes, não precisamos especificar explicitamente o tamanho específico para nossos elementos. Em vez disso, podemos usar largura mínima, altura mínima, largura máxima e altura máxima. Deixa-me mostrar-te como funciona. Vou dar outro exemplo. Aqui tenho um cartão, está bem? Se eu selecionar isso, você pode ver que a largura e a altura estão definidas como auto. No entanto, não parece bom. Por quê? Porque ele ocupa toda a largura da seção, seu elemento pai. Como posso consertar isso? Bem, em vez de definir uma largura específica para isso, eu vou definir uma largura mínima e uma largura máxima para isso. Digamos que queremos que esta imagem tenha uma largura mínima de 350 pixels. Portanto, vou definir a largura mínima para 350 pixels. Nada muda porque esta é a largura mínima. Se eu quiser limitar a largura máxima desta imagem ou deste cartão, digamos que eu precise modificar a largura máxima. Aqui a largura máxima será de 400 pixels. Lá vamos nós. Agora esta carta tem 400 pixels, mas não pode ser menor que 350 pixels. Vamos tentar. Se eu visualizar isso, você pode ver que ele não pode ser menor que os 350 pixels, ok? Porque nós definimos uma largura mínima para isso. Se eu torná-lo menor, por exemplo, a largura mínima será, digamos, 250 pixels. Agora, pode ser menor, ok, apenas assim. Esta é a largura mínima. Podemos usar a altura mínima também. Funciona exatamente da mesma forma. Podemos usar isso para nossa seção de heróis. Por exemplo, para nossas seções, podemos definir a altura mínima para, digamos, 100VH e isso significa que ela ocupa pelo menos 100% da altura da viewport e não atrapalha nosso conteúdo. Como eu mencionei, essas unidades são avançadas e se você não sabe como eles funcionam completamente, Isso é totalmente bom porque leva tempo e prática para se acostumar completamente com essas unidades. Agora vamos passar para o próximo tópico que é estouro. Aqui no nosso cartão eu tenho um parágrafo. Tudo bem, vou redefinir essa largura mínima e altura mínima. Aqui eu vou definir uma largura específica, como 340 pixels. A altura em vez de auto, eu vou configurá-lo para, digamos 400 pixels. Agora, se eu tentar adicionar mais frases aqui, vamos ver o que acontece. Lá vamos nós. Agora temos o transbordamento. Acontece às vezes, e podemos consertar isso. Para corrigir isso, precisamos selecionar o pai desse elemento. Os pais deste plug de texto é este cartão. Certifique-se de selecionar o pai. Se você for para o transbordamento, aqui podemos definir o transbordamento para oculto. Ele mascara o conteúdo transbordante. Se eu visualizar isso, você pode ver que não há transbordamento acontecendo. Temos outras opções também. Temos pergaminho. Se eu selecionar isso, você pode ver que o usuário pode percorrer o conteúdo apenas assim, temos mais uma opção e que é auto. Auto significa que o navegador primeiro verifica se há tanto conteúdo aqui que não se encaixa neste cartão, ele irá mostrar o pergaminho, mas se eu tentar remover algumas frases aqui como esta, ele não irá mostrar o pergaminho . Agora precisamos falar sobre a última propriedade da seção de tamanho, que é adequada. Deixe-me arrastar e soltar um bloco de Div aqui. Lá vamos nós. Vou dar-lhe uma aula, ou vamos chamá-lo, Demo. Para esta demonstração, eu vou ir em frente e arrastar e soltar uma imagem aqui. Vamos supor que queremos que esta imagem cubra este bloco Div. Primeiro, vou selecionar esta imagem. Vou definir a largura e a altura para 100 por cento. Isso significa que ele leva 100 por cento de sua largura pai que é este bloco div demo e 100 por cento de sua altura pai, que é exatamente este bloco div demo. Então, enquanto esta imagem estiver selecionada, vou mudar o ajuste de preenchimento para capa. Agora vamos ver o que acontece. Se eu selecionar este bloco div demo, eu posso dar-lhe uma largura e altura específicas como 400 pixels. Você pode ver que a imagem cobre este bloco div perfeitamente. Se eu modificar a altura, digamos 500 pixels, lá vamos nós, ela cobre a imagem e não muda a proporção da imagem desde que definimos o ajuste para cobrir. Se eu mudá-lo para, digamos, preenchê-lo mudará a proporção. Mas como está definido para cobrir, não altera a proporção da nossa imagem. Mas e se você não estiver satisfeito com o posicionamento desta imagem? Bem, há uma opção avançada ao lado deste ajuste. Se você selecionar sua imagem, você pode clicar neste ícone de três pontos e, em seguida, você pode posicionar sua imagem como quiser. Tudo bem, pessoal, isso é tudo para este vídeo. Espero que tenha gostado. Se você não entendeu algumas dessas unidades avançadas, tudo bem. Você sempre pode chegar a mim e eu vou tentar simplificar tudo para você. Mas acredite em mim, se você começar a praticá-los em projetos do mundo real, certeza, você vai se acostumar com eles o mais rápido possível. Vejo você então. 35. Posição: Ei! Neste vídeo, vamos falar sobre posicionamento. Basicamente temos seis tipos diferentes de posicionamento. Temos estático, temos relativo, temos absoluto, fixo, pegajoso, e finalmente temos flutuador. Neste vídeo, vamos mergulhar em cada um deles e eu vou mostrar como eles diferem um do outro, e como você pode usá-los corretamente. Você está pronto? Vamos começar. Vou começar com estática. Qualquer elemento por padrão tem uma posição estática. O que isso significa? Isso significa que eles fazem parte do fluxo de documentos, então eles ocupam espaço em nossa página e também aparecem na ordem em que eles são empilhados. Por exemplo, aqui eu tenho um título, sua posição é definida como estática. Então eu tenho um parágrafo, novamente estático. Então eu tenho este invólucro de imagem, novamente, estático. Então eu tenho essas imagens, esses blocos div, eles estão todos configurados para estática. Na maioria das vezes usamos a posição estática, e mudamos o posicionamento usando as configurações de exibição que falamos antes. Mas às vezes, por algumas razões específicas, talvez precisemos mudar o posicionamento. Vamos ver como eles diferem um do outro. Vou selecionar esta imagem, a terceira, este bloco div, e vou mudar sua posição de estática para relativa. Vamos ver o que acontece. - Nada. Mas não é verdade, porque agora sua posição é relativa a si mesma. Aqui, como você pode ver, diz relativo a, e então indica que a posição deste bloco div é relativa a si mesma. O que isso significa? Quando definimos a posição de qualquer elemento para relativo, temos duas posições; a posição antiga e a nova posição. A nova posição deste elemento é relativa à posição antiga deste elemento. Parece complicado e complexo à primeira vista, mas acredite em mim, é tão simples. Deixa-me mostrar-te. Aqui, uma vez que eu definir esta posição como relativa, eu tenho acesso a essas configurações de posicionamento. Se eu tentar mudar sua posição assim, agora esta nova posição é relativa à sua posição anterior. Nós movemos 92 pixels para a esquerda de sua posição original. Quando definimos a posição de um elemento como relativo, ele ainda faz parte do fluxo de documentos, modo que ainda ocupa espaço. Isto é basicamente como o posicionamento relativo funciona. Uma coisa a mencionar é que quando temos diferentes elementos que queremos colocar um em cima do outro, não podemos fazer isso usando estática. Deixa-me mostrar-te o que quero dizer. Se eu configurá-lo como estático e se eu quiser que essas imagens se sobreponham umas às outras, eu não posso fazer isso. Claro, eu posso mudar o preenchimento e a margem e eu posso dar-lhes alguma margem negativa e preenchimento, no entanto, isso não é uma boa maneira. Por quê? Porque quando alteramos a margem e o preenchimento, estamos realmente mudando a posição real desse elemento e estamos mudando o fluxo do documento. Isto não é o que queremos. Se queremos que essas imagens se sobreponham para um layout específico, podemos definir esses elementos para relativo. Se eu selecionar este bloco div, o último e eu definir sua posição como relativo, é relativo a si mesmo, e aqui temos uma nova propriedade que é chamada z-index. O índice z nos permite controlar como nossos elementos devem ser empilhados uns sobre os outros. Se eu quiser que a segunda imagem apareça no topo desta imagem, posso selecioná-la, posso configurá-la como relativa, e assim que a definir como relativa, posso alterar o seu índice z. Vamos definir para um, lá vamos nós. Agora esta imagem tem um índice z maior, portanto, ela estará em cima de nossa imagem anterior. Se eu selecionar esta primeira imagem e definir sua posição como relativa, posso movê-la para o lado direito assim, e ela está atrás da nossa imagem do meio. Por quê? Porque nossa imagem do meio, a segunda imagem, tem um índice z maior. Se eu quiser que esta primeira imagem esteja no topo da nossa imagem do meio, eu posso definir um índice z maior para isso. Por exemplo, dois. Lá vamos nós. Se eu quiser um terceiro para estar em cima de todas essas imagens, eu posso definir seu índice z para três. Se eu movê-lo, você pode ver claramente que está em cima das outras duas imagens. Isto é basicamente como o posicionamento relativo funciona. Criamos uma nova posição para o nosso elemento, que é relativa à sua posição antiga e também podemos controlar o índice z. Agora vamos definir a posição dessas imagens de volta para estática por um segundo. Vamos falar sobre a outra opção de posicionamento, que é absoluta. Se eu definir um elemento para a posição absoluta, vamos ver o que acontece. Como você pode ver, tudo está desorganizado. Posso ter acesso a essas opções de alinhamento, e se eu clicar nisso, por exemplo, no canto superior esquerdo, você pode ver que ele será posicionado no canto superior esquerdo, e aqui diz que é relativo ao corpo. A posição absoluta funciona assim. Ele sempre procura o primeiro elemento pai que tem o posicionamento de relativo. Aqui, eu tenho este wrapper de imagem e este wrapper de imagem tem um posicionamento estático. Portanto, quando eu mudo a posição deste bloco div, esta imagem para absoluta, é relativa ao corpo. E se eu quiser que esta imagem seja relativa a este wrapper de imagem? Bem, é simples. Eu posso selecionar o wrapper de imagem, e eu posso mudar sua posição para relativo. Lá vamos nós. Agora esta imagem é relativa ao limite do wrapper da imagem. Ele encontra um elemento pai, que é este wrapper de imagem que tem um posicionamento relativo. Você precisa entender e aprender esses conceitos muito bem, porque quando se trata de desenvolvimento web, essas opções de posicionamento podem realmente ajudá-lo a criar alguns layouts impressionantes e algumas páginas da web impressionantes. Agora, eu posso selecionar este bloco div e eu posso modificar sua posição como eu quiser. Agora é relativo ao seu pai, que tem o posicionamento relativo. Quando podemos usar o posicionamento absoluto? Por exemplo, suponhamos que você queira criar uma janela pop-up, que é tão popular. Hoje em dia, a maioria dos sites usa um pop-up para permitir que o usuário se registre para algo. Nesse caso, podemos usar a posição absoluta. É claro que vamos falar sobre a posição casos de uso absolutos e diferentes mais tarde. Mas, por enquanto, você só precisa entender como funciona. Assim como o parente, ainda podemos trabalhar com o índice z aqui. Uma coisa a mencionar sobre a posição absoluta, é que quando você define um elemento para posicionar absoluto, ele não faz mais parte do fluxo do documento. O que eu quero dizer com isso? Significa que não precisa de espaço. Se eu tentar movê-lo, não leva espaço aqui. Não é parente. Esta é a principal diferença entre a posição absoluta e relativa. Você precisa manter isso em mente. Não leva espaço. Vamos configurá-lo para estática. Agora, eu vou falar sobre a próxima opção de posicionamento que é corrigida. Deixe-me mostrar-lhe outro exemplo. Vou arrastar e soltar uma barra de navegação aqui, e vou colocá-la bem abaixo do meu corpo, bem aqui. Então vamos dar uma aula. Vou escrever para o Nav. Legal. Também vou modificar a sua altura. Vamos definir sua altura para algo como 200 pixels. É demais, talvez 150 pixels. Legal. Eu defini sua altura para 150 pixels porque eu vou mostrar algo em um segundo. Vamos visualizar nosso projeto por um segundo. Esta barra de navegação faz parte do fluxo de documentos e ocupa espaço. Se eu rolar para baixo, você pode ver que tudo funciona como esperado. Desaparece assim que eu rolar para baixo. E se eu quiser que ele fique no topo enquanto eu estiver rolando? Bem, podemos usar a opção fixa. Se eu usar posição fixa, vamos ver o que acontece. Primeiro, tudo será desorganizado porque quando definimos algo como fixo precisamos especificar seus alinhamentos. Temos de definir que deve ser fixado no topo, por exemplo. Agora está consertado. No entanto, isso não faz mais parte do fluxo de documentos. Como é que eu sei disso? Porque agora você pode ver que este recipiente empurrou um pouco para cima. Por quê? Porque não há barra de navegação mais ocupando espaço. Se eu visualizar isso, você pode ver que ele gruda no topo, exatamente assim. No entanto, temos esse problema. Para corrigir isso, podemos usar outro posicionamento. Mas antes de fazer isso, deixe-me mostrar-lhe outro exemplo de posicionamento fixo. Se eu selecionar esta imagem, este bloco div e eu definir sua posição como fixa, eu posso mudar seu alinhamento para o canto inferior direito e é relativo ao corpo. Na verdade, é relativo à porta de visualização. Não é mais relativo aos pais. É relativo à janela do navegador. Se eu visualizar isso, você pode ver que ele está fixo no canto inferior direito. Se eu rolar para baixo, ele ainda será corrigido lá porque é relativo à porta de exibição, à janela do navegador. Se eu quiser mudar a dimensão, deixe-me mostrar como funciona. Simplesmente assim. Ainda está lá. Deixe-me ajustar sua posição de volta para estática e eu vou mostrar-lhe como podemos corrigir o problema com esta barra de navegação. Como não queremos estragar nosso fluxo de documentos, podemos usar a opção adesiva. Se eu selecionar essa barra de navegação e definir sua posição como pegajosa, podemos ver que ela ainda faz parte do fluxo de documentos porque este contêiner não empurrou para cima. No entanto, podemos especificar que ele deve ficar no topo. Se estiver definido como automático, se todas estas arestas estiverem definidas como auto, veja o que acontece, não funcionará. A coisa com pegajoso é que você precisa definir onde esse elemento deve ficar. Eu vou colocar o topo aqui em zero. Isso significa que ele deve ficar na borda superior do nosso navegador. Uma coisa a mencionar é que o sticky também é relativo à porta de visualização. Não é relativo aos pais. Agora, se eu visualizar isso, lá vamos nós. Ele está fixo no topo e não está atrapalhando nosso fluxo de documentos porque ele ainda faz parte do fluxo de documentos. Podemos usar esta posição para a nossa barra de navegação para o rodapé. Estivemos falando sobre eles. Mas eu preparei outro exemplo para você, que é tão popular hoje em dia. Aqui eu tenho uma seção e dentro eu tenho um recipiente, que é uma caixa flexível. Dentro deste recipiente eu tenho dois blocos div diferentes. O conteúdo do bloco no lado esquerdo, e este bloco div boletim no lado direito. Nada complicado. Vou selecionar este div boletim informativo, e vou mudar sua posição para pegajoso. Vamos ver o que acontece. Primeiro, vou em frente e remover esta barra de navegação. Não precisamos mais dele. Agora vou pré-visualizar isso. Como pode ver, nada acontece. Por quê? Porque como você se lembra quando trabalhamos com posição pegajosa, precisamos especificar onde ele deve ficar. Aqui eu vou definir o topo para zero e deixe-me mostrar-lhe o que acontece. Vou pré-visualizar isso. Se eu rolar para baixo assim que ele toca a borda superior do meu navegador, que é a parte superior da porta de visualização, você pode ver que ele começa a ficar assim até chegar ao fim de seu elemento pai, que é o contentor. Deixe-me mostrar-lhe mais uma vez. Uma vez que definimos a posição superior para zero, uma vez que ele toca a borda superior, ele começa a colar até chegar ao final de seu elemento pai, que é neste caso o recipiente. Então ele se comporta normalmente, como você pode ver. Agora, podemos até adicionar mais espaçamento aqui. Por exemplo, eu vou definir para 100 e vamos ver o que acontece. Agora, quando há 100 pixels no topo, ele começa a ficar assim. Quão legal é isso? Você pode ver esse comportamento em muitos sites, como sites blogs médios ou outros diferentes. Agora vamos falar sobre outra opção, que é o último tipo de posicionamento e é chamado float. Bem, hoje em dia não usamos flutuador e claro tanto. No entanto, para alguns casos de uso, ainda é muito prático e podemos usar float. Deixa-me mostrar-te como funciona. Primeiro de tudo, eu gostaria de mencionar que flutuar e claro não funcionam com caixas flexíveis e o filho de uma caixa flexível. Aqui eu tenho um recipiente que não é uma caixa flexível. A configuração de exibição está definida para bloquear. Dentro eu tenho um bloco div imagem simples e, em seguida, eu tenho um parágrafo. Se eu selecionar este bloco div imagem e uma mudança sua posição para flutuar, por exemplo, flutuar à esquerda, podemos ver que o conteúdo envolve em torno desta imagem agora. Se eu mudar o flutuador para a direita, você pode ver que agora o conteúdo está sendo embrulhado do lado esquerdo, apenas do lado oposto. Mas o que está claro? Vamos supor que temos esta imagem definida para flutuar à esquerda. Vou selecionar este parágrafo. Eu não queria envolver essa imagem específica. Neste caso, posso definir claro para a esquerda, direita ou ambos os lados. Na maioria das vezes usamos ambos os lados. Como nossa imagem está aqui no lado esquerdo, agora apenas o lado esquerdo funciona. Se eu configurá-lo para a esquerda, você pode ver que ele não está mais envolvido em torno dele. Mas se eu definir como certo, não funciona porque o nosso elemento aqui, que está definido para flutuar, não está do lado direito. Se eu deixar claro ambos, você pode ter certeza de que ele será limpo. Tudo bem, pessoal, isso é tudo por este vídeo. Nós conversamos sobre muitas coisas diferentes e espero que você possa entender diferentes tipos de posicionamento. Se você tiver alguma dúvida, por favor me avise. Certifique-se de praticar todas essas opções de posicionamento porque vamos trabalhar com elas em projetos do mundo real. Vejo você no próximo vídeo. 36. tipografia: Ei, neste vídeo vamos falar sobre a seção de tipografia neste painel lateral do lado direito. Aqui, eu tenho alguns elementos de texto, eu tenho um título, e também eu tenho um parágrafo. Deixe-me selecionar o título, e eu vou mostrar todas as propriedades do painel de tipografia aqui. Primeiro, temos a fonte. Se você abri-lo, você tem algumas fontes padrão. Se você quiser adicionar mais fontes, você pode clicar em Adicionar fontes na parte superior, e você será levado para as configurações do projeto. Na guia Fontes, você pode adicionar fontes diferentes. Por exemplo, se você quiser trabalhar com fontes do Google como Roboto ou outras fontes do Google, basta adicioná-las aqui. Deixe-me procurar o Roboto por um segundo. Deixe-me ver se consigo encontrá-lo. Lá vamos nós. Aqui está Roboto, então você pode selecionar variantes dessa fonte específica. Estes são os pesos de suas fontes, por exemplo, regular, 500, 700, que é preto, e se você quiser carregar algumas fontes personalizadas, você pode carregá-las aqui do seu computador, e se você quiser usar Adobe Fonts, você pode simplesmente usar esta seção para conectar seu projeto ao Adobe Fonts usando uma API. Agora vamos falar sobre o painel de tipografia. Vou selecionar este título. Aqui, falamos sobre a fonte, então temos peso, temos negrito, pesos diferentes. Cada fonte tem pesos diferentes. Então temos o tamanho. Este é o nosso tamanho de fonte, e você pode usar diferentes unidades como a propriedade tamanho aqui. Você pode usar pixel, percentual, ems e rems, CH, largura da janela de exibição e altura da janela de exibição. Finalmente, temos a altura da linha, que é tão importante quando temos um parágrafo. Aqui, se eu selecionar este parágrafo, defino a altura da linha como 150 por cento, então é 150 por cento do tamanho da fonte. Se eu apenas redefinir essa configuração, você pode ver que este parágrafo não é tão legível. Portanto, é sempre uma boa prática aumentar a altura da linha, especialmente quando você está trabalhando com tamanhos de fonte pequenos, então eu vou defini-la para 150 por cento. Lá vamos nós. Aqui temos cor. Você pode alterar a cor da sua fonte facilmente para a outra cor que você deseja. Aqui está o controle deslizante de matiz, então temos o controle deslizante de transparência, isso controla a quantidade alfa de sua cor se você quiser, digamos, diminuir a opacidade, você pode apenas usar este controle deslizante. Aqui temos o código de cor hexadecimal. Você pode simplesmente copiar e colar o código de cor hexadecimal de qualquer software de design com o qual você trabalha, não importa se é Figma, Sketch, Adobe XD, não importa. Então temos HSB, que significa matiz, saturação e brilho. Não vamos falar sobre essas especificações aqui. Então temos o alfa ou a opacidade. Se eu usar esse controle deslizante e diminuir a opacidade, você pode ver que a quantidade alfa muda. Aqui temos a taxa de contraste e ele realmente nos permite saber se temos contraste suficiente entre a cor de fundo e a cor de primeiro plano. Como você pode ver, diz AAA, e significa que é muito legível. Mas se eu tentar usar algumas cores mais claras como essa, você pode ver primeiro que temos AA, ainda está bom, ainda é bom. Mas se ele diz falhar, isso significa que seu texto pode não ser legível para algumas pessoas. Ele muda com base no tamanho da fonte e em fatores diferentes, portanto, certifique-se sempre de que a cor passa no teste da taxa de contraste. Deixe-me desfazer o processo. O que temos aqui? Aqui é onde podemos criar nossas amostras. Vamos supor que temos essa cor e queremos criar um estilo de cor ou digamos uma amostra de cor. Se você está familiarizado com Figma, você pode saber que podemos criar estilos de cores, e isso funciona assim. Aqui podemos apenas clicar neste botão mais e ele cria uma nova amostra. Eu posso nomeá-lo, por exemplo, eu posso dizer neutral/luz, criar. Se eu selecionar qualquer outro elemento aqui e eu passar para a seção de cores, você pode ver que a amostra está aqui. Como você pode ver, há esta pequena flecha e isso significa que esta é uma amostra global, e eu posso usá-la para qualquer elemento assim. Aqui, se eu usar esta amostra de luz neutra para este parágrafo, e eu usá-lo aqui também. Por exemplo, deixem-me mudar isso. Se eu mudar aqui, se eu clicar neste botão Caneta e tentar mudar esta cor, você pode ver que as alterações se aplicam imediatamente a todos os elementos que estão usando esta amostra em particular, então você precisa ter certeza de manter suas cores organizadas. Vamos desfazer o processo. Vamos passar para a próxima propriedade, que é align. É tão simples. Temos diferentes opções de alinhamento, esquerda, centro, direita e justificar, assim como o Microsoft Word ou qualquer software de design. Então temos a propriedade de estilo. Podemos colocar o texto em itálico assim. Podemos usar algumas decorações aqui. Por exemplo, podemos usar esse strikethrough. Podemos usar sublinhado ou overline. Se você quiser criar alguns links, por exemplo, podemos usar este sublinhado. Então temos este Mais Opções de Tipo, Por padrão, não é visível, mas se você clicar sobre isso, você pode obter acesso a essas opções avançadas, como espaçamento de letras, recuo de texto, colunas, e estes opções de capitalização e direção. Vamos passar por cada um deles. Usando este campo, podemos controlar o espaçamento entre letras. Por exemplo, se eu quiser aumentar o espaçamento entre letras, eu posso definir um espaçamento de letras mais alto aqui. Vou ajustá-lo para 20 agora. Como você pode ver agora, o espaçamento entre letras é muito maior. Deixe-me diminuir isso. Na verdade, um bom caso de uso para usar espaçamento entre letras é quando temos uma palavra que é completamente maiúscula. Se eu selecionar isso, design de interiores, e se eu definir a opção maiúscula para todas as maiúsculas como essa. Às vezes, se eu trabalhar com tamanhos de fonte pequenos, eu preciso aumentar o espaçamento entre letras para melhorar a legibilidade e legibilidade dos meus textos. Neste caso, deixe-me definir para cinco. Agora, parece muito melhor. Eu posso definir para três também. Isso é usado basicamente para esse propósito. Agora, vamos passar para o próximo que é recuo de texto. Vou selecionar este parágrafo e deixe-me especificar uma quantidade como 20 pixels. Ele apenas recua o texto, assim como o Microsoft Word. Então temos colunas. Na verdade, eu nunca usei isso e eu raramente vejo qualquer site ou qualquer designer usar essa opção. Mas é bom saber que existe. Se eu especificar três aqui, ele pega nosso texto e divide-o em três colunas iguais. Se eu apertar Enter, lá vamos nós, agora, temos três colunas diferentes. Podemos apenas modificar a lacuna aqui, por exemplo, o estilo. Podemos adicionar alguns divisórias. Como você pode ver, podemos modificar a espessura desse divisor, assim como, e também podemos modificar a cor desse divisor. Mas para ser honesto, eu nunca usei isso e duvido que você deva usar isso também. Deixe-me remover isso por enquanto. Se você quiser redefinir qualquer propriedade aqui, você pode manter pressionada a tecla Option ou Alt no seu teclado e, em seguida, basta clicar nela uma vez, exatamente assim. Então temos as opções de capitalização. Temos todas as maiúsculas, como mostrei antes. Temos maiúsculas todas as palavras, assim, ou temos letras minúsculas. Eu vou definir para nenhum. Então temos direção. Para a maioria dos idiomas, usamos a direção da esquerda para a direita, mas para alguns idiomas como o árabe, você pode usar a direção da direita para a esquerda. Então temos que quebrar, há algumas opções como esta. Não é tão útil. Não vamos tocar em todas essas opções já que na maioria das vezes não usamos essa opção de quebra. Então temos sombra de texto. Se eu clicar neste botão mais, eu posso adicionar sombra ao meu texto, apenas assim. Eu recomendo que você evite adicionar sombras aos seus textos porque diminui a legibilidade do seu texto. Vou remover isto. Isso é tudo sobre tipografia. Mas há mais uma coisa que vou mencionar aqui. Se eu arrastar e soltar um bloco div aqui, vou dar uma aula, vamos escrever tipografia. Aqui para este bloco div, eu posso definir algumas propriedades específicas que seus filhos podem usar. Se eu mudar a fonte para outra coisa, vamos usar esta por exemplo, e eu aumentar o tamanho da fonte para, digamos, 40 pixels, algo dramático, e também mudar a cor para vermelho, você pode ver que nada acontece aqui porque não há nenhuma camada de texto dentro. No entanto, se eu for em frente e arrastar e soltar um título aqui, lá vamos nós. Agora, este cabeçalho está recebendo as propriedades das propriedades padrão que definimos para seu pai, que é este bloco div tipografia. Claro, podemos substituir isso, por exemplo, eu posso dar uma classe a este título, como Cabeçalho 1, e apenas modificar a cor para o que quisermos, e o tamanho da fonte, ou quaisquer outras propriedades aqui. Mas você precisa entender que às vezes faz muito mais sentido adicionar as propriedades padrão aos pais de nossos elementos primeiro, e então podemos simplesmente arrastar e soltar esses elementos e não precisamos modificar tudo do zero. Por exemplo, você pode selecionar sua seção. Se sua seção vai ter algumas fontes específicas, e digamos algumas propriedades de fonte específicas, você pode apenas especificar essas propriedades para a seção. Em seguida, o que você colocar dentro desta seção herdará das propriedades que você definiu para essa seção. Eu, pessoalmente, quando eu quero iniciar um projeto, eu seleciono meu corpo e eu defino a fonte aqui uma vez, e então eu não preciso mudar a fonte novamente e novamente e novamente. Claro, eu posso substituir essas propriedades, mas isso vai me poupar muito tempo se eu puder definir algumas propriedades padrão. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado. Vejo-te no próximo. 37. Fundos: Ei! Neste vídeo, vamos falar sobre antecedentes. Se você vai para o painel de estilo logo abaixo da seção de tipografia, nós temos a seção de fundo. É muito útil porque vamos usá-lo quase o tempo todo. Aqui, como você pode ver, eu tenho duas seções diferentes. Uma seção vazia. Isto é para a próxima parte deste vídeo. Mas para a primeira parte, vamos trabalhar com esta seção. Dentro eu tenho um recipiente, como de costume, e então eu tenho o título e um parágrafo. Vamos supor que queremos adicionar um plano de fundo à nossa seção. Vou selecionar minha seção. Posso ir ao fundo. Eu posso clicar neste botão mais aqui. Agora, eu posso escolher a imagem. Eu já te mostrei esta seção, mas nós realmente não mergulhamos em todos os detalhes aqui. Agora vou escolher esta imagem dos meus bens e lá vamos nós. Por padrão, ele está sempre definido como mosaico, como você pode ver aqui, temos a opção de mosaico. Podemos apenas configurá-lo para nenhum porque não queremos que ele apareça. Então temos as opções de posição e todas essas opções aqui. Vamos começar com o tipo. Aqui, temos tipos diferentes. Temos imagem, temos gradiente linear, temos gradiente radial, e temos a sobreposição de cores. Vamos primeiro falar sobre imagem. Aqui, eu posso definir o tamanho. Posso definir um tamanho personalizado se a guia personalizada estiver selecionada. Raramente usamos esse tamanho personalizado aqui porque geralmente dimensionamos nossas imagens usando a propriedade tamanho no painel de estilo. Então temos a capa, que é tão útil quase todo o tempo que usamos essa opção, e temos o conter. O conteúdo realmente dimensiona a imagem até que ela esteja contida em nossa seção ou em nosso contêiner ou qualquer elemento em que ela esteja. Então eu posso modificar a posição aqui para o centro. Vou prepará-lo para cobrir por enquanto. Nossa imagem de fundo parece ótima. Você também pode definir a posição esquerda e superior com base na porcentagem. Como você pode ver, por padrão, ele está definido como 50%. Se eu configurá-lo para cima esquerdo, você pode ver que esquerda e superior estão definidos para zero. Se eu quiser modificá-los manualmente, também posso fazer isso. Posso definir para 48 por cento, por exemplo, ou talvez digamos 35 por cento. Nada muda aqui porque nossa imagem é muito grande na verdade, então deixe-me modificar o topo também para 20%. Como você pode ver, ele se move para baixo. Vou desfazer o processo. Se queremos que a nossa imagem para mosaico, podemos usar a opção de mosaico. Podemos definir uma largura constante. Deixe-me definir uma largura personalizada para que você possa ver como ele funciona. Vou definir a largura para 100 pixels, e como você pode ver, uma vez que a opção de mosaico foi selecionada, nossa imagem é ladrilhada. Eu posso configurá-lo para horizontalmente telha, e também verticalmente telha. Eu vou configurá-lo para não telha e vamos colocá-lo para cobrir. Temos a opção fixa aqui. Por padrão, todas as imagens são definidas como não corrigidas. Vamos falar sobre a diferença entre fixo e não fixo em poucos segundos. Mas, por enquanto, vamos passar para o próximo recurso desta seção de imagem e gradientes. Como você pode ver, nossas camadas de texto não são legíveis. Por quê? Porque não temos contraste suficiente aqui. E se eu mudar a cor deles para branco? Vamos ver se faz diferença. Claro, isso faz a diferença, mas ainda assim, como temos um tamanho de fonte pequeno, às vezes pode ser difícil ler esse texto. Como podemos consertar isso? Bem, uma solução muito conhecida é apenas adicionar uma sobreposição. Se eu selecionar esta seção aqui e, em seguida, eu vou para o plano de fundo. Se eu clicar neste botão mais aqui, eu posso definir o tipo para sobrepor assim. Ele cria uma sobreposição, uma sobreposição escura, e nós podemos apenas controlar a opacidade desta sobreposição a partir daqui, exatamente assim. Agora é muito mais visível. Mas e quanto a gradientes lineares e radiais? Vamos falar sobre eles também. Vou começar com gradiente linear. Bem, como você sabe, um gradiente é uma transição suave de uma cor para outra cor. Por padrão, temos duas paradas ou pontos diferentes aqui. Temos os pontos preto e branco. Vou selecionar este ponto, e desta cor, vou mudar a cor para outra coisa. Deixe-me mudá-lo para, por exemplo, esta laranja. No próximo, vou selecionar o próximo ponto e vou mudá-lo para esta cor. Então eu posso modificar o ângulo deste gradiente aqui. Como você pode ver, eu posso simplesmente modificar o ângulo, o grau. Mas e quanto a essa opção de repetição? Se eu marcar esta caixa de seleção, bem, nada acontece. Isso porque, para que essa opção funcione, precisamos de algum espaço aqui no controle deslizante. Se eu pegar um desses pontos e movê-lo para o lado esquerdo, você pode ver que agora temos mais espaço. Como você pode ver, ele se repete de novo e de novo e de novo, exatamente assim. Posso mudar o ângulo também. Legal. Deixe-me apenas desmarcar esta opção de repetição. Não vamos precisar disso. Também podemos controlar a opacidade dessas cores, por exemplo, para criar uma sobreposição personalizada. Se eu modificar a quantidade Alfa aqui para 50%, como você pode ver, agora temos uma sobreposição de gradiente. Posso fazer a mesma coisa pela minha cor laranja, 50%, lá vamos nós. Parece ótimo. Mas e quanto ao gradiente radial? Se eu clicar sobre isso e se eu definir a opacidade para 100 por cento, novamente, você poderia simplesmente ver a diferença entre um gradiente linear e um gradiente radial. Como podem ver aqui, temos um ponto focal. Podemos mudar o tamanho aqui, por exemplo, este, eu posso definir para este, eu posso mudar o tamanho facilmente. Além disso, posso mudar o ponto focal, como este, a partir do qual essa transição deve começar, assim. Legal. Se você quiser ocultar uma dessas imagens ou gradientes, você pode simplesmente clicar neste ícone de olho ou você pode simplesmente clicar neste botão remover. Se você quiser reordenar seus elementos aqui, você pode simplesmente passar o mouse sobre essas linhas verticais que estão ao lado dessa miniatura minúscula, clicar e arrastar, exatamente assim. Deixe-me remover este gradiente radial por enquanto. Mas às vezes só precisamos ter uma cor de fundo sólida. Podemos fazer isso também. Podemos sempre selecionar um elemento, não importa se é um bloco div, um cabeçalho, um parágrafo. Qualquer caixa pode ter uma cor de fundo. Por padrão, ele é definido como transparente. Se eu selecioná-lo, posso configurá-lo como branco, por exemplo, mas como temos uma imagem aqui, você não pode ver isso. Posso mudar a cor do fundo para preto, para a cor que eu quiser. Há também um bom truque aqui se você quiser usar algumas cores famosas, como branco ou preto, você pode simplesmente escrever seu nome aqui. Por exemplo, vou escrever branco aqui. Lá vamos nós. Eu tenho um fundo branco. Se eu mudar para preto, funciona. Se eu mudá-lo para vermelho, ele também funciona. Mas na maioria das vezes nós normalmente definir manualmente cor do fundo ou nós copiamos e colamos o código de cor hexadecimal aqui. Agora vou falar sobre recortes. Funciona como mascarar em software de design. Vamos supor que eu queira adicionar um gradiente a este título. É possível? Não, exceto que é. Se eu for para cor, posso definir um gradiente. No entanto, há um bom truque aqui. Se eu for para fundos aqui, eu posso criar um gradiente aqui, e eu posso mudar o tipo para linear. A partir daqui, vou mudar o gradiente para, digamos, esta cor. Deixe-me criar um gradiente legal, legal. Agora vou mudar o ângulo. No entanto, como você pode ver, esta caixa não preenche este texto. Não cobre sua altura. Portanto, eu preciso aumentar o tamanho da altura para outra coisa. Deixe-me aumentá-la para 100 pixels por enquanto. Mas parece bom? Não é exatamente o que queremos. Bem, espere um segundo. Eu vou para os Fundos, e daqui eu vou para Recortar e, por padrão, ele é definido como Nenhum. Se eu mudar isso para clipe de fundo para texto, lá vamos nós. Agora temos o gradiente recortado dentro do nosso texto. Quão legal é isso? Este é exatamente o mesmo método que sites mais populares usam para criar tal efeito. Por exemplo, a Apple também usa essa técnica. Eu posso simplesmente modificar os gradientes e as alterações se aplicam a este texto em tempo real. Vamos ver se funciona. Sim, ele faz. Eu vou mudar a cor do fundo desta seção para preto que você poderia ver o efeito muito melhor. Agora vamos falar sobre o outro recurso. Como você se lembra, eu mencionei que há outra seção aqui. Deixe-me mudar a cor do fundo para branco. Aqui dentro deste contêiner, eu vou arrastar e soltar um bloco div, e para este bloco div, eu vou criar uma classe. Vamos chamar de correção de imagem. Então eu vou definir sua largura para 100 por cento, modo que ele ocupa toda a largura de seu pai, que é o recipiente, e a altura vai ser 50 por cento assim. Eu vou para fundos, e a partir daqui eu vou adicionar uma imagem ou gradiente. Vou escolher uma imagem aqui. Lá vamos nós. Finalmente, vou mudar o tamanho para cobrir, e a posição para o centro. Vamos definir o azulejo para nenhum. Como você se lembra, eu disse que vamos falar sobre a opção fixa. Vamos ver por padrão, como ele funciona. Se eu visualizar esta página web, ele funciona assim como esperado. Mas e se eu quiser que este fundo seja corrigido, e criarmos um efeito de paralaxe aqui? Nesse caso, eu posso selecionar esta imagem e eu posso simplesmente ir para as configurações de imagem aqui, e em vez de definir a opção fixa para não corrigir, eu vou escolher fixo. Mais uma vez, eu posso reposicioná-lo como eu quiser, e então vamos pré-visualizar isso. Lá vamos nós. Você pode ver como esse efeito é legal? Quando definimos a imagem para corrigir, ela realmente cria uma nova camada atrás da janela do navegador, e essa nova camada é a nossa imagem de fundo que é corrigida, e podemos simplesmente rolar através da nossa página. Podemos fazer a mesma coisa com texto também. Deixe-me provar isso para você. Deixe-me remover esta imagem e eu vou selecionar este recipiente e adicionar um título aqui. Então eu vou aumentar o tamanho da fonte dramaticamente. Vamos aumentá-lo para 80 pixels, ou talvez 120 pixels que você possa ver o efeito claramente. Então eu vou aumentar a altura para 100 pixels ou talvez até mais, talvez 140 pixels. Eu vou para imagem e gradiente, e vamos adicionar uma imagem aqui. Eu vou escolher, digamos este, e vamos reposicionar isso. Não azulejo e cubra. Como posso fazer isso? Bem, primeiro, eu preciso definir a imagem como fixa, e então eu preciso ir para Clipping, e eu vou alterá-la para clipar fundo para texto. Vamos ver o que acontece. Você pode ver isso? Agora temos esse fundo fixo sentado atrás da nossa camada de texto. É muito legal. Você pode criar alguns efeitos legais com esta técnica. Agora vou falar sobre algo muito interessante. Até agora você aprende que você pode adicionar uma imagem de fundo aqui. Se você selecionar sua seção, basta adicionar uma imagem de fundo e tudo ficará perfeito. Mas e se você quiser realmente adicionar um vídeo ao seu plano de fundo? É possível? Claro que é. No entanto, não podemos fazê-lo em segundo plano, precisamos usar um componente que é chamado de vídeo de fundo. Se eu for para a seção Adicionar e rolar para baixo, você pode ver que, sob os componentes, eu tenho o componente Vídeo em segundo plano. Deixe-me arrastar e soltar e colocá-lo logo acima da minha primeira seção. Lá vamos nós. Este é apenas um elemento como qualquer outro elemento, e você pode simplesmente modificar tudo o que quiser. Posso dar-lhe uma altura específica como 100 VH. Então eu posso usar este botão Fazer upload de vídeo para fazer upload de um vídeo. Deixe-me ir em frente e rapidamente fazer upload de um vídeo. Você precisa ter em mente que seu vídeo deve ter menos de 30 megabytes. Como pode ver, nada acontece. Isso ocorre porque o componente de vídeo em segundo plano só funciona quando você visualiza sua página da Web, ele não funciona no designer. Vou pré-visualizar, e lá está. Consegues ver como é fixe? Mas espere, podemos adicionar algum conteúdo sobre este plano de fundo? Sim, podemos. Assim como qualquer outro elemento, eu posso apenas selecionar meu recipiente aqui, por exemplo, e trazê-lo e colocá-lo dentro deste vídeo de fundo. Mas como você pode ver, não está centrado. Posso selecionar meu vídeo de fundo e posso alterar a configuração de exibição de bloco para flex. Agora, vamos verificar. Você pode ver como é fácil trabalhar com esses componentes? Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 38. Bordas: Neste vídeo, vamos falar sobre fronteiras. Se você rolar para baixo aqui do lado direito, você pode ver que nós temos a seção de borda bem abaixo dos fundos. Usamos fronteiras quase o tempo todo. Tem propriedades diferentes que podemos personalizar, e vamos passar por todas elas. Vamos começar. Primeiro, vou mostrar-vos um exemplo muito comum. Vou selecionar este botão. Como você pode ver, este botão tem apenas uma cor de fundo. Mas e se eu quiser fazer isso arredondado? Bem, eu posso ir até a seção da fronteira e posso modificar a propriedade do raio aqui para torná-la arredondada. Se eu aumentar a quantidade do raio do canto, lá vamos nós. Temos um botão arredondado legal. Mas e se eu quiser modificar a quantidade de raio de canto de cada canto independentemente? Bem, podemos fazer isso também. Se eu clicar nesta opção que diz “Cantos individuais”, eu posso controlar a quantidade de raio de canto de cada canto separadamente. Uma coisa a mencionar é que você ainda pode usar todas as unidades que falamos antes, como pixel, porcentagem, EM, REM, CH, VW e VH. Aqui, vamos supor que eu queira apenas fazer o raio dos dois cantos superiores arredondado. Portanto, eu vou definir os cantos inferiores, raio de canto para zero. Vamos ver o que acontece. Lá vamos nós. Temos esse botão estranho agora. Deixe-me desfazer o processo. Isso é tudo sobre a quantidade do raio do canto. Mas e se você quiser criar um botão de contorno em vez de um botão contido? Agora temos um botão contido porque ele só tem uma cor de fundo. Ele não tem nenhuma fronteira. Se eu quiser fazer um botão de contorno, primeiro, eu posso adicionar uma classe de combinação aqui porque eu uso essa classe de botão em outro lugar para este botão de registro e este botão “Saiba mais”, e eu não vou alterar as propriedades padrão. Portanto, vou em frente e dar-lhe uma aula de combo. Deixe-me escrever para contactar-nos. Simplesmente assim. Então, se eu for para a cor, essa cor de fundo, eu posso escrever transparente, e nosso botão desapareceu, exceto que não foi. Ainda está lá, mas podemos ver isso. Não é visível porque apenas definimos a cor do plano de fundo como transparente. Se eu clicar nisso, você pode ver que a quantidade Alfa está definida como zero. É por isso que podemos ver o nosso elemento. A próxima coisa que vou fazer é obviamente mudar a cor do meu texto aqui para outra coisa. Vou mudar para preto. Então eu preciso adicionar algumas fronteiras. Se você vai para as fronteiras, aqui temos a seção de bordas bem abaixo do raio, podemos decidir se queremos criar bordas para todas as arestas ou apenas para bordas específicas. Se você quiser criar bordas para todas as quatro arestas, você precisa selecionar esta do meio, aquela que está no centro. Então você pode selecionar o seu estilo, eu vou selecionar sólido. Temos a nossa fronteira, mas vou aumentar a largura. Eu posso ir em frente e aumentá-lo manualmente, por exemplo, eu posso definir um valor aqui para três, mas se você quiser apenas olhar e você quer experimentar com quantidades diferentes, você pode manter pressionada a tecla “Opção” no seu teclado ou tecla “Alt”, e então você pode clicar e arrastar para aumentar e diminuir a largura aqui, exatamente assim. Acho que quatro pixels parece ótimo. Agora podemos modificar a cor de sua borda, bem como para qualquer cor que você quiser, e você pode modificar o estilo de suas bordas assim. Isso é tão simples. Mas vamos ver o que acontece se eu quiser apenas adicionar bordas a algumas bordas específicas. Eu vou remover o estilo e, em seguida, eu vou selecionar uma borda específica aqui, por exemplo, esquerda, e então eu vou definir o estilo como sólido. Lá vamos nós. Uma coisa a mencionar é que quando seu elemento não tem uma largura ou altura específica, quando você adiciona algumas bordas a isso, seu tamanho será alterado. No entanto, quando você define uma largura e altura específicas para o seu elemento, não importa se é um botão ou um bloco Div ou qualquer coisa, as dimensões do seu elemento não serão alteradas porque a borda será adicionada por dentro, e não a Lá fora. Deixe-me mostrar-lhe o que quero dizer com isso. Vou em frente e selecionar esta imagem, este bloco Div, e este bloco Div tem uma largura específica, não uma altura específica. Vou em frente e adicionar algumas fronteiras aqui. Vou selecionar o meio, o centro, já que vou adicionar bordas a todas as quatro arestas. Deixe-me selecionar o estilo sólido. Então eu vou aumentar a largura. Simplesmente assim. Como você pode ver, a dimensão real deste bloco Div não está mudando. A razão é que já tenho uma largura específica definida. Mas o que acontece se eu remover isso? Vamos ver o que acontece. Eu vou configurá-lo para auto, e então eu vou mover esta imagem para fora deste wrapper imagem por um segundo para mostrar como ele funciona. Então deixe-me aumentar e diminuir a largura. Como você pode ver agora, a dimensão real está mudando. Por quê? Porque não há largura e altura definidas. Se eu definir uma largura específica aqui, por exemplo, 350 pixels, e eu ajustar a largura, você pode ver que a borda é adicionada dentro. Deixe-me desfazer o processo. Vamos supor que você queira criar um círculo perfeito. Por exemplo, você deseja criar, digamos, uma página de perfil circular. Nesse caso, você pode usar raio também. Aqui está a nossa imagem. Para criar um círculo perfeito, você precisa dar alguns passos. Primeiro de tudo, você precisa selecionar sua imagem que está dentro de seu bloco Div. Então você precisa ter certeza de que sua largura e altura estão definidas para 100 por cento; eles ocupam toda a largura e altura de seu pai, que é este bloco Div imagem. Enquanto a imagem estiver selecionada, não o bloco Div, vá para o ajuste e altere-a de preenchimento para capa. Agora você pode selecionar seu bloco Div imagem e ir para as bordas, e a partir daqui, eu vou definir o raio para 50 por cento. Mas nada acontece porque precisamos fazer mais duas coisas. Deixe-me rolar para cima. Como você pode ver, nosso bloco Div tem uma largura específica, mas para criar um círculo perfeito, nossa largura e nossa altura devem ser as mesmas. Vou em frente e definir uma altura específica para isso, que é igual à largura. Vou escrever 350 pixels, ótimo. A última coisa que precisamos fazer é mudar o transbordamento. Eu vou para o transbordamento e então eu vou mudá-lo de visível para oculto. Lá vamos nós. Aqui está o nosso círculo perfeito. Mas por que funciona assim? Você se lembra quando falamos sobre estouro, quando criamos um cartão e dentro desse cartão havia um parágrafo que estava sobrepondo o cartão? Você se lembra disso? Este é exatamente o mesmo cenário. Quando está definido como visível, nosso círculo foi criado desde que definimos o raio para 50%, mas não podemos ver isso porque esta imagem dentro deste bloco Div está sobrepondo nossa forma. Portanto, precisamos definir o overflow como oculto para criar essa máscara. A última coisa que vou mencionar é que quando você trabalha com bordas, você tem controle sobre as propriedades de cada borda especificamente. Se você quiser selecionar a borda esquerda e alterar a cor, você pode fazer isso. Você pode definir outra cor para a borda superior, isso é totalmente com você. Você não está limitado de forma alguma. Tudo bem, pessoal. Isso é tudo por este vídeo. Espero que tenha gostado. Vejo-te no próximo. 39. Efeitos: Neste vídeo, vamos falar sobre a seção de efeitos. Se eu rolar para baixo aqui neste painel de tempo, podemos ver que na parte inferior temos a seção de efeitos. Há tantas opções diferentes aqui, e vamos falar sobre cada uma delas. Primeiro, vou em frente e selecionar uma dessas imagens. Deixe-me selecionar este bloco DIV, o bloco DIV de imagem, o primeiro, e agora eu posso realmente modificar diferentes opções aqui. Deixe-me começar com opacidade. A opacidade é tão simples porque nos permite ter transparência. Se eu diminuí-la, meu elemento será transparente. Se eu aumentá-lo, você pode ver que não há transparência. Quando você tem um elemento e seu elemento tem alguns filhos, você pode simplesmente selecionar seu elemento pai, neste caso, é este bloco DIV imagem, e apenas ajustar a opacidade aqui. Então temos sombras de caixa. Bem, como você pode adivinhar pelo seu nome, ele nos permite adicionar algumas sombras aos nossos elementos de caixa. Se eu apertar este botão mais, eu posso adicionar algumas sombras de caixa para este elemento particular, e aqui temos propriedades diferentes. Temos dois tipos diferentes de sombra, fora e dentro. Bem, se estiver definido para fora, a sombra aparecerá fora do limite deste elemento. Se eu apenas modificar a distância, você pode ver melhor, mas o tipo interno nos permite adicionar sombras internas. Posso modificar o ângulo aqui, assim. Posso controlar o grau, ou digamos a direção da minha sombra. Posso modificar a distância, quão perto esta sombra está do elemento. Posso modificar o blare, para determinar como a sombra está focada. Posso mudar o tamanho. Ele determina o quanto ele se espalha, assim, e a cor realmente nos permite controlar a cor de nossa sombra. Posso ajustá-lo para a cor que eu quiser. Na maioria das vezes, quando usamos sombras, queremos ter certeza de diminuir a opacidade para ter algumas sombras suaves. Simplesmente assim. Isto é tudo sobre sombras. Uma coisa que você deve lembrar é que você pode realmente adicionar várias sombras ao seu elemento. Se eu clicar neste botão mais uma vez, lá vamos nós, eu poderia adicionar outra sombra. Posso adicionar ainda mais sombras. Posso movê-las e escondê-las e exibi-las, e posso removê-las simplesmente. Agora vamos falar sobre transformações 2D e 3D. Bem, às vezes precisamos ter algumas interações simples, algumas transformações 2D e 3D, e nesse caso, precisamos usar essa opção. Nós também podemos usar as interações, que é mais avançado e vamos falar sobre isso mais tarde em detalhes. Mas por enquanto, deixe-me mostrar como funciona. Enquanto o meu elemento é selecionado, eu posso apertar este botão mais e temos diferentes tipos de transformação. Temos Move, Scale, Girar e Skew. Deixe-me começar com Move. Bem, o tipo Move nos permite mover nossos elementos e podemos controlar os eixos x, y e z assim. Se eu mudar o tipo para Escala, eu posso dimensionar este elemento assim. Se eu mudá-lo para Girar, eu posso girá-lo assim usando diferentes eixos, lá vamos nós, e se eu configurá-lo para Skew, vamos ver o que acontece. Dependendo de nossas necessidades, podemos ou não usar cada um desses tipos mas é bom saber que eles existem e as possibilidades são ilimitadas aqui. Agora vou te mostrar outra coisa. Deixe-me remover essas transformações 2D e 3D. Vou apenas criar uma nova camada de transformação e vou movê-la. Mas e se eu quiser mover meu elemento e dimensioná-lo ao mesmo tempo? Se eu for para a escala agora e eu voltar, você pode ver que tudo está perdido aqui. Todas as modificações que fiz aqui desapareceram. Isso porque não podemos usar todos os tipos ao mesmo tempo. Precisamos realmente mover nossos elementos e, em seguida, precisamos criar outra camada, exatamente assim. Agora, eu posso escalá-lo também. Você precisa ter isso em mente ao trabalhar com transformações 2D e 3D. Então temos transições. Se eu clicar neste botão mais, você pode ver que temos diferentes tipos de transições e não vamos falar sobre transições agora porque, primeiro, você precisa aprender sobre estados, que é o tópico do nosso próximo lição. Na próxima lição, vamos abordar as transições também. Deixe-me remover transições. Agora vou falar sobre filtros. Enquanto este elemento é selecionado, eu vou adicionar um filtro a este elemento, e aqui temos filtros diferentes. Temos borrão. Podemos tornar este elemento embaçado, assim mesmo. Temos filtros de ajuste de cor como brilho. Você pode controlar o brilho do seu elemento. Você pode modificar o contraste, a tonalidade. Temos saturação. Por exemplo, você pode diminuir ou aumentar a saturação do seu elemento. Temos tons de cinza. Se queremos imagens em preto e branco ou elementos em preto e branco, podemos usar este filtro e outros efeitos. Agora vamos passar para a última propriedade da seção de efeitos, que é o cursor. Bem, cada elemento por padrão tem um cursor específico. Por exemplo, quando eu adiciono um botão, deixe-me mostrar-lhe, quando eu vou em frente e adicionar um botão aqui e eu visualizo que, se eu passar o mouse sobre, você pode ver que o cursor mudou para este ponteiro e é esperado porque isso é clicável. A mesma coisa acontece se eu adicionar um bloco de links. Se eu apenas ir em frente e adicionar um bloco de link aqui, é claro, eu preciso adicionar algo dentro ou deixe-me apenas mudar sua cor, cor de fundo para algo que você pode ver, e também eu preciso especificar a largura e altura porque Caso contrário, é invisível. Deixe-me especificar a largura, 50 pixels, e a altura, 100 pixels, e agora vamos dar uma olhada. vez, temos um ponteiro. Por exemplo, o texto tem seu próprio cursor. Esses cursores são os cursores padrão do nosso navegador. Mas às vezes, para alguns propósitos específicos, talvez precisemos substituir essas propriedades. Por exemplo, se eu quiser mudar o cursor deste botão, eu posso selecioná-lo, e aqui, se eu abrir este menu, por padrão, ele está definido como automático. Na maioria das vezes, é melhor usar a opção auto porque desta forma o navegador determina qual cursor ele deve usar. No entanto, se você quiser substituir intencionalmente essas preferências, podemos fazer isso. Por exemplo, deixe-me mudá-lo para outra coisa. Vou escolher este gráfico e vamos ver se funciona. Sim, ele faz. É assim que o cursor funciona. Na maioria das vezes, não precisamos mudá-lo a menos que tenhamos que mudá-lo por um motivo específico. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado. Vejo você no próximo vídeo. 40. Estados: Ei, neste vídeo vamos falar sobre estados e transições. Bem, vamos começar com os estados. Cada elemento com o qual trabalhamos tem alguns estados padrão, como nenhum, pairar, pressionado, focado, etc. Dependendo do tipo de elementos, nossos estados podem mudar também, então deixe-me mostrar-lhe um exemplo. Se eu selecionar este elemento de botão e eu vou para a seção seletor, você pode ver que há este ícone de seta para baixo. Se eu clicar nisso, teremos acesso aos nossos estados. Não temos nenhum, pairar, pressionado, focado, visitado. Se eu selecionar hover, eu posso ir em frente e ajustar as propriedades do estado de foco para que quando o usuário passar o mouse sobre este elemento, as novas propriedades serão aplicadas a este elemento. Deixe-me ir em frente e modificar a cor do fundo e eu vou mudá-la para algo mais leve. Agora, para ver se funciona ou não, primeiro, preciso voltar para o não-estado. Eu vou para não-estado e se eu pairar sobre, lá vamos nós. Como você pode ver, assim que eu passar o mouse sobre este botão, sua cor muda. Quando eu altero as propriedades de qualquer um desses estados, esse indicador azul aparece indicando que existem algumas propriedades que modificamos para esse estado particular. Mas e que tal pressionado? Bem, desde que eu mudei as propriedades de pairar, o estado pressionado herdará das propriedades de pairar. Deixe-me provar isso para você. Se eu selecionar isso, lá vamos nós. Nós temos o nosso azul claro agora, no entanto, nós também podemos modificar isso. Vou mudar essa cor para algo mais escuro. Agora, se eu for para nenhum, se eu visualizar isso, e agora quando eu passar o mouse sobre, eu vou ter o azul claro e se eu pressionar, você pode ver que nós vamos ter o azul escuro. Isto é basicamente tudo sobre estados. Mas agora vou mostrar-vos outro exemplo. Se eu rolar para baixo aqui, eu tenho um campo de texto aqui. Para campos de texto, temos um estado adicional. Se eu selecioná-lo, e se eu for para abrir meus estados, você pode ver que nós temos este espaço reservado também. Se eu ir para o lugar titular, Eu posso personalizar a aparência eo estilo deste texto de espaço reservado, digite o seu e-mail, porque agora eu não posso modificar isso no estado nenhum, mas se eu ir para espaço reservado, Eu posso simplesmente modificar sua cor, por exemplo, para vermelho ou para qualquer outra coisa. Deixe-me redefinir isso por enquanto e eu vou mostrar outro estado deste campo de texto. O campo de texto também tem o estado focado, e este estado é muito útil para entradas de texto. Deixa-me mostrar-te como funciona. Se eu selecioná-lo e se eu for para, digamos, sombras de caixa, eu vou adicionar algumas sombras a este estado. Deixe-me mudar o ângulo, e também a distância, o borrão. Vou aumentar o borrão e também vou aumentar o tamanho e, finalmente, diminuir a opacidade. Agora, vamos ver o que acontece. Vou pré-visualizar, nada acontece. Mas assim que eu clicar aqui, você pode ver que o estado de foco aparece. Podemos usar estados para quase tudo, mesmo para imagens, para blocos div, como você pode ver aqui, temos estados diferentes. Eles são tão úteis para essas interações sutis. Mas se eu passar o mouse sobre este botão, você pode ver que nós não temos uma transição suave aqui. Como podemos consertar isso? Bem, precisamos usar a seção de transição aqui, aquela que não falamos na lição anterior. Mas agora, vou mostrar-vos como funciona. Quando modificamos as propriedades de diferentes estados ou adicionamos alguns efeitos aos nossos elementos, podemos animar essas alterações usando transições. Neste momento, temos três estados diferentes para este botão, nenhum, pairar, e pressionado. Sempre que quisermos adicionar a transição, precisamos ir para o estado nenhum, é muito importante caso contrário, não vai funcionar. Enquanto estamos no não-estado, como você pode ver nada aparece aqui indicando que estamos no estado nenhum. Vou adicionar uma transição e aqui eu preciso especificar o tipo de transição. Mudei a cor do fundo. Vou em frente e procurar a cor de fundo. Como você pode ver, podemos animar todas as propriedades, até mesmo margem, e preenchimento, topografia flexível, bordas, qualquer coisa. Eu vou selecionar a cor de fundo e então nós temos a duração, por padrão é definido para 200 milissegundos e o método de atenuação, assim como, vamos falar sobre o editor de atenuação e métodos de flexibilização mais tarde porque é avanço por agora . Mais tarde, vamos mergulhar nele, por enquanto, não vamos tocar nisso. Vamos ver como funciona. Vou pré-visualizar, e lá vamos nós. Agora temos essa transição suave. A transição aplica-se a todos os estados. Se eu pressionar, teremos uma transição suave também. Vamos em frente e fazer a mesma coisa para nossa entrada de texto. Eu vou selecionar este campo de texto e eu vou ter certeza de que eu estou no estado nenhum e, em seguida, vamos em frente e adicionar as transições. Daqui, vou mudar o tipo de opacidade para caixa-sombra. Lá vamos nós. Vou mudar a duração desta vez para ter uma transição mais dramática. Digamos que vou aumentar para 500 milissegundos ou meio segundo. Vamos pré-visualizar isso. Se eu clicar aqui, lá vamos nós. Agora ele está focado e você precisa entender que as transições funcionam em ambos os sentidos, então se eu clicar em outro lugar para ir para o estado nenhum, você pode ver que ele também será animado. Vamos ver. Você viu isso? É basicamente assim que as transições e estados funcionam. Se você quiser adicionar algumas interações simples aos nossos elementos, como o que acabei de mostrar, sempre podemos usar transições e também podemos usar transformações 2D e 3D. Mas para interações mais avançadas, vamos usar o painel de interações e falaremos sobre isso mais tarde. Mas antes de encerrarmos este vídeo, vou mostrar-vos outro exemplo. Vou selecionar esta imagem, este bloco div de imagem, e deixar-me ir para outro estado. Eu vou passar o mouse e eu vou adicionar uma transformação 2D e 3D e deixe-me dimensioná-lo. Eu vou escalá-lo ligeiramente, e então eu vou voltar para nenhum, e finalmente, deixe-me adicionar uma transição a ele e eu vou animar a transformação. Vamos pré-visualizar isso. Lá vamos nós. Você viu isso? Mas como você pode ver, não funciona para outras imagens. Isso porque, para esses elementos, eu adicionei uma classe de combinação. Esta transição e todas essas interações só funcionam para esses bloco Div particular. Se eu quiser aplicar a todos esses blocos Div, o que eu vou fazer é remover essas classes combo. Agora, se eu passar o mouse, e eu adicionar a transição de escala já que já a adicionamos, ela ainda estará lá, então eu vou ir em frente e modificar isso. Deixe-me ir para nenhum e eu vou adicionar as transições aqui para transformar. Finalmente, deixe-me adicionar minha classe de combinação novamente. Vamos ver se funciona ou não e eu vou passar o mouse sobre este elemento, ele funciona, este elemento, ele funciona neste elemento. É assim que os estados e as transições funcionam. Muito bem pessoal, espero que tenham gostado deste vídeo. Vejo-te no próximo. 41. Noções básicas de ponto: Quando queremos projetar uma página da Web de forma responsável, precisamos usar pontos de interrupção. O que é um ponto de interrupção? Bem, um ponto de interrupção não é nada além de um tamanho específico que aplica algumas mudanças de estilo à largura de telas específicas. Você precisa lembrar que definimos nossas mudanças de estilo para diferentes tamanhos de tela apenas com base na largura do navegador ou na largura do próprio dispositivo, não importa se é um iPad, um iPhone ou qualquer outro dispositivo. Por padrão, o Webflow tem quatro pontos de interrupção predefinidos. Se você der uma olhada na barra superior aqui, você pode ver que temos a área de trabalho, que é o nosso ponto base, então temos o tablet, então temos paisagem móvel, e, finalmente, retrato móvel. Um princípio importante que você deve aprender sobre pontos de interrupção é este, as mudanças que fazemos em nossos estilos serão reduzidas em cascata para dispositivos menores e em cascata para dispositivos maiores. Este é o principal princípio de páginas web responsivas. Se você aprender corretamente, você pode criar sites responsivos facilmente. Vamos começar com o ponto de interrupção da área de trabalho. Se eu passar o mouse sobre este ícone, eu vou obter as informações desse ponto de interrupção em particular, e isso é chamado de nosso ponto de interrupção base. O próximo é o tablet. Como você pode ver, vamos obter o intervalo de pixels. Diz 991 pixels e para baixo, então temos paisagem móvel. Diz 767 pixels e para baixo, e finalmente temos um retrato móvel. Se você quiser adicionar pontos de interrupção maiores ao seu projeto, você pode fazer isso. Se você clicar neste ícone aqui, você pode começar a adicionar pontos de interrupção maiores. No entanto, tenha em mente que no momento, depois de adicionar um grande ponto de interrupção ao seu projeto, você não poderá removê-lo. Antes de adicionar pontos de interrupção maiores, deixe-me mostrar como os pontos de interrupção funcionam. Vou começar selecionando este título. Este título parece ótimo. O tamanho da fonte parece bom na largura desta tela, mas e se eu for para o tablet? No tablet, parece ótimo também. E quanto à paisagem móvel? Bem, aqui parece bom, mas eu posso torná-lo menor também. Enquanto isso estiver selecionado, eu vou para a seção de tipografia aqui no painel de estilo, e eu posso substituir essas propriedades. Como você pode ver, todas essas propriedades têm essa cor âmbar. Isso significa que o valor vem do nosso ponto de interrupção base. Assim que eu substituir isso, você verá que fica azul. Deixe-me modificar o tamanho da fonte para 40 pixels. Lá vamos nós, fica azul. Agora essa propriedade específica vem desses pontos de interrupção, e todas as alterações que eu fizer nesse ponto de interrupção em particular serão reduzidas em cascata para o retrato móvel, mas isso não afeta pontos de interrupção maiores aqui. Deixe-me provar isso para você. Se eu for para a parte móvel agora, você pode ver que o tamanho da fonte está definido para 40 pixels e vem de nossa paisagem móvel. No entanto, se eu for para o tablet, você pode ver que o tamanho da fonte ainda é de 60 pixels. É assim que os pontos de interrupção funcionam, as alterações em cascata para baixo e para cima. Se você aprender este princípio simples, você já sabe como projetar páginas web responsivas. Uma coisa importante sobre pontos de interrupção é que ele só funciona quando modificamos os estilos no painel de estilos. Se tentarmos modificar, por exemplo, a ordem desses elementos no navegador, isso afetará todos os outros pontos de interrupção também. Deixe-me ir para o retrato móvel, e eu vou mudar a ordem desses elementos no navegador assim. Agora, se eu ir para a paisagem móvel, a ordem foi alterada, para tablet o mesmo, ponto de interrupção da área de trabalho, o mesmo. Você precisa ter em mente que quando queremos modificar a ordem de nossos elementos, precisamos fazer isso usando flexbox no painel de estilo e todas as outras propriedades aqui. Você pode usar uma grade também, e você pode modificar os filhos de sua grade, você pode modificar a ordem de seus filhos flexbox, como discutimos anteriormente, mas você pode alterar a ordem de seus elementos no navegador ou na tela aqui porque as alterações se aplicam a todos os pontos de interrupção. Vamos supor que eu queira mudar a cor deste texto. Eu posso fazer isso também. No entanto, se eu mudá-lo aqui no ponto de interrupção da base, ele irá em cascata para baixo e para cima. Portanto, ele afetará todos os outros pontos de interrupção também. Deixe-me rolar até aqui e vou mudar a cor para outra coisa. Por exemplo, algo mais leve. Vamos ver o que acontece em outros dispositivos. Lá vamos nós. As alterações se aplicam a este ponto de interrupção , a este e a este. No entanto, se eu substituir a cor deste texto aqui ou em qualquer outro ponto de interrupção, deixe-me mostrar o que acontece se eu substituí-lo aqui, por exemplo, para vermelho. Se eu for para o ponto de interrupção da área de trabalho e tentar mudar essa cor para preto, isso não afetará mais o ponto de interrupção do retrato móvel. Por quê? Porque já substituímos essa propriedade para esse ponto de interrupção em particular. Lá vamos nós. Isso não mudou. Geralmente, é assim que os pontos de interrupção funcionam, a menos que haja uma propriedade específica definida para esse ponto de interrupção específico, as alterações sempre caem em cascata. Se eu remover este estilo aqui, se eu manter pressionada a tecla Option ou a tecla Alt no meu teclado e clicar aqui, clique neste texto colorido, agora o estilo vem do ponto de interrupção da área de trabalho. Deixe-me ir para a área de trabalho e eu vou te mostrar outras coisas também. Deixe-me ir para o tablet, e como você pode ver, essas imagens parecem ótimas, embora tenhamos um tamanho de tela estreito. Mas e se eu for para a paisagem móvel? Bem, eles estão muito encolhidos, então eu vou mudar isso. Podemos selecionar o nosso invólucro de imagem, que é a flexbox, e podemos modificar as propriedades da nossa flexbox. Em vez de definir a direção para horizontal, vou mudá-la para vertical. Ótima. Então eu vou alinhá-los ao centro. Finalmente, vou selecionar os filhos desta imagem wrapper, e aqui a largura é definida como 31 por cento porque vem do ponto de interrupção da área de trabalho. Vou mudar a largura para 100 por cento, e lembre-se de que qualquer alteração que eu fizer neste ponto de interrupção irá em cascata para retrato móvel também. Agora vou adicionar alguma margem inferior a estas imagens. Acho que talvez 10 pixels seria bom. Vamos ver o que acontece se eu for ao retrato móvel. Lá vamos nós. Agora eles estão ótimos. Mas se eu for ao tablet, está intacto. Se eu for para a área de trabalho, você pode ver que ainda temos a direção horizontal. Se eu selecionar um desses filhos, a largura é definida como 31 por cento e não foi alterada. Usando pontos de interrupção, podemos criar qualquer tipo de páginas responsivas facilmente e convenientemente. No entanto, há alguns pontos que devo mencionar. Vamos supor que eu queira mudar essa imagem em outro ponto de interrupção. Vamos ver o que acontece. Se eu selecionar essa imagem e se eu mudá-la para outra coisa, por exemplo, essa alteração se aplica a todos os pontos de interrupção. Se eu for ao desktop, lá vamos nós. É assim que as imagens funcionam. Você não está mudando o estilo. Se eu usar a imagem de fundo aqui no painel de estilos, podemos configurá-la para cada ponto de interrupção específico, mas com imagens, não é possível. Você precisa manter isso em mente. Um outro ponto importante é que se você modificar o texto em algum lugar mesmo no retrato móvel, ele afetará todos os outros pontos de interrupção porque, novamente, não estamos alterando os estilos. Se eu remover este desenho aqui, vamos ver o que acontece. Lá vamos nós. Ele foi removido de todos os pontos de interrupção. Então você precisa estar ciente dessas limitações. Mas e se você quiser remover alguns elementos? Bem, deixa-me mostrar-te como funciona. Se eu decidir remover este parágrafo aqui, e eu selecioná-lo, e eu apertar Excluir ou posso clicar com o botão direito do mouse sobre isso e simplesmente excluí-lo, ele será removido do próprio documento. Isso afetará todos os outros pontos de interrupção assim porque não existe mais em nosso código. No entanto, deixe-me desfazer a operação, se eu decidir remover esses elementos deste ponto de interrupção específico, eu posso selecioná-lo. Posso ir para as configurações de exibição aqui, e posso definir a configuração de exibição como Nenhum. Agora está escondido, e está escondido apenas no retrato móvel. Por quê? Porque nós modificamos as propriedades CSS aqui. Deixe-me ir à área de trabalho aqui. Você pode ver que ele ainda está lá. Eu vou para tablet e paisagem móvel, ele ainda está lá. Este é um bom truque para esconder elementos. No entanto, você precisa ter em mente que, embora você tenha escondido o elemento aqui, ele ainda está em seu código, mas não está visível porque nós apenas definimos sua configuração de exibição como nenhuma, mas isso não significa que ele não existe. Se eu quiser redefinir quaisquer propriedades aqui, como eu mencionei antes, eu vou manter pressionada a tecla Alt ou tecla Option no meu teclado e eu vou clicar sobre isso. Alternativamente, você pode clicar neste rótulo azul e você pode clicar em Redefinir assim. Mas e quanto a pontos de interrupção maiores? Bem, pontos de interrupção maiores são opcionais. É por isso que eles não aparecem no topo aqui por padrão. Mas às vezes faz sentido adicionar pontos de interrupção maiores e especificar alguns, digamos, estilos específicos para esses pontos de interrupção. Vou mostrar-te como funciona. Vou adicionar este ponto de interrupção de 1280 pixels. Ele diz para criar este ponto de interrupção e para cima, você não pode remover o ponto de interrupção do projeto uma vez que ele é criado. Crie um. Vou criar o próximo ponto de interrupção também. Eu vou criá-lo, e finalmente o ponto de quebra de 1920 pixel e Criar. Legal. Agora temos todos os sete pontos de interrupção disponíveis, e assim como dispositivos menores, as alterações que fizermos no ponto de interrupção base serão feitas em cascata para dispositivos maiores. Se eu for para este intervalo e se eu decidir modificar a largura máxima do meu recipiente aqui, como você pode ver, a largura máxima é definida como 1100. Se eu decidir aumentá-lo para, digamos, 1200, assim, essa mudança se aplica a todos os dispositivos maiores, mas não desce em cascata. Deixe-me mostrar-lhe se eu for para este ponto de interrupção de 1440 pixels, você pode ver que a largura máxima está definida como 1200. Se eu for para o ponto de quebra de 1920 pixels, lá vamos nós. Novamente, 1200. Para este ponto de interrupção, posso modificar isso. Posso substituir esta propriedade, por exemplo, para 1700, parece muito melhor agora, no entanto, esta alteração não se aplica a pontos de interrupção menores. Isso foi muito para processar. Vamos recapitular. Primeiro, você precisa entender o principal princípio da responsividade e pontos de interrupção, também conhecidos como consultas de mídia, a fim de fazer um design responsivo. Este princípio diz que as alterações que aplicamos ao nosso ponto de interrupção base serão reduzidas em cascata para dispositivos menores e em cascata para dispositivos maiores. Esta é a principal coisa que você precisa aprender. Então você precisa entender que os pontos de interrupção apenas respondem às mudanças de estilo. Então, o que quer que você mude no painel de estilo no lado direito, irá respeitar os pontos de interrupção. Mas se você alterar algo no navegador ou se você alterar a ordem de seus elementos no navegador ou na tela, isso não afetará diferentes pontos de interrupção. O outro ponto era que, se você substituir suas imagens usando um elemento de imagem, ele afetará todos os pontos de interrupção, e por último, mas não menos importante, quando você modificar suas camadas de texto, se você alterar seu texto, ele também afetará todos os seus pontos de interrupção. Tudo bem, pessoal, isso é tudo sobre pontos de quebra e capacidade de resposta. Claro, falaremos sobre a capacidade de resposta em detalhes uma vez que começarmos a criar nossos projetos. Espero que tenha gostado deste vídeo e te vejo no próximo. 42. Configurando seu projeto: Bem-vindos de volta a outra seção deste curso. Nesta seção, vamos começar a construir nosso projeto de trabalho real juntos. Estou tão animada. Primeiro, vou mostrar a vocês o que vamos construir, e depois vou explicar o processo. Finalmente, vamos configurar nosso projeto no Webflow. Sem mais delongas, vamos começar. Este é o projeto que vamos construir nesta seção. Na verdade, é um site para uma agência de design fictício chamada Circle. Juntos, você e eu vamos construir este site do zero. Nós não vamos falar sobre o processo de interface de usuário porque este não é o objetivo principal deste curso. O objetivo principal deste curso é ensiná-lo a converter um design de interface de usuário em um site totalmente funcional. Portanto, não vamos projetar este projeto do zero. Eu preparei o projeto e vou mostrar-lhe como você pode ter acesso a este projeto. Primeiro de tudo, deixe-me mostrar-lhe como o design parece. Neste projeto, vamos construir três páginas diferentes: a página inicial, a página do projeto e a página de contato conosco. Vamos construir duas páginas estáticas e uma página dinâmica. Claro, vamos falar sobre a diferença entre páginas estáticas e páginas dinâmicas. Mas por enquanto, deixe-me mostrar como é a página inicial. Vou rolar para baixo assim. Como você pode ver, temos seções diferentes. Temos seção de depoimentos, temos serviços, temos uma seção de chamada à ação e, finalmente, um rodapé. Eu vou diminuir o zoom e eu vou mostrar outras páginas também. Aqui temos a página do projeto. Como você pode ver, há algumas informações sobre os projetos mais recentes que esta empresa fez recentemente, e também a seção de outros projetos e, novamente, a chamada à ação. Finalmente, há esta página entre em contato conosco que precisaremos construir juntos. Estas são as páginas principais deste projeto, uma página inicial ou digamos a página inicial que mostra os projetos recentes desta empresa chamada Circle, esta empresa fictícia, digamos, e também exibe seus serviços. Por exemplo, aqui temos design de interface de usuário, design de experiência do usuário, desenvolvimento de aplicativos e uma chamada à ação com um formulário. Primeiro, vamos construir esse design dentro do Webflow, e então vamos torná-lo responsivo e, finalmente, vamos trabalhar com interações e animações para fazer o site parecer muito melhor e melhorar o usuário experiência. Você aprenderá a criar interações avançadas dentro do Webflow e também aprenderá a criar animações avançadas. Este é o ponto principal que eu precisava mencionar. aqui, como você pode ver, temos um sistema de design também. Aqui temos os estilos de cores e os estilos de texto no lado direito. Eu já os preparei. Vou mostrar-lhe como você pode ter acesso a este projeto agora. O software que estou usando chama-se Figma. Você pode ou não estar familiarizado com isso, mas se não estiver, tudo bem porque não vamos trabalhar com Figma neste projeto. Nós só precisamos Figma para ver como este projeto está estruturado e talvez nós só precisamos verificar algumas propriedades como o tamanho da fonte ou as cores. Nada complicado. Se você não trabalhou com Figma antes, não se preocupe, você não vai enfrentar nenhum problema. Primeiro de tudo, eu vou pedir que você vá em frente e crie uma conta gratuita do Figma se você ainda não tiver nenhuma. Se você vai para figma.com, você pode clicar neste botão de inscrição no canto superior direito e aqui você pode digitar seu endereço de e-mail e escolher uma senha para sua conta, e clicar no botão criar conta. Assim que você estiver conectado, você verá este painel. Você pode estar dentro de uma aba recente ou a guia rascunho, isso é totalmente bom. O que você vai fazer é carregar o projeto que eu preparei para você. Se você está dentro de um rascunho ou recente, você pode simplesmente ir para este novo botão no lado direito e você pode clicar sobre isso e você pode clicar no botão de importação. Vou mostrar-lhe aqui também. Eu estou dentro de uma equipe e eu vou apertar este novo botão e eu vou clicar em importar, e então eu posso importar o projeto do meu computador. Alternativamente, você pode simplesmente arrastar e soltar o arquivo que eu preparei para você aqui. Primeiro, você precisa baixar o projeto Figma que eu preparei para você a partir da seção de recursos ou da palestra de ativos. Uma vez que você tenha baixado esse arquivo zip, você precisa descompactar isso e uma vez que você descompacte o arquivo, você receberá este arquivo webflowproject.fig. A extensão é.fig e você pode simplesmente arrastá-la e soltá-la dentro do painel do seu Figma, exatamente assim. Uma vez importado, você pode clicar duas vezes sobre ele e está pronto. Você terá acesso ao projeto com todos os detalhes que você precisa. Isso é basicamente o que você precisa fazer dentro da Figma. Nada mais. Primeiro, crie uma conta. Em segundo lugar, baixe o projeto Figma que eu preparei para você, e terceiro, importe esse projeto para sua conta Figma. Isso é tudo. Uma vez que você tenha feito essas três etapas, é hora de ir em frente e configurar o projeto no Webflow. Vou ao painel do meu Webflow. Aqui, eu vou apertar este novo botão de projeto, e então eu vou escolher este site em branco selecione, e aqui, vamos chamá-lo de Circle. Você pode nomeá-lo o que quiser, isso não importa e vamos apertar o botão criar projeto. Perfeito. Agora estamos dentro do designer e temos uma tela vazia. Para este projeto, precisamos trabalhar com alguns ativos. Se eu for para o meu projeto Figma aqui, como você pode ver, nós temos imagens diferentes, nós temos logotipos diferentes. Além disso, temos algumas imagens para nossos projetos e esses emojis, e também alguns ícones. Precisamos exportar esses ativos e depois importá-los para o projeto do nosso Webflow. Mas para economizar seu tempo, eu já os exportei e preparei uma pasta de ativos para você. Você pode baixá-lo a partir da seção de recursos ou da palestra de ativos. Mais tarde, falaremos sobre como você deve exportar suas imagens, como você deve otimizar suas imagens para desenvolvimento web. Mas, por enquanto, você só precisa ter acesso a esses ativos e aprender como usar esses ativos para criar um projeto real. Não vamos mergulhar em detalhes sobre otimização de imagem nesta fase do curso, mas depois falaremos sobre isso. Vamos ao Webflow. Então, se eu for para a seção de ativos aqui, posso deixar meus arquivos aqui. Uma vez que você baixou a pasta de ativos e descompacte isso, você pode simplesmente arrastar e soltar esses arquivos aqui, deixe-me mostrar como ele funciona. Dentro da pasta de ativos, você tem diferentes pastas como seção de heróis, logotipos, boletim informativo, seção de projeto , seção de serviços e seção de depoimento. Vamos abrir cada um deles e vamos importá-los um por um. Vou começar com a seção de heróis. Lá vamos nós. Vou selecionar todos eles e arrastá-los e soltá-los. Simplesmente assim. Vou repetir o mesmo processo para todas essas pastas. Vou avançar com este processo para poupar tempo. Está feito. Todas as nossas imagens e ícones foram carregados com sucesso. O que mais precisamos fazer para montar nosso projeto? Bem, neste projeto vamos usar fontes específicas. Se eu for para o meu projeto Figma aqui, e se eu selecionar uma dessas camadas de texto, eu vou clicar duas vezes sobre este título, este título, e eu posso mostrar a vocês quais fontes eu usei para isso. Chama-se roboto. Esta é uma fonte do Google e é gratuita para usar, e vamos precisar disso também. Como você se lembra, para trabalhar com essas fontes, precisamos adicionar a fonte dentro de nossas configurações do projeto. Se eu for para Webflow e se eu for para as configurações do projeto, eu posso ir para a guia fontes e aqui eu vou escolher fonte da lista. Vou procurar o roboto. Lá vamos nós. Vou escolher o roboto. Aqui eu vou escolher diferentes variantes desta fonte, pesos diferentes para esta fonte. Regular deve ser selecionado. Vou selecionar 300, 500 e 700. Não vamos precisar de 900. Vai ser muito ousado. Estas são as fontes necessárias que vamos precisar para esses projetos. Mais tarde, se precisarmos de mais variantes, podemos sempre vir a esta seção e apenas adicionar mais variantes. Vou apertar o botão de adicionar fontes e isso é tudo. Vou falar com o designer. Perfeito. Estamos prontos para começar a construir nosso projeto porque nossos ativos são importados e nossas fontes foram adicionadas a este projeto também. Tudo bem, pessoal, isso é tudo por este vídeo. Nós configuramos com sucesso nosso projeto e vamos começar a construir nosso projeto no próximo vídeo. Vejo você então. 43. Barra de navegação: Neste vídeo, vamos começar a construir nossa barra de navegação. Primeiro deixe-me ir para o meu projeto Figma aqui. Como você pode ver bem no topo, temos uma barra de navegação que inclui um logotipo à esquerda, depois três menus diferentes, bem no meio e, finalmente, um botão Fale Conosco no lado direito. Deve ser colocado bem no topo. Como você pode ver, esta página inicial tem uma cor de fundo que não é branco. Para este fundo, usei uma cor chamada luz neutra. Se eu for para meus estilos de cor, como você pode ver, eu tenho essa cor neutra e eu a usei para o meu fundo. Esta é a mesma cor que usamos para todas as páginas diferentes. Portanto, todas as nossas páginas em nosso projeto devem ter a mesma cor de fundo. A fim de tornar nossas vidas muito mais fáceis, nós vamos criar algumas amostras globais para nossas cores a fim de reutilizá-las novamente e novamente e mais tarde, se você decidir fazer algumas mudanças, você não precisa ir em frente e alterar manualmente a cor de todos os seus elementos, um por um. Você pode apenas fazer a alteração uma vez e a alteração será aplicada a todos os elementos usando essa amostra global específica. Já falamos sobre amostras globais. Vamos agora criar alguns para o nosso projeto. Vamos começar. Primeiro, vou para o meu sistema de design aqui. Eu não vou criar amostras globais para todas essas cores porque algumas dessas cores não são usadas neste projeto. Eu só os criei para ter um bom esquema de cores e, mais tarde, se você precisar adicionar algumas cores ao seu projeto, ou se você precisar mudar algumas cores, você poderia apenas ter algumas cores predefinidas aqui, mas nós não vamos para usar todos eles. Se eu for para Webflow e aqui, eu vou selecionar o corpo, e então, eu vou para o seletor. Aqui, se eu apenas clicar uma vez, você pode ver que vamos obter esta tag HTML, que é rosa. Diz “Corpo todas as páginas”. Essas tags HTML são tão úteis porque podemos definir alguns estilos padrão para diferentes tags. Por exemplo, em corpo ou páginas, ou todos os H1s, ou todos os H3s para nossos títulos ou para nossos parágrafos. Falaremos sobre eles mais tarde. Mas, por enquanto, vou selecionar Body todas as páginas. Uma vez que eu selecionar este corpo todas as páginas, eu posso definir algum estilo padrão para a tag body. Aqui eu vou em frente e mudar a cor, e eu vou precisar de um código de cor. Se eu for para o meu projeto Figma aqui, como você pode ver, eu escrevi o código de cores aqui. Você pode apenas clicar duas vezes sobre ele e, em seguida, você pode copiar e colar Comando C ou Controle C. Então você pode ir para o seu Webflow, e aqui, você pode simplesmente colar o comando V ou Controle V. Se eu apertar Enter, lá vamos nós. A cor foi alterada. Mas como mencionei antes, vou criar amostras diferentes, amostras globais diferentes para este projeto. Vou apertar este botão “Plus”, e aqui, vou escrever Neutral/Light. Então eu vou criá-lo. Legal. Agora, vou precisar de mais cores. Vamos em frente e criar todas as amostras aqui que vamos precisar para este projeto. Eu vou ir em frente e copiar este código de cor, o mesmo ao lado deste Neutral/Luz. Eu vou copiá-lo e eu vou criar uma nova amostra que nós mudamos o código de cor para o novo, e eu vou chamá-lo de Neutral/Médio, exatamente assim. Então eu vou criar a próxima amostra. Vamos para Figma e eu vou copiar este código de cor escura. Deixe-me criar uma amostra. Vou mudar o código de cor e vamos chamá-lo de Neutral/Escuro. Precisamos de mais três cores. Precisamos da nossa cor primária, que é este azul. Vou copiar o código de cor. Vou criar uma nova amostra, colá-la aqui. Aqui, vou chamá-lo de Primário/Padrão. Criar. Agora, eu vou ir em frente e copiar este código de cor para esta cor laranja. Vou copiá-lo e vamos criar uma nova amostra, colar o código de cor aqui, e vamos nomeá-lo secundário. Carregue em “Criar”. Finalmente, eu vou ir em frente e copiar este código de cor, esta cor azul claro, e deixe-me criar uma amostra. Vou colá-lo aqui, e vamos chamá-lo de azul claro neutro. Ótima. Nossas amostras globais estão prontas, mas certifique-se de usar sua cor Neutral/Light para sua pilha de todas as páginas Corpo. Neste momento, criamos estas amostras dentro da seção Tipografia, é por isso que nosso histórico não mudou. Isso é totalmente bom porque podemos usar essas amostras na seção de cores de fundos também. Se eu passar para a cor de Fundos, posso selecionar essa cor e mudá-la para Neutral/Luz. Agora, minha cor de fundos foi alterada e eu posso redefinir essa cor de tipografia também. Posso manter pressionada a tecla Option ou a tecla Alt no meu teclado e posso clicar nela. Lá vamos nós. A cor da tipografia foi redefinida e estamos prontos. Agora que nosso plano de fundo está pronto e nossas cores também estão prontas, podemos começar a criar nossa barra de navegação. Vamos ver o que temos aqui. Como você pode ver, eu criei diferentes seções dentro deste projeto. Deixa-me mostrar-te como é estruturado. Bem no topo temos navbar. Esta é uma seção, e se eu abri-la, dentro, nós temos um contêiner, e se eu abri-lo dentro, nós temos elementos diferentes. Temos os menus, temos o botão, e temos o logotipo. Isso é tão simples. Então temos a seção Herói, a seção Cliente, e assim por diante. Todas essas seções têm um recipiente, como você pode ver, aqui temos o recipiente e dentro, temos elementos diferentes. Dentro desta seção, temos um recipiente e dentro, temos diferentes elementos. Vamos estruturar nosso projeto dentro do Webflow da mesma maneira. Agora, vamos começar a criar nossa barra de navegação. Para criar uma barra de navegação, precisamos ir para a seção Adicionar Elemento. Vou rolar para baixo para encontrar um componente de barra de navegação. Vou arrastá-lo e soltá-lo aqui. Lá vamos nós. Temos a maioria dos elementos de que precisaremos para este projeto, mas precisamos de algumas mudanças a serem feitas. Aqui, dentro desta barra de navegação, como você pode ver, temos um contêiner como em nosso design. Aqui dentro desta barra de navegação, temos um contêiner. Mas este recipiente por padrão, tem uma largura máxima específica, e esta não é a largura máxima que vamos usar neste projeto. Por padrão, a largura máxima deste contêiner é definida como 940 pixels. Mas para este projeto, a largura máxima do nosso contêiner será 1.100 pixels. Por quê? Porque se eu passar para o meu design aqui, e se eu, por exemplo, selecionar esses projetos recentes, dentro, se eu selecionar o contêiner no lado direito no Inspetor, você pode ver que a largura é 1.100 pixels. É por isso que precisamos criar nosso próprio contêiner e é muito fácil. Só precisamos de um bloco div com algumas propriedades específicas de tamanho. Certo, então primeiro, vamos criar nosso próprio contêiner. Eu vou para a seção adicionar, eu vou arrastar e soltar um bloco div aqui dentro desta barra de navegação e vamos dar-lhe uma classe. Vou chamar-lhe contentor. Nós vamos usar essa classe para outros contêineres também. Aqui para a largura máxima, eu vou configurá-lo para 1100 pixels e, em seguida, precisamos centralizar este recipiente. Lembra-se como pudemos fazer isso? Sim, você está certo. Podemos clicar neste pequeno ícone aqui e lá vamos nós, está centrado. Agora acabamos de criar um contêiner que tem uma largura máxima de 1100 pixels e está centralizado porque clicamos neste botão, e as margens esquerda e direita são definidas como auto. É por isso que está centrado. Já discutimos isso. O que mais precisamos fazer agora? Porque agora, aqui temos dois contêineres. Se eu abrir este contêiner principal, eu posso simplesmente arrastar todos os elementos e soltá-los dentro do nosso novo contêiner porque nós não precisamos mais deste contêiner. Deixe-me começar com este link logotipo, link marca e eu vou arrastá-lo e certifique-se que você soltá-lo dentro de seu novo recipiente, ele deve ser aninhado dentro. Então eu vou selecionar o menu de navegação, eu vou fazer a mesma coisa e finalmente este botão Menu, e vamos colocá-lo aqui, legal. Agora podemos selecionar este contêiner, o contêiner principal, e removê-lo. Muito bem, o nosso contentor está pronto. Uma vez que este recipiente vai ser usado para esta barra de navegação, eu vou dar-lhe uma classe de combinação. Por quê? Porque mais tarde vamos usar este nome de classe de contêiner para outros contêineres também. Aqui eu vou criar uma nova classe de combinação e eu vou chamá-la de navbar. Agora vamos definir a configuração de exibição para flexbox em vez de bloco, ok, apenas assim. Aqui, como você pode ver dentro, temos diferentes elementos. Temos o bloco link da marca, temos este bloco div menu nav, e finalmente temos este botão de menu, que não é visível porque este botão de menu aparece quando vamos para o tablet, como você pode ver aqui, ou móvel. Já falamos sobre isso. O que precisamos fazer agora? Primeiro, vou selecionar este contêiner e vou mudar algumas de suas propriedades aqui. Vou começar com uma linha, vou alinhá-la ao centro, e também vou mudar a justificativa para o espaço entre. Por quê? Porque se você for para o nosso projeto de design aqui, você pode ver que nosso logotipo e nosso botão estão tocando as bordas deste recipiente. Então é por isso que eu preciso mudar a justificativa deste recipiente para o espaço entre. Se você se lembrar, quando nós configurá-lo para o espaço entre, nosso primeiro elemento toca o lado esquerdo deste recipiente e nosso último elemento toca o lado direito deste recipiente. Isso é exatamente o que queremos, mas aqui precisamos de outra coisa, precisamos de um botão também. Vamos criar um. Vou arrastar e soltar um botão dentro deste contentor. Lá vamos nós, temos nosso botão e sua colocação parece ótimo porque nosso botão toca o lado direito do nosso contêiner. Agora vamos em frente e selecionar este bloco de link de marca e eu vou dar-lhe um nome de classe. Aqui eu vou chamá-lo de logotipo navbar. Isso mesmo, sublinhado navbar, sublinhado , eu vou usar dois sublinhados, e logo lá vamos nós. Você pode nomeá-lo como quiser, esta é a maneira que eu estruturo minhas aulas. Falarei sobre nomes de classe mais tarde, qual sistema você pode usar para seus projetos, mas não importa, desde que você saiba o que está fazendo e desde que seus nomes façam sentido, você pode decidir como deseja nomear seus elementos. Aqui temos o logotipo navbar, e então eu vou para os fundos aqui e eu vou adicionar uma imagem aqui. Vamos escolher imagem e dos meus ativos, eu vou procurar círculo SVG, este é o logotipo grande, eu vou selecionar isso. O que mais eu preciso fazer? Primeiro, eu vou configurá-lo para conter, então eu vou mudar sua posição para o centro e, finalmente, eu vou mudar o pneu para não azulejo exatamente assim, mas parece muito grande, não é? Então eu vou em frente e mudar sua propriedade de tamanho. Vamos definir a largura para 60 pixels e a altura para 18 pixels. Você pode ajustá-los como quiser, mas com base no meu arquivo de design aqui, se eu selecionar este logotipo, você pode ver que sua largura é de aproximadamente 60 pixels e sua altura é definida para 18 pixels. Legal, nosso logotipo parece ótimo. Agora precisamos criar nossos menus de navegação. Então aqui em nosso arquivo de design temos uma casa, projetos e serviços. A página inicial, que é a página selecionada ou o menu selecionado, deve ter a cor primária e as outras devem ter a cor média neutra, como você pode ver aqui. Vamos em frente e criar nossos menus. Nós temos a casa, nós temos sobre, eu vou mudar o sobre para projetos e o contato para serviços, legal. O que mais precisamos fazer? Como você pode ver, estamos usando uma fonte média aqui, um peso médio para esses menus, mas aqui, este olhar leve. Então eu vou selecionar um deles, não importa qual deles eu vou começar com casa, e eu vou dar-lhe uma aula. Por quê? Porque vamos reutilizar os estilos que vamos definir para este link de navegação em particular uma e outra vez. Faz sentido dar-lhe uma aula aqui e eu vou escrever nav sublinhado, sublinhado , link, apenas assim. Agora eu vou para a seção de tipografia aqui, e eu vou mudar a fonte para Roboto, a que nós adicionamos antes, e o peso é definido para 400 ou normal. Eu vou configurá-lo para 500 ou médio e o tamanho da fonte vai ser 17 pixels como você pode ver aqui, nós temos 17 pontos. Vamos definir para 17. E quanto à cor? Vamos definir a cor para meio neutro e estamos quase terminando. Agora que aplicamos esses estilos para este primeiro link nav, podemos selecionar nosso segundo link e aqui vamos usar a classe de link nav assim como para o terceiro também, legal, mas e sobre a cor do primeiro deve Isso não usa a cor primária? Sim, deveria. Como podemos fazer isso? É tão simples. Precisamos criar uma classe de combinação, enquanto este primeiro link é selecionado, eu vou criar uma nova classe de combinação e vamos chamá-la atual. Significa que a página atual está selecionada, certo? Então eu vou mudar sua cor para primária, nossos menus estão prontos também. Legal, mas e esse botão? Bem, precisamos modificar este botão. Então eu vou selecionar este botão e eu vou dar-lhe uma aula. Eu vou nomeá-lo botão principal grande, então eu vou começar a mudar suas propriedades. Primeiro, vou mudar a tipografia aqui, a fonte para Roboto, e o peso vai ser 400 normal, tudo bem. E quanto ao tamanho? Vai ser 17 pixels. Se você for para o arquivo de design aqui, se você selecionar essa fonte, você pode ver que ela diz 17, e eu posso mudar o caminho da fonte para médio também. Mas vamos ver como vai. Então eu vou mudar sua cor de fundo para nossa cor primária e, finalmente, deixe-me modificar o texto para entrar em contato conosco, legal. Mas e o estofamento? Porque aqui como você pode ver, temos mais preenchimento em torno deste texto, vou selecionar este Fale Conosco leva aqui, e vamos manter pressionada a tecla Option ou Alt no meu teclado e, em seguida, eu posso ver o acolchoamento. Nosso preenchimento superior e inferior tem 15 pixels, e nosso preenchimento esquerdo e direito são definidos como 33 pixels. Então vamos em frente e selecionar este botão e, em seguida, aqui nesta seção de espaçamento, vamos mudar o preenchimento, não a margem. Lembre-se, preenchimento é o espaço dentro nossos elementos e margem é o espaço fora de nossos elementos. Aqui eu vou modificar o preenchimento superior e inferior para 15 pixels, vou manter pressionada a tecla Option ou a tecla Alt no meu teclado e modificar o preenchimento direito e esquerdo para cerca de 30 pixels. Parece ótimo, parece ótimo. Mas e a cor deste fundo? Se eu selecionar esta barra de navegação, você pode ver que temos esta cor de fundo cinza claro, que não é o que queremos porque aqui temos um fundo transparente, enquanto esta barra de navegação é selecionada Eu vou dar-lhe uma classe e eu vou escrever navbar assim. Finalmente, se eu passar para a cor de fundo aqui, eu vou escrever transparente. Lá vamos nós. O fundo se foi, mas e a margem superior? Aqui, como podem ver, temos alguma margem máxima. Se eu selecionar meu contêiner e manter pressionada a tecla Option ou a tecla Alt no teclado, posso ver a margem superior aqui, ela diz 70 pixels. Vamos em frente e adicionar algumas margens. Para fazer isso, vou selecionar meu contêiner porque nosso contêiner aqui tem uma margem superior de 70 pixels. Então, se eu for para a seção de espaçamento, posso adicionar uma margem superior como esta. Eu posso configurá-lo para 70 pixels, exatamente assim. Isso é tudo, nossa barra de navegação está pronta. Não vamos falar de capacidade de resposta agora vamos falar sobre isso mais tarde. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 44. Seção de herói.: Ei, neste vídeo, vamos começar a criar nossa seção de heróis juntos. Como você pode ver neste projeto Figma, nossa seção de heróis tem um contêiner, assim como todas as outras seções, temos sempre uma seção e dentro teremos um contêiner. Esta é a melhor estrutura que você pode ter para seus projetos. Uma seção e, em seguida, um contêiner dentro, e, em seguida, você pode ter seu conteúdo. Dentro deste contêiner, temos dois outros quadros aqui, estes serão nossos blocos Div, como você pode ver, eles parecem caixas aqui. Aqui, dentro deste recipiente teremos duas caixas, dois blocos Div. Um vai conter o nosso conteúdo, o da esquerda, e o segundo vai conter as nossas imagens. Dentro do conteúdo, teremos um título, teremos um bloco de texto, que é a nossa descrição, e depois dois botões diferentes. Um botão primário, assim como o que criamos para a nossa barra de navegação, e então este é um botão de texto, e finalmente para este recipiente direito ou digamos bloco DIV imagem, teremos dois cartões diferentes, cartões 1, cartão 2 e, finalmente, a imagem do herói, que é esta imagem principal. Você pode perguntar, por que não podemos exportar esses três elementos diferentes como uma imagem? Essa é uma ótima pergunta. Poderíamos fazer isso, seria muito mais simples se eu fizesse isso. No entanto, quando começamos a trabalhar com animações e interações, vamos animar todos esses elementos juntos um por um. Se eu exportá-los como uma única imagem, seria impossível. Portanto, eu exportei esses elementos separadamente, que poderíamos ter mais flexibilidade quando se trata de interações e animações. Vamos para o nosso projeto de fluxos web, e a primeira coisa que precisamos criar é uma seção. Eu vou para a seção adicionar e deixe-me arrastar e soltar uma seção aqui, e colocá-lo bem abaixo da minha barra de navegação assim. Vou dar-lhe uma classe chamada seção, e esta é a classe que vamos usar para todas as nossas seções. Portanto, é muito importante especificar as propriedades que serão usadas globalmente para todas as nossas seções. Nós não vamos modificar as propriedades de tamanho aqui, no entanto, eu vou mudar o preenchimento desta seção, o preenchimento esquerdo e direito. Por quê? Porque todas as nossas seções vão ter algum preenchimento esquerdo e direito. Se eu manter pressionada a tecla Alt ou a tecla Option no teclado e clicar e arrastar, poderei adicionar um preenchimento esquerdo e direito de 30 pixels. Não podemos ver nada acontecendo aqui, mas quando vamos para outros pontos de interrupção, esse preenchimento que adicionamos aqui impedirá que o conteúdo saia da janela de exibição. Este estofamento é tão importante. Quando começarmos a falar sobre responsividade, veremos o impacto do preenchimento que adicionei aqui. Mais uma coisa que vou mencionar aqui é que agora estou trabalhando com uma tela grande. É por isso que aqui diz 1600 pixels e 100 por cento. Se você estiver trabalhando com um dispositivo menor, como um laptop de 13 polegadas ou até mesmo laptops maiores, é provável que você não veja a tela exata como eu vejo aqui devido aos pixels disponíveis do tamanho da tela. No entanto, vou mostrar-lhe um truque muito bom. Se você está trabalhando, digamos que com um pequeno dispositivo como um laptop de 13 polegadas, você pode clicar aqui e então você pode reduzir seu projeto para ver o que eu vejo aqui. É apenas para fins de pré-visualização, por isso não afeta seu projeto principal e o tamanho de seus elementos. No entanto, se você quiser ver a aparência do seu projeto em dispositivos maiores, você pode reduzi-lo. Por exemplo, você pode definir a escala para 70%. O que mais precisamos fazer? Bem, primeiro, eu vou para ir em frente e adicionar uma classe de combinação para esta seção porque vai ser a nossa seção de heróis. Eu vou escrever herói, lá vamos nós, e então dentro desta seção, eu vou precisar de um recipiente. Se eu apenas ir em frente e arrastar e soltar um Div preto aqui e colocá-lo dentro desta seção, certificar-se de que ele está aninhado dentro, eu posso dar-lhe um recipiente de classe, e lá vamos nós. Temos nossa largura máxima de 1100 pixels que definimos para o contêiner que usamos para nossa barra de navegação. Uma coisa importante que eu vou mencionar aqui é que se você quiser adicionar os elementos muito mais rápido, você pode simplesmente usar a tecla Command ou os atalhos Control K no seu teclado, e aqui usando este QuickFind, você pode procurar qualquer elemento que você quiser. Digamos que vou procurar um bloco Div. Eu posso escrever Div, e lá vamos nós. Se eu pressionar “Enter”, este bloco Div será adicionado dentro deste recipiente. Deixe-me remover isso. Eu vou remover este recipiente também, e eu vou mostrar mais uma vez como ele funciona. Primeiro, eu vou selecionar minha seção porque dentro eu vou adicionar um recipiente. Então eu vou apertar “Command K” ou “Control K”, e aqui vamos escrever o bloco Div “Enter”. Este bloco Div foi adicionado à minha seção, e então eu vou dar-lhe um recipiente de classe, e estamos feitos. Nosso contêiner está pronto, nossa seção está pronta no entanto, não temos espaçamento suficiente entre nossa barra de navegação e a seção. Vamos ao nosso arquivo de design. Se eu selecionar esta seção de herói e manter pressionada a tecla Option ou Alt no meu teclado, você pode ver que temos uma margem superior de 100 pixels definida para esta seção de herói. Vou selecionar esta seção, e desde que adicionamos essas classes de combinação de heróis, quando eu adicionar alguma margem a isso, isso não afetará as propriedades de nossa seção, ele só afetará as propriedades desses heróis combo classe. Vou definir a margem superior para 100 pixels, e lá vamos nós, ela foi empurrada para baixo. O que precisamos dentro deste contentor? Bem, este recipiente deve ter dois blocos Div. Então vamos em frente e adicionar dois blocos Div. Vou apertar “Command K” para usar o QuickFind, e vou escrever Div, lá vamos nós. Há um bloco Div dentro e eu preciso de mais um bloco Div, então eu vou selecionar este recipiente novamente e apertar “Command K” ou “Control K” e escrever Div. Agora eu tenho dois blocos Div diferentes dentro deste contêiner. No entanto, como você pode ver, cada um desses blocos Div ocupa toda a largura de seu pai, que é este recipiente, e não é o que queremos. Vou selecionar o contêiner e, em seguida, vou alterar sua configuração de exibição para flexbox. Por quê? Vamos dar uma olhada no nosso arquivo de design. Aqui como você pode ver dentro deste contêiner, nós temos dois blocos Div, nós os criamos, mas eles estão sentados um ao lado do outro, não um em cima do outro. Se você se lembra, quando temos um layout unidimensional, podemos usar o flexbox para alinhar nossos blocos Div facilmente. Isso é o que eu vou fazer. Eu preciso selecionar o elemento pai, e eu vou mudar sua configuração de exibição de bloco para flexbox. Agora temos uma direção horizontal, bom, então o alinhamento é ajustado para esticar, e eu vou mudar a justificativa para centralizar, mas eles parecem muito pequenos. Isso é totalmente bom, porque vamos dar-lhes algumas aulas. Mas vamos ver o que fizemos aqui. Selecionamos o contêiner e alteramos sua configuração de exibição para flexbox. No entanto, há um erro aqui. Nós não adicionamos uma classe de combinação a esta classe principal, e isso é errado. Por quê? Porque mais tarde, se você quiser usar o mesmo contêiner e não queremos usar uma flexbox com essas propriedades, precisamos substituir essas propriedades usando uma classe de combinação. Eu intencionalmente fiz esse erro para mostrar por que é importante usar classes combinadas. Agora eu vou desfazer a operação Command Z ou Control Z novamente e novamente, e aqui temos nosso contêiner, e agora antes de mudar sua configuração de exibição para flexbox, eu vou dar-lhe uma classe de combinação. Vou escrever herói. Então, eu vou mudar sua configuração de exibição para picos flexíveis e eu vou mudar sua justificativa para centralizar. Agora, tudo parece ótimo. Vou selecionar o primeiro bloco div, e vamos dar-lhe uma aula. Eu vou escrever Hero__Content, porque este bloco div vai conter o nosso conteúdo. Para o segundo, eu vou selecioná-lo e vamos dar-lhe uma nova classe. Vou escrever Hero__Image. Assim como o que temos em nosso projeto Figma; temos conteúdo e imagem. Vamos começar com o conteúdo. O que precisamos aqui? Precisamos de um título, um título. Então temos uma descrição logo abaixo disso e dois botões; um botão recipiente e um botão de texto. Vou começar com o título. Deixe-me ir em frente e arrastar e soltar um cabeçalho aqui, assim, ter certeza de que está aninhado dentro. Para este título, vou escolher H_1. É muito importante. Para a seção de heróis, você precisa sempre usar o H_1. É importante quando se trata de otimização de SEO, falaremos sobre esses detalhes mais tarde. Mas por enquanto, você só precisa saber que para sua seção de heróis, você deve sempre usar H_1 não H_2, ou quaisquer outros títulos. Legal. Agora, para este título, vou dar-lhe uma aula. Isso mesmo Hero__ Heading. Precisamos modificar suas propriedades como as propriedades de topografia, a cor, o tamanho da fonte, etc. Você notou que para cada camada de texto, estamos repetindo o mesmo processo? Estamos mudando a fonte para Roboto. Podemos omitir este passo de alguma forma? Sim, podemos. Você se lembra quando eu falei sobre o corpo de todas as páginas tag? Nós definimos a cor do fundo lá. Também podemos definir as propriedades de topografia padrão lá, e então podemos substituí-los se precisarmos modificar algo. Desde que eu sei que para este projeto, eu vou usar apenas uma fonte, Roboto, eu posso simplesmente ir em frente e selecionar meu elemento corpo aqui e então eu vou para o seletor e eu vou escolher corpo todas as páginas. Se eu passar para a topografia, você pode ver que a fonte está definida como Arial. Deixe-me mudar para Roboto. Assim que eu alterá-lo aqui você pode ver que fonte deste título foi alterada também. Por quê? Porque títulos, parágrafos e caixa de texto por padrão olhar para os pais e seus pais agora é o corpo. Eles herdam as propriedades que definimos para o corpo que todas as páginas marcam a menos que as substituamos. Não vamos alterar o tamanho da fonte porque na maioria das vezes precisamos substituir o tamanho da fonte. Além disso, vou mudar sua cor para o nosso, digamos, escuro neutro, porque para a maioria do nosso texto, precisamos usar nossa cor escura neutra. É bom definir o padrão de tipografia aqui também. Agora eu posso ir para o meu bloco de div de conteúdo de herói e eu não preciso mais mudar as fontes, eu posso substituí-las sempre que eu quiser. Mas se eu clicar nesta fonte aqui, você pode ver que o valor vem do corpo de todas as páginas, porque nós definimos algumas propriedades padrão lá. Vamos ver o tamanho da fonte que precisamos aqui. Eu vou para o meu projeto Figma, eu vou selecionar este texto. Diz H_1 e aqui H_1 é 60 pontos. Vou configurá-lo para 60 pixels aqui, exatamente assim. E a altura da linha? Eu costumo definir para 130 ou 150 por cento. Para este título, uma vez que temos um tamanho de fonte grande, eu vou configurá-lo para 130%, apenas assim. Então eu vou ir em frente e copiar este texto do meu projeto. Se você clicar duas vezes nessas camadas, você pode selecioná-las e copiá-las, colá-las aqui. Lá vamos nós. Mas como você pode ver, este blog div conteúdo herói pega muito espaço aqui. Se eu passar para o meu arquivo de design e selecionar esse grupo de conteúdo, você poderá ver que a largura está definida para 530 pixels. Portanto, eu vou ir em frente e selecionar este bloco div conteúdo herói, e eu vou dar-lhe uma largura máxima. Não deve ser maior que 530 pixels. Vou configurá-lo para 530 pixels e lá vamos nós. O que mais precisamos? Logo abaixo deste título, vamos precisar de uma descrição, como podem ver. Posso arrastar e soltar um parágrafo ou um bloco de texto. Vou usar um bloco de texto. Vou arrastá-lo e soltá-lo aqui. Este bloco de texto, como você pode ver, está usando a fonte padrão Roboto que definimos para o nosso corpo todas as páginas tag. Vai acelerar o nosso processo de design. E quanto ao tamanho? Vou mudar seu tamanho para 20 pixels. Se eu for para o meu arquivo de design aqui, você pode ver que ele está usando body regular e body regular tem 20 pixels. Vou ajustá-lo para 20. Deixe-me ir em frente e copiar e colar este texto aqui. Legal. Mas como você pode ver, a altura da linha não é suficiente. Vou mudar sua altura para 150 por cento já que o tamanho da fonte não é tão grande e é muito longo. Se eu passar para o meu projeto de design aqui e eu selecionar este texto, você pode ver que é uma largura é definida como 435 pixels. Eu preciso fazer a mesma coisa para este bloco de texto também. Vou definir uma largura máxima de 400 e 35 pixels, e agora parece ótimo. Finalmente, vou mudar sua cor. Para este texto, usei meio neutro. Vou usar a mesma coisa aqui. Vou usar uma das amostras aqui, meio neutro. Lá vamos nós. Legal. O que mais precisamos? Precisamos de dois botões. Para organizar esses dois botões, precisamos criar um bloco div e dentro desse bloco div podemos colocar nossos botões. Deixe-me ir em frente e selecionar este herói conteúdo div bloco, e eu vou criar um novo bloco div Command K ou Control e deixe-me escrever div. Lá vamos nós. Aqui está o nosso bloco div e eu vou chamá-lo de hero__buttons. Legal. Dentro disso, vou em frente e adicionar dois botões. Um botão contido ou este botão principal e um botão de texto. Deixe-me selecionar este botão principal na barra de navegação. Eu vou apertar Command C ou Control C e eu vou selecionar esses botões herói div bloco e eu vou pressionar Command V ou Control V para colá-lo aqui. Lá vamos nós. Temos o botão Fale Conosco aqui e diz botão principal. Legal. Vou mudar esse texto para entrar em contato. Deixe-me escrever para entrar em contato. Também vou precisar de um botão de texto. Deixe-me ir em frente e procurar um link de texto. Vou arrastá-lo e soltá-lo aqui dentro do bloco de div botões herói, apenas assim. Por padrão, como é um link de texto, você pode ver que ele tem algum estilo e decoração. Vamos substituí-los e eu vou dar uma aula. Vamos escrever herói sublinhado, sublinhado, botão de texto. Lá vamos nós. Deixe-me rolar até aqui. A fonte parece boa. O peso vai ser 500 ou médio. O tamanho da fonte será de 17 pixels. Se eu for para o meu arquivo de design aqui, ele está usando o meio de título e o meio de título tem um tamanho de fonte de 17 pontos. E quanto à cor? A cor será neutra, média, e uma decoração por padrão é definida como sublinhada. Eu vou definir para nenhum. Finalmente, permitam-me que altere este texto para ver o nosso trabalho. Agora tenho duas opções. Eu posso selecionar este bloco div botões herói e alterar a configuração de exibição para Flexbox e apenas alinhá-lo e adicionar alguma margem a este botão ou eu posso apenas manter a configuração de exibição do bloco e apenas adicionar algumas margens direita para este Get no botão de toque. Uma vez que estes dois botões vão ser colocados um ao lado do outro, eu não preciso de uma Flexbox. Eu posso apenas selecionar este botão e adicionar algumas margens. O lado esquerdo está quase pronto. A única coisa que resta é adicionar algum espaçamento. Vou selecionar este título aqui. Vou manter pressionada a tecla “Option” ou a tecla “Alt”. Se eu passar o mouse sobre essa descrição, você pode ver que eu tenho uma margem inferior de 30 pixels. Se eu selecionar esta descrição aqui, como você pode ver, eu tenho uma margem inferior de 40 pixels, e para este botão, eu tenho uma margem direita de 40 pixels. Vamos em frente e mudar suas margens. Vou selecionar este título. Se eu clicar nisso, você pode ver que o valor vem de todos os cabeçalhos H_1. Nós não falamos sobre esta tag, mas funciona como o corpo de todas as páginas tag. Vou remover a margem máxima. Vou defini-lo como zero, e vou modificar a margem inferior para 30 pixels. Agora deixe-me selecionar esta descrição. Nós não mudamos o nome da classe, então eu vou modificar o nome da classe aqui para a descrição do herói. Sublinhado de herói, descrição de sublinhado. Agora eu posso adicionar um preenchimento inferior de 40 pixels, exatamente assim. Aqui, eu vou selecionar este botão, mas eu não posso modificar sua margem agora. Por quê? Porque neste momento estou a usar a classe primária de botões. Se eu adicionar alguma margem aqui, isso afetará o botão Fale Conosco na barra de navegação também. Deixa-me mostrar-te. Se eu adicionar algumas margens certas. Lá vamos nós. Você pode ver isso? Não é o que queremos. O que devo fazer? Sim, você está certo. Preciso de uma aula de combo. Aqui, eu vou adicionar uma classe de combo, e eu vou escrever herói. Agora posso adicionar uma margem direita de 40 pixels sem afetar o botão Fale Conosco. Agora é hora de trabalhar no segundo bloco div, que é o bloco div imagem herói. Como podem ver aqui, vamos precisar de três imagens diferentes. Deixe-me selecionar esta imagem de herói e, em seguida, eu vou adicionar três imagens diferentes aqui. Deixe-me apertar o Comando K e vou procurar a imagem, Enter. Eu vou escolher a imagem e a partir daqui eu vou procurar imagem herói. Lá vamos nós. Parece bem. Agora vou precisar de mais duas imagens para os meus cartões. Deixe-me selecionar este bloco div imagem herói. Vou apertar o Comando K, ou Controle K. Deixe-me escrever uma imagem. Ótimo, está aqui. Vou escolher a carta 1. Deixe-me procurar o cartão 1. Lá vamos nós. Está bem aqui. É muito grande. Nós vamos consertar isso, e eu vou precisar de mais um cartão também. Deixe-me selecionar esta imagem e eu vou dar-lhe uma aula. Vamos escrever herói sublinhado, sublinhado Card 1. Eu posso simplesmente dimensioná-lo para baixo assim ou, alternativamente, eu posso clicar neste “Configurações” aqui e eu vou definir sua largura para 380 ou 375 pixels. Parece bom. Mas por que esta caixa parece muito grande, mas o elemento não é tão grande? É porque eu usei algumas sombras para este cartão e eu exportei isso. É por isso que temos essa grande fronteira. Agora eu vou selecionar este bloco div imagem herói, mais uma vez, pressione Command K ou Control K e procure a imagem. Lá vamos nós. Vou escolher o Cartão 2 dos meus bens. Aqui está. Vou dar-lhe outra aula. Vamos escrever herói sublinhado, sublinhado Card 2. Agora vou reduzi-lo assim. Vamos dar-lhe uma largura específica de 375 pixels. Incrível. Mas você pode ver como eles são colocados em cima um do outro? Não é o que queremos. Como podemos consertar isso? Bem, você se lembra quando falamos sobre diferentes opções de posicionamento como estático, relativo , absoluto, fixo e pegajoso, eu disse que se quisermos criar alguns layouts modernos, vamos precisar deles. Isso é exatamente o que vamos fazer. Vamos mudar a opção de posição para conseguirmos o que queremos. Aqui como você pode ver, estas duas cartas estão flutuando. Portanto, vou definir a posição deles para absoluta. Mas como você se lembra, a fim de definir a posição como absoluta, primeiro, precisamos definir sua posição pai como relativa. O pai é este herói imagem div bloco e eu vou mudar sua posição para relativo. Nada acontece. Mas se eu selecionar este herói Card 1 e eu mudar sua posição para absoluto. Lá vamos nós. Agora é relativo ao bloco div imagem herói. Vou fazer a mesma coisa por este cartão. Vou mudar sua posição para absoluta. Legal. Agora posso simplesmente controlar a posição deles aqui. Vamos começar com o cartão 1. Vou selecionar o Cartão 1, e deve ser colocado por aqui. Vou selecionar o canto superior esquerdo e depois vou modificar a margem esquerda assim. Eu posso configurá-lo para menos 19 por cento, e para o topo, eu vou configurá-lo para, digamos, menos 2 por cento. Parece ótimo. E quanto a este? Vou selecionar o herói Card 2. Vou mudar sua posição para a parte inferior direita, e então deixe-me movê-la para baixo assim. Vamos definir a posição inferior para menos 22 por cento e eu posso modificar a margem direita ou esquerda aqui. Isso não importa. Deixa-me mostrar-te. É exatamente assim. Se eu usar o certo, preciso de valores negativos. Se eu usar o esquerdo, precisarei de valores positivos como este. Prefiro usar a certa. Vou colocá-lo por aqui. Parece bom. Vamos compará-lo com o nosso design. Parece bem. No entanto, este bloco div conteúdo não está alinhado com estes bloco div direita, este bloco div imagem. Como posso consertar isso? Bem, eu posso selecionar este conteúdo de herói e eu posso dar-lhe algumas margens superiores. Deixa-me mostrar-te como funciona. Simplesmente assim. Se eu movê-lo para baixo assim, eu posso definir sua margem superior para 114 pixels. Parece bem. Eu acho que agora eles estão perfeitamente alinhados. Tudo bem pessoal, isso é tudo por este vídeo, espero que tenham gostado. Se você tiver alguma dúvida, por favor me avise. Vejo você na próxima. 45. Seção de clientes: Ei, neste vídeo, vamos começar a criar esta seção de clientes. Como você pode ver na seção do cliente, vamos ter logotipos diferentes. Na verdade, precisamos colocar cinco logotipos diferentes. Por padrão, esses logotipos devem ser preto e branco, e quando o usuário passa o mouse sobre eles, eles devem ficar coloridos. O que precisamos para esta seção? Como você pode ver aqui, precisamos de outra seção, e dentro precisamos ter um contêiner que inclua nossos logotipos. Cada logotipo deve ser colocado dentro de um bloco div. Vamos começar. Primeiro de tudo, vou em frente e criar uma nova seção. Eu vou selecionar o corpo e eu vou apertar Comando K ou Controle K e vamos procurar a seção. Lá vamos nós. Uma nova seção foi adicionada. Então, como de costume, precisamos adicionar a classe de seção a esta seção. Deixe-me procurar a seção. Ótimo, nossa seção está pronta. Agora, dentro desta seção, precisamos de um contêiner. Enquanto esta seção estiver selecionada, eu vou pressionar Command K ou Control K, e eu vou procurar o bloco div. Lá vamos nós e eu vou dar-lhe a aula de contêineres, fantástico. Nosso contêiner está pronto, nossa seção também está pronta. Mas esta seção ainda não tem nenhuma margem, então eu vou ir em frente e verificar se é margem aqui. Ele precisa ter 130 pixels de margem superior. Portanto, aqui para esta seção, vou adicionar uma classe de combinação chamada logos. Para nossa seção de heróis, adicionamos a classe de combinação de heróis. Para esta seção, eu vou adicionar logotipos e, em seguida, eu vou adicionar 130 pixels margem superior. Lá vamos nós. Agora temos espaço suficiente para trabalhar. Dentro deste recipiente, precisamos ter diferentes blocos div. Na verdade, precisamos ter cinco blocos div diferentes. Como devemos alinhar esses blocos div? Bem, temos duas opções para escolher. Opção 1, podemos transformar este contêiner em uma flexbox. Opção 2, podemos transformá-lo em uma grade. Bem, um flexbox é uma boa opção, mas eu vou usar grade, embora seja um layout unidimensional. Por que eu vou escolher a grade? Porque mais tarde, quando se trata de capacidade de resposta, quando queremos tornar a nossa página web responsiva, seria muito mais fácil trabalhar com grid. Vou provar-vos isso nas nossas futuras lições. Mas por enquanto, eu vou selecionar este recipiente e eu vou adicionar um novo bloco div dentro. Eu não vou transformar este contêiner em uma grade, eu vou adicionar um novo bloco div dentro, apenas assim, e vamos dar-lhe uma classe. Vou escrever “Grid__Logos”. Vou transformar este bloco div em uma grade assim. Quantas linhas e quantas colunas precisamos? Bem, basicamente precisamos apenas de uma linha e cinco colunas diferentes, como você pode ver aqui. Eu vou remover a segunda linha aqui, e eu vou adicionar mais três colunas para obter cinco colunas no total. Legal, nossa grade está pronta. Agora é hora de adicionar nossos logotipos aqui. Como mencionei antes, cada logotipo deve ser colocado dentro de um bloco div. Eu vou selecionar essa grade e eu vou pressionar Command K ou Control K no meu teclado, e então vamos adicionar um bloco div aqui. Agora nosso bloco div ocupa a primeira célula aqui, e é exatamente o que queremos. Vou chamar-lhe Logotipo Cliente. Legal. Finalmente, dentro deste bloco div, vou adicionar uma imagem. Vamos ver o Comando K ou Controle K, e eu vou procurar a imagem. Lá vamos nós, e vamos escolher os logotipos aqui. Por padrão, os logotipos são coloridos. Isso é totalmente bom, porque mais tarde nós vamos torná-los preto e branco, e torná-los interativos. Mas, por enquanto, vou selecionar o logotipo Airbnb aqui. Legal. Então eu vou selecionar este bloco div e eu vou dar-lhe uma largura e altura específicas. Aqui, se eu selecionar este primeiro logotipo, se eu selecionar esta caixa aqui, você pode ver que a largura é 150 pixels e a altura é 96. Vamos definir sua largura para 150 pixels e sua altura para 96. Então eu vou transformar este bloco div em um flexbox. Vou alinhá-lo ao centro e vou justificá-lo para o centro também. Era exatamente o que procurávamos. O que mais precisamos fazer? Nosso primeiro logotipo está pronto. Vou copiar este bloco div, apertar Comando C ou Controle C, e então apertar Comando V ou Controle V quatro vezes para obter cinco logotipos diferentes. Então eu vou ir em frente e modificar a imagem de cada logotipo aqui. Vou selecionar este, vou mudá-lo para o Google. Eu vou ir em frente e selecionar este, eu vou alterá-lo para Microsoft. Vou selecionar o próximo e deixar-me mudá-lo para FedEx. Finalmente, vou selecionar esta última imagem e vamos alterá-la para a Amazon. Fantástico. Pessoal, isso é tudo por este vídeo, espero que tenham gostado. Vejo você no próximo vídeo. 46. Seção de projetos: Neste vídeo, vamos criar uma seção de projetos recentes juntos. Como você pode ver, esta seção tem um contêiner que contém este cabeçalho e também esta seção inferior, a seção do projeto. Esta seção do projeto, ou digamos que Projects_Wrapper tem três projetos diferentes, e cada projeto tem elementos diferentes, como uma imagem no topo, um título, um subtítulo e, finalmente, este link para aprender mais, Eu vou seguir em frente como de costume primeiro criar uma seção. Deixe-me selecionar meu corpo e pressione a tecla “Command” ou “Control” e procure a seção. Lá vamos nós. Nossa seção foi adicionada. Então eu vou dar a aula de seção. Vou escrever a seção. Finalmente, vou dar uma aula de combo, que vai ser chamado de projetos. Como você pode ver, já que não há nada dentro desta seção, ele não ocupa nenhum espaço aqui e é compreensível. Agora, enquanto esta seção estiver selecionada, eu vou pressionar a tecla “Command” ou a tecla “Control”, e eu vou procurar um bloco div. Agora um bloco div está dentro desta seção e eu vou dar-lhe a classe contêiner. Lá vamos nós. Agora o nosso contentor também está pronto. Finalmente, vou dar a esta seção algumas margens superiores. Deixe-me dar uma olhada no meu projeto aqui. Se eu selecionar esta seção de projeto e manter pressionada a tecla “Option” ou a tecla “Alt” no meu teclado, você pode ver que ela tem uma margem superior de 200 pixels. Vou em frente e dar-lhe uma margem máxima de 200 pixels aqui também. Lá vamos nós. Agora, o que precisamos? Dentro deste contêiner vamos precisar de um título e então precisamos do invólucro deste projeto. Primeiro, deixe-me procurar uma posição. Vou apertar a tecla “Command” ou a tecla “Control”, e vou escrever o título. Certifique-se de selecionar seu contêiner por que você está procurando por seus elementos. Porque esses elementos serão aninhados dentro do elemento selecionado no momento. Vou clicar neste título. Lá vamos nós. Agora, esta posição está dentro do meu contentor. Finalmente, vou mudar H1 para H3. Isso não está certo porque basicamente deve ser H2 e eu vou explicá-lo mais tarde. Mas vou cometer este erro intencionalmente porque mais tarde, quando falarmos sobre acessibilidade, vou mostrar-vos porque é que escolher o título certo importa. Mas, por enquanto, vamos mantê-lo H3, e eu vou dar-lhe uma aula. Eu vou escrever projetos__heading. Então eu vou modificar algumas de suas propriedades topográficas. Vou mudar o tamanho da fonte de 24 pixels para 40. Finalmente, deixe-me copiar este texto e colá-lo ali. Projetos recentes, nosso título está pronto. O que mais precisamos agora, logo abaixo deste título, vamos ter o Projects_Wrapper. Eu vou selecionar este contêiner e eu vou apertar a tecla “Command ou “Control” e procurar um bloco div assim. Vou dar-lhe uma classe, vamos chamá-lo de projects__wrapper, e agora estes dois elementos são colocados dentro deste recipiente. No entanto, esse contêiner tem uma configuração de exibição em bloco. Vou transformá-lo em flexbox, mas antes de fazer isso certifique-se de dar-lhe uma classe de combinação. É tão importante. Por quê? Como eu mencionei antes, você não adicionar uma classe de combinação e você alterar a configuração de exibição ou qualquer uma dessas propriedades aqui, você está fazendo as alterações globalmente. Se eu virar para flexbox, você pode ver que esses logotipos estão confusos. Se eu mudar a direção para vertical, tudo parece confuso e não é isso que queremos. Aqui eu vou selecionar o recipiente e eu vou dar-lhe uma classe de combinação. Vou escrever projetos. Agora, eu posso mudar a configuração de exibição para flexbox e eu vou mudar a direção de horizontal para vertical. Vamos mudar a justificativa para o espaço entre também. Agora, quando eu escolher que nada acontece, mas mais tarde, quando adicionamos conteúdo, nosso Projects_Wrapper, e também adicionar algumas margens a este título, veremos que a diferença está certa. Eu vou selecionar estes Projects_Wrapper, e eu vou dar-lhe uma margem superior. Deixe-me adicionar 70 pixels de margem superior. Se eu der uma olhada no meu design aqui, eu tenho 70 pixels margem superior também. Dentro vamos ter três cartas diferentes. Portanto, vou precisar de um bloco div principal. Esse é o nosso cartão principal e dentro que vamos precisar de mais dois blocos div, um para a imagem superior e o segundo para o conteúdo inferior. Vamos começar com a adição do bloco div principal. Wireless Projects_Wrapper está selecionado. Vou apertar a tecla “Command” ou a tecla “Control”, e vou procurar o bloco div. Agora dentro há um bloco div e eu vou dar-lhe uma aula. Vamos escrever Project_Card, assim como este e este Project_Card ocupa toda a largura e toda a altura de seus pais, que é este Projects_Wrapper. Não é o que queremos. Queríamos ter uma largura máxima e também uma altura específica. Se eu for para o meu arquivo de design aqui, e se eu selecionar este projeto 1, por exemplo, você pode ver que este cartão tem uma largura de 340 pixels e uma altura de 444 pixels. Vou definir a largura máxima para 340 pixels e a altura para 444 pixels. Assim, nosso Project_Card está pronto. Não vamos duplicá-lo agora, porque primeiro vamos projetá-lo. Mais tarde, vamos duplicá-lo. O que precisamos aqui? Dentro disso, precisaremos de dois blocos div diferentes, como mencionei antes, um para a imagem e o segundo para o conteúdo. Enquanto estiver selecionado, vou pressionar a tecla “Command” ou a tecla “Control”, e vou procurar um bloco div. Nosso primeiro bloco de div está pronto e eu vou dar-lhe uma aula. Vamos chamá-lo de project__image, assim. Dentro, precisaremos adicionar um elemento de imagem. Enquanto esta imagem do projeto, bloco div é selecionado, Eu vou procurar um componente de imagem aqui. Deixe-me procurar por uma dessas imagens. Número 1, dos meus bens. Vou selecionar esta imagem no meu arquivo de design e, como você pode ver, a altura é definida como 240 pixels. Portanto, eu vou seguir em frente, e aqui eu vou dar uma aula primeiro. Vamos escrever project__card_image, assim. Finalmente, vou definir sua altura para 240 pixels. Deixe-me modificar os pés do campo para cobrir desta forma eu posso ter certeza de que ele irá cobrir o bloco div imagem projeto perfeitamente. Além disso, vou dar-lhe uma largura de 100 por cento. Vou definir sua largura para 100 por cento. Desta forma, ele vai ocupar toda a largura de seu pai, que é esta imagem do projeto e também o Project_Card. A primeira parte está pronta. Agora, enquanto este bloco de div Project_Card é selecionado Eu vou adicionar outro bloco div aqui. Lá vamos nós. Vou dar-lhe uma aula e vamos chamá-lo Project__Content. Primeiro, eu vou ter certeza de que este bloco Div conteúdo do projeto ocupa toda a altura disponível aqui. Como você pode ver, temos algum espaço, mas este bloco de conteúdo do projeto Div não está cobrindo todo esse espaço. Portanto, eu vou selecionar isso e se eu for para a seção lateral, eu posso definir sua altura para 100 por cento, exatamente assim. Mas há um problema. Como você pode ver agora, está fora do nosso cartão de projeto. Por quê? Porque essa placa de projeto tem uma altura específica e a configuração de exibição está definida para bloquear. A fim de corrigir este problema, eu vou selecionar este cartão de projeto e eu vou mudar sua configuração de exibição de bloco para uma caixa flexível, e ele vai ser vertical porque nós teremos dois filhos diferentes dentro que deve empilhar em cima do outro verticalmente. Agora, tudo parece bom. Temos o conteúdo do projeto, temos a imagem do cartão do projeto também. Se eu for para o meu arquivo Design, você pode ver que este cartão tem um fundo branco, mas aqui nós não temos nenhum plano de fundo. Deixe-me selecionar meu cartão de projeto. Então, se eu for para a cor, vou escrever branco aqui. Lá vamos nós. Agora temos o fundo branco. Dentro deste conteúdo do projeto, precisaremos ter um título, um subtítulo e um link Saiba mais. Como podemos estruturar isso? Deixe-me ver. Se eu transformar este conteúdo do projeto uma caixa flexível e dentro eu colocar um bloco Div e um bloco Link, eu facilmente obter o que eu tenho aqui. Como? Quando eu transformo este conteúdo do projeto para uma caixa flexível, eu posso mudar sua justificativa facilmente, então eu posso alcançar exatamente este mesmo design. Deixa-me mostrar-te como funciona. momento, este conteúdo do projeto tem a configuração de exibição em bloco e não há nada dentro. Enquanto estiver selecionado, eu vou pressionar o comando K ou controle K e eu vou adicionar um bloco Div aqui, e eu vou dar-lhe uma classe. Vamos em frente e criar uma classe. Eu vou escrever project__text, e dentro deste bloco Div, eu vou ter dois blocos de texto diferentes. Eu vou apertar o comando K e eu vou procurar o bloco de texto. Lá vamos nós. Este é o primeiro. Deixe-me dar uma aula. Eu vou escrever project__title, e eu vou modificar suas propriedades topográficas. A fonte vai ser Roboto, o peso vai ser 500 ou médio. O tamanho será de 24 pixels, exatamente assim, a altura da linha será de 150 por cento, e a cor parece boa. Agora eu vou ir em frente e copiar e colar este título. Deixe-me escolher isso, copiá-lo, e colá-lo aqui, simplificar. Este é o nome do projeto. Estes são projetos fictícios, a propósito. Legal. Nosso título está pronto. Agora vou modificar seu espaçamento. Vou dar-lhe algumas margens. Vou manter pressionada a tecla opção e a tecla shift no teclado, e vamos adicionar uma margem igual a todos os lados. Vou dar-lhe uma margem de 30 pixels. Talvez eu possa diminuir a margem inferior para 20 pixels. Agora, eu vou copiar este comando título C ou controle C, comando V ou controle V. Então eu vou adicionar minha descrição ou legenda aqui. No entanto, certifique-se de duplicar sua classe primeiro. É tão importante porque vamos modificar suas propriedades. Caso contrário, mudaremos o título do projeto também. Primeiro, clique nesta pequena seta, duplique esta classe e altere seu nome para a descrição do projeto. Assim como esta descrição. A primeira coisa que vou fazer é remover a margem máxima, não preciso dela. Vou manter pressionada a tecla de opção no meu teclado ou tecla alt e clicar nela, então eu vou diminuir a margem inferior para 10 aqui. Aqui vamos nós. Agora eu posso ir em frente e modificar as propriedades da topografia. Vamos começar com o peso. Vai ser normal. O tamanho será de 17 pixels, e a altura parece boa. No entanto, a cor deve ser alterada para uma cor média mútua. Agora eu posso simplesmente copiar este texto e colá-lo aqui. Lá vamos nós. Agora, eu vou selecionar este texto do projeto e eu vou mudar sua configuração de exibição para caixa flexível e certifique-se de mudar a direção para vertical. Parece muito melhor agora, e certifique-se de que é justificado para o topo. Agora, enquanto o bloco Div conteúdo do projeto está selecionado. Vou pressionar o comando K tecla de controle K no meu teclado, e deixe-me procurar um link de texto. Vamos criar um link de texto como o que fizemos aqui para esta seção de heróis. Primeiro, como de costume, vamos dar-lhe uma aula. Eu vou escrever o botão Link, assim mesmo. Então eu vou modificar suas propriedades topográficas. O peso parece ótimo. Vou modificar seu tamanho para 17 pixels. cor vai ser padrão primário e, finalmente, a decoração deve ser definida como nenhuma e deixe-me modificar este texto para Saiba mais. Saiba mais. Deixe-me dar algumas margens aqui. Vou dar-lhe margens esquerda, inferior e direita. No entanto, como esse link de texto está usando a configuração de exibição embutida, não posso modificar a margem inferior. Portanto, vou alterar sua configuração de exibição para bloquear. Então eu posso dar uma margem esquerda de 30 pixels inferior e direita, exatamente assim. Lá vamos nós. Agora, o que mais devemos fazer? Como você pode ver, eles não estão perfeitamente alinhados. Vou selecionar o bloco Div conteúdo do projeto. Como você pode ver, a configuração de exibição está definida para bloquear. Eu vou mudá-lo para caixa flexível, e eu vou mudar a direção para vertical. - Legal. Também vou mudar a justificativa para o espaço entre. Agora parece muito melhor. Legal. Mas e os outros cartões? Bem, vamos selecionar este cartão de projeto agora e vamos copiá-lo. Aperte o comando C e cole-o duas vezes, aperte o comando V ou controle V. Mas agora essas cartas estão empilhadas em cima umas das outras verticalmente. Isto não é o que queremos. Queremos que eles se sentem ao lado um do outro horizontalmente. Como podemos consertar isso? Bem, podemos selecionar nosso wrapper de projetos e podemos alterar sua configuração de exibição de bloco para caixa flexível, assim como isso. Então podemos mudar a justificativa para o espaço entre. Lá vamos nós. Temos o que temos aqui. Agora, vou em frente e modificar o conteúdo. Vou selecionar esta imagem e vou substituir a imagem. Vou escolher o segundo. Para o terceiro, vou repetir o mesmo processo. Vou mudá-lo para o número 3, e também vou mudar o nome desses projetos e também sua descrição. Deixe-me ir em frente rapidamente e modificar os títulos. Lá vamos nós. Agora vou modificar a descrição aqui, e para o terceiro projeto aqui. Estamos quase terminando, mas há mais uma coisa que precisamos fazer. Se eu der uma olhada neste arquivo de design, podemos ver que o espaçamento entre esses cartões é menor do que o que temos aqui. Como podemos ver, a lacuna é muito maior aqui. Por que é isso? Nós já definimos uma largura máxima para isso e uma altura. Essa é a chave, definimos a largura máxima. Portanto, precisamos selecionar o cartão do projeto, um deles. Não importa porque não adicionamos nenhuma classe de combinação aqui. Vou selecionar o primeiro, por exemplo. Deixe-me ir em frente e selecionar o primeiro. Em seguida, no dimensionamento, como você pode ver, diz encolher se necessário. Vou mudá-lo para crescer, se possível. Lá vamos nós. Está consertado. Agora o espaçamento aqui é igual ao que temos aqui. Temos um espaçamento igual entre eles, e eles estão crescendo quando têm espaço suficiente. Nossa seção de projetos recentes está pronta. No entanto, vou mostrar-lhe outra maneira de criar tal layout usando grades. Porque se você usar grade em vez de uma caixa flexível, seria muito mais fácil tornar seu design responsivo. A única coisa que eu preciso fazer é selecionar esses projetos wrapper, e em vez de caixa flexível, eu vou alterá-lo para grade. Agora tenho duas filas e duas colunas. Vou remover uma dessas linhas, e vou adicionar mais uma coluna. Lá vamos nós. Aqui, eu vou modificar o espaço entre nossas colunas para 40 pixels e apertar “Concluído”. É isso. Agora, em vez de usar caixa flexível, estamos usando uma grade e temos exatamente o mesmo layout. No entanto, em termos de capacidade de resposta, isso tornará nossa vida muito mais fácil. Tudo bem, pessoal, isso é tudo por este vídeo. Nossa seção de projetos recentes também está pronta. Espero que tenha gostado, e te vejo no próximo vídeo. Vejo você então. 47. Seção Testimonial: Neste vídeo, vamos começar a criar esta seção de depoimentos juntos. Então vamos ver o que temos aqui. Como você pode ver, esta seção deve ter uma largura menor em comparação com outras seções. Aqui, nossa seção de projetos recentes tinha uma largura de 100 por cento, mas aqui esta seção deve ter uma largura de 1320 pixels. Precisamos ter isso em mente. Vamos ver o que temos aqui. Esta seção deve ter uma cor de fundo escuro neutro. Além disso, como podem ver, temos algumas órbitas. Como vou estruturar isso? Primeiro, vou criar uma seção com uma largura máxima de 1320 pixels. Então, eu vou dar-lhe uma cor de fundo, esta cor escura neutra. Finalmente, vou adicionar uma imagem de fundo para adicionar essas órbitas. Uma vez que nossa seção está pronta, vamos adicionar um contêiner dentro, e dentro desse contêiner, vamos adicionar essas camadas de texto, este título, este subtítulo, ou digamos descrição, e finalmente, o informações aqui. Basicamente, este recipiente deve ser um flexbox com uma direção vertical. Para esta seção, primeiro, vamos criar um bloco div com a configuração de exibição flexbox. Então, dentro, vamos ter mais dois blocos div, um para esta imagem de perfil e outro para essas duas camadas de texto. O bloco div direito vai ser um flexbox com direção vertical. Por último, mas não menos importante, vamos colocar esses emojis em torno deste contêiner e vamos definir sua posição como absoluta. Finalmente, precisamos mudar a posição desta seção para relativa. Tudo bem. Parece simples. Vamos começar. Eu vou para Webflow. Aqui, vou selecionar meu corpo. Vou pressionar o comando K ou o controle K no meu teclado, e vamos procurar a seção. Tudo bem. A seção foi adicionada. Vou dar a aula de seção, como de costume. Além disso, vou dar uma aula de combo. Vamos chamá-lo de testemunho. Lá vamos nós. Como mencionei antes, esta seção deve ter uma largura máxima específica. Além disso, uma altura específica. Vamos dar uma olhada nisso. largura máxima deve ser 1320 pixels e sua altura deve ser 622 pixels. Vamos em frente e especificar esses valores. Vou definir sua largura máxima para 1320 e sua altura para 622 pixels. Lá vamos nós. Nossa seção está pronta, mas não está centrada. Como podemos resolver esta questão? Você está certo. Posso ir para a seção de espaçamento e clicar neste pequeno botão aqui. Agora, as margens esquerda e direita são definidas como auto e isso significa que nossa seção está centralizada. Perfeito. A última coisa que vou fazer é adicionar algumas margens superiores a esta seção. Vamos verificar nosso projeto por um segundo. Como posso ver aqui, a margem superior deve ser de 200 pixels. Vou dar-lhe uma margem máxima de 200 pixels. Lá vamos nós. Agora é hora de dar a esta seção uma cor de fundo específica. Então eu vou para a seção de fundo e usando este seletor de cores, eu vou escolher escuro neutro. Finalmente, vou adicionar uma imagem a este plano de fundo, assim, e escolher a órbita dos meus ativos. Simplesmente assim. Mas não parece bom. Isso ocorre porque o tamanho está definido como personalizado. Vou mudá-lo para conter, e é isso que estamos procurando. Não precisamos modificar mais nada. Nosso passado está pronto. Agora dentro, vamos criar um contêiner. Enquanto esta seção estiver selecionada, eu vou pressionar o comando K ou controle K, e eu vou procurar um bloco div assim. Este bloco div está agora dentro desta seção. Vou dar a aula de contêineres. Lá vamos nós. Agora, esse contêiner tem uma largura máxima de 1100 pixels como todos os outros contêineres que criamos antes. Ok. Legal. O que precisamos para este contêiner? Primeiro, este recipiente deve ocupar toda a altura desta seção. Portanto, vou dar uma aula de combo. Deixe-me escrever um depoimento. Vou definir sua altura para 100 por cento. Lá vamos nós. Dentro, vou adicionar um título. Então, enquanto este contêiner é selecionado, eu vou pressionar o comando K ou controle K, e vamos procurar o título. Lá vamos nós. O título foi adicionado. Para esta seção, vou escolher H3. Agora, vamos dar a este título uma classe específica. Vou escrever sublinhado depoimento, título sublinhado. Então, vou modificar suas propriedades tipográficas. Primeiro, deixe-me ir em frente e modificar sua cor. Vamos usar luz neutra, este aqui. Além disso, vou modificar o tamanho da fonte para 40 pixels. Se eu passar para o meu arquivo de design aqui, se eu selecionar isso, você pode ver que eu estou usando H3, e H3 é 40 pontos. Aqui, vamos especificar 40 pixels. Não vou tocar na altura da linha. Então, deixe-me ir em frente e copiar e colar este texto específico do meu arquivo de design. Vou copiá-lo, comandar C ou controlar C e colá-lo aqui. Ok. Ótimo. Agora vou precisar de um bloco de texto. Então, mais uma vez, selecione o contêiner, pressione o comando K ou controle K e procure o bloco de texto. Lá vamos nós. Mais uma vez, vou dar-lhe uma aula. Vamos escrever sublinhado depoimento, texto sublinhado. Finalmente, vou mudar sua cor para este secundário. Além disso, vou modificar seu tamanho para 24 pixels e a altura da linha é 160 por cento. Eu também posso modificar seu peso. Vamos dar uma olhada no peso aqui. Sim, vai ser médio, então eu vou mudá-lo para médio. Então, vou copiar e colar esse texto aqui. Vamos copiá-lo e colá-lo aqui. Nossos textos também estão prontos. No entanto, temos um problema. Aqui, como você pode ver, este texto é muito longo, mas quando eu dou uma olhada no meu arquivo de design, você pode ver que eu tenho duas linhas de texto e a largura é definida para 596 pixels, então você sabe o que precisamos fazer. Precisamos mudar sua propriedade de tamanho. Se eu definir uma largura máxima para esta camada de texto, o problema será resolvido. Vou escrever 596 pixels. Lá vamos nós. Temos duas linhas de texto, e eu vou alinhá-lo ao centro. Legal. Antes de começarmos a criar a última seção aqui, a seção cliente, eu vou ir em frente e selecionar este contêiner, e eu vou mudar sua configuração de exibição de bloco para flexbox. Como você pode ver por padrão, sua direção é definida como horizontal. Vou mudá-lo para vertical. Além disso, eu vou alinhá-lo ao centro e vamos colocar lá modificado e o justificado, mas não agora. Então, o que mais precisamos aqui? Como mencionei antes, para essa seção de clientes, precisamos de um bloco div. Então, enquanto este contêiner é selecionado, Eu vou pressionar o comando K ou controle K, e vamos procurar o bloco div. Lá vamos nós. Vou dar-lhe uma aula. Vamos escrever cliente. Este bloco div cliente deve ter mais dois blocos div. Enquanto estiver selecionado, vamos procurar um bloco div. Agora outro bloco div está dentro e eu vou repetir o mesmo processo para adicionar outro bloco div. Temos dois blocos div agora, mas eles estão empilhados um sobre o outro e não é o que queremos. Por quê? Porque aqui, eles devem ser colocados um ao lado do outro. Portanto, eu vou selecionar o pai, que é este bloco div cliente e eu vou mudar sua configuração de exibição de bloco para flexbox. A direção está ajustada para horizontal, isso é exatamente o que precisamos. Vou selecionar o bloco div esquerdo e vou dar-lhe uma aula. Vamos escrever sublinhado do cliente, perfil sublinhado. Para o certo, o próximo bloco div, eu vou dar-lhe uma classe e eu vou escrever sublinhado do cliente, informações de sublinhado. Nossos blocos de div estão prontos. Agora, precisamos adicionar conteúdo aqui. Primeiro, vou selecionar um bloco div de perfil de cliente, e vou para a imagem de fundo. Vamos adicionar uma imagem aqui. Vou escolher uma imagem dos recursos, a imagem do perfil. Lá vamos nós. Mas precisamos modificar suas preferências. Primeiro, vou mudar seu tamanho para cobrir. Legal. Então, eu vou reposicioná-lo para o centro e, também eu vou definir o bloco para não telha. Finalmente, preciso fazer circular. Como podemos fazer isso? Bem, é tão simples. Já te mostrei como podemos criar um círculo e vamos fazer a mesma coisa aqui. Primeiro, precisamos definir uma largura e altura específicas. A largura e a altura devem ser as mesmas quando queremos criar um círculo. Portanto, vou verificar esta largura e altura aqui. É uma imagem de 50 por 50 pixels. Vou dar-lhe uma dimensão de 50 por 50 pixels. Agora, a única coisa que precisamos fazer é ir para as fronteiras e eu vou mudar o raio para 50%. Aí está, temos o nosso círculo. O que mais devemos fazer? Agora é hora de adicionar o conteúdo de informações do cliente aqui. Para este bloco div, vamos precisar de duas camadas de texto. Como você pode ver, temos um nome e, em seguida, o nome da empresa ou o nome do site. Aqui, enquanto este bloco div info do cliente está selecionado, eu vou pressionar o comando K ou controle K, e eu vou procurar o bloco de texto. Lá vamos nós. Este é o nosso primeiro bloco de texto. Vou dar-lhe uma aula. Deixe-me escrever sublinhado de cliente, informações de sublinhado, sublinhado, nome de sublinhado, assim. Então, vamos modificar algumas de suas propriedades. Vamos para a seção de tipografia. Daqui, vou modificar seu tamanho para 17 pixels. Se eu der uma olhada no meu design aqui, seu tamanho é 17 pontos. Em seguida, precisamos modificar sua cor para passar o mouse principal. Não criamos uma amostra global para essas cores primárias, mas tudo bem. Vou fazer isso agora mesmo. Então deixe-me ir em frente e pegar o código de cores daqui. Como você pode ver, o código de cor é A2D6F9. Vou copiá-lo. Então, eu vou para o Webflow e a partir da cor da tipografia aqui, eu vou criar uma nova amostra, e vamos colar o código de cor aqui. Vou nomeá-lo primário barra hover. Temos uma nova amostra global. Agora, vamos copiar e colar o nome do cliente aqui. Vou copiá-lo, e vamos colá-lo bem aqui. Parece bem. Finalmente, precisamos de outra camada de texto. Vou selecionar o bloco div info do cliente, e usando o QuickFind, vou procurar outro bloco de texto. Simplesmente assim. Vamos dar uma aula. Vou escrever sublinhado de cliente, informações de sublinhado, sublinhado, empresa de sublinhado. Então eu vou modificar suas propriedades topográficas. Primeiro, vamos começar com o tamanho da fonte. Seu tamanho de fonte deve ser 13 pontos se eu não estou enganado, deixe-me verificar. Estamos usando o estilo de texto da legenda dois. Aqui, legenda dois é 13 pontos, tudo bem. Vou dar-lhe 13 pixels aqui, e por sua cor, vamos usar uma luz neutra. Legal. Deixe-me ir em frente e copiar e colar o site da empresa, que é booking.com. Vou colá-lo aqui, e estamos quase terminando. Agora, a única coisa que precisamos fazer é alinhar nossos elementos. Vamos começar com o Client_Info. Se eu selecionar este bloco Client_Info Div e eu passar para a seção de layout, você pode ver que a configuração Exibir está definida para bloquear, e não é o que eu quero porque eu quero mudar o alinhamento um pouco. Portanto, eu vou mudá-lo para caixa flexível e eu vou mudar a direção para vertical. A última coisa que vou fazer aqui é mudar a justificativa para o espaço ao redor. Lá vamos nós. A última coisa que precisamos fazer é adicionar algumas margens esquerdas aqui. Deixe-me verificar meu arquivo de design. Se eu selecionar esse grupo e manter pressionada a tecla Alt ou a tecla Option no teclado, você poderá ver que a margem esquerda está definida como 10 pixels. Portanto, enquanto este Client _Info Div Block está selecionado, eu vou dar-lhe uma margem esquerda de 10 pixels. Eu vou selecionar o contêiner, e eu vou mudar a justificativa para o espaço ao redor. Temos o que temos aqui. Vamos dar uma olhada. Temos exatamente o que temos em nosso arquivo de design. E quanto aos Memojis? Como eu disse antes, dentro desta seção, vamos ter quatro Memojis diferentes também. Vou selecionar esta seção, não o contêiner. Eu vou selecionar uma seção, e então eu vou procurar por um bloco de Div e este bloco de Div está agora dentro desta seção. Vamos dar uma aula. Vou escrever Memoji, e este Memoji deve ter uma largura e altura específicas. Vamos dar uma olhada no nosso arquivo de design por um segundo. Se eu selecionar este Memoji, você pode ver que sua largura e altura estão definidas para 150 pixels. Vou definir sua largura para 150 e sua altura para 150 pixels também. Mas e a imagem? Vamos adicionar um elemento de imagem aqui? Não, vamos usar a imagem de fundo, mas antes de adicionar a imagem de fundo, vou dar-lhe uma classe de combinação. Por quê? Porque nós vamos ter quatro Memojis diferentes, e como nós vamos mudar a imagem de fundo aqui, é importante dar a este Memoji Div Block uma classe de combinação. Para o primeiro Memoji eu vou dar a ele uma classe de combinação apenas assim, então vamos dar-lhe uma imagem. Eu vou escolher uma imagem dos meus ativos, esta aqui, e eu vou mudar seu tamanho para conter e deixe-me reposicionar isso para centralizar. Vou colocar o azulejo para não amarrar. Está bem aqui, mas como podemos colocá-lo ali? Como você pode ver agora arquivo de design. Eles são colocados ao lado dos cantos. Como mencionei antes, vou selecionar esta seção, e vou mudar sua posição de estática para relativa. Por quê? Porque mais tarde eu vou mudar a posição destes Memojis para absoluta, e assim eu posso reposicioná-los como eu quiser. Se eu selecionar este Memoji, e se eu mudar sua posição para, digamos absoluta aqui, nada aconteceu ainda porque eu vou mudar sua posição para o canto superior esquerdo. Agora, como você pode ver, já que a posição deste Memoji é relativa à sua seção, como você pode ver aqui. Posso simplesmente modificar sua posição. Deixe-me modificar a posição esquerda e superior. Vou mudá-lo para, digamos, 5 por cento, e para o topo, vou definir para 10 por cento. Agora, vou precisar criar o próximo Memoji, que você possa copiar e colar este Memoji ou duplicá-lo. Vou clicar com o botão direito do mouse no nome deste Memoji, e vou clicar em Duplicar. Foi duplicado, mas agora estão em cima um do outro. Se eu selecionar a camada duplicada, eu posso apenas reposicioná-la, mas antes de fazer isso, eu vou continuar e duplicar essa classe de combinação, exatamente assim. Então vou dar uma nova aula de combo. Vou escrever dois porque este é o nosso segundo Memoji. Agora eu vou reposicioná-lo para a parte inferior esquerda, e eu posso modificar sua posição esquerda e inferior aqui para 5%, e aqui eu vou defini-la para 10 por cento. Tudo bem, legal. Agora é hora de ir para a seção de fundo e modificar a própria imagem. Vou selecionar estes Memoji e agora só precisamos repetir o mesmo processo. Vou duplicar este Memoji, assim mesmo. Vou selecionar o bloco de Div duplicado no navegador, e vou duplicar sua classe de combinação. Vamos mudá-lo para três e deixe-me reposicioná-lo para o canto superior direito. Também vou mudar seu Memoji da seção de fundo para esta. Finalmente, eu vou mudar sua posição para a direita, eu vou defini-la para 5 por cento e o topo, eu vou defini-la para 10. Por último, mas não menos importante, vou duplicá-lo mais uma vez. Vamos selecionar a camada duplicada no navegador e também duplicar sua classe de combinação, e eu vou nomeá-la quatro, então eu vou reposicioná-la para o canto inferior direito. Também vou mudar sua imagem dos ativos para este Memoji. Finalmente, deixe-me modificar suas posições direita e inferior para 5 por cento e 10 por cento respectivamente. Assim, tudo bem, pessoal. Nossa seção de depoimentos também está pronta. Você pode ver como é fácil converter seu design de produto em sites funcionais. A única coisa que importa é que você entenda as estruturas e as propriedades CSS desde que você siga as regras, e você tenha uma estrutura clara em sua mente, tudo é fácil. Vamos recapitular. Para esta seção. Criamos uma seção. Nós demos a ele uma classe de combinação de depoimentos, e também demos a ele uma margem superior de 200 pixels de acordo com nosso arquivo de design. Então nós especificamos uma largura máxima e também uma altura específica para isso, e nós demos a ele uma cor de fundo e uma imagem de fundo. Logo depois disso, criamos um contêiner, e demos a ele as classes de contêiner e testemunho, e dentro adicionamos um título, um bloco de texto e outro bloco de div que inclui dois outros blocos de div. Todos estes Div Block são caixas flexíveis. Alteramos sua configuração de exibição para caixa flexível, a fim de controlar sua direção, seu alinhamento e sua justificativa. Quando a seção do contêiner estava completa, começamos a adicionar os Memojis aqui. Para posicioná-los corretamente, definimos a posição das seções para relativa e dissemos que a posição Memojis é absoluta. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado, e te vejo na próxima. 48. Seção de serviços: Neste vídeo vamos começar a construir a seção de Serviços juntos. Vamos ver como devemos estruturá-lo. Como pode ver aqui, temos outra seção. Primeiro, precisamos criar uma seção e dentro precisamos um contêiner exatamente como o que fizemos aqui para a seção Projetos Recentes, vamos fazer a mesma coisa aqui também. Dentro deste contêiner, vamos ter um título para este título de Nossos Serviços e, em seguida, vamos ter o wrapper de serviços. Vai ser uma grade ou uma flexbox. Vamos com a grade. Dentro deste contêiner de serviços ou digamos, grade de serviços, vamos ter três blocos div diferentes. Aqui temos três cartões diferentes, e cada cartão deve ser criado usando um bloco div. Vejamos este, por exemplo. Isto vai ser um bloco div, e dentro nós vamos ter este ícone, e nós vamos criar este ícone usando um bloco div e um bloco div dentro. Uma vez que nossa seção superior é criada, vamos em frente e criar a seção de conteúdo. Aqui precisamos de um título e uma descrição, e finalmente, precisamos deste botão Saiba mais. Por último, mas não menos importante, vamos duplicar nosso bloco div duas vezes para obter três cartas diferentes. Parece simples, então vamos começar. Primeiro, vou em frente e selecionar meu corpo aqui. Então vou tocar no Comando K ou Controle K e procurar a Seção. Lá vamos nós. Uma nova seção foi adicionada aqui, e eu vou dar-lhe uma classe, a classe de seção. Esta seção não vai ter uma largura ou altura específica; no entanto, eu vou dar-lhe uma margem superior. Vamos dar uma olhada no nosso arquivo de design aqui. Como podem ver, vamos precisar de 200 pixels de margem superior. Vou selecionar esta seção e vou mudar sua margem superior para 200 pixels. Lá vamos nós. Mas não podemos vê-lo agora porque não há nada dentro da nossa seção. Como podemos consertar isso? Primeiro, vou selecionar esta seção e vou pressionar Command K ou Control K e vou adicionar um bloco div, porque como você sabe, vamos precisar de um contêiner. Como você pode ver agora nós temos nossa margem superior de 200 pixels, e enquanto este bloco div é selecionado, eu vou dar a ele a classe container. Lá vamos nós. Agora temos a largura máxima de 1.100 pixels. Isso é exatamente o que precisamos. Para este recipiente, eu vou adicionar uma classe de combinação também. Vou escrever os Serviços, e dentro deste contentor, vamos ter um cabeçalho e o invólucro dos serviços. Enquanto este contêiner estiver selecionado, pressione Command K ou Control K e procure o título. Este título foi adicionado, e eu vou escolher H3 aqui. Deixe-me ir em frente e dar-lhe uma aula. Uma vez que suas propriedades CSS devem ser exatamente as mesmas que o cabeçalho Projetos recentes. Por conseguinte, vou definir também a rubrica Projectos para esta rubrica. Eu vou selecioná-lo e vamos escrever Projects Heading. Lá vamos nós. Então eu vou mudar seu texto para Nossos Serviços. Deixe-me ir em frente e copiá-lo. Legal. Nossa direção está pronta. O que mais precisamos? Precisamos do invólucro dos serviços. Enquanto este contêiner está selecionado, Eu vou pressionar Command K ou Control K e vamos procurar o bloco div. Então este bloco div precisa de uma classe como de costume. Uma vez que vamos alterar a configuração de exibição para grade mais tarde, eu vou nomeá-lo, Serviços sublinhado Grade. Não é uma grade agora, mas depois vamos mudá-la para grade. Esta grade de serviços precisa ter algumas margens superiores. Deixe-me verificar aqui. Se eu selecionar este wrapper de serviços e manter pressionada a tecla Alt ou a tecla Option no meu teclado, você pode ver que vamos precisar de 70 pixels de margem superior. Vou selecionar esta grade de serviços e vou adicionar algumas margens a ela. Vamos defini-la para 70 pixels. Legal. Agora que o nosso bloco div grade de serviços é criado, precisamos de outro bloco div dentro para o nosso cartão de serviço. Portanto, enquanto esta grade de serviço está selecionada, vamos procurar um bloco div, e este bloco div vai ter uma nova classe. Vamos nomeá-lo, Serviço sublinhado cartão. Este cartão vai ter uma largura máxima específica, mas não vamos especificar uma altura específica para isso, vamos definir a altura para auto. Mas se eu selecionar este serviço um cartão aqui, podemos ver que a largura é definida para 340 pixels. Portanto, vamos definir a largura máxima para 340 pixels. - Legal. Este cartão é branco. O que devemos fazer? Sim, você está certo. Precisamos mudar a cor do fundo aqui. Eu vou para a seção de fundo e usando este seletor de cores, eu vou mudar sua cor para branco. Legal. Mas parece muito pequeno. Sim, porque não estabelecemos uma altura específica para isso, e está tudo bem. Assim que adicionarmos mais elementos a este bloco div, sua altura crescerá, então não se preocupe com isso. Uma vez que este cartão de serviço é selecionado, vamos adicionar alguns elementos a ele. Do que precisamos? Precisamos de dois blocos div. Precisamos do bloco div ícone de serviço e o bloco div conteúdo do serviço. Vamos procurar um bloco div. Novamente, vou selecionar o cartão de serviço e procurar outro bloco div. Agora temos dois blocos div que são colocados um em cima do outro. Vou dar-lhes uma aula. Para o primeiro bloco div, para este bloco div superior, Eu vou nomeá-lo, Serviço sublinhado ícone. Para o bloco div inferior, Vou nomeá-lo, Serviço sublinhado sublinhado Conteúdo. O bloco div superior vai ser usado para o nosso ícone e o bloco div inferior vai conter o nosso conteúdo. Vamos começar com o ícone. Vou selecionar o bloco div ícone de serviço, e vamos para o nosso arquivo de design aqui. Se eu selecionar este ícone, podemos ver que temos este círculo e sua largura e altura são definidas para 80 pixels. Portanto, eu vou especificar a largura e altura aqui para 80 pixels assim. Então eu vou modificar a cor de seu plano de fundo. Aqui, precisamos usar azul claro neutro. Vamos modificar a cor do fundo para azul claro neutro, assim. Então precisamos fazer circular. Vou mudar o raio para 50%. Lá vamos nós. Nosso círculo está pronto. Mas e o ícone? Bem, para o ícone, temos duas opções; primeiro, podemos ir em frente e adicionar uma imagem aqui, segundo, podemos adicionar outro bloco div dentro deste bloco div ícone de serviço e colocar nosso ícone lá. A segunda opção é mais flexível em termos de alinhamento, mas vamos em frente e verificar a primeira opção. Vou adicionar uma imagem aqui usando a seção de imagem de fundo e vou escolher este primeiro ícone. Então eu vou mudar sua posição para o centro, e eu vou definir a hora para a hora do amanhecer. Lá vamos nós. Nosso ícone está pronto. Agora precisamos mover um para o próximo bloco div. Mas antes de fazer isso, vamos dar a este ícone de serviço div block algumas margens. Eu vou rolar para cima e eu vou definir sua margem superior para 40 pixels. Vamos dar uma olhada no nosso arquivo de design. Sim, a margem superior vai ser 40 pixels e a margem esquerda vai ser 30 pixels, então eu vou definir sua margem superior para 40, e é margem esquerda para 30 pixels. Mas olha, eu não consegui a margem máxima de 40 pixels. Por que é isso? Isso porque o segundo bloco div, este bloco div de conteúdo de serviço está ocupando o espaço disponível aqui. Portanto, este ícone de serviço não pode ter essa margem superior de 40 pixels, já que não demos uma altura específica para este cartão de serviço. Isso é totalmente bom. Agora vamos passar para o conteúdo do serviço e, mais tarde, obteremos essa margem superior. O que precisamos dentro deste conteúdo de serviço? Vamos dar uma olhada no nosso arquivo de design. Dentro desse bloco div de conteúdo de serviço, vamos ter outro bloco div para colocar essas camadas de texto, e então vamos precisar de um botão de link, um link de texto. Vamos em frente e criar um bloco div. Enquanto este conteúdo de serviço estiver selecionado. Vou apertar “Command K” ou “Control K” e procurar um bloco div. Lá vamos nós. Dentro deste conteúdo de serviço, temos um novo bloco div. Este novo bloco div vai precisar de uma classe, então eu vou para o seletor e vamos adicionar uma nova classe. Vou escrever sublinhado de serviço, sublinhado texto, e dentro precisamos de dois blocos de texto diferentes. Enquanto estiver selecionado, vamos pressionar “Command K” ou “Control K” e procurar o bloco de texto. Lá vamos nós. Este é o primeiro bloco de texto, vou precisar de outro também. Mais uma vez, vou selecionar “Conteúdo do serviço”, apertar “Command K” ou “Control K” e procurar o bloco de texto. Temos dois blocos de texto aqui, mas eles não têm aulas. Então eu vou selecionar o primeiro e eu vou dar-lhe uma aula. Eu posso escrever título sublinhado serviço. No entanto, como este título e a descrição vai ter o mesmo estilo que temos aqui para este cartão de projeto, eu vou dar-lhe a classe que nós criamos para este título. Para sua descrição, deve ser descrição do projeto. Vamos em frente e selecionar o primeiro bloco de texto e vamos escrever o título do projeto, ok, lá está ele e para o próximo, eu vou escrever o projeto e depois procurar a descrição. Aqui está. Tudo bem. Legal. Agora eu vou ir em frente e copiar este texto e colá-lo aqui e da descrição também eu vou copiá-lo, vamos colá-lo aqui mesmo. Logo abaixo deste texto de serviço, vamos precisar de um bloco de links também. No entanto, como você pode ver esta descrição do projeto não está dentro do nosso bloco div de texto de serviço, eu vou arrastá-lo e eu vou certificar-se de que ele está aninhado dentro do bloco div de serviço. Agora vou selecionar o conteúdo do serviço e vou procurar um link de texto. Lá vamos nós. Temos nosso link de texto e não precisamos criar novas propriedades para isso porque temos nosso botão de link aqui. Eu vou escolher isso e eu vou dar a ele a classe botão link. Lá vamos nós. Você pode ver como é benéfico usar as aulas corretamente? Finalmente, vou mudar seu texto para saber mais. Tudo bem legal. Estamos quase terminando. Agora só precisamos alterar algumas propriedades, a fim de tornar nosso cartão maior e modificar o alinhamento. Primeiro, vou selecionar este bloco div de conteúdo de serviço e, como você pode ver, a configuração de exibição está definida para bloquear. Eu vou mudá-lo para flexbox e eu vou mudar a direção para vertical, e eu vou mudar a justificativa para o espaço entre. Então eu vou selecionar o bloco div do cartão de serviço e eu vou repetir a mesma coisa. Vou mudar a configuração de exibição para flexbox e vou mudar a direção para vertical. Agora temos a nossa margem máxima. No entanto, para esta descrição, não temos nenhuma margem inferior. Portanto, eu vou selecionar esta descrição do projeto e eu vou dar-lhe alguma margem inferior. Sua margem inferior é definida como 10 pixels e eu vou dar-lhe uma margem inferior de 40 pixels. Vamos modificar isso. Agora parece muito melhor. Como você pode ver, nosso cartão é exatamente o mesmo que temos aqui em nosso arquivo de design, e isso é exatamente o que estávamos procurando. O que devemos fazer agora? Bem, a parte difícil é feita agora precisamos selecionar nosso cartão de serviço, precisamos duplicá-lo, então eu vou clicar com o botão direito aqui e eu vou apertar “Duplicar” duas vezes. Vou repetir este processo duas vezes. Lá vamos nós. Temos três cartas diferentes. No entanto, eles são empilhados um em cima do outro e temos duas opções; podemos ir com uma flexbox ou com grade. Desde que eu vou manter nosso design consistente, eu vou para a grade porque para esta seção nós usamos uma grade também. Portanto, eu vou selecionar o serviço como bloco div grade e eu vou mudar sua configuração de exibição para grade. - Legal. Sabe o que precisamos fazer? Precisamos remover uma dessas linhas e precisamos adicionar mais uma coluna aqui. Finalmente, vou mudar a diferença de 16 pixels para 40 pixels, exatamente assim. Tudo bem, legal. Nossas cartas estão quase prontas. A única coisa que preciso fazer é modificar esses ícones e o conteúdo. Deixe-me ir em frente e modificar rapidamente este ícone. Se eu selecionar este bloco div ícone de serviço, eu posso ir para a seção de fundo e eu posso escolher outra imagem. Mas algo acontece assim que mudei essa imagem. Como eu não adicionei uma classe de combinação a esta classe base, se eu mudar esse ícone, todos esses ícones serão afetados. Deixa-me mostrar-te o que quero dizer. Lá vamos nós. Isto não é o que queremos. Portanto, o que eu vou fazer, é ir em frente e adicionar uma classe de combinação para este ícone de serviço div bloco. Eu vou escrever 2, e para este, eu vou escrever 3, e para o primeiro vamos escrever 1. Embora o primeiro não seja necessário, vou dar-lhe uma classe de combinação que eu poderia organizar meus elementos facilmente. Tudo bem. Agora eu posso selecionar este ícone de serviço e, em seguida, se eu alterar seu ícone, os outros ícones não serão afetados. Então eu vou escolher o segundo, bom, e para o terceiro, eu vou fazer a mesma coisa e vamos escolher este. Tudo bem. Nossos ícones estão prontos, agora vou mudar o título e a descrição. Permitam-me copiar e colar rapidamente estes textos aqui. Tudo bem, pessoal, isso é tudo por este vídeo, nossa seção de serviços também está pronta. Espero que tenha gostado e te vejo no próximo. 49. Seção de CTA: Ei, neste vídeo vamos criar esta seção CTA. CTA significa que são chamadas para ação, e geralmente pega o endereço de e-mail do usuário ou nome e endereço de e-mail para enviar a ele alguns arquivos ou digamos que algumas notícias ou qualquer informação que o usuário está procurando. Esta seção de chamada à ação tem um formulário. Como você pode ver, este formulário tem um campo de texto e também o botão de assinatura. Vamos ver como devemos estruturar isso. Primeiro, temos uma seção, eu preciso modificar seu nome para a seção CTA, e esta seção, assim como nossa seção de depoimento, tem uma largura específica. Ele não ocupa toda a largura de nossa janela viewport, portanto, vamos definir uma largura específica para aqueles 13 e 20 pixels, como você pode ver aqui. Requer uma cor de fundo, então vamos usar a cor secundária para o fundo aqui. Então, uma vez que nossa seção é criada, precisamos de um contêiner como de costume, e finalmente , dentro deste contêiner, vamos ter um cabeçalho, um bloco de texto, e também um bloco de formulário. Este bloco de formulário vai ter um wrapper de campo de texto e um botão. Nada complicado. Nós só precisamos manter as regras e só precisamos usar flexbox para alinhar esses elementos. Você está pronto? Vamos começar. Primeiro, vou em frente e selecionar meu corpo aqui, e então vou procurar uma seção assim. Deixe-me dar uma aula. Vou dar a aula de seção aqui. Também vou dar a aula de combo, vamos chamá-la de CTA. Como você pode ver, não podemos ver a seção porque não há nada dentro da nossa seção. Primeiro, vou avançar e dar-lhe uma largura máxima de 1.320 pixels e também uma altura específica de 500 pixels. Se eu der uma olhada no meu design, você pode ver que sua altura é de 500 pixels. Eu poderia configurá-lo para auto bem, mas eu prefiro ter uma altura específica aqui. Agora precisamos centralizar nossa seção. Como podemos fazer isso? Você está certo. Eu posso ir para esta seção de espaçamento e eu posso clicar neste botão para centralizar o elemento horizontalmente assim. A próxima coisa que precisamos fazer é mudar a cor do fundo. Se eu passar para a seção de fundo e clicar nesta cor aqui usando este seletor de cores, eu posso usar uma de minhas amostras. Vou usar o secundário. Nossa seção está pronta. Agora dentro, como de costume, vamos precisar de um contêiner. Enquanto esta seção estiver selecionada, vou pressionar a tecla de comando ou a tecla de controle. Vamos procurar um bloco div. Este bloco div não tem nenhuma classe então vamos em frente e dar-lhe a classe container. Legal. Nosso contêiner também está pronto. O que precisamos dentro deste contentor? Vamos precisar de um título, um bloco de texto e um bloco de formulários. Primeiro eu vou dar a este contêiner uma classe de combinação CTA, e então eu vou pressionar a tecla Command ou a tecla Control e olhar para o título. Vamos mudar o tempo de direção para h3, e também vou dar-lhe uma aula. Aqui eu vou escrever sublinhado CTA, cabeçalho sublinhado, e vamos modificar algumas de suas propriedades topográficas. O peso vai ser ousado. No entanto, o tamanho será de 40 pixels. A cor vai ser neutra e escura também. Agora eu vou ir em frente e copiar este texto daqui e colá-lo bem ali. Nossa direção está pronta. Agora precisamos de um bloco de texto. Vamos selecionar nosso contêiner usando a busca rápida. Vou procurar um bloco de texto, e vou dar uma aula a ele. Vamos escrever CTA sublinhado, sublinhado, subtítulo, e eu vou modificar algumas de suas propriedades topográficas. A única coisa que precisamos fazer aqui é mudar o tamanho aqui para 17 pixels. Não precisamos tocar em mais nada. Ótima. Agora deixe-me ir em frente e copiar este texto. Deixe-nos ajudá-lo. Simplesmente assim. Nossas camadas de texto estão prontas. Agora precisamos de um bloco de formulários. Deixe-me selecionar este contêiner. Você pode ir para a seção Adicionar e apenas arrastar e soltar um bloco de formulário aqui, ou recipiente sem fio está selecionado, você pode pressionar a tecla Command ou a tecla Control para abrir a busca rápida e procurar um bloco de formulário. Temos o nosso bloco de formulários. No entanto, temos dois campos de texto, temos dois rótulos de campos de texto, e também temos um botão aqui. Mas para esta seção precisamos apenas de um campo de texto, não precisamos de nenhum rótulo e precisamos modificar um pouco o botão. Vamos em frente e selecionar o rótulo do campo no navegador e removê-lo, pressione a tecla Backspace ou Delete no teclado. Vou remover o campo de texto também. Agora vou remover este rótulo de campo. Não precisamos de nenhum rótulo de campo. Agora eu tenho um campo de texto e um botão Enviar. Primeiro, eu vou selecionar este bloco div formulário, e como você pode ver, sua configuração de exibição está definida para bloquear. Vou mudá-lo para picos de vôo, e agora a direção está ajustada para horizontal, é exatamente o que precisamos. Temos o layout que estamos procurando. No entanto, se você der uma olhada no arquivo de design, você pode ver que temos este texto de espaço reservado e também este ícone. Vamos modificar um pouco nosso campo de texto. Este campo de texto tem uma largura e altura específicas. A largura é 393 pixels e a altura é de 80 pixels. Portanto, vou selecionar este campo de texto e vou mudar sua largura para 393 pixels e sua altura para 80 pixels. Mas, como você pode ver, esse campo de texto por padrão tem algumas margens inferiores. Vou em frente e remover isso. Vamos definir a margem inferior como 0. Agora este campo de texto está alinhado com este botão. Mas e o texto do espaço reservado? Bem, se você se lembrar, se eu clicar duas vezes neste campo de texto aqui, eu posso especificar o texto do espaço reservado. Deixe-me escrever, digite seu e-mail e o tipo de texto vai ser e-mail e vai ser necessário. O nome vai ser e-mail também. Mas como podemos adicionar um ícone aqui? Bem, uma vez que estamos usando um elemento de campo de texto, não podemos simplesmente ir em frente e adicionar um ícone. Portanto, precisamos ser criativos e precisamos usar o que aprendemos até agora para adicionar um ícone aqui. O que proponho é isto. Primeiro, eu vou ir em frente e adicionar um pouco mais de preenchimento à esquerda para este campo de texto. Eu vou mudar seu preenchimento para 70 pixels, e então eu vou modificar sua cor. Como você pode ver aqui, a cor desta camada de texto é neutro escuro. Você se lembra como podemos modificar as propriedades CSS deste imposto lugar detentores? Sim, você está certo. Precisamos selecionar o nosso campo de texto e, em seguida, se nos dirigirmos para o seletor, podemos ir para o estado do titular do lugar. Daqui, posso ajustar a cor. Como você pode ver, diz que a cor do texto já está definida como neutro escuro, mas não está. É só um inseto irritante. Se eu apenas clicar nele e eu escolher esta cor mais uma vez, lá vamos nós. Agora a cor foi aplicada corretamente. A cor está boa agora, mas precisamos de um ícone. Portanto, eu vou criar um bloco div, e eu vou colocar esses campos de texto e um novo bloco div dentro disso, a fim de alinhar tudo perfeitamente. Primeiro, enquanto este formulário estiver selecionado, eu vou pressionar a tecla Command ou a tecla Control, e vamos procurar um bloco div. Então vou dar uma aula a ele. Vamos chamá-lo de CTA, sublinhado, sublinhado, campo de texto, wrapper sublinhado sublinhado. Então eu vou arrastar este campo de texto e soltá-lo dentro deste CTA_ TextField_Wrapper que acabamos de criar e eu vou mover este wrapper para cima, apenas reordená-lo no navegador. Agora, enquanto este novo bloco Div, este wrapper é selecionado, eu vou ir em frente e adicionar um novo bloco Div para o nosso ícone. Então vamos procurar um bloco Div, ótimo, e este bloco Div está dentro deste invólucro. Então deixe-me selecionar este bloco Div e eu vou dar-lhe uma aula. Vou escrever TextField_ Ícone, e este ícone deve ter uma largura e altura específicas. Então, se eu for ao meu arquivo de design e selecionar esse “Ícone”, você pode ver que sua largura e altura estão definidas para 30 pixels. Então eu vou dar a ele a largura e altura específicas. Vou escrever 30 pixels. Lá vamos nós, e como você sabe, precisamos ir para a seção de fundo e precisamos adicionar nosso ícone aqui. Então deixe-me procurar o ícone do correio, tudo bem, legal. Nosso ícone está aqui. Tudo parece ótimo, exceto sua posição. Então, como podemos posicionar este ícone aqui? Bem, você se lembra quando falamos sobre a propriedade position aqui, eu vou definir a posição deste bloco Div como absoluto, assim e então eu vou selecionar seu pai, que é este CTA_TextField_Wrapper e eu sou vai definir a sua posição como relativa. Ok? Agora a posição deste campo de texto ícone Div bloco é relativa ao seu pai. Como você pode ver aqui, temos CTA_TextField_Wrapper e eu posso apenas reposicioná-lo no canto superior esquerdo. Então eu vou apenas aumentar a posição de topo para cerca de 30 por cento. Nós só precisamos olhar isso, e então eu vou modificar a posição esquerda para cerca de 8%. Está bem, Legal. Posso movê-lo um pouco para baixo. Posso aumentar a margem máxima para, digamos, 32 por cento. Muito bem, o nosso campo de texto está quase pronto. Mas e a sua cor? Agora, por padrão, sua cor de fundo é branca, mas nosso campo de texto não é branco. Nosso campo de texto está usando a cor clara neutra. Então eu vou selecionar este campo de texto e eu vou modificar sua cor para luz neutra, e agora podemos passar para a próxima parte que é botão. Vai ser tão simples porque já criamos nosso botão principal, se você se lembra, para a seção de heróis e para a navegação. Então o que eu vou fazer é selecionar este botão aqui, e eu vou dar-lhe uma classe, Botão Primário. Lá vamos nós. Temos a nossa ciência, a única coisa que precisamos fazer é ajustar o seu preenchimento um pouco. Ok, então primeiro eu vou dar a ele uma classe de combinação, desta forma eu posso ter certeza de que as mudanças que eu faço aqui não serão aplicadas a outros botões aqui e então eu vou ajustar seu preenchimento. Então deixe-me rolar para cima. Como você pode ver por padrão, ele tem um preenchimento esquerdo e direito de 30 pixels. Vamos dar uma olhada no nosso arquivo de design. Se eu selecionar esta camada de texto “Assinar”, você pode ver que é preenchimento esquerdo e direito são aproximadamente 60 pixels. Então eu vou dar a ele um preenchimento esquerdo e direito de 60 pixels. Se eu manter pressionada a tecla Option ou a tecla Alt no meu teclado, eu posso apenas modificar o preenchimento esquerdo e direito simultaneamente, apenas assim, o preenchimento superior e inferior ficam bem. Agora eu preciso de alguma margem esquerda também. Aqui vou precisar de uma margem esquerda de 20 pixels. Então, enquanto este botão estiver selecionado, vou dar-lhe uma margem esquerda de 20 pixels. Tudo bem, eu vou selecionar este “Formulário” e como você pode ver, este Formulário ocupa toda a largura de seu pai, que é este Bloco de Formulários. Primeiro, eu vou selecionar este “Formulário” e eu vou mudar a justificativa para centralizar e então eu vou selecionar este “Form Block” e eu vou dar-lhe uma classe, Form Block. Deixe-me alterar sua configuração de exibição para Flexbox e eu vou mudar a justify para centralizar. Agora vou selecionar meu “Contêiner”, como você pode ver, a configuração de exibição está definida para bloquear, vou alterá-la para Flexbox e deixar-me mudar a direção para vertical. Eu vou mudar a justificativa para centralizar também, mas como você pode ver, não ocupa toda a altura desta seção. Por quê? Porque sua altura está definida como auto. Portanto, sua altura é determinada com base na altura de seus filhos. Eles não ocupam tanto espaço dentro. Então o que eu vou fazer é selecionar este “Container” e definir sua altura para 100 por cento. Agora ele ocupa toda a altura desta seção, e então eu vou mudar o alinhamento para o centro também. Tudo bem, agora eu vou selecionar meu título, e este cabeçalho requer alguma margem inferior. Então deixe-me ir ao meu arquivo de design. Se eu selecionar este cabeçalho, eu posso ver que eu preciso obter 20 pixels margem inferior. Então, enquanto estiver selecionado, vou substituir sua margem inferior para 20 pixels, e também vou fazer a mesma coisa para este bloco de formulário. Se eu selecionar este Bloco de Formulários, você pode ver que eu não tenho nenhuma margem superior. Vou para o meu arquivo Design e vou selecionar este campo de texto. Você pode ver que eu preciso obter uma margem superior de 50 pixels. Então eu vou dar 50 pixels aqui. Tudo bem. Agora deixe-me alterar o texto deste botão de Enviar para Assinar, e lá vamos nós. Nossa seção CTA também está pronta. Mas agora eu gostaria que você prestasse atenção aos outros elementos dentro deste bloco de formulário, porque além deste campo de texto e botão, nós temos mais dois blocos Div. Nós já falamos sobre eles em nossos vídeos anteriores, mas eu só quero mencioná-los mais uma vez no caso de você esquecê-los. Então aqui temos um bloco Div Mensagem de Sucesso que não é visível. O motivo é, por padrão, sua configuração de exibição está definida como nenhum. Também temos esta Mensagem de Erro. Por padrão, sua configuração de exibição é definida como nenhuma e não podemos modificar isso. Por quê? Porque uma vez que o usuário clicar neste botão Assinar, ele ou ela receberá uma mensagem de sucesso ou uma mensagem de erro. Se tudo correr bem, não há problema de conexão com a internet, ele ou ela verá a mensagem de sucesso. Caso contrário, eles verão a mensagem de erro. Mas podemos mudar o design dessas mensagens? Claro que podemos. Bem, nesse caso, precisamos selecionar o nosso Bloco de Formulários, em seguida, se eu clicar no ícone de configurações aqui, você pode ver que diz Mostrar Estado. Normal, sucesso, erro. Se eu for para o sucesso aqui, posso começar a modificar sua aparência. Se eu errar, posso mudar sua aparência também. Então, por exemplo aqui, quando eu vou para o erro, você pode ver que o alinhamento é errado. Então vamos em frente e consertar isso. Enquanto estamos no estado de erro, vou em frente e selecionar este bloco de formulário. Este bloco de formulário contém este bloco Form Div, a mensagem de sucesso e a mensagem de erro e sua direção de layout, como você pode ver, é definido como horizontal. Quando estamos no estado normal, isso não faz diferença, mas quando estamos no estado de erro, isso faz a diferença. Vou mudar a direção para vertical, e agora parece muito melhor. Então, se eu for para o estado normal, tudo ficará bem. Se eu for para o sucesso, parece ótimo, se eu for para o erro, tudo bem. Claro, você pode ir em frente e modificar o conteúdo aqui, mas este não é o nosso objetivo agora. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado. Vejo você no próximo vídeo. 50. Rodapé: Neste vídeo, vamos criar este rodapé na parte inferior da nossa página inicial. Este rodapé vai ser colocado em todas as páginas do nosso site. Como você pode ver aqui na página Projeto, temos o rodapé também, na página Contato também. Como vamos construir isso? Vamos analisá-lo e ver como ele está estruturado. Como podem ver, temos uma secção que vai ocupar toda a largura do nosso relatório. Como de costume, precisamos criar uma seção e, em seguida, dentro, vamos precisar de um contêiner. Lá vamos nós. Dentro deste contêiner, teremos dois blocos div. Um para o conteúdo no lado esquerdo que irá conter o logotipo e o endereço e outro para os links no lado direito. Na verdade, para os links, eu acho que seria muito melhor criar uma grade porque aqui temos um layout bidimensional. Faria muito mais sentido criar uma grade para esses links. Sem mais delongas, vamos começar. Primeiro, vou selecionar meu corpo e vou tocar Comando K ou Controle K. Vamos procurar a seção. Então eu vou dar a esta seção uma classe como de costume seção. Legal e não podemos ver nada porque não há nada lá dentro. Então, enquanto esta seção estiver selecionada, vamos procurar um bloco div. Vou adicionar um bloco div lá dentro. Vamos dar a classe de contêiner porque vai ser o nosso contêiner. - Legal. Nossa seção está pronta, nosso recipiente dentro está pronto e enquanto este recipiente é selecionado, eu vou dar-lhe a classe combo rodapé também. Lá vamos nós. Como eu mencionei antes, para este rodapé, vamos criar um bloco div no lado esquerdo e uma grade no lado direito. No total, vamos criar duas esferas de blocos div. Enquanto este recipiente está selecionado, vamos procurar bloco div. Vou adicionar outro bloco div, então certifique-se de que seu contêiner está selecionado. Em seguida, usando a Busca rápida, você pode adicionar um bloco div. Lá vamos nós. Agora temos dois blocos div. Vou selecionar o top e vou dar uma aula a ele. Vamos escrever rodapé__Content. Vou selecionar o segundo e vou dar-lhe uma aula. Vamos escrever Footer__Links. Legal. Então eu vou selecionar este contêiner e eu vou mudar a configuração de exibição de bloco para Flexbox, por quê? Porque eu vou alinhar estes dois blocos div horizontalmente, não verticalmente. Portanto, vou alterá-lo para Flexbox. Lá vamos nós. A direção é ajustada para horizontal. A única coisa que eu preciso fazer aqui é mudar a justificativa para o espaço entre, exatamente assim, porque queremos que esses blocos de div toquem as bordas deste recipiente. Vamos dar uma olhada no nosso arquivo de design. Se eu selecionar este grupo aqui no lado esquerdo, você pode ver que esta caixa de conteúdo, este bloco div, vai ter uma largura específica de 260 pixels. O que eu vou fazer é selecionar este conteúdo de rodapé de bloco div particular, e eu vou dar-lhe uma largura máxima de 260 pixels. Então, dentro, vou adicionar mais um bloco div para nosso logotipo e um bloco de texto para o endereço. Enquanto estiver selecionado, vamos pressionar Command K ou Control K e procurar o bloco div. Vou dar uma aula a este bloco de div. Vamos escrever rodapé__Content__Logo. Então, se eu passar para a seção de fundo aqui, eu posso adicionar uma imagem. A partir dos ativos, eu vou escolher este logotipo círculo e eu vou mudar o tamanho para conter. Deixe-me reposicionar isso para o centro e não azulejo. Deixe-me dar uma olhada no meu projeto. Se eu selecionar esse logotipo, sua largura será de aproximadamente 100 pixels e sua altura será de 30 pixels. Enquanto este bloco div do logotipo do conteúdo do rodapé é selecionado, eu vou definir uma largura específica, 100 pixels, e sua altura vai ser de 30 pixels, mas e sobre o endereço? Eu vou selecionar este bloco div conteúdo rodapé e eu vou adicionar um bloco de texto aqui exatamente assim. Então eu vou ter que dar uma aula a ele. Vamos chamá-lo Rodapé __Content__Endereço. Vamos em frente e modificar algumas de suas propriedades tipográficas. O peso parece bom. Vou mudar o tamanho para 17 pixels. Então eu vou mudar a cor para meio neutro e a altura da linha para 150 por cento. Finalmente, vou copiar este endereço e vamos colá-lo aqui. Vamos ver o que temos aqui. Se eu selecionar esse conteúdo de rodapé, você pode ver que a configuração de exibição está definida para bloquear e parece bem agora. No entanto, mais tarde, quando queremos tornar nosso site responsivo, seria problemático porque, por exemplo, no retrato móvel ou paisagem móvel, talvez precisemos mudar o alinhamento desses dois elementos aqui. Portanto, agora eu vou mudá-lo para Flexbox e eu vou mudar a direção para vertical. Vou selecionar este logotipo e precisamos dar alguma margem inferior. Deixe-me selecionar este logotipo aqui e sua margem inferior será de 30 pixels. Portanto, aqui vou dar-lhe uma margem inferior de 30 pixels. - Legal. Nosso conteúdo de rodapé está pronto. Agora é hora de passar para a próxima parte, que é links de rodapé. Se eu selecionar esses links de rodapé e apertar Command K ou Control K, posso procurar um link de texto. Então eu posso dar uma aula. Vamos escrever Footer__Link e eu vou modificar suas propriedades tipográficas. Primeiro de tudo, deixe-me aumentar seu tamanho de fonte para 17 pixels e sua cor será meio neutro. Finalmente, vou definir a declaração para nenhuma. Este é basicamente o nosso estilo aqui. Então eu vou ir em frente e copiar este texto aqui. O primeiro vai ser o time. - Legal. Agora eu vou duplicá-lo cinco vezes para obter seis links diferentes. Eu posso simplesmente copiá-lo, Comando C ou Controle C e colá-lo cinco vezes usando Comando V ou Controle V, exatamente assim. Tenho seis ligações diferentes aqui. Agora eu vou apenas ir em frente e copiar e colar esses nomes um por um. Nossos seis links estão prontos. Mas uma vez que a configuração de exibição deste rodapé links está definida para bloquear, você pode ver que eles estão sentados um ao lado do outro e isso não é o que queremos. Como eu mencionei antes, vamos mudá-lo para uma grade. Vamos acertar a grelha. Teremos três colunas e duas filas. Portanto, vou adicionar mais uma coluna aqui. - Legal. Eu vou bater “Feito”. Nossa grade também está pronta. No entanto, como podem ver, não temos nenhuma margem inferior. Agora nosso contêiner está tocando a borda inferior da nossa tela. Não é o que queremos. Vamos em frente e selecionar este contêiner aqui em nosso arquivo de design. Vou verificar a margem inferior. Está definido para 100 pixels. O que devemos fazer? Se eu ir em frente e selecionar este contêiner e tentar adicionar algumas margens inferiores, ele não funciona. Portanto, eu vou selecionar nossa seção e eu vou dar-lhe um preenchimento inferior em vez disso. Aqui, eu vou definir o preenchimento inferior para 100 pixels. Lá vamos nós. Temos o que queríamos, mas olha o que acontece. Como você pode ver, assim que eu adicionei algum preenchimento para esta seção, o preenchimento desta seção foi alterado também. Por que é isso? A razão é que não adicionamos uma classe de combinação a esta seção. Como você pode ver, não temos nenhuma classe de combinação e esse preenchimento inferior foi adicionado a todas as seções. Todas as seções têm este preenchimento inferior extra e não é o que queremos. Como podemos consertar isso? Bem, eu vou apertar Command Z ou Control para remover este preenchimento, enquanto esta seção está selecionada, enquanto nossa seção de rodapé está selecionada, eu vou dar-lhe uma classe de combinação chamada rodapé. Agora eu posso facilmente adicionar esse preenchimento extra sem afetar outras seções. Vou configurá-lo para 100 pixels. Lá vamos nós. Agora parece incrível. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 51. CMe conteúdo dinâmico: Ei, neste vídeo vamos falar sobre CMS e Conteúdo Dinâmico. Quando se trata de desenvolvimento web, temos dois tipos de páginas web, temos páginas estáticas e dinâmicas. Qual é a diferença entre as páginas estáticas e dinâmicas? Bem, estático significa fixo, e dinâmico significa algo que é mais funcional e muda com base na ação do usuário. Se você se lembra, eu já disse que vamos criar duas páginas estáticas e uma página dinâmica para esses projetos. Deixa-me dizer-te o que significa. Aqui está a nossa página inicial e criamos todos os elementos no Webflow. Mas esta é uma página estática agora. Por quê? Porque o conteúdo desta página não vai mudar com frequência. A imagem vai ser corrigida. Esses logotipos vão ser consertados. Este depoimento vai ser corrigido e assim por diante, então é por isso que é uma página estática. Mas às vezes você pode precisar criar algumas páginas dinâmicas. Bem, deixe-me dar-lhe um bom exemplo. Vamos supor que você queira criar um blog. Para um blog, você geralmente tem centenas ou milhares de postagens diferentes. Portanto, você precisa criar páginas dinâmicas. Bem, páginas dinâmicas têm conteúdo dinâmico, isso significa que podemos criar a página uma vez, e então podemos apenas modificar o conteúdo de novo e de novo e de novo, dependendo das ações do usuário. Para um blog, podemos criar uma página de postagem de blog uma vez com um layout específico e, em seguida, apenas modificar o conteúdo de novo e de novo e de novo, é por isso que precisamos usar um CMS. Neste projeto, vamos criar uma página dinâmica para nossos projetos. Como você pode ver aqui em nossa página inicial, temos três projetos diferentes e diz projetos recentes. Mas e se esta agência criar mais projetos no futuro e eles quiserem apresentá-los aqui, eles devem entrar em contato com você como desenvolvedor web ou web designer e pedir que você modifique o conteúdo? Bem, a resposta é não, porque esta não é uma maneira eficiente. Neste caso, você pode criar uma página dinâmica, como você pode ver aqui, temos esta página do projeto e ele exibe os detalhes de cada projeto. Temos o subtítulo, temos o título, temos a data de conclusão. Temos algumas informações sobre o projeto, e então temos esta seção de outros projetos. Pode ser muito difícil criar algumas páginas estáticas se você quiser alterar o conteúdo com frequência. Quando você deve usar uma página estática e quando você deve usar uma página dinâmica? Bem, se você quiser criar apenas uma página de destino com algumas informações ou conteúdo, você pode ir com páginas estáticas porque elas são muito mais fáceis de criar e não são demoradas. No entanto, se você ou seu cliente quiser modificar o conteúdo com frequência, ou digamos, adicionar algum novo conteúdo ao site, é melhor criar páginas dinâmicas. Aqui para este projeto, vamos criar uma página dinâmica. Como você pode ver aqui, a página do projeto e esses projetos serão alterados dinamicamente. Mais tarde, se o cliente quiser adicionar mais um projeto, o projeto será automaticamente adicionado a esta seção de projetos recentes. Você não precisa ir em frente e criar manualmente uma página de projeto separada para isso, porque criamos uma página de projeto uma vez e se o cliente adicionar mais conteúdo, o conteúdo desta página será alterado de acordo. O que precisamos para criar páginas dinâmicas? Bem, para criar páginas dinâmicas, precisamos de conteúdo dinâmico e precisamos armazenar nosso conteúdo em algum lugar. Como podemos fazer isso? Bem, podemos usar Workflow, CMS. Deixe-me ir para Workflow, e se eu for para a seção CMS aqui, podemos criar uma coleção CMS. Bem, o que significa CMS? CMS significa Content Management System e permite que você armazene algum conteúdo, em seguida, seu site pode referenciar esses conteúdos novamente e novamente e novamente. Uma vez que você faça algumas alterações nesses conteúdos, todas as páginas dinâmicas serão atualizadas imediatamente. É tão benéfico usar coleções CMS se você quiser atualizar o conteúdo com frequência. A primeira coisa que precisamos fazer é criar uma coleção CMS. Para fazer isso, você precisa clicar neste ícone azul no canto superior direito, lá vamos nós. Aqui podemos criar uma nova coleção. À primeira vista, pode parecer complicado, mas não se preocupe, é muito simples. Bem no topo, temos alguns modelos de coleção. Temos posts de blog, autores, categorias, projetos, clientes, etc Mas vamos criar uma coleção a partir do zero, porque eu vou mostrar como você pode criar uma coleção passo a passo. Uma coleção nos permite criar uma estrutura para o nosso conteúdo. Se temos alguns projetos, digamos aqui, cada projeto tem algum conteúdo. Temos uma imagem, temos o nome deste projeto, temos o subtítulo. Então, na página do projeto aqui, temos a data de conclusão e temos essa informação aqui. Estes serão os nossos campos de colecção. Cada coleção tem alguns campos, mas primeiro, precisamos de um nome de coleção. Vamos chamá-lo de projetos porque vamos criar uma conexão para nossos projetos aqui. O Webflow cria automaticamente este URL de coleção para nós. Você não precisa se preocupar com isso por enquanto. Falaremos sobre isso mais tarde. Como você pode ver, diz a página do projeto. Depois de criar uma coleção, Webflow cria automaticamente uma página separada para a sua coleção, uma página para o nosso projeto aqui. Vamos para os campos de coleção, aqui é onde precisamos adicionar alguns campos. O que precisamos para o nosso projeto? Bem, obviamente cada projeto tem um nome, e lembre-se que cada campo tem um tipo específico, como você pode ver aqui, ele diz texto simples, isso é porque nós temos um nome. Então temos o slug, este é apenas o URL que o Webflow cria automaticamente para nós, então não precisamos mudar isso. Então podemos adicionar alguns campos personalizados, se eu clicar neste Adicionar novo campo aqui, aqui temos tipos diferentes, temos textos simples. Assim que eu passar o mouse sobre esses tipos de campo, você pode ver no lado direito, nós obtemos algumas informações. Você pode ir em frente e lê-los um por um se você quiser aprender mais sobre eles. Mas deixe-me ir em frente e explicá-los rapidamente para você. Bem, o texto simples é apenas um texto simples ou conteúdo de texto básico. Então temos rich text, bem, o rich text é para conteúdo de formato longo. Digamos que você queira ter um parágrafo, depois um título, depois um vídeo ou uma imagem, nesse caso, você pode usar um rich text. Então temos a imagem. Bem, você pode usar isso para uma imagem. Então temos multi-imagem, se você tiver mais imagens, você pode usar esta multi-imagem. Em seguida, temos link de vídeo, link, e-mail, número de telefone , data, switch, cor, opção , arquivo e referência e multi-referência. Estas duas últimas opções são avançadas. Nós não vamos falar sobre eles agora, mas por enquanto, nós só precisamos ir em frente e criar nossos campos personalizados usando esses tipos simples. Temos o nome aqui. O que mais precisamos? Deixe-me ir em frente e verificar o meu arquivo de design aqui. Aqui temos uma imagem, então obviamente precisamos de uma imagem. Vamos em frente e escolher Imagem. Então precisamos de um rótulo. Vou escrever “Project Image”. Podemos adicionar um texto de Ajuda aqui ou não. Se adicionarmos este texto de Ajuda mais tarde, se um colaborador quiser modificar o conteúdo, ele saberá o que é esse campo, mas não se preocupe com isso agora. Em seguida, podemos marcar esta caixa de seleção, ele diz que este campo é obrigatório. Eu vou verificar isso porque nós não podemos criar um projeto sem uma imagem de projeto, então eu vou verificá-lo, em seguida, salvar campo, lá vamos nós. Nossa imagem do projeto está pronta. Qual seria o próximo campo? Deixe-me ir em frente e verificar. Aqui temos este subtítulo e vai ser o nosso tipo de projeto. Se eu for para a página do projeto aqui, você pode ver que logo abaixo do nome do projeto temos o tipo de projeto, UI Design e App Development. Portanto, aqui estou indo para ir em frente e adicionar um novo campo. Este novo campo vai ser opção porque eu vou criar algumas opções e mais tarde quando eu quiser criar alguns itens de coleção, eu posso escolher entre essas opções. Deixa-me mostrar-te como funciona. Esta agência de design tem alguns serviços específicos. Por exemplo, design de interface do usuário e desenvolvimento de aplicativos, desenvolvimento web, design de experiência do usuário. Nós já sabemos sobre os serviços, é por isso que podemos criar algumas opções padrão, então quando queremos criar alguns projetos ou digamos alguns itens de coleção, podemos simplesmente escolher entre essas opções. Deixe-me ir em frente e escolher a opção aqui. Então eu vou dar-lhe um rótulo, vamos escrever, Project Type. Aqui, usando este botão verde, posso adicionar algumas opções. Permitam-me acrescentar algumas opções aqui. Vou escrever design de interface do usuário e desenvolvimento de aplicativos, vou pressionar Enter para salvar. Então eu vou criar outra opção. Vamos escrever desenvolvimento web. Vou pressionar Enter, vou adicionar outra opção. Vamos escrever o design da experiência do usuário. Pressione “Enter”. O próximo será design de interface do usuário, e o próximo será apenas desenvolvimento de aplicativos. O último será o design UX da interface do usuário. Muito bem, as nossas opções estão prontas. Este campo também é obrigatório porque não podemos criar um item de coleção sem escolher o tipo de projeto, então ele será obrigatório. Vou tocar em “Salvar Campo”. Precisamos de mais dois campos. Precisamos da data de conclusão. Como você pode ver aqui na página do projeto, temos esta data de conclusão. Deixe-me ir em frente e criar um novo campo e desta vez eu vou escolher data e hora. Vou escrever a data de conclusão, e aqui temos duas caixas de seleção. O primeiro diz Incluir o selecionador de tempo. Vou verificar isso. Como você pode ver, quando crio esses campos no lado direito, posso visualizar meus campos personalizados. Aqui eu tenho imagem de projeto, eu tenho tipo de projeto, e eu tenho data de conclusão e vai ser necessário. Então eu vou apertar “Save Field”. Por último, mas não menos importante, vou criar um campo para os detalhes do projeto aqui, para esses parágrafos. Deixe-me ir em frente e criar um novo campo. Desta vez vou escolher um Rich Text. Por quê? Porque mais tarde o cliente pode facilmente adicionar algumas imagens ou vídeos sem a minha ajuda. Vai ser tão útil. Vou escolher “Rich text” e vou chamá-lo de detalhes do projeto. Aqui podemos especificar alguma contagem mínima de caracteres ou contagem máxima de caracteres. É opcional. Eu vou deixá-la. Vou marcar esta caixa de seleção e apertar “Salvar campo”. Nossos campos estão prontos. Temos o Nome, temos a Lesma. Estas são as informações básicas e, em seguida, temos alguns campos personalizados. Temos Imagem do projeto, Tipo de projeto, Data de conclusão, Detalhes do projeto. Uma vez que adicionamos nossos campos, no lado direito podemos visualizar nossos campos. Aqui temos Nome, Slug, estas são as informações básicas. Em seguida, temos campos personalizados, imagem do projeto, tipo de projeto. Temos data de conclusão e detalhes do projeto. Se tudo parecer bem, você pode apertar o botão “Criar coleção” e lá vamos nós. Criamos com sucesso nossa coleção CMS e no lado esquerdo você pode ver que diz Projetos. Esta é a nossa coleção CMS. Se eu clicar neste Projectos, no lado direito, posso criar alguns itens de colecção. É assim que o CMS funciona. É assim que podemos criar uma estrutura para o nosso conteúdo. Criamos algumas coleções com alguns campos personalizados e, em seguida, criamos alguns itens para essa coleção específica. Mais tarde, podemos usar essas coleções e itens em nosso projeto e design em torno de nossos conteúdos dinâmicos, digamos. Aqui temos opções diferentes. Podemos adicionar alguns itens fictícios. Se eu clicar em Adicionar cinco itens, Webflow cria alguns itens aleatórios com conteúdo aleatório para mim. É uma boa opção, especialmente se você não tiver o conteúdo ou o conteúdo ainda não estiver pronto. No entanto, já que temos o conteúdo, vou seguir em frente e apertar o botão “Novo Projeto” aqui. Por que diz “novo projeto “? Como é que ele sabe que isto vai ser um projecto? Porque nós nomeamos nossa coleção Projetos e Webflow automaticamente usa esse nome e torná-lo singular aqui, e ele diz Novo Projeto. Se eu criar uma nova coleção e eu chamá-la de membros, aqui você verá um novo membro. Vou tocar “Novo Projeto” e lá vamos nós. Temos os nossos campos aqui. Primeiro, precisamos especificar o nome. Vou escrever “Simplifique”. Este é o nosso primeiro projeto fictício, e como podem ver, esta lesma foi criada automaticamente. Então aqui precisamos fazer upload da imagem do nosso projeto. Se eu clicar nele, posso escolher a imagem do meu computador. Vou escolher a primeira imagem. Você tem essas imagens na pasta do ativo que você baixou antes. Agora, vou selecionar o tipo de projeto usando essas opções. Como você pode ver, estas são as opções que já criamos. Vou escolher “Design de interface do usuário e desenvolvimento de aplicativos”, e então vou precisar de uma data de conclusão. Aqui usando este seletor de data, eu posso simplesmente escolher minha data e hora. Deixe-me ir em frente e escolher uma data específica. Eu vou escolher 1º de junho e você precisa especificar o horário também, mas eu vou deixá-lo já que ele vai me dar um tempo padrão. Não é importante, não vamos mostrar isso. Mas se você quiser exibir desta vez, você pode especificá-lo aqui também. Então aqui eu vou apenas adicionar um texto fictício. Eu já preparei um texto. Eu só vou ir em frente e copiá-lo e colá-lo. Você também pode usar esse texto aqui a partir do arquivo de design. Você pode copiar e colar e aqui diz simplificar como blá, blá, blá. Desta forma, posso certificar-me de que estes parágrafos estão relacionados com estes projectos. Agora, deixe-me apertar o botão “Criar”. Nosso primeiro item de coleção está pronto e diz encenado para publicação. Ainda não foi publicado porque não usamos isso antes. Mas agora vou em frente e criar mais cinco itens de coleção. Vou criar mais cinco projetos. Se você tiver tantos projetos diferentes para criar, também poderá usar a opção de importação. Se eu clicar neste botão Importar aqui, posso arrastar e soltar um arquivo CSV aqui e em seguida, o Webflow criará todos os itens para mim automaticamente. Mas vou em frente e criar manualmente esses projetos. Deixe-me ir em frente e criar este novo projeto. Vou chamá-lo de Dashcoin. Para a imagem, deixe-me escolher a imagem da minha pasta de seção Projeto, a segunda e, em seguida, o tipo de projeto será desenvolvimento Web. Agora vou especificar a data de conclusão para outra coisa. Deixe-me escolher 17 de junho e aqui vou adicionar os detalhes. Deixe-me apenas colar os textos anteriores aqui e apenas mudar a primeira palavra que pudemos reconhecer que este detalhe está relacionado com este projeto. Vou copiar este nome Dashcoin e vou colá-lo aqui em vez de simplificar. Deixe-me copiar este detalhe do projeto porque vamos precisar disso. Vou criá-lo e vou repetir o mesmo processo mais quatro vezes. Você pode pular esta parte ou você pode simplesmente ir em frente e criar esses projetos um por um comigo. Vamos nomear o terceiro projeto Vectorify. Então eu vou precisar de uma imagem, a terceira imagem e o tipo de projeto vai ser o design da experiência do usuário. A data de conclusão vai ser outra coisa, deixe-me escolher 23 de junho. - Legal. Vou precisar de detalhes do projeto. Vou colar os detalhes do projeto anterior. Deixe-me apenas mudar a primeira palavra aqui, apenas assim. Deixe-me criar isso. Vou em frente e criar mais três projetos. Este será chamado de órbita, e uma imagem de projeto será a quarta. O tipo de projeto será design de interface do usuário e uma data de conclusão. Deixe-me configurá-lo para outra coisa, talvez 1 de julho, e eu vou precisar de detalhes do projeto, então deixe-me colá-lo aqui e eu vou mudar a primeira palavra para Orbit. - Legal. Eu vou criar isso. Então eu vou criar mais dois projetos. Vai se chamar “Purificar”. Deixe-me escolher sua imagem. Vai ser a quinta imagem. O tipo de projeto será o design UX da interface do usuário e a data de conclusão eu vou escolher 5 de julho. Os detalhes serão os mesmos. Deixe-me mudar a primeira palavra para Purificar. Legal, isso cria. Por último, mas não menos importante, vou em frente e criar o último projeto, que será chamado CryptoPie. Deixe-me escolher a imagem do projeto. Vai ser a última imagem. O tipo de projeto será o desenvolvimento de aplicativos. A data de conclusão vai ser digamos 9 de julho e os detalhes aqui, eu vou modificar a primeira palavra para Crypto Pie. - Legal. Nossos itens de coleção estão prontos e podemos começar a usá-los. Como podemos usar nossa coleção em nossos itens de coleção? Bem, podemos usar uma lista de coleção e a página de coleção que o Webflow criou automaticamente para nós. Assim que criamos esta coleção, Webflow criou uma página específica para o nosso projeto. Se eu for para as páginas aqui, você pode ver que temos uma página estática que é chamada Início. Em seguida, temos duas páginas de utilitários, estas são criadas por padrão. Se você passar para as páginas da coleção CMS, você pode ver que o Webflow criou o modelo deste projeto para nós. Se eu clicar nisso, não há nada lá e está tudo bem porque nós não projetamos isso. O que devemos colocar aqui? Bem, precisamos projetar nossa página do projeto aqui. Uma vez que esta página do projeto vai ser uma página dinâmica, precisamos projetá-la aqui, dentro do modelo deste projeto, e então o conteúdo desta página será alterado para cada item da coleção. Como você pode ver no topo, nós temos esta opção de item, se eu clicar sobre isso, você pode ver que nós temos todos os nossos itens, mas este será o tópico da nossa próxima lição. Por enquanto, vou mostrar-lhe como você pode usar uma lista de coleção. Deixe-me ir às páginas e eu vou para a página inicial. Se eu rolar para baixo aqui, como eu mencionei antes, esta página é estática e esses conteúdos também são estáticos, mas agora é hora de substituí-los por conteúdo dinâmico. Como podemos fazer isso? Como mencionei antes, precisamos de uma lista de coleta. Deixe-me abrir esta seção aqui no navegador e, em seguida, temos este contêiner e dentro temos este Embrulho de Projetos e Cabeçalho de Projetos. Eu vou para a seção Adicionar, e se eu rolar para baixo abaixo da seção CMS, nós temos esta lista de coleção. Se eu arrastar e soltá-lo dentro desta seção aqui, podemos ver que vamos obter este wrapper lista de coleção, por padrão ele tem três itens diferentes, e ele diz duplo clique para se conectar a uma coleção. Agora, precisamos conectar este wrapper de lista de coleção para a coleção que acabamos de criar para a coleção do projeto. Se você apenas clicar duas vezes sobre ele, aqui você terá acesso a essas configurações de lista de coleção, e a partir do código-fonte, você pode escolher projetos. Lá vamos nós. Assim que eu conectei este wrapper de listas de coleção à minha coleção, você pode ver que o número de itens aqui aumentou e agora temos o nome de nossos itens, temos o nome de nossos projetos aqui, CryptoPie, Purificar, Orbit, Vectorify, Dashcoin e Simplificar. Significa que tudo funciona perfeitamente. O que devemos fazer agora? Se eu abrir este wrapper de lista de coleta no navegador, você pode ver que temos dois elementos diferentes. Temos a lista da coleção, e temos o estado vazio. Nós não precisamos falar sobre o estado vazio agora, o que precisamos é apenas ir em frente e abrir esta lista de coleção e dentro temos este item de coleção. Nossos cartões aqui devem ser colocados dentro deste item da coleção, sempre seu conteúdo deve ser colocado dentro do item da coleção, não na lista da coleção. A lista da coleção é apenas este invólucro. O que devemos fazer agora? Bem, é muito simples. Vou em frente e selecionar o primeiro cartão, este cartão de projeto. Vou arrastá-lo para o navegador e vou soltá-lo dentro do item da coleção. É muito importante. Preste atenção à hierarquia de seus elementos. Ele deve ser aninhado dentro do item da coleção, exatamente assim. Assim que deixei cair este item dentro desta lista de coleção, você pode ver que seis cartões de projeto diferentes foram criados aqui e não um. Por quê? Porque o wrapper da lista de coleção sabe quantos projetos temos. E quanto a esses cartões de projeto? Não precisamos deles. Eu vou selecionar este cartão de projeto, eu vou apertar Backspace ou Excluir para removê-lo, e eu vou fazer a mesma coisa para este. E quanto a esses projetos de invólucro? Neste momento, esses projetos estão empilhados uns sobre os outros verticalmente. A boa notícia é que a lista de coleção também tem uma configuração de exibição. Se eu ir em frente e mudar a configuração de exibição de bloco para grade, vamos ter exatamente o que precisamos. Deixe-me ir em frente e dar-lhe uma aula primeiro, eu vou escrever Lista de Coleção. Lá vamos nós e eu vou mudar a configuração de exibição para grade. Agora eu tenho duas colunas e duas linhas. Vou remover uma dessas linhas, e vou adicionar mais uma coluna aqui. - Legal. Então eu vou mudar a lacuna para 40 pixels e eu vou apertar Concluído. Não parece agora, mas aguente comigo, vou te mostrar como podemos consertar isso. Em primeiro lugar, o conteúdo de todos esses cartões é o mesmo e precisamos corrigir isso. O que devemos fazer? Bem, precisamos conectar nossos elementos como imagem, título, descrição do projeto, e este link para os campos que criamos para nossa coleção. É muito simples. Se eu apenas clicar nesta imagem aqui, e se eu clicar neste ícone de configurações aqui, ele diz recebe imagens de projetos. Se eu marcar esta caixa de seleção e, em seguida, eu posso selecionar uma imagem de projeto de campo, ele automaticamente apresenta o campo apropriado para você. Desde que eu selecionei uma imagem aqui, ela não me mostra todos os campos, então nós temos apenas um campo de imagem, Imagem do Projeto, eu vou selecioná-lo. Lá vamos nós. Agora as imagens são diferentes. E quanto ao título? Vamos fazer a mesma coisa aqui. Vou selecionar o título. Vou clicar no ícone de configurações e deixar que eu marque Obter textos de projetos, e no menu suspenso, vou escolher Nome assim. Agora temos CryptoPie, Purificar, Órbitas, etc Agora deixe-me fazer a mesma coisa para a descrição do projeto. Depois de selecioná-lo, vou apertar o ícone de configurações e vou marcar Obter textos de projetos. Aqui eu vou escolher o tipo de projeto, bom. Por último, mas não menos importante, vou selecionar este botão de link, e vou marcar Obter URL de projetos, mas espere, nós não criamos nenhum URL para nossos projetos. Sim, você está certo, mas Webflow fez isso automaticamente. Lembra quando falamos sobre lesma? Esse é exatamente o URL que estamos procurando. O que deve acontecer aqui? Quando o usuário clica neste link, o usuário deve ser redirecionado para esta página do projeto CryptoPie. Portanto aqui, eu vou para a página Coleção, e a partir daqui eu vou escolher Projeto Atual. Isso é o que precisamos fazer aqui. Podemos marcar esta caixa de seleção, abrir em uma nova guia. Eu não vou fazer isso e não há mais nada que precisamos fazer. Agora nossos cartões estão usando conteúdo dinâmico e se fizermos alterações em nossos itens de coleção CMS, as alterações serão aplicadas a todos esses cartões automaticamente. Isso é incrível, mas aqui temos seis cartas diferentes. Podemos filtrar nossos itens. Como? Se eu selecionar meu wrapper de lista de coleção e se eu for para as configurações de elementos, bem ao lado do painel de estilo, temos opções diferentes aqui, temos filtros, ordem de classificação, limites de exibição. Vamos para os limites de exibição. Aqui eu vou verificar itens limite. Então, aqui posso especificar o número de itens que vou exibir aqui. Vamos escrever três. Agora temos três itens, mas aqui temos CryptoPie, Purify, Orbits, mas em nosso design, temos Simplify, Dashcoin, Vectorify. Agora, podemos usar a opção de ordem de classificação. Se eu clicar neste botão de adição, eu posso classificar meus projetos com base na data de conclusão, com base no nome, com base na data criada. Este é um campo que o Webflow cria automaticamente para nós. Vou escolher a data de conclusão e aqui posso escolher o mais antigo para o mais novo e o mais novo para o mais antigo. Vou acertar todas as listas para o mais novo e clicar em Salvar. Lá vamos nós. Agora temos Simplifique, Dashcoin e Vectorify, exatamente assim. Agora eles são encomendados com base em sua data de conclusão. O que mais devemos fazer? Bem, aqui este invólucro de lista de coleção está fora do nosso contêiner. É por isso que está ocupando tanto espaço. Portanto, eu vou ir em frente e apenas arrastá-lo e soltá-lo dentro nosso recipiente e eu vou remover o wrapper projetos que criamos antes apenas assim. Agora, enquanto este wrapper lista de coleção é selecionado, eu vou ir em frente e dar-lhe uma classe, vamos escrever, Coleção List Wrapper. Vou adicionar algumas margens superiores, vamos dar uma margem superior de 70 pixels e estamos prontos. Você pode ver como é fácil usar um CMS e coleções e listas de coleção? A partir de agora, esses conteúdos são dinâmicos e esta página faz referência ao nosso conteúdo dentro de nossas coleções e itens de coleção. Se eu for para o meu CMS, e se eu for para, digamos Simplificar aqui, e eu decidir modificar seu nome para outra coisa, vamos escrever Simplificar mais e eu salvá-lo, agora esta mudança afeta este cartão aqui como Bem. Eu preciso visualizar isso aqui, lá vamos nós, temos nosso novo título. Pessoal, isso foi muito para digerir, então vamos recapitular esta lição. Primeiro, falamos sobre o CMS. CMS é onde você pode criar algumas coleções e, digamos, criar algumas estruturas para o seu conteúdo. Para criar uma coleção, você precisa criar alguns campos. Criamos alguns campos personalizados como imagem do projeto, tipo de projeto, data de conclusão e detalhes do projeto. Em seguida, criamos alguns itens do projeto. Adicionamos uma lista de coleção aqui e conectamos nossa Lista de Coleção Wrapper à coleção do nosso projeto. Então arrastamos e soltamos nosso cartão de projeto dentro deste item de coleção, e finalmente, selecionamos todos os nossos elementos de uma maneira, a imagem, o título , a descrição e o link e os conectamos com o campo apropriado Aqui. Por exemplo, para esta imagem, escolhemos a imagem do projeto, para este título, escolhemos o nome do projeto, como você pode ver. Finalmente, selecionamos nosso wrapper de listas de coleções e fomos para as configurações do elemento, a partir daqui, limitamos o número de itens que queríamos exibir aqui a três. Além disso, usamos a opção de ordem de classificação para exibir nosso conteúdo com base na data de conclusão e do mais antigo para o mais novo assim. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado. No próximo vídeo, começaremos a criar nossa página do projeto. Vejo você então. 52. Página de projeto - parte 1: Ei, neste vídeo, vamos começar a criar nossa página de projeto juntos. Esta página, como mencionei antes, vai ser uma página dinâmica. Portanto, seu conteúdo será dinâmico também. Como podemos trabalhar com páginas dinâmicas? Da mesma forma que trabalhamos com páginas estáticas, nada muda. A única diferença aqui é que esta página vai ser um modelo para a nossa página de projeto e seu conteúdo pode ser alterado de acordo com os itens de nossas coleções. Primeiro, vou ao Webflow e aqui está a nossa página inicial. Se eu for a estas páginas aqui sob as páginas da coleção CMS, como você pode ver, o modelo deste projeto tinha sido criado pelo Webflow para nós. Vou clicar nisso. O que precisamos para esta página? Como pode ver, precisamos da barra de navegação no topo. Na parte inferior, precisamos desta seção CTA e do rodapé. Nós já criamos essas seções. Devemos ir em frente e copiá-los e colá-los aqui? Podemos fazer isso, mas não é uma boa maneira. Lembra quando falamos sobre símbolos? Eu mencionei que poderia ser muito benéfico se você pudesse criar um símbolo e reutilizar esse símbolo novamente e novamente e mais tarde se você quiser fazer algumas alterações em seus símbolos, você fazê-los uma vez e isso afetará todas as instâncias desse símbolo em particular instantaneamente. Isso é exatamente o que vamos fazer. Agora vamos em frente e criar um símbolo para a nossa barra de navegação, para a nossa seção CTA e para o nosso rodapé. Deixe-me ir ao Webflow. Antes de fazer isso, deixe-me mostrar-lhe uma coisa. Você pode ver que a cor do fundo é exatamente a mesma cor do nosso plano de fundo aqui em nossa página inicial. Por que é isso? Não alteramos a cor do plano de fundo deste modelo de projeto. Você se lembra quando mudamos a cor do fundo do corpo, todas as páginas marcadas em nossa página inicial? É por isso que aqui também obtemos a cor do fundo. Na verdade, se eu criativo e mais páginas, todas essas páginas terão a mesma cor de fundo e isso é exatamente o que queremos. Claro, podemos ir em frente e anular isso se quiser, mas neste caso, está tudo bem. Agora, eu vou para “Minha página inicial” e a partir daqui eu vou selecionar meu “Navbar” primeiro. Você se lembra como poderíamos criar um símbolo? Sim, você está certo. Tínhamos duas opções diferentes. Podemos clicar com o botão direito e clicar no botão “Criar Símbolo” aqui, ou podemos ir para os símbolos aqui e clicar no botão “Criar novo Símbolo” aqui. Vou apertar este botão e vou chamá-lo de Navbar. Lá vamos nós. Nosso símbolo está pronto. Agora estamos dentro do símbolo mestre. Vou clicar neste “Voltar à Instância”. Deixe-me ir para a seção CTA. Vou selecionar esta seção também. Vou fazer a mesma coisa. Deixe-me criar um símbolo e eu vou nomeá-lo seção CTA. símbolo da nossa secção CTA também está pronto. Finalmente, vou selecionar meu rodapé e me deixar fazer a mesma coisa aqui. Vou criar um símbolo e vou chamá-lo de rodapé. Nós criamos com sucesso três símbolos diferentes, mas agora é hora de ir em frente e reutilizá-los. Deixe-me ir para “Páginas” e eu vou para “Projects Template” aqui, e então eu vou para a seção “Símbolo”. A partir daqui, eu posso simplesmente arrastá-los e soltá-los na minha tela. Há uma alternativa também. Você também pode usar o “Busca rápida, a fim de encontrar seus símbolos. Deixa-me mostrar-te como. Se eu selecionar este corpo e se eu pressionar a tecla “Command” tecla “Control” no meu teclado, eu posso procurar o rodapé. Como você pode ver aqui, ele encontrou nosso símbolo de rodapé. Se eu procurar navbar, lá vamos nós, símbolo navbar. Posso clicar nisso e aí está. Nossa barra de navegação está aqui. E quanto a outras seções? Vamos fazer a mesma coisa aqui. Desta vez, vou te mostrar como você pode arrastá-los e soltá-los em sua tela. Eu vou para a seção Símbolos. A partir daqui eu vou arrastar e soltar a seção CTA no meu Canvas e colocar cada um logo abaixo da barra de navegação. Lá vamos nós. Nossa seção CTA também está pronta. Por último, mas não menos importante, deixe-me arrastar e soltar este rodapé. Vou colocá-lo logo abaixo da minha seção CTA. Nossa barra de navegação está pronta, nossa seção CTA está pronta, e também o rodapé foi adicionado com sucesso. A primeira parte desta página foi criada. Como você pode ver aqui, nós tínhamos a barra de navegação, a seção CTA, e o rodapé. Agora é hora de ir em frente e criar esta seção de projeto, mas vamos fazer isso em nossa próxima lição. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado. Vejo-te no próximo. 53. Página de projetos - parte 2: Neste vídeo, vamos continuar trabalhando em nossa página de projeto. Agora, é hora de ir em frente e criar esta seção de projeto. Vamos analisar esta seção e ver como podemos estruturá-la no Webflow. Aqui, precisamos criar uma seção, e dentro precisamos criar um contêiner. Dentro desse contêiner, precisamos ter um título, esse tipo de projeto, essa data de conclusão, e a imagem do projeto, e finalmente, os detalhes. Como você pode ver aqui, imagem deste projeto tem algumas sombras, mas não é uma sombra simples. Se eu ampliar, você pode ver que esta sombra tem cores diferentes. Eu não usei uma simples sombra escura porque no mundo real, nós não temos sombras escuras para imagens coloridas e objetos. Portanto, seria mais realista ter as cores do nosso objeto, ou, neste caso, nossa imagem para a nossa sombra também. Como é que eu fiz isso? Era tão simples. Eu apenas duplicei esta imagem e coloquei essa camada duplicada atrás da nossa imagem principal, e então, adicionei este efeito de desfoque de camada a ela. Deixa-me mostrar-te o que parece. Se eu apenas diminuir este borrão para zero, você pode ver que esta é exatamente a mesma imagem aqui, mas se eu aumentar a quantidade de borrão, ele ficará embaçado e parecerá uma sombra. Finalmente, diminuo a opacidade desta camada duplicada para 50%. Nós vamos usar a mesma técnica no Webflow também. Para estes parágrafos, vamos usar um rich text porque queremos que nosso cliente, queremos que a agência de design, seja capaz de adicionar algumas mídias ricas como imagens, vídeos, e modificar facilmente os detalhes de cada projeto. Aqui temos este título e, a fim de criar esta seção, o tipo de projeto e esta data de conclusão, vamos criar um bloco div, e vamos colocá-los dentro desse bloco div e, finalmente, vamos transformar que div bloco para um flex max, por quê? Porque queremos que eles toquem as bordas deste limite. Parece fácil, então vamos em frente e criá-lo. Primeiro de tudo, vou em frente e selecionar meu corpo. Vou apertar “Comando K” ou “Controle K”. Vamos procurar uma seção. Esta seção foi adicionada aqui, logo abaixo do meu rodapé. No navegador, eu vou arrastá-lo e soltá-lo bem acima da seção CTA, bem aqui. Esta seção vai ter uma aula. Como sempre, vou dar uma aula de seção. Lá vamos nós. Além disso, vou dar uma aula de combo. Vamos escrever projeto. Legal. Agora, esta seção requer um contêiner. Enquanto estiver selecionado, vou pressionar “Command K” ou “Control K”. Vamos procurar um bloco div. Vou dar a aula de contêineres. Lá vamos nós. Nosso contêiner também está pronto. O que precisamos dentro deste contentor? Sim, você está certo. Precisamos de uma direção. Enquanto este contêiner estiver selecionado, vamos pressionar “Command K” ou “Control K” e procurar o título. Vai ser H1, e vou dar-lhe uma aula. Vamos escrever o título da página do projeto, Página __Título. Lá vamos nós. Eu não vou mudar este título porque mais tarde, vamos conectar todos esses elementos aos campos de nossas coleções. Porque vamos trabalhar com conteúdo dinâmico. O que mais precisamos aqui? Logo abaixo deste título, precisamos criar este tipo de projeto e também esta data de conclusão. Mas vamos analisar esta seção, a data de conclusão. Uma vez que a data de conclusão deve ser dinâmica, aqui, eu vou criar dois blocos de texto diferentes: um para este concluído na seção, e o outro para a data em si. Mais tarde, quando conectamos nossos elementos aos nossos campos, vamos apenas conectar o bloco de texto certo para o campo de data de conclusão. Deixe-me ir em frente e criar um bloco div. Vou selecionar este contêiner e apertar “Command K” ou “Control K”. Vamos procurar um bloco div. Lá vamos nós. Vou dar-lhe uma aula. Vamos escrever Project Type Wrapper, assim. Dentro, vou colocar um bloco de texto aqui. Enquanto estiver selecionado, vou procurar um bloco de texto. Lá vamos nós. Este bloco de texto vai ter uma classe também. Vamos escrever Project Page __Type, e eu vou modificar suas propriedades topográficas. Eu vou para o meu arquivo de design, eu vou selecionar este tipo de projeto, e como você pode ver, eu estou usando body medium. Corpo médio, seu tamanho de fonte é 24 pontos e também é médio. Portanto aqui, eu vou mudar o tamanho para 24 pixels. Além disso, seu peso será 500 ou médio. Sua cor vai ser meio neutro, assim mesmo. Não vou modificar o texto. Legal, mas e a seção da data de conclusão aqui? Como eu mencionei, vou criar um bloco div. Então, eu vou selecionar este wrapper tipo de projeto, e então eu vou adicionar um bloco div aqui dentro. Este div vai ter uma aula. Vamos escrever Projeto __Complementação. Lá vamos nós. Dentro deste bloco div vamos colocar dois blocos de texto. Enquanto estiver selecionado, pressione “Command K” ou “Control K” e procure o bloco de texto. Este é o nosso primeiro bloco de texto, eu vou apenas copiá-lo, “Command C” ou “Control C”, e colá-lo para obter o meu segundo bloco de texto. Agora, cada um desses blocos de texto deve ter uma classe. Vou selecionar o primeiro, e vou dar-lhe uma aula. Vamos escrever Projeto __Completado, assim. O segundo será o Projeto __Date. Agora, vamos em frente e modificar suas propriedades CSS. Vou selecionar o primeiro, este Projeto Concluído. Deixe-me ir em frente e modificar seu tamanho de fonte para 20 pixels, e também sua cor para escuro neutro. E o segundo? O segundo, que é este projeto 8, vai ter 20 pixels também, mas sua cor vai ser meio neutro. Legal, mas não parece bom, por quê? Porque não transformamos este blog div de conclusão do projeto para um máximo flexível. Então, eu vou selecionar este bloco div de conclusão de projeto no meu navegador, e então eu vou mudar a configuração de exibição para flex max. Agora, a direção é horizontal e eles estão sentados um ao lado do outro, é exatamente o que eu quero. Agora, eu vou selecionar o primeiro texto e eu vou mudar suas tomadas para concluída em. Para ver como vai parecer, vou mudar este texto também. Embora este vai ter conteúdo dinâmico. Mas só para ver como vai parecer, vou escrever 22 de junho de 2021. Legal. Aqui, precisamos de algumas margens entre eles. Eu vou selecionar este concluído no bloco de texto, e eu vou dar-lhe uma margem direita de cinco pixels, assim como isso. Agora, parece muito melhor. Mas como você pode ver, esses dois elementos, esse tipo de página de projeto e também esses blogs div, estão sentados um em cima do outro. Não é isso que queremos. Vou selecionar este Project Type Wrapper e vou transformá-lo em uma caixa flexível. A direção vai ser horizontal, no entanto, eu vou mudar a justificativa para o espaço entre, por quê? Porque queremos que eles toquem as bordas deste limite. Vou colocá-lo no espaço entre eles. Bom, nosso layout está quase pronto. Deixe-me ir ao meu arquivo de design. Se eu selecionar este tipo de projeto e manter pressionada a tecla “Alt” ou a tecla “Option” no meu teclado, posso ver que ele tem uma margem superior de 20 pixels. Enquanto este bloco div é selecionado, este Project Type Wrapper, eu vou dar-lhe uma margem superior de 20 pixels. Parece muito melhor agora. Agora, vamos passar para a próxima parte, que é esta imagem. Aqui, enquanto este contêiner é selecionado no navegador, eu vou selecionar este contêiner. Vou apertar “Comando K” ou “Controle K”. Vamos criar um novo bloco div, porque vamos criar um wrapper para a nossa imagem. Aqui, eu vou escrever bloco div, e este bloco div vai ter uma classe. Deixe-me escrever Projeto __Image __Wrapper. Dentro, vamos colocar uma imagem. Enquanto estiver selecionado, vou pressionar “Command K” ou “Control K”. Vamos procurar o elemento de imagem aqui. Lá vamos nós. Vou dar uma aula a essa imagem, então vamos criar uma classe aqui. Eu vou escrever Project Page __Image. Esta imagem deve ocupar toda a largura de seu pai, que é este novo bloco div que criamos, este wrapper de imagem. O que devo fazer? Sim, você está certo. Vou em frente e mudar a largura para 100. Lá vamos nós. Agora ele ocupa toda a largura de seu pai, mas sua altura também foi aumentada. Como posso consertar isso? Deixe-me ir ao meu arquivo de design. Se eu selecionar esta imagem aqui, se eu clicar duas vezes sobre ela, você pode ver que ela tem uma altura específica, 444 pixels. Portanto, eu vou definir a altura aqui para 444 pixels. No entanto, como você pode ver, nossa imagem não ocupa toda a largura agora, não cobre esta área. Portanto, vou em frente e mudar o ajuste de preenchimento para cobertura. Agora, eu vou clicar duas vezes sobre ele e vamos escolher uma imagem dos ativos por enquanto, eu vou escolher a primeira. Cobre todo o invólucro. Nossa imagem está pronta, mas e a sombra? Como eu mencionei antes, eu vou duplicar esta imagem e eu vou colocá-la atrás desta imagem principal e então eu vou adicionar alguns filtros a ela. Vou clicar com o botão direito do mouse nesta parte azul aqui, e então vou escolher “Duplicar”. Como você pode ver agora temos duas imagens idênticas com a mesma classe. É muito importante modificar a classe desta camada duplicada. Por quê? Porque queremos modificar suas propriedades CSS. Eu vou selecionar esta camada duplicada, e eu vou ir em frente e clicar nesta pequena seta e deixe-me duplicar esta classe. Vou renomeá-lo para Página do Projeto __Image__Efeito. Lá vamos nós. Agora ele tem uma nova classe e podemos facilmente ir em frente e modificar suas propriedades CSS. Como podemos colocar esta imagem atrás da nossa imagem principal? Podemos ir em frente e modificar sua posição aqui. Enquanto estiver selecionado, vou mudar sua posição de estática para absoluta. Como você pode ver, está confuso. Não é o que queremos. Por que isso acontece? Isso porque sua nova posição é relativa ao corpo. Se você se lembra quando trabalhamos com posição absoluta, Eu mencionei que ele sempre procura um elemento pai que tem a posição relativa. Se eu for em frente e mudar a posição deste invólucro de imagem do projeto para relativo de estático, e então eu selecionar essa imagem duplicada, eu posso simplesmente definir sua posição para o canto superior esquerdo. Agora esta imagem está em cima da nossa imagem principal. Como podemos colocá-lo atrás da nossa imagem principal? Podemos usar o índice z. Aqui eu vou definir o índice z para menos 1. Desta forma eu posso ter certeza de que esta camada duplicada com esta classe de efeito de imagem de página do projeto está por trás minha imagem principal porque eu dei a ele um índice z negativo. Agora precisamos ir em frente e adicionar alguns efeitos a ele. Se eu for para a seção Efeitos, posso ir para Filtros. Se eu apertar este botão mais, eu posso adicionar o filtro de desfoque a ele. Vamos definir o raio para cerca de 40 pixels. Simplesmente assim. Como podem ver, temos a nossa sombra. Além disso, vou aumentar a intensidade das minhas cores. Vou adicionar um novo filtro aqui. Vamos em frente e adicionar o filtro de saturação, e eu vou definir o valor de 200 por cento. Como podem ver, a intensidade das minhas cores aumentou. No entanto, esta sombra é muito brilhante e não parece realista. Vou em frente e diminuir a opacidade para 40%. Lá vamos nós. Agora parece muito melhor, mas vou fazer mais uma coisa. Se selecionarmos esta sombra, posso simplesmente movê-la um pouco para baixo. Eu vou adicionar as transformações 2D e 3D aqui, e eu vou movê-lo um pouco para baixo usando o eixo y. Deixe-me movê-lo para baixo por 14 pixels, exatamente assim. Parece muito melhor agora. Nosso invólucro de imagem do projeto também está pronto. Agora é hora de ir em frente e adicionar nossos textos ricos aqui logo abaixo desta imagem. Eu vou selecionar o contêiner e então eu vou dar-lhe uma classe de combinação e nós vamos escrever Project, exatamente assim. Finalmente, eu vou modificar sua configuração de exibição porque eu quero que todos esses elementos para empilhar um sobre o outro verticalmente. Mais tarde, quando queremos tornar o nosso design responsivo, seria tão benéfico. Vou mudar sua configuração de exibição para Flexbox e vou mudar a direção para vertical. Agora, enquanto este contêiner estiver selecionado, vou pressionar Comando K ou Control K. Deixe-me adicionar um rich text aqui. Lá vamos nós. Nosso rich text foi adicionado aqui, e eu vou dar uma aula. Vamos escrever Project__Detalhe. Deixe-me ir ao meu arquivo de design. Vou selecionar este parágrafo e vou verificar sua margem superior. Como podem ver, preciso de uma margem máxima de 70 pixels. Enquanto estiver selecionado aqui, vou dar-lhe uma margem superior de 70 pixels. Não vamos modificar o conteúdo aqui por enquanto. Agora vamos em frente e modificar o espaçamento entre esses elementos. Se eu for para o meu arquivo de design e se eu selecionar esse tipo de projeto, você poderá ver que sua margem inferior está definida como 80 pixels. Eu posso ir para o meu projeto aqui, eu posso selecionar este tipo de projeto wrapper e eu vou dar-lhe uma margem inferior de 80 pixels. Tudo está pronto e podemos passar para a próxima seção. Deixe-me ir ao meu arquivo de design. Logo abaixo disso, precisamos ter a seção de outros projetos. Parece exatamente o mesmo que esta seção recente do projeto, então eu acho que seria sensato apenas copiar e passar por aqui. Deixe-me ir ao Webflow. Vou para a minha página inicial. A partir daqui eu vou selecionar esta seção, seção Projetos Recentes. Eu vou copiá-lo, pressione Comando C ou Controle C. Então eu vou para Páginas e eu vou para a página Projects Template, e deixe-me selecionar o corpo e pressione Command V ou Control V. Assim como, este foi adicionada logo abaixo do meu rodapé, então eu vou apenas reposicioná-lo dentro do meu navegador e eu vou colocá-lo abaixo da seção do meu projeto. Primeiramente, vou continuar e duplicar a classe de combinação deste projeto, e vou mudá-la para Outros Projetos para manter tudo organizado. Então eu vou mudar este nome aqui de Projetos Recentes para Outros Projetos. Finalmente, vou modificar sua margem máxima porque agora é demais, é 200. Se eu passar para o meu arquivo de design, se eu selecioná-lo, você pode ver que sua margem superior está definida como 70 pixels. Vou ajustá-lo para 70 aqui. Se eu selecionar esta seção, você pode ver que temos muita margem aqui no topo. Vou selecionar esta seção e vou substituir sua margem padrão. Se eu clicar nele, você pode ver que ele diz valor vem da seção. Está tudo bem. Mas desde que adicionamos este novo projeto de classe de combinação, podemos simplesmente substituí-lo sem afetar outras seções. Vou configurá-lo para 70 pixels. O layout da nossa página do projeto está pronto, e agora é hora de conectar todos os nossos elementos aos itens de nossas coleções e campos de coleções. Mas vamos fazer isso na próxima lição. Espero que tenha gostado deste vídeo e te vejo no próximo. 54. Página de projetos - parte 3: Ei, bem-vindo de volta. Neste vídeo, vamos conectar todos os nossos elementos aos campos do nosso CMS. Você está pronto? Vamos começar. Primeiro de tudo, vou selecionar este título. Este cabeçalho deve exibir o nome do projeto. Se eu clicar neste ícone de configurações, eu posso marcar esta caixa de seleção, ele diz obter textos de projetos, esta é a coleção que criamos antes. Então eu vou selecionar o campo, eu vou selecionar “Nome (Texto Simples)”, este é o nome do nosso projeto. Lá vamos nós. Ele foi alterado para simplificar mais. Se você se lembra, nós o modificamos. Mas por que é simplesmente mais, por que não outro projeto? Isso é porque se você for para a barra superior aqui, você pode ver que nós temos este item, e ele diz simplifique mais. Este modelo de projetos tem itens diferentes, os itens que criamos os projetos. Se eu for para CryptoPie, você pode ver que este título é alterado automaticamente. Se eu for para Orbit, lá vamos nós, então essa é a beleza de usar Webflow CMS. Eu vou para simplificar mais por enquanto. Em seguida, vou selecionar o tipo de projeto, deixe-me clicar no ícone de configurações, vou marcar esta caixa de seleção, e deixe-me escolher o campo. Este vai ser tipo de projeto, lá vamos nós, design de interface do usuário e desenvolvimento de aplicativos. Então eu vou selecionar esta “Data do Projeto”, e eu vou clicar nessas configurações. Deixe-me marcar esta caixa de seleção, e eu vou escolher o campo relevante. Vai ser Data de Conclusão, lá vamos nós, foi alterado para 1º de junho de 2021. Aqui podemos modificar o formato também. Se você quiser mostrá-lo de forma diferente, por exemplo, se você quiser incluir a hora também, você pode simplesmente modificar o formato. Temos muitos formatos diferentes aqui, então isso depende de você, mas parece bom para mim. Agora é hora de ir em frente e selecionar nossa imagem, “Imagem da página do projeto”, e eu vou apertar este ícone de configurações. Deixe-me verificar este Obter imagens de projetos, e eu vou escolher Imagem do projeto. Mas e a sombra? Bem, já que duplicamos essa imagem para nossa sombra, só precisamos selecioná-la, e precisamos simplesmente conectá-la ao nosso campo, assim como nossa imagem principal. Eu vou marcar esta caixa de seleção e eu vou selecionar a “Imagem do projeto” no menu suspenso do campo, exatamente assim. Agora é hora de selecionar o detalhe do nosso projeto, este rich text. Vou em frente e marcar esta caixa de seleção, e deixe-me selecionar um campo, “Detalhes do Projeto”, lá vamos nós. Ele foi alterado para o detalhe do projeto ao qual está associado. Nossos elementos estão conectados, e agora eu posso ir em frente e verificar. Se eu mudar o item aqui no topo de simplificar mais para purificar, lá vamos nós. O título foi alterado, o tipo de projeto foi alterado, a data foi alterada, a imagem e os detalhes do projeto. Dê uma olhada nisso, a sombra também muda, porque também está usando um conteúdo dinâmico. Eu vou para outro item. Eu vou para Dashcoin, lá vamos nós, parece incrível, não é? Estamos quase terminando, mas há mais uma coisa que precisamos cuidar, que é a outra seção do projeto. Se eu for simplificar mais, e eu rolar para baixo, você pode ver que em outros projetos veremos o projeto mais simplificado também. Não faz sentido, porque devemos excluir o projeto que o usuário está visualizando no momento. Deveríamos mostrar outros projetos aqui. Se eu passar para o meu arquivo de design aqui, como você pode ver, aqui temos simplificação. Nós não temos o projeto simplificado nos outros projetos. Como podemos fazer isso? Bem, isso é muito simples. Vou selecionar esta “Coleção List Wrapper”. Se eu passar para as Configurações de Elementos, aqui temos essa opção de filtros. Vou apertar este botão mais, e aqui temos dois campos diferentes. Aqui temos Nome, Projeto, Imagem do Projeto. Nós podemos apenas adicionar filtros diferentes, mas eu vou escolher Projeto, e então aqui nós temos outro menu drop que diz é ou não é. Então aqui diz projeto atual. Este projeto é o projeto atual, isso significa que teremos o projeto que o usuário está visualizando aqui também, mas isso não é o que queremos. Eu vou mudar é para não é, e então eu vou apertar “Salvar”, e lá vamos nós. O projeto simplifique mais foi removido aqui. Aqui como você pode ver, nós temos dashcoin. Se eu for para a página do projeto dashcoin, aqui não temos nenhum projeto dashcoin, e isso é exatamente o que precisávamos. Mais uma coisa que eu gostaria de mencionar aqui é que se eu for para a página inicial, e se eu for para os projetos recentes, eu vou ir em frente e selecionar este “Coleção List Wrapper”. Na Ordem de classificação, selecionamos o mais antigo para o mais novo. Não faz sentido, por quê? Porque aqui temos os projetos recentes, portanto, a data de conclusão deve ser classificada do mais novo para o mais antigo. Mas por que escolhemos o mais antigo para o mais novo? Isso porque quando criamos esses projetos, escolhemos aleatoriamente as datas de conclusão do projeto. Desde que eu queria obter exatamente o mesmo design que eu tenho aqui, Simplifique, Dashcoin e Vectorify, eu mudei essa ordem de classificação do mais novo para o mais antigo para o mais novo. Mas no projeto do mundo real, quando você tem os projetos recentes você precisa classificá-lo do mais novo para o mais antigo, então sempre que a agência ou o cliente adicionar um novo projeto aos itens de coleções, ele será adicionado aqui, então Tenha isso em mente. Agora eu vou ir em frente, e verificar tudo, e ver se tudo funciona perfeitamente. Se eu visualizar meu projeto, aqui eu tenho projetos diferentes, eu vou clicar neste botão “Saiba mais”, lá vamos nós. Vou direcioná-lo para a página do projeto, e ele diz simplificar mais, eu posso rolar para baixo, eu tenho outros projetos também. Posso clicar em “Dashcoin”, serei redirecionado para a página dashcoins, perfeito. Eu vou voltar para a página inicial agora e, vamos tentar mais uma vez. Vou selecionar “Vectorify”, e tudo parece ótimo. A única coisa que precisamos fazer aqui é mudar a cor dos textos da mídia porque nos esquecemos de fazer isso. Se eu ir em frente, e verificar meu arquivo de design, aqui podemos ver que ele não usa nossa cor escura. Eu vou ir em frente e selecionar este “Detalhe do Projeto”, e eu vou mudar seu estilo. Deixe-me ir para a seção de tipografia, e eu vou modificar sua cor para neutra, média. Agora parece muito melhor. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado. Vejo-te no próximo. 55. Página de contato: Ei, neste vídeo vamos criar a página Fale Conosco juntos. Esta vai ser uma página estática, portanto, não vamos trabalhar com o nosso CMS e qualquer conteúdo dinâmico. Nós só precisamos criar este formulário e isso é tudo. Deixe-me ir em frente e analisar todos os elementos desta página. No topo, precisamos ter a barra de navegação, como de costume. Então precisamos ter esta seção Fale Conosco, e finalmente o rodapé. Para a barra de navegação e um rodapé, podemos usar nossos símbolos, então precisamos criar esta seção Fale Conosco. Dentro, precisamos colocar um recipiente, como de costume, e então precisamos ter um título e um bloco de formulário. Este bloco de formulário terá diferentes campos de texto, como nome completo, e-mail, telefone. Aqui, em vez de usar um campo de texto, vamos usar uma área de texto. Por quê? Porque a mensagem do usuário pode ser longa e , portanto, um campo de texto seria muito pequeno para coletar esse tipo de dados. Finalmente, teremos este grande botão enviar. Nada complicado. Vamos começar. Primeiro de tudo, eu vou para Webflow, e eu vou ir em frente e criar uma nova página estática. Se eu for para o Pages, eu posso apertar este botão Criar nova página, e então eu vou chamá-lo de Fale Conosco, e apertar o botão Criar, exatamente assim. Agora é hora de adicionar nossa barra de navegação e nosso rodapé aqui. Eu vou para a seção de símbolos, e eu vou arrastar e soltar nossa barra de navegação bem no topo, e então deixe-me arrastar e soltar nosso rodapé logo abaixo disso. Entre nós vamos criar uma seção, então eu vou selecionar meu corpo, e vamos pressionar Comando K ou Controle K. Deixe-me criar uma seção. Então eu vou dar uma aula, uma aula de seção. Finalmente, eu vou movê-lo para cima e colocá-lo entre esses dois símbolos. Lá dentro, vamos precisar de um contentor. Primeiro, vou dar uma aula de combo a esta seção, e vou chamá-la de Contato. Em seguida, enquanto estiver selecionado, vamos ver a tecla Command ou Control e procurar um bloco div. Então eu vou dar a este bloco div a classe de contêiner, e nós estamos prontos para ir. Dentro deste contentor, vamos precisar de um rumo. Enquanto estiver selecionado, vamos usar a busca rápida e eu vou escrever Heading, e vai ser H1. Então vamos dar uma aula. Vou escrever “Contat__Heading”. Finalmente precisamos modificar algumas de suas propriedades tipográficas. Vou começar com o tamanho da fonte, é 38 pixels. Eu vou escrever 60 pixels, porque nós usamos 60 pixels para nossos títulos H1 antes, então eu vou mudar sua cor para neutro escuro. Deixe-me modificar a altura da linha também. Vou mudá-lo para cem e talvez dez por cento. Finalmente, vamos dar-lhe algumas margens de fundo. Eu vou para o meu arquivo de design, e se eu selecioná-lo, eu posso ver que ele tem uma margem inferior de 80 pixels. Primeiro, enquanto estiver selecionado, removerei sua margem superior padrão. Vou ajustá-lo para 0. Então eu vou mudar sua margem inferior padrão para 80 pixels. O que mais eu preciso? Logo abaixo disso, vou precisar de um bloco de formulários. Eu vou selecionar este contêiner e eu vou pressionar a tecla Command ou a tecla Control. Vamos procurar um bloco de formulários. Aí está, nosso bloco de formulários está pronto. Agora dentro deste bloco de formulário, como de costume, temos dois campos de texto diferentes, e dois rótulos, e um botão, e vamos modificar isso. Vou em frente e remover um desses campos de texto e um desses rótulos até obter apenas um campo de texto e um rótulo. Vou começar criando o campo Nome Texto. Vou ao meu arquivo de design. Aqui, se eu selecionar esse nome completo, você pode ver que ele está usando a cor média neutra, e está usando o estilo de texto regular do corpo, e seu tamanho de fonte é de 20 pixels ou 20 pontos. Vou para Webflow e vou dar uma aula a ele. Isso mesmo, Contato__Título. Então eu vou modificar algumas de suas propriedades tipográficas. Vamos começar com o seu peso. Vai ser normal, e seu tamanho vai ser de 20 pixels. Finalmente, a cor vai ser meio neutro. Legal. Nossa gravadora está pronta. Agora eu vou ir em frente e copiar o texto aqui, nome completo, com este asterisco, porque este campo vai ser obrigatório. Lá vamos nós, nossa gravadora está pronta. Vou selecioná-lo. Deixe-me dar-lhe mais algumas margens de botão. Se eu selecionar este rótulo aqui, e eu verificar a margem inferior, se eu manter pressionada a tecla Option no meu teclado, ou a tecla Alt, você pode ver que ele tem uma margem inferior de 10 pixels, então eu vou aumentar sua margem inferior aqui como bem a 10 pixels. Mas e o campo de texto? Eu vou selecionar este campo de texto, e eu vou dar a vocês a classe, porque eu vou mudar seu estilo. Vamos escrever Contato__Formul__Campo de texto. Simplesmente assim. Então eu vou mudar sua largura para 100 por cento, que ele sempre ocupa 100% de sua largura pai. Também vou mudar a sua altura. Deixe-me ir em frente e verificar a altura que usei para este campo de texto. Como você pode ver sua altura é definida para 70 pixels. Eu vou definir a sua altura aqui para 70 pixels também. Então eu vou em frente e modificar a cor de seu plano de fundo. Deixe-me ir ao meu arquivo de design. Aqui, como podem ver, estou usando este código de cores com uma opacidade de 10%. Vou copiar estes códigos de cores hexadecimais, é 6B708D. Então eu vou colá-lo aqui no campo de cor deste plano de fundo. Está muito escuro. Finalmente vou diminuir sua opacidade, é tudo uma boa quantidade, para 10 por cento. Lá está ele. Mas como podem ver, tem uma fronteira. Se eu selecioná-lo, você pode ver que não há fronteira aqui. Isso ocorre porque os campos de texto por padrão têm bordas. Como podemos consertar isso? Nós podemos simplesmente mudar o estilo desta fronteira aqui para sólido, e transformá-la de volta para Nenhum. Mas e o texto do espaço reservado? Bem, se você se lembrar, se você apenas clicar duas vezes em seu campo de texto, aqui você pode inserir o texto do espaço reservado. Vou escrever Digite seu nome completo. Lá vamos nós. O tipo de texto vai ser simples porque é apenas o nome e sobrenome, e vai ser necessário. Vou marcar esta caixa de seleção obrigatória. Legal. Mas e o estilo do espaço reservado? Bem, eu vou para o estado de espaço reservado, exatamente assim, e eu vou modificar sua cor. Vamos ver o que temos aqui. Se eu selecionar este texto, ele está usando meio neutro. Deixe-me ir em frente e mudar sua cor para meio neutro. Vou aumentar o tamanho da fonte para 17 pixels. Legal, nosso campo de texto está pronto. Agora vou em frente e criar outros campos de texto, como e-mail e telefone. Primeiro vou selecionar este bloco formado, e vou dar-lhe uma aula. Vamos escrever Contato__Form__Wrapper, e, em seguida, enquanto ele está selecionado, eu vou criar um novo bloco div. Vamos tocar no Comando K ou Controle K. Vou procurar um bloco div. Este bloco div vai manter este campo de texto e este rótulo. Eu vou arrastar este rótulo dentro deste bloco div, e eu vou arrastar este campo de texto dentro deste bloco div também. Certifique-se de que eles estão aninhados dentro corretamente. Então eu vou selecionar este novo bloco div, e eu vou dar-lhe uma classe. Vamos escrever, contact__textField e eu vou colocá-lo acima do meu botão Enviar. Nosso primeiro campo de texto está pronto. Legal. Agora eu vou selecionar este bloco div Contact__TextField, e eu vou duplicá-lo duas vezes, apenas assim. Então, vou modificar o rótulo do segundo para enviar um e-mail. Como você pode ver aqui, temos e-mail e não é obrigatório, então não precisamos desse asterisco. O próximo será o telefone, e também, precisamos mudar o espaço reservado aqui. Vou clicar duas vezes nele e vou mudar o espaço reservado para outra coisa. Vamos tentar, digite seu endereço de e-mail. Vou mudar o tipo de texto para e-mail e não será necessário. Aqui, vamos mudar o nome desta entrada para e-mail. Vamos clicar duas vezes neste campo de texto e eu vou mudar o espaço reservado para inserir seu número de telefone e também vou mudar o tipo de texto de simples para telefone, e não vai ser necessário também. Vamos mudar o nome aqui para telefone. Legal. Nossos campos de texto estão prontos. Agora, precisamos de mais um campo e vamos usar uma área de texto para isso. Deixe-me ir em frente e selecionar um desses blocos div. Este Contact__textField, Eu vou duplicá-lo mais uma vez, lá está. Aqui está o que acabei de duplicar. Vou modificar o rótulo para mensagem com um asterisco. No entanto, este campo de texto é muito pequeno para a nossa mensagem. Se eu der uma olhada no design, você pode ver aqui que temos uma área de texto não um campo de texto. Portanto, eu vou remover este campo de texto, pressione Backspace ou Delete no seu teclado, e eu vou selecionar este bloco div contact__TextField que é o elemento pai aqui. Vamos pressionar Comando K ou Controle K e procurar área de texto. Lá está ele. Como eu vou usar o mesmo estilo que eu usei para outros campos de texto, eu vou apenas usar a mesma classe que eu uso para esses campos de texto. É contact_form_textField. Deixe-me dar-lhe a mesma classe, contact_form_textField. Deixe-me clicar duas vezes nesta área de texto e eu vou mudar seu nome para mensagem, e o espaço reservado vai ser escrever sua mensagem aqui e alguns pontos, e vai ser necessário. Agora é hora de modificar nosso botão Enviar. Deixe-me voltar ao meu arquivo de design. Como você pode ver, este botão Enviar terá o mesmo estilo que usamos para o nosso botão Principal, o Fale Conosco, e também este botão Entrar em contato. Sua altura será de 80 pixels. Vamos em frente e selecionar este botão. Vou dar-lhe uma aula. Vai ser o botão Primário, e então, eu vou dar uma aula de combo. Vamos escrever contato e o texto fica ótimo. Agora precisamos modificar o layout deste formulário. Aqui, como você pode ver, este campo de texto Nome Completo ocupa toda a largura de seu pai, nosso contêiner. Então aqui na segunda linha, temos dois campos de texto e, finalmente, esta mensagem vai ocupar toda a largura de seu elemento pai. Este botão vai ocupar toda a largura do seu recipiente também. Como podemos criar esse layout? Bem, podemos fazer isso usando flexbox, mas seria muito mais fácil se pudéssemos criá-lo usando uma grade, porque mais tarde, quando queremos tornar nosso site responsivo, será muito mais fácil modificar nossa grade em vez de uma flexbox. Vou em frente e criar um envoltório aqui. Eu vou selecionar este bloco de formulário, e eu vou dar-lhe uma classe. Vamos escrever Contat__Formulário. O que precisamos fazer é apenas ir em frente e selecionar este Contact_Form_Wrapper que criamos antes e, em seguida, eu vou mudar sua configuração de exibição de bloco para grade. Lá vamos nós. Para esta grade, vou precisar de seis colunas e seis linhas. Deixe-me ir em frente e adicionar mais quatro colunas usando este botão Plus e mais quatro linhas. Além disso, vou mudar a lacuna para 40 pixels e aqui também, lá vamos nós. Mas eles não parecem bem, isso é totalmente bom. Eu vou apertar “Concluído” e se eu selecionar este bloco div, e se eu passar o mouse sobre este pequeno círculo e clicar e arrastar, eu posso pegar todas essas seis células, exatamente assim. Então eu vou fazer a mesma coisa para o campo de texto de e-mail. Eu vou selecioná-lo e eu vou clicar neste círculo e apenas arrastar para ocupar três células. Vamos fazer a mesma coisa para o campo de texto do telefone. Vai ocupar as próximas três células. O campo de texto da mensagem vai ocupar tantas células diferentes. Na verdade, ele vai ocupar três filas inteiramente. Então, eu vou selecionar este botão Primário e ele vai ocupar todas essas seis células. Até agora, tudo bem. Deixe-me visualizar meu projeto. Como você pode ver, parece bom. No entanto, essa área de texto parece um campo de texto simples, não é o que queremos. Vamos em frente e consertar isso. Se eu selecionar essa área de texto, você poderá ver que sua altura está definida para 70 pixels. Por quê? Porque demos a ele este Contact_form_textField. Agora, eu vou ir em frente e dar-lhe uma aula de combo. Vamos escrever mensagem. Vou substituir este valor padrão de altura para 200 pixels. Agora parece muito melhor, deixe-me pré-visualizar isso. Legal. Mas e o nosso botão? Vou selecioná-lo e vou dar-lhe uma altura específica. Vai ser 80 pixels, exatamente assim. Agora, vamos pré-visualizar nosso projeto. Parece legal. Como você pode ver, assim que eu visualizo meu projeto, este botão subiu um pouco. Isso é porque usamos essa área de texto e está tudo bem. Ele não vai quebrar nosso site, uma vez que esta área de texto não preenche toda a altura de seu contêiner, que é este bloco div Contact__TextField, este botão move-se um pouco para cima. Tudo bem. Agora vou selecionar este título e vou alterá-lo para Fale Conosco. Agora vamos visualizar nosso projeto. Aqui temos a barra de navegação, temos o Fale Conosco, o formulário, o botão Enviar e o rodapé na parte inferior. Tudo parece bem, exceto uma coisa, o preenchimento deste texto de espaço reservado. Vamos em frente e corrigir isso rapidamente. Se eu for para o meu arquivo de designer aqui, você pode ver que este texto, tem mais preenchimento. Ele tem 22 pixels no topo e um preenchimento esquerdo de 20 pixels. Na verdade, eu vou mudar o preenchimento de todos esses campos de texto porque se você der uma olhada no design aqui, você pode ver que todos esses campos de texto têm preenchimento diferente. Como você pode ver, 22 pixels para cima e 20 pixels para esquerda. O que devo fazer? Em vez de alterar o preenchimento aqui para esta classe de combinação de mensagens, eu vou selecionar meu contact_form_textField, este é o nosso campo de texto base principal, e eu vou mudar o preenchimento aqui e a alteração que eu faço aqui será aplicado a esta mensagem também. Deixe-me selecionar este campo de texto e eu vou mudar seu preenchimento superior para 20 pixels, ele é preenchimento inferior para 20 bem, e o preenchimento esquerdo para 20. Agora parece muito melhor, não é? Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado, e te vejo na próxima. 56. Introdução à responsividade: Ei, agora que construímos nosso site com sucesso, é hora de tornar nosso site responsivo. Já falamos sobre os conceitos básicos de breakpoints. Mas agora é hora de aplicar todas as coisas que você aprendeu antes ao nosso projeto. Quando se trata de capacidade de resposta, podemos escolher duas maneiras diferentes. Podemos ir em frente e tornar nosso site responsivo seção a seção, ou podemos fazer nosso site pontos de interrupção responsivos por ponto de interrupção. Ambas as maneiras estão corretas. É uma questão de preferência. Isso depende de você qual você precisa escolher. Deixa-me mostrar-te como funciona. Vou começar com o primeiro caminho, que é seção por seção. Significa que preciso ir em frente e tornar esta barra de navegação responsiva em todos os pontos de interrupção. Em tablet, paisagem móvel e retrato móvel. No entanto, na segunda maneira, que é ponto de interrupção por ponto de interrupção, precisamos ir para o ponto de interrupção tablet e precisamos modificar todas as seções aqui até que estejamos satisfeitos com o resultado desse ponto de interrupção em particular e, em seguida, passaremos para o próximo ponto de interrupção. Isso é exatamente o que vamos fazer. Primeiro, vamos para o ponto de interrupção do tablet e vamos modificar todos os elementos aqui. Então vamos para a paisagem móvel e, finalmente, vamos para o retrato móvel. Mas você é livre para escolher entre essas maneiras. Tudo bem, pessoal. Isso é tudo para este vídeo e vamos começar a tornar nosso site responsivo no próximo vídeo. Vejo você lá. 57. Tablet de resposta: Neste vídeo, vamos começar a tornar nosso site responsivo. Como eu mencionei antes, vamos ponto de interrupção por ponto de interrupção em todas as páginas. Vamos começar com o tablet. Agora, na área de trabalho, tudo parece bem, mas se eu for para o ponto de interrupção do tablet, tudo está confuso aqui. Mas não se preocupe, nós vamos consertar isso. Vamos começar com a barra de navegação. Como você pode ver aqui na parte superior, esta barra de navegação tem alguns problemas. A forma como estes elementos estão alinhados é errada, porque no tablet não precisamos mais obter este botão Fale Conosco. Precisamos esconder isso. Além disso, este botão de menu de hambúrguer deve ser colocado no lado direito. Aqui temos esta margem adicional, esta margem superior adicional. Vamos em frente e consertar isso. Primeiro de tudo, vou clicar duas vezes sobre ele porque para mudar este símbolo, precisamos ir para o símbolo mestre. Vamos começar por esconder este botão. Eu vou selecioná-lo, e se você se lembrar, quando você quiser ocultar um elemento, você pode ir para a configuração de Exibição de layout e você pode alterar sua configuração de exibição para nenhuma. Lá vamos nós. Ele está escondido agora, mas aqui este logotipo está tocando a borda da nossa porta de visão, que não é exatamente o que queremos. Vou selecionar este contentor, o contentor dentro da nossa barra de navegação. Como você pode ver, o preenchimento está definido como 0. Eu vou seguir em frente e mantenha pressionada a tecla de opção no meu teclado ou tecla Alt e clique e arraste e adicione 30 pixels de preenchimento esquerdo e direito simultaneamente. Agora parece muito melhor. Mas e quanto a essa margem máxima? Como você pode ver aqui, nós temos 70 pixels de margem superior, e eu vou selecioná-lo, e então eu vou defini-la como 0. Lá vamos nós, porque no tablet não precisamos dessa margem adicional. Lembre-se que as alterações que eu fizer aqui afetarão outros pontos de interrupção também. Mais tarde, quando passamos para paisagem móvel e retrato móvel, seria muito mais fácil mudar o layout para esses pontos de interrupção. Uma vez que estamos satisfeitos com o resultado, podemos clicar sobre isso de volta para o botão Instância, e podemos passar para a próxima seção, que é a nossa seção herói. Nossa seção de heróis está completamente desorganizada aqui. Por quê? Porque se você se lembrar, para este recipiente, nós definimos a direção dos picos de fluxo para horizontal. Isso fazia sentido para o ponto de interrupção da área de trabalho, mas para o tablet e pontos de interrupção menores, faria muito mais sentido mudar a direção para vertical. Vou selecionar este contêiner aqui. Vou modificar a direção para vertical. Já parece muito melhor agora. Então eu vou alinhar tudo ao centro aqui. Legal. Agora é hora de selecionar nosso cabeçalho, e então eu vou mudar seu alinhamento topográfico da esquerda para o centro. Vou alinhar todas estas camadas de tomadas ao centro. Eu vou selecionar este Hero_Description, e eu vou fazer a mesma coisa aqui, mas seu alinhamento não parece bom. Por quê? Porque se eu selecionar este herói conteúdo Div bloco e eu rolar para cima, Eu posso abrir este alinhamento e ordem aqui. Aqui eu posso modificar os alinhamentos da criança flex. Neste caso, este herói conteúdo Div bloco é o filho flex deste recipiente, porque o nosso recipiente é um Flexbox, este conteúdo herói é seu filho. Vou mudar o alinhamento para o centro. Então eu vou mudar a largura máxima deste conteúdo herói. Neste momento, a largura máxima deste bloco de conteúdo de herói Div está definida para 530 pixels. Isso é bom. No entanto, uma vez que mudamos a direção da nossa Flexbox de horizontal para vertical, faria muito mais sentido aumentar a largura máxima aqui, já que estamos alinhando tudo verticalmente agora. Vou mudar a largura máxima de 530 pixels para 700 pixels. - Legal. Então eu vou selecionar este Hero_Description, e eu vou fazer a mesma coisa para estes bloco de texto também. Vou aumentar a largura máxima para 600 pixels, mas não está alinhada ao centro. Como posso consertar isso? Bem, eu posso simplesmente selecionar este conteúdo de herói da sorte e eu posso mudar sua configuração de exibição para Flexbox, e então eu posso mudar sua direção para vertical. Finalmente, alinhe tudo ao centro, assim mesmo. Até agora, tudo bem. Agora é hora de ir para o nosso herói botões Div bloco. Como você pode ver, nosso botão entrar em contato desapareceu. Por que é isso? Isso porque quando alteramos a configuração de exibição do nosso botão na barra de navegação, esquecemos de adicionar uma classe de combinação. Deixa-me mostrar-te. Se eu ir para a barra de navegação e se eu selecionar esses botões primários, você pode ver que este botão tem apenas uma classe. Esta é a classe básica do botão principal. Nosso botão entrar em toque aqui tem também esta classe botão primário. Deixe-me ir a este bloco Div. Lá vamos nós. Se eu selecioná-lo no navegador, você pode ver que a classe base é botão primário, e aqui temos uma classe de combinação. Portanto, tenho duas maneiras de corrigir isso. Eu posso substituir a configuração de exibição aqui ou eu posso ir em frente e adicionar uma classe de combinação ao botão em nossa barra de navegação. Eu acho que seria muito mais fácil substituir a configuração de exibição para preto aqui. Já que temos essas aulas de combinação de heróis. Vou pô-lo a preto, e lá está ele. Ele aparece de novo. Mas esses botões devem sentar-se um ao lado do outro. Eles não deveriam se empilhar um em cima do outro. Eu vou selecionar esses botões herói, bloco Div, e então eu vou mudar sua configuração de exibição para Flexbox e a direção é definida como horizontal. - Legal. Nossos botões também ficam ótimos. Aqui, como podem ver, temos tantas margens superiores e não é isso que queremos. Se eu selecionar este conteúdo de herói, você pode ver que, por padrão, ele tem uma margem superior de 114 células de pico. Esta é a margem que definimos no ponto de interrupção da área de trabalho. Vou substituir isso para 0 agora, mas ainda temos muito espaço vazio aqui. Vou selecionar minha seção. Aqui, a margem superior é definida como 100 pixels. Vou mudar para 50. Agora tudo parece ótimo. Mas e sobre a seção de imagens? Como você pode ver esta imagem, parece tão grande. Vamos em frente e consertar isso. Deixe-me selecionar esta imagem de herói, bloco Div, e eu vou entrar e deixe-me escolher esta imagem principal. Como você pode ver, nós não demos nenhuma classe a ele. Eu vou ir em frente e dar-lhe uma aula. Agora, vamos escrever Hero__ Image__Main. Posso clicar duas vezes nele. Como você pode ver, a largura é definida como auto. Vou diminuir para algo em torno de 500 e talvez 60 ou 70 pixels. Você pode tentar números diferentes aqui se você não tiver um número específico e ver se ele parece bem ou não. Agora parece muito melhor. Essas cartas também são grandes demais. Vou selecionar estes Herói Card 1, e vou reduzi-lo um pouco assim. Aqui a largura é de 328 pixels. Para este, vou ajustá-lo para 328 também. Mas como você pode ver aqui, não temos espaço suficiente entre nossos botões e nossas imagens. Bem, eu vou selecionar esta imagem de herói, e eu vou dar-lhe uma margem superior. Deixe-me aumentar a margem superior para cerca de 40 pixels. Nossa seção de heróis está ótima agora. Agora podemos passar para a próxima seção. Se eu selecionar esta grade, você pode ver que no tablet não temos tanto espaço. Portanto, podemos remover um desses logotipos quando vamos para o tablet ou pontos de interrupção menores. Como podemos fazer isso? Isso é tão simples. Eu posso simplesmente selecionar este bloco Amazon Div, o último logotipo. Eu vou dar-lhe uma classe de combinação porque nós vamos mudar sua configuração de exibição para nenhum, e nós não vamos afetar outros logotipos. Vamos escrever a Amazon aqui. Então eu vou mudar sua configuração de exibição de flex para nenhum. Lá vamos nós, desapareceu, mas aqui temos tanto espaço. Não seria melhor se pudéssemos ter duas linhas de logotipo em vez de uma linha? Eu acho que sim. Vou editar esta grade. Se eu selecionar esses logotipos de grade, e se eu clicar neste botão rosa aqui, eu posso simplesmente adicionar mais uma linha e eu posso remover algumas dessas colunas. Deixe-me remover essas colunas. Agora eu tenho uma grade de dois por dois. Vou mudar a lacuna aqui para a coluna para 40 pixels. Deixe-me tocar “Concluído”. Eles parecem bem, mas eles não estão centrados, como você pode ver aqui eles estão alinhados ao lado esquerdo de suas células. Como podemos consertar isso? Enquanto este Grid_Logos é selecionado, eu posso alterar seu alinhamento para centralizar e aqui, centro também. Agora estão incríveis. seção do nosso cliente também está pronta. Agora podemos passar para a próxima seção. Aqui temos a seção recente do projeto, e eu acho que não precisamos modificar nada aqui. Deixe-me mudar a dimensão desta tela para ver se precisamos mudar alguma coisa ou não. Se eu pegar este cabo aqui do lado direito e arrastar em termos de fluidez, eles ficam bem. Mas aqui temos um problema. Como você pode ver, estes botão Saiba mais, mova um pouco para baixo. Isso ocorre porque esta descrição do projeto tem algumas margens inferiores. Vou selecioná-lo, e vou diminuir essa margem de 40 para talvez 10. Agora parece muito melhor. Lá vamos nós. Agora podemos ir para a outra seção, que é a seção de depoimento. O que devemos fazer aqui? Bem, primeiro, precisamos diminuir sua margem máxima. Vou selecionar esta seção, e vou diminuir sua margem superior de 200 pixels para 100 pixels porque é demais agora. Parece muito melhor, então eu vou selecionar este título de testemunho. Eu vou definir a largura máxima para que tenha uma linha verdadeira textos aqui. Vou escrever 400 pixels. Lá vamos nós. Então eu vou modificar seu alinhamento de texto aqui para centralizar e deixe-me aumentar a altura da linha para 150. Cinquenta por cento e a próxima coisa que precisamos consertar aqui é o fundo da nossa órbita. Como podem ver, a nossa órbita foi repetida. Vou selecionar minha seção e vou para os fundos aqui. Se eu clicar nesta imagem órbita, partir daqui você pode ver que a posição está definida para o canto superior esquerdo e a opção de mosaico está habilitada. Eu vou definir o azulejo para azulejo amanhecer e, em seguida, eu vou reposicioná-lo para o centro e, finalmente, eu vou mudar seu tamanho para cobrir em vez de conter, agora parece ótimo. A próxima coisa que vou modificar aqui é o tamanho destes Memojis. Se eu selecioná-los aqui, você pode ver que sua largura e altura estão definidas para 150 pixels. Como temos menos espaço em um tablet, vou diminuir para 130 por 130 pixels. Como esses Memojis têm suas próprias classes de combinação, as mudanças que eu faço neste primeiro Memoji não se aplicam a outros Memojis aqui. Podemos ir em frente e modificar o tamanho de cada memoji, ou eu poderia simplesmente desfazer esta operação, é Command Z ou CTRL+Z. Eu posso remover essas classes combo. Ele foi movido para baixo, isso é totalmente bom. Então eu posso diminuir sua largura e altura para 130 por 130 pixels e novamente, eu vou adicionar sua classe de combinação a ele, um lá vamos nós. Nossa seção de depoimento também é feita. Agora vamos passar para a seção Serviços. Acho que tudo parece bem aqui, mas há um problema. Se eu apenas diminuir essa dimensão, você pode ver que esse botão Saiba mais se move para baixo e não está alinhado com outros botões Saiba mais. Isso é um problema, então como podemos resolver isso? Vou selecionar esta descrição do projeto e vou aumentar sua margem inferior de 10 para, digamos, 50 pixels. Em seguida, vou selecionar o bloco div de conteúdo de serviço. É o bloco div que contém o texto de serviço e este botão, como podemos ver aqui. Vou definir um máximo específico para isso. Agora ele está definido como auto eu vou configurá-lo para 100 por cento, que ele ocupa toda a altura disponível do meu cartão, assim como agora ele está fixo. Deixe-me verificar mais uma vez, tudo parece perfeito agora. Agora vamos passar para a próxima seção, que é o nosso CTA. Como você pode ver, nosso botão desapareceu aqui novamente. Este é o mesmo problema que tivemos com este botão aqui, com este botão de toque recebendo então precisamos apenas substituir sua configuração de exibição para bloquear. Vou clicar duas vezes nesta seção CTA e se eu for para o contêiner e procurar meu botão dentro do formulário aqui, eu posso selecioná-lo e posso substituí-lo para bloquear. Não há mais nada que precisamos fazer, tudo parece ótimo. Mas e o rodapé? Deixe-me verificar. O rodapé parece bom também. A única coisa que vou fazer é diminuir a margem máxima porque aqui temos muito espaço. Vou clicar duas vezes nele. Aqui, como você pode ver, ele tem uma margem superior de 200 pixels. Posso diminuí-la para 100 pixels, agora parece muito melhor. Eu vou fazer o mesmo para a seção CTA. Se eu clicar duas vezes sobre ele, você pode ver que sua margem superior está definida como 200, eu vou defini-la como 100 aqui para ter um espaçamento consistente. E quanto a isso, nossos serviços aqui? A mesma coisa aqui também. No entanto aqui eu não tenho nenhuma classe de combinação, então eu vou adicionar uma classe de combinação aqui. Eu vou escrever nossos serviços e então eu vou diminuir sua margem superior de 200 para 100 pixels. Parece muito melhor agora. Mas aqui como você pode ver, ainda temos o problema com este botão Saiba mais. Aqui, se eu selecionar esta descrição do projeto, você pode ver que sua margem inferior está definida como 50, é demais, então eu vou diminuí-la para 10 pixels, e agora o problema está resolvido. A última coisa que vou fazer aqui é selecionar esta seção, esta seção recente do projeto, e eu vou diminuir sua margem superior de 200 para 100 pixels. Agora tudo parece ótimo. Vamos em frente e verificar tudo. Nossa barra de navegação está bem, vou verificar sua fluidez. Nossa seção de heróis parece bem, eu vou rolar para baixo, nossa seção de logotipo parece bem, os projetos recentes, a seção de depoimento, então temos nossos serviços, a seção CTA, e nosso rodapé. Tudo parece ótimo. Nossa página inicial está feita, mas e as outras páginas? Agora é hora de ir em frente e tornar nossas outras páginas responsivas, bem como, por exemplo, entre em contato conosco e com a página do projeto. Deixe-me ir às páginas. A partir daqui eu vou para a página Fale Conosco. Como você pode ver, tudo pronto parece bom. Por que é isso? Isso é porque usamos uma grade aqui. Quando você usa grades em vez de flexboxes, ele é responsivo por padrão. Como você pode ver, é fluido e tudo parece ótimo, então não precisamos mudar o layout completamente. A única coisa que precisamos fazer aqui é selecionar nosso botão e simplesmente substituir essa configuração de exibição de nenhum para bloquear, exatamente assim. Agora você pode ver que parece ótimo, bom, se eu visualizar isso. Mais uma coisa que notei aqui é esta margem máxima. Temos muito espaço aqui no topo. Vou em frente e consertar isso rapidamente. Se eu selecionar esta seção, você pode ver que ela tem uma margem superior de 200 pixels. Eu vou reduzi-lo para 100 pixels e lá vamos nós, nossa página Fale Conosco também é responsiva. Agora vamos em frente e verificar nossa página do projeto. Se eu for para a página da coleção CMS e se eu for para a página do projeto, aqui eu posso verificar se tudo parece bem ou não. Permitam-me diminuir a dimensão, até agora tão bom. Não precisamos modificar a parte superior. Que tal aqui? Bem, eu acho que podemos aumentar o tamanho da fonte deste texto de alcance, mas não apenas para o tablet, podemos aumentá-lo para o desktop também. Vou para o ponto de interrupção da área de trabalho por um segundo e enquanto estiver selecionado, vou aumentá-lo para 20 pixels. Então, eu vou aumentar a altura da linha para 150 por cento. Parece muito melhor. Esquecemos de aumentar antes, e agora está consertado. Deixe-me ver se preciso mudar mais alguma coisa aqui, parece bom. E quanto a esses outros projetos cartão? Deixe-me ver, não, eles estão ótimos. E sobre a seção CTA? Parece ótimo também, o rodapé parece bem também. Não preciso modificar mais nada. Essa é a beleza de criar sites com Webflow, maioria das coisas são responsivas por padrão, então não precisamos fazer tantas mudanças diferentes. Tudo bem, pessoal, isso é tudo pelo ponto de quebra do tablet. Nós modificamos com sucesso nossa página inicial, página Fale Conosco e a página do projeto. Agora é hora de passar para o cenário móvel. Esta é a tarefa para a nossa próxima lição. Vejo você no próximo vídeo. 58. Paisagem móvel: Ei, agora é hora de ir em frente e trabalhar no ponto de interrupção da paisagem móvel. Você está pronto? Vamos começar. Eu vou para a paisagem móvel aqui, e vamos ver se precisamos fazer algumas mudanças aqui. Este cabeçalho parece um pouco grande para a dimensão paisagem móvel. Portanto, vou selecioná-lo e vou diminuir seu tamanho de fonte de 60 pixels para 40 pixels. Eu vou fazer a mesma coisa com isso aqui, descrição. Vou selecioná-lo. Como você pode ver seu tamanho é definido para 20 pixels, eu vou defini-lo para 17 pixels. Não precisamos modificar nossos botões. Esta seção parece bem também. No entanto, para a paisagem móvel e o retrato móvel, eu acho que faz muito mais sentido esconder esses dois cartões pequenos, porque em telas móveis não temos tanto espaço. Portanto, não precisamos fazer nosso design barulhento. Eu vou selecionar este card de herói 1, e eu vou ir em frente e definir sua configuração de exibição para nenhum, aqui bem para estes card de herói 2. Lá vamos nós, e eles estão escondidos na paisagem móvel e no retrato móvel. Porque, como você se lembra, as mudanças que fizermos em nossos pontos de interrupção serão reduzidas em cascata. Vamos passar para a próxima seção. Nossa seção de heróis parece bem. Vou rolar para baixo. E sobre a seção de clientes? Parece bem também. No entanto, aqui temos tanto espaço, então eu vou selecionar esta seção de cliente aqui, e então eu vou definir sua margem superior para zero em vez de 130 pixels, exatamente assim. Agora, parece muito melhor, porque quando se trata de interação móvel não queremos que o usuário role tanto para poder consumir o conteúdo. Portanto, se pudermos, devemos diminuir as margens entre nossas seções. E sobre a seção de projetos recentes, aqui temos um problema. Como podem ver, estas cartas estão fora da nossa tela. Lá vamos nós. Como podemos consertar isso? Bem, a melhor solução é apenas selecionar esta lista de coleção. Se você se lembra, usamos a grade para isso. Vou modificar a tela. Aqui temos uma linha e três colunas. Eu vou clicar neste botão rosa, e eu vou remover duas colunas e adicionar duas linhas para empilhá-las verticalmente. Deixe-me ir em frente e remover duas colunas aqui, e adicionar duas linhas. Lá vamos nós, mas aqui temos um problema. Como você pode ver, este cartão não ocupa toda a largura de seu pai. Como podemos consertar isso? Se eu ir em frente e selecionar meu bloco div aqui, este bloco de div carro projeto, você pode ver que definimos uma largura máxima para isso. Eu vou mudar essa largura máxima de 340 pixels para 100 por cento para ocupar toda a largura de seu elemento pai. Lá vamos nós. Agora ocupamos toda a largura de sua célula em nossa grade e o problema é resolvido. Agora deixe-me verificar. Lá vamos nós. Tudo parece fluido, parece incrível. E a próxima seção? Uau, aqui tudo está desorganizado. Vamos em frente e consertar isso. Primeiro, vou selecionar este cabeçalho e vou diminuir o tamanho da fonte de 40 pixels para 30 pixels. Além disso, eu vou aumentar sua largura máxima de 400 pixels para 500 pixels, exatamente assim. Então vou selecionar nosso contêiner aqui. Se eu rolar para cima, você pode ver que a justificativa está definida para o espaço ao redor. Vou mudá-lo para o centro. Deixe-me selecionar este texto de testemunho e diminuir seu tamanho de fonte para 17 pixels. É muito grande para o nosso ecrã móvel, e vou dar-lhe algumas margens inferiores. Isso está a 30 pixels de margem inferior aqui. Vou selecionar meu título aqui, e vou aumentar sua margem inferior para 30 pixels para ter um espaçamento consistente para todos os nossos elementos. Agora tudo parece bom. Como você pode ver em termos de fluidez, parece bom, então estamos prontos para ir. Vamos passar para a próxima seção. Aqui temos o mesmo problema que tivemos para esta seção recente do projeto. A solução é a mesma. Eu vou em frente e selecionar esta grade de serviços, e então eu vou mudar essa grade. Vou remover duas colunas. Então eu vou adicionar duas linhas aqui. Então eu vou selecionar este cartão de serviço e alterar sua largura máxima de 340 pixels para 100 por cento, que ele ocupa toda a largura de seu elemento pai. Tudo parece bem, exceto este ícone. Vamos selecioná-lo. Como você pode ver, esta é uma criança flexível, e se nós vamos para o tamanho aqui do lado direito, você pode ver que ele está ajustado para encolher se necessário. Temos outras duas opções. Nós crescemos se possível e nós não encolhemos ou crescemos. Eu vou configurá-lo para não encolher ou crescer, e lá vamos nós, parece bem agora. No entanto, uma vez que tem uma classe de combinação, a alteração aplicada apenas a este bloco div particular. Vou redefinir esta propriedade, mantenha pressionada a tecla “Option” ou a tecla “Alt” no seu teclado e clique nela. Então eu vou remover essa classe de combinação. Agora vou mudar o tamanho para não encolher ou crescer. Finalmente, vou adicionar a primeira classe de combinação a ele. Agora, tudo parece bem. Deixe-me verificar. Mas aqui temos outro problema. Como podemos ver, esta descrição do projeto não tem margem inferior suficiente. Enquanto estamos no ponto de interrupção da paisagem móvel, vou selecionar esta descrição do projeto e vou aumentá-la de 10 pixels para 40 pixels. Agora parece muito melhor. Você pode ver como é fácil tornar seu site responsivo? Você só precisa modificar os estilos em diferentes pontos de interrupção. Esta seção parece bem também. E sobre a seção CTA? Esta seção requer algumas modificações, então vamos em frente e fazer algumas alterações. Primeiro de tudo, vou selecionar este título e vou diminuir seu tamanho de fonte de 40 pixels para 30 pixels. Este subtítulo parece bem, e aqui nossa forma tem uma direção horizontal. Vou mudá-lo para vertical, mas este botão não ocupa toda a largura de seu pai. Bem, deixe-me selecionar este botão “Assinar” aqui, e eu vou definir sua largura para 100 por cento. Vou remover esta margem esquerda aqui de 20 pixels para zero. - Legal. Também vou definir uma altura específica para isso, então deixe-me escrever 80 pixels. A única coisa que resta é adicionar algumas margens superiores aqui. Vou dar-lhe uma margem máxima de 20 pixels, apenas assim. Agora deixe-me voltar para o meu interior. Aqui está. Parece incrível. Não é? A última coisa que precisamos mudar aqui é o nosso rodapé. Como você pode ver, esse layout não parece bom para nosso cenário móvel e retrato móvel definitivamente, então o que devemos fazer? Aqui temos uma direção horizontal. Vou clicar duas vezes neste rodapé, e eu vou selecionar meu contêiner, e então eu vou modificar a direção da horizontal para a vertical. Também vou mudar o alinhamento para o centro. Então eu vou selecionar este bloco div conteúdo rodapé e alinhar tudo para o centro. Também vou selecionar este endereço e mudar seu alinhamento topográfico para o centro. Finalmente, eu vou selecionar este bloco div conteúdo de rodapé, e eu vou adicionar algumas margens inferiores aqui. Vamos adicionar uma margem inferior de 30 pixels aqui. Parece fantástico. Nossa página parece bem. Agora vamos em frente e modificar outras páginas. Eu vou para a minha página de contato conosco. Vamos ver como fica aqui. Aqui temos um problema. Primeiro, vou selecionar este título e vou diminuir o tamanho da fonte de 60-40. Então, precisamos modificar o layout do nosso formulário. Vou selecionar este invólucro de formulário de contato, a grade que criamos. Se eu clicar neste botão rosa, você pode ver que temos seis colunas e seis linhas. Na minha opinião, não é uma boa grade para estes paisagem móvel e até mesmo para retrato móvel. Em vez de ter esses dois campos de texto, o e-mail e os campos de texto do telefone sentados um ao lado do outro. Eu vou fazer todos esses campos de texto empilhados um sobre o outro. Deixe-me ir em frente e remover três colunas daqui, exatamente assim, e eu vou remover uma linha também. Nada mudou. Isso mesmo, porque precisamos ir em frente e selecionar manualmente nosso bloco div, o primeiro. Como você pode ver, este bloco div ocupa seis colunas. Não é isso que queremos. Vou clicar neste pequeno círculo e arrastá-lo para o lado esquerdo até ocupar três células. Legal, eu vou fazer a mesma coisa para este bloco div mensagem também. Este é o nosso último bloco div. Vamos em frente e fazê-lo ocupar apenas três células. Parece legal, mas e esse botão? Vou selecioná-lo e vou fazer a mesma coisa aqui. Lá está ele. Agora nosso layout parece muito melhor. Vamos pré-visualizar. Aqui está a nossa forma, parece ótimo em termos de fluidez e capacidade de resposta. Você já notou que nosso rodapé foi alterado nesta página também. Uma vez que estamos usando símbolos, quando fazemos nossos símbolos responsivos em uma página, ele irá mudar em outras páginas também. Agora vamos passar para a página do projeto. Eu estou indo para ir em frente e deixe-me selecionar este modelo de projetos, legal. Vamos ver o que temos aqui. Como posso ver, o título parece bom. O tipo de página do projeto parece bom. Primeiro de tudo, eu vou selecionar este wrapper tipo de projeto e eu vou mudar sua direção para vertical, agradável. Então deixe-me selecionar este bloco de texto tipo de página do projeto e vamos adicionar algumas margens inferiores a ele. Vou adicionar 10 pixels aqui, parece bom. O que mais precisamos fazer aqui? Como você pode ver aqui, a margem superior desta imagem é demais. Se eu selecionar este wrapper de tipo de projeto, você pode ver que ele tem uma margem inferior de 80 pixels. Eu vou ir em frente e diminuí-la para 40 pixels. Agora parece muito melhor. Vou rolar para baixo. Aqui, como podem ver, temos muito espaço também. Vamos selecionar esses textos ricos aqui. Então eu vou diminuir sua margem superior de 70 pixels para 20 pixels. Além disso, eu vou ir em frente e diminuir o tamanho da fonte de 20 pixels para 17 pixels. Porque agora estamos em telas móveis. Eu vou rolar para baixo, eu vou selecionar esses outros projetos título, e eu vou diminuir seu tamanho de fonte para 30 pixels. Aqui, como podem ver, temos muito espaço. Deixe-me selecionar minha coleção este wrapper, e eu vou diminuir sua margem superior de 70 pixels para 30 pixels. Vou rolar para baixo. Tudo parece bem. Aqui tudo parece bem também. Agora deixe-me verificar a fluidez dos meus elementos, bom. Tudo é responsivo. Que tal aqui, ótimo. Eu acho que se eu selecionar este tipo de página de projeto e eu adicionar mais margens de botão, seria muito melhor. Vou definir a margem inferior para 20 pixels. Parece muito melhor agora. Aqui não temos espaçamento consistente. Vou selecionar este wrapper tipo de projeto. Adicionei uma margem inferior de 40 pixels aqui. Para esses rich text, adicionei uma margem superior de 20 pixels. Vou aumentar esta margem máxima para 40 pixels para ter um espaçamento consistente. Agora parece ótimo. Tudo bem, pessoal, isso é tudo por este vídeo. Nós modificamos com sucesso as propriedades CSS de nossos elementos nos pontos de interrupção da paisagem móvel e verificamos a fluidez de todos os nossos elementos. Espero que tenha gostado deste vídeo e te vejo no próximo. 59. Retrato de responsividade móvel: Ei, bem-vindo de volta. Neste vídeo, vamos em frente e tornar nosso site responsivo no ponto de interrupção do retrato móvel. Se você está pronto, vamos começar. Vou ao ponto de interrupção do retrato móvel e vamos ver o que temos aqui. Vou verificar a fluidez. A maioria dos nossos elementos parece bem porque já fizemos algumas alterações no ponto de interrupção da paisagem móvel. Não precisamos fazer tantas mudanças aqui. A primeira coisa que noto aqui é o tamanho da fonte deste cabeçalho. Para retrato móvel, parece muito grande. Vou selecioná-lo e vou diminuir o tamanho da fonte para 30 pixels. O tamanho da fonte desta descrição de herói parece bom. Não vou mudar isso. E quanto a esses botões? Eles parecem bem, mas vamos ver se eu faço esta tela menor, como eles ficam. Como você pode ver, eles serão encolhidos e isso não é o que eu quero. Vou selecionar este bloco, botões de herói. Deixe-me rolar para cima. A direção deste flexbox é horizontal. Vou mudá-lo para vertical. Então eu vou selecionar este botão “Entrar em contato” e deixe-me remover sua margem direita. Vou ajustá-lo para 0, bom. Finalmente, vou adicionar algumas margens inferiores a ele. Vamos definir sua margem inferior para 20 pixels. Agora, se eu verificar a fluidez dos meus elementos, você pode ver que eles não estão mais encolhidos. Legal, a imagem parece boa. Nós já removemos esses cartões. Logotipos parecem bem também. No entanto, uma vez que aqui temos menos espaço para trabalhar. Acho que podemos ir em frente e modificar o preenchimento esquerdo e direito de nossas seções. O que você acha? Acho que é uma boa ideia. Vou selecionar esta seção. Como você pode ver, o preenchimento esquerdo e direito estão definidos para 30. Vou diminuí-la para 20 pixels. Mas como eu vou aplicar essa alteração a Todas as seções, primeiro, eu vou remover a classe de combinação de heróis porque eu preciso fazer essa alteração para minha classe base, essa classe de seção. Vou remover esta classe de combinação de heróis. Em seguida, vou manter pressionada a tecla Option ou a tecla Alt no meu teclado e diminuir o preenchimento para 20 pixels. Mais uma vez, vou adicionar a classe de combinação de heróis a ela. Legal. Agora, como você pode ver, o preenchimento esquerdo e direito de todas as seções foram modificados. Se eu selecionar a seção de clientes, lá vamos nós, o preenchimento foi alterado. Se eu selecionar esta seção de projetos recentes, lá está, e agora eles parecem muito melhores. A seção de projetos recentes parece bem. Vou rolar até aqui. Acho que precisamos remover alguns desses emojis porque esta seção é muito barulhenta. Como posso remover estes emojis? Eu não posso simplesmente apertar Backspace ou Delete porque, nesse caso, ele será removido de todos os pontos de interrupção. Portanto, eu vou definir sua configuração de exibição para nenhum. Vou selecionar este e vou fazer a mesma coisa. Então eu vou selecionar esses dois emojis e vamos mudar sua posição aqui. Vamos colocar para cima à esquerda. Para este eu vou colocá-lo para cima à direita. Vamos movê-los um pouco para baixo. Talvez eu possa mudar sua posição de topo um pouco. Vou definir para 5 por cento para ambos. Parece legal. E o tamanho da fonte aqui? O tamanho da fonte parece bom. Na minha opinião. Não precisamos modificar isso, mas aqui temos muito espaço. Talvez eu possa selecionar esta seção e eu possa diminuir sua altura de 622 pixels para talvez 550 pixels. Agora parece muito melhor, na minha opinião. A última coisa que vou fazer é mudar o tamanho destes emojis. Vou selecionar este emoji e vou diminuir sua largura e altura para 100 pixels. Eu vou fazer a mesma coisa aqui, já que eles têm algumas aulas de combinação. Eles parecem muito melhores agora. Agora que os tornei menores, vou mudar de posição novamente. Deixe-me movê-lo para o lado esquerdo em 5 por cento. Vou mover este emoji para o lado direito em 5%. Incrível. Deixe-me verificar a fluidez dos meus elementos. Legal. Tudo parece responsivo e parece ótimo. Vamos passar para a próxima seção, que é nossos serviços. Essas cartas parecem ótimas. Não precisamos fazer alterações. Vou para a próxima seção, que é a seção CTA. Primeiro eu vou selecionar esses títulos CTA e eu vou alinhá-lo ao centro na seção de tipografia, provavelmente eu posso aumentar a altura da linha também para 150 por cento. E quanto a este formulário? Bem, eu posso selecionar este bloco de formulário e sua largura é definida como auto. Eu posso configurá-lo para 90 por cento e eu vou selecionar este campo de texto dentro do rapper de campo de texto CTA, e eu vou mudar sua largura para 100 por cento. Agora é preciso 100 por cento de seu pai com nada mais e nada mais é necessário. Na verdade, parece muito bom. Rodapé parece bem também. Nossa página inicial está pronta. Vamos verificar mais uma vez. Se eu tentar tornar esta dimensão ainda menor, eles estarão fora do nosso visor. Bem, podemos consertar isso. Podemos apenas selecionar esses logotipos de grade e, em seguida, modificar a grade. Poderíamos simplesmente adicionar mais duas linhas e apenas remover uma dessas colunas. Simplesmente assim. Agora não enfrentaremos mais esse problema. Nossa página inicial parece incrível. Agora vamos em frente e conferir outras páginas. Eu vou para a página Fale Conosco aqui tudo parece bem. Eu só vou pré-visualizar e deixe-me ver se ele funciona bem em termos de fluidez, parece muito bom. Isso é porque usamos a grade. Nosso botão também parece bom. E sobre a nossa página do projeto? Deixe-me ir para a página do projeto aqui e deixe-me verificar se ele funciona perfeitamente bem. Tudo parece bem. Como você pode ver, eu preciso aumentar a altura de linha deste tipo de página de projeto. Vou selecioná-lo e vou aumentar a altura da linha para 150 por cento. Agora parece muito melhor. Vamos verificar outros elementos. O tamanho da fonte parece bom. A seção de outros projetos parece bem também. Eu vou rolar para baixo a seção CTA parece bem, já que é um símbolo. Mas aqui, na seção CTA, temos um problema, que é o preenchimento. O preenchimento aqui não é consistente. Para outras seções usamos um preenchimento esquerdo e direito de 20 pixels. Mas para estes CTA, vou selecionar esta seção. Como você pode ver, temos o preenchimento esquerdo e direito de 20 pixels. Vamos ver como podemos consertar isso. Se eu selecionar este bloco de formulário, já definimos a largura para 90 por cento. Acho que podemos definir para 100% para corrigir esse problema. Vamos ver se enfrentaremos algum problema em termos de fluidez. Vou voltar para o meu incenso. Aqui eu vou pré-visualizar. Não, parece bem. Simplesmente assim. Parece muito melhor agora. Muito bem, pessoal, agora temos um site totalmente responsivo. Você viu como é fácil trabalhar com pontos de interrupção e propriedades CSS? Se você seguir as regras e o básico, tudo é fácil. Vou em frente e verificar todas as páginas agora. Eu vou para a página inicial. Vou pré-visualizar. A área de trabalho parece boa. Tudo parece ótimo aqui em todos os dispositivos. Deixe-me passar para outras seções aqui, logotipos. Legal. E quanto a projetos recentes? Parece ótimo em todos os pontos de interrupção. E quanto ao depoimento? Ótima. Nossos serviços, deixe-me verificar. Opa, aqui temos um problema com os ícones. Deixe-me ir em frente e consertar isso. Vou selecionar este ícone de serviço e vou alterar o tamanho deles para não encolher ou crescer. Vou fazer a mesma coisa por todos eles. Legal, e vamos verificar mais uma vez. Legal. E sobre a seção CTA? Parece incrível e o rodapé parece ótimo também. Agora vamos para a página Fale Conosco e eu vou pré-visualizá-la. A versão desktop parece bem, o tablet também parece bem. Paisagem móvel parece incrível e retrato móvel. Mas se formos para a página do projeto, vamos verificar. Vou pré-visualizar. Parece bem aqui na área de trabalho. Vou tomar comprimidos. Lá vamos nós. Vou rolar para baixo tudo parece bem. Deixe-me ir para a paisagem móvel. Todas as seções olhar grandes e retratos móveis, bom. Uma coisa que eu notei aqui é quando estamos no ponto de interrupção da área de trabalho e quando eu faço a tela menor, apenas assim, você pode ver em algum momento estes botão Fale Conosco toca as bordas de nossos relatórios. Não é o que queremos, então precisamos consertar isso. Como podemos consertar isso? Bem, deixe-me ir em frente e ir para o meu Navbar. Se eu selecionar esta barra de navegação no navegador, você pode ver que não há preenchimento. Enquanto eu estiver sob ponto de interrupção da área de trabalho, eu vou adicionar um acolchoamento esquerdo e direito de 30 pixels aqui. Deixe-me manter pressionada a tecla Option ou a tecla Alt no meu teclado e adicionar algum preenchimento esquerdo e direito à minha barra de navegação. Mas aqui temos outro problema, este recipiente tem algum preenchimento também. Eu vou ir em frente e remover o preenchimento aqui de 30 pixels para 0. Além disso, o preenchimento direito será 0 também. Agora vamos ver se funciona. Vou torná-lo menor. Lá vamos nós. Na área de trabalho, parece ótimo agora porque temos esses estofamento adicional no lado direito e esquerdo. Mas e se eu for ao tablet? Vamos ver o que acontece. Aqui temos este preenchimento adicional e precisamos ir em frente e modificá-lo. Enquanto estou no ponto de interrupção do tablet, vou selecionar o “Navbar”, e vou redefinir esse preenchimento esquerdo e direito de 30 pixels. Vou ajustá-lo para 0. Aqui eu vou defini-la como 0 também. Legal, e vamos ver o que acontece agora. Lá vamos nós. Parece bem se eu ir para o tablet, parece bem se eu ir para a paisagem móvel, tudo está bem e retrato móvel. Muito bem, pessoal, o nosso site está agora totalmente responsivo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 60. Animações e interações - parte 1: Qualquer site moderno hoje em dia usa animações e interações para melhorar a usabilidade e a experiência do usuário e, eventualmente, pode melhorar a taxa de conversão. Vamos dar uma olhada no site da Apple como um exemplo, se eu rolar para baixo aqui, você pode ver que esses elementos desaparecem. Vou rolar para baixo. Você pode ver que temos essa interação, este bloco de texto é animado. Vou rolar para baixo. Aqui quando eu rolar, você pode ver que esses textos bloco escala para baixo enquanto eu rolar para baixo, e esses elementos, esta imagem e este bloco de texto desaparecem. Estas são as animações que fazem a diferença quando se trata de desenvolvimento web, construir um site responsivo é uma coisa, mas torná-lo mais interessante é outra coisa. Ao adicionar interações e animações ao nosso site, podemos melhorar a experiência do usuário e nossos usuários realmente gostam de interagir com nosso produto. Deixe-me mostrar como as interações funcionam no Webflow. Quando se trata de interações, temos dois componentes principais para trabalhar, o gatilho e a animação. O que é um gatilho? Bem, um gatilho é algo que aciona a animação. Em palavras simples, quando algo acontece, então outra coisa deve acontecer. Por exemplo, se um botão for clicado, ele deve crescer. Se o usuário passar o mouse sobre algo, outro objeto deve se mover. Em geral, temos dois tipos de gatilhos. Temos o gatilho elemento e temos o gatilho de página. Deixa-me mostrar-te como funciona. Se eu passar para o painel de interações do lado direito aqui, como você pode ver, há este ícone de raio, eu vou clicar nele. Aqui é onde podemos criar um gatilho. Como mencionei antes, temos o gatilho elemento e temos o gatilho de página. Bem, qual é a diferença entre o elemento gatilho e o gatilho de página? Usamos o gatilho elemento, quando o gatilho é um elemento, por exemplo, um botão, uma imagem, um bloco de texto, um cabeçalho, qualquer coisa. Podemos selecionar o nosso elemento e, em seguida, podemos criar este elemento gatilho. Quando o usuário interage com esse elemento, ele aciona nossa animação. Mas e o gatilho de página? Bem, o gatilho de página aciona nossa animação quando o estado da página é alterado. Por exemplo, se eu clicar neste ícone mais, você pode ver que temos movimento do mouse na janela de exibição, enquanto páginas rolagem, carga de página, página rolada. Neste caso, não precisamos clicar em algo ou interagir com qualquer elemento. O gatilho é a nossa página em si, para que possamos especificar quando a página é carregada completamente, em seguida, reproduzir esta animação particular. Permitam-me que vos mostre alguns exemplos aqui. Como você pode ver aqui, eu tenho alguns elementos simples. Eu tenho um círculo, eu tenho um quadrado aqui. Eu vou pré-visualizar isso e eu vou mostrar alguns exemplos do gatilho elemento. Aqui, este círculo é o nosso gatilho. Eu já criei uma interação para isso, e quando eu clico nela, algo deve acontecer. Você precisa ter em mente que o gatilho nem sempre deve se animar, então se eu clicar neste círculo, a animação não deve necessariamente aparecer neste objeto. Eu posso definir um gatilho sobre este objeto e eu posso fazer outros elementos animar. Neste caso, se eu clicar neste círculo, este quadrado deve mover-se para o lado direito. Deixa-me mostrar-te. Lá vamos nós. Neste caso, o círculo é o nosso gatilho, e uma vez que é acionado, este quadrado se move. Mas e se eu quiser animar o gatilho em si? Podemos fazer isso também. Por exemplo, podemos definir um gatilho elemento, e podemos dizer, se o usuário passa o mouse sobre esses elementos, esses elementos devem mudar. Por exemplo, ele deve crescer, deve se mover, deve desaparecer, qualquer coisa que você possa imaginar, então se eu passar o mouse sobre esse círculo laranja, nós temos essa animação de salto. Nesse caso, o gatilho em si é animado. Vou mostrar-vos outro exemplo. Se eu clicar neste quadrado do lado direito, ele também vai animar, assim como isso. Vamos recapitular. Para entender como as animações funcionam, você precisa entender como a interação funciona. Em geral, temos dois componentes principais. Temos o gatilho e a animação. Se o nosso gatilho for acionado, então a animação deve ocorrer. Deixe-me mostrar como criei essas animações. Vou ao meu designer. Se eu for para as interações, aqui como você pode ver, eu não tenho nenhum gatilho, então eu vou seguir em frente e selecionar este círculo, e uma vez que eu selecioná-lo, você pode ver que o gatilho de elemento que já criamos está lá . Vou remover isso por um segundo, porque vou mostrar a vocês como eu o criei. Se eu clicar neste ícone, posso removê-lo. Agora eu não tenho nenhum elemento gatilho. Já que este círculo vai ser o nosso gatilho, eu vou selecioná-lo, e então eu vou apertar este botão mais aqui. Aqui, eu posso escolher entre diferentes opções. Vamos ver o que temos. Temos toque do mouse, temos mouse sobre o elemento, temos mouse mover sobre o elemento, temos rolar para ver, e temos enquanto rolagem em vista, temos outras opções que não estão disponíveis agora. Por exemplo, a barra de navegação abre funciona apenas para barras de navegação ou abre drop-down só funciona para menus suspensos. Mas neste caso, vamos usar o clique do mouse. Quando o usuário clica no círculo, a animação deve ser reproduzida. Eu vou escolher o mouse clique toque, lá vamos nós, e aqui é onde podemos especificar a nossa ação. Ele diz no primeiro clique e no segundo clique, isso significa que eu posso especificar uma animação para o primeiro clique e, em seguida, especificar outra animação para o segundo clique. Para este exemplo, queremos apenas uma animação, então eu vou para no primeiro clique. Se eu abrir este menu suspenso, posso selecionar uma ação. Posso criar uma animação personalizada usando esta opção iniciar uma animação ou posso usar efeitos rápidos. Por exemplo, fade, slide , flip, crescer, crescer, etc Vamos falar sobre isso, mas por enquanto, vou mostrar como você pode criar uma animação personalizada. Vou clicar em Iniciar uma animação e aqui está a animação que já criamos. Posso escolher esta animação ou criar uma nova animação. Vou em frente e remover isto por um segundo. Aqui nós não temos nenhuma animação, e eu vou criar uma nova animação aqui, e eu preciso nomear isso. Vamos escrever “Move Square”. Por que eu o nomeei assim? Porque este gatilho vai fazer este movimento quadrado. Vou pressionar Enter. Agora, eu preciso criar algumas ações. Aqui está a nossa linha do tempo. Se eu clicar neste botão mais, eu posso escolher entre diferentes opções, mover, escalar, girar, inclinar, filtro de opacidade, BG, cor da borda, cor do texto, etc Estas são as propriedades que eu posso animar. Mas primeiro, vamos ver como devemos animar nossos elementos. Este círculo é o nosso gatilho, e até agora criamos o nosso gatilho. Agora queremos animar a praça. Portanto, uma vez que estamos na linha do tempo, você precisa selecionar o elemento que deseja animar. Neste caso, é o nosso quadrado, então eu vou selecioná-lo, e uma vez selecionado, eu vou clicar neste botão mais. Já que vou movê-lo, só quero mudar a sua localização. Vou selecionar Mover. Criamos um ponto ou digamos um quadro-chave. Aqui eu tenho um aviso e ele diz que esta ação de movimento não tem um valor aplicado, tudo bem porque nós não modificamos nada aqui. Na linha do tempo aqui, temos o tempo, e temos o ponto de partida e o ponto final. Até agora nós criamos o primeiro quadro-chave, agora eu vou para o endpoint e eu vou clicar para criar outro quadro-chave, ele vai ser Mover. Recebemos esse aviso também porque não mudamos nada. Vamos ver o que queremos fazer, quando o usuário clica neste círculo, este quadrado deve se mover para o lado direito. Portanto, nós criamos nosso primeiro quadro-chave aqui, e nós não precisamos modificar sua posição porque a animação deve começar a partir daqui e então ele deve se mover para o lado direito, então eu vou selecionar este segundo quadro-chave que nós criado e, em seguida, se eu rolar para baixo aqui, você pode ver que eu tenho essas opção Mover. Temos muitas propriedades aqui sobre as quais vamos falar, mas agora vamos modificar as propriedades Move. Posso mudar os eixos x, y e z. Vou mudar o eixo x, então vamos usar este controle deslizante. Eu vou movê-lo por 100 pixels, isso mesmo, para 100 pixels, bom. Agora, eu vou apertar Salvar e nossa animação foi criada, como você pode ver, ele diz Move Square, e se você quiser fazer qualquer alteração em sua animação, você pode apenas clicar nela e você vai dentro de sua linha do tempo. Você pode selecionar esses quadros-chave e fazer as alterações desejadas. Mas, por enquanto, parece bem. Deixe-me visualizar isso, e agora este círculo é o nosso gatilho, eu vou clicar nele. Lá vamos nós, esta praça foi movida. Geralmente é assim que a interação e as animações funcionam no Webflow, você pode simplesmente criar animações complexas visualmente sem escrever uma única linha de código, isso é tão poderoso. Vou mostrar-vos outro exemplo. Vamos supor que este círculo vai ser o gatilho, mas ele vai se animar. Vou mostrar-te como é possível. Se o usuário clicar nele, ele vai se mover, então o gatilho do elemento é criado, como você pode ver, nós já criamos isso, eu vou clicar nele, e dentro, eu não quero usar este Mover Animação quadrada porque eu vou animar este círculo em si, então eu vou criar outra animação cronometrada aqui, e eu vou escrever Move Circle. Então, vamos criar uma ação, e eu vou escolher Mover. Vou criar outro quadro-chave aqui, e vamos escolher Mover. Aqui, eu vou movê-lo para o lado direito novamente. Deixe-me salvá-lo. Aqui, certifique-se de escolher a animação Mover Circle, não a Mover Square. Eu posso clicar em Pré-visualização para visualizar isso, e também posso ir aqui, e se eu clicar nele, agora este círculo é animado, não o quadrado. Você precisa entender a diferença entre um gatilho e a animação. Você deve sempre criar um gatilho e, em seguida, você precisa decidir quais elementos devem ser animados. Lembre-se, quando você cria um gatilho, você não está limitado a animar apenas um elemento, você pode animar vários elementos. Deixa-me mostrar-te como funciona. Vamos supor que quando eu clicar neste círculo, eu quero que esses dois quadrados se movam. Como você pode fazer isso? É tão simples. Primeiro, vou em frente e criar um gatilho. O gatilho já foi criado. Eu vou para a seção Animação, no primeiro clique, e aqui eu vou escolher Mover Square porque nós vamos mover este quadrado aqui. Se eu entrar, criei dois quadros-chave aqui. Mas para este quadrado, se eu for em frente e selecionar Square 2 e eu criar outro quadro-chave aqui, e eu disser mover, então eu posso movê-lo para o lado direito também. Vamos movê-lo por 100 pixels, exatamente assim, e deixe-me salvá-lo. Agora, se eu clicar neste círculo, esses dois quadrados devem se mover simultaneamente. Vamos ver o que acontece. Mas você viu o que aconteceu? Primeiro, este quadrado moveu-se e depois o quadrado moveu-se. Por quê? Não podemos movê-los ao mesmo tempo? Podemos, se eu passar para a minha linha do tempo, se eu selecionar esta animação Move Square aqui, como você pode ver, este elemento Square 2 tem um quadro-chave separado. Se eu quiser que esses dois elementos se animem ao mesmo tempo, eu preciso selecionar este quadrado 2, e eu preciso arrastá-lo e agrupá-lo com o meu primeiro quadrado, exatamente assim. Agora a animação ocorre ao mesmo tempo, eu vou apertar Salvar, e vamos ver o que acontece, lá vamos nós. Eles são muito lentos. Posso modificar a velocidade deles? Claro, você pode. Vamos para a nossa linha do tempo. Aqui, se eu selecionar meus dois quadrados, eu posso manter pressionada a tecla Shift no meu teclado e clicar neles um por um. Aqui no momento, tenho opções diferentes. Eu tenho a opção de atraso, eu tenho flexibilização, e eu tenho duração. A duração é definida para meio segundo, vou diminuí-la para 0,2, e se eu salvar, agora vou pré-visualizá-la, é muito mais rápido agora. Até agora, você aprendeu como as interações e animações funcionam no Webflow. No próximo vídeo, vamos começar a criar algumas animações para o nosso projeto círculo, e vamos falar sobre o gatilho de página e algumas animações avançadas. Vejo você no próximo vídeo. 61. Animações e interações - Parte 2: Ei, bem-vindo de volta. Neste vídeo, vamos começar a criar algumas interações e animações para o nosso site. Você está pronto? Vamos começar. Primeiramente, vamos pensar sobre os tipos de animação que vamos criar. O que precisamos aqui? Vamos pré-visualizar este site. Como você pode ver, todos esses elementos carregam ao mesmo tempo, e está tudo bem, mas podemos torná-lo melhor. O que eu quero fazer aqui é que eu quero que todos esses elementos desapareçam em um por um, uma vez que a página é carregada. Primeiro, esta barra de navegação deve desaparecer, em seguida, este cabeçalho, em seguida, a descrição, estes botões, a imagem principal, e estes cartões. Também podemos mover esses elementos ligeiramente para criar uma animação mais avançada. Tudo bem. O que devemos fazer? Para esta animação, não precisamos de um gatilho de elemento. Como mencionei no vídeo anterior, um gatilho elemento é necessário quando precisamos que o usuário interaja com algo primeiro e, em seguida, a animação deve ser reproduzida. Mas, neste caso, não há interações envolvidas, portanto, quando a página é carregada, esses elementos devem ser animados. Vou em frente e criar um gatilho de página. Como posso fazer isso? Deixe-me ir para as interações aqui, e desta vez, em vez de criar este elemento gatilho, eu vou criar um gatilho de página. Deixe-me clicar neste botão “Plus”. Que opção devemos usar? Mouse movendo viewport, Enquanto a página está rolando, carga de página, página rolada, precisamos usar um carregamento de página e você pode ler o que a interação que podemos alcançar usando esses gatilho. Diz: “Animar quando a página começar ou terminar de carregar.” Isso é exatamente o que queremos. Vou clicar em “Carregamento de página”. Ótima. Aqui temos duas seções diferentes. Quando a página começa a carregar, quando a página terminar de carregar, eu vou usar quando a página terminar de carregar. Por quê? Como eu quero que todo o conteúdo do site seja carregado antes de reproduzir a animação, essas imagens devem ser carregadas, e também esses textos, blocos e botões. Eu vou com quando a página terminar de carregar e eu vou criar uma ação. Aqui vou começar uma animação. Vai ser uma animação personalizada, e então eu vou clicar neste botão “Plus”. Lá vamos nós. Vamos nomear esta animação de herói de animação porque ela está relacionada com a seção de heróis. Vou pressionar “Enter”. - Legal. Agora, é hora de seguir em frente e criar nossas ações. O que devemos alcançar aqui? Como mencionei antes, quero que todos esses elementos se desvaneçam. Alguns deles devem ser dimensionados, alguns também devem ser movidos, mas vamos um por um. Se eu quiser que eles desapareçam primeiro, preciso definir a opacidade deles para zero. Por quê? Porque agora a opacidade está definida para 100% e não há como eu conseguir essa animação. Tenho duas opções. Posso ir em frente e selecionar todos esses elementos aqui. Por exemplo, este título, e eu posso ir para o painel de estilos, diminuir a opacidade para zero por cento aqui. Ou eu posso fazer exatamente a mesma coisa aqui na seção de interação, eu vou para carregar página. Vou clicar em “Animação de herói”. Aqui eu posso criar uma ação, por exemplo, opacidade, e eu posso transformar sua opacidade em zero por cento, mas vamos começar com a barra de navegação. Vou selecionar esta barra de navegação e vou criar uma ação aqui, mas para criar uma ação para um símbolo, primeiro, você precisa clicar duas vezes sobre ele. Agora, esta barra de navegação é selecionado o símbolo mestre e eu posso criar uma ação. Então eu vou escolher opacidade, e vamos transformar sua opacidade de 100% para zero por cento. - Legal. Desapareceu e é exatamente o que queremos. Isto é o que chamamos de estado inicial, e aqui se você passar para a seção de temporização, você pode ver que temos esta opção que diz, “Definir como estado inicial”. Se eu passar o mouse sobre este ponto de interrogação, ele diz, “Definir estado inicial aplica estilos ao elemento antes do carregamento da página. É útil para ocultar elementos antes de animá-los à vista.” Isso é exatamente o que precisamos fazer. Desde que eu defini sua opacidade para zero por cento e será nosso estado inicial, eu vou ativar essa opção. O que mais devemos fazer? Vou selecionar todos esses elementos um por um, e vou diminuir a opacidade deles para zero por cento também. Vamos selecionar este título e então eu vou para a minha animação aqui mais uma vez, e eu vou criar uma nova opacidade de ação. Vamos definir sua opacidade para zero por cento, e lembre-se de habilitar essa opção assim, definir como estado inicial, e como você pode ver agora, estes são agrupados porque este grupo superior contém todas as ações que nós estado em. Agora, vou selecionar esta descrição. Eu vou fazer a mesma coisa, opacidade, e eu vou transformar sua opacidade em zero por cento, e eu vou defini-la como o estado inicial. Vou fazer a mesma coisa por estes botões. Um a propósito. Vou selecionar este botão primário e vamos criar opacidade. Vou diminuir a opacidade para zero por cento. Vai ser um estado inicial. Vamos fazer isso para esses botões de texto também. Vou selecionar a capacidade. Vamos diminuir para zero por cento e será o estado inicial. Em seguida, vamos selecionar essa imagem, e vamos diminuir sua opacidade para zero por cento também. Vai ser o estado inicial. Finalmente, precisamos selecionar essas duas cartas e fazer a mesma coisa. Vamos escolher opacidade, diminuir sua opacidade, e finalmente ativar o estado inicial, e por último, mas não menos importante, eu vou selecionar este cartão e eu vou fazer a mesma coisa aqui. Vamos diminuir sua opacidade e ativar o estado inicial, mas espere um segundo, por que todos esses elementos desapareceram exceto nossa barra de navegação? Bem, isso é porque nossa barra de navegação é um símbolo, na realidade, se eu visualizar meu projeto agora, você pode ver que ele desapareceu, mas como é um símbolo, vamos ver isso. Essa é a razão, mas não se preocupe, funciona perfeitamente. Criamos nossos estados iniciais. Definimos a opacidade de todos os nossos elementos para zero por cento. Agora, é hora de criar o próximo quadro-chave, a fim de desvanecê-los. Precisamos aumentar a opacidade para 100 por cento. Para fazer isso, vou selecionar minha barra de navegação. Mais uma vez, clique duas vezes sobre ele, e eu vou clicar sobre isso e aqui para criar um novo quadro-chave, Vamos escolher opacidade, e desta vez sua opacidade deve ser definida como 100 por cento. Certifique-se de que está definido para 100 por cento. Não vamos modificar a duração e a camada agora, mas em poucos minutos, vamos modificá-las. Por enquanto, só precisamos transformar todas as suas opacidades de volta a 100%. Agora, eu vou selecionar meu título aqui. Eu posso escolhê-lo no navegador, e então vamos para minha animação e vamos criar um novo quadro-chave aqui, opacidade, e eu vou definir a opacidade para 100 por cento. Eu vou fazer a mesma coisa para todos os nossos elementos aqui. Vamos escolher a descrição. Eu vou criar um novo quadro-chave, opacidade, e então eu vou definir a opacidade para 100 por cento. Vou escolher os botões um por um. Vamos repetir o mesmo processo e aumentar a opacidade para 100 por cento. Não vou adiantar esse processo porque quero que se acostume com o processo de criação de interações. Vou selecionar o botão “Avançar” aqui. Vamos criar um novo quadro-chave, opacidade, e eu vou definir a opacidade para 100%. Agora, vamos selecionar a imagem principal. Vamos criar um novo quadro-chave, opacidade e transformar sua opacidade em 100%. Finalmente, vamos selecionar nossos cartões uma por uma opacidade e definir sua opacidade para 100 por cento, e por último, mas não menos importante, precisamos selecionar nosso último cartão, criar um novo quadro-chave aqui, opacidade e definir sua opacidade para 100 por cento. - Legal. Agora, vamos clicar em “Salvar” e visualizar nosso projeto. Lá vamos nós. Todos esses elementos desaparecendo um por um. Deixe-me ver isso mais uma vez. Isso é exatamente o que eu queria. Você pode ver como é fácil criar animações no Webflow sem codificação, isso é incrível. Mas espere, não podemos torná-lo melhor adicionando mais animações aos nossos elementos? Sim, podemos. Isso é exatamente o que vamos fazer. Agora que é a nossa animação de desvanecimento foi criada com sucesso. Vou em frente e adicionar algumas outras ações a esses elementos. Por exemplo, eu vou fazer este título e esta descrição mover-se ligeiramente para baixo. Além disso, vou fazer essas duas cartas aumentarem um pouco. Finalmente, vou fazer essa imagem de herói subir também. Vamos começar com este título. Primeiro, vou para a minha animação. Eu vou para Here Animation, e então eu vou selecionar meu título. Uma coisa a mencionar aqui é que eu não quero este título saia de sua posição original, que é aqui. Eu quero movê-lo ligeiramente para cima e definir o estado inicial para isso e transformá-lo de volta para sua posição original. É o que vamos fazer. Vou selecionar este cabeçalho e vou criar uma ação Move, ela foi criada dentro do grupo de estados inicial, e é exatamente isso que eu quero. Se você criá-lo em outro lugar, você pode simplesmente ativar este conjunto de opções como estado inicial e ele será agrupado com outros elementos de estado inicial. Então eu vou movê-lo para cima por 20 pixels. Vou escrever menos 20. Podemos ver isso, mas subiu ligeiramente. Então eu vou fazer a mesma coisa para a descrição do herói. Deixe-me selecioná-lo. Eu vou criar uma nova ação aqui, Mover e deixe-me movê-lo por 20 pixels menos 20. Agora vou selecionar minha imagem principal, mas essa imagem não deve se mover de cima para baixo. Deve mover-se de baixo para cima. Vou criar a ação Mover. Mas desta vez eu vou definir o y para 20 pixels, não menos 20 para movê-lo para baixo. Lembrem-se que estes são todos os nossos estados iniciais. Finalmente, como eu mencionei antes, eu vou escalar minhas cartas, essas duas pequenas cartas para cima ligeiramente. Primeiro vou selecionar este Cardeal de Herói 1, e vou reduzi-lo como o estado inicial. Deixe-me criar uma ação aqui. Eu vou escolher Escala e eu vou definir x para 0,8 e o eixo y será alterado também. Uma vez que estes estão ligados, então eu vou selecionar Hero Card 2, vamos criar a mesma escala de ação e eu vou modificar seu x para 0.8. Pressione “Enter”, mas este não está agrupado com outras ações iniciais de estado. Posso arrastar e soltar dentro deste grupo ou simplesmente habilitar os conjuntos de switches como estado inicial, e agora ele está agrupado com outras ações iniciais de estado aqui. - Legal. Agora precisamos ir em frente e transformá-los de volta à sua posição original. Mas como devemos fazer isso aqui temos muitos quadros-chave. Devemos criar um quadro-chave aqui depois do último quadro-chave? - Não. Por quê? Porque se fizermos isso, primeiro, todos esses elementos desaparecerão e então eles começam a se mover e escalar. Não é isso que queremos. Queremos que eles se movam e desaparecem simultaneamente. Para as cartas, queremos que elas sejam dimensionadas e desvanecidas ao mesmo tempo. Vou em frente e selecionar este título de Herói. Vou criar uma nova ação aqui, e ela vai ser movida. Criamos um novo quadro-chave aqui. Então eu vou mudar seu y aqui para 0. Desta forma, voltamos à sua posição original. Finalmente, vou arrastá-lo e colocá-lo em cima do quadro-chave de opacidade. Desta forma, podemos agrupá-los e a opacidade e mover ações um cuidado ao mesmo tempo, assim como, como você pode ver agora eles estão agrupados. Vou fazer a mesma coisa para a descrição. Vamos selecioná-lo. Vou criar um novo movimento de ação. Então eu vou definir o y como 0. Deixe-me agrupá-los. Vou arrastá-lo e soltá-lo em cima disso. Vamos fazer a mesma coisa para o herói principal. Vou selecioná-lo e vou criar uma nova ação. Mova-se e eu vou definir seu y como 0. Vamos agrupá-lo com o quadro-chave de opacidade. Finalmente, vou selecionar este Herói Card 1. Vou criar uma nova ação. Vai ser escala, porque vamos escalá-lo desta vez. Vou definir o x e y para 1. Vamos agrupá-lo com o quadro-chave de opacidade do Cardeal Herói 1. Então eu vou fazer a mesma coisa para o segundo cartão. Deixe-me criar essa ação de escala e eu vou definir o x e y como 1. - Legal. Finalmente, vamos agrupá-los juntos, foi muito. Agora vamos salvar nossa animação. Eu vou ir em frente e pré-visualizar isso. Quão legal é isso? Deixe-me antever mais uma vez. Primeiro o nav estava desaparecendo, então esses elementos, eles se movem e eles escalam ao mesmo tempo. Mas aqui temos um problema. Como você pode ver, a duração desta animação é demais. Nós vamos precisar ir em frente e modificar a duração desses quadros-chave. Primeiro, eu vou para a animação Hero aqui. Vou selecionar essa opacidade. Vou diminuir a duração de 1/2 por segundo para 0,3. Precisamos repetir o mesmo processo para a ação de movimento também. Vou diminuir para 0,3. Então vamos fazer a mesma coisa para outros elementos. Vou em frente e selecionar esta Opacidade Descrição do Herói. Vai ser 0,3. Em seguida, vou selecionar a opção Mover. Vai ser 0,3 também. Vamos fazer a mesma coisa para este botão primário, 0.3. Aqui, 0.3, vou avançar com este processo. Vou em frente e selecionar todos esses elementos um por um e diminuir a duração para 0.3. Feito. Agora deixe-me salvar esta animação e vamos visualizá-la mais uma vez. Legal. Como você pode ver, é muito mais rápido agora. Vamos pré-visualizar novamente. Lindo. Espero que goste, mas vou mostrar-te mais uma coisa. Você se lembra quando falamos sobre animações e interações, eu falei sobre o método de flexibilização. Eu disse que falaremos sobre isso mais tarde e é exatamente isso que vamos fazer. Se eu for para a seção de interação e escolher essa animação, selecionarei, por exemplo, uma dessas ações. Vamos selecionar este herói movimento de direção. Se eu passar para o tempo, você pode ver que nós temos essa guia de flexibilização e nós temos presets ou alfândega. Por que padrão? Todas as ações têm o método linear de não-atenuação, e isso significa que a animação é reproduzida de forma linear. Mas se eu abrir o menu suspenso, você pode ver que temos muitos métodos de atenuação diferentes. Temos facilidade, flexibilização, facilidade de saída, facilidade de entrada para fora. Qual é a diferença entre eles? Vou mostrar a vocês um site muito legal criado pelo Sr. Christopher Travers que ilustra a diferença entre todos os métodos de flexibilização. É muito fixe. Chama-se easing.webflow.io. Você pode ir em frente e verificar. A diferença entre esses métodos de flexibilização geralmente é a velocidade. Aqui quando temos essa flexibilização, a animação começa lentamente e termina mais rápido. Por outro lado, se escolhermos, facilitar, a animação começa rapidamente e depois diminui. Aqui você pode comparar todas essas opções e você pode ver qual delas se adapta às suas necessidades. Vamos voltar para o Webflow, a fim de fazer nossas animações parecer melhor, eu vou ir em frente e definir todas essas animações para facilitar. Vamos em frente e fazê-lo um por um. Podemos mudar os estados iniciais aqui e não precisamos. Como você pode ver, ele está desativado porque não há animações em execução nos estados iniciais. Eu vou selecionar este Navbar Opacidade e eu vou mudar é método de flexibilização para aliviar. Eu vou fazer isso por todos esses elementos. Deixe-me avançar este processo para economizar algum tempo, está feito e agora vou salvar a animação e deixe-me ir em frente e visualizá-lo. Lá vamos nós. Parece muito melhor. Pessoal, espero que tenham gostado deste vídeo. Criamos com sucesso algumas animações para a nossa seção de heróis. No próximo vídeo, vamos continuar criando algumas interações para outras seções do site. Vejo você então. 62. Animações e interações - parte 3: Ei, neste vídeo, vamos em frente e adicionar animações a outras seções do nosso site. Por exemplo, como você pode ver aqui, esses logotipos são preto e branco e nós vamos torná-los interativos. Quando o usuário passa o mouse sobre cada um desses logotipos, eles devem se tornar coloridos. Aqui, por exemplo, temos esta sombra, quando o usuário passa o mouse sobre este cartão, esta sombra deve aparecer e, caso contrário, ela deve desaparecer. Mas e a seção de depoimentos? Aqui quando a seção entra na janela de exibição, queremos começar a animar esses memojis e esses elementos do meio um por um. Só queremos que eles se desvaneçam. Deixe-me rolar para baixo. E quanto a esta seção? Bem, o que vamos fazer por estas cartas? Para este cartão, quando o usuário passa o mouse sobre ele, a cor de seu plano de fundo será alterada para nossa cor primária, e então a cor dessas camadas de texto também deve ser alterada. Vamos começar a trabalhar na seção de clientes aqui. Eu vou para Webflow, e eu vou para a seção de logotipo aqui. Nossos logotipos são coloridos por padrão. Como podemos fazê-los preto e branco? Lembra quando falamos sobre os filtros? Isso é exatamente o que vamos usar. Vou selecionar esta imagem aqui. Deixe-me ir ao painel Estilo. Como você pode ver, nós não adicionamos nenhuma classe a esses logotipos. Enquanto esta imagem é selecionada, eu vou ir em frente e adicionar uma classe a ela, vamos escrever Logo. Agora vou adicionar essa classe a cada um desses logotipos. Deixe-me ir em frente e rapidamente adicionar esta classe a eles. Simplesmente assim. Vou adicioná-lo a todos os logotipos, deixe-me selecionar este também, e eu vou adicioná-lo aqui. Finalmente, vou selecionar o logotipo da Amazon e deixe-me adicioná-lo aqui. Perfeito. Agora, enquanto um desses logotipos é selecionado, eu vou rolar para baixo e eu vou para a seção Efeitos. A partir daqui, vou em frente e criar um filtro. Se eu clicar neste botão de adição, por padrão, o filtro será desfocado. Eu não vou usar um filtro de borrão. Eu vou mudar o filtro para escala de cinza, e como você pode ver, a quantidade é definida para 100 por cento. Isso é totalmente bom. Agora, o que devemos fazer? Se eu for para o estado de foco aqui, eu posso selecionar esse filtro em tons de cinza e eu posso diminuir esse valor para zero por cento. Simplesmente assim. Agora deixe-me ir para o estado nenhum e vamos pré-visualizar. Lá vamos nós. Ele funciona perfeitamente para todos os logotipos, mas aqui não temos uma transição suave entre esses dois estados. Vamos em frente e adicionar uma transição, mas certifique-se de que você está no estado nenhum, não no estado hover, caso contrário, não vai funcionar. Sempre adicione suas transições ao estado nenhum. Vou adicionar uma transição aqui, vou mudar o tipo para Filtro e o método de atenuação vai ser fácil. Isso é bom. A duração vai ser de 200 milissegundos. Vamos pré-visualizar mais uma vez. Agora parece muito melhor, não é? O que mais devemos fazer? Bem aqui, quando eu visualizo este projeto, você pode ver que nossa seção de cabeçalho é animada. Mas e quanto a esta seção? O que eu quero fazer é adicionar um gatilho de elemento para o contêiner desses logotipos, e uma vez que ele rola para a janela de exibição, esse contêiner deve desaparecer. Deixa-me mostrar-te o que quero dizer. Vou selecionar um contêiner aqui e depois vou te dar a classe de combinação. Vamos escrever logotipos. Agora deixe-me ir para as interações, e a partir daqui eu vou adicionar um elemento gatilho. Aqui, como você pode ver, temos rolagem em vista. É disso que precisamos. Em seguida, ele diz, quando rolado para a vista, quando rolado para fora da vista. Vamos precisar da primeira opção, quando rolado para a exibição. Então eu vou usar esses efeitos rápidos, Fade, exatamente assim, e aqui temos fade in, fade out. Podemos modificar o atraso ou o deslocamento, então ele vai desaparecer. Deixe-me antever isso. Lá vamos nós. É muito rápido, então vou adicionar algum atraso aqui. Vamos adicionar um atraso de 400 milissegundos. Vou pré-visualizar. Legal. Deixe-me visualizar o projeto. Não podemos ver o efeito agora porque eu estou usando uma tela grande e assim que esta página é carregada, esta seção está dentro do meu viewport. Mas se eu usar uma tela menor, ela aparecerá quando eu começar a rolar. Por exemplo, se eu for para o ponto de interrupção do tablet aqui e eu apenas visualizar o projeto mais uma vez, você pode ver que nossa seção de cabeçalho, elementos, são animados. Vou rolar para baixo. Assim que esta seção rola para a exibição, ela desaparece. Deixe-me mostrar-lhe mais uma vez. Eu vou rolar para baixo, lá vamos nós. Desvanece-se. Isso é exatamente o que eu precisava. Tenha em mente que quando adicionamos a animação ao ponto de interrupção da área de trabalho, a animação será adicionada a todos os pontos de interrupção. Se eu ir para o retrato móvel e eu visualizá-lo, tudo funciona como esperado. Ótimo. Agora podemos passar para a próxima seção, e isso são projetos recentes. Vou fazer a mesma coisa por este contentor. Eu vou selecionar este contêiner e eu vou adicionar um gatilho de elemento aqui, rolar para a exibição, então eu vou adicionar uma ação aqui, fade-in, e um atraso de 400 milissegundos, exatamente assim. Legal. Como esses contêineres têm algumas classes de combinação, a interação será adicionada a esse contêiner específico. Mas se eu adicionar a interação para o recipiente, para a classe base, ele será adicionado a todos os elementos usando esta classe base recipiente. Mantenha isso em mente. Vamos em frente e visualizá-lo. Vou rolar para baixo. Lá vamos nós. Vamos verificar mais uma vez. Eu vou rolar para baixo, ele se desvanece. Ótimo. Como eu mencionei, quando o usuário passa o mouse sobre esses cartões, uma sombra suave também deve aparecer. Como podemos alcançar essa interação? É tão simples, já falamos sobre isso. Primeiro, vou em frente e selecionar este cartão de projeto. Deixe-me ver, você pode encontrá-lo no navegador facilmente, e então eu vou para o estado flutuante a partir daqui. Finalmente, vou em frente e adicionar algumas sombras de caixa a ele. Agora vamos modificar as propriedades desta sombra caixa. Vou mudar o ângulo para 180. Vou mudar o borrão para 50 pixels e a distância para 25 pixels. Finalmente, vou mudar a cor de preto para neutro, médio. Deixe-me diminuir a opacidade de 100 para 10 por cento para obter esta sombra suave. Parece ótimo. Agora vamos voltar para o nosso estado nenhum e vamos pré-visualizar. Lá vamos nós. Funciona perfeitamente. Você pode ver isso? Mas não temos uma transição suave aqui. Deixe-me ir em frente e adicionar uma transição. Certifique-se de que você está no estado nenhum. Vou rolar para baixo e enquanto este cartão de projeto estiver selecionado, vou adicionar uma transição. O tipo vai ser sombra de caixa e a duração vai ser 200 milissegundos. Não vou mudar o método de flexibilização. Vamos pré-visualizar mais uma vez. Lá vamos nós. Agora parece muito melhor. Legal. Agora podemos passar para a próxima seção, que é a seção de depoimento. O que devemos fazer aqui? Bem, primeiro, eu vou selecionar esta seção e eu vou adicionar um elemento gatilho a ela. Deixe-me ir para as interações, e a partir daqui eu vou adicionar um elemento gatilho. Nós estamos indo para usar rolagem em vista porque queremos que os elementos para desaparecer em uma vez que esta seção rola para a exibição. É por isso que estamos usando rolagem para exibição. Então eu vou criar uma animação personalizada aqui porque nós estamos indo para animar esses elementos um por um. Vou usar iniciar uma animação. Deixe-me apertar este botão mais para ir para a nossa linha do tempo. Lá vamos nós. Aqui, vamos escrever Testemunho, você pode dar o nome que quiser, Enter. Então eu vou selecionar um de nossos memojis e vamos criar uma ação aqui. Vai ser opacidade porque vamos fazê-los desaparecer. Como de costume, primeiro, precisamos criar o estado inicial. Portanto, vou diminuir a opacidade para zero por cento e vou defini-la como o estado inicial. Então eu vou criar um novo quadro-chave aqui. Vou usar opacidade e vou aumentar a opacidade para 100 por cento. Deixe-me tocar a animação. Legal. Mas há um problema aqui. Como você pode ver, esta animação só funciona para este primeiro memoji. Devemos ir em frente e selecionar estes memojis um por um? Claro que não porque há uma alternativa a isso. Uma vez que temos a classe base memoji aqui, podemos simplesmente ir para esta seção, que é chamada de classe, e então podemos remover esta classe combo aqui. Eu só quero escrever Memoji. Vou escolher o meu memoji e certificar-me de que esta opção é selecionada, apenas crianças nesta classe. Vou selecionar o estado inicial, e agora se eu reproduzi-lo, agora a animação funciona para todos os memojis. Por quê? Porque agora esta animação funciona para esta classe, a classe memoji com todos os seus filhos. Isso é exatamente o que queríamos, mas e outros elementos? Bem, vamos em frente e selecioná-los um por um, e vamos animá-los. Vamos começar com estes títulos. Eu vou selecioná-lo, eu vou criar uma ação, opacidade, e eu vou definir sua opacidade para zero por cento. Vamos configurá-lo como o estado inicial. Ele será agrupado com o nosso estado inicial memoji, e eu vou criar um novo quadro-chave aqui. Vou escolher a opacidade. Vamos transformar sua opacidade em 100 por cento. Legal. Agora vamos em frente e selecionar este texto de testemunho. Vamos criar uma ação para isso, opacidade. Vou definir a opacidade para zero por cento. Vamos configurá-lo como o estado inicial, e vamos criar um novo quadro-chave aqui e escolher opacidade e transformá-lo de volta para 100%. Finalmente, vou selecionar esse bloco div cliente, criar uma nova ação, opacidade, vamos transformar sua opacidade em zero por cento, defini-lo como o estado inicial, e criar um novo quadro-chave, opacidade e transformá-lo de volta para 100 por cento. Simplesmente assim. Agora deixe-me salvar esta animação e eu vou ir em frente e visualizá-la. Vamos ver o que vamos conseguir. Eu vou rolar para baixo e assim que a seção de depoimento rola para a janela de exibição, a animação é reproduzida, mas esses memojis desapareceram tão rapidamente. Vamos em frente e consertar isso. Eu vou para a animação do testemunho aqui do lado direito, e eu vou selecionar esta opacidade memoji aqui, e eu vou adicionar algum atraso a ele. Vamos adicionar um atraso de um segundo e vamos visualizá-lo. Vou guardá-lo e vamos ver se funciona corretamente ou não. Eu vou rolar para baixo, legal. Mas um segundo parece demais, então vou diminuir para talvez meio segundo. Deixe-me selecionar esta Opacidade de Memoji e apenas diminuir o atraso para 0,5 e salvá-lo. Vamos pré-visualizar mais uma vez. Eu vou rolar para baixo, lá vamos nós, fantástico. Vamos verificar em outros pontos de interrupção também. Eu vou ir em frente e visualizá-lo. Deixe-me rolar para baixo. Muito bom. Parece ótimo, não é? Agora vamos passar para a seção Serviços. Aqui, como mencionei antes, vamos modificar a cor do fundo, a cor desses blocos de texto, e também este botão de link. Então, podemos apenas selecionar este cartão de serviço e ir para o estado de foco e modificar nossa cor de fundo, assim como o que fizemos para esta seção recente do projeto? Infelizmente, não. Por quê? A razão é que para esses cartões, nós apenas modificamos uma propriedade, então nós fomos para o estado de foco e nós adicionamos a sombra para este cartão. No entanto, aqui, quando o usuário passa o mouse sobre este cartão, queremos modificar vários elementos. É por isso que não é possível animar todos esses elementos aqui nos efeitos. Portanto, vamos precisar ir em frente e criar uma interação na seção Interação. Então, o que devemos fazer? Primeiro, vou selecionar este cartão de serviço. Certifique-se de que o bloco de comparação do cartão de serviço está selecionado, como você pode ver dentro de nossa grade de serviços, e então eu vou ir em frente e criar uma árvore de elementos aqui e desta vez eu vou escolher o mouse sobre o mouse, não clique do mouse, não rolar para a exibição, passar o mouse. Vou selecioná-lo e aqui temos em pairar, em pairar para fora. Portanto, vamos criar duas animações diferentes aqui. Por quê? Porque primeiro, queremos animar todos esses elementos uma vez que o usuário passa o mouse sobre este cartão e, em seguida, queremos transformar todos esses elementos para suas cores originais quando o usuário passa o mouse para fora. Então, primeiro, vamos em frente e criar uma animação personalizada aqui, mouse, eu vou criar uma animação e vamos chamá-la de mouse de cartão. Lá vamos nós. Então, o que devemos fazer? Precisamos criar um estado inicial? Não, porque não precisamos de nenhum estado inicial. O estado inicial é o que temos aqui. Só precisamos mudar a cor do fundo e a cor desses elementos. Enquanto este cartão de serviço é selecionado, eu vou criar uma ação, porque eu quero modificar a cor do fundo deste bloco de aço e aqui sob o estilo, eu vou escolher cor BG, cor de fundo. Lá vamos nós e aqui eu posso escolher uma nova cor de fundo para ele. Deixe-me escolher o padrão primário, bom, e então eu vou modificar a flexibilização de linear para flexibilização. A próxima coisa que precisamos modificar é a cor deste título do projeto. Vou selecioná-lo. Eu vou criar uma nova ação, e vai ser cor do texto desta vez. Deixe-me ir em frente e mudar a cor deste texto para branco, exatamente assim, e então eu vou selecionar esta descrição do projeto e vamos adicionar uma nova ação aqui, cor do texto e eu vou escolher branco. Então eu vou diminuir a opacidade de 100 por cento para 60 por cento exatamente assim, para ter uma boa hierarquia visual aqui. Finalmente, vou selecionar este botão de link e vou criar uma nova ação, e vai ser cor do texto novamente, mas desta vez vai ser a nossa cor secundária, esta laranja. Deixe-me tocar esta animação e ver se tudo funciona perfeitamente. Bem, há um problema. Essas animações devem ser agrupadas. Queremos que eles toquem ao mesmo tempo. Agora, eles jogam um por um, não é o que queremos. Então eu vou selecionar essa cor do texto, e eu vou arrastá-la e soltá-la em cima de nossa primeira ação, que é o cartão de serviço. Eu vou fazer a mesma coisa para esses dois elementos também, basta arrastá-lo e soltá-lo e agora eles estão agrupados. Assim, a animação ocorre ao mesmo tempo. Deixe-me tocar mais uma vez. Fantástico. Deixe-me salvar a animação e ver se funciona perfeitamente. Eu vou salvá-lo. Vou pré-visualizar, e vou passar o mouse sobre ele. Parece ótimo. Mas funciona para todos os cartões? Não, não faz. O que devemos fazer? Devemos ir em frente e animar esses cartões um por um? Claro que não, porque não é uma maneira eficiente. Já que estamos usando aulas, não precisamos fazer isso. Então, o que devemos fazer? Bem, eu vou selecionar este cursor do mouse, e como você pode ver aqui, se eu selecionar este cartão de serviço, o primeiro quadro-chave aqui na seção Afectar, ele diz gatilho de interação, e ele diz, “Você agora estão afetando apenas os elementos de gatilho.” Então eu vou abrir esses menus e eu vou mudá-lo para a aula. Então eu vou abrir este menu e eu vou mudá-lo para apenas crianças com esta classe. Agora deixe-me salvá-lo e aqui, como você pode ver nas configurações de gatilho, temos duas opções diferentes. Temos elementos, temos classe. Por padrão, o elemento é selecionado. Diz: “Acionador apenas no elemento selecionado.” Isto não é o que queremos. Queremos que esta animação funcione para todos esses cartões. Então eu vou mudá-lo de elemento para classe e a classe vai ser cartão de serviço. Como você pode ver aqui, todos esses cartões têm a mesma classe, cartão de serviço. Agora, se eu visualizá-lo, se eu passar o mouse sobre esses cartões, você pode ver que a animação funciona para todos eles. Mas e se eu pairar para fora, eles não mudam. Isso é porque não criamos a animação de pairar. Então deixe-me ir em frente e criar um. O que devemos fazer? Bem, aqui, como você pode ver, temos em pairar para fora, vamos criar uma nova ação, início e animação. Desta vez, em vez de criar uma nova animação personalizada, vou mostrar a vocês uma maneira rápida de fazer isso. Desde que nós só queremos transformar suas cores de volta para suas cores originais, eu vou passar o mouse sobre esses cartões e aqui como você pode ver, nós temos dois ícones. Se eu clicar sobre estes ícone de ponto, Eu posso duplicar esta animação e eu tenho cartão pairar também. Então eu vou renomeá-lo. Eu vou clicar neste ícone de ponto e deixe-me renomeá-lo para Card Hover Out. Agora eu vou selecioná-lo, clicar nele, e aqui eu vou selecionar todos esses elementos, e eu vou mudar sua cor de volta para suas cores originais. Enquanto o cartão de serviço é selecionado, eu vou ir em frente e mudar a cor para branco. Agora vou selecionar o título do projeto e vou mudar sua cor para neutro escuro. Agora vou selecionar a descrição do projeto e vou mudar sua cor para meio neutro. Finalmente, vou selecionar este botão de link e vou mudar sua cor para padrão primário. Simplesmente assim. Eu vou clicar em “Salvar” e agora se eu visualizar meu projeto e se eu passar o mouse sobre esses cartões, você pode ver que essa animação funciona em ambos os sentidos. Simplesmente assim. Você pode ver como é fácil criar interações e animações no Webflow? Tudo bem, pessoal. Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 63. Acessibilidade: Ei, neste vídeo vamos falar sobre acessibilidade. Como web designer e desenvolvedor web, precisamos sempre ter certeza de que nosso site está acessível a todos. Não importa se alguém é cego ou tem deficiências visuais, ele ou ela deve ser capaz de usar nosso site de forma conveniente e fácil. Mas como podemos tornar o nosso site mais acessível? Bem, neste vídeo, você vai aprender alguns pontos importantes sobre acessibilidade, e você vai aprender algumas técnicas para tornar seu design mais acessível. Você está pronto? Vamos começar. Ao projetar seu site, você precisa verificar a taxa de contraste de suas cores porque algumas pessoas têm deficiências visuais e elas podem não processar as cores da maneira que nós fazemos. Portanto, é importante garantir que nossas cores tenham contraste suficiente e passem no teste da taxa de contraste. Nós geralmente verificamos a taxa de contraste de nossas cores quando estamos projetando a interface do usuário, mas como um desenvolvedor web, vale a pena verificar a taxa de contraste de suas cores quando o desenvolvimento de seu projeto é feito como Bem. Como pode fazer isso? Nós já conversamos sobre isso, mas vou mencioná-lo mais uma vez rapidamente. Então aqui, se eu selecionar este texto, este título, e se eu for para a seção de tipografia, eu vou clicar em Cor. Aqui temos a seção que diz Relação de Contraste. Há um ponto de interrogação aqui. Se eu clicar nele, você pode ver que a taxa de contraste afeta a acessibilidade do seu site. contraste suficiente depende das cores de primeiro plano e plano de fundo, do tamanho da fonte e do peso da fonte. Isso é absolutamente verdade. Basicamente, o que nos interessa é a cor do nosso primeiro plano e a cor do nosso fundo. Neste caso, a cor deste texto é a nossa cor de primeiro plano, e esta cor azul claro é a nossa cor de fundo. Aqui, como você pode ver, temos o grau A triplo, e isso significa que temos a maior taxa de contraste, o que é incrível. Então sempre aponte para o triplo A, mas às vezes você pode obter o duplo A também. Isso também é aceitável. Deixe-me mostrar-lhe um exemplo. Se eu tentar modificar essa cor, lá vamos nós, agora eu tenho o duplo A. Ainda é legível, mas a taxa de contraste não é muito. Como você pode ver, é quatro para um. Eu vou desfazer o processo, Command Z ou Control Z. Quando você terminar o desenvolvimento do seu projeto, você precisa ir em frente e verificar todas as suas cores um por um e ver se você passa no teste de taxa de contraste. Se você vir este triplo A ou duplo A, significa que você está pronto para ir. Você precisa ir em frente e verificar suas cores um por um. Vou rolar até aqui. Deixe-me selecionar este botão, Saiba mais, e se eu passar para a cor, você pode ver que eu tenho triplo A também. Que tal aqui? Com certeza é o triplo A. Lá vamos nós, porque já verificamos essa cor. E quanto a esta descrição do projeto? Parece bom. Temos o dobro A, ainda é aceitável. Basicamente você precisa ir em frente e verificar todos os seus elementos um por um. Aqui temos o triplo A. Que tal este? Temos o triplo A também. Esta é a primeira coisa que você precisa verificar em termos de acessibilidade. Agora vamos passar para o próximo ponto. Vou rolar para cima. Em quase todos os projetos, usaremos imagens. Podemos usar imagens decorativas ou algumas imagens significativas. Por exemplo, aqui nesta seção recente do projeto, você pode ver que temos a imagem do projeto nesses cartões. Vou rolar para baixo. Aqui temos alguns memojis decorativos. Estas são imagens decorativas. Vou rolar para baixo. Estes ícones também são decorativos. O que eu quero dizer com decorativo? Bem, quando algo não agrega valor ao nosso site e não ajuda o motor de busca a entender a estrutura do seu site, isso significa que é decorativo. Vou rolar até aqui. Não temos outras imagens. Se eu for para a página Meus Projetos aqui, esta imagem não é decorativa porque esta é uma das imagens do nosso projeto. Mas como podemos fazer com que os motores de busca compreendam a estrutura do nosso site e o significado por trás das nossas imagens? Bem, podemos usar algo chamado Alt Text. Deixe-me ir para a minha página inicial, e aqui vou eu selecionar estes cartões. Se eu clicar no ícone Configurações, como você pode ver aqui temos o Texto Alt. Alt é a forma curta de alternativa, por isso é um texto alternativo. Para cada imagem, podemos especificar um texto alternativo, mas por que precisamos fazer isso? Bem, há muitas razões diferentes para especificar um texto alternativo para suas imagens. Número 1, motores de busca poderiam facilmente entender o significado por trás de suas imagens e, portanto, eles podem classificar seu site mais alto. Desta forma, você pode melhorar o seu SEO. A segunda razão é que, às vezes, nossas imagens podem não ser carregadas completamente. Nesse caso, o navegador mostrará o texto alternativo ou o texto alternativo ao usuário. A última razão é que o texto alternativo ou o texto alternativo podem ser úteis para pessoas com deficiências visuais que usam leitores de tela. Pessoas com deficiências visuais geralmente usam leitores de tela para ler o conteúdo de uma página da Web. Quando nossas imagens não têm texto alternativo, o leitor de tela simplesmente lê seu nome. Por exemplo, se eu for para Meus ativos, eu vou rolar para baixo, ele diz Cartão 1. Não é descritivo, então o usuário pode estar confuso. Se eu rolar para cima aqui, você pode ver que essas imagens de projetos não têm nomes descritivos. Aqui temos 1, 2, 3, 4, 5, 6. Devemos adicionar texto alternativo às nossas imagens, a fim de ajudar um usuário com deficiências visuais a entender o significado por trás da sua imagem. Mas como podemos adicionar texto alternativo às nossas imagens? Bem, há muitas maneiras de fazer isso. A primeira e mais simples maneira é ir para os Ativos e, em seguida, se você passar o mouse sobre uma de suas imagens, você pode clicar no ícone Configurações. Em seguida, aqui você pode escrever o seu texto alt. Aqui temos uma dica. Diz para escrever uma descrição desta imagem. O texto alternativo é usado por leitores de tela e/ou se uma imagem não carregar. Aqui temos duas guias diferentes. Temos descritivo, temos decorativo. Quando nossa imagem é decorativa, podemos simplesmente configurá-la como decorativa assim. Aqui diz, imagens decorativas não transmitem significado e não requerem texto alt. Isso é certo. Portanto, não precisamos adicionar texto alternativo às nossas imagens decorativas. Mas se nossa imagem tem um significado, precisamos escrever uma descrição para isso. Precisamos selecionar Descritivo, e aqui precisamos escrever algo. Esta imagem não é decorativa. Se eu for para a seção de Depoimentos, esta é a imagem do nosso cliente. Aqui podemos simplesmente escrever a imagem de Kristine Watson. Feito. A partir de agora, sempre que você usar esta imagem em seu site, ela terá este texto alternativo. Mas há algo que você precisa ter em mente. Quando você adiciona uma imagem usando a seção de plano de fundo, ela não tem nenhum texto alternativo. Então, aqui, este ícone não tem nenhum texto alternativo. Mas se você quiser usar este ícone em outro lugar usando um elemento de imagem, como você pode ver aqui, você pode ir para seus ativos e você pode simplesmente clicar no ícone Configurações e definir seu texto alt como decorativo assim. Eu vou fazer a mesma coisa para esses dois ícones também. Decorado e decorado. Como regra geral, nossos ícones são sempre decorativos. Deixe-me rolar um pouco para cima. Mas e essas imagens que são dinâmicas? Como você se lembra, esta imagem vem do nosso CMS. Não vem de nossos ativos aqui quando criamos nossa coleção dentro do nosso CMS aqui. Quando criamos nossos itens de coleções, por exemplo, Simplify+, carregamos essa imagem do nosso computador. Aqui podemos especificar qualquer texto alt. O que devemos fazer? Bem, para corrigir esse problema, você pode simplesmente ir para sua coleção Projetos aqui. Em seguida, se você clicar neste ícone Configurações, aqui você pode criar um novo campo personalizado. Vou adicionar um campo aqui, e ele vai ser texto simples, e o rótulo vai ser ALT Text. Simplesmente assim. Não vai ser necessário, então eu não vou marcar esta caixa de seleção obrigatória. Vou tocar em “Salvar campo” e “Salvar coleção”. Agora, se eu for para este projeto Simplify+. Primeiro, deixe-me mudar seu nome para Simplificar. Se eu rolar para baixo, aqui temos este novo campo de texto alt. Podemos simplesmente descrever esta imagem. Por enquanto, vou escrever algo como exemplo. A imagem do projeto Simplificar. A propósito, não é o melhor texto alternativo. Vou salvá-lo. Agora, deixe-me ir para o meu projeto aqui. Se eu selecionar esta imagem e clicar no ícone “Configurações”, aqui, como você se lembra, conectamos esse elemento à nossa imagem do projeto. Aqui eu posso simplesmente obter o texto alt de minhas coleções. Se eu marcar esta caixa de seleção, posso escolher texto alternativo, texto simples, e está pronto. Agora, cada uma dessas imagens terá seu próprio texto alt. Claro, se você já definiu o texto alternativo para eles. Podemos fazer a mesma coisa para a página de projetos. Se eu for para o modelo do projeto, eu vou selecionar esta imagem, e eu vou clicar neste ícone “Configurações”, eu vou obter o texto alt de Projetos, e deixe-me escolher o campo ALT Texto assim. Isso é tudo sobre texto alternativo. Mas há mais uma coisa sobre acessibilidade, que é sua hierarquia de cabeçalhos. Como referi anteriormente, nossas rubricas devem ter uma estrutura clara. Se eu for para a minha página inicial e se eu for para a seção Hero, posso ver que este título tem a tag HTML H1. Se eu clicar no ícone Configurações, você pode ver que temos H1 a H6. Mas como você deve escolher seu tipo de título? Bem, deixa-me dizer-te uma regra. H1 está reservado para as palavras mais importantes em sua página. Geralmente são as primeiras palavras que o usuário vê em sua página. Neste caso, é o título da seção Herói. Lembre-se que você deve sempre usar o tipo de cabeçalho H1 uma vez em cada página. Você não deve usá-lo várias vezes. Mas por que isso importa? Porque os motores de busca poderiam facilmente entender a estrutura do seu site quando você define os tipos de cabeçalho corretamente. Se você se lembra, quando estávamos projetando essa seção de projeto recente, eu disse que eles intencionalmente definir o tipo de cabeçalho para H3. Não está certo. Por quê? Porque você não deve pular um tipo de cabeçalho ao projetar uma página da Web. Quando você usa H1 , os segundos textos mais importantes em sua página web devem ter a tag H2. Neste caso, configuro-o para H3 para explicar a diferença aqui. Se eu pular um tipo de título, os motores de busca como o Google não conseguem entender a estrutura do seu site corretamente e, portanto, eles não darão uma classificação mais alta ao seu site. Vou em frente e consertar isso rapidamente. Mas antes de fazer isso, vou mostrar a vocês um recurso muito útil, a seção Auditoria. Se você for para o canto inferior esquerdo aqui você pode ver que temos diferentes opções. Temos este botão Ajuda, temos tutoriais em vídeo, temos QuickFind e, em seguida, temos a seção Auditoria. Se eu clicar nele, aqui podemos encontrar as imagens de texto ALT ausentes e nível de cabeçalho ignorado. Como você pode ver, “ As auditorias verificam a página atual em busca de oportunidades para melhorar o desempenho e a usabilidade do seu site”. Vou descartá-la. Aqui, se eu clicar neste texto alt ausente (13), você pode ver que ele nos mostra todas as imagens que não têm um texto alt. Ele até nos mostra a coleção de projetos aqui e todos os itens dentro que não têm um texto alternativo. Já especificamos o texto alt para este projeto Simplifique, mas dê uma olhada, outros projetos não têm um texto alternativo. Temos duas opções aqui. Podemos ignorar isso. Por exemplo, se este Cartão 1 não precisa de um texto alternativo, podemos simplesmente clicar neste ícone de sino para ignorá-lo, ou se você quiser simplesmente ir em frente e adicionar um texto alternativo à nossa imagem, podemos simplesmente clicar neste botão de seta para a direita. Diz: “Leve-me para o conserto.” Se eu clicar nele, vamos ser levados para o lado Ativo, e podemos especificar um texto alternativo descritivo aqui. Mas e a outra seção? Como você pode ver aqui, nós temos este nível de direção pulado. Se eu abri-lo, aqui diz: “Os cabeçalhos solicitados ajudam os visitantes a entender a estrutura da página e melhorar a navegação da página.” Diz: “Projectos da rubrica H3.” Algo está errado com a direção deste projeto. Isto é exactamente o que vamos resolver. Posso ignorá-lo ou posso dizer para me levar para o conserto. Se eu clicar nesta seta para a direita, eu posso alterar o tipo de cabeçalho no lado direito aqui. Vou mudá-lo para H2, e agora temos uma estrutura correta. Vou rolar para baixo. Deixe-me selecionar este título também. Vai ser H2 também. Vou configurá-lo para H2. Legal. Deixe-me rolar para baixo. Tudo parece bem. Agora deixe-me ir às auditorias. Lá vamos nós. Esse aviso desapareceu porque agora o nosso site tem uma estrutura clara em termos de tipos de cabeçalho. Eu posso simplesmente ir para outras páginas, por exemplo, Fale Conosco. Aqui este título “Fale Conosco” é o título mais importante desta página. Portanto, usamos o tipo de cabeçalho H1. Se eu for à auditoria, ele diz: “Nenhum problema encontrado.” Isso é ótimo. Agora, deixe-me ir para outra página em nosso modelo de projetos. Aqui eu vou auditar. Diz, “Nível de cabeçalho ignorado”, novamente, título do projeto. nome deste projeto tem o tipo de cabeçalho H1. Nós não temos nenhum outro rumo aqui exceto aqui ele vai ser H2, então eu vou mudá-lo para H2 assim. Agora, se eu auditar, lá vamos nós, esse aviso se foi. Tudo bem caras. Isso é tudo sobre acessibilidade. Ao criar um site, certifique-se de torná-lo acessível a todos. É muito importante porque é isso que faz você um grande web designer e desenvolvedor web. Espero que tenham gostado deste vídeo. Vejo-te no próximo. 64. Configurações de projeto: Ei, neste vídeo vamos falar sobre um cenário de projeto. Já falamos sobre isso antes, mas neste vídeo, vou mostrar algumas outras características da configuração do projeto. Como você se lembra, para ir para as configurações do projeto, você precisa ir para o canto superior esquerdo e você precisa clicar neste ícone “W” aqui, e então a partir daqui você pode ir para as configurações do seu projeto, e aqui temos opções diferentes. Nós temos Geral, Hospedagem, Editor, etc Nós não vamos mergulhar em todos eles porque, por exemplo, temos um vídeo dedicado sobre SEO e também planos de hospedagem. Eu só vou guiá-lo através das guias e campos mais importantes aqui. Na guia Geral, temos este nome, este é o nome do nosso projeto. Como você pode ver aqui, temos uma dica, ela diz: “Este é o título do projeto dentro do Webflow.” Então temos o subdomínio. Este é um domínio de preparação que o Webflow nos fornece. É totalmente gratuito e você pode publicar seu site neste domínio. No momento, este projeto ainda não foi publicado. Você pode ir em frente e modificar isso, e se esse subdomínio estiver disponível, você pode usar esse domínio. Aqui podemos selecionar uma pasta e diz “Os projetos podem ser movidos para dentro e para fora das pastas aqui.” Não precisamos mover nosso projeto para nenhuma pasta. Então temos esses ícones. Aqui você pode fazer upload de um Favicon. Um Favicon é este pequeno ícone que você pode ver na aba de cada navegador. Deve ser um ícone de 32 por 32 pixels. Você pode ver todos os formatos suportados aqui, PNG, GIF ou JPG. Você também pode fazer upload de um Webclip. Este é apenas um ícone que aparece quando o link do seu site é salvo em uma tela inicial do iPhone. Estes são opcionais, mas certifique-se de carregar o Favicon sempre para o seu site. Então temos a Localização. Aqui você pode escolher o fuso horário desta lista. Em seguida, você pode especificar um código de idioma. Diz: “Defina o código de idioma do seu site para permitir que navegadores, aplicativos de tradução e outras ferramentas executem tarefas sensíveis ao idioma.” Também é opcional. Você pode ter acesso à lista de códigos de idioma se você clicar neste link, mas para Inglês, você pode escrever EN, por exemplo. Então temos a senha do site. Algumas dessas opções estão bloqueadas para o plano gratuito. Se você quiser usá-los, você precisa ir em frente e atualizar sua conta ou você precisa adicionar um plano de hospedagem ao seu projeto. Vamos falar sobre os planos de conta e planos de hospedagem, mas por enquanto, você só precisa saber que alguns recursos estão disponíveis apenas em planos Pro ou para projetos com um plano de hospedagem. Por exemplo, se você quiser mostrar seu projeto, você precisa ter um plano pago. Uma coisa mais importante é a marca Webflow. Ele diz “Para ocultar a marca Webflow do site publicado, adicione hospedagem ou atualize sua conta para Pro.” O que é a marca Webflow? Deixe-me ir ao designer por um segundo, e eu vou te mostrar o que é exatamente. Se você publicar seu site, se você clicar neste botão “Publicar”, este é o nosso domínio de preparação que eu acabei de mostrar a você. Se você clicar em “Publicar” para selecionar um domínio, você pode publicar seu site, e agora ele é publicado, e se eu clicar neste pequeno ícone, lá vamos nós. Aqui está o nosso projeto. Você pode ver que no canto inferior direito há este emblema “Made in Webflow”, e ele aparecerá em seus sites se você estiver usando o domínio de teste gratuito e se seu site for publicado neste domínio. Se você ir em frente e adicionar um plano de hospedagem ao seu projeto, você pode simplesmente desabilitar isso. Deixe-me voltar para as configurações do projeto, vamos ver se temos mais alguma coisa. Aqui temos a visão geral do nosso projeto, o tamanho total do ativo, último publicado, última atualização, o número de páginas, submissões de formulário. Estas são as nossas estatísticas. Aqui temos a atividade do site, eu vou rolar para cima. Se você for para Hospedagem, poderá adicionar uma hospedagem ao seu projeto. Falaremos sobre isso mais tarde. Então temos o Editor. Aqui você pode adicionar colaboradores aos seus projetos para que outra pessoa possa editar o conteúdo do seu projeto, mas ele só estará disponível se você tiver o plano do site CMS ou Business. Então temos Billing. Não vamos falar disso agora porque temos um vídeo dedicado para isso. Então temos SEO, o mesmo caso. Vamos falar sobre isso mais tarde. Então temos Formulários. Passamos por todos esses campos antes. Então temos Fonts. Aqui você pode adicionar suas fontes personalizadas, já falamos sobre isso. Então temos Backups. Esta banheira é tão útil. Você precisa saber que o Webflow faz backup do seu projeto quando você pressiona Command Shift S ou Control Shift S no Windows. Por que isso importa? Porque às vezes você pode alterar algo e você deseja reverter para a versão anterior do seu projeto. Neste caso, você pode simplesmente ir para os Backups e você pode encontrar a versão apropriada aqui, por exemplo, este diz que dois dias atrás, backup automático, três páginas, 102 estilos, etc Você também pode visualizar esta versão e, em seguida, você pode restaurá-la. Mas tenha em mente que, se você quiser restaurar alguns backups antigos, você precisa de um plano de hospedagem ou de uma conta paga. Mas você pode restaurar esses backups recentes facilmente. Então temos Integrações. Nesta guia, você pode realmente conectar seu projeto com serviços de terceiros. Por exemplo, Google Analytics, Google Maps, Facebook Pixel e você também pode gerar um token de API. Vamos falar sobre as Integrações em um vídeo separado, mas por enquanto, você só precisa saber que ele existe nas configurações do projeto. Finalmente, temos Custom Code, que também está disponível para planos pagos. Usando esta seção, você pode adicionar algum código personalizado ao seu site, se necessário. Mas, na maioria das vezes, para a maioria dos sites, você não precisa adicionar nenhum código personalizado. Mas se você precisar estender os recursos nativos do Webflow, basta atualizar seu plano e aproveitar esses recursos úteis. O que temos aqui na barra de ferramentas? Aqui temos alguns ícones. O primeiro é o ícone Transferir. Se eu clicar nisso, ele diz “Para um usuário, para uma equipe”. Usando este botão, você pode transferir seu projeto para outra conta do Webflow. Mas para fazer isso, novamente, você precisa atualizar seu plano para uma conta paga. Você também pode transferir seu projeto para uma equipe se você dirigir-se a esta guia, é uma opção útil se você quiser transferir o projeto do cliente para sua própria conta e você não quer hospedar o projeto em sua própria conta. Falaremos sobre os benefícios desta opção mais tarde. A próxima opção aqui é Excluir. Se você quiser excluir seu projeto, você precisa simplesmente inserir este código vermelho aqui e, em seguida, excluir seu projeto para sempre. Lembre-se, uma vez que você exclui seu projeto, ele é excluído permanentemente e você não pode reverter essa operação. Certifique-se de pensar duas vezes antes de excluir seu projeto para sempre. Então temos a opção Duplicar. Às vezes você pode precisar duplicar um projeto por um motivo específico, não importa se você só quer arquivar um projeto ou se você só quer fazer algumas alterações na versão duplicada, você pode simplesmente clicar neste botão “Duplicar”, e aqui você pode simplesmente duplicar seu projeto. A última opção aqui é Cancelar publicação. Se você clicar nele, seu site será inédito e você precisa publicá-lo novamente. Aqui também temos outras opções. Temos Compartilhar. Às vezes, você pode precisar compartilhar seu projeto com outros designers ou, digamos, outros colaboradores ou até mesmo com o cliente. Se você clicar neste botão “Compartilhar”, aqui você pode simplesmente ativar essa opção e, em seguida, o Webflow gera um link de compartilhamento exclusivo para o seu projeto. Se você simplesmente copiar este link e compartilhá-lo com seu cliente ou qualquer outra pessoa, ele ou ela pode facilmente obter acesso ao projeto, mas com acesso de leitura. O que isso significa? Isso significa que eles podem fazer algumas alterações no site, mas essas alterações não serão salvas, é por isso que é chamado somente leitura. Você pode ter 100% de certeza de que eles não podem quebrar seu site. Vou desligá-lo e depois temos o Designer. Se você clicar nele, você será levado ao designer. Então temos o Editor. Diz: “Publique seu projeto para acessar o Editor.” Vamos falar sobre o editor no próximo vídeo. Tudo bem, pessoal, isso é tudo para as configurações do projeto. Há muitas coisas que não falamos, como a seção SEO ou Editor, mas definitivamente vamos mergulhar nelas. Eu eu que você gostou deste vídeo e eu vou te ver no próximo. 65. Editor: Ei, neste vídeo vamos falar sobre o editor de fluxos de trabalho. Mas antes disso, vamos em frente e verificar nossos links porque vamos publicar nosso site. Quando estávamos construindo este projeto, criamos alguns links, mas eles são links vazios. Não há URL, portanto, não criamos um destino para esses links. Vamos em frente e corrigir isso rapidamente. Vou começar com a barra de navegação. Se clicarmos neste link do logotipo, não nos levará a lugar nenhum. Deixa-me mostrar-te. Se eu visualizá-lo e se eu clicar nele, nada acontece. Isso porque não há destino para este link. Vou clicar duas vezes nesta barra de navegação, e vou selecionar este link do logotipo da barra de navegação. Então, no lado direito, você pode ver que temos as configurações da marca e aqui temos diferentes opções. O que nos interessa é o tipo e URL. Que tipo de comportamento estamos procurando? Queremos conseguir isso. Quando o usuário clica neste logotipo, ele deve levá-lo para a página inicial. Vou selecionar o tipo. Por padrão, ele é definido como URL externo. Vou mudar para a página. Em seguida, a partir deste menu gota de página, criamos duas páginas estáticas home e entre em contato conosco. Vou escolher a página inicial. Simplesmente assim. Em seguida, podemos especificar se ele deve abri-lo na mesma guia ou em uma nova guia. Vou configurá-lo para esta aba. Agora vamos em frente e verificar. Se eu clicar nele, lá vamos nós. É exatamente o que queremos. E quanto a outros links aqui? Vou clicar duas vezes nele. Vou selecionar este link inicial. Vou mudar o tipo para página e a página vai estar em casa. E quanto a projetos e serviços e entre em contato conosco? Deixe-me primeiro selecionar este Fale Conosco e, em seguida, eu vou mudar o tipo para página, e ele vai levar o usuário para a página Fale Conosco. Mas e quanto a projetos e serviços? Bem, como você se lembra, criamos a seção de projeto e a seção de serviços em nossa página inicial. Então, quando o usuário clica no link desses projetos, o usuário deve ser levado para essa seção particular da nossa página inicial. Como isso é possível? É muito simples. Primeiro, deixe-me voltar à minha instância e eu vou rolar para baixo. Deixe-me ir para a seção do projeto recente e eu vou selecionar esta seção. Então, se você passar para as configurações do elemento no lado direito, aqui temos este campo, ID. Vou especificar um ID para esta seção específica. Deve ser um ID exclusivo. Lembre-se disso. Eu vou escrever, projetos. Legal. Mas e os serviços? Vou rolar para baixo. Eu vou fazer a mesma coisa para esta seção de serviços, e aqui eu vou escrever serviços. Legal. Estamos quase lá. Vou rolar para cima e vou clicar duas vezes na minha barra de navegação. Se eu selecionar esses projetos link, no lado direito, se eu abrir este menu drop-down tipo, temos diferentes opções além de URL externa e página que usamos antes, temos telefone, e-mail, seção e bem. Eu vou escolher a seção, e então nós temos este novo menu de seção, e se eu abri-lo aqui, nós temos seções diferentes. Estes dois são para os nossos formulários, vou selecionar projetos. Esta é a seção que acabamos de criar. Agora vamos ver o que acontece se eu voltar para minha instância e se eu visualizar este projeto, eu vou clicar em projetos. Lá vamos nós. Nós somos levados para a seção do projeto. Você pode encontrar esse comportamento em muitos sites diferentes hoje em dia. Vamos em frente e fazer o mesmo pelos serviços. Deixe-me selecionar este tipo. Eu vou escolher a seção e deixe-me selecionar serviços. Terminamos, mas não estamos. Deixe-me voltar à instância. Vou pré-visualizar. Vou clicar nos serviços. Lá vamos nós. Parece bem. No entanto, temos um problema. Se eu for para outra página, por exemplo, nossa página Fale Conosco, deixe-me mostrar o que acontece. Eu vou pré-visualizar e se eu clicar em projetos, como você pode ver, nada acontece porque nós não temos a seção do projeto aqui. A mesma coisa acontece se eu clicar nesses serviços. Como podemos consertar isso? Deixa-me mostrar-te como. Eu vou voltar para minha página inicial, e eu vou clicar duas vezes nesta barra de navegação e deixe-me selecionar o link deste projeto. Aqui, o tipo é definido como seção e você vai transformá-lo de volta para URL externo. Aqui eu vou remover este sinal de hashtag e nós podemos simplesmente escrever um tick de volta e uma barra, e então eu vou adicionar um sinal de hashtag. Finalmente, precisamos especificar nossa ID de seções. Deixe-me escrever projetos. Vou fazer a mesma coisa por estes serviços. Deixe-me selecionar este link. Eu vou mudar seu tipo para URL externa, e eu vou escrever backtick forward barra, um sinal de hashtag e serviços. Desta forma, estamos usando um link âncora. Este encaminhamento significa ir para a nossa página inicial e, em seguida, este serviço de hashtag significa ir para esta seção particular. Agora vamos em frente e ver se funciona. Mas, a fim de verificar, você precisa primeiro publicar seu site porque ele não funciona se simplesmente avançarmos e visualizá-lo. Vou publicá-lo. Vou selecionar este domínio de teste, e vamos acertar esta publicação para selecionar um domínio. Legal. Então, se eu abri-lo aqui, eu posso clicar em projetos e eu vou ser levado para esta seção. Se eu clicar em serviços, serei levado a esta seção. Mas a parte legal é que se eu for para o Fale Conosco, por exemplo, e se eu clicar em projetos, seremos levados de volta à nossa página inicial, diretamente para esta seção do projeto. Isso é tão útil. Não é? Agora vamos em frente e selecione este botão entrar em toque. Vou clicar no ícone de configurações e, em seguida, aqui vou para a seção da página. Deixe-me escolher Entre em contato conosco. E o trabalho CR? Eu vou selecioná-lo e eu vou escolher seção aqui, seção página, e deixe-me escolher projetos. Deixe-me rolar até aqui. Esses botões aprendem mais têm URLs dinâmicos, então não precisamos modificá-los. E quanto a esses botões aprender mais? Nós não criamos uma página para nossos serviços porque este é um projeto fictício e não precisamos criar algumas páginas simples de novo e de novo e de novo. Até agora você aprendeu a criar uma página moderna com interações complexas. Se você quiser, você pode ir em frente e criar uma página para esses serviços, mas não é necessário para este curso. Vou rolar para baixo. Aqui também temos links diferentes. Nós não criamos nenhuma página para eles também. Está tudo bem porque eu só queria mostrar como você pode criar um rodapé com links diferentes. Você sempre pode ir em frente e criar algumas outras páginas e definir um destino para esses links. Agora vamos passar para o nosso tópico principal, que é o editor. Quando você desenvolve um site, seu cliente não sabe como trabalhar com o designer de fluxos de web e não deve. Por quê? Porque é muito complexo para eles aprenderem todas as coisas que você aprendeu neste curso, e é totalmente compreensível. Eles devem sempre entrar em contato com você se quiserem modificar algo, modificar o conteúdo de seu site? Claro que não. Ele pode usar o editor. Se você passar para este topo do seu ícone no canto superior esquerdo, e se você clicar nele, você pode encontrar o editor. Vou clicar nele e seremos levados ao editor. Aqui está o editor. Como você pode ver, temos esta barra de ferramentas na parte inferior, temos páginas, coleções, configurações. Então temos dois botões, volta ao site ao vivo e publicar. Como os clientes podem ir em frente e modificar o conteúdo aqui? É tão simples. Vamos supor que você deseja modificar o cabeçalho. Eles podem apenas passar o mouse sobre este cabeçalho, eles podem clicar nele e então eles podem começar a modificá-lo. Vamos supor que eu queira mudar essa palavra impressionante com incrível, exatamente assim. É tão simples. Eles não precisam ir ao designer e modificar tudo. Eles também podem inserir um link aqui. Eles podem envolvê-lo com extensão, todo tipo de coisas, mas eles não podem modificar o layout do site. É muito importante. Eles podem alterar sua configuração de exibição, as propriedades CSS e esse tipo de coisas. Vamos supor que eles querem mudar este botão entrar em toque. Eles podem passar o mouse sobre ele, e se eles clicarem neste ícone de configurações aqui, eles podem editar o texto. Eles também podem editar o link. Eu vou clicar em Editar texto, e aqui eu vou mudá-lo para começar, por exemplo. Simplesmente assim. Vou desfazer isso. E quanto às imagens? Bem, mudar imagens também é fácil. Eles podem passar o mouse sobre uma imagem e, se clicarem nela, podem selecionar uma nova imagem em seu computador. Vou rolar para baixo. Eles podem até modificar o conteúdo de sua lista de coleções. Deixe-me clicar neste botão “Saiba mais” e agora estamos na página do projeto. Você se lembra quando falamos sobre o texto rico, o que usamos aqui para os detalhes? Quando usamos um rich text, o cliente pode simplesmente modificá-lo aqui. Eles podem editá-lo, eles podem formatá-lo, eles podem torná-lo negrito, eles podem adicionar links, eles podem até mesmo adicionar imagens e vídeos a esta seção. Como? Se eu clicar aqui, eu posso clicar neste botão mais, e lá vamos nós. Posso escolher uma imagem, um vídeo. Pode até incorporar um código. Ele só está disponível para um site pago ou conta paga. Eles podem adicionar uma lista de marcadores, etc. É por isso que usar um rich text é tão benéfico quando você está projetando um site para um cliente porque eles não precisam saber como modificar os parágrafos, os cabeçalhos, etc. É por isso que usar um rich text é tão benéfico quando você está projetando um site paraum cliente porque eles não precisam saber como modificar os parágrafos, os cabeçalhos, etc. indo para cá, se quiserem. Mas e o conteúdo dinâmico? Vou para a página inicial. Aqui nesta barra de ferramentas na parte inferior, se eu clicar em páginas, eu posso ver todas as páginas. Posso ver páginas estáticas, páginas de projeto. Posso modificar as configurações dessas páginas uma a uma, mas e se eu quiser adicionar ainda mais projetos ao meu site? É tão simples. Posso ir para as coleções. Posso ir à coleção de projetos e todos os meus projetos estão aqui. Eu posso simplesmente selecionar um deles se eu quiser modificá-los. Aqui estão todos os campos que criamos antes, como a imagem, tipo de projeto, data de conclusão, detalhes do projeto, até mesmo todo o texto. Se eu quiser criar um novo projeto, eu posso apertar este botão verde e eu posso criar um projeto e o cliente pode simplesmente gerenciar seu site sem a sua ajuda. Claro, se eles querem modificar o layout ou fazer algumas modificações complexas, eles podem chegar até você. Caso contrário, eles podem simplesmente modificar o conteúdo, adicionar novo conteúdo sem entrar em contato com você. Finalmente, uma vez que as alterações são feitas, eles podem apertar este botão de publicação para publicar todas as alterações. Como você pode ver aqui, diz que duas são mudanças inéditas. Se eu clicar nele, você pode visualizar as alterações feitas e clicar em “Publicar”. Publique nas alterações e agora essas alterações estão ativas. Isto é tudo sobre o editor. É uma ferramenta muito útil para modificar o conteúdo e adicionar novos conteúdos, especialmente para seus clientes. Porque agora você é um usuário profissional de fluxo de web e você não precisa usar o editor, mas seu cliente não é. Portanto, ele ou ela precisa usar o editor para adicionar conteúdo ou modificar conteúdo. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 66. Publicar seu site: Ei, agora que nosso site está pronto, é hora de publicar nosso site. Mas antes disso, talvez seja necessário conectar seu domínio personalizado ao seu projeto. Eu já mostrei que se você passar para esta seção de publicação aqui e se eu clicar neste botão “Publicar”, você pode ver que o fluxo de web cria um domínio de preparação para o seu projeto. É totalmente gratuito e você pode ir em frente e modificar este URL nas configurações do projeto. No entanto, se você estiver criando um projeto para um cliente, você não deseja usar o domínio de teste porque ele não parece profissional. Portanto, você precisa conectar o domínio personalizado ao seu projeto. Como você pode fazer isso? Bem, você pode simplesmente clicar neste botão aqui ou você pode ir diretamente para as configurações do projeto e ir para a guia de hospedagem. Vou clicar nele e eu serei levado para a guia de hospedagem das configurações do projeto. Aqui é onde podemos adicionar um plano de site para o nosso projeto. Todos os projetos em seu plano inicial vêm com preparação gratuita, como você pode ver que é indicado aqui e se você quiser conectar o domínio personalizado ao seu projeto, você precisa atualizar para um plano de site pago. Então você precisa adicionar um plano de site aqui, você pode escolher entre diferentes opções, como básico, CMS, negócios. Vamos falar sobre as diferenças mais tarde, mas o processo se parece com isso. Primeiro, você irá em frente e adicionar um plano de hospedagem, um plano de site ao seu projeto e, em seguida, a opção de domínio personalizado estará disponível. Se você já tem um domínio, você pode simplesmente escrevê-lo aqui e então você precisa ir em frente e atualizar seu DNS. Não vamos mergulhar nos assuntos técnicos agora porque conectar um domínio personalizado ao seu projeto depende do seu provedor DNS. Se você comprou seu domínio no domínio do Google, seu provedor DNS é o domínio do Google e cada provedor tem seu próprio processo de configuração. Portanto, não é possível ir em frente e explicar o processo de conexão de domínio personalizado de todos os provedores de domínio. Este processo de configuração pode mudar com freqüência, então a melhor maneira de aprender sobre ele é apenas ir para a seção de domínio personalizado e você clicar sobre isso, aprender a configurar o hospedagem de domínio personalizado. Se você clicar nele, você será levado para outra página e aqui há um vídeo muito bom que você pode assistir explicando como você pode conectar um domínio personalizado ao seu projeto. Você também pode ir em frente e ler este artigo porque o Webflow atualiza esses artigos com freqüência se eles decidirem alterar algo. É um processo simples. No entanto, como o processo parece diferente para cada provedor, não vamos mergulhar nas questões técnicas, mas o processo é tão fácil e não é demorado. Depois de conectar seu domínio personalizado, você pode ir em frente e publicar seu site em seu domínio personalizado. Como você pode fazer isso? É tão simples. Você pode simplesmente ir para este botão “Publicar”, você pode clicar nele e, em seguida, aqui, além deste domínio de teste, você pode escolher o seu domínio personalizado e clicar em “Publicar” para domínios selecionados. Lembre-se, você sempre pode cancelar a publicação do seu site também. Você também pode ir para o designer e você pode clicar neste botão “Publicar” na barra de ferramentas e você pode escolher seu domínio personalizado aqui também e, em seguida, clicar no botão “Publicar”. Neste momento, nosso domínio de teste está selecionado. Vamos publicar nosso projeto por um segundo, e agora ele é publicado e você pode abri-lo se você clicar neste pequeno ícone. Sempre que você fizer alterações seu site, você precisa se certificar de ir em frente e publicá-lo. Caso contrário, essa mudança é privada e ninguém pode ver isso. Certifique-se de publicar seu site depois de fazer algumas alterações. Se você quiser cancelar a publicação do seu site, você pode simplesmente clicar neste botão Cancelar publicação e ele será inédito. Se você quiser modificar este URL de teste, como eu mencionei antes, você pode ir para as configurações do projeto e, em seguida, sob a guia geral aqui você tem sub-domínio e você pode apenas modificar este subdomínio. Deixe-me mudar para outra coisa, circledesign. webflow.io, vou salvar as alterações e depois publicá-las agora. Neste momento, nosso site está publicado neste domínio de teste e ninguém mais pode usar este URL. Esta é uma URL única para o nosso projeto. Vou abri-la. Lá vamos nós, a URL foi alterada. Nos vídeos futuros vamos falar sobre diferentes planos de hospedagem se você deve hospedar no Webflow ou não, então se você não sabe qual plano é adequado para você ou seus clientes, não se preocupe, nós entraremos nele. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 67. Planos de webflow: Agora que nosso site está pronto, é hora de falar sobre os planos do Webflow. O Webflow tem planos diferentes. Ele tem planos de conta e planos de site. Neste vídeo, vamos falar sobre planos diferentes. Você vai aprender qual é a diferença entre eles, e você pode decidir qual plano se adapta às suas necessidades. Se você está pronto, vamos começar. Se você acessar webflow.com/pricing, você pode abrir esta página, e aqui estão todas as informações de que você precisa sobre diferentes planos. Se eu rolar para baixo, você pode ver que o Webflow tem dois tipos de planos: planos de site e planos de conta. Qual é a diferença entre eles? Bem, sempre que você quiser conectar seu domínio personalizado ao seu projeto, você precisa adicionar um plano de site ao seu projeto. Neste momento, estamos a usar o plano de preparação. Todos os projetos por padrão têm o plano de preparação. Mas se você quiser ter acesso a mais recursos e conectar seu domínio personalizado ao seu projeto, você precisa adicionar um plano de site. Este é basicamente um plano de hospedagem. Se eu clicar nesta seção “Plano do site”, serei levado a esta seção. Vamos ver o que temos. Como podem ver, temos quatro opções diferentes. Temos básico, CMS, negócios e empresa. Vamos começar com o básico. Podemos ver o custo aqui. É o custo mensal. Ele diz, melhor para um site simples que não precisa de um CMS. Basicamente, esses planos não suportam CMS. Se você quiser publicar um site que tenha apenas páginas estáticas, este plano funciona melhor para você. Você pode ver todos os recursos disponíveis aqui, você pode criar até 100 páginas estáticas diferentes, você pode obter até 25.000 visitas mensais, você receberá 100 envios de formulários por mês e outros recursos diferentes. Então temos CMS, o que é bom para sites que precisam ter páginas dinâmicas e trabalhar com CMS. Novamente, você pode criar até 100 páginas estáticas, você pode obter até 100.000 visitas mensais. Usando este plano, você pode criar até 2.000 itens de coleta. Em nosso projeto, o item de coleta é onde os projetos que criamos para nossa coleção de projetos. Se você se lembrar, criamos projetos diferentes como simplificar, crypto pi, etc Aqui estão o número de envios de formulários é muito maior. Você pode ir em frente e ler todas essas informações. Não vamos mergulhar neles. Não vou lê-los um por um. Mas você precisa entender que, se quiser conectar um domínio personalizado ao seu projeto, você precisará adicionar um plano de site ao seu projeto. Lembre-se, os planos do site serão adicionados aos projetos, não à sua conta porque também temos planos de conta e falaremos sobre isso em alguns minutos. Mas a próxima coisa que vou mencionar aqui são os planos de comércio eletrônico. Esses planos de site são bons para sites pessoais, blogs e sites de negócios. Se você quiser criar um site de comércio eletrônico usando o Webflow, você precisa adicionar um plano de comércio eletrônico ao seu projeto. Aqui tem padrão, mais, e avançado. Você pode ir em frente e ler as informações aqui e aprender mais sobre diferentes plantas aqui. Vou voltar aos planos do site, e agora vou falar sobre planos de conta. Quando você trabalha com o Webflow, maioria dos recursos são gratuitos para usar, mas há recursos que são pagos também. Estes são alguns recursos adicionais que você pode precisar usar para criar projetos incríveis. Agora vou clicar neste “Planos de Conta”. Lá vamos nós. Aqui temos planos individuais e planos de equipe. Se você é freelancer e trabalha sozinho, não precisa ter um plano de equipe. Mas se você quiser colaborar com outros desenvolvedores e outros designers, talvez seja necessário ir em frente e obter um plano de equipe. Mas vamos falar sobre planos individuais. Quando você cria uma conta no Webflow por padrão, o plano inicial será atribuído à sua conta. Aqui como podemos ver, ele diz, tudo que você precisa para começar a construir com Webflow e é grátis para sempre. Você pode criar até dois projetos usando o plano inicial. Se eu clicar sobre isso, você pode ver os projetos estão em sites hospedados que você constrói no Webflow. Se você criar dois projetos e adicionar um plano de site a esses projetos, ainda poderá criar mais dois projetos usando o plano inicial. Aqui diz que você pode publicá-los em um subdomínio webflow.io para compartilhar como protótipos ou adicionar um plano de site para entrar ao vivo em um domínio personalizado. Então você tem faturamento de cliente. Falaremos sobre essa opção mais tarde. Encenação, diz grátis. Se eu clicar nele, veremos as informações aqui. Diz até duas páginas estáticas e 50 itens CMS. Isso significa que você pode criar mais de duas páginas estáticas e mais de 50 itens CMS. Lembre-se de que você não pode criar páginas mais dinâmicas, mas pode criar mais de duas páginas estáticas. Em nosso projeto, tínhamos apenas duas páginas estáticas: nossa página inicial e nossa página de contato conosco. Deixe-me ir em frente e mostrar-lhe. Se eu for para as “Páginas (P)”, aqui você pode ver em Páginas Estáticas temos Home e Fale Conosco. Se eu tentar adicionar uma nova página aqui, isso não me permite fazer isso. Deixa-me mostrar-te. Diz que você criou todas as páginas permitidas pelo seu plano gratuito. Para adicionar mais, atualize seu plano de site. Esta é a limitação quando se trata de plano inicial. Você não pode transferir seu projeto, você não pode exportar seu código também. Uma das grandes características do Webflow é que você pode exportar seu projeto. Se eu clicar neste “Exportação de código”, ele diz, exportar arquivos HTML e CSS limpos e semânticos para entregar à sua equipe de desenvolvimento. Às vezes, você pode precisar hospedar seu projeto em outro lugar. Não está usando a hospedagem do Webflow. Nesse caso, você pode ir para a barra de ferramentas aqui, e logo na parte superior, você pode ver esta opção Exportar Código. Usando o plano inicial, não é possível exportar seu código. Como você pode ver, ele mostra a visualização HTML aqui. Não é todo o código do seu site. Se você acessar CSS, também poderá ver seu código, JavaScript e ativos. Se você tem uma conta paga, você pode simplesmente exportar seu projeto e hospedá-lo em outro lugar ou fazer qualquer modificação que você deseja. Isso é totalmente com você. Isto é algo a considerar. Então você não tem nenhuma transferência de projeto usando o starter. Deixa-me mostrar-te. Você pode transferir projetos para equipes ou qualquer pessoa com uma conta de fluxo da Web e não pode usar a rotulagem branca. Ele diz, adicione seu próprio logotipo aos formulários de pagamento CMS e Client Faturing e remova a marca Webflow de formulários, e-mails e sites de teste. Você não tem proteção por senha do site também. Se você quiser trabalhar como freelancer e você obter mais e mais projetos como um desenvolvedor web, provavelmente você pode ir com um plano leve que permite que você tenha 10 projetos não hospedados com hospedagem avançada e também transferências de projetos. Mas ainda assim você não tem a opção de rotulagem branca. Se você tem muitos clientes e muitos projetos para trabalhar, você pode ir e obter uma conta profissional. Usando a conta, você é livre para usar todos esses recursos. Mais uma coisa que eu vou mencionar sobre plano gratuito e planos de pagamento é que usando o plano gratuito, você não pode adicionar código personalizado ao seu projeto. Se eu for para o projeto Circle, se eu apenas passar para “Páginas estáticas” aqui, e se eu clicar no ícone de configurações, eu vou rolar para baixo, aqui na parte inferior você pode ver que temos essa opção, Custom Code. No entanto, não está disponível. Se você quiser adicionar algum código personalizado avançado ao seu projeto, você pode simplesmente atualizar para um plano pago e, em seguida, esta opção estará disponível. Você também pode adicionar um plano de hospedagem ao seu projeto e, novamente, esta opção estará disponível. Se eu for para as “Configurações do projeto” e se eu for para a guia “Código personalizado”, você pode ver que essa opção não está disponível aqui também. vez, precisamos de um plano de site pago ou precisamos atualizar nosso plano de conta para adicionar código personalizado ao nosso site. Vamos falar sobre código personalizado em nossas futuras lições. Mas por enquanto, você só precisa saber que usando o plano de stater gratuito, você não pode usar código personalizado, e é totalmente bom porque o plano inicial é útil para pessoas que estão aprendendo. Se você quiser apenas experimentar diferentes opções e aprender como o Webflow funciona, este é o melhor plano que você pode usar. Não há período de teste e não é necessário cartão de crédito. Mas se você conseguir clientes e trabalhar em projetos pagos, você pode definitivamente atualizar para planos pagos, a fim de usar essas opções adicionais. Vamos recapitular. Lembre-se, quando falamos sobre planos no Webflow, temos dois tipos de planos: planos de site e planos de conta. Se você operar seus planos de conta, novos recursos estarão disponíveis para todos os seus projetos dentro da sua conta. Mas se você adicionar um plano de site a um projeto , somente esse projeto poderá usar esses recursos adicionais e tenha em mente que, se quiser conectar um domínio personalizado ao seu projeto, você precisará adicionar um plano de site ao seu projeto. Mas como podemos adicionar um plano de site ao nosso projeto? É tão simples. Se você passar para as configurações do projeto do seu projeto, você pode ver que temos estes guia de hospedagem. Sob esta guia de hospedagem, temos diferentes planos de site. Aqui, como você pode ver, temos básico, CMS, negócios e empresa e você pode ver todas as opções disponíveis para cada plano. Você pode simplesmente adicionar um desses planos à sua conta. Verifique o tipo de cobrança aqui porque você tem as opções de cobrança anual ou mensal. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado, e te vejo na próxima. 68. Introdução ao SEO: Ei, agora que o processo de desenvolvimento acabou, é hora de falar sobre SEO. Como desenvolvedor web, você precisa entender que seu trabalho não termina quando o processo de desenvolvimento é concluído. Depois de desenvolver o site, você precisa otimizar seu projeto para classificar mais alto no Google e em outros mecanismos de busca, mas como você pode fazer isso? Bem, este é o tema deste vídeo. O que é SEO? SEO significa otimização do motor de busca. Deixe-me mostrar-lhe um exemplo. Sempre que você vai para o Google e você procurar algo, vamos escrever apple, quando a classificação deste site é alta, ele aparecerá mais alto no motor de busca e na primeira página, porque se o seu site não aparecer em as três primeiras páginas, isso significa que seu site não está otimizado e as chances são os visitantes não conseguem encontrar seu site porque a maioria das pessoas não vai para a quarta ou quinta página. Por isso, precisamos otimizar o nosso site, a fim de classificar mais alto nos motores de busca. Já falamos sobre alguns pontos antes, como hierarquia de cabeçalhos, mas vamos fazer ainda mais coisas. Depois de desenvolver seu projeto, primeiro, você precisa ir em frente e verificar sua hierarquia de cabeçalhos, como o que fizemos antes, você precisa ter certeza de que você não usa mais de um H1 em cada página e você não pula nenhum em sua página, então você precisa ter certeza de que suas imagens têm todo o texto. Finalmente, o que você pode fazer é ir em frente para o painel Páginas e se você acessar as configurações da página aqui, você pode ver que temos algumas configurações aqui. Bem no topo, temos o nome da página. Isto é apenas para uso interno, a fim organizar todas as nossas páginas aqui, mas para uso externo, precisamos ir para as configurações de SEO. Vamos ver o que temos aqui. Ele diz, especifique o título e a descrição desta página. Podemos ver como eles aparecem nas páginas de resultados do mecanismo de pesquisa na visualização abaixo. Aqui o que podemos fazer é inserir uma tag de título e uma meta descrição. Isso é basicamente o que aparecerá nas páginas de resultados de pesquisa do Google e também nos resultados de outros mecanismos de busca. Aqui para o título, eu vou escrever Circle, que é o nome desta agência fictícia, uma linha vertical, e então eu posso escrever os principais serviços que esta empresa oferece. Vamos escrever uma agência de design e desenvolvimento assim. Mas e sobre a meta descrição? Bem, aqui você precisa explicar o que esta empresa faz brevemente. Eu vou escrever, nós ajudamos as startups a dar vida às suas ideias projetando interfaces impressionantes e experiências do usuário assim, você pode ver a visualização do resultado da pesquisa e diz, esta visualização usa os limites típicos de caracteres para Páginas de resultados de pesquisa do Google no desktop. Os motores de busca fazem experimentos com seus limites de caracteres e podem decidir mostrar conteúdo diferente. Isso é 100% certo. Vou rolar para baixo. Aqui temos Open Graph Settings. As informações que adicionamos aqui aparecem quando nossos usuários compartilham nosso conteúdo em suas contas de mídia social, como Facebook, Twitter, LinkedIn, Pinterest, etc. Se eu rolar aqui para baixo para Abrir Título do gráfico, eu vou verificar este mesmo como SEO Title Tag caixa de seleção. Para Abrir Descrição do Gráfico, vou marcar esta caixa de seleção também. Aqui temos Open Graph Image URL. Certifique-se de adicionar um URL de imagem aqui. Por exemplo, você pode acessar seus Ativos. Primeiro, deixe-me salvar esta página, e então eu vou para Assets. Deixe-me escolher uma dessas imagens. Por exemplo, vou escolher este. Se eu clicar neste ícone de configurações, aqui eu posso obter o link desta imagem. Se eu clicar nele, posso copiá-lo. Então deixe-me ir para o Pages, Início, e se eu colá-lo aqui, lá vamos nós, esta imagem aparecerá quando o usuário compartilhar nosso conteúdo em suas contas de mídia social a imagem, o título e a descrição. Até agora, tudo bem. Agora deixe-me salvá-lo. Agora precisamos ir em frente e otimizar nossas outras páginas como o Fale Conosco. Se eu for para as configurações da página Fale Conosco aqui, para a tag de título, vou escrever Fale Conosco, uma linha vertical, agência Circle. Para a meta descrição, deixe-me escrever, se você quiser obter um código para o seu projeto, não hesite em entrar em contato conosco. Deixe-me verificar. Se você quiser obter um código para o seu projeto, não hesite em entrar em contato conosco. Isso é ótimo. Vou rolar para baixo. Aqui temos o Open Graph Settings também e vamos apenas marcar essas caixas de seleção para obter o mesmo título e descrição. Para a imagem, vou colar o mesmo link aqui. Legal, deixe-me salvá-lo. Feito. Agora precisamos ir para nossa página de modelos de projetos. Se eu for para as configurações, aqui temos novamente título, meta descrição, e todos esses campos com uma exceção. Esta página é uma página dinâmica, portanto, seu conteúdo muda constantemente. Como podemos adicionar o título e meta descrição para cada projeto? Bem, é tão simples. Como você pode ver aqui, temos essa opção de campo, portanto, podemos preencher esses campos de texto dinamicamente, com conteúdo dinâmico. Isso é tão fixe. Vamos supor que primeiro aqui, queremos adicionar o nome do projeto. Se eu clicar neste campo Adicionar, eu posso escolher o campo apropriado. Vai ser o nome. Lá vamos nós. Você pode visualizar os resultados da pesquisa aqui. Este é o nome do nosso projeto, espaço, uma linha vertical, espaço, então eu vou adicionar o tipo de projeto. Vou adicionar um novo campo. Vai ser do tipo de projeto. Aqui temos design de interface do usuário e desenvolvimento de aplicativos. Todas essas informações vêm do nosso CMS e, em seguida, uma linha vertical. Aqui eu vou escrever agência Circle, mas e sobre a meta descrição? Vamos escrever, verificar o, e agora eu vou adicionar um campo, tipo de projeto, projeto que fizemos para o, nome do projeto, empresa. Vamos pré-visualizar. Confira o projeto de design de interface do usuário e desenvolvimento de aplicativos que fizemos para a empresa Simplify. Isso é ótimo, não é? Como estamos usando campos, se eu usar essas setas, eu posso facilmente visualizar os resultados de pesquisa de outros projetos também. Vamos verificar isso. Vou clicar nesta seta para a direita e, como você pode ver, o conteúdo muda aqui. Isso é muito bom, não é? Vou rolar para baixo e aqui para abrir o título do gráfico, vou marcar essas caixas de seleção. Para a imagem, vou escolher a imagem do projeto neste menu e a imagem será alterada dinamicamente também. Se o usuário compartilhar o link deste projeto, Simplificar, a miniatura será essa imagem, mas para outros projetos, a miniatura será diferente, exatamente assim, e a imagem corresponde ao conteúdo aqui. Tudo bem, legal. Agora deixe-me salvá-lo. O que mais podemos fazer em termos de otimização de motores de busca? Bem, há muitas coisas que podemos fazer, e vamos cobrir as mais importantes nos próximos vídeos. Espero que tenham gostado deste vídeo, e vejo-te no próximo. 69. Verificação de sites e Google Analytics: Ei, bem-vindo de volta. Até agora você aprendeu o que é SEO e como podemos otimizar suas páginas da web, a fim de classificar mais alto em diferentes motores de busca. Mas nesta lição, vamos falar sobre a verificação do site e o Google Analytics. Quando um novo site é publicado, Google geralmente tenta indexá-lo automaticamente, mas às vezes leva tanto tempo para que o Google vá em frente e verifique nosso site, verifique páginas diferentes e classifique nosso site. Portanto, podemos ir em frente e apresentar nosso site ao Google manualmente. Como podemos fazer isso? Para isso, precisamos trabalhar com duas plataformas diferentes. Se você ir em frente e procurar o Google Search Console, e aqui você pode encontrar o Google Search Console. Vou abri-la. Aqui está a plataforma. Ele diz que as ferramentas e os relatórios do Search Console ajudam você a medir o tráfego de pesquisa e o desempenho do seu site, corrigir problemas e fazer seu site brilhar nos resultados de pesquisa do Google. Isso é exatamente o que precisamos. A outra plataforma com a qual vamos trabalhar chama-se Google Analytics. Mas primeiro vamos verificar nosso site usando o Google Search Console. Como podemos fazer isso? Bem, é tão simples. Primeiro de tudo, certifique-se de ir em frente e criar uma conta gratuita. Em seguida, se eu for para as configurações do projeto, e se eu for para a guia SEO aqui, eu posso rolar para baixo. Aqui diz verificação do site do Google, e aqui há um link. Você também pode clicar neste link para acessar este site. Isso é totalmente com você, já que eu já estou logado, eu vou clicar nele. Lá vamos nós. Se já tiver verificado algum site antes, poderá ver esta página, mas se não tiver verificado nenhum site antes, poderá ver uma caixa de diálogo. Se está vendo um diálogo, não se preocupe, vou te mostrar o que fazer. Mas no caso de você já ter verificado alguns sites, você precisa seguir e clicar neste link e você precisa adicionar uma propriedade aqui. Basta adicionar propriedade. Então aqui temos duas opções. Temos domínio, temos prefixo URL. Vou selecionar a opção certa aqui. Aqui é onde você precisa acompanhar o URL do seu site. Se eu acessar meu site, eu posso ir em frente e publicar meu site. Vou publicar nos domínios selecionados, e aqui está o nosso domínio. No seu caso, é definitivamente diferente porque este URL é exclusivo para cada projeto. Você precisa abrir. Aqui, você precisa copiar este URL. Lembre-se, copie este URL completamente incluindo Https ou Https. Vou copiá-lo. Vou em frente e ir para o Google Search Console. Deixe-me ir em frente e criar uma propriedade e deixe-me colá-la aqui mesmo. Aperte “Continuar”. Lá vamos nós. Aqui existem muitas maneiras diferentes de verificar a propriedade deste site. Mas deixe-me mostrar-lhe o mais simples. Eu estou indo para ir para HTML tag aqui. Aqui como você pode ver, temos esta tag clique neste “botão Copiar” e colá-lo em um editor de texto. Lá vamos nós. Deixe-me aumentar o tamanho da fonte. Uma vez que você colar isso aqui, você precisa pegar este código de conteúdo exatamente assim. Certifique-se de pegar somente o texto entre essas aspas. Vou copiá-lo. Então, se eu for para as configurações do meu projeto, eu posso colá-lo aqui. Este é o ID de verificação do nosso site do Google. Em seguida, clique em “Salvar alterações”. Legal, mas aqui está a parte importante. Depois de salvar as alterações, você precisa ir em frente e publicar seu site mais uma vez, caso contrário, ele não funcionará. Não se esqueça deste passo. Vou publicar para selecionar os domínios. - Legal. Agora vamos para o Google Console, e aqui vou apertar estes “Verificar botão”. Lá vamos nós. Propriedade verificada. Agora eu posso apertar “Feito”, bom, mas desde que eu tenho projetos diferentes, eu preciso ir em frente e escolher este URL particular aqui. Se você tem apenas este projeto, você não precisa se preocupar com ele. Aqui nesta barra de pesquisa, vou em frente e colar o URL do nosso site, que é este aqui. Vou copiá-lo, colá-lo aqui, entrar. Aqui diz URL não está no Google, mas isso é totalmente bom. Diz que esta página não está no índice, mas não por causa de um erro. Tudo bem, porque leva algum tempo para funcionar. No entanto, podemos ir em frente e clicar em “Indexação de Solicitações”. Ele diz que testar se URL ao vivo pode ser indexado, leva um minuto ou dois solicitação de envio. Lá vamos nós, indexação solicitada. Vou clicar em “Consegui”. Mas como podemos ter certeza de que tudo correu bem? Bem, podemos ir em frente e clicar neste “Test Live URL”. Como você pode ver, ele diz URL está disponível para o Google. URL pode ser indexado e também podemos clicar sobre esta” Ver página testada”. No lado direito podemos ver o código do nosso site. Podemos ir para a captura de tela. Como você pode ver, há uma captura de tela do nosso site e mais informações. Perfeito. Agora o nosso site está verificado. O próximo passo é criar uma conta no Google Analytics. Se você apenas ir em frente e pesquisar no Google Analytics no Google, você pode criar uma conta, é totalmente gratuito usando sua conta do Gmail. Então, uma vez que você está logado, você verá algo como isso. O que você deve fazer aqui? Você precisa ir para o administrador aqui na parte inferior desta página. Aqui temos diferentes opções, conta e propriedade. Você precisa criar uma nova propriedade. Aqui diz: criar uma propriedade do Google Analytics 4 para medir o nome da propriedade de dados da Web e/ou do aplicativo. Vou escrever uma agência de design de círculo. Aqui relatando fuso horário, não importa por enquanto, a moeda não importa. Você pode ir em frente e modificá-los se desejar. Aperte “Próximo”. Aqui você precisa escolher uma indústria. Vou escolher o computador e a electrónica. Tamanho do negócio: pequeno e você pode simplesmente verificar algumas dessas caixas de forma, por exemplo, elas não importam. Vou clicar no botão “Criar”. Perfeito. Agora precisamos escolher uma plataforma, web, aplicativo Android e aplicativo iOS. Eu vou para a web porque este é o nosso site. Aqui precisamos colar o URL do nosso site. Temos os Https aqui. Eu vou ir em frente e copiar apenas esta parte do URL e colá-lo aqui. O nome do fluxo vai ser apenas escrever algo como agência círculo e criar fluxo. Ele foi criado. O que precisamos aqui é esta identificação de medidas. Se você clicar neste “Botão Copiar”, você pode copiá-lo. Se você passar para as configurações do projeto, você pode ir para a guia de integrações, aqui temos o ID de rastreamento do Google Universal Analytics. Você precisa colar o ID de medição que você copiou aqui. - Legal. Certifique-se de que esta opção está activada, utilize o site tag global e clique em “Guardar alterações”. - Legal. Em seguida, lembre-se de publicar seu site mais uma vez. Publicado com sucesso. Agora podemos realmente medir o desempenho do nosso site. O Google Analytics ajuda você a entender o comportamento dos usuários, o que eles gostam, onde eles estão, como eles interagem com seu site e muito mais. É essencial que qualquer site se integre ao Google Analytics. Se eu for para os relatórios aqui, eu posso ver algumas estatísticas aqui. Posso ir ao tempo real. Lá vamos nós. Posso ir para diferentes seções, como demografia, por exemplo, visão geral demográfica. Por enquanto, já que não temos espectadores, não obteremos dados. Mas uma vez que publicamos nosso site e direcionamos tráfego para ele, você pode ir para a seção de relatório e você verá todas as estatísticas e dados. Agora eu vou mencionar algo importante, quando você conectar um domínio personalizado ao seu site e você publicá-lo, você precisa ir para a seção SEO aqui, e você precisa ter certeza de desativar a indexação de subdomínio Webflow. É muito importante, se você não desativá-lo, Google e outros mecanismos de pesquisa podem classificar seu site mais baixo porque há uma versão duplicada do seu site publicada em um subdomínio. Sempre certifique-se de desativar a indexação de subdomínio do Webflow assim como salvar as alterações e publicar seu site. É muito importante. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 70. Otimização de imagem e carga preguiçosa: Ei, bem-vindo de volta. Neste vídeo vamos falar sobre otimização de imagem. Quando você quiser começar a construir seu projeto e o Webflow, a primeira coisa que você precisa fazer é preparar seus ativos. Você precisa exportar seus ativos do software de design, não importa se ele é Figma, Adobe XD, Sketch ou qualquer software que você usa, e então você precisa importar seus ativos para o Webflow. Neste vídeo, vou mostrar-lhe qual é a maneira correta de exportar seus ativos e como você precisa otimizá-los para melhorar a usabilidade do seu site, e também para melhorar o ranking do seu site na pesquisa motores. Se você está pronto, vamos começar. Vou ao meu arquivo de design. Aqui está Figma. Aqui como você pode ver, temos imagens diferentes que usamos em nosso projeto e você já as exportou, mas eu vou mostrar como você precisa fazê-las corretamente. Vamos supor que eu queira exportar este cartão. Primeiro, eu vou selecioná-lo e, em seguida, se eu passar para o Inspetor no lado direito, eu posso simplesmente ir para a seção de exportação e eu posso clicar neste botão mais, e aqui, eu posso especificar algumas preferências. Primeiro, vou especificar o formato. Por padrão, ele é definido como PNG. Você pode escolher JPG, SVG e PDF. Dependendo do software que você estiver usando, esses formatos podem mudar. Mas a maioria dos softwares de design suporta PNG, JPG, PNG e SVG. Qual é a diferença entre esses formatos? Bem, vamos começar com JPG ou JPEG. JPEG é um dos formatos mais populares que você pode usar para suas imagens. Ele tem um nível muito bom de compressão, portanto, seus tamanhos de imagem serão menores se você usar JPEG. No entanto, a troca é que você não obtém fundo transparente ao usar JPEG. Neste caso, já que temos cantos arredondados aqui e precisamos obter fundos transparentes para esses cartões, não podemos usar JPEG. Em vez disso, precisamos usar PNG. PNG é outro formato popular que você pode usar para suas imagens e permite exportar seus ativos com fundos transparentes. Portanto, podemos criar alguns gráficos de sobreposição e é tão útil. Mas e o SVG? Bem, SVG é um formato de arquivo vetorial. Se você criar uma forma simples, por exemplo, se você criar um círculo, deixe-me mostrar-lhe, assim, você pode exportá-lo usando o formato SVG. Qual é a diferença? Quando você usa o formato SVG, este arquivo será escalável sem perder qualidade porque é um arquivo vetorial. Mas quando exportamos uma imagem, ela será um arquivo raster, e quando a dimensionarmos, ela perderá qualidade. Sempre que for possível exportar seus arquivos usando SVG, certifique-se de fazer isso. No entanto, só é possível para arquivos vetoriais. Por exemplo, quando você cria um logotipo e seu logotipo é um arquivo vetorial, certifique-se de exportá-lo usando SVG. Mas para essas imagens, não é possível usar SVG porque estes não são arquivos vetoriais, estes são arquivos raster. Vou remover este círculo. O formato SVG fornece tamanhos de arquivo pequenos, então JPEG fornece o menor tamanho de arquivo e, finalmente, PNG. Quando você não precisa obter fundos transparentes, você pode simplesmente usar JPEG. Mas se você precisa de fundos transparentes, você precisa ir com PNG. Mas por que estamos falando sobre isso? Será que realmente importa qual formato usamos? Sim, ele faz. Por quê? Como o tamanho do arquivo tem uma relação direta com a velocidade de carregamento da página e quando você tem uma velocidade de carregamento de página baixa, Google classificará seu site mais baixo. Não é o que queremos, é por isso que precisamos otimizar nossos ativos para carregar nossas páginas mais rapidamente e melhorar a usabilidade do nosso site. Deixe-me mostrar-lhe como você precisa exportar suas imagens. Vamos supor que você deseja exportar este cartão. Primeiro, você precisa selecioná-lo. Então você vai para a seção de exportação. Aqui você irá especificar PNG porque você vai precisar de fundos transparentes. Aqui podemos especificar se queremos que este elemento seja explorado em 1x, 2x, etc O que isso significa? Quando ele é definido para 1x, isso significa que você vai obter exatamente o mencionado que você tem aqui. Como você pode ver, sua largura é definida como 190 pixels e sua altura é definida como 216 pixels. Está tudo bem. No entanto, hoje em dia, mais e mais pessoas estão usando telas retina, e essas telas exibem duas vezes pixels. Em vez de exportar nossos ativos em 1x, podemos configurá-lo para 2x e agora, quando exportá-lo, a largura do nosso arquivo será de 380 pixels e a altura será de 432 pixels. Se um usuário tem uma tela ampla, ele não perde qualidade. O motivo pelo qual você deve exportar em 2x. Mas se sua imagem já é muito grande, você não precisa exportá-la em 2x. Por exemplo, se a largura estiver definida como 2000 pixels, você não precisará exportá-la em 2x. Lembre-se de que quando você usa um elemento de imagem no Webflow, Webflow cria automaticamente variações de sua imagem para diferentes tamanhos de tela. Basicamente, otimiza automaticamente suas imagens. Mas e as outras imagens? Vamos supor que você deseja exportar esta imagem do projeto. Primeiro você precisa selecioná-lo. Novamente, você pode exportá-lo em 2x ou você pode alterar o formato da imagem para JPEG já que não precisamos de fundo transparente e assim por diante. Deixe-me exportá-lo em 2x. Lá vamos nós. Bem, o software mais projetado não permite compactar suas imagens para que elas não sejam boas com otimização de imagem. Deixa-me mostrar-te o que quero dizer. Vou abrir uma dessas imagens aqui no arquivo de ativos. Por exemplo, o primeiro. Se eu verificar o tamanho do arquivo, você pode ver que são 600 kilobytes, mas podemos comprimir ainda mais para aumentar a velocidade de carregamento da página. Mas como? Existem diferentes maneiras de usar Adobe Photoshop e você pode usar a opção Salvar para a Web. No entanto, há uma alternativa melhor. Existe um site chamado TinyPNG. Se você vai para tinypng.com, você pode simplesmente arrastar e soltar suas imagens com os formatos PNG ou JPEG e comprime suas imagens para você sem perder qualidade. Isso é incrível. Deixa-me mostrar-te como funciona. Vou em frente e soltar uma das minhas imagens aqui. Por exemplo, este aqui. Lá vamos nós, já está terminado. Como você pode ver, o tamanho original do arquivo era de 600 kilobytes e a versão compactada é de 146 kilobytes. É incrível. Reduzimos seu tamanho de arquivo em 76 por cento. Vou baixá-lo. Lá vamos nós. Esta é a nossa nova imagem. Embora o tenhamos compactado, ainda tem uma alta qualidade. Você precisa sempre ir em frente e compactar suas imagens antes de importá-las para o Webflow. Isso é tudo sobre otimização de imagem. Agora eu vou falar sobre carga preguiçosa. Quando eu estava explicando diferentes características do Webflow, eu disse que vamos falar sobre carga preguiçosa mais tarde e isso é exatamente o que eu vou fazer agora. Sempre que você usar um elemento de imagem, se você for para o painel Adicionar e se você arrastar e soltar um elemento de imagem, deixe-me mostrar o que acontece. Aqui, temos configurações diferentes. Se você se lembra, temos o texto Alt e aqui temos as opções de carregamento. Desde 2020, todas as imagens por padrão são definidas como carregamento lento. Mas o que isso significa? Deixe-me remover este elemento de imagem. Vou selecionar esta imagem de herói. Se eu clicar no ícone “Configurações”, também posso ver a opção de carregamento. Se eu abrir este menu, você pode ver que temos três opções diferentes; temos preguiçoso, ansioso, e auto. O que eles querem dizer? Quando estiver configurado para preguiçoso, o navegador carregará esta imagem uma vez que ela entra em exibição. Por exemplo, se eu rolar para baixo aqui, temos imagens diferentes. Estas imagens não serão carregadas até serem vistas. Quando rolamos para baixo aqui, o navegador carregará essas imagens. Desta forma, podemos garantir que nossa página web carrega muito rápido e é muito bom para SEO. Mas podemos substituir essa configuração também. Eu posso selecionar esta imagem, eu posso ir para as configurações de imagem e a partir daqui eu posso configurá-lo muito ansioso cargas com página. Se eu selecionar esta opção quando a página for carregada, esta imagem também será carregada. Portanto, é mais demorado para o navegador carregar nossa página web. Nós também pode configurá-lo para auto, e ele vai se comportar com base nas preferências dos navegadores. Minha sugestão é que você sempre deve colocá-lo muito preguiçoso. Como mencionei antes, por padrão, todas as suas imagens são muito preguiçosas. Mas vou mencionar mais uma coisa. Esta opção só funciona para os elementos da imagem. Se você apenas criar um bloco div e se você usar a imagem de fundo, ele não funciona para isso. Você precisa manter isso em mente. Tudo bem, pessoal. Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 71. Atributos personalizados: Ei, neste vídeo vamos falar sobre atributos personalizados. O que são atributos personalizados? Bem, de acordo com o Webflow, você pode usar atributos personalizados para definir características de elementos HTML. Isso faz sentido? Se não acontecer, deixa-me mostrar-te como funciona. Para cada elemento HTML, podemos especificar alguns atributos personalizados para modificar seus comportamentos ou adicionar algumas características personalizadas. Por exemplo, aqui, se eu selecionar quaisquer elementos HTML como título, e se eu passar para as configurações de elementos no lado direito, você pode ver aqui temos a seção de atributos personalizados. Usando este botão de adição, você pode criar um atributo personalizado. Qualquer atributo tem um nome e um valor. Às vezes eles são bastante úteis, mas na maioria das vezes você não vai precisar deles. Deixa-me mostrar-te como funciona. Se eu visualizar o meu projeto e se eu passar o mouse sobre este botão Get in touch, você pode ver que nada aparece e está tudo bem. Mas às vezes podemos precisar de uma dica indicando o que ele realmente faz. Por exemplo, quando o usuário passa o mouse sobre este botão, a dica de ferramenta deve exibir uma palavra ou uma frase como clique em mim ou entre em contato conosco qualquer coisa, dessa forma, os mecanismos de busca também podem entender o que esse botão faz ou o que um link faz. Deixa-me mostrar-te como funciona. Primeiro, vou selecionar esse botão, e se eu passar para a seção de atributos personalizados, posso criar um novo atributo personalizado. Aqui para o nome, Eu vou escrever título e para o valor, Eu vou escrever Clique em mim, Salvar, e estamos feitos. Agora vamos publicar nosso site, e eu vou abri-lo. Agora, se eu passar o mouse sobre este botão, eu deveria ver uma dica de ferramenta que diz, clique em mim. Vamos ver o que acontece. Lá vamos nós. Você pode ver aquela pequena dica de ferramenta? Era exatamente o que procurávamos. Mas deixem-me mostrar-vos outro exemplo. Se eu for para a página Fale Conosco e aqui no campo de texto de nome completo, eu vou escrever algo aleatório exatamente como isso. Como você pode ver, verifica a ortografia. Consegues ver esta linha vermelha sob este nome estranho? Meu navegador está realmente verificando a ortografia desse nome. Não é o que queremos para o campo de texto completo, então como podemos desativá-lo? Podemos usar um atributo personalizado. Deixe-me ir para o painel de páginas. Se eu for para a página Fale Conosco aqui, posso selecionar esse campo de texto e, se eu for para os atributos personalizados no lado direito, posso criar um novo atributo. Aqui eu vou escrever verificação ortográfica sem qualquer espaço, e para o valor eu vou escrever false. O navegador deve verificar a ortografia? - Não. É por isso que definimos o valor como false e o salvamos. Em seguida, publique seu site. Eu vou para a página Fale Conosco, certifique-se de atualizar sua página. Agora, se eu escrever algo estranho, meu navegador não verifica a ortografia. Esse é um dos casos de uso mais populares de atributos personalizados. Na verdade, existem muitos atributos HTML diferentes que você pode usar, e você pode obter a lista completa aqui. Se você for para W3schools.com, você pode encontrar a referência de atributos HTML. Aqui, há uma lista de todos os atributos, mas na maioria das vezes não os usamos. Mas se quiser, pode ir em frente e dar uma olhada. Pessoal, isso é tudo por este vídeo, espero que tenham gostado, e vemo-nos no próximo. 72. Como criar um pop?: Hoje em dia, mais e mais sites estão usando pop-ups para pedir aos usuários para fazer algo. Por exemplo, registrar-se para a newsletter ou inserir seus endereços de e-mail ou enviar um formulário. Neste vídeo, vou mostrar como você pode criar um pop-up fácil e convenientemente. Você está pronto? Vamos começar. Para criar um pop-up, primeiro, você precisa entender a estrutura de um pop-up. Um pop-up realmente interrompe a interação do usuário com seu site. Na verdade, bloqueia o uso do site até que o usuário tome algumas ações, por exemplo, preencher um formulário ou enviar um formulário. Como podemos criar tal interação? Primeiro, precisamos de um bloco de Div. Deixe-me apertar a tecla “Command” ou “Control”. Vou escrever Div Block. Lá vamos nós. Vou colocar este bloco de Div logo abaixo do meu corpo. Não importa onde esteja, mas para organizar tudo corretamente, vou colocá-lo no topo do meu navegador. Agora deixe-me dar uma aula. Vou escrever um invólucro pop-up. Este invólucro pop-up deve ser corrigido independentemente de o usuário rolar pela página. Vamos em frente e mudar sua posição de estática para posição fixa, exatamente assim, e então eu vou definir sua posição como cheia. Como você pode ver, ele ocupa toda a largura e altura do nosso relatório. Aqui diz relativo ao corpo. Então eu vou rolar para baixo e deixe-me dar-lhe uma cor de fundo. Vou dar-lhe uma cor de fundo preto, e vou diminuir a opacidade para criar este efeito de sobreposição. Vou diminuir para 70 por cento. Legal. Como você pode ver, este wrapper pop-up agora está acima de alguns de nossos elementos, mas ainda há alguns elementos que estão acima deste wrapper pop-up, embora seja colocado em cima do nosso navegador. Se você se lembra, eu lhe disse que não importa onde o nosso elemento está no Navegador, podemos sempre colocar nossos elementos em cima disso se modificarmos o índice Z. Aqui eu vou definir o índice Z para 9999. Desta forma, eu posso ter certeza de que este wrapper pop-up será sempre em cima de todos os elementos, assim como isso. Agora, como você pode ver, todos os outros elementos estão por trás deste invólucro pop-up. Se eu rolar para baixo, você pode ver que está consertado. A primeira parte está feita. Agora dentro deste invólucro, vou criar um novo bloco de div, e esse bloco de div pode conter qualquer coisa. Ele pode conter um Bloco de Formulários ou um texto, qualquer coisa que você quiser. Mas neste exemplo, vou criar um Bloco de Formulários. Enquanto este wrapper estiver selecionado, vou pressionar a tecla “Command” ou a tecla “Control”. Vamos procurar um bloco de Div. Lá vamos nós. Aqui eu vou dar uma aula. Desta vez, vou escrever pop-up__model. Aqui eu vou especificar a largura e altura. Vai ser 500 pixels por 300 pixels. Deixe-me ir em frente e dar-lhe uma cor de fundo branco. Agora está posicionado no canto superior esquerdo, mas queremos centralizá-lo. Como podemos fazer isso? É tão simples. Primeiro, precisamos selecionar nosso wrapper pop-up e, em seguida, precisamos apenas mudar a configuração do display para bicicletas flexíveis. Como você sabe, precisamos modificar o alinhamento para o centro e a justificativa para centralizar também. Neste modelo pop-up, vamos ter um bloco de formulário. Enquanto estiver selecionado, vou pressionar a tecla “Command” ou a tecla “Control” e vamos procurar um Bloco de Formulários. Lá vamos nós. O Bloco de Formulários foi adicionado. Aqui vou dar uma aula a este Bloco de Formulários. Vamos escrever pop-up__form. Vamos definir a largura para 100 por cento, e eu vou definir a largura máxima de 400 pixels para isso, mas não está centralizada. Eu vou selecionar este modal pop-up e eu vou mudar sua configuração de exibição para flex max, e deixe-me mudar o alinhamento para o centro, exatamente assim. Aqui está a nossa forma simples. Nós não vamos mudar o estilo porque eu só quero mostrar como você pode criar um pop-up. Uma vez que o pop-up aparece, o usuário deve ser capaz de fechá-lo também. Vamos precisar de um botão para fechar. Vou em frente e adicionar um link de texto aqui dentro do nosso invólucro pop-up. Certifique-se de que ele está aninhado dentro do nosso invólucro pop-up. Lá está ele. Vou dar-lhe uma aula. Vamos escrever direito pop-up__close. Vou mudar sua cor para branco para que pudéssemos ver isso, deixe-me modificar a declaração para nenhum. Aqui eu vou escrever perto, mas sua posição é disputar. Vou colocá-lo no canto superior direito. Enquanto estiver selecionado, vou mudar sua posição para absoluta, agradável, e então deixe-me posicioná-la no canto superior direito. Lá está ele. Usando esses valores aqui, eu vou definir sua posição correta para talvez 8 por cento, sua posição superior para 8 por cento também. Nosso pop-up está pronto, mas como podemos realmente usá-lo? Agora, se eu visualizá-lo, você pode ver que eu não posso interagir com o site. Se eu clicar no botão “Fechar”, nada acontece porque não criamos interações. Agora é hora de seguir em frente e criar nossa interação. Mas primeiro, eu vou selecionar esse wrapper pop-up, e então eu vou mudar sua configuração de exibição de flex max para nenhum porque eu vou escondê-lo por enquanto. Agora vamos precisar ir em frente e criar a interação, mas que tipo de gatilho devemos criar? Se eu for para a interação, como você se lembra, podemos criar o gatilho de elemento ou o gatilho de página. É totalmente com você. Você pode criar um gatilho de elemento, por exemplo, se o usuário clicar em um botão, esse pop-up deve aparecer ou até mesmo você pode criar um gatilho de página. Por exemplo, quando tudo é carregado após três ou quatro segundos, esse pop-up deve ser exibido. Primeiro, vou em frente e criar um gatilho de página. Nós já criamos o carregamento da página e usamos esta animação de herói. Podemos usar este ou você pode usar outro gatilho de página. Vou usar o carregamento de página novamente. Aqui quando a página começa a carregar, ótimo, iniciar uma animação, e eu vou criar uma nova animação. Vamos chamar de pop-up aberto, legal. Aqui precisamos criar algumas ações. Primeiro, enquanto este invólucro pop-up estiver selecionado, vá em frente e crie uma ação. A primeira ação será a opacidade. Por padrão, sua opacidade deve ser definida zero por cento e vamos habilitar o estado inicial assim. Então eu vou criar um novo quadro-chave e eu vou escolher opacidade. Vamos transformar sua opacidade de volta para 100 por cento e no meio, eu vou criar outra ação, mas desta vez eu vou escolher Ocultar/Mostrar. Se você se lembrar, definimos sua configuração de exibição para nenhum, agora precisamos alterá-lo de volta para flex max assim. Deixe-me explicar para você. Primeiro, definimos sua opacidade para zero por padrão porque quando a página é carregada, não devemos vê-la e ela também fica oculta para que possamos interagir com a página. Vamos alterar sua configuração de exibição para flex max, então agora ele bloqueia o uso de nossos sites e, em seguida, aumentaremos sua opacidade para 100 por cento. No entanto, há um problema, se eu salvá-lo e se eu visualizá-lo, você pode ver que quando a página é carregada, o pop-up também aparece. Não é isso que eu quero. Quero que todos esses elementos sejam carregados primeiro e depois de três segundos, esse pop-up deve aparecer. Deixe-me ir em frente e modificar o atraso aqui. Eu vou selecionar wrapper pop-up Ocultar/Mostrar, e eu vou aumentar o atraso para três segundos, apenas assim. Deixe-me salvá-lo. Agora deixe-me pré-visualizar novamente, tudo carrega. Lá vamos nós. Primeiro, tudo carregado e depois apareceu este pop-up. Era exatamente o que queríamos. Mas como podemos fechar este pop-up? É tão simples. Precisamos ir em frente e criar um novo gatilho. Se eu fechar este carregamento de página aqui, podemos ir em frente e selecionar nosso link pop-up fechar que criamos, e então podemos criar um gatilho de elemento desta vez. Vou escolher o clique do mouse ou toque. No primeiro clique, vou criar uma animação personalizada, vamos criar uma nova animação, e eu vou chamá-la de pop-up close. O que devemos fazer aqui? Precisamos fazer duas coisas. Primeiro, precisamos diminuir a opacidade do nosso wrapper pop-up para zero por cento e, em seguida, precisamos definir sua configuração de exibição para nenhum. Por que devemos fazer isso? Porque se reduzirmos a opacidade de 100 por cento para 0 por cento, vamos escondê-la, mas ainda está lá. Ainda está bloqueando o uso do nosso site. Precisamos definir sua configuração de exibição para nenhum que o usuário possa interagir com nosso site. É muito importante. Certifique-se de não esquecer isso. Vou selecionar o invólucro pop-up. Vou criar uma nova ação, opacidade, e vamos mudar sua opacidade para zero por cento. Vamos criar um novo quadro-chave, Ocultar/Mostrar, e eu vou definir sua configuração de exibição como nenhum e salvar. Deixe-me ir em frente e visualizar isso. Lá vamos nós. Tudo carrega, bom. Este é o nosso pop-up. Posso rolar para baixo, ainda está lá. Se eu clicar em fechar, lá vamos nós, está fechado. Posso interagir novamente com meus elementos. Muito bem pessoal, é assim que podem criar um pop-up dentro do Webflow. Espero que tenha gostado e te vejo no próximo. 73. Code personalizado e integração: Ei, bem-vindo de volta. Neste vídeo, vamos falar sobre código constante e integração de terceiros. Eu sei que eu disse que nós não vamos codificar e isso é 100% verdade, mas às vezes se você quiser adicionar algumas funcionalidades ao seu projeto que o Webflow não oferece, você pode integrar alguns serviços de terceiros no seu projeto Webflow apenas copiando e colando algum código. Você não precisa saber como escrever código, você só precisa saber como usar isso. Como eu mencionei antes, o recurso de código personalizado só está disponível para plano pago, então se você estiver usando o plano gratuito, infelizmente, você não pode usar isso. No entanto, eu queria mostrar-lhe como ele funciona caso você queira atualizar seu plano no futuro. Se você está pronto, vamos começar. Primeiro de tudo, aqui temos esta tela vazia. Este é um novo projeto e se eu quiser usar algum código personalizado, eu tenho opções diferentes. Se eu quiser adicionar o código constante para todo o projeto, para todas as páginas para todo o site, eu posso ir para as configurações do projeto e eu posso ir para a guia de código personalizado aqui e eu tenho código de cabeçalho e eu tenho código de rodapé. Mas se quisermos adicionar algum código personalizado a uma página específica do meu projeto, posso fazer isso diretamente no designer. Deixa-me mostrar-te como. Aqui está a nossa tela vazia. Eu vou para o painel Adicionar e eu vou rolar para baixo. Aqui sob os componentes, você pode ver que eu tenho este Embed. Não está disponível para plano gratuito, portanto, se você quiser usar isso, você precisa atualizar seu plano. Vou arrastá-lo e soltá-lo aqui. Lá vamos nós. Agora, temos este componente de incorporação HTML, e aqui podemos colar nosso código personalizado. Funciona como qualquer outro elemento. Você só precisa colar algum código personalizado aqui e salvar e fechar e certifique-se de publicar seu projeto. Deixa-me mostrar-te como funciona. Suponhamos que você queira criar um questionário ou um formulário que obtenha aos usuários as informações por um motivo específico. Você pode usar um serviço chamado Typeform. É um serviço muito popular. Deixa-me mostrar-te como funciona. Aqui está a página inicial deles. Ele realmente permite que você crie algumas pesquisas ou formulários facilmente e convenientemente e você pode modificar o design do seu formulário, as configurações, tudo o que você pode imaginar, e ele tem um plano gratuito também, para que você possa usá-lo de graça. Primeiro você precisa ir em frente e se inscrever, criar uma conta gratuita e, em seguida, você pode simplesmente criar um formulário. Nós não vamos mergulhar nos detalhes porque é tão simples criar um Typeform, eu só quero mostrar como você pode incorporar este formulário em seu projeto. Aqui está o formulário que eu criei antes. Deixa-me mostrar-te. Se eu for para o meu painel, eu tenho estes RSVP, eu posso clicar sobre ele. Posso modificar as perguntas, posso modificar as escolhas ou respostas aqui, e depois posso publicá-las. Uma vez publicado, eu posso ir para a aba de compartilhamento no topo e aqui eu posso ir para a incorporação em uma seção de página da Web. Você pode escolher a opção que quiser. Se você precisar de um pop-over, você pode usar esta opção. Se você precisar da guia de slide, você pode usar esta opção. Eu vou usar o padrão e aqui eu vou pegar o código exatamente assim. Eu vou copiar o código e se eu passar para o meu projeto Webflow e colá-lo aqui, você pode ver que o código está em uma linha, portanto, se você quiser conferir, você pode simplesmente rolar horizontalmente assim. Agora, eu vou salvar e fechar e certifique-se de publicar seu site porque ele não funciona se você apenas pré-visualizar seu site aqui, então você precisa publicá-lo, e então você precisa abri-lo e vamos ver o que temos. Lá vamos nós. Aqui está o nosso Typeform incorporado aqui no nosso projeto. Se eu escrever Arash, e depois o sobrenome. Aqui vamos escrever test@ gmail.com e, em seguida, eu posso escolher entre uma dessas opções. Vamos escrever Reino Unido, e então eu vou escolher uma dessas opções, por exemplo, Figma, e enviar. Lá vamos nós. Feito. Sua informação foi enviada perfeitamente. Se eu for para o site Typeform aqui, se eu for para a guia de resultados aqui, eu posso ver o formulário que acabamos de enviar. Se eu for para as respostas, aqui está. Eu posso simplesmente ver todas as respostas aqui. É um serviço muito útil que você pode integrar ao seu projeto Webflow e você também pode usá-lo para seus futuros projetos de clientes. Você pode ver como é simples copiar e colar algum código personalizado e melhorar a usabilidade do seu site? Agora, deixe-me mostrar-lhe outro exemplo. Vamos supor que seu cliente queira que você crie um sistema de reservas para ele ou ela. Como você pode fazer isso? Bem, você pode usar outro serviço. Existem realmente muitos serviços lá fora que você pode usar. No entanto, vou mostrar-vos um serviço muito popular chamado Calendly. Se você apenas ir em frente e criar uma conta em seu site, aqui está sua página de destino. Você pode usá-lo gratuitamente também. Eu vou apenas ir em frente e mostrar-lhe como funciona. Primeiro, você precisa apenas criar um evento. Por padrão, você terá este evento de demonstração. Você também pode ir em frente e criar seus próprios eventos ou uma reunião única aqui. Uma vez que sua reunião é criada, você precisa clicar neste botão de compartilhamento e , em seguida, você precisa ir para a guia Adicionar ao site, e aqui eu vou usar incorporar inline. Assim mesmo, e continue. Aqui vamos pegar o código. Você pode modificar o design simplesmente aqui. Você pode apenas modificar as configurações também. Então, se você apenas copiar o código e ir para o seu projeto Webflow e você apenas colá-lo aqui, eu vou remover o código personalizado anterior que nós adicionamos, e eu vou colá-lo aqui, salvar código, publicar e Estamos acabados. Deixe-me abrir, aqui está. Nosso sistema de reservas está pronto para nós e nossos usuários podem simplesmente reservar uma reunião conosco. Deixe-me escolher uma data, por exemplo, esta, depois a hora. Confirme. Aqui eu vou apenas escrever Arash e test@gmail.com e, finalmente, eu vou escrever uma mensagem. Estamos falando de código personalizado. Então eu vou agendar o evento e lá está, a conformação, você está agendado com Arash e aqui está a informação. Se você acessar Calendly e aqui na guia de eventos programados, você pode encontrar todos os próximos eventos aqui exatamente como este. Se você quiser modificar ou reprogramar evento, você pode simplesmente fazer isso. Você pode simplesmente cancelar o evento também, aqui está a mensagem. Há toneladas de opções que você pode usar aqui. Tudo bem, se você quiser obter uma lista de todos os serviços que você pode integrar em seu projeto Webflow você pode ir para esta URL universidade.webflow.com/ integrações e, em seguida, aqui, há um mínimo de todos os serviços que você pode se integrar ao seu projeto Webflow assim. Temos Shopify, Zapier. Zapier também é tão útil. Se você quiser apenas conectar diferentes serviços e integrá-los ao seu projeto, você pode usar o Zapier, definitivamente confira isso. Você também pode usar outros serviços. Você pode pressionar este botão seguinte para ver outros serviços. Existem muitos serviços diferentes que você pode usar e eles são tão úteis. É por isso que eu queria mostrar como você pode usar código personalizado em seu projeto, porque você pode simplesmente copiar e colar uma linha de código e adicionar facilmente uma funcionalidade avançada ao seu site. O último exemplo que quero mostrar é este. Há um site muito legal chamado CodePen, Codepen.io e se você ir em frente e criar uma conta gratuita aqui, você pode apenas usar alguns efeitos legais. Há muitos efeitos diferentes aqui que você pode usar e como você pode ver, para cada efeito, você terá o código HTML no lado esquerdo, o CSS aqui, bem no meio, e o JavaScript. Então deixe-me mostrar-lhe como você pode usar isso. Aqui está o efeito fato que eu escolhi, como você pode ver que é tão legal, mas como eu posso usar isso? É tão simples. Primeiro, você precisa pegar o código HTML no lado esquerdo, eu vou copiá-lo e se eu passar para o meu código personalizado aqui, eu vou colá-lo aqui, eu vou remover o código constante anterior que nós colado e eu vou colá-lo aqui, salvar e fechar. O primeiro passo está feito, mas ainda não terminamos. Por quê? Como este efeito requer o CSS ou estilo e também usa o JavaScript, precisamos adicionar o CSS e o script em nossa página também. Como podemos fazer isso? Se você acessar suas configurações de página aqui, e se você rolar para baixo, aqui temos a tag head e body. Precisamos colar o código CSS aqui na tag head, e precisamos colar o código JavaScript aqui na tag body. Então deixe-me ir em frente e copiar o código CSS e eu vou colá-lo aqui, mas como você pode ver, Webflow não reconhece este código CSS. Por quê? Porque tudo é branco. Primeiro, vou remover essas linhas adicionais de código no topo, não precisamos disso. Precisamos ter o corpo, e para que o Webflow entenda que este é um código CSS, precisamos usar a tag style. Por quê? Porque CSS é realmente para styling. Então eu vou criar esta tag de título assim e lá vamos nós. Agora, temos todas essas cores e isso significa que Webflow entende que este é um código CSS. Mas uma vez que você cria a tag de estilo, você precisa ir em frente e fechar isso, é tão simples. Você só precisa escrever uma barra e apenas escrever estilo. Lá vamos nós. A primeira parte está feita. Agora, precisamos ir em frente e copiar nosso código JavaScript. Agora, vou copiá-lo. Deixe-me ir para Webflow e aqui na tag body, eu vou colá-lo, mas novamente, Webflow não reconhece isso como um código JavaScript porque tudo é branco. Então, primeiro, vou em frente e remover esses comentários no topo. Como você pode ver, este é um comentário que não é um código, eu vou remover isso e aqui nós precisamos criar outra tag. Que tipo de etiquetas? Como este é um código JavaScript, precisamos criar uma tag de script. Então vamos escrever um roteiro. Whoops, roteiro lá vamos nós. Agora, nós temos todas essas cores, eu vou ir em frente e fechar esta tag, um script de barra, legal. Agora, deixe-me salvá-lo e se eu publicar meu projeto, e se eu abri-lo lá em cima ele estará. Aqui está o nosso efeito legal, é incrível, não é? Mas como podemos mudar essas palavras? É tão simples. Você precisa ir para suas configurações de página aqui se eu rolar para baixo direito no código JavaScript aqui nós temos este contras de texto, e nós temos todas as palavras, e cada palavra está entre duas aspas. Você pode simplesmente ir em frente e modificá-lo. Eu vou apenas modificar uma dessas palavras, por exemplo, por que isso é tão satisfatório para projetar? Vou guardá-lo e vou publicá-lo. Lembre-se de publicar seu site sempre que você estiver usando código personalizado e deixe-me abri-lo. Por que isso é tão satisfatório para projetar? Lá está ele. Quão legal é isso? Vocês podem ver como é simples usar código personalizado no Webflow? Espero que você tenha gostado deste vídeo e certifique-se de ir em frente e confira a lista de integrações do Webflow porque há muitos serviços diferentes que você pode integrar em seus projetos do Webflow apenas copiando e colando alguns código. Espero que você tenha gostado deste vídeo e eu vou vê-lo no próximo. 74. Animação de Lottie: Ei, neste vídeo eu vou te mostrar como você pode usar animações Lottie em seus projetos. Se você abrir nosso projeto círculo que criamos juntos, você pode ir para a página Fale Conosco. Aqui, como você se lembra, nossa forma tinha três estados diferentes. Tinha o estado normal, sucesso e erro. Se eu apenas selecionar este formulário de contato no navegador e eu ir para o estado de sucesso aqui, você pode ver que nós temos esta mensagem simples com um fundo cinza. Tudo bem, mas podemos fazer com que pareça ainda melhor adicionando uma animação Lottie aqui. Por exemplo, podemos adicionar uma animação de conformação aqui. Como podemos fazer isso? Primeiro, vou selecionar este bloco de mensagem de sucesso aqui. Então eu vou para a imagem do fundo e eu vou torná-lo transparente porque nós não precisamos obter nenhuma cor de fundo exatamente como essa. Vou diminuir a opacidade para zero por cento. Tudo bem, legal. Agora vou adicionar um elemento Lottie a este bloco profundo. Enquanto este bloco profundo estiver selecionado, eu vou para o painel de adição. A partir daqui, eu vou arrastar e soltar esta animação Lottie e colocar cada um bem acima do meu bloco de texto. Lá vamos nós. Aqui está o nosso elemento de animação Lottie, mas não temos nenhum arquivo de animação Lottie. Onde podemos arranjar um? Bem, você pode ir a um site chamado lottiefiles.com e é o site oficial da Lottie. Há ótimos recursos que você pode encontrar aqui, mas o que precisamos é apenas ir para o menu Discover. A partir daqui eu vou para as animações grátis. Aqui você pode explorar muitas animações gratuitas diferentes criadas por diferentes contribuidores aqui. Como você pode ver se eu rolar para baixo, há muitas animações legais aqui, e você pode simplesmente usá-las de graça. Você também pode ir para outras páginas. Dependendo das suas necessidades, você pode escolher entre elas. Do que precisamos, na verdade? Estamos à procura de uma animação de confirmação. Usando esta barra de pesquisa no topo, vou procurar confirmação. Muito bem, aperta “Enter” e vamos ver o que conseguimos. Como você pode ver aqui, temos toneladas de opções diferentes. Deixe-me ver. Eu vou escolher este, o terceiro, você pode escolher o que quiser. Eu vou com este aqui. Agora eu posso simplesmente clicar neste botão “Download” e eu preciso baixar o arquivo Lottie JSON. Para baixar o arquivo, você precisa criar uma conta gratuita. Certifique-se de ir em frente e inscreva-se primeiro. Agora eu vou para o Webflow e eu vou para os ativos, e eu vou arrastar e soltar meu arquivo Lottie em meus ativos. Lá está ele. Então eu vou selecionar este elemento de animação Lottie, se eu clicar duas vezes sobre ele, eu posso substituir esta sequência Lottie. Eu vou escolher este arquivo JSON e eu posso visualizar esta animação. No entanto, é muito grande. Enquanto estiver selecionado, vou dar uma aula, vou escrever animação da Lottie. Então eu vou lhe dar a largura máxima específica. Vamos escrever para 100 pixels. Tudo bem, mas não está centrado. Vou clicar neste pequeno botão na seção de espaçamento para definir a margem esquerda e direita para auto. Então eu vou dar-lhe alguma margem inferior. Vamos adicionar uma margem inferior de 20 pixels aqui, eu acho que seria suficiente. Legal, deixe-me antever. Parece bom. No entanto, precisamos ir em frente e publicar nosso site e realmente testá-lo em nosso site publicado. Eu vou publicá-lo e se eu abri-lo aqui, eu vou preencher este formulário. Vamos escrever Arash e aqui vou escrever test@gmail.com. Então vamos escrever uma mensagem, Olá e “Enviar” Vamos ver esta imagem, mas a animação não é reproduzida. O que há de errado? Como podemos consertar isso? Para corrigir esse problema, precisamos usar a seção de interação Webflow. Por quê? Porque precisamos criar um elemento gatilho para acionar esta animação. Deixe-me ir para o painel de interações. A partir daqui, eu vou criar um elemento gatilho. Nosso elemento vai ser o nosso botão de envio, este botão primário. Por favor, selecione-o no navegador e crie um gatilho de elemento, clique com o mouse, toque em. Então eu vou criar uma nova ação aqui, vai ser uma animação personalizada. Aqui eu vou criar uma nova animação e vamos escrever animação Lottie. O que devemos fazer aqui? Agora precisamos selecionar o nosso elemento de animação Lottie e, em seguida, precisamos criar uma ação. Aqui, como você pode ver sob as integrações agora temos Lottie. Vou escolher a Lottie. Lá vamos nós, se eu rolar para baixo abaixo da seção Lottie, você pode ver que eu posso controlar os quadros. Vou definir para zero por cento porque este é o nosso ponto de partida. Então eu vou criar uma nova ação Lottie e então vamos transformá-la em 100 por cento. Se eu visualizá-lo, ele parece bem, mas ele joga tão rápido, então eu vou mudar sua duração para dois segundos. Deixe-me antever. É muito melhor, não é? Deixe-me salvar e acabamos. Agora, eu vou publicar meu site aqui e então eu vou ir em frente e atualizar esta página Fale Conosco. Deixe-me preencher este formulário novamente. Eu vou escrever Arash e aqui vamos escrever test@gmail.com e para a mensagem, vamos escrever olá. Vou apertar o botão “Enviar”. Lá vamos nós. Nossa animação Lottie reproduz perfeitamente. Isto é basicamente como você pode adicionar animação personalizada ao seu site. Se você quiser criar sua própria animação, e se estiver familiarizado com o software Adobe After Effects, você pode baixar facilmente os plugins do Lottie e, em seguida, criar sua animação no Adobe After Effects e exportar seu arquivo Lottie JSON e importá-lo no Webflow, é muito simples. Desta forma, você pode criar algumas animações personalizadas para o seu projeto. Você também pode pedir a um designer de animações para fazer isso por você. Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 75. Convenção de nomeação: Ei, neste vídeo vamos falar sobre convenção de nomes. Bem, quando você constrói um site, você usa muitas classes CSS diferentes, assim como o que fizemos em nosso próprio projeto, o Projeto Circle Agency. À medida que você cria mais e mais classes, fica cada vez mais difícil manter e organizar todas as classes, classes combinadas, classes globais, tudo. Neste vídeo, vou apresentá-los a uma convenção de nomenclatura muito popular que você pode usar em seus projetos, chamada BEM. BEM significa bloco, elemento e modificador. Parece complicado? Não se preocupe, eu vou quebrar isso para você. Primeiro, vou em frente e criar um elemento. Eu vou apenas arrastar e soltar este elemento navbar aqui. Esta barra de navegação não tem nenhuma classe. Vamos supor que queremos criar uma classe aqui. Como devemos nomeá-lo? Basicamente, cabe a você. Você pode usar sua própria convenção de nomes, desde que você possa manter suas aulas organizadas e você entender o que você está fazendo, tudo bem. Mas se você estiver trabalhando com uma equipe de desenvolvedores e designers, seria melhor usar um sistema de convenção de nomenclatura que todos os outros desenvolvedores entendam. Como funciona o sistema BEM? Bem, como mencionei antes, significa bloco, elemento e modificador. A que se refere o bloco? Bloco é o nosso elemento principal. Por exemplo, neste caso, esta barra de navegação é o nosso bloco. Portanto, vamos apenas nomeá-lo navbar. Criamos nossa classe base. Então, se eu estendê-lo no navegador, nós temos um contêiner aqui, e este contêiner vai ser nomeado recipiente porque este é outro bloco. Este é o bloco principal. Então dentro vamos ter diferentes elementos como este link de marca, temos este menu de navegação e estes links de navegação e também este botão de menu que está escondido. Vamos supor que queremos nomear este link de marca, como podemos fazer isso? Primeiro, precisamos escrever o nome do bloco. Qual é o nosso bloco principal? É navbar. Nós escrevemos navbar, e então usamos dois sublinhados assim, e então você precisa escrever o nome do elemento. Aqui vai ser logo, assim. Agora temos o nome do bloco e o elemento aqui. Mas e o modificador? Bem, o modificador refere-se às nossas classes combo. Por exemplo, se eu apenas ir em frente e selecionar este link nav e eu apenas dar-lhe uma classe, vamos escrever nav menu sublinhado, sublinhado nav link. Então aqui temos o nosso bloco e, em seguida, temos o nosso elemento, e este link tem algumas propriedades. Mas vamos supor que queremos sobrescrever essas propriedades usando uma classe de combinação. Então, podemos ir em frente e criar uma classe de combinação. Esta classe combo vai ser o nosso modificador. Suponhamos que queiramos mudar a cor desse link da Página Inicial, por exemplo, para vermelho. Neste caso, eu posso criar uma nova classe de combinação e você pode escrever algo assim. Você pode escrever.is traço vermelho, e então você pode ir em frente e modificar a cor direita na seção de tipografia para vermelho. Aqui, este traço vermelho é o nosso modificador. Você pode nomeá-lo como quiser, mas é assim que o sistema BEM funciona. Se eu quiser criar um novo modificador, eu posso remover essa classe e então eu posso escrever. is traço verde, por exemplo. Deixe-me ir em frente e modificar esta cor para verde, algo assim. Agora eu posso simplesmente alternar entre esses modificadores. Diz que é verde, é vermelho. O objetivo de usar este sistema de convenção de nomenclatura é que você pode simplesmente entender o que cada classe faz. Por exemplo, aqui você pode entender imediatamente que é um modificador, é verde, é vermelho. Você pode criar diferentes modificadores como; é grande, é grande. Por exemplo, se eu escolher o logotipo navbar aqui, você verá imediatamente o nome do bloco que é navbar, e, em seguida, o elemento, logotipo. Você pode simplesmente organizar todos os seus elementos dentro do navegador quando você usa esta convenção de nomenclatura. Mas novamente, cabe a você como você nomeia suas aulas. Contanto que você os mantenha organizados e compreensíveis, você está livre para usar qualquer sistema de convenção de nomenclatura que você quiser. Mas lembre-se, você pode trabalhar em um pequeno projeto e você pode usar seu próprio sistema de convenção de nomenclatura e ele funciona perfeitamente. No entanto, se você aplicar a mesma convenção de nomenclatura a um projeto de grande escala, você pode enfrentar dificuldades porque se você criar centenas de páginas diferentes e centenas de classes diferentes, seria um desafio organizar e entender todas as classes de combinação e classes que você criar. Nesse caso, você pode usar a convenção de nomenclatura BEM. Muito bem pessoal, espero que tenham achado este vídeo útil. Vejo você no próximo vídeo. 76. Introdução ao mundo Freelance: Construir um negócio de web design bem-sucedido é uma tarefa desafiadora que requer uma enorme quantidade de energia e muitas habilidades. Até agora, você aprendeu a construir um site moderno e totalmente responsivo com interações complexas e animações e estou tão orgulhoso de você, mas você ainda não sabe sobre o lado de negócios da jornada dos freelancers. Então, nos próximos vídeos, eu vou orientá-los através do processo de freelancing como um web designer e desenvolvedor web. Falaremos sobre a aquisição de clientes, preparação de propostas, o preço do seu trabalho e muito mais. Então, se você quiser saber como criar um negócio de web design bem-sucedido para si mesmo, certifique-se de conferir os próximos vídeos. 77. Como obter clientes?: Não importa o quão bom é o seu design, se você não pode vender seus serviços, receio dizer que você estará fora deste negócio mais cedo ou mais tarde. Mas não vamos deixar que isso aconteça. Vamos supor que você não tem experiência prévia de web design e desenvolvimento web e você quer começar do zero. O que você precisa fazer para conseguir seu primeiro cliente? Essa é uma pergunta simples. Mas a resposta não é tão simples. Por quê? Porque há um conjunto de coisas que você precisa fazer para obter seu primeiro cliente. Para obter o cliente, primeiro, você deve entender como os clientes pensam, o que importa para eles e o que eles querem alcançar. Um cliente sempre precisa confiar no seu primeiro antes de assinar o contrato com você. Como você pode ganhar a confiança do cliente? Bem, você precisa mostrar a eles que você é capaz de fazer o que você está oferecendo. - Como? Apresentando seu portfólio. Mas espere, você não tinha clientes. O que você deve mostrar a eles? A resposta é, você precisa criar alguns projetos de exemplo. Para fazer isso, você pode procurar algumas empresas locais ao seu redor e ver se há sites que exigem algumas melhorias. Você pode redesenhar seus sites e construí-los no Webflow rapidamente. Lembre-se, não deve ser perfeito. Então você pode chegar até eles e mostrar-lhes o que você fez. Você pode simplesmente dizer, “Ei, eu sou um web designer e eu pensei que talvez seu site precisa ser atualizado. Aqui está o antes e depois do seu site, e ficaria feliz em oferecer meus serviços para você.” Esta é a maneira mais fácil de começar e obter seu primeiro cliente. Além disso, você pode postar suas obras de exemplo em mídias sociais como LinkedIn, Instagram, Facebook, etc Desta forma, mais e mais clientes potenciais verão seu trabalho e eles podem chegar até você. Você também pode postar seus projetos de amostra no Behance e Dribbble. Essas plataformas são um ótimo lugar para mostrar suas habilidades de design e desenvolvimento web. A próxima coisa que você precisa fazer é criar uma conta em um mercado freelance. Existem muitos marketplaces que ajudam você a obter clientes convenientemente, como Fiverr, Freelancer, Upwork, etc Eu sugiro freelancer.com, mas você pode estar em qualquer um deles. Crie seu perfil e adicione seus trabalhos de amostra a ele. No início, é mais difícil conseguir clientes porque você não recebeu nenhum comentário, mas uma vez que você completar alguns projetos e obter boas críticas, torna-se muito mais fácil adquirir novos clientes. Eu gostaria que você soubesse que o freelancing é tudo sobre conexões e relacionamentos. Se você se amarrou a clientes diferentes, mas eles não lhe deram o projeto, tudo bem. Faz parte do processo. Eles podem entrar em contato com você depois de um ano ou mais e dar-lhe outro projeto. É tão importante criar grandes relações com todos, porque quem sabe? Eles podem ser seus futuros clientes. 78. Envia uma proposta: Uma vez que você encontrar seu potencial cliente, eles vão pedir-lhe para enviar uma proposta e é uma das etapas mais importantes do freelancing. Se você fizer isso direito, você aumentará drasticamente a chance de obter o projeto. Muitos iniciantes lutam com este estágio porque eles preferem gastar tempo em projetar e construir um projeto em vez de preparar uma grande proposta. Mas deixe-me lembrá-lo de uma coisa. Se você não conseguir obter o cliente, não há nenhum projeto para fazer. Vale a pena focar mais neste palco também. Agora vamos falar sobre a proposta em si. Como deve ser estruturado? Que informações devem ser incluídas? Quando se trata de preparar propostas, não há caminho certo ou errado. Você pode escolher entre estilos diferentes, layouts diferentes e assim por diante. Eis como estruturo as minhas propostas. Cada proposta deve ter sete elementos principais. Número 1, introdução. Esta seção é escrita principalmente com base nas conversas anteriores que você teve com o cliente. Você pode incluir o nome do cliente, o título do projeto, o nome do seu ponto de contrato, seu nome e título e, finalmente, a data de envio. Aqui está um exemplo de uma boa introdução. Número 2, visão geral do problema. Depois de se apresentar ao cliente, a próxima seção importante a seguir é a visão geral do problema. Nesta seção, você deve definir claramente o problema e o cliente deve entender que há um problema com o site que tem um impacto negativo em seus negócios. O cliente também deve entender que você tem uma compreensão profunda de seus problemas e você pode esclarecer suas responsabilidades e o escopo do projeto aqui. Lembre-se, o objetivo principal de uma proposta de projeto é fazer com que seu cliente acredite que você pode resolver seus problemas. Concentre-se sempre nas necessidades e problemas do cliente. Aqui está um exemplo de uma visão geral do problema. Número 3, visão geral da solução. Depois de definir os problemas da empresa através da realização de diferentes pesquisas, é hora de convencê-los de que você pode resolver seus problemas fornecendo uma solução detalhada. Nesta seção, você deve explicar como eles podem se beneficiar do uso de seus serviços para resolver seus problemas e, o mais importante, uma vez que você está indo para resolver seus problemas. Como você pode ver aqui, temos uma visão geral muito boa da solução. Número 4, entregáveis. Esta seção deve definir claramente o que você vai entregar como parte do projeto e, mais importante, o que você não vai entregar. Você pode pensar que é estranho excluir o que não entregamos, mas acredite em mim, quando você trabalha com clientes inexperientes, às vezes eles esperam que você prepare o conteúdo, logotipo, imagens e até mesmo otimize seu site para motores de busca. É sua responsabilidade esclarecer o que faz e não faz parte do escopo do projeto. Número 5, visão geral do processo. Depois de definir os problemas, as soluções e os resultados, você deve explicar como é o seu processo. Esta seção pode descrever diferentes etapas do seu processo. Como as reuniões iniciais, preparar os ativos, projetar um wireframe, etc Você também pode indicar quanto tempo cada etapa leva e o que você espera do cliente durante esse processo. Número 6, o custo. Agora é hora de descrever o custo de seus serviços. Se você não sabe o orçamento de seus clientes, certifique-se de perguntar a eles antes de preparar a proposta. Caso contrário, você pode pedir um preço muito alto ou um preço escasso. Lembre-se, é totalmente bom perguntar ao cliente sobre seu orçamento com antecedência, então não tenha medo de fazer isso. Se você não sabe como pagar o seu trabalho, não se preocupe. Na lição a seguir, falaremos sobre isso profundamente. Número 7, CTA ou chamada à ação. Nesta seção, você deve solicitar ao cliente que avance para a próxima etapa, aceitando a proposta e assinando o contrato. Se você enviar sua proposta como um arquivo PDF ou Word, você pode pedir que eles enviem um e-mail e informá-lo sobre a decisão deles. Eu realmente não recomendo assim. Por quê? Devido a muitos motivos, como PDFs, não são responsivos. Portanto, se o cliente quiser lê-lo em seu telefone, seria problemático. A segunda razão é que os PDFs não permitem que o cliente aceite um projeto e assine o contrato imediatamente. Em vez disso, você pode usar uma ferramenta de proposta on-line que permite projetar e preparar a proposta de forma profissional e conveniente. Dessa forma, você pode enviar a proposta como uma página da Web responsiva, protegida por senha e editável. Além disso, seu cliente pode simplesmente clicar no botão “Aceitar” e assinar imediatamente o contrato. Quão conveniente é isso? Eu pessoalmente uso este site para preparar esta proposta gratuitamente. Existem muitas ferramentas como esta que você pode usar para esse propósito. Isso é tudo sobre a preparação da proposta. Espero que tenha gostado deste vídeo e te vejo lá. 79. Colocar preço no seu trabalho: O preço desempenha um papel importante em qualquer negócio. Você, como freelancer, deve saber como avaliar seu trabalho para ter sucesso neste negócio. Muitos de vocês esperam que eu lhe dê um número mágico agora. Mas não há número mágico quando se trata de preços. Não há fórmula padrão que lhe dê o preço exato que você deve escolher para seus serviços. Como você pode decidir quanto você deve cobrar ao seu cliente? Especialmente quando você está apenas começando. Bem, há muitos fatores que você deve levar em consideração quando se trata de preços. Primeiro, vamos falar sobre os modelos de preços. Geralmente, há três modelos de preços que você pode escolher. Taxa horária, taxa fixa e taxa recorrente. Vamos começar com a taxa horária. Se você cobrar $60 por hora e o projeto demorar 60 horas, você cobra $3.600. Este modelo é bastante simples porque o cliente pode facilmente entender quanto tempo cada passo leva. Mas há uma desvantagem nisso. Você precisa acompanhar as horas que você gasta no projeto porque às vezes o cliente pode alterar o escopo do projeto e pode demorar muito mais tempo para entregá-lo. Agora vamos falar sobre taxa fixa. É uma forma eficaz de cobrar o seu cliente. Por quê? Porque você define as expectativas uma vez, e você cobra um preço fixo por esse projeto. Vamos supor que você cobra $4.000 por um projeto que leva 60 horas para construir, é uma taxa de US $66 por hora. Mas aqui está o ponto, quando você escolhe esse modelo de preço, você precisa ter em mente que você ainda precisa cobrar um preço fixo, não importa quanto tempo leva para concluir o projeto. Se levar 80 horas em vez de 60, é uma taxa de 50 dólares por hora. Por outro lado, se você conseguir concluir o projeto em 50 horas, é uma taxa de US $80 por hora. O último modelo de preço é a taxa recorrente. Funciona assim, você cobrou a um cliente um valor fixo por um período de tempo, digamos $600 mensais por 12 meses. Tem algumas vantagens e desvantagens. Quando você cobra os clientes mensalmente, eles não precisam pagar todo o preço adiantado. Além disso, você pode fornecer-lhes um serviço de suporte recorrente. Mas aqui está a pegada, quando você escolhe cobrar um cliente por um longo período de tempo, você precisa definir claramente o que você vai fornecer a ele, porque caso contrário, eles podem esperar que você faça muito trabalho, já que você está cobrando-os uma e outra vez . Se você está procurando uma fonte estável de renda, seria uma boa escolha para você. Mas eu pessoalmente não uso esse modelo de receita porque há tantas variáveis diferentes que são difíceis de gerenciar. Agora vamos falar sobre o preço em si. O preço definido para o seu trabalho depende do valor fornecido. Lembre-se, há uma correlação entre preço e valor, e você deve sempre avaliar seu trabalho com base no valor que você fornece para o negócio do cliente. Há sempre um valor de mercado para tudo, desde ouro a imóveis e carros. Mas você precisa entender que você define seu próprio valor. Se você valorizar seu trabalho muito baixo, você automaticamente diminui seu próprio valor. Por outro lado, se você preço seu trabalho muito excessivamente alto, você estará fora deste negócio porque você dificilmente pode encontrar alguém que concorda com seu valor. Mas de qualquer forma, essa é a decisão que você deve tomar, e você deve definir seu próprio valor. Claro, quando você valoriza seu trabalho muito alto, você deve entregar um projeto de alto nível também. Às vezes, um cliente se aproxima de você e lhe pede para fazer algo de graça, e eles dizem que você pode adicionar esse projeto ao seu portfólio, e isso é bom para sua carreira futura. Deixe-me dizer-lhe uma coisa nunca, nunca, nunca faça um projeto de graça, porque o seu trabalho tem valor e ninguém deve subestimar o seu trabalho. Mesmo quando você está apenas começando, não faça projetos gratuitos. Você pode começar com um preço mais baixo, mas não totalmente gratuito. Se você vai a diferentes sites freelance, você pode facilmente encontrar o ponto de preço médio para os serviços que você oferece e definir os preços de acordo. Você também pode ajustá-los com base na sua experiência e no valor que você fornece. Quando você definir seus números grudam neles. Se um cliente disse que encontrei outra pessoa que faz a mesma coisa por um preço mais baixo você poderia responder educadamente, eu entendo, mas com base no valor que eu forneço para você e seu negócio, eu acho que meu preço é razoável. Qual modelo de preço eu sugiro que você use? Pessoalmente, prefiro o modelo de receita fixa. Por quê? Porque à medida que você se torna cada vez mais confiante e ganha experiência em web design e desenvolvimento web, você pode concluir os projetos mais rapidamente. Portanto, seria mais benéfico para você usar o modelo de receita de taxa fixa porque você não cobra por hora e, dessa forma, sua taxa horária aumentará à medida que você consegue concluir projetos mais rapidamente. Lembre-se, quando você conclui um projeto mais rápido, isso não significa que você deve subvalorizar seu trabalho. A razão pela qual você é capaz de concluir projetos mais rapidamente é o fato de que você é mais experiente e você pratica mais. Deixe-me dar-lhe um exemplo. Vamos supor que um desenvolvedor web pode desenvolver um site em 60 horas e sua taxa horária é de US $50. Nós o chamamos de desenvolvedor 1. Outro desenvolvedor pode desenvolver o mesmo site em 30 horas e ele ou ela cobra $100 por hora. Nós o chamamos de desenvolvedor 2. Qual deles é mais benéfico para o cliente? Sim, você está certo, desenvolvedor 2, porque ele ou ela cobra a mesma quantidade de dinheiro que o desenvolvedor 1 faz, mas entrega o projeto muito mais rápido. O segundo desenvolvedor poderia cobrar ainda mais como US $200 por hora e ainda ser benéfico para os clientes porque ele ou ela entrega o projeto mais rápido do que o primeiro desenvolvedor. Lembre-se, você pode modificar seus preços sempre que quiser. Por exemplo, se você fez alguns projetos e sente que não cobrou os clientes o suficiente, você pode aumentar seus preços para seus projetos futuros, não há limite a este respeito. Mas sempre acompanhe seus pontos de preço e as mudanças que você faz, a fim de obter o melhor preço para seus serviços no futuro. Gente que é tudo sobre modelos de receita e preços. Espero que tenha gostado. Vejo você no próximo vídeo. 80. Encontro a seu cliente: Muitos designers e desenvolvedores inexperientes pensam que nos encontramos com clientes porque eles querem nos fazer algumas perguntas sobre nós e como trabalhamos, mas isso não é tudo. A razão pela qual nos encontramos com clientes é para trocar informações. Eles fazem perguntas e nós fazemos perguntas. Queremos realmente entender como seu negócio funciona para ser capaz de resolver o problema. Prepare sempre algumas perguntas antes de ir a uma reunião. Essas perguntas podem variar dependendo do tipo de projeto, mas o ponto principal é apenas familiarizar-se com seus negócios. Alguns clientes podem perguntar-lhe sobre o seu processo e está totalmente bem. Você pode explicar a eles como todo o processo se parece. Alguns deles podem querer que você desenvolva um site WordPress, talvez porque eles ouviram que é bom ou eles estão apenas familiarizados com a interface WordPress. Dois cenários podem acontecer. Primeiro, você pode pensar que de acordo com seu orçamento e também suas necessidades, seria melhor para eles ter um site WordPress e é sua responsabilidade para orientá-los e dizer, você precisa procurar um desenvolvedor WordPress para ajudá-lo construir este projeto. Você também pode apresentá-los a alguém se você conhece um bom desenvolvedor WordPress porque nós não queremos obter um cliente a qualquer custo. Queremos que eles sejam felizes quando o projeto estiver concluído. O segundo cenário é que você acha que eles estão errados e que seria muito melhor para eles ter um site Webflow constante. Neste caso, você precisa convencê-los por que o Webflow é mais adequado para suas necessidades. Você pode mencionar os recursos que o Webflow tem e como é conveniente trabalhar com o editor Webflow e muitas outras coisas. Você deve realmente educar seus clientes porque eles podem nunca ter ouvido um Webflow antes e eles apenas ouviram falar sobre WordPress. No próximo vídeo, falaremos sobre a venda de Webflow para seus clientes. Vejo você lá. 81. Pitch de webflow: Você tem uma reunião com um cliente e você quer vendê-los Webflow. Como fazer isso? Primeiro de tudo, você precisa fazer algumas perguntas para ver se o Webflow é a melhor escolha para eles ou não. Porque como eu mencionei antes, não é certo empurrá-los para usar algo que não é bom para eles só porque queremos obter o projeto. O que você deve perguntar a eles? Você pode pedir-lhes para seguir perguntas. O que você espera do seu site? Quais recursos ele deve ter? Precisa de um CMS? E quanto à segurança? Isso importa para você? Com que frequência você precisa atualizar o conteúdo do seu site? Você se importa com velocidade e escalabilidade? Estas perguntas irão ajudá-lo a compreender verdadeiramente as suas necessidades e a concentrar-se nas coisas que são importantes para elas. Por exemplo, se eles se importam com velocidade, você pode falar sobre isso. Você pode informá-los de que o Webflow é desenvolvido pela AWS, que significa Amazon Web Services, que torna o carregamento do site muito rápido. Na verdade, a AWS é uma das opções de hospedagem mais seguras e rápidas disponíveis, confiáveis por grandes empresas. Se eles se preocupam com o CMS, você pode explicar como é fácil trabalhar com o Webflow CMS. E quanto à escalabilidade? Você pode dizer a eles que eles não precisam se preocupar com nada, não importa quanto tráfego eles direcionem para seu site, Webflow pode lidar com isso facilmente. Se eles já trabalharam com o WordPress, você pode perguntar-lhes o que eles gostam e não gostam sobre isso e apenas se concentrar nisso. Agora vamos falar sobre as diferenças entre Webflow e WordPress. Eles são como Mac OS e Windows, cada um tem suas próprias vantagens e desvantagens. Você precisa escolher entre eles com base em suas necessidades e preferências. O fluxo de trabalho é uma ferramenta relativamente nova, mas o WordPress é bem conhecido e muito antigo. É por isso que a maioria dos clientes pode estar familiarizado com o WordPress, mas isso não significa necessariamente que é bom para eles usá-lo. Webflow usa as mais recentes tecnologias para construir um sites limpos e modernos. Por outro lado, o WordPress usa todas as tecnologias como o PHP. Webflow não requer quaisquer plug-ins para criar páginas web personalizadas, mas WordPress depende de muitos plugins diferentes para quase tudo. É por isso que o Webflow gera um código muito mais limpo em comparação com o WordPress. Os recursos do Webflow são pagos e não é open source, mas o WordPress é totalmente gratuito e você só precisa pagar pela hospedagem. O Webflow dá-lhe total liberdade de design, enquanto o WordPress é restrito por modelos. Estas foram as diferenças mais importantes entre Webflow e WordPress. Agora vou mostrar a vocês uma maneira muito legal de apresentar o Webflow aos seus clientes. Webflow criou uma forma inovadora de nos permitir convencer facilmente os nossos clientes e amigos a utilizar o Webflow. Se você acessar Webflow.com/pitch, você pode inserir seu nome e endereço de e-mail e começar a criar uma apresentação personalizada. Você pode escrever o nome do seu cliente aqui, fazer upload de uma captura de tela do seu site atual, e então você pode passar pelos slides e personalizar alguns deles. Por exemplo, aqui, posso escolher uma opção no menu suspenso e a imagem será adicionada de acordo. Você também pode desativar slides opcionais assim. Finalmente, você pode criar uma mensagem para o seu cliente e clicar no botão Salvar e enviar. Em poucos minutos, você receberá seu link de apresentações de fantasias para o seu e-mail e você pode compartilhá-lo com seu cliente. Quão legal é isso? Tudo bem, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 82. Hospedagem de webflow: Ei, neste vídeo vamos falar sobre os planos de hospedagem do Webflow. Muitas vezes me perguntam por que Webflow hospedagem é tão caro em comparação com outras opções de hospedagem como Bluehost, HostGator, etc Quando você constrói seu site usando Webflow, você não é obrigado a usar sua hospedagem. Se você tem uma conta paga, você pode simplesmente exportar seu projeto e hospedá-lo em outro lugar, gratuitamente ou por um preço baixo. Por que você usaria hospedagem Webflow? Ao exportar o projeto e hospedá-lo em outro lugar, você não pode mais usar o recurso CMS. Significa que suas páginas dinâmicas não funcionarão. Digamos que o projeto não tem páginas dinâmicas e tem apenas algumas páginas estáticas informativas. Você hospeda seu projeto em outro lugar e tudo funciona bem. Depois de um tempo, o cliente quer adicionar algo ou modificar algo no site, então eles devem contratar um desenvolvedor para ir e mudar o código do seu site, que é tão demorado e frustrante. Eles devem repetir esse processo uma e outra vez. Cada vez que o desenvolvedor pode cobrar algo entre $100 e US $300 para fazer essas alterações. Se eles quiserem alterar o conteúdo de seu site pelo menos uma vez por mês, eles devem pagar qualquer coisa entre $1.200 e $3.600 por ano. Agora vamos compará-lo com a hospedagem Webflow. Para a maioria dos clientes, o plano CMS funciona melhor e custa US $16 por mês, cobrado anualmente. Isso é $192 por ano para um plano de hospedagem que vem com muitos recursos. Primeiro, eles podem editar seu site usando o Webflow Editor e não precisam confiar em mais ninguém. Em segundo lugar, eles podem usar todos os recursos do Webflow como CMS, Editor, Designer, etc Terceiro, Webflow cria automaticamente backups para eles. Além disso, Webflow hospedagem oferece CDN, que significa rede de entrega de conteúdo que garante cargas de página mais rápidas, entregando conteúdo dos servidores mais próximos do usuário. Ele também vem com um SSH gratuito que torna seu site seguro, ganha a confiança do Google e, eventualmente, melhora seu SEO. Na minha opinião, Webflow hospedagem é totalmente vale a pena com base no valor que ele fornece. Tudo bem, pessoal, isso é tudo sobre hospedagem Webflow. Espero que tenha gostado deste vídeo e te vejo no próximo. 83. Como entregar o projeto para o cliente?: Ei, neste vídeo, eu vou estar falando sobre a entrega do projeto. Quando chegar a hora de entregar o projeto ao cliente, você pode escolher uma das seguintes opções. Número 1, hospede o projeto em sua conta webflow e adicione o custo de hospedagem à sua fatura. Número 2, crie uma conta de fluxo de web para o cliente, transfira o projeto para sua conta e adicione um plano de hospedagem ao projeto. Qual é a diferença entre eles? Qual deles você deve escolher e qual eu escolho pessoalmente? Bem, a primeira opção funciona assim. Você adiciona um plano de hospedagem para o projeto, e você publicá-lo, você está pronto. Exceto que você não é. Porque agora toda vez que o cliente quiser modificar algo, deve entrar em contato com você e você deve fazê-lo gratuitamente ou como um serviço pago. Ao escolher essa maneira, você pode usar a opção de cobrança de fluxo da Web. O que é e como funciona? Vamos supor que você escolha o plano CMS e custa US $192 por ano. Mas você pode cobrar mais aos seus clientes pela hospedagem. Usando a opção de cobrança, você pode definir seu preço de hospedagem e problemas de fluxo de web e fatura para eles em seu nome. Digamos que você cobra $250 por ano para hospedagem. O Webflow recebe esse dinheiro e envia a você a adição de $58 que você cobrou. Desta forma, você pode ganhar algum dinheiro adicional. Agora vamos falar sobre a segunda opção. É bem simples. Transferir o projeto para a conta do cliente e adicionar um plano de hospedagem para o projeto em sua conta. Desta forma, eles podem facilmente modificar conteúdo do seu site e não devem confiar em você ou em qualquer outro designer. Mas tenha em mente que, depois de transferir o projeto para sua conta, você não poderá ter acesso a ele na sua conta, portanto, você pode duplicá-lo antes de transferir o projeto para sua referência. Eu pessoalmente prefiro o segundo caminho porque primeiro, eu não diria que eu gosto de cobrar um cliente por hospedagem, segundo, eu não quero ser responsável pela manutenção de seu site, e terceiro, eu não preciso gerenciar os pagamentos e faturamento anual. Depois de publicar o projeto, é hora da sessão de treinamento. Você pode ter uma reunião de 30 minutos com o cliente e explicar como funciona o fluxo de web e como ele pode usar o editor para modificar o conteúdo por si só. Eu, pessoalmente, peço-lhes para não fazer quaisquer alterações usando o designer porque eles podem mexer com alguma coisa e quebrar todo o site. Sempre peça que usem o editor. Se eles quiserem adicionar alguns itens de coleção, eles também podem fazê-lo no editor. Como você deve repetir este passo para cada projeto, sugiro que você grave um vídeo de treinamento, explique tudo uma vez e envie para todos os seus clientes. Se seus clientes precisarem de mais ajuda, você pode marcar uma reunião e ajudá-los. 84. O que fazer em Next?: Olá pessoal, bem-vindos ao último vídeo deste curso. Parabéns por terminar o curso com sucesso. Foi uma longa jornada para nós dois e eu gostaria que você soubesse que estou tão orgulhoso de você que você chegou até aqui. Agora você é oficialmente um desenvolvedor web e vai criar projetos incríveis. Espero que você tenha gostado deste curso e eu agradeceria se você pudesse deixar uma avaliação honesta do curso para que eu pudesse torná-lo cada vez melhor para você. Se você quiser ser notificado sobre as atualizações do curso e meus novos cursos, você pode me seguir no Skillshare se quiser saber mais sobre design de UI UX e aprimorar suas habilidades de design. Tenho boas notícias para você. Eu tenho um canal no YouTube onde coloco toneladas de coisas gratuitas que você pode achar interessante. Portanto, certifique-se de se inscrever no meu canal para não perder meus próximos tutoriais. Se você quiser saber mais sobre design de UI UX, confira meu curso de design de UI UX no Skillshare. Foi uma honra ser seu instrutor e desejo a você tudo de bom. Nos vemos e adeus.