Noções básicas do Webflow: guia para iniciantes para construir sites atrativos

1. Introdução ao curso de treinamento em fluxo na Web:: Olá, meu nome é Dan Scott e juntos, aprenderemos como criar sites responsivos, bonitos e acessíveis no Webflow. Agora, este curso é voltado para pessoas que são novas no software de fluxo de trabalho. E para aqueles que são novos no design da web em geral, começarão criando um site simples de uma página. E nos fundamentos de layout e animação, usar o Webflow não é um software de código, tudo é projetado visualmente, você aprenderá como fazer seu site parecer consistente no desktop, tablet, e móvel. Você começa a aprender aulas de CSS para layout e estilo de fonte, bem como a importância das convenções de nomenclatura de classes. Se você é alguém que usou fluxo de trabalho um pouco, ok? E você encontrará coisas como grade e movimentos, colunas e desenvolvedores. É um pouco complicado saber qual usar. Não me preocupe, prometo que até o final deste curso, você, meu amigo, saberá quando usar qual NY. Em seguida, você abordará nosso projeto maior, onde criará seu próprio site de portfólio. Aqui você também começará a fazer animações mais complexas, animações cronometradas, animações de paralaxe, sofisticadas. Você aprenderá a criar e estilizar formulários. Alguns de vocês podem ter algumas habilidades em Figma ou Adobe XD, e mostrarei como converter esses designs em um site de fluxo de trabalho. Mas sabendo Figma o que o XD não é essencial para o curso, você aprenderá que navs adesivos são símbolos E0, marcas flutuantes, gradientes de vermelho a verde, Comic Sans. Mas está errado com o impacto da Comic Sans. Então, uma vez que tenhamos os fundamentos do fluxo da web em nosso currículo, veremos a criação de um site CMS dinâmico. Vamos criar um blog. Ok, você aprenderá como criar um novo estilo e, em seguida, como transferir as responsabilidades desse site para seu cliente, seu cliente, seu funcionário, sua fábrica. Eles podem fazer login e começar a fazer suas próprias alterações no site e criar suas próprias postagens no blog sem a sua ajuda. Então, no final do curso, você usará suas novas habilidades para criar uma loja de comércio eletrônico, criando e estilizando carrinhos de compras, formulários de pedidos e gateways de pagamento. Você aprenderá sobre a venda de produtos físicos e digitais , bem como sobre a venda de serviços. Se você está sentado lá pensando em filmes de classe global, grades, carros alegóricos, tudo isso soa muito quente. Porta. Lembre-se de que vamos começar do início e seguir nosso caminho passo a passo. Este curso é voltado para qualquer pessoa que queira criar sites e fluxo de trabalho. Você pode ter apenas um site ou loja que precisa criar para si mesmo ou para um cliente. Ou talvez você queira se tornar um web design em tempo integral, ou talvez você já seja um freelancer e precise expandir o que oferece como freelancer. Eu organizo tarefas ao longo deste curso para que você possa praticar o que aprendeu e criar coisas realmente para o seu portfólio. Tudo bem, está na hora de se atualizar. Passe de sites zero para Webflow hero. 2. Como começar com tutorial em fluxo Websites: Tudo bem, começando. A primeira coisa é que existem alguns arquivos de exercícios. Haverá um link nesta página aqui. Baixe aqueles. Haverá os arquivos que usaremos para este curso. Tudo bem, o fluxo de trabalho do software é, na verdade, baseado no navegador. Então você acessa, você pode usar este link aqui se quiser se inscrever. É um link de afiliado. Então, o Webflow me dê sua taxa para isso ou simplesmente vá direto para o fluxo de trabalho, inscreva-se em uma conta lá. A inscrição é gratuita. É Mac ou PC porque é baseado em navegador. Estou usando o Google Chrome. Verifique as especificações do navegador no Webflow, se elas são compatíveis com seu navegador, se você está usando o Safari, o Edge ou qualquer outra coisa, mas estou usando o Chrome neste curso. Portanto, o fluxo de trabalho pago versus gratuito tem um fluxo de trabalho gratuito e pago. Para este curso específico, começaremos o curso usando a versão gratuita, na medida do possível. E chega um momento em que precisamos dos recursos extras e nos inscreveremos para receber os pagos. Então, se você estiver, você pode fazer duas opções. Você pode fazer todas as coisas gratuitas e depois assistir às coisas pagas e decidir se é visualização. Ou o que pode ser útil é que você pode se inscrever uma conta mensal com eles quando chegarmos a essas coisas pagas. E então você pode decidir após o primeiro mês, se é certo para você ou não, homossexual e talvez troque de anual depois disso. Mas sim, você poderá fazer uma parte desse curso, digamos de 20 a 30% usando a versão gratuita. E avisarei quando cruzarmos linha da versão paga. Agora, o fluxo de trabalho está sendo atualizado muito rápido. Então, se houver alguma atualização na interface do usuário que não seja óbvia, e confira os comentários abaixo do vídeo apenas para ver se há alguma coisa ou se é muito ruim ou uma grande mudança, eu vou e re- grave, mas me avise se houver alguma mudança e para que você possa ajudar outras pessoas ou se houver algo que não saiba, reclame , basta ir ao vídeo para ver. Houve uma pequena atualização. A outra coisa é que eu falo muito rápido. Não tenho certeza se estou falando rápido agora. Sinto que estou um pouco mais relaxado. Estou no início do curso um pouco nervoso porque acabamos de nos conhecer, mas falo rápido. Você notará que há uma engrenagem na parte inferior de todos os vídeos. Você já mudou a velocidade e me atrasou para o Dan embriagado, pode ser mais fácil se talvez o inglês não sua primeira língua ou eu apenas fale rápido. Algumas pessoas me aceleram. Ambos. Parece estranho, soando bem, mas você se acostuma. E a última coisa foi, oh, sim, eu, há um pouco de explicação sobre o fluxo de trabalho, o que ele faz nos próximos vídeos. Se você quiser pular isso, vá para o vídeo chamado peso. Eles vão verificar, encontraram. Chama-se como criar seu primeiro site e o Webflow. Então, você verá isso um pouco mais adiante no curso, se quiser pular para aquela parte em que, na verdade, basta começar a cozinhar o recheio com todo o perú e pular para lá. Caso contrário, veremos os próximos vídeos ou responderemos a todas as perguntas que eu tinha antes de começar a usar o Webflow. Acho importante explicar o que ele faz, o que faz. Perguntas frequentes. Diego. Tudo bem, próximo vídeo. 3. O que é o Webflow?: Então, qual é o fluxo de trabalho? O fluxo de trabalho é uma forma de criar sites e , onde está no mercado de criação de sites, é considerado um construtor de sites sem código. Então, isso significa que de um lado aqui você tem toda a codificação, seu site, HTML, CSS, PHP, o que quer que você esteja usando. Do outro lado, aqui está mais o Wix e o Squarespace, onde é muito fácil arrastar e soltar. E eles lidam com todo o backend. Então, o Webflow meio que fica nesse meio termo para mim : ele escreve um código bonito e dá acesso ao código se você quiser, você não precisa. Mas, para mim, como web designer que entende muito do código, acho que é muito útil porque me dá controle total, como o lado da codificação. Se você codificar o seu próprio código para poder fazer o que quiser. Mas leva mais tempo e é uma forma diferente de construir, certo? Você é um programador. Sou mais designer. O que eu gosto é o Webflow porque ele me permite criar sites realmente bastante complexos, personalizados, exatamente como eu quero. Ou posso começar com modelos mais ou menos como esse mundo Wix Squarespace funciona, ok? Fluxos de trabalho no meio, eles escondem o código de você. É acessível se você precisar ou quiser, se quiser ir mais longe. E tem muita profundidade. Codificação. Seu próprio site tem profundidade infinita. Você pode fazer o que quiser. Ok? vento flui nesse meio termo de você pode fazer praticamente o que quiser, qualquer coisa que seja normal fazer. Você pode fazer isso no fluxo de trabalho e está se expandindo, onde e aqui, neste outro conjunto, há mais arrastar e soltar para pessoas que desejam criar um site para sua equipe ou clube ou negócios, e nunca mais quero tocá-la. Porque você pode escolher um bom modelo e pronto. Já aqui você pode escolher um bom modelo e pronto. Mas também se você quiser fazer essa outra coisa estranha e essa coisa aqui também. E você queria ter essa aparência. É aqui que ele flui conjuntos e meio que esconde o código de você. Escreva um bom código. Só para aquelas pessoas que gostam de ter a sintaxe certa e coisas desse tipo. Então, isso é uma coisa sobre o que é fluxo de trabalho. É isso que é o Webflow, para quem serve e quem normalmente o usa. Normalmente, são designers e profissionais de marketing que querem ser capazes de produzir um site sem a ajuda de um desenvolvedor. Eles podem sentir que só conseguem chegar até certo ponto sozinhos e, então, fica muito complicado envolver outra pessoa e pagá-la. Portanto, o design geralmente o usa para criar vários sites para seus clientes. Eles podem estar fazendo outro trabalho de design para eles. Quer criar sites, não sabe programar. Reduzimos essa solução perfeita. Sem código, sites bastante complexos e também dá ao cliente acesso para atualizá-lo. Então é esse: é um fluxo adorável para um designer criar sites e está se tornando muito popular entre os profissionais de marketing, onde eles têm uma ideia, um microsite ou algo que eles querem que seja feito, talvez rapidamente. Ok? E não quero ter que fazer disso um projeto muito grande com outro Dwell externo. Não há nada de errado em trabalhar com um desenvolvedor. Eu trabalho com o desenvolvedor o tempo todo para fazer coisas personalizadas. Mas com logotipos, tenho a capacidade de ir muito longe sozinho, sem nenhuma ajuda. E você pode levar o fluxo de trabalho um pouco mais longe mas não é, não é possível usar um desenvolvedor. O que você pode fazer é usar o Webflow e provavelmente obterá 99% do que precisa ser feito. Mas, nesse caso estranho, você pode pedir ajuda a um desenvolvedor. E estão se tornando cada vez mais desenvolvedores que ajudam especificamente designers e marketing a impulsionar isso um pouco mais , para que você também possa ser um cavalheiro. Além disso, os proprietários de empresas estão usando o Webflow porque isso significa que eles podem assumir o controle total. Eles não o estão terceirizando e sentem essa desconexão entre sua ideia, especialmente no início e o que eles querem oferecer. Porque ouvimos dizer que permite que você acesse sites de comércio eletrônico e CMS baseados em bancos de dados que tradicionalmente precisam da ajuda de outras pessoas. Já o fluxo de trabalho meio que traz tudo para dentro e permite que você faça tudo sozinho. Vamos falar sobre onde isso se encaixa no processo de web design. Portanto, o Webflow não é usado para criar um site. Você deveria ter feito isso antes. Você faz isso em algo como Figma ou XD ou Photoshop ou Microsoft Paint. Por que você o projetaria primeiro e talvez obteria a aprovação do cliente ou sua própria aprovação. E, em seguida, crie-o no Webflow. E não apenas construí-lo imediatamente é porque é muito rápido e fácil projetar algo e algo como essas outras ferramentas como Figma, XD, Photoshop. Temos cursos sobre tudo que ilustram que não importa. Qualquer ferramenta que você queira usar para projetá-la. É muito fácil mover as coisas e o fluxo de trabalho, é muito mais estruturado. Você tem que construir coisas, Bob, do zero. E é muito difícil, nem muito difícil, mudar as coisas, mas mover algo com o mouse em vez mudar onde ele está em um site é muito diferente. E a melhor analogia é você quer uma casa, ok? Você poderia projetar dez delas, construir casas de estanho e decidir qual delas você mais gosta. Ou você pode desenhar uma casa de lata e decidir qual delas você gosta de nist e depois construir uma para ter a ideia. Não é tão elaborado quanto o fato de você poder projetar totalmente e Webflow simplesmente não é uma ótima maneira de fazer isso. Projetou algo primeiro, aprovação do cliente Git, aprovação, você pode testá-lo. E esses outros programas, não sei por que estão aqui. Este slide contém todos esses caras, o software de design e, em seguida, você o constrói e o fluxo de trabalho. Depois de amar seu design, você pode fazer algumas alterações ao longo do caminho. Não está gravado na pedra, mas espero que você entenda. Design, construção de fluxo de trabalho. E então o fluxo de trabalho é o último porto de escala. Você pode então dizer, aqui está um site, eu terminei. Então é isso que o Webflow é, para quem é, onde ele se encaixa em todo o fluxo de web design. Se você estiver tipo, Oh, eu tenho mais perguntas. Oh eu, eu, eu. Bom. Porque eu tenho outro vídeo. Vou analisar todas as perguntas mais frequentes que a maioria das pessoas me fez e eu tinha sobre isso quando comecei, estava vendo aquele vídeo. Vou pegar uma xícara de chá e voltarei. vejo em um minuto. 4. Perguntas frequentes sobre o fluxo na rede - Quanto é que o fluxo na rede Parte 1: Olá a todos. Bem-vindo ao vídeo de perguntas frequentes. O que era isso no começo, é como uma maneira de você poder seguir em frente neste longo vídeo para ver todas as diferentes perguntas frequentes. Para muitos de vocês, acabaram de assistir a coisa toda. Para alguns de vocês. Você pode dar uma olhada. Vá, eu sei. Vamos passar para o próximo vídeo. Para alguns de vocês, novamente, você só quer conferir algumas coisas. Então eu levanto isso logo no começo. Portanto, é fácil voltar atrás e ver onde está e seguir em frente na linha do tempo. Isso garante que faça sentido? Bem, enquanto estamos fazendo isso é porque havia apenas um monte de perguntas antes de eu entrar no Webflow que eu tinha e acabei descobrindo tudo. E eu estava tipo, esse é o tipo de coisa. Eu gostaria que houvesse apenas um lugar para todas essas coisas. Então é isso que esse vídeo é para você. Espero que isso responda a todas as suas perguntas e respostas em um só lugar. Apenas comece a descer. Tudo bem, a pergunta mais frequente sobre o Webflow é o preço. Vou falar sobre dólares americanos e pagamentos mensais aqui apenas para fins de consistência. E vamos começar com um gratuito os prós e os contras, os prós são que você pode trabalhar de graça e criar um site e lançá-lo. Você só pode ter dois deles. E a grande desvantagem disso é que, a primeira desvantagem é que esses dois sites diferentes que você cria só podem ter duas páginas diferentes. Isso é uma multa para uma página de destino ou um folheto, sites ou página inicial Fale conosco, a página inicial está se tornando bastante extensa. E o que estamos construindo neste curso aqui é que você pode fazer com que eles tenham por muito tempo. Ainda mostro muito conteúdo para essas duas páginas. 2 sites, apenas duas páginas. A limitação é quando você quer parar pagar é quando você quer um domínio personalizado, porque esses dois primeiros sites podem sair, mas eles estão ativados, na conta gratuita, mas estão no Dan site incrível, dot Webflow, dot io. Então esse é o URL que você teria que fornecer. Portanto, não é muito profissional. Então, se você quer o incrível website.com do Dan, tudo bem. Em seguida, você precisa fazer o upgrade para $15 por mês. Ok. E essa é a sua hospedagem na web. E é como se você estivesse demorando uma eternidade, os custos de hospedagem na web pudessem custar até $5. Mas com o Webflow, você tem o disco, todas as vantagens do fluxo de trabalho. Portanto, você precisa fazer o upgrade a partir daí para o site, mas somente quando ele estiver pronto para ser lançado, obtenha esse domínio personalizado. E sim, o próximo tipo de aumento de preço seria em, neste curso, quando precisarmos de um CMS. Cms, se você nunca usou um, é muito bom para coisas como postagens de blog. Digamos que não queremos criar todas as páginas e o Webflow. Queremos entregá-lo ao cliente e fazer possa acessar o site e colocar o título do blog em algumas imagens e seus próprios textos, clique em Enviar para o site. E eles não têm nada a ver com portões do Webflow enviados para um CMS ou banco de dados e exibidos no site. Portanto, permite que as pessoas não codificem e projetem cada página apenas lhes dá um pouco de área para poder fazer upload de coisas como o WordPress. Então você passa a, tipo, eu acho que $20 por mês para chegar a esse CMS, há um tráfego de largura de banda. Portanto, a maioria dos sites pequenos não excederá essa largura de banda. Mas se você tem um site de tráfego super alto, eles podem pedir que você atualize para o próximo nível porque está recebendo muito tráfego, mas é muito popular e você está ganhando muito dinheiro, então será capaz de fazer isso. Outras faixas de preços, há muitas escalas diferentes e ele, eu estou apenas escolhendo as principais que eu acho mais úteis é quando elas passam do CMS para o comércio eletrônico. Então, deixe-me ver. Comércio eletrônico. O comércio eletrônico é diferente porque eles precisam fazer um monte de coisas diferentes. Então, para obter um site de comércio eletrônico leve, digamos que você esteja fabricando fones de ouvido e queira vendê-los do seu lado, você terá que mudar para o plano de $29 por mês, porque é isso que estamos fluindo fica. E isso desbloqueia todo o seu material de comércio eletrônico. Você pode ir até ela assim: “O que foi isso?” Sim, isso é um mês. Você pode ir até o mais caro que posso ver aqui é $212 por mês para comércio eletrônico. E tudo se resume a Lake. Eles o dividem com quantos itens você tem em sua loja. E eles lhe disseram uma taxa de transação? Eles não? Todos os tipos de outras coisas. Então, dê uma olhada no preço reduzido do webflow.com. Essas são as partes principais. Novamente, isso muda, as regras mudam. Mas esses são os tipos de 015, 2029 são os principais grupos de alimentos que você pode usar para o Webflow. E se você está pensando, eu não estou pagando a eles, se você já fez web design antes, você sabe, você precisa de algum tipo de hospedagem e você precisa registro de domínio e alguém vai tem que fazer o comércio eletrônico para você. Você vai pagar em algum lugar. Isso é o que o fluxo de trabalho faz. Está acima do que você pode obter se estiver realmente com um orçamento apertado. Mas as vantagens de fazer isso são muito boas. Eles lidam com todos os patches. Você precisa se preocupar com os servidores e, sim, é isso. Isso é preço. 5. Perguntas frequentes sobre o fluxo na rede - Quanto é que o fluxo na rede Parte 2: Vamos falar sobre WordPress versus Webflow. Quais são as diferenças? Qual deles você deve usar? Então, vamos falar sobre o que ambos são. O Wordpress é essencialmente iniciado como um software de blog que você pode manipular para fazer basicamente qualquer coisa. Grande parte do mundo é alimentada pelo WordPress. Tem uma quantidade exaustiva de profundidade, muita profundidade. Se todos esses casos extremos estranhos, você provavelmente encontrará um plugin para WordPress que resolverá isso. Já quando o fluxo é mais o cerne do que você precisa fazer para o web design. Mas nenhuma delas gosta de pequenos estojos de ponta, ou pelo menos não é um clique e plug-in and play. Você pode transformar o WordPress em grande parte. E então, se você é uma pessoa que só quer um blog rápido esta tarde, ei, um site de blog. Basta instalar o WordPress, escolher um plug-in ou escolher um modelo que você gostaria de instalar e começar a conectar. E se você quiser, se você tem um design que você fez e quer construí-lo. Faça isso no WordPress. Porque colocar essa personalização na web, no Wordpress, dedicando seu tempo ao design, você quer que seja perfeito. Ou pelo menos você tem uma ideia muito forte de como você quer que seja. E transformar o WordPress nele é muito complicado. Como se eu estivesse bem codificando e ainda fosse muito complicado fazer com que o WordPress fizesse o que eu quero. E você tem que entrar no código e outras coisas. E dizendo que, embora eu não queira, o WordPress é incrível por causa de todos esses plug-ins que você precisa para fazer alguma coisa. Se você precisa de um plugin que aceite pagamentos, mas apenas a partir de seu estranho gateway de pagamento apenas os usuários do seu país. E é só para pessoas canhotas, você provavelmente encontrará um plug-in para isso. Já o WordPress aceitará pagamentos genéricos da maior parte do mundo. Sim, isso é meio profundo, muito difícil de personalizar, mas muito fácil de começar. Wordpress, muito fácil de começar. Você verá neste curso. Mas permite que você controle tudo. E você é um pouco WordPress, bom fluxo de trabalho, muito bom. E ambos têm seus prós e contras, mas esses são: essa é a visão geral desses dois. qual você começa? Você diz: Seu cliente pode atualizar seu site Webflow sem sua ajuda? Eles podem. O Webflow tem dois lados. Há o lado do designer, você, o criador, o criador do site. E depois há algo chamado editor. E o editor é para clientes ou clientes e eles podem acessar e atualizar o site conforme necessário. Eles não precisam de nenhuma interação com o Webflow, ok. Eles podem fazer isso no site. Eu vou te dar a pequena demonstração mais pequena. Só para mostrar o que quero dizer, vamos lá. O Webflow tem dois lados. Aí está o designer, que sou eu entrando aqui e dizendo, Você sabe o que eu preciso fazer? Preciso aumentar esse preenchimento para movê-lo e desenhá-lo. Faça com que pareça bom. Eu publico o site e, em seguida, o cliente ou meu cliente usa algo chamado editor. O editor permite que eles como clientes, não voltem para você, mas acessem o site cliquem em edição e digam que realmente quero mudar isso. Isso precisa ser 2036, ok? E quando eu faço uma mudança, o que eles podem fazer é dizer publicá-la e publicar o site. E o legal é que ele atualizará o site ativo para que o texto seja alterado ou atualizado. Mas também mudará aqui na minha visão de design. Lá vamos nós. Então, isso significa que as mudanças do cliente também aparecem para mim. Quando estou projetando, posso ver o que eles mudaram. Agora eles podem alterar imagens de texto, links e qualquer coisa. Eles também podem adicionar postagens de blog se você tiver criado um blog ou adicionar produtos Se você configurou um site de comércio eletrônico, é uma pequena configuração muito boa aqui. Você pode usar o design do Webflow Justin para você e apenas para si mesmo, ok, se você está criando seu próprio portfólio e nunca tocou no editor. Mas se você quiser entregar a um cliente, ele tem maneiras de atualizar o site sem voltar para você todas as vezes. Então, o cliente pode atualizar o site? Sim, eles podem. Sem sua ajuda, Fancy. 6. Perguntas frequentes sobre o fluxo na rede - Quanto é que o fluxo na rede Parte 3: A questão é: posso hospedar meu site Webflow em meu próprio servidor ou em minha própria plataforma de hospedagem? Sim, casos de uso limitados. E se você quiser criar algo e um fluxo de trabalho, como um site estático e talvez seu portfólio. E você meio que conseguiu e não queria ficar com o seu próprio anfitrião. Totalmente factível. Se você quiser fazer atualizações nesse site, você pode hackear o código deste lado, ok, se você tem algum conhecimento básico de HTML e CSS, você pode fazer isso totalmente em seu próprio host e esquecer fluxo de trabalho agora, apenas o usei para criá-lo. Se você quiser continuar usando o Webflow para fazer alterações, você pode entrar no Webflow e dizer: OK, eu quero mover isso ou adicionar o próximo projeto, organizar tudo e , em seguida, exportar o códon para o seu próprio hospedeiro. Você pode totalmente fazer isso. A limitação é quando você quer um CMS, quer que o cliente possa fazer login ou quer postar no blog. Vamos criar nosso site de postagem no blog. E também vamos criar um comércio eletrônico. Ambas as funcionalidades precisam ser hospedadas no Webflow. Eles não exploram todos os bancos de dados e outras coisas para fazer isso funcionar em seu próprio site. Então, sites estáticos são perfeitos. Qualquer coisa que exija funcionalidades como login do cliente ou um CMS para fazer upload de nossas postagens no blog ou comércio eletrônico que precise ser hospedado com low para que isso funcione. Então, sim e não. Você pode importar seu próprio código para o inflow? Sim ou não? Não. Você não pode pegar seu site existente e colocá-lo no Webflow, fazer ajustes e depois cuspi-lo novamente. Você não pode importar um site inteiro, então ele não faz isso. entanto, o que você pode fazer no Workflow é colocá-lo em seu próprio código personalizado. Portanto, você pode ter algum código que precise entrar na etiqueta principal ou no corpo de uma página ou páginas específicas. Você pode injetar seu próprio código nas páginas para inserir pequenos trechos de código, mas não importar todo o site para o Webflow. Você vai, posso criar um site de associação no Webflow? Meio que ainda não. Está na versão beta. Já pode ter sido lançado, dependendo de quando você estiver assistindo isso. partir dessa gravação, está na versão beta, então eles estão trabalhando nela. Então, provavelmente já foi lançado. Sim, você pode. No momento, você pode criar uma seção protegida por senha do seu site que já está funcionando no Webflow e site de membros está chegando ou pode estar disponível. Agora, vá conferir. Eles vão. Essa é a resposta. Posso usar meu próprio nome de domínio personalizado com o Webflow? É possível que eles ofereçam um como parte da parte gratuita e do site de desenvolvimento do Webflow. E isso é como o incrível site de Dan dot Webflow, dot io. Você pode usar esse. todo mundo quer seu próprio domínio personalizado No entanto, todo mundo quer seu próprio domínio personalizado, o incrível website.com de Dan. E sim, você pode conectá-los. Eles os vendem? Sabe como configurá-los? Mostrarei mais tarde no curso básico, mas isso pode ser feito. Sim, novamente, tudo bem. Em diante. O Webflow gerencia seus endereços de e-mail? Você tem o incrível website.com do Dan. Ok. Você quer Dan no incrível website.com do Dan? Nosso fluxo de trabalho não gerencia o e-mail para você. Você precisa de outra coisa. A maioria das pessoas usará os espaços de trabalho do Gmail ou do Google. Isso é o que eu uso, é muito comum. Ou organize sua própria hospedagem de e-mail. Portanto, eles não fazem o tipo de gerenciamento de e-mail para você. Você pode simplesmente usar sua conta do Gmail e não receber um Dan especial no e-mail especial do website.com e apenas usar seu Gmail. A outra coisa é que eles lidam com coisas como, digamos, fazer um pedido através do seu site, alguém faz uma compra. Eles cuidarão disso, como pegar o pedido e enviá-lo por e-mail para você e dar a você um espaço para fazer login e ver todos os seus pedidos. Então, eles não lidam exatamente com e-mails, mas como essas transações. O mesmo acontece com um formulário. Eu vou te mostrar como criar um formulário neste curso. E quando alguém diz oi, meu nome é Daniel Scott e eu quero contratá-lo e me submeter. Ele processará isso, conterá uma cópia e a enviará para você. Você é qualquer endereço de e-mail que você deseja enviar para o Gmail ou Hotmail, Yahoo ou estaria usando? Ok, então eles processarão esse incentivo de uso. Você entende o contexto. Assim, eles processarão o formulário e o enviarão para o seu endereço de e-mail. Eles não organizam seus endereços de e-mail sofisticados, mas processam e enviam coisas para o seu endereço de e-mail existente. O Webflow é bom para SEO? Sim. Sou uma pessoa relativamente qualificada da ACO, lidei com isso há muito tempo, razoavelmente boa. E ele faz o básico muito bem. fluxo de trabalho na página, no SEO da página e, na verdade, é bastante profundo em termos de água, na verdade pode ajudar o SEO do seu site. Então, a resposta é sim, funciona. Site na página SEO. Extremamente bem. Eu vou dizer extremamente ansioso. 7. Como criar seu primeiro site em fluxo na web: Olá a todos. Vamos criar nosso primeiro site no Webflow. Vai ser super básico assim e não vamos realmente construí-lo , mas usar muitas das coisas pré-fabricadas no Webflow. E eu faço isso porque quero uma visão geral muito boa de como é o processo, como você inicia um site, como você coloca coisas nele, como você publica, como você o visualiza? Ok, então é por isso que é um vídeo curto e vamos ouvir rapidamente, porque existem apenas alguns princípios básicos. Quero mostrar todo o processo em um pouquinho e mostrar as principais áreas que você usará antes de entrarmos em mais algumas das coisas fundamentais do Webflow. Boa visão geral breve. Ou seria muito útil quando você dissesse: “Ah, sim, isso foi bom. Agora posso ter uma ideia de onde entramos ou será muito rápido e muito confuso. Ainda não tenho certeza de qual é, então vamos direto para começar. Dependendo de onde você começa, você pode estar aqui, você pode começar um novo site. Você pode acabar, na verdade, apenas nesta janela aqui. Você pode começar com modelos, o que será ótimo mais tarde, quando você for incrível. Mas, por enquanto, vamos começar com um projeto gratuito. Você pode, eu só vou fazer uma demonstração. Você pode acompanhar se quiser nesta fase, mas vamos descartar o que eu vou fazer. É mais um membro completo, apenas para dar uma ideia do que está no futuro. Então esse é o designer. Bem-vindo. É aqui que você vai passar a maior parte do seu tempo. Então, é como quatro lugares principais para encontrar coisas. Eu vou te mostrar três agora e um depois ligou para o editor. Vamos mais tarde no curso. Mas os principais que você precisa agora como designer, é aqui que podemos adicionar e desenhar coisas. Então eu entro aqui e digo esse pequeno botão de adição e posso dizer que quero apertar e depois quero o botão. Lembre-se de que isso é apenas uma resposta rápida se quiser, desacelere. O objetivo deste vídeo não é fornecer uma visão geral ampla. Antes de entrarmos no âmago da questão, o designer, você fará coisas e trabalhará em design. O outro lugar que é útil é, digamos, aqui no canto, são as configurações do seu projeto. Então esse é o nosso projeto, ok, esse é o meu projeto. Eu posso entrar nessas configurações e tem muitas coisas importantes. Então, o meu se chama Dan's Awesome site. E temos um botão e, ao clicar nele, coisas gerais, o nome do seu site, eles têm ícones. Ok. Veja onde você está baseado, todos esses tipos de coisas. E os membros são uma área para, você pode ter outro design ajudando você ou seu cliente a publicar seu faturamento, coisas que você pode alterar para o site, para SEO, de qualquer forma submissões. Acho que não está muito pronto para passar por isso, é mais como se esta seção aqui tivesse muitas coisas importantes que, quando você começar, você pensará: “Onde está isso? Está nas suas configurações, nas configurações do seu projeto. Ok, então vamos voltar ao designer desse projeto chamado Daniel é um site incrível. Há algumas maneiras de chegar a todos os lugares. Está tudo bem, lembre-se designer, eu posso ir às configurações do meu projeto, ok, mas digamos que você tenha dois projetos. Você está trabalhando com três clientes, dez clientes, você é incrível. Ok, você pode acessar seu painel. Você acabará aqui com bastante frequência quando carregar o fluxo de trabalho depois de algum tempo, sair ou sair dele, fechá-lo e voltar aqui, você acabará aqui. No momento, eu tenho um site, você vai acabar com vários sites aqui. Se você criar vários sites a partir daqui, você pode, na maioria das vezes, clicar neles e ir até o designer onde estávamos antes. Ou você pode ir direto para as configurações do projeto. Aí está, as configurações desse projeto. Então, essas são as três partes, o designer, as configurações e esse painel. Você vai alternar entre todas essas coisas, essas coisas aqui estão, isso é importante. Essas coisas aqui, sites legais que criaram designers que você poderia contratar sua parte educacional, tipo, essa é a parte principal. E dentro desse painel, você pode abrir seu projeto e um designer, Diego. Então, essas são as principais áreas. E a outra coisa principal que eu quero abordar é que vou clicar nelas e simplesmente excluir no meu teclado. E eu quero examinar rapidamente essas partes aqui. Então você tem elementos e layouts. Os elementos são os blocos de construção com os quais você trabalhará. Você vai começar a criar um contêiner. E então, dentro desse contêiner, você pode colocar seus cabeçalhos para que não batam até lá. Você começa a construir seu site, você diz, ok, eu preciso do que mais? Nós precisamos. Coisas fáceis. Eu preciso de uma imagem. Ok, vamos colocar nossa imagem. Perdi, coloque-o na área certa. Você começa a criar seu site por meio desses elementos e há muitos aqui, há formulários. Você pode ver que há menus de navegação, todo tipo de coisas legais que aprenderemos neste curso. Os layouts são, deixe-me excluir esses layouts, não é trapaça, mas são partes pré-fabricadas. Você quer um adesivo até o topo. Estrondo. Você quer ah, layouts. Você quer uma seção de heróis? Rodapé? Para onde eu vou? Lá vamos nós. Além de layouts. Rodapé. Ok, você já tem um site bastante complexo em funcionamento. E o legal é que eu vou te mostrar esta é sua prévia. Então esse é o designer. Sou eu com toda a edição e muita porcaria em todos os lugares. Você pode limpar tudo na pré-visualização de como será para o usuário final clicando neste pequeno globo ocular. Aqui vamos nós. Vai parecer que você pode ver aqui. Eu não posso fazer muita coisa. Não é bonito, mas é grande parte da estrutura que existe. se você mudar para essa, digamos, visualização móvel, você pode ver a navegação? Isso muda? A cada pilha, as imagens meio que se acumulam de forma diferente nisso. Fez muito trabalho para você usando esses layouts para sair da visualização, clique no globo ocular novamente. Elementos, todos os bits individuais, layouts são todos os bits individuais unidos. Isso ainda está batendo, e ainda são alguns textos e ainda é um botão. Mas está centrado. Agora, veja isso que parece caber na caixa. Então é só uma forma de pular, pular. Agora, você não pode fazer isso ainda. Você poderia. O problema é tipo, ok, eu quero pegar isso, eu quero deletar isso, ok, eu quero deletar tudo isso. Estamos apenas deletando todos eles. Por que aquele salto para lá? Há muitas coisas pelas quais isso é muito útil quando você sabe o que está fazendo. No final deste curso, o que você poderá fazer é poder usar tudo isso e saber quais são os flutuadores e por que o Flexbox está mantendo isso no meio. Não é difícil, você só precisa aprender. Então, pular para essas coisas ou modelos pré-fabricados de outras pessoas é legal. Mas somente quando você tiver algumas habilidades básicas, vou lhe dar algumas habilidades básicas para que você também possa economizar tempo copiando modelos ou clonando sites ou usando esses grandes blocos de layout. Algo mais que eu queria te mostrar? Então, blocos de construção, layouts, truques, tudo bem, pré-visualização do elemento . E a outra é publicar, ok, então aqui em cima, podemos publicá-la e ela pode ser vista na Internet por pessoas. Ele vai usar esse tipo de domínio estranho. Como eu disse anteriormente no curso, você pode usar seu próprio domínio personalizado. Mas, no momento, vamos usar isso. E você pode publicá-lo e as pessoas podem vê-lo. Pré-visualizando só para você, publicando para o mundo. Construindo-o com elementos. Trapacear usando fluxos de trabalho, elementos que já foram criados ou meio que pré-estilizados e prontos para uso. Ok, essa é minha breve visão geral de como fazer algo no Webflow. O processo completo é breve, por mais breve. Também não se esqueça dos lugares em que você precisa estar. Lembre-se de que sua sessão de projeto tem tudo a ver com esse projeto em particular. Ok, volte ao painel para ver todos os diferentes projetos em que você está trabalhando e sobre os quais o editor realmente falará mais tarde. Essa é a visão que seu cliente potencialmente verá se você der a ele acesso para atualizar o site. Você pode não estar planejando fazer isso, mas isso é outra parte. Tudo bem, espero que tenha ajudado, não tenha ajudado. Eu não sei. Acho que um pequeno resumo rápido é meio bom para ver aonde tudo vai ou vai confundir a academia. É um ou outro. De qualquer forma, vamos para o próximo vídeo e realmente começar a criar algo do zero para que possamos conhecer o Webflow. Um pequeno bônus, acho que quando descobrimos como excluir um site, porque só servia para isso, era pegar algo e organizá-lo. Então, se você fez algo, vamos excluí-lo. Então, vou voltar para o meu painel. E eu vou dizer, aqui estão todos os meus projetos. Este em particular, eu vou deletar. Você tem que ser muito gentil em tudo isso porque é muito importante porque eles o excluem e você nunca o deixaria voltar. Não copie e cole isso porque isso é trapaça. Tudo bem, então estamos limpos e prontos para começar corretamente no Webflow. Nos vemos no próximo vídeo. 8. Projeto de curso 01 - Crie seu próprio breve para o fluxo na Web!: Olá. Vamos fazer o projeto da classe Alphas. É uma boa e simples. Isso só vai gerar um resumo que você pode usar para me acompanhar nesta primeira seção do curso. E eu não quero, bem, não é muito divertido. Se todos fizermos exatamente a mesma coisa. Teremos a mesma estrutura, mas quero que todos tenham seu próprio cliente, cueca e cores para cueca e cores que seja única e que você possa usá-la em seu portfólio. Agora, os projetos da classe estão todos listados em seus arquivos de exercícios. Há um PDF completo chamado projetos de classe, então você pode encontrar algo parecido com isso. O primeiro é ir para o gerador de projetos aleatórios. É algo que fizemos aqui em bringyourown laptop para que todos sejamos únicos. Então, clique nas centrais do Webflow e tudo o que você precisa fazer é digitar sua cidade, nome ou cidade ou o que quer que seja. Ok. Não precisa ser o lugar real. Só que eu não. Não quero saber onde você mora. Mas o que queremos fazer é ter algo único para todos. Para que, ao clicar nele , você obtenha seu clube. Então, este aqui, use o primeiro que você conseguir, não trapaceie, não pressione tentar novamente. Ok, eu entendi a ideia. Clube de Apreciação da Rotunda. que existe o Appreciation Club Acho que existe o Appreciation Club no Reino Unido. Mas todo mundo vai ter algo diferente aqui no resumo que vamos seguir é que eu posso lê-lo em voz alta. Você foi perguntado se este é um site de uma página para este clube k. Isso precisa de um site simples. Será uma página só para postar eventos futuros, eventos passados e patrocinadores. Esse é o cliente ideal deles. Eles estão na casa dos 60 anos. Eles moram localmente. E, basicamente, esse slide é apenas uma forma de o clube não ser contatado toda vez que alguém quiser saber a que horas nos encontraremos no sábado. Ok. Então esse é o objetivo disso. PNG baixado. Não clique em tentar novamente para usar apenas o primeiro que você recebeu e, se você fizer isso, a internet quebrará se você clicar três vezes. Ok. Nunca tente três vezes. Baixei, prepare-se e depois poderemos parar de criar os próximos vídeos. Isso é tudo? Está nos projetos da aula? Sim. Em seu nome, entregas baixadas. Não há nada para isso. Alguns dos futuros projetos de aula, pedirei que você faça capturas e as envie para este. Não, apenas pegue sua pasta. Opcionalmente, deixe-me saber nas redes sociais que você está começando, você usa essa hashtag, iniciando o fluxo de vento. Você precisa copiá-lo e colá-lo para ver outras pessoas começando e me avisar. Você está muito empolgado. Já está muito difícil? Porque eu vou me acovardar mais tarde no curso, violeta, mesma etiqueta e ver como você entra. Se você estiver mais impressionado quando começamos a pegar o jeito , me avise. É legal ver as pessoas começando a usar o MyCourses. Tem todas as minhas redes sociais. Sim. Me mande uma mensagem. Tudo bem. Receba seu resumo e nos vemos no próximo vídeo. 9. O que são Container vs seções no fluxo Web: Guardem seus chapéus, pessoal. Vamos fazer disso um belo exemplo de design. Vamos fazer isso porque precisamos aprender algumas coisas que precisamos aprender sobre seus elementos de layout aqui. Os mais importantes o contêm na seção. Eu vou te mostrar como fazer isso e vou te apresentar a esse cara aqui, o navegador. Ele é muito útil. Tudo bem, design Brilliance. Aqui estamos, marque primeiro. Vamos criar um novo site. Se você não excluiu a primeira linha ou criou um novo site, deixe um em branco para começar e dê um nome a ele. E meu único lembrete se chama Dear Kayaks Day Kayak Club. Lá vamos nós. Ótimo. E você cita. Então lembre-se de que esse é o nosso designer. Recebemos uma coisa. É esse corpo. O corpo é tudo o que você vê no Canvas atualmente é branco e não há nada nele. Se eu visualizar meu site, esse membro Isso é difamação, eu não tenho nada. Clique nele novamente para voltar. Então, vamos aprender as duas partes mais fundamentais da criação de um site. Vamos clicar nesse pequeno botão Adicionar. E, em elementos, veremos seções e contêineres. Veremos o resto deles mais tarde. Mas esses são os dois principais. O contêiner geralmente está bom, isso é muito geral. Você tem um por site e encheu de seções diferentes. O que quero dizer com isso é que digamos que eu adicione alguém aqui embaixo. Eu tinha alguma topografia se a adicionasse aqui ao meu amigo. Ok. Ele simplesmente fica lá fora e está todo aqui à esquerda e você fica tipo, eu quero que esteja no meio, como os sites. Ok, então vou desfazer isso usando o Command Z em um Mac, Control Z em um PC. Ok, então o que você precisa para começar é não bater diretamente no corpo. O que você faz é dizer, bem, por que eu posso simplesmente colocar uma seção no problema, esta seção também, ela tem o mesmo problema do cabeçalho. Ele se estenderá até o limite permitido, o que vai até a borda do corpo. Então você não começa com uma seção. O que você faz é começar com um contêiner e ver o contêiner. Tem bordas, ok, então, digamos, o lado ensolarado aqui. É comum agora que você possa expandir até as bordas e mostrarei como fazer isso mais tarde com um site mais complexo. Mas muitos sites ficam no meio aqui e têm esse espaço em branco. Isso é simplesmente comum. Não é central. Mas lembre-se de quando os sites estavam à esquerda, de qualquer maneira. Então, temos esse contêiner e ele fica no meio. E dentro desse contêiner que adicionamos, nossas seções são seções. As seções são, vamos dar uma olhada na Apple. O site está dividido em seções meio únicas. É uma forma de delinear informações. Isso é uma navegação. É uma seção chamada navegação. Esta é uma seção chamada caridade. Acho que esta é uma seção chamada MacBook Air, iPhone 313. Ok. Então, essas são seções diferentes. Role até o final, há um rodapé, o mesmo com a Sony. Eles têm uma nav, eles têm esse carrossel, eles têm isso que eu não quero chamar isso de unidades de negócios diferentes. E depois a parte inferior ou as últimas notícias e um rodapé. Então, essas são seções diferentes. Isso é o que você tem. E fluxo de trabalho, você acabará com algumas seções. Então, vamos dar uma olhada em nossa prévia. Então é isso que estamos construindo, certo? A sua vai parecer diferente, mas há uma nav, há o que é chamado de seção de heróis. Haverá uma seção patrocinada, uma nova seção de eventos e, em seguida , eventos passados lá dentro. Você pode separá-lo. Eu vou te mostrar como fazer isso usando uma grade. Mas você só tem algumas coisas importantes chamadas seções. Ok, então o que vamos fazer é pular a navegação e apenas construir a seção de heróis. E é mais fácil aprender a seção de heróis e faremos a navegação um pouco mais tarde. Então, o que eu fiz? Eu cliquei em, desfaça isso. Então, clique no sinal de adição e arrastei minha seção para o meu contêiner. Você pode meio que ver para onde você o arrasta. Se eu arrastá-lo até lá, ele vai ficar embaixo do meu contêiner. Ruim. Então, vou desfazer e arrastar minha seção para dentro do contêiner, o membro, a seção meio que se espalhou o máximo possível. Mas porque está dentro do contêiner, Ei, fica preso lá. Vamos fazer uma prévia. Não há muita coisa acontecendo. Vamos dar uma olhada na adição algo nesta seção. Então, vamos acrescentar mais e adicionar nossos acertos. Então pegue a batida aqui embaixo, clique em segurar, arraste, arraste, arraste. Lembre-se de que você pode apertá-lo nesta seção ou embaixo desse contêiner, ou simplesmente aqui no corpo. Não é o que eu quero. Se você colocá-lo no lugar errado, basta clicar em segurar e arrastar e dizer, na verdade, entre. Aí está você. Temos nosso sucesso dentro da seção OWL. Vamos acrescentar, bem, poderíamos continuar adicionando seções diferentes. Vou deixar um no momento, aquele que chamamos de herói, porque quero apresentar a vocês algo, duas coisas. Eu tenho minha batida selecionada, então selecione sua rebatida também. Então, aqui embaixo, você pode ver eu tenho um golpe que por acaso dentro de uma seção que está dentro de um contêiner, está dentro do meu amigo. Estamos projetando web para todo mundo. Ok? Então, essas são as migalhas de pão que mostram onde você está no mundo, o que pode ser útil. Então você quer selecionar o contêiner agora. Continue batendo na batida. Você pode dizer que, na verdade, eu quero clicar no contêiner e dar a ele uma cor de fundo, que está aqui em algum lugar, fundos. Então você poderia fazer isso. Esses são úteis. A outra coisa na probabilidade, a coisa que você mais usará ou pelo menos eu faço, é clicar em bater. Isso é igual ao navegador? Navigator mostra uma forma semelhante O Navigator mostra uma forma semelhante às migalhas de pão na parte inferior, mas tem toda essa indentação que é realmente útil. Então, minha batida acontece dentro de uma seção dentro do meu recipiente, que dentro do corpo, você terá um amigo. 100% do tempo, você provavelmente terá um contêiner e muitas seções diferentes e vários títulos diferentes. Então, navegar é útil para mover as coisas. Digamos que eu queira adicionar outro acerto ou dizer um parágrafo e editar aqui e aqui. Mas acabou no corpo e nela. Você pode arrastá-lo e tentar colocá-lo sob o título. E isso funciona. Eu vou desfazer isso para que você não possa fazer isso. Então, navegar é muito bom para isso. Você pode dizer: Aqui está ele. Ele não está no lugar certo, está embaixo do contêiner. Então você pode dizer que, na verdade , eu os quero logo abaixo desse título. Então você vai arrastar uma multidão e movê-la. Aqui vamos nós. Ele está logo abaixo deles, dentro desta seção, com o aquecimento. Você pode alterar a ordem em que este UVA, lá vamos nós. Portanto, é uma boa maneira de trabalhar mais com o código do que ele é. O visual, o visual é ótimo para muitas coisas. Mas às vezes pode ser complicado. É por isso que eu apresentei você ao navegador. Vamos estilizar esta seção um pouco antes de prosseguirmos e provavelmente ver os estilos. Para que você possa curtir o plano de fundo, vamos dar uma olhada na nossa prévia. Eu quero o plano de fundo para esse pedaço, aqui eu tenho uma imagem nele. Vou fazer a imagem um pouco mais tarde, por enquanto, vamos preenchê-la com uma cor escura para que possamos ver o texto. Isso. Devo colorir o parágrafo? Você poderia dizer um parágrafo aqui. Eu gostaria de ter um pergaminho. Portanto, você deve obter sua opção de estilos aqui. São meio que os padrões, role para baixo, role para baixo, role para baixo. Estou usando minha roda do mouse. Você pode atacar isso. Você está encarregado de descobrir como subir e descer essa coisa. Ok, eu uso minha pequena roda de rolagem. Você pode arrastar o pequeno controle deslizante ou a lateral. Então aí está, aí está o plano de fundo. Então, posso dizer que a tag u, p tag ou tag de parágrafo tem um fundo escuro que você gosta. Você tem que fazer isso. A batida. Ok. Então você quer muitas vezes com estilos grandes como esse, ok, eu vou desfazer, que é Command Z em um Mac, controlar C em um PC. Você gostaria de fazer isso provavelmente nesta seção, eu sei que há uma coisa certa aqui é uma seção inteira que eu quero que seja escura. Então, como faço para selecionar as mãos para cima, mãos para cima. Como faço para selecionar a seção? Sabe, há duas maneiras de dizer “Você” na seção “Você”. Lembra da farinha de rosca? Eu cliquei dentro dela primeiro. Então, ele meio que sabe em que parte do mundo você está. No parágrafo. Não quero que esta seção tenha um plano de fundo, cor e fundos transparentes. Eu só vou usar um cinza escuro por enquanto. E vamos mudá-la mais tarde para uma imagem. Aí está você. Você começou sua seção. Você acabou de criar a primeira parte do CSS. Você nem sabia disso. Então, usamos a farinha de rosca para selecioná-la. Você poderia, talvez, se eu clicar no meu parágrafo novamente, você diria: Ei, a cor de fundo desapareceu. Como faço para clicar na seção? O painel do navegador é provavelmente o que eu mais uso, pode-se dizer, não um parágrafo. Clique nele. Aí está você. Aí está minha cor, na qual eu posso clicar e com esse seletor de cores aqui. E se você não está acostumado com eles, basta clicar em qualquer lugar aqui. Depois de clicar e arrastar, muitas vezes não preciso, mas meio que encontro uma cor. E para escolher uma cor diferente, você pode arrastar esse controle deslizante de matiz, ok? Se você quiser um azul escuro, se quiser um verde, arraste o controle deslizante para verde e , em seguida, escolha entre os tons e a saturação do verde. Mas eu vou até aqui, basta escolher um cinza desbotado e depois entrar aqui e pronto. Tudo bem, é isso. Nós adicionamos um contêiner, meio que nos afasta das bordas. E de dentro para fora. Primeira seção, vamos adicionar várias seções ao nosso único contêiner. E Buddy está ao lado de todo mundo rural sentado em segundo plano, mantendo todos no lugar certo. Tudo bem, é isso. Estrutura básica, contêineres, seções. Vamos para o próximo vídeo. 10. Como criar aulas em CSS no Webflow: Olá a todos. Este vídeo está aprendendo tudo sobre quais classes são classes CSS no Webflow. Como estilizamos as coisas? É longo porque é um tópico relativamente importante que é bastante estranho para pessoas novas em web design. Se você já sabe o que é uma aula de CSS, provavelmente a assiste de qualquer maneira, há algumas peculiaridades do Webflow que precisamos conhecer antes de prosseguirmos com o curso. Tudo bem, vamos. Então, o que é uma aula? Uma classe, uma classe CSS. A versão longa é uma forma de estilizar os elementos da página, dá a eles cor, estilo e preenchimento e o que é divertido de usar. Então, arrastamos esses elementos em nível de bloco para a página, apenas esses tipos de coisas parecidas. Nós apenas os juntamos. E então vamos querer estilizá-los, selecioná-los e, aqui, mudar o estilo. Fizemos o fundo cinza antes. Então, vamos fazer outro. Vamos clicar em nossa batida. Ok, e vamos dar uma pequena olhada em como estamos seguindo o design. Lembre-se de que você pode escolher o que quiser sozinho. Vamos estilizá-lo. Então, eu tenho meu hit selecionado. Agora, a maneira certa de fazer isso é entrar aqui e dizer, Ok, eu tenho meu hit selecionado. Vou clicar aqui e dar um nome a ele. Então eu vou dizer que esta é a minha casa batendo, dê um nome a ela. Você pode ver aqui que é aplicado a ele. Então eu vou para o estilo e vou dizer aqui embaixo e tipografia, role para baixo. Aí está minha cor. Eu vou dizer, clique na coisinha e diga, na verdade, eu quero que o branco fique branco. Realmente não importa o que Hugh urina, contanto que você clique, segure e arraste, arraste, arraste, arraste, arraste. Mais ou menos até aquela esquina e vou passar um pouco por ela. Ou você pode abrir se, se, se, se esse for o código para branco em linguagem hexadecimal, podemos pressionar Enter no meu teclado? Não vou, só vou clicar. Ok, e nós o estilizamos com sabor branco. Se eu clicar nela, ela tem uma classe CSS que chamei de dance hitting K e diz que as coisas devem ser brancas. Eu posso reutilizá-lo. OK. Eu poderia ligar, eu poderia dizer, na verdade este parágrafo aqui que eu adicionei. Você também, se eu clicar aqui, posso dizer, olha, aqui estão todos os meus outros que eu fiz. Minhas aulas existentes que podem ir dançar, bater, você vai, dinamarqueses bater realmente não fazem nada. Tudo o que ele faz é tornar as coisas brancas. Este é o único emprego no mundo que hoje está atingindo. Vou usá-lo como se fosse texto amargo e branco frio. Eu posso simplesmente me inscrever em coisas diferentes. Então, agora você criou sua primeira classe CSS chamada acerto ou densidade no meu caso. Então, selecionar algo e adicionar propositalmente uma aula é o que você quer fazer. fluxo de trabalho de Bond sabe que as pessoas simplesmente invadem e fazem isso. E o que eles fazem é realmente criar aulas para você. Já fizemos um, já fizemos ênfase. É como seu segundo estilo CSS. Lembra quando tínhamos nossa seção, o plano de fundo. Então, como faço para clicar nesta seção? Lembre-se, você pode fazer isso aqui embaixo. Vou clicar primeiro e dizer que, na verdade não é o aquecimento na seção. Clique sobre isso. Ou talvez você possa acessar seu navegador e clicar em. A seção tem um estilo intitulado, um bom estilo. Você pode ver que eles receberam automaticamente nomes para nós, aquela coisinha azul que não estava lá antes. O site não nasceu com isso. Era só editar quando você inicia uma corrente para mudar a cor e você esqueceu de dar um nome a ela. Então, isso é tudo, vou apenas nomeá-los para você. Então você vai acabar com muito disso , especialmente quando você é novo. Então, deixe-me mostrar um exemplo. Não acompanhe. Então, vou adicionar uma nova seção. Seção. Vou arrastá-lo, tentar entrar no lugar certo. Bem, eles não funcionaram. OK. Desfazer, desfazer. Vou para a seção. Você pode colocar um dentro do outro. É contra as regras da Internet, ou pelo menos as regras do fluxo de trabalho. Os elementos da seção não podem ser aninhados uns dentro dos outros. Então eu concordo, eu vou colocá-lo aqui em algum lugar onde você possa ver que o corpo dele lá em cima, você pode chegar um pouco mais alto, está dentro do recipiente, que é meio que onde eu quero dentro do recipiente, não dentro dessa outra seção por causa de você, deixe-me colocá-la no lugar certo. Mesmo que você não o encontre no lugar certo. Eu quero te mostrar um pouco, na verdade, não, vamos terminar este exemplo. Então, vou entrar no lugar certo e vou estilizá-lo. E na minha pequena maquete aqui, você pode ver que são fundos brancos. Ah, legal. Eu vou fazer fundo branco. Uau, por que não vai ser tão útil no momento. Vamos escolher qualquer fundo antigo. Então aqui, e o que eu quero que você faça, eu vou mudar o plano de fundo. Veja isso, assista esse trecho aqui em cima. Eu vou dizer, podemos rolá-lo para cima para que fique mais perto? Lá é pior. Eu vou dizer que você vai ter uma cor de fundo de vermelho muito brilhante. Você pode ver que disse, Ei, você não deu um nome, então eu vou nomeá-lo para a seção dois. Quando você for novo, acabará com a Seção 42, o que não é muito útil. Então, o que você quer fazer é ter um pouco mais de propósito. Eu vou desfazer isso. Eu quero que você veja se você pode adicionar sua seção, experimente. Então, vamos dar um nome a ele antes de estilizá-lo. Ok, vou chamá-la de seção. Vou usar a capa do título aqui. Não importa o nome que você suas classes CSS. Você pode dar a eles qualquer nome antigo. Eu acho que eles têm que começar com uma letra, não com um número. Isso é importante. Vai ser uma seção e esses serão meus patrocinadores para deixá-la entrar. Eu posso encontrá-lo facilmente e agora vou escolher uma cor muito interessante, cor errada, fundos. Temos que clicar aqui para ver a cor. Eu quero me arrastar até conseguir alguma coisa. Eu só vou usar outro cinza por enquanto. Estou sendo um pouco mais proposital agora que criei um estilo, apliquei-o à seção chamada patrocinadores. E você diria: “Uau, o que fazemos com o que já fizemos? Então, vamos selecioná-lo. Vamos clicar aqui. Vamos fazer alguma coisa. Bem, vamos clicar aqui embaixo e dizer que eu quero essa seção selecionada. Ok, em vez de uma seção legal, porque esse não é um nome muito bom, basta clicar com o botão direito do mouse nela e clicar duas vezes nela e dizer seção. E esse se chama My Hero. Ok, então agora eu tenho uma seção de heróis e eu tenho uma seção. Lá vamos nós. Depois de um tempo, você adquire o hábito de criar nomes primeiro, mas no começo você acabará por criá-los e depois nomeá-los, e tudo bem. Agora, a próxima coisa a observar sobre as classes CSS é que geralmente é mais útil estilizar a seção ou a coisa em que ela está em vez dos elementos em si que estilizamos. Usamos a batida de Dan e a colocamos em ambas. E tudo bem. Você pode continuar fazendo isso. Não há nada de errado com isso, mas provavelmente é melhor. Vamos nos livrar disso. Então, como removemos uma etiqueta aqui, suspensa. Há um que diz: basta remover esse. E eu vou removê-lo daqui também , remover essa classe. Então, desapareceu. O que? É mais fácil, em vez de criar uma classe , fazer isso com os dois. Você diz, na verdade, que eu quero que tudo na minha seção, o herói, tenha uma tipografia branca aqui embaixo. Na verdade, você não precisava fazer dessa maneira, mas vê que é mais fácil. É mais fácil estilizar o contêiner do que está nos elementos individuais, geralmente dizendo com o preenchimento Vamos dar uma olhada no nosso exemplo. Há um grande empurrão desse lado. Então, eu poderia clicar se eu não desse um nome e adicionasse um pouco, digamos, um pouco de preenchimento no lado esquerdo aqui clicando , segurando e arrastando. Você pode ver que ele instantaneamente fez algo chamado bater. E se eu fizer outro, ele atingirá 2345674. Então eu não quero fazer dessa maneira. Vou me livrar disso. Remova essa classe para que eu possa nomeá-la e, em seguida, adicione o preenchimento, que é um pouco melhor, mas na verdade é mais fácil. Basta ir para a seção. Ok, então estou clicando na minha seção de heróis. Eu vou dizer que quero acolchoamento para tudo o que está lá dentro. Clique e segure e arraste, e tudo aparecerá durante o passeio. O mesmo acontece com o de cima . Penny, de cima para cá é um pouco complicado. Você o arrasta do jeito que você queria empurrar. Ok, então eu vou desfazer isso. Então, eu queria que o número aumentasse. Então eu o arrastei para cima. Você quer arrastá-lo para baixo? Nós vamos. Quanto acolchoamento eu quero? E vamos adivinhar por enquanto. Eu meio que vou olhar para trás e dizer algo sobre lá. Isso parece bom. Eu quero um pouco de acolchoamento na parte inferior. Quanto estofamento há aqui embaixo? Quase o mesmo que o topo. Então, eu vou dizer seus 23 para que eu possa clicar na parte inferior e dizer 23. Agora, eu tenho alguns problemas com números. Eu percebo que em 23 é 53. O que eu sou, Wade Quick? Você provavelmente o verá novamente no curso. Meus olhos, meu cérebro e minha boca. Às vezes, eles não o chamam. Então, de qualquer forma, criamos nossa seção de forma muito proposital. Nós lhe demos uma cor de fundo. OK. Ou é a cor de fundo? Estou rolando até lá. Está lá. E vimos que tudo aqui dentro tem uma cor de texto branca e um pouco de preenchimento por aí. Provavelmente algum acolchoamento desse lado também. Arraste-o do jeito que você quiser. Você vai. Veja o exemplo até agora. Na verdade, ele realmente não precisa disso. Eu quero que esse parágrafo entre um pouco ali, mas eu quero um diferente aqui. Então, agora este é um exemplo muito bom em que na verdade, se eu fizer o preenchimento para tudo, estamos nas tomadas de parágrafos, digamos , vamos lá , vamos até o fim. Aqui vamos nós. A batida não será longa o suficiente. O ego, então é aqui que, na verdade o preenchimento do contêiner não é tão útil. Então, o que você pode dizer é Go, você, na verdade, eu vou tender a preencher porque você vai simplesmente desligá-lo para a seção. Você deve desligá-lo. Existem algumas maneiras de você simplesmente clicar. Zero está meio que funcionando. Ok? Então, removendo algo, ele vê azul e este não é azul. Azul significa que eu fiz com que fosse zero. Eu disse ser zero. Isso está acinzentado porque é como se eu estivesse apenas supondo. Tudo o que não está definido como zero, acontece que é zero. Estou sendo muito específico aqui. Então, o que você pode fazer é manter pressionada a tecla Option em um Mac, tecla alt em um PC e clicar em algo. Você vê quando o cinza meio que diz é, eu não estou dizendo ser zero, apenas seja qual for o seu padrão, apenas continue seu dia. E agora o que eu quero fazer é dizer este texto de parágrafo aqui. Eu vou dizer que você é meu parágrafo. Vou usar a palavra, vou usar a letra P, k depois um espaço porque provavelmente tenho mais texto de parágrafo em todo o meu documento. Então, vai dizer um parágrafo para o herói, uma pequena aula especial que vamos fazer. Ok, crie isso. Você pode pressionar Enter ou clicar aqui. Eu quero que isso tenha algum preenchimento aqui, o que é diferente do tipo de seção. E o que aconteceu lá. Por que não está meio que ouvindo a seção? Esta seção é meio que como uma mãe. OK. Ele está dizendo, tudo bem, faça essas coisas que as crianças daqui possam ignorar e isso se chama especificidade. Falaremos sobre isso, é mais específico. Portanto, este parágrafo considera a obtenção algumas instruções vagas do alto. Se ele receber algumas instruções mais específicas, ele as substituirá e dirá, ei, sim, mas eu queria fazer outras coisas para colocar o material genérico na embalagem externa. Agora casos algo chamado Herói da Seção. E então, se você quiser fazer coisas um pouco mais específicas internamente, dê a eles o nome de sua própria classe. E no nosso caso, estamos apenas fazendo preenchimento. Agora, a nomeação de classes causa ansiedade a todos. E mesmo que você seja o melhor mais diligente, eu mesmo estou apontando isso. Você não pode ver isso, mas eu sou meio diligente e gosto todas essas coisas e entendo tudo. Você sempre acaba atingindo 17. Não me lembro, talvez não seja tão ruim. Você acabará com aulas que começarão com as melhores intenções e acabará fazendo com que funcionem, mas talvez não tão organizadas quanto você esperava, mas você vai melhorar. E neste curso, você notará que há cerca de três seções para CSS, apenas apresentando um pouco agora o suficiente para nos ajudar. E, mais tarde, faremos o nível dois e o nível três será o código CSS de alto núcleo. No final, falando em código, vamos dar uma olhada rápida em duas coisas que eu quero fazer. Quero ver o código e o Painel do Navegador. Isso não tem um painel de kit porque é rápido e é muito parecido com clicar nele e depois pensar, digamos que eu queira arrastar isso para a próxima seção, eu provavelmente posso fazer isso porque não é tão difícil. Oh, muito bom. Ponto. Eu tenho três coisas para te dizer. A primeira é que o painel do navegador é útil quando está sempre aberto. Então, isso significa que quando você está fazendo coisas no painel do navegador e fica tipo, eu quero arrastar isso para dentro. Você pode ver que não desaparece, fica lá o tempo todo e é fácil arrastar direto para isso. Você pode dizer que eu quero clicar dentro da seção, em vez de tentar arrastá-la para a página, você pode fazer isso. Não há nada de errado com isso. E desfaça o painel do navegador se você for até ele. OK. Porque, caso contrário, ele fecha automaticamente e é muito útil estar aberto o tempo todo. Para fazer isso comigo, você vai se acostumar com isso. E essa opção aqui em cima diz: fixe o navegador, não feche. Era para as coisas. Quais foram os outros dois? Você espera lá? Ah, sim. Eu me lembro. Então, vamos dar uma olhada porque eu disse que você está escrevendo código, executando código. Como você sabe? Você pode ir até aqui e esta é uma opção que diz Código de Exportação. Você pode clicar nele para exportar tudo o que você precisa pagar para contar. Mas você pode ver uma parte dela aqui. Está carregando o código. Vá lá. Carregamento de código. Não tenho certeza se meu normalmente sempre carrega. Vamos fechá-lo e tentar novamente. Sim. OK. Então, qual código escrevemos? Nós escrevemos um pouco de HTML, um pouco de CSS e um pouco de HTML em JavaScript. Então, acrescentamos que sabíamos que havia uma etiqueta corporal. Olha isso. Isso é o que é. Então, se você estivesse fazendo, eu tenho um básico de web design. Estaríamos escrevendo esse código e dizendo body dentro de uma classe div chamada container. Dentro disso, há algo chamado seção. Estamos escrevendo código e ele é bonito, bonito e bem definido. É fácil de ler, mas estamos fazendo isso uma forma mais visual. Você nunca precisa olhar para esse lado. É simplesmente interessante. Eu acho que é de qualquer maneira. Divs são apenas contêineres genéricos, divisões e tags divididas. Temos um chamado contêiner que mantém as horas no meio. Ok, eu vou para a seção e demos a ela o nome da classe de seção aqui. Temos outra seção aqui que demos um nome de classe, ok, então div classe de seções, patrocinadores. Então, esse não é o HTML. Nós meio que dissemos, aqui está uma caixa , chamada patrocinadores da seção. Aqui no meu CSS, nós o estilizamos. Nós dissemos, ok, onde estão os patrocinadores da minha seção, lá estão lá. E é isso que eu quero que você estilize. Essa é a classe CSS que você criou. Essa classe é chamada de patrocinadores da seção CSS. E essa cor de fundo, foi o que fizemos. Fizemos um pouco mais na seção chamada herói. Adicionamos um pouco de preenchimento e cor de fundo e cor da fonte. Lembre-se de que Dan está batendo lá. Não precisamos mais, mas ele definiu a cor para FFF, que é branco. E um acerto aleatório que fizemos. Ok, então estamos escrevendo HTML, CSS e JavaScript. Não estamos realmente nos tocando no momento, mas está sendo produzido para nós. Sua Coda. É por isso que não há codificação de código. A outra coisa que mencionarei enquanto estamos aqui, você pode ver que os nomes das classes têm, se você estiver fazendo meu outro curso de web design, usamos o código VS, você realmente precisa saber que um nome de classe começa com um ponto e depois tem que escrever, tem que estar em minúsculas. Você pode ter espaços, todo esse tipo de coisa. Enquanto o Webflow diz, não queremos ensinar às pessoas que você digita nada lá. E vamos convertê-lo para você para a sintaxe correta, que é que não há espaços, então eles simplesmente colocam hífens onde eu coloquei espaços e eles colocaram tudo em espaços e eles colocaram tudo minúsculas automaticamente para nós. Nunca precisamos entrar aqui. Eu acho que é útil. De qualquer forma. Dê uma olhada no seu código, veja o que você fez. Agora, eu disse que havia apenas duas coisas e depois havia uma coisa. Isso você viu. Eu ignorei isso. Então, é um bom exemplo, ok, é que essa coisa aqui está sendo contada sobre algumas coisas. Está sendo dito que é esse parágrafo aqui que eu nomeei. E o que isso nos diz para fazer? Isso nos diz que quer que tudo o que esteja nos dizendo para ser é que só vemos que é o que era, é o preenchimento, essa é a única coisa que fizemos com essa coisa. Tudo o mais que o torna branco, que o empurra desse lado, vem de. De onde vem isso? Isso mesmo. Vem desta seção em seção, diz B, isso de cima, isso de lado e seja uma cor de texto branca. As teclas ficam azuis quando as coisas estão prontas e tudo fica branco ou cinza quando você não pede para fazer nada, discutiremos o que o MBA colore mais tarde. Mas essa tag aqui, texto deste parágrafo está recebendo alguns comandos de. É ter um comando específico conectado a ele, dizendo estar preenchendo este lado. Então, quando eu o arrasto até aqui, a única coisa que vem junto é essa coisa aqui, porque tudo o mais que o torna branco e o empurra para baixo pela esquerda. Agora estamos indo do topo e a esquerda está vindo desse cara, desta seção aqui. Então, isso é uma coisa interessante de entender. Isso ajuda a tornar as coisas mais confusas desde o início? Por que não o aplicamos em tudo para que, quando você o arrasta até aqui, fique branco e o preencha. Você pode fazer isso. É muito repetitivo, especialmente se eu disser que estou criando um site de blog e tenho meus blogs, provavelmente só tenho quatro postagens porque isso é o máximo que eu chego antes de perder interesses. Mas eu adoro fazer vídeos. Mas digamos que você seja um ávido escritor de blog ou seu cliente, e você crie 1.000 páginas. E você aplicou um a cada trecho de texto de parágrafo e eles dizem: Você pode aumentar a fonte? Você pode dizer não, porque você vai ter que encontrar cada um deles, clicar neles e ir e alterá-los todos para algum outro estilo. Já que, se você fizer isso apenas nos contêineres, é relativamente fácil porque tudo o que está dentro vem da direita. Você diz que, na verdade, eu queria nos levar agora para sermos péssimos, contraste de leitura, fácil. E se houvesse 1.000 bits de texto nesta seção, poderia ser como a seção do artigo. Bem, na seção de postagens do blog, tudo vem junto para o passeio. Tudo bem, houve uma longa, mas é muito fundamental para o resto deste curso, compreender as aulas, como elas se aplicam e um pouco de especificidade. Especificidade é uma palavra difícil de dizer, ok? E é uma forma de dizer que vou ser muito específico para essa parte, mas todo o resto é simplesmente genérico. Siga-me, a menos que eu diga para você fazer o contrário. Tudo bem, é isso. Para o próximo vídeo. 11. Como adicionar imagens com margem em fluxo na Web: Olá a todos. Neste vídeo, eu vou te mostrar como trazer uma imagem. Vamos examinar o painel Ativos e adicionar uma classe a ele e experimentar as diferenças entre margem e preenchimento. Tudo bem, vamos entrar nisso. Ah, e também mostrarei uma maneira de obter imagens de uso comercial gratuitas para seu projeto. É um bônus. Tudo bem, agora vamos falar sobre isso, ok, primeira parada. Obtenha sua imagem e qual é o clube pelo qual você está fazendo isso. E você pode acessar algo como unsplash.com. O Unsplash é apenas uma ótima imagem comercial gratuita para uso. Ok, é muito incrível. Vou clicar aqui e digitar a lista de malabarismo. Suponho que seus clubbers fazendo malabarismos e encontrem qualquer uma dessas imagens aqui embaixo e clicem nesta pequena opção aqui que diz downloads para encontrar algo para o seu clube. O seu pode estar, sei lá, costurando ou continuando fazendo malabarismos com o que quer que seja. Encontre sua imagem, baixe-a e prepare-se. Então eu já tenho minha imagem, está nos arquivos de exercícios. Então, a primeira coisa é que precisamos adicionar uma imagem, ok, então adicione essa primeira pequena guia aqui, ok, e na parte inferior aqui há uma chamada Mídia e sua imagem. Clique para segurar e arraste-os e simplesmente coloque-os onde eles precisam ir. Você pode, mas acima uma pequena linha azul. Ok, tenho uma imagem. Vamos escolher a imagem. Essa pequena sessão aparece e você pode fazer algumas coisas básicas. Vou usar a imagem escolhida. E o que ele fez foi abrir essa guia aqui, sua guia de ativos. Estivemos na guia Adicionar e no Navegador, mas agora temos essa guia Ativos. É aqui que guardamos todas as nossas imagens. Você pode fazer o upload da sua imagem. Vamos fazer isso e procurar e encontrar. O que eu acho muito útil é simplesmente arrastá-lo até lá. Então, onde estão meus arquivos de exercícios? Então aqui está o meu. Estou no clube do insight. Eu tenho uma imagem aqui. E é muito legal, porque se você tiver 20 deles, basta clicar e arrastá-los. Aqui vamos nós. Aqui está minha imagem, ela está carregada, ok, e agora o que posso fazer é porque temos a selecionada. Se eu clicar nele e simplesmente jogar lá. Ok, então meu pequeno espaço reservado selecionou, apenas clicou nele e ele meio se injetou lá dentro. Bom. E é muito grande. Você pode simplesmente agarrar a borda dela. Veja esse pequeno ponto de ancoragem aqui embaixo. Clique em segurar, arraste. Não precisa segurar nada, basta arrastá-lo para cima e ele será redimensionado online. Esse tipo de tamanho. Estou vendo minha maquete que fiz, algo assim. Aqui vamos nós. Portanto, em termos de configurações de imagem, você pode ser um pouco mais menu e acessar as configurações a partir dele. Porque no momento, arrastar está tudo bem. Você pode meio que ver os números lá, mas digamos que precisa ser exatamente 50. Você pode acessar essa pequena engrenagem aqui, configurações de imagem ou, na verdade, há uma guia aqui, então vou fechá-la. Feche isso. A mesma coisa aparece. Veja essa engrenagem aqui. Eles são a mesma coisa, duas maneiras diferentes de chegar à mesma coisa. Aquela engrenagem, essa engrenagem. A diferença entre essa engrenagem é que ela tem um pouco mais de configurações, um pouco mais avançada. Então, o básico, porém, substitua a imagem aqui e você pode digitar o tamanho. Então eu vou dizer, e isso precisa de 50 e eu deixo a altura para automática. Se eu digitar a altura, vamos fazer com que seja de 20 pixels. Isso o esmaga. Então, você deve deixá-lo como automático, excluindo-o. Então não há nada lá dentro. Lá vamos nós. Bem, faça 50. Aqui vamos nós. Tudo bem, falaremos mais sobre imagens mais tarde, mas é isso por enquanto. Eu prometi que falaremos sobre preenchimento versus margem. Ok? Então, eu quero adicionar um pouco de espaço entre meus parágrafos são muito apertados. Então, o que eu quero fazer é adicionar uma classe CSS, ok, e como fazemos isso? Eu o selecionei. Eu poderia simplesmente ir até Styles e começar a arrastar coisas. Qual será o problema? É isso mesmo, ele vai me criar automaticamente uma classe que eu possa renomear mais tarde, o que é bom. Mas o que eu quero fazer é ser especial e dizer, eu quero virar imagem. E esse vai ficar frio. Capital I. Não precisa ser. Só sei que é um carrapato. Eu tenho um herói de imagem. Então eu coloquei ao contrário porque haverá uma imagem que talvez esteja no rodapé ou na seção de patrocinadores. Então eu sempre coloco a imagem primeiro e depois as outras coisas em segundo, só para que seja mais fácil encontrá-la mais tarde, ou minha imagem salsa junto em vez de herói na frente. Aqui vamos nós. Vou fazer isso. Pressione Enter no meu teclado. E eu vou dizer que vou adicionar um pouco de preenchimento ou margem agora com um preenchimento de imagem e a margem não importa. Então, eu vou arrastá-lo para baixo neste topo. Então, eu tenho um pouco de espaço lá. Bom. Você notará que, se eu desfizer isso, desfaça, mantenha pressionada a opção em um Mac, alt em um PC e clique em OK, e ela se livrará dela. Você notará margem se eu arrastar isso para cima. Ok, não parece visualmente , mas qualquer outra coisa? Ok, então o preenchimento e a margem de uma imagem praticamente não precisam se preocupar. Você pode fazer qualquer um dos dois. Ok, onde fica diferente, diz esta seção aqui, então eu estou apenas clicando nesta área aqui. Nós fizemos o preenchimento antes. Digamos que eu queira mais , mas vou usar a margem porque isso não importa. Dan disse antes da seção, dê uma olhada nisso. Se eu arrastar a margem para baixo. Ok, bem, você vê a diferença entre margem e preenchimento. preenchimento é o limite interno do que é considerado esta seção. A margem o afasta de seu próximo elemento. Então, isso adiciona espaço entre eles. Mesmo assim, digamos que se eu fizer isso com essa tag p, ela ainda está fazendo o mesmo. Ele se abrirá e preenchimento o empurrará de dentro da tag p. E a margem vai afastar a parte externa da tag p do próximo elemento. Vai parecer o mesmo, o que é isso, então se eu arrastar isso para cima, eu ganho algum espaço. Tudo bem. Faça isso. Se eu usar acolchoamento, arraste-o para baixo. É estranho, certo? Você o arrasta para cima e afoga o acolchoamento interno. Você pode ver nessas caixas a visão que está do lado de fora. Mas o que você pode ver é realmente a mesma coisa? se eu clicar, ele tem a mesma quantidade de espaço eu uso margem ou preenchimento, então realmente não importa aqui ou em uma imagem, mas algumas coisas funcionam assim. Eu quero que você tenha algum espaço no topo, ok? Ou algum acolchoamento no interior. Você entendeu a ideia. Vamos fazer isso mais algumas vezes aqui. Mas neste caso, se você está procurando uma função, ok, é melhor neste caso usar margens do que preenchimento porque você pode ver essa caixa está até aqui. Não há nada realmente errado com isso. Vou me lembrar de Option ou Alt, clique nele. É melhor meio que afastá-lo com margem. Portanto, a tag p é separada dessa parte aqui. Há uma lacuna no meio. tarde, faz mais sentido quando tornamos as coisas clicáveis. Se eu quiser que isso seja clicável, não quero que talvez tudo isso seja clicável também. Eu só quero que a tag p seja clicável. Aqui vamos nós. Então eu vou para O que eu fiz? Vou desfazer isso do que estou fazendo. Então, seu Command Z ou Control Z em um PC. E eu tenho alguma margem, nesse caso, na parte superior da minha imagem. Eu adicionei uma classe chamada image hero , examinei uma imagem e é incrível. Podemos acessar as configurações clicando aqui ou com a opção selecionada indo até aqui. O mesmo, o mesmo. Isso foi algo extra. Tudo bem, importação de imagens para o fluxo de trabalho. 12. Como sobrecarregar texto no fluxo de imagem: Olá a todos. Neste vídeo, vou mostrar como adicionar uma imagem de fundo que meio que preencha para que os textos possam ficar por cima. Também mostrarei como escurecer a imagem para que você possa ter textos legíveis na parte superior. Tudo bem, vamos embora. Tudo bem, para adicionar a imagem de fundo, você precisa primeiro escolher uma imagem de fundo. Ok, então, novamente, se você quiser uma imagem gratuita para seu plano de fundo, para o clube em particular que você está construindo. Acesse unsplash.com, digite e encontre algo. É melhor se tiver um fundo escuro. Nossa, não precisa ser. Se você quiser ter um fundo claro como esse, provavelmente precisará ter um texto escuro nele. E eu procurei algo para mim que tivesse um fundo escuro, como se isso fosse bom porque o texto aparecerá bem nele. Para adicionar sua imagem de fundo, é melhor adicioná-la primeiro aos ativos, ok, então vou pegar a guia Ativos aqui. E você clica no upload e carrega ou faz, eu encontro. E na imagem dois aqui, vou apenas arrastá-la. Ele vai se carregar lá em cima. É um arquivo muito grande. Eu vou te mostrar como diminuí-los mais tarde, mas um arquivo grande e bonito. E o que vamos fazer é adicionar o gráfico de fundo. Observe que, como sua própria unidade, não é como uma imagem que colocamos por trás de tudo, como em outros programas de design. O que fazemos é que esta seção aqui é uma pequena seção útil que chamamos de herói. Vamos dizer que você tem um histórico, nós já fizemos um histórico antes. Olhe para baixo, aqui está uma cor de fundo cinza. Na verdade, o que eu quero é que você possa ver que diz imagem e gradiente. Então, mais aqui, plano de fundo, eu quero adicionar nossa imagem, o que é legal. Qual gradiente? Ok, se você quiser fazer isso e onde diz imagens, ele escolhe a imagem e eu clico nela. Isso abre o painel de ativos e você tem que dizer isso, por favor. Você vai esperar um segundo e vai ser enorme. O seu pode ser pequeno, depende do tamanho. Ok, então, para começar pensando no costume, ok. que significa que, na verdade, é a maior largura que eu baixei. É enorme. O que você provavelmente quer é uma capa. Há um personalizado que você pode digitar em qualquer tamanho antigo. Você pode dizer que eu quero que tenha 30 pixels por 30 pixels. Você não poderia fazer isso. No entanto, é muito comum cobrir o que a cor faz é na verdade, esticar a imagem para caber em qualquer tamanho da seção. Se eu decidir isso, vou adicionar duas tags P, que dizem que se eu copiar essa tag p pelo Comando C em um Mac, controlar C em um PC e depois colar o comando ou controle V que fiz extra. Mas esse plano de fundo continua, eu sou maior. Então, eu vou mostrar mais. E eu colo novamente porque ele continua preenchendo o plano de fundo. Cobre isso. Não consigo ver nenhum desse lado da imagem agora, o que é um pouco chato que você pode sentir. A parte central desse design é esse lindo rio. Eu quero que fique no meio e você possa fazer algumas mudanças nele. Portanto, lembre-se da seção mais pesada selecionada porque é aí que o plano de fundo é aplicado. E, para ouvir o fundo, vou clicar na minha imagem. E você tem algumas opções. Então você pode dizer, você pode ver a posição dizendo, eu vou começar no canto superior esquerdo e me espalhar, você pode dizer que, na verdade, só cresceu do meio. Então, quando ele for redimensionado, ele terá o centro da imagem no meio. Vamos deletar isso. Agora, um pouco. A parte inferior ficou um pouco mais alta que a parte superior das laterais, que cartilagem. Então esse é o tipo de troca e você diria, ei, eu quero que seja perfeito em pixels. Essa imagem é perfeita. Sua foto do produto, ele precisa funcionar perfeitamente. Agora, o problema de ser assim para web design é a quantidade de dispositivos nos quais você precisa mostrá-lo. Design responsivo é um termo usado para exibição no desktop. E ela comprou esse aqui. Qual é a aparência disso em um tablet? É um tamanho totalmente diferente. O formato é diferente, então o conteúdo é redimensionado e reajustado para se adaptar a esse tamanho. E a imagem também. Portanto, se você o obtiver perfeito e um desktop, ele não ficará perfeito. No tablet. Você não conseguirá ver cada pixel e emoldurá-lo perfeitamente. Ao contrário do design de impressão, onde você pode ser realmente perfeito. Você precisa ser, você precisa ter 90% de bom design para web , infelizmente. Então, desça até aqui, mostra um pouquinho disso. Mostrarei como corrigir todos esses diferentes pontos de interrupção à medida que avançamos. Mas é apenas algo com que se ter cuidado quando você está projetando coisas. E, especialmente, as capas de imagens de fundo são boas porque se adaptam todos esses diferentes tamanhos de dispositivos foram projetadas apenas para um desktop genérico. Você viu quantos laptops telas e telas grandes existem por aí. Há tantos que seu site precisa ser responsivo a todos eles. Então, vamos clicar em nossa seção de heróis novamente e ver algumas outras coisas. Antes de irmos, vou clicar na minha imagem novamente. Portanto, a restrição de capa é mais como se mostrasse a imagem completamente, a rocha abaixo aqui embaixo. Ele o espremerá no tempero fornecido, se eu fizer no celular agora, ele se espremerá e depois o ladrilhará. Eu não o uso muito. OK. Se você não gosta do ladrilho, você pode desligá-lo de forma tão restrita, para que caiba em tudo na janela e você pode dizer que, na verdade, eu quero que não seja ladrilhado, ladrilho para sempre. Você pode intitulá-lo para a esquerda e para a direita, para cima e para baixo , sem ladrilhos, mas não é o que eu quero. Eu quero que cubra. Obrigada. Capa. A próxima coisa que eu quero fazer é escurecer no momento em que está um pouco claro. Você pode escurecer suas imagens com CSS com esses estilos. Você pode ir ao Photoshop, Figma ou XD ou ilustrar o que você está usando para criar o Canva, seja ele qual for, o Microsoft Paint. Definitivamente, você não pode se esquivar nele e Microsoft Paint, mas precisamos escurecê-lo. Então, há um pequeno truque que você pode fazer. Eu vou te mostrar que temos uma imagem em nosso plano de fundo. Na verdade, você pode ter mais de uma coisa em segundo plano. Então, no momento, eu tenho uma imagem de fundo, mas vamos ter outra coisa. É por isso que há uma vantagem. Você pode dizer que não quero adicionar ninguém, mas você quer adicionar, quero adicionar uma imagem porque já tenho uma dessas. Não é um gradiente ou um gradiente linear, não é radial. Eu quero esse. Eu quero uma cor sólida, por favor. OK. E essa cor sólida vai clicar nela. E não tenho certeza se essa visita ao quarto da última vez que fiz isso ou se essa é a padrão. Mas de qualquer forma, eu quero escolher uma cor escura. Pode ser um preto colorido. O que eu vou fazer é arrastá-lo direto para o canto aqui, ok, zeros pretos 00000 é a cor CSS para preto. Se, se, se, se fosse branco, lembre-se. E o que podemos fazer é usar esse chamado Alpha. No momento, é 50%. Essa é a transparência do controle deslizante. Nikola Alpha, web design para ser chique. Mas sabemos que é opacidade ou transparência, ok, você pode decidir como eu escolho versus quão transparente é. Então, vou encontrar algo em que eu possa ler meu texto porque queremos um bom contraste entre o texto e o plano de fundo. Tudo bem, isso é bom o suficiente para mim. Vou clicar em desligar. Se você estiver tipo, Isso não funcionou para mim, o que pode ter acontecido é que eu vou clicar na minha seção novamente. É possível ver que há realmente uma ordem de camadas aqui. O seu pode estar embaixo , pode estar no topo. Você quer que ele fique no topo, na verdade, com um pouco de transparência. E a imagem abaixo, você diz, bem, uma última coisa que eu anotei aqui para mostrar é que estou usando o comando undo Z. Fui direto para os atalhos. Aqui está uma forma manual. Olha, desfaz, refaz. Se você fechar o fluxo de trabalho e voltar a ele, essas ruínas serão destruídas. Você pode desfazer e refazer usando os botões. Tudo bem, é isso. Para o próximo vídeo. 13. Botões com uma cor pairada no Webflow: Olá a todos. Neste vídeo, vamos ver como adicionar um botão e colocá-lo em algum lugar também adicionará essa cor de foco aqui, além de algumas coisas relacionadas a um botão. Se você veio aqui apenas pela cor de sobreposição, selecione-a. E está aqui. Este pequeno menu suspenso. Passe o mouse e estilize isso, escolha um plano de fundo, cor de fundo diferente, e você adicionará o mouse. Eu sei o título do vídeo, Promises rollover color e comprei. Acabei fazendo isso cerca de cinco minutos. Então aí está. Esse é o código de trapaça para o resto de nós que quer aprender tudo sobre botões. Vamos continuar. Tudo bem, adicionando um botão, fácil. Vá até Ed. E aqui embaixo, há um botão chamado abaixo do básico. E clique em segurar e arraste. E não vai ficar por baixo. Ele vai querer ir ao site de uma imagem. Ele ficará abaixo desse texto por meio de tags de parágrafo. Mas vamos ver por que eu vou atrás desse botão. Você verá no meu painel de navegação aqui. Lembre-se de que, se você não travou, vá para o navegador, adesivo até a borda, super prático. Você pode ver que ele está nesta caixa de seção e é o que é chamado irmão porque está com seus outros irmãos. Ele está todos entre esses caras que estão nesta seção. Ele é a necessidade dos pais dos filhos e também dos irmãos desses caras. De qualquer forma, alguma linguagem existe para você. Mas ele não está embaixo. Por que está embaixo? É porque essa imagem está fazendo algo um pouco estranho. Essa tag de acerto aqui, temos um texto de parágrafo. Ok, você pode ver quando eu passo o mouse sobre ela, você pode ver que Trisha está ligada para o infinito, ok? É chamado de elemento em nível de bloco. E o que acontece é que, a menos que você diga que é uma largura, ela vai para 0 tanto quanto eu posso até a idade. mesmo acontece com o texto do parágrafo: estou indo até aqui e estou preenchendo. Ninguém mais pode estar aqui. Esse é o padrão para isso. Uma imagem que você pode ver aqui, ele não está correndo para as bordas. Ele está dizendo, estou aqui. Ele é o que chamamos de nível de bloco embutido , em linha, altere-os. Então aqui esse sujeito está essa opção aqui. Então, abordaremos o layout com mais detalhes à medida que avançamos, mas vamos fazer isso agora. Então, com ele selecionado, estou no meu estilo. Vou para esta primeira opção aqui, diz Layout. O cenário de deslocamento está configurado para algo chamado em linha. Na fila, você só quer dizer que ele está na fila. Esse cara também está na fila. Consegue ver que ele está na fila? Vamos ver a diferença entre esse tipo de coisa. Ele é exibido e está configurado para bloquear um e ele preencherá, você pode até ver. Obrigada. Mas à tona diz que ele preencherá toda a largura disponível. Ou é esse cara? Ele não vai. Ele poderia empilhar um ao lado do outro. Então, os botões são muito bons quando estão alinhados. Porque se eu quiser muitos botões como neste navegador e na parte superior que ainda não temos. Isso é muito bom. E, como imagem, às vezes você quer imagens empilhadas uma ao lado da outra. Mas neste caso, não queremos dizer você, meu amigo realmente foi a este aqui. Olha isso. Ele diz: Ninguém pode estar ao meu lado, nem um pouco amigável. O botão, porém, é pressionado e apertado. Tudo bem. Então eu vou abotoar um pouco sobre ele. Vamos fazer algumas mudanças. Então, esse será chamado de detalhes do evento. Ok, vamos dar uma olhada em alguns estilos para que você possa selecioná-los todos aqui. Eu posso fazer tigelas e outras coisas com isso. E o que eu quero fazer é, com ele selecionado, vou mostrar a vocês uma topografia avançada. Topografia. Tem um aqui. Diz que vamos digitar mais opções de tipo prontas? Tem um aqui que diz “fazer bonés”. Não sei por que isso te levou até lá. De qualquer forma. Nós estivemos lá. Quero dizer, basta digitar em maiúsculas. Economize algum tempo. Tudo bem, vamos estilizá-lo. Agora. O que acontecerá se eu for e fizer isso? Bem, na verdade, eu já o estilizei. Eu não sabia disso. Eu fiz tudo em maiúsculas. O que aconteceu? Você viu que um estilo foi criado chamado botão. Eu não consegui. Não estava lá quando eu o arrastei pela primeira vez. Veja isso. Se eu arrastar um botão agora sozinho, você verá que ele não tem nenhuma classe aplicada. Ok, mas quando eu adicionei esse estilo, fingindo fazer isso de propósito, mas esquecendo de nomeá-lo porque todos nós fazemos isso, criei essa coisa chamada botão. E isso pode ser confuso quando você é novo e pensa, oh, isso é algo já feito porque é uma nota especial, você fez isso por acidente. Então, vamos chamar esse botão e vamos chamar esse aqui. Ok, só porque é uma caixa de herança, vou fazer alguns estilos que não vou usar em nenhum outro lugar do site, apenas nesta caixa de heróis. É por isso que eu o chamo de herói dos botões. Você pode acabar usando a navegação por botões ou rodapé do botão, botão Página de contato. Ok, então nós temos esse encaixe. E eu vou fazer um pouco de estilo. Vou escolher uma cor. Então, em planos de fundo para esse botão, vou escolher apenas um verde do meu design. Você pode escolher as cores que quiser. Ok, e o que mais eu quero fazer? Vou escolher bem algumas áreas de topografia. Vamos usar as novas áreas. Open Sans é uma palavra muito bonita, bonita e muito forte para isso. É uma fonte de cópia corporal muito sensata, muito legível, gratuita de usar, e eu gosto dela, mas vou usar o tamanho em negrito. Sim, 14 pixels parecem bons para mim. A única outra coisa que eu quero fazer é adicionar cantos arredondados. Então, agora, neste painel aqui, quero dar uma pequena dica sobre como usar o painel de estilos. É grande e confuso. Não é grande e confuso. Há muitas coisas parecidas com: onde está tudo o que você pode rolar para baixo e, eventualmente, encontrá-lo. O que eu gosto de fazer, talvez você não goste, é que você pode ver essas pequenas flechas aqui. Na verdade, você pode simplesmente clicar neles para torná-los menores e abrir o que você deseja. Ok, então eu quero fazer o que? As bordas são excelentes, basta abri-las, trabalhar nela, fechá-la novamente. Parece um pouco mais. Liberte-me. Outro truque legal é com eles. Você pode manter pressionada a tecla Option em um Mac, a tecla alt em um PC, mantê-la pressionada e clicar em qualquer uma delas, que todas elas abram e mantenham pressionada a mesma tecla. Todos eles fecham. Esses pequenos pontos azuis que mostram que em algum lugar aqui você fez uma mudança. Você não fez nenhuma alteração na fronteira. Então, não há nada acontecendo. Então botão Hero, Nothing. Você não mudou nada disso. Você fez alguma topografia. Você se lembra o que era? Está certo. Fizemos tudo em maiúsculas e fizemos alguns antecedentes. Então, se eu fizer fronteiras agora e disser que realmente quero que esse raio de fronteira seja algo. Estou arrastando isso aqui. Estou assistindo isso aqui. OK. Escolhendo algo e você vai. Agora eu giro para baixo. Você pode ver, oh, é um ponto azul. Ponto significa que eu mudei alguma coisa, farei n, mas mais tarde significa que outra coisa está se aplicando a ela. Não é algo que você tenha feito diretamente com ele, o que é importante, mas vamos chegar a isso. Eu sei que você vai perguntar. Eu tenho cantos arredondados. Vamos dar uma olhada no preenchimento e na margem. Na verdade, não, vamos fazer isso funcionar. Não arredondamos cantos, mas não criamos esse link em nenhum lugar. Portanto, um botão tem algumas coisas padrão. Agora, como antes das configurações desta engrenagem aqui ou com ela selecionada, podemos ir até a carga aqui. Isso não importa. Muitas opções, apenas algumas opções. Vamos usar apenas alguns machucados por padrão aqui, vamos usar este primeiro. Então, quando esse botão é clicado, ele vai para o URL. Você pode escolher qualquer URL que quiser. Ok, e ele vai abrir e agora o estojo em outra aba, ok? Isso significa apenas que, quando o botão for clicado, ele deixará o site aberto, abrirá uma nova guia na parte superior aqui no navegador e acessará ela. Portanto, os dois estão abertos se for um link interno para outra página do seu site ou se você quiser substituí-lo, você pode desativar essa diferença. Ele mudará o site para onde você perguntar. Ok, vamos fazer isso e fazer um teste, abrir uma nova aba e fechá-la. Eu vou para a minha prévia. De qualquer forma, não fizemos muitas pré-visualizações , porque é bonito, é muito bom para mostrar exatamente como será em um navegador sem você pré-visualizar. Pré-visualize, fecha todos os seus painéis e se livra de tudo isso , como linhas azuis estranhas, que essas estranhas linhas azuis desapareceram e veja isso, eu posso clicar nela e mágica, eu tenho uma incrível site. Ok, então vamos voltar aqui, desligar o globo ocular. Outra coisa que eu quero mostrar para você fazer com o botão é, na verdade, passar por essas outras. Então você entra em um URL. Isso será direcionado para um site externo como Ei, confira este ótimo tutorial do Webflow que você deve conferir por essa soma. Mas aqui, cara, você pode criar um link para isso. E outra é que você pode criar um link nesta página. Só temos uma página. Então, se você inserir um link para uma página neste site, Oh, eu só posso ir para casa porque temos apenas uma página. Você pode criar links para uma seção. Então, vamos fazer isso daqui a pouco. nossa página única, adicionaremos navegação para percorrer as diferentes seções. Ainda não funciona muito bem, mas vamos fazer isso. Você pode, ao clicar nesse botão, acessar o e-mail de alguém. OK. Ou quando for clicado em um dispositivo móvel, comece a tocar. Então você pode tê-lo como um número de colas. Isso só funciona bem. Não, funciona no meu navegador. Se eu colocá-lo em um número de telefone aqui e clicar nele, ele tentará iniciar o Google Voice ou algo assim. Mas em um celular, ele clica e meio que pré-carrega o telefone. Então, essas são essas opções. No momento, porém, vamos usar nosso URL NEO só porque é um espaço reservado. Até mais tarde, começaremos a pular para nossas seções do nosso lado. Então, esses são os diferentes links. E a outra coisa que talvez queiramos fazer é mudar o mouse, porque no momento você quer mudar a cor do mouse. Então, vamos dar uma olhada nisso. Então, com ele selecionado, vou levá-lo a um lugar secreto. Então, vamos usar meus estilos. Então, no momento em que olhamos o botão aqui, quero estilizar o mouse. Então, quando você passa o mouse sobre ele, funciona. Está escondido aqui com o botão selecionado. Webflow sabe que, ei, há algumas coisas especiais com botões que colocaríamos aqui no momento. Como vai ficar o chão em algum lugar aqui? Diz que os botões de altura têm coisas especiais. Aqui estão eles. Aí está o mouse, pressionado, focado, visitado. Você pode ver que foi adicionada uma classe especial, Verde significa Figma, desculpe, Figma. fluxo de largura já sabe do que você está falando. Um pouco como um pré-escrito. Já existe uma classe chamada hover. Você não precisava dar um nome a ele e diz, ei, essas são coisas especiais que os botões têm, nós os criamos. Você pode simplesmente escolhê-los no menu suspenso do KU com ele. Agora, você pode dizer que eu quero que esse estilo de fundo mude para outra coisa. Escolha outra cor, ok? Porque lá embaixo e lá vamos nós. Vamos dar uma prévia. Ok, se você clicar, ele meio que será uma prévia sem entrar no modo de visualização completa. Alguns deles fazem isso. Vamos pairar. Somos menos superestrelas da CSA. E então temos um foco. Qualquer outra coisa que eu queira mostrar a você um k. Há se eu selecioná-lo, se eu quiser voltar a passar o mouse porque eu quero estilizá-lo, eu tenho que voltar aqui porque o padrão é. Depois de clicar, cliquei em desligar, clicar novamente e você pode ver que foi para o botão aqui, mas para onde foi? Se você quiser mudar essa cor novamente, passe o mouse e as narrativas. É todo tipo de backup carregado e você pode mudar esse. Você pode decidir fazer um dos outros. Os outros não, eles não funcionaram. Mas algo como pressionado é quando alguém clica nele, o que acontece, mas ninguém vê o clique. Essa é minha opinião. De qualquer forma, vamos torná-lo brilhante e vermelho, amarelo brilhante, amarelo brilhante. Então, vamos dar uma olhada. Você precisa ir ao modo de visualização para verificar se pressionou. Veja isso. Ao clicar aqui, você vai voar atrás de outra página. Mas você viu isso? Você pode, é muito rápido, mas você pode ver quando amarelo. Então, você pode pressionar para sentir que o foco é outra coisa que o Google tem a ver com navegar em nosso site e acessibilidade e coisas ruins. Fora do escopo desta . Vamos dar uma olhada. O que mais visitamos seu foco? Se você já acessou esse link antes, as pessoas realmente não o usam mais. Ele mudará de cor se alguém clicar nele uma vez, lembre-se desses links todos azuis, eles ficam roxos. Isso porque você já esteve lá antes, não é realmente usado como botão na minha opinião. Tudo bem, legal. E secretamente você fez sua primeira aula combinada, sobre a qual falaremos daqui a pouco. Mas sim, esse é um botão que está estilizando isso. Oh, a outra coisa é que acabei de verificar minhas anotações lá. Passe o mouse. Passe o mouse sobre como trabalhar em um telefone. Não é. Você não pode passar o mouse sobre o telefone. Você pode passar o dedo sobre a tela do celular e ela muda de cor. Então, a única coisa do desktop. Então, sim, oh, a outra coisa precisamos fazer é preencher e marcar enquanto estamos aqui. Então, selecionei meus botões, posso ver esse estilo aqui. Vou para o meu espaçamento e quero preenchimento ou margem? Você pensa agora antes que eu diga que qualquer coisa está dobrada como um pedículo. Se você escolheu o acolchoamento, você estava errado. Olha, clique em segurar. Então eu posso colocar o acolchoamento lá e ele o move para baixo. Mas, obviamente, o pagamento está no interior da caixa. E margem. Clique, arraste-o para cima. Assim. Aí está você. Tudo bem, era um para-choque. Aprendemos que os botões pairam. Mostramos a você as diferentes maneiras de fazer isso. Eu mostrei como fechá-los, Option ou Alt para abrir todos eles. Clique em um deles. Visitamos o Comic Sans Appreciation Club e encontramos os ingredientes secretos desses botões aqui. Não há apenas botões. Encontramos coisas aqui. Você pode ver outros elementos deste curso e dentro do fluxo de trabalho que tenham essa lista suspensa para mostrar coisas relacionadas a esse elemento específico. Tudo bem, legal. Então, uma coisa é que, se você estiver acompanhando, vou definir um projeto de classe para você enviar e um pouco. E basicamente vai garantir que você esteja onde eu estou. Se você está acompanhando e apenas assistindo, não sei, é muito bom praticar, mas também queremos fazer o projeto da turma. Na maioria das vezes, você estará pronto e pronto para enviar. Sim, faça os exercícios enquanto estamos juntos. É bom. É uma boa maneira de aprender e fará com que o projeto da turma apenas uma pequena coisa a acrescentar de qualquer maneira, bem, ao próximo vídeo. 14. Como criar nosso próprio naval personalizado no Webflow: Olá a todos. Vamos criar essa navegação na parte superior aqui. Vamos construí-lo juntos para entendermos alguns dos princípios. Você notará que eu não acabei estilizando muito esses botões. Por quê? Porque, na verdade, vamos distorcer isso no final. Então faça isso, acompanhe comigo, construa comigo, mas não coloque muito estilo nisso. Não gaste meia hora acertando o Kooning e o pivô do tamanho da fonte porque vamos dobrá-lo. Precisamos saber como essa coisa é criada de uma forma simples para que, quando adicionarmos a mais fácil do Webflow, possamos ajustá-la sabendo que o que estamos fazendo é cobrir coisas como flutuação, elementos em linha e em bloco. Então, vamos começar. Ok, para fazer nosso cardápio, vamos colocar primeiro uma seção, porque temos uma seção de heróis, temos nossa seção chata de pequenos patrocinadores. Vamos adicionar outro para nossa seção de navegação e arrastá-lo. Lembre-se de que posso arrastá-lo na página ou arrastá-lo aqui. OK. Aqui em cima, meio que entre no lugar certo, provavelmente não dentro do contêiner. Então eu perdi isso. Você pode ajustar isso depois. Então, vejo minha seção aqui. Na verdade, eu quero entrar no contêiner logo acima do herói. Olhe para nós. Tudo bem, vou dar um nome a ele. Ok, embora eu me lembre, ok, você vai chamar isso de uma seção. Esse será chamado de meu navegador, Enter no teclado. Porque vamos recriar isso na minha maquete aqui. Talvez você possa escolher suas próprias cores em estilos de urina, em suas próprias fontes. Então, vamos criar essa cor de fundo, comece com ela. Então lembre-se de que acabei com a Internet. Talvez seja Option ou Alt em um PC, opção em um Mac. Eu vou dizer que com isso selecionado, eu tenho minha navegação de seleção, o fundo será algum tipo de cinza escuro. Excelente. Vamos adicionar uma imagem para o logotipo. Então, vamos em frente. Vamos até a imagem, ok, e arrastá-la para dentro. Perfeito. Agora, em termos do logotipo aqui, vou clicar em Escolher imagem. E vamos fazer o upload de um. Agora, eu tenho um que vou usar e tenho um genérico que você pode usar. Então, no site do evento do clube, acesse os ícones. E eu tenho, vou usar o clique no ícone. Ok, parece que sim. Você pode usar o Go para obter seu próprio ícone, experimentar algo como icon finder.com e procurar os gratuitos lá. Você pode encontrar seu próprio logotipo que você pode usar no momento. Poderíamos desenhar um no Illustrator. Vamos descobrir onde x, t ou apenas usar um desses dois ícones genéricos do clube. Outro ícone genérico do clube no momento, basta usar o de 64 pixels , pequeno. Mas vou usar esse caiaque visual porque é o que estou construindo. Entramos com o logotipo do Kayak. Devo ter mudado a cor. Em algum lugar ao longo da linha. Nossas notas devem ser pagas agora, em termos de tamanho. Ok, é estranho, mas às vezes você não pode arrastá-lo e listá-lo. Isso está fechado. Isso parece ser intermitente. E o que faremos é adicionar uma classe a essa imagem. Então, vou dizer que essa é a minha imagem. Vou usar letra maiúscula I, imagem, logotipo. E eu vou dizer que isso tem alguns, o que o preenchimento e a margem não definem o espaçamento. Fará a mesma coisa. Ok, então o preenchimento e margem terão a mesma aparência. Estou desfazendo. Ok, então eu vou usar a margem. Tudo bem, mais ou menos. Desculpe por isso. Eu gostaria de adicionar meus pequenos botões aqui. Então, vamos adicionar, vamos adicionar alguns botões. Vamos pegar um botão e colocá-lo lá. Você está tipo, como a trouxemos para cá? Ok, então a maneira de conseguir isso aqui é algo chamado flutuador. O botão selecionado. Eu vou dizer que você, em Posição, tem essa coisa chamada flutuador. Eu vou flutuá-lo para a direita. Ok, como escrever uma linha, mas para objetos, ela vai flutuá-lo para a direita. O que aconteceu? Eu adicionei um estilo a esse botão e esqueci de adicionar uma aula de propósito. Eu esqueci. O que podemos fazer? Ele já criou esse para nós. Está tudo bem. Eu posso viver com isso. Vou ligar para o botão uma vez para uma empresa chamada Space Nav. Agora, quais foram meus tiques e este, vou ter eventos passados, patrocinar eventos. Então esse aqui é o meu grande. Eventos. Vamos até Vince. Eu quero outro. O que podemos fazer é simplesmente copiar e colar. Então, eu o selecionei. Comande C V em um Mac, Controle C V em um PC. Na verdade, você pode manter pressionada a tecla Option ou a tecla Alt em um PC e simplesmente arrastá-las para fora. Na verdade, faz uma duplicata de dois, é um pouco chique. Então, com três botões, esse aqui, não me lembro, era patrocinador. Patrocinadores. Novamente, esse foi um evento passado. Ele provavelmente tem um nome muito próximo. De qualquer forma, estamos construindo nossa nav. Então, vamos visualizá-lo à medida que avançamos. Então dê uma olhada. Ok, ainda não vai a lugar nenhum porque eu não tenho essas seções, mas vou. Sim, vamos fazer o espaçamento sobre isso. É um globo ocular de tirar o olho. Então, eu vou dizer o segundo em um deles. E porque é aplicado, está em todos eles porque eu copiei e colei botão, botão navegação, navegação, botão, zona de navegação, todas essas coisas. Se eu tivesse um botão agora, um novo eu tinha lá. Você pode ver que não é aplicada a mesma coisa. E você gosta, na verdade, ei, se eu for até aqui e aplicar o botão de navegação? Então você pode ver aqui, se eu clicasse aqui, eu posso digitar o botão nav e funcionaria. Eu tenho que ser exatamente o mesmo. Mas agora, sim, funciona. Mas é mais fácil, basta clicar nele e clicar aqui e diz, ei, essas classes existentes, Dan, você quer usar uma dessas? Como eu faço. Eu quero usar a navegação por botões. E se você tem 1.000 deles, o que você pode fazer no final, você pode começar a digitá-los, mas a imagem e você acabou mostrar é o logotipo da sua imagem imaterial. Essa é a convenção de nomenclatura que eu gosto porque facilita. Mas eu tenho um botão. Eu só tenho dois deles, mas pelo menos isso reduz para esses dois. Bom. Ok, então eu vou me livrar dele. Eu vou estilizar esses caras , só precisam estilizar um. Então eu os selecionei, não importa qual. Ok, vou entrar no meu espaçamento e quero empurrá-lo para baixo do ROI, empurrá-lo para baixo do topo e afastá-lo um do outro. Ok, então como faço isso? É margem ou preenchimento? Basta arrastar os dois. Então? Vai haver um pouco disso. Eu quero alguma margem nas laterais. Agora, se você quiser mais espaço dentro do botão, agora digamos que você veja que meu botão aqui tem um pouco de espaço negativo. Este está bem próximo, então eu clico, não importa em qual deles você clica. Agora isso vai ser a Patagônia? Vamos dar um tapinha para Dan, vá lá. Consegue ver isso? O cinza, tem 15. Você não adicionou isso. Está acinzentado porque é o padrão. Isso é o que Webflow, web e Jim terão adicionado. Os que são azuis são os que fizemos. Vou arrastar isso para cima do lado e 32 para este lado também. Agora, um pequeno truque para estilizar essas coisas vai desfazer, desfazer novamente. Ele volta aos padrões. Se você mantiver pressionada a tecla Option em um Mac e arrastar um lado, você pode ver as duas aparecerem porque estão fazendo à esquerda e à direita ao mesmo tempo. Então, essa é a opção em um Mac, alternativa em um PC. mesmo para a parte superior e inferior. Qualquer um que tenha uma parte superior e inferior. Se estiver certo, você pode fazer isso. Depende de você. Você pressiona, pressiona tecla de comando, a tecla Shift, a tecla Alt Shift. Eu sempre consigo me lembrar. Você mantém pressionada a tecla Shift. Ele faz todas elas ao mesmo tempo. Todos eles ao mesmo tempo. Ok, então aqui está um pouco a Opção Alt, manter pressionada a tecla Shift, um pouco de teclado impressionante. Mas de qualquer forma, estamos lá. Agora. Eu deveria examiná-los completamente. Na verdade, há mais uma coisa antes de seguirmos em frente, porque vamos ter sido isso, lembra? Então, eu quero adicionar algum texto. Então, eu quero adicionar algum texto aqui. Eu quero te mostrar como você o constrói. Você já sabe disso. Eu falei no começo, mas quero mostrar como ele foi construído conta própria, de modo que, quando você recebe o, ele foi chamado de elemento que é um componente pronto para ser arrastado e como para ajustá-lo. Então, vamos adicionar um pouco de texto e isso vai ser interessante. Adicionamos cabeçalhos e parágrafos que faziam sentido antes. Eu quero um logotipo, não há opção de marcação de logotipo semelhante. Se você não tiver certeza, se for, se não for nenhum desses, There's this one takes block é um bloco genérico de texto. Isso realmente não significa nada. Não é, o navegador não acha que está batendo algo especial nem tudo. Ei, esse é o artigo e o parágrafo muito especiais. Bem, a principal coragem disso. Ok, se são apenas carrapatos de apoio e você não consegue pensar em como chamá-los. Não é nada disso para arrastar isso e apenas para um bloco de texto sem estilo realmente básico. E vamos digitar sua visão do seu resumo. E como se chamava a minha? Eu coloquei o meu em maiúsculas. Querida. Clube King. Está colocando o seu. O que fazemos aqui? Pense um pouco sobre isso, puxa como, o que você faria? Em que você começaria a clicar? Quais termos borbulham à mente. Nós o analisamos antes e tinha a ver com o layout. Então eu vou clicar aqui e ele é o nome, escondido no bloco de texto do nome. Bloquear significa que vai até o fim, abre espaço para si mesmo. Ninguém mais pode estar na mesma linha que eles. Mas podemos dizer, Ei amigo, sob o layout, eu não quero que você seja um bloco, eu quero que você seja um bloco embutido. Entre na fila. Ok? E ele recebeu uma classe porque eu adicionei um estilo que é exibição de layout, bloco embutido. Ei Kate, eu não quero isso. O que eu quero é chamar essa mensagem de texto. Vou chamá-lo de logotipo. E eu vou dizer que você está usando o lugar certo, trabalho feito. Eu só vou estilizá-los agora. Vou pegar o espaçamento. Vou adicionar alguma margem ao lado da maneira errada. Ok, vou ver minha tipografia. Ok? E eu vou para o que estou usando? Não me lembro do Roboto, acho que não, estamos usando o Open Sans ou não é? Aí está. OK. Vou usar o negrito. Eu vou usar a cor branca. Vou fazer a coisa vermelha um pouco, mas esse também é o tamanho certo, com base na minha maquete, mas podemos mudar isso. Legal. Então, às vezes o padrão está certo, ok, como esta imagem aqui, meio que, bem, na verdade, essa caixa de texto aqui está configurada para exibir o bloco e precisávamos de qualquer um empurrado para baixo do próximo cara e então queríamos isso. Mas às vezes você pensa: Não, nós não queremos isso. Nós tínhamos a imagem. Lembre-se de que estava na fila, mas não estava onde queríamos. Então você empurra para baixo, limpa um espaço, empurra esse cara para baixo. Tudo bem, todo esse trabalho. E você me disse no começo que vamos excluí-lo. Por quê? Bem, é porque você não precisa, mas estamos trabalhando em um desktop e acabamos de sugerir esses outros monitores diferentes. Mas se eu começar a mexer no celular e não couber perfeitamente e você quiser o pequeno sanduíche de navegação da barra de navegação, as pequenas três linhas nas quais você pode clicar e soltar. Todo mundo adora isso e faz isso funcionar. Há um pouco de JavaScript. São pontos de interrupção. Não é difícil, mas é muito mais fácil deixar o Webflow fazer isso em mim, mesmo sendo um usuário avançado, eu ainda usaria o pré-fabricado no Webflow, mas é muito útil saber como coisas como float e inline-block funcionam primeiro quando você começa a modificá-lo porque você o despeja e fica tipo, eu quero mudar tudo. E tudo desmorona e você não tem ideia do porquê. Então, agora sabemos como algumas das estruturas funcionam. Podemos usar com um pouco de autoridade, podemos usar esse componente de navegação. Então, vamos entrar no negócio e fazer isso. Agora, te vejo lá. Nos vemos no próximo vídeo. 15. Como fazer uma barra de navegação para hambúrgueres para dispositivos móveis no Webflow: Olá a todos. Vamos reconstruir essa navegação na parte superior. Vamos usar o componente incorporado do fluxo de trabalho para tornar tudo muito fácil. Vamos estilizá-lo da maneira que quisermos. E vai fazer uma coisa boa quando começarmos a usar o celular, vai mudar para esse menu de hambúrguer com uma lista suspensa sem que façamos nada. Tudo bem, vamos fazer isso no Webflow. Ele está ignorando o quão ruim parece? Totalmente m. Vamos chegar a isso. Nós vamos. Ok, o que fazemos? Este antigo, poderíamos selecionar nossa seção nav. Podemos dizer que, na verdade, isso me dá uma desculpa para te mostrar isso. Analisamos a exibição, o bloco e o embutido. Olhe para este, diz nenhum, Ok, e clique nele e diga nenhum, e ele desaparece. Ainda está lá no código. Ok, só que o navegador também não consegue mais vê-lo. Portanto, não faz sentido tentar ligá-lo novamente. O que você realmente quer fazer é clicar nisso ou não funciona, você tem que voltar para a exibição que você quer, ok, que agora é um bloco de caixas. Então isso empurra seu amigo para baixo. Tudo bem, então, na verdade, vou excluí-lo, selecionar na navegação por seção e ir embora. Eu preciso de um Eu posso ir até aqui e adicionar a minha barra de navegação ou é minha? E, na verdade, ficará muito bem se eu editar acima do meu, meu herói da seção. Eu tenho que entrar na minha seção aqui. Ok, nunca vai acima da seção aqui. Vai funcionar muito bem. É melhor que isso esteja dentro de uma seção, não 100% essencial, mas o navegador e os mecanismos de pesquisa querem ver suas diferentes seções. E isso significa que podemos navegar com muito mais facilidade. Muito mais fácil. Porque nem uma palavra. Mas você viu aqueles sites em que há um erro que diz voltar ao topo. Você pode clicar no botão e salvar. Vá para a seção em que podemos dizer a seção de navegação. Vá. Então, vamos colocá-lo dentro de uma seção. Então, vamos adicionar uma seção, sua seção. Vou colocá-lo logo acima da minha barra de navegação e depois vou colocar meu navegador. Mas ao lado. Aqui está, nada mudou, exceto que eu tenho esta seção. E a seção que eu vou chamar de seção nav. Você diz: “Ei, mas nós já fizemos isso. E sim, usamos apenas a navegação por seção. Nós poderíamos, se esta é a primeira vez que você está fazendo isso, você vai ter que fazer isso. Mas como nós já fizemos isso, aí está. Mas já existe uma coisa chamada seção que está por vir. Você notará que a seção agora tem uma cor de fundo. Isso não é fazer nada. Por que não está fazendo nada? É porque a barra de navegação tem sua própria cor e substitui porque é mais específica ou exagerada. Ok. Na verdade, é cinza no fundo, mas não podemos vê-lo porque as barras de navegação estão na parte superior. Assim, podemos selecionar nossa barra de navegação e ir para a barra de navegação. Você é completamente transparente, este aqui. Então, eu posso ver minhas seções de navegação ou estamos nos metendo nas ervas daninhas aqui, não é? Estamos aprendendo. Tudo o que podemos é simplesmente estilizar a barra de navegação. Não há nenhuma diferença real aqui porque eu já comecei. Vou deixar minha barra de navegação transparente e minha seção vai trazer minha cor, que é meu cinza escuro. Tudo bem, vamos dar uma olhada no que há de especial nisso. O especial é que há duas grandes coisas especiais. Um, já está pronto. Eu posso colocar meu logotipo aqui. Eu já tenho alguns botões para usar. rede me poupa tempo ao adicionar botões flutuando para a esquerda, flutuando para a direita. E isso também quando eu volto para a versão móvel, eu vejo, esses já são um pouco de JavaScript que muda isso e o altera. Vamos dar uma olhada na prévia que diz que posso clicar nela. Ou esse tipo de coisa é feita para nós. Na verdade, o Css troca isso por esse pequeno ícone. E então um pouco de JavaScript faz esse adorável menu suspenso, mas está tudo pronto. Ok, vou voltar para a área de trabalho e vou desligar minha pré-visualização. Vamos fazer uma pequena desconstrução. Então, temos esse primeiro pedaço chamado apenas de marca. Tudo o que é é um contêiner que eles chamaram de Brand Webflow e o tornaram vinculável. Então, se eu despejar uma imagem aqui, será um desses links links para a página inicial. Muito obrigado, fluxo de trabalho. O que eles também fizeram foi ter um monte de botões. Ok. Então, o botão, o botão, o botão. E nós sabemos como eles os colocaram no lado direito aqui, você é como, eu sei, mãos para cima, você sabe, as costas. O que foi isso? Flutua, certo? Ótimo. Então, vai dizer que você está flutuando dois, ou está em posição? Aí está. Flutue até lá, não está fazendo nenhuma flutuação. Não flutue. Por que não está flutuando, Dan? Você nos prometeu que o carro alegórico funcionaria. O que eles fizeram aqui é tem esse contêiner embrulhando tudo. Então, esses botões suaves. Ok. Isso é o que eu fiz também. Eu me inscrevi para flutuar nesses botões. O que eles fizeram foi apenas para serem mais inteligentes, em vez de fazer isso com todos os três de uma vez com o invólucro, colocamos esse invólucro por fora, ok, e neste caso, isso O carvão é feito usando essa coisa chamada diblock, que é como um invólucro genérico, que fará esta casa em pedaços. Mas para dar uma olhada, vamos voltar aqui. Eles têm essa coisa genérica, eles a chamaram e compraram e eu vi você flutuar com a aparência certa e tudo dentro dela serve. Vamos virar para a direita, eu acho, porque não temos escolha. A barra de navegação voa para a direita, arrastando esses caras para dentro para o passeio. Então, eles são pré-fabricados. Mas podemos entender um pouco como é feito. Podemos criar novos copiando-os e colando-os. Ótimo, ok, eu não preciso deles. A última coisa que eu quero te mostrar é essa marca mais robusta. É um contêiner que tem um link aplicado a ele. Muito obrigado. Fluxo de trabalho E o que isso faz? Eu disse que a engrenagem, por que não está funcionando? Não funciona porque há muita coisa que precisa sair disso que seria enorme. Então, o que eles fazem é que esta é minha suposição que realmente pode estar quebrada. Mas se você ver a engrenagem aqui, eu a selecionei. Há tanta coisa que eles fizeram por esse menu que eles. Não é realmente uma lista suspensa fácil. Então, eles simplesmente não fizeram nada. Você precisa clicar na engrenagem aqui e ver minhas configurações de link. O momento é criar um link para uma URL. O que eu posso fazer agora porque é meu, coloquei meu logotipo lá. Eu vou dizer vá para uma página. Qual página? Eu só tenho uma página inicial. E é bom porque quando eu duplico todo esse site para fazer páginas diferentes, significa que sempre, sempre que você cozinhar o logotipo, ele voltará para a página inicial, o que é bem típico de sites. Tudo bem, eu quero um logotipo lá. Não é particularmente difícil. Já temos um logotipo anterior. Ok. Quaisquer que sejam seus vencedores Então, meu painel de ativos, clique em segurar, arraste-o para dentro, confira. Quando estiver dentro, vou ajustar meu tamanho, o que não funciona quando está aberto em outro momento. Ok. E pronto, então aí está meu pequeno logotipo. Agora vou começar a estilizar coisas. Então é isso. Se você quiser continuar, eu vou basicamente fazer o que já fizemos, ok, no último vídeo. Então, vou passar por isso no texto do meu logotipo, nos meus botões. É por isso que esse vídeo é tão longo quanto um pouco de apenas fazer coisas. Se você não tem mais nada para fazer ou não conseguir acessar o botão Ignorar, você poderá me observar com firmeza. Vamos fazer isso juntos. Então, minha imagem, eu tenho todos os meus estilos. Às vezes você pensa: “ Para onde foram todas essas coisas? Aí está. Eu quero colocar um pouco de enchimento em volta dele. Mas, felizmente, lembre-se de que criei uma imagem de um logotipo da última vez, economizando tempo. O mesmo acontece com esses botões. Mas esses botões são? Eles não são. Posso aplicar esse estilo para eles? Vamos lá, botão. Marinha. Nós podemos totalmente. Não trouxe a cor à tona, mas não adicionamos a cor da última vez. Incrível. Ok, então ainda podemos reutilizar esse botão de navegação mesmo que tenhamos excluído a última navegação. E esse é um ponto importante: se você criar estilos e eles os tiverem usado , eles simplesmente se divertirão. Teremos que limpá-los no final do projeto, mas eles não desaparecem. The Persistent, o que eu quero fazer? Eu quero que este seja verde e, na verdade, quero que o espaçamento seja mais alto. Mais alto. ambos os lados, Haiti em ambos os lados. Na mesma hora. Sim, isso mesmo. Espere um pouco. A tecla Option em um Mac, a tecla alt em um PC. Algo parecido. Quero que minha cor de fundo não seja tipografia. O fundo será esse tipo de cor esverdeada. Você escolhe o seu. Eu quero que o botão seja a chave para ser. Tudo bem. Isso não funcionou. O que eu selecionei, eu escolhi o amigo. Não é o que eu quero neste botão, aquele botão de navegação aqui. Eu quero que a cor da tipografia seja branca. Lá vamos nós. E é isso que eu quero dar uma olhada? Queria ser bonés. Sabemos que podemos fazer isso. Então amarre o trabalho, os pés e levante mais opções de tipos, bonés. Eu quero que também seja coruja, não tenha boas vibrações ou impactos. Impacto: o Comic Sans do Webflow não o usa? Você pode usá-lo. Isso é bom. estamos usando nenhuma área, usamos um Open Sans. Deixe-me ir. Aqui vamos nós. Ok, então agora eu quero fazer é aplicá-lo a todos eles. Então você tem um estilo chamado de navegação por botões. Você tem um estilo chamado nada. Então, é o botão GO. Mas eu tenho um botão U2. Lá vamos nós. Eu quero mudar as cores desses. Isso exigirá uma classe de combinação, que faremos daqui a pouco, mas vamos deixá-los por enquanto. Eu não vou fazer o hover. Vou adicionar os hereges aqui. Então, já fizemos isso antes. Você. Quando digo hereges, quero dizer o texto do logotipo. Então eu vou usar um bloco de texto, nenhum desses outros porque é tipo de texto genérico. E, com sorte, para onde foi? É que não queremos fazer, eu quero isso assim. A marca que tem isso nela. Então, dentro dessa coisa vinculável à marca está a imagem e eu a tenho depois? Ok, o que é meio assustador ou eu coloco depois da imagem? Não tenho certeza. Eu só vou ver como é. Está meio que na marca. Então, está na marca da caixa. Você vê aí, mas está fazendo algo um pouco estranho. Como podemos corrigir isso? Vamos dar uma olhada em nossa posição. Então, vamos dizer que o logotipo não está permitindo que ele jogue bola, ou que o bloco de texto não está fazendo isso nem um ou outro. Tentou acontecer porque acho que tenho certeza de que abaixo ou é do tamanho? Não, não vamos exibir enquanto eu vou ter que rolar até aqui está. Exibição. Não quero ser bloco embutido, quero que seja, não quero ser bloco, bloco embutido. Aí está. Legal. Agora podemos estilizar o logotipo para ter mais preenchimento na lateral ou esse trecho de texto que diz clube de caiaque. E acho que já fizemos estilo. Ele criou um estoque com textblock. E essa é interessante porque criou isso para mim porque eu não era, porque mudei a tela. Então eu disse: Tudo bem, você não fez uma aula. Estou fazendo um para você agora na posição em que o último vídeo realmente fez um. Então, eu quero aplicar isso a ele, mas eu quero me livrar disso. O que eu faço? Ok? Eu quero remover essa classe, ok? Porque eu não quero dois deles. Eu quero o que eu já fiz chamado como se chamava? É chamado de logotipo de texto. Nós já fizemos isso com bloco embutido, não é? Então, excluímos o vinho automático e meio que voltamos um passo atrás. Encontrei o que queremos e ele fez tudo o que precisamos. Dias felizes, legal. Tudo bem, lindo. Ish. Está chegando perto. Eu quero pegar esse e brincar com a margem. Jipe. Em cima, seja a parte superior e a inferior do mesmo. Tudo bem, então isso é bom o suficiente no momento e está chegando. Nós adicionamos navegação. Estávamos aprendendo que os termos estavam chegando: mais web designers, você sabe, termos como bloco de exibição, bloco embutido, flutuante. Extravagante. Tudo bem, chique. Vamos para o próximo vídeo. 16. Vídeo para produção 1 - Suporte para edifícios e seções para eventos: Olá a todos. Bem-vindo ao vídeo de proteção. O que é um vídeo de produção? Bem, é um ponto da aula em que eu realmente preciso preencher alguns dos detalhes aqui para criar um site, mas não estou usando nada novo. Estou usando técnicas existentes que todos conhecemos e apenas colocando-as em prática para fazer coisas repetíveis, vou começar algumas tags, colocar algumas imagens em tags de estilo, colocar algumas imagens. E há muita repetição nesse caso. Não é muita repetição, mas mais de colocar em prática nossas habilidades que conhecemos. Agora, eu poderia fazer isso e não gravar e apenas te surpreender com isso. E algumas pessoas ficariam felizes com isso. E algumas pessoas disseram: “Eu quero saber como ele fez isso, mesmo que sejam as coisas que já fizemos. Então assista a este vídeo se quiser. Isso é o que esses vídeos de produção ou os ignore. Se você tentou ter certeza de que não há novas técnicas aqui, caso você não esteja perdendo se você pular, Ok, então eu não vou ficar com raiva se você pular. Mas meu conselho seria vigiar veja como faço esses problemas com os quais me deparo e como os corrijo. É por isso que esta é um pouco longa, porque fazemos algumas caixas diferentes. Lá vamos nós. Ok. E copie essas duas coisas. Então, sim, vídeo de produção. Siga-me. Ok, então vamos começar. O que vou fazer é ter essa demonstração, essa coisa que estou trabalhando com um exemplo. Então, o que eu vou fazer é que você obviamente pode fazer seus próprios estilos. E o que vou fazer é copiar meu design. Abordaremos como extraí-lo exatamente de alguns outros programas de design que estão errados no momento, apenas fazendo algumas cópias. E eu vou mover o meu para que eu possa ver um pouco dos dois. A única coisa que você pode estar em uma tela menor e você pode pensar, eu não posso usar essa coisa totalmente certa, é por isso que ela volta automaticamente. Se você está tipo, sim, você coloca isso e cobre demais. Sim, desculpe. Você precisa de uma tela maior. Você pode contornar isso indo até aqui e dizendo: ele não reduz a escala do seu site, mas reduz sua visão dele para 70% para que você possa ver mais, ok, e então você pode usar isso coisa para que fique de fora. Ou é aquele? Sim. Não. Por que você ficou de fora? Expandir seu navegador? Não vai ficar lá dentro. Aqui vamos nós agora. Bem, eu não percebi que se você for, todos nós aprendemos alguma coisa. navegador precisa ter uma certa largura para que essa coisa possa ser fixada na lateral porque não há espaço suficiente, certo? Mas você também pode diminuir isso se precisar encaixá-lo. Ok, você pode estar projetando em uma tela muito pequena e só precisava diminuí-la. Vou reduzir o meu. Isso não muda a pré-visualização, que diz que quando eu começo a pré-visualizar, ela vai para o tamanho certo, sai da pré-visualização. Felizmente, volta. Desculpe, é estilo dwell. Então, a próxima coisa que queremos fazer é trabalhar com esses patrocinadores. Então, a primeira coisa é mudar nossa cor de fundo porque aqui é meio cinza escuro. Então, o que fazemos é começar nosso corpo, que é tudo. E dizemos que o corpo tem uma classe, amigo. Ok, eu vou dizer que este corpo tem uma classe chamada corpo e vai ter uma cor de fundo de, eu vou trabalhar retarda uma cor de fundo que não é branca. Eu vou usar, estou meio que olhando para ele. É meio cinza azulado. Lá vamos nós. Cor cinza azulada. Aqui vamos nós. Para que meus patrocinadores possam fazer algumas coisas. Ele pode ter uma cor de fundo branca. E vou adicionar um pouco de espaçamento. Vou adicionar alguma margem. Aqui vamos nós. Vou adicionar um texto a ele apoiado por, ok, então vou pegar meu plus, vou acrescentar, isso vai ser um sucesso. Vou usá-los como pequenos aquecedores por todo o tempo. Agora, olhando para minha hierarquia de cabeçalhos, essa é a minha mais importante. Este é meu, o que é chamado de H1. H1, o mais importante acertar meu H2. Eu provavelmente deveria, porque é a próxima coisa que vou fazer. Eu digo que Alice será minha H2, mas não é a segunda informação mais importante na minha página. algoritmo do Google analisará isso e dirá: Ei, qual é o mais importante? Se o mais importante é isso, você está doente e o mais importante é próximo evento que não é particularmente útil para os mecanismos de busca. A segunda informação mais importante como título é, na verdade, esse evento fluvial. Ok, então eu vou pular H2 porque vou fazer isso daqui a pouco. E eu vou dizer, eu quero bater, eu não estou fazendo sentido em mente. Estou fazendo uma surra aqui. Isso vai ser h três, mesmo que eu seja meio que nixado como H2, mas na verdade eu quero salvar esse porque é, essa coisa aqui é mais importante. Então, eu vou usar o H3. Tem um estilo padrão. Eu vou dizer que você, meu amigo, eu vou chamar isso de bater três. Eu vou fazer algumas coisas. Vou escolher um pouco de tipografia. tipografia vai ser divertida. X0, tamanho da fonte, adivinhando cerca de 26 ish. Ok. A cor será esse tipo de cor 3D. É uma espécie de prato vermelho rosado. Gosto de geladeiras Nuclear red, não rosa. Aqui vamos nós. E precisamos de um pouco de preenchimento. Foi alterado, o texto clica duas vezes nele. E este é frio, frio, suportado, apoiado por Eu quero um pouco de preenchimento ao redor dele. Então, o que vamos fazer também é que poderíamos fazer isso com o golpe, mas qual é a melhor maneira de fazer isso? Isso mesmo. Faça isso na seção em que está. Porque há muitas coisas nesta seção que precisam seguir as regras do espaçamento. Então eu vou colocar o que faz esse, ok, eu quero o mesmo espaçamento lá. Então, vamos ao assunto. Herói da seção. Eu sou 73 deste lado, e 53 do topo. Vamos ver o que queremos copiar da minha seção. Eu queria ir para a margem, na verdade, preencher. E em termos de margem, eu queria que a margem 30 fosse perfeita para mim. Vamos fazer um pouco de preenchimento. Vamos fazer algo assim. Estou apenas observando a maquete que eu tenho. E o fundo será o mesmo. Lembre-se, margem, afaste-a. cabeçalho empurra o interior. Provavelmente precisa de mais acolchoamento inferior. Agora, como você pode fazer a parte superior e inferior ao mesmo tempo? Ok, lembre-se, mantenha pressionada a tecla Option em um Mac, tecla alt em um PC e elas coincidirão. E você pode notar que, na verdade, isso não está perfeitamente no centro, é porque esse H três tem sua própria pequena margem. Ele vê, ele vem com apenas sua própria margem sem perguntar alguns dos elementos que você arrasta daqui. Tenha algumas configurações próprias, como um botão, um botão faz algumas coisas é azul. Eu não disse que fosse azul, mas ele vem com algumas coisas padrão que podemos ignorar. Então, podemos dizer que, na verdade , atingindo três podemos dizer, eu quero que seja zero, não 20. Eu quero que o fundo seja zero. Agora está meio que perfeitamente no meio. Agora isso arruinou minha visão. É como clicar nesta seção. Vamos dizer que, na verdade, mantendo pressionada minha Option ou Alt, arraste uma delas. Bom o suficiente. Então, agora eu preciso de algumas imagens embaixo. Então, vamos pegar nossas imagens agora. Temos alguns para trazer. Então, vamos fazer alguns métodos de trazer qualquer garota. Cliquei em meus ativos em meus arquivos de exercícios. Tenho alguns em seus arquivos de exercícios em eventos do clube. Eles não estão realmente lá. Vamos dar um nome a eles. Dentro daqui. Existe o patrocinador 12.3. Então, o que ele pode fazer é simplesmente arrastar todos os quatro. Todos vocês podem usar esses patrocinadores. Ok? E então eu vou, o que fizemos no passado foi que dissemos agora adicionar uma imagem, arrastá-la para dentro e depois escolhê-la daqui. E isso funciona totalmente. Mas eu vou te mostrar que, na verdade, é mais fácil ir direto para o painel Ativos e dizer, na verdade, apenas trazendo isso para o lugar errado. Está tudo bem. Deixe-me ir. O próximo Isso é AU é o próximo. Um pouco grande. Tudo bem quando você os arrasta e pensa, por que, por que isso está indo para cima? Ed é estranho. É assim que o fluxo de código funciona. Às vezes, basta despejá-lo e movê-lo depois ou simplesmente mantê-lo na linha azul porque ele está apenas pulando pelo lugar. Teorias. Próximo, vamos trazer quem é o próximo. Essa. Esses são apenas vários logotipos feitos a partir de vários projetos. E você pode ver que é realmente muito fácil fazer isso aqui também. Então, vamos fazer isso neste documento e não no documento. É o último com base em CSS. Esse é o GAG dessa camiseta que estou usando é que estamos pintando. Isso é o que eu sinto que estou fazendo. De qualquer forma. Estou pegando meu design e usando CSS para colorir com lápis de cor. É como uma grande versão adulta para colorir, mas você está fazendo codificação ou pelo menos fluxo de trabalho. Lidar. Então, eu tenho minhas imagens, vamos reduzi-las. Então, vou clicar em um. Você é um pouco menor para obter o tamanho certo. Nós vamos. Parece quase certo. Por padrão, esse acerto de três é bloqueado, então ele empurra todos eles para baixo. E, por padrão, os membros das imagens estão em linha, então eles ficarão próximos um do outro. O que eu gostaria de fazer é espaçá-los um pouco. Então, vou adicionar uma classe a essa imagem. Não há nada. Ok, então eu vou te chamar de imagem. Vou chamá-lo de patrocinador da imagem. E isso só vai ter uma lista de todos eles. Vou adicioná-lo a este. Onde é digitado? Você pode ver isso em alguma aula existente? Só me mostrarão alguns dias se eu entrar. Eu sou. Ok. Olá, patrocinador do Angular. Aí está você. Patrocinador. Você patrocina. Aqui vamos nós. Não importa qual eu tenha selecionado. Posso dizer que quero que todos tenham um pouco de margem em ambos os lados. É manter pressionado meu Alt ou Option para conseguir, para que ele não passe para a próxima linha. Sim, está ótimo. A próxima coisa é que eu preciso de outra seção. Então eu vou dizer nova seção, seção, seção. Se você for, vai ficar muito embaixo de você. Ele precisa entrar minha lata, entrar na do patrocinador, mas precisa entrar no meu contêiner, o que é difícil de fazer, certo? Por aqui. Está fora dela. Aqui em cima. Agora está dentro dos meus patrocinadores. Você pode ver? Ainda está dentro dos meus patrocinadores, mas se eu arrastá-lo para a esquerda, você pode ver que é meio que, o recuo muda e você pode meio que ver à direita, tão errado, vermelho aqui, vai entrar no meu recipiente. Eu vou um pouco mais de carona. Vai entrar no corpo, não é o que eu quero. Em algum lugar lá dentro. Lá vamos nós. Dentro do meu contêiner. Vamos dar um nome a ele. Vamos chamá-la de seção, e essa é chamada de próximo evento. Próximo evento, informações no meu teclado. Vou deixar o fundo verde agora. Em primeiro lugar, na verdade, vamos deixar o fundo verde. Eu quero te mostrar uma coisa. O fundo vai ser, vai ser uma cor verde. Agora, o que você pode fazer é porque você pode ver, eu posso ver os dois. Eu posso, não quero chegar mais tarde no curso, mas ei. Use a ferramenta conta-gotas. Veja isso. Eu posso escolher qualquer cor daqui, ou eu posso ir até aqui, olha, aço dessa cor. Lá vamos nós. Então, eu tenho essa seção. Vamos fazer uma prévia. É o que acontece com a seleção. Pré-visualização. Desapareceu completamente. Ela desaparece porque não tem altura nem largura. O que o Webflow faz, porque, como temos essa seção vazia, o que na verdade é que não há altura porque não adicionamos uma altura. A altura é simplesmente mágica. E, no entanto, porque o Webflow sabe que se você adicionasse uma seção e não pudesse vê-la até adicionar altura, você surtaria e fugiria. Então, o que ele faz é apenas adicionar isso como temporário aumentado aqui para que você possa adicionar coisas a ele. E não é apenas uma caixa vazia completa, sem sinais visíveis. Caso esteja codificando isso, você adicionaria esta seção e não haverá nada para ver. Ok, então é por isso que é por isso que não há nada para ver. Não é até que você dê uma altura selecionando esta seção e dizendo, vamos dar uma olhada no tamanho. Você poderia dizer que eu quero uma altura de 30 ou 300. Agora tem uma altura porque dissemos que essa seção tem uma altura. Se você não tem nada que seja levantado automaticamente, peça-o para limpá-lo. Você pode clicar com o botão direito nele. Você pode clicar com o botão direito se clicar com o botão direito do mouse, mas não pode. Se você simplesmente excluí-lo de lá e pressionar Enter, ele voltará ao padrão, não é? Isso faz. Ok. Eu não sei disso por quê? Porque é assim que eu faço. Mantenha pressionada a tecla Option em um Mac, tecla alt em um PC e clique nela, clique na palavra e ela simplesmente a redefine para o padrão. Tudo bem, agora estamos de volta a uma caixa que não tem altura ou largura, mas sabemos que podemos adicionar alguns dos espaçamentos. Então, podemos usar o mesmo espaçamento que esse. Então, vamos dar uma olhada. Temos uma margem de 3.049,73. Você remove um 73? Vou me lembrar das 49h30. Tudo bem. O que foi isso? 49. Isso foi 73. Havia uma que você estava se lembrando. Obrigada. E eu não consigo me lembrar. 49. Tudo bem. Está indo mal, pessoal. Tudo bem, então 30, 49, eu posso fazer isso. Onde está minha seção? Para onde foi? É muito pequeno. Vamos dar uma olhada. Tudo bem, o que eu fiz? Vou selecioná-lo. Eu lhe dei uma margem, eu dei uma largura. Eu não dei nenhum. Então, vamos digitá-lo e ver se ele se corrige sozinho. E depois 49. Ei pessoal, vamos voltar à vida. E na parte inferior, faremos 49 também. Tudo bem, então temos algum tipo de estrutura em andamento. Vamos adicionar esse título chamado próximo evento. E o que vamos fazer aqui é reutilizar este, copiá-lo porque ele tem todo o estilo aplicado a ele. É a idade certa de três anos, o texto errado. Então eu copiei e colei para todos os estilos, e este é chamado apenas de próximo evento. Agora, o único problema com isso é o tipo de contraste parecia uma boa ideia por aqui, mas parece muito ruim. De qualquer forma. Teremos que conviver com os olhos ardendo de vermelho sobre verde e misturar. Mas eu quero é, eu quero isso talvez o que decidimos, eu pré-esvaziei sendo o H2, então eu pulei. Então eu vou embora, você já vai bater por baixo? Vai ser meu H2. E eu vou dar uma dose de H2. E vamos dizer, o que é isso? É, vamos fazer tipografia. Primeiro será Open Sans. Você acabou de digitar 0. Quando você tiver isso aberto, ele saltará para os o's. Se for ousado, tudo bem. Em termos de tamanho, será um pouco maior e será branco. E vai dizer que você cria seu próprio evento. O meu é que há um rio perto de mim. Ok. Não consigo pronunciar o rio. irlandês. Meu Gu, meu ego. Se você é irlandês, me desculpe. Alguns nomes em que eu acho muito complicado. Mike. Se você me desse um nome maori, eu ficaria bem. Mas de qualquer forma, então vamos a próxima coisa, Elisa, elementos de blocos mais bonitos. Então, eles estão todos meio que empilhados uns sobre os outros. Vamos adicionar uma imagem. Na verdade, eu só vou trapacear. Copie esse. É a mesma imagem porque é isso que eu quero. Eu quero que os detalhes disso cheguem até aqui. E vou adicionar um texto de parágrafo. Eu só vou copiar isso. Se eu copiar isso, isso é interessante, então eu poderia copiá-lo porque são os marcadores brancos que eu quero e eu colo. Vou clicar aqui, colar. Ok, agora ele fez algumas coisas. É trazido no estilo. Dê uma olhada nisso. Essas duas coisas estão erradas com isso. Os textos brancos não vieram e esse grande preenchimento chegou aqui. O que eu fiz de errado? Então, basicamente não é nada que eu queira. Ok, então se você resolveu, aquele texto de herói, desculpe, aquele texto de herói e parágrafo que adicionamos aqui está lá. Ele tem um emprego no mundo e estava um pouco perto de tudo isso. Você meio que pode ver isso, está aqui? Tem um emprego e é aquela coisa azul. E o que é que demos a eles títulos. Então, vamos todos a bordo. De onde veio o texto em branco? Ah, isso mesmo. Veio daqui. Ok. Veio da seção atual. A seção diz que eu tenho topografia da luz. Você pode ir. Mas essa, a seção de heróis, não diz nada sobre a cor que a tipografia deveria ter. Ok. Eu sei que não é porque tem essa cor âmbar, que significa que está sendo colorido por alguma coisa. Mas não é algo que eu tenha feito. Seria azul se eu o pintasse. Então eu posso fazer uma de duas coisas. Olhando para isso, tenho dois parágrafos e tenho um texto no topo aqui. Eles são todos brancos. Vamos fazer essa coisa vermelha daqui a pouco. Mas o que eu deveria fazer é ir até esse aquecimento para dizer, na verdade, não seja branco. Vou me lembrar de manter pressionada a tecla Option ou Alt e clicar nela para me livrar dela. Em vez de dizer que para ser branco, vou dizer que a seção chamada seção do próximo evento será, tudo dentro daqui será branco, a menos que eu diga o contrário, que é esse cara, ele é filho dos pais. O pai diz para ser branco e a criança diz que não, eu vou ficar vermelho. Essa criança não sabe nada melhor. Ninguém lhe disse que ele não quer ser lido. Então ele aceita tudo o que os pais dizem. Você meio que vê esse fluxo. Ok. Você estiliza o pronto para uso o máximo que puder e, em seguida, faz coisas individuais para substituí-lo por coisas um pouco mais específicas, a especificidade. Então, eu sempre olho para esse design quando estou trabalhando, eu sou como a maioria dos brancos dele. Vamos fazer a previsão branca e faremos um pouco. Se for meio a meio, escolha um deles. É melhor do que estilizar este, este e este. Então, o que eu quero fazer é remover os textos do herói porque eu não gostei. Eu deveria ter apenas arrastado o texto de um parágrafo das minhas opções de anúncio. Mas lembre-se, no menu suspenso, posso dizer que basta remover essa classe. Aqui vamos nós. Agora eu quero dois deles. Recebi minha mensagem. Tenho minhas opiniões sobre outro documento. Você acabou de digitar algo para o seu próximo evento. Você pode deixar Loren Ipsum lá se não tiver certeza do que receberá para os alunos e esse tipo texto falso que apareceu, ok, você pode simplesmente arrastá-lo se adicionar uma tag p, mesmo que você só quer copiar e colar o que você vai para o parágrafo, você o arrasta de qualquer forma, você pega um pedaço dessas coisas, basta usá-lo fora dele. É uma cópia e depois exclua-a. Você não precisa disso. Bem, há muitas opções online. Você pode obter o texto de Loren ipsum em. Eu tenho o meu no Figma e um arquivo XD. Então eu vou pegar o meu e colar. Ok, eu tenho que voltar. Lá vamos nós. Vou colocar retornos duplos e, no momento, abriremos o espaço adequado após o estilo dos carrapatos mais tarde. A outra coisa que provavelmente vou querer fazer é o que devemos fazer? Agora, eu poderia adicionar uma classe a isso para dizer que os ticks que dentro do meu evento de seção podem ter preenchimento na parte superior para empurrá-los para baixo. E isso está criando uma nova classe. Ou eu olho para o piano got, eu já fiz uma aula. Um material citado. E eu poderia simplesmente adicioná-lo a isso. Não importa se está empurrando para baixo a partir da imagem ou para cima a partir do parágrafo. Então eu posso dizer que você, meu amigo, vai ter espaçamento. Vamos ter alguns desses 32 no topo. Vamos fazer isso. Vamos fazer os dois na parte inferior. Estou apenas clicando nele para entrar nele. Bem, você clica e arrasta. Aqui está, algum texto. E a única coisa tão boa quanto essa aqui, como você conseguiu isso? Você poderia tentar dividi-lo caixas separadas, mas com isso, não sei por que o editor que o Cohen me fez, não sou mais fã dele, mas se você quiser adicionar esse pedaço, então selecione essa seção. O que podemos fazer é adicionar uma borda. Então, vamos fechar tudo isso. Isso vai ter meninos. Então fizemos bordas arredondadas. Você pode fazer isso tanto para seções quanto para botões. Vou desfazer isso. Não é o que eu quero. Você pode ver aqui embaixo, existem essas opções. Fronteira. Eu quero uma fronteira, não em todos os lados. Então, vamos fazer todos os lados primeiro. Primeiro de tudo, coloque uma largura e vamos colocá-la em dez, só para que você possa vê-la. Então, por padrão, está em todos os tamanhos. Você pode escolher diferentes tipos de bordas. Eu vou ter apenas uma linha dura. E o que eu quero fazer é realmente dizer que não quero isso para todos os lados. Eu quero configurá-lo para zero e eu quero salvar este lado só tem uma borda de cerca de 30, cerca de 50. Outro pequeno truque enquanto você trabalha é clicar aqui e usar a seta para cima. Você vê para cima, para cima, para cima. Se você segurar Shift, ele aumentará em pedaços de 109.000,100.1020. Então eu uso isso com bastante frequência. Aí está você. 50 vai funcionar para mim e a cor é escolher uma cor para o aço, minha ferramenta conta-gotas. Ainda não está exatamente igual , mas estamos chegando lá. Outra coisa é que eu tenho esse preenchimento lateral porque parece que estamos lendo é muito difícil ler em todo o site. Então, vou reduzi-lo. Então, eu poderia criar uma classe para este parágrafo para entender o espaçamento e dizer que a margem vai do lado. Como fazer isso para o lado, porque não há muito espaço para ir. Arraste um pouco, para que funcione. Mas eu tive que criar uma classe. É automaticamente chamado de parágrafo. Eu chamaria isso de P no próximo evento. Mas essa é uma maneira ruim. Bem, não é uma maneira ruim. É apenas uma aula extra que você não precisa. Porque eu tenho a seção de int e posso simplesmente adicioná-la a isso. Arraste, arraste. Oh, não imagino. É o título. Nós vamos, a pintura entra. Estou olhando minha coisa. Isso é bom. Bom o suficiente. Tudo bem, é aí que estamos agora. Havia algumas pequenas coisas novas lá, mas essencialmente as mesmas que usamos até agora, mais ou menos em um projeto do mundo real. E você pode escrever junto comigo e ouvir minhas divagações de qualquer maneira. Então é isso. Vamos para o próximo vídeo. 17. Hiperlinks e remover sublinhado e cores do link no Webflow: Olá a todos. Eu vou te mostrar como fazer esse hiperlink aqui. Quando você clica nele, é meio que carregar outro site. Eu vou te mostrar como estilizar um jeito tão feio de azul e sublinhado. E vamos deixá-lo branco e sublinhado. Mas também mostrarei como remover o subjacente. Então, os hiperlinks são clicáveis e eles foram para um site e agora, para o caso, estão pulando para um link para um mapa. Então, deixe-me mostrar como fazer com que termine o estilete no Webflow. Tudo bem, então voltei à tela cheia e posso arrastar meu navegador para fora. E vamos falar sobre hiperlinks. O que eles são? Eles são certos exemplos e, portanto, em uma postagem de blog, você pode ver aqui e aquele pequeno link aqui dentro do texto que o autor decidiu que é ótimo criar um link para algum lugar daqui. Se eu clicar aqui, ele irá para outra página. Ok, vou voltar. Tem um monte deles aqui. Eles os usam para oferecer links de afiliados. Ok, então ele está falando sobre coisas como, Ei, blocos de notas, como totalmente irrelevantes, mas eu decidi que é parte do tipo de monetização deles que os blocos de notas, quando eu clico neles, irão para um link de afiliado para a Amazon com blocos de notas. OK. Bloco de notas aleatório Não acho que seja isso que essa pessoa estava mencionando, mas ei, você também pode usar balas e fones de ouvido e todos eles vão para a Amazon. Esse aqui vai para Muji, o que é legal. Eles tinham um programa de afiliados? Não parece isso. Talvez. De qualquer forma, adoro que haja alguma companhia. Então, esses são hiperlinks. O que vamos fazer é sair para acessar um mapa do Google. Então, quando alguém disser aqui embaixo, clique aqui para ver o MapLocation. Vamos selecioná-lo. E o que você notará se eu destacar qualquer tipo de texto, dadas essas opções, posso negrito e itálico. Não é o que eu quero fazer. Eu quero esse aqui. Eu queria inserir um link. Ah, e o azul subjacente que amamos. Então esse é o link. Vamos fazer com que vá para algum lugar. Então, vou aos meus mapas. Vou encontrar meu rio. OK. Meg, Meg, eu Agriba. Ao olhar para aquele clube, esse é o começo do rio. Eu quero ir para outro lugar, mas ei, está tudo bem. OK. Eu vou compartilhar isso. Vou mandar um link para isso e copiá-lo. Vou colar aqui. Ok, então aqui está meu link. Aí está. Vou clicar na pequena engrenagem. E eu vou pegá-lo para tirar o haxixe. O hash está lá como um espaço reservado, você não precisa deixá-lo lá. Ele meio que reconhece que é um link e usa um hash. Portanto, não é uma seta quando você clica nela. Mas exclua o hash, coloque um Nance. Vou fazer com que a minha abra uma nova guia porque quero que as pessoas mantenham o fluxo de trabalho aberto. Grande salto para o mapa. Há um link interno. Não tenho isso ligado. Legal. Então, vamos testá-lo. Vamos até a pré-visualização. E vamos ao nosso link. Ei, e isso abre o Google Maps para L River em um ataque de entupimento. De qualquer forma, vamos estilizá-lo. Então, vamos sair da pré-visualização. Aqui, tampas estilete. Então, vamos adicionar uma classe a ela. Então, vá para nossos estilos. E eu o selecionei. Eu vou dizer que você vai ser uma classe de hiperlink. Hiperlink. E eu quero substituir os padrões. Há algumas coisas chegando. Você vê tudo isso vindo dos padrões de um link. É por isso que a NBA está dizendo que eu preciso ser Aereo e talvez esse tamanho, essa altura, essa cor, e isso requer decoração. Essa é a primeira coisa da qual podemos nos livrar. É preciso que a decoração esteja sublinhada. Eu vou dizer, eu não quero isso ligado. Então, vamos desativá-lo usando nenhum, sem decoração de texto. A outra coisa que eu quero fazer é mudar a cor para branco, por favor. OK. Mas eu estou me perguntando o subjacente de volta agora, depende de você o que você quer fazer, ok, então eu vou deixar o subjacente ligado porque é meio universal, talvez seja um hiperlink, ele vai sublinhar. O azul, porém , é obviamente um pouco resistente com nosso design. Agora, um pouco de prenúncio para a última parte do curso, quando falamos sobre SEO. Mas esses são um dos fatores realmente importantes para obter a classificação do seu site quando outras pessoas criam hiperlinks em seus sites com links para você. Ok, então nosso hiperlink ou está tudo bem, está suportando o Google Maps, mas digamos que isso tenha sido para vincular a um fornecedor de caiaques e dizer que você deveria comprar seus caiaques neste lugar aqui , e aqui está o link. Esses são os tipos de links que são realmente importantes e o que você está procurando e para seu site ou classificação. Bem, então enviá-los não é tão importante para o seu site. Mas quem recebe esses links, esses links de entrada, como a loja de caiaques, como no meu caso aqui. E eles vão adorar links para seu site. É mais ou menos como o que faz, é um dos indicadores realmente importantes para o Google. Então, depois de ter seu site, uma das coisas que você pode fazer é procurar pessoas para criar links para você usando boas palavras-chave. Foi aqui que eu vendi para você. Se você gosta desse vídeo, agradeço meus cursos e é isso que me ajuda. E Michael diz que fique popular. Portanto, se você está criando um site e é apropriado em algum lugar da Índia dizer melhor curso de Webflow na Internet. Vai, você Dan, eu faço disso um hiperlink e apontei para este curso. Sim, esse é o meu cozimento. Mas então, os hiperlinks são muito importantes. Há um pouco mais de navegação no seu site, mas para fazer com que eles apontem para o seu site, pó de ouro é realmente útil para os mecanismos de pesquisa? Tudo bem, é isso. Para o próximo vídeo. 18. Ancora para outra seção de página no Webflow: Olá a todos. Neste vídeo, faremos isso e eu clico em um botão e ele desliza para a seção diferente. É uma forma de navegar em um site de uma página em que você não está realmente pulando para páginas separadas, apenas pulando para diferentes partes delas. Os IDs e âncoras do elemento frio, mas na verdade são apenas coisas sofisticadas de navegação de slides de páginas. Deixe-me mostrar como eles funcionam. Para criar essa navegação. Funciona um pouco ao contrário. É por isso que é muito difícil de lembrar e você acabará voltando para este vídeo ou escrevendo-o em algum lugar. Então você não começa com o botão, ok, que parece natural se você começar com onde você quer ir. Eu quero esse botão quando for clicado para vir aqui. Eu vou dizer esta seção aqui. Eu gostaria de ir para minha opção de configurações. Eu vou lhe dar uma identificação. É isso que ele usa. O botão sabe para onde ir. Ok, então vamos dar um nome a ele agora. Você tem que ser razoável, bem. É apenas um espaçamento na seção chamada “próximo evento”. Ok, veja isso. Se eu pressionar Enter, isso a colocará nos hífens, pois parece que está tudo bem com maiúsculas e inferiores, mas eles são apenas algumas coisas, como IDs, não gostam de espaços. Então, isso força você a colocar pequenos hífens e esfriar. Então, isso é metade do trabalho realizado. Agora, vamos até o botão e dizemos você, quando você clica em classificar configurações. Nós dizemos que eu não quero ir ao nosso site. Eu quero que ele vá para esta seção da página. E você notará que isso só aparece agora, mesmo que tenhamos seções de coisas frias, não importa. Ele quer ver uma identificação. Então esse link, ok, é chamado de âncora. Vai para essa âncora aqui chamada seção do próximo evento. Quando clicado, vamos tentar. Vamos fazer uma prévia. E vamos clicar nele. Re, não há muita coisa aqui embaixo. Pára. Vou colocar mais no meu site mais tarde, mas toda essa flexibilização já é feita automaticamente para nós pelo navegador e pelo Webflow, mas estamos fazendo isso em uma seção. Na verdade, você pode editar em qualquer coisa. Você pode selecionar isso, ir até isso, fornecer um ID e dizer que quando clicar, vá até o que quer que seja. Não precisa ser uma seção. Obviamente, provavelmente é útil. Vá para uma seção e vá para um H1, desde que tenha um ID. Então, vamos fazer algumas das outras partes. Então, o contato que não temos agora, sobre nós, na verdade não é isso que queremos, não é, o que é L? Diz que eventos anteriores patrocinam eventos. Nós já fizemos isso. Nós o excluímos. Não vimos peso? Vou digitá-lo bem rápido. Haha. Tudo bem, então temos nossos botões. Ok, então o que eu quero fazer é que, quando formos aos eventos, ele vai cair nessa seção aqui. E o legal é que eu já tenho esse ID e quero ir para o mesmo lugar, esse botão, e esse botão vai para o mesmo lugar. Então, eu posso simplesmente reutilizá-lo. Então, selecione-o. Eu posso acessar minhas configurações. Eu posso dizer que não é um URL. Quero ir para uma seção e áreas da página. Então, os dois vão lá. Vamos fazer uma prévia. Aqui, pessoal. Tudo bem, vamos desligar isso. E o que mais podemos configurar? Podemos criar patrocinadores. Então, vamos fazer isso mais uma vez. Na verdade, vou fazer uma pausa. Você faz isso. Você espera lá. Você faz isso, mas pode pausar. Bom. Experimente. Tudo bem, você voltou. Você fez isso. Como foi? OK. Você esqueceu? Eu vou te mostrar se você o fez fazer o que você queria. Tenha orgulho de si mesmo, incrível seu web design, Ok, então antes de tudo, lembre-se, é onde você quer ir primeiro e configurações, eu vou chamar esse de qualquer coisa que você quiser e eu tenho que chamá-lo A seção entre será chamada de patrocinadores. Você pode ter chamado seus apoiadores se divertindo um pouco com o que estou chamando de meu. Ok, então eu vou lá, mas pronto. Agora, eu quero dizer que você vai para a página e vai para uma chamada, quer que a gente dê uma prévia. Os patrocinadores não vão muito longe. Mas ei, você pode dizer que quando criamos uma página mais longa, quando não temos várias páginas, podemos ter apenas essa página. Você pode se mover para cima e para baixo. Ainda não tivemos eventos passados. Aí está. Lá não temos, ele construirá essa seção e, um pouco, faremos essas grades na parte inferior. Mas bom trabalho. Fizemos alguns hiperlinks, o mesmo tipo de coisa. Esses são links, mas esses têm slides de página legais. Tudo bem, isso é o que diz o próximo vídeo. 19. Projeto de curso 02 - Crie a página do seu clube: Olá, gente boa. É hora do projeto da aula, não do dever de casa. Quero que você acesse e leve seu site até onde estamos agora e me envie uma captura de tela. Portanto, o resumo é usar seu próprio resumo se você estiver acompanhando o de caiaque, tudo bem também. Mas espero que você tenha trabalhado em seu próprio resumo que recebeu anteriormente e o tenha levado até onde estamos agora neste curso, você pode ir mais longe, se quiser. Mas o que estou pedindo é que chegue até aqui. Então você pode escolher suas próprias cores, suas próprias imagens, suas próprias fontes, depende de você, ok? Esses são os pré-requisitos. Você precisa ter as quatro seções. Então nav, o herói, o patrocinador e o próximo evento nas imagens, na imagem de fundo, ok, você precisa clicar no 12.3, você precisa adicionar navegação no topo. Você precisa dessa classe de botão ao passar o mouse. Sei que estou pedindo uma captura de tela para que você não possa realmente mostrar a classe suspensa, mas saberei se você não estiver fazendo isso. Ok, esse é aquele evento de rolagem no botão, hiperlink, que é este aqui, membro na parte inferior. OK. Clicamos nele e vamos para outro lugar. E os links âncora, que são a navegação, onde ela desliza para baixo. Ok, agora, faça isso enquanto estiver na pré-visualização, para que ele se livre de todo esse lixo em todos os lugares, ok, e também se fizer uma captura de tela, é complicado quando você não consegue ver nada. Então o que eu, o que você deveria fazer é ir até aqui. Isso muda um pouco. Então, espero que seja o mesmo estilo, mas se não for, você o encontrará em algum lugar aqui em cima onde você possa reduzir a escala. Meu laptop, eu desço para cerca de 70, talvez um pouco mais, 60. OK. E então eu posso fazer uma captura de tela. Agora, capturas de tela em um PC, você pode imprimir a tela e colá-las. Você precisará pesquisar no Google que em um Mac é relativamente fácil. É o Command Shift quatro. Ok, segure-os. Você pode arrastar uma caixa na sua área de trabalho para ver uma captura de tela. Se você estiver trabalhando em outra coisa, ou talvez precise pesquisar no Google como fazer uma captura de tela no seu computador. Mas sim, faça isso e faça o upload para algum lugar. Haverá uma seção de tarefas, projetos ou comentários neste site. Há um pouco diferentes nas diferentes. Então faça o upload lá e eu adoraria ver o que você faz. Além disso, tente colocá-lo nas redes sociais. Mostre-me o que você fez. Estamos prontos, mesmo que você queira, é complicado porque todos esses grupos estão cheios de pessoas que tinham como você e que estão apenas começando. Então não se preocupe com, oh meu Deus, eu não estou compartilhando o que estou fazendo porque sou novo. A beleza desses grupos é que todo mundo é novo, fez o upload e pediu um pouco de feedback. Ou não basta postar e dizer Foi aqui que eu conheci. É interessante dizer que os desenvolvimentos de todos veem qual grupo eles Deus, quais estilos eles estão fazendo. Peça feedback se quiser. É uma ótima maneira de começar a receber feedback criativo. Se você talvez não esteja acostumado a criticar, trabalhe como designer ou seja criticado. A única coisa é que eu quero você faça isso com outra pessoa também. Mesmo que não seja, você não se considera um web designer hardcore. Ao dar feedback, olhar para trabalho de alguém e ver o que você gosta, o que você não gosta, o que essa pessoa pode fazer melhor permite que você melhore porque você começa a analisar outros as pessoas trabalham e vão, eu gosto disso por causa disso. E você guarda isso e vai, eu odeio isso por causa disso. Não use a palavra ódio. Um pouco mais gentil, mas digamos, eu não gosto, isso é algo que tudo funciona por causa de X, Y e Z. Você também pode guardar isso. Então, quando você está fazendo seu próximo projeto web, você gosta : Ah, sim, essas são as coisas que eu faço e não gosto no web design. De qualquer forma, você não precisa compartilhar nas redes sociais. Mas esses são os principais grupos de alimentos. O grupo do Facebook é super incrível, esses grupos do LinkedIn são realmente incríveis. Esses aqui, instagram e Twitter são um pouco mais unidirecionais, mas é legal ver o que você faz. Esses grupos aqui, um pouco mais parecidos com grupos, mas eu adoraria ver o que você faz depois de me dizer como está se sentindo. Agora, no início do curso, pedi que você me dissesse se estava nervoso e estava sobrecarregado? Como você está se sentindo agora? Mais nervoso, duas vezes sobrecarregado, me sentindo um pouco mais confiante. De qualquer forma, me avise. Vou gostar de percorrer minhas mídias sociais e ver onde todo mundo quando necessário e abraços que as pessoas acham difícil. Tudo bem, esse é um projeto de classe para fazer isso, aproveite. Nos vemos no próximo vídeo depois de fazer sua lição de casa. Tudo bem. 20. Como entender os cursos combinados em fluxo Web?: Olá a todos. Neste vídeo, veremos o que é uma combinação de classes. Deixe-me demonstrar um pouco antes de fazermos isso. Então, temos esses botões na parte superior do meu design aqui. Na verdade, quero que apenas este seja verde e esses não sejam. Então, o que eu posso fazer é aplicar mais de uma aula, ok, para atualizá-la. Está tirando um pouco do estilo do original, mas a única coisa que está mudando é a clareza do fundo. O mesmo acontece com este texto aqui. Eu quero que apenas parte dela seja vermelha, então eu posso clicar aqui, e eu já as fiz. Ok, então vamos fazer isso neste vídeo. Mas posso dizer que quero esse pedacinho vermelho. Se eu clicar nisso, tenho duas classes aplicadas a ele, meu navegador por botões e meu plano de fundo claros. É isso que o torna uma combinação. Tudo bem, combinações, classes combinadas. Vamos entrar nisso. Tudo bem, vamos falar sobre aulas combinadas. O que eles são? Eles estão no momento em que temos nosso botão aqui. Tem uma aula. Se adicionarmos uma segunda a ela, essas duas combinações, vamos combinar a classe, ok, então nós, por que a usaríamos? Boa pergunta. Porque, por exemplo, digamos que nosso design aqui tenha um botão verde, mas alguns deles não. Então, queremos um pouco disso. Queremos manter a cor da fonte, o tamanho da fonte, o espaçamento. Só queremos mudar o plano de fundo. O que eu poderia fazer é ir você, eu poderia ir, na verdade, vamos remover esta e criar uma classe totalmente nova ou do zero, fazê-la flutuar para a direita, fazer com que fique em maiúsculas e brancas e adicionar o preenchimento pobre, que dor na bunda. E então, se eu mudar a fonte, eu tenho que mudar isso mais a nova classe que eu criei. Essas estranhas classes combinadas são úteis. Então, o que posso dizer é que quero manter tudo, mas queria acrescentar algo um pouco mais específico. Então, vou dizer que você pode navegar por botões, mas quero adicionar outra classe chamada fundo vermelho que estou criando. E o petróleo quer fazer é dizer, tudo isso vai dizer exatamente, isso é o que ele vai dizer agora, na verdade, você cor vermelha desse texto, aqui está. Ok, então essa classe de combinação é apenas uma especificidade de ouro um pouco mais específica. Acho que gosto de dizer a palavra especificidade de qualquer maneira. Então, sim, acabamos de examinar o assunto e apenas um trabalho de design de trabalho é usar a taxa de fundo. Podemos aplicá-lo a mais coisas, podemos dizer que você também tem uma classe de combinação pré-existente, aí está, eu posso aplicá-la a isso. Lá vamos nós. Agora, eu quero que o meu seja transparente, então provavelmente vou renomear o meu e chamá-lo de claro ou transparente para você. E eu vou dizer que, na verdade, seja tão transparente quanto um zíper até aqui. Ou às vezes há uma amostra pronta para ser usada. Eles vão e os dois mudaram. Veja isso, incrível. O bom da classe combinada é que agora, se o cliente voltar e disser: Ei, essa fonte precisa estar em negrito, você não verá nenhum problema. Eu tenho aulas combinadas. Então eu posso dizer, clique neste, ok, meu botão de navegação. E eu vou dizer, na verdade, o que estamos mudando? A topografia agora será o parafuso. Você pode ver todos eles mudando? Porque todos eles usam navegação por botões. E a única coisa que muda nesses dois é que o fundo ficou transparente. É por isso que eles as chamam de folhas de estilo em cascata , as cascatas CSS. Você começa com o corpo e ele diz ao site para fazer algo, a menos que algo mais específico aconteça, como se houvesse navegações no meio. E depois há a navegação que diz: “Eu me lembro do que é, mas pode dizer que todo o texto é branco, a menos que algo dentro dele caia em cascata e diga: “ Eu sou mais específico, como se eu quisesse que fosse em negrito”. Vai anular e dizer parafuso. E então algo ainda mais específico diz: “Eu quero que esse botão não seja verde, fique claro. Então, você pode ver a hierarquia começar logo no topo, as coisas genéricas e você ficar mais específico e seu site funcionará totalmente se você tiver 1.000 aulas, tentar fazer coisas só torna difícil atualize mais tarde. Então, é apenas uma boa prática e é interessante, acho que de qualquer forma, vamos fazer outro projeto em que vamos melhorar a alíquota do imposto. Então, vamos dar uma olhada no nosso design. Posso ver que fiz um pedaço dos carrapatos vermelhos lá e o porta-malas ou a alíquota de imposto lá. Então, o que vamos fazer é ir um pouco mais longe. Então eu quero essa palavra caiaque. Em primeiro lugar, acho que temos um estilo para o título. Se eu clicar nele, não há estilo lá. Então agora eu quero estilizar, então eu vou fazer um acorde tocando um. E eu quero fazer algumas coisas. Eu vou fazer disso o XO, vou fazer com que seja tudo em maiúsculas. Já fizemos isso antes, certo? E eu vou fazer dela a versão leve. Achamos que temos um de aquecimento. Então, não posso fazer com que apenas parte dela seja lida para mim. Eu não posso dizer a, você é vermelho porque tudo vem ao longo desse bloco gigante. É aplicado a tudo. Como faço para aplicar algo? Basta fazer um pequeno pedaço de texto. Então, o que você faz é selecionar esse pedaço de texto e ele aparece. Então você quer um pouco que diga isso, ele tem reputação com um prazo. Você vê um pequeno pincel. É porque eu quero estilizar justamente nisso, ela é chamada de tag span. Você não precisa se lembrar disso, mas no HTML ele colocará algumas partes ao redor para que você possa adicionar uma classe apenas a essa parte. Então, ele clicou nisso. Nada realmente muda , exceto que veremos isso. Temos que usar o nome Span. Vamos chamar esse. É preciso vermelho. Porque por que usa branco e azul, se chama TTX, Fred e seu trabalho substituirão o que está lá atualmente. Foi dito em algum lugar na folha de estilo que era branco. É por isso que é MBA, mas não essa aula, mas em algum lugar lá está. Eu vou dizer, na verdade, vá por cima dessa. Eu quero romper com a norma. Eu quero ser um rebelde. As crianças não ouvem os pais. Vou ser nuclear. Leia, você vai. Tudo bem, então fizemos essa pequena etiqueta de extensão para estilizar um pouquinho. E como fizemos antes, se mudarmos nosso acerto, então eu cliquei nesta parte aqui batendo em um. Na verdade, eu quero que você não acabe agora. Eu quero que você seja o impacto desses outros fundos. Você pode ver por causa dessa cascata ou dessa especificidade ou estou dizendo que você acabou de acenar madeiras de design. Você pode dizer: “Eu sei o que é isso”. Se você é novo, estou apenas tentando me acostumar com algumas dessas coisas porque isso torna descoberta útil para a saúde. Você tem um problema. Você pode pesquisar no Google os termos que aprendeu, enquanto o fluxo de trabalho gosta de ocultá-los um pouco apenas para tornar as coisas mais fáceis de usar e usar a linguagem humana de qualquer maneira. Então você pode ver que eles seguem em frente e ficam vermelhos. Bom. Tudo bem, vamos fazer isso de novo. A vantagem de uma vez que você fez isso uma vez e tem muitas páginas, você pode dizer que realmente se lembra em nosso design aqui, enquanto 8 de junho era vermelho. A mesma coisa aqui. Você pode dizer você, meu amigo em um piscar de olhos. Ok, e eu vou adicionar a classe de marcadores de texto ali mesmo. Ei, talvez tenhamos que projetar. Essa é a ideia de uma classe combinada. Você pode adicionar mais de um a um elemento para ajudá-lo ou fazer outra coisa. Então, sim, tudo bem, acho que temos três classes combinadas, mais de uma classe aplicada a um elemento específico, tudo bem, uma vez no próximo vídeo. 21. grid fluxo na rede: Olá a todos. É hora de criar uma grade e vamos criar esse tipo de layout de três colunas. Mas você pode facilmente percorrer, ajustar o espaçamento, quão largos eles são, quantas colunas eles têm quanto mais linhas, tudo isso é muito empolgante. As grades são incríveis. Deixe-me mostrar como eles funcionam. Desfazer, desfazer, desfazer, concluído. Agora, deixe-me te mostrar. Tudo bem, bom dia. Pode não ser seu novo dia, mas é meu. Estou pronto para a ação para explicar as grades para você. Então, vamos colocar uma grade em funcionamento. Queremos colocar isso, então essas caixinhas aqui embaixo, um pouco depois dos cartões de eventos. Ok, então o que vamos fazer é dar. Você pode se lembrar que temos nosso contêiner, poderíamos simplesmente despejar uma mercadoria diretamente nele. Não há nada realmente errado com isso. Mas é útil colocá-lo dentro do punho de algo porque fizemos isso para todo o resto. Vamos para a seção para os próximos eventos. Temos uma seção aqui para patrocinadores. Temos uma divisão. Vamos colocar uma seção para eventos passados. Então, nova seção de anúncios. OK. Vou colocar aqui para que eu chegue no lugar certo. Sim. Pendurado na parte inferior. O que está empurrando isso para baixo? Há uma grande margem aqui embaixo. Eu fiz isso antes porque estava dolorosamente perto do fundo. Eu vou removê-lo. Agora você pode clicar e excluí-lo. Lembre-se da opção no Mac, Alt em um PC para se livrar dela, e vamos trabalhar nela aqui embaixo. Então, esta seção vai ficar fria. Vamos dar um nome a ele. Vamos dar uma aula de pelo menos uma seção. E esse será um meio positivo. Você pode começar a ver minhas convenções de nomenclatura de Miss e algumas delas tinham olhado a seção, algumas delas têm hífens, outras não dormiam. OK. Tudo bem, vamos colocá-lo de volta na seção deles. Bem, eventos passados, chego lá para dizer que gostaria de adicionar alguma margem para a parte superior e inferior novamente, enquanto estou trabalhando, só para empurrá-la para cima e para baixo. Então, aqui vou para a seção vazia. Vamos colocar uma grade. Grid é essa e é a última opção aqui. Clique em segurar e arraste-o para dentro. Bom. As grades são incríveis e parecem meio assustadoras, mas não. Então, basicamente, uma das coisas é que quando você está editando sua grade, você pode ver mais alguma coisa acinzentada durante isso, como o modo de edição de grade mágica, você pode sair dela pressionando concluído e volte a usá-lo clicando na grelha ou cozinhando por dentro. Vá até seus estilos e diga abaixo, Layout, Grid de qualquer maneira. Então, estamos em mãos, o que uma grade faz? Isso nos permite dividir as áreas. É muito útil porque podemos dizer que vamos usar as vantagens nas pontas aqui e aqui, não as que estão dentro das células. Eles são computação de toupeira, bem mais hardcore, e vamos fazer isso mais tarde no momento. Agora, vamos adicionar uma nova coluna. Ótimo, ok, você pode adicionar quantos quiser. Você pode adicionar mais algumas linhas dependendo do layout. usaremos essa opção de grade para nosso portfólio posteriormente no curso para removê-los, talvez haja uma maneira, eu não consiga descobrir na tela. Ok, então eu tenho que fazer isso aqui. Então, selecione-o. Você tem que estar dentro do modo de edição. Clique nele. Essa parte meio que aparece aqui. Você pode dizer “Na verdade”, colunas. Eu não quero todos os quatro. Eu quero apenas três. E aqui com fileiras, vou me livrar da Rosa batendo na pequena lata de lixo. Eu acabei de receber isso. É disso que eu preciso. Agora vamos fazer colunas pares, ok, mas veja esse número aqui em cima. Tipo, o que é um FR? E é uma fração. É muito útil, como porcentagens. É, o que é realmente útil é assistir isso. Posso clicar nele e dizer que, na verdade, quero que sejam duas frações. Ok, então divide o espaço em dois. Isso é dois e este é um deles, uma das duas frações, ok, então você pode ver essa divisão lá. Posso dizer que, na verdade, isso é metade de uma fração e a divide. Ok? Sempre gasta todo o espaço, ok, no nosso caso, está sendo contido pelo nosso contêiner. Diz: Não seja maior do que isso. Ok, observe que não consegui clicar nisso porque estamos no modo de edição. Você precisa clicar em Concluído. Posso escolher . Aqui está meu contêiner. Isso é o que lhe dá sua largura. Podemos voltar para a rede? Volte para aqui. Então você pode dividir isso em todos os tipos de frações legais. Você pode dizer que é três e isso vai dividi-lo para você. Tudo bem, eu vou voltar para 111111. Vamos acrescentar algo a isso porque isso é um pouco estranho. Veja isso. Vou adicionar uma imagem. Se você estiver acompanhando seu próprio projeto, encontre três imagens e, se souber como recortá-las para que a mesma proporção seja a mesma, faça isso. E, por exemplo, Photoshop , Figma ou XD. Mas eu sabia dizer que se você fosse tipo, o que significa uma proporção, se eu despejar uma imagem aqui que tem todos tamanhos diferentes, digamos que essas colocando aquela, depois aquela e depois aquela no mesma grade que não coincide porque eu quero que todas tenham o mesmo tipo de largura aumentada. Faremos isso mais tarde. Imagem, imagem. Há uma seção chamada nível de imagens, onde usamos imagens um pouco mais intensas e as forçamos a ter o tamanho certo. Mas, por enquanto, vá e corte-os. Ou eu fiz alguns eventos de imagem anteriores, 123, e me certifiquei de que eles são todos iguais. Altura versus largura. OK. Vá fazer o seu próprio ou use esses. Eu tentei torná-los genéricos. Vou te mostrar um golpe. Outro truque é que eu tenho fluxo de trabalho. Eu vou fechá-lo. Vou me livrar da minha imagem. Porque o que vou fazer é mostrar uma maneira muito rápida de adicionar imagens. Você nem precisa ter seu painel de ativos aberto. Basta ver o Webflow e fechar tudo isso. Eu só vou, Ei, você pode ir dar uma olhada, solte aqui, será editado para o gerente de ativos. Pesquisando-os, eles dizem: “ Ok, maneira agradável e fácil de adicionar imagens. Então, de volta à minha grade. E lembre-se de que eu não vou, vou pular toda a adição uma imagem e depois conectá-la. Vou só usar o painel S8. Você vai lá. E então eu quero colocar meu título embaixo da minha imagem com o título do evento. É aqui que as coisas ficam estranhas. Vou adicionar meu aquecimento. Você. Eu vou. Onde você está atingindo você ou a topografia? Arraste-o para dentro. Ótimo. Empurrou isso. Tudo bem. Coloque-o embaixo. Eu posso usar meu prático navegador elegante. Não tem problema. Então, minha batida vai ficar abaixo das minhas imagens. Embora seja o mesmo. Eles estão no mesmo nível. Eles são irmãos, então devem estar na mesma grade. O que acontece com uma grade é que ela olha unidades individuais aqui e diz “Eu as colocarei facilmente para você em células diferentes, essas diferentes, o que é bom quando você está lidando apenas com imagens. Ok, então vamos nos livrar disso. Batendo. Isso significa que eu posso ir, tudo bem, Onde estão minhas coisas? Esse também é? E então eu vou pegar outro. Eu também vou para você e aí pode simplesmente colocá-los em novos. E o mesmo acontece com isso, vamos adicionar outro. Vou repetir o processo. Você pode ver se continua adicionando-os. Ele vai continuar adicionando-os na próxima grade. Obrigada. Grades CSS. Mas agora, queremos realmente ter mais do que apenas um por unidade. Então, eu vou desfazer isso. Vou deixar todos os três lá. O que precisamos fazer é estar dentro de um rapper, Ok, algo que o contenha e bata juntos. E o que isso poderia ser? Ok, você pode fazer uma seção. Sabemos que as seções não podem viver umas dentro das outras. Então, o que usamos? É esse aqui. É chamado de diblock. O bloco Div é apenas seu invólucro genérico que ganhou um estilo. Tudo o que existe é como um elástico para manter tudo junto. A seção é, na verdade, uma tag div. Div. Isso é um div, esses são seus antigos divs. Mas esses que começam com este aqui não fazem nada. Só tem isso como uma embalagem vazia. Isso também é uma div, mas tem um link aplicado a ela. Div é o tipo de coisa subjacente, divisão do espaço k ou divisão ou bloco dividido. Vou adicioná-lo aleatoriamente. Ok? Então, aqui eu tenho esse bloco div. Ok? Vou colocar minha imagem dentro dela , o que é um pouco complicado. Você precisa obtê-lo. Então lembre-se, é mais ou menos assim, é como se estivesse dentro dela e será um pouco tabulada. É difícil. Você realmente não pode arrastá-lo aqui no Canvas. Ei, você precisa fazer isso aqui e depois no navegador, eu tenho um bloco div com uma imagem nele. E agora eu posso dizer que, como não faz nada, ele só sabe que está enrolado na borda da minha imagem no momento. Mas se eu adicionar outra coisa dentro dela, então minha batida , Ok, eu acertei. Eu meio que estou, pelo menos, eles estão na mesma cela. Você pode ver meu aquecimento embaixo. E nós doamos com muita frequência para esses, bem, eles chamaram cartas. Essas pequenas unidades podem ser recursos eventos passados ou postagens recentes do blog. São como pequenas cartas unitárias. Se você quiser usá-lo em uma grade, você deve colocá-los dentro de um rapper. Nesse caso, o bloqueio os mantém juntos. Então, para onde vamos a partir daqui? Exclua-os e duplique todas as decisões. Vamos fazer os blocos div que acabei de selecionar aqui, copiar e colar. Eu compro um novo e eu vou pegar, você vai lá. Você vai até aqui. Você vai lá. É difícil fazer isso com uma grade aqui. Então você realmente não consegue fazer isso. Então eu tenho um bloco div com uma imagem e um acerto. Ok, eu tenho uma imagem pendurada sozinha. Exclua-o. Agora eu tenho uma div com uma imagem nela sem acertar. Pode ficar confuso. Vou deixar isso aqui porque você vai se perder muito alto. É fácil simplesmente se livrar dessas imagens e copiar e colar esse bloco de IP. Lá vamos nós. Vamos trocar as imagens. Maneira fácil, basta clicar duas vezes nele. Substitua a imagem. Eu vou escolher esse. Essa. De qualquer forma, é meio genérico. Então, agora temos esses caras dentro de suas próprias pequenas caixas div de embalagens para mantê-los bem e arrumados. Então, o que mais sobre grades e nós adicionamos, bastante proposital e nós fomos, uh, você adiciona grade. Você pode realmente transformar algo em uma grade porque eu quero reconhecer que isso é, na verdade apenas uma configuração de exibição e exibição alta. Então, vamos voltar para L. Então, temos essa grade, certo? E você pode ver que está configurado para isso que aprendemos , lembre-se do bloco de exibição. Você se lembra do que isso faz? Lembre-se de que isso apenas empurra tudo para baixo. Esse é o padrão para muitas coisas. E então aprendemos esse aqui, bloco embutido, onde fizemos isso. Onde fazemos isso com essas imagens ou nos comprometemos quando fazemos isso? Para esses caras, de qualquer forma, eles acabam fluindo na mesma linha. Ok, boa semana então. Essa é a outra grade de opções, ok, então é outra opção de layout. Então eu poderia ir até aqui e dizer na verdade, o recipiente para isso. Então, as seções chamadas patrocinador, eu poderia dizer, em vez de. Usando esse bloco, eu pude ver sua grade e ela simplesmente a transforma em uma grade em cada unidade. E então vamos clicar em Concluído é, você sabe, isso era alguma coisa, havia um elemento, isso era um elemento. Todos esses elementos diferentes entraram nessas células diferentes como uma grade, a mesma coisa de antes. Não há nenhuma diferença real aqui. Eu posso adicionar outra linha e começar a brincar com ela. Se você chegar a um ponto e colocá-lo em diblock e estiver tentando organizar tudo e pensar, na verdade, eu quero apenas separá-los. Você pode simplesmente transformá-lo em uma grade. E o mesmo tipo de coisa é que você pode dizer realmente se livrar do bem e voltar para o, este aqui, o elemento de bloco, tudo bem, de volta ao bloco. Outras coisas que eu quero te mostrar sobre grades. E o fato é que um estilo foi realmente criado nessa grade, quando você se acostuma a tentar capturar esses estilos à medida que eles são criados, para que você possa nomeá-los. Então criamos essa grade e começamos a mudar e dizemos: “ Ok, já tem três lados. Não também. E assim que você faz isso, diz: Ei, estou estilizando porque estou fazendo coisas no painel Estilos. Estamos fazendo coisas aqui. E diz: “ Tudo bem, vamos criar um estilo você porque você não escreveu um. Vamos chamá-lo de grade. Você pode dizer que acabou de deixar isso. O problema é que, se eu fizer outra grade e você acabar com a grade 1, 234-567-8910. E tudo bem, que estamos recebendo. Bom. Esta será minha grade para, neste caso, eventos passados. E estou sendo bem específico aqui. Se você sentir que tem uma grade, pode usar várias páginas diferentes, o que é chamado de grade. Isso é bom. Você pode reutilizar tudo. Mas neste caso, serão três de diâmetro. Talvez eu encontre outro que tenha dois lados. E vejamos também a lacuna entre. Assim, você pode brincar com a lacuna. Você pode editar a grade. Então, eu o selecionei. Vamos sair. Eu o selecionei. Vou usar meus estilos. Na verdade, eu tenho minha imagem selecionada. Vou clicar na minha grade. E eu vou editá-lo aqui ou dizer Editar grade. E eu posso brincar com uma lacuna intermediária. Então você pode fazer isso manualmente. OK. E eu posso usar minha seta para cima e para baixo. Você consegue ver o espaçamento entre eles? Mudanças que vincularam. OK. Eu também posso fazer isso na tela. OK. Para ficar visualmente, Just Do It. Parece bom. Clique em concluído. As grades são incríveis se você tem em mente agora, por exemplo, o que acontece com o Flexbox? E se você não tem ideia do que é o Flexbox, não se preocupe, abordaremos isso mais tarde no curso. Há uma seção chamada layout, Layout Nível três, K. E a regra geral é que se você tem isso escondido, você gosta, Ei, e o Flexbox lá o tempo todo é que eles fazem um muitos dos mesmos empregos. Eles fazem 70% dos trabalhos. O mesmo. Flexbox é um pouco complicado de entender quando você é novo e o grid é mais fácil de entender quando você sabe. Então, minha regra para qualquer um que comece por mim mesmo é fazer o layout da grade. E se você não consegue criar uma grade, faça o que quiser. Eles estão procurando Flexbox, mas não estão realmente competindo. Eles fazem muitas das mesmas coisas. Mas de qualquer forma, eu sei que você vai ter essa pergunta. Agora. Isso é tudo que tenho para grades. E você notará que o vídeo é mais longo porque eu vou examinar e estilizar o resto do membro das caixas em nossa maquete aqui, há algumas cores e a fonte precisa ser alterada e adicionar isso aquecimento no topo aqui. Você pode pular. Não vou fazer nada que ainda não tenhamos aprendido, mas às vezes é divertido acompanhar e me ver fazer isso. Sim, as grades acabaram. Agora vamos estilizar esses elementos dentro dessa grade. Tudo bem, então primeiro, vamos estilizar as caixas. Quer aquela cor de fundo. Então, vou pegar meu contêiner. Eu bloqueei. Ok, eu vou adicionar uma classe a isso. Porque se eu não fizer isso, vai ficar atrasado de qualquer maneira. Então eu vou chamar isso de uma div e isso é quatro, como se chama? Eventos passados. E eu vou dizer que você tem cerca Option ou Alt click para fechar todos eles. Obtê-lo de volta para você. E eu vou escolher a cor da nossa fonte da maneira que usei anteriormente. Agora, em termos dessa batida, eu gostaria de lembrar que se chama bater. Bem, eu levantei ao atingir quatro. Desculpe, está atingindo um. Eu não quero que isso atinja um. Por quê? Porque esse é o meu golpe mais importante e eu gostaria que o Google e outros mecanismos de pesquisa fossem embora. Isso é o mais importante, não isso. OK. Esse é o meu sucesso. Decidi que esse é o meu hit 2, único, é bom. Esse é o meu sucesso em três. próximo elemento mais importante. E, em seguida, batendo para este que eu vou usar aqui. Vou dizer KG. Você é 4,4 por padrão é menor, o que meio que combina comigo de qualquer maneira. E eu vou adicionar uma classe a ela porque ela fará isso de qualquer maneira. Deixe-me ir atingindo quatro. Eu vou dizer você, meu amigo, tipografia, branco. Eu quero adicionar um pouco de preenchimento. Então, vamos para Espaçamento e arrastaremos para fora para querer preenchimento ou margem. Isso não vai importar nesse caso. Ele é margem. Provavelmente vou fazer isso dos dois lados. Vou manter pressionada a tecla Option em um Mac, tecla alt em um PC para obter os dois lados, caso a amostra atinja. Deixe-me pensar em algo que está prestes a acontecer. De qualquer forma. Então, eu tenho minha amostra batendo no ar. Quero um pouco de preenchimento no local no caso de tijolos em duas linhas. Tudo bem, agora eu quero aplicá-lo a todos eles. Então eu vou dizer que você, meu amigo, eu entrar neste diblock vai ter uma classe de div. Eventos passados. Esse aqui. Não, não é a imagem. Eu quero o diblock. OK. Vou transmitir eventos passados ao vivo. E o mesmo com os aquecimentos. Eu vou dizer que você é um festival de sucesso. Estou batendo cheio. Eu poderia deixar como acertar um. E parece que se eu fizer aquecimento, fizer isso, podemos dizer bater, podemos dizer que está batendo, atingindo quatro, mesmo que dissemos que ser H1 ainda é o padrão do bater, o Um tamanho de fonte grande ainda aparece. Então eu vou dizer que você realmente é engrenagem, H4 dizendo com você, eu vou adicionar este chamado brincadeira. Quatro. Próximo. Tudo bem, aí está meu estilo. Agora eu quero adicionar o aquecimento, ok, está aí. Agora, não vamos usar a grade porque abrange colunas e é o maior possível. Mas é só porque isso vai causar muito trabalho quando podemos simplesmente despejar um H, estamos batendo logo acima dele. Então feche tudo isso. Aí está minha grade. Vou fechar isso para começar nossa batida e ver se conseguimos sair batendo no lugar certo. OK. Estou meio que olhando para o meu navegador , está no lugar errado. Vou arrastá-lo até aqui. E este vai ser, na verdade, tem que me dar o mesmo que esses. Na verdade, eu não precisei arrastá-lo para dentro e eu apago isso. Eu vou pegar isso porque é a resposta certa, já tem a classe certa solicitada. Copiar. E eu vou dizer que você vai aqui, que é errado, e depois tenta arrastá-lo para fora, o que é errado. Deixe-me usar isso. Aqui vamos entrar na minha seção, mas está chegando a três. Agora, o truque aqui também é que eu também quero parecer, isso pode adicionar um pouco de preenchimento e eu poderia fazer isso usando três classes e apenas dizer, tudo bem, vamos marcar a linha, topografia, texto alinhe o centro. O problema é, qual será o problema que você está pensando nisso. Você consegue pensar nisso? Isso mesmo. Esse cara usa a mesma classe. Então, eu precisava ser um pouco mais específico. O que eu poderia fazer? Você está certa, classe de combinação. Então, ao pressionar mais três, vou adicionar um centro de seleção a ele. Porque eu queria sentar e preencher ou margem. Então, eu não quero chamá-lo de centro de carrapatos. Então, na verdade, vou ligar para esse. O evento passado está chegando mais o evento passado e será centrado. E eu vou usar o espaçamento e vou usar a parte superior e inferior. Provavelmente vou usar o fundo. Isso vai ficar bem. Eu tenho algumas margens gigantescas no topo aqui porque eu só queria impulsionar a página. Então, vou dar minha próxima seção de eventos e dizer, na verdade, de onde ela vem? Eles estão vindo disso estão vindo da seção. Não. Onde está meu estofamento gigante, aí está a margem adjacente. Ok, então eu vou largar isso. O que eu fiz no passado? Vamos dar uma olhada. Estou tentando descobrir o que é isso. Estou clicando nele. É 30. Está lá? Está lá. Então, eu vou dizer que na seção de eventos passados, você também tem 30 anos. Deixe a grande linha de fundo ligada até eu tirar uma foto mais tarde. Mas isso funciona para mim no momento. Alguma outra coisa? Acho que é isso. Você muda o texto. Eventos passados. Bom trabalho, Dan, bom jeito. Q2. Então estilize o seu. Deixe-me saber nos comentários se você tiver algum problema, mas por enquanto, vamos deixar isso aí. Boas grades de trabalho. As grades são incríveis, muito úteis. Haverá limitações nas grades que você eventualmente encontrará. E vamos consertá-los com algo chamado Flexbox, que funcionará um pouco mais tarde. Tudo bem, em diante. 22. O que é design responsivo no Webflow: Olá a todos. Neste vídeo, falaremos sobre web design responsivo. Falaremos sobre o que é e como o Webflow lida com isso. Então, primeiro, o que é? É basicamente quando um site responde ao tamanho do navegador ou do dispositivo. Estou em uma tela grande aqui quando estou gravando. Mas digamos que eu esteja olhando para o meu iPad. Eu encolho isso. Ok. Você pode ver que isso muda dependendo do tamanho? Então, se eu abrir isso em uma tela que talvez seja um laptop menor, você pode ver que o Dribble decidiu isso para, para tela grande, ok, e eles decidem reduzi-lo para três para uma tela média. E vamos começar a usar algo como talvez um tablet de retratos. Estou vendo este site, dribble.com em um tablet. Isso vai reduzi-lo para apenas dois pratos altos. Então, eles estão ajustando o layout para responder ao dispositivo em que ele está ligado. Web design responsivo. É layout, são fontes, são imagens. Há todo tipo de coisas que você pode resolver. Eles dão uma pequena olhada, vá direto para o celular. Você pode ver que isso se resume a uma coluna. Dê uma olhada em mais uma maçã. Então, em uma tela média, tudo bem, está à esquerda e o MacBook Air está à direita. E então, se seguirmos a aparência menor, eles mudam a estrutura dela. Então aqui embaixo você pode ver um grande salto. Veja a mudança de fontes no MacBook Air. E o mesmo acontece com o logotipo da instituição beneficente aqui. Tudo é meio que diferente nas diferentes opções. Então, como isso é aplicado a ele? Portanto, o fluxo de trabalho aborda isso usando o desktop. Primeiro, você cria no desktop e depois cria para esses outros estilos. Então, o que acontece é que você projeta na área de trabalho e depois se ajusta a esses diferentes. Este é o seu tablet. Este é um telefone de paisagem e esse é um telefone de retrato. Você também pode vê-lo na opção de pré-visualização, ok. Verifique se tudo está funcionando corretamente. Então, no desktop, você pode ver como será e como ele se decompõe muito mal por causa do preenchimento em que colamos. Então, vamos ajustar isso nos próximos vídeos. Se você quiser um tamanho específico, você pode arrastá-lo e ver 360, você pode digitá-lo aqui, seja qual for o tamanho que quiser ver. Você pode estar trabalhando em um dispositivo que o seu dispositivo, eu tenho um Google Pixel. Eu posso digitar qualquer largura, para que eu possa visualizá-la na minha tela aqui ou simplesmente arrastá-la para fora e ver como ela se divide. E agora é muito ruim para começar. Se você tem a pergunta de curtir, por que eu posso projetar ou posso projetar dispositivos móveis em primeiro lugar? Você não pode no Webflow, o fluxo de trabalho é primeiro um desktop, design e desktop e depois alterá-lo por esses outros. Existe uma maneira de mudar isso? Não. De qualquer forma, não no momento, duvido que eles tenham planos. Eles estão se baseando design do desktop e depois migrando para esses celulares. Portanto, é melhor projetar primeiro um desktop, colocar tudo o que você precisa e, em seguida, exercitar o celular. Então, esse é um design responsivo e responde ao tamanho do dispositivo. Vamos começar a trabalhar nisso no Webflow no próximo vídeo. 23. Como fazer o fluxo na web: Olá a todos, é hora de tornar o Webflow responsivo. Veja este título, veja esse preenchimento na lateral aqui como, por exemplo, esta é a minha visualização da área de trabalho. Parece bom. Mas quando eu chegar, digamos, tablet, vamos esperar pelo ponto de interrupção. Você pode ver isso mudado? O estofamento ficou menor. Vamos dar uma olhada, um acolchoamento enorme no tablet, menor e o tamanho da fonte ficou menor. Vamos dar uma olhada novamente. Vamos ver outro ponto de interrupção, K2, nosso próximo menor tamanho. Vamos pegar isso. A fonte maior, menor. Ok, então essa é a capacidade de resposta. Estamos mudando as coisas dependendo do tamanho do dispositivo e começamos a usar o celular e ver o que acontece. A fonte fica maior, de jeito nenhum. E nós o tornamos centrado. faremos isso com as imagens, que podem fluir em linhas diferentes. Também vamos jogar por aqui neste próximo evento. Eventualmente, uma perspectiva móvel. Apenas se livre dele porque era um bom elemento de design que funcionava em tamanhos maiores, mas móvel, acabamos de nos livrar dele. Tudo bem, web design responsivo no Webflow. Vamos fazer isso, ok? Em primeiro lugar, vamos ver o quão boa é nossa capacidade de resposta. Não é bom nem ruim nem tem capacidade de resposta no momento. Então, como funciona e é o Webflow , simplesmente não é justo. Então você vai começar aqui. Não ajuste as coisas do seu telefone e prepare-as aqui. Porque existe algo chamado fluxo de falecimentos. O que acontece é que existem essas coisas chamadas pontos de interrupção. Eles são chamados de pontos de interrupção como um desktop, você pode ver que diz base. Não consigo apontar para isso, mas você pode ver logo abaixo do meu cursor aqui, esse é o ponto de interrupção básico. Há algo para esse tamanho. Eles dizem tablet, mas não é realmente para um tablet, é apenas para um tamanho de tela que por acaso é renderizado em 991 ou menos. E então você pode ver todos os tamanhos diferentes aqui para telefones ou dispositivos diferentes ou qualquer coisa intermediária. Então, o que acontece com esse fluxo é que, se você faz alguma coisa no desktop ele passa por tudo isso, que sabemos porque temos esse preenchimento, que é um grande tipo de coisa estranha. Nós o adicionamos e o desktop, fazia sentido ter essa margem gigante aqui, mas não faz sentido. Obviamente, no celular nem cabe. Portanto, não pulamos para o celular fixo. Temos que corrigir todos esses quatro pontos de interrupção. Então vamos aqui porque eu não quero te mostrar que se eu mudar, faremos isso. Acertar carrapatos fará algo simples. Então eu tenho essa coisa chamada bater em um, não gostei de Little Span Tag. Pegue aquela grande parte dela. Então, estamos atingindo um. No desktop. Isso se encaixa. Há muito espaço. É lindo aqui. Está ficando um pouco apertado. Então, o que eu vou fazer é apenas colocar um tamanho de fonte muito pequeno, mudar Vertigo para a classe aplicada a ela. Prático. Ok, e eu vou dizer, vou fechar tudo isso. Eu vou perder com a tipografia. Tipografia, você vê essas coisas que Amber, significa que o estilo está vindo de outro lugar. Na verdade, está vindo de. Se eu clicar nele, ele diz: Ei, estou recebendo meus valores de outro lugar. Estou entendendo, veja este pequeno ícone. Estou obtendo da minha tag H1, mas estou obtendo da, veja que esse pequeno ícone combina com esse ícone aqui em cima. Ok, então é daí que ele está obtendo um estilo. É por isso que não é azul. De volta aqui no desktop. Não é azul. Não era azul. De qualquer forma. De onde está começando isso? Está obtendo-o da tag H1, uma genérica. Ignore isso. Ficará mais claro mais tarde. Então, ele está obtendo isso do desktop. Então, vou ignorar isso e dizer um pouco menor. Estou usando minhas teclas de seta, basta clicar para baixo até ficar feliz com elas nesse tamanho de tablet. Agora vamos olhar para o telefone na horizontal ou ele não cabe nem mesmo em duas linhas, que pena. Então, vou dizer aqui, vamos passar o mouse sobre isso. Isso vai fazer mais sentido porque isso é Amber. Está obtendo seu estilo, está obtendo do título um estilo no tablet. Deixar você ir. É aí que está começando. Então, eu vou dizer que você vai ser ainda menor. Estou usando minha seta para baixo. E então, quem está visitando meu site horizontalmente em um telefone? Não pense que existem tamanhos de tela que sejam exatamente do mesmo tamanho. E vamos dar uma olhada no retrato móvel. Ok, e eu vou fazer isso, eu vou realmente torná-lo maior. Você é tipo O quê? Maior? Eu tenho que torná-lo maior. Ok. Porque eu tenho que quebrar em duas linhas. Então, eu vou possuir essas duas linhas e torná-las bonitas e grandes. Então, vamos fazer uma pequena prévia. Vamos ao nosso pequeno modo de pré-visualização e dar uma olhada. Então, desktop, ok, é o tamanho de um tablet. Ele pula, diminui o tamanho e veja isso. Vou apenas arrastá-lo porque é divertido e mais interessante ver os pontos de interrupção. Então, o que é isso, um obstáculo, é maior. Ele voltará ao desktop, arraste-o para ir para o tablet. E, eventualmente, eu vou chegar a, é por isso que eles os chamam de break points vai chegar aqui e começar a piscar de olhos. Ok. Então está acontecendo, você pode ver isso mudando aqui em cima. Quando eu arrasto os slides, você pode ver que a mudança fica ainda menor, mas está tentando ocupar, há uma grande variedade. Você pode ver que não parece muito bom, eles só estão ficando menores. Mas está ocupando essa faixa de pixels entre esses dois limites diferentes. Portanto, há todos os tipos de telas. É por isso que o web design responsivo é complicado se você quer ser perfeito em pixels, basicamente não pode. Ok, então ele chega aqui e, eventualmente explode no celular e um enorme, ok, e todos esses dispositivos móveis diferentes, também é meio interessante olhar para o dispositivo diferente que lhe dão algumas sugestões. Veja isso. Vamos desativar essa opção de pré-visualização se você arrastar esse controle deslizante até aqui. Então vá para um desses outros. Alguém? E arraste esse slide para uma forma diferente da anterior. Estamos apenas no design e agora vemos o que acontece. Você pode ver isso na parte inferior? Tem tudo isso como um relógio, vou arrastá-lo. Fique de olho lá embaixo. Você pode ver isso? Ele mostrará todos esses pontos de interrupção diferentes e meio que se encaixará neles. Então, o Kindle Fire. Então, se você está desenvolvendo algo específico para o Kindle Fire, aí está. Ok, vamos usar um tamanho maior que o Surface Pro. Na Microsoft. Você pode ir até esses diferentes e pode ir ainda menores. Tipo, vamos ao telefone. Vamos dar uma olhada nos diferentes aqui. Você pode ver, você pode planejar seu telefone ou seus clientes descobrirem que isso provavelmente é mais importante apenas para garantir que ele fique bem na pessoa que o verificará. Ok, então vamos dar uma olhada. O que temos foi o meu, pixel três, eu tenho pixel quatro. Você consegue se lembrar? De qualquer forma, é antigo? Então aí está. É o que parece no meu telefone. Ok. Isso nos iPhones maiores, grandes máximos, e você começa a gostar do NES. Eu não acreditava que eu era do tipo De jeito nenhum eu tinha um NES ou pelo menos um amigo tinha um. Pesquisei no Google e ainda assim tinha 256 pixels. E essa foi a resolução adorável. Bom console de jogos. De qualquer forma, eu era mais do tipo de cara do Sega Master System. De qualquer forma. Então essa é a nossa capacidade de resposta. Fizemos isso pelo título. Você pode fazer isso com qualquer tipo de preenchimento, cor e tamanho. Então é mais ou menos isso. Vou examinar e estilizar meu site. Não vou tocar na grade na parte inferior aqui até o próximo vídeo. Então, se você quiser pular para isso, o resto, eu vou apenas resolver alguns dos problemas e a navegação parece boa, mas vou ajustar isso porque você pode não ter isso luxo ou o seu pode ser um pouco problemático. Vou trabalhar no estofamento. Vamos fazer tudo isso. Leve isso para você, se quiser. Tudo bem, lembre-se, porém, você não o estiliza aqui embaixo, na esperança de estilizar as coisas da corrente, porque veja isso. Se eu passar e consertar esse preenchimento, aqui vou eu, ok, no layout, eu quero o espaçamento e vou ajustá-lo aqui embaixo. Este eu quero o contêiner ou a seção. E eu vou remover o acolchoamento aqui, assim mesmo. Se eu for para a próxima, voltará para a grande. Está de volta ao grande novamente, de volta ao grande. Melhor. Caso contrário, eu tenho que mudar isso toda vez. Já se eu desfizer isso, vá para a versão para tablet e torne-a muito menor. Você pode ver os fluxos até este e aquele. Portanto, é melhor começar grande, diminuir à medida que avança, mesmo que você realmente queira estilizar o celular, certifique-se de trabalhar com ele sistematicamente. Vou desfazer isso porque vamos trabalhar nisso. Então, tem uma olhada. Sim, parece bom. Eu vou fazer isso menor. Obviamente, meu acolchoamento aqui não faz mais sentido. Realmente não consigo arrastá-lo muito bem para a direita. Como remar o barco ou simplesmente digitá-lo em Dan. Vá em frente. Isso é bom o suficiente. 149. Ok. Então, o que mais eu preciso mudar nesse caso? Na verdade, vamos fazer esse preenchimento, então veremos todo o resto. Então você está bem. Eu gostaria que você fizesse o que temos de preenchimento neste, acho que 50 realmente vão direto para a borda. O que temos desse lado? Isso tem 35. Vou fazer 35 desse outro lado. Então, na verdade, vou ao meu parágrafo aqui e dizer, na verdade, vamos esclarecê-lo. Quem se lembra de como limpá-lo? Existe a opção de redefinição ou opção. Clique em um Mac, clique alternativamente em um PC. Eu vou me livrar disso. Na verdade, não, eu não sou. Esse é um bom argumento. Eu pensei que eu ia limpar isso voltando ao zero. Na verdade, estou limpando. E vai dizer que vou olhar para trás, para o que diz o parágrafo. Desculpe, parágrafo, qualquer que seja o tablet , o tablet dizia 149. Então esse cara entende. Portanto, não posso simplesmente excluí-lo ou redefini-lo. Na verdade, tenho que dizer que você está em zero. Porque o que eu vou fazer de agora em diante é que esta seção vai assumir o controle. Por que estamos fazendo isso para confundir você, principalmente para que eu não saiba, eu não saiba o que estou fazendo. Então, são 35 em cada lado. É bom aqui, ok, a mesma coisa, são 35 de cada lado. E este parágrafo está definido como botão zero aqui. Provavelmente é muito largo. Então, 35, vamos manter pressionada minha tecla Option em um Mac. Tecla 0 em um PC, aproxime-a razoavelmente. Dependendo do topo, há demais. Então, vou para o dispositivo móvel, vou baixá-lo, algo assim. Ou ainda parece muito próximo. Também não tenha medo verificar os diferentes tamanhos. Lembre-se de arrastá-lo para cima, encolhê-lo um pouco. Nintendo NES. Só para ver o que eles farão. Acho que provavelmente o preenchimento ainda é muito pequeno neste dispositivo móvel. Aqui vamos nós. Não precisa ser igual. Eu fiz o mesmo, mas vamos dar uma olhada, então vamos dar uma olhada. Você, você, você, você. Uma coisa que eu poderia fazer para isso é ir e ficar centrado. E eu realmente vou dar uma olhada aqui. Eu não quero isso sinterizado, provavelmente não só aqui. Eu vou fazer com que você fique centrado. Vamos dar uma olhada maior. Mas, na verdade, quando você está nessa visão, é um pouco diferente, certo? Se você estiver no modo de visualização, você pode realmente arrastar os pontos de interrupção para além. Olha, eu posso aumentá-lo e usar telefone de paisagem, tablet, desktop. Ok, quando você não está no modo de visualização, você e o designer, na verdade, só podem trabalhar dentro do escopo de, você pode ver que não consigo ficar maior. Eu posso ultrapassar esse ponto de interrupção. Eu não sei por quê. Ok. Então, vamos dar uma olhada. Sim, eu gosto. E precisaremos fazer algo com o fundo e torná-lo mais escuro, porque esse vermelho e verde, esse fundo não vai funcionar. Talvez eu tenha que abandonar completamente essa leitura porque parece legal aqui. Mas neste dispositivo aqui, é sim. Dor O que eu estou fazendo? Vamos ver se podemos consertá-lo. Eu vou, eu vou causar uma lata de minhocas aqui. Eu vou, vamos consertar isso mesmo que eu não tenha planejado isso. Ok, então a imagem de fundo aqui, eu poderia ver e membro do documento obteve dois planos de fundo. Então, neste aqui, isso mudará só neste? Essa é uma boa pergunta. Eu nem sei a transparência definida como 0,24. Então, vamos dar uma olhada nisso. Vamos entrar aqui. Vamos torná-lo mais escuro aqui. Só afetará o celular que ele deve fazer. Lá vamos nós. Então dê uma olhada. Então, imagem de fundo nesta seção, imagem de fundo do herói. Tudo veio para o passeio? Você vai. Antecedentes Ainda está em 42. Neste. É de 0,7 a 72%. Funcionou. Eu sabia disso o tempo todo. Ok, então é mais escuro no celular. Tudo bem, outras coisas que eu quero fazer. Então, vamos dar uma olhada na imagem. Imagens, imagens finas, tudo bem nesta aqui, é um pouco estranho que não vá até o fim. Eu tenho um herói de imagem. E o que eu posso fazer é pular um pouco a arma e dizer em termos de tamanho, configuramos para que, na verdade não escolhemos um tamanho, apenas o arrastamos, não acabamos de passar, ok, O que vamos fazer é dizer que você tem uma largura de 100 e usaremos a porcentagem. 100% fará Units and Increments Property mais tarde e analisará todas as diferentes porque ele é carregado. Mas vamos pular essa e dizer. Essas outras versões têm uma largura específica, ok, mas nesta última ela salta para 100 por cento. Bom. E o que isso significa é ver isso tamanhos diferentes, ok, se eu for para o modo de visualização, assista isso, será um bom teste. Está ficando bem grande. Mas quando ele vai para o retrato, ele volta para um tamanho específico. Bom. Tudo bem, pré-visualização desativada. O que é, o que eu quero fazer. Isso é muito grande. Então meio que gostei daqui. Eu gosto daqui? Somos como se estivéssemos lá. Está tudo bem. O que lhe dá seu preenchimento? Ou seja, esse também é um jogo divertido de jogar tipo, de onde vem isso? Então, com isso selecionado, vou abrir meu espaçamento e ele está obtendo um pouco disso e provavelmente um pouco da imagem. E você pode meio que ver se eu passar o mouse sobre ela, você pode ver uma pequena você pode ver uma pequena coisa quadriculada para que ela saia daí. E de onde isso está vindo? Se eu clicar nele na versão desktop do botão do herói no celular, vou ignorar isso. E eu vou colocá-lo em zero. E isso provavelmente é muito bom. Bom o suficiente. Toda essa bagunça. Olha essa bagunça quente. Então dê uma olhada. Tudo bem. Sim. Você sabe, é bom aqui. Como podemos corrigir isso? Bem, eu vou fazer é brincar com o tamanho e vamos brincar com, Vamos dar uma olhada no patrocinador da seção. Ok. Digamos que tudo dentro dele esteja alinhado ao centro, mas somente no tablet. Ok. Então você pode ver que estou usando o alinhamento e a topografia. Essa é pesada. Você notará que estamos usando o centro de topografia em vez qualquer tipo de tamanho, e centros de espaçamento farão isso mais tarde , quando analisarmos a grade e a grade flexível. Mas muitas vezes você pode simplesmente centralizar o texto de uma tag div inteira ou, no nosso caso, desta seção, e ela seguirá o exemplo. E temos uma imagem, então temos algo em torno disso, certo? Temos um invólucro chamado patrocinador de imagem. E o que eu quero fazer é provavelmente a área de trabalho de preenchimento. Então, posso descobrir aqui que ele muda para o centro e quero adicionar um pouco de preenchimento ao redor dele. Então, vou dizer quem se lembra do que você pressiona para que todos os lados sejam preenchidos. Porque vou manter pressionada tecla Shift e vou dizer preenchimento e margem. Então você pode fazer todos eles. Vá no tablet. Há um pouco mais de preenchimento ao redor. A outra coisa é que está tudo meio grudado na lateral. Por quê? Porque minha seção tem um pouco de preenchimento e era apropriada no desktop, mas não tão apropriada aqui. Então eu vou dizer, Você vai embora, zero. Sempre haverá um pouco de diferença entre os diferentes tamanhos. Na verdade, vamos dar uma olhada, vamos para o Preview. Ok, então desktops, desktops que se resumem a isso, vão ficar menores. Ok, é meio responsivo. Então você escolhe um tamanho meio maior, cabe três ali. Você entra nessa, fica mais pequena. E como isso está se decompondo? Na verdade, estou bem com a forma como está a partir de agora. Eu não vou mudar mais nada. Podemos nos aprofundar com o Flexbox mais tarde, mas, na verdade, isso está funcionando muito bem, devido ao preenchimento das imagens. E eles simplesmente parecem estar quebrados ou o que é chamado de membro do bloco embutido. Então, eles se encaixam na fila. Se não houver espaço suficiente, eles vão para a próxima linha, ou menos como a topografia. Tudo bem, eu pensei que seria muito mais difícil do que era. Vamos continuar com isso. O que mais temos para desktop? Então, o que está dando espaço para isso? Então, vamos descobrir o que está empurrando isso. O que é isso? Uh, vamos dar uma olhada. Então, é tudo nesta seção? Está lá. Qual é o grande e velho estofamento deles nisso? Então, neste caso, vou torná-lo muito mais curto ou passar até mim, o que provavelmente também precisa diminuir no tamanho desse dispositivo. Parece bom. Este, herdar tudo do último, já é bom o suficiente. É isso. Porque eu não gosto do seu dispositivo móvel retrato ou paisagem. Eu meio que uso um tablet, pesado. Veja isso, certifique-se de que não é tão ruim e depois vá para o celular. É muito importante. Você não deveria fazer isso, ok, este aqui, o que eu poderia fazer é na verdade essa pequena escolha de design que eu ouço aqui. Realmente não funciona em dispositivos móveis, precisa desaparecer ou ficar muito pequeno. Vamos nos livrar disso. Então, com esta seção selecionada, lembro que está abaixo das fronteiras, lá está. Então, tem uma borda desse lado esquerdo. Se eu clicar nesse de 50, então vai ficar zero, desaparece no celular. Então, vamos fazer uma prévia. No desktop. Está lá. No tablet, ele está lá, mas quando fica menor, menor, desaparece. Ok. Você vê o que está fazendo aqui. E meio que percorra todos os elementos. Começando pelo topo , siga seu caminho. Não pule o celular paisagístico. E se movermos esta última, vou para a próxima seção, vou dizer que tudo isso vai ser muito menor e manter pressionada a tecla Shift. Arraste todos eles. Bom o suficiente para que tudo o que temos, faremos grades na próxima. Mas estou feliz com o que está acontecendo. Você provavelmente, porque está fazendo algo sozinho, provavelmente terá algumas outras partes que talvez não estejam funcionando ou não tenham sido exatamente como minhas, porque usamos tamanhos diferentes e imagens diferentes e diferentes em diferentes comprimentos de texto se houver alguma coisa perguntando nos comentários. Mas também saiba que ainda temos uma parte do curso que acabaremos por superar tudo isso eventualmente. A outra coisa que você pode estar fazendo é o tamanho do seu logotipo. Als está bem nesses diferentes dispositivos. Sobre isso, você pode decidir que quer que ele seja menor e que esse texto seja menor, ok, cabe a você fazer com que ele se encaixe. E talvez o acolchoamento fique um pouco menor. Marca: É daí que vem seu preenchimento? De onde isso está nos levando a estofamento? A imagem? Sim, só estava ficando esburacado por lá. Trabalhe de forma incrível com os rendimentos e veja o que você pode fazer. Então você pode descobrir isso, mas começando aqui e descendo, tudo bem, é assim que o Webflow é responsivo. 24. Grids responsivos no fluxo Web:: Olá a todos. Vamos projetar essa grade de forma responsiva aqui embaixo no desktop. É três por três. Ele fica menor do que o tamanho do tablet. E, na verdade, eu escolhi um três por três porque eles parecem bons. E então eu pego dois dois por dois na paisagem, móvel e então eu vou para celular e vejo o que acontece. Aqui está lá. Tão maior. E eu fui, empurrei toda a borda e coloquei em uma coluna de altura. Então, deixe-me mostrar como fazer isso agora no Webflow. Ok, vamos tornar nossa grade responsiva. O momento não é responsivo nem de pré-visualização. Você simplesmente vai até o tablet e meio que se espreme lá e, eventualmente é empurrado para o lado para consertar. Isso é muito fácil quando eles iniciaram o desktop. Ok, parece bom. Vamos dar uma olhada no tablet e provavelmente está bem no tamanho. Então eu vou deixá-lo lá. E no cenário móvel, ok, está ficando muito apertado, então vou dividi-lo em colunas diferentes. Então, o que fazemos é clicar na grade. Então, se eu clicar lá dentro, uma vez, lá está minha grade aqui e o layout, vou editar minha grade ou simplesmente clicar na opção no canto. E o que vamos dizer é que aqui nesta visão aqui, eu não quero que sejam três colunas. 123, eu só vou dizer deletar um. E isso não exclui o conteúdo real das colunas, as colunas disponíveis nas quais as coisas precisam ser inseridas, isso faz sentido. Então, acabou simplesmente empurrando para baixo para a próxima, criando uma linha automática. Ok, só queria empurrar outra linha para baixo. É devido ao tablet. Vamos descer até aqui. O problema com meu layout, porém, é que ele não parece muito bom em dois por um homem. É uma opção de design que, da próxima vez que projetar algo, eu posso decidir que essa primeira talvez seja melhor ter quatro colunas para começar, porque depois ela se divide bem, para fazê-las decide você mesmo. Às vezes, você precisa conviver com alguns layouts estranhos com capacidade de resposta. E você também notará que se você mudar entre pontos de interrupção, que eu faço o tempo todo, a coisa das colunas enlouquece do jeito que você gostaria? Eu nunca vi isso lá antes, mas simplesmente não gosta. Ok. Então desligue isso. Ok. E se eu voltar, tudo ficará bem. Mas se você tentar mudar isso enquanto está aqui, meio que enlouquece. Mas desligue-o, volte para dentro. E está tudo bem. Neste aqui no meu celular. E eu vou empilhar todos eles um em cima do outro. Então, o que eu vou fazer é me livrar de todas as colunas. Você precisa ter uma coluna, uma coluna e, em seguida, ela preencherá quantas linhas precisar. Os códigos dão uma olhada. Vamos até a Pré-visualização. Vamos gastá-lo para que fique bem no celular. Eventualmente, chega a um ponto de interrupção e vai para meu layout feio e depois volta para três. E depois os três grandes. Eu digo, gosto que seja agradável e fácil. Vamos arrumar tudo. E apenas brincando com um pouco do espaçamento entre um celular, especialmente. E há algumas grandes lacunas aqui. Eu quero polegadas nela? Você pode pensar que, no celular, às vezes é bom correr até as bordas. Então eu vou dizer que o celular, eu vou mudar, muda esse espaçamento. Nesse caso, tem a ver com as linhas ou colunas das linhas. A linha tem uma altura de 60 Omo, mas vamos começar aqui. Vamos nos certificar de que não estamos apenas parando. Gostei muito do espaçamento aqui. Aqui. Muito grande. Ok, então o que eu vou fazer é dizer em paisagem móvel, eu vou dizer que a grade, e eu vou dizer a altura da linha. E eu clico nele e vou bater para cima e para baixo, cabeça para baixo, segurar Shift e segurar. Vai pular em pequenas latas. E eu vou fazer 30 , talvez 20. E eu provavelmente vou ter que fazer o Gap para isso como 20 também para as colunas, porque senão parece estranho. Eu quero um pouco de acolchoamento do lado de fora? Eu acho que eu tenho. Então eu vou para você porque está empurrando até as bordas, não parece certo neste tamanho de dispositivo. Então eu vou dizer, vamos dar uma olhada no espaçamento e vamos dos dois lados. E imagine que agora estou selecionando minha grade, na qual ela funcionará, ou eu poderia fazer minha seção. Ambos funcionarão. Vamos fazer isso e arrastá-lo para dentro. Mantenha pressionada a opção, arraste-a da maneira certa. E os anos 30 provavelmente serão bons porque combinarão com todo o resto. Em vez disso, não corresponde a 30. Ali. Dê uma olhada. Por que um estábulo maior do que 30? Você sabe por que você está tipo, Ei, aquela coisa, eu não consigo resolver isso para que pareça entrar. Isso porque há 20 Dan. Dan é um idiota. Isso faz 20 em ambos os lados, 20,20. Tudo bem Vamos pegar um celular. E é por isso que fizemos isso lá em cima. E não apenas de mãos dadas, porque na verdade está tudo bem aqui. Não, eu quero empurrá-lo até o limite, então eu quero me livrar desses 20. Então 0,0. Eu sou um homem feliz, lá vamos nós. Nossa grade está disposta. responsivo. É dar um gostinho. Pequeno. Estranho. Encontre o melhor. Bem, na verdade, vamos chamar isso de melhor. Tudo bem, ou seja, a capacidade de resposta da grade no Webflow. 25. Projeto de curso 03 - Projeto de grade e responsivo para o WebsiteClass 03 - site de grade e responsivo: Olá, é hora do projeto da aula. Ok, projeto de classe número três, quero que você adicione sua grade e, em seguida, torne o site responsivo. Ok, então vamos ver o que temos que fazer. Então, no desktop aqui, a única diferença do último é que adicionamos essa grade na parte inferior. Ele quer que você o adicione. E então eu quero que você resolva todos os pontos de interrupção e decida, tome decisões de design. Tamanhos de fonte, preenchimento, k, como temos nos últimos dois vídeos. Quero ver todos eles agora carregados para capturas de tela dos quatro pontos de interrupção diferentes. O problema é que você não consegue ver todos os quatro. Acho que no início do curso que eu disse, você pode ir aqui e podemos dizer que realmente mostrou isso cerca de 80% ou tirar uma captura de tela de tudo. Parece que não funciona no tablet. Você pode fazer com que o seu funcione. Eu não posso forçá-lo a 100 por cento. Então, o que eu pedi que você fizesse é pegar tudo o que você pode ver, basta levá-lo até aqui. Portanto, o mínimo é a navegação e o quadro de heróis. Se você conseguir descobrir maneiras de fazer a coisa toda, diminuindo a escala do navegador, isso é meio sofisticado. Por favor, faça. Caso contrário, basta fazer capturas de tela de tudo o que você pode ver. Para dar uma olhada nisso, faça o upload para as tarefas, corte os comentários dos projetos, dependendo de onde você está assistindo, e também compartilhe nas redes sociais. Eu adoraria ver o que você está fazendo se não aguenta o quatro por quatro, ok. Tudo bem que você vá e volte aqui e diga: Na verdade, Dan, basta adicionar um quarto para que ele se quebre bem nesses outros dispositivos. Faça isso, tudo bem, esse é o projeto de classe número três. Saia, aproveite. Nos vemos no próximo vídeo. 26. Animação com botões para botões de fluxo na Web, usando o elemento: Olá pessoal, é hora da animação, então vamos fazer isso com esses botões. Não acredito que chego até aqui com a aula Webflow. Bem, você não pode acreditar. Você pensa: “ Por que animamos coisas? É por isso que me inscrevi fluxo de trabalho , porque parece legal quando as coisas deslizam. Vamos dar uma olhada nisso. Vou fazer dois botões para começar. Vamos pegar aquele para fazer o elástico. Esse é muito legal. Pop, pronto para qualquer gelatina, seja para voar e fazer com que caiam do céu. Rabiscos flexíveis e meu jigger favorito, GIGO. Tudo bem, vamos aprender como fazer isso no Webflow. Ok, vamos fazer essa mágica. E então você pode notar, se você meio que voltar para esse vídeo, eu já tenho essa animação. De onde veio isso? Lembre-se de que, em um botão, você pode entrar aqui e mudar o mouse. Ok, então onde está minha cor de fundo é verde para começar, mas eu posso passar o mouse e alterá-la para esse tipo de vermelho rosado. Ok, então essa é aquela animação. Não é isso que eu quero clicar, clique novamente. Vou acrescentar algo extra. O que eu vou fazer? Eu vou fazer uma dessas coisas desde o início. Então, vamos fazer isso. Neste painel está aqui, tenha o elemento que você deseja selecionar. Agora feche nosso botão. Interações de clique, ok, e vamos lidar com esse gatilho de elemento, não com acionadores de página, com acionadores de elementos. Vamos dizer Head Plus. Então, quando esse elemento, ok, botão Então é pairado. Sim, quando, quando eu passar o mouse sobre ela, ok? Vai fazer alguma coisa, não apenas mudar de cor. Não, vamos fazer com que ele se mexa ou algo assim. Em Hover, faça essa ação. Ok, então vamos fazer alguns dos pré-fabricados porque são bonitos fáceis e bem cronometrados. Então, vamos fazer alguma coisa, vamos fazer pop. Então eles estão meio que invadidos. Isso provavelmente mudará. Eles parecem adicionar ou remover coisas disso. Então, há uma espécie de movimento que aparece e desaparece. E depois há coisas que chamam a atenção deles, ênfase, vamos escolher o pop k. Então vamos fazer pop, vamos pré-visualizá-lo, Você está pronto. E é trabalho e experimente. Então, vamos visualizar e dar uma olhada. Quando eu passo o mouse sobre ele, ele muda de cor e faz um pequeno estalo. Boa flexibilização, fluxo de trabalho bem feito, legal. Você pode jogar com todos eles. Então, com as interações selecionadas, você verá tudo isso. E em vez de pop, nós podemos fazer. Agora, antes de passarmos por mais uma dessas coisas com grande poder de interação, vem uma grande responsabilidade. Quero encontrar seu site. O Google foi divertido, mas eu não quero ir ao seu site e ter 1.000 coisas mexendo comigo. Ok. Mesmo que seja muito legal assistir, é bom, ok, mas é como aprender. Lembre-se de que quando você aprendeu o reflexo da lente no Photoshop K e tudo tinha um reflexo de lente, tenha cuidado. Estou avisando, você sabe, que tudo na sua página precisa ser animado, mesmo que isso claramente me traga alegria. As coisas que você precisa observar ao adicionar esses elementos são acionadores. Então, esse elemento aciona algo. Ok, é que tem um pequeno raio. Ótimo, porque todo Harry Potter, só uma indicação visual que se eu clicar aqui e clicar em, digamos que, oh, há uma interação nessa, e eu só consigo vê-la quando estou pré-visualizando. Também aparece aqui. Apenas uma dica visual que esse raio está esperando, se você precisar ajustá-lo, selecione-o. E logo aqui você pode clicar nele e ele o abrirá. Feche isso. Aí está você. Vamos fazer algumas, um pouco mais. Vamos nos livrar do jiggle. bom quanto é. Vamos fazer outra terrível. É como portas de ligação dos slides do PowerPoint. É como nossa transição, mas é legal. De qualquer forma. Então, deixamos nosso mouse para fora. Então, no momento em que passamos o mouse e algo e não fazemos nada quando na verdade, então podemos dizer que quando ele paira para fora, podemos fazer outra coisa. Eu vou dar um piscar de olhos. Dê uma prévia disso. Você pode visualizá-lo aqui, mas é melhor indireto com ele, eu acho. Oh, está assustador. Onde está o seu dia. Isso é estranho. Eu nunca fiz essa combinação antes. É porque o que eu estou assumindo é porque está se movendo. Então, está tentando piscar. Se eu seguir, não vai. Isso fará o equilíbrio. Veja se consigo manter meu dedo nela. Eu entendi porque está se movendo para cima, então está fazendo o rollover do mouse. Isso faz sentido? Ele está pulando e depois ativando o lançamento , então está piscando e enlouquecendo . Então, não vamos fazer o equilíbrio. Simplesmente desaparece. Dê uma chance. Fogão quente e saia. Ok. Ah, vou deixar isso aqui porque esses problemas que encontramos, esses problemas estão ao passar o mouse desaparecem, provavelmente não são bons. Vamos fazer com que ele estoure novamente. E quando paira para fora, é meio que piscar de olhos. E vamos ver se isso resolve isso. Piscar. Ei, vá. Existem combinações que simplesmente não gostam. Ok, então está tudo bem. Não use o piscar de olhos, acho que é o vallate e vou deixar você brincar com eles. Outras coisas que você pode fazer, você pode adicionar mais de uma, ok, então vamos nos livrar do mouse só porque está me matando e eu posso te mostrar como se livrar dele. Ok? Então, como se livrar disso? Ação. Selecione uma ação. Isso precisa ser uma opção freira, mas vamos voltar para selecionar uma ação. Ok, então se livre disso. Vamos fazer uma prévia. Vai estourar o pop e outra coisa, para que você possa adicionar mais um. Então, vamos encerrar isso. Então, há duas partes, certo? Você está nesse tipo de nível de gatilho de elemento e entra nele para trabalhar o mouse e voltar para fora. Posso acrescentar um segundo é uma pequena vantagem. Posso dizer que quero outro. Diz que nosso mouse paira. Eu quero fazer duas coisas. Eu queria que ele fizesse isso e eu vou conseguir ou tentar pensar em uma combinação que não gravaria tudo. Temos que estourar. Podemos fazer com que ele apareça girando? Eu deveria ter testado isso antes de gravar este vídeo. O que isso faz? Não estoura e faz isso, não é? Vamos dar uma chance. Simples de fazer as duas coisas. Tem um pop e um spin in. Você está pronto? É isso. Está estourando. É fácil. É outra difícil. Está entrando e saindo enquanto gira. glorioso Dan. Ok, você pode habilitá-los. Um vídeo terrível, mas vamos deixá-lo aqui porque às vezes, às vezes é bom ver os problemas, bem como as coisas que estão sempre funcionando, caso você desça pela toca do coelho do China, acrescente muitos. Tudo bem, na verdade, o que devemos fazer? Vamos terminar com isso. Sim, passe por todos eles sozinho. Na verdade, não vamos passar por eles. Balançar. Balançar. Alguém, alguém pode dizer a palavra jugar sem a música da garganta de Louis entrar e entrar na cabeça. De qualquer forma, se você ainda não ouviu falar do Google, ótimo. De qualquer forma. Então, vamos deixar isso no Jiggle, porque é que eu quero começar com esta introdução. Qualquer outra grande vantagem é que passamos o mouse, sobre a qual falamos anteriormente. O mouse não funciona em um tablet ou telefone porque você pode passar mouse com o dedo. Então, o que faremos no próximo vídeo, faremos algo um pouco mais parecido com a animação de carregamento de página. Isso seria legal. Então, vamos fazer isso agora. 27. Entre em movimento no Webflow: Olá a todos. Vamos fazer isso, veja isso. Eu vou rolar para baixo e as coisas novamente, um desvanecimento, muito ligando que elas desaparecem enquanto você rola para cima. Faremos isso completamente e , em seguida, mostrarei como compensá-los também. Mais uma vez. Vamos dar uma olhada. Mágico. Vamos, deixe-me mostrar como fazer a mágica. Tudo bem, vamos criar mais alguns raios de iluminação. Então, são esses elementos aqui que eu quero desaparecer. Então, eu não quero fazer isso com a imagem. Eu quero fazer isso com o que cerca a imagem. Nesse caso, eu tenho uma div que tem uma classe aplicada a ela chamada classe div de int. Então, dê a si mesmo uma aula se você não tiver, ok, é uma boa maneira de reutilizá-la mais tarde. Então, vamos às interações. Agora que eu o selecionei, ainda usamos esses gatilhos de elemento. Nós dizemos esse elemento aqui. Eu gostaria de fazer algo diferente de antes de passarmos o mouse. Vamos usar esse chamado scroll into view. Quando essa coisa é exibida, nada mais tem a ver com o mouse. Ok, é devido com a rolagem da página e você meio que a segue. Você acabou de dizer, ok, quando é rolado, eles para ver o que você quer fazer quando estiver visível. Você pode fazer a ação de, eu só vou fazer com que o meu apareça, desapareça e desapareça. Eu quero que desapareça. Vamos até o Preview e vamos testá-lo. Agora, quando você está testando, se eu testar aqui , basta carregar imediatamente. Ok, então o que você precisa fazer é meio que ir até o topo. Então você tem que fazer algumas rolagens. Agora, pré-visualize e estamos prontos para a rolagem. rolagem não carrega apenas uma vez, nem sempre é reiniciada. Vamos novamente. Do topo. Aí está. Aí está meu pergaminho de pagamento. Podemos usá-los. Ok, vamos dar uma olhada em outra coisa porque, no momento em que grande parte da animação real está acontecendo, ela começa a acontecer como se fosse uma segunda. Parece que agora está desaparecendo e pode ser concluído quando a pessoa chegar lá. Então, o que é muito bom é que, com meu wrapper div selecionado, eu quero usar esse deslocamento e isso se deve à janela de visualização. visualização é como tudo o que a pessoa pode ver de cima para baixo. E eu quero compensá-lo para que o carregamento possa ser uma porcentagem após o, após o início da página. Então, provavelmente vai carregar, digamos que esse seja meu 100%. Vai carregar 17% por lá. Ele vai começar a ativar o K. Se eu aumentar para curtir, é difícil de explicar. Em até 40%. Ele só vai começar a ser ativado quando estiver meio que 100% dele, vai esperar até chegar a 40% na página e depois será ativado. Vai ser um pouco estranho. É um pouco demais. Então, vamos dar uma chance. Você será ativado após 20, nós lhe enviamos isso. Lembre-se de começar pelo topo. Dê uma prévia. Role até o fim. E você pode ver que começou bem acima na página. Desligue e ligue novamente. Aí está você. Então, o que mais você pode fazer? Você pode fazer um atraso em vez de uma compensação. O offset aguardará a parte física de quanta rolagem será feita. Você poderia parar isso de volta a zero e dizer que eu quero atrasar, ou gostaríamos que demorasse por esses mini milissegundos, 1.000 milissegundos é 1 s, ok? O que leva muito tempo. Ok, então metade são 500 milissegundos. Você vai, vamos tentar. Então, vamos pré-visualizar. Vamos fazer um tipo semelhante de coisa. Veja isso. Se eu rolar para baixo, só vai levar meio segundo até que ele carregue, você decide o que quer fazer. Provavelmente é melhor usar o offset porque ele vai esperar por um exame físico como o quão alto ele é. Enquanto o cronômetro, veja isso, eu posso meio que enganar o cronômetro se eu for aqui e esperar, e eu vou simplesmente deixar que não aconteça. Ok, vamos mais uma vez devagar com meu mouse. Vá lá. Você a vê carregada? Eu vi o pico e depois comecei. É um pequeno cronômetro, o que funciona para você. Não há realmente certo ou errado. Agora, vamos levar isso um pouco mais longe porque eu queria fazer com todos eles. Então, o que podemos fazer é examinar e editar cada um deles, fazer exatamente o mesmo processo. Será útil porque você ficaria bom nisso. Mas digamos que eu tenho isso, eu tenho essa interação. Aqui embaixo está escrito, ei, as configurações do gatilho. Isto é, eu gostaria que não fosse o elemento. Agora, esse é o momento em que estou fazendo isso com aquela coisa física que eu queria fazer com tudo que tem o mesmo nome de classe. Lembre-se que tivemos, temos aqueles eventos da classe div e você pode ver que eles são aplicados a esse e aquele. Então dizemos classe, Bom, Bom, Todos eles, por favor, olhem, todos eles têm relâmpagos. E é uma prévia. Aqui vamos nós. Então, vá até o topo. Vamos descer. E você pode fazer vários elementos. Você poderia fazer isso em toda a seção? Você provavelmente poderia facilmente fazer a seção então. Você poderia ter feito exatamente a mesma coisa com a seção e ela faria tudo muito mais fácil do que o que eu acabei de fazer. De qualquer forma. O bom disso, porém, é porque é reutilizável se eu o usei, enquanto divide elementos anteriores. Se eu tiver outra coisa, vamos repassar isso. Em um Div. Preciso embrulhá-lo em uma div? Acho que posso simplesmente dar a ele o nome da classe dos elementos de análise div. Isso vai funcionar. Eu deveria praticar essas coisas antes de ir e te mostrar. Vamos dar uma olhada no topo , provavelmente não vai funcionar se funciona totalmente. Tenha fé em si mesmo, então essa coisa é reutilizável , desde que você use o mesmo nome de classe. A próxima coisa que eu quero fazer é realmente compensar isso no momento, certo? Todos eles simplesmente aparecem ao mesmo tempo. Eu quero que um desapareça e o próximo, o próximo. Portanto, você não pode fazer isso com esse tipo de estrutura que temos agora, em vamos aplicar a mesma coisa a todas as classes porque elas se aplicaram um pouco. E eu vou dizer aplicado ao elemento novamente. E isso vai me repetir. Eu vou dizer: Tudo bem, então temos uma compensação de 20% de fade in. Podemos fazer isso, mas de forma repetitiva. Então, o próximo div pass div pass div eventos passados. Vamos dizer, vamos adicionar o elemento trigger de l. Role até a visualização. Que ação gostaríamos de pensar? Eu quero que ele desapareça e quero compensá-lo em 20%, ainda assim, na verdade, talvez precisemos que este vá para 30%. Há um pouco mais alto antes de realmente começar a ser ativado. Então, é meio que uma maneira de cronometrar. Também poderíamos fazer isso com o atraso real, assim como fizemos antes. Depende de você, vamos tentar. Você tem um gatilho de rolagem para visualização. A ação está desaparecendo. Eu quero que desapareça depois de uma compensação de Woody. Não tenho ideia de quanto tempo vai demorar? Provavelmente não vai correr muito bem. As porcentagens provavelmente são um pouco altas. Comece pelo topo. Dê uma prévia. Vamos continuar. Ei, eu estava certo. E acho que também tentei adiar. Vamos tentar o atraso porque foi um pouco instável. Então, com o deslocamento de página, vamos manter tudo em 20 por cento. Então, entre nisso. Vou mandar zero para este. No próximo, abordaremos e diremos para ficar 20 porque não quero que isso aconteça muito cedo. Mas vamos ter um atraso de, digamos, um quarto de segundo, 250 milissegundos. Nós vamos. A próxima aqui, é o mesmo tipo de coisa. Coloque-o de volta em 20%, 20% de desconto na página. Bartlett tem meio segundo, então 500 milissegundos. Tudo bem, vamos dar um dos melhores. Ah, sim. O que você acha? É uma coorte ou fará animações personalizadas posteriormente no curso. Mas, no momento e na maioria das vezes, eles trabalharam muito bem nesses tipos de pré-construídos e esses elementos são acionados. Tudo bem, meus amigos, isso ocorre quando você está rolando em uma página no Webflow. 28. Projeto de curso 04 - interacções: Olá a todos, projeto de classe número quatro. Este é para criar suas próprias interações. Quer criar dois deles, como fizemos neste curso. Um para o botão e algo que está na rolagem da página, por exemplo, membro, esse é o botão ao passar o mouse. Ok, você pode fazer o que quiser. E a rolagem da página nos meus casos está desaparecendo, mas você pode fazer o que quiser. A melhor maneira de compartilhar comigo é por meio de vídeo. Então, eu estou em um Mac. Eu sei que você pode pressionar Command Shift F5 e gravar uma seção da tela e depois enviá-la para as tarefas, projetos ou comentários, dependendo de onde você está assistindo. E às vezes é mais fácil simplesmente carregá-lo primeiro no Vimeo ou no YouTube e postar o link para você em um PC. Não tenho certeza de como você pode fazer isso no seu PC. Então, basta pesquisar no Google como fazer isso no seu PC. Este software de gravação de tela no Mac e no PC. Eu criei o Google sobre como fazer isso. Se você não conseguir, veja, nem todo mundo pode gravar sua própria tela. Se você não puder, aceitarei apenas capturas de tela. Ok, então veja se você consegue fazer o vídeo. Adoro ver o que é. Pratique, divirta-se, divirta-se e nos vemos no próximo vídeo. 29. Como compartilhar com seu design com seu cliente: Olá a todos. Neste vídeo, veremos compartilhar o que fizemos com nosso cliente. Como fazemos isso? Agora estamos fingindo no momento que este é um trabalho em andamento. É um trabalho em andamento, mas é isso que estamos fazendo agora. Queremos compartilhar com o cliente um pouco do grande final finalizado. Anunciando isso para o mundo. Isso é tipo, Ei Jeff ou Ginny, e é aqui que eu estou fazendo . O que você acha? Bem, talvez seja fazer alguns testes para que as pessoas possam resolver isso, encontrar erros ou qualquer coisa faltando. Como fazemos isso? Super fácil. Com seu site aberto, vá para publicar, e isso já deve estar marcado e basta clicar em publicar como os domínios. Vamos fazer isso rapidamente e depois vou voltar atrás e mostrar algumas outras coisas. Então, está ao vivo na Internet agora. É muito empolgante chegar lá. Clique nesta pequena seta aqui, ou você pode copiá-la e colá-la, ou ela deve abrir e dizer que meus amigos são o seu site na internet. É totalmente viável. Ok, vamos lá. E você pode copiar e colar isso, enviar para o seu cliente e dizer: Ei, dê uma olhada. É muito empolgante, se você é novo no design da web, colocar suas coisas lá fora e realmente on-line, em vez de ficar preso no Webflow, no Photoshop , no Figma ou no XD onde quer que sejam seus primeiros designs. Seja um grande marco. Viva. Vamos dar uma pequena olhada aqui. Então, esse é o domínio que você vai usar. Pense nisso como um domínio de teste. Tão estranho. Meio usado em web design, pois como um rascunho do site, é totalmente viável. Não há nada de errado com isso. É apenas no que é chamado de subdomínio. Portanto, o domínio principal aqui é o fluxo de trabalho dot io. Essa outra ideia, kayak club dot workflow to IO, o subdomínio do domínio principal. De qualquer forma, algumas pessoas o chamam domínio de teste e é simplesmente bom, somos uma forma de trabalho em andamento. Eventualmente, você adicionará seu próprio domínio personalizado, o que faremos juntos. E estará em um site. Ele pode viver neste. Simplesmente não é um URL bonito. É um pouco pouco profissional. Mas se você tem um site pouco profissional, favor, use esse subdomínio. Agora, se você quiser verificar e desligá-lo novamente, se você cancelou a publicação, ele o retirará da internet. O único problema é que se eu for até aqui e atualizar minha página, você fica um grande velho para quatro eras, os arameus, o site não pode ser encontrado. Ok. Então, se eu ligá-lo novamente, ele será encontrado novamente. Então, é como ligar e desligar. E uma coisa que você pode estar perguntando aqui é que há algumas coisas que você pode querer ativar. Ok, então eu vou para as configurações do meu projeto. Quem se lembra de onde estava? Fizemos no início, eram quatro lugares. Analisamos três deles. O designer, lá estava o editor, o que faremos mais tarde. E depois as configurações do projeto e o painel. Estávamos todos escondidos. Você se lembra disso, vá. Ok, configurações do projeto. Configurações do projeto para o clube de caiaque de veados. Agora vou mostrar algumas coisas que você provavelmente ainda não poderá fazer se estiver no plano gratuito. Ainda não fizemos nada. Ok? E se você fizer isso, vou mostrá-los porque você quer dar uma olhada, mas é necessária uma versão paga do Webflow. Então, em geral, uma aqui, a senha do site que as pessoas gostam de ativar quando gostam de novas e eu não me preocupo com isso. Eu costumava, porque ninguém vai adivinhar que esse tipo de clube de caiaque de veado quando flutua IO, não há como encontrá-lo. Bem, é difícil encontrar, mas você pode ativar isso, mas precisa atualizar sua hospedagem. Eu vou te explicar isso mais tarde também. Se você ainda não se lembra, se quiser fazer o upgrade para hospedagem, pode usar meu link aqui na tela. Outra coisa que você pode querer fazer é se ele vai ficar lá por muito tempo, está na aba SEO. Há uma aqui chamada indexação. Se você ativar isso, significa apenas que o Google não vai indexá-lo. E o que eles querem dizer com indexação é apenas adicioná-la aos resultados da pesquisa, porque isso é apenas um trabalho em andamento que ainda não está concluído. É o subdomínio errado, pode ser um marcador de espaço reservado , como um ALS. Então, estamos apenas dizendo que eles estão dizendo Google, não entre, pesquise no meu site e adicione-o aos seus vastos resultados de pesquisa. Muito obrigado. Mas, novamente, se você clicar em Salvar alterações, vai dizer: ei, você precisa atualizar sua hospedagem. Então, no momento, e não é isso que queremos fazer. Ok, então vou voltar ao SEO. Então, você pode querer ativar essas coisas ou pode ter essas perguntas na cabeça. Sim, você pode fazê-las. Sim, você precisa de um plano de hospedagem pago, mas, no momento, não se preocupe com isso. Como se eu não me preocupasse com isso. Aqui está o que estou tentando transmitir. Você pode achar que ele precisa de uma senha. Você pode totalmente fazer isso. Mas só compartilhar esse link é bom. Obviamente, quando está ligado, você pode realmente publicar outra dica nas sessões. Não que você nunca faça isso daqui, mas você pode dobrar o site a partir daqui. Você pode cancelar a publicação nas configurações do projeto do site. Mas acho que é mais fácil trabalhar assim. E se você quiser ativá-lo e desativá-lo, basta informar ao cliente que há um dia de testes e você desativará o URL. Tudo bem, isso é tudo para este. Vamos passar para o próximo vídeo. Te vejo lá. 30. Quanto é que o site de hospedagem de fluxo web vs espaço de trabalho: Olá a todos. Neste vídeo, veremos a hospedagem no Webflow, os prós e os contras. Também veremos qual é a diferença entre um plano de site e um espaço de trabalho. Está pulando. Tudo bem A primeira coisa é que, quando flui, aposto que estão no escritório deles agora esperando que eu termine este vídeo para que eles possam atualizar o idioma os preços e os recursos que você obtém. Portanto, certifique-se de que vou examiná-lo agora, mas isso pode mudar, o idioma pode mudar, mas fornecerá uma boa visão geral. Então, eu estou no meu painel aqui. Você verá que esse é o site em que estamos trabalhando. É chamado de site de status. Há uma outra coisa chamada Iniciar um local de trabalho. Essa foi provavelmente a coisa mais difícil entender quando comecei. Então, vamos discutir esses. E eu vou pular para esta página aqui. É a redução de preços do webflow.com, e provavelmente é o mesmo. Não quero discutir as duas opções diferentes aqui. Há algo chamado de planos de sites e, na parte inferior , planos de espaço de trabalho. Onde está a diferença? Resumidamente, um plano de site é hospedagem, é o que eles chamam de planos de sites frios e planos de economia. Essas coisas são as mesmas, apenas níveis diferentes aqui, mas isso é hospedar seu site em algum lugar na internet onde ele possa ficar onde as pessoas possam visitá-lo. Alguém precisa hospedá-lo. Então é isso que esse baú é. O plano do espaço de trabalho é você como designer, você como designer é como no momento em que o estamos usando gratuitamente. Mas digamos que eu queira criar mais do que isso em sites hospedados. Eu preciso de dez deles. Preciso exportar o código. Preciso adicionar proteção por senha. É aí que você, como designer, atualiza isso. Você pessoalmente atualizará isso e pagará $19 por mês, então todo site precisará de hospedagem. Então, se você tem dez sites, é dez vezes 12. Todo site precisa de hospedagem, mas você, como o designer precisa, pode tentar obter um site gratuito, mas talvez seja necessário fazer o upgrade para este aqui se quiser criar mais de um site porque ele desbloqueia muitos recursos. Então é isso. Você pode se safar com apenas um pagamento. Você pode precisar dos dois se quiser entrar seriamente no Webflow Essa é a versão magra. Vamos examinar um pouco mais a fundo os planos do site, esse plano de comércio eletrônico, então estamos nesse plano de dados. A grande desvantagem aqui é que você não tem um domínio personalizado, ok, todo mundo vai querer Daniel scott.com, não um hífen de veado, hífen caiaque com largura de ponto, load Io. Ok. Então, isso se você precisar atualizá-lo e isso é tudo o que você está fazendo. Digamos que este site seja o seu site. É estático. Não adianta muito e você só quer o nome do domínio. Isso é tudo o que você precisa para pegar o básico, obter o domínio personalizado e pronto. O próximo salto é um CMS. Então, faremos um CMS quando criarmos seu próprio blog. É quando há um monte de itens e você me vê. É como postagens de blog ou podem ser itens de portfólio ou CMS, Sistema de Gerenciamento de Conteúdo. Se você precisar de algo disso, você quer que o cliente possa atualizar itens ou postagens do blog. Você vai precisar ir até este aqui e há apenas uma restrição aos itens do CMS, ok, se você tem mais de 2000, precisa pular para aqui. O mesmo acontece com a largura de banda. K. 50 gb é bastante para um site pequeno 200 é bastante. E então você começa a entrar em 400 shows. Mas é como as tendências, quantidade de informações que vem do seu anfitrião para as pessoas. Basicamente, é baseado no quanto eles realmente precisam baixar imagens e vídeos e todo tipo de outras coisas. E, na verdade, o que importa é a quantidade de tráfego que você tem. Muitas vezes, quando você alcança esses preços mais altos, geralmente está gerando mais receita e isso é traduzível. Pague menos por menos tráfego, pague mais por mais tráfego. O grande salto aqui são os planos do site de comércio eletrônico aqui. CMS, sites estáticos, perfeitos. Quando você quiser começar a receber pagamentos, ok, você terá que pular para o básico deste aqui quando começarmos. É aqui que o Flow começará a ajudá-lo com pagamentos, carrinhos de compras pedidos e remessas e todas essas coisas divertidas que são incríveis, muito úteis do Webflow, mas custam um pouco mais. Então, essas são exatamente a mesma coisa apenas com níveis diferentes. Como um dia em que um clube de caiaque provavelmente vai ficar bem nisso porque eu quero o nome de domínio extra e provavelmente não vai ter mais de 50 GB. Diz que quero começar a vender coisas a partir dele. Eu vou ter que atualizar para o mínimo disso. E, novamente, isso meio que melhora dependendo do seu nível, quantas coisas estão em sua loja e do seu volume de vendas. Você pode dar uma olhada em tudo isso. Eles têm uma espécie de visualização de todos os recursos planejados. E você pode rolar para baixo e ver o que funcionará para você e o você pode fazer e atualizar se precisar. Tudo bem, essa vai ser minha versão magra. Não quero passar por todos os recursos porque eles vão mudar. Eu sei que é, mas vá para preços, visualize ou planeje os recursos para a hospedagem k, que é o site ou os planos de comércio eletrônico. Em seguida, dê uma olhada no espaço de trabalho e veja o que vai funcionar para você. Se você é novo, talvez se inscreva uma conta mensal e possa fazer o upgrade para anual se quiser economizar algum dinheiro a longo prazo , antes de ir. Para mim, os prós e contras são que é um pouco caro em comparação com a hospedagem. A hospedagem tem que ser paga, alguém tem que pagar por ela em algum lugar. Já passaram os dias livres das cidades geográficas, mãos para cima. Quem se lembra daqueles em que costumavam financiá-lo com anúncios, acho que você tem que pagar pela hospedagem em algum lugar. Mas o problema aqui é que é um pouco mais caro do que em outros lugares. Se você já fez esse tipo de coisa antes, não é escandaloso, mas meio que leva a profissionais e se sente confortável sentando seu próprio anfitrião do que uma coisa. Se você não estiver, eu posso configurar o domínio. Eu posso configurar, posso configurar um banco de dados e configurar meu host em outro lugar. E, mas eu gosto disso porque é alguém que está cuidando dele. Os patches de segurança são todos executados por outra pessoa. Para mim, alguns dos grandes estão prontos que o cliente possa atualizá-lo para que ele possa acessar o editor e fazer atualizações para adicionar nossas próprias postagens no blog, adicionar seus próprios itens à loja, organize seus próprios pedidos. O formulário que é todo tipo de terceirização do que é tratado por eles. Tudo bem, é isso. Planos de sites e comércio eletrônico são hospedagem. E esse aqui embaixo é basicamente ou é um espaço de trabalho? Você está pagando para usar o software? Estou usando aspas aéreas porque é uma espécie de site, mas software como serviço. Lá vamos nós. Tudo bem. Eu provavelmente estava afirmando o óbvio, mas, de qualquer forma, espero que tenha sido útil se não fosse. Me desculpe. De qualquer forma, te vejo no próximo vídeo. Vamos começar a tornar nosso portfólio empolgante. 31. Os melhores atalhos e dicas e truques para a velocidade: Você está pronto? Essa é empolgante, dicas, truques, atalhos. Agora que temos algumas habilidades de Webflow em seu currículo, vou compartilhar com você algumas coisas para tornar seu dia muito mais rápido. Faça você parecer impressionante também na frente de seus colegas. Permaneça até o fim. Eu tenho ovos de Páscoa especiais com fluxo de vento escondidos lá no final. Tudo bem, provavelmente o mais usado, ou pelo menos para mim, é em um Mac, é Command Shift P. Em um PC, é Control Shift P, aperte isso e ele apenas alterna entre. Você pode simplesmente continuar pressionando esses botões e ele ativa e desativa o modo de visualização, em vez de tentar clicar em mais essa difamação aqui em cima. Ok, então esse é o Command Shift P em um Mac, controle o Shift P em um PC, ele faz com que o licitante entre no modo de visualização e você pode, no teclado, olhar para o teclado, os números que estão acima da cabeça das letras 12345, argila. Você pode simplesmente pular entre todas as visões diferentes. 123455 não é o que você quer. Basta abrir apenas 1234 ou até mesmo você pode fazer isso no modo de visualização e no designer. Um-dois-três-quatro, lembro-me de Command Shift P ou control shift P em um PC, você pode ver o modo de visualização. próximo super incrível é B volta ao seu designer em uma prévia. E no seu teclado você tem a, S, D e Z. Eles estão todos meio que agrupados em um teclado em inglês. Eles são todos muito úteis. Esses são os que eu mais uso. Se você está usando muitas interações, você pode ver se você passa o mouse sobre elas, é H. Nunca me lembro do atalho para interações porque não estou lá o tempo todo. Aqueles que eu estou lá o tempo todo. Nosso ASD Z a é Ed. Isso faz sentido. A para Ed. Eu sempre entro no anúncio e depois volto para o Navegador, que é z a z, a z. O outro é S para estilos. Veja isso se você estiver aqui e estiver em outra coisa, clique em S para estilos que fazem sentido. A para ED, S para estilos. E quais seriam as sessões. D não faz sentido. Faz sentido porque está ao lado dos outros úteis do seu teclado. Mas aí está. Como cargas D eu uso cargas e Z para o navegador. Lembre-se de que existem muitos outros. Você só precisa passar o mouse sobre eles. E se você estiver usando os carregamentos do Style Manager, você provavelmente será o único, mas é G. Você vai, tudo bem, ASD z. O próximo é super incrível é o atalho para encontrar tudo. Então eu estou, estou aqui e quero adicionar algo vez de entrar no meu a e depois rolar e descobrir como um componente, talvez esteja sob layouts. O que você pode fazer é ir direto ao ponto e clicar onde quiser e pressionar o Comando E no teclado. Consegue ver isso? Encontre qualquer coisa que apareça, você só precisa saber o que digitar. E se eu quiser outra imagem, começo a digitar a imagem. Aí está você. Ele adiciona uma imagem pronta para ser usada. Então, eu quero adicionar outro título abaixo do texto deste parágrafo. Então o Comando D e eu vamos bater, lá vamos nós. Pressione Enter. Eu apenas digitei as primeiras letras e apertei Enter e comecei a pressionar, se você se lembra vagamente como é chamado, Comando E. Oh, isso é Comando D em um Mac, controle E em um PC. Desculpe, pessoal do PC, eu esqueci. Sim, OK, então comande E em um PC e clique em Rodapé. Olha isso. Tem um rodapé, pé gigante levantado. Não consigo adicionar um rodapé dentro disso. De qualquer forma, você entendeu. O comando K também funciona. Também controla K em um PC. Se alguns desses atalhos não estiverem funcionando ou não mudarem, você pode descer para ver esse pequeno ponto de interrogação ajuda do Hugo e nos atalhos de teclado. E vai listar a toupeira que estou lhe dando as boas. Você pode ver em um Mac que é Command E e Command K. Antigamente, era apenas Command K, mas a tecla Command em um Mac se abria. Não me lembro. Essa patrulha de Michigan é outra coisa? Então eles o mudaram, mas levantaram o antigo, que é confuso de qualquer maneira. Então isso é Controle ou Comando E, encontre qualquer coisa. Agora isso fica melhor. Qual a melhor forma de usar, ei, quando você pode adicionar uma aula automaticamente? Bem, simplesmente veja isso. Digamos que eu tenha esse estilo aqui. Vou adicionar uma classe quando estivermos passando por isso e podemos escolher entre as existentes ou digitá-las para adicioná-las. Veja isso. Se eu pudesse usar meu teclado, clicar nele e pressionei Command ou Control, Return nas teclas do meu teclado, ele pulou para cá. Aqui estou eu. Eu posso digitar aquecimento porque nomeei o meu relativamente bem. Lá vamos nós. Vamos para esse Retorno de Comando ou Retorno de Controle. E ainda vou digitar o parágrafo de um instinto. Eu tenho uma mensagem. Aí está você. Estou usando minhas flechas para descer. Aí está minha grade de blocos de texto. Aqui vamos onde fica legal é o Festival e desfazemos o meu. Comando ou Controle Z. Para voltar deixe-me mostrar um pouco mais de um fluxo combinando alguns deles. Então, abaixo deste parágrafo, eu preciso de uma, digamos, outra batida. Então, vou usar o Comando E para recarregar o site. O atalho que eu apertei, não tenho certeza. É isso de novo. Então, aqui vamos pressionar o Comando E. Vou digitar pressionando, pressionando Return, comando retornado para adicionar a classe. E eu vou bater até um. Assim, você pode adicionar coisas e estilizá-las sem passar por todos os menus. Você adiciona o comando ou o Controle E, junto com o Comando ou o Retorno de Controle. Este aqui, botão, eu vou usar Command Return. O que mais eu esqueci em Mais estilos de botão. Eu só tenho um botão de navegação. Você pode adicioná-los. Digamos que eu só queira adicionar um. Quero adicionar um coágulo e quero adicionar uma nova classe aqui. Então, vou chamá-lo de botão e vou chamar esse de retorno roxo. Ele criou uma classe. Em vez de selecionar um, é o mesmo atalho Command ou Control Return. E então eu posso ir até aqui e dizer que, na verdade, o fundo deste agora será roxo. Lá vamos nós. Tudo bem, o próximo é bem legal. É esse aqui. É chamado de modo X-Ray. Esse é o atalho Command Shift X ou PC. Será o Control Shift X. O que ele faz? Isso torna tudo preto e branco, o que não é muito útil. O que é útil, porém, é quando estou nesse modo, observo quando passo o mouse sobre, você vê que não estou fazendo nada, estou apenas pairando e ele está me mostrando todo o preenchimento e onde está vindo de. Consegue ver isso? Por que isso está aqui? É porque há estofamento que é verde. O que está diminuindo um pouco isso? É porque há azul que é margem, o mesmo acontece com isso. Se eu clicar, não estou nem mesmo clicando apenas passando o mouse sobre esta seção aqui. Tem acolchoamento nele. Isso é o que está impulsionando tudo isso. Não é margem do título. Está passando da seção herói. Então, é apenas uma maneira muito útil de se movimentar e dizer, o que está fazendo isso? Faça isso. Tudo bem, isso é Command Shift X ou Control Shift X para ligar e desligar e apenas trabalhar para ver o que está sendo afetado. Ótimo. Se você está trabalhando no projeto de outra pessoa e não consegue ou no seu de muito tempo atrás e não consegue se lembrar do que está realmente fazendo as coisas fazerem o que deveriam estar fazendo. O próximo está aqui nos meus estilos, que é S para estilos. Estou no painel Estilos. E se você pressionar a tecla Option em um Mac, tecla 0 em um PC e clicar em qualquer uma dessas pequenas setas ou divisas. Todos eles fecharam e é maneira agradável e organizada de trabalhar e simplesmente entrar e sair, em vez de abri-los todos, que tem a mesma tecla, Alt ou Option, e rolar através deles e tentando descobrir onde eles estão. A outra coisa boa sobre essa opção é que você pode começar a ver se eu a selecionei. Está me mostrando que essa imagem, essa classe, pelo menos que selecionei aqui, está fazendo coisas sobre layout e espaçamento, mas nada mais. Não há pontos azuis. Isso significa que algo está realmente fazendo algo nesta aula. E nesse caso, é a tela configurada para bloquear. O tamanho tem alguma margem. Esses aqui, essa classe não faz nada com posição, absolutamente nada, sem pontos. Os âmbar aqui estão apenas dizendo que, na verdade, há uma largura máxima vindo de outro lugar. E é por isso que é Amber. Como faço para descobrir o que está tornando isso 100%? Você mantém pressionada a tecla Option em um Mac, tecla alt em um PC e apenas clica nela. Na verdade, funciona a tecla Command ou a tecla Control em um PC. E diz os valores provenientes de todas as etiquetas de imagens. Veremos essa etiqueta mais tarde. Mas há momentos em que vamos dar uma olhada nessa tipografia de texto. Não há nada sendo feito aqui. Muitas, muitas coisas de MBA. Vamos passar o mouse, passar o mouse sobre isso. Vamos dar uma olhada na cor, enquanto a cor proveniente mantém pressionada a tecla Command em um Mac e a tecla Control em um PC. Diz, oi, está vindo da seção chamada herói. Então é daí que ele está obtendo sua cor. Então, eu poderia clicar nesta seção aqui e dizer: Sim, aí está, é azul, é branco. Está afetando tudo o que está dentro dela. Tudo bem, o próximo é escolher unidades. Então, digamos que essa batida aqui, queremos ir. Na verdade, sim, vamos fazer isso. Vamos fazer a topografia. E digamos que não queremos que sejam pixels. Vamos usar metas, ok, você realmente não precisa deixar isso de lado e dizer que eu quero miras ou aros. Na verdade, posso simplesmente desfazer isso. Vou apenas digitar, quero que seja na RAM e aperte Enter. Você vê que ele acabou de atualizar isso e ajustá-lo. Em qualquer um desses campos, você pode digitar medidas e dizer que eu quero que o espaçamento seja uma margem de 50, mas eu queria ser percentuais. Em vez de alterá-lo de pixels, posso simplesmente digitar em porcentagem e isso fará com que seja 50%. Tudo bem, desfaça, desfaça. As coisas estão ficando instáveis e vamos nos livrar dele. Próximo, tudo bem, este próximo é mais útil quando você tem sites mais complexos, farei um desses mais tarde. Mas para colocar tudo isso nesse vídeo aqui, vamos clicar nessa imagem aqui. E se eu usar minhas setas esquerda e direita, você pode ver que ela se move por tudo o que é considerado um irmão. Tudo o que está nessa seção chamada herói ou esses caras, eles são todos amigos. Eles são todos irmãos. Eles estão todos no mesmo nível. Você pode clicar aqui e usar a esquerda e direita apenas para selecionar os diferentes. Pode ser complicado selecionar essas coisas. Há muitos dados na página e talvez não sejam muito grandes. Então, a esquerda e a direita são os irmãos para cima e para baixo. Assim, posso usar minha seta para cima para selecionar o pai. Nesse caso, é o herói da seção. Nós vamos. Então essa é a diferença. Às vezes, você pode até clicar na seção abaixo. Então, você clica na criança e pressiona a seta para cima e isso selecionará tudo o que está fora dela pode ser muito útil quando não há espaço. Talvez esses botões estejam cobrindo o fundo. Não podemos selecioná-lo. Então, podemos simplesmente dizer que você seta para cima, selecione o pai que trabalha aqui embaixo. Porque lembre-se de que há tags div aqui. Podemos usar o navegador, é claro, mas basta clicar nessa imagem, clicar na seta para cima e selecionar a div principal para baixo, começar a selecionar os filhos. Então eu posso dizer eventos passados da Seção, eu posso descer a seta, a seta para baixo e ir mais fundo nela, o que eu nunca faço. Mas a seta para cima é muito boa. Selecionando o pai, continue. Eventualmente, você coloca o corpo no topo, o avô, ninguém o chama assim de Bowie. Tudo bem, o próximo. A próxima é clicar nas tags deste parágrafo aqui. Eu quero mudar o tamanho. Se eu clicar aqui, posso usar minha seta para cima. Você pode ver que ele se move através de 16, 17, 18, 19, para baixo, para cima e para baixo. Apenas as teclas de seta em qualquer um desses pequenos campos, você pode alternar até o próximo, que esta aba quando a altura. Ok, então você pode mexer com esses turnos, a aba volta. Legal. Eu uso isso o tempo todo. Mas vou acrescentar que você pode segurar Shift e usar a seta para cima. Você pode ver que vai em lotes e latas. Ok, e isso vale basicamente para qualquer uma dessas opções. Então, digamos que eu queira que o espaçamento na margem aqui comece em um. Posso clicar aqui e usar minha seta para cima para ir individualmente, segurar Shift para passar por cima e grandes partes. Você pode vê-lo se movendo para a pátria? Tudo bem, como você o redefine? Você pode pressionar o botão de reset na maioria deles ou manter pressionada a tecla Option ou Alt e clicar neles e ele apenas o redefinirá para o padrão. Lembre-se do zero. Lembre-se de que o padrão às vezes não é. Nesse caso, aqui, se eu redefini-lo para o, se eu colocá-lo em zero para voltar ao padrão, não ao padrão. O padrão é, na verdade, provavelmente 16. Segure a opção, clique nela e, na verdade, 14 é o padrão para isso. Portanto, lembre-se de que clicar em Option ou Alt é melhor para redefini-lo e tirá-lo de lá. Não volte ao que era por padrão. Você entendeu a ideia. Não tenha medo de Alt arrastar as coisas. Então, mantenha pressionada a tecla Alt em uma opção de PC em um Mac e assista a isso. Eu posso arrastar outro desses e olha, eu tenho dois deles. Você sabe, o título aqui, mantenha pressionada a tecla Alt ou Option e apenas arraste-a e ela a duplicará enquanto você arrasta. A outra coisa útil é que você pode clicar com o botão direito do mouse no Webflow. Eu posso clicar com o botão direito nisso, entrar em coisas diferentes. Copiar, duplicar. Eu posso adicionar uma classe à, posso renomear a classe que está por aqui, posso adicionar um gatilho. Veja isso aqui, em vez de ir para essa opção aqui, eu poderia transformá-la em um símbolo. Eu posso movê-lo para cima e para baixo até o pai. Eu só estou lendo isso agora. E é meio estranho porque em um aplicativo baseado na web como esse, você assume que o botão direito do mouse fará todo tipo de coisa do Googly, não o aplicativo real, mas de alguma forma fluimos de assumir o controle do mouse e às vezes não funciona aqui. Você pode ver que essa é a coisa normal que você vê no navegador Chrome aqui que você obtém coisas do Webflow. Outra coisa que você pode fazer é com alguns desses campos, especialmente esses tipos de campos singulares que têm lapas. Você pode manter pressionada a tecla Option em um Mac, tecla alt em um PC e simplesmente arrastá-las. Você pode ver a pequena seta alterada minha opção em um Mac, alt em um PC e simplesmente arrastar essas coisas para cima e para baixo novamente. Basta colocá-los visualmente onde quiser, alguns deles gostam dessa margem aqui, você realmente não precisa segurar nada. Basta arrastá-los. Você se acostuma com quais fazem quais? Esses tipos de estilo infográfico, você pode simplesmente arrastá-los. Mas em qualquer um desses campos que você vai digitar, você pode manter pressionada a tecla Option em um Mac, tecla alt em um PC apenas para clicar e arrastar, bom. Falando em arrastar até aqui , já vimos isso antes, mas se você pressionar a tecla de opção aqui em cima e arrastar, notará que, mesmo clicando na tecla para baixo, você pode ver isso, mas os destaques. Mostrando a você que eu vou fazer, os dois lados parecem iguais. Ambos têm 98 anos. Se você mantiver pressionada a tecla Shift ou a tecla Command, a tecla Shift. E arraste-os, eles farão a parte superior, inferior e levantarão. Ótimo para coisas como as seções em que você deseja todas tenham alguma margem ou nesse caso, que o preenchimento seja o mesmo. Mantenha pressionada a tecla Shift e arraste uma delas. Todos eles vêm para o passeio. E a opção Alt é de cada lado, superior ou inferior. Fazendo uma bagunça com essa. Além disso, enquanto estivermos aqui, lembre-se de que você pode fixar o Navegador se sua tela for grande o suficiente. É essa opção aqui, significa que ela simplesmente não desaparece. Caso contrário, o navegador é muito útil e você precisa abri-lo sempre. Fique aí, por favor. Obrigada. E por último, mas não menos importante, o mais empolgante de todos, é o ovo de Páscoa dentro do Webflow, sendo o designer, não faça mais nada. Na verdade. Digamos que eu tenha isso. Eu fico tipo, você sabe, o que? Precisa ser algo melhor do que impacto. Você não quer mais do que impacto. É isso que você está pronto para digitar IDD, QD e depois voltar. E olhe dias felizes, apareceu o quadrinho Sans. Eu te odeio Comic Sans. Mas o ódio deles é uma palavra forte. Desculpe, Comic Sans, amantes do Comic Sans. O que foi esse atalho novamente, é IDD, QD. Você ganha pontos extras. Se você sabe o que é isso. Alguém se lembra de onde isso era? Deixe-me saber nos comentários. Se você fizer isso na piada de Estelle para aqueles de uma certa safra, certo? Esses são todos os atalhos que eu adoro usar. Você pode ter o seu próprio, se tiver um que queira compartilhar , ameaçou os comentários. E se você está se perguntando, eu também não consigo descobrir uma maneira de desligá-lo. Bem-vindo. Uma vez ativado para um projeto, parece que não consigo desligá-lo. Desculpe por isso. Lá vamos nós. Para o próximo vídeo. 32. Como alterar os estilos padrão no Webflow: Olá a todos. Neste vídeo, veremos como alterar os padrões dos sites do Webflow. Em vez de adicionar classes a tudo o que vamos ver e dizer esse hit, vamos dizer todas as batidas em todas as páginas. Eu gostaria que você tivesse esse tamanho de fonte diferente. Você pode ver que isso mudará todas as instâncias desse golpe sem precisar criar uma classe. Existem algumas tags padrão subjacentes que podemos usar. Podemos ir ainda mais longe e pegar todo o corpo e dizer que tudo nesse corpo de todo esse site será uma nova fonte, Comic Sans. Lá vamos nós. Vamos acabar em uma posição de design muito ruim, mas com um ótimo entendimento de CSS. Então, só querer o design fica ruim, mas o conhecimento fica bom. Tudo bem, vamos nos aprofundar e alterar todos os padrões. Para este exemplo, eu criei um site, um novo não é nada demais. Se você quiser acompanhar, basta criar um site e um fluxo de trabalho em branco. E o que eu fiz aqui com o designer é que eu simplesmente adicionei um monte de elementos diferentes. Ok, desculpe, eu o coloquei em um contêiner e uma seção e alguns títulos e parágrafos, alguns links e alguns botões e algumas imagens apenas para que possamos mostrar a alteração dos padrões. E o que farei para tornar isso óbvio também. E vou colar a seção inteira copiá-la e colá-la. Então, eu tenho dois deles que vão realmente criar outra página e jogá-la sobre eles. Só para mostrar que, quando você atualiza uma, ela vai para todas as páginas ou para tudo neste site. Você pode mergulhar. Ok, você voltou. Bem, eu criei uma nova página, então eu tenho a página inicial e a segunda página, então vamos começar em casa. Então, digamos que eu queira estilizar meus títulos para todas as páginas. Eu sei o que precisa ser. Então, em vez de criar um estilo e aplicá-lo toda vez, como fizemos, passamos por aqui e dizemos vamos criar um novo estilo chamado acertar um. Não vamos fazer isso. O que vamos fazer é não ter nada digitado lá. Basta clicar aqui e essas rosas aqui, ok, essa tag HTML, essas enormes tags globais, já existem, elas são tags em nível de bloco. Eles dizem todos os títulos H1 em todo o meu documento. Esse estilo, aquele, legal. E você pode ver, por padrão, que há alguns desses padrões que vimos anteriormente no curso. Olha, é daí que vem. Você diz que, na verdade, eu não quero nada diferente de zero. Para mim, desapareceu. E eu quero minha tipografia, herói supremo. Quero que meu padrão seja, vamos usar, não sei. Quantos anos você vê aquele atualizado e aquele. E vamos para a página dois. Sabe o que vai acontecer? Segunda página. A segunda página também está pronta. Se você desativar essas tags em nível de bloco, isso é o que o carvão, elas serão atualizadas em todas as páginas. Você ainda pode adicionar classes combinadas a isso, ok, para alterá-lo. Você pode não dar a cor porque ela aparecerá em cores diferentes em páginas diferentes. Branco sobre preto, preto sobre branco. Você pode apenas dizer que será a fonte certa. É meio que se livrar das margens manter as margens ou alterar as margens. E você pode jogar com o tamanho da fonte, ok? Você pode dizer que meu tamanho padrão para um H1, em vez de alterá-lo toda vez, será 24. Ok, isso é o que você decidiu nesse caso, isso totalmente não funcionou. Isso criou uma classe porque ela não tinha aquela tag global de nível de bloco selecionada. Então, agora desfaça isso. Volte para onde estava. Ok, e se eu clicar nisso, você notará que não está lá. Quando eu fizer uma mudança, ela criará uma classe chamada bater. Não é o que eu quero. Então eu vou desfazer, clicar nele novamente, clicar aqui, clicar neste e depois dizer que vai ser 24. E espero que, se eu mudei esse tipo de página global, eu possa voltar para minha primeira página e todas elas tenham mudado todas as 24. Então, como você descobre o que mudar? Se eu clicar neste aqui, novamente, não digite nada e apenas clique. Você pode ver que há parágrafos antigos e eu posso decidir que todos os parágrafos novamente serão ótimas vibrações, terríveis. Então, o espaço depois todos esses parágrafos será, mas eles ficam, e você passa algum tempo trabalhando neles logo no início de um projeto. E então você pode adicionar classes combinadas posteriormente e mais tarde, se precisar fazer esse tipo de alteração padrão, volte para essas tags rosa, apenas certifique-se de que estejam selecionadas antes você vai e faz mudanças. O mesmo acontece com essa imagem. Você pode ver aqui que existem alguns padrões. Se você não tiver certeza de quais são os padrões existentes, sabemos por esse azul, as cores azuis. Então, lembre-se de pressionar Option ou Alt Option em um Mac, alt em um PC e eu tenho esse tipo de padrão. Você pode ver que as coisas azuis são os padrões que vieram do Webflow ou pode ser apenas web design em geral? Portanto, é um layout de exibição. É o membro padrão. Nós o alteramos logo no início para ser bloqueado. Você pode decidir, eu só quero que todas as minhas imagens sejam bloqueadas. Espaçamento. Há espaçamento em Haven. Você fica tipo, Ei, é azul. Diz que está fazendo alguma coisa. Na verdade, está definido como zero, o que não é levantado por padrão, na verdade é definido como zero pelo Webflow. O mesmo aqui. Tamanhos que atingem uma largura máxima de 100 por cento do tamanho real, para que não fique totalmente esticado e pixelizado. Isso não está ativado por padrão, Webflow fez isso por nós, assim como uma tag de todas as imagens, todas essas outras não têm nada aplicado a ela. E este aqui está recebendo alguns estilos de outro lugar. De onde está tirando isso? Essa é uma ótima transição, mas eu não planejei. Mas eu vou falar sobre isso neste vídeo de qualquer maneira. Então, o que eu posso fazer é quem é membro, como faço para descobrir o que está causando isso? E a cor. De onde vem o estoque? Ok, não é blues, não vem desse bloco HTML de imagens reais. Está vindo de outro lugar. Como você consegue isso? Mantenha a opção pressionada, clique nela. Este comando de opção. Comando em um Mac Control em um PC. E diz, ei, está vindo do peso corporal. O que esse lamenta? Estivemos estilizando isso, esse sucesso, ok, e fomos para as etiquetas antigas e todos os títulos são para Homer. O que podemos fazer é, na verdade , estilizar até um passo acima do bater para que possamos ir para o corpo. O corpo é tudo na página. Então, o que podemos fazer é que você pode ver que nós realmente estilizamos batidas propositalmente e definimos propositalmente parágrafo, parágrafo. Mas ainda com esses outros, eu ainda ganho um Aereo. Então, o que você pode fazer é modelar o corpo primeiro. Provavelmente é o primeiro a estilizar. Ok, então você clica em amigo. O mesmo aqui. Eu vejo que há um corpo ou páginas. Então, o que você pode dizer é que, na verdade, todo o tipo disso vai ser uma loucura. Então, podemos ver tudo IDD, QD. Não funciona quando você clica lá. Meu pai, d, Q, d. Olha Comic Sans. O padrão agora é Comic Sans e alegria enorme. Se não pedir nada. Se não disser especificamente algo como dois homer, o padrão será Comic Sans e meus 16. Ok, então estilize seu corpo primeiro. Também é bom para fazer a cor de fundo. Ok, então eu vou, minha cor de fundo vai ser essa cor. O prêmio de design vai para dançar, o corpo cuide da cor de fundo e de tudo que está dentro dele. Diz: Ei, todos vocês, vocês podem ler e dizer, eu quero que todas as fontes tenham esse tamanho e esse. A menos que eu o substitua porque o aquecimento é um pouco mais específico do que o velho amigo genérico. Então, a especificidade entra em cena e diz: “Eu não vou ser Comic Sans”. Eu serei o mesmo com o parágrafo se o excluirmos. Se eu entrar aqui e dizer, na verdade, vamos até meus parágrafos inteiros, entrar na tipografia e dizer, como faço para limpá-la? Porque eu posso mudar isso, mas não quero mudar isso. Eu quero limpar isso. Isso mesmo. Mantenha pressionada a tecla Option em um Mac, tecla alt em um PC, tudo bem, eu não vou dizer a ela o que fazer. Eu vou usar como padrão qualquer que seja o padrão em casos de microfone agora Comic Sans porque está vindo do amigo, Oh meu Deus, as listas aparecem k. Então, há muitas coisas. estilo aqui é muito importante para mudar por padrão, porque eu sei que toda vez que você faz algo assim está subjacente . Você pode ver o sublinhado? Há uma cor azul um pouco estranha. Você pode decidir, na verdade, agora que serei links. Então, vou deletar isso. Ok, vamos tentar como eu fiz essa aula lá. Acho que estava brincando com isso, mas vou dizer que todos os links agora tenho uma decoração de texto, topografia de, não quero que seja sublinhada. Eu quero que não seja nenhum. Muito obrigado. E eu não quero ser dessa cor azul. Quero que seja apenas a cor normal do texto que estou usando. Nem tenho certeza de qual é a cor do texto que estou usando. Você pode deixar o sublinhado lá para saber que é um link clicável. Bem, você pode não menos importante que o azul tenha sumido. Ok, o mesmo com os botões. Clique aqui. Há um link antigo. Então, todos os links são um pouco estranhos porque todos os links são muito parecidos com este aqui, que é o que decidimos? Os elos da bola são os mesmos. Então, quando você pergunta estilo, especialmente todos os links, um botão é um link estilizado, isso assume que o link é o mesmo e o mesmo quando você está lidando com algo chamado bloco de link, ele ainda é considerado um clique nele ou é um bloco vinculado? Ainda são considerados todos os links. É um dos poucos que tem um uso múltiplo. Mas se você estiver estilizando a mesma coisa repetidamente, dê uma olhada no nível básico. Passe um pouco. Tem uma aula sobre isso. Ok, exclua a classe e veja, remova, selecione-a, clique nela para ver o que aparece nesta tag HTML aqui, e talvez você possa estilizar todas elas de uma vez em todas as páginas. Bem, eu não achei que acabaria aqui. Então, o incrível designer, você é bem-vindo. Aprendemos o que são, esses tipos de tags HTML ou são meio que padrões para a página, o estilo de tags em nível de bloco de chamadas, então você pode estilizar tudo em um site inteiro de uma só vez. E se você quiser adicionar aulas em cima delas para pequenas mudanças exclusivas, tudo bem, pronto. Nos vemos no próximo vídeo. 33. Aulas combinadas vs globais em fluxo na Web:: Olá a todos. Esse design antigo e feio está aqui para nos ensinar a diferença entre classes globais e combinadas no Webflow. Vamos mergulhar em uma nota rápida antes de começarmos Isso é relativamente complicado. Alguns de vocês estarão lá fora, eles vão balançar a cabeça e continuar. Isso faz todo o sentido. E alguns de vocês vão dizer, Oh meu Deus, meu cérebro explodiu. Tudo bem. Eu tentei apresentar isso no início do curso para que pudéssemos resolvê-lo ao longo do curso. Portanto, não é uma surpresa no final, mas se você estiver lutando um pouco, tudo bem. Isso é uma coisa complicada. Você pode ficar um pouco confuso e espero que até o final do curso cheguemos melhor e talvez você possa voltar a este vídeo. Tudo bem, vamos embora. Não exploda seu cérebro. Tudo bem, para entender uma classe global, vamos ignorar apenas neste vídeo as tags HTML, como as padrões. Vamos analisar classes combinadas versus classes globais porque isso acaba com um pouco da complexidade. Vamos dar uma olhada em uma classe combinada porque entender onde ela termina é um bom lugar para começar a entender a classe global. Então, eu quero criar uma classe aqui chamada hitting. Ok, e eu quero que esse título seja uma fonte de Mary com um, eu não quero que seja uma fonte cor vermelha. E é isso que eu quero. Agora. Eu preciso de dois deles. Há outros ataques aqui embaixo. Este precisa ser azul. Então, o que eu posso fazer é adicionar uma classe de combinação a ela porque mudei a original. Isso vai mudar os dois. Então, vou combinar a aula. E isso vai ser eliminado a frio. Note, vamos chamar isso de azul. Então eu posso dizer que com azul, você vai ser azul ou roxo. Você entendeu e é azul. Esse é um ótimo uso de uma classe combinada. Ok, ele é construído em cima do original e você adiciona um pouco mais. A próxima coisa é onde ele vai quebrar. Eu quero adicionar a classe de combinação não há nada de errado com a terceira classe de combinação, mas digamos que seja algo que você queira usar um pouco mais do que apenas a margem esquerda de acerto. E isso é uma abreviatura para margem esquerda. E eu vou tirar um x, que é muito grande, grande. Em vez de dizer 64 pixels caso eu mude, vou chamá-lo de Excel, bom, tipo de tamanho genérico. Acabei de inventar isso. Eu pressionei Enter no meu teclado e vou dizer que quero uma margem de 64 pixels, um bom tamanho do Excel. Então, eu tenho essa pequena combinação. Agora, embora mais tarde no curso ou no credor em seu site, você Ok, eu preciso, vamos pegar uma imagem ou ele perdeu a imagem? Edom está aí? Ele não está dentro do meu contêiner. Vai entrar no meu contêiner. E eu preciso empurrá-lo para a mesma partida. Então eu vou para a direita, vou usá-lo. A mesma coisa em L. Não está aí meu e-mail. O que acontece no Webflow e a maneira como eles estruturam essas classes combinadas é que, na verdade, você não pode enviar e-mails para o Excel globalmente. Está ligado a esse tipo de estrutura aqui. Vamos dar uma olhada nessa coisa aqui. É chamado de gerenciador de pedras, mostrando que só podemos ter margem esquerda de ML ou ML extra grande. Você passa o mouse sobre ele. Diz que seis pixels iguais só depois do azul, ok, e só depois de bater, eles estão todos presos. É uma boa maneira de agrupá-los. Caso contrário, você acaba tendo aulas em todo lugar onde eles têm problemas, é se eu for bater agora e eu disser, tudo bem, batendo, eu gostaria de estar, quando eu ficar azul é ML, não posso usar esse espaçamento globalmente. Então é aqui que, aqui está o global. Como você faz isso? O que você faz é adicionar diblock. O livro tem uma boa coisa genérica. É apenas um recipiente vazio em qualquer lugar do seu documento como um Meta. E você adiciona uma classe a ela no nível raiz, você não está construindo sobre qualquer outra coisa. Isso é nada. Vamos clicar nele e dizer que você é ML, Excel, médio, elevador, extragrande. vou pressionar Enter, não clique aqui para que você possa estar enfrentando esse problema que eu deveria ter mencionado anteriormente. Pressione Enter para ter certeza de que há um, eu disse Sim, vou criar um seletor. E eu vou dizer que você tem 64 pixels, ok? Porque eu fiz isso nesse tipo de nível raiz, ok? Eu realmente não preciso mais disso. É criado. Se eu excluí-lo, ainda é Leah no meu gerenciador de estilo, mas você pode ver que está no nível básico aqui. Agora é um estilo global. Agora posso dizer que você, meu amigo, é ML Excel. Você vai empurrá-lo. Esse cara. Você quer ser do MLA do Excel para o Excel, esse é um estilo global. Vamos dar uma olhada em outro bom exemplo de combinação e global, e nós dois podemos viver em harmonia. Então, vamos adicionar um botão. Então, vou adicionar um botão aqui. E digamos que esse material padrão eu queira mudar. Então, vou adicionar uma classe chamada button. Você notará que não há links antigos, mas não há tags HTML do botão Curtir. Portanto, os botões são apenas links estilizados com preenchimento e clicáveis. Ok, então vamos criar uma tag de botão, desculpe, talvez uma classe de botão tenha retornado para criá-la. Eu vou dizer que cantos arredondados serão muito grandes e óbvios. Vai ter uma fonte. Deveria mudar isso provavelmente com minha etiqueta corporal, mas vamos fazer isso por esse cara. Então, vou dizer que isso vai impactar. Vamos fazer com que Homer anote algo mais óbvio? Vamos escolher esse. Ok, então meu botão são essas duas coisas. Digamos que eu queira um botão grande. Ok, então vou criar uma grande classe de combinação e pressionar Enter no meu teclado. O que eu vou fazer é dizer que você tem aqui em cima um pouco de enchimento extra. Então, segurando a opção em um Mac, alt em um PC. Ok, eu quero ser algo assim para o grande, talvez até maior. E eu vou mudar o tamanho da minha fonte. Vou mudar para cima algumas. Ok, então essa é uma boa aula combinada. Ok, então eu tenho um botão que faz as coisas genéricas. Então isso significa que eu posso ter um botão ou você é um botão? Um botão e essa classe de botão. E tem cantos arredondados, mas também há uma opção para um botão grande, que eu posso ligar e desligar. E eu posso criar um pequeno ou médio. Você pode ter um botão quadrado um e não um botão quadrado, onde a classe global seria útil agora é colorir em k. Então eu poderia chamá-lo de botão, mas haverá casos em que eu precisa de um botão de luz em um fundo escuro e vice-versa. Então, o problema de fazer isso da maneira que o Webflow faz essas classes combinadas é que eu teria criar tantas classes combinadas diferentes, ok, eu não preciso criar outra primária. Digamos que a cor vá para o amarelo. Eu criaria uma classe amarela. O problema é que eu também teria que criar um botão de classe amarela pequena. Eles não fazem uma espécie de cruzamento. Uma classe global seria útil porque eu posso usá-la em mais de uma coisa. Então, vamos criar uma div. Sorte. Ok, vamos chamar isso de plano de fundo. Então bg é uma abreviatura muito boa para plano de fundo. E eu vou criar o primário. É útil ir do primário, secundário, primário, secundário para o secundário três, em vez do nome da cor, caso a cor mude, alguém muda a cor principal de uma marca. estivermos presos com fundo vermelho, você tem que abrir caminho. Rid pode acabar sendo uma caixa azul. Então, primário é um bom nome de espaço reservado. E tudo o que vou fazer é resolver isso. Eu vou dizer antecedentes para isso. Digamos que minha cor primária seja essa cor, como o roxo. Perfeito. Ok, e eu vou criar outro. Então eu vou, vamos usar alguns de nossos atalhos. Lembre-se do Comando E, div, diblock, pressione return. Acho que meu diblock quando está dentro do meu plugue diferencial. Eles fizeram. Não faça isso. Venha para fora. Você vai fazer isso. Então, vou deixar isso no curso. Desbloquear fora das outras coisas é um atalho. Então esse vai se chamar BG, e esse vai ser chamado de secundário. Essas cores, minha secundária será minha cor marrom. E então eu posso deletar esses dois. Eu não preciso mais deles. Ainda há em meus estilos. Ali estão eles. Isso significa esse botão aqui. Esse botão que eu poderia decidir são essas coisas. Além disso, vou digitar em BG e aí está minha cor primária. Mas essa aqui, eu preciso que seja minha chave secundária grande. Veja, esses tipos de alto nível são muito úteis porque eu posso usá-los para esses botões, mas vai aqui, este, na verdade, o que mais precisa de um plano de fundo? A batida realmente não precisa de um plano de fundo. Mas ei, vá dar de qualquer jeito. Vamos continuar, secundários. Não é muito bom, mas você entende o que eu quero dizer para você. É algo que precisa de um plano de fundo. Vamos adicionar uma seção. A seção aqui precisa de um BG de fundo primário. problema de Nicole é que, se você mudar, esse cliente principal volta e diz: Oh, não é Jushi o suficiente. Você quer escurecê-lo ou clareá-lo. Você consegue ver tudo o que fez com que essa classe global aplicou mudanças? Isso é muito bom nesse estágio inicial. É uma boa prática usar estilos globais para coisas como cores de fundo, como espaçamento. Ok, parece que fizemos aqui. Lembre-se de que o e-mail Excel e outros bons usos para ele talvez sejam uma sombra projetada, ok, se você estiver usando sombras projetadas repetidamente em um documento e achar que é certo, mas então você acorda o No dia seguinte, é horrível. Você pode alterá-los todos, desde que tenha acabado de fazer isso como o nível da raiz, e não combiná-los todos. Não há nada de errado com isso, porque isso faz sentido, mas amplie. Mas, em seguida, adicionamos esses globais, nos quais também podemos nos inscrever. Isso faz sentido? Se for um pouco confuso, não se preocupe. Basta continuar e começar a adicionar suas próprias classes, talvez algumas classes combinadas para se acostumar com isso. Espero que tenha sido útil. Aulas globais. Aqui vamos nós. Faremos isso novamente à medida que avançarmos, mas isso é tudo para este vídeo. vejo na próxima. 34. Convenções para nomear aulas no Webflow: Olá a todos. Neste vídeo, veremos as convenções de nomenclatura para classes no Webflow para que você também tenha algum tipo de estrutura para funcionar. Então você sabe, não dá nome a tudo, tudo. Também veremos o BEAM BEM, sistema de convenção de nomenclatura, certo, vamos entrar. Em primeiro lugar, é uma arte, não uma ciência. Não há nenhum tipo específico. É exatamente assim que você deve fazer. E se ele não tivesse feito isso dessa maneira, está quebrado. Você pode chamá-lo do jeito que quiser. Você acabou com um pouco de falta. Se você não tiver algumas regras básicas a seguir. E dizer que, embora você acabe com alguns nomes de classe confusos, acontece que todos nós fazemos isso. E ele começou um projeto muito bom. E então, no final, você tem a versão final, final, final e final todos esses tipos de convenções malucas de nomenclatura. Mas vamos examinar algumas diretrizes gerais para que você possa fazer isso bem. O primeiro é esse que eu disse antes no início do curso, chamo esse texto de lido. Foi fácil no início deste curso apenas nos ajudar a começar e entender o que estamos fazendo aqui. O problema com o vermelho é que o nome da classe é vermelho. Se alguém passar e disser: Na verdade, agora vai ser amarelo ou alguma outra cor. Você pode ver que o nome da classe ainda está vermelho. Portanto, não dê nomes literais, dê nomes um pouco mais genéricos. Então, carrapatos, cores são boas, ok, em termos de nomenclatura de cores, muitas vezes as pessoas não dizem isso. Você pode dizer cor um, cor a cor três para as diferentes cores de texto que você tem. Mas é muito comum usar a primária para o tipo principal de cor da sua marca. Você terá uma cor secundária, algum tipo de cor extra que você pode estar usando. Você pode ter uma cor de destaque. Se você precisar de uma terceira cor. Você pode misturar em. Então, essa é uma convenção de nomenclatura comum para cores, primárias, secundárias e de saída. Portanto, lembre-se, não o chame de vermelho, dê um nome um pouco mais genérico para que você possa alterá-lo mais tarde. Então essa é a dica número um. dica número dois é ser gentil com você mesmo. Não chame isso como você poderia chamá-lo de btn, sublinhado 01. Isso é meio útil. É uma maneira. Será muito mais útil chamá-lo de botão. E essa pode ser minha chamada à ação. Um apelo à ação. Você pode ser CTA, com muita digitação acontecendo. Isso é muito alto. Você pode se safar com nomes curtos, mas lembre-se, talvez outra pessoa precise trabalhar nesse projeto. Futuro. Você neste projeto pode ser como, O que é isso? Isso funciona? Eu sei que é um botão e a cor de fundo e a margem esquerda, mas eles vão fazer os dentes. Você pode. Ok. E as pessoas fazem isso, mas escrevem de forma descritiva. Não dói. Dica número dois. Bem, dica número três, isso é 2,5 e você não precisa se preocupar com a forma como você digita. Você pode usar espaços ou hífens. Muitas pessoas usarão o botão sublinhado e usarão como meu botão principal. Ok, tudo bem. Você pode usar espaços. Você pode usar qualquer estojo que quiser. Você pode ser um botão e um espaço, um. Porque você não quer te mostrar, é adicionar aquele lá. Vamos dar uma olhada no CSS disso. Portanto, podemos verificar esta tese indo até o pequeno ponto de interrogação e indo para a pré-visualização do CSS. Você pode ver o que você digita no Webflow, o fluxo de trabalho se torna um tolo. Humano. Ela precisa ser uma classe CSS, não precisa ter espaços. Então você vê onde diz espaço um aqui, ampliando aqui, de volta aqui, coloca um hífen. E quanto aos sublinhados? Você pode usar sublinhados se quiser. Isso não importa. A única coisa é não começar sua aula com um número. Não é assim, mas você pode usar a parte superior ou inferior. Você pode usar o CamelCase. Camelcase é empolgante. Botão. Primária, tudo bem. Depende de você, do que quiser, ou talvez você tenha vindo do mundo do desenvolvimento para poder usar seus estilos de nomenclatura de classes a partir disso, não importa. Dica número três, espaçamento. espaçamento é muito comum se eu precisar disso. E vamos realmente remover esse na aula. Se eu precisar que isso saia do lado, e eu precise adicionar uma margem. Vou fazer disso uma margem global, ok, então vou me certificar de que não estou construindo em cima de um combo porque vou reutilizar essa margem em outro lugar. Você pode arrastar uma tag div e aplicá-la a ela. Ou porque eu não tenho nenhum outro estilo aplicado ao meu botão, eu poderia aplicá-lo a ele, mas vamos fazer isso apenas como um bloco de uma margem. É muito comum usar coisas como muito pequeno, bom ou pequeno ou médio. Borgonha, esses grandes no Excel, você pode usar esse tipo de tamanho abreviado. É melhor do que usar 64 pixels porque você pode decidir que mais tarde precisa ser 63, ok, e você vai mudar o nome novamente. Portanto, seria muito comum usar apenas o médio. Outra coisa com o espaçamento é que muitas vezes você os faz separadamente. Então vamos fazer margem e vamos fazer esquerda. Primeiro, à esquerda, vou abreviar. E então eu vou dizer que vou ficar médio. Vou pressionar Enter e meu espaçamento para isso será a margem 24. Você notará que estou usando muitos números estranhos, não números inteiros típicos, você pode usar 10203040. As pessoas usarão um web design de múltiplos de oito. É baseado em uma grade de oito pontos. Você fez muitas estruturas de desenvolvimento. Não é, você não precisa usar esses tamanhos. É muito útil. Ele combina com as coisas do tamanho da fonte. Você notará muitas fontes, 816-20-4302, posso acrescentar. Eu vou dar lá fora. Mas você descobrirá que muitos tamanhos são baseados nesses múltiplos de oito. São facilmente divisíveis, o que é útil e também oferece um bom alcance. Oito bem pequenos. 16 é bom, meio médio do que 24 é um bom salto ali, ali, ali, bom espaçamento. Então você usa múltiplos de oito ou não. Você pode ficar ainda menor. Depende totalmente de você. Você poderia estar fazendo esse MD de margem esquerda. Provavelmente chego a esse tamanho, pois essas coisas, como margens e preenchimento, deixados apenas com b, P, L, MD do meu preenchimento esquerdo, eles são aplicados a algo que é um espaço médio de 24. pergunta pode ser: você começa um documento, analisa e cria um monte de classes globais como essa primeiro, você poderia, eu simplesmente as crio conforme necessário. E à medida que faço o curso, durante o design do meu site, preciso criar aulas cada vez menos. Mas você poderia no começo no shopping, mas provavelmente nunca usará, sei lá, tampo acolchoado, extra grande. Você só criará os que precisa. Crédito globalmente. Vou então dizer, você precisa ir de elevador, médio, vou pegá-lo também. O preenchimento deixou um estilo global médio e reutilizável. A próxima coisa que quero te mostrar é feixe. Você vai se deparar porque vai pesquisar no Google qual é a convenção de nomenclatura mais bem classificada. E esse feixe é usado de forma estúpida. Eu uso um sabor dele e meio que já o tenho usado neste curso. Então, vamos discutir isso porque surge um pouco. É o salvador das convenções de nomenclatura. O único problema é que ele funciona muito bem para sites muito grandes, usaremos um pouco dele para nosso site menor aqui. E também é um pouco mais útil quando você está realmente codificando seu site. Estamos usando o Webflow para fazer a codificação para nós, ok, então muito do feixe de sintaxe é útil para coisas como onde eles estão? Eles têm esses hífens duplos e depois têm sublinhados. E há esse tipo interessante de sintaxe para ajudar alguém que está examinando o código a entender o que você fez. Mas como não analisamos o código aqui, ele é feito, mas não o estamos digitando manualmente, mas está dizendo que ainda é útil. O que é feixe? O feixe é um elemento de bloco e um modificador. Ok. Onde eles estão? Modificador de elemento de bloco. O que eles são? E o mais fácil, a maneira como eu explico isso como coisa genérica , coisa específica, variante da coisa. Aqui está um exemplo. Botão, preço, botão, botão amarelo de preços. Eles se aprofundam cada vez mais em termos de nuances. Então você faz algumas coisas genéricas, você diria: Ok, meus botões têm cantos arredondados. Eles são, eles são uma fonte dessa fonte que eu estou usando um tamanho dessa e eles têm um preenchimento em torno dela. Isso é o que todos os botões do meu site, esse é o botão genérico, mas há um botão específico. Ok, isso precisa ser maior porque está na página de preços, no botão de call to action ou CTA. Precisa ser grande. É preciso um preenchimento maior, mas é só isso, então você faz coisas genéricas. Ok, então esse é o bloco geral, botão específico, o botão de preços. Você pode ter uma versão menor do que a genérica. Uma pequenina que continua. envio do formulário, ok, ainda usa cantos arredondados e a mesma fonte, mas acontece que é menor do que o modificador. Pode ser um botão amarelo ou um modo escuro. O modo escuro é quando é um botão em um fundo escuro. Portanto, deve ser um botão branco com texto em preto ou um botão do modo de voo. Isso é o que esse feixe significa. É uma boa regra geral a ser seguida. Então, vamos realmente fazer um exemplo de feixe porque pode ser confuso quando você o ouviu pela primeira vez. Vou me livrar de qualquer coisa que eu apliquei. Mude a aula. O que eu gostaria de fazer é fazer o botão genérico. Então, estou olhando meu arquivo Figma, XD ou Photoshop e pronto, meu botão precisa se parecer com o meu botão. Ignore classes existentes. Se você tem aulas que não quer, pode usar seus estilos e limpar dois estilos. Diz todos os estilos a seguir. Eles não tinham sido usados de qualquer maneira, dizendo que você quer limpá-los e dizer Sim, por favor, porque eu não os usei. Então, estou de volta aos meus estilos. Clique no meu botão, vou fazer um botão de parada. Eu só vou fazer coisas genéricas, as coisas do bloco, o b na viga. E nesse caso, eu preciso ser , precisa ter tipografia. Estou usando a cadeira. O que estamos usando? Oswald, digamos. Ok, e genericamente faz isso, o tamanho da fonte, genérico, o tamanho genérico da fonte é pequeno. Digamos que seja 13. Decidi que ele vai ter algumas bordas arredondadas. Então eu vou dizer que você é, sei lá, cinco, não é grande o suficiente. E usando minha seta para cima, só para ser óbvio, as coisas estão um pouco moles. De qualquer forma. Então esse é meu genérico, seja meu feixe, meu genérico de nível de bloco. Agora, meu botão específico, vou copiar e colar este será uma das páginas de preços. E é meio que tudo isso , exceto que é um pouco mais. Então esse é o meu elemento, o E e o feixe, o que eu chamo de específico por causa dessa dobra específica. Primeira coisa, até o que estou dizendo? O que é preço? Cta, meu botão de apelo à ação. Ok. Está na minha página de herói, você quiser chamá-la. E então as convenções de nomenclatura já caíram do vagão. Tudo bem, então este é o meu CTA e tudo o que é, vai ter um tamanho de fonte de 16, ok, vai ser maior. Vai ser tudo em maiúsculas. E vai ter um pouco mais de preenchimento. Lembre-se de manter pressionada a tecla Option ou tecla Alt em um PC e faça os dois lados. Vai ser um pouco maior dessa forma. E dessa forma. Pode ser grande ou qualquer outra coisa. Um pouco amargo, CTA provavelmente não é ótimo. escola como uma grande, depois a próxima, o que fazemos? Ok. Eu quero adicionar a cor do primário. Ok? Nesta cor, o primário será Alt ou Option. Clique nas divisas e feche-as. O plano de fundo será qualquer que seja minha cor primária adequada para o meu design. Quando eu uso repetidamente, lá vamos nós. Então, eu vou usar esse mais porque é o mais genérico. Este aqui é usado apenas uma vez na página inicial e talvez uma vez na página de preços onde você deseja usá-lo e eles dizem que há uma versão do botão de envio, ok, então eu vou fazer a mesma coisa, Pegue outro botão, vou usar minha dor para ir até Ed. Vou pegar o botão. Você pode entrar na gangue. Então, é basicamente o mesmo, exceto que eu quero que este seja, eu quero que seja um botão. Eu quero que seja grande. Não quero que seja grande e o remova. Eu vou fazer este pequeno. Ok? E este vai usar minhas espumas. Então, para realmente criar o pequeno, ele não se limitou a clicar. Na verdade, você clica em Criar ou pressiona Enter no teclado. Neste caso, o tamanho da fonte será menor que o normal. É bom alternar a grafia de você. Menos do que pequeno. Vai ser Oswald muito leve, meio que se encaixa no tamanho do botão. Estou só brincando agora, entendeu a ideia, certo? Menor, menor. E talvez os cantos arredondados precisem ser ajustados porque são um pouco grandes para esse caso de uso específico. Então, serão cinco. Então é isso, esse é o feixe. Vamos fazer outro exemplo e depois mostrarei um dos problemas que você deve ter notado e que estou ignorando porque estou tentando explicar o feixe. Então, vamos fazer mais uma. Então, acertar o bloco será, nesse caso, usaremos o bloco HTML, todos os títulos. Poderíamos fazer títulos de um único acorde, mas já existe esse que está em todos eles. Analisamos isso anteriormente sobre a alteração do padrão. Então, vamos usar esse botão que não tem seu botão de maquiagem. Quando não há tags de botão como Todas, links um, mas os links fazem muitas coisas diferentes, então classificamos em torno de uma. Este aqui tem um título HTML genérico, uma tag, ótimo, então esse é meu b, meu bloco. O que eu quero fazer é ter certeza de que estou usando essa ótima fonte de vibrações. Ok? E será o tamanho certo de segurar Shift e usar minha seta para cima. Decidi que é isso que estou usando. Ok. Talvez eu não saiba por que estou estilizando isso. E sim, é isso que vou fazer, tamanho e fonte. E então meus amigos podem ser isso, esse pode ser o seu raio. Você acabou de fazer o feixe, o feixe porque os títulos são os mesmos em todas as páginas. Mas há um momento mais tarde no projeto em que você fica tipo, Oh, na verdade, nesta página do blog, eu gostaria que fosse muito grande porque eles têm muito espaço para trabalhar com doações muito disso, há muito espaço negativo que ele pode preencher. Ótimo, então eu vou, tudo bem, então eu tenho esses títulos que eu fiz. Eu fiz meu bloqueio. Agora, especificamente, vou fazer um elemento. E eu vou dizer que esse é o H1, ok, para minhas páginas de blog. Então, minha coisa específica, ok. Nesse caso de uso específico, é meio que fazer isso. Você percebe que ele não tinha a mesma estrutura do botão, onde você pode ter isso porque tivemos que inventar nosso primeiro B. Enquanto clicamos, já existe que todas as tags HTML, mas estamos na segunda parte agora no meu blog. A única coisa que vou mudar é o tamanho, é muito grande. Porque eu mudei o tamanho. Vou ter que brincar com minhas margens. Ok, vamos fingir que estamos trabalhando na página de postagem do meu blog porque eles têm grandes descendentes aqui, vamos ter que empurrá-la para fora. Então meu elemento é assim, ótimo, certo? Mas então, em alguns posts do blog, eu vou ter uma imagem em segundo plano. E algumas das imagens são claras, que precisa de tiques escuros quando isso vai dar certo. Mas tem outro que eu vou copiar e colar isso. Há outras postagens do blog que têm um fundo muito escuro. Então, o que eu vou fazer é meu M para o meu modificador, você está entendendo a ideia certa? Então essa será minha visão no modo escuro. Ok, Doc Mode, aperte Enter e eu vou dizer que a única mudança neste será esse tipo de esbranquiçado. Então você ainda pode vê-lo e fica meio que bonito nesse contexto. Então esse é o nosso feixe em uma forma meio simplificada. Ele fornece alguma estrutura, pelo menos de como fazer isso, como quantos detalhes devem ser usados em uma variante específica genérica. Isso foi útil? Eu sei que ser era confuso para mim. Vá entender isso. Então, sim, você vai se deparar com isso. As pessoas disseram: Por que você está usando veia? Você diria: Que tipo de ele? Em pedaços? E quando eu digo m bits, há uma sintaxe semelhante que aparece aqui, e ela se torna cada vez mais útil quanto maior o projeto. E nosso projeto atualmente não é muito grande. Então isso é feixe. Deixe-me falar sobre o problema que podemos ter enfrentado ou temos é onde as vigas, compreensíveis então as classes combinadas e globais, aparecem porque ele gostou dessa aqui. Nós temos esse, desculpe, este primeiro aqui, o B da viga, o bloco. Novamente, temos um botão e o que fizemos com isso, escolhemos uma fonte porque é azul, um tamanho perfeito e escolhemos cantos arredondados. Legal. Então foi isso que fizemos. E então essa aqui, adicionamos uma grande opção. Além disso, vou modificar sua cor primária. O problema de fazer isso aqui como uma classe combinada que estou no meu Gerenciador de Estilos. Então, a classe de combinação é exibida assim. A cor primária só pode ser vista depois de grande, porque essa é a combinação. Também aparece aqui, depois de pequeno, não consigo escolher essa cor primária. Vamos experimentar. Então, vamos ao botão. Volte para aqui. Eu vou dizer que depois de pequeno, eu quero que a cor primária não estivesse lá. Então eu tenho que fazer outro. Você sabe se for uma aula combinada. Então, o que eu vou fazer é me livrar dele daqui. Se você remover, eu vou voltar aos meus estilos. Ainda está lá. Vou limpar os estilos, remover uma cor primária. Legal. Então, o que eu quero fazer é criado sozinho. Então, vou dizer que seu bloco div será nosso plano de fundo. Na verdade, vou criar a classe primeiro. Será chamada de cor primária. E isso vai ser o tipo de lembrar qual cor eu escolhi? O que foi isso? Tão perto o suficiente. Perto o suficiente. Que homem, o que quer que seja. Ok. Então eu vou usá-lo lá e vou para seis como uma cor global. Eu vou dizer que você está agora. Lembre-se de que o principal e deve aparecer. Você vê o que deu errado. Tudo bem Espere aí, eu vou dar uma olhada. Tudo bem Esqueça isso. É porque eu dei um nome a essa coisa, mas depois não apertei Enter no meu teclado. Eu simplesmente clico em outro lugar, o que tenho o hábito de fazer. E dizia: Oh, vou chamá-lo de diblock em vez do nome deles que você deu. Então é por isso que estávamos errados. Eu simplesmente não cliquei em retornar. Então, vou dizer cor primária. Eu prefiro colocar bem o tipo de pote genérico, quanto mais você reutilizável no início da minha nomeação, ok, então eu posso ter cor, cor secundária. E esta pode ser BG, cor de fundo primária, porque você também terá a cor primária. Aí está você. Acho que isso vai funcionar. Então agora eu posso dizer botão Lodge e eu posso dizer que você vai ser, eu posso começar a digitar cores. Ali está lá. O legal, porém, é que esse pequeno botão também pode referenciar aquele que diz cor, fundo, cor, primário, legal. Você vai. Então, quando você está construindo seus feixes, às vezes você os faz como globais e às vezes como classes combinadas porque não adianta ter um grande como um global. Não é necessário porque não há grande. Eu meio que digo, Oh, batendo, eu gostaria de aplicar dois grandes, que vão aplicar acolchoamento cada lado e esquerdo e direito. É puramente para classes de combinação de botões. Ótimo. Sobre a cor de fundo é ótimo. Porque então, digamos que a seção em que está, digamos que realmente faça o amigo inteiro. Buddy pode ter cor de fundo, feno primário. E então eu posso dizer que ia deixar as coisas assim porque agora posso mudar meu plano de fundo da Primária, fazer qualquer outra coisa, e todos os botões aparecem para a viagem. Se eu mudar a cor de fundo, você não pode vê-los, não é? Porque eles estão no topo disso. E como eu vou fazer isso? Venha um dia. Isso não é fazer isso. Vamos adicionar uma div. Está em uma seção abaixo desta que tem a cor de fundo por primária. Agora, se mudarmos, todos virão para o passeio, entenderam a ideia. mesmo acontece com a cor dos tiques, qualquer material genérico é bom porque é reutilizável. E isso significa que eu não preciso mudar o botão, a cor de fundo para algo novo. E a seção e o hit que estou usando não vão funcionar. Se eu tentar fazer Biji com isso, o que vai acontecer? Vai funcionar. Esse pode ser um design legal que você está escolhendo, mas na verdade é meio que n, mas não é o que significa. Vou ter que criar outro estilo global chamado cor do texto, primário e secundário. Um excelente, tudo bem, nós também entramos no mato lá. Tivemos alguns problemas com as convenções de nomenclatura de Dan ou esquecemos de pressionar Enter. Portanto, não se esqueça de quando estiver dando um nome algo e quiser editar. Eu tenho o hábito de fazer isso. Dê um nome e depois clique nele. E o que acontece é que simplesmente não criou, não estava lá. Pressione Enter no seu teclado. Agora, essas são as convenções de nomenclatura que funcionaram para mim. Havia outras variações. Eles podem ser algo que você usa e que realmente acha que outras pessoas acharão útil. Então, coloque nos comentários aqui. Então, eu adoraria que você dedicasse um tempo, se quiser, sempre perdendo aquela ou essa é outra boa maneira de fazer isso ou uma boa maneira diferente ou esses são os problemas e essas são as soluções. Jogue nos comentários porque seria muito útil para você agora, como espectador, ler aqueles para dizer, eu prefiro assim porque não existe uma eu prefiro assim porque não existe regra real, desde que o O site é renderizado bem no navegador, você pode ter a v2 final e final, se quiser. Tudo bem, esse é o guia de Dan para convenções de nomenclatura, não ciência. É mais arte e não seja duro consigo mesmo na metade de um projeto. E está tudo em pedaços porque você tem uma péssima convenção de nomenclatura. Você continua e continua acompanhando o que eu quero fazer toda vez que eu construo algo e quando o fluxo é reiniciado para reestruturar as coisas do nome da minha classe, porque às vezes você acaba com apenas coisas que você não pretendia. Mas ou estamos tentando ser rápidos ou você realmente não conseguia pensar nisso na época e acaba com um pouco de bagunça. Está tudo bem. Seja gentil com você mesmo. É normal ser bagunçado. E se você é um desenvolvedor fazendo esse curso, você pensa: “ Não, não é bom ser bagunçado”. Isso também está bem. Você pode ser super legítimo, mas isso vem com um pouco de prática quando você bloqueia tudo e recebe esses nomes. Perfeito. Tudo bem, é isso mesmo, mas é confuso, mas espero que tenha sido útil. Vamos passar para o próximo vídeo. 35. Como usar o fluxo de webflow de gerenciador de estilo: Olá a todos. Neste vídeo, veremos essa coisa, esse gerenciador de estilo, que eu sugeri em um vídeo anterior. Vamos ver tudo isso e o que ele faz provavelmente neste vídeo agora, ok, Style Manager, este aqui. Então, o que isso faz? Permite que você pesquise as classes, os nomes. Então, digamos que eu precise encontrar tudo o que está acontecendo. Ok, aí está. Existem esses títulos aqui. Você pode ver, oh, olha, há um genérico. Há uma dança aleatória. Eu fiz um um-dois-três-quatro e você pode passar o mouse sobre eles. Ele mostrará a sintaxe e mostrará o que está fazendo. Este aqui, atingindo três, diz margem superior 0% margem inferior z representa uma família de fontes, uma cor e um tamanho de fonte. Haverá diferentes. Então, isso é uma coisa que faz. Uma coisa que você vai achar que gosta, oh, e então ele pode fazer isso. Não, ele fez algumas coisas básicas. Espero que o gerente de estilo goste muito do Find and Replace no futuro. Pode estar lá agora porque você está no futuro. Mas não faz muito do que eu pensei que estaria fazendo. OK. Uma das coisas legais que ele faz é dizer que o cliente volta e diz que vamos mudar essa cor primária. Ele precisa ser mais claro, mais escuro ou verde. OK. O que você pode fazer é pegá-lo, porque digamos que você tenha sido muito ruim com seu nome, ok. Ou você está olhando para a purga de outra pessoa e eu sei que ela a usou porque eu posso ver que ela vê lá, ali, ali, ali. Você precisa ter cuidado porque você gosta. Quero ter certeza de que entendi tudo, porque pode ser apenas uma pequena mudança de tonalidade e você pode estar entendendo errado. Então, o que você pode fazer é instalar, gerenciá-lo e, na verdade, simplesmente colar essa cor. Ok, esse é o número hexadecimal para isso. Hash cinco, se cinco, se 5D, você pode ler. Mas pelo menos você pode ver aqui que ele analisou todos os atributos e o conjunto. Este usa, este usa, essa classe, use. Assim, você pode acessar e encontrar todos eles. Agora, ele não encontra nem muda. Um carro. Pode entrar aqui e dizer, Oh, basta clicar nele e alterá-lo. Mas sim, espera que esse recurso venha. Mas o que você pode fazer é empilhá-lo com cores. Vamos dar uma olhada nisso. Em seguida, mostrarei todos os lugares que estão sendo usados, elementos afetados nesta página ou em qualquer outra página. Agora, caso, só temos uma página. Eu meio que consigo ver isso. Você pode ver isso? Você pode clicar nele e ele o levará a esses dois lugares. Eu já usei isso. Pelo menos, você sabe, é aí que está. Eu sei qual é o nome da turma, então eu posso mudá-lo. Não posso entrar aqui no momento e mudar isso. Eu posso mudar o nome dela. OK. Não é o que eu quero, mas eu sei que a cor dos carrapatos precisa ser alterada para que eu possa ler, encontrar a cor do texto aqui e entrar e alterá-la para que eu saiba que está lá. Eu sei que é Eros , era isso que estava lá. E agora eu posso mudar isso porque eles são da mesma cor dos carrapatos. Vamos mudar isso. Algo óbvio. Esses dois vão mudar. Eu só preciso encontrar um deles e mudá-lo. E eu posso trabalhar meu ritmo nessa cor antiga. Então esse é o próximo a mudar. Onde está? Ali está lá. Eu posso ir encontrá-lo aqui, apertando três e ir trocá-lo para aquele novo. Então, é meio útil. Outras coisas que ele pode fazer, você pode digitar para fontes. Então, eu sei que estou usando o X0 algumas vezes. Eu sei que está atingindo 1,2, que é esse aqui. OK. Não está sendo usado batendo três por algum motivo, estou usando outra coisa. Ok, mas você pode digitar qualquer tipo de atributo, dimensionando o nome real, código de cores, ele vai encontrá-lo . A outra coisa é limpar. Limpando. Eu vou te mostrar aqui porque somos o gerente de estilo. Muitas vezes, não vou limpar até avançar no projeto porque há quatro estilos aqui que não estão sendo usados no projeto. Vamos limpar o caso uma batida de dança não estar sendo usada em lugar nenhum. Há uma chamada batida que não está sendo usada. Há uma classe de combinação que não está sendo usada chamada image hero div past events. E há um chamado bloco de texto j. Então eu posso limpá-los. E nesse caso, eu sei que vai ficar bem. Mas digamos mais tarde, na próxima página, que estou construindo, que eu realmente preciso dançar e acabou. Ok, então arrume tudo no final. Você pode fazer isso enquanto está trabalhando. Está tudo bem. Por exemplo, eu me sinto confiante agora que, na verdade, não vou usar nenhum desses fluxos de trabalho finais me dizendo que eles não estão realmente aplicados a nada. Então, mesmo que eu faça isso, não é, não vai quebrar. Significa apenas que não terei acesso a eles mais tarde. Então, limpando-os, Vega, vamos arrumar. Um pequeno bônus que eu quero dar no final aqui é que eu ainda não mencionei isso, mas pensei que já surgiria. Mas digamos que eu tenho isso atingindo ele e eu copio porque só uso para outra coisa, não para o título dois, eu vou dizer que quero você, vou usá-lo depois disso menos. Sim, cole em algum lugar aleatório e você gosta, na verdade, eu vou usar isso para outra coisa. Não vou mais chamar isso de bater dois. E eu crio um novo estilo chamado, sei lá, atingir cinco e vou mudá-lo. Então, o problema de fazer isso, então nós a mudamos e mudamos a cor para outra porque eu a estou usando para isso. Na verdade, você não criou uma nova classe, apenas renomeou a antiga. Isso acontece bastante para mim. Pelo menos eu copio e colo algo que eu gosto, Ok, eu vou mudar e fazer um novo. Então eu dupliquei pensando que fiz uma nova classe e posso renomear, mas na verdade nós apenas renomeamos essa também. São quase cinco agora. Então, queremos duplicá-lo e criar algo novo. Então, sem usar isso, eles vão excluí-la, excluir ou remover a classe e dão a ela um novo nome para pressionar F5 e começam a trabalhar nela. Ou você pode dizer que, na verdade, foi bem próximo o suficiente para que eu possa duplicar a aula. E será igual à rubrica cinco. E eu vou fazer isso um pouco menor. E você notará que agora ele não está conectado a este. Então, saiba que se você quer uma duplicata, um elemento que já tem uma classe, não a renomeie. Exclua-o, crie um novo ou duplique a classe. Isso faz sentido. Não é realmente um bônus. Estou chamando isso de bônus. Tudo bem, esse é o Style Manager no Webflow. Estou ansioso para atualizá-lo. Acho que isso pode ser legal. Coisas como encontrar e substituir aqui. Podemos adicionar grupos semelhantes para que possamos arrastar as aulas para a equipe? Eu sinto que talvez o futuro do Webflow esteja lá. De qualquer forma, esse é o Style Manager. 36. Vídeo para produção 2 - novo portfólio: Olá a todos. Este vídeo é um vídeo de produção. Precisamos criar um novo site porque vamos começar agora a criar nosso portfólio. Agora que temos algumas habilidades de CSS do Ned, na verdade vamos parar de criar coisas e colocá-las em ação, então eu farei as minhas. É por isso que esse vídeo é relativamente curto. Vai criar um novo site. Vou precisar atualizar meu espaço de trabalho para uma versão paga. Eu vou te contar o que eu fiz. Mas sim, então crie um novo site, se você puder adicioná-lo à sua conta gratuita, faça isso. Mas já é nessa hora que preciso atualizar meu espaço de trabalho. De qualquer forma, vou escolher mensalmente. Vamos fazer isso e você faz. Tudo bem, então a primeira coisa que vamos encontrar é se você estiver em uma conta gratuita, teremos que atualizar ou excluir uma de suas duas. Vou fazer o upgrade porque se eu quiser adicionar um terceiro lado aqui agora para o meu portfólio, e ele dirá que você atingiu seu limite, você precisa fazer o upgrade. Então eu vou fazer isso e voltarei em um segundo. Na verdade, vou fazer o upgrade para ligar só para você saber, eles podem mudar o nome desta, mas eu só preciso de mais de duas em sites hospedados. E esses sites precisam de mais do que apenas duas páginas. Então, vamos fazer isso. Eu volto em breve. Tudo bem, então estou de volta ao meu painel no topo, e posso adicionar um novo site agora, qualquer drama, ok, então vou adicionar um site em branco. E esse será o incrível de Daniel, o que é chamado de portfólio de dança. E você pode chamar o seu pelo seu nome, ok, então crie seu próprio portfólio para este. Você não vai lhe dar um resumo porque pense nele como seu portfólio. Mesmo que você não tenha nada para seu portfólio agora, eles se juntarão a um com seu próprio nome. Podemos colocar em prática um portfólio, coisas, portas. Então vá em frente e crie seu próprio site em branco que você possa se juntar a mim. Vamos definir projetos de classe adequados mais tarde, mas, no momento, não vou verificar este. Faça isso para que possamos começar a criar nosso portfólio e aprender mais coisas do Webflow no próximo vídeo. 37. Altura mínima vs ViewPort Heights em fluxo Web:: Olá a todos. Neste vídeo, veremos esse grupo aqui, larguras mínimas e máximas, altura mínima, altura máxima. O que eles fazem? Por que não usamos apenas altura e largura? O que esse botão Overflow faz? Tudo será revelado neste vídeo. Tudo bem, a primeira coisa a observar é que se eu adicionar, digamos, um contêiner, uma seção chave, tudo bem, e eu dou um nome a essa seção. Esta seção será uma seção fria. Vamos ser heróis por enquanto. Vou apenas dar exemplos genéricos aqui e os usaremos durante todo o curso à medida que trabalhamos. E então, herói da seção, Ele vai ter, se eu der um plano de fundo de alguma coisa, eu escolho essa cor. Se eu obtiver uma prévia, clique nela. Nós não fomos. Lembre-se de que o comando de atalho Shift P. Control Shift P para visualização desaparece. Então, por padrão, adicionar qualquer coisa, qualquer um desses tipos de dibs que não tinham altura por padrão, então eles simplesmente colapsam e vão embora. fluxo de trabalho sabe disso. Isso é um pouco estranho se você estiver tentando usar esse design. Se você adicionasse algo e ele não pudesse ver, não seria uma boa experiência para o usuário. Então, eles apenas adicionam algumas falsificações aumentadas aqui não existem quando lançadas e, no entanto, publicam o site. Precisamos adicionar um pouco de altura. Então isso é uma coisa. Não há altura. Pegue a matriz. De qualquer forma. Mas podemos dar um pouco de altura. Podemos dar a ele alguma altura física. Podemos dizer que, na verdade, essa é a altura da minha caixa de heróis que queria ser de 500 pixels e tudo bem. Ok, o problema de dar a ele esse tipo de altura absoluta, 500 pixels, é que ele não é muito flexível. Então, as pessoas usarão uma altura mínima. altura mínima é provavelmente a mais comum usada de todos esses minmax é, ok para mim, pelo menos, significa que posso pegar algo como o texto do meu parágrafo. Ok, então a a, enquanto isso, vou adicionar um parágrafo. Vamos colocá-lo dentro e pegar tudo. E eu vou copiar e colar porque isso é o que essa altura fixa. Vamos ter um problema porque ele vai chegar até aqui e vai acabar, o que fazemos? K essa altura fixa é problemática. Ok, então eu queria expandir. Então, tudo o que eles fazem é simplesmente trocá-lo, vamos nos livrar de um pedaço dessa seção raspada que o herói usará apenas em vez de altura, usará altura mínima em ambos declarar que está pressionando a Opção ou a tecla Alt em um PC, você pode deixá-la assim e expandirá e se contrairá. Mas para o meu design aqui, Ok, Olá, a primeira vez que você os viu. De qualquer forma, eu tenho essa altura que eu quero. Ok, então eu sei aproximadamente o que, quão alto é. Então, o que eu quero fazer é que nunca será tão pequeno. Ok, eu queria dizer que, na verdade, dê a ele uma altura mínima de pixels de Foner. Então, parecia o mesmo que o último. A diferença é que agora é quando eu copio e colo, colo, colo, colo, colo, colo. Há um mínimo de 500, mas se necessário , vai ficar um pouco maior. Então, é muito comum. Basta usar a altura mínima em vez da altura porque você tem um pouco de flexibilidade. altura mínima é muito útil se analisarmos algumas dessas coisas, já as criamos anteriormente e, por padrão, elas funcionaram com a altura certa aqui. É porque a grade é incrível. E se um desses subir para três, vamos pegar três linhas. Todos eles vêm para o passeio. Isso nem sempre é verdade. Veja isso. Se eu pegasse minha grade com minha grade, tudo bem? Se eu disser que, na verdade, você tem apenas dois lados, isso gerará automaticamente outra linha. Vamos dar uma olhada. Veja, são dois, agora é apenas um. Por que eles são iguais? E o designer de TOC e você pensa, eu quero que eles combinem. Por que, na métrica, você pode dar a eles uma altura mínima. Então, vamos para este aqui. Tem uma div ou uma classe ao redor do membro externo. Colocamos isso mais cedo. Há algo controlando um para todos os três. Então, eu estou fazendo isso com todos os três. Eu vou dizer, na verdade, pelo tamanho e densidade que poderíamos dar a ele uma altura, vamos apenas dar a ele uma altura mínima para o caso de precisar se expandir. OK. Mas vou dar uma altura mínima de, vou adivinhar 500 pixels. Isso significa que eles podem ser maiores, mas não podem ser menores do que isso. Ok, então eu poderia, se eu tiver uma carta muito grande que tenha três linhas ou, no meu caso , cinco linhas, ela ficará maior se for necessário. Mas há uma altura mínima que é muito útil para coisas assim, como esses cartões ou talvez seja um preço inferior. Uma imagem de preço pode ser legendada, algo assim oferece a flexibilidade de altura, mas definindo tudo para ser o mesmo. Portanto, é a altura mínima para usar isso ao máximo, você só vai usá-lo em vez da altura na maioria das vezes, pular porque eu me perdi. E você deve ter notado que eu realmente não fiz a altura mínima da seção como planejei. Acabei fazendo isso com o parágrafo. Não é um problema nesse caso exceto se eu quiser usar o parágrafo em outro lugar. Então eu fiz a altura mínima disso. Eu realmente queria fazer nesta seção, altura mínima de 500 pixels. Então você obtém a altura mínima. Vamos nos livrar disso agora, limpe-o. Lembre-se, Opção Alt, clique em Instagram, altura máxima. Eu não uso muito a altura máxima. Você pode achar um bom uso para isso. Só consigo pensar em um, mesmo que pesquisei no Google, como outros bons usos da altura máxima, não consegui encontrar nenhum bom. Deixe nos comentários se você tem um bom exemplo melhor do que o meu K. Então eu vou ter recebido esse texto. E está em uma caixa que diz que talvez seja descritiva embaixo de uma imagem, mas você não quer que ela continue para sempre. Você quer que essas pequenas barras de rolagem apareçam. Então, o que você pode fazer é dizer, na verdade, que eu quero que esse herói da seção tenha uma altura máxima de talvez 300 pixels. Ok, o que isso significa? Significa que veja isso. Se eu adicionar mais texto, copiar, colar e colar eventualmente obterá uma altura máxima. Você vai uma vez maior do que isso. Se você estiver injetando um monte de dados de CMS, podem ser descrições de produtos, postagens de blog ou algo assim. Na verdade, você não quer porque no momento está transbordando, simplesmente não parece certo, está tudo bem. Você ainda pode lê-lo. Mas digamos que você queira essas barras de rolagem. O que você pode fazer é garantir que você vá para a seção herói selecionada. Você pode fazer essa opção de estouro. No momento ainda visível, você pode torná-lo não visível, o que não é muito útil porque você quer as barras de rolagem aqui em cima. Ok? Assim, você pode rolar para baixo e verificar o que está lá dentro. Significa que você tem pelo menos algum espaço na tela usado, é de apenas 300 pixels, mas você pode realmente caber em muito mais conteúdo se a pessoa realmente quiser cavar em sua altura máxima, não o use com muita frequência. Eles voltarão e conferirão os comentários deste vídeo porque tenho certeza de que há muitos outros motivos pelos quais você usaria a altura máxima, mas não consigo entendê-los agora. Bem, uma coisa que você pode fazer com altura máxima é especialmente fazer esse transbordamento. Clique na tag da seção. O herói é que escolhemos esse. Isso os obriga a sempre exibir este aqui de forma automática. Realmente não muda muito, exceto se for menor, veja isso. Posso pegar elevadores? Eventualmente, eles desaparecem porque não transborda. Agora não há barras de rolagem. A força de B está ligada o tempo todo. Estouro. Ok, então isso é automático. Ele ligará e desligará conforme necessário ou você pode forçá-los a ligá-los o tempo todo. Tudo bem, isso é definitivamente a altura máxima acima da largura máxima e mínima. Então, para entender isso, usa o exemplo que fizemos antes. Nós podemos fazer a mesma coisa que isso. O que fizemos neste está aqui, como dissemos, o parágrafo no texto do herói tinha um grande preenchimento antigo na lateral. Consegue ver isso? O que fizemos anteriormente, podemos fazer algo semelhante. Vou desligá-lo. Lembre-se de Alt ou Option, clique nele para se livrar dele. Vou dizer que esse herói da tag p estará com meu tamanho e terá uma largura máxima. Lá vamos nós. De quão longe você quer que esteja. Você pode fazer, digamos que 500 pixels pareçam, novamente, que você pode decidir que é isso. Ok, então a largura máxima é boa para cabeçalhos que você deseja dividir em duas partes. Vamos fazer isso daqui a pouco. Para este, você tem uma tela muito grande e ela se estende por toda parte. Você pode dizer que, na verdade, basta forçá-lo a parar porque eu gosto desse tipo de espaço negativo por aqui. Então, este aqui também, você poderia dizer, vamos ter uma largura máxima de 600 pixels. Ok? Significa apenas, oh, na verdade, é 500, significa que vai quebrá-lo lá. Se você estiver injetando cabeçalhos diferentes para postagens de blog diferentes, digamos, elas não vão ficar paralelas para sempre. Eles vão se dar um pouco de tempero que você usa com margem. Ou, nesse caso, estamos fazendo a largura máxima. O que você também pode fazer é tecer usando pixels fazer um vídeo inteiro em breve sobre todas as diferentes coisas. Há muitos deles. Mas em termos de porcentagem, você pode decidir, na verdade, eu só quero que seja em 80%. O que faz 80% de seu, 80 por cento de seu pai, k do espaço dos pais, que no nosso caso, o pai aqui é a seção aqui, ok? 80% mais distante no corpo aqui é muito maior. E isso dá um exemplo melhor. Pegamos um aquecedor, ele copiaria. Vamos colocá-lo dentro de algo. Vamos colocar isso dentro disso. OK. Então eu vou colocá-lo no aquecimento para que ele entre? Não consigo ler dados nativos da prancheta, não gosta porque contém isso. Tem o texto do span e eu vou pegá-lo e colá-lo. Meio que posso. Vamos tentar novamente. Vamos até aqui depois de aquecer para colar. Agora é 80% desse espaço porque está meio preso dentro dessa classe de eventos passados que eu coloquei aqui. Se eu disser 50% aqui, 50% pesará um tamanho diferente dos 50% aqui. OK. Porque é 50 por cento desse contêiner maior. Isso faz sentido? Você pode mudá-los. Então, em um desktop, você pode decidir que 50 é bom. Você queria fazer uma pausa porque gostou desse espaço negativo, mas no tablet você pode ir, eu não gosto. 50 também. Estou preso no canto e talvez esteja dividindo-o em três linhas. Você vai dizer, na verdade, no tablet, eu vou dizer que você pode ser um pouco mais, 70% ou 8%, ok? E quando se trata desses, 80% ainda não são suficientes. Então, você pode, na verdade , ir cem por cento em tudo isso a partir de então. Tudo bem, então essa é a largura máxima. Fizemos isso em nossos títulos, mas você pode fazer isso com duas tags div, você pode fazer com o que quiser. Ok, então vamos ver como fazer a largura mínima. Exemplo de largura mínima. Estou tentando pensar em um. Não o use com muita frequência, como a altura mínima. Mas a largura mínima pode ser útil. Você provavelmente entende o que vai fazer, mas vamos fazer isso juntos de qualquer maneira. Eu vou precisar, esses botões vão copiá-los e colá-los. Então, dois deles. E digamos que, na verdade, existam três deles. Esse botão aqui, se eu for assim, e um dos botões que tem um ponto de interrogação, os botões são muito pequenos. Imagine se tivesse uma largura mínima. Você entendeu. Então, o herói do botão realmente terá uma largura mínima para adivinhar o tamanho de 100, ok? Isso significa que vou fazer com o texto de preenchimento fique centralizado em todos eles. Significa apenas que esta aqui, se for uma palavra muito pequena, como Dan, você pode ver que ainda não ultrapassará o tamanho mínimo. Na verdade, esse é um bom exemplo. Eu estava lutando lá por um segundo. Tudo bem? Então você usa muito a altura mínima e a largura máxima. Pelo menos eu faço os outros dois. Eu não uso com muita frequência, mas você sabe o que eles fazem. Eles são o oposto dos outros que você usa muito. Esse poderia ser o pior vídeo feito neste curso até agora? Acho que sim. Estou nisso há mais de uma hora e é o melhor que consegui. Eu preciso seguir em frente. Espero que você entenda a ideia. Não use alturas absolutas, use mínimos e máximos para ter um pouco de flexibilidade. Antes de irmos, vamos aplicar nosso mínimo-máximo, bondade e corrigir os mitos que eu criei aqui. Então eu tenho, vou copiar este. Vou ter uma navegação branca na parte superior. Na verdade, você só precisa do herói da seção de navegação. Vamos usar o Command E ou Control E em um PC e entrar na seção. OK. Eu fiz sobre seções. Eles não podem entrar um no outro e ele não pensa em colocá-lo depois. Espero que você possa fazer isso criando um contêiner primeiro e depois na seção Command D and Go. E então deve ir para o lugar certo. Ou aperta um e arrasta para fora. Então, eu tenho minha seção, vamos dar um nome a ela. Legal, essa seção. Ok, é branco por padrão, tudo bem. E lembre-se de que se eu for visualizá-lo e voltar ao comando Shift P, Control Shift P em um PC, ele desaparecerá. Para onde foi? Está lá em seu designer, não no site real. Por quê? Porque talvez tenhamos nossa altura falsa aqui do Webflow. Vamos dar a ele uma altura real. Vamos dar a ele uma altura mínima de 80 pixels. Ok? Só para acrescentar, permita alguma flexibilidade. E vamos fazer uma prévia. Command Shift P. Isso não funcionou quando estou aqui, você pode ver que estou digitando pela metade desse AD. Então, a mercadoria de p em qualquer quebra meu teclado e depois funciona. Vou clicar nesse tipo de Canvas aqui, depois em Command Shift P. Vou manter esse espaço aberto. Tudo bem, essa coisa que ele precisa consertar, em primeiro lugar, é um pouco de tiques de parágrafos que eu não preciso. Então, adeus ao texto do parágrafo, clique aqui. Há outras coisas que eu fiz com ele, mas o transbordamento, eu o coloco de volta no visível, que é o padrão. E eu não vou ter uma altura máxima. Lembre-se, opcional Clique nesse. Eu vou ter uma altura mínima de 400 pixels. E a cor, não estou muito preocupado com a cor no momento. Mostraremos como extrair cores do Figma em breve, XD ou do Photoshop. Mas pelo menos minhas estruturas, eles têm meu herói da seção de navegação. É tudo um duto minúsculo. Tudo bem, eu tenho Uau, isso vai ser o fim deste vídeo para o próximo. 38. Converter Figma para fluxo na Web:: Olá a todos. Neste vídeo, levaremos elementos do nosso design de figma para o Webflow. Eu vou te mostrar como você pode trabalhar entre os dois bits de software. Agora, falamos brevemente sobre por que você usaria algo como o Figma e não apenas o design no Webflow, você tem uma boa noção disso agora, certo? Porque se tivermos que tomar decisões de design aqui no Webflow, mude as coisas. É muito complicado porque temos que considerar coisas como espaçamento e margem como um preenchimento ou como n, algo como Figma ou, alternativamente, XD, que é um concorrente, ou fazer isso no Photoshop ou na Adobe Ilustrador. Com o design aqui, você não precisa se preocupar com isso. Você só quer que o botão fique aqui porque parece bom. Ok, você teria que descobrir como você vai cortar esta caixa aqui. Você vai fazer com que ela se sobreponha a essa coisa. Como você faz com que isso fique por trás das coisas? Figma, basta movê-lo para lá. Em. Desculpe, sim, Figma segue em frente. No Webflow, precisamos tomar algumas decisões sobre como o código o renderizará. Portanto, leva muito mais tempo no Webflow. É muito mais fácil. Projete, faça o teste no Figma, faça com que o cliente assine e, em seguida, comece a criar um fluxo de trabalho. Portanto, não haverá um curso completo em Figma, apenas mostrará como extrair os elementos necessários para criar um fluxo de trabalho. Se você quiser aprender Figma, eu tenho um curso sobre isso. Ok, vá conferir isso. É chamado Figma essentials. E então, sim, vamos realmente puxar nossa primeira parte. Vamos dar uma olhada nas imagens. Digamos que precisamos que esse cara saia, essa coisa bonita. Não pergunte. Então, aqui no Figma sob design, você pode na parte inferior aqui, clicar em Exportar, clicar nele. Role até o final, você pode decidir que tipo de formato de imagem eu quero que tenha um fundo transparente. Então, um PNG é ótimo. Um JPEG o exportará e você não conseguirá ver as bordas do quadrado. Então, o PNG é ótimo e eu vou exportá-lo. E para onde vou exportá-lo? Vou colocá-lo em qualquer lugar. E isso o levará para o Webflow k. Então coloque-o onde você precisa. Vou colocar o meu nos arquivos de exercícios , ok, depois disso. Então, você pode obter essas imagens se quiser uma linda lagarta em seu portfólio, mas caso contrário, você estaria fazendo a sua própria. Ok, então vou jogar o meu na minha área de trabalho só para jogá-lo lá. Vamos embora. Imagem de Dan. Lá vamos nós. Diz no meu desktop que, se você quiser pegar mais de uma lata, pode dar a volta e marcar todas essas coisas para exportação. Exporte este aqui ou clique duas vezes nele aqui. Vou exportar isso como JPEG porque é quadrado, tem muitas cores, não precisa de transparência. Excelente. Ok, você passa por isso, faça a eles todas as coisas que quiser para exportá-lo. E então, de uma só vez, você pode ir até aqui, ir para Exportação de arquivos, e exploraremos todas essas imagens de uma só vez. Então, em vez de pegar imagens e trazê-las para Webflow, basta arrastá-las para a área de trabalho, no meio do designer. Ou use essa opção aqui e arraste-os até lá, ou clique nessa opção para carregá-los. Então, vamos imagens do Figma para o Webflow. Vamos falar sobre cores, ok, então pode ser tão simples quanto clicar duas vezes sobre isso. Você pode ver lá que está lá. Basta copiar e colar. Eu quero que isso seja um botão. Onde está meu botão? Ou eu posso seguir em frente. Ok, então eu tenho um botão aqui. Eu preciso que seja dessa cor. Ok, aí está. Então, tirando as cores do Figma, você pode ser um pouco mais sofisticado e mudar para esta opção Inspecionar. Você pode selecionar opções muito boas porque isso significa que você pode simplesmente se mover e clicar nas coisas e ver Inspecionar. Está fazendo algumas coisas. Está me dando não apenas minhas cores, ok, no momento em que está me dando uma tonalidade, saturação, brilho e alfa k, você pode realmente ir até os caipiras, copiá-los e colá-los disso. Você pode ver que eles compartilham a mesma saída CSS. Não vamos usar isso em Figma. Vamos apenas pegar as peças individuais para você possa pegar as cores dessa forma. E outra coisa boa que os inspetores têm a ver com o espaçamento. Então você pode ver aqui e eu estou apenas pairando, sem fazer nada. Isso vai me dizer que estou a 21 pixels de baixo, em 16 de lado, eu provavelmente igualaria os dois para 21. Mas digamos que a altura da minha navegação que um convidado antes. Ok, se eu passar o mouse sobre ele, onde está? Está me dizendo que o retângulo tem a altura de 86 pixels. Volte para o Webflow e diga: Ei, navegação, eu disse ser o mínimo do que era? Talvez seis. Aqui vamos nós. Eu disse AT eu chego perto, isso é bem perto. Portanto, posso parar de combinar meu design agora, no Figma, essa opção Inspecionar pode ser bastante útil se você estiver trabalhando com alguém que tem o arquivo Figma e ele foi projetado e você está se acumulando Fluxo web. Você pedirá que eles acessem Compartilhar e poderá fazer compartilhem essa visualização porque ela tinha essa opção de visualização. E isso significa que você não precisa ter uma versão paga do Figma. Significa apenas que você acaba adotando essa visualização de inspeção como padrão. E você pode contornar e conferir todos os espaçamentos e obter as cores. E você pode divulgar as imagens, desde que elas as tenham carregado para exportação, marque-as como exportação. Então, dependendo se você é a pessoa na Figma que está fazendo coisas ou se você está construindo para outro designer que está feliz e confiante na Figma, mas não quer fazer todo o Flow. Parte disso pode, você pode estar nessa posição. Essa é a versão reduzida de como usar o Figma e preparar as coisas para o Webflow. E, obviamente, eu tenho um curso completo e para Figma, se você quiser entrar nele. Mas sim, Figma para Webflow, isso está feito. 39. Converter XD para fluxo na Web:: Olá. Neste vídeo, vamos pegar nosso design do Adobe XD e depois convertê-lo em Webflow. Eu vou te mostrar como extrair as diferentes partes que você precisa para criar seu projeto Webflow a partir do arquivo Adobe XD. Se você está pensando, ei, Adobe XD se parece muito com o Figma, ok, parece o mesmo tipo de coisa. É uma ferramenta de design. Clique, arraste, faça com que o cliente assine, faça com que seus usuários testem aqui. Em seguida, comece a criar no Webflow. Agora, qual deles você deve usar? Webflow ou, desculpe, Figma ou XD? Não importa que seja muito comparável. Eles estão perseguindo o mesmo público. Para mim, como designer de UX, não me importo. Eu uso os dois o tempo todo. Eu criei este no XD tão rápido quanto construí o outro no Figma. Ok? Então, depende de você, você decide, eu sei que é um pouco desculpa. Vou explicar talvez o final desse vídeo um pouco mais só porque as pessoas me perguntavam o tempo todo. Mas, em primeiro lugar, está cheio, recebeu informações do XD. Como foi diferente de Figma? Bem, é muito parecido. Digamos que queremos imagens. Então, aqui você pode clicar neles. E então o que você quer fazer é ver aqui, você tem essas três guias diferentes. Onde estamos em suas guias de ativos, observe sua guia de camadas, guia camadas de imersão. Não me lembrava como ouro. Se você não selecionou aqui, você pode ver que ele é destacado? Você pode clicar com o botão direito do mouse e dizer Exportar selecionado. Essa parece uma maneira um pouco diferente de fazer isso da Figma. Você pode dizer, eu quero que seja um PNG, dê a ele um crachá no seu desktop. Clique neles. Vou clicar duas vezes para entrar na imagem. Eu vou até aqui e dizer que esse pequeno grupo aqui que eu quero exportar que você pode fazer uma grande exportação em massa k você para fazer isso, mas você tem que sentar nas coisas que você quer ir e dizer, marca para exportação, esta também serve. Quero que essa saia, já está marcada. Depois, você pode fazer a exportação em lote, clicar em qualquer um deles e ir para exportar lote. E exploraremos qualquer uma das coisas que você marcou k ou Exportação de arquivo, lote, exportação, qualquer coisa que você marcou para exportação. E você tem uma pilha de imagens para arrastar arrastar para o Webflow. E, em seguida, para o fluxo de trabalho, painel de ativos, e basta arrastá-los todos aqui do seu navegador, clique neste para carregá-los. Então, essas são imagens do XD. Vamos dar uma olhada em fazer o que mais? Cores. Basta clicar neles. Ok, este é um grupo. Vou clicar duas vezes nele para entrar. Aí está meu Fill. Clique nele, você vai, eu posso copiar e colar esse código no Figma. Nesse caso, é exatamente o mesmo que se fosse maiúsculo. O mesmo, o mesmo. Como Figma. Você pode fazer uma versão de inspeção dela. E então, no XD, digamos que você queira descobrir e vamos fazer o espaçamento agora, porque isso é muito legal. No XD, você pode manter pressionada a tecla Option em um Mac e a tecla alt em um PC. E digamos que você queira saber a distância entre esses dois, ok? Então, você quer saber se o botão de distâncias precisa ser pressionado. Se você mantiver pressionada a tecla Option e selecionar um punho, mantenha pressionada a tecla Option em um Mac, tecla alt em um PC e, em seguida, passe o mouse sobre ela. Você pode ver que é como se nove pixels fossem a lacuna. que distância esses caras clicam nele, mantenha pressionada a tecla Option ou Alt mouse sobre isso, você pode ver há 11 pixels de distância? Você pode simplesmente fazer isso enquanto estiver na opção de design. Você quer ir um pouco mais longe. Você pode ir compartilhar. E digamos que você esteja na posição em que o está construindo no Webflow, mas não é o designer. Alguém S está projetando um dia seguinte e quer que você o construa no Webflow com suas novas habilidades de Webflow. Isso mostra que eles irão ao Share e dirão, qual versão você quer, Ok, eles dão a eles para colocá-la em desenvolvimento porque o padrão é revisão de design. Você não está fazendo uma revisão de design. Você está no estágio de desenvolvimento, desenvolvendo-o no Webflow. Você quer isso para a web, ok? A menos que você esteja criando algo para iOS, o que não está fazendo no Webflow porque é web. Ok. E se você quiser os ativos para download, os itens que marcamos para exportação agora farão parte desse link. Então eu tenho que enviá-los separadamente para você, o que é muito bom. Vou dar a qualquer um com o eixo de ligação. Haverá uma opção aqui que diz Criar link, já fiz isso. O passado. Meu caso que estou atualizando parece exatamente o mesmo. Apenas diz Criar link. Ok, vou clicar nele para copiá-lo ou simplesmente abri-lo. E é isso que você obtém como desenvolvedor do Webflow. Essas são as imagens que foram marcadas. Você pode clicar neles. Você mesmo pode baixá-los como JPEG, PNG ou PDF. Veja quais são as cores usadas no documento. Isso é muito fofo. Você pode passar o mouse sobre isso, você pode ver que é a altura. Você pode ver se eu clicar nisso, é 29 na parte superior, 29 na parte inferior. É muito bom. é o CSS, que provavelmente não usaremos porque estamos mais fazendo design visual com o Webflow. Novamente, apenas uma breve versão de como usar o XD Figma em seu projeto. Eu tenho um curso longo, XD essentials, então você pode conferir se quiser aprender o XD. Bem, eu prometi no início diria qual deles você deveria escolher o XD Figma. Realmente não importa, é minha resposta. Mas então as pessoas vão , mas nos contam mais. Sou mais, Sigma é mais popular e você como ferramenta de design de UX no momento. Então, se você está procurando emprego em uma grande empresa, provavelmente vai querer a Figma. Portanto, é bom ter habilidades em Figma. E se você é freelancer, geralmente é melhor usar o XD por causa do preço. O quadro-chave é caro e você paga por ele separadamente. Mas se você é um designer freelancer e está trabalhando depois de ter uma licença da Creative Cloud. E o Adobe XD faz parte dessa licença da Creative Cloud. Então isso não te custa mais. E como o conjunto de ferramentas é idêntico, é idêntico, eles lidam com coisas diferentes de forma diferente. As pessoas ficam muito apaixonadas por isso. Sou muito desapaixonado porque amo os dois. Isso é muito bom. Tão parecido. Então, tudo se resume a preços e pedidos de emprego. Então, se você olhar para o seu país e disser: Ei, veja os pedidos de emprego para ver o que, o que eles estão exigindo. Procurando por um designer de UX, ótimo, deve ser provisionado. E então, se diz XD, XD, se eles disserem que você precisa conhecer gorila Figma e pensar nos meus conselhos. Faça as duas coisas. Se você fizer um dos meus cursos que os de qualquer pessoa, depois de fazer o primeiro, abasteça o XD primeiro e depois mude para o Figma. Não é uma grande transição. Tudo bem, você só precisa descobrir o que eles meio que movem nas coisas. Então, as coisas têm um nome um pouco diferente, mas é muito fácil pegar a segunda ferramenta, que são meus $0,02. Eles estão trabalhando muito nas duas empresas para criar essas ferramentas incríveis, elas estão ficando cada vez mais incríveis. Mas para mim, XD, figma ou similar, tenho certeza de que as pessoas estão trabalhando. Ambas as empresas discordam. Mas esses são meus $0,02. Tudo bem, é isso. Xd para Webflow, pronto. Próximo vídeo. 40. Como adicionar fontes ao fluxo na Web: Olá a todos. Neste vídeo, mostrarei como adicionar fontes personalizadas ao Webflow. Nesse caso, usaremos o Google Fonts. Eu vou te mostrar como colocá-los e adicioná-los ao seu design. Você pode usá-los. Vamos embora. Ok, então eu adicionei um título e as fontes que são incorporadas ao Webflow, um tipo bastante limitado de genéricas para a Internet. Se você quiser adicionar uma fonte, olhe, você pode adicionar uma fonte. Clique nele, abre uma guia separada K, você acessou seu denso site de portfólio. E lembre-se, general, já estivemos lá. Temos esse que diz fontes, que leva você diretamente para lá. Então, ambos estão abertos. Portanto, não vamos abordar as fontes da Adobe. Essas chaves de API são muito complicadas. E talvez você precise fazer com que seu cliente licencie a fonte e pague por ela, mesmo que você a tenha escolhido sua Adobe Creative Cloud. Sim, está bagunçado. Um aplicativo do Google. Eu tenho uma boa documentação sobre isso. Vamos escolher o mais fácil, aquele que as pessoas mais fariam no Google Fonts. Você encontra sua fonte em fonts.google.com. Há fontes incríveis para usar. Você pode escolhê-los, baixá-los, usar a máquina de amônia, usá-los em seu design Figma ou em seu design XD. E então, eventualmente, você precisa trazê-los para o seu projeto. Então, você os traz separadamente do seu desktop. Ok, então, mesmo que você o tenha no Figma ou no XD, não significa que isso estará no seu projeto Webflow. Precisamos meio que colocá-lo lá para fazer isso, eu vou descobrir qual fonte estou usando. Estou usando Sans públicos. É uma boa e boa Helvetica querer ser, eu gosto. Então, vamos entrar no fluxo de trabalho. Clicamos nas fontes do anúncio e tudo o que precisamos fazer é dizer, bem, ZZ deveria ter começado com isso, chamado de senso público. Um senso público. Essa é a grande parte dessas variantes. O problema de adicionar todas essas variantes de que você gosta, vou pegar todas elas. Woohoo. O problema é que a velocidade do site está reduzida. Se você instalar todas essas fontes em seu projeto de fluxo de trabalho, seu site levará muito mais tempo para carregar. E se o seu site demorar muito para carregar, o Google não gostará. Eles punem você nos rankings de busca. Eles querem sites bons, de fácil acesso e com carregamento rápido, que não demorem uma eternidade, especialmente em dispositivos móveis, diz tenha cuidado. Os principais são 400, o que é normal, 700, 900. Se você é da fonte, isso é claro, isso é normal, isso é negrito como negrito extra. Você pode decidir, você precisa de tudo isso. Ou você pode decidir, eu não preciso da luz. Eu preciso de um itálico normal, mas um itálico normal, que é aquele ali. Para usá-los, eu projeto. Você pode ativá-los e desativá-los no final. Veremos mais tarde quando analisarmos o SEO, otimização de mecanismos de pesquisa, mas você pode ativá-los todos no momento. Novamente, consultar aqueles sobre os quais você não oferece carta faz sentido. Eu meio que posso dizer pelo meu design. Eu sei que aqui eu usei, o que eles são usados? Eu usei 400 lá. Eu usei esse. Não me diz. Você tem 400. O que estou dizendo? Sou um inspetor. Haverá um inspetor sendo projetado. Aqui está, Dan. Eu tenho o normal, que é 400, e este aqui, mais ousado, que é 900. Eu sei que algumas partes disso serão a versão leve do ego. Eu meio que já sei isso, aquele homem, que eu não usei itálico de qualquer maneira. Portanto, seja muito econômico nas fontes. Clique em Adicionar e pronto. Se você for e depois decidir que vai usar outras dez fontes. E será o de Lowe, eles vão se somar muito rapidamente. Portanto, fique atento ao projetar e vendê-lo para o cliente. Quais fontes você está usando? Basta colocar dois, talvez três e apenas alguns pesos diferentes, porque você não quer que seu site carregue muito rápido. Essa foi uma longa explicação para usar uma fonte. Podemos ir acertar um? O que faremos é estilizar todos os que acertam e todos eles serão públicos. Agora, não carregou. Por que não carregou? Provavelmente precisa se atualizar. Atualizar? Sim, por favor, velho. Agora vamos ver se funciona. Acertando uma tipografia, cutuque Sans Lá está lá. Bem-vindo. Ok, e você encontrará apenas as fontes que você realmente escolheu estão aqui. Tudo bem? E esse tem que ser preto. Lá vamos nós. Porque eu estou puxando do meu fechá-lo, fechá-lo para baixo. Estou retirando do meu arquivo Figma, que está em negrito extra. É estranho como eles lhes dariam nomes diferentes. E preto, mais ousado ou 900, todos significam a mesma coisa. Fonte grande e grossa. copiar e colar os carrapatos que são esses. E é assim que você adiciona fontes. Tudo bem? Ou seja, adicionar fontes ao Webflow. E eu vou construí-lo para que fique muito mais parecido com isso no próximo vídeo. Mas, por enquanto, adicionamos fontes, trabalho concluído. 41. Vídeo para produção 3 - Texto para heróis: Olá a todos. Este é um vídeo de produção. É isso. Precisamos ir daqui até aqui, é onde terminamos o último vídeo. Mas nosso design, vamos dar uma olhada no nosso design. É mais ou menos assim, onde há duas colunas e isso está alinhado à direita. Há um pouco de texto em azul. Então, o que eu tentei fazer nesses vídeos de produção, tento não introduzir novos conceitos. Eu os separo em vídeos parecidos. E então eu simplesmente coloco isso em prática enquanto estou fazendo esses. E você pode assistir se quiser, você pode pular se quiser. Porém, neste caso, acabamos com muitos problemas ao tentar concluir meu projeto e descobrimos maneiras de superá-lo. Então pule isso, mas você pode perder bom aprendizado enquanto Dan se debruça um pouco, tentando fazer com que ele faça isso. Acho que é muito útil para as pessoas verem, como se pudéssemos ter problemas em seus próprios projetos de qualquer maneira, que é só começar, certo? Vamos embora. Em primeiro lugar, a grande coisa aqui é que é como dois pedaços, duas colunas. Vamos usar uma grade para dividi-los e depois começaremos a estilizá-la. Ok, então a primeira parte, na verdade, a primeira parte irritante é a cor de fundo. Então, vamos embora. Ok, a cor de fundo desta página inicial é a cor de fundo desta. Eu vou, você sabe, pegar minha etiqueta de amigo e dizer, o corpo em todas as páginas terá uma cor de fundo dessa cor, eu vou torná-lo um pouco mais escuro. Acabei de clicar aqui no B para obter brilho e usar minha seta para baixo apenas para torná-la um pouco mais escura, esta seção de heróis não deve ter nenhum plano de fundo. Então, vou para Comando ou Controle, clique aqui. Ok, e é isso que minha navegação será branca. Ok, vamos lá. E mostraremos mais tarde como fazer com que ela se estique. Você pode ver que este se estende por toda parte. Talvez seja necessário aumentar o contraste é muito baixo. Não parecia que parecia muito diferente quando eu o projetei, mas não parece mais. Então essa é a cor classificada. Vamos resolver esse espaçamento. Então eu quero um pedaço para este lado e um pedaço para este lado. Grid seria bom. Então vamos fazer isso. Então, vamos dar uma olhada na grade. Que bagunça na minha janela. Então, primeiro, vamos colocar a grade e colocar esse H1 dentro dela. Então, aqui está minha seção. Vamos adicionar uma grade. Aqui vamos nós e os verificamos embaixo. Ele terá duas colunas e apenas uma linha. Ok? E eu pressionando um clique em Concluído ou clique duas vezes para sair disso. Acertando um, você vai entrar na grade. Aqui vamos nós. Ok, e vamos clicar em uma grade e obter o espaçamento correto. Agora, eu não vou medir isso. Eu vou meio que olhar para isso e dizer, sim, é quase tão distante. Então, vou passar o mouse aqui. Sim, mas essa é a lacuna. Vou pegar essas pequenas linhas aqui. Mais uma vez são algo assim. Você pode clicar aqui e digitar. Se você quiser que seja 0,55, ele calculará o resto. Ok. Estou feliz com 0,5. Ok, então essa é essa parte. Vamos clicar em Concluído. Vamos dar uma altura mínima porque qual é a altura em geral? E no Figma, você pode manter pressionada a tecla de opção como fez no XD. Basta clicar em algo assim, manter pressionada a tecla Option ou Alt e ela fornecerá as medidas de tudo ao redor. Mas nesse caso, porque não há realmente uma caixa, é só o plano de fundo. Você pode usar retângulos para dizer, bem quadrado. Este quadrado é, você pode ver os números que estão saindo da parte inferior, ok, tem 576 pixels de altura. Então é isso que eu quero que seja o mínimo. Então, eu gostaria que essa seção de heróis mínimo 556 homens. Tão ruim. Não faço ideia do que acabei de medir. Perto o suficiente. Tudo bem, então tem essa parte. Agora eu preciso que ele desça do topo. Até onde vou clicar nisso, mantenha pressionada minha opção. Em um Mac alt no PC, ele meio que passa o mouse sobre esse botão que você vê é 187. Lembre-se de Dan, você se lembra de você me dizer um segundo quando 87. Então, eu posso empurrar esse toque para baixo ou posso fazer com que esta seção de Harris tenha margem ou preenchimento. Então, se eu adicionar margem, isso aumentará meu tamanho total. Você pode ver que a caixa real está se movendo para baixo. Então eu vou dizer não, vai ser 187. Lembrei-me do acolchoamento por dentro. Na verdade, eu quero isso porque não é tão alto, é? Bom argumento. Ok. Então, eu preciso que isso só afete isso. Eu poderia aplicar o estilo, apenas o acerto ou talvez Obrigado. Espere lá. Ok. Há algumas coisas que eu poderia fazer. Então, o que vou fazer é aplicar uma aula especial a isso. Vou desfazer para me livrar do estofamento que estava na seção Harris. E eu vou fazer isso com essa batida, vou dizer bater. Vou te dar o que já tem uma aula aplicada. Perigo, lembre-se de que adicionamos o único que acertou nele. Agora tem uma aula aqui. O que essa turma está fazendo? Então, do jeito que eu verifico é você, vou manter pressionada minha tecla de opção. Clique nessas pequenas divisas. Está fazendo algo azul aqui. Está fazendo o peso e a fonte. Eu presumi que fiz isso com a turma. Presumi que fiz isso com o título de uma tag. Isso não significa que você vá. E agora só entendi isso. E eu só tenho Aereo sem senso público ou faço oh, ok. Estamos de volta aos negócios. Em termos de tamanho, o que eu escolhi aqui? Eu usei aos 50. Ok, então aqui todos os meus aquecedores em todas as páginas novamente serão 50. Mas eu digo 51. Isso deve ser intolerável para você. Use todos os 50. E a altura da linha k, vamos usar uma altura de linha de I, use 95% aqui. Eu vou fazer isso aqui também. 95% entrarão, mas algumas outras maneiras de fazer isso mais tarde , mas siga o design. Ok, então eu ainda estou começando meus anos de idade. Isso é tudo o que eu quero. Este aqui precisa de um especial que k em outro modo de classe. Isso é como um bloco, lembre-se da nossa parte do bloco BEM, dos genéricos que vou usar e de muitas páginas. Eu preciso de um pouco mais aqui para dizer herói de bater, porque eu precisava fazer algumas coisas. Preciso que esteja alinhado à direita. Ok. Que nem todas as da minha idade sejam apenas essa em particular. Além disso, preciso de uma margem de 187, algo assim. Então, sob o espaçamento, vou ter preenchimento ou margem, não importa, neste caso, está recebendo 20 de algum lugar. Ok. Vamos até 187. Vamos digitar isso. Se todos vocês estão se perguntando onde ele está conseguindo algo de um membro, mantenha pressionada a tecla Shift e clique nela. E diz que os valores estão vindo do H1. Portanto, o H1, por padrão, tem alguma margem de preenchimento superior e inferior. Eu não vou ignorá-lo. Vamos esfriar o quanto for necessário. Olhando para a direita. Agora. A outra coisa é que eu gostei desse espaço em branco aqui desse jeito. Não se alinha com a borda. Então, o que eu posso fazer? Essa é boa. O que você acha? Como faço para obtê-lo? Então, está meio que aqui. Imagine se pudéssemos fazer uma largura mínima ou máxima. Ok, então o que vamos fazer é o herói especial, a heroína especial, ok, isso significa que a especial só para esta caixa pode ter um tamanho. Oh, está meio que na metade. Podemos ter uma largura máxima desta. Por quanto tempo, desculpe meu retângulo novamente, vou dizer que quero que seja sobre isso, que é 54550, algo por aí. Largura máxima de cinco pixels. Vamos dividi-lo em duas linhas. Estou feliz com isso? Às vezes você precisa ficar feliz com isso. Não estou feliz com isso. Eu preciso que seja. Vou continuar subindo e usando minha tecla shift e usando a seta para cima até que ela se quebre em três linhas. Eu faço um bom trabalho, Dan. Acho que é porque eu projetei isso no Figma muito mais amplo do que o padrão aqui para o contêiner. O contêiner é uma daquelas coisas estranhas em que eu posso pegar meu contêiner sob o tamanho certo. Você verá que diz que está trancado. Eles trabalham muito e o Webflow para obter esses pontos de interrupção que funcionarão e todos bem estilizados. Então o melhor é deixá-lo como o mais magro. Mas ei, chegamos aqui. Eu o projetei muito grande. Então, vou criar uma classe para substituí-la. Ele continha uma largura. E é aplicado ao recipiente. E eu só vou dizer, não posso usar isso, não posso usar isso. Eu posso usar a largura máxima. Acho que vou dizer 1080. Ok? Tudo bem, estamos mais perto do design. Agora, a largura máxima está bem, exceto que está ali. Dissemos que esse herói que bate aqui tem essa largura, que é do tamanho certo. Mas eu quero saber onde esse lado está alinhado corretamente. O texto dentro do herói, batendo no herói, está alinhado à direita, mas a caixa real em si, ok, essa coisa chamada H1 não é, é apenas a padrão para a perna esquerda. Tudo funciona no web design, como podemos transmitir isso? Você pode fazer isso na grade. Então, há o pai da grade que faz coisas gerais, como nosso espaçamento, e podemos fazer a sarjeta ou ouvimos, ok, aqui vamos nós. Deixa isso no chão. Ok, talvez um pouco menor. E toda a sarjeta na sarjeta está no meio aqui, essas coisas arrastam os tamanhos para dentro. Tudo bem, então isso funciona em geral. Se você quiser entrar na criança, clique duas vezes nela ou, na verdade, clique em Concluído e, em seguida, clique duas vezes dentro dela. Você notará que se eu rolar até o topo do layout ou clicar duas vezes para entrar? Agora, clique para entrar. Ali está aqui, a criança da grade, uau, a criança da grade, uau, podemos fazer isso de novo? Tudo bem, então eles são mais pais, clique em Concluído. Pegue qualquer coisa dentro dessa grade e você verá a criança. Então, estamos vendo essa célula aqui e todas as coisas dentro dela. Mas podemos dizer que, na verdade, dentro dessa grade , há uma célula. Quero que tudo seja justificado à direita. Ei, oh, bom. Então, o tamanho certo. De qualquer forma, vamos ver o que mais eu quero fazer? Vamos fazer essa cor. Lembre-se de que fizemos aquele recorte destacado. Já os fizemos antes. Você acha que poderia fazer isso. Ok. Então eu quero que você se lembre do que era. Você provavelmente estaria pronto. É chamado de tag span. É essa coisa aqui. Embrulhe em um espaço. E o span terá uma classe de span que você pode ter. cor primária é a primeira vez que criamos uma classe global, ok, será nossa cor primária. E será essa cor aqui é a que mais usaremos , não é? Não é uma cor secundária. Vou renomeá-lo. Essa é a minha cor, secundária. Eu prefiro fazer essa convenção de nomenclatura dessa forma. E essa é a cor secundária, o texto. Ok, então vamos fazer isso por mensagem de texto. Cor, tipografia secundária. Essa é a minha cor lá. Então lá vamos nós. Um aqui, este aqui. Agora, eu não posso viver com isso. A China era fonte. Eu pensei que estava usando uma lâmpada extra na verdade era 900. Isso é 900. São 800, Dan. Ok, então o que vamos fazer é voltar às fontes e alterá-las. Então, sim, vamos lá. Vamos fazer isso juntos. Então, vamos às configurações do meu projeto para o site. No topo, há uma chamada fontes. Esses são os que foram instalados. E eu sou mais ou menos esses, mas eu instalei 900, 800. Você pode editá-los, ok. O que é um pouco chato. Então, posso adicioná-los novamente, mas eles não passam por Sans públicos ou estão apenas digitando PUB? E eu posso adicionar 800? O problema é que tenho certeza de que provavelmente será necessário tentar carregar essas fontes duas vezes no código , o que tornará meu site mais lento. Então, os dois. E faça isso de novo, por precaução. Tão normal que eu quero 8000 uma vez. Não me lembro do que mais preciso, eu deveria ser muito melhor do que esse normal. O regular deve estar mais preparado para você. De qualquer forma, aprendemos coisas , tudo bem, e será o suficiente. E eu vou voltar para o meu designer. Você pode ir direto daqui. Podemos voltar ao painel e voltar e com sorte, a fonte ou o carregamento, porque é como redefinir aqui. Vai acontecer, então como chegamos a isso? Porque o herói que atingiu o herói era membro apenas do elemento R BE. Então não foi a primeira coisa que fizemos no bloqueio. Ok, então está abaixo da topografia. Não está chamando a fonte aqui porque tem todas essas coisas. Lembre-se de manter pressionada a tecla Shift e clicar nela. Está vindo dos antigos. E isso é bom, bom porque, tipo, como faço para chegar a isso? Não consigo trazê-lo até aqui. Onde está? Eu posso fazer uma de duas coisas. Posso excluir o que fiz aqui ou simplesmente removê-lo e adicioná-lo novamente em um segundo. Porque agora, quando eu seleciono , não tem outras classes. Eu deveria conseguir acessar uma tag H1 ou você poderia, em vez de fazer isso, vamos desfazer isso. Você poderia simplesmente adicionar e clicar aqui e não usar o estilo Andy. Então você pode acessá-lo. Posteriormente, mostrarei como adicionar apenas esses elementos a uma página de guia de estilo para que você não precise escolher Eu os coloquei na página, altere-os e os exclua novamente. É bom tê-los em uma página totalmente separada no momento. Eu vou fazer isso dessa maneira. Eu vou deletá-lo. Eu só vou removê-lo. Você ouve indo para o senso público. Você vê que ele meio que não sabia o que fazer, quer ser 900, mas não pode fazer isso. Então, está meio acinzentado. Então eu vou fazer 800. Agora. Vou aplicar meu estilo novamente. E como chamamos isso? Chamamos isso de cores de texto secundárias. Nós não fizemos isso. Nós o chamamos de herói, herói assassino. Aqui vamos nós. Melhor. Tudo bem, ainda bem que fizemos muito mais no vídeo deles do que pensei que íamos fazer. Mas isso estará ao vivo quando você estiver fazendo coisas e o Webflow. Até sei do que ele está falando. Essa é a grande questão. O que eu gostaria de fazer é praticar isso algumas vezes e mostrar diretamente como fazer isso até o fim. Mas eu sei que é muito importante ver como você se depara com problemas e como potencialmente resolvê-los. Agora, se você está sentado aí pensando, ei, eu posso pensar em duas maneiras melhores de fazer exatamente o que você fez aqui. Há muitas maneiras diferentes de fazer exatamente a mesma coisa. Se você conseguir descobrir uma solução melhor. É um quebra-cabeça legal. É um quebra-cabeça legal. Projetos de conclusão. É divertido descobrir as melhores maneiras de fazer as coisas. Talvez seja um pouco mais rápido fazer do seu jeito. Talvez seja um pouco mais rápido fazer isso do jeito da outra pessoa. Independentemente disso, é um projeto de construção divertido e o Webflow, mas é isso. Tudo bem, o vídeo de produção acabou. 42. Espaço em altura das linhas após espaçamento em letra no Webflow: Olá. Neste vídeo, veremos algumas coisas. Vamos examinar o espaço entre personagens ou Kooning ou rastreamento, como você quer chamá-lo? Examinaremos o espaço entre as linhas. K pode estar correlacionando dependendo de como você deseja chamá-lo também, a altura vertical entre as linhas, então veremos o espaçamento entre parágrafos. Ok, então, se tivermos dois parágrafos, como ajustar o espaçamento entre espaço de TI depois de você vir de mais um plano de fundo impresso. Sim, vamos cobrir essas três coisas então. Vou fazer uma grande bagunça no final e tentar consertá-la. Vou tentar fingir que o coloquei no curso porque é útil para você saber. É também porque eu não pensei muito à frente quando estava projetando meu design e me projetei em um buraco. Você também se projetará em um buraco. Cubra as coisas fáceis primeiro e depois tente resolver nosso problema. K é, vamos começar com a altura da linha. Esse é o espaço entre o espaço vertical entre essas duas linhas. Talvez você pense nisso como viver se você vem de uma parte diferente do mundo do design. Ok, então vamos abrir isso. Você faz com a altura. Essa é a simples k. primeira coisa, porém, é onde fazemos isso? Ok, eu poderia fazer isso com essa aula que fizemos. Não há nada de errado com isso. Mas na minha cabeça eu penso, na verdade, você sabe o que, eu provavelmente quero que o espaçamento seja o mesmo em todos os títulos de todas as páginas futuras. Portanto, é melhor fazer isso com toda a tag padrão. Então eu vou remover essa classe por um segundo, ok, e depois vou com ela selecionada, ter acesso a essas antigas tags H1. E agora posso dizer que realmente quero uma altura de e posso manter pressionada a tecla Option em um Mac, tecla alt em um PC e simplesmente arrastá-la, ok, para obter do jeito que quiser. Ou vamos dar uma olhada nas medidas dessas, da Figma. E vamos dar uma olhada no XD também, apenas para mostrar algumas das diferenças e a forma como elas funcionam. Então, fitness é que eu quero uma altura de linha aqui, k de 95% aqui. E o fluxo de trabalho, podemos dizer, eu quero que seja uma porcentagem de 95. Lá vamos nós. Ok, se você obtê-lo do XD, o XD dirá que vai estar lá, está lá. Serão 47 pixels. Eles não dizem isso. Mas se você digitar 47 em todos esses pixels, então qualquer um que trabalhe, 47 mais 47, aí está. Você acaba no mesmo lugar. Ok, então isso é espaçamento entre linhas ou entrelinhas. Vejamos o Kooning ou o espaçamento entre letras. Ok, está sob essa opção de tipo mais. Estou trabalhando no meu antigo H1 novamente. E esse aqui, onde está? É esse aqui, espaçamento entre letras. Então, não vamos ter porcentagens aqui. Vamos ver os aros e alguns outros mais tarde para obter algo semelhante. Mas, no momento, vou usar o padrão para pixels. Então, vou manter pressionada minha tecla de opção, tecla alt em um PC e simplesmente arrastá-la para a esquerda, para onde eu quiser . Isso parece bom. Menos dois pixels. Aqui vamos nós. Menos, tudo bem, foi fácil. Acabou de começar com essa. Vamos dar uma olhada na próxima, que é uma espécie de espaçamento entre parágrafos ou espaço após o espaço entre os parágrafos, porque vai trazer alguns pontos interessantes. A primeira coisa é adicionar essa classe de volta a isso. Ok, então lembre-se de nosso herói de classe de sucesso para colocá-lo meio que no fundo. Agora vamos, bem, na verdade, antes de fazermos isso, vamos fazer um rápido OK. Fora do contexto antes da minha recuperação. Eu sei que vou fazer tudo. Então eu vou embora, eu vou estar fora dessa seção de heróis. Esse contêiner. Eu clico neste parágrafo de mercadoria. Aqui vamos nós. Eu tenho um parágrafo. Vou adicionar outro parágrafo, não imprimir a tela. Vamos adicionar outro parágrafo: comando D, Controle E. Em um PC, você tem dois deles. Então, sempre que você precisar de mais de um parágrafo, você precisa ter dois desses blocos de parágrafos, que é muito estranho, mas é apenas um design ondulado do jeito que funciona. Você poderia fingir isso voltando para Return Retune. O problema é que é muito difícil espaçar essa lacuna aqui. Se você está feliz em fazer isso, tudo bem. Eu simplesmente não gosto disso. Quando os sites não gostam, é melhor ter parágrafos o tempo todo. Então, em parágrafos separados, você tem 100 parágrafos? Você tem 100 desses pequenos blocos de parágrafos. Agora, vamos ver o espaço entre eles, ou o espaço depois ou como mais chamá-los. É basicamente a margem inferior. Vamos dizer todos os parágrafos. Vamos fazer todos os parágrafos. Todos os parágrafos. Vai ter um layout. Pode ter um espaçamento por padrão, essa lata, vou abri-la. Ok, então eu vou fazer isso. E isso significa que se eu copiar e colar isso, todos os parágrafos que eu tenho terão esse espaço entre eles. Dependendo do que você quer fazer. Eu poderia fazer a mesma coisa e ir e fazer a altura da linha. Ok, então você, a altura da linha vai ser um pouco mais alta. Depende do que você quer fazer. Isso é espaço após parágrafos e a estranheza de parágrafos estarem separados. Cada pedaço tem que estar em sua própria embalagem pequena. Você acaba com muitos deles, porque o web design, agora vai ficar mais estranho antes de não esperar para k. Então, vamos ter um problema e então quase conseguiremos corrigi-lo. Nós aprendemos isso antes. Lembra da nossa grade, essa grade aqui em cima, ou é uma grade? Grelha. Temos essas duas seções e aprendemos mais cedo. Lembre-se de que se eu arrastar esse parágrafo aqui, ok, ele vai, tudo bem, CO, duas coisas. Então, eles vão entrar em grades diferentes. Se eu continuar adicionando coisas a essa grade, ela continuará adicionando coisas à grade e apenas a moverá para a próxima célula. Isso não é o que queremos. Queremos adicioná-los apenas a este primeiro. Quem se lembra do que fizemos para colocar os dois lá? É isso mesmo. Nós meio que gostamos de agrupá-los. E isso vai funcionar principalmente aqui. E então isso vai recorrer a algum conhecimento futuro que eu vou aprender rapidamente e, se você não o entender, está tudo bem, porque faz parte do curso posterior. Eu me projetei em um buraco com essa maquete. Então, o que queremos é lembrar que tínhamos uma tag div, um bloco div. Nós o colocamos dentro. Vou colocá-lo aqui embaixo e depois vamos colocar o golpe dentro dele. E onde estão os títulos dentro dela. Então, aí está meu diblock. Ok, e eu vou colocar um parágrafo dentro dele também para os dois juntos. Então eles estavam dentro disso, eu vou me livrar desses outros. E normalmente se você colocar o diblock dentro da grade, tudo bem. Onde está? Realmente não consigo ver que é minha grade lá. Ok? Vou clicar em toda a vovó diblock. Na verdade, eu faço dessa maneira ou dessa maneira? Vamos fazer isso aqui no navegador. Vou pegar o diblock, colocá-lo dentro da minha grade, e ele não vai funcionar. Então vou me certificar de que está um pouco recuado , para que fique dentro. Olha isso. Ok, então esses dois podem ocupar o mesmo, mas você pensa: E esse espaço? Essa é a parte complicada aqui. Vamos usar algo chamado Flexbox, que eu tenho uma seção inteira sobre isso. Mas, no momento, podemos simplesmente deixar isso porque acabei de descobrir que na verdade não temos nenhum texto de parágrafo aqui, mas pode haver um botão com o mesmo problema, mas nós o corrigimos. Juntamos esses dois dentro de um bloco div, dentro dessa grade. Empurrar isso para lá é muito complicado com uma grade. Só porque fiz uma coisa engraçada, fiz uma espécie de largura máxima e quero escrever uma linha nela, mas está dentro de um bloco div, qual uma grade realmente não gosta. Então, eu poderia dizer criança UB, alinhar à direita, alinhar à direita. Isso não funciona. Vou clicar com a opção de clicar nessa opção. Vou clicar nele para me livrar dele. E o que podemos fazer aqui com essa troca duplicada para o Flexbox. O Flexbox deve ser vertical e eu quero alinhá-lo à direita. Você está tipo, o que é flexbox? Isso é para mais tarde, se você quiser consertá-lo agora , faça isso. Ok. É o oposto da grade. O Grid é incrível e faz a maioria dos trabalhos até que eles não o façam, então você precisa do flexbox. Neste caso, é muito fácil. Basta ir na vertical e colocá-lo no final. Então, ele o alinha de lado. Mas é sobre isso que vamos falar sobre o Flexbox no momento. Voltaremos a eles daqui a pouco. Tudo bem, então fizemos o espaçamento de linha k-space entre nossas linhas verticais. Fizemos o espaço entre as letras do que o espaço após os parágrafos, copiamos e colamos, ok, os membros apenas marcam. E então desenvolvemos o design em nossa grade, mas o corrigimos envolvendo-o em um bloco div. Então fizemos alguma mágica com o Flexbox, mas isso é para depois. Tudo bem, é isso. Nos vemos no próximo vídeo. 43. Sombras para botões em texto e caixa no fluxo Web: Olá a todos. Vamos olhar para as sombras. Esse texto aqui, fique de olho nele. Mostraremos como adicionar uma sombra para que você possa retirá-la do fundo antes e depois. Ok, vamos ficar um pouco loucos e ir direto para a sombra total, onde há várias sombras. Alguns deles eram brancos, alguns deles são escuros. E também veremos as sombras das caixas. Então, ou nos botões, ou nós também o temos aqui. Na navegação, você mal consegue vê-lo lá. Tem um galpão. Deixe-me mostrar como fazer os dois. Por ambos, quero dizer texto e estantes de livros. Está chegando lá. Ok, vamos começar com a textura. É fácil. Decida onde você quer, em qual classe você deseja se inscrever e, em seguida, vá, lembre-se da Opção Alt, clique na divisa para fechá-las todas. Eu vou parar esse atalho em breve. Muitas vezes. Espero que esteja chegando lá. Mas, em relação à tipografia, vou dizer Mais opções. E então, no fundo, sombras de carrapatos, sombra projetada fácil, horrível e horrível. Provavelmente é melhor nesse design aqui, ok, o que fizemos anteriormente. Vou fazer a mesma coisa e recebo uma sombra de texto. E o que eu realmente vou fazer é deixá-la lá porque agora temos uma sombra, somos capazes de abaixar um pouco da escuridão nessa imagem traseira. Mas dessa forma, nós, , muito, muito tempo atrás. Eu posso, vou escondê-lo porque quero ligá-lo novamente. Vamos excluí-lo. Mas agora, com um pouco de sombra projetada, podemos meio que ver isso. Agora também, vamos dar uma olhada em Tipografia. Agora. Se você quiser editá-lo novamente, basta clicar na palavra. Ok? E o básico, você pode arrastar isso até a distância. É um pouco difícil ampliar os dois. Está por aqui. Desculpe, o ângulo, em que direção você quer que ele vá. Ok. Ou você pode usar isso para pular. Eu não sei. Eu gosto de acrescentar quando AT está apontando diretamente para baixo. E eu realmente não gosto do momento em que as coisas mudaram. Estilos de sombra projetada. Não gosto do desfoque muito alto e gostei da distância bem baixa apenas para dar uma linha realmente sólida para empurrar para fora. Ok. E então, o preto aqui geralmente pode ser muito escuro, como uma perna mais abaixo para permitir que parte do fundo passe, diminuindo o controle deslizante de opacidade aqui. Tudo bem, você pode ir um pouco mais longe. Vamos aqui, essa horrível. O que podemos fazer é realmente ter, e vamos torná-lo melhor, você pode realmente ter mais de uma textura. Então, primeiro de tudo, eu vou para, eu vou para a minha distância de 180 em um pixel e o desfoque em um ou dois dependendo de talvez dois. E eu vou diminuir a cor , mas só para dar uma dica, talvez eu me livre desse azul. Clique em desligar. Clique novamente aqui, clique aqui. Então, o vetor azul, você pode realmente adicionar outro. Então, vou adicionar outra sombra de texto para formar uma equipe. E às vezes é muito bom ter um interno muito forte e depois um muito grande e fofo. Temos uma opacidade muito baixa. Continue escolhendo. Ok, então tem aquele lá. Este não tem distância. A distância é a distância que está. Você pode decidir o que quer fazer, ok? Mas vou percorrer uma distância, ainda bem baixa. Mas o borrão, você pode começar a ver? Talvez queira isso, mas com sombras duplas, você pode obter o corte que precisa, mas depois pode retirá-lo um pouco mais do fundo. Vou diminuir a opacidade. Isso é legal? Isso não é? Vamos dar uma olhada. Vá com o nada. Vamos desligá-lo. Vou ligá-lo e desligá-lo. Você realmente só precisa clicar em Option ou Alt para desativá-lo e, em seguida, usar o desfazer e refazer, que está em um Mac Command Shift Z. Mas uma ginástica com os dedos ou Control shift C. Basta usar isso então. Ok. Aí está você. Eu gosto disso? Sim, vamos fazer a coisa certa. Você pode adicionar um terceiro, vamos fazer isso. Depois outro, e não precisa ser preto e branco. Ok? E você pode começar a ver, bem, vamos fazer isso e está fazendo o lado oposto e apenas arrastando o ângulo sobre esse lado para realçar esse lado e recortá-lo desse fundo embaçado. O azul também vai ficar bem baixo. Eu quero um pouco de brilho desse lado. O que você acha? Boa cama. Pode ser ruim. Agora, quando se trata desse tipo de sombras, na verdade, vamos fazer o ângulo dessa maneira. E acho que preciso diminuir um pouco. Vou deixá-lo alto porque quero mostrar algo com ele selecionado e essa ordem de camadas. Então isso é visto primeiro, o que é ótimo. Você pode ter feito isso mais cedo. E você pode ver se é a parte de trás coberta pelas outras sombras? Esses dois realmente não importam porque ambos são negros e estão tentando fazer a mesma coisa e o tipo de mistura, enquanto este aqui é de uma cor muito diferente. Ok, então tenho que ter certeza de que está no topo. E vou diminuir a opacidade para obter isso como uma pequena dica. Você provavelmente viu isso online. Você gosta de algo estranho nisso. O texto. Não estou feliz com a sombra por baixo, mas vou deixá-la porque pode ser por que arrastar o mínimo de qualquer maneira, ou seja, sombras projetadas no texto. Então, vamos ver como fazer isso com caixas. Fará isso com um botão. Por que não? Porque eu não preciso desse texto de parágrafo. Mas eu preciso de um botão. Então, com isso selecionado, vou usar o Comando E ou Controle E em um botão de enumeração do tipo PC. Para nomear o botão. Acho que, anteriormente, criei uma classe de botões vinda BY. Nós fizemos. E é essa cor. É a cor certa? De qualquer forma? Vamos deixar isso. Vamos apenas fazer a sombra. A sombra não está na tipografia, está sob efeitos e sombras de caixas. Ok, agora, eu quero estilizar o botão genérico é a pergunta, bem, vamos apenas ativá-lo. Você fica na sombra. Todo o resto parece o mesmo. Tem algumas outras pequenas opções antes de falarmos sobre a nomenclatura de classes com tamanho k, que é se você já viu espalhada em coisas como Photoshop e Illustrator, o o mesmo que isso. Então, a distância, a que distância está, desfoque, o quão embaçado está e o tamanho. É como essa coisa toda. Isso empurra as bordas ou é realmente uniforme? Você pode fazer coisas muito fofas, o que você não pode fazer com o texto. Só algo que não é útil. Você pode fazer isso dentro de casa para encontrar. Ok, então digamos que eu queira fazer algo legal. Vou fazer minha marinha porque é disso que eu gosto. Vou até uma distância de um, camada de um e o tamanho de um. E vou diminuir essa cor só para dar uma dica. O que há de errado com isso? Algo está acontecendo com isso. O fato de eu ter uma sombra, talvez ela precise ficar um pouco mais embaçada. não tenho um bom Chateau de qualquer forma, não tenho um bom Chateau de, eu realmente não gosto de sombra. Cem dólares isso ou não sei se consigo fazer uma boa. E vamos conversar. Então é assim que você edita, certo? Vamos falar sobre, eu vou me livrar de tudo isso. Então, vou clicar em Option ou Alt click. Ok, é onde eu aplico isso? Caixa. E essa sombra de caixa pode ser usada repetidamente. Portanto, provavelmente é melhor como uma abordagem global. Eu não vou usar essa coisa maluca além de fazer parte do marketing da minha página inicial, ok? Caso contrário, eu o tornaria um estilo global. O que eu vou fazer é pegar uma caixa. Só vai ser, uh, pode ser qualquer coisa. Ok. Apenas um pequeno velho na verdade, é um desvolume ou trabalho neste caso, independentemente disso, isso será chamado sombreamento de caixa porque é assim que eles o chamam. E deve ser fácil encontrar a pesquisa usando a palavra sombra. Isso significa que posso aplicá-lo mais do que apenas esse botão. Eu posso usá-lo para todos os tipos de coisas. Se eu precisar ajustá-lo, posso ajustar esse global e ele percorrerá todo o site, ok, caso eu decida, às vezes você escolhe por uma sombra e acorda no dia seguinte, Você está tipo, por que existem? Então, box-shadow e, em seguida, resolva isso dessa maneira. Ok, então eu vou decidir isso, esse que é zero, vai diminuir um pouco. Mas se você fizer isso dessa maneira, significa que eu vou excluí-lo. Eu posso aplicá-lo como se fosse uma gangue extra. Então eu posso dizer que a sombra aqui faz sua sombra de caixa. Se eu aplicá-la a outras coisas, como essa sombra da caixa de navegação, nós vamos, eu posso ir e pegar isso. Um global, novamente, para ajustar o global, criará um estilo página mais tarde, para que todos estejam nele. No momento. Podemos simplesmente agarrá-lo, pegar a sombra da caixa. E se fizermos um ajuste, vamos fazer com que se distancie. Você pode notar isso? Faz isso por todos eles, não só por aquele. boas e velhas coisas globais. Aqui vamos nós. E isso é Textos. Ótimo nesse. House, empurre isso. Esse aqui. Esse é o aumento dos limites. E o que um bom Drop Shadow deveria ser. E então olhamos para a sombra da caixa. Fizemos isso com um botão, mas funciona para qualquer tipo de elemento de caixa. Tudo bem, é isso. Nos vemos no próximo vídeo. 44. Como criar amostras globais no Webflow: Olá a todos. Neste vídeo, veremos amostras. Você pode ver aqui embaixo, eu tenho algumas amostras pré-fabricadas prontas para uso, diretrizes de marca, cores, cores corporativas. O legal deles é que depois de configurá-los como cores globais, que é super fácil, você pode acessá-los e alterá-los e todos aqueles conectados a eles. Você consegue ver todas elas mudarem ao mesmo tempo? Super prático. Tudo bem, então vamos entrar, fazer amostras globais. E, no final, vamos organizar algumas de nossas fontes para duas por uma neste vídeo. Tudo bem, vamos. Olá a todos. Vamos criar uma amostra global. Faria isso rapidamente e depois detalharemos um pouco mais. Vou fazer isso com o Command E ou Control E em um PC. E eu vou digitar div. Eu só vou colocar um bloco de disco agora em vez de ajustar qualquer coisa aqui em cima, ok, então quebre-o com o selecionado. Nesse caso, vou fazer planos de fundo e escolher continuamente minha cor corporativa que estou usando, ou pelo menos a do design. Ok, e então clique nisso, que meu amigo é uma amostra global. Isso acaba lá. Tem uma pequena etiqueta nela. É meio que o símbolo universal do global. Foi dado a ele um nome de golpe, e é assim que você faz. Vamos clicar em Criar. Significa apenas que se eu criar qualquer outra coisa mais tarde, como essa navegação, e você ficar tipo, oh, eu quero usar esse rosa. Não preciso usar minha ferramenta conta-gotas ou digitá-la. Eu posso simplesmente clicar nessa amostra reutilizável, amostra global. Vamos fazer isso de novo, um pouco mais devagar, porque eu quero que você entenda o que tudo está fazendo. Na verdade, vamos analisar o ponto principal de uma amostra global e não apenas uma amostra normal. E uma amostra global significa que se eu clicar nessa aqui embaixo e entrar na minha cor, e ir até essa que diz Editar. Estou editando a amostra global, que atualmente é chamada de rosa quente. E veja isso quando eu arrasto isso e mudo, você pode ver que isso é aplicado a ele? Ok, e isso está conectado, é por isso que é global. Isso significa que quando eu faço um ajuste aqui embaixo, se o cliente acabar escolhendo uma cor ligeiramente diferente, eu usei essa amostra global repetidamente. Em seguida, ele será atualizado. Também pode ser usado em texto. Então, esse texto aqui, e eu vou entrar, enfurecer e estragar tudo. Mas o outro ponto positivo é que a cor que fizemos Background Color Swatch, eles usam a mesma. Então, essa é a cor do texto, mas você pode ver que as amostras globais ainda estão lá. E, novamente, eu posso editá-lo, não importa onde eu realmente não esteja. Você não precisa ser trazido para a div original, mas você pode ver uma mudança, todas elas mudam. É por isso que os globais são úteis. Há momentos em que você não quer que eles estejam conectados. Você quer usá-lo, mas eles podem ser ajustados para torná-lo um pouco mais escuro. Digamos que eu vou desfazer isso. Digamos que esse estreito no topo aqui, ele precisa ser mais escuro, pois só por dos links de texto em cima dele precisam estar próximos, mas eu só vou diminuir o brilho. Então, o que você pode fazer é aplicar essa amostra e clicar nela para dizer quebre-a e eu meio que gosto de desconectá-la. E agora, quando eu mudo e uso o brilho da saturação de matiz, para baixo, para baixo, para baixo, para baixo, para baixo, para baixo, para baixo, para baixo, para baixo, para baixo novamente. Vou segurar o turno e abaixar. Você pode ver que uma não existe mais Global, apenas uma cor autônoma. Ok, vamos dar uma olhada um pouco mais. Vamos adicionar mais um e passaremos por isso um pouco mais devagar. Então, vamos adicionar o azul disso. Estou usando, novamente, você pode simplesmente retirá-lo do design. Você pode usar esse número hexadecimal. Então você pode continuar e dizer: Ok, eu vou quebrar o link desta vez. Vou fazer uma nova amostra digitando-a aqui. Ok, acompanhe. Aí está meu azul. Se você tiver os números H é B, você pode digitá-los. A maioria das pessoas não os terá, mas talvez em suas especificações corporativas ou nas diretrizes de sua marca, você possa ter RGB. Então, basta clicar em qualquer um desses caras. Você pode ver que ele alterna entre RGB e saturação de matiz e camada de brilho. Então você poderia fazer isso. A outra pode estar arrastando um logotipo e retirando deles. Então eu vou embora, o que eu vou fazer? Comando ou Controle E? Eu vou para a imagem, aperte Enter, escolha Imagem. Vou fazer o upload. E é apenas algo para o meu último projeto. É mais do tipo, por exemplo, onde estão meus patrocinadores? Você usa o meu. Então, aqui está meu logotipo. E você pode, com ele selecionado. Na verdade, vamos clicar nessa coisa. Eu vou criar uma nova pessoa que eu queria fazer. Sim. OK. Então, vou usar minha ferramenta conta-gotas, retirá-la do logotipo. Ok, agora eu posso fazer disso uma amostra global e este será meu BYOL. No verde. Você pode usar o padrão. É incrível a nomenclatura de cores que funciona lá embaixo. Não há nada realmente bom. Toda vez que eu clico em algo, é como, oh, sim, eu acho que é um ótimo nome para isso. Enquanto eu faço isso, eu adiciono branco no final das minhas cores. Eu vou. Isso é laranja. Para contornar o fato de que não tenho um nome muito bom para mim. Então, tarifa de trabalho, fluxo de trabalho, você pode começar a partir daí. OK, a outra coisa que podemos fazer é que você pode estar trabalhando a partir de um documento. Eu tenho este aberto da nossa classe de fragmentos, é que, dependendo de quem fez seu projeto, quando fizemos a entrega para alguém como você agora como nosso designer ou desenvolvedor de fluxo de trabalho, e você Eu posso ver essas cores aqui. Eu dei esse pequeno passo para facilitar as coisas para eles. Para mim, o que posso fazer é ir ao Inspect como fizemos antes. Eu posso clicar nele e lá está o número hexadecimal. Hicks é estranho. Não é estranho. Na verdade, é RGB. As duas primeiras letras representadas são as duas segundas letras G, próximas a serem números hexadecimais. É uma espécie de versão baseada na web, embora os usuários da web RGB agora também a tenham digitado para a pessoa que pode estar usando. Ok, você pode ver isso aqui embaixo no CSS. Em segundo lugar, pegue qualquer um desses feijões sobre o quão diligente é a pessoa que está fazendo o projeto antes de você, você pode obter outro grande guia de estilo. No meu caso, é bem simples quando fizemos, no último curso, todos os guias lascados tornam um pouco prático, tudo em um só lugar. Você pode ver aqui também. Até agora, fizemos apenas o primário, secundário e o sotaque. Mas você pode ver que você pode ter o 12.3 primário para as diferentes tonalidades. Depende da complexidade dos seus designers. Este aqui só usa essas duas cores. Então, tudo bem, volte para Figma, volte para o chão de madeira. Você pode ir agora? Vou adicionar o resto das cores para o meu projeto porque na verdade não quero esse verde. Como você os exclui? Na verdade, antes de você ir, essa é uma boa. Eu criei esse já está criado. E vamos deletar esse. Vou pegar meu azul, que eu já sei que está aqui em cima. Ok, adicionando isso, eu vou chamar esse e eu chamo de azul celeste. Ótimo nome. Eu tenho um fundo esbranquiçado aqui. Ok, então eu vou criar outro. E eu vou pular em altura em você. E você pode ver isso? Eu fiz isso da maneira errada. Então eu criei essa amostra e depois a mudei e ela ainda é azul celeste. Então, vou cancelar isso. Eu vou fazer é clicar sobre isso. Em seguida, faça o conta-gotas para obter a cor certa. Em seguida, aperte mais fumaça branca, legal, ótimo. Nomeie-os facilmente impressionados. E lembre-se, se você precisar interrompê-lo para que não fique conectado ao global, isso não mudará mais nada. Faça isso. E se você precisar editar o global, selecione-o, edite para algo e, em seguida, clique nessa opção e você pode alterá-la Cancelar porque eu gosto dessas. Vou adicionar liso todo preto e branco velho liso. Na verdade, faça da maneira certa. Então eu vou arrastá-lo para os cantos. Se, se, se neste, nós somos brancos, então eu vou fazer tudo preto. Na verdade, eu tenho algumas outras cores aqui. É esse aqui. É uma espécie de cinza azulado que eu fiz. Aqui vamos nós. Eu vou pegar esse. Então, vamos lá e isso selecionou você e eu meio que batemos para que realmente mude. Eles vão até você. E um leve cinza ardósia escuro. Azul-cinza. Obrigada. Figma. Agora, esses dois provavelmente estão muito próximos. Vou reordená-los. Você não pode reordená-los. Você poderia usar para poder reordená-los? Talvez eles não tenham. Esses dois são muito próximos. Sinto que vou clicar acidentalmente nos dois. O que eu realmente quero fazer agora é excluir todos eles e colocar o branco logo no início aqui, e ter algum espaço entre eles. E use esse tipo de fumaça branca um pouco mais adiante. Mas vou deixar isso por enquanto, porque já tem o suficiente. Ok, e a última coisa que vou fazer, não tem nada a ver com cores. Só preciso fazer isso pelo resto deste curso. E por causa da fonte, vou lutar nessa batalha de mudar fontes o tempo todo. Nós o trocamos aqui pelo título. Fizemos isso para o nosso H1, X1. Fizemos esse sentido público, ok. E então esse botão em y adicioná-lo ao botão também? Não, porque, olhando para o meu design, eu só uso o senso público em todo esse design. Então, o que eu vou fazer é quem se lembra? Como faço para mudar isso globalmente para tudo em todas as páginas, em todos os lugares, tudo bem, e muito menos , e é o corpo. Então, clique na parte superior aqui ou na parte externa. Eu vou mudar a imagem. De onde está tirando isso? Lembre-se de Shift, clique, amigo ou páginas. Então, não esse corpo. Há um estilo aqui. Vou ter que remover isso e adicioná-lo novamente. Ok, na verdade estou fazendo esse estudo. É uma coisa boa. Eu tenho essa classe corporal aqui e você pensa, o que ela faz? Bem, eu não sei. Eu não sobrevivi, eu não consegui. Eu simplesmente não sei. Ela fundamenta essa cor. Em vez do problema de ter a tag body com uma classe que você nomeou, ou pelo menos Webflow nomeada em seu nome chamada body e adicionar essa cor a ela, tudo bem. O problema é que, na próxima página que criarmos, você terá que aplicar esse estilo a ela. E, na verdade, vou remover essa classe. Eu vou clicar nele. Eu vou dizer que todas as etiquetas corporais têm um pano de fundo disso. Estranho que os dois se inscreveram e você diz “ Foi uma grande perda de tempo na aula. E sob topografia, vou dizer que não Arial, vou dizer meu senso público, público, público. Ok? Qual é o padrão? E usaremos o normal e, em seguida, vou substituí-lo em todos os outros estilos. Então, isso significa que o texto do meu botão aqui agora é difícil de ver, mas se eu passar por ele, você pode ver tudo o que é texto neste documento, a menos que seja dito o contrário, será público sem normal. E vou ver o tamanho da cópia do corpo que estou usando. Qual é o tamanho mais comum que estou usando? Estou tentando encontrá-lo no meu design aqui, diminuindo o zoom. Esse é o aplicativo, esse será o tamanho da cópia do meu corpo. O que eu decidi? Muitos saltos por aí. Eu sei que esse será o meu tamanho mais comum. Vai ser 16. Então, eu vou dizer, na verdade, etiqueta do meu velho amigo vai ser 16. E a altura da linha, onde a altura da linha é 26. Eu vou entrar aqui e digitar 26. Você percebe que isso mudou. Portanto, é muito importante fazer a etiqueta corporal desde o início porque você acabará iniciando esse botão perfeitamente. Está usando, tem alguma altura de linha porque usamos texto dentro dele. Então você tem 24 anos. Na verdade, vamos torná-lo muito pequeno. 12, você vê o tamanho real do botão mudar. Então, acerte tudo isso primeiro, coloque a tag do corpo primeiro e depois avance em termos da cor do texto. Continue falando com a pessoa errada. Estou usando, não usando preto, estou usando esse a3. A3, z3. Veja, eu vou dizer etiqueta corporal ou texto de páginas, serão três. Veja, muito parecido com o que tínhamos. E é isso. Ou as tags corporais estão prontas, se livram de uma classe. Outra coisa que podemos fazer agora, enquanto estamos aqui, devemos ou não? Dissemos que isso era senso público. Lembre-se desde o início, não precisamos mais disso. Então, eu poderia passar por isso porque vem de segurar Shift e clicar no envelope e dizer que está vindo dos títulos H1 ou H2 H1. Eu edito lá. Eu deveria examiná-lo e removê-lo. Eu não deveria. Isso é apenas ser tipo, sei lá, TOC. Mas estou tentando dizer que o que você deve fazer e o que eu provavelmente faço na prática não são a mesma coisa. Eu provavelmente deixei isso. Ok, mas eu vou clicar aqui embaixo, Comando E, pressionando, jogando dentro. E você pode ver que eu quero minha tag de títulos e vou dizer que realmente está em andamento também. É engraçado como se você quisesse clicar em Nenhum. Essa é minha reação natural. Não é o que eu quero fazer. Eu quero desligá-lo. Lembro que você pressiona Alt ou Option para dizer, não, não faça nada. E é tipo, Ei, mas voltou ao senso público. Mas não está sendo dito por esse golpe para ser público Sans, eu pressiono shift e clico nele. Está vindo da etiqueta do meu velho amigo agora, isso faz sentido? Significa apenas que mais tarde, se alguém for, tudo bem, não estamos usando Sans públicos, estamos usando Arial porque temos dois dá os títulos que aparecem para o passeio, não apenas teríamos que fazer isso separadamente. Então, apenas tentando dizer que você deve fazer o que, considerando quando está fazendo essas coisas, às vezes você precisa voltar atrás apenas para limpar as coisas, fazer com que se sinta bem. Tudo bem, amostras e um pouco de topografia entraram lá. Tudo bem, isso é tudo para o vídeo. vejo na próxima. 45. O que é a razão de contraste de cores no Webflow: Olá a todos. Neste vídeo, veremos a taxa de contraste. Basicamente, significa quão legíveis são seus textos em comparação com o plano de fundo. E tem a ver com a cor, tamanho da sua fonte e o peso da sua fonte. Você recebe um determinado número e uma nota de aprovação. Tem AAA. Quem, quem? Deixe-me mostrar como funciona e o que significa para o seu site ignorá-lo. Tudo bem, taxa de contraste. Bem, vamos começar com esse título aqui. Então eu vou selecioná-lo e você lida com o rádio consciente, com a tipografia e a cor k e não com as cores de fundo. Então, eu selecionei esse. Vou clicar sobre isso. Está me mostrando que usando essa amostra global, eu passo no teste. É um AAA k. É um contraste muito bom entre a cor do primeiro plano, que é minha ligeira, e a cor de fundo, que é meu branco fumado. Você verá essas linhas aparecerem aqui ao se perguntar o que são. Eles são as linhas de proporção conscientes. Então você pode ver que eu sou um AAA. Se eu subir, você pode ver que estou na WBS e , acima, está phi. Ok, então isso não é considerado contraste suficiente para ser legível em segundo plano. Agora estamos tentando criar designs para todas as formas, tamanhos e diferentes capacidades de visualização. É para isso que isso está nos dando uma ajuda útil, é um pouco restritivo em termos de design. Vamos dar uma olhada nesse rosa aqui. Então esse botão rosa aqui, não é o fundo. Você não encontrará a taxa de contraste. E aqui está a ver com a tipografia. Então, eu preciso encontrar a topografia que está lidando com o porque, no momento, olha, está me dizendo que é do bolo preto que está vindo. Se eu clicar nele de todos os corpos, sabemos que é branco. Eu posso te ver. Você é branco. OK. Então, a maneira de falsificar isso é que eu vou rapidamente trocá-lo para branco. Agora, acrescente a essa classe a aula de Bhatia, só a branca, só para que eu possa ver o quão ruim é. E é a pior de todas as apostas contra essa cor rosa, meu rosa quente. Está dizendo que isso realmente é um fracasso e, para chegar perto disso, ele precisa ser basicamente preto. Então essa é a troca que teremos que fazer aqui por esse botão em particular, porque é um botão muito importante. Então, vamos ter que trocá-lo para o nosso preto. Vamos usar isso ou ainda falhará agora. Não funciona. É um sistema de pontos. Existem A's úteis e A's duplos. Foi útil o WA é o AAA. Você realmente verá esse número aqui, quão bom ou ruim ele é. Obviamente, algo assim vai falhar gravemente porque eu não consigo ver . É cama grátis. OK. E é bom nesse aqui. quão ruim é que falhou? Não 100. Você sabe, você não gosta de perder a Internet se ela estiver abaixo disso. Mas esse é um bom indicador alinhado para ajudá-lo a ter uma ideia de quão perto ou longe você se lembra, talvez possamos brincar com o tamanho da fonte, a espessura da fonte e também mexer na taxa de contraste. Então, é interessante, eu poderia realmente decidir executar as tomadas de documentos e talvez fazer com que o botão tivesse uma linha ao redor da parte externa em vez de uma cor completa, como uma borda ao redor da parte externa. Mas, ao dizer isso, parece bastante limitante em termos do tipo de realmente comprime o Caliban que você pode usar. Obviamente, eles serão casos em que a acessibilidade precisa ser 100% tão boa quanto possível. Especialmente se você está perseguindo esse sonho de mecanismo de busca. E você está lidando com um público mais amplo. Se você está fazendo algo muito mais artístico ou criativo e está tentando ultrapassar os limites. É difícil trabalhar com a taxa de contraste, só para você saber, há coisas que você pode fazer com sites existentes, como se fosse bom aqui que eles tivessem essa opção. Mas você pode ir ao Google, ter algumas opções onde, digamos, eu queira testar isso. Vamos voltar para, eu vou desfazer isso. Então, estou de volta ao meu texto em branco e fazendo, e fazendo e fazendo. OK. Eu vou deixá-lo lá. E eu vou publicar o site porque o Google precisa ver que foi publicado o doente, o domínio. E essas são ferramentas úteis em geral. Então, está publicado. Vou pegar o link, copiá-lo e colá-lo neste aqui. medida de barra do desenvolvedor da Web é uma boa visão geral genérica de um site. Não vamos passar por tudo aqui. Está muito fora do escopo deste curso, mas vamos analisar a acessibilidade apenas para provar que não ignore contraste porque o Google sabe que é muito fácil. Vai e indexa suas páginas e diz, ok, você obtém menos informações e falha na acessibilidade, como os ratos fizeram com a acessibilidade. E onde está? Aqui está. Botão Agora. Ele sabe. É um contraste baixo , então você pode continuar e descobrir mais. Mas essa é a desvantagem disso você pode ver a acessibilidade. É uma parte disso. Você não o comprometeu na parte inferior dos rankings de busca. Está em 84, é amarelo, não é. Ok, mas não é verde. Então você tem que decidir o que seu projeto está fazendo e o quanto você quer perseguir isso, ok? Todas as taxas de contraste. Às vezes, o texto é apenas decorativo e é uma pequena parte de um texto grande porque o nosso é bem baixo porque parece que não temos muito em nosso site. Isso está ocupando uma grande parte do que está disponível k. Portanto, todo o tipo de apelo à ação, todos os botões importantes devem ter boas taxas de contraste e alguns dos mais coisas decorativas podem não precisar delas assim, mas aqui está uma pequena parte delas. Eu não gostei de qualquer maneira, está bem claro agora e a sombra projetada, está meio que escorrendo. Mas você acabou de entrar, você pode achar que não vale a pena para o extra, quaisquer pontos de estilo que você esteja procurando. Estou divagando. Tudo bem, é isso. Essa é a taxa de contraste. Nos vemos no próximo vídeo. 46. Fundo gradiente no Webflow: Olá a todos. Neste vídeo, veremos como colocar esse gradiente na parte inferior aqui. Eu vou te mostrar como adicioná-lo. Mostre também alguns lugares legais para comprar alguém de outros sites e como pegá-lo emprestado sites como drible direto do Webflow. Tudo bem, vamos fazer alguns gradientes, ok, para torná-lo gradiente de fundo, vamos estilizar nossas seções. Então, vamos simplesmente adicionar uma seção no lugar errado e editar. Tudo o que está em segundo plano. Estamos usando cores até agora, ok, mas há uma pequena vantagem aqui que diz: Na verdade, vamos usar o gradiente de fundo. Ali está, um feio preto e branco. Para ajustar as cores, basta clicar em uma das pontas, ok? E então você clica aqui embaixo, ok, então ele é preto e você pode escolher suas cores. Vou escolher essa e a outra ponta. Isso é meio que espere por mim, eu quero voltar ao gradiente dessa coisa aparecer, você tem que clicar e depois ela meio que desaparece. Você vai. Aí está meu gradiente horrível. Não sei. Década de 1980. Na verdade, está crescendo em mim. De qualquer forma. Então é assim que se faz. Ok, em sua caixa anual, você também pode fazer isso com seu botão. Não precisa ser. Temos uma cor aqui, mas podemos adicionar um gradiente a ela. Existe um linear e nosso rádio e rádio, que significa apenas em torno da E1, desfazem isso. A outra coisa, a outra coisa é editá-la, basta clicar nela nela. E você pode brincar com o ângulo porque eu vou mudar o meu daqui a pouco. Você pode alternar esses ins k da esquerda para a direita. Então, esse é o básico. Se você está procurando bons gradientes, eu estava em pessoas para gradientes. Então gradiing.com, há apenas alguns bons gradientes aqui para você escolher. E quando você encontra um que você gosta, este aqui, você clica nele. Aí está aquele número de escolhas. Volte para o Webflow. Posso clicar aqui e, em vez do meu rosa quente, posso simplesmente colar esse e começar a criar meus gradientes dessa forma. Você pode adicionar uma terceira cor. Porque até mesmo algumas dessas pessoas agarradas , você pode ver que são três cores. Digamos que essa cor do meio aqui, eu possa clicar nela, copiá-la, entrar aqui. E o que você faz é ter essas duas cores. Basta clicar em qualquer lugar aqui. Você pode ter quantas cores quiser. Clique na linha real. Aqui embaixo, cole. E você pode ter três cores. Na verdade, vou acelerar e fazer isso. Tudo bem, lá vamos nós. E outras coisas que você pode fazer. Então, o gradiente é bom. Às vezes, é bom ver o trabalho de outras pessoas. Portanto, o drible é um ótimo lugar para se inspirar. E sempre há alguns bons gradientes para estimular a criatividade. E que pequeno truque legal é, eu vou arrastar essa aba para que fique separada, então lá está meu Webflow e lá está meu drible. Então, vou diminuir o drible. Então eu posso ver isso. Ei, lá vamos nós. E vou tornar o Webflow menor. Isso é um pouco de ginástica de janela. Talvez você não consiga fazer isso. Encontraremos um truque no seu monitor de tamanho, homossexual. Mas aqui agora eu vou para o meu Gradient. Então, eu selecionei isso. Vou remover essa cor. Basta clicar nele e arrastar, arrastar, arrastar e, eventualmente, ele simplesmente desaparece. Basta clicar e arrastar um pouco. Ok, e vamos escolher nossas duas cores. Vou usar isso, clicar nessa cor e realmente usar a ferramenta conta-gotas. E, na verdade, preciso encontrar algo que eu goste primeiro. Então, apenas procurando as descobertas. Digamos que gostamos desse, Eyedropper, escolha aquele. E então eu vou clicar em desligar, clicar nesta extremidade. Lá, clique aqui. Você pode examinar e apropriar dos gradientes de outras pessoas. Os gradientes não são marcas registradas. Eu roubei o Old Horizons One. É muito bom. Então, vamos, sim, você pode fazer esse tipo de ginástica para obter cores ou pelo menos gradientes. Tudo bem? Eu também vou, com a seção adicionar uma altura mínima só porque é difícil de ver. É complicado ver esse gradiente quando ele está meio apertado. E sabemos que se usarmos Command Shift P, Control Shift P para visualizar, você pode ver que ele desaparece. Então, em uma altura mínima, só para termos algumas coisas lá dentro. Portanto, esta seção aqui, não será o nome da seção. Vou renomear essa e esta vai ficar com a seção fria mais baixa porque não consigo pensar em como chamá-la, porque meu design nos leva a essa parte inferior. Ok, e eu vou destacar essas coisas e vou conseguir um amante de seção com muito nome. E vamos dar uma altura mínima. Portanto, abaixo do tamanho, e lembre-se de que não usamos altura porque somos inteligentes. Usamos a altura mínima para que ele possa se expandir ainda mais, se necessário. Tudo bem, é isso. Na verdade, eu vou agora e uau, vou te deixar agora. Eu vou colocá-lo no gradiente certo. OK. Eu quero colocar este, mas sim, você vai para o próximo vídeo. Te vejo em um segundo. 47. Recipiente de largura total Navbar no Webflow: Olá a todos. Neste vídeo, vamos tirar essa seção de heróis aqui e expandi-la para que fique em toda a largura. faremos isso em nosso site de portfólio. Faremos com que essa caixa branca de navegação vá até as bordas, enquanto permitir que uma seção no meio que mantivemos para a navegação também atualize essa parte inferior para ter uma seção dentro dela, Vamos ver como criar caixas de contêineres com largura total navegações e caixas de contêineres no Webflow. Tudo bem, então primeiro, vamos dar uma olhada no projeto anterior. Eu meio que vou gostar de um clube que fizemos. Tudo está dentro de um contêiner. Eu vou colocá-lo lá. Ok. Então, eu tenho um recipiente e tudo está dentro dele e parece que você só deveria ter um recipiente. Isso não é verdade. Ele pode ter muitos e muitos contêineres dependendo se você deseja que tudo seja restrito na parte central ou como nosso design, onde a dor de cabeça passa por toda a parte. E o mesmo acontece com essa parte do gradiente inferior. Então, vamos começar com essa navegação. Principalmente, o que eu quero fazer é excluir a seção de navegação que eu criei. E eu só quero mostrar a vocês abaixo do complemento aqui embaixo de componentes, há uma chamada barra de navegação. Se eu adicionar isso ao meu design, tente obtê-lo. Que eu entendi, a aula não está lá. E se eu arrastá-lo para fora do meu contêiner, veja o que acontece por padrão é realmente vir estruturado com essa seção de largura total. E dentro dele há um contêiner que contém a parte do meu logotipo e todo o meu botão de texto. Então, isso meio que já foi feito para nós e para essa estrutura. Então é isso que vamos reconstruir. Não usaremos essa barra de navegação padrão porque temos apenas um botão. Portanto, não precisamos de toda essa complexidade aqui. Então eu vou me livrar de você. Vou desfazer até que minha seção de navegação volte. Basicamente, tudo o que eu quero fazer é pegar essa seção e tirá-la do contêiner, o que é ótimo. Agora está em toda a largura. Não há realmente nada acontecendo com esse contêiner. Tem o estilo de uma caixa-sombra, mas não há muita coisa acontecendo. Agora eu quero colocar um recipiente dentro dele. Então, tudo bem. Para ir até Ed, prepare o contêiner, veja se você pode colocá-lo no interior. E então vamos, Nós fizemos esta seção. Vou adicionar um botão aqui no momento. Vou pegar esse, copiar aquele e colocá-lo dentro. Você pode ver que ele está meio que contido dentro desse recipiente, curiosamente. Isso permite que você empurre, faça alguns estilos para toda essa largura, ou seja, no nosso caso, apenas a cor de fundo, mas mantenha-a no centro do site. Prática muito comum de web design. Este aqui realmente não precisa ser feito porque eu tenho, não preenchi esta seção aqui chamada seção aqui. Simplesmente não há preenchimento. Então, o fundo está aparecendo através k e essa é a cor de fundo que estou usando. Assim, você pode primeiro ter seções e contêineres dentro delas. Você pode ter muitos contêineres. Vamos dar uma olhada na Apple. Ok, então essa aqui seria uma seção de navegação com um contêiner dentro desta aqui, o mesmo. Este aqui provavelmente não precisa dele, mas poderia ser o mesmo aqui, você pode ver todos eles se esticam usando toda a largura. Vamos fazer outro exemplo dessa parte abaixo aqui, porque nosso design tem esses caras em pequenas miniaturas na seção intermediária. Ok, então aqui, eu acabei de pegar essa seção mais baixa. Agora, isso traz um bom argumento. Agora eu poderia simplesmente ir jogar um contêiner, ei, para um contêiner, entre lá. E eu poderia começar a construir minhas cartas, o que faremos em um segundo. Ok, tudo bem. O único problema é que eu chamo isso de seção. E o que sabemos sobre as seções? O que é um dos painéis para seções, se eu for, porque no momento meu design não tem mais nada. Eu não fiz um rodapé neste só para manter o curso um pouco mais curto, mas provavelmente será um rodapé, talvez aqui dentro dessa grande parte. E se eu quiser encaixar uma seção, uma seção, coloque-a aqui, grandes linhas vermelhas. Você não pode colocar seções umas dentro das outras. Ok, então o que dizer disso? O que fazemos? Essa coisa aqui provavelmente é melhor não ser chamada de seção porque, olhando para o meu design, isso é apenas ornamental. Essa coisa, miniaturas de portfólio como uma seção. Então, talvez haja uma seção de depoimentos e uma seção de fotos aqui. Então, o que fazemos com isso? O que eu vou fazer é dobrá-lo. Vou me lembrar de realmente renomear essa classe porque eu gosto dela. Quero mantê-lo porque tem meu gradiente nele, mas não é mais uma seção inferior. Este será chamado de gradiente de cor de fundo. E eu vou deletar esta seção. Eu não preciso de você. Mas eu preciso porém, qual é a coisa genérica? Que podemos adicionar uma caixa genérica, uma divisão genérica de espaço aqui, desbloquear, tentar colocá-la no lugar certo. Eu tive sorte. Então não está mais, não está dentro do meu contêiner de heróis aqui. Está aqui. Excelente. Então, vou dizer que agora você tem esse diblock, só vou usar meu gradiente de cor de fundo. É a mesma coisa, exceto que agora eu posso ir para a e adicionar uma seção e depois chamá-la de minha seção de miniaturas. Eu posso adicionar outra seção chamada rodapé. Então, sim, às vezes você só tem uma caixa genérica, que é apenas um bloco div. Eu quero terminá-lo porque agora esta seção é a próxima? Ou o contêiner olhando para o meu design, se eu tivesse um rodapé aqui, ok, e vai ter a mesma largura. Eu teria um contêiner e minha seção de miniaturas mais minhas desculpas, minhas miniaturas mais meu rodapé e os depoimentos dependem da estrutura que você está tentando obter. No meu caso, um contêiner vai ser bom. Um recipiente cheio. Você está ficando cansado disso, mas está ficando bom nisso. Meu contêiner está funcionando muito bem. Na verdade, percebemos por que esse contêiner, lembre-se de que adicionamos, queremos que nosso site seja um pouco mais amplo. Então, adicionamos uma classe de contêiner de largura de contêiner. Fizemos o mesmo com a navegação aqui em cima. Portanto, a largura do recipiente, reutilize-o quando as aulas forem boas. Então, dentro daqui, vou adicionar minha seção. E dentro desta seção, essa será minha seção de miniaturas vitalícias. E esse em particular terá algum espaçamento. Vai ter uma margem máxima. Vou adivinhar por enquanto. E vamos adicionar uma grade interna, mas esse é o tipo dessa estrutura. Então, há um contêiner interno que criamos que às vezes temos apenas uma divisão ornamental ao redor dessa coisa, porque no futuro eu quero a seção e provavelmente quero rodapé mais tarde para entrar lá também. Então, duas seções diferentes você me dá. Vamos atualizar este. Eu quero te mostrar este para você possa sair agora se você tem o diretor, se você quiser mais um exemplo, vamos fazer isso com este adaptado e vamos empurrá-lo até as bordas como mostramos na introdução. Essa não é complicada. São apenas os navegadores difíceis de usar. Então, o que fazemos? Como você faria isso? Faça uma pausa, pense em como você não faz isso. Volte para lá e veja se você chegou lá, se você só quer assistir. Então, o que eu vou fazer é que eu preciso que esse cara não fique mais nesse contêiner porque esse contêiner os contém. Queremos que seja gratuito. A seção precisa ser gratuita. Então, como fazemos isso? Eu vou para uma seção, vou acrescentar, na verdade, eu não vou ir para a seção, eu não vou chegar a ela. Vou arrastar esse cara para fora do contêiner e é meio difícil tirá-lo de lá. Esquerda, direita, esquerda, direita. Então ele está lá fora e lá embaixo aqui. Ele já está em toda a largura. Excelente. O que precisamos fazer agora, enquanto ele estiver aqui embaixo, o que podemos fazer é colocar um recipiente dentro dele e tentar todo esse recipiente, eu vou colocá-lo lá e vou Para tentar ou fazer isso, vamos tentar fazer dessa maneira. Está funcionando. Está funcionando. Meio que funciona. Ok, então você entendeu. Você pode tentar fazer isso em. Na verdade, isso é bastante fácil quando eles estão todos empilhados em cima, mas podem simplesmente direto para a direita, arrastá-lo para a direita, rastrear a contagem certa como mais de um por vez em o momento, até onde eu sei. Então, aqui vamos nós. Nós temos essa seção, que é perfeita porque é minha seção de heróis. E tudo isso está dentro desse contêiner. Aqui vamos nós. Agora precisamos colocá-los na lista porque ele ainda precisa estar entre a NAB e os patrocinadores. Então, o que fazemos com esses caras? O que vou fazer é provavelmente colocar um recipiente primeiro. Então vou pegar um contêiner e arrastá-lo direto para o fundo. Eu não vou entender. Então, vou tentar novamente o contêiner. Você pode colocar dois recipientes um dentro do outro. Então você vai, ele está fora da coisa que eu quero que os patrocinadores estejam nele. Funcionou. Se você achar isso complicado de usar, é totalmente complicado de usar. Eles estão melhorando cada vez que eu pareço carregar essa coisa, as coisas funcionam um pouco melhor aqui. Aquele contêiner que contém tudo isso. Então, agora é apenas a ordem das camadas. E eu acho que eu poderia ter feito tudo isso acidentalmente. Então, eu tenho esse contêiner superior, que tem meu navegador nele. Então eu tenho essa seção de heróis, que se espalha por toda a largura. Dentro disso, tenho meu contêiner que contém todas as coisas aqui. Às vezes, a seção entra no contêiner. Se você quiser que esteja lá dentro. Às vezes, os contêineres dentro desta seção são como o começo. Você não está ajudando então. Estou esperando. Então. É assim que modernizamos esse site. Eu não gosto porque provavelmente também precisa ser de largura total, mas são exatamente os mesmos preços deste último aqui. Então, se você quiser fazer isso, vá fazer. Se você não fizer isso, você só vai querer seguir em frente. Vá lá, Dan. O próximo vídeo que você deseja é meu comando. Vamos ao próximo vídeo. 48. Layout de fluxo na Web: colunas vs flex vs grade vs nenhum vs inline: Olá a todos. Neste vídeo, veremos configurações de exibição do layout. Vamos cobrir bloco, bloco embutido e nenhum. Nós os abordamos em pedaços durante todo o curso. Vamos apenas embrulhá-los. Vamos ver por que não estamos usando colunas, ok, e então, no próximo vídeo, faremos a grade de batalha versus o Flexbox. Mas, por enquanto, vamos falar sobre esses primeiros. Tudo bem, então vamos começar com os dois provavelmente mais fáceis. Os que já encontramos algumas vezes, bloco de exibição e bloco embutido . Então, vamos dar uma olhada nos títulos. Bater é, por padrão, nosso bloqueio. O que eu quero dizer com isso? Vou copiar e colar. Há dois deles. Eles não querem compartilhar o mesmo espaço, ou pelo menos o espaço horizontal. Eles se empurram para baixo. Eles são um bloco. O inimigo do bloco é o bloco em linha. Então eu posso dizer isso aqui. Eu vou dar essa música para uma aula. Ok? Eu vou dizer que você não está mais bloqueado por padrão, vou te ensinar a bloquear em linha. Nada realmente aconteceu porque esse cara ainda está bloqueado. Eu vou jogar a aula para ele também, que ambos em bloco embutido, se eu continuar copiando e colando agora, eles estão na fila. Eles ainda são uma caixa, mas estão na fila. Ok, então você encontrará alguns elementos por padrão, nosso bloco significa que todos eles querem empilhar e alguns deles são tipos embutidos de um embutido. Então, vamos dar uma olhada aqui. Os botões estão alinhados. Eles querem ir atrás um do outro. Deixe-me colocá-lo lá. Se eu colocar em um, coloque outro botão. Assim. Eles estão alinhados, colam, colam, colam. Eles vão querer empilhar. Todos estão felizes em ocupar o mesmo espaço horizontal. Eu posso mudá-los. Eu posso dizer meu botão, ok, ele vai ser o botão um. E eu vou dizer para excluir todos esses porque eles não têm a classe aplicada. É por isso que esse aqui com o botão 1. Por padrão, você está na fila, não mais. Você bloqueia. Ele quer preencher todo o espaço, mas tudo bem. Você disse para eles fazerem isso. É um pouco estranho que um botão para o ego possa ser mais interessante fazer isso. E eu sou o que eu deveria ter feito isso com uma imagem. Então, aqui está minha imagem. A imagem, por padrão, quer estar em linha, mas na verdade queremos que ela receba uma classe de imagem. E eu vou dizer que na verdade não, você seria bloqueado. Apenas empurre tudo para baixo, por favor. Isso estaria na mesma linha. Ok, então bloqueie, bloqueie em linha. Vamos ver outra fácil. Vamos ver nenhum. Ninguém diz apenas toda essa imagem. Quando eu volto para o celular, eu realmente gostaria de usar nenhum. Eu gostaria que isso desaparecesse. Veja no desktop e no tablet, Landscape Mobile. Mas neste, desligue-o, você vai. Então, é como excluí-lo, mas pelo menos está disponível nesses outros pontos de interrupção. Você pode desligá-lo no desktop e ligá-lo novamente no tablet. Mas como você o encontra? Esse é um bom argumento. Você pode ver aqui, tem isso. Eu ainda posso selecioná-lo aqui, mesmo que eu não possa vê-lo. Então, eu posso selecioná-los aqui. Está definido como nenhum. Então, na verdade, está aqui, ok, aqui, volte para bloquear ou bloquear em linha ou não no desktop, aparece novamente no tablet e deve estar lá e recomeçar no celular. Aí está você. Isso não é nenhum. O que mais temos? Na verdade, vamos deixar isso aí. Vamos comparar a grade e o flexbox em seu próprio vídeo. E o próximo. Vamos fazer esse vídeo para ficar doente. 49. Layout para fluxo na WebFlex vs Grid que devo usar: Olá a todos. Neste vídeo, veremos as diferenças entre grid, o que fizemos antes, e flex, que é essa opção aqui, k, Flexbox ou flex layouts, flex e grid competem para fazer muita coisa dos mesmos empregos, mas eles têm algumas diferenças que eu quero abordar. E é melhor realmente entender a flexibilidade em comparação com a grade. Então, vamos fazer isso. Tudo bem, vamos começar com uma grade. Ok, terminamos antes de clicar em um contêiner aqui, vou arrastar minha grade para dentro dele e obtemos isso. A primeira coisa que quero mencionar é que se eu desfizer isso, você notará que as grades estão aqui. Então eram colunas, ok, mas aqui onde eu posso mudar as coisas para que meu contêiner, eu possa realmente fazer a grade. Aqui. Realmente não importa se você tem algo na página, como um bloco div vazio ou um contêiner, e você o converte em uma grade. Ou se você arrastar a grade, porque ela é mais uma coisa aplicada a uma tag div. Gostamos de arrastar como caroços sobre k, então vamos fazer dessa maneira. Mas todas essas coisas aqui neste layout são apenas uma div antiga simples com esse contêiner com algum estilo aplicado a essa div que a torna centralizada. Este aqui o divide em porcentagens para colunas. Este aplica um layout de grade para nós. Certamente a seção, eles são apenas esses blocos div com estilo aplicado. Então, adoramos grades. Grades são muito fáceis de adicionar colunas e linhas, remova-as. O espaçamento entre eles, estou mostrando isso porque, em comparação, Flexbox é muito complicado de fazer algumas dessas coisas de espaçamento que a grade faz muito bem. É, é algo para a nossa rede. Ok, então vamos adicionar um pouco de topografia. A única coisa que sabemos sobre grades, porém, se eu precisar adicionar algo em uma dessas células, também adicionarei uma imagem, ok? Ele passa para o próximo. Você quer que eles fiquem juntos, mas lembre-se, tudo que precisamos fazer é colocá-los em um rapper. E eu estou clicando em um nas cargas do meu teclado para este caso, vou usar o bloco div. E dentro desse bloco estará minha imagem. Venha para o passeio. Aqui vamos nós. É complicado. É complicado para todos nós. Então, agora esse bloco div está dentro daqui, se eu clicar nele aqui e copiar e colar, tudo bem. Eu posso colá-lo novamente, colar três vezes e é outra vantagem para a grade. Você pode continuar e continuaremos adicionando células suficientes. Ok, então essa é uma grande vantagem para o Grid. Agora, a forma como a grade funciona é que grande parte da estrutura geral é feita com o pai. Você pode dizer o pai de todas essas coisas aqui dentro? Eu também posso fazer coisas. Na verdade, posso dizer que gostaria alinhá-los ao centro dentro de suas células. Incrível. Considerando que, digamos, a imagem com a qual lidamos no último vídeo, direi esse botão aqui embaixo. Se quisermos mudar isso, não fazemos isso, fazemos seu pai, apenas fazemos isso com ele. Dizemos que agora você está no bloco ou bloco de linha. Então, fazemos isso com a coisa real, enquanto grid e flexbox. OK. Fazemos isso no contêiner principal. OK. Mas os pais têm filhos, esses garotinhos. E você pode fazer coisas individuais com essas crianças. Então você pode dizer que eles estão todos centrados , exceto por esse rebelde aqui embaixo. Se você clicar no filho do pai, ok, você pode dizer: Ei, você está alinhado à direita. As grades são incríveis. As grades são incríveis para conteúdo realmente estruturado como nossas miniaturas, que faremos para nosso portfólio. Muitas coisas repetitivas. Podem ser itens em sua loja, imagens ou seu portfólio. Muito bom, mas muito estruturado. Em contraste, tudo o que o Samy flexbox, o que faremos daqui a pouco, é bom para coisas irregulares. Coisas um pouco estranhas precisam fazer coisas estranhas. O que eu quero saber é que, digamos, essa imagem, eu quero movê-la para o lado. Você pode ver que esta imagem não é filha da nossa grade aqui. Como você vê, é como se houvesse a grade, a testada e ela descesse um nível. Então, há o diblock aqui é a criança, as coisas dentro da criança ou dos netos que eu estou fazendo qualquer coisa. Não existe tal coisa que um neto tenha feito com que essa maleta pareça certa. Ok, mas não há layouts extras para isso. Então, uma coisa é notar e vamos voltar para lá porque estamos meio que atravessando e porque eles gostam, mas eu quero que isso vá para a direita. Isso é bem pequeno e eu preciso que fique à direita. Eu coloco uma grade dentro dela e vou direto para lá? Seria ridículo. Você poderia fazer isso. Mas é muito mais fácil usar o flexbox. Ok, então eu vou escolher esse diblock. Esqueça que isso faz parte de toda a criança. É só fechá-lo. Ignorar isso não precisa ser. Mas digamos que agora eu vou usar o flex box. Flexbox tem muitas dessas opções, mas não precisou criar uma grade massiva como Mike. E posso dizer que, na verdade, está empilhado verticalmente, o que é incrível. De volta para onde estávamos. Sempre vai para o padrão para horizontal, o que nunca é do jeito que eu quero. E você pode dizer que, na verdade, eu quero tudo à direita. Agora que combinamos grade e flexão, estou balançando meus braços porque foi bom. É complicado descrever a grade versus o Flexbox e onde usá-la. Porque muitas vezes você vai usar uma combinação de 21 ou outra, ok, nunca são pessoas pequenas como Mac ou PC, você precisa se comprometer. Eu vou fazer na minha frente porque eu gosto, funciona muito bem. É rápido, super caro, mas eu gosto. Eu também posso estar em um PC. OK. Eu tenho que odiar o PCS. Essa é a minha que faz parte do contrato que você assina com um Mac, mas com flexbox e grid, tem muita coisa tipo, Ah, eu só uso flexbox ou você pode usar grid. Há uma mistura que você pode usar. Existem apenas vantagens e prós e contras de ambos. O que vou fazer agora é limpar minha grade apenas para focar um pouco mais na flexibilidade, porque não queremos misturá-las. É entender separadamente. E então, no próximo vídeo, quando fizermos mais alguns exemplos, vamos misturá-los novamente. Então, eu tenho esse contêiner e vou adicionar um div a ele. Ok, então, pegue minha div bloco por bloco se expandirá para preencher o espaço. E tipo, eu não quero que ele preencha o espaço. Eu quero que seja, vou dar um nome a ele. Vou chamar isso de meu cartão 1. Ok? E eu vou dizer que você tem o tamanho de 33%, 33% do recipiente. Você pode meio que vê-lo lá, YZ tão pequeno que você, ok, você sabe, porque precisa de uma altura mínima, eu vou colocar uma altura mínima de 500, muito grande, 300. Ok, então vou dar uma cor de fundo para que possamos vê-la. Entrando no flexbox. Confie em mim, escolha uma cor. Marge passou muito tempo escolhendo uma cor e é uma cor horrível. Ok, então temos um cartão , tem uma altura mínima, é 33 por cento porque seria ótimo se eu pudesse copiar. Na verdade, vamos colocar algumas coisas nela primeiro. Então, vamos adicionar acertar a, bater, eu vou para uma imagem acima da minha batida, vou escolher uma imagem. Eu tenho um que acabei de carregar do tutorial anterior é que você pode pegá-lo, o que quiser. Só quero adicionar isso para que fique bem. Ok, então temos uma imagem, eu tenho isso. Vamos tentar reconstruir essa grade usando o Flexbox e queremos ver algumas das limitações. É bom ver isso porque vai te ajudar a saber por que você usaria o grid em vez do Flexbox. O Flexbox é bom com esse cartão. Eu quero 12 deles e, por padrão, ok, meu cartão, que é uma tag div, está configurado para bloquear e gostaríamos que fosse feito em linha. Vamos fazer redes de blocos embutidos, colar, colar, colar outra. E isso pode ser o que você quer. Você pode adicionar algum espaçamento ao redor dele que funcionaria. Agora, por que diabos usaria o flexbox? Porque tem muitos recursos extras interessantes. Vou clicar nele. Mas temos todo esse tipo de alinhamento. Nós podemos justificar isso. É tudo muito legal. Mas vamos desfazer isso. Porque, como Grid, você faz isso com os pais. Então, eu vou fazer é voltar a bloquear. E eu não quero fazer isso com esses itens individuais. Quero colocá-lo em um recipiente ou em uma embalagem e depois transformá-lo em flexbox. E todos esses caras se tornam crianças, de acordo com minhas cartas. Então, vou adicionar um bloco div. Eu poderia fazer isso no contêiner? Eu poderia totalmente. Vamos apenas fazer seu contêiner. Então, digamos que o contêiner seja, Flexbox se manterá na horizontal, na vertical. Então, voltamos para onde estávamos. Agora, porém, tínhamos, o que temos 33%? Vamos torná-lo um pouco menor. Então, meu cartão tem um estilo que diz que você é 33 por cento. Vamos fazer 25 para o Google e torná-lo um pouco maior. Ok, mas espaçamento, eu posso começar a fazer porcentagens para espaçamento, ok, mas fica complicado. Então, como antes, poderíamos usar o bloco embutido e dizer apenas adicionar um pouco de espaçamento. Mas é aqui que o Flexbox fica bom. Você pode dizer, na verdade, eu quero mudar o espaçamento e vou fazer isso não com a criança, mas com os pais. E eu poderia dizer, Ei, pessoal aqui, eu gostaria que vocês justificassem como este parece espaço entre eles. Trabalho feito, em vez de tentar calcular nosso espaçamento. O bom disso é que quando você atinge esse tamanho, ainda há espaço para eles. Ok, então é bom e responsivo. Então Flexbox, se você vai apenas fazer isso, ok, pode ser o suficiente. Ok, então essas cartas podem ser bem grandes. Então você pode dizer que , na verdade, eles são 33,3%. Eles preenchem tudo na maioria das vezes. OK. E você pode dizer: Na verdade, eu gostaria de voltar para os pais e dizer para justificar todos eles, mas vamos colocar uma pequena lacuna nisso. Mas eu tenho dez pixels. O Flexbox vence, mas chegamos perto de onde o grid estava funcionando. Ok, então é aqui que há muita confusão, como qual deles devo usar? Se você quisesse apenas uma coluna desses pequenos cartões aqui, não importaria. Flexbox ou grade. Muitas dessas coisas são iguais, então não importa. Meu vício, eu me lembro primeiro do grid, use flexbox. Em seguida, se não funcionar com Flexbox e caixa fixa é um pouco chato, mas se você tiver que ter quatro desses, se eu for copiar e colar para eles, ele tentará comprimi-los em uma linha. É aí que posso dizer rap parental. E é aqui que tudo dá terrivelmente errado. E eu acho muito complicado fazer as coisas alinharem K e colar outra. Podemos trabalhar nisso e alinhá-los, e , na maioria das vezes, podemos fazer com que sejam perfeitos. E o problema acontece com o PAD. É muito mais fácil fazer grades. Vimos como era fácil todos esses caras em uma grade em seu caminho. Mas se for apenas uma linha deles, flexione o Flexbox e o Grid, a mesma coisa. Seríamos úteis o Flexbox , então, sobre uma grade aqui, seria para cartas desiguais seriam irregulares ou qualquer coisa. Ok, vamos fazer algo parecido com um mosaico. Então, se você se lembrar, grades, boas, desde que sejam bem estruturadas, enquanto isso, se eu for você, essa toupeira e você, ou ainda maiores, tudo bem, e você bem pequeno. O menor deles, esse título aqui, neste caso em particular, é minúsculo. Este é mais longo a pouco. Podemos com o flexbox, colocamos o código, dissemos Você é 33 por cento, ok, só para dar um pouco de espaçamento comprado porque agora adicionamos o Flexbox, posso dizer que sim, mas opcional, Vou clicar, Livre-se disso e veja isso. Será o tamanho que precisa ser. Precisa ser pequeno, grande ou pequeno? Então eu posso decidir com os pais, posso fazer coisas como: o que faz? O que ele faz? Todos eles acabaram de se empilhar? Oh, isso é bom. Grid não pode fazer esse tipo de Cain. Mas você tem que ser muito explícito. Você tem que dizer que a coluna a tem 0,5 frações, enquanto isso, você pode vincular o conteúdo decidir o tamanho dele. Então, flexbox, super flexível, um pouco mais difícil de entender. Grades, super rígidas, mas ótimas porque muitas coisas em sites são meio rígidas. Vamos enlouquecer com o contêiner Flexbox. Podemos dizer que todas as crianças estão alinhadas ao mesmo tempo em vez da linha superior ao longo do trecho inferior para caber na linha superior no meio do recipiente, à direita. Muitas dessas coisas também estão na grade, mas todas elas estão ocupando suas próprias células, as separando, empurradas até as bordas para embrulhar. Ok, então essa é uma espécie de visão geral da grade versus Flexbox. Vamos dar mais alguns exemplos no próximo vídeo. Na verdade, faremos algumas coisas e veremos onde vamos parar. 50. Layout de caixas flexíveis com exemplos no Webflow: Olá a todos. Neste vídeo, mostraremos alguns, nós, mostrarei alguns exemplos. E juntos entenderemos um pouco mais o layout do flexbox. Então, veremos alguns bons casos de uso como esse aqui, a navegação, ok, tudo está justificado. Então, coisas à esquerda, essas coisas à direita, eu posso adicionar e remover coisas. Aqui. alinhamento também é muito bom para o Flexbox porque é uma seção e bem no meio aqui, eu tenho essa parte adorável que não está usando margem como fizemos antes, só quer ficar no meio. E outro exemplo aqui em que obtemos essas duas opções de pilha de casos ao lado da nossa imagem e faremos isso com o Flexbox. Tudo bem, não está fazendo coisas. Ok, então vamos começar com a navegação. Construímos essa navegação aqui na parte superior que tem essas coisas por dentro. É um bom uso do Flexbox. E eu vou fazer isso isoladamente. Então, eu não estou fazendo isso em nosso projeto principal, estou apenas fazendo em um projeto vazio apenas para que possamos trabalhar no Flexbox sozinhos. Então, um contêiner, a, usando a no teclado, coloca um bloco div dentro. Observe que coloque uma seção dentro dela, ok, porque será a seção de navegação, lado da seção do meu contêiner chamada Seção nav. Vou adicionar algumas coisas dentro dele, como um a, vou adicionar nosso logotipo. Vou adicionar uma imagem. Vou escolher um dos nossos arquivos de exercícios. Há um chamado patrocinador. Ok, enquanto que se eles patrocinam um, eu estou usando isso apenas como exemplo. Você pode torná-lo um pouco menor e adicionar um botão, um botão, apertá-lo lá dentro. Minha seção de navegação está se expandindo para caber as coisas dentro dela. Eu quero colocar uma altura mínima. Sabemos tudo sobre essa seção de navegação. Vou colocar um tamanho, vou colocar uma altura mínima. Todos os cento e 50. Não, 100. Isso bastará. Agora. Eu quero colocá-lo no centro, o que é complicado. Eu poderia usar margens. Ok, e tudo bem. Eu poderia trabalhar. Há muitas maneiras de fazer a mesma coisa é, eu acho que um dos pontos dessa seção de layout, mas vamos usar o flexbox. Então, uma coisa legal sobre o flexbox é eu faço isso com as crianças ou com a embalagem, do lado de fora, mas tudo bem. Fazemos isso com a parte externa dos pais, para esses caras, dizemos que você fez o trabalho do Flexbox. Um dos padrões é horizontal, que é o que eu quero, não vertical ou horizontal. Mas você pode ver aqui que o padrão também é stretch. Eu quero que seja o centro. Vá em frente e justifique. Olha isso. Há alinhamento à esquerda, centralizado, linha direita. Mas veja esse. Bem, quem é exatamente o que eu queria. Ok. Seja o que for que esteja pairando acima dele, o espaçamento entre as caixas colocará uniformemente o espaço entre o Flexbox, super simples nessa situação. Ok, é exatamente o que eu queria fazer por causa da facilidade desse alinhamento e justificativa. Vamos um pouco mais longe. Quero adicionar outro botão, copiar e colar. Ok, então é distribuí-los uniformemente, o que é ótimo. Então, nenhum desses outros vai funcionar para nós. Então, o que podemos fazer é levar o Flexbox um pouco mais longe. Esses dois, se os colocarmos em sua própria etiqueta div, ok? Isso significa que há um logotipo e uma tag div. Então, ainda os separaremos. Ok? O fato de haver duas coisas dentro dela não importa. Ele apenas olha para o nível mais alto. Parece que há um logotipo e uma tag div e vamos separá-los. Então isso meio que faz sentido. Então diblock, eu digo div tag, é da terra HTML, eles a chamam de tag div. Eles chamam isso de bloqueio aqui no Webflow, o que é preciso. É só outra forma de chamá-lo. Vou colocar você lá e você dentro daquele quarteirão. Então, o que acabou de acontecer? Ok, eu tenho uma seção e há apenas duas coisas dentro dela. Ok. Então, dividindo uma para a esquerda, uma para a direita, dentro do diblock, há duas coisas acontecendo, mas então você vai consertar. Ok? E eu posso, obviamente, adicionar quantos botões eu quiser, porque está tudo naquele pequeno invólucro, aquele diblock e está empurrando para o lado. Agora, outra coisa, outro nível em que eu poderia entrar, eu poderia adicionar um pouco de preenchimento. Eu poderia criar um texto de botão. Eu poderia usar a navegação por botões e adicionar algumas margens. Ok, lá vamos nós para espaçá-los. Totalmente bem. Ok. Mas estamos explorando o Flexbox. Então, o que eu poderia fazer é, no momento, certo, temos nosso invólucro, o pai que tem o Flexbox aplicado. E essas duas coisas são duas crianças dentro dela. Estou fazendo essas coisas. Bem, podemos fazer é dizer, Ei, criança, que é chamado de bloco DIV terrivelmente chamado. Vamos dar a ele um nome próprio. Vamos chamar isso de Weather Nav. Botões. Agora, botão rápido, só para deixar claro para mim mais tarde, o que posso dizer é que posso dizer que conheço seu filho. Eu posso te ver lá. Você pode fazer coisas que não fazem o suficiente. Eu quero a lacuna. Ok. E isso é bom. Ok. O que posso fazer é dizer que conheço seu filho, mas agora você também vai ser pai ou avô. Ok. Então, agora você é pai, e posso dizer que as pessoas dentro de você, seus filhos terão uma lacuna de colunas ou fileiras. Vamos fazer colunas. E vamos embora. Eu poderia simplesmente colocar margem no botão? Totalmente bom. Se eu, eu poderia construir isso em uma grade. Eu poderia totalmente. Eu poderia ir You grid atrás do meu contêiner, depois do meu no contêiner , mas depois disso, o problema será colocá-lo lá. Mas eu preciso de 123, eu posso fazer isso. Então eu vou pegar isso. Eu vou ter três colunas. Uma fileira. Eu vou fazer aquele com esse tamanho para o logotipo. Na verdade, eu vou fazer esses dois e torná-los grandes. É aqui que você se depara com problemas que gostaria, ok, quão grande é esse 1ab? Mas por ser tão rígido, Mike pega links e esses botões do mesmo tamanho. Então, se não fossem, eram exatamente os mesmos que nunca são, você poderia usar a grade porque você pode torná-los do tamanho certo e simplesmente colocar os botões e seria ótimo e você pode ajustar o preenchimento. Ok, ótimo. Mas isso é problemático. Se você tiver seu segundo botão com texto muito longo, número dez. Então você pode ver como isso os está separando. E se eu tivesse outro que já tivesse Flexbox em socorro, formas irregulares, flexibilidade Flexbox. Tudo bem, vamos fazer a caixa do herói. Então, dentro do meu contêiner principal, eu quero outra seção. Então eu vou para uma seção, vou para a seção e vou tentar colocá-la no lugar certo. Foi para dentro. Lá vamos nós. Então, embaixo dessa vai haver uma seção fria aqui. E o que eu gostaria de fazer no começo, então vou apenas colorir. Vou fazer com que o Alt ou Option clique em qualquer uma das divisas. Eu vou dizer que você vai ter uma cor escura. Ótimo. Toda a tipografia aqui será branca e será uma fonte aleatória. Ok? E eu vou fazer uma altura. Portanto, o tamanho não será uma altura, mas uma altura mínima de 500 pixels. Agora, se eu quiser adicionar um herói, desculpe, aperte um parágrafo e um botão como o começo. Se eu conseguir um, eles não funcionaram. O que você vê aqui, acontece, acontece com os melhores , voltou. Na verdade, clique fora. Agora aperte a e diga, eu quero, eu quero um pouco do texto do parágrafo. E quando um botão, Ok, eu quero esses textos de parágrafo aqui vai ser meu herói p e ele vai ter um tamanho. Eu quero que seja o mínimo. Na verdade, vamos usar uma largura máxima de 600 pixels. Não se estende para o exterior. E eu quero todos eles centrados. Eu poderia ler e dizer, tudo bem, topografia. Tudo dentro desta seção de heróis é topografia Align Center. E isso meio que funciona. Ok. Mas em socorro como Flexbox, flexbox vai dizer, cara, isso é ousado, não é bom. De qualquer forma, o pai externo, tudo bem. Eu vou dizer que o layout é flexbox, o que não funciona. Vai ser vertical. Eu quero que isso se estenda até o fim? Basta ir para o centro. Ei, olhe para nós e também não quero errar com o top. Está entrando em nosso Flexbox. Parte inferior elástica, com espaçamento uniforme. Há muita flexibilidade com o Flexbox. E, obviamente, uma grade aqui não seria útil. Há outras formas de fazer isso. Existem maneiras de fazer coisas, como margens automáticas, e há outras maneiras de fazer isso. Você pode se deparar com suas aventuras. E pode ser tão correto quanto este. O herói P precisa estar centrado. Aqui vamos nós. E não precisa ser a fonte gigante. Vamos buscar o senso público. Você pode não ter areias públicas. Podemos usar um monte de coisas boas, tudo bem, então alguns bons exemplos de uso do Flexbox. Vamos fazer mais. Digamos que queremos essa imagem à esquerda e essas duas coisas meio que empilhadas uma ao lado da outra. Grid funcionaria totalmente, mas só faremos flexbox. Ok, então o que vamos fazer é como você faria isso? Sente-se aí, faça uma pausa. Tenha um pequeno jogo de memória como pensar no desafio de como você faz isso, faça com que funcione. Ok, primeiro de tudo, precisaremos uma div para cercar todas essas coisas. Ok, então eu vou fazer um bloco if e colocá-lo lá em algum lugar, imagem na urina. E disse que só queremos isso. Queremos que isso fique meio que preso ao lado. Tudo o que precisamos fazer é ir até o pai, colocar a embalagem do lado de fora e dizer que você vai o Flexbox do jeito errado. Ok. Vertical. Horizontal é mais ou menos o que eu quero e quero que ela se alinhe no centro. Agora, por acaso , eu tinha meu aquecimento na frente da minha imagem. E isso me lembra que você pode fazer algumas coisas estranhas em que, com o Flexbox, dizer, pode mudar a direção para que você possa criar, criar a imagem primeiro nela primeiro, depois tudo fica em oposto. Não sei por que você gostaria de fazer isso. Mas você pode, vamos colocá-los da maneira certa e alinhá-los ao lado direito. Então, lembre-se de voltar para os pais, vá para o alinhamento à esquerda. E o legal do flexbox são as lacunas entre as colunas. Eu vou usar minha seta para cima segurando Shift Up, você pode decidir lá. Legal. Então isso funciona. Digamos que eu queira adicionar o botão abaixo aqui. O que fazemos? É isso mesmo. Se eu tentar editar, o que vai acontecer, entre lá. Está meio que espalhado por todos eles. Então, eu preciso de uma div enrolada em tudo isso. Então, um diblock, jogue ali e ali, você e quase perca o pedido aqui. Então, observe imediatamente. Então eu tenho esse bloco div, é uma criança e essa imagem também. Só há duas coisas aqui. Então, agora é mais fácil ir. Todos os pais, todos alinhados à esquerda para que caibam lá. Agora está centralizado, certo? Mas você pode ver em cima e em baixo, há todo esse espaço no meio. Então, vamos descobrir o que está causando essa grande lacuna. É um bom tipo de site que fizemos há algum tempo e não temos certeza de onde vem todo o estilo e por que há uma grande lacuna aqui? Então lembre-se daquela visão de raio-x, ok, está escondida aqui. Podemos dizer que você vai para o modo de raio-x, clica em segundo plano, mouse e começa a ver de onde vem todo esse espaçamento. Então, há um pedaço de espaço e vem de botão, herói e um pouco de algo chamado H2. É uma etiqueta H2 com um estoque ou cinco de aquecimento. Então, vamos removê-los. Podemos fazer isso enquanto eles estão no modo de raio-x. Então clique aqui e diga botão herói. Portanto, é apenas o botão de uma página do Hara porque a nomeamos bem. Não estamos usando em nenhum outro lugar. Espero que eu possa esclarecer isso. Vou usar Option ou Alt em um PC. Esclareça isso. Eu preciso do lado direito? Eu também não preciso disso, agora vai valer a pena. Agora. Está parecendo melhor. Talvez eu queira esclarecer isso também. Vamos clicar sobre isso. Ele está obtendo seu estilo a partir da soma. Ele é um H2 tags, dê uma olhada. Então ele é H2 por algum motivo. Deveria ser um h5, o que esclarece nosso problema. Porque se for H2 e eu vou limpar a etiqueta H2. Eu usei o H2 várias vezes. Acho que é um H3, isso é um H2. Eu apenas rotulei isso erroneamente no início do curso. Você deve ter notado no início do curso. Então, na verdade, eu deveria fazer dele um H5 e meus problemas sobreviveram. Tudo bem, então eu vou desligar a visão de raio-x e ver outro bom uso do flexbox porque ele tem ainda mais, digamos que o espaçamento aqui, eu posso ir para o meu bloco. Na verdade, não vou fazer nada de bom transformá-lo em outro flexbox e brincar com o espaço entre eles, mas parece bom. E eu já tenho essa aula aplicar botão frio aqui que eu poderia simplesmente seguir. Então, não é tudo. Você não precisa ficar descendo pela toca do coelho se mais Flexbox estiver em cima do Flexbox, então você não poderia fazer o certo ou o errado por isso. Vamos fazer outro. Tudo bem, vamos terminar com este. Fizemos isso mais cedo. Lembra? Eu só faço com que seja flexível. Megan Flexbox, empurre para a direita e eu falarei sobre isso mais tarde. É hora de falar sobre isso. Tudo bem, vamos desconstruir o que fizemos. Então, havia um contêiner dentro desse contêiner que era uma seção de heróis. Dentro dessa seção, colocamos uma grade, meio colocamos uma de um lado, uma do outro. Perfeito. E então, para que essas duas coisas pressionem o botão Enter, elas precisam ser agrupadas em uma div, ok, caso contrário, elas acabam pulando para a próxima coluna da grade. Então nós fizemos isso. E o que fizemos foi dizer, Ei, basta pegar a div, fazer com que, bem, começou assim, mas esse era o nosso problema. Conseguimos que fosse para o lado direito em termos de alinhamento. Mas você pode ver o herói, a caixa H1 ao redor está alinhada à esquerda e não conseguimos fazer com que ela vá para o outro lado, o botão ficou preso lá e isso também. Então, o que eu fiz foi dizer diblock, por favor, sejam apenas movimentos, estejam alinhados à direita. E então eu aceno minhas mãos e não perguntamos por que fazer isso mais tarde. Mas agora você entende que é um recipiente super fácil, os pais fazem flocos à direita. Dias felizes. No entanto, também aprendemos anteriormente neste vídeo que precisávamos empurrar essa coisa para o centro. Nós falsificamos isso dizendo que herói 1 tem uma margem enorme e funciona, não há nada de errado nisso. Ok, então vamos fazer isso de uma maneira melhor ou de uma maneira diferente. Só para aprimorar nossas habilidades de filmes. Então, como desmarcar Isso mesmo, opção Alt, dê um clique. Ok, então agora está preso no topo. Como faço para entrar nisso, é aqui que você vai. Tudo bem, clique no diblock, e aí está isso em um. Boom, boom, boom, boom, boom. Já nos deparamos com esse problema antes. Eu me deparo com todos os problemas o tempo todo e fico muito confuso. Eu pergunto, como você desce até o fundo? É porque esse diblock é, sua altura, está ajustada para que nada tenha nenhuma altura. Então, ele meio que se encerra nas alturas que não vêm desse diblock, está vindo de cima na lista, bem acima, não da grade. A grade não está te dando a altura. É a seção de heróis. Ok. Vamos verificar, na verdade, podemos verificar com a visão de raio-x? Não tenho certeza se ele pega isso. Vamos dar uma olhada. Isso faz isso? Não, não aparece neste. Tudo bem. Visão ruim de raio-x. Eu subi até descobrir qual deles está dando a altura. Ok, e eu vou removê-lo. Bem, eu vou realmente cortá-lo. Diga isso de volta ao nada. Ok, lembre-se de clicar em Alt ou Option. E então eu vou dar a altura ou a altura mínima para o diblock, então ele sabe o quão grande deve ser. Então, vamos usar a altura mínima, colá-la nesta extremidade porque a temos no centro. Ele sabe ir para o centro ou para o fundo. Bem, ao mesmo tempo ou espalhe-o uniformemente, espaçei-o uniformemente. Ok, então o ego, voltamos, vivemos o que fizemos e o tornamos melhor. Não é melhor. É a mesma coisa. Está no mesmo nicho de posição, apenas uma maneira diferente de fazer isso. Tudo bem. Eu não sei como você se sente. Vou continuar com o flexor agora, habilidades flexíveis. Sinto que essa é minha nova piada no resto do curso, Vamos flexionar, flexionar habilidades. E acho que fizemos alguns pequenos projetos com alguns problemas, mas sinto que temos alguns exemplos em nosso currículo. Vamos passar para o próximo vídeo. Vamos aprender algumas coisas novas. 51. Cartões de altura iguais com botão na parte inferior do Webflow: Olá a todos. Neste vídeo, vamos fazer com que esse botão fique na parte inferior de todas essas cartas diferentes. Se você está voltando do futuro e já me viu assim, o que foi de novo? Você se certifica de que o pai Rapa está configurado para um layout flexível e, em seguida, definido como ele é uma criança. Ok. Bem, ela está configurada para uma margem e a margem superior está definida como automática. Ele descerá até a caixa principal. Tudo bem, vamos fazer tudo isso. Vai ser divertido. Tudo bem, vamos começar com um problema. E eu pensei: “Onde está o meu botão?” Meio que funciona. Eu meio que consigo navegar nele. E então aqui eu estava tipo, Olá, solicita controle de design, você está projetando e outra guia. Bom trabalho, Dan. Então eu acabei de abri-lo duas vezes. Normalmente não o abro duas vezes porque não preciso deles. Mas quando estou fazendo esses tutoriais, eu faço. Mas ei, você pode ter esse problema. Então, vamos abrir um deles e começar. Ok, então vamos adicionar esse pedaço no canto inferior direito. Deixe-me pegar meu arquivo Figma juntá-lo lá para que eu possa vê-lo. Então, construir essa primeira coisa é eu preciso de uma caixa flexível ou de uma grade. Grid vai ser muito mais fácil. Então, eu já configurei meu plano de fundo que vai até as bordas desse contêiner aqui. Eu lhe dei um nome e dentro dele, vou colocar uma grade. Então, vou usar um método um pouco diferente em vez ocultar um e arrastá-lo para dentro. Ok, vou fazer isso. Apenas nos deixe confortáveis usando todas as formas. Vai ser uma mercadoria. E eu vou usar o Grid. Ok? E eu vou entrar em contato porque é o único disponível. Lá vamos nós. Então, temos uma grade e agora eu quero que seja, vou fazer três transversais. Vou deletar um deles. Na verdade, não vai acontecer, não importa. Isso os adiciona à medida que você avança porque é pedido próprio. Tudo bem, então eu tenho nossos tamanhos. Agora o que eu quero fazer é construir meu pequeno cartão lá dentro. Então, vou clicar em Concluído. Ok, e aqui, não vou clicar duas vezes nele. Vou arrastar um contêiner e um bom contêiner genérico. Eu tenho isso selecionado. Vou usar o Comando D e digitando div, div, div block. Vou dar um nome ao meu quarteirão, só que vai ser chamado de bacalhau. Bacalhau é um bom nome genérico para meu cartão de preços e nossas capas Esses cartões para miniaturas nosso portfólio podem ser cartões mostrando itens diferentes em sua loja. Ok. Então, cartão, miniatura. Agora eu não vou gastar muito tempo. Acho que queria te mostrar como colocar o botão na parte inferior. Não quero muito estilizá-lo. Vamos apenas incluir algumas coisas básicas. Então, Comando E dentro dessa div, vou colocar uma imagem. E vou deixar isso por enquanto. Eu só quero adicionar, vamos colocar um livro didático. It takes block é simplesmente genérico. Texto. Na verdade, não é um parágrafo, é meio que uma coruja. E este é o nosso projeto de design de UX. Ok, dentro dessa div também, vou dizer Comando E e vou dar um golpe. Ok, vou me certificar de que é um aquecimento também. E então, o que mais podemos não colocar meu botão? Botão de comando D. E isso é bom o suficiente. A única coisa que eu provavelmente preciso é minha imagem para fazer isso funcionar. Vou ao meu painel de ativos e vou pegar esses também. Eu escolho alguns genéricos que todos nós podemos usar. Então, está no portfólio e na miniatura de um a seis. Então vá buscá-los e simplesmente coloque-os em sua página. Vou acabar no painel de ativos e superar as coisas do seu próprio portfólio. E vamos começar com, na verdade, eu posso deletar minha imagem e simplesmente arrastá-la direto de lá. Tenho certeza de que vai na tag div. Faça isso aqui. Aqui vamos nós. Tudo bem, ótimo. Eu tenho uma imagem. Não é preciso um pouco de aquecimento e um pouco de botão. Não vamos muito mais longe. Vamos colocar, mesmo que eu coloque a miniatura do cartão, vamos colocar uma cor de fundo nela. Chegou, mas Alt ou Option clicam nessas divisas. Vou para minha lista. Vou estilizar o dub. A biografia será ampla o suficiente. O que realmente queremos fazer é ter alguns deles com cabeçalhos de tamanhos diferentes. E queremos o botão no canto inferior direito. Então, vou pegar alguns textos. Basta copiar e colar dessa coisa. Copiar e colar. Eu vou, eu copiei aqui e colei. Então, eu tenho alguns diferentes. E agora vou ampliar e mudar para cabeçalhos diferentes e trocar essas imagens. Ok, ignorando as margens externas, vou estilizar no final deste vídeo, só quero levar você a um ponto em que eu quero o botão aqui e quero tudo no inferior porque no momento, porque esses títulos são diferentes, este não está exatamente na parte inferior. Então, isso é um trabalho chamado Flexbox. Então, fizemos a grade, é ótimo. Diga consistente. Mas queremos fazer algumas coisas engraçadas. Então, vamos usar o flexbox. Então, eu tenho a miniatura do meu cartão que está embrulhando tudo. Sou filho da rede. Ok. Vamos ignorar isso porque o que vamos fazer é ir ao Layout e dizer, na verdade, agora você é o pai do Flexbox e precisa estar na vertical. E não precisa se alongar no momento em que o padrão é alongamento. Ok, legal. Então, para movê-lo para a direita, fizemos isso mais cedo. Então lembre-se de que os pais fazem coisas genéricas, mas a criança pode ser rebelde e dizer que você é charter flex e tem um alinhamento de direitos. Aqui vamos nós. A próxima coisa que queremos fazer é nos mudar. Por que esse não foi movido? Por que essa e não essa? Porque este ganhou uma aula enquanto eu a mudava. Este não tem essa classe aplicada. Então eu vou chamá-lo de cartão de botão. Ok, e eu vou jogar aqui usando meus atalhos super fofos que aprendemos anteriormente, onde você anteriormente em Command and Enter. Você vê que simplesmente saltou para os estilos aqui. E eu posso digitar o botão. Estou usando minhas teclas de seta para descer e aplicá-la a essa. O mesmo com este. comando ou controle. E vamos receber um cartão, o botão que quisermos. Provavelmente é bom, não foi? Todos eles aplicaram a aula. Então, estamos fazendo a mesma coisa, essa linha vermelha. Como podemos ser empurrados e empurrados para o fundo? a grande coisa estiver selecionada, você pode ir para o seu espaçamento. E se você definir a margem como automática, automático significa apenas preencher. intelecto não pode mais preencher. Ok. É meio que se expande e empurra até não aguentar mais. Então, em vez de dar um tamanho real, dê uma margem. Isso só funciona quando você configura o pai como Flexbox e o filho também, margem automática. Esse é o grande truque para isso. Agora vamos entrar e vamos causar mais problemas, mas saiba mais. Vamos fazer isso. Então eu quero isso. Além disso. Eu realmente não tenho feito isso dessa maneira. Vamos ver o pouco, vamos fazer isso, vamos tentar fazer isso um pouco mais. Em vez de usar o navegador, usaremos a miniatura do cartão. O que eu quero fazer é preencher as duas coisas. Eu quero que seja uma altura específica ou uma altura mínima, então eles são todos iguais. Portanto, a miniatura do cartão terá um tamanho de, não vou usar a altura. Lembre-se de que podemos usar uma altura mínima de 300. Um palpite terrível. Vou continuar subindo até encontrar algo. Vou dar espaço para um terceiro, um terceiro pedaço de texto. E provavelmente vou diminuir esse espaçamento, mas fui para uma altura mínima. Todos esses caras vêm para o, descem para o passeio também, o que é legal. Então, o que Nixon vai fazer vai estragar totalmente o que acabamos de fazer. Porque o que eu gostaria de fazer é colocar almofadas ao redor do lado de fora, agora eu poderia colocar uma aula em torno disso, aula em torno disso, mas uma aula em torno disso. Mas, obviamente, é melhor colocá-lo em volta da embalagem. O problema é que, é a imagem, eu quero ir até a borda. Desenho. A imagem vai até a borda, mas apenas esse pedaço. Ok, então eu poderia usar bacalhau, espaçamento entre miniaturas, manter pressionada a tecla Shift e não desculpe, não preencher as margens. Ok. Eu poderia fazer isso se fosse o que queríamos. Não é o que eu queria. Porque o que eu quero é apenas um espaço aqui embaixo. Então eu vou criar uma pequena div dentro dessa, ok, outra div e colocar todo esse lixo dentro dela e fazer isso. O problema é que eu fiz bem, não o problema em todo o Flexbox que eu fiz nesta embalagem externa realmente não precisa mais dele. Eu posso deixá-lo lá. Vamos deixar isso aí e eu vou te mostrar quando o desligarmos, ele não faz nada. Então, vou pegar uma etiqueta div. Vou clicar aqui. Vou pegar o Comando D e tentar digitar div ao redor do meu microfone e digo, ok, vou jogar tudo dentro. Sorte entrar lá. E então entraremos. E lá vamos nós. Agora eu só fiz isso por este. Vou ter que repetir isso para todos esses outros. E eu teria feito isso desde o início, mas não queria confundir muito. Então, vamos nos confundir agora porque isso vai ser estranho. Porque, bem, vou tentar que vocês sejam pesados juntos. Então, este aqui, eu vou dar um nome. Eu vou chamar esse de meu bacalhau inferior de Rapa lá quando eu estiver bem. E eu gostaria de dar um pouco de preenchimento, segure, Shift, um efeito sonoro de drone. Ok, e lá vamos nós. Então isso parou de funcionar. Ok, ainda tem essas aulas aplicadas. Ainda ficou automático lá em cima. Ok, mas não está fazendo seu trabalho. Bem, meio que é. Na verdade, vamos repetir isso em todos eles para que possamos, isso mostrará a estranheza com mais facilidade. Então, vou copiar e colar esse div em todos eles. Vou fazer com que Jason vá até lá e me acelere. Ok. Então, quando diminuir a embalagem do cartão, vou movê-la e mudar o título. Então, vamos acelerar. Ok, então primeiro passo, não está grudando no fundo. Ok. Como fizemos isso? É isso mesmo. Pegamos a embalagem externa, que está ficando um pouco, e vamos arrumá-la. Vamos olhar, ficar mais bonita. Então, minhas miniaturas cortadas em grade dentro desses cartões, as miniaturas funcionam apenas no porta-malas mais baixo. Ok. E este aqui, meu bacalhau mais rápido já precisa ser filho de filmes. Ok. Isso foi apenas a partir da coisa original que fizemos. Vamos nos livrar disso porque não precisamos dele porque claramente não funciona. Então, a embalagem externa, vamos voltar ao bloco. Vamos até aquele pequeno invólucro em volta da parte inferior, ok? E diga que agora você é o pai. E você precisa estar na vertical. E lembra, é meio legal, como eu imaginei que voltaria para a esquerda. Mas lembra que tem o melhor carro. E lembra que está alinhado à direita. Mas no deserto , lembre-se de que se chama telefoto. Diz que sim. Mas esse não parece concordar. Esse também não. Parece que sim, mas é apenas a maior caixa. É isso que o torna ainda maior. Então pegou a miniatura do bacalhau, a coisa toda. Vamos pegar meu tamanho. Eu posso ir. Tínhamos altura mínima. Vamos até 600. Você notará que ele nem trabalha. Então, o que está acontecendo é esse invólucro aqui. Nós dissemos esse pequeno invólucro. Ok. Há uma parte inferior de Cadoret nas costas. Você pode ver se você olha para as dimensões, está fazendo isso perfeitamente. Olha essa aqui. Ok, ele é ordenado ao fundo, mas não está ficando maior. Consegue ver isso? Está na parte inferior desta, mas não é, não tem ideia que essas coisas externas estão fazendo. Como podemos fazer com que ele o reconheça? Nós não temos. Essa coisa aqui não vai fazer a altura mínima porque só dá para ver seu pai, Rapa. Então não adianta fazer isso com o vovô ou com o mais alto. Então, meu mínimo de 600 pixels, vou limpar pressionando Alt ou option. E vai ser esse, o rapper que vai me dar minha altura mínima. Vou fazer isso com os pais deles. Então, vamos digitar 500 pixels. Isso é demais para isso, mas funciona. Ok. Vou segurar Shift e usar minha seta para baixo para obtê-lo então eu posso, sim, esse vai ser o meu tamanho. Agora, tudo isso pode ser um pouco confuso. Acho que o que eu não quero fazer é apenas fazer exercícios, mas tudo vai bem porque isso também foi um pouco irritante para mim. Eu estava tipo, por que o joelho na parte inferior. E foi só quando eu meio que movi meu mouse e vi a pequena linha azul, ao contrário de você dizer, ele não está fazendo o que eu disse. Ok. Ele está no fundo da caixa. Eu os coloquei em seus pais, mas ele não tem ideia do que está acontecendo mais acima na cadeia. Você só pode reconhecer o que está em seu tipo de pai um passo à frente, o que é tão baixo quanto um gato agora. Então, mudamos a altura mínima do invólucro externo para o interno. Nós resolvemos o problema. Agora, vou realmente deixar o estilo. Faremos isso juntos em um vídeo futuro porque acho que é o suficiente, já fiz muito. Então eu penso que agora , depois de construí-lo, eu posso pegar meu bacalhau, miniatura, copiar e colar por espaço, espaço, espaço, espaço, espaço, espaço. E podemos ter muitos desses caras e simplesmente trocar as imagens. Tudo bem, a grande coisa a lembrar é que esse filho do Flexbox dos meus pais precisa que a margem na parte superior seja automática e descobrimos que a caixa, o pai em que ele está precisa ter altura suficiente então você pode empurrar para baixo. Tudo bem, avance para o próximo vídeo. Há amargo. Fique mais fácil. Fica um pouco mais fácil. Agora fica um pouco mais difícil, depois fica muito fácil. Depois de entender a estrutura, as coisas podem causar um pouco de impacto. Então, todas as coisas realmente fáceis e divertidas acontecem. Eu prometo. Tudo bem, obrigado. Vídeo. 52. Posição absoluta e relativa explicada no Webflow: Olá a todos. Olha o que temos. Temos um botão no canto superior acima da nossa imagem. É exagerado. Essas coisas sobrepostas. É métrico ou é um posicionamento absoluto. Olha, mova-o. É fácil, fácil, peixe. Deixe-me entrar e te mostrar como fazer isso. Primeiro, vou adicionar um botão, tão dolorido, arraste-o para dentro. Vou colocá-lo entre esses títulos só porque quero expressar um pouco do posicionamento do que ele faz, e será útil para isso. Então, vou dar uma vantagem. Eu vou fazer esse alongamento demais. Isso ocorre apenas porque ele é filho de um Flexbox. Se você não configurou um Flexbox, não precisa fazer isso, mas eu o configurei para a esquerda e agora preciso movê-lo para cima. Na verdade, o que eu vou fazer é fazer duas versões disso. Um usando absoluto, N1, usando relativo. Então, vou dar nomes a ele. Esse vai ser meu botão. Ok, eles já existem, vai ser meu botão mais dois deles. Mas botão mais um. E eu vou copiá-lo e colá-lo aqui. Obtê-lo. Peguei a coisa toda, copiei e colei. Só você copia. Você cola na mesma posição. Agora, vou dar a isso uma aula diferente. Você provavelmente já fez isso. Se você for, vou renomeá-lo como número dois. OK. Você não o renomeou. Você renomeou todas as classes para o número dois. Veja, este primeiro agora é o número dois. Então, o que você precisa fazer é desfazer isso e dizer, na verdade, vamos duplicar a classe. Ou você pode excluir a turma e editá-la novamente para você. Tudo bem, então temos dois separados. Esse se chama um. Então, vamos até esse botão específico. Você pode usar qualquer elemento, texto, uma tag div. Você pode posicionar qualquer coisa. Vamos dar uma olhada na posição. Isso vai acabar com tudo isso. Abra a posição. O padrão é estático. Ok? Vamos ver um parente. Ok, e então vamos clicar em segurar e arrastar alguns deles. Assista. Olha, está se movendo. Agora ei, subindo e eu estou clicando e arrastando para a direita. Um pouco arrastado, continuando. Aqui vamos nós. Nós o colocamos no canto, subimos como menos 250 e atravessamos 256, 265, vamos lá, cérebro. Excelente. Mas deixou um grande buraco lá. Então é isso que um parente faz se você precisar deixar tudo inteiro, eles são ótimos. Eu nunca faço. O que eu quero fazer é dizer que você vai ser absoluto. O primo de um parente. Mas veja o que acontece aqui quando eu transformo isso em absoluto. Olha, meio que feche a lacuna. E é isso que eu quero. Eu quero subir um pouco agora, entrar um pouco aqui. Aqui vamos nós. E você diz: Ótimo. Mas vamos usar o absoluto para tudo. E funcionará como se estivesse funcionando totalmente agora, você se depara com um pequeno problema. Então, deixe-me explicar o que pode acontecer. É que no momento, vamos dar uma olhada nesse primeiro botão, esse aqui. É relativo a si mesmo. Ele sabe onde costumava estar no mundo. Portanto, ele pode ir até 50 e passar para 65. Mas esse, esse porque as lacunas o fecharam basicamente na matriz. Não sabe onde costumava estar. Então, o que ele faz é dizer que eu sou relativo ao . Neste caso, o corpo, o que ele é, é na verdade relativo ao próximo pai. Ok, então, no momento, o próximo pai desse cara é minha embalagem de cartão inferior. O pai desta é a miniatura cortada. Há um pai disso também, deseja minha grade. Há muita aparência acontecendo. O que ele faz é que este botão diz: “Vou procurar o próximo pai que se senta com um parente. OK. Nós já fizemos isso ao lado. Mas no momento em que não tenho nada nenhum desses pais está definido como parente, então tudo volta ao corpo. E funciona bem. Ok? O problema, porém, é que você consegue ver esses números gigantes? Ok? É como 700.800. OK. É porque é relativo ao corpo. O corpo começa aqui, então é uma cruz 800.844 e abaixo de 724. OK. E tudo bem. Desde que você não mude a posição. Digamos que eu torne isso muito menor. Vamos dimensionar minha altura mínima. Vou segurar Shift, apertar minha seta para baixo. Eu tenho meu botão aqui embaixo. OK. Bem, não. Ele está se movendo. Esse cara era relativo a si mesmo porque essa posição mudou. Ele se mudou. Esse cara. Ele está em relação ao canto superior esquerdo do corpo e ainda está fazendo exatamente o que dissemos a eles. OK. Ele ainda está 800.700 abaixo. Não importa o que está acontecendo ao redor deles. OK. Caixa boba. OK. Então, o que podemos fazer é mudar o que era. E tinha muitos desfazer, desfazer, desfazer, desfazer, desfazer. Aqui vamos nós. Tudo bem, então tudo o que precisamos fazer é sentar um de seus pais em relação a algo que vai se mover junto com eles, que é essa coisa ou a miniatura do cartão vai se mover totalmente. Mas vamos usar esse invólucro inferior de bacalhau. Vamos sentá-lo como parente e isso vai quebrar. Está tudo bem. Seu botão sumiu. Ok, então isso é irrelevante em relação. Meu botão só pode clicar neles aqui. Ele ainda está lá. Ele está aqui embaixo. Ele ainda está definido para 700 por 800. Ok, então ele ainda se lembra disso. Mas agora ele está em relação a essa coisa que mordeu lá. Então ele está atravessando e descendo, como você fez no corpo para entender. Às vezes, você pode estar fora da tela. Ele pode dizer totalmente: “Onde ele está? Ele pode ser totalmente como se estivesse lá. Você nunca mais o verá. O truque é apenas limpá-los para que você limpe. Lembre-se de segurar Option ou Alt, clique, clique. Ele volta para onde você começou. E agora podemos arrastá-los para o outro lado. E ele é parente desse pai, que no nosso caso é muito próximo se moverá para cima e para baixo. Vá para isso que é tangente a 100. E olha, surgiu porque ele é relativo a isso, não ao corpo. Então, o truque com o absoluto é que ele funcionará por um tempo até que você mude alguma coisa e depois não. Então, se isso acontecer, você simplesmente esqueceu de dizer que é parente de algo, algum tipo de pai, outros, você pode ter que envolvê-lo em uma tag div que não faz mais nada. Então seja relativo, ok, então pegue os pais, torne-os parentes, não faça mais nada. Então, agora ele é relativo ao meu pacote de catálogo. Isso faz sentido. Uma última coisa que pode te surpreender, não é no momento, é às vezes apertar o botão aqui quando você se posiciona em posição absoluta e os move. Ele desaparece. Vai, simplesmente desaparece. Tudo finge no momento. Ele faz isso. ele quiser, eu posso clicar neles aqui no meu navegador ou ele pega o botão. Mas eu não consigo vê-lo. Onde ele está? Ele está em branco? Porque, na verdade, logo atrás dessa imagem está algo chamado índice z. Então, aí está meu botão por padrão. Ok, se eu esclarecer isso, ele está bem. Mas às vezes você pode estar usando o projeto ou modelo de outra pessoa e adorar errar com o índice z que eles disseram que a imagem aqui será uma posição relativa e eu serei o índice z de um. Por que eu o tornei relativo e absoluto? Porque eu quero que eles mantenham esse espaço , porque se eu for absoluto, meio que fica um pouco complicado e limpa o espaço e pula em relação a voltar ao seu lugar, segure seu lugar. E tudo. Eles disseram que o índice Z é um. Então eu posso ir até o meu botão, dizer botão. Agora vocês teriam dois anos, eu ganho. E então a imagem poderia sumir, você espera esses três, ok? E você pode lutar contra isso. Às vezes, se você comprar um de outra pessoa, algum designer inteligente pode ir ou desenvolver : “Oh meu Deus, eu vou transformar esse 2999999”. E então você gira o tempo todo batendo, onde está? Onde meu botão está apertando? E você vai para três. Você poderia ficar lá para sempre. Ok, então você tem que ser mais inteligente e colocar 99999999. Isso fica complicado. Tentando pular para o alto, fique na adolescência. Porque a próxima pessoa pobre pode estar tentando digitar muitos noves. Isso não faz todas essas coisas, mas você entendeu, desde que o número Z seja maior. Ok, este aqui, eu só vou sair , desde que seja mais alto, está tudo bem. Isso vale para qualquer coisa. Se você encontrar alguma outra parte do seu projeto com algo por baixo, algo assim é o índice. É a altura, só precisa ser pelo menos uma maior que a pessoa. Está escorregando por baixo. Tudo bem, como foi isso? Há uma complicada. Posicionamento. absoluto estava no meu esboço e então eu pensei que estava muito quente. Vamos sair de seus anjos, depois entrar e sair. É como se, agora que estamos fazendo parte desse curso, eu sentisse que estamos conseguindo lidar com isso. E você provavelmente chega ao final deste curso e vai embora. Ele nos ensinou cada um deles , exceto a posição. Por que ele não fez isso? Porque é complicado e foi feito para ser essencial. É o curso essencial mais longo que já fiz. Mas, ei, o web design é interessante e há muito o que entender. Então você vai para a posição absoluta, não tão forte ou seu cérebro derrete. Uma dessas duas coisas aconteceu. Tudo bem, é isso. Nos vemos no próximo vídeo. 53. Posição de fluxo de webflow para rodapé navbar pegajoso não funcionar: Olá, você apoia este vídeo que vamos ver, veja este nav. Sim, é um nervo para uma navegação muito minimalista. Mas a vantagem disso é que ela gruda na parte superior e as coisas rolam por baixo e você pode ver que elas fazem o mesmo aqui para esta filmagem na parte inferior, está presa na parte inferior. É relativamente fácil de fazer. Você usa a opção Sticky na posição se estiver aqui porque você fez isso e simplesmente não funciona. Você precisa fazer é colocar o número mais alto em zero. E você será uma maneira. Mas para pessoas que nunca fizeram isso antes, vamos mergulhar. Tudo bem, estamos cobrindo isso agora. O menu I'll não parece muito bom, mas temos uma barra de navegação na parte superior de um botão ideal. Então imagine uma navegação bonita que você queira manter no topo. Eu faço isso nesta parte do curso, mesmo que o nome não esteja completamente concluído, porque quando a seção de layout do curso, então eu quero manter tudo junto. Tão pegajoso é estranho, é fácil e complicado. Tudo bem? Então eu tenho o que eu quero para manter no topo, eu vou para a posição. Há essa opção aqui, diz pegajosa e então você pré-visualiza e não funciona. A única coisa que você precisa fazer é dizer que o adesivo precisa, ele precisa de uma altura. Nesse caso, eu queria ficar escrevendo no topo, então vou apertar zero, apertar Enter. Agora, Command Shift P, Control Shift P em um PC. Olha isso. Está preso lá. Vai nos pegar. Coisa que podemos fazer. Se você vai fazer um NAB adesivo, não precisa fazer uma nota adesiva de que a navegação tem uma cor de fundo branca. Eu poderia diminuir um pouco a opacidade para que possamos dar um pico abaixo dela. Então, vamos dar uma olhada agora , ele funciona até mesmo no modo de exibição. E você pode ver aqui, o designer, que você não precisa pré-visualizar. Você pode decidir como fazer isso. Ok? Se eu gosto, provavelmente precisa ser mais escuro. Eu quero apenas dar uma dica do que está por baixo disso. Ok, não quero realmente cobrir toda a E/S do z-index. Vou fingir que fiz isso de propósito. Por que isso está acima disso? Por que todo o resto está abaixo dela? Você se lembra do índice z? Então, vou dizer que essa navegação será definida como um índice z de eu vou usar 1.000. Ok? Isso me dá, nesta página, outro também. Isso me dá dez ou nove são as opções. Você pode colocar um z's negativo. Conhecer as opções. Para empilhamento. Você pode fazer sua navegação como regra em sua própria cabeça, 100, então você tem 100 bits de empilhamento. Mas você sabe que 100 é para onde sua nav vai. Agora está acima. Entende? Tudo bem, o mesmo é verdade. Se você quiser rodapé, rodapé, provavelmente não quer ficar pegajoso. Talvez seja como uma chamada à ação, como espécie de notificação. Então, eles podem ser algo que você queira fazer. Vamos adicionar uma seção na parte inferior. Não posso entrar lá. Entrem lá. Como você consegue o lugar certo? Vou chamar isso de rodapé de uma seção. E você pode fazer a mesma coisa. Vou adicionar uma cor de fundo só para deixar isso óbvio. E eu vou fazer a mesma coisa. Vamos deixar que fique muito pegajoso para não colocar na parte superior ou inferior para zerar. Ok, e isso deve funcionar. E vai funcionar aqui. Veja que está meio preso lá. Depende de você, se você acha isso útil ou não. As pessoas não fazem isso com muita frequência, mas gostam de me perguntar como fazer isso. E então aí está. Mas a única coisa sobre isso, esta seção aqui, e o que eu vou dizer, Quem se lembra? Não tem altura. Isso realmente precisa de um tamanho mínimo. Tem uma altura mínima. Vamos fazer 50 pixels. Pode ser apenas um pequeno texto para explicar que há uma venda ou outra coisa. Clique aqui. Tudo bem, é isso mesmo, navegação fixa, rodapés fixos. Lembre-se de definir o K superior como zero ou algum tipo de número para a navegação e, em seguida, algo na parte inferior do nosso rodapé. E você pode ter que mexer com índice z se as coisas estiverem indo por baixo ou pode verificar o meu porque meu eu não consigo rolar cima o suficiente para fazer com que isso vá por baixo. Vamos dar uma olhada. Talvez este não consiga fazer isso. Eles também são. Tudo bem, isso é o suficiente. Nos vemos no próximo vídeo. 54. Projeto de curso 05 - Portfólio Homepage: É hora do projeto de aula e provavelmente, o projeto de aula mais importante que fizemos até agora, provavelmente faremos em todo o curso. O que eu quero que você faça é usar todas as habilidades que aprendemos até agora neste curso. Eu os tenho todos listados aqui como apenas uma referência das coisas que você deve fazer e aplicá-las para chegar de onde estamos agora. Ou, se você ainda não começou do zero, crie uma nova página. E eu quero chegar a esse estágio que você tem uma página inicial que tem todo o seu portfólio e pontos de interrupção diferentes. Então, vou fazer com que você também faça um design responsivo. Agora, use todas as suas, seu nome, suas próprias cores, sua própria fonte, todas as suas imagens. Se você quiser seguir minha estrutura. Eu adicionei uma pasta que é calculadora em dois arquivos de exercícios no portfólio, há uma chamada design finalizado. Eu coloquei apenas capturas de da estrutura para que você saiba o que precisa ser feito nela. Ok. incluí todos os diferentes pontos de interrupção. Eu tenho o Figma no arquivo XD se você quiser abri-los e dar uma olhada em você, ou apenas ver suas capturas de tela. Então parece longo e meio que é, eu acho que se você ainda não fez nada. Mas meu conselho é que eu vou fazer um vídeo de solução seguir e fazer tudo sozinho que você possa ver como eu chego ao meu ponto de vista. Mas meu conselho é fazer isso primeiro sozinho, resolver esses problemas, tentar descobrir a quantidade que esse tipo de aprendizado é provavelmente o melhor aprendizado que você fará em toda essa coisa que eu mostro o que fazer é bom, mas não faz com que essas coisas se aprofundem e saiba que serão problemas. Só que suas novas serão algumas partes complicadas. A parte mais complicada é uma fraude ou como minha trapaça nessa navegação. Então, nesta navegação no topo aqui. Ok, eu quero ser empurrado para este lado, isso para empurrar este lado. E já fizemos coisas semelhantes a isso antes. Fizemos o pai flexionar. Agora nós o empurramos até as bordas. O único problema com essa estrutura, se você está me seguindo agora, é que temos um contêiner. Você pode aplicar flex neste recipiente e fazê-lo empurrar para fora. Mas esse contêiner, aquele que o fluxo de trabalho nos fornece, na verdade tem algum estilo aplicado a ele e pode causar problemas , e isso acontece nesse caso. Portanto, mesmo que você tenha um contêiner, é melhor colocá-lo dentro desse contêiner. Coloque uma, apenas uma, apenas uma simples div antiga como esta aqui. E comece com isso. Use isso como seu invólucro ou não, o recipiente porque ele já tem um estilo aplicado. Então, basta colocar outro invólucro dentro dele. E esses, meu logotipo de texto e meu botão interno. É a única coisa que pode te surpreender. Portanto, há um pequeno truque, mas todo o resto deveria ser, você deve ter as habilidades ou pelo menos que abordamos no as que abordamos no curso para ver se consegue resolver isso. Vá em frente e faça isso. Eu listei os diferentes tópicos e os elementos que devem estar na navegação. Deve haver um logotipo e um botão. A caixa do herói deve ter um herói apertando um botão e uma imagem. Se você quiser saber o que acontece em qual área. O desafio, um pequeno desafio secreto que tenho para você, é que a imagem está em um círculo. Como você faz isso? Eu quero que você veja se você consegue descobrir isso sozinho. Há duas partes nisso. Há os cantos arredondados, mas você também descobrirá que eu usei imagens quadradas. Você pode trapacear e fazer com que suas imagens fiquem em dois. Mas se você tiver sua própria imagem e for retangular, encontrará um problema. E é um exame de teste de livro aberto, projeto de pesquisa. Vou te dar uma dica quando você estiver procurando soluções on-line para isso. Se algo chamado objeto couber, você provavelmente fará com que a vovó diga a ele que eu disse olá. Se você não conseguir fazer isso acontecer, não se preocupe, abordaremos isso mais tarde no curso quando fizermos imagens de nível dois. Ok, só queria ver se você consegue descobrir uma coisa, descobrir isso em seus próprios pequenos desafios. Faça uma captura de tela dos quatro pontos de interrupção diferentes, desktop, tablet e os dois celulares, e depois compartilhe-a, compartilhe-a na parte de tarefas e também nas mídias sociais. Eu adoraria ver o que você recebe nos comentários. Deixe-me saber o tipo de coisa em que você ficou preso e simplesmente não conseguiu encontrar uma solução. Porque seria interessante ver o que outras pessoas têm a dizer. Eu também tive esse problema, mas resolvi dessa maneira. Ou talvez 1.000 pessoas não tivessem ideia de como consertá-lo neste momento no Webflow. E eu vou ficar interessado em ver, talvez eu precise voltar e adicionar algo na classe. Mas se você tem algo que foi difícil e talvez não tenha consertado, coloque-o lá também. É interessante saber onde estão todos os problemas dos novatos. Tudo bem, é isso. Vá fazer um portfólio. E, como eu disse, há um vídeo de solução a seguir, mas não assista a ele até que você tenha feito o seu. Você pode deixar alguns pedaços porque não pode consertá-los. Nós os faremos juntos no próximo vídeo. Mas sim, vá se divertir, resolva os problemas. Nos vemos no próximo vídeo. Quanto tempo isso demorou? Provavelmente algumas horas. Vai ser longo. E pode até levar alguns dias, dependendo da sua capacidade. Ok. Então, só para você saber, não é um trabalho rápido e você não está fazendo errado se precisar de algumas vogais, certo? Tchau. 55. Projeto de curso 05 - Página inicial para portfólio - Solução Parte 1: Então, como foi? Como você fez sua versão? Eu vou te mostrar agora como eu fiz o meu. Vamos de, eu vou desta para esta versão mais completa. Ok, ele vai funcionar em diferentes dispositivos. E eu vou resolver alguns dos problemas que eu tenho, como eu os resolvo. E seria interessante, definitivamente faça o seu primeiro para que você possa vir aqui e dizer como, oh, como se ele tivesse feito isso de forma diferente de mim, mas eu chego ao mesmo ponto ou fiquei preso lá e simplesmente pulei . Eu queria que Haldane fizesse isso. Ok. Então é para isso que serve este vídeo, mostrando minha solução para o projeto da turma. Vamos entrar. Certo? Vamos começar. Bem, na verdade, eu realmente comecei, na verdade eu já fiz 25 minutos desse vídeo. E adivinha? Estou conectando meu microfone. E é por isso que ele está desde a hostilidade, porque eu tenho que fazer isso de novo, conecte o microfone e da próxima vez que você me disser que eu posso te ouvir. Tudo bem, então vamos fazer isso de novo. Vamos começar pelo topo, ok, então, desta parte superior aqui para a navegação, ok? E vamos colocar esse tipo de navegação feia no topo aqui. O que temos? E então eu tenho um botão. Vamos adicionar um pedaço de texto para o nome, ok, se você tem um logotipo, coloque-o e você pode criar um logotipo em um programa diferente. Ilustrador. Eu tenho um curso para isso. Mas sim, eu tenho o que é preciso para eles. A, eu vou para o Bloco de Texto. O bloco de texto está indo aqui, não é um texto de parágrafo porque não é um texto de parágrafo e não é um título. Então, o Facebook é uma coisa genérica. Não, arraste-o acima do meu botão. Vou digitar meu nome. Daniel Scott. Folio, ponto final. Eu preciso de qualquer um dos layouts, certo? Então eu vou fazer isso. Agora. Você pode ter se deparado com esse problema primeiro, o primeiro, e já jogou seu laptop pela janela. E é que você pode fazer esse contêiner. Esse é um desses contêineres. Demos uma aula, mas é um contêiner. Você pode fazer esse Flexbox, mas isso só causa problemas. Portanto, é melhor ter um invólucro ao redor dele. Por que você pergunta a este contêiner, essas coisas aqui, na verdade, apenas tags div que o fluxo de trabalho de adicionar um monte de estilo a esse estilo pode às vezes, porque você não o criou e não Não sei o que está acontecendo. Pode fazer coisas como filmes. Vou colocar um diblock de bicicleta. Coloque meu botão nele, coloque meus carrapatos nele, faça o pedido da maneira certa. E então isso bloqueou, que eu vou chamar de div, nav. Eu vou fazer filmes para ele. E eu vou dizer, vá até as bordas. Lá vamos nós. O mais alto que está no meio. Já nos deparamos com esse problema algumas vezes, é que a div não sabe a altura dela. Porcos, não lhe demos altura. altura vem dessa nav, o que fazia sentido anteriormente. Ok, então não é a sombra da caixa. Na verdade, vou manter a sombra da caixa. De qualquer forma. Vem desta seção de navegação, como eu sei? Eu meio que posso ver isso aqui sob o tamanho, altura mínima está definida para 68. Se eu mantiver pressionada minha tecla de comando e clicar nela, ela diz que está vindo, então não é daqui, não da caixa de onde está vindo da seção agora. Então, eu preciso ir para a Seção F e dizer Você não é zero porque isso é diferente de limpá-la. Limpá-lo é diferente de zero. Nesse caso, provavelmente teria funcionado bem, mas adquira o hábito de limpá-los, mas clique em Option ou Alt. E vou adicioná-lo a esse div nav agora. E há um U, com uma altura mínima de 68. E meio que funciona. Vamos ao layout. E, por padrão, ele se estende. Eu quero estar centrado. E as bordas. Aqui vamos nós. Bom. Tudo bem, a próxima coisa que eu quero fazer é estilizar isso. Ok, eu vou chamar essa mensagem de texto. E isso vai ser chamado de logotipo. E eu vou fazer isso com o logotipo, vou verificar. Serão areias públicas. Diz que são 400, mas é uma espécie de mistura lá dentro. Eu sei que é o material pesado e tem 20 pixels. Então, vamos fazer isso. Então você, meu amigo, vai ter 20 anos. Você vai ser ousado. E eu acho que há um pouco de negativo que é temperar. Só vou olhar para ela. Parece bom. Tudo bem, essa parte aqui, eu quero, quem se lembra de como eu mudo isso? Porque se eu adicionar uma classe combinada aqui, ok, então essa vai ser minha, eu quero que seja a cor da secundária. Não faz tudo isso. Quem entrou? Isso foi há um tempo atrás. Ok. Se você se lembrou, você ganha um ponto de bônus. Você o seleciona e o encaixa nesta tag span. Em vez de fazer um pouco, só um pouquinho. Ok. E eu vou dizer, na verdade, que tenho sorte de ter me lembrado. Eu tornei as cores dos carrapatos secundárias para aqui embaixo. Lembra que eu tornei uma classe global que estamos usando classes, dados felizes, ok? E o que eu não quero fazer é fazer. Esse carrapato, as cores secundárias, quanto menor o peso, porque também funcionará com isso. Não é isso que eu quero. Ok, então eu quero criar uma classe combinada. Eu faço disso uma aula global? Vou usá-lo novamente em outro lugar? Provavelmente não. Talvez. O que eu estou falando é de movê-lo para o mundo. Eu posso usá-lo várias vezes. Se eu fizer disso uma classe combinada, texto ou irregular, provavelmente a usarei em outro lugar. Então eu vou embora. Terminamos? Isso é um texto curto? Então, vou torná-lo global. Então, o que eu vou fazer é pegar uma etiqueta div. Você pode aplicar isso a uma tag div. Vou apenas editar em um bloco de texto, apenas um aleatório. Ok, você vai ter txt rigueur. E é como se você fosse forçado a ser regular, a lidar com ele, a se livrar dele. Agora, posso adicionar algumas classes. Vou adicionar texto normal a seguir e também adicionarei texto secundário. É legal. Eu não sei Eu me sinto muito bem-sucedido como web designer quando começo a ter aulas e reutilizo, olha para mim reutilizando aulas. Então, vamos dar uma olhada nisso. Sim. Então, o botão um vai ser interessante porque o que esse botão, esse botão é reutilizado. Eu não vou simplesmente criar um botão para todo mundo. Vou tentar construí-las usando classes combinadas. Ok? Porque eu tenho um grande, eu tenho um pequeno e depois há aqui embaixo encontrando um. Este é, na verdade, um pouco menor do que este maior. Então, o que eu preciso fazer é criar um tipo de classe de nível básico, como a mais baixa, que faz a maior parte do trabalho como cantos arredondados. E talvez também faça a cor. Isso coloca todas as marcas em maiúsculas porque você pode ver que estão todas em maiúsculas e todas essas, ok? E comprei, preciso fazer isso com o mais genérico. Este só é usado, o grande, e é usado uma vez em uma página. Este pequeno é usado no topo aqui. Não há nenhum outro lugar no meu design. Este é usado várias vezes, e é mais provável que eu o use repetidamente. Então, na verdade, vou estilizar esse. E eu não vou estilizá-lo aqui porque está fazendo algumas coisas estranhas no código aqui. Então, se eu me livrar disso, telhado fica meio elástico. Não quero adicionar posicionamento infantil, desculpe, movimentos infantis e fazer isso porque faria parte do estilo. E não é realmente o que eu quero , porque é uma coisa única. Então, eu vou estilizar esse. Ok? Este tem algumas coisas aplicadas a ele. Eu nem gosto dessa sombra de caixa, então vou me livrar dela. Então o botão faz algumas coisas. O que isso faz? Lembre-se de clicar em Option ou Alt. Só faz plano de fundo. Esse é seu único trabalho. Então, vou continuar usando esse. Ok, então ele faz isso. O que mais queria fazer? Eu quero que seja em maiúsculas. Ok? Quero que seja ousado para meus botões, porque é isso que está aqui. Ok, eu quero um pouco mais de acolchoamento na parte superior e inferior. Agora se trata de preencher a parte superior e inferior. O que você realmente quer fazer é copiar isso perfeitamente, ok, porque exercite o preenchimento e calcule-o adoravelmente. O problema é que muitas dessas coisas vêm com coisas pré-existentes, como margens. se eu olhar para Hera One olhando para ela, Onde está meu herói escondido? Já tem algumas coisas nela. Tem uma margem de 20 na parte superior e dez na parte inferior que vem dessa batida. Quem fez disso uma pessoa quando decidiu que os H1s na Internet terão esse tipo de preenchimento padrão. Ok, então, quando você está tentando medir as coisas, você precisa levar em consideração alguns dos tamanhos padrão. Então, há um pouco de tempo. Na verdade, estamos indo como esse tipo de aparência, que parece perto o suficiente. Ok, então eu vou chegar perto o suficiente. Então, eu quero que algum botão tenha algum preenchimento. Vamos ver, estou vendo este. Parece um pouco mais. Na verdade, o texto do botão é provavelmente o que eu preciso fazer a seguir. Então isso é 14. Acho que isso é provavelmente 16. Meus botões terão um padrão, todos os 14, então comece a fazer o preenchimento. E eu acho que pode estar perto. Se eu estivesse fazendo isso, eu teria isso em outra tela para poder ver. Mas você não pode ver isso na tela. Então, temos que fazer essa dança estranha. Você pode pressionar o Comando 1.2, ok, Para quais guias existem, ok, controlaremos 1.2 em um PC. Então está tudo bem, acho que os acolchoamentos ou logo na parte superior e inferior, devido às bordas aqui e aos cantos arredondados. Eu vou fazer os cantos arredondados com este interessante. Esta é a única tarefa que eu fiz para você mais cedo. A forma de arredondá-los funcionará tanto para botões quanto para imagens. Então encontre a fronteira. Ok, e aumente o arredondamento. Você pode me ver, eu posso subir a minha até o fim. Perfeito. Mas digamos que eu faça essa altura desse botão. Então eu fiz 20 pixels. Isso é tudo para o qual você pode arrastá-lo no Webflow. Mas digamos que eu aumente sua altura. Então eu digo que o tamanho é uma altura mínima de 100 pixels. Você pode ver que 20 não é suficiente? Eu queria ser perfeitamente arredondado, se esse é o objetivo aqui, pessoal, o que você pode fazer é dizer na verdade, esse raio de fronteira é 200. Você pode ir muito além de onde precisa estar. Você pode fazer isso de 2000, 20.000 XD e ele só será muito útil. Ok, então não fique perfeito e fique como se tudo fosse perfeito. Porque se ficar maior, você vai acabar com pequenos pedaços cortados, como um exagerado. Talvez não seja tão exagerado, mas você pode ver aqui que eu posso chegar perto, chegar perto, mais perto. Ok, apenas faça isso em vez de 61, faça 100. Então, sempre será perfeitamente redondo. E isso também funcionará para essa imagem , mas faremos isso juntos. E eu quero o raio, configurando-o para 100. Vou me livrar dessa altura mínima, certo? Sua opção de altura mínima, eu clico em ir. Está parecendo muito bom. Estou gostando. Eu acho que você precisa de mais acolchoamento por fora. Então, vamos fazer isso. Arraste-o para o lado errado primeiro, voltei para o outro lado, um tempo razoável então, tudo bem, então eu tenho meu botão genérico. Então aqui embaixo podemos dizer que você é, eu vou me livrar do cartão de botão, sua turma. Você vai começar como botão, botão genérico. E então adicionamos essa classe chamada cartão de botão. Ok, isso fez toda a inundação para a direita. E neste caso em particular ou naquele caso, lembre-se de ir até o filme infantil e dizer alinhar no lugar certo. Muito obrigado. Tudo bem, então temos um botão. Vamos fazer um pequeno e um grande. Então comece com o grande. Então, agora vamos ter uma classe de combinação. Não adianta ser uma classe global porque ela só vai aplicar dois botões. Vou puxar o botão L-O-G. Você pode escrevê-lo em tamanho grande, se quiser. Ok, e este precisa de mais preenchimento. ambos os lados, mantenha pressionada a tecla Option ou a tecla Alt enquanto arrasta um pouco mais. E o texto que eu sei é porque eu já fiz isso. 16 estão se lembrando de um pouco disso. Mas não é sua culpa. Mas estou culpando você. Então esse é o meu maior botão. Ok? Sim. Ok. Vamos dar uma olhada aqui. Precisa ser um botão pequeno e se livrar da sombra da caixa. Eu vou entrar. E eu vou dizer o festival. O texto é, eu acho que foi, eu lembro que era topografia, digamos, esta noite. Ok. E o forro vai cair bem abaixo. E isso vai aparecer. Aqui vamos nós. Eu estou feliz. Uma coisa que você descobrirá é que veja os carrapatos aqui, é do tamanho certo, mas simplesmente não parece o mesmo aqui. web design é engraçado, como as fontes, especialmente fornecidas ao computador e ao software para renderização. Eles não são iguais em todos os computadores. Então, basicamente, seu computador é diferente do meu computador. O Chrome é diferente do Firefox. Todos eles renderizam a fonte de maneira um pouco diferente. Portanto, não gaste muito tempo tentando fazer com que seja exatamente perfeito entre aqui e aqui. Porque você pode descobrir que, quando ele carrega no Firefox ou em um navegador diferente, ele terá uma aparência um pouco diferente. A fonte é renderizada pela coisa que tenta mostrá-la ao computador e ao software. Portanto, o texto não tem a mesma aparência no Photoshop e no Illustrator, como no Figma ou no XD ou em navegadores diferentes. Então chegue perto, mas faça alguns testes no final. Não fique como um pixel perfeito agora, esqueça e descubra o que está errado. E chegue perto do fim. Você chega perto de onde está, faz alguns testes e vê onde está tudo bem, talvez Figma diga que precisa ser mais ousado. Mas eu decidi que vou analisar e realmente fazer tudo 700 porque os navegadores parecem em geral, torná-los um pouco menores. Mais parecido com o que você tinha em Figma. Nas ervas daninhas, Dan? Sim. Sim. Volte aos trilhos. Então, temos isso e isso. Eu preciso de um pouco de preenchimento aqui. Então eu vou fazer, vou fazer algumas coisas. Não estou feliz com a altura da linha disso, ou está vindo? Vou manter pressionada minha tecla de controle de macaco em um PC, ela vem de todos os 1s. Todos os 1s têm alguns muito apertados lá. E também vou me livrar ou voltarei. Onde você foi? Eu desapareci. Esse microfone ainda está funcionando. Eu não saberia ser fralda. De qualquer forma. Estava funcionando bem. E eles vão entrar em pânico lá. E então porque foi na época em que descobri que não estava funcionando da última vez. Então, o que eu vou fazer é me livrar desse herói do aquecimento que tem algum lugar? Topografia. Pegue sombras. Tchau. Tire fotos. Eu gosto dele e quero um pouco de preenchimento aqui. Isso é interessante. Como faço para separar isso? Porque essa coisa está em uma grade. Ok. Não está em um, está no Flexbox, não é? É um David Bach. E você pode adicionar alguma margem. Eu adicionaria alguma margem ao botão separadamente do botão Lodge, eu chamaria esse. Eu adicionaria uma classe chamada de classe global chamada margin top. E eu o faria grande ou pequeno, seja qual for o tamanho que você quiser. E isso funcionaria totalmente e você poderia ter feito isso. O que eu fiz? Aqui vamos nós e compramos porque isso tem movimentos aplicados a esse tipo de bloco div rápido que temos aqui, que eu chamei de diblock, o que não é ótimo. E eu vou dizer que você é, o que eles vão fazer? Está tudo bem. E as crianças da grade, sem layout. Então, ele é filho da rede, mas também é o pai desse Flexbox. Flexbox tem coisas legais, como as linhas usarão minha seta para cima. Oh, olha isso. Talvez segure Shift e up para obter o espaçamento que você deseja. Tudo bem. Não, eu não vou fazer isso. Vou diminuir a altura da linha. Apenas vá para dentro. Tudo bem, a próxima parte que vou fazer é essa imagem. Então, a imagem aqui é que você vai se divertir. Vamos trazer as imagens. Eu tenho alguns que você pode usar já arrastados porque eu já fiz isso. Então, acesse seus arquivos de exercícios. Você coloca seu próprio rosto lá para o seu portfólio. Ou talvez uma pessoa genérica da Unsplash ou coloque-a nela, talvez um pouco do seu trabalho nela, talvez você esteja atrasado no último trabalho ou possa usar uma das máscaras. Então você pode usar um desses. Vou arrastar essa. Ok. Ele foi para o lugar errado. Então eu vou fazer com que ele vá atrás desse diblock. Ele passará para o próximo item da grade porque há apenas duas coisas nessa grade, embora haja muitas aqui, elas estão todas embrulhadas nessa tag div que estavam escondidas lá. Esse cara é o segundo, ótimo. E o legal da grade é que você pode fazer coisas com as crianças, ok, então essa grade aqui, em qualquer lugar dentro dela, não é feita aqui dentro. Isso é como o espaçamento geral, o layout e outras coisas. Mas basta selecionar qualquer coisa dentro daqui e dizer grade child, você alinharia no centro para mim? E vamos fazer os cantos arredondados. É exatamente o mesmo que o botão. Apenas lide com isso. Então vamos até aqui e vamos para as fronteiras. Você é, você só pode obter até 20. Mas sabemos que podemos colocá-lo em 200 ou 1.000. Basta verificar se tem bordas achatadas. E se você é meio paranóico, basta descer para 100.100,2, menos 5.202, 50, sem mudança. 250-200. Basta deixar às 02:50 , então eu não sei por que encontrar algo grande o suficiente, mas não muito grande. Mas até 999 seria Mehta. Ok. Tão arredondado. Também precisa ser um pouco menor , porque não é, você sabe, que definitivamente não podemos aumentar a lacuna. Isso é bastante fácil de fazer ou terminar. Você pode pegar imagens, fizemos isso anteriormente no curso. Você pode simplesmente arrastá-los, pegar o tipo que não é esse. Aquele. Ok. A flecha aqui, é tipo: “Ei, vamos, vou diminuí-la”. Mas isso, qualquer coisa conflitante dentro dessa célula de grade. E posso dizer que, na verdade, no topo aqui, a criança da grade também pode ser santificada dessa forma. E lá vamos nós. Parece bom o suficiente. Tudo bem, vamos dar uma olhada. Vou me livrar disso. Não quero que chegue lá mais cedo. E o que mais podemos fazer? O que eu poderia fazer, porém, é meu instinto naquele momento era o rodapé da seção. Eu não preciso disso. Eu nunca vou usar esse rodapé de seção clássica CSS, ou pode ser, mas está fazendo coisas estranhas. Então, como meu cérebro de web design vê Go se livrar dele agora, mantenha-o limpo. Assim, posso colocar meu tipo de gerenciador de estilo no rodapé. E você pode ir você e então, Ok, e eu vou fazer isso mais tarde porque eu vou adicioná-lo e ele vai fazer coisas estranhas e vai me assustar. Eu sei bem disso. Tudo bem, então agora estamos nessa parte. O que precisamos fazer, coisas que precisamos abotoar lá em cima, que meio que já precisam apenas de estilo e de poucos detalhes. Vamos fazer esses pedacinhos. E eu vou fazer, vou me livrar de todos eles, exceto um. Esse é aquele que tem o botão que já funciona em um vídeo anterior quando fizemos o posicionamento absoluto. Ok. Volte para aquela. não o fez, se você teve problemas com esse, porque vou reutilizá-lo no momento. Vou pegar você. E eu quero ficar com os pais, que é um pouco complicado porque há todas essas coisas no caminho. Não consigo acessar a miniatura do bacalhau, posso clicar nela aqui. Portanto, há duas maneiras de clicar nela e dizer, recorte-as agora, exclua ou clique nesta. E eu posso usar minha seta para cima e ela agarra o pai. Lembre-se dessa parte do fluxo de trabalho. Se eu clicar nele e usar as setas esquerda e direita, ele vai para a esquerda. direita mostra os irmãos lá dentro, o que é meio legal. Mas o principal que eu uso, clique aqui dentro, aperte a seta para cima, ele vai pegar o pai, que é meu invólucro inferior. Está pronto novamente. Vai pegar o pai dele, que é minha miniatura de bacalhau. E eu vou deletar, deletar, deletar. Eu adicionei chumbo a esses. Eu vou fazer um, repetir e depois mudar. Caso contrário, eles terão que continuar adicionando aulas e outras coisas. Então, vamos começar com este. Vamos estilizar o momento e ele não tem classe. Então eu vou chamar isso de um texto, e eu vou chamar isso de um tópico. Você notará que eu coloco o nome mais genérico primeiro e depois a parte mais descritiva, em segundo lugar , significa que mais tarde, quando você digita texto, acho isso uma coisa mais fácil de ver. Em vez de logotipo, usa texto normal. Sou só eu. Então, é o texto do tópico, eu vou dizer, o que vamos fazer? Preciso descobrir o tamanho. É 12 porque o 12, eu posso fazer isso. Portanto, o texto do tópico será topografia 12. Ele está obtendo todos os tamanhos de fonte por comando ou controle, clique no corpo ou nas páginas. Eu já fiz isso. E eu acho que isso é tudo que eu preciso para fazê-las. Vamos dar uma olhada aqui. Agora. Essa é interessante porque o espaçamento aqui é bem pequeno. E esse aqui, por padrão, eu não fiz nada com essas coisas. Acabei de colocá-lo na página. Nenhuma classe aplicada em espaçamentos já é muito grande. É bom usar o modo de raio-x. Ok, e vá para o modo de raio-x. De onde está vindo? Passe o mouse sobre isso, você pode ver que há uma grande parte aplicada ao uma grande parte aplicada ao meu H2 e vem da Internet. Ok. Nós discutimos isso aqui? O H também. Eu não pedi que tivesse esse espaçamento. Se eu clicar nisso, ele tem algum padrão de 20,10. Se eu clicar nele, diz que todo o H2 vem com isso no item, mas eles não vêm. Algumas pessoas, quando estão inventando a internet pela primeira vez , ou pelo menos o HTML, decidiram que os aquecimentos terão um pouco, um pouco de margem na parte superior e inferior. E o que estou decidindo agora, provavelmente para meu futuro aborrecimento, é que vou apenas limpar as margens. Ok. Eu vou dizer que, na verdade, acertando dois, vou sair para o modo de raio-x. Ok. Eu vou dizer que você está atingindo dois e, na verdade , serão definidos como zero na parte superior e zero na parte inferior. Ok? E eu quero editar, não você. Crie um HTML histórico que um cara vai usar. Então, vou editar se eu precisar no momento, acho que não preciso. Ok. Outras coisas que eu quero fazer com meu genérico H2, vou torná-lo um tamanho de fonte menor porque o que é essa guerra deles pode ser o tamanho da fonte de 23. Ok, eu provavelmente vou fazer 24. Tipo comum de tamanho de fonte. Ele criou o H2 porque eu cliquei em desligar e depois cliquei em voltar. Então, o que eu vou fazer é desfazer isso. E essa coisa aqui, vou me certificar de que estou fazendo isso com as tags H2, todas elas. Ok, e isso vai ser 24. Bom. Vou me certificar de que está tudo em maiúsculas porque essa é uma espécie de regra decidida nesse design. E qualquer outra coisa que eu queira fazer. Eu preciso de qualquer acolchoamento. Eu não preciso de nenhum acolchoamento. Se eu fosse adicionar preenchimento, provavelmente o adicionaria ao tópico de carrapatos. Eu coloquei uma margem na parte inferior dela. Porque esse, o momento é uma coisa pura. Não há estilos aplicados a ele e é meio perfeito. Não quero começar a adicionar preenchimento agora porque quem sabe se ele será útil mais tarde. Mas essa coisa aí, ele só se acostuma como um tópico de texto, pois esse cartão em particular é o único trabalho na vida. Então ele pode ficar quieto, você pode adicionar todo tipo de coisas estranhas a ele. Esse cara vai mantê-lo bem e arrumado. 56. Projeto de curso 05 - Página inicial para portfólio - Solução Parte 2: Tudo bem, a altura é muito alta. Vamos ver os botões já prontos. Então, o que faremos é descobrir de onde vem a altura . Ok. Então, onde estão as subidas mínimas provenientes desse bacalhau de menor reputação? Acabei de clicar nele, chamado de correto. Excelente. Ok. E eu vou baixar a altura mínima para, não tenho certeza. O que eu gostaria de fazer é realmente ter essas duas linhas. Eu quero que haja espaço suficiente para duas linhas. Ok? Então eu vou estilizá-lo, você sabe, basear minha altura mínima em torno dela na altura da linha, segurando Shift para usar minha seta para baixo, obviamente muito baixa, em algum lugar lá. E como é altura mínima, significa que se eu adicionar mais, você pode ver que isso o empurra para baixo. Ok. Porque é a altura mínima, não a altura máxima. Isso permitirá que ele cresça se necessário. Sobrescreve. Qualquer outra coisa que precisemos fazer, você precisa estilizar esse botão. Vamos fazer esse botão lá. Então, seu botão de chamada mais dois. E lembraremos que, anteriormente , tínhamos dois botões, adicionamos o botão mais dois e o botão mais 11. Eles são apenas exemplos. Este aqui adicionado relativo, aquele adicionado absoluto. Então eu não preciso mais disso. Então, vou ficar arrumado novamente. Vou renomear esse chamado Button Plus, porque eu só tenho um deles. E eu vou usar meus estilos e dizer botão mais um. Não preciso mais de você. Um local como o nosso arrumado IM you, vou estilizar , acho que originalmente seria preto. Eu não gosto mais disso. Então, vou fazer dessa cor secundária , onde o Button Plus, sim, mas o I'm Plus pode usar todos esses estilos. Na verdade. Ele não faz nada. É aquela ciência meio próxima da minha cor e às vezes eu fico confuso. Mas o que vou fazer é verificar se eu já tenho cor, cor fundo ou se temos cores de texto secundárias, isso não funciona porque está dentro dela. Então, cor, gradiente de fundo. Agora o que eu quero, ok. Então, eu não tenho essa, então vou torná-la uma classe global porque provavelmente reutilizaria essa cor de fundo, fundo colorido secundário. Então, vamos fazer isso. Então eu vou pegar minha chave A arrastar em um bloco div. Acabei de entrar lá. Realmente não me importo, porque eu vou fazer essa coisa chamada cor. Estou usando a grafia americana, embora eu seja da Nova Zelândia, eu moro na Irlanda. Usamos o uso em todos os lugares. Mas é surpreendente quantas pessoas escreverão para mim dizendo que escrevi a cor errada. Escrevi muitas coisas de forma errada, mas acabei de entender. Lá vamos nós. Tudo bem, então pinte BG para fundo e este vai ficar em um gradiente. Vamos fazer o secundário. E eu vou dizer que o plano de fundo, vou totalizar todos os fundos fechados. Você tem minhas amostras doces. E é isso que aquele cara vai fazer. O que vou fazer agora é duplicá-lo porque enquanto estiver aqui, vou fazer um secundário. Desculpe, o secundário. Outro chamado primário. E esse vai ser excelente. Então, eu tenho você e posso colocar extremidade primária do plano de fundo ou removê-lo e dizer fundos coloridos, secundário, pronto. Então, ele estava lá apenas para criar minhas pequenas aulas globais. Se você sabe, uma maneira melhor de fazer isso, você provavelmente sabe. Se você fizer isso, me avise nos comentários. De qualquer forma. Então, eu tenho o Button Plus, vou usar a cor secundária. O motivo é que não aplicá-lo apenas à classe do botão é se eu precisar mudar isso mais tarde porque é só que a taxa de contraste não é boa. Eu preciso ajustá-lo. Eu acordo na manhã seguinte. Eu simplesmente não gosto disso. Se eu apenas mudar essa classe, o botão mudará, junto com isso mudará tudo o mais que eu usei. Pelo menos os planos de fundo coloridos são secundários dos aplicados. mesma coisa com o arredondamento dos botões que fizemos aqui em cima. E o que vamos fazer é dizer, eu vou, eu quero fazer isso com o botão plus, porque eu não quero adicioná-lo a essa classe lá. Então, o botão plus terá bordas. Aumente e coloque em 50. Então, é completamente redondo. Não é totalmente redondo. Você pode ver? É meio oval. Como faço para fazer isso redondo? Vou dar um tamanho. E a minha será quão grande eu fiz esses 3D, com quatro pixels de largura. Então eu vou dizer que você tem um tamanho de 34. Sinto que vou me dar problemas aqui. Sim. É preciso o co, como podemos colocá-lo no meio? Esse foi um ponto muito bom. Como vou receber informações? E isso é um arranhão na cabeça e tempo. Então, há alguns carrapatos aqui. Tem alguns estilos chegando. Se eu selecionar isso, ele tem alguns estilos. Eu poderia transformá-lo em um gráfico e trazê-lo para dentro. Se você não estivesse aqui, eu provavelmente faria isso e iria até Figma, faria e desenharia, apenas traria como uma imagem e a moveria para cima. Ok. Mas você está aqui. Então, como vou fazer isso? Vou aumentar o festival de topografia porque estou usando apenas o plus. E então, para dentro daqui, eu quero movê-lo. Eu uso a posição? Mova-o através. Eu tenho. Eu tento brincar com o estofamento. Vamos ver se há algum padrão chegando ou eu posso fazer isso. Meu problema agora, porém, é que estou fazendo isso no segundo plano. E eu, quem mantive a destruição? Desfaça várias vezes medindo o peso do meu teclado porque eu estava jogando com o tamanho quando estava conectado a essa classe de combinação. Então, desfeito, eu vou fazer, na verdade vou tirar isso por enquanto, para o caso de eu acidentalmente voltar novamente. Eu estou no botão e vou fazer para você um tamanho de 34. Por que eu não usei tamanhos mínimos? Porque não há capacidade de expansão que eu queira. Não quero que ele se expanda caso não seja permitido fornecer uma largura fixa. E isso também terá um tamanho de fonte do que eu tenho. Isso bastará. E eu vou usar o preenchimento e a margem de onde vem, vem de segurar Shift, segure Command. Hora de você de onde está tirando isso. Ignore isso. Então eu vou te dar um pouco dessa maneira. Perfeitamente no meio. Suba mais um. Cinco. Estamos felizes com isso. Estou feliz com isso. Ok. E vamos usar a cor de fundo secundária. Aqui vamos nós. Ele não está quando é o tipo certo de posição. Então, voltaremos ao meu botão encontraremos o posicionamento e continuaremos. Eu meio que arrastei isso da última vez que não estava muito animado sobre onde isso acabou. Mas agora estou empolgada. Eu o arrasto para cima e para baixo ou para a esquerda e para a direita, olhando para ele e lá vamos nós. Ok. Isso é meio que isso. E eu preciso brincar com meu rumo para isso. Eu também preciso de um pouco de espaço na parte inferior, meio grudado na parte inferior e isso está me deixando louco. Então, eu preciso de um pouco de espaço no fundo depois. Ok, então o que eu vou fazer é descobrir onde vem esse espaçamento . Ok, largura do contêiner, então dê uma olhada no tamanho. Então, talvez as miniaturas das seções tenham um espaçamento entre elas. Então, eu tenho 64 no topo. E o que eu fiz lá foi como eu decido o que está controlando isso. Você pode obter um modo de raio-x. Ok, então você poderia ir para o modo de raio-x e dizer quem, de onde, de onde vem isso? Nem te mostra. Ok. Então isso não funcionou. Então, se isso não funcionar ou o que eu faço com mais frequência do que não, eles vão para o modo de raio-x se eu apenas voltar. Eu sei que isso está dentro das coisas. Eu volto aos pais. Esse cara não tem espaçamento no topo. Esse cara, a grade não tem espaçamento. Miniaturas da seção. Lá está ele. Ele tem 64. Estou feliz com 64. Mas eu quero 64 na parte inferior também. O que eu fiz? Eu tinha 12,3. Ok. Lembre-se de que esse é o atalho para percorrer todos esses tamanhos diferentes. Ou as diferentes janelas de visualização. Foi uma excelente aprovação. O que eu deveria fazer era digitar um estava em 64 e pressionar Enter. Agora porque estou espaçando na parte inferior. Ray. Na verdade, eu quero que seja maior. 164. Foi assim que conseguiu algum espaço para respirar. Agora vou pegar essa seta para cima para pegar a mãe, que é a miniatura do COD, copiá-la, colar, colar, colar, colar, colar. Tão satisfatório quando você finalmente chega a um ponto, você fica tipo, eu posso, você sabe, você fez todo esse trabalho duro e você pode simplesmente dar um passo e repetir. Ok, então agora eu vou aumentar o preenchimento aqui. Então, eu quero pegar a grade Up Arrow até ver o ícone da grade e torná-la maior. E eu faço isso mesmo que eu faça isso mesmo aqui? Eu fiz. O que foi isso? Então, eu vou clicar sobre isso. Mantenha pressionada minha tecla Option. Diz 32, mas está indo para o ar. O que está pairando sobre a borda. E é um grande grupo antigo. Desenhe. Isso não funciona. Pegue um retângulo. Digamos que você tenha uma largura de 50 pixels. Muito obrigado. E então eu quero, onde está? Meu layout? Digite-o. A diferença será de 50 por 50. Aqui vamos nós. Tudo bem, é isso. Agora vou examinar e alterar o texto e as imagens aqui. Eu farei isso no modo fast-forward. Vou fazer uma pausa se houver algo interessante que eu encontre. Eu duvido que exista. Quando você está fazendo suas próprias, obviamente, você tem suas próprias imagens ou pode usar as que estão nos arquivos de exercícios. Os meus já estão aqui. Eles são. Então, sim, vou entrar no modo rápido e pausá-lo. Se alguma coisa. incrível acontece sempre que há. Uau, uau. Ok, vamos parar. Faça o espaçamento primeiro. Por quê? Porque por que está lá? Ok. É porque vamos dar uma olhada em você sabe como pensaria? Porque sim, a pausa. Pense um pouco no que poderia ter acontecido para uma ou duas ideias e depois parar, pronto, voltar atrás. Ok, então esse botão aqui está obtendo seu posicionamento de seu pai em relação ao pai Rapa. Você se lembra que fizemos isso. Então, o botão é colocado mais para baixo sob posicionamento em um botão plus. Então, não esse. Ele está recebendo isso do botão plus, não da classe de combinação. Ele está se posicionando e está dizendo esses valores absolutos em relação ao invólucro chamado invólucro inferior do cartão, que é aquele que fica do lado de fora. E dissemos que fosse literalmente assim. Ok, e agora mudamos isso. Ainda é exatamente a medida correta, mas agora está pendurada nas bordas. Então, agora o que vamos fazer é dizer “ você” ou “assim”. E, na verdade, o que eu poderia fazer é fazer isso desse lado em vez de sair, vamos ver se isso funciona. Essa é minha teoria de qualquer maneira, em vez de sair desse lado e subir. Porque se isso ficar menor, ainda é. Mas se eu sair desse lado direito , sempre será só um pouquinho. Vamos experimentar. Isso faz sentido? Isso não funciona. Eu vou me livrar disso e me livrar disso, vou deixar o de cima porque está certo. Mas vou usar esse lado. Eu vou dizer que você está desse lado. Estou usando esse canto como referência. Ok. Então, a parte superior e o lado direito do pai, eu estou usando isso. Então eu vou ter que me deparar, você tem que meio que embaralhar, embaralhar, embaralhar. Espero agora que, quando eu mudar , isso funcione. Totalmente vai funcionar. Vá lá, trabalhe. Grelhas. Você vai pegar isso. E quando eu o movo, ele faz a calçada e eu vou ter que fazer o fundo. Eu vou fazer o fundo. Está fazendo o lado certo. Talvez eu tenha que fazer isso até outro bom ponto. Estamos fazendo isso em relação a isso. Mas mesmo que estejamos colando sobre essa imagem. Então, vamos fazer outra coisa que pode tornar isso mais fácil para nós. Está no tamanho certo, 50 pixels? Vamos dar uma olhada. Outra forma de fazer isso. Eu o coloquei aqui só porque foi bom te mostrar aqui e nós o mudamos para cá. Seria melhor se esse botão ficasse dentro de onde quer que essas imagens possam ver que este cartão está separado. Eu quero que esteja no mesmo plano da imagem, porque é a isso que ele é relativo. Eu quero que eles sejam relativos a essa imagem, observe essa coisa na parte inferior que continua distorcendo e mudando devido à maior largura. Já essa imagem aqui que apertou o botão. Se você está saindo com a imagem dele aqui, eu gostaria que você fosse relativo a isso. Ok. E ele escapou de seus pais e seus pais eram parentes e foi isso que o fez trabalhar. Eu não preciso mais disso. Vamos voltar para Eu realmente vou remover isso. Então, o pai desse cara agora é essa miniatura do bacalhau. Ok. Então, vamos tornar seus pais parentes. Isso é bom. Este botão de adição. E vá até o botão mais e diga Você é zeros, zero. Vamos fazer ele. Usamos a lateral, usamos a parte inferior. Isso será melhor? Vamos tentar. Vamos passar para esses estilos diferentes. Vagão. Vá. Vamos tentar novamente com a coisa. Ele é muito melhor. Ok. Ele está no canto superior direito. Então, foi uma espécie de trabalho em andamento e sou grato por ter funcionado. E parecia conciso o suficiente para conseguir o que fizemos com eles. Ele estava originalmente dentro disso, então ele estava tentando ser relativo a isso e tudo bem. Se você os quisesse no canto superior direito disso. Não era isso que queríamos. Queremos que eles saiam com a imagem dele. Então é melhor estar nesse tipo de grupo, um irmão do que você quer que ele siga. Ok, então eu quero que eles terminem com essa imagem. O problema era que tínhamos um parente. Ele precisa ver alguma coisa. Seus pais precisam ser parentes e tudo bem quando ele estava lá, porque fizemos aquela embalagem relativa. Mas agora precisamos tornar esse parente, o que fizemos. Você, Brian, explodiu? Meio que poderia. Ou isso é muito útil, muito difícil, ou acho que para mostrar que as coisas são um pouco complicadas e são como resolver problemas. Adoro a solução de problemas. Eu amei da mesma forma, o que é uma boa ideia. E você pode passar meia hora tentando consertá-lo e conseguir um novo web designer. Eu acho isso emocionante. Mas nós entramos nas ervas daninhas e o U2 vai para as ervas daninhas tentando consertar alguma coisa. Ou eu respiro fundo. Vou fazer uma pausa por um segundo. Tudo bem, parei. Se você achou isso realmente complicado, simplesmente não coloque coisas em cima das imagens, pelo menos ainda não em sua carreira de web design. Só não os desenhe no Figma, no Photoshop ou Illustrator para que as coisas se sobreponham assim. Apenas mantenha-os separados porque podem ser complicados. E a próxima coisa que faremos é a capacidade de resposta. Estamos ignorando isso até agora. Então, vamos dar uma olhada na aparência de um tablet. Esmague seus dedos. Não há muito trabalho. Ei, não é tão ruim. Vamos começar pelo topo. Ok, vamos dar uma olhada em todos eles. Você precisa trabalhar no próximo. Você meio que pulou para o celular e depois conserta o tablet porque talvez eles caiam em cascata como este, fazendo com que este consertasse tudo embaixo dele. E se eu mudar esse, isso afeta esses. Portanto, você precisa trabalhar no próximo ponto de interrupção. Para mim. Qualquer acolchoamento. Então, onde vou adicionar o acolchoamento provavelmente aos pais. Vou clicar dentro, usar minha seta para cima algumas vezes. Ele é meu pai porque está ficando confuso aqui. É como ficar um pouco complicado de olhar. Então div, nav, sim, não dispararam. Vamos ter um pouco de espaçamento de preenchimento ou margem. Nesse caso, não importa porque as cores vêm de seu pai são da largura do contêiner. Mas se isso não acontecesse, isso estava vindo dele, teríamos que usar acolchoamento. Vou usar minha tecla de opção, tecla alt em um PC, arrastá-la para dentro. Perfeito, esse aqui. Posso me safar? Provavelmente não. O que eu talvez tenha que fazer neste aqui é ir até minha grade e dizer que, na verdade, vou apertar isso. Essa grade aqui provavelmente precisará de alguma margem. Deste lado. Realmente não precisa dele aqui porque, com as isenções fiscais, você pode querer colocá-las nos dois lados que, caso tenha algo diferente me atingindo no desktop. Existe, lembre-se, vá em frente se você quiser alterá-los. Então, não há preenchimento aqui, ok, mas aqui embaixo você pode ver a margem subir. Não há nenhum aqui. Ok. Foi estranho. Você podia ver 22 Eles fizeram. Você vê isso? Saltar por pontos de bicicleta tem algumas peculiaridades como essa, mas meio que deu certo, clique de volta na grade e ela desapareceu. Mas está aqui. Há uma margem. E eu estou meio feliz com tudo isso. Está ficando um pouco apertado lá. Ainda não estou pronto para diminuir gradualmente o tamanho da fonte porque gosto muito que os freios sejam desenhados na terceira linha aqui embaixo. Esses caras. Sim. Provavelmente podemos jogar com ele e colocar três lá. E eu vou realmente descer para dois por dois e diminuir esse H2, provavelmente a grade estará agora no topo aqui e um layout, será. E você pode ver que não é mais azul. É porque ele está fazendo com que ele saia do desktop para dar uma olhada rápida. , está começando Na verdade, está começando a escolher um estilo de onde vem, mas é da versão para desktop. Bolo: veja pequenos ícones muito importantes. É daí que vem. Então, na verdade, vou fazer apenas dois por dois. Agora. Nós faremos isso. O que eu quero? Quero um pouco ou diminuo o acolchoamento e coloco um pouco mais do lado de fora. Então, vou dizer estilo de grade que chamei de grade para minhas miniaturas de grade. E eu vou dizer que tenha alguma margem de cada lado, mantenha o Alt ou Option. Estou cansado desses atalhos. E isso é 33. Talvez eu faça o contêiner. Onde eu acho que as miniaturas da seção. Por isso eu digo bom o suficiente para combinar com aqueles. Estou feliz com eles agora? Eu sou. Preciso trocar as imagens. Eu sei, e estou feliz com isso o suficiente. Ele precisa ser empurrado? Ignore isso. Tem um aqui. Esse aqui. Eu odeio bem a paisagem. Quem vê um site? Paisagem boa. Você pode fazer isso, mas temos que resolver isso pelo menos porque o que eu provavelmente vou fazer é fazer essa grade funcionar. Livre-se do meu 0,5 e faça um por um. Ok, então eu tenho essa e essa opção de grade aqui. O que eu quero fazer é dar uma olhada aqui. Então, o herói acertado estava alinhado à direita, em todos os outros. Mas essa aqui, eu vou realmente fazer tipografia. A é enviado para este, então vai ficar bem, certo? Alinhado à direita. E então esse será centralizado. Esse cara aqui, o que o faz ir para a direita? Você se lembra? Ok. Ele estava fazendo o teste de fluxo, estava forçando-o a ir até o não fazendo nada. É o pai do pai. pais estão dizendo que não é o que eu quero. É engraçado quando você tem a grade como pai e, dentro da grade, você tem o Flexbox. Um pouco os confundiu demais. Ok. Então, aqui eu disse que todo mundo dentro deles vai para a direita, mas na verdade todo mundo dentro dela pode ser visto até agora. Bom. E temos alguma altura mínima em algum lugar. me lembro onde a compramos. O que lhe dá todo o preenchimento interno é o diblock. Olha. Vejamos o tamanho do espaçamento. Há uma altura mínima proveniente do clique de comando ou controle do diblock, que é o que eu chamei dessa coisa terrivelmente chamada. E como chamamos isso? Mergulhe aqui? Eu já tenho uma div, Hera. Espero que não. Vamos dizer que substitua isso por ser. Eu uso essa opção, mantenho pressionado Option ou Alt em um PC e apenas arrasto para a esquerda e para a direita. Especialmente quando você não tem certeza, você gosta de mim, não sabe o que digitar. Esse aqui vai ser muito menor nessa opção. Parece bem redondo? Você pode girar o parafuso em si. Você pode dizer que a imagem dois é o estilo que eu apliquei a essa coisa aqui. Dê um pouco de nome, herói da imagem. E eu vou dizer que você talvez tenha o raio de canto de zero. Acho que fica melhor em. Mas se você quisesse deixar de fora, você poderia arredondar bem. De heroína e vai ser quadrado. Mas, na verdade, vou voltar à rodada. Ele precisa de uma altura mínima. Eu fico ainda menor. Opção de arrastar. Essa coisa aqui tem uma lacuna na grade. Eu vou meio que fechar só por esse ponto de interrupção e pronto. Mas o que eu realmente quero fazer é, para o div Hero, adicionar um pouco de preenchimento na parte inferior. Então, onde eu edito? Eu posso editar as miniaturas desta seção. Eu poderia adicionar um pouco de preenchimento superior, desculpe, margem superior. Ou eu poderia descobrir o herói da imagem. Ok, porque isso é bem único. Só está sendo usado nesta imagem. Eu poderia fazer isso com este ou com o outro. Totalmente bem. Seria interessante ver o que você fez ou não fez. É engraçado como se não houvesse nenhum dos dois. Ok. Paisagem do meu telefone. Ok. Estou feliz com o dois-por-dois. Vamos até o celular. E eu quero mudar isso aqui de cima. Essa é uma questão importante. Tem uma coisa chamada div nav. Ele foi aplicado de forma flexível e está na horizontal. Vamos ficar na vertical. E nós vamos. Essa é meio interessante, como ver aquela reviravolta. Provavelmente teria sido útil se usássemos o Flexbox para isso e invertêssemos esses dois, talvez a imagem fosse melhor na parte superior. Mas a grade não tem isso. Eu não acho. Então. Vou ficar na vertical. E eu não quero usar isso, empurrando-o até as bordas. Eu quero que fique bem no meio do ar, mas eu posso aplicar a lacuna para linhas e colunas, neste caso, são linhas. Vou manter pressionada a tecla Option em um Mac, a tecla 0 em um PC. Expanda isso um pouco. Tudo bem, eu seria o suficiente. Tudo bem, todo o resto aqui, está certo sendo desse tamanho, provavelmente é muito grande, grande, grande, provavelmente muito grande. Então, meu herói de sucesso no celular, vai para a tomografia. Vou manter pressionada minha tecla de opção e arrastá-la para baixo. Eu gosto desse jeito. Em termos de altura, vou descer dela. Texto do botão. Pode ser enorme. Todo o resto. Vamos entrar na imagem porque ela é estranha em geral, mas parece ainda mais estranha em telefones celulares. Então, vou dizer imagem de herói. Essa grade fechará? Essa é uma boa pergunta. Então, vamos ao nosso display: nenhum. E funcionou. Bom. Tudo bem, isso, mas aqui não cabe. Então, vou pegar minha grade parental. E eu vou dizer que você configurou a grade. Eu sei que é a grade porque tem esse pequeno ícone lá. Você pode ver que essa é a grade e eu quero que o espaçamento seja Onde está? Que tipo de visão? Estamos em uma grade, uma grade. É por isso que vou dizer que será um por um. E o que eu poderia fazer é brincar com a largura. São completamente aqueles que tentaremos preencher o espaço. É Deus. Então, algo está empurrando isso de tempos para sempre. Vamos dar uma pequena olhada. Vamos sair dessa grade de miniaturas, você está fazendo isso? E tamanho, espaçamento. Mantenha pressionado o botão Command. Sim, é uma grade, as miniaturas ainda estão dando a ela. Mas está vindo do pequeno ícone atarracado. Olha isso. Ele é o tablet. Ele está vindo disso. Então, vou substituí-lo e colocá-lo em uma simples olhada em zero. ambos os lados. Como eu pareço? Command Shift P, Control Shift P em um PC. Eu gosto disso? Eu sinto que precisa de um pouco de acolchoamento por fora. Command Shift P para desligá-lo, ou Control Shift P. E acho que provavelmente vou voltar para minha grade, espaçamento de miniaturas. Provavelmente vou colocar um pouco nos dois lados mantendo pressionada a tecla Alt ou Option. Talvez vá e a própria grade. E se eu escolher 16? Vou pegar a grade em si e arrastá-la até 16. Então combina com o Command Shift P. Dê uma olhada em alguns telefones, como tamanhos diferentes de um telefone. Sim. Algo mais que você mudaria? Precisamos deles porque o botão o pega. Botão pega isso faz sentido, certo? Então, como os chamamos? Essa é fazer uma pergunta e a outra é chamada de profundidade chamada Faça uma pergunta. Então, o que eu poderia fazer é realmente voltar para a área de trabalho porque eu quero mudar isso até o fim. Vou sair do modo de pré-visualização porque ele está preso lá. E esse está frio. Só então eles me fizeram uma pergunta. Faça uma pergunta. E esta aqui também é para fazer uma pergunta. Mas no celular número 1234, isso meio que fazia sentido aqui. Mas quando está na versão para celular, não faz sentido. É só desligá-lo lá. Então, vamos para a posição, a oposição e a exibição. Considerando que exibição, layout e exibição desativados. Isso é beta. Esse botão, esse botão talvez seja um pouco gigantesco. Isso fica aqui embaixo. Esses botões, eu provavelmente quero transformá-los em cartão de botão. Qualquer outra coisa que eu quisesse , eu ainda quero passar por todas essas coisas. Então, eu vou dizer alinhamento. Eu quero que você seja o centro. Eu quero que eles sejam centralizados? Vou ter que analisar isso um pouco, mas acho que fizemos todo o trabalho duro. Provavelmente vou fazer uma pausa, voltar e dar uma olhada. Frango no meu celular. Então eu iria publicá-lo. E então vá e verifique o URL no meu telefone ou tablet para ter uma boa aparência. Mas acho que estamos lá para assistir a esse vídeo de qualquer maneira. Ela está sozinha de qualquer maneira. Como você o encontrou? Quanto tempo? Isso é? Quanto tempo demorei. Tive que fazer uma pausa lá no meio que recortei na edição. Mas isso é relativamente o tempo que demorei. Quanto tempo você demorou hoje para te levar até Alice? Você demorou 10 minutos? Provavelmente não. Mas me avise, seja interessante saber. E também seria interessante saber o que você fez de forma diferente. Ok. Conte-me a maneira louca de que você tem algo para trabalhar e depois descobriu que existe uma maneira melhor. Ou você pode ter me visto fazer uma loucura por muito tempo quando você está tipo, por que você acabou de fazer isso? Provavelmente está certo. E você provavelmente é melhor em fazer isso do seu jeito. E não há funções certas e/ou fortalecem formas rápidas de fazer tudo. Você pode obter muitas soluções usando métodos diferentes. Então, deixe-me saber e outras pessoas através dos comentários você mesmo só para ver que você estava tipo, Ah sim, Então fez dessa maneira. Eu fiz isso dessa maneira. Mas veja, Jane ou Dave fizeram isso de outra maneira e faz mais sentido do que nós dois. Dê uma olhada nos comentários. Deixe seus comentários. Meu jeito não é o melhor. Eu sou. Razoavelmente, sou um web designer bastante confiante, mas também estou muito animado para fazer edição de vídeo, design gráfico e outras coisas. Então, haverá pessoas que, esperançosamente, você vai ficar muito melhor do que eu muito rápido. A onda mudará. Haverá maneiras melhores de fazer as coisas. Então, sim, não tenho certeza de onde estou indo com isso. Estamos apenas divagando porque, no final, vejo você no próximo vídeo. 57. Como usar o Px Rem & En no fluxo Web:: Olá a todos. Neste vídeo, veremos por que não deveríamos realmente usar pixels para fontes e deveríamos usar anéis, ver as pontas também, mas os anéis como queremos. Por que vamos usá-los? Como fazemos com que funcionem? É disso que trata este vídeo. Para começar a entender isso, vamos adicionar dois parágrafos. Então, vamos adicionar um parágrafo logo ali. E vamos fazer dois deles para serem consertados. Vou adicionar dois estilos diferentes e será meu experimento de texto, um, cópia. E eu vou ter outro aqui embaixo. E o frio exige dois Spearman, vou dobrá-los em um segundo. Então, agora estamos sentando fontes com um tamanho de topografia de 16 pixels. Vamos digitar 16 para forçá-lo a chegar lá. Ok, aqui, aqui, vamos dizer, vamos usar rems. O Rooms é melhor do que o objetivo de dizer, você sabe, nós cobriremos os dois, mas usaremos RAM. Ok, uau, isso é grande. Então, vamos digitar em um quarto. Por que os aros são tão grandes? O aro é um dos tamanhos padrão. Portanto, o tamanho padrão para a maioria dos navegadores é 16. Então, se você digitar 16 aros, ou seja, 16 vezes 16, você obtém uma fonte gigante. Mas se você precisa apenas de um registro de 16, você só precisa de um aro. Como você faria se precisasse de dois quartos, qual seria o tamanho? Você pode fazer as contas? Eu fiz 32. 32. Ei, então você acaba com esse tipo de escala se quiser 1,5 quartos, que tamanho é esse? 20 para? O editor teria recortado isso para parecer muito rápido, mas demorei um pouco. Então você faz esse cálculo. Por que nos preocupamos? É porque existem pessoas que precisam atualizar seu navegador para que todas as fontes sejam maiores. Ok, deixe-me mostrar um exemplo. Vou carregar, vou publicar isso. E eu vou carregar em um navegador, você os comeu. Tudo bem, então eu tenho isso na Internet. Também vou verificar isso no Chrome e vou até minhas preferências e adicionarei um tamanho de fonte. Ok, no Chrome, eles mudam o tempo todo, mas eu estou na aparência e dá para ver o tamanho da fonte. O padrão para isso é médio. E o que eu vou fazer é arrastá-lo com a tecla Alt para que eu possa ver os dois. Você os escreve. Ok? Então eu posso ver os dois. Se agora você, alguém tem problemas de acessibilidade, essa pessoa tem deficiência visual. Eles podem estar velhos agora, de óculos. Ou, assim como o gigante, pega fontes como o telefone do meu pai e as pega sempre. Tem um tamanho supermassivo. Ok. Então, ele ou qualquer um pode ir e mudá-lo para grande. Ok. Você pode ver o que está acontecendo aqui à esquerda? Você pode ver que este tem um aumento de um Rin. Essa não funcionou, nem aquela. Porque nós os colocamos em pixels. pixels não querem mudar. Eles ficarão 16 para sempre. Já a pessoa que precisa de mais acessibilidade, ok, essa é a palavra que estamos usando, k porque é assim que o Google a chama. Ele está procurando seu site para ver. Este site é bom, útil para todos os tipos de pessoas, pessoas que precisam de fontes grandes. E não é um grande drama para nós colocar as coisas nos aros em vez de pixels. Não é particularmente difícil, mas significa que as pessoas que precisam podem aumentar o tamanho da fonte. Agora, independentemente de você usar rems ou pixels, se você fizer isso, a maioria das pessoas no mundo não usa isso sentado lá, apenas vá, talvez eu queira ampliar. Eu sei como fazer isso no meu Mac. É o Command Plus para ampliá-lo. Ok. Provavelmente é Control plus em um PC, diminua o zoom. Não importa se são pixels de quartos, essa barra branca. O Google gostaria de ver os aros sendo usados. Não é uma coisa grande. Se você não fizer isso, poderá se limitar aos pixels no momento. Se você é novo e gosta muito de pele, eventualmente mudará para um aro porque é apenas uma pequena coisa. Eles tinham uma pequena marca em relação ao seu site. Mas quando você busca o domínio dos mecanismos de pesquisa, você quer todas essas pequenas marcas, uma marca ao lado do nome do seu site, para que eles tenham uma classificação melhor. Você pode falsificar isso dentro de um fluxo de trabalho. Eu vou te mostrar aqui. Quando eu vou para este, ele tinha uma prévia do zoom. O padrão é 16, mas se eu subir para 32, você pode ver tudo isso subindo? O Chrome apenas chama isso de médio. O padrão médio para a maioria das coisas é 16. Ok, então aqui eles apenas dizem, se eu reiniciá-lo, o padrão é 16, mas se eu o tornar pequeno ou grande, ele o visualizará aqui se você quiser ver como ele se decompõe e muda, verifique porque às vezes você tem um título que precisa estar em duas linhas como essa. E é grande e acessível porque é gigantesco, é muito espesso e tem um contraste muito bom. E você pode decidir deixá-lo como pixels, porque se ele se expandir e contrair apenas quebra o slide e isso é pior do que ter uma fonte. Talvez seja isso. Tão gigantesco quanto poderia ser. Ok, então verifique. Ok, então como vamos analisar e atualizar todos eles? Não precisamos, mas vamos fazer um truque fácil de fazer. Digamos que eu precise que isso seja. E diga isso aqui. Eu sei que é 50. Como faço para fazer com que sejam os aros certos? Basta dividir por 16, que é o padrão, e digitar REM depois, e espero que ele faça as contas. Aí está você. Você vê que isso não mudou. Calcula-se que 15 oh, desculpe, 50/16 e os aros são 3,125. Ok. Você pode decidir que são três porque isso é meio que um, eu não gosto de pontos decimais lidando com fontes. Ok. Ok, então divida por 16 e qual é o tamanho da fonte que você quer que seja. Nós lhe daremos o tamanho do aro. Mas saiba que se alguém mudar o padrão, isso mexerá com seu layout. Está tudo bem. A outra coisa que você pode fazer é fazer a mesma coisa com sua altura, sua altura de linha. Se eu mantiver isso em pixels, vamos dar uma olhada. Quando eu fico maior, ele fica grudado nos pixels porque os pixels não mudam. Mas os aros parecem. Você pode ver que ele precisa aumentar proporcionalmente ao tamanho da fonte. Então, vou voltar para três. E aqui você também pode usar os quartos. Então eu vou fazer, o que é 52? Por que não consigo clicar nele? Porque vem de todos os títulos. Eu deveria ir e mudar meus cabeçalhos de óleo. Eu não deveria estar fazendo isso só aqui. Então, eu deveria estar indo para todos os títulos e deveria estar fazendo isso aqui. mau Dan. Ok, então eu vou dizer, eu vou fazer um U dividido por 16 RAM, bater em Nico. E este está riscado porque o selecionado está substituindo-o. Então, vou clicar com o comando para me livrar dele. Vou voltar para o meu hit one. E agora você vai ser 50/16 REM. Para adicionar um pouco mais de complicação. Mas estamos tornando nosso site mais acessível para os dois usuários. E como o mecanismo de busca do Google quer, queremos ter uma boa classificação. Meu conselho é usá-lo apenas para fontes. Não o use para espaçamento. Você pode. O problema é que, se você decidir usar minhas margens, como algumas pessoas fazem, vejo muitas pessoas usando seu espaçamento. Onde, se eu chegasse, deixe-me encontrar algum caminho para algum lugar. Vamos fazer a altura mínima, ok, eles podem atingir a altura mínima se este for um tamanho. Encontre a largura do contêiner, div nab. Aí está, altura mínima. Você pode usar anéis aqui. O problema é que ele sobe e desce quando as pessoas mudam suas configurações no navegador, e não é isso que queremos. Você pode fazer isso totalmente, e isso torna seu site mais flexível, mas as grandes empresas acabam quebrando cargas. E essa não é uma das coisas que o Google conta com a acessibilidade. Agora, essa é minha opinião. O Google nunca diz a ninguém exatamente o que eles fazem. Mas sim, aros, muito bons para fontes e coisas relacionadas a fontes. Em seguida, vamos discutir os objetivos. Você, Maxine, vai entrar em você. É ele, Rim. Eu digo ems e rems. Ok. Então, fizemos rampas com facilidade. Basta usá-los. Não use o Ames. Essa é a resposta curta. A resposta longa é como, você diria, por quê? Eu vou te dizer o porquê. Em um tipo razoavelmente complicado, eles são simplesmente complicados. Eu os uso o tempo todo e lido com os problemas até aprender sobre os aros. Então, eu tenho esse bloco div, vou movê-lo até lá. Vou colocar algumas tags de parágrafos de texto para chegar lá. Eu vou ser super chique e vou, tudo bem, eu vou ter minha aula chique e vou usar Ames. E eu sei que 16 não é o que eu quero porque isso é 16 vezes o padrão. Os caras querem um deles, um dos padrões, que é 16. Portanto, funciona exatamente como os aros nesse caso. O problema é que ele pede ao pai verificar se o padrão está bem, enquanto um objetivo raiz, ok, é por isso que é RAM. A raiz m procura, não se importa com o que os pais estão dizendo para ela fazer. Só diz que vou procurar o navegador. E o navegador diz que eu tenho 16 anos, eu sou um desses. Enquanto o AME diz, vou olhar para qualquer pessoa acima de mim, qualquer pai. Eu vou usar isso. Então, se você decidiu por esse bloco, eu vou criar uma classe para ele. Esta vai ser minha div chique, div aqui. Eu vou fazer a topografia, tudo dentro dela. Já fizemos isso antes, certo? Dissemos que tudo seria público em uma etiqueta corporal. Dissemos que tudo fosse branco, então não precisamos nos repetir. Então, neste caso, digamos que alguém tenha decidido, eu vou fazer três EMs. Por que isso mudou? Está definido como um. Eu posso ver isso. Há uma imagem que deveria ser 16. Não, não Está olhando para seu pai que diz: “ Eu tenho três M's, seja um deles”. Então você vai, ele está fazendo o que disse. É por isso que usamos a raiz. A raiz remonta ao início e apenas olha para o navegador e diz: Qual é o seu padrão? Eu serei isso. Ou esse cara diz, o que significa o pai? Eu serei múltiplos disso. Então, se eu dissesse que queria ser três objetivos para este texto de parágrafo, o que vai acontecer? Serão três objetivos dos pais, três equipes dentro de, ok, então é por isso que não usamos nomes. Você pode então, algumas vezes, ser apenas 16. Algumas vezes você acabará com múltiplos, o que não queremos. Então, vou desfazer até que acabe. Algo mais que eu queira discutir? Não, é isso mesmo. Por que eles chamaram isso de objetivos é de topografia antiga e pré-digital. E basicamente eles mantiveram, se você tivesse um objetivo, seria um dos tamanhos do M. É assim que eles tomariam o tamanho das fontes. Letras diferentes são diferentes. Eles não usariam o tamanho do olho porque é muito estreito com M maiúsculo, especialmente seria um tipo muito bom de caixa, certo? Então eles usam isso. Eles olham para cada fonte e dizem, tudo bem, todo mundo em maiúsculas termina junto. E isso é o que vamos usar é como a linha de base para essa fonte e vamos chamar o EMS porque é só que se tornou o m's. De qualquer forma. Esse é o meu entendimento disso. Sim, é isso mesmo. Use anéis. Não use n's. Fontes, não use pixels, use rems para espaçamento, use pixels, limpe como lama. Tudo bem, nos vemos no próximo vídeo. 58. Como usar a altura da janela de visualização VH no Webflow: Olá a todos. Neste vídeo, veremos a altura e veremos esse número aqui, altura visualização VH, ok, este está definido como 80. Isso significa que neste publicado, essa grande caixa cinza aqui representará apenas 80% da janela de visualização. Do jeito que pode ser visto. Você vê que isso muda dependendo do tamanho da janela de visualização. E neste caso, 80 por cento. É como porcentagens, mas é baseado na altura da porta de visualização. Então, vamos descobrir isso. Tudo bem, janela de exibição. Vamos fazer a altura da janela de visualização, mas o que significa a altura da janela de visualização? Estou pré-visualizando isso em um navegador. Esta é a minha porta de visão deste canto superior inclinado aqui, até aqui. Todas essas medidas. Seu computador pode ser menor, você pode estar neste. Portanto, a largura da sua janela de visualização será cerca de metade do tamanho da minha. Então, isso é algo a considerar. Depende de quem está vendo e em qual dispositivo eles estão visualizando. O mesmo acontece com isso. Se eu fizer a altura da janela de visualização e estiver olhando para um computador como esse, não sei. A partir dos anos noventa, pequenininha, vai usar de lá para lá como suas medidas. Se eu disser B 100 de altura da janela de visualização, ela vai ser tão grande. Na minha máquina. É tão grande. Você pode fazer com que um desses se junte ao contorno de Norma quando a largura da janela de visualização for epicamente longa. Então, é um pouco complicado. É, definitivamente, muito mais consistente com a altura. Vamos fazer isso. Então, no momento, algo está mantendo isso aberto. Por que é div hero, é que tem uma altura mínima. Vou me livrar disso. Clique na opção Alt. O que eu vou fazer é não usar a altura mínima porque isso é um tipo de variável de qualquer maneira, então eu não preciso usar min-max. Então, eu só vou dizer que a altura é, digamos, 100 vh. Bem, você pode, neste menu suspenso aqui, 100 vh é 100% da minha janela de visualização. Eu quero que esse herói div tenha 100% da altura da minha janela de visualização, o que é bom. Vamos dar uma olhada. Vamos fazer uma prévia. Então Command Shift P. Agora, veja, é a coisa toda exceto o que é apenas olhar para baixo aqui. Vamos fechar isso. Dê uma olhada. Tem mais lá. Pensei ter dito 100%. Está fazendo isso, não é um, não está tentando encher o elevador espacial. O que ele faz é parecer sua altura completa. E então diga Se esta caixa é 100, é esse tamanho. Então, é do topo aqui até o topo do fundo. É pegar essa medida e aplicá-la com essa caixa cinza mais clara. É por isso que continua por um tempo. Isso faz sentido? Meio que pega essa medida e depois a aplica. Tudo bem, vamos dar uma olhada, vamos fazer como, digamos, 50 de altura da janela de visualização. Ele olha para o completo, de cima para baixo, divide por dois e, em seguida, grava essa medida aqui. Assim, você pode decidir se isso vai funcionar para você. É muito bom em alguns sites seções diferentes. Você tem essa navegação e ela cai para eles. Você pode usar a altura total do navegador. Bem, a altura da janela de exibição. Muitas vezes, o que eu gosto de fazer é tê-lo para que ainda possa ser visto. Estou clicando aqui segurando a tecla Shift. Então, se eu chegar a 80 por cento, essas coisas ainda estão atingindo o pico acima da dobra. É só espreitar quando alguém entra no meu site e não usa a navegação, acha que não há mais nada neste slide, é só um cara grande e um traje de lagarta. É, eles podem ver essas coisas pegando e essa é uma maneira de forçá-las a pegar. Já antes, quando tínhamos uma altura mínima, esperando, esperávamos que as pessoas pudessem ver. É por isso que eu o mantive bem pequeno. Então, vamos nos livrar disso. Vamos ter uma altura mínima de Não me lembro. Então, ele pega. Mas o que acontece na casa de outra pessoa? Vou pré-visualizar o comando Shift P. Control Shift P. Se alguém tem um monitor desse tamanho, ele não vai funcionar. Eles vão embora, é só o cara com a roupa de lagarta. Já se fizéssemos isso com a altura da janela de visualização, vamos voltar. Você está acertando. Vamos fazer isso de novo. Garanto que você faz 80% da altura da janela de visualização. Não importa em qual dispositivo eles estão vendo. Sempre será 80%. Você pode ver? Também não posso. Bem, visualmente fica muito pequeno. Está calculando a altura da janela de visualização e, em seguida, tornando-a 80% disso. Então é muito legal, ótimo para altura. Agora, para fazer isso funcionar muito bem, se você acabou de entrar neste vídeo, é que eu configurei esse div hero para ser um layout do flexbox porque ele me permitiu fazer isso. Se eu realmente desligá-lo, isso me permitiu ir. Você Flexbox, você é vertical e eu quero que você se alinhe no meio. Ok? Então, mergulhe rapidamente em torno disso. Faça isso se você quiser estar no meio da altura da janela de visualização deles, essa criança aqui, você pode ir até lá. Oh, cara, eu quebrei tudo totalmente. Você está no layout dessa maneira. Volte. Essa é a altura da janela de visualização. A única coisa a considerar é que, quando você está pré-visualizando, é um pouco complicado aqui, porque quando você está pré-visualizando nelas, usando essas opções, especialmente no celular, você pode ver que é fazer uma porcentagem da janela de visualização e ser assim é estranho. Mas ninguém tem telefones tão longos, ou pelo menos não no momento. Portanto, é difícil usar aqui no Webflow. Qual será a altura que isso vai parecer? Você pode ver que está usando a janela de visualização agora, meu telefone provavelmente tem esse tipo de proporção, certo? Altura em peso, altura até cintura, altura em largura. Ok, a maneira de contornar isso e visualizá-lo é publicar seu site, publicá-lo e abri-lo em outro navegador. Will, na verdade, vamos fazer isso lá. Tudo bem, então esta é minha janela de visualização. Eu posso simplesmente arrastar meu monitoramento, o que é meu, desculpe, meu navegador e ele não me pega. Eu posso meio que fingir. Mas eu quero ver aquele celular e ele não está me mostrando isso. Então, o que você pode fazer pelo menos no Chrome, e tenho certeza de que todos eles descobrirão. Se você estiver usando algo diferente do Google Chrome, mouse e diga: vamos inspecionar este site. Isso é muito legal. E você, o que você está procurando é esse botão aqui. Acho que o seu pode estar do lado direito ou do lado esquerdo, mas você está procurando por esse ícone. Clique nele. E você pode dizer, eu gostaria de me mostrar isso em um iPhone pixel five, ok? O bom é que olha isso. Na verdade, está cortando de baixo para cima. Então é isso que vai ficar no meu telefone. Se eu tivesse um novo, eu tenho um pixel antigo. Mas como será no iPhone SE? Vai parecer diferente, um telefone grande, uma proporção diferente. Mas pelo menos o membro da janela de visualização está igualando a aparência desse telefone. Já que aqui é super longo e elástico. Chicken e Webflow podem fazer coisas aqui em que você pode, no momento, calcular a largura, mas não pode fazer a altura. Chick parece algo que pode adicionar, tudo bem, de volta à largura dessa janela de visualização. Eu nunca uso. Isso pode ser feito. Você pode ter um bom caso de uso para isso. E vou te mostrar uma coisa aleatória porque não consigo pensar em um bom uso. E eu vou pegar minhas miniaturas da grade. E eu vou dizer que suas miniaturas de grade terão uma largura de, digamos, 50%, 50 de largura da janela de visualização, VW. Ou você pode colocá-lo aqui e ele apenas olhou para a minha janela de visualização. A coisa toda se dividiu pela metade e disse, tudo bem, essa é a medida e eu vou aplicá-la aqui. Observe que não está no meio. Não é como 50 por cento da borda ou ir até a borda da tela e parar de dizer: qual é a largura? Tudo bem, eu sei qual é esse número. Pegue-o e aplique nesta caixa e ele vai para o n. É por isso que está meio que acima dos 50%. Você entendeu. Tudo bem, isso é VH e um pouco de VW. Para o próximo vídeo. 59. Como estilo o componente navbar no Webflow: Olá a todos. Neste vídeo, vamos ver esse cara, a barra de navegação. Ele é um componente k pré-fabricado. E analisamos no início do curso, e meio que os deixamos porque partimos e construímos esse muito simples , mas só tem um botão. Um botão não é divertido. Teremos vários botões. E como estamos usando esse componente pré-fabricado, quando começamos, digamos, a visualização do celular, é um menu de hambúrguer e olha, ele desliza para fora. Meio que. Esse vídeo vai ser divertido porque fará algo que vai incorporar todo o conhecimento que aprendemos no curso até agora. Pegue todas as partes boas do material pré-fabricado, como esta barra de navegação aqui, que contém componentes pré-fabricados, mas também seja capaz de personalizá-la, fazer com que ela faça o que queremos flexione nossas incríveis habilidades de Webflow. Você está pronto, eu estou pronto. Vamos fazer isso. Então, primeiro, tenho apenas um site em branco para mantê-lo separado do que fizemos. Porque o que fizemos antes era que nossa navegação estava bem. Nós só tínhamos um botão. Então, quando voltamos para o celular, estava tudo bem. Nós apenas usamos esse botão. Ok. Ou pequeno o suficiente para ir para o lado aqui. Mas um site de um botão não é particularmente divertido. Então, vamos criar um site com vários botões. Então, vamos adicionar a esse site em branco o componente Navbar e arrastá-lo. Tem uma coisa legal, tem algumas coisas. Tem esse invólucro externo, tipo uma seção. Tem um recipiente que o mantém na largura certa. Tem um espaço para um logotipo. Tem um invólucro em torno de vários botões diferentes. Eles os chamavam de links de navegação aqui, ok, em vez de botões. E então há um botão de menu que podemos realmente ver porque está desligado e só é aplicado. Seu celular é Hello. É por isso que gostamos desses componentes porque eles fizeram muito disso ligando, desligando e fazendo com que todo o alinhamento funcionasse. E ainda mais, vamos clicar em, se você clicar no pequeno ícone inicial aqui para a barra de navegação. E a opção Configurações aqui ou a engrenagem de configuração aqui. Essas coisas, isso não é web design, portanto, não coisas de código que estamos tentando descobrir. O que é posicionamento absoluto. Isso é algo que o Webflow fez para facilitar coisas como a navegação. O que eles disseram é que, na verdade, quando você acessa celular, eu o visualizo e clico nele, ele faz uma lista suspensa. E se você quiser vir de um lado, em vez de reconstruir a coisa toda? Você pode dizer navegação. Vem da direita. Você pode visualizar, ele vem com um clique direito em qualquer lugar. Isso vai embora. Algumas outras coisas divertidas. Ok. Digamos que também não importa a visão da urina. Posso acessar minhas configurações e dizer: quero adicionar outro botão. Posso clicar em Adicionar link e adicionar outro. Talvez eu chame isso de minha loja. Só porque vamos chamar isso de minha loja. Ok. Facilita. Eu sei que isso significa, você sabe, agora eu posso simplesmente pegar aquele item de link, copiar e colar, isso é exatamente a mesma coisa, mas o fluxo de trabalho tornou tudo ainda mais fácil. Agora, sem habilidades muito legais, sabemos que há uma rápida divisão em torno desses caras mantendo-os todos juntos. E outra coisa legal que eles incorporaram a isso para nós é que vamos pré-visualizar o comando Shift P. Control Shift P é quando eu desço. Você pode ver aqui, vou adicionar meu logotipo em um segundo. Ok, quando eu chego aqui, ele se converte para o menu de hambúrguer, que é um pouco cedo. Ok, há muito espaço para todas essas coisas. Eu só tenho quatro botões. Então, o que você pode fazer é dizer apenas as configurações da barra de navegação . Vamos lá. Quero que o ícone do menu seja ativado para um fluxo turbulento. Agora, vamos ativá-lo no telefone horizontal e inferior, ou apenas no celular, dependendo de quantos botões você tem. Ok, então agora, quando eu visualizo, eu vou para o tablet. Ele permanece lá. Mas quando eu começo a usar o Landscape Mobile, ele é ativado. Legal, obrigado, fluxo de trabalho. Há outras coisas que você pode mexer com K, brincar com a flexibilização. Não mexa com a flexibilização. Existem todos. O padrão foi bom. A Expo era só fazer uma enquanto você está aqui. Pronto? Ok. Aqui vamos nós. O que mais? O momento? Se eu quisesse tomar 2 s, quanto tempo deveria ser tão grande? Quantos milissegundos você se lembra? Você sabe. Entenderam bem? 2000. Ok. E isso vai levar muito tempo. Vamos dar uma prévia. Ok, adicione seu próprio efeito sonoro. Então, vamos dar uma olhada em entrar lá e quebrá-lo, consertá-lo. E digamos que queremos mudar o menu maior, alguém. Isso é interessante para essa configuração específica aqui, esse componente, se eu quiser isso e quiser estilizá-lo, ele pode ir até um desses, então ele realmente aparece. E então eu posso clicar nele. E é tratado como uma fonte. Estranhamente, os ícones são tratados como uma fonte. Eu posso dizer que você é de uma cor diferente. Ok, a cor da minha marca, que é sempre algum tipo de verde. Vai ficar mais escuro por aqui. Um contraste ganhando ouro. Vamos voltar às tampas da mesa. Vamos lá um pouco. Tudo isso é muito rápido e rápido, um pouco rápido e eu quero assistir novamente. Mas vou ir um pouco mais devagar agora e tentar entender como ficou no meu último projeto. Ok, onde estava? Aqui? Está aqui parecendo algo assim com esse tipo de botão. Vou fazer uma versão rápida porque quero mostrar agora como podemos aprimorar nossas habilidades. Para que pareça assim, mas não vou gastar muito tempo. Então, primeiro, eu tenho essa coisa de marca, o que é legal. Eu posso colocar um logotipo. Então, eu tenho um de antes. Ali está lá. Está em seus arquivos de exercícios. Você pode colocar qualquer logotipo que quiser. Ok, usamos isso mais cedo para nossos patrocinadores, para nosso primeiro site de fluxo na web que está lá. Agora, como faço para colocá-lo no centro? Você poderia fazer flexão. Você pode começar a flexionar ou dizer que na verdade, o logotipo tem algum preenchimento. Não há nada de errado com isso. Não há nada que você possa flexionar e fazer com que as crianças fiquem centradas. Ou você pode simplesmente fazer isso porque isso, em particular, esse navegador nunca vai ficar maior ou menor. Eu não quero que isso aconteça. Acho que é grande o suficiente. Não vai se expandir e se contrair. Ok, vamos estilizar esses botões. Então, o que eu vou fazer é adicionar uma classe chamada button nav. E eu vou fazer o quê? Vamos começar com a cor de fundo. Vou escolher uma cor aleatória, talvez aquele verde escuro. me lembro o que é. Eles têm. Os carrapatos serão a topografia será branca. Vou escolher uma fonte para todos os meus botões. Agora eu sempre clico e começo a fazer coisas e marcam meu estilo. Agora, eu selecionei o corpo e sei que era isso que eu estava prestes a começar a fazer. Coloque-o novamente no botão. E você vai ser uma fonte, Droid Sans, não vai torná-la menor. E eu quero brincar com o espaçamento. Estou indo um pouco rápido agora porque estamos usando habilidades que já sabemos que vou fazer isso de forma menor. Segurando a tecla Option em um Mac, tecla alt em um PC e arrastando para cima, podemos obter isso. Eu entendo por que fazer isso? Esse é um ponto interessante. Você pode ver isso com a confirmação de 20 de 2020, ok. Isso faz parte do acordo com o uso de alguns dos componentes, mesmo que eu não possa clicar, isso não é. Normalmente, posso clicar nele com a tecla Shift e ele dirá de onde vem seus estilos. Está escondendo essas esposas de nós. Está prevendo que essa coisa a quebre, dizendo: eu fiz de você um componente de navegação ou componente Navbar. E há muitas coisas que eu não vou te mostrar, então você não pode quebrá-las. Ali. Coisas incríveis de que gostamos. Eu quero entrar lá. Eu quero mudar isso. Bem, eu só vou ter que ignorá-lo. Eu posso ignorá-lo, o que é legal. Eu sei que com essa barra de navegação, há coisas acontecendo em segundo plano com flutuadores e todo tipo de coisas boas de posicionamento absoluto. Mas você não consegue encontrá-lo no Webflow, a saída no final. Mas mantendo-o simples e agradável para nós. E eu quero colocar cantos arredondados. Você. Quer empurrar de cima para baixo. Novamente, eu poderia usar o Flexbox, mas na verdade vou dizer todos os botões. Tenha um gerente de topo. Aqui vamos nós. É uma edição para todos eles. Vamos usar nossos atalhos especiais Command ou Control Return e, em seguida, digitar NAV, descendo alguns dos meus teclados. Agora eu preciso ir para o próximo botão. Eu poderia ir aqui e clicar nele. Mas lembre-se de que há um atalho no caminho certo. Lembra como você escolhe irmãos cima, para baixo, para a esquerda ou para a direita? Um deles acertou tudo para a direita e para a esquerda. Eu te dei novamente o Command Return. Eu posso dizer que Nav pegou um par, vá para o próximo. É bom quando você usa alguns atalhos juntos. O nome dele também, provavelmente precisará de algum espaçamento. Ok. Vou pegar a margem esquerda. Você pode ir. Bom. No auge disso, na verdade, descobri que o botão era a coisa que o mantinha aberto. Então, o que eu vou dizer é barra de navegação, você tem uma altura mínima, todos os pixels prontos para baixo, para baixo. Clicando lá, estou segurando Shift e usando minhas setas para cima e para baixo. Vamos, isso bastará. Não é muito bonito. Então, nós o estilizamos, usando algumas de nossas classes. Você pode ter usado uma classe de combinação e agora ela vai quebrar. Vamos fazer uma prévia. Ok, e eu vou ir até essa vista e meu Deus, para que eu possa ir. Oh, você pensa: “Sim, vamos até eles e tudo bem. Ok. Na área de trabalho. Ok. Ish e aquele aqui, eu não quero fazer isso e eu não chego até eles. Como você os muda? Porque, você sabe, e eu sei que eu posso simplesmente ir até essa visão e mudá-la de agora para baixo. Você diz: “Bem, por que eu não vejo isso? Clique na barra de navegação e clique no COG ou acesse suas configurações. E você pode dizer, mostre. Essa coisa aqui. Me confundiu por um tempo, tipo, o que ele faz quando você é um desktop? Não faz. Oh, na verdade, vamos aqui. E quando você está no desktop, ele faz algumas coisas estranhas. Ok? O que está fazendo é apenas mostrar você aqui. Não o liga para sempre, só enquanto você está na pré-visualização. E agora eu posso estilizá-lo porque se eu for pré-visualizar o site, ele desaparecerá. Só está lá enquanto você pode trabalhar nele. Então, é meio que eles são temporalmente. Então eu mostro, mas vai desligar. Então, agora eu posso dizer que, na verdade, quando eu estou neste, eu vou para os botões de navegação para fazer outras coisas. Vai funcionar, vai ficar da mesma cor. Vou anular o preenchimento. Primeiro de tudo, vou usar os cantos arredondados. Adeus, zero. Em termos de preenchimento, vou configurá-lo para que seja bonito, grande e clicável em um dispositivo móvel, a fonte terá que ficar maior. Vai ser centrado, não precisa ser nenhuma dessas coisas, apenas o que eu decidi. Ok. 13 na parte superior e 13 na parte inferior. Ok. E é feio. E está tudo bem, eu acho que não há problema em criar algoritmos , se você souber, está tudo bem. Mas acho que o objetivo era mostrar como fazer e o quão legal é esse componente de navegação. Porque podemos dizer que, na verdade, barra de navegação, vamos escondê-la. E se você quiser estilizá-lo, mostrá-lo temporariamente enquanto eu posso estilizá-lo, vou me livrar de uma última coisa antes de visualizá-lo. Eu queria definir a margem para zero. Há um pouco de margem saindo do lado. Parece estar fazendo isso. E agora vou visualizá-lo. E ele vai e volta, parece reiniciá-lo. Agora, aí está meu lindo cardápio. Ok, foi um pouco turbulento. Eu me senti assim. Mas acho que está mostrando caminho atrás, no início, onde nós, por que não arrastamos tudo para a página e criamos esses componentes do aplicativo. É porque quando chegamos a coisas em que precisamos saber o que são classes e o que todas essas configurações aqui no meu estilo, quero dizer, o uso faz e como substituí-las. E o que significa azul e amarelo significa rho se torna um pouco mais natural. Podemos começar a usar modelos e outros componentes pré-construídos e ser os chefes deles. Faça com que eles façam o que queremos. Tudo bem, isso é estilizar o componente Navbar pré-construído no Webflow. 60. Como adicionar e conectar páginas no Webflow: Olá a todos. Neste vídeo, veremos esse painel de Páginas. Ok, temos uma página inicial. Eu vou te mostrar como criar novas páginas. Pastas, crie páginas que são rascunhos para que não sejam realmente publicadas enquanto você estiver trabalhando nelas. Discutiremos páginas de utilitários as conectaremos com um pouco de navegação. Não vai ser muito chique. Ok, aqui está nossa página de contato de volta à página inicial. E duas são uma página de portfólio lindamente projetada. Tudo bem, vamos começar a fazer. Tudo bem, para criar uma página, há uma guia Páginas, ou você pode clicar nela aqui. Depende de você. Ambos abrem a mesma coisa. Toda a tecla P é ativada e desativada. E já recebemos uma página, uma página estática, que será importante mais tarde, quando começarmos a criar páginas CMOS dinâmicas. No momento, precisamos de outra página estática que signifique que não funciona muito. Não é extraído de um banco de dados. E se você ainda não sabe o que quero dizer, abordaremos isso mais tarde. Então, eu preciso de outra página. Tenho o hábito de clicar nesse botão primeiro, não em uma pasta. Eu quero uma nova página. Então clique nesse, forneça nossa página e chamado Fale Conosco é um nome muito comum para a página de contato. A lesma aqui é, eu acho, razoavelmente importante. Você pode ver que essa será a nossa barra de domínio, entre em contato conosco. Vamos, eles serão o que vai aparecer nos navegadores das pessoas, abordarão algumas dessas configurações de SEO mais tarde e a proteção por senha mais tarde também. Mas, no momento, vamos dar um nome a ele. Vamos clicar em Criar. E que meu amigo é uma página totalmente nova, não faz muita coisa e desiste e alterne entre nossa página inicial agora. E eu entrarei em contato conosco pela página. Se eu for à minha página inicial e visualizar este site, não teremos como chegar lá. Ok, não há absolutamente nenhuma maneira de sairmos do modo de visualização e além da nossa página inicial e tornar um desses botões pelo menos clicável. Então, vamos fazer isso. Vamos fazer esse grande gigante aqui. Quando ele é clicado porque é um botão, ele tem uma pequena engrenagem aqui que diz Configurações de link. Você pode clicar nessa ou, com ela selecionada, ir até esta engrenagem que está aqui. Há mais nessa opção. No entanto, não importa qual deles você usa. Vamos dar uma olhada nesse. É bonito e organizado, então o padrão é esse URL. Este é o nosso link para outro site. Se você quiser acessar esta página, clique em nós. A próxima é chamada de página. Qual página? Facilmente, já está aqui na nossa página de contato. Tudo bem, vamos dar uma prévia agora. Então, Command Shift P ou Control Shift P, uma página pode fazer uma pergunta e eu vou para a grande e velha página em branco. Lá vamos nós. Conecte-o. Então, vou voltar para nossa página inicial. Eu vou fazer a mesma coisa por esse cara. Ele também se conecta. Então vá para a página e vá para a página Fale conosco. O problema é que, quando chego à página de contato, não há como voltar para casa. Então, o que vamos fazer é mover essa navegação para as duas páginas. Faremos isso do jeito do homem das cavernas, e depois, um pouco, mostrarei como fazer símbolos. Então, o jeito do homem das cavernas é clicar em toda essa seção chamada nav. Vamos copiá-lo. É mudar para minha página de contato e clicar em Colar. Isso vai dizer que você precisa selecionar um elemento. Só não sabe para onde ir. Então, basta clicar no corpo, clicar em colar e vai funcionar. Vamos voltar à nossa página inicial. Vamos fazer uma prévia. Vamos até aqui. Eu tenho algumas coisas. Este botão, se ele se conectar a si mesmo. Ok. Agora vou para a página Fale conosco, mas não temos como voltar para casa. Poderíamos adicionar um botão Início e muitas pessoas farão isso. O que vamos fazer é conectar o logotipo novamente. E esse é um tipo interessante de teste de usuário. Cade, olhe para seu público para ver, eu sei que muitos sites não têm mais um botão home, mas alguns deles têm. Depende do seu público, se ele precisa ser realmente explícito, como navegar neste site, ou se ele é muito experiente e sabe que você clica no logotipo para voltar à página inicial. Isso é para você dar o melhor de si para começar e, em seguida, fazer alguns testes com seus usuários para ver se eles podem ser feitos e não ficar presos. Então, vamos voltar para a prévia. Vamos voltar à nossa página inicial. Na verdade, vamos até nossa página de contato. Porque o que queremos fazer é clicar nesse logotipo. Se for apenas um logotipo antigo simples, como JPEG, PNG ou SVG. Na verdade, faremos isso em um cíclico porque temos carrapatos lá. Vamos fazer isso primeiro. Você tem algumas opções. Faremos uma opção no momento. Vou apenas selecionar tudo e vou embrulhar e mover. Fizemos hiperlinks muito antes do curso. Ele vai inserir um link. O problema é que vai ser assim. É azul, eu preciso estilizá-lo. Vamos ignorar isso por enquanto. Eu tenho o sublinhado. O que eu quero fazer é ir para a página e voltar para casa. Ok, e vamos dar uma prévia agora para que possamos visualizar esta página agora. Então Command Shift P, Control Shift P. Mas basta olhar para esse atalho. Mas está preso lá dentro. Então eu posso voltar para a página inicial. Posso acessar minha página de fazer uma pergunta ou minha página de contato e voltar novamente. Tudo bem, se for uma imagem, vamos fingir que é um logotipo de imagem como esse, homens bonitos. Com uma imagem. Precisamos agrupá-lo em algo chamado bloco de links. E, na verdade, vamos fazer isso juntos no próximo vídeo, vou fazer dele um vídeo especial porque há algumas coisas para discutir. Temos uma navegação básica. Talvez seja mais fácil simplesmente copiar e colar. E adicione outro botão inicial. Eu teria que embrulhar esses caras e um pouco de div para que eles ficassem desse lado. Mas aí está. Vamos entrar nessas páginas, mas mais. Então, essa aqui, crie uma nova pasta. Para que serve? É quando você quer se agrupar. Tipo, eu sei que vou ter muitas páginas de portfólio, ok, então eu tenho seis para começar. Eu pretendo ter 50 ou 100. Ok, então o que você faz é colocá-los em uma pasta para que não fiquem como essa enorme pilha aqui. Como qualquer tipo de gerenciamento de arquivos. Esse será chamado de meu portfólio, port folio. E tudo isso, você pode ver que é como um pequeno ícone de pasta. Agora posso criar a página que é meu web design para um clube de caiaque de veados. Este é o projeto que eu quero exibir no meu portfólio. Eu quero que ele entre na pasta principal do portfólio. Então, antes de prosseguir, eu também, quando clico em Criar, ele está realmente pronto. Se eu clicar em Criar e publicar em, digamos que estou publicando a página inicial, ela também publicará esse lado, esta página também, mesmo que eu não a tenha terminado. Então, se você tem um site ativo, as pessoas o estão usando no momento. Estou apenas publicando qualquer coisa porque ninguém está verificando isso. É, você sabe, não se classificou bem, provavelmente não se classificou de jeito nenhum. Mas você tem um site que está funcionando. Você provavelmente quer ir para Salvar como rascunho. Ok. E como eu fiz uma página exatamente como ela fez antes. Ok. Então, a diferença é que você pode ver lá a, está em uma pasta, e B, tem aquele pequeno ícone lá. Isso significa que estou trabalhando nisso, mas quando eu clico em Publicar, ele não vai sair até que eu esteja nessa página. E eu vou para essa pequena engrenagem aqui e digo, agora você está no palco para publicar, ok, isso significa apenas da próxima vez, não agora que não foi publicado. Só significa que da próxima vez que for encenado, pronto para começar. E da próxima vez eu clico em Publicar. Ok, ele vai sair para a Internet e outras pessoas poderão vê-lo. Mas no momento, obviamente , é uma má ideia porque não há nada nela. Talvez volte a ser um rascunho. Ok, vou fazer a mesma coisa e pegar minha chave P na página inicial, pegar essa navegação e copiá-la. Vou pegar meu pico, ir ao meu rascunho, clicar primeiro no corpo e clicar em Colar. E eu tenho uma página de portfólio. Não há nada nele. criar essas páginas à medida que avançamos. Mas com a estrutura funcionando, novamente, vou voltar para a dor, o pico, de volta para casa. Eu vou pegar esse botão quando for clicado para ir para, eu sei que esse é o tipo errado de projeto, mas ei **, quando ele vai para esta página de rascunho aqui, que é meu projeto de web design. Agora, quando eu o visualizo, ele pula para aquela página. Tudo bem, todas as coisas são páginas. Antes de prosseguirmos, isso está falando sobre esses dois aqui. Senha. Para sua conta gratuita. Você não tem permissão para usar a previsão de senha. Você precisa atualizar seu site para obter o momento nesta conta gratuita que estou usando para esta em particular. Sim, não podemos fazer isso, mas esta página de proteção por senha é, na verdade, deixe-me mostrar. Eu posso dizer esta página aqui. Na verdade, esta página aqui. Vá para a engrenagem que eu posso proteger com senha. Ok. Posso ativar isso se você quiser acessar esta página, talvez seja apenas para membros, algum tipo de dado confidencial. Eu posso ativar isso. Mas porque é a conta gratuita que eu precisava primeiro para ter o plano do site. Então, o que faz essa página? Essa é apenas a aparência e a sensação. Se você não gosta, vá, podemos mexer com isso. Eu posso adicionar um estilo a isso. Ok, então isso é exatamente o que parece quando alguém chega a esta página, você pode mudar isso para uma imagem diferente. Você pode mudar o texto, ok, é apenas um lugar para estilizá-lo. Vou deixar o meu como está com as quatro páginas de quatro páginas. Quatro ou quatro páginas é o que acontece se alguém clicar em um link em seu site e ele não for a lugar nenhum, o navegador procurará por uma página inteira e exibirá isso para ele. E é aqui que você pode ir e mudar novamente o estilo. Você pode ter mais informações úteis, talvez tenha um link para a página inicial. Muitas pessoas o instalarão páginas inteiras para ser meio divertido e engraçado. Mas, novamente, essa opção que estamos analisando, podemos estilizá-la. Tudo bem, página inicial. Sabemos o que é isso. Eu fiz uma página de contato conosco. Temos uma pasta para que possamos empilhar. Podemos acabar com dez, 20 ou 30 páginas aqui para nosso portfólio. E essas são apenas páginas utilitárias que podemos estilizar mais tarde no curso. Vamos criar páginas perfeitas e criar páginas de comércio eletrônico muito sofisticadas para o seu projeto. Vá e crie uma página de contato e uma pasta de portfólio. E uma de suas páginas não importa o que seja , porque vamos começar a carregá-la com coisas diferentes. Isso era para ser o fim. Estou de volta do futuro porque esqueci de te dizer uma coisa. Digamos que você queira duplicar uma página porque precisará de muitas páginas de portfólio, que eu percebi mais tarde no curso. E eu não mostrei nas páginas abaixo como acessar o Portfólio. Vá até a pequena engrenagem na parte superior, não na pasta, desculpe, na própria página que você deseja duplicar. Então vá até a engrenagem, depois aquela ali, duplique a página. Você pode fazer um segundo. Ok, então vamos criar uma segunda página de portfólio chamada segunda página de portfólio porque não consigo pensar em nada agora. Você entendeu a ideia. Tudo bem, isso também é duplicar páginas. E isso encerrará este vídeo, todo tipo de material de página amontoado aqui, além de um pequeno bônus. Vamos chamar isso de bônus, apenas algo que eu esqueci. Tudo bem, próximo vídeo. 62. Como criar símbolos e substituições no Webflow: Olá a todos. Neste vídeo, veremos símbolos e instâncias, símbolos, como esta pequena guia aqui podemos, vamos criar uma navegação. Acabamos de adicioná-lo à nossa página. E o legal é que, é um belo bloco reutilizável. Mas se eu entrar nele e excluir coisas, ele vai sair de todas as páginas que eu tenho, a aparência da instância, ele saiu dessa página para adicionar coisas, copiar e colar. Agora, volte para a página inicial. Todos eles seguem. O líder irá um pouco mais longe e criará essas cartas na parte inferior , todas conectadas, mas podemos torná-las únicas substituindo seus símbolos. É super elegante, ótimo para coisas em seu projeto de web design que você pode ter muitas coisas vivas como este cartão aqui. Você pode ter centenas deles, podem ser listas de produtos, milhares deles, todos controlados por um símbolo. Tudo bem, deixe-me mostrar como fazer um, tudo bem, fazer um símbolo. E vou trabalhar na minha página de contato, página inicial, porque essa é a página em que passei mais tempo em nosso problema no momento, certo? Se eu copiar e colar esse e outro botão, esqueça que está no meio. E se eu for à minha página inicial, eles não serão atualizados. Então é isso que eu vou fazer. Vou até minha página de contato. Deixe-me me livrar desse cara. Vou dizer toda essa seção de navegação. Eu vou te converter. Deixe-me ir ao meu painel de símbolos. Na segunda vez, vou criar um novo símbolo. Eu vou dar um nome a ele. Crie o símbolo. E é isso. Fizemos um símbolo. Na verdade, estamos dentro do símbolo agora. Nós podemos voltar a sair disso. Ok, isso agora é o que é chamado de instância do símbolo. Agora vamos para minha página inicial. Ok? E esse pedaço no topo aqui chamado nervo da seção de navegação é inútil. Ok, eu vou deletá-lo. E o que eu quero fazer é pegar meu símbolo e arrastar uma instância dele, apenas significa que esse é o cara principal que controla todos eles. E eu posso arrastar cópias deles, colocá-los no lugar certo, posso usar isso. Ele também é verde. E o legal disso é que agora, se eu entrar e editar meu símbolo, ok? E eu digo você, vocês são dois. Acontece novamente em nossa página de contato. Eventualmente. Lá vamos nós. Portanto, ele controla todas as instâncias desse símbolo. Essa linguagem é muito importante. Você pode ver aqui que os pequenos ícones são importantes, o verde é importante. Então você sabe, você está vendo símbolos. Talvez você esteja vendo o documento de outra pessoa ou um modelo que você comprou ou clonou, roubou ou encontrou na rua. Legal. Vamos colocá-lo em nossa última página. Na verdade, temos os dois. Novamente. Você se foi, símbolo. Arraste um anúncio. Aqui vamos nós. E eu tenho mais uma página para fazer, que não vou fazer agora, que provavelmente voltará e me assombrará mais tarde, quando você estiver editando, montando, todo o resto meio que fica acinzentado e você está ajustando cada coisa única. Mas há momentos em que, vamos dar uma olhada em nossa página inicial. Como se essas coisas aqui fossem razoavelmente boas candidatas para um símbolo. Ok, há apenas seis na página inicial. Eu iria e faria isso? Eu provavelmente faria 50% do tempo. Ok. Mas se fosse um item em uma loja, exibisse o preço e os detalhes do produto , sim, porque você pode acabar com centenas ou milhares deles. Seis deles, não é um grande drama atualizar todos os seis até que eu descubra que é a maldição. Eu digo não, não precisa ser um símbolo. E isso instantaneamente faz com que o universo invente uma razão pela qual eu preciso de 1.000 deles. Mas digamos que eu queira que esse seja nosso símbolo porque eu quero reutilizá-lo, mas todos eles são únicos. Caso eu não queira que eles sejam todos iguais à minha navegação. Então, como fazemos isso? Primeiro de tudo, você seleciona tudo. Então, vou clicar dentro, usar minha seta para cima para pegar o cartão inteiro. Na verdade, qual deles devemos fazer? Vou fazer essa. Ok. Vou pegar toda a miniatura do cartão que eu fiz. Vá para meus símbolos. Deixe-me criar um novo símbolo. Você pode realmente clicar com o botão direito do mouse, se clicar com o botão direito do mouse neste nome no topo aqui, e você pode convertê-lo em um símbolo, criará um símbolo. Vou lhe dar um nome. Esse será meu cartão. É um cartão de cola, miniatura. Agora. Tudo bem, e isso meio que funciona. Vou copiá-lo, colar, colar. Não, eu não sou. Uma das minhas miniaturas recortadas conflitantes. Copie, cole, cole. Por que isso não estava funcionando? É porque eu estava dentro daqui e não estava realmente copiando a coisa toda. Acho que acabei de selecionar isso. Então, vou publicar minha edição, o símbolo real. Ok, agora eu selecionei a instância do símbolo. E o que eu quero é 123456. Ok, e esse aqui, me desculpe. Isso vai funcionar? Vamos acabar com você. Tchau. Ok. Então, eu tenho tudo isso e é meio bom porque significa que eu posso continuar e dizer, na verdade, incrível, eu vou remover isso por aí. Aqui. Você vai. Fácil para minhas milhares na página, mas também quero tornar essas coisas únicas junto com o texto. Como eu faço isso? Então, a primeira coisa é que você precisa encontrar seu símbolo. É a coisa verde. Lá está, entre nele para editá-lo, clique duas vezes nele para selecionar o que você deseja alterar. Como se isso precisasse ser único em cada um deles. E você acessa suas configurações aqui. Portanto, os estilos não vão para a engrenagem de configurações. E você pode ver aqui, você está procurando por essas coisas, as coisas roxas. Nesse caso, vou dizer Você está vinculado a um campo K e eu vou criar esse campo. Vou chamá-la de meu toque miniatura, criar e vincular. O que aconteceu em roxo? Isso é o que aconteceu. O que mais aconteceu? Isso saiu disso. Então, não dentro do, se você quiser editar tudo, você entra nele. Se você quisesse agora, exemplo, mudar pequenos pedaços dessas instâncias, qualquer uma delas agora, porque todas são instâncias desse único símbolo. Se eu clicar neste e acessar as configurações, você verá: você pode ver substituições instantâneas disso? É aquela coisa que acabei de fazer. Isso não estava lá. Há um segundo, chamamos isso de miniatura e eu posso substituir os carrapatos aqui. E essa foi, não me lembro. Este é um projeto de web design colorido. Ok, agora as instâncias são únicas, mas se eu mudar alguma coisa, posso entrar em qualquer uma dessas , não importa qual seja. Mas eu fisicamente posso até mesmo fazer um movimento e todos eles mudam. Gua, os símbolos são incríveis. Vamos fazer o mesmo com essa imagem aqui. Vou selecionar nesta imagem a mesma coisa procurando o ponto roxo onde quer que esteja, ok, fique de olho nele. Então, isso é algo que pode ser editado. Vamos criar um novo campo. Essa será chamada talvez imagem, mas apenas imagem. Saia da minha edição do meu símbolo e volte para a instância. E lembre-se, esse primeiro está bem. O segundo, agora em configurações, tem duas substituições de coisas para a imagem. Além disso, a miniatura contém duas coisas que eu posso te dar, e essa é essa. Vamos fazer mais uma coisa que podemos fazer. Eu quero mudar esse botão para que nem todos estejam indo para o mesmo lugar porque no momento em que eu mudo um, todos eles vão mudar. Então eu quero dizer isso, o símbolo fica dentro dele. Você percebe que voltar ao original meio que limpa as substituições. Agora esse botão aqui, a mesma coisa. Eu clico nele e vou dizer que você adiciona o texto. Isso precisa mudar? Talvez isso aconteça. A minha não é porque acho que estou usando apenas a palavra visualização, mas o link definitivamente usa. Ok, então eu vou dizer um novo campo e eu chamo isso, meu link de botão está bom. Clique em Criar. E é isso. Agora, volte para fora. Tenho que me acostumar a gostar do que está dentro dela para mudar as coisas, todas elas, e depois sair e ser acenado antigo modo de designer regular para mudar a instância disso. Então, neste caso, eu posso clicar nele, apenas a coisa toda, ok, e eu tenho um monte de coisas. Eu posso mudar a imagem, a miniatura pressionando e agora o link do botão. E o que eu vou dizer é uma página e esta vai para a página do meu portfólio, símbolos. Então, fique de olho nas coisas que são roxas, fique de olho nas coisas verdes para outras pessoas, símbolos que você pode estar recebendo do projeto de outra pessoa e há vários símbolos lá dentro. Você pode desvincular símbolos que dizem que há um momento em que você quer, por exemplo, Let's where we are in the homepage. Então, vai entrar no nosso símbolo. Ok, vou mudar esse botão para dizer “casa”. Os clientes voltaram e disseram: “ Precisamos do botão home”. Ninguém sabe como clicar nisso. Ou você está testando voltou e disse: Sim, ninguém sabe como chegar casa ou pelo menos metade dos usuários não. Ok, então eu tenho essa parte. E isso é legal porque nessas outras páginas, faz sentido ter o botão home e você vai e volta para casa. Todas essas outras páginas. Muito útil para uma página. Eu não colei isso neste. Eu fiz casas CC importantes em todas essas outras páginas. Mas o cliente volta e diz: por que há um botão home na página inicial? E você gosta, É só porque é um símbolo e todas as páginas e eu gosto, livrar disso e dizer, Ok, então o que vamos fazer é separá-lo. Então, vamos clicar com o botão direito nele. E há uma opção que diz desvincular instância, o verde desapareceu. Agora é algo que posso dizer excluir e não está afetando mais nada. Posso voltar para essas outras páginas, como meu contato conosco. Ainda está lá, ainda está em todas as outras páginas. Eu tenho essa instância. O único problema é que eu, como designer, agora preciso lembrar que, quando faço alterações na navegação , preciso fazer isso no símbolo real. E se eu fizer alterações, digamos que eu mude a cor dessa, preciso voltar e atualizar a página inicial também porque ela é separada de todo o resto. Mas é uma compensação boa o suficiente porque isso aparece nas minhas mil páginas. Só há uma página inicial com a qual eu posso conviver. A única coisa complicada agora com símbolos é que, se eu quiser mudar meu texto, ok? Você meio que clica duas vezes nele. Clique nele. Tipo, como faço para mudar o texto? Porque nós fizemos isso. Como os chamamos de substituições. Podemos simplesmente mudar isso aqui. Temos que sair e selecionar isso aqui. E a trocamos aqui de agora em diante, o que é bom, desde que você saiba onde está. Mas isso pode ser um pouco complicado porque você se perde. Você pode abrir o projeto de outra pessoa e clicar duas vezes nas coisas e dizer: por que isso está mudando? O que está acontecendo? Agora, você sabe, são pedaços roxos nesses pedaços verdes. Os bits verdes controlam tudo. Os bits roxos são substituições e você fará isso nas configurações aqui. Incrível. Tudo bem, o que mais temos isso? Está certo? Esse foi o fim falso. Eu disse que simplesmente ignoraria isso e arrumaria tudo. Isso só arruma tudo. Você provavelmente sabe como vou entrar na minha edição, meu símbolo, ok, tudo bem. Eu vou fazer isso por eles. Esses, o que está fazendo com que ele vá para o centro? Você se lembra de que nosso div nav, o que envolve tudo, está configurado para flexionar. E temos essa opção aqui, que funcionou muito bem quando há apenas duas coisas, ok? Mas agora não consigo realmente fazer com que funcione para o que eu quero fazer. Então, como fazemos isso? Eu ainda vou ter empurrado totalmente para a esquerda e para a direita. Ok. Portanto, lembre-se de que funcionou muito bem para duas coisas. Então, se eu colocar essas duas coisas em um rapper, voltará a ser apenas duas coisas, o invólucro mais esse logotipo aqui. Vamos tentar fazer isso. Uma chave, toda a magia selvagem dentro da minha navegação. Todo o resto está acinzentado. E eu coloquei isso lá. Eu tenho uma universidade e coloquei você lá. Agora funciona de forma fácil. Eu preciso dar um nome a isso? Eu provavelmente poderia, mas eu não vou fazer isso , precisa de uma aula? Não no momento. Precisamos de espaço? Sim, nós temos. Como vamos fazer isso? Deixe-me pensar sobre isso. Eu tenho um botão pequeno. Eu tenho uma margem esquerda? Eu não tenho. Eu tenho uma margem certa? Como não temos nenhum desses? Vou fazer uma margem, certo? Onde eu vou fazer isso? Eu vou fazer isso com uma tag div que não tem classes aplicadas a ela. Seu único trabalho é a margem restante. E eu vou fazer disso uma pequena suposição, espero que esteja certo, porque serão meus 16. Ótimo, esse, vai ser a margem esquerda, ok, e vai ser 16. E espero que nos livremos disso agora. Eu vou poder aplicá-la porque é global, porque ela meio que a criou sozinha. Margem esquerda pequena, Ron, uma, aquela que precisa levantar e levantar pequena. Isso bastará. Lá vamos nós. Agora podemos ver você no próximo vídeo. 63. Como fazer um formulário de contato no Webflow: Olá a todos. Neste vídeo, faremos esse formulário. Tem campos nomeados, e-mails, menus suspensos, essas marcas de seleção, e eu vou te mostrar como enviá-lo e o que acontece com ele depois. Ou pelo menos, aí está. Isso acaba no meu e-mail. Tudo bem, eles são super fáceis de fazer. Deixe-me mostrar como montar um. Tudo bem, vamos adicionar um formulário. Então eu vou me livrar disso. Isso é familiar. Vou adicionar um contêiner para eles entrarem e adicionarei uma seção para ele entrar . Você não precisa ter isso. Caso contrário, ele só vai aparecer para a esquerda. Esta será minha seção e este será o contato. E vou adicionar um pouco de margem na parte superior para que fique presa na parte superior. E tudo o que fazemos é ir para Adicionar e, em seguida, percorremos dois formulários. Há uma seção inteira aqui. Você pode ver isso? OK. E todos esses são componentes individuais de um formulário. Esse é um grande pedaço disso, e provavelmente é um bom lugar para parar. Vou jogá-lo dentro da minha seção e pronto. Você está pronto para ir. Vamos dar uma prévia. Eu posso digitar aqui. Você pode ver que está pré-preenchendo. Minhas informações desfocadas, nome, e-mail, mais informações desfocadas e eu clico em Enviar. Agora diz, por favor, preencha este campo que é obrigatório. Então, deixe-me preencher isso. Ok, então temos alguns formulários que ainda funcionam bem. Você tem que publicar seu site para que isso funcione. Eu posso fazer isso. Ok, saiu daqui. Eu vou publicar um domínio publicado. Agora. Podemos visualizar o modo, mas funcionará se usarmos as versões ao vivo, deu uma olhada. Tudo bem, agora eu clico em enviar e formulários do Magic Man estavam pintando um botão, tentando fazê-los no meu curso de web design. Se você fez meus fundamentos da web, um pouco é complicado, alguém tem que lidar com isso, e é isso que o Webflow está fazendo. Então, o que acontece agora? Para onde isso vai? Vamos dar uma olhada. Então, de volta ao Webflow, há alguns lugares onde você pode encontrá-lo. Uma delas está nas configurações do projeto para este site específico. OK. Há as configurações do projeto. Então esse é o portfólio de Dan. Já estivemos em alguns desses. OK. É este aqui que forma muitas informações aqui. importante aqui é onde esse endereço de e-mail vai passar pela cabeça para o meu endereço de e-mail embaçado. Mas logo na parte inferior desta página, você pode ver que há envio do meu formulário ou aqui eu posso lê-lo aqui. Eu posso baixar um CSV de alguma forma ou ele está lá? É. O grande botão preto. Mas também. Deixe-me verificar meu e-mail. Tudo bem, então eu estou no meu endereço de e-mail e aí está. Recebi um formulário enviado por Jason. A partir do formulário, esse é o nome do formulário deste site, caso você esteja gerenciando mais de um. Você também notará que há uma parte do meu site gratuito. Eu só recebo um dos 50 deste mês. OK. E é como se no início do mês, no final do mês, ele fosse reiniciado, mas teremos que fazer o upgrade para outro plano se você quiser que esse seja maior. Muito legal. Se você não sabia que isso pode ser muito complicado configurar seu próprio servidor de e-mail ou pelo menos um servidor de encaminhamento , pode ser complicado. Vamos fazer um pouco mais. Vou voltar para o designer. Eu poderia voltar ao meu painel e depois criar um look direto daqui. Vá para minha página de contato. Vamos adicionar mais algumas partes diferentes a ele. Então vá para o ED, desça até os diferentes formulários e tudo o que você precisa fazer é arrastá-lo para dentro deste Form Wrapper. Você pode ver que eles são meio que ********. Eu vou te mostrar em um segundo. Ok, então essa é a coisa toda. Não preciso de outro desses. O que eu quero é que eu quero outro campo. Então eu vou arrastá-lo até lá. E este será como um número de telefone. Então, o que eu quero fazer é dar um rótulo também. Há meio que duas partes. Há esse rótulo de campo, você vê o nome lá e, em seguida há o campo de texto real. Então, eu editei outro TextField. Vamos adicionar outro. É fechar esses. Eu vou para, então não precisávamos continuar rolando para baixo para ver este vídeo. Pelo menos. Não quero que o rótulo fique um pouco acima dele. E esse rótulo dirá que você notará que este tem algum texto de espaço reservado, mas esse também não o desativa. Você pode entrar aqui e dizer um e-mail de espaço reservado. Aqui vamos nós. Este aqui precisa de um texto de espaço reservado melhor porque diz apenas texto de amostra. Talvez você queira sugerir um número internacional. OK. Não sei se isso é um número. Pode ser um número de celular na Irlanda, como se tivesse muitos dígitos e você entendesse. Outra coisa a lembrar ao adicionar essas coisas, especialmente esses campos, é enviar um e-mail para você ver o e-mail. Você pode ver aqui que diz: Onde está? Diz que o nome é igual a Jason Bourne. O e-mail é igual a isso porque nós mesmos o adicionamos, não foi adicionado, é chamado de campo. Então, eu vou receber um e-mail que vai chegar dizendo campo é igual ao número de telefone. Então, vou dizer telefone. Quando eu receber meu e-mail, será um pouco mais fácil entender para mim como destinatário. O usuário do site nunca verá essa pequena opção aqui. A outra é: é necessário? Ok, você pode ativar e desativar isso por padrão. Este e-mail foi ativado pelo fluxo de trabalho. Você pode desligá-lo se não se importar. Você sabe qual deles você recebe? Vamos dar uma olhada em talvez mais um ou dois. Eu vou até Ed, acessar meus formulários, tomar uma área é bastante útil. Vou arrastar isso aqui. Isso são blocos de textos. Então, o campo é apenas uma linha. Agora, a área que ocupa pode ser considerada, arraste-a para baixo. Ele ocupa uma área, pode ter várias linhas nele. Então, este vai, eu também vou adicionar um rótulo de campo. Então, se você colocar boo aqui está lá, e esta será minha pergunta. Mais informações. Ok? Vou dizer que, em vez de amostras de carrapatos, vou dizer algo lá dentro. Não quero que ela regrave isso. Vamos visualizá-lo. Alguém aqui pode começar a digitar e clicar em retornar ao ponto final do banco de dados, enquanto este é apenas um texto de amoreira de uma única linha. Tudo bem, vamos fazer mais um juntos. Então, vamos ver como adicionar um formulário. Vamos dar uma olhada na caixa de seleção. Vou fazer mais dois. Mais dois. Portanto, as caixas de seleção geralmente estão nos dando permissão. Podemos tê-lo automaticamente. Início verificado. Sempre existe o truque. Você tem que reduzir k. Vamos adicionar, ah, menu suspenso, selecionar a opção aqui, arrastá-la para dentro. Ok, vai ficar aqui e vamos dizer que esse vai ser chamado. Lembre-se de que o nome não vai realmente passar para mim como criador do formulário. O usuário não o verá. Mas esse é meu, talvez meu método preferido. E temos esses campos aqui. Se eu deixar todos em branco, vamos dar uma olhada prévia. Ok, você tem a primeira, segunda e terceira escolha. Desative a pré-visualização. Vamos mudar isso. Não é possível desativar a pré-visualização. Por algum motivo, lá vamos nós. E o que eu quero? Vou fazer com que selecione um é interessante porque é como o padrão. Ok? É o que aparece lá. Vou deixar isso como selecione um. E, na verdade, vou chamá-lo outra coisa em vez de selecionar um, vou dizer que esse será o método de contato preferido. O que eu poderia fazer é usar isso também como um rótulo. Ok, minhas opções serão a primeira escolha. Vai ser divertido. O valor aqui, você , provavelmente só precisa ser divertido. Vamos dar uma olhada no outro lado , porque vai dizer eu preferia que eu fosse igual a telefone, igual ao valor do telefone, o que é legal. Ok, vamos fazer o último. Este aqui é que eles podem escolher se pode ser um e-mail. OK. E só vai voltar como e-mail. Algo mais? Quero remover o último porque não preciso, não é obrigatório. Vamos dar a ele um método de contato prévio. Aqui está, telefone ou e-mail. Provavelmente precisa de um título como o resto deles , porque esse tipo de coisa é difícil de saber. Parece que estamos fazendo algo com o e-mail lá. Coloque na etiqueta. Lembre-se de que esses rótulos não fazem nada. Eles não gostam de blocos de texto que as pessoas possam ler. Então você diz, é um título terrível. Tão grande, mas vamos testar tudo isso. Eu vou ter que publicar o domínio selecionado. Eu poderia abri-lo novamente, mas já está aberto por aqui. Então, o que precisamos fazer é redefinir esta página para obter todas as informações extras. Eu vou preenchê-lo. OK. Normalmente, não sei se Jason Bourne não quer seu boletim informativo e quero ser contatado por e-mail. Envie, preencha este campo. Eu fiz isso ser obrigatório. Tudo bem, agora vamos fazer isso. Tudo bem, vamos ver o que acontece no lado do e-mail. Tudo bem, então temos todos os nossos campos. Nome é igual a Jason, e-mail, número de telefone, campo, veja, eu esqueci de nomeá-lo. É aqui que você precisa ir e verificar isso. OK. Então isso deve ser o que dizemos? Mais informações? A caixa de seleção é falsa. Outro nome de cama, estou fingindo que estou fazendo isso. Estou fingindo que estou fazendo isso de propósito, método preferido por e-mail. Esse é um lado amargo disso. Então, temos dois, temos esses dois. Vamos dar uma olhada aqui. Vamos dar uma olhada nesse. A caixa de seleção é O que foi? Caixa de seleção falsa. Então, há duas coisas. Não é caixa de seleção, vai ser boletim informativo, boletim informativo, inscrição. Lembre-se de que o usuário não vê isso. Isso é exatamente o que aparece no seu e-mail. E eu não acho que você possa mudar falsamente. Ou vai dizer verdadeiro ou falso. Tenho certeza de que podemos mudar isso. Você pode ser capaz de ir a algum lugar que eu não tenho, mas vai ser melhor. Vai dizer inscrição no boletim informativo, verdadeira ou falsa. OK. Isso ainda não é sim ou não, mas faz sentido. Este aqui, você pode ver este aqui, apenas diz, onde é o método preferido deles? Note que esse aqui que tem o problema, nós apenas o chamamos de campo. Eu vou dizer mais informações. Lá vamos nós. E isso esclarecerá esses dois problemas. Tudo bem, isso é porque adicionar um formulário parece um pouco chato. Então, vamos ver o próximo vídeo e estilizá-lo. Mas, desde que você continue adicionando esses elementos dentro do Bloco de Formulário, tudo bem, eles serão passados para o Webflow. Quem? Webflow o enviará por e-mail ou você poderá acessá-lo por meio das configurações do projeto e nos formulários. Mas se isso tornar o fluxo de trabalho agradável e fácil, tudo bem, para o próximo vídeo. 64. Como estilo um formulário em Webflow: Olá. Neste vídeo, veremos como tirar essa espuma chata. Esse Webflow nos dá dois, que o torna uma forma um pouco menos chata. Vamos estilizar esses campos. Olha, há um forro preto do lado de fora, sem linha preta, chique. Está dividido nessas diferentes colunas. Alguns deles se espalham por eles, outros não. Extremamente chique. Oh, veja nosso botão chique. Nós nos livramos dos rótulos. Temos um texto de espaço reservado no meio. Mostrarei aqui como fazer com que essa grade seja dividida de forma diferente em dispositivos diferentes, para que ela se empilhe bem em tamanhos de dispositivos diferentes. E mostrarei como encontrar essa mensagem que surge quando alguém termina de enviar um e-mail, a notificação de sucesso, e tem um estilo que a deixará rosa. Tudo bem, vamos entrar. Vamos estilizar sua forma. Ok, a primeira coisa é que eu quero, digamos que eu queira estilizar todos esses campos, cada um deles. Então, eles precisam da mesma classe aplicada a eles. No momento em que não há nenhuma aula aplicada a eles. Então eu poderia dar uma aula. Eu poderia dizer que este é o meu campo, o título pode ir e estilizar. Um truque com o Webflow é que aprendemos por engano é que, se eu esquecer de dar a ele um nome de classe, ele apenas lhe dará um nome de classe sozinho. Muitas vezes, ele usa o que está aqui. E, na verdade, isso é muito útil. Então, se eu não der um nome de classe, ele precisa de um. Se eu disser que realmente preciso que seja o peso da fonte normal. Você pode ver que diz tudo automaticamente faz de você um nome de classe, rótulo de campo de tribunal. E, na verdade, para mim, esse é um bom caminho de volta no início do curso. Isso não foi útil porque realmente não sabíamos que o que estamos fazendo nessas aulas seria feito, mas agora estou usando isso ao meu alcance. Então, agora eu posso fazer rótulo de campo. Excelente, aplicado a todos eles, usará um atalho Command ou Control Return. Eu fui jogado com a seta para baixo. Aqui vamos nós. Lembre-se de que os irmãos podem usar a esquerda e a direita, mesmo que estejam cima e para baixo, e para cima vá para os pais. Então, quando estou aqui, posso usar minha seta para a direita descer em U desse jeito. Gosto de fazer esse tipo de coisa. Como se não tivesse a mão no mouse. Olha, amigo. Ok, legal. Então, vou aplicá-lo a todos eles. E, na verdade, o que vou fazer é dizer que não quero que nenhum de vocês sinta tabelas que não façam nada pelo formulário além de ajudar a descrever o que está por baixo. Mas eu posso fazer muito isso nesse texto de espaço reservado. Então, nome, talvez vá se você quiser estilizar o que entra nele, você pode ver a mesma coisa novamente. Eu quero essa coisa chamada campo de texto, que é diferente de antes, era nome do campo. Novamente, não vou dar um nome a ele porque ele simplesmente vai desaparecer, vou usá-lo para nome da classe, o que é perfeito. E digamos que eu queira as coisas que o usuário digita sejam dessa cor rosa quente. Pré-visualize. Ok, e agora se eu começar a digitar, vamos lá, é banco quente. Você pode estilizar os campos reais em si da maneira que quiser? Porque meu portfólio aqui tem linhas escuras ao redor do lado de fora. Se eu clicar nesse campo de texto, eu já tenho uma classe aplicada para ele, o que é legal. Ok, e eu vou ficar no comando. Vou clicar com a opção de clicar no Chevron Alt nas bordas de um PC. No momento em que há um estilo, é só que eles estão escondidos de nós. Mas podemos dizer que quero adicionar outro estilo no topo. E eu quero que seja, só vou mostrar que pode torná-lo grande e grosso. Não é o que eu quero. Mas você pode decidir que é isso que você quer fazer. Cantos arredondados. Cantos arredondados. Por que isso não está acontecendo com todos eles? Deixe-me fazer algo menos feio. Vou usar meu cinza. Ah, sim. Não é muito diferente. Por que todos eles são cegos. É porque, embora sejam chamados de campo de ticks, ele não tem a classe assume campo, campo aplicado. Como é chamado? Rótulo do campo, campo de marcas de notas. Então você coloca o campo de texto Seta para baixo, Comando ou Controle no campo de texto. Ok, vamos fazer o último. Tudo bem, e está derramado sobre meu rosa quente, o que eu realmente não queria. Desculpe, estou ajudando. Você vai limpar isso. Tudo bem, como podemos bloquear botão, botão. Comece como qualquer pessoa. Eu já tenho um botão de membro que criamos anteriormente. Lá vamos nós. E como estamos muito legais no início, lembre-se de que fizemos botões grandes ou removemos botões pequenos. Veja S, web design, construção de coisas no início do curso, onde isso nos leva para uma eternidade. Mas mais tarde, criamos ninjas de criação de sites com todas as nossas aulas legais, ou pelo menos aquelas aulas combinadas. E eles terão aulas globais porque lembre-se que queremos fazer o ensino secundário de cores. Tão bom, carrego o botão. Está tudo bem. O que acontece quando você o envia? Nós vimos isso antes. Quando você realmente o envia, houve tipo, Ei, obrigado por enviá-lo quando você chegar a isso. Então, você precisa clicar em qualquer um desses dois, seja no Bloco de Formulário ou no formulário que está dentro dele. Isso realmente não importa. Ok. E ir para suas configurações é uma opção aqui que diz o estado desse formulário, normal. Então, projetamos tudo isso. sucesso é o que aparece quando alguém faz isso e agora você escolhe a caneta, você pode decidir que vou usar minha cor secundária. Não, eu faço isso muitas vezes. Esse é o ID. Não usamos isso muito além de quando usamos no curso, esses IDs que usamos para fazer navegação, onde pulamos para as seções dos botões. E adicione nossa classe de cores. E vamos usar o plano de fundo do primário. Este aqui vai ser o estilo tick. Eu não tenho um. Eu posso pensar em uma que fizemos que usa cor secundária, sempre será boa. Aqui vamos nós. Assim, você pode resolver isso novamente no formulário em configurações e também pode fazer a era. Ok, instalei isso , mas na parte inferior. Vamos colocar tudo em uma grade porque, no momento, eu quero isso, este é o meu modelo Figma onde eu os tenho lado a lado. Como fazemos isso? Vamos usar uma grade porque as grades são boas, fáceis de usar e existem k bastante arregimentadas. Então eu vou usar a grade. vou me certificar de que entra no De qualquer forma, vou me certificar de que entra no meu formulário em algum lugar. Ok. Enquanto estiver dentro do formulário e do bloco de forma, tudo bem, funcionará porque basicamente a pegada formal, qualquer coisa que esteja dentro dessa espuma, cole qualquer coisa lá dentro. Ele tentará enviá-lo como uma opção de formulário. Então eu coloco minha grade aqui. E isso no momento eu tenho o quê, dois por dois, o que é bom. Então, eu vou pegar o nome um. Ok. Você pode pegar o e-mail? Vou pegar meu número de telefone um. E isso vai funcionar aqui para o meu quinto. Vai abranger os dois e isso vai deixar abranger os dois. Simplesmente não está na grade. Ainda funcionará. As grades só descem até aqui, o formulário não liga. Mas digamos que você faça aqui. Então, vamos colocar esse aí. E essa também vem depois desse cara. E ele acaba aqui e você pensa, Oh, posso fazer com que eles se espalhem por dentro desta grade? Esse é um bom tipo de explicação de crédito de bônus aqui, como parte dos formulários, há um truque secreto com as grades. Se você clicar na coisa dentro da grade, não importa o que seja, você pode realmente arrastá-la para a opção gastar na grade. Isso nos causará um pouco de tristeza quando começarmos a usar o celular, mas podemos consertá-lo. A próxima coisa é que nós, é um bom ponto. Se eu entrei no meu telefone porque estou projetando, algo deu errado e eu vou para as configurações e projeto minha urina normal instalei este vaso. Felizmente, nem tudo volta ao mesmo layout. Tudo bem? Então, há um boletim informativo aqui. Isso é um rótulo, mas ao contrário dos rótulos de campo, essa coisa precisa aparecer. Você pode ver o campo, esse campo da caixa de seleção, é uma unidade. Se você excluir uma parte dela, enlouquece o tipo de entrelaçamento. E eu poderia simplesmente deixar isso assim. Não há nada de errado com isso. Mas se você quiser isso dentro disso também, dentro da grade, não sei por que estou entregando isso à grade. Não precisa. Ok. Agora faz parte da grade. Aqui vamos nós. Coloque-o dentro da grade. Lá vamos nós. E vou deixar o botão fora dele. Caso contrário, eu vou ter que colocá-los dentro, meio que colocá-los dentro. E então eu vou ter que pegar esse cara e fazer com que eles se espalhem e os empurrem para baixo. E então esse cara está se espalhando muito. Em seguida, posso selecionar algumas opções dentro dessa opção de grade. Volte para as configurações da minha grade, onde uma criança parou de fazer coisas elásticas e vá para o lado. E se quisermos que este caia em sua própria cela? Esses dois faziam sentido, isso fazia sentido em sua própria linha, mas esse é meio pesado aqui. Então, o que eu posso fazer é simplesmente colocar um espaço reservado. Então eu pego uma etiqueta div. Então, vou analisar tudo isso novamente. topografia deixará a costura fechada porque não estamos fazendo isso. Mantenha os formulários abertos. Tudo bem. Então você acabou de colocá-lo em uma tag div. Onde está lá? Ele não faz nada além de mantê-lo aberto e está meio alto agora e você pensa, oh, a camada não funciona. Lembra o que ele faz quando os visualizamos? Ok, ele simplesmente vai, ele desmaia. Ele acabou de abrir para que possamos clicar no Webflow. Então esse aqui, esse não precisa de um espaço reservado porque esse cara quer passar duas de suas células-formulário para que você não possa caber lá. Então, vamos direto para o próximo. Ok, estamos trabalhando, estamos fazendo coisas. O que eu poderia fazer pelo meu contato de seção, eu poderia estilizar esse contato de seção e dizer, na verdade, o espaçamento que vou colocar nos dois lados. Mantenha pressionada a tecla Option ou Alt. Aqui vamos nós. Bom. Minhas opções de grade. Eu quero ser um pouco maior. Tudo bem, além daquele estranho problema de espaçamento que surgiu. Tudo bem, vamos dar uma olhada na visualização móvel e estamos basicamente voltando a fazer grades. Nada a ver com formulários agora. Mas podemos muito bem fazer isso porque parece bom, não funciona neste , mas muito pequeno. Então, estamos trabalhando em nossa rede. Então clique na grade, entre aqui. E eu vou te mostrar isso porque esse cara, ele está fazendo coisas engraçadas porque ele está abrangendo duas das minhas colunas. Então, se eu disser ao meu layout para minha grade, e eu disser, na verdade, apenas uma coluna. Por que você não é uma coluna? É meio difícil, mas com esse cara ele está lutando. Então, o que você faz é clicar em Concluído, sair e pronto, na verdade, basta fazer um neste ponto de interrupção específico. Ok. Agora eu posso voltar para a minha grade. Grelha. Por que isso não está funcionando? Eu tenho um. Vocês estão todos aí. Adicione outro. Siga em frente. O que está abrangendo? Eu não sei. Você espera lá. Outra pessoa está gastando. Eu resolvi isso. Vá lá, cérebro. Esses caras estavam malvados, mas eu fiz isso mais cedo também. Eu fiz com que o boletim informativo abrangesse alguns deles. Eles obtêm grande sucesso. Tudo bem. E essa coisa aqui, que era um bom lugar, R6, aqui embaixo agora em uma colina bate palmas, certo. Vamos dar uma olhada. Então ele está pronto no celular, vamos visualizá-lo. Ele está desmaiando, mas está saindo um pouco lá. Como podemos nos livrar disso? Podemos dizer isso, Toby é o tablet deles, ele está lá porque é um bom substituto. Que quando chegamos ao telefone horizontal de paisagem, ok, posso dizer que mostre esse cara, Nenhum. Oh, nós temos design. Agora vamos dar uma prévia. Bom, espero que agora algumas dessas coisas que fizemos anteriormente saibamos que já faz muito tempo fazendo propriedades de exibição e todos os tipos de blocos embutidos. Quando você chega a essas coisas agora, que são muito fáceis de usar , mas mais difíceis de adaptar se você não tem algumas dessas habilidades fundamentais, eu me sinto bem-sucedido. Eu espero que você também. Tudo bem, a última coisa que eu quero fazer é adicionar minha batida. Você pode pular agora, eu só vou despejar a batida. Você pode ficar por aí se quiser, e eu vou colocá-lo na minha mesa. Sempre comece no desktop. E eu vou pegar o que era, não era um que estava fazendo tudo isso. Eu acho. Vou trapacear e simplesmente pegá-lo na página inicial? Provavelmente. Oh, tem muito estilo, não é? Eu faço isso de qualquer maneira? Vamos tentar nos conectar. Coloque-o no lugar certo para colocar a seção em que eu queria entrar e clique em Colar. Em seguida, vai para o lado errado, coloque no topo. E eu não quero usar esse estilo, então eu vou dizer, livre-se dessa classe. E o que queríamos dizer? pergunta ao Dan. Pergunte. Depois, Dan. Eu quero essa tag span porque não é difícil de aplicar, mas vai colá-la nela. Apenas faça isso da maneira mais longa. Ok. Então, Dan, pergunta, e como a gastamos? Você se lembra, lá vai. E por que dissemos? Dissemos texto, cor secundária. Fizemos a pergunta padrão de que queríamos esse q minúsculo e queremos uma margem inferior, que não temos. Não acho que a margem esteja em B, mas imagine o fundo. Então, o que vou fazer é jogá-lo em um bloco div. E eu vou dizer que você é NB. Acho que provavelmente preciso do meu meio porque meu meio que eu conheço é aquele, talvez seja 81624. Então, muito pequeno, pequeno, médio. Isso faz sentido. Então, essa será a margem inferior da mídia. Esses serão meus 24. Vamos ver se isso funciona. Não há nada aplicado a isso. Eu poderia ter um crédito criado minha aula global aqui porque não há outras classes aplicadas a ela, mas fizemos isso agora. Fundo médio. Sim. Tudo bem. Esse é o meu estilo do meu formulário. Alguma outra coisa? Não, é isso. Nos vemos no próximo vídeo. 65. Tipos de imagem em SVG Webflow vs PNG vs JPG: Olá, meu amigo. Vamos discutir quando os jpegs uma boa maneira em PNG são bons, mais ou menos bons. E veremos quando os SVGs são incríveis no Webflow. Se você já conhece as diferenças, talvez queira dar uma olhada. Nós abordamos algumas coisas interessantes da exportação de coisas como o Photoshop e o Adobe Illustrator. E falamos sobre o tamanho em que eles deveriam ter. Mas se você souber de tudo isso, pode pular. Eu não vou ficar louco, mas para o resto de nós, vamos entrar. Tudo bem, vamos começar com Jpeg. Estou no Photoshop. Você não precisa do Photoshop. Eu só vou te mostrar isso. Portanto, os jpegs são perfeitos para algo assim , onde há muitos detalhes e não há transparência. Eles podem ficar muito pequenos e ter uma aparência muito boa. Eles podem chegar a um tamanho de arquivo muito pequeno e ter uma aparência muito boa. Quando vamos usar PNGs? Se você quiser jogar junto com seus arquivos de exercícios de portfólio. Existe um chamado SVG, PNG JPEG. Tenho alguns exemplos aqui. Então, vou abrir isso no Photoshop. E assim, por si só, ainda deve ser um JPEG BOD. Se eu disser mágica, renomeie, remova o fundo. R. Se você nunca fez isso antes, geralmente realmente atualize suas habilidades no Photoshop. Venha se juntar a mim no meu curso básico e avançado de Photoshop , venda cruzada de bardos, independentemente disso, ele tem fundo transparente. Agora eu vou cortar isso. Ok, Retorne. E agora estou exportando. Precisa ser um PNG porque eu preciso vê-lo. Eu preciso da novidade transparente disso. E um J peg não permite que você faça isso quando estiver exportando de algo como Photoshop, usando este. Esse é o melhor. Exportar como arquivo Exporte, pois não use mais Salvar para a Web, ok? Porque isso tem melhor exportação do que aqueles ótimos. Então, JP: Você pode ver que nenhuma transparência é muito pequena. Bem, minhas imagens são enormes. O ponto de orvalho três, provavelmente ainda não é bom para a Web, mas vai para o PNG. Ok, e procure a transparência. Você busca transparência. A desvantagem é o tamanho enorme dos arquivos. Então, os jpegs, se você conseguir se safar, os PNGs são ótimos se você precisar de transparência. E se você está vindo de algo como Photoshop e exportando coisas, você pode, nesta fase, decidir que isso é muito grande. Eu vou fazer, vamos precisar dele em 4.000. Você pode decidir que eu só precisava dele, talvez 1.200, e obter um tamanho de arquivo mais razoável, mesmo que seja bem grande. O limite para trazer para o Webflow para ver esses 4 MB no momento, que pode mudar sua mente se você tiver essas imagens gigantescas, precisa fazer algumas edições antes de trazê-las para Fluxo web. Novamente, mesmo tamanho, 1.200, mas como JPEG, k vai de um ponto para ok, abaixo de 2,3 kb, bem, 0,3 mb. Ok, então uma fração do tamanho ficará ótima, mas sem transparência. Então, JPEG para imagens detalhadas que não precisam de transparência, PNGs para coisas que elas fazem. Além disso, quando você está exportando de algo como o Photoshop. Portanto, não precisamos de transparência. Nós apenas o salvamos em um tamanho pequeno, garantimos que seja pelo menos o dobro do tamanho necessário. Atualmente, a maioria dos dispositivos, como navegadores e telefones, precisará do dobro da resolução. Eles o chamam de DPI alto ou acho que a Apple o chama de Retina K. Então, se eu souber que preciso que ele tenha cerca de 800 pixels de largura, eu realmente deveria exportar isso como 1.600. Ele precisa de toda essa resolução extra para ficar bem nessas telas extra sofisticadas. Você pode fazer isso de forma sofisticada aqui no Photoshop. Então eu posso deixar em 200 e dizer, ou 800 e dizer, eu gostaria de um tamanho que fosse ambos. Talvez, talvez eu nem precise que você possa adicionar mais de um, certo? Você pode dizer que eu quero que seja um tamanho, talvez queira que um tenha o dobro do tamanho também. Você pode exportar os dois, mas não precisamos de um tamanho único. E quando eu exportar agora, na verdade serão 1.600. Tudo bem, JPEGs, PNGs e PNGs ficam obscuros quando entramos em coisas como logotipos. Então, vamos para o Illustrator. Isso é o Adobe Illustrator. Se você ainda não o usou ou quer ir um pouco mais longe. Eu conheço um cara que tem um curso básico e um curso avançado, apenas dizendo, mas, independentemente disso, é uma maneira muito boa de mostrar a comparação de PNG e SVG. Porque o que aprendemos com Webflow é que ele não cria coisas, você não pode criar um logotipo no Webflow, você pode experimentar tags div, vai ser complicado. Então você precisa fazer algo como Illustrator ou InDesign, ou Photoshop ou Figma ou XD, algo assim. Ok. E quando você fizer isso, você tem que escolher um tamanho de arquivo. E quando você faz isso, você tem que escolher um tipo de arquivo. Então, o ilustrador tem uma coisa legal em Janela, Exportação de ativos. Certifique-se de que esteja agrupado. Você pode jogá-lo aqui, dar um nome. Se você tentou exportar algo do Illustrator e tentar fazer com que a tela tenha o mesmo tamanho. Essa coisa é um salva-vidas. Vai ser meu logotipo para a tese. E aqui embaixo, como no Photoshop, podemos dizer, na verdade, eu quero que seja um JPEG? Vamos dar uma olhada em J peg. Ok. Vamos dar uma olhada na P&G. Lembre-se de que Dan disse que precisa ter o dobro do tamanho que eu preciso por causa do alto DPI e das telas de retina, elas ficam bem nisso. E vamos dar uma olhada no último, SVG. Ok. E você notou que tudo isso desapareceu? Por que eu posso fazer fogões duas vezes? bom e velho gráfico vetorial escalável. É isso que o SVG é, que significa que ele pode ser dimensionado para qualquer tamanho. Então, se você tem algo assim, Victor, formas simples precisam de transparência, basta usar SVG, PNG funcionará, mas SVG pode ser tão grande ou tão pequeno quanto você quiser. Então, eu tenho todos esses três. Vamos exportar. Vou colocá-los nesta pasta do nosso portfólio. Então você também pode dar uma olhada. Vamos dar uma olhada. Então, foram feitas essas duas pastas, as duas semanas, ok? E vai ser interessante. O jpeg é bem grande e não tem transparência. Esse PNG é muito menor, o que é legal, e tem um fundo transparente, que significa que eu posso tê-lo por cima das coisas. Eu vou te mostrar em um segundo. Você tem que confiar em mim com transparência, mas o tamanho do arquivo é menor, o que é incrível. Mas e quanto ao SVG? Vamos compará-los com o SVG, que é ainda menor novamente, e vamos trazê-lo para o Webflow. Ok, vou trazer esses dois. Vou fazer minha página de fundo, amigo, aqui. Eu vou ter toda a temperatura. Sempre que estou fazendo Delete Me também. Eu faço essas pequenas aulas de Delete Me porque sei mais tarde as usei para talvez um tutorial, talvez destruir alguém, talvez apenas provar alguma coisa. Eu vou dizer que o fundo será uma cor. Vou colocar essas duas imagens. Então eu tenho esses dois. Vamos dar uma olhada na P&G. Ok. Está indo bem. Mas está ficando um pouco confuso. Não se preocupe, vou copiar e colar, se eu fizer metade do tamanho, dá ver que fica uma crocância linda. Vai ser difícil ver outro vídeo. Você pode ver isso? Ok. Dependendo da qualidade do vídeo que chega até você. Então, ele vem nesse tamanho grande, você o reduz em pelo menos metade para que fique nítido neste monitor em que estou gravando é para um monitor de k alto DPI. A maioria das coisas é hoje em dia, então precisa ter uma boa aparência. Então, PNGs, e quanto ao SVG? Ok, então vamos trazer essa. E esta é minha versão SVG. Olha, olha isso. Ele vem em estado cristalino. Veja o tamanho e o tamanho do arquivo com pilhas menores, menor o tamanho do arquivo. Veja como ele fica grande, porque é um vetor e eles podem ficar tão grandes quanto você gostaria de ser do tamanho uma montanha e ainda terão bordas bem nítidas. Portanto, os jpegs para imagens que não precisam de transparência, geralmente são menores e uma qualidade muito boa, como Alfred Back. Agora, aquele cara, se você precisa de uma imagem detalhada que precisa de transparência, PNG é o caminho a percorrer porque um SVG não pode fazer isso. Não consegue resolver todos esses pequenos pixels. Ele precisa de uma geometria muito simples. Todas essas coisas. Ele precisa de linhas e âncoras, e é isso que realmente brilha. Então, se você estiver nessa situação, node PNG diga sim ao SVG porque, como deveria ser um adesivo de para-choque. E também rapidamente no Figma e no XD, se você estiver exportando algo parecido com esse cara, lembre-se aqui de onde os estamos exportando, verifique se é de a x k porque você quer esse tamanho duplo , tudo bem, isso é analisar os diferentes formatos de arquivo e o tamanho que você precisa para trazê-los para o Webflow, para que tenham uma aparência bonita e nítida. Tudo bem, para o próximo vídeo. 66. O que são Hi-DPI e imagens responsivas no Webflow: Olá a todos. Vamos falar sobre o que é essa coisa de alto DPI. O que faz isso? O que faz essa imagem responsiva? O que isso está fazendo? Por que Dan tem três tamanhos diferentes aqui? Estou muito empolgado com esse, porque se você fez qualquer outro tipo de web design, isso costumava ser uma porque se você fez qualquer outro tipo de web design, coisa muito complicada, imagens responsivas, mas o Webflow faz tudo por nós. Tão bom. Deixe-me te mostrar a bondade. Tudo bem, vamos começar com uma coisa de alto DPI. Ok, então vou arrastar esse PNG que eu tinha anteriormente. Lembre-se de que o trouxemos e descobrimos que, se eu copiasse, colasse e fizesse, falávamos em torná-lo com a metade do tamanho. O tamanho vai ficar ótimo. Um pouco confuso. Metade do tamanho parece bom. Ok? O que você pode fazer é pular o pote de arrastar e dizer para aumentar o DPI, eles são apenas cortes do tamanho e da metade costumavam ser 701. Agora é 351. Perto o suficiente. Ok. Veja isso. Se eu arrastá-lo, ele explode. Você pode arrastá-lo para um tamanho maior. Não é alto DPI, mas veja isso. Ele será ativado automaticamente quando eu chegar ao tamanho certo Você consegue ver o DPI alto? Você parece um indicador visual que tem metade do tamanho necessário. É meio que ótimo nessas telas de retina. E há monitores de alto DPI. Tudo bem, então essa é aquela parte. Vamos dar uma olhada nas imagens responsivas. Se você é de uma área de web design ou desenvolvimento ou é engenheiro de software, pode estar pensando: o que isso faz com imagens? Ok? Será que, se eu colocar uma imagem gigante, ela a reduz para que eu tenha que fazer isso. O legal do Webflow é que ele faz tudo por você. Então o que eu vou fazer é pedir que você traga. Você não precisa, mas se quiser jogar sozinho sob esse portfólio, SVG é chamado de exemplo responsivo. Traga-o para dentro. E o que eu vou fazer é colocá-lo dentro de uma div, precisa entrar em um contêiner, não posso simplesmente deixá-lo por aí, caso contrário , não funciona. Ok, e eu vou falar sobre isso, e eu vou dizer, você entra, você é enorme. E se você tiver um alto DPI, ele ainda é enorme. Até metade do tamanho que ele preenche a tela. Ok, vamos esquecer o alto DPI, mas eu tenho uma versão muito, muito grande. Ok, eu vou deixá-lo lá. Vou copiá-los e colá-los. Então, eu tenho dois deles. É difícil ver, mas eu tenho duas versões. Este é o melhor aqui. Eu deveria até mesmo fazer o que está por baixo. Clique nele e tente encontrar a engrenagem. Eu vou fazer com que seja muito pequeno. Eu vou dizer que você tem 100 pixels. Existe uma versão conjunta. Eu tenho essa pequena versão, copie e cole. Eu tenho que arrastá-lo para ir para a versão maior. Copie e cole novamente. Grande aversão. Seja colocado novamente, visão maior. Ok, então, com todos esses tamanhos diferentes, o legal do Webflow é que acho que é durante a publicação, porque você não pode visualizar e fazer isso funcionar. Você tem que realmente publicar o site. Vamos ver se funciona. Ok, em amu it, eu tenho uma versão grande. Então, vamos salvar esse. Estou apenas clicando com o botão direito do mouse no meu navegador. Eu vou guardá-lo aqui. Vou salvá-los. Então você pode dar uma olhada nesta versão gigantesca que tinha 3 MB. Existe essa versão, salve como, eu vou salvar essa também. Salve com o botão direito do mouse, salve também. Por acaso eu dei uma olhada no Webflow. Dizia a versão grande e gigante. Ou podemos ver isso? Lá vamos nós. Ainda tem 3 MB. Não toquei nele, não se junte a nós em nada porque não demos nenhum tamanho diria apenas para ir lá. Portanto, é o tamanho grande, mas depois a versão menor. Ok. Bem, onde está? Sim. Este diz, eu sou o menor. Ok, há uma versão de 1.600 pixels, há uma 1081, há uma 500. E, na verdade, esses dois últimos, eu acho que 500 é o menor, isso fará com que seja. Então, na verdade, acabou de receber dois desses. São esses dois. Ok, então é muito inteligente. Você não precisa fazer nada, basta fazer o upload da sua versão grande, desde seja menor que 4 MB. E o Webflow não apenas o reduz em toneladas de tamanho físico, mas também usa alguma compressão de imagem para torná-lo menor. E é muito bom, muito inteligente. E como se você pudesse tentar reduzi-los novamente antes de trazê-los para o Webflow, faça alguns experimentos. Estou descobrindo que a compressão que eles usam parece boa. O tamanho do arquivo é muito pequeno, deixando-o para o fluxo de trabalho. Se você está pensando o que diabos foi tudo isso? O que você precisa saber é que você não precisa saber nada. Basta trazer imagens desde que não sejam maiores que 4 MB. E o fluxo de largura os reduzirá para o tamanho certo, em vez de tentar carregá-los. Caso contrário, ele tentará carregar esse arquivo de três megabytes e reduzi-lo até o tamanho certo. Então, está desperdiçando muito, não precisa de 3 MB de dados. E qualidade significa apenas que nesta versão, se você tiver feito meu curso de web essentials, abordaremos melhor o código. Passamos muito tempo tentando descobrir como trocar imagens ou diferentes pontos de interrupção. E porque essa é a outra coisa também, é que se ele está renderizando isso na visualização de desktop, mas vai renderizar, esfriar em um telefone celular, pode ser muito menor. Então, procure apenas a de 500 pixels, não essa junção, quase uma, que você pode ter boa e grande no desktop, mas pequena no fluxo da cabine do celular simplesmente injeta a direita o código para o dispositivo pode chamar a imagem do tamanho certo. Precisa ser muito útil. Um pequeno bônus por chegar ao fim está no Webflow, ou menos com imagens no painel de ativos. Você pode ficar um pouco lotado aqui. O que é isso? Você pode realmente apenas este aqui, expandi-lo, pode obter feno bonito e grande e você pode decidir realmente torná-los um pouco menores, torná-los minúsculos com a lista, me mostrar as imagens que eu tenho os documentos não têm nenhum documento ou arquivo. De volta a todos os ativos. Você pode pesquisar, me mostrar tudo o que é um desses tiros que odiaríamos e você os arrasta até aqui. Você pode encomendá-los. Você pode dizer “mostre-me o mais antigo que chegou primeiro”. Mostre-me então em ordem alfabética e, em seguida, selecione todos eles. Exclua-os por todo o lado. Emocionante Então, vamos receber isso de volta em seu bônus para as pessoas que chegaram ao fim. Tudo bem, é isso. Para o próximo vídeo. 67. Como cortar imagens no Webflow usando objetos: Olá. Neste vídeo, vou pegar nossa imagem retangular e forçá-la a ter um determinado tamanho, um retângulo maior. E então eu vou colocá-lo dentro de um círculo. Eu provavelmente deveria ter feito isso antes. De qualquer forma. Deixe-me mostrar como cortar imagens no Webflow. A primeira coisa que vou dizer é que se você tem a capacidade de recortar coisas, dizer algo como o Photoshop, faça isso porque se você está cortando muito, isso significa apenas que existe, o tamanho do arquivo está alto. Não precisa ser, mas há muitos casos de uso que ele precisa ser recortado aqui, Webflow. Vou me livrar desse cara e vou trazer uma imagem retangular. Vou usar aquele que usamos anteriormente. Se o seu está preso como eu, eu fico tipo, Onde está minha imagem sumiu? Vou esclarecer isso. Ok, e eu vou voltar para o Grid porque eu gosto. E eu vou trazer este aqui, claramente retangular. Eu preciso que seja quadrado. O que eu faço? A próxima coisa é que isso precisa estar em uma classe, mas eu posso controlá-lo com k. Então eu vou chamar esse de meu herói da imagem. Eu não vou usar esse porque eu já meio retrocedi, desfiz e usei isso. Eu já estou usando isso para a coisa dos cantos arredondados. Então eu vou chamar isso de uma imagem. Aqui estão dois, muito inteligentes. E eu vou dar a ele um tamanho e uma largura. Então, eu diria que tamanho, você está fazendo mínimos e máximos. Vamos dizer que você é, na verdade, como algo que se encaixa aqui. Eu vou dizer que você tem 200 por 200. Ok? E está esmagado, com o qual não podemos viver. Então, o que dizemos é que essa opção aqui, é chamada de sentar. Então, dizemos que o objeto não o está preenchendo, que está tentando preencher a altura e a largura, apenas cobri-lo. É cortado na parte superior e inferior se eu fizer isso bem largo. Então, vou manter pressionada minha tecla Option em um Mac, tecla alt em um PC e eu a arrasto dessa maneira ou da largura, então você diz que estou ampliando . Você pode ver que ela tentará cobrir tudo, mas está perdendo muito da parte superior e inferior. Portanto, depende do que você precisa fazer. Lembre-se de que eles descem aqui antes transformá-los em símbolos. Deveríamos ter terminado esse dia de dormir. Mas agora você sabe, eu queria ser perfeitamente quadrada. Mais uma vez, vou fazer 200 por dois. Isso é 2.200 por 200. E agora eu posso adicionar minha borda, torná-la redonda por um tempo e apenas fazer 200. Então, ele gira em toda a volta porque está dentro da grade. É uma ótima criança. Posso dizer que você o enviou e depois sinterizou. Bom. Também teremos que ajustá-lo para os diferentes tamanhos. Isso funciona bem. Isso funciona. Quero que seja maior. Não quero movê-lo de um lado para o outro. Então você pode dizer que, na verdade, nesse tamanho, é manana, 500 por 500. Ok. E você pode ver lá os cantos arredondados para centenas, não o suficiente. Vamos embora. 300. Neo fica um pouco ridículo quando simplesmente o desligamos. Mas a ideia é que você pode ajustá-la desde que eles tenham uma aula sobre isso. Você pode ajustar os diferentes pontos de interrupção. E o truque é apenas colocá-lo posição de caber para cobrir. Você pode forçá-lo a ter o tamanho que quiser. Tudo bem, é isso. Nos vemos no próximo vídeo. 68. O que é carga preguiçosa no Webflow: Olá a todos. Vamos ver essa opção aqui. O que significa carga lenta? O que é ser IGA, tudo será revelado. Tudo bem, então o carregamento lento está ativado por padrão no Webflow, ok, encontrei uma imagem, cliquei na engrenagem e diz aqui, carregue. Por fim, o oposto é carregar ansiosamente, nomes muito legais, muitas outras partes de web design ou, sei lá, exibe bloco ou bloco embutido ou ID de classe div zero, nomes terríveis, preguiçoso e IGA. Faz sentido. Ok, tudo o que isso significa é isso, e eu fiz uma versão muito longa disso. É muito difícil, só tenho que descrevê-lo. Basicamente, o que acontece é que, quando o site é carregado, ele carrega este porque eu posso vê-lo. Ele carregará as partes superiores dessas , onde carregará todas essas imagens, essas três aqui, porque eu posso vê-las. Ele não carregará nenhum desses outros porque não consegue vê-lo. Não está na janela de exibição. Tão preguiçoso significa apenas que vou carregar os que posso ver, mas não vou fazer os outros porque sou preguiçoso. Por que isso é bom? Significa apenas que a página carrega muito rápido. Então, o Google vai dar uma olhada nesta página, ver as facetas que carregam quando a pessoa chega lá e, enquanto rola, ela pode se apressar para tentar recuperar e carregar as imagens. Isso pode ser como, você pode forçá-lo a dizer, na verdade, essas imagens aqui embaixo, eu não quero no meu símbolo, eu ainda posso ver o COG. E posso dizer que, na verdade, quero que todos estejam ansiosos. Você pode fazer isso por isso, por todos eles, desde que faça isso com a classe. Ok. Igualmente gostará dessas coisas. Não sei por que você faria isso, você pode configurá-lo como padrão. Então, você pode dizer, na verdade, deixe o navegador decidir. E acho que no Google Chrome, o padrão é o carregamento lento. Não conheço os outros navegadores, mas aí está. É só uma coisa interessante. Eu sei que você vai perguntar a esse cara aqui não vai ficar lento porque ele viu primeiro, ele vai, ele vai carregar imediatamente, mas todos os seus amigos no fundo, vamos esperar até que eles estejam bons e realmente imagens preguiçosas que também funcionam apenas com imagens. Tenho um texto de carregamento lento. Tudo bem, é isso. Vamos facilmente para o próximo vídeo, dendrítico, perigo de cama. 69. Como alterar o favicon no fluxo na Web: Olá a todos. Neste vídeo, vamos ver esses garotinhos no topo aqui. Tem um favicon. Vamos atualizar o nosso para esse cara de emoji estranho , como Little fez. Só porque deixe-me mostrar onde fazer isso e quais são as regras. Vamos começar, ok, para encontrar o favicon para um projeto, você tem que ir para as configurações do projeto. Então, estou no meu portfólio e está apenas nesta primeira guia geral. Você provavelmente já viu isso. Provavelmente é por isso que você pesquisou no Google o que faz o favicon? É esse ícone aqui em cima. Você pode ver o favicon de Figma? É aquele garotinho, um pequeno carro alegórico que você quer fazer o seu. O problema é que isso não vai funcionar para você. Você precisa fazer o upload de algo que tenha exatamente 32 pixels por 32 pixels. Precisa ser qualquer um desses garotinhos. Não pode ser um SVG, mesmo que seja de boa qualidade. Provavelmente será um PNG porque você pode querer transparência. Este aqui não precisa de transparência porque é um quadrado sólido. É um pequeno retângulo acontecendo, mas é um quadrado sólido. Portanto, existem muitos criadores de ícones de favicon online. Eu uso o Photoshop e tudo o que fiz foi colocar um arquivo novo e fazer 32 por 32 pixels. Certifique-se de que seja RGB. Clique em Criar. E então eu simplesmente copiei e colei alguns gráficos quais eu estava trabalhando para outra coisa. Ok. Eu estava trabalhando em algumas coisas de custo de qualquer maneira. Então, sim, coloque-o lá. É muito pequeno. É uma porcaria. A qualidade é péssima, mas Ernie tem que ser bem pequeno. Ok, então quando você o exporta em um, pelo menos no Photoshop, você pode exportá-lo como um PNG, para obter essa transparência, ok, e exportá-lo. Portanto, não pode ser 32, não pode ser 31 por 30 para a conta B, 33 por três, o mais rigoroso. Então, depois de obtê-lo, você pode fazer o upload. Eu tenho alguns. Tenho esses dois em seus arquivos de exercícios, se você quiser. Vou fazer o upload meu portfólio nos arquivos de exercícios, este favicon, vou renomeá-lo como um em um segundo. Mas queria escolher um, clicar em Abrir e esperar por isso. Depois de atualizado, nem precisou clicar em Salvar alterações. Agora, como você vê isso no designer? Você não vai ver o relógio. Ainda será o Webflow. Em pré-visualização. Ainda não vai aparecer. Então você precisa publicar o site. Vou publicá-lo. Vou ver e me preparar. Porque o novo favicon, obviamente esquelético, fazia emoji, provavelmente não apropriado para o meu portfólio. Mas ei, você escolhe o que quiser. A igualdade é terrível. Use você pode usar cores. A única coisa que acontece com o favicon, então, se você estiver atualizando, carrega o caso, às vezes o navegador segura o favicon e não o altera. Então, às vezes, se você for atualizá-lo aqui no fluxo de trabalho, ele será atualizado. Mas às vezes o navegador precisa ser, você precisa limpar a gaiola, estar no modo privado, algo porque às vezes ele se mantém no favicon por muito tempo e não atualiza. Mesmo que você o tenha atualizado. Ele apenas armazena aversão e não a mostra e não verifica o novo ícone com muita frequência porque quem atualiza o favicon com muita frequência, eles mostram um designer e você faz todo o É hora de tentar obter um pixel perfeito lá dentro. Tudo bem, muitos contras no Webflow. 70. O rodapé para o fundo no Webflow: Olá a todos. Esse é meu rodapé. Foi bom em outras páginas, mas nesta página, por ser muito curta, continua grudando no topo. Eu quero que você fique no fundo da intermediária Deborah. Tudo bem, nós já fizemos isso antes. Apenas reutilizando uma habilidade familiar. Deixe-me mostrar como fazer isso. Em primeiro lugar, não é o mesmo que a batida que fizemos. Nós o tornamos pegajoso com essa posição. Ok. Isso funcionou o pé dela. É um pouco diferente e já fizemos isso antes. Nós fizemos isso aqui. Ok, lembre-se de que esse clique duplo para entrar no meu símbolo surgiu dessa maneira de empurrar para baixo em todos esses tamanhos diferentes. Ok. Fizemos o Flexbox principal e fizemos a criança. Tínhamos uma margem no topo do pedido. O que vamos fazer de novo, mas, novamente, é que o pai será a etiqueta corporal e o rodapé será empurrado de cima usando a ordem. Vamos fazer isso. Eu vou para, não adianta fazer isso nesta página porque vai ser forçado para o fundo. É muito útil ver isso em ação quando você está na página do Portfólio. Como se eu adicionasse um rodapé aqui, seu rodapé. Está preso no topo porque não é um conteúdo A na página. Talvez já tenhamos uma página curta. Então, vou colocar um estilo super básico. Então, vamos colocá-lo em algo chamado seção, e eu vou colocá-lo no rodapé da seção. Mas na verdade eu não, isso é de eu já gravei isso uma vez e correu mal. Eu vou te mostrar como excluir um que você não precisa mais. Ok, então eu usei meus estilos. Eu o encontrei procurando por ele e vou dobrá-lo. Ok, eu esqueci de te contar uma coisa no primeiro tópico deste vídeo, então eu estou fazendo isso de novo. Está de volta para onde estávamos. Vou criar uma classe para essa chamada seção. E eu vou apenas acrescentar duas coisas. Vou para Option ou Alt, clique nas divisas para fechá-las. Eu vou dizer que o plano de fundo é essa lousa. E eu vou dar a ele um tamanho de altura mínima de talvez 100. Legal, como colocamos isso no fundo? A primeira coisa é que precisa ser porque estamos fazendo o corpo. Esse será o pai. Ok. Essa é a criança. Não posso ter isso escondido dentro de nenhuma dessas outras tags div. Não consigo colocá-lo dentro de uma seção dentro de um contêiner, precisa estar em paralelo com o corpo para que isso funcione. Ok, então quando eu digo em paralelo , precisa ser como um passo adiante. O pai é o filho que vagueia pelo corpo e precisa ser mudado. Agora, eu quero que isso aconteça em todas as páginas. Então eu não quero fazer isso só com esse corpo um, porque se eu entrar e trocá-lo para assistir aqui em cima, se eu o mudar, ele diz, Ei, crie uma classe chamada corpo dois. E então você terá que ir até todas as páginas e aplicá-las. Então, o que eu quero fazer é voltar aqui e dizer Buddy, clique aqui. Quero que todas as páginas das antigas amigas sejam feitas no Flexbox. Você quer dizer que a direção é vertical, então ela volta a ser como era. Agora, posso dizer que você, meu amigo, meu filho do meu flex, isso é estranho. Podemos ir para Spacing e dizer que a parte superior é automática. Nós fizemos isso. É basicamente isso. Vou examinar agora e estilizar minha foto. Você pode ficar por aqui e me ver construindo um rodapé, ser resolvido no começo aí. Não é particularmente chique. Você pode ser demitido. Caso contrário, fique por aqui. Vou transformá-lo em um símbolo e colocá-lo em todas as páginas. Tudo bem, então o que eu quero doer, eu não quero colocá-lo em um contêiner, um Keegan, e quero colocar em um link de texto. Eu só vou fazer uma simples. Vou empacotar esse link de texto em um editor de texto. Ok, é preciso, o que isso faz sentido? Sim, eu sei que a topografia vai ser branca. Vou colocá-lo em um link em algum lugar. Ok, mas primeiro vou mudar o texto. Ok, então eu tenho uma mensagem. Não vou me preocupar em centralizá-lo ainda. Estamos adicionando o link. Na verdade, eu quero fazer, estou prestes a estilizá-lo. Para que eu pudesse empurrar a pintura para baixo. Eu posso jogar com as margens. Na verdade, eu vou te mostrar outra maneira porque a maneira mais fácil, bem, nossa maneira é pegar o recipiente. Eu disse, não faça o contêiner do Flexbox. Será que vai funcionar? Vamos centralizar um cheque que você centralizou e ele o enviará dessa forma? O que você vai, é por isso que não fazemos isso. Ok. Então eu vou colocar um impasse e colocar isso dentro dele. Ok, então aqui está meu texto e bloco somativo. Não está dentro do meu contêiner. Aqui vamos nós. Não, não é. Aqui vamos nós. Agora posso dizer que o diblock, ok, será chamado de div. Div. Tantos rodapés. E eu vou dizer que você é flexível. Você vai ficar centrado e você vai estar centrado lá. Oh, ainda não está funcionando. Oh, eu sei o porquê. Você sabe por quê? Pausa. Pense por quê? Por que eu posso ver isso lá. Você pode ver isso correr para os meus olhos. Não há altura. A altura vem da seção. Um ***** do contêiner teria se convertido muito bem se eu tivesse dado a altura. Então eu vou dizer, eu vou me livrar desse. Portanto, isso tem uma altura mínima de 100. Vou limpá-lo mantendo pressionada tecla Option ou a tecla Alt em um PC. E eu vou dar para você. Você vai ter a altura mínima. Agora está no prado ou uma empresa de web design super incrível de dança empresa de web design super incrível meio que sabe um pouco o que está fazendo. É muito grande. São flechas para baixo. Aqui vamos nós. Tudo bem. Eu vou transformá-lo em, vou transformá-lo em um símbolo. Vamos fazer isso. Você pode clicar com o botão direito do mouse e transformá-lo em um símbolo, onde você pode acessar o painel Símbolos e dizer Criar símbolo. Esse será meu rodapé. Já tenho um desses. Eu não tenho. Veja meus símbolos, não. Tudo bem, há apenas uma instância nesta página. Vamos colocá-lo em todas as páginas. Então, eu vou copiá-lo. Vamos às páginas. Tem uma página inicial e desça até o final. Vamos aos meus símbolos. Instalador. Pode ser difícil adicionar. Feito na parte inferior. Bom. Mas é claro que, como é um símbolo, posso entrar nele e mudá-lo e dizer, na verdade, não somos TTY como a Austrália. Somos limitados, como Nova Zelândia ou.co. Não sei o que é isso, mas significa que ele será atualizado em outras páginas como esta. Aqui está lá.co, a empresa. E vamos examiná-lo e adicioná-lo a todas as outras páginas. Vou poupá-lo disso porque você já viu. Tudo bem, isso é como fazer com que seu rodapé fique pegajoso. Cole-o no fundo. Você realmente usa o flexbox e usa a criança para ser encomendada na parte superior é estranho, mas é verdade. Tudo bem, vamos para o próximo vídeo. 71. Como criar uma animação para carregar páginas no Webflow: Olá a todos. Neste vídeo, faremos uma animação de carregamento de página. Podemos fazer com que esse texto apareça quando a página for carregada. Ok, então a página carrega e aparece. Vamos abordar esse painel de interações. Vamos analisar a flexibilização. E vamos criar nossa primeira animação personalizada, sem usar algumas das predefinições. Tudo bem, vamos embora. Ok, então para esta próxima seção sobre indireção e animações, criei um site totalmente novo apenas para mantê-lo separado do nosso portfólio e do site do clube que criamos. Só para manter a certeza, para manter tudo claro e ser capaz de ver o que estamos fazendo sem 1.000 aulas. Mas é claro que isso pode funcionar nesses. Então, o que eu fiz aqui foi editar o plano de fundo. Eu adicionei uma navegação apenas por causa contêiner animado e da seção Harris, que é apenas a estrutura normal do site. Acho que já estou me arrependendo do gradiente. É muito, muito efeito nos olhos. Então, há um logotipo. Então, para começar, é muito útil, porque não queremos estilizar muito a seção e depois colocar esse diblock lá. E não faz nada, exceto que vai aceitar as coisas que vamos animar. Você pode animar qualquer coisa, uma imagem, um botão, uma lista. Vou trazer apenas blocos de texto, como se fosse o começo. Esse vai ficar frio. Dança. E então eu vou ter outro, um par de portfólios baseados para 30. Tudo bem, vou estilizá-los bem rápido. Estou criando minhas próprias aulas. Então, isso é muito importante. Então você realmente não anima o elemento, você elimina a classe que você aplica a ele. Então, qualquer coisa que você queira animar e adicione uma classe. E você notará que eu coloquei duas caixas de texto separadas , não é difícil animá-las ou se elas estão todas na mesma caixa de texto porque eu queria que elas fossem animadas separadamente. Então você vai ser chamado de texto talvez use letras maiúsculas apenas para torná-lo mais claro, para que você possa ver o que estou fazendo. O painel de animação é um pouco, um pouco complicado. Bem, não é, mas é, é preciso, e esse será um grande portfólio. Tudo bem, então eu tenho esses dois, então vou animar essas duas classes. Como eu faço isso? Na verdade, vou estilizá-los bem rápido. Você espera lá. Tudo bem, então os estilizei. Você não precisa animar os dois. Você pode animá-los de qualquer maneira de começar Sua turma foi selecionada para estender? Vamos até o pequeno raio aqui. E esse será um gatilho de página em peso. No início do curso, fizemos Ellen e gatilhos e vamos fazer cargas. Você acabará usando muitos outros gatilhos de elementos. Estamos fazendo um gatilho de página apenas para mostrar o que ele faz e é apropriado aqui que queremos quando a página é carregada, porque assista a isso. Se eu for para o gatilho da página, há um gatilho muito legal. É quando a página é carregada. Tão saudável. Você meio que tem que ler isso. Eu o li porque é, acho complicado. E se eu achar um complicado, você vai achar complicado. Eles são muito explícitos sobre o que você precisa fazer e é muito bom que você os leia. Quando a página for carregada, selecione uma ação, não temos uma ação. Vamos começar nossa primeira ação personalizada antes de usarmos uma ação predefinida. Então começamos uma ação, iniciamos uma animação para que uma nova, mas ainda não temos uma, realmente funcione como uma criada. Agora temos que adicionar a esse tempo a animação. Vamos dizer que adicione dois aqui. E essa coisa de p vai lhe dar um nome. Vamos chamar isso aqui de animação de texto. E vamos adicionar algumas coisas a isso com sua turma. Agora, como você poderia ter chegado a esse ponto sem ter nada selecionado, você precisa ter certeza de que agora sua classe foi levantada. Porque o que ele faz é que eu vou fazer um movimento. Você pode fazer qualquer um desses. Eu faria uma jogada. Você pode vê-lo trazido pelo texto do nome da classe Dan Capital dan o comprou?. E sempre que você estiver fazendo animações, fique de olho nesses caras. Eles são muito úteis. Ok, diz que essa ação de movimento não tem valor. Ok, então faça isso. Então, o que eu vou dizer é que eu gostaria de movê-lo e você pode ver que ele aparece bem abaixo aqui. Ignore o momento. Vamos dar uma olhada nessa ação aqui. Vamos dar uma olhada nas configurações aqui embaixo e você pode ver X, Y e Z. Eu não vou me importar de descer todo o meu muito longe. Então, vou recordá-lo às leis que parecem ser como sair do chão. Mas, independentemente disso, aperte play, é a maneira errada. Então isso acontece muito. Então o que você está dizendo é que em zero K aqui, eu quero que seja aqui embaixo. Na verdade, eu quero que esse seja o estado inicial. Eu não quero ir lá. Eu quero que comece aqui. Então esse é o estado inicial. O problema agora é que não tem outro estado. Ok, então você precisa dizer que, na verdade, vamos adicionar outra ação ainda com uma selecionada. É engraçado que você possa realmente animar 1 milhão de coisas diferentes aqui. Ao clicar aqui, apenas garante a coisa que você deseja animar, ok? Eu quero adicionar uma ação a ela. Eu quero fazer outro movimento. Ok, e o que esse movimento diz? Ele está de volta a 0 e o colocou de volta a zero. Você pode ver que diz zero. Aí está. Por que diz zero. Você realmente teve um saquê até zero, por favor. Então, olha para este primeiro, ok? Este está definido como, a inicial está definida como, eu estou configurando para 234. Então esse outro é definido como zero. Então vamos pegar o prato dela. Ei, estamos animando. Ignore essa coisa. Acho isso muito complicado. E na verdade está acontecendo ao longo de 5 s. Como eu sei que essa é a duração lá? Então esse top aqui perde todo esse tempo porque eu disse ser o estado inicial, então não faz nada. O segundo, porém, tem muitas informações. Os dois movem os dois para o texto em. Este diz: Oh, eu quero que a duração seja de 5 s. Eu diria que isso seria em 5 s. Eu não sei por que não é. Então, eu nem vejo que essas são proteínas, elas não existem. Eles podem mudar isso. Isso mudou essa interface de usuário aqui nesta, essa opção aqui, carrega para tentar melhorá-la. Tudo bem, então está meio que subindo. Antes de fazermos o segundo, vamos dar uma olhada em algumas coisas. Lembre-se dessa primeira opção aqui, o estado inicial não tem muitas opções. A segunda que faz os doentes é, quanto tempo vai demorar 1 s, vamos clicar em Play. Demora mais do que não. O melhor, porém, é essa coisa aqui. flexibilização, a flexibilização tem a ver com o momento é bastante linear, certo? Bem, é linear, só fica chato. Animação em Powerpoint. Bem, eu quero, é provavelmente a melhor primeira é a facilidade de entrar e sair. Vai ficar lento no começo, lento no final, o que parece a vida real, mas gravidade, atrito, eu não sei, algo está acontecendo com ela vai rápido no meio, desacelera o começo e o fim . Muito melhor. Existem alguns muito legais. Vai depender. Mentes saindo do fundo. O seu pode estar descendo do topo. Então, vejamos que muitas vezes não use a facilidade para entrar e sair. Vou usar o In-N-Out juntos. Ok, alguém que é os dois. Então, se eu for dizer facilidade na saída, na verdade pulou para pular, o salto funciona dessa maneira. Veja que o salto não funciona porque está chegando, estava vindo do topo, com muito trabalho. Mas porque vem de baixo, você pode gostar, mas é meio estranho, certo? É o texto antigravitacional. Então, vai depender de como você está fazendo isso. Então, o que eu quero fazer é que eu gostaria que esse parecesse muito bom. Então lembre-se, todas essas entradas e saídas podem ser muito boas. Em uma caixa de saída. Jogada muito boa. Você pode ver que vai embora, meio que vai na direção oposta antes de seguir o caminho da Ford. Isso se chama antecipação. Meio que vai para trás e depois para cima. É meio legal. E a duração desempenha um grande papel nisso. E pelo jeito que parece, parece meio bobagem. E esses 2 s parecem muito longos. Então, há muita brincadeira com isso. Mas digamos que, digamos, 2 s, mas está fazendo isso por um desses outros. Às vezes pode, nós aperfeiçoamos por 2 segundos porque há muito mais acontecendo. Vamos usar elásticos. Você vê que 2 s é realmente muito bom para elástico. Tudo bem? Então, primeiro, muitas opções. Duração do segundo mês em flexibilização, brinque com os diferentes. Bounce past é muito legal. Tem aquele. Esse é o que está vindo do chão. É meio que para cima e pulando por cima. Mas a duração é muito longa, então vou deixar isso aí. É meio legal. Tudo bem, então vamos deixar isso aí por enquanto. Vamos clicar em Salvar se você tiver saído. Ok, digamos que você saiu de e quer voltar, ok? Você não faz nada, não precisa clicar em nada porque é uma animação de página ou gatilhos de página. Então você vai ouvir todos os gatilhos da sua página. Uma parte da página, não parte de nenhum tipo de elemento. Você não precisa clicar nele primeiro. Então eu posso dizer que você é uma grande coisa velha. Ok, foi aqui que começamos, mas adicionamos uma animação. Ok, nós adicionamos o seu próprio. Nós o chamamos de texto de herói. Nós o chamamos mais ou menos nesta parte. Para voltar a isso. Lembre-se, entre no carregamento da página, e é aqui que a mágica acontece. Você pode visualizá-lo aqui. Eu posso ir até este e dizer, eu faço isso com o primeiro? Ok, não há muita coisa acontecendo aqui. O segundo, porém, posso dizer que, na verdade, eu gostaria, eu não gosto mais do passe de salto. Acho que gosto do elástico . Isso precisa ser mais longo. Tudo bem, mais uma vez, eu vou salvá-lo. Você pode simplesmente visualizá-lo aqui ou simplesmente acessar o modo de visualização. Ele será pré-visualizado. A próxima coisa que quero fazer antes de começar a animar a segunda é que gostei muito dela quando ela chegou, como pular do chão em vez de vê-la aqui embaixo. Na verdade, vamos fazer uma Pasadena primeiro porque antes de interrompê-la, e como essa é útil para ver em ação, eu vou até aqui e ela entra nela, e você não faz isso separadamente, todos eles entram aqui. Então, vamos animar o texto e novamente, mas para brincar com a opacidade. E, basicamente, está repetindo isso. E isso vai trazer à tona algumas coisas interessantes. Então eu vou clicar em Plus, ok, eu quero que este seja opacidade. Eu quero a opacidade. Lembre-se de que ele aparece na parte inferior aqui. A jogada dos pares deles é zero. Mas eu quero que seja o estado inicial. A opacidade será totalmente transparente em zero. Ótimo, aperte play. Nada vai acontecer porque não podemos ver isso. Está fazendo isso. Nós simplesmente não conseguimos ver isso. Então, precisamos de um segundo desses, eu vou até você, eu quero outro, opacidade. E eu quero essa opacidade. Um grande truque com isso é olhar, vê 100 como o tamanho e provavelmente funcionará. Ok, meio que funciona. É melhor ter certeza de que você é realmente explícito. Diga, eu quero que seja 100. Ok. E até onde eu quero que esteja depois de meio segundo. E olha o que vai fazer. Que eu vou fazer o Opacity primeiro e depois fazer minha jogada para que você queira isso. Ok, eu não. O que acaba acontecendo é que você pode ver aqui que diz: “ Então, o que estamos fazendo? Então, ele faz a opacidade primeiro e depois passa para essa. Então, se clicarmos neste último, o movimento k, ele está sendo dito, Ok , ele disse, Esse cara vai começar depois da seção anterior, a seção anterior como esta. Então, vai começar depois disso. Eu não quero isso. Eu quero mudar para acontecer com a seção anterior. Nós dizemos: Há muita leitura no Webflow para entender isso. Aqui vamos nós. Eles estão fazendo as duas coisas ao mesmo tempo. Você também pode ver aqui, você pode ver que esses têm um pequeno forro do lado de fora? Eles são agrupados no início. Eles estão agrupados, enquanto que se eu desfizer isso, ok, você pode ver que estão separados. Eles são como se houvesse uma espécie de linha entre eles para dizer faça este, depois aquele. Ok, então vamos ver qual movimento. E eu quero dizer que, na verdade, comece com isso, certo? As minhas são meio estranhas. É por causa do meio que ainda está desaparecendo aqui embaixo. É porque você sabe por quê? Não está esperando? Na verdade, é só passar muito tempo fazendo a animação. Então, a animação de movimento tem essa chamada elástica. Eu vou me livrar desse. Mais abaixo. E, com sorte, vamos lá. Está meio que desaparecendo à medida que avança. Mesmo assim, ainda não é. O que podemos fazer com as capacidades. Podemos dizer que isso demorou um pouco. Ok, vamos atrasá-lo por meio segundo para que ele realmente comece a fazer sua parte meio segundo nessa pequena animação. Talvez você precise brincar com os atrasos. Isso pode ser suficiente. Eu vou me livrar do meu. Como você os exclui? Você vai até aqui e diz que está na arma passiva, sabe o que eles eram. Assassinada, uma também sumiu porque vou fazer com que ela pule do chão. Salve isso. Como faço para que ele pule do chão? Então, vamos voltar aos estilos. Não tem nada a ver com as interações, tem tudo a ver com seu contêiner. Então, há um diblock enrolado na parte externa. Ali está lá. Quero dizer, mesmo com um nome, vamos chamar essa animação de um herói div. Tudo o que precisamos fazer é dar uma olhada nesse chamado Overflow. Ok? No momento, qualquer coisa que esteja fora dessa div como visível ou que você possa dizer é que qualquer coisa fora da div é invisível. Está meio que cortado nas bordas. Porque eu era a fonte. Acho que tenho uma altura de linha muito grande nela. Então, o que eu vou fazer é, na verdade torná-lo um pouco maior, você sabe, um pouco de preenchimento para que eu possa ver a parte inferior. Aqui vamos nós. Tudo bem? Tudo bem, agora vamos jogar animação. Vou usar o Command Shift P para ir para o Preview. Você pode ver que ele meio que salta do chão agora? Você também pode ver pulado no topo, o que talvez não seja o que eu quero. Então, vou adicionar um pouco de preenchimento na parte superior também. Então você está acolchoando, acolchoando lá. Olha, fica aí o tempo todo. Tudo bem, vamos fazer o segundo. Então, novamente, eu não preciso ter nada selecionado. Eu posso ir até este e dizer: Aqui está o carregamento da minha página. Está fazendo isso. O herói pega a animação, ok, casaco, clique nela. Eu recebi uma mensagem fazendo apenas para mover. Agora vou clicar neste chamado takes portfolio. Eu vou fazer a mesma coisa. Vou adicionar um movimento a ele. Eu quero que ele, eu quero que ele esteja aqui, como estado inicial, porque é aí que eu quero que eles acabem. Lidar. Novamente, tem esse garotinho que fica de olho neles. Você não tem outro valor. Então, isso está fazendo disso um valor. Digamos que eu queira mudar para o portfólio de carrapatos. E eu quero que ele faça alguma coisa. Novamente, tem outro dizendo: Ei, você nem mudou os valores, como okey-dokey. Eu posso fazer isso. Eu quero iniciá-lo fora da tela, o que está fora dessa div com conjuntos de estouro, o que significa que ele salta para fora e vai funcionar de forma errada. Ok. Então ele começa seus corações da maneira errada, certo? Ok. Eu fiz isso errado. Mas eles têm problemas com isso, se eu sei. Vamos desfazer isso, fazer e fazer. Você pode ver o Undo? No momento, se eu desfizer porque estava arrastando, isso verá todas as minhas desfazeres ou entrarei naquele slide. Eu gostaria que eles os agrupassem. Isso pode ser verdade no futuro. Fluxo de trabalho, se você estiver assistindo, acho que desfazer deveria ser como todos os, porque eu deslizei por tanto tempo. Então, ele contou todos os números tão pequenos quanto Desfazer. Ok, então esse primeiro aqui não é o estado inicial. O estado inicial vai cair. E então este será configurado para digitar explicitamente zero. Agora vou clicar em play. Este aqui é o estado inicial. Lá vamos nós. Você pode ver que eles estão agrupados agora é o estado inicial e vai funcionar. Quem se lembra por que um está indo e depois o outro? Você pode gostar desse trabalho feito. Como eu disse, é a razão pela qual está lá, porque lembre-se, eles não estão fazendo isso ao mesmo tempo. Depende totalmente de você se você quer que isso aconteça, um apareça e o outro apareça. O que eu vou fazer é combiná-los, ok? E você pode fazer algumas maneiras. Eu posso dizer isso aqui. Não espere por esse cara. Eu quero que você vá com ele. Ok, eu quero que você comece com a seção anterior e eles meio que se misturaram. Você pode ver aquela pequena banda ao redor deles? Eu vou desfazer isso. Desfaça isso novamente. Na verdade, você pode simplesmente arrastá-lo até lá. Você não fez. Aí está você. Amigos. E a outra coisa quando eles estão lá, porque este é o portfólio e o portfólio dele, então meu TOC é como movê-los para colocá-los na ordem certa. Você pode ver que é um pouco complicado. Você pode realmente reordená-los, não faz nada porque eles estão na mesma pequena banda. Isso os reordenaria. Se você os arrastar quando eles estivessem separados, um aconteceria antes do outro. Ok. Qual é a diferença entre os dois? Por que um é feliz e cheio de vida e o outro? O outro é um pouco Palpatine, desculpe, PowerPoint, você é incrível, mas eu uso você como sua animação terrível. Já o Webflow, você pode ir aqui e dizer: eu vou usar o mesmo. Vou usar a densidade de entrada/saída e anunciar. Bom. Poderíamos sair impunes, mas como somos novos, coloque-o dentro e fora de casa. E a única outra coisa é que y é alguém indo rápido. O tempo, você pode ver que um leva 1 s, este está demorando meio segundo. Vamos fazer com que os dois sejam iguais e ver, agora há muita brincadeira, tipo, o que você acha? É meio legal? Porque o Dan tem que se mover muito mais rápido, mais longe. Está se movendo em uma velocidade diferente. Ok, isso é meio legal. Então, talvez eu faça que Dan tenha um pouco de atraso. Dan está atrasado. Aqui vamos nós. Longo demais. Ok. Se estivermos fazendo segundos, então 0,25, quarto de segundo. Sim, o truque é que estou atrasando muito, o que significa que a geração total é, na verdade, bem pequena. O que diz se eu posso obter 0,99495 ou enlouquecer. Desculpe, computador. Olha. Você consegue ver o atraso? Oh não, ainda está demorando 1 segundo, Dulles me. Vá. E 0,25 já fez isso. Tenha também um ponto de atraso de 9,5. Porque eu meio que quero que saia com isso. Tudo bem, é meio legal. Agora acabamos de fazer dois movimentos. Lembre-se de que tivemos que enviar mensagens de texto e opacidades. Você pode ter tantos. Você poderia estar fazendo 14 coisas diferentes para pegar Stan e depois ele foi para o portfólio. Definir o estado inicial é muito importante. E então, para o segundo, para ter certeza de que você realmente é bastante explícito sobre o que é, mesmo que seja meio que, você consegue ver? Está desaparecendo e diz que é zero. Nem sempre presume que dirá, bem, você não disse nada e é apenas um espaço reservado. Na verdade, digamos que eu queria ir para zero, que era sua base original. Você pode reordená-los, certifique-se de nomeá-los. Ok, você não será chamado nova animação, vou chamá-la. Lembre-se de dar um nome às suas aulas porque não é se você arrastar uma imagem e começar a tentar fazer isso com ela. E precisa ser uma classe aplicada a essa imagem ou atingir o que quer que ela seja. E embora isso não faça muito sentido agora, e quando estamos fazendo gatilhos de página, fazemos isso com o próprio elemento que estamos animando. Já o, mas fizemos antes e mais tarde, fazemos isso com os pais. Podemos adicionar a animação à div principal, o que fará mais sentido no próximo vídeo. Só uma coisa para lembrar. Pates aciona a coisa. E quando fazemos mais acionadores de elementos, você faz isso com o pai. Tudo bem, guarde isso. Vamos dar uma pequena prévia. Tudo bem, é isso, animação de carregamento de página no Webflow. 72. As imagens desaparecem e aumentam em movimento no Webflow: Olá a todos. Neste vídeo, faremos com que essas pequenas cartas fiquem pequenas cartas fiquem maiores e meio que desapareçam quando você passa por cima delas. Ok? Sim, deixe-me mostrar como fazer isso e o Webflow. Ok, para começar, vamos realmente usar aquela carta que construímos anteriormente no símbolo do curso. Atualmente, o que eu quero fazer é que acabei criar uma nova página no meu site, apenas chamada animação, enquanto o teste de animação, só para mantê-la separada de todo o resto, eu vou adicione uma grade para que minhas cartas cheguem a algum lugar para ir. Serão três colunas, uma linha. E eu vou pegar esse símbolo. Ok, legal. É uma miniatura de bacalhau, vai entrar aqui. E porque eu também não quero misturar isso com algo como nós, tem que ser um símbolo? Não, vamos apenas clicar com o botão direito do mouse e dizer desvincular instância. Então, ele não está mais conectado a esse símbolo, não precisa estar, mas pode ser. OK. O que vamos fazer também é que eu quero todo o COD. Eu tenho um cartão de código div, uma miniatura, encerro tudo , tudo está escondido lá. Legal. Então, o que vamos fazer com ele selecionado, vamos às nossas interações com raios e vamos fazer um gatilho. Última página de vídeo que fizemos. Essa coisa aqui tem a ver com um elemento. Você precisa interagir com ele ou o elemento precisa fazer alguma coisa. Agora, nosso elemento passará o mouse sobre o mouse. Ok? Vamos dizer que, ao passar o mouse, a ação será, e nós brincamos com um monte deles, mas não é como se houvesse um casal aqui que estaria tão perto. Pré-visualização. É meio que o que eu quero. Não é o que eu quero. Não há nenhum pré-fabricado que eu queira. Então, vamos criar uma animação personalizada. Ok, ótimo, isso não fez nada como antes. Vamos dizer, tudo bem, vamos adicionar um. Essa animação que vamos chamar essa garota, que COD? Cresça. E aperte Enter e, como antes, tenha o que você deseja animar. E eu vou dizer, além disso, eu gostaria que este aumentasse. Essa é um pouco estranha. Eu não sou muito estranho. Antes, talvez estivéssemos movendo esse texto, podemos começar abaixo e movê-lo para cima. Então, tudo começou em um lugar onde eu ainda não estava. Então, tivemos que fazer esse estado inicial. Este está começando exatamente onde eu quero. Eu não preciso ter um estado inicial. Então, o que acaba acontecendo é que tudo que eu tenho que fazer é uma escala de miniaturas do bacalhau. Durante um certo período de tempo. Eu vou fazer isso de uma certa forma, dependendo de você. Eu vou aqui um ponto para Provavelmente é um pouco grande, mas eu nunca fui exibicionista aqui. Portanto, não há uma visão inicial apenas para ter a segunda visão, você pode reproduzi-la. É um pouco mais simples se já estiver, se estiver lá onde precisa estar, você não precisa ter um estado inicial para alterá-lo e depois fazer que ele volte para o segundo. Este, já está onde precisa estar. Então, vou mudá-lo para ser um pouco maior. Meu x e y estão vinculados, então será 1,2 para cada um. E é basicamente isso. Espero que, vamos salvá-lo. Vamos dar uma prévia. E eu vou passar o mouse sobre metade das obras. Ok, então ficou maior. E o truque é ver isso. Novamente. Se eu clicar em desligar, clique no meu contêiner. Eu tenho esse gatilho, elemento gatilho e diz em Hover, esse bacalhau cresce, depois, ao passar o mouse, não faz nada. É esquecível. Isso é apenas arrumá-lo e passar o mouse. Eu preciso fazer a mesma coisa. Eu vou dizer, começo e animação. Eu não quero que cresça COD porque eles só vão fazer isso duas vezes. Eu nem tenho certeza do que aconteceu lá. Vamos adicionar outra animação chamada card e crescer. Muito inteligente, Dan. E eu vou dizer com o que eu quero fazer também. Vou adicionar mais e gostaria redimensioná-lo para um. Começou às 13h. Alguns deles são zero. É confuso. OK. Este começou de uma vez. Eu quero voltar para um e posso deixá-lo assim. Eu tinha que dizer, na verdade, o número um. E é isso. Eu não preciso manter o status inicial digamos, volte para um, por favor, no rollover, salve-o, vamos visualizá-lo. Passe o mouse. Passe o mouse. Embora seja legal. É um pouco lento. Então, parece uma olhada no momento disso, mas esse é o básico disso. OK. Vamos fazer alguns deles. Vamos fazer a miniatura do cartão, copiar, colar , colar e pré-visualizar este. E este faz um. Tudo bem, então vamos fazer isso, fazer com que pareça bonito e esse tipo de escuridão. Então, estou trabalhando neste primeiro aqui. OK. E vamos dar uma olhada na facilitação do crescimento do COD. Então, quando estiver pairando, vou fazer esse chamado Cargo. Ok, eu selecionei esse e gostaria que a duração fosse mais rápida. Provavelmente não. Eu só quero que a flexibilização seja diferente. Facilidade de entrada e saída de alguns desses. Vou usar um quadriciclo, apenas o formato do sim. Eles têm nomes estranhos. Nomes. Vamos dar uma prévia. Tudo bem. Sim, é aqui que Dan passa muito tempo jogando. Vou acelerar isso. Vá mais ou menos como aquele. Fui com entrada e saída, pego. E o momento foi bom. Eu preciso fazer o mesmo para o desagrupamento do COD. OK. Eu vou fazer o mesmo. Agora, o truque é que quando está desaparecendo, mesmo que eu faça o mesmo, o que foi? Ok, e guarde. E jogue. Vamos salvá-lo e visualizá-lo. Então eu clico aqui no comando Shift P, Control Shift P. Você descobrirá que leva muito tempo, o que você sente, como se saísse muito bem, mas depois demora muito para voltar. Está sendo minha experiência como animadora de longa data. OK. Média de longo prazo. E aí está que, se eu clicar no cartão e passar o mouse sobre algo parecido, seja lá o que for. O mesmo acontece em primeira instância, quando retrocede e meus custos pairam para fora. Ok, faça isso cerca de metade do tempo. Se demorar 1 s para aparecer, acho que se demorar meio segundo para aparecer, acho que cerca de um quarto de segundo geralmente é uma boa regra para como a torneira deve voltar. Mas metade do tempo necessário para chegar lá é meio bom voltar. foi assim. Essa é essa parte. Vamos fazer como outra parte de uma animação. Ao contrário do último vídeo, só precisamos ter cuidado, mas aqui, temos que adicionar mais coisas. Então, vamos entrar nisso onde ele edita seu estado inicial. Ok, eu gostaria que fosse um pouco mais escuro ou transparente ou algo assim. Então, eu vou clicar em plus, e há um monte de coisas que você pode fazer. Há mais alguns escondidos sob o filtro. O filtro tem esse aqui, na parte inferior aqui eu quero fazer algo com o filtro. E você pode ficar desfocado. O contraste de brilho é um monte de coisas aqui. Brinque com eles. Ok, o que eu vou fazer é que vaca crease pode ser legal. E eu vejo muito isso. Vou usar apenas o brilho. E o brilho é pesado 200 por cento é duas vezes mais brilhante, cem é normal, e você pode ir até 100 e ficar mais escuro. O que eu quero, provavelmente vou ficar mais escuro do que quero, apenas para ter certeza de que está muito visível neste tutorial em vídeo, com uma redução de até 50%. É aí que eu queria começar. Porque se eu jogar, está fazendo do outro lado, do lado errado, está ficando mais escuro à medida que sai. Então, o que eu quero fazer é dizer, na verdade, esse é o meu estado inicial. Esse é um daqueles momentos em que, em um passeio por eles, a escala só precisava de um porque o estado inicial já estava lá. É do tamanho certo. Este não é, o tamanho inicial precisa ser mais escuro, e agora eu posso criar outro, criar um filtro. Vou te mostrar um pequeno truque. Eu poderia percorrer o caminho mais longo que fizemos no último vídeo. Preencha para ir, encontre, vá editar, adicione o brilho e coloque-o de volta em 100. Ok, e isso funciona. Mas o que eu quero te mostrar um pequeno truque é esse aqui. Você pode clicar com o botão direito do mouse e simplesmente duplicá-lo. O certo, não o filtro de balança. Vamos duplicá-lo. Já não foi verificado que eu não sou mais o estado inicial. Esse é o estado inicial. Não há configurações? Este está desmarcado e eu tenho várias configurações. E o que eu vou fazer é fazer o brilho vá de lá, volta para 100, o que é simplesmente padrão. Nada realmente se aplicou. Salve isso. Vamos fazer uma prévia. Eles serão problemas. Então, eles parecem bons. Oh, não funciona. Se desaparecer, demorou uma eternidade, há duas coisas erradas. Vamos escolher o tamanho. Assista. O que está acontecendo. Por que está demorando tanto? Alguma ideia? Tudo, faça uma pequena pausa aqui, pensará por que está demorando uma eternidade para carregar, vamos reiniciá-lo e experimentar um pouco. Aqueles escuros, então é isso. Está desaparecendo e depois ficando maior, precisamos consertar isso. Então você clica no pai externo, você diz que o bacalhau cresce. Você pode vê-los. Há uma pequena lacuna no meio. Eu queria fazer essas coisas ao mesmo tempo, recebendo o mesmo grupo. Caras, vamos lá, vamos. Agora vá para a Pré-visualização. Todos vejam isso. Isso é metade do nosso problema. Vamos fazer esse outro. Por quê? Não vai voltar para a cor escura? Você pode gostar desse jeito. Pode ser ótimo, esse pode ser o ótimo efeito de design que você gosta. Mas digamos que eu queira que volte. O que fazemos? Você entendeu. Então, meu desagrupamento também precisa fazer isso porque no momento, superamos, temos esses pedaços extras. Ok, tem a balança e o filtro, mas meu crescimento desconhecido ou qualquer outro tem a escala. Eu vou fazer a mesma coisa aqui de onde quer que esteja agora, que é 100% de brilho. Eu gostaria de fazer outro para filtrar. Aqui embaixo. Eu gostaria que fosse brilho. E quem se lembra de como eu fiquei escuro? Não me lembro. Foi cerca de 50%, certo? Eu deveria ir e verificar. Eu vou, vamos tudo porque foi que meio que começou a vida aos 100. OK. Da minha renovação ou do meu crescimento. E agora estou dizendo Volte para 50. Eles serão incríveis. Depois de tanto tempo. Em termos de tempo, ele terá que testá-lo. Eu sei que diz sobre o núcleo. Eu sempre digo cerca de um quarto das vezes. Isso geralmente é para movimento em escala, às vezes com capacidade e brilho. Não é como se fosse um pouco mais de verificar isso. Vamos salvá-lo. Vamos dar uma olhada. Hubba. Hubba. Sim. Eu acho, eu acho que está tudo bem. Mas é muito legal. Eu adoro isso. Tudo bem, então já poderia ter sido um símbolo. Eu posso transformá-lo em um símbolo agora clicando com o botão direito do mouse e dizendo, bem, vamos fazer isso aqui. Poderíamos criar um novo símbolo a partir dele e dar a ele um nome para reutilizá-lo. Mas eu já comprei esse de antes e não quero confundi-lo. E também, na verdade, outra coisa que eu quero mostrar a vocês é que os pais selecionaram, entre nisso. E eu vou dizer, vamos falar sobre isso se você encontrar problemas engraçados, ok. Muitas vezes, esse, que faz esse gatilho indireto afetado , está funcionando para R1, funcionando perfeitamente. Quem o acionar, k, qualquer que seja o gatilho de ação, que é o invólucro externo que foi usado para essas coisas, vai se aplicar a ele. Você pode achar que , na verdade, só quer que isso seja feito com os elementos selecionados. Nem todos eles. Ok? Às vezes, a aula funciona. Eu quero que isso se aplique a todas as aulas. Ok, então vamos lá , vamos fazer isso. Este não será um estágio em que isso funcione para você. Mas, no momento, dê uma olhada. Se eu passar o mouse sobre ele, você pode ver que todos eles estão fazendo isso, pelo menos o crescimento em k acontece em todas as classes. Eu não quero isso neste caso, pode haver uma chance de nós, você quer. Então, se há um ponto zero de que gostamos, cara, é não fazer o que eu quero. Brinque com eles através desses três. Apenas aquele que eu selecionei e não se aplica. Esse efeito não reproduz nenhum dos outros nem se aplica a todos ao mesmo tempo. Ou este aqui com ele o aciona. Faça essas coisas. De qualquer forma. Tudo bem, é isso. Essa é a nossa imagem desaparecendo e ficando maior na rolagem no Webflow com Dan. Tudo bem, é isso. Nos vemos no próximo vídeo. 73. Movimentação de imagem em rolo em fundo parallax no Webflow: Olá a todos. Neste vídeo, vamos fazer isso como rolar coisas de paralaxe. Estou rolando para cima e para baixo e olha, parece que está meio que desfocando os frontais. Eu vou te mostrar como fazer isso. É chamado de paralaxe. Vai ser divertido porque está meio que interligado, não apenas as habilidades de animação que aprendemos nos últimos vídeos, mas também algumas das outras habilidades que aprendemos ao longo do curso. Vamos analisar o posicionamento e transbordamento, o índice Z e outras coisas. Todo esse conhecimento prévio nos permitirá fazer isso com relativa facilidade. Tudo bem, vamos entrar. Deixa eu te mostrar como fazer isso. Tudo bem, primeiro, eu criei uma nova página só para manter tudo separado. Eu adicionei uma navegação porque acho que uma página precisa de um EV. E eles também ajudam a nos dar algum tipo de contexto de onde estamos rolando na página. Então, para que isso funcione, vamos adicionar nossa seção, ok, vou dar um nome a essa seção. Vou chamá-lo de nuvens de seção. Vou dar uma altura. Eu não vou dar uma altura. Pode deixar como está. Está em um contêiner. E então, embora possamos fazer isso no contêiner, é melhor colocar uma div dentro dele e adicionar toda a nossa animação a ela. Vamos dar um nome à nossa div para que possamos encontrá-la facilmente novamente, nuvens de div clínicas. Tudo bem, vamos adicionar nossos diferentes elementos em seu painel de ativos. Na verdade, eu já importei o meu, mas você encontrará nos arquivos de exercícios do seu portfólio, há um chamado Cloud front and back. Traga os dois e, em seguida, traga os dois. Ok. Então tem um outro cara lá, ele está lá. Então, existem SVGs, o que é meio bom. Bem, é ótimo. Mas o comentário é muito grande. Por padrão, imagens, você consegue ver 100% da largura em que elas podem ter? Porque em SVG pode ser de qualquer tamanho ou gosta, simplesmente enorme. Então, vai rolar. Arraste-o para baixo até um tamanho apropriado. Quão grande é apropriado? Eu só fiz disso um Illustrator, encontrei alguns estilos de nuvens e depois os exportei encontrei alguns estilos de nuvens como SVGs para vocês, para que vocês possam usar qualquer coisa. A próxima coisa que eu preciso é aquele pedaço de texto. Eu poderia ter exportado para cá. Ok, eu fiz, mas então eu pensei que na verdade é melhor ter um texto editável. Você pode mudar isso e não é como se fosse consertado para sempre. Então, vamos adicionar isso. Então eu vou te colocar em bloco de texto, já tinha você de alguma forma. E eu vou estilizá-lo. Vou acelerar isso porque estilizamos carregamentos de textos e damos uma aula e , na verdade, estou antes de você ir. Então, haverá meu texto, as nuvens, e eu vou estilizá-lo. Você espera lá. Ok, então o que fazemos agora? E nós temos dois, isso tem que ser sobre isso. Isso não funciona. Como faço para colocar isso em cima disso? Porque é isso que eu quero, certo? Eu quero que isso esteja em cima disso. Como fazemos isso? Você se lembra que já fez isso antes? Paula, você ganha uma estadia dourada se você se lembrar pelo menos do termo número par, você nem precisa saber onde está, tudo bem, se você se lembrou, é essa pessoa aqui que precisa ter posicionado, definido como absoluto, então eu posso movê-lo. O que vou fazer, porém, é dar a ele um nome de classe ou podemos fazer depois. Se você disser posição absoluta, dá a ela uma imagem clássica. Vou chamar essa imagem de nuvem frontal. Excelente. Ok, ele está posicionado em absoluto para que eu possa movê-los. O que é uma coisa que eu preciso lembrar lembrar que Dan disse algo sobre quando fizemos absolutamente, havia outra coisa para lembrar. Se você se lembrar do momento em que ele está usando o corpo. Ok, e tudo bem. Contanto que você não adicione nada acima dessas nuvens, caso contrário, ele gravará tudo. Então, o que você diz é o pai, que é o meu caso, a div obscurece você, eu disse ao parente. Ok, agora essa pessoa é relativa a esse invólucro. Essa referência sempre aparecerá, então é boa e útil. Agora podemos simplesmente mexer com isso para colocá-lo na posição correta. Agora, não passe muito tempo aqui ficar perfeito porque existe uma coisa de repetir o teste quando você está fazendo isso e apenas obtê-las aproximadamente, precisamos que elas tenham aproximadamente o tamanho certo, faça algumas experiências e depois ajuste. Ele vai estar lá. Eu não vou mover esse. Eu poderia, vou ter um plano de fundo, um meio termo e um primeiro plano. O meio termo geralmente é não tocar. É assim que ele se torna um meio termo. Então, este aqui, porém, eu vou fazer a mesma coisa em um nome de classe, imagem, Cloud, Beck. Clique. Ok, e eu vou dizer que você é uma posição de tipo absoluto. Corrija um pouco meu texto. Ok, eu vou abaixá-lo um pouco. Meu texto eu também poderia tornar absoluto, ou eu poderia simplesmente adicionar um pouco de preenchimento para você o que você quer fazer. Hum, é meio que, meio que empurrá-lo de cima para baixo, seria como se fosse. Não importa neste caso, Qu, mais ou menos algo assim. Tudo bem, se você tem tudo, todo mundo tem um className, que é uma das linhas. Ele precisa estar dentro de um contêiner que possamos usar porque nos anteriores adicionamos a animação a cada um deles. O que vamos fazer é adicioná-lo aos pais agora, ok, então vamos selecionar o pai que é chamado de nuvens de definição. Eu vou dizer em direções, eu quero acionar o gatilho. O que eu quero é aquele que diz que, ao rolar na exibição, isso é muito legal. Enquanto você estiver navegando na exibição, por favor. Você pode fazer algo por mim? Ok, porém, o problema é que não há rolagem no momento. Se eu visualizar, não consigo rolar nada porque não há, não é longo o suficiente. Então, o que vamos fazer é fingir por enquanto. Ok, eu vou te mostrar como fazer isso funcionar quando é como estar aqui em cima. Mas, no momento, vou empurrá-lo para baixo. Então, eles têm nuvens e dizem que as nuvens div terão uma pequena margem. Ok? Fica fora da tela na parte inferior e adiciona um pedaço, não negativos e positivos, para que eu possa passar por essa coisa e fazer com que pareça legal. Quando estiver trabalhando em seu próprio site, você terá mais conteúdo para superar falsificando-o no momento com mitógenos gigantes rolando. Ótimo. Então, nuvens e direções já começaram a cantar, dito isso enquanto rolamos, ou vamos fazer no pergaminho, vamos fazer uma ação de ação selecionada. Não temos nada. Ok, então vamos criar uma animação personalizada. Ignore isso, mas, no momento vamos examinar os limites. Isso não era para estar lá. Eu gravei esse vídeo cerca de três vezes agora, tentando simplificá-lo. Não é simples. Então, essa é a mais simples. Está indo muito bem. Eu fiquei preso nas tangentes para fazer com que parecesse incrível. Ele vai fazer com que pareça, ok, bom. O princípio em toda parte. Você também não tem nada. Então, vamos dizer, vamos adicionar um. Eu vou dar um nome a ele. Vou chamar isso de Cloud Scroll. Excelente. E o que vai acontecer é que haja 0% e 100%. O que acaba acontecendo é a animação começará aqui quando 0% significa exatamente quando eu vejo onde você está pouco antes de aparecer na tela que está aqui. E quando passar por essa caixa, as mandíbulas postam aqui. Ok, é aí que 100% termina. Se você não entende, vamos fazer isso. Ok, então isso significa que se eu tiver, se eu quiser que essas nuvens se movam, ok. Agora vamos nos afastar de tudo. Dizemos que eu quero que essa nuvem aqui tenha uma ação. Tudo vai se mover a 0%, o que é até aqui. Onde está? Eu gostaria que caísse. Os que estão mais próximos de você devem começar do zero. Ok, vou abaixar um pouco o meu. Até onde hoje você vai prová-lo. Vai cair e, em seguida, com 100% de mãos dadas já me deram uma, eu quero que suba. E se você movê-lo bem longe, ele dá o tipo certo de mergulho na frente. Provavelmente está se movendo mais rápido pela câmera. Bem, se eles podem liberar Co, vamos fazer um teste. Você pode visualizá-lo aqui. Então clique aqui. Então, quando está aparecendo na tela, é onde quer que eu o coloque. Nós realmente não podemos ver isso. Portanto, realmente não importa onde você o coloca em 0%, só precisa estar perto de onde você quer que esteja , porque ele nem consegue vê-lo. Mas, eventualmente, quando ele passa pelo pergaminho, eu posso ver 35, 35, 31% dele. Você pode ver que está passando. Agora. Está funcionando, posso ver que está pulando muito. É engraçado na minha roda de rolagem. Ok, eu tenho um rato. Eu uso uma roda de rolagem da Logitech. Eu adoro isso na maioria das vezes, certo? Neste caso, porém, ele faz esses saltos e parece nojento. entanto, meu trackpad no meu Mac, veja este St. Eu não fiz nada além do meu trackpad. Parece bom. Veja isso e veja minha roda de rolagem. Baba, baba usa um pouco de nervosidade. Isso será verdade quando as pessoas estiverem realmente usando seu site também. Então, é um pouco chato. Às vezes, não parece tão bonito nos computadores de algumas pessoas, mas meu trackpad é bom. Então é mais ou menos isso, certo? Nós vamos fazer mais. Mas você basicamente entendeu. Isso está mais perto, então ele começa para baixo e vai para o topo. Vamos fazer o plano de fundo. Deixamos esse cara porque ele é o meio termo. Parece que ele está fazendo alguma coisa, embora não esteja fazendo muita coisa. Essa porque vai ficar mais para trás, o que não é atualmente. Nós consertamos isso primeiro? Sim, vamos corrigir isso primeiro. Isso está no topo da imagem. Quem se lembra de como eu coloquei as coisas umas em cima das outras? Você se lembra que há um índice z. Então, vamos fazer isso. Então, essa imagem está de volta, certifique-se de que ela saia disso, salve-a, volte aos meus estilos. Ok, não tem nada a ver com a animação. Vou clicar nesse cara aqui, imagem chamada Beck. Ele já é absoluto, o que me dá acesso ao índice z. Então eu vou dizer que você tem 11 anos. Este aqui leva Cloud. Não consigo ver esse índice. Então, vou usar o relativo porque relativo significa que ele meio que oferece essas opções. Mas ele mantém seu espaço, ocupa seu lugar no código. E eu vou dizer que você quer, o que está acima dessa. Esse cara aqui, ele já pode ver o índice Z porque nós os tornamos absolutos. Ele vai fazer três anos. Tudo bem, aí está minha camada. Agora, essa pessoa, para onde volta a nuvem? Vamos fazer com que ele anime. Então, se eu o selecionei e entro aqui, não há nada parecido porque talvez o pai comece, ele é o gatilho. Ele meio que controla tudo. Então, quando você entrar no Cloud, role. Ok, agora podemos ver as partes individuais agora, essa pessoa ou como minha nuvem de tiques e esta aqui, foi mais fácil selecioná-las aqui no navegador. Vou adicioná-lo, vou ter que movê-lo 0% para onde eu quero que eles estejam. Se você quiser que pareçam que ele está em segundo plano, você os coloca em cima e os move para baixo. Enquanto esse cara, você começou mais baixo e os moveu para cima. Isso é o oposto. Então eu vou dizer que você é um pouco mais alto e simplesmente não passa por tanta emoção. Isso precisa ser rápido e parece que está próximo. Isso precisa parecer lento, cabe na parte de trás. Muitos testes. Então aí está ele. Vou adicionar outro desses na parte de trás. Não o deu automaticamente para mim. Então, vou dizer mais em uma mudança, porque eu selecionei isso, ele recuperou o Cloud. Ok. E eu vou movê-lo para mim, logo abaixo. Então, onde está o número, na frente ou atrás, no topo? Ele está um pouco mais alto e precisávamos do fundo. Ele está um pouco mais baixo. Isso vai funcionar? Vamos dar uma chance. Vamos ativar a pré-visualização ao vivo. Talvez não use esse mouse pad, rastreador de mouse. Eles estão olhando, todos têm horários diferentes, paralaxe feito. Vamos fazer outras coisas só para arrumar tudo, mas você pode ir para a cidade conosco com seu índice z. Você pode acabar com dez camadas diferentes. E você terá dez coisas diferentes aqui. E as coisas que estão mais para trás precisam se mover mais devagar e se mover de cima para baixo. E as coisas que estão na frente precisam se mover mais rápido em todas as velocidades diferentes por velocidades aminadas, esta aqui na frente começa aqui e termina lá. Se você quiser que algo fique mais próximo da tela e do fosfato, ele só precisa ficar mais alto. Estaria se movendo mais rápido no z e x precisa ser mais alto. Como estamos nos sentindo sobre isso? Ok, não é pré-visualizar duas em pré-visualização usando a roda de rolagem e usar minha mão esquerda. É muito legal. Este é um modo de pré-visualização porque elimina as caixas. Ei, paralaxe é incrível. Meu problema. Vou te mostrar alguns exemplos da Índia. Mas, como eu sei, parece que todo mundo acabou de descobrir isso e eu adoro coisas sutis como essas. Tem algo se movendo, mas as de paralaxe são como, eu nem sei clicar nas coisas, dar uma volta e é muito confuso. As pessoas podem enlouquecer um pouco com a paralaxe se você puder, como quando você aprende a esfera de Lynn no Photoshop e simplesmente coloca reflexos de lente em tudo. Está tudo bem. Você pode paralaxar tudo, mas saiba que depois de um tempo, certifique-se de fazer alguns testes com o usuário para garantir que as pessoas possam realmente operar. Seu site não é como Meu Deus estava acontecendo. Tudo é desconcertante. Tudo bem, vamos fazer um pouco mais. Eu só quero meio que, eu não sei se você está comigo e você está tipo, Isso parecia fazer sentido e você praticou isso. pausa agora, vá praticar. O vídeo algumas vezes. Demora um pouco. Eu quero que você seja feliz. High-five. High-five. Ok. Vamos mais longe, porque você provavelmente terá outras perguntas e outras coisas que eu quero te mostrar, mas eu quero me sentir como um ponto final. Nós terminamos. Foi bom que funcionou. Vamos dar uma olhada em outras coisas. Você pode fazer algumas coisas legais com o físico e editá-lo. Então você tem que se lembrar de você quando estiver aqui, você vai para as nuvens div. Você pode ver o garotinho, o pequeno raio para entrar nele, caso contrário, você não conseguirá encontrá-lo. Ok. Os gatilhos da página são mais fáceis de encontrar quando estou aqui. Estamos ignorando tudo isso e essa é a parte que chamamos de entrar nela. E agora estamos meio que na parte da animação. O que podemos fazer também para ajudar, ajudar com a profundidade é que você pode brincar com. Então, fora da animação, não estamos fazendo animação no momento. Vamos ficar aqui no meu estilo. Na verdade, sou essa nuvem frontal. Vou fingir que há um pouco de profundidade de campo fora de foco. Eu vou dizer que você tem um efeito de alguns filtros e um deles aqui é azul. Então eu posso recusar. O truque é que você entende o que estou tentando fazer. Estou tentando gostar, fazer com que fique fora de foco. Provavelmente é melhor quando você tem mais alguns elementos e depois corre alguns. Mas sim, parece que então acionar este está bem. Parece que talvez seja de baixa qualidade. Eu quero ficar obviamente embaçado sem que seja um borrão louco. Você pode brincar com esses dois. Dois são bons para mim. E isso significa apenas que quando eu visualizo, parece que está meio desfocado. Alguns bits estão em foco. Você pode ver que está meio confuso por fora. Você gosta disso? Você pode olhar para cima. Outras coisas que eu quero te mostrar. Agora, não o fazemos nesse caso, mas talvez você queira configurar as nuvens div a serem criadas, mas não na animação. E aqui podemos definir o transbordamento como oculto para que você só possa ver coisas aqui dentro. Você pode jogar com o quão grande isso é. Talvez você só precise prendê-lo porque, digamos que grandes nuvens esfriam, mas é porque você tem uma parte aqui embaixo. Outra seção que não precisa ser afetada porque está cobrindo tudo. Você pode bloqueá-lo em um pequeno limite como o meu. A roda de rolagem realmente não funciona, mas meu trackpad funciona. É lindo. Como torná-lo mais bonito? Suavização, suavização, acho que está ativada por padrão. Agora vamos dar uma olhada. Clique na div principal. Vamos pegar a animação. Vamos entrar aqui. Então, coisas suaves. Agora está ligado 50% com ele desligado, vamos ligá-lo totalmente. Na verdade, esse é o melhor exemplo. E provavelmente não é o que queremos, mas nos dá um exemplo. Você pode ver que tudo está tão lento? Veja isso. Se eu passar. Você pode ver se eu rolo muito rápido? Nada realmente acontece, até dizer que, se eu rolar até aqui, demoro muito para me atualizar. Ok, essa é a suavização ou quando está um pouco ligado, dá um pouco mais de realismo, como se não fosse mecânico. Eu posso ir. Você pode ver que ele se recupera lentamente? Onde, se eu o tiver em zero, será muito mecânico e estaremos onde quer que eu esteja. Portanto, não há amortecimento. amortecimento é do jeito que eu quero. Ok. Eles chamam isso de suavização. O que é bom? Tudo é bom. Eu tenho uma peça em algum lugar, meio que naquela parte superior. Os 70% melhores parecem muito bons. O que é um tipo de salto? É porque ninguém carrega um site até a metade. Você normalmente carrega um site aqui. Então, está pulando para o modo de visualização. E é assim que são usados para levar as nuvens aonde elas precisam estar. Isso faz sentido? Ninguém vai ver esse salto. Vou me livrar da minha outra coisa. Vamos fazer a última coisa. Como faço para que funcione quando está totalmente no topo. Então, vamos fazer isso agora, vamos acabar com isso. Então, vamos para as nuvens de definição. Vamos remover a margem. Ainda precisamos de uma margem na parte inferior porque, se não conseguirmos rolar, não podemos fazer a animação de rolagem funcionar e ela meio que funciona, certo? Você pode ver aqui, vamos ao meu trabalho. E o que você pode fazer aqui é esquecer a próxima parte e mexer com sua animação e brincar aqui até mover a frente e o verso para os lugares certos. Ou o que você pode fazer é permitir que você faça isso aqui, limites de animação. Assim, você pode clicar em qualquer um deles. E o que ele faz é dizer, comece a animação, zeros terminam nas animações 100%. Vamos verificar rapidamente o que eles querem dizer com isso. Então, isso é isso, aquela conversa sobre esse espaço versus esse espaço, o que fazemos? Então diz que, nesse zero por cento, aplique-o quando você começar a entrar, o que não funciona porque funcionou antes porque começamos a entrar, rolamos para baixo. Já está lá, está totalmente visível. É totalmente visível. Eu começo a animação quando ela está totalmente visível. Agora isso me pegou e você fica tipo, Oh, eu vou trocar o envenenamento para ser interrompido quando estiver saindo. Saiba, não vamos parar quando ele estiver saindo porque vai sair imediatamente. O que estará 100% completo quando começar a sair. Desculpe, eu estava confuso em deixar isso neste. Você pode ver que diz invisível. Essa é a minha, eu não sei. Não quero ligar, mas não li. Parado quando está totalmente visível, o que é, e eu quero que esteja na animação, chegue ao ponto de 100% quando estiver totalmente invisível. Invisível, o que significa, vamos dar uma olhada. Totalmente invisível significa que quando está completamente apagado, você diz, Vamos para o meu belo pergaminho. Aqui vamos nós. Também o temos no topo. Ok. Então, a única outra coisa, eu não vou entrar muito nisso, mas aqui, você pode jogar com o offset. A diferença que significa que essa coisa aqui é na verdade totalmente visível, mas já está totalmente visível por um bom tempo. Como se já houvesse um pedaço perdido no topo. O mesmo acontece quando está totalmente invisível. Ok, você pode decidir que queria terminar um pouco antes. É totalmente invisível. E você pode ver essa diferença em porcentagens diferentes. Brinque com isso. Está ficando muito nerd, mas você conseguirá a maior parte do que precisa sem nada disso. Mas talvez seja necessário mexer no deslocamento, basta arrastá-lo até o atual St. 80% para ver quais são os resultados. Você tem uma ideia de como funciona ou ignora e simplesmente brinca aqui. O que eu acabo fazendo é passar mais tempo aqui brincando com os diferentes horários de onde ela realmente está, a frente. Agora, quando acabar, se parecer aqui? E então é só ir e visualizar o que parece aqui. Visualize sua aparência. Está aqui. Pré-visualização. Isso é, eu acho mais útil. Novamente, se você desfizer, ok, depois de arrastar essas coisas, se eu arrastá-la de alguma forma contou todos aqueles pequenos passos como se houvesse 1.000 pequenos desfeitos. Vou apenas configurá-lo para, vou apenas arrastá-lo de volta. Provavelmente podemos retar. Tudo bem, é isso. Isso é paralaxe. Última pequena prévia. Usando minha barra de rolagem, usando meu trackpad. Eu também gosto. Esses são os fundamentos. Temos camadas diferentes, diferentes índices de SI e brincamos com Al. E o que fazemos? Fizemos um gatilho de elemento. É durante a rolagem da entrevista e editamos nossa animação. Agora você pode, com essas ferramentas, aplicá-las a outras coisas. Então, para obter bons exemplos dos de outras pessoas, o fluxo de trabalho tem uma coisa interessante chamada Made in Webflow. E você pode digitar paralaxe. Parallax não pode soletrar de outra forma, mas paralaxe, essa é a palavra que você quer. E vá em frente e veja os exemplos de outras pessoas. Ok, então vamos dar uma olhada em algumas delas. Há exemplos incríveis aqui, ok? E eles meio que pegam o que fizemos e adicionam mais M0 mais oito a mais. Ok, agora espero que você tenha algumas das ferramentas para poder seguir esses tipos de tutoriais. Hall, esse é um rato. Eu adoro isso. Então, olhamos para outro. Esse aqui. Eu amo esse. Veja as nuvens se movendo. E tem paralaxe. Paralaxe e nuvens em movimento dobram. Então, porque esse, oh, 3D e o paralaxe também. Porque as estradas podem ser niveladas. São super legais. Quando você faz isso conosco, Dan. O curso já está até agora e são esses anjos. Acho que fizemos muitas coisas. De qualquer forma. Agora você deve ter algumas habilidades para poder criar algumas dessas coisas seguindo outros tutoriais. Tem sido divertido, especialmente esse que usamos em coisas como transbordamento. Nós empatamos em coisas como, lembre-se de que posicionamos a posição relativa, índice z absoluto é todo tipo de coisa legal para fazer essa paralaxe funcionar. Tudo bem, é isso mesmo, paralaxe no Webflow, veja no próximo vídeo. 74. O fluxo na web é bom para SEO: Olá, estou fora do gravador de tela na vida real. Vida real. Neste vídeo, falaremos sobre Webflow é bom para SEO? E também neste vídeo, falaremos sobre o que é SEO, mais ou menos, o que acontece nas páginas e pelo que você é responsável como designer de fluxo de trabalho? Isso está fora da página. E quem é responsável por isso? Sim, vamos fazer os dois. Então, é bom para SEO. Estou muito surpreso. Sou uma pessoa razoavelmente proficiente da ACO, então meu trabalho em tempo integral, mas construí alguns negócios ao redor. Sim. Basicamente, sobre uma classificação muito boa nos mecanismos de pesquisa. Ok, então sim, fiquei surpreso quando entrei pela primeira vez no Webflow e o quanto eles desenvolveram desde início sobre o que você pode fazer, como é a anomalia, essas coisas meio básicas. Mas é se você tiver experiência razoável em otimização de mecanismos de pesquisa, ou se quiser melhorar e garantir que os fluxos de trabalho sejam capazes disso. É surpreendente a profundidade que eles permitem que você faça. Fiquei surpreso, então sim, é bom. Mostraremos nos próximos vídeos, como algumas das coisas básicas da página, mas sim, não, da minha parte, pelo menos estou particularmente impressionado com as habilidades de SEO do fluxo de trabalho. Primeiro, vamos falar sobre SEO na página e fora da página. SEO, otimização de mecanismos de busca. Você provavelmente sabe o que é, bem, a classificação do seu site nos mecanismos de busca. Precisamos otimizar para isso. Ok, e há meio que duas partes nisso. Há na página e fora da página. Como designer de sites que usa o Webflow, você é totalmente responsável pelo SEO na página que pode e deve fazer parte do seu trabalho enquanto você trabalha em seu site. O off-page é algo que você pode fazer, mas geralmente depende do cliente. A diferença é que nas páginas, coisas que estão na página, veremos coisas como títulos Meta, palavras-chave, texto alternativo, coisas que são relativamente fáceis de fazer. E então, as coisas fora da página são coisas como criar links para o seu site. Eu perguntei a você, acho que no início do curso, tipo, ei, se você gosta deste curso, link para o meu curso Webflow, porque esses são difíceis de conseguir, muito difíceis de conseguir, mas são muito valiosos para o nosso portfólio. Se alguém criar um link para ele de outro site, do blog de outra pessoa ou outro site confiável que diga: Ei, esse cara é muito bom em design de UX. Vá conferir e há um link para esse site que é incrível, fora da página. Então, outra pessoa do seu site está vinculada a você. Esse é um exemplo de SEO fora da página. Tem muito mais, ok, e é um grande buraco minhoco, buraco negro, um dos buracos para explorar. E essa deve ser uma das coisas que você faz depois de aprimorar suas habilidades de fluxo de trabalho, seu Galen na página. K é explorar o SEO fora da página. E sim, é como as melhores coisas que você pode fazer, mas é muito, sim, é muito valioso para fazer um site funcionar, mas potencialmente há muito do que fazer. Eu adoro isso. Eu vou fazer um curso completo sobre SEO fora da página. Eu faço isso o tempo todo das minhas coisas para classificar os poços que você encontrou? Sim. SEO on-page off-page que vamos fazer em você precisa ir e fazer fora da página é simplesmente continuar com isso e eu vou te mostrar onde ele está e onde deve ser feito em todo o fluxo de trabalho. 75. Etiquetas para título de descrição mista robôs e mapa do site explicado Webflow: Olá a todos. Neste vídeo, vamos abordar apenas um pouco de SEO de alto nível para o site, ok, apenas algumas coisas que você deve fazer. E também veremos as tags de título de SEO e as meta descrições de suas páginas. Tudo bem, vamos começar com o SEO em todo o site. Então, vamos acessar todos os sites que você pode acessar nas configurações do seu projeto, como um tipo global de guia geral de SEO de sites. A única coisa que abordaremos aqui é essa aqui. Razoavelmente importante. Basicamente, no momento em que estamos com esse membro, que está nesse tipo de site de desenvolvimento, como um site de teste antes de obter seu próprio nome de domínio. O que pode acontecer é que o Google, o Yahoo ou o Bing ou qualquer outro mecanismo de pesquisa possa aparecer e na verdade, indexar o site e potencialmente classificá-lo. O problema agora é que ainda está em pedaços? Não está pronto para o horário nobre e não quero que o Google pense que esse é o nome do domínio. Então, quando eu lancei a outra versão, ela vai ver duas versões , e essa é a original. Então, o que você pode fazer é realmente dizer Desativar. E eles dizem fluxos de trabalho, subdomínios. Então, o Webflow nos dá esse site, o domínio, nós, o subdomínio desse. Então você pode simplesmente dizer Google, não verifique este bloqueador de sites, por favor. E isso adiciona um pouco de coisa ao site para dizer: Não entre aqui. No entanto, isso pode ser ignorado, pelo Google ainda pode chamá-lo, mas eles não vão adicionar você aos rankings dos mecanismos de busca. Quando você obtém seu domínio completo. Isso não importa. Você pode deixar isso ligado e desligado. Isso simplesmente não vai permitir que esse tipo de site de desenvolvimento seja pesquisado. É para isso que serve essa coisa de robô. Ele criará automaticamente um robots.txt e, para dizer User-Agent, o Google permite entrar no meu site. Pode, mas é útil porque você não quer classificar, eu acho, o site e depois competir com ele quando ele sair para seu ótimo URL no futuro, eu vou publicar aqui, não ia passar por muito isso. Vamos fazer mais um. Ative isso, ok, basta gerar um mapa do site para deixar claro no momento, e seu site é bem pequeno. Então, um mecanismo de pesquisa como o Google virá e será capaz indexá-lo rapidamente por índice e média, como rastreá-lo, conferir e decidir o que está em quais páginas, o que está importante, do que se trata. Ok, você pode facilitar isso gerando um mapa do site. Eles se tornam cada vez mais importantes quando o site fica enorme, ok? E você pode garantir que os mecanismos de busca saibam onde tudo está e como estão todos interconectados. Mas, no momento, um mapa automático do site é perfeito. Além disso, há muitas listas de verificação on-line semelhantes para dizer: meu site é bom? E dirá que você não tinha um mapa do site. Você pode simplesmente clicar nele e dizer, agora eu faço. Tudo bem, então isso é uma espécie de macacão para a página. Vamos entrar em mais detalhes específicos da página. Então, volte ao designer. Tudo bem, então cada página tem algumas meta-informações que você precisa adicionar para que possa ser tudo o que pode ser quando está classificada em mecanismos de pesquisa como o Google. Então, precisamos ir até aqui para nossas páginas ou esta. Você pode ir para os dois. De qualquer forma. Vamos fazer isso primeiro na página inicial e pegar essa pequena engrenagem. Esse nome está no topo. Você não precisa se preocupar com isso, é apenas como você faz referência a ele dentro do Webflow. O importante é esse aqui, Configurações de SEO, há tags de título e uma meta descrição. Eles são muito importantes porque, se você não os tiver em sua página, é improvável que você classifique tudo. E depois de preenchê-los, não é como se, com certeza, você começasse a ficar em primeiro lugar, mas é uma daquelas coisas em que você pode classificar o número 1000000º. Se você não os colocar, o que eles fazem? Você verá uma espécie de resultado de pesquisa aqui. Na verdade, eles aparecem nos rankings de busca do Google. Então, vamos dar uma olhada. Digamos que eu esteja tentando, eu esteja tentando, eu estou tentando me classificar para isso. É isso que as pessoas pesquisarão no Google e é isso que eu quero que apareça. Então, eu quero que isso esteja na minha página inicial meu conjunto mais importante de palavras-chave. É local para mim e é o que eu poderia estar fazendo. Vou adicionar meu nome. Ok? Porque alguém também pode estar procurando meu nome por causa do meu portfólio. Talvez eu tenha visto isso quando eles retiraram meu portfólio. Eu quero que meu nome toque também. Você pode ver lá? Isso é o que nossos colegas. Eu fiz uma pesquisa aqui no Google, ok, para web design limerick, tem alguns mapas. Então, talvez eu queira ir e garantir que meu escritório tenha um local específico. Certifique-se de que meu escritório esteja realmente registrado no Google Business, ok, e você verá aqui todos esses resultados. Essas pessoas podem ver uma espécie de web design, web design limerick, WebAssign limerick. Mas design limerick, você consegue ver o quão importante é essa tag de título? Como este, web design Ireland, ok? Todas as melhores e seguras empresas em limerick. Então, essa é a tag de título que você precisa ser exclusiva para cada página. Então, se eu continuar dizendo meu portfólio para o clube de caiaque ADEA, eu o chamaria de projeto de web design de caiaque ADEA em limerick. Portanto, é único, mas também tem minhas palavras-chave. Portanto, pode ser complicado ter centenas de páginas, mas é muito importante porque não adianta ter isso em todas as páginas. Isso não vai tornar seu site mais divertido em web design, os mecanismos de busca simplesmente não sabem o que está nessa página ou é único. Então, talvez eu tenha páginas em que seja UX, UI ou design gráfico. Então, o sentido geral é que tudo gira em torno do design. E tudo gira em torno de Limerick. Talvez eu tenha algumas áreas diferentes. Estou no condado de Limerick, mas estou em uma cidade diferente, talvez uma vila. OK. Então esse é o título. Você pode ver isso lá. A descrição é igualmente importante. Esse pedaço está na parte inferior aqui, ele é cortado para que você possa ter apenas uma certa quantidade de caracteres. Não me lembro exatamente o que era. Ele te diz, faz o comprimento 155-300, ele decide que você não pode decidir o quanto ele corta. Só que o corta, se necessário. Então, aqui está uma descrição um pouco mais longa. Então, novamente, eu acho que você pode achar isso difícil quando você está no começo. Basta dar uma olhada, digitar as palavras-chave que você sabe, se for um setor do qual você não faz parte e você é responsável por isso. Saia, faça uma pesquisa e veja o que as outras pessoas estão fazendo. Ok, como você pode ver que criamos o limerick também aparece na descrição, então certifique-se de que ele se repita nele. Mas isso é mais uma célula. Isso atrai pessoas do alto escalão. É aqui que eu preciso estar. E é aqui que as pessoas confirmam é exatamente o que estou procurando. Preciso de um site de comércio eletrônico ou de um site inesperado. Então vá e dê uma olhada, especialmente se for uma indústria como essa, é mais fácil para mim porque eu gosto de web design. Mas se eu estivesse fazendo um site para uma fábrica de queijos, seria complicado. Você precisa procurar coisas de fábrica de queijos e ajudar com as descrições emitidas. Agora, mesmo que, digamos que eu estivesse fazendo isso para a fábrica de queijos, eu ia até eles e dizia: Ok, eu preciso de descrições dessas páginas principais. Podem ser as cinco páginas de alto nível, e eu preciso que elas as escrevam. Dadas as palavras-chave que eu preciso. Eles precisam ser únicos ou do tamanho que eu preciso e eu faço com que eles os escrevam, talvez envie a eles um artigo sobre como escrever uma boa meta descrição, ou eu posso escrevê-la porque isso é apenas alguns clientes que gostamos. Vou escrever este site de um pai. Vou escrever isso sozinho. Ok, então escreva isso, certifique-se de que há boas palavras-chave lá. Aqui embaixo. Mecanismos de busca ou este aqui embaixo, você pode usar a mesma tag de título e descrição de SEO que o ACO, esse material de gráfico aberto é o que aparece em coisas como Facebook e Twitter. Você os viu? E há um link para um site, ele o abrirá. Eles o chamam de Open Graph ou esse tipo de meta título e a meta descrição o torna único em cada página que você faz. Se você estiver escrevendo postagens de blog, certifique-se de que seja um trecho delas. Pode ser um trecho disso. Isso é bom. Uma era única, desde que fosse tudo sobre sua tag de título e sua meta-descrição. Tudo bem, vou salvá-lo e fechar o EBIT, certo, esse é o título meta e a meta descrição. Certifique-se de que ele apareça em todas as páginas. 76. O que é texto Image Alt no fluxo na Web: Olá a todos. Neste vídeo, falaremos sobre SEO para imagens. Ok, é chamado de texto alternativo. Você pode adicioná-lo para ajudar a descrever a imagem. Os mecanismos de busca gostam disso. Também discutiremos textos decorativos. Além disso, você pode adicionar texto alternativo às imagens de fundo? Agora você pode, existe uma espécie de maneira de contornar isso. Tudo bem, vamos falar sobre o que é, o que você deve colocar lá, tudo bem, texto alternativo, você edita duas imagens. Por que você edita a imagem? Eles o chamam de alt porque é um texto alternativo. É o que carregará, o que será exibido aqui? A imagem não carrega, ok, esse é o texto alternativo, então a chamamos de texto alternativo. Mais importante ainda, é para pessoas que não conseguem ver a imagem. Eles têm leitores de tela e ele os lerá para eles. Ele pode ler isso com muita facilidade. Diz que vai dizer que sou Daniel, designer de UX e desenvolvedor web com serviço completo. Melhor ainda, chegaremos aqui e faremos um círculo. Não saberá o que há nela. Ok, então o que precisamos fazer para ajudar essas pessoas, e também para os mecanismos de busca, os mecanismos de busca querem saber se seu site é acessível para pessoas com deficiência visual. E também dá uma dica sobre o que é o site. Se esse for o único texto na página que está no momento. Ok, está indo bem, o que mais há nessa página? E se esse é um designer trabalhando na Lepto, ok, ajuda com a brecha para o navegador saber do que trata esta página. Então, para editar, você o seleciona aqui nas imagens ou pode fazer isso em seu painel de ativos. Você pode ver que há a mesma imagem. Posso ir para o COG e eu posso adicionar meu texto aqui, ou eu posso fazer isso aqui. uma forma muito parecida. Você pode dizer para usá-lo a partir do ácido ou eu posso adicionar meu próprio personalizado aqui. Você pode simplesmente escrevê-lo de uma boa maneira para saber o que escrever? Definitivamente, não coloque algumas palavras-chave aqui, como se não houvesse mal. Sou designer. Isso é o que eu. Sou designer e trabalho em um laptop, talvez seja como usar fantasias. Vestindo uma fantasia. Sim. Isso ajudará a descrevê-lo como se eu o fizesse O melhor método é fechar os olhos e tentar descrevê-lo para alguém descrito, você pode ver. Feche os olhos dela e tente descrever em voz alta para si mesmo o que é. Lá está Daniel Scott trabalhando e um laptop. Estou fazendo isso. Fecho meus olhos. Ele está trabalhando em um laptop Mac vestindo uma fantasia de lagarta com arco-íris. Esse é um texto alternativo útil porque ajuda as pessoas a entenderem o que está acontecendo no site. Isso pode fazer você se perguntar por quê. Talvez não seja realmente apropriado usar essa roupa. Isso pode estar totalmente certo, mas fazemos isso porque ajuda os deficientes visuais. O Google gosta de ajudar os deficientes visuais e queremos ter uma boa classificação. Portanto, certifique-se de que haja palavras-chave. Nem tudo está certo? Limerick, não escreva web design. Talvez ele possa ser projetado em um web design em um laptop. Sim, fica um pouco complicado quando você está na 50ª imagem, mas não pule nenhuma imagem, vá até lá, adicione texto alternativo ao shopping. Há um momento em que vamos dar uma olhada e você não precisa fazer isso se isso não agregar valor ao leitor de tela. Vamos dar uma olhada. Temos gosto de animação. Não está neste. Você está aí. Tudo bem, esta imagem aqui faz essa imagem discutindo o que é e o que ela faz. Por que é o que parece? Nuvem laranja embaçada. Isso vai agregar valor ao site ou serve apenas para decoração? As nuvens, um pouco de íon porque é uma espécie de nuvem e eu posso explicar isso. É muito fácil de explicar. Mas digamos que seja apenas um grande gráfico de estrelas, apenas algum tipo de oscilação ou algo assim. O que você pode fazer é dizer que, na verdade, isso é apenas decorativo, ok? Significa apenas que você pode ver que tem um valor informativo limitado. Significa apenas que pode ser ignorado. Basta ser descrito como uma imagem decorativa sem precisar parecer uma nuvem laranja, como explicar tudo o que é para alguém que está sendo pago. Não vai acrescentar nada ao site, ajude a explicar. E claramente nuvens e como posso ajudar meu negócio de web design a se classificar bem, web design baseado em nuvem, ou talvez sim, mas essa é a alternativa. Você pode escrevê-lo em uma descrição adequada no ativo ou soltá-lo, escrevê-lo você mesmo na página ou simplesmente marcá-lo como decorativo. E, novamente, analise e faça em cada imagem que eu faço enquanto a adiciono. Porque, caso contrário, se você esperar até o fim, você simplesmente não o fará. Uma pergunta que eu recebo muito é devida. Eu não tenho duas imagens de fundo. Você pode até mesmo fazer isso em imagens de fundo? Você não pode dizer isso. Ele é na verdade um elemento de fundo para onde está? Hum, eu não me lembro. Era uma seção de heróis? Estava lá, estava lá, está lá. Não é algo que você também possa adicionar texto alternativo , redefinindo a tela, ela meio que ignora. Se você se sentar e muitos deles como pano de fundo, digamos que aqui, digamos que você tenha optado por isso. Nós adicionamos isso como uma imagem de propósito porque eu quero que tenha um bom texto alternativo. Vou ler e adicionar um ótimo texto antigo explicando o que é, porque eu queria que ele fizesse parte da estrutura do site. Quero que as pessoas possam lê-lo por meio desses leitores de tela. E eu quero que o Google veja, como todas essas imagens ou relacionadas ao design, este site deve ser sobre design. Então, se você definiu isso como um gráfico de fundo aqui, porque é mais fácil colocá-lo por cima. É complicado. E por outro lado , se você quiser algo que seja uma imagem de fundo, mas quiser que seja lido pelo leitor de tela e pelos mecanismos de busca, você pode fazer isso onde realmente está uma coisa e você absolutamente posicionou as coisas no topo. Você tem que escolher a importância dessas imagens para os rankings de busca. Muitos deles você tem porque, neste caso, eu meio que o configurei como um símbolo para que eu possa fazer o trabalho árduo de fazer com que isso seja exagerado um símbolo para que eu possa fazer o trabalho árduo e eu possa cortá-lo. Mas aprendemos a recortar imagens porque eu quero que elas sejam classificadas e estejam no fluxo do texto e não ocultas como imagem de fundo. Tudo bem, isso é texto alternativo para imagens. 77. Palavras-chave de SEO em cabeçalhos e URLs no Webflow: Olá. Neste vídeo falaremos sobre palavras-chave em SEO. Mostrarei aonde eles precisam ir e algumas ferramentas sobre como escolher os bons. Tudo bem, vamos entrar. Ok, então para onde eles foram? É fácil colocar os títulos, ok, você precisa de boas palavras-chave lá. Mas na página real, navegadores e em outros lugares bons, na verdade, apenas o conhecimento de palavras-chave é muito útil para colocá-lo em seus textos antigos, apenas certificando-se de que você está usando as palavras certas e encontrando outras palavras que você poderia usar porque você pode se cansar de web design limerick, ok, So pages, e vamos ver o que temos. Entre em contato conosco. É complicado, nada mais é do que a página Fale Conosco, mas nessas outras páginas, eu posso ver uma boa palavra-chave. A primeira é que eu tenho esse tipo de subpasta chamada portfólio. Portfólio é um bom nome para isso. Lembre-se, esta será a incrível barra do portfólio website.com slash de Dan . Nesse caso, criamos um dia portfólio de um clube de caiaque pode ser bom. Alguém vai pesquisar um portfólio de web design? Talvez. Ok. Acho que gosto da ideia da lesma K, porque é isso que acontece. Esse é o nome dos usuários do Webflow. Então, isso realmente não importa. Isso é o que será divulgado na Internet e o que o Google usará para ajudar a entender seu site. Então, o que há nessa pasta? Eu vou dizer design do site. Esse será o URL lá. E então ele terá quaisquer outras páginas que estejam depois disso. Então esse é um bom lugar para colocar palavras-chave. É querer que eu diga que se isso for publicado e as pessoas estiverem vinculando a ele e eu for alterá-lo, isso vai quebrar os links. Está tudo bem nesse estágio porque ninguém está vinculando o site. Não estou vinculando a ele. De ninguém mais. Portanto, é fácil mudar, salve-o. Vamos dar uma olhada nos outros. Então, vamos dar uma olhada nessas páginas aqui. Na verdade, vamos entrar na página e ir até a engrenagem. Então, novamente, esse é o slug k, então esse é o nome da página no fluxo de trabalho. Essa coisa aqui é onde boas palavras-chave podem ir. Você pode ver que está em web design? E então eu estou me repetindo, nós projetamos, então talvez eu não deva fazer isso. E que, embora seja disso que trata o site, não é particularmente bom. As pessoas não vão procurar caiaques para um dia. Eu não quero me classificar para caiaques de um dia. Eu não quero que alguém querendo andar caiaque venha me encontrar. Então, isso provavelmente é muito longo. Mas algo assim é muito mais útil para ajudar a descrever o que estou fazendo aqui. Não estou fazendo um clube para um veado kx, ou pelo menos não sou um lugar para andar de caiaque, mas definitivamente sou um lugar para pequenas empresas e limerick fazerem web design, provavelmente preciso cortar alguns palavras que estão lá. Parece muito longo, mas saber o que é q, entre aqui, também na tag de título e na descrição, pode ser complicado. Então, do que você obtém informações sobre palavras-chave? Eu vou te mostrar o que eu faço. Eu uso o serviço pago. Talvez você consiga encontrar os gratuitos. Eu sei que, especialmente como este aqui, SEM rush, você pode fazer um teste de sete dias. Então você pode ter apenas um pequeno projeto, basta usar o teste e sair dele. Mas para web design de longo prazo, você vai precisar de algo assim. Há um link na tela aqui. Se você quiser se inscrever no ACM rush, é o que eu amo. É um link de afiliado, então eu recebo uma comissão se você se inscrever também coloco o link nos projetos de classe logo abaixo. Para que ele seja útil, entre outras coisas, é encontrar palavras-chave. Então, quando estou escrevendo este curso, aceitamos o Webflow. Estou sempre esperando quando estou decidindo como chamar o site, acho que vou chamá-lo de Webflow. E digamos que eu tenha um vídeo que eu queira fazer sobre imagens, sobre imagens de fundo. Então, vou digitá-lo em algo assim. E eu dou uma pequena olhada. E eu poderia chamar isso de imagens de fundo. Mas você pode ver aqui imagem de fundo não sabe disso, é isso. Tem visualizações em 3D, 30 buscas por mês, que não parece muito alto, mas é para esse tipo de fluxo sanguíneo obscuro por si só não é obscuro, mas se não for um carro seguro ou algo parecido. Mas você pode ver aqui se eu chamo essa coisa chamada Como adicionar imagem de fundo ao fluxo sanguíneo, não há o dobro do volume de pesquisa. Então eu também chamo isso. Se eu estou apenas procurando sugestões sobre como lembrar nossa fábrica de queijos, você pode começar a digitar palavras-chave aqui e ter ideias do que as pessoas estão procurando, porque não adianta colocá-lo em algo errado, que as pessoas simplesmente não estão procurando. Pode ser do jeito que você chama. Eu ligo para a sala de estar na sala de estar. Minha esposa e meus filhos não sabem do que estou falando. O lounge. Você quer dizer a sala de estar, tipo “sim”. Então, se eu estiver fazendo reformas aqui na Irlanda, não vou chamá-lo de lounge. E também me diz que coisas legais como essa é que é fácil ranquear dessa forma porque não há muita competição lá fora, apenas outras coisas super úteis. Então, eu realmente gosto de algo assim e isso realmente me ajuda quando estou criando páginas para obter todo o idioma certo e obter as palavras-chave certas. Primeiro, já que estou fazendo muitos cursos de Adobe Photoshop é uma das coisas que eu faço. Vamos fazer o treinamento em Photoshop. Porque quando eu comecei, assim que eu chamava, porque era isso que eu fazia e era isso que eu coloquei nas minhas páginas. Você diz: “Ótimo, Shake it out”. Tudo bem, para o treinamento de Photoshop, centenas e 70 pessoas pesquisando por ele. Legal. Vamos dar uma olhada. Quando eu finalmente comparei, os cursos do Adobe Photoshop causarão um boom. As pessoas usam a palavra custo muito mais do que treinamento. Mas se eu disser meu curso de InDesign e versus treinamento em InDesign, eles são basicamente os mesmos. Alguns deles caem. Alguns deles são mais propensos a usar o treinamento do que os cursos. Coisas estranhas que você pode descobrir por meio de ferramentas como essa. E é incrível quando você pode ir até um cliente e começar a entender essas coisas e ajudá-lo a criar as páginas certas para seu site. Talvez estejam faltando algumas páginas excelentes que ajudem. Eles estão muito bem pesquisados e devem ter uma página dedicada neste site para explicar isso. Tudo bem, então, quando você estiver trabalhando em seu próprio projeto ou clientes, tenha uma ideia de quais palavras-chave você poderia usar e certifique-se de usá-las em todo o site com seu texto alternativo, suas tags de título ou meta descrições e nos slugs desses URLs nos títulos. E para que você não reutilize o mesmo repetidamente, você está usando variações deles. É para isso que isso também serve. Tudo bem, meus amigos, esse é o meu discurso sobre palavras-chave. Eu amei as coisas. Tudo bem, para o próximo vídeo. 78. Você pode exportar código para o fluxo de trabalho auto-hospedado: Olá a todos. Neste vídeo, discutiremos você pode exportar código do Webflow? Você pode totalmente, e é realmente utilizável. Ele exportará todos os arquivos, o CSS, o JavaScript, tudo. Você precisa fazer isso funcionar em seu próprio host, ou talvez entregá-lo a um desenvolvedor que possa levar seu site um pouco mais longe. Tudo bem, vamos entrar e dar uma olhada, tudo bem, em x qual é o código aqui em cima. Há um pequeno código de exportação. Eu tenho meu site aberto e o designer, eu posso exportar o código , esperar um segundo e você poderá ver o HTML e o CSS dependendo do que você precisa fazer, você pode simplesmente copiar o HTML e CSS e JavaScript são enviados para seu próprio arquivo. Ok, porque está tudo lá. Porém, a única coisa é que, se você não tiver uma conta de espaço de trabalho atualizada, verá apenas uma parte dela e não poderá exportá-la. Eu vou te mostrar onde está em um segundo. Mas digamos que temos, estou trabalhando no núcleo. Eles o chamam de espaço de trabalho principal. Então, um de baixo para cima, eu posso preparar um zíper, fazer um download doentio. Tudo bem, eu tenho uma pasta. Vou salvar o zip nele. Aqui está o arquivo zip e a pasta. E você verá que é muito bom. Você pode ver todas as nossas páginas na minha página inicial, que é a página de índice. Você pode ver minha página de contato, a animação que fizemos nas páginas de erro. E você pode ver que talvez esse subdomínio, enquanto a pasta que criamos costumava ser chamada de portfólio, mudamos no último vídeo para ser web design. E há aqueles dois. Você notará que os rascunhos também estão aqui. Então, algo a ser levado em conta. Agora você pode copiar e colar tudo isso em seu próprio servidor de hospedagem. Por que você faria isso? É mais barato fazer isso em seu próprio servidor de hospedagem. As desvantagens são, porém, se você entrar e abrir isso em um editor de texto, digamos VS Code ou Sublime ou Dreamweaver e começar a editá-lo. Você não pode colocá-lo de volta no Webflow. É uma rua de sentido único. Mas se o cliente voltar e quiser uma mudança, você pode voltar aqui, fazer uma alteração, exportá-la novamente e enviá-la para o seu servidor, desde que ainda esteja pagando por esse espaço contas que chamam uma, eu vou te mostrar isso em um segundo. Agora, para entrar em mais detalhes, o problema com esse site em particular. Você pode vê-lo aqui embaixo, quando realmente carrega, vai te dar um aviso. Ok, nesse caso, tudo funcionaria aqui, exceto pelo formulário na página de contato. Os formulários Webflow são meio complicados de fazer on-line por conta própria. Eles parecem simples, mas há algumas verificações e Malfoy notando que isso precisa continuar. você pode ver aqui, as exportações indicam incluir a funcionalidade de formulário nativo. Você pode usar o formulário se você mesmo souber como configurá-lo. As partes que eu te dei, ou você pode trocá-las por alguma coisa. Existem outros serviços, como talvez o MailChimp ou outros serviços que você pode colocar na página. Pode haver uma maneira, a maior será se você puder vê-la aqui? Vamos fazer CMS e comércio eletrônico nas próximas seções deste curso. Mas eles não funcionarão se você exportar o código e hospedá-los você mesmo. Há muitas verificações, bancos de dados e validações que precisam acontecer para que essas coisas funcionem. Então, para um site estético , formas perfeitas, podemos contornar isso. Mas quando começamos a fazer coisas que são espaçadas em CMA, como um blog com um cliente pode fazer o upload com um cliente ou o cliente pode começar a trabalhar nele. Ou se você quiser começar a trabalhar com comércio eletrônico, você precisa usar a hospedagem do Webflow, o código de exploração. Vamos dar uma olhada rápida. Vou voltar para o meu painel. Então, para mim, eu tenho o espaço de trabalho principal. Você pode estar no Stata, que é o gratuito. Talvez você precise fazer o upgrade para este núcleo. Isso significa que, se você algum tempo no Webflow, passar algum tempo no Webflow, precisará desse porque precisará ter mais do que apenas dois sites hospedados nos quais esteja trabalhando potencialmente mais todo o resto. E uma delas é a exportação de código. Outro bom uso da opção de código de exportação é mesmo que você não seja a pessoa que a hospeda porque não sabe o que isso faz, como fazer. Você pode estar trabalhando com um desenvolvedor que trabalha. Assim, você pode criar grande parte do front-end, incluindo o baixo, o JavaScript, na verdade, tornando-o vivo no Webflow, faça isso por você. Isso seria algo totalmente apropriado para ser entregue a um desenvolvedor para adicionar esse banco de dados ou funcionalidade de comércio eletrônico. Isso permite que você assuma muito mais do trabalho. E se você é como eu, você tem TOC em fazer tudo se alinhar e ser perfeito e não simplesmente deixar que outra pessoa faça o bem. Você pode fazer muito desse trabalho de front-end para o projeto e depois entregar essa pasta para um desenvolvedor. Você também encontrará desenvolvedores específicos do Webflow . Agora, isso se tornou um setor em que existem divs que ajudarão pessoas que são como eu a fazer essas coisas de front-end, mas realmente não sabem como fazer coisas e necessidades do banco de dados de back-end suporte porque queremos pegar esse design e fazer algo que talvez com o fluxo não possa fazer antes de partirmos. É interessante se você ainda não deu uma olhada, você pode ver aqui que fizemos essa div com a classe aplicada a ela chamada logo de textos. Ou seja, podemos ver isso? Como eu olhei, não está em lugar nenhum. Vamos dar uma olhada nesse. Temos um H1 chamado herói. Há uma etiqueta de extensão lá. Vamos dar uma olhada no código de exploração. Tudo bem, vamos dar uma olhada. Aí está minha div para a navegação e você pode ver as aberturas deles aqui. Ok, e então onde está meu herói? Ali está lá. Essa é a minha abertura e encerramento da herança que fiz do encerramento da abertura. E lá dentro há algo chamado Quem é meu aquecimento? Aí está. Aí está meu H1. um monte de outras coisas aqui também. Isso é editado pelo Webflow. Basicamente, eles acrescentam tudo o que acrescenta. Isso está no começo. Eu sempre consigo me lembrar. Eles colocaram um canhão W Hi. Isso é algo que você não fez, que eles adicionaram para fazer isso funcionar. E aqui está minha aula que eu fiz chamada de bater aqui. Aí está. Aí está meu texto. Eu adicionei essa pequena classe de extensão. Então, é interessante. classe Span apenas gira em torno daquela coisinha chamada designer. Ainda está dentro do H1. Você pode ver? Mas gira em torno do designer e aplica essa classe chamada secundária. Se você conhece um pouco de HTML e CSS, isso é fácil. Se você é novo nisso, é muito interessante e ver como tudo isso se desenrola, e eu gostaria de ter escrito está arrumado. Html, é isso. Olha tudo isso tão lindo. O mesmo acontece com o CSS. Você verá que há uma mistura de, veja esta aqui, esta caixa de seleção. Eu não escrevi esse porque é um hífen W homossexual, mas você encontrará muitas coisas que escreveu e editou. Ok. Vamos dar uma olhada. Aí está você. Eu estilizei o parágrafo e fiz essas coisas. Eu estilizo meu a, que na verdade são os links antigos. Eu fiz essa coisa chamada seção de heróis e tornei o transbordamento visível. Não tenho certeza do que estava fazendo lá. A navegação é minha seção. Ok. Para a navegação e tudo o que fiz foi torná-la uma cor de fundo branca, fff, dê uma pequena olhada. Olha, aí está o meu botão e todo o código que eu uso para torná-lo tão incrível quanto é, para dar uma olhada na exportação também. Só que é interessante. Então essa é a página inicial do 4.4. Eu quero apenas páginas de erro. Veja o CSS, está bem dividido. Esse é o que eu fiz. Isso é normalizado, o que apenas ajuda a funcionar muito bem em diferentes navegadores. E esse é o Webflow que eles escreveram para nós quando arrastamos uma navegação e simplesmente funciona magicamente. É porque eles aplicaram várias classes para que funcionasse e não precisávamos fluir imagens. Você pode ver todos os tamanhos grandes, pequenos e médios em nosso adorável favicon. Javascript O Javascript é útil no front-end e nas instruções. Portanto, qualquer coisa do tipo de menu suspenso de navegação móvel nesse tipo de interação para os usuários é feita com o JavaScript. E essa é minha subpasta. Tudo bem, é isso, isso é exportar código para fora do fluxo de trabalho. 79. O que são links somente para leitura no Webflow: Olá a todos. Neste vídeo, veremos esse link compartilhado somente para leitura ou um link somente para leitura. Até você pode criar essa cópia. Parecia que as pessoas diziam Eu preciso da sua ajuda, elas recebem um link, é somente para leitura”. Eles têm uma versão completa do Webflow para trabalhar. Eles podem verificar seu site, código atrevido, verificar o que está acontecendo e dar algum feedback. Vou te dizer o que está errado. Totalmente barulhento. Mova-o, mas é somente para leitura. Então, quando eles fecharem isso, não vai quebrar o original. É por isso que é o link compartilhado somente para leitura. É super legal. Sim, deixe-me mostrar como fazer isso funcionar e mostrar um pouco mais de detalhes sobre isso. Acabei de te mostrar tudo na introdução? Acho que acabei de fazer isso. Há um pouco mais para tornar isso um pouco mais para discutir, mas sim, aí está. Você é bem-vindo. Ok, então para obter o link, você vai até aqui. Então, compartilhei o projeto e há dois num link somente para leitura este ano. Vamos copiá-lo. Vamos dar uma pequena olhada no que é feito. Vou mandar isso para outra pessoa. Ok. Então eu estou fingindo que eles são outra pessoa. Eu sou Jane. E Dan me enviou o link somente para leitura porque ele precisa de ajuda. Ok. Ele está dizendo que está perguntando: “Ei, veja essa imagem aqui. Não sei como os cantos arredondados estão sendo aplicados. Eu preciso desligá-los. Você pode ajudar Jane? E Jane recebe esse link? E você pode ver que estamos realmente no Webflow, o que é legal. Jane não precisa estar conectada ao Webflow ou ter uma conta. Ok, Jane pode simplesmente ir para casa. Vamos dar uma olhada. Eu posso fazer no modo de visualização desligado e olha, é uma versão totalmente funcional do fluxo de trabalho. O somente leitura significa que se eu fizer alterações aqui, ele não atualizará o original, o que é muito legal. Ok, eu posso entrar aqui e dizer, tudo bem, dê uma olhada no que está acontecendo. Eu posso fechar tudo isso e dizer, o que é azul? É azul. Tudo bem Dan, há uma classe chamada image hero que você define o raio para 200, ou redefine morto ou define para 100. Ok, simplesmente não há como salvá-lo, mas é uma versão totalmente funcional do fluxo de trabalho para que as pessoas possam ajudar. Você pode perguntar em grupos e fóruns, Webflow também tem um, ok, ele se chama discourse.workflow.com. Publique nos comentários deste pôster em vídeo em qualquer um dos grupos Bring Your Own Laptop. E embora eu não consiga chegar a todos eles sozinho, tenho centenas de milhares de estudantes agora. Os fóruns que agrupam Pessoas cheias de ego que estão apenas aprendendo e já passaram pelo curso. Então, ao dizer isso também, se você ver uma pergunta que você acha, eu provavelmente poderia resolver isso ou seria divertido descobrir, dar uma olhada lá, pedir o link somente leitura e dar uma olhada e veja se você pode ajudar outras pessoas a se ajudarem umas às outras. Tudo bem, é isso. Na verdade, um dos lugares onde você pode chegar até lá por aqui. Você também pode obtê-lo no seu painel. Você pode entrar aqui e dizer que o shear não importa de que forma eu ative o link somente leitura, obtenho ajuda, ajudo outras pessoas. É um mundo adorável. Tudo bem, é isso. Nos vemos no próximo vídeo. 80. Gerenciador de estilos e como limpar aulas: Olá a todos. Neste vídeo, eu vou te mostrar como organizar todas as suas aulas, todos os estilos que você criou neste curso, ok, eu tenho 13 que simplesmente não foram usados em nenhum lugar. Eu posso me livrar de todos eles. Estamos nesse gerente de estilo. É útil quando você está terminando um site que está chegando ao domínio ou quando você o envia para um desenvolvedor. E você quer ter certeza de que está o mais limpo e arrumado possível. Vamos falar sobre isso com mais facilidade dando a você o básico. Mas vamos falar sobre isso com um pouco mais de detalhes. Tudo bem, é limpá-los. É o Style Manager. Estamos aqui há um pouco. Ok, isso vai me mostrar tudo o que eu fiz neste site ou que o fluxo de trabalho é feito em meu nome porque eu esqueci de nomeá-lo. E você pode ver como eu tenho 11 deles ao vivo que não foram usados em nenhum lugar do site. Então, vou clicar em limpar. E o único problema com isso, depende de como você está trabalhando. Você pode estar criando estilos que poderá usar no futuro. Lembre-se de como margem esquerda, margem direita, margem inferior, superior. Isso pode acabar e matar todos e você pode usá-los mais tarde para mim. Eu não fiz isso. Eu tenho esses textos de parágrafos que não foram usados. Eu tenho essa classe de combinação chamada button box-shadow que nunca foi usada. Todos os montes de coisas. Então eu posso agora que estou examinando eles. Aguenta aí. Você, amigo. Eu não usei, amigo. Bem, essas coisas que eu fiz muitas dessas , como bater e corpo que eu simplesmente não usei e eu nem as fiz, o Webflow as fez em meu nome porque eu estava mudando alguma coisa. Então eu cliquei em desfazer ou decidi pegar a etiqueta do título. Desculpe, será a tag HTML que os contém, eu provavelmente fiz isso no corpo. Ok, e então esqueci de deletar a classe de que eu sou um corpo frio. Você usa todo tipo de lixo. Está limpo e não faz nada além de ser mais limpo. E aqui, não vai começar a tentar sugerir classes que não foram usadas em nenhum lugar e durante essa fase de exportação, ok, digamos que eu esteja exportando isso para hospedá-lo em outro lugar. Não há um monte de aulas lá que os desenvolvedores gostem de coçar a cabeça dele, decidir onde isso estava sendo usado ou eles começam a usá-lo porque dizem: “Oh, você escreveu, deve ser útil . E não foi enquanto estamos aqui também. O Style Manager é muito bom para pesquisar. Nós meio que analisamos isso. É por isso que eu gosto de usar a palavra dizer texto antes de começar a descrever o que é. Porque me mostra todas as diferentes aulas de textos que fiz para minhas aulas de pintura. Não muitos. Ok, é muito útil poder pesquisá-los. A outra coisa é que você pode ter algo aqui que você goste, quando eu escrevi aquele ou é que eu não sei. Vou encontrar alguma coisa. Ticks field, esse é um nome terrível, o que eu fiz? Bem, talvez não seja um nome de erro. Há muita coisa acontecendo com isso. O que eu fiz para que o formulário encontrasse algo não enquanto você espera na grade três, diabos é isso. Então dê uma olhada. Onde eu o usei? Você pode ver que está em uma página chamada testes de animação que está sendo usada. Então dê uma olhada. Grade três que entra aqui. Ela vai voltar para aqui, clicar aqui, enquanto a grade três, você está aqui. Aí está. Ótimos três. E o que é a grade três para fechá-la , não adianta muito. É aplicado. O que ele está fazendo? É fazer com que minha grade tenha três colunas largura e apenas zero linhas. Então, se eu excluir a classe removida, ela voltará ao padrão. Não é o que eu quero. Sim, bom, o Three precisa ficar, mas eu poderia chamá-la de página de teste de animação em grade. Ok, então aí está. O Style Manager, vou desfazer antes da limpeza. Oh, eu não consigo desfazer uma ligação à página. Se eu mudar de página, as coisas desfeitas serão apagadas. Ok. Então eu vou voltar. Volte. Ok, está pronto para sempre. Vamos criar uma classe e excluí-la. Então, vou criar uma classe chamada eixos. Basta fazer isso para dividir uma classe global chamada coisa. Ok, eu tenho que fazer isso. Eu disse: “Ah, sim, vai ser ótimo. Vai ter uma largura de 100. Ok, e é isso que vai fazer. E mais tarde eu disse: “ Na verdade, eu não preciso dessa coisa. Então, vou ser excluído. Você pode entrar nos estilos e isso deve ser feito na parte inferior do que não em alfanumérico. Você pode encomendá-los da maneira que ela puder. Mas eles estão na lista da cascata, a folha de estilo em cascata. A última coisa que fiz, você percebe que essa é a única que não tem a pequena linha lá porque essas pequenas linhas aqui mostram apenas onde ela é aplicada e em quais outras páginas ela é aplicada. Então esse aqui, não se aplica a nada porque eu o deletei. Então, eu posso simplesmente ir aqui e deletar. Já que você notará na grade três, diz “clique aqui”. Não consigo excluir, isso funciona? Enquanto este aqui diz você foi bom, limpo, tudo bem, então é algo que você deve fazer antes de terminar um site, enviá-lo para o cliente, enviá-lo para o host principal, seja no Webflow ou em seu próprio domínio, ou antes de entregá-lo a um desenvolvedor. Tudo bem, é isso, esse é o Style Manager e a limpeza de estilos. 81. Como usar seu nome de domínio de site personalizado no Webflow: Olá a todos. Neste vídeo, vamos publicar algo em nosso próprio nome de domínio. É a parte mais empolgante. Aqui está. Daniel Scott, web design.com. É ao vivo, as pessoas podem ver. Ter um bom URL de 60 é, de longe , a parte mais empolgante de todo esse processo para mim. Como se fosse ao vivo, as pessoas podem vê-lo. É incrível quando é sua primeira vez, quando você cria muitos sites, ainda é muito empolgante. Neste vídeo em particular, mostrarei como fazer isso automaticamente usando algo como GoDaddy ou exatamente como usar o GoDaddy. E no próximo vídeo, mostrarei como configurar manualmente seu domínio personalizado usando outra pessoa. Mas a versão automática do Webflow é bem elegante. Tudo bem, vamos comprar um nome de domínio e conectá-lo ao nosso lado do fluxo de trabalho. Primeiro, você vai publicar e personalizar o domínio. Clique no link que está abaixo dele. E uma de duas coisas vai acontecer. Se você ainda tem uma conta gratuita para o seu site. Esses dados, você precisará atualizar pelo menos para o básico, porque é quando eles permitem domínios personalizados. Caso contrário, você ficará preso a este. Você pode totalmente usar esse. É um pouco estranho, ok, então, depois de atualizá-lo, ficará um pouco mais parecido com isso. Eu vou te mostrar, tudo bem, a mesma coisa. Clique no botão. E isso o levará às configurações do projeto, que você pode acessar se quiser. Você pode ver isso lá? Está em Publicação. Estou no meu portfólio. Vou adicionar um domínio personalizado. E é meio que me avise porque eu tenho esse plano de site. Agora, se você tem um domínio existente parado lá, talvez você já tenha seu dub, dub, dub dot Dan é awesome.com e você precisará avançar um pouco no vídeo para pessoas que não tenho um nome de domínio. Vou analisar isso primeiro antes de adicioná-lo aqui. Agora, ao comprar um nome de domínio, existem algumas versões automáticas por meio do fluxo de trabalho, e isso é muito legal. Gu não funciona e meu país por algum motivo, assim como não funciona. Então, vou usar o GoDaddy. Agora você verá um link na tela aqui que é meu link de afiliado com a GoDaddy. Então, se você se inscrever com eles e usar meu link, eles me pagarão uma taxa de localização, ajudarão a me apoiar e as coisas que eu faço. Caso contrário, você pode acessar o GoDaddy diretamente. Não vou me ofender nem usar o Google. Pode funcionar em seu país, mas vou seguir a rota GoDaddy. Agora, qual metal você comprará se já tiver uma conta em outro lugar, você pode comprá-lo a partir daí e seguir em frente no vídeo em que realmente adicionamos o domínio existente, mas precisamos compre primeiro. Vou comprar o meu rapidamente. Faremos isso juntos porque é divertido escolher nomes de domínio. Tudo bem, então eu vou para o papai e vou subir no topo aqui, isso me permite escolher e pesquisar um nome de domínio. O site muda. Deve ser fácil descobrir como escolher um nome de domínio. Talvez você precise fazer login ou criar uma conta e ficar chateado porque alguém já tem o.com e go daddy acessará e lhe dará várias alternativas para nomes de domínio is.co, tudo bem? Obviamente, as pontocoms são as melhores. Os bons geralmente desaparecem. Portanto, um diodo ou co, pode ser um bom segundo melhor. Existem muitos geradores em termos de geradores de nomes de domínio, e eles podem dar sugestões sobre o que você pode considerar naturalmente um bom pai, ele é muito bom nisso. diferentes tipos de extinções aqui. A única coisa a ter cuidado é que, no primeiro ano, verifique, porque às vezes esses são como se a tecnologia de pontos fosse ótima para o primeiro ano, mas você pode ver que a cada dois anos custa $70, o que pode ser bom, dependendo do que você deseja. Mas sempre há o tipo de, oh, você recebe por $0,01, desde que você faça isso no primeiro ano, para registro de dois anos. Apenas esteja atento a isso. E há muitas coisas legais. Ele vai passar e meio que lhe dará opções diferentes. Obviamente, os promovidos com os quais você deve ter cuidado. Você não precisa, mas observe que as pessoas estão pagando para mostrar essas. Tudo bem, então eu vou pagar por isso nos detalhes do meu cartão de crédito. Eu não vou gravar isso. Na verdade, voltarei em um segundo, antes de você comprar. Eu só queria analisar algumas coisas. Não importa qual registrador você vai usar para registrar seu nome de domínio, ele tentará vender outras coisas e você poderá querer. Apenas na minha experiência e em sua própria pesquisa, que toda essa proteção total e outras coisas para o seu nome de domínio não fazem nada. Ainda é Nita. Quem é? Você ainda precisa entregar seus detalhes sobre o que está dobrado. Pode estar parcialmente obscurecido e tudo isso como evitar hackers. Para mim, acho que isso pode ser um pouco assustador. Você pode acessar e ativar sua própria autenticação de dois fatores para garantir que ninguém possa fazer ajustes. Mas não é tão caro se você quiser, eu não sei. Basta ligar tudo. A única coisa que queremos fazer aqui é não queremos interromper o faturamento do site. Temos um tipo de drama. É gratuito, na verdade não ajusta nada. E aqui embaixo, você precisa de endereços de e-mail para você? Eu provavelmente usaria algo como o Google para lidar com os e-mails. Então, eu não usaria o Go Daddy, você pode, mas o Google tem hospedagem profissional de e-mail na web. O fluxo da Web não faz isso. Ou você pode simplesmente usar seu endereço atual do Hotmail ou do Gmail do Yahoo e simplesmente não usar um e-mail profissional. Então, eu vou. Não, obrigado. E então eu vou continuar a cortar. Então eu vou começar a ter um quadro, ok, então você comprou um nome de domínio ou vertical, seria papai primeiro porque é rápido e fácil. Em seguida, mostrarei como configurá-lo manualmente se você estiver usando outro provedor de hospedagem de domínio. Então, vamos adicionar nosso domínio personalizado. Nós compramos um. E agora eu vou digitar o meu. Isso vai adicionar domínio. Vai acontecer, minha capa reconheceu que eu a comprei pela GoDaddy, o que torna tudo muito fácil. Eu farei manualmente no segundo. Tudo bem, pode ser que você faça login na sua conta. Isso vai explicar o que vai fazer. Vou clicar em conectar. Conectando manualmente. Na verdade, não se trata apenas de fazer a coisa automática. Vamos esperar um segundo. Tudo bem, isso aparece. Analisamos isso mais cedo. Lembre-se de que ativamos e desativamos a indexação do site de teste. Ok, deixe que faça o que quiser e estamos parcialmente lá. Está conectado. Meu problema é que eu não publiquei o site. E, na verdade, antes de irmos, precisamos criar um padrão. Então, no momento, há na verdade duas versões do seu site. Há uma largura, dub, dub, dub e outra sem que nada faça de um o padrão, o que ele vai fazer é realmente redirecionar. Quando alguém digita exatamente isso, ele vai redirecionar para este. Caso contrário, meio que acabamos com dois sites. É estranho, eu sei, mas faça desse o padrão com o dub, dub, dub. E podemos ir para Publicar. Agora podemos voltar ao nosso designer e publicá-lo, ou podemos fazer isso a partir daqui. Ok, vamos voltar ao designer porque é aí que nos sentimos mais confortáveis no momento. É o que sabemos. Ok. Estamos em um lugar confortável, poderíamos vestir calças confortáveis. Vou para Publish. Só tivemos essa opção a partir de agora, ok, agora temos essa. Podemos publicar os dois. Você está pronto? Eu uso a cidade. Você publicará seu primeiro site. Talvez. É um momento muito empolgante e provavelmente não vai funcionar. Por quê? Porque eu comprei o nome de domínio há cerca de 5 minutos. Às vezes, esses nomes de domínio podem demorar um pouco para serem usados. Tudo bem, estamos prontos para ir. Confira. Vamos ver se funciona. 321. É la Hey, imediatamente. Isso nunca acontece normalmente quando eu faço isso. Pode levar algumas horas para que o DNase seja preenchido e todo tipo de coisa deve ser alguma mágica acontecendo entre o Webflow e o papai, eu adoro isso. Então, isso está ao vivo agora. Este é meu próprio site. Parece mais real, não é? Agora? Vá conferir o site agora mesmo. Ok, Daniel Scott web design.com. Vou colocar um pouco de ovo de Páscoa lá para você. Você é bem-vindo. Ok, mas se não funcionar, entre em contato com o Webflow, entre em contato com o papai, ambos são muito úteis para fazer essas coisas funcionarem porque essas coisas funcionarem porque querem que você tenha uma ótima experiência pelo que você está pagando no Webflow e no GoDaddy, eles parecem ser contras. A única coisa que você pode fazer agora é voltar para aqui e você pode realmente dizer, como esses dois, eu preciso mais desse? Você pode simplesmente continuar publicando diretamente, fazer alterações diretamente no site principal. Mas o que você pode fazer é realmente fazer alterações e publicá-las no site de teste para que os clientes verifiquem, outra pessoa para verificar antes de você ir e voltar. Ok. Eu também vou me comprometer a colocá-lo no site principal. Ok, então isso é mais ou menos como seu trabalho em andamento. E esse é o slide final. Isso é muito empolgante. Tudo bem, essa é a maneira super automática de fazer isso. Compramos um nome de domínio e basicamente deixamos Webflow conectado ao Go Daddy, o que é muito útil. No próximo vídeo, faremos isso manualmente. Vamos fazer isso. 82. Conectando manualmente o seu nome de domínio personalizado no Webflow: Olá a todos. Neste vídeo, veremos como configurar um nome de domínio que já existe. Essa não é a automática que fizemos no último vídeo por meio dos domínios Go Daddy ou Google Veremos alguns provedores de hospedagem aos quais tenho acesso, Bluehost e GoDaddy. Além disso, mostrarei onde você pode obter a documentação de todos os diferentes hosts . Se você estiver usando um deles, poderá descobrir onde atualizar os registros DNS manualmente. É preciso ir direto para a área certa de configuração do seu nome de domínio Você precisa ir aonde quer que tenha comprado seu nome de domínio. Eu vou te mostrar Go Daddy e Bluehost, basicamente o que você está procurando onde quer que seu domínio esteja, haverá algo a ver com o DNS. É isso que você está procurando, seus servidores de nomes de domínio, ok, aqui também está no GoDaddy. Haverá em lugares diferentes, mas você acabará em um lugar muito parecido. Então, vamos dar uma olhada. Em seguida, encontre seu site e você deseja acessar essa guia de publicação. Eles foram renomeados como na possibilidade de publicação ou hospedagem. E vamos adicionar um domínio personalizado. Vamos editar um domínio existente. Vou configurar esse aqui com o plural e adicionar o domínio. E isso vai me dar algumas opções. Isso também muda. Ok, então se você não tiver certeza, finalize Haverá um link na página aqui em algum lugar para obter ajuda direta do Webflow, se eles o atualizaram ou talvez achem que isso não funciona, vá confira e não tenha medo de entrar em contato com o Webflow ou seu DNS, quem comprou seu nome de domínio, e explicar o que você está tentando fazer. O que você está tentando fazer é atualizar os registros, o registro a e, na parte inferior, o registro CNAME. E isso fica registrado aqui. Então, esse primeiro aqui tem duas opções. Basta usar o recomendado, sem entrar em muitos detalhes sobre os redirecionamentos e outras coisas, mas vamos fazer esse. Precisamos adicionar dois registros DNS K para esse tipo e adicionar o que você está procurando. Deixe-me mostrar como eles se parecem nas duas empresas de nomes de domínio às quais tenho acesso, GoDaddy, é bem simples. Estou procurando o tipo que é a, e o nome que está no nome do host é Ed, e é um registro a. Preciso excluir os dois para, na verdade, antes de fazer isso, fazer uma captura de tela de qualquer coisa que você vai mudar, colar uma captura de tela de tudo nessas páginas para que, se der errado, você não faça isso direito. Você pode pelo menos redefini-lo para onde estava. Exclua os dois. Se você não conseguir excluí-los por qualquer motivo, ou se simplesmente não houver acesso a eles em sua empresa de hospedagem, entre em contato com eles, pergunte porque, se estiverem bloqueados, isso pode significar que você está pagando para outro serviço que exige que eles nunca sejam alterados. Então você pode ter que desbloquear isso. Tudo bem, então estou excluindo os dois nos registros, nada mais. Ok. E eu sou Bluehost. Eles fazem isso de forma um pouco diferente. Se eu for atualizar esse DNS e aqui eu mantive todos os registros em seu próprio pequeno grupo. Então, eu só tenho um neste caso, você pode não ter nada aqui. Vá e exclua esse. E vamos adicionar dois registros. Lembre-se de fazer uma captura de tela antes de fazer alterações. Ok, então eu vou entrar, excluir essas ações não pode ser desfeita. Acabei de copiar isso porque é uma espécie de demonstração para essa aula. Vou colar isso de volta em um segundo. Ok, então acabou, meu site não vai funcionar por um tempo. Então, vou adicionar meu registro. E esse caso, é meio estranho. O registro a, presume que você quer dizer um registro. Talvez você precise ser um pouco mais explícito. Então, presume que você vai criar um código de erro. Está hospedado em. E aponta para. Foi aqui que você extraiu as coisas do fluxo de trabalho. Então, neste caso, eu quero isso. Se você clicar nele, ele realmente o copiará para a área de transferência, o que é legal. Ok, então digite o nome, vamos para o Bluehost. Digite o registro. Eles têm maneiras diferentes de nomeá-lo. Fará mais sentido em um segundo. Vou deixar a prancha TTL. Vamos clicar em salvar o meu. Parece que não apareceu neste aqui. Mostre tudo ou está, ei, lá embaixo. Então, do jeito que esses anfitriões ou trabalham, o que eles gostam de fazer é mexer comigo. Eles os movem em todos os hospedeiros diferentes em lugares diferentes. Se você estiver com problemas, você pode. Há um site aqui ou uma página da web aqui que o Webflow criou, ok, e é uma maneira muito boa, porque eles realmente passaram por vários domínios, ou pelo menos provedores de DNS, o que você quer ligar para eles? E eles vão te mostrar como chegar até ele. Ok, e então fiz alguma documentação. Vou adicionar isso aos projetos da classe. Haverá uma opção de link que você pode pular até o final e aí está. Isso também pode mudar. Então vá dar uma olhada. Se for um erro, me avise e eu posso atualizar este link. Sim, é um pouco de brincadeira tentar fazer isso acontecer. O mesmo. Vou adicionar meu segundo disco. Ok. Neste aqui ainda havia um at e vou copiá-lo de volta para o Bluehost. Então, está em zero pontos para você e clique em Salvar. Então, isso é metade do que está feito. No GoDaddy, é um pouco mais fácil. Eu não vou excluí-los, mas digamos, vamos fingir que eu tenho, se eu adicioná-los, um pouco de opções, Mais menu suspenso. E isso será em, em seguida, cole os dois aqui e deixe o TTL como padrão. Então você vai acabar com eles também, seu anfitrião será diferente, certo? O que mais precisamos fazer? Bem, você poderia fazer agora é clicar em verificar o status. Ele vai verificar. Você fez tudo certo e voltou. Às vezes, pode levar algumas horas com os registros DNS para serem preenchidos pela Internet. Então, faça um teste agora, veja se funciona. Eu vou fechar isso. E a próxima parte é o nome C e as marcações recodificadas , tipo semelhante de coisa. Então, dependendo do seu host, encontre e exclua o que você está procurando por este, o nome C com um dub, dub, dub lá, exclua este e adicione-o novamente. Ok, o Bluehost os separa, ou é o nome C? Então, eu tenho esse aqui do qual quero me livrar. Ok. Eu vou para você e me retiro. Não preciso me preocupar com os outros. Apenas esse dub, dub, dub recodifica o mesmo de antes. Vamos fingir que eu o apaguei. E eu vou adicionar um novo registro. Isso foi dub, dub, dub. E aponta para vamos pegar essa opção aqui, copiar a face e editamos. Eu não vou fazer isso aqui porque eu quero roubar isso mais do que eu tenho. E aqui estão meus registros de tiques. Então, eu tenho um que preciso excluir. Lembre-se de fazer capturas de tela de tudo, copiar e colar, porque algumas das coisas que você não quer digitar dizem que não vamos excluí-las, mas eu quero excluir esse registro k e substitua-o por um novo. Esse fluxo me diz como é chamado. Super fácil. Novamente, você verifica o status e espero que, eventualmente, ele diga: Estamos todos bem. E a última coisa que você precisa fazer é, como fizemos no último vídeo, isso torna um deles o padrão. E para nós, vamos tornar o dub, dub, dub um padrão. Isso é importante aqui porque dissemos que usamos essa opção que diz que queremos nosso domínio redirecione tudo para isso. O dub, dub, dub. aqui é, se você não quiser isso, você quer que tudo seja redirecionado para o não dub, dub, dub, dub, dub, make default. Agora, se você já configurou algo em seu host ou acessa subdomínios, muitas outras coisas você pode gostar. É uma coisa meio complicada. Certifique-se de entrar em contato com seu provedor de DNS, dependendo da qualidade do serviço. Estou apenas tirando uma captura de tela do que você está tentando fazer, basta explicar que o Webflow me pediu para fazer isso. Você pode me ajudar a fazer isso acontecer porque está trancado ou não consigo encontrá-lo. Lembre-se de que o Webflow tem uma conexão muito boa com os lados direitos dos documentos nesses sites para resolver o problema. Mas não tenha medo de perguntar. Então, eventualmente, você acabará com um site que funciona, Daniel. Isso. Eventualmente, você acabará em um site que funciona com seu próprio nome de domínio. Tudo bem, um pouco de anuidade. Este, configurando manualmente os registros DNS do seu site, web design hardcore. Tudo bem, é isso. Para o próximo vídeo. 83. Como testar no seu telefone celular: Olá. Neste vídeo, mostrarei algumas maneiras de testar em um dispositivo móvel. Vamos testar de uma forma falsa. E vamos testar de uma forma real: a maneira falsa é apenas fazer isso no navegador, é muito fácil, bom em um celular. E você pode meio que arrastá-lo e ver os pequenos pontos de interrupção na parte inferior. Nós conversamos sobre isso. Ok, essa é uma maneira. Outra boa maneira é realmente publicar o site. Então, publique um domínio. E então, no navegador, especialmente no Chrome, ok, se você não tem o Chrome e é um web designer, você provavelmente o instala porque é o navegador mais popular e precisa garantir que ele funcione isso. Porém, neste caso, no Chrome, você pode acessar Inspecionar e há uma opção aqui na parte inferior. Você pode ver esse pequeno ícone aqui? Às vezes, por padrão , está à direita ou à esquerda. Acho que está no fundo normalmente. Mas vamos dar uma olhada. Você está procurando esse ícone e pode clicar nele. E você pode dizer responsivo. Eu queria usar os vários tamanhos diferentes e comparar cinco K com o 12º Pro ou qualquer que seja a versão mais recente. Você pode ter uma ideia de que é possível vê-lo diminuir para que você possa ver como fica em tamanho real. Você pode ver que eu preciso mexer no meu botão. Então, isso é uma coisa. Outra boa maneira de fazer isso é que eu ainda gosto de publicá-lo e apenas ver um e-mail com isso e abrir no telefone, meu telefone no Chrome porque sou uma pessoa do Google. Você pode ver se funciona para você. Posso clicar nisso no Chrome e dizer: posso compartilhar com meus dispositivos e posso simplesmente abri-lo e ele o envia para o meu telefone. É um pouco mais rápido. E então basta abri-lo com as mãos no meu telefone. Ok. E eu vejo isso. Você pode ver isso? E eu posso interagir com ele. O bom disso é eu posso ver que os botões estão quebrados, mas isso me dá a chance de apertar todos os botões. Eles são grandes o suficiente para clicar, o que é uma coisa. O Google testará seu site para ver se você pode, de fato, fisicamente, se você receber botões minúsculos. Então, eu não vou gostar. Então você pode fazer um teste porque às vezes fica bem na tela e sua perna fica estranha. E pessoa. Isso é meu. Além disso, é divertido. É divertido ver seu site na Internet, no seu telefone. Basta colar isso na coisa real, publicá-la primeiro e depois abri-la no seu navegador. É bem fácil. Tudo bem, testando em um telefone real. Seu projeto de fluxo de trabalho. O próximo vídeo. 84. Projeto de curso 06 - Portfólio completo: É hora de testar todo o conhecimento que aprendemos nesta última parte do projeto testar todo o conhecimento que aprendemos nesta última parte do Você pode usar suas próprias imagens. Se você está criando seu próprio livro é um bom lugar para começar, ok, use suas próprias imagens. Você está em tiros na cabeça, esse tipo de coisa. Se não é isso que você quer fazer, você pode encontrar imagens de espaço reservado em algo como Unsplash ou pixels PEX ELS k, e você pode sofrer danos pelo portfólio a partir daí. O que você faz? Há três páginas a serem concluídas, a página inicial, a página Fale conosco e uma, pelo menos, uma página de portfólio. Ok, aqui está meu link para o meu design aqui. Ok, vamos pegar algumas imagens de espaço reservado no momento, mas era isso que eu ia fazer com a minha. Vou sair e construí-lo daqui a pouco. Mas essa aqui, depende de você. A aparência que você deseja pode ser simples, pode ser um pouco mais avançada. Você pode passar algum tempo projetando isso. Depende de você. É principalmente praticar e Webflow não precisa ser a melhor coisa que você pode copiar o que eu tenho, maquiagem, algo próprio, fazer investigação sobre o que outras pessoas fizeram, inspire-se. Ok, então essas são as três páginas. Certifique-se de que eles também funcionem em dispositivos móveis. Ok. Todos os diferentes pontos de interrupção. Esses são os requisitos. Essas são as coisas que abordamos desde a última rodada de projetos, apenas certifique-se de que sua tipografia volte. Talvez seja necessário refazê-lo e garantir que esteja nas bordas. Os botões precisam funcionar em todas as páginas de conteúdo. O caso é apenas a navegação funcionando. Símbolos. Deve haver um símbolo para a navegação, provavelmente para o cartão e o rodapé para praticar a garantia de que você pode criar um símbolo. Este deve ser um formulário na página de contato. Eu quero que você pratique o corte uma imagem usando o ajuste de objetos. Talvez tenhamos trazido imagens pré-fabricadas e prontas para uso. Você não vai ter esse tipo de proporção fácil. Imagens quando você está pegando coisas minhas para o Unsplash ou coisas de urina. Então, como fazer esse recorte de CSS, talvez você precise voltar para o vídeo, fazer com que tenhamos um favicon. Todos olhem para aquele cara. A foto deve ser pegajosa, que significa que ela foi empurrada para baixo, pelo menos uma animação da página inicial. Pode ser super simples, mas algo sutil não precisa ser paralaxe ou qualquer outra coisa. Pode ser, pode ser super louco. Depende de você, ao compartilhar o caso de animação, distorcer o link de teste, não o somente leitura. link de encenação é esse aqui, de uma maneira. Vamos até o designer. É esse aqui, o de cima. Então, basta empurrá-lo, não precisa ser um domínio personalizado e apenas copiar e colar isso, mas na página inicial para que possamos ver o que você está fazendo, certifique-se de que haja um título e uma descrição intermediários ou pelo menos a página inicial, e eu tenho que fazer isso por eles. Certifique-se de que todos eles funcionem em dispositivos móveis. Pode ficar um pouco complicado com a animação. No menor celular real. Você pode simplesmente desativá-lo para o celular porque pode ser demais para o espaço na tela que você tem, mas pode ser adquirido para produtos de desktop e tablet. Faça uma captura de tela das três páginas o máximo que você pode ver no navegador, faça o upload delas e também compartilhe o link de teste. Esse aqui. Envie-os para o site, compartilhe nas redes sociais, especialmente neste link aqui, se você estiver disposto a compartilhá-lo nos grupos, mesmo que sejam apenas as capturas de tela, adoro ver o que você está recebendo com seu portfólio. Mas uma coisa a observar é apenas anotar se este é seu próprio trabalho ou trabalho de um site de biblioteca de estoque. Só para parar qualquer confusão de pessoas pensando, Oh cara, você é um ótimo, posso contratá-lo e você fica tipo, Sim, mas eu acabei de roubar todas essas coisas. Então, fique muito óbvio ao dizer que estou usando o trabalho de outra pessoa como espaço reservado para praticar minhas habilidades de Webflow e até mesmo creditar as imagens, se você quiser. E é sempre uma boa ideia dar crédito às imagens. Você notará um Unsplash ao baixá-lo, ele lhe dará o nome. Você pode dizer: Obrigado Carol, alguém pelas imagens ou imagens fornecidas por e listar as pessoas que você usou. Tudo bem, é um problema razoavelmente grande, especialmente se você ainda não concluiu esta seção principal. Você tem, só há algumas pequenas coisas para fazer. Eu digo que ir design, é muito fácil. Novamente, não se trata de quão boas são as cores do seu portfólio. Você usa fontes, layout, essas outras coisas. Este curso é sobre como confiar no Webflow e não tenha medo, se você quiser, eu não sou o melhor designer, mas estou aprendendo o fluxo de trabalho. Eu não vou compartilhar isso. Compartilhe isso explica que você é novo no design, talvez esteja aprendendo as funções do Webflow e adoraríamos receber feedback. Tudo bem, esse é o projeto de classe, nunca portfólio de sexo, completo. Vá fazer isso e então podemos começar outro projeto. Tudo bem, te vejo lá daqui a pouco. Na verdade, você vai passar algum tempo fazendo isso. vejo em pouco tempo. Vou te ajudar a começar no próximo vídeo. Agora. 85. Como é que a coleção Static vs dinâmica de CMS no fluxo Web: Ei, o que estamos discutindo? Estamos discutindo duas coisas. O que é CMS e o que é um site estático versus dinâmico. Até agora, criamos sites estáticos, apesar de sermos animação bacana, ainda considerada um site estático. O que o torna um site dinâmico? Em primeiro lugar, vamos falar sobre um CMS porque esse é o ingrediente chave para torná-lo um site dinâmico. Cms, sistema de gerenciamento de conteúdo ou banco de dados. É um monte de informações que você pode colocar em seu site, carregar e mostrar às pessoas. Você não o arrasta ao copiar e colar em estática. Você está fazendo todo o trabalho. O que você pode fazer é ter esse banco de dados perfeito. Olá, chame isso de coleção. E você coloca um monte de informações lá. E você diz, coloque todas as informações na minha página, no meu site como páginas e ele simplesmente coloca tudo lá em cima. Ok. Esse é um site dinâmico, digamos, um post de blog, bom exemplo disso e do que faremos daqui a pouco. Ok, se alguém dissesse para você, Anna tem três postagens no meu site, continue com isso, pode ser como, claro, não se preocupe. Construa o primeiro, duplique-o e, em seguida, faça com que a próxima cópia cole tudo o que eu não achei bonito , quando bom e depois ótimo, legal. Adoro esses três. Você pode fazer mais 300 curtidas? Claro. Ok. E você fugiu? Um site dinâmico. O que acontece é que você pode dizer: Sim, eu posso fazer 300 deles. Mas o que vou fazer por você é apenas estilizar. Vou construir um banco de dados de coleção, CMS, tudo meio que a mesma coisa, coisas ligeiramente diferentes, mas a mesma coisa nesse contexto. Eu vou construir isso para você. Vou estilizar uma postagem no blog. A batida é assim, o parágrafo fica assim. As imagens entram aqui. Ok? Tudo parece assim. Você diz: “Ei, cliente, faça quantas quiser”. Ótimo. Eles simplesmente inserem coisas no banco de dados e ele começa a expelir páginas. Isso é bom, isso também é dinâmico. Então, outros bons exemplos disso podem ser que você tem uma lista de funcionários, ok? E você tem um CSV do seu CRM ou do que quer que ele venha, e você tem dezenas deles, centenas deles, milhares deles. Você pode estilizar um. Confira todos eles e no site. Ok. Carrega todos eles, se quiser. Ok, pode ser que estejam chegando os eventos em que você tenha uma grande lista de banco de dados, coleção, outros bons usos, receitas, menus, qualquer coisa que você tenha muito. Eu tive alguns outros exemplos. Não consigo me lembrar deles. Autores, clientes, membros da equipe, listagens, músicas, shows, receitas. Todos esses são bons casos de uso em que há muitas coisas iguais. Então, sim, é isso. Vamos começar a construir nosso site dinâmico que requer uma coleção CMS Slash. Ok, e então eu vou te mostrar como tudo funciona e fazer um, é divertido. Nós faremos, faremos alguns depoimentos. Primeiro. Gays, eles são carregados em um site e então começaremos a criar páginas com o blog. Tudo bem, vamos nos barbear esta manhã. Totalmente não funcionou. Como se você não notasse. Reproduzindo o vídeo, como você pode ver o aviso, mas adivinhe? Você não é minha mãe. Eu, Dan 86. Como criar uma coleção CMS no Webflow: Olá a todos. Neste vídeo, vamos criar um novo site. Será para todo o futuro blog k. Também criaremos nossa primeira coleção de CMS. É para isso que estamos aqui. Vamos criar uma conexão com nosso banco de dados. É isso que torna nosso site dinâmico. E, em seguida, adicionaremos manualmente apenas um item a esse banco de dados. No nosso caso, será um depoimento de Sarah Smith vai ter um depoimento, vai ter uma foto da cabeça e alguns outros detalhes, certo, para começar a fazer uma marca novo site. Ok, só um em branco. Agora é um pouco estranho. Vamos começar a criar uma coleção em um segundo e podemos criar uma no site gratuito. Incrível. Nada a ver com meu espaço de trabalho, mas neste site em si, você pode ter até 50 itens em seu CMS, o que é uma coisa útil para começar. O problema é que, no momento, você pode ter itens de CMS que podem ser um alcano, 50 depoimentos. Mas assim que você passa para o básico, você obtém zero novamente se precisar de um domínio personalizado, você precisa basicamente pular para uma dessas duas contas. E mesmo assim, 50 discos não é muito, então precisaremos de muito, potencialmente muito mais. Então, itens EMS dos anos 2000. Perfeito. Então, vou atualizar meu site e, no momento em que não precisarmos, veremos até onde chegaremos com o gratuito. Tudo bem, então vamos dar uma olhada em fazer essa coleção. Então, vamos criar uma coleção. Eles as chamam de coleções CMS, pense em banco de dados. Ok, isso me dá um nome bonito. Ok, então você cria essa coleção geral. Você pode ter mais coleções em uma coisa, você pode ter depoimentos como uma coleção. Você pode ter uma coleção de preços. Você pode ter uma coleção de produtos com preços e fotos do produto. Você pode ter muitas coleções em um site. Vamos começar com este. Isso vai ser depoimentos. Tudo bem, ignore o resto por enquanto e veja nossas informações básicas. Temos duas opções. Por padrão, apenas algo para a lista k. Então, vamos dar a ela um nome, que é perfeito para nós. Vamos ter o nome da pessoa que nos deu o depoimento e ignorar a lesma no momento. Falaremos sobre isso no próximo vídeo, quando fizermos postagens no blog Vamos dar uma olhada na adição de campos. Vamos adicionar um campo personalizado. E provavelmente o mais importante é um campo de texto simples. Esse é o rótulo, pois será chamado de depoimento. Testemunho. Ok, então o rótulo é que você pode ver uma prévia aqui, meu editor, ok, a pessoa que vai enviar essas coisas, pode ser um funcionário, pode ser o cliente, pode ser você. Eles terão essa pequena coisa interativa para preencher e outras coisas. Eles serão capazes de digitá-lo. OK. Digite o nome da pessoa do depoimento e ela preencherá o campo do depoimento. Você pode adicionar ajuda com texto, se quiser. Há uma coisa estranha como esse número distorcido. Você gosta, você sabe que a pessoa que o preencheu como curtida, você tem que explicar que o número SKU se encontra à esquerda para explicar um pouco mais. Não preciso porque o amônio é bem simples. O que vai lá dentro? O meu será de várias linhas neste caso. Limites de caracteres. Provavelmente. Eu não sei o que vai ser. Vou digitar 500 e testá-lo porque não quero que meu depoimento seja muito longo. É necessário? Não. OK. Bem, provavelmente é. Não quero ser honesto. Não adianta. Quero dizer, depoimento. Isso não tem um depoimento. O que mais fomos? Quer ir em nome da outra pessoa, o testamento do escrito. Vamos adicionar isso. Basta dar uma olhada rápida, certo? Capturas ricas explicarão em um pouco, imagem, ótimo, várias imagens. Você pode ter isso, esta vai ser ótima porque vamos fazer uma foto na cabeça, vamos deixar essa por aí, várias imagens significam que haverá muitas opções para escolher. Ok, bom para uma postagem no blog. Faça upload de várias imagens uma postagem do blog para que a pessoa possa escolher entre elas. Será um link de vídeo, link, e-mail, número de telefone, k, apenas um número antigo normal. Data e hora. Nós faremos isso ainda. Falaremos sobre isso muda mais tarde e veremos as opções mais tarde. Existe uma opção de upload de arquivo? Agora lembre-se de que isso não é, você está adicionando um arquivo agora. Isso lhes dá a opção mais tarde, quando estiverem fazendo o upload, de anexar um arquivo, um documento do Word, PDF, pode ser, eu diria que estamos ganhando algo para nossa loja: o ganho é listar o preço, o que é, e talvez você possa baixar algumas especificações nele. Eu não quero isso sem salvar. Então, eu quero uma imagem. E essa imagem vai se encaixar. OK. Talvez seja o logotipo de uma empresa. Se for esse depoimento, vou acrescentar algumas outras coisas, como um selecionador de datas. Eu vou dizer que esta é a data do depoimento. Gostei deles no meu site, onde você pode ver que eles são de cinco anos atrás embora deste mês ou do mês passado. OK. Portanto, não precisa de ajuda ou mensagem de texto. Não precisa de um selecionador de horário. E isso não precisa ser exigido. Vou fazer essa. Vamos adicionar mais um. Apenas um campo de texto simples. Na verdade, não, não vinculamos. Ok, saia sem salvar, vamos adicionar nosso link clicável. Então, isso vai ser como Instagram, link do Instagram. Assim, eles podem colar isso lá quando estiverem fazendo o upload, para que as pessoas possam acessar seus negócios ou o que quer que seja. Principalmente porque eu só queria incluir um link. Tudo bem, então temos algumas coisas básicas. O que acaba acontecendo? Vamos criar a coleção. E agora temos esse tipo de espaço reservado. Na verdade, ainda não temos nenhum depoimento. Acabamos de encontrar uma maneira de colocá-los no site. Ok, se você precisar editá-lo aqui, nos depoimentos, você pode ver essas são as coisas que vou pedir. Então, vamos cancelar isso. Não tenho nenhum item na minha coleção. Você pode simplesmente me dar alguns itens de amostra e ele colocaria algumas coisas. Vamos fazer isso passo a passo. O que fazer o primeiro juntos? E então eu vou te mostrar como trazê-los com um CSV. Então, eu coloquei em seus arquivos de exercícios no Blog, há um depoimento. OK. E eu só tenho algumas coisas básicas para isso. Você não precisa usá-lo. Estou usando depoimentos reais, mas mudei os nomes apenas por motivos de privacidade. Portanto, Sarah Smith, um depoimento, é necessária por causa dos asteriscos vermelhos que colam a escuta. Ela tem um problema. OK. Qual delas é a moça? OK. Você vai, esses também são apenas espaços reservados. Eles estão no seu blog. Você verá tiros na cabeça e eu tenho quatro deles lá. Você pode usar o que mais eu quero fazer? A data do depoimento, clique aqui, escolha uma data no passado e o link do Instagram. Eu não sei o que é essa pessoa falsa. Vou usar o meu. Venha me seguir até lá. Ok, e eu vou clicar em Criar. Lá vamos nós. Então, eu tenho uma coleção perfeita. Eu veria o banco de dados da Miss e ele tem um item nele. OK. De um depoimento de Sarah Smith. Tudo bem, quanto tempo suficiente para este vídeo, vamos entrar no próximo vídeo e enviaremos um CSV para preenchê-lo. Portanto, não estamos fazendo apenas um de cada vez. Tudo bem, te vejo lá. 87. Como adicionar a lista de coleções CMS através do CSV Webflow: Olá a todos. Neste vídeo, vou mostrar como trazê-lo em um CSV produzido talvez a partir do seu CMS, seja do seu próprio CMS, seu próprio CMS, talvez de um sistema de gerenciamento de clientes, CMS, talvez seja o seu software de contabilidade que produz isso. Todos os seus, talvez seu software de gerenciamento de produtos ou como nós aqui, vamos fazer isso a partir de uma planilha do Google. Vou trazê-lo para o Webflow e colocá-lo automaticamente como itens dentro das coleções. Vamos fazer isso um por um, é factível, tedioso. E haverá muitas situações em que você está trazendo de um banco de dados que já existe. Você pode estar trabalhando com algum CRM como um software de gerenciamento de clientes ou algum tipo de pacote contábil ou coisa de estoque. O que você está procurando é poder importar um CSV, ok? Então você saberá que, se não souber, pode estar fazendo da seguinte maneira que eu fiz é que acabei de criar uma planilha do Google, homossexual, e tenho meu cliente para preenchê-la. Por meu cliente, quero dizer, eu só faço isso manualmente dessa maneira. E aqui no Google Sheets eu fui para Arquivo e fiz o download. E estamos procurando por esses valores separados por vírgula, CSV. Eu tenho um para você. Ok, você pode acessar seus arquivos de exercícios. Há um chamado depoimento que agora está perguntando é a primeira linha. Basicamente, o que está perguntando é devemos ignorar a primeira linha? Aqui? primeira linha, na verdade, não tem nomes de pessoas e ajusta o título. Então, sim, é. E o que ele fará é tentar combinar o que você escreveu. Dissemos que retiramos o nome dele. Foi assim que o membro Webflow chamou esse primeiro campo, que preenchemos. E esse também é chamado de nome. Assim, você pode economizar algum tempo se estiver produzindo o banco de dados ou o CSV, você pode usar o mesmo nome porque os depoimentos são iguais e ele é automaticamente mapeado para ele. Então nome é igual a nome, depoimento é igual a depoimento. Na verdade, o software não adicionou este hoje. Vou importá-lo e criar um novo campo. E nós faremos isso também. Vamos fazer isso como uma opção. Ok, um novo campo chamado software ajuda Texas é, na verdade, software usado. Talvez isso faça mais sentido para o usuário. E isso criará as seguintes opções que podemos escolher. É um pequeno menu suspenso, sem bônus. E aqui está eu fazendo esse encontro. Eu não tenho nenhuma data. Vou ter que adicioná-los manualmente. Essa data. Encontro, eu chamo de data e aqui se chama Data. Por que não combinou? E então, bem, se isso não acontecer, você pode mapear para um campo existente que eu chamei de depoimento de dados. É por isso que o Instagram. Eu não coloquei isso aí. Eu fiz um mapeamento para um campo. Todas essas coisas que eu esqueci, adicionei o link do Instagram, mencionei e facilitei a vida. Eu não tinha uma foto de rosto porque você pode realmente obter um banco de dados para vincular a duas imagens e arquivos. E isso vai depender de onde eles estão se encontrarem online e facilitar as coisas. Ok, e você pode colocar caminhos absolutos e aqui, para um definido, mas fora do escopo deste, vamos apenas carregá-los, adicioná-los nós mesmos. Então estamos prontos para importar nove pode ser 900, ok, é menos satisfatório com seus únicos nove. Ok, mas quando há 9.000, veja isso. Tudo bem. Isso é importante, não importante no momento. Eu não, eu não pretendo publicá-los como suas próprias páginas mencionadas, são postagens de blog. Eu poderia fazer com que o palco fosse republicado, eles não foram publicados e estou feliz em deixá-los assim. Eu gosto no começo, eles estão um pouco mais cedo. Eu mostrei os depoimentos. Isso é o que eu vou passar para a página inicial. Eles não terão suas próprias páginas separadas. Agora, aqui, podemos ver coisas como nome e coisas que usamos. Faltam alguns pedaços. Você pode ir até aqui porque é uma canetinha e dizer, na verdade, mostre-me o depoimento em si e me mostre a data do depoimento. Mas eu não preciso de um link do Instagram criado, modificado ou publicado, você pode precisar. Depende de você o que você quer ver nesta lista, ok, então lembre-se desses itens da minha lista, esta é minha coleção. Se eu quiser editar a coleção, tenho que voltar aqui e clicar na pequena engrenagem. Ali está lá. Isso editará minha coleção geral. Se eu quiser entrar na coleção. Se eu quiser entrar nos itens editados, cancele isso e eu os analiso individualmente. Eu posso ir e ajustá-los. E o que faremos é escolher os quatro primeiros e adicionar uma imagem. Então, na verdade, Sarah Smith já tem um. Então, vamos fazer, vamos escolher aleatoriamente, porque isso vai ajudar mais tarde. Vou escolher essa pessoa que tinha empregos. Esse cara, esse cara não é como, é uma foto de banco de imagens. Eu penso em si mesmo. Acho que pode ser Joseph, mas ele é usado nas maquetes de todo mundo. Ele é um ótimo lugar para ocupar o lugar. Você é bonito, cara, Joseph. Vamos dar uma olhada. Eu só vou escolher alguns diferentes. Na verdade, estou esperando o upload. Salvar. Incrível. Vamos escolher outro. Vou acelerar isso. Tudo bem, Don, eles estão todos salvos. Você pode dizer que eu usei um gerador de nomes aleatórios? Quase não são nomes. Ok? Então é assim que se faz o upload de um CSV. E, na verdade, o que talvez tenhamos que fazer com o Syriza aqui que não existia antes. Então, vou ter que escolher e dizer que este é um depoimento de que ela estava fazendo um curso, talvez seja Sigma. Salve-a. E para o próximo vídeo. 88. Como adicionar a lista de coleções CMS à página na Figma: Olá a todos. Neste vídeo, vamos pegar esta lista de depoimentos de nossa coleção. E vamos colocá-lo na página e ele começará a preenchê-lo automaticamente como um site dinâmico. Tudo bem, vamos entrar e eu vou te mostrar como. Tudo bem, então eu tenho um site em branco, então apenas um pouco de limpeza. Vou adicionar um recipiente dentro desse recipiente na verdade, não come nada. É sempre bom ter um diblock dentro do recipiente porque eu vou empurrá-lo de cima para baixo. Não tenho certeza se não aguento ficar grudado no topo. Tudo bem, então vamos adicioná-lo. Está debaixo da nossa cama. Você pode ter se deparado com isso. Ali está lá. Cms, no momento que há apenas um item neste pequeno grupo. É a lista de coleções. Sabemos qual é a lista. Já vimos isso antes. Ok, é essa parte da coleção e esta é a lista de coleções. Então vamos, vamos editar. É um pouco complicado de se livrar disso. Parece algo novo. Mas você pode ver o crossover aqui? Você pode fechar tudo. Então, é apenas uma coisa gigante que se abre. Então, vamos adicionar nossa lista de coleções dentro da minha div. Aqui vamos nós. Ele realmente não faz nada até que você o conecte a uma fonte, porque você pode ter mais de um CMS em nosso site, estamos fazendo depoimentos. Também podem ser seus produtos. Talvez membros da equipe, mudanças de casos, tipo de depoimentos e veja isso. Meio que funciona pela metade, pelo menos está trazendo os nomes. Mas não há mais nada para assistir se eu o visualizar, nem muita coisa. Eles são como coisas fantasmas. Eles ajudariam você a ter uma ideia do que são todas essas células diferentes. E fica muito melhor quando vamos para esse layout diferente. Tem três colunas porque é metade do que queremos que seja. Então, vamos começar a adicionar bits. Então, o que vou fazer é adicionar qualquer coisa agora, qualquer uma dessas opções e conectá-la à nossa lista. Então, vamos adicionar o depoimento. Essa é a mais importante. Então, vamos colocar um bloco de texto. Poderia ser um parágrafo? Eu provavelmente poderia. Ok. E você pode ver que está dentro do meu item de coleção. O que eu quero fazer é até mesmo colocá-lo aqui. Diz que eu gostaria de obter o texto desse bloco de texto a partir de depoimentos. Ela sabe porque conectamos a lista ao depoimento. Então está acontecendo, Ei, você quer receber a mensagem de algum lugar? De onde você gostaria de obtê-lo? Quatro. Vamos começar com isso e vamos direto do depoimento. São textos simples. Ótimo. Você pode acessar o logotipo da minha caixa de texto simples que está delimitada. É um pouco difícil de ler, mas você pode ver que são 12. Quantos nós fizemos? Nós fazemos nove ou dez? Não tenho certeza de quantos fizemos, mas está tudo amontoado lá dentro. Vamos estilizar não o bloco de texto, mas vamos estilizar o item da coleção. Vou dar a ele um nome de classe de amônio. Eu chamo isso de testemunho ou invólucro. Vou apenas adicionar um monte de margens e preenchimento para que eu possa contornar. E digamos que seja imagina. Na verdade, vou usar um estofamento que não quebre minhas caixinhas. Potente. Pagando os dois lados, superior e inferior. Só para que eu possa separá-los. Tudo bem. Então, retiramos do LC-MS, olhe para nós, construímos um banco de dados chamado coleção. Em seguida, adicionamos esse invólucro de lista dentro da lista. Começamos a adicionar elementos e conectá-los à lista. Vamos adicionar outro. Então, vamos ver o que mais precisamos : o nome da pessoa. É outro bloco de texto. Ok, velho livro didático chato. Vou conectar esse à pessoa que tem um nome e vou dar um pouco de estilo. Ok, isso vai ser um depoimento. Copie esse código e use-o para carregar. E essa é a formatação do nome. Vou apenas fazer um estilo básico. Estamos fazendo o modo rápido. Isso é tudo que eu fiz. Pedi ao editor que acelerasse, mas tenho certeza que você quando me der 2 s. Sim, ótimo. Então, a caixa de texto que eu poderia começar. Eu vou fazer toda a embalagem de carrapatos, número de testemunhos adicionados ou a embalagem de tudo isso. E eu vou colocar todas as fontes aqui, na verdade agora podemos acelerá-lo porque eu posso fazer algumas coisas. Seu peso aí. Tudo bem, isso é tudo que eu fiz também. Sem acelerar. Sustenta a fonte para tudo dentro dela. Ok, e talvez esse livro didático, então eu vou chamar esse depoimento, e esse será chamado de texto. Eu vou ligar assim. Eu ia adicionar um pouco de preenchimento na parte inferior. Então, espaçando você. Tudo bem, vamos continuar adicionando coisas. Vamos lá, vou adicionar outro bloco de texto. Ok? E isso vai ser, na verdade, vai ser um livro didático, sim. Então, haverá um livro didático com depoimentos. O que vai ser? Será o software usado. Mesmo que fosse um menu suspenso no lado da entrada, onde eles podiam escolher. Na verdade, você não viu esse dígito. Vamos fazer isso. Está aqui o texto. Vamos dar uma olhada na coleção em si. Porque lembre-se de que fizemos uma lista suspensa. Na verdade, eu não olhei muito para isso. Ok. Aí está. Isso significa que quando alguém está adicionando, digamos que esteja adicionando isso e vá direto ao assunto. Mas você consegue ver? Eles têm que adicionar, eles podem escolher o nosso na Figma ou é photoshop e depois salvar e voltar no meu documento agora, você pode ver que ele mudou do Photoshop para o XD e esse é um exemplo de uso muito bom de esse banco de dados. Eu posso alterá-lo lá, talvez importar um CSV totalmente novo. Ele examinará e atualizará tudo isso. Portanto, não é algo que eu esteja copiando e colando. Talvez sejam testemunhos de que você só tem três deles na página inicial. E você nunca os mudou. Não precisa de um CMS. Então, muito drama para fazer isso acontecer. É para esse tipo de coisa repetitiva que acontece o tempo todo. Como nos meus depoimentos, gosto de atualizá-lo toda semana de novos para diferentes bits de software. Então eu vou estilizar tudo isso em um segundo. Vamos ver o que mais podemos acrescentar. Porque o que foi pedido? Minha lista, eu lembro que havia uma imagem ou deveríamos fazer a imagem agora , vamos fazer a imagem , eu vou editar, mas ela vai quebrar porque apenas algumas delas têm imagens. Então, vamos adicionar uma imagem dentro daqui. Ok, você pode ir até o topo. Claro. Posso escolher uma imagem ou dizer que realmente a obtive nos depoimentos. Você vê, reduza para que só haja uma coisa que é uma imagem, ótimo. E apenas alguns deles, céus, isso vai quebrar meu layout. Vou desligá-lo no momento porque vou te mostrar isso em um segundo. Se você quiser apenas excluir um item que você conectou, basta clicar em Excluir. Isso me lembra de um bom argumento. Digamos que eu os deixe lá. E digamos que eu não queira o do meio, como se eu fosse me livrar deles. Eu poderia ler minha lista e dizer: basta remover todos eles. Ou eu posso ir para minha coleção, que é mais ou menos como a geral, é a conta do chefe que deu todos esses itens. E eu posso dizer, na verdade, vamos nos livrar disso. Não quero tiros na cabeça, só me cause problemas. Eu vou até aqui e vou excluí-lo. Dirá que você não pode porque está sendo usado na página. Onde está sendo conectado? Ok. Está me dizendo que é sua própria página inicial. Tem uma imagem. Vamos ver isso. Dizendo que aqui está. Não consigo excluí-lo do banco de dados porque está sendo usado. Então, muito bom. Obrigada Mas agora eu poderia excluí-lo. E como não está sendo usado na página, isso me permitirá excluí-lo do banco de dados ou eles o chamam de coleção. Boa pequena nota lateral. Tudo bem, essa é a principal coragem deste vídeo. Se você quiser continuar, vou estilizá-los e adicionar mais alguns, mas é a mesma coisa. O que quer que você tenha nessa lista, você pode conferir. Eu tenho um bloco de links. Então, vou adicionar o bloco de links. Vou pegar o URL do meu link do Instagram. Na verdade, acho que os blocos de links não funcionarão , claramente, não funcionam. Vamos embora. O que mais poderíamos fazer são duas coisas que poderíamos fazer. Acho que os textos são vinculados ou podemos adicionar apenas um livro didático normal e acrescentar isso, o hiperlink que fizemos anteriormente. Mas vamos adicionar apenas um link de texto. Está conectado. Obtenha-o do Instagram. Agora, o que está recebendo? Fromm, ele diz que está recebendo o URL de lá para colocá-lo no final, mas não está conseguindo, você recebe um texto de lá também. Ok, link do Instagram. Eu realmente não quero esse texto. Ok, o que eu quero fazer é escrever lá e dizer o link do Instagram. Link do Instagram. Ok, e vá instalar isso. excitação será única , exceto que eu as fiz todas iguais. Ok, então o que mais eu quero? O que mais temos nessa lista? Vamos ignorar os tiros na cabeça no momento. Não me lembro do que está na minha lista para esperar lá. Tudo bem, e foi a data. Então, outro livro didático. Ok, você vai usar cânhamo. Eu só recebo os tiques dos depoimentos e será a data em que você receberá esses outros. Então, temos a data do depoimento. Existem esses outros criados, publicados e atualizados. Esses são gerados automaticamente como quando a lista foi criada, quando foi publicada. Isso ainda não foi publicado, então haverá um horário associado a ele e, se tiver sido atualizado, não quero nenhum deles no momento. Eles serão úteis mais tarde, mas na data do depoimento. Perfeito. Tudo bem. Então você pode ficar por aqui, se quiser. Na verdade, eu já disse isso, não é? Vou apenas examiná-lo e estilizá-lo. Então, vou fazer isso no modo Velocidade, modo velocidade real desta vez. Tudo bem, isso não é muito sexy, mas eu fiz isso, certo. Vamos brincar um pouco mais com essa lista no próximo vídeo. 89. Como reorganizar o que é mostrado na lista de coleções para Webflow: Olá a todos. Neste vídeo, vamos pegar essa lista e poderemos reorganizar as informações mostradas. Podemos decidir mostrar apenas aqueles que são depoimentos do software photoshop, ou apenas mostrar aqueles que têm imagens, ou apenas me mostrar os três primeiros e depois outros depoimentos mais recentes. Vamos pegar nossa lista para fazer nossas licitações. Deixa eu te mostrar como. Vamos fazer alguma reorganização. E no momento está me mostrando muitas opções. Talvez eu quisesse mostrar os primeiros seis ou três. Então, o que podemos fazer é o que acaba acontecendo é a lista. Se eu for clicado em qualquer lugar aqui, eu deveria ser capaz de chegar a essa engrenagem e ela me mostrar coisas sobre essa em particular. Vamos subir um nível. Vamos até os pais e isso me dá mais coisas. Ok, e eu posso voltar e dizer que quero que duas colunas sejam para k ou três, você pode limitar os itens. Eu diria que quero mostrar apenas três, por favor, ou seis. Vamos voltar para três. filtragem pode ser boa porque, no momento, está apenas me mostrando uma ordem k. Então, digamos que esses são os depoimentos de uma página específica que dizem que é a página Figma com a página do Photoshop. O que eu posso fazer é dizer, na verdade, eu só quero te mostrar nesta lista. Eu gostaria de mostrar apenas o nome que não é igual ao nome que eu quero. Vai ser fácil. O nome que posso começar a digitar, posso dizer que as pessoas se chamam Pam. E eu escrevi errado. Então, não terá nomes. O que eu quero fazer, provavelmente é mais fácil não ter nomes, mas talvez eu queira mostrar aqueles que mas talvez eu queira mostrar aqueles que usam o software igual ao Figma. Perfeito. Então, isso só vai me mostrar os resultados do Figma. Portanto, esses podem ser produtos baratos para suas tags. O que os produtos econômicos não aparecem apenas nessa página, ou talvez estejam em uma página do seu portfólio que mostra depoimentos do Wix. Então, está mostrando apenas depoimentos de UX. Nico, você entende? Digamos que eu queira, porque essas imagens, deixe-me dizer se eu adicionar a imagem. Então, aqui eu vou em frente e vou para Image. Ok, há muitas outras páginas que não têm imagens, mas digamos que na página inicial e, particularmente, eu quero que isso tenha fotos na cabeça seja como, bem, nem todas elas têm fotos na cabeça. O que você pode fazer é removê-lo, voltar ao invólucro externo e dizer, mostre-me três, mas não o uso do software. Quero filtrar por aquelas que têm imagens, fotos da nossa parte, imagens que eu disse e pessoas que não querem conferir, aí está. Preciso estilizá-los, farei no próximo vídeo. Essa é realmente uma forma muito poderosa classificar essas informações. Novamente, lembre-se de que você pode digitar isso um por um sem usar o CMS. Mas você pode começar a ver como é útil e poderoso quando você de filtrar e classificar. Ok, suar também pode ser útil. Vamos dar uma olhada, digamos que eu vou classificar por nome, mas vou dizer o grande quando o testemunho foi criado, a data do depoimento. mais antigo ao mais novo. Do mais recente ao mais antigo. OK. Ou pode estar lá, em vez da data dos depoimentos, apenas os dados foram realmente criados ou quando foram atualizados? Sim. Do mais recente ao mais antigo. Salvar. Você vai porque eu edito imagens nelas que atualizaram os itens da lista. Então eles chegaram ao topo. A última coisa que ainda não mencionei é que você pode desconectar isso. Você pode dizer: Na verdade, essa coisa aqui, essa pequena engrenagem, você pode dizer que, na verdade , não é testemunho, é para ser usado por software. Você pode reatribuí-los se quiser. Não é isso que eu quero fazer. Mas eu esqueci de mencionar anteriormente, uma das coisas com o CMS e a lista é como, se ele mostrar meu portfólio, tenha uma lista. Você deve fazer isso só porque dá certo, é uma boa prática, mas depende de quanto você vai atualizá-lo. Como se você fosse uma pessoa, nenhum portfólio pessoal, atualizando-o toda semana, talvez você fazendo um 1s e o abandonando. Como muitos de nós , talvez um CMS seja um pequeno trabalho extra que você não precisa. Mas talvez para uma agência maior, onde você tenha muitos depoimentos e haja muitos tipos diferentes de categorias para esse trabalho que você fez. Faz sentido ter um CMS. Lembro que esse era meu trabalho, uma grande agência quando não tínhamos como trabalhar e criar peças de portfólio porque não tínhamos mais nada para fazer. Ok, e analisamos, encontramos boas imagens, fazemos com que pareçam legais, fazemos alguns artigos. Alguém teria que verificar minha redação, minha ortografia e gramática e enviá-las para o site. O Cms seria perfeito para isso. Ok, então isso é reorganizar os dados de nossas listas. Muito poderoso. Vamos estilizá-lo no próximo vídeo. 90. Como criar a nossa lista de coleções com grade e flexão no Webflow: Olá a todos. Vamos ver até onde terminamos o último vídeo e vamos dar um estilo aos nossos depoimentos. A principal novidade neste é que eu converti essa lista em uma grade, que não é a configuração natural e de exibição dessas listas de coleções, existem colunas por padrão, mas muitas vezes Quero convertê-los grades e vou mostrar como. Além disso, faremos alguns estilos. Fazemos com que tudo se alinhe da mesma na parte inferior das cabeças arredondadas, porque de alguma forma todas as pessoas com cabeças precisam estar em círculos. É como a regra da internet. Tudo bem, vamos entrar. Tudo bem, vamos parar com o que você não fez antes. E então, muitos dos outros estilos são apenas coisas que fizemos. Vamos nos recuperar porque é bom lembrar. A primeira é que, no momento, uma lista de coleções vem por padrão na tela chamada colunas. Nós meio que analisamos isso antes e eu disse: Só não use colunas. Vamos usar a grade. As colunas são boas, as melhores, não há nada de errado com elas. Eu os acho complicados quando você tem mais do que três itens quando há outra linha e seis deles, você simplesmente perde muito o controle. É como se dividir. Eles são apenas outros problemas. Então você pode estar fazendo a mesma coisa e pensar: como você a converte? Bem, se eu acessar minhas configurações de exibição e voltar a isso, então lá está meu invólucro, substitua-o para bloquear. Vou subir um mais alto. O espaço no bloco, nenhum deles é de duas colunas? Como Wade, o que acaba acontecendo é que ele é realmente controlado aqui no painel de configurações. Essa é a única vez que isso acontece. Ok, é com esse elemento específico da lista de coleções que adicionamos. Eles meio que o tiram dessa página e o colocam aqui. Nós, Quem você faz isso também? Tem um pouco de dois. Eles são rappers do lado de fora k para dizer de qual lista eles estão vindo. Há esse pai Rapa, depois há outro invólucro e depois há minha opção de lista real. Eu vou fazer isso com este porque embora não possamos ver todos os três elementos, é isso que é. Há um e ele só se repete algumas vezes. Então, os pais, eu quero dividir todos esses caras em uma grade, ok, então você tem que ser uma grade e ela vai quebrar. E eu vou clicar em Concluído. Você gosta do que aconteceu aqui. Você pode até ver o fluxo de trabalho que diz: Ei, se você quiser usar essa grade, você precisa desativar as colunas e pode até clicar no botão ou ir até aqui. O mesmo, mesmo, mesmo lugar aqui. E mesmo aqui, há um pequeno aviso dizendo que você tem que desligar isso clicando nesse botão ou clicando no mesmo, mesmo, você vai e está funcionando. Parece que não está funcionando. Essa que tem essa imagem gigante está destruindo meu layout, mas está funcionando. Vamos dar uma olhada. Pegou a lista, entre aqui, digamos que apenas filtre. Deixe-me mostrar fotos na cabeça que eu configurei ou não para você. Então está me mostrando esse ácido para meus três. Vou desligar o limite. Aí está você. Essas são as datas de vencimento e do meu cara. Ok. Eu vou fazer o oposto. Mostre-me os que estão sentados. Se você quiser mudar uma dessas coisas para uma grade, clique na lista principal, não no pai do pai. Ok, mude para grade e depois desligue as colunas dentro das configurações, o que é um lugar estranho. Tudo bem, vamos ver essas imagens primeiro , porque isso também ajudará no layout com uma grade. Vou mudar para, estou adicionando minhas colunas aqui durante todo o curso. Você pode adicioná-los aqui. Eu nunca faço algum motivo, nada de errado com isso. Ok. Eu vou fazer um sim completo, subiu. Ok, vamos clicar em Concluído e vamos corrigir essas imagens. Foi a tarefa mais cedo. Talvez você não tenha percebido, talvez tenha descoberto. Se você fez isso, você saberá que eu preciso definir o tamanho para ele. Digamos que eu queira fazê-los 200 por 200. É provável que eu não goste que essa coluna inteira seja muito pequena. Vovó, sua mãe, serão três. Tudo bem, está bom de novo. Então, 200 por 200 ainda é provavelmente muito grande. Agora, eu não adicionei uma aula para eles. Vou chamar essa imagem de renomear. Serão 15150. Eu gostaria de alternar e ele estará apenas no seu teclado, foi passar para o próximo. E então dizemos em forma, vamos dizer que pode cobrir. Então, em cava, você pode acessar essas opções aqui e decidir onde ela se estende do centro para tirar um tiro na cabeça. Obviamente, não está funcionando para mim, então provavelmente vou ter que ir para o topo perto de você. Esse é meio que o mais consistente. O queixo de todo mundo. Nós faremos essa. Co e qualquer outra coisa que queiramos fazer. Isso adicionou os cantos arredondados. Então aqui embaixo, cantos arredondados, basta dizer que a batida 200 é grande. Agora eu quero colocar tudo em uma linha. E eu fiz isso com isso antes, apenas com um membro de texto, acabei de criar um estilo e corri para a direita Ally, SRE, alinhamento à direita. E funciona facilmente para textos. Mas, às vezes, se há muitas coisas que você precisa perder, como podemos fazer com que tudo chegue ao centro? Como você faria isso, se adivinhasse, pegasse a embalagem e colocasse como Não? Ele é uma criança da grade, nós sabemos disso, mas ele também pode ser o pai dos filmes, que não funciona porque precisa ser vertical. De qualquer forma, vertical deve ser o fluxo de trabalho padrão. Então, vamos dizer, Oh, parece que é isso que eu quero. Veja, meio que substituiu meu alinhamento direito. Eu tenho que entrar aqui individualmente e dizer, você é o filho do flexbox e você pode fazer suas próprias regras. Mas estou feliz onde estava. Primeiro de tudo, somos muito importantes. Está em itálico, o que significa que é uma palavra falada. Mas eu sinto que se tem que ser como uma fonte serifada para servir espelho com um bom, tudo bem, onde vou adicionar meu preenchimento para fazer? Eu só quero fazer todos os espaçamentos. É aqui que eu vou apertar minha seta para cima para pegar o pai. Vou olhar minhas pernas. Ei, talvez eu possa fazer tudo aqui com as linhas. Desculpe-me. Não. Definitivamente, não posso fazer isso porque existem dois separados. Então, eu só vou dizer que você pode fazer qualquer imagem tenha um pouco de fundo nela, ou os textos de depoimento podem ter um pouco de presunto por cima. Então você faz, eu estou fazendo isso neste porque eu só acho que se houver momentos em que talvez não haja uma imagem e eles não precisem, não haveria necessidade de algum preenchimento acima dela ou margem. Então você está espaçando. A próxima coisa que eu quero fazer é você ver que eles não estão alinhados na parte inferior. Ok? Para fazer isso, o tamanho real das palavras é muito próximo, como se elas estivessem quase na mesma linha. Esse quebra? Sim, este se divide em outra linha. Então, o que vamos fazer é, eu quero que todos os nomes estejam na mesma linha. Como eu faço isso? Você se lembra que já fez isso algumas vezes? Você se lembra? Bom, sim. Vou pegar você. Eu não preciso fazer isso com um deles. Pode ser qualquer um desses. E eu vou dizer, você se lembra? Nós apenas dizemos que você tem uma margem de erro. Lembre-se de que o fluxo já está aplicado na embalagem principal e, em seguida, na criança, basta dizer que fique automático na parte superior e nós o empurraremos para baixo. Bom. Tudo bem, é isso. Mudando sua lista de coleções para uma grade. Você só precisa desligar as colunas nas configurações, que é estranho, mas tudo o que fizemos está melhor. Tudo bem, é isso. Nos vemos no próximo vídeo. 91. Projeto de curso 07 - Coleção de cozinha: Olá a todos. Deve ser a hora do Class Project. Esse é fácil. É um pequeno projeto autônomo compacto e agradável. Então, nesse caso, crie uma nova página ou um novo site inteiro para você. Não será usado mais adiante no curso. Então, isso é como um pequeno projeto independente. E então eu lhe dei alguns dados para esta coleção de cozinha. Processo semelhante aos depoimentos. Ok, estou apenas lhe dando novos dados para usar para que você possa fazer o seu próprio . Então, há um CSV. Está nos arquivos de exercícios do blog. Mesmo que não tenhamos feito um blog, é a seção do blog em minhas anotações, de qualquer maneira. Ok. E há uma aqui chamada Coleção Kitchen. Portanto, há um CSV que tem o nome do designer, sua localização e seu site. E há uma imagem correspondente, estúdio de design C jj. Há uma imagem aqui que também a acompanha. Assim, você poderá importar os dados CSV e adicionar a imagem manualmente. Quero que a imagem faça parte do banco de dados, não apenas adicionando-a separadamente como uma imagem, embora eu não consiga distingui-la. Então, vamos dar uma pequena olhada nisso. Então, Edite e estilize a coleção. Ótimo. É aí que os arquivos estão em todos os dados, em todas as imagens da lista. E essa aqui eu queria ver se dá para fazer a URL, que é essa coisa aqui, o perfil. Você pode transformar isso em um botão em vez de um link de texto? Eu não te mostrei como fazer isso, veja se você pode fazer isso acontecer. Há algumas maneiras de pensar em duas se você ficar realmente preso, os comentários, fazer uma pergunta, responder a uma pergunta. Alguma outra coisa? Não. Depois de terminar, faça uma captura de tela. Agora, eu te dei imagens se você quiser usar os dados CSV com os nomes e outras coisas, e depois procurar outras imagens de cozinhas só para que a sua pareça um pouco diferente. Você tem cozinhas com melhor sabor. Talvez seja eu, eu duvido muito. Mas pelo menos se você escolhesse suas próprias imagens, tudo pareceria muito diferente, em vez de todos serem iguais. Depois de fazer isso, faça uma captura de tela enviada para as tarefas e também compartilhe-a comigo nas redes sociais. Eu quero ver o que você faz. Compartilhe com outras pessoas se você tiver algum problema e como o resolveu, compartilhar é cuidar. Tudo bem, vá fazer seu projeto e, quando terminar, vemos no próximo vídeo. 92. Como permitir que seu cliente atualize o site no editor Webflow: Olá, Neste vídeo, vamos dar uma olhada no editor. Já falei muito sobre o editor, mas não fizemos isso. Trabalhamos no designer há muito tempo. O editor é a capacidade de atrair seu cliente ou cliente, seu funcionário, sua mãe ou seu pai que criou um site para. Isso permite que eles façam alterações. Eles podem acessar o site, o site ao vivo aqui, você pode ver que eu posso realmente acessar e fazer uma mudança. Eu posso escolher uma nova imagem, ok. Eles podem publicar. O site será atualizado. Eles podem verificar os formulários que podem ter sido preenchidos no site. Tudo sem ter que voltar para você. Eles podem fazer alterações e publicar no site. Eles também podem começar a adicionar coisas ao nosso CMS, adicionar um novo depoimento. Não tem problema. Olha, temos depoimentos aqui embaixo. Adicione um novo depoimento todo do site sem precisar voltar para você ou através do Webflow, pode fazer tudo isso no navegador. Super chique, eu adoro isso. É provavelmente um dos meus recursos favoritos do Webflow. Não precisamos fazer nada, basta começar a usá-lo. Tudo bem, vamos fazer isso. Vamos começar a usá-lo. O primeiro que faremos é apenas um site estático. Queremos que o cliente possa entrar e alterar os ticks, fazer alterações no botão, trocar as imagens. Apenas coisas que não precisavam voltar para nós sem nenhum CMS envolvido. As regras são que ele precisa ser publicado em seu domínio de teste ou eu vou usar o principal. Ok, e então você pode ir aqui e dizer, ou é um projeto compartilhado? Analisamos a tesoura apenas mais cedo, para compartilhar com outros designers. Este aqui é o que você precisa para dar às pessoas acesso ao site sem ir até você ou acessar o Webflow. Porém, uma coisa a observar sobre isso é que você precisa de um plano mínimo no momento. Isso é o mesmo S1? Ok, então você tem três editores convidados com este, você pode dar uma olhada e ver as diferenças. Ok, então eu já atualizei o meu, acho que não consigo lembrar o que vamos descobrir. Se eu clicar nele, ele saltará para os membros, ok, e vou adicionar um editor convidado. Você pode ir direto para as configurações do seu projeto e entrar em contato com os membros. Ok, vou até a editora convidada. O refrigerante ganha editor, nome estranho. Gosto de chamá-lo de editor do cliente, editor do cliente, editor do membro da equipe, recebo suposições, coloco um endereço de e-mail, decido se eles podem editar, editar e publicar. O que pode acontecer é permitir que as pessoas editem e o obtenham já e sejam rascunhos. E então outra pessoa precisa ser a editora, criar conteúdo, mas não conseguir publicá-lo. Então você pode fazer as duas coisas, por favor. Obrigada Tudo bem, vou digitar um endereço de e-mail e clicar em Enviar. Eles receberão um e-mail e começaremos a abrir o e-mail, ok, eles podem clicar no link que você por e-mail ou, depois de um tempo saberão que você pode simplesmente digitar o ponto de interrogação e digite edit em qualquer site do Webflow. E com isso, e se você souber o nome de usuário e a senha na parte inferior aqui, coloque-os e você pode começar a editar o site, e eu coloco o meu. Tudo bem, depois de fazer login, você obtém essa pequena barra na parte inferior. E é legal. Você pode pular para diferentes páginas do seu site e editá-las. Eles podem decidir, tudo bem, eles precisam passar e dizer, bem, não é perguntar a Dan e almofada, temos mais de um membro da equipe. Somos nós. Uma pergunta agora. Ok, e aqui, eu posso clicar em Publicar, ok? Porque eu tive a capacidade de editar e publicar e ver o que acontece. Tudo bem, então esse é o site ao vivo atualizado e podemos voltar ao site ativo, mas isso meio que elimina nossas habilidades de edição. E isso mudou para sempre nesse site , também no Webflow. isso, se eu entrar como designer, não preciso gostar de aceitar ou ter uma versão diferente de ir para a página Fale Conosco. Você pode ver que é incrível. Eles foram atualizados no site, então você pode atualizá-lo aqui. É por isso que você pode ter que ter isso. Eles podem editar, mas talvez não publicar, apenas no caso de alugarem o lugar agora para tornar as coisas editáveis, ok, bem, talvez não editado diga como parar de mudar o botão Enviar. Se você selecioná-lo aqui e na opção Configurações na parte inferior, há uma opção que diz que o botão não pode ser alterado pelo botão Concluído, mudamos vidas para clicar neste texto aqui. Vamos até Configurações e Configurações . Os colaboradores podem editar esse elemento. Não sei por que os botões não são. Aí está você. Vamos até a página inicial. Você pode editar imagens, veja isso. Você pode decidir se eles querem ou não. Vamos dar uma olhada no que acontece com as imagens em seus sites e formulários e algumas outras coisas. Então, vou voltar para o editor. Você pode fazer isso sozinho como se eu estivesse fingindo ser o cliente lá. Você pode realmente fingir ser o cliente e simplesmente ir ao editor deste projeto. Ok, então esse é o designer em que atuamos durante todo o curso. Agora, este é o editor, e eu não preciso fazer login porque já estou logado. Então eu posso ir aqui, clicar na imagem e escolher uma diferente. Tudo bem, vamos clicar em Abrir. Vai fazer o upload. Você precisa fazer é se lembrar de publicar. É muito bom. Eu chego lá para fotografar. A outra coisa a observar é feita aqui como formulários. Temos um formulário e o site K, e o cliente pode acessar e conferir esses formulários agora aqui, exportar para CSV. Ok, se os dados não aparecem aqui ou se há coisas que você simplesmente não quer saber. Você pode dizer que desative talvez o e-mail e apenas me mostre porque você pode estar reunindo muitas informações diferentes. Mas isso significa que o cliente meio que olha para si mesmo nesta página. Vamos dar uma olhada na atualização do CMS como antes. Certifique-se de que ele seja publicado. Você pode ir e convidá-los, entrou, mas convide um editor convidado no endereço de e-mail. E então, tudo bem, agora estamos dentro e acabamos de ficar um pouco mal. E na parte inferior, a diferente é que temos coleções e coleções de códigos de depoimentos. Você pode ter muitas coleções diferentes aqui, postagens de blog, depoimentos, membros da equipe. E você pode clicar ou clicar nesta pequena guia aqui. Você pode ver o mesmo tipo de lista, mas é branca. E você pode dizer que posso adicionar um depoimento que preencherá isso. Tudo bem, adicione uma imagem. Ok, War, quais são esses saborosos? algum tempo que não usamos o kiwi . E o depoimento de dados seis ao contrário para mim. Então é o mês, esse é o dia em que faríamos o ano. Link do Instagram. Tudo bem, e o software que estamos usando é o Adobe XD. Digamos que vamos clicar em criar ou salvar como rascunho. Ok. Está encenado para publicação. Publique-o. Sim, por favor. Vamos ver o site aqui em cima. Bem, está pensando nisso, minha publicação. Bem, funciona porque ainda está publicando, mas aí está. Funcionou. Ok. Pode não parecer, dependendo das regras que você tem para sua lista no momento, eu tenho a mais nova primeiro, tenho certeza, mas é um salva-vidas poder dar ao cliente que você a configurou. Você não precisa fazer com que eles entrem na página e a alterem toda vez, apenas fazer com que eles adicionem mais, certifique-se de que eles sintam que todos os campos podem aparecer nesta página. Ele pode estar aparecendo em 20.000 outras páginas porque você conectou todas elas. Você tem essa lista em muitos lugares diferentes. Muito útil, tudo bem, isso permite que seu cliente acesse e atualize o site. Eles podem usar o link que você envia o tempo todo. Mas lembre-se primeiro de um ponto de interrogação e depois digite editar. Vamos colocar isso na parte inferior, onde eles podem inserir os detalhes e começar a editar. E eu estarei empurrando você. Tudo bem, nos vemos no próximo vídeo. 93. Como criar blog usando páginas de coleções CMS no Webflow: Olá a todos. Vamos pegar nossa coleção perfeita, como fizemos anteriormente, mas, nesse caso, transformá-la, nesse caso, em postagens de blog em páginas feias. Ainda não os estilizamos. Faremos isso daqui a pouco. Mas olha, na verdade eu não fiz todas essas páginas. Eles foram gerados para mim com um fluxo baseado nessa lista. Mas o tendão, duas páginas, páginas feias e sem estilo. É nessa época do curso em que eu e provavelmente vocês começarão a se sentir como web designers fortes e confiantes, onde estamos produzindo muitas coisas com pouco esforço. Vamos começar e mostrarei como, se você estiver acompanhando, eu chutei meus depoimentos que fizemos no último, percebo que escrevi errado. Esse é o meu testemunho. Unhas. Isso está em sua própria página, então estou volta à página inicial fresco e pronto para ir entre elas que não existem. Eles não tinham o coração. Exclua-os. Então, como você cria a página? O começo começa do mesmo jeito: criar uma coleção. Então, vamos criar um novo. Temos nossos depoimentos, todos um. Vamos escrever um post no blog. Agora, existem modelos. Veja isso, vou clicar em alguns deles, na verdade, no post do blog e ele acabou pré-preenchido e as coisas na parte inferior aqui, você pode ver o amigo da postagem, o resumo da postagem, a imagem, a imagem em miniatura, apenas coisas úteis para começar e dar algumas ideias sobre você também pode usar as coleções. Então, membros da equipe, eles biografam o cargo. Você pode ver, vamos começar com postagens no blog. Todo mundo faz isso. Você vê aqui embaixo, mais alguma coisa que queira acrescentar? Tudo bem. Ok, para este, vamos criar a coleção. Então o que acontece? Não temos dados. Ok, então, em vez de dar alguns, vou mostrar que você pode acessar e adicionar dados de amostra. É só lixo que o Webflow, Ed, também é meio viciado. Destinado a postagens de blog. Porque se você fizer uma receita, ela terá exatamente os mesmos nomes. Terá uma receita da história histórica do web design. E não vai ter nenhum conteúdo nisso. Então, vai funcionar para essa postagem de blog, porque elas são como títulos de postagens de blog. Vamos dar uma olhada. Eles preencheram para nós o nome de lesma, que faz mais sentido agora pouco antes desses depoimentos não aparecerem em sua própria página, então não importava realmente o que era a lesma. Agora, porém, você pode ver meu site abaixo da barra do nome da postagem, que deve ser uma boa palavra-chave. Ok, isso é algo com o qual alguém pode se conectar. É colocado em um corpo de texto básico. É chamado de Rich Text, essas coisas. E é editar uma imagem, tanto a imagem principal quanto uma imagem em miniatura. E veremos essa opção em destaque. Há uma cor associada a esse item da lista, o que é meio legal. Tudo bem, então esses são os itens da minha lista. O que acontece agora? Eu vou dizer, Bem, isso não mudou isso hoje. De qualquer forma. É fechá-lo. Você fica tipo, Uau, como faço para criar todas as páginas antes de começarmos e simplesmente arrasto o item da lista. Mas isso não é tudo que vamos fazer em qualquer página com essas coisas. Ok, o que acontece é o tipo de já feito, o que é legal aqui em cima, sem páginas. Então, páginas estáticas fazem mais sentido agora, certo? E essas são páginas para suas páginas dinâmicas, você verá Miss Collection Pages. E aí está. Aqui está o meu modelo de post no blog. Se entrarmos aqui, teremos uma página em branco. Ei, esse é o modelo que todos esses itens da lista, todos os homens conhecem. Quantos pedimos 510. De qualquer forma, temos muitas postagens de blog diferentes. Tudo o que precisamos fazer é estilizar um deles. Então, vamos fazer algumas coisas básicas. Então, eu estou no modelo, ok, certifique-se de que você está no modelo. Eu vou para o meu, vou usar um método um pouco diferente. Vou usar o Control E para PC ou o Command E em um Mac. E eu vou dizer, eu quero um contêiner Command T novamente. E eu vou dizer, eu quero bater. Então eu quero o Comando ou Controle E. Eu quero uma imagem. Comande e controle E, e eu quero um texto. Eu quero, eu quero um bloco de texto que tenha a data em que este blog foi criado. Então, outro vai ser tiques. Agora você tem uma área de texto, que você pode pensar: Oh, você pode usá-la aqui porque é como nos formulários, mas é uma área grande e agradável. Eu te dei um acréscimo. Diz que não, isso é apenas execução, encontre outra coisa. Você pode fazer. Texto. Vamos dar uma olhada em texto rico. Veremos as cenas ricas de um vídeo que será lançado em breve de forma adequada. Mas, basicamente, ele permite que você tenha um livro didático e dentro dele tenha títulos e todo tipo de coisa acontecendo. Ko, é isso. Terminamos? Não. Esses são apenas espaços reservados. Você pode ver que diz bater com minha batida. Era minha imagem. Então, o que você precisa fazer, assim como fizemos anteriormente com a lista, nós os vinculamos ao banco de dados. Nós dizemos você, não precisamos colocá-los dentro de um rapper como antes. Você acabou de dizer que se conecta a qual? Conecte-se à postagem do blog, por favor. Ela sabe porque, como estamos no modelo de postagem do blog, o representante já está lá. Ok, e o que faz isso usar o nome do blog. Conectei tudo. Ok, e agora basicamente conectará tudo isso. Mas o que aconteceu agora é que, na verdade todas as suas páginas foram criadas, na verdade, apenas cinco ou seis. Vou para a outra página, acorde, cinco blocos de web design. Olha isso. A página está pronta. Não está muito bem estilizado. Mas é isso. Você criou todas essas páginas com links para elas em um segundo a partir da página inicial, mas todas as páginas estão criadas. Vamos analisar e conectar algumas coisas. Vamos até você e conecte as postagens do blog. E eu quero que você tire isso da minha imagem principal. Você vai, tudo bem, este, ele na verdade, eu quero isso abaixo disso, este aqui. Ok, essa caixa de texto na verdade será do, não fizemos essa data de criação ou publicação. Mas eles estão lá automaticamente porque ele sabe em que dia você os publicou. Eu posso clicar nisso. O meu ainda não foi publicado porque eu não o publiquei. Então, ele realmente não sabe ainda. O meu acabou sendo o que acabou. Isso foi estranho. Está tudo bem. Isso ocupa bolsos aqui por algum motivo. Quando soube por que não publicar em, basta fazer um artigo do CreateDon aqui embaixo. Ele apareceria aqui para ser publicado nele se tivesse sido publicado. Então, o momento está ficando em branco porque não foi publicado, o que é um pouco estranho. Nós podemos viver com isso. Agora, o texto rico, que você quer pegar, o pai Rapa, não as coisas intermediárias não são as coisas aqui, o bloco de texto rico. E eu quero anexar isso ao corpo do poste, que é apenas Loren ipsum no momento. E é isso. Temos todas as nossas páginas. Vocês têm todas imagens diferentes, cabeçalhos diferentes, tudo na mesma data porque todas são enviadas ao mesmo tempo. Aí está você. É bom quando você está trabalhando em qualquer página em que deseja trabalhar, basta decidir em qualquer página e começar a trabalhar em seus estilos. Mas você provavelmente quer apenas examiná-los ou ver o que acontece com um título muito longo versus um título curto, uma imagem grande, uma imagem curta. E em um Mac, mantenha pressionada a tecla Shift e tecla Option e use as setas esquerda e direita. imagens demoram um pouco para serem atualizadas. Em um Mac, é Shift e Alt e use as setas esquerda e direita. Basta entrar e dizer, sim, isso se encaixa. Essa aqui se divide em duas linhas. Eu vou ter que lidar com isso. Você vai e estiliza, estiliza com ele. Tudo bem, então isso está tornando as páginas muito boas, muito rápidas e fáceis. Claro que você pode. Isso é algo que o editor pode fazer como fizemos anteriormente. Eles podem entrar, poderão encontrar a lista ou a coleção, desculpe, e acessar e adicionar seus próprios itens da lista. Cliquei na engrenagem, cliquei na engrenagem, cliquei na coisa real. Poderemos adicionar novas postagens no blog ou você pode, do fluxo de vento até você. Vamos estilizá-lo um pouco. Vamos fazer a próxima parte, onde vamos criar um link para ela na página inicial. Isso foi um pouco complicado para eu entender, então vou colocá-lo em outro vídeo para você. 94. Como vincular a uma página de coleção na página inicial no Webflow: Ei, neste vídeo, temos páginas de postagens no blog. Como podemos criar links para eles a partir de outras páginas? Avalie se tínhamos uma página inicial e queremos saber se ela se conecta a eles? Lá vamos nós. Criamos uma lista de coleções e, em seguida, podemos clicar nessas coisas. Criamos uma lista de coleções para nossos depoimentos, mas ela não tinha links para nenhum lugar. Acabamos de exibir informações. Você pode fazer exatamente a mesma coisa, mas, na verdade, vincular ao item da lista conforme exibido aqui, como nós em sua própria página. Deixa eu te mostrar como. Tudo bem, então temos nossas páginas. Como nos conectamos a eles? Vamos lá, faremos isso em nossa página inicial. Eu sempre vou lá. Você pode ir lá. Não importa. Página inicial. E vamos apenas adicionar uma lista de coleções, como fizemos antes. Meio que dividiu porque às vezes você só quer uma lista de coleções sozinha, como seus depoimentos, e não precisa de páginas, e é um pouco mais fácil de entender do que fazendo os dois ao mesmo tempo. Mas sabemos o que esse cara é. Conhecemos você dentro do meu contêiner, meus itens de coleção. Vou conectá-los à coleção. Então, as postagens do blog, e você pode ver, lembre-se de que são apenas espaços reservados temporários. Você pode dizer, o que eu quero aqui? Bem, no momento, estou feliz que eles se estendam porque vou adicionar um botão. Vou clicar em Comando ou Controle E. Vou digitar o botão. Para onde esse botão vai? Agora, esse roxo aparece assim para vincular a sites estáticos. Nada vinculado à página de coleção roxa. Qual em particular? Você realmente não escolhe de uma lista. Você acabou de dizer que, como estamos atualizando tudo isso, observe o que acontece. Blog atual. Nós temos todas essas páginas em um segundo atrás, eu tinha o título, então meio que sabíamos o que era. Lembre-se, desfaça, desfaça antes de eu adicionar o botão lá. Então, ele sabe que a caixa sabe o que precisa fazer. E se adicionarmos um botão e refazermos, refazermos, refazermos, tudo bem. O botão pode ir para a postagem do blog para que ele saiba o que era e vá para lá. Fica mais fácil se você disser “pegue o texto do nome da postagem do blog e faça isso corretamente. Aí está você. Isso torna tudo mais claro? Quando clicado, esse botão vai para lá. Tudo bem, também vou adicionar uma pequena imagem, só para facilitar um pouco a página inicial e saber para onde você está indo. Então, o invólucro, você, fizemos isso antes de mim. Vamos buscá-los. Por que não? Vamos adicionar uma imagem a qualquer um deles. Ok, vai ficar acima do meu botão para obtê-lo nas postagens do blog que alimentou minha imagem em miniatura. Excelente. E o que vou fazer é adicionar um pouco de texto. Eu vou dizer livro didático. Vá lá, por favor. OK. E esse vai ter um link para o título, nome. E o botão fará com que o texto diga que são textos de botão. E este vai dizer “veja mais”. Tudo bem, podemos ir e estilizá-lo mais. Ok, mas nós temos todos eles lá e você pensa, uau, esta é a página inicial. Eu não quero mostrar todos eles. Como faço para mostrar apenas alguns deles? Você se lembra de como faço para filtrá-lo? Você entendeu. Você filtra, tem um filtro frio ou classifica k. Vamos fazer a superfície. Então, novamente, escolhendo minha lista de coleções, vou dizer que, na verdade, vamos classificá-las pelo nome, mas os dados foram publicados ou ainda não foram publicados. Então eu vou deixar esse. Esse é provavelmente o melhor, mas nenhum deles foi publicado, então não vai fazer nada. Então, vou dizer a data em que eles foram criados , da mais recente para a mais antiga, e clicar em Salvar. Eu vou dizer, mostre-me os primeiros quatro D go. Essa pode ser uma forma de você ter sua página inicial com as mais recentes. Ei, eu posso visualizá-lo e dizer vá para aquela página lá. Excelente. Preciso de uma nav para voltar para casa. Você sabe como fazer isso. A outra coisa que você pode fazer é dar uma olhada nos destaques, porque eles podem estar tipo, no momento, que são muito vigorosos. Você precisa ter o alfanumérico mais antigo para o mais recente, algo assim. Enquanto eles dizem, eu só quero escolher quatro deles. Eu quero escolhê-los. Você não pode escolher o pedido. É por isso que o pequeno interruptor é muito útil. Então, vamos dar uma olhada em nossa coleção de listas. Vamos dar uma olhada nas listas de postagens do nosso blog. E vamos dar uma olhada. Havia uma opção na parte inferior desse ditado apresentado, você pensa, de onde veio isso? K para adicionar um você mesmo, vamos editar os depoimentos. Este é um projeto do início do curso, e você não faz isso na lista, você faz isso na coleção. Digamos, eu quero atualizar essa coleção, ok, para incluir um campo chamado switch. O rótulo do switch será, você pode adicionar um switch para, sei lá, o Photoshop. Você pode ativá-lo e dizer mostrar apenas aqueles que têm a opção para o Photoshop ativada, novos ou em destaque. O que quer que você queira usar ou ache útil para isso, para ativá-los, você pode ter descontado, não sei por que o usa. Os recursos funcionam muito bem neste. Ok, agora eu tenho esse pequeno switch em destaque. E, na verdade, você salva suas alterações. Então, coleção. Agora você terminou no mesmo lugar com as postagens do blog, você pode dizer que está na parte inferior aqui. Eu tenho o quê, cinco deles. Vou transformar apenas a história da treonina. Vou apenas devido à história e aos cinco blogs de web design em. Então, vou acelerar isso e apenas dez desses. Ok, então eu só tenho história e cinco web design ativados. Vou fechar isso e eles vão minha página inicial e eu vou fazer um filtro aqui. Então, aqui está minha lista de coleções. Eu vou dizer que gostaria de resolver isso. Na verdade, eu não quero resolver isso. Eu quero exibir o filtro. Ok, vou clicar em Filtrar. O que Bi é meu pequeno switch com recursos, e eu só queria ativar os interruptores. Se não estiver ativado, você não pode estar na página inicial e ir até lá e dizer o nome dela , que deveria dizer página inicial. Eu não tenho recursos que funcionam. Legal. Ok, temos que estilizá-lo mais, mas essa é a maneira de conectar algo como a página inicial a todas as postagens do seu blog do CMS em seu item de lista, você pode ter as diferentes categorias, Ok, como um menu suspenso, pode ser saúde e beleza, sua educação ou quaisquer categorias que você tenha para o seu site. E nesta página, seja qual for a página em que você estiver, diga que é a página de saúde e beleza. Você pode dizer que os filtros estão ativados apenas para os que estão, você pode adicionar mais de um que está em destaque. Além disso, eu não tenho essa opção aqui, mas estou pronta para saúde e beleza. Apresentado em saúde e beleza, e depois classifique pelo que for mais novo e superpoderoso. Tudo bem, digamos que você queira fazer isso manualmente. Vamos fazer isso em outro vídeo separado. Em seguida, te vejo lá. 95. Como vincular manualmente a uma página de coleção no Webflow: Olá. Neste vídeo, vamos fazer com que um botão vá para onde quisermos. Então, ele vai pular para uma página de coleção porque salvamos para lá. É um pouco complicado, mas às vezes você só precisa um botão quando precisar. Criar listas de coleções é incrível. Eles são todos super legais dinamicamente, mas às vezes o botão do homem das cavernas desaparece. Quero mostrar como conectá-los manualmente. Vamos entrar pela página inicial. Eu tenho essa lista que vamos ignorar. Essa lista de coleções faria isso a partir de um simples botão em uma lista. Ok, vamos apenas dizer que aqui está um botão. Como podemos tirá-lo da lista? Vou pegar a lista e simplesmente desligá-la. Então, vamos encerrar a exibição de nenhum. E esse botão aqui, eu posso entrar meu contêiner no topo, Various. Isso não existe, finja que não existe. Então, botão, como podemos conectá-lo? Mas eu realmente quero ir aqui e as páginas e depois me conectar à página. Não é assim que isso funciona. Eu queria que fosse. E se você souber como não criar uma lista de coleções primeiro, o que é bom, às vezes você só quer curtir um link para ela, basta criar um link para essa página. O que você pode fazer é simplesmente usar a forma hacky de URL de fazer isso. Vou te mostrar o que quero dizer. Vamos entrar na lista. Descubra as postagens do blog. Entre nisso, digamos que eu tenha um link para a história do web design. Essa lesma aqui, ok, nome terrível. O URL para isso é esse. Está no site. Então, o site de Dan design.com slash blog slash, a história do web design, o seu pode dizer posts aqui. Mudei o meu para blog em algum momento , enquanto você não estava assistindo. Mas esse pedaço aqui, ok, eu posso pegar tudo isso , incluindo aquele erro de barra, copiá-lo. Ok, eu não quero isso porque isso vai mudar. Então eu posso voltar daqui. Ok, volte para minha página inicial e diga o link para lá. Não entrou. Tudo bem, isso não funcionou e fosforilato. Clique em Copiar e saia. Agora vou colar e deletar isso. Isso é codificar demais, mas se você deixar a barra e deixar todo o resto lá, funcionará. Ok, ele só funcionará com o site publicado, não na versão prévia. Então é isso, perfeito. Ok, e vou publicar meu site. Lembre-se de que a publicação leva muito mais tempo quando há um banco de dados com o qual lidar. Ok, vamos dar uma olhada no site. E agora eu tenho um botão solitário. E quando ele clica, vai para, vai para qualquer site e é isso mais todo esse lixo. Ok, e vai direto para lá. Qual poderia ser o grande problema aqui? Isso mesmo. Se mudarmos o nome disso, ok? Ou isso, você pode ter que passar por isso e alterá-lo. Isso vai causar problemas. Você precisa se atualizar, configurar tudo o que é chamado de redirecionamento. Deixe-me dar uma, por exemplo, eu posso entrar aqui agora e ir para a coleção e ir para postagens de blog. E de sete maneiras é que queremos clicar para pensar assim. Sim, eu quero mudar isso de post para blog ou blog para post. OK. Eu faço isso na engrenagem real da coleção CMS aqui. E eu digo, na verdade, não quero que isso seja outra coisa. Eu queria voltar ao posto. E o que você verá aqui, diz: Ei, você precisa configurar redirecionamentos, clicar nisso, seguir a coisa. Está meio fora do escopo deste curso. Ou simplesmente salve-o e certifique-se de que, ao voltar à sua página inicial, clique no botão pequeno, agora você chamado de postagem que eu salvo isso. Essa é a única coisa com que se deve ter cuidado. Codificar é um pouco complicado. Então, a única maneira pela qual consigo pensar me conectar manualmente a uma página, às vezes você quer fazer isso. Caso contrário, crie uma lista, talvez tenha um botão que a ative para dizer destaque ou para dizer alguma forma de ativá-la para que você possa configurar filtros e mostrar apenas um botão específico, botão mais hacky dizendo que na maioria das vezes queremos uma lista, vamos ligar a tela novamente assim. Então, funciona muito bem. Estou ficando velho, é difícil. No final deste curso, vou querer um botão de homem das cavernas para ir aonde eu quiser. Não me dê essas coisas sofisticadas, incríveis e incríveis que me poupam muito tempo. Me dê o que vai quebrar o tempo todo com URLs completos, com URLs codificados. De qualquer forma, é isso mesmo, vinculando manualmente a uma página de coleção? Deixe-me saber se você conhece uma maneira melhor de fazer isso. Provavelmente existe um e eu ainda não sei. 96. Como meu cliente adiciona um post no blog na coleção CMS no Webflow: Olá a todos. Neste vídeo, mostrarei como seu cliente adiciona uma página ao seu site. Nesse caso, é uma postagem de blog. Basicamente, vá até o editor, clique neste botão. Sim, não há muito mais do que isso, mas ei, há outras coisas que eu quero te mostrar. Bem, na verdade, vou te mostrar todas as etapas, caso você se perca um pouco de outra forma, só isso. Assim como o depoimento que fizemos anteriormente, exceto que é uma página inteira. Magnífico. Tudo bem, a primeira coisa é que tudo precisa ser publicado. Portanto, certifique-se de que seja publicado. Você precisa ter certeza de que o compartilhou com eles, ok, convide editores convidados. Eles podem clicar aqui, clicar no link que receberam de você ou lembrar, eles podem fazer um ponto de interrogação nele e entrar lá. Tudo bem, para que eles possam entrar e editar as páginas que existem. Eles podem dizer que, na verdade, isso precisa ser mudado. Ok, isso é sobre design gráfico. Clique em publicar alterações. Vai editar o registro. Mas agora o que eu quero fazer é adicionar minha própria postagem no blog. Eu sou o cliente. Eu gostaria de adicionar minha própria postagem no blog, por favor. Eu vou até as postagens do blog ou você pode seguir o caminho mais longo, coleções, postagens do blog. Ou você pode usar essa pequena guia lá e olha, há uma opção aqui. Diz adicionar novo, o que quer que tenhamos chamado. Agora diz adicionar uma nova postagem no blog. O mesmo com o depoimento. Testemunho, fácil, por favor. Temos que preencher os campos e um segundo. Tudo bem, o bom e velho ipsum.com. Alguém usa esse? Ok, apenas um texto de espaço reservado e encenado pronto, configurado, publicado, ok , e como antes, como qualquer depoimento, ele vai aparecer, mas agora na verdade vai ser uma página depois da imagem cargas. Na verdade, eu não coloquei uma miniatura e opa. Ok, mas nunca envelhece. Eles criaram uma postagem no blog ou é uma nova página de produto e você nos oferece uma nova receita, seja ela qual for a adição ao seu site. Temos que ir até lá. E de volta aqui, no meu designer, vou ver que o cliente entrou porque meu blog publicou seis itens. É nove. Sim, eu sei que é. Olá, bom ensino, wavelet. Aí está. Tudo está sendo adicionado. Diversão. Tudo bem, é isso. É assim que seu cliente, Ed, é uma postagem de blog ou qualquer página que você queira adicionar à sua coleção em seu site. 97. Como usar elementos ricos em texto no Webflow: Olá a todos. Rich pega elementos. Nós meio que olhamos para eles. Eles apareceram aqui e ali. O que eles são? Como você adiciona coisas a eles? Oh, olha, você pode adicionar coisas, você pode mudar coisas. Você pode adicionar imagens, vídeos todo tipo de coisas boas a um bloco de texto rico. Você, eu e o cara bonito, todos nós vamos aprender como adicioná-los, ajustá-los, mas não estilizá-los. Vamos estilizá-los no próximo vídeo. Tudo bem, vamos começar a criar algum texto rico, ok, elemento de texto rico. Nós temos um ou o que bloqueia, ok, nós já temos um. Lembre-se de que tínhamos um que era colocado automaticamente nas postagens do nosso blog. Entramos lá e lá está. Acabei de ser jogado dentro. Diferente talvez daquele que adicionamos aqui, onde eles simplesmente colam aqui, se eu simplesmente colar, acaba sendo texto de parágrafo e nada mais. Então, vamos dar uma olhada em fazer um sozinho, apenas na página inicial, não conectado ao banco de dados, mas apenas olhar por si só. Então, uma chave, eu tenho uma espécie de casa para ela aqui. E vou adicionar esse bloco de texto rico aqui. Tudo bem, então temos um bloco de texto rico. Você pode clicar nele como você fez antes e dizer: O que é isso que uma aula é para ela. Mas digamos que eu queira acrescentar coisas a isso porque, no momento, há algumas coisas genéricas lá. Vamos adicionar coisas. Tudo o que você precisa fazer é clicar duas vezes em qualquer elemento ou acima onde você deseja que ele esteja e ele retornará? Ok, e se você começar a digitar, ele assume que você está digitando o texto do parágrafo, mesmo que vinculado a saber apenas como texto do parágrafo, como faço, digamos que eu queira colocar aqui, retornar e eu estou vou dizer que isso é um golpe misto. A opção de bater. O que você faz é destacá-lo e ele fornecerá as opções permitidas na caixa de rich text. Não há muita coisa que você possa fazer, mas basicamente qualquer coisa que você precise para um artigo ou postagem de blog, pedaço de texto, você tem seus títulos, obviamente, reuniões. Ok, você tem, vamos dar uma olhada. Podemos colocá-lo em negrito, podemos colocá-lo em itálico, subscrito, sobrescrito. Uma coisa é que, quando é um sucesso, como faço para voltar a ser um parágrafo? Não há opção de parágrafo curtido. Basta clicar no aquecimento novamente, você pode ver que está atingindo três porque é azul. Ok. Clique nele e ele voltará ao padrão, que é o parágrafo. Seremos importantes quando começarmos a estilizá-lo no próximo vídeo. Ou as coisas interessantes aqui, hiperlinks entre aspas em blocos de hiperlinks, talvez você não. Vou selecionar isso, torná-lo uma citação em bloco. Blockquote é, é clique desligado. É um trecho de texto recuado destinado a ser usado como citação. É por isso que é uma citação em bloco. Blockquote porque foi feito para ser um grande bloco de coisas. É como quando você está citando alguém, você pode simplesmente colocar aspas. Mas quando for ampliado, você usará esse pedaço recuado. Portanto, está fora do fluxo do texto e deve ser interpretado como uma citação que faz referência a outra coisa. E muitas vezes eles usarão essa pequena linha. Então é assim que eles fazem uma citação em bloco. O que mais selecionamos são todos os links de citações em bloco. Isso é tudo. Vamos dar uma olhada em algumas das partes provavelmente mais poderosas. Então, digamos que eu queira adicionar uma imagem, vou pressionar Return. E você pode ter, eu ignorei isso antes. Se você começar a digitar, você só receberá um parágrafo. Mas se você apertar Enter e apenas esperar, olha, o que essa coisa faz? Vou dar uma olhada rápida nisso. Tem algumas coisas legais. Vamos fazer as coisas chatas, na verdade, lista de marcadores, eu preciso de laranja, eu preciso de roxo. Ok, é uma lista de marcadores e volte novamente. Vamos fazer algo mais empolgante. Há uma lista de marcadores numerados. Vamos fazer isso. Uma imagem, imagens, muito legal porque, vamos adicionar a imagem. Ele tem alguns recursos extras. Você pode decidir se ela está centralizada, se é grande como pode ser no momento, se fosse uma imagem maior, ela iria até as bordas, mas não está se espalhando, ela é 100 por cento do tamanho. Alinhamento à esquerda. Isso faz sentido. Esse é muito legal. Vamos adicionar um pouco de texto. Eu vou pegar isso, na verdade vou cultivar um pouco de Loren ipsum você ali mesmo . Todo mundo usa isso? Gerar Loren Ipsum fora do site? É o lado mais chato de um palpite: quem está vendo bobinas de mangueira? **** seus anúncios. Tudo bem, volte aqui. Então, eu tenho alguns carrapatos, vou colá-los embaixo. Coloque seu sintonizador em Rambo, basta colá-lo assim que o texto do parágrafo. O que uma imagem pode fazer é dizer que você, meu amigo, está alinhado à esquerda. Você pode ver o texto girando, alinhado à direita. O texto é encapsulado, o que é muito legal. Imagens que você pode digitar aqui com um tipo de legenda embutida. Ok? As imagens também. Essa é uma pequena chave inglesa aqui. Só a chave, mesmo que você tenha coisas básicas. Você tem texto alternativo. Você o obtém de outros ativos além do painel Ativos ou escreve coisas personalizadas e as preenche lá? Em termos de tamanho, você pode decidir que o tamanho é, na verdade, um DPI alto, que é metade do tamanho, vezes dois. Não sei por que isso é vezes dois, mas você pode usar a largura total se ele tentar ir até a largura total o máximo possível. Personalizado, ok, você pode decidir o tamanho que vai ser. Assim, você pode obter alguns detalhes aqui com sua imagem. E esse link aqui é justamente quando clicado, vá para uma URL. Nesse caso, pode ir para o Unsplash, onde obtive a imagem das imagens. E quais são as coisas legais aqui? Vamos colocar algo aqui. Acho que sou muito fácil ler um vídeo. Basta copiar e colar do seu canal favorito do YouTube. Esse é o meu favorito. E qualquer velho e minha garagem. Qualquer clipe antigo do YouTube que você possa pegar, compartilhar, OK e copiá-lo. Ok, o Vimeo também funciona. E então você simplesmente cola aqui e você terá um vídeo do YouTube com muitas das mesmas características da imagem. Há muitas coisas que você pode fazer aqui. Mas, na maior parte, o mesmo que uma imagem, é divertido. mais alguma coisa aí que eu deva mencionar? Você pode incorporar o código lá. Não vamos entrar em código e feijão agora. É um vídeo da minha lista chegando neste aqui, conteúdo meio rico, incorporado e rico. Eu nunca uso isso. Você pode inserir coisas como listas do SoundCloud e do Spotify. E você precisa pesquisar no Google como uma grande lista de conteúdo rico incorporado ao Webflow. Eu não o uso com muita frequência, mas há coisas que você pode colocar lá. Este aqui faremos mais tarde, mas isso é para coisas como sua coisa de calendário Li, coisa de chimpanzé macho. Eles podem entrar lá como um código e um código grande. E embora isso seja bom para nós como designers e designers do Webflow. Ainda é muito útil adicionar conteúdo muito rapidamente em vez arrastar uma imagem e fazer todo esse tipo de coisa. É realmente feito para o editor, seu cliente, seu cliente, sua mãe, que estava atualizando o site porque mostramos antes, se eles entrarem no editor, deixe-me carregá-lo. Mas caso você esqueça, você precisa garantir que o site seja publicado. E você acessa a opção Compartilhar e se certifica de convidá-los como editores convidados. Abrimos o site. E se eles não tiverem recebido o link do e-mail, eles podem simplesmente digitar um ponto de interrogação nele. E eles podem começar a editar o bloco de rich text exatamente da mesma maneira. Talvez você precise dar a eles uma pequena demonstração de como isso funciona. Ok, então eles podem entrar aqui e dizer, na verdade, eu vou passar e selecionar Enter. Ok, eles vão começar a digitar para um parágrafo ou destacá-lo e torná-lo um H2 ou uma citação em bloco, ou retornar e começar a adicionar uma espécie de mídia rica. Ótimo para artigos, ótimo para blogs. Você já nos diria como estilizá-lo? Não aguentamos isso. Haverá outro vídeo. Vamos fazer isso a seguir. Todo mundo quer estilizá-lo primeiro. Tenho que descobrir o que isso faz. Tudo bem? Tudo bem, vamos fazer isso. 98. Como criar texto rico em um CMS para fluxo na Web?: Olá a todos. É hora de estilizar nosso bloco de texto rico de forma diferente do site normal. Esse é um título, que também é um sucesso. Por que eles parecem diferentes? Porque está em um bloco de texto rico e mostrarei como tricotar estilos dentro do mesmo texto de parágrafo, textos de parágrafos. Eles parecem diferentes porque um deles está dentro de um bloco de rich text. Deixe-me mostrar como fazer isso. Tudo bem, para estilizar o bloco de rich text, você pode fazer isso com todo o resto ou fazer isso exclusivamente para o bloco de rich text, dependendo do que você quiser. Se você quiser apenas seguir os estilos do resto do site, não precisa fazer nada. Digamos que esse seja um sucesso. Vou adicionar um comparativo clicando aqui e talvez também adicione o texto do parágrafo. E temos o cara que tem um pedaço no topo aqui. Não está na caixa de texto rico, ok, aí está, lá. Então, o que eu preciso fazer é não importar se eu estilizar este. Bem, esse, ok, se eu clicar nele e eu for até aqui e eu disser que você queria, todos aqueles em todo o site. E todos eles serão uma fonte que nós seremos Oswald. Ok? E digamos que todo o parágrafo de todo o site seja meio cinza claro ou vamos fazer uma cor bem óbvia. OK. Por que isso não funcionou? Porque, na verdade, eu não cliquei nas aulas antigas. Então eu removo a classe. Ok, todos os parágrafos deste site, eu vou ficar azul. Bom. Então, todos eles vêm para o passeio. Agora, se é isso que você quer, é isso que você faz. Se você quiser que isso seja diferente. Ok? Isso é bom para o site, mas para o blog ou o artigo precisa ser diferente. O que você precisa fazer são duas coisas. Você precisa do bloco de rich text, o tipo de pai que existe. Ele precisa de sua própria classe. Não importa como é chamado. Ok, vamos chamar nossos textos ricos, mas você pode chamá-los do que quiser. E o que a mágica acontece quando o fluxo é, digamos, os títulos aqui. Se eu disser, isso te lembra se você esquecer, mas esse é o meu trabalho. Estou te lembrando. Se eu der o phi, digamos todos os H1s, porque pode aparecer algumas vezes, ok, todos os oito, mas essa coisa é nova. Diz nist, o seletor de textos ricos. Essa é a aula que acabamos de fazer. E você diz: “ Sim, vamos fazer isso.” OK. Significa apenas que afetará apenas H 1s. Todos eles não importa quantas vezes você os use. Se eles estiverem dentro da nossa caixa de rich text que tem essa classe. Ok, então eu vou aqui e dizer que, na verdade, eu quero que seja quem também foi, ok, o que é diferente para artigos. É uma forma de separar conteúdo, escolhas de fontes feias, ok, provavelmente quero a fonte Serif. Lá vamos nós. Ok, então vamos dizer o parágrafo e a mesma coisa novamente. Digamos que, nisso, eu queira que fique em itálico e gostaria que não fosse azul porque está me matando. Então, desde que meu pai, ok, da caixa de rich text tenha uma classe aplicada. Agora, caso sejamos textos ricos. Você pode dizer que ouviu todos os parágrafos. Eu gostaria de voltar a ser um lugar negro. Oh, tudo bem. Por que isso funcionou aqui embaixo e não apareceu? Esse é um ponto muito bom. Oh, eu não desfiz isso. Eu clico nisso. Acho que não fui eu. Talvez isso seja o que eu não fiz foi dar uma olhada. Sim. Você me viu? Pode acontecer com você. Vou deixar para o caso de ele garantir que, quando você disser que eu quero que tudo o que o H4 esteja bem, queira ser aninhado em texto rico. Só que o H4 está aqui e veja que tem alguns deles, tem outro H4. Então, vou escolher uma cor bonita, muito óbvia e terrível. Lá vamos nós. Agora, eu disse algumas vezes que ele precisa ter a embalagem do lado de fora. Então, isso não vai nos levar a um problema, mas é algo para lembrar. Porque se eu for para outra página, digamos que eu vá para, eu tenho uma página que já a tem , mas modelo de postagens de blog. OK. Aí está meu rico livro didático. Você pensa, por que é azul? Nós o fizemos preto. Então eles precisam fazer é não. Isso mesmo. Basta adicionar esse texto rico. Texto rico. E isso vai dizer: Oh, veja as fotos de atenção. Isso é, tudo bem, agora eu sou negro e estou bêbado. Ok? Você não é esse. Eu realmente quero clicar aqui. Você deve ter se perguntado: provavelmente, como não posso mudar isso aqui? Ok, você não foi seu editor. Aqui dentro. Você pode mudar para o editor e começar a fazer isso, ou voltar ao CMS e voltar às postagens do blog. E eu não consigo lembrar qual eu estava olhando. Esse é um deles. Não, não esse. Vamos dar uma olhada nesse. É aqui que todas as mudanças podem ser feitas Se você quiser, designer, você costuma trabalhar aqui. O cliente geralmente trabalha no editor. Agora você pode dizer que na verdade, isso deveria ser um H1. Agora vou salvá-lo e procurar a história do web design. Vamos fechá-lo. E deveria ser esse histórico de fontes serifadas. Não é esse. História do nome deles. Saudável. Isso faz sentido? Garante que haja uma classe ao redor do invólucro para o bloco de rich text. Em seguida, certifique-se de clicar na opção de aninhamento que aparece na parte superior. Tudo bem, estou de volta. Eu estava jantando e pensei, sabe o que, eu deveria ter contado a eles. Estou de volta para te dizer o que eu deveria ter te contado. Tem a ver com a cascata ou a especificidade. Então, separamos esses estilos para o bloco de rich text. Esse parágrafo aqui era diferente porque está aninhado dentro do livro de texto rico, diferente deste. Meio que at the Cascades ainda funciona porque isso é um parágrafo, leva para olhar todos os parágrafos. Está definido para Arial, neste fim. E esse aqui, eu não mudei. Ainda são só parágrafos, textos ricos, mas não vi nada além de Arial. Então, ele seguirá esse exemplo, a menos que eu o mude aqui. O que quero dizer, então o texto do parágrafo aqui ou os parágrafos. E como eu não mudei isso aqui, isso deve causar impacto. OK. Porque eu não mudei nada aqui. Vai acabar, mãe, eu não sei o que fazer. Vou usar como padrão o pai k, aquele que está acima do rio, a cachoeira, e usar isso como minha base. Mas se eu for um pouco mais específico aqui, eu entro e digo: Olha, você, o impacto foi a cama. Quem se lembra da coisa? Idb Ady. Você está na identidade deles, dq dy, deve saber isso de como se livrar de cor. Aqui vamos nós. Comic Sans, assuma esse impacto porque isso é mais específico. Está ignorando o que aconteceu aqui em cima. Então você ainda tem que considerar isso. Por exemplo, eu preciso mudar o tamanho da fonte aqui para aquecimento para pressionar uma aqui versus clicar em uma aqui. Eu digo: Não, os dois são iguais. Se eu quisesse ser os dois um pouco maiores, na verdade vou usar esse tipo de pai para que todos fiquem maiores. E eu também estou feliz com isso lá. Então, vou deixar a cascata fria. Então voltei para ensinar você a usar o Impact e o Comic Sans. Você é bem-vindo. 99. Projeto de curso 08 - Blog CMS: Olá, é hora do projeto de aula. Vamos criar um blog perfeito. Nada muito grande ou sofisticado. Algo simples, como ser uma página inicial e criar uma das páginas de modelo, ok? E se trata de aprender esse CMS. Então, eu quero que você crie sua própria coleção e você só precisa de três desses itens em sua coleção. Onde você vai conseguir isso? Quero que você reinterprete um blog existente. Não se importe de onde você tirou isso. Se eu te der o conteúdo, tudo acaba parecendo o mesmo. E se usarmos o material que vem do fluxo de trabalho, tudo parece muito Loren ipsum. Apenas saia. Se você tem um blog que gostaria ou sai e apenas procura blogs. Esses são alguns dos blogs que eu analiso sobre revisão criativa, o fluxo de trabalho que você pode percorrer e usá-lo. A Adobe tem uma incrível. Drible. Eles chamam isso de histórias triplas. E o que você quer fazer são duas partes. Vamos ter uma página inicial como a que fizemos com uma dessas. OK. Eles decidiram fazer sua lista de coleções assim. E quando você clica nele, você entra na página do blog. Então, eu não quero que você escolha três desses sites? Aí está o título que você pode pegar, o breve resumo, a data em que você pode criar e a miniatura da imagem. Então, basta pegar três deles e você não precisará da página inteira. Basta fazer as coisas acima da dobra. E eu não estou procurando todas as coisas que fizemos. Basta ler a imagem, o título. Certifique-se de manter o autor, ok, e depois pegar uma parte disso, não precisa ser tudo. Você pode ver, ei, olha, o que é isso? Sabe como se chama? É um caso de citação em bloco e cabeçalhos diferentes. Isso só traz um pouco disso até você. Você pode tentar descobrir como fazer um drop cap assim. Ok, basta pegar um pouco do texto e depois editar a postagem do seu blog. Então escolha três deles. Vamos dar uma olhada. Redesenhe o blog existente, coleção de blogs na página inicial. Basta tirar uma soneca rápida, não precisa ir a lugar nenhum. Estamos meio que juntando tudo. Estilize o máximo que puder. Se você vai passar meia hora nisso, passe meia hora nisso. Se você vai passar meio dia nessa rodada, meio dia nessa. Está totalmente bem. Não há certo ou errado aqui. Um tem um tempo disponível diferente, tem um navegador, uma seção de heróis e nos cartões de resumo. Ok, essa é a lista de coleções que fizemos algumas vezes na página inicial que era minha página de depoimentos. Esse é o resumo da coleção em que você pode clicar e ler o grande artigo. Ela é melhor. Aqui embaixo está o estilo da sua página inicial um pouco do meu. E eles deveriam criar links para essas páginas. Então, três páginas reais. Apenas deixe claro que é uma reinterpretação da de outra pessoa quando você a publica e não é seu trabalho. E basta incluir um link para o autor e um link para o artigo original. Basta colocá-lo lá dizendo que este é o artigo original, estilizá-lo e torná-lo parte dele. Oh, estou de volta. OK. É no dia seguinte e eu pensei, você sabe, o que eles também deveriam fazer é apenas ativar o índice desativado k. Está nas configurações do seu projeto publicando ECO. Lembre-se desse aqui, aqui, aqui. Ok, só para dizer ao Google, ei, não se preocupe em indexar isso porque é uma duplicata. Esses não são os dróides que você está procurando. OK. Siga em frente para não tentar se classificar para essas coisas porque não são nossas. Execute. Enquanto você estiver lá. Apenas certifique-se de explorar a interface do editor para que, ao lidar com clientes, saiba como é a sensação deles e tente fazer o que eles farão. E isso pode lhe dar a chance de trabalhar como, oh, eu preciso fazer isso no lado do designer para garantir que x aconteça na edição à parte, na verdade, apenas duas páginas e uma página inicial de coleção, uma página de blog modelo que exibe três páginas para você porque é incrível, porque são os resultados do CMS, faça uma captura de tela da sua página inicial e do layout da página do seu blog. Portanto, isso deve ser um total de quatro layouts de página inicial e seus três layouts de página de blog e enviá-los aqui, também compartilhá-los nas redes sociais. interessante ver o que você era e fazer um pouco de antes e depois para fazer uma captura de tela do que tiramos, o que você acabou fazendo com a TI. Os problemas que você encontra ajudam você a entrar em contato com a comunidade, especialmente os grupos aqui para obter conselhos e compartilhar. Todos eles, um deles, nenhum deles. Depende de você se quiser compartilhar nas redes sociais. Tudo bem, esse é o projeto de classe para um blog perfeito. Vá fazer isso. Divirta-se, faça uma perfeita, nos deixe orgulhosos. Nos vemos no próximo vídeo. 100. Código de incorporação HTML de Calendly, Twitter e Castos: Olá a todos. Vamos analisar os códigos de incorporação em HTML. É uma forma de obter funcionalidade, conteúdo e interatividade de outros sites. Vamos ver o Calendly, os casters e o Twitter, aqueles que eu uso. Mas, basicamente, você simplesmente copia e cola o código e acaba com coisas legais no seu site. Você pode ver podcasts, apenas reproduções no site, outra pessoa está hospedando e entregando. Você pode reservar um horário e uma programação para o Calendly e ler todos os meus tweets e depois atualizá-los dinamicamente. E nos serviços fornecidos pelo Twitter, nós apenas copiamos e colamos o código. É uma maneira super fácil de adicionar funcionalidades reais ao seu site que talvez você não tenha criado. Você pegou emprestado de outras pessoas, fazendo você parecer bem. Tudo bem, vamos nos fazer parecer bem, ok, para começar qualquer um deles , começamos com, estou de volta ao meu portfólio porque meu outro site estava ficando bem bagunçado. Então, acabei de fazer uma pequena seção para isso na parte inferior aqui. Vou apertar um botão e a examinar os componentes, esse aqui chamado e licitar. Isso receberá o código. É aqui que o código precisa ir. Vamos encontrar o código. Vou usar apenas algumas das coisas que eu uso agora, isso não é ilimitado, mas como se houvesse milhares de sites que permitem que seus serviços sejam incorporados ao seu site. Eu vou te mostrar como este aqui. Podcasts. Eu uso o ciclo que nos custou. Eles hospedam meus podcasts e não queremos colocá-los, digamos, em um site, não em um podcast. O que eu posso fazer é dizer realmente isso aqui, eu quero criar um link para ele e ver isso. Isso também é um código de incorporação fácil. É isso que você está procurando, esse é o termo site de incorporação de HTML e código de incorporação de lances. Esses são os joelhos deles. Esse é o idioma que você está procurando. E você simplesmente volta aqui e cola e clica em Salvar. E aí está, só uma peça como essa. Ok, eu vou pré-visualizar meu site e você vai, ok, jogar no meu site e códigos grandes são ótimos para adicionar um pouco de dinamismo a você ou talvez sites potencialmente estáticos usando o de outras pessoas serviços, atingindo um pouco de volume em seu site. Não sei se estou dizendo isso , mas são legais. Eles ficam bem no seu site. Ok, então vamos fazer outro. Bem, uma coisa que você notará é que isso ocupou todo o contêiner. Então, digamos que isso contenha que eu o coloquei, provavelmente vou colocá-lo em uma tag div e se eu alterá-lo. Então, vamos chamar essa div que Locke será chamado de podcast div. Vou colocar você lá, ok? E esse podcast div, eu vou encolher. É colocado um pouco de acolchoamento na lateral. Ah, você pode ver que isso muda ou ele sabe que é um código responsivo. Então, ele sabe que quando ficar menor, vai usar esse lado. Assim, você pode controlar o tamanho dessas coisas para algumas delas apenas brincando com o contêiner. Vamos fazer outro. Então, digamos que para esse mesmo podcast, o que eu faço é quando estou entrevistando alguém, eu uso o Calendly, é apenas um aplicativo de agendamento e eu não quero que você se inscreva em todos eles, mas você terá alguns desses em sua vida. E você pode adicioná-los ao seu site porque criar nosso sistema de agendamento dentro do Webflow você mesmo, Uau, ela seria complicado. Na verdade, isso se conecta ao meu Google Agenda, o que é incrível. É muito incrível. Agora. Todos eles estarão em lugares diferentes, esses códigos de incorporação. Então, este aqui, vou clicar em compartilhar e é o site do ED to. Aí está. Em fila na cama. Ok, então basta pesquisar no Google o serviço que você está usando, Mailchimp, Eventbrite, HubSpot. Então, todo macaco, seja o que for que você esteja usando, procure o código de incorporação k. E então, muitas vezes, você pode simplesmente pegá-lo. E esse aqui, olha, basta copiá-lo. Este aqui tem um visual um pouco mais. Você pode mudar as cores dela. Se você acessou a conta gratuita, eu sou barato. Cayenne estava usando o gratuito. Ok, então eu vou copiá-lo, copiar o código e voltar para o Webflow. Vou colocar, vou colocar apenas mais um código de incorporação. Você não os mistura. Ok. Você os tem em outros separados. Pode colocar outro embaixo. Ok. Oh, eu perdi isso. Olha. Digamos que não está no contêiner. Vou colá-lo. Excelente. Salve e feche. Atingir. Agora, grande coisa, olhe, bem, eles queriam que aparecesse. Quando esse aparece, alguns aparecem, outros não. Depende. Esse é o que chamamos de iframe. O código está embrulhado neste iframe, que é como um pequeno navegador que carrega esse aqui, ainda funcionará de perto. Eu só quero trabalhar, mas precisa ser publicado. Você pode até ver isso. Olha, eu preciso ser publicado primeiro. Então, vou dizer publique, aqui está meu portfólio e dê uma olhada na parte inferior. Lá vamos nós. Existe meu aplicativo Sweet onde as pessoas podem reservar horários comigo. Ok, é tudo interativo. Está fazendo coisas. Eles podem realmente reservá-lo. Na verdade, posso reservá-lo porque não tenho horários em julho usando o poder do serviço de outra pessoa, o Calendly, qual você pode estar pagando usando a opção gratuita para k. Uma coisa eu faço Quero te mostrar, porém, alguns deles, não todos. Você teria que apenas este aqui. Você pode ver que tem uma altura. Ok, eu posso ver o código. Então, o que acontece se eu mudar isso? Você pode mudar isso totalmente. Então, seu código no seu site, ok, porque eu posso ver esse lado, eu realmente não consigo. Eu posso mudar as cores aqui porque há algo acontecendo, porque isso é algo que está acontecendo no site do Calendly. Eu provavelmente poderia fazer isso de qualquer maneira. Então, sim, há coisas que você pode fazer aqui e simplesmente mudar. O problema é que, se você mudar isso, precisará salvar, fechar e publicar novamente. Para que isso esteja no site ao vivo, vamos fazer mais um. Vou colocar no feed do Twitter. Eles são todos um pouco diferentes, então esse é meu. Vá me seguir se você não tiver. Ok. Dan adora a Adobe. Vou copiar isso e vou, na verdade, sim. Então, o Twitter faz isso dessa maneira. Eles têm a doce opção publish.twitter.com. Você pode ir aqui e dizer, o que você quer para a cama deles? Eu estou tipo, Oh, eu quero invadir. Você pode incorporar um tweet específico. Digamos que você queira que seja parte de algo que você está referenciando em um artigo. Você pode incorporar apenas um tweet, copiar e colar o URL para ele. Ok, eu vou fazer o perfil, mas você pode criar talvez uma lista ou você pode seguir o nome de alguém que possamos estar seguindo. Não sei qual seria meu portfólio , projetos de design de UX. Vou colar meu nome e fazer assim e incorporar a linha do tempo ou apenas um botão no que você quer dar uma olhada neste. E a menos que você queira fazer qualquer outra coisa, basta copiá-lo. Vou deixar você passar e se divertir personalizando as opções para as coisas que você está fazendo por mim no momento, vou simplesmente jogar. Então, que incrível incorporar ou colar códigos. Você notará que eu tenho uma linha enrolada. Caso contrário, simplesmente , ainda está lá. É só que, você tem que rolar até aqui e está meio que escondido ali. Gosto de decifrá-lo para ver que o que estou fazendo não muda nada, apenas visualiza o código em várias linhas. Então, novamente, é um daqueles que precisam ser publicados. E eu atualizo meu site, role para baixo. Bem, eu provavelmente preciso contê-lo incontido, então ele está se expandindo para sempre. Você pode ver todos os meus últimos tweets. Ok, existem maneiras de fazer isso no Instagram e no Facebook. Eu estava trabalhando com um cliente que funciona como um estúdio de Pilates. Ela usa um pouco de software para ajudar horário agendado e para que os clientes reservem e paguem um código de incorporação. Então, eles tinham apenas um site e você poderia simplesmente colocá-lo no site. Em seguida, as pessoas poderiam fazer pagamentos por meio da pequena parte do código incorporado. Agora, não é só o designer que podemos adicioná-los, ok, além de um bom código de incorporação. Na verdade, você pode fazer isso dentro de uma caixa de texto rico de forma nativa. Ok, lembre-se de que fizemos essa caixa de texto rico para que pudéssemos ter o conteúdo do cliente ou do cliente. Então, vamos dar uma olhada nisso. Este rico livro didático que o cliente pode fazer. Eu vou mudar para o editor para que eles possam entrar lá, eles possam começar a adicionar texto. E quando eu clico em Return, lembra dessa pequena vantagem? Eles se parecem com o código de incorporação. É o código de incorporação que eles podem ler. E eu pego isso de novo, copio, colo, salvo e fecho, publico. Você pode ver aqui que ele não aparecerá enquanto eles estiverem no editor, mas os visitantes do site clicarão em Publicar novamente. Tudo bem, de volta ao site ativo. Oh meu Deus, olha isso. Meu podcast, Sarah Parkinson, que foi entrevistada neste artigo, ficará horrorizada com o design. Ela está cercada por, de qualquer forma, códigos incorporados. Vamos fazer mais uma, na verdade uma antiga, porque eu quero te mostrar uma última coisa sobre estilo. Nós meio que cobrimos isso, mas vamos dar uma olhada. Então, o Calendly oferece algumas opções muito legais quais você pode usar este, texto pop-up, se eu copiá-lo, continuar pegá-lo, copiá-lo e voltar para dentro. Aqui embaixo. Talvez em vez desse botão, na verdade eu o coloque embaixo. Ok, então você pode ver o código embutido embaixo dessa coisa aqui. E eu vou colar isso. E vamos dar uma olhada. Então isso é meio grande e feio. Vamos dar uma olhada no que realmente acontece. Então vá para o site de publicação. Você vê aqui um horário agendado comigo. Vamos clicar aqui. Aparece. Quão legal é isso? Ok, a razão pela qual eu queria te mostrar isso é porque é incrível. Mas também, como faço para estilizá-lo? O que acontece não é em todos os casos, mas esse trecho específico de código incorporado realmente adotará o estilo de qualquer tipo de invólucro principal. Vamos colocar uma tag div em torno dela e estilizá-la. Então, desbloqueie lá. Você pode entrar. O bloco if será chamado de kel e Lee. E eu vou dizer que tudo dentro disso será público sem. Vamos fazer algo óbvio. Precisamos mudar. Podemos mudar muitas coisas sobre isso, mas vamos salvar e publicar e pular para o site finalizado. Lá vamos nós. Ele retirou o estilo da tag div. Apareça novamente. Bom. Tudo bem, então isso é um pouco turbulento para incorporar códigos. Existem tantos por aí, não vamos cobrir todos eles, mas provavelmente há algo que você já está usando. Pode ser um CMS, pode ser um C RM, pode ser algum outro acrônimo que eu não conheço ou serviço que tenha um código de incorporação que você pode adicionar ao seu site. Porque às vezes você pensa: Oh, podemos fazer isso no Webflow? Na verdade, vamos verificar se não há outro serviço que faça isso com muita facilidade e podemos simplesmente copiar e colar o código de incorporação, certo? É isso aí, incorpore o código. 101. Como criar uma loja de comércio eletrônico no Webflow: Olá a todos. Neste vídeo e nos vídeos anteriores, vamos criar um pouco de comércio eletrônico, ok, vamos construir isso. Terá produtos, poderá ter diferentes tipos de produtos. Editamos o estilo do carrinho, o estilo do carrinho e a finalização da compra. É muito empolgante. Vamos começar. Antes de começarmos a fazer algo, o objetivo deste vídeo da série aqui é dar uma visão geral das lojas de comércio eletrônico no Webflow, não vamos entrar em muitos detalhes, forneceremos tudo o que você precisa para fazer algo, mas todos os pequenos detalhes reais. Vai estar fora do escopo deste curso, mas você verá que vai começar a funcionar muito bem. Outra coisa que quero mencionar é que o quão próximo o comércio eletrônico está do que já fizemos, como nosso blog CMS. Essas coleções são feitas anteriormente porque ajudarão a informar o que fazemos no comércio eletrônico. E você poderá ver essa conexão entre os dois, tornando essa parte muito fácil em relação a, eu acho, começando com o comércio eletrônico. Então, primeiro, vamos criar um novo site. Então, seguindo adiante, criando um novo site, não olhe para todos os meus. Há muitos rascunhos e outras coisas. Eu culpo o acabar tendo que fazer muitas coisas só para deixar tudo agradável e tranquilo para vocês enquanto assistem. Não me julgue. Eu vou fazer algo chamado loja T. Ok, faça a mesma coisa e vamos criar um site. Então, a grande vantagem da transformação de um site comum que fizemos anteriormente, seja estático ou dinâmico, é esse botão. Clique sobre isso. E vai dizer que vou fazer duas coisas para você nas coleções. Sabemos o que é uma coleção, portanto, produtos e categorias. Vamos fazer isso. A única coisa é que, quando você está criando um site de comércio eletrônico, você precisa mudar o plano do seu site. Até agora, estávamos lidando com a startup, você seria capaz de fazer praticamente todo esse vídeo com o vídeo inicial. Você simplesmente não poderá realmente receber pagamentos até mudar para um desses planos de comércio eletrônico. Lembre-se de que o Stata é um site estático, estático , dinâmico, grande e dinâmico, e o comércio eletrônico está com essas estatísticas. Ok, vou pegar você. Esta página mudará de estilo. Eles vão explicar isso. Eles mudarão as regras dos diferentes preços. Os preços mudarão. Mas saiba que você precisará mudar para um de comércio eletrônico. Nós temos os detalhes certos. Tudo bem, então vamos dar uma olhada no que aconteceu. Agora, este grande guia de configuração aqui mostra que é realmente muito útil. Eu vou cobrir isso sozinho. Quero dizer, vocês juntos, mas definitivamente passam por isso. E a grande coisa é que, sob vírgulas E, agora há produtos e categorias. Os produtos são meus produtos, vamos adicionar alguns, vou apenas adicionar algumas amostras. Vamos fazer uma apresentação rápida neste vídeo porque acho que é bom ver a coisa toda e depois trabalhar individualmente, em vez de tentar me ajustar. Veja cada vídeo e, no final, diga : Ah, tudo corre bem. Então esse vídeo vai ser um pouco rápido. Tudo bem, vamos detalhar isso mais tarde. Então, temos vários produtos. O que mais eu tenho na guia de páginas. Olha isso. Você tem algumas coisas novas. Um modelo que você gosta, ei, não tínhamos um modelo antes, mas não era chamado de comércio eletrônico. Lembre-se, agora blogue. Aquele cara. Tínhamos páginas de coleção de CMS quando fizemos nosso CMS e tínhamos nosso modelo de blog. Então é o mesmo presunto, mas isso é e-mail, páginas de comércio eletrônico. Ainda há um modelo e, como antes, ok, se você precisar adicionar coisas, esse é o nosso modelo de produto. Por isso, projetamos um para muitos produtos. Só temos cinco no momento. Mas deixe-me adicionar rapidamente um contêiner, adicionar um bloco de texto que use o bloco obterá o nome do nome do nosso produto. Você vai, isso provavelmente deveria ser, estar batendo. Tudo bem? Ok, vamos adicionar uma imagem e a imagem se a conectarmos aos nossos produtos, qualquer campo de imagem. Vamos lá, vai trazer uma imagem gigante, traz o preço, a descrição. Eu disse que ele aumentou o preço porque isso o tornará um produto adequado no topo. Tudo bem, e eu vou pagar o preço. Tudo bem, então estilizamos nossos modelos como antes e nossa coleção, que agora está oculta na guia de comércio eletrônico. E veja esse sucesso, você ainda pode fazer coleções, mas elas estão meio que separadas. Ok. Eles funcionam da mesma maneira. Mas eles estão no comércio eletrônico e aqui e em nossos produtos, podemos continuar adicionando coisas aqui, onde um cliente pode por meio do editor, e continuaremos adicionando-as à loja. Também foram adicionadas algumas outras páginas, uma página de checkout, veja isso. Acabei de terminar. Podemos estilizá-lo ou podemos deixá-lo. Mas isso está pronto para começar. Não é a página de confirmação do pedido. Sim. Muito obrigado. Outras coisas que foram adicionadas. Vamos voltar ao meu modelo de produto uma novidade neste painel de anúncios, Canada Elements. Então, vimos tudo isso, estamos nos acostumando bastante com eles. Era esse comércio eletrônico que não existia antes. Isso acontece quando você aperta esse botão e o transforma em uma loja de comércio eletrônico, você percebe que essas coisas já estavam escondidas antes. Podemos adicionar ao carrinho. Vou adicionar isso lá, em algum lugar acima, abaixo, por favor. Imagem gigante. Você pode ver a aparência deles, tem o preço, eu posso adicioná-lo ao carrinho. Mas o Flow facilita muito a criação de uma loja de comércio eletrônico, mas também oferece todo o controle de onde podemos acessar e adicionar todas as classes a esses botões. Salam, como quisermos com nossas novas e doces habilidades de estilo que aprendemos neste curso, adicionando aulas, aulas globais, aulas de conversão. Então, antes de irmos, haverá algumas coisas que não vamos cobrir. Acesse o guia de configuração aqui. Você pode resolver alguns deles sozinho. exemplo, definitivamente faremos um endereço comercial só porque podemos nos impedir de ir longe demais. exemplo, revisar suas configurações de moeda e que tipo de envio você fará em seu texto para o seu país está fora do escopo deste curso. É diferente para todos. Nós conectamos para facilitar as coisas. As coisas que abordaremos ao adicionar um produto ou design são o cartão de armazenamento farão tudo isso. Analisaremos os e-mails veremos como hospedá-los. Coisas meio legais, tudo bem, isso é muito turbulento. Visão geral dos produtos Ed e, em seguida, duas páginas os conectam a um carrinho e a um gateway de pagamento, ganhe dinheiro, como pode ser? O que vou fazer é, na verdade excluir esses produtos. Ok, então vou selecionar tudo e vou excluir, e vou excluir minhas coisas na página apenas para nos levar de volta à base inicial para que possamos começar de novo por contêiner. Estamos prontos para ir. Vamos examinar agora essas etapas individuais. Individualmente e veja quais podem estar os obstáculos e como Webflow lida com o comércio eletrônico. 102. Como adicionar produtos à sua loja no Webflow: Olá. Neste vídeo, vamos adicionar produtos ao nosso site de comércio eletrônico. Adicionaremos um manualmente. Vamos ver algumas outras configurações lá. Em seguida, importaremos o pulso via CSV apenas para acelerar as coisas Mostrarei como seu cliente também pode adicioná-los por meio do editor. E acabaremos com muitos produtos e nada na página que faremos, veremos como adicioná-los à página no vídeo a seguir. Vamos adicionar alguns produtos. Ok, então vamos adicionar um produto. Vamos ao nosso painel de comércio eletrônico. Ok, temos produtos. Vá até aqui e crie um novo produto. Ok. E você tem o tipo de produto. É um serviço físico, digital ou avançado? Basicamente, as diferenças são que todos começam da mesma forma física. Seu nome Scott, o slug, a descrição do URL, qual categoria ele pode fazer parte, quaisquer imagens associadas a ele e o faturamento, quanto custa. Mas então você tem coisas como distorções e custos de envio, altura, peso, esse tipo de coisa. Ok? Mas enquanto digital, ele se livra de muitas dessas coisas do fundo e diz que é só, há o nome do arquivo e esse é o URL. Então, isso pode ser para algo como, Ei, baixe os planos para isso. Aqui está um e-book e você pode ter seu link para o arquivo, talvez Dropbox ou algo assim. Ok, então aqui também, você pode usar o serviço, que basicamente elimina tudo isso porque você não precisa entregar nada como um produto digital ou enviar um produto físico. Mas você acabará optando por um serviço, ou seja, acabará personalizando a página de agradecimento de forma um pouco diferente para dizer, ei, bem-vindo, e você se inscreveu nossa aula ou atividade física. E nos vemos na terça na aula. Mais a ver com o e-mail de agradecimento de curtidas. Você pode ver isso aqui. Também fornece alguns exemplos, como consultas. Vá. O último é um combo. Faz produto, meio que adiciona todos eles ao fundo. Você pode fazer se tem downloads? Sim. Tem frete? Você pode fazer um pouco das duas coisas. Mas o que vamos fazer fazer o físico. Eu vou mudar o tipo. Agora. Tenho um texto nos arquivos de exercícios. Há um novo chamado arquivos de exercícios. Há uma chamada loja, abra o produto um. Você também pode digitá-lo. Chá verde de jasmim. E eu vou pegar o Loren ipsum para a descrição. Faremos categorias mais tarde. Mas você acha que as categorias podem ser descafeinadas, pode ser uma categoria que as pessoas poderiam pesquisar pelos meus dentes diferentes. Bem, talvez regiões, talvez uma categoria das diferentes regiões de cultivo de chá. Eu não sei muito sobre chá. Eu nem sei se existe um chá verde de jasmim. De qualquer forma, mídia, será a imagem, então podemos arrastá-la para dentro ou para baixo da loja. Tem um chamado T, traga isso. Faturamento. Ok. Eu vou ser, meu preço será de 13.95 textos. Você pode trabalhar em quais são seus textos. Você terá que decidir o que é isso na sua região. E a distorção da unidade de manutenção de estoque geralmente é apenas algo usado pelas lojas como um identificador exclusivo, para que elas possam rastreá-lo facilmente, em vez de chamá-lo de chá verde de jasmim, eles podem ter versões diferentes de fornecedores diferentes e ter um bom código. Inventário. Talvez você tenha apenas dez desses, talvez vendendo estampas ou camisetas. É uma forma de você mostrar a quantidade e, quando ela acabar, você pode pará-la. Envio para esperar, ok, você precisa organizar suas cavernas de transporte, analisar quanto o frete vai custar e fazer cálculos com o peso, o final, as dimensões físicas reais. Não faremos isso por essa opção. Vamos clicar em Criar. Aqui, meu amigo, temos um produto exatamente como antes, onde tínhamos nossas postagens no blog, exceto que este tem preços e frete. Para economizar tempo, gostaria que você fizesse uma importação, um CSV. Ok. Eu tenho um em seus arquivos de exercícios porque se você está apenas fazendo suas próprias impressões e serigrafias e eu as estou vendendo online. Você pode colocá-los um por um. Tudo bem se você estiver trabalhando com, pode se lembrar da sigla para isso, mas algum tipo de controle de estoque. Você pode trazer, exportar um CSV e trazê-lo. E vou falar sobre CSVs e um pouco porque há um pouco mais desafiadores do que, digamos, nossa postagem no blog, CSV, anote depoimentos. Isso é o que trouxemos, mas faremos isso em um vídeo. Eu tenho um pronto para usar. Ok, vamos clicar em Importar. Isso pode demorar um pouco, dependendo do tamanho de seus bancos de dados. Bem, o CSV é. Lá vamos nós. Nós os encaminhamos, tudo bem, então adicionamos produtos por meio do designer. Seu cliente ou cliente pode acessar o editor. Antes que eles possam fazer isso, precisamos publicar nosso site. Não fizemos nada disso. Ok, então eu vou fechar isso. E agora você o compartilharia com seu editor convidado e o editor o abriria. Fizemos isso, certo? Ainda não tenho nada em nosso site. Mas olha, eles podem ir ao comércio eletrônico, ok, e podem começar a ver seus produtos. E assim como fizemos, eles podem adicionar um nome de produto, mas eles recebem a versão branca, nós temos a versão escura e o Webflow. Mas é basicamente o mesmo. Mas o que você pode notar é que não há nada em nosso site. Vamos para isso a seguir. 103. Como adicionar seu produto de comércio eletrônico a uma página no Webflow: Olá você Vamos pegar nossos produtos que estão atualmente presos em nossa guia de comércio eletrônico e adicioná-los à sua própria página. Vamos adicionar um carrinho. Poderemos escolher tamanhos diferentes para o nosso produto e adicioná-los ao gato. Há um surto de bacalhau. Este é um vídeo legal em que podemos fazer muitas coisas. Na verdade, não fazemos muita coisa. Nós jogávamos, faz muita coisa. Isso é ainda melhor, certo? Lembre-se de que estamos criando um modelo, não as páginas em si, então elas estão embaixo das minhas páginas. Mas acabamos de criar esse modelo de produto único. E ele extrairá todas as listagens de nossos produtos de comércio eletrônico. Temos quatro deles lá e ele vai puxar todos eles e criar essas páginas para nós. Adivinha o que? É exatamente como fizemos na postagem do blog quando fizemos nosso CMS anteriormente. Então, na verdade, há apenas uma recapitulação, vamos dar uma olhada no, então estamos analisando o modelo. Vamos criar uma página muito rápida. Então, vamos fazer isso rapidamente. Então, vamos usar o Comando E ou Controle E em um PC. Vou colocá-lo em um recipiente. Comando E. Vou colocar um bloco div. Esse bloco div será apenas uma navegação falsa como espaço reservado, lembre-se de Command ou Control Return para adicionar uma classe a esse diblock. E isso será chamado de div nav. Eu provavelmente deveria chamá-lo de seção. Tudo bem, Comando E. Vamos adicionar uma seção abaixo desta, e esse será o meu produto. Acho que foi para dentro do meu contêiner. Nome, esta seção, vou chamá-la de produto da seção. Vamos dar uma olhada. Você acabou dentro disso. Vamos colocá-lo embaixo e começar a adicionar nossas peças. Nós meio que sugerimos isso mais cedo. Ok, então vamos decidir o que acontece primeiro. O que eu vou fazer é colocar uma imagem. Ok, vou começar com minha imagem. Começamos a usar os atalhos. Vamos continuar. Então, Command ou Control E ou uma imagem, vamos conectá-la. Ele só sabe disso porque estamos dentro do nosso modelo de produto e ele o obterá do tamanho do meu campo de imagens. Vou fazer com que seja 500 no desktop porque é muito grande. Produto da seção. Vamos usar o Comando ou Controle E e vamos colocar, vamos colocá-lo em um aquecimento. Esse aquecimento vai atingir uma costa. Vamos pegar isso pelo nome do meu produto. Agora lembre-se, você pode decidir qual deles você está realmente vendo se quiser, oh, isso é errado, esse é o meu produto feio. Vamos dar uma olhada na Mongólia o tempo todo, t, ao longo de t. Elas não combinam apenas pegando imagens da Internet, encontrando nomes de T. Eles podem nem ser nomes T. Mas, de qualquer forma, vamos dar uma olhada na adição do livro didático. Este vai pegá-lo para a descrição. Como antes, podemos adicionar nossas aulas a isso e estilizá-las um pouco mais tarde, quando soubermos estilizar as coisas. Agora, estamos analisando mais a funcionalidade do e-comm. Agora vamos adicionar nosso botão Adicionar ao carrinho. Ok, então aqui embaixo, tem esse grupo, ok? Esses dois parecem iguais. É como sua versão geral da página ou do site. Ok. Você pode ter dez coisas nele. Esta é a forma de colocar as coisas lá dentro. Botão Adicionar ao carrinho. Vou colocar esse aqui embaixo. Não entendi. Clique em segurar e arraste-o para a direita. Agora é por que temos um tamanho que era parte dos dados importamos do CSV. Não se preocupe, vamos dar uma olhada nisso. Estou fazendo algo chamado variância e um pouco, mas a minha é muito larga, então vou fazer uma largura mínima de 200, o que não vai funcionar. Vamos fazer uma largura de 200 Caught. E esses botões Adicionar ao carrinho têm alguns poderes especiais. Então, se eles fizerem algo um pouco diferente do que você está acostumado, veremos os próximos vídeos e mostraremos alguns deles. Eu não sabia que você não poderia fazer uma largura mínima nele até momento, normalmente é um recipiente de embalagem e dar a ele sua largura. Mas, ei, existem alguns poderes especiais e algumas coisas estranhas que acontecem com os custos porque eles estão tentando fazer muito com essas coisas , obtendo dados, mas isso é bom o suficiente no momento. Vamos testar essa coisa. Então, quando você experimenta o comércio eletrônico, às vezes você pode testar coisas no modo de pré-visualização. Você pode passar e dizer: “Eu estou, lá vamos nós”. Tantos tamanhos diferentes. Às vezes, porém, você precisa publicar o site, caso contrário, ele não funcionará. Isso vai te dizer. E se você tiver problemas antes sair e tentar descobrir uma solução. Pode ser que, mais do que qualquer outra coisa que fizemos, comércio eletrônico precise ser publicado e testado em seu domínio de teste. Então, vamos dar uma olhada. Então, podemos clicar aqui, podemos perder com uma quantidade. E, para cortar, vai dizer que você não teve um corte nesta página. Precisamos adicionar ao carrinho, mas não há nenhum gato nesta página. Ok, então precisamos realmente adicionar o corte. Precisamos acrescentar que qualquer página em que você queira vender coisas dele também faz isso no modelo aqui. Perfeito. Onde está? É essa outra opção aqui. Então, adicionar o carro é como decidir o que você vai fazer, o que você vai comprar. Precisa ir a algum lugar. Vai para este. E esse aqui, eu vou adicionar à minha navegação. Esse é o botão do meu carrinho. Preciso que esteja à direita no momento, só porque é para lá que o gato sente que deveria ir. Se você está jogando junto e tem exemplo, a navegação daqui ou do modelo de outra pessoa, o componente, navbar. Veremos isso um pouco mais tarde. Isso e coisas estranhas que acontecem com isso precisam lutar contra isso. Mas, novamente, abordaremos a visão geral antes de entrarmos em alguns detalhes, tudo bem, Agora deve funcionar. Quero duas das minhas versões de cem gramas e vou dizer etiqueta. Olha isso. Nós temos um gato. Está tudo feito para nós e parece meio bom. Definido como zero, mas isso é algo que podemos consertar. Oh, doce pop up. Tudo bem Bem, dê uma olhada em algumas de nossas outras páginas. Esse é o que colocamos e não tem esse menu suspenso. Tudo bem Meu amigo, você adicionou produtos e nós os adicionamos ao nosso site. A próxima coisa que precisamos é fazer uma grande lista de todos os nossos produtos e colocá-la em nossa página inicial. No entanto, faremos isso no próximo vídeo. 104. Como adicionar uma lista dos seus produtos na página inicial: Ok, então criamos todas as nossas páginas. O que queremos fazer é criar um link para eles na página inicial e criar uma lista como essa para que possamos ver todos os nossos produtos em uma única página. Vamos fazer isso, tudo bem, porque eu não consegui hackear minha navegação sendo tão chata, eu a tornei menos chata. Eu adicionei alguns textos aqui e criei a cor de fundo selecionada. Vou copiá-lo porque precisamos adicioná-lo à nossa página inicial. No momento em que ainda estamos em nossos depoimentos, eu deveria transformá-lo em um símbolo. Anos. Sim, você está totalmente certo. Eu vou deletá-lo e um pouco porque nós, eu vou te mostrar uma coisa e um pouco. Eu sei o que está por vir, então é melhor não ser um símbolo. Vou adicionar um contêiner. Minha nav pode entrar. Vou colocar uma seção aqui por enquanto. Eu vou colocá-lo. Será minha seção de nossos produtos. Eu preciso dar um nome a ele? Provavelmente não. produto sexual já existe. Eu fiz isso no último vídeo. Eu não fiz? Lista? Lá vamos nós. OK. Para adicionar todos os nossos produtos à página que fizemos isso antes. Basta ir até aqui e você fica tipo, como fazemos isso antes de mover os depoimentos e lembrar as postagens do blog na página inicial. Como podemos obter tudo isso, aquela grande lista antiga? Isso mesmo. Use o mesmo. Lista Cms. Vá, vamos me ver como uma lista de coleções. Não é diferente. OK. Você diz que tinha lá. Eu me lembro disso. De onde vem isso? Ele virá dos meus produtos de comércio eletrônico. Olha isso. Há todos os quatro. Então, vou colocar a minha dessa forma e pré-visualizar e nada acontece. O que mais precisamos fazer? Precisamos adicionar os diferentes elementos que realmente queremos que apareçam aqui, como fizemos na página de modelo do produto, mas também fizemos isso antes. Vamos adicionar uma imagem. Clique aqui, talvez apenas adicione-o a um deles. Comando E, imagem. Eu o obtenho dos produtos e só há uma imagem para obter. Nós entendemos isso. Preciso brincar com o tamanho porque acabei de tirar coisas da internet aleatoriamente. Mas sabemos como recortar imagens, não faremos isso agora. Mas, como queremos acrescentar, vamos adicionar o nome do produto. Portanto, isso é exatamente o mesmo que fizemos antes na página do modelo, posso obtê-lo no lugar certo. Desculpe, vou receber essa mensagem. Vou colocar o nome disso. Provavelmente deveria estar batendo, talvez acertando quatro ou algo parecido. Está tudo bem. É preciso um balde por enquanto. Novamente, não vamos estilizá-lo. Vamos apenas adicionar mais algumas caixas de texto. Vamos ver os preços aqui. Bem, podemos simplesmente adicionar um botão e dizer, tudo bem, quando clicar nele, obtê-lo do produto, realmente obter o URL, sim, conecte-se, lembre-se desta página, URL, na verdade, queremos pegar duas páginas e talvez haja duas. Agora há um roxo porque ele vai obtê-lo de uma página de coleção. Mas agora encerra a página de comércio eletrônico, qual? produto atual do qual ele vai retirá-lo, qualquer que fosse esse nome rápido. Você consegue ver o nome rápido? E eles se foram agora, você pode ver que está vindo desse botão que vai se vincular à canela doce. Esse vai ter um link para isso. Mongólia vai criar um link para esse botão aqui. Ok, vamos mudar este para ver mais. Vamos fazer uma pequena prévia. Vamos dar uma olhada. Vamos comer camomila orgânica, chá de ervas. Você volta para a página inicial e não funciona. Volte principalmente para a página inicial. Vamos voltar pelo caminho mais longo. Página inicial, trabalhos neurais. Você pode decidir não fazer isso. Eu só vou desligá-lo por enquanto. Então, não vou exibir nenhum porque quero ligá-lo novamente. E digamos que queremos poder comprar nesta página. Podemos usar nosso novo e prático elemento de educação. Vamos usar o Adicionar ao carrinho. E lembre-se, temos que ter o carrinho na página. É por isso que eu copiei e colei. Se você não tiver, certifique-se de que o gato também vá lá. Eu vou colocá-lo dentro. Você pode ver que tem que ir a algum lugar especial. E isso aparece quando eu aprendi pela primeira vez que era como, Uau, como pode não aparecer na página inicial? Ele só precisa ir para a parte direita desses itens da lista. Se você começar a estilizá-lo com dividendos, eu divs, apenas tenha cuidado com onde ele cai aqui. Ok, então eu vou, você teve que cortar e ter certeza de que o vermelho não gosta. Eles não estão lidos. Bom, muito alto. Excelente. Leia a cama. Oh, não está indo bem. Ok, logo abaixo disso. Tudo bem. Todos os nossos produtos estão listados na página inicial. O que mais você pode fazer? As listas de coleções? Talvez tenhamos feito isso mais cedo. Se clicarmos nele, podemos acessar as configurações e filtrá-lo. Ok, então é aqui que eu decido. Talvez eu queira, eu quero três, mas está aparecendo antes, como faço para reduzir para três? Isso mesmo. Limite os itens a apenas três. Por favor. Clique nele novamente e eu clico na lista. Agora, também podemos classificá-lo. Talvez tenhamos procurado salvar por ordem aleatória, podemos filtrar. Ok, então vamos adicionar um filtro, o nome é igual. Agora aqui, ok, há algumas outras coisas. O que poderíamos fazer é usar a opção que adicionamos anteriormente. Então, podemos decidir entrar em nossa coleção, que neste caso é uma coleção de comércio eletrônico. Então está aqui, tenho produtos. E vamos dar uma olhada na adição de uma opção que diz: estou apresentando uma dessas pequenas chaves seletoras? E a única coisa é que não fazemos isso com os produtos reais em si. Nós fazemos isso com o produto há muito tempo aqui. Ok? Então, dizemos a engrenagem, não o item real. E queremos adicionar um campo para esses caras. E vamos dizer, vamos adicionar um novo campo. Vai ser um interruptor. E essa opção será rotulada como itens em promoção ou itens em destaque. E eu vou salvá-lo, salvar a coleção. E aqui agora eu posso falar e dizer, na verdade, quem tem uma venda nesse caso. E não se esqueça de salvar as alterações. E talvez chá de jasmim, talvez este aqui também esteja em promoção. Salve isso. Agora posso voltar à minha página inicial usando nossas habilidades doces de antes. Podemos dizer que, na verdade, eu ainda não sei como fazer isso. Página inicial, posso clicar na lista de coleções do navegador. Posso dizer que, na verdade, apenas me mostre o filtro que tem ou está com um botão de venda ligado apenas para aqueles que parecem geniais? Bem, é, eu estou feliz comigo mesma. Espero que você esteja feliz consigo mesmo também. Estamos aprendendo coisas novas de comércio eletrônico, mas aproveitando um pouco do conhecimento inicial, tornando tudo isso mais fácil, provavelmente só precisamos de dois. Agora, vamos lá. Isso é adicionar listas à nossa página inicial ou a qualquer página que possamos reutilizar a lista de coleções do CMS, Tudo bem, para o próximo vídeo. 105. Configurações de pagamento no Webflow: Bem vindo de volta. Temos nossos produtos em nossas páginas. Temos um carrinho em apenas algumas outras etapas antes de começarmos a receber pagamentos ou pelo menos, receber pedidos de nosso t. Deixe-me mostrar o que são. A melhor maneira é, na verdade, publicar o site e verificar até onde podemos chegar. Então, vou verificar o site publicado, não o site de teste. OK. E eu vou dizer Adicionar ao carrinho e ele vai dizer, você não pode, você precisa escolher um desses. Okey-dokey pegou um cartão, adicione-o a ele, ou quem estamos recebendo lá. Continuaremos fazendo o check-out e o check-out como desativados. O que isso significa? Deixe-me mostrar a você como habilitar o site. Não vai deixar você imediatamente. Vai dizer que você, vamos para o nosso, Na verdade, vai para as configurações do nosso projeto. Ok, e vamos ao comércio eletrônico e ele dirá: Ei, antes que você possa ir mais longe, você precisa nos contar suas coisas básicas. OK. É principalmente o seu endereço comercial. Eu. Estou trabalhando em euros, que você não pode digitar. OK. Então E por euros. Vou colocar o nome e endereço da minha empresa. Você desvia o olhar. Tudo bem, esse é meu endereço embaçado. Continuar. Tudo bem, agora temos alguns recursos extras aqui. E o que queremos, quase podemos fazer isso, é lembrar que precisamos habilitar nossa loja. Então, vamos para o general. Vamos finalizar a compra e finalizar a compra oleosa. Quem conseguiu atualizar nossa hospedagem. Já falamos sobre isso antes. Vou fazer o meu agora. Você ainda pode fazer muito desse curso ou da diversidade desses vídeos sem atualizar o host. Mas eu vou fazer o meu para que eu possa ir mais longe logo após upgrade e agora pegar minha página inicial, minhas coleções sumiram. Ou é? A primeira coisa que eu sempre tento é redefinir a página, recarregar a peça. Nenhum item encontrado. Isso não é bom. Você comeu, então eu vou descobrir e eu vou te contar o que aconteceu. Eu descobri isso. OK. Eram meus produtos no meu comércio eletrônico sob produtos, todos eles ainda são rascunhos, então bem, eles foram trocados, eles foram publicados. OK. Então, o que eu posso fazer é ir individualmente e dizer que você não um rascunho dos EUA encenado para publicação ou indo direto para cima, publicá-lo. A diferença entre esses dois é isso vai prepará-lo na próxima vez que eu acessar o site inteiro que está sendo publicado, ele continuará durante o passeio. Se eu tivesse publicado agora, ele entraria no ar agora mesmo e não esperaria que eu publique o site inteiro. Mas eu vou fazer todos eles juntos. Eu vou dizer selecione todos eles. Obrigada. Por aqui, vou dizer que o palco publica na íntegra. Sim, por favor. Bem, acho que foi isso. Bom. Na verdade, eu não verifiquei. Sim. Eles estão prontos para ir. Atualizamos nossa hospedagem, temos um corte em nossa página. Adicionamos nosso endereço comercial. Vamos ativá-lo no YouTube. Seu checkout será ativado. Será ativado. Você precisa adicionar um provedor de pagamento. Então, vamos clicar nisso. Você pode ir aqui ou ali, clicar nesse botão. Você precisa conectar um desses dois. Agora, não quero conectar meus 12 aqui porque minha empresa não está realmente conectada a essa loja T. Não quero que as transações sejam realizadas no momento, mas é isso que ouvimos como seu gateway de pagamento e você poderá ativar o botão. Ok, em vez de aceitar pagamentos prontos para uso. Agora, com esses pagamentos, não vou falar sobre como usar o Stripe e o PayPal. Stripe é um processamento de cartão de crédito muito comum. Você também pode usar o PayPal. Você pode usar os dois. Haverá limitações. OK. Então, quando você estiver configurando, basta verificar o que são antes de entrar em acordos com o cliente, potencialmente porque haverá o que você realmente deseja fazer é querer que seu cliente configure o Stripe e PayPal, não você, porque eles são os responsáveis pelos impostos e pelo pagamento das taxas. Além disso, ambos exigirão alguma identificação. Então, como quando eu configurei meu Stripe e PayPal, eles querem saber seus detalhes em um de seus passaportes ou vestidos. Eles colocam coisas, você adiciona uma conta bancária e eles verificam essa conta bancária. Eles funcionarão razoavelmente rápido. Mas haverá algumas limitações novas contas sobre o quanto você pode processar e quanto pode transferir, esse tipo de coisa. Mas sim, é isso. Adicione o provedor de pagamento, pare de fazer, pare de construir o império da loja T. Tudo bem, isso é tudo para este vídeo. Vamos para a próxima. 106. O que acontece após uma compra em uma loja de fluxo Web: Então, alguém fez um pedido no seu site. Como você é notificado? O que acontece a seguir? Bem, duas coisas acontecem. Um e-mail é enviado e, em seguida, há pedidos que você pode verificar. Vamos dar uma olhada nos e-mails primeiro. Se você for para essa pequena engrenagem aqui, há uma opção que diz e-mail. Você pode adicionar identidade visual a esse e-mail. E na parte inferior, aqui estão os diferentes e-mails que você pode ver e alterar. Seu pedido foi confirmado. OK. E você pode ver aqui um modelo de teste disso. Eu tenho um dos meus produtos com um nome errado. Preciso ir e consertar. Mas é isso que você, ou se é sua loja ou seu cliente que recebe o e-mail, você pode testá-lo na parte inferior aqui há um e-mail de teste. Você pode enviar para si mesmo. Você pode ver que é parcialmente personalizável. E há vários estágios diferentes nesse processo de e-mail: quando ele é recebido, quando está sendo enviado, quem recebe o e-mail? OK. Isso é definido aqui em geral. Não, não é. Está no comércio eletrônico. Geral. Muitos generais. E você pode ver aqui que é um endereço de e-mail desfocado. Assim será, para que você e o cliente recebam e-mails. Mas seria útil ter um lugar central no comércio eletrônico sob pedidos que listassem todos eles. E aí está que eu não recebi nenhum pedido no momento, mas é aí que você pode ir vê-los no designer que lhe deu o dono da loja. Você pode simplesmente fazer isso por meio do designer. Mas se você for o cliente, talvez esteja vendo isso pelo editor. Lembre-se de que essa é a visão que seu cliente, cliente, membro da equipe vê e pedidos serão a lista de todos os pedidos. Tudo bem, então é isso que acontece depois que alguém faz uma compra. O e-mail foi enviado, editou esta lista de pedidos. 107. Como personalizar as configurações do carrinho no Webflow: Olá a todos. Neste vídeo, veremos esse botão do carrinho e o elemento adicionar ao carrinho que adicionamos anteriormente e mostraremos todos os segredos incorporados nele. E eu vou te mostrar como entrar neles para que você possa estilizá-los. Vamos ficar com esse carrinho primeiro. É especial. Por que é especial? Porque ele tem seu próprio pequeno ícone aqui no navegador. E dentro daqui, há algumas coisas. Aí está o botão de cortar. Digamos que queremos estilizá-lo. Começamos como se tivéssemos feito qualquer outra coisa. Nós dizemos corte de botão. Dizemos que você terá todos os cantos arredondados e talvez um obturador, bom ou não, mas você entendeu. Você pode estilizar essa coisa com bastante facilidade. Mas como faço para encontrar estilo aquele pop-up que você viu no começo? Isso é essa coisa aqui. Esse é o envoltório cortado. E você fica tipo, uau, normalmente e você clica em alguma coisa, você pode ver que ela a destaca. Este não destaca nada, então está tudo lá. Ok. Todas essas coisas estão lá dentro que você pode ir e fazer isso. Como você faz isso aparecer? Basicamente, clique no carrinho e veremos as configurações. Então, vamos ver a pequena engrenagem aqui, não os estilos, a engrenagem, e ela vem com algumas coisas especiais. Aqui está o material de corte espacial. Então, abra o carrinho, essa é a primeira coisa. E, por padrão, está em um modal pop-up modal. Se você acabou de usar um estilete, pode ir agora e dizer “Você é um livro didático”, vamos adicionar um estilo. Então, volte para S para estilos, produto de texto. E eu vou escolher uma fonte e o tamanho. E eu vou escolher um peso. Meu caso, será inútil e isso será um de tudo o que for. Talvez um pouco mais. Só vai ser 1,3 desses 20 pixels. Sim, deveríamos usar quartos, dormir embaixo. Estamos indo rápido. Sim. Ok. Então, podemos entrar nele para estilizá-lo. Ele também tem algumas outras opções. Então, novamente, de volta às nossas configurações. Você pode ver o tipo de cartão. Podemos fazer um que apareça da esquerda, um que apareça para a direita ou um que realmente caia do carrinho. Deixe-me fazer uma demonstração dessa. Então, vamos abri-lo e clicar nele. Você vê esse? Tudo bem, o que mais ele faz é selecioná-lo nas configurações. Abra isso. Agora, esses têm algumas configurações básicas. Esses três primeiros, você pode ver que é tudo a mesma coisa. Este último tem alguns outros, como você pode alinhá-lo à esquerda ou à direita ao botão , dependendo de onde ele está e como abri-lo. Você precisa clicar nele ou pode simplesmente mouse sobre ele quando ele aparecer? Você pode brincar com a flexibilização e essa opção aqui, todas elas têm o que diz: ela abre quando um produto é Editar? Faça uma degustação para o usuário. Eu sei que em muitos sites às vezes eu simplesmente paro abrir e tentar adicionar coisas a eles. E ele continua se abrindo quando você encontra o botão de continuar comprando para testar um pouco para ver o que funciona para você e sua clientela. E aqui embaixo, ele mostrará quantas são uma lista de rede. Na verdade, não está fazendo isso, é apenas visualizar quantas. Eu só tenho quatro meus, então só está aparecendo antes. Você pode aumentá-lo apenas para ver como é. Além do título do produto, colocar um grande sucesso aqui pode não ser tão útil quando nos perdemos. Então, a outra coisa enquanto estamos aqui é que haverá momentos em que, como será quando estiver vazio? Ok, você pode passar por aqui e mudar o texto. Ok, você também pode adicionar uma aula e estilizá-la. A mesma coisa com o ERA. Você fez o fundo aqui. Isso não existe por padrão, você pode ver? Você pode escolher o estilo da cor da fonte. Ok, vamos desligar o cartão. Agora, o botão Adicionar ao carrinho aqui embaixo também é meio especial, tentando encontrá-lo. Vamos fechar tudo isso. E vamos encontrar o acréscimo ao carrinho que eu arrastei para fora do painel de elementos. Então essa pessoa aqui, essa aqui tem a mesma coisa nas configurações. Você tem algumas coisas. Você quer que a quantidade apareça lá? Talvez você não. Talvez ninguém nunca escolha mais de um. Como se houvesse algumas que eu não consigo pensar em uma agora, mas você quer três massagens nas costas? Você não tem? Só um. Ok. Portanto, pode não fazer sentido que eu não tenha certeza se é assim que você provavelmente poderia pensar casos de uso de licitantes para isso. Ok. Adicionar ao carrinho. Você quer mostrar que não é fácil comprar agora, talvez você esteja vendendo apenas uma coisa. Não há como cortar para adicionar. Só quero ir direto para Sim, essa é a única coisa que ninguém compra mais do que uma de suas coisas. Talvez seja Adicionar ao carrinho e saiba que agora, ao contrário do carrinho, você pode estilizar o K fora de estoque e as opções de erro. É como forçá-los a aparecer para que você possa instalá-los. outra página, você se perguntará sobre o estilo da rota para o carro, que está em qualquer página em que você o coloca. mesmo acontece com o adicionar ao carrinho. Há abaixo das páginas. Nós vimos isso há um tempo atrás. Existem essas páginas de checkout. Basta entrar neles e instalá-los como quiser. Agora, com essas páginas de checkout o carrinho e tudo mais, ele ainda segue o caso em cascata de CSS. Na verdade, qualquer estilo anterior a esse, o formulário de checkout é a única coisa que é se você não selecionou nada e aqui fica um pouco confuso, também, como faço? Existe alguma coisa que eu possa fazer? Se você clicar no formulário em si por padrão, é meio que clicado em outra coisa. Eu sou Buddy é clicar no formulário de checkout, como o carrinho e o adicionar ao carrinho que fizemos aqui. E nas configurações, você pode fazer coisas como se não houvesse uma quantidade enorme, então você pode fazer algumas delas. Muito disso é controlado pelo Webflow para garantir que tudo funcione. Ok, então não há, nenhuma razão para o envio. Então, meio que o desliga. Vamos ocultar o endereço de cobrança. E, como antes, você pode estilizar a aparência da mensagem de erro junto com apenas a página normal. Agora, voltando ao meu discurso de estilo sobre isso ainda fazer parte da cascata. Ok, então podemos estilizar este aqui e deixá-lo ótimo com estilos individuais, tudo bem. Mas digamos que no momento tudo ainda esteja usando o ARIO. Então, o que vou fazer é voltar ao meu corpo, mesmo estando nesta página de checkout e preciso de estilos, vou entrar aqui. Eu vou dizer que todas as etiquetas corporais serão algo que você pode ver. Você pode ver o que mais muda. Portanto, faça mudanças de alto nível ao projetar o resto do site. E então você pode entrar e fazer pequenas mudanças aqui. Tudo bem, isso é personalizar seu carrinho. Você é Adicionar ao carrinho e pode estilizar todos eles, incluindo esta página de checkout. Tudo bem, é isso. Nos vemos no próximo vídeo. 108. Como adicionar variantes no produto Webflow ecommerce: Precisamos falar sobre variáveis. Variáveis são essas coisas. Há uma pequena lista suspensa. Eu quero chá de jasmim, os €13, mas quais são os 250? Oh, eu posso economizar muito dinheiro e é um preço diferente. Portanto, nossas variáveis são o tamanho do produto. A sua pode ser do tamanho da roupa, pequena, média, grande, pode ser de cores diferentes, pode ser uma combinação de cores e tamanhos. As variáveis frias. Deixe-me mostrar onde eles estão no Webflow. Tudo bem, então você se lembrará de que na verdade, já temos alguma variação. Eles vieram do CSV que eu te dei. Ok, então o que eu vou fazer é clicar no botão Eu vou, ligar todos eles para que possamos vê-los. Então, vou desativar o limite possamos ver essa pessoa. Ok, o velho chá verde Jasmine não tem nenhuma variação. Para obter a variação, vamos para o produto, que é um E, vírgulas, obtemos um produto. E vamos dar uma olhada nesse de Jasmine. Esse é o que adicionamos manualmente, ok, e depois na parte inferior , em Opções, estranhamente, deveria ser covariância. Então, vamos adicionar um conjunto de opções. Isso pode ser cor, peso, tamanhos, sabores, seja o que for, eu vou fazer o tamanho. Vamos experimentar com tamanho ou peso iguais ao tamanho. E teremos quantas opções eu vou ter. Eu poderei vendê-lo em 100 g e você também pressionará Enter ou tab K e 150 g. Desculpe, América, eu não sei o que é isso. São gramas. Isso fará com que pareça apropriado. Então, vamos dar uma olhada em Concluído. Você fez isso primeiro, caso contrário, você não pode chegar à próxima parte, ou pelo menos aquela que você a alterou. De onde eles vieram? Você acha que eu não fiz esses. Ao adicionar essas opções. Diz, tudo bem, você tem esses, você sabe, você tem algo e há duas versões deles. Se eu continuar somando-os aqui, se eu tiver uma versão de kg e apertar enter e pronto. Você verá aqui embaixo que temos uma opção de KG. Vou curvá-lo e entendemos isso, por favor. Não faça isso. Ali. Existe uma opção de desfazer? Eu não acho que exista. Ou desfaça. Desfazer, desfazer, desfazer. Ah, cara. Sabe, Ross, acho que estou fazendo, acho que estou desfazendo, mas não aqui porque isso ainda está aberto. Está desfeito aqui. Eles estão em rascunhos que realmente fizeram esse trabalho. Uid, eu vou consertar um segundo. Não vá a lugar nenhum. Obrigado por não sair. Então, estou de volta. Acabei de colar tudo de volta. E nós estávamos sim. Ok. Então, nós temos esses n Lembre-se de quando eu adicionei um, como eu me livrei dele? Eu fiz isso acidentalmente e eles não leram a notificação porque eu sei o que estou fazendo. O que você faz é que não está aqui ou ali, ou lá, está aqui em cima. Você diz, você pode, você exclui essa opção. Então é isso que eu queria adicionar à opção de um quilo. A outra coisa que eu preciso mudar é a mudança de tamanho, mas o preço vai mudar aqui. Então eu vou entrar e dizer, vamos lá o que estava escrito em suas anotações. Se você quiser um preço inventado. Então, digite o que quiser. Comparar o preço é bastante interessante. Vamos dar uma pequena olhada. Vamos trocar isso. Então, o Compare pelo preço como este aqui. É tão leve, é o preço deles que tem uma linha, como normalmente antes da venda é esse preço, mas você pode obtê-lo por esse preço. Eu calculei, isso é o que custaria se você o comprasse nos lotes de cem gramas. Então você está economizando um monte de $14. É aí que meus negócios de chá não se cansam. Ok. Então, as tampas entram e fecham. Ok. Preço minhas quantidades, eu tenho dez delas e apenas uma dessas. Vamos salvá-lo e garantir que seja publicado. Como está encenado, preciso publicá-lo. Agora não tenho certeza se já te mostrei isso porque tive que refilmar um pouco. Então eu sempre fecho aquele, fecho aquele. Mas você pode simplesmente fechar este e todos eles entrarão em colapso. Tudo bem, vou publicar o site. Posso conferir meu site como posso fazer aqui. Ok. No modo de pré-visualização. Ok. Mas isso teria sido publicado? Funciona. Eu tenho meu menu suspenso. Temos uma variável sobre o preço não mudar, o que me irrita. Então, no site principal real que eu atualizei, não consigo me lembrar. Eu não o atualizei para ver as atualizações e agora eu deveria ter 100 gramas. Oh, olha, isso muda. Coisas tão simples. Ok, então isso é uma variável. Você pode enlouquecer com variáveis. Você pode ter cores e tamanhos diferentes. Eu não entenderia muito , mas você pode ter todos os tipos de combinações e práticas diferentes. Você também pode desligar a imagem. Vamos fazer isso juntos. Então, vamos voltar aqui. Vamos voltar ao meu produto. E para esse tamanho diferente, salvo como uma cor diferente. Isso faz sentido, certo? Você tem uma cor diferente. Se você vender cuecas com essas verdes vermelhas e azuis, trocaria a imagem pelas cores diferentes. Aqui dentro. Eu tenho um branco diferente, então fiz uma pequena imagem para nós. Ok, então eu estou na de 200 gramas e você pode ver que esta é a imagem variável. Eu vou substituí-lo. Tenho uma em suas anotações em seus arquivos de exercícios. Acabei de economizar 50 g, mesmo sendo euros aqui. E vamos fechá-lo. A imagem funcionou. Legal. É uma imagem muito grande para o que eu a estou usando. Vamos publicar. É direto para publicar a partir daqui. Depois de publicado, uma vez que você também possa publicá-lo diretamente de lá, na primeira vez, você precisará publicar o site inteiro. Agora, se eu atualizar o site, poderemos trocar imagens, mudar o preço e eles mudarão isso. Tudo bem, isso é como adicionar uma variável, procurar as opções em seu produto e não excluí-la, ou pelo menos não clicar no calor não pode desfazer isso, leia primeiro n. Tudo bem, é isso. Para o próximo vídeo. 109. Como adicionar categorias para produtos CMS Collection com filtros: Olá. Neste, vamos adicionar categorias. No meu caso, serão regiões onde você poderá obtê-lo da Índia e da China. E vou adicionar meus produtos a essas categorias para que possamos filtrar por elas e pesquisar por elas, agrupá-las. Você pode estar fazendo isso com roupas masculinas, femininas, roupas infantis, essas podem ser boas categorias. Orçamento e prêmio podem ser categorias muito boas. Casa onde há hardware. Você vai ter que pensar em suas próprias categorias. Depois de criarmos uma categoria, o que é muito fácil, na verdade iremos e, em nossas páginas de produtos, poderemos dizer, me mostrar todo o T relacionado a esse T por seu gerente de categoria e isso é roupa masculina. Você não quer seus filhos, temos coisas para aparecer aqui. Você deseja uma categoria de produtos relacionada. Tudo bem, vamos entrar. Vamos fazer algumas categorias. Categorias, você não precisa tê-las, mas é uma boa maneira de separar seus produtos. No meu caso, vou separar os produtos em regiões onde você pode comprar chá, Índia, Sri Lanka ou Japão onde quer que você queira tirar seus dentes, você pode escolher essa categoria. Mas, para você, pode haver um meio e uma seção para mulheres e crianças pode ser uma opção premium e econômica. Você conhecerá seu setor e quais tipos de categorias eles podem ser agrupados. Então você pode fazer isso de duas maneiras. Você pode ir para o mesmo que aqui e ir para as categorias. Ou você pode fazer isso por meio dos produtos. Vamos fazer categorias na guia de categorias. Tem uma nova categoria. Minha primeira categoria será, digamos, a China. Ok, eu vou criar esse. Na verdade, de Mindanao. Você pode realmente começar a adicioná-los. Digamos que o mongol possa ser da China. Vamos partir de Kevin Mile. Ok, e eu vou adicionar chá preto doce de canela também. Ok, eu vou economizar, essa é uma forma de adicionar categorias. Você também pode fazer isso pelo produto. Digamos que o chá de jasmim aqui, você pode ver as categorias. Você pode escolher um existente que já fizemos. Ou aqui, você pode acrescentar, basicamente é a mesma interface, ok, esta vai ser a Índia. E você verá sua URL. Isso também os dividirá em pequenas subpastas. E você pode ver que isso me dá a opção de adicionar esses outros ao mesmo tempo. Eu só vou criar esse. Pode ser para mais de uma categoria. Então você pode decidir que este é da Índia e da China. Difícil de fazer. Mas vamos dar uma olhada nesses outros. Certifique-se de salvar as alterações. Mongólia será da Índia. Desculpe, não achei que isso tivesse acontecido até o fim. E certifique-se de salvar as alterações. Dan, leia o texto pop-up e o último está bem, então aquele tem um, aquele sumiu. Esse desapareceu. Só estou olhando aqui. E esse está dizendo , a maioria deles é Vamos colocar a maioria deles da Índia. Salvar. O que você pode fazer com isso agora, vamos fechá-lo. Você poderia, na sua página inicial, filtrar um pouco, você pode ver você, bem, já fizemos isso antes. Ou é redefinir a página, voltaremos aqui. Vamos dar uma olhada em nossos produtos. Eles estão todos prontos para ir. Algo está errado, está de volta. Eu não fiz nada de qualquer maneira, ignore isso. Então, digamos, vamos entrar aqui, vamos pegar nossa lista de coleções e começar a filtrar. Podemos dizer que, na verdade, nesta página aqui, e temos, na verdade, vamos usar opções limitadas. Temos apenas quatro, mas digamos que eu só queira mostrar aos desta página que a categoria que contém a China deve ter apenas duas. este, eu acho que um deles tem dois deles aplicados. Índia e China também são muito úteis quando você está em uma página. Então, vamos dizer isso. Vamos ao nosso modelo de produto. Sim. Então, estamos vendo o mongol. me lembro de quem se inscreveu para assistir Lost my. Isso é bom. Jasmim TK. E o que podemos fazer é adicionar a mesma lista. Então, eu vou acelerar isso. Ok, ele acabou de adicionar um contêiner e, em seguida, editar a lista que usamos antes. E vou conectá-lo às categorias, mas vou conectá-lo aos produtos. Porque o que eu quero fazer é adicioná-los. Vou fazer dois por dois. Vou acelerar novamente e adicionar alguns recursos. Ok, e estou apenas conectando-os ao nome dos produtos. Além de um trono, um modo de velocidade de imagem. Ok, então nesta página agora e eu quero um pouco se você está nessa e está em uma categoria, então você está na moda masculina. Eu quero ver outras modas masculinas, não potencialmente moda infantil. O problema é que eu posso ver o mesmo novamente. Vamos dar uma olhada. Vamos ver minha lista. E vamos dar uma olhada nos filtros. E, em primeiro lugar, digamos que eu quero mostrar apenas as categorias que contêm. Essa é fácil. Consegue ver esse pequeno raio? Você poderia dizer, eu meio que me lembro qual delas tem a dizer, qualquer categoria dessa categoria atual. Ele sabe em qual categoria está. Agora, por que todos eles ainda estão aparecendo? Acho que o chá de jasmim está preenchido em ambas as categorias . Então, está mostrando todas as listagens que estão nessa categoria e , como estão em ambas, em todas elas. Vamos dar uma olhada. Me confunda um pouco. Portanto, o chá verde está na China e na Índia. Então, isso significa que está mostrando todos eles. Então, vamos dar uma olhada. Quem é esse é só a Índia. Vamos definir isso apenas para a China. Só para que você também vá para a China. Então muda e vai para a Índia. Então, torne isso um pouco mais fácil. Você salva as alterações. E vocês dois têm a Índia. Bom. Ok, espero que magicamente quando voltarmos, isso mostre apenas duas coisas. Lá vamos nós. Mas se eu for para um dos outros, Mongólia, você vai, mostra o par mongol. Mas o que você notará é que ele está mostrando este duas vezes, que não é o que eu quero filtrá-lo um pouco mais. Vou clicar na lista agora. Estamos apenas começando a desvendar a incrível amplitude que o fluxo de incrível amplitude que o trabalho tem quando se trata desse comércio eletrônico, desses cursos essenciais, como sim, ele assume o controle de tudo. Não vou entrar em muitos detalhes, mas acho que isso é legal porque dá a sensação de pensar em muitos. Ok, então vou adicionar um filtro que não é o nome, o produto. É difícil lembrar, como se o produto o produto atual. Não, eu quero não é o produto atual. Então, eu quero te mostrar essa lista. Deseja filtrar os produtos que não são o produto atual. Eu posso fazer isso e me livrar desse outro que diz Compartilhar nas categorias. Então eu posso me mostrar aqueles que não são esse produto. Isso faz sentido? Meio que. É esse aqui. Nome Ed. Há algumas coisas a serem feitas, mas eu usei esse produto aqui, ok, e disse: “Não é esse produto”. Super legal, super poderoso. De volta à minha lista. Três, por favor. Adorável. Tudo bem, isso é tudo para categorias no Webflow. 110. Como importar um CSV para o comércio eletrônico para produtos para o fluxo Web: Olá a todos. Vamos falar sobre CSVs, planilhas e documentos do Excel. Ah, que diversão eu me divirto na loja, veja neste vídeo ao lidar com produtos. Portanto, os produtos de comércio eletrônico, colocá-los um por um, é bom para alguns empregos e outros empregos. Obviamente, não é prático, especialmente se você estiver vendendo muitas coisas. Você provavelmente já tem algum tipo de software que gerencia seu inventário, ok, e o que você precisa fazer é exportar um CSV. Não era só importá-lo facilmente. exemplo, quando fizemos nossas coleções, poderíamos simplesmente pegar o CSV antigo e ele meio que transportava e dizia que este pertence lá, esse pertence a aqui. É um pouco mais complicado. Agora, não é o mais especialista nisso, então você pode encontrar maneiras melhores de fazer isso. Eu só sei que quando eu estava fazendo isso, eu tive problemas quando eu estava tipo, você sabe o que, eles provavelmente deveriam estar envolvidos nesses problemas e minhas soluções. A melhor maneira de fazer isso é quando você fizer isso, eu vou importar um CSV, o produto pode ver que diz garantir que seus produtos sejam importados corretamente usando nosso modelo CSV online. Então, basta baixar isso. Essa é a melhor maneira, porque você verá que todos os títulos oferecem uma espécie de modelo. Talvez você precise reorganizar suas informações. Talvez você precise da ajuda de um especialista em planilhas dinâmicas. Eu tenho um curso sobre Excel, que pode não ser o certo para você, mas de qualquer forma, então baixe o modelo CSV e foi isso que eu fiz. Eu mostro o modelo que eu tenho. Eu abri o meu em números, que é a versão para Mac do Adobe Excel. Basicamente, você precisa seguir esses títulos junto com o topo aqui. Ok, então certifique-se de que eles correspondam e tudo será importado, mesmo que você os deixe em branco. Agora, com esta aqui, vou te mostrar uma coisa importante. Então, esses dois nomes precisam ser esses. Oh, na verdade, vamos descrever isso para que você possa ver que eu tenho duas da mesma coisa. Por que são duas da mesma coisa? Porque, na verdade, muitas vezes as variantes no controle de estoque têm, então é onde estou? Eu tenho meus 100 g e meus 200 g. Ok. Qual deles estamos fazendo? Estamos fazendo camomila. Ok, então, na verdade, existem dois produtos diferentes, embora tenham o mesmo nome, os tamanhos diferentes significam que eles têm números diferentes, digamos distorcidos, semelhantes, mas diferentes. Então você acaba tendo duas partes aqui. Eu estava passando anos tentando descobrir como colocar os dois na mesma linha. Na verdade, são apenas duas linhas separadas. Ok, a outra coisa interessante é que, obviamente, você pode decidir se, lembre-se de que analisamos o download digital versus o produto. Você pode decidir para onde vai, para onde é colocado como produto. Esta é a descrição do meu produto atualmente Loren Ipsum, eu não tinha categorias para esta etapa. Você pode colocá-los aqui. Nós apenas digitamos manualmente e as imagens. As imagens podem ser engraçadas, como no início do curso, acabamos de importá-las e você notará isso nesta que veio automaticamente. Então, como isso aconteceu? Você precisa do caminho raiz ou do URL completo da imagem. Agora, as páginas estão, mas a imagem real em si. Eu vou te mostrar como eu fiz isso. Eu tenho a minha do Unsplash e vou te mostrar, tudo bem, digamos que você queira que essa imagem faça parte dela, ok? Tudo bem, eu gosto desse. Então você clica nele. Ok? Você, o que eu gosto de fazer é clicar com o botão direito do mouse e há uma opção que diz copiar endereço da imagem. Agora, no PC, será algo semelhante. Basicamente, você não quer copiar a página, mas quer copiar o URL para isso, talvez seja necessário pesquisar no Google como fazer isso, dependendo do seu navegador, e eu copiei. E basicamente tudo o que é ver isso quando eu colo, é o URL completo. É um pouco confuso, ok, para essa imagem, e ela deve carregar sozinha sem todas as coisas nela. Se você estiver lidando com um produto em seu próprio banco de dados, talvez haja uma maneira de acessá-lo. Você terá que verificar com quem executa o banco de dados se há um link que possa fluir para, se você estiver na mesma rede, ele pode funcionar. De qualquer forma. É assim que funciona dessa maneira. Talvez você precise simplesmente colocar seus produtos em um drive público para poder pegá-los. E aqui, onde está? Sim, acabei de colá-los. Qualquer outra coisa para passar por preços diferentes, números de distorção diferentes. Isso requer frete? É verdade? Você pode ter seu virião aumentado de branco lá dentro. Existem as opções de tamanho dos downloads digitais e pronto. Você pode ter mais de um. Eu tenho apenas opções de tamanho. A grande coisa é ver que elas parecem todas iguais. Talvez seja só eu, mas a opção um, opção dois, a opção um, os valores da opção dois ou esses juntos. Esses estão juntos. Portanto, pode ser que esses sejam os tamanhos e, em seguida as cores correspondentes com as quais você acabará usando bastante. Mas se você já lidou com números de SKU e produtos antes, sabe que, na verdade cada unidade tem seu próprio número de distorção e há muitos deles. Espero que você consiga fazer com que seu software de inventário fale com o Webflow, confira como ele se chama e veja se outra pessoa fez alguma coisa. Talvez haja uma integração, talvez haja um plug-in para ela. E se for um problema, entre contato com o Webflow e veja se eles têm uma solução que outras pessoas possam ter tido. Eles realmente querem dar as boas-vindas ao comércio eletrônico neste site. Bons negócios para eles. E o lado do comércio eletrônico do designer slash CMS é muito bom para nós. Então, espero que você possa fazer isso acontecer. Mas, de qualquer forma, eu só queria dar um pequeno aviso sobre o que fiz com esses CMS e por que ele trabalhou e por que o motivo pelo qual o modelo funciona e por que o CSV em os arquivos de exercícios funcionam. Mas talvez você queira não baixar o pré-existente e usá-lo como guia. Tudo bem, é isso. Csv, bondade com menos planilhas, por favor. 111. Flutuar e por que o botão do carrinho não vai no Nav no Webflow: Olá a todos. Neste vídeo, vamos colocar o botão do carrinho na navegação e você fica tipo Isso não parece tão difícil. Não é, mas é, há alguns ingredientes secretos dentro de um algodão é algum ingrediente secreto dentro de uma nav que faz com que os dois não queiram brincar juntos. Além disso, quero apresentar a vocês algo chamado flutuador. E, em geral, mais do que ver algumas dessas coisas como soluções de fundos a serem encontradas, não coisas que estão quebradas, nunca podem ser consertadas. Meu vídeo sobre psicologia de web design está em sintonia com os problemas. Tudo bem, então, mais cedo, analisamos a edição do carrinho. Podemos simplesmente jogá-lo em nossa planície agora que fizemos e eu disse: Não coloque na navegação, isso é dos componentes. Vamos descobrir por que agora, quero mostrar algumas coisas sobre alguns dos componentes pré-fabricados, alguns insights sobre isso e mostrar que muitas coisas aqui e o Webflow é realmente fácil. Apenas comece. E há algumas coisas que exigem um pouco de solução de problemas e não é em que você seja ruim, é apenas parte do processo. Nem sempre encontro você como Xin na solução de problemas. Tudo bem, então vamos adicionar esse componente. Então, vamos e, e elementos ou componentes são coisas pré-fabricadas, é a barra de navegação, nós gostamos disso. Lembra por que gostamos? Porque eu fiz isso porque, quando eu volto para o celular, ele também os altera, pois tem alguns poderes secretos. Esses poderes secretos aqui, porque caem. Portanto, a barra de navegação tem um ícone especial. Tem um recipiente , tem marca. Tem algo chamado menu de navegação, que é essa coisa aqui. E então tem esse botão de menu, que não podemos ver. Essa é a parte secreta. É algo que está configurado para ser exibido. Nenhuma. Está lá ou está bloqueado, está lá. Ok. Mas só liga quando está no celular. E esse é um dos problemas quando se trata de mingau chinês, que o gato também tem um palácio secreto e disse: Olha, vamos usar o carro, não o complemento ao carrinho. Esse é aquele que tem toda a quantidade e tamanho do botão de corte, como você poderia totalizar. Então, vamos editar e , em primeiro lugar, vai dizer: Ei, você não está sendo o menu. E eu pensei, o que você pode estar no menu? Parece um ótimo lugar para você. O que você percebe é que consegue ver onde está escrito? Diz que cut não é capaz de colocá-lo no menu de navegação. Na verdade, essa é a classe. Eles podem não ser o Nav inteiro, apenas aquela classe em particular. Então eu posso colocá-lo aqui. A habilidade secreta do carrinho é que ele contém todas essas coisas. Então, dê uma pequena olhada nisso. Então, o gato tem o botão de copiar, que é o que podemos ver, mas também a embalagem do gato, que não podemos ver. Essa é a coisa que aparece quando você clica nela. Essa é a div que aparece lá. Então, tentar esmagar os dois juntos significaria que se eu colocasse o corte aqui, isso significaria que ele desapareceria. Esse menu desaparecerá quando ele chegar ao celular. E seu carrinho de compras e o Webflow também gostariam de tentar garantir que criaturas simples como eu não acabem fazendo coisas bobas como essa. Isso funcionaria. Não há nada de errado com o código. Tem um carrinho dentro dele, mas ele desligaria para um celular. Então, o que eles fizeram foi fazer o Webflow fazer algumas coisas, Cody não natural, coisas a dizer. Você não pode estar no menu de navegação porque ele nunca Sim, leia, pode entrar totalmente lá, mas eles estão apenas dizendo, bem, ninguém nunca quer isso. Então, vamos fazer com que isso não aconteça no local de trabalho. Então, saber que a empresa está na mesma posição, legal. Apenas faça isso. Eu posso simplesmente empurrá-lo. Agora, a outra coisa que vamos encontrar é que essas barras de navegação foram construídas um pouco diferente do tipo de melhores práticas dessa classe. Temos usado, como sempre o flex para fazer com que as coisas façam seu trabalho. Ok, e isso funciona totalmente, mas estamos usando o componente de outra pessoa e o componente mais antigo do Webflow. Não há nada de errado com a forma como eles o construíram. Eles acabaram de construir uma maneira diferente. Então, a maneira como eles fizeram isso neste caso em particular é que eu disse para o menu de navegação usando algo que fizemos, posição e relativo e absoluto. Uma coisa que não abordamos, ok, estamos ficando razoavelmente avançados aqui é que eles fizeram essa coisa chamada flutuação. Você encontrará alguns elementos que têm isso. Em vez de usar o flex para fazer com que ele empurre até as bordas ou a grade, eles usaram flutuador e ele flutuou para a esquerda e flutuou para a direita. Lá vamos nós. Então eu posso dizer, eu quero que você flutue para a direita e então eu quero que você assista isso. O botão de corte não me permite ajustar a bóia. Bem, diz que o flutuador não pode ser ajustado. Foi bloqueado para essa coisa em particular para que funcione. Então aí está. São muitos, então você não vai. E Rick, essa parte dela, vai acabar flutuando para o lado. Você pode fazer isso com o carrinho inteiro, mas não com o botão. Estranhamente, apenas as coisas que decidimos são do nosso melhor interesse. E aqui eu posso configurar isso para flutuar. Aqui vamos nós. Acho que gostaria de fazer esses vídeos porque às vezes consigo fazer cursos que parecem muito lógicos. Apenas faça isso. E então você vai para o mundo real e pensa, acho que o que eu quero que você faça é abraçar esses web designers. O Tricky Webflow torna tudo mais fácil, mas eles serão desafios e tudo isso faz parte disso. E embora seja muito frustrante quando não está funcionando, mas quando você entende , você fica tipo, Oh, espere por um gênio. Acho que é o takeaway and float. Dê uma olhada na inundação. A outra coisa estranha é que eu não tenho ideia do porquê. Vamos dar uma pequena olhada. A marca está lá, está lá. Há um menu Adicionar que está ali, carregado no botão de navegação direito. Eu sei que o menu de hambúrguer escondido é o gato. Por que o carro na frente disso? Eu não consigo resolver isso. Tudo o que sei é que se eu fizer isso, funciona. Isso é tudo que importa. Ok, dê uma olhada. Muitos desenvolvedores assistirão a esse vídeo e serão muito melhores em código do que eu. Dê uma olhada inspecionada. Eu sei nos comentários por que eu sei disso. Acabei de me debruçar sobre os mistérios do carro. Há coisas acontecendo que são incríveis. Eles e talvez tenham escapado de mim. Mas quero dizer, você realmente deveria ser, deveria ser o contrário e a pequena lista aqui. A outra coisa legal é que digamos que eu queira começar a usar o celular e dar uma olhada. Provavelmente faz sentido que o carro esteja no menu para estar lá. Mas quando você está no celular, parece estranho, parece que eles deveriam ser alternados e nós podemos fazer isso. Felizmente, o que o Webflow fez foi separar o menu. O menu é o que eu posso ver nesta página aqui. Esse é esse. Na versão móvel. Aí está o botão, mas olha o que eu posso colocar no meio. Nós lá vamos nós. Legal. Então eu fiz esse trabalho de outra forma. Quero que o cartão no botão fique acima de todos eles. Aqui vamos nós. Não faz muito sentido, mas eu posso ter o carrinho desse lado porque eles separam os menus lá e um gato lá. Podemos escolher o menu lá, o menu de hambúrguer nav ali. Podemos colar o algodão no meio para que possamos fazer algumas coisas legais e trocá-lo para levar isso capturado no celular um pouco mais longe no momento, desktop find big, posso ver tudo feito no celular. Ela está ficando apertada. Ok, então o que podemos fazer é o botão do carrinho possa ser ajustado dependendo do ponto de interrupção da tela. Então, o que podemos dizer é que existe o carrinho geral, o botão do carrinho e, na verdade, tem configurações diferentes aqui. Então, vamos cortar. Podemos fazer coisas do jeito que as coisas aparecem. Podemos abrir o carrinho, mas você pode ver que o botão do carrinho tem suas próprias configurações. E ainda podemos subir no carrinho. Mas aqui tem a opção de dizer a quantidade. Eu posso desligá-lo. Eu corro para me livrar da palavra gato? Eu tenho. Ele vai clicar aqui. E eu vou dizer que você não tem uma tela de nenhuma ainda no desktop, não no celular. Podemos fazer uma boa rodada, dar a ela o histórico até você. Você também pode dar uma olhada na maneira como outras pessoas lidaram com esses problemas K, porque você não será o primeiro. Vamos embora. E tipo, eu estou no drible, acho isso bom para interfaces web e de interface do usuário dribladas em particular, eu apenas digitei no carrinho de compras e fiquei tipo rolar, rolar, rolar e olhar para isso. Este site aqui trata disso tendo o corte em sua própria linha. Porque recebeu muitas informações. Eles têm uma grande barra de pesquisa. Eles decidiram usar esse tipo arquivo de cabeçalho de navegação de dois andares. Tem outro aqui. Foi, e não foi. Este não tem carrinho. É interessante ver como isso está funcionando. É apenas um visual, então seria bom realmente conferir um aplicativo real. Havia mais um. Esse aqui. Você pode ver o que eles fizeram foi ocupar esse canto superior direito e o menu se move para cá. A marca ficou sabendo que pode ficar presa aqui no meio nesta versão. Então você pode fazer algumas trocas. Meu conselho, porém, simplifique e tenha em sua própria linha, então você teria que se preocupar com isso agora. Tudo bem, é isso. Prometi que consertaríamos o Top Nav e aprendemos sobre flutuação e vimos web design é um problema divertido e solucionável logo após ser um problema frustrante e solucionável. Tudo bem, próximo vídeo. 112. Trabalhe com Dan para criar a loja de chá completa na Webflow Parte 1: Olá a todos. Vamos dar uma volta comigo, junto com o Dan. Estamos analisando muitos desses tópicos aqui de forma isolada, como fazer esses vídeos, ver uma coisa em particular, ok, e eles estão se afastando disso. Então, o que vamos fazer agora neste vídeo é que eu realmente vou construir isso, na verdade, vamos colocá-lo na tela. Tudo bem, então é isso. Essa é a maquete do Adobe XD. Eu usei o XD porque usamos o Figma. E acho que me perguntam muito, como qual devo usar? E eu fico feliz em usar qualquer um deles. Então, vamos criar uma versão para desktop, mas também uma versão móvel porque não fizemos tanto celular neste curso. E para esse cliente em particular, falso cego. E então, ele será usado principalmente em dispositivos móveis, mas só preciso mostrar as etapas, como precisamos primeiro usar o desktop, fluxo de trabalho e depois criar dispositivos móveis. Sim, e vou te mostrar meu processo. Então, como isso é menos um tutorial ou mais uma viagem, vou pagar um pouco de aluguel. Vou tentar narrar minha própria vida, o que é complicado. E vai ser longo. Então, por quanto tempo? Eu não tenho ideia. Vou adivinhar uma hora e 32 minutos. Você pode dedicar o tempo ao cFos de qualquer maneira, Nicholas? 45 min, 2 h, 3 h. E vai ser o que vai ser. E sim, ele vai te mostrar as partes onde eu fico preso e como eu conserto isso. Acho útil ver, mas você não precisa assistir isso. Eu te dou permissão para pular. Não vou abordar nada de novo. Basta reutilizar o que aprendemos no curso e no título juntos. Pode ser útil, lembre-se também que essa é a melhor maneira. A melhor maneira, dadas as habilidades que aprendemos no curso. Na minha opinião, eles podem ser uma maneira melhor de fazer algo totalmente correto. Deixe nos comentários se você sabe, tipo, Oh, por que ele não fez dessa maneira? E se você estiver assistindo isso leia os comentários também. Pode ser como, oh, assim que fizemos, porque estou fadado a ficar preso em algum lugar ao longo do caminho. Sim. Tudo bem, vamos entrar nisso. vejo lá dentro. Tudo bem, vamos começar pela manhã em que tomei meu café. Você nos diz pela manhã. Tive que ver aquele vídeo que acabei de gravar e esse é um pouco o meu rosto matinal. Ainda não estou acordando. Tudo bem, então vamos começar com esta é a maquete do XD. Como eu disse na introdução, vou ter que usar o desktop primeiro e depois trabalhar no celular. E eu vou te mostrar meu processo para isso. E não tem como, no momento, saber que você pode mudar para o celular primeiro no Webflow sem fazer alguns super hacks, certo? Navegação, vou começar com a navegação normal , como no componente. Vou fazer com que isso minhas ordens, porque adoro a mudança mais fácil para a navegação móvel. Tudo bem, vamos começar, vamos começar colorindo. E eu vou com frequência se a etiqueta parecer boa, ok, a barra de navegação é uma ótima aula. Vou simplesmente deixá-lo e vou deixá-lo flutuar, gerar o nome da classe. Peguei minhas cores do XD. Vou deixar uma cópia do arquivo XD se você quiser dar uma olhada, se você conhece o XD, mas não se preocupe se você não tem habilidades com XD ou Figma, você pode simplesmente criar no Webflow. Tudo bem, então a turma, eu vou resumir isso. Vou dizer alguns outros atalhos no começo aqui, apenas como um último lembrete. E então eu não vou fazer isso durante todo o curso porque uma hora ou o que quer que seja de atalhos vai enlouquecer. Ok, então Opção Alt, clique em, quando ele for para 12 e para baixo, exclua você. Essa vai ser essa cor. Eu vou usá-lo como uma cor global. Vou usar esse Scott T. E esse será o meu principal. Agora, dependendo se você está trabalhando para um designer ou se você é o designer. Você verá neste que, na verdade tenho uma palestra básica aqui, então alguns nomes. Ok, então este aqui é o principal três. Ok, então eu vou manter esse nome por toda parte, ok, e me referir a isso porque eu posso reutilizá-lo. Tudo bem, vamos pegar um logotipo. Então, aqui e faça o upload. Tenho alguns arquivos que tenho para todos os exportei do XD. Então eu passo rápido e vou e o encontro. Ok, e eu seleciono. E então eu pressionei Command D ou Control E em um PC. Ou você pode clicar com o botão direito do mouse aqui no painel Camadas e dizer Exportar selecionado. E eu acabei de escolher o SVG porque é escalável. Ok? Eu tenho alguns jpegs que vou usar. Meu filho entrou e os pegou e, na verdade acabou com dois logotipos, PNG e SVG. Eu vou usar o SVG. Por favor, venha no tamanho certo, o que é bom. Agora, eu gosto de fazer o texto alternativo, aqueles que eu conheço quando eu os coloco, caso contrário, eu nunca volto e faço isso. Então, eu não vou fazer isso no objeto, vou fazer isso no painel Ativos. Ok, então aqui eu vou dizer que este é o logotipo da Scott T. Ireland. Posso me ajudar com três e uma palavra-chave, e tenho certeza de que existem alguns Scott t por aí. Eu não verifiquei. Tudo bem Então, isso deve obter o texto alternativo. texto alternativo virá do ativo. Excelente. Agora, essa navegação está sendo construída com coisas como flutuação e não com grade ou movimentos. Então, existem maneiras diferentes, como em vez de tentar obter grades, ótimo, você pode colocá-lo preso no prédio das barras do meio e eu mesmo, eu definitivamente construí em grade, mas eu não fiz, então eu Eu só vou ser barato. Use a classe que virá de talvez a marca. Ok, e eu vou dizer apenas mostrando a parte superior, por favor. E bom o suficiente. Ok. Na verdade, não é bom o suficiente. Vamos pegar isso. Para baixo. Lá vamos nós. Então, no momento, acho que os botões estão do tamanho disso. Se você se livrar deles, a coisa desmorona. Como se não tivesse entrado em colapso. British mostra os botões que o mantêm do tamanho. Ou talvez o menu de navegação, o que é bom para mim. E eu vou me livrar de um deles. Vou renomear got browse home e navegar t. Honestidade. E vou estilizar esses botões, na verdade, em vez de vendê-los, vou colocar minha etiqueta corporal porque os botões usam essa fonte chamada inter. Ok, e eu uso enter como texto do meu parágrafo aqui. Então, Enter e eu temos esse chamado Mac Tick Nomadic. Então, vou ao caso do Google Fonts. Vou instalá-los para o curso. Configurações do projeto. Vou acessar as fontes no IFA, e vou encontrá-las. Ok, eu uso regular e ousado no meu design. Eu sei porque eu verifiquei. Você pode verificar seus designs. Ok. E eu não quero outro chamado MA. Há apenas uma métrica em negrito. Acho que só quero a ousadia. Tudo bem, então esses são os m2. Vou voltar para o designer e configurar minha etiqueta corporal. Etiqueta corporal. Vou dizer tudo, tudo neste site será uma fonte desse enter. Ok, e meu tamanho de fonte padrão está procurando o 116 mais genérico. Esses, Ele também tem 16 anos. Coisa perfeita para a altura da linha. E, na verdade, devemos usar rems divididos por 16 REM cope. Então, um quarto. Aí está você. Ok, e este aqui, eu vou usar o que nada disso tem significa que normalmente será um do que quer que seja, isso é 20 pixels. Fazer aquele neste hífen significa apenas que será um de tudo o que for. Então, minha altura será de um quarto. Às vezes é 1,11, 0,20, 0,9. É como uma porcentagem do que quer que seja. Então, vou começar com um e ver como vamos. Você pode ver que está meio que funcionando aqui. E eu vou deixar a cor padrão como eu acho que a cor padrão em. Vamos dar uma olhada. No Webflow é como um cinza esbranquiçado, cinza esfarrapado, apenas um cinza mais claro, cinza ardósia. Vou fazer com que seja preto sólido porque é isso que o design diz e eu faço o que o designer diz. Tudo bem, e isso é bom o suficiente por enquanto. E vamos dar uma olhada nesses botões. Então, esses são links de navegação no menu de navegação. O que vou fazer é criar, não vou criar não vou criar uma classe de botão porque o botão, o botão genérico, é essa coisa aqui, essas aqui, tão únicas quanto de manhã você usa apenas lá. Eu não os uso em nenhum outro lugar do design que eu possa ver. Então, o que eu vou fazer é deixar o botão porque é um nome muito bom para uma classe. E vou chamar isso de um pouco mais específico. E esses caras não compartilham basicamente nada que seja maiúsculo, eu acho. E eu vou ter duas aulas, eu decidi. Ok, então este será separado do que vou criar mais tarde chamado botão. Tudo bem, então haverá navegação, botão, navegação, a coisa, a coisa e a coisa que é um pouco mais específica. Tudo bem, e eu vou dizer que você é branco. Excelente. Agora eu vou dizer que vocês são todos capitais. Porque metade dos homens capitais e isso meio que é bom porque digamos que o cliente trabalhará no site. Isso significa que eles não podem colocar letras minúsculas e errar no meu design. Então, quando eu adicioná-lo aqui, vamos usar o Command Enter ou Control Enter. Vou digitar o botão. Um, significa que ele o força a ficar em maiúsculas. Tudo bem, outras coisas, está claro o que é bom. Há muito mais espaço aqui. Então, o que eu gosto de fazer é espaçá-las como M. Se você clicar em algo e manter pressionada a tecla Option em um Mac, tecla alt em um PC, e você passar o mouse sobre algo, você vê que é 67. Então, metade disso é 30 ou 33, 33. Então, vou garantir que esse preenchimento de 33 botões de navegação tenha algum espaçamento de 20. Vou fazer 33 em ambos os lados. E eu estou apenas de olho nisso, como aqui no XD ou meio que o comando um chega a 100% e eu meio que os alinho pela metade. Não é perfeito, mas você pode ver se eu alternar entre os dois, eu posso meio que chegar perto disso. E se você está pensando, como ele me disse entre isso em um Mac, você pressiona a tecla Command e toca em um PC, é diferente. Acho que é a guia de controle ou a tecla Control Shift. Experimente alguns deles. Talvez você precise pesquisar no Google, por exemplo, como alternar entre aplicativos abertos em um PC ou Mac, é a guia Command. Eu faço muito isso entre o XD e às vezes ficamos confusos. Qual deles então? Tudo bem, então vamos adicionar esse carrinho. Agora. Fizemos isso anteriormente, quando tivemos alguns problemas, mas sabemos como corrigi-los agora, a primeira coisa é se eu adicionar. Não está lá. Por que você não está aí? Eu posso ver o CMS, mas aqui é normalmente onde estão as coisas do comércio eletrônico. Isso mesmo. Precisamos converter isso em um site de comércio eletrônico. Vai me dar duas coleções. Vamos fazer isso. Agora, novamente, isso é gratuito, você pode ir muito longe com o comércio eletrônico sem precisar pagar por ele, configurá-lo para pagamento, mas podemos prepará-lo para o cliente com antecedência. Vou fechar a decepção porque eu queria que ela fizesse era ativar essas coisas. Olá, e para cortar. Vamos te levar até lá. O membro pode entrar aqui, mas pode ir aqui. Não posso entrar lá. Oh, por que quando você entra? Oh, eu entendo isso o tempo todo. Acho que toda vez que eu pego. Agarrei o botão Adicionar ao carrinho em vez do carrinho. No botão do carrinho, parece muito parecido. Tudo bem, as coisas estranhas do layout. Vamos estilizá-lo. Vamos colocá-lo realmente no lugar certo primeiro. Então, nós meio que nos exercitamos antes disso. Se eu pego esse botão do carrinho ou consigo me lembrar, vamos para a posição. Nós podemos flutuá-lo. Então você não pode fazer isso com o botão, mas acho que você pode fazer isso com o carrinho. Você pode, nós podemos flutuá-lo. Portanto, não fizemos muita fluidez neste curso, mas essa navegação foi construída com flutuadores. Então, teremos que usar o que eles fizeram. Então eu vou flutuar para a direita. Eu vou colocá-lo do outro lado que eu faço. O que neste caso significa na frente do menu. Maconha. Olá **. Então, vamos estilizá-lo agora, e vamos ver algumas coisas agora, no meu artigo aqui, Não há número. Talvez eu volte. Os clientes dizem: você quer o número do carrinho? Eles simplesmente podem não ter pensado nisso. Mas digamos que a quantidade cortada precisa ser desativada. Você pode ocultá-lo porque é uma opção. Mas acho que com o carrinho, você pode, na verdade, simplesmente, é uma das opções nas configurações. Então, eu selecionei o gato e me escondo quando o carrinho está vazio e só aparece quando está sendo usado ou com direitos autorais. E vamos dar uma olhada na compra do carrinho. Agora, eu poderia estilizá-lo para que fosse K maiúsculo. Então isso é maiúsculo aqui e não está aqui. Na verdade, basta desligá-lo. Ok, eu só vou escrever uma carta porque ninguém vai mudar isso. Não vou torná-lo editável para o cliente. Pode digitá-lo em maiúsculas. Alguma outra coisa? Vou ter que brincar com essa altura e essa cor. Então, temos que adicionar outra cor. Então, vamos fazer isso primeiro. Então eu uso meu iPhone no teclado, uso meu conta-gotas. Ok, Rick, meu design. Mas esse é o código. Não estão lá. Ok. Então eu quero dizer você botão por cartão. Ok. Não vou adicionar o nome do estilo porque há um nome Goodstein aqui chamado botão Cortar. E quando eu criá-lo, ok, eu vou dizer plano de fundo. Vai ser digitado aqui. Eu posso ver que ele criou a classe com base no tipo de largura do pé que o flutuador pensava que seria. O que é realmente muito útil aqui. E eu vou editar para ser uma classe global. E esse vai ser meu secundário S T. E esse também foi o terceiro. Clique em Criar. Agora eu preciso brincar com o estofamento. Eu vou fazer o mesmo de antes. Vamos fazer o espaçamento. E foram 33. Mantenha pressionada a tecla de opção, tecla alt em um Mac para obter os dois lados 33, a parte superior e inferior, vou apenas combinar o que está na linha deles. Bom. bem, tudo está meio alinhado e então você só precisa criar um pouquinho. Tudo bem, olhando. Ok, agora vamos ver o quanto isso vai mal via celular. Mas eu costumo fazer um pedaço como uma seção e depois verificar se é como uma seção e depois verificar se uma bola lunar em vez de fazer a coisa toda e depois ter que voltar e fazer isso. Ok. Então, os dedos do tablet cruzaram todo mundo? Sim. Acho que não há espaço suficiente para que ele não precise mudar para o celular no tablet. Ok, então eu vou manter os botões abertos. Então, o que você faz é clicar em E e F, e há algumas opções nas configurações para dizer isso aqui. Mantenha o ícone do menu, como ativá-lo no cenário do telefone para mim. Deveria estar lá por tablet e nada aqui ligado, deveria estar aqui assim. Perfeito. A única coisa é que, quando eu chegar até aqui, vou verificar se eles não estão quebrados nesses. Eu sei que para esse cliente em particular existe um cliente fictício, mas o que importa em primeiro lugar é que algumas coisas estão aqui embaixo. Parece bom, parece bom, mas deveria ser branco e precisa ficar menor. Ok, então para fazer isso aqui embaixo, eu tenho que fazer onde eu quiser fazer o menu de hambúrgueres. Eu tenho que fazer isso primeiro. Sempre que aparece, não posso fazer isso em retrato e paisagem porque ele flutua para baixo. Lembre-se de que, se isso acontecer aqui, os ícones são engraçados e alguns ícones são listas, como imagens, e você os estiliza antes que eles apareçam. Mas esse ícone em particular, você pode começar com a cor da fonte, o que é incrível. Ok, então os ícones não são caninos, vou chamá-lo de menu Icon Burger. Porque, do meu lado, fiquei com mais de um ícone. E você pode começar com a fonte. Então, topografia e escolha branco. O que eu também vou fazer é me livrar da palavra carrinho nesse nível. Ok, então vou dizer que Cart Add é finito. Tablet hot, porém, vou dizer que você não tem nenhum layout de tela. E espero que agora no celular exista um. Estou usando o um-dois-três na parte superior do meu teclado, 121234. Tudo bem, é como se eu jogasse com o espaçamento. Novamente, eu tenho que jogar com ele às três, que é meu cenário móvel, só precisa ser um pouco menor. Então, este aqui é um macacão. É que não me diz que é tamanho real 0, 18 de cada lado. Ok. Então, vou ver se consigo fazer isso no momento em 2032. Então, nesse caso, vou fazer 18 de cada lado. Sim. Mas essa coisa que ele está meio que na borda é um pouco de acolchoamento desse lado. Então, eu meio que vou me livrar disso. E não é a mesma coisa. Esse aqui parece ótimo. Eles são apenas que tudo é um pouco diferente, como se os ícones tivessem alturas diferentes. E então, às vezes, falta um pouco de atenção. Na verdade, vamos aumentar isso para que pareça quadrado. E precisa ser um pouco mais alto. 123.4 para aquele que mais me preocupa. Tudo bem, então a navegação está quase terminada. Vamos clicar aqui e ir, você abre, mostre, por favor. E altura. Sim, vamos fazer isso. Então, o que eu vou fazer é dizer que você vai ser um design, não tem isso nele. Então você tem que tomar algumas decisões executivas. Vai ser verde, ia ser marrom. Outra cor, botão nav. Ainda é o mesmo botão de navegação, que é interessante, como se o botão nervo estivesse aqui. Mas quando se trata dessa opção, ela é meio redesenhada e outro estilo é aplicado a ela. E eu tenho que fazer isso com a versão paisagem porque é quando ela aparece pela primeira vez. Ok, então você mostra e você estará nesta versão, cor de fundo daquela. Ok, talvez o que façamos? Nós fazemos você da mesma cor. Cor. Cor. Excelente. Talvez continue assim. Quando cai. Tudo bem, comande Shift P, Control Shift P e dê um clique. Agora estou relutante agora dois e deixo lá porque quero verificar no meu celular. Porque verificando isso na tela. Sim. É um direito no seu desktop aqui, mas é melhor verificar no seu celular. Então, eu vou publicá-lo. Abra-o em um navegador. Agora lembre-se, isso pode não ser verdade para todos. Você pode simplesmente digitar isso no seu telefone. Gosto de usar essa opção e enviar para meus dispositivos. E eu posso me conectar ao meu telefone do Google. E só aparece aqui. É muito fofo. Parece bom. Os botões parecem grandes o suficiente. Teremos que verificar isso com o Google para ver se o Google concorda com o tamanho do botão, ok? Ok, acessibilidade das galinhas. Mas está parecendo bom. Mas uma coisa no telefone é que você consegue ver aquela pequena linha? E é isso. Ok, então eu vou embora, deixe tudo um pouco coberto. Tudo bem, muito bom. No celular. Vamos passar para a próxima parte. Então, vamos dar uma olhada no que é isso? Há uma caixa de heróis aqui. Olhando a hora também. Isso vai demorar muito mais do que eu pensava, não é? Você já sabe que não, você não me diz. Ok, vamos entrar em nossa seção e trabalhar primeiro nessa imagem de fundo. Ok, então eu vou te dizer, vamos adicionar nosso contêiner para tudo isso, basicamente todo o resto dos sites em um contêiner em todas essas páginas. Então, que tipo de fazer isso? Basta verificar. Existe alguma coisa que sai do contêiner. Então eu posso fazer isso clicando aqui, Comando ou Controle E. Eu vou para seção, comando ou ajuste ou Control Return isso na última vez que prometo que Janice será minha seção aqui. Na verdade, eu queria contê-lo e seções i e u podem entrar. Vou colocar uma altura mínima apenas para segurar muito, só para ter algo para ver minha imagem de fundo. Ok, vamos dar uma olhada. Então, a imagem de fundo, se eu olhar aqui, é que estou relutante em retirá-la porque na verdade é uma imagem maior. E eu quero um pouco mais para os diferentes tamanhos, porque você sabe que quando redimensionamos isso, ele fica quente, maior e menor dependendo da largura do navegador. Então, mesmo que seja provável, eu provavelmente iria bater um pouco na parte superior e inferior porque há alguns pixels extras que eu provavelmente não vou precisar. E isso vai ser um arquivo grande. Mas, no momento, eu vou ver, apenas ver como isso vai acontecer. Então, a imagem de fundo é o que eu quero fazer. Então, na seção aqui, eu selecionei isso, fundo e imagem de desculpa. Aquele. Vou fazer com que cubra. E eu provavelmente vou do centro em vez do canto superior esquerdo. Meio que combina com o que eu fiz nele. A próxima coisa é colocar isso por cima. Não me lembro da parte anterior do curso, acrescentei que há duas maneiras de fazer isso. Você pode clicar em todos os botões. Você pode adicionar um segundo bloco de cor por cima ou adicionar o efeito. Há um filtro chamado sombra, desculpe, brilho, e você pode diminuir o brilho. Vou apenas adicionar duas imagens de fundo. Mas, na verdade, isso será uma sobreposição de fundo. E você pode ver a diferença é que este é meio que um tom esverdeado. Essas coisas vão te surpreender se você não for o designer. Eu sei porque fiz com que não fosse preto ou o melhor tom comercial. Vou pegar você e vou ver a opacidade. Você vê que é 80 por cento. Isso é o que eu vou fazer. Eu vou até você e dizer, você é a cor dessa. E você vai ser 80 por cento disso e isso deve corresponder muito bem. Olha, vamos ver. Sim, incrível. Ok. Eu preciso empurrá-lo um pouco para baixo do topo. Então eu vou fazer isso para assistir. Vou fazer isso na seção ou o contêiner acontece no contêiner. Eles estão lá dentro. E eu sou móvel. Meio que acontece. Sim. Parece que se repete o suficiente para que eu faça isso no contêiner. Então, na verdade, não, eu vou fazer isso com o Eu não sou isso, vou fazer isso na seção aqui. Não, janela para o contêiner. Um contêiner terá um contêiner. Eu não vou fazer todos os recipientes porque eu uso que vou usar o recipiente algumas outras vezes. Haverá um estofamento na parte superior. Na verdade, sei que queremos, acho que uma ideia melhor que faremos é criar uma classe global. Ok, então vamos dizer que vou apenas adicionar uma tag div e criar uma classe de margem global. Haverá margem, além de tudo, lembre-se de que eu tenho excesso, Sam e Sam. Ok, há médio, grande, extra grande. Agora, muitas vezes, quando estou fazendo um trabalho, tenho que escrevê-las na minha frente. O que eu decidi sobre excesso são oito pixels, m, o pequeno é 16, depois recebe 24, 30 a 40. Eu posso, não sei por que eles não vão ficar na minha cabeça. Então eu os escrevo em um post-it, na minha frente, aqui. Ok. Então, eu tenho isso por aí de um emprego antigo, publique a nota e vou adivinhar que preciso. Vou adivinhar que estou no XD. E você usa isso, eu vou manter pressionada a tecla Option e ela diz 20. Então, vou tentar me manter consistente, como o designer me ouviu escolher a geminação porque parecia boa. Vou escolher 24 para que eu seja consistente com minhas fontes e meu espaçamento. Então, vou usar 24, que é meu meio. Então, no XD, desculpe, no Webflow aqui eu vou dizer que você é uma margem no topo. Você vai ser médio. E o espaçamento será uma margem no topo desses 24. Espero que o designer não perceba que não estamos em 2024. Exclua o contêiner U, ele terá uma classe de vazio. Ok? Então imagine resistente e o médio significa que eu posso reutilizar esse top médio provavelmente teria que criá-lo . Você pode estar em um ponto. Agora vamos continuar, vou fazer o excesso e o pequeno e médio, grande. Eu acho que toda vez que eu os faço como se eu fosse fazer isso corretamente, eu vou colocá-los todos dentro. Então eu só vou usar dois. E nos trabalhos em que eu preciso disso, eu não faço. Vou usar cada um deles. Faça-os individualmente. É como a lei de Murphy. Tudo bem, então vamos tocar neles. Eles têm que dar uma olhada. Então eu preciso dividir isso em duas partes. Há algumas maneiras de eu fazer isso. Pode usar colunas, poderia usar flex. Vou usar o grid porque é incrível. Eu poderia converter o herói da seção uma grade aqui ou na grade de layout. E isso é totalmente funcional. Eu gosto de tê-lo separadamente. Eu pela minha própria sanidade. Isso torna mais fácil encontrar a grade e clicar nela, em vez de tentar descobrir qual pai tem uma ótima aplicação nela. E sou só eu. Ok, então eu preciso de duas colunas, uma linha, duas colunas, uma linha. E o espaçamento eu vou mexer, mas tentando descobrir algo, provavelmente vai estar em algum lugar entre os saltos, mas você pode realmente digitá-lo como, digamos que isso é demais muito e 0,25 não são suficientes. Você pode simplesmente dizer que eu não quero ser 0,35. Só quis dizer que é tipo, sim, são frações. Mas nem todos precisam ser iguais a um, só vale tudo para preencher a lacuna. Isso é apenas preencher o resto. Ok, então 0,35 parece estar certo. Vamos jogar a imagem. E, novamente, com essa imagem, eu poderia exportar isso do XD já recortado, isso funcionaria totalmente. Eu prefiro colocá-lo e depois cortá-lo, colocar uma borda ao redor que seja circular. Ou reutilização. Essa imagem significa que ela só tem o carregamento e o site uma vez. Também me dá um pouco mais de flexibilidade. Não há nada real que você não precise, basta trazer a imagem já recortada. Ok, então eu vou arrastar a imagem. E se você arrastar a imagem para dentro dela, presume que você colocou a tag da imagem no elemento da imagem. Vou colocar meu texto alternativo aqui. Eu vou dizer, você vai ser um ouriço fofo enrolado em uma tigela. Saiba, você vai ser. Chá de jasmim sendo preparado em uma xícara de vidro. Acho que gosto disso, não é? E eu vou fazer de que tamanho é? São 175 por 175 imagens. Não quero que isso seja responsivo, então não vou usar a altura mínima. Não vai ficar maior porque eu não vou colocar mais continente. Então 12.5175, está tudo distorcido até eu ter uma cobertura adequada. Vamos adicionar uma borda. Fronteira do Brasil. Sempre escolha como um número baixo. Não sei por que sou mesquinha com os pixels. Não custa mais colocar 1.000 e não sei por quê. Tudo bem, é mais ou menos isso. O espaçamento precisa ser resolvido. Mas o legal da grade, que é facilmente clicável, você pode dizer que eu quero todas elas no centro. No centro, tudo bem. Você percebe como é semelhante a uma grade? Bem, não está fazendo altos e baixos. É porque a rede pára aí. Você pode ver a linha azul? O pai é maior, mas o pai não passa suas medidas para a grade que está dentro dele. Ele faz o que quer. Então eu vou fazer é ir para a seção herói, encontrar o tamanho, livrar-se dele segurando Option ou Alt click. E eu vou usar o Grid. Você pode ter a altura mínima de 300. Então a grade sabe qual é a altura. Então, ele sabe que pode se alinhar no centro. Não está longe. Vamos colocar tudo dentro e depois perderei o espaçamento. Então, vamos pegar isso, esse e esse lindo T. Vai ser minha batida, vai ser minha batida. Acabei de dar uma olhada em uma delas. Isso meio que deve ser um deles nesta página , o que é um problema. E eu sou inconsistente com a minha opinião de que provavelmente é um design ruim. Ok. Mas eu gosto, essa é legal. E vou usar esse tipo de acesso mais informativo, provavelmente com mais frequência nesse site. Agora meu site é muito pequeno , tem apenas três páginas. Seu site vai ser muito maior. E eu sei que esse será o genérico mais utilizável. Então, o que eu vou fazer é estilizar todos os H para serem mais assim, porque eu sei que o branco sobre o preto só vai usar isso uma vez na página do herói. Eu vou usar isso muito mais. Então, o que eu acabo fazendo é meio que pensar em uma coisa oculta. Vou te contar primeiro e depois fazer uma pequena classe combinada de exceção especial para torná-la branca. Vou colocar minha batida em Skid It. Vou simplesmente colocá-lo aqui embaixo. Batendo bem. E eu vou dizer que você é um H1. Já é a fonte certa. Em termos de tamanho. Vamos dar uma olhada. Você vai ter 51 anos. Aleatório. O designer fica com o que o designer quer. Ok? Eu vou dizer todos os H, que você vai esquecer de fazer cargas, ok, você não precisa voltar e dizer que eu quero que seja 51, eu não quero ser rampas, então vamos usar 16/16 RAM. E, como antes, é fácil usar apenas um hífen e será um. A altura da linha será de 3.187 fuzileiros navais. Tudo bem, e será a cor dos meus três principais e qualquer outra coisa que tenha? altura da linha está bem próxima. Ok. Sentiremos falta do mesmo. E não há outras coisas acontecendo. Não está em maiúsculas. Então eu acho que isso é o suficiente. Então esse é o meu bom genérico, como o estoque H1. Ok, então eu vou usar você agora aqui, mas este vai ter uma classe aplicada a ele chamada ticks white. Porque eu também posso reutilizar algumas vezes. Você vai ser branco. 113. Trabalhe com Dan para criar a loja de chá completa no Webflow Parte 2: E é tudo o que a turma precisa que os brancos façam. Tudo bem, o próximo é esse aqui. E, novamente, estou dando uma olhada para ver se ele está sendo reutilizado. É meio que meu H2. É meu sucesso em várias páginas. Então, novamente, esse é o mais utilizável, como eu estou usando, eles estão lá na página de checkout. Então esse é o meu padrão, H1, H2. E então eu vou adicionar os carrapatos brancos aqui em cima porque é um pouco mais exclusivo aqui. mesma coisa. Eu vou dizer que você vai ser H2 e você vai ser essa fonte, um médico. termos de tamanho. Olha, você é 434-34-3403, ousado. Tudo bem. Você 43. 43 também? Bom designer Dan. Ok. Então, eu vou dizer que você é ousado e você tem 43 barras e 16 aros, e você vai ter a altura da linha de um hífen. E você é essa fonte, ok, essa cor aqui. O que faz esse? O que é isso aqui nos meus estilos? Ou nem está lá? Essa é uma pergunta desse designer, porque já usamos essa. Talvez esse não pareça certo. É o cinza mais quente. Então esse se chama St. Grey 700 gy. É difícil chamá-los de 12345. Você pode, muitas vezes, usar esse mesmo estilo de fonte. Lembre-se, isso foi meio ousado e leve. É meio comum usá-lo para cores também. Tudo bem, então você vai ser a cor de oh, ok, eu preciso pensar o que eu fiz? A outra coisa a fazer é verificar isso porque eu notei isso. Você pode ver que o código é hash 575 e este aqui tem hash um a. Você tem que ir falar com o designer como, ei, bem, qual deles você quer? Vou escolher esse porque sou o designer que fez isso. Eu vou escolher essa data. Então, vamos voltar ao Webflow. E eu vou dizer acertar dois ou danificar o errado de propósito para tentar te mostrar o que não fazer. Então lembre-se, precisávamos de todo o H2O. Você provavelmente está apontando para uma pois está fazendo algo errado, está fazendo errado. Então, vamos adicionar uma cor rapidamente porque eu a tenho na minha prancheta. Ok. Perfeito. Agora eu vou pegar o nome. Não me lembro o que era. De volta para você. E você vai ser quando alternar entre os dois, meio que perde. Essa é minha desculpa de qualquer maneira. Então, vou editar como uma classe global. Eu vou dar um nome a ele. Vou clicar em Criar na extrema direita, está lá. Tem a cor certa. Agora. H dois para todos eles vai ser um médico e vai ser 43/16 quartos. 16 quartos. E será um hífen. Tudo bem, então está lá. Eu vou somar isso. Isso vai quebrar o pescoço dele. Sabemos que se eu adicionasse aqui porque é uma grade onde a grade vai funcionar, ela vai funcionar, Ei, tenho uma coisa nova, ela precisa entrar em sua nova caixa. Então, o que eu vou fazer é pegar aqui, eu vou me tornar aditivo. blocos div estarão neste. O aquecimento vai ficar dentro daquele e bater forte. É complicado fazer isso na página, vamos fazer isso aqui. Então, os carrapatos brancos estarão dentro dele. E depois dentro dele. Aqui vamos nós. Coats, eles bloquearam uma unidade para que ela não caísse em outra célula. E esse aquecimento também, vou adicionar uma classe chamada classes de reutilização de texto. Bom. Está em: Primeiro de tudo, vamos colocá-los alinhados à esquerda. Então, vamos entrar no, eu quero pegar o filho da grade, que é essa coisa chamada diblock aqui. E vou fazer com que ele faça o que quiser. As aparências estejam no centro. Mas esses caras devem ficar alinhados e é meio mágico. Não se aplicava uma classe a ela. Para fazer isso, você assume que uma classe será gerada porque funciona para muitas coisas. Mas o maior, um pouco diferente, ok, não é realmente aplicado ao elemento em si, é à grade. Tudo bem, vamos adicionar nosso botão. Tudo bem, seu botão k, você. Novamente, o botão é como aqui em cima. Esse é o botão mais reutilizável. Então, esse será outro botão exclusivo e eu farei desse meu botão genérico. Então, isso só vai ser chamado herói do botão, alguma coisa. Você, ok, eu vou vinculá-lo a nada no momento. Isso me lembra. Há muitas coisas do tipo, opa, eu fiz isso? A marca precisa se vincular a. E onde estão minhas configurações de navegação suspensa, configurações de links, vou dizer para ir para a página disso. Antes que eu esqueça. Portanto, esse botão aqui terá um ClassName, todos os botões aqui. O botão aqui vai fazer algumas coisas. Não terá antecedentes de nenhum. Nenhuma. Ele terá uma topografia de todos os outros. Vai dizer Browse t. Vai ter muito mais preenchimento. Ok, então, quão grande é? Clique na opção de manter pressionada. Então você pode ver que não é igual a cúbico, então cerca de 27 por 16. Vamos fazer isso. É necessário um espaçamento para manter pressionada a tecla Alt ou Option 27ª, observe a camada errada, que é 16 na parte superior. 16,27. Tudo bem? Tudo bem, tamanho. Vamos adicionar uma borda ao redor da borda externa do quê? Aqui está um golpe de dois. Você não precisa de um raio, precisa de uma largura de dois e precisa ser branco. Alterne, verifique se há 100% de ativado, alternado, alternado, alternado. Isso é ousado. Isso não é ousado. Esse botão, herói, vai ter tipografia. Você vai ser ousado. tamanho da fonte é 16. Meu padrão é 16, que é um aro. Agora estamos cozinhando. Tudo bem, então vamos adicionar alguns textos e obter o espaçamento correto. Tão lindo T na sua porta. Por padrão, o espaçamento é estranho, como o H, tem algum espaçamento. Como o que está criando todo esse espaço lá dentro. E eu vou usar a opção X-Ray, posso usar o atalho a partir de agora. Ok, então, no meu caso, o Command Shift X será o Control Shift X. É útil passar e dizer, eu sou, o H1 tem um pedaço na parte superior e um pedaço de margem na parte inferior. Ok. mesmo com o H2. Tem um pedaço lá. O que eu gosto de fazer é me livrar disso logo no início do trabalho, ok? E só para dizer que todos os H têm zero, você pode inserir, você não pode reiniciá-lo. Você tem que substituí-lo porque, por padrão, é 20 por dez. Então você tem que digitar 00. O mesmo com este. Você vai ser tudo h dois vai ser zero. Por euro. Vá. Eu prefiro ter isso e não ter nada e me editar. Então, como vamos resolver isso? Você pode adicionar preenchimento na parte inferior deste ou eu farei isso. E em vez de criar um custo específico para essa, vou criar mais algumas classes globais, como classes de margem, e eu poderia reutilizar k. Então, na margem inferior. E quanta lacuna não existe? É um pouco complicado com essa fonte porque você pode ver que ela tem uma versão parecida com a maiúscula dela. Você pode ver que é como se nem fosse o gelo, como se a tampa estivesse bem alta nela. É uma fonte estranha. Ok, então meu espaçamento vai deixá-lo um pouco estranho neste caso, mas vamos, por exemplo, retângulo. Às vezes é como pegar um retângulo para fazer isso. E eu estou olhando para cá. Portanto, a altura é 14. E olhando para minha pequena lista, 16 é provavelmente o mais próximo. Vou fazer os dois pixels de 8,16 pixels para a parte inferior. E então eu posso decidir, porque você pode ver lá mesmo que os dois estejam em zero, os dois tenham tamanhos diferentes um do outro. Porque este está permitindo algum espaço para os descendentes. Quando eu digo decente é como, você pode ver isso pendurado no fundo? Então, na verdade, está muito perto, mas a fonte é um pouco maior. Então, há uma sorte de que esse aqui não tenha descendentes. Ok, gostaríamos de observar que meu nome, Daniel Walter Scott, não tem descendentes, o que facilita a volta em linha. Fato sobre a largura. Então, agora vou adicionar uma classe div e vou dizer que você é margin-bottom e eu vou fazer excesso, excesso. Agora, para mim, um dos meus grandes problemas é agora eu ir e fazer isso. Observe que desapareceu. Você tem que pressionar Enter, a margem inferior x existe. Pressione Enter, e este vai ser muito pequeno, vai ser oito. Ok? Agora eu vou removê-lo. Ainda está lá, mas na margem inferior, pequeno. E eu vou fazer alguma coisa. Você também deve prosseguir e fazer o resto deles. Então, você estará na margem inferior. Provavelmente só quereremos ser pequenos. E esse provavelmente será o maior. Margin-bottom, pequeno. Eu faço meu pequeno, como eu o chamei? Sim. Está perto o suficiente. Eu realmente não quero que seja um pouquinho diferente, novamente, porque o cliente pode voltar e dizer, estamos usando ou não usando beautiful, estamos usando Beautiful. Ok, e então eu vou ter que mexer com o espaçamento novamente. O momento. Respire fundo e deixe assim. Vamos dar uma olhada. E se você comprar um design para mim, provavelmente ele terá retângulos por todo o lado porque eu esqueci de removê-los. Alguém mais fez isso? Use os retângulos como ferramenta de espaçamento. Tudo bem, está tudo bem. Como isso realmente precisa ser? Precisa ser três por três, eu acabei de adivinhar 300. Então, vamos dar uma olhada na seção de heróis. Na verdade. Não, é a grade que está dando a altura. Você pode estar lá. Tudo bem, vamos fazer isso, ok? Isso, porque esse não é um lugar estranho. Como colocamos as coisas em lugares estranhos? Você se lembra? Você entendeu. Vamos colocar uma posição que não consigo lembrar ou é um eco da posição absoluta do meu cérebro. Isso é bom, uh, para onde vai? Realmente não importa, mas vou ter cuidado onde o coloco porque quero que ele se refira. Se eu colocá-lo aqui e movê-lo no celular, quando eu mover e embaralhar essas coisas, ele vai acabar no lugar errado. Então, eu quero que basicamente ele precise ficar acima disso. Esse é o objetivo dele acima disso e sair pelo lugar, vou colocá-lo logo acima disso, para vou colocá-lo logo acima disso, que estejamos logo abaixo disso na ordem de empilhamento aqui para que onde quer que esteja, onde os movimentos para esse cara virão com eles. Isso faz sentido. Então, novamente, imagem, vou para meus ativos. Vou arrastá-lo em dois para baixo do meu, que está acima dos hereges. E eu vou, isso é decorativo ou é algo interessante? Acho que pode ser algo como não ser abstrato, é algo específico. Então, vamos usar folha de chá. O gráfico da folha, ou ilustração da folha de chá, pode ser NF1, como se fosse meio decorativo, mas ajudou a descrever a página. Sim, tudo bem, então você, meu amigo, vai ter uma aula chamada imagem, imagem fria. E eu vou dizer que a posição é absoluta. Lembre-se de que sempre que algo é absoluto, o caso dos camundongos pais, essa coisa chamada diblock, precisa ser definida como relativa em apuros com isso, pois é dado a ela um diblock clássico. Vou usar muito o bloco. Então eu vou chamar isso de div, hero wrap up. Ok, e aplique em relação a eles. Eu poderia deixá-la entrar se eu a usar, porque parentes não vão fazer muito com muitas tags div. Eu sou, eu só reutilizo e chamo isso. Como se chamava? Desbloquear. Ei, eu posso renomeá-lo mais tarde. Você vai se relacionar com seus pais, ok? Eu vou dizer que você é. Você pode clicar neles para ver o que ele fará. Posso te levar aonde você precisa estar. Você pode ver que está pulando dentro dos pais. Ok. O que eu vou apenas jogar com todos eles. Ok. E, na verdade, vou embora. Você disse a eles que cumprissem minhas ordens. pouco mais de um pouco. Tudo bem, eu gosto. Ok, então a próxima coisa é, eu vou, eu vou para aquele espaçamento lá. Lembre-se, podemos ir até a grade. Na verdade, é muito bom. Como se não pudéssemos ir até a grade e abri-la um pouco. Eu posso medir isso porque você pode ver a imagem aqui? Se eu medir daqui até aqui, posso realmente digitar isso aqui. Então, basta olhar um pouco para contar a alguém. Bom o suficiente para mim. Eu sei que é para ser um pouco maior. Podemos executar isso por um longo tempo. Eu provavelmente vou. Tudo bem, agora, vamos ver o quão ruim isso acontece no celular. Há um pouco de cruzamento dos dedos das mãos e dos pés para ver se tudo desmorona. Tudo bem, 234. Ok, então o que eu vou fazer, eu vou aqui apenas empurrar isso sobre a cruz. Então, isso é fácil de resolver. Posso dizer que no tablet você vou ter apenas um tamanho diferente. Eles estão prontos. Bom o suficiente. Essa aqui, paisagem móvel. Oh, minha culpa. Talvez eu diminua a imagem. Ok, então em você, você vai segurar Shift down arrow 150 parece bom. E quando você chega a esse tamanho, você tem que dar como se não fosse nenhum celular tem exatamente o tamanho. Você tem que dar um pouco de flagelo para ver o que vai acontecer e tudo se desfaz bem. E você mal. Ok, então eu vou fazer é só dar uma olhada. Meu design, na verdade, meu design, é bem diferente. Você pode ver a imagem desaparecer e está meio que cheia. Então, o que eu vou fazer é desligar a imagem. Ok. Então você chama isso de imagem ocupada. Não é um bom nome para ele porque eu não quero fazer todas as imagens, eu quero um herói de imagem. E você notará que se você os estilizar aqui, ele será o Simon oral deles. Ele é herói fotográfico, herói de imagem, herói de imagem. Ok, se eu deixasse como imagem, toda vez que eu edito outra imagem, você seguiria o tamanho e todo tipo de coisa. Eu vou dizer que você não tem nenhum Qu, estranho. Ok, então você está empurrando para o lado, a grade está fazendo algumas coisas. O que está fazendo? É meio que preso a isso, estão bem. Porque eu limpei, é pular para a próxima, ok, deixando esse espaço aqui. Mas, na verdade , é ótimo ter duas colunas aqui, mas não aqui no celular. Então, eu vou dizer que ele realmente será apenas uma coluna. E eu quero que seja o atrito total e gostaria que fosse centrado. O fato é que, se é, diz que está centrado, por que não está sendo centrado? Eu sei o porquê. Você sabe por que tudo está alinhado à esquerda? É porque o embrulho diz estar centralizado, ok, mas o material dentro dessa embalagem está fazendo algo diferente. Então, o que eu vou dizer é DEA div aqui um rapper, eu vou fazer você flexionar porque os flexores são incríveis. E eu vou ficar na vertical e vou dizer que todos vocês estão no centro. E eu acho que a diferença é boa. Apenas o tamanho da fonte terá que ficar menor. Fim. De onde vem isso? A grade? Grade Aqui estão as bordas. Enquanto está mantendo esse cara. Por que por que ele tem um pouco de acolchoamento desse lado? Não consigo ver isso lá. Vamos para o modo El Super X-ray, super X-ray, modo X-ray. Quebrando todas as chaves. O que o mantém lá? Essa é a minha abertura. Tudo bem, espere, eles vão descobrir para tirá-lo. Quando clicado, tudo não tinha certeza como era, o que estava errado. E eu meio que subi. Acho que esse parece ser o maior culpado. E eu meio que fecho isso e olho aqui e faço MBA, azul, azul, azul, e verifico todas essas coisas e o que está fazendo lá dentro. Bem, está fazendo como se eu estivesse aqui, como eu, eu ligo e, obviamente, isso funciona. Um pouco disso. Eu descobri que não havia nada de errado com isso na grade e olhei para ele e fui até aqui e eu estava apenas olhando um aviso de que a criança da grade, então esse cara aqui é realmente ele quer fazer com eles. Você pode ver que ele está alinhado à esquerda e que espaço só está chegando porque está alinhado à esquerda. E se esse fosse um k menor, tudo isso seria ainda mais pequeno. Ok. Então, isso faz sentido? Ele acabou de alinhar à esquerda aquela maleta infantil. Eu vou dizer que você é neto. Eu vou ficar centrado lá. Quem descobriu isso? A outra coisa que eu quero fazer é que ele precisa estar em tela cheia. Alguém se lembra da medição por, por exemplo, colocá-la em tela cheia? Se você não fizer isso, foi, eu vou fazer a grade porque no momento a altura da grade é apenas uma altura mínima. Ok, então estamos sendo que a grade tem um tamanho de altura mínima de 343. O que vou dizer não é isso, vou dizer que a altura é a altura vertical. Então, eu vou dizer que é cerca de 90% da altura vertical, a altura da janela de visualização. Esse é o que eu quero. E faz algo que gostaríamos. Fiz 90 porque sei que tenho um pedaço da torre, acho que 90, mas não parece muito bom aqui no seu navegador. Então, faça o teste no seu telefone. Essa é a maneira perfeita, ou você pode fingir apenas tornando-a menor. Ok. Estou comprando mais ou menos do mesmo tamanho. Ok. Sim. Ok. Eu posso viver com isso. Então você pode pelo menos um design aqui, mas também certifique-se de testar em seu telefone, enviá-lo e dar uma olhada. Eu vou fazer isso por um segundo porque algumas coisas eu preciso fazer para isso. Em primeiro lugar, você quer que talvez quebre em duas linhas, tipo sim. Então, eu não quero tornar a fonte menor. Eu quero tentar fazer com que ele quebre. Então, texto em branco aqui. Não tenho classe que eu possa atacar, o que não é bom. Eu vou ter que dar uma aula de provavelmente alguma coisa. Então eu posso encolher ou posso encolher a caixa inteira? Eu posso fazer esse div aqui, um rapper, eu posso fazer menor porque ele tem uma classe. Eu simplesmente não gosto de adicionar aulas a tudo. Quero tentar ser o mínimo possível. Mas este aqui alimenta, como eu poderia dizer, você tem uma largura mínima de alguma coisa, você pode ter uma largura mínima disso. Basta colocar 300 e ver como funciona. Desculpe, a largura máxima é o que eu quero. Você pode ter neste dispositivo aqui largura máxima de 300 pixels. Menor. Agora se divide em duas linhas. E agora está alinhado à esquerda, o que é meio estranho antes de se expandir automaticamente. Então, estava sempre no centro porque eu disse para a caixa ficar no centro. Agora que estamos dando a ela uma largura física, ela está quebrando nessa linha e nunca dissemos que ela deveria estar no centro. E parece que foi enviado para, isso não faz sentido, então eu crio uma classe global? Este é um texto centralizado ou talvez seja necessário apenas encerrá-lo em uma aula. Então, o que eu vou fazer é me livrar dessa largura máxima aqui. E eu vou ter que ceder e dizer, você tem outra classe de combinação chamada Text Hera. Hera já está bagunçada. Então, este aqui vai ter minha largura máxima de, não consigo lembrar o que coloquei, mas não é pequeno o suficiente. Segurando Shift e soltando. Isso é largura mínima novamente, Dan, largura máxima, muito pequena. Mas ele também será a topografia do Papai Noel. Tudo bem, agora eu posso usar meus altos e baixos, é só para ver algo assim. E, novamente, vou ver se isso está funcionando. E efeitos sonoros de Adrian. Aqui embaixo também, isso precisa ser um pouco confuso. Então eu vou dizer que você continua com isso. A posição está um pouco acima de 11234 e está meio que funcionando. Eu preciso me livrar do espaçamento no topo. Ao que eu adicionei isso? Eu o adicionei para contar. Lembre-se, eu o adicionei ao contêiner, nego aqui. Eu quero desligá-lo. Quando vamos fazer isso aqui, vou colocá-lo em zero. Aqui vamos nós. 1234. Ok, novamente, vou provar no meu telefone para ter certeza de que funciona na parte inferior. Ok, certifique-se de que está alinhado. Tudo bem, isso vai estar nele. Isso é tudo para a caixa do herói. Acho que não há mais nada lá dentro. Tudo bem, vamos passar para esses caras. Isso vai demorar muito mais do que eu pensava. Ok, então eu vou colocar esse pedaço no fundo aqui embaixo. E o que eu vou fazer é criar uma seção para eles, e eu vou ter uma cor de fundo para ela. Excelente, vamos fazer isso. Então, vamos voltar a este. E vamos adicionar uma seção que pode estar dentro do meu contêiner, arrastá-la para dentro, seção B, seção do produto. E vai estar dentro disso. Entendemos, tudo bem, isso vai usar meu colega aqui. Você vai ficar bem, e você será o pano de fundo desta edição será t grey 300. Ok. E o que mais temos? Vamos colocar esses caras no caso de precisarmos de uma lista. Ok, então meus produtos ainda não tenho. Então, meus produtos, vou importar produtos. Sim. Eu os tenho do último. como se estivéssemos olhando para isso. Então, meus produtos demoram um pouco para que esses caras carreguem , dependendo do tamanho da mente do seu cluster. Não é muito longo Qu, então eu tenho meus produtos. Vamos adicionar a lista de produtos. Então eu vou fechá-lo aqui e adicionar a lista de coleções, ok? E eu vou dizer, vou conectá-lo ao produto que fará com que ele tenha três lados. Provavelmente vou trocá-lo para realmente mudá-lo para uma grade. Eu faço isso com muita frequência. K, em vez de você, trocá-lo volta para aquele tipo de elástico. Ok? E então você diz Na verdade, meu amigo, você agora é grid. Ok? E você verá que essa lista de coleções não está satisfeita. Eles estão todos presos lá. Acho que adicionei as grades na embalagem errada. Então, eu preciso adicioná-lo à lista. Então, vamos desfazer isso. Portanto, essa lista de coleções será uma grade que fará mais sentido. Agora vamos pular para esses, certo? E você será três colunas e uma linha. Vamos adicionar algumas coisas. Adicione nossa imagem. Aqui dentro. Vamos adicionar uma imagem. A imagem não pode ser adicionada dentro da coleção. Clique dentro dela primeiro e depois edite. Nós nos conectamos ao campo principal da imagem. Excelente. Vou adicionar uma audiência. Vai ser o preço do meu aquecimento. Eu vou dizer, Oh, vamos conectá-lo a ele. Certifique-se de conectá-lo ao produto do nome básico ou designer de problemas, crie a versão pequena. Vou ter que ajustar isso porque somos muito mais longos. Eles não têm as cargas. Tudo bem, vamos colocar no OWL, apenas uma imagem, desculpe, um bloco de texto, ou conectá-lo a L. Preço, preço, preço. Excelente. E o que você pode fazer é, na verdade digitar depois que está conectado a isso. Na verdade, quero esse pedaço depois por cem gramas. Então eu vou fazer o que eu vou fazer? Na verdade? Sim, isso é o que eu vou fazer. Então, bloqueie o texto no momento. Ok, vou ligar para ele. Takes Price. Vou colocá-lo na fila. Ok. Porque senão ele é um bloco, certo? Porque ele é chamado de bloco de texto. Ele quer ocupar toda a linha. Então, se eu criar outra pessoa, outra pessoa, outra coisa fica bloqueada. Você notará que ele quer ficar embaixo disso, ok? E este vai custar cem gramas. Ok? Então você pode dizer para esse cara, aceita o preço, você estaria na fila. Essa pessoa ainda quer ser um bloco. Então, eu vou chamar isso de uma mensagem de texto. E eu também não poderia aceitar o preço porque ele faz a mesma coisa que seria em bloco embutido. Eu preciso de alguns, eu tenho margem esquerda? Eu ainda não sei. Então, margem esquerda x s, sem acariciar. Vai ser, você vai ter oito anos mais pequenos. E você vai ter a margem esquerda, extra pequena. Lá vamos nós. O próximo, mas um pedaço de texto , é esse. Então vamos, você entra lá em outro bloco de texto. Na verdade, é um parágrafo agora, certo? Como se eu sentisse que isso agora se qualifica como um parágrafo porque vai ter inflamação. Então, não vou colocar textos, vou colocar um parágrafo conectado ao campo do parágrafo. Ok? Agora, o cliente não me deu uma opção resumida. Ok, então o que eu vou fazer é voltar para eles e adicionar uma opção de resumo. Então pegue um pouco de texto. Digamos que tenham que ser três linhas, porque é exatamente para isso que temos espaço ou descobrir qual é a mistura mínima de caracteres. Eu só vou usar isso muito. Ok, vou entrar no produto e dizer produto. Você precisa de um novo campo, não no produto em si, mas na lista global de produtos. Eu vou dizer que você precisa de um novo campo e meio que aparece na parte inferior, o que é estranho. Você vai ter um novo campo de ticks. Ele será multilinha quando eles o colocarem lá e o rótulo for resumido. Ok? E teremos uma quantidade mínima, mínima de caracteres. Ainda não sei o que é isso. Ok, eu vou ter que jogar Taste It, mas também temos que voltar para o cliente e levá-lo como parte do processo, ver se podemos obter um resumo. Alguém vai ter que fazer isso. Então é isso, digamos, a coleção. Vou examiná-los agora e dizer: onde está meu resumo? Colar? Salvar deve ser pelo menos, opa. Na verdade, acelerará a mudança disso. Ok, então eu mudei do mínimo para o máximo. Então, agora devemos ser capazes de economizar. Tudo bem, então vou resolver esses problemas e colocar um espaço reservado que pareça vagamente diferente. Ok, agora posso voltar e dizer que, na verdade, você notará que está conectado ao campo de resumo. Resumo melhor. Tudo bem, o que mais precisamos? Precisamos do nosso botão, ok, e vamos adicionar um botão. Você se lembra que este é um pouco diferente. Você tem o roxo. Isso ocorre somente quando você o transforma em um CMS ou em um site de comércio eletrônico, você pode simplesmente colocar um para dizer, escolha o produto atual. Ele sabe qual caixa não é. Ele sabe que é esse doce chá preto de canela. Vai para lá. 114. Trabalhe com Dan para criar a loja de chá completa no Webflow Parte 3: Tudo bem, está tudo aí. Eu preciso estilizá-lo agora. Então, vamos fazer isso de uma forma resumida em uma div. Eu poderia usar o item de coleção. Não sei exatamente o que o item de coleção faz. Provavelmente tem alguns poderes especiais. Vou jogar uma etiqueta div lá e jogar tudo dentro dela. Você está apenas arrastando tudo para a direita. Deixe-me ir. Então eu posso dizer diblock para você. Faça algumas coisas. Vamos ter um pouco de espaçamento. Eu vou dizer a lista de coleções. Na verdade, toda a seção terá algum preenchimento de “Eu vou fazer”, a margem pode usar 24 bits. Vou verificar, na verdade, o que o designer fez. Mantenha pressionada a Teoria das Opções. Bed Designer 32 estará em. Então, vamos usar 32 porque isso está próximo o suficiente lista de seções de produção que terá margem em todas elas. Segure um, espere, mude em 32. E vou me certificar de que a grade, que foi aplicada à lista de coleções, também terá 32, caso fique dentro da grade. E vai ser 32, 32, mesmo que não tenhamos linhas. Vamos colocá-lo lá. Tudo bem, então esse é o tipo de espaçamento classificado. Vamos adicionar um fundo branco. Eu quero isso para a coisa toda, ou fundo branco para baixo, mas porque há uma sombra projetada. Então, isso vai ficar confuso. Outro papel no diblock, excelente, não confuso. Cor de fundo, branco. Vamos adicionar uma sombra projetada. O que vou fazer é adicionar uma sombra projetada global para que eu possa usá-la em outras coisas. Então, vou adicionar um bloco div. Eu vou ligar para esse. Chame isso de sombra porque eu vou ter uma sombra tecnológica, provavelmente não vou usar amigos ousados. Aí está você. Então acrescente a isso. Você pode ter efeitos de box-shadow. E vamos dar uma olhada no que temos aqui. Então este tem uma sombra de 036, 16%. Não vou remover metade disso. Então, logo abaixo de três diferentes aqui no Webflow, eles têm esse dial. Eles não tinham coordenadas x e y. Portanto, 1AD é direto para cima e para baixo, distância perfeita. Serão três pixels. Ok, esse é o porquê. E o azul era três em casa lembrando tudo isso, ei, a cor era 16. Genial. Isso nunca acontece. Ok, então essa é a minha sombra e depois aplique-a para ver se ela está realmente com a mesma aparência. Então, o diblock aqui vai ter sombra. Para sombrear. Parece muito bom quando eu acho. É praticamente o mesmo porque é o mesmo código. Tenho certeza que você está se perguntando. Não tenho certeza se esperávamos que fizéssemos meu oh, ok. Você percebeu isso? Eu não percebi isso. Então agora é como se uma vez que a cor escura desaparecesse, é porque eu coloquei o acolchoamento, não foi em nada que coloquei uma margem ou acolchoamento. Então, esse envoltório externo tem os dois, mas sua margem, margem se afasta do lado de fora e acariciando empurra de dentro para o meio. Então é isso que eu quero. Eu vou limpar tudo isso. Eu vou fazê-las. Como mudaria? Ok, eu vou ser 32 beta. Ok, como vou fazer o acolchoamento por dentro? Eu posso fazer preenchimento porque a imagem como nesta gosta de outras drogas. Então, porque eu preciso que a sombra projetada fique na parte externa da imagem, mas se eu adicionar preenchimento a ela, ela vai acabar quebrando, certo? Se eu pegar esse diblock e adicionar preenchimento a ele, vai funcionar, mas vai empurrar a imagem para dentro. E talvez eu faça isso porque é fácil. E espero que o designer não perceba. Ele notará outro cara, bonitão, mas notará coisas assim. Então, diblock, vou precisar outra div interna para encerrar tudo isso. Okey-Dokey. Vamos usar o bloco aditivo. Ali. Você pode entrar. E então você atravessa, atravessa. Quando você atravessa. E, em seguida, diblock, vou adicionar uma classe nele. Então, se eu criá-lo agora, ele criará uma classe global. Eu vou imaginar tudo o que eu preciso que seja? Aproximadamente cerca de 21. Então, vou usar meu T4 gêmeo para sustentar. Você tem que verificar. Então eu vou desbloquear marginal e este vai ser deixado para fazer provavelmente o teste. Imagine toda fumaça. Na verdade, estou fazendo preenchimento ou margem, não importa, neste caso, não importa. Eu vou fazer o preenchimento ou porque é mais provável que eu reutilize um preenchimento completo. Ok, e vou fazer com que isso não seja negativo e não faça margem. Segure a tecla Shift e eu posso dar uma olhada. Não preciso adivinhar. Tentando obtê-lo aos 16. Isso é complicado. Acho que é melhor do que 22 ou 24. Eu só vou ficar sem espaço. O Note 24 é melhor. 24 é meu médio, não pequeno. Então você vai ser médio. Tudo bem, então estamos chegando lá, estamos chegando lá, estamos chegando lá. Vou ter que adicionar uma classe de combinação a isso para dizer clicar na lista de texto. Vou chamá-la de lista de produtos . Na verdade, terá que ser menor. tipografia estava usando minha seta para baixo até eu pegá-las. Estou feliz que as vértebras tenham duas linhas, mas simplesmente não podem se dividir em três. Agora acesse meu banco de dados e verifique qual é o nome mais longo. E então talvez eu precise reduzir o que eles podem digitar no cuidado do banco de dados pelo menos na minha lista de produtos, porque não pode demorar muito. Isso destruirá meu site. Tudo bem, e esta aqui, eu vou dizer que você precisa de uma margem inferior. O que eu tenho? Você pode começar a ver o quão útil ele se torna agora? Porque você está tipo, Oh sim, eu posso adicionar esse agora. Eu criei isso. Margin-bottom parece estúpido e você pode não ser roubado. Talvez você prefira apenas estilizar tudo com seu próprio estilo. Isso é totalmente legal. Tudo bem, vamos dar a esses caras um bloco de altura mínima. Por que não tamanho, altura mínima, altura e altura. E eu quero que o botão fique na parte inferior. Quem se lembra de como fazer isso? Tudo isso é conhecido. E às vezes eu fico tipo, digamos que eu queira que tenha a altura mínima ou não, você se perde ganho se formos, a altura mínima vai ser demais. Seta deslocada para baixo. Isso provavelmente é bom o suficiente. Quanto mais precisaremos verificar todas as diferentes em termos de quantas, quantas linhas são essas para ver até que ponto ele pressiona o botão. Então, como faço para colocar o botão na parte inferior? Você sabe, div tag me. Flex, flex enlouquece. Vertical. Pegue esta de baixo e diga que você é, tenha uma aula. Isso não funciona. Eu quero uma classe de botão nela, um pouco de classe de botão nela primeiro, e depois fazer com que ela pressione para o topo. Eu tenho outra classe, então ignore pressioná-la para baixo, mas devemos flexionar. Na verdade, agora podemos fazer isso porque não precisa de uma aula, não é uma criança? Vamos dar uma olhada. Xd precisa estar no topo da margem. É uma aula. Então, o que vou fazer é remover isso porque quero estilizar o botão primeiro. Olha. O estilo dele lá. Sim, vamos fazer isso. Eu vou dar uma pequena olhada. Você segurando é 14, 44 por 44. OK. Então você, meu amigo, será um botão que eu não vou aplicar nele. Digamos que eu tivesse dois Flexbox do pai apenas para poder estilizar o botão sozinho. Vou usá-lo em todos os lugares. Botão, amigo, vou gravar o botão. Se você tem alguma aula aplicada a ele, ele não tem. Então, eu só estou pegando o azul. Não tem. Então, vamos para Spacing. O que foi isso? Não me lembro de 44. Eu quero dizer 44. Podemos verificar em um segundo o que é e4 e manter pressionada a tecla Option 44. E então algo 14. 14. Às vezes, manter minha tecla Option pressionada não funciona. Eu meio que vou bater duas vezes. Claro, por quê? 44? Esses botões serão chamados. Vou dizer que vai te salvar. Vai ser equilibrado. E eu vou usar os botões ter uma cor de fundo dos meus cantos arredondados neste. Ao redor dos cantos de 44,4 é quatro. Bom. Tudo bem, então isso é bom. Há uma sombra projetada nela. Então eu meio que reutilizo essa sombra. Maneira estranha. Onde eu estou? Deixar isso aí embaixo? Eu fiz, eu fiz. Opa. Sombra a sombra no botão. Tudo bem, então agora vamos fazer com que fique no fundo. alturas do verão provavelmente ainda não são suficientes. Então, a altura mínima para isso P é uma almofada. Oh, você está certo. OK. Então eu quero, eu não quero estilizar isso. Então eu vou me lembrar de PA, PA, mid e remover essa aula. Eu vou, vou remover essa cláusula porque eu não quero estilizá-la. Eu quero adicionar uma classe a esse desbloqueio. Isso vai ser div, list, product, list, lower grey naming. Ok? E terá uma altura mínima de 350. Demasiado. Segure as teclas Shift, minha seta para baixo, e faça com que seja grande o suficiente para que todas tenham a mesma altura, na verdade. Por que esse cara é um pouco menor? Sempre a imagem. Não tem nada a ver com isso. E você vai, pensei que talvez nem precisássemos de uma altura mínima. Achei que era mais curto porque não estava exagerando o suficiente. É a imagem. Você pode ver que eu tenho imagens um pouco mais curtas. Vamos adicionar nosso PA a isso. Então, vou receber um PA que está pendente de tudo. E eu vou fazer com que o botão grude na parte inferior. Então, vamos aumentar a altura possamos ver o que estamos fazendo. Volte para você e depois esconda isso mais alto. Grande, pelo bem óbvio. E agora esse cara pode ser pai. Obrigado, não é. Então, seu pai dessa tag div, você tem que ter certeza de que voltamos para aquela que eu não quero que continue adicionando flexibilidade a este PA de anexar tudo, porque esse não é um caso de uso muito bom. E eu quero que seja sobre isso, e eu quero que você seja vertical, perfeito. E eu quero esse aqui também. Eu vou fazer essa. Importa se você começar este ou este? Eu quero a altura desse botão aqui. Em primeiro lugar, na verdade, eu quero que sejam movimentos, você pode simplesmente alinhar à esquerda. É isso que eu fiz aqui? Agora eu o vinculei à direita. Agora estou estilizando divs shadow. Vou precisar de uma classe especial de botões para isso. Vou me livrar disso. Eu vou chamar este de tem uma classe de botão especial que será a lista de produtos de botões. Um pouco mais específico e você ficará à esquerda e terá uma margem superior de ordem na parte inferior. Bom. Houve muito trabalho para isso e eu não quero que fique à esquerda. Eu quero que seja assim. E agora essas imagens, então digamos que isso dê uma olhada no que temos aqui. Então, vamos apenas copiar esse design. É muito fino aqui. Eu vou, você vai ter uma altura de 123. Ok, então essa imagem da caixa aqui terá uma classe de imagem especial que teria um herói, folha de chá. Haverá uma lista de produtos de imagens. E ele vai estar no auge disso. largura pode ser 100%, então ela preenche o que quer que seja. E eu vou fazer um ajuste de cor. Agora, há pelo menos a mesma altura. Na verdade, ainda não. Ainda assim, a altura mínima não é suficiente desta. Você pode ver apenas um pouquinho de distância? Então, vou dizer que a altura mínima desse cara será apenas mais uma. Casal. Tudo bem, tem preço. Isso perdeu tudo. Então, eu não tenho certeza de quando ele perdeu, oh, olha isso. Porque eu fiz a coisa flexionar. Não vai mais bloquear em linha porque ele é uma criança. Posso fazer com que ele simplesmente vire para a esquerda? Eu posso, mas esse cara faz o mesmo. Eu tenho que voltar para você. Flexiona, meio que os empurrando para seu próprio nível. Talvez eu tenha que colocá-los em uma tag div. Essa é provavelmente a solução mais fácil no momento. Se você puder pensar em uma maneira melhor, me avise a hora e a melhor maneira de fazer isso. Porque isso pode ser mais barato. Pode ter um sabor. A aula vai ser ousada, ousada, ousada. Tudo bem, chegando lá, vamos agora verificar no celular. Todos, cruzem os meus dedos. Então, eu provavelmente não vou. OK. Vou ter que aumentar a altura mínima novamente. Então, na verdade, vou desligar isso. Vamos pegar a grade de mordaça. É a grade infantil real que a grade em si será. Posso ver a minha voltar melhor e realmente arrastá-la para fora? E eu vou dizer que desta vez eu vou ser apenas dois por dois. Livre-se de um. Ok, vou acabar tendo mais, talvez na página inicial e vamos resolver a minha filtragem mais tarde. Vamos pegar uma escada. Apenas trabalhe em uma coisa de cada vez, Dan. Você parece bem. E móvel. É meio apertado demais. Então lembre-se de que vai ficar mais parecido com isso. Então, provavelmente vai ficar mais parecido com isso. Você ainda tem que rolar para baixo. Então aqui você pode ir. Item da coleção você, e você vai ser dois por isso. OK. Bom. Isso vai ser bom. Novamente, tem os testes no meu telefone, mas você não pode me ver no meu telefone, então não é muito emocionante. Eu vou embora, isso é bom por enquanto. Isso é bom por enquanto. Tudo bem. Então minha página inicial está pronta, provavelmente não. Olha você contra você. Isso 100%, 100%. Um aqui provavelmente colocou uma altura nele para manter tudo alinhado. Mas acho que não quero me meter muito nas ervas daninhas. Quero que esse vídeo continue, vou resumir as coisas no final. Então eu acho que estou feliz. Isso é bom o suficiente para a página inicial. Vamos passar para nossa próxima página. Você ainda está comigo? Ainda está acordada, Becky? Estou acordado. Então, vamos fazer isso, esperançosamente. Sim, temos algumas coisas aqui para começar a construir isso. Então, vamos para a página dois. Então, essa será a lista de produtos da Coruja e será uma página de produto. Portanto, ainda não estamos lidando com o modelo. O que vai criar outra página? E vamos embora. Você ia dizer que este seria uma lista de produtos, produtos, produtos ou arquivos de navegação do produto. Isso vai ficar bem. Eu deveria preencher meu meta título e descrição agora mesmo. Não entre em nada nesta página. Vamos voltar para a página inicial. Vamos pegar minha barra de navegação e convertê-la em um símbolo. Boa ideia, nav. Volte para a instância, volte para esta outra página. E vamos adicionar a música. Próximo. O que eu gostaria de fazer é duplicar isso. Então eu posso ver duas páginas ao mesmo tempo. Você pode editar e os dois não permitem. Um deles é somente para leitura, como você pode ver que não há nada aqui. Eu posso pular as páginas, que é legal, mas não consigo editar na segunda versão. Muitas vezes, o que eu faço é movê-lo para cá como referência para que eu possa estar nesta página e ver o que fiz nesta página. Porque, caso contrário, você acaba tendo que recarregá-lo todas as vezes. E toda vez que você recarrega uma página, suas coisas desaparecem, o que é uma dor na bunda. Então você O que temos? Gostaria que ele mostrasse como navegar nele, mesmo que você não possa editá-lo. Só que não está lá. Tudo bem, então precisamos de um contêiner. Acho que não vimos aquele contêiner. E adicionamos um pouco de coisa na parte superior. Então, o que adicionamos ao topo? Nós adicionamos e nele estava o topo médio e era aquele. OK. Vamos adicionar uma caixa branca. Eu adiciono uma caixa na parte superior? Só tem branco ou eu adiciono uma caixa que é tudo branca e eu a faço Buxton, a parte inferior é cinza. Pergunta muito boa. Estou tentando pensar qual é a melhor. Vou apenas fazer uma seção superior. Acho que posso reutilizar esse que eu realmente quero fazer é movê-lo para baixo. Então, sim, vamos fazer essa coisa, podemos reutilizá-la. Então, isso será seção, seção e será chamado de Seção. Brincando. Porque eu sinto que vou usar isso algumas vezes diferentes. Não, sim. Sinto que vou trazer minha seção para bater. Não vai ter cor nela. Meu site inteiro tem uma cor, não é? Então, vamos fazer isso. O corpo precisa ser dessa cor. Meus 100. Então, vamos voltar aqui. Vou ver o corpo ou as etiquetas corporais. E eu vou dizer que o fundo é dessa cor. Eu chamo isso de vai ser editado e isso vai ser cinza AST, o cinza. Cinza. De qualquer forma. Eu não vou perguntar. Então, será a cor de fundo. E isso significa que essa seção aqui tem que ser branca. Está faltando minha página inicial? Sabe, é mais ou menos assim que eu queria. Este aqui, seção, plano de fundo. Vai ser branco e branco. Cor global. Pode ser só que, eu não sei. Acho que nunca há necessidade de preto completo para branco. Eles são fáceis de acessar e é improvável que você os altere. Improvável, provavelmente por causa da diferença, mas vamos entrar aqui. Vamos lá Não aperte o Comando R. Isso está ao lado do comando D. Se você não fez isso antes, Controle E para adicionar coisas, e esse é o botão de reset. Reinicializar todo o navegador é irritante. Tudo bem, acertando um, pronto para rolar, eu preciso de um pouco de mesquinho. E aqui, usando o herói de 32 seções, vou adicionar um título. Eu tenho um médio e o médio é 24. Então, vamos fazer outro para preenchimento. Preenchendo em negrito, e este vai ser grande. Lg, basta escrever em grande escala. É comum em muitas outras estruturas usar LG, SM em excesso ou esses tipos de acrônimos. Então, preenchendo toda a volta, segure, mude os dois. Tudo bem. Aí está você. Então esta seção, não a audiência, na verdade, não importaria, será a polícia. Eu vou usar algas. Eles são o que eu chamo. Eu nem fiz isso. Eu fazia isso o tempo todo? Vou desfazer até que esteja de volta. O que eu criei a classe div com ela ligada, você me vê não entrando o tempo todo no PD. É muito chato para mim entrar. Entrar. Agora eles seguram Shift. Agora isso deve ser feito. Bom. Tudo bem, separe a seta para cima para pegar o almoço TED dos pais. Acho que estou usando uma cor de fonte diferente. Eu estou usando, acho que o segundo lá dentro. Eu vou ter que voltar para os aquecedores. Acho que nem chega à segunda cor. Aquele ali. Para realmente ser. Vocês devem ser uma fonte da teoria primária. Eu não fiz um dente primário, é o que eu quero. Então eu vou fazer essa. Vamos fazer disso um custo global e vamos chamá-lo T prime Mary, eu tenho um três e um atum. Excelente. Tudo bem, encontre sua coisa linda. Vamos colocar nessa região, essa coisa aqui, deveria ser uma seção? Pode ser facilmente uma seção, uma seção de região, que deveria ser uma tag div, ou não ser grande o suficiente para ser uma seção. Realmente não sei. Vou fazer uma seção div para, tipo, oh, bem. Faça alguma coisa, depois corte. A seção não pode ser aninhada uma dentro da outra. Eu não quero isso dentro um do outro. Ele clicará na classe da seção do corpo chamada seção. Seção. Isso vai ser uma região. Vai estar dentro do meu contêiner. Ok? E vai ser o auge do que eu vou fazer é fazer com que o texto o abra. Eu gosto de fazer isso às vezes , então não preciso gostar de tentar colocar isso no meio disso. O que posso fazer é dizer que seja um pouco mais alto e mais baixo do que este texto. Então, vou adicionar um bloco de texto que está atingindo. Pode ser 123. Está vendo todas as páginas. Eu não tenho muitas outras páginas, então pode ser que três estejam aqui. Batendo. Serão três estilos, todos os três serão planetas usando isso apenas aqui. Então, você vai ser ousado. Coloque o texto. Ok, o tamanho 16 deve ser o negrito padrão. Vocês terminaram como brancos e bezerros. OK. Acho que três serão 16. Vou remover o, removê-lo por enquanto. Zero zero. Podemos adicionar alguns, talvez não, à região da seção de aquecimento. Na verdade, não precisamos nem um pouco dessa seção. Veja isso. Eu posso colocar três e vamos fazer isso porque provavelmente deixaria a seção lá, mas quero mostrar que esse acerto três é usado para um propósito, todo esse bloco. Então, vai ficar bloco que vai até a borda. Ele terá uma cor de fundo da cor de fundo desse. Ele vai ter uma topografia deste vai ter algum espaçamento de cabeçalho de 32 dimensões. Tudo o resto. Estou meio feliz com isso. Então, bonés, eu uso muitos gatos nisso. Nós usamos tampas em excesso. Sim, está renderizando a fonte de forma um pouco diferente. Os combustíveis da lâmpada são mais ousados aqui, mas ei, é o que é. Ele será renderizado em todos os tipos de navegadores diferentes, um pouco diferente de branco. Então, em termos de altura, eu poderia simplesmente adicionar um pouco de acolchoamento na parte superior e inferior. E chame isso de bom. Tudo bem, então outra seção, e vai ser essa parte, ok? Então, esta será a minha seção de lista. Você está se divertindo. Quero dizer, divertido. Gosto de fazer coisas como quando não está indo tão mal quanto gosto que vocês assistam. Achei que combinaria muito , então terá a cor de fundo. Eu não tenho nenhuma cor de fundo. Vamos chamar isso de uma seção. Seção. E isso vai ser uma lista de produtos, ok, vai ser um produto. E eu vou navegar na página. é assim que eu chamo de produtos na página de navegação. E isso vai ter uma cor de fundo. Desligado. São os 300. É isso. Você adiciona o preenchimento completo para grandes. Eu adicionei isso ao corpo. OK. Vou seguir em frente. E vamos pegar minha lista. Você pode copiar e colar listas. Eu não posso fazer isso dessa maneira porque eu posso pegar a coisa toda. OK. O que posso usar minha seta para cima? Esse invólucro? Eu posso fazer isso dessa maneira? Acho que não. Eles removeram o local de ligação. Eu posso viver com isso. Posso ligá-lo novamente? Então você estará conectado para voltar a ser os produtos. Isso se livrou do meu não, isso não funcionou. Então, vou tentar isso de novo. Vou desfazer em vez de excluir porque eles me trouxeram outro lixo junto com ele. Vamos ver. Isso. Tenho certeza de que isso funciona. Eu posso pegar tudo aqui. Volte para aqui, volte para a navegação do meu produto. Quem vai? Então, vou usar a mesma lista. Essas são algumas aulas. Eu tenho que ter cuidado para não naufragar lá. Então você tem que mudar algumas dessas classes. Você decidirá se isso economizará seu tempo copiando e colando, porque teremos que editá-lo para ficar assim, certo? Então, talvez não seja tão chique também, tão inteligente quanto eu acho. Vamos dar uma olhada. Você, vamos embora. Antes de tudo, mude a grade. Na verdade, muda a grade. Eu quero dizer que a grade vai pegar a lista e a lista porque minha grade. É por isso que eu gosto de manter a grade. Oh, você faz isso alto, aí está se escondendo. Será feito por encomenda. Ok, e então aqui vou pegar o bloco div e o diblock. Sinto que se eu mudar isso, vai ser muito difícil lembrar o que está acontecendo do outro lado. Então, eu vou ter que reconstruí-lo. Nós podemos reconstruí-los. Não sou inteligente o suficiente para fazer com que tudo o que faço aqui também funcione na página inicial. Portanto, é fácil apenas adicionar um bloqueio. Para que eu possa estilizar as coisas. Adicione uma imagem, imagem. Vou acrescentar brincadeira. Vou adicionar texto. Adicione outro. Estou tentando lembrar o que está no outro, você sabe, o que está na lista. É preciso o bloco K. Então, digamos que temos imagens atingindo um livro didático, livro didático. Agora, isso exige andar em um botão. Antes de instalá-los, podemos fazer isso. E vamos adicionar um botão. Sugestão a partir do botão de atalho. Isso vai para a página que é o produto atual. Você novamente, o link para a imagem principal. Você será o primeiro de tudo e o H2. E você pode obtê-lo pelo nome do produto. Você o obterá pelo preço do produto. Preço, preço preço. 115. Trabalhe com Dan para criar a loja de chá completa no Webflow Parte 4: Ok, você será apenas o livro didático que diz que você colocou 100 g. Você será a descrição. Essa será a descrição completa ou ainda um resumo da folha de resumo, dos pinos, certo. Porque não faz muito tempo. O que vamos ser? O resumo depende, juntamente com as descrições resumidas, quando sim. Certo. Mas eu não quero limitar quem está escrevendo isso ao resumo, fique nessa pequena lista. É melhor usar o verão para que isso aconteça. Então, vamos pegar todo o pai e fazer com que ele se mova porque, você sabe, como padrão, sempre vamos na vertical. Na verdade, este é muito útil para esse caminho, porque eu quero muitas coisas no meio. Então você vai ser muito pequeno. Então você é exatamente o quão grande você é, não quadrado. Opa, isso é fingir que era quadrado. Então, eu vou você ser uma imagem nesta página. Então, sua imagem, o que mais eu tenho? Eu tenho uma lista de produtos. Haverá uma busca de produtos. E você terá um tamanho de largura para você. E eu vou dizer encha com kebab. Sim, excelente. Vamos dar uma olhada. Então você os coloca oralmente dentro de outro livro. Na verdade, eu quero uma grade e aqui, Donna, eu poderia usar o Flex, colocar outra aqui e flexioná-la. Então, fazemos isso apenas para mostrar as grades mais facilidade, porque o flex só tem alinhamento superior e inferior, que vai funcionar agora, ele continua com o flex que você flexionou lá? Eu vou para lá. Vou criar outra tag div aqui. Div. Nós vamos entrar. Eu adoraria poder selecionar mais de um turno e clicar em todas elas. Não sei por que não podemos nem mesmo colocá-lo em você depois de pegar o primeiro e , em seguida, o resto deles tem maior probabilidade de entrar. No momento. Parece que é a maneira como eles fazem isso funcionar. Então, eles parecem estar trabalhando nisso no Webflow e parece ficar cada vez melhor naturalmente, mas é um desbloqueio aqui, você também será um filme. Assim, você pode flexionar uma flexão horizontal. Este é vertical. É forro. Dessa forma. Justificando esse centro. Eu quero lacunas e linhas. Este pode obter algumas linhas. Então, o pai aqui é a lacuna, as linhas. Vamos colocar 32. Isso não funcionou. Você é e você deve que a diferença não vai te pegar. Você precisa fazer tudo bem. Essa aqui, a mãe do erro, vai ser uma fila de demasiada coisa. Use minha seta para baixo até onde chegamos. Então você é do tipo certo. Você precisa ir até lá. E também os colocou em uma div. Porque lembre-se de que o flex não permite que o B seja bloqueado em linha. Então, na verdade, eu só queria que fôssemos grid porque grid, deixe-me fazer isso. Reflete. Ok, então o que eu vou fazer é flexionar. Agora você está bloqueando tem barulho. Você também precisa ser ousado. Tipo: Não, você, no momento. Você pode ter, leva cerca de três, pode estar na margem esquerda. Só mais. Gostei de todo o acolchoamento, embora tenha vindo com o Flexbox. O que fazer? Você está aí. Tudo bem. Eu gosto muito do material dos filmes para ser. Eu vou colocar, vou colocar uma tag div. Vou embrulhar isso. Acho que essa pode não ser a melhor maneira se você estiver olhando de novo, o que ele faz que provavelmente deveria pensar. Então. Você vai entrar em você e em você. Então eu o coloco de volta na página inicial. Eu consegui fazer isso, certo? Liguei para o preço das mensagens. Você vai registrar o preço das etiquetas. E você vai ser Tics Price. Mas ousado. Ambos ainda não estão flutuando essa coisa aqui. Oh, isso não é. Ele processa, ocupa , remove classe, texto. Preço. Nós criamos de alguma forma um texto clássico P, porque ele não é usado em nenhum lugar. Consigo excluí-lo. E aqui vamos nós. Tudo bem, as pessoas entravam lá e a mídia, desculpe, uma margem para a esquerda ou para a direita. E, novamente, eu adorava o fluxo, então eu meio que contornei isso. Há muitos compromissos. Ele vai em fileiras. Vou aumentar isso. Esse cara aqui vai ser meu botão genérico. Então, eu não queria adicionar a margem automática ao botão genérico porque vou usá-lo muitas vezes. Ok. Então, vai gravar. O que eu faço é saber que vou esquecer de colocar as tampas, mesmo que o design meio que diga isso. Então, vou dizer que o botão vai, na verdade, forçar tudo a ser guardado, para que eu não precise me preocupar com isso. Você que não vai subir lá. Eu poderia ter simplesmente colocado, eu poderia colocar isso lá também. Mas eu percebi que o designer tem. E eu poderia fazer isso pegar o preço e levá-lo para, bem, eu poderia colocá-lo em bloco embutido, mas isso só vai causar muitos problemas porque alguns desses empréstimos são muito longos e não vão demorar muito antes que isso o empurre para fora do limite, especialmente quando eu chego a esses. Ok, então, sim. Tudo bem. Esse quarteirão inteiro não tem nome. É chamado de bloco div dois. Isso seria que minha div não estava aparecendo, na verdade, apenas renomeando-a. Ok. Normalmente eu gosto de ver os outros que o nomearam me dão uma ideia, mas como estou renomeando , eles não aparecem. Eu vou dizer que eu faço uma busca de produtos ao vivo, item de lista. Eu não o renomeei de jeito nenhum. Tem algo estranho. Tudo bem O que eu posso mudar isso? Eu não sei. Div. Se eu remover a classe , vai acabar com ela. Se eu adicionar outro, acho que tudo o que fiz foi criar esse, torná-lo flexível. E eu adicionei alguns erros, mas estamos de volta. Tudo bem, está meio que parecendo isso. Eu preciso, porém, de fundo branco. Esse representante terá um fundo branco. E eu vou adicionar uma classe combinada de sombras. Ok. Agora estamos chegando lá. Tudo bem. Estou feliz, você está feliz. Estou feliz por estarmos chegando lá. Sinto que não fizemos nada. Você pode ver como demoramos muito mais para fazer esta página do que para a primeira. Não há muito sobre isso, mas estamos reutilizando as aulas. Isso é o que é muito legal. Eu me sinto como um web designer forte e poderoso. Quando estou indo para a sombra da caixa, preenchimento deixado lá, eu já tornei consistente agora. Como você sente isso? Talvez só eu. Você sente isso. Tudo bem Vamos dar uma olhada na última página. O que estamos fazendo aqui, até este. Vamos fazer esse. Tudo bem, então vamos trabalhar na página do modelo porque isso vai ser, muitos deles terão esta aparência. Então nós vamos e vamos passar por dois L. Aí está. Vou usar um modelo de produtos. Ok, vamos usar nossa navegação e vamos adicionar um marcador de edição. Eu tinha tantos marcadores. Segunda-feira, vamos embora, vamos colocá-lo em um recipiente. Vamos adicionar esse contêiner, margem superior Md. Vamos dar uma olhada no meu design. Há um pouco de preenchimento neste. Este vai ser um fundo branco. Realmente não posso reutilizar aquele branco que tínhamos do último porque fui bastante específico sobre ele. Então, vamos criar uma seção aqui. Vamos para a seção que eu deveria chamar apenas a classe global chamada beterraba por branco. Então eu posso usá-lo repetidamente, mas estamos quase no fim. Então eu vou apenas colorir a seção, produto com jaleco branco, essa seção aqui também, vai estar no meio. Bom. Vamos adicionar coruja. Na verdade, não precisamos adicionar um item da lista, agora apenas adicionamos qualquer coisa porque estamos no modelo e podemos adicionar uma imagem, imagem June. Ok, vamos conectá-lo à nota de que ele está conectado à imagem principal. Agora você tem que ter certeza de que o produto está funcionando como quando você está projetando, ok? Você deve estar ciente de que as imagens podem não se encaixar. Então, você pode acabar tendo que ajustar seu design só porque a imagem não é grande o suficiente. Este é, e vai ter uma altura de, altura, altura, altura de três a três. Esqueci totalmente da versão móvel M&A. Me senti muito à vontade na última página, faremos as duas juntas no final porque já começamos. Ok. Eu não vou fazer a largura aumentada aqui, ok, eu vou somar uma classe Y. Nessa posição sentada lá, você não pode fazer como porcentagens. Você pode editar os pixels. Então, eu quero adicionar uma classe chamada produto de imagem PRO cut product. Ok? E vamos dizer que você é uma altura de você. Excelente largura de 100%, cabe ali e preencha, cubra e no meio ou na parte superior e você deve passar por algumas delas e manter pressionada a opção Não. Pressione todas as teclas e veja se você pode alternar entre as diferentes páginas. Como as guias. Qual deles é, Dan. Tudo bem. É a opção Shift em um PC, tenho certeza de que é um shift e alt, setas para a esquerda e para a direita. Você pode ver que estou apenas falando sobre minhas imagens por meio de um clique aqui. Eu só tenho três. Mas é uma boa maneira de examinar e verificar as imagens, todas elas parecem melhores no meio, que eles provavelmente sabem que uma não é tão boa, mas em vez de entrar aqui e dizer: Ok, eu quero que o transbordamento seja o topo ou o fundo. Então, vamos fazer isso e usar minhas flechas agora. Na parte superior ou inferior. Não tenho certeza. Eu acho que o topo. Tudo bem, então nós temos isso. Eu vou fazer isso exagerar. Agora. Eu poderia ter definido isso como pano de fundo, e essa é uma maneira de fazer isso como fizemos na página inicial. Eu quero ser uma imagem real porque gostaria que texto alternativo k. Então, no momento, acho que não temos. O que você pode fazer é configurar um campo de texto alternativo em seus produtos. Eu não tenho isso. Ok, você poderia adicionar esses campos personalizados de resumo. Agora eu voltaria e adicionaria outro campo personalizado para textos alternativos e teria o cliente, ou talvez eles já tenham algum descritivo que possamos usar, ok, e eu coloquei um limite de contagem nele, uma contagem de caracteres. No momento, porém, vou fingir que fiz isso e continuar. Então eu quero colocar eu quero colocar isso dentro dele. Vamos colocá-lo embaixo primeiro. Batendo. Ok, e isso pode ser um sucesso. Vai atingir um e eu não sei nada disso, mas eu preciso que você não tenha, você não pule para os três em uma página, você precisa de pelo menos um título. Alguém diz ao navegador que essa é a coisa mais importante nesta página. Então, vou ter que usar um estilo bastante extensivo para esta página. Este será o meu sucesso na página do produto. Ok. E será que você não adiciona fonte. Vai ser aquele. Ok. Vai ser um tamanho de onde vamos. O que você odeia? Homens? Eu faço isso o tempo todo. Nada de 48 sobre. Meu cérebro tem. Mistura essas coisas. Você divide por seis. Aro Dean. E vai ser um dos melhores. Vai ter que ser branco, o que não podemos ver. E o que eu vou fazer é colocar isso, você pode colocá-lo dentro de uma div e estilizá-lo. Eu vou fazer o que fiz para aquele aquecimento sem região. Vou fazer com que a turma real faça algumas coisas. Eu gostaria que não fossem bloqueadores. O bloco vai até a borda, o que é ótimo para aquela outra coisa. Na verdade, acabei de colocar o fundo e o punho. Então, quando estamos falando sobre porque por padrão, ele fará isso se você mudar para estouro, não, o Chrome, eu quero que o layout do cérebro seja colocado em bloco embutido. Meio que chega ao limite aqui. Então eu posso pegar um pouco de enchimento do lote deles lá. Certifique-se de conectá-lo para que ele o pegue pelo nome do produto e veja. De qualquer forma, não é muito uniforme, então não confio que o diodo Zener esteja funcionando. Ok, vamos embora. Você precisa deixá-los sem cor e eu vou torná-los pretos, mas a transparência é de 2%. Então aqui eu vou digitar alfa é 82. Ok, e agora eu preciso movê-lo para cima. Então, vou tornar a seção relativa. Provavelmente vai ficar bem ver isso. Talvez eu ainda queira embrulhá-lo em uma div. Só vou esperar o melhor e dizer que você vai ficar bem. Então você vai para a posição. Absoluto. Interessante, não é? Ele foi empurrado para a borda porque não pode ir a lugar nenhum. É porque essa coisa está mantendo o espaço aberto. Mas se eu tornar tudo isso relativo e depois pegar isso ou funcionaria? Isso é bom. É por isso que meio que se acumula. É só porque não cabe lá fora e meio se comprime o mais pequeno possível. Parece bom, mas a opção Shift para a esquerda e para a direita, ou Shift Alt, é uma verificação que está certa. E PC, talvez você precise começar a pressionar as teclas. Todos eles se encaixam localmente. Ok, este aqui faz parte do Adicionar ao carrinho. Vou entrar lá. Queria estar dentro da caixa branca para entrar no produto. Excelente. Qu, o que fazemos? Não quero o botão Comprar agora. Provavelmente terei que falar com o cliente sobre isso. Por exemplo, queremos o botão Comprar agora? Isso é apropriado? Talvez o usuário provavelmente prove e coma os dois. Veja se há algum tipo de caso de uso para eles. Esse cara não vai ser uma marca. Ele vai ser Button. Bonés. Botão feito para ser ousado. Acho que os botões queriam ser ousados. Não consigo selecioná-lo do jeito que você, oh, é completamente diferente. Fonte. Z, nada. Ok. Na verdade, tenho meus botões em negrito e são de quando eu estava sem fontes. Mais cedo, quando eu estava projetando mal, eu tenho que ir ao Design e dizer: o que está errado. Então eu vou deixar como está a Coca-Cola. O que mais eu quero fazer? Eu quero estilizar um pouco o formulário, então eu quero empurrar isso para dentro e para fora. Não preciso embrulhá-los em uma div ou adicionar uma classe a essa coisa. Talvez porque eu provavelmente vou fazer isso novo para outra coisa. Então, eu vou dizer que você só tem a classe de tamanho do campo R que será média. E fica médio, eu vou admitir, isso vai funcionar no mínimo ou no máximo? Largura máxima? Aqui vamos, quanto? 300 pixels. Anote isso. Tudo bem, eu não quero isso nos campos do rótulo. Vou precisar dele para este, mas não para este. Você vê isso aqui. Diz Selecionar tamanho e eu posso dizer escolher, mas não consigo alterar o tamanho da palavra que vem do banco de dados do produto. Então, você precisa entrar e mudar a forma como ele é trazido para o CSV porque, na verdade, está se retirando disso. Tudo bem, então o que mais? Precisamos jogar com? Algum espaçamento, precisamos fazer Adicionar ao carrinho e ao carrinho, há botões muito maiores nesta página. É mais alto e mais largo. Então eu vou dizer Você vai ser um botão, mas você vai ser um botão grande. Ok? E você vai ter mais de tudo. Você desse jeito. Eu deveria ir e verificar, mas não vou. Você precisa de sua própria aula. Você será a quantidade de texto. Ok? E você vai ter a cor certa. Você falhou na taxa de contraste. Todos eles serão aquela coluna AAA. E eu preciso de algumas outras coisas, então eu tenho isso. O que eu também preciso observar em Adicionar ao carrinho. Então, acima disso, se eu pressionar Command ou Control E acima , devo apertar. No livro didático, essa será a descrição completa, que não é muito longa. Tudo bem? Ok, é isso, vamos supor isso não seja nada e eu estou procurando se é inflex flexbox porque então eu posso adicionar linhas e eu posso brincar com o espaçamento, a probabilidade de todas elas serem iguais. Você pode ver que é muito maior e este é o mesmo que este. É o que, o que estou usando? Por que estou usando um tão menor? Meu meio de pintura tem, na verdade, apenas 24 horas e eu queria preencher tudo para ficar grande. Vamos remover esse. Título. Grande. Lá vamos nós. Agora eu posso entrar aqui e dizer que a Seção produz você com esta vertical. Eu posso adicionar linhas de 3d2. E isso é totalmente confuso porque você é relativo a esse. Aperte refresh apenas para ver se o absoluto volta, se o código real foi atualizado. Sim. Ainda negoceie. Então eu vou pegar um. Você tem espaçamento ou posição. Onde você está posicionado? Nós vamos, nós vamos. Não sei por que isso mudou. Acho que porque eu estava brincando com o Flex. Sim. Talvez o fluxo me cause problemas. Então dê uma olhada. É que eu não posso desfazer porque eu o atualizei. Ok. Então, na verdade, vou embora. Não flexionou esta caixa porque pode causar problemas. E eu ia adicionar meu preenchimento. Vamos dar uma olhada. Então, o mesmo problema. É porque é do topo. E a esquerda. Ok. Então essa é a parte que está no topo. Oh, seus pais passaram de parente para bloquear anúncios y. Então ele está procurando corpo porque eu estava brincando com ele sendo flexionado e pode não ser construído bloco p novamente, eu não quero que seja eu queria ser bloqueado, mas eu quero que ainda esteja com um parente. Ok. Para que esse cara saiba onde está e é por isso que você se mudou? Nós fizemos isso. Ok. Os números mudaram porque mudamos quem é em relação a quem deveria ser em relação ao produto da seção. Isso porque eu estava mexendo com as coisas, ele usou o corpo como padrão. Então Eric, ele está fazendo o que lhe mandam. Eu só digo para ele fazer coisas estranhas. Essa é a única coisa com o código. Nunca está quebrado. É você, está fazendo exatamente o que você disse para fazer ou está sendo mandado fazer, ele vai descobrir o que é isso. É por isso que estava errado. Atalho 123, vá, você tem que mudar os tamanhos, mas tudo bem, vamos o que mais temos em termos de produtos de controle? Como eu já tenho uma classe aplicada a ela, você obterá uma margem inferior de 32 porque meio que não é suficiente, mas você também está no lugar errado. Acima disso. Pode entrar no cartão? King go, então aí está o carbono ED que não pode entrar lá. Ok. Posso entrar lá? É preciso um bloqueio. Pode entrar. Meio que vá lá. Pode ir? Você não pode ir lá? Nós sabíamos disso. É totalmente possível que vocês me notem? Então, isso está lá embaixo. Você vai ter acolchoamento na parte superior e inferior. Este tem uma aula sobre isso. Então, eu também posso usá-lo sorrateiramente. Eu deveria estar comendo como Python, acolchoado na parte superior, acolchoado na parte inferior. Eu já tenho essas aulas lá. Ok, essa aqui, eu já tenho uma margem inferior? Eu tenho. Ambos estão certos. A quantidade pode ser que eles possam comparecer. Aí está você. Temos uma margem superior neste? Margem superior? Nós fazemos. Tudo bem. Estou gostando. Você não precisa mais da margem na parte inferior. Ok. Agora, sim, eu vou pegar uma xícara de chá. Você espera lá e começaremos a fazer as versões móveis por mais uma hora e depois a j12 342-34-1234. Ok. Então, duas precisam funcionar. Provavelmente apenas o tamanho da fonte. Tem uma aula. Vou usar minha seta para baixo. Este é o meu mais longo de todos eles quando você está realmente no tamanho que estava tentando usar isso, como depois do meu atalho, que é Shift Option para a esquerda e para a direita ou shift Alt, estou procurando o o registro mais longo de Deus como este aqui. Então, eu estou comprando um pequeno por isso. O resto. Tudo bem. Esse aqui. Novamente, provavelmente vou deixá-lo dividido em dois porque a fonte será muito pequena. Então, eu só vou dizer, espero poder mexer com a posição disso. Ei, onde está minha posição? Não estou perdendo essas outras posições. E em termos de largura, por que está lá fora? 100%, eu só vou para homens, pois tem uma largura mínima, não é? Em termos de tamanho, não bloqueia em linha. Por quê? Eu dei uma pequena olhada, é bom. O modo de raio-X só Não tenho certeza do que está sendo mantido aberto. Deve se encaixar lá porque isso nos leva para a outra linha. Há algo que lhe dá uma largura mínima e mínima. Mas não é. Você não é. O que você pode fazer é usar a seta para cima para ver a palavra clicar dentro dela. Use a seta para cima para ver se é o próximo carro e dar uma olhada agora do que ali. Obrigado, pessoal. Não tenho certeza. Volte para você. Sim. Porque não consigo pensar no que deu errado. Essa é uma, sim. Sim. Este provavelmente vai ter que fazer algumas coisas. O que eu vou fazer neste, o que o designer fez ? Olha? Basta usar um pequeno pedaço de texto. Ok, então vamos começar com um pequeno texto e o diagrama de tamanho da fonte. Isso realmente ficou lá fora, Hannah? Esse problema foi resolvido. Não está realmente resolvendo, mas o mais longo ainda está legível? O que eu faço por este está realmente vindo para cá. Isso vai ficar lá? É isso. Posso adicionar alguma margem desse lado? Eu sinto que isso é trapaça. Trapaceando. Mas vai funcionar, é a chave? Não. Sim, isso não parece ser uma boa solução. A fonte aqui vai ser menor. Vou ligar para duas linhas, ok? Provavelmente está lá. E eu vou ter que mexer com Vamos baixar isso para o 16 e para corresponder com isso, eu adicionei que oh, isso é posicionamento. Eu quero o título dela. Então, acolchoamento em termos de tamanho. Vamos descer até aqui, k, aqui, k, o posicionamento precisa aumentar um pouco, basta clicar lá e usar minhas teclas de seta, 1234. E também esse tamanho provavelmente é um pouco estranho por aqui. Então, a altura dela e desta é que você vai estar em relação à altura agora, que está faltando na minha posição. Mas eu posso consertar isso. Segurar o turno sobe e se enlata. Tudo bem A última coisa que vou fazer é criar um acolchoamento pequeno para este. Então, clique aqui embaixo , adicione um div. Div será chamado de preenchimento. E este vai ser, nós temos um médio, eu vou fazer um menor aqui. Pequeno e vai ser segurar Shift e segurar Shift e fazer 16 ao redor. Excelente. Desapareceu. Neste. Não é como um ícone adicionar aulas e tirá-las dependendo dos seus pontos de interrupção, você tem que refazer a música. Devo dizer que vai ser pesado e o recipiente aqui tem essa margem, a seção superior tem estofamento grande, que é esse phi, basta adicionar acolchoamento, acolchoar pequeno nele. Ele substitui, funciona totalmente. Mas aqui, eu também tenho estofamento pequeno. Você vai encontrar, você vai encontrar, você vai encontrar. Aí está você. Então, isso parecerá herói da seção, os produtos da seção têm preenchimento grande, título pequeno aplicado a ele. Mas, na verdade, não entra em vigor até aqui. Eu presumi que iria subir e descer porque a aula é aplicada. Mas não é porque eu o apliquei aqui. Esses, eu tenho estofamento, almoço, você continua, é alguma coisa. Tudo bem, vamos fazer com que este combine. Na verdade, você pode usar esse tipo de estilo agora. Tudo bem, ou seja, vamos dar uma olhada no, vamos sair desta agora vamos dar uma olhada na outra página que não fizemos para eles. Então, começando pelos dois primeiros, ok, não está funcionando. Ok, na verdade, será dois, vamos descer para encontrar a grade. Para cima. Lá está eu procurando, eu estava meio que clicando no meio e na seta do esfregão até ver o ícone da grade. Aí está. Eu vou dizer que você está pronto um por um. 123 ou ela está ficando apertada. Como vou combater isso? Por acaso fiz com que o DID fosse vertical e centralizado. É isso. Também é. Isso são filmes. Foi um golpe de sorte ali mesmo. E este aqui, vou aplicar, que aprendemos que podemos fazer preenchimento. Vamos ver se isso funciona. Pintura pequena em toda a volta. Não se aplicava. Por que não desfazer? Faça um acolchoamento grande, caso haja algo errado com ele. Algo está errado em preencher pequenos. O que há de errado em preencher pequenos? Vamos descobrir. Então, vou fazer uma aula de aditivos ou aleatoriamente de alguma forma. Vou adicionar uma barraca de polícia. Na verdade, não faz nada, tão pequeno vai ser 16. É por isso que isso é sim. Ter se não estiver funcionando. E eu estou feliz com esse. E eu vou usar o celular, na verdade, vamos ver se isso se aplica aqui também. Seu invólucro de lista de coleções. Podemos desativar classes, codificar. Como você faz isso aqui e no Webflow. O que devemos fazer é ir até o topo. título grande, vou definir como zero, devo defini-lo como zero em torno alguma sobreposição a essa classe. Então você vai ser zero. E então você está aqui para essa. De volta aqui, o maior gasto será de 32 neste. E então também deve acompanhar este. Eu ainda não fiz isso. Ok. Então você tem um acolchoamento grande. Nós não o desativamos para esses outros. Nós apenas o substituímos por esses mais altos e depois o ligamos novamente para Danio. E este aqui, parece bom, mas a seção real terá PDE pequeno. Lá vamos nós. Vamos ter certeza de que eu sou Rick, esses outros ainda são PD grandes, grandes e pequenos. Vamos verificar uma coisa. Tudo bem, acertar dois neste não tem aula. Eu quero centralizar as gravações no texto. Posso fazer isso em todo o quarteirão? Eu posso ir? Oh, mas isso acontecerá com este também? Então dê uma olhada. Porque isso parece bom. O escondido parece um pouco estranho aqui. Eu digo que tudo dentro dessa div será alinhado ao centro. Isso reflete isso? Esse, bom. Só se aplica da cabeça para baixo. Ok. Eu quero ou provavelmente queremos mexer com isso para combinar o pequeno com 16. Primeiro, clique em 1234, precisa haver um pouco mais de espaçamento, mas eu já tive o suficiente. Você tem o suficiente? Já tive o suficiente. Tudo bem Isso vai ser menor. Vai precisar de uma aula. Afinal de contas. Vamos editar aqui. Vamos chamar isso de um título, um na página do produto. Observe que esta é a página de navegação. Vai chamar isso de bater em um. E eu vou te ver aqui. Essa é sempre a última coisa. Essa será a última coisa. Então, diminua o tamanho da fonte. Você não pode quebrar em duas linhas. E você pode estar em duas linhas, mas você pode estar centralizado e terá 1,1 de altura de linha. Tudo bem, senhoras e senhores, vamos publicar isso. Há algo errado com isso. Vamos ignorar isso. Você pensaria: oh, por favor, oh, por favor. Ah, por favor. Sem navegação. Por favor, aguarde. Tudo bem, tem t. Vamos fazer a navegação. Vamos entrar na nav. Este aqui vai entrar no símbolo porque eu quero todos eles. Não quero que você acesse uma URL externa para a página fria. Você vai para a página de navegação. Então, você vai para uma página chamada de navegação de produtos. Abra nesta guia. Muito obrigado. O algodão sabe para onde ele está indo. Publique novamente. Isso não vai acontecer, vamos publicar algumas vezes. Tudo bem Vamos verificar isso. Estamos na página certa, onde atualize, livre-se de um deles. Procure quem não temos o LinkedIn fará isso, qualquer outra coisa? Então, estamos na versão grande vez da página inicial, a página inicial está quebrada. Excelente. Chega ao lado pequeno. Está funcionando melhor. Então, as páginas iniciais estão quebradas. Por que a página inicial está quebrada? Parece estar bem. E ele deu uma olhada em MI Rowan. Vamos para a página inicial. Oh, nós fizemos algo errado. K, a classe que estamos usando. Vamos dar uma olhada na grade. Não coloque em uma grade. Eu fiz. Então ele está em uma grade. Uma grade. Como ele se tornou assim? Deveria ser três. Eu não sei. Se eu editar essa chamada lista de coleções. Porque a lista de coleções com o mesmo nome está sendo usada aqui e em outra página. Todas as outras páginas. Navegação de produtos. Sim. Então, este está usando o mesmo. Então, podemos remover a classe que eu acho que podemos escrever porque, sim, vamos chamá-la de uma lista de coleções na página de navegação. E vamos dizer você e agora um de carro. Feito. Então, vamos deixar essa só na página inicial. Você está trabalhando. Vamos publicar novamente. Na verdade, eu apenas o visualizo aqui antes de irmos longe demais e publicá-lo. Então, vamos começar a trabalhar, vamos falar com um desses caras. E está funcionando muito na página. Percebo que, caso contrário, estaríamos aqui por 1 milhão de anos. Acho que essa coisa é a única ou o bit 0. Eu acho que isso não é ruim, não é ruim. Também vou ter que testar isso no meu celular. Vamos corrigir isso e eu mostrarei uma maneira de testar no seu celular, no seu desktop, você deve simplesmente enviá-lo para o seu telefone, mas não consegue ver isso. Então, vamos corrigir isso. Então, há essa opção que você tem aqui para a página atual em que estamos, tem um estilo azul. É como um padrão que vem do HTML tradicional. Então, vou dizer que a corrente do botão de navegação também será da cor branca. Pré-visualize você. Isso não fica azul. Não fica azul. Fique azul. Como se pudéssemos estar lá. Vamos pré-visualizar essa coisa no celular e depois encerraremos o dia. E é um dia. Comecei isso de manhã e é tarde e eu paro para almoçar lá. Você pode dizer quando meu humor provavelmente mudou em algum momento quando eu fico com raiva e depois quando eu comi muito. Tudo bem, então vamos publicá-lo. Atualize este e o que você pode fazer no Chrome, Oriente Médio, não tenho certeza em outros navegadores, você pode clicar com o botão direito do mouse e dizer inspecionar. E eu fiz a parte inferior aqui, você pode dizer, mostre-me neste ícone aqui. O seu pode estar em outro lugar na página. Acho que está lá. Talvez a direita, por padrão, você pode dizer, me mostre em um pixel cinco, você possa ver que a altura da minha janela de visualização não está bem nela. Podemos colocar apenas 100% e, portanto, ele preenche tudo completamente, ou talvez até menor, para que você saiba que pode rolar. Às vezes, também pode ser útil que você tenha apenas 80 por cento. Mas pronto, você está pronto. Eu terminei. High-five, vá até o fim. Você ganha um prêmio. Nós dois ganhamos prêmios. Nós dois chegamos aqui. Espero que você tenha aprendido alguma coisa. Eu senti que era uma parte importante do final do curso unir tudo e ver como as diferentes partes se conectam. E espero que você também tenha visto que existe a maneira certa de fazer as coisas. E depois há o, está funcionando e está tudo bem e artistas que estão em navegadores diferentes, e isso fará muita resistência ao designer. Portanto, há muitas coisas que especialmente com o tamanho do nome, é importante ver. Especialmente se o designer, eu sei agora quando estou projetando, que eu deveria estar procurando por títulos mais longos. Portanto, é ótimo quando você está projetando e desenvolvendo o site. Sim, é isso mesmo. Obrigado por ter vindo na viagem. Espero que tenham gostado e nos vemos em outro vídeo em breve. Tchau. 116. Projeto de curso 08 - comércio eletrônico: Ei, é hora do dever de casa, não do dever de casa. É uma aplicação prática e divertida do seu conhecimento. O que vou fazer é fazer com que você faça o mesmo que fiz no longo vídeo anterior à criação de uma loja de comércio eletrônico, você só precisa fazer um paciente. Eu tenho que fazer todos os três. Depende de você se você tem tempo duplo três, mas o mínimo é apenas uma das páginas. Escolha a página inicial, a página de navegação do produto ou o preço da lista de produtos. O que eu quero dizer com isso? Vamos dar uma olhada no site real. Lembro que há 12 e, em seguida, a página real do produto, basta fazer uma delas. Quero que você se acostume a adicionar o recorte e qualquer página que você tenha na íntegra ou é um ticket nela? Ok. Então pegue isso e coloque na página de navegação, se é isso que você vai fazer, ou na página inicial ou em duas ou três páginas, vai demorar um pouco, cerca de uma hora, de acordo com Dan. Então, sim, é um trabalho razoavelmente grande. E não é de novo, pontos de estilo, ok, não se trata de quão bonito é, como é ótimo, como é a interface do usuário. Trata-se de viver a funcionalidade e praticar o fluxo de trabalho. Esse é o tipo de lugar onde pelo menos uma das páginas, todas as três, se você quiser, usa seu próprio produto ou empresa. Ok. Então, basta desligar, por exemplo, não faça Scott T, você pode simplesmente colocá-lo em alguns textos esfriando em seu próprio nome. Se você fez o curso Figma ou XD, é um ótimo momento para voltar a esse design e extrair coisas dele. Se você ainda não fez isso, não se preocupe, basta criar um nome de marca. Escolha algumas cores, escolha um produto, pegue algumas imagens do Unsplash ou talvez você tenha algumas de suas próprias coisas. Ok. Eu tenho três produtos. Você não precisa trazê-los com um CSV, basta carregá-los. K, quero que você tenha o botão do carrinho e o botão Adicionar ao carrinho. A grande prática aqui é descobrir como fazer com que essa coisa faça o que você quer e apenas praticar fazer o Adicionar ao carrinho funcione lá. Então você precisa de pelo menos uma variável, que é como eu mostrei lá, os diferentes pesos que você pode ter de cor diferente, tamanho diferente dependendo do que você está fazendo. Portanto, três produtos com pelo menos uma variante de pontos de interrupção. Portanto, certifique-se de que funcione em todos eles. Quero que você personalize o carrinho. Agora eu tenho que fazer o máximo de uma vez que você seria capaz de ser capaz de gostar da mesma maneira duas vezes. Eu quero que você possa entrar aqui e realmente mudar o estilo nele. Ok, então veja se você consegue descobrir como entrar lá e fazer isso. Portanto, escolha pelo menos uma página, mas três produtos na seção de produtos do seu site de comércio eletrônico. Ele pode permanecer como o site gratuito, fazer com que funcione em todos os pontos de interrupção em um carrinho e no botão do carrinho e ver se você também pode personalizar esse algodão . Então, faça uma captura de tela da sua página e de todos os diferentes pontos de interrupção, ok, meu aplicativo carrega ou você pode acabar enviando muitos deles. Se você fizer todas as três páginas e todos os tipos de pontos de quebra de outono, poderá pular a paisagem móvel. Você pode dizer que eu não gosto desse ponto de ruptura , pois ele não estava lá. Mas tenho certeza de que há muitas pessoas que percorrem sites na vertical, na horizontal. Vamos também fazer uma captura de do carrinho e fazer o upload dela. E eu adoraria ver isso, especialmente se você o enviar nas redes sociais. Se você fizer algo como seu próprio projeto, se você acabar fazendo Scott T, Ok, experimentando o seu próprio, porque seria empolgante e você poderá usá-lo em seu portfólio. Tudo bem, esse é o seu projeto de classe. Aproveite, aproveite o processo, divirta-se ficando preso. Porque quando você finalmente descobre, tudo isso é um bom aprendiz. Tudo bem, é isso. Nos vemos no próximo vídeo. 117. O que vem depois do curso do Webflow Essentials: Você conseguiu. Eu sabia que você faz isso. Nem todo mundo faz isso. Muito bem feito. Você vai ficar rico em fibras, nós fizemos isso. Pronto não é fácil chegar aqui. E eu só queria dizer, Boa Anya, porque nem todo mundo, todo mundo gosta de assistir TV e você está aqui fazendo Webflow o tempo todo. Muito bem feito e parabéns. E o que faremos agora é apenas falar sobre o que fazer depois disso, como minhas sugestões. Talvez você queira dar uma olhada em alguns outros cursos de Nick. Deixe-me explicar esses. Você poderia nos dizer que perdemos minha linha de pensamento lá? Vamos falar sobre os diferentes cursos que você poderia fazer depois disso. Porque quando o fluxo nos leva a um certo ponto, falei algumas vezes ao longo do curso, como se você ainda não o fez, Figma ou XD são como um bom lugar para se estar antes Webflow fazendo o design lá. Então, eu tenho cursos para os dois. Vá conferir meus Figma ou XD Essentials. Além disso. Outra coisa muito útil a saber quando você está usando o Webflow é o código. Nós meio que nos dedicamos a isso e meio que aprendemos sobre aulas, carros alegóricos e todo tipo de outras coisas. Existem alguns HTML e CSS fundamentais que seria muito útil conhecer. Mesmo que você não queira codificá-lo. Isso ajuda muito no fluxo de trabalho. Então ela tem, eu tenho algo chamado curso Web Design Essentials. Usa o VS Code como, como a coisa. Então, é muito cody. É apenas código, mas eu dei uma olhada na introdução e algumas outras coisas são que eu sinto que a dividi relativamente bem nela. Então vá conferir isso. Além disso, Malcolm, não o desenvolvedor, traga seu laptop, tem um curso muito legal sobre vento de cauda e avalanche, que é uma espécie de CSS. Se você não vai diminuir, especialmente um pouco mais do código, a rota pode fazer com que suas próprias coisas e os ventos favoráveis sejam uma estrutura CSS muito boa e, assim como o Avalanche, é ótimo para JavaScript, então confira também. Outros cursos eu tenho lóbulos, Photoshop. Há um essencial e um avançado para Photoshop Illustrator InDesign após Premiere Pro InDesign corrigido, eu digo isso. Então, esses são alguns cursos que você pode continuar com. Além disso, se você gostou do curso, não deixe de contar para seus amigos, familiares e colegas. Além disso, se você tiver a habilidade e a facilidade, eu adoraria um backlink para o curso de fluxo de trabalho, incrível curso Webflow de Dan. Clique aqui para encontrar algo parecido. Essas coisas são muito valiosas para mim e para minha empresa, mais do que a maioria das pessoas sabe. Se você puder, isso seria ótimo. Além disso, um grande obrigado à equipe de traga seu laptop. Eu sou apenas o rosto bonito aqui na frente. E muito trabalho acontece nos bastidores com meus editores, Jason Hummels e Taylor Coleman. Muito obrigado. E também um grande obrigado a Stephen Butler e sua equipe de assistentes de ensino que nos ajudam com toda a equipe de perguntas e respostas. Além disso, neste momento, às vezes pessoas que são novas, se você já é um web designer, você é um web designer, ok? Ou desenvolvedor ou engenheiro. E você está apenas aprendendo o fluxo de trabalho como uma ferramenta extra. Alguns de vocês, porém, ficarão um pouco mais apreensivos. Um pouco da síndrome do impostor, como o web designer do MIT. Agora, totalmente, ou eu te dou permissão para escrever web designer ao lado do seu nome. Você está usando o Webflow e incrível ferramenta popular para criar sites interativos e acessíveis. Então vá lá, tenha orgulho e se chame de web designer. Mas eu te dou permissão para todos. Bem feito. Chegamos aos n's. Parabéns novamente. Vá embora. B3. Eu não sei. Eu não sei como fazer esses cursos. Sim, eu vou acenar e vamos desaparecer para preto. Você está pronto? Você acena para sentir que nos conhecemos. Veremos, nos vemos em outro curso. Tudo bem. Tchau. B mais ou dê crédito ao final desses vídeos.