Crie lindas landing pages que geram leads de qualidade | Serban Cosmin | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Crie lindas landing pages que geram leads de qualidade

teacher avatar Serban Cosmin, Landing Page Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

11 aulas (1 h 41 min)
    • 1. Introdução - Como criar uma página de destino no Photoshop

      0:51
    • 2. Encontrando inspiração

      8:21
    • 3. Como criar um wireframe

      10:10
    • 4. Como criar o cabeçalho

      11:43
    • 5. Como criar a seção primeiros de recursos

      11:28
    • 6. Como criar a segunda seção de recursos

      8:49
    • 7. Como criar a seção de divisão do processo

      12:18
    • 8. Como criar a seção de depoimento

      9:48
    • 9. Como criar a seção de argumento final

      6:45
    • 10. Como espaçar os elementos

      2:09
    • 11. Como importar para Instapage

      19:03
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

516

Estudantes

--

Sobre este curso

Neste curso, você vai aprender como criar uma página de

Essa série de vídeos vai dar uma parte de todo o processo de criar uma página de destino de geração de leads do zero. Vamos de inspiração na web, criar wireframes e em depois criar um design de página de destino no Photoshop.

Depois que a página for concluída no Photoshop, vou usar o Instapage para criar uma versão de vivo e começar a obter leads.

Agora, além de 1 a 2 horas de vídeos que este projeto é repleto de recursos, você vai receber o arquivo totalmente de Photoshop da página de de planagem criada e o documento do Instapage, o que você pode fazer

Este curso é destinado a estudantes que usaram o Photoshop e estão em um nível intermediário.

Ao participar deste curso, você pode seguir e criar a mesma página ou começar seu próprio projeto e criar a página de negócios ou de nossa empresa ou produtos.

Exercer arquivos e PSD: faça o download aqui

Instapage

Você está pronto? Vamos começar!

Conheça seu professor

Teacher Profile Image

Serban Cosmin

Landing Page Designer

Professor

