Crie uma página de destino com o Elementor - novo curso de elemento para iniciantes

1. INTRODUÇÃO DO CURSO: Isso mesmo. Junte-se a mim agora. Meu nome é Ken e eu tenho usado o Elementor nos últimos cinco anos. Descobri a Elementor em 2019, quando precisava de um site para meu negócio online. Eu tive uma ideia de negócio online, mas não sabia como criar um site. E antes disso, eu nunca havia construído um site antes. Mas quando descobri que há um construtor de arrastar e soltar livre chamado Elementor. Foi um divisor de águas para mim. Resumindo a história. Finalmente construí o site assistindo tutoriais elementares online. E desde então, o que começou como uma necessidade de economizar dinheiro ao construir meus próprios sites agora se transformou em uma habilidade de geração de renda para mim. Eu não crio mais apenas site para mim mesmo com as habilidades que ganhei, mas também para outras pessoas. Até agora, criei dezenas de sites para vários clientes. E eu faço isso como um show freelance e tendo refinado minhas habilidades com cada novo projeto ao longo dos anos, hoje em dia projetei e vendo modelos elementares em um mercado digital chamado Creative Market. Você provavelmente já ouviu falar disso através desta aula. Quero ajudá-lo a entender como criar belas páginas da web do zero usando o Elementor. Elementor é gratuito e acredito que há muitas pessoas como você que gostariam de aprender a usá-lo como um profissional. Então, aprendendo Elementor, agora você terá uma habilidade que pode ganhar novos rendimentos de várias maneiras. Por exemplo, você pode projetar e vender modelos elementares, mercados online como Creative Market, Envato marketplace ou até mesmo criar seu próprio site através do qual você pode vender elemento de modelos. Você pode criar sites para clientes e ser pago pelo seu trabalho. Se você gosta de ensinar conceitos como este, você pode começar a ensinar elementar. Assim como eu, pode ganhar renda passiva de suas aulas online. E você pode fazer quantos novos negócios on-line quiser sem as limitações impostas pela falta de dinheiro para pagar um web designer toda vez que você tiver uma nova ideia para um negócio online. Eu projetei essa aula para iniciantes completos. Então, se você nunca usou o elementary antes, você achará as lições desta aula muito fáceis de seguir e entender. Começamos desde o início. É assim que instalar o elementor. Até o final, onde teremos construído uma página da Web completa que pode ser usada como parte de um site totalmente funcional. No final desta classe, você não só terá uma página totalmente funcional construída com Elementor a partir do zero, também terá adquirido as habilidades necessárias para construir as futuras páginas da web e landing pages e até sites no futuro. Então, junte-se a mim agora na aula e vamos nos encontrar na lição um. 2. Primeiros passos: Então, mais uma vez, bem-vindo. Agora, à medida que nos preparamos para começar, eu só quero que tenhamos uma visão geral rápida da landing page mais uma vez para ver as diferentes partes que estaremos criando e depois iremos em frente e começaremos. Então, no topo, temos o cabeçalho, que contém o logotipo e a barra de navegação. Em seguida, temos a seção de heróis que normalmente tem uma boa imagem representando o que a página se trata. E como você pode ver, temos essa senhora em uma aula online e, em seguida, temos um H1 que resume o que é a página. E toda landing page precisa ter apenas um h um elemento. Temos H1 até H6, que são diferentes níveis de títulos. Como eu disse, toda landing page precisa ter um elemento H1, mas pode ter vários elementos H2, vários elementos h3, vários elementos h4 e em diante. E você verá que teremos vários H dois elementos, h três elementos. Portanto, se esta landing page for um livro, então o H1 na parte superior será o título do livro. Um livro não pode ter mais de um título, mas pode ter vários tópicos e subtópicos nos capítulos. Então é disso que se trata. Os mecanismos de pesquisa também gostam de saber o que é uma página e é por isso que os mecanismos de busca olham para o H1 em qualquer landing page para saber como indexá-la. Deixe-me ir em frente e atualizar a página porque eu a criei para animar quando você está rolando, mas apenas uma vez quando você carrega a página. Então, como eu já havia carregado a página, você pode ver a animação. Então vou em frente e atualizarei a página. E agora você verá isso desaparecendo bem e sem problemas. A seção de heróis, assim, parece cinematográfica. E então a seção de aumento de escala desliza assim, o que eu acho que é um efeito legal. Em seguida, a seção desliza nisso, assim como ela desaparece. Em seguida, temos essa seção de contador deslizando de cima para baixo. Isso já foi animado. Então, como você pode ver, temos essas animações e elas estão realmente adicionando uma boa vibração em uma boa experiência de usuário para o usuário. Eles simplesmente se apaixonam por um site. Então temos os depoimentos. Isso é animado automaticamente. Não precisamos fazer nada. Ele continua fazendo o loop dessa animação nos depoimentos para capturar a atenção do usuário para que eles possam ler o que os depoimentos dizem. Então, finalmente, temos o formulário de inscrição que aparece de baixo para notificar as pessoas que elas podem se inscrever para obter cursos gratuitos. Esta é uma boa seção de call to action. E então temos a pasta. Esse é basicamente o site. Ou seja, essa é basicamente a landing page que estamos criando. E sem perder mais tempo, vamos prosseguir e começar criando o cabeçalho. Então, vejo você na próxima lição. 3. Instalar o tema Astra: Bem-vindo de volta. Então, agora estamos prontos para começar a criar a página. E a primeira parte que estamos criando é o cabeçalho. Mas antes de fazermos isso, vamos em frente e instalar nosso tema e, em seguida, nossos plugins. Como você pode ver, esta é uma nova instalação do WordPress. Estamos na Versão 6. Você pode estar usando uma versão mais recente, mas o processo que estamos aplicando agora ainda será relevante. Então, entrando em temas de aparência, podemos ir em frente e instalar Astro por padrão porque estamos no ano de 2022. O tema ativo é 2022. No ano passado era 2021, e no ano anterior era 2020. Mas queremos ir em frente e dizer Adicionar novo. E seremos levados para o repositório de temas do WordPress ou diretório de temas. E existem literalmente milhares de temas que podemos usar aqui. Mas o que estamos interessados é Astra. Então, deve estar aqui. Mas você também pode ir em frente e digitar Astra apenas para ter certeza. E observe que há Astral e astra não confundem os dois. É o Astra instalou isso. Tudo bem, vamos seguir em frente e ativar. E acabamos. Então, agora, como você pode ver, o tema ativo é Astra. Como você pode ver aqui em cima. Obrigado por instalar o Astra. E eles estão apenas nos dizendo que o Astro vem com dezenas de modelos iniciais prontos para uso. E, de fato, eu já havia publicado na aula onde ensino a usar os modelos iniciais para criar sites totalmente funcionais. Se você não viu, vá em frente e abra meu perfil. Você verá isso ali mesmo. Eu ensino a projetar uma loja de cosméticos usando esses modelos iniciais prontos para uso. Mas irei em frente e fecharei isso. E é basicamente assim que instalar um tema WordPress. Astra é um dos temas mais populares do WordPress hoje, e tem sido há vários anos. Se você quiser saber mais, eu recomendo que você vá em frente e Google Astra Theme Review. Só para que você possa ver por que é um dos temas WordPress mais populares e melhores do mercado. Agora que temos nosso tema instalado e ativado, seguida, queremos instalar e ativar nossos plugins. Vamos fazer isso na próxima lição. Vejo você em breve. 4. Instale o plugin do Elementor: E bem-vindo de volta. Então, agora que temos o Astra instalado, é hora de instalar o elementor. E os outros dois plugins que usaremos para criar nosso cabeçalho. E você verá por que precisamos desses dois plugins. Indo diretamente dentro de plugins. Posso clicar em adicionar novo, mas quero primeiro ir para a lista de todos os plugins que já instalamos. E aqui estamos nós. Então, o que eu quero fazer é dizer Adicionar novo e será redirecionado para o repositório de plugins ou diretório de plugins. E podemos ir em frente e procurar por Elementor. E deve ser o primeiro resultado. Depois de procurá-lo, é por Elementor.com e tem mais de 5 milhões de instalações ativas no momento da gravação. Instale-o agora. E enquanto está instalando, observe que existem outros plug-ins aqui que têm o nome Elementor neles. Esses são basicamente plugins criados para serem extensões ou fornecem extensões para o plug-in Elementor. Portanto, o Elementor fornece recursos e configurações específicas e onde ele tem falhas. Esses plugins adicionam esses recursos ao elementor e mostrarei como eles fazem isso. Esses plugins também fornecem recursos gratuitos que podem estar disponíveis apenas na versão pro ou na versão premium do Elementor. Antes de ativarmos o Elementor, vamos em frente e instalar elementos kids, complementos elementares, que é uma das extensões que precisamos para Elementor possa criar nosso cabeçalho. E também queremos que nosso cabeçalho seja pegajoso. Então, vamos instalar efeitos de cabeçalho adesivos para o Elementor. Enquanto está instalando. Deixe-me apenas saltar rapidamente para esta página de referência aqui para mostrar o que quero dizer com pegajosa. Então, quando eu começo a rolar, observe que o cabeçalho aqui permanece no topo. Ele não rola as principais palavras com o resto da seção de heróis e a página. Então a seção de heróis sobe e desaparece, mas a página permanece no topo. Então é isso que queremos dizer com cabeçalho pegajoso. O fato de que ele permanece no topo e isso permite que o usuário possa navegar independentemente da parte da página, sua própria. Então, voltando à nossa lista de plug-ins, agora, ele está instalado. Tudo o que precisamos fazer é ativá-los. Vamos instalar plugins. Vamos ativá-los um por um. E vamos começar com o Elementor, porque ultimamente desde a última atualização no plugin, agora temos um assistente de configuração que temos que passar por várias etapas para configurar as partes básicas de um site. Então, aqui estamos nós. Este é o assistente de configuração que acabei de mencionar. Ele tem várias etapas aqui. O primeiro passo aqui é criar uma conta com o site elementar para aproveitar alguns desses benefícios. Mas não precisamos criar uma conta para usar o plugin. Então, vou apenas ir em frente e pular este passo. O segundo passo é selecionar, continuar com o tema Olá. Este é um tema criado pela equipe Elementor para trabalhar com o Elementor. Mas lembre-se, já instalamos o tema Astra, que é mais poderoso e mais pacotes de recursos. Então vamos em frente e pularemos. Aqui temos a oportunidade de dar um nome ao nosso site. Por padrão, esse é o nome que você deu ao seu site quando você estava instalando o WordPress em seu cPanel. Então, vou deixar isso e clicar em Avançar. Então, temos aqui a oportunidade de fazer o upload do nosso logotipo. Mas não estamos fazendo isso agora. Vamos fazer o upload do logotipo à medida que estamos construindo a landing page. Então, vou em frente e clique em Ignorar. E, finalmente, temos duas opções aqui. Podemos editar uma tela em branco com o editor Elementor, ou podemos navegar a partir de centenas de modelos ou importar nossos próprios modelos elementares. Não vamos começar diretamente a criar a página da Web, precisamos ir para o painel. Então, vou clicar em Ignorar. Tudo bem, parece que a Elementor nos redirecionou para a tela que estávamos evitando. Mas vamos seguir em frente e clicar neste menu de hambúrguer e sair para o painel. Porque lembre-se que ainda não ativamos o resto dos plug-ins. Vou clicar neste ícone aqui para que possamos sair para o painel. Volte para plug-ins. Na próxima lição. Vamos seguir em frente e ativar elementos, calor, luz. Vejo você em breve. 5. Adicione um suplemento Elementor: E bem-vindo de volta. Então, já instalamos e ativamos o Elementor. Agora estamos prestes a ativar a luz chave dos elementos. Mas antes de fazermos isso, só quero mostrar por que precisamos de elementos, luz Keith e outras extensões do Elementor e como eles funcionam. Então, entrando nas páginas, eu só quero clicar com o botão direito do mouse e abrir este link em nova guia para que possamos deixar esta página intacta e iremos para essa nova guia. Então eu posso mostrar o que queremos dizer. Esta é a página que foi gerada automaticamente pelo Elementor quando terminamos o assistente. Então, clicarei em editar com o Elementor. Assim, podemos ir para o front-end e ver o que temos. Aqui. Estamos no lado esquerdo da Elementor. Temos vários painéis contendo ferramentas Elementor. E, por padrão, o painel básico está sempre aberto. Esses são os elementos mais populares em qualquer site. Cada site ou página da Web sempre precisará de um botão, sempre precisará de um título e imagem, vídeos, divisórias, espaços e tudo mais. Então, se eu recolher essa área básica e abrir o Pro, essas são as ferramentas e recursos que só estarão disponíveis se comprarmos a versão Pro do Elementor. Portanto, não podemos arrastá-los para o nosso espaço de trabalho, mas podemos arrastar uma imagem aqui e soltá-la lá. Portanto, uma vantagem de ter essas extensões como elementos de luz infantil, os elementos mantêm a luz é que alguns dos recursos que só estão disponíveis na versão Pro do Elementor estão na verdade grátis quando você instala essa extensão porque seu trabalho é trazer a pontuação adicional avançada Elementor com o tempo. Então nós fizemos cabeçalho e todas essas coisas. Então, vamos ativar a luz chave dos elementos. E iremos para o front-end e vamos encontrá-lo listado aqui. E vamos dar uma olhada rápida nas diferentes ferramentas que ele traz. Então, vou clicar em Ativar. E agora está ativo. Está listado aqui à esquerda. E se clicarmos em elementos, luzes infantis, basta ir em frente e clicar nisso. Ele também tem seu próprio assistente de configuração composto por várias etapas. E, basicamente, essas três opções aqui determinam quantos desses recursos diferentes estarão disponíveis ou widgets. Vamos chamá-los assim. Então, se avançarmos em vez de básicos, teremos mais desses jatos. Então, vou deixá-lo avançado ou você pode ir em frente e deixá-lo no básico ou recomendado. E então iremos e diremos o próximo passo. Aqui você pode se inscrever na comunidade de kits de elementos para receber notícias deles. Vamos seguir em frente e clicar em Avançar. Aqui. Você tem a opção de instalar mais ferramentas que são desenvolvidas pelos mesmos elementos equipe de desenvolvedores infantil. Em seguida, clique em Avançar, agora vamos instalá-los. Então aqui, basta ir em frente e clicar no próximo passo. Próximo passo, e agora estamos prontos. Clique em Salvar alterações. E agora instalamos e ativamos elementos. Obtenha luz em nosso site. E com isso feito, vamos para o front-end. E vou atualizar esta página. Está nos perguntando se queremos dizer que eles mudam, pois não queremos salvar as alterações, porque essa não é uma página que você vai usar. Então, vou apenas recarregar. E agora, se eu recolher o painel básico Pro painel em todos esses outros, agora você notará que temos kit de elementos e pasta de cabeçalho do kit de elementos. E se expandirmos isso, ele tem várias ferramentas que são destinadas a agregar mais valor aos nossos sites. Então, se eu digitar, agora, você notará que temos o nav que vem com o Elementor Pro e um elemento nav que é trazido pelo complemento do kit de elementos. E isso está na versão pro, então não podemos arrastá-lo para a página, mas podemos arrastar isso e usá-lo. Então essa é a vantagem de adicionar esses complementos ao Elementor. Agora que temos elementos garoto, ativado por luz, vamos voltar para o back-end. Plugins internos. Eles são efeitos de cabeçalho adesivos para Elementor não tem um assistente de configuração. Então, se eu clicar em Ativar, ele será ativado e estamos prontos para usá-lo. Então, agora que isso está feito, próxima coisa que quer fazer agora é começar a construir nossa seção de cabeçalho. Então, vamos fazer isso a partir da próxima lição. Vejo você em breve. 6. Crie o logotipo: Bem-vindo de volta. Fui em frente e preparei uma pasta contendo todos os ativos que usaremos. E eu nomeei apropriadamente ativos de TI. Então você encontrará essa pasta de ativos na descrição abaixo e poderá baixá-la para encontrar tudo aqui. E uma das coisas que você encontrará lá é essas cores do arquivo TXT ponto. Isso basicamente contém os diferentes códigos de cores que usei para criar esse esquema de cores. Você pode ir em frente e usar esses códigos de cores ou usar os seus próprios. Então, vamos usar este azul marinho, azul claro, laranja. E, claro, você pode usar qualquer tom de cinza que você quiser. Eu só queria mencionar isso e também mencionei que você encontrará esses ativos pasta na descrição abaixo. Com isso fora do caminho, vamos entrar em nosso painel. A primeira coisa que precisamos fazer é notar que o cabeçalho é composto pelo logotipo e pela barra de navegação. Então, vamos fazer o upload de um logotipo para o nosso site. Então vou passar o mouse sobre elementos garoto. E uma das opções aqui é a pasta de cabeçalho. Então, vou clicar nisso. Aqui. Você percebe que temos três painéis, todos Cabeçalho e Rodapé. E isto é, esta será uma lista de todos os cabeçalhos e rodapés que você criou nesta seção. Então, direi Adicionar novo. E podemos dar um nome ao nosso cabeçalho. Vou chamá-lo de cabeçalho. E o tipo pode ser um cabeçalho ou um rodapé. Portanto, neste caso, é um cabeçalho e as condições é que queremos que ele esteja disponível ou visível em todo o site. E podemos ir em frente e dizer, em primeiro lugar, vamos ativá-lo para que ele fique realmente visível. Se o deixarmos de fora, ele não será exibido em nenhum lugar. Então, digamos que ative, salve as alterações. E agora está ativo como você pode ver nesse status. Clique em Editar. E neste menu pop-up, clique em editar conteúdo será redirecionado para o front-end, onde agora podemos começar a construir o cabeçalho usando o Elementor. Aqui estamos nós. Agora estamos prontos para começar. Claro. Vamos começar adicionando uma seção de coluna dupla. E é uma seção de coluna dupla porque esta coluna aqui manterá o logotipo. Assim, podemos ir em frente e clicar no sinal de mais lá e adicionar imagem. Então, enquanto essa imagem estiver selecionada, você notará que esta parte diz Editar imagem. Quando selecionamos a seção, essa parte muda para a seção de edição. Então, qualquer elemento que você tenha ativo aqui na página é o elemento ativo aqui. E as configurações e configurações que você vê aqui são para esse elemento. Então, se eu selecionar a imagem, mudar para editar a imagem, e podemos ir em frente e selecionar a imagem. E como não temos nenhum logotipo aqui, abriremos nossa pasta de ativos. E este é o logotipo. Vou selecioná-lo e abrir. Aqui vamos nós. Em seguida, insira mídia. E lá vamos nós. Você pode estar se perguntando, por que algumas partes não são viáveis que, porque elas são brancas no fundo, é branco, mas teremos esse fundo como azul, então haverá visível. Então, vamos seguir em frente e definir esse fundo azul. E o bug, o fundo azul está no cabeçalho inteiro, inteiro. Portanto, é a seção selecionar isso e, em seguida, entrar no estilo, tipo de plano de fundo. Nós entramos em colapso isso. Temos vários painéis. Precisamos do plano de fundo em estado normal. Vamos clicar em Clássico em cor. Podemos colar o código de cores aqui. Então, vou usar rapidamente este documento e selecionar essa cópia azul-marinho. Então venha aqui e cole-o lá. E agora é tão azul. Vou atualizar e visualizar as alterações. Lá nós o temos. Então, a próxima coisa que queremos fazer é criar essa barra de navegação. Mas a barra de navegação é composta de itens de menu. E esses itens de menu, temos quatro deles são, na verdade, páginas da web. Então, a primeira coisa que precisamos fazer é criar para páginas da Web ou qualquer número de páginas da web que você precisará. Em seguida, podemos usá-los como itens de menu. Então, vamos ver como fazer isso na próxima lição. Vejo você em breve. 7. Crie o cabeçalho da barra de navegação: Bem-vindo de volta. Agora já enviamos nosso logotipo. Agora é hora de criar nosso menu. Então, voltando aqui, vamos criar um espaço reservado para esse menu. E o que precisamos fazer é clicar neste sinal de mais para abrir os elementos ou clicar neste ícone aqui, eles fazem o mesmo. Então, se eu clicar nisso, ele exibirá os elementos para que possamos arrastar para este lugar. Então, vou clicar na barra de pesquisa aqui e digitar nav. Agora lembre-se, nós tínhamos notado que temos dois elementos nav. Vamos usar os elementos kids Nav Menu e soltá-lo lá quando esse indicador azul aparecer. No momento em que fazemos isso, notamos que não vemos nenhum menu. Mas como esse é o elemento ativo, ele diz Editar elementos recebem o Menu Nav. E uma das opções aqui é selecionar o menu. Se clicarmos neste menu suspenso, devemos ter um menu aqui que selecionaremos e ele será exibido aqui. Mas, como ainda não temos um menu, precisamos ir ao back-end no painel e criar um menu do WordPress. Então, deixe-me atualizar isso primeiro. E mudando para esta guia aqui, vou sair para o painel. Ainda tenho esta página intacta. Então, acabei de abrir uma nova guia e entrar no painel para poder criar o menu rapidamente. Você pode simplesmente sair daqui, se quiser. Você ainda voltará. Agora que estamos dentro do painel, vou para dentro. A aparência passa o mouse sobre a aparência do que os menus. E quando chegarmos aqui, você notará que a primeira coisa que somos recebidos com facilidade, crie seu primeiro menu abaixo. Isso porque eles ainda não têm um cardápio. Precisamos criar um. Deixe-me fechar esta notificação. Então, vamos dar um nome ao nosso menu. Vou chamá-lo de menu e selecionarei o menu primário. Então, estamos fazendo este menu, nosso menu principal. Para que, se tivermos mais menus, eles podem ser os menus secundários do Canvas, menu, ETC. Então clique no menu Criar. E no momento em que fizermos isso, você notará que essa parte agora está ativa. Inicialmente, não estava ativo. E esta parte aqui diz Adicionar itens de menu da coluna à esquerda. Itens de menu podem ser postagens, links personalizados ou categorias da página . Às vezes, eles são ainda mais itens aqui. Então, o que precisamos é criar algumas páginas e elas serão listadas aqui e podemos adicioná-las ao nosso menu. Mas, por enquanto, observe que temos a página de amostra que geralmente vem com cada nova instalação do WordPress. Então, vou clicar com o botão direito do mouse nas páginas e abrir este link em uma nova guia. E vou mudar para essa nova guia para ver uma lista de todas as páginas que temos aqui. Esses dois são rascunhos. Deixe-me destacá-los e movê-los para o lixo. Em outras palavras, exclua-os. Na verdade, preciso excluir esta página de amostra. Não precisamos disso. Mova para o Lixo. E agora podemos ir em frente e adicionar talvez quatro ou cinco páginas. Então, vou clicar em Adicionar nova casa. E à direita, temos as configurações do WordPress e do Elementor aqui, e pedimos uma configuração aqui. Então, precisamos configurar esses dois tipos de configurações. O primeiro sob as configurações do WordPress e Elementor. Vamos para baixo do modelo. Vamos escolher Elementor, largura total. E, em seguida, nas configurações do Astro, sob o layout da fantasia, vamos escolher a largura total, esticada. E a barra lateral. Sem barra lateral. Porque você não quer que uma página da Web tenha barras laterais. Então precisamos desativar o cabeçalho e o rodapé awestruck padrão porque estamos construindo o nosso próprio no front-end. Então, com essas configurações intactas, vamos prosseguir e publicar a página. Em seguida, saia para a lista de páginas. E agora temos casa, sua honra, as páginas que vou repetir o mesmo processo por mais vezes, criando páginas diferentes. E vou avançar essa parte porque é, é apenas uma reputação do que acabamos de fazer. Sugiro que você faça o mesmo. Então adicione novo. Vou chamar esses cursos. E essa é a última página. Então, saindo para a lista de páginas que temos. Agora temos cinco páginas que podem ser usadas como itens de menu. Então, voltando para dentro, aparência, menus abaixo das páginas, você notará que agora os temos como itens de menu, então eu selecionarei todos eles. Ou você pode selecionar um por um, o que quiser. Então, selecionarei todos eles e adicionarei ao menu. E agora nós os temos listados no menu, que atende pelo menu de nomes. E vamos reorganizá-los arrastando-os de cima para baixo. Vamos colocar o contato como o último item. O item que está no topo aqui será o da esquerda. E o item que está no final aqui será o item à direita em nosso menu, assim, da esquerda para a direita. Da esquerda para a direita. E com essa alteração, vamos salvar o menu. Agora, com essas mudanças, podemos ir em frente e mudar para a página onde tínhamos nosso menu aqui. Lembre-se de que adicionamos esses elementos de navegação, NAB mantenha o menu de elementos selecionados, obtemos o Menu Nav, e deveríamos que esse menu aparecesse aqui. Agora, tudo o que preciso fazer é atualizar esta página e esse menu aparecerá aqui. Então eu vou pressionar Control R ou Command R se você estiver em um Mac. Para atualizar a página. E vou selecionar esse elemento, ignorar o item de navegação. E agora, se formos ao menu Selecionar, menu suspenso que acabamos de criar aparecerá e os itens aparecerão aqui. Lá vamos nós. Mas agora eles estão à esquerda. Precisamos empurrá-los para a direita. Então, vamos para a posição do menu horizontal e mude para a direita. Lá vamos nós. Mas agora precisamos mudar as cores para escrever porque elas não estão visíveis atualmente. Portanto, enquanto isso ainda estiver selecionado, clique em qualquer lugar dentro desta caixa azul. Vá para dentro do estilo. Deixe-me colapsar o invólucro do menu. Temos várias configurações aqui. O que precisamos é o estilo de itens de menu, tipo de fundo, sem item de fundo, cor do texto, branco. Vamos arrastar isso até lá. E ao passar o mouse, deixe-me clicar em qualquer lugar para se livrar disso. E ao passar o mouse, precisamos que a cor seja 1524, que é uma das cores que tenho aqui, um 24. E quando ativo ao passar o mouse, agora você notará que ele se transforma para aquela laranja. E quando ativos, também precisávamos ser F 158. Vinte e quatro, ative isso. E, em seguida, vamos visualizar as alterações. Lá vamos nós. Então, agora, quando eu passar o mouse sobre isso, é incrível. E é assim que criar o cabeçalho. Em seguida, vamos ver como criar a seção de heróis. Vamos fazer isso na próxima lição. Vejo você em breve. 8. 7 Crie a seção de Heróis: Bem-vindo de volta. Então, estamos prestes a criar uma seção de heróis. Um para começar adicionando esse bloco de texto. E depois adicionaremos a imagem e finalizaremos com essas partículas. Então, pulando para a nossa página Elementor, quero sair desta parte porque terminamos de editar o cabeçalho. Lembre-se de que este é o lugar em que estávamos editando o cabeçalho. Então, o que precisamos fazer é clicar neste menu de hambúrguer e Sair para o painel. Podemos criar uma página da web ou usar qualquer uma das páginas da web que criamos. Como você pode ver, fomos redirecionados para o painel e ainda estamos dentro das configurações do cabeçalho. Então, vamos entrar nas páginas. E temos a lista de todas as páginas que criamos anteriormente. Então, usaremos qualquer uma dessas páginas e eu quero usar a página inicial como nossa página de destino porque faz sentido. Então, vou clicar em Editar. E como já configuramos tudo aqui, tudo o que precisamos fazer é dizer Editar com Elementor e seremos redirecionados para o front-end, onde podemos começar a preencher a página com o resto do conteúdo. Agora que estamos editando a página em si e não o cabeçalho, não podemos editar o cabeçalho a partir daqui. Então, podemos clicar neste logotipo ou redimensionar essas colunas aqui, ou editar as cores de qualquer coisa dentro do cabeçalho. Estamos editando o conteúdo que está abaixo do cabeçalho. Então, pulando para nossa referência aqui, precisamos de uma coluna dupla, uma para segurar a imagem e a outra para segurar o bloco de texto. Então, vamos adicionar uma seção de coluna dupla. É claro que, deste lado, vamos em frente e adicionar um título. Vamos soltá-lo lá. Então eu vou em frente e datilografar. Enquanto isso estiver selecionado, você notará que isso mudou por meio do título de edição. Então, vou em frente e digitar fáceis cursos elementares para todos. E podemos entrar no estilo enquanto ainda é tipografia de estilo ativo. Vamos aumentar o tamanho e podemos mudar a família da fonte enquanto ainda estamos em Tipografia. Família de fontes. Vamos mudar isso para Montserrat ou qualquer fonte que você quiser. Então Montserrat, agora clique em qualquer lugar nesta área aqui para se livrar dessa caixa assim. E vamos mudar essa cor para branco. E agora você não pode ver porque o fundo é branco. O que nos leva ao próximo passo, que é alterar a cor de fundo toda a seção da esquerda para a direita, precisamos selecionar a própria seção. E agora você notará que é um pouco complicado se apossar da seção. E o que precisamos fazer é apenas passar, se você passar o mouse sobre eles e depois subir, alguma forma, você será capaz de obter essas configurações. E isso é algum tipo de bug no Elementor. Percebi que isso está acontecendo bastante. Ou você pode ir para esta coluna. E então, como está em contato com essa parte, você pode selecioná-la. Mas se você for direto daqui e tentar chegar lá, não conseguirá. Na verdade, os elementos finais também nos fornecem uma ferramenta chamada navegador que podemos usar para selecionar e navegar pelas diferentes seções que temos na página. Então, pressionar Control I no teclado abrirá a ferramenta. E a ferramenta basicamente nos dá uma visão panorâmica da página. Então, como você pode ver, temos duas colunas aqui. E essas são essas duas colunas. E eles estão dentro da seção. Então, se eu recolher esta seção, você notará que as colunas desapareceram agora porque estão dentro da seção. Expandi-la revela as duas colunas que estão dentro dela. Assim, podemos selecionar uma seção aqui clicando na seção. E agora isso lê a seção. Isso significa que toda a seção está selecionada. Essa é outra maneira de contornar esse pequeno problema. Então, fechando isso e podemos ir para o estilo. Se eu colapsar o plano de fundo, você notará que temos várias configurações aqui. Só precisamos do plano de fundo por enquanto. Desta vez, não queremos que o fundo seja uma cor única clássica. Queremos que seja um gradiente, então vou clicar nele. E nós temos a primeira cor. E a segunda cor, para a cor superior, ou a primeira cor, queremos a mesma cor porque queremos que o gradiente corra de cima para baixo. Então, se usarmos a mesma cor que essas aqui, haverá uma mudança gradual aparecendo apenas entre o azul e a segunda cor aqui. Então, selecionando a cor um. Vou mudar para isso e dizer azul marinho. Copie isso, cole aqui. Vamos em frente e mudar essa segunda cor. Este azul claro. Copie isso. Cole lá dentro. E agora é um lindo gradiente azul. Então, vamos visualizar as mudanças. Sim, lá vamos nós. Então, voltando aqui, enquanto isso ainda está selecionado, lembre-se de que dissemos que precisamos de um H1 por página. Então, atualmente, enquanto isso ainda está selecionado, se você for para Conteúdo, você notará que H2, vamos mudar isso para H1. Vamos clicar nisso e adicionar um editor de texto, que é essencialmente um parágrafo. Então, nós o deixamos lá enquanto ele ainda está selecionado. Agora diz que qualquer cor de texto de estilo de editor de texto, mude para branco. E podemos ir em frente e selecionar a topografia. Mude a família. Montserrat. Selecione isso, vá dentro de estilo, tipografia, fonte, peso. Vamos fazer 900 para que fique pesado. E agora precisamos de algum espaçamento entre o conteúdo da seção do herói e o cabeçalho. Então, fazemos isso indo para essa coluna individual porque é uma coluna dupla. Vamos para essa coluna. Margem avançada. Vamos remover esse link para que possamos editar células individuais. Portanto, a margem superior pode aumentá-la olhando para ela. Acho que é uma boa distância. Vamos atualizar isso e visualizar as alterações. Então lá vamos nós. A próxima coisa que queremos fazer é adicionar a imagem. Então, voltando aqui, vamos clicar neste sinal de mais aqui. E vamos arrastar um elemento de imagem. Com a imagem ainda ativa. Podemos ir em frente e fazer o upload de nossa pasta de ativos. Essa é a imagem. Você tem, todas essas imagens disponíveis para você abaixo deste vídeo. Vamos inserir mídia. E lá vamos nós. Atualize isso. E antes de visualizá-lo no front-end, agora, vamos em frente e adicionar algum espaçamento, algum preenchimento entre a borda da seção e o conteúdo onde está a área de conteúdo. Então, vamos selecionar a seção em si. Entre no preenchimento avançado, remova esse link. Estofamento inferior. Vamos dar 50. Agora, isso aumenta o espaço entre onde o conteúdo chega e a borda. No topo. Talvez também possamos dar um pouco de preenchimento, talvez 30 atualizar isso. Vamos visualizar as mudanças. Tudo bem, eu acho isso incrível. A próxima coisa que queremos fazer agora é adicionar nossos botões. Então, vamos em frente e fazer isso na próxima lição. 9. Como adicionar efeitos de texto: Bem-vindo de volta. Estamos prestes a adicionar nossos botões logo abaixo aqui. Mas antes de fazermos isso, você pode estar se perguntando, como adicionamos essa sombra por trás do texto. Como você pode ver, temos algum tipo de efeito de sombra por trás do H1. Então, como fizemos isso? Voltando aqui, selecione o H1 e entre no estilo. Vamos para a sombra de texto. E se clicarmos nisso, veja o texto. Se eu clicar nisso imediatamente, ele mostra alguma sombra por trás. E podemos personalizá-lo ao nosso gosto aqui para que você possa aumentar um pouco o desfocamento. Gosto de como parece, mas vá em frente e brinque com isso. Vou atualizar isso. Vamos visualizar as alterações. Então eu gostei da sombra até agora. Mas outra coisa que você pode estar se perguntando é como consegui essa cor laranja? Eu queria que os cursos on-line se destacassem porque é isso que devemos realmente destacar para quem chegar nesta página. Então, tudo o que fiz foi envolver esse texto dentro de um período. Para aqueles de vocês que não sabem codificar em HTML, há algo chamado span. E você pode ler mais sobre isso. É muito fácil de usar, mas vou mostrar como fiz isso. Então, enquanto isso ainda estiver selecionado, vou entrar no conteúdo Elementor menos do que assinar. Ventilador, tão apertado esse vão. Em seguida, as palavras para as quais você deseja mudar a cor devem ser enroladas dentro das calças de ferramentas e o segundo vão deve ter a barra logo antes da extensão da palavra. E, em seguida, dentro da primeira extensão, tipo , estilo, igual às aspas. E dentro das duas aspas, você pode ir em frente e digitar a cor. Vou usar o código. Já usamos 1524 apenas para manter essa consistência. Lá, nós o temos , atualize isso. Então, se isso parece muito complicado para você, você não precisa se preocupar em rosa, você não conhece o Elementor, você realmente não precisará usar essas configurações personalizadas. Só estou mostrando para você no caso de você querer fazer personalizações extras como essas. Na próxima lição, vamos em frente e adicione os dois botões. Vejo você em breve. 10. Como adicionar e personalizar botões: Estamos na hora de adicionar os dois botões. Existem diferentes maneiras de alcançar o mesmo resultado que este. Podemos adicionar dois botões aqui inserindo uma coluna dupla em uma seção aqui e, em seguida, arrastando um e arrastando para os botões lá assim e personalizando-os até que pareçam assim. Ou podemos usar a opção de botão Duo kit de elementos, que estou prestes a mostrar. Então, antes de tudo, deixe-me atualizar esta página antes de prosseguirmos. E, em seguida, dentro do painel, quero entrar no kit de elementos, clicar em kit de elementos, widgets. E lembre-se, enquanto estávamos configurando o kit de elementos, selecionamos a opção básica. Havia também a opção Avançado e a opção personalizada. Como selecionamos a opção básica, alguns dos widgets aqui, ficamos desmarcados ou de onde parou. Então, precisamos ativar a opção de botão duplo. Então, vamos procurar por isso. Sim, aqui está. Opção de botão All, assim por diante. E então vamos salvar as alterações. E agora voltando para nosso front-end, onde estamos fazendo nossa edição. Se eu atualizar esta página pressionando Control R. Alright, então agora vamos em frente e digitar Duo. E agora está disponível. Então, arrastando isso aqui e soltando-o lá dentro. Temos os dois botões. Agora podemos personalizá-los. Então, antes de tudo, vamos começar estendendo sua largura. E então vamos aumentar a lacuna. Talvez até lá. E então vamos expandir o botão um. Vamos dar uma descrição como baixar cursos. E então você pode fornecer o link aqui para que, quando alguém clicar nele, o comprimento determine o que acontecerá. Ou é uma dúvida, é um link de download ou os leva para uma página onde eles podem baixar tudo. Em seguida, recolhido o botão um. Vamos para Botão para, vamos alterar o texto para saber mais. E você pode fornecer um link. E se você quiser, você pode fornecer um ícone. Não vamos fazer isso. Vamos atualizar isso. Agora. Enquanto os botões ainda estiverem selecionados, vamos entrar no estilo. Agora podemos começar a estilizá-los. Se eu entrar em colapso, temos apenas duas opções. botão um pode começar editando a cor de fundo. Então aqui temos a cor do texto e, em seguida, aqui temos o tipo de plano de fundo clicando que podemos fazer essa alteração 24. E essa pode ser a cor que usamos aqui? Um branco. Vamos fazer o botão na cor branca. Então, está bandando essa cor do tipo de fundo, branco. Isso significa que a textura precisa mudar para o azul marinho. Então clique em qualquer lugar aqui. Para se livrar disso, a cor do texto deve ser azul. Então, vou falar sobre isso e selecionar esta cópia azul marinho que entra aqui, botão para cor. Cole-o lá. E agora é azul. Ao passar o mouse. Queria permanecer azul. Cole isso lá dentro. E agora ainda permanece azul. Para o botão um. Expanda isso. Ao passar o mouse. Ainda permanece branco. Em seguida, vamos arredondar os cantos para que eles não fiquem tão afiados quanto estão agora. Então, para o botão um, raio fronteiriço, vamos dar um dez. E agora está arredondado nos cantos. Para botão também. Vamos fazer o mesmo. Agora. Está aterrado. Vamos reduzir a altura um pouco. E fazemos isso indo para baixo até o preenchimento. Quebre esse link. E então vamos fazer nosso próprio preenchimento. No topo. Vamos dar um 15. Isso é 15015. E a parte inferior 15. Gosto disso. Mas aqui podemos dar-lhe os 50 e brilhantes 50. É mais parecido com isso. Vamos fazer o mesmo para o botão um. Preenchimento. Remova o preenchimento padrão. Então à esquerda, 50, direita 50, top 15, inferior 15. Agora precisamos aumentar a largura. Então, vamos voltar ao botão de conteúdo. Gostaríamos disso. Então vamos atualizar isso. Visualize as alterações. Tudo bem, agora por causa da quantidade de texto aqui, os botões foram além. Podemos reduzir o tamanho disso ou alterar essa palavra para ser uma palavra diferente que seja menor. Como cursos universitários fáceis para todos. E já estamos começando a aumentar tudo, pois devemos atualizar isso. Visualize as alterações. Já gosto de onde está. Então, a próxima coisa que queremos fazer é adicionar essa animação. Quando você passa o mouse sobre isso, ele é arredondado porque as cores não estão mudando ao passar o mouse, precisamos de uma maneira de mostrar ao usuário que eles estão passando o mouse sobre os elementos específicos. Então, voltando aqui, vamos selecionar isso. Vamos reduzir a lacuna. E então, para o estilo, se formos para o botão um ao passar o mouse, queremos mudar o raio da borda para 50. Então, agora, quando passamos o mouse sobre isso, muda para esse raio de borda circular. Mas porque ainda não fez nada a isso, não está mudando. Então, vamos para Button para passar o mouse. Raio fronteiriço. 51. A última coisa, vamos dar-lhes uma sombra de caixa. Então, botão um. Em circunstâncias normais, você precisa que ele tenha uma sombra de caixa. Ao passar o mouse. Precisamos que a sombra da caixa se espalhe mais. Então, neste momento, temos a sombra da caixa no tamanho padrão, tamanho desfoque de dez. Mas ao passar o mouse, vamos dar-lhe uma sombra de caixa com um tamanho desfocado de, vamos ver, agora, ainda está às dez. Então, se dermos talvez um 20, a sombra da caixa parece se espalhar mais e talvez vamos tentar 30. Gosto mais disso. Vamos fazer o mesmo para botão para caixa de sombra em circunstâncias normais, sombra de caixa, e agora temos uma sombra de caixa. E ao passar o mouse, quero que a sombra da caixa tenha um tamanho 30. Atualize isso. E vamos visualizar as alterações. Tudo bem, então se passarmos o mouse sobre isso, eu gostei do que estamos olhando. Então é assim que adicionar o conteúdo na seção de heróis. Em seguida, vamos ver como estilizar a seção de heróis para parecer um livro como parece aqui. E como adicionar essas partículas. Vejo você em breve. 11. Efeitos de borda personalizados: Estamos de volta. Então é hora de adicionar esse livro como efeitos de borda aqui na parte inferior da seção de heróis. E o que precisamos fazer é selecionar a seção em si. Então, vou selecionar isso. E vamos ao estilo do site. Então vamos para o divisor de forma agora. Não queremos adicionar essa forma aqui na parte superior. Queremos adicioná-lo na parte inferior. Porque se o adicionarmos no topo e disser, reserve, aqui estamos. Livro, estamos adicionando-o ao topo. Não queremos isso. Então volte e diga nenhum. Quer ir para baixo e depois reservar. E lá temos isso. Mas agora está muito alto na seção. Então, o que precisamos fazer é brincar com a altura, digamos até algum lugar lá. Eu gosto disso naquele momento. Mas sinta-se à vontade para torná-lo tão alto quanto você quiser. E também sinta-se à vontade para brincar com todos esses outros efeitos aqui. Porque é tudo sobre o quão criativo você obtém isso. Vou deixá-lo na BU. E você também pode invertê-lo se quiser. Gosto dessa forma. A próxima coisa que queremos fazer é, primeiro lugar, vamos visualizá-lo. Lá vamos nós. Mas vamos aumentar o preenchimento na parte inferior agora que aproximamos a borda do conteúdo, vamos empurrar esse preenchimento ainda mais. Então, voltar enquanto a sessão ainda está selecionada, avançada, isso me fez um 50. Agora, vamos aumentar o preenchimento na parte inferior para cima em algum lugar lá. Na verdade, deixe-me fazer 120 porque eu quero que isso preencha toda a landing page. Então, vamos fazer isso 100. E vamos atualizar isso. E vamos visualizar as alterações. Eu quero que ele vá até o fundo, se possível. Assim. Vamos empurrar o bloco de texto para cima um pouco. Deixe a imagem onde ela está. Selecionarei a coluna que contém o bloco de texto. Vá para Avançado. Ele lida com a margem superior. Assim. Vamos atualizar isso. E é isso que realmente mudamos. Gosto de onde está. Então, agora a próxima coisa que queremos fazer é adicionar essas partículas. E para fazer isso, precisamos adicionar uma extensão Elementor muito incrível chamada pirata net add-ons para Elementor. 12. Adicione efeitos de partículas animadas: Então, entrando em nosso painel, plugins, adicione novo. Vou digitar botnet. Botnet, dependendo de como você pronuncia as palavras. Aqui estamos nós. Temos formulários alternativos Pi. Ao piratear complementos para Elementor. Então é disso que precisamos, 30 mil instalações ativas agora. Ele roubou. Agora. Vamos ativá-lo. E lá temos isso. Então, também tem todos esses elementos adicionados gratuitamente para usarmos. Esses outros estão na versão Pro, mas já temos o que precisamos, quais são as partículas. Então, voltando ao front-end aqui, qualquer elemento que selecionarmos que possa ser editado com o WordNet mostrará as configurações de rede aqui. Então, deixe-me atualizar esta página para que você possa ver o que quero dizer, controlar nossa atualização. E agora, antes de tudo, se eu colapso tudo aqui, temos esses complementos do Power Net para widgets elementares ou pagos, ou parfait free. Portanto, agora está disponível para nós se eu selecionar esta seção, essas alterações na seção de edição. Mas agora observe que temos essa opção perfeita aqui. E se eu selecionar isso, enquanto esta seção ainda estiver selecionada, agora podemos vir aqui e dizer partículas e ligar isso. Agora você não verá nada aqui, mas verá na página de visualização. Então, antes de mudarmos qualquer coisa, deixe-me clicar em Atualizar e vamos visualizar para você possa ver o que já temos. Então, visualize as alterações. E é isso que temos. Então, basicamente, quando estamos editando essas partículas no back-end, podemos vê-las. Teremos que mudar para o front-end para vê-los. Mas podemos começar reduzindo o número de partículas porque se você usar muitas partículas, sua página da web estará carregando lentamente. Mas acho que um 100 ou um 150 é um bom número. Então, vamos fazer 120. E vamos mudar essa cor para talvez um azul. Vamos ajustá-lo até conseguirmos o belo azul. Então, vou usar esse azul. Vou usar esse azul e vou copiá-lo. Vou copiar isso e colá-lo. Então essa é a cor das partículas. Agora, vamos também alterar o link. Cor das chamadas de festa. São essas ligações que estão mantendo as partículas juntas. Eles também são lidos, vamos torná-los azuis. Então, colando esse azul lá dentro. Então vamos atualizar isso. E vamos visualizar as alterações primeiro. Agora essa é uma boa cor. Agora mesmo. São círculos. Podemos alterá-los para serem polígonos ou estrelas, bordas, círculos, imagens, qualquer coisa que você quiser, deixe-me mudá-los para polígonos. E você também pode reduzir a velocidade. Então, agora, vamos deixar isso às quatro. E você pode escolher o que acontece quando você passa o mouse sobre as partículas. Então podemos dizer repulsá-los se você passar o mouse sobre eles. E vamos atualizar isso e ver o efeito. Pré-visualização. Ainda carregando. Agora, quando passamos o mouse sobre eles estavam repelindo-os. E foi isso que dissemos. Então, neste momento, é assim que adicionar esses dois efeitos, os efeitos da borda do livro e o efeito de partículas. A próxima coisa que queremos fazer é criar a próxima seção, que é esta seção animada aqui. Então, faremos isso na próxima lição. Vejo você em breve. 13. Seção de caixa de imagem Parte 1: Parabéns, você terminou a seção de heróis. Agora é hora de criar o resto da landing page. E o que queremos criar é esta próxima parte aqui. E como você pode ver, temos três colunas, mas estas são apenas uma única coluna, mas todas elas são mantidas em uma seção. Então, como fazemos isso? Em primeiro lugar, adicionamos uma única seção de coluna. Então, adicionarei uma única seção de coluna aqui. Primeiro de tudo, vamos adicionar alguma margem superior nesta seção para separá-la da seção de heróis. Então, selecionando-o, vamos para Avançado. Movemos esse link e, em seguida, margem superior de talvez 50. E agora há esse espaço entre eles. Agora, a segunda coisa que precisamos fazer é adicionar um cabeçalho. Então vou em frente e abrirei o painel básico e arrasto um título para lá. Vou apenas copiar esses textos. Saiba como criar seus próprios sites. Claro, você precisa digitar seus próprios textos. Enquanto isso ainda estiver selecionado. Realce isso e cole isso lá. Agora precisamos movê-lo para o centro. Então, sob alinhamento de conteúdo, empurre-o para o centro. E podemos entrar na cor dos Textos de Estilo e mudá-la para algum cinza escuro assim. Observe agora, se formos à tipografia, ainda é Roboto. E isso ocorre porque o roboto foi definido como a fonte global toda vez que adicionamos um novo texto, por padrão, Roboto. Portanto, teremos que continuar mudando toda vez que adicionarmos um novo texto, mas podemos evitar isso. Então, antes de tudo, deixe-me atualizar isso. E então, se formos a este menu de hambúrguer e selecionar Configurações do site, vá para fontes globais. Podemos definir as fontes globais que queremos aplicar em todos os lugares do site. Toda vez que qualquer novo texto é adicionado ao site. Por padrão, ele será definido para essas fontes, dissemos aqui. Então, as fontes primárias, vamos mudá-lo para Montserrat. Vamos para o secundário. Vamos para texto e sotaque. Em seguida, atualize. Tudo bem, então deixe-me fechar isso. Se selecionarmos isso e ir para a tipografia. Primeiro de tudo, vamos mudar isso para monitorar a rota. E se adicionarmos qualquer novo cabeçalho de texto, ele será monitorar automaticamente o rato. Então, por padrão, é Montserrat. Então, deixe-me excluir isso. Tudo bem, deixe-me não excluí-lo porque ainda precisamos disso para esses escalonamento hoje. Então deixe-me apenas copiar isso, realçar isso e depois cole-o lá. Mudanças para aumentar a escala hoje. Enquanto ainda estiver selecionado, vamos colocá-lo no meio. Vamos entrar no estilo, tipografia, cor dos textos. Vamos mudá-lo para essa cor azul escuro. Então, vou selecionar isso, copiar isso aqui. Cole esse azul lá dentro. Acho que quero deixar isso um pouco mais fraco. Então, estilo. Vamos empurrar isso um pouco para cima. Clique em qualquer lugar lá fora. Tipografia. Vamos tornar isso um pouco menor. Até esse ponto, talvez. Em seguida, aumente a escala hoje. Tipografia, pesos de fonte, vamos fazer 800 e vamos aumentar o tamanho. Vamos subir para algum lugar lá, e vamos atualizá-lo. A próxima coisa que queremos fazer é adicionar essas caixas aqui que tenham esse bom efeito quando você passa o mouse sobre elas. 14. Seção de caixa de imagem Parte 2: Verde de volta ao nosso editor. Enquanto ainda estamos dentro desta seção, vamos selecionar, clique nesse ícone lá em cima. Vamos arrastar em uma interseção. E vamos deixá-lo dentro dessa seção. Portanto, a função de uma interseção deve ser solta dentro das colunas. Então, ele adiciona colunas dentro de colunas. Como você pode ver, esta é uma coluna, coluna única, e tem duas novas colunas dentro dela. E aqui podemos adicionar o tipo na caixa aqui. E como você pode ver aqui, temos uma caixa de ícones. Temos uma caixa de imagem aqui por elementos crianças. E temos uma caixa de imagem que vem por padrão com o Elementor. O que precisamos é esta caixa de imagem por kit de elementos. E tem esse botão e alguns textos descrição, título e uma imagem. Então, antes de tudo, vamos adicionar uma boa imagem. Então, entraremos em nossa pasta de ativos. E temos essas imagens diferentes. Selecionarei todos eles, incluindo esse. Já temos isso carregado. Agora clique em Abrir para fazer upload de todos eles. Enquanto esses carregam, vamos apenas escolher este e dizer Inserir mídia. E lá temos isso. Então, agora vamos mudar o que o título diz. Embora isso ainda esteja selecionado, o corpo tem um título. Então, vamos mudar isso para o que ele diz? Design de página de destino ou qualquer categoria ou qualquer categoria de classes que você tenha. Então, talvez esteja tudo bem, o anel. E, em seguida, uma breve descrição dessa categoria. E então, para o botão, podemos mudar o que ele diz. Saiba mais ou comece. E ele pode fornecer um link para que, quando as pessoas clicarem nele redirecionado para um local específico especificado pelo link. E também podemos adicionar um ícone ao botão, mas não vamos adicionar isso por enquanto. Então, a próxima coisa que queremos fazer é estilizar toda a caixa de imagem. Então, começando com a imagem, acho que somos bons, mas agora temos o corpo, um título. Então, vamos aqui para o título, e podemos mudar a cor do título para essa cor. Também podemos aumentar o tamanho se quisermos. Clique em Topografia, vamos aumentar o tamanho ao nosso gosto. Acho que vou deixar isso por isso. Gostei da aparência da descrição do texto, então não tocarei nisso. Recolha o botão. Quero alterar o tipo de fundo de cor para algum cinza fraco. Isso significa que os textos devem ser escuros. Então topografia. Espere. cor dos textos deve ser deixe-me mantê-lo tão azul, aquele azul escuro. Eu ainda o tinha na minha área de transferência. E ao passar o mouse, o texto deve mudar para branco. E o plano de fundo deve mudar para um 24. Assim. E agora que parece bom o suficiente, podemos ir em frente e excluir isso. E depois duplique isso uma e duas vezes. Atualize isso. E vamos rever as alterações. Tudo bem, então vamos rolar para baixo. Claro que agora você notará que essa é uma maneira básica de apresentá-la. E, na verdade, algumas pessoas gostam disso sem a sombra e os cantos arredondados que temos sobre isso. Mas eu quero te mostrar como fazer isso. Então você sabe como fazer isso, mesmo que você não vá fazer isso, mesmo que você vá deixá-lo assim. Então, vamos selecionar a coluna que está segurando esta. E vamos para a borda de estilo. Vamos dar-lhe um raio de borda de 20. Então você pode ver o raio da borda agora. E o que precisamos fazer é dizer sombra de caixa. E agora você vê que ele tem aquele canto arredondado. A próxima coisa que vamos fazer é ir para o Advanced, dar-lhe uma margem de dez. E agora isso o afasta do resto. E agora que estamos satisfeitos com isso, oh, precisamos fazer é clicar com o botão direito do mouse e copiar. Em seguida, clique com o botão direito do mouse nesta coluna e cole este bloco é aplicado ao estilo de colagem. E isso também terá os mesmos estilos ruins e fará o mesmo com esse estilo de pasta. Agora uma coisa que você notará é que isso, depois de adicionar a margem, esta coluna foi empurrada para dentro à esquerda, mas queremos que seja até o n à esquerda. E este deve ser todo o caminho até o fim à direita. Mas este deve ser empurrado para dentro em ambos os lados. Então, para este, podemos quebrar esse link. E então, à esquerda, podemos dizer, queremos que ele tenha uma margem de 0, e agora começa desde o início. E para este, quebra avançada esse link à direita. Queremos que ele tenha uma margem de 0. Observe aqui, se removermos isso. Mas agora isso permanecerá intacto, então é empurrado para dentro de ambos os lados. E outra coisa, vamos selecionar essa coluna para reduzir essa opacidade dessa sombra. Entre na borda do estilo, sombra da caixa. Vamos entrar aqui. E vamos reduzir a opacidade para torná-la menos intensiva assim, para que seja apenas sutil. E então vamos aumentar o tamanho do desfoque para talvez 30s, ok? E agora que está melhor, vamos fazer o mesmo com esses outros dois. Fronteira até algum lugar lá. Selecione esse tipo 30. E o terceiro também. Borda 30. Agora observe que é tão intensivo, precisamos reduzir a opacidade até algum lugar. Em seguida, atualize isso e vamos visualizar as alterações. Certo? Então, agora rolando para baixo, é o que temos. Então, a próxima coisa que queremos criar é esta seção aqui com este acordeão. Então, vamos ver como criar isso na próxima lição. Então, vejo você em breve. 15. Seção de acordeão: E bem-vindo de volta. Agora é hora de criar essa seção de acordeão. E este aqui é o acordeão. Portanto, observe como é apenas um item que está aberto a qualquer momento. Então, se você clicar em outro item aqui, o anterior fechará e o próximo se abre. Então, vamos ver como adicionar isso à nossa landing page. Agora, mudando para o nosso editor, o que precisamos fazer é adicionar uma seção de coluna dupla. Como você pode ver aqui, temos uma coluna de imagem e uma coluna de bloco de texto. Então, entrando aqui, selecione uma seção de coluna dupla. Então vamos dar uma margem no topo aqui. E eu quero dar a ele uma margem de talvez 100. Então, selecionando essa seção, avançado, quebre esse link 100. E agora temos um bom espaçamento entre as duas seções. Aqui, quero adicionar uma imagem. E enquanto isso ainda estiver selecionado, vamos seguir em frente e selecionar uma imagem para soltar lá. Então, vamos selecionar isso e inserir mídia. E aqui precisamos adicionar alguns textos antes de adicionar o acordeão. E uma coisa que acabei de lembrar é que não especificamos qual nível de títulos esses são. Então, sim, isso é um H2. Vamos deixá-lo como um H2. Então eles devem ser um H3 indo para o conteúdo. Três anos de idade. E, como você pode ver, temos diferentes níveis de títulos. Você pode ir em frente e Google para ler mais sobre o que são e como usá-los melhor ou melhor ainda, você pode assistir minha aula de SEO aqui no Skillshare e aprender a trabalhar com os títulos sobre suas landing pages para melhor otimização do mecanismo de pesquisa. Confira meu perfil para essa aula. Tem apenas 60 minutos de duração. Agora podemos ir em frente e criar novos títulos aqui. Assim. Ou, como você percebe aqui, eles são apenas os mesmos títulos repetidos em todo o site. Então, o que podemos fazer é basicamente duplicar esses dois. Vou duplicar isso e arrastá-lo. E se você arrastar e chegar ao final da página e ela não estiver mais rolando. Enquanto você ainda está mantendo pressionado o botão do mouse. Role com a roda do mouse e solte-a quando o indicador azul aparecer. Vamos voltar aqui. Duplique a idade de três anos. Arraste-o enquanto ainda o mantém pressionado. Role com a roda do mouse e solte isso lá embaixo. Agora, enquanto isso ainda estiver selecionado, vamos alinhá-lo à esquerda e fazer o mesmo por isso. Em seguida, vamos selecionar esse ícone e arrastar para um editor de texto. E, por padrão, ele tem algum texto de espaço reservado. Por enquanto, vou apenas duplicar esses textos porque presumo que você digite seu próprio texto se estiver construindo essa landing page para um site real, que eu espero que você esteja. Agora acho que isso é suficiente para mim. Vamos atualizar isso. Agora vamos em frente e clique neste ícone para revelar que os elementos querem mais. E no widget de pesquisa, vou digitar acordeão. E o preenchimento automático trará os diferentes tipos de acordeões que temos aqui. Então você notará que temos três acordeões. Um que vem por padrão com o Elementor, que é trazido pelo login do parceiro. Este é um acordeão de imagem e temos um acordeão chave de elementos. Este é o que precisamos. Vou arrastá-lo e soltá-lo lá quando o indicador azul aparecer. E agora estamos prontos para começar a editá-lo. Então, enquanto ainda estiver selecionado, podemos entrar. A primeira opção aqui em conteúdo é acordeão. E esses são os três que já estão pré-preenchidos com texto ou conteúdo. Então, se você clicar neste, o expandirá. Então, vamos clicar neste para expandi-lo. E agora você pode digitar o que quiser lá e isso mudará em tempo real para o certo assim. E se você quiser mudar o título, é claro, mude o título aqui. Tudo bem, e isso mudou em tempo real. Como faço para ensinar no título desse acordeão? Então podemos desmoronar isso. Faça o mesmo por isso. Quantos anos tem a Estátua da Liberdade? E lá temos isso. E se clicarmos nisso, o outro se fecha automaticamente. Então, também podemos alterar esse texto. Então, isso é bem simples. Outra coisa que você pode querer saber é como adiciono mais de acordo? Então, se entrarmos em colapso, como adiciono mais? Basicamente, basta clicar no ícone Duplicar aqui. E você pode duplicar quantas vezes quiser. E todos eles aparecerão aqui. Apenas certifique-se de alterar todo o conteúdo em cada um deles. A próxima coisa que queremos fazer é talvez gostaríamos de mudar esses ícones. Quando estiver ativo, mostra uma seta para cima e quando ela está fechada, mostra uma seta suspensa. Assim, você pode alterar esses ícones clicando lá. Você abre todos esses ícones e pode escolher o que quiser. Vou deixá-los na configuração padrão. E agora vamos entrar nesse estilo. Claro, agora, se entrarmos em colapso esse título, temos quatro opções diferentes. O título e a descrição, este texto aqui, a borda e o ícone. Assim, podemos alterá-los, por exemplo, vamos mudá-lo para um azul. E quando estiver aberto, podemos mudá-lo para então agora que isso está aberto, essa cor laranja. E quando está fechado, é tão azul. Você pode fazer isso de qualquer cor. Então, se abrirmos isso agora transforma essa cor. Então, vamos atualizar isso e ver as alterações. Datas, visualize as alterações. E lá vamos nós. Então, rolando para baixo, nosso acordeão parece incrível e está funcionando corretamente. A próxima coisa que eu quero fazer é trabalhar neste balcão aqui. Vamos ver como fazer isso na próxima lição. Então, vejo você em breve. 16. Seção de contador: Ei lá, bem-vindo de volta. Então, agora que criamos a seção de acordeão, é hora de criar a seção do contador. Indo para nossa página de referência aqui, estou rolando para baixo. Primeiro de tudo, eu recarreguei a página para você ver as animações. Lembre-se, faremos essas animações antes do final da aula. Então não se preocupe, eu só queria mostrar como o contador reage e é assim que ele faz isso. Saltando para o nosso editor mais uma vez, adicionaremos uma única seção de coluna. E, claro, como sempre, enquanto ainda estiver selecionado, vá para dentro avançado e precisamos adicionar uma margem no topo. Então quebre isso, e vamos dar um 100. E agora temos esse espaçamento agradável mais uma vez. A próxima coisa que queremos fazer é dar uma boa cor de fundo. E eu tinha dado a este uma laranja. E as partículas por trás dele eram uma laranja escura, ou você pode chamá-lo de marrom. Então, vamos fazer isso. Enquanto isso ainda estiver selecionado, vá para a cor de fundo de estilo. Estamos usando o clássico 1524. Vamos atualizar isso. E agora, com o conjunto de cores de fundo, vamos adicionar as partículas. Vá para PAF, partículas de via. Vamos ativá-los. E vamos escolher talvez algo como cem, cem. E aqui. Vou digitar F 1524, mas depois arrastarei isso para baixo para torná-lo um pouco mais escuro assim, só para que eles fiquem um pouco mais escuros do que o F 1524. Em seguida, selecionarei isso, copiarei e, em seguida alterarei a cor também para a mesma cor. Então cole-o, e agora eles têm a mesma cor. Podemos reduzir a velocidade aqui também para a velocidade das partículas. Gosto que seja repulsivo. Mas você pode escolher qualquer outra opção que você quiser aqui. E posso escolher polígono aqui. E vamos atualizar isso. E antes de visualizar as alterações, vamos em frente e adicionar uma interseção com quatro colunas. Então clique nesse ícone na interseção deles. Vamos deixá-lo lá dentro. Por enquanto. É claro que, por padrão , ele derruba duas colunas. Dentro desta primeira coluna. Vamos adicionar um contador. Então clique nesse mais lá e aqui digite contador. Arraste-o aqui e solte-o na primeira coluna lá. Agora, a primeira coisa que precisamos fazer é mudar os números. Então, dependendo de quantos, dependendo do que isso é. Por exemplo, se alunos matriculados. Então, se você tem talvez 1200 alunos, ou se tiver mais de 1200 alunos, mas dentro desse intervalo você pode adicionar um plus, gel C, 100 plus. E agora vamos em frente e mudar as cores dessas estatísticas. Vamos mudar a cor para branco no número e no título. Também é mudá-lo para branco. E você notará por padrão que as fontes são Montserrat porque aplicamos Montserrat na fonte global. E agora que estamos satisfeitos com esse contador, tudo o que precisamos fazer é remover isso e depois duplicar isso. Já fizemos algo parecido com isso, e isso é o bom da Elementor. Então lá vamos nós. Temos quatro contadores e podemos editar cada um individualmente. Antes de fazer isso, vamos selecionar a seção em si. Porque precisamos separar essa borda do conteúdo porque o conteúdo está muito próximo da borda. Então, selecionando a seção principal e, em seguida, vá para o preenchimento avançado, remova esse link. Podemos aumentar o preenchimento superior para algo como 50. E para o fundo 50 também. Atualize isso. Em. Agora vamos visualizar as alterações. Vamos rolar para baixo. Lá vamos nós. Muito bom. Então, agora cada uma dessas estatísticas será sobre algo diferente. Então isso pode ser, o que temos aqui? Anos de experiência, taxa de conclusão do curso. Então, também temos porcentagens e tudo isso. Então você já pode adivinhar isso. Para adicionar uma porcentagem, você só precisa adicioná-la ao sufixo. E você pode dizer talvez 8080 por cento. Desconto, desconto e garantia de 100% de satisfação. E o último, o que você quiser fazer isso. Então, digamos que 700 retorne os alunos. Então talvez eles gostassem tanto dos seus cursos que voltaram. Vamos visualizar as alterações. Vamos rolar para baixo. E é assim que fazer isso. Incrível. Então, a próxima coisa que queremos fazer é, é claro, criar esta seção, que é praticamente parecida com esta seção. Então, vamos ver como fazer isso na próxima lição. 17. Projeto do curso: No final da aula, você terá a chance de reforçar o que aprendeu criando uma página da web do zero por conta própria. E aqui está o contexto do projeto. Um dono de uma loja de roupas online, vamos chamá-lo de John. Na sua vizinhança gostaria que você construísse uma landing page para a nova linha de produtos. Então eles têm produtos de roupas novos que querem vender. E eles querem criar uma landing page para essa nova linha específica de produtos. Eles entraram em contato com você por causa de sua excelente reputação de web design na comunidade. Alguém disse a eles que você é muito bom no que faz. Agora, o site que eles executam é construído com o Elementor, então eles precisarão de alguém que saiba como usar o Elementor. Então, crie uma linda landing page que converta as pessoas que visitam essa landing page em compradores. John forneceu todos os ativos que você precisa adicionar nessa landing page. E por ativos, quero dizer imagens. Para fazer isso, comece baixando a pasta de ativos do projeto na descrição abaixo e use essas imagens para criar um site. Lembre-se de criar um cabeçalho fixo para permitir que as pessoas naveguem pelo site à medida que rolam para baixo. Certifique-se de ter uma seção de herói que atrai a atenção que tenha uma boa declaração H1 conspícua, resumindo o que é a página e fique tão criativa quanto você quiser quando se trata do seção de corpo que o resto da landing page, além da seção do herói e da seção de rodapé, brincam com os vários elementos elementares que não tocamos na classe porque você pode ter notado, não olhamos para todos os elementos que esse elemento tem a oferecer enquanto estamos construindo a página. Lembre-se também de adicionar alguns efeitos de movimento, os vários elementos da sua landing page e tornar a página da Web responsiva. Faça com que fique bem em diferentes tamanhos de dispositivos. Depois de terminar sua landing page, faça uma captura de tela de página inteira usando uma extensão do navegador como ir para a página inteira e faça o upload para a galeria do projeto. Vou dar uma olhada em todas as capturas de tela da sua landing page e fornecer feedback. E isso também lhe dará uma boa maneira de mostrar o que você aprendeu até agora e receber feedback de outros alunos. Então, para começar, baixe a pasta dot zip de ativos do projeto na seção de descrição abaixo. Aproveite o projeto. 18. Seção de cursos em destaque: Então, agora é hora de criar a seção que vem depois do contador, que é essa seção que tem os cursos mais recentes ou os cursos em destaque. Então, entrando em nosso editor, é claro, a próxima coisa que precisamos fazer é adicionar uma seção. Mas como esta seção é assim, esta seção é tão semelhante a esta, por que não duplicar toda essa seção e, em seguida, personalizá-la para aquela parte específica. Então, vamos duplicar toda a seção assim. Agora estamos aqui. Vou arrastar isso. E então vou começar a rolar com roda do mouse enquanto mantém pressionado o botão do mouse. E quando esse indicador azul aparecer, vou deixá-lo lá. Agora tem uma margem de 50 no topo porque foi o que dissemos. Para esta parte. Eu quero aumentar isso para um 100 ou talvez um 150. Então, selecionando a seção, adicione uma lá. Agora temos 150 espaçamentos lá. Então, vamos alterá-los para selecionar um curso agora. E agora, tudo o que você precisa fazer é chegar a esta caixa de imagem. Então, vamos selecionar isso e a imagem, você pode alterá-la para qualquer imagem que represente esse curso específico. Recolha isso para o corpo, alterou o título para o nome do curso. Por exemplo, introdução à mecânica. E então, claro, uma breve descrição. E então eles podem começar imediatamente. Lembre-se, são como categorias dos diferentes cursos. Portanto, esta pode ser uma categoria quatro, web design e animação. Então, essas são categorias aqui em cima. Mas quando chegamos aqui, esses são cursos específicos. E como esta seção está mantendo cursos em destaque, você pode duplicar essa interseção para que você tenha cerca de seis cursos em destaque na página inicial. Vamos atualizar isso. Vamos mudar isso para algo como modelagem no Blender. O terceiro pode ser fundamentos em JavaScript. Vamos atualizar isso. E vamos rever as alterações. Então, rolando para baixo. Tudo bem, então lá vamos nós. Então, agora que terminamos essa seção, vamos ver como criar essa seção de aprendizado individualizado. Então, vejo você na próxima lição. 19. Seção de listas: Bem-vindo de volta. Aqui vamos nós de novo. Você notará que esta seção, a seção de acordeão, se parece muito com essa seção de aprendizado individualizado. Só que não temos um acordeão aqui, temos uma lista. E é nisso que estaremos focando nos próximos minutos. Caso contrário, tudo o resto é o mesmo. Então, pulando para o nosso editor, o que precisamos fazer é duplicar esta seção também. Então eu vou arrastá-lo. Quando chegarmos lá, começarei a rolar com a roda do meio do mouse. E quando chegarmos lá, vou deixá-lo cair. Ele vem com todas as configurações, incluindo a margem na parte superior. E agora tudo o que precisamos fazer é antes de tudo, reverter isso com a imagem desse lado. Então eu removerei o acordeão. E agora ficamos com esse texto legal que podemos editar. Podemos atualizar dois pés nessa seção. Então, vou copiar isso. Selecione isso, cole-o lá. Copie isso, selecione isso, cole-o lá. Atualize isso. E agora o que precisamos fazer é ir para esse ícone. Clique neste ícone. Aqui. Vamos digitar a lista. E temos uma lista diferente aqui. Só precisamos do normal, bom que vem com o Elementor por padrão. Vamos soltá-lo lá e ele tem um ícone e algum texto. Então, vamos abrir o item da lista um e vamos mudar o que ele diz lá. Então eu vou apenas copiar isso basicamente lá. E lá vamos nós. Vou repetir o mesmo para os dois. Agora você notará que esses são ícones diferentes para que possamos sempre alterá-los. Então, para este, ainda vou selecionar um carrapato ou jato. Então, vou selecionar isso. Insira para o segundo. Verifique também. E agora temos três dentes. Atualize isso. E vamos visualizar as alterações. Vamos rolar para baixo e ver o que temos. Lá vamos nós. Uma bela e bela seção. Simples, não há muita coisa lá. Então, vamos em frente e adicione um bom botão aqui abaixo do texto. Como você pode ver aqui, temos um call to action. Este é o momento em que adicionamos esse botão que está no painel básico. Então, vamos arrastar o botão logo abaixo do texto. E, embora ainda esteja ativo, podemos mudar o que diz. Então, saiba mais ou comece. Agora, é nosso chamado à ação. É o estilo coincide. E, claro, o link está aqui. Onde quer que você queira que as pessoas sejam redirecionadas quando clicarem no botão, está aqui. E se você quiser que esse botão abra uma nova guia, em vez de redirecionar as pessoas desta página, você sempre pode clicar nesta roda dentada e abrir o link em uma nova janela. Isso abrirá uma nova guia. Agora entrando no estilo. Vamos remover esse preenchimento. E isso quebrará o preenchimento padrão no botão. E então podemos definir o nosso próprio. Então, à esquerda, vamos dar um 50. E à direita o mesmo. Em seguida, superior e inferior, 1515. Vamos dar um 70 à esquerda e à direita. Certo. E então vamos aumentar o espaçamento entre o botão e o texto na lista aqui para que possamos selecionar a lista em si. Margem avançada e, em seguida, aumente a margem na parte inferior. Pressionou o botão para baixo, emite, reduza a margem na parte superior. Reduza esse espaçamento entre ele e o bloco de texto aqui. Atualize isso. E também vamos mudar a cor desse botão. Então, selecione esse estilo de botão. Vamos para a cor em pairar, querendo ser tão azul. Então, deixe-me selecionar esse estilo de texto. Copie isso. Selecione este botão de estilo de botão, passe o mouse, a cor. Vamos colá-lo lá. Então, quando alguém paira sobre ele, ele muda para isso. E quando alguém paira sobre ele, também podemos definir quando é o cilindro pairar, a animação, talvez algo como Bob. E isso é lâmpada. Vamos atualizar isso e , em seguida, visualizar as alterações. Então, rolando para baixo. Lá vamos nós. Parecendo incrível. Então, o que vem a seguir? Então, agora é hora de trabalhar na seção de depoimentos. E como você pode ver, também tem as partículas e algum fundo acinzentado. Vamos ver como fazer isso na próxima lição. 20. Seção de depoimentos: Bem-vindo de volta. Então, agora estamos criando essa seção de depoimentos. Então, sem perder mais tempo, vamos pular para o nosso editor. E como você já deve ter adivinhado, vamos adicionar uma única seção de coluna. A primeira coisa, é claro, é selecioná-lo. E, claro, a primeira coisa é ir para a margem Avançada. Vamos dar a ele uma margem superior de 100 para separá-lo da seção anterior. E então vamos começar dando a ela essa cor de fundo. Então entre no estilo, tipo de fundo, clássico. Vou aqui e depois darei um pouco de cinza próximo ao branco, não muito escuro. Gosto disso. A próxima coisa que precisamos fazer é selecionar o sinal de mais aqui. E você notará aqui que temos esse H2 e H3. Então, podemos simplesmente duplicar isso. Duplique isso, solte-o lá. Duplique isso também. E solte-o logo abaixo da idade de dois anos. E então, claro, vamos empurrá-lo para o centro. Selecione isso, empurre-o para o centro. E agora podemos adicionar nossos depoimentos logo abaixo deles. Então, indo para este ícone, vou digitar depoimentos testando toupeira. E o que precisamos é desse testemunho por elementos de crianças QI, luz infantil. Vou arrastá-lo e soltá-lo ali mesmo quando o indicador azul aparecer. E, por padrão, ele já está selecionado. Mas o que eu gosto é este. Vá em frente e escolha o que você quer. E, por padrão, está mostrando apenas um depoimento por slide. E isso porque dentro das configurações, os slides a serem exibidos estão definidos como um. Então, vamos configurá-lo para três slides para rolar. Claro, isso é bem simples. Isso significa que quando você está rolando, ele precisa rolar apenas um slide. Se você tiver vários depoimentos, você pode configurá-lo para dois ou três depoimentos por rolagem. E vá em frente e brinque com todas essas outras configurações não vai se aprofundar nisso. Só queremos preencher cada depoimento com algum conteúdo. Então, vamos fechar as configurações e ir para o depoimento. Para o depoimento número um, você pode dar um nome ao cliente. Portanto designação, gerente de marketing, coma, talvez a empresa seja sites de janela de vidro sites de janela ou algo desse tipo. Que tipo de nome existe? E então temos a revisão do depoimento. Então vou apenas ir em frente e copiar esse depoimento aqui. Tudo bem, não estou habilitado, tudo bem, não consigo destacar isso, então vou copiar este texto. Copie isso. E vamos colá-lo aqui. Vamos reduzi-lo um pouco. Sim, eu gosto disso. Então vamos entrar em colapso de volta. Vá para o segundo depoimento. Chamas Timóteo. Ela tem um depoimento e vamos adicionar mais um, então eu vou duplicar isso. E agora temos duas chamas Timóteo. Vou mudar o segundo. Isso é atualizar isso. E agora temos quatro depoimentos. A razão pela qual temos quatro depoimentos em vez de três é porque também precisamos dele para poder rolar. Então, está rolando porque temos um depoimento extra para mostrar. Se você tiver três, não haverá rolagem. Em seguida, vamos entrar no estilo. E se eu recolher o layout, temos várias configurações aqui nas quais podemos trabalhar. Então, vamos começar com uma classificação. Podemos mudar a cor para acompanhar nosso esquema de cores. Então também podemos recolher isso e alterar o ícone de cotação. Então, por enquanto, é tão azul. Eu realmente não me importo com a aparência, então não há problema com isso. Então, não vou tocar nisso. Em seguida, temos o layout. Vamos para o layout e o raio da borda, digamos, vamos mantê-lo em 20 para que ele tenha um canto arredondado. Assim. Recolhido o layout. E acho que gosto de como parece até agora. Então, a próxima coisa que queremos fazer é entrar no depoimento do conteúdo. E para cada depoimento, precisamos adicionar uma imagem. Então eu abri o avatar do cliente Bennett Daimler. E entraremos em nossa pasta de ativos. Eu já havia preparado algumas imagens dos caras. Então, vamos começar com Bennett. Assim. Vamos colapsar isso. Está aberto chamas Timothy. Vamos fechar isso. Temos Barbara colapso isso e temos temos Alexandra atualizar isso. Então, vamos visualizar as alterações. Rolando para baixo. Lá vamos nós. Nosso depoimento está funcionando, mas agora observe que não temos algum preenchimento aqui e, claro, aqui em baixo. E também não temos as partículas. Vamos resolver isso. Então, selecionando a seção em si. Porque antes de tudo, comece com o preenchimento. Vou quebrar isso. E então, no topo, precisamos de um preenchimento 50. Na parte inferior, precisamos de 50. Então, hoje em dia, esse bom espaçamento assim. E então vamos adicionar algumas partículas. Então, vamos ligar isso. E precisamos, talvez, digamos 90. E então, para a cor das partículas, queremos dar um pouco de cinza mais escuro que o fundo para que fique visível. E vamos copiar esse cinza. Copie isso. Clique em qualquer lugar lá. Vamos colá-lo aqui dentro. Reduza a velocidade para quatro, mas tudo depende de você. Então vamos atualizar isso. Efeito excessivo. Atualize isso e vamos visualizar as alterações que rolam para baixo e veja o que temos. Sim. Então, agora está parecendo muito melhor. Podemos deixar essas partículas um pouco mais escuras. Eles parecem estar gritando demais. Então, entrando aqui, vou arrastar isso um pouco para cima para deixá-lo desmaiar. Copie isso. Cole-o lá. Atualize lá. Vamos visualizar as alterações mais uma vez. Rolando para baixo todo o caminho até o fundo. Então agora eles parecem muito melhores. Eles não estão muito escuros. E é assim que criar a seção de depoimentos. Em seguida, vamos ver como criar a seção call to action que tem o formulário de inscrição antes de criarmos a pasta. Então, vejo você na próxima lição. 21. Seção de formulário de chamada para ação: Estamos quase acabando com o conteúdo da landing page. Agora só temos a seção call to action que tem um formulário e o rodapé. Então, vamos seguir em frente e criar esta seção. Então, pulando para o nosso editor, é claro, o que precisamos fazer é adicionar uma seção de coluna dupla. E vamos dar-lhe uma margem superior de cerca de 100100 e uma margem inferior de 100 também. E isso porque, como você vê aqui, quando terminarmos essa seção, precisaremos de algum espaçamento entre a seção e o rodapé. E lembre-se, estamos criando a comida é separadamente, assim como fizemos com o cabeçalho. Então, irei em frente e atualizarei isso. E aqui, podemos acrescentar, podemos duplicar isso. Então, vou arrastar isso para aquela coluna. E então vamos apenas copiar isso. Então clique nisso. E então aqui, vou colar o texto. Alinhe-o à esquerda assim. Então, aqui, vamos em frente e adicionar um código curto. Então, ao clicar nesse plus, revelará essa área e podemos digitar código curto. Apenas digitando um filtro curto exibirá essa opção e podemos deixá-lo lá dentro. Então, agora o que precisamos fazer é ir para o back-end em nosso painel e criar um formulário. E então o formulário terá um código curto, um pequeno código que podemos entrar, colar aqui. E o formulário será exibido aqui nesta seção. Então, vamos voltar para dentro do nosso painel. Vamos para Plugins e Adicionar Novo porque ainda não temos nenhum plugin de formulário instalado, para que possamos ir em frente e instalar. Meu plugin de formulário favorito é chamado de formulador. Ele só tem tudo o que preciso simples de usar. Então vou em frente e digitar o formulador. E é por WP MU Dev com 300 mil instalações ativas em 948 avaliações cinco estrelas. Então, vou instalá-lo agora. É um plugin muito incrível que eu gosto de usar porque muitos de seus recursos gratuitos são prêmios na maioria dos outros plug-ins de formulário. Por isso, oferece recursos premium gratuitamente. Certo? Então, vamos seguir em frente e ativar. E lá vamos nós. Ele agora está instalado. E você o encontrará quase na parte inferior deste menu aqui. Então vou formar água e formas para limitadores. Clique por um minuto ou para que possamos acessar sua landing page dentro do painel. Tudo bem, então é assim que parece. Temos a opção de criar um formulário, criar qualquer tipo de formulário a partir de um dos nossos modelos pré-fabricados ou construir o meu do zero. Então, criarei e já construímos formulários. E queremos criar um formulário de inscrição no boletim informativo. Então, selecionarei isso e continuarei. Então vou dar um nome, inscrever e criar. E aqui vamos nós. Por padrão, ele é pré-preenchido com o primeiro nome e endereço de e-mail, depois o botão de inscrição e podemos visualizá-lo. Então, o primeiro nome, endereço de e-mail e assinatura. Vou fechar isso e publicarei. Agora temos esse código curto. Lembre-se que mencionei o código curto. Agora podemos copiar isso clicando neste ícone aqui. Agora, o atalho foi copiado com sucesso. Ou se eu fechar isso, você pode ir para essas rodas dentadas e copiar código curto e ainda recebemos a mesma mensagem. E com esse código curto copiado, você pode voltar à nossa página aqui e colá-lo aqui. Se eu aplicar essas alterações de atualização à página, clique em Atualizar. Vamos visualizar as alterações. Role para baixo. E lá vamos nós. Um bom formulário de inscrição que tem um call to action. Então, o que precisamos fazer é antes de tudo mudar a cor desse botão para rimar com o resto dos botões aqui no site. Então, vamos transformá-lo em laranja. Voltando para dentro do nosso painel, dentro do formulador, vamos entrar na aparência deste formulário. E vamos remover essas bordas antes de tudo, escolhendo a opção plana. Existem outras opções aqui, mas eu gosto de plano. E então vamos às cores e selecione o traje. Não queremos usar as cores padrão. E para o botão enviar, Selecione. Clique nesse botão lá. E vamos digitar F 1524. E está se duplicando. Não sei por que f h n igual. Sim. E então, ao passar o mouse, queremos que seja talvez esse azul escuro. Então, eu queria selecionar essa cópia de estilo de volta. Então, indo para cá, basicamente lá. Então, agora, se o visualizarmos , sim, assim, feche isso. E quando está em foco, querendo ter a mesma cor azul escuro, geralmente tenho a mesma cor de foco ou cor ativa que a cor do mouse. Tudo bem, então vamos atualizar as mudanças. Vamos voltar para nossa página. Selecione este formulário. Clique em Aplicar. Tudo bem, então vamos rolar para baixo o formulário em si. Então, vamos clicar em visualizar as alterações. Role para baixo. E lá vamos nós. Ao passar o mouse, come esse azul escuro. Agora, outra coisa que você pode querer fazer é talvez adicionar ou remover campos aqui. Portanto, esta não é uma aula de quatro minutos. Há muitos tutoriais no YouTube sobre como usar esses plugins específicos para criar formulários. Mas voltando para dentro dos campos, se você não quiser escolher o primeiro nome da pessoa, você pode excluí-lo. E agora você fica apenas com o campo de endereço de e-mail. Vamos atualizar isso. E vamos para o front-end. Selecione o Formulário, aplique as alterações mais uma vez. Tudo bem, então vamos em frente e visualize as alterações. Então, rolando para baixo. E lá vamos nós. Então, agora que terminamos com essa seção de call to action, vamos ver como criar a pasta. Na próxima seção, verei você em breve. 22. 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. 23. Crie o rodapé: Agora é hora de criar o rodapé. Antes de avançarmos e adicionar as animações nos diferentes elementos do site e também tornar o cabeçalho fixo. Então, vamos em frente e crie uma pasta primeiro. E, claro, como mencionei um pouco antes, criará a foto separadamente da mesma forma que criamos a cabeça. Então, vou clicar neste menu de hambúrguer e sair para o painel porque terminamos com o conteúdo corporal. Vou sair novamente. Agora vamos para os elementos. Mantenha o cabeçalho, o rodapé ou o passeio. Vamos apenas ir em frente e dizer Adicionar novo. Aqui. Vou dar-lhe uma pasta de nomes. E então o tipo é uma pasta. Você deve estar disponível em todo o site e ele deve estar ativo. Então, vamos salvar as alterações. Aqui vamos nós. Então, vamos editar. Editar conteúdo será redirecionado para o front-end onde agora podemos projetá-lo. Então, aqui estamos nós. Agora, nesta lição, quero mostrar como usar modelos de kit de elementos. Agora, ao longo das aulas, você deve ter notado que eu estava usando esse ícone aqui. Mas o que esses outros ícones fazem? Este é o ícone de modelo do elementor padrão. Quando você clicar nisso, você será levado a modelos que foram criados pelo Elementor. E você também pode ter acesso aos seus próprios modelos, se tiver feito upload de algum. Também temos blocos, blocos que você pode usar para criar as diferentes partes do seu site. E este aqui é por kit de elementos. Então, este é o que estamos interessados. E quero mostrar a você como projetar como economizar tempo usando diferentes modelos fornecidos por alguns desses plugins. Então, como você pode ver, eu abri e fui diretamente para seções. E aqui temos modelos de rodapé, seções de cabeçalho. Temos seções de call-to-action, acordeão de imagem para lojas de beleza. Muitos modelos que você pode importar para sua página gratuitamente. Então este é o que eu quero importar, então vou clicar em Inserir. E lá vamos nós. Uma bela foto já criada para nós. Quero arrastar isso , deixe-me ver. Eu quero arrastá-los para eles. Quero me livrar disso. Então, ficamos com isso. E se eu selecionar a seção em si e entrar avançado, você notará que temos 400 margem superior. Então eu quero me livrar disso porque se deixarmos isso em 400, quando chegar a este ponto, depois dessa chamada à ação, Antes de chegarmos lá mais adiante, teremos um espaço ridiculamente enorme que não precisamos porque já adicionamos uma margem inferior de 100 neste call to action. Então, agora que está definido, vamos em frente e substitua esse logotipo pelo nosso. Então, vou selecionar isso. E quando você importou o modelo, ele adicionou algumas imagens de espaço reservado padrão como essa. Então, não fique perplexo e se pergunte quais VCs. Então, quero selecionar meu logotipo e inserir mídia, e lá vamos nós. Muito bom. Você também pode atualizar esse texto para o que quiser dizer. E podemos ir em frente e estilizá-lo. Então, topografia, mude para Montserrat. Isso já é Montserrat e esses são links úteis. Você pode mudá-los para o que quiser que eles digam. Então, a próxima coisa que eu quero fazer é mudar a cor dessa comida, esse pano de fundo. Então, selecionando a seção em si, tocarei neste lugar e copiarei esse azul marinho. E eu vou aqui. Embora este ainda esteja selecionado o plano de fundo do estilo, cole-o lá e atualize. Também sinto que deveria arrastar isso para lá. Para equilibrá-lo. Atualize isso. Vamos visualizar as alterações. Tudo bem, então agora você notará que esta é uma assinatura. Agora, inscreva-se hoje, call to action. Então isso significa que precisamos de um formulário aqui. E podemos realmente usar o mesmo formulário que criamos. Então, vou copiar esse código curto. E depois voltando aqui, vamos adicionar um código curto. Solte-o logo abaixo disso e, em seguida, vamos colar isso lá. Atualizado. Vamos rever as alterações ou pedalar assim. Então, agora que isso se tornou mais alto do que isso, acho que devemos pegar ícones muito sociais. Vou arrastá-los e soltá-los lá. E vou aumentar a margem superior neste texto aqui para dar espaço para respirar no topo. Em seguida, vamos visualizar as alterações. E lá vamos nós. Então é assim que criar uma pasta. Você pode ir em frente e brincar com todo o resto, com todo o conhecimento que você ganhou até agora, essa não será uma tarefa muito difícil de cuidar. Fato, isso é um desafio para você. Veja como você pode personalizá-lo ainda mais. Agora, queremos ver como a página fica totalmente junto com a foto. Então eu quero entrar nas páginas do painel. E então eu quero clicar em Exibir em casa. Assim, podemos dar uma olhada de cima para baixo, rolando para baixo a partir de cima. Lá vamos até o rodapé. Então, a próxima coisa que queremos fazer agora você notou é que o cabeçalho não é pegajoso e esses elementos diferentes não são animados. Precisamos adicionar alguns efeitos de movimento aos nossos elementos. Vamos fazer isso na próxima lição. Antes de prosseguirmos e tornamos toda a landing page responsiva em diferentes dispositivos. Então, vejo você em breve. 24. Cabeçalho adesivo: E bem-vindo de volta. Nesta lição, queremos deixar o cabeçalho pegajoso. Então, se eu começar a rolar, você notará que agora ele está desaparecendo junto com o resto do conteúdo, o que queremos fazer é garantir que ele não desapareça. Então, como fazemos isso? Vamos entrar no painel e precisaremos editar o cabeçalho dentro do kit de elementos, rodapé do cabeçalho. Então, vamos abrir isso. Agora temos o rodapé e o cabeçalho. Então, é claro, vamos entrar na edição do cabeçalho com o Elementor, e eu vou clicar com o botão direito do mouse em abrir o link na nova guia para que possamos editá-lo em uma nova guia. Vou mudar para essa guia. E aqui estamos nós. Então, é claro que agora o cabeçalho é editável. E lembre-se de que um dos plugins que instalamos foi o efeito de cabeçalho Tiki. Se eu pudesse pular rapidamente para o painel entrando nos plugins. Instalamos efeitos de cabeçalho adesivo para Elementor enquanto estávamos instalando o Elementor. Portanto, esta é a hora de usar esse plug-in. E tudo o que precisamos fazer é selecionar o cabeçalho e entrar avançado e encontrar a opção efeitos de cabeçalho pegajosos logo abaixo avançado. Então, vamos expandir essa habilitação. E agora o cabeçalho já está pegajoso. É só que não podemos rolar esta página para vê-la em ação, mas veremos isso em breve. Então vou em frente e salvo isso primeiro antes de fazer qualquer alteração. E agora que está salvo, quero entrar no painel e vamos entrar nas páginas. Esta é nossa landing page. Então clique com o botão direito do mouse em abrir o link na nova guia para que possamos olhar para a página em uma nova guia e rolar para ver se o cabeçalho agora está fixo. Tudo bem, então agora vamos rolar. E lá vamos nós. O cabeçalho agora está pegajoso, mas agora você notará que é um pouco alto. Em outras palavras, está ocupando muito espaço enquanto estamos rolando e realmente não precisamos de todo esse espaço. Então, como podemos resolver isso? Voltando para dentro do nosso editor? Bem, isso ainda está selecionado e, bem, ainda estamos dentro de efeitos de cabeçalho pegajoso. Vamos ligar para baixo e procurar o cabeçalho retrátil. Então ative isso. E vamos torná-lo um 50%. E vamos também reduzir o logotipo. Vamos também torná-lo um 50%. Isso significa que o logotipo será de 50%, o tamanho original. E a altura do cabeçalho também será 50% tão alta quanto a original. Então, vamos atualizar isso. E vamos entrar em nossa página e deixe-me recarregá-la. Então clique com o botão direito do mouse. Então, tudo bem, então agora vamos vê-lo. Em ação. Começo a rolar. Peso. Precisamos reduzir a margem no cabeçalho. Então, vamos voltar aqui. Vamos selecionar o menu em si. Clique em qualquer lugar dentro desse elemento azul. Então isso é selecionado avançado. Está entrando na margem. Vamos reduzir a margem inferior até talvez 20, e a margem superior até menos 20. Isso também reduz o tamanho do logotipo. Vou apenas olhar, talvez em algum lugar lá. Então vamos atualizar isso. Tudo bem, então vamos voltar para dentro desta página e recarregar a página mais uma vez. Agora rolando. Sim, então agora essa é uma boa altura. E parece, acho que está lindo. Então é assim que fazer a cabeça pegajosa. Na próxima lição, vamos ver como tornar o cabeçalho responsivo. Porque agora, se pressionarmos Control Shift I para entrar nas ferramentas do desenvolvedor Control Shift I e, em seguida, clicar neste ícone de alternância de modo responsivo e clicando neste menu suspenso para selecionar um dispositivo como no pixel cinco, você notará que o cabeçalho agora não é responsivo. Em outras palavras, não fica bem em dispositivos móveis, em smartphones. Na próxima lição, vamos ver como fazer esse cabeçalho ficar bonito em smartphones. Vejo você em breve. 25. Cabeçalho responsivo: Bem-vindo de volta. Hora de fazer esse cabeçalho ficar melhor em smartphones. Então, voltando ao nosso editor, aqui, clicarei neste ícone de modo responsivo para revelar essas configurações responsivas. E você verá que temos o modo tablet e o modo smartphone. Então, vamos entrar nesses dois para fazer com que pareça bem nesses dispositivos. Já parece bom no desktop, que é onde estamos agora. Então, vamos entrar no modo tablet. E é assim que se parece em tablets. Lembre-se de que temos duas colunas. Se eu puder mudar para tablet, modo desktop. Lembre-se de que temos essa coluna que está segurando o logotipo e temos essa coluna que está segurando o menu. Então, quando mudamos para tablet, ainda temos as duas colunas, mas agora elas estão empilhadas umas sobre as outras. E isso não é o que queremos. Queremos que eles fiquem lado a lado. O menu no lado direito e o logotipo do lado esquerdo. Se voltarmos para o modo de área de trabalho, toda essa seção, a seção de cabeçalho é 100%, e essas duas colunas serão divididas em porcentagens. Então talvez isso seja 90 por cento e isso seja 10%. Então, se voltarmos para dentro de tablets, se selecionarmos a coluna que está segurando o logotipo. Claro que agora, agora está em 100%. Se entrarmos aqui e digitar algo como 50% e apertarmos Enter antes de tudo, observe que nada acontece. E isso porque há um pequeno bug no Elementor que precisa que primeiro expandamos isso um pouco para nossas mudanças no modo tablet entrem em vigor. Você notou que quando eu arrasto isso um pouco para a esquerda, as mudanças entraram em vigor. Então, na primeira vez que você mudar para o modo tablet, certifique-se de primeiro escolher este lado ou este outro lado e arraste-o um pouco para fora as palavras. Dessa forma, as mudanças que fizermos no modo tablet serão visíveis para nós à medida que trabalhamos nelas. Então, a segunda coisa que precisamos fazer é selecionar a coluna que está segurando o menu. E vamos fazer isso 50% também. Agora isso o empurra para o lado direito porque isso é 50% e isso é 50% para representar 100 por cento. Enquanto ainda estamos lá, selecionarei o menu em si selecionando esses elementos. E essas alterações nos elementos de edição recebem o Menu Nav. E eu quero entrar na margem e quebrar as configurações padrão. E agora isso traz esses maus para se concentrar. E o que queremos fazer é empurrá-lo um pouco para baixo aumentando a margem superior. Vamos também aumentar a margem certa para empurrá-la para dentro um pouco assim. Agora você notará que está escuro porque está em um fundo escuro. Então vou entrar no estilo. Deixe-me colapsar o invólucro do menu e temos o estilo hambúrguer. Então, vou expandir isso. E aqui dentro temos partes diferentes para editar. Na primeira parte, queremos editar o tipo de fundo. Vou clicar nisso. E então vamos dar uma cor. Essa é a cor que queremos. Acho que gosto disso. Atualize isso. E se você quiser, você também pode reduzir ainda mais essa coluna do logotipo. Assim, podemos selecionar isso e torná-lo talvez 20%. E vamos fazer isso 80 por cento. Porque se isso for 20%, isso precisa ser de 80 por cento para fazer 100%. Então, selecionando isso, e agora está de volta até o fim. Vamos atualizar isso. E depois com isso feito, acho que gosto da aparência do menu no modo tablet. Agora que as alterações foram salvas, vamos mudar a página onde tínhamos essa visualização. Vou recarregar esta página, então Control R. E depois vou mudar para o modo tablet. Então, talvez o iPad Air. E é assim que o menu fica em um tablet. Acho que parece bom, mas observe que temos uma grande margem aqui, mas aqui o logotipo está quase tocando a borda. Vamos aumentar a margem desse lado. Então, selecionando essa coluna, vamos dentro da margem avançada. Vamos aumentar a margem esquerda até esse ponto. Talvez 12. Atualize isso. Vamos também aumentar o pouco marginal superior. Vamos atualizar isso. Entre neste lugar, Controle R para atualizar. E agora temos um bom espaçamento ao redor. Eles vão voltar aqui. É hora de torná-lo responsivo em smartphones, selecionando o ícone do celular. E como você pode ver, precisamos fazer a mesma coisa que acabamos de fazer nos tablets. Precisamos fazer com que essas duas colunas ocupem 100%, dando-lhes diferentes porcentagens. Então, selecionando a coluna do logotipo, vamos entrar no layout. Vamos mantê-lo talvez 50%. E vamos selecionar a coluna do menu. Vamos também dar 50 por cento. E agora os dois menus estão alinhados corretamente. E como os configuramos no modo tablet, eles já estão com boa aparência até certo ponto. Agora, tudo o que precisamos fazer é fazer alguns ajustes extras no menu lateral que aparece quando você clica nisso no seu dispositivo móvel, deixe-me clicar nisso para que você possa ver o que queremos dizer. Quando clicamos nisso. Nós revelamos esse menu aqui. Agora já temos algumas configurações básicas. Então, antes de tudo, se eu recolher o invólucro do menu, temos o logotipo do menu móvel. Portanto, esse espaço em branco aqui é para um logotipo para este menu do smartphone. Então, voltando para dentro do conteúdo, você notará que temos uma seção aqui nas configurações do menu móvel. Então, abrindo que temos o logotipo do menu móvel, se eu disser Escolher imagem, você pode adicionar um logotipo para esse menu. E eu já havia carregado esse logotipo. Vá em frente e carregue o seu. E clicarei em inserir mídia. E se clicarmos nisso, agora temos esse logotipo aparecendo lá. Se eu fechar isso, esse logotipo é diferente desse logotipo porque observe que isso é, isso tem texto branco e diz cursos. E se eu abrir isso diz modelos. Portanto, é um logotipo completamente diferente daquele que enviamos para o logotipo principal. Portanto, tenha isso em mente. A próxima coisa que queremos fazer é editar a margem em torno deste logotipo porque observe aqui que temos um bom espaçamento, mas aqui está quase tocando a borda. Então, entramos no estilo, menu móvel, logotipo, margem. Vamos quebrar essa margem padrão. E à esquerda, vamos aumentar a margem. Assim. Acho que já gostei da posição. Não vou longe demais. Mas vá em frente e brinque com essas configurações para ver o quão criativo você pode obter com as suas. O próximo problema que queremos editar é esse botão de alternância de fechamento. E fazemos isso entrando abertura do estilo hambúrguer que temos a alternância de hambúrguer. Se eu fechar isso, esse é esse. A alternância de hambúrguer é esta. E se abrirmos o menu, o menu lateral e rolarmos para baixo, também teremos o botão fechado. Agora, esse é este. Assim, podemos editar o tipo de plano de fundo quando ele estiver no estado normal. E podemos dar uma cor, essa cor. E ao passar o mouse, também podemos dar uma cor, mas quando você está usando um telefone celular, você não passa o dedo sobre os ícones. Você basicamente só os toca. Então eu não acho que isso faça sentido algum. Então, vou deixá-lo do jeito que é. Vamos atualizar isso. Em um pairar, essas cores estão parecendo boas, mas se você quiser mudá-las, você sempre pode vir, deixe-me fechar. Isso. Sempre pode chegar a itens do menu, item submenu. Todas essas configurações estão nesses três painéis. Então vá em frente e confira e veja o quão criativo você pode obter com isso. Com todas essas alterações salvas. Vamos entrar na nossa página aqui. E agora, se atualizarmos esta página, Control R, e alternarmos para qualquer smartphone como o pixel cinco ou talvez o iPhone 12s sejam muitos, parece incrível. E se abrirmos a barra lateral, é assim que ela se parece. Vamos mudar para o pixel cinco e ver como ele se parece. Deixe-me fechar isso. É assim que se parece no pixel cinco. Vamos mudar para, deixe-me ver o Samsung Galaxy. E é assim que parece no Samsung Galaxy. E é assim que o cabeçalho responde em tablets e smartphones. Na próxima lição, vamos ver como tornar o resto do conteúdo responsivo nesses dispositivos. Antes de concluirmos a aula, verei você em breve. 26. Seção de corpo responsivo: Bem-vindo de volta. Agora é hora de tornar o resto do conteúdo responsivo em tablets e smartphones. Então, voltando para dentro do nosso painel, antes de entrarmos no painel, lembre-se, é aqui que estávamos editando o cabeçalho. Então, agora terminamos com essa parte. Podemos ir em frente e sair para o painel. Já tenho o painel aberto aqui. Vou apenas ir em frente e fechar esta página porque não a estamos mais usando. Agora feche esta página porque ela voltará aqui para ver a aparência da página. Então vou em frente e fecharei isso. Eu tinha algumas páginas abertas. Voltando aqui. O que queremos fazer é editar esta página com o Elementor porque estamos tornando o conteúdo do corpo principal responsivo. E eu vou mudar para essa guia. E aqui estamos nós. Agora, é claro, a primeira coisa que precisamos fazer é clicar neste modo responsivo. Posso revelar esses três modos. Então, vamos mudar para o modo tablet. Aqui estamos nós. Lembre-se que mencionei que quando você muda para o modo tablet pela primeira vez, o modo tablet muda, será definido, não ficará visível. Então, se pegarmos isso e puxarmos um pouco, as mudanças que já fizemos serão visíveis. Esse é um pequeno bug que eu notei no Elementor. Não é tão grande coisa porque é assim que seu site ficará em tablets, não do jeito que aconteceu há apenas um momento. E agora que temos isso, a primeira coisa que precisamos fazer é que eu gosto fazer essas colunas com 100 por cento de largura. Você pode querer deixá-los em 5050 por cento, mas eu só gosto de escolher este dentro da largura da coluna em Layout e torná-lo 100% como esse. E, em seguida, selecione isso, o texto em si. E vamos empurrá-lo para o centro. Agora você pode querer redimensioná-lo depende da sua preferência. Então, se entrarmos na tipografia de estilo, você pode redimensioná-la assim. E agora esse espaço é muito grande, então podemos entrar na própria seção. Em seguida, avançou. Vamos quebrar esse preenchimento assim. E isso já parece bom. Você pode querer aumentar esse preenchimento no topo, mas vou deixá-lo assim. Em seguida, vamos selecionar esse texto. Entre no estilo, alinhe-o ao centro. Em seguida, vamos selecionar esses botões. Agora você notará que se eu os alinhar ao centro, não está funcionando. E então uma maneira de se locomover isso é apenas aumentar a margem à esquerda. Então, enquanto eles ainda estão selecionados, entre na margem avançada. E então vamos aumentar a margem no átomo esquerdo, talvez 50, digamos 120. Acho que agora eles estão no centro. Então, vou atualizar isso. É tudo sobre ser criativo. Às vezes, você pode atingir paredes de tijolos e precisa ser criativo e encontrar maneiras de superar seus desafios. Então, vamos selecionar a imagem. Observe que ainda está em 50% de largura. Então, vamos selecionar a coluna e dar a ela 100 por cento. E agora está em 100 por cento. E uma grande coisa sobre elementary é que ele permite reverter condicionalmente a ordem dessas colunas, dependendo do dispositivo em que o usuário está visualizando. Então, neste momento, é o bloco de texto primeiro, depois a imagem, mas podemos revertê-lo depois a imagem, mas podemos revertê-lo quando alguém está visualizando no tablet. Se eu selecionar a seção em si e entrar em responsivo avançado, poderemos reverter colunas no tablet ou no celular. Vamos fazer isso em tablets. Se eu selecionar isso. Agora, eles estão invertidos. É a imagem primeiro, depois o bloco de texto segundo. E se voltarmos ao modo desktop, eles ainda estarão em sua ordem original. Então, eles estão condicionalmente configurados para reverter dependendo da mudança do dispositivo para o tablet, você ainda tem esse bug. Mas se expandirmos isso um pouco, agora estamos vendo o resultado final. Então é isso que direi atualizar antes de perdermos qualquer alteração em nossa rolagem para baixo porque terminamos com a seção de heróis. Acho que tudo fica bem nesta seção. Além do fato de que essas colunas estão muito próximas da borda. Então, selecionarei a coluna inteira que os está segurando. Vá para dentro avançado. Quebre esse preenchimento e queremos dar um preenchimento à esquerda e à direita de 20. Então, à esquerda e à direita, basta olhar para a direita, um 20º. Então agora temos um bom espaçamento lá. Vamos seguir em frente e selecionar esta coluna. Vamos repetir o que acabamos de fazer. Eu gosto disso em 100% para o bloco de texto e este 100%. Então, selecionando esta coluna 100%, depois selecione esse texto, alinhe-o ao centro. Este também. Por favor, envie uma mensagem também. Lados indo, azulejo, centro de linha. Este é o acordeão. Podemos alinhá-lo. Então deixe-me entrar em colapso isso. Acho que parece bom do jeito que é. Só que precisamos selecionar esta coluna mais uma vez e dar um bom preenchimento à direita e à esquerda. Então, vamos quebrar isso. O padrão é 20. Agora temos um bom estofamento ao redor dele. Vamos dar a isso uma largura de 100%, certo? Assim mesmo. Então temos o balcão. Claro que agora esses dígitos parecem grandes demais, então selecionarei o primeiro contador. Entre na tipografia de estilo, talvez um 40. Então, o que posso fazer é copiar. Em seguida, cole o estilo. Isso só colará o tamanho que temos. Estilo de colar. Eu realmente não gosto da maneira esses textos estão pulando para a próxima linha. Eu gostaria que talvez fosse satisfação, simplesmente satisfação. E para este, vamos entrar no conteúdo ou apenas alunos. E agora eles estão todos em uma linha. Mas o problema é que, uma vez que você remova alguns textos deles, mesmo no modo tablet, mesmo no modo desktop, você ainda os removerá. Essas são algumas das mudanças que entram em vigor em todos os modos. Portanto, tenha isso em mente. Voltando ao modo tablet. Vamos expandi-lo um pouco. Tudo bem, então vamos passar para a próxima seção. Até agora você já sabe o que precisamos fazer. Selecionar a coluna coincide avançado, à esquerda, 2020. E agora temos um bom espaçamento. Caso contrário, tudo o resto já parece bom. Bem aqui, é claro, um 100%. Baseado em 100% também. Vamos também nos certificar de que lhe damos um bom preenchimento à esquerda e à direita. 2020. E podemos centralizar isso bem também. Estilo alinhamento, centro. Não podemos alinhar isso, mas acho que eles já estão procurando. Bom. Comece agora o botão em si, podemos empurrá-lo para a central assim. Vamos atualizar antes de perdermos qualquer alteração. Vamos continuar rolando. Os depoimentos. Parece bom. Vamos dar a isso 100%. Vamos selecionar os textos, alinhá-los ao centro. Selecione a coluna aqui, 100 por cento. Embora ainda esteja selecionado, avançou em 2020. E acho que parece bom agora. Então, vamos atualizar isso. Agora. A parte restante é a pasta. E para tornar a foto responsiva, fazemos a mesma coisa que fizemos com o cabeçalho. Então, entramos elementos luz infantil, pasta de cabeçalho e editamos o rodapé Elementor no front-end. Tente torná-lo responsivo nos dispositivos da ferramenta. Então, neste momento, quero deixar isso para você como um desafio, segui esse processo e fazer a resposta da foto C. Então, mudando para nossa página de modo responsivo, vamos dar uma olhada nesses dispositivos. Vamos tentar imitar um novo dispositivo. Mas antes de fazermos isso, vamos Controlar R para atualizar a página para que as alterações entrem em vigor. Agora você notará que tudo está alinhado corretamente , exceto os botões. Vamos rolar para baixo. À medida que verificamos todas as outras partes. Tudo parece super incrível , exceto esses dois botões. Então, vamos ver o que fazer sobre eles. Então, voltando aqui, antes de tudo, vamos mudar para a visualização móvel. Selecione os dois botões. Então vamos quebrar a margem. Ou telefone celular. Se entrarmos, o modo tablet, ainda ficará bem. E o modo imóvel, eles também ficam bem. Então, vamos atualizar isso. Então, tudo o que você precisava fazer era selecionar os botões e quebrar a margem. Então, agora voltando aqui, Control R para atualizar a página. Incrível, então eu gosto de como parece. Agora, nossa página parece muito mais apresentável em tablets e smartphones, bem como desktop. Vamos avançar e animar esses diferentes elementos que, quando alguém visitar para que, quando alguém visitar a página da Web pela primeira vez, à medida que eles rolam, os diferentes elementos apareçam de forma animada. Apenas para melhorar a experiência do usuário. Vamos ver como fazer isso. Na próxima lição. Vejo você em breve. 27. Adicione efeitos de movimento: Olá, bem-vindo de volta. Nossa landing page agora é completamente responsiva nos diferentes dispositivos. Mas mais uma coisa que precisamos fazer é adicionar alguns efeitos de movimento aos nossos elementos na página que tornarão a página mais interativa e melhorará a experiência geral do usuário. Então, voltando para um modo de desktop, enquanto ainda estamos aqui na página de edição. Vamos em frente e animar essa parte primeiro. Então, selecionando essas colunas. Vamos entrar em efeitos de movimento avançados. E agora esse é o padrão, então não há efeito de movimento. Se clicarmos no menu suspenso, temos vários tipos diferentes de efeitos de movimento. Temos desvanecimento, então esse é o desvanecimento. Temos zoom. Temos limites. Para esta seção de heróis. Gosto do desvanecimento em vigor e podemos alterar a velocidade ou a duração aqui. Então eu gosto que seja lento, assim. E vou repetir o mesmo para esta coluna. Vá para dentro. Efeitos de movimento avançados, desvanecimento, e depois vou deixar lento. Tudo bem, então vamos atualizar isso. E vamos visualizar as alterações. Então, observe como ele vai desaparecer lentamente, assim, voltando para dentro do nosso editor. Agora podemos fazer isso para cada elemento nesta landing page. Então, voltando para esta página, vamos selecionar esta coluna que está mantendo a primeira categoria aqui. Entre em efeitos de movimento avançados. Desta vez eu quero deslizar ou saltar, deslizar, certo? Sem deslizamento à esquerda. Assim. E para este, eu queria deslizar em Wright. Efeitos de movimento avançados. Deslizando certo? E para o meio, ele pode deslizar para baixo. Efeitos de movimento. Ou talvez você possa simplesmente desaparecer lentamente. Vamos também voltar a isso. Efeitos de movimento. Lento. Gosto que ele venha lentamente. mesmo caso se aplica a este deslizamento lento. Atualize isso. E vamos visualizar as mudanças desaparecendo lentamente assim. E aqueles deslizando lentamente assim. Vamos passar para este. Mas, claro, lembre-se que é tudo sobre sua criatividade. Temos tantas opções aqui. E assim, os diferentes efeitos de movimento selecionados determinarão quão incrível sua página será carregada para novos usuários. Então, passando para o terceiro. Selecione isso. Efeitos de movimento avançados. Talvez zoom. Não, isso está desaparecendo. Vá para o zoom. Este é um efeito de movimento bem avançado. Zoom, atualize. Então vou em frente e adicionarei alguns efeitos de movimento para o resto dos elementos desta página. Mas vou avançar essa parte porque estou apenas repetindo o mesmo processo várias vezes até o fundo. Então eu sugiro que você vá em frente e seja criativo. Vamos ver o que você inventará. Então, em seguida, quero selecionar isso. Então acabei de terminar e salvei as alterações. Tudo bem, então vamos rolar para baixo e ver o que eu inventei. Oh, certo. Lá vamos nós. Então é assim que adicionar efeitos de movimento à sua landing page. Como mencionei, seja o mais criativo possível e veja com o que você vai acabar. E isso marca o fim da nossa classe. Espero que você tenha gostado tanto quanto eu gostei de montá-lo para você. E se você tiver alguma dúvida, vá em frente e entre em contato comigo. Antes de sair. Tenho alguns pensamentos finais e os compartilharei na próxima e última lição. Vejo você em breve. 28. 25 Melhor: Parabéns por completar a aula. O fato de você ter chegado até aqui é uma indicação clara de que você é um finalizador. Muitas pessoas podem começar a ter uma aula online, mas muito poucas pessoas podem ver até o fim. Agora você não só tem uma página da Web totalmente funcional, mas também uma habilidade valiosa que você pode usar para gerar renda de muitas maneiras diferentes. É tudo sobre o quão criativo você pode obtê-lo agora que entende como montar uma página da web do zero, é hora de você aprender a torná-la amigável ao SEO. Seo significa que a Otimização do Mecanismo de Busca, uma página da Web ou um site que não foi otimizado para os mecanismos de busca é invisível para os mecanismos de busca, o que significa que não aparece nos resultados de pesquisa quando os usuários estão procurando por conteúdo que a página da Web está prestes a aprender a torná-la visível para os mecanismos de busca. Confira uma aula de 60 minutos que publiquei especificamente para ensinar como fazer isso. Abra meu perfil e inscreva-se nessa aula e saiba como tornar suas páginas da Web e sites detectáveis pelos mecanismos de busca. E também confira outras aulas em que eu ensino a criar um site totalmente funcional, não apenas uma landing page. Se você gosta da classe, lembre-se de dar uma avaliação positiva na seção abaixo. Isso é muito útil. Levará apenas cerca dois minutos e sua avaliação ajudará a tornar essa aula mais visível para outros alunos que possam estar procurando por esse tipo de informação. E como sempre, meu nome é Ken Visa. É sempre um prazer tê-lo aqui e te vejo na próxima peça da aula.