Design estratégico de sites Bootcamp™: usando o Webflow para criar belos sites orientados por resultados

1. Bem-vindo ao design estratégico do site: O que exatamente você aprenderá neste curso? Agora, este curso não apenas ensinará como criar um site, mas também ensinará como criar um site, que ajudará estrategicamente sua empresa a crescer A verdade é que ter um site com boa aparência não trará resultados. O que você precisa é de um site bonito, mas que também possa ser estrategicamente focado nos objetivos do seu negócio Agora, se você tem zero experiência em design de sites ou até mesmo um pouco de experiência em design de sites, este curso ajudará você a entender o design de sites em um nível que 0,1% dos designers de sites não entendem em todo o planeta Posso dizer isso com confiança porque sei que muitos designers de sites sabem como criar um site Eles não sabem necessariamente por que fazem o que fazem. Neste curso, mostrarei como criar um site que possa gerar os resultados de que você precisa. Vamos aprender como os visitantes do seu site pensam quando realmente acessam seu site, como criar confiança com os visitantes do site como orientá-los a realizar determinadas ações necessárias para atingir seus objetivos comerciais. E você poderá criar o site dos seus sonhos simplesmente seguindo o processo passo a passo deste curso. Não há necessidade de pagar milhares por um desenvolvedor de sites caro. A melhor parte é que você não precisa entender nada sobre codificação, desenvolvimento de sites, estratégia ou design, pois podemos ajudá-lo a criar o site perfeito para sua empresa em aulas agradáveis, pequenas e fáceis de entender Além disso, ao investir neste curso, você terá acesso a um modelo premium, que pode ser usado para criar seu site com mais rapidez e torná-lo profissional e confiável em minutos Então, tudo o que você precisa fazer é dedicar algum tempo para que o site pareça pessoal para sua marca e empresa, e você terá o site perfeito pronto para começar a atrair clientes Nosso único foco neste curso foi tornar o mais fácil e simples possível para qualquer empreendedor ou fundador em qualquer lugar do mundo criar um site perfeito para sua marca em uma fração do tempo e por uma fração do custo. Em vez de gastar milhares desenvolver um site realmente excelente, você pode aprender como fazer isso sozinho, criá-lo para sua empresa e alterá-lo à medida que tempo passa e à medida que sua empresa cresce. Como fundador ou empreendedor, você precisa entender como seu site pode crescer com sua empresa após o lançamento. Depois de realmente ajudarmos você a lançar seu site e a chegar à página principal do Google, que aparece um pouco mais tarde no curso, também ensinaremos como melhorar seu site ao longo do tempo, à medida que sua empresa se desenvolve. Além disso, porque você investiu neste curso e confiou em nós para orientá-lo nesse processo, daremos mais alguns presentes. Um pouco mais adiante no curso, mostraremos como obter suporte premium gratuito para seu site. Isso significa que, se algo der errado com seu site a qualquer momento, 24 horas por dia, 7 dias por semana, você terá alguém para ajudá-lo a colocar as coisas em funcionamento o mais rápido possível Isso também inclui qualquer dúvida que você tenha se quiser fazer alguma correção sozinho. É basicamente como ter um assistente gratuito disponível para ajudá-lo com seu site dia após noite, 24 horas por dia, 7 Também darei a você acesso exclusivo ao nosso pacote premium de ícones e gráficos. Esses ícones e gráficos são personalizados por nossa equipe e estão disponíveis apenas para estudantes deste curso. Use esses ícones e gráficos axim para sites de clientes nos quais estamos trabalhando no momento, custando até E se isso não bastasse, também mostraremos a cada aluno que investe neste curso como instalar um software que pode ajudá-lo a rastrear movimentos do mouse de cada visitante que visita Isso pode ajudar você a ver onde as pessoas estão clicando, o que as pessoas não estão clicando, para melhorar seu site ao longo do tempo para otimizar a conversão e obter o melhor resultado. Agora, eu sei que você deve estar animado para começar e eu também. Então, vamos mergulhar no curso e nos vemos na próxima lição. 2. Por que o Webflow é o melhor?: Então, o que é web floor e por que é tão especial? Bem, como tenho certeza de que você sabe, existem muitos criadores de sites diferentes on-line No entanto, existem algumas grandes diferenças entre outros criadores de sites e o web floor, e o que o web floor tem a oferecer Agora, existem muitas razões pelas quais o web floor é a plataforma de criação de sites que mais cresce no planeta. E apenas uma das razões pelas quais tantas pessoas em todo o mundo estão deixando outros criadores de sites mais antigos como WordPress, Wicks e Square, é porque, no web floor, você pode literalmente criar sites incríveis que são focados em resultados e podem ajudá-lo a realmente expandir seus negócios em uma fração do tempo sem código e experiência, e sem nenhum custo Inicialmente, você pode criar todo o seu site gratuitamente, sem nenhum código e sem experiência em design, e criar sites impressionantes , profissionais e confiáveis para sua E essa não é a única razão pela qual tantos fundadores e empreendedores estão deixando outras plataformas de criação de sites, como WordPress, Shopper fi, Wicks e Squarespace, para realmente obter todos os benefícios do web floor e o que o web floor Se você já usou alguma das plataformas de criação de sites, verá que elas são bastante restritivas em relação ao que você pode criar No entanto, o web floor é muito, muito diferente. O Web floor oferece total liberdade para criar o que quiser até o pixel exato. E a melhor parte é que você não faz uma única linha de código porque o web floor faz isso automaticamente para você usando EI. E como consultor de desenvolvimento de marca, eu crio pessoalmente sites para mim e para meus clientes, todos queridos, e cada um dos meus sites que eu possuo pessoalmente está na plataforma web floor. Web floor me permitiu criar sites personalizados sem que uma única linha de código fosse feita por mim mesmo. O que realmente ajudou meu negócio a crescer. Inicialmente, você pode criar um site confiável, exatamente como você deseja, que pareça profissional em pouco tempo Um dos melhores benefícios que eu adoro é o fato de que o EI por trás fluxo da web é tão inteligente quando está escrevendo o código para seu site nos bastidores que, na verdade, faz isso de uma forma que ajuda seu site a carregar mais rápido e criar uma melhor experiência de usuário para os visitantes do site. Também garante que seu site seja totalmente responsivo, independentemente dispositivo em que seus usuários estejam visualizando seu site. E se isso não bastasse, o que realmente me convenceu no web floor há muitos anos foi o fato de que seu suporte premium é diferente de tudo que eu já experimentei em qualquer empresa. Na verdade, eu me lembro de quase deletar meu site inteiro. Mas, felizmente, como o web floor literalmente me respondeu 30 minutos depois de eu enviar um e-mail para eles, eles conseguiram salvar o site e tudo ficou Agora, na próxima lição deste curso, mostrarei como você pode obter suporte premium gratuito com o web floor para que eles possam entrar em contato com você mais cedo e mais rápido para garantir que, se você tiver alguma dúvida, eles respondam primeiro como VIP Também vou garantir que você tenha acesso a todos os nossos modelos para garantir que você possa criar seu site com mais rapidez, nosso pacote premium de ícones e gráficos e também ao software de rastreamento de comportamento para ajudá-lo a melhorar seu site ao longo do tempo. Mas de qualquer forma, vou falar sobre isso na próxima lição até lá. Muito obrigado pelo seu tempo e nos vemos na próxima. 3. Receba seus presentes VIP do Webflow gratuitos: Então, como você obtém suporte premium gratuito para seu site, modelos, ícones e gráficos de sites, além de um software comportamental para que você possa acompanhar exatamente o que seus usuários estão fazendo em seu site o tempo todo. Agora, criamos esse pacote gratuito para cada aluno que investiu em aprender a usar o web floor, porque queremos que você tenha a melhor experiência possível na plataforma Portanto, a Webflow está mais do que feliz em nos ajudar a reunir isso para oferecer a melhor experiência possível Então, para receber esses presentes totalmente gratuitos, tudo o que você precisa fazer é acessar a Lancaster Academy of Design brand.com Forward Slash of Design brand.com Forward UM VIP. Também deixarei um link na chamada para que você possa clicar nele para acessar diretamente a página com muita facilidade. Agora, ao visitar a página, você verá algo parecido com isso. Crie seu site melhor e mais rápido. E se você rolar para baixo, verá que a primeira etapa é clicar abaixo e se inscrever em um fluxo na web para obter suporte premium gratuito. Agora, só para ser totalmente transparente, se você realmente copiar o link neste botão específico e pesquisar o que é, é essencialmente um link de suporte VIP gratuito que configuramos com o Webflow para garantir que você esteja tomando cuidado ao usar a plataforma E ao clicar nesse botão, você será direcionado diretamente para a página inicial do Webflow para se inscrever e começar a criar seu site, que será abordado um pouco mais tarde no curso Agora, depois de acessar a página inicial do Webflow, é muito fácil se inscrever Mas se você tiver algum problema, por favor, me avise, entre em contato e eu serei o mais solidário possível Então, depois de realmente se inscrever e informar seu endereço de e-mail, lembre-se desse endereço de e-mail porque você precisará dele na segunda etapa do processo Agora, é muito importante que o endereço de e-mail com o qual você se inscreveu no Webflow O endereço de e-mail que você usa na segunda etapa do processo seja o mesmo A razão para isso é muito simples. Basicamente, quando enviamos seu modelo de site gratuito, vamos enviá-lo diretamente para sua conta de fluxo na web. Se você não usar os mesmos endereços de e-mail nas duas etapas , o modelo do site poderá acabar em uma conta diferente e talvez você não consiga usá-lo. Também enviaremos seus ícones e pacotes gráficos para lá e também enviaremos o link do software comportamental para o endereço de e-mail que você adicionar na etapa dois. E se você é freelancer e está criando sites para clientes , sinta-se à vontade para usar este link toda vez que inscrever um novo cliente ou cliente, e você pode não apenas obter suporte VIP prioritário gratuito, mas também obter um modelo de site gratuito para que você possa criar seu site mais rapidamente. Lembre-se de garantir que o cliente use o mesmo e-mail para se inscrever no fluxo da web e também na segunda etapa do processo, para possamos verificá-lo e garantir que o modelo do seu site esteja na conta correta. Vamos ver, por exemplo, eu já me inscrevi no Webflow com meu endereço de e-mail e, em seguida, queria adicionar meu outro endereço de e-mail aqui e receber brindes, e receber brindes, correspondendo ao e-mail do Webflow Perfeito. Portanto, assim que recebermos seu e-mail, entraremos em contato com você em 24 horas com seu modelo, seu ícone e pasta gráfica, além do link para baixar seu software comportamental. Absolutamente grátis. Nenhuma pergunta foi feita. 4. $ 500 vs $ 10.000 site: A verdade é que, se você tiver algum preço de agências ou freelancers, verá que pode pagar de $500 a $10.000 por Agora, para ser totalmente honesto, um site de $500 e um site $10.000 podem ser muito parecidos Então, por que alguém pagaria mais $9.500 por um site de $10.000 Se eles conseguirem algo muito parecido por apenas $500 Bem, deixe-me dar uma ideia da minha experiência e de como passei de cobrar $500 por um site para $10.000 em alguns anos Agora, embora dois sites possam parecer muito semelhantes, os resultados reais que esses dois sites produzem podem ser muito diferentes. E isso se deve basicamente à estrutura do site, cópia nos sites, à forma como o site real orienta os usuários a realizar determinadas ações. Por exemplo, pode haver um site que pareça ótimo custe $500 para ser feito por um freelancer, mas a realidade é que são necessárias 1.000 pessoas para acessar esse site para realmente conseguir um cliente convertido que paga por algo da marca Agora, por outro lado, você poderia ter um site que tenha sido estrategicamente desenvolvido e organizado de forma a converter mais tráfego em clientes pagantes, e esse site leva apenas 50 clientes para converter um cliente. Agora, como você pode ver, 51.000 é muito diferente Essa diferença não se deve apenas à aparência do site, mas à forma como o site está organizado e como você está persuadindo e pressionando suavemente os visitantes do site a realizarem determinadas ações dentro Essa foi uma grande curva de aprendizado para mim há cerca de oito anos. Quando comecei a entender realmente quais eram as diferenças entre um site realmente desenvolvido de acordo com os objetivos da empresa e um site que parecia muito bom. Agora, isso não significa que um site estratégico não tenha uma boa aparência, mas basicamente significa que não deve ser a prioridade. Pode parecer bom, mas não se trata apenas da aparência do site. Então, como acabamos de abordar, a primeira diferença principal entre um site de $10.000 e um site de $500 é em última análise, ser focado em objetivos O site de $500 pode parecer bom e até agradável de usar, mas o site de $10.000 será estrategicamente projetado para realmente ajudar você a converter mais tráfego em Agora, a segunda razão pela qual tudo se resume às calorias. E por calorias, não quero dizer a comida que estamos comendo, mas quero dizer calorias mentais. Então, quando temos um site, o que realmente facilita a obtenção do resultado que queremos, usamos menos energia mental, que nos deixa menos propensos a ter fadiga mental. Por exemplo, se você já acessou um site e ele foi extremamente complicado de usar, e você está usando muita e muita energia para tentar encontrar o resultado desejado. E então você acaba ficando entediado e simplesmente sai do site e encontra uma alternativa diferente Isso é chamado de fadiga mental. E, em última análise, isso se resume ao usarmos muita energia e calorias em nossa mente para obter o resultado que queremos. Agora, enquanto um site de $500 pode tornar mais complicado para a pessoa que visita o site conseguir o que precisa, um site de $10.000 simplificará esse processo para ajudá-la a chegar aonde deseja com Tudo isso se resume à estruturação adequada do seu site, o que abordaremos um pouco mais adiante no curso. Em última análise, queremos levar o usuário de onde ele está para onde ele precisa estar da forma mais rápida e eficiente possível. Como você pode imaginar nos dois primeiros pontos, o terceiro benefício de por que um site de $10.000 e um site de $500 são tão diferentes se deve simplesmente aos lucros que ele pode Obviamente, se você estiver convertendo um a cada 50 usuários em seu site vez de cada um e 1.000, isso fará uma diferença significativa na quantidade de dinheiro que você pode gerar a cada mês Também custará menos adquirir clientes e também permitirá que você crie mais confiança com os clientes para que você possa cobrar mais no futuro. Então, apenas para resumir as três principais diferenças entre um site de $10.000 e um site de $500, tudo o que você aprenderá a usar neste mesmo curso nas próximas aulas garantir que seu site esteja estrategicamente focado nos objetivos de sua empresa Se isso ainda não faz todo o sentido , não se preocupe. Nós vamos cobrir tudo em breve. Em segundo lugar, um site de $10.000 será projetado para que seus usuários usem menos energia mental Permitir que você obtenha uma melhor taxa de conversão em seu site e, finalmente, ganhe mais dinheiro, que nos leva a obter três benefícios, que são obter mais lucros e receitas Sempre penso nos meus sites como o melhor vendedor do meu negócio Cada um dos sites que tenho para cada um dos meus negócios deve representar essa marca específica da melhor maneira possível. Isso deve nos dar a melhor chance possível de converter alguém que está apenas visitando o site em um cliente pagante Podemos fazer isso, e isso realmente ajudará sua marca e sua empresa a crescerem exponencialmente E a melhor parte é que, quando você realmente se esforça para criar o site e acertá-lo e, obviamente , fazendo tudo corretamente, o que abordaremos neste curso, você nunca mais precisará tocar no site. Assim, você sempre tem esse ativo digital e um funcionário quase trabalhando duro para você todos os anos para gerar mais dinheiro e vendas. Agora, assim como mencionei antes, abordaremos todas as etapas para ajudá-lo a aprender a criar sites, como mencionei nesta lição. Então, sem mais delongas, vamos mergulhar na próxima lição do curso. Te vejo. 5. Como criar uma experiência de usuário perfeita: Então, como você cria uma experiência de usuário perfeita em seu site Bem, o primeiro passo é entender a diferença entre UX e UI. Então, o que é UI? Bem, a interface do usuário é a interação entre humano e computador. Basicamente, é como você é usuário e o site interagem entre si para criar uma experiência geral, que nos leva ao U X, que significa experiência do usuário. Agora, a experiência do usuário é como o site é construído visualmente. Basicamente, tudo isso se concentra em como o usuário sente que está realmente interagindo com seu site. Agora, isso também é relevante para software e outras plataformas digitais. Mas, por enquanto, estamos nos concentrando apenas em seu site para garantir que você possa criar a experiência mais perfeita para os visitantes do seu site Então, quais são as principais diferenças entre UI e UX? Agora, a primeira diferença principal é o foco do escopo. Agora, quando a UI se concentra nos botões e em outras coisas com as quais o usuário real interagirá, UX é um pouco diferente. A UX, por outro lado, não se concentra em botões ou elementos específicos, mas mais ainda na percepção geral e na experiência geral do usuário no site A segunda diferença principal são as responsabilidades. Onde a UY se concentra na aparência do site , na cor das coisas e em todo esse tipo de coisa? UX está focada em como o cliente está realmente se sentindo e em sua jornada real para ir de onde está precisa estar para que a marca alcance seus objetivos. Então, só para resumir, a interface do usuário está focada na aparência das coisas, e a experiência do usuário está focada em como o cliente ou usuário se sente quando está visitando aquele site específico Então, quais são os benefícios da UI e da UX? Bem, a boa notícia é que você não precisa ser um especialista em UI e UX para realmente criar um ótimo site. E a razão para isso é que já criamos modelos que você pode usar para criar seu site para garantir que todas as principais regras básicas já estejam em vigor Isso significa que não importa o que você altere no modelo, ele sempre será baseado nos principais fundamentos e nas melhores práticas de UI e UX Então, em última análise, desde que você não exclua completamente o modelo, você não pode ir muito longe. Quais são os principais benefícios de usar UI e UX e realmente pensar nisso durante todo o processo de criação do seu site. Bem, o primeiro é o aumento da satisfação do usuário. Essencialmente, significa que, quando alguém acessa seu site, é mais provável que atinja os objetivos que você estabeleceu para o seu site, o que acontecerá um pouco mais tarde no curso, e também terá uma experiência mais positiva. Portanto, é mais provável que eles revisitem o site no futuro, o que me leva ao próximo benefício, que é o aumento do engajamento do usuário Basicamente, isso significa que as pessoas terão maior probabilidade de passar mais tempo no site, aumentando sua classificação no Google e, basicamente, colocando-o na primeira página muito mais cedo Não se preocupe com SEO ainda. Falaremos sobre isso mais tarde no curso, porque é uma das últimas coisas que você precisa implementar antes de realmente lançar seu site. Mas lembre-se disso. Quanto mais tempo alguém passa nas páginas do seu site, a probabilidade de o Google confiar em você E confie em mim, o Google sabe de tudo. Então, se pudermos usar a interface do usuário e a experiência do usuário para realmente ajudá-lo a criar um site, isso acabará recebendo mais atenção dos usuários. Portanto, o Google Sess é mais confiável. É mais provável que seja encontrado na primeira página do Google em um futuro próximo. Um dos maiores benefícios de usar a interface do usuário e a experiência do usuário durante o desenvolvimento seu site e realmente pensar nisso estrategicamente é o fato de economizar muito tempo e dinheiro no desenvolvimento seu site e, na verdade, garantir que você obtenha os melhores resultados possíveis muito mais cedo Não há nada pior do que desenvolver um site e fazer várias mudanças diferentes. Isso vai desperdiçar muito tempo e se você estiver pagando para alguém fazer isso por você, também custará muito dinheiro. Garantir que seu site seja feito perfeitamente na primeira vez evitará muitos problemas a longo prazo Agora, uma das principais coisas a ter em mente do ponto de vista da UX e da UI é manter as coisas claras e simples E a razão pela qual eu continuo mencionando fadiga mental e calorias mentais é porque queremos que o usuário use a menor quantidade possível de calorias mentais enquanto navega em seu site Eles estarão mais propensos a passar mais tempo no seu site. Eles terão uma experiência mais positiva. E, por fim, eles realmente concluirão o objetivo que você estabeleceu para o seu site para ajudar sua empresa a crescer Agora, outro papel fundamental para uma ótima UX de UI é a consistência. Um dos exemplos mais simples disso é o apelo à ação. Deve ter uma cor de call to action consistente em todo o seu site. Isso significa que, quando você está tentando fazer com que o usuário uma determinada ação ou persuadi-lo a acessar uma determinada página, esses botões específicos precisam ter exatamente a mesma cor e se destacar, e isso é essencialmente algo muito simples que você pode fazer em questão de segundos e pode realmente afetar o desempenho do seu site Em última análise, estamos treinando o usuário para entender isso. Essa cor específica leva à ação. Então, você quer se concentrar nessa cor específica em todo o site. Basicamente, significa que sempre que eles virem um botão nessa cor específica, ele o levará diretamente para aquele botão específico e será mais provável que eles o pressionem. E antes de terminar esta lição, quero dar um exemplo do que a UI e a UX podem fazer para realmente aprimorar a experiência do usuário. Então, se mergulharmos neste exemplo da H&M, onde eles basicamente têm um recurso de navegação de breadcrumb em seu site, você pode realmente ver como isso pode ser útil Por exemplo, se alguém está procurando uma toalha e depois vai para a praia com toalhas de praia de algodão, mas depois quer voltar às toalhas para conferir outras opções. Em vez de voltar atrás, ou talvez começar a jornada novamente, tudo o que eles precisam fazer é clicar nas toalhas e voltar direto para a página exata de que precisam , sem problemas ou confusões Em última análise, é disso que se trata a UI e a UX. Ele mantém tudo o mais simples e claro possível para o usuário. Novamente, você não precisa ser um especialista em UI ou UX porque já configuramos as páginas nos modelos para tornar isso muito fácil para você. Mas a razão pela qual quero compartilhar isso com você é porque se você vai realmente criar o site, precisa procurar oportunidades para tornar o processo e a jornada reais os mais fáceis e simples possíveis para as pessoas que visitam sua página da web. De qualquer forma, espero que você tenha achado esta lição útil. Muito obrigado pelo seu tempo, e nos vemos na próxima lição. 6. Exemplos de site - edição de comércio eletrônico: Ok, então agora, tenho certeza de que você está pronto para ver ótimos exemplos de sites e também entender por que eles são tão bons. Agora, os sites que estou prestes a mostrar são para empresas que realmente vendem produtos de comércio eletrônico. Então, na verdade, eles estão vendendo produtos on-line e todos usam uma abordagem muito semelhante para fazer isso. E essa é exatamente a mesma abordagem que vou ensinar a você no curso. Assim, você entende exatamente como posicionar seu produto ou sua marca como desejável e, em última análise, capaz de satisfazer as necessidades de seus clientes. Agora, o primeiro site de marcas em que vamos mergulhar é ninguém menos que Tesla Agora, como você pode ver no site da Tesla, ele começa com um lindo vídeo do produto E você pode ver que eles estão exibindo o produto em vários ambientes e ambientes e situações diferentes. E a razão pela qual eles estão fazendo isso é mostrar para o cliente Você pode integrar este produto em sua vida sem problemas. Vamos rolar um pouco mais para baixo na página inicial e ver o que mais podemos encontrar. Agora, se rolarmos um pouco para baixo, você verá uma bela fotografia do produto. Novamente, aumentar a conveniência, o que é muito importante, especialmente quando se trata de comércio eletrônico. E se continuarmos navegando, você poderá ver mais modelos e mais ofertas da marca Esses são essencialmente os diferentes veículos que a Tesla pode oferecer no momento E eles mantêm as coisas super simples para que você possa encontrar o carro que melhor atende às suas necessidades pessoais e, em seguida, clicar nele para saber um pouco mais. Agora, uma coisa que é muito importante observar é o fato de que essas imagens são de altíssima qualidade. Essa é, em última análise, uma das maiores lições quando se trata de comércio eletrônico. Você pode literalmente vender duas, três vezes ou talvez até dez vezes mais produtos simplesmente certificando-se de que a fotografia do produto seja perfeita. Nunca se sinta mal por pagar por fotografias de produtos de boa qualidade. Porque quanto melhor a fotografia do produto, mais desejável será para o cliente que realmente o visualiza no site, e isso não apenas aumentará a probabilidade de comprar, mas também aumentará a probabilidade de ele estar disposto a pagar mais por seu produto ou serviço, basicamente, aumentando a lucratividade instantaneamente Vamos descer um pouco mais para ver o que mais podemos encontrar. Agora, o site da Tesla parece ser extremamente focado visualmente, o que, novamente, é muito importante para sites de comércio eletrônico, mas você não vê muitas informações nas páginas reais Na verdade, ele se concentra apenas nas imagens reais do produto em si e nas soluções, tornando muito fácil para o cliente encontrar a próxima página sobre onde ele precisa estar Então, por exemplo, se quisermos dar uma olhada nos diferentes veículos e basicamente aprender mais sobre o modelo S, somos levados a uma página de vendas onde podemos aprender mais sobre o carro e em última análise, conhecer suas características e benefícios. Agora, ter uma página de vendas separada para cada produto que você vende é muito importante porque realmente permite que você faça com os imigrantes se aprofundem no valor e no valor que seu produto pode oferecer ao seu público-alvo. E, como você pode ver, mesmo na página de vendas, ele é extremamente focado visualmente. Portanto, a Tesla não está realmente convencendo você dos benefícios e recursos reais neste momento Eles ainda estão te convencendo da sensualidade do carro. Em última análise, porque eles sabem disso, você está comprando um teste por causa do design do carro, e não necessariamente porque ele tem mais espaço no porta-malas, ou mesmo por causa da quilometragem ou da natureza elétrica do Você o está comprando porque é um movimento, provavelmente por causa de Elon Musk, para ser totalmente honesto, e também por causa da economia, da redução de impostos, mas, em última análise, por causa da aparência antiga, porque, no teste, os carros não se parecem nada com qualquer outro carro no mercado E convenhamos, esse carro parece extremamente sexy, está ótimo. E a melhor parte é que, quando você realmente começa a pedir o carro, fica muito fácil e fácil começar a escolher o carro que Então, se você quiser que o carro tenha uma bela e bonita cor vermelha, você pode trocar as rodas e ver exatamente como seu carro ficará em cada ângulo. Você pode escolher o interior, você pode mudar a cor do interior. Você pode literalmente ter o carro exatamente como você quer. Agora, eu sei que você pode fazer isso com praticamente qualquer tipo de carro atualmente, desde que praticamente qualquer tipo de carro atualmente, esteja disposto a pagar o dinheiro, mas é assim que a Tesla realmente mostra o carro e todos os diferentes benefícios em um formato visual Eles tornam muito fácil para o usuário, ou seja, eu e você entender o que eles estão recebendo. E, por exemplo, você se lembra de uma aula anterior em que comecei a falar sobre calorias mentais e fadiga mental? Pense sobre isso. A Tesla literalmente se esforçou para mostrar o recurso aprimorado de piloto automático em um formato visual para que você possa realmente entender exatamente o que possa realmente entender exatamente o o recurso de piloto automático faz sem precisar ler uma única Isso mostra literalmente o carro que você vai comprar em ação na estrada, pronto para usar o recurso aprimorado de piloto automático Então, quando se trata de realmente vender esse recurso e benefício específicos, você não está apenas lendo sobre isso. Na verdade, você está vendo isso em tempo real, o que convenhamos. Poucas empresas automobilísticas estão fazendo isso. E é isso que torna a Tesla tão especial como marca. Eles realmente adoram usar imagens bonitas para vender seus produtos Então, vamos ver como a Apple pode fazer as coisas de forma um pouco diferente. Então, como você pode ver, a Apple está muito no espírito natalino pois isso está sendo filmado em dezembro, então faltam apenas algumas semanas para o Natal, então você pode ver que eles estão bem à frente da curva Agora, se rolarmos para baixo, podemos ver novamente o produto real sendo usado em situações da vida real. Agora, eu não sei se você consegue se lembrar, ou se você tem a memória de um peixinho dourado, o que às vezes eu tenho, mas essa mesma abordagem foi usada no site Tests Eles estavam mostrando como o carro pode beneficiar o usuário, integrar-se à sua vida de maneira fácil E esse é um tema muito comum, que você verá em todos os sites de comércio que realmente entendem como vender aos clientes. Agora, se rolarmos para baixo, novamente, você verá belas imagens novamente para aumentar a atratividade E um formato muito simples de basicamente links para saber mais sobre o produto. Agora, vamos estruturar sua página inicial como uma marca de comércio eletrônico e todas essas coisas posteriormente no curso. Mas você pode ver que o único objetivo da página inicial é levá-lo às páginas de vendas de produtos específicos nos quais você possa estar interessado o mais rápido possível. E você literalmente tem todos os produtos mais populares que Apple está tentando vender bem na sua frente. Você tem a edição Titanium do iPhone 15 pro. Você tem o iPhone 15 com uma nova câmera, novo design e novo foi Essa é uma nova palavra. Eu nem sabia que isso existia, mas você tem os links para comprá-lo e também para saber mais diretamente na página de vendas. Você também tem o Macbook Pro, o AP Hods Pro, o relógio, o cartão, a negociação Você tem literalmente tudo o que precisa para acessar as páginas dos produtos mais vistos. E você pode ver que cada produto, não importa qual seja, é apresentado sem falhas, por isso fica nítido e bonito, não importa qual imagem você esteja vendo Novamente, apenas reafirmando o fato de que a fotografia, quando se trata de comércio eletrônico, é muito Portanto, não pague barato com isso. Certifique-se de investir em sua fotografia. Especialmente quando se trata de um site de comércio eletrônico. Agora, quando você realmente entra no site e nas páginas de vendas da Apple, é aí que as coisas realmente começam a ficar claras. Você vê o AirPods Pro, que é literalmente um dos produtos mais feios do mundo Você literalmente os coloca nos ouvidos, e eles são essencialmente fones de ouvido sem fio. É isso mesmo. A Apple tem essa maneira de realmente fazer com que seus produtos pareçam sexy. Agora, essa animação real é desenvolvida usando muita animação. E isso, na verdade, não é tão difícil de fazer , desde que você tenha a mídia real para fazer isso. Agora, podemos abordar isso um pouco mais tarde no curso, mas focar apenas na simplicidade das páginas de vendas da Apple. Eles nunca mostram muitas informações e mantêm as coisas super simples Afinal, eles estão literalmente vendendo fones de ouvido e os mantendo extremamente básicos. Mas mesmo percorrendo essa página em particular , estou me fazendo querer comprá-los. Está fazendo com que o produto pareça mais desejável do que necessariamente é. E, de fato, essa é uma das principais razões pelas quais acabei comprando esses fones de ouvido, porque eles pareciam muito bons no site e eu tive que ir à loja para vê-los por mim mesma. E uma vez que eu os coloquei em meus ouvidos , tive o efeito de cancelamento de ruído, que foi vendido para mim Eu precisava tê-los. Agora, não vamos ler a página inteira. Mas, como você pode ver aqui, Apple realmente se concentra novamente mostrar os benefícios do produto de forma visual, como você pode ver aqui e também aqui E isso é uma coisa muito consistente. E você verá isso no site da Tesla, site da Apple e também no próximo site que estamos vendo Eles gostam de mostrar visualmente os benefícios do produto. Novamente, voltando à fadiga mental e usando a menor quantidade possível de calorias mentais. Portanto, todos concordamos que o site da Apple parece e parece muito forte, especialmente quando eles estão vendendo um produto tão básico e chato Mas com relação a produtos chatos, quão entediantes podemos ser Bem, pensei em analisar provavelmente o produto mais chato do mundo inteiro para que pudéssemos ver como eles vendem esse produto para o público da Tarko Então, isso é o anel, e o Ring é essencialmente uma campainha de vídeo que pode ajudá-lo a ver quem está à sua porta sem nenhum esforço, e você pode monitorar as coisas no telefone e conversar com as pessoas É muito inteligente. Mas é um produto muito chato Então, como eles o vendem? Bem, vamos entrar e descobrir. Então, como você pode ver na página inicial deles, novamente, você pode ver que a página inicial deles está simplesmente mostrando todos os diferentes produtos que eles podem oferecer de uma forma muito simples e fácil de navegar Você pode acessar qualquer um de seus produtos simplesmente usando essas caixas. Agora, é claro, você também pode acessar a barra de navegação, onde também pode acessar facilmente qualquer um dos produtos aqui. Então, vamos até a câmera adesiva e ver do que se trata Ok, como você pode ver, essa página de produto em particular é muito mais conservadora do que as páginas da Apple e da Tesla Agora, o que você pode ver, porém, é que a fotografia real do produto, novamente, é realmente impressionante. Parece incrível. E você também pode ver as diferentes cores que eles têm, dos produtos, então eles têm em branco e preto. E você também pode ver que eles têm o produto novamente, mostrado em determinadas situações, e você pode ver mais disso. Então, por exemplo, você vai aqui, e você pode ver, h, tem alguém parecendo muito visível do lado de fora Você pode ver quem eles são na segurança do seu telefone, não importa onde você esteja. Ele está enviando automaticamente essa imagem para você. Então, novamente, está limitando a quantidade de fadiga mental que o usuário gasta para entender o que esse produto pode trazer para minha vida Bem, isso pode ajudá-lo a se manter seguro, não basicamente deixando você na porta quando alguém potencialmente perigoso está batendo na porta E, novamente, mostra outros benefícios, como, por exemplo, poder monitorar determinadas áreas do jardim. Você também pode ajustá-lo, então é muito fácil de ajustar e basicamente carregar. Agora, todos esses pequenos benefícios e recursos estão resumidos nesta seção muito fácil de entender E, novamente, isso serve para evitar o cansaço do cliente. Portanto, sempre pense nisso ao criar um site de comércio eletrônico, porque, em última análise, você deseja limitar a quantidade de calorias mentais que o usuário está usando. E conforme você rola mais para baixo na página, você pode ver interações reais e situações reais em que o usuário pode usar o produto. É integrá-lo à sua vida. Isso mostra que você precisa desse produto específico para manter você e sua família seguros. Há uma razão pela qual há um homem com sua esposa, um filho e uma garotinha, mostrando que, para as famílias, isso é perfeito porque ajudará a mantê-lo seguro e também a manter sua casa segura enquanto você não estiver lá, e você está realmente em um restaurante italiano comendo pizza com sua Na verdade, a Ring faz um ótimo trabalho entender exatamente por que as pessoas comprariam esse produto em particular, porque querem manter suas famílias seguras e garantir que protejam sua casa e sua família. E você pode ver como, novamente, eles estão mostrando os benefícios e as características de produto específico com essa animação específica Eles estão mostrando que você pode literalmente monitorar toda a casa, incluindo seus ativos, sendo seu carro e veículo simplesmente investindo neste produto específico Então, espero que isso lhe dê uma ideia de como você pode abordar a criação de seu site de comércio eletrônico Agora, uma coisa que você deve fazer se estiver vendo sites diferentes que estão em seu espaço, e que é semelhante ao tipo de coisa que você vai vender, é em última análise, pegar o máximo que puder de cada site, mas não copiá-lo. Então, basicamente, o que quero dizer é tente pegar as melhores partes que você gosta de cada site que encontrar e, em seguida, juntá-las e formá-las para criar um novo site que seja pessoal e exclusivo para você e para o que você faz como marca. Mas de qualquer forma, isso é apenas uma inspiração para você realmente começar. Começaremos a criar seu site em breve, portanto, nos vemos na próxima lição. Te vejo em breve. 7. Exemplos de site - edição pessoal de marca: Portanto, se você está criando um site para uma marca pessoal , ele realmente adotará uma abordagem diferente da maioria dos outros sites existentes. O motivo é que marcas pessoais e sites não se resumem apenas à venda de produtos. É principalmente sobre como criar sua lista de e-mail. E nesta lição, quero mostrar alguns exemplos incríveis de sites que realmente o deixam à vontade e o colocam em uma posição em que você realmente deseja fornecer seu endereço de e-mail. E vou mostrar como esses três sites, em particular, usam técnicas realmente inteligentes para, em última análise fazer com que seus dados sejam vendidos para você mais tarde. Vamos morrer primeiro com o Huberman Lab. Agora, Laboratório Huberman, se você não sabe, esse cavalheiro muito bonito, esse é Andrew Huberman. Ele é neurocientista e um podcaster muito popular. Ele participou de vários podcasts diferentes, como Joe Rogan, John Peterson e muitas Em relação ao seu site específico, ele tem muitas maneiras diferentes de capturar seu endereço de e-mail. Mas se você pode ver aqui, o apelo à ação dele, e este é um CTA aqui, um apelo à ação para fazer você agir Está bem? Agora, quando você clica nesse botão específico aqui, leva você a esse pequeno pop-up. Quem sabia disso? Tem um pequeno vídeo dizendo quão bom é esse item que você precisa, quanto isso vai impactar sua vida. E então ele te dá uma pequena caixa aqui para da da no seu endereço de e-mail. Os sites para marcas pessoais tudo a ver com geração de leads, então você pode vender para o mesmo cliente repetidamente para nutri-lo como um lead Agora, vamos nos aprofundar um pouco mais no que é esse site. Agora, há muita construção de confiança. Então, em última análise, ele deu máximo de valor possível para posicioná-lo, tem uma autoridade dentro desse espaço específico. E se você rolar para baixo, é literalmente tudo sobre suas áreas específicas de especialização. Então, tudo se resume a criar o máximo de valor possível. Ele tem um boletim informativo que, novamente, é sobre geração de leads. Ele vai te enviar informações, se posicionar como uma autoridade. E então, quando chegar a hora certa, ele talvez tenha um produto ou algo que queira vender para você ou talvez um patrocinador relevante para o que ele está fazendo, queira vender para você Ele pode receber uma comissão por cada venda gerada. Vamos mergulhar em seus eventos. Ele está vendendo eventos, por exemplo. Você sabe, ele está falando. Assim, ele pode realmente vender ingressos para seus eventos, falando exatamente sobre o que ele se posicionou como uma figura de autoridade Então, por exemplo, ele está em Melbourne, Sydney, Sydney, novamente, Los Angeles, Nova York, Toronto. Então, ele está realizando esses eventos e vendendo seu tempo como organizador de eventos para , finalmente, compartilhar sua experiência nesse ambiente específico. Agora, se formos ao site da Con Mari. Isso é muito diferente. Agora, aqui é Marie Condo. Agora. Não tenho certeza se você a viu. Ela tinha uma série muito popular na Netflix, chamada Marie Condo Tidy Specialist, ou Tidy Mh Marie Condo De qualquer forma. Agora, isso é essencialmente, na verdade, não era, era chamado Spark with Joy ou algo com alegria De qualquer forma. Foi muito, muito bom, muito terapêutico, e você podia assistir e se sentir muito relaxado depois. Era uma espécie de meditação sobre esse tipo de coisa, mas também pequena o suficiente. Você pode ver aqui que o Marie Condo tem algumas maneiras diferentes de capturar seu endereço de e-mail agora Na verdade, ela tinha um pop-up, que apareceu quando eu estava entrando no site, que infelizmente perdemos Mas ela tem um curso pequeno. Ela tem uma loja. Ela também tem um boletim informativo no rodapé, o que é praticamente normal para praticamente todos os sites de marcas pessoais Mas o que Marie Condo faz de forma muito diferente é que ela realmente vende produtos e treinamento, o que é realmente único, especialmente para alguém que é essencialmente uma Ela se ramificou e criou outra marca, Con Marie, em torno de sua marca pessoal Portanto, sua marca pessoal está centrada em arrumar, ser arrumado e ser Ela basicamente criou um programa de treinamento para em última análise, vender para pessoas que querem se arrumar como ela, e não apenas ficar cansadas como ela, mas para oferecer essa arrumação como um serviço a outras pessoas em Então, eles podem literalmente ter seu próprio negócio, o que é muito impressionante, certo? , em relação ao site específico dela, você vê que é super limpo. Você pode ver que ela tem uma loja de comércio eletrônico. Ela tem muitos produtos diferentes, o que é muito, muito bom. Ela tem tantos produtos diferentes e, na verdade, é incrível quantos produtos ela tem. E você pode ver que toda ela, você sabe, produtos e toda ela, você sabe, diferentes tipos de, você sabe, roupas e livros. Você sabe, ela tem organizadores de desktop. Tudo está focado na organização e criação de um espaço realmente bonito que desperta alegria Em última análise, esse é o objetivo de toda a sua marca. Agora, se você tem dificuldades com a marca e ainda não concluiu sua marca interna, fique à vontade para conferir nosso curso estratégico de marca, que é o primeiro curso do nosso programa fique à vontade para conferir nosso curso estratégico de marca, que é o primeiro curso profissional de criação de marcas. , você terá tudo o que você precisa para realmente entender como desenvolver uma marca interna como Aqui, você terá tudo o que você precisa para realmente entender como desenvolver uma marca interna como Marie Condor e entender qual é o propósito da sua marca, sua declaração de missão, valores e declaração de visão Tudo para realmente ajudar tudo a se alinhar à sua marca Mas de qualquer forma, vamos voltar ao terceiro exemplo, que é Ghetti Agora, ichi, se você não o conhece, é como um monge, um querido monge moderno, o que Acho que ele foi a algum tipo de retiro de monges por cerca de seis meses, e então ele decidiu, não, isso não é muito bom para Eu meio que quero voltar ao mundo moderno, mas ele aprendeu algumas das lições que realmente aprendeu na vila dos Monges Em relação a este site em particular, é muito, muito semelhante. Agora, ele tinha um pop-up, que apareceu antes de eu entrar no site, que você não conseguiu ver. Mas, em última análise, ele está tentando mostrar o máximo de credibilidade e autoridade possível, mostrando-o no Ellen Show, exibindo-o na ópera, exibindo-o em filmes diferentes, mostrando seus livros E, novamente, ele está essencialmente vendendo o tribunal. Ele está te mostrando: Ok, se você quer ser como eu, você pode ser um treinador como J Shelly, certo? Você pode ser um treinador como eu. Torne-se um treinador e um monge, Modern Day Monk, se é assim que ele o chama Veja aqui que, novamente, tudo gira torno de autoridade e construção de confiança. Novamente, construir confiança é super importante. E, novamente, à medida que avançamos no site, você pode finalmente comprar coaching, cursos, livros e podcast Bem, você não precisa comprar o podcast, mas pode ouvir o podcast, mas também pode reservar Je para falar. Agora, em última análise, isso consiste em construir o máximo de credibilidade possível E quando se trata de finalmente fazer com que Je She fale em seu evento, ele está mostrando que é um especialista nesse campo específico, mostrando todas as suas experiências, todos os diferentes programas em que participou Como marca pessoal, você realmente não precisa fazer isso. Você não precisa ter ido até Ellen ou ser aprovado pela Oprah Mas você só precisa mostrar que sabe do que está falando Você pode fazer isso de várias maneiras diferentes. Você pode fazer isso com um blog. Você pode fazer isso com vídeo. Você pode fazer isso com conteúdo realmente informativo. Você pode fazer isso, você sabe, organizando workshops, seminários Todas essas coisas são essencialmente uma forma de construir autoridade. E à medida que você fica melhor e maior, talvez um dia você esteja na Ellen ou na Opera, você sabe, em uma dessas plataformas realmente grandes e reconhecíveis que você pode usar para se lançar ao estrelato. Agora, escute, cada um desses sites é muito único e diferente à sua maneira. Mas uma das coisas comuns é que eles realmente se concentram em construir autoridade em seu espaço específico. Isso é essencial se você pretende criar um site para uma marca pessoal. O que eu recomendaria é dar uma olhada em algumas das pessoas com quem você realmente se identifica Talvez eles façam algo muito parecido o tipo de coisa que você deseja oferecer no site que está criando, acessem o site e depois anotem todas as coisas que você realmente gosta nesse site em particular porque elas serão , porque elas serão muito úteis mais tarde quando estivermos criando seu site De qualquer forma, espero que esses exemplos forneçam uma visão muito boa e uma ideia como você pode abordar pessoalmente o desenvolvimento do seu site. Mais tarde no curso, quando você estiver realmente criando seu próprio site, será muito importante que você veja outros sites que realmente o inspirem. Por falar nisso, mal posso esperar para finalmente começar a criar seu site. Vamos mergulhar na próxima lição e estaremos lá em breve. Te vejo 8. Exemplos de site - vendendo a edição de serviços: Se você está tentando vender um serviço para uma pessoa ou uma empresa, por exemplo , precisa entender como os melhores sites do mundo estão fazendo isso, para poder basicamente integrar o que aprendeu ao design do seu próprio site. E é muito bom, na verdade, aprender como os grandes estão fazendo isso para que você possa aprender exatamente como abordar isso e fazer o melhor com base nos recursos que você tem. E a melhor coisa sobre o fluxo na web é que você pode literalmente criar praticamente que quiser, desde que entenda os fundamentos corretos, que abordaremos mais adiante no curso Então, vamos mergulhar no primeiro exemplo que temos, que é o Pentagrama Agora, a Pentagram é uma agência de design que, em última análise, está localizada em quatro lugares diferentes no mundo, incluindo Nova York, Londres, Austin e Berlim Então, o Pentagram já existe há um bom tempo e é muito bem-sucedido Portanto, provavelmente há algumas coisas que podemos aprender no site deles. Então, vamos até a página inicial deles e, em seguida, tentar entender exatamente o que eles estão tentando fazer com a página inicial. Então, como você pode ver aqui, eles têm um controle deslizante mostrando oito tipos diferentes de trabalho, mostrando essencialmente que existe uma agência de design Está bem? Eles não estão tentando vender nada para você. Eles estão apenas dizendo, escute, isso é o que fazemos, e se você estiver interessado, sinta-se à vontade para saber mais. Agora, se rolarmos para baixo , basicamente será mais trabalhoso. É apenas mostrar o trabalho que eles fazem para que você possa perceber se esse é o tipo de trabalho ou o tipo de estilo que você deseja ter para seu próprio negócio Agora, o que você verá é que eles realmente não têm nada sobre serviços. Portanto, você não pode aprender nada sobre os serviços deles. Você pode conferir o trabalho deles e aprender um pouco mais sobre os tipos de trabalho que eles fazem. Mas, em última análise, eles não dizem que, se você quiser que um logotipo seja feito, por exemplo, clique aqui. É simplesmente uma questão de conferir o trabalho deles e, se você gostar, suponho que basta entrar em contato pela barra e, finalmente, visitar o escritório ou enviar um e-mail para eles. Agora, quando você realmente entra nos projetos no Pentagram, é aí que as coisas ficam super interessantes, porque você pode realmente ver a experiência deles nos diferentes projetos que eles apresentam Então, por exemplo, essa é uma marca de roupas esportivas chamada Lens, onde você pode ver essencialmente o quão dinâmico é o logotipo, você pode ver o quão bonita é a paleta de cores E, basicamente, você pode realmente ter uma do tipo de marca com a qual está lidando, você pode ver que eles realmente pensaram nos diferentes detalhes e detalhes da marca real para realmente obter o melhor resultado possível Você pode ver que é muito atraente visualmente. Você pode ver que eles estão exibindo todas as cores diferentes que estão usando em todo o aplicativo, em todo o site, em toda a publicidade Eles estão exibindo muitos visuais incríveis para, em última análise, mostrar o quão boa é a marca e quão excelentes estão fazendo seu trabalho Portanto, se você fosse uma empresa de roupas esportivas e estivesse pensando em contratar a Pentagram sabe que eles podem fazer o trabalho Nem é uma pergunta, sabe? Então, este é o primeiro exemplo de uma empresa que está vendendo o serviço como, você sabe, parte de seus negócios, e está basicamente mostrando exatamente o que faz, sem deixar espaço para erros ou dúvidas Ok, agora, vimos o pentagrama e vimos como eles abordam as coisas Como uma agência menor abordaria as coisas? Então, eu queria te mostrar um dos sites da minha empresa apenas para ser totalmente transparente, para que você saiba que eu pratico o que prego Portanto, se acessarmos o site da Clementine House, você poderá ver em alguns segundos, e abordaremos isso com mais detalhes posteriormente no curso Porque isso será muito importante quando você começar a criar sua página inicial. Mas você pode ver nos primeiros segundos que sabe exatamente por que está aqui. Então, essa é uma empresa que basicamente ajuda, você sabe, as marcas a encontrar os melhores nomes para seus negócios com base no posicionamento estratégico e em muitos outros fatores. Agora, esse site específico foi projetado de forma a criar confiança desde o primeiro segundo em que você acessa o site. Então você sabe exatamente onde está, sabe exatamente por que está aqui. seguir, mostramos alguns dos logotipos e nomes que desenvolvemos ao longo dos anos Isso mostra de forma muito simples o trabalho exato que fazemos e o trabalho que fizemos no passado Então, à medida que descemos, ele realmente mostra esse lindo demônio, sem ideia de quem ele é, com um vídeo para realmente compartilhar o que fazemos como empresa e o que você pode esperar de nós como parte de sua jornada conosco Agora, você pode ver aqui que mantemos as coisas extremamente simples e fáceis de digerir porque é muito importante que, em última análise, transmitamos exatamente o que fazemos da maneira mais simples possível Temos muitos depoimentos diferentes de muitas pessoas diferentes e também temos nossos preços em nosso site Agora, algumas agências não fazem isso. Algumas agências gostam de manter as coisas bem transparentes para que possam cobrar, você sabe, as taxas que quiserem de cada cliente em particular Pessoalmente, acho que a transparência é muito importante. Sinto vontade de ser honesto o tempo todo. E acho que ser transparente com os preços é muito importante porque mostra exatamente o que você obtém por qual preço, e também significa que cada cliente que realmente o site paga exatamente o mesmo. Agora, no topo, temos outros tipos de serviços, como, por exemplo, o desenvolvimento de sites, que estamos aprendendo agora. Mas nomear é a primeira parte da jornada. É onde nos relacionamos com a maioria dos nossos clientes e, finalmente, chegamos a um ponto em que acabamos trabalhando mais com esse cliente em particular para realmente ajudá-lo a obter o melhor resultado possível. Demos uma olhada no meu site. Não quero passar muito tempo aqui porque podemos aprender muito com isso, mas quero passar para outro site, que é um pouco diferente de uma agência. Quero entrar em um site que esteja principalmente a serviço de software. Então, na verdade, ajudando você a criar sites de uma forma que envolve principalmente o comércio eletrônico. Agora, essa marca em particular, Shopify, acaba vendendo apenas a capacidade de vender produtos on-line Isso é tudo o que eles basicamente permitem que você faça. Eles basicamente permitem que você venda seu produto on-line usando uma loja online. Agora, alguns de seus modelos são bastante restritivos, e é por isso que eu geralmente uso o fluxo da web para ser totalmente honesto Mas você pode ver como eles se conectam instantaneamente com o usuário real que desejam atingir. Então, empreendedores, fundadores que querem vender um produto estão basicamente se conectando com eles, mostrando empreendedores ambiciosos e apaixonados pelo que estão fazendo, algo com o qual um fundador e empreendedor sempre se conectará Você também vê instantaneamente uma seção de construção de confiança. Agora, isso é algo que abordaremos novamente mais tarde no curso, e é muito importante que essa seção específica de confiança esteja aqui. Você verá que essa seção de confiança também é muito importante no meu site e também no seu site, porque, a menos que você seja uma grande empresa como Pentagram, que existe há mais de 30 anos, sempre valerá a pena ter uma seção de confiança porque, em última análise, você precisa criar uma confiança com novos usuários que são acessando seu site e não tendo ideia quem você é e o que faz. Agora, novamente, você pode ver aqui que eles mantêm as coisas super simples. E com valor reduzido. Não está complicando as coisas, é manter o cansaço mental o mais baixo possível, fornecer pequenos pedaços de informações e também garantir que eles usem recursos visuais para mostrar como é fácil usar mostrar como é fácil Novamente, ao rolar para baixo, você vê cada vez mais imagens, gráficos, animações, o que basicamente mostra que você pode vender qualquer coisa para qualquer pessoa com várias configurações de pagamento diferentes e, basicamente, está tentando vender a Shopify como a solução para uma e, basicamente, está tentando vender a Shopify como a solução para Shopify como a solução Agora, novamente, o site é super limpo, super minimalista, e a estrutura, embora este site possa parecer um pouco complicada, na verdade não é. Na verdade, é muito, muito simples. E cada seção deste site tem um propósito. Tem uma razão para existir. E vamos passar por tudo isso dentro do curso. Não se preocupe Você entenderá exatamente o que cada seção deste curso está fazendo. Você entenderá como pegar e aprender o máximo possível para depois integrar isso ao seu próprio site daqui para frente. Assim, você poderá ter um site tão bom , se não melhor, quanto shopify depois de fazer este curso e aprender tudo dentro dele Agora, uma das coisas mais importantes quando se trata de criar um site é, em última análise, aprender o máximo possível com os sites de que gostamos Em seguida, levar o que aprendemos para o processo de desenvolvimento do nosso site. E vamos criar seu site muito em breve no curso. Vamos passar por tudo isso muito, muito em breve. Mas eu só quero que você entenda que não se sinta mal por fazer certas aulas e pegar coisas que você gosta em determinados sites, porque tudo isso faz parte do jogo. Tudo isso faz parte de aprender o que você quer em seu site e o que não quer em seu site. E isso só vem da exploração de outras pessoas, incluindo sua concorrência, para criar um site que você acha representa melhor você e sua marca. De qualquer forma, mal posso esperar para começar a realmente criar seu site e entender os fundamentos do design de sites em breve no curso Então, nos vemos na próxima lição. Por favor. 9. Como aumentar sua marca com o design do site: Por que o desenvolvimento de sites com foco objetivo é importante? Bem, a pergunta que você pode estar se perguntando é: o que é desenvolvimento de sites com foco objetivo? Bem, na verdade parece muito mais complexo do que realmente é. É muito simples. E a razão pela qual digo isso de forma simples é porque acho que cada empresa deve ter, no máximo, apenas dois objetivos que eles estão tentando alcançar com seu site. Então, deixe-me dar alguns exemplos dos tipos de objetivos que os sites comuns teriam. Agora, obviamente, tudo depende do tipo de site que você está realmente construindo. Por exemplo, se uma empresa é uma marca de comércio eletrônico, e seu objetivo é vender máximo de produtos pelo maior preço possível. E onde esse pode ser seu objetivo principal, um objetivo secundário pode ser capturar número possível de leads e e-mails, porque isso leva ao primeiro objetivo, que é vender produtos para eles mais tarde Agora, se alguém está construindo uma marca pessoal e criando um site para essa marca pessoal, então sim, é claro, você ainda pode vender produtos como livros e produtos digitais, até mesmo cursos ou coaching Também vou querer aumentar sua lista de e-mail o máximo possível. Porque com uma lista de e-mail maior, mais influência você tem. Com mais influência, você também pode aumentar seu número de seguidores, o que acaba criando mais autoridade, o que ajuda você a expandir sua marca pessoal mais rapidamente. Portanto, para um site de marca pessoal, pode ser que eles queiram aumentar sua lista de e-mail e talvez vender alguns produtos como resultado. Então, para um site focado em marca pessoal. Isso se concentrará em aumentar sua lista de e-mail o máximo possível, para que você possa vender produtos para eles mais tarde e também no objetivo secundário de vender produtos nesse meio tempo Então, se você está vendendo algum tipo de produto ou serviço digitalmente, em última análise, seus principais objetivos serão vender o produto ou serviço antecipadamente ou criar algum tipo de agendamento ou algum tipo de workshop ou seminário para que você possa vender o produto ou serviço pessoalmente para obter o máximo de vendas possível Por exemplo, na minha agência de desenvolvimento de marca, faço com que o cliente responda a algumas perguntas rápidas e, em seguida, forneço a ele um sistema de agendamento de consultas, qual eles podem realmente agendar uma ligação comigo para ter um bate-papo de 15 minutos para ver se somos a pessoa certa um para o outro. Em seguida, isso leva a uma chamada de vendas qual posso basicamente apresentar nossos produtos e serviços para ajudá-los a obter a solução de que precisam. Agora, eu realmente quero dar uma olhada em alguns sites diferentes que podem fornecer uma visão sobre os diferentes objetivos que cada site está tentando alcançar, apenas para que você entenda exatamente como encontrar os objetivos de seu site específico. Então, a pergunta que você pode estar fazendo é: como faço para encontrar o objetivo do meu site? Bem, quero compartilhar com você alguns exemplos de sites de setores completamente diferentes para que você possa entender como diferentes empresas abordam busca de objetivos para seus sites. E depois de encontrar o objetivo do seu site e o que você realmente deseja que o site faça por você como um trabalho e uma responsabilidade, isso tornará o processo de design do site muito mais simples e fácil Então, por exemplo, se mergulharmos no site da Gym Shark, que é a empresa de comércio eletrônico no Reino Unido que vende roupas de ginástica, leggings e todo esse tipo de coisa, você pode ver que eles têm objetivos extremamente diretos que é a empresa de comércio eletrônico no Reino Unido que vende roupas de ginástica, leggings e todo esse tipo de coisa, você pode ver que eles têm objetivos extremamente diretos. Eles querem começar a direcionar as diferentes pessoas em sua página inicial a categoria feminina ou masculina Então você pode clicar aqui para ir ao Men's, por exemplo, que nos leva a todos os produtos voltados para homens. Portanto, é bastante óbvio quais são os objetivos dessa empresa. Os objetivos são fazer com que os visitantes do site acessem páginas relevantes para que possam comprar produtos o mais rápido possível. Vamos dar uma olhada em outra empresa de comércio eletrônico apenas para transmitir essa mensagem. Então, se formos ao site da Oak Monk, que é uma marca muito legal com sede na USC, eu acredito, e eles vendem alguns produtos muito legais, você pode ver aqui que eles estão promovendo produtos muito específicos Agora, se você realmente observar todos os diferentes produtos que eles oferecem, eles têm muitos produtos diferentes que podem potencialmente vender para seus clientes. Eles têm coisas como porta-fósforos, relógios, cronômetros , canecas lindas, esse tipo de quebra-cabeça, que parece muito legal, mas eu realmente não sei o que é, para ser Eles também têm coisas como caixas de turismo, por exemplo, e material estacionário, então eles têm uma grande variedade de produtos disponíveis Mas se você voltar à página inicial da empresa e conferir os principais produtos que ela está tentando vender, que é essencialmente, imagino, o produto mais lucrativo, você pode ver basicamente que eles estão tentando vender o kit de planejamento analógico e semanal, que são essencialmente os dois produtos que eles estão tentando promover mais do que todos os outros E quando olhamos para esse botão em particular, você percebeu que ele tem uma cor completamente diferente de todo o resto da página inicial? Isso ocorre porque a marca quer que você se concentre nesse botão específico e o veja aparecer entre tudo o que está na página. E quando clicamos nesse botão, ele nos leva a uma página que basicamente tem tudo o que está relacionado a esse produto e categoria específicos. Então, esses são apenas dois exemplos de como as empresas de comércio eletrônico podem ter um objetivo muito específico no que diz respeito a fazer com que os usuários acessem determinadas páginas e até mesmo direcioná-los para determinados produtos Como uma marca que está vendendo um produto digital, por exemplo, pode fazer com que alguém faça exatamente a mesma coisa? Bem, se acessarmos o site do Hoot Suite, você verá que o apelo à ação deles é muito claro Eles basicamente querem que o usuário solicite uma demonstração ou, mais proeminentemente, faça um teste gratuito com o serviço Agora, eles têm muitas opções e páginas diferentes que você pode escolher, mas de todas as páginas que eles querem que você acesse, iniciar uma página de teste gratuito é a opção que eles querem que você escolha. E então, quando você clica nesse botão, ele leva você a uma página onde você pode dizer que é só para mim. Ou eu tenho uma equipe. E isso basicamente direciona o tráfego do site para grupos relevantes, para eles possam criar a melhor jornada de cliente possível para esses dois públicos-alvo relevantes E vamos dar uma olhada em outro exemplo de um produto que está vendendo um serviço digital que todos nós conhecemos e amamos, que é o Netflix. Agora, a página inicial da Netflix é muito simples. Agora, ele basicamente permite que você assine Oh, tem um grande botão vermelho, que você não pode perder, que basicamente permite que você adicione seu endereço de e-mail para se inscrever no dia e cancelar a qualquer momento. Agora, você pode ver como é completamente simples para a pessoa começar, e ela também está dizendo que são apenas 99 ti bat por mês. Se você ainda não percebeu, estou atualmente na Tailândia filmando esse curso em particular, que custa cerca de $10 Então, basicamente, o que eles estão dizendo é que não é caro e é praticamente livre de riscos pois você pode cancelar a qualquer momento. Como você pode ver, a Netflix tem uma agenda muito clara. Ele quer que você se inscreva para que possa realmente entrar na plataforma, e isso torna mais fácil para você fazer isso Isso não complica demais as coisas. Ele quer que você se inscreva o mais rápido possível para entrar na plataforma, para que possa realmente começar a desfrutar do conteúdo e , finalmente, ficar viciado nele para começar a pagar uma taxa recorrente todo mês Agora, por fim, vamos conferir alguns sites de marcas pessoais para ver quais tipos de objetivos elas têm em vigor Então, se você conhece Patrick Beck David, ele é um podcaster, empresário, uma pessoa muito E, em última análise, ele tem muitos objetivos diferentes em seu site. Agora, esse cara já existe há muito tempo, ok? E ele tem uma equipe trabalhando na construção de sua marca pessoal. Agora, o que eu sugeriria pessoalmente é que você não tenha tantos objetivos em seu site. Use apenas um ou dois, um primário e um de apoio ou secundário. O motivo é que Patrick Beck David tem uma equipe de pessoas gerenciando seu site e todos os diferentes aspectos do site para, finalmente criar essa grande variedade de ofertas, o que, em última análise, permitirá que ele obtenha número possível de pontos de contato com clientes em potencial Mas no estágio em que você está apenas começando a criar seu site, você precisa se concentrar em ter apenas um objetivo principal e talvez dois em um impulso para começar. À medida que você começa a desenvolver sua marca e realmente desenvolver seu site ao longo do tempo, crie uma nova oportunidade, que você possa vender mais para seus clientes e, finalmente, ter mais objetivos definidos. Você pode ver aqui que Patrick Bec David tem tantas ofertas diferentes Ele está tentando capturar seu endereço de e-mail. Ele está tentando vender seu livro. Ele está tentando vender coaching. Ele está tentando fazer você ouvir o podcast dele. Ele tem muitos objetivos diferentes, todos baseados nas diferentes ofertas, pacotes e soluções que ele pode oferecer a você como cliente Vamos analisar outra marca pessoal para ver se ela adota a mesma abordagem. Agora, Jessie Isler é na verdade uma das pessoas mais inspiradoras que Ele tem uma energia super contagiante e é um cara muito legal. Essencialmente, é assim que ele se depara comigo de qualquer maneira. Agora, ele tem outra grande variedade de produtos e serviços para oferecer. Mas ele está por aí há muito tempo. O que eu sugiro novamente é basicamente focar em ter um produto específico ou um objetivo específico em que focar. Porque, em última análise, o que Jesse está fazendo aqui é oferecer treinamento Ele vende um calendário, o que é muito legal, que ajuda você a planejar seu ano Ele também tem um boletim informativo, tem livros e também organiza palestras. É exatamente a mesma configuração. Mas, em última análise, tudo se resume à mesma coisa. Se você quiser resumir todos esses serviços em um único objetivo, é vender o máximo de produtos possível. Essencialmente, se você pensar nos arranjos das palestras, os livros, o calendário e o treinamento são todos produtos Todos são produtos para Jessie oferecer aos clientes em potencial Na verdade, nunca estive neste site antes, mas se eu for até o final dos sites, posso garantir que ele terá algum tipo de boletim informativo ou função de inscrição, porque ele basicamente tentará se inscrever para que você possa entrar na lista de e-mail dele para que ele possa vender algum tipo de produto ou serviço algum tipo de produto ou serviço para você mais tarde. Então, espero que isso lhe dê uma ideia de como você pode encontrar pessoalmente o objetivo do seu site Certifique-se de anotar isso e deixar bem claro em sua estratégia para criar seu site você deseja alcançar um objetivo específico e um objetivo de apoio para seu site, independentemente do tipo de site que você esteja tentando criar. Portanto, dedique algum tempo para realmente entender exatamente o que você deseja que o site faça por você. Pense no seu site como um funcionário digital, e você está dando a esse funcionário apenas duas responsabilidades para se sair muito bem. Porque quando você se concentra apenas em atribuir a ela uma responsabilidade principal e depois uma responsabilidade de apoio, você pode ver instantaneamente o que é importante adicionar ao site. Então, não vai ficar muito confuso. Não vai parecer, você sabe, muito ocupado. Será extremamente claro e conciso alcançar a única coisa que precisávamos alcançar De qualquer forma, espero que você ache esta lição valiosa, e eu realmente espero ver você na próxima. Te vejo em breve. 10. A regra dos 5 segundos: Ok, então como você ganha a confiança dos visitantes de um site em 5 segundos ou menos? Agora, tenho certeza de que você está plenamente ciente de que, no dia a dia, as pessoas realmente não têm muito tempo de atenção com o TikTok e o Instagram e com o fato de estarmos em nossos telefones o tempo todo Basicamente, damos ao site a 5 segundos para basicamente nos dizer: Ok, você pode me dar o que eu preciso. Conte-me um pouco mais. Agora, quando realmente chegamos a um novo site, e se você realmente visitar um novo site no futuro, você pode realmente estar consciente e perceber que se pergunta exatamente essas três perguntas SM nesta ordem exata se olhar com atenção suficiente. Agora, quando acessamos um site totalmente novo, se você realmente der um passo atrás e pensar nas perguntas que está se perguntando ao acessar uma nova página inicial na qual nunca esteve antes, geralmente nos fazemos três perguntas específicas na ordem exata do SM todas as vezes. É muito importante entender isso, porque se você está criando um site e nunca criou um site antes , pode entender como capturar a atenção do seu público-alvo nos primeiros três a 5 segundos, para eles possam passar mais tempo em seu site e perceber que você pode ser a opção para ajudá-los a encontrar uma solução para o requisitos que eles precisam. Portanto, se você souber como chamar a atenção deles e ajudá-los a permanecer um pouco mais em seu site , eles poderão aprender um pouco mais sobre o que você tem a oferecer e, finalmente, escolher você como uma solução para o problema que eles têm. Se você já criou um site antes e ele teve uma taxa de rejeição muito alta, isso se deve basicamente ao fato de o site não ter chamado a atenção da pessoa ou de não estar muito claro o que vende ou pode oferecer Novamente, isso torna muito importante que, como alguém que está criando um site, você precise garantir que as pessoas saibam exatamente o que você faz, o que você pode oferecer a elas. A maneira mais simples e clara possível. Então, quais são essas três perguntas que fazemos nós mesmos quando acessamos um site totalmente novo? Bem, a primeira pergunta é: o que você faz e como você pode me ajudar? Agora, são duas perguntas. Então, vamos continuar com o que você faz porque isso torna as coisas muito fáceis. Agora, o que você faz significa essencialmente: Ok, eu tenho um problema e acho que você poderia ser uma solução. Por que eu deveria escolher você? O que é que você realmente me oferece? Agora, se você olhar este site aqui, por exemplo, verá que ele literalmente diz exatamente o que eles oferecem no primeiro segundo em que você acessa a página inicial. É literalmente dizer ao cliente isso é o que podemos fazer por você, e é por isso que você deve nos escolher. Basicamente, está dizendo: Ouça, você não vai perder seu tempo visualizando nosso site, você está no lugar certo. Ok, então agora nós os temos no lugar certo. Eles sabem que não vão perder tempo. A próxima pergunta que costumamos fazer a nós mesmos é: Ok, estou no lugar certo. Você poderia ter o que eu preciso, mas posso confiar em você? Agora, esta é a próxima pergunta que cada pessoa se faz, quando chega a um novo site. Essa marca é legítima? Essa oferta é realmente genuína? Vou dar a eles meu dinheiro e vou receber de volta o que espero? Agora, existem várias maneiras diferentes de criar confiança em seu site. E esta seção deve estar essencialmente abaixo da seção Herói, assim como este exemplo, onde você pode simplesmente mostrar que tem autoridade sobre aquela coisa específica que está oferecendo Você está dizendo que, escute, eu posso oferecer o que você precisa, e eu já fiz isso 1 milhão de vezes antes. Então, em última análise, você não vai se decepcionar e está essencialmente em boa companhia, como se não fosse a primeira pessoa a fazer isso e não fosse a última a comprar da Okay, então agora você realmente tem a confiança do cliente, e ele sabe exatamente o que você pode oferecer. O que vem a seguir? Bem, quando acessamos um site pela primeira vez , é o que você pode fazer por mim? Então posso confiar em você. A próxima pergunta é: Ok, conte-me um pouco mais, o que na verdade não é uma pergunta, mas você entendeu. Então, eles sabem que você pode oferecer o que eles querem. Eles também sabem que você é confiável. Agora, eles querem saber mais sobre os detalhes e os benefícios que você pode oferecer eles como parte de sua oferta. E é aqui que você pode entrar em mais detalhes sobre por que as pessoas deveriam comprar de você. O que a torna diferente como marca? Por que outros clientes estão comprando de você antes? E como você pode realmente dar à pessoa o resultado ou a solução que ela está procurando? Em última análise, tudo se resume a construir confiança e, finalmente, entregar essa confiança. Em qualquer tipo de negócio, se você pode basicamente definir uma expectativa e, em seguida, entregar ou superar essa expectativa, você não pode realmente perder Então, só para resumir, a primeira pergunta que cada visitante do site se perguntará é o que você faz e como você pode me ajudar? A segunda pergunta é: posso confiar em você? Portanto, mostre a eles elementos confiáveis de sua marca para criar autoridade e mostrar que somos quem dizemos ser, e você pode E a terceira pergunta é: Ok, conte-me um pouco mais sobre o que você pode fazer para me ajudar com meu desafio. É por isso que você mostra todos os recursos e benefícios de uma forma fácil de digerir E isso, meus amigos, é como desenvolver a página inicial perfeita para qualquer empresa. De qualquer forma, espero que você tenha achado isso útil. E se você trabalhar com essa estrutura, ela realmente ajudará você a criar um site que realmente obtenha os resultados de que você precisa. De qualquer forma, temos muito impulso agora para a próxima lição, então nos vemos lá 11. Design de sites 101: alinhamento e grades: Então, o que significa alinhamento quando se trata de design de sites e como as grades desempenham um papel para nos ajudar a criar sites bonitos que realmente chamam a atenção Bem, a verdade é que grades e alinhamentos ajudam a fazer muito mais do que apenas criar belos Eles também podem tornar os sites mais funcionais, mais responsivos e também ajudar a melhorar a experiência do usuário Então, vamos começar com o alinhamento. O que é alinhamento? Bem, o alinhamento se refere à relação e ao posicionamento de certos elementos em um eixo comum Quando os elementos estão alinhados, isso dá uma sensação de estrutura e profissionalismo a um site Páginas da web lindamente estruturadas e organizadas realmente ajudam a dar ao seu site uma aparência profissional e também aprimoram significativamente a experiência do usuário, ajudando seus usuários a navegar pelo site usando menos calorias mentais Agora, há alguns pontos-chave que você deve ter em mente ao focar no alinhamento e usar a grade A primeira coisa é a consistência. Agora, usando alinhamento e notas consistentes em todo o site, será muito importante criar páginas previsíveis que não sejam apenas profissionais, mas também fáceis de digerir pelo usuário Isso inclui o uso dos mesmos alinhamentos e grades para texto, imagens e até botões Isso ajudará você a obter uma sensação estética geral que pareça realmente profissional e confiável Agora, o segundo ponto-chave dos imigrantes para o alinhamento e as grades é Você precisa usar a hierarquia em relação aos alinhamentos e grades para mostrar primeiro as informações mais importantes e garantir que elas sejam apresentadas de uma forma limpa, profissional e fácil de , profissional e É aqui que entram o alinhamento e as grades. Ele cria uma experiência previsível nas páginas do seu site, para que o usuário saiba onde procurar em seguida. E o último ponto chave, que abordamos algumas vezes ao longo desta lição, é o design responsivo Usar grades é muito importante para garantir que seu site uma ótima aparência em dispositivos móveis, tablets e computadores Ao ser consistente com o alinhamento em todo o site e também com as grades que você usa para criar as páginas do seu site, isso pode ajudá-lo a criar uma experiência de marca perfeita, consistente em todos os dispositivos nos quais o espectador poderia estar potencialmente navegando em seu E o que eu quero fazer é compartilhar essas duas páginas do site com você e permitir que você decida qual delas você acha que tem o melhor alinhamento e grade. E três, dois, um. Agora, se você não acertou, não se preocupe, basta assistir novamente a este vídeo e tenho certeza de que você o entenderá pela segunda vez Mas se você acertou, parabéns, agora você sabe a diferença entre um site que é perfeito em termos alinhamento e precisão e um que não usa esses princípios em relação ao design Então, agora que você realmente entende o alinhamento e a precisão, você poderá criar páginas da Web que não apenas tenham uma aparência mais atraente, mas também proporcionarão uma melhor experiência ao usuário, para que seu site ajude os usuários a queimar menos calorias mentais, permitindo que eles permaneçam no seu site por mais tempo você poderá criar páginas da Web que não apenas tenham uma aparência mais atraente, mas também proporcionarão uma melhor experiência ao usuário, para que seu site ajude os usuários a queimar menos calorias mentais, permitindo que eles permaneçam no seu site por mais De qualquer forma, espero muito que tenham gostado desta aula e de um pequeno exercício no final, nos vemos na próxima aula. Te vejo em breve. 12. Design de sites 101: hierarquia visual: Hierarquia visual e design do site. O que é e por que é tão importante? Bem, vamos primeiro discutir o que realmente é a hierarquia visual Hierarquia visual é o arranjo ou apresentação de certos elementos para mostrar sua ordem de importância Um site bem projetado usando hierarquia visual pode ajudar a melhorar significativamente a experiência geral. Ele melhora a legibilidade, o engajamento e também reduz a quantidade de calorias mentais que o usuário precisa gastar para navegar pelo seu site e consumir as informações que ele precisa Agora, existem alguns elementos-chave que mais comumente usam hierarquia visual para transmitir sua mensagem com mais eficiência E o primeiro desses elementos é a tipografia. Sites bem projetados que usam hierarquia visual para realmente aprimorar a experiência do usuário usam diferentes formas de tipografia, usam diferentes formas de que são mais espessas, mais finas e, geralmente, de cores diferentes, usando os princípios fundamentais da hierarquia visual para realmente aprimorar a experiência do usuário usam diferentes formas de tipografia, que são mais espessas, mais finas e, geralmente, de cores diferentes, usando os princípios fundamentais da hierarquia visual. Você pode mostrar exatamente as mesmas informações uma forma completamente diferente, uma das quais é extremamente legível e a outra, na verdade, difícil de ler Agora, outro elemento que é muito importante quando se trata de hierarquia visual é o contraste de cores Você pode usar cores para chamar a atenção do usuário para determinados elementos. Cores mais vibrantes que chamam a atenção podem ser usadas para chamadas para ações, botões importantes e até mesmo informações importantes. Agora, outra abordagem conectada à hierarquia visual é o espaço em branco Agora, aprenderemos mais sobre o espaço em branco com mais detalhes posteriormente no curso. Mas, ao adotar o uso do espaço em branco e saber como usá-lo corretamente, que vou ensinar daqui a pouco, você pode ajudar certos elementos a se destacarem, novamente, aprimorando a hierarquia visual do Agora, como um pequeno exercício divertido para finalizar a lição, eu só quero mostrar duas partes do conteúdo e fazer com que você escolha qual delas você acha que está usando hierarquia visual para orientar como ela foi apresentada Então, se você tiver que escolher entre esses dois conteúdos, qual você acha que é mais legível, envolvente e com maior probabilidade proporcionar uma melhor experiência ao usuário E eu vou te dar 32, um. Você acertou? Ok, então se você não acertou, talvez assista novamente esta lição e talvez você possa aprender um pouco mais sobre o que significa ter um site incrível com ótima hierarquia visual Mas se você acertou, parabéns, agora você entende a diferença entre conteúdo que está meio que misturado e não foi realmente pensado e conteúdo que foi realmente organizado com base na hierarquia visual e na mente, para que seja mais legível, mais envolvente e mais claro De qualquer forma, eu realmente espero que você goste desse pequeno exercício e também do conteúdo desta lição. E estou ansioso para ver você na próxima. Te vejo. 13. Design de sites 101: fontes e tipografia: Então, escolha as fontes e a tipografia certas para o seu site Como você faz isso? E por que isso é tão importante? Agora, um erro que muitas pessoas cometem ao criar um site é que escolher a fonte ou a tipografia certa tem tudo Nem tudo gira em torno da aparência do site. Embora isso ainda seja muito importante. Agora, o que mais importa é escolher a fonte e a tipografia certas é criar uma linguagem visual que possa ajudar a comunicar e criar uma percepção sobre é criar uma linguagem visual que possa ajudar a sua marca, que também pode melhorar a experiência do usuário E, dependendo das fontes e tipografia que você escolher usar em seu site, você pode criar uma percepção completamente diferente dependendo dos tipos de fontes e tipografia que você usa em cada página Por exemplo, você pode escolher uma fonte que seja mais divertida e divertida, uma que seja super tradicional e profissional, ou você pode escolher uma fonte que seja super simples e moderna Ou uma forma mais futurista e criativa. Agora, uma das principais coisas a lembrar é que você deve escolher apenas uma ou duas fontes diferentes para usar em todo o site. Por exemplo, você tem uma fonte principal, que geralmente é usada para seus subtítulos e cabeçalhos, e depois outra fonte, usada para conteúdo geral, que é extremamente legível e Isso ocorre porque quanto mais longo é um trecho de texto mais difícil é se manter atualizado, por isso precisamos garantir que o texto seja super fácil de ler para manter o usuário lendo e não cansá-lo mentalmente Escolher as fontes certas pode ajudar você a evocar uma certa emoção em seu cliente ou cliente E também pode mostrar um certo nível de profissionalismo e confiabilidade que pode ajudá-lo a gerar Agora, há algumas coisas importantes em que pensar quando se trata de escolher as fontes ou a tipografia certas para sua marca Agora, na verdade, abordamos o processo de escolha da tipografia e das fontes corretas para seu site e marca Curso número dois do programa Brand Builder pro. Este curso é toda a nossa expressão visual e, literalmente, diz tudo o que você precisa saber em relação à tipografia, fontes, cores, como criar o logotipo perfeito, a voz da marca e todas essas coisas boas Agora, o curso aborda muito mais do que apenas esses elementos específicos. Mas se você sentir que precisa um pouco mais de apoio nessas áreas específicas , sinta-se à vontade para dar uma olhada. Agora, escolher as fontes certas com a personalidade certa é muito importante. Como mostrei antes no início da aula, usar fontes diferentes é fonte do título e do subtítulo, transmitindo uma mensagem completamente diferente sobre sua marca Por exemplo, se eu perguntar qual dessas duas fontes é usada por uma marca de luxo , posso garantir que você escolherá essa. Isso ocorre porque essa fonte específica foi criada há muito tempo. Portanto, tem mais história. Portanto, parece que tem mais tradição, e tradição e história estão mais intimamente associadas à sensação de ser luxo. Agora, outro ponto chave real a ser lembrado é a legibilidade. É órgão e vamos escolher uma fonte que seja super criativa e única. Mas se seu cliente ou cliente não conseguirem lê-lo, isso representará um problema. Tudo o que fazemos em relação à tipografia e às fontes deve nos permitir criar a melhor experiência de usuário possível Então, se estamos usando uma fonte ou uma forma de tipografia, que é muito difícil de ler, isso é tirado da experiência do usuário, que obviamente não queremos Portanto, certifique-se de que seus fundos sejam fáceis de ler, especialmente a fonte do conteúdo principal. Isso será muito importante porque será usado para trechos de texto mais longos, o que será muito fácil de cansar o usuário e, essencialmente, perder sua atenção Um último ponto importante a ser lembrado é a inconsistência da hierarquia Com relação ao tamanho, você deve manter essa proporção geral para seu cabeçalho, subcabeçalho e conteúdo geral Agora, obviamente, você precisará tornar seu texto responsivo, dependendo do dispositivo Por exemplo, se eu estiver acessando um site no meu computador, o texto não terá exatamente o mesmo tamanho de fonte que se eu estivesse vendo no meu iPhone. Portanto, embora o tamanho do texto mude, a proporção entre o tamanho do cabeçalho, o subcabeçalho e o conteúdo geral permanece a mesma. E isso lhe dará a hierarquia necessária para tornar seu conteúdo super legível Mas certifique-se de manter a consistência no uso dessa hierarquia em todo o site Isso ajudará você a criar uma experiência de falha consistente, que fará com que o usuário se sinta confortável usando as páginas do seu site e navegando pelo Agora, apenas como um pequeno experimento, eu só quero enfatizar o fato de que você provavelmente aprendeu alguma coisa durante esta aula. Quero que você pegue esses dois exemplos de tipografia e basicamente me diga qual desses dois é mais adequado para uma empresa de software moderna Então, se você fosse o CEO de uma empresa de software, qual dessas duas configurações de tipo de letra você escolheria para o site E três, dois, um, você acertou? Não, se você não acertou, não é o fim do mundo. Talvez assista novamente a esta lição e talvez você possa aprender algumas outras coisas antes de começar a selecionar a tipografia e os fundos para seu Também vou adicionar alguns recursos super úteis ao curso para que você possa realmente escolher quais fundos são mais comumente usados em seu mercado e setor específicos. Vou me certificar de adicionar o recurso ao curso para que você possa encontrá-lo facilmente e encontrar os fundos perfeitos para seu site sem muito trabalho. Escolher os fundos e a tipografia certos para sua marca é muito empolgante, pelo menos para mim. Eu acho isso super divertido. De qualquer forma, nos vemos na próxima lição, onde as coisas realmente começam a ganhar impulso. Te vejo lá. 14. Design de sites 101: como criar paletas de cores: Como você cria uma ótima paleta de cores para o seu site? Agora, usando a paleta de cores correta para seu site, podemos ajudar a criar a percepção, o profissionalismo e o movimento corretos em seu cliente quando ele está navegando em suas páginas da web Agora, cada marca deve ter três tipos diferentes de cores em seu site. A primeira é uma cor de fundo, que geralmente é branca ou, se você realmente quiser ser experimental, uma cor super escura. Agora, 99% das marcas deveriam usar branco ou um cinza muito, muito claro como cores principais para a cor de fundo do site de suas marcas. E a razão para isso é que é muito fácil para um ser humano ler texto preto em fundo branco vez de texto branco em fundo preto. Ele simplesmente usa menos calorias mentais, o que, em última análise, é o que queremos do ponto de vista da experiência do usuário Agora, os outros dois tipos de cores são cores de destaque e suas cores primárias Agora, sua cor primária é, em última análise, a cor pela qual você deseja ser conhecido para sua marca. Agora, você pode ter duas cores primárias, mas, pessoalmente, acho melhor usar apenas uma. Agora, abordamos o processo de desenvolvimento de sua própria paleta de cores para sua marca muito mais profundidade e como você pode realmente pensar sobre isso de um ponto de vista estratégico O segundo curso do programa Brand Builder Pro. Mas só para ajudá-lo se você não quiser investir nesse programa, o que é absolutamente bom. Temos uma ferramenta on-line em nosso site, que você pode usar para encontrar a melhor paleta de cores para sua marca e site Isso é chamado de Color Pro Plus e você pode encontrá-lo on-line. É muito fácil e totalmente gratuito de usar. Isso ajudará você a encontrar uma variedade de paletas de cores diferentes que você pode selecionar e começar a usar em seu site, para você saiba que seu site sempre terá uma ótima aparência Agora, suas cores de destaque em sua paleta de cores são muito importantes A razão para isso é que ele basicamente guia o olho do usuário para onde ele deveria clicar. As cores de destaque geralmente são usadas para chamar a atenção das pessoas e também dizer às pessoas onde clicar e o que é importante Agora, abordaremos como realmente usar sua paleta de cores em uma lição um pouco mais adiante no curso Mas, por enquanto, eu só quero ajudá-lo a criar uma estrutura e um processo de pensamento por trás cada cor na paleta de cores do seu site, para que você saiba como usá-la quando vier a criar seu site mais tarde Agora, alguns pontos-chave a serem lembrados quando você está pensando em desenvolver uma paleta de cores para sua marca são o alinhamento da marca Portanto, certifique-se de que as cores que você usa sejam relevantes para sua marca e para a mensagem que você deseja transmitir É aqui que a ferramenta Color pro plus é realmente útil. Oferece uma seleção de paletas de cores lindamente projetadas que você pode usar em seu site em segundos E também mostra os tipos de emoções e sentimentos que isso evocará em seus clientes ou clientes em potencial Agora, outra coisa em que pensar é o contraste e a harmonia. Você precisa garantir que seu site tenha contraste suficiente para facilitar a leitura e criar uma boa experiência para o usuário. Você também precisa garantir que suas cores se fundam perfeitamente Agora, existem muitos métodos diferentes para criar uma paleta de cores maior para o site Mas se você não quer aprender muito sobre teoria e psicologia das cores, só quer ter uma paleta de cores realmente boa para o seu site só quer que ele tenha uma boa aparência seja realmente apresentável e confiável Use a ferramenta color pro plus para selecionar uma paleta de cores e ver qual delas funciona melhor para sua marca Todas as paletas de cores apresentadas na ferramenta color pro plus foram projetadas por especialistas treinados em design que entendem como cores diferentes funcionam bem juntas Você não precisa se preocupar em aprender a teoria das cores, ou qualquer coisa que você precisa fazer é selecionar a paleta de cores que você acha que melhor se adequa à sua marca Verifique as emoções reais que essa paleta de cores específica transmitirá e comunicará e, em seguida, experimente em seu site e veja como você Agora, um último ponto é a consistência. A consistência é muito importante porque se você começar a usar cores diferentes para diferentes chamadas para ações, criará uma experiência realmente confusa para o usuário Por ser consistente, significa simplesmente que você está usando o acento principal e as cores básicas da mesma forma em todo o site Por exemplo, se você tivesse todo o seu site com fundo branco e, em seguida , apenas uma única página com fundo preto , com texto branco, a aparência ficaria um pouco estranha e confundiria o usuário Portanto, a consistência é muito importante. E só para um pouco de exercício, um pouco de diversão. Quero mostrar essas duas páginas da web e ter 3 segundos para decidir qual delas você acha que usa melhor o Color. E três, dois, um. Você acertou? Em última análise, o design que melhor usa cores está seguindo os princípios que você acabou de aprender nesta lição. É consistente, tem harmonia. Está usando cores que funcionam muito bem juntas. Ele tem espaço em branco suficiente e usa o branco como plano de fundo para dar tempo e espaço para que o restante do conteúdo da página brilhe. O outro design, no entanto, não faz exatamente isso. Está muito mal desenhado. verdade, não é usar as cores corretamente e, na verdade , aprenderemos mais sobre como usar as cores corretamente no design do seu site um pouco mais tarde no curso. E falando nisso, nos vemos na próxima lição. Te vejo em breve. 15. Design de sites 101: como usar suas cores: Agora você provavelmente tem algumas ideias ou talvez apenas uma ideia em relação à paleta de cores da marca que deseja usar em seu site Agora vamos mostrar como usá-lo em seu site. Como você usa sua paleta de cores no seu site? Bem, neste momento, você já usou a ferramenta Color P plus e realmente tem a paleta de cores para o seu site, ou está tentando decidir entre um casal e não tem certeza de qual escolher Ao final desta lição, você saberá como usar as diferentes cores em sua paleta poder fazer um pouco de experimentação e ver qual paleta de experimentação e ver qual cores você Agora, lembre-se de que usar sua paleta de cores significa basicamente usá-la para cada elemento diferente que está no seu site Isso inclui texto, botões, outros elementos, bordas, linhas, seu logotipo e o plano de fundo. Nunca esqueça o plano de fundo. Agora, como mencionei na lição anterior deste curso, você precisa ter certeza de que é muito consistente com as cores que está usando e com a forma como as está usando. Por exemplo, não tente ser muito experimental ao usar suas cores, mas nesta lição, quero apenas apresentar algumas regras fundamentais e práticas recomendadas para que você possa usar as cores da melhor maneira possível para obter o melhor resultado. Agora, sua cor primária deve ser a cor mais dominante em seu site. Então, por exemplo, todos os seus ícones, seu logotipo, os cabeçalhos do seu site devem ser todos dessa cor Mostra qual é a cor primária da marca. Sua cor primária deve ser a cor mais usada em seu site, além da cor de fundo. Se a cor primária que você escolheu não for a mais dominante em seu site, além da cor de fundo , você está fazendo algo errado. A regra básica que eu sempre uso é todas as coisas importantes precisam ser a cor primária, exceto uma chamada à ação, que é a cor de destaque Então eu sempre deixo o fundo branco e sempre deixo todo o conteúdo geral preto ou simplesmente preto, então um cinza muito escuro. Ao fazer isso e manter as coisas bem simples, você pode ter certeza de que seu acento primário e suas cores básicas estão sendo usadas corretamente E lembre-se de que sua cor de destaque deve ser usada de forma a chamar a atenção do usuário E ao fazer isso e usar a cor de destaque corretamente, você poderá orientar o usuário a clicar em determinados botões e informações importantes nas quais você realmente deseja que ele clique Agora, como um pequeno exercício divertido, quero mostrar dois exemplos diferentes páginas da web, um dos quais usa cores usando exatamente os fundamentos que acabei de ensinar nesta lição e o outro que é fazer as coisas de uma maneira completamente diferente Então, qual dos dois você acha que está usando a cor corretamente? E 321 Você acertou? Como você pode ver, esse site em particular parece muito melhor. Simplesmente flui muito melhor. Você sabe exatamente onde eles clicam e o que é importante e o que não é tão importante. E isso cria uma hierarquia e uma experiência que o usuário pode desfrutar, oposição ao design de outro site, o que torna as coisas um pouco mais difíceis. Não é muito simples e é um pouco confuso De qualquer forma, eu realmente espero que você goste desta lição. Estou ansioso para ver você na próxima. Veja isso. 16. Design de sites 101: hierarquia de button: Hierarquia de botões, o que é e por que é tão importante? Bem, criar botões de ótima aparência pode basicamente aumentar a probabilidade de eles serem clicados Há algumas coisas importantes em que você deve pensar ao criar os botões em seu site para torná-los mais clicáveis e, finalmente, fazer com que o usuário faça o que você deseja que ele faça em seu Os botões do seu site guiam o usuário pelo site até onde você deseja que ele vá. Eles devem ajudar seu usuário a navegar de forma eficaz pelo site para que ele possa chegar onde precisa estar no menor tempo possível com o mínimo de cliques Então, em primeiro lugar, o que é hierarquia de botões Bem, a hierarquia de botões é essencialmente a disposição ou o estilo dos botões para criar uma ótima experiência visual e, finalmente, tornar o botão mais Usamos a hierarquia de botões para mostrar ao usuário onde ele deveria Que possamos obter o resultado desejado dentro do site. Isso nos ajuda a priorizar os botões nos quais os usuários devem clicar para que possam acessar as páginas que queremos. Em última análise, botões bem projetados e uma hierarquia bem estruturada para seus botões devem ajudar a criar uma interface mais envolvente e divertida para seus usuários aproveitarem Agora, alguns pontos-chave a serem discutidos em relação à hierarquia de botões, e o primeiro desses pontos é tamanho e posicionamento Agora, quanto mais predominante é um botão, mais improvável é que ele seja clicado A cor também está incluída nesse processo de tomada de decisão, mas abordamos isso na última lição, então, no momento, vamos nos concentrar apenas nos botões em si. Agora, o que você deve fazer é tornar os botões que são mais prioritários para você, seus objetivos de negócios, mais consideráveis, mais óbvios e proeminentes, enquanto os botões, que são menos importantes , são, em última análise um pouco mais sutis e um pouco mais difíceis de ver Agora, uma coisa que você precisa para garantir, Rob, é que você seja consistente com o estilo de seus botões Depois de confirmar o estilo e o sistema do botão, esse sistema específico deve ser usado em todo o site Então, por exemplo, se suas interações de chamadas são do mesmo tamanho em toda a sua página inicial, isso também deve ser o mesmo em todo o site. Agora, como um exercício muito divertido, quero mostrar dois exemplos de hierarquia de botões e como alguns podem ser muito fáceis entender e clicar, e como outros podem ser um pouco confusos e não tão fáceis Então, qual desses dois você acha que é o mais fácil de entender e em qual você tem maior probabilidade de clicar? Eu quero te dar 3 segundos. Então, três a um, para acertar? Agora, se você entendeu tudo nesta lição , deveria ter selecionado os botões corretos. Mas se você não o fez, não se preocupe, basta revisitar esta lição e espero que você a aprenda na segunda vez Agora, uma coisa que mostrarei um pouco mais tarde no curso é como criar animações com botões para realmente ajudar a dar vida a elas Isso não significa fazer coisas malucas com botões. São apenas pequenas animações profissionais simples, que você pode fazer no web floor em questão de segundos, e é muito fácil levar seus botões a um nível diferente, um padrão completamente diferente, em que eles ganham vida e interagem com o usuário para criar uma melhor experiência de usuário Eu vou te mostrar como fazer isso um pouco mais tarde no curso, e é realmente muito fácil, então não se preocupe. Você não precisa saber codificar, não precisa saber nada sobre design de sites. Literalmente tão fácil quanto editar um documento do Word. De qualquer forma, espero ver você na próxima aula e realmente espero que esteja gostando do curso. Te vejo em breve. 17. Design de sites 101: a importância das imagens: Então, por que é tão importante escolher as imagens certas para o seu site E o mais importante, como você faz isso? Bem, antes de mergulharmos nesta lição, na próxima lição deste curso, mostrarei lugares específicos on-line onde você pode obter imagens incríveis para seu site sem royalties incríveis para seu site Portanto, fique atento a isso. Mas vamos primeiro falar sobre por que as imagens são tão importantes em um site. Bem, como já discutimos várias vezes no curso, quando alguém acessa um site, a primeira coisa que se pergunta é: isso é para mim? Posso usar tudo o que este site está oferecendo? Portanto, usar as imagens certas pode ser muito importante porque os humanos são criaturas visuais. Vemos algo e entendemos com muito mais facilidade do que se estivéssemos lendo algo e tentando descobrir o que as palavras realmente significam. E ao usar as imagens corretas que se encaixam na sensação geral que queremos transmitir com nossa marca, isso ajudará os clientes a isso ajudará os clientes descobrir quem somos e o que podemos oferecer com muito mais facilidade e oferecer com muito mais facilidade e última análise, a criar uma melhor experiência geral para o usuário Agora, a coisa mais importante quando se trata selecionar o tipo de imagem para usar seu site, qual mensagem eu quero transmitir Como eu quero ser visto como uma marca? Eu quero ser visto como mais luxuoso ou preciso ser visto como mais infantil e mais brincalhão Ou eu quero ser visto como mais moderno, ou devo ser visto como mais futurista ou até mesmo espacial. Agora esse é o primeiro passo. Você precisa descobrir como deseja ser percebido e seguida, selecionar suas imagens com base nisso Agora, outra coisa muito importante quando se trata de selecionar as imagens certas é garantir que suas imagens sejam de alta qualidade Uma coisa que eu sempre digo aos clientes quando estou trabalhando para ajudá-los a desenvolver seu site, se um site tem uma imagem acumulada e não de alta qualidade, como você acha que isso reflete o serviço que o cliente acha que receberá dessa marca em particular Isso realmente não reflete isso muito bem, certo? Portanto, selecionar as imagens certas é uma coisa, mas garantir que sejam de alta qualidade é outra Portanto, lembre-se disso e, se tiver dúvidas, retire-o. Existem inúmeras imagens diferentes que você pode usar lá fora. Portanto, não seja romântico com apenas um. Não é da melhor qualidade. Se estiver pixelado, não o use Agora, algumas coisas em que pensar quando você está realmente escolhendo imagens para seu site elas precisam ser relevantes para seu público-alvo e também para o que você está oferecendo Como humanos, nos relacionamos com pessoas como nós muito mais facilmente com base em sua etnia, com base em seus hobbies, com base em sua aparência, com base em seu sexo, com base em sua altura, com base em se são atraentes ou menos atraentes, ou ou Então, usando a vantagem natural. Se você é uma marca de ioga, por exemplo, ou está vendendo algo relacionado à ioga, use seu site para mostrar às pessoas dentro das imagens que são seu público-alvo ideal Porque usar as imagens, que são as mais relevantes para seu público-alvo, será o melhor e mais eficaz para persuadir seu cliente a escolher você para ser a marca da qual ele compra Agora, outra coisa que é muito importante quando se trata selecionar as imagens certas é um estilo consistente Por exemplo, se você vai criar imagens em preto e branco em todo o site, faça isso em todo o site. Não comece a exibir imagens diferentes com cores ou, em tons de verde, por exemplo, isso vai ficar uma O que você quer fazer é manter a natureza consistente de suas imagens em todo o site Às vezes, isso pode ser difícil se você estiver usando imagens de banco de imagens Portanto, se você estiver usando imagens de estoque e o tom e a sensação da imagem real forem um pouco diferentes, sinta-se à vontade para editá-las em qualquer loja de fotos ou talvez pedir a alguém da Fiber que a edite para garantir que todas pareçam a edite para muito consistentes e tenham sido quase tiradas na mesma sessão de fotos Isso pode ser feito via light room ou photoshop, então qualquer pessoa com as habilidades mais básicas relação a esses dois programas pode fazer isso com muita facilidade Ou se você quiser manter as coisas realmente simples, basta deixá-las todas em preto e branco e elas parecerão consistentes de qualquer maneira. Agora, uma coisa importante a lembrar quando se trata de escolher imagens é que, como humanos, gostamos de ver outros humanos fazendo coisas. Por exemplo, há uma razão pela qual praticamente todas as marcas de comércio eletrônico mostram o produto em situações da vida real. Por exemplo, eles podem mostrar uma bolsa talvez em um fundo em branco, mas também mostrarão isso no ombro da mulher que deveria ser o público-alvo ideal para o cliente Então, realmente, pense nisso ao escolher as imagens para sua marca E, obviamente, na próxima lição, mostrarei por que você pode encontrar uma grande variedade de imagens totalmente gratuitas e sem problemas Agora, apenas como um pequeno exercício divertido, gostaria de perguntar quais desses dois conjuntos de fotos e imagens funcionam melhor juntos. Então eu vou te dar 3 segundos, então três, dois, um. Você acertou? Como você pode ver, essas imagens são muito mais consistentes. E é isso que você está procurando quando se trata do seu site. Você precisa ter certeza de ter isso em mente. Porque, à medida que as pessoas percorrem suas páginas e, obviamente, visitam páginas diferentes, você poderá criar uma harmonia entre elas. Então, isso criará uma melhor experiência geral para o usuário. De qualquer forma, estou super empolgada em mostrar algumas coisas incríveis na próxima aula, então nos vemos lá. 18. Design de sites 101: encontre ótimas imagens de sites online gratuitamente: Então, onde você pode encontrar imagens incríveis para o seu site gratuitamente. Nesta lição, na verdade, tenho duas opções gratuitas que são fantásticas e as uso o tempo todo, além de duas opções pagas. Agora, na verdade, criei links diretos para as páginas específicas do curso, apenas para facilitar a localização de cada plataforma. Agora, o primeiro site, que é totalmente gratuito, e você pode obter quantos sites quiser sem pagar um único centavo é o Pixab Tudo o que você precisa fazer é pesquisar o tipo de imagem que deseja e rolar para baixo, e há muitas imagens relevantes para o termo de pesquisa. Agora, uma coisa que eu realmente gosto fazer é clicar em certos fotógrafos gosto muito do estilo , porque geralmente isso me permite obter quais gosto muito do estilo, porque geralmente isso me permite obter diferentes imagens relevantes do mesmo fotógrafo com o mesmo estilo e, geralmente, elas têm o mesmo rasgo e sensação Portanto, é muito mais fácil encontrar imagens consistentes para o seu site dessa forma. Na verdade, você pode usar exatamente essa mesma abordagem para minha segunda plataforma gratuita, que é Pixels. Agora, isso funciona exatamente da mesma forma que a cerveja Pixel. Geralmente, há mais algumas opções ou opções diferentes neste site específico, mas ele funciona exatamente da mesma maneira. Então, basta pesquisar os tipos de fotos e imagens que deseja e, em seguida, ele simplesmente fornecerá uma seleção delas com base no seu termo de pesquisa. Novamente, use um pequeno truque inteligente que eu lhe contei sobre pesquisar certos fotógrafos ou, se você gosta de uma determinada imagem, clique na imagem e, em seguida, o fotógrafo deve estar lá embaixo, e eles terão projetos diferentes em categorias ou coleções diferentes, que eles fizeram, que devem ter a mesma sensação Agora, além dessas duas plataformas gratuitas, que oferecem muitas imagens para você escolher. Existem mais duas opções premium disponíveis se você quiser uma foto super especial. Agora, o primeiro é o Sugar Stop. Funciona exatamente da mesma forma que a cerveja Pixel e os pixels, mas as imagens têm uma qualidade um pouco melhor. E, em última análise, tudo se resume a se você acha que vale a pena pagar um pouco pela imagem para obter uma qualidade um pouco maior. Agora, pessoalmente, usei **** do stock algumas vezes simplesmente porque eu realmente queria uma imagem incrível que encaixasse perfeitamente na minha seção de heróis em um site Às vezes, vale a pena encadernar uma imagem só porque ela é de melhor qualidade e talvez atenda perfeitamente às suas necessidades. Mas, obviamente, depende totalmente de você. Agora, outro ótimo lugar para obter imagens incríveis é o adoby stock images Agora, pessoalmente, eu realmente prefiro ações da Shutter a um Derby por algum motivo Não sei por que, mas tudo depende das imagens que você está procurando. Pessoalmente, eu recomendaria procurar e pesquisar o tipo de imagem que você deseja e, em seguida, basicamente escolher a imagem que você acha que melhor combina com você. Obviamente, não há uma resposta certa ou errada, mas lembre-se criei um recurso que você pode usar para acessar cada uma dessas plataformas em páginas específicas, para que você possa começar a pesquisar imagens sem qualquer dúvida Eu sei que essa lição foi sobre Sean Sweet, mas tive que compartilhar isso com você porque existem toneladas de imagens que você pode usar, e eu quero que você encontre as melhores para o site da sua marca De qualquer forma, estou ansioso para ver você na próxima lição. Nos vemos lá. 19. Design de sites 101: recorte e enquadramento (regra dos terços): O que é cortar e emoldurar? E qual é a regra dos terços? Bem, se você tem alguma experiência em fotografia , já deve conhecer a regra dos terços Mas, em última análise, ao entender o recorte, o enquadramento e a regra dos terços, você pode realmente adicionar muito mais personalidade e realmente criar uma imagem cativante a partir de uma imagem que, à primeira vista É realmente um divisor de águas. Quando você entende como fazer isso corretamente, pode realmente ajudar a melhorar o design do seu site tão rapidamente Isso ocorre porque quando uma imagem é cortada e enquadrada da maneira correta usando a regra dos terços, você pode realmente ajudar a guiar o olhar do usuário e criar uma imagem que realmente atraia interesse Então, o que é cortar e emoldurar em primeiro lugar? Basicamente, é pegar uma imagem, redimensioná-la e cortar algumas partes para tornar a imagem mais interessante Agora, você pode fazer isso usando a regra dos terços, e a regra dos terços é essencialmente onde você divide a imagem em nove partes iguais Isso é feito adicionando duas linhas verticais e duas linhas horizontais diretamente na imagem. Agora, eles nem sempre precisam ser iguais, mas na maioria dos casos, haverá. Agora, a regra dos terços não é usada apenas no design de sites ou na fotografia, mas também em filmes. Usar a regra dos terços ajuda você a atrair interesse para certos elementos da imagem Ajuda a criar pontos focais e, essencialmente ajuda a imagem a parecer mais intrigante e cativante E você pode usar a regra dos terços para adicionar diferentes dimensões à imagem, diferentes profundidades Você também pode usá-lo para brincar com o peso visual da imagem, o que é muito interessante, o que pode realmente ajudá-lo a evitar uma abordagem centralizada muito chata, que não será muito interessante de se ver Agora, uma coisa a lembrar é a consistência. Então, se você vai usar a regra dos terços em todo o seu site, simplesmente certifique-se de fazer isso em cada imagem para adicionar intriga em cada ponto em que cada imagem para adicionar intriga em cada ponto em as pessoas estão vendo fotos em seu Então, só um pequeno exercício, eu sei que você pode não ser um fotógrafo ou, você sabe, um diretor de cinema ou um designer de sites neste momento. Embora seja isso que estamos tentando fazer, gostaria que você visse esses dois exemplos e me dissesse qual deles você acha que está usando a regra dos terços em relação ao corte e à Como sempre, vou te dar 3 segundos. Três. Dois, eu não preciso que você assista. Um. Você acertou? Então, como você pode ver aqui. Essa imagem em particular é apenas mais cativante. É apenas mais interessante e atrai você. No entanto, com essa imagem, ela simplesmente não é tão interessante. É simplesmente chato. Simplesmente não parece chamar minha atenção tanto quanto o outro. Então, se você acertou, dê um tapinha nas costas, bata palmas, vire-se, toque os dedos dos pés e vá tomar um café, para comemorar porque estamos prestes a começar a próxima aula, então nos vemos em breve 20. Design de sites 101: contraste (e requisitos legais nos EUA): A importância do contraste no design do site. Por que isso é importante e o que isso significa? Bem, vamos começar entendendo realmente o que o contraste realmente significa. Agora, algumas pessoas pensam que o contraste é apenas algum tipo de truque visual quando na verdade é muito mais do que isso. Porque o contraste no design do site pode ajudar na legibilidade Isso pode ajudar a melhorar a experiência do usuário e também pode ajudar o usuário a chegar onde precisa estar com muito mais rapidez, direcionando seus olhos e atenção E tudo isso é extremamente importante, mas algo ainda mais importante é o fato de que, se você não tiver um certo nível de contraste nos EUA e atender aos requisitos deles, poderá acabar com uma multa pesada E estes são fortemente aplicados como padrão ADA e também como padrões WC AG Basicamente, se alguém com deficiência visual não consegue diferenciar certos elementos em sua página da web porque o contraste não existe e não é bom o suficiente , isso pode te deixar em apuros. Agora, você pode realmente verificar o contraste neste site abaixo. Também vou adicioná-lo ao curso que você mesmo possa conferir e usá-lo ao criar seu site para garantir que está seguro legalmente. Agora, resolvemos as coisas legais nascidas. Que tal realmente usar contraste para melhorar a aparência do seu design para o usuário? Bem, uma das mais importantes é a diferença entre o contraste do texto e do plano de fundo. Agora, com tudo o que eu ensinei neste curso até agora, você deve usar um fundo branco para o seu site real e, em seguida, usar texto em preto ou cinza muito escuro. Então, do ponto de vista do contraste, você deve estar bem. A única diferença é se a cor primária ou as cores de destaque não forem suficientemente contrastadas com o branco, o que pode causar alguns problemas Certifique-se de verificar o site que eu lhe dei há pouco nesta lição, para que você possa ter a certeza de que o contraste do seu site está perfeito. Outra coisa que é realmente interessante em relação ao contraste é a hierarquia visual Por exemplo, o site da Apple usa isso para a barra de navegação. É essencialmente uma forma envolvente de usar o contraste para interagir com o usuário. Isso os ajuda a saber no que estão clicando e para onde estão indo. E, em última análise, isso só aumenta a experiência do usuário para realmente criar um site incrível para eles navegarem Agora, o que eu realmente quero fazer é deixar claro a lição de como é importante o contraste. Então, confira esses dois exemplos. E não me deixe em 3 segundos, qual deles você acha que está usando o contraste corretamente. E 32, um. Você acertou? Como você pode ver com o design deste site , tudo parece bom. É muito claro, posso ver tudo e é muito fácil de digerir No entanto, no outro site, é um pouco diferente. É um pouco artístico demais e eu realmente não consigo ler parte do texto. É legível, mas não é tão fácil quanto o outro design Tenha isso em mente quando se trata de criar seu site. Mantenha as coisas simples. Honestamente. Uma das coisas que eu digo literalmente a cada estudante, fundador empresário e designer com quem trabalho nos últimos dez anos é manter as coisas simples. Não precisa reinventar a roda. Use seu bom senso em relação ao uso de preto com fundo branco e escolha uma cor realmente única para sua paleta de cores, mas certifique-se seguir os padrões dos EUA se estiver lá, porque eu não quero que você tenha problemas ilegais Está bem? Te vejo na próxima aula. 21. Design de sites 101: repetição e consistência: Por que a repetição e a consistência são muito importantes ao criar um site bonito Bem, quando esses dois princípios se unem, isso ajuda a criar uma experiência de usuário previsível, ajuda o usuário a usar menos calorias mentais ao navegar seu site e cria uma melhor experiência geral do usuário. Não se trata apenas de duplicar tudo e fazer tudo da mesma forma Não é disso que se trata. O objetivo é ter determinados sistemas instalados em seu site e o design para garantir que, quando a pessoa estiver navegando pela página do seu site, pareça uma experiência longa e perfeita E isso não é complicado de fazer. Em última análise, é apenas garantir que suas cores, fontes, imagens e outros elementos tenham um tom consistente e que o estilo de cada um desses elementos se repita em todo o site Isso pode ajudar a criar uma experiência com a qual o usuário possa se familiarizar. E ao usar a repetição e consistência em todas as páginas do seu site, isso também pode ajudar sua marca a parecer mais profissional e , portanto, mais confiável Mas isso também inclui coisas como botões e o espaçamento entre as letras do texto e o espaço entre o título e o conteúdo Muitos elementos diferentes que você pode essencialmente reunir para criar sua experiência geral no site. Então, como você pode garantir que todo o seu site seja consistente e que você esteja usando a repetição de uma forma que não seja entediante, mas, mais ainda, envolvente e construa confiança Bem, pense assim. Todas as suas coisas básicas precisam ser as mesmas. Mas você pode se expressar de maneiras diferentes para criar uma experiência envolvente para seu usuário? Por exemplo, nas postagens do blog, você pode ter a chamada à ação no mesmo lugar. Isso garante que, sempre que o usuário estiver lendo postagens diferentes no blog e tentando se educar, ele saiba sempre onde estará a chamada à ação inconsistência da petição também é muito importante especificamente no site de comércio eletrônico Pense nas páginas do produto e como as páginas de produtos diferentes são , em última análise, todas diferentes porque são um produto diferente, mas as imagens reais exibidas no produto são muito semelhantes Eles têm os mesmos ângulos, o mesmo estilo, talvez a mesma cor de fundo. Tudo isso se junta para criar repetitividade e consistência, ao mesmo tempo em que permite que cada produto brilhe de maneira individual Outra coisa, que não é muito visual, mas tem mais a ver com a experiência real do usuário, é garantir que a funcionalidade de cada página também seja consistente. Por exemplo, com sua barra de navegação, se sua barra de navegação uma cor diferente a cada vez, ela for para uma página diferente, ela realmente não ficará muito boa. Portanto, lembre-se de que consistência e repetitividade não são entediantes Na verdade, é algo que seu usuário precisa. Eles precisam se familiarizar com seu site para que possam usá-lo da maneira mais eficaz para chegarem aonde precisam, no menor tempo possível e com o menor número de cliques Agora, só para se divertir, vamos dar uma olhada nesses dois exemplos e você me dizer qual deles está usando a teoria e a prática da repetição e da consistência para criar um arquivo geral melhor, que pareça mais familiar para o usuário Ok, eu vou te dar 3 segundos, então três, dois, um. Você acertou? Agora, se você não acertou, não se preocupe. Vamos aprender e ver muitos outros exemplos à medida que avançamos no curso. E a consistência e a repetição serão muito evidentes quando construirmos nosso site posteriormente Mas se você acertou, parabéns, dê tapinha nas costas e outro café para você E se você não gosta de café, então eu não sei. Eu não sei o que dizer para você. De qualquer forma, nos vemos na próxima aula do curso? Mal posso esperar para ver isso. 22. Design de sites 101: sobreposição: Ok, então o que está se sobrepondo no web design? Bem, a sobreposição é uma forma pouco convencional de desenvolver seu site, porque geralmente tudo gira em torno de coisas muito estruturadas Mas a sobreposição pode adicionar um pouco de intriga visual e também pode fazer com que as coisas pareçam um pouco mais criativas Ao usar a sobreposição, você pode realmente atrair o usuário e, você sabe, capturar essa atenção Então, como você realmente usa sobreposição corretamente em seu site Bem, você pode usar várias maneiras diferentes, mas, em última análise, a regra principal é basicamente quebrar a regra de usar grades, sobrepor dois elementos para que eles criem algum tipo de profundidade intrigante Agora, o que você está realmente fazendo com sobreposição é permitir que um elemento ultrapasse seus limites E ao romper limites externos, nossos olhos são instantaneamente atraídos para ela porque , em última análise, ela não deveria estar onde está. Na verdade, está cruzando limite de outro elemento, que pode fazer com que a página pareça um pouco desarrumada, mas, se for feita corretamente, pode funcionar muito pode Agora, algumas coisas em que pensar, se você está se perguntando se valerá a pena fazer sobreposições em seu site específico A primeira coisa é que ele pode realmente dar um toque moderno e agradável. Os sites tradicionais podem não precisar da abordagem sobreposta, mas se você quiser que eles sejam vistos como um pouco diferentes, um pouco inovadores e um pouco novos e modernos , a sobreposição pode ser uma ótima Agora, uma ótima maneira de pensar sobre sobreposição é usá-la como camadas Então, por exemplo, você tem cor base do seu site, que é a primeira camada, depois a camada secundária, que é o primeiro elemento, e a camada superior deve ser o outro elemento, que obviamente se sobrepõe ao primeiro Agora, o elemento superior, que está sobreposto, deve ser um pouco menor porque você deve ser capaz de ver a base do site, a primeira camada e a segunda camada de uma só vez Não deve se sobrepor muito , porque isso acabará por esconder o primeiro elemento e contradizer completamente toda a prática de sobreposição em Agora, outra coisa a se pensar é usar a sobreposição com moderação, porque isso arrasta o olho em direção à sobreposição, e isso porque você pode chamar a atenção para o elemento sobreposto, mas na verdade não quer usá-lo com muita frequência, porque E, usuário, você vai ver isso como um pouco chato com o tempo O melhor lugar que eu gosto de usá-lo é na seção de heróis. Eu realmente chamo a atenção das pessoas, isso as atrai . Então você chama a atenção delas para que elas possam percorrer o resto do seu site. Lembre-se também de que você pode usar a sobreposição para destacar certos aspectos de um site, como sua chamada à ação, por exemplo Porque lembre-se de que você está usando a sobreposição para atrair a atenção das pessoas para esse elemento específico Use-o a seu favor, use-o estrategicamente. Agora eu queria mostrar dois exemplos. Só um pouco de diversão para ver se você consegue identificar sobreposições feitas corretamente e sobreposições feitas bem, não tão ver se você consegue identificar sobreposições feitas corretamente e sobreposições feitas bem, Quais são esses dois exemplos que você acha que são os melhores? Qual deles você acha que está usando sobreposição da maneira correta Três, dois, um. Esse é o único. Você acertou? Agora, se você não acertou, não se preocupe. A sobreposição não é para todos. Além disso, abordaremos um pouco mais adiante no curso, para que você possa aprendê-lo então. Mas se você acertou, muito bem, dê tapinha nas costas, e nos vemos na próxima lição. Te vejo mais tarde. 23. Design de sites 101: espaço em branco: Espaço em branco no design do site. Quão importante é isso? O que é isso? E como podemos usá-lo para criar belos sites? Agora, como eu disse, logo no início do curso, acho que, pessoalmente, 99% dos sites deveriam ter um fundo branco ou um histórico profissional muito, muito real. E há uma razão para isso porque as pessoas gostam de brancos. Especialmente eu. Eu adoro branco. Agora, a razão pela qual gostamos do branco é porque ele permite que os elementos do site respirem. Agora, o espaço em branco pode ser chamado de muitas coisas diferentes. Há um espaço em branco micro, há um espaço em branco macro, que será abordado um pouco mais tarde, mas também é conhecido como espaço negativo, que também se inclina para o design de logotipo, se você for um designer de logotipo. Há algumas coisas que são realmente importantes lembrar quando você usa espaços em branco no design do seu site para realmente obter os melhores resultados. Agora, o que é espaço em branco em primeiro lugar? Bem, espaço em branco é o espaço deixado intencionalmente que não tem nada nele Está completamente em branco. O espaço em branco basicamente fornece todo o conteúdo e os elementos da sala do seu site para respirar. E sem esse espaço para respirar, seu site pode parecer bastante restrito e ocupado, e nós realmente não queremos que o site pareça super ocupado Queremos que seja um pouco mais moderno, um pouco mais arejado, para que a pessoa se sinta à vontade enquanto navega lentamente pelo seu site e descobre mais sobre você navega lentamente pelo seu site e descobre mais sobre Agora, o espaço em branco pode realmente ajudar a criar um design realmente organizado. E essa é a chave. Você quer tornar seu conteúdo super legível para seus usuários, que, em última análise, eles possam ter a melhor experiência possível e consumir todas as informações que você precisa digerir Em última análise, isso leva a um design mais asteticamente agradável. Agora, se você não usa espaço em branco , corre o risco de sobrecarregar páginas do seu site e fim, impedir que as pessoas queiram passar muito tempo vendo a Apple ver que elas usam toneladas de espaço em branco ao criar seus sites E você ficaria surpreso com o quão bonito um texto simples com uma bela imagem e muito espaço em branco pode realmente dar vida ao seu site. Em relação ao design do site, às vezes menos é mais. Portanto, ter muito espaço em branco pode realmente ajudar a criar essa bela experiência que seus usuários podem esperar. Agora, qual é a diferença entre espaço em branco macro e micro? Porque isso é muito importante. Agora, o micro espaço em branco é a coisa maior, como, por exemplo, seu plano de fundo, como o preenchimento e margem entre o título e o conteúdo, por exemplo, o espaço entre o conteúdo do seu site sendo o texto e também as imagens que você tem ao lado, talvez, como o espaço entre o botão e a parte inferior de algum texto acima dele talvez, como o espaço entre o botão e a parte inferior de algum texto enquanto o micro espaço em branco é um pouco diferente. coisas como o espaço entre o texto em seu site, apenas para dar a ele um pouco de espaço para respirar, ou talvez até mesmo o aumento do espaço em branco entre o texto que está em um botão, por exemplo, para dar um pouco mais de espaço para respirar e ajudá-lo a se destacar. Agora, é um pequeno experimento. Vamos dar uma olhada em dois sites diferentes, um usando espaço em branco corretamente e outro que não está usando exatamente o espaço em branco à direita. Qual desses dois você acha que está usando melhor o espaço em branco? Vou te dar um pouco de tempo. Três, dois, um. Você acertou? Como você pode ver, usar o espaço em branco corretamente pode realmente ajudar você a criar uma experiência incrível para seus usuários. Mas se você não o usa corretamente e seu site está um pouco confuso e não está realmente organizado adequadamente, você também pode ter um efeito negativo Portanto, reserve um tempo, dê um passo atrás e lembre-se sempre de que você sempre pode adicionar e retirar e experimentar ao criar seu site. De qualquer forma, espero que você ache esta lição útil nos exemplos. Então, estou ansioso para ver você mais tarde no curso. Te vejo então. 24. Design de site estratégico: definindo seus objetivos: Como você encontra o objetivo estratégico do seu site? Bem, nesta lição, aprenderemos como você pode encontrar os objetivos do seu site, para ter certeza de que seu site está trabalhando duro para você todos os dias, 24 horas por dia , sete dias por semana , 365 dias por ano A maneira como eu gosto de pensar um site é como um funcionário digital. Portanto, meu site está trabalhando duro para converter o tráfego do site em clientes pagantes. Tudo o que eu preciso fazer é fazer uma rápida ligação de vendas com eles e levá-los até a linha de chegada. Agora, obviamente, cada empresa é única e um pouco diferente à sua maneira. Mas os objetivos que os sites dessas empresas precisam alcançar são muito semelhantes. Então, como você encontra pessoalmente os melhores objetivos que seu site precisa alcançar para sua empresa? Agora, a primeira coisa que quero dizer é que, embora existam alguns sites que tentam atingir muitos objetivos ao mesmo tempo, esta é a primeira vez que você está criando um site, você deve se concentrar em apenas um objetivo ou em um objetivo principal e em um objetivo de apoio. Não, se isso ainda não faz sentido. Vamos nos aprofundar um pouco mais nesta lição. Agora, a razão pela qual vejo isso para focar apenas um ou dois objetivos é manter as coisas simples. Isso ocorre porque, quando um usuário acessa seu site, a última coisa que queremos é que ele fique confuso. Na verdade, mostrarei alguns exemplos um pouco mais tarde nesta lição de sites que usam a abordagem de um e dois objetivos, que sugiro que todos usem quando estiverem criando um site para sua empresa pela primeira vez. Agora, se você está criando um site para uma marca de comércio eletrônico , os objetivos que você deve ter são bem simples. O primeiro objetivo deve ser bastante autoexplicativo, que é gerar vendas Portanto, tudo relacionado ao seu site deve se concentrar em gerar o maior número possível de vendas. Vamos abordar alguns métodos especiais, como vendas adicionais, vendas cruzadas e várias outras táticas de marketing e vendas Mas, neste momento, precisamos nos concentrar apenas nos objetivos que seu site tem e no que ele precisa alcançar. Agora, obviamente, vender seria o objetivo principal de qualquer empresa de comércio eletrônico, mas o objetivo secundário seria reunir o maior número possível de endereços de e-mail para que você possa vender para essa pessoa em particular mais tarde. Criar uma lista de e-mail que permita que você mantenha contato direto com clientes em potencial interessados no que você tem para vender. Portanto, permitindo que você gere mais receita no futuro. Agora, quando você está criando um site que vende produtos ou serviços digitais, a abordagem é bem simples e direta Agora, para que sua empresa tenha sucesso, você precisa vender seus produtos ou serviços. E para fazer isso, você pretende fazer algum tipo de ligação de vendas com um cliente em potencial para discutir suas necessidades , para que ele possa finalmente comprar de você e se sentir confortável fazendo isso. Portanto, para um site que está vendendo algum tipo de serviço ou produto digital ou algo intangível, como uma marca de comércio eletrônico, por exemplo , seu objetivo principal deve ser configurar algum tipo de chamada de vendas ou realmente gerar uma mensagem para ver se isso é Para mim, pessoalmente, com meu negócio baseado em serviços, eu me concentro em gerar chamadas de vendas, para que eu possa realmente discutir o projeto com o cliente e, finalmente, fechar a venda a partir daí. Agora, como objetivo secundário, isso pode ser criar confiança. Por exemplo, para o site da minha agência de branding , clementinh do, posicionei meu site para mostrar todo o trabalho que fiz Também me certifico de responder a todas as perguntas que clientes em potencial possam ter com frequentes e adicionando depoimentos clientes anteriores com quem trabalhamos E também fiz questão de adicionar alguns questionários no site para que pudéssemos realmente começar a gerar leads fazendo perguntas aos clientes em um ambiente digital A realidade é que os clientes não sabem o que não sabem. Ao fazer perguntas instigantes, isso nos posiciona como especialistas na área de nomes de marcas, design de marca e também desenvolvimento de sites, de modo que, quando os clientes entrarem em contato conosco e realmente começarem a nossos questionários e dar uma olhada em nosso site, eles sintam que pelo menos sabemos do que estamos Agora, criar um site para uma marca pessoal vem de uma variedade de objetivos diferentes que você pode escolher. Agora, esses são os objetivos mais comuns que vejo em sites de marcas pessoais O primeiro objetivo é criar sua lista de e-mail. Assim como em um site de comércio eletrônico, por exemplo, você está tentando criar uma lista de e-mail e uma lista de pessoas para as quais você pode vender mais tarde, quando for a hora certa. Basicamente, você está mantendo contato direto com pessoas interessadas no que você tem para ver e no que você pode ter a oferecer no futuro. Então, em última análise, ter algum tipo de geração de leads ou algum tipo de download gratuito onde as pessoas possam trocar seus endereços de e-mail por esse ativo específico, isso acabará por ajudá-lo a aumentar sua lista de e-mail muito rapidamente. Esse provavelmente seria seu objetivo principal. Mas quais seriam os objetivos secundários que você poderia potencialmente explorar? Bem, se você realmente quiser adicionar objetivos secundários, isso pode ser aumentar seu número de seguidores nas redes sociais. Por exemplo, alguém pode encontrar você no YouTube e depois visitar seu site Por ter pequenos ícones no pé, mostrando basicamente que você também está ativo no TikTok e no Instagram, as pessoas também poderão encontrá-lo nessas outras plataformas Então, basicamente, você está criando esse ecossistema e uma comunidade de pessoas que querem saber mais sobre você e, em última análise, querem seguir o que você tem a dizer. Agora, à medida que a marca pessoal de alguém cresce, obviamente, o site também pode ter que oferecer diferentes tipos de produtos. Por exemplo, se a marca pessoal tem muita autoridade e confiança, essa pessoa pode ser contratada para palestras e, talvez, para endossos da marca Então, você precisará adicionar outros elementos ao site para acomodar isso. Analisaremos diferentes sites e os objetivos que eles estão tentando alcançar ao longo do curso. Não se preocupe se as coisas ainda não estiverem 100% claras. Neste ponto, tudo o que preciso que você faça é começar a pensar nos objetivos que deseja que seu site alcance e anotá-los. Porque ao escrevê-las, você descobrirá que tudo o que você faz, quando realmente começa a projetar e criar seu site quando realmente começa a projetar e criar seu site, fica muito fácil quando você tem um foco claro no que está tentando alcançar. De qualquer forma, eu realmente espero que você goste desta lição e nos vemos na próxima. Te vejo. 25. Design de site estratégico: encontrando inspiração: Antes de começar a criar seu site, você precisa de inspiração. Agora, existem dois lugares principais onde você pode encontrar uma incrível onda de inspiração ao criar seu site e pensar em ideias para ele. Agora, o primeiro vem na forma de café. E, para ser sincero, é praticamente daí que vem toda a minha energia nos dias de hoje, com um pouco de açúcar e sobremesa. E Binsu. Se você nunca teve BinSu, experimente. É incrível. E outro lugar onde você pode encontrar inspiração é adivinhar On-line. Então, na verdade, eu recomendo esses três sites para encontrar inspiração on-line para suas ideias de desenvolvimento de sites. Portanto, o primeiro lugar são os prêmios escritos E W, W, W. Ard s.com Ard Prêmios são essencialmente o ápice de todo design de desenvolvimento de sites, Não, os sites são extremamente bem projetados e são essencialmente classificados por especialistas em desenvolvimento de sites, para que você possa obter os melhores sites muito mais cedo, sem precisar vasculhar muitos sites ruins, se isso fizer sentido Então, se você está tendo dificuldades para entender o que torna um site bom e um site ruim, confira esses sites e saiba que eles estão todos corretos. Agora, você pode realmente clicar em cada site e experimentar o site um pouco mais e entender um pouco sobre como a pessoa realmente teve a ideia, por que ela fez certas coisas, só para realmente ter uma ideia de como você deseja abordar o desenvolvimento do seu site. Agora, lembre-se, e eu mencionei isso anteriormente no curso, que quando você está visitando outros sites, você não precisa copiar seu site, você sabe, Spade para acelerar, mas o que você pode fazer é ver o que você gosta nesse site e, em seguida, tirar isso como inspiração desse site para usá-lo como parte de sua própria ideia Então, o melhor dos prêmios é que você mesmo pode visitar o site e vê-lo totalmente em funcionamento, para que você possa realmente experimentar o que o designer construiu. Agora, outro ótimo lugar para encontrar inspiração é um site chamado B hands. E, novamente, existem muitos tipos diferentes de sites para você escolher. Então, se você simplesmente rolar e encontrar algo que você acha legal como este, por exemplo, então você pode realmente passar pelo processo de como aquele designer em particular teve a ideia. E, novamente, você pode simplesmente pegar as coisas que você gosta do site. Então, talvez você realmente goste da fonte e de sua aparência elegante, talvez goste do esquema de cores e de como a fotografia combina muito bem com os brancos, cinzas e pretos dos Talvez você goste do fato de ser muito limpo e simples, e de não haver muita coisa acontecendo. Portanto, anote o máximo de notas possível, porque mais tarde, quando começarmos a criar seus sites, você poderá entender exatamente do que gosta e do que não gosta, para que o resultado final seja melhor do que você poderia imaginar. Be Hans, para ser honesto, tem a maior variedade de sites incríveis para vários tipos diferentes de Por exemplo, seja uma marca pessoal ou uma empresa de serviços ou até mesmo uma empresa de serviços em um setor específico, você pode pesquisar o tipo de site que deseja ver. E, finalmente, B Hans fornecerá os exemplos mais relevantes que também são os mais apreciados, para que você obtenha os melhores sites possíveis na plataforma sem nenhum esforço adicional Agora, o último lugar em que você talvez não tenha pensado ao se inspirar para o design do seu site é o Pinterest Agora, como você pode ver aqui, o Pinterest tem alguns exemplos incríveis de desenvolvimento de sites, muitos tipos diferentes de sites, para muitos tipos diferentes de setores, e você não precisa se inspirar apenas nos tipos de sites específicos para sua marca específica Você pode ver sites de várias marcas diferentes e, em última análise, aproveitar o melhor de todas elas para criar uma experiência realmente única para seu usuário. E, assim como B Hans, você pode pesquisar tipos muito específicos de sites, como sites de comércio eletrônico, sites de marcas pessoais ou sites de serviços, para obter os tipos de sites relevantes para sua marca e empresa em particular, para que sua marca e empresa em particular, você possa se inspirar muito mais cedo Além disso, assim como em B hands, o Pinterest coloca os melhores sites no topo, para que você possa obter os melhores exemplos possíveis muito mais cedo 26. Design de site estratégico: exemplos de sites de comércio eletrônico: Construir um site de comércio eletrônico significa que você precisa basicamente vender o máximo de produtos possível pelo máximo possível. E se você quer ser o melhor em seu mercado específico , deve pesquisar o melhor em seu setor específico Por exemplo, se você fosse uma joalheria , procuraria alguém como a Tiffany and Co que sabe exatamente como vender produtos de alta qualidade, Sim, de fato, eles existem desde 1837, mas isso significa que há um tesouro de lições a serem aprendidas para você possa descobrir o que gosta e o que não gosta na forma como eles fazem seu site Agora, você pode ver aqui, todas as fotografias de seus produtos são absolutamente perfeitas Eles também cortaram seus produtos com algumas belas fotos de estilo de vida, de seu produto sendo ganho por uma modelo adorável. Você também pode ver que eles fazem isso com bastante frequência mostrando a modelo realmente usando o colar, apenas para atrair o interesse do usuário novamente, e não estão apenas vendo produtos mundanos Você pode ver que a interface do usuário é muito, muito perfeita Na verdade, você pode navegar pelos diferentes produtos. Assim, você pode realmente entender o que está comprando antes clicar no produto para ver os detalhes mais sutis E você pode ver como eles realmente se concentram em usar uma paleta de cores muito simples de cinza e branco e, você sabe, tons de bronze para finalmente posicionar a marca muito bem e deixar a cor principal da Tiffany Essas são apenas algumas coisas que eu aprendi ao visitar o site da Tiffany and Core por alguns minutos, mas você deveria passar mais tempo nos sites da concorrência para ver o que eles estão fazendo bem e o que não estão fazendo tão Inspire-se, faça anotações e saiba o que você gosta e o que acha que funcionará para sua marca específica. Agora, como outra marca que sabe o que está fazendo quando se trata de comércio eletrônico, para dizer o mínimo. Vamos conferir o site da Nike para descobrir o que eles fazem para realmente se conectar com seu público-alvo e finalmente, criar a melhor experiência possível, que é a marca, para vender o máximo de produtos possível O que você pode ver aqui assim que acessa site da Nike é que eles estão muito focados nos treinadores E grande parte da receita da Nike, na verdade vem de sapatos e tênis e, em particular, dos tênis Jordan, que são extremamente populares nos EUA e praticamente em todo o mundo Então, o que você pode aprender com isso é que, quando você tem um produto principal ou um best-seller, ele deve estar na vanguarda de tudo o que você faz em seu site Esse deve ser o primeiro produto que você vê. Esse deve ser o produto que é apresentado com mais facilidade Além disso, lembre-se de que quando estamos realmente visualizando um site, visualizamos do canto superior esquerdo ao canto inferior direito nessa ordem. Então, cruzamos em linhas. Então, em última análise, o que você quer fazer é olhar para ela como se estivesse lendo um livro. A menos que, em algumas culturas em que você lê da direita para a esquerda, a maioria das pessoas no mundo ocidental leia da esquerda para a direita. Portanto, tenha isso em mente e certifique-se de se posicionar nos produtos da esquerda para a direita com base em sua importância e popularidade. Então, novamente, estou apenas examinando os diferentes elementos do site e tentando aproveitar o máximo possível. Tipo, eu realmente gosto dessa seção em particular simplesmente em que é como um vale-presente, certo? Todos os melhores presentes. Nike. Parece muito legal. Adoro o esquema de cores, adoro como o dourado e o verde funcionam juntos. Então, isso pode ser algo que eu anote ou talvez até faça uma captura de tela para dizer: Ok, se eu vou fazer um vale-presente, vou fazer algo assim Esse é o tipo de estilo que eu quero. E eu posso levar isso para a próxima etapa, que será realmente construir o site e usar essa parte específica do site como inspiração. Se eu quiser oferecer um vale-presente dentro da minha oferta específica. Portanto, não importa de onde você tire sua inspiração, seja em B Hands, prêmios, Pinterest ou sua concorrência, tudo o que importa é que você reserve tempo para aprender do que gosta e do que não gosta Assim, você pode criar o melhor site para você. De qualquer forma, eu realmente espero que você tenha gostado dessa lição. Te vejo na próxima. Te vejo. 27. Design de site estratégico: exemplos de sites de marca pessoal: Para se inspirar em sites de marcas pessoais, você pode ver o quão incrível esse site em particular parece para UC e Bolt, que é esse cara extremamente rápido que você não quer perseguir ou ser perseguido Agora, para ser totalmente honesto, eu realmente amo a simplicidade desse site, mas, além disso, não vejo muita coisa sobre o site que eu goste Na verdade, eu não usaria muito desse site em particular em meu próprio design. Eu acho que é muito simples são muito mínimos. Gosto como está na marca com as cores dele e gosto muito do logotipo. Mas, além disso, isso não é realmente o que estou procurando, e tudo bem. Então, quando você está realmente visualizando um site, não precisa amar tudo sobre ele. Na verdade, você pode não gostar de muitas coisas sobre isso. Basta dar um passo atrás e ver as coisas do seu ponto de vista do usuário, certo? Você sabe, se você fosse o usuário, quanto a este site, você acha que acrescenta à experiência e o que você tira da experiência? Porque dedicar um tempo para realmente entender exatamente o que você entender exatamente o que você gosta do ponto de vista do site, isso permitirá que você tome melhores decisões mais tarde, mas você só se permite tomar essas decisões e realmente aprender sobre o que gosta e o que não gosta, dedicando um tempo para entender o que mais está disponível Você precisa ver outros sites que estão no seu espaço para entender o que eles estão fazendo, para que você possa entender o que é para você e o que não é para você. Se olharmos para outro site de David Goggins, que é esse cara realmente inspirador do Navy Seal que estava originalmente muito acima do peso, e agora ele é como um Ele está fazendo com que você compre o livro dele nessas diferentes plataformas. Ele também tem ótimos depoimentos de nomes como Dyn the Rock Johnson e E, em última análise, este site também não é louco. Eu não estou completamente apaixonado por isso. Mas uma coisa que eu realmente gosto neste site é a página de conquistas. Então, ele tem uma página sobre seus anos de conquistas atléticas desde 2005 Então, essas são todas as diferentes corridas em que ele participou para finalmente levá-lo ao ponto em que agora ele é um maníaco absolutamente louco, que pode literalmente, você sabe, quero dizer, isso é na verdade um exemplo dele quando ele estava de volta na véspera de ser um selo da Marinha Agora, ele é, você sabe, eu acho, apenas uma das pessoas mais aptas e atléticas do planeta Ele é simplesmente louco, certo? Então, este site realmente mostra quem ele é como pessoa Isso mostra o tipo de mentalidade que ele tem, e ele não está apenas falando sobre isso Na verdade, ele está te mostrando que eu fiz todas essas corridas. Eu vim primeiro, eu vim em segundo. Sabe, eu não me classifiquei nesta, mas ainda assim consegui, e é como uma corrida de 22 horas, o que é uma loucura. Gosto dessa página em particular como construtora de confiança. Então, acho que isso é algo que eu realmente posso usar como inspiração quando estou criando meu próprio site de marca pessoal Uma marca pessoal deve ser capaz de mostrar às pessoas que elas podem seguir em frente, bem como falar, o que é muito importante porque você precisa criar confiança e autoridade. Portanto, não importa de onde você tire sua inspiração, seja em mãos B, prêmios, interesses ou concorrentes, tudo o que importa é que você reserve tempo para aprender do que gosta e do que não gosta. Assim, você pode criar o melhor site para você. De qualquer forma, eu realmente espero que você tenha gostado dessa lição. Te vejo na próxima. Te vejo. 28. Design de site estratégico: exemplos de sites B2B: Agora, no que diz respeito à inspiração de empresas baseadas em serviços ou à venda de software, por exemplo, a monday.com é um ótimo Agora, se você não sabe o que é a monday.com, é basicamente como uma plataforma de produtividade qual você pode, em última análise, gerenciar seu dia ou gerenciar seus clientes e todo esse tipo de coisa É essencialmente muito parecido com a noção, mas é basicamente mais caro. Agora, em relação à monday.com, você pode ver aqui que eles têm uma ótima variedade de opções . Então, essencialmente, como cliente, vou escolher: Ok, talvez eu queira usá-lo para criação e design, para começar. Então, eu basicamente começo e isso me leva direto para uma página de inscrição. Então, estou me inspirando aqui pensando: Ok, talvez com minha empresa em particular, eu queira mostrar as opções que o usuário deve ter, para que, você sabe, possamos começar a pegar todos os visitantes do site e colocá-los em determinados grupos para que eu possa criar uma experiência melhor daqui frente, porque quando eu clico nesse botão, dizendo à monday.com que me leve às páginas, que são relevantes para a criação e o design. Se eu clicar em algo como marketing, isso me levará a uma página que é mais relevante para o marketing. Se eu clicar em algo como RH, ele sabe que vou usá-lo para RH. Então, pense nisso quando estiver realmente pensando em desenvolver as páginas do seu site para levar as pessoas à página relevante o mais rápido possível. Assim, eles podem se inscrever para começar a lhe dar dinheiro e trabalhar com você encontrar uma solução para o problema. Agora, outra coisa muito legal que eu quero te mostrar, porque é assim eu penso sobre sites quando estou apenas visualizando eles é o quão legal é, essas pequenas coisas se iluminam para interagir com você do ponto de vista da experiência do usuário , eu gosto do fato de que todos eles combinam com as cores dos ícones, e eu gosto do fato de eu realmente interagindo com o site, e parece que minha mão é uma extensão do site. Portanto, lembre-se de que a inspiração pode vir de qualquer lugar. Pode vir de cores, pode vir de fundos, pode vir da estrutura. Tenha a mente aberta sempre que estiver desenvolvendo um site ou procurando inspiração, porque a inspiração pode vir de qualquer lugar Se acessarmos este site, que é o Canva, tenho certeza que você já ouviu falar É como uma plataforma visual de design para todos. Agora, você pode ver que eles literalmente usam exatamente a mesma abordagem. Eles têm uma espécie de seção interativa em que você pode basicamente dizer: Ok, estou querendo usar o Canva para apresentações, ou talvez eu queira usá-lo para sites Isso é muito conveniente. Ou talvez eu queira usá-lo para postar no Instagram. Isso torna muito simples encontrar a página relevante que você precisa acessar o mais rápido possível. E isso não é por engano. Em última análise, essa é a melhor maneira possível fazer com que um usuário se inscreva, porque Canva e a monday.com têm o objetivo de fazer com que as pessoas se inscrevam para usar sua plataforma Porque se eles não se inscreverem, adivinhe? Eles não são pagos e não conseguem gerar receita. Então, tornar muito simples para as pessoas encontrarem a página ou as informações de que precisam com muita facilidade e chegarem aonde precisam ir o mais rápido possível, isso aumentará a quantidade de inscrições que essas duas plataformas podem alcançar Não importa de onde você tira sua inspiração, seja em B Hands, prêmios, pinterest ou sua concorrência, tudo o que importa é que você reserve um tempo para aprender do que gosta e do que não gosta Você pode criar o melhor site para você. De qualquer forma, eu realmente espero que você goste desta lição. Te vejo na próxima. Te vejo. 29. Design de site estratégico: definindo seus objetivos: Ok, então estruture as páginas do seu site. Por que começamos e como fazemos isso? Bem, se você se lembra de uma lição anterior, quando falamos sobre a página inicial e realmente chamamos a atenção da pessoa no menor tempo possível, você já conhece a estrutura que precisamos usar E essa estrutura é toda baseada em três questões principais. O número um é: estou no lugar certo? Número dois, sendo: Posso confiar em você? Um ser número três? Conte-me mais. Então, o que isso significa para a estrutura das páginas do seu site? Não importa de qual página você esteja falando em seu site, você deve estruturar as páginas do seu site em torno dessas três perguntas o tempo todo. E se você seguir a fórmula simples , nunca errará ao tentar criar qualquer página para o seu site. E isso ocorre porque eles são estruturados exatamente com as mesmas perguntas que um visitante do site se pergunta quando visita seu site pela primeira ou segunda vez. Portanto, sempre pense nas páginas do seu site nessa ordem. E isso vale para cada tipo de site existente, seja um site de comércio eletrônico, um site de serviço ou um site de marca pessoal. Agora, na próxima lição deste curso, abordaremos como sites diferentes adotam exatamente a mesma abordagem e estruturam de uma maneira um pouco diferente para torná-la própria. Obviamente, cada empresa é única. Quero oferecer a você uma estrutura sólida e confiável para seguir sempre que criar uma nova página para seu site. Porque, em última análise, seu site precisa ter uma boa aparência, mas também precisa gerar resultados, e é por isso que estamos aqui. Agora, uma coisa que eu acho muito útil ao criar um site do zero é simplesmente pegar uma caneta confiável e um pouco de papel e , na verdade, esboçar um diagrama muito simples e fácil de entender do que é cada seção e o que a seção deve incluir Por exemplo, para a página inicial, eu literalmente colocaria uma caixa na parte superior como a seção de heróis e diria: diga ao cliente por que ele está aqui. A próxima seção seria uma seção de construção de confiança. Em seguida, a seção abaixo seria o que realmente fazemos e o que podemos oferecer a você. Isso dará ao cliente exatamente o que ele quer na ordem em que deseja. E você pode fazer isso em cada seção do site. E se você dedicar algum tempo para descrever rapidamente a experiência em seu site com caixas simples e apenas texto, poderá identificar quaisquer problemas ou desafios específicos antes de chegar ao estágio de desenvolvimento do site, que ocorrerá posteriormente Seja, por exemplo, é muito fácil simplesmente rabiscar uma caixa e trocar algumas coisas em um pedaço de papel com uma caneta Mas uma vez que você realmente tempo e esforço para criar a seção e, em seguida , criá-la em seu site no Webflow , será muito mais difícil mudar, e talvez você precise voltar ao início para começar do zero Então, neste momento, podemos cometer todos os erros que quisermos e experimentar o quanto seu coração desejar, porque bastam alguns segundos para rabiscar tudo e começar novo e escrever uma estrutura totalmente nova com papel e caneta Mas só para garantir que você esteja 100% confiante quanto ao tipo de estrutura que você acha que funcionará para seu site específico, abordaremos alguns exemplos na próxima lição, onde você poderá ver como outras empresas usaram a estrutura do site para realmente criar uma ótima experiência para seus usuários. Então, com nosso colega Delay, vamos mergulhar nessa aula, e nos vemos em breve. 30. Design de site estratégico: definindo seus objetivos: Você pode realmente usar modelos de sites ou vale a pena criar seu site do zero? Bem, a verdade é que você pode fazer as duas coisas. Mas em relação aos modelos, como já mostrei neste curso várias vezes, maioria dos sites é muito semelhante Eles geralmente seguem exatamente a mesma estrutura. E as coisas que são mais diferentes são coisas como as fontes que eles usam? Cores usadas, o logotipo e as imagens. Além disso, a maioria dos sites é bem parecida. Agora, uma coisa muito diferente é a verdadeira razão pela qual o site existe. Por exemplo, você tem marcas de comércio eletrônico, marcas que são marcas pessoais e marcas que são marcas pessoais também marcas que oferecem algum tipo de serviço ou produto digital. Esses são, em última análise, os três tipos diferentes de sites que existem. Pelo menos os sites malvados que você encontrará on-line hoje. E trabalhei com milhares de fundadores na última década e acabamos criando sites muito semelhantes, mas diferentes do ponto de vista da marca Agora, você pode estar se perguntando, Scott, isso é mesmo possível? Posso realmente criar um site com base em um modelo que pareça totalmente pessoal e pessoal para mim? Bem, deixe-me dar um exemplo que pode levar a mensagem para casa. Construir um site é um pouco como decorar uma casa. Se você usar um modelo. A casa já está construída. Você já tem todos os tijolos no lugar. Tudo está bem do ponto de vista estrutural. Tudo o que você precisa fazer é aliviar as dores, colocar alguns móveis lá e pronto Agora você pode, por todos os meios, construir uma casa totalmente personalizada em outro lugar no meio da colina com uma bela vista, mas isso custará muito mais e levará muito mais tempo. Portanto, tudo depende do que você realmente precisa neste momento da sua empresa. Você precisa de algo que seja realmente sólido, confiável e com ótima aparência Ou você precisa de algo que seja totalmente personalizado e que exija muito mais tempo e muito mais energia e recursos financeiros. Obviamente, depende totalmente de você, mas a maioria dos fundadores com quem trabalhamos na última década escolheu a primeira abordagem Eles basicamente pegaram um modelo de site confiável e bem estruturado e o usaram para criar seu próprio site. E, como você pode ver, há muitas maneiras diferentes de usar exatamente o mesmo modelo para criar sites com aparência completamente diferente. Agora, não se preocupe, porque mais tarde no curso, mostrarei como pegar o modelo que você já deveria ter baixado da primeira fase do curso e transformá-lo em um site pessoal perfeito para sua marca específica, que parece completamente exclusivo para você. Isso economizará muito tempo, muito dinheiro e também ajudará você a realmente configurar um site incrível facilidade, sem problemas ou suporte Agora, obviamente, eu estarei aqui para apoiá-lo, mas eu só quero que você saiba que se você quiser fazer isso sozinho, o que você é, então você pode fazer isso com muita facilidade devido a todas as etapas que temos neste curso e quão bem estruturadas elas são. Queríamos criar a solução perfeita para qualquer pessoa, não importa quanta experiência ela tenha com design ou desenvolvimento de sites. Crie um site do qual eles possam realmente se orgulhar. Agora, em breve no curso, vamos entrar no web floor e realmente aprender a usar o web floor para editar o modelo, começando com imagens, começando pelo texto e realmente pegando o modelo e tornando-o seu. Portanto, certifique-se de que, se ainda não tiver seguido as etapas da lição três, fase um deste curso, para que você possa configurar sua conta no web floor também pode obter seu modelo conosco, para que você possa realmente começar a criar seu site mais tarde no curso. Lembre-se de usar exatamente o mesmo e-mail para a inscrição no fluxo da web e também para o e-mail que você nos fornece, para que possamos realmente enviar o modelo diretamente para você. De qualquer forma, estou muito empolgada em entrar na plataforma de fluxo da web, e é muito fácil de seguir, então nos vemos na próxima lição. Te vejo em breve. 31. Webflow 101: pacotes do Webflow: Então, eu só quero dedicar um pouco de tempo para explicar os diferentes pacotes de fluxo da web para que você possa descobrir qual é o melhor para você. Agora, para ser totalmente honesto, quando vi pela primeira vez os preços do Webflows, fiquei um pouco confuso sobre o que estou pagando Não foi muito simples, e eu estava me perguntando: Ok, estou pagando um dinheiro muito bom aqui para hospedar meu site com você, mas o que estou realmente ganhando por Agora, o que você realmente obtém com a plataforma de fluxo da web ao criar seu site no Webflow, não apenas o que você recebe no pacote, é a experiência geral Então, por exemplo, depende do quanto você valoriza seu tempo, mas em vez de gastar 10 horas alterando algo em seu site, você pode fazer algo em cerca de 5 minutos. Então essa é a primeira coisa, que pelo menos é muito valiosa para mim. O fato de que, em vez de passar por uma situação longa e frustrante, talvez eu precise contratar alguém para mudar alguma coisa, ou eu precise passar muito tempo me descobrindo Web floor torna tudo muito fácil e sem estresse, que não tenho certeza sobre você, mas para mim, pessoalmente, vale a pena pagar mais alguns dólares apenas para garantir que eu possa passar meu tempo livre fazendo o que eu realmente gosto de fazer, em vez de tentar lutar com um site que é muito difícil de gerenciar Agora, outra razão pela qual tantas pessoas usam o web floor é seu apoio. Agora, o suporte deles é, de longe, o melhor suporte disponível em qualquer plataforma que você possa usar quando se trata de criar um site. Na verdade, lembro-me de um problema que tive com um site para um cliente há pouco tempo. E quando eu enviei um e-mail para o site floor, eles não me responderam simplesmente com algum tipo de link para uma página da comunidade onde eu teria que descobrir isso sozinho O cara da equipe de suporte de fluxo na web entrou no site, fez a correção e depois me mostrou como ele fez isso. Em última análise, se você não se importa estressar e perder tempo , outras plataformas serão ótimas para você, e pode valer a pena economizar alguns dólares apenas para perder esse estresse e esse tempo extra Agora, se você não se importa em ficar estressado e perder muito tempo, então, você sabe, economize de cinco a $7 em outra plataforma, que pode ser um pouco melhor para você Para mim, pessoalmente, não conseguia pensar em nada pior do que perder muito tempo tentando consertar algo e, finalmente, obter um tempo tentando consertar algo e suporte realmente médio e apenas receber artigos para ler quando o problema poderia ser resolvido em questão de segundos E é por isso que adoro web floor, porque ele literalmente oferece muito tempo livre e ajuda você a obter o melhor site possível com o mínimo de esforço e com suporte VIP premium, que, se você já se inscreveu, já deveria ter. Em última análise, parece que o fluxo da web realmente importa. Então, vamos mergulhar nos pacotes reais que eles oferecem e posso explicar qual deles pode ser o melhor para sua situação específica. Então, se observarmos os diferentes pacotes de preços, eles têm dois tipos diferentes de pacotes. Então, um é geral, que serve apenas para sites gerais, como, por exemplo, se você está vendendo um serviço ou talvez, você sabe, fazendo um blog ou talvez até mesmo, você sabe, criando um site de marca pessoal, ou eles têm a opção de comércio eletrônico, o que é bastante autoexplicativo Agora, o melhor é que você pode mudar de um para o outro. Então, por exemplo, você pode começar com um pacote básico de $14 por mês e, quando estiver pronto para realmente vender um produto e tiver produtos prontos para vender, você pode mudar para o pacote de comércio eletrônico e ir direto para o padrão Então, na verdade, você está gerando vendas assim que estiver pronto. Agora, para o pacote inicial gratuito, você está limitado a ter apenas um domínio de fluxo da web Então, isso basicamente significa que você não pode ter marca.com como seu domínio Você precisa realmente pagar pela hospedagem para conectar um domínio personalizado ao seu site. Na verdade, teremos uma aula sobre como conectar um domínio personalizado ao site um pouco mais tarde, portanto, fique atento a isso Então, dentro do pacote de inicialização, na verdade temos duas páginas, 50 itens de CMS, que, se você não sabe o que são itens de CMS, são essencialmente coisas como postagens de blog, produtos ou talvez projetos nos quais você trabalhou do ponto de vista do serviço E você também recebe 50 envios de formulários durante toda a sua vida útil no site Agora, 50 envios de formulários basicamente significam que, se alguém tentar entrar em contato com você por meio de sua página de contatores , no final das contas, enviará essa consulta ou o levará ao seu endereço de e-mail Em seguida, passamos para a localização, que é basicamente se seu site aparecer em um computador francês no meio de Paris com um usuário francês, todo o site aparecerá em francês, ou se estiver na Alemanha, então é alemão, se estiver em outro lugar, então será um idioma diferente, etc., etc Com relação ao tráfego limitado, isso significa que, em última análise, para o pacote inicial , haverá 1.000 visitantes autorizados a entrar no site. Agora, este é um site totalmente gratuito e o fluxo da web está hospedando isso totalmente graça para você neste momento, então tenha isso em mente, mas também o 1 gigabyte de largura de banda significa essencialmente que o site carregará em uma determinada velocidade Agora, esse pode não ser o carregamento de site mais rápido que você já viu em toda a sua vida, mas será carregado com sucesso. A largura de banda está conectada a várias outras coisas, mas essa é a coisa mais importante que descobri, pelo menos para mim Quando eu tenho um site inicial, que ainda não foi publicado, e ele não tem um domínio personalizado anexado a ele porque eu não tenho uma anexado a ele porque eu opção emparelhada ou um pacote emparelhado anexado a esse site específico Demora um pouco mais para carregar. Portanto, lembre-se disso, pois ele carregará mais rápido. Depois de obter um dos pacotes emparelhados conectados ao site Agora, se você passar para o pacote básico, são $14 por mês, o que, para ser honesto, é um aço absoluto E para isso, você obtém seu domínio personalizado, então, seja qual for o domínio que você tenha para sua marca, você pode conectá-lo de forma muito simples, e mostrarei como fazer isso posteriormente no curso. Você recebe 150 páginas para o seu site, o que é suficiente. Mas uma coisa que você não obtém nesse pacote específico são os itens do CMS Agora, examinaremos os itens do CMS posteriormente no curso com muitos detalhes Então, mostraremos como usá-los forma eficaz para tornar sua vida 1 milhão de vezes mais fácil. Agora, em relação ao envio de formulários, você recebe 500 mensais, o que é bastante. Em relação à localização, você obtém uma prévia gratuita. Então, novamente, na França, surgirá em francês na Alemanha , surgirá em alemão, etc., etc Agora, em relação ao tráfego moderado, temos basicamente 50 gigabytes de largura de banda e 250.000 visitantes, o que, para ser honesto, se você está apenas começando um site, isso Isso também significa que seu site carregará super rápido e será muito bom para seus usuários. Agora, se você mudar para o pacote CMS, esse é o pacote que eu tenho para praticamente todos os meus negócios que eu uso com o Webflow Agora, o motivo pelo qual eu uso o pacote CMS é porque quero facilitar a adição de postagens no blog para adicionar projetos nos quais trabalhamos em relação à minha agência de marca, para adicionar produtos, por exemplo, se estou criando uma marca de comércio eletrônico, tudo se resume à eficiência Então, em vez de ter que criar uma página totalmente nova, tudo o que precisamos fazer é adicionar algumas coisas no back-end do site, e ele cria automaticamente a página para você usando a função CMS Agora, também com a opção CMS, você recebe um formulário KR para enviar três criadores de conteúdo, que as pessoas possam realmente entrar e ajudá-lo a criar conteúdo em seu blog ou talvez na página do seu projeto, ou, obviamente, por qualquer motivo pelo qual você esteja usando o E para o pacote CMS, você obtém 200 gigabytes de largura de banda, que inclui a velocidade do seu site, mas também a quantidade de conteúdo que você pode realmente enviar você obtém 200 gigabytes de largura de banda, o que inclui a velocidade do seu site, mas também a quantidade de conteúdo que você pode realmente enviar para o seu site. Então, por exemplo, se eu estiver adicionando imagens ou vídeos para a página do projeto , essas imagens específicas acabarão ocupando memória. Mas tudo isso pode ser armazenado no site para que o site carregue super rápido. Agora, você também recebe 250 mil visitantes com este pacote. E então, basicamente, passamos para o pacote de negócios. Agora, para ser totalmente honesto, não conheço ninguém que precisaria do pacote comercial ao começar um novo site Pessoalmente, eu manteria as coisas super simples. Então, quando você estiver realmente criando seu site, talvez eu o mantenha como um pacote gratuito até que você basicamente precise adicionar mais de duas páginas ou comece a adicionar itens de CMS em várias categorias Novamente, se você ainda não entendeu o que é o CMS, abordaremos tudo mais tarde no curso, mas ele será muito útil para você e, uma vez que você o aprenda , levará muito tempo no futuro Mas quando você supera o pacote gratuito, a próxima opção é essencialmente entre o pacote básico e o pacote CMS Agora, para manter as coisas super simples, se você acha que realmente não precisa um blog e não precisa adicionar projetos, e não precisa adicionar o mesmo tipo de conteúdo repetidamente, como, por exemplo, exemplos de seu trabalho ou, você sabe, avaliações de clientes ou algo parecido, onde você pode realmente gerenciar as coisas de forma muito eficiente em um único coloque, depois é só usar o pacote básico. Você não precisa de nada mais do que isso. No entanto, se você quiser realmente adicionar um blog e simplificar as coisas no site, o pacote CMS custa apenas $9 a mais e, na verdade, economiza dez vezes mais tempo que levaria se você tivesse o pacote básico Agora, só para ser totalmente transparente, esses preços são baseados na cobrança anual, então você pagará basicamente uma vez pelo ano inteiro e, em seguida, seu site ficará ativo durante todo o ano sem interrupções Mas se você quiser pagar mensalmente, aumenta um pouquinho. Apenas alguns dólares, então não é um bom negócio. Mas se você quiser economizar o máximo possível, pode economizar até 22% pagando apenas o ano adiantado Agora, para marcas de comércio eletrônico, as coisas são um pouco diferentes. Então, se formos para a seção de comércio eletrônico, podemos ver basicamente que existem três opções. Existem padrão, plus e avançado. Agora, novamente, se você está apenas começando como marca, eu não recomendaria que você optasse pela opção positiva ou avançada. O motivo é que você não deveria ter mais de 500 itens de comércio eletrônico em seu site quando está começando. Eu pessoalmente sugeriria que você tivesse no máximo cinco a dez. Agora, cada pacote de comércio eletrônico vem com um nível diferente de itens de comércio eletrônico , itens de CMS e alguns outros recursos, que analisaremos agora Por exemplo, o padrão plus em avançado tem diferentes níveis de itens que você pode realmente vender em seu site. Por exemplo, o pacote padrão fornece 500. O plus dá 5.000 adiantado dá 15.000. Novamente, não consigo imaginar uma nova marca ou uma nova startup vendendo mais de 500 itens. Eu apenas sugeriria seguir o padrão. Em relação aos itens do CMS, você recebe 2.000, 10.000 ou 10.000 E com relação à taxa de transação, isso significa simplesmente que toda vez que alguém comprar algo do seu site, você pagará 2% do que for pago E isso se soma à taxa per pL ou stripe, que também cobrará uma pequena parte do que for comprado Agora, o pacote padrão cobrará 2% e, em seguida, o que for cobrado pelo PayPal e pelo Stripe, enquanto o plus in Advanced acabará cobrando exatamente o que o Peer pL e o Stripe Portanto, não haverá 2% adicionais se você garantir o pacote plus ou o avançado. Agora, uma coisa realmente boa sobre todos esses pacotes é que todos eles incluem os recursos do plano CMS. Então, se nos lembrarmos, pagaremos $23 por mês em qualquer lugar pelos pacotes CMS Agora, na verdade, é a relação custo-benefício da grade , se você pensar bem, porque pelo pacote CMS, você está pagando $23 por mês No entanto, se você quiser atualizar a qualquer momento para um pacote de comércio eletrônico, poderá obter o pacote padrão, que será suficiente para você por apenas $29 por mês, o que é literalmente $6 a mais do que o pacote CMS Então, você está obtendo todas as funcionalidades de comércio eletrônico e a capacidade de realmente vender produtos e serviços diretamente do seu site, por mais $6, o que na verdade não é muito E outra grande coisa quando você paga anualmente com comércio eletrônico é que você basicamente obtém uma economia estúpida Você pode economizar até 30% sobre o que normalmente custaria se você pagasse mensalmente. Agora, obviamente, depende totalmente de você o pacote que achar melhor. Mas se você não tiver certeza, sinta-se à vontade para entrar em contato comigo porque estou mais do que feliz em lhe dar algum conselho ou talvez compartilhar uma ou duas histórias sobre o que aconteceu comigo quando comecei a usar web floor e qual pacote era melhor para mim na época e quais pacotes estou usando agora para meus sites, que tenho na plataforma web floor Como sempre, estou aqui para ajudar e apoiar da maneira que puder, então tenha uma querida incrível. Muito obrigado pelo seu tempo, e nos vemos na próxima lição. 32. Webflow 101: Webflow vs outras plataformas: Agora, todos nós sabemos que existem inúmeras plataformas diferentes de criação de sites on-line. Mas, em última análise, existem cinco plataformas principais: word press, square space, Wicks, Shopify e, obviamente, web flow Agora, isso se baseia na minha experiência de usar diferentes plataformas de criação de sites na última década , sendo realmente proprietária da minha agência Brannan Clementine House Agora, quando uso essas plataformas diferentes, tenho a experiência de estar em situações muito difíceis com os clientes porque a plataforma me decepcionou E o que eu quero compartilhar com vocês nesta lição é apenas minha experiência pessoal com base em todas as diferentes plataformas que eu usei e por que algumas são boas e por que outras não são tão boas. Agora, quero começar com o WordPress, porque o WordPress existe há muito, muito tempo. E, em última análise, é a mais antiga de todas as plataformas de criação de sites existentes. Em última análise, isso significa que tem, você sabe, uma grande variedade de pessoas usando a plataforma. Mas a realidade é que, do ponto de vista da manutenção, essa foi a maior coisa que me afastou do WordPress O motivo é que, para mudar algo que é super simples, talvez você precise clicar em dez botões diferentes e depois alterá-lo, sair, salvá-lo e atualizá-lo com plug-ins diferentes e muitas outras coisas confusas, o que torna muito difícil gerenciar Então, basicamente, se você precisa gerenciar o site de forma consistente, repetidamente, leva muito tempo para mudar alguma coisa, isso realmente não vale a pena para mim. Quero algo que me economize muito tempo, que seja realmente fácil de usar e que não exija um código personalizado para criar o site e editar nada, porque, sim, você pode usar temas prontos , você pode usar temas prontos quais você pode basicamente conectá-los ao site do Word Press e, em última análise, pronto, e você pode simplesmente alterar Mas é muito restritivo com o que você pode fazer nessa plataforma específica Por exemplo, se você tiver dois sites diferentes usando exatamente o mesmo tema, para editar esses dois sites, você precisa conhecer um código personalizado para torná-los únicos. O que eu adoro no web floor é o fato de você não precisar de código personalizado. Eu literalmente não conheço uma única linha de código pessoalmente, mas entendo como usar a plataforma web floor para permitir que ela faça toda a codificação e o trabalho árduo para Agora, o próximo na fila é o espaço quadrado e Wicks, e a razão pela qual estou juntando esses dois é por vários motivos Então, em primeiro lugar, Square Space é um pouco mais responsivo Já vi muitos exemplos com o Wicks, que essencialmente o site não é super responsivo, e o que isso basicamente significa é que, se estou vendo um site no meu desktop, talvez pareça ótimo Mas se estou vendo no meu celular, não parece nem de longe tão bom. E isso é um grande problema. E eu não estou dizendo que você não pode ter um site responsivo no Wicks, mas o que estou dizendo é que é muito difícil fazer isso e fazê-lo de uma forma que realmente pareça boa A razão pela qual eu prefiro o web floor é porque eles o tornam super simples, e seu sistema para garantir que o site tenha uma aparência consistente em todos os dispositivos e todos os tipos de tela me dá a confiança que as pessoas que realmente visualizam os sites que eu todos os dispositivos e em todos os tipos de tela me dá a confiança de que as pessoas que realmente visualizam os sites que eu crio terão uma ótima experiência, não importa onde acessem o site. Agora, uma coisa que a Square Space e a Wicks têm em comum é que existem migrações realmente terríveis para o SEO, pelo menos na minha experiência Eu construí muitos sites em Square Space e Wicks há muitos anos, antes de realmente descobrir o web floor E a realidade é que nunca consegui fazer com um único site fosse construído em espaço quadrado ou chegasse ao topo da página do Google Agora, isso ocorreu simplesmente porque o código usado nessas plataformas específicas às vezes é muito complicado para o Google entender. Pelo menos foi o que me disseram quando falei com um especialista em SU que estava me contando um pouco sobre as diferentes plataformas e os prós e contras de cada uma. O Webflow, no entanto, tornou muito simples colocar todos os sites que criei na primeira página do Google ou bem perto E isso é simplesmente certificando-se de que as postagens do blog e tudo o que eu realmente coloquei no site foram estruturados corretamente, e o fluxo da web torna isso muito simples. A única outra plataforma de criação de sites que existe, que é um pouco diferente do Word Press, do Wicks e do Square Space, é, em última análise, o Shoppi Agora, o Shopper fi é uma plataforma puramente focada em comércio eletrônico. Então, em última análise, não faz sentido usar o Shop fi, a menos que você esteja realmente vendendo um produto. Agora, eu tenho que ser totalmente transparente com você. Ele fornece muitos dados para ajudá-lo a criar seu site e torná-lo um pouco melhor com o tempo. No entanto, o software de rastreamento comportamental, que eu lhe dei na primeira fase deste curso, vai literalmente ajudá-lo a conseguir exatamente a mesma coisa. A única diferença é que você pode realmente ver o mouse do usuário que está no seu site, para ver exatamente o que o está fazendo clicar e o que o está fazendo não clicar. Você pode literalmente conseguir exatamente a mesma coisa no fluxo da web. A única diferença é que uma das grandes coisas que realmente me irrita no Shopify às vezes é o fato de que o Shopify é, novamente, muito restritivo, muito parecido com o Word Press, o Wicks e Wicks e você precisa pagar cerca de $350 para obter primeiro lugar, você precisa pagar cerca de $350 para obter um modelo realmente excelente E então, quando você obtém esse modelo, ele não parece muito bom. A maioria dos sites parece muito mal-humorada, eles realmente não brilham e não parecem muito exclusivos Em última análise, isso pode fazer com que a maioria das marcas pareça muito genérica. E quase o mesmo. E, no final das contas , para mim, simplesmente não valeu a pena. Eu queria um modelo em que eu pudesse basicamente adicionar meus pequenos toques exclusivos e realmente criar uma experiência de marca única para meus clientes E o web floor ajuda você a fazer isso. E outra coisa que realmente me irritou Shop offi é que não importa qual assinatura ou pacote você escolha com o Shop offi, eles ainda cobram uma taxa de transação Agora, na verdade, tive a sorte de passar por toda a dor de experimentar todas as plataformas à medida que elas foram lançadas E, para ser sincero, o web floor é o que eu uso desde que o conheci pela primeira vez , há alguns anos. Eu literalmente o uso desde então. E agora eu literalmente sou convidado a criar sites para clientes em plataformas diferentes, e insisto em criar apenas com base no fluxo da web, simplesmente porque isso nos poupa muito tempo quando estamos criando sites para clientes Isso ajuda os clientes a gerenciar os sites com muito mais facilidade, economizando tempo e também reduzindo o tempo necessário para treiná-los para realmente gerenciar o site. E porque podemos criar sites com muito mais rapidez e, para ser honesto, o fluxo da web é muito mais divertido de usar. podemos criar sites personalizados de aparência incrível Em última análise, podemos criar sites personalizados de aparência incrível por uma fração do custo de se estivéssemos criando no Shopify, Wick, Square base ou WordPress De qualquer forma, eu entendo que você tem que tomar a decisão com base em qual plataforma é melhor para você, e eu respeito totalmente qualquer decisão que você tome. Tudo o que posso dizer é que experimentei todas as principais plataformas de criação de sites on-line, e o Webflow sempre apareceu na lista de Trump É principalmente devido à liberdade do que você tem do ponto de vista do design para realmente criar algo exclusivo para você Além disso, é principalmente o tempo de gerenciamento de realmente obter um site incrível e, em seguida, gerenciá-lo com praticamente nenhum tempo durante a semana. Então, essa é a coisa mais importante para mim pessoalmente. Não tenho certeza do quanto isso é importante para você, mas quero ser capaz de criar o que estiver na minha imaginação eu possa realmente criar o site que melhor se adapte à marca. E então, o benefício secundário para mim é garantir que estou economizando o máximo de tempo possível ao criar o site. O Webflow realmente é atualizado automaticamente Portanto, ao contrário do WordPress, por exemplo, quando você precisa atualizar todos os seus plug-ins e garantir que tudo continue funcionando o tempo todo, Webflow faz tudo sozinho Sem falar que o Webflow também tem um suporte premium incrível, que se você já se inscreveu na primeira fase do curso, já terá seu suporte VIP gratuito garantido E, por fim, o Webflow é muito divertido de usar. Parece literalmente muito envolvente, e você pode literalmente criar o que quiser quando pegar o jeito da plataforma E não demora muito, e vamos literalmente começar a nos acostumar com a plataforma e todas as pequenas ferramentas diferentes que você pode usar nas próximas lições. De qualquer forma, estou muito animada para começar e realmente começar a criar seu site, então nos vemos na próxima lição. 33. Webflow 101: entendendo os pontos de interrupção: O que é responsividade do site? Bem, a capacidade de resposta do site é basicamente o site com ótima aparência em todas as telas e dispositivos que você possa imaginar Isso inclui um desktop, uma tela de celular, um iPad, praticamente qualquer tela que você possa imaginar. Agora, a capacidade de resposta do site pode parecer um pouco assustadora se você nunca fez isso antes, mas é muito simples e simplificada, especialmente no fluxo da web por meio do uso de pontos de interrupção A questão é: o que são pontos de interrupção, se você não sabe o que eles já são Bem, um ponto de interrupção é essencialmente um certo ponto nas dimensões do site em que ele se adapta a uma tela diferente para garantir que esteja sempre com uma aparência incrível Não se preocupe. Vamos garantir que todo o site que você cria neste curso seja totalmente responsivo em todos os dispositivos, e eu mostrarei como fazer isso , e é muito simples Mas nesta lição, eu só quero mostrar o que é um ponto de interrupção e também como entender como configurar pontos de interrupção para que você saiba o que fazer mais tarde no futuro Em última análise, o ponto de interrupção já deve estar instalado em seu modelo, então você não precisa se preocupar com isso Mas é muito importante que você entenda exatamente o que são pontos de interrupção, para saber o que procurar no futuro Então, vamos dar uma olhada em alguns exemplos de sites de marcas que conhecemos e amamos. Assim, podemos entender exatamente o que são os Breakpoints e como eles afetam a experiência no site Então, vamos dar uma olhada no site da Tesla e ver como site deles se adapta a diferentes dispositivos Então, se você acessar o site, podemos ver que, se começarmos a adaptar o tamanho da tela, as coisas começam a mudar um pouco. Você pode ver aqui que há um ponto de interrupção em que a barra de navegação se transforma em uma barra suspensa Se pegarmos isso aqui e depois rolarmos para baixo. Isso é um ponto de interrupção Você pode ver aquele pequeno ponto de interrupção acontecer a barra de navegação se transforma nesse tipo de menu, que é super fácil de ver Agora, isso é o mesmo para praticamente qualquer site existente. Todos eles têm pontos de interrupção diferentes. Ao usar esse método muito simples, você pode ver como será a aparência do seu site em um desktop. Qual será a aparência em um iPad e, em seguida, também como será em um telefone celular. E o fluxo da web torna muito simples tornar seu site responsivo em qualquer dispositivo E mostraremos como fazer isso um pouco mais tarde no curso. Mas vamos dar uma olhada em outro exemplo no site da Nike para ver como site deles quebra em determinados pontos de interrupção para se adaptar aos diferentes tamanhos de dispositivos Por exemplo, aqui temos uma bela tela grande e, à medida que começamos a adaptá-la, você pode ver que essa imagem em particular começa a ficar um pouco menor. E as coisas começaram com o DAP More. Você pode ver que a barra de navegação real fica um pouco menor, e vemos aqui que esse é um ponto de interrupção em que o menu muda. A imagem real muda aqui para essa imagem naquele ponto de interrupção, e também vemos que a barra de menu aqui muda para um menu de hambúrguer Então, novamente, cada site segue a mesma estrutura. E neste curso, mostraremos como criar um site responsivo Portanto, não se preocupe, tudo isso é super simples e fácil entender, desde que você siga as etapas deste curso. Agora, por fim, vamos dar uma olhada no site da Apple. Agora, no site da Apple, obviamente, todos sabemos que a Apple é incrível. Vendendo seus produtos e fazendo com que tudo pareça super sexy, até mesmo AirPods, Agora, quando olhamos para o site real deles, podemos ver que, por exemplo, temos seis janelas diferentes aqui, uma, duas, três, quatro, cinco, seis. Agora, vamos ver como eles se adaptam à medida que mudamos o tamanho da tela. Este é apenas um exemplo para mostrar como a Apple faz outros tipos de seções no site. Agora vemos aqui, temos um desktop, que parece ótimo. Agora, à medida que adaptamos isso e o tornamos um pouco menor, você pode ver que eles estão ficando um pouco esmagados, mas ainda estão na mesma formação Então, à medida que rolamos ainda mais para baixo, aguardamos o ponto de interrupção e, com certeza, aí está Assim, podemos ver que dentro do ponto de interrupção, o ponto de interrupção acontece aqui, onde, em última análise, o texto no design muda Assim, você pode ver o tamanho do texto aqui e, à medida que atinge um determinado tamanho, o tamanho do texto muda porque é menor, é um dispositivo menor. É um tamanho de tela menor. Portanto, precisamos que o texto seja relevante para o tamanho da tela em que está sendo visto. Agora, se rolarmos isso ainda mais para baixo, você pode ver que algo mais mudará. A estrutura real de cada quadrado. Na verdade, mudamos a forma como os quadrados são estruturados. Então, por exemplo, antes, tínhamos um, dois, três, quatro, cinco, seis em linhas de dois. Mas agora, se formos para a versão móvel, temos um, dois, três, quatro, cinco, seis, mas na mesma linha. Agora, cada bloco está empilhado um sobre o outro, porque se o tivéssemos na forma original, que mostramos antes, que foi feita para tablet ou desktop, não caberia Portanto, ele precisa ter esse ponto de interrupção para que o conteúdo se ajuste à tela do celular Agora, você pode usar exatamente essa mesma abordagem com seu site para testar como o conteúdo interage com diferentes pontos de interrupção É só ver se você tem uma pequena amostra de como fluxo na web torna isso muito fácil Você pode ver aqui em cima que esses são seus diferentes pontos de interrupção Então, aqui está seu ponto de interrupção básico. Portanto, essa é, em última análise, a tela de tamanho mais médio que as pessoas usarão. Então, à medida que você trabalha em uma tela maior, ela parece uma TV, por exemplo, se o site está sendo visualizado em uma TV ou até mesmo em uma tela grande como essa. E então, ao descer, você pode ver que tem um tablet, um telefone de paisagem e também um celular retrato. O melhor do fluxo da web é se você alterar algo no ponto base, isso também afetará os outros elementos em ambos os lados. Por isso, é muito fácil, para que você não precise redesenhar o site em todos os dispositivos Você simplesmente precisa alterá-lo de uma vez e depois ajustar as coisas à medida que avança para que o site tenha uma aparência absolutamente perfeita, independentemente do dispositivo em que você o esteja visualizando. De qualquer forma, vamos nos aprofundar na criação real do seu site em breve. Então, estou ansioso para ver você na próxima lição. Te vejo lá. 34. Webflow 101: o modelo de caixa: Ok, então qual é o modelo de caixa quando se trata de piso web? Bem, se você assistir à lição anterior, saberá que eu emparelho a seção, o contêiner e o dibloco em um único sistema Gosto de chamar isso de sistema doméstico porque se você pensar nisso na forma de terra sendo a seção, o contêiner sendo a casa e, em seguida, os blocos divisão sendo os diferentes cômodos dessa casa, você pode criar uma compreensão muito rápida de como usar cada elemento corretamente Deixe-me explicar esta seção de preços no meu site para mostrar o que quero dizer. Agora, esta seção é realmente muito complicada e demorei um pouco para construí-la. Agora, você, homem, nunca precisará construir algo assim. Mas se você fizer isso, me avise, e ficarei mais do que feliz em ajudá-lo e apoiá-lo. Agora, o que você pode ver é que dentro de cada bloco din, esses blocos di estão organizados na forma de uma grade, que será abordada um pouco mais tarde no curso. Mas cada bloco e grade de di são estruturados dentro de um contêiner e, em seguida, esse contêiner é estruturado dentro de uma seção. Então, como você pode ver, usando seções como o terreno, contêineres como a casa e, em seguida, blocos de divisão dentro do contêiner para criar mais estrutura, você pode criar sites altamente responsivos que permitirão que você realmente obtenha um site com aparência e toque profissional, não importa onde o espectador o esteja vendo Portanto, se você sempre se lembrar de usar seções, contêineres e blocos dI dessa forma , sempre terá um site bem estruturado que pode ser responsivo em todos os dispositivos em que o espectador possa vê-lo Vamos dar uma olhada em outro exemplo para realmente transmitir a mensagem de como é importante usar o método box e, finalmente, usar seções, contêineres e blocos de mergulho dessa forma. Então, como você pode ver aqui, temos uma seção. Agora, dentro dessa seção, temos um contêiner, que está dentro da seção, que está no corpo, e então dentro desse contêiner, também temos blocos di. Então, esses blocos de imersão são chamados de coisas diferentes porque têm outras funções conectadas a eles Você nem sabe sobre esse dh ainda, mas é exatamente a mesma abordagem Temos blocos de imersão dentro do contêiner e o contêiner está dentro da seção Ao criar a estrutura, você garante que cada site que você cria e cada seção que você cria sejam estruturados adequadamente. E, ao estruturar seu site adequadamente, você pode criar pontos de interrupção eficazes em seu site para garantir que, independentemente dispositivo em que seu site esteja sendo visualizado, ele sempre tenha uma aparência fantástica. Agora vamos usar blocos de di, contêineres e seções nas próximas lições. Então, não se preocupe se ainda não faz todo o sentido? Abordaremos tudo em breve. 35. Webflow 101: seções: Nas próximas lições, usaremos seções, blocos de imersão e contêineres para, finalmente, criar algo realmente simples como esse Agora vou mostrar cada etapa do processo para que você possa acompanhar. Então, eu realmente gostaria que você pudesse me acompanhar durante o curso para que você possa realmente saber exatamente como é criar algo realmente simples como esta seção aqui. Por que começamos? Bem, sempre começamos adicionando uma seção, então simplesmente adicionaríamos uma seção e a arrastaríamos até a parte inferior, e você vê aquela linha azul na parte inferior, que é onde a seção vai cair. Então, deixamos de lado e você pode ver que agora temos uma seção. Primeiro passo, pronto. Agora, nessa seção, precisamos adicionar um contêiner porque o contêiner permitirá que o conteúdo desse contêiner seja responsivo o tempo todo e manterá as coisas no lugar certo Então, como fazemos isso? Bem, vamos para a caixa positiva novamente, depois adicionamos um contêiner e colocamos o contêiner dentro da seção, você pode ver aqui, ele está indo para dentro da seção e nós o colocamos dentro. Perfeito. Agora temos nosso contêiner e o temos dentro de uma seção. Agora, podemos ver que tudo está se alinhando. Então, sabemos que tudo está no lugar, por que há tanto espaço na parte superior desta seção e na parte inferior? Por que parece assim? Por que o nosso parece bastante plano? Bem, tudo isso se resume a uma pequena coisa chamada preenchimento, e você pode adicionar preenchimento a contêineres, blocos e seções Agora, o preenchimento é muito importante para o desenvolvimento de sites pois você pode criar espaço entre diferentes elementos E, novamente, isso pode ser usado em blocos, contêineres ou seções. Mas neste exemplo em particular , como estamos nos concentrando nas seções desta lição em particular, queremos mostrar que, ao adicionar 75 pixels de preenchimento na parte superior e inferior, começamos a nos dar a aparência que estamos procurando na seção que estamos tentando criar Agora, obviamente, você pode criar um pouco mais ou criar um pouco menos, mas tudo depende de quanto espaço você realmente deseja. Mas se realmente quiséssemos ser muito específicos ao copiar uma determinada seção, poderíamos simplesmente clicar na seção e, com poderíamos simplesmente clicar na seção e, certeza, ela tem 80 pixels por lado e, em seguida, 30 pixels de cada lado à esquerda e à direita. Então, se quisermos copiar isso, podemos simplesmente ir para 80, 80 e depois 3030 Agora, nossa seção tem exatamente o mesmo preenchimento da seção acima Mas por que ainda parece diferente? Bem, tudo se resume aos elementos que estão dentro do contêiner. No momento, esse contêiner tem elementos dentro dele. Este está vazio. Portanto, a seção real não está se expandindo organicamente para caber nos elementos dentro da seção. É simplesmente muito plano. Não há nada lá dentro. Então, precisamos começar a adicionar elementos, o que faremos na próxima lição. Agora, outra coisa que você pode estar se perguntando é: por que nossa seção é branca? Por que não é da mesma cor que esta? Bem, geralmente, sempre que você adiciona uma seção contêiner, bloco de mergulho ou qualquer outro elemento a um site, ele será branco por padrão. Então, como mudamos a cor? Bem, muito, muito simples. Então, se você quiser exatamente a mesma cor que essa, podemos clicar nessa seção e ir até ela aqui. Em seguida, vamos roubar esse código, copiar e colar e, em seguida, selecionar nossa seção e colar esse código específico nessa seção E então, como que por mágica, temos exatamente a mesma seção, exatamente o mesmo preenchimento e exatamente a mesma cor Agora, nas próximas lições, abordaremos recipientes e blocos de bits e finalizaremos esse pequeno exercício específico que estamos fazendo. Então, nos vemos na próxima lição. 36. Webflow 101: contêineres: Ok, então construímos nossa seção e agora temos um contêiner aqui, que precisamos preencher com certos elementos. Agora, para fazer isso, precisamos começar a adicionar alguma forma de blocos DID para finalmente começar a organizar a seção de uma forma que pareça profissional e, basicamente, copie exatamente a mesma seção que temos aqui. Agora, existem muitas maneiras diferentes você realmente criar esta seção, mas quero mostrar a melhor maneira e a maneira mais eficiente que eu usaria pessoalmente se estivesse criando este site para um cliente. E a primeira coisa que eu faria seria adicionar uma grade. Agora, a grade vai para dentro da coluna dessa forma. E dentro da grade, eu basicamente excluiria a seção inferior. Então, agora temos apenas as duas seções superiores. Agora, a próxima coisa que vou fazer é começar a mudar o tamanho da lacuna aqui. Então, quero que as coisas se alinhem bem para que haja espaço suficiente para que a imagem e o texto sejam separados Quando eu estiver feliz com isso, vou pressionar Concluído. Agora, temos a grade, e tudo parece muito arrumado e muito bonito Agora, neste ponto, quero começar a adicionar meus blocos div e adicioná-los simplesmente soltando-os na grade Agora eu adicionei um diblock aqui. Agora, vou adicionar um pequeno seletor de estilo e adicioná-lo como texto Então essa vai ser minha mensagem. E então vou adicionar outro bloco dI aqui, que será minha imagem. Agora temos texto, uma imagem dentro de uma grade, que fica dentro de um contêiner, que fica dentro de uma seção. Ok, então estamos em um ponto em que temos nossos blocos dI, nós os nomeamos. Também temos uma grade em um contêiner em uma seção, e ela é muito parecida com esta seção, mas falta uma coisa os elementos reais da imagem, do texto e do botão. Agora, há duas maneiras de fazer isso. A primeira é que poderíamos simplesmente copiar e colar aquela imagem exata dentro desse bloco di específico. Essa é uma maneira de fazer isso, mas não queremos ser preguiçosos Então, eu vou te mostrar passo a passo. E, para ser totalmente claro, também podemos fazer isso com texto , se quisermos. É muito simples. Tudo o que você precisa fazer é copiar e colar da mesma forma que edita um documento do Word. Você pode experimentar isso e experimentar um pouco, mas é simples assim. Agora, vou mostrar como realmente construí-lo do zero, para realmente construí-lo do zero, você realmente saiba como construí-lo em primeira mão Mas quando você estiver usando o fluxo da web, não tenha medo de usar a função copiar e colar. É para isso que você economiza tempo e energia. Então você não precisa fazer a mesma coisa repetidamente. Mas vamos nos livrar desses três elementos e voltaremos ao ponto de partida. Então, o próximo passo é finalmente começar a preencher nossos dois blocos d. E é exatamente isso que faremos na próxima lição. Te vejo lá. 37. Webflow 101: blocos Div: Ok, então temos nossa seção. Nós temos nosso contêiner. Temos nossa grade dentro do contêiner e, dentro da grade, temos dois blocos d, um texto nomeado e uma imagem nomeada. Agora, vamos começar com a caixa de imagem para fazer isso primeiro, porque é a mais fácil. Agora, para adicionar uma imagem a essa caixa específica, precisamos ir até o pequeno botão de adição, descer até a imagem e, em seguida, soltar a imagem com o dragão nessa caixa. Agora temos nosso bloco dI com uma imagem dentro dele. Agora, para realmente adicionar uma imagem a essa caixa de imagem específica, precisamos clicar no Little Cog Vá para escolher a imagem. E então nos levará a esta caixa aqui, onde podemos arrastar e soltar arquivos, onde podemos adicionar imagens diferentes. Agora, isso é apenas um espaço reservado, então vamos adicionar algo um pouco mais interessante Então, se clicarmos no botão de upload, ele vai para nossa tela inicial e eu adicionarei essa linda imagem de um cisne. Então, clicamos em abrir. Ele adiciona o cisne e, com certeza, uma vez que o cisne carrega, ele é aplicado à seção Agora, para ser honesto, não tenho certeza se é um swanlo ou um pato, mas digamos que é um pássaro de aparência muito atraente Ok. Então, agora temos nosso conjunto de imagens. Como começamos a adicionar texto ao outro lado da seção? Bem, isso é muito fácil. Vamos começar do topo e ir descendo. Agora, se inspecionarmos esse elemento aqui, você pode ver que ele está usando as configurações de tipografia de aérea, 700 negrito, o tamanho é 38 e a Também temos o código de cores aqui, que é 333, e seu alinhamento é Então, vamos adicionar um título. Texto para a seção. E enquanto estamos lá, também podemos adicionar o texto do parágrafo, porque isso será necessário a seguir, então basta adicioná-lo abaixo, como você pode ver, da linha azul E depois disso, também podemos adicionar o botão, que pode ser feito assim. Agora, eles estão muito parecidos agora, mas como podemos fazer com que pareçam idênticos? Bem, a primeira coisa a fazer é garantir que os cabeçalhos estejam usando os mesmos caracteres e princípios, então o Aerial 738 44, perfeito, exatamente o Então, se basicamente copiarmos e colarmos esse texto, ele deverá parecer idêntico. Com certeza, isso acontece. Mas vamos mudar isso porque esse texto é muito chato. Os cisnes são incríveis. Exclamação, Mark. Incrível. Novamente, não tenho certeza se isso é um cisne de Dock Estou apenas divulgando isso. Agora, em relação ao próximo texto, você pode ver que isso é Arial 400 normal 14 20. Então, vamos verificar aqui, Aerial 400 normal 14 20. Agora, acho que todos podemos concordar que isso é muito texto para ler, e mesmo isso é bastante para um usuário digerir Então, vamos mudar um pouco o SO e colocar cisnes são lindos, mas também podem ser um pouco travessos Agora, temos esse texto, mas é um pouco pequeno, certo? É um pouco difícil de ler no desktop. Então, vamos torná-lo um pouco maior para que possamos simplesmente adicionar isso. Podemos adicionar um pouco diferente em relação à diversão. Então, vamos adicionar isso como Monsa, talvez. Vamos torná-lo um pouco mais leve. Isso parece ótimo. Agora, abordaremos a tipografia um pouco mais tarde, mas eu só quero dar uma ideia de como você pode usar a tipografia para realmente ajudar seu conteúdo a Agora, como você pode ver aqui, ainda é um pouco difícil de ler. Então, o que eu basicamente vou fazer é porque eu aumentei o tamanho do texto Sua altura deve ser em torno de 1,5 vezes o tamanho do texto. Então, vou colocar isso como 30, o que dá um pouco mais, mas na verdade vou reduzir isso um pouco e torná-lo 28 porque acho que é melhor. Ok, perfeito. Agora, como você pode ver, nossa seção está um pouco melhor e também tem um bom tamanho, exatamente igual ao exemplo que tivemos no início da aula. Agora, uma coisa que me irritou um pouco é o fato de esse botão ter uma cor muito estranha Agora eu quero torná-lo super limpo e super profissional, como este exemplo aqui. Então, como eu faço isso? Bem, a primeira coisa que vou fazer é clicar no botão em si. Então eu também preciso ter certeza de que a cor é exatamente a mesma do botão aqui? Copie e cole isso aqui. Então isso deve ser Arial 412 20. Perfeito. E então, se eu clicar em Entrar no Swan Club, você pode ver que está começando a se parecer muito mais com o botão acima, mas ainda parece bem diferente Então, por que parece diferente? Bem, há duas coisas principais em jogo aqui. A primeira coisa é o texto em si. Portanto, embora o texto seja exatamente o mesmo Aerial 400 normal 12 20 e, em seguida, Aerial 400 normal 12 20, ainda há algo diferente E isso está nas mais opções de tipos. Então, aqui, onde você pode ver que o espaçamento entre letras é normal, o espaçamento entre letras aqui é dois Então, se adicionarmos o espaçamento entre letras dois aqui, vai ficar muito mais parecido com o exemplo acima Agora, parece muito parecido, mas ainda há algo bem diferente nos dois botões. Por que isso? É a quantidade de texto? Bem, pode ser, mas esse não é o fator principal. O principal fator aqui é o preenchimento dentro do botão. Você se lembra de quando adicionamos preenchimento à seção para dar um pouco de espaço para respirar Bem, é muito importante que você faça isso também com botões, porque onde esse botão atualmente tem 15 e nove preenchimentos, esse botão tem 12 e 25 Agora, essa é uma proporção muito boa para usar na maioria dos botões. Mas uma das coisas mais importantes a fazer é manter a mesma proporção, mas garantir que ela seja consistente em todo o site. Agora, essa é uma proporção muito boa para usar. Então, se basicamente usarmos essa proporção em todo o nosso site, ela deve parecer bastante consistente? E muito bom de se ver. Então, literalmente, 25, 12, 25 e 12. Você pode ver agora que a sala dentro do botão tem muito espaço para respirar. Parece muito mais esteticamente agradável, e abordaremos a criação de botões um pouco mais adiante no curso Mas para este exemplo em particular, eu só queria mostrar como criar um botão realmente simples e por que esse botão parece muito diferente deste. Em última análise, queremos criar a melhor experiência visual para nossos usuários. E criar um botão, que na verdade pareça bastante atraente para clicar, ajudará você a obter um melhor desempenho e uma melhor taxa de conversão em seu site como resultado Agora, estou muito feliz com a aparência das coisas. Mas se você olhar esta seção e esta seção aqui, há algo que ainda não está certo. Agora, dentro desse bloco de dados específico, que definimos há algumas lições, o que há nesses elementos específicos, que ainda são muito diferentes desses? Agora, se você parar um pouco para pensar sobre isso, verá que o espaço entre o título e o texto aqui é praticamente o mesmo. Há uma margem aqui de dez. Agora, o preenchimento e a margem são bem diferentes, e vamos abordá-los ao longo do curso de várias maneiras diferentes Mas você pode ver aqui que o preenchimento e a margem do cabeçalho aqui O cabeçalho aqui são literalmente idênticos, 20 na parte superior e dez na parte inferior Agora, esses são quatro cabeçalhos bastante comuns e você pode ajustá-los como quiser No entanto, para esse caso específico, não é o cabeçalho, esse é o problema aqui. O problema é o texto dentro do parágrafo, pois com esse parágrafo em particular, temos uma margem de 24 pixels com esse texto, temos apenas uma margem de dez. Então, se mudarmos isso para 24, agora isso parece muito melhor, e temos um bom espaço entre o parágrafo e o botão e o título e a imagem, mas ainda há algo que não está certo E essa coisa é simplesmente onde esses elementos são colocados. Agora, é por isso que é muito importante ter um contêiner, uma seção e o bloco di funcionando bem juntos. Isso porque se quiséssemos pegar esse texto como este exemplo e torná-lo central na imagem. Tudo o que precisamos fazer é acessar esta seção aqui dentro do diblock e clicar no centro Isso faz com que pareça muito mais limpo, muito mais alinhado e muito mais apresentável E é por isso que é tão importante ter seções, contêineres e blocos giratórios funcionando bem juntos. Porque se não tivéssemos esse diblock , não poderíamos controlar onde queríamos que os elementos estivessem Só poderíamos tê-lo em um único lugar. E ao colocá-lo no centro, ele faz com que pareça muito mais apresentável e muito mais profissional Isso abrange tudo em relação a seções, contêineres e blocos de imersão Agora, abordaremos isso durante o resto do curso à medida que criamos seu site, então não se preocupe Mas isso deve lhe dar uma compreensão muito boa de como usar três elementos juntos para criar um site muito bem estruturado. De qualquer forma, vamos passar para a próxima lição do curso. Te vejo em breve. 38. Webflow 101: grades: Para criar essa grade, vamos criar uma nova seção, como sempre. E dentro dessa seção, vamos chamar essa seção de seção de grade sexy. Agora, quando entrarmos nessa seção, adicionaremos um contêiner como de costume e, assim como antes, se você se lembra, agora ele não tem preenchimento e nenhuma ideia real de quão grande deveria ser Então, vamos adicionar um pouco de preenchimento, como antes Parece quase certo. Em ambos os lados. Ok, então temos um pouco de espaço para respirar agora. Agora, com relação à adição da grade, precisamos primeiro ir até o final aqui e adicionar a grade aqui. E isso nos deu algumas opções para escolher. Agora podemos adicionar novas seções de grade aqui e podemos adicionar outra seção de grade aqui, por exemplo. Mas eu quero reduzir para apenas dois e talvez três para menos. Está bem? Perfeito. Agora, novamente, se quisermos criar um pouco de largura aqui , podemos fazer isso. E se quisermos criar um pouco de largura aqui , também podemos fazer isso. Lembre-se de que, se você alterar o tamanho dessa linha específica, também precisará alterar o tamanho dessa linha, para que ela esteja conectada neste ponto. Agora, depois de configurarmos a grade, há algumas maneiras diferentes de abordarmos a adição de coisas à grade. Agora, uma maneira é finalmente fazer o que fizemos antes, adicionar o bloco di. Então poderíamos adicionar outro bloco div, e então poderíamos adicionar outro bloco div, etc., etc Agora, isso pode ser extremamente entediante. Agora, o que eu preferiria fazer é selecionar esse dibloco, copiá-lo, pressionar a grade e colar o mesmo dibloco em todos eles Agora, quero mostrar como você pode usar isso de uma forma que realmente o ajude a economizar muito tempo e energia. Então, por exemplo, eu quero criar uma pequena grade para mostrar algumas fotos que eu tirei Eu fiz algumas aulas de fotografia e quero mostrar minha fotografia para o mundo. Então eu tenho meu bloco dI, o que é muito importante. Então, novamente, a seção contendo di, lembre-se sempre disso, vá até a imagem. Perfeito. Então eu tenho uma imagem dentro do meu bloco dI, que está dentro da minha grade, e então eu tenho meu contêiner, que está dentro da minha seção de grade. Bem, minha seção sexy de grade, obviamente. Agora, se clicarmos, essa imagem aqui, e vamos escolher a imagem. Em seguida, carregamos todas as imagens que eu salvei. Em seguida, ele começará a enviar todas as imagens diferentes que eu tenho Agora, depois de salvar isso, posso começar a economizar um pouco de tempo. E posso fazer isso simplesmente copiando e colando o bloco div e colando-o várias vezes Agora, algo que posso fazer é basicamente acessar cada uma dessas imagens e selecionar uma imagem diferente para adicionar a cada bloco. Agora, isso vai me poupar muito tempo e energia. Quando começo a adicionar imagens diferentes ao meu novo portfólio fotográfico. Agora, uma coisa que é realmente muito irritante é o fato de minhas imagens não serem todas do mesmo tamanho Um é um pouco maior que o outro. Uma é paisagem e a outra é retrato. Então, como podemos corrigir isso? Então, uma maneira de fazer isso é simplesmente redimensionar o tamanho das imagens reais, mas há outra maneira E, na verdade, está fazendo um efeito de grade sem realmente usar a função de grade, que vou abordar com você agora. Agora, essa outra maneira é simplesmente não usar a função de grade, mas sim usar um contêiner. Então, novamente, na seção atual, adicionaremos um contêiner e nos livraremos dessa seção apenas para mostrar exatamente o que faremos. E dentro desse contêiner, vamos adicionar o efeito de grade. E dentro desse contêiner, agora vamos adicionar todas as nossas imagens. Então, vamos adicionar esse. Em seguida, vamos adicionar este, e depois este. Eu só tive três cópias hoje. É por isso que estou um pouco mais lento do que o normal. Perfeito. Agora temos algumas imagens, todas de tamanhos ainda diferentes. E vamos adicionar o pato lá também, só para dar uma boa medida Ok. Então, basicamente, o que o contêiner está fazendo é empilhar todas as imagens umas sobre as outras, que, você sabe, não parece ruim, de jeito nenhum, mas também não parece ótimo Então, como podemos consertá-lo e criar algum tipo de efeito de grade? Bem, uma maneira de fazer isso é , na verdade, ver duas colunas aqui, onde diz colunas. E quando clicamos na coluna de efeito de grade, que não é uma grade, lembre-se que é um contêiner real. Agora, você pode ver todas as imagens se empilhando umas sobre as outras automaticamente por padrão Agora, não parece ruim, mas não parece exatamente ótimo, certo? Você precisa rolar um longo caminho para baixo para ver todas as imagens. Então, como podemos corrigir isso e fazer com que pareça uma grade sem usar a função de grade? Bem, podemos fazer algo usando esse pequeno elemento aqui chamado efeito de colunas. Então, podemos basicamente pegar o contêiner, descer duas colunas e digitar duas. Pronto, você literalmente tem uma ótima maneira condensada de mostrar suas imagens Agora poderíamos colocar três, poderíamos colocar quatro, mas acho que dois realmente parecem muito melhores. Agora, na verdade, temos um pouco de espaço entre as duas colunas. E o que poderíamos fazer é adicionar um pouco de espaço adicional se quiséssemos criar um pouco mais da lacuna. Então, adicionaremos isso como 20 apenas para fins específicos. Agora, isso parece ótimo, mas e abaixo de cada imagem? Por que não há espaço abaixo de cada imagem para, você sabe, dividi-las um pouco? Bem, isso é muito simples, então tudo o que precisamos fazer é adicionar a imagem e, em seguida, adicionar um pouco de preenchimento 20. E aí está. Literalmente, temos exatamente o mesmo preenchimento lateral que temos para a imagem E tudo o que precisamos fazer é simplesmente examinar as imagens e fazer o mesmo com cada uma delas, e estamos literalmente prontos para começar. Então aí está. Portanto, há duas maneiras diferentes de você realmente adicionar sua grade ao seu site de uma forma realmente eficaz. Então, um é um pouco mais organizado e é onde, em última análise, você tem imagens ou elementos exatamente do mesmo tamanho. Mas se eles não são todos do mesmo tamanho e você quer algo que seja um pouco mais versátil e algo que possa realmente ser um pouco mais dinâmico, essa opção pode ser a melhor opção para você. De qualquer forma, eu realmente espero que você goste desta lição. Te vejo na próxima. 39. Webflow 101: blocos de links: Ok, então como você realmente adiciona um bloco de links? Agora, os blocos de links são super simples. Eles são muito parecidos com botões exceto que não parecem um botão. Parecem apenas um pequeno texto. Agora, uma coisa que eu realmente gostaria de fazer é mostrar a diferença entre um bloco de links e um botão. Então, se pegarmos isso aqui, agora, isso vai me dar um bloco completo, basicamente, então, por exemplo, eu poderia colocar essa imagem aqui dentro, e um bloco de links basicamente age um pouco como um bloco dI. Agora, um bloco de links pode ser usado de várias maneiras diferentes. Agora, as duas principais maneiras de usar um bloco de links são em última análise, como uma forma fazer com que as pessoas acessem uma determinada página. Então, por exemplo, poderíamos colocar isso aqui, então poderíamos adicionar essa imagem. Então, retiraremos o bloco dI e adicionaremos a imagem ao bloco de links. E então, basicamente, o que poderíamos fazer é pegar o bloco de links, se alguém clicar nesse elemento específico ou nesse bloco de link específico, onde costumava estar o bloco dI Portanto, o bloco dI está basicamente sendo substituído pelo bloco de links. Em última análise, você pode adicionar outro domínio ou pode levá-lo a uma página diferente no site, adicionar um e-mail, adicionar um número de telefone. Basicamente , você pode realizar qualquer ação quando eles clicam nesse elemento específico. Agora, isso é muito útil porque se você quiser levá-los para a página Swans, por exemplo, ou Duck, o que você preferir, isso tornaria tudo muito fácil e, em última análise, ficará oculto, então você não verá realmente Agora, isso também pode ser muito útil por vários outros motivos. E uma das maneiras pelas quais eu gosto usar o bloco de links é criar um botão quase invisível. Então, o que eu faria no final das contas é pegar o bloco de links adicioná-lo na parte inferior. Então, deixe-me adicionar isso aqui, então copie, exclua, cole. Você pode ver aqui, temos o bloco de links lá. Agora, quero criar um botão invisível para essa seção específica. Então, vou copiar e colar isso. Vou adicionar um texto aqui. OK. Vamos nos livrar dessa linha em alguns segundos, e então eu vou furar isso aqui Então, eu tenho exatamente o mesmo recurso neste bloco de links e posso vincular exatamente à mesma página para a qual o botão vai, ok? Agora, quando usaríamos um bloco de links em vez de um botão para esse propósito específico? Bem, nós o usaríamos quando o botão real não fosse uma prioridade. Por exemplo, se acessarmos meu site, clementh.com, esse botão é uma prioridade porque isso realmente me ajuda a gerar Mas se cairmos, você verá que isso não é uma grande prioridade. Isso não é uma grande prioridade. Isso não é uma grande prioridade, e isso também não é. Se avançarmos um pouco mais, isso é uma prioridade, porque isso realmente leva as pessoas ao objetivo que meu site está tentando alcançar. Se cairmos, esse é novamente um botão muito importante. Esse é um botão importante porque as pessoas podem realmente baixar um exemplo do que vamos fornecer a elas. Isso é muito importante porque pode mostrar todos os artigos, embora também possa ser colocado como um bloco de links secundário. Além disso, esse é outro botão importante para levar as pessoas aonde eu quero. Então, basicamente, o bloco de links deve ser usado para todos os botões secundários, onde eles não estão focados principalmente no objetivo que sua empresa está tentando alcançar. E a primeira coisa para fazer com que pareça basicamente exatamente igual a esse botão é garantir que seja o mesmo, tenha o mesmo espaçamento E também podemos ter certeza de que é da mesma cor porque, no momento, está basicamente ligada a isso. Então, se mudarmos a cor, isso muda isso, o que parece perfeito. E então, se clicarmos nesse pequeno x aqui, ele removerá o sublinhado, o que o deixará com uma aparência muito mais limpa e profissional Então, basicamente temos o botão, então podemos atrasar isso. Isso já está alinhado à esquerda. Porém, se quisermos colocar pouco de acolchoamento e destacá-lo um pouco , podemos fazer isso com muita facilidade Mas vamos mantê-lo alinhado à esquerda por enquanto. Então, quando estou vendo isso, isso realmente não parece um botão, não é? Não saberíamos que é um botão a menos que realmente examinássemos o site ou se realmente clicássemos nele e descobrissemos que ele foi para algum lugar Como podemos fazer com que pareça mais um botão usando a função de bloqueio de links? Bem, podemos fazer isso simplesmente usando algo assim, uma pequena seta. Você pode usá-los e encontrá-los on-line simplesmente pesquisando ícones no Google, copiando e colando, e eu mostrarei onde você pode encontrá-los Então, se literalmente acessarmos nosso pequeno bloco de links e usarmos isso, agora ele se parece muito mais com um botão. Agora, há várias outras maneiras de fazer com que isso pareça ainda mais com um botão. E a maneira de fazer isso é simplesmente fazendo coisas como, por exemplo, passar o mouse E quando está sob o mouse, podemos diminuir a opacidade para 40, eu diria E então, quando voltamos ao não, o que basicamente significa que nada está acontecendo com ele. Está apenas parado lá. É 100% da capacidade. Mas quando passamos o mouse sobre ele, ele fica transparente, o que basicamente diz ao usuário, quando você clica aqui, algo vai acontecer, ok? Então, quando fazemos isso, acho que é um pouco rápido demais. Realmente não parece muito esteticamente agradável Tipo, parece um pouco melancólico , nervoso e pouco Então, como podemos fazer com que pareça melhor? Bem, o que podemos fazer é ir até as transições. Podemos ir até todas as propriedades e depois torná-las um pouco mais suaves Portanto, quanto maior esse número , mais suave ele é. Cerca de 500 devem estar bem. E agora, quando passamos o mouse sobre ele, ele fica transparente de uma forma mais suave Então, isso realmente fez muito bem para mim. Mas eu quero que pareça um pouco mais com um botão. Eu quero que as pessoas saibam que se você clicar aqui, você vai para algum lugar. Então, como podemos fazer isso? Como podemos tornar esse botão ainda mais parecido com um botão e menos com um texto padrão? Bem, porque é um bloco de links, e você pode fazer isso com qualquer elemento, mas como é um bloco de links, basicamente parece um bloco de texto e, na verdade, leva a algum lugar. Portanto, é mais discreto e um pouco mais limpo. O que podemos fazer é voltar para Hover. Podemos ir para duas transformadas D e pressionar isso, e essa é a posição dos elementos reais. Então, podemos mudar isso. Podemos fazer muitas coisas boas. Podemos até mesmo movê-lo para a esquerda e para a direita. E eu realmente acho que essa poderia ser uma ótima opção. Então, vamos mover isso para a esquerda em 15. E então, quando voltarmos aqui, ele deve sair. Toda vez que clicamos nele , parece super profissional e limpo. E esse é um ótimo exemplo de como hierarquia de botões pode ser muito importante quando você está criando seu site Você pode ver aqui, desses dois botões, o botão principal e esse pequeno bloco de links, qual deles se destaca mais? Aquele que tem um fundo sólido. Esse é muito mais discreto e muito mais sutil, então você pode usar os diferentes tipos de botões para criar mais foco em determinados botões que você deseja que as pessoas pressionem Botões adicionais ou botões de bônus, em última análise, são os que adicionarão mais à experiência do usuário, assim como o Swan Club, obviamente Você pode fazer exatamente a mesma coisa com este botão para dar vida a ele um pouco e, ouça, abordaremos muitas coisas importantes e divertidas ao longo deste curso à medida que começarmos a criar nosso site juntos. Então, por exemplo, se passarmos o mouse novamente e descermos para o fundo Então, poderíamos potencialmente tornar isso um pouco mais sombrio. Também poderíamos aumentar isso, talvez um pouco, para que possamos aumentar um pouco Sim, isso parece bom. Vá aqui. E então tudo o que precisamos fazer é fazer a transição de todas as propriedades, torná-la um pouco mais suave porque 200 ainda está um pouco instável Mas cerca de 500 é quase certo. 575 ficará bem. Perfeito. Agora, quando passamos o mouse sobre isso, fica mais escuro e meio que aparece um pouco de uma forma bem Portanto, é uma coisinha muito sutil, mas faz toda a diferença. Agora, só para deixar isso extremamente evidente para qualquer um que ainda esteja se perguntando se isso é um botão, e isso é um botão ou não, então você pode basicamente ir até o botão, ir até Pointer, e o mesmo com aqui E, em última análise, se você apenas visualizar seu site, toda vez que passar o mouse sobre ele, é inequivocamente toda vez que passar o mouse sobre ele, é inequivocamente um botão. E a pequena animação e as pequenas diferenças sutis, você sabe, entre quando ela passa o mouse sobre e quando não está, na verdade, comunicam ao usuário, usando a menor quantidade possível de calorias mentais, que você está prestes a pressionar um botão e está prestes a ir a algum mouse sobre e quando não está, na verdade comunicam ao usuário, usando a menor quantidade possível de calorias mentais, que você está prestes a pressionar um botão e está prestes a ir a Agora, eu sei que deveríamos simplesmente mergulhar na caixa de links nesta lição em particular, mas não pude resistir a mostrar alguns pequenos truques para realmente ajudar seu site a ganhar vida de uma forma profissional. Haverá muito mais de onde isso veio na próxima lição, então nos vemos lá. 40. Webflow 101: buttons: Então, como adicionamos botões ao nosso site no fluxo da web? Bem, é super simples. Então, vamos pegar esse botão aqui e simplesmente excluí-lo. Tchau tchau. Em seguida, basta ir até o botão de adição e pressionar o botão, arrastá-lo e pronto. Aí está o seu botão. Agora, esse botão em particular não parece muito bom, a menos que você realmente goste de azul. Então, o que eu quero fazer é mostrar a você como criar o botão para torná-lo mais bonito e se adequar à estética da sua marca e do seu site Então, o que podemos fazer é realmente começar a editar algumas coisas. Então, isso é apenas editar o preenchimento em ambos os lados. E se você simplesmente escolher a opção ou o comando no teclado, poderá alterar os dois ao mesmo tempo. Vamos adicionar um pouco de acolchoamento nas laterais. 30 parece bom. Agora, vamos adicionar um pouco de preenchimento na parte superior 12. Isso parece bom. E então, duas coisas a lembrar são que, quando você está editando o botão, o tamanho do botão é diferenciado pelo texto interno, pelo tamanho do texto, pelo espaçamento entre cada caractere e também pelo preenchimento ao redor do texto, ok Então, se mudarmos o texto para Swan Club, e se selecionarmos isso novamente, descermos e aumentarmos o tamanho da tecnologia, você pode ver que o botão também começa a mudar de tamanho Agora, o que você também pode fazer é alterar o espaçamento para dois, por exemplo, o que faz com que ele se espalhe um pouco, um pouco como este exemplo aqui embaixo Mas o que você também pode fazer, e é aí que as coisas ficam super interessantes, é começar a manipular e editar o design e a aparência do botão, usando coisas como a cor de fundo, que está aqui, para que eu possa literalmente fazer a cor que eu quiser Vamos fazer uma boa dourada. Isso parece bom. Agradável. Perfeito. Então, quero dizer, parece muito bom do jeito que está. Mas talvez vamos adicionar algumas curvas ao botão. Vamos fazer com que pareça um pouco mais elegante. Seis parecem bons. E se, por exemplo, você quisesse editar cantos diferentes em estilos diferentes, você poderia fazer isso, o que dá esse tipo de efeito de sucção Não, eu quero que todas as curvas estejam lá, então vou mudar isso de volta Agora você está em uma posição em que tem um botão bonito, mas como você pode vincular o botão talvez a uma página separada ou talvez a uma página ou talvez se você quisesse criar um botão para Carnes, ligando para o clube Swan Como você faz isso? Bem, tudo que você precisa fazer é clicar no botão. Vá para as configurações. E nas configurações, você simplesmente verá cinco opções. Então, o primeiro é o telefone. Então, ao clicar aqui, basta adicionar seu número de telefone. Agora, a segunda opção é o e-mail. Então, esse é basicamente o e-mail para o qual você deseja que o botão o encaminhe para basicamente enviar um e-mail para esse endereço de e-mail específico. E então você também tem a barra de assuntos. Agora, a barra de assuntos basicamente dirá algo como: “ Ei, Swan Club, eu quero participar Retire as peças. Então, isso vai aparecer essencialmente como uma linha de assunto. Se eu clicar nesse botão e ele estiver conectado a um determinado e-mail. Agora, a próxima opção é página. Então, o que quero dizer com página é que, se eu for até aqui e chamar isso de seção de portfólio, posso vinculá-la à seção de portfólio para que, quando eu realmente começar a navegar pelo site, eu possa simplesmente clicar aqui, e isso me levará automaticamente para essa seção. E vamos voltar. Agora, esta é uma página separada. Então, por exemplo, esta é uma página que está internamente dentro do seu site Agora, é muito importante que você use isso se quiser vincular internamente ao seu site porque se você usar o URL, o URL poderá mudar no futuro Portanto, se mudar , o URL real pode estar errado e provavelmente bagunçará completamente todo o seu site, que não é ótimo Então, tenha isso em mente. Se você estiver vinculando fora do seu site, use essa opção, a opção de URL Basicamente , você estará vinculando a uma página dentro do seu site, então, permanecendo dentro do seu domínio, use essa opção Agora, e se quiséssemos ter uma opção de carros e um e-mail? Bem, teríamos a opção Carros aqui assim. Então, o que poderíamos fazer é literalmente copiar e colar isso. Então, agora temos dois botões que são essencialmente exatamente iguais. Neste botão, poderíamos essencialmente colocar e-mails. Então, poderíamos mudar isso nas configurações. Para a opção de e-mail. Swans em swans.com. Então você tem cisnes. Oh, você é um cisne OK. Exclamação, Mark OK. Então, agora temos dois botões. Uma é para chamar esse clube O, e a outra é enviar um e-mail para esse clube. Agora, parece que está tudo bem, mas duas coisas estão realmente me incomodando. A primeira coisa é que não gosto de como esses botões estão empilhados uns sobre os outros Então, como podemos corrigir isso? Podemos corrigir isso com um bloco dF Então, adicionamos o bloco de imersão. Em seguida, adicionamos isso, copiamos e colamos isso. Agora você pode ver que eles estão lado a lado, o que parece dez vezes melhor, mas não há nenhuma lacuna entre eles, e isso é muito irritante. Então, o que podemos fazer? Podemos adicionar um pouco de margem. Portanto, os elementos internos são o preenchimento e os elementos externos são a margem Então, ele já tem uma margem abaixo, que é ótimo, mas na verdade podemos retirá-la porque na verdade não precisamos dela, mas podemos dar um pouco de margem para a direita, que ajuda a dividir os dois botões. Agora, esses dois botões estão ótimos. Mas algo realmente importante é ter uma hierarquia de botões Se você já tiver aprendido essa lição específica neste curso, entenderá o que quero dizer Agora, se você não entende a hierarquia de botões, confira essa lição agora porque ela será muito valiosa para você Então, o que vou fazer é gostar aparência desses dois botões. Mas eu quero deixar o botão de chamadas mais proeminente e o botão de e-mails menos proeminente, ok? Então, o que eu vou fazer é chamar esses dois botões, algo diferente. A razão pela qual eu também estou fazendo isso. Deixe-me mostrar, é porque se eu mudar o plano de fundo ou o texto desse botão em particular, isso os mudará para ambos. Porém, se eu chamar esse botão de botão quatro, Carl us e esse botão e e-mails, eles não estão mais conectados, ok Então, eles podem basicamente ser projetados da maneira que eu quiser. Então, o que eu posso fazer é pegar isso, eu posso pegar isso, adicionar um pouco. Vá ou até mesmo isso. Completo, leve isso embora. E então eu também posso adicionar texto. Eu pareço muito melhor. Aí está. Isso parece dez vezes melhor. Agora, o que eu também vou fazer é adicionar um pouco de contorno de orelha ao redor, para que fique bonito e uniforme Perfeito. Agora, quando olhamos para esta seção específica, agora podemos ver que há um botão no alto de uma rocha aqui Queremos que as pessoas apertem esse botão primeiro, mas se quiserem nos enviar um e-mail , estão livres para fazer isso. Essa opção ainda está lá. Mas como podemos dar vida a esses botões um pouco? Porque quando passamos o mouse sobre eles, nada realmente acontece. Nós meio que uma mãozinha aparece para mostrar que é um botão, mas na verdade não está fazendo muita coisa. É meio chato. Então, vamos ver como podemos dar vida a eles. E uma maneira de dar vida a eles é usando a animação flutuante, o que é muito fácil Então você pode ir até aqui, pressionar o mouse, descer e, no final das contas um pouco de paz para 65, voltar para zero e , quando tocamos, você pode ver que o botão Carlos tem um pequeno recurso que mostra que ele está sendo pressionado ou colocado voltar para zero e , quando tocamos, você pode ver que o botão Carlos tem um pequeno recurso que mostra que ele está sendo pressionado o mouse sobre ele, devo Agora, realmente não parece muito bom, se você olhar para ele. Ele meio que chega a 65 pacity muito, muito rapidamente. E nós não queremos isso. Queremos, é que seja agradável e suave. Então, tivemos uma transição e levamos isso para cerca de 500. Isso vai parecer muito mais suave. Você vê isso? Não, parece muito mais profissional e muito mais confiável Agora podemos dar um passo adiante. Podemos ir para a seção de foco novamente, ainda neste botão aqui, o botão de chamadas. Podemos descer para duas transformações d. Podemos ir para esta seção e aumentá-la um pouco em quatro. São apenas quatro pixels. Agora não voltamos ao nada. Vamos voltar a isso. E podemos muito bem mudar isso para todas as propriedades. Então, antes era apenas configurado para Apcity, agora tudo são propriedades Então, qualquer alteração que eu fizer nesse botão em particular é feita com uma lacuna de 500 milissegundos, ok? Então, deixe-me dar uma olhada nisso. Esse botão, ainda é o mesmo. Esse botão. Ah, está bem. Olha como isso parece suave. Muito bom. Então, como podemos animar esse botão? Bem, há algumas maneiras diferentes de fazer isso. Se formos para Hova novamente, desceremos. Podemos ver que o texto atualmente é dourado. Vamos mudar isso para branco. E então eu quero mudar o fundo para essa cor. Parece bom. Na verdade, eu quero torná-lo um pouco mais escuro Lá vamos nós. Vamos ver como isso parece. Eu também vou mudar isso. Perfeito. Agora eu vou voltar ao zero. E então eu vou para as transições, lembre-se. Acesse todas as propriedades. Vá para 500, 525 será bom. OK. Então, agora, quando testamos os dois botões, Ligue para nós parece bom. Um e-mail para nós parece bom. Então, agora temos dois botões totalmente animados. Agora, isso é basicamente, você sabe, reunir animações diferentes Na verdade, eu não recomendaria usar essas duas animações lado a lado Deve haver um elemento de consistência lá. Eu só queria mostrar como você pode criar botões realmente excelentes em um período muito curto de tempo. E quando você realmente tiver as animações gerais para seus botões, tudo o que você precisa fazer é copiar e colar, e você pode simplesmente copiar esses botões específicos em qualquer lugar do site que desejar E sempre será o mesmo em relação à animação, e você pode até mesmo alterar o texto. Perfeito. Então, espero que isso lhe dê um pequeno curso intensivo sobre adicionar botões ao seu site, então nos vemos na próxima lição. Nos vemos lá. 41. Webflow 101: tipografia: Então, tipografia no chão da web. Como podemos fazer nossa tipografia no chão da web? Como podemos fazer com que o texto em nossos sites tenha uma aparência incrível e, ao mesmo tempo , entender como editá-lo para obter o site perfeito que queremos? Agora, nesta lição, vamos abordar tudo nesta linda caixinha. Então você sabe como usar perfeitamente a tipografia no chão da web. Então, vamos começar a brincar. Então, em relação à fonte, isso é bastante autoexplicativo Você pode selecionar qualquer uma das fontes padrão no web floor? Mas você também pode adicionar fontes personalizadas. E a maneira de fazer isso é simplesmente clicar aqui, o que o levará diretamente para a seção Fontes no painel de configurações. E então, tudo o que você precisa fazer é enviar o arquivo de fonte de sua escolha, pressionar salvar e, em seguida, pressionar publicar e publicar o site, e pronto. Então, digamos, por exemplo, que queremos mudar isso para Mon Serrat Perfeito. Isso parece incrível porque os cisnes são incríveis Se quiséssemos tornar isso um pouco maior, poderíamos usar essa ferramenta. Então, esses são essencialmente os diferentes pesos que temos para aquela fonte ou face de tipo específica Agora, o que você verá é que nem todas as fontes têm a seleção completa. Portanto, talvez seja necessário adicioná-los manualmente se precisar especificamente, você sabe, aerial thin, por exemplo, porque ele não está disponível como padrão no fluxo da web Mas, felizmente para nós, a Monsat tem todos os pesos disponíveis, então vamos escolher o mais ousado e dar uma olhada nisso. Mmm. Nada mal. Agora é aqui que as coisas começam a ficar um pouco mais interessantes, então podemos editar o tamanho dessa frente aqui apenas clicando para cima e para baixo, ou podemos até colocar um número lá, e podemos distinguir quão grande ou pequeno é o texto real. Na verdade, acho que é um pouco pequeno demais. Vamos em frente, vamos em 35. Perfeito. Agora, a altura é um pouco diferente. Então, a altura é, deixe-me mostrar, porque as meias asas, obviamente. Agora, a altura é o pequeno espaço entre as linhas das palavras. Então, se formos para 40, você verá que fica um pouco mais apertado Se formos para 60, você verá que fica muito maior. Agora, a melhor prática é aproximadamente 1,5 vezes o que você tem aqui. Então, se fosse 30, por exemplo, se colocarmos isso como 45, essa é aproximadamente a quantidade certa de espaço que você deseja para seus cabeçalhos E o mesmo vale para o texto do parágrafo e para todos os outros trechos do texto. Então, abordamos todas as coisas básicas. Obviamente, sabemos o que é cor, então doamos um mergulho muito profundo nisso O alinhamento é bem simples. É simplesmente como o texto é alinhado na caixa em que você o tem Podemos colocar o texto em itálico. Também podemos adicionar uma linha ao longo do texto, alinhar abaixo do texto e também uma linha acima do texto. Vou ser completamente honesto. Não tenho ideia de quando você colocaria uma linha acima do texto, mas as opções existem se você precisar. Agora, essas configurações adicionais aqui embaixo estão basicamente escondidas nessa barra de opções de mais tipos. Então, se clicarmos aqui, podemos começar a mudar coisas como espaçamento entre letras, que é basicamente a quantidade de espaço entre cada letra na caixa Em seguida, temos que recuar o texto. Então, se colocarmos isso como dez, isso vai indentar o primeiro caractere do texto Digamos, por exemplo, que quiséssemos recuar um pouco cinco, ou talvez quiséssemos começar ainda mais. Vamos colocar 30. Para ser sincero, eu realmente não uso isso com muita frequência, mas está lá se você precisar. Agora, em relação às colunas, na verdade usamos isso aqui antes. Então, o que podemos fazer é colocar isso como dois, então basicamente divide tudo em duas colunas separadas para simplesmente torná-lo um pouco mais cativado, eu Não tenho certeza de quando você usaria isso como título, mas você pode usá-lo, por exemplo, se estiver criando o efeito um pouco como um jornal em que você tem duas linhas de texto em cada lado e lê a primeira à esquerda e a segunda à direita, pode ser quando isso é usado Mas, para ser totalmente honesto, eu não usaria isso como cabeçalhos Agora, a ferramenta em maiúsculas é muito importante porque pode realmente economizar muito tempo Por exemplo, se você quiser que todos os cabeçalhos sejam capitalizados, pressione e altere isso conforme desejar Você também pode garantir que todas as primeiras palavras também estejam maiúsculas Então, mesmo que eu tenha as letras digitadas assim e pressione isso, ela automaticamente coloca em maiúscula cada palavra dessa Ou, claro, você também pode tê-lo com todas as letras minúsculas, o que também é ótimo. Vamos nos livrar disso por um segundo e, na verdade, escolher capitalizar, para que pareça um pouco melhor Agora, essa pequena função aqui é essencialmente direção. Então, no momento, está indo da esquerda para a direita, mas se eu mudar isso aqui, ele começa a ir da direita para a esquerda. Novamente, não tenho certeza de quando você usaria essa função específica, mas ela está lá se você precisar dela. Agora, se você já fez a lição de responsividade do site neste curso, você saberá quais são os pontos de interrupção Mas se você não tiver, um ponto de interrupção é essencialmente o momento em que a tela fica pequena o suficiente, por exemplo, aqui, onde as linhas reais começam a se romper em determinados pontos, dependendo do tamanho da tela que você está visualizando o site E isso tem algumas opções diferentes. Por exemplo, tem uma quebra a, então, basicamente, qualquer letra ou palavra pode ser dividida, dependendo do tamanho, ou você pode até mesmo selecionar manter tudo, que é basicamente manter tudo em uma linha e não dividir as coisas. Agora você pode fazer isso por palavra, ou você também pode fazer isso por linha. Então, experimente um pouco com isso se você realmente quiser, mas vou ser totalmente honesto. Nunca usei esses dois elementos em nenhum design que criei nos últimos dez anos, seja no fluxo da web ou em uma plataforma diferente. Agora, em relação ao rap, eu também não sou fã de rap. Eu prefiro rega, mas posso dizer que em relação a essa função específica, acho que se você for usá-la, talvez esteja tornando o site um pouco mais complicado do que o necessário. E a razão pela qual digo isso é que você pode realmente envolver o texto manualmente no próprio texto. Então, por exemplo, eu poderia embrulhar Great. Então está separado e, na verdade, está contido, então eu poderia até colocar uma pequena margem de seis e seis. Parece bom. Bem, isso é 60 scot, então vamos dividir isso por dez Perfeito. Então, o que eu acho que poderíamos fazer, mãe. Interessante Vamos passar isso para branco. Ok, então não podemos ver nada disso agora, mas então vamos roubar esse ouro e vamos mudar esse fundo para ouro Oh, meu Deus. Isso parece incrível. E você pode fazer muitas coisas criativas com essa função específica. Então, quando você seleciona qualquer texto, você pode basicamente adicionar um link, se você realmente quiser. Não tenho certeza de como isso ficaria ótimo ou quando você faria isso, mas talvez você possa ser útil. Você pode empacotar com spam, que é basicamente o que fizemos aqui, e também pode limpar a formatação Por exemplo, se eu quisesse limpar isso e tudo completamente , eu simplesmente clicaria nele e voltaria ao normal. Mas eu meio que gosto disso, então vou manter as coisas como estão. De qualquer forma, eu realmente espero que isso tenha lhe dado um pouco de visão sobre como usar a tipografia corretamente no fluxo da web, então espero vê-lo na próxima lição. Te vejo em breve. 42. Webflow 101: imagens: Ok, então já adicionamos e substituímos imagens neste curso, mas eu só queria dedicar uma única lição para mostrar tudo o que você precisa saber sobre como adicionar imagens no web floor porque é muito simples e fácil de descobrir Agora, se retirarmos essa imagem em particular e a excluirmos, o que é ótimo, então basicamente não temos nada no lado direito, que é exatamente o que queremos. Então, como podemos adicionar uma imagem? Bem, vamos até a pequena cruz aqui. Em seguida, rolamos para baixo até a barra de imagens e simplesmente colocamos nossa imagem lá. Agora, no momento, simplesmente temos uma imagem de espaço reservado, então não temos nada para mostrar a ninguém, o que não é bom porque não é realmente uma imagem É apenas um espaço reservado. Então, como podemos adicionar uma imagem? Bem, pode ser apenas esse pequeno botão aqui que diz escolher imagem. Então, se clicarmos nisso, abriremos nossa barra de ativos aqui no lado esquerdo e tudo o que precisamos fazer é selecionar a imagem que queremos. E aqui, Presto, a imagem agora está aqui. Agora, como você pode ver aqui, a imagem é seu próprio elemento. Então, por exemplo, se você selecionar a imagem, poderá ir para estilo, tamanho e adicionar 50% à metade do tamanho da imagem. Agora, embora essa imagem específica seja 50% neste desktop, se usarmos o laptop, que é essencialmente o núcleo tudo o que responde ao fluxo da web, você verá que a imagem está 100% ou automática no momento Mas se você voltar para o desktop grande, verá que ele ainda está configurado em 50. Então, por que isso? Bem, a razão é porque se retirarmos isso, por exemplo, e colocarmos isso de volta no Auto, então voltará a ser como era antes. Agora, se voltarmos para o centro, que é o núcleo, se tudo o que é responsivo no web floor, se mudarmos alguma coisa aqui com a pequena estrela no canto superior direito, isso mudará automaticamente tudo para a esquerda e tudo para a direita para ser exatamente o mesmo E é assim que você cria sites responsivos no web floor com muita facilidade Então, por exemplo, se continuarmos aqui e mudarmos para 70%, veja que ele muda o tamanho aqui, mas também muda o tamanho em todos os outros dispositivos, seja ele maior ou menor. E se quiséssemos que fosse 70 nesta página específica, mas depois quiséssemos que fosse 100 no celular. Bem, podemos simplesmente selecionar isso aqui, colocá-lo como 100%. E aqui, Presto, está de volta. E como isso está no final da escada de capacidade de resposta, você pode basicamente ter certeza de que está editando apenas esse dispositivo específico Isso não afetará nenhuma outra configuração do dispositivo em todo o site e sua capacidade de resposta. Vamos fingir que pegamos o carro. E também devolvemos isso ao pedido. E se quisermos mudar essa imagem? E se não gostarmos dessas crianças adoráveis pescando? Bem, muito fácil. Basta clicar na engrenagem, substitua a imagem, clique na nova imagem E aí está. De qualquer forma, espero que você tenha achado esta lição útil. Imigrantes estão adicionando imagens ao fluxo da web. Nos vemos na próxima aula. Nos vemos lá. 43. Webflow 101: vídeos: Existem basicamente duas maneiras de adicionar vídeos ao fluxo da web, e eu quero mostrar como. A primeira coisa que você precisa fazer é realmente adicionar o vídeo ao fluxo da web. Então, a primeira coisa que você faz é acessar Media, Dragon drop video. E então ele deve aparecer com as configurações de vídeo. Agora, para o URL, você pode adicionar seu vídeo de vídeo, que geralmente é o que eu prefiro porque parece muito mais limpo, ou você pode simplesmente adicionar um vídeo do YouTube , digitando o URL. Apresentador, e ele aparece automaticamente com o vídeo. Agora, o que acabei de fazer foi basicamente adicionar um pouco de largura apenas para realmente mostrar o vídeo Então, cerca de 400 funcionam perfeitamente para isso, e você pode ver isso. E se realmente visualizarmos o site, você verá que o vídeo aparecerá e será reproduzido sem esforço. Faça o login. Agora, se descermos, vamos para a outra forma em que você pode finalmente adicionar um vídeo no Webflow. Então você tem isso aqui. Vamos colocar a função do YouTube diretamente na divisão de heróis. E, novamente, vamos adicionar esses 400 pixels que mostram isso, URL. E o melhor dessa função específica é que você pode adicionar o início. Digamos, por exemplo, que quiséssemos começar em 1 minuto e 15 segundos. Você pode definir o modo de privacidade de reprodução automática. Você também pode mostrar controles ou não mostrar controles, você também pode silenciá-los E você também pode limitar os vídeos relacionados ao canal. Então, se jogarmos isso agora e gritarmos para começar, itens do CMS. UM 150. Os itens do CMS são de cores perl distintas E, em última análise, é assim que você adiciona vídeos ao web floor. Agora você também pode adicionar vídeos ao web floor usando a função de vídeo em segundo plano. E a maneira de fazer isso é muito simples. Então, em primeiro lugar, você precisaria de uma seção, que podemos adicionar aqui E nessa seção, adicionaremos a função de vídeo em segundo plano, que está nas configurações avançadas. Como você pode ver aqui, em última análise, você tem o vídeo de fundo, tudo o que você precisa fazer é enviar um arquivo de vídeo. Agora, uma coisa a lembrar é que você só tem 30 megabytes de espaço de arquivo para fazer upload de um vídeo em segundo plano Então, em primeiro lugar, certifique-se de que o vídeo seja de alta qualidade porque a última coisa que você quer é um vídeo pixelado apenas para mostrar que você realmente não se importa com o que está Não é isso que queremos. Mas, em segundo lugar, você precisa ter certeza de que o vídeo é curto, pois isso manterá o tamanho real do arquivo muito menor e permitirá que o vídeo seja reproduzido sem problemas Agora você pode escolher se deseja gravar o vídeo em lote, o que eu recomendaria reproduzir o vídeo, que eu recomendaria, e também incluir um botão de reprodução ou pausa, o que eu não recomendaria E depois de fazer isso, basta pressionar play e seu vídeo será reproduzido na parte inferior da tela. Agora, depois de configurar o vídeo de fundo, você pode realmente adicionar o vídeo desta forma, e pode demorar um pouco para carregar e formatar. Mas quando isso acontecer, seu vídeo será reproduzido automaticamente, fará um loop e será reproduzido automaticamente sem que você precise levantar um dedo Assim, assim que alguém acessar seu site, você poderá ver exatamente o que o vídeo inclui. Então, depois de formatado, você pode ver o vídeo aqui Vamos dar uma olhada no botão do player. Posso ver aqui que o vídeo real é um pouco mentiroso, mas isso é simplesmente porque eu baixei um arquivo, que tinha apenas 11 megabytes Se você baixou um que é um pouco maior , ele parecerá muito mais limpo, terá mais pixels e terá uma aparência de melhor qualidade. Agora, o melhor dos vídeos em segundo plano é a seção essencialmente ativa, então eu poderia realmente adicionar esse contêiner ao vídeo em segundo plano e, basicamente, fazer com que todos os meus elementos estivessem lá. Se eu colocar isso em um contêiner e tratar o vídeo de fundo como uma seção, basicamente, posso ter exatamente a mesma coisa que isso aqui em cima, mas com um vídeo em segundo plano sendo reproduzido por trás. Agora, eu não tenho certeza de como isso vai ficar. Isso pode não parecer muito bom, mas certamente podemos ver o potencial de usar um vídeo em segundo plano como parte do design do site. Agora, eu não recomendaria fazer isso. Na verdade, acho que usar vídeos de sites não é muito bom para planos de fundo em muitos casos É muito melhor adicionar o vídeo em si, mas ele está lá se você quiser usá-lo. É outra forma de se expressar, mas tenha cuidado porque o contraste aqui não é ótimo e, na verdade, não ajuda muito na experiência do usuário. E, em última análise, como você pode ver aqui, isso realmente torna o site um pouco mais lento. Agora, só porque isso não está carregando rápido o suficiente, não significa que você não deva fazer isso de qualquer maneira. Eu realmente espero que você tenha gostado desta lição em particular sobre adicionar vídeos ao web floor, mas nos vemos na próxima lição e mal posso esperar para ver você lá. 44. Webflow 101: animações do Lottie: O que são animações de loteria? Bem, pequenas animações são muito úteis para várias coisas diferentes, e eu quero mostrar a você uma das melhores maneiras de usá-las no design do seu site Agora, para adicionar muita animação ao seu site, é muito, muito simples. E tudo o que você precisa fazer é criar uma nova seção, que será exibida aqui. E para adicionar muita animação ao seu site, tudo o que você precisa fazer é ter um contêiner, que está aqui. E dentro desse contêiner, adicionaremos seu bloco di. Isso não entrou no contêiner. Então, vamos copiar e colar isso lá dentro, para que possamos ir para o bloco dif que está dentro do contêiner Em seguida, dentro do bloco di, adicionaremos nossa animação lottie Então esta é a animação da Lottie aqui. Ok, então isso não funcionou. Então, vamos copiar e colar isso. Em seguida, cole isso dentro do bloco de diferenças. Então, vamos lá. Portanto, temos nossa animação de loteria dentro de um bloco de diferenças dentro de um contêiner, que está dentro da seção Em relação a uma animação lotty, é exatamente o mesmo que adicionar uma imagem ou um vídeo Você simplesmente pressiona a pequena engrenagem. Você substituiria a sequência de loteria por uma nova sequência de loteria, que mostrarei onde conseguir isso em breve E então, tudo o que você basicamente faz é dizer duração incorporada, ver quanto tempo você realmente quer que dure. Você também pressiona loop, o que significa que ele fará um loop constante repetidamente, modo que pareça muito perfeito E então você também pode pressionar aqui para reproduzi-lo ao contrário. Agora, você pode estar se perguntando o que realmente é uma animação lotty Agora, sua animação é essencialmente uma animação muito suave. Você pode adicioná-lo como uma imagem, mas é como um presente, mas é uma animação muito suave, que pode durar para sempre sem nunca parar. E isso pode ser muito útil se você quiser mostrar, por exemplo, certas estatísticas sobre sua empresa ou talvez clientes com quem você trabalhou ou, sabe, publicações que tenham apresentado você, porque ter isso seu site na forma de uma animação do Lotty pode parecer superprofissional, muito limpo e com uma aparência muito Deixe-me mostrar um exemplo de muitas animações que eu uso no meu site. Então, essas são essencialmente duas animações de loteria. Este está indo em uma velocidade um pouco mais rápida, e este aqui está indo em uma velocidade mais lenta E, como você pode ver, parece super limpo, superprofissional e realmente ajuda a nos posicionar como especialistas no campo da marca, mostrando todas as diferentes marcas que desenvolvemos e criamos nos últimos anos Agora, onde você pode realmente obter muita animação? Ou você pode até mesmo criar um sozinho? A verdade é que você mesmo pode criar um se realmente quiser. Agora, eu pessoalmente não sei como fazer isso, mas sei onde conseguir muitas animações super baratas. Portanto, inicialmente, você pode obter muitas animações por $15 em sites como fibra Você pode até comprá-los de graça mesmo que baratos, para ser honesto, custam $5, o que é muito, muito bom E tudo que você precisa fazer é simplesmente dizer a eles exatamente o que você quer, dar a eles todos os arquivos, e eles devem ser capazes de descobrir por você. E então, tudo o que você simplesmente faz, depois de ter seu arquivo, é simplesmente carregá-lo para o site, basta clicar no Cog, substituir uma grande quantidade de sequência, e a sequência LotTi deve estar aqui, e deve ser e Agora, muitas animações vêm na forma de arquivos JSN. Então, se você puder obter o arquivo JSN de alguém da Fiber ou de alguém que seja designer, talvez você conheça alguém ou tenha alguém da sua família, assim que tiver esse arquivo JSO, basta adicioná-lo ao seu site como se fosse uma imagem e, assim que você realmente publicar seu site, ele começará a ser reproduzido automaticamente Então, eu realmente espero que você encontre algum tempo para investir em uma animação Lotti, se ela se adequar ao seu site, mas espero que a lição seja útil, e nos vemos na próxima 45. Webflow 101: formulários: Então, como você cria um formulário no fluxo da web? Agora, eu posso te dizer agora que é muito, muito fácil. Eu vou te mostrar exatamente como fazer isso nesta lição. A primeira coisa a fazer é, se você quiser criar um formulário em uma seção, por exemplo, ir até a seção de formulários pressionando o sinal de adição e, em seguida adicionar o elemento do bloco de formulários, , adicionar o elemento do bloco de formulários, que você simplesmente colocaria lá. E, como você pode ver aqui, não parece ótimo. Vou copiar e colar isso dentro do bloco DIF. E agora, pelo menos, está centrado. Agora, esse é o primeiro passo para criar um formulário. Você precisa ter tudo dentro de um bloco de formulário. Então, adicione primeiro o bloco do formulário e, em seguida, podemos começar a construí-lo. Agora você pode criar qualquer tipo de formulário que quiser. E tudo o que você precisa para criar um formulário está dentro dessa pequena caixa aqui. Então, por exemplo, vamos realmente usar cada um dos elementos dentro dessa caixa específica para mostrar como usar cada elemento. Então, já usamos o bloco de formulários. Agora vamos adicionar um rótulo. Então, se vamos adicionar um rótulo, precisamos essencialmente de outra coisa para adicionar ao bloco de formulário. Então, vamos adicionar essa área de texto aqui, que não vai para a caixa. Então, vamos adicionar essa cópia e colar dentro do formulário. Perfeito. E então o botão de envio deve estar na parte inferior, então vamos adicionar isso aqui. Perfeito. Então, adicionamos isso aqui, que é essencialmente uma área de texto, que parece ótima. Em seguida, vamos adicionar um rótulo, que está aqui. Vamos adicionar isso acima do bloco de texto. Ah, então está abaixo disso. Então, vamos adicionar isso acima disso. Perfeito. Então, agora temos um campo de texto adicional, nossa caixa de endereço de e-mail e também nossa caixa de nome. Então, vamos fazer isso aqui e nomear essa mensagem. Perfeito. Agora, não parece ótimo, mas estamos chegando lá. Estamos progredindo. Então, vamos ser pacientes. Vamos nos aprofundar nos outros elementos. Então, talvez vamos adicionar uma caixa de seleção lá dentro também. E colocaremos a alteração do nome para optar pelo marketing e e-mails Início verificado, obrigatório. Abaixe um pouco e adicione um pouco mais de margem. Ok, então a margem por algum motivo não está funcionando, e acho que é porque é um pouco grande demais. Então, vamos tornar isso maior. Estamos adicionando um pouco de margem. Então 20 Então vamos adicionar 20 a este também. Lá vamos nós. Então, agora temos um pouco de espaço para respirar. Agora eu não gosto de como isso é abóbora. Realmente não parece muito bom, então vou adicionar 20 entre eles também. Vou alterar esse botão de envio apenas clicando nele para enviar uma mensagem. E então eu vou mudar isso para enviar mensagem. Lá vamos nós. Então parece um pouco melhor, mas ainda parece muito apertado Então, como podemos corrigir isso? Bem, se pressionarmos a seção pressionarmos a vertical e a esticarmos, isso deve funcionar. Mas então, se formos para o contêiner de blocos DIV, podemos começar a realmente entender como esticar ainda mais as coisas. Lá vamos nós. Então, basicamente acabamos de liberar qualquer tipo de restrição do bloco de seção, então é permitido que o formulário seja totalmente expandido, o que parece muito melhor Agora, eu meio que gosto disso, mas acho que esses rótulos simplesmente não parecem muito limpos. Eu prefiro tê-los dentro das próprias caixas, apenas para proporcionar uma experiência mais perfeita para o usuário. Então, como podemos fazer isso? Bem, poderíamos simplesmente excluí-lo, clicar na pequena engrenagem e colocar a palavra Nome aqui, que parece muito melhor Vamos fazer o mesmo com o endereço de e-mail. Perfeito. E então vamos fazer o mesmo com a mensagem também. Perfeito. Então, podemos deletar isso. Excelente. Isso parece muito melhor. Agora, uma vez que fizermos isso, vamos adicionar um pouco mais de lacuna. Parece bom. Marketing e e-mails. Lá vamos nós. Então, está parecendo muito melhor. Vou adicionar um cabeçalho acima dele, que na verdade não precisa estar dentro do bloco phm, ele só precisa estar acima dele, mas vou colocá-lo dentro do contêiner para que fique alinhado com o resto dos elementos E a melhor maneira de fazer isso, eu acho, é pegar isso e fazer acima do bloco phm Lá vamos nós. E então eu quero adicionar um pouco mais de espaço aqui. Lá vamos nós. Isso não parece muito ruim. Não parece nada ruim. A seção de nomes está me irritando um pouco. E se pudéssemos colocar nome e o sobrenome no bloco do formulário? Como faríamos isso? Bem, na verdade é muito fácil. Então, a primeira maneira de fazer isso é basicamente, ou a melhor maneira, devo dizer, é adicionar um bloco dI. Então, dentro desse bloco di, que atualmente está aqui, tínhamos uma grade, que está aqui. Então nós tínhamos isso dentro do bloco de lixo lá. Agora temos a grade e, dentro dessa grade, também adicionaremos dois novos blocos dI. Lembre-se de que os blocos dI são apenas os cômodos dentro da casa. Então, estamos apenas criando alguns quartos extras dentro da casa, ok? Depois, vamos copiar e colar isso. Perfeito. Na verdade, não, não vamos copiar e colar. Vamos colocá-lo manualmente. Vamos fazer isso corretamente e deixar de ser preguiçosos, Scotty Ok, então temos tudo lá em cima agora. Agora, o que eu quero é adicionar uma caixa de entrada dentro do bloco d. Perfeito. Agora vou adicionar outra caixa de entrada dentro do bloco di. Excelente. Muito feliz com isso, para ser honesto. Ok. Excelente. Então, vou editar essa grade. Vou analisar o espaçamento aqui e diminuí-lo, então eu não gosto disso, por ser demais. E isso está realmente parecendo muito bom. Então, agora eu vou deletar isso. Então eu não preciso mais disso. Isso está aí. Isso está aí. Isso está aí. Então, vou mudar isso para o primeiro nome. E eu explico qual é o nome e o texto do espaço reservado e a diferença entre eles posteriormente Mas, por enquanto, estou me concentrando apenas no design. Ok, perfeito. Então, agora temos o formulário praticamente concluído. Agora, em relação ao uso do formulário, o que vou fazer é adicionar um pouco de preenchimento, então vou adicionar talvez 15 aqui e talvez 45 aqui, para pegar esse bloco de mergulho e, basicamente, torná-lo com uma cor diferente Vamos fazer isso. Vamos realmente fazer ouro de novo? Por que não? Vamos torná-lo dourado novamente. Perfeito. Vamos fazer isso branco. E vamos fazer isso branco. Na verdade, não. Não vamos. Vamos fazer com que seja um ouro muito escuro. Ok. Isso não parece muito ruim. Vamos deixar isso claro, porque não estamos nos concentrando muito no design. Eu só quero te mostrar como realmente criar um bloco de formulário e um formulário para o seu site. Então, percebemos que está muito bom, mas o que me irrita é que o espaço entre esses dois elementos não é o mesmo que esses Então isso está realmente me irritando. Então, o que eu quero fazer é ir para a rede. Vou dar uma olhada em qualquer grade. Então há 16, há 16 pixels entre as duas colunas aqui, ok? Agora, eu posso mudar isso ou posso alterar a quantidade de espaço entre essas seções, o que, se você fizer isso, deve nos ajudar um pouco. problema é que a melhor maneira fazer isso pode ser feito por mim, porque já existem alguns pixels lá. Isso parece muito melhor. Então, agora eu vou adicionar mais sete pixels a este. Aí vamos, perfeitos. Tudo está em proporção agora. Excelente. Estou feliz com isso. Incrível. Agora, no que diz respeito à formatação real dos diferentes elementos do formulário, tudo o que você precisa fazer é se certificar que, ao adicionar, por exemplo, o bloco do primeiro nome, o bloco do sobrenome, o endereço de e-mail, a mensagem de texto, a caixa de mensagem, que está aqui, e, obviamente , a opção de aceitar os e-mails de marketing Você precisa ter certeza de que, ao clicar na engrenagem, sejam nomeados porque, quando os dados forem enviados para o seu endereço de e-mail, você precisa ter certeza de que eles estão rotulados porque, se não estiverem você receberá as informações e não saberá o que são, então você não saberá se é o primeiro nome, se é o sobrenome, se é a mensagem deles Portanto, rotulá-los é muito importante. Portanto, o espaço reservado é o texto dentro da caixa, enquanto o nome realmente virá do e-mail que você recebe quando alguém entra em contato com você. Então, verificamos este. Obviamente, este é obrigatório porque precisamos saber o nome deles em relação a este, sobrenome, mas esse é o nome, isso é bom, e esse é um sobrenome, mas esse é o nome, isso é bom, endereço de e-mail obrigatório, perfeito Ok, isso é bom. E o tipo. Então, temos cinco tipos diferentes de dados. A primeira é simples, que são apenas letras normais. Em seguida, é o endereço de e-mail. A próxima é uma senha. O próximo é o telefone e o próximo é apenas um número. Está bem? Portanto, dependendo do tipo de dados que você está tentando obter do usuário ou do visitante do site, você precisa selecionar o tipo de dados que você está tentando fazer com a pessoa insira dentro desse elemento. Então, por exemplo, aqui, é e-mail, diz e-mail na parte superior e diz endereço de e-mail, o que é perfeito. Agora, em relação à mensagem, vamos verificar esta por último. Então, esse ainda é o campo. Então, não queremos que ele veja isso. Queremos que ele veja a mensagem necessária. Escreva sua mensagem aqui. Eu gosto disso. Esse é o texto do espaço reservado. Excelente. Agora tudo parece muito bom, mas por que essa está ficando um pouco louca? Eu não entendo. Por que isso está ficando um pouco louco? Vamos atualizá-lo e ver o que acontece. Ok, então tudo parece estar em ordem. Então, podemos realmente verificar isso. Na verdade, podemos verificar este formulário. E antes de realmente verificarmos o formulário, vamos ver o que está acontecendo lá fora. Ok. Então, forma de nome. Se você quiser redirecionar para um URL diferente, você pode colocar isso aqui Em relação às ações, isso está no padrão do fluxo da web, e você só precisaria alterá-lo se quiser vinculá-lo a um provedor de e-mail como o Mailchimp, por exemplo, ou algo parecido E se você quiser conectá-lo a um provedor de e-mail, como chip de e-mail ou outra plataforma baseada em e-mail, confira seus tutoriais específicos, que eles terão em seu site porque cada plataforma é um pouco Então vamos lá. Tudo parece bom. Vamos colocar o formulário de mensagem. P. E então vamos apenas verificar o back-end nas configurações. Ok, tudo parece bem. Tudo parece bom, tudo parece bom. Perfeito. E então, se clicarmos em sucesso, isso é o que aparecerá quando um formulário bem-sucedido for enviado a você. Então, nós só queremos mudar isso porque atualmente parece real, real, muito ruim. Mude isso. Altere o texto aqui para branco. Perfeito. E então o que acontece quando não tem sucesso. Erro. Perfeito. Isso parece bom. Incrível. Então, quando realmente experimentamos isso, entramos lá. Vamos realmente tirar isso. Perfeito. Lá vamos nós. Vamos experimentá-lo. Ok, então Scott Lancaster, scott@gmail.com. Eu adoro cisnes. Ok, inscreva-se, envie-me uma mensagem e não funciona no modo de visualização. Mas se isso foi realmente publicado, que é o que faremos agora, e se o verificarmos online, se analisarmos e testarmos de verdade, então eu adoro o ponto de exclamação do Burger Uma mensagem, sucesso. Então, nós literalmente construímos um formulário em questão de 10 minutos, 15 minutos. E, você sabe, não é a forma mais bonita do mundo. Obviamente, você pode dedicar mais tempo e procurar inspiração. Mas agora você sabe exatamente como editar um formulário e até mesmo criar formulários do zero. Acabamos de fazer isso sozinhos nos últimos dez, 15 minutos. Portanto, você pode criar formulários do zero, mas lembre-se também de que todos os modelos que forneceremos como parte deste curso já têm formulários organizados para você, então você não precisa criar um formulário do zero se não quiser. De qualquer forma, eu realmente espero que você ache esta lição útil, e eu realmente espero que você goste de criar formulários no futuro para o seu site. Estou ansioso para ver você na próxima lição. Nos vemos lá. 46. Webflow 101: barra de navegação: Ok, digamos, por exemplo, que você queira adicionar uma barra de navegação ao seu site. Agora, novamente, todos os modelos que você usaria neste que você usaria neste curso já terão barras de navegação incorporadas. Mas se você quiser criar seu site do zero, poderá encontrar a barra de navegação aqui embaixo. E tudo o que você faz é arrastar isso até o topo. Deixe pra lá. E aqui, Presto, você tem sua barra de navegação Agora, depois de configurar sua barra de navegação, agora você só precisa estilizá-la e adicionar seu logotipo, por exemplo. Então, vamos até a pequena caixa da marca aqui. E então o que precisamos fazer é, basicamente, fazer com que isso volte para casa. Então, toda vez que isso for pressionado, não importa em que página esteja, ele nos levará automaticamente de volta à página inicial, que é o que queremos, ok? Então, a próxima etapa é começar a estilizar a barra de navegação, então vamos até o estilo e clicaremos na barra de navegação Vamos descer e vamos torná-lo bonito e branco. Então eu me destaco. Perfeito. Além disso, quero adicionar um pouco mais de espaço e preenchimento entre a parte superior e inferior Então, eu quero apenas segurar a opção e adicionar cerca de oito pixels de preenchimento em cada lado, o que parece bom Agora, eu quero colocar um logotipo aqui dentro. Então, como eu faço isso? Bem, vá para o sinal positivo para ver a imagem. Adicione a imagem dentro da caixa. Então, como você pode ver aqui, a imagem está dentro da caixa de links da marca. E então tudo que eu faço agora é adicionar o logotipo. Agora, em relação ao logotipo de uma marca, há um logotipo no qual venho trabalhando há algum tempo de uma pequena empresa que estou construindo paralelamente chamada Amazon Sim, se você já ouviu falar , parabéns. Acho que muitas pessoas não ouviram falar de nós, mas estamos chegando lá devagar, mas com certeza. Agora, como você pode ver, esse logotipo está meio que preso na parte superior do contêiner por algum motivo. E, para ser sincero, não tenho certeza do porquê. Então, o que podemos fazer para corrigir isso é adicionar um pouco de preenchimento para reduzir isso. E o Presto, o logotipo está agora no meio. Agora tudo o que precisamos fazer é trocar o umbigo. Então, a essa altura, você deve saber quais páginas você precisa para o seu site. Então, por exemplo, não precisamos de uma página inicial porque o link abaixo da imagem na verdade, volta direto para a página inicial e sempre nos levará até lá, não importa qual página Portanto, na verdade, não precisamos de um link para a página inicial em nossa opção de navegação. Então, nós temos o que é sobre nós. Talvez precisemos de um contato conosco. Sim. E então acho que precisamos de serviços. Agora, quero adicionar um link de navegação extra aqui para serviços. Mas como eu faço isso? Bem, podemos simplesmente copiar e colar, o sobre nós. Mude isso para serviços e pronto. Então, como você pode ver aqui. Parece muito bom. Temos o logotipo, que nos leva de volta à página inicial. Também temos informações sobre nós, os serviços, o contato conosco. Agora, no momento, não parece ruim, mas também não parece muito bom, certo? Então, o que podemos fazer para dar vida a esses elementos um pouco? Bem, o que poderíamos fazer é reduzir um pouco a cor aqui para talvez isso. E então podemos simplesmente copiar isso para cada um dos elementos. E essa é mais ou menos a mesma abordagem que a Apple faz. Com esse site, e eu adoro a maneira como eles fazem isso. Está bem? Então, temos as três opções. Agora, talvez queiramos adicionar um pouco de espaço entre eles, talvez 25, 25 também. Perfeito, tem um pouco mais de espaço. E então, quando você passa o mouse, eu quero que eles fiquem muito mais escuros. Lá vamos nós. Eu pareço muito melhor. E também pressionamos selecionado. Quando selecionado, quando pressionado. Também devemos usar essa opção. Perfeito. Então você pode ver aqui como ele realmente mais escuro quando passamos o mouse sobre ele e também quando o pressionamos Então, tudo o que precisamos fazer é fazer exatamente o mesmo para cada uma dessas outras opções. Incrível. E então tudo o que precisamos fazer é voltar até aqui e selecionar as transições. Todas as propriedades. Cerca de 425 devem estar bem. Propriedades 425. Apenas certifique-se de que sejam todos iguais para que tenham uma aparência bonita e consistente, o que é ótimo. Incrível. E agora você pode ver que parece super limpo e super profissional. Então eles têm isso. Você sabe como criar uma barra de navegação de forma realmente simples em seu site com o mínimo de barulho Lembre-se de que, nos modelos que oferecemos no curso, todos eles já têm barras de navegação incorporadas. Você não precisa fazer todo esse trabalho, mas eu só quero ter certeza de que você tem a capacidade total de criar tudo em seu site do zero , caso queira. Espero que você ache esta lição útil e nos vemos na próxima. 47. Webflow 101: símbolos: Ok, então como você pode criar símbolos para economizar muito tempo ao criar seu site? Bem, deixe-me te mostrar como. Então, esse pequeno símbolo aqui, perdoe o trocadilho, é essencialmente o que gostamos de chamar de símbolos no fluxo da web Então você pode chamá-los de componentes ou de símbolos. Gosto de chamá-los de símbolos porque você pode usá-los para repetir certos elementos do seu site em todo o site com o mínimo de E a melhor coisa é que, quando você cria um símbolo, assim, acaba criando essa duplicata. Então, quando você altera algo nesse elemento específico, ele muda em todo o site. Agora, isso pode ser muito útil porque, por exemplo, vamos ver se queremos criar isso como um símbolo. Então vamos para essa seção, simplesmente clicamos nela, criamos essa seção. Esta é a nossa seção de informações. Perfeito. Então, agora temos um novo símbolo aqui. Então, digamos, por exemplo, que queremos adicionar um desses mais abaixo na página, ok? Então pegamos, copiamos, colamos. Lá vamos nós. Portanto, agora temos duas em quatro seções na parte inferior da página. Agora, se eu mudar isso aqui embaixo, e você tiver que clicar em dois símbolos para realmente alterá-los também, você clicará aqui, e então ele realmente permitirá que você o altere. Você vai dizer que o mesmo Scott é feio, só brincando, então adivinha Quando você vai para o fundo, ele muda automaticamente. Agora, isso pode ser muito útil para coisas como formulários, se você quiser ter o mesmo formulário na parte inferior de cada página, ou talvez queira adicionar avaliações e quiser atualizar apenas uma única caixa sem atualizar todas as avaliações em todo o site e quiser avaliações em todas as páginas. Pode ser super útil. Portanto, use símbolos, sempre que quiser economizar tempo, use-os para sua barra NaF, use-os para rodapés, e você pode ter vários símbolos, praticamente quantos quiser, para economizar o tempo que De qualquer forma, eu realmente espero que você ache essa pequena dica útil. E estou ansioso para ver você na próxima lição. Te vejo em breve. 48. Webflow 101: caixas de luz: Ok, então o que é uma mesa de luz e como você pode usá-la? Bem, na verdade, eu uso bastante lightboxes no meu site, onde basicamente tenho um pequeno botão criado por um link de lightbox, que então você pode ver aberturas para mostrar algum tipo de vídeo Então eu o uso aqui, mas também o uso um pouco mais abaixo que, quando alguém quiser assistir aos depoimentos em vídeo de clientes, basta clicar neste link e ele aparece automaticamente com o Agora, essa é uma maneira muito simples fazer com que vídeos e imagens, o que seja relevante para sua marca específica, apareçam quando alguém clica em um link, e é uma maneira muito simples de fazer isso E vou mostrar como usar um link do Lightbox neste vídeo Ok, então estamos de volta ao nosso pequeno site experimental, onde não nos importamos o que acontece se alguma coisa quebrar, e eu realmente não quero mexer muito com site da minha agência Brandon porque venho refinando esse site nos últimos dez anos e não quero Então, vamos mergulhar e ver como podemos usar essa função de link do Lightbox para obter, você sabe, uma experiência muito boa para nossos usuários quando eles visitam nosso site Então, a função lightbox está aqui. Então, vamos adicionar isso ao contêiner. E por alguma razão, ele não quer entrar lá. Então, o que eu vou fazer é deixar isso aqui. E então o que eu posso fazer é simplesmente copiar. Então, quando você está fazendo isso, ele coloca automaticamente uma imagem dentro do link do Lightbox Então, o que eu vou fazer é, eu não quero a imagem real, vou apenas deletar a imagem e pegar a mesa de luz Ling, então eu vou copiar e furar Então eu vou pular aqui. Novamente, lembre-se de que você precisa clicar duas vezes para entrar nos símbolos, que mencionamos na lição anterior. Clique duas vezes. Agora estamos lá dentro. Você pode ver que esta seção está destacada. Em seguida, quero remover esse botão e adicionar um link de lightbox Perfeito. Aí está. Então, agora adicionamos o link do lightbox a essa seção específica Agora, eu não quero que o link do lightbox fique embaixo. Eu quero que fique ao lado, ok? Então, vamos ver como podemos fazer isso. Então, eu simplesmente copiaria e colaria novamente. O botão está dentro do bloco d. Então, se eu pressionar colar aqui, aqui pressionar fazer, ele vai para o lado. Agora, quero fazer com que esse link do lightbox pareça um botão Então, como fazemos isso? Bem, uma maneira de você pensar que pode fazer isso é simplesmente adicionando um botão. No entanto, você não pode usar nenhum elemento que se vincule ou tenha um link associado ele no link do Lightbox, pois isso seria confuso para o computador e para o fluxo da web como plataforma Você está basicamente dizendo a eles que façam duas coisas muito diferentes com o mesmo elemento, o que simplesmente não vai funcionar. Portanto, não podemos adicionar um botão. Então, como podemos fazer isso? Bem, bem, se pensarmos link do Lightbox um pouco como o bloco de links, e se você realmente acompanhou a lição do bloco de links um pouco mais cedo neste curso, você saberá exatamente o que estamos prestes a fazer Então, o que podemos fazer é, embora não possamos colocar um botão lá, podemos colocar texto lá, então vamos adicionar algum texto, o que é ótimo. Agora, não se preocupe com o fato de isso estar sublinhado no momento Tudo isso vai mudar em pouco tempo. Assista às avaliações. Ok, tão perfeito. Então, temos o texto. Vamos descer até aqui, que atualmente está sublinhado Lembre-se da aula de tipografia. Se você ainda não verificou isso, confira agora. Removeremos isso e, em seguida, removeremos o link associado a. Então, para eliminar essa linha, o que vamos fazer é primeiro lugar, mudar a cor do texto E então o que vamos fazer é, na verdade, acessar o link do Lightbox e remover a linha abaixo, Agora temos o texto dentro do link do Lightbox para que, sempre que pressionado, um vídeo apareça Agora, como adicionamos o vídeo? Então, basta selecionar o link do Lightbox e acessar as configurações E o que você verá basicamente é algo chamado mídia dentro das configurações do link do Lightbox Agora, tudo o que você precisa fazer aqui é adicionar uma imagem ou um vídeo. Agora, ao adicionar o vídeo, basta enviar seu vídeo para o Vimeo e, em seguida, basicamente adicionar o link nesta seção específica, que mostrará o vídeo quando tudo aparecer Ou você pode simplesmente adicionar imagens. Agora, a imagem que está atualmente no lugar é esse pequeno espaço reservado, mas não queremos que isso aconteça Então, basicamente, vamos substituí-lo por esta foto desse bom cavalheiro aqui Então, agora, quando voltarmos. E, por exemplo, você também pode adicionar mais mídia. Então, podemos adicionar essa imagem. E então poderíamos adicionar outra imagem. Assim, você pode adicionar quantas imagens quiser. Agora, uma coisa a lembrar é que você não pode adicionar imagens e vídeos e também não pode adicionar dois vídeos. Ok, você teria que basicamente editar esses dois vídeos juntos para que fosse um único vídeo. Ok, então temos três imagens em jogo agora. Então, se clicarmos nisso, tudo isso deve estar configurado. Então, vamos para esta seção, clique aqui. E com certeza, aparecem três imagens. Agora, você pode usar essa função específica para muitas coisas diferentes, e é uma maneira muito simples limpa de esconder tudo. Agora, uma coisa que você poderia fazer, por exemplo, é se você quisesse que seu portfólio fosse, você sabe, um pouco mais limpo e não tão confuso, então o que você poderia fazer é finalmente adicionar um link de lightbox a esta seção na grade E então, dentro dessa imagem em particular, você poderia finalmente mudar essa imagem para aquele cara, novamente. E então, quando isso é realmente clicado, você pode ir para as configurações e adicionar esse cara E você pode realmente adicionar vídeos à mídia e imagens ao mesmo tempo. No entanto, eu não sugeriria isso simplesmente porque pode ser um pouco confuso para o usuário Mas podemos adicionar muitas imagens diferentes e, basicamente criar uma experiência muito mais limpa para o usuário. Então, por exemplo, vamos adicionar mais uma imagem aqui. Lá vamos nós. Agora, por exemplo, em vez de nosso portfólio virar, obviamente, podemos, você sabe, adicionar um pouco de margem abaixo, assim. Lá vamos nós. Agora, por exemplo, quando vamos ao nosso portfólio, em vez de ter todas as imagens que temos, poderíamos ter, você sabe, se tivéssemos mais imagens desse senhor em particular, poderíamos fazer com que, quando alguém clicasse nela, ela realmente mostrasse as outras imagens que são relevantes para aquela Então, todos esses podem ser projetos diferentes e, quando você clica neles, aparecem mais fotos, mais peças de fotografia, você sabe, mais peças de mídia, mais exemplos relacionados a esse projeto específico. Ok, então eu realmente espero que você tenha gostado desta lição rápida sobre como usar a função Lightbox, e espero vê-lo na próxima lição. Te vejo em breve. 49. Webflow 101: controles deslizantes: Ok, então como você pode usar controles deslizantes no fluxo da web para criar uma ótima experiência de usuário Bem, recentemente organizamos função de controle deslizante de ouvido para a marca de orelhas com a qual estávamos trabalhando, que, em última análise, mostra todos os diferentes depoimentos dessa qual estávamos trabalhando, que, em última análise, mostra todos os diferentes depoimentos a função de controle deslizante de ouvido para a marca de orelhas com a qual estávamos trabalhando, que, em última análise, mostra todos os diferentes depoimentos dessa empresa em particular. Então, como você realmente cria uma ótima função de controle deslizante em seu site Bem, na verdade é muito simples. Então, se você descer, adicionaremos outra pequena seção aqui, que chamaremos de seção deslizante Embora, na verdade, não queira ir aqui por algum motivo. Aí está. Finalmente chegamos lá. Então, agora temos a seção. Vamos adicionar um recipiente dentro. Vamos adicionar um pouco de preenchimento. Digamos que 100, 100 aqui, 30 de qualquer forma neste lado também. Lá vamos nós. Então, em relação à adição de um controle deslizante, simplesmente vamos aqui Vamos até a função deslizante, que está aqui. Colocamos isso no contêiner e, na verdade, o controle deslizante já está praticamente pronto Como podemos começar a editá-lo? Bem, a primeira coisa que você precisa fazer é editar seu controle deslizante agora Então, desça até aqui. Agora, existem várias opções diferentes aqui. Agora, o que eu gosto é que, em última análise, gosto organizar os slides da forma mais mínima possível. O que quero dizer com isso é que eu realmente não gosto que eles sejam numerados. Ninguém mais usa números nos slides. É muito antiquado. Isso parece muito mais limpo e parece muito melhor. Você também pode selecionar se é arredondado ou quadrado, para ver aqui como está mudando Vou mantê-los arredondados. Agora você também pode adicionar uma sombra, se quiser, que às vezes pode parecer bem legal, mas eu gosto de mantê-la bonita mas eu gosto de mantê-la bonita nítida, bonita e minimalista. Você também pode inverter a cor, para basicamente torná-las mais escuras. Obviamente, tudo depende do tipo de site que você tem. Mas em relação a esse caso em particular, vou mantê-los brancos e cinza só porque gosto do minimalismo Agora, você também pode aumentar o espaçamento entre os slides, se quiser algo um pouco mais moderno e futurista, então você pode adicioná-lo a Mas, para esse propósito, vou mantê-lo como cinco. Com relação à adição de slides, você pode adicionar slides com bastante facilidade. O que vou fazer é porque é muito difícil ver esses botões específicos em um slide, se, por exemplo, o slide for branco. Agora, geralmente o que eu gosto de fazer é pegar o slide Nav e colocá-lo fora do controle deslizante real Mas, neste caso, o fundo é branco, vou mantê-lo como está. Caso contrário, eu teria que basicamente mudar isso para ter uma sombra ou inverter cores, por exemplo, e isso me permitiria colocá-la fora da caixa Mas, neste caso, vou manter as coisas como estão. Então, agora, na verdade, temos o controle deslizante. Como podemos começar a usá-lo? Então, para adicionar um slide, tudo o que você precisa fazer é simplesmente adicionar o slide aqui. Então, agora temos três slides juntos. E a maneira de acessar esses slides é simplesmente pressionando esse botão nas configurações. Agora somos o slide dois, agora são os slides 3, agora é o slide um, então é tão fácil quanto isso. Então, como podemos realmente começar a editar esses slides? Bem, esse slide é essencialmente como um bloco dI. E o que quero dizer com um bloco dI é que você pode fazer praticamente o que quiser com ele. Então você poderia, você sabe, adicionar, por exemplo, uma grade. Ou você poderia fazer algo mais simples, na verdade. Você pode simplesmente adicionar uma imagem, por exemplo, que entrará. Escolha uma imagem. Vamos escolher o cisne Ok. Então, dentro disso, você poderia basicamente adicionar algum tipo de imagem. Escolha a imagem aqui, e vamos centralizá-la, se você for a imagem. Além disso, temos o cisne lá. Então você pode simplesmente adicionar uma imagem como essa se você realmente quiser, mas então você teria que basicamente ir para o slide dois. E no slide dois, você adicionaria outra imagem dentro. Novamente, basta selecionar a imagem que você acha que é melhor para você. E então você pode simplesmente colocá-lo como quiser. Aí está. Então, se realmente jogamos isso agora, você pode ver que está rolando por imagens diferentes Agora, você pode usar isso para, talvez, um portfólio, talvez para produtos ou o que for necessário para seu site específico. Mas adicionar um slide é muito, muito simples. E, finalmente, se você quiser fazer algo um pouco mais, eu não sei. Complexo. Então você poderia. Deixe-me tirar essa caixa de imagens daqui de dentro. Perfeito. Então, agora estamos de volta ao início. Agora, se você quiser criar algo parecido com a seção de depoimentos, que mostrei no início desta lição , poderíamos fazer isso um pouco assim Então, vou criar uma muito simples. Então isso é um diblock, mas podemos colocar um diblock dentro de um diblock Então, como podemos realmente fazer com o controle deslizante seja reproduzido automaticamente sozinho Portanto, não precisamos realmente usar essas setas, e isso acontece automaticamente para o usuário Bem, o que podemos fazer é ter a duração aqui, que é essencialmente de 5 segundos. Então, o que podemos fazer é reproduzir automaticamente os slides. Tempo e atraso. A menos que você queira um tempo e um atraso, sugiro colocar zero. Portanto, podemos excluir esses ícones, mas isso depende completamente de você, obviamente, do que você deseja. Você pode excluir essa seção específica aqui, basta clicar aqui. Você também pode clicar na seta para a esquerda e ocultá-la assim, para que fique muito mais limpo. E então, quando realmente jogamos, você pode ver aqui embaixo que os elementos mudarão sozinhos após cerca de 5 segundos. Aí está. Após 5 segundos, ele vai automaticamente para o próximo slide. Então, agora que está feito, podemos começar a adicionar avaliações. Então, como fazemos isso? Bem, no momento, o elemento real em si é cinza. Portanto, tem um fundo cinza. Agora, não queremos isso. Queremos que seja totalmente transparente. O que vamos fazer depois é porque não podemos realmente ver esses elementos abaixo agora, o que vamos fazer é fazer configurações, adicionar uma sombra e talvez inverter as cores, na verdade Lá vamos nós. Na verdade, parece muito melhor. Agora, o que vamos fazer agora é começar a adicionar as avaliações, para que possamos adicionar as avaliações simplesmente adicionando uma grade, que está aqui. Em seguida, excluiremos essa seção inferior porque não precisamos de muitas seções na parte inferior. Só queremos dois. E então, dentro de cada um deles, vamos adicionar um bloco div Então, vamos adicionar um bloco dI aqui. Vamos adicionar outro diblock aqui. Agora, um pequeno truque que vou mostrar é muito parecido com os truques que eu mostrei nas lições anteriores sobre copiar e perfurar blocos Você não precisa cavar blocos nessas duas seções Você precisa criar um diblock e, ao fazer isso , pode multiplicá-lo por todo o controle deslizante Então, por exemplo, aqui, vamos apenas adicionar um cabeçalho muito simples. Para o nome da pessoa, parágrafo abaixo. Vamos adicionar algum tipo de imagem, que precisará ir para outro bloco dI. Então, vamos adicionar outra imagem, que deve estar aqui. Lá vamos nós. Perfeito. Agora temos nosso cabeçalho, que é o nome da pessoa. Temos a avaliação deles. Saias. O curso Webflow não é Ruim mesmo. Consegui pagar meu leiteiro esta semana. Boas notícias Pronto, e então só precisamos verificar a ortografia Agora, para isso, o que podemos fazer é adicionar uma avaliação de cinco estrelas, por exemplo. Então, vamos ao Google, avaliações do Five Star, às imagens. E aqui, o que podemos ver são basicamente cinco estrelas. Agora, isso não parece muito bom. Na verdade, eu gosto deste um pouco mais. Este é um PNG, então vamos usar esse. Então, salve essa imagem. Em seguida, vamos salvar isso no desktop. Obviamente, você pode criar o seu próprio se realmente quiser , escolher a imagem, destacar. E então, isso deve fazer com que as cinco estrelas apareçam bem no localizador Agora você pode ver aqui, você não pode realmente vê-los. Agora, a razão é porque a imagem é muito grande. Então, o que podemos fazer é torná-lo menor, ótimo. Isso é bom. E então o que podemos fazer é porque basicamente essa imagem é um quadrado, qual eu realmente não gosto muito. O que eu acho que devemos fazer é, em vez disso, e você pode fazer isso um pouco mais profissionalmente, mas estou apenas mostrando que, rapidamente vamos me dar quatro estrelas Lá vamos nós. Em vez de usar essa versão quadrada grande, basicamente vou alterá-la com a captura de tela, que é basicamente apenas uma forma de adicionar um pouco melhor E como se você não soubesse, isso é agora. Talvez seja um pouco pequeno, só que um pouco maior. Aí está. Então, agora temos a análise. Agora, como podemos fazer com que pareça um pouco melhor? Bem, nós temos o diblock Acho que podemos dar um pouco de acolchoamento para que pareça um pouco mais forte quando partirmos E então o que também podemos fazer é curvar um pouco os cantos. Podemos adicionar um pouco de sombra, mover minha cabeça para fora do caminho. Lá fora. Então, agora eu tenho uma pequena sombra lá , por algum motivo, as sombras estão sendo cortadas na parte superior e inferior do controle deslizante E a razão para isso é porque basicamente se sobrepõe à função de slide real Então, o que precisamos fazer é adicionar um pouco de preenchimento na parte superior e nas laterais Eu quero apenas fazer 15 só para ser gentil e dar um bom número. 15, 15. E tudo o que está fazendo é dar espaço para a sombra real respirar, certo? Eu sei que essa é uma sombra muito simples. Vamos ver isso de David. Lá vamos nós. Então David Copperfield. Lá vamos nós. David C. Novamente, o que eu mencionei antes é que podemos simplesmente duplicá-los e criar quantos quisermos para ser completamente honestos Assim, podemos até mesmo duplicar o próprio slide se não quisermos refazer as coisas repetidamente. Então, isso é de Parla H. Diga literalmente a mesma coisa, porque obviamente o curso de webflow é fantástico, obviamente, embora ela não estivesse Vamos até aqui. Vamos para o próximo slide, e esse slide está em branco. Então, basicamente, precisamos reconstruir tudo do zero. Agora, eu realmente não quero fazer isso, certo? Então, vamos simplesmente deletar isso. Vamos até este slide, basta pressionar copiar e, em seguida, ir para mascarar e colar. Então, agora o que temos são várias avaliações, que podemos editar e alterar depois de criarmos a primeira caixa. Então, depois de projetarmos essa primeira caixa, literalmente não precisamos trabalhar mais. Tudo o que precisamos fazer é copiar e colar as outras avaliações, adicionar a classificação por estrelas relevante que recebemos por nossos produtos ou serviços, por exemplo, e você poderá gerenciá-las com muita facilidade. Se você tiver alguma dúvida em relação a esses elementos específicos, sei que é um dos elementos mais complicados do Webflow, mas, para ser honesto, é muito fácil e direto Então, se você precisar de algum suporte extra, entre em contato e me avise, mas isso deve ser praticamente tudo. Então, nos vemos na próxima lição. Veja isso. 50. Webflow 101: guias: Ok, então o que é uma guia e como você pode usá-la para criar belos recursos em seu site? Bem, na verdade, usamos a função de guias para fazer muitas coisas no site da minha agência de marca Então, por exemplo, organizaremos postagens do blog de uma forma muito simples e fácil de entender. E o mais importante, eu acho, é quando o usamos em nosso portfólio. Então, por exemplo, se alguém vier até nós e até a marca de fitness R A, por exemplo, eles podem finalmente vir e ver o tipo de trabalho que fazemos. Se eles estão procurando um nome de marca , eles podem ver todos os diferentes projetos de nomes de marcas em que trabalhamos Por outro lado, se eles são uma empresa de comércio eletrônico e fitness, por exemplo, e querem ver, ok, que tipo de serviços ou com que tipo de serviços ou empresas você trabalhou no espaço de comércio eletrônico, eles poderiam vir aqui, conferir o comércio eletrônico e conferir todas as marcas relacionadas ao comércio eletrônico com as quais trabalhamos ao longo dos marcas relacionadas ao comércio eletrônico anos E o que isso faz é simplesmente fornecer ao usuário uma maneira realmente simples e fácil encontrar as informações de que precisa, porque quando um cliente deseja contratar uma agência de marca, por exemplo, está procurando exemplos de trabalho relevantes para o que deseja alcançar para sua marca Então, é muito bom. Portanto, as guias são uma ótima maneira organizar as informações em seu site para permitir que você forneça ao usuário o que ele precisa de uma forma muito mais fácil e simples Ok. Então, agora estamos de volta ao nosso pequeno site de testes, que na verdade não nos importamos muito em quebrar porque estamos apenas brincando. Como você realmente usa as guias? Ok, então vamos adicionar uma seção aqui entre esses dois elementos. Se for me deixar. Sim, se na verdade não permitir que você adicione as seções ou adicione elementos em lugares específicos, copie e cole ou use essa barra de navegação aqui para mostrar exatamente onde você deseja, e então será um pouco menos No contêiner. Então, o que vamos fazer é adicionar um pouco de preenchimento, como de costume Então, talvez sim, 65 parece bom. E vamos colocar 40 de cada lado. Isso também parece bom. Perfeito. Ok, então agora temos isso pronto. Vamos até a função de guias aqui e colocá-la direto para dentro Agora, o que você pode ver aqui é que temos três guias diferentes E se realmente visualizarmos o site, você pode ver que cada uma dessas guias está ativa no momento, ok? Então, como começamos a usar essas guias para fazer algo útil com elas Bem, vamos fazer algo muito simples, em primeiro lugar Então, o que eu quero fazer é mostrar os diferentes tipos de imagens que tirei como fotógrafo Não sou um fotógrafo de verdade, mas estou usando isso como um exemplo em que você pode selecionar o tipo de imagem com base na guia selecionada. Então, por exemplo, vou colocar animais, pessoas, edifícios. Está bem? Então, eu sou fotógrafo e estou criando essa função de guia para mostrar para clientes em potencial Se eles querem alguém que possa tirar uma foto de uma pessoa, então quem eles querem. E se você quiser alguém que possa tirar fotos de edifícios, aqui estão alguns exemplos de edifícios dos quais eu tirei fotos. E, obviamente, animais, ou seja, um determinado animal B são fantásticos. Então, como podemos realmente começar a fazer isso parecer bom? E como começamos a adicionar partes do conteúdo aos painéis de guias Então, vamos nos aprofundar em primeiro lugar. Então, como podemos realmente começar a estilizar esse menu de guias? Então, como podemos fazer isso é simplesmente acessar o link da guia. Cor. E podemos colorir essa de verde. Por exemplo, vamos deixar esse texto em branco também. Então, o preto e o verde não estão realmente fazendo isso por mim. Oh, isso é um contraste extremamente baixo. Vamos tornar isso um pouco melhor. Um pouco melhor. Ok. Perfeito. Para as pessoas, vamos escolher novamente. Opte pelo branco. Mas desta vez, vamos escolher um bom vermelho. Isso combina com esses animais. Ok. Perfeito. Agora, essa não é, de longe, a paleta de cores com aparência mais estética, mas eu quero basicamente mostrar a você e manter as coisas bem simples e claras enquanto estamos desenvolvendo Ok. Aí está. Perfeito. Vamos adicionar isso a isso. Você. Perfeito. Ok, agora precisamos começar a realmente adicionar essas imagens aqui, então o que podemos fazer é adicionar um bloco dif No pino da aba. Agora, um painel de abas é essencialmente apenas um bloco dI dentro da função de abas, então tenha isso em mente, pois isso vai manter as coisas super simples para você Agora, se realmente selecionarmos um diblock, podemos começar a adicionar a imagem ou imagens do pato real que temos ou Lá vamos nós. Perfeito. E então, se vamos até as pessoas, por que isso não está mudando? Hm. Interessante Bem, o que precisamos fazer é simplesmente ir ao menu Tabs e clicar em configurações E quando vamos às configurações, você pode ver esse pequeno recurso aqui. E quando clicamos na guia dois, isso significa que a guia dois está selecionada, possamos começar a adicionar novamente nosso diblock Adicione nossa imagem e, em seguida, podemos adicionar a foto de uma pessoa. Isso é uma pessoa? Perfeito. E então simplesmente fazemos exatamente o mesmo para a seção de construção, adicione Dave Block E quando você começar a usar esses elementos, ficará muito mais fácil criar sites. Tudo vem com a prática. Na verdade, lembro da primeira vez que comecei a criar sites e basicamente tive aprender webflow em uma semana, que, você sabe, foi definitivamente, você sabe, uma alta pressão para o projeto em que eu estava trabalhando, porque o cliente realmente queria usar o web flow Mas depois de uma semana realmente focando em aprender os fundamentos, você realmente se acostuma com isso super rápido Agora, uma coisa que tenho certeza que você percebeu é que, basicamente, dependendo de qual deles está selecionado, ele altera os botões reais na parte superior. Agora, obviamente, não queremos que isso aconteça. Então, o que eu vou fazer é o estilo Tab one. Então, quando está realmente selecionado, ele tem corrente anexada a ele. Agora, o que vamos fazer é, vamos até a aba dois. Nós vamos fazer isso com isso. Lá vamos nós. Você pode ser super criativo com, você sabe, como eles são organizados e, você sabe, você pode fazê-los aparecer com cores diferentes, por exemplo. Mas, em última análise, o que você está tentando fazer, se quiser apenas garantir que seja consistente em toda a função de guia Então, o próximo que faremos é p, desça aqui e podemos ir para esta seção. Lá vamos nós. Portanto, isso precisa ser atualizado. Lá vamos nós. E então tudo o que precisamos fazer é o último, que é a aba três. Então, por algum motivo, este está selecionado, então vai nos dar um pouco de sle, mas vamos passar para esta seção aqui Lá vamos nós. Então, agora, quando realmente jogamos, ao selecionar as diferentes opções, você pode mostrar certas imagens que são relevantes para nossa guia específica que configuramos E você pode usar isso para praticamente tudo. Você pode usar isso para mostrar projetos. Você pode escolher isso para vitrines e produtos diferentes. Você pode até mesmo usar isso para mostrar pacotes diferentes, certo? Você pode comprar um pacote principal, um pacote profissional e um pacote plus. Tudo isso inclui coisas diferentes e, quando você seleciona esse pacote, ele pode mostrar os diferentes tipos de pacotes e o que está incluído nesse E quando você fica um pouco mais avançado, pode até começar a fazer coisas como as que fizemos para esse cliente aqui, onde basicamente eles têm os diferentes pacotes em uma opção de pagamento único e depois em uma opção financeira. Isso é literalmente a mesma coisa que acabamos de fazer no site do Teste. A única diferença está dentro do bloco DIV, da aba. Basicamente, acabamos de mudar isso para adicionar mais informações. Então, não estamos apenas adicionando uma imagem, mas estamos adicionando todas essas informações aqui, o que obviamente é, você sabe, o limite máximo de quão complexa a guia deveria ser ou poderia ser. Mas estou apenas mostrando o potencial real de usar as guias da maneira certa, porque é muito simples e fácil para a pessoa navegar entre pagamentos únicos e opções financeiras É uma ferramenta muito boa para ter em seu kit de ferramentas. De qualquer forma, eu realmente espero que você tenha achado que é menos valioso. Espero que você use guias em seu site porque elas são muito úteis se você souber usá-las corretamente. Então, estou ansioso para ver você na próxima lição. Te vejo em breve. 51. Webflow 101: adicionando butiques de mídia social: Ok, então como você pode adicionar ícones de mídia social realmente bonitos em seu site de fluxo na web? Bem, na verdade é super simples. Então, se formos ao nosso site, qual estamos apenas com o qual estamos apenas brincando, obviamente, ao longo deste curso, agora podemos adicionar esses botões com muita facilidade Então, como sempre, vamos adicionar uma seção. Se isso me deixar. Perfeito. Agora, vamos adicioná-los no centro apenas para mostrar como adicioná-los e como fazer isso uma forma muito simples, então adicionaremos um contêiner. Como de costume, não adicionaremos nenhum padrão neste momento porque ele não é realmente útil para nós. E então, dentro desse contêiner, adicionaremos um bloco dif Lembre-se de que a seção é o terreno em que a casa fica, o contêiner é a casa e o dibloco é o cômodo Então lembre-se de que quando você estiver criando seu site, você será um k. Agora temos o bloco di. Agora, tudo o que precisamos fazer é adicionar, por exemplo, não sei, Facebook, Instagram e Twitter ou X, por exemplo. Vamos falar sobre isso. Então, também podemos usar mais um pequeno elemento de grade. OK. E então o que podemos fazer é realmente usar o bloco dF para torná-los mais centrais Então, vamos reuni-los. Portanto, a grade é mais central. E então tudo o que precisamos fazer é adicionar blocos dI dentro de cada uma dessas seções da grade. Ok, então temos a estrutura configurada agora, então podemos simplesmente adicionar nossos elementos. Agora, como adicionamos nossos elementos? Bem, há algumas maneiras de fazer isso. E, para ser honesto, você nem precisa adicionar esses blocos de dados. Você poderia simplesmente usar o bloco de links real diretamente, mas eu pessoalmente gosto adicionar blocos dI só porque isso me dá um pouco mais de estrutura quando estou construindo meu site. Então eu posso simplesmente colocar blocos de links dentro. Agora, você realmente não precisa adicionar esses blocos dI. Isso é exatamente o que eu gosto de fazer porque me dá um pouco mais de estrutura com o site. Mas depois de ter os blocos dI, tudo o que você precisa fazer é colocar os blocos de link dentro. Como você pode ver, na verdade está empurrando-os para fora, então vou apenas copiar e furar em cada um Então, agora nosso bloco de links está dentro cada bloco dI dentro da grade de três seções. Agora, como começamos com nossos ícones? Bem, se quisermos que eles tenham essa aparência , podemos finalmente fazer algo neste site. Então, onde podemos realmente obter os ícones do site? Bem, há algumas maneiras diferentes de fazer isso. Então, por exemplo, se quisermos que eles se iluminem assim, para que pareçam muito legais, podemos ir ao Google digitar ícones gratuitos. Você pode colocar um espaço ou, se for preguiçoso como eu, não precisa colocar um espaço Acesse este site, que é flacon.com, e então vamos colocar ícones de mídia social O que você deve ter são essencialmente todas essas opções diferentes de ícones para mídias sociais, então queremos Facebook, Instagram e vamos fazer o TikTok, só porque Então, vamos baixá-lo, PNG, download gratuito. Perfeito. Então, agora temos todos os ícones de que precisamos. Agora, para mim, pessoalmente, vou precisar obtê-los e adicioná-los ao meu desktop, só porque é assim que meu adorável computador funciona. Por algum motivo, esse não está funcionando. Agora, uma coisa a lembrar, quando você está realmente selecionando os ícones para o seu site é garantir que eles sejam todos consistentes, porque se não forem consistentes, digamos, por exemplo, se você tivesse duas circulares e uma quadrada, não ficaria muito bem. Se você olhar o site da Nike, eles são todos muito parecidos e estão todos no mesmo círculo de tamanho exato Então, quando realmente os adicionamos ao site, e vamos adicioná-los ao site agora, adicione a imagem dentro e escolha carregar. Vamos escolher o Instagram e o TikTok. Em seguida, adicionaremos tudo isso à nossa barra de ativos. Em primeiro lugar, há o Facebook. Então, podemos simplesmente copiar e colar isso dentro, e depois mudar as imagens do Instagram, e esta, mudar para TikTok Estamos indo perfeitamente. Você pode ver que eles são todos do mesmo tamanho. Agora, obviamente, são muito grandes. Então, como podemos torná-los menores? Bem, simplesmente os adicionamos. E você pode ver aqui que temos 75 75, então basicamente poderemos adicionar isso aqui, 75, para que todos tenham exatamente o mesmo tamanho. E então você vai, você tem seus ícones lá. Então, como você pode realmente começar a vinculá-los às suas contas de mídia social? Bem, é muito fácil. Basta acessar seu bloco de links. Clique no ícone do Little cog. E aqui, basta colocar o URL na sua plataforma de mídia social. Então, por exemplo, vou ao Instagram, vou ao meu perfil, clico no link Little e adicionarei isso. Com certeza, se eu entrar e clicar nesse link, ele me levará à minha página do Instagram. Agora, isso parece muito bom, mas não parece tão bom quanto a versão da Nike Agora, obviamente, você pode fazer isso branco ou cinza ou como quiser. Mas como você consegue esse pequeno efeito de foco que, quando um é destacado, ele meio que salta Bem, na verdade, é muito simples, e abordamos exatamente esse mesmo método nas lições anteriores, se você ainda não o aprendeu. Então, como podemos fazer isso? Bem, a melhor coisa a fazer é ir até o bloco DIFF, descer até a opacidade, aqui mesmo, e digitar algo Então, isso nos dá uma aparência agradável e mais verde. Então, vamos fazer esse também. Bloco de diferença, 50%. E por último, mas não menos importante, o TikTok, 50%. OK. Então, agora, se jogarmos e o mouse sobre ele, ele ainda não acenderá Então, como podemos fazer com que ele acenda? Realmente simples? Vá para o bloco div, passe o mouse , desça até o pacity e aumente o volume. Aceleração total Faça o mesmo aqui. Passe o mouse. Vá para a capacidade, 100%. Incrível. Estamos fazendo muito progresso. Passe o mouse, 50%, e então vamos. Eles estão todos se conectando bem. Agora, obviamente, se você assistiu a alguma das aulas anteriores deste curso, o que deveria ter assistido. Você saberá que, se adicionar uma pequena transição, ela ficará 1 milhão de vezes melhor. Agora, apenas um pequeno experimento, vamos dar uma olhada nos três níveis diferentes de transição que você pode fazer em relação à velocidade ou suavidade. Então isso é como, você sabe, 950 é muito, muito, muito alto. Mas veja esses. Portanto, o TikTok literalmente não tem configuração de capacidade de transição, então ele literalmente deveria desaparecer Preto, cinza. Cinza preto, muito, muito nítido. Preto, cinza. Preto, cinza, preto, cinza. O Facebook, no entanto, tem 500 definidos como a suavidade de capacidade quando você está tentando alterá-la Então, parece muito bom, certo? Suave. Agora, o Instagram tem 950, eu acho, então isso vai ser extremamente lento, mas ainda parece muito, muito bom Então, esse é um pouco mais rápido. Esse é um pouco mais lento. Agora, você pode escolher o que você mais gosta pessoalmente. Isso realmente não importa. Não há resposta certa ou errada. Tudo se resume à preferência pessoal. Tudo que eu posso ver é que eu sei disso, você sabe, só de olhar. Pode ser o exemplo. Olha aqui. Também é extremamente suave. Então, isso é cerca de 500, eu acho, ou talvez 400. Portanto, está muito mais próximo das configurações do Facebook que temos no momento. O do Instagram é um pouco mais lento. É como o dobro da velocidade ou da suavidade. Então, vai ser um pouco lento, mas parece muito mais suave Então, tudo depende da preferência pessoal. Selecione o que você achar melhor para você. Então, isso praticamente limita a adição de botões de mídia social à aula do seu site. Então, espero que tenham gostado e espero ver você na próxima. Te vejo. 52. Webflow 101: cursos: Ok, então o que são aulas? Bem, as aulas são uma ferramenta muito útil no fluxo da web para ajudar a tornar sua vida muito mais fácil. Então, deixe-me mostrar como eles funcionam. Agora, se adicionarmos um contêiner aqui e depois adicionarmos alguns botões, o que você verá é todos esses botões são iguais. E vamos espalhá-los um pouco só para dar a eles um pouco de espaço, e aí está. Portanto, cada um desses botões, no momento, não tem classes atribuídas a eles. Como podemos mudar isso? Vamos começar a criar esse botão específico. Então, vamos digitar bilhete dourado. Neste, vamos digitar Golden Dog. E neste, vamos digitar Golden cat. tenho absolutamente nenhuma ideia de por que estou usando essas palavras, mas tenha paciência comigo. Isso não é importante. Mas a próxima coisa que estou prestes a compartilhar com você é muito importante. Então, se editarmos esse botão específico e o tornarmos dourado, por exemplo, você basicamente verá que ele não afeta de forma alguma a forma ou forma os outros elementos dessa seção. Portanto, embora o botão dourado do bilhete seja dourado, Golden Dog e golden Cat não são. Então, como podemos mudar isso? O que podemos fazer é pegar o botão e adicionar uma classe a ele. No momento, essa edição é classificada como botão cinco. O que vamos fazer é renomear essa classe Então, vamos colocar o botão dourado. Agora, no momento, esse botão é chamado de botão dourado, mas este é apenas um botão frio e não tem nada ligado a ele. Então, como podemos fazer esse botão dourado como este? Bem, existem duas maneiras. Uma é copiar e colar esse código e adicioná-lo. No entanto, isso é um pouco longo demais para mim. Então, vamos fazer isso da maneira mais inteligente. Entramos na aula e pegamos a classe existente que está anexada a esse botão e a aplicamos a esse botão, assim. E você pode fazer isso com qualquer elemento que desejar, incluindo a seção. Então, por exemplo, para essa seção específica, ela atualmente está conectada ao preenchimento, e essa é a classe que tem essas características atribuídas a ela Mas e se adicionarmos ouro? O fundo fica dourado? Então, basicamente, o que você pode fazer é usar as aulas para tornar sua vida muito mais fácil. Se você quiser que todos os seus botões sejam exatamente iguais. Então, por exemplo, se agora começarmos a editar o preenchimento, nesse botão específico Isso também afetará todos os outros botões dessa classe específica. Mas digamos, por exemplo, se não quisermos editar cada botão para que seja exatamente o mesmo. Agora, eu não sei por que você não faria isso, mas digamos, por exemplo, se tivéssemos outra seção abaixo, e os botões aqui fossem um pouco diferentes. Então, vamos adicionar uma cor de fundo como essa e vamos adicionar branco. Agora, essas seções ainda estão conectadas por meio da classe da seção cinco. Mas esse no topo tem uma classe diferente, que é branca. Este não tem essa classe adicional. Então, se mudarmos o fundo dessa classe específica para branco, ele ficará branco e permanecerá lá sem afetar essa classe em particular. Então, em última análise, se você adicionar uma classe adicional, tudo o que você adicionar e alterar nessa classe específica, isso substituirá o que é feito na classe padrão Agora, digamos, por exemplo, se mudarmos isso para ouro. Então, se esse é um fundo dourado, você mal consegue ver os botões. Agora, se mudarmos esses botões, para preto, por exemplo, isso mudará todos os botões que têm essa classe anexada a ele. Então, como podemos mudar isso? Bem, poderíamos, por exemplo, criar um botão completamente novo. Eu gosto desse botão. Gosto do fato de ter um bom tamanho, o preenchimento ser bom, o texto Então, como podemos simplesmente mudar a cor do fundo sem bagunçar completamente o resto dos botões que são ótimos em um fundo branco Bem, na verdade é muito fácil. Então, simplesmente adicionaríamos classe adicional para sobrescrever o botão dourado Basicamente, essa classe aqui ainda está muito ativa, mas ela sobrescreve essa classe Então, o que faríamos é simplesmente adicionar preto aqui e mudar isso para preto. E, como você pode ver aqui, essa classe específica agora está substituindo a classe anterior E você pode usar isso para qualquer elemento no Webflow. Você pode usá-lo como ícones para obter a mesma alimentação em todas as classes. Você pode usá-lo para avaliações. Você pode usá-lo como texto para que todos os títulos tenham exatamente o mesmo tamanho Você pode usá-lo em qualquer lugar. Então, espero que você ache essa picada útil, e estou ansioso para ver você com a próxima Te vejo. 53. Webflow 101: fundos: Então, planos de fundo. O que são e por que são importantes? E como você pode realmente mudá-los? Na verdade, é muito simples. Agora, há duas maneiras diferentes de usar planos de fundo. Agora, a primeira maneira é mudar o plano de fundo de uma seção específica. Então, obviamente, podemos selecionar esta seção, ir até os planos de fundo, então podemos basicamente mudar a cor ou podemos fazer várias outras coisas, para que possamos realmente adicionar uma imagem como plano de fundo, assim, ou podemos potencialmente adicionar um gradiente, que é feito assim Ou podemos adicionar um gradiente circular, que é basicamente o mesmo que a opção de gradiente, mas obviamente fornece a cor mais escura ou a cor alternativa na parte Ou, por último, você pode simplesmente adicionar uma cor normal. Agora, a razão pela qual você pode adicionar essas coisas diferentes é porque você pode realmente adicioná-las umas sobre as outras. Então, por exemplo, atualmente temos isso como plano de fundo, mas também podemos adicionar gradação auditiva como plano de fundo Então, vamos mudar isso um pouco mais sombrio. E então poderíamos finalmente mudar o pedido. Então, basicamente, o elemento que está no topo será o mais proeminente na página. E poderíamos adicionar isso e basicamente configurá-lo para 100%, e você não veria nada, ou quanto menos opacidade ela tivesse, mais facilmente você poderia ver o elemento por trás dela Agora, isso pode ser usado de várias maneiras diferentes. Então, o que eu gosto de fazer é que, se eu tivesse uma seção de sobreposição, eu adicionaria algo como uma imagem, que você pode fazer aqui, e podemos adicionar essa imagem aqui, o que não parece muito ruim Agora, esta seção aqui é essencialmente o motivo pelo qual você deseja que ela seja posicionada. Então, se você quiser que ele seja posicionado mais alto, você basicamente selecionaria essa opção, se quiser mais baixo, aqui, à esquerda, aqui, à direita aqui e depois no centro ali Agora, o que você pode fazer é selecionar também conter capa ou personalizar. Personalizado significa que você realmente precisa, você sabe, selecionar manualmente o quão alto é, quão pequeno é e todas essas coisas. Costumo usar currículos, isso torna as coisas muito fáceis E então você pode selecionar a posição desejada. E esse realmente parece muito bom. Agora, por exemplo, o que vou fazer aqui para mostrar a vocês é que usaremos a opção de contenção, que basicamente garante que a imagem completa seja usada como plano de fundo quantas vezes forem necessárias para realmente preencher o espaço. Agora, o que você pode fazer aqui é porque isso parece um pouco estranho, você pode adicionar essa sobreposição acima da imagem, apenas fazer com que esta seção se destaque mais, o que, em última análise, como você pode ver, ajuda o elemento a se destacar um pouco mais e a se tornar mais Outra coisa que você pode fazer em relação à sua seção é excluir todas elas daqui e fazer com que elas concordem como antes. Então, outra coisa que você pode fazer é realmente mudar o plano de fundo do corpo inteiro. Então, por exemplo, se você quisesse mudar isso para ficar completamente vermelho, você poderia fazer isso. Agora, eu não sei por que você faria isso, e seria muito estranho você fazer isso Então, vamos mudar isso de volta, porque acho que o fato de tudo isso ser vermelho está me causando ansiedade. Então, vamos voltar atrás. Para branco. Agora, na verdade, você não precisa colocar nada como cor de fundo do seu corpo, mas também pode adicionar imagens. Então, por exemplo, se quisermos adicionar isso como imagem geral, isso não parece muito bom e, na verdade, é extremamente confuso, mas você pode realmente fazer isso dessa maneira Você pode usá-lo. E esse é apenas o poder do fluxo na web. Isso ajuda você a criar designs realmente criativos com muita facilidade, sem o estresse e a codificação. Ajuda você a fazer tudo de forma super fácil. Agora, em última análise, é assim que você pode usar planos de fundo. É muito simples, muito fácil e você pode ser muito criativo com o tipo de plano de fundo que usa Por exemplo, se acessarmos site clementinhous.com da minha agência de marca, você pode ver esses círculos que têm uma sombra por trás deles, o que é super sutil, mas fica muito bom no site e é um pequeno recurso muito bom para destacar um pouco o fundo Também usei uma abordagem muito semelhante para este site para um cliente, onde basicamente somos esses pequenos padrões, pequenos círculos e Xs, só para que não seja muito chato e mundano Portanto, fique à vontade para deixar sua imaginação correr solta e, obviamente, não considere o fundo apenas branco, você pode adicionar pequenos elementos para torná-lo mais interessante. De qualquer forma, espero que você ache esta lição útil e espero vê-lo na próxima. Te vejo em breve. 54. Webflow 101: configurações de exibição e resposta: Ok, então exiba as configurações e torne seu site responsivo em todos os dispositivos. Como podemos fazer isso? Bem, na verdade, é muito simples e direto, e suas configurações de exibição podem ser vistas aqui na parte superior da tela Então, atualmente, temos quatro pontos de interrupção diferentes em jogo. Temos seu ponto de interrupção básico, temos seu tablet, temos o celular com paisagem e temos o celular com retrato Agora podemos adicionar três outros pontos de interrupção, sendo um deles o de 12 80 pixels, que é bom para seu Macbook Air e outros dispositivos Apple, e você também pode adicionar seu ponto de interrupção de 14 40 pixels e, por último, seu ponto de interrupção e, por último, seu Agora, por que é importante ter todos esses pontos de interrupção diferentes Bem, a razão pela qual isso é importante é ajudar seu site a ser responsivo em todos os dispositivos E eu vou te mostrar como fazer isso agora. Se você estiver realmente visualizando o site como ele está, pode ver que ele funciona bem em tablets, paisagens, retratos e também em todos os outros pontos de interrupção. Agora, se realmente começarmos a mudar o tamanho do site, você pode ver que ele muda de forma bastante significativa. Agora, se você voltar ao nosso site de teste e tentar brincar com essa seção específica, que criamos anteriormente no curso , podemos ver aqui que ela atualmente responde em 1920 pixels ou mais, mas infelizmente parece muito diferente quando começamos a descer para a seção móvel e até mesmo para o ponto base Então, como podemos mudar isso? Bem, o que precisamos fazer é essencialmente começar a reconstruí-lo como ponto base Agora, o ponto de ruptura básico em última análise, dita tudo o que acontece subindo e tudo o que acontece descendo. Então, vamos reconstruir essa seção específica no ponto base e, basicamente, começar a entender como a natureza responsiva do fluxo da web Então, vamos começar a criar uma nova seção, ou podemos criar exatamente o mesmo preenchimento Vamos fazer um pouco de acolchoamento na lateral. Isso é adicionar um contêiner. Perfeito. Lá vamos nós. E então podemos começar a adicionar essencialmente. E lembre-se de que, na verdade, estamos construindo sobre o ponto de interrupção principal, o ponto de interrupção principal, o ponto de interrupção básico Não estamos desenvolvendo esta seção, que não afetará nenhum dos elementos. Porque quando você constrói o ponto de interrupção básico , está afetando tudo o que vai para o celular e tudo o que vai para uma tela maior Já quando você edita algo no ponto de interrupção mais alto e também no ponto de interrupção do retrato móvel, você não está editando mais nada Portanto, lembre-se de que o ponto de interrupção básico desce em cascata e também sobe. Mas quando você está editando no final dos pontos de interrupção, não está Isso também se aplica se você estiver editando o ponto de interrupção da paisagem Se você editar aqui, isso também afetará esse ponto de interrupção aqui, se você editar no ponto de interrupção do tablet, isso também afetará esses dois Isso também acontece de outra forma. Então, por exemplo, se eu editar esse ponto de interrupção, isso afetará esse ponto de interrupção nesse ponto No entanto, se eu adicionar esse ponto de interrupção , ele não editará este, mas será editado à esquerda Portanto, lembre-se disso, pois será muito importante quando começarmos a entender como tornar seu site responsivo, e compartilharei com você nesta mesma lição o processo que uso para garantir que todo o meu site seja responsivo o tempo todo Você está sempre projetando com base nos pontos de interrupção básicos. Então, por favor, lembre-se disso. Agora, se estamos reconstruindo isso na seção básica de pontos de interrupção , o que podemos fazer é dividir esse herói Podemos adicionar um diblock a esse contêiner. Podemos adicionar uma grade. Não precisamos de dois. Só precisamos de um, para que possamos fazer isso. Então podemos pegar isso e adicionar um bloco dif à grade À esquerda, aqui, o que parece bom até agora. Então, podemos simplesmente adicionar outro bloco di ao outro lado e depois voltar. Um vídeo do YouTube aqui, e aí está. Agora, neste momento, isso parece extremamente complicado. Então, por que isso? Bem, isso ocorre porque a largura máxima desse elemento em particular está atualmente em 46% Não queremos essa largura máxima. Por exemplo, se eu começar a aumentar isso , ele começará a se esgotar. Então, se eu simplesmente mudar isso para nenhum, basicamente preencherá toda a seção Mas queremos um pouco de padrão lá apenas para garantir que ele não fique muito perto da imagem. Então, estou muito feliz com isso. Agora, você pode ver que, como duplicamos tudo no ponto de interrupção básico, ele só é ativado no último ponto de interrupção do sistema e na natureza responsiva do fluxo da web Então, basicamente, o que precisamos fazer é começar a projetá-lo aqui. Está bem? Então, se pegarmos isso, por exemplo, podemos começar a ver como isso se parece. Então, estou feliz com a aparência disso. Estou feliz com a aparência disso no momento. Mas o que podemos fazer é começar a mudar esse botão em particular. Então, mudamos isso. Podemos nos livrar disso sem querer. Na verdade, não precisamos disso agora. Então, mudamos isso. Mudamos a cor para dourado. Também podemos alterar o preenchimento para torná-lo um pouco mais bonito Novamente, basta pressionar a opção para ter certeza de que estou alterando as duas ao mesmo tempo. Também podemos adicionar um pouco de espaço para respirar e, em seguida, podemos começar a editar. O elemento lightbox, que é simplesmente mudar isso, mudar a cor Lá vamos nós. Então, quando estivermos satisfeitos com a aparência de uma seção. Podemos então começar a ver como fica em outros dispositivos. Então, deixe-me adicionar um fundo colorido aqui para que saibamos exatamente o que estamos fazendo. E vamos realmente mudar isso para uma bela cor roxa. Só para se adequar. Lá vamos nós. Perfeito. Na verdade, eu sei um pouco mais de azul. Perfeito. Então, agora temos essa seção. Então, vamos verificar em cada ponto de interrupção para ver como fica em uma tela um pouco maior. Isso ainda parece bom. Estou feliz com isso. Em uma tela ainda maior, ainda parece bom. Estou feliz com isso. Chegamos aqui, e isso fica bem nesta seção dois. Então, agora vamos ao tablet. OK. É aqui que as coisas ficam um pouco complicadas. Então, no momento, isso é obviamente um pouco confuso, certo Realmente não parece muito bom, então o que podemos fazer? Bem, podemos fazer isso um pouco menor. Agora, lembre-se de que, quando estou editando aqui, isso não afeta nada que esteja acontecendo. Isso só afeta a queda. Novamente, se você for aqui, ainda é 38. Eu estava aqui, agora são 30. Agora, como eu disse, isso também afetará a queda. Então, se eu editar aqui, isso também afetará as duas opções móveis. Então, se eu editá-lo no tablet, isso também afetará as duas configurações do celular. Então, vou editar isso para que pareça um pouco menor e, em seguida, vou reduzir o tamanho. Eu acho que se eu vou colocá-los lado a lado um com o outro, eu preciso fazer isso muito menor, então vamos reduzir isso para dez. Na verdade, isso realmente não parece muito bom. Talvez eu devesse manter isso assim e colocar assim. E então eu posso simplesmente reduzir isso, fazer com que pareça um pouco menor. E aqui, eu posso centralizar isso, para que pareça mais centralizado e torná-lo um pouco menor E isso deveria. Isso parece muito melhor, ok? Vamos reduzir isso um pouco. Lá vamos nós. Isso parece muito melhor. Isso está muito mais alinhado Agora, precisamos dar uma olhada e usar um tablet, então vamos ver como fica na paisagem. Então é aqui que as coisas começam a ficar muito, muito apertadas, Portanto, não temos muito espaço. E se você pensar bem, quando estiver realmente segurando seu telefone celular, ele ficará muito ruim e você provavelmente não conseguirá ver todos os elementos. Então, como podemos mudar isso? Bem, podemos ir para a grade, podemos editar a grade, e não está realmente funcionando dessa maneira, então vamos tentar adicionar uma seção abaixo e fazer isso um pouco assim. Então, na verdade, parece muito melhor. Agora, isso tem um pequeno elemento aqui embaixo, então talvez vamos reduzir a grade para tornar a linha menor e aproximá-las. E isso parece dez vezes melhor. Isso parece 100 vezes melhor. E podemos, mesmo que quiséssemos, se quiséssemos aproximá-lo, puxá-lo um pouco para cima, o que fará com que pareça ainda mais compacto. Mas não precisamos fazer isso. Você pode simplesmente mantê-lo como está. Mas, como você pode ver, como eu editei aqui no ponto de interrupção do cenário móvel, isso não afeta nada subindo. Ainda é o mesmo. Portanto, é responsivo em todos os dispositivos, desde que esteja caindo ou subindo do ponto de interrupção principal Então, aqui, temos uma aparência muito boa aqui. Então, vamos ver agora como fica no retrato móvel. E lembre-se de que, se eu editá-lo aqui, ele se transformará em um retrato móvel Então, já parece bom. Já parece que está muito bem apresentado. Em última análise, é assim que você precisa encarar o design de sites responsivos Em primeiro lugar, você o constrói no ponto de interrupção principal, no ponto de interrupção básico e, em seguida , edita para baixo e depois edita para garantir que cada seção seja perfeita, não importa em qual dispositivo você a esteja vendo Então, espero que você ache esta lição útil. Se você tiver alguma dúvida, por favor me avise. Estou aqui para apoiá-lo da maneira que puder, mas espero vê-lo na próxima lição. Nos vemos lá. 55. Webflow 101: otimização de imagem e carga lenta: Ok, então, em relação à otimização de imagens e ao carregamento lento, isso é o que você precisa saber, e é muito simples Então, por exemplo, se você tem uma imagem que está na sua página inicial real na seção de heróis e precisa que ela carregue mais rápido do que qualquer outro elemento em seu site. Em última análise, você precisa garantir que essa imagem específica seja priorizada pois quando alguém visualiza seu site, você não quer esperar que essa imagem seja carregada Porque se você tem um site que está visitando e, em última análise, a imagem não carrega até 3 segundos depois, isso não vai ficar bem em relação ao design do seu site. Isso refletirá muito mal o seu negócio porque se você não consegue ter um site funcionando corretamente , como você deve atender seus clientes adequadamente? Então, como podemos mudar isso? E como podemos priorizar as imagens que são carregadas em nosso site Então, eles carregam o mais rápido possível? Bem, na verdade, existem algumas maneiras de fazer isso. Portanto, a primeira maneira é selecionar a imagem em si. E pressione essa pequena engrenagem, que acabará exibindo algo muito semelhante ao que está nesta seção aqui, as configurações da imagem Depois de clicar na pequena engrenagem e ter acesso às configurações, há algumas opções em relação ao carregamento, que você pode ver Agora, o primeiro é o carregamento lento. O carregamento lento basicamente significa que ele carrega na ordem em que a página está configurada Portanto, não vai priorizar nada. Agora, a próxima opção é carga rápida. Isso significa que ele carrega com a página. Então, basicamente, ele será carregado o mais rápido possível e será definido como uma prioridade. E então temos o automóvel. Então, isso significa essencialmente que tudo o que o navegador considera ser a prioridade mais alta, isso será carregado primeiro, o que, obviamente, não queremos fazer porque navegadores diferentes podem ter prioridades diferentes, então vamos selecionar Eagle load Agora, isso garantirá que, quando alguém basicamente visite nosso site. Essa imagem é enviada para a frente da fila. Ele é carregado primeiro, que é o que queremos. Então, isso vai ser muito importante para vários elementos diferentes. Então, por exemplo, você realmente quer fazer isso também para o seu logotipo. Você não quer que seu logotipo acabe sendo carregado depois de todo o resto do site. Então, você quer ter certeza de que , de forma assertiva, e isso é dizer ao site, escute, eu preciso carregar primeiro porque sou muito importante, e isso é, em última análise, o que as pessoas verão assim que acessarem seu site Certifique-se de priorizar suas imagens, especialmente as imagens na seção de heróis, sobre a qual aprenderemos um pouco mais à medida que analisarmos o resto das lições dessa fase específica E todas as imagens que você pessoalmente considere prioritárias para seu site específico , sua empresa ou marca Certifique-se de priorizá-las com Eagle Load, pois isso as carregará primeiro e proporcionará ao usuário a melhor experiência possível em seu a melhor experiência possível em De qualquer forma, eu realmente espero que essa lição tenha sido valiosa. Sei que foi curto e agradável, mas só queria ter certeza de que você entendeu a diferença entre as duas configurações de carregamento para garantir que seu site seja o melhor possível. Te vejo na próxima aula. 56. Webflow 101: posicionamento: Nesta lição, vamos nos concentrar no posicionamento. Atualmente, temos estático, relativo, absoluto, fixo e fixo. O que eles significam e como você pode usá-los? Vamos começar com estática. A estática é essencialmente a opção padrão nos fluxos da web. Se você adicionar qualquer novo elemento, imagem, texto ou qualquer outra coisa , a posição estática será atribuída automaticamente. Agora, e se mudarmos esses dois relativos? O que significa mesmo relativo? Bem, o relativo é na verdade muito semelhante ao estático, mas oferece mais opções de posicionamento. Agora, se escolhermos relativo , isso nos permitirá alterar a posição real do elemento em relação a si mesmo. Agora, uma coisa a se pensar é no seu índice Z, mas abordaremos isso um pouco mais tarde. Agora, a próxima opção é absoluta. Quando você seleciona absoluto, você pode ver aqui, e ele realmente o descreve aqui no próprio site, posiciona absolutamente um elemento, em relação ao pai posicionado mais próximo ou ele cai no elemento corporal Então, se olharmos isso aqui, a imagem está realmente dentro da seção. Portanto, a seção é a mãe da imagem. Agora, no momento, a seção não tem nenhuma configuração. Portanto, a imagem será automaticamente posicionada de forma absolutamente relevante para o corpo, que é o pai mais próximo Então, como podemos manter a imagem dentro da seção? Bem, na verdade é muito simples. Tudo o que fazemos é colocar o posicionamento da seção em relativo. E aqui, Presto, agora, você pode ter certeza de que a imagem é relevante para a seção, porque a seção é a mãe mais relevante da imagem, como você pode ver aqui Agora, o que acontece se escolhermos fixo? Agora, corrigido significa, em última análise, que o elemento é relevante para a janela do navegador e permanece no lugar enquanto a página é rolada Então, por exemplo, escolher fixo e depois colocá-lo no canto superior esquerdo, não importa para onde vamos, agora ele está fixado no canto superior esquerdo. Você pode ver aqui que é relevante para o corpo e isso não pode ser alterado. Como isso pode ser bastante útil? Bem, se escolhermos essa barra de navegação como elemento e, no momento, ela estiver definida como relativa, ou seja, apenas o padrão para uma barra de navegação, mas se a colocarmos como fixa, você pode ver aqui que ela está fixada na parte superior da barra de navegação Então, não importa para onde vamos, ele sempre estará aqui. Agora, o que podemos fazer é distribuir isso para que, quando rolarmos para fora, a barra de navegação esteja sempre no lugar. Portanto, você não pode perder a barra de navegação, não importa para onde você role na tela. Agora, isso é extremamente útil porque, ao criar uma página da Web, você deseja ver a barra NAF enquanto percorre a página para permitir que o usuário possa navegar pelo site sem precisar rolar até o topo novamente para voltar à barra de navegação Então, isso pode ser muito útil para nós. Agora, há outra maneira de usar o sticky basicamente, em que usar o sticky basicamente, Sticky é uma abordagem mais exclusiva para fixar a posição do elemento E eu vou te mostrar o porquê. Agora, sticky é essencialmente o mesmo que fix, mas tem algumas configurações extras que você pode usar, o que significa que você pode realmente manipular o posicionamento do elemento adesivo para basicamente torná-lo mais responsivo e ter um pouco mais de controle sobre onde ele rola para baixo e, finalmente, quando para de rolar . Uma coisa a observar é o índice Z, porque ele pode ser extremamente útil como ferramenta. Então, quando pegamos essa grande quantidade de animação e definimos esse relativo, obviamente, ela era estática antes, que é padrão, mas se a definirmos como relativa , se basicamente rolarmos a página para baixo, você pode ver que a barra de navegação atualmente passa por cima da animação lottie dessa forma Agora, e se, por qualquer motivo, quiséssemos que esse elemento específico estivesse na vanguarda de tudo no site, de modo que, mesmo que a barra de navegação rolasse sobre ele, ele ainda fosse classificado como estando acima da barra de navegação apenas para tornar a página da web interessante Bem, podemos fazer isso assim. A seção do índice Z aqui, essencialmente, torna o elemento com maior numeração, o elemento mais proeminente Então, por exemplo, aqui, colocamos 99999 para que quando realmente a visualizamos e rolamos a página da web para baixo, ela passe por cima da barra de navegação, que é bem interessante, mas podemos torná-la ainda mais Então, podemos colocar essa imagem em particular como relativa. Podemos colocar essa imagem como relativa, essa imagem como relativa e essa é relativa. Agora, o que podemos fazer aqui é simplesmente tornar isso super alto do ponto de vista do índice Z, não importa o que passe por cima dessas imagens, elas sempre estarão no topo Eles não podem ser rolados. E só para realmente mostrar o que o índice Z faz. Se rolarmos para baixo agora, você poderá ver a animação do loteria, que tem um índice Z maior do que a barra de navegação Ele passa por cima da barra de navegação. Mas você pode ver aqui que esta imagem não tem nenhuma configuração de índice Z. Esse sim. Esse tem, esse não. Então, vamos ver como isso afeta isso. Nós rolamos para cima. Você pode ver aqui que substitui a barra de navegação e fica no topo, que pode parecer muito legal De qualquer forma, espero que você goste desta lição sem posicionamento e espero vê-lo na próxima lição. Te vejo em breve. 57. Webflow 101: seções de herói: Seções de heróis. Então, como você constrói a seção perfeita de heróis? Esta seção de heróis é indiscutivelmente perfeita, mas você também pode achar que é O que realmente torna uma ótima seção de heróis para sua empresa e marca? Bem, isso depende do objetivo que você está tentando alcançar. Por exemplo, se você acessar o site dessa marca, o site dessa marca está tentando canalizar indivíduos, casais e adolescentes para o funil de marketing, e o funil de marketing é específico para suas necessidades e exigências específicas Por exemplo, se você for um indivíduo e estiver tendo ataques de pânico, clique nesse botão e ele o levará a uma página específica para ataques de pânico. Novamente, se você era uma equipe e em última análise, está expressando raiva e quer resolver o problema, então você tem uma página especificamente relacionada à Agora, isso é obviamente algo diferente para cada marca. Em última análise, a seção de heróis em cada site deve literalmente fornecer exatamente o que você precisa saber desde o momento em que acessa a página inicial. Então, por exemplo, para Clementine House, site da minha agência Brannan, dizemos às pessoas exatamente o que fazemos em seis palavras simples, nomeando as ambiciosas Ok. Então, estamos literalmente dizendo que é isso que fazemos. Nomeamos as startups ambiciosas de amanhã. Agora, se acessarmos este site de exemplo, podemos ver que a seção de heróis diz exatamente o que esperar desse site. Então, obviamente, essa é uma influenciadora de fitness chamada Sandra Leon's Obtenha suas pontuações de condicionamento físico alcançadas. Depois de me formar em nutrição e treinamento físico, comecei a trabalhar com pessoas de todo o mundo e a mudar suas vidas para sempre. Assim, você sabe exatamente o que está recebendo assim que acessa esta página inicial e sabe exatamente o que esperar. Então, você pode basicamente fazer a suposição de isso é para mim ou isso não é para mim. Vejamos outro exemplo, que é o HubSpot. Então, a HubSpot literalmente diz exatamente o que eles oferecem. Plataforma HubSpot Customer. Então, cresça melhor com o HubSpot. software poderoso, não avassalador, conecta perfeitamente seus dados, equipes e clientes em uma plataforma de clientes que cresce com Você é exatamente o que você vai conseguir. E você verá que todas as marcas estão realmente focadas em atingir um determinado objetivo e realmente se posicionar de uma certa maneira Isso garantirá que cumpra exatamente esse princípio. Ele informa exatamente quem eles são nos primeiros 3 segundos após o acesso à página inicial. Agora, se você está trabalhando no Webflow e deseja criar seu próprio layout e sua própria seção de heróis sozinho , tudo bem Agora, obviamente, fornecemos modelos que você pode usar, e eles já têm seções de heróis incluídas neles. Mas se você quiser escolher o seu, poderá acessar a seção de layout do anúncio. E, basicamente, escolha um layout muito parecido com o que acabei de mostrar. Agora, obviamente, talvez seja necessário alterar um pouco o texto alterar a cor adicionar alguns padrões e adicionar um plano de fundo. Mas, em última análise, você pode usar isso para criar uma seção de heróis que pode realmente chamar a atenção de alguém, porque essa é a chave. Você precisa se certificar de que, nos primeiros 3 segundos de construção de sua seção de heróis , esteja dizendo às pessoas que é isso que fazemos, é assim que podemos ajudá-lo. Essa será uma das coisas mais importantes para garantir que as pessoas não acessem seu site saiam instantaneamente. Eles precisam saber exatamente o que você pode oferecer a eles nos primeiros 3 segundos acesso à sua página inicial. Esta é a seção de heróis. É exatamente nisso que você deve focar 80% de sua atenção antes de começar a criar o resto do seu site. Certifique-se de que seja perfeito. Certifique-se de que as letras e as palavras que você usa sejam as mais mínimas possíveis. simples possível e mostre exatamente o que você pode oferecer ao cliente Certifique-se de que ele tenha uma chamada à ação e também de que a imagem seja relevante e mostre o que você pode oferecer ao cliente ou cliente em potencial De qualquer forma, espero que tenham gostado dessa lição rápida sobre seções de heróis. Estou ansioso para ver você na próxima lição. Te vejo em breve. 58. Webflow 101: CMS e conteúdo dinâmico: Ok, então o que é CMS e conteúdo dinâmico? E como podemos usá-lo para nos ajudar a gerenciar melhor o conteúdo do nosso site? Bem, seu CMS é essencialmente seu sistema de gerenciamento de conteúdo E vou mostrar um exemplo de um dos meus sites e como estruturamos nosso sistema CMS para facilitar o gerenciamento do site Agora, como você pode ver aqui, essas são as configurações do CMS e temos vários sistemas CMS diferentes em jogo Agora, um deles são os projetos. Portanto, dentro do cenário do projeto, temos todos os clientes com quem trabalhamos nos últimos dois anos, que são atualizados regularmente por nossa equipe. Agora, se você clicar em cada projeto, verá que temos algumas guias que precisam ser preenchidas em cada projeto Por exemplo, o nome do cliente, o slog, que é essencialmente a extensão da URL Também temos especificamente o nome da marca , Project Insight. Então, isso é essencialmente uma visão sobre o que a empresa real faz e o mercado em que está o logotipo, temos os serviços entregues à esquerda, os serviços entregues à direita. Temos o problema que eles têm, a solução que lhes foi dada por nós. O cliente, o nome e a função, temos um depoimento real do próprio cliente, mais imagens relacionadas ao projeto real e, na verdade, temos um link para o próximo projeto em andamento e, em seguida, também um link do projeto para que eles possam realmente ver o projeto quando clicarem nele em nossa página inicial Agora, para o CMS, é realmente muito fácil criar um sistema CMS, e tudo o que você precisa fazer é simplesmente clicar no pequeno botão aqui para criar uma nova coleção Agora, quando você cria uma nova coleção, o que acontece é que você tem a opção de adicionar campos diferentes. Agora, por campos diferentes, quero dizer simplesmente as diferentes coisas que você deseja alterar na página principal do seu site. Então, por exemplo, talvez eu queira criar uma coleção focada nos blogs e nas notícias que produzimos no site da Clementine House Por exemplo, se entrarmos em nosso blog e em nossas notícias, basta pressionar adicionar campo e, em seguida, criaremos basicamente os campos necessários para cada página de cada postagem do blog. Por exemplo, se acessarmos o site da Clementine House e acessarmos uma postagem real no blog, vamos escolher essa, por Podemos ver aqui que temos a imagem média, que é, em última análise, a imagem que está aqui. Também temos a imagem secundária, caso queira adicionar outra imagem dentro da postagem real do bloco, uma terceira imagem, caso queira adicionar outra imagem, texto relacionado ao artigo, que pode ser encontrado aqui. Em seguida, também selecionamos o tópico. Então, basicamente, para qual tópico o artigo é relevante? É estratégia de marca, criação de identidade de marca ou nome de marca. Também temos a hora e a data de publicação, que você pode ver aqui, logo abaixo do título na página real da postagem do blog. Em seguida, temos o link para a página do projeto, que é essencialmente a URL, que é ativada quando você clica na imagem na página principal do blog. Também temos o autor, que pode ser visto abaixo aqui. Assim, você pode economizar muito tempo ao adicionar novas postagens no blog, por exemplo, ou novos produtos ou novos projetos. Você pode simplesmente gerenciar tudo no back-end dessa forma. Então, por exemplo, se quisermos mudar, você sabe, o título dessa postagem específica do blog, por que a fidelidade à marca é um absurdo completo, podemos acessar as notícias da postagem do blog e, basicamente, ver por que a marca não faz Clique aqui de verdade. Então, em vez de realmente alterar cada elemento do próprio site, podemos simplesmente editar esses elementos aqui. Altere o texto real do artigo. Podemos adicionar mais imagens. Podemos alterar a imagem real da miniatura real, que é isso Podemos mudar quem realmente escreveu a postagem do blog. Podemos alterar o texto do insight para realmente fazer com que as pessoas leiam a postagem do blog. Então, por exemplo, se realmente publicarmos isso , salvarmos e publicarmos, se verificarmos o site real, você verá que ele é atualizado automaticamente na página principal da web, mesmo que tenhamos acabado de alterá-lo no sistema CMS no back-end do site Agora você pode adicionar um elemento CMS à sua página da web simplesmente adicionando a coleção dessa forma E você pode usar todas as lições que já aprendeu nessa fase específica do curso para adicionar, por exemplo, um bloco DIF a cada seção e, em seguida, também adicionar a imagem Em seguida, tudo o que você precisa fazer é clicar duas vezes para acessar o sistema real ao qual deseja conectá-lo, e ele arrasta automaticamente todos os elementos que você tem dentro desse os elementos que você tem sistema CMS específico e, em última análise, você pode exibi-los da maneira que quiser, da maneira que achar E você pode adicionar, digamos, por exemplo, uma imagem dentro desse elemento específico, e ela preenche automaticamente todos os outros elementos para você Por exemplo, não queremos escolher uma imagem. Queremos realmente obter a imagem da postagem do blog. Então, adicionaremos a imagem principal. E aqui, clique em cada imagem, que está no back-end do site e do sistema CMS, sem que tenhamos que levantar um dedo Portanto, podemos inicialmente adicionar quantos quisermos. Podemos adicionar o cabeçalho, por exemplo, dentro de cada bloco do Dave. E então, em vez de ter que digitar todos eles, tudo o que fazemos é colocar o nome da seção real, e essa é a etiqueta. Agora, obviamente, isso não parece muito bom, mas você meio que entendeu, certo? É tudo uma questão de economizar o máximo de tempo possível. E se você puder fazer isso e realmente usar o sistema CMS a seu favor , seu site será muito fácil de gerenciar e você economizará muito tempo mudando as coisas e, e você economizará tempo mudando as coisas finalmente facilitando sua vida com o gerenciamento de seu site De qualquer forma, abordaremos os sistemas CMS mais tarde no curso Portanto, fique atento a isso, mas espero que tenham gostado desta lição e nos vemos em breve 59. (Áudio remasterizado e 16: Ok, então vamos começar do zero e construir nosso site juntos. Então, a primeira coisa a fazer é criar a estrutura do site. E podemos fazer isso com muita facilidade usando algumas dessas bibliotecas construídas dentro do Webflow Eu já instalei alguns, mas você pode obter muitos deles. Os que eu costumo usar são aqueles que têm basicamente mais opções. Quando estou criando um site, quero ter certeza de que tenho formatos e seções diferentes para escolher. E esse é um dos meus favoritos. Deixe-me ver. realmente não têm muita escolha. Este não tem muita escolha, mas vamos simplesmente instalá-lo clicando nesse botão e, em seguida, selecionar o site no qual deseja instalá-lo. Agora, na verdade, eu já tenho muitas bibliotecas no meu site. Portanto, não consigo instalar um novo. Então, vamos voltar e eu posso usar porque essas são minhas bibliotecas favoritas de qualquer maneira, então você pode escolher a biblioteca que quiser Mas, para o propósito deste vídeo, vou usar apenas aquele com o qual estou mais familiarizado e também o que eu acho que é o melhor. E, obviamente, você pode escolher essa se realmente quiser, e na verdade é uma ótima biblioteca para usar. E, basicamente, o que é uma biblioteca é apenas uma seleção de seções que podem ajudar você a criar um site dez vezes mais rápido. Então, ok, vamos começar criando a página inicial. Então, vamos usar uma interface de usuário sem título, que eu realmente amo Tem várias opções diferentes. É muito bom. Vamos escolher uma barra de navegação. OK. Vamos escolher esse. Não, na verdade, vamos escolher alguns outros. Sim, vamos escolher essa, na verdade, porque essas são fotos lá embaixo. Então, você literalmente arrasta e solta a barra NaF no corpo do site E está feito. É super simples. Agora, mostrarei como criar uma barra de navegação universal posteriormente no curso, para barra de navegação universal posteriormente no que, se você alterar sua barra de navegação em uma página, ela mude em todo o site, e é muito fácil Não se preocupe Mas sim, vou te mostrar como fazer isso um pouco mais tarde. Neste momento, lembre-se estamos apenas nos concentrando em criar a estrutura das páginas do site. Não estamos vendo cores, não estamos vendo imagens Não estamos focados em nada além de colocar as seções no lugar certo. Então, aqui o que eu estou procurando é uma seção de heróis, que eu acho que esta realmente funcionará muito bem em relação ao que precisamos. Sim. Ok, perfeito. Sim. Então, você sabe, isso nos permitirá literalmente dizer às pessoas exatamente por que elas deveriam passar mais tempo em nosso site. Lembre-se das três perguntas que cada pessoa fará si mesma quando acessar seu site. Número um, primeiro, eles estão no lugar certo, então você precisa ter certeza de que eles sabem que estão no lugar certo. Número dois, posso confiar em você, é por isso que agora estamos procurando uma espécie de seção de recursos? Hum, para mostrar as diferentes pessoas com quem trabalhamos ou, você sabe, os diferentes logotipos que criamos ou as diferentes marcas com as quais trabalhamos, por exemplo. Obviamente, isso depende do tipo de serviço que você está oferecendo. E então a terceira pergunta que eles basicamente se perguntarão é, ok, o que você pode realmente fazer por mim? Portanto, lembre-se disso quando estiver criando qualquer página inicial. Primeira pergunta, estou no lugar certo. Você tem que responder a essa pergunta. Número dois, posso confiar em você, é por isso que adicionamos a seção de recursos? E então número três, o que mais você pode fazer por mim? Como você pode realmente me ajudar? E é aí que podemos começar a procurar serviços diferentes? Assim, podemos realmente mostrar os diferentes serviços. Vamos dar uma olhada nesta seção de recursos. OK. Talvez esse. Talvez esse. Sim. Isso deve parecer muito bom. Então, eu literalmente cliquei nele e ele foi adicionado diretamente ao site Ok, perfeito. Perfeito, perfeito. Então, isso está parecendo muito bom. E, novamente, não estamos focando nas cores, não estamos focando em nada no momento além da estrutura. A razão pela qual fazemos isso é procurar alguns depoimentos ou uma seção de resenhas A razão pela qual fazemos isso dessa maneira é simplesmente para possamos nos concentrar na construção do site e, em seguida, nos concentrar nos detalhes finais. É assim que deve ser. Porque se você tentar fazer tudo junto, acabará gastando muito tempo tentando fazer tudo certo e deixar tudo perfeito, em vez de apenas 80% do trabalho quando você está realmente construindo a estrutura do site. Ok, então temos uma seção de depoimentos que é boa. Vamos dar uma olhada na adição, como uma pequena página de blog, apenas para mostrar que somos especialistas no que dizemos OK. Perfeito. Nós temos isso. Está parecendo bom. E então acho que tudo o que precisamos agora é de um rodapé Ok, vamos dar uma olhada nos rodapés. Veja qual deles é melhor para nós. Ok, este é bonito e simples. E escute, lembre-se, vamos mudar, como, você sabe, as abas e, você sabe, tudo mais depois Agora, uma coisa que às vezes acontece quando você usa esses modelos é que eles têm larguras, tamanhos e alturas predefinidos e outras coisas no Então, às vezes, especialmente com esse modelo específico e essa biblioteca, ele sempre tem a largura definida em 126. Não sei por que isso é realmente irritante para mim, mas vale a pena porque me poupa muito tempo Então, passei 5 minutos mudando literalmente alguns dos elementos. Se parecer um pouco estranho, basta verificar, e provavelmente está definido em 126 Então, sim, basta colocá-lo de volta automático e você ficará bem. Ok, tudo isso parece muito bom para a página inicial, para ser honesto. Ok, incrível. Nesse caso, vamos começar a pensar na criação de uma espécie de página de blog, uma página de artigo, por exemplo. Então, vamos começar a criar uma página de artigo. Então, novamente, vamos apenas adicionar a Navbar. E, novamente, essa barra de navegação mudará um pouco mais tarde , então não se preocupe Eu vou te mostrar exatamente como fazer isso. Hum, nós temos a forragem. Ok, vamos adicionar isso. mostrarei como usar o rodapé que você possa criar um rodapé universal Isso vai te poupar muito tempo. Definitivamente, economizo muito tempo quando você pode criar uma única seção, que pode ser a mesma em todo o site. E se você alterá-lo em uma página, ele mudará em todas as páginas. Então eu vou te mostrar como fazer isso um pouco mais tarde. Mas isso é, sim, isso vai te poupar muito tempo. OK. Vamos mergulhar e colocar isso aqui. Só estou me certificando de que está conectado ao corpo e não a qualquer outra seção, então estou apenas girando da direita para a esquerda. OK. Lá vamos nós. Isso deve ser bom. Incrível. Ok, então isso é algo bom. Eu gosto disso. Isso parece muito bom. Ok, vamos começar a verificar algumas coisas para ter certeza de que tudo está no lugar. Agora, com relação aos artigos, criaremos um CMS posteriormente nesta lição Agora, o que é um CMS é basicamente uma forma de criar várias páginas em torno da mesma estrutura de página Então, por exemplo, blogs , artigos, eles são realmente ótimos para isso, assim como projetos. L, por exemplo, se você está, você sabe, vendendo, você sabe, design de logotipo, por exemplo. Você pode criar uma página de projeto na qual simplesmente altera os logotipos reais que você obviamente criou, a redação e alguns outros elementos, como o título, o nome da marca. E o que o CMS faz é basicamente criar novas páginas. E eu vou te mostrar como fazer isso mais tarde. É super super simples. Basicamente, ele cria páginas exclusivas muito rapidamente, sem que você precise criá-las manualmente, de modo que tudo o que você precisa fazer é alterar o nome, alterar os logotipos e preencher automaticamente todas as páginas para mostrar seu trabalho É super inteligente e muito, muito eficiente. Isso realmente economiza muito tempo. Você pode estar familiarizado com o uso de CMSs antes. Se você é e isso é ótimo, vou te mostrar como fazer isso no webflow Se não, não se preocupe. É super simples de configurar e economizará muito tempo daqui para frente. Este é apenas um exemplo de um modelo de artigo, que eu uso para a Lancaster Mas eu tenho toneladas, eu uso CMSs para tudo. E tudo o que você faz é simplesmente pegar o campo personalizado. Então, por exemplo, temos a página principal do artigo, temos os tópicos, a cor do tópico. Você não precisa fazer isso com tanta profundidade, você não precisa ser meio, você sabe, tão detalhado. Você usará principalmente o texto, o botão de texto, o texto rico, a imagem e o link, e talvez um vídeo. Você não vai precisar de muito mais do que isso. Mas, basicamente, o que você faz é criar os campos na seção CMS do site Então você pode basicamente vinculá-lo. Então, por exemplo, aqui, eu tenho isso vinculado ao tópico, então, neste caso, é branding. Isso se conecta ao tempo de resposta, qualquer que seja o tempo de resposta no CMS, ele o verá aqui, na imagem principal do artigo, que está aqui, e assim por diante É muito, muito bom. E aqui, acho que tenho 47 artigos diferentes, e você pode ver que eles estão todos conectados a um campo personalizado diferente, e você pode ser tão complexo ou tão simples quanto isso. Você não precisa ficar louco como eu, mas você sabe, mantenha as coisas super simples, mas vamos configurar tudo isso um pouco mais tarde. Agora, em Margo, eu só quero verificar isso ainda. Isso é 126, como eu disse antes. Então, eu preciso ter certeza de que isso mudou. Mogo, não acho que precisemos de três colaboradores diferentes Então, vamos trocar de um. Não acho que precisemos dos botões de mídia social lá. Você pode mantê-los lá se quiser, mas não acho que sejam muito bons. Mude isso. OK. Vou falar sobre isso: vamos começar a criar outra página e começar a criar a página do seu artigo em geral, porque isso será muito útil para organizar todos os seus artigos e tudo o que você deseja compartilhar. Porque, em última análise, como agência, você quer mostrar que tem experiência, sabe, em diferentes áreas, certo? Então, isso vai ser muito importante. Então, ter um blog e apenas garantir que você o mostre de uma forma realmente profissional e minimalista Vai realmente ajudar, você sabe, conquistar o cliente e fazer com que ele confie em você, o que, em última análise, é o que você quer ele faça antes de, você sabe, marcar uma ligação com você ou contratá-lo para seus serviços e, sabe, finalmente lhe dar dinheiro. OK. Isso é bonito. Bom. OK. organizar tudo isso um pouco depois, mas você pode ver aqui que a caixa de links está definida em 1, 26. Parece um pouco estranho, então vamos corrigir isso. E sim, ok, isso parece bom. Estou feliz com isso. E nós podemos, podemos mudar essas pequenas coisas depois. No geral, estamos muito bem aqui. E você tem que, você sabe, apreciar aqui também, por causa dessas bibliotecas, estamos literalmente construindo um site inteiro em pouco tempo. Quero dizer, foram literalmente apenas 11 minutos, 12 minutos desde que realmente começamos. E nós literalmente já construímos três ou quatro páginas. E essas páginas parecem boas. Por exemplo, essas páginas realmente parecem profissionais. E eles ficarão muito melhores quando realmente os terminarmos, e você sabe, os colorimos e fizemos todas as nossas outras coisas, desculpe. OK. Vamos fazer a página dos contatores As páginas dos contatores geralmente são bem simples. Então, vamos apenas adicionar o Nav e o fudder. E então vamos adicionar a seção de contato. Então, nós só queremos algo agradável e simples. Não queremos ficar muito loucos. Eu acho que esse é provavelmente o melhor, então você quer ser completamente brutalmente honesto OK. Vamos dar uma olhada nisso. OK. Vamos adicionar isso aqui. OK. Perfeito. Então, vamos criar isso e, em seguida, vamos verificar novamente. OK. Então, vamos para 126, como você pode ver. E então temos Ok, está tudo lá. Ok, perfeito. Perfeito. Perfeito. Ok, está parecendo bom. Agora, vamos para a página da política de privacidade. Agora, no que diz respeito às políticas de privacidade e páginas jurídicas , em geral, todas elas são construídas exatamente da mesma forma. No entanto, eles são realmente muito fáceis de fazer. A única diferença é, obviamente, o conteúdo real na página real. Então, do jeito que eu gosto de fazer isso, eu estava procurando aqui uma seção para estar pronta, mas acho que na verdade é mais fácil fazer isso manualmente. Então eu posso te mostrar como fazer isso. É igualmente fácil, mas não precisa ter uma aparência muito bonita, então você não precisa ter design realmente complexo para uma página de política de privacidade Para ser honesto, ninguém realmente vai lê-lo. Está lá apenas do ponto de vista legal ou do ponto de vista da isenção de responsabilidade Então, vamos construí-lo manualmente, eu acho. Então eu vou te mostrar como fazer isso. Ok, confira. Para-choque. OK. Então, acabamos de adicionar uma seção lá, depois vamos adicionar um contêiner e, em seguida, vamos adicionar um cabeçalho. Então, vamos adicionar um parágrafo. Agora, poderia funcionar com um parágrafo. Não tenho certeza se vai funcionar com uma seção de parágrafo ou texto rico. Vamos ver. Mas sim, se não funcionar com um parágrafo, basicamente o faremos com texto rico depois. Portanto, não será um grande problema. Portanto, a política de privacidade pode ser criada apenas usando este site, política de privacidade gratuita.com e o melhor desse site em particular Vou adicionar todos os links para você saber, política de privacidade, remessas e devoluções, termos e condições, cookies, todas essas coisas. Vou vincular tudo no curso para que você possa simplesmente clicar nele e ir direto para a seção atual. Site. Desculpe. Agora, o que eles tentam fazer é basicamente tentar cobrar você, se você quiser, como uma política de privacidade realmente profissional, que, quero dizer, para ser honesto, quero dizer, eu não sou advogado, mas nunca usei, você sabe, uma política superprofissional além da minha agência, que obviamente fiz com meu advogado. Mas, hum, sim, você não precisa disso para ser completamente honesto. Acho que quando você está começando como marca, basta clicar em “Eu não quero uma”, como uma política de privacidade profissional, e você pode obtê-la gratuitamente. Então, sim, isso é o que eu provavelmente sugeriria. Aqui, você não precisa inserir seu endereço de e-mail correto. Então, sim, eu não sinto a necessidade de fazer isso. Mas, basicamente, agora você também pode tentar copiar isso, mas em alguns computadores por algum motivo, isso não permite. Você pode copiar a prancheta e basicamente fazer isso fazendo, tipo, quase como se estivesse codificando Então, você simplesmente copiaria isso em um código personalizado, um código HTML. Agora, se você não sabe programar , existe uma maneira fácil de fazer isso, e eu posso te mostrar como fazer isso. Agora, a melhor maneira que eu acho é que eles deveriam te enviar um like, como um e-mail. Deixe-me verificar meu e-mail para que eu possa tentar mostrar o que você é que seria enviado. Eles vagabundam, deixe isso carregar. Lá vamos nós. Então, eles lhe enviarão algo assim. Mas, para ser honesto, isso geralmente leva você de volta à página original da política. Então, o que eu costumo fazer, o que geralmente funciona melhor, é baixá-lo como um documento do Word. E você pode fazer isso simplesmente indo até aqui para gerar arquivos. Então, se você for gerar arquivos, basta clicar. Eu costumo usar o arquivo Doc porque ele já está formatado e outras coisas. E então, se você clicar nele e abri-lo, ele deve permitir que você simplesmente copie e cole diretamente no seu site. Ok, vamos fazer isso funcionar. Ok, agora está funcionando. Perfeito. Lá vamos nós. Como você pode ver aqui, ele já está totalmente formatado. Já está praticamente pronto para ser usado. Então, vamos tentar adicioná-lo à seção de parágrafos e ver como fica. Ok, então você pode ver o problema aqui, certo? Você pode ver que o problema é que ele não o formatou. A razão para isso é que seção simples de parágrafos serve apenas para um único bloco de texto. Não serve para um bloco de texto formatado. Então, o que precisamos fazer é basicamente trocar isso por uma seção de texto rico, que será muito mais útil Ok, então vamos fazer isso. Então você pode ver aqui esse formato diferente, então você pode ver aqui. Acabei de copiar e colar exatamente o mesmo texto, e poderíamos alterar o espaçamento entre algumas seções Mas, no geral, parece ótimo, como você sabe, parece profissional. Parece bem formatado. Sabe, poderíamos alterar pouco o espaçamento? Sim, definitivamente. Mas você sabe, todas as informações estão lá e são feitas da maneira certa. Uma coisa que eu observaria é garantir que às vezes, eles vejam coisas como aprender mais sobre cookies no site gratuito da política de privacidade. Então, eles basicamente se anunciam dentro das políticas de privacidade reais Você pode adiá-las se quiser parecer um pouco mais profissional, porque, obviamente , as pessoas sabem que você obteve a política de privacidade de um site gratuito de política de privacidade, que não é uma coisa ruim, mas as pessoas podem olhar para isso e pensar que talvez não sejam tão profissionais quanto eu pensava que eram. Agora, com a página Sobre nós, estamos essencialmente tentando, você sabe, contar às pessoas o que nos torna especiais? O que nos torna diferentes e por que você deve nos escolher como agência, certo? Então, o que vamos fazer agora é criar a seção Sobre. Agora, temos a barra NAF, temos o Fuda como deveríamos ter E agora precisamos finalmente começar a contar a história da nossa marca, a história da nossa empresa e o que nos torna diferentes. Então, o que eu estou fazendo aqui é que eu estou apenas procurando, eu quero adicionar um vídeo? Não tenho certeza se quero realmente adicionar um vídeo para ser totalmente honesto Eu quero adicionar um vídeo? Bem, isso é uma mesa de luz. Então, basicamente, o que é uma mesa de luz é que você pode ocultar algumas mídias, então, seja uma imagem ou uma seleção de imagens ou um vídeo dentro da mesa de luz, para que quando as pessoas clicarem na imagem ou na mesa de luz, apareça o vídeo real, o que é, hum, o que é super útil não tenho certeza se realmente quero ouvir Mas não tenho certeza se realmente quero ouvir um vídeo. Essa é a questão. Então, eu poderia optar por algo um pouco mais simples, como apenas uma imagem ou algo parecido. Deixe-me ver se consigo encontrar alguma coisa lá. OK. Como isso estava parecendo? Como isso estava parecendo? Aqui. Isso está parecendo muito bom. Eu só quero algo que seja bem simples. Eu quero algo bem simples, mas não tenho certeza do que quero dizer, isso não é tão ruim. E aquela? Sim, nós podemos fazer isso. Ok, incrível. Ok, vamos fazer essa. Perfeito. E então eu posso mudar as imagens e outras coisas um pouco mais tarde. Isso não é grande coisa. Mas tem tudo o que eu preciso. Tem um cabeçalho. Tem um pouco de texto. Ok, perfeito. Vamos começar a examinar algumas outras seções para adicionar abaixo delas, apenas para conferir as coisas. OK. Novamente, com a página Sobre nós, estamos apenas tentando dizer às pessoas o que podemos realmente fazer por elas. Então é isso que somos, e isso é o que podemos fazer por você. Um pouco como a página inicial, mas a página inicial é como uma página de destino para tentar criar confiança. A seção Sobre nós é quando as pessoas estão realmente interessadas no que você precisa fazer e em como você pode realmente ajudá-las. E é aí que eles realmente começam a pedir mais detalhes, para você possa ser um pouco mais técnico na página Sobre nós no que diz respeito a dizer às pessoas que tipo de serviços você pode oferecer a elas. Então, vamos adicionar uma pequena seção de serviços aqui. Vamos encontrar algo que pareça bom. Mmm mm. E essa biblioteca, em particular, eu a uso para muitos sites diferentes. Você pode usá-lo em sites de agências, sites marcas pessoais, sites de comércio eletrônico e pode editá-lo para deixá-lo com a aparência que quiser. Sim, é super útil, muito útil. E uma coisa ótima que eu adoro ter uma página sobre é porque as pessoas vão ter perguntas a fazer, certo? Por isso, eu sempre adiciono uma seção de perguntas frequentes porque ela nos permite responder perguntas. Sobre nós mesmos em um espaço muito curto de tempo e espaço no site. Então, sim, em vez de, você sabe, ler cerca de 20 seções diferentes sobre, você sabe, responder perguntas diferentes e fazer isso de uma forma muito longa, podemos ter apenas uma pequena seção de perguntas frequentes, que basicamente destaca todas as que basicamente destaca todas as perguntas mais comuns do cliente para que ele possa basicamente decidir ler cerca de 20 seções diferentes sobre, você sabe, responder perguntas diferentes e fazer isso de uma forma muito longa, podemos ter apenas uma pequena seção de perguntas frequentes, que basicamente destaca todas as perguntas mais comuns do cliente para que ele possa basicamente decidir se são adequados para eles ou não. Agora, eu realmente gosto dessa pequena seção no final da seção de perguntas frequentes sobre essa biblioteca em particular porque ela tem, tipo, uma chamada à ação. Mas, novamente, como as imagens elas tinham um pouco de preenchimento, então eu tive que mudar isso E então, por algum motivo, acho que isso não foi encaminhado corretamente Oh, desculpe-me. Sim, não está formatado corretamente, então preciso alterar o formato e mover o rodapé para baixo Sim. Ok, então você pode ver aqui que há um pequeno problema porque a seção está dentro de outra seção, o que obviamente é um problema. Então, a maneira de corrigir isso é basicamente separá-los. Então, vou fazer isso apenas clicando no corpo. Certificando-se de que estou copiando para o amigo, você pode ver aqui os acolchoamentos um pouco parafusados Então, vou adicionar esta seção novamente porque, não quero novamente, ao criar a estrutura do site, quero ter certeza de que a estrutura do site é perfeita para que eu possa me concentrar no design depois. O design é a parte divertida. O design é a parte que eu mais amo. É muito importante acertar a estrutura primeiro, porque se você não acertar a estrutura , basicamente terá que começar tudo de novo. Então, concentre-se realmente em fazer isso. Então, acabei de recolher a barra do navegador e vou adicionar o rodapé na parte Então, vamos adicionar isso. Temos o herói, temos os serviços, temos o FAQ, temos o pé na parte inferior. Perfeito. Está parecendo bom. E então podemos pensar nisso , não tenho certeza. Vamos apenas adicionar dois, na verdade. Vamos adicionar dois serviços porque não precisamos ficar muito loucos. Você pode adicionar quantas quiser, mas vamos adicionar duas pela hora principal. Ok, perfeito. Ok, então agora vamos dar uma olhada em, você sabe, um único projeto. Está bem? Então, se você é, você sabe, qualquer tipo de serviço que está oferecendo, seja design de logotipo, fotografia, você sabe, redação, seja o que for, você precisa de uma única página de projeto para realmente explicar e quase criar um estudo de caso para os diferentes clientes com quem você trabalhou Então, é muito importante acertar. Agora, o que eu gosto de usar é gosto de usar um truque muito elegante em que basicamente uso um modelo de artigo para a página do projeto, que funciona muito, muito bem porque é muito funcional Então, vou mostrar o que quero dizer daqui a pouco, mas adicionei a barra NAP, adicionei o rodapé. Agora, o que vamos fazer é arrumar um pouco as coisas porque esse modelo em particular é super útil para, você sabe, uma página de projeto, e parece Uma vez que tudo esteja terminado, de qualquer maneira. Ok, então basta mudar isso como criador. Então, quem realmente trabalhou no projeto. Não precisamos de nada disso porque não há um artigo. Então, basta mudar isso. Ok, perfeito. E então o que provavelmente deveríamos adicionar é algum texto. Então, adicione um parágrafo depois, apenas para escrever um pouco sobre o projeto real. Então, temos o título do projeto real. OK. Perfeito. Isso não parece muito ruim. Provavelmente faremos algumas alterações apenas para começar do zero. Mas tudo bem, vamos adicionar uma opção. Vamos adicionar uma grade. O que eu quero fazer é mostrar outras imagens, mostrar outras imagens, especialmente se você gosta de fazer design de logotipo ou fotografia, você sabe, você quer que elas tenham muitas imagens, certo Você não quer que seja , você sabe, apenas meio que, você sabe, apenas uma mensagem de texto ou muito texto, devo dizer. Então, sim, vamos adicionar algumas imagens aqui. Ok, então adicionamos uma caixa de grade, adicionamos um bloco d e, em seguida, vamos adicionar uma imagem a esse bloco d. Lá vamos nós. Perfeito. Então, você pode ver aqui , tem um pouco de preenchimento, basta tirar isso. , esse padrão com cada Basicamente, esse padrão com cada imagem na web flui, então só precisamos retirá-lo. Vou apenas adicioná-lo a 100%. Então, essa base preencherá completamente o bloco div. E então vamos copiar e colar um diblock, então temos muitas imagens diferentes Então é só y, vamos talvez colocar seis nisso, o que vai ficar ótimo. E então vamos lá, precisamos ser capazes de explicar o projeto real. Então, vamos tentar encontrar algo. Na verdade, o que vamos fazer aqui. O que eu estou procurando? O que eu estou procurando? Vamos, seção de perguntas frequentes. Vamos adicionar. Não quero a seção de perguntas frequentes como um todo. Eu só quero o apelo à ação. Isso é o que eu mais quero. Então, vou acessar a seção de perguntas frequentes, mas depois excluirei a seção de perguntas frequentes e manterei a chamada à ação real Então, sim, eu não preciso de todas essas perguntas. Vou apenas deletar todos eles. OK. Vamos lá, só para pegar isso. E então, basicamente, temos a bela chamada à ação na parte inferior, que é perfeita. Vamos reduzir o preenchimento, para que não fique tão grande Reduza esse preenchimento na imagem. Apenas remova esse padrão. Lá vamos nós. Incrível. Incrível. Agora temos um pequeno apelo à ação na parte inferior, o que é perfeito. Lá vamos nós. Reduza um pouco esse padrão. E isso parece muito bom. Estou muito feliz com isso agora. Está parecendo muito bom. Incrível. Reduza um pouco esse padrão , só para unir as coisas, porque eu quero que o espaço seja quase o mesmo. Leve isso embora. Ok, isso parece super limpo. Eu amo isso. Incrível, incrível, incrível, incrível, incrível. OK. Incrível. Tudo bem, vamos dar uma olhada nisso. OK. Ok, agora vamos criar a página real do portfólio. Então, a diferença entre a página única do projeto e a página do portfólio é que a página única mostra um único projeto, a página do portfólio mostra todos os seus projetos, ok? Então, vamos construir uma estrutura para isso. E, novamente, podemos ser um pouco inteligentes e usar esta seção OK. Portanto, não queremos mostrar nossa equipe Só queremos mostrar obviamente, os diferentes trabalhos que fizemos Hum, então isso é novamente, formato de 21, 26, então podemos corrigir isso. Tudo isso está corrigido. Há uma pequena margem neles, então tire isso. Ok, isso parece muito bom. Então, obviamente, aqui, não vamos usá-los para mostrar os membros da nossa equipe, porque eu não tenho certeza se você tem membros da equipe, se você tem, então é fantástico Se você não fizer isso, tudo bem. Basicamente, vamos usar isso para mostrar nosso trabalho. Então, vamos excluir alguns deles para termos um pouco mais de espaço para trabalhar. OK. Sim, acho que três é bom. Ok, faça. Vamos fazer isso. Ok, isso parece bom. Perfeito. Agora, vamos começar a analisar como podemos saber o que realmente precisamos para convencer as pessoas, você sabe, analisando o trabalho que fizemos. Então, o que podemos fazer é focar apenas em criar um. E então, uma vez que criamos um, do jeito que gostamos , podemos simplesmente duplicá-lo e tê-lo para vários projetos diferentes nos quais trabalhamos Ok, então aqui, por exemplo, vamos mudar isso para, por exemplo, um pouco sobre o projeto, olha Ok. Ok, adie isso. Só estou tentando fazer com que pareça certo porque obviamente, é uma página de portfólio, então quero ter certeza de que teremos uma boa aparência. Assim, podemos duplicar isso e ter várias versões diferentes Agora, isso pode parecer um pouco estranho no momento, mas tenha paciência comigo. Este é um trabalho em andamento, então estou meio que trabalhando nisso com você. Novamente, quero uma chamada à ação, como na página única do projeto, então vou adicionar a seção de perguntas frequentes novamente ao corpo E, novamente, vou editá-lo para não precisar ter todas as perguntas e outras coisas diferentes. Atrasar isso. Atrasa isso. Aqui vamos nós. Perfeito. G incrível incrível incrível. Vamos tirar isso daqui. Vamos reduzir isso. Ok, está parecendo um pouco melhor. E, novamente, sei que já mencionei isso algumas vezes, mas estamos apenas focando na estrutura aqui. Não nos importamos com mais nada. Apenas a estrutura real. Vamos reduzir isso um pouco para quatro. OK. Está parecendo muito bom. Está parecendo muito bom. Nós temos a estrutura lá. Então agora temos a estrutura, e tudo está, você sabe, no lugar certo. Vamos começar a realmente criar o site, certo? 60. (Áudio remasterizado e 16: Vamos começar realmente a projetar o site, certo? Então, todas as estruturas feitas em todas as páginas. Vamos começar a criar o site. Então, aqui queremos adicionar algumas imagens. Essas são apenas algumas imagens que eu organizei apenas para tornar o fluxo de trabalho um pouco mais rápido , para que eu possa passar por isso com você muito mais rápido Então, vou apenas adicionar algumas imagens. Então, vamos mudar o logotipo. Acabei de encontrar esse logotipo online no Google, criativo em. Vamos adicionar isso aqui. Vamos deletar isso. Na verdade, esse pequeno ícone. Não precisamos desse ícone. Apenas exclua isso. Perfeito. Lá vamos nós. Então , está tudo aí. O que você pode fazer é pegar o link de navegação e pressionar o pequeno **** E depois coloque isso em casa. Assim, você pode fazer o mesmo nas configurações em que basicamente basta clicar aqui e escolher uma página. Portanto, sempre que alguém clicar em seu logotipo, você o enviará diretamente para a página inicial Isso é uma coisa muito comum. E isso também significa que, na barra NAF, não precisamos da guia inicial Basta alterar a imagem rápida lá. Vamos manter esses logotipos mesma forma que os clientes obviamente economizam algum tempo. Vamos fingir que trabalhamos com base em moedas, web flow, slack, Zoom, etc. Com esta pequena seção aqui. Então, o que estou fazendo aqui é mudar as imagens dentro dos ícones. E a maneira de fazer isso é simplesmente pegar uma imagem, clicar em copiar e colar e, basicamente, você tem uma imagem dentro, que pode ser alterada. Você não pode alterar os ícones. Você precisa adicionar uma imagem e depois alterá-la para PNG. Então, aqui, por exemplo, eu tenho três PNGs, uma estrela, que está aqui, e então eu obtenho o tamanho certo porque o tamanho é um pouco pequeno demais Sim, preciso aumentar um pouco esse tamanho. Estou apenas excluindo esses. Deixe-me verificar o tamanho. Esse tamanho é um pouco melhor. Novamente, então eu vou apenas copiar e colar. Copie e cole. Vamos lá, então eu tenho a maior dentro, e então eu posso mudar a imagem real. Eu tenho o tamanho certo. apenas mudar o PNG interno. E um PNG, se você não estiver familiarizado com um PNG, o PNG é simplesmente uma imagem sem fundo. É simplesmente transparente. Ok. Portanto, as avaliações reais parecem boas. Se não precisarmos mudá-los. Não vamos perder muito tempo alterando todos os textos e outras coisas, porque isso é algo que você obviamente pode fazer com muita facilidade. É como editar um documento do Word. Ok. Vamos mudar algumas imagens na seção do blog. Ok. Vamos dar uma olhada nisso. Perfeito. Nós temos isso. Está parecendo bom. Obviamente, podemos mudar os títulos do blog e outras coisas, mas não é necessário para isso. Isso é algo que você pode fazer no seu próprio tempo. Hum, eu quero ser o mais respeitoso possível com seu tempo. Ok, então nós temos isso, nós temos isso. Ok. Estamos apenas mudando o logotipo exatamente da mesma forma que antes. Novamente, podemos conectar isso à página inicial. Ok. Agora, vamos dar uma olhada nos ícones das mídias sociais. Então, neste caso em particular, estamos no Facebook? Não, estamos no Twitter? Não. Roni no Linked in inn Instagram, então acabei de deletar aqueles E basta excluí-los, você literalmente clica neles e pressiona até tarde, como em um documento do Word. Super simples. Ok. Vamos até aqui, por algum motivo, acho que parece um pouco estranho, mas na verdade, parece bom Não parece muito ruim para ser honesto. Mas vamos continuar fazendo com que esse, hum, pareça um pouco mais de marca. Então, basta colocar minha marca. Ok. E eu acho que 2077 está bem longe, então vamos para E então, quero dizer, isso não parece muito ruim, certo? Temos as imagens prontas. Você sabe, nós colocamos o logotipo lá. Tudo parece muito bom no momento. Acho que o próximo passo é fazer a página Sobre nós, porque a página Sobre nós e a página inicial real são bastante semelhantes, certo? Eles são muito parecidos. Então, o que vamos fazer, e eu realmente mudei, a estrutura sobre nós um pouco, porque eu não gostava da imagem naquela seção específica de antemão, e era um pouco mais difícil mudar porque havia várias camadas nela Então, eu mudei isso apenas para mostrar a você a maneira mais simples Mas, novamente, estamos apenas alterando o logotipo real dentro do rodapé real Só para colocar tudo na marca. E essa é uma parte meio divertida, quando você realmente acessa o site e, sabe, muda as cores, muda as imagens, muda o texto. Eu geralmente altero o texto por último para que eu possa, você sabe, fazer com que a imagem fique com a aparência certa, e então podemos basicamente dedicar um tempo para obter os direitos autorais. Provavelmente vou criar um curso de redação mais tarde, mas isso é só por enquanto. Agora, em relação à Navbar, vamos criar essa barra de navegação universal daqui a pouco Agora, você pode ver aqui que temos essa barra de navegação aqui, que está na página inicial Agora, não precisamos desse botão, então podemos excluí-lo. Não precisamos inscrevê-lo, então podemos simplesmente mudar isso para o objetivo mais importante, o objetivo estratégico do nosso site, que é entrar em contato conosco. Podemos mudar isso para um lindo rosa. Ok, L é carmesim, devo dizer? Vamos mudar isso para vermelho só para combinar com isso. Agora, esse rosa não é o mesmo que o rosa do logotipo. Então, vamos desconectá-lo. Então, vou pegar o carmesim novamente e desconectá-lo. E depois vou ajustá-lo um pouco até ficar igual ao logotipo. Lá vamos nós. Isso é um pouco melhor. Ok, vou retirar o esboço. Mas tudo bem, quando eu passo o mouse sobre ele, ele fica roxo. Isso é muito irritante. Está bem? Então, vamos passar o mouse. Vamos para a seção de cores. Vamos escolher o carmesim. Ok, perfeito. E agora, quando eu passo o mouse sobre ele, parece um vermelho mais escuro Então, é mostrado que estou interagindo com o botão real, que é exatamente o que eu quero. E pronto, o melhor desses modelos é que , quando você altera uma coisa, todos os botões do site inteiro são alterados, você não precise fazer isso várias vezes. Então, por exemplo, aqui, estou apenas conectando o botão de contatores à página de contatores Aqui, na verdade, não precisamos de casa, então podemos dizer isso porque o logotipo já nos leva para casa Portanto, não precisamos da seção inicial. Aqui, podemos mudar isso para outra coisa, como serviços, por exemplo. E isso pode simplesmente ir para nossa página sobre nós ou algo assim. E quando passamos o mouse sobre ele, podemos alterá-lo para que ele realmente fique rosa, o que parece da marca, aí está. Isso parece muito legal. Agora, o motivo pelo qual ele não faz o mesmo com os recursos, mas tem o mesmo efeito com os preços, é porque os recursos são uma lista suspensa. É um elemento suspenso, enquanto os serviços e preços são um elemento de guia, ok Então, você sabe, você pode fazer exatamente a mesma coisa, mas só para explicar por que isso aconteceu. Ok, então temos a barra NaF lá. Agora, o que vamos fazer é criar um novo componente. Então, o que é um novo componente? Então, se criarmos um componente chamado Agency NAV Bar, isso nos permitirá usar esse componente em todo o site o tempo todo Então você pode ver como é verde. Agora podemos pegar esse componente e usá-lo em todas as páginas de todo o site. E quando mudamos alguma coisa, por exemplo, talvez adicionemos outra página à barra de navegação Depois de alterá-lo na primeira página, ele mudará em todo o site, que é exatamente o que queremos. Isso vai nos poupar muito tempo, muito tempo. Então, podemos usar isso para muitas coisas diferentes, e vamos usá-lo um pouco mais tarde para a forragem, o mais importante E então, sim, eu só queria mostrar a você não apenas como criar o site muito rapidamente, mas também como configurar coisas para que, ao gerenciar seu site, você também possa gerenciá-lo muito rapidamente, porque esse será um elemento super importante porque seu tempo é muito valioso, certo? Então, você quer ter certeza de que o site está configurado para tornar sua vida o mais fácil possível. E essa é uma das razões pelas quais eu adoro o fluxo na web. É por isso que eu invisto no sistema Webflow CMS, porque o sistema CMS economiza muito tempo E o tempo é muito valioso, e é muito importante, você sabe, não perder tempo. Então, tudo bem, vamos para a página de artigos do blog. Na verdade, está nos levando à página de contato. Vamos fazer isso primeiro. Então, aqui, obviamente, você pode adicionar seu endereço de e-mail, você pode adicionar seus detalhes e outras coisas. Eu só quero realmente mudar a cor real para rosa, obviamente, no momento, é roxo e não parece muito bom E se você clicar nesse pequeno botão roxo aqui em cima, ele levará você para várias cores diferentes, como se você pudesse salvar cores, o que é muito legal. Então, é só para que eu guarde isso. Vou apenas selecionar o mesmo rosa. Portanto, isso evita que você encontre a mesma cor repetidamente ou adicione o mesmo código hexadecimal repetidamente. Super super inteligente. Ok. Ok, agora podemos obviamente adicionar nossa barra universal de NaF porque aquela outra era a outra era a antiga Então, estamos apenas adicionando isso aí. Você pode ver como é rápido e fácil criar uma página de contatores realmente parecida com a de uma marca Literalmente, demoramos cerca de 5 minutos para fazer. Não é difícil. É muito, muito simples. Ok. Vamos dar aquela olhada. Ok. Lá vamos nós. Perfeito. Ok. Agora, isso parece muito bom. Ok. Vamos passar para a página única do projeto. Então é por isso que podemos começar a, você sabe, fazer com que as coisas pareçam muito, muito boas. E a página do projeto é muito importante para qualquer agência ou provedor de serviços porque você simplesmente não é tanto uma página de projeto, mas é como uma página de estudo de caso, certo? Estou apenas usando uma página de projeto para essa circunstância específica É muito importante mostrar seu trabalho melhor maneira, porque é isso que vai fazer com que você seja contratado, ok? Então, vamos trocar essa forragem. Então, sim, garantir que você goste de investir tempo e realmente mostrar seu trabalho da maneira certa e de fazê-lo corretamente economizará muito tempo e energia na aquisição de novos clientes mais tarde Basicamente, quanto melhor a aparência do seu site, mais fácil será para você conseguir clientes. Atualmente, temos nosso site em um lugar muito bom e o refinamos na última década. E agora nosso site faz você saber, ou nos fornece, você sabe, de 30 a 25 leads por dia, e rejeitamos a maioria desses leads porque não queremos trabalhar com essas empresas em particular Então, isso mostra o poder de, você sabe, obter boas imagens e mostrar seu trabalho da maneira certa Então, vou adicionar algumas imagens aqui apenas como espaços reservados Mas uma coisa que eu diria também, e mencionei isso em outros cursos e também no início deste curso, é certifique-se de conferir o que há de melhor em seu setor nos serviços que você está fornecendo. E aprenda com eles, aprenda o que eles fazem, como apresentam seu trabalho e, em seguida, faça isso de uma forma muito semelhante , porque então você poderá , você sabe, vender seus serviços com muito mais facilidade. Porque, você sabe, eles são os melhores do que fazem. Portanto, há uma razão pela qual eles são tão bons e podem cobrar uma fortuna, como a Pentagram, por exemplo, uma empresa de design de marca que tem escritórios em todo o mundo A cobrança é de centenas de milhares, se não, 50.000, 50.000 a 100.000 por projeto de desenvolvimento de identidade de marca Então, vamos adicionar alguns textos porque isso será importante para explicar o que estamos realmente fazendo dentro do projeto. Na verdade, não vou adicionar o texto porque isso obviamente vai perder tempo, mas obviamente você pode reservar um tempo para escrever uma pequena resenha do projeto. Ok. Vamos acrescentar um pouco de vontade de trabalhar conosco. Sim. Vamos adicionar isso aí. Em seguida, basta vinculá-lo à página Fale conosco. Para que as pessoas possam entrar em contato conosco. O que é incrível. Ok, isso está parecendo muito bom. Você pode ver como, não gastamos muito tempo construindo este site. Estamos literalmente construindo o site. E eu acho que é por volta de, você sabe, 40, 46 ou 47 minutos. Estamos construindo o site. E, sério, não é difícil. Mas a razão pela qual conseguimos fazer isso tão rapidamente é porque, você sabe, eu tinha todas as imagens preparadas e, obviamente, não estou escrevendo o texto. Mas cerca de 90% do trabalho de realmente construir o site. Você pode fazer isso. E então são apenas os 10%, que você realmente precisa para aproveitar seu tempo. E eu realmente recomendaria dedicar seu tempo, você sabe, aos detalhes mais sutis, como mostrar seu trabalho, como escrever o texto, todas essas coisas são realmente importantes. Ok. Vamos trocar a barra de NaF e a forragem. Perfeito. E quando você fica confiante com o fluxo da web , começa a adicionar mais coisas e descobrir mais coisas. Seu site continua ficando cada vez melhor e melhor. E também com o site, uma coisa que vou dizer é adicionar aqui um software de rastreamento comportamental onde você pode realmente ver como o mouse. Ok, então o que eu vou fazer aqui, é só parar por um segundo. Vou adicionar o CTA, a chamada à ação na outra página De uma forma muito mais fácil. Então eu tenho isso. Eu selecionei a seção real. Vou criar um componente. Lembre-se do mesmo que o Navbar e o forragem. E vou criar uma sessão ou seção de chamada de descoberta, onde podemos basicamente adicionar isso a diferentes seções, e tudo vai para o mesmo lugar para a seção de chamada de descoberta. Lá vamos nós. Capital D. Perfeito. Crie. Ok. Então agora você pode ver que é verde. Isso significa que em todo o site, será exatamente o mesmo. Então, vamos adicionar isso também à seção do portfólio. Porque eu poderia manter este atualmente o azul. Mas a realidade é que vou ter mais trabalho para mim mais tarde, que vou ter mais trabalho para mim mais tarde porque terei que editar duas seções diferentes e, em vez disso, se eu fizer o trabalho agora, posso excluir isso. E então eu posso simplesmente adicionar a outra seção de chamadas de descoberta, que é universal, então ela muda facilmente em todo o site, e eu não preciso fazer o mesmo trabalho duas vezes, que é, você sabe, muito importante. Ok. Vamos dar uma olhada nisso. Ok. Está tudo bem. Está tudo bem. Está tudo bem. Vamos começar a adicionar e depois vamos começar a adicionar um pouco de b, b, bum, bum. Ah, sim, o que eu estava dizendo antes é sobre adicionar um software de rastreamento comportamental para melhorar seu site. Então, todo mês, depois de criar seu site e ele estar no ar, você começará a receber clientes. Está bem? Vou apenas adicionar algumas imagens enquanto falo com você sobre isso, porque é muito importante. Quando você começa a acompanhar os visitantes do seu site todos os meses, certo? Então, apenas um dia do mês, no final do mês, provavelmente, você apenas assiste às gravações, e eu posso te mostrar como instalar o software Hot Jar. Na verdade, tenho um link onde você pode obtê-lo gratuitamente, basicamente, está anexado a este curso Quando você aplica algo como Hot jar ao site, ele mostra como seus visitantes estão se comportando em seu site, e então você pode basicamente fazer alterações com base no comportamento real que os visitantes do seu site estão fazendo Então, em vez de apenas adivinhar e mudar o site por causa do que você acha que parece bom ou algo assim, você pode realmente fazer isso da maneira certa pelos motivos certos para obter os resultados desejados E há uma grande diferença. Você sabe, alguém que está apenas mudando o site porque parece melhor. Eles não têm ideia do que estão fazendo. Eles vão andar em círculos porque não estão tomando decisões com base no que realmente está acontecendo. Eles estão apenas tomando decisões com base no que acham que está acontecendo, o que é, você sabe, é meio estúpido, certo? Então, o que estou fazendo aqui é estou fazendo criar como uma fotografia, como um site de fotografia aqui. Então, isso vai ser um estúdio fotográfico. E então podemos mudar isso. Então, novamente, você sabe, podemos mexer nos textos e outras coisas, mas no geral, isso parece muito bom Então, vamos dar uma olhada nisso. Então, o que eu quero fazer começar a criar algum tipo de animação ou algum tipo de efeito legal quando alguém passa o mouse sobre ele Porque no momento, quando passamos o mouse sobre ele, nada realmente acontece Parece meio que bonito, muito chato para ser honesto Tipo, eu não gosto de ok, então agora, quando eu passo o mouse sobre ele, isso muda a capacidade Ok, isso é bom. Então, nós temos isso. Ok, perfeito. Ok, vamos fazer outra coisa. Vamos fazer outra coisa bem legal. Vamos mudar o Talvez possamos adicionar, tipo, talvez possamos torná-lo um pouco maior quando as pessoas clicarem nele ou passarem o mouse sobre ele Não muito, só talvez um pouquinho. Vamos verificar o quão grande isso o torna. Ok. Isso não o torna muito maior, então vamos torná-lo um pouco maior. Ok. E então, talvez, vamos adicionar. O que mais podemos fazer? O que mais podemos fazer? O que mais podemos fazer? Eu não quero fazer isso também, tipo muito louco. Vamos talvez adicionar, talvez , um filtro ou algo assim. Vamos adicionar um filtro? Sim, vamos adicionar um filtro. Vamos adicionar um pouco de desfoque Vamos acrescentar que não queremos fazer nada desse tipo de coisa. Esse tipo de coisa está ficando um pouco intenso demais. Vamos adicionar um desfoque. E não queremos adicioná-lo muito embaçado, mas só um pouco, só para torná-lo interessante Ok. Então, agora, quando você passa o mouse sobre a imagem Basicamente, deve parecer desfocado. Basta acessar as transições de antemão e depois acessar todas as propriedades e, literalmente , obtê-las por cerca de 375 e, em seguida, simplificá-las com um pouco mais de elegância, aprimorando-as E então o que você vai fazer é clicar nele e isso é salvo automaticamente. E agora, quando passamos o mouse sobre ele, você pode ver que ele tem esse tipo legal de efeito vítreo, que é o que, você sabe, parece muito melhor Ok. Agora, na verdade , sabemos que eles realmente sabem, é como um efeito artístico, certo? E você pode fazer o que quiser com isso. Realmente leva algum tempo para brincar com isso, porque essa é, você sabe, uma das minhas partes favoritas do design de sites, basta adicionar pequenas animações e animações legais como Vou adicionar um ponteiro para que, quando as pessoas passarem o mouse sobre ele, ele se transforme de um mouse em uma mão elas saibam que é clicável Sim, além disso. Eu acho que isso está parecendo muito bom. Isso parece muito melhor do que eu esperava, na verdade. Ok. Vamos ver talvez porque isso não seja realmente clicável no momento Isso é apenas uma imagem, o que é um problema, obviamente, porque se as pessoas não conseguirem clicar nela, elas não poderão acessar a página do projeto, então precisamos adicionar um bloco de links. Então, vamos adicionar um bloco de links aqui. Isso pode causar um pequeno problema. Então, vamos resolver isso juntos. Só para que eu possa mostrar exatamente como você deve abordar isso. Ok. Então, nós temos isso. Eu copiei e colei. Ok, então isso é obviamente muito pequeno. Nós vamos fazer esse carro. Ok. Agora é como se estivesse sublinhado, o que não parece muito limpo, certo? Então, aqui o que podemos fazer é adicionar a página real que queríamos acessar. Mas eu não gosto de como está sublinhado. Ok, vamos clicar aqui. Vamos nos livrar dessas linhas abaixo. Ok. Então, vamos selecionar o item. Em seguida, o bloco de links e, em seguida, basta clicar nele e clicar nele, e pronto. Lá vamos nós. Ok, também. Então, agora, tudo está, tudo deve estar pronto. Agora, em relação ao CMS, é aqui que as coisas podem ficar um pouco mais interessantes 61. (Áudio remasterizado e 16: Ok, então com as seções do CMS, eu só quero mostrar como configurar uma E você pode usar as seções do CMS para literalmente tudo. Você pode usá-lo para seus artigos, você pode usá-lo para páginas de projetos, você pode usá-lo para produtos se você estiver no site de comércio. Mas neste exemplo, podemos literalmente, você sabe, criar uma coleção para nossos exemplos de portfólio, certo? Então, você sabe, estamos adicionando as imagens principais, o tipo de trabalho, você sabe, o tipo de projeto. Podemos acrescentar, obviamente, que temos o nome acima em texto simples. A inclinação, que é, você sabe, informações básicas, precisamos delas, o texto do Blurb Então, isso vai contar às pessoas um pouco sobre você sabe, o que elas podem esperar. E então, se realmente o criarmos, podemos simplesmente adicionar cinco itens. Esses são apenas espaços reservados, então, obviamente, não precisamos usá-los, mas isso apenas mostrará como realmente adicioná-los OK. Então, quando vamos para a página P 40 aqui, em vez de criar, você sabe, adicionar links e fazer tudo manualmente. Na verdade, podemos fazer algo muito legal onde podemos simplesmente criar isso sem problemas, certo? Então, basta adicionar a barra de NaF. Vamos adicionar essa seção, então vou copiá-la e colar essa seção aqui embaixo. Recebi a chamada à ação. E também vamos adicionar o rodapé. E então você pode ver aqui que isso não está conectado ao corpo, mas está agora, mas não estava. Vamos para o rodapé. OK. Então, temos essa página novamente, mas na verdade criamos, você pode ver no canto superior esquerdo. Agora é uma caixa roxa. Isso significa que está na seção CMS. Não é uma página estática, está na seção CMS. Então, o que eu posso fazer é basicamente começar a olhar, estou me perguntando se essa pode ser a melhor maneira de fazer isso, na verdade. Ba, ba, ba, ba, ba. OK. Vamos criar uma conta, uma conta separada. Então, vamos reduzir a margem lateral para cerca de 30. Aproximadamente. Acho que 30 deveria ser bom. H. Nenhuma. Então está cheio. Ok, dá para ver como a tela inteira é preenchida , o que é bom. E então podemos brincar com as margens e outras coisas e fazer todo esse tipo de coisa Mas vamos adicionar o bloco CMS a esse C, veja aqui. É chamada de lista de coleção. Então, simplesmente o colocamos lá, o que é ótimo. Em seguida, clique duas vezes, selecione a fonte, que neste caso, são exemplos de portfólio. E então você pode ver aqui que os cinco artigos são como itens de espaço reservado que tínhamos antes Agora, se você acessar a lista de coleções e clicar na grade, ela basicamente divide as coisas para que você possa ter uma aparência bonita e profissional É praticamente o mesmo que temos abaixo. Agora, o que você pode fazer é simplesmente copiar esse item, então clique no bloco de links. Copie e cole isso no texto acima. Então agora você tem isso, você sabe, parece muito, muito, você sabe, bem, na verdade não parece muito bom. Ok, como podemos consertar isso? Porque quero ter certeza de que podemos resolver isso juntos. Ok, imagem principal, vamos conectá-la à imagem e ver o que acontece. Ok, isso também não funcionou. Então, agora, vamos conectar os dados reais e ver o que acontece. Então, estamos apenas nos conectando aos diferentes itens, por exemplo, tipo de trabalho. Ah, k. Ah, então é por isso que a razão pela qual não estava funcionando é porque a quantidade real da quantidade de conteúdo não era suficiente para preencher todo o espaço. Ah, ok, ok, ok. E agora isso faz sentido. Ok, então agora temos isso. Agora nós temos isso. Agora, tudo o que precisamos fazer é alterar o CMS na parte traseira do back-end Ok, perfeito. Portanto, não houve realmente um problema com o modelo. Então, se tivéssemos adicionado o conteúdo desde o início, não teríamos problemas. A razão pela qual tivemos um problema é porque basicamente acabamos, você sabe, sem ter o conteúdo lá. OK. Então, o que podemos fazer agora é simplesmente excluir isso ou nos livrar dele, porque não precisamos de ambos. Ok. E então o que podemos fazer é adicionar alguns elementos ao back-end real do CMS, que vai para todos esses elementos Então, quanto às imagens reais, o texto, está todo sendo arrastado dos exemplos de portfólio na coleção CMS Então, vamos deletar esses dois. E vamos adicionar três projetos apenas para mostrar como isso funciona. É muito simples e fácil, então acompanhe. Ok, então vamos substituir um desses. OK. Vamos chamar essa planta. E então, o slogle geralmente se preenche sozinho, mas, obviamente, neste caso, vamos apenas mudar seu tipo de trabalho Então, esse é o tipo real de trabalho ou fotografia. OK. E então o texto da sinopse ou teaser Isso é apenas um pouco sobre o projeto real e o que esperar quando você realmente clica nele. OK. Ok, também. Deixe-nos ir. Então, agora que terminarmos isso, podemos já preencher o elemento real na página do portfólio Então, ele já foi editado para nós. Não precisamos fazer mais nada, é por isso que adoro tanto os sistemas CMS e as coleções e as uso porque elas economizam muito tempo Hum, então, novamente, eu vou mudar isso para cabeça. Vamos mudar isso para fotografia. Vamos mudar isso para “Eu amo minha foto na cabeça”. Lá vamos nós. Sif. E então, para o último , faremos, eu não sei. Vamos escolher isso Aí está, e depois fazer outra coisa relacionada a isso. E, obviamente, como acontece com as coleções do CMS, leva um pouco de tempo para se acostumar a usá-las. Mas, honestamente, assim que você se acostumar a usá-los, você vai, tipo, é uma daquelas coisas que eu quero que você aprenda Você está muito feliz por ter feito isso e só gostaria de ter aprendido a usá-lo mais cedo. Então, construir seu site, dessa forma, ajudará você a economizar muito tempo. Ok, então há os três itens. Então, agora, quando voltamos para a página do portfólio, você pode ver que ela foi editada, mas sim, por algum motivo, esta ainda está sendo um pouco chata OK. Então é isso que está acontecendo. Está bem? Ainda está nos causando um pequeno problema. Então, o que deve haver de mais alguma coisa? Deve haver algo mais que esteja causando um problema. Vamos resolver o problema e resolver isso. OK. Vamos para o bloco dif Portanto, o bloco dif é o que o formatará Ah, ok. Essa lacuna, ok. Mamãe. Às vezes, trata-se apenas de mexer nas coisas e depois voltar para si mesmo para descobrir as coisas Opções, capa de ajuste. Largura máxima de Mmm. Não é isso. OK. Definitivamente, há algo que está fazendo com que isso não pareça perfeito. Só preciso descobrir o que é. Mamãe. OK. Faça um bloco. Eu fiz um bloco. Só vai levar alguns minutos para fazer isso da maneira certa. Item de coleção. OK. Item de coleção. Acho que é definitivamente o item da coleção ou o bloco div. É um desses. Ou talvez seja, talvez seja a imagem, na verdade. Vamos dar uma olhada nisso. Ok, vamos jogar. OK. Ah. OK. Mmm. Achei que poderia ter sido isso, mas nenhum. OK. Vamos tentar isso. Estou apenas brincando agora, tentando descobrir como Vamos simplesmente acabar com isso. Então, vamos voltar atrás. Vamos colocar isso de volta. E basta clicar no comando Z, comando Z, para voltar para onde queríamos. Embalagem de imagem. Ah, talvez seja o invólucro da imagem. Talvez seja o invólucro da imagem. Eu não vi isso antes. Talvez não seja isso, então. Talvez seja isso. OK. Bloco Mm. Não, não é isso. Flexionar Bloco de links. Então, estou apenas analisando as opções. Neste momento, estou apenas analisando as opções, tentando descobrir o que poderia ser. E como você pode fazer isso, então você pode começar a ver o diferente, ok. Ah, lá vamos nós. Então, vamos voltar e ver como isso foi corrigido. Então, temos a fechadura flex. Para. Bloco flexível. Vá para o bloco dif Então, podemos simplesmente ir para o bloco dif. Vamos para o bloco dif. Clique no bloco central direito. Lá vamos nós. Então, basicamente, o bloco dif foi definido como Flex em vez de bloco, e ele é corrigido literalmente imediatamente, então parece ótimo Ok, perfeito. Agora isso está corrigido. Acho que o último passo é começar a finalizar e terminar as coisas E então podemos e então podemos começar a realmente começar a festa . Você pode ver aqui. OK. Então, vamos dar uma olhada nessa pequena lista aqui embaixo. Definindo esta foto. Então você pode ver isso aqui. Não parece muito bom. Agora, se você se lembra de antes, temos a largura definida em um, dois, seis. Então, se mudarmos isso, isso mudará tudo e ficará 1 milhão de vezes melhor. Incrível. Está bem? E, novamente, podemos usar isso para vincular coisas diferentes, etc., etc Mas, obviamente, já mostramos como fazer isso, então não precisamos passar por isso novamente. OK. Agora, basicamente temos uma situação em que o site está praticamente pronto. Você sabe, obviamente, é um site muito básico. Não é nada muito louco, mas, obviamente, você vai passar muito mais tempo. Você vai passar por tudo. Nós realmente precisamos desse pequeno elemento ou não? Nós precisamos disso? Talvez possamos mudar a cor se quisermos. Podemos mudar a cor ou simplesmente excluí-la. Depende totalmente de você. OK. Lá vamos nós. Acabei de mudar a cor real da seção. E então podemos e, em seguida, podemos basicamente passar para as configurações. Ok, então vamos nos desconectar. Vamos adiar isso. Perfeito. Incrível, incrível, incrível. Lá vamos nós. OK. Então, nós temos isso. Isso parece bom. Isso parece bom. Fica rosa Mudanças em nosso vermelho, desculpe, novamente, vermelho. Continue entendendo errado. Carmesim, carmesim Lá vamos nós. OK. Ok, K. Então todo o resto parece bom. Obviamente, podemos vincular todos os botões e outras coisas, mas basta clicar nele e clicar na pequena engrenagem e, em seguida escolher o botão ou a página que deseja Todo o resto parece muito bom. Isso aqui. Obviamente, você pode mudar o texto, mudar as cores. Na verdade, você também pode criar uma seção CMS para esta seção, se quiser Às vezes, eu o uso se tiver mais de três artigos. Mas geralmente o que eu faço aqui, pois acabo de colocar os artigos mais populares aqui. Aqueles que eu quero que as pessoas realmente leiam, o que só ajuda a manter as coisas boas e organizadas. OK. Perfeito. Nós temos isso aqui. Sim, sim, podemos simplesmente adicionar isso como o CMS se quisermos da mesma forma que fizemos antes Mas sim, quero dizer, tudo parece muito bom. Então, vamos às configurações e abordamos algumas coisas importantes que você deve observar ao finalizar seu site. Basta esperar para carregar Muito rapidamente. OK. Em primeiro lugar, isso o levará à página geral. A primeira coisa que você precisa fazer é adicionar seu fabcon. Agora, um favicon só pode ter 32 pixels por 32 pixels, e seu clipe da web precisa ter 256 por 256 Com o fabcon e o clipe da web, mantenha-os super simples, porque se forem muito detalhados ou tiverem muita coisa acontecendo, parecerão muito estúpidos Não parece muito bom. Portanto, mantenha-os super simples. Em seguida, iremos para os formulários. Vá até aqui e, basicamente, coloque como, desculpe, vá aqui e adicione seu endereço de e-mail. Esse é o endereço de e-mail o qual todos os seus formulários serão enviados. Por exemplo, se alguém entrar em contato com seu formulário de contatores, é para lá que o e-mail será enviado e, em seguida, certifique-se de clicar em Salvar Então vamos aos planos. Então, se você quer CMS e eu tenho CMS para cada um dos meus sites com o Webflow, $29 por mês cobrados mensalmente, é um pouco mais barato se você construí-lo anualmente, mas vale muito a pena, porque economiza Se você não quer o CMS, mas ainda quer um domínio personalizado, a opção básica provavelmente é a melhor para você Mas se você quiser apenas, como um domínio de fluxo da web, basta clicar no plano inicial. O plano inicial Então, obviamente, estou no CMS, o pacote CMS. Mas com o plano inicial, o problema é que, se você não tem um domínio real conectado ao seu site, como agência, as pessoas não vão te levar muito a sério Então, isso vai impedir você possa cobrar muito dinheiro. Então, sim, e obviamente, você pode conectar seu domínio e pronto, mas espero que tenha gostado de ver este site ser construído. Se você tiver alguma dúvida, me avise. Mas sim, vamos passar para a próxima seção do curso, e nos vemos lá. 62. (Áudio remasterizado e 16: Ok, então vamos construir esse site de comércio eletrônico do zero no Webflow Agora, a primeira coisa que precisamos fazer é configurar nossas bibliotecas. Agora, eu já tenho algumas bibliotecas baixadas neste site. Esses são apenas os meus favoritos, mas você pode escolher os que quiser. Os que eu mais gosto geralmente são os que têm a maior seleção. Então você verá aqui que, você sabe, este tem cerca de 283 elementos diferentes Este tem 226. Este tem 200. Então, eu geralmente escolho esses, só porque há muitas opções. Há tantas opções, desculpe. Alguns dos outros não têm tantas opções, então é um pouco menos atraente para mim. Mas depois basta instalar a biblioteca clicar no site em que deseja instalá-la. E então, acho que, para mim, ele não vai mais me deixar instalar só porque eu já tenho muitos carregados, mas para você, deve funcionar, e eles estão todos gratuitos, pelo menos no momento da gravação. Então, sim, você pode conferir esses. Vamos apenas carregar as coisas. E vou mostrar como criar um site, um site de comércio eletrônico, comércio eletrônico, para sua marca ou para a marca Ear em tempo real. Não vai demorar muito. Vai levar talvez cerca 45 minutos a uma hora, no geral. E vamos te mostrar cada passo. Vai ser super fácil. Então, a primeira coisa que vamos fazer é acessar nossa biblioteca de ouvidos e adicionar uma barra de navegação Ok, então vamos adicionar essa barra de navegação. E uma coisa a dizer, e bem, vamos adicionar uma foto também bem rápido. Uma coisa a dizer é que, neste momento, estamos literalmente nos concentrando apenas na criação da estrutura do site. É assim que começamos todas as vezes. A estrutura do site é o esqueleto estratégico do site Sem a estrutura, sabe, o site pode ser super bonito, mas a estrutura é a estratégia, ok? Então, precisamos ok, acho que para qualquer site de comércio, isso poderia funcionar, mas também quero uma imagem que realmente pareça perfeita, sabe? Vamos tentar esse. Vamos ver se isso funciona. Mas acho que isso é um pouco complicado demais. Mamãe. Sim, não tenho certeza. Não tenho certeza se gosto ou não. Vamos tirar isso, vamos deletar isso porque eu não quero que seja muito complicado. Ok, isso tem muitas e muitas imagens diferentes lá dentro. Ok, eu definitivamente não quero isso. Eu definitivamente não quero isso. OK. Sim, vamos mudar isso porque não queremos que seja, queremos apenas uma imagem. Como podemos encontrar apenas uma imagem? Vamos encontrar um bom herói com apenas uma única imagem. Geralmente, essa é uma seção bem legal para esse tipo de coisa. Eu gosto dessa biblioteca por esse tipo de mínimo cinco, mas parece que não há nada lá Vamos lá, vamos até esses. Ah. Lá vamos nós. Isso parece muito legal. Mm, vamos tentar isso. Vamos tentar isso. Isso parece muito bom. Incrível. Ok, não sei se gosto de estar do lado direito. Acho que o alinhamento da mão direita, se você fez a aula de alinhamento no início do curso, parece muito estranho Acho que vou levar esse pedido para a esquerda porque parece melhor. Então, vamos pegar isso ou ir para a esquerda. E basta clicar nesse elemento e pegar uma linha à esquerda, sair da linha, sair da linha, pegar esse botão . Lá vamos nós. Perfeito. Quero dizer, isso parece dez vezes melhor. A razão pela qual isso parece melhor é porque a maioria das culturas lê da esquerda para a direita, de cima para baixo. Então, é apenas mais confortável. É mais familiar para nós. Eu sei que algumas religiões e outras culturas leem de forma diferente, mas para a grande maioria dos casos, você sabe, essa será a melhor opção para você. Então, vamos adicionar outra seção. Então, se você se lembra, quando estamos criando um site, a página inicial deve responder a três perguntas. Número um, estou no lugar certo. Então, na primeira seção, a seção de heróis, você precisa dizer a eles que eles estão no lugar certo. Você não vai perder seu tempo. A segunda seção, que acabamos de adicionar lá, é como uma seção em destaque, certo? É como construir confiança, como se tivéssemos aparecido em, você sabe, este lugar, este lugar, este lugar, e isso vai mostrar que você é sério e que você é confiável A próxima seção será, você sabe, em última análise, para o site de comércio eletrônico, mas para outro site , tudo bem, o que você pode me oferecer? O que você pode realmente fazer por mim? Então, do ponto de vista do comércio eletrônico, estamos bem, vamos adicionar isso ao Sim, o que você encontrará é com alguns e vamos limitar isso a quatro. Com algumas das bibliotecas que você usa, elas sempre gostam de definir determinados elementos como 126 por algum motivo. Não sei por que eles fazem isso. Não me pergunte, eu não construí essas bibliotecas, mas às vezes você precisa ajustar a largura de 126 de acordo com a ordem. Então, se algo não parece certo, basta dar uma olhada, e essa é provavelmente a resposta. Então, sim, o que eu estava dizendo sobre a seção? Então, sim, primeira seção, estou no lugar certo. Você precisa mostrar a eles que eles estão no lugar certo desde o primeiro e segundo, eles chegarão ao seu site. Em segundo lugar, posso confiar em você? Esta será uma seção em destaque ou, talvez, avaliações de clientes ou algo parecido. Então, por fim, o que você pode realmente fazer por mim? Então, adicione algum tipo de produto, adicione algum tipo de serviço ou qualquer outra coisa. Obviamente, para qualquer site de comércio, queremos mostrar os produtos E, no momento, estamos usando a seção Conheça nossa equipe. Mas vamos transformar isso em uma seção de produtos bem rápido. Lembre-se de que, no momento, estamos literalmente focados em ver aqui, este é 126 automático e parece muito melhor. No momento, não estamos focando no texto, não estamos focando nas imagens Você pode ver que a imagem tem um pouco de preenchimento, então acabamos de retirá-la. Estamos nos concentrando apenas na estrutura real do site. A história que estamos tentando contar. Não queremos nos envolver, você sabe, em criar muitas imagens diferentes e alterar demais as imagens agora. No momento, estamos apenas nos concentrando em implementar a estrutura do site. Porque depois disso, isso nos ajudará a concluir as coisas dez vezes mais rápido, e literalmente criaremos um site em tempo real em 45 minutos a uma hora neste mesmo vídeo. Então, eu vou te mostrar que isso é possível. OK. Então, temos nossas primeiras seções na página inicial. Vamos adicionar uma seção de blocos na parte inferior apenas para que possamos mostrar isso Ok, então você pode ver que isso parece um pouco estranho, certo? Então você pode ver que isso parece um pouco estranho. Vamos mudar isso para zero. Bah, bah, bah, bah. Você pode ver esse título Desculpe-me O título é 126. Mude esse automóvel. Bom. OK. Isso também é 126. Vamos mudar isso. OK. Perfeito. Vamos mudar a margem disso para zero. Ideal. Temos a seção de bloqueio, temos isso, isso está parecendo realmente incrível. Eu amo a aparência disso . OK. Vamos mudar um pouco o tamanho disso para acertar a estrutura. Quero dizer, está parecendo muito bom. Do ponto de vista estrutural , parece muito bom, ok. Vamos adicionar um exemplo de bloco. Vamos dar uma olhada nisso. Como uma página de bloqueio. Novamente, vamos adicionar uma barra de navegação e um rodapé. Nós vamos me criar. Vamos criar uma barra de navegação e um rodapé universais posteriormente no curso. Então não se preocupe. Eu vou te mostrar como fazer isso. Mais tarde neste vídeo, devo dizer? Então não se preocupe com isso. Eu vou te mostrar como fazer isso. E o que isso fará é permitir que você altere algo em uma página, e sua barra de navegação e foto serão preenchidas automaticamente em todas as Então, sim, vamos começar a adicionar. Ok, eu acho que esses são muito bons. Gosto muito da estrutura. Acho que esse é o melhor de todos que eu já vi, e já usei bastante, mas esse parece ser o mais profissional e envolvente. Certifique-se de que esteja totalmente à esquerda para que esteja conectado ao corpo do site e não à seção. OK. E agora vamos. Ok, então tudo isso já foi construído para nós. Nós já fizemos isso. Talvez possamos retirar algumas coisas, então talvez possamos retirar alguns desses colaboradores porque são muitos, para ser honesto Mas sim, em relação ao blog real, o que faremos é configurar um CMS para o blog ou para os produtos um pouco mais tarde neste vídeo, que eu possa mostrar como fazer isso Como você pode ver aqui, um CMS é basicamente como uma coleção de coisas semelhantes Então, por exemplo, neste caso, artigos ou produtos, e você pode armazenar informações. Então, por exemplo, aqui Veja, você pode armazenar informações para que elas criem páginas exclusivas para aquele artigo ou produto específico sem precisar criar uma nova página do zero. Está bem? Eu vou te mostrar como fazer isso mais tarde, mas é super útil. O motivo pelo qual isso é muito útil é que permite criar várias páginas em uma fração do tempo, e todas elas têm exatamente a mesma aparência. Então, eles estão todos perfeitamente de acordo com a marca. Você não precisa se preocupar com tamanhos ou algo parecido Super super benéfico. Eu absolutamente adoro usar o sistema CMS. E eu vou te contar um pouco mais sobre isso um pouco mais tarde, mas eu acho que é muito útil, muito útil. Você pode ver aqui, eu o uso para os artigos do site da Lancaster Academy Nós o usamos para páginas de produtos. Nós o usamos para minha agência de branding. Nós o usamos para o projeto real, como os projetos reais nos estudos de caso que criamos. Mas aqui nós o usamos apenas para conteúdo. E é muito útil, porque você não precisa gerenciar várias páginas, você só precisa gerenciar uma única coleção, o que é muito bom. Eu vou falar um pouco mais sobre isso um pouco mais tarde, mas eu só quero destacar o quão importante é. Acho que tenho cerca de 47 artigos diferentes no momento. E, obviamente, temos a página principal do produto, o artigo real. Se estiver em destaque ou não, não precisa ser tão complicado para você pessoalmente. Você não precisa fazer isso de forma muito complicada. Mas, geralmente, as únicas coisas que você vai usar de tudo isso, para ser honesto, quando começar, é texto simples, texto rico, uma imagem, talvez um vídeo, e é mais ou menos isso. Você realmente não precisará de mais do que isso para ser completamente brutalmente honesto E então, tudo o que você faz é conectar o título. Para o título e os Ls, por exemplo, aqui, conectamos o tópico do artigo a isso, então, neste caso, é a marca, a hora certa Então, apenas pequenos detalhes que mudarão ao longo de cada artigo, mas você pode usar um produto ou qualquer outra coisa, e basicamente adicioná-lo à página sem realmente adicioná-lo à página. Então você simplesmente digita e ele faz isso por você, o que é muito inteligente Mas você pode ver aqui que, você sabe, para meus artigos, temos, você sabe, talvez cerca de 15 elementos diferentes que estão todos trabalhando juntos. E eu não preciso construí-los novamente separadamente repetidamente. Eu só faço isso uma vez, e pronto. Então, vamos voltar a criar nosso site de comércio eletrônico. E falaremos um pouco mais sobre CMSs mais tarde. Mas vou fazer coleções de CMS mais tarde. Mas, por enquanto, vamos excluir alguns deles porque não acho que precisemos de três colaboradores. Vamos excluir os ícones de mídia social. Vamos dar uma olhada nas outras páginas que podemos criar. Ok ok. Vamos criar a página de artigos do blog. Então essa era a página real do artigo. Esta página contém todos os artigos juntos. Então, esses são, você sabe, todos os diferentes artigos que você tem em seu site em uma única página para que as pessoas possam realmente encontrá-los, ok? Então eu encontro seu artigo. Devo ver e encontrar o melhor artigo para eles. Acho que essa provavelmente será a melhor opção. Vamos conferir mais algumas só para ver. Mas acho que, para ser totalmente honesto, acho que isso poderia funcionar, mas também, sim, costumo manter as coisas bem simples. Costumo usar os mesmos layouts o tempo todo, só porque eles parecem muito bons Tipo, esse, pessoalmente, é meu favorito pessoal. Eu o uso em todos os meus sites, para ser honesto. Parece muito bom. Você pode ver aqui que parece um pouco estranho, então você pode ver que é um problema de um, 26 novamente. Então, basta clicar aqui. Isso pode não acontecer com você, mas sempre acontece comigo por algum motivo. Não tenho certeza se talvez sejam algumas configurações do meu site, mas sim, só para ter isso em mente. Novamente, 126. Literalmente vou registrar o problema 126, porque é literalmente o problema que mais surge Pronto, mas não demora muito para consertar, então está tudo bem. OK. Isso é algo bom? Sim. Nós realmente precisamos da opção de guia acima? Talvez, mas talvez não, eu poderia deletar isso um pouco mais tarde. OK. Ok, mas nós temos isso agora. Então, vamos fazer a página Contact Dust. E, novamente, pessoal, lembram que estamos apenas construindo a estrutura do site agora? Não estamos fazendo mais nada? Não nos importamos com cores, não nos importamos com a fotografia, não nos importamos com as imagens, não nos importamos com o texto Não nos importamos com nada além da estrutura do site. O que isso vai fazer é nos ajudar a realmente criar o site, então faça cerca de 80% do trabalho muito rapidamente para que possamos nos concentrar nos outros aspectos do site. Então, por exemplo, as imagens, por exemplo, a redação, porque os direitos autorais deveriam vir por último, na minha opinião, porque isso é o que realmente deveria levar Você pode ver aqui novamente, problema 126. Isso literalmente acontece demais. Sim, apenas construir a estrutura do site ajuda você a ver o site, como ele pode parecer. E então você pode descobrir as coisas e mudar as coisas e ajustar as coisas conforme achar melhor Mas fazer isso, você sabe, muito cedo é muito, muito útil. Então, a política de privacidade e, você sabe, entrega e envio e, você sabe, isenções de responsabilidade e outras coisas, esses tipos de páginas são muito fáceis de criar E, basicamente, acho que a melhor maneira de realmente fazer isso não é usando os modelos, mas apenas adicionando os próprios textos. Eu acho que isso só precisa ser mantido super simples. Tentando complicar demais. Isso vai deixar as pessoas um pouco confusas e é simplesmente desnecessário, porque convenhamos. Quem realmente lê as seções de privacidade, de qualquer maneira. A política de privacidade, as isenções de responsabilidade, você sabe, todas essas coisas Está lá apenas para questões legais. Então, termos e condições e outras coisas, você pode simplesmente adicionar os elementos separadamente. Então, adicione uma seção. Em seguida, basta adicionar o recipiente. Bem, você pode adicionar antes do início, mas acho que adicionar o contêiner é melhor só porque o torna responsivo Sim, então adicionamos um cabeçalho. E então podemos adicionar o hum, podemos tentar com um parágrafo, mas, para ser honesto, eu só quero mostrar a diferença entre adicioná-lo com um parágrafo e adicioná-lo com texto rico, apenas para que você possa entender a diferença entre os dois elementos. Ok, então temos o cabeçalho, coloque a política de privacidade. E só para que você saiba, eu adicionei um link no curso atual. Você deve conseguir encontrá-lo nos diferentes links da política de privacidade, obtendo políticas de frete e devoluções gratuitas , todas essas coisas. E geralmente é praticamente o mesmo site. Mas é muito útil ter todos esses links. Obviamente, basta adicionar todos os detalhes e outras coisas do seu site. E então você pode, hum, sim, simplesmente tirar todas as suas coisas legais do caminho. Eles tentam te cobrar por, sabe, documentos oficiais? Você precisa deles no início do seu negócio? Eu diria que não. Eu acho que, você sabe, se você os está criando para um cliente ou está criando o site para si mesmo, e está apenas começando, você realmente precisa de todas essas grandes coisas legais em vigor? Você sabe, talvez você esteja em um setor específico onde você está bem. Então, sim, está tentando fazer com que realmente compremos coisas, mas não precisamos delas. Então, basta clicar em “ Não, não quero uma política de privacidade profissional e depois gerá-la. Agora, aqui, você não precisa realmente colocar seu endereço de e-mail correto. Em alguns casos, você sim, mas neste não, porque você pode simplesmente adicionar isso ao seu site de duas não, porque você pode simplesmente adicionar isso ao seu site de duas maneiras diferentes. Então, a primeira maneira é tentar copiar e colar isso. Agora, descobri que no meu Safari, às vezes isso não funciona, e às vezes no Chroma não funciona Então, às vezes você pode copiar para a prancheta. E o que isso basicamente faz é isso basicamente significaria incorporar os dados, seja, se você não certeza do que isso significa, não se preocupe Tudo gira em torno de HTML e código. Você não precisa saber codificar, mas pode basicamente copiar esse código em uma caixa de incorporação dentro do Webflow, que é mais ou menos como adicionar código personalizado Você não precisa aprender a fazer isso. Só quero mostrar o e-mail que você recebe quando eles realmente enviam a política de privacidade , para que você possa vê-la. Ok, aí está. Então, eles basicamente enviarão você de volta para a mesma página. Então, o que eu geralmente gosto de fazer. Mas uma coisa boa sobre isso é que, na verdade, ele tem todos os links para diferentes outros sites que eles têm, então, se você precisar de mais alguma coisa, você pode basicamente colocá-la lá, muito, muito útil. Então, você acabou de verificar a parte inferior do e-mail e ele deve ter um link para todos os diferentes formulários e políticas que eles podem criar para você. Agora, a maneira como eu gosto de adicionar a política ao site é basicamente gerando arquivos. Assim, você pode gerar um arquivo doc X, que é basicamente apenas um arquivo do Word. E então, quando você abre, deixe-me gerar isso no Chrome. Por alguma razão, mexe um pouco com o safari. C, abra. Perfeito. Então, quando realmente copiamos e inserimos isso no site, se o fizermos em uma seção de parágrafo, essa é a seção aqui Se fizermos isso em uma seção de parágrafos, parece terrível, certo? Não está formatado, e a razão para isso é que as seções de parágrafos não são destinadas a grandes blocos de texto Eles são feitos para, você sabe, uma pequena quantidade de texto embaixo um cabeçalho ou um pouco de texto, você sabe, talvez embaixo de um vídeo, por exemplo, não sejam para longos blocos de Então, o que realmente precisamos usar é algo chamado bloco de rich text. Então, basicamente adicionamos isso aqui. Você pode ver que isso é muito diferente. E quando copiamos e colamos exatamente o mesmo texto, tudo está formatado e fica muito melhor Isso é, você sabe, muito mais fácil. Você sabe, você pode ver que o espaçamento precisa um pouco de trabalho, mas no geral, parece muito melhor, e você sabe, você pode ficar muito mais feliz com Agora, algo a observar quando você está realmente usando esses provedores de políticas gratuitas e criadores de políticas, você sabe, de documentos. Às vezes, adicione uma política gratuita de privacidade uma espécie de política de privacidade gratuita, um site e um artigo com conselhos. Então, eles criarão um link para seu próprio site, que não queremos fazer. Portanto, sinta-se à vontade para excluir isso. Mas, sim, você basicamente consegue, você sabe, tempo para ler isso e se certificar de que não há nada que esteja sendo dito que não deva ser dito por você ou sua empresa. Ok, então a página A US para qualquer site de comércio. Novamente, adicionaremos a barra NAF. Vamos adicionar a forragem. E lembre-se de que criaremos barras NAF universais e rodapés universais um pouco mais tarde, para que sejam iguais em todo o site E, novamente, vamos nos concentrar apenas na estrutura agora. Apenas tenha isso em mente. Eu sei que o site no momento não se parece com nenhum site de comércio, mas, no final, será. E isso só vai levar cerca de 45 minutos a uma hora. Ok, então vamos adicionar a Seção aqui. Então, a página Sobre nós do site de comércio eletrônico N precisa contar uma história, ok? Estamos dizendo às pessoas por que você deve comprar de nós, porque há muitas outras pessoas ou marcas que você pode comprar praticamente do mesmo produto. Você sabe, poucos produtos são muito exclusivos. Então, por que você deveria comprar de nós? O que nos torna especiais? Podemos fazer nossa marca parecer mais especial contando uma história. E essa é uma das coisas mais poderosas. Então, se você acessar, por exemplo, site da Rolex, você sabe, eles contam uma ótima história em relação a cada um de seus relógios, e , você sabe, parece que as imagens e Isso simplesmente faz muito sentido. E você pode ver por que eles são uma marca premium. Para este site, obviamente, você sabe, não teremos imagens da Rolex, mas definitivamente ainda podemos contar uma história Então, o que estou tentando fazer aqui é criar uma pequena página de produto. Portanto, a primeira seção é a seção Haro. Vamos contar um pouco, veremos um pouco sobre o que nos torna únicos lá. E então vamos adicionar uma seção aqui para os produtos. Agora, podemos usar essa seção de equipe. Tudo bem. Tem uma estrutura muito boa. Vamos apenas retirar esses elementos. Aqui. OK. Vamos simplesmente decolar. Sim. O espaçamento aqui é muito ruim, então vamos mudar isso. Então, na verdade, não precisamos de tudo isso. Vamos ser, novamente, um, vamos pegar o u, vamos pegar o que você faz primeiro, só para simplificar para você. OK. Primeiro, vamos organizar a lista de forma que, para que possamos obter quatro itens, eu só queira quatro itens. Eu só quero quatro produtos. Então, eu realmente não quero, você sabe, toneladas de toneladas de produtos lá. Então, vamos adicioná-los novamente em uma seção. OK. Em seguida, podemos adicionar um contêiner. E então, na verdade, talvez nem precisemos fazer isso. Estou tentando pensar na maneira mais fácil de fazer isso por você. OK. Acho que mantemos as coisas simples, na verdade. Acho que simplesmente mantemos as coisas simples. OK. Vamos, uh, isso. Vamos ter isso aqui. Essa grade. OK. Na verdade, também não acho que essa seja a melhor maneira de fazer isso. OK. Então, agora vamos adicionar. Então, agora vamos adicionar alguns produtos. Então, vamos retomar a seção de equipe. Seja um pouco criativo. OK. Então, obviamente, a formatação disso é básica Vamos decolar aqui aquela que parece dez vezes melhor. Vamos tirar um pouco disso. Na verdade, vamos tirar esses botões. Vamos reduzir o espaçamento. Ter os oito produtos geralmente é bastante, então vamos deixar isso de lado. OK. Lá vamos nós. Cai bastante. Obviamente, não precisamos dos ícones das mídias sociais porque isso é bobagem. Vamos dar uma olhada em Ok, isso parece muito melhor. E, obviamente, ainda parece uma página de equipe no momento, mas, na verdade, vamos adicioná-las novamente. Sim, isso faz muito mais sentido. OK. Sim, definitivamente não queremos ícones de mídia social. Mas vamos ver o fato de que essa é obviamente uma seção de equipe, mas vamos criá-la em uma seção de produto. Portanto, ao escolher seções, não veja as imagens reais na seção Veja mais em veja mais os elementos reais que estão na seção e no formato. Porque você sempre pode pegar coisas e colocar coisas como, você sabe, tirar coisas, adicionar coisas. Mas não sei se gosto dessa seção de perguntas frequentes. Sim, eu vou me livrar disso, eu acho. Essa seção de perguntas frequentes não é minha favorita. Vamos comprar um melhor, porque definitivamente existem outros melhores por aí. Ok, vamos bombar. Vamos adicionar isso aqui. Acho que isso vai parecer muito mais limpo e muito melhor. Lá vamos nós. Parece que sim. Isso parece muito melhor. mais limpo, muito mais fácil de ler. Perfeito. E esse tipo de animação levaria literalmente, alguém, você sabe, talvez uma hora pelo menos ou 2 horas pelo menos para fazer esse tipo de animação, enquanto, você sabe, a resposta na seção de perguntas frequentes é, você sabe, meio que se revelando Literalmente, leva cerca de 2 segundos para fazer aqui. É tão fácil. E é isso que torna o fluxo na web tão bom. Isso é o que literalmente torna o elemento de construção do site tão rápido e vai economizar muito tempo. OK. Ok, vamos adicionar isso aqui. Então, novamente, temos a seção, a seção parece boa. Vamos adicionar todas as diferentes imagens e outras coisas mais tarde. Mas no momento, estamos nos concentrando apenas nas estruturas das seções, ok? A estrutura das páginas. OK. Agora vamos para a parte interessante e adicionar uma página de produto. Vamos adicionar uma página de produto real e ver como isso vai se desenrolar Porque uma coisa é uma coisa sobre o web floor, são bibliotecas e modelos de web floor, eles ainda não têm um modelo focado em produtos ou comércio eletrônico. Eles podem ter, no futuro, quando você assistir isso, eles podem tê-lo. Mas vamos criar uma página de produto aqui usando esse modelo de blog. E esse é literalmente o mesmo modelo de artigo que usamos antes. Mas acho que tem uma estrutura muito boa. Acho que se deletarmos essas coisas aqui, acho que fica um pouco melhor. Provavelmente podemos tirar isso, para ser honesto. Não tenho certeza se esses ícones sociais parecem bons. Mas sim, vamos realmente tirar isso e tirar isso. OK. Então, o que estamos fazendo agora é criar a seção de produtos. Vamos trazer tudo de volta para que eu possa te mostrar exatamente como eu quero fazer isso. Então, vamos adicionar o item do produto lá. Nós vamos levar isso Uh, nós vamos tirar essas coisas, eu acho. Você pode ver aqui como é rolagem, e fica muito boa quando parece rolagem Acho que o que podemos fazer é provavelmente adicionar o título aqui. Então, na verdade, não precisamos dessa seção superior. Podemos simplesmente adicionar o título real. Em seguida, adicione o Mm mm mm. Ok, livre-se disso. Então, saímos com a parte inferior, que rola muito bem Talvez seja um pouco alto demais. Vamos adicionar dois. OK. É um pouco melhor. E você pode estar se perguntando: como isso se parece com uma página de produto? Confie em mim. Vai ficar incrível. Confie no processo. Então, vamos nos livrar disso. Nós vamos nos livrar de todas essas coisas. Tudo o que queremos é a função real por trás das compilações, certo? A estrutura, a página real em si. Então, queremos adicionar uma pequena grade aqui. Desculpe-me. E então vamos começar a adicionar imagens. Assim, podemos nos livrar de todo esse texto. Quero dizer, você pode manter o texto lá se quiser, mas para o propósito disso, eu não quero nenhum texto. Eu quero que isso seja tudo visual. OK. Vamos adicionar uma imagem aqui. Onde está a imagem? Basta digitar a imagem. Está bem? Ok, eu não tenho certeza do que aconteceu lá , mas, então, basta copiar e colar isso, tirar o preenchimento. Copie e cole isso no bloco de imersão, faça com que seja 100%. Perfeito. Lá vamos nós. Então, desde que a imagem seja quadrada, ela parecerá quadrada. Ok, então é só colar isso. E então, basicamente, o que temos aqui é, olha, temos o título real, temos o título real. Então, o nome do produto, o preço no lado esquerdo, que podemos editar em um minuto. Mas então temos uma boa rolagem de imagens , que parece ótima Parece muito elegante. Parece muito legal. Então, quero dizer, isso parece bom. Estou animado. Isso parece melhor? Dependendo. Dependendo do tipo de produto que você está vendendo, você pode simplesmente colocar, você sabe, a grade como uma coluna. Mas acho que para este caso, vou mantê-lo como 222 OK. Vamos começar a jogar com a lacuna. Então, eu estou apenas adicionando uma classe diferente, então, você sabe, você pode fazer isso como quiser, mas eu estou apenas adicionando uma pequena lacuna cada um dos elementos no lado esquerdo. Então eu tenho o título, então a página real do produto, então o cabeçalho. Então eu tenho um pequeno parágrafo apenas para explicar basicamente um pouco sobre o produto. Então eu tenho isso na verdade, então eu tenho o preço, e então tudo que eu preciso agora é como um botão, certo? Como um botão de compra, que posso adicionar abaixo. Ok, então copie o delt e cole-o nessa seção E então eu posso adivinhar que agora, obviamente, não é assim. OK. E então tudo que eu preciso fazer é adicionar Lá vamos nós. Perfeito. Perfeito, perfeito. Perfeito. OK. Quero dizer, isso ainda parece absolutamente terrível, mas vai ficar melhor. Eu confio em mim. OK. Podemos descobrir a aparência das coisas e outras coisas mais tarde, mas em termos de funcionalidade, parece uma página com ótima aparência. OK. OK. O que mais precisamos fazer aqui. Então eu acho que é basicamente isso. Acho que é mais ou menos isso. Talvez mamãe, talvez adicionemos algo apenas na parte inferior. Talvez adicionemos, tipo, uma seção adicional de produtos, talvez. Isso pode ser legal. Então, vamos dar uma olhada nisso. Acima daquele mendigo. Vamos conferir isso abaixo. Novamente, aqui, você pode ver que é o mesmo problema. Além disso, o que vou mostrar a você como fazer mais tarde é usar a função de componentes no fluxo da web, onde você pode basicamente criar um elemento universal, que muda em todo o site. Então, vamos usá-lo para o NapPar. Vamos usá-lo para o rodapé. Também vamos usá-lo para os produtos. Por exemplo, se você tem quatro produtos que está tentando vender, para, você sabe, um público específico ou durante uma época específica do ano. Você pode alterar os produtos, então os quatro produtos, você pode alterá-los, e isso mudará em todo o site. Assim, você não precisa alterar todas as páginas, o que é muito útil. Então eu vou te mostrar como fazer isso um pouco mais tarde no vídeo, mas por enquanto, fique ligado, e nós vamos falar sobre isso Então, aqui, vamos adicionar um pequeno apelo à ação abaixo, apenas para que pareça um pouco mais profissional. E então vamos dar uma olhada. Vamos dar uma olhada. 63. Criação de sites: site de comércio eletrônico (parte dois): Aqui. OK. Então, estamos examinando todas as páginas agora. Temos todas as páginas, mais ou menos onde queremos que elas estejam. Vamos começar, na verdade, mudando as coisas agora e realmente projetando coisas. Então, vou adicionar algumas imagens que eu meio que juntei, só para acelerar um pouco as coisas, eu acho. Então, vamos mudar o logotipo primeiro. Agora, isso não parece um site de comércio eletrônico no momento, mas vai se parecer muito mais um site de comércio eletrônico no final. Confie em mim Está bem? Então, vamos adicionar isso primeiro. Vamos adicionar isso aqui. Então, podemos mudar isso. Parece que foi esticado um pouco por algum motivo Vamos automatizar isso. Max Wit. OK. Não sei por que parece um pouco estranho Deixe-me clicar nisso novamente. Ok, é o acolchoamento, na verdade, aí está. Então você pode ver a rede de squash acolchoada. Lá vamos nós. Isso parece muito melhor. Incrível. Então, sim, nós temos isso, o que é perfeito. E então, tudo o que precisamos fazer é verificar os outros elementos agora. Então, agora o que temos basicamente é que temos toda a estrutura do site pronta. Agora, o que precisamos fazer é organizar os outros elementos do site. Por exemplo, alterando as fontes, você pode levar o tempo que quiser para brincar com isso e realmente conseguir algo com o qual esteja super feliz. Mas, para ser honesto, essa é a parte mais engraçada. Como se você tivesse feito a estrutura do site, que é o maior trabalho para ser honesto, como colocar as páginas do site estruturalmente no Agora é a parte divertida. Agora você pode experimentar coisas, criar, você sabe, fazer versões diferentes. Você pode adicionar imagens diferentes, escrever a cópia Essa é a parte que eu amo. Eu poderia literalmente passar o dia todo construindo um site para me divertir, sabe? Ok, vamos brincar um pouco com isso. Estou apenas mudando as fontes e outras coisas. Só estou brincando. O PT S parece um peso normal decente de 400 pesos. Isso parece certo. Então, eu só estou mudando as cores. Só estou brincando só para ver o que parece bom. Eu vou escolher, tipo, um belo tema em preto e branco. Mas eu meio que gosto de como quando eu passo o mouse sobre o botão na parte superior, ele meio que se transforma muito escuro, esse verde muito elegante OK. Ok, ok. OK. Agora eu vou mudar isso. Então, vou apenas criar um link. Você pode simplesmente acessar as configurações e alterar seu logotipo para voltar à página inicial. Isso é bastante normal. Obviamente, você também pode vincular todas as outras páginas. Obviamente, não vou passar por tudo isso com você, mas você pode fazer isso sozinho. próximo passo é basicamente começar a pensar em mudar o poço, criar os componentes, para que possamos realmente começar a criar nossos elementos internacionais. Então, por exemplo, aqui, você vê como isso é verde. Isso basicamente significa que a barra NAF será a mesma em todo o site Vamos fazer exatamente a mesma coisa com o rodapé. Então, vamos deixar tudo perfeito primeiro. Vamos morrer, adiar isso e excluir isso. Excluir de excluir. Ok, perfeito. Lá vamos nós. Não há acolchoamento lá, perfeito E então, tudo o que precisamos fazer é adicionar a página inicial. Tire isso. Oh, na verdade, isso é realmente muito, muito grande. Por que isso é tão grande? Tão louco. Por que isso é tão grande? Eu poderia realmente colocar isso de volta para 126. Na verdade, eu quero um problema de 126 lá. Ok, vamos fazer isso. Vamos deletar isso. Eu só quero que esteja bem e limpo. Não quero que esteja muito ocupado. Obviamente, você pode alterar o texto na parte inferior se realmente quiser, mas a forma de criar um componente é simplesmente selecionar o elemento, que você deseja que seja o mesmo em todo o site. Clique em, crie um novo componente e, em seguida, dê um nome a ele e clique em criar. E então, assim que fica verde, você sabe que é o mesmo em todo o site. Então você pode ver aqui, você pode ver aqui. Vamos usá-lo novamente para os produtos. Mas sim, só por enquanto, tenha em mente que isso vai te poupar muito tempo. Ok, vamos começar a brincar com as imagens e colocar as coisas no lugar certo Então, temos essa imagem aqui, o que é ótimo. Novamente, coloque isso em prática aqui. Ok, isso parece bom. Obviamente, base de moedas e todo esse tipo de coisa. Não queremos isso aí, então vamos mudá-los. Sim, vamos mudá-los um pouco. Então, podemos ter aparecido, como apareceu no Daily Mail, na CBS, no New York Times, só para dar um pouco de credibilidade Ok, isso parece bom. OK. Então, podemos começar a adicionar. Obviamente, podemos mudar os textos e outras coisas. Nós podemos, você sabe, isso é obviamente, você sabe, eu não vou abordar o aspecto de redação, mas, você sabe, obviamente, você pode organizar as coisas como quiser Além disso, ao criar seu site, certifique-se de usar os outros elementos do curso, como, por exemplo, as lições anteriores sobre, você outros elementos do curso, como, por exemplo, as lições anteriores sobre, sabe, design de sites, sobre, você sabe , fluxo na web, você sabe, fluxo na web, você sabe, como o curso intensivo sobre elementos de fluxo na web, para responder suas perguntas para obter as respostas que você precisa e para que seu site tenha aparência e sentindo, por exemplo, como usar texto, você sabe, os diferentes tipos de tipografia, você sabe, como criar sua paleta de cores, como usar sua paleta como usar sua Aqui, vou editar um pouco esses cantos para que correspondam ao botão no canto superior direito. OK. Perfeito. Ok, vamos começar a mergulhar nesta seção e criar nossa pequena variedade de produtos. Ok, legal. Então, vamos adicionar quatro. Perfeito. Lá vamos nós. Então. Vamos tornar isso super simples. Então, temos o sol lá. Incrível, incrível, incrível. Lá vamos nós, lá vamos nós, lá vamos nós. Ok, novos lançamentos. E, obviamente, você pode colocar o que quiser, mas isso é só, ok, vamos adicionar algumas imagens. Vamos apenas adicionar algumas sacolas. Isso é para uma marca de moda, um pouco de fotografia ousada. Uma coisa também é: se você está criando uma marca de comércio eletrônico e quer curtir o site, uma ótima aparência. fotografia do seu produto é literalmente a coisa mais importante. É praticamente a coisa mais importante se você quiser vender alguma coisa. E uma coisa que descobri, que é muito benéfica, é encontrar um cinza muito claro ou um azul muito claro e usá-lo como cor de fundo em vez de branco, só para parecer que como cor de fundo em vez de branco, ajuda a emoldurar as coisas e fazer com que pareçam super profissionais. Obviamente, então você pode, você sabe, adicionar o nome do produto e fazer todo esse tipo de coisa. Não vou perder seu tempo e passar por tudo isso. Mas veja aqui como, você sabe, agora temos os diferentes produtos organizados. Mas o que queremos fazer é criar um link para acessar a página real do produto. Então, no momento, se clicarmos nisso, não vai a lugar nenhum. Então, vamos pegar o bloco de links. Isso é um pouco problemático. Isso realmente não parece muito bom. Então, vamos ao bloco de links e, engraçado o suficiente. É 126 automático. Vamos clicar nisso. Lá vamos nós. Coisas boas. Agora temos que ir. OK. E então o que vamos fazer é literalmente duplicar isso três vezes e literalmente, copiar e colar isso, copiar e colar isso, copiar e colar isso, e então vamos embora Então, temos tudo com um bloco de links para que, se quisermos criar um link para uma página de produto, possamos. Eu não gosto dessas linhas abaixo do texto, então vamos simplesmente desligá-las OK. Perfeito. E então, vamos ver que isso é simplesmente, você sabe, escolher a página que você deseja e, em seguida, ela será vinculada automaticamente a essa página específica. E então, quando chegarmos a esta seção, basta adicionar uma boa imagem. OK. Incrível. Perfeito. E então, obviamente, estamos apenas escrevendo um pouco sobre a história da marca e fazendo com que as pessoas aprendam mais sobre a marca neste momento. Está bem? Ok, então vamos dar uma olhada nisso. OK. Está parecendo muito bom. OK. OK. E eu literalmente copiei e os textos de cima o botão e outras coisas colei os textos de cima, o botão e outras coisas para não precisar criá-los novamente Tipo, eu só quero manter tudo consistente. E você pode literalmente copiar e colar como se estivesse editando em um documento do Word. É super fácil. Você pode fazer isso com todos os botões. Eu não vou desperdiçar seu tempo e, você sabe, realmente entrar nos detalhes mais íntimos, mas, você sabe, você pode fazer isso no seu próprio tempo, e eu só quero te mostrar uma vez para que você entenda como fazer isso Ok, então temos tudo isso. Ok, vamos editar o blog só porque , obviamente, esse bloco. Essas postagens de bloqueio realmente não parecem muito boas no momento. Lá vamos nós. Então, basta torná-los um pouco mais marcantes, eu suponho. Incrível. Está parecendo bom. Ok, perfeito, perfeito. Perfeito. Ok, moda, moda fashion. Incrível. OK. Agora estamos apenas dando os retoques finais. Estamos literalmente querendo, você sabe, colocar as coisas no lugar, colocar todas as imagens no lugar certo Você sabe, mude um pouco de texto, e não precisamos dos colaboradores Acho que não parece tão limpo. Mude isso para preto ou, tipo, cinza ou algo assim. Sim. Apenas mantenha as coisas simples e simples. Mas sim, neste momento, estamos literalmente brincando com as coisas, e eu poderia passar horas fazendo isso, literalmente, apenas, você sabe, fazendo cores diferentes e, você sabe, experimentando coisas diferentes. É literalmente minha parte favorita de todo o processo. Eu absolutamente amo isso. Então, sim, tome seu tempo com isso. Você sabe, você fez a estrutura. Essa é a parte mais importante. Bem, ambos são igualmente importantes, mas a estrutura é importante porque , na verdade, ajudará a criar a experiência para o usuário e a levá-lo aonde você quiser. Mas agora você pode se divertir com a estética real e a aparência real do site É aqui que as coisas ficam super interessantes. Então, aqui está a página do artigo, então, novamente, você pode simplesmente mudar isso. Eu vou te mostrar como configurar um sistema CMS mais tarde É super simples, super fácil, então não se preocupe. Mas vou te mostrar como fazer isso para essa marca em particular daqui a pouco. Não precisamos de colaboradores. Eu não acho. Definitivamente, precisamos assinar nosso boletim informativo porque a lista de e-mail é fundamental. Então, temos tudo isso. Nós temos tudo isso. OK. Agora, não precisamos mais dessas barras de navegação porque temos nossa barra de navegação universal, que podemos fazer para garantir que você a conecte ao rodapé do corpo, pronto E então estamos prontos para ir. E então podemos fazer exatamente a mesma coisa com a barra de navegação na parte superior, o que vai ser ótimo E então vamos lá. Então, literalmente, aquela barra de navegação e esse rodapé serão os mesmos, não importa onde vamos no site Sempre será o mesmo. Sempre nos dará a mesma aparência, a mesma sensação. Se mudarmos alguma coisa, isso também mudará nas outras páginas do site. Novamente, você pode ver aqui, normalmente teríamos que criar a barra NAV do zero e fazer isso de novo e de novo e de novo e depois alterá-la de novo e de novo e de novo, mas você não precisa fazer isso ao criar o componente Portanto, certifique-se de fazer isso, você economizará muito tempo. OK. Então, aqui, obviamente, você pode mudar a cor das coisas se você realmente quiser. Obviamente, para isso, vou ficar com ele. Eu só vou mantê-lo preto. Você sabe, mude seus detalhes, todo esse tipo de coisa. Eu só vou mudar isso, então é um pouco mais sobre a marca. Perfeito. Ok, legal. Isso está feito, você sabe, L, estamos literalmente construindo um site em 45 minutos a uma hora, e está praticamente pronto agora, você sabe. Parece que não está muito longe. Ok, vamos adicionar isso. Então, em tempo real, vamos dar uma olhada aqui. Então, bolsas incríveis. Obviamente, vamos dizer às pessoas o quão incríveis são nossas malas. Vamos adicionar aqui uma nova imagem. OK. Basta adicionar essa imagem. Para mostrar os fundadores desta empresa de bolsas. São fundadores adoráveis. OK. Então, estamos em um ponto que literalmente temos que criar as sacolas, as sacolas e outras coisas novamente. Eu não quero fazer isso. Quero ser o mais preguiçoso possível quando se trata de criar e gerenciar o site Então, o que vamos fazer é criar um componente. Então, vamos voltar para a página inicial enquanto já fizemos esse trabalho antes. Vamos pegar a seção real, ok? Vamos nos certificar de que é o correto e, em seguida, clicar em e criar um novo componente. Então, veja. Ok, então pegue o mais próximo do corpo. Em seguida, clique em componente. Então vamos para os produtos ec, lá vamos nós. Não, bam bam. Em seguida, vamos voltar para a página. Então, criamos o componente agora. Isso será o mesmo em todas as páginas do site. Está bem? Então, vamos mergulhar e dar uma olhada nas cargas de cifa OK. Então, você sabe, precisamos adicioná-lo nesta página também. Então, vamos tirar isso porque não precisamos disso. Seção, exclua. E então vamos pegar isso. Aí vamos, perfeitos. Incrível, incrível, incrível, incrível, incrível, incrível, incrível. Lá vamos nós. A, b, bum, bum, bum pa, ba, ba, ba, ba, put out, bum put. Vamos dar uma olhada nisso. Olha isso. OK. acenar para que isso carregue um pouco. Uma coisa que descobri é que o fluxo da web tende a funcionar melhor no Safari, e não sei por quê Desculpe, funciona melhor no Chrome. Não funciona tão bem no Safari, e eu estou trabalhando no Safari agora E sim, é um pouco mais lento, mas não é tão ruim. Ainda funciona, mas é um pouco mais lento. Sim, então você pode ver que eu usei o componente e o coloquei diretamente, e é o mesmo em todo o site Útil. Portanto, certifique-se de fazer isso se quiser ter a mesma seção ou a mesma parte do site em vários lugares diferentes do site. Certifique-se de adicioná-lo , pois literalmente economizará muito tempo e energia, pessoal. Confie em mim OK. Então, estou apenas adicionando uma pequena seção de contato aqui. Ok, basta nos conectar à página de contatores. Perfeito. OK. Agora, novamente, não precisamos criar a foto novamente. Podemos literalmente simplesmente excluir isso e obter isso, adicionar isso da seção de componentes. Lá vamos nós. Incrível. Isso está parecendo muito bom. Você consegue se lembrar de como isso não se parecia nada com um site de comércio eletrônico? Agora está realmente parecendo um site de comércio eletrônico? A magia do tempo, do tempo e da paciência. OK. Então, podemos ver aqui agora, obviamente, você sabe, o texto e outras coisas podem ser alterados, mas, você sabe, temos um bom começo aqui. Essa será a página real do produto. Então, isso provavelmente será o que é, você sabe, importante corrigir. Então, temos os produtos adicionais que existem? Isso é bom. Vamos começar a melhorar isso e começar as coisas Então, novamente, com isso, você pode ver como isso não está no corpo. Suba no corpo. Lá vamos nós. Agora está melhor, e essa também. Então, novamente, não precisamos fazer isso novo. Oh, espere um segundo. Já fizemos isso antes, certo? Na verdade, já fizemos essa seção antes. Não precisamos fazer essa seção novamente. Então, vamos voltar. E, novamente, é assim que devemos trabalhar, pessoal. Portanto, precisamos ter certeza que economizaremos tempo no futuro, porque seu eu futuro agradecerá por isso. Então você precisa voltar para a seção, criar, então basta selecionar a seção que você deseja copiar. Em seguida, crie o, na verdade, estou procurando por ele. Na verdade, estou procurando por isso aqui. Não sei por que estou fazendo isso. OK. Vamos, isso está errado. Ok, o que eu estou fazendo? O que eu estou fazendo? Scott, recomponha-se. Então, o que eu fiz lá foi basicamente adicionar o rodapé nessa seção em vez de criar um componente Então, em vez disso, selecionarei, criarei um novo componente, entre em contato conosco. Lá vamos nós. Agora temos isso em verde. Agora podemos acessar a página do produto e adicioná-la ao final da seção, que está aqui. Lá vamos nós. E podemos simplesmente adicionar isso aqui, e tudo vai ficar bem. Perfeito. Lá vamos nós. Agradável e limpo. Parece ótimo. OK. Agora, vamos nos livrar dessa forragem feia e instalar nossa boa forragem ou nossa forragem ou Ok, incrível. E agora vamos começar a refinar isso e organizar isso, porque acho que só precisamos colocar algumas imagens aqui do produto e organizar tudo isso. OK. Já tenho algumas imagens organizadas. Vamos dar uma olhada neles. Lá vamos nós. Eles devem ter uma aparência muito boa. Acabei de comprá-los aqui e um tipo de modelo online. Então, novamente, esse não é o produto que eu realmente possuo ou algo assim. Acabei de encontrá-los online, então achei que seriam muito legais de usar só para mostrar a vocês. OK. Então, nós temos isso. Basta adicionar essas imagens. Muito simples. Você pode ver agora que a página está começando a ganhar vida, certo? Só por causa das imagens, vamos adicionar mais duas Acho que cerca de seis imagens está quase certo. Lá vamos nós. Aqui vamos nós, vamos lá vamos nós. OK. Incrível. OK. Coisas boas. Parece bom. Parece bom. Parece bom. Essa bolsa parece muito grande, na verdade, quando ela a está segurando. Eu não sabia que era tão grande. Ok, incrível. Ok, Button, vamos roubar esse botão de contato e colocá-lo lá E vamos mudar isso agora. Obviamente, não iremos para a página de contato do DS. Nós recorreríamos a, você sabe, um processador de pagamentos ou ao plano de comércio no fluxo da web, que abordarei com você um pouco mais tarde. E custou um pouco mais, mas definitivamente é um bom investimento se você fosse uma marca de comércio eletrônico. OK. Então, sim. Ok, o preço real. Não vamos distribuí-lo por um preço muito barato. Nós realmente não precisamos disso. Nós realmente não precisamos da seção, não é? Sim. Vamos nos livrar disso, mas depois podemos adicionar, como estoque limitado ou algo aqui, apenas para criar um pouco de urgência Mas essa cor rosa não está realmente funcionando para mim, então o que eu quero fazer é usar como um azul ou algo assim, como um azul frio. Acho que provavelmente vai ficar um pouco melhor. Vamos aos planos de fundo. Belo azul. Lá vamos nós. Parece, quero dizer, sim, parece decente. Isso parece decente. Estou feliz com isso. OK. Em seguida, loja de blogs. Está parecendo muito bom, agora. Está parecendo muito bom. Obviamente, você adicionaria o texto, a página real do produto, o nome do item do produto, tudo isso. Mas agora o que eu quero te mostrar. Quero mostrar o CMS muito rapidamente, porque CMS economizará muito tempo, como componentes O CMS economizará muito tempo. Agora, esta é a seção de comércio eletrônico real. Obviamente, isso é algo que, se você realmente paga pelo plano de comércio eletrônico , você o obtém e ele já está totalmente construído, já está tudo configurado para que você não precise se preocupar com nada, então basta comprar o plano e configurar tudo. E se você tiver alguma dúvida, pergunte-nos ou pergunte diretamente ao weblow Webflow geralmente é o melhor para o material real de comércio eletrônico porque eles podem realmente guiá-lo por meio de vídeos Mas com o CMS, você pode criar uma coleção de CMS para os diferentes produtos que você Agora, a razão pela qual isso é muito útil é, por exemplo, vamos dar uma olhada nesses ativos. Então, esses são todos os produtos que vendemos na Lancaster Academy em nosso site Isso é literalmente apenas para ajudar as pessoas a, você sabe, construir suas marcas da maneira mais fácil. Então, temos coisas diferentes como o nome, como, você sabe, o ponto de venda, você sabe, o que torna a coisa especial. Mas, na verdade, podemos criar uma coleção de CMS para os produtos No seu site. É muito simples. Então, por exemplo, aqui, vamos apenas brincar, certo? Vamos apenas usar essa coleção CMS existente e criar como uma marcação dela Então, por exemplo, vamos excluir todas as coisas dessa página. Então, vamos copiar isso. Copiar. Eu copiei isso OK. E vamos para a outra seção aqui. Então, se você olhar esta página aqui, é apenas uma página de produto que costumávamos criar antes. E podemos literalmente pegar a página que acabamos de criar para a marca de comércio eletrônico e usá-la para criar algo no CMS Então, uma coleção de CMS, que nos permitirá adicionar produtos, gerenciar produtos e alterá-los com muito mais facilidade, e vou mostrar o que quero dizer em um segundo Então, excluímos tudo desta página e copiaremos e colaremos. Então nós temos isso, o que é perfeito. Depois, podemos simplesmente adicionar nossa barra NAF e forragem. Aqui, aqui. Ok, então basta adicionar o pé de lá. Então vamos começar a vincular tudo. Então, por exemplo, faremos isso rapidamente. Não vou criar uma coleção de SMS totalmente nova. O acervo CMS, devo dizer. Vamos apenas reconstruir a página. Dentro de uma coleção CMS. Porque, no momento, isso está em uma página estática. Esta é a página CMS. As páginas roxas são a página do CMS, como você pode ver no canto superior esquerdo Tem a pequena caixa roxa. Essa é a página do CMS, o sinal de uma página do CMS. Ok, então vamos reorganizar as coisas aqui. Para que as coisas pareçam boas. OK. Então, estamos apenas adicionando nosso componente novamente com os diferentes produtos. Parece perfeito. Ok, incrível, incrível, incrível. Lá vamos nós. OK. Está parecendo bom. Agora, quando analisamos a criação uma página ou sistema na página do CMS Você pode ver aqui que, quando clicamos nas coisas, temos a opção, não apenas de alterá-las, mas também de vinculá-las a algo. Está bem? Então, deixe-me mostrar o que quero dizer. Então, vamos para a seção CMS. Coleções de blogs. Esta é apenas uma coleção, qual estamos meio que brincando. Vamos editá-lo um pouco. Então, vamos deletar isso. E então vamos bloquear a coleta. Ok, veja aqui, tudo isso é material pré-existente de uma coleção de blocos que fizemos há algum tempo. Agora temos um novo. Mas, por exemplo, se olharmos apenas para as imagens, vamos usar os campos da imagem Está bem? Então, temos quatro imagens lá. Vamos adicionar mais dois. Então, vamos colocar a imagem cinco. Em seguida, imagem seis. OK. Perfeito. Então temos o nome. Então, podemos simplesmente usar isso como o nome do produto. Nós temos isso. Podemos simplesmente usar isso como conteúdo. E então temos o bloco Author, que podemos alterar para preços, a? Então, novamente, estamos fazendo as coisas super rápido aqui só para mostrar como fazer, ok? Então salve a coleção. Deus te abençoe. Desculpe-me, devo dizer? Você pode ver aqui como, em vez de alterar a imagem, estamos conectando-a a um campo dentro do CMS Então, estamos clicando em um pequeno botão roxo e fizemos o número um, número dois, número três, esse é o número quatro. OK. Então, podemos clicar em substituir a imagem, mas não queremos substituir a imagem. Queremos conectá-lo ao CMS real. OK. Então, nós o temos lá. Então, conecte este um a cinco. E então conecte este à imagem seis. Lá vamos nós. Perfeito. Esses dois, vamos conectá-los e ver o que acontece. Conecte-se a quatro e, em seguida, conecte este a três. OK. Legal. Então, vamos conectar isso ao nome ou ao título do bloco de título, mas pode ser o nome do produto, qualquer coisa. Isso conecta isso ao assunto do conteúdo. Conecte isso ao preço. Se vamos encontrá-lo lá, vamos lá. E então conecte isso ao link. Basicamente, vincularíamos isso a, você sabe, o que, se estamos fazendo como um pagamento, tipo, um pagamento. Processador, ou estamos fazendo, você sabe, como adicionar à placa, por exemplo, estamos apenas vinculando-o a um processador para este caso, como P pal ou Pioneer ou Air walx ou algo assim, mas você pode fazer isso Agora, tudo acabou, o que é um problema, mas na verdade não é um problema. Deixe-me mostrar o porquê. Então, se adicionarmos cinco tipos de espaço reservado para pedidos, desculpe, itens, aqui, você pode ver que temos isso Agora, se realmente excluirmos quatro deles porque estão desperdiçando nossa energia cerebral, e voltarmos às coleções de blocos, adicionarmos um exemplo de bolsa e olharmos as imagens Simplesmente ignore todo o resto, apenas se concentre nos campos reais nos quais estamos focando. Temos seis imagens que precisamos adicionar. Você pode ver aqui, veja, no momento, um exemplo de bolsa, e temos seis imagens que são completamente alheias a bolsas, ok? E o texto não faz nenhum sentido. Então, vamos voltar ao item real do CMS. E vamos adicionar uma foto da bolsa. Vamos adicionar outra foto. Então, estamos apenas adicionando as fotos das sacolas agora. Como isso aqui. E então, obviamente, vamos adicionar os outros dois itens ou as outras duas imagens no final. Ok, bom. E então, para o assunto do conteúdo, vamos escrever algo louco como, você sabe, que bolsa incrível. Eu gostaria de saber soletrar. Ok, legal. E então, preço, vamos colocar alguma coisa lá. Vamos colocar um pouco mais de texto lá. Tudo parece estar em ordem. imagens cinco e seis, por algum motivo, não foram atualizadas, mas sim, é diferente. Não se preocupe muito com isso ainda. OK. Então, na verdade, vou mostrar porque imagens cinco e seis ainda não foram atualizadas, então vou mostrar o que isso significa. Preço, vamos mudar o preço muito rapidamente. $79. Certifique-se de colocar o sinal de $1 lá. E então vamos tentar salvá-lo, mas na verdade isso nos fará recuar porque o link está errado. Pronto, então vamos adicionar o trabalho árduo. Só diz que não está certo. Então, se você voltar para baixo, veremos. Então, precisamos realmente adicionar um link lá, como um link real. Neste exemplo, vamos pegar um link do domínio. OK. Lá vamos nós. Salve-o e ele deve funcionar. E então tudo deve estar perfeito. Além de duas imagens, deve estar errado, porque ainda não as atualizamos. E com certeza. Lá vamos nós. As duas imagens abaixo estão erradas. OK. Então, o que podemos fazer com isso? Está bem? Então, basicamente, precisamos voltar ao CMS e adicionar as imagens da bolsa Essa é a única solução que podemos fazer neste momento. Ambos estão conectados às coisas corretas, mas simplesmente não estão conectados à imagem correta. Então, vamos lá, está tudo bem. Isso é bom. Isso é bom. Isso é bom. Vamos trocar esses dois pelas fotos da bolsa, e então estamos prontos para começar. Ok, vá com calma. Então, isso deve configurar automaticamente as coisas lá. E então eu acho que gosto muito ter as fotos da garota na parte inferior por algum motivo. Então, vamos detalhar isso. Então, vou copiar e colar essa cópia e colar aquela na parte inferior. Lá vamos nós. Lá vamos nós. Pegue, lá vamos nós. Perfeito. Incrível. OK. Ideal. Isso parece bom. Estou muito feliz com isso. OK. Incrível. Então, sim, então tudo está praticamente configurado agora. Sim, quero dizer, é assim que é fácil criar uma coleção de CMS e criar uma página de produto muito bonita onde você pode ter todos os seus produtos Você sabe, nós literalmente criamos um site completo de comércio eletrônico em menos de, tipo, você sabe, menos de uma hora e 10 minutos, muito, muito rápido. E uma coisa que eu quero mostrar a vocês está nas configurações. Então, se formos às configurações do site, algumas coisas importantes que eu acho que você deve saber antes ter em mente são o tecido, certifique-se de que seja de 32 pixels por 32 pixels, seu clipe da web, certifique-se de que seja 256 por 256. Não os torne muito complicados. Caso contrário, eles ficarão horríveis. Formulários. Certifique-se de colocar seu endereço de e-mail no formulário. Isso apenas garantirá que todas as pessoas que entrarem em contato com você, tudo vá para o seu endereço de e-mail real, o relevante, e certifique-se de salvá-lo e publicá-lo. Também está bem planejado. Portanto, para sites de comércio eletrônico, você precisa ter certeza de selecionar um plano de site de comércio eletrônico. Então, uma dessas, eu não acho que você vai precisar de mais nada além do padrão, para ser honesto, mas obviamente, você sabe, depende totalmente de você. Mas acho que você também pode se conectar a um processador de pagamento, como pay pL ou qualquer outra coisa, e permitir que as pessoas paguem dessa forma e usem apenas o CMS ou o básico Se você tiver apenas um ou dois produtos, poderá usar o básico , usá-lo e fazer dessa maneira. O problema com o starter é que você não consegue adicionar um domínio personalizado, então você realmente não parece muito profissional e confiável Portanto, é muito improvável que as pessoas comprem de você. Além disso, você sabe, você não pode criar mais do que cinco páginas, então é um pouco chato Mas se você quiser adicionar seu domínio, você pode fazer isso aqui Eu tenho outro vídeo mais tarde no curso, onde você pode realmente aprender como fazer isso. Mas certifique-se de publicar tudo, e é mais ou menos isso. Muito fácil, muito direto. E sim, é muito, muito bom detalhar tudo, e espero que você tenha gostado dessa lição tanto quanto eu gostei de fazê-la. OK. Te vejo em breve. Tchau tchau. 64. (Áudio remasterizado e 16: Ok, então, como você pode ver, estamos começando do zero e construindo este site do zero. Agora, a primeira coisa que precisamos fazer é começar a construir a estrutura do site. E a maneira de fazer isso é acessando o layout do fluxo da web e adicionando basicamente alguns modelos da biblioteca. E há alguns muito bons aqui, por exemplo, esse é muito bom. Esse é um que eu uso bastante. Hum, simplesmente discuta se tem a maior seleção. Gosto daqueles que, você conhece, têm mais opções para poder brincar com formatos diferentes. Então, sim, aqueles que, você sabe, têm mais seleção, esses são os que eu vou escolher. E então você simplesmente o adiciona à biblioteca. Eles são todos totalmente gratuitos. E depois de adicioná-los, você pode simplesmente usá-los. E é absolutamente fantástico. Agora, eu já tenho muitas em minhas contas, então não estou permitindo que eu adicione mais uma. Mas eu já tenho os que quero usar de qualquer maneira, então posso usá-los sem precisar instalá-los novamente, ok? Então, vamos dispensar isso para carregar, e então podemos continuar Mas construir a estrutura do site é muito importante porque isso representa literalmente, você sabe, 50 a 60% do trabalho real. Você sabe, construindo um site, você precisa ter certeza de que as estruturas estão corretas. Então, vamos começar, você sabe, examinando uma dessas bibliotecas. Vamos usar esse. Agora, a primeira coisa que devemos observar é criar uma barra de navegação Agora, um pouco mais tarde, mostrarei como criar a barra NAV para que você só precise criá-la uma vez e nunca mais precise criá-la E também criaremos a foto, mas faremos isso um pouco mais tarde. Então, vamos dar uma olhada nessa, talvez. Sim, essa parece boa. Ok, perfeito. Agora, vamos mudar o logotipo, você sabe, um pouco de, você sabe, as fontes e as cores e outras coisas um pouco mais tarde. Mas, no momento, estamos nos concentrando apenas na estrutura do site. Portanto, não se preocupe com cores, imagens e outras coisas ainda. Faremos isso mais tarde. No momento, estamos apenas procurando uma boa seção de heróis para nosso site. E, obviamente, este site é para uma marca pessoal. Então, estamos procurando algo que possa representar a marca pessoal, você sabe, de uma maneira excelente. Quero dizer, esse parece muito bom, na verdade. Esse parece muito versátil. Tem uma bela imagem grande. Vai ser super responsivo. Sim, vamos com esse. Esse parece muito bom. Podemos brincar com coisas, excluir coisas, mudar coisas depois. No momento, novamente, estamos nos concentrando apenas na estrutura do site. Está bem? Vamos procurar outra seção para adicionar abaixo da seção de heróis E, novamente, isso é super fácil de usar. Você pode simplesmente arrastá-los e soltá-los, e, você sabe, é super fácil Honestamente, eu não entendo como fluxo da web tornou tão fácil criar sites super bonitos Ok, vamos adicionar esta pequena seção de confiança aqui, que basicamente diz que aparecemos em, ou pelo menos podemos usá-la como destaque na seção. Apenas certifique-se de colocá-lo no lado esquerdo, para que seja sua própria seção , caso contrário ficará meio casado com a seção anterior. OK. Então, isso parece bom. Podemos mudar isso depois, mas, novamente, estamos nos concentrando apenas na estrutura agora. Não se preocupe com as cores e outras coisas, caso contrário, demorará muito mais para criar o site. Apenas se concentre em criar a estrutura. OK. Então, sim, podemos mudar isso um pouco mais tarde e talvez tenhamos uma pequena seção em destaque, o que será bom e criará alguma confiança entre os visitantes do nosso site. Agora, vamos dar uma olhada em algo. Para os serviços ou coisas que podemos fornecer essencialmente. Sim, isso parece bom. OK. Perfeito. Podemos mudar os ícones, podemos mudar o texto mais tarde. Isso não é um problema, mas eu gosto da aparência porque, em última análise, estamos começando com a seção de heróis. Então, novamente, é por isso que você está aqui, estamos lhe dizendo exatamente por que você está aqui. Então você está nos dizendo, bem, então estamos dizendo a eles que eles podem confiar em nós com a seção em destaque. E depois, estamos dizendo a eles o que, bem, o visitante do site, então estamos dizendo a eles: Ok, isso é o que podemos fazer por você. Tipo, esses são os serviços que podemos fornecer, ou isso é o que, você sabe, como marca pessoal, eu posso fazer por você. OK. Uma pequena seção de resenhas agora. Isso parece bom. E podemos apenas adicionar, você sabe, talvez, você sabe, alguns depoimentos de qualquer um dos empregadores Você sabe, qualquer que seja sua marca pessoal, você pode adicioná-la aqui. E vamos adicionar uma seção de bloco, na verdade. Isso seria bom. Só para mostrar nossa experiência. E acho que vamos transformar isso em um site de moda sobre modelagem para uma marca pessoal de moda sobre modelagem, o que deve ser bem divertido. OK. Fantástico, então vamos adicionar uma forragem OK. Aquele, aquele, parece bem limpo. Ok, perfeito. Isso parece bom. OK. Podemos mudar algumas dessas coisas depois. Uma das coisas é que, por algum motivo, a largura do tamanho, às vezes é definida automaticamente para 126, e você pode ver aqui, não parece muito boa E você pode alterá-lo com muita facilidade, literalmente ir até o elemento que é 126 e configurá-lo como automático, e ele o corrige. Basicamente , configura tudo corretamente. Mas sim, por algum motivo, ele faz isso. Mas isso me poupa tanto tempo criando sites que eu realmente não me importo. Fico feliz em alterá-los, dedico 10 minutos apenas para trocá-los, pois isso me poupa muito tempo criando sites usando essas dez placas. Eles são muito úteis. OK. Perfeito. Incrível. Estou muito feliz com a aparência da página inicial. Vamos começar a criar a próxima página, que eu acho que será o blog, eu acho. Vamos começar a criar a página do blog. OK. Então, novamente, o rodapé Agora, novamente, para o rodapé e para a barra NAV. Nós vamos te mostrar ou eu vou te mostrar como criar uma barra NAF universal mais tarde Você não precisa se preocupar em adicionar, você sabe, os títulos ou qualquer outra coisa. Apenas se concentre na construção da estrutura do site. Eu sei que continuo dizendo isso, mas, sim, é muito importante porque eu só quero mostrar como você pode literalmente criar um site incrível em literalmente 45 minutos. Como estamos literalmente fazendo , levará cerca de 45 a 50 minutos para criar este site. OK. Então, vamos ter essa seção de blocos aqui. Novamente, certifique-se de que esteja super à esquerda para que não interfira nenhum outro elemento, então fique sozinho Ok, isso parece legal, e vamos editar isso depois. Então não se preocupe. Sei que não parece muito moderno ou leve de marca pessoal no momento, mas vou mostrar como editá-lo um pouco mais tarde. Então não se preocupe. Ok, incrível. Ok, nós temos isso. Agora, temos as configurações de SMS, que vou mostrar como configurar porque isso economiza muito tempo. Então, por exemplo, aqui, você pode dizer que eu tenho toneladas de artigos. Isso me impede de criar muitas páginas diferentes para artigos diferentes. Então, em vez de criar, você sabe 50 ou 100 páginas diferentes, posso criar apenas uma página. E, então, esse é, por exemplo, o blog da Lancaster Academy Você sabe, eu tenho talvez 50 a 80 artigos lá e apenas uma única página, então , se eu quisesse, eu poderia literalmente ter milhares de artigos diferentes, e eu nunca teria que fazer a mesma página duas vezes. É literalmente apenas uma página e a preenche automaticamente para que pareça, você sabe, super profissional e de marca todas as vezes Mas é só dedicar um tempo para acertar uma vez. Então, uma vez que você acerte uma vez, nunca mais precisará criá-lo novamente. Então, eu vou te mostrar como fazer isso um pouco mais tarde e perto do final. Mas, por enquanto, estou apenas mostrando algumas coisas diferentes que você pode fazer apenas para, você sabe, tornar a página de bloqueio real um pouco mais bonita Então, vamos mudar as cores e outras coisas um pouco mais tarde. Não se preocupe, mas essa é aparência de uma boa página de bloqueio. Você sabe, definitivamente poderia ser melhorado. Eu definitivamente poderia amarrar um pouco o conteúdo real para você. Mas, em última análise , é assim que deve ser. OK. Então, e esses são todos os artigos diferentes que eu tenho, sim. Então, eu tenho 47 no total e mostrarei como configurar diferentes configurações do CMS posteriormente no curso, porque isso economizará muito tempo E custa um pouco quando você realmente hospeda o site, se quiser as configurações do CMS Mas, ao selecionar a configuração do CMS, você pode tornar sua vida dez vezes mais fácil É só que é um investimento muito valioso. Então, por exemplo, aqui, veja, você pode ver que o nome do artigo real do blog está conectado ao back-end do site, o que, em última análise, é dizer à página o que colocar. Então, está dizendo a eles o título. Está dizendo a eles quantos minutos de leitura são, qual tópico é, qual imagem colocar. Você sabe, está impulsionando o conteúdo. Então, é literalmente muito útil. E vou te mostrar como fazer isso um pouco mais tarde, mas, honestamente, não gosto explicar quanto tempo isso vai te economizar Então, sim, eu só quero realmente transmitir isso. Mas L Vamos começar a dar uma olhada na página real do nosso blog. Vamos começar a olhar para k, então isso é 126, então vamos mudar isso. Ok, então está parecendo bom. Tudo parece muito bom, para ser honesto. Não está a 1 milhão de milhas de distância. Talvez simplesmente os retiremos porque não precisamos de três colaboradores. Nós não precisamos disso. Definitivamente, precisamos de uma pequena inscrição no boletim informativo. Isso definitivamente vai ser útil porque, como marca pessoal, você realmente quer aumentar sua lista de e-mail. Isso é literalmente a coisa mais importante. Então, incrível. Vamos fazer isso. Artigos de blog, Incrível, incrível, incrível. Vamos fazer isso. Na verdade, vamos fazer o tipo de página principal do blog em que mostramos todas as diferentes postagens do blog que criamos para que as pessoas possam realmente ler nosso conteúdo. OK. Qual deles parece melhor, na verdade? Esse parece bem legal, mas eu meio que só quero vê-los todos juntos. OK. Sim, vamos usar esse, na verdade. Vamos ver como isso parece. E, novamente, pessoal, lembrem-se, vamos criar uma estrutura agora. Literalmente, não estamos nos concentrando em mais nada. Vamos mudar tudo em, você sabe, cerca de 20 a 25 minutos. Então não se preocupe. Aguente firme e vamos superar isso, e vai ficar ótimo. Ok, sim, era 126, então eu só precisava mudar isso. Novamente, podemos alterar todos os textos, você pode ver isso aqui. Isso aqui não parece ótimo. Então, precisamos verificar isso. Sim, isso também é 126. Mude isso. Isso também é 126. Sim, então, quero dizer, é um pouco chato mudar isso quando você usa esses modelos prontos, mas eles economizam muito tempo, honestamente mas eles economizam muito tempo, Então, realmente vale a pena, sabe? Perfeito. Perfeito. Perfeito. Isso parece bom. Isso parece bom. Isso vai ficar muito bom quando realmente colocarmos algumas, você sabe, postagens de blog lá. OK. Vamos para a página de contato. Agora, esta página vai ser super simples, então vamos colocar uma barra de NaF nela O que é bom e fácil. E, novamente, vamos marcar isso um pouco mais tarde. Vamos também fazer o formulário de contato. Essa parece boa, mas acho que mamãe. Qual deles parece? Isso nem parece um contato ou seção, não é? Acho que esse é provavelmente o melhor, certo? Sim, essa parece boa. OK. Vamos usar isso. Novamente, certifique-se de que esteja totalmente à esquerda. Você pode ver lá no lado direito. Você precisa ter certeza de que não está aninhado em nenhum outro recipiente ou seção OK. Perfeito. Então, novamente, basta tirar essas, porque são 126. Você pode ver quando está meio arranhado. Você pode dizer. Ok, isso parece bom, parece limpo novamente. Mudaremos todas as cores e outras coisas um pouco mais tarde. Mas isso parece muito bom. Estou muito feliz com isso. OK. O que vem a seguir? Vamos fazer a página da política de privacidade, porque, sim, esses tipos de páginas são muito importantes para que praticamente qualquer tipo de site seja totalmente honesto. Mas especialmente para uma marca pessoal, onde, obviamente, você quer ter certeza de que tem tudo legalmente estabelecido. Na verdade, mostro como obter, tipo, o texto da sua política de privacidade e todo esse tipo de coisa um pouco mais tarde. Eu vou te mostrar como fazer isso porque é muito, muito simples. Mas, sim, isso só vai ajudar você a colocar as coisas no lugar com muita facilidade. Porque, você sabe, ninguém quer escrever uma política de privacidade completa ou mesmo pagar por uma. Isso definitivamente não é o que você quer. Então, sim, vamos procurar uma seção. Acho que, na verdade, acho que é só fazer isso manualmente. Nem precisamos usar um modelo para isso. Vamos apenas adicionar uma seção aqui. Apenas uma seção normal. Novamente, certifique-se de que esteja conectado ao corpo. Em seguida, vamos adicionar um título. Agora, na verdade, vamos adicionar um contêiner. Portanto, o contêiner só vai garantir que tudo esteja bem e responsivo e que, você sabe, não se espalhe para os lados Adicionaremos um cabeçalho e, em seguida, adicionaremos o texto normal, o texto do parágrafo. Além disso, adicionaremos um pouco de margem entre eles. Na parte superior da seção. Em seguida, também adicionaremos um pouco de margem entre o cabeçalho e o parágrafo, só para ter certeza. Portanto, este é o site real para o qual você pode obter sua política de privacidade. Vou adicioná-lo em algum lugar do curso apenas para que você possa obtê-lo, mas é essencialmente uma política de privacidade gratuita. É muito fácil de conseguir. E adicionarei o link real do curso em algum lugar. Então, certifique-se de conferir isso. E use-o. Mas é muito fácil. Eles tentarão cobrar por, você sabe, políticas de privacidade profissional. Mas você sabe, neste momento seu negócio, não tenho certeza se você precisa, mas você pode ver aqui que eles estão tentando cobrar $24 $14, $24 Você sabe, em última análise, é um negócio, então eles estão tentando tirar dinheiro de você, mas você não precisa fazer isso. Eles fazem parecer que você precisa fazer isso, mas, você sabe, você realmente não precisa, para ser completamente honesto OK. Lá vamos nós. Então, deixe-me dar o próximo passo. OK. Está me pedindo que eu faça. Sim, não queremos uma política de privacidade profissional. Sim, então sim, me dê minha política de privacidade, e então estamos prontos para começar. Incrível. Na verdade, você não precisa inserir seu e-mail para isso. Você pode simplesmente pegá-lo diretamente daqui. Mas para algumas coisas, você precisa colocar seu e-mail exato. Então, você sabe, você pode colocar seu e-mail correto, mas essa é, em última análise, nossa política de privacidade. Tudo pronto para começar. Agora podemos copiá-lo para nossa prancheta Vamos tentar isso. Vamos tentar copiá-lo para a prancheta E então podemos tentar levá-lo ao site para que já esteja formatado, o que seria ótimo E você pode ver que essa política de privacidade literalmente me levou , sei lá, 5 minutos para ser feita. Então foi super rápido. Deixe-me verificar se eles me enviaram o e-mail. Ok, sim, eles me enviaram, eles já me enviaram o e-mail. Ok, vamos ver a melhor maneira de obtê-lo. OK. Então, eles acabaram de me mandar de volta para a página real. Ok, estou tentando descobrir a melhor maneira de fazer isso especificamente para você, apenas para economizar muito tempo. Vamos gerar arquivos. Essa provavelmente será a melhor parte. OK. Perfeito. Vamos fazer isso. Vamos fazer um arquivo de pato. OK. Incrível. E então vamos abrir isso. E então eu acho que devemos ser capazes de simplesmente copiar e colar isso na seção de rich text. Então, talvez tenhamos que mudar isso. Vamos fazer isso. Vamos adicionar isso a uma seção de rich text. Eu vou te mostrar como fazer isso. Temos que baixá-lo. Incrível. Então aí está. Literalmente, temos uma política de privacidade completa pronta para ser formatada com cabeçalhos, subtítulos, espaçamento Talvez tenhamos que arrumar as coisas um pouco, mas, você sabe, isso é, você sabe, isso está lá Então, você pode ver que a razão pela qual isso aconteceu é que está aqui um elemento de parágrafo. E, essencialmente, teríamos que fazer todo o espaçamento sozinhos E eu não acho que isso vai ser uma perda de tempo. Então eu acho que fazer um texto rico. Lá vamos nós. Vamos usar isso. Isso vai nos poupar muito tempo. Está bem? Então, nós literalmente copiamos e colamos novamente e olhamos para isso. Eu parecia dez vezes melhor. Incrível. Sabe, talvez coloquemos alguns espaços entre as coisas, mas no geral, você sabe, você pode ver tudo, tudo está lá. Você sabe que está tudo redigido. Certifique-se de realmente dar uma olhada. Você pode ver isso. Diz gerador gratuito de políticas de privacidade. Você pode excluir isso se quiser. Isso é apenas um link para o site para atrair outras pessoas Você pode ver isso de novo, a aparência deles. Ele diz que você pode simplesmente excluir isso. Isso não é necessário. Mas sim, você pode ver que ele tem tudo o que você precisa, além de ser super rápido e fácil, e você não precisa pagar por isso, para obter uma política de privacidade para seu site. Eu acho que isso é um pouco de desperdício de dinheiro, especialmente para uma startup. Então, sim, nós temos isso. Perfeito. Vamos começar a página Sobre nós agora porque a página Sobre nós é muito importante. Queremos contar uma história. Queremos ter um espaço onde possamos realmente, você sabe, mostrar às pessoas por que elas podem confiar em nós, o que podemos oferecer a elas, você sabe, qual é o nosso posicionamento no mundo como uma marca pessoal. Então, essa é uma ótima oportunidade para isso. Então, vamos colocar algumas seções nos permitir contar nossa história de uma forma agradável e digerível. Está bem? Isso parece bom. Ok, talvez possamos adicionar um vídeo lá, talvez. Mmm, talvez. OK. Então isso é basicamente uma mesa de luz. Então, o que é uma mesa de luz é quando você clica na mesa de luz, quando você clica no botão do pequeno player, ela aparece com um vídeo ou, você sabe, até mesmo uma foto Então, nesse caso, ele está criando um vídeo. Então, podemos mudar esse vídeo. Assim, podemos ter, tipo, um vídeo de marca pessoal para contar às pessoas sobre nós e, você sabe, por que elas, em última análise, confiam em nós, nos escolhem ou compram de nós Mas acho que não quero um vídeo neste site em particular. Acho que vamos manter as coisas simples e simples com uma boa imagem. Vamos encontrar algo que seja realmente limpo. Não tenho certeza se há realmente alguma coisa neste. Eu uso muito esse conjunto específico de modelos e acho que não há nada aqui que eu possa usar. Quero dizer, provavelmente há algo, mas eu não acho que haja nada que seja, você sabe, super inovador OK. Quero dizer, isso poderia funcionar, eu suponho. Isso poderia funcionar. Quero dizer, é limpo, você sabe que não é muito arrogante OK. Vamos conferir um pouco mais. Vamos conferir mais algumas seções. E neste momento, quando você está realmente construindo sua página sobre maio ou sobre nós. Novamente, você não quer sobrecarregar as pessoas. Você só quer contar a eles um pouco sobre você. Você quer dizer a eles, você sabe, você sabe, quem você é, o que você é, você sabe, o que o torna diferente, todo esse tipo de coisa. Essas coisas são as mais importantes. O que estou procurando agora é que estou procurando algumas coisas para que possamos dizer a eles o que fazemos. Então, a seção superior está sempre boa, tipo, como é a missão geral? Tipo, como é nosso posicionamento geral, você sabe, o que nos torna diferentes? Então podemos começar a dizer às pessoas, ok, tipo, isso é o que nos torna diferentes, mas isso é o que eu posso realmente oferecer a você. Então, este é um serviço ou, você sabe, nossos produtos que eu ofereço e para os quais posso vender, você sabe, se você for um fã ou algo assim. Ok, então sim, vamos tentar esta seção. OK. Sim, podemos adicioná-los. Nós podemos arranjá-los. Isso não é um problema. Isso parece bom. E podemos simplesmente adicionar, você sabe, talvez não precisemos de todos os quatro, talvez precisemos apenas de dois, mas veremos. Neste momento, isso realmente não importa. Podemos deletar coisas depois. Mas, sim, só precisamos ter certeza. Às vezes, isso pode ser um pouco complicado, a propósito, quando estamos tentando obter seções e colocar seções em seções, e, você sabe, às vezes pode ser um pouco incômodo Então, esteja pronto para mexer nas coisas. Então, queremos apenas adicionar uma pequena seção de perguntas frequentes. E aí está, acabamos de destruir tudo, e então tudo bem, isso parece muito bom Você pode ver aqui que isso está sendo esmagado, então vamos ficar bem Sim, só precisamos tirar a margem, eu acho. Há uma margem de 13. Por algum motivo, sempre há uma margem de 13% nas imagens, e isso é muito irritante Mas, novamente, você economiza muito tempo. Sim, vale a pena. OK. Então, vamos adicionar essa seção de perguntas frequentes na parte inferior, e então deve ser. Acho que essa deveria ser basicamente nossa página geral sobre a página, praticamente pronta. Eu não acho que haja muito mais para realmente fazermos. Sim. Então, estamos apenas tentando descobrir a estrutura real da página agora, só porque temos as peças de que precisamos, mas estamos lutando muito bem, estou lutando para inseri-las. Ok, parece que está bem. OK. Temos a foto na parte inferior. Temos a seção de perguntas frequentes, Ah, por que isso está aqui embaixo? OK. Vamos, vamos mudar isso para outra coisa. Ok. Sim. Na verdade, vamos ficar com esse. Sim, isso parece bom. Isso parece bom. Ok, então vamos organizar o sistema de forma a recolher tudo, para que seja um pouco mais fácil de gerenciar. Adicionamos o pé na parte inferior e, em seguida, adicionamos o FAQ. Lá vamos nós. Perfeito. Lá vamos nós. Isso deve ser bom. Incrível. E a página do site parece super limpa, super profissional. É responsivo, o que basicamente significa que funciona em qualquer dispositivo porque já está configurado Vamos reduzir isso para dois porque só queremos dois. Não queremos sobrecarregar as pessoas Mas essa página parece, você sabe, muito boa. OK. 65. (Áudio remasterizado e 16: Então, vamos começar a brincar com o Napa. Na verdade, vamos começar a projetar o site porque agora temos a estrutura real. Vamos começar a projetar coisas. Eu mudei as cores dos botões para pintar só para ver como eles se parecem. Mas agora, vou adicionar algumas imagens e alguns ícones e outras coisas, que eu selecionei anteriormente. Então, obviamente, você pode dedicar algum tempo para encontrar esses ícones e, você sabe, imagens e outras coisas para si mesmo, para sua marca pessoal ou talvez para a marca pessoal de seu cliente. Mas sim, estamos apenas adicionando um logotipo aqui, então apenas um logotipo de script muito simples, que eu encontrei no Google. Então, acho que diz Evelyn. Então, vamos criar este site para Evelyn. Então, novamente, acabamos de excluir a pequena caixa, que é literalmente clicar nela e excluí-la , como você faria em um documento do Word Vamos atrasar aquele botão aí. O botão de login porque não precisamos dele. Mas o que queremos fazer é não precisar desse botão home porque podemos simplesmente obter o logotipo, acesse o link aqui. E então, literalmente, nas configurações, podemos literalmente configurá-lo para que, quando você clicar no logotipo, ele volte para casa com muita facilidade. E isso é muito comum em muitos sites. Se você clicar no logotipo, você vai para casa. Vamos fazer isso sobre mim, então isso é bom. Vamos mudar isso para sim, vamos fazer isso em uma loja. Não é realmente importante no momento, mas eu só quero ter certeza de que mostraremos a você aproximadamente como mudar coisas, como texto e imagens. E então, você sabe, você pode fazer as coisas sozinho. Depois de entender como alterar imagens, como excluir coisas, você pode simplesmente fazer o que quiser. Ok, então bem-vindo à minha marca pessoal. OK. Então vamos mudar essa imagem. Troque-o por este. OK. Perfeito. Agora, em relação a esta seção, obviamente, você sabe, não aparecemos no fluxo da web ou no Zoom ou, você sabe, em conteúdo para o Spotify ou qualquer coisa, ou talvez você tenha aparecido no Spotify, mas só queremos adicionar alguns logotipos mais relevantes como agências de notícias, Netflix e coisas assim, só para que pareça um pouco Desculpe-me. Mas sim, com os logotipos reais, com esses tipos de seções, eu gosto de manter tudo da mesma cor. Se eu puder, só porque parece muito mais limpo do que ter toneladas de cores diferentes. Então, eu acabei de arrumar todos eles em cinza. Então, parece muito mais limpo. Ok, então, sim, você pode simplesmente mudar os botões para o que quiser. E, obviamente, você pode escolher o que colocar no texto. Você pode mudar as coisas da maneira que achar melhor. Sabe, estou apenas mostrando uma ideia aproximada do que você pode fazer e, você sabe, dando algumas ideias, e então você pode fazer o que achar melhor para sua marca, porque é sua marca, é sua empresa, é ou seu cliente. Assim, você pode usar sua experiência no que aprendeu anteriormente em nossos outros cursos sobre design de sites ou neste curso e, simplesmente, fazer sua própria versão. É muito importante que você faça suas próprias coisas. OK. Então, agora vamos apenas mudar esses ícones. A maneira de alterar os ícones é muito simples. Então, em vez de mudar os ícones, você não pode realmente mudar esses ícones. Em vez disso, basta colocar uma imagem, clicar no ícone, copiar e colar uma imagem, dimensioná-la de forma diferente e excluir o ícone original real. Então esse é o ícone original. Você copia e cola a imagem. E então você literalmente muda isso. Então , é super simples. E, obviamente, certifique-se de que seja pequeno o suficiente para caber na pequena bolha E então, sim, eles podem ser, você sabe, representar, como serviços ou o que eles quiserem. Obviamente, isso não precisa mudar muito. Não vou perder seu tempo adicionando avaliações e outras coisas, porque isso é obviamente algo que você pode fazer em seu próprio tempo. Mas vamos adicionar algumas imagens mais relevantes para o blog. Mas, obviamente, você pode usar a seção CMS para isso, e eu vou te mostrar como fazer essa cerveja um pouco mais tarde, em cerca de dez, 15 minutos Ok, então nós apenas os excluímos porque não precisamos. Mas acho que está um pouco ocupado. Você pode mantê-los se quiser, mas eu só queria excluí-los por enquanto. Acho que, vamos mudar a cor desses botões, porque por algum motivo, os rosas simplesmente se destacam e simplesmente não ficam bem Então, vamos mudar isso. Há algumas maneiras de mudar isso. Eu gosto da ferramenta conta-gotas. Sim, essa cor parece muito melhor. OK. Incrível. Isso parece bom. OK. Agora que podemos, podemos também mudar isso, para que eles possam simplesmente alterar a imagem e depois excluí-la. Então exclua, exclua, exclua, exclua. E então ele já formata para você. Digamos, por exemplo, que você não esteja no Twitter, basta excluí-lo. Vinculado a ele, Facebook e Instagram. Vamos ficar com esses dois. OK. OK. Então, obviamente, com os links, vá literalmente até o link. Sim. Então, quando você estiver no seu Facebook, basta adicionar seu link aqui. E isso será vinculado ao seu Facebook. Você também pode clicar em abrir uma nova guia, que às vezes é muito útil. Isso significa simplesmente que isso não é removido da página do site, então eles ainda estão conectados ao seu site ou com o site aberto, mas simplesmente abrem um novo navegador no telefone no desktop Então, sim, eu não recomendaria ter mais do que três ou quatro guias no rodapé Então, sim, temos apenas algumas guias diferentes aqui apenas para mostrar que você pode alterá-las, e é muito fácil Você simplesmente clica literalmente no link. Aqui, veja, o link do rodapé do EI. Então, você literalmente clica na pequena engrenagem e pode escolher a página para a qual ela Eu só vou mudar a cor do mouse. Então, por exemplo, lá vamos nós. Então, podemos basicamente mudá-la para que, quando alguém passar o mouse sobre ela, ela mude para uma cor diferente, e podemos fazer o mesmo com essa Então, basta clicar literalmente no link. Suba para passar o mouse. Em seguida, basta desconectá-lo. Isso é muito importante. Clique na pequena ferramenta conta-gotas. Lá vamos nós. Então, terminamos esses dois, mas ainda não usamos os recursos. Isso é o que não fizemos. Então, vamos entender isso. Faremos exatamente a mesma coisa que eu. Lá vamos nós. E então nós literalmente nos desconectamos, desconectamos. Lá vamos nós. E lá vamos nós. Depois, basta adicionar o código hexadecimal e estamos prontos para começar Estamos prontos para o rock and roll. Incrível. OK. Quero dizer, obviamente, você pode adicionar links diferentes no Navar e outras coisas, mas eu só quero te mostrar mais ou menos como você pode fazer isso apenas para manter as coisas realmente simples para você E então você pode brincar com fontes, brincar com cores e descobrir exatamente o que deseja. Mas isso é apenas um curso intensivo na construção do site. Então, o que estou fazendo aqui é criar um componente, ou seja, uma barra de navegação universal Então, o que você faz, e eu vou te mostrar novamente com o rodapé. Então você seleciona o elemento. Então, neste caso, é o rodapé, ok? Assim, você pode ver como o rodapé é selecionado em todo o rodapé. OK. Em seguida, vá até essa pequena caixa, clique em Criar novo componente e, em seguida, basta rotulá-lo, basta criá-lo. E veja aqui, agora está verde. Quando está verde, significa que, desde que esse elemento seja verde. Não importa em qual página do site esteja, ela será a mesma. Então, se você alterá-lo em uma página, ele mudará em todas as páginas, então isso pode ser muito útil. OK. Vamos começar a criar a página do blog. Na verdade, vamos tirar algumas coisas porque não quero que fique muito ocupado. Vamos mudar a cor. Então mude isso, mude essa cor também. Vamos mudar para azul escuro. OK. Também muda para azul escuro. Por que simplesmente o mantemos, na verdade, mantenha-o rosa. Isso é uma imagem. Então, novamente, acabei de pegar algumas imagens antes de organizar isso, apenas para ter certeza de que as tinha prontas e respeitei seu tempo OK. Então, por algum motivo, isso não está carregando. Vamos abrigar um desses por enquanto. Perfeito. E então esse conteúdo. Então eu vou te mostrar como configurar o CMS em um segundo. E quando você realmente entender como configurar um CMS, isso literalmente mudará tudo sobre como você realmente trabalha no fluxo da web É super fácil. Ok, então, por exemplo, aqui, o Nav e o rodapé são a versão antiga. Está bem? Então, agora podemos adicionar a nova versão. Ok, então adicione isso aqui, vamos lá. Oh, espere um segundo. Não está totalmente lá. Você pode ver como ele não está conectado ao corpo, vamos lá. Agora está. Isso, para que fique conectado ao corpo, puxe-o até o fundo. Certifique-se de que esteja à esquerda. Lá vamos nós. Perfeito. Então, agora, se mudarmos alguma coisa na barra NAF na página inicial, isso mudará em todo o site, cada lugar do site, onde essa barra NAF específica está, isso Ok, podemos dar uma olhada nesta página do blog. OK. Então, com a página de bloqueio , na verdade, vamos fazer isso um pouco mais tarde porque será assim que eu posso te mostrar o CMS Então, vamos fazer isso um pouco mais tarde. Entre em contato com nossa página, isso deve ser bem fácil. Novamente, você pode alterar o endereço de e-mail, o número de telefone e outras coisas. Vou apenas mudar a cor e mostrar como mudar a cor, e mostrar como mudar a cor porque essa é a parte mais difícil. Obviamente, não sei qual é o seu endereço de e-mail ou seu número de telefone, então você pode alterar isso como quiser. Mas sim, vamos adicionar a barra NAF aqui. Novamente, apenas certificando-se de que está conectado ao corpo. Em seguida, escolhemos a forragem. OK. Perfeito. Quero dizer, isso está praticamente pronto agora. Isso está praticamente acabado. Então, agora vamos para a página sobre nós. OK. OK. OK. Agora temos, na verdade, vamos usar este. Eu crio uma segunda página sobre nós. E foi bem parecido. Mas eu só queria acrescentar algumas outras coisas só porque queria torná-la um pouco mais diferente da página inicial. Então, sim, eu apenas mudei um pouco a estrutura. Mas isso é praticamente a mesma coisa. Então, vou fazer exatamente a mesma coisa. É apenas um layout diferente. Ok, vamos adicionar um título bom, agradável e humilde E vamos adicionar algumas que eu não conheço. Vamos adicionar algumas imagens. Não tenho certeza de quais imagens devemos usar. Vamos talvez adicionar esses. Vamos talvez dizer que ela gosta de fotografia ou algo assim, e talvez diga que ela está, você sabe, mostrando suas habilidades fotográficas Incrível. São como imagens de banco de imagens de um site que eu encontrei. Acho que foi pixels.com, que eu também mencionei anteriormente no curso E você pode simplesmente excluir esses elementos ou adicionar texto a eles. Depende totalmente de você, obviamente. Eu só estou te mostrando, uma espécie de versão simplificada do que você pode fazer. OK. Eu também tiro ótimas fotos de fotografia. Meu trabalho. Lá vamos nós. Então, podemos escrever um pouco. Mas a questão é, tipo, a razão pela qual é muito importante usarmos modelos e um pouco de ortografia A razão pela qual usamos modelos e a razão pela qual configuramos as coisas dessa forma é para economizar muito tempo e também para garantir que o site seja responsivo Portanto, este site funcionará bem, desde que você use os modelos e não mude muito em relação ao formulário e, na verdade, exclua coisas ou, você sabe, altere o texto real ou as imagens, tudo ficará perfeitamente formatado. É apenas a forma como eles são construídos. Então, por exemplo, aqui, olha, você pode ver, você sabe, o pequeno hum que você conhece, abrindo e fechando a seção de perguntas frequentes. Isso levaria muito tempo para ser criado sozinho. Ao fazer isso, literalmente fica muito mais fácil criar um site e criar um site bonito, que seja realmente funcional. OK. Então, nesta pequena seção aqui abaixo da seção de perguntas frequentes, vamos acrescentar que você deseja reservar comigo. Sim, você pode me reservar abaixo. Coloque, vamos escrever algo como me reservar. Isso é Pink, passe o mouse sobre ele. Então, se você quiser mudar isso, vá literalmente até lá. Desconector. L, vamos torná-lo um pouco mais leve. Essa curva aqui, então a curva que acabei mostrar, é basicamente, desde que você escolha qualquer cor nessa curva, ela se adequará à cor principal, ou seja, à cor mais escura Essa é uma pequena dica para você. OK. Então, a barra de navegação no pé ainda não foi alterada, então vamos mudar isso OK. Ok, vamos lá. Além disso, ele não está conectado ao corpo. Está conectado à seção. Então, vamos mudar isso. É isso que está conectado ao corpo agora. Isso é bom. Incrível. OK. Isso é bom. Isso é bom. Isso parece bom. Incrível. Ok, vamos começar a dar uma olhada nos artigos do blog. Acho que é aqui que posso mostrar como usar o CMS. Esse será o melhor exemplo disso. Então, vamos simplificar as coisas e simplesmente excluir a abertura das guias. Você pode adicionar isso se quiser, mas é um pouco mais complicado, mas eu só quero manter as coisas o mais simples possível por enquanto. E então, se você quiser que eu adicione uma aula adicional ao curso, basta nos enviar um e-mail e podemos organizá-la. Então, estou apenas adicionando um contêiner. E então, dentro do contêiner, adicionarei um componente CMS, que mostrarei assim abrir e colocar no lugar certo Lá vamos nós. Basta clicar no pequeno botão de adição e depois na lista da coleção. Na verdade, é assim que se chama, mas basicamente é um elemento CMS Coloque-o dentro do recipiente. Então a fonte precisa ser o CMS de uma coleção, ok, o que eu vou te mostrar daqui a pouco como fazer Você pode ver aqui que ainda não há itens, mas adicionaremos alguns itens em um segundo. Está bem? Então, podemos ver isso, estado vazio. Então não há nada lá. Queremos que esteja em uma grade. Então, vamos fazer a lista de coleta de borracha e depois pressionar a grade. Isso vai dividir as coisas e queremos três colunas adequadas às colunas abaixo. OK. Então, temos isso aí. Isso é perfeito. Agora, a próxima coisa que precisamos fazer é acessar a configuração do CMS Então, essa é a coleção que configuramos com o CMS e vamos adicionar cinco Eles são apenas simulações. Eles não são sérios. Eles simplesmente se somam quase como espaços reservados. Então, podemos adicioná-los. Vamos dar uma olhada só para facilitar um pouco o gerenciamento E então podemos pegar uma e ver como mudar a imagem em miniatura Vamos mudar a imagem em miniatura para algo que consideremos um pouco mais relevante Lá vamos nós. Isso funciona. E podemos simplesmente adicionar o bloco um, perfeito. Este, vamos mudá-lo para o blog dois. Vamos mudar o real. Ok, mude a imagem. E, por fim, o blog três. E você pode ver aqui que, na seção CMS, é muito mais fácil mudar coisas e é muito mais organizado Agora, essa é na verdade uma configuração de CMS pré-existente como meu site atual, para que eu possa mostrar todos os detalhes e outras coisas diferentes, e não estou apenas começando do zero, mas, por exemplo a sua será muito mais simples e fácil de gerenciar Obviamente, será exclusivo para você. Então, no momento, veja, você pode ver que acabei de copiar e colar o elemento, os elementos do design do modelo anterior Então, deixe-me te mostrar. OK. Deixe-me tentar descobrir por que isso não está me deixando colar isso. OK. Vamos adicionar essa lista de coleções novamente. Acesse coleções de blocos. Perfeito. E depois o invólucro. Isso está aí. Vamos abrir isso um pouco. Item de coleção. Lá vamos nós. Então, agora copiamos e colamos o elemento Então, literalmente, pegamos um desses elementos e o copiamos e colamos Então, agora não precisamos mais disso. Acabamos de excluí-lo. Isso sumiu. OK. Perfeito. E o problema do elemento de coleção é que, quando você altera algo em um, ele muda em todos eles. Então, em vez de substituir a imagem, o que podemos fazer é clicar nesse pequeno botão roxo aqui e, literalmente, clicar na imagem em miniatura, e ela a altera automaticamente Lá vamos nós. Lá vamos nós. Perfeito. Agora, por algum motivo, isso está nos dando um pouco de margem, então tire esse 13, perfeito. Agora, por algum motivo, essa imagem do meio não mudou, mas vamos mudar isso mais tarde, um problema repentino. Então, vamos mudar esse para o título, veja bloco um, bloco dois, bloco três. Podemos mudar isso, se quisermos, podemos conectá-lo ao CMS, mas para o propósito desta lição, não vamos fazer isso Mude isso para o conteúdo. E depois para isso. Novamente, veja, se mudarmos o link, vincule a seção atual do bloco. Isso é o que você quer. Portanto, o título real e os links em cada um dos itens da coleção devem ser vinculados à seção atual do item. Então, veja aqui. Então, coleção de blocos atual, desculpe. Lá vamos nós. Portanto, essa imagem do meio não foi atualizada. Então, vamos voltar para o CMS, coleção de blocos, bloco dois Ah, na verdade eu não salvei. É por isso. Ok, vamos substituí-lo. Vamos entrar, vamos ter certeza de que realmente carrega dessa vez. Parece que está carregado, vamos salvá-lo e depois vamos verificar. Vamos garantir que ele seja atualizado. Isso funciona? Lá vamos nós. Incrível. Agora, podemos adicionar 50 1 milhões, então você pode ver isso. Eu mudei para o tópico de moda em um único item e, literalmente, mudei isso em todos eles. Então, isso é o mesmo para tudo. Você pode ter 1 milhão de artigos diferentes. Acho que há quantidades ilimitadas de artigos que você pode criar, e isso os altera com muita facilidade. Você não precisa alterá-los um por um. Esse é o poder da configuração do CMS. Então, nós temos isso configurado agora. Vamos mudar esse Foer and Nav Bar, porque isso está me irritando Ok, vamos lá. Vamos dar uma olhada. Bah, bah, bah, bah. Lá vamos nós. E vamos mudar isso. E, obviamente, isso pode levar um pouco mais de 45 minutos, mas estou apenas mostrando que, se você tiver todas as suas imagens prontas e tudo formatado, você sabe, com um pouco de prática, você pode fazer isso super rápido E pode demorar um pouco mais na primeira vez que você fizer isso, mas depois, não vai demorar muito. OK. Então, quero dizer, temos um site muito forte aqui, espere que ele carregue. Mas, você sabe, nós literalmente construímos isso em, você sabe, 45 minutos. O site é responsivo. Você sabe, você sabe, demoramos 45 minutos para criar este site, e literalmente, quero dizer, você pode realmente adicionar o CMS, a propósito, aqui também Assim, você pode adicionar exatamente a mesma função e limitá-la a três, que você possa mostrar, por exemplo, os artigos mais recentes. Sim, só para informá-lo sobre isso, para que você não precise fazer isso manualmente. Mas quero dizer, o site em geral parece muito bom. Quero mostrar algumas coisas sobre as configurações antes de terminarmos , porque isso só vai nos ajudar a terminar tudo. Mas sim, quero dizer, você sabe, em 45 minutos, conseguimos construir, quero dizer, se carregar um pouco mais rápido, isso seria fantástico, mas acho que minha Internet estava um pouco lenta Você sabe, quando você pode criar um site responsivo, pronto para ser usado em 45 minutos, você realmente não pode reclamar muito disso reclamar muito Você sabe? É muito incrível. O fato de você poder fazer isso. Ok, então vamos dar uma olhada nisso. OK. Quero dizer, todas as páginas parecem boas. As páginas estáticas são as coisas mais importantes. Então, por exemplo, você sabe, isso aqui está em uma página estática. Então, isso está aqui em uma página estática aqui. OK. Mas para o artigo, por exemplo, se você quiser que a página seja preenchida automaticamente , você precisa criar as páginas reais da coleção do CMS, ou seja , aqui está um exemplo de uma aqui para o site da Lancaster Academy , você precisa criar as páginas reais da coleção do CMS, ou seja , aqui está um exemplo de uma aqui para o site da Lancaster Então, por exemplo, se eu mudar, se eu criar um elemento CMS ou um artigo CMS, ele é preenchido automaticamente na página real e cria uma página separada sem criar uma página extra, e cria uma página separada sem criar uma página se isso fizer sentido Então, basta clicar aqui. Acho que não tenho muitos, então não vou permitir que eu basicamente precise atualizar meu plano, mas o plano CMS é perfeito Então, vamos mostrar a você as coleções do blog. Então você pode ver aqui, eu tenho muitos elementos diferentes. Desculpe, acabei de hackear. Eu tenho muitos elementos diferentes, como o texto rico, o link da imagem. Esses são os principais que você vai usar: texto simples, texto rico, imagem, link de vídeo e link. Na verdade, você não vai usar muito mais, mas pode usar outras coisas se quiser. Basta criar o que você precisa, geralmente em cada página. Depois, basta criá-los. É muito, muito fácil, muito, muito simples. OK. Vamos dar uma olhada em algumas configurações agora. Vamos até a barra de configurações do site. Agora, a primeira coisa a mencionar antes de terminarmos é o favicon e o clipe da web Então, isso precisa ter 32 por 32 pixels e, em última análise, você sabe na guia toda vez que alguém visita seu site. O clipe da web precisa ter 256 por 256 pixels. Agora, em relação aos planos, você pode simplesmente permanecer no plano inicial, que é gratuito, mas não pode conectar um domínio personalizado A opção CMS, na verdade, permitirá que você configure o CMS, que, novamente, é muito útil, então eu realmente recomendaria se você tivesse dinheiro para investir nele você tivesse dinheiro para investir nele E também oferece um domínio personalizado, o que é ótimo. A opção básica basicamente oferece a capacidade de conectar o domínio e oferece uma hospedagem um pouco mais rápida, mas não oferece a opção CMS E depois de ter um plano, seja a opção básica ou a opção CMS , você pode adicionar seu domínio, que você acabou de ver lá A opção de formulário, portanto, certifique-se de adicionar seu endereço de e-mail aqui. É aqui que, se alguém entrar em contato com você em relação ao seu formulário DS de contato ou qualquer outra coisa , entrarei em contato com você lá , mas quando terminar, basta publicá-lo e seu site estará concluído. Está tudo pronto. Sim, bom trabalho. OK. Nos vemos na próxima aula, mas sim, muito obrigado por me dar tempo para passar por isso com você, e espero que você tenha um ótimo dia. Te vejo em breve. 66. Lançamento do site: como obter seu site na página #1 do Google: Como você pode preparar seu site e chegar à primeira página do Google o mais rápido possível? Bem, há algumas coisas importantes que você precisa ter em mente quando estiver realmente preparando seu site para o SO. Nesta lição, abordaremos todos eles. Agora, a primeira coisa que você precisa definir são suas palavras-chave. Agora, suas palavras-chave são essencialmente as palavras às quais você pode se associar à sua marca e o que você pode realmente oferecer, que são exclusivas e distintas de sua marca específica. Basicamente, acesse o Planejador de palavras-chave do Google e pesquise termos de pesquisa relevantes que alguém colocaria no novo Google para encontrar sua marca Basicamente, pense nas palavras às quais você deseja se associar à sua marca. Em seguida, verifique o planejador de palavras-chave do Google para garantir que haja volume de pesquisa suficiente, que basicamente significa que há pessoas suficientes pesquisando por esse termo ou palavra em particular que você possa ter certeza de que há pessoas suficientes pesquisando esse termo para encontrar você no Google Agora, outra coisa a verificar é ver quais termos e palavras-chave têm menos concorrência. O truque aqui é garantir que o termo de pesquisa pelo qual você é conhecido seja o mais exclusivo possível. Portanto, quando alguém realmente pesquisa por ele no Google, é mais provável que você apareça. Agora, as palavras-chave não são as únicas coisas que você precisa para ser encontrado no Google. Outra coisa que você realmente precisa implementar é o SEO na página. Basicamente, isso significa garantir que seus títulos e subtítulos sejam relevantes para o tipo de coisa que você está oferecendo Isso ajudará os clientes a realmente encontrar seus produtos on-line e também garantirá que, ao adicionar imagens ao seu site, eles tenham um texto descritivo anexado para que o Google possa realmente reconhecer do que Google possa realmente reconhecer do trata a imagem e para o que ela é relevante Além disso, certifique-se de que todos os seus URLs estejam corretos, limpos e concisos Por exemplo, não torne seu URL muito longo nem adicione palavras desnecessárias porque o Google não saberá o que fazer com seu URL e você não será encontrado na primeira página tão cedo Agora, outra coisa que é realmente importante para SEO e para ser encontrado no Google é conteúdo de qualidade. Na verdade, essa é uma das abordagens que eu pessoalmente adotei para cada um dos meus negócios para garantir que as pessoas encontrem meu site e, finalmente, comprem meus produtos e serviços. Essencialmente, quando se trata de conteúdo de qualidade, isso significa escrever postagens em blogs ou talvez postar vídeos, para manter os usuários em seu site. O Google se preocupa com duas coisas simples ao classificar seu site. Um, quanto tempo o usuário passa no seu site Porque quanto mais tempo alguém passa no seu site, isso diz ao Google que a qualidade do conteúdo é muito maior e também a relevância do conteúdo para o que a pessoa está pesquisando E esses dois trabalham lado a lado para dizer ao Google que, quando alguém pesquisa esse termo de pesquisa específico, se você mostrar esta página, ficará satisfeita e obterá as respostas que está procurando. O Google basicamente se preocupa em dar à pessoa o que ela precisa o mais rápido possível da melhor maneira possível. Então, se você puder realmente resolver esse problema e oferecer a eles o melhor, eles passarão mais tempo no seu site, e o Google trabalhará a seu favor e o colocará no topo da primeira página. Agora, outra coisa a ter em mente é a velocidade da página. Agora, você pode literalmente encontrar ferramentas on-line para verificar a velocidade do seu site, basta pesquisar no Google, verificar página do meu site e depois adicionar seu URL Então, isso é muito fácil de verificar, mas certifique-se de que seu site seja o mais rápido possível. Isso significa não adicionar arquivos muito longos , profundos e grandes como vídeos em sua página inicial, porque isso acabará por aumentar a taxa de rejeição E quando digo taxa de rejeição, basicamente quero dizer que as pessoas acessam seu site e saem imediatamente se site não carregar Então, basta garantir que seu site carregue muito rápido e isso permitirá que as pessoas cheguem onde precisam e passem mais tempo em seu site , pois isso proporcionará uma experiência melhor. Agora, outra coisa que você precisa ter certeza é a experiência do usuário. Agora, já abordamos isso logo no início do curso, mas é muito importante garantir que o cliente ou a pessoa chegue onde quiser por meio de etapas agradáveis e fáceis de seguir. Isso significa que eles não ficarão frustrados não sairão do site e passarão mais tempo lá, e passarão mais tempo lá, dirá ao Google que seu site é de alta qualidade e, portanto, terá mais chances de obter uma classificação elevada Agora, algumas outras coisas que são realmente importantes para o seu site são links internos e backlinks Agora, a vinculação interna é onde você tem muitas postagens de blog diferentes, e todas elas se vinculam umas às outras para, finalmente, criar uma rede de postagens de blog que se complementam Por exemplo, em uma postagem do blog, você pode estar falando sobre o mesmo assunto, qual já escreveu outra postagem no blog, então você pode criar um link para essa postagem do blog para manter as pessoas no seu site por mais tempo. Agora, os backlinks são um pouco diferentes. backlinks são essencialmente links de outros sites que o Google já conhece e confia Então, por exemplo, se você fosse uma empresa totalmente nova e estivesse apenas criando um site do zero, você sempre poderia entrar em contato diferentes sites que estão em seu nicho para finalmente, vincular as páginas do seu site às deles e vice-versa, basicamente para compartilhar tráfego e também criar alguma confiança com o Goole enquanto Agora, eu sei que isso é muita coisa para entender. Mas, pessoalmente, o que eu faria se você se sentisse um pouco sobrecarregado é focar na criação de conteúdo e postagens de blog de alta qualidade em seu site Isso é algo que eu fiz pessoalmente para cada um dos meus negócios on-line e funciona muito bem. Simplesmente porque quando alguém acessa seu site e diz que você tem muito conteúdo de qualidade, eles tendem a confiar muito mais em você. E, finalmente, se eles passam mais tempo no seu site , o Google também confia muito mais em você De qualquer forma, sei que este não é um curso baseado em SEO, e será 1º de maio no futuro, mas, neste caso, queríamos apenas dar um resumo rápido das coisas em que você pode pensar ao criar o SEO e presença digital do seu site No entanto, se você tiver alguma dúvida em relação ao SEO, sinta-se à vontade para entrar em contato. Estou mais do que feliz em ser o mais solidário possível. Mas, além disso, nos vemos na próxima lição. Te vejo em breve. 67. Lançamento de site: protegendo um ótimo domínio para seu site: Então, por que é tão difícil encontrar um ótimo domínio para seu site atualmente? Bem, em última análise, só para contar um pouco da história de fundo, as pessoas começaram a comprar domínios nos últimos dois anos e depois a vendê-los por um Então, por exemplo, se alguém encontrou um domínio por $20, que geralmente é quanto um domínio deve custar, e não quer usá-lo pessoalmente, mas o vê como um domínio que outra pessoa poderia potencialmente usar para uma empresa ou algum tipo de projeto O que eles basicamente farão é comprar o domínio por $20 e pagar $20 por ano para mantê-lo E então, quando outra pessoa se deparar com esse domínio e pesquisar por ele, ela listará on-line com um prêmio de talvez quatro ou $5.000, no mínimo Agora, acho que essa é uma das piores coisas sobre o setor de domínios. Na verdade, trabalho com muitas empresas para ajudá-las a encontrar a marca perfeita, aman. Uma das coisas que muitas empresas desejam é uma grande demanda por seu site. Agora, para ser totalmente honesto, se você estiver procurando por um nome de marca menos de seis letras, será muito, muito difícil encontrar um domínio de 2 a 5 letras que esteja disponível e, especialmente, disponível em menos de um número muito alto quando se trata do E não só está disponível, mas provavelmente custará um braço e uma perna se você realmente quiser comprá-lo. Agora, não se preocupe. Na verdade, temos alguns truques muito interessantes que você pode usar para basicamente obter um domínio que é muito valioso para sua empresa e também economiza muito dinheiro. Talvez você já tenha o nome da sua marca. E se você está totalmente definido sobre o nome da sua marca , um ótimo método a ser usado, que usamos o tempo todo com clientes, é adicionar uma palavra relevante. Por exemplo, se você estiver em uma loja comercial, poderá adicionar algo como loja, por exemplo, ou até mesmo adicionar loja antes do nome real da marca. Então, por exemplo, se o nome da sua marca era Nike, então poderia ser shop nike.com Ou, potencialmente, você sempre pode adicionar loja no final, que é essencialmente nike store.com, ou se você for uma agência, por exemplo, você também pode usar a palavra agência em seu domínio Basicamente, tudo o que você precisa fazer é garantir que a palavra adicionada seja relevante para o que você está vendendo agora e também para o que você poderia vender no futuro. E, na verdade, há muitas empresas que, se você não pode pagar pelo domínio.com limpo, então apenas sua marca no.com nos estágios iniciais de construção de sua empresa, muitas empresas, incluindo o Facebook no início, usam um domínio, que é basicamente apenas um domínio de $20 com uma palavra adicional, mas depois, quando o negócio é eles compram o domínio claim.com porque têm fundos para fazer isso Então essa é a primeira abordagem, basicamente adicionando uma palavra simples que seja relevante para o que você faz e o que você oferece ao seu nome de domínio. Agora, se essa abordagem não funcionar para você , você sempre pode pagar um prêmio. Agora, às vezes, você pode negociar e conseguir um ótimo negócio pelo seu nome de domínio E, em última análise, a pessoa que vence essa negociação é a que menos se importa Portanto, se você tem um plano alternativo, como adicionar uma palavra, e está oferecendo a alguém um bom dinheiro que mantém esse domínio há muito tempo, você pode obtê-lo por um preço bastante decente. Agora, obviamente, nem toda pessoa vende um domínio será a mesma, então alguém terá mais órbita para negociar e outras, bem, nem tanto Mas tudo o que você pode fazer é perguntar e fazer a pergunta, e se eles voltarem com um preço ridículo, provavelmente é melhor procurar outras Agora, outra maneira muito inteligente de obter um domínio.com realmente excelente é mudar a ortografia Por exemplo, tínhamos uma marca com a qual trabalhamos há pouco tempo chamada Spruce, mas em vez de usar a grafia comum de SPUCE, na verdade mudamos o C para um S, que ainda soava na verdade mudamos o C para um S, como abeto, mas Foi melhor para SEO e também nos ajudou a obter um domínio claim.com, que tinha apenas cinco letras Agora, isso é quase inédito quando se trata de encontrar domínios com cinco letras, e isso parecia ótimo Mas conseguimos encontrá-lo e tivemos muita sorte. Portanto, sinta-se à vontade para verificar se você realmente quiser e tentar usar essa abordagem para ver o quão sortudo você é quando se trata de encontrar seu domínio. Agora, se você não quiser alterar a grafia do nome, você não quer pagar um prêmio e também não quer adicionar uma palavra Sempre há a opção de alterar a extensão no final. Agora, a maioria das pessoas quer que domínio.com seja totalmente honesto, mas não é o único domínio disponível. Há muitas outras opções. Por exemplo, se você mora na Inglaterra ou na França, por exemplo, pode usar dot no Reino Unido ou do fr, que é relevante para sua localização geográfica específica. Essa pode não ser a melhor opção para alguém que deseja fazer negócios internacionalmente, como em uma marca comercial, por exemplo. Se você deseja se concentrar apenas localmente, essa pode ser uma ótima opção para você. Se nenhuma dessas opções estiver funcionando e você nem tiver certeza sobre o nome de domínio que deseja usar ou o nome da marca que possui , pode valer a pena explorar uma marca completamente diferente Nas últimas décadas, eu e minha equipe da agência Clement Tn House Brand ajudamos milhares de empreendedores diferentes usando nossa abordagem exclusiva de usando nossa abordagem exclusiva nomenclatura de marcas para encontrar a marca perfeita para Agora, infelizmente, reservamos muito até 2025. No entanto, temos nosso processo definido como um curso on-line, que você deve ser capaz de encontrar ao conferir nosso perfil. Portanto, certifique-se de verificar isso, e isso pode realmente ajudá-lo a encontrar uma marca incrível para sua empresa. Eu realmente espero que esta lição tenha ajudado você a entender como talvez conseguir um nome de domínio realmente bom para sua marca. Mas além disso, se você tiver alguma dúvida, por favor me avise que estou aqui para apoiá-lo e ajudá-lo o máximo possível. Mas mal posso esperar para ver você na próxima lição. Então eu vou te ver lá. 68. Lançamento do site: adicionando um domínio personalizado ao seu site: Como você anexa um domínio personalizado ao seu site? Bem, na verdade é muito simples. Então, vamos mergulhar e eu vou te mostrar como fazer isso. Portanto, o primeiro passo é realmente acessar seu site. Agora, este é obviamente o site da Lancaster Academy of Design and Brand E quando entrarmos nesta seção aqui, você verá um pequeno botão chamado Configurações do site. Então é para lá que queremos ir. Agora, ao clicar em Configurações do site, você será direcionado para esta página, que só deixa você clicar em Publicação. E você se encontrará aqui, onde verá produção e seus domínios personalizados abaixo. Agora, como você pode ver aqui, eu já tenho domínios personalizados anexados ao meu site Mas se você olhar acima desses domínios, poderá ver um pequeno botão que diz adicionar domínio personalizado Agora, a melhor maneira de adicionar um domínio personalizado, na minha experiência, se você tiver seu domínio com GoDaddy ou o Google Domains, por exemplo, é simplesmente selecionar o domínio Quick Connect Porque o que isso fará é basicamente abrir um rápido processo de seleção, onde você poderá começar a adicionar seus domínios ou WWW dot, domain.com ou WWW dot, Na verdade, ele também remove o ponto WWW e, em seguida, clica em Continuar Em seguida, ele analisará o domínio, detectará o provedor de DNS e, em seguida, também começaremos a configurar os detalhes Agora, obviamente, não preciso conectar esse domínio a esse site específico. Depois de conectar seu domínio usando essa abordagem, é muito simples publicar seu domínio. Agora, às vezes, as configurações de DNS do seu domínio demoram um pouco configurações de DNS do seu domínio demoram um Conecte-se à plataforma de fluxo da web, e isso pode levar de algumas horas a 48 horas. Mas quando for vinculado com sucesso e tudo estiver perfeito, ele será conectado ao lado de cada um dos domínios E nesse ponto, tudo o que você precisa fazer é publicar seu domínio clicando neste botão aqui e pressionando publicar dois domínios selecionados Agora, se formos para outro site, eu só quero mostrar como é se você não tiver um domínio prontamente anexado ao seu site Agora, isso basicamente me diz que, se eu quiser adicionar um domínio personalizado, preciso adicionar um plano de site emparelhado. Agora, em uma lição anterior, eu realmente mostrei os diferentes planos do site e, em última análise, isso deve ajudá-lo a tomar a melhor decisão com base no que é melhor para você. Mas, em última análise, nessa situação, preciso clicar nesse botão e escolher um plano de site que melhor atenda às minhas necessidades pessoais. Agora, só para resumir, novamente, o plano de inicialização, você não pode adicionar um de mim personalizado a esse plano específico Agora, o plano básico é para você, se você não precisar adicionar algum tipo de blog ou algum tipo de função CMS Mas se você precisar adicionar um blog e quiser realmente adicionar conteúdo ao seu site, escolha a função CMS porque é a mais popular porque é simplesmente a melhor Escolha a opção CMS para cada um dos meus sites, e eu sempre pago anualmente só porque isso ajuda a economizar um pouco de Agora, obviamente, se você é uma marca de comércio eletrônico, precisa selecionar um site de comércio eletrônico e, geralmente, o padrão será mais do que suficiente para você. Então, depois de selecionar o melhor plano para você, basta pagar por ele. E então, ao voltar para a página, você poderá conectar seu domínio personalizado usando a técnica que mostrei anteriormente nesta lição. De qualquer forma, se você tiver alguma dúvida ou alguma coisa em relação à conexão de seu domínio, entre em contato comigo. Estou mais do que feliz em tentar ajudar o máximo possível. Mas, além disso, espero que esta lição tenha sido útil e nos vemos na próxima. 69. Após o lançamento: instalando o Hotjar: O que é Hot jar? Como isso pode ajudar você a melhorar seu site ao longo do tempo e, em última análise, obter um melhor desempenho do seu site? E como você o instala? Bem, o Hotjar é, em última análise, um software onde você pode rastrear exatamente o que os visitantes do seu site estão fazendo quando visitam seu site Usando a plataforma Hotjar, você pode literalmente ver cada movimento do mouse que alguém faz ao visitar seu site para ter certeza de que sabe que seu site está funcionando e fazendo o que deveria Porque, como você pode ver aqui, eu literalmente tenho centenas de gravações de todo o mundo de pessoas que encontraram meu site e estão deixando gravações para que eu possa realmente ver exatamente o que elas fizeram no site, por que visitaram e também por que não compraram se eu estivesse tentando vender algo para elas Basicamente, isso ajuda você a descobrir exatamente o que está acontecendo em seu site sem adivinhar e se perguntar se você está certo ou errado Porque você pode realmente ver os movimentos do mouse que a pessoa está fazendo no seu site. Você pode ver no que eles estão clicando, no que estão hesitando e no que não estão Talvez se um botão não estiver funcionando, deveria estar. Você pode literalmente ver tudo e refinar e aperfeiçoar as coisas à medida que avança Agora, a melhor coisa sobre o software é que ele é totalmente gratuito e você não precisa pagar um único centavo por ele até um certo número de visitantes do site Agora, quando seu site fica super ocupado, você pode basicamente ter 100 sessões diárias em vez de apenas 35. Mas, pessoalmente, acho que 35 é o suficiente para mim. Isso só me ajuda a ver algumas sessões todos os dias e refinar meu site com base nessas sessões Não sinto a necessidade de atualizar para 100 seções ou mesmo 500 seções, porque acho que não vale a pena para mim pessoalmente. E, na verdade, eu também não sugeriria que você fizesse isso até que seu site estivesse recebendo uma grande quantidade de tráfego. Então, obviamente, conhecemos os benefícios que podem advir de ver desempenho e o comportamento de cada visitante em seu site. Você pode ajudá-lo a superar desafios e refinar seu site com mais facilidade e rapidez Então, como você realmente instala o Hotjar em seu site? Agora, com o webflow e o Hot jar trabalhando juntos sem esforço, fica muito simples, e vou mostrar como fazer isso neste vídeo Agora, a primeira coisa que você precisa fazer é criar um ativo no Hotjar Então, se você for até aqui e clicar em Adicionar novo site, basta adicionar o apa add new Scott Limited, e a organização. Então, por fim, você adicionaria o nome, que é scotlncaster.com URL do site. Vamos usar exatamente o mesmo. No setor industrial, Let's CT commerce. Declaro que sou proprietário deste site. Site de anúncios. Agora, certifique-se de realmente copiar e colar o link nesta seção porque, por algum motivo, ele não gosta quando você não coloca o HTTPS na frente dele. Em seguida, basta clicar em Adicionar site. E então você basicamente será direcionado para esta página onde, obviamente, tenho muitos sites diferentes que estou gerenciando ao mesmo tempo com minha agência de branding Então, neste momento, basta acessar essa seção específica, que é relevante para o seu site e clicar em Instalar código de rastreamento. Isso pode parecer um pouco assustador, mas é muito fácil. Confie em mim, vamos seguir passo a passo. Agora, se clicarmos em Instalar código de rastreamento, você verá esse código aqui. Você não sabe nada sobre código para instalar isso em seu site, e eu vou te mostrar exatamente como fazer isso. Então, tudo o que você faz é acessar este botão superior aqui e clicar em Copiar código. Depois de copiado, basta acessar o site do web flow e clicar nas configurações do site Então, quando você vier aqui, basta clicar no código personalizado. Agora, lembre-se de que não estamos fazendo nenhuma codificação aqui apenas copiando e colando É o mesmo que copiar e colar texto em um documento do Word, e é super simples de fazer, não se preocupe Agora, quando você chegar a esta seção, você terá o código principal e o código da foto. Agora, o código principal de que você precisa é onde você deseja colar o texto Agora, você verá aqui que eu realmente colei esse texto aqui Agora, este é exatamente o mesmo texto que eu tenho no Hot Jar. Literalmente, diz Hot Jar e termina com o roteiro. Agora, depois de adicionar isso, obviamente é o da Lancaster Academy of Design and Brand, que é um pouco diferente porque na verdade, tem um nome comercial diferente e, obviamente, tem um conjunto de código diferente por trás dele Mas é exatamente a mesma coisa. Tudo o que fiz foi pressionar copiar código e adicioná-lo no cabeçalho do código. E depois de fazer isso, tudo o que você precisa fazer é pressionar publicar e, em seguida, voltar ao Hot Jar e, basicamente, verificar a instalação. E o que acontecerá quando você verificar a instalação é que ela lhe dará uma boa visão ecológica, e você sabe que o Hotjar e o web flow estão trabalhando juntos para começar a rastrear os visitantes do seu site Então, sempre que quiser ver qualquer uma das gravações do seu site, basta acessar hot jar.com e conferi-las, pois elas estarão bem organizadas para você e você poderá vê-las, analisá-las e pesquisá-las para e pesquisá-las para melhorar seu site Na verdade, reviso meus dados do Hot Jar todos os meses para simplesmente ver por que as pessoas estão acessando meu site, o que estão fazendo no meu site, se há algo que possa melhorar. Então, eu o tempo durante o mês para basicamente melhorar o site, para que meu site fique cada vez melhor com o passar do tempo. Eu sempre faço isso no primeiro ou todo mês, apenas para ter certeza de que estou por dentro de tudo e que meus sites estão funcionando perfeitamente. Qualquer um, se você tiver alguma dúvida em relação ao Hot Job, por favor me avise. Estou sempre aqui para apoiar e ajudar, mas isso deve ser bem simples, e espero ver você na próxima lição. Te vejo em breve. 70. Após o lançamento: criando uma estratégia de marketing de site: Ok, então você criou um site incrível para sua empresa. Então, como você realmente começa a receber tráfego lá? Para que as pessoas possam realmente comprar de você e descobrir mais sobre o que você tem a oferecer? Agora, tudo isso se resume ao tráfego do site e ao desenvolvimento de uma estratégia de marketing, que pode ajudá-lo a obter tráfego relevante para seu site, para que as pessoas possam descobrir quem você é e como você pode ajudar. Obviamente, este é um curso de desenvolvimento de sites para ajudá-lo a criar um site incrível para representar sua marca perfeitamente. Mas se você acha que seria útil aprender como desenvolver uma estratégia de marketing acionável para sua marca para direcionar tráfego relevante para seu site e, em última análise atrair mais clientes e gerar mais receita e vendas , o próximo curso do programa Brand Builder P pode ser exatamente o que você está procurando E nesse curso, ajudamos você a definir seus objetivos comerciais e de marketing e, em seguida, ajudá-lo a chegar lá, independentemente de você ter o maior orçamento do mundo. Sem orçamento. Em última análise, queríamos dar a cada empreendedor, não importa quanto dinheiro tivesse o plano para ajudá-los a aperfeiçoar seu marketing E nesse curso, abordamos o funil de marketing, que é essencialmente o que cada empresa usa para gerar clientes para sua marca Agora, esse é um processo de quatro etapas, e tudo começa com a conscientização. Então, em última análise, o primeiro passo para fazer com que alguém realmente compre de você é conscientizá-lo sobre o que você tem a oferecer. Agora, existem várias maneiras diferentes de fazer isso, como YouTube, Instagram, e muitas outras formas que não estão relacionadas às mídias sociais, que, na verdade, abordamos no curso de marketing mais profundidade para encontrar a melhor solução para você Em última análise, se alguém não sabe quem você é ou o que você pode oferecer, pessoa nunca poderá comprar de você. Mas uma vez que eles saibam quem você é, a próxima etapa do funil é considerar Agora, é aqui que eles realmente consideram você como uma opção potencial ou uma solução potencial para seus desafios. É aqui que eles estão visitando seu site. Eles estão tentando descobrir se você é a opção certa para eles. E, finalmente, uma vez que eles decidam que você é a melhor opção e o melhor valor para aquela situação específica, então vai para o terceiro estágio, que é a conversão. É aqui que eles realmente compram de você. É aqui que eles tiram o dinheiro arduamente ganho do bolso e o entregam em troca do que você tem a oferecer. Agora, seu site é uma parte fundamental realmente obter essa conversão com sucesso. Porque se seu site não estiver à altura, que se você fez este curso, deveria ser, então, em última análise, você nunca conseguirá essa conversão porque seu essa conversão porque seu site não é confiável e não dará ao cliente a tranquilidade de colocar a mão no bolso, dar seu dinheiro, porque ele não acreditará que o o que eles receberão em troca do dinheiro valerá a pena Basicamente, um cliente fica tranquilo quando sente que vai conseguir o que espera ou talvez até mesmo superar suas expectativas ao lhe dar o dinheiro É por isso que as marcas realmente existem, porque quando damos nosso dinheiro a uma marca confiável, sabemos que receberemos algo em troca, o que está de acordo com nossas expectativas. Se nunca fizemos negócios com uma pessoa ou marca antes , no final das contas nos sentimos um pouco incertos quando entregamos nosso dinheiro, porque é um pouco mais Agora, você provavelmente está se perguntando qual é a última etapa desse funil de marketing E isso é, em última análise, retenção. Agora, depois de converter um cliente, você se esforçou muito para realmente conseguir essa venda. A próxima melhor coisa a fazer é manter essa pessoa fiel à sua marca e ao que você tem a oferecer. É por isso que marcas como a Netflix, por exemplo, e também a Apple são empresas super lucrativas, porque, em última análise, elas podem ter receitas recorrentes porque estão sendo pagas de forma consistente todos os meses Por exemplo, posso ter comprado esses fones de ouvido e esse computador da Able, mas também pago $10 todos os meses pela minha nuvem, onde basicamente armazeno todos os meus arquivos Isso é dinheiro entrando instantaneamente no bolso da Apple todo mês. E a única maneira de recuperar isso deles é finalmente pegar todos os meus arquivos e colocá-los em outro lugar. Realmente não vale a pena. O Netflix é exatamente o mesmo. Se você parar aqui, Netflix , deixará de ter acesso a todo o excelente conteúdo. Então, em última análise, você basicamente dá à Netflix de dez a $12 por mês para que possa aproveitar suas noites preguiçosas com Agora, na verdade, isso é algo que abordamos muito mais profundidade e muito mais detalhes no curso de marketing. Mas, obviamente, queremos respeitar seu tempo aqui. Agora, no que diz respeito à construção de um negócio, seu primeiro cliente ou conseguir um cliente é o primeiro passo. Mas manter esse cliente é onde a maior parte do lucro é obtida. Portanto, se você puder tentar mudar seu modelo de negócios para, em última análise, vender mais para essa única pessoa e realmente maximizar o CLV, o valor da vida útil do cliente, poderá obter mais suco de cada laranja que chega ao seu site , também conhecida como cliente Em última análise, obtenha o máximo de receita possível no menor espaço de tempo Agora, obviamente, é um pouco mais complicado do que isso. E, obviamente, não podemos abordar tudo neste curso em particular porque este é principalmente um curso de desenvolvimento de sites, mas sinta-se à vontade para entrar em contato se tiver alguma dúvida. Ficarei mais do que feliz em ajudar e apoiar o máximo possível, Ficarei mais do que feliz em ajudar e apoiar o máximo possível porque quero ver você ter sucesso De qualquer forma, espero que você ache esta lição útil e nos vemos na próxima. Te vejo em breve. 71. Após o lançamento: refinando seu site para otimizar para a conversão: Como você pode refinar seu site para otimizar a conversão e o desempenho Bem, a primeira coisa que eu recomendo que você faça é reservar um dia por mês para conferir seus dados do hot jar. Agora, se você conferiu a lição anterior do curso sobre como instalar o Hot jar, você já deve ter isso em seu site e estar pronto para começar. Agora, depois de instalá-lo, reserve um determinado dia por mês, potencialmente o primeiro do mês, que é o que eu uso pessoalmente, onde você basicamente dedica algum tempo para ver todas as visualizações e todas as pessoas que visitaram seu site e realmente fizeram algo em seu site e talvez clicado ou simplesmente explorado naquele mês Agora, em última análise, podem ser algumas gravações se o seu site for popular E se for, isso é fantástico. Mas o que eu sugeriria é passar o máximo de tempo possível revisando essas gravações e depois apenas fazendo anotações ao lado para dizer basicamente: Ok, nesta página em particular, as pessoas tendem a não encontrar o botão de call to action com muita facilidade Como posso pegar esse botão e torná-lo mais proeminente na página? Isso é algo que eu aprendi muito recentemente em uma página específica de uma das minhas empresas, o que acabou me permitindo aumentar minha taxa de conversão para leads gerados em até 4%. Originalmente, eu estava obtendo apenas 2% de conversão e, em seguida, apareciam seis com apenas uma única alteração, o que, mesmo se você for matemático eleitoral, pode ver apenas uma única alteração, o que, mesmo se você for matemático eleitoral, que é um resultado bastante decente considerando que tudo o que fiz foi alterar um único botão na página, o que me leva à minha próxima abordagem quando se trata realmente otimizar seu site no fluxo da web Agora, tudo isso se resume a algo chamado teste AB, que não é ciência de foguetes Na verdade, é muito simples, então não se preocupe. Agora, o que é realmente importante lembrar quando você está testando coisas diferentes nas páginas é não mudar muita coisa de uma só vez. Por exemplo, se eu pegasse aquela página com aquele único botão, que eu alterei e alterasse três ou quatro outras coisas na página , eu nunca saberia o que estava realmente afetando a maior taxa de conversão Pode ter sido o botão, é claro. Pode ter sido a mudança de manchete. Pode ter sido a mudança de base. Pode ter sido a mudança de imagem que eu fiz. Se eu fizesse todas de uma só vez , não teria dados para refletir sobre o novo comportamento. Então, o que é realmente muito melhor fazer é basicamente pegar o design existente e mudar uma única coisa antes mudar outra coisa e, lentamente, mas com certeza, ficar cada vez melhor com o passar do tempo. Porque, por exemplo, se eu mudar aquele único botão e a taxa de conversão piorar , eu saberia que deveria colocar esse botão de volta do jeito que estava. E se você puder acompanhar isso e ficar de olho nisso e adotar uma abordagem muito gradual de como você está, projetando seu site e melhorando-o ao longo do tempo, gradualmente, você acabará com um resultado muito melhor no final. Mas o que a maioria das pessoas faz é tentar mudar o site inteiro de uma só vez. E eles não têm nada com que se comparar porque não sabem o que está funcionando e o que não está funcionando, então você está constantemente no jogo de adivinhação Na verdade, eu tinha um site onde o construí para um cliente. Custou cerca de 15 mil. E duas semanas depois de eu entregar o site ao cliente e basicamente me certificar de que ele tinha tudo em ordem, eles finalmente mudaram praticamente toda a página inicial Agora, isso obviamente não era o ideal, porque nem sabíamos o que estava funcionando e o que não estava funcionando. Tínhamos simplesmente o mesmo conhecimento que tínhamos no início, quando não tínhamos dados. Agora, as pessoas estão acessando o site e, felizmente, consegui pegá-lo e voltar ao que tínhamos antes, antes que as coisas ficassem muito Mas, em última análise, precisamos ter certeza de que adotamos uma abordagem muito cuidadosa ao desenvolver nosso site, quando estamos otimizando coisas, quando estamos tentando melhorar as coisas Porque se você não tem nada com que comparar, e você realmente não sabe se está melhorando ou não. Você realmente não sabe o que está fazendo a melhoria. E, portanto, você meio que fica no mesmo lugar ou até pior. Agora, leva um pouco de tempo e um pouco de paciência para realmente fazer essa abordagem corretamente. Agora, se você tiver alguma dúvida sobre como usar o Hot jar ou talvez avaliar os dados do seu site, sinta-se à vontade para entrar em contato Estou aqui para apoiá-lo de qualquer maneira que eu puder. Eu realmente quero que você tenha sucesso, então sinta-se à vontade para entrar contato se precisar de ajuda adicional. Mas espero que você ache esta lição útil, e espero vê-lo na próxima. Te vejo. 72. Após o lançamento: como saber quando seu site é perfeito: Então, como você sabe quando seu site está pronto e perfeito? Agora, neste momento, você trabalhou muito para entender como criar seu site e provavelmente chegou a um ponto em que está bastante satisfeito com ele. Mas como você sabe que está certo? Bem, há algumas coisas que você precisa saber quando se trata de realmente criar um site e saber quando ele é perfeito. E a verdade é que nunca é realmente perfeito. E a razão pela qual eu vejo isso é porque sempre há espaço para melhorias. Agora, o que eu ofereço, a cada aluno que investe neste curso, é eu lhes dê um pequeno feedback em relação ao design do site Agora, você investiu neste curso e, finalmente, confiou em mim para guiá-lo nesse processo. Então, o mínimo que posso fazer é dar um pequeno feedback sobre a aparência e a aparência do seu site, para que você possa torná-lo o melhor possível. E para fazer isso, eu realmente preciso ver seu site. Então, quando terminar seu site, compartilhe-o comigo como um projeto deste curso, porque isso basicamente garantirá que eu possa lhe dar uma crítica construtiva ou apenas dizer o quão bom você é, para que você possa se sentir totalmente confiante de que seu site está pronto para ser publicado E quero 100% de promessa de que, se você o compartilhar como um projeto Neste curso, vou querer 100% de entrar em contato com você e fornecer críticas construtivas completas e qualquer feedback que eu tenha para ajudá-lo a melhorar o site Agora, você não precisa ouvir todos os meus conselhos, mas eu só quero lhe dar minha opinião sincera de que você pode tomar a melhor decisão para sua empresa e sua marca. E depois de realmente fazer isso e ter seu site perfeitamente instalado, a próxima etapa é realmente começar a direcionar tráfego para seu site. Queria abordar brevemente as etapas de um funil de marketing para que você entendesse o papel do seu site na conversão de alguém que inicialmente não conhecia sua marca em um cliente pagante e como tudo isso funcionava de alguém que inicialmente não conhecia sua marca em um cliente pagante e como tudo isso Mas, para que você crie uma estratégia de marketing acionável para sua marca e sua empresa e realmente comece a expandir sua marca e seus negócios, necessário ter uma estratégia e um plano para direcionar o tráfego do site para é necessário ter uma estratégia e um plano para direcionar o tráfego do site para que eles possam comprar de você Mas para que você realmente comece a direcionar tráfego, que seu site possa começar a convertê-los em clientes pagantes, você precisa ter um plano para realmente fazer o marketing certo E se você já fez algum de nossos cursos e já fez algum dos nossos cursos no programa Brand Builder Pro, saberá que a próxima etapa do programa Brand Builder Pro é seu curso de marketing estratégico. Isso abrangerá tudo o que você precisa para criar uma estratégia de marketing acionável que funcione no mundo digital em que estamos hoje para direcionar tráfego relevante para seu site, para que você possa criar mais clientes, gerar mais receita e, finalmente, mais lucro De qualquer forma, sou muito grato por você investir seu tempo e energia em confiar em mim para ajudar a guiá-lo nesse processo Mal posso esperar para ver o site que você criou. Por favor, certifique-se de compartilhar comigo de qualquer maneira possível, e espero vê-lo em um curso futuro Muito obrigado, e nos vemos novamente em breve. 73. Tempo do projeto do site: Só quero te dar uma pequena dica, só para testar seus conhecimentos Agora, quero ter certeza de que você faça todas as perguntas que tiver em relação ao design estratégico do site, mas também quero que você faça uma captura de tela de um site que você acha que foi perfeitamente projetado e enviado como um projeto neste curso E esse site pode estar no Pinterest. Pode ser algo que você encontra no Google. Pode ser um site que você realmente conhece. Pode ser até mesmo um site que você criou que agora sabe que segue as principais regras do design estratégico as principais regras do design estratégico e do belo design do site. Portanto, certifique-se de compartilhar pelo menos um site como projeto neste curso, apenas para mostrar que você entende os principais fundamentos em relação ao design estratégico do site E fique à vontade para deixar algumas anotações também. Quero que você entenda as lições que ensinamos Você sempre sabe que estou mais do que feliz apoiar você e todos os outros alunos que investem em nossos cursos o máximo possível . Portanto, sinta-se à vontade para entrar em contato. Se precisar nos enviar um e-mail, sinta-se à vontade e confira nosso site. Temos muitas outras ferramentas e recursos disponíveis para ajudá-lo em sua jornada de construção de marca. Muito obrigado, e nos vemos na próxima. Se.