Curso de Elementor para iniciantes — Aprenda criando a landing page da Lyft

1. Introdução: Bem-vindo de volta a outra classe elementar incrível comigo pode versa. É sempre um prazer ter você aqui. Se você é um iniciante, mostrarei as diferentes ferramentas e recursos do Elementor e não só olharemos para isso como uma visão geral, estaremos projetando projetos do mundo real, projetando as páginas de destino do mundialmente famoso marcas. E nesta primeira aula começará com folha. Se você não tem folha. Leaf é uma empresa que é muito parecido com Uber ou barco. Eles lidam com direitos e partilha de viagens e tudo mais. Eles têm um aplicativo. Então eles têm essa página de destino incrível que nós estaremos olhando em um curto momento. E então estaremos projetando essas páginas de aterrissagem em Elementor. Estaremos olhando para as deficiências do Elementor e estaremos olhando para a força. E quando terminamos, você terá entendido como criar constantemente a página de destino incrível por conta própria. Então, se você quiser aprender a criar páginas de destino melhores para o seu site ou para o seu cliente. Junte-se a mim nesta aula e prometo que as próximas duas horas serão cumpridas para você, ou acima de tudo, serão benéficas para o seu futuro. Então, junte-se a mim. 2. A página de desembarque que estamos projetando: Então aqui estamos na página inicial do leaf.com. Isto é o que vai tentar projetar hoje. Então, se pudéssemos rolar para baixo e ver o que temos reservado para nós. Aqui vamos nós. Então, à medida que projetamos, isso será tentar entender como usar as ferramentas e recursos do Elementor para construir uma página inicial de trabalho moderna que possa converter visitantes em clientes. Então, sem perder mais tempo, vamos começar. 3. Como atualizar o novo assistente de configuração do elemento central: Bem-vindo de volta. Agora, esta lição é uma nota rápida ou uma rápida atualização do processo de instalação do Elementor. Se você estiver fazendo esta aula em maio de 2022 e depois, notará que a ativação do Elementor agora tem um assistente de configuração que é composto de várias etapas que você precisa seguir para configurar as partes básicas do seu site. Enquanto eu estava criando essa classe há vários meses, Elementor não tinha esse assistente de configuração. Então, eu só quero que passemos por esse assistente de configuração. Mas tudo o mais que você está aprendendo nesta aula não muda. Ainda é o mesmo processo durante todo o processo. A única adição é o assistente de configuração. Então, como você pode ver agora, eu tenho uma nova instalação do WordPress e estamos na versão 6. E o que eu quero fazer é ir para Plugins, Add New. Assim, podemos adicionar o Elementor e passar por esse processo. Vou procurar a instalação do Elementor agora. E agora, quando eu clicar em Ativar serei redirecionado para esse assistente de configuração. E podemos passar por isso juntos. Então, aqui estamos nós. Vou diminuir um pouco o zoom para que possamos ver mais detalhes. Tudo bem, então agora você notará que a primeira coisa que o Elemental quer que façamos agora é criar uma conta para tirar o máximo proveito do Elementor. Então, esses são alguns dos benefícios de se inscrever em uma conta no Elementor. Mas o problema é que você não precisa ter uma conta Elementor para usar o Elementor. Então eu vou em frente e pular essa parte. O segundo passo é aceitar, continuar com o tema sagrado que Elementor fez para nós. Isso é feito pela Elementor, mas estamos usando o Tema Astra, então vamos em frente e pulamos. Astra é um tema mais poderoso. O terceiro passo é dar um nome ao nosso site. Enquanto você estava instalando seu WordPress. Você deu um nome ao site. Esse é o nome que vai aparecer aqui. Mas isso nos dá a oportunidade mudar o nome para qualquer outro nome que quisermos. Meu site e, em seguida, vamos clicar em Avançar. E se você tiver um logotipo para o seu site e quiser adicioná-lo com antecedência. Você pode simplesmente ir em frente e abrir a biblioteca de mídia e selecioná-la na biblioteca de mídia ou carregá-la do seu computador. Mas não vamos fazer isso agora. Então, vou manter esse passo. E é claro que podemos adicionar o logotipo mais tarde e eu vou te mostrar como fazer isso. Vamos clicar em Ignorar. E agora chegamos à última etapa em que temos duas opções. Podemos começar a editar nossa página inicial a partir de uma tela em branco com o editor Elementor. Ou podemos navegar a partir de centenas de modelos ou importar nossos próprios modelos, se os tivermos. Mas eu vou em frente e pularei. Isso. Será redirecionado para a tela onde agora podemos começar a construir um site. E aqui vamos nós. Então, basicamente isso é tudo que eu queria mostrar a você. É uma nova atualização. Não estava lá há alguns meses. Agora, está lá. Mas todo o resto nas próximas aulas continua o mesmo. O processo ainda permanece o mesmo para criar uma página de destino. Então, sem perder mais tempo, vamos para a próxima lição. Vou até este menu de hambúrguer e clicar em Sair para o painel. Vamos sair desta página. Agora estamos dentro do painel e estamos prontos para começar a criar o site. 4. Instalando os plugins: A primeira coisa que precisamos fazer é instalar os plugins que vamos usar. Então vamos em frente e instalá-los todos de uma vez e ativá-los. E à medida que projetamos a página de destino, você começa a entender onde cada plugin será usado. Então vamos para Plugins, Adicionar Novo, e vamos procurar Elementor. Vamos instalá-lo. E enquanto estamos nisso, vamos descer no construtor de cabeçalho e rodapé do Elementor install. Nós também precisamos procurar outro plugin chamado formulador. Esses outros estão instalando em segundo plano. Então vamos procurar o formulador. Isso nos permitirá criar essas pequenas formas bem aqui. Então vamos instalá-lo. E eu tenho uma pesquisa na biblioteca. E isso nos permitirá criar uma barra de pesquisa no topo e em qualquer outro lugar que precise de uma barra de pesquisa. Então, uma vez feito isso, vamos entrar nos plugins instalados e ativá-los todos. Então, basta confirmar que você tem todos eles e selecionar, Ativar no menu suspenso e, em seguida, aplicar. Tudo bem, então todos os nossos plugins estão agora instalados e ativados. 5. Instalando o tema: Apenas no caso de você querer alterar o tema que está instalado no momento. É hora de fazer isso. E, claro, eu não quero usar o tema que vem por padrão com uma nova instalação WordPress, que é para o meu caso, 2021. É o tema atual. Eu quero adicionar New, e eu vou procurar por Astro. Este é um dos meus temas favoritos, porque é um tema multiuso que você pode usar para muitos tipos diferentes de empresas. Lojas online, blogs pessoais, tudo o que quiser. Astro é um tema super incrível que eu recomendo a você se você quiser um bom tema multiuso que você pode usar para seus projetos WordPress. Então vou instalá-lo. Vamos ativá-lo. Incrível. Por isso, agora, vamos fechar isto. Então agora, nosso tema ativo é Astro. 6. A barra de navegação: Então vamos agora passar para a primeira coisa e criar a barra de navegação superior. Então vamos entrar aparência, Elementor, cabeçalho e rodapé construtor. Então vamos em frente e adicionar novo. Vamos dar-lhe um nome. Agora bar, por exemplo. E vamos ao Publish. Então, agora para o tipo de modelo, é um cabeçalho. Então selecione cabeçalho, exibir em todo o site. Quem deveria ver? Todos. Pessoas que visitam seu site. E vamos atualizar isso. E aqui, neste lado direito, temos algumas configurações que vêm com Astra. E na barra lateral, selecione nenhuma barra lateral. E largura total esticada. Vou desativar o cabeçalho principal, desativar cabeçalho móvel, título e rodapé, e apertar Atualizar. Então, agora que o configuramos no backend, vamos projetá-lo visualmente no front-end com o Elementor. Então clique que será redirecionado para o front-end onde podemos começar a construir isso. Então aqui estamos nós. Se você é novo no Elementor, você precisa pensar em termos de colunas. E esta barra de navegação tem três colunas. Há uma coluna que contém essa barra de navegação, e outra coluna contém a barra de pesquisa, e outra contém esse logotipo. Aqui temos duas colunas, uma que contém esta área e outra que contém as imagens. E você vai ver oh, isso enquanto descermos. Então a coisa aqui é que precisamos adicionar uma coluna tripla. Escolha um anúncio nessa seção tripla coluna. 7. Adição do logotipo: E neste fim, vamos reduzir um pouco esse tamanho, e vamos adicionar um elemento de imagem. É para onde o logotipo vai ficar. Então é assim que se adiciona um logótipo. E observe que uma vez que você seleciona isso, ela abre essa opção Editar imagem. Quando você seleciona isso, ele muda para editar seção. Portanto, quaisquer elementos ativos que você selecionou aqui é aquele em que você pode fazer edições. Então, se você quiser saber o que está atualmente selecionado, basta olhar para isso. Então vá em frente e clique nisso e faça o upload de uma imagem de logotipo. E eu fornecerei esta pasta aqui. Eu preparei uma pasta que contém todas as imagens que eu usei nesta classe. Então, se você quiser acompanhar, você pode baixar esta pasta zip, extrair todas as imagens e usá-las. Então aqui está o nosso logótipo. Vou em frente e, na verdade, vou carregar todas essas imagens porque você vai precisar delas. Mas eu vou em frente e pegar o logotipo porque ele já está carregado e inserido lá. 8. Adição de uma barra de pesquisa: Então a próxima coisa que precisamos fazer é adicionar esta barra de pesquisa aqui. E a maneira de adicioná-lo, porque vamos usar o atraso de busca de marfim que acabamos de instalar. O que precisamos fazer é adicionar um código curto aqui e colocá-lo lá. E vamos pegar esse código curto do plugin. Então precisamos ir para o back-end. Mas antes de fazermos isso, vamos clicar em aplicar aqui. Tudo bem, e então atualize a página. Então, neste ponto, o que eu quero fazer é abrir uma nova guia e eu vou apenas rapidamente pegar esta seção aqui. Vamos para o painel. Copie isso. Vá para o painel. E eu quero ir direto para dentro de marfim para que possamos criar nossa barra de pesquisa. Então vamos manter isso. Agora, se abrirmos uma pesquisa de biblioteca novamente, vamos escolher este código curto, copiá-lo, mudar a outra aba, clicar no suporte do código curto, e aqui, colar esse código curto e aplicar. Percebe que já está aparecendo. Mas é claro que ele precisa de algum estilo adicional e nós vamos cuidar disso, então não se preocupe com isso. Então, voltando para as configurações aqui. Então nosso objetivo agora é basicamente tentar estilete para parecer semelhante a isso, mas vai ser uma barra de pesquisa básica. Se você quiser aprender a trabalhar com barras de pesquisa em profundidade, você pode procurar vídeos e tutoriais em barras de pesquisa WordPress. E se eu pudesse mudar rapidamente para a página inicial dos elevadores originais, nosso objetivo é imitar esta barra de pesquisa, este esboço aqui em nossa página. Então aqui você notará que temos colunas diferentes com configurações. Estas são as principais configurações aqui. E quando você expande qualquer preenchido aqui, ele se expande para esta área. Então agora, é a configuração de busca que podemos ver aqui. Então, podemos configurar os tipos de postagem que queremos. E o mesmo caso se aplica ao resto de todos esses campos. Então, se pudéssemos mudar aqui, colamos esse código aqui para que eu pudesse mostrar como vamos usar esse código curto. Mas deixe-me apagar isso e vamos voltar aqui e adicionar um novo formulário de pesquisa. Esse era o padrão para, mas queremos criar um formulário que usaremos em nossa página. Então vamos chamá-lo de meu formulário de busca. Vamos salvá-lo. Certo, então não quero aprofundar os resultados que o formulário de pesquisa mostrará e tudo mais. Mas o que me interessa é fazer parecer semelhante a isto. Portanto, nossa área de interesse é a guia Design por enquanto. E você notará que temos este formulário de pesquisa Personalizador. Basta clicar nisso para habilitar a personalização do seu formulário de pesquisa. Quando clicarmos, ele será redirecionado para o personalizador WordPress. E aqui vamos nós. Então, aqui podemos escolher o estilo da forma. Então, atualmente tem esses botões, mas não precisamos deles. Então podemos selecionar isso e publicar ou peso. Então agora o formulário não está aparecendo porque lembre-se que removemos o código curto e temos que pegar o código curto do novo formulário que acabamos de criar. Então vamos duplicar isso rapidamente. E nesta conta, vamos voltar. E vamos pegar este formulário. Copie isso. E vamos voltar aqui. Aqui dentro, e colar isso ali. Atualizações. Então você notará que ele já tomou a forma que selecionamos neste personalizador. Então, já está tomando forma. Vamos aplicar isso. Certo, pelo menos temos algo com que podemos trabalhar. Por agora. Quero que adicionemos o menu. Então podemos estilizar toda a barra de navegação ao mesmo tempo. 9. Adição do menu navegação: Vamos adicionar um menu. E a maneira de adicionar um menu é, em primeiro lugar, vamos voltar ao painel. E aqui, o que precisamos fazer é criar algumas páginas. Agora temos as páginas padrão que vêm com uma nova instalação do WordPress, então vou excluí-los todos. Mova-se para o lixo. Aplique isso. E vamos mudar para o site da folha por um momento. E você vai notar que temos motorista, escritor, login de negócios, inscrever cinco itens. Então isso é basicamente o que estamos fazendo quando estamos criando as páginas, porque essas são páginas da Web. Quando você clicar nisso, você será levado para a página que contém informações sobre escritores se você quiser ser um escritor. Então vamos criar cerca de cinco páginas. Então eu vou dizer Adicionar Novo. Então motorista, motorista. E do lado direito aqui, lembre-se das configurações do Astros. Nesta seção aqui queremos desativar o cabeçalho móvel título e cabeçalho primário desabilitado e o rodapé. E queremos ter certeza de que está cheio e sem barra lateral. Em seguida, para o modelo abaixo Atributos de página disse que é Elementor largura total e publicação. Então vamos repetir o mesmo processo para todos os outros. É voltar, adicionar novo. Agora avance e crie o resto. Então faça o mesmo. Agora que temos cinco itens de menu, a próxima coisa que precisamos fazer é criar o menu real. E fazemos isso indo para menus de aparência. E você vai notar aqui que abaixo menus, temos criar seu primeiro menu abaixo, para que possamos criar um menu e colega, meu menu superior. Vamos criar menu ou montar. Agora, depois disso, esses itens se tornam ativos e essas são as páginas que acabamos de criar. Então, selecione todos eles e adicione-os ao menu. Este menu, incrível. Então vamos reorganizá-los de acordo. Então motorista escritor login negócios inscrição, motorista escritor, login de negócios, inscrição, e vamos torná-lo nosso menu principal. Vou guardar isso. Agora estamos prontos e estamos prontos para ir para o front-end e adicionar este menu que contém todos esses itens de menu aqui. Então, clicando lá, vamos procurar por navegação. E você vai notar que temos menus de navegação de defesa. Estamos interessados neste que tem ódio FB para Elementor cabeçalho rodapé construtor. Vamos arrastá-lo para lá e você notará que os itens do menu já estão aparecendo. Agora eu atualizo minha página de destino depois de adicionar este elemento de menu aqui. É por isso que esta área parece um pouco diferente. Então, se você vir uma notificação azul aqui dizendo que você não tem menus, atualize a página para que este menu apareça aqui. E se você tiver vários menus que você criou aqui, eles aparecerão aqui neste menu suspenso e você poderá selecioná-lo, e o que você escolher aparecerá aqui. Então agora vamos dizer ao menu para ficar assim. Quando você passa o mouse sobre os itens aqui você percebe que eles ficam roxos. Então vamos fazer isso. Então, selecionando seu elemento de menu, torna-se ativo aqui eu posso ir dentro estilos. Sob o menu principal. Temos topografia, e é aqui que podemos mudar a fonte e tudo mais. E o que queremos fazer agora é mudar a cor do pairar para aquele roxo que acabamos de ver. Vamos dar um pouco de roxo brilhante. Sim, acho que gosto disso. Vou copiar isso. E vamos também garantir que quando o link estiver ativo e tenha a mesma cor roxa. Vamos em frente e atualizá-lo. E vamos pré-visualizar as mudanças. Agora eu sei que você está se perguntando, tal essas linhas verticais aqui e esta linha horizontal aqui, onde está? E isso porque tudo aqui está dentro deste único elemento. 10. A seção de heróis: E como eu mencionei, enquanto estávamos começando a projetar a barra de navegação, tudo dentro desta página cai dentro de uma seção. E cada seção tem colunas, pelo menos uma coluna. Então, como você pode ver, esta área tem duas colunas. O site que tem imagens e o site que contém os botões no texto, e vice-versa aqui. Então pulando para a nossa página do editor Elementor. Primeiro de tudo, vou atualizar as mudanças que acabamos de fazer porque terminamos de trabalhar no napa por enquanto. Ainda faremos alguns toques finais nele. Quero fechá-lo clicando naquele botão ali e Sair para o Dashboard. Então o que queremos fazer é ir às páginas. E escolheremos uma das páginas para ser a nossa página de destino. Então vamos com a página de negócios. Então, vou dizer “Editar”. E porque tínhamos configurado tudo aqui para começar, o que precisamos fazer é editar com o Elementor porque agora estamos construindo tudo visualmente. Então você vai notar que temos a barra de navegação, mas desta vez não é editável ou clicável. E é porque não estamos dentro do editor da barra de navegação, estamos dentro do editor de página. Então a primeira coisa que queremos fazer é criar essas duas colunas. E aqui, nesta coluna do lado direito, precisamos de duas imagens. Para que possamos empilhá-los juntos. Então, para adicionar uma imagem abaixo disso, eu vou aqui para este menu e adicionar uma imagem, arrastá-la, e soltá-la quando esta linha azul aparecer aqui. Agora temos duas imagens empilhadas juntas, mas em breve, faremos com que elas se sobreponham assim. Por outro lado, queremos acrescentar alguns destes textos. E eu vou apenas copiar este texto diretamente como ele está. Porque isso é apenas para fins educacionais. Você não pode copiar o site de alguém assim. Então eu vou em frente e pegar isso. Um imposto ali, copiado. E aqui vou clicar no sinal de mais e adicionar um título. Porque isto é um título. E uma prática recomendada ao projetar páginas de destino ou páginas da Web, certifique-se de usar um H1 por página, pois H1 é o assunto principal da página. E uma vez que você tem um H1 em sua página de destino ou sua página da Web, tudo o resto pode ser subtítulo ou subtítulo, que agora cairia em H2, H3, H4. Mas lembre-se, um H1 por página. Não precisa. Vamos mudar a cor aqui. Então, com isso selecionado, vou clicar em estilo e na cor do texto. Vou mudar para a cor que está perto do que queremos. E, claro, olhar para a fonte parece mais com Montserrat. Claro, você pode escolher qualquer fonte que você quiser. Vamos em frente e dizer Montserrat. Então, em Tipografia, clique neste botão Editar e digite meses. E eu acho, sim, eu acho que é uma fonte. Vamos aumentar o tamanho da fonte. Acho que estamos quase acertando. Por enquanto, vamos ver o que temos. Então eu vou aumentar os dados e eu vou pré-visualizar as alterações. Incrível, então agora está começando a tomar forma. Deixe-me copiar este texto. E vou adicionar uma nova hashtag. E desta vez vai ser por cima disso. E eu vou colar essa pequena fonte aqui. E verei que são fontes menores. Então, primeiro de tudo, é um H2. E queremos ter certeza de que é preto. Diz “copie estes pretos”. Selecione isso. Clique na cor sob o estilo, copie e, em seguida, selecione essas fontes menores aqui. Clique em Cor. Cole o que você acabou de copiar o. Há uma ligeira diferença. E então precisamos fazer essas fontes menores. E acho que é Montserrat também. Sim. Então vamos em frente e dizer monstera sob texto, tipografia, Montserrat. E, claro, vamos torná-lo desse tamanho. Atualize isso. 11. Adição de botões de herói: Em seguida, vamos criar esses dois botões aqui, aplicar ao drive, inscrever-se no drive. Então o que precisamos fazer é clicar nesse menu novamente. Este é o menu clique quando você deseja adicionar qualquer elemento. Então precisamos de uma interseção dupla e uma seção interna habita dentro outra seção e você pode adicionar várias colunas dentro dela. Então, porque precisamos de dois botões aqui, só precisamos de duas colunas. Vou apagar isso e aquilo. E agora que temos essas duas colunas, eu vou arrastar um botão elementos lá dentro. E enquanto ainda está selecionado, é hora de estilizá-lo. Então eu acho que tem essa cor roxa. Portanto, enquanto ainda estiver selecionado, vá para Estilo. Agora, antes de ir para o estilo, Vamos antes de tudo mudar os textos aplicados para dirigir. Então, sob o botão Conteúdo aplicado para secar. Agora podemos entrar na aba de estilo. E sob a topografia. Em primeiro lugar, podemos mudar o tipo para Montserrat. E precisamos adicionar, notar que os botões bem aqui, como estes canto redondo. Então esse é o raio da fronteira. E porque isto está ligado, qualquer figura que entrarmos aqui será aplicada a estes outros. Então, digamos que 50 dá esse efeito de canto arredondado. E então, para a cor, é claro, precisamos torná-la de cor roxa. Obrigado. Era, vamos ver, um roxo brilhante. Tudo bem, então seja um pouco sombrio. Anel de fronteira. Sim, na fronteira azul. Clique em qualquer lugar dentro daqui para chegar a esse menu. Agora que temos este botão aqui, podemos continuar e duplicá-lo. Em seguida, arraste a cópia para esta outra coluna e aproxime-as. Agora precisamos estilizar isso de forma diferente. Sem cor de preenchimento, apenas um contorno. Então, com isso selecionado, vá dentro do tipo. Então, para a cor, vamos mudar para branco. E você vai notar que desapareceu. Mas isso é porque ele não tem uma fronteira. E se adicionarmos uma borda sólida e dar-lhe uma largura de um e colorido que falta borda. O botão agora está visível. E vamos mudar a cor do texto para preto. Atualize isso. Então este botão está mudando para acinzentado ao passar o mouse. Para alcançar os mesmos resultados, precisamos entrar aqui sob estilo de botão, tipo de fundo, sob cor. Mude isso para um cinza. Cinza claro. Sim, acho que isso é bom. Actualizar. E vamos pré-visualizar as mudanças. Certo, então note que aqui em cima, há algum espaçamento. Mas na nossa página não temos o espaçamento, então vamos trabalhar nisso. E isso é tudo sobre margem. Então vamos adicionar alguma margem para o topo das colunas. Então, clique na coluna e selecionado. Vá para Avançado, desvincule-o e adicione uma margem superior. É só brincar com ele e ver qual deles se encaixa, qual parece melhor. Vamos atualizar isso. Vamos rever as mudanças. Então, pelo menos, temos alguma margem no topo. A imagem parece estar corretamente, corretamente posicionada. Então, a próxima coisa que queremos fazer é adicionar as duas imagens e fazê-las se sobrepor assim. 12. Adição de imagens de heróis: Vamos entrar aqui. Clique na primeira imagem e, claro, isso mudará para as configurações da imagem. Clique nisso. E eu vou para dentro da minha pasta. Você encontrará uma pasta de imagens de seção de heróis. Então podemos pegar todas essas imagens e jogá-las lá dentro. Vou voltar e pegar esses outros que não temos que voltar lá toda vez. Então, vamos voltar. Eu também vou obter essas imagens deslizantes, dizer aberto. Então, agora que temos todas essas imagens, vamos pegar isso e inserir mídia, atualizar ou montar. Vamos passar para a segunda imagem. Vamos escolher esse. Atualize isso. E vamos rever as mudanças. Então lá temos todo o conteúdo que precisamos na seção de heróis. 13. Margem e preenchimento de botões: Então vamos aproximar esses botões um pouco mais. Vamos reduzir essa lacuna. Mas antes de tudo, o que eu quero fazer é selecionar esta coluna, ir para Avançado, e remover todas essas margens padrão e preenchimento. O mesmo caso se aplica a isso. Selecione essa coluna avançada. Remova todos esses padrões. Então, puxe-os mais perto assim. Em seguida, diga Atualizar. Eu gosto de onde eles estão agora, mas agora precisamos empurrá-los um pouco para baixo porque esta distância é muito pequena. Então vamos pegar toda a interseção avançada, remover este link e, em seguida, adicionar, talvez, digamos uma atualização 40. Estes botões parecem ter algum bom preenchimento, superior, inferior e laterais. O nosso parecia ser um pouco mais curto em altura. Então vamos adicionar um pouco de preenchimento na parte superior e inferior. Vou selecionar um desses botões. Vou ao estofamento e digo “estagiário”. O mesmo caso se aplica a este outro. Clique em Atualizar. Tudo bem? Ok, então a próxima coisa que queremos fazer é fazer essas duas imagens se sobreporem aqui. 14. Estilizando as imagens de herói: Então vou selecionar a primeira imagem. Vá para Avançado, e vamos brincar com a margem e o preenchimento. Então vamos remover esses links. E então para a margem, aumente a margem para palavras como essa. Tudo bem, vamos passar para a segunda imagem. Avançado. Vamos reduzir a margem superior. Vamos dar um negativo 100, negativo 150. E então vamos reduzir a margem esquerda. E vamos aumentar a margem certa. Vamos dar talvez um 90. E vamos atualizar isso olhando para as mudanças. Incrível. Acho que embora não sejamos perfeitos neste momento, vamos a algum lugar. Nós fizemos. Por isso, neste momento, estou satisfeito com a nossa secção de heróis. Até agora. Em seguida, queremos passar para a área do corpo, que é composta por um par de seções, todas com número diferente de colunas e linhas. Então. 15. A seção principal do corpo: Então, para a seção do corpo, precisamos ter uma coluna dupla novamente. Então podemos duplicar isso clicando nisso porque ele já tem duas colunas, ou podemos criar uma coluna dupla novamente. Então vamos criar uma coluna dupla. E você vai notar que há alguma margem aqui, espaçamento entre as duas seções. Então vamos fazer o mesmo. Vamos adicionar alguma margem, no topo da seção. Então clique com o botão direito Editar seção Então, vamos aqui. Em vasto. Remova o link na margem. E vamos dar a isso uma margem, margem superior de 50. Talvez digamos 80. 16. Adição de uma máscara de imagem: Vamos adicionar uma imagem aqui. Largue isso aí. E, claro, vamos trazer uma imagem, talvez esse cara, inserir mídia. E agora o que precisamos fazer é enquanto a imagem ainda está selecionada, ir para Avançado, rolar para baixo e você verá a máscara. Clique nessa máscara e diga sobre. E você será apresentado com essas configurações. Então, neste momento, ele está definido para circular. Vamos experimentar os outros. Esboço de flores. Nós não temos essa forma aqui nesta lista, mas você sempre pode fazer upload seu próprio SVG informal ou você pode fazer upload de uma imagem que tenha essa forma. Mas os arquivos SVG geralmente são considerados inseguros. Acho que vou continuar e trabalhar com sketch por enquanto. Atualize isso. E podemos ir em frente e adicionar este bloco de texto com estes dois botões. Vamos copiar isso e colocá-lo aqui. Vou clicar em “Plus “, e isso é um título. Vou colar isso aí. E lembre-se que criamos algo semelhante a isso Aqui está. Então eu vou clicar nisso, clique com o botão direito do mouse, Copiar. Clique nesse botão direito do mouse. E eu não vou colar, ultrapassou o seu estilo para que eu não tenha que tentar descobrir o que eu fiz para fazer o outro olhar como ele parece. Então lá vamos nós. Em seguida, queremos agarrar é isso aqui. É um sub-cabeçalho, claro. Então podemos duplicar isso, mouse sobre eles e clicar nisso, clicar dentro. Eles vêm aqui e colam aquele texto ali. E enquanto ele ainda está selecionado, vá dentro estilos, tipografia, que é aumentar o tamanho. Acho que gosto assim. E para cima de dados. 17. Adição de texto corporal: A próxima coisa que queremos fazer é pegar um pouco desse texto de novo. Clique nesse botão ali para adicionar um elemento. E o elemento que estamos adicionando esses textos. Clique aqui dentro, realce tudo e cola-o lá dentro. Agora, se você notar que você colou lá e o estilo do texto parece engraçado como em talvez a fonte é grande. Certifique-se de selecionar tudo aqui. Clique neste botão de alternância e limpe a formatação para que, caso o imposto venha com qualquer pré-formatação, você se livre dessa formatação para que você possa fazer sua própria formatação. 18. Lista de recursos personalizados: Então aqui temos uma lista e a lista tem ícones. Então, como podemos conseguir isso no Elementor? Agora, existem diferentes maneiras de adicionar isso, mas a maneira que funcionará nesse cenário é adicionando uma interseção. Nesse cruzamento será dividido em dois. Então vamos ter uma seção interna que tem um ícone e um título. E, em seguida, abaixo do título, teremos o texto. Então, clique no ícone de sinal de adição. Então vamos arrastar um ícone lá e clicar lá. Podemos pegar com o rumo aqui ou podemos apenas duplicar isso e colocá-lo nos ganhos confiáveis. Vamos colar isso aí. E agora para os textos, podemos apenas duplicar isso e arrastar essa duplicata no que é claro que agora temos que mudar isso. Então, enquanto isso é destacado, realce tudo lá dentro e cole isso lá dentro. Esse espaçamento é demais, então precisamos reduzi-lo para corresponder ao que temos aqui. Vamos selecionar este texto avançado, remover este link e este link. Então, para a margem superior, vamos reduzir a margem superior até esse ponto. Talvez possa ir mais longe, se quiser. E então a próxima coisa que queremos fazer é reduzir o tamanho dessa fonte e enquanto ela estiver selecionada, vá para o tamanho do estilo. Vamos deixar às 20. E então vamos arrastar que todos os pesos que apontam. Vamos reduzir ainda mais a distância. Pode reduzi-lo assim. Então notei que temos muita margem abaixo dos textos. Então vou selecionar o texto e reduzir a margem inferior até esse ponto. Agora, tudo o que precisamos fazer agora é duplicar isso e duplicá-lo novamente. E temos uma lista. Então podemos ir em frente e copiar todos esses outros itens da lista que estão colados aqui. Vamos pegar esse texto aqui. Clique nesse texto, adicione-o aqui. Então vá para ser pago. Farei o mesmo, sabe, o exercício. Copiado que colocou lá dentro. E eu amo o dia das mudanças porque nós fizemos tantas mudanças e tê-las salvo. Então vamos visualizar o que temos até agora. Então, se começarmos a rolar, acho que está começando a tomar forma agora. Mas observe que a distância aqui é muito pequena. Precisamos aumentar a largura do, do espaçamento aqui para combinar com isso. E, ao mesmo tempo, também precisa mudar esses ícones que são muito pequenos para ser selecionado, mas vou tentar o meu melhor. Vou selecionar isso e vou para Conteúdo clicando lá. E eu posso escolher um ícone. Ganhos confiáveis, que são notas de banco. Então vou digitar dinheiro. Sim, acho que podemos trabalhar com isso. Ou isso. Também podemos dar-lhe cor preta. E em vez de fazer o mesmo para o resto, vou copiar o que temos aqui. E vou destacar estes. Vou colar o estilo e ele vai mudar para isso sobre a pasta selecionada. E eu vou mudar isso para um ícone diferente. Selecione qualquer ícone aleatório. Porque agora o que precisamos entender é como adicionar e editar o ícone não é realmente o que ícone é o. Vamos fazer isso. Um carro, porque isso é tudo sobre carros e maneira. Atualize isso. E a próxima coisa que queremos trabalhar agora são esses dois botões. 19. Botões e links avançados: Vamos em frente e adicionar uma seção dupla logo abaixo disso. E aqui podemos adicionar nossos botões. Então vamos pegar um botão. Ponha aí dentro. Vou selecionar este botão. Copiar, selecionar este, colar estilo e mudar para essa cor. E então eu vou duplicar isso. Agora deixe-me duplicar isso e arrastá-lo até aqui. É por isso que este é um construtor de arrastar e soltar. Então, agora que temos aqui, precisamos estilizar isso me leva ao fundo e tudo mais. Então, primeiro de tudo, vamos mudar a cor da fonte para preto. Portanto, o estilo interno, enquanto o botão ainda está selecionado, irá para a próxima cor. Mudar. É essa falta. Então, para o fundo. Queremos selecionar o fundo e porque é verde agora, queremos vir e dizer que precisa ser transparente, completamente transparente para que seja branco assim. Outra coisa que queremos fazer agora é mudar o texto do botão. Tão inclinado para dirigir como o Dr. Pay funciona. Vamos clicar nisso. Candidatou-se à Dra. Lisa. Outros dizem que é conteúdo. Como funciona seco. Agora você vai notar que eles não estão alinhados. Deixe-me atualizar isso nas alterações de pré-visualização. Se eu rolar para baixo, vamos nos livrar deles. Não se preocupe. Há muita distância entre os dois botões e este parece estar desalinhado. Então, o que precisamos fazer é voltar para nossa página, corretamente BCE, e remover a margem e o preenchimento padrão e fazer o mesmo para isso. Remova os estofos padrão e tudo isso. Então vamos aproximar estes dois e precisamos empurrar este para baixo um pouco. Então vamos aumentar o estofamento, superior acolchoado assim. E vamos em frente e adicionar esta seta no final. Portanto, enquanto ele ainda estiver selecionado, vá para a Biblioteca de ícones de conteúdo. E vamos digitar a seta. Vamos usar este aqui. Inserir. E digamos que queremos depois. Então, logo abaixo do ícone. Depois de uma atualização, vamos pré-visualizar as alterações. Vamos nos livrar desse botão antes de tudo, antes que esqueçamos a rolagem para baixo. E vamos aumentar essa margem máxima para que esses botões tenham mais espaço, mais espaço. Então, vamos clicar nisso. Vá para Avançado, remova isso e, em seguida, margem superior. Vamos dar-lhe uma atualização 35. E antes que eu esqueça, vamos aumentar o espaçamento entre esta imagem e este bloco de texto. 20. Ajustando margens de seção: Então eu vou clicar na seção eo layout e ir para onde ele diz lacuna colunas. Então eu acho que eu vou apenas escolher ampla e atualizar isso e ver como ele se parece. Acho que até agora gosto, mas poderíamos fazer muito mais. Poderíamos fazer mais. Então, digamos mais amplo. Tudo bem, então, até agora tudo bem. Espera, olha como é este botão. Acho que reduzimos muito o espaçamento. Vamos reduzir a margem, acho que é a orelha esquerda, a margem esquerda. E atualize isso. Vamos pré-visualizar as alterações. Eu gosto até agora. Então, em seguida, vamos passar para esta seção de depoimentos. E você notará que há mais depoimentos ocultos no lado direito. E para vê-los, você tem que clicar e rolar. 21. Adição de depoimentos de clientes: Então, para criar esses depoimentos, vamos precisar instalar outro plugin, e eu vou mostrar-lhe algo rapidamente aqui. Então vamos em frente e digitar depoimentos. E vocês notarão que temos que depor elementos aqui, mas estes não são os que queremos trabalhar. Então vamos voltar para o painel e eu vou entrar plug-ins e adicionar um novo plugin que tem uma opção que nos dará resultados que são semelhantes a estes. Voltando aqui, digite elementos, elementos, crianças. Vamos instalar elementos, elementos de criança ou átomos. Tudo bem, então vamos ativá-lo. Incrível. Então, agora que está instalado, vou passar para o nosso editor e vou atualizar esta página para que possamos aparecer aqui. Então, clique no sinal de mais aqui e digite o depoimento. E vamos pegar este depoimento aqui. E observe que temos essas opções diferentes para como queremos exibi-las. E pode ir em frente e escolher qualquer, eu acho que eu vou escolher talvez eu vou escolher este. Então, o que temos atualmente é um testemunho por slide, e queremos que eles sejam três de cada vez. Então vamos recolher a guia Layout e entrar no depoimento. E a primeira coisa que queremos fazer é duplicar isso para que tenhamos luz na página esquerda 1, 2, 3, 4. E então vamos recolher a guia de depoimento e abrir Configurações. Em Configurações, temos slides para mostrar, digamos três, de modo que são três exibidos de cada vez na tela. E vamos atualizar isso. Vamos pré-visualizar as alterações. Tudo bem, então vamos agora preencher cada testemunho com algum conteúdo. E eu vou em frente e rápido e pegar esses depoimentos daqui. Então, desmoronando as configurações, eu vou entrar no depoimento. Vou para o local de depoimento um. Também nome aqui, Mary Mary drivings folha desde 2019. Então Mary Mary dirigindo já que está correndo 17. E vamos colar o depoimento dele aqui. Certo? Já está começando a tomar forma. Como você pode ver. Vamos pegar o segundo depoimento do Harold. Vamos derrubar Mary e abrir o sistema em sua ferramenta. É Harold dirigindo conosco desde 2009, 2018. Vamos colar aquele depoimento ali. Vamos pegar aquele emparelhado. Colapso Harold. Certo? Você quer dizer que Alex diz 16. Vamos colá-lo depoimento bem ali. E então vamos em frente e pegar o último depoimento aqui. Desmoronou. Alex, expanda isso. Digamos que Anthony Driving desde 2020, desde 2020,lutando bem Sperling, certo. Tudo bem, então vamos colá-lo bem ali. Vamos pré-visualizar as alterações. Deslocando todo o caminho até o fundo. E vamos adicionar as imagens aqui. Então, clicando em qualquer lugar dentro da seção, eu vou direto para Anthony antes de tudo. E vamos entrar no avatar do cliente. E eu já tinha carregado essas imagens aqui. Lembre-se que forneci uma pasta zip que você pode encontrar abaixo na descrição. Todas essas imagens estão lá. Eu realmente usei essa pessoa não existe..com para obter estes imediata. Então, estas não são pessoas reais. Então eu escolho esse cara. Inserir mídia, atualizar. Vou derrubar o Anthony, ir ter com o Alex. O avatar do cliente é chamado para baixo. Apanha este tipo. Ele parece um L, é Harold. Vamos em frente e pegar o avatar do cliente. Vamos pegar isso. E finalmente, vamos adicionar a foto de Mary naquele atualizado. Incrível. Mas agora esses depoimentos aqui não têm sombra, mas o nosso tem uma sombra, então precisamos nos livrar disso. E vamos entrar no estilo e procurar a opção para remover a sombra da caixa. E, neste caso, é sob sombra de caixa de layout de estilo. Então note que quando clicamos nele, mudou um pouco. E o que queremos fazer é clicar naquela caixa minúscula e torná-la transparente completamente. Então atualize isso. Vamos pré-visualizar as alterações. Certo? Então vamos rolar para baixo e ver os resultados que temos. E você vai notar que temos pessoal extra aqui que não está aqui, como essas estrelas de audiência e essas aspas. E isso porque esses caras que criaram Lyft não usaram elementary para criar esta página. Talvez esses caras tenham codificado tudo aqui, mas estamos usando um construtor de arrastar e soltar. E o construtor arrastar e soltar vem com certos elementos por padrão, mas podemos removê-los. Então vamos nos livrar das citações. Mas se quiser mantê-los lá, pode mantê-los lá. Se você quiser removê-los, vá em frente e remova-os. Então vamos procurar, eu vou rolar para cima layout recolhido. Voltar ao conteúdo. Vamos ver dentro do depoimento habilitar classificação este capaz que. Então agora isso se foi. E habilite aspas. Estes Abel também. Você pode ir em frente e brincar com as configurações mais adiante para ver o que mais você pode ser capaz de fazer com os depoimentos. Mas é claro, como você viu, há muitas opções aqui. Então vá em frente e experimente todos esses outros layouts e veja o que você pode conseguir com seus resultados. O ponto aqui é entender como usar as ferramentas elementares e recursos para criar páginas web incríveis. E, claro, é muito fácil ver que não fomos capazes de criar essas flechas aqui. Com o qual percorrer os depoimentos. E é claro que é porque eles usam diferentes tecnologias para criar sua página. Estamos usando um construtor de arrastar e soltar que tem seus próprios poderes e deficiências. Então o nosso parece assim. E tem esse aspecto. Então, em seguida, vamos trabalhar nesta seção azulada bem aqui, todo o caminho até aqui antes de criarmos este formulário. 22. Seção avançado: Olhando para esta seção aqui, você vai notar que é uma seção azul e ele tem uma mistura de diferentes seções de coluna dentro dela. Como você pode ver, esta é uma coluna dupla. Mas quando você vem aqui, esta é uma única coluna porque ela corre todo o caminho até o fim. Então o que precisamos fazer é vir aqui, criar uma única seção de coluna. Vamos primeiro dar-lhe esta cor de fundo e eu já tinha verificado. É se você entrar, editar a seção, clicar com o botão direito e entrar lá, ir para estilo, fundo, cor. A cor é hash, PB, VB, Ff, ou passeio. E dentro disso, precisamos adicionar um cruzamento de coluna dupla. Então venha aqui e diga para adicionar um cruzamento, que agora é uma coluna dupla. E abaixo, podemos adicionar uma única coluna. Vamos em frente e apague isso. Adicione outro cruzamento. Mas desta vez é claro, vamos remover esta única coluna, mas vamos chegar a isso. Então, o que eu quero que nos concentremos é essa parte de cima para começar. Então vamos adicionar esta imagem nesta coluna. E, em seguida, aqui vai precisar adicionar algum texto. Então vamos copiar isso, certo com Lyft. E podemos simplesmente ir em frente e duplicar isso porque nos permitirá ter legendas uniformes. Eu carrego isso e deixo lá dentro. Vou pegar isso. E eu também vou rolar para baixo aqui. Vamos duplicar isso e arrastar isso para lá. Vamos arrastá-lo até aqui. Vamos deixar isso lá, pegar isso e colocar acima disso. Clique dentro disso. E vamos colar texto. Só pegamos, eles só estão colocando minhas mãos nele. E é claro que você pode adivinhar o que vamos fazer em seguida é graduar, duplicar estes e é assim que elementar torna mais fácil para você trabalhar. Você não precisa continuar adicionando novos elementos. Você já pode usar os elementos que você já estilizou. Então vamos colar esse texto ali. Em seguida, vamos criar este botão. E podemos fazer isso duplicando isso. E então vamos arrastá-lo para dentro desta área. O que esse botão diz? Obtenha um direito confiável em minutos. Então vamos mudar isso. Sexo. O botão. Enquanto o botão ainda estiver ativo, vamos entrar no estilo. E, portanto, a cor. É claro que precisa ser largo. Mas o tipo de fronteira precisa agora mudar para Sólido e vamos dar-lhe um. E a cor da borda deve ser preto ou branco, ou cor é aqui? É aquele roxo. Então vamos dar uma cor roxa. Aquela cor roxa brilhante como essa. E você vai notar que tem uma sombra. Então vamos adicionar uma sombra aqui. Mas então sombra de caixa. E então vamos reduzir a opacidade desta sombra de caixa para que você facilite a gritar. Só quero torná-lo um pouco sutil. Em seguida, subindo para o botão aqui, cor do texto, Vamos mudá-lo para, eu acho que era preto. Então vamos atualizá-lo. E notei que tem um pequeno ícone bem aqui. Então vamos adicionar um ícone. Vamos voltar ao conteúdo. Enquanto ainda está selecionado. Clique nesse ícone minúsculo ali. O maduro pode encontrar o carro certo, o carro. Vamos pegar isso, inserir isso. Próximo. Estes são mais dois botões, e eles são muito estilizados como este botão aqui. Então vamos duplicar isso. Arraste-o e solte-o logo abaixo disto. Vamos duplicá-lo novamente porque existem dois botões. Agende sua escrita avançada. Saiba que você está certo. Saiba que seu motorista está usando uma máscara. Então, com isso ativo a massa. E o segundo diz, agende a tua viagem com antecedência. Então, vamos clicar nisso com antecedência. Vamos actualizar a agenda. Certo, tem 1 r. Vamos nos certificar que esses ícones vêm antes do texto. Então antes, e para este antes também. Antes. Vamos atualizar isso. Próximo. Vamos adicionar uma imagem do telefone. Clique nessa imagem. Então eu vou clicar nisso. Pegue este telefone aqui. Agora insira mídia. Atualize isso. Próximo. Vamos criar este botão. Então vamos continuar e duplicar isso. E colocá-lo aqui, arrastá-lo e soltá-lo na atualização que e eles são o que ele diz? Pegue uma carona. Então, vou dizer a nossa boleia. Certo. Vamos adicionar este logotipo. Mas agora este logotipo, embora pareça estar diretamente abaixo deste botão, eles não estão juntos, eles não estão em um grupo. E você notará que quando estiver fazendo isso em telas móveis, porque vamos pressionar Control Shift I por um momento. E se eu tornar esta tela mais estreita e rolar para baixo, você notará que a imagem vem antes desse logotipo e o botão vem antes da imagem. Então este logotipo facilita com estes textos e eles vêm atrás desta imagem. Então isso significa que devemos adicionar uma nova seção logo abaixo desta seção de coluna dupla. E lembre-se que nós tínhamos adicionado uma seção dupla, outra coluna dupla. Podemos usar isso. Então vamos adicionar uma imagem aqui. Vou clicar nisso. Deveríamos ter esse logotipo aqui. Vamos em frente e usar esse. Insira mídia, e vamos colocá-lo no lado esquerdo. Próximo. Vamos pegar esse texto aqui. Copie isso. E eu vou clicar nisso. Arraste um editor de texto aqui. Clicando ali e cole esse texto ali. E isto deve ser unido aqui. Então, junte-se. E então vamos atualizá-lo. Próximo. Vamos dar uma olhada no que isso parece em telas móveis. Só por um momento. Então, se entrarmos em colapso esse pergaminho para baixo. Sim, então ele vai diretamente abaixo disso, abaixo disso. Então esta é uma nova seção. Vamos em frente e criar uma nova seção. Então eu vou duplicar isso. E agora devemos ter uma nova seção. Então eu vou me livrar de todo esse logotipo. O que temos aqui? Temos isso, mordidas direitas podem virar bananas. E esse sou eu, H2. Então eu vou clicar nesse ícone ali e arrastar um cabeçalho e colá-lo aqui. Vamos mudar a cor para preto. Claro, você precisa ser consistente ao criar essas páginas. Eu só estou colocando qualquer preto, mas se você estiver usando preto, certifique-se de que você está usando consistentemente o mesmo preto. Se você estiver usando uma cor específica, roxo, verifique se o botão é roxo. Cada botão que é roxo usando o mesmo roxo, não diferencia um roxo. Vamos atualizar isso. E esta fonte parece ser Roboto, as fontes padrão. Então vamos mudar para Montserrat para ter consistência. É nisso que estamos tentando insistir. Em Montserrat. Quero dizer, podemos dar um peso de talvez 700. Sim, as coisas já passaram 100 anos. Está bem. Vamos pegar isso e vamos clicar lá e substituí-los por esse novo texto. Mas você notará que este texto é um pouco menor do que este. Então vamos torná-lo um pouco menor do que os outros. Então solo, talvez. Sim, vamos atualizar isso. Esta frase parece estar em uma linha. Então vamos expandir isso todo o caminho para talvez algum lugar lá. Atualize isso. Então agora eu vou continuar e duplicar isso mais uma vez porque lembre-se, todo esse conteúdo que estamos criando no momento está na seção azul. Então é aqui que vamos adicionar nosso controle deslizante de imagem. Vamos remover isso. 23. 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. 24. carousel de imagem: Então agora temos esta única coluna em uma seção. A próxima coisa que queremos fazer é digitar logotipo, logotipo do cliente por QI kids. Vamos arrastá-lo no final. Aqui podemos adicionar todas as imagens que queremos para cada slide aqui. Então eu vou entrar no Título 1 e vou clicar na área da imagem. Estas são as imagens que serão usadas. Então eu vou clicar no primeiro, o inserido lá. Clique no segundo. Vamos colocá-lo lá dentro. E eu posso avançar aqui para que eu possa adicionar o resto. Vamos atualizá-los. E reparem que eles têm sombras de caixa e nós não queremos essas caixas de sombra, então teremos que nos livrar delas. Então pulando dentro estilo, Vamos para Logo e você vai notar que temos este raio de fronteira. Vamos dar-lhe um 10 ou escrever atualizar isso. Vamos remover a sombra da caixa. Então, clicando naquela opção de sombra de caixa ali, e então aquele botão de opacidade ali, podemos reduzir a visibilidade da caixa de sombra e atualizar isso. À medida que nos movemos. Espero que você possa ver alguns dos pontos fortes e deficiências de um construtor de arrastar e soltar como Elementor. Mas há muitas outras ferramentas que você pode combinar com Elementor para obter melhores resultados. E lembre-se, estamos usando a versão gratuita do Elementor. A versão paga tem muito mais recursos e ferramentas que podem ajudá-lo a alcançar resultados muito melhores. E, novamente, é tudo sobre a sua criatividade. Vamos criar essa região de disponibilidade. Então isso é x, se parece muito com isso. Então eu vou continuar e duplicar isso no caso de você ter perdido minhas instruções sobre como trazer isso à tona. Essas duas opções, quando você passar o mouse, como habilitar isso. Você vai dentro deste programa um novo usuário preferências e certifique-se de editar alças está definido como sim. Então vamos sair disso e arrastá-lo até aqui. Agora é claro que eu vou substituí-lo com que leva você acabou de copiar na atualização do outro lado. Então, a seguir, queremos criar esta única linha na linha quatro. 25. Adição de um formulário: Então a próxima coisa que queremos fazer é criar este formulário. E como podem ver, temos duas colunas. Uma coluna que está segurando o texto, e esta coluna que está segurando o formulário. Então, em primeiro lugar, é o lado nervoso, o nosso painel de instrumentos. Claro, como eu mencionei, existem muitos plug-ins formulário lá fora, mas os que vamos usar, o que vamos usar para esta classe é o formulador. Então vamos rolar para baixo e procurar formulador e clicar com o botão direito. Então você será levado para esta janela bem aqui. E você verá essa opção aqui. Criar formulário pode criar pesquisas, mas é claro que esta classe não está acima criação de formulário seria apenas ir em frente e fazer o que queremos. E podemos escolher qualquer predefinição aqui. Então eu vou com o registro ou podemos começar com um espaço em branco. Permite-nos escolher em branco e continuar. Vamos chamar de registro. E então vamos criá-lo ou cavalgar. Então, aqui está. Podemos ir em frente e começar a adicionar campos. Estes campos. Então, vou clicar em Inserir e você pode adicionar qualquer campo que desejar. Então vamos escolher dois campos, como e-mail e telefone. Então vamos inserir campos. E você vai notar que eles estão empilhados indo para baixo. Mas o que queremos alcançar é uma forma de linha única. Então, voltando aqui, vamos arrastar isso e soltá-lo assim que você ver aquela linha azul bem aqui. Largue isso aí, e então vamos publicar. Serão apresentados com estes códigos curtos. Basta clicar nesse pequeno ícone para copiar o código curto. Você vai receber essa pequena mensagem. Volte para a nossa página aqui. E agora, enquanto ainda temos esse código curto copiado em nossa área de transferência, bem, primeiro de tudo, crie uma seção de coluna dupla. E neste lado da seção de coluna dupla, vou adicionar um elemento de código curto. Então vamos arrastá-lo no final aqui, agora podemos colar esse código curto que acabamos de copiar. E por favor, observe este número porque nós o usaremos em breve quando você estiver aprendendo a adicionar algum CSS personalizado, nós aplicaremos isso. Vamos crescer para baixo até essa seção. Certo? Observe que você pode, por enquanto você não pode ver nada, porque primeiro de tudo, vamos dar este fundo azul e adicionar esses textos. Então, agarrando esta seção, Editar estilo de seção é entrar aqui. E vamos dar-lhe essa cor de fundo. Obrigado estava em algum lugar. Vamos com esses dados. Por isso, deste lado, queremos ter estes textos. Então eu vou pegar isso. Então eu vou entrar aqui e selecionar Cabeçalho. Cole esse texto ali. E digamos que esta cor é branca. Texto. Branco. Claro, vamos fazer o tipo são gráficos Montserrat, já é Montserrat, então estamos prontos para ir. Tudo bem, então, se agora visualizarmos as mudanças, role para baixo e veja o que temos. Então isso é o que temos atualmente, mas o botão está abaixo dos campos de entrada. Então, como é que o trazemos para cá? Agora, ele chega a um ponto onde quando você está trabalhando com WordPress e WordPress plugins, todos esses plug-ins são incapazes de ajudá-lo a alcançar certas aparências que você deseja em sua página. Então, isso exige CSS personalizado. 26. Estilos com CSs personalizado: Enquanto ainda estamos nesta página de visualização, não a página de edição, vai dentro personalizar e vamos adicionar alguns CSS personalizado. Wordpress fornece-lhe esta seção aqui. Se deslocarmos para baixo, você encontrará CSS adicional. Então nosso objetivo agora é trazer este botão para o lado. E o nosso plugin não tem isso por padrão. Então, como fazemos isso? Nós vamos entrar aqui no CSS adicional e eu vou apenas mudar de guias rapidamente. Primeiro de tudo, eu já tinha preparado algum trecho de código que vamos adicionar no para que esses trechos de código estarão na pasta zip na descrição abaixo, então certifique-se de pegá-los e adicioná-los será muito fácil. Então pegue o primeiro, então pegue o primeiro trecho de código para fora para sua copiá-lo. Vamos entrar na nossa página e colá-la bem ali. E quando você colar, veja o que acontece aqui. Então agora o estilo mudou. Primeiro de tudo, vamos publicar isso. Lembre-se, nós usamos para ministro para criar este formulário. E usamos um código curto. Deixe-me clicar nisso. Usamos esses códigos curtos que foram fornecidos pelo formulador. E este formulário tem este número aqui, que é o número do formulário. Se eu pudesse voltar para o ministro em formulários de camarilha. Você vai notar que temos o formulário bem aqui, formulário de inscrição. E se você clicar neste COG com aqui, nós temos cópia código curto. É o mesmo código curto que temos aqui, e tem este número 350 até agora. Nossa página aqui está desalinhada porque este 570 é o número do outro formulário que eu uso para criar esses trechos de código. Então precisamos substituir esses 570 pelo número do seu formulário, 352 em tudo agora está devidamente alinhado. Vamos publicar isso. Vamos voltar aqui. Clique em Rever. E agora isso é o que temos, mas queríamos levá-lo até o fim. Então, voltando para dentro do nosso formulário em qualquer forma, formulário de registro, clique, Editar. Então nós podemos mudar a aparência lá porque, como eu mencionei, este formulário não é editável com Elementor. É editável com o plug-in que o criou, que é formulado. Agora que abrimos o formulário de inscrição, vá para dentro da aparência e podemos fazer edições lá. Então, o que queremos fazer é primeiro ir para as cores e, em seguida, sob costume, vamos obter todas essas opções. Mas o que nos interessa é o botão Enviar. Então, clique nisso. E vamos mudar a cor de fundo para branco. Então eu vou apenas clicar que branco. E, em seguida, pairar, ou parece que tem aquele cinza? Então, no entanto, nós queríamos ter uma cor cinza e você pode escolher a partir daqui. E focando, queremos que ele tenha a mesma cor ótima e atualize isso. Então vamos voltar a esta página e dizer Aplicar. Deslocar-se para baixo. Certo? Então, vamos clicar em pré-visualização. Veja o que temos agora. Então, esses são os nossos botões até agora, precisamos mudar a cor do texto para preto. Então, para fazer isso, vamos voltar aqui e abaixo da cor de fundo temos a cor do texto. Vamos dar-lhe aquele cinza escuro que está perto do preto. E este preto agora está se aplicando ao estado de foco. Vamos certificar-se de que ele se aplica ao mouse e padrão porque aqui mesmo ele permanece preto em todos os estados. Então vou copiar esse código. E então eu vou ficar do lado do estado pairar, Clique que e colado lá dentro. E eu vou entrar no estado padrão, copiá-lo, e colá-lo lá dentro. Atualize o formulário ou à direita. Então, se voltarmos aqui e rolar para baixo, clique em aplicar. Então digamos apenas “Preview”. Desloque-se para baixo. E o botão agora deve ter essa cor quando nós, no entanto, é cinza e o texto permanece preto. Então agora é hora de dar-lhes aquele canto arredondado. Como fizemos com os outros botões. Formulador interno. Role para baixo, você encontrará uma seção CSS personalizada, habilite CSS personalizado. E aqui você pode adicionar mais CSS personalizado para estilizar especificamente o seu formulário. Aqui já temos seletores básicos para as diferentes partes. Não vai falar sobre o que são os seletores. Porque lembre-se, isso não é sobre CSS, é sobre entender que você pode fazer essas alterações, essas edições. Então vamos voltar para nossos trechos de código e vamos pegar esses dois trechos de código e voltar aqui e colá-los lá dentro. Então, dia de cima. Então, se atualizarmos isso, em seguida, visualizá-lo aqui mesmo. Vamos ver como os formulários parecem agora eles têm aquele canto arredondado e o botão aqui é invisível porque o fundo é branco. Mas vamos fechar isso. E vamos entrar aqui. Role para baixo, clique no formulário novamente e aplique. Então, se clicarmos em Visualizar agora, role para baixo. Nosso formulário agora tem este botão de canto arredondado e os cantos bem aqui, o raio da borda é 5, parece um pouco melhor. 27. seções de coluna dupla: Então, pulando para esta página aqui, vamos adicionar isso, vamos adicionar essa coluna. E agora nesta coluna aqui, o que precisamos é de segurança primeiro, como aparecer como um estranho. Lembre-se, no elementar você pode reciclar coisas. Então, por que não escolhemos estes primeiro, duplicamos isso. E então vamos arrastá-lo até aqui. Largue isso aí. Vamos duplicar este texto aqui também. E arrastá-lo até lá. E então vamos pegar o que é seu caminho. Ainda temos um pequeno texto ali. Então vamos duplicar isso. E vamos arrastá-lo para baixo. Vamos arrastá-lo para o local. Então, agora vamos pegar essa segurança primeiro. Ponha aí dentro. Vamos em frente e pegar isso. Como, como aparecer como um melhor estranho. Clique nisso e cole isso aí. Então vamos pegar isso também lá dentro e colá-lo lá dentro. E como você já pode imaginar, nós já criamos algo assim mais cedo, então não precisaremos recriá-lo. Então vamos aqui e pegá-lo de onde projetamos, onde aqui está. Então vamos duplicar isso e arrastá-lo para o nosso novo local. Vamos deixar isso aí. E agora a margem aqui parece ser demais. Então vamos reduzir a margem na seção de botões. Mas se deixarmos aos 15, digamos apenas cinco. E agora vamos apenas dizer 0. Então atualize isso. Deslocar-se para baixo ou para a direita. Então vamos adicionar essa imagem que deveria estar aqui. Clicando no elemento da imagem. Vamos pegar uma imagem agora. Imagens como agarrar. Vamos pegar essa senhora. Vamos pegar esse cara de novo. Vi-o bastante, mas não temos muitas imagens. Então atualize isso. Vamos pré-visualizar ou RI. Mas agora precisamos aumentar um pouco o espaçamento. Então vamos pegar esta seção, editar seção. E então, em primeiro lugar, remova esse link no preenchimento e vamos adicionar algum preenchimento superior de talvez 20. E isso parece ser o oposto disso. Então agora a imagem vem para este lado e o bloco de texto vai para o outro lado. Então o que precisamos fazer é duplicar isso e, em seguida, basta arrastar essas colunas bem de lado. E lá temos. E notei que não temos espaço suficiente aqui. Então vamos tornar o espaçamento aqui mais amplo. Então as colunas lacuna, vamos ver, mais largo. Atualize isso. Vamos fazer o mesmo para este layout. Colunas são mais largas. Mas vamos mudar essa imagem primeiro. Deixe-me usar isso para essa seção. Então, a seguir, vamos trabalhar nesta área. Mas antes disso, notei que o botão aqui, só há um botão aqui. Então vamos remover este extra. Na verdade, vamos remover essa coluna e deixar esse botão ali. E podemos mudar o que o texto diz. Saiba mais sobre o eixo da vacina. Clicando no próprio botão. Mais informações sobre as diretrizes da comunidade. Clique nessas diretrizes e acho que a música estava dizendo sobre aprender sobre segurança. Saiba mais sobre segurança. Atualize isso. E vamos pré-visualizar as mudanças. Desloque-se para baixo. Vamos fazer algo sobre este botão aqui. Parece um pouco espremido. Bem ali. Atualize isso. Então, a próxima coisa que queremos fazer agora, podemos ir trabalhar nessa área inferior. E esta é uma seção de coluna única de largura total. 28. Seção de coluna completa de largura completa: Então, vamos adicionar uma seção de coluna única de largura total. Agora, primeiro de tudo, você vê que este é um texto, mas esta é uma imagem porque é alguma selecionável. Então vamos adicionar uma imagem elementos lá. E então vamos clicar lá dentro. Eu vou escolher, eu vou escolher este logotipo que eu tinha criado para aquela área. E como você pode ver em tamanho, é muito pequeno, 123 pixels por 54 pixels. E é por isso que ele se encaixa bem ali. Se você escolher uma imagem grande, você vai preencher esta área e você não quer isso. Portanto, certifique-se de que a sua imagem tem o tamanho certo. Em seguida, vamos criar esses. Nós ajudamos você a mover o seu. Então eu vou em frente e pegar este texto aqui, duplicá-lo, e arrastar isso na cola aquilo lá dentro. E então vamos colocá-lo no meio. E, em seguida, para adicionar estes textos animados aqui, vamos precisar instalar outro plugin que adiciona mais funcionalidade ao elementor. E isso é chamado de complementos essenciais para elementar. 29. Adição de um texto animado de self: Então vamos voltar para dentro de nossos plugins de painel. Vamos ver se já o temos. Não, não temos. Então, vamos adicionar complementos essenciais para o Elementor. Mostrar. O mesmo show. E é o primeiro. Claro que sim. Vamos instalá-lo. Certo, então vamos ativar isso. Então este é um assistente de configuração. Basta ir em frente e clicar em Avançar. E o que nos interessa é o texto chique, por isso está verificado. Podemos ir em frente e clicar em Avançar. Não instale isso. Próximo. Acabar. Incrível. Com isso instalado agora temos complementos essenciais e podemos acessá-lo aqui. Então, primeiro de tudo, eu vou atualizar esta página quatro, nós seguimos em frente. Em seguida, vou atualizar a página para que as adições essenciais sejam carregadas. Tudo bem, então vamos rolar para baixo para baixo. E agora eu vou digitar texto e você vai notar que nós temos diferentes elementos de texto, mas o que precisamos é do texto chique. Então pegue isso e solte logo abaixo daquele x bem ali. Então, estes elemento de texto extravagante aqui tem o texto prefixo e o texto do sufixo. Então, vamos remover o prefixo e o sufixo. Agora ficamos com esta área animada nesta é uma lista de todas as diferentes palavras ou frases que você deseja animar. Então, no nosso caso aqui temos clientes, ideias, entrevistados, visitantes. Vamos com esses por enquanto. Somos ideias em seus alunos, pacientes. Basicamente estou apenas duplicando e adicionando um extra. Vamos adicionar mais um. Empregados, negócios, negócios e funcionários. Então vamos atualizar isso. E nós não queremos que ele esteja digitando, querendo desaparecer para baixo. Então vamos para configurações de texto chiques. E agora nessas configurações, vá para o tipo de animação, selecione o que quiser. Então, neste caso, estamos dizendo desvanecer-se. E assim ele sentiu que estavam procurando por nós podemos mudar o tempo de atraso. Quanto tempo você quer que ele fique bem ali antes de passar para a próxima palavra ou frase. Isso parece estar se movendo rápido e tão rápido. Isto parece ter uma transição lenta. Em seguida, vamos criar isso. Copie isso. Vamos duplicar isso. Em seguida, arraste-o para baixo do texto. Então eu vou colá-lo lá dentro. Vou ao estilo e alinhá-lo no centro. Atualize isso. Em seguida, precisamos adicionar este botão. Você já está adivinhado. Só precisamos entrar, pegar isso aqui. Mas não estamos pegando a seção interna, estamos pegando o botão em si. Duplicar isso. Largue isso aqui. E vamos colocar no meio. Tem muita margem aqui abaixo disso. Então, enquanto este texto é selecionado, eu vou para Avançado, quebrar isso e aquilo, e então eu vou reduzir a margem inferior. Acho que é o lugar certo. E eu vou selecionar este texto chique e fazer o mesmo. Então vamos quebrar isso e vamos reduzir a margem máxima. Vamos reduzir, vamos reduzir a margem inferior também. Naquele ano, o botão está bonito. Saiba mais sobre o negócio da folha. É selecionado. Atualize isso. Próximo. Vamos criar este logotipo. Vamos criar esta área de logotipo. 30. Adição de um logótipo cliente: Então vamos em frente e agarrar. Vamos duplicar esta seção aqui. E vamos remover tudo. Exclua todos esses outros elementos. Vamos remover esse botão. E, em seguida, vou adicionar o logotipo do cliente de log drop dentro do. Agora, lembre-se que já tínhamos usado os elementos do logotipo do cliente aqui em cima. Vou clicar em qualquer lugar aqui dentro. E eu vou copiar. E eu vou rolar para baixo e clicar em qualquer lugar aqui dentro. E eu vou colar o estilo. Veja, todos os estilos aplicados sobre isso agora são aplicados no outro. E tudo o que precisamos fazer é substituir as imagens por nossas imagens. E a soma estará usando esses logotipos aqui embaixo. Então eu vou pegar isso, derrubar aquela imagem de captura dois. Pegue a árvore do logotipo. Recolha que expande a imagem para recolher isso, expanda isso. Imagem 5. Recolher isso duplicado. Duplo seis. Duplicar isso. E, claro, você precisa substituir o nome. Você pode dar um nome. Ascensão. Então vamos duplicar mais uma vez e adicionar mais um logotipo. E vamos atualizá-lo. Certo, então vamos visualizar as mudanças. Vamos rolar para baixo e ver o que temos até agora. E, em seguida, observe que existem logotipos. Os logotipos parecem ser menores e precisamos fazer o nosso um pouco menor. Então vamos recolher as configurações locais. Vamos mostrar dois slides. Vamos fazer talvez seis. Vamos fazer sete. Sim. Então sete os torna um pouco menores porque o espaço é limitado. E vamos pré-visualizar as mudanças. Certo, acho que gosto disso, mas vamos reduzir a margem. Margem máxima aqui. É um pouco demais na nossa página de destino. Então eu vou clicar no logotipo do cliente elementos avançados. Remova isso, e eu reduzo a margem máxima. Digamos que até esse ponto. Vamos rolar e ver o que temos até agora. Nosso site está quase completo como você pode ver. Então a única coisa que não projetamos é um rodapé. Vamos descer e projetar. 31. Desenhando o rodapé: Então o que eu vou fazer, então o que eu vou fazer neste momento é sair desta página porque nós terminamos com isso por enquanto. Vamos em frente e projetar a pasta. Em. Uma vez feito com a nossa pasta, vai abrir toda a página e torná-lo responsivo em diferentes dispositivos e tamanhos de tela. E eu vou clicar nisso. Então, para criar uma pasta, vamos usar a mesma ferramenta que usamos para criar o cabeçalho e, portanto, o construtor de cabeçalho e rodapé Elementor. Então, clique nisso. E vamos clicar em Novo, adicionar novo. E aqui vamos dar-lhe um nome, a minha pasta. E, claro, é rodapé. Queremos que ele seja visível em todo o site. E queremos garantir que todos tenham acesso a ele. Então vamos ao Publish. E antes de editarmos com o Elementor, vamos ter certeza de que é Elementor completo, largura total, sem barra lateral, largura total esticada. Desative estes três e o rodapé porque você não deseja exibir o padrão que vem com o Astra. Queremos criar o nosso próprio com a Elementor. Então atualize isso primeiro. Desculpe por isso. E então podemos editar com Elementor será levado para o frontend. Como de costume. Vamos projetá-lo visualmente. Certo? Então, aqui estamos nós. Quem vai em frente e vamos dar uma olhada no que parece. Então estas são as nossas quatro colunas. Esta é uma seção de 40 colunas. Então clique nisso, e então vamos escolher este aqui. Agora temos estas quatro colunas. Então a primeira coisa a fazer aqui é clicar neste botão aqui. Queremos acrescentar estes textos, esta lista de textos. Então digitando aqui, listas. E temos diferentes elementos da lista. E o que estamos interessados é na lista de páginas por elementos garoto. Então solte-o lá e podemos adicionar o primeiro item, que será tornar-se um motorista. Ganhos CDs ajudar motorista de segurança. Não há necessidade de legendas por enquanto. Em seguida, podemos selecionar a página para a qual esse link irá levar. Porque quando você clicar nisso, você será levado para uma página. Qualquer link que você clicar lá é uma página. Então vamos apenas escolher qualquer página ou ir com uma página de negócios. E o item é listado imediatamente você escolhe uma página. Podemos duplicar isso. Ajudar. Você pode editar isso. Só estou inventando essas palavras. Então, negócios. Então vamos duplicar isso. Vamos mudar isso para montar. O colapso menos complicado. Vamos mudar isso para nós. E é claro que podemos fazer a lista o tempo que você quiser, mas eu vou parar por aí. Vamos fazer mais duas listas. Então vou duplicar isso. E eu vou arrastá-lo para lá. Eu também vou duplicá-lo novamente e arrastá-lo para lá. Então, primeiro de tudo, se eu pudesse selecionar isso, vá para texto de estilo. Você pode alterar a cor do texto para preto. O que mais? E então podemos copiar o estilo, colar, estilo. Cole o estilo novamente. Atualize isso. Agora vamos adicionar esses subtítulos aqui. Motorista, escritor, levante. Então eu vou clicar nisso. Vou pegar um título de texto, H2. Precisamos torná-lo um pouco menor. Então vamos para a tipografia. Vamos tentar 18. Sim, acho que gosto disso, mas precisa ser de cor preta. E, claro, vamos mudar. A mensagem diz motorista. E posso duplicar essa droga com lá. Este é um escritor de cavaleiros. Duplicar isso, tentei lá fora. E este é um elevador. Então vamos criar nossos botões. Clique nisso, vá para Botão, solte-o lá. Vamos voltar aqui para o estilo. Vamos mudar a cor para branco. E então vamos dar uma borda sólida de um. E vamos dar a borda da coluna preta sobreposição. Então vamos dar-lhe um raio de fronteira de 50. Então a cor do texto agora não é nenhuma. Vamos mudar para preto. E o que diz o botão? Aplicativo de motorista Lyft. Então, enquanto ainda estiver selecionado, vamos rolar para cima. Elevadores. Aplicativo de motorista, Oi. E próprio, no entanto, tem que cinza, então estilo. Enquanto ainda estiver selecionado, seis cores devem permanecer pretas. E a cor de fundo deve ser cinza. Sim. Então agora vamos simplesmente duplicar isso duas vezes. E então podemos mudar o que o texto diz. Aplicativo de escritor de folhas, diretamente na web. Direto na web ou na direita. Então, até agora eu gosto do que temos, mas eu acredito que eles precisam ficar um pouco mais perto e deixar algum espaço nos lados. Então o que precisamos fazer é adicionar algum preenchimento na seção que os mantém. E precisamos, antes de tudo, quebrar esse elo. Depois a direita, o acolchoamento esquerdo. Vamos aumentar o preenchimento esquerdo para talvez 50, talvez 100. E o preenchimento direito o mesmo. Um 100. Então vamos atualizar isso. Visualize a cadeia, visualize as alterações. Ainda não, então vamos fazer isso. Então, digamos 200 por 200. Então vamos atualizá-lo. Acho que gosto disso. Agora que temos a pasta pronta, vamos sair daqui, sair para o painel. E depois vamos para o Pages. E esta é a nossa página. Então vamos clicar com o botão direito do mouse e abrir o link na nova guia para que possamos visualizá-lo. Então, agora que todo o conteúdo é adicionado à página e colocado para fora, vamos em frente e fazer os retoques finais em todo o preenchimento, margem e alinhamentos que precisamos na página, em seguida, torná-lo totalmente responsivo antes de terminar. 32. Tornar a página: Então o que eu vou fazer é trazer o DevTools pressionando Control Shift I. Cada navegador tem DevTools. Se você estiver usando o Chrome, ainda poderá acessar as DevTools. E então eu vou bater este ícone de modo de design responsivo bem aqui. E ele irá exibir essas configurações diferentes para tamanhos de tela diferentes. Aqui você pode ver que temos o Galaxy S9, o iPad, iPhone, e podemos alternar através dos diferentes dispositivos e ver como a página web vai olhar. Então agora, como você pode ver, o menu entrou em colapso. A barra de pesquisa foi movida para a direita, e nosso logotipo permanece bem aqui. Então ainda temos os três elementos no tablet e no iPhone. Os elementos se aproximam, mas ainda estão lá. E, claro, em todos os outros telefones, os três itens ainda estarão lá. Então deixe-me saltar para a nossa página e vamos fazer a mesma mudança de controle, I e C, o estado atual. Então eu vou apertar esse ícone bem aqui. E vamos ver o que temos. Então isso é o que temos atualmente. Isso é quantos olha o logotipo, parece que cada elemento está empilhado em cima do anterior. Temos muito trabalho a fazer aqui. Então eu vou em frente e acerto isso e depois fecho isso. E bem aqui, eu vou bater nisso e depois fechar isso. 33. Barra de navegação responsiva: Então, voltando à nossa página inicial, mouse sobre editar com o Elementor e clique na barra de navegação. Tudo bem, então aqui estamos nós. Então o que eu quero fazer é apertar este pequeno ícone de modo responsivo aqui em baixo. Vai trazer este bar. E como você vê, temos os diferentes dispositivos aqui, e você pode escolher o telefone celular. Vamos começar com isso. Vamos para o modo tablet. É assim que parece. Acho que na área de trabalho podemos trabalhar com isso. Então o que eu quero fazer é criar uma barra de navegação diferente para cada dispositivo para que possamos personalizá-lo confortavelmente sem afetar a aparência dele em outras áreas. Então eu vou duplicar isso. E isso é o que vamos personalizar para o tablet. E eu vou duplicar de novo. E isso é o que teremos para nossos smartphones. Então, nesta barra de navegação que será visível apenas na área de trabalho, eu vou clicar nisso, certifique-se que é o que eu estou editando e L ir dentro avançado. Desloque-se para baixo em você achará responsivo. E o que queremos fazer é nos esconder na tela do tablet e do celular e atualizar isso. Isso significa que este menu não vai, esta barra de navegação não será visível em telas móveis. E você pode dizer isso pela cor que ele tem quando estamos em um modo diferente. Então, se eu clicar para ir para o tablet, observe que agora é escala de cinza, a cor mudou. Quero dizer, não está ativo. Em outras palavras, neste momento não está visível. Se você está visualizando no tablet e se entrarmos tela do celular e vamos selecionar o tablet napa, entrar avançado, rolar para baixo, responsivo. E vamos escondê-lo no desktop e no celular. Atualize isso. E vamos entrar no tamanho do celular. E agora observe que ambos são tons de cinza para que eles não estão ativos ou tela móvel. E, em seguida, aqui, Vamos selecionar que avançado e vamos escondê-lo no tablet e desktop para que ele só seja visível em smartphones. Agora que temos isso, eu quero arrastar isso e colocá-lo no topo para que possamos trabalhar com ele confortavelmente e ver como ele fica quando ele está lá em cima. O que queremos fazer é alcançar este resultado. Vamos trazer de volta a visão móvel. E o que queremos alcançar são essas três colunas que atualmente as temos empilhadas umas sobre as outras. Selecionando esta primeira coluna aqui que contém o logotipo. Queremos entrar no layout. E no ponto de largura fez o logotipo talvez 10 por cento, digamos 20 por cento, 30 por cento. Vou clicar na coluna aqui, segurando a barra de pesquisa, e entraremos aqui, digamos 60 por cento. Então 30 mais 60, isso é 90. Vamos dar 10 por cento a coluna lá do que 10 por cento, voilá. Então nós os temos seguidos. Vamos visualizar as alterações e ver como elas ficam. Control Shift, I. Clique neste ícone aqui. Precisamos adicionar alguma margem e fazer alguns alinhamentos sobre os elementos. Então vamos voltar aqui. E o que queremos fazer é selecionar essa coluna. E vamos quebrar esse link e aquele link. E então queremos adicionar uma margem superior em algum lugar lá. Vamos fazer o mesmo com a coluna do logotipo Eddie. Vamos quebrar isso e aquilo. Então vamos adicionar o pouco marginal superior em algum lugar lá. Atualize isso. Vamos dar uma olhada no que parece ou RI. Então, agora eles estão devidamente alinhados, mas ainda precisamos adicionar alguma margem ou preenchimento para o lado esquerdo e direito da tela. Então, selecionar este elemento em si ou ir para Avançado, parece que é a margem. Vamos diminuir a margem em algum lugar lá, 20 negativos. Vamos pré-visualizar as alterações. Vamos também fazer o mesmo para o logotipo. Selecione o logotipo em si. Avançado. Vamos tentar aumentar a margem desse lado e atualizar sua pré-visualização das alterações. Acho que estamos chegando a algum lugar com isso. E é claro que podemos brincar com ele até que você esteja satisfeito. Desde que você saiba como usar as ferramentas, você pode brincar com esses números e valores até obter a aparência perfeita. Agora, vamos passar para o tamanho do tablet. Por enquanto, acabamos com isso. E este é o nosso tablet Napa. E, claro, vamos abrir a configuração do iPad. Precisamos empurrar o menu para decidir. Com o menu selecionado, o menu de navegação selecionado clique em Layout. Vamos aqui para o alinhamento, e vamos colocá-lo do lado direito. Então, agora precisamos dividir essa largura de 100 por cento. Exatamente eu queria. Então, como você pode ver, esta coluna é longa, vai todo o caminho até aqui, então isso deve ser cerca de 55 por cento. Isto parece 45 por cento. Então, vamos selecionar a coluna do logotipo. Desculpe-me, os 55 por cento. Vamos empurrar o logotipo todo o caminho para a esquerda ou direita. Então, o menu foi empurrado para baixo porque não demos valores para essas colunas, tão bom. Isso pode ser um 30 por cento. E vamos dar 15 por cento ao menu. Agora talvez vamos dar cerca de 10 por cento. Então vamos pegar isso 40 por cento. Vamos dar a isso 50% do direito. Então vamos visualizar as mudanças neste momento. Vamos abrir o iPad. Então acho que podemos trabalhar com isso. Mas é claro que você sempre pode continuar trabalhando nisso até obter algo que realmente lhe agrada. O ponto aqui é aprender a usar as ferramentas. É nisso que estou insistindo. 34. Seção de heróis responsiva: Vamos passar para a próxima parte, que é a seção de heróis. Como podem ver agora, deste lado temos duas imagens. E do lado temos o texto e os botões. E quando controlamos a mudança I, este texto de cabeçalho aqui entra em colapso e vem para o meio, seu centro alinha os botões aqui, nossa central alinhada. Agora só temos uma imagem. O outro desapareceu ou está escondido. Então vamos tornar esta seção de heróis responsiva porque estamos feitos com isso. Então vamos fechar esta janela. Vamos voltar ao painel e entrar nas páginas. E nossa primeira página são negócios, muitas vezes com a Elementor. Então vamos em frente e clique no ícone do modo responsivo. Vamos ver como fica no tablet. Assim como fizemos com o menu aqui, precisamos obter essas colunas uma nova largura para o tablet. E então o que queremos fazer com este aqui. Então o que queremos fazer é clicar nesta coluna aqui e dentro da coluna. Vamos dar 100 por cento que substituímos. Simplesmente assim. Vamos atualizar isso. Agora, tudo está centralizado, então vamos centralizar nosso texto e botões. Então, começando isso, selecione aquilo e aperte esse alinhamento, escreva o selecione isso, faça o mesmo. E agora, agora que temos esses botões aqui, não podemos fazê-los empilhar uns sobre os outros porque eles estão em colunas diferentes. Então o que vamos fazer é duplicar isso e podemos ir em frente e selecionar este topo em uma seção, ir para Avançado responsivo. E então digamos, oi Don tablet. Então isto é o que será visível quando estivermos aqui. Mas quando entramos no modo tablet, isso é o que será visível. E o que queremos fazer é arrastar isto para baixo assim. E agora podemos nos livrar dessa coluna. Clicando neste botão aqui. Alinhe no meio. O mesmo caso se aplica a isso. Atualize isso, e eu quero arrastar isso até aquele ponto bem ali, mas como você pode ver, eu sou incapaz de arrastá-lo diretamente para lá, então eu vou arrastá-lo até aqui. E quando eu liberá-lo, ele virá logo abaixo disso. Basta encontrar uma maneira de soltá-lo logo abaixo desses textos para que você possa trabalhar com o mais confortavelmente e ver como eles se alinham. Então agora vamos voltar e esconder isso no tablet. Atualize isso. E vamos reduzir esse tamanho de fonte porque ele parece um pouco grande demais. Tipografia. Eu acho que isso é um pouco mais ousado, então vamos dar um peso de fonte de 700. Acho que é um pouco mais escuro, assim. Atualizado. Então vamos descer para as imagens, selecionar a coluna da imagem, e vamos dar a ela uma largura de 100 por cento, assim como fizemos com esta coluna aqui. Então, 100 por cento e já está tomando esta forma, esta forma bem aqui. Então o que eu vou fazer é selecionar esta imagem. Agora vá para o tablet Haydn responsivo Avançado. Então agora só isso será visível no tablet, assim como aqui. Então, apertamos salvar e visualizar alterações. Isto é o que parece. Temos de esconder estes dois botões primeiro. Então vamos voltar aqui rápido. Selecione esses dois botões. Avançado, responsivo, Oi Don, desktop e smartphones. Atualize isso. E se voltarmos para a nossa página, tudo bem, então temos nossos botões originais da área de trabalho, mas quando controlamos olho de ovelha, agora temos esses dois botões que se acumulam no tablet. Vamos ver a distância aqui. Precisamos aumentar um pouco a distância aqui. Então, voltando para esta imagem, Vamos selecionar a seção interna. Vá para Avançado. E vamos aumentar a margem inferior. Primeiro de tudo, removemos esse link. Aumentou a margem máxima para algures ali. E a margem inferior até algures ali. Actualizar. Vamos pré-visualizar as alterações. Certo? Então o nosso espaçamento aqui parece um pouco melhor. Então esta imagem precisa de alguma correção. Mas reparem que só temos esta imagem agora porque esta outra está escondida no tablet. Então o que precisamos fazer é levar isso para o centro. Então eu vou em frente e selecionar essa coluna. E eu removerei esses links agora mesmo. E, em seguida, selecionando a imagem em si, vá para Avançado. Você move esses links também. Em seguida, traga de volta o estofamento. Vamos dar-lhe um estofamento de 25. E vamos visualizar as mudanças ou direito, pensar como o que temos até agora. Acho que precisamos aumentar o estofamento aqui um pouco mais, talvez um 50, 70. Vamos pré-visualizar as alterações. Certo, mas agora observe que por causa do preenchimento que adicionamos a imagem, essa distância é muito grande. Então vamos em frente e reduzir a margem. O fato da margem inferior, vamos remover essa margem inferior e atualizar isso. Visualizando as alterações. Isso é mais parecido, mas podemos ir um pouco mais além e reduzi-lo para 30. Talvez. Irei em frente e pré-visualizarei as alterações novamente. Isso parece bom. Não exatamente assim, mas ainda temos algo com que possamos trabalhar. Lembre-se, tome seu tempo para trabalhar nisso e torná-lo perfeito. Por enquanto estou satisfeito com a nossa secção de heróis. Carimbo para passar para a seção principal do corpo e torná-lo responsivo. 35. Seção de corpo responsivo: Voltando para a página principal, a página real, acho que tínhamos uma boa aparência, mas lembre-se que adicionamos estofamento em torno desta imagem, sem lados, então temos muito preenchimento aqui. Vamos reduzir a margem superior nesta seção. Então, selecionando esta seção, irei para Avançado desvincular isso. E você notará que ele saltou para cima depois de remover as margens padrão. E agora podemos dar a margem que queremos. Vamos usar nossos olhos e ver onde queremos. Acho que precisamos te dar talvez 10, marginal 10 ou direita, então eu gosto disso até agora. Próxima seção, mas agora esses ícones parecem um pouco espremidos. E então precisamos adicionar algum espaçamento entre o ícone e os subtítulos como chegar lá e fazer isso. Então precisamos obter esses talvez 10, 10% por cento neste 90 por cento. Vamos fazer o mesmo para este 10 por cento e para o cronograma flexível 90 por cento. E, finalmente, que 10, 90% atualizam isso. Vamos pré-visualizar as alterações. Tudo bem, isso também parece bom. É muito melhor olhando para o botão aqui. Parece quase um círculo. Vamos ver como isso se parece. E eles parecem ter centralizado este sub-título bem aqui. O nosso não é eu acho que eu gosto do nosso assim. Não precisamos copiar exatamente o que eles têm. Mas se você quisesse alcançar isso, teríamos que selecionar isso. Então venha aqui e diga ao centro alinhe para trás. No mesmo caso com isso. Tudo bem, então vamos passar para este botão aqui. Como é que isto se parece? Tudo bem, eles estão empilhados um em cima do outro. Podemos fazer o mesmo que fizemos por estes dois botões aqui. Ou podemos deixá-los lado a lado. Vejamos o que podemos conseguir com isso. Então vamos em frente e duplicar isso também. Para que possamos esconder um na área de trabalho. Vamos esconder isso. Ocultá-lo na área de trabalho. E agora vamos carregar isto e colocá-lo bem ali abaixo daquilo. E vamos nos livrar desta coluna aqui. Atualize isso. Portanto, isso será visível somente no tablet, e isso será visível na área de trabalho. Então vamos escondê-lo no tablet. Avançado responsivo. Oi Don, tablet. Atualize isso. E vamos pré-visualizar as mudanças. Lá vamos nós. Parece bom, assim como este. Você pode brincar com a distância entre os dois. Faça-os torná-lo mais estreito ou mais largo, certo? Então, passando para a seção de depoimentos, o que isso parece? Então agora eles estão exibindo apenas um e o nosso está tocando também. Quero fazer-te um exercício. Eu quero que você duplique esta seção aqui e faça a cópia do visível no tablet apenas em vez do que no tablet para mostrar apenas um testemunho a cada momento. E uma vez que você tenha feito isso, vamos passar para esta área agora, vamos aumentar esta margem aqui mesmo. Como você pode ver agora, é um pouco pequeno. Então eu vou selecionar esta seção, ir para Avançado, remover esse link ali e dar-lhe talvez um 50. Sim, acho que gosto disso. Vamos fazer o mesmo para esta seção azul aqui, ou selecionar a seção interna aqui. Vamos para o Avançado. Remova esse link e dê a ele uma margem máxima de 50. Então atualize isso. Aqui, Vamos visualizar as alterações ou à direita? Então parece um pouco mais apresentável agora. E como você percebe agora, esta coluna estava abaixo deste botão. altura, já saltou para este outro lado. E no nosso, não pulou para o outro lado. E isso é por causa de como nós adicionamos. Lembrem-se, tínhamos uma seção de coluna dupla. Então, como vamos colocar isso? Do outro lado? Usamos duplicação também. Então vamos duplicar isso como temos feito. Vamos arrastar isso para lá. E agora queremos tornar isso visível apenas no tablet. Então vamos para Avançado com esse responsivo selecionado. Alta não desktop e smartphones atualizam isso. E queremos esconder isso em tablets e smartphones. Tão avançado. Ocultar em tablets e smartphones. Eu acho que isso parece bom, mas vamos pré-visualizar as mudanças. Acho que gosto de como parece. Mas podemos colocá-lo no meio, assim. Selecionando-me bem ali. Vamos nos livrar desta coluna aqui. Realmente não está desempenhando nenhum papel. E vamos selecionar isso. Colocou isto no meio e aquilo também. Role para cima até o estilo. Próximo. Aqui estão os nossos depoimentos, auto-rolagem, pensar da mesma forma onde eles estão até agora, então temos esta disponibilidade de bicicletas. Acho que podemos adicionar alguma margem ou preenchimento e empurrá-lo para a direita um pouco. Então, vamos selecionar esse texto. Vá para Avançado. Vamos aumentar o estofamento em 20. Atualize isso. Vamos pré-visualizar as alterações. E reparem que o nosso formulário aqui entrou em colapso, enquanto o formulário aqui ainda está inline. E novamente, isso é por causa do método que usamos para adicionar o formulário aqui usando para ministro, nós teríamos que adicionar alguns CSS personalizado aqui para tornar este um formulário em linha no tablet. Mas esse não é o nosso objetivo para isso. Nosso objetivo é entender as ferramentas elementares. Por enquanto, vamos com os desmoronados assim. Então vamos fechar isso. Em seguida, queremos ir para esta seção. Vamos ver o que temos até agora. Vou clicar nesse modo responsivo. Desloque-se para baixo, certo? Então eu acho que nós podemos fazer esta coluna aqui parece ser mais longo do que esta coluna e, e é por isso que os botões aqui parecem devidamente alinhados. Mas o nosso parece um pouco espremido. Então vamos tornar esta coluna um pouco mais longa. Deslocar-se para baixo. Vou selecionar esta coluna. Então vamos dar um 30 e dar um sete a isto. Tudo bem, vamos atualizar isso. Certo? Então vamos fazer o mesmo por isso aqui. Vamos aumentar isso para talvez 60, 40. Atualize isso. Estamos quase terminando. Então vamos ver o que temos para esta seção. Vamos rolar para baixo. Quase semelhante. Mas agora observe que nossos logotipos aqui. Primeiro, só podemos ver dois logotipos e eles são um pouco grandes. Mas vamos ver o que podemos fazer sobre isso. Vamos recolher o logotipo e, em seguida, ir para Configurações. E vamos ver onde é que ele desliza para mostrar. Digamos quatro. Sim, eu gosto disso. Vamos atualizar isso. Vamos pré-visualizar as alterações. Role todo o caminho até a parte inferior. - Sim. 36. Seção de foots responsivo: Então vamos rolar para baixo o rodapé. Vamos ver o que temos do nosso lado. Então o nosso parece um pouco confuso. Precisamos fazer algumas melhorias ou Knauer, então vamos pular aqui. E agora que terminamos com o conteúdo da página principal, podemos ir em frente e fechar isso e sair para o painel. Então eu vou clicar nisso. Vamos entrar aparência, Elementor cabeçalho e rodapé construtor. E vamos editar a edição de rodapé com o Elementor. Certo, então vamos entrar no modo responsivo. Vamos entrar no tablet. Então o que precisamos fazer é duplicar isso como fizemos com o cabeçalho ou com a barra de navegação. E tornaremos isso visível apenas no tablet. Responsivo. Então queremos escondê-lo na área de trabalho. E smartphones. Atualize isso, e queremos tornar isso visível apenas na área de trabalho. Então vamos atualizar isso. Então vamos vir aqui e selecionar a seção. Vamos remover esses links aqui. E então vamos ligar o estofamento e dar um pouco de preenchimento. Vamos dar talvez 50. Então vamos selecionar a primeira coluna aqui. Vá para Layout. Vamos dar-lhe talvez 20, 20% ou 20. E vamos dar a isso uma absorção de 30% lá. Vamos pré-visualizar as alterações. Shift de controle. Eu clico neste ícone de modo responsivo, e isso é o que temos no tablet. Então acho que gosto de como parece. Então eu vou sair do painel e eu vou entrar nas páginas. Vamos ver, clique com o botão direito do mouse em abrir link na nova guia, e vamos ver a página agora. Então eu vou para o Controle Shift. Vou mudar para o modo responsivo. E vamos dar uma olhada de cima para baixo em um iPad ou em qualquer tablet. Vamos ver o que parece em um Galaxy S9. E assim você vai notar que agora ele não parece ruim, apresentável ou tela móvel. E isso porque eu intencionalmente deixei de fora a parte responsiva móvel. Agora que você aprendeu a fazer os diferentes elementos responsivos no tablet, você usará os mesmos princípios para torná-lo responsivo na tela móvel. 37. Conclusão: Então é isso pessoal, isso marca o fim da aula. Espero que tenha gostado de assistir. Claro, este é o primeiro de uma série de aulas em que mostrarei como usar Elementor construindo páginas de destino do mundo real que foram bem-sucedidas, páginas de destino de marcas mundialmente famosas. Nesta aula, nós levantamos. Na próxima aula, vamos estar olhando para outra marca famosa e vai estar reproduzindo sua página de destino usando Elementor até a próxima vez que eu for um menino, pode bursa pedaço.