Como criar um site de geração de leads com o Webflow

1. Introdução: crie um site aberto com Webflow: Como uma plataforma, Webflow é uma ótima alternativa para os gostos de WordPress tão rápido, poderoso e muito mais fácil de usar. Os sinos mais tradicionais nas plataformas permitem que você construa seu site visualmente sem ter que se preocupar com códigos. E claro infinito, eu vou estar mostrando passo a passo como você pode construir um site de geração de leads. Somos a companhia B2C. Então, se você é proprietário de um restaurante, um genuíno e é um negócio local que procura melhorar a sua presença online, este curso definitivamente vai ajudar as edições. Mostrarei tudo o que você precisa saber sobre Webflow, desde a configuração de sua funcionalidade principal, coisas adicionais que você pode fazer com a plataforma Webflow e mostrando as melhores práticas para automatizar a regeneração processo. Então eu sou a superfície IC para ser um curso em serviço com você. E eu realmente espero que isso ajude. Se você tiver alguma dúvida enquanto está passando por este curso, você é mais do que bem-vindo para deixar um comentário abaixo, e eu entrarei em contato com você o mais rápido possível. E além disso, eu adoraria que você pudesse compartilhar comigo como um projeto o que você construiu como resultado de assistir a este curso. Então, com isso dito, vamos entrar no assunto. Estou muito animada para começar com isso. 2. O tipo de site vamos criar: Tudo bem, como eu mencionei no vídeo introdutório, e nós vamos estar cintando o site de geração de elite para uma empresa B2C. Então x você é um pequeno empresário, negócio local, você sabe, se você está em um restaurante, um ginásio, ou uma empresa como essa, este curso vai ajudá-lo a construir um site, os métodos de geração precoce da idade. Então eu vou estar mostrando a vocês como configurar a web para plataforma atrás de mim e tudo o que você precisa saber sobre isso. Vou falar com você sobre a marca. Você não precisa desenvolver seus ativos de marca e todas as diferentes ferramentas que você pode usar. E o mais importante, eu realmente vou entrar no nitty-gridty da web para plataforma. Porque como bastante difícil de usar se você é um iniciante e nós realmente queremos entrar nos detalhes disso para que você entenda completamente o que você está fazendo, porque definitivamente não é fácil no início como sua primeira vez usá-lo. Mas antes de entrarmos no prédio, você está realmente configurando ou Webflow correu. No próximo vídeo, eu vou estar discutindo as diferenças entre Webflow e WordPress porque FU realmente fora no início da lição, você nunca usa Webflow. E talvez você tenha um site WordPress agora, o que é compreensível. Você pode estar hesitante sobre o uso do Webflow. Você pode estar hesitante sobre mudanças para conhecer sua infraestrutura on-line até aqui, mas posso garantir que é pior. E vamos dissecar algumas das razões pelas quais a web será realmente uma alternativa melhor no próximo vídeo. Então vamos pular para isso. 3. WordPress vs webflow: Tudo bem, então esta tem sido uma página de desenvolvimento no site de fluxos web por algum tempo agora. E basicamente a razão pela qual o fluido fez isso obviamente eles são um disruptor e o espaço de design do site. E só para dar a vocês uma idéia aproximada de onde eles estão versus qual o preço no momento de eu fazer este vídeo, quais tendências representam cerca de 34% de todos os sites na Internet, certo? Então, a maioria dos sites que você olha são provavelmente hospedado bar foram cinto por que vestido? Alternativamente, o Webflow está atualmente como 0,4%. Então cerca de 0,40% .5 de todos os sites na Internet ou cinto com Webflow agora. Então, como uma diluição substancial, quero dizer, eu ainda acho que isso é muito bom, considerando que a esposa não estará aqui por tanto tempo, mas eles obviamente ainda têm um longo caminho a percorrer. E um dos grandes desafios que eles têm como adivinhar usuários para mudar de nosso site WordPress para Webflow, certo? Eles sabem que têm um produto ruim e eles sabem que eles têm mais para oferecer ao Nolan mais inovador. Eles são apenas melhores no geral. Mas o problema é que quando as pessoas vão em frente e tem um monte de tempo e dinheiro e assim por diante, infra-estrutura on-line, dizer sobre WordPress e, em seguida, aqueles que trabalham e eles podem ser muito, muito assustador e bastante estressante. Então grau para mudar para outra plataforma e colocar todos os seus ovos naquela cesta. Então esta página meio que ilustra alguns dos pontos-chave do porquê Web quem é o melhor. E eu só quero correr rapidamente através deles. Então podemos ver aqui, estes são obviamente tweets de pessoas que amam Webflow. Agora vamos incluir quaisquer comentários negativos sobre a plataforma aqui. Mas vamos dar-te uma ideia do que as pessoas estão a dizer. Então o Webflow é muito bom. Eu sinto que vocês são os primeiros a construir o UX certo vão ficar em um andar de brinde CSS. Tente com nada para instalar atualizações automáticas e sem PHP sobre o que pressionar de terroristas se você precisar. Todas estas são verdadeiras. Eu não preciso passar por todos eles. Mas se rolarmos para baixo e dermos uma olhada em alguns desses pontos, novamente, temos outro testemunho lá e certo, ok, então aqui vamos nós. Este é provavelmente um dos principais pontos de por que Webflow é uma mudança de jogo. Então você pode, eles estão dizendo que você pode construir um site melhor sem códigos. E assim há a essência do que eles são. Não há empresa de código, e o movimento sem código basicamente inclui um monte de empresas que permite que pessoas façam coisas sem códigos que normalmente você teria que usar código para fazer. Então, por exemplo, construir um site personalizado que você normalmente usaria tem que saber como codificar para fazer isso. E o que é Webflow. Você não tem que saber como codificar. E no final disso, você tem realmente um site de alta qualidade que normalmente você teria que saber como codificar para conseguir. Ok, então vamos seguir em frente com isso. Você pode construir visualmente com os códigos. Sabe, como estamos dizendo, é um Bowser visual, não é baseado em temas, não é baseado em códigos volumosos, não é baseado em plugins como o que pressiona. Você pode criar interações e animações com os clientes. Isto é outra coisa chave. Não posso realmente fazer isso e que imprensa a menos você comece a mexer e fazer algumas coisas personalizadas. Assim, você pode ficar muito, muito granular com a forma como deseja animar as coisas em seu site e resposta anti-B. Então, se você quiser que sejam ações muito repentinas do usuário final. E você também pode projetar onde o conteúdo CMS. Então esta é outra coisa, Webflow, o CMS é realmente, muito poderoso, muito poderoso como uma mudança de jogo absoluta. Então, mesmo que você provavelmente esteja assistindo isso, você está assistindo como um proprietário de uma empresa local, você pode não ser um comerciante ou desenvolvedor web agora que está tudo bem. Mas se eu tivesse que enfatizar uma coisa para usar como um divisor de jogo, acima de tudo, a partir do que pressionado para Webflow são realmente maioria dos construtores de sites para Webflow como a funcionalidade CMS. Usando um CMS, se você tivesse que fazê-lo sozinho seria Tressie difícil. E que esposa tem aqui? Eles têm um CMS onde se você quiser ter páginas de barco de uma determinada coisa, então você está fazendo SEO local, por exemplo. Essa é uma tática onde você tem um monte de páginas em vez de ter que adicionar cada página individual. Então você está usando para segmentar um local específico e você adiciona uma página, um modelo e ele é aplicado a todos eles para que você possa ter controle realmente bom sobre todas as suas páginas sem que ele seja realmente um grande pedaço de trabalho. Se descermos daqui. Estes são apenas alguns estudos de caso sobre os tipos de sites que você pode curvar. E então entramos na coisa do hospedeiro. Então, como se fôssemos falar, e um dos vídeos chegando. Webflow tem hospedagem bell nth da plataforma. Você não precisa encontrar um provedor terceirizado para hospedagem. E basicamente o que eles estão dizendo é que eles estão hospedando como por meio do Amazon CloudFront. E então, em conjunto com isso, eles também usam rapidamente. Ambos combinados fornecem um serviço de hospedagem muito, muito forte que eu pessoalmente gosto muito, eu acho que é muito, muito bom. Hum, eu não tenho sido capaz de cair tão, até agora, e eu estou com Webflow há cerca de um ano agora. Tão bom quanto, Marx, e você tem que pensar sobre isso muito menos do que o que você faria em outras plataformas. E além disso é definitivamente muito mais barato do que alguns outros provedores de hospedagem. Então isso é algo para ficar de olho. E a seguir temos o fato é que você nunca terá que fazer atualizações manuais em seu site. E a sensação de que quando você está usando o WordPress, geralmente se você obter plugins são se o próprio WordPress atualiza, você tem que realmente iniciar a atualização. O que é certo para você? Eles não fazem as atualizações automaticamente e você realmente não sente isso, você nem vai notar que é uma experiência realmente perfeita a esse respeito. Eles têm segurança e esposa terá segurança para Bell. E assim, ao contrário do WordPress, onde você tem que pagar um provedor terceirizado pela nossa segurança, o que é maravilhoso é Belsen. E quando você diz que você tem que se preocupar com um inferno de muito menos do que o que você faria se você estivesse fazendo isso no WordPress. Então, novamente, outra grande característica. E tenha em mente, eles podem ter a aposta do SUS. Então, se você não sabe o que é SEO, tudo bem. Otimização do motor de busca Seo, é aqui que vamos sobre a otimização do seu site. Então sapatos pequenos no Google. Então bom SEO é um monte de coisas se juntando. Nós não vamos, você sabe, nós não temos que entrar em muitos detalhes aqui, mas estas são algumas das coisas que realmente contribuem para um bom SEO. Portanto, hospedagem de alto desempenho, como acabamos de falar, que realmente contribui porque tem um grande impacto nas velocidades. E então nós temos ferramentas, você sabe, é muito fácil configurar redirecionamentos e outras coisas para o meu fluxo, muito mais fácil no WordPress, por exemplo, como eu mencionei, o frio é muito, muito limpo. Isso significa que é muito mais fácil para os motores de busca lerem. Esse é um ponto importante. Então isso meio que resumir estes a maioria dos pontos-chave. Vamos entrar em todos eles um pouco mais individualmente à medida que passarmos por este curso. Mas espero que isso lhe dê uma idéia melhor de Webflow e y é definitivamente muito mais rápido do que o que pressionar F5. Para resumir, eu diria que o fluxo de trabalho melhora em tudo o que WordPress falhou até agora, m, porque sabemos na maior parte, WordPress é uma plataforma de código aberto e qualquer um pode realmente fazer o que quiser com ele. Mas o propósito deste vídeo era apenas abordar algumas das preocupações que você pode ter sobre o uso do Webflow. E eu tenho certeza que você pode dizer pelo jeito que eu estou falando sobre isso. Eu canto as orações da empresa sempre que eu tenho só por causa de como eles são bons. Então, sim, o que está sendo dito? Vamos saltar para o próximo vídeo e realmente começar a avaliar no Webflow e criar este site para você. 4. Crie sua conta webflow: Ok, então a primeira coisa que você tem que fazer é ir em frente e criar uma conta no Webflow. Agora, eu já tenho uma conta com outro endereço de e-mail, mas eu estou apenas configurando um fictício apenas para mostrar o processo que você tem que passar ao criar sua conta. Então ele é parado para três. E você pode continuar com seu endereço de e-mail ou você pode dizer, não, foi o Google. Eu recomendo conectar com sua conta do Google como apenas um pouco mais fácil e vai economizar um pouco de tempo. Então eu só vou usar este endereço de e-mail e nós vamos ouvir o que nós queremos fazer é apenas apertar o botão enviar e-mail e, em seguida, verificar em livros. E você pode ver que temos um e-mail do suporte completo da web. Confirme seu endereço de e-mail. Ok. E isso é que há literalmente começar a ir. E isso é tão simples quando se trata de rastrear sua conta. E não há muito com que você tenha que lidar. E você pode fazer algumas coisas com seu perfil público e editar a frase da sua conta. E nós temos um par de guias aqui, como vitrine. É aqui que você pode descobrir diferentes trabalhos de pessoas diferentes na comunidade Webflow. E você pode dar uma olhada em diferentes designers e ver o que eles estão fazendo nos perfis. E você tem um monte mais, mas esse é apenas o processo de inscrição. Então, com isso sendo dito, vamos seguir em para realmente seguir em frente e traçar nosso primeiro projeto. 5. Adicione seu primeiro projeto: Ok, então o que eu fiz aqui foi mudar para minha conta web flow. E é aqui que vamos construir projetos. Então é aqui que eu vou mostrar que ele constrói o seu projeto. E o que eu vou fazer é só ampliar um pouco, só para que você possa ver um pouco melhor. Ok? Então, o que você vai fazer é no seu painel, você só vai apertar o botão Novo projeto. Ok, então basta clicar nisso e depois vamos a partir daí. E então o Webflow lhe dará algumas opções para modelos e coisas assim se você realmente precisar deles, mas provavelmente você está pronto. Eu aconselharia vivamente que você está começando de uma tela em branco como nós temos aqui. E você provavelmente deveria se acostumar com isso. Se você está trabalhando com a lei Webflow, você, você, você vai descobrir que você não vai fazer um monte de trabalho com modelos, provavelmente nunca mais. Ok, então vamos apenas clicar em branco. Desafie isso. E tudo bem, então o tipo de site que vamos construir no caso de eu ainda não ter tocado nisso. E obviamente estamos construindo um site de geração de leads para uma empresa B2C. Mas o tipo de site, a catraca vai estar construindo até um ginásio. Está bem. Então é um negócio local são bastante comum tipo de cinto site. E tudo o que vou mostrar a vocês todos os fundamentos da geração de leads através de um site que vocês precisam saber. Então, o que eu vou chamar um ginásio como Magnus Gem, Air Share. Está bem. E caso esteja se perguntando o que significam essas palavras ou além de Jim, Magnus significa cinza e uma asha é de onde eu venho. Então, no caso de você não poder dizer a eles sotaque eu sou da Escócia e o kantiano de é chamado de ar tímido e estamos na costa oeste da Escócia. Mas, mesmo assim, você precisa saber disso. Mas de qualquer maneira, vamos em frente e criar nossos projetos. E quando fizermos isso será levado e para Webflow. E é aqui que flui, isto é o que parece. É uma verdadeira tela em branco, para dizer o mínimo. E temos muito o que conversar aqui. Mas isso resume para você apenas criar em um projeto e como é esse processo. E, em seguida, o próximo vídeo eu vou estar quebrando os componentes principais da onda plataforma completa. E só para você entender por que a terra não é peso, tudo é. Então, sim, vamos saltar para isso. 6. Configurar seus pontos de pausa: Então a primeira coisa que eu queria falar aqui é realmente breakpoints porque é uma parte muito importante. O processo de desenvolvimento web e esposa voou para muito, muito bem. Então, como você pode ver aqui em cima bar no centro, nós estamos, agora nós estamos em que é exibido com uma estrela ao lado disso. Então este é o seu lugar de design principal como a maneira que eu categorizaria todas as alterações que você fizer aqui e será aplicado ao ponto de interrupção do seu tablet, ao seu ponto de interrupção do telefone horizontal até o ponto de interrupção do telefone. E como você pode ver, o Webflow já está predefinido o que cada um desses pontos de interrupção são. E você definitivamente não deve mudar nenhum desses, apenas deixá-los como eles são porque o direito e você pode ver que eu apenas rolar para baixo, ele fica menor. Então, quando somos Edison desktop, por exemplo, fazemos aqui. Lembre-se que não foi um tablet que estamos fazendo aqui. Lembre-se Edison ou telefone horizontalmente que fazemos aqui. E, obviamente, apenas um dispositivo móvel normal, fazemos isso aqui. Agora, há algumas opções aqui que você deve considerar quando você está construindo um site. E eu vou te dizer, eu faço apaixonadamente como alguém que está fazendo isso o tempo todo. Se você clicar nesses três pequenos pontos aqui no lado esquerdo, você pode ver que você pode realmente adicionar mais pontos de interrupção. E enquanto eu costumo fazer é eu costumo adicionar todos esses pontos de interrupção, certo? Então nós vamos apenas adicioná-los para esses projetos e você pode ver por que eu realmente faço com eles apenas no caso de você decidir usá-los. Então nós temos nosso ponto de interrupção para 1280 Px, então nós vamos adicionar isso. E este é um ponto importante quando você cria estes, você não pode se livrar deles. Portanto, certifique-se de que, se estiver a criá-los, está a fazê-lo pelas razões certas. Então clique em Criar, e eu vou ir em frente e adicionar esses outros dois. Certo, perfeito. Então agora temos todos os nossos pontos de interrupção. Agora eu sei que você está pensando, você provavelmente está pensando, ok, tudo desde este ponto de interrupção e até este grande aqui parece exatamente o mesmo. Como é que eu posso dizer a diferença entre qualquer um destes? Então deixe-me explicar rapidamente. Se eu clicar no pequeno olho aqui do lado esquerdo, se eu clicar nisso, agora eu posso ter uma prévia, certo? E como podem ver, o tamanho deste ponto de interrupção gasta toda a minha tela, está bem? E eu faço todo o meu design e em um iMac Pro, certo? Então, a maioria dos sites que eu olho na minha área de trabalho, mas na verdade todo esse ponto de interrupção. E então, quando você está projetando aqui, você está projetando para pessoas que têm aquela tela maior. E à medida que descermos, verá que fica menor a partir daí. E você pode usar menos funcionalidade de arrastar e você pode mover para cima e para baixo. Você pode colocá-lo onde quiser. E então realmente cinza se você quiser ter certeza apenas para ter certeza de que tudo é responsivo em todos os seus pontos de interrupção. Mas vamos apenas o modo de pré-visualização por um segundo. Enquanto estamos nos modos de design, podemos arrastar aqui, certo? Mulheres no tablet, coisas assim. E a razão pela qual eu gosto muito apenas arrastá-lo nos modos de design m é porque o fluxo de vento irá mostrar-lhe como você pode ver, em seguida, o canto inferior direito lá vai mostrar-lhe o tamanho que isso diz para certos dispositivos. Então, podemos ver aqui o 768 px como um iPad Pro, escrever como 9,7 polegadas iPad Pro. Então isso é muito útil para saber. Então, se você tem um iPad Pro, se você estiver olhando para ele em um iPad Pro e não consegue descobrir por que ele parece não corresponder. E é provavelmente porque você não está olhando para ele no ponto de interrupção da taxa. Então sim, mas algo para ter em mente. Então essa é uma das primeiras coisas que precisamos para atrapalhar e isso são pontos de interrupção. Então, sim, espero que ache isso útil. A menos que passe para o próximo. 7. Guia de gestão web: Então agora que entendemos ou pontos de interrupção e já definimos nossos pontos de interrupção, digamos, a próxima coisa que quero falar quando se trata de diferentes recursos que foram cheios tem como esta coluna, em seguida, o lado esquerdo. Então é aqui que você controla diferentes partes de digamos. Então vamos passar por eles rapidamente. Vamos primeiro guia aqui temos com um pouco mais ícone. Aqui você encontrará todos os diferentes elementos que você pode adicionar ao seu site e os diferentes elementos que você pode jogar. E então você também tem ela fez camada para que você possa adicionar, você sabe, então para uma barra de navegação pegajosa, um aquecedor sobrepõe uma chamada à ação se encaixa ou contato de todo o lote. E assim estes são camada base para que você pode usar se você não quiser construir algo do zero e terminar a segunda guia, nós temos símbolos. Símbolos são algo que você não vai vê-lo em qualquer outro site design-build. Então eles são completamente novos e independentes. Especialmente quando se trata dos construtores de design de site. Por símbolo basicamente permite que você faça se eu criar um elemento em algum lugar e ver realmente uma seção que eu criar como um APA ou algo assim. Posso virar minha barra de navegação e montar. E o que esse símbolo me permitirá fazer assim me permitir adicionar o mesmo pedaço de conteúdo, então várias páginas em minha opinião. E então sempre que eu quiser fazer uma edição em um símbolo, eu poderei fazer essa edição diretamente em todos os lugares onde o símbolo aparece. E lhe darei um exemplo ativo disso mais tarde que você poderá ver. Mas isso só lhe dá uma breve introdução ao. E então, se descermos de novo, teremos um navegador. Então, quando adiciono elementos diferentes ao meu site e não fiz camadas, estou adicionando, estou adicionando componentes diferentes que soam um do outro de maneiras diferentes. E o que pode navegar isso me permite ver a maneira que esses elementos se sobrepõem um ao outro. Então algo não está bem definido e certo, ou se algo não parece certo e eu não posso vê-lo, apenas quando eu estou olhando para meus sinos ou eu posso ir para navegar e eu posso ver como as seções são. Eu posso ver que tudo está olhando bens e eu posso ver meus nomes de classe, que nós vamos falar um pouco mais tarde novamente. O que, de novo, teremos até um pouco mais tarde. Mas isso só dá uma idéia de como a navegação funciona. E quando você está construindo uma página grande, isso dá rezar muito rapidamente. Mas isso torna muito, muito fácil encontrar o que você está procurando muito rapidamente sem ter que clicar em, um, você sabe, muita bagunça nos barcos e encontrar o que você está procurando, então há um erro. Temos a aba Páginas. Isto é muito simples. Este é exatamente o lugar onde você vai criar suas páginas. Então você também tem pastas. Assim, à medida que você procura manter as coisas organizadas, as pastas são uma ótima maneira de segmentar suas páginas, e isso é tudo que você realmente precisa saber sobre elas. Vamos falar sobre as configurações e páginas reais um pouco menos, mas esse é provavelmente o lugar mais importante para começar. Então, abaixo disso, temos coleções. Coleções que mencionei comprar mais, falando sobre o que Imprensa versus Webflow. Hum, mas nós não vamos ser mencionados sobre muito com coleções. Não vamos fazer, não vamos montar um blog ou algo assim, mas coleções ou algo que eu definitivamente tocarei provavelmente em outro curso, mas você não vai precisar se preocupar ou pelo que estamos fazendo aqui. E, em seguida, abaixo disso, temos e-commerce. Não, nós não vamos tocar em e-commerce, mas provavelmente é bom apenas tocar em qualquer maneira. Então, se você ativar o comércio eletrônico, é um plano completamente diferente para o comércio eletrônico. Mas isso vai basicamente se você clicar em e-Commerce e ainda assim você tem um site de e-commerce e, em seguida, há um monte de outras coisas que tem que fazer e eu vou apenas nos tirar, mas nós não estamos fazendo isso aqui, então não precisa se preocupar. Então vamos apenas riscar. Abaixo disso, temos o lugar onde você adiciona todos os seus MGs, um, assim você pode gerenciar todas as suas imagens aqui você pode ver o tamanho do Webflow também irá dizer-lhe se sente um pouco de dano. Então, para assar, e isso é ótimo para manter todas as suas imagens e um lugar facilmente acessível. E, em seguida, abaixo disso, temos configurações, então backups e você pode procurar coisas adicionais. E abaixo disso, como você pode ver no canto inferior esquerdo aqui, você tem esta marca de seleção ou o recurso. E o que isso permitirá que você faça é como você está projetando em uma página e você pode se sentir feliz com isso, ok? Mas o Webflow analisa e vê que pode haver problemas na página que podem prejudicar o seu SEO ou pode ter. Então é desempenho ou algo que pode fazer o site não parecer certo, então as auditorias serão sinalizadas e, em vez de ter uma marca de carrapato, você só tem quadrado com nada nele. Aqui. Você pode procurar coisas diferentes por fluxo se você precisar de ajuda com Aniston e abaixo que você tem alguns tutoriais em vídeo se você precisar mais alguma explicação do que eu estou falando, e então você pode obter ajuda se você precisar dele. Mas isso explica todas essas guias e o que elas são e brevemente como elas são usadas. Os lugares onde vamos passar a maior parte do tempo estão definitivamente nesta seção de anúncios. Nós vamos estar falando sobre símbolos são bons. Vamos usar navegações através de uma lei, falar muito sobre isso. E as páginas passarão um pouco de tempo de páginas e essas são as quatro que você precisa se concentrar. Então, no próximo vídeo, eu vou estar falando sobre essa coluna da direita e Watson aqui, que eu tenho certeza que você vai ficar animado para ouvir falar. Então vamos pular para isso. 8. Recursos de design: Ok, então a próxima coisa que precisamos falar sobre como recursos de design de fluxos de trabalho. Então, quando nós realmente colocamos elementos na página das guias de gerenciamento e o que nós realmente adicionamos a eles? Como é que os desenhamos? Como é que os fazemos parecer do jeito que queremos? Então eu fiz alguns elementos realmente básicos aqui só para tentar passar o ponto. E eu vou passar por cada uma dessas guias no lado direito e dizer o que todas elas significam porque todas elas tinham propósitos diferentes, mas você deve ser capaz de reunir a maioria delas. Então seção MLA, isso basicamente determina como as coisas olham para onde este era o líder deles. Normalmente, você usará a guia Layout se estiver tentando adicionar na maioria das coisas dentro de algo. E o que quero dizer com isso é, se tomarmos este exemplo, eu tenho um blog de desenvolvimento, então eu tenho um cabeçalho, um parágrafo e um insight de botão. Se eu quiser fazer o parágrafo cabeçalho e botão horizontalmente em vez de verticalmente, então eu iria clicar no blog dev que você pode ver lá. Eu vou para a seção de laboratório. E se eu clicar neste pequeno botão à direita, você pode ver que tudo se move horizontalmente. E, obviamente, isso não parece muito apetitoso, certo? Quero dizer, não era para isso. Isto é apenas para ilustrar como funciona. E dentro disso, posso mudar um monte de coisas diferentes. Posso me afastar com esses botões. Posso brincar com eles até ficar feliz com a aparência deles. Posso mudar Vasco na horizontal. Posso fazer o que me apetecer com isto, certo? E isso é o que você usaria uma vida longe. Você pode usá-lo para coisas como títulos, se quiser. Mas eu aconselho apenas usar isso se você está tentando editar coisas e citar um impasse ou na seção cyto. Mas de qualquer forma, essa é a seção de layout. Então, se descermos ao espaçamento, é aqui que podemos ajustar o preenchimento e a margem. Então, se eu pegar essa cabeça e você pode ver que eu já fiz uma edição muito breve no título, mas eu posso mudar a margem e eu posso mudar o preenchimento. Então, só para quebrar isso, caso você não saiba o que qualquer um deles é. Margens de espaço, como você pode ver aqui. É destacado em azul no painel de honra aqui. As margens do espaço que existe fora do elemento que estamos olhando. Esses tons azuis representam a margem. Se eu passar o mouse sobre o preenchimento, deixe-me ver se faço shows. Sim, você pode ver que o preenchimento existe no, digamos, o elemento que estamos olhando. Portanto, o preenchimento e a margem são apenas uma maneira muito básica de ajustar o espaçamento. E não há apenas uma coisa maravilhosa, você vai descobrir que você pode adicionar uma margem de preenchimento e praticamente qualquer construção de design de site ou inclusão se você estiver construindo do zero. Então isso é algo a ter em mente. Deixe-me então para o tamanho se você precisar ajustar manualmente o tamanho de alguma coisa. E podemos falar sobre isso um pouco mais tarde com mais detalhes. Você pode usar uma banheira de tamanho, então você tem um monte de opções diferentes. Você não precisa saber todas essas opções são, mas você tem seus básicos que Px e você tem porcentagem de molhado. Então, se estamos olhando para este ponto de interrupção, se queremos que o branco para o elemento que não temos mão seja apenas 60 por cento de tudo o que estamos vendo agora. E então podemos usá-los. Então temos um monte de diferentes aqui. Você não precisa regá-lo, mas estes são os únicos três que eu realmente usar nossa porcentagem px e, em seguida, este chamado View. Então ver, o que significa que a seção em questão ou o blog de desenvolvimento, e vamos ajustar seu tamanho com base no dispositivo que a pessoa está usando para visualizar o site. Então isso é algo para ter em mente e ver hey, é muito o mesmo. Então, esse tamanho, eles podem ter posse e fatos absolutos relativos estáticos pegajosos. Você só vai realmente usá-los se você está fazendo animações bastante complexas ou quando você está construindo sua barra de navegação e você vai ver como usar esses laser sobre eles. Tenho tipografia. Então, obviamente, agora o seu texto, se você quiser mudar a fonte da forma como o tamanho, altura , cor, alinhamento, estilo, todo o lote que você pode fazer lá. Você também pode criar aulas, que significa que você não precisa fazer mielite em cada bloco de texto que você anúncios, mas podemos falar sobre isso mais tarde também. Então aqui em baixo temos antecedentes. Novamente, se você quiser mudar o fundo de um bloco def, ou você quer fazer uma imagem, ou você está tentando fazer animações, isso é tudo o que você faria apenas para isso. E nós temos fronteiras. Então, se você quiser quaisquer linhas, intervalo de blocos, então você quer quaisquer linhas, elementos Ranger você pode usar que é auto-explicativo, então tem efeitos. Não vamos trabalhar muito com efeitos aqui. Estamos apenas focando na regeneração, na estrutura do local. E há, obviamente, muita coisa que temos para cobrir aqui. Animações seriam um assunto totalmente separado, mas não há nenhum mal e brincar com elas, experimentar com elas e ver o que você pode fazer com elas. Então essa é a guia Design. Então, se olharmos para cima na parte superior direita aqui novamente, podemos ver que temos a guia Configurações. Então NFA poderia olhar para cima aqui, podemos ver que temos a guia Configurações. E o que você encontrará com isso como a guia Configurações mudará dependendo do que você está vendo. E porque eu tenho um título, selecionar ações, eu posso querer escolher se este título é H1, H2, H3 para 56 e assim por diante. E se você não sabe o que eles são, basicamente a estrutura H1, H2, H3 como essa é a maneira que você diz ao Google ou você diz ao mecanismo de busca a estrutura da sua página. Então, por exemplo, você só tem um H1 por página e que tem um título da página da pessoa olhando para um H2 seria a segunda metade disso e você começa a idéia, assim por diante. Novamente, instrutores principais são mais uma coisa de SEO. Nós realmente não precisamos tocar neles muito aqui, mas é importante que você saiba, e você não vai ter que quaisquer atributos personalizados e você não vai ter que o que quer que seja, mas pesquisar configurações de índice porque isso, Tudo o que realmente não importa. E então temos o Gerente de Estilo. Novamente, você não vai ter que se preocupar muito com isso, mas, e nós dois fazemos uma coisa chamada limpeza no final onde f foram quaisquer aulas que eu sei que nós ainda não falamos. E se houver aulas, você não as usa. Nós os limpamos e nos livramos dos que estão ativos. E depois o painel solar. Se você quiser interações, efeitos e introduções mais complexas, se você quiser construir algo mais complexo, os combustíveis, esses podem levar um pouco mais de tempo. Você usaria o painel de interações novamente, que é mais avançado e complexo e nós não vamos ser realmente tocados em nada disso aqui. Mas, mesmo assim, é importante que você saiba o que é. Então, sim, mas realmente é. Então eu sinto que essa é uma boa visão geral da plataforma Webflow em geral. Há algumas coisas que vamos ter que fazer para que eu não tenha tocado aqui e as configurações mais tarde. Mas, na maior parte, eu deveria estar pronto para ir. Vou entrar em mais detalhes em certos aspectos de ampla mencionado aqui. Mas no geral, sim, acho que estamos muito bem para ir. Então vamos seguir em frente e preparar nossos ativos de marca para este site antes de realmente começarmos a construir. Certo, vamos para a próxima. 9. Escolhendo nossas cores de marca: Então agora nós entendemos um pouco mais sobre a plataforma web é hora de parar de falar sobre uma marca ativos. Então, quando você começa a preparar soletrou o site, o ditado que você não faz quando você está construindo um site geralmente não saltar direto para o processo de design. Essa não é a maneira mais eficiente de fazer as coisas. E muitas vezes você pode achar que as coisas demoram mais do que a metade do que por causa de certas coisas que você não fez no início do processo. Então a primeira coisa que eu sempre gosto de fazer é pegar as cores da minha marca e alterar. E o site que eu costumava fazer isso como um site chamado assassinos e mata seu grande por gerar paladares sem graça. É muito fácil de usar e você pode, eu não vou mentir. Você pode passar um monte de tempo aqui apenas olhando para cores diferentes. Então vamos começar com janeiro. Então veja como continuamos. Ok, então podemos ver aqui, isso é uma gentileza e quilos. E você pode brincar com isso. Você pode fazer o que quiser com o tipo de esquema de cores que eu vou usar para este toalhetes que eu já sei que vai ser uma única cor. Então eu não quero nenhuma cor de acento, eu só quero uma boa cor e então eu vou usar uma escala de cinza para todas as outras coisas importantes. Então o que eu vou fazer um prato para estes. E então eu vou fazer isso em tons de cinza. Vou a um para textos e depois um para o contraste e a cor. E caso, eu estou fazendo blocos diferentes ou apenas uma coisa para estourar um pouco mais. Então eu vou ter uma cor para os meus textos, que será este aqui. E então eu vou ter outro código que eu posso usar contra o fundo branco se eu quiser realmente, muitas caixas são inocentes, mas eu não quero que ele seja tão escuro que vai causar um contraste. Tão minucioso e com o texto. Então vamos em frente e escolher a cor dos nossos textos. Se formos aqui e clicarmos para baixo hexadecimal e clicarmos em pica-pau, certo então para provavelmente ter aqui, pensar provavelmente, mas lá, eu acho que é provavelmente um bom lugar para o texto. Está bem. Então podemos fazer isso e podemos trancar aquele. E aqui eu quero um cinza muito mais claro até o topo da balança. Agora você provavelmente não será capaz de dizer aqui, mas esta cor não será muito usada. E é tão fraco que você nem vai notar. Mas o que ele faz é que ele me ajuda a criar uma diferenciação entre diferentes partes do site e sem ficar muito na cara do espectador. E é algo que o espectador nem vai notar. Mas essa é a coisa de um design, bom design como anomalia notada pela pessoa olhando para ele como design ruim e Moisés. Então eu sei que nós vamos ficar com essa. E você pode ver que há uma pequena diferença entre o caminho até aqui na zona cinzenta aqui. Então vamos trancar essa. E então se eu mudar isso, e se você usar a barra de espaço, você será capaz de mudar a cor como você pode ver isso. Então vou continuar passando por isso até encontrar a cor com que estou feliz. Então é uma jóia. Então nós queremos algo que é provavelmente bastante brilhante, bastante elétrico. Bem, essa é uma cor bastante interessante, mas provavelmente um pouco demais para um dia. E aqui, hmm, interessante. - Sim. Eu não sei. Na verdade, acho que vou ficar com esse aqui em baixo. Talvez passe o lado bom, mas acho que posso trabalhar com isso. Na verdade, sim, quer saber, vamos ficar com a gente. Acho que ilustra o que estou tentando conseguir. Então vamos com esta cor. Então vamos trancar isso. E o que vamos fazer é guardá-lo aqui. E eu vou salvá-lo como este exemplo de design. Isso é bom. Guarde isso. Ok, desnecessário se assim for, essa é uma das principais coisas dos sinos e seus ativos de marca da maneira que vamos construir nossa paleta de cores tão simples. E eu sei que pode parecer muito simples, muito simplista, mas às vezes quando você está fazendo marcas e coisas de cor, você não quer que elas estejam acontecendo demais. Você não quer que isso seja cor excessiva. Você só quer algo simples e fácil de aplicar para a maioria das áreas do site. Então vamos em frente com isso e em seguida vamos passar a bicar nossa tipografia. 10. Adição de suas fontes: Tudo bem, agora que sabemos as cores que vamos usar em um site. E a próxima coisa que queremos olhar como o tipo de fontes. Então nós vamos usar, que é outra parte realmente importante de qualquer site que você está projetando. E não vou mentir do jeito que você faz isso. O que é maravilhoso é muito mais fácil e comparações de WordPress como é noite e dia, eu sempre acho que é super, super difícil de obter fontes personalizadas dentro do WordPress que quando apenas o padrão que eles lhe deram de alguém como eu, Quando faço isto o tempo todo, torna a minha vida dez vezes mais fácil. Então, o que precisamos fazer é ir para fontes Adobe. Lá vamos nós. E manteremos a aba dos assassinos aberta para o laser. Mas vou assinar rapidamente aqui. Ok, isso é bom para ir. O que vamos medir fontes de preço. Portanto, seja diferente para você, depende do tipo de site que você está projetando. Porque estou projetando o ginásio. Vamos querer algo limpo e é bastante ousado, não na sua cara, não excessivo, mas algo limpo e moderno e diga às pessoas que é um ginásio. E então o que eu vou fazer é passar pela limpeza. Você pode ver aqui, eu só vou ampliar um pouco só para que você possa ver. E isso nos dá um monte de opções diferentes. Então, qual? Eu estou indo para ir para? Um de um vai longe. Vamos tentar luxo, não um e é assim e talvez geométrico. Agora, vamos limpar. E eu quero san-serif, provavelmente é um bom lugar para parar. E olhe para estes. Então o que você vai descobrir é, quero dizer, essas são apenas variações da doutrina do obsoleto, do mesmo estilo de fonte, mas elas definitivamente errado. Eu posso garantir isso. Então, na verdade, apenas olhando para aquele que chamou minha atenção na primeira página que eu acho que poderíamos usar este aqui, Proxima Nova. E eu já usei, eu quero saber psi é, mas eu acho que devemos ir em frente e usar esta alça, aquela. Eu já usei isso antes. Eu sei que funciona, então vamos ficar com isso. E agora vou fazer o que cria projetos. E o que vamos fazer. Ia chamá-lo de exemplo da academia Magnus. Ok. A menos que clique em Criar. E o que fizemos lá como fizemos, sim. Então o que temos feito aqui é que temos casos de projetos web e valorizar a fonte para o projeto web e o projeto web com louco como o que será imposta no Webflow apenas no caso de não estar claro. Então, vamos clicar em Concluído. Agora, eu já me conectei à minha conta do Adobe Fonts, então você terá que fazer isso também. Mas o que temos que fazer aqui é ir para Configurações. Então, se você subir para o canto superior esquerdo, para o pequeno hambúrguer e, em seguida, ir para Configurações do projeto. Então, nós realmente não tocou em Configurações muito e nós vamos ser definitivamente se aqui. E como nós vamos como todas as coisas boas aqui que você precisa saber. Mas não vamos entrar em laser dizer. Estamos montando para domínio e outras coisas. Mas o que você deseja fazer para fontes como ele vai para a seção de fontes. E você verá aqui, obviamente você tem acesso a fontes do Google se quiser usar qualquer uma delas. Eu só prefiro ter a flexibilidade de fontes Adobe e você pode meio que ter acesso a fontes que você de outra forma não seria realmente capaz de fazer. Se você tiver quaisquer fontes personalizadas que você deseja adicionar, você pode fazer isso aqui. Mas realmente, se você me isolar, o que você provavelmente estará fazendo é usando fontes Adobe. Então eu já tenho minha conta, como você pode ver, e podemos ver o exemplo de Magnus Jin aqui em baixo. Então eu vou clicar nisso e eu vou salvar as alterações. E o que isso fará é importar Proxima Nova. E assim nossos projetos. E é isso. É assim tão simples. É realmente simples assim. A única coisa que eu não toquei também, e ele é um token API da Adobe. Tudo o que temos que fazer é coletar a API do Adobe Stock e eles são salvos token. E o que as APIs fazem, tudo o que faz é criar como uma verificação entre os dois aplicativos. E ignora um nível de segurança que lhes permite falar uns com os outros. Então nós escolhemos as fontes e lá a próxima coisa que precisamos fazer é olhar para o nosso logotipo, certo? Então outra parte realmente importante foi um pouco que vamos parecer. Então vamos falar sobre isso em seguida e começar a projetar um logotipo. 11. Crie seu logotipo: Tudo bem, então a próxima coisa a fazer antes de realmente voltar para Webflow e começar a saltar como criar nosso logotipo. Então, há alguns bons sites que você pode usar. Eu recomendaria apenas para dar-lhe um par de idéias e o tipo de local que você pode querer. O primeiro como pesquisa. E eu usei um par de vezes, ele só me dá algumas boas idéias e o tipo de logotipo e eu estou olhando para criar, e ele só me dá alguns bens, n digamos n para o tipo de logotipo que eu poderia querer. Então eu estou apenas logar bem rápido porque eu já tenho uma conta com eles. E o que podemos fazer é eu vou gerar mais desenhos de logotipo. E porque eu já estava aqui, Elea fazendo algum trabalho, digamos , da ordem, mas são sinos. Já há algumas sugestões para a academia Magnus. Então vamos manter isso como assim. Vamos percorrer isto e dar uma olhada. Ok, então obviamente há um monte de sugestões que nos deram. Eu pessoalmente não estou interessado em nenhum deles, mas o que você vai encontrar com a gente, você meio que tem que escolher e escolher o que você está procurando. Então, se você torná-lo como uma diversão e odeio as cores são algumas delas você pode gostar do ícone comportar o texto conhecer alguns deles. Você pode adorar o ícone e o texto se comportar com a cor, então você só tem que escolher. E porque é que me deixaria ver se há um que realmente salta para fora. Então sabemos que a nossa cor vai ser vermelha. Então vamos procurar formas que possam funcionar. Esse parece interessado em. Muita coisa acontecendo aqui. Muito parecido com o peso. Na verdade, fui em frente e eu já curvei um logotipo que poderíamos usar, mas eu só quero ver se há algo mais aqui que salta do braço. Não sei como me sinto sobre isso. E de qualquer forma, o ponto aqui é que você pode simplesmente continuar rolando por isso e você pode continuar procurando logotipos muito diferentes e você pode levar o tempo que quiser. É como aqueles coolers para, você, poderia apenas sentar aqui, clicar e carregar mais o dia todo olhando para um monte de logotipos diferentes. Alguns deles são interessantes, mas o que podemos fazer é ficar com o logotipo, o exterior. Eles foram em frente e criá-los apenas para manter o ritmo. Sim, eu vou fazê-las. Então, para projetar seu logotipo, você tem algumas opções. Você pode usar a Adobe Creative Cloud ou o Canvas. Se você estiver procurando criar um logotipo rapidamente. Ou se você já tem um logotipo, talvez, talvez você tenha usado Canva, talvez não por recomendar Canva para a maioria das pessoas, apenas se você está sendo parado para usar este fácil de usar, arraste e solte todas as coisas boas. Então eu vou fazer é sim, esse é o logotipo que eu estou procurando aqui. Certo. Então eu já fui em frente e louco o lado de vermelho diferente. Então vamos mudar para os vermelhos que quero usar. Volte aqui e vamos fazer isso bem, lucros. Ok, tente feliz com isso em geral a coisa. Sim, Ok. Podemos ficar com isso. Não sou mais rápido que osso. Então o que vamos fazer é eu quero fazer isso um pouco maior. Então estamos pegando o foo do estrondo por Buck. Vou cortar essa dinâmica para que não seja muito grande sobre o tamanho e tal. E então vamos fazer o download. Então vamos PNG vai transplantar e fundos de download. E agora que fizemos isso, vamos voltar ao Webflow. Então, aqui vamos nós. A menos que, sim, voltemos aqui. Vamos voltar para o designer. E nós vamos fazer o upload deste logotipo. E que deve esperar colocar não é bons sites stat vai começar a projetar o mesmo. Então vamos para MGs. Clique em envios, menos aqui, abra isso. Certo, e podemos ver nossos logotipos nos bolsos deles. Então, agora que temos um logotipo, obviamente você leva um pouco mais, porque você tem que projetar um do zero. Você tem que gastar tempo tendo algumas idéias. O logotipo é verticalmente importante. Então, certifique-se de gastar seu tempo nisso. Certifique-se de que você está realmente feliz com ele antes de colocá-lo em seu site. Mas sim. Então a próxima coisa que precisamos fazer, e vamos voltar para um formulário web vai parar sinos sobre isso como precisamos construir um guia de estilo. Então, agora que temos cores, temos fundos, temos nosso logotipo, e temos que construir um guia de estilo. E um guia de estilo vai tornar sua vida muito, muito mais fácil quando você realmente começar a construir nesta plataforma. Então vamos pular para isso no próximo vídeo. 12. Crie seu guia de estilo: Certo, agora que temos cores de marca, temos nossa tipografia ou fundos e temos nosso logotipo. Ele tende a ir em frente e construir um guia de estilo dentro do Webflow. Então, se saltarmos de volta para Webflow e vamos criar uma página e vamos chamar um guia de estilo agora, no caso de você estar se perguntando por que ficar todos obter como e como, por que, por que eu posso apenas ir em frente cinto o site agora a1 wie das uma conta para ficar OU Portão. Este dia vai ajudar com algumas coisas. Em primeiro lugar, vai ajudar quando você está aplicando diferentes temas, as diferentes partes do seu site. E porque o que vamos fazer é criar aulas e eu vou explicar exatamente quais dados são enquanto estamos passando pelo processo. Mas a outra coisa vai te ajudar a fazer isso. Se você também está criando conteúdo social, você sabe, talvez você faça um mercado de IPO também. Se você estiver fazendo, se você estiver usando diferentes métodos de marketing onde sua marca se aplica, o ganho estável vai ajudá-lo a manter sua marca consistente em todas as diferentes plataformas que a urina, mas acima de tudo está realmente indo para ajudá-lo dentro do Webflow e economizar muito tempo e energia. Então vamos em frente e criar uma nova página. E vamos chamá-lo de guias de estilo. E isso é tudo o que precisamos fazer. Você não precisa fazer nada sobre SEO. Você não precisa diagnosticá-los com Open Graph, mas há uma coisa que você tem que fazer. Então, se você rolar para a direita até a parte inferior desta página, você tem códigos personalizados e você tem uma etiqueta de cabeça da NSA e uma etiqueta de corpo. E você precisa de um pouco de códigos. Você precisa de um pouco de código. Para que esta página não seja indexada pelo Google por causa do propósito deste é para ser usado internamente em seu estudo. Do propósito dele não é que ele seja indexado pelo Google. Você realmente não quer que ninguém veja isso. Então esta página que eu acabei de puxar para cima, não deveria Google Search Console em si. E queremos usar uma tag sem índice. E isso basicamente diz ao Google que esta página que estamos olhando não deve ser indexada por eles. Não queremos que seja indexado. Então o que vamos fazer é copiar este código aqui, copiá-lo, e voltar para Webflow. E nós vamos colar a etiqueta da cabeça final, ok? E é isso. Então isso vai parar o Google rastejar nesta página e eu vou apenas Google qualquer motor de busca. Ele vai parar qualquer, qualquer motor de busca comprado rastreamento nesta página e nó de índice. Então, quando fizermos isso, vamos clicar em Criar. Agora temos nossos guias de estilo. Então o que vamos fazer com a porta traseira é que basicamente vamos construir o tema do nosso site. E apenas para dar um pouco de uma comparação aqui, você sabe, vamos estar falando sobre WordPress um pouco na onda para você basicamente criar seu próprio tema. Não há um Wordpress onde você escolhe um. Você pode escolher modelos para camadas e o tipo de estrutura que deseja que seu site siga. Mas quando se trata de temas, fontes, cores, design, animação, coisas assim. Temos que construir um guia de estilo para que isso seja o caso. A maneira que eu gosto de descrever pisos Web, é basicamente como um desenvolvimento sem código para gostar deste é o mais próximo que você vai chegar de codificação sem realmente ter que casacos, ok? Porque os fundamentos desta plataforma é construído a partir de como fechamento. E essa é a verdade. Então, do jeito que vamos fazer isso também, temos que seguir com o que estou fazendo. Aqui. Eu sou um aplicar a mesma coisa que dependente do que fontes e cores que você está usando. Pode ser um pouco diferente. Vamos apenas fazer uma seção. E então nós vamos jogar dentro, eu só vou jogar em um recipiente aqui por enquanto. Falarei sobre meus truques com laser de contêineres. E então a primeira coisa que vamos fazer é, desculpe, as rubricas, isso vai ser a coisa principal. Então vamos apenas adicionar estes aqui. Vamos adicionar seis deles. Ok? E, em seguida, sob cada um, vamos adicionar um parágrafo. Ok? Então vamos falar que um que vamos usar aqui vai ser nossos títulos H1. Então este é o título que será usado no topo de cada página. E 40 H1 queremos fazer, antes de tudo uma coisa. Então já está marcado esse. Mas antes de começarmos a editar isso e torná-lo um fim aos erros e torná-lo reflexo da marca que estamos tentando alcançar. Queremos dar uma aula e queremos chamá-la, vou chamá-la de básica. Sim, isso vai fazer. Vamos chamar isso de idade básica 1. Clique em Criar. Agora, o que acabei de fazer foi criar algo chamado classe. E a melhor maneira que eu poderia descrever uma classe como um conjunto de características de marca ou temas de marca são recursos projetados em vez de que você está aplicando a uma palavra em particular em seu site que é independente de qualquer coisa que não tem essa classe. Então eu posso aplicar esta classe a todos os tipos de elementos diferentes, quaisquer edições que eu fizer aqui. Então H1 com esta classe, contanto que eu aplique aquele Teller, quais em toda a minha opinião, o mesmo tema, os mesmos princípios de design serão aplicados. E esse é um ponto-chave. Então temos H1 básico. E o que eu vou fazer aqui é isso, é bom para o que eu sei que você pode usar isso vai ajudar a dimensionar seus títulos. Então, a Web diz, eu acho que este é um correto. Não era aquele. Dê-me dois segundos. Você pode realmente usar qualquer um desses. É apenas uma preferência pessoal, mas há uma em particular que acho bastante útil. E foi este. Não, acho que foi o que está logo abaixo. Este é um. Sim. Eu gosto muito deste quando eu usaria. Ok. Então, o que você vai fazer aqui, como você vai colocar o tamanho da fonte do texto do corpo, eu recomendo que você coloque o 18. E o mínimo realmente para seu site deve ser 16 por sempre recomendar assíncrono porque é apenas bom para usabilidade e acessibilidade e garantir que todos possam ler o que está no seu site. E então quando você coloca o n e isso vai te dizer o que todos os outros incisivos de cabeça devem estar em diferentes pontos de interrupção e baseado nisso, com base no tamanho do parágrafo. Então você pode ver aqui porque meu corpo tamanho da fonte será 18, é basicamente dizer que meu H1 na área de trabalho deve ser 54. Deve deixar cair o 45 no tablet e, em seguida, 36 no celular. Então vamos voltar e aplicar alguns destes ao nosso H1. Então o primeiro que temos é 54. Então eu vou fazer o tamanho desta lista. Temos que ir à tipografia. Então vamos derrubar todas essas escolas para tipografia. Podemos ver que é uma China 38. Então vamos fazer esse FST para DPOC. Aumentamos o tamanho dele. E por que não ouviria? Vamos apenas mudá-lo para as fontes, fonte gerada que queremos. E vamos olhar para a cor. Então esta era uma cor que nós queremos talvez bastante semelhante à que já tem aqui. Ok. Apenas ligeiramente diferente, mas praticamente na mesma linha. Ok. Então nós fizemos isso e agora queremos ter certeza de que os tamanhos de fonte corretos se aplicam. São todos esses pontos de interrupção diferentes. Então, à medida que você sobe a escala, medida que você se aproxima do mendigo, um ponto de interrupção, realmente não importa. O único realmente importa o tamanho dos Haden e a coisa toda diminuiu enquanto você entra em dispositivos menores. Então o que vamos fazer aqui é ir para o tablet. Vamos pegar o tablet número 45. E vamos aplicá-lo aqui. Ok, não escala que um para baixo. E depois vamos para o H1 Mobile 36. E nós vamos aplicar 36 para ambos os dispositivos móveis horizontais. Sou apenas um Volvo normal que quer ficar bem, lucros. Então isso é um baixinho, é basicamente uma escala de IB acima. Você pode ver que ele permanece consistente e nós mantemo-nos eficazes para enquanto vamos até aqui acima. Certo? Então agora queremos passar para H2. Então eu vou chamar este básico H dois. Certo, então só queremos passar pelo mesmo processo de novo. Então, vamos fazer esta topografia, vocês levem-na de volta para Proxima Nova. Vamos nos certificar de que usamos as cores certas. Como mencionado antes. Bolds e intermináveis passam por aqui. Então, para cerca de desktop, estamos olhando para Farsi 1, Suécia, certo? A menos que você saiba que habilidades para baixo. Então vamos forçá-lo, prever 1, 36, depois 29, backup, SAP novamente, um estágio três, voltar para 0. Nada que eu esqueci de mencionar. Esqueci de adicionar uma aula aqui. E isso é um bom ponto, na verdade. Se você não criar uma classe antes de fazer o trabalho de design em um elemento. O fluxo de trabalho atribuirá automaticamente uma classe, mas você pode alterar o nome da classe em qualquer ponto. E então este está apenas sendo designado cabeça para dentro. Então eu vou mudar isso e eu vou chamar isso de H3 básico. E outra coisa a apontar, quando você faz, quando você faz uma aula e você chama de HCI básica é particularmente para títulos. Não vai mudar automaticamente a avaliação aqui. Então, por exemplo, eu não acho que é aqui que deve ser marcado como H dois. E este aqui deve ser marcado como um H3. Ok? Então isso vai te ajudar um pouco. Ok, de qualquer maneira, vamos para H4. Tão básico h4. Ok? E agora você pode ver o H4. Quando entramos em 20, as coisas estão começando a ficar bem pequenas. E na verdade eu provavelmente não vou passar por H4 e esta instância, e eu não, eu não imagino que vamos usar mais do que uma página para quando formos construídos no site. Então vamos manter isso. Nós nomeamos o básico de H4. Queremos ter certeza que está marcado como H4. De volta aqui. Vamos ver. Eu imagino que sim, todos eles vão ficar são 20, independentemente se eu cair, nós vamos. Ok, bom, bom. Então vamos usar porque não precisamos mais disso. Acho que não vamos precisar deles, mas não queremos fazer nada. Eu gostaria de fazer aqui. Então o que nós queremos fazer é editar o parágrafo e eu vou aconselhá-lo o que fazer aqui, mas nós só queremos nomear esta classe Basic Parágrafo. Novamente, vamos mudar sua ANOVA aproximada. Vamos fazer o tamanho 18, como falamos. Ok, legal. Como você pode ver lá, porque nós aumentamos o tamanho do texto e este, e este parágrafo sem realmente aumentar a altura. Parece um pouco engraçado. Parece apertado e condensado. Quando se trata de enviar o tamanho é longe. Seus parágrafos básicos. Por que aconselharia como aumentar o feno? Mude para porcentagem. E então você vai estar olhando para algum lugar entre 125%, 165. Normalmente eu gostaria de ir geralmente cerca de 145, o que sim, eu posso viver com isso. Isso parece-me bem. Sim. Posso acrescentar a isso. Posso viver com isso. Isso parece bom. Eu acho. Vamos ver como fica aos 16. 5 na verdade é assim que você pode meio que jogar com normalmente. Quero dizer, você não quer que ele olhe para o espaço. Só não parece, sabe, não é fácil para os olhos. Você quer apenas olhar o espaço para que ele não pareça tendências realmente, é isso que estamos indo para. Então acho que é justo. Acho que isso é bom, é um bom lugar para começar. Só estou tentando pensar que ela teria 17 ou 16 anos. Talvez para este site, Eu acho que podemos ir para um 16, na verdade, 16 px em termos de parágrafo básico, Hey, Eu acho que pode ser mais apropriado. Então vamos para 1 65, e hey, tamanho 69. Sim, como eu disse, quero dizer, para a altura do polígrafo, você realmente tem que tomar como ele vem, às vezes fontes parecerão ligeiramente diferentes se você estiver usando fontes diferentes com eles. E é aí que realmente o tamanho e a justiça. Então, uma coisa pode, para este, como ele vai ficar com 16. E definimos nosso parágrafo básico. Vamos copiar rapidamente esta cor. Ok, bom. Estou muito feliz com isso. Eu acho que o que vamos fazer é aplicar esta classe em todos esses Haden só para que você possa ter uma idéia de como eles ficam com diferentes Haden. E então eu vou marcar este é o rumo um, indo para a direção três, e depois quatro. Ok. Estou muito feliz com isso. Eu acho. Sim, sinto-me bem com isso. Então, o que vamos fazer agora, isso é o, isso é o principal. Então, como eu estava falando antes, isso significa que você pode basicamente tomar este H1 básico você pode copiar e você pode aplicá-lo a outros lugares no site. E o guia de estilo continuará sendo o núcleo do que essas classes são. Agora você tem algo chamado classes combo. Se você tiver que mudar um destes em uma determinada página porque a cor não está certa ou algo assim. E eu vou te mostrar como fazer isso um pouco, Lisa. Mas isso é o principal. Mas isso é o principal. Agora. Agora que temos o texto ou a maneira que foi um dos componentes principais. Uma coisa que queremos fazer, um, como adicionar botões, ok, então deixe-me voltar aqui. Vou puxar um botão e queremos criar um design para 40 botões, certo? Queremos que um botão reflicta uma marca. Nós queremos também para n. Então o que eu vou fazer aqui é nós estamos tipo de topografia neste ponto e vamos olhar em mais de seu tamanho, fundos e fronteiras. Então, o que eu quero que o meu botão diga, a maioria dos botões vai dizer Saiba mais padrões. E eu quero que o texto obviamente seja Proxima Nova. Quero que o fundo seja lindo, vermelho que escolhemos. E mova isso de volta. Vamos entrar nos fundos. Tudo bem, Sweet. Ok. Agora, como você pode ver, ainda parece um pouco. Eu sou como se fosse apenas um botão básico, certo? Então vamos deixar o texto em negrito. Nós vamos fazer as fronteiras, mas curvas agora nós podemos ou, ou pílula re n, então parece um pouco mais como isso ou nós podemos apenas tê-lo sempre tão ligeiramente. Por mim, por isso, eu estou pensando que nós vamos manter o eu acho que nós podemos ir preencher. Mas como fizemos isso, o que precisamos fazer é voltar ao tamanho, sem tamanho. Então eu tenho qualquer SQL para espaçamento. Significa adicionar um lub e mais preenchimento às bordas aqui. Estou pensando que talvez roubo diga sim, eu acho que isso é razoável naturalmente sabe talvez 21 coisa que você vai encontrar quando você está passando por isso é que você vai estar jogando um avião sobre um monte nele. Estamos tentando descobrir o que é melhor. Então acho que isso é apropriado. E outra coisa que vamos querer fazer é não estourar um pouco mais, mas queremos suavizar essas bordas duras. Temos que correr do tamanho dele. Acho que está tudo bem. Eu provavelmente poderia usar isso e me sentir bem com isso. Mas uma coisa que eu gostaria de fazer quando vamos ao Effects, temos um pastoso, adicionar uma caixa de sombra, certo? Então clique em mais sobre isso. Não tão básico parágrafo, portanto, não, Eu quero, Eu quero no botão. Ok. Agora a coisa sobre isso, quando você está adicionando sombras em massa e você realmente não quer que eles sejam placa perceptível que falamos novamente com, você sabe, bom design é design como um oocisto. Normalmente é por isso que eu diria, nós queremos, nós queremos ter certeza de que nossos usuários não vão se sentir como, oh, isso parece sobre como ele não parece muito certo. Então, queremos percorrer a distância. Eu deveria saber que podemos deixar uma coisa que eu acho que posso deixar. Você pode deixá-lo em um borrão no blush para ser bastante alto. Mas queremos que o tamanho seja bem pequeno. Ok. Você não quer usar esses narizes e isso foi qualquer tipo de borrão lá. E não queremos preto, queremos puxá-lo para baixo talvez até o mesmo tom de cinza que estamos usando no texto. Ok. Então você pode não ser capaz de notar que você realmente sabe que você fez. Esses são muito, muito ligeiros borrão em torno desse botão. Isso faz com que se destaque um pouco mais, dá muito mais textura. E, mas não tanto que isso vai ficar no caminho de qualquer um olhar para ele. Eu só vou me sentir desconfortável nos olhos. Esse é o ponto que eu faria. Então isso é um botão para que possamos copiar isso. Oh, a última coisa que temos que dar essa aula, então vamos chamar esse botão básico, certo? E podemos aplicar essa classe a qualquer outro botão que adicionamos. Então site também. Então vamos copiar isso. Na verdade, não, nós podemos duplicá-lo e podemos apenas ver como isso parece e outras áreas. E sei o que está pensando. Qual é o grau? Sim. Digo, diga à sua marca como o que a marca do Azure desenvolve, você pode usar esta página para continuar desenvolvendo diferentes aspectos dela. Então, por exemplo, se eu quiser que você adicione uma cor de sotaque aqui, eu quero que você faça coisas diferentes e sim, eu tinha todas essas cores diferentes acontecendo e talvez eu quisesse adicionar outra diversão. Este é o lugar onde eu faria o trabalho para que isso acontecesse. Agora, agora que temos o botão, temos o texto, estou muito chapado, bastante feliz com eles. Eu faço ajustes no botão novamente. Posso apertar o botão de novo, mas tirando isso, acho que não vou fazer muito. Então agora a última coisa que queremos fazer aqui é obviamente apenas para facilidade de uso ID, em seguida, uma seção aqui. Eu não fiz Webflow contêiner padrão, Eu estou realmente indo para mostrar-lhe aqui, tem realmente cinto a seção eo recipiente. Porque se você está usando esses pontos de interrupção mais altos, como falamos, você realmente tem um pouco claro sobre isso, então tudo funciona bem. Deixe-me falar sobre isso agora. Então o que eu quero fazer quando eu fui para um bloco surdo bem ali, agora, eu sou um tipo de engenharia reversa e é isso mesmo. Quando você está construindo, você é apenas uma seção e então você coloca um local de blog morto lados e coisas que eu deveria ter levado com isso. Perdoe-me. Mas vamos fazer isso. Vou puxar este bloco. Então eu vou puxar todos esses elementos entrar no impasse. Então eles devem apenas arrastar e, assim, muito demorado, mas nós vamos chegar lá. Ok, repare e agora eu só quero mudar isso bloqueia e eu não quero largar aquele contêiner. Agora você pode ver que quando eu tive o impasse e como eu falei de um tipo, não há diferença entre um impasse em um contêiner e o contêiner é apenas um blog de desenvolvimento. O Webflow é jogado fora com um pouco. Mas o que é essa seção enquanto eu quero fazer é dar uma aula a isso hoje. Quero chamá-lo de seção básica. Sim. Não se pode soletrar básico claramente. Seção básica. E em termos de layout, eu quero ir para aquela caixa à direita, como falamos antes. Quero que seja vesícula e I1. Sim, eu quero isso lá. Não, eu não vou gostar disso. Sabe, eu fui lá e isso é tudo o que queremos. Certo, enquanto a felicidade, esta seção, vamos escalar independentemente do tamanho dos dispositivos que um usuário está olhando. O que as coisas impasse mudaram ligeiramente e eu vou falar sobre isso agora. Então o que vamos fazer é ir para o Def Block. Vou ligar para este contentor básico. Agora o que queremos fazer é deixar isso assim. Então, em termos de casados, queremos definir nossos casamentos máximos para a largura de um ponto de interrupção base. Então queremos que uma largura máxima seja 11, 7, 8. E nós queremos ser Deixe-me ver onde estamos em 99 para. E então o que vamos fazer é definir os pesos reais para ver o que é esse? Centenas. Ok? E, em seguida, o que nós também queremos fazer é com preenchimento, você nunca realmente quer elementos não tinha o site da página como este. Então o que você quer fazer é adicionar estofamento em cada um, dizer provavelmente peido, dizer sim, sim. Sim, sim, vamos começar com FAR. Você vai ver como continuamos, você sempre pode voltar e mudar isso se você mudar de idéia, mas sim, vamos definir que estamos longe disso. E depois à medida que avançamos, está bem. Você realmente não pode ver isso agora. Mas espero que isso me deixe apenas eles. Vou diminuir um pouco e mostrar-lhe aqui. Ok. Certo. Então, se você pode ver isso, o que acontece é a seção, medida que eu subo, à medida que eu saio, a seção está aumentando. A seção está aumentando em largura. Mas a maneira que eu defini esta seção como assim o a mantém o recipiente básico centrado, independentemente do tamanho da seção Como. E porque definimos essas restrições em torno da hipha, esse contêiner pode sair e não vai se estender muito à medida que a tela fica maior. Isso é uma coisa comum que você verá na maioria dos sites porque eles não veem. Porque o que acontece é se você projetou algo perfeitamente neste ponto de interrupção de base 0. E só para as dimensões básicas de um site, se você retirá-lo, você vai perder todo aquele grande design, todas as grandes coisas que você fez com ele. Então, é melhor apenas manter as coisas sensor para manter tudo no lugar. E é por isso que fazemos isso. Então estou muito feliz com isso. Esse é o truque quando se trata de contêineres. Então agora temos nossa seção básica e temos um contêiner básico. Temos as nossas rubricas básicas e temos um parágrafo básico. E eu estou presi geral feliz com o que parece, se eu estou sendo honesto. Ok. Então podemos estar pensando, bem, não, eu meio que tenho guia obsoleto e jogo. Bem, a próxima coisa que temos que fazer é ir em frente e criar nosso cabeçalho sob FIFO. E é para isso que vou seguir em frente. E o que vamos fazer é quando algo surgir, vamos pensar que é apropriado e é por isso que eu costumo fazer. Eu costumo começar com isso como meu olhar de estúdio. E quando eu acho que algo mais precisa guiar, ele está aqui, como por exemplo, um 10, eu não sei terminus de botão, certo? Não há esse. Parece um pouco diferente do que se encaixa em um tipo diferente de design. E eu vou voltar e eu vou desenhar um botão diferente com uma classe diferente. E você pode fazer isso para todos os tipos de coisas, certo? Sim, então agora vamos passar a projetar o cabeçalho, o que é uma parte muito importante. E então nós vamos projetar o Fisa. E então nós vamos começar a preencher os espaços em branco e obter eu vou dizer que parece bom. Ok, então essa é uma grande fora do caminho. Vamos passar para o próximo. 13. Criando seu mapa: Ok, então agora que construímos portões de permanência, é hora de começar a construir as cabeças são oficiais de um site. Mas antes de fazermos isso, há uma última coisa que significa é um cinto, um sitemap, páginas e Audra. E às vezes esse passo no processo pode ser ignorado. Depende do tamanho do site que você está construindo. E pela luz para incluir isso de qualquer maneira, só porque eu sei que você pode ser construído em um site maior foi mais páginas e F, Então que nece, talvez algo que você queira considerar. Então, cada site terá algo chamado sitemap. E um sitemap como a maneira do Google até mesmo chatbots na estrutura do seu site e quais páginas são importantes. Agora, sitemaps não são apenas para isso, existem todos os tipos de ajuda que você mantém o controle de quais páginas seriam construídas em um mais páginas são importantes para você. Então, por que normalmente, eu costumo nos usar para chamar mouse cola, mas você também pode usar os gostos de Lucidchart como o nome. Sim, você pode usar o Lucidchart. Eu usei o Lucidchart e o passado, e eles são muito bons se você está tentando construir esse tipo de coisa. Vamos apenas arame visual, mas é por isso que é coluna. E isso é o que você está fazendo quando você está construindo um mapa do site. Então as páginas que vamos ter, se formos desenhados estes como uma hierarquia enquanto a página inicial terá a página sobre. E também teremos um monte de página de serviços terá uma página de preços para diferentes pacotes. E o último que teremos como página de contato. Então vamos apenas colocar isso em. E agora temos 15. Sim. Então isso é aproximadamente o tamanho de um. Temos um site de cinco páginas e posso viver com isso. Então o que queremos fazer com isso, agora que temos nosso sitemap, como você pode salvar isso, você pode baixá-lo, fazer o que quiser. E você tem um site de mendigos, como eu disse, então você provavelmente quer manter saber que em algum lugar ou manter a pilha, você sabe, um documento ativo no brilho obsoleto que temos aqui e apenas adicioná-lo a cada agora e novamente, se as coisas estão mudando, muito mais clareza sobre o conteúdo do seu site e mais importante para você. Então, agora que conhecemos nossas páginas, vamos voltar para o Webflow e uma última coisa, limpar fluxo irá realmente gerar sitemap do site para você. Então, aquele que o Google lê Wherefore irá gerar automaticamente isso para você para que você não se preocupe em ter que fazer qualquer outra coisa além de que é quando se trata de seu mapa do site. E isto é só para te ajudar. Então, quando fizermos isso, vamos saltar de volta. Então, Webflow, e nós estamos indo apenas para criar rapidamente nossas páginas. Então temos nosso guia de estilo que não foram indexados, e então vamos criar uma nova página. Então vamos chamar essa de “sobre”. Novamente, vamos notar o que eu tenho SUR, qualquer coisa assim no momento, vamos apenas criar essas páginas. Então temos a página web. Em seguida, vamos para os serviços. Vamos criar isso. Vamos ter preços. Nós vamos ter contatos. E nós vamos ter uma página de contato. Certo, ótimo, então vamos criá-los. E vamos limpar a banda Apollo. Verifique se o guia de estilo não está e o caminho. Tudo bem, ótimo, então agora temos todas as nossas páginas e é isso. Então, a razão, novamente, apenas para enfatizar, a razão pela qual você vai querer economizar. A razão pela qual você vai querer desenhar um é se você tem um site de mendigo, se você tem mais páginas, é por isso que você vai querer uma, porque você vai querer manter o controle das coisas. Convém considerar a compra de CFS e páginas em pastas. Então, sim, se você está construindo um site maior, então eu definitivamente recomendo elaborar um sitemap. Mas com isso sendo dito, vamos quebrar e começar a construir nosso cabeçalho. 14. Construindo sua barra Navbar: Ok, então agora que nós fomos em frente e criamos nossas páginas, nós temos nosso sitemap e todas essas coisas. E agora queremos ir em frente e criar a barra de navegação e a fissura. E este vídeo, nós só vamos estar olhando para a cabeça da barra de navegação. E nós vamos ser construídos nisso. E eu vou te mostrar passo a passo como fazer isso. Você pode realmente fazer tudo isso em qualquer ordem que quiser. Eu só acho que é melhor para eles colocar a barra de navegação nas vísceras do caminho. E principalmente porque eles serão símbolos, haverá coisas que aparecem em todas as páginas do site. E é um pedaço justo de qualquer design o que você está fazendo fora do caminho quando você tem os dois feitos, eu só acho que uma boa maneira de quebrar o vídeo de treino e funciona para mim. Então pode funcionar para você. Então eu preciso fazer isso. O que vamos fazer é ir àquela placa de adição no topo. Vou pôr-me aqui. E nós vamos rolar para baixo até o fundo. E você verá o Navbar. E vamos puxar isso aqui. Lembre-se de quando falei sobre contêineres e como eles são um pouco engraçados. Aqueles que Webflow lhe dá o que este recipiente, você está restrito a este casamento de contêiner. E nós não queremos isso. Queremos poder usar o espaço do lado esquerdo e direito. E agora, a fim de fazer isso, nós temos que macaquear sobre cama Otelo antes de começar a fazer todo o design de coisas com isso, nós queremos colocar nossas estruturas no lugar. Então não tem navbar. Temos o contentor, como podem ver no navegador do lado esquerdo. E, em seguida, dizer que temos característica da marca e, em seguida, temos realmente ido Nav Menu foi nossos links nav e citá-lo. E então temos um botão de menu que aparecerá quando estivermos em dispositivos móveis. Mas o que eu quero fazer aqui é que eu quero que este recipiente seja as teias de comida. Agora, eu não quero brincar com ele com este recipiente porque ele não vai me deixar, é restrito a novas cidades do que ele pode fazer e não vai me deixar sentir que é a largura total. Então o que eu queria fazer como um bilhete naquele bloco, eu vou arrastar isso para dentro do contêiner. E eu me pergunto se todas essas coisas e dizer que diblock e nós vamos renomear e um segundo malicioso puxar todas elas e eu vou puxar isso para fora. E então vamos abandonar o Container Insights. Ok, e agora olhe para isso. Temos uma largura total e o que vamos fazer aqui é chamar esse contêiner de barra de navegação. Ok, ótimo, Então nós criamos esse vidro, que é apenas um tipo diferente de recipiente porque o que não queremos como as configurações e as estruturas que vamos colocar no bloco aninhado será diferente de um recipiente para que não queremos misturá-los. Agora que temos isso no lugar, vamos fazer algumas coisas. Então, muito do trabalho que você vai fazer com a barra de navegação e a Fisa. E a razão pela qual isso pode demorar um pouco de cada vez é porque você está tentando colocar as estruturas no lugar que permitem que ele seja responsivo. Falámos sobre a capacidade de resposta e os pontos de interrupção. Queremos que um site seja dimensionado corretamente. E para que ele possa ser dimensionado corretamente, temos que colocar algumas restrições em certos pontos de fechamento e interrupção para que ele funcione corretamente. Porque para este ponto de interrupção base, você vai descobrir que ele é aplicado para uma gama de dispositivos são pequenos e maiores k e a barra de navegação será empurrada Enter e ele vai ser puxado para fora. E queremos facilitar isso. Queremos que ele seja responsivo independentemente do dispositivo em que alguém está olhando. Então o que vamos fazer, já que temos a barra de navegação aqui, temos o contentor da barra de navegação. E a seção Navbar. Queremos deixá-lo como é exatamente assim. Ok? E quando clicamos na barra de navegação, o que queremos fazer é clicar neste botão aqui no lado direito da nossa tela. Queremos clicar nisso e então tudo isso vai parecer um pouco estranho, mas fique comigo e verá como vai acabar. Então, em termos de direção, queremos que seja Vasco. Ok, e você pode ver que é, é meio que mudar de volta para o que estávamos olhando antes. E queremos que seja centrado aqui. Agora novamente, aqueles n, o que quer. E então queremos que esteja completamente alinhado aqui. E essa é a razão pela qual estamos fazendo isso é porque queremos que a barra de navegação se estenda, tanto quanto uma tela vai, como você pode ver que quando nós avançamos, mas queremos que nossas barras de navegação permaneçam consistentes com o resto do site. Então, para fazer isso, e nós sentamos na manutenção, a barra de navegação censurado independentemente de como metas ponderadas e uma exibição de desktop. E, mas o que precisamos fazer saber que precisamos fazer este recipiente o direito Qual é a altura? Então o que você vai fazer é clicar no contêiner da caixa e então você vai colocar, hum, algumas condições nele. Então, as condições que vamos colocar, você vai para o tamanho e então você vai para o mínimo de homens. Então você vai para o Size. E depois o quê? Você vai clicar em vw, o que significa vista. O que está OK. Agora você pode ver que está tudo expandido, mas vamos definir isso para 100. Então, ver como falamos, isso significa que, independentemente do dispositivo que alguém está olhando para ele, será o branco da tela. Mas queremos colocar algumas restrições nisso, está bem? Porque nós não queremos nós não queremos a visão do que está sendo aplicado quando chegamos a alguns desses pontos de interrupção mais altos. Então, não só para contornar isso, temos que colocar algumas restrições sobre isso. Então, vamos conhecer o mínimo de moleza. Deixe-me ver aqui e é sempre tão ligeiramente. - Sim. Ok. Ok. Então vamos fazer a largura mínima 992. E nós vamos fazer a largura máxima 12, 79 lucros. E agora vamos subir esses pontos de interrupção. Você pode ver como a barra de navegação, e como ela se expandiu todo o caminho para fora, está ficando onde queremos que ela esteja. Então vamos voltar para baixo. Então, ponto de interrupção base. Em termos de feno de uma barra de navegação menos rapidamente, basta verificar a nossa altura ou como você deve ser ou um ACP x para isso. Então 60, eu estou pensando eu estou pensando que nós vamos apenas aumentar para 70. Sim. Talvez seja imediatamente dizer Sim, eu prefiro muito o AC. Só dá um pouco mais de espaço, mais espaço. Então agora o que temos aqui, nós temos, nós meio atrevido que algumas das estruturas de um Napa. Mas podemos ver aqui que uma marca que somos locais vai ser. E então a nossa barra de navegação muito perto das bordas que queremos, queremos, queremos deixar-nos ser um pouco de espaço entre elas. Não queremos que ele faça dois clusters. Então, em um contêiner, o que queremos fazer é adicionar um pouco de estofamento. E a coisa que eu recomendo que você adicione é 40 px. Isso deve ser suficiente para o que estamos fazendo aqui. E eu posso dar um pouco de espaço. Isso nos dá algum espaço. E o que você vai descobrir é que quando você projetar um site é o verdadeiro BC de um bom site como no espaço em torno do texto e das imagens. Isso realmente contribui fortemente para a forma como as pessoas percebem um site, mas não precisamos entrar em tudo isso aqui, mas espaços mais importantes do que você imagina. Então, agora que temos isso no lugar, queremos começar a moldar esses comprimentos. Agora, eu sei que você está pensando que provavelmente, bem, nós não tocamos em tablet ou dispositivos móveis. Vamos falar nisso em um segundo, mas vamos nos concentrar em ficar tudo bem no desktop. Então vamos adicionar uma página. Isso vai para casa sobre contatos e vamos apenas checar nossas páginas. Precisamos de esperança que vamos realmente ler a página inicial na barra de navegação. Falarei sobre isso em um segundo. Mas nós vamos ter sobre preços e conceitos de serviços, ok? Então vamos duplicar isso. Serviços de Bot, duplique esse preço. E então temos conteúdo. Ok, ótimo. E vamos abandonar a casa. Isso e eu vou te dizer o porquê em um segundo, mas é isso que queremos. Ok, ótimo. Então estamos tipo ir ou páginas e lugar. A próxima coisa que queremos fazer é adicionar o logotipo da nossa marca. Agora não sei se faço mudanças um pouco. Você só tem que ficar comigo. Vou ver como isto parece. Mas deixe-me colocar uma imagem aqui. E eu vou escolher ou logotipo, o que é um pouco vago, mas fique comigo. Sim, então por que eu fiz isso eu acho que eu posso tirar isso e eu posso apenas ir com os pesos sem dizer Magnus Jin. Pode não haver. Eu só não vejo realmente nenhum poppers para isso e nós também queremos ser consistentes, é claro. Então deixe-me levar isso por enquanto. Ok, e agora eu vou em frente e editar este local. Então não deve demorar, deve levar dois segundos, não deve demorar muito tempo. Certo, temos a academia Magnus aqui. Vamos nos livrar disso. Vamos ter a sensação de re, baixá-lo. Deixe-me pensar. Eu quero este pouco baixo, mas menor, mas você realmente não quer ter um grande dano. E eu realmente deveria falar com a gente um pouco mais sobre o padrão AI. Quando você está carregando imagens e coisas para o seu site, você quer que ele seja um formato JPEG e quando pode ser. E a razão quando você usa uma imagem PNG, se você quiser um plano de fundo transparente, geralmente, esse é o único tine que você usará uma imagem PNG se você não precisar disso, você usa JPEG porque é um tamanho de arquivo menor e não vai Hartley desempenho do seu site. Então, o que é isso? Obtemos que PNG é fundos transparentes e vamos baixá-lo. E eu, eu vou fazer é vir aqui rapidamente. Puxe isso e abra isso e edite rapidamente. Então tudo o que eu quero é este absoluto, mais perto que eu puder, porque nós não queremos que estrague nada. Ok. Isso parece bom para mim. Ok, ótimo. E agora, se voltarmos ao fluxo de ar, vou voltar às minhas imagens e vou fazer upload disso. Ótima. Então vamos voltar para tela cheia novamente e continuar indo lá. Agora, novamente, nós vamos ficar com a gente um pouco e apenas ver oh, eu estou olhando para isso. Parece um pouco sangrento. Quase lá, pessoal, o fígado. Então dobraremos mais uma vez. Mantenha uma linha do tempo mais de 500. Sem fundo transparente e volta aqui e mover adivinhe, carregar isso novamente. Ok. E o que vamos fazer é, não está jogando muito bom eles em termos de tamanho, proporções e outras coisas. Então, só isso comigo. Eu vou ficar bem. Ok. Então, tenho páginas no lugar. Temos um pouco lá. Pode não parecer muito bom agora, mas fique comigo. Certo. Agora. O que queremos fazer a seguir como queremos começar, novo, está parecendo um pouco melhor. A propósito, o que você vai fazer aqui, vamos marca link. Como você pode ver no lado esquerdo, este será o link para sua página inicial. Você vai descobrir que a maioria das pessoas vai clicar no pequeno que um site espera e isso é levá-los de volta para a página inicial. Então vamos ligar isso. Você vai para as configurações. E você só vai clicar neste botão de página aqui. Escolha a página e clique em. Ok, agora isso é tão macio. Na verdade, isso é outra coisa que você pode fazer com o contêiner. É daqui que eu acho que alguns dos problemas estão vindo. Volte para Design. E ainda assim chamamos isso de um empresário Leo eu acho que é apenas falta um senso horizontal de, ooh, lá vamos nós. Isso é melhor. E depois, e o quê? Sim, é isso. Está bem. Então, queremos comer. Então deixe-me explicar a maior parte do que estava acontecendo foi que a imagem ficou mendigo, é o logotipo ficou maior. E foi, ele estava empurrando para fora as proporções no alinhamento central das ligações de navegação. Então o que eu fiz aqui é que acabei de voltar para o contêiner da barra de navegação. Fui ao layout e mudei uma mudança. É uma configuração diferente e garantir que seus sensores, tudo o que é percepções, o lote surdo que nós contêineres. E então eu justifiquei isso certificando-se de que tudo está voltando o mais branco possível. Permitiu as restrições que foram postas em prática. Ok, então agora isso está feito. Vamos em frente e rapidamente basta vincular essas páginas. Então temos a página Sobre, a página de serviços, a página de preços e a página de conteúdo. E vamos fazer algo interessante com o botão de contato, que mostrarei em apenas um segundo, mas vamos clicar em contextos. Ok, ótimo. Então agora temos tudo no lugar. Quase sei o que eu queria ouvir. Quero começar a receber mais. E um que é mais sobre a marca. Quero que pareça um pouco mais rápido porque sei que não parece muito bom, certo? Parece apenas um logotipo e alguns links, certo? Isso não é muito bom. Então, a barra de navegação, queremos mudar o plano de fundo primeiro. Vamos nos projetar um pouco melhor. Então, o fundo, queremos ser brancos. E então dentro desse osso em si, eu queria que fosse algum tipo de sombra de caixa apenas para criar algum tipo de diferenciação entre a barra de navegação e o conteúdo do site. Então, como falamos novamente, quando colocamos essas sombras de caixa no lugar, nós realmente não queremos que eles sejam que nenhuma escola, eles devem apenas fluir com o site. Então distância podemos manter o suficiente disso. Então eu vou mantê-lo em 0. Sim, borrão, levem essa matriz para cima, tamanho, nós vamos tirar isso para baixo, mas talvez trazer o sangue para baixo também. Então mova a verdade, eu acho que provavelmente o ponto ideal para mim. Sim, estou feliz com isso. Está bem. Estou feliz com isso. Ok. Então isso não sabia que estava feito. Podemos ver a diferenciação entre o site e uma barra de aplicativos, que é exatamente o que queremos. E agora queremos mudar esses links de navegação e obter esses anormais. Então nós os conectamos, mas queremos ter certeza que a classe corretamente e que eles têm a fonte correta e coisas assim. Então vamos corrigir a aula. Vamos chamá-lo de “Navbar Link”. Certo? Vamos fazer essa aula. Vou copiá-lo. Então, estes três. Tudo bem, ótimo. Então agora o que vai acontecer é irmos em frente e editar um destes. Vai adicionar todas as fotos. Então vamos para a tipografia e vamos mudá-la para Proxima Nova, como falamos. Ótimo, isso já está melhor. E não queremos 14. Queremos pelo menos 16 para o napa, provavelmente ali. Ok. E isso parece bom para mim. Estou sentindo o que quer que seja. Agora queremos fazer algumas edições neste link de barra de navegação. Então eu quero que o botão de contato pop um pouco mais Principalmente porque essa é uma das páginas que priorizaríamos ao construir o site porque queremos que as pessoas alterem a página de contato que queremos que eles entrem em contato com a empresa . Então eu estou indo para altamente menos botão e eu vou fazer isso. E eu vou fazer isso fazendo parecer mais como um botão. Então você vai ver o que quero dizer em um segundo. Mas vou adicionar outra aula aqui porque não queremos que todos esses botões sejam atitude. Então vamos criar algo chamado de classe combo. E é aqui que você tem uma classe e, em seguida, você tem outra para que você possa editar a base da classe que você já tem. Então eu vou nomear este CTA, chamá-lo de Nav, link de navegação. Cta. Ok, eu posso viver com isso. Vamos para os fundos. E não que amadureça em aberto. Rápido, abra isso. Então o que eu quero aqui, vamos colocar isso no fundo deste link. Agora você pode ver, quero dizer, parece tudo bem, está tudo bem, mas é apenas uma caixa com texto preto e o contraste não é muito bom. Então, queremos limpar isso um pouco. Então queremos fazer com que pareça com os botões que nós loucos não sabemos, ficar OR portão. Então temos que mudar um pouco as fronteiras. Temos que levá-los até a marca 23 que eu dominei ou apenas o estofamento e dizer que estou aqui. Então nós queremos fazer isso eu acho que talvez não muito dez, provavelmente sorte. E eu sei que você está pensando que qualquer coisa bem, que não parece certo é muito alto. Mas vou te mostrar como consertar isso em um segundo. Então temos o comprimento e queremos mudar o texto para branco. E acho que posso fazer esses Bolds. Ainda não decidi. Sim, vamos fazer esses parafusos de botões. Então nav link, vamos para negrito, algo que seria muito melhor. E se a cor é realmente dos links, nós não mudamos isso. Então, queremos torná-los um pouco assim. Ok. Então é isso que somos Brent. Ok, e agora a razão pela qual você pode estar pensando, bem, essencialmente o recipiente, então isso não deveria estar acontecendo com este botão. Mas a razão pela qual isso está acontecendo é porque essa pessoa está na verdade em saids, o menu de navegação. Então nós realmente temos que fazer edições no menu de navegação para que isso seja sensores. Então temos que ir para a exibição. Temos que ir ao V nada. Queremos horizontal e uma vez centrada. Lá vamos nós. último que queremos, e queremos que seja preenchido, está bem, agora que manda esses. Então agora temos alguma diferenciação entre as páginas padrão e que usaria apenas para fins informativos. E uma das páginas que usaríamos para geração de leads, o que é útil. E agora, uma coisa que eu geralmente gosto de colocar, e eu estou muito interessado em colocar em um bloco superior acima do navbar com outras informações ou outros links que eu faço em alguns sites são geralmente sobre mendigo, RFQ, particularmente para negócios locais. Se você espera que as pessoas entrem em contato com você por telefone ou e-mail, ou é isso que você deseja empurrar acima e além da página de contato ou de quaisquer outros métodos de geração. Eu sempre acho que é bom colocar e o e-mail de numeração lá. Então é por isso que eu acho que vou fazer aqui. Vou mostrar a vocês o que fazer porque demonstra um dos outros bons recursos sobre o Webflow que ainda não tocamos. Então eu quero outro bloco div e eu quero colocar isso acima do recipiente, então ainda dentro da barra de navegação. E por que eu também vou ter que ver com o navbar é o ódio aumentado para também, certo? Então agora eu tenho este blog de desenvolvimento e eu quero fazer este top, Top Nav, o que vamos chamá-lo de nó superior. Vou chamá-lo de Top Navbar. Isso vai fazer. Queremos fazer a web para isso novamente. Queremos, queremos que isto seja, queremos que isto seja, o que gostaríamos que isto fosse? Queremos que isto seja uma centena. Agora queremos que seja uma centena. E queremos que a altura seja de 20 como estátua de Schnupp ou persa, talvez seja um sim, eu diria que é justo. E então o que eu vou ter que fazer aqui, eu vou ter que aumentar o tamanho deste recipiente. Provavelmente. Altura do recipiente. Ac, sim. Nós queremos que eu veja. Sim, sim, é onde queremos. Ok, então agora temos uma barra de navegação superior. Nós realmente queremos colocar outro blog de desenvolvimento e site se você estiver bem. Assim como o que fizemos com o então sim. Assim como o que fizemos com o contêiner, queremos definir isso, ver aquilo. E não vai expandir muito. Tudo vai olhar para uma proporção. Então eu vou ler isso bem rápido. Eu vou dizer isso como o fundo. Ok? E temos outro bloco D aqui com o qual precisamos trabalhar. Então vamos fazer um pouco, um pouco disso. Vamos chamar isso de Top Nav. E cheio, certo? O mesmo de novo, nós vamos fazer, eu acho, eu acredito na estátua do ódio. Então vamos fazer isso mais rápido. E porque não há conteúdo neste problema e eu vou fazer muito. Não, desculpe, esse é o lugar errado. É por isso que está certo. Ótimo. Agora queremos definir algumas restrições. Ver É uma centena. Mas queremos que as restrições sejam faladas antes. Então, 12 79. Assim, o mínimo seria 1902 e a largura máxima seria 12 79. Certo? Agora um segundo, algumas informações aqui em cima e ver como continuamos. Como eu quero um pouco de texto e vamos colocar algum texto aqui. Nada louco. Ok. Então eu sou um nome. Não quero outro para o meu número de telefone. Agora, você pode ver o outro empilhando verticalmente. Queremos que isso seja horizontal. Ok, ótimo. Então nós mudamos as teias de alimentos horizontais. Então, sim, isso é incrível. Na verdade, acho que não vou no IEP. Acho que gostaria de estar lá. Sim. E é isso que tenderemos a dizer. Eles não podem decidir. Sim, vou continuar à direita. Podemos continuar à direita. E queremos colocar um pouco de estofamento lá também. Então nós vamos fazer esses pacotes fossas e depois acabar aqui. E o número aleatório? Então eu vou para o Reino Unido, então eu vou colocar um número realmente aleatório, então mais 44, 23456. Tudo bem, isso pode ser um e então eu vou colocar contatos. É a questão da Magnus Magnus. Eu não consigo lembrar o nome do domínio deste site, mas eu vou chamá-lo de nove é Jim.com. Isso realmente não importa. Ok? E então nós queremos dar essas pequenas aulas. Então navbar, número de celular e endereço de e-mail. Ok, então vamos colocar estes na marca. Então vamos colocar Proxima Nova Condensada apenas normal. E torná-lo ousado. E Ipa, faça com que seja ousado. E nós vamos colocar algum preenchimento em torno dele porque neste momento o endereço de e-mail, número de fascículos juntos. Então vamos fazer provavelmente 10, eu acho, e depois 10 aqui. Sim. E depois queremos torná-lo branco. Então, a grade deles. Sim. E então aqui queremos colocar, novamente, queremos fazer coisas muito parecidas. Então vamos colocar 10 direito? Coisa ali. Está bem. Bolds. - Sim. - Sim. Pode trabalhar com isso. Eu inventei isso. Isso é bom. Tudo bem. Então, o recurso que ia mostrar quando se trata desta parte, como você pode realmente definir esses links no site para abrir ou, você sabe, se você está olhando para um site em seu telefone, você pode configurá-lo para que se abre. O Parsons e o discador estão longe de e-mail. Você pode configurá-lo para que ele abra como o Gmail ou Yahoo ou e-mail. Mas você pode configurá-lo para que abra o Gmail da pessoa para enviar um e-mail, você sabe, coisas assim. Então, se o número que queremos mas é isso que vamos fazer. Então, a próxima coisa que precisamos fazer, eu meio que estou fazendo isso um pouco ao contrário, mas apenas fique comigo. Você já fez isso, você vai querer acrescentar, então. Vamos apenas ver, você vai querer adicionar bloco de link. Vamos adicionar um. Vai perguntar o quê? Então você vai querer adicionar para vincular blogs aqui. É muito fácil. Outra, já fizemos esse bloco de ligação. Nós só queremos colocar um número e e-mail e dizer o bloco de links. Super fácil. Lá vamos nós. Agora podemos ver que esta é uma linha azul bonita e feia por baixo dela. Então, queremos nos livrar disso. Indo aqui. Decoração. E assim, não, não quero isso. E o mesmo aqui. Basta clicar em Não, nós não gostamos disso. E novamente, você realmente não precisa de qualquer classe para blocos de links, não é tão importante. Seria importante se você está tentando ditar como as coisas olharam dentro do link blog, mas nós não estamos, não precisamos fazer o que quer que seja. Ok, então se o número automático, queremos adicionar um link. Quando você clica em Link settings CEO, você tem um telefone celular aqui. Vou clicar nisso. E então eu vou apenas copiar e colar esse número bem rápido. Copie e cole isso. Em seguida, conecte-o para manter o número n. E se alguém clicar nesse número, então olhando para o site, ele abrirá automaticamente um problema de diálogo. E agora queremos fazer o mesmo para o endereço de e-mail. Então, com isso, vamos para as configurações e vamos receber e-mail agora mesmo. Então o e-mail vai ser contatos, Magnus, Jim.com, e, em seguida, assunto vai ser apenas dizer vamos apenas dizer membros e membros do coro. E tudo bem. E sim. Então, sim. Então anote sobre isso. Ok, então agora isso está olhando Besso Ray é noite e dia de quê? Pelo que era antes, mas ainda sinto que parece um pouco nua. E agora que estou olhando para ele, acho que é por causa do logotipo. Então eu vou querer voltar e talvez vai querer jogar com um pouco abaixo. Mas vamos ver se consigo fazer alguma coisa funcionar lá. Porque embora isso pareça bem, não posso dizer que estou completamente satisfeito com isso. Então talvez eu tenha que brincar um pouco aqui e te ver. Eu posso continuar. Então, se voltarmos para Canva, então se voltarmos para Canva e tivermos um local aqui, eu provavelmente quero ir para eu acho que vou colocar de volta no que tínhamos que comprar. Magnus, coloque o nome do ginásio lá atrás. Então acho que podemos fazer isso um pouco menor. Pegue algumas mensagens para ele. E eu vou colocar Magnus, Jen. E não levanta e há algo que não está bem comigo. Acho que é porque não gosto que isto seja horizontal. Então, o que acontece se eu for eu que, você sabe, isso poderia talvez funcionar? Realmente não importa. Quero dizer, o ponto aqui é apenas para ilustrar que você tem que colocar seu logotipo n. E tantas maneiras diferentes que você pode fazer isso, mas eu só queria pop um pouco mais. Quero que fiquemos sim, um pouco mais acontecendo. Então pegue meu pau cinza ali e eu posso fazer isso ir um pouco mais perto. Sim, acho que é um pouco melhor. Eu posso adicionar ao Magnus pode adicioná-lo aqui apenas para dar-lhe mais. O que é sim, mais parecido com ele? Isso é mais parecido com ele. Ok, e então eu quero apenas mudar este tipo de letra. Então vamos ver se temos livros, sabe, Nova aqui. Não, não sou fã disso. Então pode ter que ficar com o monstro que. Bem, você vai encontrar aqueles se você usar Canva, você está restrito mais quais fontes você pode usar e quais fontes você não pode usar. Por isso, basta ter isso em mente se você escolher usar Canva. Mas acho que posso viver com isso. Fará pelo que estamos tentando fazer aqui. Então vamos pegar isso e vamos colocar em um site novamente, na verdade, em mais uma coisa, eu queria apenas essa linha de altura. Sempre tão levemente. - Sim. Isso é melhor. Sim. E então eu posso puxar para baixo o tamanho disso novamente. Tanto que eu não sei se eu poderia procurar um símbolo diferente aqui. Temos os elementos. Sim, eu só quero algo que não seja tão orientado horizontalmente. Então talvez eu vá para algo como não tem que ser nada louco. Pode ser o que quiser. Você pode estar onde quiser. Você sabe, você pode acabar ir em frente e criar seu logotipo no Illustrator ou Photoshop ou Y v Você pode fazer. A razão pela qual eu não fiz é só porque esse é um curso totalmente separado. É um vídeo totalmente separado. Então eu posso apenas levar deixe-me apenas levar este. Devo saber que ainda não posso nenhum destes. Nenhum destes é cinzento claro, se estou a ser honesto. Sim, acho que tenho sorte. Eu só vou ter que ficar com o que eu tenho aqui. Na verdade, talvez eu possa usar este. Agora que sou um defensor do fisiculturismo ou mostrado fora de seus músculos, mas isso parece o melhor. Apenas do ponto de vista do design. Isso é bastante interessante. Sim, é bem interessante. Sim. Certo. De qualquer forma, achatar. Nós podemos ir com a gente desde que precisa mudar de novo, nós podemos, mas não é grande coisa no grande esquema das coisas. Então nós vamos apenas tomar rapidamente editar isso para baixo. Então eu acho que quando se trata de projetar seu site e outras coisas, você vai encontrar apenas as probabilidades agora. Certo, sabe, como se eu tivesse que editar, estou fazendo um monte de edições reclamando com coisas diferentes. E é isso que você faz para ser honesto, quando você está projetando, digamos que você gasta, você gasta tempo planejando porque você está tentando encontrar a combinação certa do que funciona e do que não funciona. E é mesmo. Você tem que seguir seu nível de instinto, mas, e você só tem que usar um pouco de intuição, pelo menos na minha opinião de qualquer maneira. Algumas pessoas têm processos diferentes fazer coisas definitivamente para mim. É só mais um caso de ver céu entrar e brincar. E é por isso que eu diria que você tem que entrar e brincar com ele. Então deixe-me ver isso. Estou feliz com isso. Sim, você sabe, eu posso voltar e brincar com a camada. Se eu fizer, eu não vou fazer em, neste vídeo. Então vamos deixar como se isso existisse. Tudo bem. É só o meu perfeccionismo chegando. Mas com tudo isso, temos, sim. Estou muito feliz com isso. Quero dizer, não há muitas páginas no site. Não vai haver muitas páginas para o seu estado, você pode ter muitas páginas, mas eu me sinto bem com a gente pelo menos por enquanto. Estou a tentar pensar, há mais alguma coisa que precisamos de acrescentar aqui? Eu acho que não. Eu acho que não. Então, sim. Então o que queríamos saber como queremos ter certeza que isso fica bem em tablets e dispositivos móveis. Então vamos para o tablet, certo? Então você pode ver lá por causa do, por causa das restrições que colocamos na barra de navegação e o ponto de interrupção principal como aplicado a todos eles. Então nós queremos mudar isso em um, em um dispositivo tablet. E deixe-me apenas verificar rapidamente para ter certeza de que isso parece bom como você sabe, um pequeno problema lá. Então, obviamente aqui, eu não configurei isso corretamente e eu posso ver o problema imediatamente. Então, é para baixo para este aqui. E eu acho que eu posso aproximadamente para sim, porque nós queremos que isso seja cheio de brancos, mas é isso. Então eu não editei o layout e é por isso que ele está preenchendo todo o caminho até o lado esquerdo enquanto ele escala, nós vamos torná-lo sensores Vasco. E isso deve resolver isso. CEO. Isso parece amarrado. Ok, então de volta para o médico. Ok, então vamos continuar indo para o tablet. E agora o que queremos fazer é essas restrições nas camadas de mudança. Então nós não precisamos que ele seja tão branco e nós realmente não queremos que ele seja assim traficante. Nós só queremos que ele seja, nós queremos que ele escala, nós queremos que ele faça a sua coisa, mas nós não precisamos de muitas dessas restrições que nós inicialmente colocamos em. Para que possamos datar o mínimo. Qual é o nome para fazer isso também. Fazer o máximo não era nenhum. Mas ainda não é legal lá. Isso também, ok. E agora você pode ver que isso parece um pouco melhor, certo? Essa pessoa está em um lugar se uma pílula ouvir e se move com ela. E como você pode ver aqui no tablet, você pode estar pensando, Oh, por que ele está mostrando a barra de navegação quando ele está em um dispositivo tablet e ver se você está em um iPad Pro. Por exemplo, se você visualizar um servidor web em seu iPad Pro e horizontal, ele pode parecer que está mostrando a versão desktop, desktop do site, mas na verdade, ele está mostrando a versão tablet do mesmo. E está mostrando isso provavelmente assim. Porque se sentir que eu posso obter eu posso ficar largo o suficiente para mostrar toda a barra de navegação sem transformá-lo em um hambúrguer, e então é isso que ele vai fazer. Então estou feliz com isso. A única coisa que eu não estou feliz com como eu não tenho certeza de como eu me sinto sobre o espaço Foster px no dispositivo tablet, mas geralmente eu puxá-lo para baixo para mini-lote, foi dormir. Eu realmente me sinto bem com este aqui realmente parece bem. Vamos deixar isso assim. Não estou feliz com isso. Então, novamente, vamos descer para a horizontal. Sim, eu tenho aqui é onde eu não estou feliz com isso. É aqui que quero mudar. Então eu quero fazer isso para o meu contêiner navbar. Em vez de longe, vou fazer 20. E veja como isso funciona. Não parece ser mudanças em muita onda Eu defini as restrições com eu ouço vontade que é para ser visto assim que nós jogar em forma agradável. E enquanto eu fiz é que eu fiz isso. Ok, então agora que eu adicionei, então vamos ver se eu consigo fazer isso funcionar bem. Enquanto um é que eu queria apenas é provavelmente sobre isso, então eu não tenho um problema. Quando é que esse espaço branco com proporções está lá? Mas quando está aqui em baixo, não gosto que fosse muito espaço. Ali. Tem que ser muito menos do que isso. Então vamos fazer que 28, talvez 10, dez, dez, dez, um ponto ideal. E do outro lado queríamos fazer o mesmo que eu deixei dez, ok, então agora você pode ver que essa escala é um pouco melhor, ainda não completamente perfeita, mas é muito melhor do que era. Então eu vou deixar isso assim e ele está pulando um pouco, mas é só porque eu estou puxando para fora foi sábio como ele pode ir. E está tudo bem. Certo, então o que vamos fazer agora é ir para o celular. A verdadeira mudança de jogo. Então móvel é um pouco diferente. Então, o mínimo de homens aqui que eu quero fazer para promover um eu não quero que meu máximo seja 479. Ok. E para mim, quero dizer, olha, vamos apenas olhar para esses dispositivos são baixos, mas a forma como o site parece agora seria em um entretenimento Nintendo. Sim, eu sei que um dispositivo intangível provavelmente não será visto em um dispositivo intangível a maior parte do tempo. Pegamos o Apple iPhone SE, sim, provavelmente. Então, queremos brincar com essa carga aqui um pouco, porque agora o e-mail está na Filadélfia e vista. Então, o que podemos precisar fazer é simplesmente não tirar o tamanho, mas precisamos tirar, primeiro tirar esse padrão. E lá vamos nós. Para mim, isso é sempre um problema se sinto bem com isso. Sim, posso viver com isso. E o que eu poderia fazer, bem como fazer uma sentença. Então, se eu for para o meu bar alto e cheio temos a sensação de que eu quero sim. Ok. Então eu fiz esse centro vive tosyl no gelo, mas veja sim. Então, por que as coisas acontecem aqui, você pode vê-lo saltar. Acredito que seja porque está herdando esse design do ponto de interrupção anterior. Então está tentando o que quer que seja, na maior parte. Quero dizer, vai ser visto sempre que o rastrearmos aqui, quase sempre. Ok, então agora para mim, todos esses, ok, eu estou muito feliz com isso. E agora eu quero fazer o que eu quero editar a cabeça, o olhar manual no celular e abrir com o hambúrguer. Então musicais avaliando para mim para clicar em Abrir menu. E você pode ver que não parece muito bom listra que não parece ótimo. Então, quando estiver aberto assim, o que faremos para torná-lo o fundo será os brancos e o dinheiro saudita. Então, sim, abra, legal comigo assim. Ok, então isso parece. Tudo bem. Então vamos abrir, abrir, fechar. Eu só vejo todo mundo. Então certifique-se de que o elemento em si como brancos, saudita, cinza escuro, cinza escuro, trazê-lo de volta por aqui. Então esse é um Alex Bessel aberto. E para esses elementos, queremos tornar o fundo branco e assim como o outro. Então menu de navegação, você vai para os fundos e nós vamos fazer isso branco. E esse é o Bessel agora. Tudo bem, parece melhor. Mas agora o que queremos fazer é que o botão de contato está definido e logo abaixo disso, bem no final do menu de navegação, queremos que isso seja sobre espaço, e também queremos que isso seja uma caixa de sombra. Então vamos apenas adicionar um pouco de preenchimento para o fundo, digamos 20, ele irá adicionar 20. E então o que eu vou fazer é adicionar preenchimento em cada lado do menu de navegação. Então, não está interessado na cintura, sente-se agora. Está bem. E então o que eu vou fazer enquanto eu vou fazer os sensores, sim, eu vou fazê-los sentir. E nós vamos ter que revisitar na verdade, sim. Agora você pode ver aqui que eu fiz algumas edições e eu fiz esse tipo de anúncio é M e o é passivo e isso é tipo de, esse é o levador. Mas porque você pode fazer isso para fazer o “ok”. Quando eu chegar ao celular, é quando eu vou fazer as edições na barra de navegação. Você realmente quer inventá-los aqui. Mas a maioria deles de qualquer maneira. E o que eu vou fazer é quando você fizer as edições no tablet, no celular horizontal e no celular e tiver, as mudanças que você fez. Então vamos apenas rapidamente e brincar com isso. Então fundos, brancos, ícone. Vamos fazer cinza. Menu de navegação. Branco. Adiciona 20 px e 20 metro. Isso ainda não decidiu. E então, enquanto eu quero que as mensagens também sejam enviadas. Então vamos ver o que acontece. Não menos do que eu vou fazer. Para que ele vá para o menu de navegação, torná-los centros assim. E então esse ônibus e eu queremos que esse botão mude. Então as margens talvez B queira adicionar a isso enquanto descermos, vamos ficar comigo. Ok. E então menos do que vamos fazer, nós só queremos fazer sombra em massa no fundo aqui. Apenas faça isso direito. E uma coisa que poderíamos, e por que eu acho que eu poderia fazer aqui é quando nós estamos fazendo as cores que falamos sobre usar como um software cinza. Então diferenciar entre brancos e certas áreas e a espessura seria um bom lugar para fazê-lo. Bem, isso nós vamos experimentar com ele e ver nenhum que um. Não. Como uma avenida. Acho que isso poderia. Sim, na verdade, você sabe o que é isso um pouco. E você pode ver aqui como único sessile, mas eu estou tentando fazer uma diferenciação entre a barra de navegação superior e depois a lista suspensa. Porque se tudo parece branco, eu só agrupo e parece cego e não parece, não parece certo. Então acho que vou ficar com isso. E vamos apenas rapidamente igual a n Estes, Sim, Então, certo, então o que temos aqui, as margens caminho através de trás aqui, 11 fosfato uma queda para muito menos do que isso, talvez 60. Faça-o persa, na verdade. Tudo bem, e você pode ver que o cinza na verdade não tem sido herança estes todo o caminho para baixo. Então eu preciso mudar isso. Então eu preciso levar nosso lindo cinza daqui. Fizemos algum plano móvel e não local de fundo. E eu vou colocar isso aí. Ok, então vamos ver isso rapidamente e ver se está certo. Então tomamos todo o caminho para cima, de modo que é o que parece na área de trabalho. Tudo isso foi para fora. Nós puxamos todo o caminho até o fundo. E é assim que parece. E eu tenho que dizer que eu realmente sinto tudo bem sobre isso. Sim, faz o trabalho. Eu acho. Acho que faz o trabalho. Sim. - Sim. Vamos ficar com isso. Na verdade, acho que é uma coisa que quero mudar. Não muito interessado nos fundos aqui. Então, se eu voltar para o tablet e o que eu vou fazer é realmente eu vou fazer engenharia reversa as coisas sempre tão ligeiramente. Então, se voltarmos para minhas cores e cinza escuro, eu realmente quero que isso é, eu acho que isso vai ser um pouco melhor, então apenas fique comigo e você pode ver o que eu estou fazendo aqui. E, em seguida, no menu de navegação em si, e eu vou lá. Não quero que o fundo seja assim. E eles podem estar pensando que diabos você está fazendo? Isso não parece certo. Está tudo bem, mas fica comigo e verás que não entramos. E então eu vou fazer sim. Ok. Agora você pode estar se perguntando, bem, por que diabos disso então isso novamente é um pouco de diferenciação. Algumas coisas simplesmente não parecem muito bem. E para mim, só o meu olho está bicado. Estava pegando do jeito que estava antes, como eu vi, que não parece cinza. Então vamos ver como está agora foi uma grande dança, um pequeno arco. Certo? Precisamos mudar de novo do fim. Então me dê um segundo tablet reserva. Abra de volta. Ok. Tudo bem. Está bem. Então, sim, 15. Construindo seu rodapé: Tudo bem, então agora que temos nosso cabeçalho no lugar, é hora de criarmos ou Fisa. Sabe, não há muitas páginas para nós realmente temos sobre o cindível. Portanto, não vai ser uma grande massa para que você veja você em alguns outros sites. Mas espero que haja algumas coisas que podemos fazer para torná-lo um pouco mais útil. Assim como fizemos com a barra de navegação, eu recomendo começar com uma dessas camadas e estava em um lugar diferente, mas eu recomendo começar com o que temos aqui, que é o Fisa. Então o que vamos estourar isso aqui. E então eu vou apenas pegar uma seção entre o cabeçalho e o cindível, só para ficar claro o que é o quê. Mas o que nós queremos fazer isso como nós só queremos realmente torná-lo marcado, essa é a coisa mais importante, tipo a cabeça que nós queremos pegá-lo e apenas torná-lo nosso. Porque não há muito que pedimos para acrescentar. E aqui no geral, algo que eu tenho em mente, eu acho que podemos fazer que você pode querer considerar porque você tem menos páginas. Mas se você receber mais páginas, Eu só disse que o sol e ajustado para se adequar às cores da sua marca. E então realmente que você deveria estar pronto para ir. Então vamos em frente e ver você se foi. Então, em termos de cor, eu não quero que seja branco e MOSFETS, essas são geralmente uma cor mais escura, então vamos pegar nosso cinza escuro novamente, eu vou voltar. E o que vamos fazer, isto é chamado de facilitadores tem física clássica. Então vamos deixar assim. E nós vamos fazer a cor de fundo lindo cinza. Ok. Agora você pode ver que todo o texto é obviamente que não funciona. Então temos que mudar as cores destes. Então vamos mudá-los para branco ou cinza raso. No entanto, esta é outra coisa que você pode querer considerar tantas vezes na Fisa, que você realmente não quer que tudo se destaque. Como tal. Você quer que ele tipo de, você quer que ele seja bem suave e você realmente não quer ser na cara de ninguém, certo? Porque eles já têm a navegação superior para obter aluguéis e a maioria das páginas que queríamos chegar. E você não quer que todos os links sejam enfatizados no punho ou você sabe, haverá certas coisas que você pode querer chamar a atenção se as pessoas chegarem tão longe. Mas no geral, você não está tentando fazer muito com ele. É apenas mais para os comprimentos, todas as diferentes partes do seu site. Então o que vamos fazer aqui tão rapidamente mudar essas cores. E então eu vou fazer é o n vezes é o branco. Eu não o tornaria completamente branco. Você provavelmente quer estar lá. Eu diria. - Sim. Está bem. Então vamos pegar isso e aplicá-lo aqui. E vamos fazer isso aqui. Ok, então meio que sei o que comprime. E eu vou ligar para o título desta empresa. E então nós estamos indo para ir sobre, serve esses preços. E eles têm contatos. E depois vou livrar-me destes dois. Agora você pode estar pensando, por que, por que, por que, por que não fez isso? Bem, há uma razão para isso. Vamos encontrar outro impasse para a coisa certa. Talvez precisemos brincar com isso um pouco. Sim, podemos colocar isso lá por enquanto. Eu provavelmente deveria ser estes não. Sim, na verdade vou fazer o meu próprio trabalho aqui. Então o que eu quero fazer é eu quero colunas. E em vez desses flocos estranhos que bloqueiam os fluxos de trabalho e estatutos M. Então eu vou colocar em colunas aqui. Eu vou adicionar, e então eu vou realmente adicionar um bloco no topo. E você vai ver onde eu vou com a gente em um segundo. Então é colunas de log acima e eles são feitos em termos de colunas. Acho que vamos ter um problema com três. Está bem. - Sim. E saiba que quando estou olhando, estou tentando pensar qual é a melhor maneira de fazer isso como um pilus até o fundo aqui. E então diga “bloquear”. Quero tornar isto menos horizontal. E também quer que ele seja espaçado, mas não tanto assim. Sim, vamos lá. E então eu vou tocar que as marcas vão fazer é que vai se livrar destes. Sim. Vamos incluir um logotipo. Apenas fique comigo. O que podemos fazer com este recipiente flexível? Acho que podemos deixar o contêiner de vôos lá. Algum grande sentimento em relação a ele? Sim, acho que podemos usar isso. E o que vamos tentar. Ok, então o que vamos fazer aqui como NFS, uma parte em parte, isso é um pouco de regeneração, certo? E como estou dizendo, se você não tem muitas páginas, sua física realmente não serve o mesmo propósito do que normalmente faria se você estivesse projetando um site maior. Então, para fazer uso desse espaço, o que muitas vezes você pode fazer é girar a cor de preenchimento e então eu chamo à ação, que é por isso que normalmente faria nesta situação. Neste caso, vamos fazer um formulário de inscrição por e-mail, ofertas e outras coisas sobre as quais podemos falar um pouco mais tarde. Mas para os fins deste M apenas pit nas estruturas tem certeza de que você tem um formulário de contato de Olhe como você iria construir um com Webflow, e, em seguida, como você pode conectar este provedor de e-mail de marketing final se isso é o que Você queria. Então vamos brincar com isso um pouco e ver até onde chegamos. Então eu vou para aqui. Eu quero esse sentido vertical de lá. Ok? Então, em primeiro lugar, vamos colocar uma imagem aqui. E eu quero a imagem do meu local, mas sem o nome. Além disso, livre-se disso. Vamos pegar essa grande figura musculosa aqui. E há algum tipo de download dos fundos transparentes. Então, quando voltarmos aqui, vou ter que cortar isso um pouco. Largue pacotes. E depois voltamos para cá. Ok, e então nós vamos voltar aqui. E nós devemos ter uma média bem ali. Neste momento, isto está a começar a chegar a algum lado. E isso é provavelmente um tamanho justo para o que eu quero. Ok, agora eu tenho um logotipo para as páginas lá dentro. Temos de ligar estes. Ainda não fiz isso. Faremos isso um pouco mais tarde. Agora, uma vez que você conseguir o capataz que vamos usar m para e-mails centrados no cliente e outras coisas. Então vamos aqui de novo. E vamos ver se temos algum formulário aqui. Então, tem forma de contato de caras se inscrever formulário. O que eu estou indo para todas as fotos realmente o formulário de inscrição. Acho que este é um dos mais úteis. Então vamos ver se isso funciona. Se não, vamos ter que construir um do zero. Então espessura dy, ok, então isso é uma seção inteira. Nós não queremos isso. Só queremos construir a fazenda do nada. Então vamos preencher um bloco de formulário para o contêiner. Ok? Agora, o que você percebe aqui é que eu tenho um senso de, mas eu realmente quero que eles sejam de largura total. E então o que eu vou fazer é aplicar estofamento, muito dele para tentar torná-lo apenas um pouco mais de sensores. Está bem. Então eu acabei por diversão porque muito parecido com o problema que eu tinha, eu geralmente teria com o cabeçalho e o recipiente não joga bem. Então nós vamos fazer é nós vamos apenas criar em fazer isso é sempre mais fácil, sempre. Então esse impasse ali, outro aqui, desculpe, as aulas em um segundo. E vamos conseguir um logo como tínhamos antes. Vamos chegar ao fim aqui. E depois vamos ter a nossa quinta. Então vamos pegar aquele formulário fingido, aquele que é puxado para dentro. Certo? Então, isso é novamente, alguém ia tomar um pouco de claro sobre UGA. E nós vamos chamar isso, vamos chamá-lo de contêiner. E então tomos de qualquer estofamento e coisas que quisermos. Vou colocar isso. Sim. Então vamos ter que fazer um pouco claro sobre aqui, assim como fizemos com o cabeçalho. Então isso é golpe morto aqui. É óbvio que vamos ligar para aquele contentor. Nós vamos chamar isso e nós vamos apenas chamar aquele contêiner interno. Você não tem que fazer isso assim, mas é exatamente o jeito que eu estou escolhendo. E queremos definir, queremos adicionar o mesmo tipo de frase que fizemos quando estávamos construindo o cabeçalho. Então, queremos ver como sendo um centésimo. E o mínimo de casados é 992. E o de Maxwell será de 1279 lucros. Agora, se puxarmos isso para cima e tudo o que temos que fazer sempre resta a fazer. Como um sensor. Eferência visceral, pense na facilidade da sensível Fisa. E esse será o Besso. Está bem. Então você pode ver que isso está meio funcionando, mas nós só temos que mudar um par de coisas funciona. Então deixe-me ver como isso funciona. Sim, então o que vamos querer aqui, vamos querer algum padrão só para quebrar as coisas, baixar isso. E então, para o formulário em si, eu quero ir. - Sim. Está bem. Então você pode fazer isso e você pode fazer vesículas para fazer teias cheias, que é definitivamente o que eu estou procurando aqui. Preciso mudar a cor deste aqui em cima. O mesmo aqui. Só quero ter certeza que é o mesmo que temos usado. Ok, e vamos colocar um pouco de enchimento no fundo deste recipiente só porque ele não parece estar sentado muito bem. É um recipiente grande, é um pouco de um recipiente. E agora, na verdade, quando eu estou olhando para ele, então, como você pode ver, os campos estão definidos. Muito bom, mas ele simplesmente não parece muito apetitoso com as grandes, enormes lacunas entre, entre as linhas de entrada são os campos de entrada em vez. Então vamos nos livrar deles ali mesmo. E vamos conseguir alguma margem. Eles são. E o que eu vou fazer é, na verdade, colocar o nome dos campos de entrada da informação que estamos procurando e dizê-lo aqui. E vamos discutir aqui quando se trata de campos e vamos seguir um pouco os princípios da geração de chumbo, Lisa. Mas você não vai querer ter o nome do arquivo. Você não vai querer ser colide e um nome de arquivo e qualquer essência, você vai querer estar coletando um nome e sobrenome. Então nós vamos duplicar um desses campos de entrada que na verdade nós podemos apenas adicionar outro ao telefone bem ali. E então se clicarmos duas vezes em cada linha e podemos nomeá-las, certo? E nós queremos fazer isso. Queremos dar-lhes um primeiro nome, e queremos dar-lhes o nome da informação que procuramos. E então este lugar será apenas primeiro nome aqui, obstetra, sobrenome. E por último, uma coisa que eu gostaria muito de fazer como eu quero inserir colunas e dizer a fazenda porque eu realmente não, eu realmente não gosto quando o FirstName e LastName definido em cima um do outro assim, porque é uma bagunça o uso do espaço aqui. Então o que queremos fazer é um, para o FirstName, coluna um, queremos colocar o sobrenome e é chamado de dois. E então queremos nos livrar do estofamento que vem com cada coluna, não importa o que aconteça. Então, vamos levar isso. E podemos fazer internamente, podemos fazer cinco. Então isso é mesmo com proporções em todas as placas. Ok, então isso parece um pouco melhor para mim, mas eu ainda tenho a duração disso ainda é um problema. Telefonou-me como branco demais. Então eu quero, eu quero adaptar esse pouquinho. Então, em vez de 220, vamos ter que ir para dois investigadores de fosfatos para 60. Não, não tanto assim. Então vamos tentar 300. É onde eu gosto. Sim, sinto-me muito mais confortável com isso. E agora queremos apenas arrumar tudo e ter certeza de que representa uma marca e um pouco do nosso conjunto de marcas. Então, por exemplo, não queremos o botão azul, queremos o nosso botão vermelho. E eles também querem fornecer um pouco de informação acima do formulário para dizer às pessoas o que eles estão se inscrevendo. Então vamos fazer isso. Vamos adicionar um título aqui. E então nós vamos adicionar um parágrafo, então também viver em um segundo. Suponha que vou colocá-lo lá por enquanto. E então nós vamos querer jogar ainda, vamos brincar com isso. Então, vamos apenas, vamos continuar. Eu posso realmente colocar um pouco aqui, pode criar colunas no formulário. Então uma vez eu vendi um cidadão cheio assim saco e há muito espaço em ambos os lados. Então, de qualquer maneira, vamos apenas desculpar, foi o telefone corado. Então, em termos do botão, LSI, a classe, vamos chamar de aula de fazenda. Agora, obviamente nós temos como um botões arredondados e isso é o que nós queremos continuar Oeste, mas não há apenas para o botão, se nós fizermos o ônibus e Randy, sem fazer o resto do campo estrangeiro renderizar, isso vai ficar ótimo. Então temos que fazer um pouco mais do que isso. Então nós realmente temos que colocar, nós vamos colocar esse bloco aqui. E vamos colocar tudo à vista deste bloco D. E deixe-me apenas ter certeza que a espuma bloqueia e assim vamos pegar tudo e dizer o impasse. E eu só vou dar um nome a esta classe. E tonal se encaixa. Em, porque queremos esta fonte, Popolo, mas queremos que seja ligeiramente diferencia você de tudo o resto na página. Então vamos fazer isso e vamos mudar a cor desta fazenda Fisa interna. Vamos adicionar algumas coisas de padrões e fazer algumas coisas diferentes, mas fique comigo por enquanto. Então fundo, vamos fazer um tipo de cinza, mas não queremos que seja muito leve. Nós só queremos diferenciação muito sutil. Roube um pouco lá. Sim. E o que eu quero fazer, eu quero tirar este bloco de volta e sempre tão leve, que talvez seja como 20. Agora, desculpe. Está bem. E então dentro deste formulário, aquele bloco, eu quero algum padrão. Então eu vou puxar em 2010 para dez no topo. Talvez 20 no fundo. Sim. 20 os saids. Sim, posso viver com isso. 20 de novo, forçando-os. Hoje. Vamos começar com gêmeos, por enquanto, ver como chegamos e este rumo. Então o que vamos fazer é usar um cabeçalho H2, mas vamos criar uma classe de combinação porque queremos que ela seja a cabeça e seja branca. Então eu vou chamar este H dois H2 básico como de costume. E então eu vou apenas editar. É longe. Aquela linda floresta ou algo assim. Ok? E isso me permitirá mudar a cor de uma estrela sem estragar tudo o resto no site. Vou fazer o mesmo aqui. Professora. Faça-o branco. Agora estamos chegando a algum lugar. Agora, Batson um túnel para a fazenda. Queremos fazer as curvas para esta rodada. É porque queremos que esteja em linha com o resto da nossa fazenda, o resto do que estamos construindo. E então, à medida que passamos por nossa fazenda aqui, queremos, queremos que esses cantos arredondados nos mantenham em vigor, queremos que seja consistente em todo o site. Então o que eu normalmente faço neste caso, exemplo, eu quero, eu não vou. Então, por que normalmente faria neste caso? E eu não vou fazer toda a cada canto em toda a fazenda arredondada porque isso não é muito, eu teria colocado quando falamos sobre coisas que as pessoas vão saber isso quando eles estão olhando para um site. Isso é uma coisa que notaremos que é necessária. Eles podem não necessariamente gostar, novamente, a maior parte do que estamos fazendo aqui nós queremos, é se você, Brandi, nós também queremos nos encaixar, mas nós não queremos necessariamente que as pessoas notem isso. Então, em vez de fazer isso, o que vamos fazer é correr cada esquina aqui, assim como fizemos com o fusiforme interno. E você vai ver o que isso faz. E sim, então vamos fazer isso. Então nós vamos nos ligar, nós vamos apenas dizer Fisa, florestas inferiores. E você pode ver fronteiras aqui. Se clicarmos na alternativa que nos permite adicionar em cada canto individualmente, Eu vou colocar 20 pés era não, não 20. Na verdade, talvez 20. Deixe-me deixar isso aí por enquanto e ver como nos damos bem. Na verdade. Não, provavelmente vou gostar de 15. Sim, acho que 15 é provavelmente o melhor. Ok, vamos começar com 15. E o que chamamos a este fusiforme? Sobrenome, tudo bem. E eu quero pegar o canto direito dessa. Eu quero para isso para 15. Então você provavelmente pode ver onde eu estou indo com isso. Não precisamos. Sei que não precisamos tocar na parte do endereço de e-mail. Mas o que queremos fazer é brincar com os botões que vamos chamar este oficial. Na verdade, só vou chamar este botão de formulário. Porque se alguma vez usarmos outras fazendas, queremos que siga esse tipo de tema lá. Então eu vou apenas colocar encaixa entre parênteses porque eu não sei se este eu realmente conseguir você reutilizar. Está bem. Certo, então vamos fazer isso deles. Então vamos mudar a fonte para Proxima Nova. Vamos fazer com que seja audaz. Vamos pegar o nosso belo vermelho. Vamos colocar assim. E quando se trata dos cantos, temos um 15 lá. Está bem. Então você pode ver o que eu fiz aqui. Eu tentei manter a fonte se sentindo arredondada sem um feijão. Excesso, mas não tem que ser assim que você faz. Você pode remover todos os cantos completamente se quiser fazê-lo dessa maneira. E enquanto o jantar, eu vou em frente e eu vou mostrar como seria se nós rodarmos todas as esquinas, ok, só para que você saiba, você sabe, o que nós poderíamos gostar moralmente que quem sabe. Então vamos em frente e fazer isso. Vamos conhecê-los todos os 15. Ou devemos fazer 20? Devemos fazer 20? Sim, vamos fazer isso totalmente arredondado. E é assim que pareceria completamente aleatório. Então, para algumas pessoas, quando você está olhando para isso, pode se sentir melhor porque você removeu todo o canto. Então, em vez de apenas sentir aqueles sempre cobertos em torno de toda a forma, você pode sentir que você está novamente, pode ser mais fácil para os olhos quando você está olhando para ele assim. Mas realmente você pode fazer o que quiser com o design de sua fonte. Realmente não importa. Desde que não se sinta desconfortável no I ou o design não se sinta desligado, então você vai ficar bem. E então ele envia uma mensagem que eu só vou colocar aqui bem, vamos apenas colocar dizendo para e-mail. Ele é menos. Junte-se. Junte-se a milhares de clientes felizes. Atualizações regulares de produtos e serviços. Na verdade, sabe o que vou fazer? Você pode obter 10% de desconto no seu rubor quando você se inscrever agora. Está bem. Então isso parece bem. Está bem. Quero dizer, não é nem aqui nem lá para mim, eu que funcionaria. Eu poderia publicar isso como um site. Ficaria feliz com a forma como o formulário fica no fundo. Eu não tenho nenhum problema com isso. Mas por que você tem um problema com o espaço e o tamanho do cindível. Para mim, isso é muito grande, é muito grande e há muito espaço. E aqueles que, como eu mencionei anteriormente, há uma linha tênue quando se trata de espaço. Às vezes, quero dizer, você precisa de espaço, certo? Espaço cria BC quando se trata de projetar sites. E essas coisas são muito, muito importantes. Mas há uma linha tênue entre muito espaço e deixar algum espaço agora, na minha opinião, temos muito espaço. Alguns designers podem discordar, não teremos muito, então temos que tentar fazer algo sobre isso. Então o que vamos fazer é ter colunas e até o contêiner. O que vamos fazer como um bloqueio e aqui, eu sei que pode parecer um pouco engraçado, mas vai ficar tudo bem. Então vamos chegar a essa imagem com pop que lá dentro. Até agora, nós temos pop que lá dentro e referimos a largura total. O que vamos fazer é estender isso direito? E porque o logotipo de base real para isso é realmente bastante, eu diria que é bastante interessante. Você gosta como não na sua cara realmente, pelo menos eu não acho isso na minha cara. Eu acho que é um pouco louco. Não sinto isso no espaço quando olho para ele. Mas nós não queremos que eu não quero formar tão perto da IgE, então nós temos que fazer algum tipo de com isso. Então, se formos para colunas, precisamos que persa ou quinta-feira porque já é dez X se aplica ou 30. Os 30 aqui. E isso não é linha. Então, como primeira ordem agora, estou dez vezes mais feliz com isso. Muito, muito mais feliz com isso. Parece muito mais do que lá. Ele se sente sobre o tamanho certo, tanto proporções de Bessel, e não parece de perto. Então eu poderia publicar isso e me sentir bem com isso. A última coisa que resta a fazer aqui é apenas obter esses links atrevido feito no fundo. Então eu só vou mudar rapidamente a fonte aqui. Parece feito o botão. E sim, estamos muito bem para ir. Tudo bem. Então levou algum tempo. Aqueles problemas estranhos com a fazenda onde não era o primeiro nome e sobrenome estão se cruzando e não estavam alinhados corretamente. Teria levado alongs peso passar é apenas um principal ou balde e você espera que você definitivamente quase definitivamente não terá quaisquer problemas com isso e você terminaria. Mas com isso dito, vamos rachar. Então isso é basicamente o freezer. E a última coisa que temos que fazer é apenas uma ligação destes comprimentos cindíveis. Então temos a página inicial com uma página de bot, serviços, rastreamento e contatos. Está bem. Então, esse sou eu. Estou muito feliz com isso como fachada. Acho que sim. Sim, eu posso trabalhar com eu me sinto muito bem com isso além disso. Então podemos ver como estamos escalando os agricultores pulando um pouco, então precisamos trabalhar nisso. Então essas colunas são, colunas não estão bem, então precisamos trabalhar nisso. Ok, tudo bem. Isso são bons efeitos. Então, novamente, assim como o cabeçalho, temos que colocar em todos nós como centenas. Então defina o nosso máximo de 12, 79 e então eles são homens devem ser 922. Vamos puxar para cima. Temos que ir muito bem. E a última escola abaixo da escala e a CIA sumiu. Ok, então temos algum trabalho aqui até lá. Então, o que são colunas? O que queremos fazer é empilhá-los normalmente, fazer quando chegarmos ao tablet. Portanto, permanece como uma coluna dupla. Mas você pode ver retrato tablet para paisagem e retrato. E queremos mudar isso para estática assim. Então, quando voltarmos aqui e quisermos adicionar às restrições que temos, apenas faça todas elas também. Nenhum. Sim. Então, queremos vê-lo lá. Hum, e isso é realmente não foi grande, eu tenho que fazer isso? A única coisa que eu sou feito aqueles Eu não tenho certeza se eu quero um logotipo empilhado em cima assim. Então eu vou fazer é realmente apenas virar as rondas. E eu vou fazer isso indo para o layout e clique no botão para a vertical direita. E nós queremos, não, desculpe, não essa. Elemento errado são colunas. Nós realmente queremos olhar para o seu plano vertical. Ok? E por causa disso, podemos ver os logotipos realmente sentar um pouco mais acima é para mim É provavelmente muito perto da fazenda. Então, queremos consertar isso. Podemos fazer isso com Vasco, sentir UBS. E acho que vai mostrar porque temos um padrão, há um culpado. Ok, então nós temos algumas almofadas e o acolchoamento indesejado e 20 na parte inferior vezes o topo. Está bem. Com isso. Em seguida, para o telefone para ter um problema aqui foi tablets. Não, estamos bem lá. E chegaremos ao tablet. Então podemos ver que isso parece um pouco confuso porque estamos começando a escrever as coisas que ganhamos, coisas para serem consistentes. Então temos que nos livrar de alguns dos elementos de preenchimento que decidimos adicionar cada vez mais na área de trabalho. Então, para mim, acho que estamos bem lá. Apenas rapidamente você também singled modo realmente. Então, se você ficar preso ou se as coisas não funcionarem, eu não tinha direito, como aqui, por exemplo. Então você pode ver que são muito, muito ligeiras como cinco pixel gap que eu me pergunto eu não jogar meu escritório fora meu olho e me fazendo pensar que era algum tipo de cobertura de código ou quando há, mas não é deliberado e é só porque há uma ligeira discrepância aqui. Então o que queremos fazer é sair de votos extras. Qual é a coluna que estamos olhando e se livrar dos cinco px então não precisamos , então eu não sei se eles estão aqui. Ótimo. Agora parece bom para mim. Então vamos continuar. E assim por diante móvel, estamos apenas procurando o mesmo que temos feito. Podemos centralizar isto no fundo. Há ligações lá. E vamos apenas polir isso fora e fazer isso parecer bom para que nós não precisamos 201010 Zoom. E então, do lado de fora, queremos que sejam 10 também. Agora vamos acenar ESA, o motor era, e eu disse, Ok, então agora temos uma instalação escalável com uma chamada à ação ACE. Você pode usar se você não tem um monte de links em seu site porque você quer tentar e fazer uso do espaço, certo? Se esta era uma parte padrão do seu site, você quer ter certeza de que está aproveitando ao máximo isso quando estiver construindo seu site. E deixe-me continuar a liderar métodos de geração. Vamos falar sobre como realmente ligamos esses formulários no que fazemos lá. Hum, mas na maior parte, é isso. Então isso acabou de fazer o Faraó. Então, vamos voltar rapidamente e ver você. Então é uma bagunça. A única coisa que eu acho essa bagunça. Sim, então as mensagens aqui não foram mudadas para Proxima Nova. Vamos apenas fazer isso. Devo fazer estes ousados? Então é por isso que eu não sei. Agora podemos deixá-los normais, felizes com isso. E agora que fizemos isso, queremos fazer um símbolo, assim como fizemos com o cabeçalho. Então clique no Fisa, com o botão direito na fachada. Ali. Três símbolos e depois todas as maiúsculas. Vamos apenas criar visitas e lucros. Simplesmente assim. Isso acabou de fazê-lo. Então, com isso sendo dito, a próxima coisa que vamos passar é realmente começar a preencher alguns dos conteúdos do site. E logo antes de avançarmos para isso, o que você deve fazer é ver se suas páginas em uma seção e, em seguida, o Azure Fisa. Está bem. Seção, oficial. Seção. Então, sim, é isso. Então vamos rachar, certo? Super fácil, super, super fácil. Então, como eu disse, com a cabeça, enquanto você está passando por isso, se você ficar preso, quero dizer, houve um ponto lá quando eu estava passando pela primeira vez que eu realmente tropecei fora e um dos o apenas Webflow através de uma bola curva em mim e ele vai fazer isso às vezes, às vezes vai ser problemas e você não vai necessariamente saber a resposta. Posso assegurar-lhe que essa razão sempre lógica é no entanto, muito realmente qualquer coisa que você possa realmente culpar. Webflow longe saída. Sou geralmente é só que você cometeu um erro na maneira que você usou a plataforma e a maneira como você configurar as coisas e apenas causa uma ligeira discrepância e do que você pode esperar para acontecer. Então, sim, vamos começar a pegar o resto do barco local. Estamos chegando perto, fazendo progresso. Vamos continuar. 16. Construindo sua página inicial: Ok, então esse é o cabeçalho e a maneira como construímos a cabeça e o Fisa e agora é tende ir em frente e parar de cintar páginas. Então, a primeira página, o que nós vamos apenas reunir o caminho é a nossa página inicial. E é aí que vamos tocar em algumas dessas coisas de geração de chumbo no tipo de estrutura salarial dessas páginas e o que você deve ser capaz de pensar. E antes de começarmos com algumas coisas que quero apontar. Você pode estar em uma situação em que você sente que você tem um monte de conteúdo, que é o seu site. E o meu conselho neste momento é manter as coisas curtas, doces e concisas. Esses seriam os meus melhores conselhos. E a razão para isso, como pessoas, quando ele tem um site, eles estão indo para lá para a intenção particular. E geralmente eles estão indo para uma informação muito específica. E você quer tornar isso o mais fácil possível para a fama essa informação. E você quer quebrar as coisas de tal forma que as coisas sejam fáceis de digitalizar em vez de fáceis de consumir, certo? Como no sentido de que você não quer uma quantidade excessiva de textos que começaram na onda ou alguém está procurando. E é uma coisa comum que eu vejo em muitos sites. É só isso. É apenas muito conteúdo, apenas, apenas uma quantidade esmagadora de conteúdo e ele apenas satura o campo de design, o propósito do site, e também a marca. Então isso é algo a ter em mente enquanto você está passando por isso. Mantenha as coisas curtas e doces também, eu diria. Mas também não se assuste ou se segure. Você coloca a informação no site que você precisa apenas não exagerar. Então, a primeira coisa que precisamos fazer para esta página também, na verdade para todas as páginas como precisamos para obter um monte de emojis e você qualquer coisa sobre como superar danos, você pode estar pensando em Chicago Stock ou Adobe Stock. Lá ambos paga o custo um pouco de porcentagem e eles são péssimos ali mesmo. Eles não são os melhores. Normalmente, uso o Adobe Stock se estiver tentando baixar gráficos. Então é aí que eu pego a maioria dos meus gráficos de alguns outros bons sites lá fora. Mas o que eu realmente recomendo é chamado Unsplash. Esse é o que eu recomendo se você tem que usar imagens stock. E isso é um bom ponto tal que quando se trata de imagens, porque pode usar suas próprias imagens. E se você tem suas próprias imagens, se você tem acesso ou orçamento para contratar um fotógrafo para tirar algumas boas fotos de sua marca ou seu negócio, sua empresa local, e investir nele. Como as pessoas querem saber sobre seus negócios, especialmente se você tem instalações físicas e eles querem saber o que parece e dizer que eles querem saber o que um solto como eu digo eles querem conhecer as pessoas que dirigem as marcas. Eles queriam saber aqui sobre os empregados. Eles não querem ver as ações caindo. Apenas realmente uma maneira de marcas ou proprietários de negócios para se esconder atrás do site. Então eu aconselho a não fazer isso. Mas de qualquer forma, por menos do que eu vou estar usando fotos stock, obviamente, porque eu não quero Jim. Então vamos digitar academia. E sim, um monte de imagens que podemos escolher aqui. E uma das coisas que eu realmente gosto sobre Unsplash, como todas essas energias vêm de trailers independentes ou fotógrafos, você sabe, embora não tenham sido escolhidas por Adobe Stock ou Shutterstock. E são só pessoas que gostam de pequenas alergias a nozes e dizem: “ Ei, você sabe, vocês podem usá-las de graça, só vai ser crédito. Então o que vamos fazer aqui é que eu vou escolher provavelmente 10, 15, 20 energias. Vamos continuar a voltar aqui sempre que for preciso. Só vou escolher coisas que não são ruins para ser honesto. Vamos parar e ver o que fizemos? Isto, todas estas energias são utilizáveis. Então, aqui está. Mais cinco em público. Então as bordas são importantes, eles realmente fazem a diferença, mas o site em termos de design. Então você quer ter certeza de que está certo. Essa é uma boa. Eu posso ir aqui. E deixe-me ver se escrevo uma palavra-chave diferente. Vamos deixar-nos e é outra coisa. Esses são bons. Está bem. Acho que vou fazer isso a partir de agora, para ser honesto. Então deixe-me voltar e enviaremos essas imagens para o site. Você pode, se você precisa, obviamente, entrar em como o Lightroom ou onde quer que você está profundo aplicativo de edição de fotos é. Mas para isso, não vou me incomodar, não sinto necessidade. Então vamos em frente e fazer upload de imagens, que aparecerão aqui em apenas um segundo. Lá vamos nós. Está bem. Outra coisa que você pode fazer que eu não fiz aqui apenas no interesse do tempo. Vamos colocar o EMG no compressor. Só tenho de me certificar de que não são grandes demais. E o, e o, eu vou entupir o seu site porque o desempenho vai ser uma coisa muito importante. E se você está lutando com isso, você é como, oh, eu não sei que tamanho é energia deve ser ou o que deve estar lá para Webflow realmente vai te dizer. Então, se você for para as configurações de uma imagem e me deixar mudar isso desse jeito. Você pode ver que ele dizendo aqui que a imagem é muito grande e nós não vamos ser publicados neste site estão realmente tentando fazer e algumas lições, por isso não importa. Mas eu digo-te, está bem. E se é em grande parte que quero dizer, esse é um site considerável. Você não precisa que ele esteja de volta. Você não quer que seja tão grande. Seu site seria apenas lento, desajeitado, e um monte de bom trabalho que você fez será redundante para graduar. Então, de qualquer forma, eu tenho um monte de imagens, então vamos em frente e usá-las. Então, vamos aos parafusos. Cabeçalho não terá um sim, vamos puxá-lo para fora de um topo da seção da página, devemos chamá-lo. Então nós temos seção, vamos colocar um bloco lá que vai ser um contêiner. E o que vamos fazer, vamos adicionar outra lei div, caso tenhamos hoje algum outro tipo de endereço louco. E então vamos pará-lo, conteúdo e sites. Então vamos colocar um título. Vamos colocar algumas fotos X lá dentro, e vamos colocar um botão lá dentro. E este vai ser o topo de uma página. Então o que precisamos fazer é ter nossas aulas e promotoria. Então, vamos clicar na seção. E, em seguida, vamos clicar seção básica, recipiente básico. E então teremos página um botão de parágrafo. Então o que vamos fazer é deixar isto um pouco mais nítido. E então vamos passar a ter uma geração de leads de bate-papo e por que o topo desta página é tão importante. Então vamos colocar uma imagem aqui. Desculpe, o resto depois. Nós vamos voltar aqui. Não importa por que a imagem, eu sou, se eu for honesto, posso escolher o que quer que seja. Em vez disso. Queríamos isso um pouco mais escuro para agradecer a Deus, eu havia algo não muito certo. E então vamos criar uma classe de combinação com o nosso contêiner porque queremos que seja bastante assim se quiséssemos estar acima de um determinado tamanho. Então eu só vou para Top Hat dizer W em termos da peça sobre isso e isso é o que você quer fazer. Queres brincar com eles quando chegares a este ponto. E você não vai necessariamente saber o que o melhor alto como um pensamento, cerca de seis centenas às vezes é um bom show. Olá. Sim, posso ir com isso. E então vamos ver esse fundo porque isso não parece muito bom. - Sim. Está bem. Eu vou sair com isso. E então queremos ter certeza de que tudo e sites que contêm um senso. Então isso vai ser Vasco. Eles são um AINE que é um impasse. E vamos fazer basicamente a mesma coisa. E então você vai querer barro. Você deseja criar classes de combinação. Quando você começa a editar como o clima, o título, uma central ou não, porque você não quer fazer uma mudança em algum lugar nele. Malha tudo em todo o seu site menos a última coisa que você quer. Então traços. Estágio central um. Na verdade, mais uma coisa é fazer, precisamos fazer uma aula para mudá-la para branca. Então eu costumo colocar fazer branco. Vou usar bastante. Quero dizer, você pode rotular suas aulas do jeito que quiser. Eu só gosto de usar mais como comandos do que classificações só porque é mais fácil quando eu estou, eu estou indo sobre isso e certas classes que precisa ser microfone branco. Então vamos fazer isso primeiro, já que é o mesmo que o parágrafo. Certo? Então novamente, soma, então nós vamos apenas apertar este botão tag. Agora, podemos cancelar cada geração em um bloco de segundo passo? O que queremos fazer como apenas o texto aqui é muito sábio e não queremos que seja assim. É porque não parece certo. Então vamos puxar isso um pouco e ver como fomos. Sim. O laboratório funciona para mim. Sim. E então há algumas coisas que você pode fazer aqui, e nós vamos apenas adicionar uma seção aqui apenas para nos preparar para a próxima que vamos fazer. Você pode ter o, você pode ter uma espécie de fazenda aqui. Como se dependesse do que está tentando fazer, certo? E depende do que nos ofereceu. Mas um padrão na página inicial é apenas ter um botão que vincula a sua página de contato. Você pode fazer muito mais do que isso se você realmente deixar seus traços, eu diria para ir um pouco selvagem. E você pode ter, você pode ter um formulário que permite que as pessoas insiram o nome e e-mail como o que construímos para o Fisa. Ou você pode tê-lo conectado a um formulário de tipo. Você pode tê-lo conectado a qualquer coisa que você quiser. Há tanto potencial com o que você pode fazer no meu site pessoal da mídia BYU, e eu geralmente recomendo isso para alguns dos clientes que trabalhamos com este tipo de telefone uso. Eu gosto muito do tipo 1 é realmente bom como funcional e é bastante interativo para os usuários. Então eu vou mostrar rapidamente se você tem um contador. E eu não acho que vamos passar por isso, não um tipo de fonte. Eu acho que seria algo para um vídeo separado, mas não há nenhum dano tem mostrado a plataforma e apenas o que ele parece, porque há um realmente bom método de geração de leads que funciona muito bem para nós. Mas não temos feito muito o mercado e recentemente, mas temos um monte de formas diferentes aqui. E você pode criar qualquer forma que você pode pensar I e j pode vinculá-lo ao seu site ou você pode incorporá-lo. Você pode fazer todo tipo de coisas boas com ele. E o que eu vou fazer por este como eu estou realmente apenas indo para colocar um campo de e-mail. Sim, e nós vamos apenas colocar um campo de e-mail e então vamos nos livrar deste botão. E o que eu vou fazer é realmente de que maneiras eu quero fazer isso. Um par de maneiras diferentes. Eu poderia voltar a um par de maneiras diferentes. Vamos ver o que conseguimos. O que precisamos como um bloco de formulário inicialmente. Está bem? E você pode, como eu disse, você pode, você pode fazer o que quiser. Aqui estão alguns o que eu quero dizer, o que você pode fazer como você pode, você pode link aqui para sua página de contato, por exemplo. E você pode vincular seu contato colar um formulário de tipo. Você pode obter informações aqui, em seguida, você obter pessoas cujo nome e endereço de e-mail é, que é importante, especialmente se você quiser janeiro leads. Então, como por exemplo, você poderia ter ambos uma oferta aqui. Está bem. Bem, sinos em oferta e o que podemos ver, já fui o suficiente. Não sei se quero mudar essa imagem, não sei como me sinto sobre isso. Talvez. Eu só pensei que poderíamos dizer, bem, não importa muito neste momento. - Sim. Mas eu acho que o ponto que eu estava realmente tentando fazer aqui com a página inicial é que este cabeçalho do seu site, como em sua página inicial, por exemplo, que é normalmente as repetições vão vir através se você estiver seguindo um modelo tradicional e título. E esta área aqui. Precisa ser capaz de transmitir sua mensagem e dizer uma paixão por que eles devem se inscrever em seu site. Você realmente gera métodos, rua, ou onde quer que você seja oferecido como você precisa justificar isso imediatamente, você precisa deixar claro que tem que ser conciso e tem que ser bastante diretos. Então, qual é o seu principal fator de diferenciação como acompanhante? Foi uma coisa que faz você definitivamente foi a coisa que faz você Besso, por que devemos dizer não agora nesta fazenda que foram construídos em vez de um dos concorrentes. Estas são as coisas que você tem que pensar quando você está construindo seu site porque muitas pessoas votam apenas entrar e eles vão dobrar imediatamente se eles não conseguem encontrar o que estamos procurando, você tem que dar a eles uma razão para ficar e engajar. E você quer tornar o mais fácil possível para eles fazerem isso, que é o que estamos tentando construir aqui. Então, por exemplo, eu tenho um par de idéias aqui de por que eu acho que seria útil. E acho que quero parar isto aqui. Ok, um aleatório lá para que você possa ver lá dentro. Eu muitas vezes vou, eu vou para isso depende. Podemos imaginar seu trabalho, você deve, mas às vezes você quer mudar o foco principal da imagem para um site e ter sua fazenda do outro lado apenas para que não estejamos sentados um sobre o outro como eles estavam. Então agora eu posso ver o músculo do olho nesta imagem. Estou a tentar insinuar a ideia de que vais ficar forte. Você sabe, que isso é exercício real, que isso é fitness real, que este é um trabalho importante que você vai fazer isso na academia. E, obviamente, aqui com o texto, estou tentando dizer Olhe, inscreva-se, esta é a nossa aula. E você está quase sugerindo que ao se inscrever, isso é o que você poderia parecer, que não é diretamente veio aqui para fazer, mas você poderia argumentar. Então vamos jogar isto e ver como nos damos bem. Então eu não quero que isso seja mais centrado e eu não quero minha cabeça e estar centrada em 1 tudo para a esquerda inclinada. E então vamos construir nossa fazenda aqui. E então vamos construir uma fazenda aqui. E nós vamos construir uma oferta e espero que você veja precisamente o que eu quero dizer. Então vamos pensar em uma oferta. Bem, na verdade primeiro vamos pegar esta fórmula. Acho que essa é a coisa que tem precedência. Eu acho que por último, eu acho que isso assume a liderança em termos de importância. Então vamos criar uma classe e vamos apenas dizer, vamos apenas dizer cabeçalho. E o nosso passado. Eu vou fazer uma coisa, este cinza bonito que estamos usando. Nós dissemos que vamos usar o começo. Então, quem eu deveria, não deveria? Sim, acho que isso pode funcionar. Vamos ver como vai ser. Quero que sejam curvas. Não quer botão de telefone css que fizemos mais cedo pior? - Sim. Meio que... - Sim. - Sim. Está bem. Podemos trabalhar com isso. E então eu quero me livrar desses campos como antes. E então o que vamos fazer é responder, Eu vou ser uma pressa eles. E você pode ter quantos campos quiser. E aqui você quer ter certeza que exigiu dois quando se trata de fundos. E então queremos fazer esses campos que estamos olhando para curvas. E uma coisa que você pode querer considerar um pouco de borda sobre isso, que eu não tenho certeza de como eu me sinto sobre. Vamos ver como continuamos. Sim, está bem. Sim, nós não queremos ou precisamos realmente qualquer lambda no seleto, apenas este deles. E essas coisas que podemos fazer para torná-lo como o que vamos fazer é quando chegarmos perto do fim da ousadia, uma bicicleta do Google analisou algumas interações e eu posso mostrar a vocês como isso funciona. Mas, por enquanto, vamos deixar isso meio que, sim, vamos deixar assim. E vamos nos certificar de que estamos usando as fontes certas. Ok, e OK, então agora nós temos a fórmula. Vamos colocar que é o site por um segundo. E eu vou colocar apenas vai fazer vamos apenas para pousadas. Tudo bem, então agora que temos isso e alguns dos textos no topo da página quando estamos fazendo isso, o que queremos como queremos tentar. E quero dizer, a menos que haja mais WACC de marca e negócios em algum trabalho de descoberta que você possa ter que fazer. Mas você realmente quer obter essa manchete e deve ser a sua oferta principal e resumir. Deve ser que você está aqui uma linha ou você sabe sua, sua proposição chave que você está apresentando. Então eu só vou, eu só vou colocar Shane que eu vou colocar realmente tornar-se menos. Está bem. Agora, como eu coloco esse texto, quero dizer, o que você pode ver aqui é que a pequena linha, hey, não está bem, então nós precisamos mudar isso. E o que nós realmente vamos fazer é mudar guia de estilo de honra dele porque é que nós temos aula de combo. Eu realmente não quero que nada disso fique confuso. E como você pode ver aqui, porque eu adicionei ao fundo do recipiente com adição de uma nova classe é mudado para este também. Então, queremos mudar isso de volta. Então queremos mudar esse fundo de volta para nós, obviamente imagem que temos aqui. Ok, então isso é, tudo bem. Vamos apenas há isso do e muito menos contêiner. Nós vamos colocar. Agora, vamos apenas editar a altura da linha. Está bem. Então, altura da linha, movendo-se não muito 145125. - Sim. Na verdade, você não Vou colocar isso de volta no contêiner básico. - Sim. E votando para isso, vamos ter que dobrar essa imagem. Eu vou voltar aqui. Ainda fica. - Sim. Está bem. Agora você pode ver que agora que nós adicionamos a todos os n e aquele sapato, que mudou para 12 ainda, mas lucros mortos. Agora precisamos aumentar o tamanho, a altura deste recipiente. Então vamos fazer com que seja sete centenas. Ainda assim. Feliz com isso, certo? E aqui vamos colocar uma placa hoje. Inscreva-se hoje mesmo para começar. verdade, é Naverdade, éo gancho. Bom, na verdade, quer saber? Eu acho que eu estou apenas tendo menos noite de sexo porque eu sinto que muitas vezes era eu parcialmente de qualquer maneira. Eu sempre sinto que se eu sentir que eu estou me forçando a adicionar mais palavras, então eu provavelmente não deveria adicionar mais quer porque esta linha reta aqui, provavelmente há o suficiente sim. Treinou vasopressina mais inteligente com eu queria colocar Wes Magnus. - Sim. Sim, transgressivos são ómegas suspensas. E então o que podemos fazer é em vez da estrutura que estamos indo para, podemos jogar isso aqui e podemos colocar porque uma coisa que você pode fazer bem quando você tem o nome e e-mail de uma pessoa, você pode começar a encaixá-los e vender os funis um que mostra em 10 em seus parques são basicamente os mesmos. Eles estão interessados. No entanto, pode não estar comprando para você imediatamente, mas isso não significa que eles não possam. E na sua página de contato, você pode se concentrar mais em levar as pessoas a realmente comprarem uma associação e outras coisas. Mas de qualquer forma, vamos continuar. E isso realmente não nos confunde muito com este pedaço de texto. Então, eu só vou para a ardósia aqui. Então, está tudo bem. Quero dizer, o que estamos fazendo aqui, estamos basicamente dizendo que foi definitivamente melhor. Este cavalheiro foi visto salvando-os para se juntar à nossa comunidade. E termos disso, quero dizer, eu acho que se estivéssemos realmente fazendo isso corretamente, eu seria forçado a responder, como tentar empurrar a pessoa que realmente está comprando seus membros. Mas isso é mais como um economia, tipo coisa e tempos de dominação de elite. Eu não tenho um formulário na página inicial Eu acho que é uma boa maneira de ir sobre isso. Ou pelo menos conectando, ou pelo menos ter um botão que se conecta com um método formal de geração de leads. Então isso é algo para pensar. E, em seguida, mover essas seções para cá, o que eu normalmente apenas manter isso muito, muito simples. Como se não tivesses complicado este pote. E isso depende da pessoa que você está tentando ajudar e trabalhar menos, mas por que normalmente faria como obter suas aulas e autofoco? Então seção básica. Ok, suas colunas de contêiner, você não precisa ler, realmente renomeá-las. Então, agora que você tem isso no lugar, vamos pegar o bloco D. E em ambas as colunas, o que vamos fazer é conseguir uma imagem. Não tem que ser esse. Realmente não pode ser o que você quiser. Eu não sou tão adotivo assim tão bem, um que nós escolhemos sim, quero dizer, sim, isso pode funcionar. E, em seguida, aqui, Rubrica 1, não vai fazer aqui como adicionar quantidades excessivas de textos. Quero dizer, não há razão para não precisares de me ver a escrever um pouco desligado. Você só precisa entender a estrutura que eu vou buscar. Então deixe-me limpar isso rapidamente. Hum, e sim. E, em seguida, no SAT queremos Px de 40. E então queremos ter certeza de que a altura de cada uma dessas seções é consistente. Então o que queremos fazer é qualquer altura menor que seja. Estamos olhando para aqui. Não vou baixar a imagem. Eu vou fazer o, eu vou fazer uma imagem de fundo aqui porque isso vai realmente dimensioná-lo corretamente. Ele vai dimensionar a imagem corretamente e eu vou mantê-lo consistente quando nós abaixo seções e todos eles vão ficar do mesmo tamanho, que é em última análise o que estamos procurando aqui. Vamos nessa. E então o que eu vou fazer é eu vou mudar o site do tamanho disso. 500 é, mas estamos à procura de lucros. E vamos fazer o mesmo com um bloco de degraus. E dentro desse div, queremos torná-lo sensível ao Vasco. Sim. Está bem. E aqui é onde queremos usar nosso H2. Então, como eu disse, você só usa um no topo da página. Não estou usando isso. Incrível. Então, desculpe, entre nas seções inferiores. Ok. Ok, então agora vamos rapidamente nomear esses impasses. Então, como vamos chamá-lo? Eu acho que o que vamos fazer como vamos chamá-lo de coluna dupla. Sim, vamos dizer que não foi legal. Certo, então precisamos adicionar essa imagem contra o O. e essa é a coisa. Se nos reunirmos para chamá-los, vamos criar outra classe chamada anúncios. A imagem. Na verdade, não quero fazer isso. Eu estou indo e voltando sobre isso. Ela pode fazer de duas maneiras diferentes. Eu acho que eu realmente poderia fazer é apenas adicionar uma string vazia e certifique-se de que ele cobre todoo todo fundo. Sim, desculpe. No entanto, por último, há apenas adicionar rapidamente a imagem de volta. Se eu precisar adicionar um pacote de segunda classe . E agora o que vamos fazer é duplicar essa seção. E nós vamos inverter essas colunas, não. Tudo bem, então nós temos boas seções suculentas lá que podemos falar sobre o ginásio e algumas das características dele. E então geralmente o que eu faço, como eu quero dizer, este é como um design muito simples a este respeito. Mas como, tão básico quanto ele fica. Mas por que normalmente faria seria eu ir em frente. E eu acrescentaria como, o que você chamaria de declaração de missão são apenas algum tipo de texto empático que fala sobre o que a marca significa de água lutando para o que sua principal bagunça. Então vamos armazenar rapidamente e algo assim. E então eu gostaria que isso fosse sim, nós podemos fazê-lo, nós temos, nós podemos torná-lo vermelho na verdade, isso seria muito interessante ver como isso vai ser. Certo? Acho que alguns são devagar, mas seguramente. Por que eu poderia realmente fazer é eu poderia pegar a cabeça e excitar isso. Então, apareceu lá fora. Então, se você está olhando para construir uma seção como esta, você pode apenas meio que seguir junto com o que eu estou fazendo. Eu gosto assim. E o final, na verdade, eu acho que eu poderia colocá-lo de volta. Ok, então isso é algo definido apontar com o botão. Lembre-se que falamos sobre, você pode se lembrar de um memorando feito guia estilo fuga. Eu falei sobre isso. Enquanto estamos passando ou se precisarmos adicionar algo mais a dizer, tudo bem, podemos, bem, esta é uma dessas coisas. Então, se voltarmos para nossos guias de estilo, podemos duplicar um desses botões e, em seguida, adicionar uma classe vírgula. Diz lição. E nós podemos basicamente fazer isso branco, ok, porque é isso que nós queremos. E podemos fazer o interno, podemos fazer aquele cinza que gostamos. E é isso. Então, vamos para a aula e voltamos para a nossa página inicial. Ninguém quer fazer um sentido de nós. Será que aqui é como se eu tivesse esta seção sendo razoavelmente implorar como se você quisesse um bom estofamento aqui? Você provavelmente quer muito mais. Sim, algo assim. E então você quer criar um pouco baixo de uma diferenciação. Ou mais 11 espaço entre o preenchimento do botão de F. Kennedy. Vá sobre isso assim. Isso é provavelmente o que temos. E eu acabei de perceber que eu não contava para isso ser branco, então precisamos levar isso de volta para cinza. Tudo bem. Então eu estou me sentindo bem com isso. Eu acho que aqueles mais trabalho para fazer sobre isso, eu fiz isso nos bastidores. Centenas, centenas zs provavelmente já tiveram. E, no entanto, essas coisas que podem ser adicionadas aqui, ok, há muitas maneiras diferentes de ser ID, então a maioria desses recursos, porque o foco deste site é apenas geração. Eu realmente não quero, quero dizer, eu não quero ficar muito pesado no lado do design das coisas, mas você começa de onde eu venho. Quero dizer, realmente quero fazer aqui é construir seções realmente básicas. E basicamente é o M que você pode usar. Pode não parecer muito, mas é simplesmente adivinhar o ponto. E estamos usando um esquema de cores forte estava fazendo o trabalho para nós. Então isso é realmente o que eu vou usar. Eu acho que eu preciso mudar você precisa mudar essa imagem? Então aqui, aqui em baixo, rápido. Sim, está bem. - Sim. E então o que você também vai querer fazer é que nós temos ipx acima do topo, que nós temos mantido até agora, mas nós queremos ter certeza que isso é mantido também nessas áreas. Então aqui é um lugar onde definitivamente é. Mas queremos ter certeza que é todo tipo de vôo aqui. Então vamos subir e ver você. Ok, então não quero fazer isso. E cria. Então, eu vou chamar este lado não daquele de esquerda inclinada. Tudo bem, então no geral isso está parecendo muito bom. Mas ainda há algumas coisas que precisamos fazer antes de passarmos para a próxima página. Há algumas coisas. Eu não estou. Não estou interessado nisso. Só não penso no melhor. Então, eu não estou interessado na forma como esta imagem transita para esta aqui, embora, esta seção. Então o que eu quero fazer aqui, eu quero adicionar uma seção que, bem, apenas falar sobre algumas características chave e benefícios toda a academia em si. Então vamos colocar em outra seção e esquecer o barulho atrás de mim. Esse é o meu Springer Spaniel. Faça uma coisa legal. Então, ou é outra seção lá e podemos ter em um impasse. E, em seguida, dentro disso, vamos adicionar algumas colunas e colunas que são grades. Eu acho. Na verdade, esta é uma boa oportunidade para eu mostrar a vocês como usar as grades. Então, as grades são muito, muito boas quando você tem cartões e tabelas diferentes que você queria adicionar realmente o que estamos fazendo aqui. Então eu entendo que você pode não saber realmente o que eu aqui novamente, mas o que nós queremos fazer é adicionar as peças aqui. Então, estas serão três cartas separadas, e então queremos remover esta de baixo. Então clique com o botão direito e exclua linha Ok, então agora nós temos uma fileira de três, ok, então é isso que nós queremos. E, em seguida, com qualquer linha que eu quero adicionar trava, Eu só quero adicionar um bloco a partir disso. E ele rapidamente quer ter certeza que estas são todas as gotículas de classe. Então seção básica, seção básica, recipiente básico. E o administrador recebe a classe de crédito se você quiser, mas provavelmente não é essencial. E então obviamente eu bloqueei dentro dele e eu vou chamar isso de set. Vou chamar-lhe títulos de serviço. Você verá o porquê em um segundo. Está bem. Está bem. Então, para mim eu sou tipo, sim, isso parece bem. Eu posso sim, podemos trabalhar com a gente. E o que eu posso fazer é, bem, enquanto estamos falando sobre isso, eu não tenho certeza de como olho nessas imagens e essas seções. Eu não estou seguindo tão longe, dizem Px de sites estáveis espaço. Então talvez queiramos dar uma olhada nesse binário. Vamos continuar com isso. Então aqui temos os azulejos de serviço. E então aqui eu vou adicionar um título de imagem. Então eu vou querer fazer um parágrafo. E por último botão. E esta também é uma boa oportunidade para enviar pessoas para duas casas decimais em seu site, se você quiser. E então também eu normalmente faço como você tem estes aqui, obviamente, mas eu geralmente adiciona cabeçalho e gráfico de pizza acima dele, só para que as pessoas saibam o que é. E geralmente eu sempre incluo um pouco de etiquetas logo acima disso. Um. Apenas mude-me para cá outra vez. Então eles estão indo. E, em seguida, parágrafo precisa ter certeza que estes são n dizer o recipiente básico. Ok, então agora vamos ficar melhor. Estou a pedir-me para pensar, oh, foi este botão. Você vai ver como tudo se junta em apenas um segundo. Então temos isso apertado. Então, em primeiro lugar, vamos começar pelo topo. E, em seguida, alguns textos, você vai apenas colocar os principais recursos e benefícios. Vamos colocar um texto aqui. E eu vou deixar o automatismo logaritmo e aqui porque quando você sabe o que você está se adicionando, tudo bem, o objetivo aqui é mostrar a você o design, não me ver digitando. Então vamos apenas tentar e obter estes em um pouco mais. Otto, temos essa classe tolerante a falhas e vamos dizer acima. As mensagens são uma espécie de subtítulo. E com isso, quero dizer, você diz que a classe é o que você quiser. Este será H2. E este será um parágrafo básico. Ok, ótimo. Não, eu quero fazer como eu não sei se eu quero mudar talvez não mudar a cor dele, mas eu quero mudar alguma coisa. Então, provavelmente este aqui. E eu quero me livrar dessa margem máxima. Então eu só vou colocar a margem máxima, talvez 10. Agora está subindo. - Sim. Certo. Vou centralizar isto e tipografia. Nós vamos, nós vamos saber que não vamos fazer um parafuso. Ou não devemos fazer uma pesquisa, não sei que Bolt não vai fazer isso ousado. Mas vamos mudá-lo para o vermelho que gostamos, que é este aqui. E vamos fazer com que seja maiúscula. E nós vamos espalhar menos de espaçamento cada vez tão ligeiramente , mas provavelmente por lá também. E o que vamos fazer é central aqui. Provavelmente fazer em 10 px aqui. E eu vou aumentar a margem apenas para que não seja tão grande quanto o que S porque isso não parece certo assim. Então provavelmente como um, talvez dois Svante, vamos ver. Parece ser o ponto ideal para isso. E então queremos adicionar um pouco de preenchimento. Ok, ótimo, então isso parece um pouco sobre outro, algum tipo de diferenciação entre esta seção superior e então as seções aqui porque eles vão apenas meio que amassado juntos e não gostava muito disso, se eu tenho que dizer. Então. Agora que fizemos isso, vamos passar para os blocos de serviço e deixá-los com boa aparência. Então vamos ter que usar Canva. E você vai ver por que em um segundo para os danos. Mas vamos apenas as políticas muitas vezes ver como podemos obtê-las. Olhe. Vamos usar aquele branco alternativo que escolhemos. E os fundos para isso vão parecer. Então vou fazer carrinhos e protuberâncias. E em termos de layout, queremos que tudo seja sentenciado. E então nós também queremos adicionar apenas um menos de um preenchimento de 20, 20. Assim como assim. Ok, então sim, eu posso trabalhar com isso, vou fazer disso um botão básico, certo? Ok, isso está ficando o certo. E então o que vamos fazer é pegar isso e copiar lá e então, ok, agora teremos três seções de servidores, o que é bom. Ok? E eu vou realmente cair rapidamente neste texto. Então vamos para o que eu acho principais características de serviço de um ginásio. Quero dizer, vamos apenas colocar x bar apoio, grupo da comunidade. E então vamos colocar aulas online porque não? E então eu vou deixar um monte de aplicativos. Mm-hm. Vou tomar esta parte aqui porque há muitas frases na minha opinião para phi. Então aqui vai uma pequena dica também. Quando você estiver fazendo esses tipos de seções. Eu sempre achei que é também um cinco linhas geralmente seções de energia suficiente. E você quer dizer com isso como cinco pistas, incluindo o título quando ele, em seguida, para sexo e outras coisas. Alguns sites precisam e a necessidade de um texto extra. Mas, na maior parte, você quer tentar manter um tiro. E como de volta a isso, como mantê-lo como curto e conciso tipo de coisa. Você realmente não quer ser colocado em muito texto. Você quer ser, você sabe, você quer que seja fácil para as pessoas consumirem. E essa é a chave. Então, digamos, vamos continuar com menos. Então, Ok. Então, para mim, isso parece um pouco de ESA. E vamos mudar o texto do botão para saber mais. E lá vamos nós. Certo, e estamos chegando a algum lugar aqui. Agora só precisamos de algumas imagens. Então vamos para Canvas. Vamos criar uma imagem de tamanho personalizado, digamos 300 por 300. A coisa que provavelmente é apropriada. E então nós estamos apenas procurando como apenas pequenos gráficos que podemos usar. Então vamos para os elementos. E o que eu vou digitá-lo como apenas ginásio, menos que você o que nós podemos chegar com. Ou revisão MOOC saúde das seções. Isso pode ser uma classe, grupo comunitário. Nós vamos apenas para aquele. Então realmente importa o que há lá. E ter um especialista. Podemos apenas querer dimensionar estes altos e torná-los a cor que estamos procurando, certo? E vamos fazer deles Coachella, que são os ratos daquele e aquele. E M quer baixá-los como um PNG com um fundo transparente. O Chris. E então eu vou voltar aqui e vamos enviá-los. Agora temos que fazer é suplemento. E há dois bancos secos, então queremos torná-los menores. E como vocês podem ver aqui, enquanto eu estou fazendo a imagem menor, direita está inclinada para o lado esquerdo e esquerdo. Não, veja, eu dirijo isso. Essas são as faixas que você fez isso porque é algo que você pode encontrar muito rapidamente. Então vamos dimensionar rapidamente as florestas e galões no lugar com o qual estamos felizes. O seu sim. Ok. Então vamos inserir um impasse aqui, aqui e aqui. E então vamos colocar a imagem e salvar lá. E você vai ver o que eu vou fazer em um segundo. E então vamos mudar o LEA e dizer que eles estão falando sensores. Simplesmente assim. Vamos nomear este terminal de classe. Vamos chamá-lo de serviço interno para imagem. Para isso. Vou aplicá-lo a todas as nossas seções. Tudo bem, agora, isso parece certo, não parece. Então isso parece muito melhor do que o antes. E se nós apenas sairmos para dizer aqui, se você olhar para ele de um pouco e nós podemos ver como todos nós meio que se encaixam juntos, mas eu estou muito feliz com essa média geral, eu acho que isso parece muito bom para apenas um site modelo, Devemos chamá-lo? Então vamos pegar isso e há mais uma coisa que temos que fechar, mais algumas coisas. Nós temos que voltar aqui e eu quero mudar esses MGs como eles estabeleceram. Cabe a você, de certa forma, talvez possamos mudar isso e eles podem não parecer muito grandes. Então vamos ver como vamos. Mas enquanto provavelmente tem que fazer é remover essas imagens do fundo porque eu não acho que ele vai jogar muito bom. Então eu removo o estofamento aqui, então eu quero, sim, então eu quero adicionar esse padrão de volta. E eu queria tirar daqui, assim mesmo. E o mesmo aqui em baixo. Vou remover o estofamento, queremos ficar com ele. E como você pode ver que mantém tudo agradável e final. Agora dê uma olhada assim. Sinto-me muito melhor. Eu estou olhando para ele de mais para trás no maior ponto de ruptura porque eu posso ver que tudo é mais do que comprimento, o que eu acho que eu prefiro um pouco melhor. Acho que é uma preferência pessoal. Eu só sim. Eu acho que eu prefiro que fosse e estar na pista assim. Vamos voltar e verificar de novo. Na verdade, então parte de mim também gosta disso. Vamos deixar como tínhamos feito. Ok. Quero dizer, você pode fazer o que quiser. Se você queria um espaço, você pode ver o que eu fiz lá. Se não o fizeres, podes mantê-lo como está. Então vamos fazer isso. E então eu só quero rapidamente e definir alguns títulos aqui. Então, a informação importante. Ok? Então, isso parece bom. Estou feliz com isso. Quero dizer, você pode adicionar mais seções. Você pode fazer todo tipo de coisas definitivas. Mas para mim, quero dizer, estes são um tipo de núcleo sim, eu diria, Sim, vejo que estes são os componentes centrais do que você provavelmente vai acabar fazendo. Você deseja uma seção de título apenas para itens que deseja adicionar. Se você tem site mendigo, você vai querer uma seção cauda para vincular a outros lugares em seu site. E você quer que essas seções apenas para ser capaz de expandir um pouco mais em certos pontos são certas coisas que são importantes sobre sua empresa. E aqui em baixo, eu sempre acho que é bom adicionar essa declaração de missão. Por que é que você está tentando alcançar foi, o que fez seu executivo da empresa, por que as pessoas se importam é que estes são pontos importantes que devem ser abordados o mais cedo possível quando alguém está visitando o seu site e que é em c, Este é um bom lugar para parar isso. Então agora precisamos ter certeza que isso parece bom em todo ponto de interrupção é que é a próxima coisa e você terá que fazer isso com cada página, independentemente de qual. Então vamos subir a escala e ver como chegamos. Então, à medida que saímos VF e estamos parecendo bem lá, não vejo nenhum problema. É assim que as crianças. Sim. Acho que estamos bem. E quero dizer, tipo, se você quiser que seu site não tenha esse espaço em branco em ambos os lados enquanto você aumenta a escala. E então você terá que basicamente redesenhar tudo suas contas e em cada ponto de interrupção. E o que não vai escalar rentável, parece certo. Mas eu prefiro quando você mantém tudo consistentemente menos do que n e você não está perdendo um monte do bom design que você fez como uma forma de dizer habilidades para cima. Então, de qualquer forma, a minha escola depois do caminho porque é aqui que as coisas começam a ficar um pouco mais. Devo dizer? Então, vamos para o tablet. Certo, então claramente vamos, temos trabalho a fazer aqui. Então, sim, vamos, vamos trabalhar conosco. Então os férteis explicam como parece bem, tudo no meio. Então aqui o que queremos fazer, agora mova-nos para cima. Eu não ouvi isso. Como nós vamos querer apenas empilhar estes. Bem, na verdade, eu não sei. Você pode fazer, você tem algumas coisas diferentes que pode fazer no seu tablet. Porque algumas pessoas não querem que um tablet seja afirmado que usamos um celular. E dependendo do tamanho de suas imagens de texto que você está usando, você pode manter algum tipo de consistência entre a área de trabalho e o tablet. Mas de qualquer forma, vamos ver como tínhamos ido. Então nós temos a visão básica do contêiner. E queremos mudar isso. Sim, não precisamos de nada disso. Na verdade, acho que vão fazer isso vai ficar bem. Então, se você ver o que está no contêiner foi a primeira vez que fizemos. E agora vimos esses impasses que e 17. Construindo a página de sobre: Tudo bem, agora que fizemos nossa página inicial e a próxima coisa que precisamos fazer é projetar nossa página sobre. E isso espero que não demore tanto, porque nós reunimos algumas das estruturas básicas que precisamos para construir esta página na página inicial e você verá o que eu quero dizer em apenas um segundo. Mas a primeira coisa que você pode ver aqui que eu quero abordar, e você vê isso como azul. E nós fomos lá, por que isso? Bem, isso é porque estamos na página sobre. É o que estamos editando. E não queremos que isso seja azul porque não é consistente com a nossa marca, certo? Então nós queremos ir isso e você pode ver aqui que ele diz atual, este verde. Aqui. Significa que estamos nessa página. E o que podemos fazer é pegar nosso vermelho bonito e podemos mudar isso para eles. Então, agora, sempre que estamos em uma página específica será destacado e direitos para estes, estas páginas para. Então o que eu quero fazer é, como eu disse, nós já definimos a estrutura básica do que estamos tentando alcançar. Então não precisamos realmente ir em frente e reconstruir com uma cartola e outras coisas. Você não quer fazer essas coisas do zero depois de ter feito isso uma vez, certo? Demora muito tempo como aprendemos com o primeiro vídeo. Então o que queremos fazer é ir para a página inicial. E podemos pegar, podemos pegar a estrutura que temos aqui, mas vamos querer mudar um pouco. Mas podemos pegar essa seção básica de que falaremos. E podemos ensinar isso. Colar entrar na seção do corpo e olhar lá, nós temos isso. Mas não vamos querer uma fazenda aqui. Então, vamos querer largar isso. E esse impasse, quero dizer, agora não queremos usar isso também. Então vamos usar o bloco lá. Isso vai ser as teias de comida. Mas vamos mudar algumas coisas. Mas vamos ter essa cabeça lá dentro e vamos ter um parágrafo debaixo dela. E então vamos ter um botão embaixo disso. E isso vai ligar para a página de contato. Então você pode usar este formato tipo padrão para cada página para pelo menos para o topo da página de qualquer maneira. E é por isso que eu costumo fazer isso. Quero dizer, isso torna a vida mais fácil no final do dia. E então temos algo acontecendo lá. Bem, imagem de uma Madonna e na verdade não danos provavelmente é bom. Sim, isso é bom. Vamos continuar com o parágrafo. E eu vou mudar o layout aqui também, só para que tudo se encaixe bem . E então vamos ajustar o preenchimento como fizemos páginas anteriores. Simplesmente assim. E estamos prontos para ir. Bom para ir. E eu só queria apenas um pouco desse texto porque quero dizer, há outra coisa também, como eu estava dizendo antes, pelo tamanho de ter uma sala de estar uma por seção. Assim, podemos ver um livro de cinco pistas, incluindo o título no parágrafo, hambúrguer três linhas e o descritivo em oposição ao título. E essa é a seção favorável. Mas para o cabeçalho, eu não deveria dizer que tivemos que fazer dois ou três e não 23. Ok. Então isso é apenas algo para ter em mente. Agora vamos usar isso como contato. E como estou me sentindo sobre sim. Tudo bem. Acho que é muito grande para mim. Como se fosse excessivamente branco. Então, bem, eu acho que eu fiz para realmente apenas mudar esta camada, o centro e então eu vou ter que, ok, isso é melhor. Sim, isso é acima de M. Agora você pode ver aqui o contraste é bom, eu posso ler este texto não é tão ruim. Isto é um pouco invasivo, mas não ao ponto em que é como exagerar completamente. Então o que eu vou fazer aqui como deixe-me apenas ir para, Tudo bem, então agora que nós fizemos essa seção, que eu estou bem, e vamos apenas rapidamente certificar-nos que sim, ele não escala, mas vamos chegar a isso. A Lisa. Nós só vamos colocar em algumas seções realmente básicas aqui. Como nada louco, nada distribuído desenha, nada disso. E eu vou fazer algo muito, muito direto aqui. é bom fazer as coisas diretamente para a frente, porque vai tornar mais fácil para você e sua impressão em um texto e outras coisas. E se você está projetando e é obviamente mais fácil para mim pagar aqui, mas é apenas um layout simples. Então vamos em frente e, e fazer isso. Então, com um quarteirão lá e outro. E então vamos lançar um parágrafo de cabeçalho. Não preciso de um botão. E quero dizer, temos o botão no topo. Você não quer sim, você não quer exagerar com os botões também. Isso é uma coisa boa para apontar e ter em mente. E então aqui nós queremos apenas novamente, como muitas vezes antes nós só queremos ajustar o preenchimento. Agora esta seção, você pode ser o tempo que precisa ser para isso, quero dizer, se você está apenas procurando por algo curto e atraente, você pode armazená-lo lá, você pode adicionar o que quiser. Mas essa vai ser a primeira seção. E eu vou fazer uma nova seção aqui embaixo. Eu sou como se essas páginas informativas não precisassem ser excessivas. Quero dizer, as pessoas no Google aqui como eles estão apenas olhando para aprender mais sobre ele, a empresa mais ruim em geral lá. E, em seguida, siga a seção básica. Eu quero, eu quero torná-lo cinza. Então, quando algum tipo de diferenciação. Ok, então você pode ver que há uma diferença muito, muito ligeira entre as duas seções. Agora, dentro do blog de desenvolvimento, vou adicionar duas colunas. Aqui. Logo acima disso. Vou adicionar um título. E este vai ser o nosso Meet the Team tendo sido, na verdade, em vez de colunas, eu acho que eu vou realmente fazer os agregados e bens são geralmente apenas um pouco mais fáceis, quase sempre. Então eu serei H2. E nós vamos adicionar duas peças muito básicas aqui . Basta ligar para isto. E então eu vou tornar este fundo um pouco mais escuro também, não muito, mas apenas o suficiente para que contrasta sempre tão ligeiramente. Simplesmente assim. Novamente, vamos fazer as bordas e vamos adicionar um pouco de preenchimento e mudar a camada. Novamente. Estamos fazendo com que Vasco larguras e assim. E então, como fizemos antes, vamos adicionar um padrão, arrastar a imagem e alterar a camada que bloqueia. Este será h3. E então queremos um texto para a profissão, itálico. E então eu vou fazer isso vermelho para a profissão mudar a margem. Dez. E isso parece bom para mim. E então para a grama em si, estes são, quero dizer, para argumentar, estes são dois brancos, mas pode ser difícil julgar isso. Então, na verdade, essas podem estar bem. Acho que empurraria isso. Sim, na verdade, estão bem. Então eu só vou pegar essa cópia, colá-la lá dentro. E essa é a seção “Conheça a Equipe”. E em Canva como quando você está no MGs. Eu sempre acho isso bom para a prova de equipe AOC é como uma dobra circular. Então, em Canvas. Se você voltar para Canva e você apenas criar, então você pode adicionar um quadro. Não lá. Eles são circulares um. Você pode ir aos fósseis. Fotos de perfil. John e Joe. Ok, eu baixei estes com um fundo transparente. Agora nós os temos lá. E queríamos que o tamanho dessas pistas fosse muito vago. E esses estão bem. Quero dizer, aqui é onde eu acho que eles devem ser um pouco mais magros. Então, se eu for para a grama em si, na verdade, para o que estamos fazendo aqui. Está bem, vai ficar tudo bem. E, em seguida, abaixo disso, no mesmo recipiente, queremos ir em frente e adicionar mais uma grande seção. Ok, e última seção que você provavelmente deve olhar para adicionar m, especialmente se você é uma página web, é apenas um bastante longo Na verdade. Mudei isso da nossa história para dirigir saúde e bem-estar. Em seguida, aqui você pode ir para as camadas e você pode tomar esta camada principal de polígrafo conteúdo em vez. Você pode fazer isso como um mendigo. Como se você quiser escrever uma lei, se você tem muito o que falar na sua seção Sobre e este é um bom lugar para fazê-lo. Talvez você tenha alguns vídeos que, e esta ação irá usar algo chamado um elemento de rich text, você pode ver aqui. Então temos que fazer algumas edições a isso. E nós vamos realmente fazer isso e guia de estilo porque esse é o melhor lugar para fazê-lo. Então, se formos, então pessoal, nós não queremos uma página, queremos guias de estilo e queremos viver assim. Queremos mudar o texto para Proxima Nova, obviamente. E todos esses dedos dos pés apressados e outras coisas devem estar online. E queremos que isto seja consistente com a outra página dois, por isso temos a Sophie, e vamos querer torná-la cinzenta. Permanecer gráfico de pizza. Queremos chegar ao 16. Isso é um 165. E você meio que vê onde eu estou indo com isso até agora, você é muito menos que você quer passar e você vai pedir aplicar, hum, todos os princípios que você dívida para seus títulos e seu gráfico de pizza principal em centímetros e você quer aplicá-los aqui. E a razão para isso é apenas principalmente porque é um bloco de texto rico, ele funciona um eixo um pouco diferente de alguns dos, alguns dos outros elementos. Então você quer entrar e apenas fazer essas mudanças e usar isso como sua base, certo? Portanto, mantenha isso em seus guias de estilo e faça as edições que você precisa ouvir. E o Azure poderá ver se eu voltar à minha página Web, que já estão a ser aplicadas. E o que acontecerá é que essas alterações não serão aplicadas ao, à camada que acabamos de adicionar à página sobre. Mas o que vamos fazer é levar-nos, vamos copiá-lo. Vamos voltar para o barco. Podemos preparar o que temos aqui. E podemos adicionar uma nova seção. E você pode ver que eu não terminei de editar a coisa toda. Então estes são, estes construídos sobre tão pequenos. Eu poderia brincar com isso e brincar com a gente o dia todo até eu sentir que o texto rico é perfeito. Mas o que eu vou escolher aqui como nossa história, porque é isso que você usaria uma seção quatro. E você pode fazer o que quiser aqui com isso. E essa seria a minha página, certo? Então permita que a malha e, em seguida, impulsiona o propósito da empresa, conheça a equipe. Se você é mais pessoal, adicione mais seções e faça estes mais finos. E adicionando mais e mais funcionários se você os obteve. E, em seguida, falar sobre a sua história feita que talvez adicionar um vídeo do YouTube, se você puder. E é isso. Você não precisa pensar demais. Estas páginas, não precisam ser exaustivas. Eles só têm que nos manter com informações sobre a empresa para quem está procurando, lutou. Mas a última coisa que precisamos fazer é ir em frente e garantir a escala mais ou menos. Então podemos ver que está tudo bem. E estes dimensionados perfeitamente, o que é ótimo. Então agora vamos voltar e queremos ir para o tablet. Então isso não escala muito bem. Queríamos apenas preencher isso. E eu só estou pensando, eu acho que eu quero fazer o mesmo aqui. Ok. Semelhante aqui. Certo? E isso parece bem no tablet além do recipiente S pote. E acabei de perceber que não tenho noção disso. E de qualquer maneira, você pode ver o que ômega, então nós só precisamos continuar adicionando esses contêineres. Essa está bem. E o conteúdo principal também será bom. E então, de repente, parece bom. Então vamos passar para a horizontal. Então este contêiner aqui é um causando alguns dos problemas. E nós queremos, na verdade, voltar e verificar isso novamente. Isso é bom. Então eu tenho 77 lá. E então queríamos reduzir o estofamento que temos aqui porque não vai parecer tentar quando chegarmos a este nível. E isso parece bem. E aqui essas grades, vamos querer a pilha porque vai ser muito mais textos. Então adicione um aqui e se livre deste. E mais uma vez, há muito espaço aqui, mas parece bem. Você, você vai se safar. E, novamente, nossa seção principal é a fama. E, por último, temos celular. Isso parece bem. Estes não são claramente. Vamos checar isso novamente. Eles estão bem. E parece bem lá. Sim. Agora não vamos conseguir nada. Vamos verificar rapidamente, vamos verificá-lo e você puxá-lo para fora e empurrar n. Deixe-me apenas verificar novamente maneira de recipiente aqui. Sim. Ok. Feliz com isso. Sim. Essa é a página sobre. É por isso que recomendo. Não tem que ser nada louco. Você não tem que estar fazendo uma quantidade estúpida de trabalho. Quero dizer, você pode, e vamos falar sobre algumas das coisas que você pode fazer em vídeos posteriores, ou pode ser em outro curso. Então, se estamos tentando ficar mais avançados, mas se você está apenas procurando por algo, basicamente parece limpo, ele faz o trabalho. É por isso que recomendo. Então é isso. Vamos para a construção de uma página de serviços. E vamos ver o que podemos fazer com isso. Certo, então vamos passar para isso agora. 18. Criando seus serviços: Tudo bem, então agora que terminamos nossa página sobre, a próxima página você será solicitado a criar como página Sócrates. E para você mesmo quando você está criando sua página de serviços, você pode ter um monte de serviços. Você pode querer alocar uma página, o serviço. Você pode apenas uma vez que eu tiver blocos como eu vou te mostrar aqui. E há um monte de coisas diferentes que você pode fazer. Então vamos manter este muito, muito simples. Então vamos receber Olá da página anterior, como já fizemos antes. Vamos acertar essa cópia vai os serviços, colá-lo, tomar até o topo. Altere a imagem e faça dela nossos serviços. E podemos colocar algo aqui. Agora podemos nos deixar em paz. Absolutamente Ok, então nós temos isso. E então aqui o que vamos fazer, eu só quero adicionar aqui provavelmente um acordeão. Então eu quero ter informações para os serviços pelo que a maioria deles para ser escondido. E, hum, eu não quero tornar as coisas muito complicadas. Eu só queria chegar ao ponto que as pessoas pudessem ver o que Magnus Jim tem a oferecer e nós podemos mantê-lo assim. Mas como eu disse, você pode ir em frente e criar e centralizar páginas para cada serviço. E você pode ter uma lista suspensa aqui que os visuais todos os serviços diferentes. Então vamos em frente e apenas construir um Ricardiano para que possamos ver o que temos layout. Então vamos dar uma olhada nisso. E não sei se tenho uma lição por enquanto. Não temos acordeão ou algo assim. Então vamos ter que construí-lo do zero, o que é absolutamente bom. Então vamos construir uma seção. Então elementos, o recipiente, eu quero o meu próprio. Então jogue um impasse aqui, depois outro. E então aqui em algum lugar vamos ter o menu suspenso. Largue-os. Lá vamos nós. Perfeito. Então vamos ter que brincar com isso um pouco. Então, se continuarmos a dar uma olhada aqui e ver o que podemos encontrar. Tudo bem, e abaixo desta seção, o que vamos fazer como eu quero adicionar um acordeão e na verdade já tem uma predefinição para esta página que eu quero adicionar. Então eu vou fazer é eu vou adicioná-lo a um projeto separado para que você pode apenas levá-lo se você quiser usá-lo. Mas também este site inteiro, vou publicar uma cópia do Ethan. Você pode tirar o que quiser dele. Mas deixa-me mostrar-te rapidamente o que vou fazer. Então eu vou para o meu fluxo em outra conta. Obviamente, isso vai me levar a um site da empresa, mas tudo bem. Não menos deliberada. Não estou a tentar ponderar sobre os serviços, mas vamos vir para cá. Ou, na verdade, eu acho que eu posso ter um procurando aqui, mas vamos apenas ir para o painel a partir disso. Não, na verdade, sim, como no site da NVD, é por isso que eu queria pedir desculpas. Então vamos voltar aqui. Vou ter que caçar um pouco. Eu sei, eu sei em algum lugar aqui. Valores de tecido de Shrift, possivelmente a página de valores. Sim. Este é o layout que eu quero tomar e vamos mudá-lo e garantir que representa as cores da marca. Mas vamos pegar esta seção, copiá-la. E eu poderia pensar em uma página web. Você pode simplesmente copiar e colar entre projetos realmente, muito facilmente, como aqueles. Na verdade, nunca houve problemas. Então vamos apenas arrastar para cima. Certo, e agora vamos querer entrar nesse microfone. Agora, obviamente, estes princípios acompanham. Vou ao gerador Lorem Ipsum. Agora aquele, provavelmente este. Então, um. E então aqui, tudo o que vou acrescentar. Certo? Então não, então vamos pegar nossos lindos vermelhos daqui. Cole isso aí. Tenho um título longo, mas não tão rápido. E aqui, vou colocar gramado e epsilon bem ali. Então sim, como se você fosse capaz de tirar isso de projetos. Vou para Lincoln no Skillshare neste curso. E você pode copiar qualquer um que você gosta. Você pode acessar todo o projeto e apenas levá-lo. Ok, eu não vou usá-lo para nada. Só vai ser colocado lá dentro. Então, se precisar de algo que eu estou projetando aqui e você pode pegar. E isso é tudo dimensionado corretamente e tal. Então, deixa-me mostrar-te o que quero dizer. Então, se eu for aqui e apenas ver, então seria apenas algo parecido com isso. Eu perdi algo lá, mas e você pode tirar isso. Você só poderia ter quatro. Você pode dividi-los em seções diferentes. Você pode adicioná-los à nossa dragagem. Você pode fazer o que quiser com isso. Então estes são úteis, eu acho. E eu gosto muito porque é apenas uma lista suspensa e é muito simples. E você precisa alterar a camada de destaque. Na verdade, farei isso antes de seguir em frente. Eu acho que esta é uma boa maneira, especialmente se você tem muitos serviços, mas você não necessariamente quer adicionar informações extensas sobre eles. Alternativamente, se você tem um pouco de informação, mas você não quer que ela entupa sua página. Ter um drop down como este é bom para disfarçá-lo e apenas deixar as pessoas clicar sobre o que um m e deixe-me apenas mudar rapidamente a cor aqui. E está em animações. Eu sou o açúcar de sessão aqui. Certo, então vamos mudar as as cores paletas de cores, certo? É o que procuramos. Neve obter algumas boas quedas que podemos usar. E sim. Então você pode usar isso para seus serviços. Você pode usar definitivamente. Você pode fazer o que quiser. Mas eu acho que esta é uma boa maneira de quebrar as coisas de uma maneira que não vai entupir sua página ou torná-lo muito pesado texto e maneira pouco lisonjeiro. Então, sim, é por isso que eu faço para a página web e isso deve ser dimensionado. Bem, nesta seção não é legal, mas tudo bem. Posso trabalhar com isso. Posso fazer isso agora para termos a certeza de que está tudo bem. Vamos apenas fazer isso e aquilo deve ser e melhor do Hofstede. Eu acho. Sim, parece bom. Então, no geral Vamos para Visualização. Sim. Grão. Então agora isso está no lugar. Sim. Assim como você também. E é isso. Ok. Então vamos passar para a página de preços. 19. Construindo sua página de preço: Tudo bem. Então, agora que temos nossa página de Serviços pronta e removida, é hora de seguirmos em frente e conseguirmos o lugar e as penalidades. Assim como antes, vamos pegar nossa seção básica de cabeçalho. E vamos colar isso aqui. Nós só vamos colocar o suporte. E vamos deixá-lo como um monte de Epsom. E nós vamos mudar essa imagem para algo um pouco mais agradável. Certo, então vamos deixar isso aí. E então, nessa nova seção que temos, vamos construir algo realmente simples, o que eu recomendo. Quero dizer, você pode ter algumas, mais algumas complicações em seu preço e página se quiser, mas você provavelmente não vai precisar. E a maioria dos casos com inscrições no ginásio, você geralmente tem ofertas de aço. Você tem como uma base um, aquele ponto de entrada. E talvez você obtenha seu nível mais alto para clientes que pagam mais alto. Então, e é isso que vamos cinturar aqui. Então vamos fazer isso. Tenho uma seção básica que contém um golpe mortal aqui. Então o que vou fazer enquanto vou jogar, acho que estamos bem. Sim, vamos fazer este com colunas. Vamos usar uma grade para isso. Usamos colunas e vamos ter três. E então essas colunas vão adicionar um bloco def e cada um, haverá camadas muito semelhantes o que fizemos antes, mas vai ser um pouco diferente. E então nós vamos ter um cabeçalho acima das colunas e n aqui. Como é que vamos fazer isto? Nós vamos fazer, eu preciso pensar que vamos ter uma aula que ele fez primeiro. Então nós vamos fazer a seção básica, em seguida, recipiente básico. E para o nosso rumo, vamos ser aquele. Sensor contra vou dizer. E eu acabei de perceber que isso não é realmente H2, aquele. E aqui nós vamos dar o nome de classe Blog. Pacotes de preços. Vamos manter as coisas bem simples. E amplamente tem a ver com este porque estamos realmente tentando colocar alguma ênfase. Eu realmente quero usar o vermelho é o fundo e que eu não fiz muito menos, mas é só porque você não quer exagerar. Você não quer saturar o uso da cor. Então vamos fazer isso em torno dele. E então vamos começar um pouco isso é como você precisa pensar sobre a estrutura disso. Então vamos colocar, deixe-me pensar. Vamos ter um elemento de texto primeiro. Então eu vou ter uma cabeça. E então teremos uma breve descrição. Então, outro elemento de texto. E depois vamos ter menos. Então deixe-me encontrar uma lista decente de textos. Tudo bem, então deixe-me ver uma massa, mas vamos polir a água, assim como antes de 2020. E, a propósito, você pode manter pressionada a tecla Shift. Se você quiser mudar tudo para um número de uma vez. Então este que vamos agora não é parafusos. Não preciso de parafusos. Não precisávamos que fosse. Vou fazer 15 anos. E então eu vou chamar isso de Stacia, vai ser menos espaço e 2, e eu vou torná-lo branco. Um título é, obviamente, vai ser um H3. E mantenha-o assim. E vamos torná-lo branco. E nós só vamos dizer 25. Então aqui vamos adicionar o descritivo. Então vamos tomar um pouco, muito épsilon. Eu posso levar este aqui. Talvez não tanto quanto isso. Então, talvez só uma frase. Parece bom para mim e vamos chamar isso de parágrafo básico. Vamos colocar um pouco de branco lá dentro. Na verdade, não, eu não preciso saber a aula aqui. E depois vamos fest listas. É quando vamos mudar as coisas um pouco. E eu também quero reduzir o módulo no topo deste título. Então um N aqui no menos nós vamos apenas fazer a ANOVA. Vamos torná-lo branco. Vamos fazer um 16. E então nós vamos adicionar um pouco de preenchimento entre cada menos do que provavelmente dez. Eu acho. Eu não sinto que estou me sentindo muito bem sobre este aqui. E vamos adicionar um botão no fundo. Só vamos dizer lição básica. E vamos subir porque queremos que isto seja branco. Vamos mudar as últimas ultimamente. Então, um dos botões para ser de largura total, apenas assim. E eu vou colocar a inscrição. Eu vou pegar isso e eu vou apenas copiar e colar isso aqui e aqui. Escondeu todo o Pai agora chamar os livros para ir. Não sei, 35, 45. E é por isso que eu faço para a página de preços, um muito simples, você não quer pensar demais. Então esses são os pacotes realmente básicos que podemos usar. E você poderia adicionar algumas coisas sobre isso, como, em vez de ter todas elas iguais a essa cor. O que você poderia fazer é como você poderia ter estes como branco e n vértices no topo um como direitos. Na verdade, não me importo de fazer isso só para ilustrar. Então você vai, isso vai parecer. Então vamos fazer isso branco, que vai na verdade apenas ligeiramente cinza. Então eu posso ver Edison e eu posso fazer o topo. E eu posso fazer isso ir tão longe quanto fazer a textura acrescenta. Acho que isso não é apropriado. E então eu quero fazer isso cinza. Eu gosto disso. E porque estamos fazendo uma parede branca que quero fazer aqui é adicionar uma caixa de sombra. Assim como já fizemos muitas vezes antes. E para mim, se estou feliz com isso, copia que há este aqui. Vamos mudar as etiquetas. Especificador básico. Sim. Tudo bem, e você pode fazer algo assim. Epístola um pouco de ênfase no último, e esse é o que você quer que as pessoas escolham. Você pode adicionar rótulos mais populares. Você pode fazer muitas coisas aqui, mas é por isso que eu recomendo por preço e você não precisa complicar demais ou fazê-lo. Sim. Só não se complica demais. Então vamos verificar rapidamente e ver como a escala, e eu quero mais espaço. Então eu estou indo para mover não muito um 100, talvez como um 60. Sim. Vamos agora trazer o mais feliz com isso. Vamos, tablet. Perder um pouco lá, mas não tanto que eu esteja sentindo o que você gosta? Isso está tudo bem. Eu acho. Sim, isso é bom. O que podemos fazer é mudar o padrão para talvez 20. Isso vai ajudar abaixo, mas, ok, E aqui o que nós temos, então nós temos a pilha de colunas que nós esperaríamos que eles, mas não há espaço suficiente, então nós vamos adicionar algum espaçamento. E é isso. Bem, é muito melhor do que isso. Vamos ver. Vou olhar na grade móvel. Parece bom para mim. Normalmente apenas um espaço aqui, é persa e E. Loops mercadorias. Tudo bem? E isso é um preço e arremesso. Então essas páginas estão indo bem e eu estou me sentindo muito bem sobre elas. Agora, há algumas partes que talvez você esteja me observando fazendo aqui e você estaria pensando, ok, essas partes que talvez não tenham curado, eu fiz em todas as páginas, por exemplo, eu não tenho sido Lincoln o botões e eu não estava prestando muita atenção para os títulos são se eles são categorizados corretamente. E a razão para isso também. Eu sempre faço. Eu costumo tentar obter a maior parte do design, que tipo de caminho. E então eu tenho algumas verificações padrão que eu faço no final, que eu vou fazer um vídeo e mostrar a vocês o que fazer. E porque você quer ter certeza de que seu site vai funcionar de forma ideal, você quer ter certeza de que tudo está no lugar. Às vezes é um pouco demais estar fazendo essas verificações enquanto você está passando pelo processo de design porque não é nisso que você está focado, seu foco no comércio e algo que é projetado. Bem. Então vamos fazer isso. Então, se você notou isso, se você não for, nós vamos voltar a isso. Mas sim, essa é a página de preços. E agora temos a página de contato para dar uma olhada. Esse é o próximo. E então estamos quase lá. Agora, deixe-me começar a falar sobre estruturas de regeneração e como realmente vamos gerar leads conosco. Então vamos passar para o próximo. 20. Construindo sua página de contato: Tudo bem, agora finalmente chegamos a endereçar nossa página de contato. E como os temas que estariam passando por este curso. Eu sei que temos nos concentrado muito no design e estamos supondo que estamos totalmente gerando parte do curso agora. Mas depende do tipo de site que você está construindo. Em primeiro lugar, em termos de como você deseja que sua página de contato se pareça, você pode seguir uma abordagem mais tradicional onde a página de contato é apenas uma fonte. E posso mostrar a vocês como fazer isso aqui. E você também pode dizer a abordagem onde você constrói uma fazenda apertada e você incorpora na página. E essa é uma maneira mais interativa de coletar leads, que eu diria que é um pouco mais envolvente como um pouco mais inovador. E naqueles, ele se conecta e forma apertada duas aplicações diferentes também é muito mais fácil do que talvez apenas um formulário padrão. Então há tantas maneiras diferentes de você fazer isso e é tudo o que foi melhor para você. E o que eu realmente vou sugerir da maneira que eu vou construir a gente. Vou em frente e construir isto com uma forma e mente apertadas. E depende do que você está fazendo, mas é por isso que eu recomendo que você veja isso e você é genuíno e a maneira que eu estou configurando isso e não vou estar provavelmente não será do seu interesse. E a razão pela qual eu digo que, como você pode continuar, você pode dizer não para PT restante. Você pode dizer não para se juntar. Você pode ter membros dizendo isso através do seu site e realmente obter dinheiro com eles antes mesmo de eles entrarem no ginásio ou antes mesmo de você falar com eles. E a menos que você esteja vendendo como um tipo de produtos ou serviços de alta tecnologia que você precisa falar com as pessoas e você tem que passar por um determinado processo de vendas antes que eles realmente comprem de você. Então desta forma talvez um pouco melhor. Novamente, se você é apenas um tipo de padrões de negócios locais e você precisa de contatos de pessoas e, em seguida , sim, o método tipo de fonte é muito Besso, desperdiçado. Vá e deixe-me apenas voltar rapidamente e eu vou mostrar-lhe o tipo em nossos cintos são forma muito apertada. Eu sou muito menos. Vou mostrar-te como vai parecer e mostrar-te como almoçar, certo? E eu acho que esta é a maneira mais fácil de fazer isso, certo? E trilhos de telefone apertados de terra caro. Você pode criar, realmente se envolver em fazendas com ele e apenas liberá-lo incorpora. Então vamos criar um novo tipo 1. E nós vamos criar o seu próprio tema. E nós poderíamos apenas começar de branco uma coisa porque tudo do zero. Tudo bem, e agora isso rastreia vou chamar essa inscrição de Magnus Jan. E qual é o tipo de formulário em si? Você terá que construir um tema. Você tem que apenas macaquear. E eu quero me livrar dessa imagem. Ok? E eu quero adicionar uma tela de boas-vindas. Ok, a primeira pergunta aqui, obviamente a tela de boas vindas aqui, pergunta de descarga e nós vamos apenas, nós vamos apenas fazer algumas perguntas aqui. Nós não precisamos tomar muito tempo e sobre isso, mas você teria sua tela inicial, você tem sua primeira pergunta que eu recomendo é bem o seu primeiro nome, que são menos do que o endereço de e-mail. Você vai querer coletar isso. E todas as instâncias. Se eu posso encontrá-lo, é Hayden a partir dele. Um ir. E você pode adicionar qualquer outra pergunta que quiser aqui, mas eu vou continuar com isso. Então você quer adicionar um final. Você pode ver que já há um aqui. Tudo bem? Então nós temos isso e eu vou, eu vou fazer é construir um tema. Então, quando se trata de design, vamos adicionar um novo tema. Os fundos. Nós não vamos ter uma imagem, mas nós teremos uma cor de fundo e nós vamos apenas usar nossa grade. Em termos dos textos. Vamos usar o branco. E com o botão, vamos usar nossos vermelhos, como temos feito anteriormente. E isso somos nós. E as respostas também vão ser, provavelmente, nós vamos ficar com o branco para isso. E isso deve bastar. Vamos ver como isso flui rápido. Então, vamos clicar em Iniciar. Sim, e vamos querer dar uma olhada rapidamente na fonte também. Então não vamos usar fonte do sistema, vamos usar UDL, acho que vocês terão sua ANOVA. Vamos usar Matsuda usaria o que conseguirmos. Ok, então isso funciona e nós podemos fazer um monte de médiuns provavelmente a melhor opção, hum, ok, e esse é um tipo realmente básico de cinturão agrícola para este site. Então vamos publicá-lo. E o que vamos fazer é adicioná-lo como uma página de preenchimento. Nós vamos pegar o casaco vai copiar os códigos. E aqui o que vamos fazer, vamos nos livrar do nosso cabeçalho. Temos esta secção. Em seguida, vamos adicionar um elemento incorpora lá. Cole o fresco, em seguida, salve-o. E isso somos nós. Você não tem que fazer mais nada conosco tudo o que temos que fazer. E quando publicarmos isso, seremos capazes de ver como ele se parece e se mover, capazes de ver como podemos interagir com ele. Mas isso é o mais longe que vamos levar no momento. Então, sim, eu acho que eu sei porque eu fiz isso assim pode não fazer sentido que você não pode ver o visitante, ok, mas nas próximas lições eu vou estar falando sobre como nós realmente transformar isso ou como nós realmente melhorar a regeneração aspecto. Então isso não vai explicar o fluxo disso. E então eu vou fazer algumas sugestões sobre, sim, mas como você pode conectar esses diferentes aplicativos e como você pode aproveitar ao máximo. Então vamos passar para isso e começar com o lado da geração de leads das coisas. 21. A estrutura de geração líder: Tudo bem, agora que projetamos todas as nossas páginas e ainda temos um pouco de trabalho para fazer o lado do design das coisas, mas a maior parte está basicamente acabada. Mas o que queremos fazer agora é falar sobre geração de chumbo. E isso vai mudar dependendo do que sua empresa é. E há tantas maneiras diferentes que você pode gerar leads e domingo suas esposas para responder o que nós chamaríamos de máquinas de venda, onde podemos coletar o que leva e podemos fazer um bom trabalho. Este site que definimos, Eu tentei criar uma estrutura que eu acho que provavelmente vai ser apropriado para a maioria das empresas. Então você começa a matemática está acontecendo. Primeiro é onde você pode coletar endereços de e-mail e nomes e a língua para algo para uma oferta. Então eles oferecem que estamos usando aqui é dizer para não obter 10% de desconto no seu primeiro ano. Então, quando você se inscreve para uma associação para obter 10% de desconto, a razão pela qual eu fiz eu gosto disso porque há uma maneira separada que eu normalmente faria. Eles deveriam ir e encher. Eu não conheço o site Jim, por exemplo, porque a matemática com os dois métodos que eu tenho aqui são provavelmente os dois que qualquer empresa pode meio que usar que você pode adicionar que você pode adaptar os fundamentos da caminhada, mas aqui você pode aplicá-lo ao seu. E por isso temos isto aqui no topo. E o importante a enfatizar aqui é que isso será visível para quem estiver visitando o site pela primeira vez. Como ele vem através da página inicial lá sendo apresentado por parcialmente, mas esta página um sendo apresentado, mas o propósito ea declaração de missão, mas como dizer às pessoas o que esta jóia pode ajudá-lo. E então, abaixo disso, estamos dizendo às pessoas onde se você se inscrever aqui, recebemos um forte apelo à ação e esse é o ponto. E novamente, apresentado com isso, com ter que fazer qualquer escola e eu clicar em qualquer coisa. E isso é o que é importante. E, em seguida, no fundo aqui, temos outra chamada. É o mesmo apelo à ação. É apenas na primeira linha e isso será mostrado em todas as páginas. Então, o mais profundo alguém entra na página quando a cabeça o fundo novamente apresentado com outra oferta. E estes são bons por um monte de razões. Quero dizer, o primeiro é que ele te dá algo que as pessoas podem anexar além de apenas contatos em sua empresa. Se você é uma marca baseada em serviços para um ginásio, haveria mais funcionalidade de comércio eletrônico envolve antes de nós vamos anotar esse caminho. E a verdade é que se você entrar realmente profundamente em um tipo particular de modelo de negócios, você vai descobrir que seus fundamentos são métodos de regeneração sempre vai permanecer o mesmo, mas eles apenas nos fazem banquete, mas eles apenas fazem um pouco desbotada um ao outro pensando que esse é um mostrado aqui é realmente um bom lugar para começar a chegar com uma oferta como nós temos aqui. E então você obviamente alto bom botão de contato em cima. E a página de contato ou consistia de um formulário de tipo ou onde quer tipo farm que você deseja usar. E uma coisa que eu não fiz na fita de quando eu estava construindo foi realmente um chamado à ação lá, um chamado à ação definido. Agora ganhe 10% de desconto. E pode ser o que você quiser. E nós vamos falar sobre alguns desses aqui. Então, por exemplo, eu tenho um gráfico listado aberto aqui. Só vou largar as densidades. Mas para a oferta cantinas de mesa, você pode então inserir seu e-mail, campanhas de e-mail ou a mesa e seria barcos. E eu só vou expandir isso com um link. Para comprar. Uma associação. São alternativamente, seria difícil. Mas o representante de vendas. Porque se você é ciberespaço e você não vai ter uma funcionalidade de comércio eletrônico. Alguém tem que falar com você antes que você possa realmente chegar a um acordo. Então isso é algo que você pode querer considerar. E você pode receber vários e-mails, mas você pode enviar vários, você sabe, você pode criar toda uma sequência automatizada. Obviamente, nós não estamos, nós não estamos indo para isso hoje, mas isso é o que você pode fazer você pode ir em frente e você pode criar uma seqüência de e-mail automatizada completa para uma oferta para vender o talvez e se você perguntou a ele, mas porque alguém será inscrever-se no HUC forte o suficiente, há um mais velho vai ficar desktop e você pode ter que fazer isso. E então qual é a página de contato? Pode ser apenas um direto como contato é como escolher uma descoberta seletor de cores chamado proposta de preço de solicitação de proposta de lacuna para que tenhamos o preço e a menos que Jim diga, mas há tantos ganchos diferentes que você pode usar. E sim, então vamos dizer contato e, em seguida, o resultado foi que seria uma grande decisão. Então, sim, como os tantos métodos definitivamente de geração que eu poderia falar aqui. E para ser honesto, seria um curso completamente separado. Eu poderia continuar, mas isso é para a alma por tanto tempo. Mas muito menos site que estamos olhando. Estes são os dois diferentes com golfista iria oferecer-lhes uma mesa e mantê-los. Foram muitas vezes do que a minha mesa e escolher uma associação ou líquido maior chamada. Formulário de contatos padrão, onde alguém pode penetrar um monte de informações. E, em seguida, voltar para estar ligado com o representante de vendas ou algo assim. E essa é a chave aqui. Essas são as principais coisas em que estamos tentando nos concentrar e tendências. E o que temos que fazer como o próximo vídeo. Em vez disso, vamos estar conectando o que temos aqui. Então, o que vamos estar fazendo no próximo vídeo como conectar nosso formulário tipo e também nossas fazendas aqui e aqui com nosso provedor de e-mail marketing. E eu quero tocar brevemente sobre os diferentes tipos de provedores maléficos da Roxanne que você pode usar. E eles devem considerar se você não tem um no momento. Então vamos falar disso no próximo vídeo. 22. Conectar suas formas de gerador líder à um provedor de e-mail: Tudo bem, agora que passamos por métodos de geração de alelos e temos que conectá-los ao nosso provedor de e-mail marketing. Então você já pode ter um provedor de e-mail marketing são, se você não tem, você vai ter que escolher um. E vou mostrar-vos dois dos meus favoritos que recomendo aos principiantes. Um deles que usamos internamente, sou a favor de muito do que fizemos e é isso que vou mostrar a vocês. Então o primeiro que temos como Mailchimp, e este não é o que usamos, mas costumávamos usá-lo. E milícia foi muito, muito bom se você é um iniciante para Eva marketing é definitivamente caso. Assim, para pequenos empresários. E então as pessoas são nova equipe e marketing e marketing em geral. Então eu recomendo vivamente avaliar com eles. E o processo para conectar seu farm Webflow com movimento será muito, muito semelhante ao processo de conexão Webflow, mas converter kit, que é o que eu vou estar falando aqui. Mas estes são os dois que eu recomendo. Mas você pode ir embora e fazer sua própria pesquisa porque há muitos provedores de e-mail marketing diferentes. Mailchimp é provavelmente o líder de mercado e a lei respeita converter kit como menos conhecido, mas é tão bom quanto Mailchimp. Então o que vamos fazer é abrir uma nova conta e passar por um condutor. Nós realmente mudamos de MailChimp ou passar por um mês, meses atrás, quer, quer ir. Então vamos fazer login. Então este é o kit de conversão. Vamos dar-te uma ideia de como é. E este é os EUA, sim, este é provavelmente o que eu recomendo usar isso como um bom que eu preferi muito mais movimento é apenas muito melhor na minha opinião. Mas sim, a coisa que vamos fazer aqui, então, primeiro, queremos conectar fazendas ou fóruns de desconto em, aqui, no topo da nossa página inicial. Sob Fisa. Queremos conectá-los com o boné de combate. E então também queremos conectar nosso tipo de fazenda com Connecticut. Então o primeiro que vou mostrar a vocês é como conectar seu formulário de tipo com o hit kickback. E a maneira como você vai fazer isso é usar uma plataforma chamada Zapier. Então você pode ver aqui há muitas conexões diferentes que você pode fazer com diferentes plataformas em forma apertada. E o que eles realmente não têm para usar Zapier ou algum outro tipo de software de configuração de API. Então vamos apenas digitar aqui e ver se o kit de conversão aparece. Assim podemos ver que não havia aqui. Teríamos que ir em frente e usar Zapier para se conectar a isso. Mas nós bem, nós bem procuramos usar aqui em cima. Então, se você não sabe do que eu estou falando lá e nós ainda vamos usar eu vou te mostrar o processo que você tem que passar, então não faça o que for. Mas aqui temos tipo de formulário e vamos nos conectar e devemos ser bons para ir em apenas um segundo. Muito bem, a forma apertada foi autenticada. Agora precisamos obter autenticação de Connecticut, que deve ser relativamente simples. Então ele precisa ir para que você possa aspirar qualquer configuração escolar. E qualquer SQL é uma chave de API geral e menos aqui. Na verdade, este é o segredo. Vamos pegar isso, copiá-lo. Para voltar aqui, cole e clique em Criar. Ótimo, e isso foi bem sucedido. E o que eu quero fazer aqui com relação às etiquetas e outras coisas, você, o que você teria que criar uma tag e dizer kit converter que você vai anexar. As pistas estão vindo deste formulário para então eu só vou escolher sim, eu só vou escolher uma única etiqueta. No entanto, podemos atualizar os assinantes existentes, mas não precisamos. Certo, então podemos escolher. Estas são todas as etiquetas que eu tenho lado voltar. Não importa qual deles. Criar uma tag específica para o formulário que você tem em sua página de contato. Então você cria uma tag dizendo contatos e algo assim. E o que vamos usar. É este que eu não tenho teta. Eu não adicionei uma pergunta. E então você vai combinar essas perguntas com o primeiro nome e sobrenome. E então, quando essa informação for puxada para convecto, seja designado para os lugares certos. Então, vamos clicar em Concluir. E é isso. Então, se eu continuasse a tomar forma no site que era Belgo nós ainda temos que publicar. E eu seria capaz de colocar minhas informações e ele iria aparecer e voltar gatinho, isso seria bom para ir. Então, agora que conectamos o farm de fitas com convexos, vamos voltar para o Webflow. E nós vamos conectar essas fazendas. Então nós temos o cabeçalho e o Fisa e nós vamos conectá-los com convecto KitKat. Agora vamos fazer isso usando uma plataforma chamada Zapier, que obviamente mencionou. E isso nos permitirá conectar o Webflow. Wes, converter kits através de configuração API e Zapier, torna muito, muito fácil de fazer. E em termos dessas formas, é claro que vai obter essas formas podem parecer independentes uns dos outros. Mas do jeito que vamos configurá-los da mesma maneira, vamos configurá-lo da mesma maneira. Vamos atribuir a mesma etiqueta e será tratada como a mesma coisa. E porque, em última análise, eles são. Então é isso que vamos fazer a seguir. Agora isso é um pouco mais complexo. Vai precisar de um pouco mais de habilidade. Mas eu definitivamente valia a pena saber como fazer. E você pode estar pensando, bem, por que, por que eu não apenas inseri um formulário no meu site? Porque você não pode fazer isso com um retorno aqui. Você pode criar um farm e, em seguida, você pode simplesmente colá-lo no, em seu site e você pode coletar informações dessa forma. A razão pela qual não gostou de fazer isso é porque você não tem tanto controle sobre a aparência do formulário. E isso geralmente é uma grande ruína para alguém como eu que se preocupa com o zinco, porque não seria consistente. Ele enfiaria como um polegar dolorido em mim e estava me deixando louco para dizer o mínimo. Então vamos em frente e fazer isso. Então eu vou desligar todas essas guias, principalmente porque nós também estamos meio que entrar no final deste projeto. Então nós fizemos tipo formulário como outra maneira. Vamos nos livrar de tudo isso. Então Zapier como uma plataforma que você pode usar gratuitamente, mas também há uma versão paga dele. Eu aconselharia investir em se você acabar fazendo parte mais complicada com ele. Então eu vou dizer isso aqui. Esta é uma das plataformas que pagamos. E isso vai tornar realmente fácil para nós que conecta Webflow com convexo. Então o que eu vou fazer, eu vou criar isso. E este processo será o mesmo independentemente de US pagar o livre. E então vamos criar, vamos criar um cliente. Então agora que estamos aqui e Zapier, este processo seria o mesmo a propósito, independentemente de você estar em um plano gratuito ou pago, e pelo menos deveria ser. Mas o que vamos fazer é clicar no botão Criar. E depois vamos procurar na galeria. Vamos ver se há algum modelo aqui para conectá-los Webflow com kit convecto. Porque uma grande coisa acima exatamente é que você pode pesquisar o aplicativo para que você está procurando aqui. E então você pode conectá-los diretamente com o outro DPI. Então você não tem que fazer muito macaco sobre isso pode envolvê-lo durante todo o processo. Então vamos primeiro digitar Webflow lá. E então vamos digitar Connecticut. E então você vai definir um gatilho. Então F é uma submissão de formulário. Isso é o que vai desencadear este evento. Então vamos adicionar um assinante. Então vamos adicionar um assinante a uma sequência. É o que vamos fazer. E ainda assim vamos em frente e criar isso. E então o que vamos fazer aqui é clicar no sistema operacional convidado. Está tudo bem, então agora que estamos aqui, vamos clicar em conexões. E você não pode porque é um site separado com o qual estamos trabalhando. Então você pode ver todos os sites diferentes que eu tenho aqui. E o que vou usar é obviamente Magnus, Jimmy ou Shi'a. Então, vamos clicar lá. Vou clicar em Autorizar aplicativo. E isso é tudo para o nosso site. Pode não dizer isso, mas esse é definitivamente o único. Então vamos à noite. Então essa é obviamente a nossa jóia aqui. Agora, o que nós vamos querer fazer antes de realmente ir frente e clicar em seguida é que nós vamos querer publicar ou dizer neste ponto, porque uma ordem para Zapier para, porque para que Zapier identifique os formulários que deseja extrair informações a partir dele tem que ser publicado. Então vamos voltar para Webflow, vamos subir aqui. E então não vamos adicionar um domínio personalizado neste momento. E esse é um processo totalmente separado do qual falaremos no final. Porque, a fim de adicionar o domínio personalizado e você tem que atualizar para um plano de site, que eu não vou fazer aqui. Mas por que eu vou fazer é publicá-lo. Então este Webflow, domínio de Hofstede. Então vamos fazer isso. Porque isso identifica um projeto é a mesma coisa, independentemente do domínio em que ele está. E então o que vamos fazer para garantir que o formulário será registrado corretamente. Vamos apenas rapidamente e SAT ou informações, então a informação acaba assim registra ou como uma resposta. Ok, então essa é uma. E então aqui vamos fazer o mesmo. Ok? Então agora Zapier deve ser capaz de extrair essa informação que nós apenas bagunçamos quando clicamos em Avançar aqui. Então você pode ver isso como sendo registrado com dois formulários separados. Você realmente vai ter que criar 2s abs, você vai ter que criar um para uma fazenda e uma fórmula. Então nós vamos apenas para o primeiro aqui. Vou clicar em Avançar. E você pode ver que ele está puxando os dados do Webflow. E então temos que nos conectar e voltar. Bom. E eu já me conectei, então essa parte passa para mim. Mas o que você vai ter que fazer lá é quando você conectar e converter kit, Eu imagino como obter o seu segredo, como obter a sua chave API secreta. E então você vai ter que copiar e colar isso aqui em algum lugar. Agora está pedindo um pouco de sequências. Não criamos uma sequência. Mas deixa-me voltar e falar sobre o Git e mostrar-te. Você criará uma sequência e automações. E novamente, converter kit como provavelmente um curso inteiro separado em si mesmo. Mas a maneira como planejamos ter informações ou você pode criar uma grande sequência. Mas isso foi quando estávamos falando sobre as campanhas de e-mail. Mas você gostaria de ir para sequências e começar por aí. E é aqui que você construiria seus e-mails. E então esses e-mails podem ser adicionados em alguma automação. Mas que sequências? É apenas um conjunto de e-mails que estão recebendo incenso e uma forma automatizada. Então eu não vou usar nenhum desses no momento, mas nós vamos voltar para Zapier e eu vou apenas recolher isso realmente não importa qual para mim, mas você não pode sequenciar. Em seguida, você deve clicar em Avançar. Então podemos ver aqui quando estamos olhando para isso que é puxado através de um nome, mas nós realmente não queremos esse também. Queremos escrever o e-mail, queremos mapear isso. Então, vamos apenas clicar em Data emo. E, em seguida, aqui nós vamos para FirstName e LastName. E é isso que vamos usar. E vamos ver se funciona ou não. E então vamos em frente e clicar em Avançar. Vamos enviar um teste para ver se está funcionando. Em cinza é puxado para fora. Então agora nós criamos, então o que nós queremos apenas ligar aqueles para cima, e é isso. E então você vai querer repetir esse processo para o segundo formulário. E então você terá seus polegares ligados para defender e a informação será passada corretamente. Você bem, um para gastar um pouco de cada vez quando suas campanhas de e-mail lei. E para criar uma sequência, use essa nova sequência, dê um nome a ela. Como. Então. Então você quer lhe dar uma sequência, um nome. E nós podemos ser qualquer coisa que você goste realmente no seu negócio. Apenas certifique-se de que está claro e que é claro que forma a sequência está relacionada. Então é isso que você vai usar no seu Zach. Vou criar um teste só para mostrar o processo bem rápido. E então é aqui que você escreve seus e-mails. E você pode adicionar vários e-mails e todos eles disparam de forma automatizada. E você determinará quanto tempo depois de cada e-mail ser enviado, quando o outro enviará. E realmente é assim tão simples. Você pode gastar um bom pouco Taiwan você para e-mails certificando-se de que eles são projetados corretamente e a areia todas as coisas certas. E, em seguida, dependendo da sua autoria ou do seu serviço, se a intenção aqui é usar o livro de alguém uma chamada que você vai querer vincular, você vai querer enviar um link para o seu contador, uma plataforma que você pode usar para isso como Chamado Calendly. E é isto aqui. E você pode usar isso. E quando é muito, muito fácil criar um evento, ele irá gerar seu link personalizado. Você não tem que fazer muito macaco e sobre. Você só tem que obter Calibri a informação que você precisa. E você será capaz de vincular isso em seus e-mails para alunos um pouco chama bebês para negócios, ainda dependendo do que você está fazendo. Então você pode realmente tomar isso na direção que quiser. Não precisa ser específico do que eu tenho falado aqui. E é isso. Nesse ponto você terá conectado, é suas fazendas para converter kit. E isso será uma sequência automatizada de preenchimento se você configurar isso corretamente, o que é realmente, muito útil significa que você terá que enviar e-mails manualmente para leads e todo esse tipo de coisa. Então sim, então isso é realmente agora há um par de outras coisas que temos que fazer, relacionar com o site e avaliar. Então eu vou falar sobre no próximo vídeo. E vamos falar disso agora mesmo. 23. Adição do seu site e configurações: Então, as últimas coisas que precisamos passar por aqui, e este é um aspecto que não tocamos enquanto passamos por este curso como fluxos de trabalho, configurações de projeto. Então você pode ver que você tem um monte de guias diferentes com um monte de configurações. Eu vou passar rapidamente por eles para você e explicar para você o que cada um deles é. Então, em configurações gerais, você obviamente tem o nome no subdomínio sobre o site. E você pode adicioná-lo à nossa pasta se quiser. Em seguida, você também pode adicionar seu favicon e web clip. Então eu aconselho a colocar o seu logotipo lá porque as pessoas não vão saber. Então, e aqui em baixo você tem seu fuso horário. Você pode adicionar seu calcanhar linha de login, isso é útil. Você pode se livrar da marca de fluxo de trabalho no HTML, que você provavelmente vai querer fazer. E, em seguida, aqui em baixo, apenas estatísticas realmente e hospedagem. Portanto, você vai querer conectar seu domínio personalizado no final, quando você estiver pronto para publicar, você vai querer adicionar um plano de site. Um plano de ensaio pode ser qualquer um destes. O que eu recomendaria é o CMS. Mas você pode usar o básico se quiser. Cms vai apenas dar-lhe funcionalidade adicional e oh, provavelmente ser um serviço de hospedagem um pouco melhor. Então sim, os isótopos. Então, se você tem algum funcionário que você quer fazer edições no site, mas você não quer realmente a bagunça e o barco com um design. Você pode adicioná-los como um colaborativo. Então, em Login para alterar o texto MGS, coisas assim, ou criar novas páginas e seu CMS. Não preciso. Por que rebelar SEO? Portanto, ainda não configuramos o Google Analytics ou o console do site. Mas quando você vai fazer isso, para fazer qualquer um de nós, você terá que adicionar um plano de site. Você também terá que verificar seu site com Google e são coisas SQL incríveis que você tem que fazer, sobre as quais falarei em um segundo. E então fazendas quando e-mails de janeiro são ou se você quer saber quando essas fazendas, em termos de receber notificações, você apenas coloca todas as informações aqui e segue através de você. Então temos fontes. Nós já meio que tocamos em fontes e conectá-las com a Adobe e fazer tudo isso. Então você está bem os backups deles. Se você alguma vez cometer grandes erros em seu site ou você perder coisas, você pode coletar ou retornar a um dos backups aqui. A coisa boa sobre o Webflow é que ele faz backups automaticamente. Então isso é um benefício real e integrações. Então você vai querer se integrar com o Google Analytics aqui. Se você, Google tem Google Maps, Facebook pixel nos dois mais importantes aqui são Facebook pixel no Google Analytics. Como realmente importante, você prepara-os. E o terceiro como custos de pesquisa, nós também queremos chegar a esse eu. E então temos código personalizado. Depende do que você quer fazer, qual é o seu pixel do Google Analytics e do Facebook? Você pode adicionar o código personalizado aqui. Ou, alternativamente, você pode usar o Google ou, alternativamente, você pode usar o Google Tag Manager, que também é uma ótima maneira de vender essas coisas. Mas esses assuntos realmente divertido para o castelo, tipo otimização site, SEO. E é isso. Isso é o que você precisa saber e aqui. E isso só vai dar a você uma visão geral das configurações e as coisas que eles precisam fazer para que o site esteja pronto para ser lançado. Então, com isso dito, eu só quero fazer um último vídeo que cobrimos nas verificações finais que eu costumo fazer em qualquer site que eu estou construindo. Então, sim, vamos saltar para isso agora mesmo. 24. Verificação final: Tudo bem, então a última coisa que você quer fazer antes de levar seu site ao vivo é apenas algumas verificações finais nele. Então, as coisas que queremos fazer aqui, queremos verificar. Vamos verificar a cópia, ter certeza de que não há erros gramaticais. Queremos verificar os links em todos os botões e ter certeza de que todos vão para os lugares certos. E já verificamos a fazenda. Então isso é uma coisa fora do caminho. E a última coisa que queremos fazer é checar a cabeça e as estruturas. E então a coisa que nos ajudará com isso, como falamos antes, o Webflow outro verificador é útil. E uma coisa que ainda não tocamos é realçar aqui como a falta de texto alternativo nas imagens. Isso é outra coisa que você realmente quer verificar. O texto Alt é bastante importante para SEO. Então, para adicionar texto alternativo, ela vai para qualquer imagem que você está olhando. Clique no pequeno ícone de engrenagem e, em seguida, você adicionará seu texto alt lá para o que quer que seja. Assim, para um fim para verificar seus títulos, basta ir para as configurações em qualquer cabeçalho que você clicar e certificar-se de que ele está marcado como o correto. Faça isso por todo o site. E quando estiveres pronto para ir, tudo o que tens de fazer é lançar. Então você pode ver aqui que estes não foram ligados corretamente. Então, vou mandar estes dois. Agora. Vou enviar isto para o contacto. E você vai fazer isso se todo o site e certifique-se de que você não perdeu nada. E é sempre melhor fazer isso no final de qualquer projeto e, em seguida, o Azure passando por ele porque você está curvado para bagunçar algo, porque você está se concentrando em tantas coisas diferentes ao mesmo tempo. Assim, tantas batalhas no final. E sim, eu só vou te mostrar para esta página, mas quando você tiver feito isso, você estará pronto para fazer o que sua esposa disser. E essa é uma das últimas coisas que recomendo que escreva. Então foi um prazer ensinar este curso. E espero vê-lo no próximo. Então, obrigado. 25. Próximos passos: Muito bem, muito obrigado por assistir a este curso. Espero que tenha ganhado muito com isso. O baú como Webflow, como uma plataforma incrivelmente poderosa é o que usamos internamente para todo o trabalho que fizemos para os clientes. Quero dizer, é realmente uma mudança de jogo quando se trata de web design. E se você quiser continuar melhorando suas escalas de host web, temos cursos intermediários e avançados sobre ambiente Academy. Se você visitar os recursos do nosso site, você será capaz de finanças ver Academy. Eu recomendo vivamente verificar que tem acessível. Você começa a fazer parte de um grupo com outras pessoas como você olha para muitas das mesmas coisas. E é realmente uma mudança de jogo para as pessoas que procuram desenvolver, mas habilidades de marketing digital em geral. Mas de qualquer forma, muito obrigado por assistir este curso novamente. E verei no próximo.