Been designing landing pages for a couple of years now, created templates that have been used by thousands of clients worldwide.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução - Como criar uma página de destino no Photoshop: Ei, pessoal, nesta aula, vocês vão aprender a desenhar uma página de destino na loja de acompanhamento do zero. Começaremos por encontrar inspiração no mundo. Crie armações de arame na construção de um design de página de destino dentro para a loja. Uma vez que as páginas concluídas na loja de fotos todos os anos instapage para construir uma versão ao vivo, começar a obter leads. Ao participar deste curso, você pode seguir e criar a mesma página, ou iniciar seu próprio projeto para construir uma página de destino, um negócio ou um produto. Agora, além disso, com 1,5 horas de vídeo, você receberá a camada completa para tão longe da página de destino criada neste curso. E eles instapage documento, que você pode carregar imediatamente e começar a usá-lo como um modelo. Agora tenha em mente que este curso está nos alunos que já usaram para a loja . Então, se você está pronto, vamos começar 2. Encontrando inspiração: Pessoal, Pessoal, reparem na hora de encontrar inspiração para a nossa página de destino do Bitcoin. Este é o primeiro site que vou visitar. É amor, mas que ninja, todos esses links serão fornecidos na descrição do curso, então certifique-se de verificar isso. Ah, estes são os mais populares e os que eu uso para encontrar inspiração e encontrar layouts que podem caber com o que eu preciso construir, que é Ah, Bitcoin orientada para que é Ah, a regeneração página de destino. Então Levada Ninja é o 1º 1 Eles fornecem inspiração para páginas de destino. Começo por procurar palavras-chave diferentes relacionadas às minhas necessidades. E eu procurei layouts especiais e grupos de elementos diferentes que chamassem minha atenção. E eu simplesmente tiro screenshots de cada seção individual que chama minha atenção. Então, se eu gostar de um específico, eu apenas mantenho o comando Shift para, uh que está no Mac, e eu apenas tiro screenshots quantas eu puder. Agora, este é também um grande exercício para ver o que outras pessoas estão fazendo na mesma indústria. Então, se você estivesse procurando por imóveis, ele estaria procurando por páginas de aterrissagem imobiliária, e isso ajudaria você a ver o que os outros estão fazendo na indústria eram meio específicos. Elementos eram uma espécie de seção específica dias de uso, modo que ajuda a fazer uma idéia melhor. E, no entanto, o próximo vai ser drible drible dot com é realmente, muito bem conhecido pela qualidade fora do trabalho, mesmo que a maioria dessas páginas de destino são apenas trabalho em andamento. Não são conceitos acabados. Não são projetos reais. Eles são muito bons para ter um vislumbre das tendências modernas atuais e talvez ver o que pode funcionar para você. Agora nós driblamos. Eu tendem a abrir cada projeto em sua própria nova guia e, em seguida, apenas passar por eles no mesmo como sempre. Basta tirar várias capturas de tela dos projetos que a vida. Agora o próximo é fólio de pouso frio que vem Às vezes algumas páginas podem chamar a minha atenção e eu vou ficar por mais de cinco segundos a opinião do capataz. Mas, na maior parte do tempo, isto é o que eu faço. Eu simplesmente tiro screenshots e, em seguida, eu vou usar essas capturas de tela também. Criar layout ah. Mas vou te mostrar isso mais tarde. Vamos passar para o próximo. Acho que já ouviu falar do meu interesse antes. Este é um ótimo lugar para criar quadros de humor e Teoh ver inspiração. Então eu costumo ir em frente e procurar elementos curados específicos, como design de página de destino, páginas de destino sobre inspiração, processo de design e, em seguida, incluir especificamente palavras como bancos de moeda Bitcoin, coisas financeiras como essa. Para que eu possa ver novamente o que as pessoas da indústria estão fazendo. As mesmas coisas que se aplicam só precisam de criação. Está tudo bem, eu prometo. Isto não é um enxame porque parece que é muito interessante uma vez que você entra nele. Mas vou te mostrar por que isso é importante. Então eu terminaria esse vídeo. Eu vou trabalhar em Milão fora Milano dot com que permite que você crie placas. Placas de humor. Ah, deixe-me não passar por este. Beyonce é geralmente o lugar que eu procurava por inspiração. Eu não acho que a qualidade é igual com as coisas que eu posso obter no drible, mas estes são projetos mais funcionais. Quero dizer, estes são na verdade projetos que foram implementados todo conforto de vida com os desenhos de driblá-la, que são limitados apenas pela imaginação do designer s O. Este é o último lugar que eu procuro e então eu vou para moer uma nota e reunir tudo. Isto é ah, nada de aceitar. Eu crio uma tela e, em seguida, carrego todas as imagens que eu salvei na área de trabalho tirando Screenshots. Deixe-me apenas remover o assentamento e eu vou em frente dentro do localizador e selecioná-los todos , e você pode apenas arrastá-los e soltá-los. Mila nota permite que você tenha campus gratuito com 300 elementos. Acho que você pode ter várias placas no mesmo campus sem ter que pagar para pagar nada. Eu só então uma linha de tudo. Deixe-me acelerar isso. Bem, como você pode ver estão movendo tudo, um para baixo um do outro. Desta forma, eu posso olhar para todos eles e bem no topo. Eu vejo algo assim, aquele layout em particular eu posso segurar a chave antiga, e eu posso apenas duplicar ou simplesmente movê-la. E eu gostaria de movê-lo para o lado direito e criar uma espécie de simulação de coisas que eu gosto. Isso realmente começa a parecer uma página de destino só porque tem a mesma proporção. E eu só jogo com coisas e isso deve me dar uma direção para quando eu vou entrar dentro da parte de enquadramento de arame e começar realmente a construir o layout que eu quero projetar. Então isso é realmente útil dedo simplesmente imaginar como ele poderia parecer, por exemplo, eu realmente gosto deste cabeçalho e a maneira como ele vai com Grady int e provavelmente vai usar isso. Mas agora só estou tentando descobrir coisas que eu gosto e coisas que eu não gosto coisas que eu quero ver na página de destino. Coisas que eu acho que vão se encaixar com minhas necessidades específicas de construir um Bitcoin ou inter landing page que é uma regeneração eo salário indiano e trabalhar no fluxo de mensagens. O piso da mensagem que vou usar para este processo em particular vai ser o quê? Por que, como quem e frio para a ação Agora, o que vai ser a área de cabeçalho? E esse é o lugar onde o cliente vai saber o que vai conseguir. O que você vai ganhar se você estiver indo para se inscrever, você vai obter a conta gratuita que você está indo para trocar coisas Bitcoin como essa, em seguida, seguido pelas seções futuras. Quais são Por que é que vai cobrir todos os benefícios que estão indo para obter ao assinar até este serviço específico? Então isso fazer as duas seções a seguir vão se concentrar em que os benefícios de venda, seguido de como vai quebrar o processo em etapas. E isso vai ajudar os clientes a obter uma melhor compreensão sobre quais passos eles precisam tomar a fim de aproveitar a oferta ou como usar a plataforma como obter o máximo proveito dela Agora, No final da página, Vou ter depoimentos. Eu vou ter provas sociais de que este serviço funciona e o serviço ajuda as pessoas, em seguida, seguido por um argumento final com a chamada à ação, que geralmente é um botão ou novamente um quatro, dependendo da página de destino, vão construir. Espero que isso faça sentido, porque é realmente importante ter uma idéia sobre o que você gostaria de construir de antemão antes mesmo de ir em arame de reboque antes mesmo de ir para esboçar idéias para fora. Então, uh, este passo é um dos mais importantes fora do processo. Agora, no próximo vídeo, vamos começar a construir na estrutura de arame, e vamos esboçar nossas idéias e começar a construir nossa página de destino. 3. Como criar um wireframe: Ei, pessoal. Então agora estou pronto para começar a enquadrar o fio e construir a base para o nosso design. Escolhi ir junto com o cuco. Este é um aplicativo Web que permite que você rapidamente colocar para fora idéias e você pode até mesmo exportá-los e ter até seis telas de graça. Então você não tem que pagar nada Teoh para usá-lo. Ele tem uma interface bastante simples que são como então você apenas atacar e soltar elementos para o campus e começar a visualizar o layout da página de destino, como você pode ver agora ter duplicado e começou Teoh definir cada seção individual para que eu pode começar a colocar em vários elementos em cada um. Vou simplesmente à direita do lado direito o fluxo de mensagens para cada seção individual . Como você deve se lembrar, falamos sobre o fluxo de mensagens na lição anterior, então não se esqueça de conferir. Se você tiver alguma pergunta, a primeira seção será o quê, enquanto discutimos onde vamos garantir que o visitante saiba o que está recebendo. Se eles se inscreverem, seguido de por que vamos pelo menos alguns recursos e benefícios sobre por que eles devem se inscrever , então como? O que vai ajustar cada depoimento no argumento final. Esta seção final geralmente contém a parte inferior. Agora eu vou assinar um retângulo separado para cada seção individual para que possamos começar a bloquear cada elemento que vamos ter. Se isso é um parágrafo de título para elementos gráficos adicionais, eu vou tentar selecionar cada seção e ajustado para ter um melhor, melhor olhar em todo o layout. Agora, eu sei que a maioria das pessoas prefere esboçar em cadernos de esboços, mas acho que isso é muito mais fácil criar várias variações e criar camadas diferentes para cada seção individual. Então você tem mais liberdade para experimentar. Mas, claro, isso funciona para mim. Não importa que funcione para você. Apenas experimente. Tente esboçar, tente fazê-lo em um aplicativo da Web é que eu estou fazendo e ver o que funciona melhor para você. Agora vamos começar a bloquear os diferentes elementos. A parte de cima será o logotipo seguido da manchete principal e um pequeno parágrafo por baixo. O elemento mais importante será a forma ou o, mas dependendo do objetivo. Então, neste exemplo, eu só vou ter um pequeno botão e eu vou torná-lo laranja apenas para ficar de pé. Isso os colocou no meio, e podemos continuar com o porquê. Mas primeiro, vamos abrir espaço suficiente para isso, porque eu quero ter duas seções separadas onde eu possa apresentar benefícios para esta força um. Estou pensando em ir com um layout padrão de três colunas, pois este é um projeto de página de destino muito comum viajado. Uma vez que eu esteja feliz com isso, eu vou tentar criar a segunda seção. Mas primeiro, vamos dar outra cor apenas o dedo do pé para torná-lo diferente do cabeçalho. A coisa mais importante que encontrei ao fazer arame é não ficar preso em uma idéia. Você só tem que continuar experimentando até encontrar algo com o qual você está realmente satisfeito . Agora é hora de criar a segunda seção Y, e esta terá um layout diferente. Claro, eu estou pensando em talvez ter uma nova imagem à esquerda e, em seguida, alguns gráficos à direita, ou talvez um cabeçalho no topo e, em seguida, duas colunas. Eu acho que ir do centro em colunas de árvore para duas colunas parece muito, muito bom. Mas, novamente, você não deveria ficar preso com essa idéia. Vou continuar experimentando. Vamos ao “como”. Para começar, vou usar algo muito simples, como ter um botão play no meio da seção. É uma equipa muito comum. Então eu não estou fazendo nada louco apenas tentando construir um layout básico e, em seguida, começar a fazer variações e ver o que funciona e o que não funciona. A maneira que eu estou imaginando este trabalho botão play é que se você clicar sobre ele, um pop-up aparecerá com um vídeo com uma apresentação de vídeo fora todos os passos que você precisa tomar a fim de tirar proveito da oferta. Agora vamos para quem? Vou duplicar estas formas e usá-las como base. Estou pensando em talvez ter apenas, ah, um grande testemunho bem no meio, e então eu posso ver se eu posso ter outra idéia ou diferente fora para momentos de teste. Vamos passar para o argumento final. Normalmente o que eu tenho lá é variação fora do cabeçalho. Então, se isso é apenas a manchete na parte de baixo ou apenas o parágrafo para a garrafa é o que eu costumo escolher. Ok, então o primeiro projeto está praticamente feito agora. Tudo o que eu tenho que fazer é duplicar este enquanto segura a tecla de opção na seleção de tudo ou copiando colando-o. Agora eu posso começar a experimentar com layouts diferentes, por exemplo, a primeira seção muito parecido e eu estou feliz com isso. Então, mesmo que eu disse que não acho que a primeira idéia que vem à sua mente e usá-la, eu provavelmente vou continuar com ela. Então vamos apenas experimentar com a terceira seção que apresenta alguns benefícios. Eu acho que ter duas linhas fora do conteúdo ao lado de uma imagem poderia funcionar muito bem aqui. Então vamos colocar a imagem no lado direito só eu sei que é uma imagem, mas por enquanto é apenas um retângulo. E do lado direito, eu vou ter talvez duas características para a seção da Casa. Eu provavelmente vou deixar como está, Andi, para quem eu estou pensando em talvez ir com o layout das duas colunas, talvez ter dois depoimentos na mesma seção. Não há muito que possa fazer com a seção final, mas talvez tenha apenas um parágrafo ah na parte inferior. Então o parágrafo que eu vou usar na urze provavelmente faz o mesmo que eu vou usar no fundo S. Bem, vamos apenas ficar no espaço ainda não viver e mover tudo para que possamos caber mais um . O Sr. Variation vai provavelmente dar-me tudo o que preciso para criar um desenho final. Então vamos duplicar o 2º 1 e avançar para a direita para fazer algumas variações. Eu começo com o cabeçalho e eu vou ir para ah deixou o estilo de linha, que significa que eu vou tentar e alinhar tudo para a esquerda para que eu possa ver como isso seria parecido Vamos fazer 11 grandes blocos de conteúdo lá em vez de ter árvore. E para a segunda, muito para a segunda seção, eu vou duplicar este e ter quatro linhas fora, uh, benefícios. Vamos mover este botão play para a esquerda também. E isso pode ser um bloco de conteúdo. Estragou tudo. Então, onde eu posso realmente ter os passos escritos para o caso de o visitante não querer ver o vídeo. Não sei o que isso pode fazer com os depoimentos, mas para a seção de encerramento, provavelmente vou adicionar o logotipo lá. Então estas são as minhas opções de árvore. Agora é hora de decidir quais seções vou manter e quais seções não vão funcionar com o que tenho em mente. Então vamos mover tudo para a direita para ter espaço suficiente para nossa camada final. Eu vou apenas aplicador a última variação. E agora que penso nisso, vou selecionar cada seção individual que eu gosto. Então, o 1º 1 vai provavelmente esta baía, esta como já consigo imaginar o design, então eu sou bonita. Estou muito feliz com a coluna de layout de árvore que eu fiz em primeiro lugar. Seguido por este quatro linhas ou características Não na parte como. Gostei desta seção em particular. Mesmo que não funcione, estou disposto a dar tempo para ver se funciona. Depois, eu queria este layout com dois depoimentos separados, como eu acho que talvez ter que depoimentos meu poderia parecer melhor. E para a seção final, eu provavelmente vou para ir com o terceiro seu design onde eu tenho um logotipo, um argumento de encerramento e o fundo. Estou muito feliz com o resultado, e você vai ver durante todo o processo. Como é importante já ter ah, layout em mente e não fazer muito fora de pensar em cada seção individual. Agora eu meio que sei o que eu quero em cada seção individual e o que eu não gosto. Já visualizei minha página Atlantic, então estou pronto para começar no Photoshopped. 4. Como criar o cabeçalho: Agora estou pronto para começar a construir minha página de aterrissagem um submarino abaixo do fio para Vamos avançar e criar um novo documento com 1200 pixels de largura para que eu possa colocar minhas marcas de guia no centro e em seu tamanho. Então vá e ajuste o campus apenas um campus para 1920. A razão pela qual eu faço isso é porque eu quero ter cada pedaço de conteúdo como, ah, texto, imagens e ícones dentro deste layout 1200. Então agora estou tentando fazer o esquema de cores. Eu simplesmente tenho um par fora retângulos que eu apliquei o esquema de cores que eu fui dado no breve. Você recebeu este resumo. Ah, dentro do curso. Basta verificar os comentários ou a descrição do curso e ele deve encontrá-lo lá. Então, se você quiser, você pode ir junto com ele. Então vamos agrupar isso para cada nome, o esquema de cores e são servidos incorporando Ah, o quadro de arame. Este quadro mundial será colocado em cima de todos os outros elementos, eu possa ter certeza de que eu possa alternar entre ele e ter certeza de que eu estou no caminho certo quando eu estou construindo a página de destino. Então vamos renomeá-lo para arame quadro para renomear uma camada. Eu simplesmente clique duas vezes em seu nome. Agora vamos tornar o fundo branco e começar a desenvolver nossas seções. Vou em frente e criar um retângulo disse É sagacidade Teoh. 109 120 com a altura dependendo da altura para querer ter na sua secção específica para este, vou com 800 pixels. Assim que acabar com isso, vou adicionar o resto dos elementos, o resto das formas que fiz para as seções dos Dodgers , então terei que ajustá-los para ter certeza que se encaixam nas minhas necessidades. Eu provavelmente vou usar 500 pixels para cada um, mas vamos ver como isso vai correr. Eu costumo usar diretrizes. Dois separam cada seção individual. Dessa forma, estou me certificando de que sempre que eu começar a construir Atlantic Page, eu já tenho uma visão sobre como as outras seções vão parecer comparadas. Toa que um agora criar o primeiro grupo onde eu vou colocar o primeiro retângulo. O retângulo morto representa o cabelo. Vamos renomeá-lo e agora eu posso mover o posto virando por dentro. Vamos criar ah, camada acima dele e clique com o botão direito e criar máscara de camada. Isso significa que tudo o que vai ser colocado nessa camada vai ser contido dentro do elemento de forma. Por exemplo, eu quero ir com Grady em semelhante ao que eu vi quando eu estava procurando inspiração para acessar o Grady no reboque, basta pressionar G e, em seguida, no topo do lado esquerdo, na tela, Você vai ser capaz de controlar o rádio. Vamos pegar o logotipo e colocá-lo onde queríamos, onde queríamos que estivesse. Holcomb, NT ou Control T. Se você está em um PC para que você possa transformar esse elemento específico, Eu escolhi ir com uma diagonal radiante só porque eu acho que parece muito mais interessante e mais dinâmico do que apenas ah, regular horizontal ou vertical Grady int. Estou tentando usar as cores. Eles me deram as cores da marca deles. Mas é claro, algumas mudanças podem aparecer quando eu começar a usar imagens. Mas vamos em frente e criar a manchete. Vou torná-lo branco e a frente é ferroviária para ter mais controle sobre o seu elemento de texto. Por favor, vá ao comitê ou controle T e o painel de personagens vai abrir. Então agora você tem mais controle sobre o seu tipo. Eu vou apenas com 50 pixels para este aqui. Normalmente fico por volta de 40 a 50 para a manchete. Assim que tiver isso, vou passar para a segunda manchete, a segunda. Basta criar a nova caixa de impostos. Vamos baseá-lo e eu vou usar 24 pixels para este. Vamos fazer uma aposta. E eu realmente acho que parece muito bom até agora. Nesta fase do processo, você deve ter medo de experimentar novas posições para cada elemento e experimentar novos layouts. Seria menos provável que o fizesse no final do projeto. Então esta é a hora de experimentar. Como podem ver, acabei de criar um retângulo elementar de forma, e este será o meu campo estrangeiro. de Lembre-se este pode ser o elemento mais importante na sua página de destino, então você precisa ter certeza de que seu posicionamento é perfeito. Por isso, agora vamos adicionar a garrafa ao lado dela. Simplesmente mantenho a tecla antiga ou a tecla opcional e arrasto-a para a extrema direita para duplicar esse elemento. Esse elemento de forma. Agora isso vai se tornar o meu traseiro. Vou clicar duas vezes dentro dele para que eu possa modificar sua cor, e eu vou amostra diretamente da forma de cor que eu criei anteriormente. Vamos duplicar isso também, selecionar tudo e torná-lo 15 porque agora eu quero jogar algo bem abaixo dos quatro. Isso é sobre os termos de serviço. Então eu estou incluindo esta linha porque geralmente você tem que concordar em algo quando você enviar o formulário ou quando você cria uma conta é bom de vez em quando simplesmente dar um passo para trás e olhar para o layout que você acabou de criar que irá ajudá-lo a construir melhor layout e certifique-se de que o espaçamento está certo. Por exemplo, o logotipo parece um pouco cozido para mim, mas eu não vou apenas isso ainda. Deixe-me limpar algumas dessas camadas primeiro. Agora eu sei como eu lidar com sua temporada, provavelmente a melhor maneira de fazer, mas geralmente no final do projeto, eu vou para o documento e certificar-me de que cada camada é nomeada e colocada corretamente. Eu acho que o formulário parece bom, mas eu quero ter um rótulo de formulário para o seu campo. Eu ainda estou experimentado com o com a cor secundária, algo que é neutro, algo que funciona bem com esta camada atual. Vamos duplicar isso e criar a chamada à ação. Vamos começar a negociar. Então esse é o único elemento. O único elemento de texto e eu vou ousar para garantir que nos destacamos mais. Estou começando a gostar da aparência dessa Heather. Já posso imaginar como uma imagem a afetaria. Então eu gosto de ter uma foto que não reveja nosso texto, algo que vai bem nos lados. Então esse é o que faz o próximo truque. Então eu vou ter que ir no Splash porque este é um dos melhores, ah, os melhores lugares para obter imagens livres de royalties que são bastante alta qualidade. Então comecei a procurar por algo que tenha um computador. É algo que tem um usuário usando um notebook ou um computador, mas eu tenho que encontrar um que tem o layout, as palavras com a minha necessidade, algo que gosta deste exemplo com aquele cara de trás? Mas preciso de algo, algo melhor. Vou continuar procurando. Talvez tenha um caderno dentro dele, ou vamos ver este. Foi baixado muito rápido e confira. Vou guardá-lo na minha área de trabalho. Ok, então vá. Vá em frente e coloque. Coloque-o na sua urze. Como você pode ver, foi colocado bem no topo do grupo. Mas vou colocá-lo debaixo do meu Grady int e degradado. Vou selecionar multiplicar a partir das opções de mesclagem. E como você já disse, isso parece muito ótimo desde o início. Apenas alguns pequenos ajustes de colocação e eu estou praticamente convencido. Agora, a única coisa que eu não gosto é que as cores antigas não foram realmente preservadas. Então eu vou simplificá-los novamente e criar o Grady int que rosto dedo do pé um fundo transparente e transparente. Então eu apenas troquei eles usando X e ir com azul escuro à esquerda e este laranja à direita. Tente ver como ele ficará com diferentes estilos de camada diferentes em diferentes capacidades. Veja se melhora o design ou não. Eu só vou seguir com o normal e diminuir a opacidade dele. O que eu costumo fazer nesta etapa do processo é criar formas que têm alturas específicas, para que eu possa ter certeza de que o espaçamento entre os elementos é bastante igual. Mas este não será o final, o espaçamento final entre os elementos. Vou fazer um vídeo especial no final onde eu vou mais em profundidade no presente, todo esse processo de espaçamento dos elementos corretamente. Eu acho que isso parece muito bom até agora, mas tem algumas mudanças que eu quero fazer muito rápido. Em primeiro lugar, gostaria de mudar a segunda manchete. É divertido tamanho Teoh, 21. Deixe-o cair um pouco, por isso não é tão poderoso quanto o como a manchete principal e fazer a manchete principal med Faça tudo tampas. Eu acho que isso parece muito melhor do que antes, mas é claro que esta é apenas a minha opinião. Vai depender do cliente se ele decidir ir com ele ou se ele quer alguma mudança antes Agora, isso é o que eu vou fazer para o resto do curso. Agora eu só quero mostrar a vocês uma rápida diferença entre a armação do fio e o resultado que temos pouco antes de estarmos prontos para ir para a próxima seção. Então você sabe o quão importante é a armação de arame para garantir que o design seja consistente. 5. Como criar a seção primeiros de recursos: Agora que completamos recentemente a manchete Agora é hora de passar para a segunda seção e apresentar nossos recursos. Na lição anterior, passamos por todo o processo fora de projetar a seção de cabeçalho principal. Agora vamos passar para o próximo e vamos construir. A primeira seção representa nossos recursos a primeira seção onde vamos apresentar os benefícios oferecidos pela página de destino. Agora vamos em frente e criar a nova camada. E como no vídeo anterior, eu vou criar uma máscara de camada mesmo que eu não tenho certeza se eu precisava desta vez como o fundo, ele vai ser completamente branco. Então eu tenho essa idéia de colocar essas três colunas dentro do retângulo. O retângulo vai ser todo branco. E vamos primeiro ajustar para este peso fora das diretrizes, que é 1200 pixels e aplicar Sua cor vai ser branca, e eu vou defini-la adicionando uma sombra. E então eu vou para um globo exterior. Então, para esta sombra, eu vou apenas com multiplicar e para o brilho externo Ah, apenas um sombreamento normal, mas com muito baixa opacidade eu estou muito feliz com isso. Vamos ver como fica. Se eu passar um pouco sobre a ajuda, Heather, eu sei que coloquei o retângulo no topo da seção de cabeçalho. Terei que me reajustar, mas não agora. Mas cada elemento terá que ser reajustado. Mas, por enquanto, vamos começar a adicionar conteúdo a ele. Eu vou com uma pequena manchete e vamos fazer isto como os velhos bonés. Mova um pouco para baixo. Claro, eu quero tornar o tamanho do telefone menor. Talvez 24. Agora estou procurando o conteúdo que vou colocar lá. Vamos começar com este com este mercado lodo peer a peer Bitcoin. Esta vai ser a nossa manchete para esta Seção 24 7 olha agora eu tenho que olhar para o conteúdo e o que eu vou colocar logo abaixo Será um parágrafo. Esse é o que os candidatos selecionaram seu duplicado este elemento para que eu possa trabalhar nele . Mas primeiro tenho que definir onde eu teria colocado inicialmente. Aqui é controlar um Teoh, selecionar tudo, torná-lo escuro. E agora vamos movê-lo para a pasta direita, para que fique visível. Então está em cima do retângulo. Vamos substituir esta linha até Tex por apenas 17 nós vamos seu 17 de agora em parágrafos . Vamos encontrar a cor que pode funcionar bem com este. Estou pensando na luz. Ah, cinza claro. Combinado com alguns blues, não é tão visível como eu gostaria que fosse. Então vamos em frente e mudá-lo um pouco. Um pouco mais escuro, um pouco mais escuro. Sim, acho que é aqui que é melhor? Vou copiar isso e dessa cor para o esquema de cores. Então eu vou replicar 11 elemento forma e eu vou aplicar duplo descolorido, clique duplo baseado, então é isso. Agora vou usar essa cor em toda a página para alguns, para alguns elementos. Vamos encarar tudo um pouco e eu vou começar a trabalhar no layout da coluna 33. Inicialmente eu tinha na armação de arame. Agora vamos mover isso um pouco para cima, e eu vou criar 33 formas separadas só para que você possa ver onde eu estou prestes a colocar o conteúdo, talvez ter um design de carro para cada um, mesmo que eles sejam meio pequenos para isso, mas eu provavelmente vou apenas ir com padrão. Posso manchete e descrição logo abaixo. Então vamos começar com o 1º 1 É uma pequena quantidade de texto. Solis, basta replicar este. Torná-lo menor ajustado, e eu sou selecionado e colar meu conteúdo aqui. Então não tenho certeza se vou ter uma Nikon lá ou o que vai ajudar ou o que vai acontecer . Mas eu vou descobrir isso. Ah, durante o processo. Então vamos ter ah, a última festa mudou. E vamos usar isso, semelhante a uma manchete, mas algo que se destaca mais do que uma manchete básica vai torná-lo maior. Coloque a sua direita acima dela. Ainda não tenho certeza sobre a cor. Talvez eu tenha algo como o vermelho que usei dentro da manteiga. Eu acho que parece muito melhor do que antes e ligeiramente ajustado 30 por agora que eu olho , Eu olho para ele de cima. Ele precisa ficar em mais. Então 40 40 parece certo. Vou me ajustar usando minhas flechas. E vamos agrupar isso estes elementos e duplicá-los, segurando o velho Oh, eu prefiro os elementos errados no grupo. Deixa-me encontrá-la. Cada um é este. Está bem, o meu rabo. Certo, selecione os dois. Comando G, então renomeado clicando duas vezes no nome da pasta? Não, eu só duvido de Kate Itron segurando o velho o volumoso e movendo todo o grupo. Então este é o layout. É assim que vai parecer. Agora só tenho que mudar o texto. Ainda gosto da segunda linha. Se você é um comprador, sim, baseado nisso. E eu vou ter que ajustar a manchete de cima. Eu vou apenas dizer 100% algo que é relevante para esse parágrafo específico. Não, para o último. Ópio. Cole e substitua isso. Nós somos o número um. Isso parece muito simples em Eu estou muito feliz com ele. Mesmo que eu não tenha passado muito tempo neste caso. Estou muito feliz com isso. E como vai com a página. Só desmoronou esta vez e o grupo foi feito juntos. Mas agora que penso nisso, acho que vou experimentar a cama e ver como ficaria com ícones em vez destas manchetes. Então deixe-me removê-los bem rápido. Esta é a minha maneira de selecionar. Eu sei que há um jeito melhor. Isto é o que estou acostumado. Soho, por favor não julgue, por favor não me julgue. Está bem? Agora estou usando. Certo. Fundo. Frente direita é um aplicativo que tem todos os ícones materiais, os fornecidos pelo Google. Posso procurá-los rapidamente. E rápido, Dragon , entra no documento do Photoshop. Por favor, tenha sua mente que tudo isso consultei gratuitamente e disponível no site do Google. Vou incluir o link na descrição fora do curso. Então você terá acesso a todos esses ícones não é algo que você tem que pagar por isso. Eu só gosto de usar isto. Como podem ver, coloquei uma criança Icahn para o 1º 1 porque ele está relacionado com suporte do que com segurança e proteção. Vou usar a fechadura. Isso faz sentido? Certo. E para a 3ª 1, provavelmente vou ter alguma coisa. Ah, escudo de segurança. Certo, agora vamos nos ajustar. Este é um pouco. Uh, eu gosto do jeito que eles parecem, mas há um dedo grande demais grande agora, então vamos torná-los menores primeiro. Então, como o primeiro 1 agora em, torná-lo menor que eu rapidamente alinhar todos estes e eu perder a cor do esquema de cores. É a primeira ameaça e ver como isso parece. Vou copiar todos copiou o estilo da camada e paga-los em cima destes dois elementos. Não, não tenho certeza se isso parece bem, estou sentindo que atrai muita atenção. Então vou tentar algo mais. Sado, talvez um Grady Int. Mesmo que estes ingredientes, se eu estou usando o azul escuro e o laranja para laranja queimado, é provavelmente muito difícil para um. É ainda pior do que antes, então não tenho certeza se talvez eu vá com aquele cinza claro, você disse. Quero dizer, deixe-me ver rapidamente limitar alternância entre o antes e depois eu estou um pouco conflituoso. Deixe-me ver. Sim, eu vou ficar em conflito porque eu realmente gosto das manchetes, da tipografia simples. Mas eu gosto dos ciclos também, porque eu acho que eles tiveram um benefício para fazer o benefício. Deixe-me mudar para a vida Ray e ver como isso parece. Talvez seja um pouco mais Salo. Sim, acho que gosto mais do que vermelho, mas essa é a preferência. Então, por agora isso é pendurado vai eu vou continuar com o design com esses ícones em. Provavelmente com isso dito, acho que estamos prontos para ir para a próxima seção vendo o próximo vídeo. 6. Como criar a segunda seção de recursos: Então, nesta lição, vamos criar a segunda seção de recursos, que é na verdade a terceira seção do nosso design. Aqui está a armação do arame. E como você pode ver, temos quatro linhas de benefícios diferentes para que possamos começar a construir isso imediatamente. O que vou fazer, vou depreciar essa manchete em particular. Basta movê-lo para dentro do grupo apropriado e uma linha de parágrafo. Então vou ter uma manchete que uma linha de parágrafo. E ao lado, vou colocar um layout bem direto da Nikon. Só uma linha. Estes Ah, vamos deixar a linha para este parágrafo. Um filme. Tente o próximo. É isso que deveria ser. Ok, vamos pegar o conteúdo agora para este. Eu vou com os que estão de baixo. Os usuários podem facilmente trocar Bitcoin etcetera. Vamos colar isso lá dentro. Agora, eu não tenho nenhum conteúdo para as manchetes, mas eu vou inventar algo. Trocar deve ser bom. Algo realmente simples em Vamos deixar a linha isso também. Então é mais fácil. Teoh editar um grupo de aplicadores lado que é agrupá-los juntos e nomeou esta troca particular Grupo Um. Ok, agora eu estou pronto para duplicá-lo segurando são a chave antiga ou a tecla opção. Vamos mudar a visibilidade do retângulo, porque provavelmente vou usar um fundo branco reto. Ok, Uma vez que eu tenho o guisado, Eu posso selecionar ambos e com a tecla de opção, arrastá-lo para a direita. E agora eu tenho meu layout, e estou pronto para inserir meu conteúdo. Vamos lá. Vamos encontrar o conteúdo para cada linha individual. Então eu vou usar o Discover um para o 2º 1 Eu não tenho certeza sobre a manchete ainda, mas eu vou primeiro substituir todos estes e depois pensar sobre as manchetes agora, geralmente o que eu faria, eu simplesmente como o cliente o que eles vagam. Mas para este exercício, eu vou apenas fazer as pazes. Isso deve ser bom. Agora vamos em frente e mudar as manchetes. A 1ª 1 é sobre descobrir mais, então eu vou ter ah, tipos de pedidos. Ah, a 3ª 1 é sobre financiamento. Então vamos ver. Margem de financiamento. E nos últimos um ano menos máquinas este primeiro. Está bem. E para menos um, é sobre trabalho personalizado personalizado, espaços de trabalho Então religiosos têm trabalhos agora mesmo eu estou muito feliz com o que eu tenho. Conhecimento é encontrar ícones para cada grupo individual. Deixe-me renomear o primeiro, para saber exatamente que não cometi o erro que cometi antes. Agora vamos para a direita Telefonado e Allegis Procure por algo que possa caber com isso para So First vamos. Que mudança de troca? Sim, vamos colocar este aqui. Talvez a 45 graus de controle venha ao comitê para girá-lo e vamos colocá-lo à esquerda . Clique duas vezes no layout para inserir um silencioso e ir para a sobreposição de cores ou não, deixe-me apenas ir em frente e ter um traço para ele. Eu era simples. Este cinza claro e dois pixels parecem bons e apenas, uh, levar o campo para 0%. Isso deve ser o suficiente. Vou tentar mover estes para a direita um pouco apenas para ter espaço suficiente margem suficiente entre o elemento gráfico e os parágrafos. Não, eu ainda não tenho certeza sobre o posicionamento se eu vou ser apenas vertical ou colocá-lo de lado . Mas, por enquanto, vou deixar assim e espero que resulte. Bem, dependendo de como os outros ícones estão olhando porque eu quero ter um olhar consistente para cada um e para cada grupo individual. Agora preciso procurar outro ícone. Vamos para tipos de pedidos com o carrinho de compras. Talvez este pareça bastante decente. Eu vou aplicar exatamente o mesmo estilo que eu fiz no anterior no ícone anterior . Então, basta clicar com o botão direito e copiar o estilo e colocá-lo em cima dele. Talvez tê-lo lá fora, para que não pareça tão lotado. Isso deve ficar bem. Deixe-me apenas movê-lo. A cama. Não, ainda estou tentando descobrir como posso fazer tudo parecer proporcional, mas isso deveria. Isso deve ser bom. Por tão longe. Vamos ao esboço, está bem? E eu acho que é hora do próximo ícone para financiamento de margem. Não sei o que pode funcionar. Um mapa de anulação, talvez. Ah, gráfico de pizza desceu lá. E a mesma coisa que eu fiz com os outros ícones apenas o dobro apenas colocou o estilo em cima dele. Vamos começar a procurar, ah, ah, novo ícone para o espaço de trabalho. Não sei se posso ter algo empilhado um no outro ou editar. Eu não iria vê-lo. Eu me pergunto como ele, mas eu provavelmente só tenho o ciclo. Então algo que mostra como você pode adicionar coisas. Então eu pressionei com base no estilo em cima dele, e fazer pequenos ajustes com com com as teclas de seta. Não, vamos alinhá-los. Nove também, também, e o primeiro centro alinhou-os. Eu sei que este pode não ser o melhor momento para tutorial, mas eu geralmente gosto de ficar algumas dúvidas para que eu possa ver como elementos do dólar empilhar-se contra a nova camada. Se você ficou muito tempo ampliado, você não vai ver como ele parece comparado com os outros. Então imagem para ampliar o suficiente a partir do tempo. Sei que penso nisso. Eu acho que eu vou ir com a primeira idéia que eu tive, mesmo que eu disse, Não fique bloqueado na primeira idéia, eu vou para a seção anterior e apenas e apenas habilitado o primeiro 1 com as manchetes. Não com os Dikkers. Eu acho que ter que muitos ícones pode ser prejudicial e não. Agora, a segunda seção de recursos parece mais interessante, não ter que se comparar com a acima dela, pois tinha um layout realmente semelhante. Pouco antes de encerrar esta seção, vou mudar o posicionamento do esboço para cada elemento individual que eu vou com dentro porque, como um zay disse sobre o financiamento da margem, uh, aqueles traçados são muito próximos um do outro, então eu vou apenas ir com o posicionamento central para cada ícone nesta seção. E agora acho que estamos prontos para passar para a seção de depoimentos. 7. Como criar a seção de divisão do processo: Ok, pessoal, Agora que terminamos as seções de recurso para é hora de passar para a parte como vamos colocar ah, botão play e algum conteúdo à direita que vai quebrar todo o processo. Vamos começar por, eu acho que diretamente atrás que vai definir esta seção. Vamos mudar o tamanho 21 1920 por 500. Eu fui em frente com 500 para a maioria dessas seções como eu sinto que eles precisam ser equilibrados , . Com este, vou adicionar a imagem de fundo, por isso vou ter de fazer uma máscara de recorte. Deixe-me agrupá-los primeiro. Cada nome, este processo. Ok, então esta é a seção da Forja. Eu vou em frente e criar uma máscara de recorte, como eu disse e agora é hora de encontrar uma nova imagem para isso. Vou para o Chrome e deixe-me primeiro descobrir como o computador funciona. Ok, agora eu quero dizer Crumb, deixe-me ir até nós. Precious dot com Este é o meu lugar favorito para imagens livres de direitos. Ah, eu preciso encontrar uma imagem que não seja complexa, algo que mostre o usuário se engajando com o conteúdo, mas que não se sobreponha a todo meu elemento. Então eu vou procurar por Mobile e vou procurá-los até encontrar algo que eu acho que poderia funcionar com o meu layout atual. Todas essas imagens são ótimas. Então, além de Splash, recomendar eixos que vêm. Esse também é um ótimo lugar para imagens livres de direitos autorais. Mas este é o meu favorito. Então encontrei uma imagem. Vamos fazer o download. Vou salvar na área de trabalho e voltar para a loja de fotos e reproduz essa imagem. Ok, agora eu posso ajustar sua posição e vamos virar porque eu quero ter o conteúdo, os parágrafos à direita e a manchete e eu queria ser o mais limpo possível e não interferir foram com ele. Então, vamos descer, está bem? Isso já combina muito bem com o fundo, e agora eu não posso radiante Eu vou com poderia as cores da mesma forma que eu tinha no cabeçalho. Vou tentar da esquerda para a direita diagonal receber se eu puder encontrar o modo de mistura que funciona, talvez cor. Não, há muito contraste nesta imagem, então não sei o que vai funcionar para ela. Ah, vamos ver um desses. Eu ainda não acho que eles são bons o suficiente para o cabeçalho da imagem. Multiplicar funcionou perfeitamente. Eu nem tive que adicionar nada. Mas com isso, acho que vai ser um pouco mais difícil. Então vamos diminuir a capacidade um pouco e agora criar Ah, camada em cima disso e usando o Grady Intell em ir para o que vai de uma cor para uma transparência. E primeiro com o azul escuro, vou arrastá-lo algumas vezes. Agora vou mudar o dedo do pé de laranja e vivê-lo ao normal. Eu acho que isso parece muito bom até agora, e é muito, muito distante começo. Agora que dupliquei essas camadas, estou tentando obter algo mais contraste. Há algo mais vibrante? Eu não tenho certeza. Sucesso Hamas Vou sair dessa, mas acho que vou ficar com isso. Este olhar é que é muito bom, e eu já posso imaginar como eu vou colocar seus parágrafos no lado direito e o botão à esquerda. Então vamos ajustar ligeiramente o retângulo porque ele foi deslocado por um par de pixels e agrupar tudo para que eu possa ter certeza de que o fundo é separado do outro elemento. E vamos começar duplicando um desses grupos, vou selecionar o título no parágrafo e movê-los para a direita, no grupo certo, na seção direita , logo acima do plano de fundo. Então, para manter as coisas consistentes, eu vou usar o mesmo tamanho de telefone para a manchete e o parágrafo quando eu puder , sempre que eu não estiver limitado pelos elementos. Por isso, agora estou a começar a adicioná-lo. A manchete que vou dizer como vou começar? É uma frase bem básica. Tudo isso pode ser ajustado na fase de revisão, então eu não estou muito preocupado com o que eu vou colocar lá e vamos ter esta linha aqui . Quero dizer, eu vou torná-lo branco porque vai se destacar muito melhor do que isso, certo? Certo, vamos ajustar o recipiente. Não, deixe-me apenas drogado isso e duplicado para que eu possa incluir os passos necessários para que a pessoa que visita o site aproveite nossa oferta, que é um teste gratuito. Então deixe-me ir com o primeiro passo e isso é criar sua carteira. O segundo passo, será conectar seu cartão de crédito e o 3º 1 provavelmente é algo simples, como comprar qualquer Cryptocurrency. Então isso parece, isso parece OK. Deixe-me ajustar o espaçamento entre cada linha. Então eu vou tocar no comentário T. E daqui eu vou apenas o espaçamento de linha. Estou muito feliz com isso. Mas vamos mover todos esses elementos um pouco porque agora eles não estão centrados nesta seção. Isto parece um pouco ursinho. Eu vou ajustar este parágrafo e ter apenas duas linhas e de alguma forma separar essa parte com a manchete e o parágrafo e os passos nessas partes separados. E deixe-me usar a liberdade do dedo do pé de Diarra onde eu preciso que eles estejam. E agora eu posso passar para o botão play lábios selecionáveis, dedo do pé de elipse. Andi, deixe-me arrastá-lo até aqui. Provavelmente vai caber em algum lugar no meio da parte esquerda da seção. Uh, vamos tentar. Não, isso é muito pequeno. Eu primeiro tentei Teoh torná-lo um pequeno, como é os ícones acima, mas isso é muito pequeno. Então eu vou replicá-lo no lugar atrás. E eu só vou usar essa seleção para criar um Grady int. Vou criar uma nova camada e com o grande odontológico são apenas drogá-lo um pouco. Então, enquanto criar efeito de desvanecimento ISS para o botão, alguma forma asado. Mas você ainda pode vê-lo. E eu provavelmente apenas colocar o 1º 1 o primeiro menor em cima só para ter certeza que é realmente visível. Deixe-me procurar e agora posso jogar. Aiken, Eu preciso de algo relacionado com os ícones acima da segunda seção de recursos. Isto deve ficar bem. Eu estou dentro Arraste-o para dentro Ok, eu coloquei, e eu vou aplicar um tid de cor branca branca. Então, sobreposição de cor branca. Está bem. Pode ser um pouco para o Sado. Eu sei que eu disse isso como o jeito parecia assim, mas eu provavelmente vou apenas fazer a primeira idéia e colocar o primeiro os lábios em cima do círculo derrotado. Então deixe-me re tamanho esse elemento. Ah, comitê. E eu acho que isso fica melhor com esse efeito de desvanecimento. Eu acho que ele faz aparecer mais faz você se destacar mais em dá-lhe alguma dimensão. Vou jogar com alguns modos de mistura aqui para ver se algo parece bom. Isso parece muito bom, apesar de ser um pouco semelhante a ter que ficar normal e com a capacidade do Senhor, o que, por enquanto, deve estar tudo bem. Agora estou pensando em uma maneira de melhorar essa parte específica dos passos. Eso Vamos apenas remover o sistema de numeração e mover tudo para a direita um pouco e vamos tentar. E isso é um Michael que pode ir bem com a Caçadora. Então vai escrever fundo e você procurar alguns ícones para este. O 1º 1 vai ser uma carteira. Obviamente, deixe-me ver se eu gostei de algum desses Dragon Drop e vamos ajustá-lo mantendo pressionado o turno e colocá-lo onde essa linha iria. E, claro, vou clicar duas vezes e aplicar uma sobreposição de cor branca. Mas primeiro vamos encontrar Nikon para cada um. Um cartão de crédito para o 2º 1 faz sentido, certo? E para a 3ª 1 talvez um talvez em quê? Não, não a carteira, porque eu já fiz isso. Uma loja, uma sacola de compras. Vamos ver, talvez aquele sim, mesmo que pareça diferente dos outros americanos, talvez porque ele tem um tipo de, Ah, quadrado olhou e não se encaixa com as direções relativas. Então deixe-me tentar este e ver como isso ficaria. Sei que não é a melhor maneira de colocar Ikenson no topo um do outro, mas estou tentando descobrir se o layout ficaria ótimo. Sei que não é a melhor maneira de colocar Ikenson no topo um do outro, Vamos tentar este carrinho de compras. Preciso colocá-lo primeiro. Agora eu realmente gentil se vai funcionar ou não. Então deixe-me deletar os primeiros. Acho que é bastante decente. Vou ter que aumentar um pouco. E vamos renomeá-los Cartão CARRINHO e Mundo e agora dobrar rapidamente, uh, sobreposição de cores e o branco padrão. E não apenas copiar e colar o estilo dealer. Eu tenho que fazer alguns pequenos ajustes, então vamos mover tudo para a esquerda um pouco. Refiro-me ao conteúdo do texto e ao mero contentor da justiça, e acho que isto está muito bem feito. Eu não vejo nenhuma mudança que eu gostaria de fazer agora. Eu sinto que este é um bom layout. E acho que estou pronto para ir para a próxima seção antes de fazer tudo. Está bem, deixa-me lembrá-los. E agora posso ir para a seção de depoimentos. Vejo você no próximo vídeo. 8. Como criar a seção de depoimento: Ok, pessoal. Então agora podemos começar a trabalhar em nossa seção de depoimentos. Como você deve se lembrar, a partir da armação de arame, nós tínhamos duas colunas de layout para que possamos começar com isso. Primeiro, deixe-me selecionar o retângulo para e criar nossa seção. Então vamos GIs clicar uma vez disse que um peso fora 1920 por 500 pixels. Vamos colocá-lo logo abaixo do processo e selecionar uma régua guiadora apenas seguir o limite. Aquele espaço. Eu não pretendo ter nenhuma imagem de fundo nele, então eu não preciso de doar. Eu só precisava definir a seção. Ok, vamos dar um nome a esta pasta e podemos começar a construir os mesmos Ono's. Então, primeiro, deixe-me desenhar o primeiro retângulo. Ok, vamos colocá-lo aqui e ajustado o suficiente para que você tenha espaço suficiente para dois deles. Como você pode ver, eu não fui direto para a régua do meio. Eu só fui um pouco para a esquerda, então eu tenho espaço suficiente para dois. Eu vou copiar o estilo da camada do retângulo da segunda seção porque eu quero um olhar semelhante para descartar este bem Então eu apenas colado em e o mutismo em um pouco para ver como ele parece. Ele tem uma sombra bastante sutil, que são como, Agora, mantenha sua mente que eu vou usar texto de espaço reservado para este, como eu não tenho os depoimentos que eles querem dedo do pé ter no design final. Então eu vou ter que procurar por isso. Primeiro, vou colá-lo aqui, mas não, eu tenho que fazer um recipiente primeiro. Ah, é isso. Deixe-me trabalhar um pouco no tamanho do telefone. Vou escolher 17 para este, mas provavelmente vou ter que ir maior com ele. Ou apenas faça os retângulos mais. Vamos movê-lo para o centro. No centro Landis em frente. Não tenho certeza se serve. Alinhado Bem, sim, isso está tudo bem. E além disso, vou ter o nome, o nome da pessoa que está dando o depoimento. Deixe-me colocar algo aleatório nele. Tenho certeza que vai ser mudado mais tarde no processo. Vamos aplicar uma cor diferente. T'd. Ah, camisa preta deve estar bem só para fazer um envio fora do depoimento. Mesmo que o depoimento geralmente precise se destacar mais do que o nome. Mas neste caso, vou levar isto. Esta pode ser uma boa escolha. Vamos ajustar o posicionamento de cada elemento e criar uma elipse onde o avatar da pessoa que deixou o depoimento será colocado. Agora, eu quero algo parecido com os destruídos atrás. Sombra muito sutil. Deixe-me mover tudo para cima. Ok? Então eu quero o sombreamento de forma realmente sutil e baseado em Ah, sim, é realmente sutil. Um zig n c. Mas vamos aumentar um pouco o tamanho da sombra em sua capacidade. Deveria ser. Deve ser melhor agora. Agora tenho que encontrar uma imagem. Eles podem ir lá como um espaço reservado até eu pegar a verdadeira boceta. Mas primeiro, eu gostaria de replicar tudo. Então vamos agrupar tudo primeiro, uh, este todo, este testemunho, eu vou agrupar e depois segurar a chave antiga. Eu só li para a direita para que eu possa ver se este layout é o que eu estou procurando antes eu investir mais tempo nele. Deixe-me mudar o nome Real Kurt, apenas com o propósito de ter algo diferente no lado direito e que tem algo exatamente o mesmo. Mas isso parece OK agora. Valor para encontrar imagens para ele. Como de costume, eu vou entrar em Splash e encontrar apenas procurar pessoas. Mas por alguma razão, tudo o que estou a receber é mulher eso. Vou tirar umas fotos rápidas de uma , citando que isso pode caber com o que eu preciso. Por exemplo, aquele. Deixe-me ir em frente e colocar isso dentro do último lugar embutido. Vou selecionar o tiro na cabeça que acabei de tirar e vamos tentar colocá-lo acima do Círculo A Z pode ver. Eu posso apenas colocá-lo acima e, em seguida, basta clicar e mantendo o comando sobre essa forma específica e ele vai criar uma seleção fora dessa forma para que eu possa ver exatamente onde essa forma é colocada sob a imagem. Mas eu preciso selecioná-lo primeiro e apenas mover o fora da forma dele. Vou diminuir a sua capacidade. Talvez eu possa ver exatamente onde posso colocá-lo para caber corretamente dentro. Vamos ampliar um pouco e arrastá-los ao redor, Ok, Agora eu posso fazer essa seleção. Então, mantendo pressionado o comando, clique no jogador de forma. Está criando. Ah, escolha o clique direito e copie na frente. Então este é o dia em que Madrigal me deixou fazer justiça e torná-lo menor para que eu possa ver isso. Ah, retângulo atrás. E se parece com outra linha com uma sombra. Então este é o olhar. Vou atrás de pistas na Nikon. Talvez um resfriado, , e estou pensando em colocá-lo na parte inferior do retângulo. Vamos ver como fica no lado. Agora, eu não acho que eu vou matar isso, mas apenas para ver como ele ficaria como vamos aplicar cor e selecionar o cinza escuro que eu já usei anteriormente em outros elementos. Talvez o vermelho. Não, é isso, está bem? E parece OK, mas tenho a sensação de que a centralização pode parecer ainda melhor. Então, menos do que como este elemento em alinhado divertido Caroline Mental. Eu acho que isso é melhor do que antes, e o design não é tão misturado como era antes. Então vamos apenas replicar tudo e movê-lo para a direita. Certifique-se de que ele tem o espaçamento correto. E agora tudo o que quero fazer é mudar o nome só por causa disso. Uma vez que eu fiz isso, eu posso ir e agrupar tudo e definir esses dois grupos. Então eu sei qual é qual. Vamos fazer alguns pequenos ajustes, alguns problemas de posicionamento porque eu estou pensando sobre o espaço em branco que eu quero ter o seu. Então este é o quadro de arame, como ele parecia e como o design parece agora. Mas eu estou pensando que algo está faltando. Então talvez tenha, ah, clientes uma seção de clientes, uma pequena seção onde eu apresento os clientes mais importantes que estão usando esta plataforma. Então vamos ter uma manchete. E então isso é mais parágrafo logo abaixo. Terei os nossos parceiros. Deve ficar tudo bem. E eu estou pensando que eu já tenho uma linha para essa seção em particular. Deixa-me só olhar. Sim, use o último. É o último aqui que está ajustado. Só assim parece melhor linha proporcional e central. Seria Thea outros a outra manchete. Agora estou pronto. Teoh, mude para dentro e veja as imagens dos sócios. Já guardei isso. Então deixe-me agrupar isso primeiro, e agora eu posso ir em frente e colocar o parceiro. Vai devagar, vou fazê-los um pouco mais pequeno e colocá-los bem debaixo da rede. Quero dizer, torná-los um pouco maiores só para que eles possam se levantar mais. E eles são alinhados com dois depoimentos de coluna acima. Deixe-me apenas criar um retângulo bem rápido apenas para definir este grupo de seção este aqui dentro. Vamos movê-lo para baixo para que eu possa ver os logotipos e ajustar o posicionamento dele . Certo, isso deve ser bom. Agora, vamos arrastar a régua lá para defini-la. E eu posso remover isso. Aquele. Acho que há espaço suficiente para construirmos nossa seção final, que será o argumento final. Vejo vocês no próximo vídeo. 9. Como criar a seção de argumento final: Ok, caras sabem onde você está prestes a projetar a última seção. Então vamos dar uma olhada no que fizemos até agora e ver como essa seção deve parecer Agora que estamos prontos, eu vou apenas replicar a primeira seção, a seção urze. E apenas segurando a velha chave em mover-se para baixo agora na armação de arame. Eu só tinha o logotipo, uh, manchete ou um parágrafo dependendo do que eu vou usar. E o botão embaixo daquele fundo vai estar ligado à primeira seção, e vai dirigir. O visitante recebeu um clique direto para a primeira seção onde ele pode se inscrever para o para a conta gratuita. Então vamos começar a editar isso. Vou fazer o logotipo um pouco maior já que é um vetor. Isso não deve ser um problema agora. Apenas elegeu o botão de pincel e cliquei uma vez para que eu possa editar esta camada em particular. Estou selecionando apenas o Eiken como esse é o único elemento do Logan que vai usar. Então, vamos renomeá-lo e sobreposição de cor branca. Vou colocar isso bem acima da manchete bem ali. Vou só um pouco depois de acabar com isto. Então vamos remover a manchete. E eu vou ficar com este parágrafo e eu quero ter uma garrafa debaixo dele. Então vamos mover tudo para cima, Teoh. Veja como isso pareceria, acho que vou ter que fazer esse parágrafo um pouco maior. Então eu vou usar ah, talvez 24. Sim, 24 parece melhor. Deixe-me aplicar isso. Ainda sinto que estamos perdendo algo. Então eu vou apenas duplicar esse parágrafo. Deixe-me segurar e arrastá-lo para cima. E eu fiz isso, e eu vou ter uma tração fria lá, então eu vou ter algo que representa o que se trata. Dois aconteceram se você clicar no botão abaixo. Então, inscreva-se para uma conta gratuita hoje mesmo. Vou com 30. O que eu usei nesta página para manchetes, ok? E vamos mover isso para baixo e podemos lidar com o por enquanto. Vou ter que remover o campo quatro e o rótulo do formulário preenchido. Ah, tudo isso vermelho. E eu vou ficar com este botão. Esta água vai ficar por baixo do parágrafo. Deixe-me juntá-los agora que posso mover os dois. Deixe-me selecioná-los primeiro. Ok, agora vamos arrastá-lo para o centro e alinhá-lo com tudo o resto. E eu estou muito feliz com o que temos até agora e museu em para que eu possa verificar as marchas agora, fazendo os pequenos ajustes apenas por estar olhando para ele e vendo se parece certo, eu vou ter certeza e eu tenho cada margem igual uma vez que eu terminei o design. Então não me preocupo com isso nesta fase. Então vamos arrastar a máscara de recorte e tornar esta seção um pouco menor. Ok, vamos como esses elementos e apenas fazer pequenos ajustes apenas para ter certeza que tudo parece proporcional. E há espaço suficiente no topo, não no fundo. O Teoh. Certifique-se de que esses elementos são o foco principal dessa seção. Então vamos cortar tudo, e eu vivo um pequeno espaço na parte inferior da página só para que eu possa ter a cópia bem ali . Vou procurar uma imagem de fundo. Eu vou para e splash novamente e procurar uma imagem que poderia funcionar para a seção inferior. E isso é realmente importante porque essa seção final precisa se sentir parte de todo o layout. Então eu acabei de encontrar um, e vamos colocá-lo lá dentro, ver como isso parece. Ok, eu vou ter que subir. E então você, senhor, máscara de corte. Ok. E então nós apenas removemos o 1º 1 Como você pode ver, para este, a tia-avó excessivamente é muito poderosa. Então eu tenho que fazer alguns pequenos ajustes com isso. Com este laboratório, eu realmente quero fazer o cara que senta no computador, o cara que usa o computador para ser visível agora. Não foi assim. Vou tentar ter o computador assim como a silhueta dele no fundo e talvez movê-lo para a direita dele. Só para não interferir com o conteúdo. Como sempre. Como fazer pequenos ajustes aqui e ali até que eu esteja feliz com o que eu inventei? Então deixe-me apenas brincar com os modos de mistura na sobreposição radiante em cima desta imagem e colocar um par de novos uma vez, apertando G e acessando o intell ganancioso alternando entre as duas cores primárias. Eu só quero ter a silhueta do cara visível e não mostrar muitos detalhes. Eu posso compará-lo agora com a seção de processo muito rápido, apenas para ter certeza que é semelhante. Visualmente, é muito importante ter uma aparência consistente. Como eu acabei de dizer agora, basta replicar um desses elementos de texto para ter o conteúdo de direitos autorais como um mencionado anteriormente , Este é apenas o batedor. Não sei se o cliente vai usá-lo ou não, mas, sim, é bonito. É bem normal tê-lo. Deixe-me torná-lo menor para que não se destaque tanto quanto agora, e isso deve ficar bem. Deixe-me colocá-lo fora deste grupo. Nada. O design está praticamente terminado agora. Só tem que fazer pequenos ajustes e certificar-se que as margens são iguais e garantir que o espaçamento e tudo flui bem juntos. Então é isso que vamos abordar na próxima lição. 10. Como espaçar os elementos: Então eu comecei o processo fora, certificando-se de que cada elemento tem o espaçamento correto criando elementos de forma e, em seguida, redimensionando-os para alturas específicas como eles fazem neste exemplo com 100 pixels e eu faço algumas variações e, em seguida, ver o que funciona. Normalmente, as formas que acabo usando no cabeçalho são as que vou usar em toda a página de destino. Portanto, isto é muito importante. Esta é provavelmente a parte mais difícil de obter o cabeçalho, certo. Uma vez que eu descobrir todo o espaçamento entre os elementos e algo que parece bom algo que o parece descida, eu apenas mover tudo no lugar. E então eu passo em seção por seção e apliquei essas margens. Fazê-lo agora no final do processo olhar me permite um foco mais sobre o layout e me permite focar mais na forma como cada elemento parece sem ter que se preocupar. Se o espaçamento estiver correto, eu poderia ter feito isso da primeira vez. Mas agora que eu tenho todo o design, eu tenho uma idéia melhor sobre o que ele parece bom e o que não faz outra razão? Eu gosto de ajustar o espaçamento no final do processo é porque eu estou indo sobre cada seção individual e este é o momento perfeito para pegar pequenos problemas de geração que eu tenho com o design e ser capaz de ajustá-los no local. Isso é como ter um segundo olhar em seu design, mas do lado de fora, sem ficar preso na parte gráfica. E vocês não se esqueçam que sempre podem me perguntar se tiverem alguma pergunta. É nosso amor ver quais são os problemas que você teve com o design, como você resolveu isso e como você criou esta página de destino? Estou curioso para ver o que vocês inventaram para que eu possa revisá-los e dar-lhes dicas sobre como melhorar no futuro. Ver o próximo vídeo. 11. Como importar para Instapage: Ei, o que se passa, pessoal? Então nesta lição, vamos transferir este design da página de aterrissagem de outros dedos vivos. Uma página de vida. Um paciente tem um formulário que realmente funciona. Então eu vou usar instapage para este caso, caso você não saiba. Em vez disso, cadelas construtor página de destino e permite que você crie páginas de destino por dragão soltando elementos em sua página. E é exatamente o que vou fazer agora. Eu costumo começar o processo por sobrepor uma forma larga em cima de todo o design e sentado É uma passagem iti para algum lugar em torno de 80 80%, em seguida, entrar dentro do construtor, carregando essa imagem e definindo-a como uma imagem de fundo. Então, indo para configurações, fundo, imagem. E eu disse que disse aqui. Assim eu posso ver todo o layout. Deixe-me trabalhar um pouco neste. Não se esqueça de configurações, imagem de fundo em Este é ele. Agora você pode ver todo o modelo inteiro. Então eu comecei em novas seções na seção, e neste ponto eu estou apenas definindo cada seção, cada seção individual. Então eu estou indo um por um, adicionando uma nova seção e depois dragão. As diretrizes foram seção leste termina ou começa. Agora que isso acabou, vou entrar na loja de fotos. Ah, apenas a visibilidade na camada específica e indo para a primeira seção. Agora eu vou exportar cada elemento Ege elemento gráfico que eu preciso indo dentro do painel de camada direito, clicando na camada específica que eu quero exportar e, em seguida, indo Quick Export s PNG. Estou sentado em sua pasta agora, e isso me permite ter certeza de que cada elemento que eu exporto está em sua localização específica e eu posso encontrá-lo facilmente quando eu posso enviá-los dentro do Instapage. Então, agora, eu só quero adicionar uma nova imagem. E estou à procura da minha primeira imagem, que é o logótipo. Então, uma vez que é um inchaço, eu apenas ir com inserção e eu colocá-lo em cima do elemento da imagem de fundo. Então agora eu sei exatamente para onde cada elemento vai ir. Então eu só tenho que criar esses elementos embora elementos específicos, por exemplo, para este título, eu só fui para o novo título baseado em então, mas como você pode ver não pegou o estilo de boné velho, então eu tem que reescrevê-lo novamente. Mas está tudo bem. Acho que só se aplicará a este elemento específico. Então, como você pode ver, você tem controle sobre o alinhamento do texto, o tamanho do telefone, cada coisa. Mas primeiro, vamos selecionar nossos fundos. Ah, eu usei a ferrovia para este projeto, então eu vou para fundos de configurações, procurando por esse fundo específico, adicionando-o e deixe-me selecioná-lo na manchete também. Certo, isso deve ficar bem, Normal e deixe-me ajustar o tamanho. É muito legal que você pode realmente verificar o tamanho divertido do Pai Loja e aplicou exatamente o mesmo aqui. Como pode ver, coloquei onde deveria estar. Basta ajustar a altura da linha, e é um ajuste perfeito agora. Nem todos os elementos serão exatamente como foram projetados, porque há algumas pequenas imitações com o pilar instapage. Por exemplo, o com onde o país vai só pode ter 960 pixels. Normalmente, você pode contornar isso apenas tendo imagens, mas eu gostaria apenas de tentar adaptar o design, certificando-se de que ele funciona como pretendido com apenas um par de pequenas pequenas mudanças de detalhes. Deixe-me ajustar este parágrafo. E agora vamos adicionar um novo formulário. Agora o formulário é o elemento mais importante em nossa página. Então deixe-me deletar isso para o campo em nossa etiqueta, a etiqueta que tínhamos dentro do documento Photoshopped. É seguro e deixe-me colocá-lo ali. Primeiro. Eu preciso movê-lo, e eu posso ajustar o campo para e Aiken, mover o botão ao redor para ter certeza que ele parece exatamente como o design da loja de fotos. Agora eu preciso personalizá-lo um pouco para ter certeza que ele se encaixa. Vou clicar duas vezes, e isso me permite acessar as configurações. Deixe-me provar essa cor. Certo, copie e cole. Então, quando eu entrar, vou para o estilo do botão e apenas colocar a cor chamada. Ali. Você pode ajustar o raio. Você pode ajustar o telefone, você pode ajustar o tamanho do telefone, a chamada à ação e você pode até ter certos efeitos. Mas para esses exemplos em particular, não precisamos entrar em tudo isso. Como você pode ver, você também pode personalizar o campo para agora significa as configurações, e eu vou usar este pequeno. Ótimo. Deixe-me copiar isso. E vamos usar essa cor em certos elementos também. E é ótimo que uma vez que você adicionou uma nova cor, ela fique lá. Você terá, ah, ah, paleta de cores disponível e salva, para que você possa usá-lo sempre que precisar. , De novo, deixe-me pegar aquela cópia rápida e colada. Ajuste o tamanho do telefone e mova-o no lugar. Agora vê preto só para ver onde estou posicionando. Mas preciso mudar a imagem colorida de cada momento. Agora você pode alinhar elementos. Ok, isso parece ótimo. E eu tenho que exportar a imagem de fundo. Vou agrupar tudo e duplicar esse grupo específico Margit e depois exportado rapidamente. Agora, é claro, você pode otimizá-lo melhor do que eu acabei de fazer. Mas para o bem deste, uh, curso, curso, eu vou apenas salvá-lo e carregá-lo em vez disso. Então eu sei onde está. Deixe-me apenas adicioná-lo. E agora tenho que mudar a cor. Você pode brincar com o posicionamento e você ainda tem a opção de adicionar a sobreposição de cor em cima dele. Mas neste momento, eu não preciso disso. Então eu apenas gosto do texto e torná-lo branco. E aqui está nossa primeira seção. Agora estamos prontos para passar para o 2º 1. Vou acelerar um pouco o processo porque não há nada realmente interessante acontecendo. Eu só vou e exporto todos os elementos. Por exemplo, distrair ângulo vai estar acima do acima da primeira seção. Primeiro eu. Eu preciso que eu preciso recriar todos esses elementos primeiro e depois adicionar, porque uma vez que eu tivesse esse retângulo, eu não serei capaz de ver onde cada elemento está posição como você pode ter visto, esse retângulo é maior do que 960 pixels. Então eu preciso encontrar uma maneira de ajustar todos os elementos para trabalhar com isso, como você pode ver, por exemplo, para esta árvore, eu apenas seleciono esses dois elementos. Agrupo-os juntos, e depois duplico-os. Então agora eu preciso ter espaço suficiente para o retângulo. Deixe-me adicioná-lo e movê-lo de volta. E como você pode ver você, você pode selecionar vários e, em seguida, ajustar, Ah, vários elementos para garantir que eles se encaixam. Agora, esta não é a maneira perfeita de fazer isso. Eu poderia ter apenas criado as imagens de fundo, imagem de fundo personalizado que incluem esse retângulo bem, e eu não tinha que me preocupar com isso. Mas acho que aqui é melhor? Porque você pode fazer mudanças em tempo real, se você precisar. Se você comprometeu esse design e criou uma imagem de fundo especial para ele e precisa ajustar ligeiramente as coisas, então você terá que refazer todo o processo novamente. Então agora chegamos à segunda seção de recursos novamente. Estou apenas a criar este, uh, este layout. E uma vez que eu tenho um par de elementos feitos, eu apenas copiar e colá-los e movê-los, movê-los ao redor. Como você pode ver, eu ainda estou fazendo pequenas mudanças e eu ainda estou alinhando coisas como eu não sabia como. Isso funcionará dentro do guia 960 picaretas. Mas até agora, tudo bem. Estas são apenas pequenas e pequenas mudanças. Se eu fosse a mão fria desta página, provavelmente teria levado dias. Mas isso é muito mais fácil e apenas o fato de que você pode adicionar o formulário e você pode conectá-lo à sua lista de chips Mel ou outro CRM. Essa é a coisa mais poderosa agora. Como podem ver, cheguei à seção do processo. Por isso, vou abrandar um pouco as coisas. Porque, como podem ver, o parágrafo abaixo, a primeira manchete está fora dos limites. Então eu preciso ajustar que eu ainda queria linha para layout de linha para linha para esse parágrafo específico . Então eu vou ajustá-lo ligeiramente e modificá-lo até que eu se encaixe. Deixe-me apenas como este também e alinhá-los, ok? E agora posso começar a trabalhar nos detalhes. Terei que depreciar este parágrafo. Devo ter feito isso. Eu posso ir em frente e copiar e colar as linhas da rua como você pode ver. Às vezes, ele não escolhe o estilo exato, mas essas são apenas mais mudanças que você pode fazer na mosca semelhante dedo do pé nas seções anteriores. Eu só vou exportar esses Aikens um por um e depois Adam dentro do construtor. Eu só disse um por um. Movê-lo, Movê-los no lugar alinhado eles e apenas os pequenos ajustes. Ainda assim, estou feliz com tudo. Agora eu vou exportar o botão play, e eu vou colocá-lo um pouco mais para a direita, porque a esquerda é mais restrita. E uma vez que você adicionou a imagem de fundo, Como você pode ver, você tem a opção de ter paralaxe. Mas para esta seção, eu não vou usar isso agora. Agora estou pronto para retomar onde me restou e ir para a seção de depoimentos. Deixe-me guardar isso primeiro e estou pronto. Este design não tem nenhum gráfico louco nele ou qualquer animação de fundo louco construído em mente para ele, isso é bastante fácil recriá-lo. Como você pode ver, eu estou apenas dirigindo os elementos em cima para onde os elementos devem estar. E então eu estou exportando os elementos gráficos, que são alguns. Por exemplo, esta caixa de depoimento só tem elementos gráficos de árvore e dois parágrafos. Então não é assim que não é tão difícil para a imagem para onde o avatar vai. Eu vou usar o elemento de forma, e dentro desse elemento em forma de círculo, eu posso adicionar uma imagem para que haja que fazer isso pesa aqui para o cliente mudar o avatar. Então, uma vez que eu fiz isso, eu apenas duplicei organizar, organizá-lo um pouco e ter certeza que ele se encaixa bem com a camada Agora, como você pode ver, não é um ajuste perfeito, mas vai trabalhar Teoh para mim. Eu vou usar no cliente para logotipos do cliente, e agora estamos prontos para começar a trabalhar na última seção, que novamente tem muito poucos elementos gráficos. Apenas o logotipo, o ícone do logotipo e a imagem de fundo. É a única coisa que preciso exportar. Eu só disse que o logotipo e eu preciso adicionar os botões inferiores são realmente semelhantes aos botões dos formulários, então você pode ter basicamente a mesma quantidade de controle sobre a forma como eles olham. E agora vamos ter a imagem do campo de batalha e o Dag de direitos autorais, e isso é válido. O projeto é agora. O design agora está concluído não só tem que ter certeza de que este revestimento é certo, como eu fiz um par de mudanças como essa caixa da segunda seção, que é muito menor do que era antes, então eu ainda preciso fazer um par de alterações Eu também adicionei o Parallax para esta imagem de fundo top stop, como você pode ver aqui. E eu só preciso descobrir o espaçamento. Uma vez que eu estou para baixo com isso, eu vou publicar esta página dedo vivo para um vivo Uriel Nikkan, dar uma olhada mesmo depois de você assistir este vídeo, você pode dar uma olhada e ver como ele parece ao vivo no servidor. O “eu “só liga esse botão à secção superior. Assim que você clicar nesse botão específico no final, você será levado de volta para esta primeira seção e você pode realmente completar a ação. Queremos o ouro, o objetivo, que é conseguir que alguém se inscreva para um teste grátis. Ah, você pode Center in line Self. Por exemplo. Selecionei vários itens que precisam ser centralizados em uma linha. E uma vez que você selecionar divertido mantendo o turno pressionado, você pode apenas centrado, hum, e certificar-se de que tudo está no lugar certo e nós apenas um pouco seção de justiça. Agora. Eu estou apenas cansado coisas de boliche, mesmo que o design que eu criei para a loja pode ser tomado por um desenvolvedor e aqueles marchando deve ficar do jeito que eles são para este exemplo específico em vai olhá-lo um pouco apenas para mostrar como pronto, como é fácil criar uma página uma página de vida página em apenas uma questão de minutos. Então eu apertei a pré-visualização. E como você pode ver, Instapage tem um recurso de recursos de colaboração, o que significa que você pode adicionar comentários. Você pode enviar ideias ou notas. Ou você pode pedir feedback de clientes ou de membros de sua equipe sobre elementos específicos, e você pode visualizar a página. Se você quiser ver como ele vai olhar em riel na vida real, basta alternar esse comentário Negrito em Esta é a página. Cada elemento é que você pode selecioná-lo aquele elemento de texto, mas e agora eu vou usar a mesma técnica que eu usei na loja de fotos para garantir que as margens estão corretas. E o espaçamento entre elementos é consistente, e eu vou apenas criar elementos de forma agora. Eu não sei se um par de anos atrás você poderia ter feito isso em tão pouco tempo, mas a habilidade do dedo do pé tem que dentro Instapage é bonito. É bastante incrível. Então deixe-me publicar esta página. Eu vou para Você pode publicá-lo. Um domínio personalizado, mas vou publicá-lo. Página Demonstração do dedo Pode escrever o que quiser aqui. Quando estiver feliz, basta clicar em Publicar. Eu não estava feliz, então ah, editor que publicou assim. E uma vez que isso é publicado, você está sendo redirecionado para seu, hum, seu painel e você pode simplesmente entrar. E esta é a página inicial. É página de destino funcional. Deixe-me colocar um e-mail de teste e começar a secar. Ok? Diz “obrigado”. E agora, se eu voltar para instapage, deixe-me atualizar isso. Você pode ver que essa pista chegou e você pode fazer o que quiser com ela. Você pode exportá-lo, você pode copiá-lo, você pode entrar em contato. E a coisa mais louca sobre isso é que você pode até se integrar. Como eu disse com o seu Ah crm preferido Ou você pode ir com arma X. Eles têm uma integração direta com Web carvalhos, que lhe permite enviar diretamente esses detalhes dentro de seu sistema e que irá criar o novo usuário. Como você pode ver aqui, eu tenho um par de testes configurados, mas você pode ir com o caminho mais amplo fora das opções aqui. Esqueci uma coisa de adicionar o vídeo ao botão play, então eu vou apenas selecionar essa imagem e vinculá-la a um pop-up e ter um vídeo lá. padrão é o vídeo do YouTube, mas você pode saber sempre editá-lo, e você sempre pode substituir esse vídeo por algo que você criou. Então vamos dizer que para cima e a página está terminada. Você receberá esse modelo também com o arquivo PSD da camada. Basta verificar o modo comum, ou apenas verificar a descrição do curso, e você deve encontrar um link lá para baixar tudo isso gratuitamente. Eles vêm incluídos no curso, e você pode usar esse layout como um modelo para seu próprio objetivo. É muito fácil apenas personalizá-lo para fazê-lo funcionar para o seu próprio objetivo, quer estejamos falando sobre o arquivo PSD ou se estamos falando sobre o arquivo instapage . Então é isso. Pessoal, se tiverem alguma dúvida, não hesitem em me avisar, e eu adoro ver seus projetos e ver o que vocês inventaram. Então não hesite em entrar em contato com bye guys