Faça o design de uma landing page animada com Elementor (plugin gratuito)

1. Introdução: Bem-vindo de volta a outra classe elementar incrível comigo, pode Besser ser um especialista em WordPress e tenho usado o Elementor para construir minhas páginas da Web nos últimos 4,5 anos. E eu gosto de mostrar às pessoas como usar essas mesmas habilidades para criar landing pages para seus sites e para seus clientes. Nesta aula, vou ensiná-lo a projetar uma landing page de fotógrafo. Então, se você é fotógrafo e quer saber como criar uma landing page para o seu site. Esta aula é para você, mas apenas no caso de você não ser um fotógrafo, mas ainda gostaria de aprender a usar o Elementor para criar páginas de destino incríveis. Esta aula é para você. Quando você terminar esta aula, você terá adquirido as habilidades necessárias para construir landing pages de classe mundial usando o Elementor. Então, sem perder mais tempo, deixe-me mostrar a página de destino que você vai projetar na classe e depois começar. Apenas três. Então é isso que estamos projetando. Se você está pronto e animado para começar, eu sei que estou. Vamos mergulhar diretamente. 2. Como instalar o tema: Então, a primeira coisa que queremos fazer é entrar em nosso painel e instalar o tema que controlará a aparência do nosso site. E o tema é o que define aparência e o funcionamento do seu site. Então, vamos entrar no painel e se você quiser saber mais sobre o tema, Cisco avança e procure tutoriais sobre o que é um tema WordPress no YouTube ou apenas no Google. Então, dentro do nosso painel, queremos entrar em temas de aparência. E, por padrão, quando você instala o WordPress pela primeira vez, ele terá um tema padrão instalado. E dependendo do ano, a dor receberá o nome desse mesmo ano. Então, agora estamos em 2020 um, meu tema é 2021, mas você também tem 2019 e 2020 disponíveis para você, caso queira usá-los. Mas o que queremos fazer é instalar outro tema chamado Astra. E como você pode ver, o Astra é um dos temas listados aqui para mim porque é um dos temas que eu mais uso. Tem que estar entre os melhores para mim. Mas caso você não consiga vê-lo, vá em frente e digite Astra aqui na barra de pesquisa. Substituição do Astra. Então vou em frente e instalarei na sexta-feira. Então, vamos seguir em frente e ativar. Então clique em Ativar. E agora nosso tema ativo é o Astra, como você pode ver aqui neste pop-up. E eles têm essa mensagem que o Astro vem com não está tão pronto para usar modelos iniciais e tudo isso. Mas estamos aprendendo a criar nossas próprias páginas da web do zero. Então, fecharei isso e fecharei essa mensagem ali mesmo. Então, agora que fomos vendidos o Tema Astra e ativados, se estivermos prontos para ouvir sobre o Elementor, estamos prontos para instalar o elementor e ter uma visão geral do espaço de trabalho elementar. Então, vamos fazer isso na próxima aula. Vejo você em breve. 3. Atualização rápida - o novo assistente de configuração do elemento: Bem-vindo de volta. Agora, esta lição é uma nota rápida ou uma rápida atualização do processo de instalação do Elementor. Se você estiver fazendo esta aula em maio de 2022 e depois, notará que a ativação do Elementor agora tem um assistente de configuração que é composto de várias etapas que você precisa seguir para configurar as partes básicas do seu site. Enquanto eu estava criando essa classe há vários meses, Elementor não tinha esse assistente de configuração. Então, eu só quero que passemos por esse assistente de configuração. Mas tudo o mais que você está aprendendo nesta aula não muda. Ainda é o mesmo processo durante todo o processo. A única adição é o assistente de configuração. Então, como você pode ver agora, eu tenho uma nova instalação do WordPress e estamos na versão 6. E o que eu quero fazer é ir para Plugins, Add New. Assim, podemos adicionar o Elementor e passar por esse processo. Vou procurar a instalação do Elementor agora. E agora, quando eu clicar em Ativar serei redirecionado para esse assistente de configuração. E podemos passar por isso juntos. Então, aqui estamos nós. Vou diminuir um pouco o zoom para que possamos ver mais detalhes. Tudo bem, então agora você notará que a primeira coisa que o Elemental quer que façamos agora é criar uma conta para tirar o máximo proveito do Elementor. Então, esses são alguns dos benefícios de se inscrever em uma conta no Elementor. Mas o problema é que você não precisa ter uma conta Elementor para usar o Elementor. Então eu vou em frente e pular essa parte. O segundo passo é aceitar, continuar com o tema sagrado que Elementor fez para nós. Isso é feito pela Elementor, mas estamos usando o Tema Astra, então vamos em frente e pulamos. Astra é um tema mais poderoso. O terceiro passo é dar um nome ao nosso site. Enquanto você estava instalando seu WordPress. Você deu um nome ao site. Esse é o nome que vai aparecer aqui. Mas isso nos dá a oportunidade mudar o nome para qualquer outro nome que quisermos. Meu site e, em seguida, vamos clicar em Avançar. E se você tiver um logotipo para o seu site e quiser adicioná-lo com antecedência. Você pode simplesmente ir em frente e abrir a biblioteca de mídia e selecioná-la na biblioteca de mídia ou carregá-la do seu computador. Mas não vamos fazer isso agora. Então, vou manter esse passo. E é claro que podemos adicionar o logotipo mais tarde e eu vou te mostrar como fazer isso. Vamos clicar em Ignorar. E agora chegamos à última etapa em que temos duas opções. Podemos começar a editar nossa página inicial a partir de uma tela em branco com o editor Elementor. Ou podemos navegar a partir de centenas de modelos ou importar nossos próprios modelos, se os tivermos. Mas eu vou em frente e pularei. Isso. Será redirecionado para a tela onde agora podemos começar a construir um site. E aqui vamos nós. Então, basicamente isso é tudo que eu queria mostrar a você. É uma nova atualização. Não estava lá há alguns meses. Agora, está lá. Mas todo o resto nas próximas aulas continua o mesmo. O processo ainda permanece o mesmo para criar uma página de destino. Então, sem perder mais tempo, vamos para a próxima lição. Vou até este menu de hambúrguer e clicar em Sair para o painel. Vamos sair desta página. Agora estamos dentro do painel e estamos prontos para começar a criar o site. 4. A visão de espaço de trabalho em Elementor: Bem-vindo de volta. Na lição anterior, instalamos e ativamos o Tema Astra. Agora estamos prontos para instalar o elementor e temos uma visão geral rápida dos elementos são workspace. Assim, podemos nos familiarizar com as ferramentas e os recursos que estarão lidando quando estivermos construindo nossa landing page. Então, vamos seguir em frente e fazer isso. Vamos instalar o Elementor. Então vou entrar, vou em frente e clicar em plugins para começar. E como esta é uma nova instalação do WordPress, eu tenho que os plugins padrão já instalados. Então, vou apenas ir em frente e selecionar os dois. E neste menu suspenso, selecionarei excluir e, em seguida, aplicá-lo. Vamos excluí-los. E agora temos uma ardósia limpa para trabalhar. Então, vou em frente e clique em Adicionar novo. E seremos levados para o repositório de plugins do WordPress onde podemos procurar o Elementor. Deve ser o primeiro resultado aqui com mais de 5 milhões de instalação ativa. Vou em frente e clique em Instalar agora. E você notará que temos muitos outros plug-ins aqui que têm o nome Elementor neles. Então, por que isso? Outros desenvolvedores podem ir em frente e criar recursos, ferramentas e funcionalidades para estender o poder do Elementor. E esses caras fizeram isso porque, como você pode ver, próprio Elementor é criado pela Elemental.com, mas esses outros plugins de terceiros são desenvolvidos por desenvolvedores terceirizados. Então, vamos usar alguns desses plugins aqui à medida que avançamos, medida que construímos nossa landing page, e você saberá qual plug-in é reproduzido, qual linha. Vamos ativar o Elementor agora que ele está instalado. Tudo bem, então agora temos apenas um plugin instalado e aquele Elementor. Então, vamos em frente e criar uma página para que possamos abrir o espaço de trabalho elementar. Então vou para dentro das páginas, todas as páginas. E como eu mencionei, esta é uma nova instalação do WordPress. Então eu tenho que as páginas padrão já criadas aqui, mas não preciso dessas duas, então selecionarei as duas. E neste menu suspenso, vou passar para o lixo e aplicar isso. Agora não temos nenhuma página, então direi Adicionar novo. E podemos ir em frente e dar um nome à nossa página. Então, vamos dizer em casa. Então, vamos supor que esta é a nossa página inicial. Bem aqui, na extrema direita. Em Modelo, selecionarei no menu suspenso Elementor largura total. Então eu vou clicar em Publicar. E agora nossa página está publicada. E agora que temos nossa página pronta, vamos clicar em editar com o Elementor será levado para o front-end onde estaremos editando a página. Então, aqui estamos no front-end. E à medida que editamos a página, é exatamente assim que ela vai parecer. Então, estamos realmente editando a página e vendo os resultados em tempo real. Na extrema esquerda, aqui, temos este painel inferior aqui. Esta área inferior aqui tem algumas opções. Temos o botão de atualização à medida que fizermos alterações aqui, clicaremos em Atualizar. E vamos clicar no ícone de alterações de visualização aqui para ver a página com as alterações e sem essas ferramentas. E aqui temos o modo responsivo. É aqui que clicaremos quando quisermos tornar nossa página responsiva a diferentes tamanhos de tela, smartphones, tablets e desktop. E faremos isso como nós, medida que tornamos essa landing page responsiva. E a próxima coisa aqui é a área de histórico onde é aqui que teremos uma lista de todos os movimentos feitos, todas as alterações que fizemos à medida que adicionamos elementos à nossa página nesta sessão. Então, se por exemplo, eu adiciono uma seção de coluna dupla como essa e, em seguida, talvez adicione uma seção de coluna tripla como essa. Agora temos duas coisas adicionadas. Então, se entrarmos no histórico, você notará que primeiro adicionamos esta seção e depois adicionamos esta seção. E podemos clicar aqui para voltar ao ponto no tempo em que só tínhamos essa seção. Portanto, isso é como uma área de viagem no tempo onde você pode ir a qualquer ponto específico no tempo quando você teve certas mudanças, quando você tinha apenas certos elementos parecendo de uma determinada maneira. E vamos ver para que servem todas essas outras opções. Mas a parte estará interagindo com o máximo é essa área aqui. E esta é a área que nos fornece todas as ferramentas e recursos que queremos adicionar, todos os elementos que queremos adicionar ao nosso site. Por exemplo, se alco recolher esse painel, você notará que temos outro painel que diz Pro. Portanto, as ferramentas no painel Básico são gratuitas. Se entrarmos em colapso e entrarmos no painel, você notará que eles têm o pequeno bloqueio aqui para mostrar que essas ferramentas não podem ser arrastadas e soltas lá quando você tentar arrastar, haverá este pop-up que diz que você precisa, você precisa ter a versão pro do Elementor para poder usá-los. E então vamos colapsar isso. Então temos mais sob as ferramentas gerais e muitas outras incorporadas sob todos esses painéis. Então, estaremos trabalhando com os painéis que têm os elementos gratuitos porque eles são mais do que suficientes para conseguirmos as coisas precisamos para alcançar esta landing page aqui. A outra coisa que eu queria mencionar aqui é que quando adicionamos plugins, lembre-se daqueles plugins de terceiros que adicionamos, deixe-me entrar no painel e vamos entrar nos Plugins. Digamos Adicionar novo. Deixe-me procurar por elementar. Então lembre-se desses plugins de terceiros quais acabamos de falar. Se instalarmos qualquer plugin de terceiros que foi criado para estender o poder do Elementor, como complementos essenciais para o Elementor, e nós realmente instalaremos isso mais tarde. Aparecerá aqui como um painel. Então complementos essenciais para o elementary, vamos aparecer com todas as ferramentas extras que ele está trazendo para o Elementor. E você descobrirá que alguns desses recursos gratuitos com esse novo plugin estão listados aqui na versão Elementor Pro. Então, enquanto o Elementor está cobrando por essas ferramentas, esses caras criarão ferramentas que fazem a mesma coisa, mas fornecidas gratuitamente. E outra coisa, digamos que estamos lá dentro. Estamos aqui dentro e estamos editando coisas e queremos adicionar algo. Queríamos arrastar uma ferramenta, um elemento daqui, mas não podemos vê-la porque agora, no momento o que temos essas configurações para esta seção, podemos seguir em frente e clicar nesse menu ali mesmo. E isso trará esses painéis que têm ferramentas. Então, sempre que não conseguir ver essas ferramentas, clique nesse pequeno ícone aqui e ele exibirá as ferramentas. Então aqui temos mais configurações com as quais iremos interagir à medida que progredirmos. Portanto, essa é uma visão geral rápida do espaço de trabalho elementar. E para começar a criar uma página da Web, tudo o que precisamos fazer com o Elementor é criar uma seção. E as seções são estruturadas de acordo com os diferentes casos de uso comuns. Então, podemos ter uma coluna dupla como essa. E agora esta é uma seção de coluna dupla. As colunas são demarcadas por essas linhas pretas quebradas. E a seção é demarcada por essa borda azul. E podemos redimensionar, e podemos simplesmente arrastar as colunas para redimensioná-las, se quisermos. E também podemos clicar com o botão direito do mouse e duplicar uma coluna. E agora temos três colunas. Para começar a adicionar elementos dentro de uma página da Web, tudo o que precisamos fazer é clicar nesse sinal de mais ali mesmo ou clicar nele para revelar as ferramentas. Então, se eu clicar para revelar os elementos e agora podemos começar a arrastar, um por um. E agora, quando temos um elemento ativo, como agora é a imagem que estamos editando é o nome do elemento que aparecerá aqui. Qualquer elemento selecionado aqui é o elemento que aparecerá aqui. Então, se eu selecionar esta seção, agora estamos editando a seção. Se eu selecionar essa imagem, agora estamos editando a imagem, o que significa que essas configurações são para a imagem ou para a direita, então isso é apenas uma visão geral rápida dos elementos são espaço de trabalho. Espero que agora você esteja familiarizado com algumas das ferramentas e recursos do Elementor com os quais estarão interagindo. Mas é claro que você entenderá como usar a maioria dessas outras coisas que não tocamos quando construímos uma landing page, porque essa é a razão pela qual estamos tendo essas aulas em o primeiro lugar para que você possa se acostumar a trabalhar com a Elementor. Então, a próxima coisa que queremos fazer agora, se eu pudesse pular para o nosso ponto de referência é construir a barra de navegação. E a barra de navegação é composta por duas coisas, o logotipo e o menu do site. Então, vamos começar adicionando o logotipo do site. Vamos fazer isso na próxima aula. Vejo você em breve. 5. Como adicionar o logotipo do site: Bem-vindo de volta a outra lição incrível. Então é hora de adicionar nossa barra de navegação do site. E queremos começar com nosso logotipo. Mas aqui está a coisa. Precisamos adicionar um plugin que nos ajudará a criar esses Napa porque ele será um elemento autônomo apenas espaço. Então, queremos instalar um plugin. Então, entraremos nos plug-ins no painel. Plugins adicionam nova pesquisa para Elementor. E isso trará esses plugins relacionados elementais aqui. E estamos procurando o construtor de pastas de cabeçalho para Elementor assim ou ano aqui, construtor de rodapé do cabeçalho Elementor é informado disso agora. E vamos ativar isso. Então agora o construtor de cabeçalho e rodapé Elementor está ativado e podemos acessá-lo através da aparência. Os elementos são construtor de cabeçalho e rodapé. Vamos seguir em frente e clicar nisso. E como ainda não criamos nenhum cabeçalho ou rodapé, não temos nenhum listado aqui, então vamos em frente e crie, Adicionar novo. E podemos pular isso. Não precisamos disso. E daremos um nome ao nosso cabeçalho nav. Então, vamos em frente e chamá-lo, chamá-lo do que quiser. Então, vou chamá-lo de meu equipamento de navegação. É uma barra de navegação. E temos todas essas opções bem na nossa frente. A próxima coisa que queremos fazer é selecionar o tipo de modelo. É um cabeçalho. E isso trará essas opções aqui em exibição em. Onde devemos decidir se queremos que a barra de navegação seja exibida em todo o site, independentemente de qual página da web sua, você deve ainda ter a barra de navegação nas principais funções de usuário. Vamos em frente e dizer tudo. Isso significa que se você é um administrador e tem pessoas sob você que também estão editando o site. Você pode restringir quem pode editar sua barra de navegação para que qualquer pessoa possa editá-la. Vou deixá-lo em tudo. E então vamos ver, aqui na extrema direita, eu quero entrar no modelo, as falhas mudam isso para Elementor largura total. E nas configurações do Astro, quero ir abaixo da barra lateral e dizer que não há layout de conteúdo da barra lateral, largura total esticada. E vamos desativar essas configurações padrão que vêm com o Astra primário e digamos Publicar. Então, agora nossa barra de navegação está publicada. Queremos ir para o front-end e começar a construí-lo para parecer assim. Então, o que precisamos fazer é clicar em Editar com Elementor. Mas antes de fazermos isso, eu só quero entrar na aparência Elementor, cabeçalho e rodapé construtor. E você notará que agora nós o listamos aqui. Acabamos de criá-lo e agora está listado em nosso plugin. Então, se eu clicar em Editar, será levado de volta para essa página e sempre poderemos fazer alterações nessas configurações. Em seguida, vamos clicar em Editar com Elementor. E agora fomos trazidos para o front end, onde agora podemos começar a construir a barra de navegação. Então, vamos entrar, digamos Adicionar novo e adicionaremos uma seção de coluna dupla. E agora podemos arrastar esta coluna para ser menor que a coluna direita porque é claro que essa coluna é maior do que a coluna do logotipo. Então, voltando aqui, vou clicar nesse sinal de mais. E então arrastaremos um elemento de imagem para lá. E agora podemos colocar nosso logotipo aqui. E lembre-se, porque esse é o nosso elemento ativo é o que estamos editando aqui e podemos clicar lá e adicionar nosso logotipo. E como ainda não tenho imagens adicionadas, selecionarei carregar arquivos e selecionar arquivos. E eu já havia preparado essa pasta de ativos aqui. Se você abri-lo, ele contém todos os elementos usados no site. Isso significa incluir imagens. Todas as imagens estão lá. Só se você quiser acompanhar, você pode usar as mesmas imagens usadas no meu trabalho. Também temos os resultados finalizados aqui. Assim, você pode importar essas landing pages e elas se parecerão exatamente com a nossa terra, nossa página de destino final e nós temos o logotipo. Então, vou importar o login por enquanto. Clique duas vezes nisso. E agora que foi importado, vou em frente e clique em Inserir mídia. E agora nossa imagem é importante, mas como essa metade do nome é branca, podemos ver por enquanto. Então, vamos fazer algo sobre a cor de fundo. Então, primeiro vou clicar em atualizar isso. E agora entre neste menu de hambúrgueres. Clique nas configurações do site do menu hamburguer. E eu vou para dentro. Plano de fundo, tipo de fundo. Clique nisso. E nesta pequena caixa aqui, basta arrastar isso e alterar a cor de fundo para preto e, em seguida, atualizá-lo. Então, agora o site inteiro tem um fundo preto. Feche esta área azul e volte para nossa área de edição. Substituir. Então, vamos visualizar as alterações. Em. É assim que nosso logotipo se parece. A próxima coisa que queremos fazer é adicionar nosso menu de navegação do site, e faremos isso na próxima aula. Vejo você em breve. 6. Adição o menu do navegação: Bem-vindo de volta. Agora é hora de adicionar um menu de navegação de site. Então, pulando de volta para dentro do nosso espaço de trabalho aqui. Então, o que queremos fazer é entrar nesta caixa e clicar no sinal de mais ali mesmo. E aqui vamos digitar nav. E temos algumas opções de navegação aqui. Mas lembre-se de um dos plugins, acabamos de instalar construtor de rodapé de cabeçalho IIS para Elementor, e é para isso que temos HF aqui. Então, vamos arrastar isso e soltá-lo ali mesmo. Então, agora estamos esperando ver um menu, mas não há menu. Então, vamos visualizar isso para ver as alterações. Nenhum menu aqui. Então, o que está acontecendo? Bem, isso ainda está selecionado. Se você olhar para esta área aqui, você notará que ela diz que não há menus em seu site. Vá para a tela de menus para criar um. Então, precisamos entrar no painel do WordPress, criar um menu que iremos exibir dentro desta caixa aqui. Então, o que eu quero fazer é em outra guia, vá para dentro do painel. Então, vou clicar nisso, voltar para dentro do painel enquanto esta guia ainda estiver aberta. E eu quero entrar nos menus de aparência. E agora aqui você notará que a primeira coisa no topo aqui, diz os menus de edição do menu. Crie seu primeiro menu abaixo. E podemos ir em frente e criar um menu. Então, vamos dar um nome a ele. Meu cardápio. E vamos torná-lo o menu primário e, em seguida, Criar menu. É assim que criar um menu do WordPress, que pode ser exibido no front-end. E observe agora que temos o menu pronto, ele diz Adicionar itens de menu da coluna à esquerda, esta coluna aqui. Esses são nossos itens de menu. Estes são itens de menu 1, 2, 3, 4, 5, 6 itens de menu. Então, aqui, os itens do menu podem ser páginas da Web, eles podem ser postagens de blog, ser links personalizados que você criou. Eles podem ser categorias de conteúdo. Então, o que precisamos é criar, você pode criar qualquer um desses tipos de conteúdo e exibi-los em seu menu como itens de menu. Eu só quero criar links personalizados por enquanto, estamos nos concentrando na landing page , então não precisamos mais de páginas. Então, criarei um URL personalizado. Vou inserir uma hashtag ali mesmo. Posso usar essa hashtag é um espaço reservado para um URL imaginário para o qual esses links podem apontar. Mas, por enquanto, vamos apenas dizer sobre Adicionar ao Menu. E agora é um item de menu. Eu vou em frente e adicionarei outro, outro URL, apenas outro hash. Vamos chamar esse blog. Mas é claro que, em um cenário do mundo real, isso seria algo como http slash slash www dot. Talvez se você tiver um vídeo do YouTube que você queira compartilhar com alguém ali como um item de menu. Mas é claro que agora vamos deixá-lo como um hash agora. Adicionar ao menu. E farei isso mais duas vezes. Mais uma vez. Adicionar ao menu. E agora temos quatro itens de menu. Então vou em frente e salvo o menu. E porque salvamos nosso menu, agora, se entrarmos nosso espaço de trabalho elementar onde estávamos criando nosso cabeçalho, se atualizarmos esta página, eu pressionarei Control R, ou se você estiver em um Mac Comando R. Tudo bem, Agora nossos quatro itens de menu estão aparecendo dentro desse elemento que foi trazido pelo construtor de pastas hetero para Elementor, o plug-in que instalamos. E porque agora ele está selecionado. Se você olhar para o local que tinha a mensagem de que não tínhamos um menu. Agora temos esse menu suspenso e está listando nosso menu principal como um dos menus. Se tivéssemos quatro menus, eles serão listados neste menu suspenso. E você pode selecionar quais muitos você quer mostrar aqui. Então é isso. Então atualize isso. E enquanto isso ainda estiver selecionado, você pode selecioná-lo clicando em qualquer lugar dentro dessa borda azul. Então, vou clicar em qualquer lugar lá. E enquanto ainda estiver selecionado, vou entrar no layout. Em alinhamentos, clicarei em direitos para empurrar o menu para o lado direito. E então eu vou dizer, ei lá. Vamos visualizar as alterações. E agora nosso menu agora está começando a tomar forma. Mas é claro que temos algumas mudanças para fazer como esse efeito de pairo. E este último item precisa ser um botão. Então, vamos ver como fazer isso. Indo para dentro aqui. Enquanto isso ainda estiver selecionado, recolha o layout e entre no menu e temos o último item de menu. Vou em frente e pressionarei o botão do último item. E isso mudará para um botão como esse. Atualize isso. E vamos visualizar as alterações. Então, lá temos isso. A próxima coisa que queremos fazer é mudar a cor do mouse. Primeiro de tudo, a cor padrão dos links e, em seguida, a cor do mouse e o comportamento do mouse dos botões. Então, vamos entrar aqui e ver como nossa referência se comporta. Quando está ativo, fica amarelo ao passar o mouse, é amarelo, mas por padrão é largo. Então, vamos entrar aqui. Então, enquanto o menu de navegação ainda estiver selecionado, vou entrar no estilo. E a primeira coisa que queremos fazer é colapsar o menu principal. Você notará que temos quatro painéis aqui para menus suspensos. Vamos começar com um botão. Clique no botão. E antes de tudo, vamos mudar a cor do texto aqui para branco, assim. E então vamos alterar o tipo de fundo do botão daquele verde. Então, vamos mudar essa cor. E eu quero puxar essas cores. Tenho essas cores neste documento aqui, que incluí na pasta de ativos que mencionei anteriormente. Você pode encontrá-lo na descrição abaixo. Então, vamos pegar essa cor amarela ali mesmo, amarelo vibrante. Quero pegar esse código. Volte aqui e cole-o aqui. E agora nosso botão é amarelo. Vamos clicar em qualquer lugar aqui dentro para nos livrar dessa caixa. E então, ao passar o mouse, queremos voltar e dizer o tipo de plano de fundo. Deveria ser. Vamos voltar aqui, copiar isso. Vamos voltar aqui e colar isso lá dentro. Em nosso próprio mouse, o botão é vermelho assim. Vamos atualizar isso. A próxima coisa que queremos fazer é mudar as cores do link. Então, vamos recolher esse botão. E vamos entrar no menu principal. Vamos procurar topografia. cor do texto deve ser branca, então arraste isso até o topo. E ao passar o mouse, ele precisa ser amarelo. Então, vou clicar nisso. E eu vou lá dentro e pego esse amarelo. Cole-o lá. E agora está amarelo. Vamos ver como ele se parece ativo. Quando ativo, sem cor, então darei o mesmo amarelo. Em seguida, atualize isso. Vamos visualizar as alterações. E agora nosso navbar está se comportando exatamente como esperado. Então, vamos dar uma olhada em nossa referência e a fonte aqui é preta. Então, vamos entrar aqui e mudar o contato para preto. Então, recolher esse menu principal e abrir a cor do botão deve ser preto quando normal. Vamos atualizar isso. E no pairar precisa ser branco. Atualize isso. E vamos visualizá-lo. Ele muda. Por padrão, é preto no pairo, branco. Incrível. Então eu gosto de onde chegamos com a barra de navegação. Agora podemos continuar e criar a seção de heróis com esse texto animado de auto-digitação. Vejo você em breve. 7. Como adicionar o texto animado: Bem-vindo de volta. Então, neste momento, queremos adicionar esses textos animados aqui. Este é um local muito bom para adicionar palavras-chave importantes que você quer que os visitantes lembrem ou que os visitantes tenham em mente no momento em que chegarem à sua página. É um bom local para informar as pessoas muito brevemente sobre algo que você quer que elas estejam cientes. Então, vamos ver como fazer isso. Então, pulando dentro do nosso painel aqui, queremos adicionar um plugin que nos permitirá ter esses textos dinâmicos. Então vamos entrar em Plugins, Adicionar Novo, e vamos digitar átomos essenciais são apenas o tipo essencial, que deve ser o primeiro resultado aqui pelo desenvolvedor do WP. E você notará que são complementos essenciais para o Elementor. Lembre-se desses plugins que dizemos foram desenvolvidos por desenvolvedores terceirizados para estender o Elementor. Este é um deles. Então, vamos instalá-lo agora. Fim. Tem mais de um milhão de instalações ativas. Só para mostrar o quão legal o plugin é fácil ou correto, então vamos ativá-lo. E neste assistente de configuração aqui, você pode ir em frente e selecionar a opção que quiser. Mas como você é, suponho que você seja iniciante, você pode usar as configurações básicas recomendadas. Então, vamos para o próximo. E essas são as configurações que você aceitou selecionando a próxima coisa básica. Vamos para o próximo. Em seguida. Não instale em seus dias ou instale nenhum deles, se quiser. Em seguida, termine isso. Tudo bem, agora temos complementos essenciais para o Elementor instalados e temos acesso a todos esses novos recursos que se estendem elementais. Então, voltando para dentro onde nosso espaço de trabalho elementar aqui. Então, atualizarei esse espaço de trabalho pressionando Control R ou Command R no Mac. E como eu mencionei anteriormente, se você recolher esses painéis aqui, você notará que agora temos mais, mais painéis adicionados aqui porque lembre-se na lição anterior que adicionamos Elementor, cabeçalho e construtor de rodapé. E agora acabamos de adicionar adultos essenciais. E se expandirmos isso, ele tem elementos adicionais que podemos arrastar aqui e chegar à nossa landing page. Então, um desses recursos é texto frio e extravagante. Então o que eu quero fazer e acabei de me lembrar, é que ainda estamos dentro do espaço de trabalho do cabeçalho. O que queremos fazer é sair deste espaço de trabalho porque agora terminamos de editar a barra de navegação. Então, vamos sair clicando nisso e vamos sair para o painel. Dentro do nosso painel entrará nas páginas. E temos a página inicial que criamos anteriormente, e é isso que estamos usando como nossa landing page. Então, eu editarei com Elementor apenas no caso de você não ter essa opção, isso significa que você não clicou em editar com o Elementor. Podemos clicar em editar. E dependendo da aparência da sua página, basta clicar em editar com o Elementor onde quer que o botão esteja. No nosso, na área em que estamos editando o conteúdo principal da landing page. Então a primeira coisa que você percebe é que temos essa foto aqui, que não mentimos. Então, voltando para dentro do painel, páginas internas, todas as páginas Home. Você notará que temos esses pequenos ícones de configurações do Astra aqui. Clique nesse ícone. E sob o layout do site, digamos que não haja barra lateral, largura total esticada. Tudo bem. Em seguida, vamos desativar o cabeçalho acima. Vamos desativar o cabeçalho primário abaixo cabeçalho, cabeçalho móvel, título. Vamos desativar a imagem em destaque e desabilitar ou pasta. Então vamos atualizar isso. E agora, se eu clicar em Editar com Elementor ou voltar diretamente para essa página e atualizá-la. Deixe-me apenas atualizá-lo. Agora esse rodapé se foi. Então, a primeira coisa que queremos fazer é adicionar uma seção de coluna única de largura total. Este aqui. Vamos clicar no sinal de mais lá dentro e arrastar para dentro aqui digite fantasia. E isso trará esses elementos por complementos essenciais para o Elementor, o plugin que você acabou de instalar. Vou deixar isso no final agora porque é o elemento ativo. Diz Editar texto extravagante aqui. Então, a primeira coisa que queremos fazer é olhar para a anatomia desse elemento. Tem essas três cordas e essas três palavras estão mudando aqui. E então temos esses três primeiros para palavras que não estão mudando. Esses são os textos de prefixo, para que possamos nos livrar disso. E temos os textos sufixos, que são da sentença, da frase. Vamos remover isso também. E vamos adicionar um ponto, uma parada completa lá. Para que tenhamos, lembre-se que temos essa parada completa amarela aqui. Então, voltando aqui. Então agora vamos mudar o que essas palavras dizem. Vamos mudar isso para algo como criativo. Vamos mudar o segundo para fotógrafo, cinegrafista. Cinegrafista. E vamos atualizar isso. Então, agora as três palavras, vamos visualizar as alterações ou a direita, então é isso que temos atualmente no momento. A próxima coisa que queremos fazer é deixar-me fechar essas páginas extras aqui. Então, a próxima coisa que queremos é mudar a cor do texto e o tamanho também. Então clique em estilo. Então clique em estilo. Queremos recolher têxteis de prefixo e abrir os estilos de texto extravagantes porque o que nos resta é o texto extravagante em si. E vamos clicar em Topografia. Vamos aumentar o tamanho. Algo assim, talvez 162, mas tudo depende da palavra que você digitou lá. Então, vamos clicar lá fora. Em seguida, cor sólida. Vamos mudar isso para branco. Assim. Vamos atualizar isso. Podemos mudar a cor do cursor se você quiser, mas eu quero deixá-lo em Branco. A próxima coisa que queremos fazer é colapsar os têxteis extravagantes e ir para o sufixo têxteis porque queremos dar uma cor. Lembre-se aqui, é amarelo. Então, eu quero usar este documento e pegar essa cor amarela. Copie isso. Em seguida, toque em voltar para nossa página. E eu quero abrir a cor do texto do sufixo e colá-la lá. Cole isso. Então agora é amarelo, mas agora é muito pequeno. Vamos clicar em Topografia e vamos aumentar o tamanho ali mesmo. Em algum lugar lá. Acho que gosto disso ali. Tudo bem, vamos atualizá-lo. E agora observe que em nossa página, em nossa página de referência, o tipo de animação é diferente. Isso está desaparecendo enquanto o nosso aqui está digitando. Então, para mudar isso, vamos entrar no conteúdo e recolher textos extravagantes e expandir configurações de textos extravagantes. E como podemos alterar o tipo de animação de digitar para desaparecer, desaparecer. Vamos tentar limites teta assim. Sobre o Zoom. Centeio. Gosto do Zoom. Mas, para manter as coisas mais simples, vou deixá-lo na FE, ir em frente e brincar com as outras configurações ali mesmo. E vamos atualizar isso. Então. Claro que você notará que temos algum espaço aqui em cima. Temos alguma margem aqui entre a primeira e a barra de navegação. Então, vamos seguir em frente e fazer isso. Vamos selecionar a seção em si. E vamos entrar avançado. Vamos recolher esses links de preenchimento. E então vamos aumentar o preenchimento superior para algo como digamos 50. Digamos que um 100. E vamos atualizar isso. Visualize as alterações ou certo? Mas agora nossa fonte precisa ser um pouco ousada. Agora mesmo. Parece ser tema. Então, selecionando esse texto extravagante lá e entrando no estilo, estilos de texto extravagantes. Vamos seguir em frente e selecionar o tipo Paleografia aqui e aumentar o peso da fonte para algo como 900. Agora, o peso da fonte é mais pesado, mas agora vamos mudar a família para Montserrat. Montserrat. Vamos visualizar as alterações. Substituir. Gosto disso. Então é isso, é assim que adicionar textos extravagantes. Estamos indo para algum lugar que fizemos. Então, vamos em frente e adicione esses textos. Vou apenas copiar isso. Copie e vou entrar aqui e clicar neste pequeno ícone aqui para abrir os elementos e arrastar este editor de texto abaixo do cinegrafista. E enquanto ainda estiver selecionado, selecionarei tudo isso excluído e, em seguida, colarei o pequeno texto que acabamos de copiar do outro lado lá. E então, enquanto ainda estiver selecionado, vou entrar no estilo e alinhar seu centro. Mude a cor para branco. Em seguida, selecione o cinegrafista. Vá para dentro avançado, quebre a margem e, em seguida, de baixo para dentro, diminuiu a margem inferior. Empurre os pequenos textos para fora. Vamos atualizar isso. E vamos visualizar as alterações. Super incrível. Então, agora adicionamos nossos textos extravagantes e o texto descritivo à seção de heróis. Em seguida, queremos adicionar este botão aqui. Então, vamos fazer isso na próxima lição. 8. Como adicionar o fundo animado: Então, bem-vindo de volta. Então, desta vez, queremos criar esses planos de fundo animados aqui. Se você olhar de perto, notará que o plano de fundo tem algum tipo de círculos se movendo aleatoriamente, e todos eles são de tamanho aleatório. Então, vamos ver como fazer isso. O que eu quero fazer é pular para dentro do painel. Então, não vou entrar no painel. Então deixe-me clicar nisso. E agora, dentro do painel, queremos entrar nos plugins, adicionar novos. Porque queremos adicionar um plugin que adiciona essas partículas. Então, vamos em frente e digite Pi, outlet pi ou net. E então temos dois plug-ins pi out net aqui. E o que queremos E é complementos de botnet para Elementor. Então incutir isso e ativar ou andar. Portanto, esses são os recursos que o plugin disponibiliza para nós e também tem alguns procedimentos. Então, agora que temos o plug-in instalado, vamos voltar ao nosso espaço de trabalho aqui e atualizar esta página para que possamos carregar o plug-in ou noiva recém-instalado da marca . Então, agora ele está carregado. Vamos entrar em colapso básico. Ele entrou em colapso pro general, colapsou tudo. E agora você notará que temos esses widgets gratuitos PAF E. Então esse é um complemento de rede piloto para elementos de widgets gratuitos. E tem, claro, os elementos que ele trouxe para o projeto. Então, selecionando nossa seção. Agora, vamos selecionar esta seção. E você notará agora, além das três guias que temos aqui no topo, temos o PIFP. Então, se você clicar nisso, foram apresentadas configurações adicionais para o PAF II, então partículas PIFP, Vamos selecionar. Agora, agora está ativo. Portanto, antes de fazermos qualquer alteração, clicarei em Atualizar. E vamos visualizar as alterações. Então é assim que ele se parece por padrão. Então, precisamos ajustá-lo um pouco para que pareça algo mais sutil assim. Então, vamos em frente e pular dentro do nosso espaço de trabalho. E como tudo está vermelho por enquanto, precisamos mudar essas cores. Então, vamos para algo como um cinza muito escuro ali mesmo. Em algum lugar lá. Vou com esse código de cores. Vou copiar isso. E também, porque eles também têm links, perceber que eles têm essas linhas que conectam os pontos. Então, eu só quero fazer a cor do link da mesma cor que os círculos ou os elementos. Então, vamos colar isso lá e vamos atualizá-lo. Vamos visualizar as alterações. E é isso que temos agora. Então note que eles estão se movendo muito rápido e precisamos que eles diminuam um pouco. Então, vamos ver onde está a velocidade dessa partícula? Vamos reduzir isso para 1. Mas é claro, ele pode brincar com a velocidade e ajustá-lo para a velocidade que você quiser. Então, vamos visualizar isso. Er, então é isso que temos no momento. Acho que gosto disso. A próxima coisa que queremos fazer é criar esse botão aqui. E observe que ele tem esse efeito flutuante quando você passa o mouse sobre ele. E veremos como fazer isso. Então, vamos pular aqui, e vamos clicar neste ícone Mais aqui e digitar botão. E vamos clicar no primeiro botão. Ou vamos excluir tudo isso. Colapso isso. E vamos entrar no básico. E vamos selecionar o botão aqui. Vamos soltá-lo quando essa linha azul parece indicar que estamos prontos para cair. E agora, por padrão, está no lado esquerdo. Vamos empurrá-lo para o meio. E vamos entrar no estilo. Não, em primeiro lugar, vamos mudar o que ele diz no conteúdo. Textos, clique aqui. O que ele diz? Veja meu portfólio. Veja meu portfólio ou RI. A próxima coisa que queremos fazer é entrar no estilo para que possamos começar a estilizá-lo. Vou colapsar isso por um momento e você notará que temos essas duas opções. Então, vamos expandir o botão. E para a cor, vamos mudá-la para esse amarelo. Então eu vou falar aqui e copiar esses amarelos. Lembre-se que eu forneci esse documento dentro da pasta na descrição abaixo. Então, vamos colar isso lá. E agora o botão é amarelo, mas a cor de teste precisa ser preta, assim. E então vamos mudar a tipografia para Montserrat. Montserrat. Gosto de como parece. E vamos fazer algo sobre o preenchimento porque observe aqui no nosso botão, aqui, ele tem um bom preenchimento que faz com que pareça mais visível e é isso que estamos tentando alcançar. Então, enquanto o botão ainda estiver selecionado, vou desfazer o botão. Vamos para o preenchimento e vamos quebrar esse link. E isso distorcerá o botão por um momento. Vamos aumentar o preenchimento esquerdo 250 e o preenchimento direito 250, inferior e superior 20. Ou RI. Vamos atualizar isso. E vamos visualizar as alterações. Super incrível. Então é isso que temos no momento. Mas agora observe que nossa seção principal de heróis vai até aqui porque é aí que o botão chega. Precisamos aumentar o preenchimento aqui e aumentar o espaçamento entre o botão e esse texto, assim como aqui. Então, vamos fazer isso. Assim, podemos selecionar enquanto o botão ainda estiver selecionado. Vamos entrar avançado. Vamos quebrar esse link lá em cima, e vamos fazer com que a margem superior seja 50. Agora vamos torná-lo um 100. Vamos atualizar isso. Vamos visualizar as alterações. Ou certo, então agora está em um bom local. Mas queremos aumentar. A próxima coisa que queremos fazer é aumentar o preenchimento na própria seção de heróis, demarcado por esta borda azul aqui. Então, vamos selecionar a seção em si. E vamos entrar avançado. E vamos dar a ele um preenchimento inferior de 6060 assim. Vamos atualizar isso. Em pré-visualização, as alterações. Tudo bem, então agora temos essas partículas se movendo acima e abaixo do botão. E nossa seção de heróis agora parece ótima. Então, a próxima coisa que queremos fazer é trabalhar nesta seção aqui com esses bons ícones. Sim, então este será um local muito bom para apresentar um dos seus projetos favoritos ou mais recentes. Então, vamos seguir em frente e criar esta seção. Vejo você em breve. 9. Adicionar a imagem: Bem-vindo de volta. Então, pulando para o lado leste do nosso espaço de trabalho. O que queremos fazer é adicionar uma nova seção porque lembre-se de que queremos criar esta seção aqui e ela está diretamente abaixo do nosso botão. Então, queremos adicionar uma seção de coluna dupla. Então, vamos fazer isso. Clique nisso. E agora temos uma coluna dupla N aqui. Vou clicar nisso, arrastar um elemento de imagem para lá. Vamos clicar nisso e arrastar um elemento de cabeçalho para lá. E vamos clicar nesse pequeno botão ali e arrastar um editor de texto ali e soltar quando essa linha azul aparecer. E lembre-se que temos esse ícone aqui. Então, vamos voltar aqui e clicar nesse pequeno ícone para abrir o ícone de elementos Insight e escolher este que tem a estrela. Estes são os padrões Elementor, elementor, elementos de ícone. Vamos arrastar isso e soltá-lo logo acima do título. E, por padrão, está no meio. Então, enquanto ainda estiver selecionado, vamos alinhá-lo à esquerda. Atualize isso. Tudo bem, então vamos visualizar as alterações. Tudo bem, então é isso que temos. Não estou muito bonito. Precisamos fazer algo sobre isso. Então, vamos em frente e adicione a imagem primeiro. Selecionarei a imagem e isso mudará para editar imagens e saídas. Clique lá e clique em ir para fazer upload de arquivos, selecione arquivos. E lembre-se que mencionei que preparei essa pasta de ativos e ela estará na descrição abaixo. Você pode baixá-lo. Ele tem todas as imagens que estarão usando. Então, selecionarei essa imagem. Sim, deixe-me selecionar essa imagem por enquanto. Abra isso. E vamos prosseguir e inserir mídia. Assim mesmo. Atualize isso. E agora vamos ver a aparência da nossa fonte. Então este é Montserrat. Vou copiar esse Lorem Ipsum. Então, podemos colá-lo lá, copiar isso. E vamos entrar aqui. Vamos selecionar isso. Cada tiro conta. E vamos selecionar a descrição. Então entre aqui, selecione tudo, exclua isso, e vamos adicionar nosso longo Lorem Ipsum, à direita, então, enquanto isso ainda estiver selecionado, vamos entrar no estilo e mudar a cor da fonte para branco. Clique em qualquer lugar lá para sair dessa caixa. E vamos clicar em topografia. Vamos treinar a família para Montserrat. Entre. Selecionarei o título, o cabeçalho. Vou mudar isso. Sim, isso é um H2, eu gosto disso. E volte para dentro do estilo, mude isso para branco também. Então, vamos selecionar o ícone e vamos entrar aqui, dentro da câmera. Eu não gosto disso. Tudo bem, então vamos selecionar isso. Mas você também pode carregar seus próprios ícones, se quiser. Então insira isso. E agora é uma câmera, mas precisamos torná-la essa cor amarela. Então, vamos entrar aqui enquanto ainda estiver selecionado estilo. Vai aqui. E eu tocarei neste bloco de anotações aqui e copiarei isso. Entre aqui e cole-o aqui. E agora está amarelo. Mas esses elementos estão muito próximos. Então, o que precisamos fazer é selecionar esta seção e entrar aqui em Layout, lacuna de colunas. Vamos selecionar qualquer uma dessas opções que você gosta, mas vou usar mais e depois atualizarei isso. Então, agora a distância entre essas duas colunas é aumentada. Então, vamos visualizar as alterações. Então é isso que temos até agora. Acho que está começando a tomar forma. Precisamos mudar essas fontes dois meses da família Arad. Então, vamos selecionar isso. Vá para dentro da tipografia de estilo. Família, Montserrat. Montserrat. E eu quero aumentar o peso para algo como 800 e atualizar isso. Também aumenta o tamanho. Só vou usar meus olhos. Digamos que até algum lugar talvez 38 esteja bem. Atualize isso. E agora a distância entre o botão e esta seção aqui é, é um pouco pequena. Então, vamos aumentar isso. Vamos selecionar a seção em coincidir avançado. Quebre este link aqui e aumente a margem superior para talvez algo como 50. O aplicativo para esse local e atualize isso. E podemos visualizar as alterações. Tudo bem, eu gosto disso. Então, a próxima coisa que precisamos fazer é adicionar esse botão. E uma grande coisa sobre o Elementor é que você pode copiar e colar elementos como em outro normal, o software de design visual como o Adobe Illustrator ou o Photoshop. Então, entrando aqui, podemos simplesmente copiar este botão aqui. Clique com o botão direito no botão e copie-o. Então eu vou para dentro aqui. Clique com o botão direito nos elementos de texto e cole. Então, o botão ficará abaixo do botão direito do botão direito do mouse. Então agora está abaixo, mas agora ele tem as configurações que definimos para este, precisamos alterar as configurações para se adequar a essas áreas. Então, antes de tudo, vamos movê-lo para a esquerda. Vamos remover essa margem. Então, vamos para Avançado e remova essa margem. Talvez tenha 0. Vamos aumentar o tamanho da imagem até esse ponto talvez. E vamos atualizar isso. E vamos visualizar as alterações. E isso é o que temos até agora. Bem aqui. É vermelho e amarelo próprio pairar. Então, vamos mudar isso. Então, vamos aplicar esse efeito de focalização. Bem, o botão está selecionado. Vamos entrar no estilo em Hoover, que queria ser a leitura sorridente. Então eu vou copiar isso, colar isso lá dentro. Então, de jeito nenhum queremos que seja leve, querendo ser leve leitura no estado normal e em pairar. Queríamos ter esses amarelo amarelo vibrante, copiar isso ao pairar, querendo ser esse amarelo vibrante assim. E, em seguida, estado normal, a fonte precisa ser branca. Sim, precisa ser branco. Assim, fonte de estado normal, ampla. Ao passar o mouse, podemos torná-lo preto assim. Então, vamos atualizar isso e visualizar as alterações. Vamos rolar para baixo. E agora nosso botão está se comportando da maneira que queremos. Vamos seguir em frente e criar isso, minha seção de serviços. E este será um local muito bom para dar uma breve descrição do que você faz pelo seu cliente. Então, vamos criar a seção Meus serviços. Na próxima lição, verei você em breve. 10. Como adicionar os serviços: Bem-vindo de volta. Então, aqui estamos em outra lição incrível. Então, a próxima coisa que queremos fazer agora é adicionar minha seção de serviços. Então, começaremos adicionando o título e, claro, esses ícones e texto. Então, vamos pular diretamente dentro do nosso espaço de trabalho. E o que queremos fazer é adicionar uma única seção de coluna que seja executada todo o caminho da esquerda para a direita. E lembre-se que podemos copiar elementos de um lugar para outro quando trabalhamos com Elementor, como copiamos esse botão e o usamos aqui. Então, também queremos copiar este título aqui para que possamos usá-lo aqui. Quero mostrar rapidamente um recurso muito útil que o elementar fornece. E você vai notar quando eu passar o mouse sobre este canto aqui, nada acontece aqui. Ou se eu passar o mouse aqui, nada de especial acontece. Mas eu quero clicar neste menu de hambúrguer aqui e entrar nas preferências do usuário. Editando alças. Altere isso para sim e diga atualize isso. Então, agora, quando estamos aqui dentro, quando você passa o mouse sobre os cantos, traz essas opções aqui que ajudam você a fazer seu trabalho mais rápido. Então, como se eu quisesse duplicá-los, tudo o que fazer é passar o mouse sobre eles e clicar nisso. E agora posso arrastar isso para nossa seção de GUI completa aqui. A próxima coisa que eu quero fazer é duplicar isso e arrastá-lo para dentro da nossa seção bem ali. E então eu quero remover todo esse sexo, então ficamos com uma frase. E enquanto ainda estiver selecionado, vamos entrar no estilo e alinhá-lo ao meio e fazer o mesmo para o cabeçalho. Alinhe-o ao meio. E vamos clicar na seção em si. Vá para Avançado, quebre o link na margem e dê a ele uma margem de 100. Certo? Então, temos um bom espaçamento entre as duas seções. Atualize isso. Vamos visualizar rapidamente as alterações. E é isso que temos. Então, a próxima coisa que queremos fazer é adicionar esses serviços. Então, vamos ver como fazer isso. Vamos clicar neste pequeno ícone aqui para exibir esses elementos. E queremos arrastar uma seção interna logo abaixo desse texto. Nessa interseção precisa ter mais algumas colunas. Um que é duplicado mais uma vez também. Nessas colunas manterão diferentes partes dessas áreas. Então, agora, uma coluna manterá essas e outras colunas as manterão. Outra coluna destes, e outra coluna destes. Então é por isso que temos quatro. Então, para este e arraste isso até talvez algo como por enquanto, vamos começar com um nove. Bem, enquanto eu arrasto, você notará que temos algumas métricas que estão mudando em tempo real. O da esquerda é um, a, vamos mudar esses nove em algum lugar lá. Vamos puxar isso para nove também. Veja as métricas à esquerda. Agora vamos dar um 5,55 g que são 55 também. Ou RI. Então, aqui, o que precisamos fazer é clicar nesse ícone de sinal de adição e tipo. E vamos arrastar um ícone para lá. E com esse ícone clicando lá e selecione qualquer ícone que você deseja relacionado à fotografia. Então, deixe-me selecionar isso, insira isso. E você notará que o ícone é bico por padrão. Mas faremos algo sobre isso. A próxima coisa que queremos fazer é me deixar copiar este texto aqui. Copie isso e a seção são meus serviços. Então deixe-me selecionar o primeiro n aqui. Quero clicar nesse sinal de mais e, em seguida, arrastar um cabeçalho elementos. E enquanto ainda estiver selecionado, fotografia de casamento, vou colar isso lá dentro. Tudo bem, então a próxima coisa, vamos pegar isso e pegar um editor de texto no soltá-lo lá. Então, vamos estilizar os textos. Vamos começar com o ícone. Aqui dentro. Vamos até eu conciso e arrastar isso até que você esteja satisfeito. Acho que 35 está bem para mim. E vamos mudar a cor do botão, a cor do ícone para este amarelo. Então deixe-me pular e copiar isso e voltar lá e colar o amarelo lá dentro. Então agora está amarelo. Vamos selecionar esse título, entrar no estilo, selecionar a faculdade, alterá-lo para branco. Agora quero mudar a família tipografia dois meses no Iraque. E eu quero mudar os pesos da fonte para talvez 700, mas quero reduzir o tamanho um pouco para 25 está bem. Em seguida, selecionarei essa descrição abaixo aqui. E enquanto ainda estiver selecionado, estilo de lado, mude a cor para branco. Mude a família da tipografia para Montserrat. Tudo bem, atualize isso. E eu quero mudar essa cor um pouco. Portanto, seja um cinza mais escuro, ligeiramente escuro para que seja distinguível do próprio título. Em algum lugar lá. Tudo bem, então há uma pequena diferença entre as sombras deles. E então eu vou visualizar isso. Lá temos isso, então temos um serviço. Agora, a próxima coisa que queremos fazer é duplicar isso, mouse sobre isso e duplicá-lo e arrastá-lo para lá. E agora você notará que não podemos soltá-lo naquele pequeno bug, naquela caixa porque é pequena, então vou torná-la maior. Arraste e solte-o lá. E lembre-se que tínhamos feito 5.5. Então, vamos arrastá-lo para 5,5. Tudo bem. Vamos duplicar isso é bom, arrastá-lo para lá. Duplique isso, arraste-o para lá. E esse é o nosso segundo serviço. Então, vou pegar esse design gráfico e colá-lo lá. A terceira é a fotografia corporativa. Então, a próxima coisa que queremos fazer é duplicá-los. Agora que temos esses dois serviços, queremos duplicar essa seção assim e duplicá-la novamente. Então agora temos o conjunto de serviços todos estilizados de forma coesa. Então, vamos copiar isso. Dissemos que é fotografia corporativa. Vamos colar isso lá. Então Graham, selecione isso, isso na fotografia do evento. E, finalmente, a produção de vídeo. Ou certo, vamos atualizar isso. E, em seguida, vamos visualizar as alterações. Então, rolar para baixo, substituir nossa seção Meus Serviços parece super incrível, agradável e limpo. Então, a próxima coisa que queremos fazer é criar essa área de chamada à ação aqui. Portanto, esta é uma landing page e precisa fazer com que as pessoas tomem medidas para atender às necessidades de chamar as pessoas à ação. E essa é uma das maneiras de fazer isso para receber conselhos de fotografia de mim e alguém pode se juntar à sua Lista VIP. Então, vamos seguir em frente e criar essa seção. E tem esse bom efeito que a imagem de fundo é corrigida. Então, vamos ver como fazer isso na próxima aula. 11. Como adicionar uma chamada à ação: Bem-vindo a esta aula. Então, já criamos essa seção de serviços. Agora é hora de criar essa área de call to action aqui. Queremos ser capazes de chamar as pessoas para tomar nossa ação desejada que nos será benéfica. E como somos fotógrafos, queremos que as pessoas se juntem ao nosso envio desses. É por isso que temos esse botão aqui. Então, vamos ver como criar essa seção em nosso espaço de trabalho. Então, pulando para o nosso espaço de trabalho, a próxima coisa, como você já adivinhou, é criar uma nova seção. E vamos ver. Sim, é uma seção de largura total, como de costume. E observe que não temos margem aqui entre esses dois. Então, por que não começamos adicionando uma margem enquanto ela ainda está selecionada. Vá para o avanço, quebre esse link aqui. Então, vamos adicionar uma margem superior de 100. E agora temos um bom espaçamento entre os dois. E enquanto esta seção ainda estiver selecionada, entre no estilo. Em segundo plano, deixe-me entrar em colapso de fundo e temos todos esses painéis aqui. E estamos interessados no plano de fundo por enquanto. Tipo de fundo. Clique no pincel ali e vá para Imagem. Clique no sinal de mais lá, e precisamos adicionar a imagem que será nosso plano de fundo assim. Então, selecionarei fazer upload de arquivos, selecionar arquivos. E acho que isso é uma foto. Abra isso. E vamos inserir mídia. Então, é assim que parece por padrão. Então, a primeira coisa que queremos fazer, bem, isso ainda está selecionado. Vamos para o centro de posição, centro e, em seguida, anexos, digamos fixados para que, quando rolarmos, permaneça em um ponto como esse. E então vamos dizer repetir, sem repetição, tamanho, digamos capa ou RI. A razão pela qual isso não é bem visível, porque nossa seção aqui está vazia. Lembre-se que este é o nosso plano de fundo, mas o tamanho da nossa seção será determinado pela quantidade de conteúdo que colocamos dentro dela. Então, vamos clicar nesse plus. E em vez de criar um novo cabeçalho, vamos duplicar isso. Clique nele e, em seguida, vamos arrastá-lo e soltá-lo lá quando a linha azul aparecer. Meus serviços. E logo abaixo dele. Vamos duplicar isso e arrastá-lo para baixo dos meus serviços. Agora, enquanto isso ainda estiver selecionado, vamos empurrá-lo para o centro, para o meio. Então agora está alinhado ao centro. Até agora não podemos ler porque o fundo é brilhante. Então selecione esta seção novamente. E em Tipo de plano de fundo e um plano de fundo, temos sobreposição de fundo. Vamos expandir esse tipo de sobreposição de fundo. E vamos dar uma cor, preta. Vamos dar um preto escuro assim. E então vamos aumentar a opacidade só para torná-la um pouco mais escura. Tudo bem, atualize isso. E vamos visualizar as alterações. Incrível, então é isso que temos. Não podemos rolar mais do que isso porque não temos nada abaixo dele. Mas poderemos rolar e ver por enquanto, o que queremos fazer é pegar o texto aqui, copiar isso. E eu quero selecionar isso. E enquanto ainda estiver selecionado, quero colá-lo aqui. Cole isso lá dentro. E vamos voltar aqui. Sim, isso aceita. E agora observe que nossos textos agora correm todo o caminho da esquerda para a direita. E isso porque usamos uma seção de coluna única de largura total. Acho que precisamos torná-lo em colunas triplas, então vou duplicar as colunas duas vezes assim. E agora se livre do conteúdo nas colunas laterais. Agora vamos excluir isso, excluir isso e excluí-lo. E agora temos essas colunas no meio. Então agora podemos arrastar isso, garantir que tudo esteja no meio. Vamos dar um, 20, 20% à esquerda. Vamos também dar que está 20 por cento ali, 20% à direita. Tudo bem, então vamos atualizar isso. E outra coisa que você notará é que não temos preenchimento suficiente acima do texto, então ele está quase tocando a borda da seção. Então, vamos aumentar o preenchimento superior na seção. Selecione uma seção de preenchimento avançado. Vamos quebrar esse preenchimento e vamos aumentar o preenchimento superior. Só para que pudéssemos ter um bom espaço no espaço no topo. Algo como 70. E então vamos fazer o mesmo pelo fundo. Vamos torná-lo um 7070 assim. A próxima coisa que queremos fazer é ir até aqui e duplicar esse botão. E vamos arrastá-lo e colocá-lo abaixo do texto. É nosso chamado à ação. E, por padrão, está à esquerda. Então, enquanto ainda estiver selecionado, vamos colocá-lo no meio. E o que isso diz? Jane, minha lista VIP. Então, enquanto ainda estiver selecionado em conteúdo, minha lista VIP e atualize isso. E vamos visualizar as alterações. Rolando para baixo. Incrível, então temos uma boa chamada à ação e as pessoas podem clicar nisso porque querem receber conselhos de fotografia de você. Então esse é um bom local para ter um call to action. A próxima coisa que queremos fazer é trabalhar nesta galeria filtrável. Alguém veio ver todos os projetos que você está trabalhando. Ou eles podem visualizá-los por categoria. Por exemplo, categoria de casamento. Eles clicam que isso mostra apenas os projetos relacionados ao casamento que tiveram a camarilha cooperar. Eles são mostrados apenas os shows corporativos que você teve. Studio, esse é o seu estúdio, ao ar livre. E podemos voltar a todos. Então, vamos ver como criar isso. Então, vejo você em breve. 12. Como criar uma galeria de projetos: Bem-vindo de volta. Agora, é hora de criarmos essa galeria aqui. Então, vamos pular diretamente dentro do nosso espaço de trabalho. E, claro, como temos feito, a próxima coisa que precisamos adicionar é outra seção, uma seção de coluna tripla. E este é o que queremos ir com, então vou selecionar isso. E agora é uma seção de coluna tripla. Vamos criar algum espaço entre as duas seções adicionando uma margem superior. Selecione a margem superior da seção, quebre esse link. Então, estamos lidando apenas com o topo. Rash seria um 100. Agora temos este quarto. Em seguida, vamos clicar no sinal de mais lá. E vamos entrar aqui e digitar filtrável. Filtrável. E nós temos esse elemento trazido por complementos essenciais para o Elementor, é por isso que eu realmente gosto desse plug-in. Então, vamos arrastá-lo para lá. E, no entanto, já está mostrando alguma galeria de espaço reservado aqui que podemos começar a preencher com nosso próprio conteúdo. Então, vamos atualizar isso e visualizar as alterações antes de começarmos a preenchê-las com as nossas. Vamos visualizar isso. Vamos rolar. E é isso que temos. Então, a primeira coisa que quero fazer é aumentar a largura desta coluna. Então eu vou voltar aqui e vamos arrastar isso todo o caminho para eu dar-lhe um 11 à esquerda. Na matriz esquerda aqui. Vou dar-lhe um 10, e deste outro lado, um 10 também. E vamos atualizar isso. E enquanto estiver fazendo isso, e enquanto isso estiver selecionado, clique em qualquer lugar aqui. Agora é o elemento ativo com o qual estamos trabalhando. E você pode confirmar isso olhando para o topo aqui. Agora, a primeira coisa que quero fazer é colapsar essas configurações ali mesmo. E você notará que temos esses controles filtráveis e temos itens da Galeria. Controles filtráveis, são esses controles aqui quando você clica no item da galeria e clica em todos. Esses são os controles filtráveis, certo? Em seguida, os itens da galeria são as imagens em si, os próprios itens. Então, vamos começar com os controles filtráveis expandindo isso. E vamos adicionar um item. Então, vamos dar um nome, talvez molhar. Vamos colapsar isso. Já havia controles padrão, então vamos expandir isso e dar outro nome a ele. Cooperar, núcleo, desfile. Vamos colapsar isso. Vamos duplicá-lo clicando nesse ícone ou clicando em Adicionar item. Fotografia contínua, digamos ao ar livre, ao ar livre. Vamos duplicar isso. Digamos que talvez algo como o Studio atualize lá. Então, agora temos alguns controles. Estes podem ser seus projetos diferentes ou quaisquer tipos de categorias que você queira ter para seus projetos. Tudo bem, então vamos recolher os controles filtráveis e entrar nos itens da galeria. Estes são os itens da galeria que já temos aqui, para que possamos ir e começar a alterá-los. Portanto, o nome do controle significa o controle que será usado para exibi-lo. Então, por exemplo, se você quiser que este item da galeria fique visível quando alguém clica no casamento, então dentro aqui vamos digitar casamento de casamento. Vamos colapsar isso. Então, se quisermos que isso apareça, quando alguém clicar em cooperar, clicaremos em digitar nomes cooperativos. Lembre-se que esses são os controles que criamos aqui. Cooperar, casar, ao ar livre e estúdio. Então, vamos entrar aqui e apenas dar a eles controles diferentes aleatoriamente. E eu esqueci de dar nomes a eles. Então, o primeiro item aqui pode ser minha melhor chance. Vamos entrar em colapso. Tudo bem, M antes de deixá-lo, enquanto ainda estamos nas minhas melhores fotos, se passarmos o mouse, você notará que agora mudou para minhas melhores fotos. E se rolarmos para baixo. É aqui que adicionamos a imagem. Ainda estamos no primeiro elemento aqui. Então, selecionamos isso e podemos clicar, entrar, fazer upload de arquivos, selecionar arquivos. E agora acho que quero importar todas essas imagens uma só vez porque elas vão precisar delas. Tudo bem, então vamos começar a selecionar um por um. Acho que posso começar com esse. Insira mídia. E agora essa é a imagem que aparecerá aqui. Assim como isso. Então, rolando para cima novamente, vou entrar em colapso. Minhas melhores fotos. Vá para a segunda imagem. Isso é controlado por empresas e a galeria nomeada pode ser o item da galeria pode ser através de seus shorts. E então vamos rolar aqui. Clique nessa imagem lá. Enquanto o estúdio, tínhamos uma imagem de estúdio. De qualquer forma, vamos escolher todas as imagens aleatórias aqui. Claro, você levaria tempo para atingir o melhor pico. Vamos rolar para cima. Colapso que expande isso. Isso pode ser controlado por ao ar livre saber, digamos Sim, ao ar livre. Vamos dar um nome a ele. Fotos ao ar livre. E vamos rolar para baixo e selecionar uma imagem aqui para ela. Vamos atualizar isso. Vamos continuar, vamos entrar em colapso. Recolher esse próximo item. E você pode continuar e criar quantos itens de galeria você quiser, itens de galeria quanto quiser. Mas é claro, vamos terminar esses seis. Digamos que isso também seja controle. De jeito nenhum. Isso é chamado, pode estar lendo, lendo fotos e isso é controlado por um controle de filtro de casamento. Vamos entrar nas imagens. Como esta foto de casamento ali mesmo. E então vamos continuar rolando o próximo item da galeria aqui. E comece mudando a imagem. Dê isso a ele. Vamos escolher isso. E então eu vou rolar para cima e dar-lhe o nome. Sons tiros, por exemplo. E é controlado por, digamos ao ar livre. Lembre-se de que você precisa ter certeza de que esses controles, esses controles aqui. Nomes de controle de casamento são os mesmos nomes de controle filtráveis que você usou aqui porque eles são literalmente os que você está se referindo quando você está preenchendo essas áreas, certo? Então, o último deve ser controlado talvez pelo Studio. Estúdio. E o nome da galeria. Talvez vamos dar algo como sim, fotos de estúdio. E vamos rolar para baixo e adicionar uma imagem para isso, certo? Então, vamos clicar Talvez, sim, talvez esse. Insira mídia, atualize isso. E esse é o nosso último item da galeria. Então, se eu desmoronar essas fotos de estúdio e me deixar expandir a primeira, minha melhor chance aqui. E vamos dar uma olhada para que você possa adicionar coisas como classificações de preços ativados e tudo isso. E você também pode ter um link aqui, página para t HTTP, google.com. E você também pode, sempre que alguém clicar neste primeiro item aqui, que são minhas melhores fotos, que é além disso, elas serão redirecionadas para Google.com ou para onde quer que elas levem. Então, se, por exemplo, você tiver uma outra página que tenha todas as suas melhores fotos, isso os levará para essa área. Assim, também podemos abrir em uma nova guia. Se você verificar isso, abrirá em uma nova guia e vamos atualizar isso e visualizar as alterações. Vamos visualizar as alterações. Rolando para baixo. Super incrível. Então, agora a última coisa que precisamos fazer é mudar a cor de fundo para ser preta. Então, vamos voltar aqui. E, embora isso ainda seja selecionado selecionando em qualquer lugar, clique em qualquer lugar. Vamos rolar para baixo, rolar para cima, recolher os itens da galeria e, em seguida, vamos entrar no estilo, plano de fundo, cor, preto, assim. E então vamos colapsar o azulejo generais. E vamos entrar no estilo controlado para mudar a cor desses controles. Portanto, a cor do texto deve ser branca. Atualize isso. Sim, então acho que estamos no alvo com isso. E você pode ir em frente e brincar com todas as configurações disponíveis aqui. Existem muitos, mas isso é um desafio para você agora, vá em frente e brinque com todas essas configurações para ver o que você pode criar. Mas se visualizarmos as alterações agora e vermos como nossa galeria se parece, vamos rolar e ver o que temos lá embaixo. Tudo bem. Então isso é super incrível, mas agora acabei de lembrar que esquecemos de adicionar um título. Então, vamos pegá-los em nossa página de referência. Copie isso. Vou entrar aqui. E o que eu quero fazer é duplicar isso. E agora eu quero arrastar isso e soltá-lo logo acima da galeria filtrável. E enquanto ainda estiver selecionado, selecionarei tudo isso e colarei os últimos projetos lá. E então vou atualizar isso. Vamos visualizar isso. Certo? Gosto do que temos. Então, se clicarmos em cooperar serão apenas os projetos corporativos, casamento, estúdio ao ar livre, e podemos ver todos eles. Então, a próxima coisa que queremos fazer é criar a seção Conheça a equipe. Então, vamos fazer isso na próxima lição. Então, vejo você em breve. 13. Como criar membros de equipe: E bem-vindo de volta. Então agora estamos aqui na página de referência que estamos copiando. E a próxima coisa que queremos criar facilita a seção da equipe, esta seção. Então, vamos seguir em frente e fazer isso dentro do nosso espaço de trabalho, logo abaixo da galeria de rolos de filtro. Vamos seguir em frente e adicionar uma única seção de coluna como essa. E a primeira coisa que queremos fazer é duplicar isso. Arraste-o e solte-o dentro da seção de coluna única. Vamos em frente e adicionar a margem no topo desta seção. Dê um 100. E agora temos esse espaçamento lá logo abaixo desses projetos. Vamos dar essa breve descrição. Então, vamos duplicar isso. E vamos arrastar isso para lá. Tudo bem, então agora que temos isso, vamos em frente e adicionar uma interseção de coluna tripla. Então, vamos arrastar uma interseção lá. E então vamos duplicar esta seção. Agora temos três deles. Vamos clicar em mais lá e arrastar um elemento de imagem para lá. E enquanto ainda estiver ativo, selecionarei uma dessas imagens que importamos. Então, vamos seguir em frente e clicar nesse cara. Ele é um membro da equipe. E queremos escrever abaixo dele. Vamos clicar nesse ícone e arrastar um pequeno e um cabeçalho ali. E vamos dar um nome, talvez. Alex rider ou algo desse tipo. Vamos alinhá-lo ao centro. Vamos fazer disso um ódio 3. E vamos reduzir um pouco o tamanho. Talvez 23. Vamos mudar a família para Monstera. Vamos mudar a cor para branco. E wallah, vamos clicar nesse ícone no, arrastar um editor de texto lá. Largue no, vamos dar-lhe um título. Diretor para fotografia de dois gráficos. Certo? E então, enquanto isso ainda estiver selecionado, é entrar no estilo, alinhar o centro. E agora a distância entre o nome e o título é muito grande. Então, vamos reduzir a margem superior nisso enquanto ele ainda estiver selecionado avançado. Quebre esse link ali e reduza a margem superior. Atualizar. E agora vamos duplicar essa imagem e soltá-la lá. Vamos duplicar isso e soltá-lo na duplicata que e na maré duas vezes. Solte isso no final, aquele no final faz o mesmo para o nome duplicado duas vezes. E agora podemos selecionar isso e alterá-lo para qualquer nome no conteúdo que precisamos. Jane Doe. E Jane. Jane entra no conteúdo. Vamos mudar isso para atualizar isso, vamos selecionar Alex writer aqui. Mude isso para minha música tema. Talvez o diretor de marketing de marketing. Data disso. E vamos mudar as imagens. Então, selecionarei essa imagem. E assim que eu selecioná-lo, ele trará isso à tona. Clique nisso. Selecione outro membro. Esse cara. Note, vamos selecionar essa senhora porque você usa o nome de uma senhora aqui, Jane Doe. Vamos selecionar esse cara aqui. Vamos selecionar o membro final da equipe, Michael Sims ao atualizar isso. E observe que isso é um pouco mais curto que o resto, então sempre podemos redimensioná-los até termos um bom pé. Basta brincar com o tamanho até que você tenha o feed perfeito. E então vamos visualizar isso. Então, rolando para baixo. Tudo bem, então agora aqui está nossa equipe, mas agora precisamos mudar este x para ler. Conheça nossa equipe, conheça nossas equipes. Então atualize isso. E vamos visualizar as alterações. Rolando para baixo. E agora nossa equipe parece super incrível. Então, vamos para nossa página de referência aqui estamos. A próxima coisa é minhas conquistas na seção de números, esta seção aqui, e é animada. Quando alguém visita a página pela primeira vez. Esses números são animados. Vamos ver como fazer isso na próxima lição. Então, vejo você em breve. 14. Como criar contador animado: Bem-vindo de volta. Continuamos de onde paramos. Agora queremos criar essas, minhas conquistas na seção de números. E esses números são animados. Então, vamos ver como fazer isso dentro do nosso espaço de trabalho. Então, pulando aqui dentro, vou direto para o fundo. E, e vamos criar uma única seção de coluna. Assim mesmo. E o que queremos fazer é adicionar uma interseção. Então, clicando logo antes de fazermos isso, vamos adicionar alguma margem na parte superior dessas seções. Então clique nesse avanço, quebre esse link e vamos dar a ele uma margem superior acima de 100. Certo? Então, isso é espaçamento suficiente ali. Então, o que queremos fazer é clicar no sinal de mais no final, arrastar uma interseção. E então vamos duplicá-lo mais duas vezes. Assim mesmo. Agora temos quatro colunas dentro desta seção interna, que está dentro desta seção. Então, nesta seção interna, clicarei em Mais. E então vou digitar aqui contam. E temos alguns elementos relacionados a contagens aqui, mas o que precisaria facilitar o contador. Vamos arrastar este contador aqui e soltá-lo lá. M por padrão, ele só começa a fazer seu trabalho. Você percebe que temos o número final aqui, estes 100 estão aqui, então sempre podemos alterá-lo para talvez 23 dependendo do que você deseja mostrar. E altere esse número legal aqui, sempre podemos alterar o título aqui embaixo. Então, por exemplo, vamos ver o que temos aqui. Sim, então o número de fotografias está vindo aqui e cole isso lá dentro. Agora temos 23 fotografias. Isso não faz sentido. Digamos que você tenha 6.400 fotos. Tudo bem. Então, o que queremos fazer é estilizar essa única conquista aqui e depois duplicar o mesmo para o resto. Então, antes de tudo, vamos mudar essa cor para amarelo. Saiba que é branco. Então, vamos entrar no estilo e vamos mudar a cor do texto para branco. tipografia definitivamente mudou para cima. Mas você é livre para alterá-lo para qualquer fonte que quiser. E então eu vou brincar com o tamanho só para que não seja muito grande. Pensar em 35 servirá. E eu quero torná-lo ousado, então vou dar um 900. Agora vamos dar setecentos, oitocentos. Sim. E depois fecharei isso. Vou entrar no título e mudar a tipografia aqui. Primeiro de tudo, para ser Monstera interagir. E então eu vou mudar a cor para o nosso amarelo aqui. Então eu vou copiar esse amarelo e colá-lo aqui. E agora provavelmente ainda está lá. Clique em qualquer lugar aqui para se livrar disso, atualize isso. E agora, é claro que você notará que aqui temos esse fundo acinzentado que permite que essas conquistas se destaquem como guias. Então, vamos criar esse plano de fundo. Definitivamente são as seções, então selecionarei a seção em si. E então vou entrar no estilo, plano de fundo, plano de fundo, tipo, cor. Vou dar esse cinza escuro assim. Então deixe-me clicar em qualquer lugar aqui. E agora é ótimo. Mas agora nossa coluna não tem cor. Então, quero selecionar a coluna, Nossa coluna aqui. E eu quero entrar no estilo, tipo de fundo e dar uma cor preta. Agora está preto. Atualize isso. E vamos visualizar as alterações. Rolando para baixo. E é assim que parece agora. Então, precisamos dar essa borda e dar-lhe um raio de fronteira. Então, enquanto ainda estiver selecionado, nosso primeiro, um estilo ir dentro. Borda. E vamos dar-lhe uma borda de sólido. E vamos dar-lhe um raio de fronteira de cinco. Agora vamos dar um sete. E então, para a largura da borda, vamos dar algo como vamos dar um quatro por enquanto e atualizamos isso anteriormente. Tudo bem, vamos ver o que nossa referência tem. Tem algum tipo de cinza. Então, enquanto ainda estiver selecionado, quero dizer sombra de caixa porque notei que precisamos adicionar uma sombra de caixa. E quando clicamos na sombra da caixa, você não pode ver agora por causa desses quadros, esses quadros do editor que temos agora, mas a sombra da caixa já está sendo exibida. Deixe-me apenas atualizá-lo e visualizar para que você possa ver a sombra da caixa. E então vamos selecionar, Vamos. Vamos selecionar uma seção. Quero aumentar o preenchimento na parte superior e inferior. Então, vou selecionar a seção primeiro. Acolchoamento vasto, top. Vamos dar um 50. Agora isso é 550. E inferior 50. E agora demos um bom espaço na parte superior e inferior. E podemos fazer o mesmo para os lados, ambos os lados. Vamos dar talvez uma atualização 2220 ou escrever isso. E vamos fazer algo sobre essas fronteiras. É muito brilhante. Então, enquanto isso estiver selecionado, a coluna em si. Vamos entrar na cor da borda. E vamos dar essa doca cinza também, e depois atualizá-lo. Vamos visualizar as alterações. Substitua super incrível. Mas agora os números parecem estar tocando o topo da coluna e precisamos que eles tenham um bom preenchimento. Então, vamos aumentar o preenchimento para a coluna em si. Então clique nessa coluna. Indo para dentro avançado. Lembre-se que tínhamos quebrado esses links há um momento. Então, agora vamos aumentar o preenchimento superior até 15 talvez. E preenchimento inferior também. 15. E agora vamos copiar. Clique com o botão direito do mouse na coluna, na própria coluna, copie o botão direito E aqui dentro, clique com o botão direito e cole o estilo. Então você colou esse estilo. E vamos repetir o mesmo para esses dois. Estamos colando todo esse ladrilho que aplicamos a esta coluna. Então agora quase parece o mesmo que estes. Então, a próxima coisa que queremos fazer é duplicar isso três vezes e arrastar isso para lá. Arraste isso para lá e arraste isso para lá. E agora observe que eles estão tocando nas bordas, então essas são as margens direita e esquerda. Então, vamos selecionar este. Vamos selecionar essa única coluna. E vamos aumentar a margem certa talvez algo como 10. E o preenchimento esquerdo para 10, margem esquerda, 10, dez ou direita. E, em seguida, vamos clicar com o botão direito do mouse e copiar esse estilo. E vamos colar esse estilo dentro desses três. E agora eles foram separados corretamente. Vamos atualizar isso. Vamos visualizar as alterações. Certo? Vamos rolar para baixo e ver o que temos. Perfeito no entanto. Então, a única coisa que resta é um subtítulo para a seção. Então eu vou duplicar isso e arrastá-lo para cá. Solte-o ali mesmo. E podemos chamar isso. Minhas conquistas. Os números estão certos, mas é claro que precisamos mudar todos esses números aqui. Eles não conseguem ler a mesma coisa. Então, selecionar que entrar no conteúdo pode alterá-los para 51. E estes podem ser clientes. Então vamos mudar isso para CDs. Cds que você cobriu talvez 15 CDs. E o último 1º de maio será anos de experiência, talvez 25 mais. Então, neste momento, temos 25 aqui. Mas podemos vir aqui para o sufixo ou prefixo numérico e adicionar algumas coisas. Então, digamos que o sufixo numérico. Podemos adicionar o sinal de mais, basta clicar em mais, e agora ele aparecerá aqui, mais de 25 anos. Então, vamos atualizar isso na visualização das alterações. Então, rolando para baixo. Tudo bem, adoro o que estou olhando. Então, terminaremos com essa seção de conquistas. A próxima coisa que queremos fazer é criar essas últimas áreas de postagens de blog aqui. E está extraindo todos esses dados das postagens do blog que você já publicou. Então, vamos ver como fazer isso na próxima lição. Vejo você em breve. 15. Exibição os mais recentes posts no blog: Bem-vindo de volta. Vamos continuar. Então, neste momento, queremos criar essas últimas postagens de blog, sexuais. E, como já mencionamos, ele está extraindo dados de nossas postagens de blog já publicadas. Então isso significa que precisamos de alguma postagem publicada no blog. Vamos entrar em nosso painel e criar algumas postagens. Então, dentro do painel, irei para postagens. Clique nisso. E temos um post padrão de blog hello world que vem com cada nova instalação do WordPress. Claro, vou destruir isso porque queremos criar o nosso próprio, Adicionar novo ou direto quando estivermos aqui, vamos dar um nome a uma postagem no blog. Então, vou entrar aqui. E eu quero pegar esse nome aqui. Copie isso. E vamos entrar no Dashboard e colá-lo lá. Então, não vou tocar em mais nada aqui porque estamos apenas tentando publicar algumas postagens de blog rapidamente. Então, vamos entrar nas configurações e rolar para baixo e procurar uma imagem em destaque. Vamos definir uma imagem em destaque para esta postagem do blog. Então, digamos, por exemplo, sobre o que é isso? Vamos à direita as configurações da câmera para, sim, então vamos ver uma boa imagem para as configurações corretas da câmera como essa. Vamos definir a imagem em destaque. E então vamos atualizar isso. Publicação atualizada. Podemos ver o post, mas vamos voltar aqui e criar algumas postagens do blog mundial. Adicione novas ou RI, as segundas postagens do blog estão indo aqui e pegue esse nome e cole-o aqui. E, claro, no mundo real, você iria em frente e criaria a postagem do blog e a publicaria. Mas agora não estamos criando nenhum conteúdo, apenas adicionamos o título do blog, certo? Então, antes de publicarmos, ela adiciona uma imagem em destaque. Então, vamos ver, acho que é sobre fotografia ao ar livre, então vou selecionar isso. E, em seguida, publique esse retorno de chamada. Precisamos criar mais um. Adicionar novo. Portanto, esses são os dados que serão puxados para a frente da página da Web e exibidos lá. Então, vamos copiar isso e colá-lo lá. Oh, espere, vamos definir a imagem em destaque. Eu nem sei do que se trata, então vou apenas sentar essa publicação. Então, agora definimos nossa imagem em destaque, dado a ela um nome. Vamos voltar aqui. Agora temos três postagens no blog. Eles têm um título e uma imagem em destaque. Este é o título e esta é a imagem em destaque. Então, o que temos, tudo o que precisamos. Então, voltando espaço de trabalho da página Elementor aqui, queremos adicionar uma única seção de coluna e, dentro dela, precisamos adicionar uma grade de postagem, que é disponibilizada por complementos essenciais para Elementor, mas não está ativo por padrão, precisamos voltar ao nosso painel e ativá-lo dentro do plugin EIA. Então, vamos entrar no painel e clicar em átomos essenciais. Vamos entrar nos elementos. Rolando para baixo, você notará que elementos de conteúdo dinâmico, a pós-nota não está marcada, então verifique-a. Role para cima e salve as configurações. Configurações salvas. Agora adicionamos esses elementos ao nosso arsenal aqui. Então, vamos atualizar esta página primeiro. E agora que está atualizado, significa que salvamos nossas alterações. Vamos atualizar a página Control R ou Command R em um Mac para atualizar a página para que a nota da postagem esteja disponível para uso. Tudo bem, então agora, se digitarmos ganância, ela aparece aqui, Post Greed. Então, vamos rolar para baixo até o fundo. E lembre-se de que adicionamos esta seção de coluna única. Então, antes de tudo, vamos arrastar esta postagem ganância lá e soltá-la lá. Agora você notará nossas três postagens no blog, nossas prontas aparecendo. E agora vamos aumentar essa margem no topo aqui selecionando a seção avançada. Quebre esse link ali, dê um 100. E agora temos uma boa margem no topo. A próxima coisa que queremos fazer é clicar em qualquer lugar dentro dessa margem azul. Então, selecionamos o elemento, a grade de postagem. Então, antes de tudo, precisamos dizer a ele de onde extrair os dados. Então, poderíamos usar categorias. Mas neste momento essa classe não se trata de categorias, mas lembre-se, as postagens têm categorias. Então você poderia ter postagens sobre fotografia ao ar livre, postagens sobre fotografia interna. E quando alguém chega ao seu site em busca de fotografia ao ar livre, serão apresentadas postagens que você define a categoria para fotografia ao ar livre. Mas agora, por padrão, se não tivermos categorias, as postagens geralmente são categorizadas como não categorizadas, então há uma categoria que não podemos excluí-la que é chamada de não categorizada. Assim, podemos extrair, por padrão, ele está extraindo dados de lá apenas para ter certeza de que podemos digitar e categorizar e aparecer mais de 8 aqui. E agora temos certeza de que, por isso, ele está extraindo os dados. E a próxima coisa que queremos fazer é mudar. Então, antes de tudo, postagens por página, queremos mostrar três. Então, se tivéssemos sete postagens no blog, ainda veríamos apenas três aqui. Então é isso que isso significa. E vamos recolher isso por um segundo e expandir as configurações de layout. Queremos mostrar três colunas ou escrever, atualizar isso. E vamos visualizar as alterações. Rolando para baixo. Super incrível, então eles já estão tomando forma. Portanto, não se deixe enganar com a aparência deles aqui. Se atualizarmos a página, deixe-me apenas Controlar R para atualizar a aparência deles aqui. Ou variedade. Então, descendo aqui. Então, a próxima coisa que queremos fazer é, claro, mudar a cor de fundo para Ryan com nossa cor de fundo aqui. Portanto, enquanto isso ainda estiver selecionado, selecione em qualquer lugar dentro do elemento. Queremos entrar no estilo. Portanto, não, volte para dentro do conteúdo e vamos ocultar alguns desses detalhes aqui. Então, vamos para estilos de layout. E não vamos mostrar avatar. Não vamos mostrar o nome do autor. Não é mostrar essa data. Ou talvez possamos mostrar o nome do autor. Então cabe a você decidir o que quiser mostrar. Não quero mostrar o nome do autor. Sim, acho que é assim que eu gosto. Apenas o título e alguém pode ler mais. Também podemos mostrar o trecho se quisermos, mas não quero mostrar que os ovos são. Então, entrando no estilo, temos a cor de fundo do estilo do cartão postal. Então, vamos mudar isso para preto. Então, já está tomando a forma que queremos. E a próxima coisa que queremos é ir à tipografia e mudar a cor do título para branco. Está se ampliando aqui? Aqui, é largo. E vamos mudar a tipografia em si para Monterrey. Monterrey. E vamos aumentar a maneira da fonte para 800. E eu quero centralizá-lo assim. Em seguida, vamos expandir o estilo do botão Leia mais ou para a direita. Vamos mudar a cor do texto para branco. E então vamos escolher essa cor amarela. Copie isso. E vamos mudar o tipo de fundo 2, essa cor amarela. Els mudá-lo para aquela coluna, cara. Tudo bem. Então, a próxima coisa que faço é aumentar o preenchimento no botão aqui. Como você pode ver, as palavras estão tocando as bordas do botão. Então. Vamos para o preenchimento e quebrar isso. Vamos dar talvez um 30 à esquerda, um 30 à direita. Agora vamos tentar. Esquerda e direita 2020. E então, a parte superior e inferior podem ser 10101055 está bem. Tudo bem. E então vamos dar-lhe um raio de borda de cinco para dar aquele canto arredondado assim. E então vamos quebrar essa margem. E vamos dar a ele uma margem máxima. Vamos aumentar e usar nosso olho para ver até onde precisamos ir, digamos 15. E na margem esquerda, vamos aumentar a margem esquerda para talvez, digamos um 100. Sim, um 100 está bem por enquanto. Vamos mudar essa fonte para preto para preto. E então, ao passar o mouse, vamos mudá-lo para branco. E então vamos mudar a cor do tipo de fundo para esses vermelhos suaves. Então, vamos colar isso lá. Então, em quem come essa leitura leve, atualize isso. E agora nossas imagens aqui têm cantos afiados e nossas imagens de referência aqui têm cantos arredondados. Então, vamos fazer algo sobre isso. Então, colapsando isso e entrando no estilo de miniatura, vamos dar a ele um raio de borda de 20. E agora ele tem aquele canto arredondado. Atualize isso. E agora vamos duplicar esse título. E vamos arrastá-lo para lá. Últimas postagens no blog. E então vamos duplicar isso está bem, e soltá-lo ali mesmo. Assim. Então essa é uma breve descrição do que esperar aqui em baixo. Atualize isso. E vamos visualizar as alterações. Rolando para baixo até a parte inferior ou direita. Então é isso que temos atualmente. Eu aconselho você a continuar brincando com as configurações para ver o que mais você pode produzir com esses pós ganância. Então, a próxima coisa que queremos fazer é criar este formulário aqui. É outro chamado à ação incrível. Receba dicas de fotografia, uma nova entregue em sua caixa de entrada. Portanto, essa é uma boa maneira de receber e-mails do usuário para que você possa conversar com eles regularmente. Vamos ver como criar essa seção de call to action na próxima lição. Então, vejo você em breve. 16. Como adicionar um formulário: Então, a próxima coisa que queremos criar é essa área de chamada à ação aqui que tem uma inscrição para, e é uma parte muito importante de uma landing page porque permite capturar os contatos do usuário. E essa é uma parte muito importante dos negócios online. Então, vamos ver como fazer isso em nossos projetos. Então pulando aqui dentro. E o que precisamos fazer é entrar aqui, subir, rolar para cima e duplicar esta seção. Lembre-se que já criamos algo assim. E agora que temos dois deles, vou arrastar isso até o fundo. E agora podemos simplesmente editar isso. Então, tudo o que precisamos fazer é entrar aqui, selecionar esta seção e, em seguida, dentro do plano de fundo do estilo. Vou escolher uma imagem diferente. Acho que vou selecionar este. Insira mídia. E lá temos isso. Então, agora é uma imagem diferente. E este é o original. Vamos aqui e você notará que em nossa página de referência, este aqui é um pouco mais alto e isso é por causa do formulário e de todo o conteúdo. Lembre-se que eu lhe disse, a altura das seções é determinada pela quantidade de conteúdo dentro dela. Então, antes de tudo, vamos pegar esses textos. Copiarei isso e selecionarei isso e selecionarei isso. Cole-o lá. Vou em frente e selecionarei isso. E agora isso é Lorem ipsum ou passeio. Então, a próxima coisa que queremos fazer é criar este formulário. Para fazer isso, vamos usar um código de plug-in de formulário para o terminador. Então, vamos instalar para mim mais tarde. Mas vamos antes de tudo, pulando de lado nossa página aqui, atualize-a e visualize as alterações. Rolando para baixo até a parte inferior ou direita. Então é isso que temos atualmente. Então, entrar em nosso painel coincide. Plugins, adicione novo. E na nossa barra de pesquisa aqui, vamos digitar para ministro. Como os formulários Exterminator for Ministro. Onde está? Sim, aqui mesmo. 200 mil instalações ativas por WP Mu dev. Então Instale agora, execute ou monta, ative. E agora temos quatro Ministro instalados. Assim, podemos acessá-lo a partir deste menu à esquerda aqui. Então, basta clicar em quatro minutos. Então, entramos nessa landing page com um resumo das estatísticas. Então, o que queremos fazer é criar um formulário. Então, a criação será apresentada com alguns modelos pré-fabricados. E sim, vamos em frente e clique em cadastro no boletim informativo. Continue. Vamos dar um nome a ele. Formulários de inscrição, formulário de inscrição. Vamos criá-lo. E agora ele foi criado. Então aqui está com o nome, tem algumas opções aqui neste menu suspenso. E você verá como poderemos usar esses códigos curtos em um momento. Por enquanto, vamos dar uma olhada no que temos. Então, à esquerda, temos diferentes painéis que têm diferentes estágios de criação de seu formulário. Então, à medida que você cria seu formulário, esses são os estágios pelos quais você passa. Então você primeiro cria os campos e, em seguida, estiliza os campos. Em seguida, você determina como o formulário se comportará quando as pessoas enviarem dados e, em seguida, define todas as configurações sobre notificações por e-mail quando alguém enviar dados por meio de um formulário, então, se você quiser integrar e todas essas coisas. Mas agora, o que queremos fazer é criar um formulário apenas para exibir aqui no front-end assim. Então você notará aqui que temos dois campos e temos essas opções para inserir campos. Se clicarmos nisso, poderemos adicionar mais campos ao nosso formulário, mas só precisamos dele para ter o primeiro nome e endereço de e-mail. Se visualizarmos isso, é assim que ele ficará. E vamos sair de lá. E tem esse botão Inscrever-se. Então, vamos visualizar isso. E o botão diz se inscrever. Então, este é o nosso formulário. Então, vamos publicar esse formulário. E uma vez publicado, será apresentado este pequeno código que podemos copiar clicando neste ícone aqui. Nós copiamos. código curto foi copiado com sucesso. Ou podemos subir aqui, inscrever-se no formulário, clicar nele e copiar o código curto. Depois de clicar nisso, você copia o código curto. Entrando em nossa página aqui, nosso espaço de trabalho. Precisamos subir aqui e clicar nesse pequeno ícone e dizer código curto. E vamos arrastar esse elemento de código curto aqui. Vamos deixá-lo lá dentro. E, enquanto ainda estiver selecionado, podemos inserir o código curto que acabamos de copiar daqui. Acabamos de copiar esse código curto. E agora vamos colá-lo aqui. Agora, isso exibirá esse formulário para nós. Vamos nos livrar desse botão e agora aplicar isso. E vamos ser realmente mudanças na sexta-feira. Então é isso que temos por enquanto. Voltando para dentro, vamos entrar na aparência. E aparência interna. Você notará que temos essas diferentes opções aqui, material plano, em negrito e nenhuma. Vamos escolher plano, e isso se livra das bordas nos campos de entrada. E então vamos entrar no traje sob as cores. Vamos entrar na fantasia e rolar para baixo e selecionar o botão Enviar. Isso deve exibir as diferentes configurações para o botão, para a cor de fundo. Vamos mudá-lo para, deixe-me selecionar este amarelo. Copie isso lá dentro. Vamos colar esse Hoover amarelo e próprio, que queria ser lido. Então eu vou pegar essas leituras leves aqui e cole-la lá. E em foco, queremos que seja que vermelho está bem, cole-o lá. Então, vamos atualizar isso e visualizar as alterações. Ou certo, então parece incrível. Então, vamos pular aqui e aplicar alterações. Então essas mudanças, essas mudanças agora refletem em nosso espaço de trabalho elementar ou andar. Então, vamos visualizar as alterações. Tudo bem. Então é isso que temos agora em pairar. É vermelho e em seu estado normal é amarelo. Então, vamos pular para a área de contato aqui. Então, vamos em frente e adicione a seção de contato. Então, o que queremos fazer é adicionar uma seção de seis colunas. Então, esta seção aqui com seis colunas. E vamos arrastar isso para a nossa marca de cinco pontos de cinco pontos ali mesmo. E vamos fazer o mesmo por esse 5.5. E finalmente para esse 5.5, em algum lugar lá. E agora o que eu quero fazer é vir aqui e duplicar isso. Arraste todo o caminho até a parte inferior bem aqui. Em seguida, duplique isso e arraste-o até o fundo. Largue lá. Volte e copie isso, duplique isso. O que queremos fazer é dizer o escritório. E, claro, onde está o escritório, é essa área ali mesmo. E eu quero duplicar isso e, em seguida, arrastar isso para lá. Duplique isso, arraste isso para lá. E você conhece a broca. Mas agora isso pode ser deixado cair lá, porque lembre-se que isso é muito pequeno, então eu vou arrastar isso, soltar isso lá dentro. Redimensione isso para 5,55,5, em algum lugar há 5,5. Não consigo obter um 5.5, mas vou duplicar isso e soltar seda e deixá-lo lá dentro. Então, expandindo-o, caindo lá. O 5.5. Em seguida, duplique isso. Largue isso lá dentro. Duplique isso, solte isso lá. Vamos seguir em frente e pegar esse número. Solte lá, cole isso. Envie-me um e-mail. Me ligue. Vamos atualizar isso e vamos visualizar as alterações. Certo. Vamos rolar todo o caminho até o fundo. E é isso que temos. Mas precisamos fazer algo sobre essa margem no topo. Então, vamos voltar aqui, selecionar esse avançado, quebrar esse link. Então estamos lidando com o topo, apenas 100. E vamos atualizar isso. Então, agora que terminamos com a área de contato, então vamos visualizar isso. Seco. Vamos rolar todo o caminho até o fundo. Perfeito. Então, agora que terminamos a seção de contato, vamos em frente e crie esta seção de mapa. Isso vem direto do Google Maps. 17. 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. 18. Como adicionar um mapa do Google: Bem-vindo de volta. Agora, nesta lição, queremos adicionar este Google Maps para que as pessoas possam nos ver se você é fotógrafo e alguém marcou uma consulta com você, ou você gostaria de entrar clientes para poder encontrar seu escritório. Você quer um mapa em seu site, em sua landing page. Então, vamos ver como adicionar esses mapa. Saltando dentro do nosso espaço de trabalho aqui. O que queremos fazer é adicionar uma seção de largura total, coluna única, seção de largura total. E vamos dar a ele uma margem máxima de 100. Então, entrar avançado, quebrando esse link, então estamos lidando com uma margem máxima. Vamos dar um 100. E agora vamos selecionar o sinal de mais lá. E aqui, digite mapa. Temos algumas opções de mapa aqui. O que queremos Epi é o Google Maps. Deixe-o lá dentro. E agora temos diferentes opções aqui que você pode preencher. Isso, por exemplo, aqui, você inseriria sua localização real ou a localização do escritório ou do estúdio. Então, vamos atualizar isso e visualizar as alterações. Então, rolando para baixo ou sexta-feira, então agora está ao vivo na página da Web. A próxima coisa que queremos fazer, e as pessoas podem mudar para o mapa real do Google. Então, vamos mudar para esta parte da cidade. E lá vamos nós e eles podem se mover e ampliar se quiserem. Este é o Google Maps incorporado em nosso site, colocando-o dentro dessa div. Então, agora que terminamos com um mapa, a próxima parte restante é o rodapé e terminamos com a landing page. Então, vamos ver como fazer isso na próxima lição. Vejo você em breve. 19. Como criar o rodapé: Bem-vindo de volta. Nesta lição, estamos prestes a terminar de criar a landing page, mas precisamos adicionar a pasta e, claro, tornar a página responsiva antes de encerrar as coisas. Então, vamos pular diretamente dentro da nossa página. E agora o que queremos fazer é sair desta página agora porque terminamos editar a parte principal da página. Então, quero sair daqui e entrar no painel. Vou fechar esse Sair to Dashboard. Vou sair ali. E vou entrar na aparência, Elementor, cabeçalho e rodapé construtor. E agora queremos criar uma pasta. Então, vou adicionar novo, e ele vai ignorar isso. E vamos diretamente para nomear o 41º. Meu rodapé seleciona pasta. Esse é o tipo de modelo. Quero que ele seja visível em todo o site e qualquer um pode editá-lo. Então, a próxima coisa aqui, Elementor largura total, digamos que não haja barra lateral, alongamento para frente. Vamos desativar essas quatro configurações ali mesmo. E então vamos publicá-lo. Agora e agora. Edite com o Elementor porque estamos criando visualmente no front-end em nosso espaço de trabalho. Então, a primeira coisa que queremos fazer é adicionar o logotipo. Então, vamos adicionar uma seção de largura total, seção coluna única, que é para largura. E vamos adicionar um elemento de imagem. E nós essa imagem selecionada, selecionarei aqui e selecionarei o logotipo. Insira mídia. É o tamanho certo. Eu criei para ser muito pequeno e é por isso que ele se encaixa corretamente aqui. A próxima coisa que queremos fazer é clicar no pequeno ícone aqui e selecionar o editor de texto. Arraste isso abaixo do logotipo. Vamos seguir em frente e copiar esse texto de direitos autorais. Copie isso. Enquanto isso ainda estiver selecionado, vou deixar isso lá dentro e vou entrar no estilo, centralizá-lo. Vamos mudar a cor para branco. E vamos mudar a família de fontes para Montserrat. Tudo bem. Vamos reduzir o tamanho para 12. Porque isso são informações de direitos autorais. Não precisa ser muito grande. Vamos atualizar isso. E, à medida que atualizamos isso, vamos clicar nisso e digitar redes sociais. Porque queremos adicionar ícones de mídia social. Então, vamos arrastar isso e soltá-lo lá. E agora esses ícones são grandes demais, então vamos entrar no estilo e no tamanho. Vamos reduzi-lo até esse ponto bem ali. Tudo bem, e depois vamos selecionar esse texto. Vá para Margem avançada, quebre esse link e margem inferior. Vamos reduzi-lo para que possamos trazê-los um pouco mais perto. E vamos atualizar isso. Acho que gosto disso. Vamos visualizar as alterações. Então é assim que nosso rodapé se parece. Então, voltando para dentro. Então, agora que terminamos o rodapé, podemos fechar esta página. Então vou entrar no conteúdo. Não, vou entrar no clique do menu de hambúrguer Sair to Dashboard. E agora indo para dentro das páginas. Na página inicial, vou clicar com o botão direito do mouse em Exibir e abrir o link em nova guia para que possamos visualizá-lo. E aqui está. Vamos vê-lo de cima para baixo porque agora terminamos com todo o conteúdo. A única coisa que resta é tornar a página responsiva. Certo? Então aqui vamos nós. Os textos animados, ele está funcionando perfeitamente. Acabei de lembrar que precisamos fazer algo sobre esse botão. Não tem esse efeito que tivemos na página original. Deixe-me rolar para cima. Precisamos adicionar esse efeito flutuante e mostrarei como fazer isso. Agora, pulando para a nossa página, esta é a que acabamos de projetar, rolando para baixo. Certo? Então, isso é o que temos. Nós criamos esses. Tenha orgulho de si mesmo. Você os criou até agora, se você está acompanhando e chegou até aqui, dê um tapinha nas costas. Dê uma pausa hoje, assista a um filme ou algo desse tipo. Mas agora observe que nossa pasta agora não tem essa margem superior, e também precisa ter esse fundo cinza. Vamos rolar todo o caminho até o fundo disso, precisa ter esse fundo cinza. Então, voltando à nossa página, não, dentro do nosso rodapé. Vamos para Cabeçalho e rodapé elementar Aparência. Ou podemos ir para o front-end aqui. E se passarmos o mouse sobre a edição Elementor com o Elementor, podemos clicar no meu rodapé e ele abrirá o espaço de trabalho da pasta e poderemos editar a foto a partir daí. Tudo bem, então aqui estamos nós. Vamos selecionar a seção em si. Vá para Avançado, quebre esse link. Vamos dar a ele uma margem máxima de 50. Não. Esse deve ser o preenchimento. Desculpe por isso. Então esse é o preenchimento superior de 50. Assim. E vamos dar-lhe 50 na parte inferior também. E vamos entrar no estilo, plano de fundo. Vamos dar essa cor cinza. Cor cinza escuro assim. Cinza escuro, eu gosto disso. Então atualize isso. E agora, se voltarmos e clicar com o botão direito em nossa página, clique com o botão direito E depois pulando, olhe para a nossa página. Vamos rolar todo o caminho até o fundo. Lá temos isso parecendo super incrível. Mas agora vamos aumentar o preenchimento aqui na parte inferior do mapa, para que ele tenha um pouco mais preto na parte inferior. Então, vamos voltar aqui. Vamos passar o mouse sobre a edição do elemento com Elementor e vamos clicar em editar com Elementor. Assim, podemos editar a página em si. Vamos chamar o fundo. Aqui é onde temos nosso mapa. Então, o que precisamos fazer é clicar nesta seção de mapa em si Avançado, e vamos dar a ela uma margem inferior de 50. Sim, vamos dar um 50 naquela data, ruim. Então, agora podemos visualizar as alterações. Vamos crescer até o fundo. Tudo bem, então temos mais espaço aqui, alguns mais pretos logo abaixo do mapa. E essa é a landing page. Terminamos o design na área de trabalho. Agora é hora de tornar a landing page responsiva em diferentes tamanhos de dispositivos antes de encerrar as coisas. Então, vejo você na próxima lição. 20. Design responsivo: A barra de navegação: Bem-vindo de volta. Já fizemos a landing page ficar ótima no desktop. É hora de não ficar ótimo em telas menores que smartphones e tablets. Então, sem perder mais tempo, vamos pular dentro do painel e começar. E vamos começar com uma barra de navegação. Então, aqui, vamos entrar na aparência, elementar, cabeçalho e rodapé construtor. E vamos clicar em editar com o Elementor. Vamos editar a barra de navegação com o elementor. Tudo bem, então aqui estamos nós. Este é o lugar onde estávamos editando a barra de navegação. E agora eu quero torná-lo responsivo. Então, indo aqui, vamos clicar neste ícone de modo responsivo. Ele abrirá essa barra aqui com todas essas configurações que nos ajudarão a tornar a página responsiva. Como você pode ver, temos configurações móveis, configurações do tablet e atualmente estamos agora nas configurações da área de trabalho. Então, vamos mudar para o celular. Então, lá estamos nós. Então, o que queremos fazer é que se eu pudesse voltar para a toupeira da área de trabalho por um segundo, quero te mostrar algo. Dentro desta seção de largura total, temos duas colunas, a coluna do logotipo e a coluna do menu. Portanto, cada uma dessas duas colunas está ocupando uma porcentagem da seção de largura total. Então, quando mudamos para telas móveis, a seção ainda tem largura total, mas agora precisamos dividir essas duas colunas em 100% dessa coluna de largura total. Então, faremos isso selecionando a primeira coluna aqui, a coluna que tem o logotipo. Vamos selecionar isso. E em Largura da coluna Layout, digamos que 50%. Em seguida, vamos selecionar a segunda coluna. E na coluna Layout com, digamos que 50. E agora os dois estão na mesma linha. O que precisamos fazer em seguida, o menu Selecionar, clique em qualquer lugar dentro. E sob layout. Vamos rolar para baixo e encontrar alinhamento. Sob alinhamento responsivo. Vamos alinhá-lo à direita. E agora está no lado direito. Vamos crescer para cima. Entre no estilo, queremos torná-lo largo. Vamos recolher o menu principal e expandir o gatilho principal e fechar o ícone. Então, vamos dar a ele uma cor de fundo branco. Então, neste momento, é branco. E ao passar o mouse, vamos dizer o plano de fundo para este amarelo. Então, vamos selecionar o plano de fundo. Vou fazer uma guia para escolher essa cor amarela. Copie isso. E vamos voltar aqui. Vamos mudar a cor para amarelo. Então, paire o mouse é amarelo. Certo, vamos atualizar isso. E agora um novo clique no próprio ícone para abrir o menu suspenso. Você vê que o menu suspenso é de cor branca. Então, vamos recolher o gatilho principal e vamos para o menu suspenso, expanda o menu suspenso. E antes de tudo, role para baixo e procure a distância máxima. Vamos soltá-lo abaixo desse ponto para que o menu, para que o logotipo fique visível. Empurre um pouco para cima. E então você notará que as fontes são brancas por padrão e amarelas ao passar o mouse. Então, vamos fazer algo sobre isso. Então, rolando para cima enquanto ainda estiver abaixo do menu suspenso, topografia, cor do texto. Mas desde isso para aquele amarelo. E agora eles são amarelos. E ao passar o mouse, queremos que eles sejam brancos. Então por diante. A cor é branca, estado normal, amarela. Então, a próxima coisa que queremos fazer é mudar a cor de fundo. Em circunstâncias normais. Queremos que seja esse cinza. Certo? Vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, agora para ver como ele fica nas telas móveis, pressione Control Shift I ou minhas janelas para abrir o DevTools. Isso exibirá as DevTools. E posso clicar neste pequeno ícone aqui, ícone do modo responsivo. E isso mudará a exibição para imitar dispositivos móveis. E neste menu suspenso, podemos imitar muitos tipos diferentes de dispositivos, incluindo iPads, iPhones e galáxias. Então, é assim que ele se parece atualmente em telefones celulares. Se expandirmos isso, vamos colapsar isso. Ele é expandido. Sim, acho que gosto disso. Vamos fazer algo sobre essa fronteira aqui. Então, enquanto ainda estiver no menu suspenso, vamos rolar para baixo e procurar divisor. Aqui, bem aqui, divisor, estilo de borda. Mude isso para nenhum. Isso deve se livrar dessas linhas ali mesmo. E agora os menus suspensos parecem muito melhores. Então, vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, então nesta página, controle a mudança I, e eu vou clicar nesse pequeno ícone ali mesmo. Abra o modo responsivo. Vamos clicar no ícone ali mesmo em nosso menu. Parece incrível, eu gosto disso. Então, a próxima coisa que queremos fazer é tornar o resto da página responsivo. Terminamos com a barra de navegação. Então, vejo você em breve. 21. Design responsivo: o corpo principal: Tudo bem, eu gosto disso. Então, a próxima coisa que queremos fazer é fazer o resto da landing page parecer incrível em telefones celulares. Então, vamos pular de volta aqui. Agora que terminamos com os menus do smartphone, vamos sair desse espaço de trabalho. Então, vou clicar neste menu de hambúrguer e sair para o painel. Em seguida, vamos pular para dentro das páginas. E vamos encontrar nossa página. Então, aqui estamos, nossa landing page. Vamos editar com o Elementor. Então, vamos mudar para o modo responsivo e ver como ele se parece. Então, vamos clicar na visualização móvel. Vamos começar com os textos animados. Clique nisso. Agora entre no estilo e no estilo, vou a textos extravagantes, têxteis extravagantes e tipografia que reduziram o tamanho até esse local. E então vamos colapsar isso. Vou entrar em sufixos têxteis. Agora, quero reduzir o tamanho desse ponto até esse ponto. Vamos atualizar isso. E enquanto ainda estiver selecionado, vamos avançar. E vamos quebrar esse link de margem que deve separá-los assim. A próxima coisa que queremos fazer é clicar nesta coluna aqui, entrar avançado. Vamos dar a ele um preenchimento de 15 sem quebrar o link para que ele se aplique a todos os campos aqui. Então 15, e digamos 20. 20 está bem. Precisamos empurrar isso um pouco para cima. Então, selecionando esta seção, indo para dentro com antecedência, vamos quebrar, vamos quebrar o preenchimento. E agora vamos gradualmente empurrá-lo baixo até esse local. Gosto disso lá. Em seguida, vamos passar para o botão. Selecionarei o botão em si. E vou entrar avançado. Vamos quebrar o link da margem. E isso deve se livrar de todas as configurações que estivessem lá. Tudo bem, vamos rolar para baixo. Acho que gosto de onde está tudo. Algumas pessoas preferem tudo no meio, mas acho que gosto de onde tudo está posicionado da esquerda para a direita. Podemos ir em frente e selecionar essas colunas aqui. M para isso, também podemos dar um preenchimento de 20 sem quebrar o link. E este 20 foi aplicado a todas essas colunas porque elas estão dentro dessa coluna principal. Estes são, isso é um cruzamento. São interseções. Em seguida, vamos entrar aqui. Escolha uma luz que pareça bem. Tudo bem, então essas caixas estão tocando aqui. Na parte superior e inferior. Precisamos aumentar a margem superior e inferior. Então vou selecionar uma das caixas, entrar em Avançado, darei uma margem de dez. E agora isso deve se aplicar a todos os campos lá, qualquer espaço 2D fora de tudo. Então, selecionarei, vou clicar com o botão direito do mouse, copiá-lo e, em seguida, vou clicar com o botão direito do mouse e colar estilo. Vou repetir o mesmo para esses dois, colar estilo e, finalmente, colar o estilo. E agora eles estão espaçados corretamente. Vamos continuar. Gosto de onde essa oposição, podemos selecionar esta coluna, entrar avançado. Vamos experimentar a margem de 20 pixels do joelho. Assim. Eu deveria espaçar a imagem das bordas. Certo? Em seguida, vamos selecionar esta coluna aqui. Avançado 20 anos, eu deveria criar algum espaço entre este formulário e as bordas. Vamos descer aqui. Selecione essa legenda. Vamos alinhá-lo ao centro. Selecione isso. Vou selecionar isso. Vá para dentro do estilo, no meio. Faça o mesmo por isso. E, finalmente, esse estilo. Alinhe o centro. Acho que gosto de onde o mapa está, mas também podemos dar um pouco de preenchimento. Então, selecionarei a coluna em si, preenchimento de 20. E então acho que gosto de onde está o rodapé, então não vamos tocá-lo. Vamos atualizar isso. E vamos rever as alterações. Impressionante, então pressionando Control Shift I, eu vou clicar nesse ícone aqui. E vamos mudar para a visualização móvel. Então, é assim que ele deve ficar em telas móveis. Agora, no menu, a barra de navegação parece super incrível. O menu suspenso está funcionando corretamente. E se começarmos a rolar, ao contrário da seção de heróis, eu gosto de onde tudo está situado. Então eu acho que com isso, isso marca o fim da aula. Gostei muito de te ensinar e espero que você tenha gostado de assistir. Mas acima de tudo, espero que você tenha aprendido alguma coisa. Espero que você tenha ganhado uma nova habilidade que agora você pode sair e usar em projetos do mundo real. Meu nome é Ken Visa. É sempre um prazer estar com você aqui. E continuaremos na próxima vez.