Webflow para iniciantes: crie seu próprio site de portfolio

1. Introdução: Ei, meu nome Jeremy e eu sou um designer de marca de Sydney, Austrália, e eu tenho projetado sites há mais de oito anos. Eu usei tudo, desde Wix, Squarespace e até WordPress, mas agora aproveitei o poder do Webflow. Eu estive projetando no Webflow cerca de três anos e quero compartilhar com vocês todo o meu conhecimento que aprendi sobre como criar sites para mim, mas também para clientes, e dar-lhe todos os ferramentas práticas e dicas que aprendi para ajudá-lo a criar seu site. Se você quiser aprender a criar designs incríveis, especialmente quando se trata de tipografia, layout e UI, vou compartilhar algumas dicas de design de sites. Vou te dar alguns sites onde encontro minha inspiração pessoal. Vou mostrar o fluxo de trabalho e os preços de usar os blocos de construção, usar o modelo de caixa e criar um site simples que seja funcional, que também tenha algumas interações. Vou mostrar um pouco da animação, também vou detalhar como você pode importar algum código lá. Vou mostrar todas as configurações e todos os conceitos básicos sobre como usar o Webflow, como tudo funciona e honestamente dar-lhe minha experiência pessoal sobre como usá-lo. Para o seu projeto de classe, você criará e projetará seu próprio site do zero, seja você um designer, um artista ou talvez um fotógrafo, e queira construir seu portfólio, então esta classe provavelmente será ótima para você, porque você pode se desafiar a criar um site do zero e o mais legal é que você não precisa saber nenhum código para Webflow, é um código sem código Visual Builder. Se você quer aprender a ser um web designer poderoso ou talvez apenas aprender a criar sites como um hobby, então definitivamente confira esta aula, é ótimo para iniciantes, designers gráficos ou pessoas que só querem aprender um novo hobby. Inscreva-se hoje e te verei na aula e espero ver você criando sites incríveis. 2. O que é o Webflow?: O que é Webflow? Webflow é uma criação de site visual sem código. Agora, usei tudo, desde Squarespace, Wix, WordPress e até Shopify, e posso dizer que, de todos eles, Webflow é o melhor porque é fácil, é funcional, tem tantos recursos, e é simplesmente incrível em geral. É muito legal porque você pode realmente criar sites em pleno funcionamento, desde blogs a e-commerce, então apenas sites normais simples, mesmo que sejam para o seu portfólio. É por isso que adorei a versatilidade do Webflow, e é isso que é. É tudo sobre criar e projetar um site da maneira que você quer sem ter que conhecer todo esse código e todos esses outros jargões, você pode realmente criar sites com bastante facilidade. É simples, e tudo visual, torna muito mais fácil construir todos os blocos juntos. Agora, quais são alguns dos benefícios ou os profissionais do Webflow? Alguns deles são, é uma solução tudo em um, é fácil para os clientes atualizá-lo e editá-lo quando você finalmente entregar nosso site do cliente, você não precisa de nenhum plug-ins também, também tem muitos recursos como incorporação HTML, você também pode exportar código, o que é legal se você for um desenvolvedor, e eu quero ir mais fundo com o código. Tudo está hospedado em um só lugar, então eu não preciso descobrir e contratar Bluehost ou algum outro serviço de hospedagem, tudo está integrado. Ele também inclui uma CDN, que é uma rede em nuvem que permite que seu site seja muito mais rápido porque utiliza servidores em todo o mundo e, além disso, tem o Academy X, que está cheio de tutoriais sobre como mostrar a você como aprender Webflow e a grande comunidade também, montes de apoio nos fóruns, e as pessoas estão dispostas a ajudar e dar conselhos. Esses são os benefícios e os profissionais disso. Os contras, só consigo pensar em três. O principal deles é o custo que, porque você vai pagar pela conta e pela hospedagem, pode ser um pouco caro, mas você só precisa pagar depois de usar dois ou mais sites, então é grátis sob isso, então é um negócio bastante decente. Então, por último, é a curva de aprendizado. É muito maior porque você precisa entender como as coisas funcionam. Você tem que entender um pouco de HTML e CSS, mas não precisa de nenhuma experiência de codificação. Você só precisa entender as ferramentas e vai aprender que não é tão fácil quanto arrastar e soltar. Você vai descobrir isso. 3. Modelo de caixa: [MÚSICA] Agora quero mencionar o modelo de caixa. Isso é baseado em CSS. É tudo sobre os blocos de construção e as principais funções sobre como um site funciona quando você o está construindo. Há quatro blocos de construção chave. O número 1 é o conteúdo. O número 2 é o preenchimento. número 3 é margem e o número 4 é de borda. Esses são os quatro blocos de construção que precisamos entender antes de começarmos a trocar o tamanho o layout e todas essas coisas. Vou mostrar uma imagem aqui muito rápido. Você pode ver aqui que é tudo sobre ter caixas. Não sei se você sabe sobre uma boneca russa, como você abre e tem um pequeno e um pequeno e você continua abrindo. Tem todos esses blocos dentro dele. Pense em recipientes dentro de recipientes ou caixas dentro de caixas. É disso que se trata. Quando você tem um bloco que está usando para lançar imagens ou texto dentro dele, você começa com o conteúdo principal. Então você tem o preenchimento do lado de fora. Então você tem a borda que é o contorno ou o lado de fora do preenchimento. Então você tem a margem que é a borda e fora da caixa. Às vezes, se você quiser ajustar o espaçamento entre dois objetos, tudo o que você precisa fazer é ajustar o preenchimento. Talvez você queira adicionar um contorno à sua caixa. Em seguida, você ajustaria a borda e adicionaria um traçado a isso. Isso é basicamente o que é o modelo de caixa CSS. Tentando mantê-lo muito simples, mas é bom ter o entendimento, então quando você está construindo os blocos, você se lembra, tudo bem, essas são partes e blocos de construção juntos. 4. Inspiração e ferramentas: [MÚSICA] Vou mostrar alguns sites incríveis onde encontro inspiração e algumas ferramentas que você pode realmente usar para seus sites. número 1 será Dribble, eu sempre vou aqui para inspiração no design da interface do usuário, então, se eu digitar o design da interface do usuário, você pode ver que você obtém um monte de designs e sites, e tudo é visualmente bonito. Basta lembrar de uma coisa que nem todos esses sites são funcionais, ou são projetados e realmente construídos em um Webflow ou em um site, eles podem ficar lindos, mas nem sempre é prático, ou são projetados e realmente construídos em um Webflow ou em um site, eles podem ficar lindos, mas nem sempre é prático, certeza de que você pensa sobre isso, mas tem um design incrível aqui e eu acho que é um ótimo site. Em seguida, temos o Behance, outro ótimo site, especialmente se você for um designer. Eles têm sites incríveis, eles têm branding, todo o shebang aqui. Você pode percorrer aqui e ver todos esses sites interessantes aqui tem um monte de conteúdo aqui. O próximo é, na verdade, a vitrine do Webflow. Se você for ao site Webflow e clicar em “Showcase” no canto superior, verá que ele mostrará todos esses sites criados com o Webflow. Eu posso ver um monte de novos aqui, eles estão parecendo muito legais e o legal sobre o Webflow é que você pode realmente clonar alguns desses sites, eu vou te mostrar como fazê-lo em outro módulo mas eles têm tantos designs legais como mesmo se eu clicar neste. Isso parece lindo, veja isso tem algumas interações nele e sim, eu acho que isso é incrível. Posso clicar em “Abrir” no Webflow, se eu quiser ver rapidamente como ele é construído e você pode ver aqui, posso ver todos os elementos e é simplesmente incrível como podemos fazer isso. Posso ver todas as caixas pretas muito legais. Essa é a vitrine do Webflow. Em seguida, são alguns modelos, chama-se flowbase.com. Agora, se você acessar este site, você pode realmente baixar alguns modelos gratuitos, mas eles também têm modelos compráveis. Talvez você esteja construindo um site de associação ou precise um tipo específico de layout, design ou componente, você pode realmente obtê-lo desses sites, por exemplo, você pode ver que eles realmente têm modelos de site normais, mas eles também têm apenas componentes básicos que você pode obter. Estes 150 dólares você pode obter um temporário para construção, então talvez seja para um cliente que você possa economizar tempo e apenas baixar um modelo e, em seguida, projetá-lo da maneira que quiser com as cores e a marca, etc, e as fontes. Este é um site muito legal, adoro ir a modelos. Se eu for a modelos e clicar em “ Modelos gratuitos ” no menu lá, todos eles podem ser baixados e você literalmente copiará e colará em um projeto de site. Torna super fácil e economizará muito tempo. Em seguida, é Awwwards com três W, não me pergunte por que eles fizeram isso. Mas eles geralmente fazem competições que vários designers a cada ano enviam seu site e eles são classificados apenas para inspiração básica, na verdade muito bons também. Eles são mais criativos, estão mais fora da caixa em vez do site padrão baseado no cliente às vezes é apenas mais para abstrair e ganhar. Você pode conferir esses. Eles têm um menu aqui para que você possa conferir as coleções ou os vencedores, por exemplo, em coleções eles têm e-commerce, eles têm pairamentos e cursores, um monte de coisas. Talvez eu queira olhar para galerias de imagens e apresentações de slides, eu vou clicar nisso, e ele vai aparecer e me mostrar um monte de exemplos de uma galeria, por exemplo, eu vou clicar nessa e isso parece bonito legal. Posso me inspirar a fazer isso, sem ideia disso ou algo parecido . Acho incrível. O próximo é, land-book.com. Este é um site incrível, estou nisso há algum tempo. Se eu simplesmente rolar para cima, você pode ver que é basicamente inspiração no site. Você tem portfólios de aterrissagem, então, no canto superior esquerdo, você pode ver talvez eu queira filtrar por carteiras e ver alguns exemplos disso, e veja todas essas vistas incríveis para inspiração, super incrível. Talvez eu só quisesse clicar em um deles e, por exemplo, vamos clicar neste aqui. Você pode ver no lado direito, ele realmente me mostrará o site para que eu possa clicar nele e ir conferir. Eu posso percorrer e ver esse design principal aqui, realmente gostei do esquema de cores aqui apenas preto simples e a cor acinzentada. Tem alguma interação que é muito droga. Este é um ótimo site para se inspirar e conferir. Agora, mobbin.design é outro, Mobbin ou Mobbin, eu não sei. Basicamente, eles recebem uma biblioteca inteira cheia de diferentes startups de tecnologia e negócios reais e eles olham a tela, então principalmente é para designs de interface do usuário móvel. Você pode ver que você tem um monte, por exemplo, Klarna é um aplicativo de pagamento como o Zip Pay. Você pode ver todas as telas, você pode até baixá-lo, o que é insano e copiar design ou se inspirar, para que você possa ver todas as telas do aplicativo real e isso economizará um tom de tempo, especialmente se você estiver criando um site que precisa ser responsivo para dispositivos móveis , este seria o site a ser verificado. Se você é alguém que adora ilustrações, você pode conferir um monte de sites que um é chamado blush.design, você pode conferir isso. Agora você pode combinar imagens diferentes e fazer algumas ilustrações você mesmo. Eles também têm coleções diferentes, se eu for a coleção Beep Beep, você pode ver que você pode baixar todos esses ativos, o que é muito legal. Eles têm alguns de graça, mas também têm planos diferentes , você pode conferir. Eles têm o plano gratuito e eles têm US $12, é um site legal para algumas ilustrações há muitos outros sites como Envato Elements que eu uso, mas estou apenas mostrando alguns especificamente para ilustrações. Você também tem ilustrações pretas também, talvez você queira algumas imagens de estilo africano, elas são realmente ótimas. Como você pode ver, alguns dos pacotes são pagos, acho que a maioria deles são, mas há alguns pacotes gratuitos, mas este é um site muito bom se você quiser adicionar algumas ilustrações diferentes aqui também. Talvez eu queira algum tipo de negócios que você possa conferir, eles têm como esse pacote legal e isso seria realmente ótimo. Agora, se você quiser alguns Ícones 3D, 3dicons.co, este é um pacote gratuito projetado por um dos meus companheiros, seu nome é Vijay. Você pode baixar todos eles como PNGs ou até Figma. Se você está projetando Figma, você pode realmente obter todos esses arquivos e você pode ver um monte de ícones aqui, o que eu acho muito legal, realmente [inaudível] Se você gosta desse estilo 3D, definitivamente pense em conseguir alguns desses, acho que é realmente incrível. Agora, se você quiser mais ícones 3D, ilustrações, um monte de coisas, você pode conferir iconscout.com. Eles têm alguns planos de preços. É bastante acessível, é só o quê? 12-13 dólares, você tem todo o acesso e você pode obter um monte de imagens. Talvez eu queira até mesmo animações para web player, eu posso ir para a animação Lottie e você pode ver há um monte diferente deles que eu posso usar para um site como você pode ver, super droga, então isso é outro ótimo site eu recomendo. Se você quer especificamente apenas ícones, flaticon.com é realmente ótimo, eles têm planos muito baratos, eles também têm um plano gratuito, monte de ícones diferentes, então definitivamente confira Flaticon. É bem simples, eles têm pacotes diferentes e coisas assim. O próximo também seria thenounproject.com. Eles têm mais de três milhões de ícones, vamos digitar uma pirâmide ou algo assim , veremos o que aparece. Você pode ver todos esses ícones aparecerem um monte de estilos diferentes, alguns são traços finos, alguns são grossos, mas você pode literalmente baixá-los e usá-los para seus projetos. Você pode dizer que obtenha esse ícone e, obviamente, você precisa de uma conta gratuita para obter esses ícones. Onde você pode obter algumas fontes do Google? Basta ir para fonts.google.com e você pode realmente baixar um monte dessas fontes, elas são gratuitas para uso comercial. Eu uso elementos Envato para obter minhas fontes e uso outros sites também. Por fim, acabamos de ter um grupo no Facebook. Essa chave é chamada de designers Webflow globais. É basicamente um grupo em que um monte de designers de fluxo de trabalho de todo o mundo se ajudam a dizer, se você quiser fazer perguntas ou precisar de ajuda com algo, este é um ótimo grupo ser e as pessoas postam inspiração e um monte de coisas diferentes. Portanto, é um grupo gratuito, membros 20K, basta participar dele. Eu não tenho nenhuma afiliação com ele, então confira. Temos apenas alguns canais do YouTube que eu adoro, eles se concentram especificamente no Webflow. Um é chamado Timothy Ricks. Ele tem tutoriais incríveis, realmente incríveis, e você acabou de ver que há design e outras coisas. Isso é realmente ótimo para Webflow e, em seguida, outro cara também, Caler Edwards, ele tem alguns designs legais especificamente no Webflow também, confira esses canais e espero que todos esses recursos e ferramentas ajudam você. Sei que pode parecer muito, mas eles realmente ajudarão você a começar a projetar seu site. 5. Princípios de design de sites: Quero dar cinco dicas de design de sites que realmente me ajudaram e acredito que você precisa implementar quando estiver projetando seu site. O número um são imagens de heróis. Quando se trata de imagens de heróis, elas precisam ser ousadas, deslumbrantes e bonitas porque você precisa chamar a atenção de alguém. Quando alguém entra nesse site, você literalmente tem cinco segundos para impressioná-lo e é por isso que você vê todas essas startups de tecnologia e essas grandes empresas, elas têm maquetes incríveis e desenhos na primeira página, na própria imagem do herói, que é a principal imagem do herói no topo da página inicial. É disso que se trata; chamar a atenção, ser visual, ser ousado, ser criativo, mas fazer que ele se destaque e seja funcional também. Quando você pensa em imagens de heróis, pense em usar ilustrações, imagens em negrito, pense em cores, pense em como você pode torná-lo interessante. Minha segunda dica é simplicidade. Quando se trata de projetar um site, é simples? É fácil de entender? Este é um botão, este é o cabeçalho, esta é uma imagem. É fácil digitalizar o site e entender como ele funciona? Porque precisamos deixar nossa mensagem principal clara. Nossa mensagem principal, nosso marketing e nossos títulos fazem sentido? É fácil de ler? Essas são as coisas que fazem parte da simplicidade que eu quero garantir que eu implemente no meu site. Certifique-se de que seja simples, certifique-se de que está claro e certifique-se de que também seja funcional que alguém possa realmente usá-lo sem ficar frustrado. A terceira dica é o CTA, que significa call to action. Você tem uma simples chamada à ação ousada ? Pense em um botão. Tem um alto contraste? Tem cor? É mais fácil clicar? Ele tem um estado de paira em cima dele? Porque você precisa ter certeza de que um botão é consistente em todo o site para que alguém saiba, se eu colocar meu mouse aqui, será um botão que leva a um link ou uma página ou algo assim assim. Sempre deixe a chamada à ação clara no botão. Às vezes, você pode ter uma chamada agendada ou reservar agora ou entrar em contato agora ou fazer uma cotação hoje. Seja o que for, pense em um título arrojado e claro quando se trata um call to action porque você quer que alguém aja, tome medidas, dê os próximos passos. Seja reservando para você um e-mail ou uma chamada, se você é um cliente ou seja o que for. Certifique-se de que sua chamada para ações realmente se destaque. Eu sempre uso cores e tipicamente foi isso que eu fiz para que ela se destaque. Eu uso uma cor de alto contraste que é realmente o oposto do plano de fundo, e é assim que eu costumo fazer minha chamada para ações. dica número 4 é a estrutura; a forma como você estrutura seu site é importante. Como mencionei antes, temos a imagem do herói no topo da página. Então você tem que pensar, ok, o que vem a seguir? maioria das vezes, a prova social é muito boa, mostrando logotipos de clientes anteriores ou marcas com as quais você trabalhou, que aumenta a reputação e a confiança. Você pode pensar, eu preciso colocar trabalho ou projetos ou serviços. Preciso adicionar depoimentos ou avaliações se for um lado do produto, preciso ter um rodapé na parte inferior. Talvez eu precise ter um blog em algum lugar lá ou tenho uma incorporação de email marketing que eu preciso no topo poder obter mais opt-ins por isso. Pense na estrutura do site e no layout. É muito importante que você construa antemão e o projete que, ao criar o site, tenha uma estrutura clara e fácil de navegar. Planeje seu site, pense logicamente e pense na hierarquia. Quais são as informações mais importantes que um cliente ou um cliente precisa ver? Coloque isso no topo. As coisas na parte inferior devem ser as menos importantes, mas manter todo o resto claro. Minha última dica é a navegação. Quando se trata de navegação, a experiência do usuário é tudo. Tudo precisa ser fácil de seguir, e tudo precisa fazer sentido. Os nomes das páginas fazem sentido? Os botões fazem sentido? Porque se for uma má navegação, alguém vai ficar frustrado e pular do site. Pense em como os botões interagem, pense se alguém está em um celular, o menu de hambúrguer reage muito rápido enquanto eles clicam? Ou é muito longe à direita ou o que quer que seja? Pense na navegação, como tudo flui juntos. Pense em, qual é a próxima página da primeira página? Qual botão vai para qual página? Pense nas etapas lógicas que alguém quer tomar ou nos passos que você quer que eles tomem guiando-os pelo design do site. Essas são minhas cinco dicas quando se trata de design de sites. Há muito mais, mas espero que isso lhe dê alguma inspiração. 6. Noções básicas da interface do Webflow: Agora vamos chegar à parte divertida. Vamos construir esse design no Webflow. No Adobe XD, acabei de criar duas páginas aqui, como você pode ver. É um 1920 pixels por 1080, e você pode ver que acabou de ser realmente simples, adicionou um pouco de trabalho lá, alguns serviços, seção de depoimentos, botão de chave com um título. Em seguida, temos uma página para uma peça de portfólio ou uma obra de arte. Talvez você seja um fotógrafo, talvez você seja um designer de logotipos, seja lá o que for, pode funcionar para você. Como parte da criação do seu projeto de classe, você precisará construir seu site, e você pode acompanhar ou tentar fazer suas próprias coisas. Você pode ver aqui que eu fui em frente e exportei alguns dos ativos já. Se eu for para meus ativos aqui, tenho a estrela, a flecha e, em seguida, apenas as outras formas também. Posso importar isso para o Webflow. Vou para Webflow. Vou para o canto superior direito e clicar em “Novo projeto”, e isso está no seu painel, para que você possa iniciar um novo projeto. Vou selecionar o primeiro onde ele diz Blank, como você pode ver lá. Vou clicar em “Selecionar”, depois vou dizer Projeto de classe Skillshare , clique em “Criar site”. Você pode nomear o que quiser, provavelmente colocar seu primeiro nome. Agora estamos no Webflow. Antes de começarmos a projetar, quero passar pelo básico da interface Webflow. No topo, você verá essa barra, e elas são chamadas de pontos de interrupção. Agora você pode ver que eu tenho esse ponto de interrupção automático, que é o ponto de interrupção da área de trabalho. Se eu mover meu mouse sobre ele, você poderá ver o ponto de interrupção Base, que é a área de trabalho, e você sempre deve começar a projetar na área de trabalho. Esse motivo é que, quando você projeta a partir do desktop, cada alteração que você faz seguindo na visualização do iPad e, em seguida, no celular, os designs caem para baixo, então é como uma cachoeira. Se você fizer alterações na área de trabalho, isso deve afetar as outras. Mas se você projetar a partir de dispositivos móveis, as alterações feitas não afetarão a versão para desktop. Apenas tenha isso em mente. O que eu posso realmente fazer é clicar aqui. Posso alterar a largura para 1080. Você também tem algumas outras opções aqui, mas vou pressionar “Enter”. Agora você pode ver que ele mudou, e esse é o nosso ponto de interrupção. Posso clicar no outro ponto de interrupção para ir para a visualização do tablet, que é a visualização do iPad. Você tem um cenário móvel, eu raramente crio para isso porque as pessoas não assistem a vídeos assim, a menos que estejam em um trem ou algo assim. Então você também tem o ponto de interrupção móvel. O mais legal é que você pode realmente arrastar essa guia. Se você sabe que está projetando para um telefone ou celular específico, você pode arrastá-lo e, se você prestar atenção na parte inferior enquanto eu estou arrastando, ele está aparecendo nos diferentes tamanhos de telefone, então 360 pixels são um Galaxy S8, S9, etc. Você pode ver que o iPhone 12 é um pouco mais amplo. Vou clicar de volta para os pontos de interrupção. Você pode ver nos pontos de interrupção, ele deve salvar os pixels. Você pode ver se eu voltar atrás, não está salvando o 1080 para o qual eu defini e isso é porque precisamos fazer um novo ponto de interrupção. À esquerda você vê esses três pontos, posso clicar nisso, e você pode ver que posso adicionar um ponto de interrupção específico. Talvez eu queira o 1920, vou clicar nele e clicar em “Criar”. Agora você pode ver que ele tem esse ponto de interrupção, 60% lá, e esse ponto de interrupção está em 100% lá, o que é legal. Basicamente, é assim que você usa os pontos de interrupção, muito simples, muito fácil. Agora vamos para o navegador. No lado esquerdo, temos nosso navegador. Você pode pressionar “Z” para desligar e ligar isso , e isso traz isso à tona. É aqui que temos todos os nossos elementos e nossa camada. Pense nisso como camadas do Photoshop, é aí que estão todas as nossas caixas, todas as nossas camadas e todas as coisas que estamos usando para empilhar tudo. Suas seções, suas caixas, seu Nav, etc. canto superior esquerdo, para o botão de adição, você pode adicionar elementos. Você também pode adicionar layouts. Se eu clicar em “Layouts”, posso arrastar um layout pré-fabricado, talvez eu queira uma barra de navegação, Sticky Nav, eu posso arrastar isso e ele vai adicionar essa barra de navegação lá no topo, super fácil. No meu navegador, você verá que ele vai aparecer, agora eu tenho o Sticky Nav lá, eu tenho um Container. Dentro disso, eu tenho o Nav Grid, e os Itens da Lista, etc. Você tem muitas opções aqui, brincar com elas, se divertir com ela, experimentar. Temos seções, contêineres e grades que definitivamente usaremos. O Div Block é o bloco básico que construímos, e sempre usaremos isso. Você tem tipografia, cabeçalhos, parágrafos, citações, etc. Você tem os itens do CMS. Você pode adicionar vídeos do YouTube, animações, formulários e componentes do YouTube. Se você quiser adicionar código HTML, você pode adicionar e incorporar, para que eu possa soltar um código de incorporação lá, soltar o código e, em seguida, ele deve adicionar o código lá, obviamente não o temos agora. O próximo é símbolos. Um símbolo é basicamente como no Photoshop ou no Illustrator, quando você salva um símbolo, é basicamente quando você cria um botão, você pode salvá-lo como um objeto ou símbolo, e ele criará um instância para que você possa reutilizá-la por todo o site, e ela terá a mesma funcionalidade. Super útil, economiza tempo. O terceiro é o seu navegador lá. Em seguida, temos Pages na quarta guia. Temos páginas do Utilitário, você tem E-Commerce e CMS, estes só aparecem se estiverem ativados, obviamente. Com o Pages, você pode ver que posso clicar no entupimento, posso renomear o nome da página, posso definir outras páginas como a página inicial. Você também tem suas configurações de SEO aqui, que podemos discutir um pouco mais tarde. Se você quiser adicionar uma página, você pode ir para o canto superior esquerdo e clicar em “Adicionar página”. Vou adicionar as páginas que eu quero. Farei minha página Sobre, irei a página Contato, depois voltaremos e iremos para o Trabalho, ou você pode fazer portfólio, o que quiser. Você tem essas páginas, para que eu possa arrastá-las, e você pode ver a remodelação, super fácil de fazer. A quinta guia que você pode ver é CMS Collections, não vamos usar isso. Você também tem a seção de cartão, precisa pagar pelo comércio eletrônico, então não vamos usar isso. Então você tem seu gerente de ativos, é aqui que colocamos nossos ativos. Vou voltar aos meus ativos aqui, arrastar e soltar esses arquivos. Antes de fazer upload de arquivos, o que você quer fazer é ir para o TinyPNG e compactar os arquivos, porque você quer que o site carregue mais rápido. Quanto maiores os arquivos, eles precisam ser compactados, então o TinyPNG comprime as imagens. Por exemplo, esse arquivo é muito grande, posso arrastá-lo para cá, ele vai compactar o PNG e, na verdade você pode vê-lo reduzido 60%, eu posso baixar isso. Essa é outra dica rápida que você precisava lembrar também. Espero que os ativos deveriam ter sido carregados lá. Normalmente, você pode arrastar o botão, mas neste caso vou clicar no botão “Upload” lá. Vou localizar os ativos e clicar em “Abrir”. Agora está enviando-os para que você possa pressionar esse botão para fazer upload de arquivos. Você também pode adicionar pastas também. Você pode ver que eu tenho todas as imagens lá, muito legal. Então temos essa pequena engrenagem aqui para salvar seus backups, super fácil. Então, na parte inferior, você tem outras pequenas coisas, como tutoriais em vídeo. Se você ficar preso, você sempre pode clicar nisso e literalmente, assistir a um tutorial em seguida e ali. Se eu não ensinar algo, você sempre pode voltar e aprender isso. Esse é todo o painel lateral esquerdo. No lado direito, temos nosso painel de estilo. Quando temos um objeto, podemos realmente estilizar as coisas. No canto superior direito, temos aulas. Uma classe é como um estilo no Illustrator, Photoshop , InDesign, quando você cria um estilo gráfico, é assim, é assim que eu tento e penso nisso. Mas uma classe basicamente define um estilo específico para um objeto específico. Se for para um contêiner, um cabeçalho específico, etc. Também temos layout, então você tem sua estática, seu Flexbox, sua grade, etc aqui. Você tem espaçamento, para que possamos ajustar nossas margens, e podemos ajustar o preenchimento também , pelo qual iremos passar. Você tem tamanho, então qualquer coisa, a largura, a altura. Você tem o estouro, portanto, se a imagem estiver fora dos limites de uma caixa div ou de um contêiner, então você pode ajustar isso. Você também tem posição, que passaremos por isso. Você também tem tipografia, então temos todas as fontes aqui, super úteis. Você tem peso, tamanho, cor, alinhamento, estilo, ferramentas muito semelhantes se você é um designer e já usou coisas assim antes. Você também tem fundos, para que possamos adicionar imagens, podemos adicionar fundos, gradientes, podemos adicionar recortes, como uma máscara de recorte, o que também é interessante. Também temos borda, para que possamos adicionar uma borda a um objeto. Podemos adicionar um traço também. Então você tem efeitos na parte inferior aqui. Temos opacidade, sombras, transições, filtros, etc. No canto superior direito, você tem configurações. Às vezes, quando temos um menu, por exemplo, se eu vou fazer um Nav, vou colocar um Nav aqui. Você pode ver as configurações, diz cabeçalho e, em seguida, temos ID, e você obtém algumas coisas lá. Se eu clicar no botão, você pode ver que ele tem as configurações do link. Posso escolher isso para ir para uma página, por exemplo, escolher uma página, você pode ir para uma página da web ou o que quer que seja. A próxima coisa é o gerenciador de estilos. É aqui que estão todos os seus estilos. Se você criar classes ou estilos que não está usando, basicamente, ele lhe dirá, e você clica em “Limpar”, e ele excluirá todos os não utilizados. Às vezes você pode ter um elemento e talvez você o estilize, mas então você decidiu criar um novo botão em uma página diferente, e se você não quiser, você não precisa mais dele, você exclui o estilo. Então a última opção é o menu Interações com um pequeno thunderbolt, que é um ícone legal, e aqui está a maneira como você pode adicionar gatilhos e animações, etc Basicamente, este é o básico interface do Webflow. Então vamos ficar presos, vamos começar a projetar. Uma última coisa está no canto superior esquerdo, você pode clicar no botão Webflow e clicar em “Painel” ou “Configurações do projeto”. Vai te levar de volta. Você pode ver se você precisa fazer upload de fontes, basta ir direto para as fontes. Se você quiser voltar, clique no botão “Designer” com um pequeno pincel, e ele o levará de volta ao designer Webflow. 7. Configurações de conta: [MUSIC] Vou mostrar como usar as configurações básicas da conta no Webflow. Quando você estiver no painel, você pode ver que tenho um monte de sites aqui, esses são meus sites atuais e coisas que eu arquivei também. Agora, para acessar as configurações da conta, o que você precisa fazer é ir para o canto superior direito, clicar em “Conta. Clique em “Configurações da conta”. Agora, uma vez que você estiver aqui, você vai colocar todas essas guias no canto superior esquerdo, para que você possa ver todas essas guias. Vou passar rapidamente por eles e mostrar o que eles se tratam . Primeiro você tem perfil. Você não precisa se preocupar com essa guia, é basicamente apenas as informações básicas da sua conta. Isso basicamente não é necessário. Você também pode fazer upload de uma foto. Eu recomendo fazer o upload de uma pequena foto para que você possa ver se sua conta ajuda para recursos visuais. Clique em “Planos”. explicar os planos da conta. Há uma diferença entre planos de conta e planos de hospedagem. Hospedagem é onde você realmente hospeda um site específico com todos os recursos de hospedagem e, em seguida, conta é uma conta real para criar sites com Webflow. Eu recomendo começar com a conta gratuita porque ela é gratuita. Você recebe dois sites. Você também pode fazer o faturamento do cliente e a preparação gratuita. Agora, a preparação gratuita é quando você pode visualizar o site ao vivo, não em seu próprio domínio, embora seja webflow.io. Atualmente, estou no plano Lite. Isso é o que eu recomendo, a menos que você seja um web designer louco em tempo integral e queira fazer ele é de projetos de clientes, então vá para o plano Pro. Acho que o planeta plano Lite é suficiente. Você pode ter até 10 sites. Eles os chamam de projetos. Você pode ver que diz 10 projetos aqui. Também temos faturamento de clientes, preparação aprimorada e também exportação de código. Não uso a exportação de código porque não desenvolvo necessariamente fora do Webflow. Esses são os planos da conta. Você pode filtrar por anual no canto direito ou clicar em “Mensal” e ver que o preço mudaria para US $24 por mês. Você pode clicar na próxima guia da parte superior onde há cobrança, você tem seu número que você tem seu cartão e você sempre pode alterar ou mover seu cartão de crédito como você pode ver lá. Você também pode ver o valor da assinatura que estou pagando por ano e, obviamente, todo o plano do site que eu tenho hospedagem básica. Você pode ver que eu tenho dois sites com hospedagem básica, US $15 por mês. As faturas e você tem quaisquer alterações nas faturas anteriores lá também. Em seguida, são as integrações. As integrações são se você quiser colocar uma chave de API. Talvez você tenha um modelo de terceiros que você precisa. Tenho certeza que você pode realmente usar o Zapier com Webflow e algumas outras ferramentas que permitem conexões não estão tendo integrações no momento, então não me incomodei com isso. A próxima são as ferramentas de faturamento. É quando você deseja faturar seu cliente por meio do Webflow. Talvez você queira ter um plano de manutenção em que atualize o site mensalmente. É aqui que o faturamento do cliente é muito legal. Você pode configurá-lo, começar aqui e configurar como esse faturamento funcionará. Muito provavelmente ele funciona através do Stripe ou PayPal. O próximo é o Modelo de Compra. Se você comprar modelo através do Webflow, ele aparecerá aqui. Eles também têm um ThemeForest aqui também. Se eu clicar com o botão direito do mouse em Procurar modelos, você poderá ver que eles têm muitos modelos que são como um monte de coisas e você pode ver que eles estão sempre atualizando com novos modelos. Aqui está alguém que não quer faturar do zero, quer economizar tempo e investir em um modelo. Ele aparecerá neste segundo aqui na seção Comprar modelo. A próxima coisa são as configurações de e-mail. Se você colocar uma posição no formulário Webflow em seu site, este é o e-mail para o qual o formal envia os e-mails. Você precisa ter certeza de que esse é o e-mail principal que você está usando. Em seguida, você pode selecionar as notificações por e-mail. Isso é bem simples. Você pode escolher o que deseja preencher o boletim informativo, etc. Essas são as configurações de e-mail. Você também tem segurança. Aqui você pode habilitar a autenticação de dois fatores para mais segurança e você pode alterar sua senha e, basicamente, é isso. Ele mostrará os detalhes de login, a atividade se houver uma atividade suspeita, mas ninguém estaria invadindo sua conta Webflow tão cedo. Uma última coisa, se eu for para o canto superior direito, você pode ver que diz ir para o perfil público. No Webflow, o que acontece é que você realmente tem um perfil público onde você pode compartilhar seus sites reais. Você pode compartilhar isso com a comunidade. Você pode ver que eu tenho 90 visualizações sobre isso, o que é bem legal e alguém pode ver meu site e verificar tudo isso. Você também pode editar. Você também pode desativá-lo também se não quiser que ele seja visto. É basicamente assim que você usa as configurações da conta no Webflow. 8. Configurações do site + mudar fontes: Vou mostrar rapidamente as configurações do projeto quando você quiser ver o back-end de um de seus sites. Vou usar meu exemplo do meu site atual, jeremymura.com. Depois de selecionar um site, você pode clicar com o botão esquerdo nele e ele dirá Open Designer, que levará para a parte do design onde você pode começar a criar um site. Mas em vez de clicar nisso, vou clicar nos três pontos aqui e clicar em Configurações. Você pode ver que você tem outras configurações como duplicar o site, você pode mover para uma pasta, você pode compartilhar o link e também pode ir para o editor, que é o lado do cliente da edição. Agora, vou clicar em Configurações e, na verdade, vou mostrar esta seção porque na verdade é importante em termos de construção dos sites. Nas configurações gerais, você pode ver que você tem o nome do seu site e, em seguida, você tem o subdomínio. Quando eu estiver preparando o site e para visualizá-lo, ele usará esse domínio lá. Agora, em termos de Favicon, você quer prestar atenção a este Favicon, ele diz que o tamanho do upload é de 32 por 32 pixels. Quando você fizer um ícone no Illustrator ou no Photoshop, certifique-se de salvar para a Web e salvá-lo como PNG ou JPEG nesse tamanho e certifique-se de que tudo está bom. Você pode basicamente clicar em Upload e depois soltar a imagem lá. Então você tem um pequeno ícone na parte superior do seu navegador, quando na guia, isso é um Favicon. Agora, o clipe da web, isso é apenas para iPhones. Basicamente, não preciso disso mas coloquei meu logotipo lá de qualquer maneira. A mesma coisa, basta salvar para a Web e salvá-la como PNG ou JPEG para carregá-la. Você tem localizações nos fusos horários e também pode colocar senhas de um site para que você possa clicar nele e colocar uma senha. Caso você queira que ninguém o acesse por acidente ou um hacker ou algo assim, você pode ativá-lo. Normalmente, não o uso porque minhas outras ferramentas que protegem meu navegador. Agora, mostre, como mencionei no módulo anterior, o que você pode dizer é se quiser que seu site seja exibido em público e as pessoas podem vê-lo na vitrine Webflow, na página de destino, então você pode ativá-lo, mas você sempre pode desativá-lo para obter seu perfil público. Você também tem a opção de deixar a marca Webflow ativada. Se você quiser gostar de um pequeno crachá na parte inferior do seu site, você pode marcar isso. Você pode ver, obviamente, eu desliguei porque eu simplesmente não quero, mas deixo o fluxo de trabalho no HTML, então se alguém quiser verificar o site. Então, se você pressionar F12 em um site, você pode ver o Webflow aparecerá em algum lugar aqui. Eu poderia ir procurar, eu poderia digitar Webflow e ele aparecerá aqui no código HTML. Vou clicar em Salvar lá e, em seguida, ele sempre tem atividade secundária na parte inferior. Legal. A próxima coisa é hospedar, então, se você quiser hospedar um site, então você precisa selecionar o plano certo. Agora, para meus sites básicos, se eu estiver construindo apenas um portfólio para mim ou se for uma pequena empresa que não precisa de coisas malucas, basta selecionar o Básico. Vou te dar todas as opções aqui. Você pode ler isso em seu próprio tempo. Você tem o SSL de domínio incluído, então eu estava protegido, você tem uma CDN, largura de banda, 100 páginas é abundante, e você recebeu 100 envios de formulários, o que é legal. Agora, se você quiser CMS, CMS é um Sistema de Gerenciamento de Conteúdo. Se você pode ter um site que tenha um blog grande ou tenha vários projetos ou páginas de planejamento dentro dele, provavelmente o CMS é o melhor para ir. Você pode ver os preços lá. Agora, se você quiser fazer como um negócio maior, então eu selecionaria negócios. Se você quiser fazer uma loja de comércio eletrônico, basta clicar em E-commerce e os preços aumentarão significativamente, então isso dobrará, mas você obtém recursos como integrações Stripe e PayPal. Você tem clientes que checkouts, CMS, impostos, frete, etc. Eu tinha um cliente que usava o padrão para isso e funcionou muito bem. Então, obviamente, se você selecionar anual, o preço diminuirá. Isso é para hospedagem. Então, quando você estiver pronto para hospedar seu site, tudo o que você precisa fazer é selecionar Básico e depois pagar e você está pronto para ir. Você só precisa hospedar quando quiser, porque a conta oferece dois sites gratuitos, você pode projetar o quanto quiser, o que é muito legal. Agora, o editor é a configuração do editor. Então, quando você quiser adicionar um colaborador, você pode convidar alguém. Aqui, você pode ver que meu e-mail, eu posso editar e publicar. Para fazer mais colaboradores, você precisa adicionar um plano de site de negócios ou CMS, então você precisa subir aqui. Além disso, para obter a rotulagem branca, você precisa atualizar também, e isso lhe dará acesso a isso. Isso é ótimo se você quiser que colegas de trabalho gerenciem o design ou vários clientes ou pessoas vários clientes ou pessoas da equipe do cliente gerencia seu site, então esse é um bom recurso. Você também tem faturamento aqui. Mais uma vez, posso ver o faturamento exato desse site específico e, em seguida, o faturamento do cliente, semelhante às outras configurações que mostrei no outro módulo. Em seguida, temos SEO, então a Otimização de Mecanismo de Busca, como a maioria de nós conhecemos. Você tem indexação, então eu não quero que meu webflow.io seja indexado no mecanismo de pesquisa, então eu vou me certificar de que você deseja desligar isso para que ele esteja desativado. Você tem Robots.txt. Se você precisar fazer o upload desse texto, você pode fazer isso. Você quer gerar automaticamente o mapa do site, eu tinha isso, então marque sim para isso. Isso só economiza tempo, então o Webflow faz isso automaticamente para você. Você também pode colocar a verificação do site do Google. Se você estiver usando o Google Analytics, é aqui que você coloca sua chave e se conecta com isso, torna muito, muito fácil. Então essa coisa, eu não sei o que é obviamente isso. Em formulários. Um formulário é quando você está apenas usando o formulário Webflow básico, você não está incorporando um de dizer Mail ou ConvertKit, você está apenas usando o formulário dentro do Webflow. Estes são os detalhes no preenchimento aqui. O nome, o e-mail para o qual fui enviado, então quero mudar isso para meu e-mail de saudação. Linha de assunto que pode ser nova submissão e, em seguida, responder apenas seria qualquer um deles. Se alguém o colocar através do seu formulário, mesmo que neste site eu não tenha um formulário, mas se você fizer isso, eu o enviarei para o meu e-mail. Você também pode colocar o modelo de e-mail que enviará uma pequena coisa para a pessoa que responde. Você também tem validação de recaptura, eu não uso isso e, em seguida, você tem integrações. Você também pode ocultar envios de formulários, se quiser. Restringir o acesso carregado, eu só tinha isso ligado e deixe-o assim. Agora, uma das mais importantes são as fontes. Se você quiser fazer upload suas próprias fontes para um design de site, você precisa vir aqui e fazê-lo aqui. É super fácil, é super simples. Obviamente, posso escolher fontes desta lista aqui. Na verdade, eles têm muito, eles realmente adicionaram alguns mais de um do que o último verificado, então você tem que clicar no Google Fonts. Mas você quer se resumir a fontes personalizadas. Agora, você pode ver minhas fontes instaladas. Já fiz upload dessas fontes personalizadas, que é minha fonte Montreux. Você pode ver o estilo, tão normal, Itálico, negrito, etc. Então, obviamente, é um arquivo W-O-F-F, esse é o arquivo que você deve carregar como. Você pode ver, eu posso ir para o lado direito e excluir as fontes que não quero. Se eu tiver um que não gosto, eu apenas o excluo. Você pode ver que ele tem apenas fontes de backup lá. É super fácil, você pode colocar o Adobe Fonts também, API, mas é melhor deixar , basta baixar a fonte. Se eu clicar em carregar, por exemplo, irei para minha seção de fontes. Obviamente, você pode ver o upload da fonte. Ele vai importá-lo para esta janela assim. Você pode ver o nome para que eu possa tirá-los de 400. Certifique-se de selecionar o peso certo. Seja qual for o peso em seus programas no InDesign ou no Illustrator, basta verificar novamente. Normal, e então você pode ver, eu posso trocá-lo, posso virar o pedido, etc. Então eu vou clicar em Carregar arquivo e ele será carregado aqui. Neste momento, não quero fazer isso, então vou deixar isso, mas é tão fácil e rápido. Em seguida, temos backups. backups são simples. O site salva automaticamente um backup para você, então você não precisa se preocupar com isso. Super-fácil. Você pode visualizar ou restaurar. Talvez o design, não gostou, você pode simplesmente voltar. Super-fácil. Em seguida, são integrações. Agora, aqui para esse lado específico, tenho meu Google Analytics porque ele está rastreando esse site específico em meus outros sites. Você pode ver meu Rastreamento Universal Analytics, este é o meu código. Agora, se eu fizer login no Google Analytics, tudo estará conectado. Você também tem pixel do Facebook. Aqui está o que estou fazendo. Anúncios, ele está conectado a esse pixel aqui, e você pode obter um código para isso. Em seguida, o último último é adicionar HTML e CSS personalizados. Você pode ver aqui, no código principal, eu tenho esse código aqui. Agora esse código é da Flodesk, meu provedor de e-mail. Se eu for para o Flodesk, basicamente estou usando uma API de dentro da minha conta. Isso é o que eu uso para meus e-mails. Basicamente, está dizendo ao Webflow para pegar os formulários que criei no meu Flodesk. Depois, há todas as guias nas configurações da festa. Você tem algumas outras coisas aqui, como transversal, se você clicar neste botão, poderá transferir um site para o seu cliente. Posso dividir isso em um vídeo semelhante. Você também tem o botão de compartilhamento. Você tem o botão designer, o botão de edição e a publicação, e todos estão disponíveis no designer. 9. Nav + Hero: Primeiro, vamos trabalhar no Nav, então vou para Webflow. Vou para o lado esquerdo e vou para o layout e , geralmente, fico com o Sticky Nav aqui, simples e fácil. Clique com o botão Vou clicar duas vezes no “ logotipo do Nav” e clicar com o botão esquerdo e clicar no código lá, escolher a imagem e vou selecionar meu logotipo que já fiz upload nas imagens. Legal, então o logotipo está dentro, agora vou para o lado direito e vou para o dimensionamento para que eu possa alterar o pixel dele. Vou descer e fazer como 150 pixels. Linda. Isso deve ficar bom. Agora, vou para o Nav e, no lado direito, você pode ver dentro desta caixa temos um contêiner e dentro temos a grade que contém essas listas desses outros nomes. Temos um item de lista e, em seguida, entre esse é apenas o link e esses links vão para outra página. Preciso fazer o upload da fonte, então vou para as configurações do projeto. Vou clicar em “fontes” e vou clicar em “carregar” e vou localizar minhas fontes entre, e vou precisar de negrito, regular, e este, e este itálico extra leve tão negrito, regular, clique em itálico extra leve em “abrir” e você pode ver lá dentro, e então eu só vou clicar, “carregar”, carregar e carregar e agora eu tenho essas fontes lindas. Agora, vou primeiro mudar para o site. Tenho que trabalhar sobre processo e contato. Você tem trabalho sobre. Agora, também posso pressionar “controle C”, “controle V”, e ele deve duplicá-lo. Se eu fizer isso do lado esquerdo, você poderá ver, selecionar o item da lista e duplicá-lo assim, como você pode ver no menu do navegador. Tenho trabalho, sobre, processo e contato. Agora, posso deixar este botão aqui, se quiser, vou excluí-lo e certificar-me de excluir o botão no item da lista para que possamos ver lá. Tudo bem, então eu tenho meu cardápio aqui e o que vou fazer é estilizá-lo. Para este menu, você pode ver que eu clique duas vezes nele, é 29 negrito na parte superior. Vou até a topografia, vou encontrar minha fonte, que estou usando inter para isso, vou selecionar o estilo, o peso, que também é o estilo. Clique em “negrito” e vou fazer 29, o que obviamente é muito grande nesse tamanho, mas neste 1.920 não parece tão ruim, então eu vou ajustá-lo e vamos 19. Isso parece bom e a cor, vou fazer isso como um preto por enquanto, e então clique em “mais”, e você pode ver aqui, criar. Agora, se eu voltar para o XD, você pode ver que tenho as cores aqui, cores diferentes, para que eu possa ir em frente e adicionar isso. Vou clicar duas vezes, selecionar isso e, em seguida, posso colar o código hexadecimal aqui, clicar com o botão esquerdo e clicar em “mais” e você pode vê-lo adicioná-lo e posso nomeá-lo o que quiser. Eu posso alterá-lo, apenas torná-lo cinza, pressionar “criar”. Vou fazer isso rapidamente por essas outras cores também. O que você quer fazer é se você estiver na topografia, clicar na “cor” e podemos entrar aqui e podemos adicioná-los. Agora, você pode ver este, o contraste diz que falhar , por motivos de acessibilidade. É muito bom como o Webflow faz isso acontecer, mas obviamente, ainda podemos usar a faculdade não importa se diz triplo A que é realmente bom. É apenas por motivos de contraste, mas neste caso, deve ser divertido. Vou excluir essa cor, colá-la e clicar em “mais” e criar. Linda. Tudo bem, então temos todas as nossas cores são muito legais. Só vou me certificar de que defini a cor preta e, para o fundo também, vou descer no lado direito da minha libra esterlina vá para fundos e clique na cor e estou vai torná-lo totalmente branco como você pode ver e agora temos nosso Navbar. Você pode ver que ele é totalmente responsivo se eu for para a visualização móvel. Linda. Essa é a grande coisa sobre o Webflow. É apenas responsivo automaticamente porque usamos esses modelos de layout. Incrível. Agora, vamos começar a construir o resto disso. Você tem Sticky Nav aqui e agora um truque ou atalho legal é você pressionar “control K” e eu posso digitar qualquer coisa. Se eu puder digitar div, posso digitar na seção, posso digitar no contêiner, seja lá o que for. Vou apenas digitar a seção, e você pode ver que eu vou arrastar isso para fora. Vou arrastar o Nav para dentro dessa seção, e depois vou controlar K e pressionar “Container”. Tudo bem, você também pode ir para o canto superior esquerdo e fazê-lo daqui e apenas arrastar e soltar um contêiner como este dentro da caixa, tudo bem também. Temos o Sticky Nav, temos o Container, mas você pode ver que está dentro do Sticky Nav, então eu vou arrastar isso assim e arrastá-lo para baixo. Você pode ver as camadas importarem. Certifique-se de arrastar para o local certo. Vou pressionar “Control K” e, em seguida, selecionar um bloco div. Um bloco div é basicamente como um bloco normal. Eu estava falando de quatro questões para construir um bloco de construção, como um bloco de logotipo ou um contêiner, uma caixa. O que queremos fazer é, queremos dar uma aula ou uma tag. Para este, vamos chamá-lo de invólucro e podemos tornar a largura um determinado pixel, então está em 940. Posso fazer isso 1.080 se eu quiser. Vai se estender além disso. Eu posso fazer 500 pixels se eu quiser, como você pode ver lá, então é realmente com você o que você quer fazer isso. Eu posso colocá-lo como ideias, mas digamos que você faça 600 pixels, você pode ir para o botão de espaçamento e clicar neste pequeno quadrado, e ele vai centralizar a caixa. Agora, por exemplo, se eu deixar cair uma imagem dentro desse invólucro, você poderá ver que ela está totalmente centralizada e tem apenas 500 pixels. Agora, se eu clicar no “invólucro” e torná-lo 1.000, ele expandirá isso como você pode ver assim. É bem simples. Só vou voltar. Só vou deixá-lo em 940, porque está definido isso. Agora, o que eu queria fazer é adicionar alguns elementos, então vou aqui, vou adicionar um cabeçalho. Certifique-se de clicar com o botão esquerdo e arrastar para dentro do invólucro. Vou pressionar “parágrafo” também e , em seguida, vamos precisar das duas imagens também. Só vou copiar e colar. Vou copiar e colar isso lá, e então também temos um botão, então vou mais, localizar o botão e arrastá-lo para baixo assim , então você tem um botão lá. Legal, vou deixar as imagens fora por enquanto. Legal. Agora, o que vou fazer é que eu queria estilizá-los. Este é um inter-negrito 85 pontos. Vou até a topografia, tipo 85. Pode parecer grande, porque eu estava projetando para esse tamanho aqui basicamente. Só vou fazer 45. Isso é legal. Vamos Inter, Bold. Excelente. Este é Inter , Regular ou Normal. Às vezes, ele não mostra os nomes corretamente, o que é bom. Vou usar 16 pixels. Normalmente, 16 pixels são bons. Para o botão, vou descer para planos de fundo, no lado direito, e depois vou clicar com o botão esquerdo na cor que já tinha lá. Botão, eu tenho a cor. Agora, para o texto, vou digitar e vou clicar no “menu”, e vou clicar no “menu” onde diz mais opções de tipo. Agora, isso vai me dar a capacidade de capitalizar, para que eu possa capitalizar meu botão, como você pode ver lá. Posso clicar duas vezes nisso, colar e vou ajustar o kerning um pouco, também conhecido como o espaçamento entre as letras. Posso ver o espaçamento entre letras se eu digitar cinco, você pode ver que ele vai espaçá-lo. Isso é demais. Quero fazer talvez dois. Oh, sim, eu poderia apenas fazer dois, e então vou mudar a fonte também, e isso pode ser normal, como você pode ver lá. Parece bem parecido com isso. Linda. Agora, o que eu também posso fazer é adicionar preenchimento extra. Você pode ver que temos preenchimento aqui. Eu posso segurar Alt e se eu segurar Alt, vai escalar os dois lados, que eu possa segurar Alt e arrastá-lo para fora. Talvez eu queira adicionar um pouco mais de espaço, e talvez eu queira fazer 12 pixels. Do lado talvez eu queira ficar um pouco maior assim. Certo, legal, é um botão bem sólido. Temos nosso invólucro, temos o título, o parágrafo e o botão. Agora posso dar a isso uma estrela. Ele diz cabeçalho, para que eu possa fazer o cabeçalho e digitar H1. Agora eu adicionei uma classe de combinação. Posso remover essa classe e simplesmente renomear esta para o cabeçalho H1 assim e pressionar “Enter”. Agora, este é o cabeçalho da classe H1, este é apenas um parágrafo, e então este é apenas um botão. Você sempre pode renomeá-lo. Apenas lembre-se de quaisquer outros objetos no site que você der a essa classe também, ele adicionará o mesmo estilo a ele. Certo, legal. Nós temos isso. Para este invólucro, vou adicionar uma classe de combinação, vou chamá-lo de herói. Temos invólucro, herói, e então o que eu queria fazer agora é adicionar algum preenchimento a ele, e talvez muitos pixels, dar algum espaço, dar espaço para respirar. Legal. Temos esta seção também. Agora, nesta seção, vou adicionar minhas imagens. Em vez de adicionar as imagens ao invólucro, vou adicioná-lo ao plano de fundo. No canto inferior direito, você pode ver que diz planos de fundo, imagens e gradientes. Vou clicar nisso. Vou para o lado direito. Você pode ver escolher imagem e eu vou selecionar meu carinha aqui. Vou clicar em “conter” e vou ajustar isso. Vou tirar a telha. Não queremos colocar esse cara aqui e vamos 90 por cento. Podemos ser personalizados. Talvez eu só quisesse definir em pixels. Posso fazer talvez 400 pixels. A largura e a altura. Legal, incrível. Temos esse cara, agora vamos adicionar um pouco mais de preenchimento a ele. A seção, legal. Posso adicionar outra imagem também e vou adicionar esse retângulo, desligar o ladrilho e, em seguida, vou trazê-la para a mesma posição aproximadamente. É muito grande, então vamos para 50. Lá vamos nós, e eu vou arrastar isso para o fundo para que você possa ver, eu estou arrastando para baixo do Jeremy e você pode ver agora eu tenho aquele cara lá, que sou eu. Vou para a minha seção e, na verdade, vou adicionar um pouco de preenchimento. Se eu mover o preenchimento, você pode ver que ele move a parte inferior, se eu adicionar margem, você pode ver que ele adiciona espaço fora, lembre-se, mas queremos apenas remover o preenchimento para que você possa ver que o Nav é largo, Então é por isso que a cabeça está sendo cortada, então queremos derrubar isso. Digamos apenas 100 pixels, e podemos derrubar esse invólucro também. Vou adicionar um pouco mais de preenchimento lá, e posso trazer isso assim e clicar na “seção traseira” e se eu quiser ir em frente e talvez consertar isso, talvez 250, torná-lo menor, eu posso ajuste isso e você só precisa brincar com essas configurações e, se você brincar, poderá ver isso. Só vou controlar Z para voltar. Posso desligar o 2X, mas isso está desligado. Você também pode adicionar gradientes e coisas assim e, como você pode ver, bem, eu só vou controlar Z e ficar [inaudível]. 10. Trabalhos + serviços: Legal. Assim que terminarmos isso, vamos começar a construir a próxima seção. Vou clicar no “Plus”, adicionar uma seção, arrastar e soltá-la. Como você pode ver, lindo, agora eu tenho a seção. Vou começar a construir com isso. Agora, tenho certeza que eles podem ter um layout aqui. Você pode ver que eles têm uma seção de cartão. Vou literalmente arrastar isso e soltar isso. Às vezes, você pode ver que ele adiciona a seção automaticamente, para que possamos excluir esta seção. Vou começar a copiar esse texto aqui. Agora, para tornar esse texto igual a este, tudo o que preciso fazer é selecionar o cabeçalho e digitar h1, e posso ver as classes existentes. Agora, tudo o que preciso fazer é clicar com o botão esquerdo e ele adicionará o mesmo estilo na classe. Ele vai extrair a mesma fonte e a mesma fonte e estilo de bônus. É super fácil fazer isso. Continue aqui, copie o texto que eu já tinha, que já escrevi, exclua este parágrafo. Então agora eu tenho esses cartões, o que é muito legal. Agora posso escolher uma imagem. Eu clico duas vezes nesta imagem, clique em “Escolher imagem” e, em seguida, adiciono isso assim. Eu tenho este, lindo. Só vou fazer isso rapidamente. Está tornando o processo muito simples. O estilo de parágrafo, certifique-se de que eles tenham o estilo deste. Vou digitar parágrafo, adicionar a classe. Mesmo que ele tenha o nome do parágrafo, mas você precisa adicionar a classe a ele. Estilo ao lado, e ele deve pegar a fonte. Linda. Agora, o que vou fazer é clicar na Seção de Cartões. Você pode ver que estou na área da Seção de Cartões. Vá para o plano de fundo novamente, mas desta vez vamos clicar em “Cor”. Vou selecionar isso e selecionar a boa cor creme. Você pode ver como ele está parecendo. O que vou fazer agora também, vou para o contêiner de grade porque ele adicionou automaticamente uma grade. Se eu quiser editar a grade, posso clicar apenas no cartão atrás dela e clicar no pequeno quadrado vermelho lá. Posso ajustar o dimensionamento. Se eu não quiser espaçamento, posso fazer assim. Posso encurtar um lado, se quiser, é realmente com você, e posso clicar com o botão esquerdo em “Concluído” para sair de lá. Agora o que eu quero fazer é dentro deste cartão, temos a máscara de imagem e, em seguida, temos um bloco div também. O bloco div, vou deixar o fundo branco para isso. Vou ficar branco, clicar em “Plus”, o que é incrível. Posso digitar, chamarei de bloco de cartões. Agora, para os outros, vou dar o mesmo estilo. Mais uma vez, digite cartão, vá para a classe existente e, em seguida, aplique-o. No bloco de cartões, você pode ver o texto muito à esquerda. Posso clicar no bloco de cartões e adicionar um pouco de preenchimento. Mas você pode ver que isso mudará as imagens. Como você pode ver lá, ele está adicionando preenchimento ao redor de tudo. Mas o que queremos fazer é adicionar apenas preenchimento ao cabeçalho e ao parágrafo. Podemos adicionar uma div e colocá-los dentro dessa div ou bloco. O que posso fazer, vou div. No lado esquerdo, vou arrastar o cabeçalho e o parágrafo dentro dessa caixa. Vou chamar esse texto do cartão. Então, no lado esquerdo, vou ajustar alguns tapetes. Agora você pode ver os remendos lá. Vou fazer cerca de 20 pixels. Isso parece certo. Posso aguentar e descobrir isso [inaudível]. Só estou indo para o olho. Não quero demorar muito. Então nós varremos. Então agora tudo o que tenho que fazer é fazer o mesmo para esses outros aqui. Vá para o Seletor na parte superior e toque no texto do cartão, e lá o temos. Boom, doce. Agora temos esses cartões parecendo como eu os criaria. Podemos adicionar um pouco de sombra se quisermos, mas vou deixá-la por enquanto. Está em um contêiner centrado lá e o cartão é ótimo. Só vou adicionar um pouco de preenchimento por cima. Vamos 40 pixels apenas para dar espaço para respirar espaço lá. Linda. Agora, o que vou fazer é adicionar outra seção. Só vou arrastá-lo para cá. Vou arrastá-lo na parte inferior, ter certeza de que é azul, não vermelho, como você pode ver. As seções precisam ser separadas, elas não podem estar dentro de outra caixa, etc. Nesta seção, vou torná-la da mesma cor de antes. Vou adicionar um bloco div e vou nomeá-lo de invólucro. Você tem o invólucro lá e só precisamos adicionar um contêiner também. Vou pegar um contêiner. Lembre-se, você sempre pode fazer uma aula para os contêineres se quiser uma certa largura, mas eu vou fazer isso assim. Também vou mudar a cor desse texto, isso não é para ser preto. Esses cabeçalhos devem ser cabeçalho h2. Faça-o preto. Só vou adicionar outra seção. Control K. Às vezes, não funciona como você queria. Vou adicionar outra seção só para poder ver o contêiner e o invólucro que tenho. O que vou fazer é adicionar uma div. Eu também poderia adicionar uma grade se quisesse e colocar uma em cada. Eu também poderia adicionar uma coluna. Eu poderia clicar em “Mais” , obter colunas e arrastá-la. Arraste isso para dentro do invólucro que temos aqui. Vou pressionar “Control K” e digitar imagem. Arraste isso aqui. Em seguida, vou pressionar “Control K”, digitar cabeçalho e arrastar isso assim. Também posso ir aqui e, mais uma vez, arrastar o parágrafo. Vou copiar, colar, copiar todos esses textos também. Obviamente, posso fazer uma lista e fazer dessa forma, mas acho que essa é apenas uma maneira mais rápida [RISOS] de fazer isso. Mais uma vez, basta adicionar os estilos à medida que vou. Agora, você clica nesta imagem. Vou escolher a imagem e, em seguida, preciso fazer o upload da que eu queria. Eu tenho essa imagem do Unsplash, parece boa. Incrível. Eu posso pressionar shift enter aqui para fazer um ponto de interrupção, você pode ver o fim, só para que você torne o texto mais apertado. Isso está parecendo bom. Posso adicionar preenchimento se quiser, então 20 pixels para alinhá-lo mais ao texto. Está tudo bem. Mas acho que parece bom. É bom citar. Você também pode nomear suas seções. Obviamente, diz Seção 2, posso nomear esta seção de serviços. Posso até fazer um traço, às vezes é bom adicionar serviços de traço, seção de traço. cartão deste. Você sempre pode voltar e adicionar as seções. Lembre-se, ele pode alterar outras partes do seu site com o mesmo estilo. Portanto, certifique-se de nomear as coisas desde o início da melhor forma possível. Vou ir contêiner e, em seguida, div block, estilizar esse invólucro. Então, dentro disso, teremos um cabeçalho. Você pode ver. Você também pode escolher os diferentes títulos também. Se você adicionar uma tag global, então, se eu clicar com o botão esquerdo, você pode ver a tag HTML e se ela é rosa, isso significa que se você fizer isso todas as tags com essas configurações como H1, H2, H3 cada uma tem seu próprio estilo. É semelhante a adicionar uma largura de classe, mas isso a adiciona a todos como uma tag global padrão. Eu só gosto de fazer uma aula, é mais fácil acompanhar como você pode ver aqui. Temos depoimentos Agora precisamos ter essa frase, e para esta, o que vou fazer é torná-la uma aula de combinação e apenas chamá-la central. Agora vou para Tipografia e clique no Centro. Lá. Agora ele deve centralizar esse texto como você pode ver lá. Muito facilmente. Agora, para esta seção, eu preciso adicionar um pouco de preenchimento lá apenas para tirá-lo da outra seção lá, então obtemos algum espaço. Agora vou conseguir um parágrafo. Desculpe, não parágrafo. Precisamos ir e adicionar uma grade aqui. Vamos ver o layout, ver se eles têm alguma coisa semelhante. Eles não têm depoimentos. Eu provavelmente poderia fazer uma seção de cartões novamente. Mas para este, vou adicionar uma grade. Vou arrastar uma grade aqui dentro do invólucro. No lado direito, vou adicionar outra coluna. O que você quer fazer é clicar no pequeno botão mais aqui e você também pode fazê-lo aqui também. As linhas, vou excluir a linha e ter três colunas como esta. Agora, o que eu vou fazer é ir parágrafo e depois temos um pequeno texto lá para que eu possa fazer o parágrafo novamente, mas vou para o cabeçalho. Podemos ir H5, então todos os títulos H5. Vou clicar no seletor no canto superior direito. Todas as configurações do H5, vamos dar-lhes Inter e vamos fazer uma luz extra assim. Então eu posso ir em frente e copiar o nome assim e apenas me certificar de arrastá-lo para dentro, certifique-se de que ele esteja na grade certa. Eu só vou fazer um bloco div que eu possa arrastar as coisas para dentro de lá. Vou fazer neste círculo. Às vezes, não funciona corretamente. Vou arrastar para dentro e arrastar o parágrafo lá dentro. Agora temos um bloco div. Agora é sempre melhor criar uma coisa primeiro. Vou adicionar 100 estofamento na parte inferior. É sempre bom criar um bloco primeiro e depois você pode copiar e colar para que seja muito mais rápido. Vou mudar rapidamente a fonte lá para o normal. Isso vai ser parágrafo. Certifique-se de que ele tenha a convenção de nomenclatura correta. Legal. Vou colá-lo lá e porque isso está centrado, vou fazer uma aula de combinação para que você possa ver duas aulas lá. Vou à tipografia e centralizar isso assim. Eu também vou para a direção 5 e centralizar isso assim, boom. Assim, temos um bom elemento. Agora, o que posso fazer aqui é que posso pressionar um bloco div também. Para este, vou adicionar imagem e vou adicionar as estrelas. Será melhor se eu tivesse as cinco estrelas por si só como uma imagem, mas para isso eu poderia apenas controlar C e colá-lo. Mas é melhor se você tivesse apenas uma imagem. Mas agora eu tenho um bloco div com cinco imagens das estrelas como você pode ver lá. Agora, eu posso simplesmente chamá-lo de estrela como uma classe e depois adicionar um pouco de preenchimento, como você pode ver lá. Talvez seis pixels. Vou excluir esses outros e copiar colar novamente, então ele tem o preenchimento lá. Lá vamos nós, e há esse bloco, vou chamá-lo de revisão de estrelas, e então vou centralizar isso. Vou para a tela do meu flexbox. No Layout, vou clicar em Flexbox e, em seguida, queremos clicar no centro aqui. Ele deve alinhar isso ao centro. Agora temos nossos depoimentos. Está parecendo muito bom. Agora vou adicionar um pouco de preenchimento aqui. Vou pegar o bloco div, eu poderia chamá-lo de testemunho de cartão. Então vou copiar e colar a mesma coisa. Literalmente, apenas duplicamos assim, muito facilmente. Agora vou copiar todo esse texto aqui. Tenho meus nomes de clientes que renomeei. Não queria colocar o nome verdadeiro deles. Lá temos a seção de depoimentos. Lá vamos nós. Linda. Parece muito [inaudível]. Agora quase pronto. Apenas uma pequena seção com o botão e o rodapé lá. Posso ir ao Navigator. Se eu quiser pressionar isso, ele vai fixá-lo para que esteja sempre lá, mas eu gosto de ter um não fixado então eu tenho mais espaço para trabalhar. Você pode ver, sim, é assim que eu gosto. Vou adicionar outra seção e arrastá-la para a parte inferior. Vou fazer secção-CTA, mudar a cor. Então o que posso fazer é copiar esse cabeçalho e colá-lo aqui. Primeiro, deixe-me pegar o contêiner e depois o bloco div. Então eu vou colá-lo dentro disso, então está no invólucro. É sempre bom garantir que lembre-se que as caixas que estamos empilhando tudo para mantê-lo limpo e arrumado o máximo possível. Para este texto, esse deve ser um centro H1. Lá vai você. Então tudo o que eu quero fazer é poder ir em frente e copiar este botão se eu quiser. Agora, se eu quiser fazer um símbolo com esse botão, tudo o que preciso fazer é clicar em “Criar símbolo”. Também posso clicar com o botão direito. Ele me pediria para criar um símbolo aqui como você pode ver. Então eu posso chamá-lo de botão principal. Criar. Agora fica verde. Agora, neste botão, posso dar configurações, etc. Mas na verdade é realmente útil. Agora eu quero ir para as configurações, sempre posso usar a mesma instância. Posso arrastar e soltar a instância do botão e você pode vê-la diz o botão principal. Sempre posso clicar com o botão direito do mouse e clicar em desvincular instância. Isso garantirá que esse botão não seja a edição principal. Porque se eu editar esse botão, ele afetará esse botão e, portanto, quero desvinculá-lo basicamente. Eu quero adicionar outro bloco div e apenas colocar o cabeçalho nisso também porque você quer essas coisas centradas. Então, vou clicar no Flex, clicar em Vertical e depois Centralizar. Agora está envolvendo e colocando esse objeto no centro. Está alinhando e justificando aquele bloco div que acabamos de fazer. Fizemos isso realmente bloqueou dentro do invólucro. Vamos chamá-lo de alinhamento central por enquanto. Faça sua marca se destacar. Pressione “Enter”. Agora eu posso ajustar o letting aqui. É um pouco apertado. As alturas, vamos 50. Lá vamos nós. A altura da letra, ok, vai ser melhor. Seção CTA, vou adicionar um pouco de preenchimento, então vou segurar Alt, arrastar para fora. Lá nós o temos. Já construímos nossa página. Agora, para o botão, posso clicar na engrenagem, clicar em uma página e vamos apenas dizer que ele vai para a página Contato e clique em nova guia. Agora, se eu clicar no canto superior esquerdo, você verá a visualização. Agora posso ver como meu site ficaria. Há um problema aqui com imagem. Talvez eu tenha que consertar isso. Pode ser porque meu PNG está um pouco desligado, mas de qualquer forma, não importa. Por exemplo, clique no botão agora. Posso clicar com o botão esquerdo e irei para a outra página. Obviamente, não há nada nessa página. Em literalmente, como 20, 30 minutos, construímos este site. Vou voltar à minha página inicial e podemos fazer pequenos ajustes. Por exemplo, esse botão, e o que posso fazer é fazer um estado de focalização. Vou até o seletor na parte superior, clique no menu suspenso, clique em Passar o mouse. Agora, o que eu quero fazer aqui é ir para a cor e eu posso fazê-lo ficar preto ou como um vermelho escuro. Então talvez eu só queira ir como vermelho escuro ou algo assim. Agora, se eu clicar em um Nenhum, então estou mudando os estados de passar o mouse. Portanto, esse é o estado do mouse, e depois volto, clique em “Nenhum”. Agora, se eu clicar em “Visualizar”, coloque meu mouse, você pode ver agora que ele tem um estado de paira, o que é incrível. É tão bom quando você faz isso. Agora, você pode fazer é estados de imprensa, você pode focar, etc., mas estou tentando mantê-lo simples e deixá-lo assim. Incrível. Já fizemos nossa página agora, quero construir a página do portfólio. 11. Rodapé: Vou terminar rapidamente o rodapé fora e então podemos passar para a próxima página. Vou voltar aqui e copiar esses links. Podemos ver aqui. Copie esses. Você pode ver que os textos estão em cada lista separada. Você pode ver que é uma lista e, em seguida, dentro da lista há um item de lista. Cada texto é basicamente um link diferente. Talvez precisemos apenas digitar casa, sobre e entrar em contato. Em seguida, vamos excluir os outros itens da lista, então vamos navegar para a esquerda e deixá-los e depois recursos. Posso apenas digitar ferramentas e brindes. Só estou dando a vocês algumas idéias sobre algumas coisas que você pode ter no rodapé. Normalmente, são apenas links extras para ajudar as pessoas a encontrar ou entrar em contato com você se elas estiverem perdidas. Então você tem socials. Bem, chama-se Meta agora, então vamos chamá-lo de Meta. Instagram, Twitter. Então você tem esse texto aqui. Agora podemos alterar a imagem disso. Normalmente, eu gosto de apenas colocar o logotipo, o que é muito legal. Talvez você possa adicionar isso. Então o cabeçalho do rodapé. Preciso mudar isso para inter, e vamos ficar em negrito. Tudo bem. Em seguida, este link de rodapé. A mesma coisa, só vai entrar, normal. Em seguida, bombeie até 16. Acho que isso é muito legal. A página inferior. Posso copiar esse texto, copiar e colar, assim. Queremos ter certeza de que ele será semelhante à forma como o projetamos. Estou no rodapé aqui, e tenho diferentes blocos div. Se eu copiar e colar mais um bloco div, você poderá ver outros links. Vou arrastar os blocos de texto dentro deles e apenas excluir os itens da lista, e o cabeçalho pode ser excluído. Você pode ver isso, e eu só vou pressionar Enter sobre isso, e isso deve torná-lo assim. Então, neste bloco div, vou chamá-lo de copyright como classe, adicionar um pouco de preenchimento por cima para derrubá-lo se eu quiser, assim. Você pode ver que está alinhando lá. Só estou usando meu olho para torná-lo mais exato. Acho que 40 pixels servem. Em seguida, basta mudar a fonte, 60 normal. Lá vamos nós. Posso vincular o logotipo se quisermos, mas obviamente, ele mudará o tamanho e tudo mais. Mas acho que isso parece bom. Basicamente, a mesma coisa. Lá temos nossa página principal, está ótima. Agora, algumas coisas que eu quero fazer. Quero selecionar o rodapé e quero clicar com o botão direito do mouse e torná-lo um símbolo. Então vou criar um símbolo, e vou chamá-lo de rodapé. Agora, quando o usarmos na próxima página, será o mesmo. Então eu vou fazer esse nav pegajoso também. Crie um símbolo, e eu vou chamá-lo de nav. Agora estamos prontos para ir. O que vou fazer é poder ir em frente e duplicar esta página para a página de trabalho, ou posso simplesmente ir para a página de trabalho. 12. Página de projeto: Vamos começar a construir isso. Vou para a minha guia à esquerda, e você pode ver que tenho um novo símbolo, o Nav. Então também posso arrastar o rodapé para lá também. Com o rodapé e o Nav, então o que vou fazer é pressionar “Control K”, seção Localizar, e apenas trazer essa seção assim e vou começar a construir a página secundária, que deve seja bem fácil. Vamos adicionar um contêiner aqui e, em seguida, dentro desse bloco div. Em seguida, nomeamos o bloco div, o invólucro. Então, dentro disso, vamos adicionar um cabeçalho, que será um H1. Faça isso preto. Faça assim. Vou chamar esse invólucro e depois adicionar outra classe chamada trabalho. Vou adicionar um pouco de preenchimento na parte superior lá e na parte inferior, ele tem 100 pixels. Vou adicionar outra seção também. Abaixo disso, para a próxima parte, vou mudar a cor da próxima seção. Para este e, em seguida, temos o texto também. O que posso fazer por este, posso adicionar uma grade. Vou apenas adicionar uma grade e não precisamos de nenhuma linha, então vou clicar no compartimento pequeno. Vou usar isso, vou arrastá-lo para fazer 1,75. Vou clicar para baixo e arrastar o título para dentro dessa caixa à esquerda. Agora, na outra caixa, posso ir no parágrafo e agora está dentro dessa grade. Temos basicamente duas colunas nesta grade e o mais legal de uma grade é que ela a torna responsiva. Só precisamos ter certeza de que ele é vertical e ele se empilhará um sobre o outro. Mas basicamente usa o Flexbox, o que é ótimo. Então eu posso simplesmente entrar aqui, copiar e colar o texto. Vou ter que selecionar esse tipo e você pode selecioná-lo. Você pode ver que você tem algumas opções aqui, para que eu possa inserir links. Eu posso realmente embrulhar com o vão. Se eu precisar fazer uma classe personalizada neste parágrafo, posso fazer isso. Se eu clicar nisso e então eu chamá-lo de cabeçalho H3, H2, ele deve funcionar. Vou apenas adicionar cabeçalho, podemos ir cabeçalho H4. Só vou arrastá-lo para dentro disso. Eu só vou fazer disso uma div para que possamos jogar as coisas naquela caixa. Agora todas essas coisas em sua própria caixa e então eu posso digitar papel, para que eu possa excluí-la aqui. Basta digitar traços. Posso copiar colar o cabeçalho, arrasto-o para baixo. Nós adicionamos um parágrafo e depois colamos isso assim. Então, o ano, a mesma coisa, copie colar, arraste-o para baixo. Temos ano e colocamos um parágrafo, colocamos 2020 assim. Só precisa estilizar isso com a classe de parágrafo. Parágrafo. Assim mesmo. Então boom, temos uma coisa assim. Vamos apenas para o design do modelo, excelente. Agora temos nossa página aqui e com boa aparência. Não precisa ser exato. Sempre podemos facilitar as coisas assim. Legal, então agora o que vou fazer, vou adicionar as imagens. Eu posso realmente adicionar outra grade se eu quisesse, basta mantê-lo muito simples, vou me livrar das linhas e me livrar da coluna. Agora eu tenho uma coluna. Só vou me certificar que a grade esteja dentro do contêiner. Nós nos certificamos de que ele esteja centrado. Eu poderia colocá-lo no invólucro, mas o contêiner já o centra. Então tudo o que tenho que fazer, posso chamar isso de Grid 3 e podemos simplesmente ir chamá-lo de trabalho. Agora, vou selecionar uma imagem na seção de mídia e vou soltar isso. Escolha a imagem e agora, basicamente, posso começar a colar isso. O que queremos fazer, você pode ver como esta seção se sobrepõe a ela. Vou apenas ajustar o preenchimento desta grade como este primeiro e a seção superior, posso abrir a margem. Também posso ajustar o preenchimento também. Primeiro, vou apenas copiar e colar as imagens e depois posso simplesmente passar, é apenas duplicar o bloco de imagem e então eu posso simplesmente passar e mudar as imagens. Estou clicando duas vezes, substituo, substituo e agora você pode ver que temos essas imagens exatamente assim, que é o que queríamos. Para sobrepor as seções, tudo o que temos que fazer é ir para a grade e eu poderia fazê-lo no contêiner. Mas se você fizer isso, ele mudará todos os contêineres com essa coisa. Mas vou para a grade e vou mudar o preenchimento e arrastá-lo para baixo. Só estou clicando com o botão esquerdo e arrastando para fazer isso menos. Vamos menos 135. Vou adicionar mais preenchimento à seção superior. Vamos ir 100 pixels e depois vamos voltar para a grade e obter menos como 150, como você pode ver no lado direito. Agora você pode ver que temos esse efeito sobreposto. Agora, se formos para dispositivos móveis, você pode ver que ele ainda está sobreposto, o que é legal. Bonito, fácil demais. Agora, vamos apenas adicionar o último toque final. Vou adicionar uma div na parte inferior aqui e depois vou adicionar um cabeçalho para o próximo projeto. Só vou nomeá-lo mais uma vez, invólucro. Próximo projeto, isso pode ser um cabeçalho H1 e, em seguida, o que vou fazer é chamar esse invólucro em seguida, basta chamá-lo de invólucro em seguida. Acho que está dentro da grade, então eu só preciso arrastá-lo para fora da grade por um segundo. Vou fazer outro recipiente e depois colocar o invólucro dentro desse recipiente. Certifique-se de arrastá-lo para fora de lá, soltá-lo aqui e apenas certifique-se de que ele esteja dentro da seção. Você pode ver as linhas, ele diz onde ela está localizada, então eu só quero arrastá-la para cima disso. Eu costumo arrastar para baixo assim. Agora está dentro dessa seção. Vou adicionar algum preenchimento a esta seção. Vamos ir 135 pixels e neste invólucro em seguida, eu tenho isso e, em seguida, preciso de uma imagem. Vou escolher a imagem, vou selecionar a seta. Agora, para obter a seta ao lado disso, vou para o invólucro, vou para Layout clique no Flexbox e você pode ver agora ele está mudado para horizontal. Agora, nesta imagem, posso dar a ela uma classe de seta e depois adicionar algum preenchimento como este. A flecha é um pouco grande demais, então vou torná-la menor. O que vou fazer é ir para o alto e apenas alterar a porcentagem. Você pode ver se você clica no pequeno botão aqui, você pode alterar os pixels. PX é pixels, você tem porcentagem, você tem EM, você tem CH, que você tem VW, que é largura de visualização, VH que é a altura da visualização, e então você tem auto. Normalmente, eu só uso porcentagem, pixels e, às vezes, uso a altura da visualização também. Mas para isso vou usar a porcentagem. Está dentro deste invólucro, este invólucro vai todo o caminho. É basicamente, no momento em que a largura é de 39% do tamanho total ou da largura do invólucro real. Indo pressionar Control Z, vou mudar isso para 20% para a largura, iremos 25%. Então eu vou adicionar um pouco de preenchimento apenas para trazer isso. Eu vou deixar cair o preenchimento disso também e lá temos, temos a flecha lá olhando um pouco mais como o tamanho daqui, que é muito legal, bonito. Agora que esta página está funcionando, agora vou voltar às minhas páginas, vá para a página inicial. Agora, o que queremos fazer é criar este cartão vinculado à outra página. O que temos que fazer é que temos este bloco de cartões e temos a máscara de imagem do cartão. O que precisamos fazer é que você precisa adicionar um bloco de links. Vou pressionar o botão Plus e descer para o bloco de links. Agora, isso é basicamente apenas uma caixa com um link anexado a ela para que possamos ter certeza que o cartão em que clicamos nele será vinculado. Só vou trazer o bloco de links para o bloco de cartões. Vou trazer a máscara de imagem do cartão para o bloco de links lá. Vou me certificar de que a largura esteja em 100% para que você possa ver isso. Agora temos o bloco de cartões, temos um bloco de links e, dentro do bloco de links, temos a máscara de imagem do cartão, com as imagens. Vou clicar com o botão esquerdo do mouse no bloco de links e você pode clicar na pequena engrenagem aqui, ou você pode ir na engrenagem direita à direita. Como você pode ver, eu gosto de fazer no lado direito, então vou clicar na engrenagem, clicar na Página e vou até a seção de trabalho. Se eu quiser ir para uma nova guia, posso clicar neste botão, mas se não, vou deixá-lo. Vou para o canto superior esquerdo e alternar a visualização. Agora, quando eu passar o mouse, vou clicar com o botão esquerdo e ele vai me levar para a página da web, que é a que acabamos de criar, como você pode ver lá. Agora, e se quiséssemos adicionar um pairar sobre a imagem? Vou para o bloco de links aqui, vou rolar todo o caminho para baixo. Agora, o que vamos fazer é que queremos mudar a opacidade. Vou clicar no canto superior direito, no seletor, clicar no botão Hover e o que vou fazer é deixar cair a opacidade ou adicionar uma cor em cima dela. Vamos adicionar um filtro. Posso ficar saturação, por exemplo. Se eu quisesse ir como preto ou branco, deixe cair a saturação para zero por cento. Agora, quando eu passar o mouse sobre isso, ele vai ficar preto e branco como você pode ver. Por exemplo, clicarei em “Visualizar”, puxar o mouse sobre ele e agora você pode ver as alterações do mouse. Eu clico nele, boom, assim. Você pode fazer com que ele mude para uma cor diferente. Você pode fazer com que ele seja dimensionado se quiser. Você pode adicionar qualquer um desses efeitos ou cores, etc. Isso vai literalmente mudar a aparência. Se eu for passar o mouse, se eu for pressionado também, posso excluir isso. Para o bem disso, vamos mudar a escala. Agora vamos voltar. Agora, se eu for para Preview e puxar meu mouse e clicar com o botão esquerdo, você pode ver que ele está em escala. Vê isso? Se eu soltar, ele vai embora. Muito legal, você pode fazer como pequenas interações e pequenas coisas, mas fizemos nosso site e agora vou mostrar como fazer um pouco de SEO em algumas coisas de última hora para o site. 13. Site responsivo: Agora, o que vou fazer é mostrar como tornar o site responsivo. Vamos usar a página inicial por enquanto. O que eu quero fazer é ir para o ponto de interrupção superior e clicar no tablet. Como você pode ver, estamos começando a ver algumas coisas que não estão funcionando. Lembre-se, qualquer alteração que fizermos na área de trabalho afetará as mais baixas. Mas qualquer alteração que você fizer no celular não afetará o desktop ou o iPad. Ele cai em cascata. Se eu fizer alterações no iPad, isso afetará os mais baixos e isso não afetará a área de trabalho. Se eu fizer alterações aqui, a visualização da área de trabalho não será afetada. Vou clicar nisso. O que eu posso realmente fazer é tornar o texto menor, ou posso fazer a imagem de fundo fique invisível para que ela se encaixe. Por exemplo, vou clicar em “Seção” e depois vou até Fundos, e vou desligar o globo ocular. Agora, você pode ver que ele desliga. Se eu voltar para a área de trabalho, você pode ver que minha imagem minha minha está lá, e está totalmente bem. Agora, volte aqui. Está desligado. Se eu for para a área de trabalho, podemos ver que a imagem também se foi, o que é super fácil. Posso deixar o texto lá. É legível. Está funcionando. Tudo se encaixa aqui porque isso é como um bom cartão aqui que funciona. Para que movamos isso, em vez de mover o preenchimento e a margem porque ele está definido em uma determinada caixa lá em uma coluna, o que eu posso realmente fazer é descer e queremos ir para o nosso posicionamento. Está na estática agora. O que eu quero fazer é clicar em “Relativo”. Relative faz com que funcione com base na seção em que está. O que eu posso realmente fazer é brincar com a largura aqui. Posso arrastar o posicionamento e ele vai puxá-lo para a esquerda, o que é legal. Para a área de trabalho, você pode ver que nada está acontecendo. Se eu chegar ao celular e rolar, você pode ver que, obviamente, é realmente grande. Talvez eu precise diminuir isso. Você pode ver, eu posso trazê-lo de volta assim eventualmente. Vou voltar para a visualização do iPad. O posicionamento relativo nos permite controlar essa imagem e quebrá-la fora de uma caixa e trazê-la com base na seção. Podemos olhar para depoimentos. Você pode ver que o último está cortado. O que eu quero fazer é selecionar a grade. Agora, o que queremos fazer é mudar a grade para duas linhas. Vou clicar em “Editar grade”. Agora vou para o lado direito, vou para este pequeno ponto vermelho mais e clique em “Mais”. Agora vou excluir esta linha agora para poder clicar com o botão direito do mouse e clicar em “Excluir coluna”. Em seguida, posso clicar com o botão direito do mouse aqui e excluir esta coluna aqui, como você pode ver. Vou reduzir isso usando essa pequena caixa de ferramentas. Vou pressionar “Concluído”. Agora, os depoimentos estão bem no centro. Esse depoimento aqui também precisa ser centrado. Vou ajustar o preenchimento aqui e bombeá-lo assim no centro. Só estou indo para o olho. Legal, fácil. Isso está parecendo bom. Então o botão aqui, temos o texto e o botão que parece ser tudo vertical. Só vou pegar o botão, e então vou ajustar as margens lá para corrigir isso. Linda. A foto não é muito ruim. Acho que está tudo bem. Posso deixar cair o tamanho do texto aqui, o que é ótimo. Agora, na área de trabalho, o tamanho do texto ainda é o mesmo que foi originalmente projetado. A visualização do iPad será um pouco menor. Linda. Isso parece bom. Isso parece ótimo. Acho que realmente preciso adicionar um pouco mais de preenchimento a esta seção, assim. Linda. Este é o modo paisagem. Eu não costumo tocar nisso porque, obviamente, as pessoas não assistem a vídeos assim, a menos que sejam certos tipos de pessoa. Mas eu geralmente só pulo isso e vou direto para o celular. O celular é essa visualização. Agora você pode ver que temos o menu. Já está ativado. Obviamente, você pode personalizar este menu aqui. Posso mudar as cores. Posso alterar os links. Posso mudar o telefone, etc. Mas porque já tínhamos isso, por exemplo, se eu tiver um pairo, vou mudar a cor, e iremos como essa cor vermelha. Agora, quando eu passar o mouse sobre ele, você pode ver que há uma seleção vermelha. Obviamente, quando alguém está no telefone, polegar deles clica e percorre, para que eles não possam ver isso. Mas se eles estiverem de alguma forma no navegador e forem de tamanho pequeno, então ele ficará assim. Acho que isso é bom. Agora, o que vou fazer por isso é ir até a minha tipografia e vou diminuir o tamanho significativamente. Vou mudar a altura, que é o [inaudível] ou o espaçamento entre as linhas. Talvez vá como 30. Altere isso para 25. Vou separar isso assim. Agora vou para o invólucro e vou para o preenchimento à esquerda e apenas trazer isso assim. Vou pressionar “Shift-Enter” aqui para fazer uma quebra de página. O que eu posso realmente fazer é diminuir isso também se eu quisesse, o preenchimento na parte inferior. O trabalho já estava em um pequeno grupo de cartas. Isso já é responsivo. Aqui, vou trazer o preenchimento. O que posso realmente fazer é aumentar ou diminuir o tamanho da fonte. Eu só quero pressionar “Enter” e veremos o que acontece lá. Acho que isso parece bom para essa imagem. Acho que está tudo bem. Vou mudá-lo para estático. Ele deve ser corrigido. Vamos ver aqui. Em seguida, a visualização móvel. Fácil. Acho que está tudo bem. O preenchimento. As imagens. Eu não sei o que está acontecendo com ele, ele continua crescendo. Agora temos esses também, os depoimentos. [RUÍDO] Está em uma grade. Só vou me certificar de que tudo esteja centrado também. Pegue o cartão e, em seguida, puxe esse preenchimento assim. Agora você tem preenchimento nas laterais, o que está fazendo com que ele se encaixe. O depoimento, basta ajustar o preenchimento lá, se encaixa assim. Linda. Muito fácil. Basta ajustar o preenchimento do bloco div em que ele está, como você pode ver lá. O rodapé já está bom e pronto para ir. É basicamente assim que você torna seu site responsivo. Agora, se eu clicar em “Visualizar” e eu apenas diminuir meu navegador. Você pode ver que, se eu deixar meu navegador menor agora, ele começa a ficar responsivo. Lá vamos nós. Obviamente, esse é um certo tamanho. Às vezes, seu site não ficará perfeito em todos os tamanhos, mas na maioria dos tamanhos ficará bem. Você pode ver lá. Então, alguém está indo [inaudível] ver como parece. É por isso que é ótimo usar grades e flexboxes porque é fácil empilhar coisas e é fácil torná-las responsivas. 14. SEO básico: [MÚSICA] Vou mostrar a você como fazer algum SEO básico. Depois de finalizar seu site e ajustar tudo o que precisava, tudo o que você vai fazer é ir para a seção da página no canto superior esquerdo. Vá para as páginas principais que têm o conteúdo lá e clique no pequeno botão de chamada. Isso levará você às configurações da página inicial aqui. Depois de adicionar um plano de site, você pode proteger uma página de aprendizado específica protegida por senha. Talvez você tenha um cliente particular ou um público que deseja enviar uma determinada coisa, então precisaremos de uma senha lá. Mas é isso. Em seguida, descemos e obtivemos as configurações de SEO. Esta é uma prévia de como ela ficará na Pesquisa Google. Por exemplo, se eu for ao Google e digitar meu site, você poderá ver Jeremy Mura- Home. Isso é o que diz aqui e esse é o título que eu tenho lá. Quando você tem sites diferentes, você pode ver o Google, ele tem os subsites que ele mostra. O que precisamos fazer é adicionar a tag de título. Sempre que você fizer isso, você quer ter certeza de usar palavras-chave relacionadas ao seu nicho, à sua localização e coisas relevantes. Basicamente posso dizer Designer de identidade de marca em Western Sydney-Jeremy Mura. Estou usando Sydney, específico do Western Sydney. Estou usando o Brand Identity Designer ou poderia dizer que designer de logotipos, que poderia funcionar. Tente descobrir suas palavras-chave que as pessoas realmente procuram. Em seguida, temos a Meta descrição. Esta meta descrição é basicamente o texto extra. Você pode ver o texto aqui na parte inferior. Você pode dizer que Jeremy ajuda pequenas empresas a criar uma marca estratégica para expandir seus negócios on-line. Isso é apenas uma linha. Normalmente, você quer tentar ter duas linhas, mas pode ser bem curto. Crie uma marca estratégica para expandir seus negócios on-line e criar um público que adora seus produtos. Legal. Coloquei pequenas empresas lá, mas estratégicas. Provavelmente seja bom se eu disser identidade estratégica de marca para expandir seus negócios on-line e construir um público que adora seus produtos. Legal. Você pode ver a pré-visualização lá, como ela está aparecendo; isso é muito legal. Incrível. Agora, você tem as configurações Open Graph. Normalmente, eu realmente não faço isso porque não compartilho coisas no meu site com o Twitter. Se estou no Instagram ou no YouTube, apenas compartilho diretamente com minhas outras páginas sociais. Se você tem blogs e outras coisas, isso é útil. Mas, mais uma vez, Open Graph. Ele informa tudo o que você está compartilhando com o Facebook, Pinterest, Google do seu site. Você pode ajustar o título, a descrição também. Você pode ter um URL aqui. Você pode fazer isso. Mas eu normalmente deixo isso de fora. Você pode ver o Google aqui tem conta e ir para o Google Classroom e também continuar para o Google Drive. Se você não quiser que determinados sites sejam exibidos, basta clicar em “Excluir esta página dos resultados da pesquisa do site”. Isso basicamente significa que ele irá ocultá-lo dos bots de pesquisa que digitalizam essa página basicamente. Mas se você quiser, então você pode ver que o que ele vai aparecer como sua tag de título, eu posso desativá-la ou ativá-la, o mesmo que a descrição também. Então você também pode ter uma imagem , mas isso é totalmente bom. Então você também tem código personalizado. Normalmente deixo isso, não toco nisso. Basicamente, é assim que você adiciona o SEO. Você tem que fazer isso para cada site individual. Uma última coisa quando se trata de SEO também, obviamente usando CLI, títulos com palavras-chave relevantes e coisas assim. Mas você também pode acessar suas imagens também. Só vou salvar as alterações. Vou para minhas imagens. Por exemplo, vou para essa imagem aqui. Clique na chamada. Você pode ver na parte inferior há Texto alternativo. Texto alternativo são textos HTML que aparecem enquanto o site está carregando. Se o site não puder carregar a imagem por qualquer motivo, internet lenta, etc, então você precisa ser descritivo aqui. Eu direi pessoa da imagem andando pelo design da postura. Estou sendo descritivo, explicando o que é o site. Coloque um ponto final. Você também pode usar decorativos também, não transmitir significado e não requer Texto alternativo. Se for apenas uma imagem como uma ilustração, clique em “Decorativo” ou em um ícone. Mas se tiver um pouco de descrição, você poderá adicioná-lo de volta. Obviamente eu voltei e ele se foi agora. Mas isso é Alt Text quando se trata de SEO. O site geralmente informará se você precisa ajustá-lo. Normalmente, se você vier aqui, ele lhe dirá coisas para ajustar para o site. Além disso, a única outra coisa é se inscrever no Google Analytics. Se eu for verificar minha conta, vou fazer login rapidamente aqui. Você pode ver aqui que estou vendo alguns detalhes no meu site. Duzentos usuários, 230 sessões, taxa de rejeição é de 66%. Duração da sessão. Quanto tempo alguém está no meu site? É por um minuto. Posso descobrir o que é direto, o que vem das redes sociais, etc., o que é muito legal. Indicações, sites diferentes, YouTube, Webflow. Isso é incrível. Posso olhar por país, o que é ótimo também. Isso só me dá um monte de detalhes para que eu possa ver quais partes do meu site estão fazendo o melhor. A página inicial tem mais vistas, a loja tem a segunda maioria das visualizações. Então meu guia de design gratuito é o próximo e, em seguida, a Mura Academy é a próxima. Posso ver, posso melhorar meu site? Posso melhorar a conversão, etc? Também é bom prestar atenção ao desktop e ao celular. Muitas pessoas estão assistindo do desktop, como 75%. O celular está em 23% no momento, o que é legal. Configure o Google Analytics e isso realmente ajudará você a gerenciar o site e melhorar o SEO. Uma última coisa é o Google Meu Negócio e você receberá um site que aparece, você quer clicar nele. É assim que você obtém uma página no Google. Você pode se inscrever. Já tenho um para que eu possa clicar em “Gerenciar agora”. Vamos ver se ele carrega minha página. Lindo. Isso é outra coisa boa para SEO. Você aparece quando as pessoas estão pesquisando no mecanismo de busca. Minha casa, posso ver as visualizações aqui, que é chamada de performance. Posso atualizar minhas horas. Posso ver meus comentários. Se eu clicar em “Gerenciar avaliações”, você poderá ver todos os meus comentários assim. Agora, se eu for ao Google rapidamente e digitar designs Jeremy Mura, você pode ver, boom, ele simplesmente aparece no Google. Você pode ver que ele é certificado. Ele me diz quantas visualizações, eu tenho minhas críticas também no lado direito e também tem todos os detalhes. Eu recomendo fazer isso para fins de SEO também. Isso vai impulsionar isso. Obviamente, você pode gerenciar as coisas daqui, mas depois de atualizar tudo e colocar seu site, isso facilitará a busca por você e encontrá-lo. Essas são minhas dicas básicas de SEO. 15. Incorporação do Calendly e formulário de e-mail: [MÚSICA] Agora, vou mostrar como colocar o HTML incorporado. Talvez você tenha um formulário do Mailchimp que deseja colocar lá, ou talvez você queira colocar seu horário de agendamento ou calendários, algo assim. Vou te mostrar como usar isso. Tenho meu layout simples. Acabei de pegar o contêiner, um invólucro, e depois uma caixa div, e eu chamei de Calendly. O que vou fazer é ir para o botão mais, rolar para baixo e ir para incorporar. Vou arrastar e soltar isso na caixa. Ele vai pedir código personalizado. O que vou fazer é ir ao meu Calendly, seja qual for o site que você estiver usando. Vou clicar na “Engrenagem” e clicar em “Adicionar ao site”. O que eu posso realmente fazer é torná-lo um texto pop-up ou uma incorporação embutida. Para essa situação, vou usar a incorporação em linha e vou clicar em “Continuar”. O que vai acontecer, ele produzirá esse código aqui, como você pode ver, que é basicamente HTML. O que vamos fazer é “Controlar C” ou podemos clicar no pequeno botão “Copiar código”. Vou colá-lo nesta caixa e, em seguida, pressionar “Salvar e fechar”. Sempre que você fizer uma incorporação em HTML, ele não vai aparecer ao vivo. Mesmo quando você visualiza, ele não aparecerá. Ele só aparecerá quando você realmente publicar o site. Vou para o canto superior, e depois vou publicar. Obviamente, eu não configurei um domínio para isso porque é apenas uma compilação que estamos fazendo para a classe agora, mas posso publicar no webflow.io. Vou clicar em “Publicar”. Uma vez feito isso, ele dirá publicado. Ótimo. Bem sucedido. Agora, posso clicar com o botão esquerdo nesta pequena seta, assim, e isso vai me levar ao site real, com o site webflow.io. Eu posso rolar para baixo e, na verdade, ele tem meu formulário Calendly incorporado onde as pessoas podem entrar e reservar algum curso. Eles vêm aqui, talvez queiram reservar uma consulta, podem clicar aqui, e isso os levará para o calendário assim. E se eu quisesse adicionar um formulário de e-mail? Vou aos meus e-mails e vou clicar em um dos meus formulários, para você possa ver que eu tenho meu guia de identidade de marca. Posso clicar nestes três pontos, e o que posso realmente fazer é incorporar. Ele deve me dar um código, para que eu possa ver o código da linha do cabeçalho. O que eu realmente vou fazer é colocar isso no código do cabeçalho, e então esse é o código embutido para o embutido. Vou copiar isso. Vou clicar duas vezes, e vou colá-lo aqui dentro e clicar em “Salvar” e fechar. Ainda estamos na seção Calendly, mas vou trocá-lo. Então, para este código aqui, vou pressionar “Copiar”. Basicamente, ele precisa enviar uma mensagem para o servidor do flodesk, que ele possa extrair as informações de lá. O que eu posso realmente fazer, vá e clique na página “Contato”, role todo o caminho para baixo, e você pode ver, eu posso colocar dentro do código principal. Isso funcionará apenas para essa determinada página, mas se você colocá-lo no código principal nas configurações reais de back-end, ela funcionará para todas as páginas. Vou colocá-lo lá. Vou clicar em “Salvar”, depois vou clicar em “Publicar” e veremos o que acontece. Espero que ele tenha minha pequena forma lá. Mas basicamente, é assim que você faz isso quando está colocando um formulário de e-mail. Assim, você pode ver, nós temos nosso formulário. Posso entrar aqui e digitar meu nome e meu endereço de e-mail, e ele enviará um e-mail, e eu receberei isso, e então eu posso clicar em “Download” como você pode ver lá. Obviamente, ele tem um fundo preto porque esse é o design que eu projetei neste formulário. Se eu quiser editar o formato, terei que voltar e alterá-lo aqui. Quaisquer que sejam as cores da marca que você usa no seu site, certifique-se de que ela seja da mesma cor de fundo , para que pareça que ela se mistura. 16. Interações simples: Agora vou mostrar a vocês como fazer algumas interações picantes. Vou mantê-lo muito simples. Eu poderia ir mais avançado, talvez mais tarde na pista quando atualizo o curso. Mas para este, estou pensando muito básico. Agora vou selecionar o cabeçalho ou o objeto ou a parte inferior, seja lá o que for, a coisa que quero animada primeiro. Vou selecionar o “Cabeçalho H1”. Tem o estilo de cabeçalho H1, o que é ótimo. Vou para o canto superior direito, clicar no pequeno raio. Vai me levar às interações. O que eu quero fazer é, em vez de fazer um gatilho de elemento, quero fazer um gatilho de página. Quando a página for carregada, quero que o texto venha e desapareça. Vou clicar no pequeno botão de mais aqui, e vou definir quando quiser que a interação seja ativada. Quero que ele seja ativado no carregamento da página ou na rolagem da página? Vou fazer o carregamento da página. O que vou fazer é ir para a Ação e selecionarei “Iniciar uma animação”. Está me dizendo que quando a página começar a ser carregada, esta é a ação que ela tomará. Vou começar a animação. pressionar o botão “Plus” aqui, e agora, ele me leva ao menu Ação. O que preciso fazer é pressionar o botão “Plus” novamente. Para isso, o que eu quero fazer é fazer opacidade. O que vou fazer é que a opacidade fará com que ela vá para zero. Esta é a fase inicial. Vou reduzir isso para zero. Você pode ver, o Título H1 desapareceu. O que eu queria fazer é querer mais o fim da animação, e quero colocar a opacidade de volta. Para este, vou trazer a opacidade em 100%. Se eu pressionar “Play”, você pode ver o que acontece aqui. Começa em zero e vai para 100% muito facilmente. Se eu selecionar uma dessas coisas, preciso selecionar a primeira e clicar em “Definir como estado inicial”, para que ela comece com zero por cento de opacidade. Certifique-se de que eu selecionei os elementos. Agora você pode ver aqui que isso afetará o elemento selecionado H1. Você pode ver, é um cabeçalho H1. Você também pode fazer isso na classe. Isso significa que isso afetará cada título ou título com o título H1 nele. Eu prefiro fazer isso, então isso afeta tudo na página. Se eu pressionar “Reproduzir”, você pode visualizá-lo como ele vai cair. O que eu também posso fazer é selecionar o último bit. Você pode ver, eu posso iniciá-lo após as ações anteriores, então ele começará após a primeira seção. Posso fazer uma facilidade, então uma facilidade basicamente o torna mais suave. Posso fazer facilidade. Isso é muito legal. O que eu quero fazer é adicionar um atraso talvez de, digamos, dois segundos, para que possamos ver o que parece. A facilidade de entrada pode ser os primeiros 0,5 segundos. Tudo bem, e acho que está tudo bem. Vou clicar em “Salvar”. Também posso renomear isso. Pouco antes de salvá-lo, vou dizer desvanecer-se. Em seguida, vou clicar no botão “Salvar”. Nesta parte, você pode ver que o desvaneceu. Se eu clicar nele, ele me levará volta a ele e eu posso editá-lo. Posso excluir as coisas e mudar o que quiser lá. O que posso fazer, posso clicar em “Preview”, e você pode ver o desvanecimento assim. Obviamente, os dois segundos são um pouco longos, então vou voltar, mudar o atraso e fazer um segundo. Clique em “Salvar”. Vou clicar em “Visualizar” novamente. Você pode ver lá, ele desaparece muito, muito bem. Incrível. É quando a página começa a ser carregada. Também posso adicionar uma animação separada quando a reprodução terminar de carregar, mas não preciso fazer isso. Se eu for em frente e clicar em “Visualizar”, você poderá ver que a animação está funcionando. Nós iremos novamente. Olhe para o texto, ele está desaparecendo bem e facilmente. E se quiséssemos adicionar alguns textos voando ou o botão voando para dentro? Vou clicar no meu texto “Parágrafo”. Vou clicar em “Acionador de página”. No carregamento da página, queremos fazer outra ação. Em vez de selecionar a coisa “Fade in” aqui, queremos fazer uma nova. Para este, vou me mexer. Vou clicar em “Definir estado inicial”. O que queremos fazer é mover o eixo x da página assim, vindo da esquerda. Vou mais e me movo novamente. Para este, vou me certificar de que está em zero. Queremos selecioná-lo e selecionar a “Classe”. Em vez desse único elemento, queremos torná-lo toda a classe. O atraso, eu vou fazer um segundo também. Vou clicar em “Salvar”. Vou clicar em “Pré-visualização” e apenas prestar atenção aos textos do parágrafo. Ele deve voar para dentro. Isso acontece muito rápido. Precisamos torná-lo um pouco mais lento. Vou voltar aqui. Temos isso, e temos a facilidade. Precisamos realmente facilitar. Podemos fazer qualquer um desses personalizados. É muito legal. Nós faremos In Quart. Vou atrasar dois segundos, fácil entrar, ou fazer isso um segundo. O filme ficará em zero pixels, então ele começa de volta nessa posição. Acho que vai ficar bem. Vou voltar. Eu deveria renomeá-lo e chamá-lo de movimento. Salve e vamos clicar em “Visualizar”. Vamos ver o que acontece. Você obtém o desvanecimento e o texto voando assim. Linda. Então, agora, podemos selecionar animações diferentes. Se você quiser ver o desvanecimento, você pode ver que ele funciona para essa classe, e é muito fácil fazer isso. Basicamente, é assim que você adiciona interações. E se eu quisesse adicionar um gatilho de elemento? Vou reservar no botão principal. Posso fazer um elemento acionador. Só vou clicar nisso. Vou clicar no “Gatilho do elemento”. O que acontece se passarmos o mouse sobre o mouse? Podemos adicionar um monte de coisas. Podemos fazer um crescimento ou um psiquiatra, um giro, uma mosca, o que quisermos fazer porque ele vai saltar mesmo, mas podemos fazer um monte de coisas. O que posso fazer é fazer um pop e ver o que acontece lá. Vou fazer o atraso talvez um segundo. Ao passar o mouse para fora, podemos simplesmente fazer pop novamente e, em seguida, vamos clicar em “Visualizar”. Você pode ver agora, se eu colocar o mouse sobre o botão, veja o que ele faz. Ele aparece. Quando eu deixo ir, ele aparece de novo. Super incrível. Deixe-me apenas editar isso. Posso ter certeza que você está fazendo isso no botão Principal lá, como dentro da instância do botão. Vou clicar de volta no pairar aqui, e talvez queiramos fazer outra coisa. Talvez queiramos fazer uma espinha ou algo assim. Podemos girar. Atraso no sentido horário, faremos talvez 0,5 segundos, 0,05. Neste, faremos os spin outs, 0,5 segundos. Nós clicaremos em “Visualizar” como você pode ver isso. Se eu clicar no botão “Visualizar”, veja isso. Isso é muito legal. Queremos que ele gire? Vamos no sentido anti-horário. O atraso seria apenas zero. Está em pairar. Legal. Posso colocá-lo na aula. Aqui embaixo, diz elemento. Posso mudar a classe. Vamos testar isso agora. O botão se eu colocar o mouse sobre ele, você pode ver isso, e ele gira para longe. Isso é muito legal. Se você colocar elementos invisíveis e porque eu mudei para classe, ele também funcionará neste botão aqui. [RUÍDO] Isso é muito droga. É assim que você faz um gatilho de página e um gatilho de elemento, duas maneiras muito simples de apenas fazer as coisas. Você pode brincar com ele, como se você pudesse fazer um mouse por cima ou passar o mouse sobre. Talvez você tenha botões ou tenha ilustrações ou ícones e queira que eles se movam, você pode fazer isso. Se você quiser mais um gatilho de página simples onde você está rolando, você também pode fazer as coisas se moverem. Essa é outra maneira de fazer isso. que eu tenha ajudado você a entender como usar interações básicas. 17. Sistema de design simples: O que é um sistema de design? Basicamente, um sistema de design está combinando todos os estilos, elementos e componentes de uma marca para um site. É como quando você cria uma identidade de marca e a marca usa impressão como cartões de visita e tem um logotipo e todos esses outros recursos. É basicamente um guia de estilo, mas para digital, basicamente para web. É literalmente um sistema em que você, como designer, ou se você tem uma equipe de designers, ou o negócio quando entrega o projeto, tem um sistema para garantir que eles usem todos esses elementos juntos como parte de todo o site, então eles têm recursos globais. Agora, vou mostrar alguns exemplos de alguns sistemas de design aqui no Dribbble. Por exemplo, você pode ver aqui, se eu clicar em um desses, você pode ver aqui está um sistema de design simples. Tem as cores, as cores da marca, o sistema de tipografia, os cabeçalhos, os estilos de parágrafo, as citações. Você também tem alguns componentes da interface do usuário também. Se eu descer, você encontrará mais alguns aqui. Por exemplo, este tem um monte de botões, UI, módulos, cartões, um monte de coisas diferentes, até entradas para formulários e coisas. Pode ficar muito complexo se você tiver um site grande, mas se for um site de cliente simples ou para você mesmo, você não precisa de nada louco. Pode ser apenas um guia de estilo simples ou sistema de design. Agora, você pode ir no Dribbble e digitar um guia de estilo no topo e você terá um monte de coisas. Você também pode digitar o sistema de design aqui, e se eu pressionar “Enter”, você receberá um monte de coisas diferentes aqui, componentes diferentes, elementos diferentes. Este, você pode ver que tem as cores, a tipografia mais uma vez, as barras de abas, botões, avatares, ícones, campos de texto. Basicamente, se você atualizou um desses estilos, isso mudará todo o estilo sobre tudo no site. É uma mudança global. É por isso que é bom ter um desses porque tudo com a mesma classe no Webflow ou no site, isso realmente afetará uma mudança em tudo, e é por isso que é inteligente projetar assim. Agora, você pode ir para Webflow. Se você for ao Showcase, você quer entrar na barra e digitar o guia de estilo. Você também pode digitar o sistema de design e podemos realmente encontrar um projeto e cloná-lo. Há alguns aqui. Vou digitar o sistema de design porque achei um antes que fosse realmente útil. Achei este, este foi muito legal. Já tem 400 clones, isso é muito legal. Você pode clicar em “Exibir projeto”. O que acontece aqui é que você pode visualizar o design da página real no Webflow. Posso clicar em “Abrir no Webflow”, e ele abrirá isso. Você pode ver esse exemplo. Vou olhar para a página. É apenas uma página. Posso clicar em “Visualizar”, e você pode ver se eu clico nessas guias, basicamente rolam para baixo até essas áreas. O cabeçalho está aqui. Tem tipografia, parágrafos. Tem coisas em rich text, cores, botões, um monte de coisas diferentes. Se eu for para o canto superior direito, você pode ver o modo de leitura. O que eu quero fazer é clicar em “Clone Project”. Agora, uma vez que você fizer isso, eu vou para este porque já o clonei, posso ver todos os invólucros, as dibs, todo o conteúdo aqui. A coisa é que eu posso realmente editar isso. Por exemplo, esse cabeçalho talvez eu não queira a fonte Inter, eu posso alterá-la para a fonte Merriweather, e agora ela será alterada em todos os sentidos. Agora, se eu criar um site, faço as páginas normais, isso afetará tudo, desde que as aulas sejam as mesmas. Este é um cabeçalho H1. Isso é muito legal. Tem um monte de coisas aqui. Eu recomendo usar um sistema de design básico para o seu site, ele vai ajudá-lo. Grades também. Como você pode ver aqui, espaços. Isso economizará tempo, mas seria preciso um pouco de uma curva de aprendizado apenas para se acostumar a usá-lo e coisas assim. Mas, no geral, sinto que é uma ótima prática para se dedicar. Mas se você estiver colocando seus primeiros sites, não se estresse demais, apenas brinque e use-o. Mas se você quiser entrar nisso, basta clonar um sistema de design para que você não precise fazê-lo do zero, e tenho certeza que ele vai te ajudar muito. 18. Adicionando arquivos do Lottie Files: Agora, vou mostrar uma ferramenta incrível que permite integrar animações com o Webflow sem problemas. Chama-se LottieFiles. Você pode simplesmente ir ao lottiefiles.com e baixar animações gratuitas. É assim que o site se parece. É apoiado por empresas incríveis, e é muito legal. Você pode ver LottieFiles. Um dos benefícios é que estes são menores que PNGs e GIFs, e eles carregam mais rápido que os MP4s também, para que você possa ver aqui um exemplo disso. É muito mais compactado, e você pode ver que as pessoas estão sempre carregando novos LottieFiles, animadores, etc. Você também pode baixar o plug-in para o After Effects, que você possa verificar isso. Eles têm os arquivos de download aqui. Basta ir até o Design na parte superior e clicar em “Criar com o After Effects”. Você também pode usar o Editor, que permite editar online se você não for um animador. Você pode baixar essas ferramentas da Adobe Cloud ou do plug-in lá. Você pode ver que você pode exportá-lo diretamente do After Effects para um LottieFile. Isso é LottieFiles. É realmente útil. O que você quer fazer é ir ao Descobrir e clicar em “ Animações gratuitas ” no canto superior esquerdo, e isso o levará a esta seção aqui, onde posso literalmente baixar qualquer animação, e você pode usar filtros na parte superior por, por Popular. O que eles têm agora é chamado de Categorias, para que eu possa pesquisar as específicas que eu quero. Se eu rolar para baixo, você pode ver que eles têm um monte de coisas diferentes: gráficos em movimento, UI, coisas completamente diferentes, até animações de cerveja, o que é legal. Vamos clicar nisso. Sinta-se à vontade para baixar o que quiser, o que quer que flutue seu barco. Este parece muito legal, Festa de Ano Novo, mas há tantas animações diferentes. Fui em frente e baixei alguns. Se você quiser baixar uma animação, por exemplo, se você quiser esta aqui, vou clicar nela. Você quer ir para o topo e clicar em “Download”, e o que você deseja baixar é um arquivo Lottie JSON. Você pode baixar os GIFs e MP4, mas este é o que queremos, então clique nisso e ele deve fazer o download para o seu computador. O que vou fazer é pular para Webflow. Agora eu fui em frente. Já baixei alguns antes, e o que queremos fazer é adicionar isso, então vou rolar para baixo e quero adicioná-lo a esta seção. Tenho um pequeno bate-papo um. O que vou fazer é clicar no lado esquerdo, nos Ativos, e você pode ver que eu arrastei esse já, mas vou arrastar esses outros dois assim como você normalmente faria como uma imagem normal. Agora você pode ver que temos esses arquivos JSON, que são a animação. Eu posso colocar meu mouse sobre ele, e isso me mostrará isso como você pode ver lá. Agora, o que vou fazer é clicar e arrastá-lo para dentro do meu contêiner aqui. Eu tenho isso. Posso mudar o tamanho dele. Talvez eu só queira colocar os pixels para baixo, talvez 300 pixels, assim. Agora, se eu clicar em “Visualizar”, você poderá ver a animação ser executada automaticamente. Super fácil. Eu realmente não precisava fazer nada porque ele é integrado automático. Você pode ver como a animação realmente parou. E se você quisesse realmente fazer loop? Posso sair do modo de visualização. Vou clicar duas vezes, se eu descer, você pode ver que ele diz “Loop”. Quero assumir isso. Também posso jogar ao contrário, e também posso alterar a duração incorporada se não estiver fazendo loop. Vou clicar em “Visualizar” novamente, e agora ele deve estar automaticamente loop repetidas vezes sem parar. Lá nós o temos. Tão simples, tão fácil. Agora vou mostrar uma maneira de criar uma animação com o LottieFile. Eu fui em frente e fui para minha outra página, e você pode ver aqui, eu tenho toda a minha página de processo. Tenho três passos sobre como trabalho. O que vou fazer é ir para a etapa 2. Vou mostrar como fazer uma animação de rolagem usando o LottieFile, então vou clicar no ativo. Vou arrastar esse design gráfico e arrastá-lo para baixo da seção de parágrafos aqui. Você pode ver esse belo e grande ícone. Agora, o que posso fazer é mudar os pixels dele. Vamos 600. Assim que tivermos nossa animação, queremos ter certeza de que a selecionamos, então vou clicar nela e você pode ver que ela está selecionada no navegador. Vou para o canto superior direito e me certificar de que minhas interações estejam selecionadas aqui. Vá para o gatilho Element e clique no botão “Mais”. Agora, o que eu quero fazer é ir até “Enquanto rola em exibição”. Isso nos permitirá, à medida que estamos rolando para baixo, que a animação pare reproduzida. Agora vou clicar nisso. Vou clicar em “Selecionar uma ação” e clicar em “Reproduzir animação de rolagem”. Você tem algumas configurações aqui nos limites da animação. Você pode brincar com isso, mas vou deixar isso por enquanto, e você pode ver que você tem uma animação de rolagem, e ela se chama Nova animação de rolagem. Vou clicar nisso e clicar no botão “Cog”. Você pode ver no lado direito, você pode ver que você tem um rótulo amarelo de exclamação, então, obviamente, não está funcionando, então vou ter certeza de que selecionamos nossa animação Lottie. Vou clicar em “Plus” e vou clicar em “Lottie”. Você pode ver que a integração deve estar aparecendo e você pode clicar em “Lottie” lá. Certifique-se de que ele está selecionado e mais, e então vamos ter a Lottie lá, como você pode ver. Legal. Como você pode ver, quando estiver em zero por cento, a animação estará em zero quadros, então estará na parada, e quando estivermos em cem por cento, queremos avançar a animação. Você pode ver que a animação está visualizando. Queremos que seja em cem por cento, então o que vou fazer é adicionar uma facilidade de quadro-chave. Vou colocar isso em facilidade e, em seguida, o 100% um à vontade, então você tem uma animação suave lá. Vou clicar em “Salvar”. Enquanto eu estou rolando para baixo, você pode ver a animação ser reproduzida. Você pode ver isso. Pode parecer um pouco irregular porque estou gravando a tela, mas você pode ver como ela está se movendo, o que é muito legal. Podemos fazer isso com qualquer outra animação. Vamos experimentar a cerveja aqui. Vou arrastar isso para baixo. Só vou fazer a pré-visualização. Temos a casa um, desculpe. Temos a casa, isso é legal. Posso voltar e adicionar o gatilho do elemento “Ao rolar a vista azul”. Posso clicar na rolagem também, e isso também deve funcionar. Vou voltar a subir. Percorrendo, você pode ver que está animando, e enquanto eu estou rolando para baixo, você pode ver que está passando assim. Você sempre pode voltar, e podemos ir e editar a animação de rolagem. Podemos alterar a flexibilização se você não quiser a visualização ao vivo da flexibilização. Você pode fazer uma visualização ao vivo no canto inferior direito e ver como ela será. Isso parece muito legal. É assim que você adiciona uma animação de rolagem. 19. Como conectar um domínio: Agora, quando você estiver satisfeito com seu site, mostrarei como conectar seu domínio. Agora, tudo o que você precisa fazer é ir para o canto superior direito. Quando você clica em “Publicar” e quiser publicá-lo em um domínio personalizado, você verá que há um botão aqui que diz “Clique aqui”. Agora vou clicar nisso e isso vai me levar às configurações da conta no back-end do projeto. Você verá que ele o levará imediatamente à seção de cobrança e isso porque você precisa pagar por uma conta para hospedar o site. Depois de fazer isso, você pode conectar seu domínio. Se você não conectar o domínio, então você precisa ter JeremyMura.Webflow.ai ou seja qual for o seu nome. Depois de fazer isso, o que você pode fazer é rolar para baixo e você chegará à seção de domínio personalizado. Agora, você terá uma opção aqui para conectar o domínio porque estou no site Eu não o tenho, vou para o outro lado em um segundo. Mas você pode clicar neste botão aqui e ele mostrará como conectar seu domínio. Agora, eu pessoalmente uso a GoDaddy para isso. Acho que o GoDaddy é um ótimo site para comprar domínios. É barato, acessível e é muito fácil de usar. Eles têm uma interface muito limpa. Agora vou voltar para um dos meus outros sites que tenho. Agora, uma vez que você estiver nas configurações de domínio personalizadas, você pode ver aqui que o meu foi publicado, tudo está verde, está tudo conectado. Agora, você também pode adicionar um domínio personalizado, para que você possa ver que pode colocar um domínio lá ou comprar um novo através da GoDaddy ou Google. Você pode ver se você clica em “GoDaddy”, ele o levará até lá. Agora, o que você precisa fazer para conectá-lo é precisar se conectar ao DNS. Vou para meus produtos e você precisa adicionar o número de domínio do Webflow ao seu domínio. Vou clicar no domínio, clicar nos três pontos e clicar em “Gerenciar DNS”, e clicar em “Gerenciar que significa sistema de nomes de domínio. Vou rolar para baixo. Agora você pode ver que eu tenho um registro CNAME e o proxy-ssl.webflow.com. É muito fácil adicionar isso. Você pode editá-lo. Você pode basicamente clicar em “Adicionar” no canto superior direito. Você pode clicar em CNAME e, em seguida, digitar WWW , e neste, basta copiá-lo do site, colar isso, e isso pode ser meia hora ou seja lá o que for. Então você adiciona o registro e, basicamente, apenas espera, às vezes leva 30 minutos, uma hora, o que quer que seja. Depois de salvá-lo, ele deve ficar verde automaticamente e, em seguida, você está pronto para ir. 20. Obrigada: Eu ia agradecer por se juntar a esta aula. Espero que você tenha aprendido todas as ferramentas e técnicas necessárias para criar sites sem código incrível. Lembre-se de participar e realmente fazer o projeto da classe. Vou verificar todos os projetos e dar feedback onde puder e apenas para garantir que você melhore e melhore e melhore. Agora, se você pode fazer uma coisa e apenas clicar no botão “Seguir” na minha conta para receber atualizações sobre novas aulas porque eu tenho um monte de novas aulas chegando em 2022. Você não quer perder isso. Se você tiver alguma dúvida ou precisar de apoio, basta postar uma discussão no fórum de discussão abaixo e responderei às suas perguntas o mais rápido possível. No futuro, vou atualizar pequenos bits extras em parte do curso. Se você tiver outras sugestões ou coisas que deseja aprender e sentir que eu perdi, definitivamente coloque isso como uma sugestão em um e-mail ou apenas uma sugestão na caixa abaixo. Muito obrigado. Estamos ansiosos para fazer novas aulas, e te vejo na próxima.