Elementor Fluxo de trabalho para iniciantes (2022) - Como criar uma página de destino de e-book com resposta

1. Apresentação: Bem-vindo de volta a outra aula incrível comigo. Pode bursa. Se for sua primeira vez me descobrindo. Bem-vindo. Agora eu tenho ensinado como usar o Elementor aqui mesmo no Skillshare nos últimos 1,5 anos, mostrei a você como projetar páginas da Web totalmente funcionais. Como criar incríveis landing pages de classe mundial usando a versão gratuita do elementary. E hoje, quero mostrar a vocês como criar uma página de destino incrível de e-books da qual você pode se orgulhar. Então, se você tem um e-book ou tem um amigo que tenha um e-book e ele deseja fornecê-lo aos usuários. Talvez você queira vender o e-book ou apenas queira permitir que as pessoas o baixem gratuitamente. Esta é uma boa maneira de apresentá-lo, como você pode ver aqui, meu plano de fundo, esta é a landing page estará projetando. Vou mostrar-lhe como parece breve para que você possa saber o que esperar. Então, se você é novo na Elementor, esta será uma ótima oportunidade para você aprender o fluxo de trabalho e entender como usar as diferentes ferramentas que a Elementor oferece para criar um página da web em funcionamento. E se você estiver usando o Elementor, acho que não haverá nada novo nesta classe para você. Esta aula é voltada mais para pessoas que estão apenas começando no Elementor e pessoas que gostam de entender como construir uma página da Web com o Elementor do zero. Então, quero mostrar a você o redesenho da landing page. Vou rolar de cima para baixo da página para que você possa ver o que esperar. Então, se você está tão animado quanto eu, vamos em frente e começar. Tudo bem. 2. Instale o Tema Astra: Então, aqui estamos no meu painel. Esta é uma nova instalação do WordPress e, como você pode ver, é 5.9.3. Portanto, sua versão pode ser diferente, mas o que estamos prestes a fazer ainda será relevante. Então, vou apenas ir em frente e me livrar dessa notificação lá. E a primeira coisa que queremos fazer é instalar nosso tema. Então, vou em frente e clique em aparência. Por padrão, o tema ativo é 2022, porque agora estamos em 2022. Também temos 20202021, caso você goste deles e queira usar um deles. Mas o tema que gosto de usar em todos os meus projetos chama-se Astra. E então vamos em frente e instalar o Astra. Então, vou em frente e clique em Adicionar novo. E aqui será apresentada uma lista de todos os temas disponíveis. Vou escolher Astra. Então clique em Instalar. Tudo bem, agora está instalado. Então, vou em frente e clique em Ativar para torná-lo o tema ativo. E como você pode ver agora, Astra é o tema ativo. Então, vamos seguir em frente e fechar esta mensagem aqui. E agora na próxima lição, vamos em frente e instalar o elementor. Vejo você em breve. 3. Instale o Elementor: Bem-vindo de volta. Vamos agora ir em frente e instalar o plugin elementar que usaremos para construir a página no front-end. Então, vou em frente e clique em Plugins, Adicionar novo. E dentro desses diretórios de plugins, iremos em frente e procuraremos o Elementor. E devem ser os primeiros resultados aqui. Por Elementor.com, ele tem mais de 5 milhões de instalações ativas, então vou instalá-lo agora. Vamos seguir em frente e ativar. Tudo bem, então será redirecionado para este assistente de configuração. Agora, se você tivesse tentado usar o Elementor há algum tempo antes de eles atualizarem o plugin, você notará que não tínhamos esse assistente de configuração, mas agora temos. É uma maneira fácil de ajudá-lo a configurar as partes básicas do seu site. E vamos ver isso à medida que seguirmos os passos. Então, o primeiro passo aqui é se inscrever no Elementor, mas você não precisa ter uma conta elementor para usar o plugin. Então vou em frente e pular isso. Então. Aqui você pode seguir em frente e continuar com o tema Hello que o elemental criou. Eles têm sua própria equipe que é compatível com um plug-in. Mas como já instalamos o Astra, podemos seguir em frente e clicar em Ignorar. Astra é uma coisa muito mais poderosa. E aqui temos a oportunidade de dar um nome ao site. E como eu já tinha dado um nome enquanto instalava o WordPress, dei esse nome, minha demonstração da página do eBook. Mas você sempre pode ir em frente e alterá-lo para qualquer outro nome que quiser. Vou mantê-lo. Vou mantê-lo como demonstração da minha página do eBook e clique em Avançar. E então, se você tiver um logotipo do site, você pode adicioná-lo aqui. Mas não estou adicionando o logotipo agora, então vou em frente e clique em Ignorar. Então, aqui podemos começar a editar nossa página a partir de uma tela em branco com o editor Elementor. Ou podemos navegar a partir de centenas de modelos pré-fabricados pela Elementor ou importar os nossos próprios. Então, o que queremos fazer é clicar em editar uma tela em branco com editor Elementor porque queremos criar uma página do zero. E haverá, agora podemos começar a construir nossa página da Web a partir desta ardósia em branco. E é assim que instalar o elementou o plugin. Na próxima lição, vamos ver como começar a criar a página do zero. Agora que estamos aqui. Vejo você em breve. 4. Desenhe a Seção de Herói: Bem-vindo de volta. Agora é hora de começar a criar a landing page. E a primeira parte da página que criaremos é a seção de heróis. A parte que vem no topo de qualquer landing page. A parte que capta a atenção do visitante ou do usuário. E porque fomos redirecionados para esta página diretamente após preencher e terminar o assistente de configuração. Quero mostrar a você como criar a página de dentro do painel porque não quero supor que você já sabe como criar ou gerar uma página da Web do WordPress a partir do painel. Então, vou clicar neste menu de hambúrguer e clicar em Sair para o painel. Vamos criar uma nova página e não usaremos essa. Então clique nisso. E clicando que fomos redirecionados para a guia Páginas dentro do painel do WordPress. Então, o que queremos fazer é clicar em Adicionar novo. E, a propósito, esta é a página que estávamos visualizando. Deixe-me abri-la para que você possa dar uma olhada nele. Então, vou clicar em Visualizar e abri-la em uma nova guia. E aqui está, minha demonstração da página do eBook. Esse é o título da página, mas como você pode ver, é um rascunho. Então, o que queremos fazer é criar nossa própria nova página que faremos nossa landing page. Então, vou clicar em Adicionar novo. E vou chamá-lo de Skillshare. Página inicial do e-book Skillshare. Então deixe-me apenas ter certeza de que isso está em maiúsculas. E a primeira coisa que queremos fazer aqui é entrar nas configurações do Astro e querer garantir que o layout seja de largura total, barra esticada. E para a barra lateral, não queremos a barra lateral, então não há barra lateral. Vamos ver esses elementos capazes. Queremos desativar o cabeçalho e a pasta. E se eu puder pular para esta página aqui, esta é a pasta que acabamos de desabilitar. Então, desative isso e deixe-me colapsar isso nisso. Sim, isso é tudo. Vamos voltar para as configurações do WordPress. Estas são as configurações astrais. Vamos voltar para as configurações do WordPress e vamos entrar no modelo. Queremos dizer Elementor largura total. Então clique nisso. E agora vamos clicar em Publicar, publicá-lo. Agora. Nossa página agora está ao vivo. Então, vamos clicar em editar com o Elementor. Tudo bem, então aqui estamos nós. Como você pode ver, não temos essa pasta que estava lendo o Astra na outra página que havia sido gerada após o assistente nesta página. Então, temos uma ardósia limpa para trabalhar. Então, a primeira coisa que precisamos fazer é selecionar uma seção de coluna dupla clicando neste ícone de mais aqui, uma seção de coluna dupla. E aqui temos isso. Vamos clicar neste sinal de mais para adicionar um elemento de imagem porque o mentor desenha seu nome dos elementos, basta arrastar elementos deste painel aqui para a página e, em seguida, personalizamos esses elementos. É por isso que se chama Elementor. Então, agora que arrastamos esta imagem aqui, se eu clicar na imagem, desde que seja o elemento ativo, serão os elementos que podemos personalizar aqui e você pode dizer pelo nome do elementar edição. Então, se seguirmos em frente e clicarmos neste sinal de mais aqui novamente, ele mostrará esses elementos. E podemos ir em frente e arrastar elementos de cabeçalho para lá. E agora podemos personalizar esses elementos de cabeçalho e antes de tocarmos em qualquer outra coisa, porque é o elemento ativo, você pode dizer por esse nome do cabeçalho de edição do elemento. Observe que se clicarmos na imagem, ela muda para editar a imagem. Isso significa que essas configurações são para a imagem. Isso é só para iniciantes. Se você já usou o Elementor, isso não é novidade para você. Então, no caso de ainda estarmos aqui, você quer ter acesso a esses elementos novamente. Basta ir em frente e clicar neste ícone. E traz à tona os elementos mais uma vez e podemos colapsar todos esses painéis assim para revelar mais elementos que podemos usar. Temos elementos WooCommerce, elementos WordPress. Temos elementos gerais. Mas, para começar, sempre usaremos os elementos básicos. Esses são os elementos mais usados em qualquer página. É por isso que, por padrão, está sempre aberto em uma nova página do Elementor. Então, agora que adicionamos o cabeçalho, também precisamos adicionar um editor de texto que seja basicamente um parágrafo. E tem algum texto de espaço reservado. Agora, se seguirmos em frente e clicarmos nesta imagem, precisamos adicionar uma imagem do livro. Então vou entrar aqui para nossa biblioteca de mídia. E porque se não for carregado nenhuma imagem, precisamos entrar em uma pasta que eu preparei com todos os ativos que estarão usando e você encontrará a pasta de ativos na descrição abaixo este vídeo pode ir em frente e baixá-lo e usar todos esses ativos são fornecidos gratuitamente. Então, vamos clicar em fazer upload de arquivos. E se eu clicar em Selecionar arquivos será redirecionado para esta pasta de ativos. Ativos. Dentro da pasta de ativos, podemos ir em frente e escolher a capa do e-book. Então, vou clicar duas vezes nisso. E aqui está. Então, agora que está selecionado, clicarei em Inserir e temos um livro. Deixe-me arrastar isso um pouco. E o que queremos fazer a seguir é adicionar esse fundo colorido gradiente que você viu na demonstração de introdução. E como fazer isso é, antes de tudo, esta é a seção, toda essa área que está segurando o livro e que está segurando essas duas colunas é a seção. E para fazer alterações na seção, clicamos nesta parte aqui. E agora ele lê a seção Editar para fazer edições em uma das colunas aqui, clicamos nesta parte aqui, alterações em qualquer coluna. Se clicarmos nessa outra parte, ela ainda permanecerá na coluna vazia porque agora estamos editando esta coluna. Mas, para editar a seção, clicamos nela. E irei em frente e direi estilo. Plano de fundo. No normal. Precisamos que a cor seja, digamos gradiente. Então, vamos clicar em gradiente. E, por padrão, essa cor rosada. Então, quero adicionar uma segunda cor, que é 1524. E lá temos isso, um belo lindo fundo de gradientes coloridos. Você pode ir em frente, é claro, e torná-lo da cor que quiser. Você pode simplesmente arrastar essa cor ao redor. Mas eu só quero deixá-lo às 24. E você pode mudar essa segunda cor para a cor que quiser. Posso arrastar isso por aí. Você também pode arrastar isso para levá-lo para a área azul e arrastá-lo. Mas eu quero deixá-lo no rosa original porque acho que fica bem com a laranja. Clique em qualquer lugar nesta seção para se livrar disso. Agora, a próxima coisa que queremos fazer é editar esse título porque ele não parece bom agora. Então, vamos em frente e selecione-o e você notará que ele foi alterado para editar o cabeçalho. Então, embora ainda esteja ativo, quero mudá-lo para um porque é o cabeçalho principal desta landing page. Cada página da Web precisa ter um H1, que é a afirmação que deve capturar a atenção das pessoas. E devemos dizer aos mecanismos de busca que esta página é sobre isso. Então, sobre o que é isso? Então, vamos dar um pouco de maré. Mude sua vida hoje. E enquanto ainda estiver selecionado, vamos entrar no estilo. Vamos dar uma cor branca. Vamos mudar a fonte clicando em família de tipografia. menu suspenso aparecerá. E vamos mudar isso para Montserrat ou qualquer fonte que você quiser. Montserrat, eu quero dar-lhe um peso de fonte de 900 só para torná-lo muito ousado. E então aumentarei seu tamanho até talvez esse ponto. E agora você notará que ele não está equilibrado em comparação com essa imagem. Então, precisamos empurrar esses itens dentro dessa coluna para baixo. Então, vamos selecionar essa coluna em si. Agora ele foi alterado para editar a coluna. Vou para o Advanced. E vamos dar uma margem máxima de 50 ou talvez 70. Tudo bem, então é assim que parece. Vamos atualizar isso. Vamos seguir em frente e selecionar o parágrafo ou o editor de texto. E agora, uma vez que selecionamos, você notará que ele foi alterado para editor de texto. Em primeiro lugar, queremos mudar a cor para branco. Em seguida, é claro, precisamos mudá-lo para mudar a tipografia ou a família da fonte para Montserrat. Entre. Claro, você precisará mudar o que esta afirmação diz. Então você precisará entrar no conteúdo, destacar isso e começar a digitar o que quiser, seja qual for a descrição que você deseja adicionar lá. Então. Mentalidade, Lorem Ipsum. Vamos atualizar isso. E antes de prosseguirmos, vamos clicar neste ícone de alterações visualização aqui para visualizar as alterações. Ele abrirá em uma nova guia. E é assim que nossa seção de heróis faz loops. E precisamos adicionar um botão para permitir que as pessoas baixem o livro. Então, vamos voltar aqui. E enquanto ainda estamos aqui, podemos clicar nisso para expor os elementos. E sob o painel básico, temos o elemento do botão. Vamos arrastá-lo e soltá-lo lá quando a linha azul aparecer aqui para indicar que estamos prontos para soltar. E, claro, quando o soltarmos, essas alterações no botão de edição, ou você pode simplesmente selecioná-lo para ter certeza de que é o botão Editor. E vamos entrar na área de texto aqui e alterá-la para baixar um e-book. Agora, deve estar baixo, certo? E, claro, se você quiser adicionar um ícone ao botão, você sempre pode clicar na biblioteca de ícones. E vamos procurar o download. Faça o download. Então, digamos, digamos que agora ele tenha esse ícone ali mesmo. Indo no estilo. Podemos aumentar seu preenchimento. preenchimento é o espaçamento entre o conteúdo interno e as bordas do elemento. Então, vamos quebrar esse link. E então, para a esquerda, vamos dar um 50. Acolchoamento. A direita. UM 50. Agora temos um espaçamento maior aqui. E para a parte superior e inferior, vamos dar um 202020. Isso torna o botão muito maior. A próxima coisa que queremos fazer é adicionar uma sombra de caixa para o botão que deve dar-lhe alguma sombra para dar um efeito 3D. Assim que clicarmos nisso, olhe para o botão, agora ele tem algum tipo de sombra por trás dele. E podemos ir em frente e editar o borrão da sombra. Acho que gostei do jeito que parece agora. E agora, vamos entrar. O que estávamos trabalhando era o loop normal do botão. Agora, vamos passar o mouse e alterar algumas dessas propriedades. Ao passar o mouse. momento, não muda, mas ao passar o mouse, se dissermos, queremos mudar a cor do texto para preto. Agora, quando passamos o mouse, ele fica preto, mas também queremos que a cor de fundo mude. Então, digamos que queremos mudá-lo para branco, assim. E enquanto ainda estamos sob o cursor sobre a animação, temos uma variedade de animações que podemos escolher. Eu só quero escolher crescer. E é isso que ele faz. Vá em frente e experimente o resto. Agora clique em Atualizar isso. A próxima coisa que queremos fazer é adicionar uma breve declaração aqui e informar ao usuário os formatos nos quais o livro está disponível. Assim, podemos ir em frente e clicar em elementos, ícone e arrastar um novo texto para esta área. Ou deixe-me apenas excluir isso. Podemos simplesmente ir em frente e duplicar este texto aqui. Então você pode simplesmente ir em frente e clicar com o botão direito, clicar com o botão direito do mouse e duplicar Então podemos colocar isso logo abaixo. Vamos em frente e entrar na tipografia de estilo. E vamos tornar esse texto um pouco menor. Para o estilo de texto, digamos italiano. Então, vamos destacá-lo. Este livro está disponível nos formatos PDF e Kindle. Vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, e essa é a nossa seção de heróis. E antes de concluirmos esta lição, eu só quero adicionar um pouco de preenchimento na parte inferior e na parte superior desta seção para aumentar o espaçamento entre o conteúdo e a borda superior e inferior. Então, vamos entrar aqui e selecionar as configurações da seção. Essas alterações na Seção. Vamos entrar avançado. Vamos quebrar esse link. Porque se não o fizermos, seja o que for, deixe-me unir isso. Qualquer mudança que fizermos em uma dessas células afetará todas as outras células. Mas se quebrarmos isso, podemos mudar células individuais. Então, queremos mudar a parte superior e inferior. Vamos dar um 50. Então você notará agora que temos um espaçamento maior aqui. E se, se mudarmos o topo para 50 também, temos um bom espaçamento no topo. Então, vamos avançar e atualizar isso. Claro, você pode adicionar o preenchimento que quiser, não precisa necessariamente ser 50. Vamos prosseguir e visualizar as alterações. E agora acho que parece muito mais apresentável. Então essa é a nossa seção de heróis. Acho que estou gostando até agora. Você pode ir em frente e ficar mais criativo e ver o que mais, quais outras propriedades você pode brincar com quais outras propriedades você pode brincar para torná-lo muito mais bonito. Claro, essas cores são as que eu escolhi. Você é livre para escolher suas próprias cores. E isso nos leva ao final desta lição. Na próxima lição, vamos ver como criar a seção de parceiros. Vejo você em breve. 5. Crie a seção dos parceiros: Olá, bem-vindo de volta. Nesta seção, quero mostrar a você como criar a seção de logotipo de parceiros usando o elemento carrossel de imagem. Então, sem perder tempo, vamos pular dentro do nosso editor. Aqui estamos nós. Então, para adicionar uma nova seção, vamos seguir em frente e clicar nisso, ícone Adicionar nova seção. E temos opções diferentes para o tipo de seção que queremos. Queremos uma seção de largura total. Então vá em frente e clique nisso. Em outras palavras, ele tem apenas uma coluna. A primeira coisa que queremos fazer é, claro, separar esta seção da seção de heróis. Então, selecionando a seção em si para se certificar de que ela lê a seção Editar. Vamos entrar avançado. E vamos quebrar esse link na margem. E vamos dar uma margem de 50 pixels. Então, neste momento, há um espaçamento entre as duas seções de 50 pixels. A próxima coisa que queremos fazer é clicar no sinal para adicionar alguns elementos dentro da coluna. E o que queremos fazer é arrastar um título para lá. Vamos chamar isso de nossos parceiros. E queremos trazê-lo para o centro. Então, enquanto ainda estamos sob conteúdo, vamos ao Alinhamento e empurrá-lo para o centro assim. E isso agora é um H2, em outras palavras, um título dois. E caso você esteja se perguntando o que queremos dizer H1, H2, H3, H4, todo o caminho até H6 faz nossos níveis HTML de títulos, e todos eles servem a um propósito diferente. Então, porque você já tem um H1 nesta página e devemos ter apenas um H1 em qualquer página da web. Podemos ter quantos elementos H2 quisermos. Os cabeçalhos dão hierarquia à página da Web. E isso é bom para SEO ou otimização de mecanismos de pesquisa, mas não quero me aprofundar nisso. Então, bem, Parceiros ainda estão selecionados. Vamos entrar no estilo. E, claro, vamos mudar a cor do texto. E eu quero dar a ele um cinza escuro quase preto. Não preto puro, mas quase preto. Então, o triplo 40 deve dar essa cor preta não tão rica, mas acinzentada. E então, claro, vamos clicar em qualquer lugar aqui dentro para se livrar disso. E vamos clicar em Topografia para alterar a família de fontes para Montserrat ou qualquer fonte que você quiser. Lá nós o temos. A próxima coisa que quero fazer é dar um peso de 800. E acho que gosto desse tamanho, então quero mudar isso. A próxima coisa que quero fazer é clicar neste ícone para revelar os elementos mais uma vez. E aqui dentro, quero procurar por carrossel, e temos carrossel de imagem aqui. Então, basicamente, este é um controle deslizante para imagens. Vou arrastá-lo e soltá-lo assim que o indicador azul aparecer. E agora você notará a queda momentânea. As configurações do carrossel de imagens aqui. E podemos clicar neste sinal de mais aqui para adicionar os diferentes logotipos que queremos ter no controle deslizante. Então, como eles não os enviaram, vou entrar, carregar arquivos, selecionar arquivos e, na pasta de ativos que acabei de falar, você encontrará esses parceiros dobrar, parceiros Logos, pasta. Você pode ir em frente e selecionar todos eles e abrir. Tudo bem, então todos estão carregados. Vamos criar uma nova galeria. E lá temos isso. Inserir galeria. E agora nosso carrossel está exibindo os logotipos. Mas há dois espaçados porque agora a configuração é mostrar apenas três logotipos por vez. Então, se entrarmos em slides para mostrar, não queremos que o número padrão de slides seja exibido, digamos cinco, porque temos seis deles. Então isso rola para mostrar a sexta e contínua rolagem infinitamente. Vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, então lá temos isso. Então eu suponho que, se você estiver vendendo um livro, você pode ter alguns parceiros, podem ser editores ou as empresas com as quais você está fazendo parceria nesse projeto específico. Então você pode querer exibir os logotipos deles logo abaixo da seção de heróis. É por isso que temos esta seção. E é assim que criar a seção de parceiros. Na próxima lição, veremos como criar uma seção de call to action que tenha uma descrição do que as pessoas devem esperar em seu e-book. Então, vamos ver como fazer isso em breve. 6. Tópicos de e-Book e seção de CTA: Bem-vindo de volta. Até agora, conseguimos criar nossa seção de heróis e nossa seção de parceiros. E, claro, até este ponto você percebe que o nosso asa. Estávamos apenas fazendo isso pelo estilo. Mas eu pensei que precisávamos fazer isso de forma estruturada, uma forma que você saiba o que esperar. Então eu fui em frente e puxei a página que eu havia criado com antecedência antes de começar a gravar essa aula. Só para que ele possa nos guiar sobre o que esperar para que você saiba o que estamos prestes a criar widget. Não estamos apenas criando a próxima seção sem que você saiba como ela ficará. Então eu peguei esta página para que possamos rolar e examinar a seção que estamos prestes a criar. E então vamos em frente e criamos isso. Esta é a seção que estamos criando. Esses são basicamente os tópicos que as pessoas encontrarão no livro. E, claro, lembre-se que esta é uma landing page. Ele precisa ser convincente. Ele precisa converter pessoas. Esse é o papel de uma landing page. Ele precisa converter usuários ou visitantes em compradores. E para fazer isso, você precisa dar às pessoas o máximo de informações necessárias possível. Uma maneira de fornecer informações sobre seu livro é contando às pessoas sobre os diferentes tópicos que você aborda no livro. É por isso que esta seção é importante. Entrando em nosso editor de e-books. Precisamos adicionar uma nova seção. E como você pode ver aqui, esta é uma seção que tem três colunas. Mas também tem esta seção aqui, que é uma única coluna. Então, como incorporamos isso em nossa página? Então, vamos em frente e digamos adicionar nova seção. E precisamos adicionar uma seção de largura total que tenha uma única coluna. E podemos ir em frente e clicar neste ícone aqui e arrastar um novo cabeçalho aqui, como fizemos antes. Ou podemos simplesmente ir em frente e duplicar isso e arrastar a duplicata aqui. Mas antes de fazermos isso, quero trazer uma ferramenta muito útil que esqueci de mostrar a vocês como trazer à tona, que ajudará a acelerar nosso trabalho. Então vou entrar neste menu de hambúrguer, preferências do usuário, editar alças, clicar em Sim. E agora, quando você passar o mouse sobre essas colunas, você notará que temos configurações adicionais que aparecem que nos ajudarão a evitar clicar com o botão direito do mouse para fazer, para agir. Então, em vez de clicar com o botão direito do mouse, clicar com o botão direito do mouse na base para duplicar , você pode simplesmente passar o mouse sobre eles e clicar lá. E agora duplicamos isso. Agora podemos arrastar isso lá dentro. E temos um título. Agora precisamos separar essas duas seções. Então, antes de tudo, deixe-me clicar nisso, entrar avançado, quebrar esse link e depois dar uma margem no topo. Agora temos esse espaçamento lá. Tudo bem, então selecionando este cabeçalho, selecionando este cabeçalho, Vamos alterá-lo para as capas deste livro. Dê-me esses três pontos. Claro, sinta-se à vontade para escrever o que quiser aqui. E, claro, vamos deixá-lo como H2 porque é um H2. E então vamos seguir em frente e clicar neste ícone Elementos e arrastar uma frase ali mesmo. E enquanto ainda estiver selecionado, vamos entrar no estilo e alinhá-lo ao centro. Agora isso pode ser uma breve descrição de uma breve descrição desta seção. Portanto, a seção contém o livro e esse tipo de coisa. Deixe-me remover alguns desses textos. Então vá em frente e digite o que quiser lá. Agora, observe que há muito espaço entre os dois e precisamos que eles estejam mais próximos. Então, enquanto isso ainda estiver selecionado, pode entrar avançado, quebrar o link de margem lá e, em seguida, reduzimos a margem superior , juntando-os assim. E então logo abaixo deles, vamos atualizar isso. Primeiro. Vamos visualizar as alterações. Certo? Acho que parece legal. Mas voltando à nossa amostra, isso é maior e de cor laranja. Então, vamos. Que temos a liberdade personalizá-lo o quanto quisermos. Então, enquanto ainda estiver selecionado, vou entrar na tipografia de estilo. Vamos dar um peso 600. E vamos aumentar o tamanho arrastando isso. Talvez até 45. Então vamos entrar em textos, cor 1524. Essa é a cor que eu escolhi. E logo abaixo do título e da descrição, temos essas três colunas. Então, vamos trazer as três colunas. Clicando nesse ícone de elemento ali mesmo. Precisamos arrastar em um cruzamento. Então eu vou arrastá-lo e soltá-lo assim que a linha azul aparecer. E agora temos duas colunas por padrão. Então, o que precisamos fazer é clicar em mais ali mesmo. E então precisamos do ícone Tipo. E o que precisamos é de uma caixa de ícones. Vamos arrastá-lo e soltá-lo lá para ver como ele se parece. Então você notará que é uma caixa que tem um ícone e um cabeçalho e alguma descrição. Agora vamos personalizá-lo para ficar assim. Então, primeiro, vamos copiar o gerenciamento de tempo. E vamos para o título e a descrição. Vamos colar o gerenciamento de tempo lá e, em seguida, essa é a breve descrição desse tópico em particular. E vamos mudar o ícone. Aqui. Vou digitar clock para indicar o gerenciamento de tempo, que é o que se trata esta seção, que é o que se trata essa pequena seção. Então, é claro, vamos alterar os estilos dessa caixa de ícones. Então, enquanto ainda estiver selecionado, vamos entrar no estilo. Se eu olhar, se eu recolher o ícone, você notará que temos dois painéis, ícone no conteúdo. Então, para a cor primária do ícone, queremos que seja essa cor. Oito Vinte e quatro. Você pode mudar a cor ao passar o mouse, talvez digamos triplo 40. Então, ao passar o mouse, ele muda para essa cor. E então vamos recolher o ícone. E vamos entrar no conteúdo. Claro, temos os diferentes textos ou opções de tipografia que já vimos antes. Podemos mudar a cor para o triplo 40. E então podemos entrar na topografia e mudar a família de fontes para Montserrat. E, claro, podemos aumentar a forma da fonte para 800. E é isso. Então, o que precisamos fazer a seguir é, em vez de repetir a mesma coisa aqui, vamos seguir em frente e duplicar isso pairando sobre essa coluna e clicando nela para duplicá-la. Duplique-o mais uma vez e, em seguida, vamos excluir isso. Agora temos três colunas. E então vamos duplicar essa interseção clicando neste ícone de interseção duplicada. E lá temos isso. Então, vamos atualizar isso. E vamos visualizar as alterações. Certo, incrível. Então, agora a única coisa que precisamos fazer é copiar esses títulos. Vou clicar neste. Cole isso lá dentro. Volte aqui. Copie essa liderança Estilo de vida vencedor. Então, vamos clicar nisso. E agora vamos garantir que os ícones sejam relevantes para os tópicos que eles representam. Comunicação tão eficaz, talvez possamos procurar microfone. Vou inserir isso para a liderança. Então, para o estilo de vida vencedor, vamos em frente e selecionar dinheiro. Insira isso. Atualize lá. Vamos rever as alterações. Agora rolando para baixo. Lá temos isso, este livro cobre, e depois temos o que ele cobre. Mas agora observe que temos algum fundo acinzentado logo atrás desta seção. Então, vamos concluir esta lição analisando como fazer isso. Claro, essa cor está logo atrás de toda a seção. E também temos esse botão aqui. Então, selecionarei a seção inteira, a seção de coluna única que mantém esse cabeçalho, a descrição e as interseções. Então, selecione isso. Vamos ao estilo, plano de fundo, cor. Vamos arrastar isso até talvez ponto. Acho que gosto dessa cor. Agora observe que não temos preenchimento na parte superior e inferior. Então, vamos em frente e clique em Avançado. Quebre esse link ali e, em seguida, o preenchimento superior 50 e o preenchimento inferior 50. Agora temos esse espaçamento. Então, para adicionar esse botão, você acabou ver em nossa imagem de referência. Vamos duplicar isso e vamos arrastá-lo. Vamos deixá-lo lá. Agora você notará que está no lado esquerdo. Então, enquanto ainda estiver sob conteúdo, vamos alinhá-lo ao centro. E vamos adicionar alguma margem na parte superior do botão. Então, enquanto o botão ainda estiver selecionado, botão Editar, avançado, margem, superior. Vamos dar um 50. Atualize isso. E agora você notará que essa sombra ou essa sombra de caixa está muito escura no fundo branco. Bem aqui. Parece bom por causa do fundo colorido, mas porque ele odeia um fundo branco, você precisa reduzir a escuridão. Então, enquanto ainda estiver selecionado, vamos entrar no estilo. Sombra de caixa. Vamos clicar neste ícone de cor aqui. E vamos reduzir a riqueza ou a opacidade da sombra da caixa. E, em seguida, atualize isso. Vamos visualizar as alterações. E lá temos isso. Até agora, eu gosto do que temos. Em seguida. Vejamos como adicionar esta seção de vídeo. Onde quando alguém clica para assistir a uma breve história sobre o e-book, talvez seja uma história sobre o autor ou o piloto. Quando você clica em lay, há essa sobreposição e ela traz um vídeo que você pode assistir sem distrações. Então, vamos ver como fazer isso na próxima lição. Vejo você em breve. 7. Seção de vídeo: Bem-vindo de volta. Então, até agora, criamos nossa seção de heróis, nossa seção de parceiros e a seção de tópicos, que tem um plano de ação. Em seguida, queremos ver como criar esse breve histórico sobre a seção de e-books, ou seja, um vídeo. Então, entrando em nosso editor, é claro, a próxima coisa que precisamos fazer é adicionar uma nova seção. E esta seção tem que ser uma seção de largura total mais uma vez. E, claro, precisamos adicionar algum espaçamento entre ele e a seção anterior. Então, clicar na seção em si coincide avançado, quebre esse link. Margem de 5050 pixels na parte superior. E você pode dizer, porque aqui estão pixels, você pode alterar isso para a porcentagem EMS de RAM. Vamos atualizar isso. E então vamos clicar no sinal de Plus aqui para exibir o vídeo. E antes de adicionarmos o elemento de vídeo, é claro que precisamos adicionar esse título aqui. Então deixe-me copiar isso. Vá para dentro aqui. E podemos simplesmente ir em frente e duplicar isso. Nossos parceiros duplicam isso. E então vamos arrastá-lo. Deixe-me chegar ao fundo. Role a roda do mouse enquanto você ainda está segurando isso. E vamos deixá-lo lá dentro. E enquanto ainda estiver selecionado, vamos entrar aqui e deixe-me colar isso lá. Claro que você não está provando nada porque você não tem esta página de referência. Tudo bem, então agora que temos isso lá, vamos clicar no ícone Elementos novamente. E vamos arrastar um elemento de vídeo para lá. Vamos deixá-lo lá imediatamente fazemos isso. Observe que temos as configurações de edição de vídeo. Agora, é aqui que você coloca o link do seu vídeo no YouTube. Então, você precisará ter um canal do YouTube, depois carregar seu vídeo para o seu canal e, em seguida, pegar o link que YouTube fornece e solte-o aqui. Claro, você tem lugares diferentes dos quais você pode recuperar o vídeo. Não precisa necessariamente ser o YouTube, mas prefiro o YouTube porque é o site de vídeos mais popular do mundo. Então, a próxima coisa que precisamos fazer é, claro, trazer essa sobreposição. Quando alguém clica em Jogar, queremos que ele tenha essa sobreposição escura. Então eles só assistem ao vídeo, nada mais os distraindo. Então, vamos voltar aqui. E antes de fazermos isso, vamos dar uma olhada em algumas das configurações que temos aqui para que você possa configurá-lo para reprodução automática quando a página for carregada. Ele só começa a jogar automaticamente, mas não queremos isso. Então deixe-me parar com isso. Podemos silenciá-lo para que sempre que a página for carregada, ela fique silenciada, mesmo que esteja sendo reproduzida. Então também podemos fazer loop para que toda vez que chegar ao final, ele comece novamente automaticamente sem nenhuma entrada do usuário. E temos todas essas outras configurações diferentes. Você pode ir em frente e brincar com eles para ver qual você gosta. Então, se entrarmos em colapso este vídeo e entrarmos na sobreposição de imagem, poderemos ativar a sobreposição de imagem e isso significa deixar-me fechar isso. Então, agora, com isso desativado, ele mostrará a miniatura que você tem no YouTube. Este vídeo está no YouTube. E, no entanto, parece no YouTube é exatamente como ele aparecerá aqui. Mas se viermos aqui e dissemos ativar sobreposição de imagem, podemos selecionar uma imagem para ser a miniatura do nosso vídeo. Então, como eles não têm essa imagem aqui, eu vou enviá-la. Eu o criei e você o encontrará na pasta de ativos que eu forneci. Então, vamos entrar em ativos. E-book, imagem de sobreposição de vídeo. Então, vou clicar duas vezes nisso. E vou inserir mídia. E agora temos essa imagem agradável e limpa que é apresentada e consistente com a marca da sua página. E então, para trazer esse efeito dessa sobreposição escura aqui, isso é chamado de efeito lightbox. Então, vamos entrar aqui e, em seguida, vamos marcar a caixa de luz. Então, vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, então vamos rolar para baixo. E aqui está nossa seção de vídeos. Então, se clicarmos para jogar, teremos esse efeito Lightbox. E é assim que criar esta seção de vídeo. Na próxima lição, vamos ver como criar esse contador aqui que mostra algumas estatísticas sobre o e-book, como número de usuários de downloads, quantas avaliações de cinco estrelas ele tem, e quantos vídeos gratuitos que acompanham a compra do e-book. Então, vejo você em breve. 8. Seção de contador de estatísticas: Bem-vindo de volta. Então, a seguir, queremos ver como criar esses contadores seção que mostra algumas estatísticas sobre seu e-book. Então, vamos entrar em nosso editor. E, claro, como você já adivinhou, a próxima coisa que precisamos fazer é adicionar uma seção e ela tem que ser uma seção de largura total. Então, vamos seguir em frente e clicar nisso. E, claro, precisamos criar algum espaçamento entre as duas seções. Então, enquanto isso ainda estiver selecionado, vou entrar avançado. Remova esse link e , em seguida, 50 na parte superior. E agora temos esse espaço agradável. Como você percebe aqui, temos essa cor gradiente que tínhamos aqui no topo. Então isso é muito fácil. Elementor nos fornece uma maneira de copiar efeitos de uma seção para outra seção ou de uma coluna para outra coluna. Então, se eu clicar com o botão direito do mouse nesta seção, copiar, posso ir aqui. Porque isso também é uma seção. Posso clicar com o botão direito do mouse e colar o estilo. E colará o preenchimento que colocamos na parte superior e inferior e a cor de fundo. Ou poderíamos ter feito isso manualmente, o que teria levado mais tempo. Então, agora que temos isso, vamos em frente e adicionar uma interseção. Esta interseção precisa ter um contador. Então, basicamente, isso é um contador. Este aqui é um contador multiplicado por quatro. Então clique nesse sinal de mais aqui para exibir os elementos. E então aqui vamos pegar o balcão. E aqui está. Vamos arrastá-lo para lá. Vamos arrastá-lo para lá. E agora, como você pode ver, é contado até cento e cem. Aqui estão os números finais. Então, este é o número em que você quer que ele pare. Então, digamos que tenha sido baixado 17 mil vezes. Então temos esse 17 lá e ele começará de 0 a 17. Então o número de sufixo é o que, claro, vem depois do número. Então 17 mil, em vez de digitar 17 mil, porque isso levaria muito tempo. Vamos apenas digitar 17, kay? Você pode começar de qualquer lugar. Também podemos começar a partir de dez. Então, a próxima coisa que precisamos fazer é editar este texto aqui. Downloads. E, claro, vamos mudar a cor para branco. Então, entrar no estilo, branco, Esse é o número do título. Também é mudá-lo para branco. Vamos mudar a tipografia. Montserrat. Então, vou clicar na família da fonte. Eu adorava embrulhado em monstros. Vamos atualizar isso. E agora que estamos satisfeitos com a aparência, tudo o que precisamos fazer é duplicá-lo mais três vezes. Então, pairando sobre isso, vou clicar nisso uma, duas e três vezes. Então vamos nos livrar disso. Mas se você quiser adicionar mais, é claro, sinta-se à vontade. Então, vou clicar dentro deste segundo. E então eu vou mudar isso para o que nós membros mais felizes? Comentários de estrelas, brinde. Então, membros do nosso site ou de um clube do livro, digamos que sejam três membros K. Então vamos entrar aqui e dizer críticas de cinco estrelas. Temos cerca de 13 mil avaliações de cinco estrelas. E digamos que digamos leitores ativos. Digamos que Jove leitores gays ou algo desse tipo. Então, vamos atualizar isso e vamos visualizar as alterações. Então, vamos rolar para baixo e ver o que temos. Lá vamos nós. Então você notará que precisamos de algum espaçamento entre esta seção e esta seção. Então, vamos voltar aqui e selecionar nossa seção. Vai dizer que vasta margem, topo. Vamos mantê-lo em 50. Fato, vamos dar um 100. Vamos atualizar isso. Vamos visualizar as alterações. Rolando para baixo. Tudo bem. Tudo bem, então a próxima coisa que vamos fazer é trabalhar em uma breve história sobre o autor. Assim, como você pode ver em nossa página de referência, temos uma imagem do autor e uma breve história ou descrição aqui, e a assinatura do autor com algumas alças de mídia social. Então, vamos ver como criar esta seção em nossa próxima lição. Vejo você em breve. 9. Sobre a seção Autor: Até agora, criamos todas essas seções até a área de estatísticas. A próxima coisa que queremos fazer é criar a biografia do autor. Então, voltando para dentro do nosso editor, como você já adivinhou novamente, como você já adivinhou novamente, precisamos adicionar uma seção, mas desta vez estamos adicionando uma seção de coluna dupla porque esta coluna seguraremos a imagem e isso coluna manterá o conteúdo do texto e os ícones. Claro, antes de tudo, vamos adicionar alguma margem no topo, selecionar a seção, entrar avançado, quebrar o link lá. 50, margem superior. E então vamos clicar neste sinal de mais aqui para adicionar um elemento de imagem. Soltando-o lá e clicando nisso. Não temos a imagem dos autores aqui. Então, adoro carregar da nossa pasta de ativos. Então, livro, imagem do autor. Então, vamos abrir isso. E vamos inserir mídia. Lá nós o temos. A próxima coisa que queremos fazer é, claro, adicionar o cabeçalho. Cabeçalho, quem o autor. Então vou em frente e copiarei isso. E aqui, quero ir em frente e dizer, arrastar um título aqui. Mas em vez de fazer isso, por que não apenas duplicar isso? E, em seguida, arraste isso até o fundo. Agora, quando você está tentando arrastar, deixe-me desfazer isso. Quando você está tentando arrastar esses elementos e ele chega ao fim aqui e ele não vai mais para baixo enquanto você ainda está segurando. Enquanto você ainda está pressionando o botão do mouse. Role com a roda do meio do mouse. E, em seguida, solte o botão do mouse quando chegar ao ponto em que deseja soltar. Tudo bem, então agora que temos isso lá, eu vou clicar lá. Enquanto ainda estiver selecionado. Deixe-me copiar isso. Selecione tudo e, em seguida, cole. Então, quem é o autor? E agora vamos alinhá-lo à esquerda. E esta é uma ferramenta de página. Então, vou deixá-lo por isso. Vamos entrar aqui, tipografia. Vamos aumentar o tamanho até esse ponto. Agora também podemos voltar aqui e duplicar essa fonte. E notei que esquecemos de mudar essas descrições para Montserrat, então deixe-me selecionar esse conteúdo. Vamos entrar no estilo do conteúdo aqui. Topografia. Saiba que esse é o título. Queremos a descrição. Queria mudar isso para Montserrat apenas por uniformidade. E agora parece Montserrat, então vou copiar isso. Então. Cole o estilo lá. Cole o estilo lá. Clique com o botão direito do mouse em estilo de colar, botão direito do mouse em estilo de colar, clique Tudo bem, então isso também deve ser tipografia do tipo Montserrat. Montserrat ou uniformidade. Aqui. Em vez de duplicar qualquer um desses textos, vamos adicionar um novo elemento do editor de texto. E vamos diretamente dentro tipografia de estilo, meses Iraque. Conteúdo interno, agora você pode escrever a descrição desejada. Vou apenas ir em frente e copiar isso e duplicá-lo algumas vezes. E temos nossa descrição ou nossa biografia do autor. Mixar quer fazer é adicionar a assinatura deles. Só para tornar a página um pouco mais interessante. Ele realmente não serve a nenhum outro propósito além de apenas torná-lo interessante. Então, vamos clicar nesse ícone para abrir os ícones, para abrir os elementos. E então vamos arrastar um elemento de imagem aqui. E, claro, você notará que esse espaço reservado de imagem é grande. Vamos escolher a imagem. Vamos fazer upload de arquivos para obter a assinatura. E você notará que a imagem da assinatura é de 100 por 40 pixels. Isso significa que é uma imagem minúscula, então certifique-se de que sua imagem de assinatura seja pequena. Um 100 por 40 0s, bom. Não faça 500 pixels porque será grande. Então, vamos inserir mídia, e lá a temos. E, por padrão, está no meio. Então, vamos empurrá-lo para a esquerda. E a próxima coisa que precisamos fazer é adicionar nosso ícone de mídia social. Então, selecionando os elementos lá. Em seguida, social. Vamos arrastar os ícones sociais ali mesmo, por padrão lá no meio. Então, vamos colocá-los para a esquerda também. E vamos adicionar alguma margem entre eles e a assinatura. Então, enquanto ainda estiver selecionado, vamos avançar. Quebre esse link. Talvez 30. Sim, acho que gosto disso. Olá, saiba como conseguimos isso aqui. Deixe-me removê-lo de lá. E então vamos atualizar isso. Vamos visualizar as alterações. Incrível. Então, temos o comprador do nosso autor. Está bonito. Espero que você tenha sido capaz de criá-lo também. Na próxima lição, vamos ver como criar essa seção de call to action. Porque agora, a essa altura, a pessoa está realmente interessada em baixar o e-book. E observe que temos botões de download gratuitos nesta página porque uma landing page precisa ter seções de call to action. Seções que os lembram de tomar uma ação. Porque o objetivo de uma landing page é converter pessoas em compradores ou fazer o download enquanto assistiam ao vídeo. Veja as estatísticas e leia sobre o autor. Em seguida, queremos que eles tomem uma ação, então concluímos outro botão lá. Então, vamos ver como criar esta seção. Na próxima lição. 10. Ajude-me a ensinar o elemento com 10.000 alunos: Olá meu amigo. Em primeiro lugar, eu só quero agradecer muito por se juntar mim nesta aula e escolher aprender comigo. E também quero dar os parabéns por ter chegado tão longe na aula. O fato de você ter chegado tão longe na classe significa que você está ganhando valor com a classe. E então eu realmente aprecio você e espero que você esteja gostando da aula em si. Dito isso, preciso da sua ajuda. Tenho a missão de ensinar pelo menos 10 mil empreendedores como você a usar o elementary para criar seus próprios sites ou páginas de destino para vender seus produtos. E aqui está como você pode ajudar. Você vê quando um novo aluno entra em uma aula no Skillshare e depois gosta dessa aula e deixa um comentário. Isso ajuda outros alunos saberem o que esperar da turma. E quando uma turma está recebendo muitas avaliações dos alunos, Skillshare diz: “ Ei, você sabe o que? Esta turma está recebendo muito engajamento e muitas avaliações dos alunos. Portanto, deve ser útil. Portanto, deve ser útil. Então, vamos empurrá-lo para cima na biblioteca para torná-lo mais fácil de ser descoberto por novos alunos. Portanto, o algoritmo Skillshare impulsiona essa classe para cima e a torna mais visível, mais detectável para novos alunos. Porque tem recebido críticas positivas. E é aí que você entra. Junte-se a mim nesta missão e me ajudou a ensinar pelo menos 10 mil alunos como usar o Elementor, como construir belas páginas de destino, sites funcionais deixando uma avaliação nesta aula e informando o que esperar dessa aula. Só vai levar cerca de dois minutos e você está pronto. Mas sua avaliação ajudará muito os novos alunos, futuros alunos, a saberem o que esperar da turma. aulas atendem às suas expectativas. Isso superou suas expectativas? Se você tiver alguma dúvida, lembre-se, você sempre pode colocá-la na área de discussão abaixo deste vídeo e eu poderei ajudá-lo. Eu sempre respondo a todas as perguntas ou comentários que os alunos deixam em qualquer uma das minhas aulas. E com isso dito, eu só quero dizer que aproveite a aula e nos vemos na próxima aula. Paz. 11. Seção CTA: Bem-vindo de volta. É claro que terminamos de criar a seção de autores. Criar esta seção é muito fácil e simples. Na verdade, acho que você já sabe o que precisamos fazer para criá-lo. Então, vamos em frente e faça isso sem perder mais tempo. Então, voltando ao nosso editor, podemos gerar uma nova seção a partir do zero, ou podemos ir em frente e duplicar isso. E, em seguida, arraste-o logo abaixo disso. E agora tem tudo, e agora tem a maioria das partes que precisamos. Então, vamos nos livrar dessas seções. Fato, vamos nos livrar da seção interna inteiramente. E agora ficamos com nossa única coluna original. Então, o que precisamos fazer é duplicar isso. Elementor é criado para tornar sua vida mais fácil, em vez de recriar os mesmos estilos semelhantes toda vez que podemos duplicá-la. Vamos trazer isso para o centro enquanto ele ainda estiver selecionado, editar o cabeçalho, ele é empurrado para o centro. Agora, o que ele diz? Este livro mudará. Então, vamos copiar isso. Enquanto isso estiver selecionado, clicarei nisso, cole-o lá. E então vamos entrar na cor do texto do estilo. Precisamos dele branco. E então temos esse Lorem Ipsum. Não precisamos copiar isso porque podemos simplesmente obtê-lo daqui. Deixe-me duplicar isso. E então vamos arrastar isso para lá. Claro, vamos nos livrar de 90% disso. Agora ficamos com isso. Vamos entrar no estilo e vamos colocá-lo no meio. Agora está no centro. Vamos mudar a cor para branco. Então vamos entrar na topografia. E vamos aumentar um pouco o tamanho. Faça com que pareça uma descrição. E então, claro, precisamos desse botão. Então, vamos aqui e duplicar isso sobre isso e, em seguida, clicar nesse ícone duplicado. Então, vamos arrastar isso. Quando chegarmos aqui. Use a roda do mouse para rolar para baixo. Vamos deixá-lo lá assim que a linha azul aparecer. Agora você notará que temos muito espaçamento aqui. Então, vamos reduzir esse espaçamento. Primeiro de tudo, eles tinham algum preenchimento no topo. Como você pode ver em seu esboço do editor. Vamos para Avançado enquanto ele ainda estiver selecionado. Vamos remover isso. Em seguida, vamos selecionar esse texto. Vá para dentro da margem avançada, inferior. Vamos reduzir a margem inferior. Acho que gosto disso lá. Vamos atualizar isso. Então, vamos visualizar as alterações. E lá temos isso. Nosso call to action está pronto. A próxima parte que queremos criar é área de inscrição deste usuário porque qualquer página de destino precisa ter um formulário de inscrição ou qualquer formulário que capture os dados dos clientes. E você tem que dar a eles algo para que eles lhe forneçam seus contatos, o e-mail deles. Então eles recebem os três primeiros capítulos do e-book inscrevendo-se na sua lista de discussão. Então, vamos ver como criá-los na próxima lição. Vejo você em breve. 12. Seção de inscrição: Bem-vindo de volta. Então, agora é hora de criar esse formulário de inscrição. E faremos isso instalando um plugin chamado terminadores. Então, sem perder tempo, vamos pular para dentro do nosso painel. Então, vamos para Plugins, Adicionar Novo. E aqui eu quero digitar para mim mais tarde. Here we go by WPA mu A Dell tem 300 mil instalações ativas no momento. Então Eileen, sólida. Deixe-me ir em frente e ativá-lo. Então, lá temos isso para os dominadores. Então, indo para o menu à esquerda aqui, está quase na parte inferior. Vou formular o excesso de peso deles. Fato. Deixe-me apenas clicar. Formulator será levado para o painel de plugins dentro do WordPress. Então, como você pode ver, estamos subformulados agora. Dashboard e temos mais áreas que podemos visitar, mas, por enquanto, estamos interessados em criar um formulário. Então eu vou em frente e, como você pode ver aqui, temos formulários. Crie um formulário. Temos postagens. Você pode criar uma enquete, mas não entrará em detalhes sobre isso. Você pode ir em frente e conferir no YouTube. Saiba mais sobre por que para mim é o formulário mais incrível Plug-in, os arrays. Mas essa é apenas minha opinião. Então, vamos criar um formulário e serão apresentados com esses modelos pré-fabricados. E o que precisamos é a inscrição no boletim informativo que podemos criar a partir de uma ardósia em branco. Vamos com preto. Só para que possamos criar o que precisamos do zero. Vamos dar um nome a ele. Formulário de inscrição. Tudo bem, então aqui estamos nós. Tudo bem, então aqui estamos nós. Tudo o que precisamos fazer é inserir o campo que precisamos. E o campo que precisamos é o campo de e-mail. Então, aqui, eu só quero clicar em Inserir campo e selecionar o campo de e-mail. Temos muitos outros campos diferentes que você pode inserir em seu formulário, mas não estamos interessados neles por enquanto. Então, vamos inserir o campo. E então, sim, vamos deixá-lo como endereço de e-mail. Ou digamos que seu e-mail, seu e-mail. Vamos remover um vestido. E então vamos deixar o espaço reservado como John Doe. Aplique isso. Se o visualizarmos. Seu e-mail e o espaço reservado são EG John, John em Dot.com. Então, vamos fechar isso e publicá-lo. Depois de publicá-lo, obtemos o código curto que podemos colar no front-end. Então deixe-me copiar isso. E como você pode ver, ele foi copiado com sucesso, precisará desses códigos curtos, o front-end. Então, vamos voltar para o front-end. Aqui estamos nós. Logo abaixo. Nosso call to action é onde estamos adicionando uma nova seção. E é uma seção de coluna dupla. E precisamos adicionar uma margem superior. Então, selecionando aquela quebra avançada que 15 voltada para aqui. Então, aqui, vamos clicar nesse sinal de mais e vamos digitar código curto, ou apenas curto. E isso aparecerá. Vamos arrastar o código curto nessa coluna para lá. E agora, uma vez que o soltarmos, apresentará essas edições configurações de código curto. E então podemos colar nosso código curto lá. Esse é um código curto que recebemos daqui, esse código curto no caso de você ter deixado essa parte. Você também pode obtê-lo daqui a partir desta roda dentada. Copie código curto e você o copiou novamente. Então, solte-o lá e depois aplique isso. Vamos visualizar as alterações. Vamos rolar todo o caminho até o fundo. E lá temos isso. Nosso formulário está pronto. Mas agora vamos voltar aqui e adicionar esse texto. Obtenha os três primeiros capítulos gratuitamente. Então deixe-me copiar isso. O que precisamos fazer é apenas duplicar isso ou deixar-me duplicar isso , porque ele já tem a cor que precisamos. Vamos arrastá-lo até o fundo. Vamos deixá-lo lá dentro. Enquanto ele ainda estiver selecionado. Vou colar a pasta o texto certo lá, obter os três primeiros capítulos grátis. Tudo bem, vamos atualizar isso e vamos visualizar as alterações. Certo? Mas agora não está equilibrado. Então, vamos puxar isso um pouco para a esquerda para que esses saltos para a próxima linha para torná-lo mais equilibrado. Então, assim. Atualize isso. E lembre-se que também precisamos fazer essa cor rima com o resto das cores da marca. Como esse formulário é criado com o formulador, não podemos editá-lo usando o Elementor. Temos que voltar para dentro do nosso painel. Volte para dentro do painel. Formulários de terminador. E depois que estivermos dentro dos formulários, veremos uma lista de todos os formulários que temos. Este é o formulário que criamos. Acabamos de criar um formulário de inscrição. Vamos editar o formulário. E enquanto estamos aqui dentro, vamos para o segundo painel aqui. Aparência. E isso nos levará ao lugar onde podemos editar a aparência do formulário. Então, antes de tudo, podemos nos livrar dessas fronteiras dizendo selecionando plano. Existem outras opções aqui que você pode escolher, mas eu gosto de plano. E vamos mudar a cor do botão. Então, agora, estamos usando as cores padrão das cores padrão que vêm com um plug-in. Mas podemos dizer fantasia. E isso trará todas as partes do formulário que podemos mudar. A cor do. O último item aqui é o botão enviar. Este botão. Então, como ele está selecionado, ele aparece, é um menu suspenso. Ele traz essas opções. Assim, podemos selecionar a cor de fundo e alterá-la para um 24. Isso removeu essas duplicatas, F 1524. E ao passar o mouse, queremos que o botão seja, queremos que o botão seja triplo 40. E sem foco. Também queremos que seja essa cor. Então, vamos lá, então digamos atualizar. Tudo bem, agora vamos para o front-end e vamos aplicar as alterações que acabamos de fazer no back-end. Vamos visualizar as alterações mais uma vez. Então, rolando para baixo. Aqui está nosso botão ao passar o mouse. As mudanças naquele preto que é consistente com esse preto. Agora podemos aumentar o espaçamento entre esta coluna e essa coluna voltando aqui. Rolando para baixo até esta seção, esta seção que tem essa coluna e esta coluna. Vamos selecionar esta seção em si dentro do layout. Gap de colunas, digamos branco. E vamos ler, vamos aumentar essa largura aqui apenas para que isso esteja em dois espremidos. Vamos atualizar isso. E vamos visualizar as alterações. Pelo menos temos um bom espaçamento entre os dois. Então, agora que estamos satisfeitos com todas as seções que criamos, agora é hora de terminar a aula tornando a página responsiva em todos os dispositivos, que significa telas móveis, tablets telas, e já está com boa aparência na área de trabalho. Então, vamos trabalhar em telas de tablets e celulares. Vejo você na próxima lição. 13. Capacidade de resposta da tela do smartphone: Bem-vindo de volta. Hora agora para tornar a página da Web responsiva nos diferentes dispositivos nos quais as pessoas navegam. E isso são telas e tablets móveis. Então, vamos em frente e clique neste ícone de modo responsivo aqui no rodapé da página. E imediatamente esta barra aparecerá com diferentes configurações para design responsivo. Então, clicarei neste ícone e mudarei imediatamente para o tamanho de uma tela do celular. E podemos ir em frente e rolar apenas para ver o que parece. Não parece que há muito trabalho a fazer. A página da web está quase com boa aparência, a propósito. Então, a partir do topo, o livro está no meio e parece bom onde está. Então, vamos passar para a segunda parte, que é a H1. Selecionando o H1. Vamos entrar na tipografia de estilo. Vamos reduzir o tamanho. Gosto desse tamanho. Voltando para dentro do conteúdo, vamos alinhá-lo ao meio. E você notará que temos a margem no topo que definimos na área de trabalho. Vamos seguir em frente e selecionar esta coluna. Agora é a coluna de edição avançada. E vamos quebrar esse link para remover as configurações padrão com as quais viemos. Então, agora removemos as configurações que definimos dentro do modo de área de trabalho. Então, a próxima coisa que você notará aqui é que vamos reduzir o tamanho um pouco mais. Entrando na tipografia. Gosto desse tamanho. Selecione este editor de texto. Vá para dentro do estilo. Alinhar, centro. Estamos apenas tentando alinhar tudo ao centro. Para equilíbrio. Selecione o botão dentro do alinhamento de conteúdo. Vamos fazer o mesmo com esse editor de texto aqui. Entrando no alinhamento de estilo, centro. Nossa seção de parceiros já parece boa. Então, vamos passar para a próxima parte, que é a seção de tópicos. Acho que gosto de onde está, mas uma coisa que podemos fazer sobre toda essa seção aqui é aumentar o preenchimento na própria coluna. Então, espaçamento entre a borda da tela e onde o conteúdo começa. Então, vamos enquanto esta coluna estiver selecionada, vamos entrar avançado. Lembre-se que esta coluna está dentro da seção que era uma seção de largura total. Então deixe-me trocar de área de trabalho por um segundo. Tínhamos uma seção de largura total com apenas uma coluna. Então, o que estamos tentando fazer em telas móveis, Eve aumenta o preenchimento em torno de toda essa coluna. Então isso significa que o preenchimento, também apertaremos esse botão para dentro. Voltando para dentro da tela do celular. Enquanto estamos lá dentro, avançamos nesta coluna. Sem quebrar este link. Vamos dar um 20. E você notará agora que temos algum espaçamento ao redor, incluindo onde o botão estava fazendo mais espaçamento aqui. Vamos atualizar isso. Isso parece bom. Acho que gosto dessas áreas de vídeo, então não vou tocar nisso. Eu gosto que essa parte seja, bem, tudo é centrado automaticamente. O que podemos querer fazer é selecionar esta coluna, como fizemos na seção de tópicos. Selecione a coluna, entre em avançado. Vamos manter um preenchimento de 20 ao redor, certo, então há aquele estofamento uniforme por toda parte. E podemos empurrar tudo para o centro. Então, selecionarei essa adição no centro de alinhamento de conteúdo. Selecione este editor de texto no centro de alinhamento de estilo. Vamos selecionar essa imagem. Elementos. Centro de alinhamento. O centro de ícones de mídia social. A imagem está bem posicionada, então não precisamos tocar nisso. E, a propósito, um recurso legal do Elementor é que ele permite reverter as colunas dentro de uma seção. Então, se quiséssemos que essa imagem viesse antes dos textos, podemos entrar avançado. Primeiro de tudo, podemos selecionar a seção que queremos afetar, que é uma seção de coluna dupla que está segurando esses blocos de texto e a imagem entra em responsivo avançado. E podemos reverter colunas na tela do celular. Então, agora a imagem foi empurrada para o topo e o bloco de texto foi empurrado para baixo. Mas voltando para a tela, na versão desktop, a imagem ainda está à direita, voltando para dentro aqui. Então, se você não quiser isso, você sempre pode desmarcar isso. Então, vamos reduzir esse tamanho de cabeçalho. Então, selecionando essa tipografia de estilo, vamos arrastá-la até ficarmos satisfeitos com o tamanho. Acho que gosto disso naquele momento. Tudo o resto está centrado e parece bom. Vamos reduzir o tamanho acima de tudo. Vamos reduzir esse tamanho assim. Primeiro de tudo, vamos reduzir o tamanho dos autores adicionando. Então, vou selecionar esse cabeçalho. Tipografia de estilo. São 39. Vamos torná-lo um 40. E indo até esse call to action a partir da seção, selecione o cabeçalho, entre na tipografia de estilo. Vamos digitar 40 aqui. Como esse tamanho. Voltando para dentro do conteúdo, vamos empurrá-lo para o centro. E nossa forma está intacta. Agora podemos usar essas configurações de design responsivo para apertar esse botão para o centro, como fizemos com o resto dos botões. Porque lembre-se que este formulário é criado com o formulador. E para apertar esse botão para o centro, precisaríamos usar algum código CSS. Então, não vamos entrar nisso. E eu cor-de-rosa o formulário parece bonito do jeito que é. Mas se você quiser saber mais sobre como pressionar esse botão para o centro usando CSS. Você pode ir em frente e procurar um tutorial no YouTube ou em qualquer outro no YouTube ou apenas pesquisando no Google. Procure a personalização CSS do nomeador. É isso. Em telas móveis. A página da web parece incrível. Vamos entrar. Tudo bem, então vamos atualizar isso primeiro antes prosseguirmos para o modo tablet. E vamos visualizar as alterações. Claro, ele se abrirá no modo tablet. Mas eu quero mostrar a vocês como imitar uma tela móvel e ver como ela será. Então, no teclado do computador, pressione Control Shift I ou Command Shift I. Isso abrirá o Google Developer Tools e siga em frente e alterne a barra de ferramentas do dispositivo. Quando você clica nele. Quando está ativo, é de cor azul. E aqui temos uma lista suspensa ou as diferentes telas móveis que você pode imitar para ver como será a página da web. Então, atualmente estamos visualizando-o como um pixel cinco, transmitido como um, você pode fazê-lo como um iPhone 12s pro. E é assim que ficará nos iPhones. Tudo bem, então eu gosto de como parece. Vamos voltar e trabalhar no modo tablet. 14. Capacidade de resposta da tela do tablet: Então, voltando aqui, quero clicar no ícone do tablet. E imediatamente ele muda para o modo tablet. Vamos rolar todo o caminho até o topo. Por padrão, o elementor tem esse bug conhecido, onde quando você muda para o modo tablet, você precisa expandir essa tela um pouco. Se você aplicar as configurações no modo tablet sem redimensionar um pouco a tela, você não verá as alterações e me deixará provar isso para você. Então, neste momento, esta coluna, até este ponto. Então, se eu selecionar a coluna e ir para a coluna e dar-lhe 100% de trigo para correr da esquerda para a direita e apertar Enter e nada acontece. Mas quando puxamos um pouco, agora perceba que está realmente mostrando o que acabamos de fazer. E é disso que estou falando. Queremos ver as configurações para configuração. Então, neste momento, a coluna em massa é ocupada 100% da tela. Mas quando mudamos para o modo desktop, ele ainda está ocupando 50% da tela. E esta outra parte está ocupando 50% da tela. Voltando ao modo tablet, queremos tornar este um modo tablet 100% amplo. Como fizemos com o livro. Vamos expandir isso um pouco novamente. Certo, então é 100%. Então, selecionando esta coluna aqui e entrando no layout, largura da coluna 100%. Agora é 100%. Quero quebrar a margem que tínhamos conjuntos por algum tempo na área de trabalho aqui. E, claro, enquanto isso ainda estiver selecionado, vamos entrar avançado e removê-lo. Então, agora nós o redefinimos. Selecionando esse cabeçalho. Vá para dentro da tipografia de estilo. Vamos reduzir um pouco o tamanho. E vamos entrar no conteúdo e empurrá-lo para o centro. Vamos selecionar essa descrição. Enquanto estiver sob estilo, empurra para o centro. Vamos empurrar tudo para o centro novamente. Vamos empurrar tudo para o centro novamente. Selecione isso. Empurra o centro. Gosto disso. Estilo. Centro. Os apartamentos parecem bons. Isso parece bom. Também podemos dar essa margem de 20. Sob avançado. Parece bom. Essa coluna precisa de algum preenchimento ao redor das bordas. Então, selecionando essas colunas, preenchimento avançado. Agora temos um bom estofamento. Imagem. Parece bom. Vamos reduzir o tamanho desse título. Tipografia de estilo. Finalmente, vamos reduzir o tamanho do preenchimento aqui. O rosa, eu gosto naquele local. Vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, então nesta tela, vamos para este menu suspenso e selecione o iPad. E vamos, podemos alternar entre paisagem e retrato. Então clique neste ícone para girá-lo. É assim que parece. Na paisagem do tablet. E em um retrato de tablet. É assim que parece. Para trazer para tornar a tela maior e fazê-la preencher a página. Você pode apenas torná-lo 100 por cento assim. E é assim que parece a partir de uma substituição de distância de close-up . Então, agora nossa landing page é responsiva em todas as telas. Porque agora, se mudarmos para o iPhone, ele parece bom. No tablet. Parece apresentável. Vamos para o Surface Duo. E na área de trabalho, parece incrível. Então deixe-me fechar isso e rolar para baixo. Basicamente, é assim que fazer isso. E isso marca o fim da nossa classe. Espero que você tenha aprendido algumas coisas se você é novo no elementor. E mesmo que você já saiba como usar o Elementor e estivesse assistindo isso como uma atualização. Espero que você tenha aprendido uma ou duas coisas. Claro que não cobrimos tudo o que há para cobrir sobre o Elementor. Isso será impossível em uma classe. Mas nós cobrimos o que precisávamos para essa landing page específica. Então, no caso de você querer saber mais sobre como usar o Elementor, como, por exemplo, construir a barra de navegação, como construir uma pasta e editar os detalhes na foto. Você pode ir em frente e assistir a qualquer uma das minhas outras aulas do Skillshare, onde eu vou fundo e ensiná-lo a projetar sites totalmente funcionais. Mas, por enquanto, acho que abordamos tudo o que pretendia ensinar a você sobre como construir uma linda página de destino de e-books usando o Elementor. 15. Conclusão: Tudo bem, então isso marca o fim desta aula. Espero que você tenha achado valioso e, acima de tudo, espero que você realmente crie sua própria landing page. Se você é novo no Elementor, eu encorajo você a conferir todas as minhas outras aulas indo para o meu perfil. E você encontrará várias aulas lá onde eu ensino como criar sites totalmente funcionais ou landing pages incríveis. E se você gostou desta aula, por favor, não se esqueça de deixar um comentário. Vai percorrer um longo caminho para ajudar a tornar esta aula mais detectável. Bem aqui no Skillshare. Mais do que avaliações. Quanto mais as avaliações a classe recebe, mais ela se torna detectável. E, como sempre, meu nome é Ken Visa. Até a próxima vez, mantenha-se uma peça criativa. Vejo você na próxima vez.