Construir uma página de desembarque com otimização de taxa de conversão 2022

1. Apresentação: Olá a todos, bem-vindos a este novo curso sobre aprendizado, a página inicial foi projetada com técnicas adequadas de otimização de SEO. É um sonho meu criar esse curso definitivo para quem quer trabalhar com o lado comercial do design. Aqui estamos. Espero que este curso possa literalmente mudar sua vida. Então, o que é isso, o que vamos aprender aqui? Portanto, o web design é, na verdade, uma combinação de dois conjuntos de habilidades ou setores diferentes. Um deles é o design gráfico. Como usar design, formas, texto e imagens para transmitir uma mensagem. E a outra é a web. Como as pessoas interagem na web, quais experiências do usuário e como você desenvolve suas ideias de tráfego para fazê-las funcionar no navegador. Então, todas essas coisas são coisas que abordaremos neste curso. Você pode esperar aprender os fundamentos das páginas de destino, incluindo coisas extras, como topografia, uso de cores, uso de layouts e uso de imagens, entre outras técnicas de marketing como escassez, autenticidade, credibilidade. Também falaremos sobre todas as habilidades na Web do ponto de vista da experiência do usuário, ponto de vista do design de interface e tudo que realmente funciona na web. Neste curso, veremos como ganhar dinheiro com essa habilidade. Como você pode pegar projetos e realmente fazê-los para os clientes. E dinheiro convertendo um simples NADH e dois planejamentos focados em convergência, que se você estiver planejando comercializar e anunciar seu site, seu produto ou serviço on-line , obterá resultados muito melhores enviando seu tráfego para uma página de destino dedicada. E para isso, você não precisa de nenhum conhecimento prévio sobre direitos autorais. Além disso, habilidades amarelas. Tudo o que você precisa é seguir estas instruções simples que abordarei neste curso. Agora, quem sou eu? Se você não está familiarizado com, Meu nome é Jay Hair Helmet. Sou designer de UX, com experiência de mais de cinco anos. Neste momento, trabalhei como designer sênior de UX uma empresa multinacional durante todo esse tempo Ajudei centenas de proprietários de pequenas empresas, agências de design startups empresas e diferentes empresas de software para obter uma melhor conversão de leads em seus sites. Analise pessoalmente os períodos finais com análises competitivas e oriente-os sobre como eles podem melhorar suas páginas de destino para obter resultados de qualidade e gerar mais leads com a queda das técnicas de CRO. Eu compartilhei minhas técnicas e dicas de SEO com diferentes empresas e empreendedores. E eles estão muito satisfeitos com essas técnicas e geraram mais folhas em comparação com as páginas de destino anteriores. E agora estou empolgada em ensinar a vocês esses marketing, técnicas e dicas em minha nova página de destino, Curso. Este curso foi desenvolvido de tal forma que mesmo um iniciante que não conhece o web design e é novo no web design, pode facilmente entender e usar técnicas em seu design de arte. E isso é o que vamos abordar sobre isso, neste curso. Agora, por que você deveria se importar? Por que você deveria querer se tornar um designer de UX? Como eu disse, essa é uma habilidade muito valiosa no mercado hoje e também no futuro. Os sites não vão a lugar nenhum. Não importa que a maioria das pessoas esteja em seus celulares. Eles ainda estão visitando sites, ainda estão fazendo compras on-line. É por isso que vou abordar as técnicas de venda de marketing em nosso web design ou página de destino. Então, isso é basicamente o suficiente para esta palestra. Nos vemos na próxima palestra. 2. Usando os arquivos de exercício: Neste vídeo, vou mostrar como você pode começar com lutas de exercícios. Os arquivos de exercícios deste curso estão incluídos nesta palestra. O arquivo de exercícios que enviei contém um arquivo Figma. Ele contém todos os ativos usados neste curso. Faça o download deste arquivo para que possamos continuar nossa jornada criando uma página inicial de calçados com técnicas de CRO no Figma. Este arquivo de exercícios que eu enviei não afeta meu arquivo, então, basta me acompanhar neste curso. Então, vocês sabem como criar seu próprio projeto Figma. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 3. O que são páginas de destino, incluindo minha opinião pessoal?: Ok, então há muitos tipos diferentes de páginas do Nanak na Internet. Há muitos tipos diferentes de modelos para páginas. Mas hoje, vou mostrar quatro tipos muito comuns de modelos e páginas de destino on-line. Para que você possa aprender um pouco mais sobre especificamente como você precisa configurá-las para ter o maior impacto nas conversões micro e macro e expandir seus negócios on-line. Está bem? Então, a primeira sobre a qual quero falar é a landing page. Então, se você não está familiarizado com a página de destino, ela é a página principal do seu site onde você quer que as pessoas entrem e você quer que elas se convertam. Você provavelmente está usando isso para otimização de mecanismos de pesquisa e muitas mídias pagas em muitas páginas. Eles são criados especificamente para mídia paga. Mas se você fizer isso corretamente, poderá usar a mesma página para se classificar no Google. E você usará a mesma página para mídia paga. E você pode segmentar as mesmas palavras-chave e atingir o mesmo público nessas páginas. Então, especificamente, como você deseja configurar sua página de destino para obter os melhores resultados. Então, a primeira coisa que você quer fazer é ter um título poderoso e alguns marcadores ou algum texto. E quando você pensa sobre isso, você quer pensar no teste de sete segundos. Então, dentro do sétimo segundo, se alguém vier especificamente para essa área, eles sabem quem você é? Eles conhecem o problema que você resolve? Devido a conhecer seus principais diferenciais. E eles têm certeza suficiente de que querem clicar no botão Contato? Eles querem entrar em contato com você. Também na parte superior da página de aprendizado. Certamente é uma boa ideia ter uma imagem poderosa que se alinhe especificamente com esse grupo demográfico. Você quer testar coisas diferentes. Portanto, uma imagem é ótima se estiver alinhada com a demografia e com o que você está tentando vender. Além disso, você também pode experimentar depoimentos. Você pode experimentar o curso. Há muitos tipos diferentes de coisas que talvez queiramos colocar lá, dependendo do tipo de negócio que você tem. Então você tem a manchete, o teste de sete segundos. Você captou algum tipo de imagem que fala especificamente com essa pessoa. E, em muitos casos, você conseguirá obter uma conversão correta. Agora. Por outro lado, mencionarei que esse apelo à ação é muito, muito importante. Então, testar a cor disso, testar o texto que você tem, seus microfones são uma grande diferença. Então, os mais comuns são: saiba mais. Teste de contato. Agora, comece, receba uma proposta gratuita. Ligue para nós. Você precisa pensar em todas as maneiras diferentes pelas quais as pessoas gostariam de entrar em contato. E você precisaria pensar no nível de comprometimento que eles têm nesse momento. Então, se for só para saber mais, muito menos comprometimento do que entrar em contato conosco. Então, você quer pensar que a sabedoria está em uma jornada e testar diferentes mensagens, além de testar cores diferentes lá. Muitas pessoas adoram o grande botão laranja. O botão Pig Oink é fantástico, mas na verdade não importa tanto a cor, quanto a forma como ele se encaixa na página, certo? Portanto, com qualquer página da web, você nunca quer ter um esquema de cores ou muito ocupado. Há uma coisa muito, muito importante. Você quer que a principal chamada à ação seja a coisa mais brilhante da página. É para lá que o olho vai. E você verá que, se você instalar coisas como mapas de calor chamados Content Analytics , isso chamará mais atenção. Então, à medida que você avança na página, você quer pensar em, bem, ok, então aqui, eu dei a minha melhor proposta de elevador, olho direito para o segundo teste de salmão, eu fiz um bom trabalho, mas não os vendeu totalmente. Então, o que você vai fazer a seguir? Bem, essa é uma pessoa que precisa de mais informações. Então, o que você quer pensar é, medida que avança na página, quais são os principais módulos que farão com que essa pessoa se converta? Muitas vezes, são coisas como credibilidade. Então, você já apareceu em grandes indústrias, publicações ou publicações nacionais? São depoimentos. Você tem depoimentos de seus clientes específicos que trazem esse nível de credibilidade. Se você tem 1.000 avaliações, você sabe, confie em um piloto ou algo parecido, onde você traz e pode mostrar esse nível de credibilidade. São perguntas frequentes em que você responde perguntas específicas que essa pessoa teria para que o torque T. E tente descobrir em outras páginas do seu site. Adoro colocar perguntas frequentes. É uma postagem no blog? São prêmios, você sabe, coisas que reforçam essa credibilidade. E você como especialista no assunto ou sua empresa como especialista no assunto, que eles queiram se converter. É reversão de risco? Se você não está familiarizado com o conceito de reversão de risco, é a ideia de que, se você já sabe, comprou uma garantia de reembolso de 30 dias. A reversão de riscos é importante para fazer que as pessoas se comprometam, pois faz com que elas eliminem completamente a barreira de entrada para se inscreverem em sua empresa. Então, quando pensamos em uma landing page, você quer pensar em todos esses elementos diferentes e estar constantemente testando. Não sei dizer quantas vezes as pessoas simplesmente deixarão essa área. Eles são os mesmos por anos e anos e anos. Pense em quanto dinheiro você poderia ganhar apenas roubando coisas e aumentando essa taxa convergente, um ou dois por cento. Especialmente se você estiver executando dezenas de milhares, centenas de milhares, milhões em mídia paga todos os meses, um aumento de 1%. Isso é substancial no negócio. Absolutamente substancial. Eu compartilhei minhas técnicas e dicas de SEO com diferentes empresas e empreendedores. E são técnicas bastante satisfatórias e geraram mais folhas em comparação com as páginas de destino anteriores. Agora, estou empolgada em ensinar a vocês essas técnicas e dicas de vendas de marketing na minha página de destino. A otimização da taxa de conversão é uma das coisas mais divertidas que existem quando você a vê realmente funcionando. Ok, então conversamos sobre páginas de destino e, obviamente, eu poderia me aprofundar muito mais nisso. Mas neste vídeo, quero apenas dar uma visão geral das páginas da clínica, o que são páginas de destino e como elas o ajudarão em seus negócios. Isso é tudo para este vídeo. Nos vemos no próximo vídeo. 4. Configurando grade para página de aterragem: Bem-vindos de volta, estudantes. Neste vídeo, vamos configurar a página de destino paga. Primeiro, crie um quadro pressionando a tecla F do teclado. E na área de trabalho. No menu suspenso, escolha 14, 40 por 1024 quadros. Renomeie o quadro para mostrar a página de destino. Agora, no Inspetor de propriedades, clique nessa opção de camada. A partir daqui. Escolha colunas. Depois disso, altere a conta para 12, sua margem lateral para 160 pixels. E é fundamental para 24. Agora, pressione Shift plus r do teclado, trazendo as réguas. Depois disso, adicione uma régua à esquerda e outra à direita. Adicione também uma régua da parte superior com uma altura de 80 pixels, que é o espaço alocado para nosso cabeçalho. É assim que você configura uma grade para uma landing page. Nos vemos no próximo vídeo. Vamos ver um resumo do design. E então vamos nos aprofundar na seção de absolvição do herói de nossa página de destino. 5. IU de seção de cabeçalho e herói: Neste vídeo, iniciaremos a seção de cabeçalho e herói da nossa página de destino. Mas antes disso, deixe-me dar uma rápida visão geral do resumo do Four Design. Então essa é a nossa visão de design. Aqui você vê o nome da empresa, a descrição da empresa, resultados do projeto e o prazo final do projeto que não é entregue. Você verá que o cliente deseja criar uma landing page, um site de calçados para falhas. A landing page deve ser um CRO otimizado para que ele possa gerar mais leads e negócios. Então, agora vamos falar com nosso amigo. Aqui, vamos criar o cabeçalho da nossa página de destino, pois esta é a página de destino. Então, eu não vou criar o logotipo para esta landing page. Estou apenas colocando um logotipo genérico aqui. Depois disso, no lado direito da barra de navegação, vou colocar um ícone de navegação de doze por 12 círculos com um ícone de carrinho de compras, pois é uma página de destino de comércio eletrônico. Essa é a paleta de cores que estamos usando em nossa página de destino. E as formas que vamos usar nesse idioma ou nos confrontos entre jogo e hebraico. Agora, criamos o cabeçalho da nossa página de aprendizado. Pressione a tecla L e adicione uma linha separada abaixo dela e altere sua cor para vermelho também. Agora vamos descer para nossa seção de heróis. No lado esquerdo da nossa seção de heróis, escreveremos uma proposta de valor com uma pequena descrição sobre o produto. Depois disso, vamos adicionar o tamanho e o tipo do produto porque é uma página de destino de calçados. Agora vamos adicionar um CTA, que é que devemos ser proeminentes, então desenhe um retângulo redondo de 295 por 64. Preencha com sua cor radial preta. Altere o raio da borda desse retângulo para quatro. Depois disso, adicione um ícone de carrinho de compras aqui. Copie esse ícone dos arquivos de exercícios. Agora, adicione um texto de CTA e o preço do produto. Então, isso chamará a atenção do usuário. Para não tornar esse CDM atraente, vamos adicionar uma sombra projetada nele. Então, basta clicar neste plano de fundo do CTF. E no painel Propriedades, clique nessa etapa de efeito e escolha sombra projetada aqui. Agora, nas propriedades da sombra projetada altere o eixo x para zero, acesse 39 cores para essa cor. E sua opacidade para 40 por cento deve ser 53, e sua propagação deve ser de -20. Depois disso, vamos adicionar autenticidade, então adicione uma nota e um patch de pagamento distorcido, copie a página dos arquivos do exercício e cole-a sob esse botão de CTA. Depois disso, tinha um depoimento sob essa guia de autenticidade. Então, para adicionar um depoimento aqui, desenhe um retângulo de cerca de 395 por 70 para torná-lo redondo. Mas você precisa apoiar um raio. Depois disso, adicione um traçado de 0,7 e pixels ao redor dessa forma. Agora, nesta forma à esquerda, adicione estrelas escritas pelo usuário. Copie as estrelas dos arquivos de exercícios e coloque-as aqui no centro, à direita, um depoimento genérico à sua direita. A imagem. Agora alinhe-os adequadamente com a tesoura. coluna esquerda está pronta. Então, agora vamos ajustar os espaços da nossa coluna esquerda enquanto trabalhamos com o sistema de grade de oito colunas. Então, vamos ajustar nosso design adequadamente. Oito colunas, isso significa que você define o espaço nos múltiplos de oito. Digamos que 8162430 a 40. Depois disso. Vamos para o lado direito da nossa seção de heróis. Aqui vamos adicionar uma vontade forte que justificará nossa proposta de valor. No lado direito, há um retângulo branco de cerca de 614 por 61, ruim. Coloque-o aqui. Adicione um traço dessa cor com o tamanho de magnitude cinco. Depois disso, trouxe três lábios sobre esse círculo, que será um castelo para o nosso produto. Agora, adicione outra elipse dentro dessas vidas brancas. Mude sua cor para amarelo. Depois disso, adicione algumas características sobre esse círculo ou retângulo amarelo de cerca de 239 por 73. Adicione um visual de sapato com esse recurso encerrado. Alinhe-o corretamente. Agora selecione a ferramenta de caneta e desenhe uma linha curva de cerca de 80 por 4%. E depois disso, certo, 360 graus de excesso de peso. Agora coloque a imagem principal no círculo CRO. Mostre imagens do arquivo do exercício. Depois disso, vamos adicionar diferentes ângulos desta filmagem. Para isso. Desenhe três retângulos com um raio de borda de 16. Vou mudar a cor desses retângulos. Primeiro para amarelo para verde e terceiro para roxo. Depois disso, coloque imagens dos arquivos de exercícios sobre esses retângulos. Agora vamos adicionar isso a essas imagens. Então, para isso, trouxe três formas sob esses sapatos. As imagens mudam de cor de acordo com os pais. E depois disso, mantenha propriedade de desfoque de camada de cerca de quatro. Agora, no lado esquerdo e direito dessas imagens, adicione dois carrosséis. Depois disso, vamos adicionar a credibilidade de que queremos adicionar logotipos de logotipos diferentes de empresas diferentes. Basta colocar os logotipos aqui com espaçamento igual. Depois disso, desenhe um retângulo de cerca de 11, 20 sobre esses logotipos. Mantenha a cor cinza do retângulo da nossa paleta de cores. Encadeie a cor do retângulo um gradiente linear de cor cinza. Agora selecione os retângulos e o logotipo clicando neste botão de máscara na parte superior. Você pode pressionar Control mais Alt mais n no teclado. E é assim que você cria uma seção heroica de uma landing page com uma preposição de valor adequada, um visual claro, um CTA proeminente e com autenticidade e credibilidade adequadas. Então, isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 6. Interface de seção de depoimentos genéricos: Neste vídeo, criaremos uma seção genérica de depoimentos, que aumentará a credibilidade da nossa página de destino. Então, primeiro de tudo, adicione um título aqui com um tamanho de 64 pixels. E coloque esse título sobre essas oito colunas internas. Depois disso, DrawRectangle de cerca de 11, 20 por 640 com um raio de borda de 12 pixels. Neste retângulo, vamos adicionar um depoimento em vídeo para isso. Basta pegar a imagem dos arquivos do exercício e colocá-la dentro desse retângulo. Agora, basta desenhar uma elipse de 124 por 124 sobre esse retângulo e mudar sua cor para vermelho. Agora, adicione um ícone de jogo sobre essa elipse. Alinhe-os corretamente para tornar esse botão de jogo mais proeminente. Basta adicionar uma camada de opacidade de 24% sobre essa imagem. Portanto, o botão Play parece mais proeminente. Depois disso, vamos adicionar dois depoimentos sobre essa imagem. Não desenhe um retângulo, altere o raio da borda para 14 e adicione a imagem CR7 sobre ele. Depois disso, pegue uma forma de depoimento dos arquivos de exercícios, coloque-a aqui e adicione um texto sobre ela. Digamos que me veja rolando meus 100. Então, parece um testemunho. Depois disso, pegue a ferramenta de caneta e desenhe uma linha apontada para nosso vídeo. Mude sua cor para amarelo. Assim, isso chamará a atenção do usuário para o vídeo. Agora, basta colocar o depoimento acima e colocá-lo no canto inferior direito da imagem e alterar sua cor para azul, além de alterar o texto. Então, agora nossa seção está concluída com a técnica adequada de otimização de SEO. Isso é credibilidade. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 7. Interface de seção de benefícios: Neste vídeo, vamos trabalhar com os benefícios da nossa landing page. Porque nas páginas de destino nos concentramos mais nos benefícios do que nos recursos. Antes de tudo, copie o título acima e mova-o para baixo. O espaçamento superior de 160 pixels. Lembre-se de que o espaçamento entre as seções é de 160 pixels e o espaçamento dentro dos cabeçalhos e da seção é de 80 pixels. Esses são os padrões que definimos para Atlantic Beach. Depois disso, adicione uma imagem no lado esquerdo da seção. Copie a imagem dos arquivos do exercício e coloque-a aqui corretamente. Agora, adicione dois ícones adicionais nesses sapatos masculinos. Esses ícones de adição indicarão esse recurso do produto quando um usuário clicar nesse ícone de adição. Agora, no lado direito, vamos adicionar uma legenda, nossa descrição. E SATA. A legenda para média e seu tamanho para 60, e renomeie-a para ser executada como nunca antes. Jane faz testes na Síria para ver a coleção. Agora vamos adicionar alguns benefícios aqui. Então, para isso, desenhe um retângulo de cerca de 534 por 170, altere o raio da borda para 20 pixels, remova o preenchimento e dê um traçado de cor vermelha. Depois disso, adicione uma linha separadora dentro do navio. Agora vamos adicionar dois benefícios aqui. No lado esquerdo, adicionaremos um item de benefício, um título e uma descrição. Altere o tamanho do título e da descrição para 16. Aqui, renomeou o título para No Soul. Depois disso, adicione um ícone de alma de 28 por 28 pixels dentro dessa elipse. Copie esse ícone dos arquivos de exercícios coloque-os aqui e alinhe-os adequadamente. Não basta remover o ícone, título e a descrição, movê-los para a direita e alterar ícone para mostrar que eu poderia copiar isso arquivos do exercício e colocá-lo aqui. Depois, renomeie o título para grade sólida. Agora vamos adicionar uma técnica de otimização de CRO nesta seção. Para dívidas, desenhe um retângulo em torno de quatro por 92 com um raio de borda de 12 pixels. Dê um toque dessa cor cinza. Além disso, adicione uma sombra dessa cor também. Agora, dentro desse retângulo, vamos adicionar uma imagem do usuário e um depoimento. Então desenhe uma elipse de cerca de 56 por 56. Depois disso, insira uma imagem do usuário nessa forma. Então, para isso, basta copiar a imagem dos arquivos do exercício e colá-la dentro dessa forma. Depois disso, pegue a ferramenta de texto e adicione alguns depoimentos. Agora, para torná-lo mais atraente, basta adicionar um ícone de coração no canto superior direito do retângulo. Agora é só selecionar todo esse texto com seu grupo de depoimentos. Todos juntos, renomeie-o para a coluna da direita. Da mesma forma, faça o mesmo com a imagem. Renomeie-o para a coluna da esquerda. Agora selecione essas duas colunas, alinhe-as verticalmente ao centro e posicione-as com uma margem superior de 80 pixels. Então, isso é tudo para este vídeo. Nos vemos no próximo vídeo. 8. IU de seção de tecnologia totalmente nova: Bem-vindos de volta, estudantes. Neste vídeo, vamos criar uma seção de texto totalmente nova. Então, primeiro de tudo, desenhe um quadro de largura total com uma altura de 656 pixels. Preencha-o com uma cor escura da nossa paleta. Depois disso, na seção acima, copie a coluna da direita sem o benefício, coloque-a no lado esquerdo da tela e altere seu título para uma tecnologia totalmente nova. Altere também sua descrição, CTA e a cor do depoimento para branco. Aqui. Também substitua o ícone do coração por um ícone de estrela. Todos esses ícones estão disponíveis no arquivo de exercícios. Depois disso, pegue a imagem dos arquivos do exercício e coloque-a no lado direito do banner. Como nosso produto são sapatos. Então, basta cortar a imagem e focar nos sapatos. Depois disso. Adicione ícones adicionais sobre esses sapatos e algumas curvas. As curvas com uma ferramenta de caneta mantêm a cor branca com 50% da capacidade. Por fim, desenhe uma elipse com uma linha reta sobre ela. Mude as cores para vermelho. E mude essa linha. E altere essa linha Seta inferior propriedades do traçado. Portanto, parecerá uma opção de rolagem para baixo. E agora nossa seção de texto está concluída. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 9. IU personalizada da seção de sapatos: Neste vídeo, vamos criar personalizar sua seção de sapatos. Antes de tudo, copie a seção da coluna esquerda acima e mova-a para baixo com um espaçamento de 80 pixels, altere o título e a descrição. E no CTA, em uma declaração de credibilidade de 100 por cento diferente, se não funcionou, em 48 horas ícone de barbear à esquerda desta declaração. Copie isso para que eu possa formar os arquivos de exercícios e colocá-los aqui corretamente. Depois disso, mude esse depoimento também. Agora, no lado direito, vamos adicionar tamanhos e cores diferentes de um sapato. Então, no canto superior direito, selecione o tamanho com uma lista suspensa abaixo dele, adicione um retângulo de cerca de 48 por 64, remova o preenchimento e dê a ele um traçado dessa cor escura com dez por cento de opacidade. Dê a ele um raio de borda de cerca de oito pixels. E para torná-lo mais suave, basta clicar nesses três pontos e alterar a propriedade de suavização dos cantos para 100 por cento. Agora adicione o tamanho aqui. Digamos que agrupe essas duas camadas e faça três cópias delas e altere seus tamanhos também. Depois disso, selecione a camada do site e mova-a para baixo com um espaçamento de 40 pixels. Renomeie o texto para selecionar a cor. Agora, basta desenhar uma elipse de 53 por 53. Dentro dessa elipse. Novamente, faça uma elipse de 38 por 30 pixels. Dê um toque de cor branca. Alinhe essas duas elipses. Agora faça três cópias e mova-a para a direita. Não os altere para a cor da elipse para algumas cores aleatórias. Depois disso, vamos adicionar nossa imagem. Então, basta copiar a imagem dos arquivos do exercício e colocá-la aqui no centro. Não basta deixar a caneta soltar e fazer um círculo ao redor do sapato. O sapato. E David recolorir. Depois disso, adicione uma elipse vermelha de 75 por 75 pixels com um ícone de 360 graus sobre ela. E coloque-o no centro. Assim, um usuário saberá que pode ver o sapato em 360 graus em duas setas à direita e à esquerda do sapato, para que ele saiba que ele pode ser rolável. Agora vamos adicionar uma técnica de otimização de CRO nesta seção. Antes de tudo, adicione uma assinatura de Cristiano Ronaldo sobre o sapato. Em seguida, pressione a tecla T e escreva autógrafo exclusivo do CR7 em cada par. O telefone deve ter 16 cores claras e vermelho. Depois disso, adicione um CTA, patches de pagamento distorcidos aqui. Então, basta copiar o CDA com as páginas de pagamento curadas da seção de heróis e colocá-lo aqui. Altere a orientação das bagas de pagamento do SQL para alinhar ao centro. Depois disso, adicione uma seta, copie a seta da nossa segunda seção, cole-a aqui e vire-a horizontalmente. Agora adicione os ícones da febre aqui, copie os ícones FIFA dos Arquivos de Exercícios e coloque-os aqui. Por fim, adicione uma camada de texto aqui com um tamanho de 24 pixels e renomeie-a para nossos parceiros oficiais. Assim, o usuário saberá que a FIFA é nosso parceiro oficial. O espaçamento que estou usando em nossa página de destino é de oito pixels. Então, isso significa que estamos usando espaços que estão nos múltiplos de oito. E agora uma seção está concluída. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 10. Nossa IU de seção de coleção: Neste vídeo, vamos criar nossa seção de coleção. Antes de tudo, copie esse título principal de 64 pixels. Coloque-o aqui com um espaçamento superior de 160 pixels. Renomeie-o para nossa coleção. Ele deve ser colocado em quatro colunas. Ao vivo na coluna. Depois dessa descrição do anúncio nas outras sete colunas. Agora vamos adicionar algumas categorias aqui. Antes de tudo, desenhe um retângulo de cerca de 15 por 60 pixels. Raio da borda de 12 pixels. Além disso, suavize o canto clicando nesses três pontos. Dê um toque dessa cor cinza. Agora, as pragas que fazem isso e escrevem tendências também adicionam um ícone de treinamento. Todos esses ícones estão disponíveis nos arquivos de exercícios. Agora faça três cópias e coloque-as com um espaçamento igual e altere também seus nomes e ícones. Agora, faça dessa sequência de estados de aula a primeira cor do retângulo para vermelho, com o texto em branco, para que o usuário saiba que esse estado está selecionado no momento. Agora vamos adicionar produtos diferentes aqui. Então, primeiro, desenhe um retângulo de cerca de 357 a 03:45 pixels com um raio de borda de oito pixels. Também faz com que corra bem. 200 por cento. Mude sua cor para essa cor cinza. Aquele ovo e a Nike e um ícone favorito deste carrinho em uma imagem de sapato no centro deste cartão. Para adicionar, adapte-se a essa imagem para obter uma melhor sombra projetada. Agora adicione estrelas de leitura do usuário , nome do produto, produto, preço antigo e novo preço do produto de um desconto para criar urgência nos detalhes de visualização do cliente, CTA no lado esquerdo deste cartão, e no lado direito em um contador de quantidades e um ícone de carrinho de compras com fundo cinza escuro. Agora, para economizar nosso tempo, vamos replicar esse cartão, fazer cinco cópias dele e colocá-las corretamente. Depois disso, alteraremos as imagens do produto e cor desses cartões para que pareçam diferentes um do outro. Então, a partir daqui, estou apenas acelerando o processo, para dizer isso o tempo todo. E agora fizemos todos os nossos cartões e nossa seção de coleta está concluída. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 11. Interface de seção de depoimento do Instagram: Bem-vindos de volta, estudantes. Neste vídeo, vamos criar uma seção de depoimentos para o Instagram. Em primeiro lugar, deixe-me dar uma breve visão geral dos depoimentos. depoimentos são um tipo de prova social que indica ao visitante que pessoas com a mesma dor ou confiança estão gostando do nosso produto. Página de destino. Os depoimentos são eficazes por um motivo. Gosto de propostas de vendas. depoimentos são imparciais, facilitando que sua empresa estabeleça credibilidade e aumente a estabeleça credibilidade e aumente confiança nas ofertas de Atlantic Beach. Na verdade, estudos mostram que depoimentos confiáveis aumentam a intenção de compra em mais de 92 por cento. Então, vamos pular para nossa página de destino e começar a criar um depoimento do Instagram. Antes de tudo, adicione um título. Digamos que, em vez de ficarmos obcecados com isso na coluna da esquerda, vamos criar nosso cartão de instância. Então, para isso, desenhe um retângulo em torno de 98 por 640 pixels. Dê-me o raio do canto de 60 pixels. Depois disso, neste cartão, adicione uma imagem de usuário com um nome de usuário e sua localização. Adicione também um carrossel de três pontos, igual ao do Instagram, na frente dessa imagem do usuário. Depois disso, adicione uma imagem principal de cerca de 442 por 386 pixels com um raio de canto de 20 pixels. Aqui também suavizou seu canto. Agora, abaixo desta imagem, adicione um comentário de curtir, compartilhar e um ícone de marcador. Depois disso, escreva uma linha de texto como Lucas e 903 outros à sua frente. Na TU, as imagens. Depois disso, adicione um depoimento principal de destaque com uma data abaixo. Agora nossa coluna da esquerda está completa. Vamos para a coluna da direita desta seção. Na coluna da direita, adicione título principal e o subtítulo de um depoimento. Depois disso, confie no patch Pilot com estrelas de avaliação do usuário. Com estrelas de avaliação do usuário, depois um depoimento do usuário. Depois disso, adicione a assinatura de um usuário, patch certificado de nível Shu. Não entre em pânico. Todas essas coisas estão disponíveis nesses arquivos de exercícios. Por fim, adicione avaliações de pilotos de teste em Dispatch. Copie a bolsa dos Arquivos de Exercícios e coloque-a aqui. Por último, mas não menos importante, basta adicionar Adicionar ao carrinho e sentar aqui com páginas de pagamento espetadas. Basta copiar isso da seção acima e colocá-lo aqui no centro com um espaçamento de 80 pixels, não alinhar todos eles corretamente, e nossa sessão estará concluída. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 12. Testemunho geral com a IU da seção de banner da FIFA: Neste vídeo, vamos criar um banner da FIFA com uma seção geral de depoimentos. Então, primeiro, desenhe nosso retângulo de cerca de 11, 20 por 248. Dê a isso a cor radial vermelha. Depois disso, adicione um título e uma descrição. Adicione Cd suficiente aqui. Agora vou adicionar três imagens aqui. Então, à esquerda na Copa da FIFA, e à direita estava o futebol com imagem de rede. Copie essas imagens dos arquivos de exercícios e coloque-as aqui corretamente. Agora, vamos descer e adicionar um título com um espaçamento superior de 160 pixels. Renomeie-o para algumas histórias satisfatórias. Depois disso, adicione estrelas de leitura do usuário sob esse título. Agora, vamos desenhar um retângulo de cerca de 14, 40 por 960 pixels. Mude sua cor para essa cor cinza claro. Depois disso, vamos adicionar algumas histórias de usuários aqui. Então, para isso, desenhe um retângulo de cerca de 358 por nove pixels anteriores. Mude sua cor para branco. Também altere seu canto para suave clicando nesses três pontos. Agora, desenhe outra moldura. Dentro desse quadro de cerca de 333 por 2,4 pixels com um raio de borda de seis pixels. Já o raio da borda externa do quadro deve ser de 12 pixels. Portanto, parece esteticamente agradável. Aqui. Jane, essa moldura interna é cinza. Como vamos adicionar algumas imagens aqui abaixo, adicione uma imagem de usuário, nome de usuário e uma imagem verificada pelo nosso lote. Depois disso, na avaliação do usuário, estrelas e um depoimento abaixo dela. Agora, à direita, adicione algumas vírgulas invertidas aqui. Então, parecia um depoimento. Faça duas cópias e coloque-as com um espaçamento igual. Depois disso, as imagens, o nome de usuário e as imagens também. Aqui também adicione as setas esquerda e direita, então desenhe uma elipse de 40 por 40. Mude sua cor para branco e adicione uma seta vermelha à esquerda. Agora faça uma duplicata e mova-a para a direita e altere sua abstração para escrever também. Agora, abaixo deste depoimento, adicione uma linha separadora. Então, vou mostrar algumas estatísticas aqui. Primeiro, desenhe um retângulo em torno de 61 por 224 com um raio de borda de 12 pixels. Dê a isso um traço de um pixel de cor cinza. Depois disso, adicione estrelas de avaliação do usuário e o número total de avaliações. Agora, no meio, vamos adicionar algumas barras percentuais de progresso. Então, primeiro, adicione uma camada de texto de cinco estrelas. Na frente dela. Adicione um retângulo de cerca de 402 por 18 com um raio de borda de quatro pixels. Duplique-o e altere sua cor para verde, e sua largura deve ser 361. Depois disso, com uma etiqueta de 80 por cento nela. Na frente dessa barra de progresso, adicione uma camada de 10,5 K X, que é o número total de usuários que atribuíram uma classificação de cinco estrelas. Agora, faça quatro cópias dessa barra de progresso e altere também suas cores e rótulos x. Por fim, no lado direito, duplique essa caixa esquerda aqui mais de oito milhões de produtos vendidos em todo o mundo por ano. E vocês duas são essas estrelas também. Cliente, essa camada de texto corretamente, alinha essas camadas de texto adequadamente com esta caixa. Então, isso é tudo para este vídeo. Nos vemos no próximo vídeo, vamos criar o que está na seção da caixa. 13. O que você recebe em sua seção de pedidos: Bem-vindo de volta. Neste vídeo, vamos criar o que está na seção da caixa. Então, primeiro, adicione um título com um espaçamento superior de 160 pixels. Renomeie para. Aqui está o que está na caixa. Depois disso, desenhe um quadro de 11, 20 por 891. Dê a isso um traçado dessa cor vermelha e uma cor de preenchimento com 30% de opacidade. Na coluna da esquerda, vamos adicionar a imagem principal e algumas imagens. Copie as subimagens da seção de heróis e cole-as aqui verticalmente e redimensione-as adequadamente. Depois disso, desenhe uma moldura em torno de 4306504, altere o raio da borda para 2010 a cor para vermelho. Também faça seu canto liso. Depois disso, adicione uma imagem principal, copie essa imagem dos arquivos de exercícios, coloque-a aqui e alinhe-a adequadamente com respeito. Agora, na coluna da direita, vamos adicionar alguns detalhes sobre nosso produto. Primeiro, no nome do produto, depois na avaliação do usuário, estrelas, todos os preços e novo preço. Depois disso, adicione selecione Cor e selecione os menus suspensos de Tamanho. Depois disso, vamos adicionar um contador de quantidade selecionado. Para isso. Desenhe uma linha cinza, faça uma duplicata dela. Altere a cor da linha acima para vermelho. Depois disso, em uma elipse de 14 por 14 pixels, mude sua cor para cinza também. Faça uma cópia dessa elipse e mova-a para a direita e mude sua cor para vermelho. Dê um traço de um pixel de cor branca. Aqui. Dê também uma sombra de cor preta em seu eixo y. Então, parece mais realista. Aqui também, adicione uma camada de texto de quantidade t com alterações quando um usuário muda, faz um litro de contador de quantidade. Agora vamos adicionar um CTA aqui. Então, basta copiar o CDF da seção de heróis e colá-lo aqui. Faça com que seja em largura total. Se você mover o preço e colocar o texto e o ícone de descarte no centro desse botão. Nesse botão, queremos adicionar uma entrega rápida e um lote de notas e segurança. Copie isso dos arquivos de exercícios e coloque-o aqui corretamente com o espaçamento adequado. Depois disso, vamos adicionar um banner para isso. Desenhe uma moldura de 941 por 188 pixels. Vamos começar com um espaçamento entre as células de ATP. Altere o raio do canto para 20 pixels. As cores devem ser lidas. Agora, as informações de entrega estão aqui. Então, copie isso dos arquivos de exercícios e coloque-o aqui corretamente com um espaçamento igual. Agora, nossa seção de pior na caixa está concluída. Isso é tudo para este vídeo. Nos vemos no próximo vídeo. Vamos criar uma seção de perguntas frequentes para nossa página de destino. 14. Perguntas frequentes com a IU de seção de rodapé: Bem-vindos de volta, estudantes. Neste vídeo, vamos criar uma seção de perguntas frequentes com seção de rodapé. Em primeiro lugar, copie o título da seção acima e posicione-o aqui com a margem superior em 160 pixels, que definimos anteriormente. Adicione uma descrição antes desse texto. Depois disso, vamos descer e começar a criar perguntas frequentes. Então, primeiro, desenhe um retângulo em torno de 548 por 64 e altere o raio do canto para seis pixels, dando também um traçado de um pixel de cor vermelha. Agora pressione a tecla T e escreva a primeira pergunta. Digamos que prejudique e deixaremos ao vivo refazer a pergunta por que a mudança peso da fonte para média e sua cor para essa cor escura reproduz uma seta suspensa na frente dela. Copie isso dos arquivos de exercícios e coloque-o aqui corretamente. Agora agrupe essas três camadas e faça sete cópias delas. Abençoe-os com um espaçamento igual de 40 pixels. Agora, vamos mudar as perguntas aqui, pois é um processo demorado. Então, estou acelerando o processo aqui. Agora a seção de perguntas frequentes está concluída. Vamos passar para a última e última seção desta landing page, que é a seção de rodapé. Então, para isso, vamos desenhar um quadro de cerca de 14, 42 por 292. Mude sua cor para a cor preta. Agora, à esquerda, adicione um logotipo fictício, algumas descrições e ícones de mídia social. Tudo isso está disponível nos arquivos de exercícios. Coloque-os aqui. Propriedade. Agora pressione a tecla T, Android é um título. E alguns links aqui, cerca de três a quatro links. Agrupe essas três camadas e duplique-as três vezes. Agora vamos renomear essas terminações de cabeçalho. Então, a partir daqui, estou apenas acelerando o processo aqui. Depois disso, adicione uma imagem de padrão de sapato no centro desta sessão. Então, basta copiar isso dos Arquivos de Exercícios e colocá-lo aqui com 8% de opacidade. Por fim, desenhe um retângulo de 14, 40 por 50 para mudar sua cor para vermelho. Por fim, pressione a tecla T e apenas escreva os direitos autorais. E tudo bem, reserve o texto. Alinhe o centro com este retangular vermelho. Agora nossas páginas de destino foram concluídas. Nos vemos no próximo vídeo. Vamos criar uma versão responsiva da página de destino. 15. Design de interface de usuário de versão responsiva: Bem-vindos de volta, estudantes. Neste vídeo, vamos criar de forma responsiva e oferecer uma página de destino. Em primeiro lugar, vou falar sobre as regras da nossa área responsiva. Vamos tirar uma foto do iPhone Pro Max, pois isso é possível pressionando a tecla F do teclado e selecionando a moldura do iPhone. Depois disso, vamos configurar nossa grade e os governantes serão responsáveis. Para esta versão responsiva. Vamos usar os padrões do iOS. Primeiro, vamos clicar nesse quadro e clicar nesse ícone de adição no painel de camadas. Depois disso, clique nesses três pontos. E a partir daqui, escolha as colunas do disruptor. A maioria de vocês sabe que, para versões móveis, usamos para grade de colunas. Então, primeiro, basta escrever quatro colunas na guia Coluna. Depois disso, nas margens. Se você não sabe, Martin, esses espaços são da esquerda e da direita. Esses espaços em branco internos são chamados de calhas. Certo? 20. Você também pode optar por 24 margens. Mas, por enquanto, vou escrever 20. E nessa cratera, toque, à direita, 16. Mas lembre-se de que escolhemos espaçamento de oito colunas na página da web e na página do membro superior. Neste trabalho móvel novamente, usaremos o espaçamento de quatro pixels a partir de quatro pixels. Quero dizer, definimos o espaçamento nos múltiplos de quatro. E o espaçamento que definimos para qualquer pH será dividido por duas versões responsivas. Isso significa que, se definirmos o espaçamento entre duas seções, 160 pixels na versão web e, em seguida, na versão móvel , você retornará a. Portanto, definiremos um espaçamento de 80 pixels entre as sessões no celular, porque as telas do celular são pequenas e não podemos ver meu espaçamento no celular. Caso contrário, o usuário precisará rolar demais para chegar ao conteúdo desejado e não testar o que queremos. Agora, vamos definir a régua para o nosso esquema. Então, basta pressionar a tecla de atalho Shift R do seu teclado. E a partir daqui, coloque as réguas e coloque-as com essa camada. Depois disso, para cabeçalho vertical, apenas para um retangular de cerca de 60 pixels e coloque uma régua adequadamente. Aqui vamos colocar nossa seção de cabeçalho. Depois disso, exclua esse retângulo e vamos começar a criar nosso cabeçalho. Então, primeiro, copie o logotipo, ícone do carrinho e o menu. Eu posso formar a página de destino e colá-la aqui. E fixe-os um pouco para que fiquem bem de acordo com a tela do celular. Depois disso, vamos passar para nossa seção de heróis aqui. Primeiro, escolha essa coluna esquerda na web e cole-a aqui. E também cor-de-rosa em seus tamanhos. E coloque-os com essas réguas da esquerda e da direita. Além disso, alinhe a fonte no centro, pois é conveniente para telas pequenas. Na web, você pode ir no mínimo até 60 pixels ou subtexto. Mas no celular você pode acessar, bem, no mínimo, pixels. Mas, por enquanto, vamos nos limitar aos 64 setText móveis. Depois disso, vamos descer. E aqui na nossa imagem principal. Copie isso dessa página de destino com todas as coisas ao redor e coloque-o aqui e ajuste de acordo com nossa nota. Depois disso, copie detalhes do CTA suspenso e do testemunho, coloque-os aqui corretamente e altere o alinhamento para o centro horizontalmente. Por fim, copie esses logotipos de clientes e coloque-os aqui também. Agora, vou concluir a primeira seção. Vamos descer em direção à nossa próxima seção. Aqui. Primeiro, adicione um título, então basta copiar o título na página de destino, redimensioná-lo para 48 bolas e colocá-lo aqui com uma margem superior de 80 pixels. Porque lembre-se de que, para a tela do celular, o espaço entre duas seções se torna a metade. Digamos que se o espaço entre duas seções no rep for 160 pixels, deveria ser 80 pixels nas telas móveis. Depois disso, desenhe uma moldura de cerca de 388 por 340. Mude o raio do canto. Dois propósitos. Depois disso, copie a imagem da página de destino e posicione-a aqui pressionando o controle de teclas de atalho Alt V. Depois disso, copie o botão play e o depoimento e coloque-os sobre esta imagem corretamente. Agora selecione esses depoimentos com esta imagem e agrupe-os pressionando Control G no teclado. E depois disso, coloque-o com um espaçamento superior ou 40 pixels. Agora vamos descer até aqui. Adicione um título. Copie o título na página de destino, cole-o aqui e redimensione-o para 48 e posicione-o no espaçamento superior de 80 pixels. Depois disso, adicione a imagem do usuário, copie essa imagem da página de destino e coloque-a aqui redimensionando-a no meio. Depois disso, selecione os detalhes da coluna correta e coloque-os sob essa imagem, um por um. Mas lembre-se de redimensioná-lo adequadamente. Agora, vamos descer até aqui. Desenhe uma moldura de 428 por 945, mude sua cor para a cor preta. Depois disso, primeiro adicione essa imagem da coluna direita esse quadro e redimensione-a adequadamente. Agora, abaixo desta imagem, escolha os detalhes da coluna esquerda e posicione-os adequadamente. Lembre-se de que nosso título deve ser 48, tamanho da descrição deve ser 16 leves, CTA deve ser 20 normal. E deixe o depoimento de quatro a 16. Agora vamos descer para personalizar sua sessão de calçados aqui. Em primeiro lugar, no cabeçalho da seção , na descrição, na coluna esquerda e nos detalhes desta coluna. Depois desse anúncio, mostre a imagem redimensionando-a para baixo. Adicione esses ícones de 360 graus e o CTA, arbitrários para logotipos, também. Lembre-se de que aquela coisa que colocamos na web será alterada para a linha central em uma visualização responsiva. Mas não é obrigatório. De qualquer forma, vamos passar para a próxima seção, que é nossa seção de coleção. Aqui, adicione o título, algumas etapas da categoria de descrição. Depois disso. Adicione cartões de sapatos verticalmente. Basta adicionar três cartas aqui. Basta adicionar três carros aqui por enquanto. E depois disso, adicione um testamento de CDA após o terceiro cartão, para que seja fácil para o usuário visualizá-lo em vez de percorrê-lo até o fim. Agora vamos passar para nossa próxima seção, que é a seção de depoimentos. Aqui. Antes de tudo, adicione um título. Depois disso. Neste cartão da coluna esquerda, reduza-o para cerca de quatro colunas. Agora vamos adicionar nosso banner da FIFA, se possível. Portanto, queremos personalizar esta sessão não é obrigatória para mostrar todas as coisas da web em telas móveis. Aqui. Basta desenhar um retângulo em torno de 36 por 536 e mudar sua cor para gradiente linear. Para isso, basta selecionar esse quadro na web. Pressione Control Alt Z e preencha esse quadro no celular pressionando Control Alt V. Depois disso, adicione uma descrição do título e um CTA verticalmente com espaçamento igual. Por fim, copie este ícone da FIFA. Vamos sentar aqui e redimensioná-lo para fazer quatro por 241 e alinhar seu centro horizontalmente. Agora agrupe-os todos juntos. Vamos passar para a próxima seção aqui. No cabeçalho da seção, esta avaliação do usuário é estrelada e resenha. Depois disso, vamos adicionar um cartão aqui. Então, basta copiar o cartão do WebView, colocá-lo aqui e redimensioná-lo para quatro colunas em cima desse cartão e setas para a esquerda e para a direita no centro. A única coisa que esqueci de acrescentar é o fundo cinza claro. Então, basta adicionar um fundo cinza claro por trás deste cartão e setas. Depois disso. Depois desse cartão, adicionaremos o cartão de avaliação do usuário e os cartões de venda total por ano. Basta copiá-los do WebView e colocá-los aqui em 2.2 colunas. Agora vamos descer para o que está na seção da caixa aqui. Antes de tudo, adicione um título de seção. Depois disso, nesta imagem principal nessas quatro colunas. Aqui, adicione essas outras imagens de sapatos abaixo desta imagem principal. Agora escolha os detalhes da coluna correta e coloque-os aqui adequadamente. Depois disso, vamos personalizar esse banner. Então, primeiro de tudo, desenhe um retângulo em torno de 23, 44. Aqui, nesses detalhes de envio e escritos, faça o layout de 2,2 colunas e redimensione-as de acordo com a tela do celular. Por exemplo, altere esses textos de frete grátis para 16 médios e a descrição para 14 em falta. Depois de colocar esses detalhes de envio, primeiro, a tecla L do teclado e desenhe uma linha por volta desta noite, três, altere sua velocidade para 0,5 pixels e sua cor para branca, cor linear. E coloque-o no centro dessa coluna esquerda e direita para que ele possa diferenciá-lo. Então, você é capaz de diferenciar entre essas duas colunas? Agora vamos descer para a seção de perguntas frequentes. Aqui no nome e na descrição da seção. Depois disso, escolha essa primeira pergunta na web. Coloque-o na tela do celular para ver as colunas. Redimensionar o texto da pergunta para 16 médios e alterar a posição dessa seta também. Agora faça seis cópias disso. Primeira pergunta. Duplique-os com um espaçamento dos pixels entre eles. Não basta mudar o texto dessas perguntas. Agora, nossa seção de perguntas frequentes está concluída. Vamos passar para nossa última seção de responsabilidade desta página de destino. Aqui. Antes de tudo, desenhe um retângulo preto de 14428 aos 74 anos. Depois disso, na descrição local de cerca de duas linhas. Depois disso, coloque esses links de quatro colunas no formato de 2,2 colunas em responsivo urgente. Por fim, adicione esses ícones de mídia social depois dessas coisas. E aqui, desenhe um retângulo de cerca de 28 por 50 pixels. Mude sua cor para vermelho. E selecione este, tudo bem, seu próprio texto, e cole-o nesse retângulo vermelho. E alinhe seu centro vertical e horizontalmente. Agora nossa página de destino, agente responsável, está concluída. É assim que você cria uma landing page com sua versão responsiva com técnicas adequadas de CRO e otimização. Isso é tudo para este vídeo. Espero que vocês achem este curso útil e vejam vocês em outro curso do Figma. Obrigado por assistir a este curso.