Um guia para iniciantes do Elementor: crie sua primeira landing page

1. Apresentação: No mundo atual em rápida evolução, uma das mudanças mais significativas foi em onde e como compramos e gastamos nosso tempo Com o aumento vertiginoso da penetração global da Internet na última década, mais e mais pessoas estão dedicando uma parte significativa de suas vidas Isso representa uma grande oportunidade para você expandir o alcance de seus negócios e adquirir novos clientes que antes estavam fora de seu alcance. Por exemplo, se sua empresa tem um site, você pode vender seus produtos para pessoas de todo o mundo. Você não precisa vender para pessoas dentro de seus pedidos. Ou, se você tem habilidades de web design, pode ganhar a vida criando sites para outras empresas ou criando modelos de sites e vendendo-os on-line. Mas a questão é: como você constrói um site? Você precisa de habilidades de programação ou codificação? Bem, para desenvolver um site, você tem duas opções. Você pode pagar um web designer para fazer isso por você ou pode aprender a construí-lo sozinho. Nesta aula, quero mostrar a você mesmo como criar sites usando o Elementor E ao final da aula, você terá um fluxo de trabalho sólido para criar sites sem escrever uma única linha de código. Espere um pouco, o que é Elementor? Elementor é um incrível construtor de páginas de arrastar e soltar para W press É poderoso, intuitivo e permite que você crie e personalize visualmente seus sites. Basta arrastar e soltar vários elementos da página, como um designer gráfico, para criar seus layouts Agora, presumo que você nunca tenha usado o Elementor antes, então você é um iniciante completo Se é você, esta aula é para você. Como empreendedor prolífico, você provavelmente tem ideias de negócios que precisam de um site de tempos em tempos, mas não tem dinheiro para pagar um web designer toda vez que quiser criar um protótipo Esta aula permitiria que você transformasse suas ideias de sites em sites ativos. Começando do zero, criaremos juntos uma página de destino do mundo real enquanto dominamos as ferramentas elementor mais usadas Começaremos aprendendo como instalar pressionando online e offline. Veremos como instalar o Elementor e outros plug-ins localmente e online Veremos como instalar um tema WordPress online e offline. Em seguida, vamos nos familiarizar com a interface de usuário do Elementas Em outras palavras, vou levá-lo em um tour pelo editor Elementa para que você possa se familiarizar com as ferramentas, os recursos e as configurações que você precisa conhecer Depois de fazer um rápido tour pelo editor Elementa, continuaremos criando sua página de destino, começando pela barra de navegação na parte superior até o rodapé na Também abordaremos como tornar sua página responsiva, para que ela tenha uma ótima aparência em todos os dispositivos Se esta é a primeira vez que você me vê, meu nome é Ken, e eu tenho usado um L lamentor para criar sites para meus clientes e para mim nos últimos seis anos, e tenho compartilhado essa paixão com estudantes aqui mesmo no Skillshare E espero ver você nesta aula. E agora estou pronto para começar. Espero que você também esteja. Na próxima lição, vamos dar uma olhada em uma demonstração da página de destino que você criará durante a aula. Vamos começar. 2. Projeto de classe: A, bem-vindo de volta. Então, agora, como você já deve saber, a melhor maneira de aprender uma habilidade técnica é trabalhando em um projeto prático. E agora, nesta aula, vamos trabalhar em uma landing page enquanto aprendemos a usar ferramentas elementares Então, aqui está uma landing page, e eu quero que a gente dê uma olhada rápida nela de cima para baixo. Então, começando aqui está nosso cabeçalho com um logotipo, um menu. E um botão rápido de call to action aqui. A seguir, temos essa seção de heróis. Essa área é chamada de seção de heróis. É composto por um bloco de texto com botões de call to action e a imagem do herói. Em seguida, temos esse botão de âncora aqui. Quando clicamos nele, ele nos leva para a próxima seção aqui na página E você notará que esta seção tem um bom fundo de partículas animadas É um sistema de partículas e veremos como criar isso Também temos títulos com cores diferentes, cabeçalhos de duas cores Veremos como definir a cor de uma palavra específica em uma frase ou em um bloco de texto. Continuando, temos algo semelhante aqui, mas sua implementação é diferente de como isso foi implementado. Essa imagem é adicionada como um elemento de imagem, enquanto isso é adicionado como plano de fundo da seção, e veremos como fazer tudo isso. Passando para a forragem, aqui, temos um rodapé que se parece com esta outra Você notará que também é um rodapé muito simples com um logotipo, algumas descrições aqui, listas de ícones aqui e botões de call to action Muito simples, não é complicado. Eu queria um projeto que fosse fácil para você fazer porque você é iniciante, mas que também lhe desse a oportunidade interagir com as ferramentas elementares mais usadas Assim, à medida que construirmos essa página de destino, poderemos interagir com essas ferramentas e, quando terminarmos, você terá a confiança necessária para começar a trabalhar em uma nova página de destino sozinho. Então, esse é o projeto em que trabalharemos durante toda a aula. Espero que você esteja tão animado quanto eu. Se você é. Por que não passamos para a próxima lição, onde veremos como instalar a prensa W. Te vejo em breve. 3. Instalação offline do WordPress: A, bem-vindo de volta. Então, agora que você viu a página de destino que está sendo construída, é hora de instalar o Wpress Agora, existem duas maneiras ou dois lugares em que você pode instalar a prensa W. Isso é online e offline. Nesta lição, vamos nos concentrar em uma instalação off-line e, na próxima lição, focaremos na instalação on-line. Outro nome comumente usado para uma instalação offline do Wpress é instalação local porque é local em sua máquina Você não precisa de uma conexão com a Internet para continuar trabalhando no site do Wpress e navegando de uma página para outra E para configurar a prensa W localmente em nossa máquina, precisaremos baixar duas coisas. Número um, precisamos baixar o shap. Número dois, precisamos baixar o W Press. Então, vamos baixar o Shamp agora mesmo. Então, adicionarei uma nova guia e digitarei Sham. Vou clicar em baixar e seremos redirecionados para esta página, apache friends.org Você será levado diretamente para cá e poderemos baixar a versão mais recente em que trabalhamos em nossa máquina. Como você pode ver, temos 8,2 0,12. Essa é a versão mais recente porque é 8.0. Eu acho que vou com isso, mas você pode ir com qualquer um se quiser. E deve começar automaticamente. Por que não está começando? Deixe-me clicar aqui. Tudo bem. Eu não aceito. Não sei por que não está baixando, mas deixe-me clicar aqui. E aqui vamos nós. Então, agora está baixando. E terminamos. Agora o Shap é baixado. Deixe-me clicar em Mostrar na pasta e arrastar esta janela aqui. Aqui está. Vou clicar duas vezes nele para instalá-lo. Agora, não se preocupe com esse aviso aqui. Vá em frente e clique em OK, e aqui está nossa configuração Então, vou clicar em Avançar. Clique em Avançar e instale-o dentro do C Sham. Então, vou clicar em Avançar a seguir. Então, vamos permitir isso em redes privadas e iniciar o painel C agora mesmo. Então, mantenha esse bate-papo concluído. E está aberto na outra janela. Então aqui está. E, como você pode ver, Shamp nos fornece várias ferramentas e recursos Então, o que precisamos fazer agora, agora que instalamos o shamp, é iniciar o servidor Apache porque seu site workpas deve ser executado em O servidor é o que permitirá que você navegue de uma página para outra para navegar de uma parte do painel para a outra. Então, vamos também habilitar o banco de dados SQL. Você quer permitir isso? Sim. Então, vou seguir em frente e permitir isso. Agora, como você pode ver, temos o Apache em execução e meu status de SQL mudou, e ele está em execução E agora, a próxima coisa que precisamos fazer é criar um banco de dados, porque quando estivermos configurando nosso site Wpress, seremos solicitados pelo nome do nosso banco de Portanto, precisamos prepará-lo com antecedência. Então, vou clicar em meu SQL Admin. Vou clicar em Admin. Agora está aberto na outra janela. Vou apenas arrastá-lo e colocá-lo aqui, e devo mudar para a outra janela. Mas aqui está o que você deve ter depois clicar em meu administrador de SQL. Vamos entrar aqui e nos bancos de dados. Vamos criar um banco de dados. Deixe-me chamá-lo de meu banco de dados de sublinhados. Isso realmente não importa. Você pode simplesmente dizer meu banco de dados. Tudo bem. Deixe todo o resto intacto e clique em Criar. Então, agora temos esse novo meu banco de dados listado aqui. Então, vou seguir em frente e fechar isso. E agora que temos um banco de dados, a próxima etapa que precisamos fazer, lembre-se, eu disse que precisamos baixar duas coisas. O primeiro que baixamos foi shap. A segunda coisa que precisamos baixar é o Wordpress. Então, vou para wordpress.org. E aqui estamos. Vou clicar em Obter WordPress e baixar o Wordpress 6.61, e agora está baixando Nós terminamos. Agora deixe-me abrir na pasta. Aqui estamos. Vou clicar com o botão direito do mouse e ir para WR Et aqui. Lá vamos nós. Agora nós o extraímos aqui. No momento em que abrimos a pasta, precisamos ter esse conteúdo diretamente. Esse conteúdo não deve estar em outra pasta. Esse conteúdo não deve ser extraído dessa forma. Não clique com o botão direito do mouse e extraia para essa pasta. Porque se você clicar duas vezes nele, agora ele terá a pasta Wordpress dentro dele, que contém o conteúdo. Queremos essa pasta em si, não a pasta que foi extraída. Tenha isso em mente. Vou apenas copiar este Wordpress, clicar em Control C. Agora vou entrar C. Deixe-me entrar neste PC, clicar duas vezes na minha unidade C e encontraremos essa pasta em formato Lembre-se de que foi aqui que o instalamos. Clique duas vezes nele, entre no HT Docs. Agora, aqui, é aqui que colamos nossa pasta de trabalho, Control V para colá-la, e aqui está Agora podemos dar a ele o nome do nosso site porque, essencialmente, agora é um site. Então, vamos chamá-la de talvez loja online. Então esse é o nome do nosso site. Sempre que quisermos criar um novo site Wpress localmente, tudo o que precisamos fazer é entrar aqui e colar outro Wordpress baixado do wpress.org, entrar Lá vamos nós. Podemos chamar esse site de dois. Esse é o site dois. Agora, se formos lembrar desse nome, Loja Online. Copie isso. Se entrarmos aqui e digitarmos o host local Online Shop. Aqui vamos nós. Isso iniciará a configuração do Wordpress. Agora, a razão pela qual isso funcionou até agora é porque esses dois estão funcionando. Lembre-se de que, se você não tem isso na tela no momento, é porque provavelmente não tem um desses em execução. Então, voltando aqui, meu idioma é o inglês. Bem-vindo ao Wordpress. Vamos começar. Vamos embora. Nome do banco de dados. Lembre-se de que demos um nome a ele. Se eu simplesmente abrir uma nova guia e acessar ou talvez fechá-la e abri-la , vá para Admin. Lembre-se, tínhamos meu banco de dados. Vou entrar aqui e usar esse nome. Meu banco de dados. O nome do usuário é root e deixe a senha em branco. Deixe todo o resto intacto. Vou clicar em Enviar. E lá vamos nós. Tudo bem, Sparky, você sobreviveu a isso. Execute a instalação. É aqui que damos um nome, um título ao nosso site de imprensa profissional. Lembre-se, era uma loja online. Essas são as credenciais que usaremos para fazer login em nosso painel do WordPress, para que possamos atualizar o conteúdo Então, vou usar meu nome de usuário. Vou usar essa senha. Vou fornecer um e-mail aqui e desencorajar esses mecanismos de indexar este site, e vamos prosseguir e instalar o WordPress Então, lembre-se de suas credenciais, meu nome de usuário, copie isso e coloque em algum lugar Deixe-me digitar t x t aqui para abrir um bloco de notas e colocar essa senha lá por um segundo. Então vá. Deixe-me também colocar esse meu nome de usuário aqui. Vamos prosseguir e instalar o ps. E sucesso, agora instalamos nossa impressora de trabalho localmente. Então, se eu disser login, posso vir aqui e dizer meu nome de usuário e a senha é essa. Copie isso, cole lá e faça o login. Posso salvar isso no meu gerenciador de senhas e aqui estamos. Então, agora temos a prensa W instalada localmente. Não precisamos de uma conexão com a Internet para continuar trabalhando em nosso projeto. Parabéns. Agora você tem uma instalação local do Wpress Na próxima lição, vamos ver como instalar ou configurar WPSs online Você precisará de uma conexão com a Internet para isso, mas vamos ver isso na próxima lição. Então, eu vou te ver em breve. 4. Comprar hospedagem na web e um nome de domínio: Agora que você aprendeu a instalar o Wordpress localmente, você pode estar se perguntando: como faço a mesma coisa, mas online? Porque, em última análise, seu site deve ser lançado. Deve existir em algum lugar online. Agora, se você fez alguma das minhas aulas elementares mais recentes, deve ter se deparado com a lição que abordamos como comprar um nome de domínio, onde comprar hospedagem e como comprá-la, como configurar o Wordpress depois comprar hospedagem e um nome de domínio Nós cobrimos tudo isso. E porque acho que fizemos um ótimo trabalho ao explicar todo esse processo, vou pegar emprestada essa lição e o Slotty Teen aqui para você passar Então, vamos lá. É hora de falar sobre como e onde conseguir sua hospedagem na web e um nome de domínio. Agora, cada site que você visita é armazenado em algum lugar on-line em um servidor que está sempre disponível na Internet. É por isso que você pode acessar um site que está na Holanda, nos EUA ou no México, porque ele está armazenado em um servidor que está sempre conectado à Internet. Isso significa que toda vez que você clica em um link que leva você a um site específico, por exemplo, free Peck, digamos, freepik.com O que o navegador fez foi enviar uma solicitação para essa página específica, e essa página específica pode ser acessada por meio desse endereço ou URL. Então, quando enviou a solicitação, essa solicitação foi recebida pelo servidor que está armazenando o site do Free Pick, e o site do Free Pick é composto por muitas páginas da web. Mas como essa página da web é representada por esse nome de domínio específico, esse servidor retornará uma resposta com a página solicitada. Então, esse servidor é o que um host fornece a você. Seu host fornece espaço de armazenamento para seu site e garante que seu site esteja disponível para qualquer pessoa que queira visitá-lo. Agora, a outra coisa que você precisará é de um nome de domínio, freepik.com é um nome de domínio e esse nome de domínio específico é exclusivo do free peek, então ninguém mais pode ter o mesmo peak.com gratuito, da mesma forma que ninguém mais Seu número de telefone é exclusivo e é usado apenas para você, mais ninguém. Portanto, seu site precisa ter um nome de domínio exclusivo e as pessoas usarão esse nome de domínio para acessar seu site. Então, agora, voltando aqui, estou em wpress.org. Este é o site oficial do WordPress. É aqui que você pode baixar o Wire Press. Se você quiser desenvolver seu site offline, você pode instalar o Wire Press em seu sistema e trabalhar sem a Internet e criar seu site. Mas o que nos interessa é a página de hospedagem. Wire Press tem uma lista de hosts web recomendados, e eu recomendo que você reserve um momento e leia esta página. Você pode ver que eles têm três principais hosts web recomendados, Bluehost, dream host e wordpress.com Mas isso não significa que esses sejam os únicos hosts da web que você pode usar para o seu site Wordpress. Existem outros hosts da web que são tão bons, se não melhores, do que esses três. Então, essas são apenas recomendações do wordpress, mas você descobrirá aqui lendo isso que existem centenas de milhares de webhsts por aí, a grande maioria dos quais atende aos requisitos mínimos do wordpress W Press decidiu facilitar seu trabalho e decidiu dar a você os três principais que eles recomendam. Agora, pessoalmente, usei o Blue Host. E há muito tempo, quando comecei a usar o Wpress, experimentei o wpress.com, e você não deve confundir workpress.com confundir WPress.org é a plataforma administrada pela Work Press Foundation porque lembre-se de que o Wpress é Work Press Foundation porque lembre-se de que o Wpress porque lembre-se de que o Wpress E o wpress.org existe para que você se lembre download do W Press e de tudo o que você precisa saber sobre Mas agora, quando se trata de hospedagem, existe um serviço dedicado chamado wpress.com. Deixe-me abri-lo. Essa é uma plataforma que fornece ferramentas e hospedagem para criar seu site. São como semanas. Se você já viu semanas, sabe que, ao criar um site em semanas, não precisa pensar em onde conseguir hospedagem, pois eles hospedam o site para você. Eles apenas fornecem as ferramentas para começar a criar seu site imediatamente. Mas é claro que ele tem suas limitações, da mesma forma que Weeks tem suas limitações quando você compara à instalação do Wordpress em um servidor. Quando você instala o W press em um servidor em algum lugar, você tem mais controle para fazer muitas outras coisas sobre as quais não tem controle quando está usando um serviço hospedado como o wordpress.com Mas é claro que é um bom lugar que você pode experimentar se quiser. Agora, em um nível pessoal, eu uso chip de nome. Especialmente quando estou apenas experimentando algumas ideias antes de me comprometer a comprar uma hospedagem dedicada para essa ideia específica Então, o Name chip tem vários serviços aqui. Uma delas é a hospedagem gerenciada do Wordpress e a migração para o Wordpress. Mas outro serviço aqui é chamado de hospedagem compartilhada. Se eu abrir isso, temos esse plano Stela Stela plus aqui, e vou te dizer por que gosto de usá-lo Número um, veja esses sites ilimitados. Isso significa que se eu tiver, tipo, dez ideias para sites diferentes, eu tenho dez ideias. Talvez eu não abra uma loja de comércio eletrônico. Não vou abrir uma loja de cosméticos. Não vou abrir um blog pessoal. Talvez eu não abra uma comunidade social. Talvez eu queira criar um fórum. Essas são cinco ideias diferentes. Posso hospedar todos esses sites sob esse plano sem precisar comprar hospedagem separada para cada site. Posso ter um número ilimitado de sites hospedados nesse plano e só posso pagar essa taxa por mês. Claro, este é o primeiro ano com desconto, mas no segundo ano, você pagará 68,88 por Mas pense sobre isso. Se você tem três ideias ou quatro ideias para sites diferentes e quer ver qual delas funcionará antes de se comprometer totalmente a obter um plano de hospedagem web dedicado para ela. Você pode criar o site de acordo com esse plano. Crie os quatro sites. Haverá transmissão ao vivo na Internet. Você pode começar a enviar pessoas para esse site por meio de links nas mídias sociais, apenas vinculados aos quatro sites. E se um dos sites realmente popularizar e começar a atrair muito tráfego, agora você pode decidir se esse site parece estar se popularizando Então, deixe-me obter um plano de hospedagem web dedicado para ele separadamente. E então você pode simplesmente migrá-lo para a hospedagem dedicada, porque agora é uma ideia que começou O resto pode permanecer como sites experimentais, mas eles ainda estão online. Mas o bom é que você está pagando por um plano de hospedagem. Você não está pagando planos de hospedagem diferentes para os diferentes sites. E, claro, por causa dessas vantagens, é por isso que sou capaz de criar um site como esse. Este é o site que acabei de te mostrar. Deixe-me ir para o front-end. Este é o site de referência que eu construí enquanto preparava este curso, e eu o criei, é claro, que possamos ter um site para ver enquanto trabalhamos no curso. Agora, com isso dito, este é um dos sites que eu hospedei sob esse plano. E está sob esse domínio para. Agora, nesta aula, construiremos nosso site e eu usarei um nome de domínio diferente, que será wordpress everything.com, e também estará sob esse plano Então, terei esses dois sites, sites demonstração, sob a mesma hospedagem. É por isso que estou usando isso. Mas agora eu demorei muito falando sobre isso. Não estou tentando convencê-lo a entender isso. Sou apenas eu explicando a lógica por trás do que eu uso e como trabalho, porque talvez você ache útil, mas lembre-se: você sempre pode ir aqui e experimentar esses outros hosts da web Eles também são bons. Vá e experimente, escolha o que você quer. E uma vez que você tenha feito isso, vamos voltar aqui. Como você pode ver aqui, temos domínios. O Name Chip é um dos melhores vendedores de nomes de domínio do planeta. Você viu os anúncios em todos os lugares no YouTube e em sites diferentes Você pode pesquisar seu site. Digamos que charity today.com. Vamos ver o quanto isso é. Tudo bem. Charity today.com é o domínio premium São $1.700. Mas também temos outros domínios mais baratos, Charity today dot today Depende de você ser criativo e comprar um nome de domínio com o qual possa conviver, um nome de domínio que faça sentido. Obviamente, você deseja usar o nome de suas organizações de caridade ou de sua startup. Se você está procurando fundos para projetos de tecnologia e não para caridade, você também pode simplesmente usar o nome da sua empresa. Minha empresa today.com. E como você pode ver, y. Então, brinque com isso e, quando estiver pronto, você poderá adicionar ao cartão. Mas lembre-se, quando voltamos à hospedagem compartilhada, quando você compra esse plano, você recebe um nome de domínio gratuito. Isso significa que você tem a chance de obter um nome de domínio gratuito no primeiro ano sem precisar gastar esse dinheiro que acabamos de ver. Você não precisará comprar um nome de domínio no primeiro ano, mas é claro que terá que pagar pelo nome de domínio a partir do segundo ano 5. Instalação online do WordPress: Então, agora que você comprou a hospedagem na web e um nome de domínio da W Press , você pode instalar o WPs online porque temos acesso ao que chamamos de painel C. É o painel C que nos fornece o ambiente todas as ferramentas e recursos necessários para instalar um site Wpress online Então, vamos continuar e fazer isso agora. Então, aqui estou eu na minha página de login do chip de nome e vou fazer login imediatamente. Então, vou clicar em Entrar. Nome do chip, queremos verificar. Tudo bem, então eu preciso verificar isso. Então, deixe-me dar uma olhada no meu e-mail muito rapidamente. E lá vamos nós. E agora estamos dentro. Portanto, se você comprou hospedagem na web com chip de nome para acessar a lista C Panel Go to Hosting, é aí que você encontra todos os seus planos de hospedagem na web. E lembre-se, eu comprei o Stela plus. Então, vamos continuar e clicar em Ir para o painel C. E seremos redirecionados para o painel C. E aqui estamos. Agora, independentemente de qualquer host que você tenha escolhido, seu painel C deve ter uma aparência semelhante a isso. Talvez algumas das configurações estejam ausentes ou você tenha mais configurações do que eu, mas a maioria das configurações aqui é a mesma. Uma das principais ferramentas que você encontrará lá se chama sftaculs E o Softaculs é o que nos permite instalar diferentes tipos W Press é um exemplo de CMS, então você pode clicar em W press diretamente aqui ou clicar no instalador de aplicativos esptaculs Então, vou clicar em W Press. E agora seremos direcionados para a página em que podemos gerenciar todos os sites do Wpress que instalamos ou instalar novos. Se eu rolar para baixo, você notará que já temos um site da W Press instalado. E lembre-se, como estamos usando o Stella plus, podemos instalar um número ilimitado de sites no Stella Assim, podemos instalar uma nova instância do wordpress. Vou clicar em Instalar agora e seremos direcionados para esta página para fornecer todos os detalhes do nosso site. Comece com um protocolo. Gosto de usar HTTPS, certifique-se de que haja esse S no final para segurança, www website.com, mas você também pode usar Agora, se você não tiver um certificado SSL, não terá HTPS, terá apenas HTTP, mas isso não é recomendado Verifique se você tem um certificado SSL. Agora, quando eu escolho isso e clico fora, ele faz uma verificação rápida para ver se eu tenho um certificado SSL instalado e, se eu tiver, está tudo bem Se eu não fizer isso, ele me dirá que não consigo escolher o HTPS. Em seguida, vou escolher o domínio no qual instalarei essa instância do wor Press Porque meu site de referência está em worpress everything.com Vou escolher fX pod.com nothing. Não adicione nada aqui. Caso contrário, sua página inicial precisará ser WWW, sua barra de nome de domínio, seja o que for que você colocar aqui Essa será sua página inicial. Normalmente, você só quer que sua página inicial seja wbsite.com. Portanto, não adicione nada aqui. Em seguida, fornecerei um nome para o nosso site. Então, loja online. Compre qualquer coisa de nós. Essa é uma descrição do nosso site. E essas são as credenciais que você usará para fazer login no painel do Wpress Se você não quiser acessar o painel C para acessar seu painel, basta acessar a página de login do site do Wpress e fazer login no painel Portanto, certifique-se de ter uma senha forte e um nome de usuário forte. Vou deixar isso como padrão. E aqui estão alguns plug-ins que vêm pré-instalados com o W press. Se você verificá-los, vou remover isso e isso. Então, eu não tenho nenhum desses aqui. Você também pode optar por ter backups para o seu site. Deixe-o como padrão. Você pode optar por fazer backup do seu site uma vez por semana ou uma vez por mês, o que quiser. Então, vou escolher apenas uma vez por semana. Rotação talvez duas. Sempre haverá duas cópias dos backups, uma mais antiga que a outra, a qualquer momento. E você também pode fornecer um e-mail aqui para o qual um alerta será enviado quando a instalação estiver pronta. Não preciso fazer isso, então vou clicar em Instalar. E não saia desta página até que a barra de progresso alcance 100%. E aí está. Então, agora, o Wordpress está instalado e pronto. Aqui está uma URL para nossa página inicial e aqui está uma URL para nosso painel. Vamos para a página inicial. E esse é o tema padrão que vem com o Wordpress, e é assim que nosso site se parece. Aqui está nosso nome de domínio. Voltando aqui, vamos para o painel. Como abrir o link em uma nova guia, e aqui estamos dentro do painel de nossos sites do Wpress, então instalamos com sucesso o We press em um servidor online fornecido pelo nosso host E com nosso site Wpress pronto, vamos ver como instalar um plug-in Wpress offline. Te vejo em breve. 6. Instalar um plug-in offline: Então, agora que instalamos Word Press localmente e online, é hora de ter uma visão geral rápida do elementor Agora, para esta lição, vamos usar a instalação local, e isso porque eu também quero mostrar como instalar plug-ins localmente. Então, agora que temos essa instalação local do Word Press, é hora de instalar o elemento Então, vou para os plug-ins e adicionarei novos. Aqui vamos nós. E como estou conectado à Internet, esses plug-ins que estão no diretório do WordPress serão listados aqui. Mas, como mencionei, isso é porque estou online. Se você estiver off-line, não poderá clicar em instalar agora. Na verdade, eu não acho que você possa ver nenhum plugin aqui porque você não tem Internet. Portanto, você precisará vir aqui para fazer o upload de um plug-in e, em seguida, escolher um arquivo. Isso significa que o arquivo que você está escolhendo é um arquivo que você baixou anteriormente quando estava conectado à Internet Então, vamos baixar o arquivo que enviaremos aqui. Vamos baixar o Elementor. Plug-in Elemento. Depois de clicar no plug-in do elemento, não acesse o site do elemento, vá para wpress.org slash É aqui que você pode baixá-lo. Vou clicar nisso. Seremos levados para wpress.org Mais uma vez, lembre-se de que foi aqui que baixamos o Wpress. Mas agora, desta vez , estamos atrasados. Vamos esperar que ele termine de carregar. No momento, estamos sob extensão de plug-ins. Elemento de encaixe. Então, aqui, eu só vou clicar em baixar. Você pode ler sobre lamenta aqui, se quiser. Estamos baixando e agora aqui está. Agora, voltando aqui, direi que escolha o arquivo, e quero dizer downloads paralelos, como você pode ver, aqui está o lamenta 3.232, Em seguida, clique em Instalar agora. Em seguida, ative o plug-in. Agora, vamos passar por esse assistente de configuração. Você não precisa criar uma conta para usar o elementor, então vou pular Você pode continuar com o tema hello, criado e mantido pelo Elementor ou pela equipe do elementor, ou pode usar seu próprio tema preferido Vamos usar um tema chamado Astra, então vamos pular essa parte Agora, não precisamos desses recursos profissionais porque estamos usando o elementor free, então pule E agora podemos editar uma tela em branco ou escolher um modelo projetado profissionalmente ou um modelo que já criamos Mas agora, independentemente da opção que escolhermos aqui, incluindo Skip, elemento gerará automaticamente uma página de amostra do elementor, uma página editável com o Então, deixe-me clicar em Ignorar. E agora o Elementa gerou automaticamente esta página porque precisa nos levar ao editor para que possamos ter uma visão geral rápida do que é o Elemento Então, aqui, eles estão nos falando sobre os recursos de IA aos quais podemos ter acesso se quisermos, mas isso significa que você precisa ter uma conta elemento. Então pule isso E agora aqui está a página de amostra chamada Elementor número oito E deixe-me publicá-lo muito rapidamente. Lá vamos nós. Nós o publicamos. Agora, antes de dar uma olhada rápida neste editor, se quisermos sair para o painel, tudo o que precisamos fazer é clicar nele e sair para o WordPress. Assim que sairmos para W, pressione a página para o editor de Gutenberg É aqui que você faz algumas configurações básicas da página no back-end Vamos ver como fazer tudo isso. Agora, voltando às configurações do Wordpress, como você pode ver, essa é a página que foi gerada automaticamente pelo Elementor Mas essas são duas páginas adicionais que vieram com a nova instalação do W press. Não precisamos desses dois por enquanto. Selecione-os e, em seguida, vá para a lixeira e aplique. Então, agora temos esse Elementor número oito. Agora eu posso clicar em editar com o Elementor. E voltaremos à página elementar com o editor pronto para que possamos dar uma olhada. Então, acho que, por enquanto, vamos parar esta lição aqui. Pelo menos eu queria que víssemos como conectar uma instalação offline do W press. Esse é um bom lugar para parar. Na próxima lição, vamos ter uma visão geral do que todas essas partes significam. O que é tudo isso? Quais são todas essas configurações à medida que você cria seu site? Vamos ver isso na próxima lição. 7. Turno do editor de elementos: Então, agora é hora de dar uma olhada rápida no editor. Deixe-me fechar isso. Agora, logo de cara, como você pode ver aqui, temos algo chamado estrutura. Agora, esse é o novo nome. Nas versões anteriores do Elementor, isso era chamado de Navigator porque é um widget que nos dá uma visão panorâmica de toda a página, todos os elementos que temos na página, e podemos nos mover rapidamente para diferentes partes da Também nos mostra a estrutura. Deixe-me te mostrar muito rapidamente. Enquanto ainda estamos aqui, se eu, por exemplo, adicionar um contêiner. Arraste e solte um contêiner lá. No contêiner, ao clicar nesse sinal de adição, arrasto um elemento de imagem e talvez me deixe adicionar outra coisa. Deixe-me adicionar outro contêiner logo abaixo desse contêiner. Agora temos isso. Lá dentro, deixe-me colocar um vídeo. Este é apenas um exemplo de Vamos também adicionar outro contêiner logo abaixo dele, deixe-me adicionar um título. Então, como você pode ver, nossa estrutura aqui nos mostra a estrutura da página, daí o nome. Mas o navegador de nomes também foi muito relevante porque você pode navegar para qualquer parte da página da web Então, se eu derrubar isso , aquilo e aquilo, como você pode ver, temos um contêiner. Este contêiner, eu passo o mouse sobre ele, como você pode ver, é o contêiner que engloba todos esses outros contêineres engloba todos Agora, se eu expandir isso, temos uma imagem e, portanto essa imagem está dentro do contêiner. Mas esse contêiner também contém esse outro contêiner, que adicionamos posteriormente. Lembre-se desse contêiner, está dentro desse contêiner externo. É por isso que, quando destruímos isso, estamos escondendo o que está dentro disso. Mas agora, dentro desse contêiner, há um elemento de vídeo que adicionamos. Se expandirmos isso, teremos esse vídeo e, dentro dele, também teremos outro contêiner que adicionamos, e agora esse contêiner contém esse título. É como uma hierarquia ou, como o nome sugere, estrutura. Esse é o número um. Aqui à esquerda, como você notou, estou adicionando elementos clicando neste sinal de adição. Se eu quiser adicionar mais alguma coisa, clico nesse sinal de adição e posso adicionar qualquer elemento que eu quiser a partir daqui. Aqui em cima, temos configurações adicionais. Se eu quiser publicar a página, basta clicar em Publicar. Também posso clicar nesse menu suspenso para salvar a página atual como um modelo que eu possa reutilizar posteriormente Se eu quiser pré-visualizar o que eu criei, quero pré-visualizar esta página. Posso clicar nesse ícone, mas primeiro, vamos publicá-lo e, em seguida , clicar em Visualizar alterações. Isso abrirá uma nova guia, e é aí que veremos nossa página como ela está agora. Aqui, temos algumas outras coisas extras que eu não uso. Então, aqui temos design responsivo ou modo responsivo, ícones Depois de clicar aqui, ele muda para o modo tablet e você pode otimizar sua página da web para ter uma boa aparência em tablets. Você também pode clicar nessa tela do celular para alterá-la para o tamanho da tela do celular, e podemos ajustar cada elemento para ter uma boa aparência em dispositivos móveis. Quando estamos em um determinado modo, por exemplo, no modo retrato móvel, as alterações que fazemos nos elementos não se aplicam ao tablet ou ao desktop. Eles se aplicarão apenas ao modo móvel. E veremos como fazer isso quando estivermos otimizando nosso projeto de classe de landing page no final da aula Então, saberemos como usar essas ferramentas responsivas. A outra coisa que você precisa saber é se eu derrubo esses painéis aqui. Todos esses painéis contêm elementos que podemos arrastar para nossa área de trabalho até nossa página. Se abrirmos, deixe-me ficar bem, deixe-me fechar isso. Se formos para o layout, temos dois elementos principais, contêiner e grade. Gosto de usar o contêiner. Isso pode conter todos esses outros tipos diferentes de elementos que encontramos aqui. O contêiner basicamente contém outros elementos da sua página da web. Se formos para o básico e expandi-lo, recolher o layout , dentro do básico, temos os elementos mais usados, como cabeçalho, e você pode editá-lo aqui ou diretamente aqui e editá-lo diretamente no seu trabalho. O que mais temos? Se dissermos adicionar, também temos um parágrafo, que é chamado de editor de texto pelo elementor Lá vamos nós. Você pode alterar esse texto. E sempre que você adiciona um elemento ao seu espaço de trabalho aqui no seu editor Em outras palavras, sempre que você arrasta um elemento e o solta dentro da sua página No momento em que você o soltar e ele ainda for o elemento ativo, ele terá esse tipo de contorno ao redor, e as configurações aqui serão para esse elemento específico No momento, como você pode ver, diz botão de edição porque acabei de soltar o botão agora. O conteúdo é o conteúdo do elemento. Por exemplo, o conteúdo do texto, saiba mais. Isso é um conteúdo. Agora, o estilo é mudar a aparência do elemento. Isso é para adicionar conteúdo ao elemento. Se for um elemento de imagem, adicionar conteúdo, por exemplo, adicionar uma imagem. Se for um botão, adicionar conteúdo, por exemplo, o t do elemento. Então, temos o estilo mudando a aparência do elemento. Podemos mudar a cor e o botão. Cor normal. Podemos dizer que isso deveria ser preto e pairar. Isso é normal ao passar o mouse. Queremos que seja, digamos, vermelho. Ao passar o mouse, é vermelho e, no normal, é preto. Também podemos fazer o mesmo com os textos. No normal, é a cor padrão, que é branca, e ao passar o mouse, podemos dizer que queremos que a cor do texto seja, digamos, azul claro Então, assim mesmo. A próxima coisa é reduzir isso. Agora, dentro do painel profissional, como você pode ver, está escrito upgrade, e você notará que cada elemento tem um pequeno ícone de cadeado, que significa que, se você clicar nele, não poderá arrastá-lo o trabalho porque precisa atualizar. Então, todo o resto aqui é semelhante aos outros dois que vimos. Agora, há mais uma configuração que eu gosto de ter certeza de que está ativada. Se você clicar aqui e clicar nas preferências do usuário, há essa configuração chamada mostrar opções de edição rápida. Deixe-me mostrar o que ele faz. Agora, se eu passar o mouse sobre esse canto aqui, se eu quiser duplicar, por exemplo, esse texto, eu tenho que ir aqui, eu tenho que ir aqui, clicar com o botão direito e depois Vá aqui, clique com o botão direito em duplicar. Essas são duas etapas que preciso seguir para duplicar um elemento Mas se, por exemplo, eu tivesse as preferências do usuário, as opções de edição rápida ativadas, se eu passar o mouse sobre isso, agora, como você pode ver, temos ações rápidas aqui Por exemplo, isso é duplicado. Então, tudo que eu preciso fazer é passar o mouse aqui e duplicar. Então, esses ícones de ação rápida aqui realmente ajudam você a fazer seu trabalho muito mais rápido. Acho que agora tivemos uma boa visão geral do editor. O que resta é algo que podemos aprender à medida que construímos nossa landing page. Mas essa foi apenas uma forma de apresentar a você as diferentes partes do Elementor Agora, na próxima lição, vamos começar a criar o cabeçalho, e o cabeçalho é composto por esse botão, o menu e o logotipo. Então, vamos ver como criar isso na próxima lição. Te vejo em breve. 8. Instalar um tema do WordPress: Pronto, bem-vindo de volta. Então, agora é hora de começar a trabalhar na página de destino, e o primeiro lugar é o cabeçalho. Precisamos criar isso. Mas antes de fazermos isso, primeiro precisamos instalar um tema wordpress porque é o tema wordpress que determina aparência do seu site ou páginas da web. Então, entrando em um Wordpress, deixe-me ver. Então, agora, terminamos com o editor elementar. Então, eu simplesmente não vou publicar , então deixe-me clicar em publicar e sair para o Wordpress. Esse é o elemento oito, saia completamente. Então é aqui que você deveria estar agora, porque vamos instalar um tema Wordpress imediatamente. Agora, esta é a versão offline do nosso site. Vou mostrar como instalar um tema do Wordpress offline e, em seguida, vamos ficar online porque, a partir de então, continuaremos com a versão online Então, agora estamos offline. Como você pode ver, host local. Então, temas de aparência. E, claro, esses são os temas padrão que vêm com cada nova instalação da impressora de trabalho, dependendo do ano. Como estamos em 2024, o tema ativo por padrão é chamado de 2024 No ano passado, era 2023, e no ano anterior foi isso. Então, obviamente, no próximo ano, o tema padrão será 2025. Mas como nosso tema não está listado aqui, podemos dizer que adicione um novo tema. E nossa W Press abrirá o diretório de temas W press. Vamos seguir um processo semelhante ao upload ou instalação do plug-in. Como vamos dizer carregar tema, então eu escolho um arquivo que você já baixou, um tema que você já comprou e baixou. Então eu não tinha baixado o tema. Vou voltar para workpres.org. Mas agora, desta vez, vá estender os temas. E aqui vou pesquisar o Astra, mas geralmente está entre os três primeiros Aqui está, mas você também pode pesquisar no Astra, entrar e aqui está Vou selecionar isso e depois fazer o download. Lá vamos nós. Está baixando. E agora o Astra está baixado. Voltando aqui, vou escolher o arquivo, baixar o Astra, abrir e instalar agora Embalando o pacote, então vamos prosseguir e ativar. E agora Astro é o tema ativo. Então é assim que se faz offline. Agora, vou mudar para minha versão on-line do site. Aqui estou em um nome de domínio diferente para. E de agora em diante, agora vamos criar a página de destino desta Mas agora pelo menos você sabe como trabalhar offline. Então, agora em temas de aparência, é a mesma situação aqui. Por padrão, o tema ativo é 2024, mas queremos dizer que adicione um novo Mas desta vez, em vez de dizer em voz alta o tema, porque você está conectado à Internet, podemos instalar diretamente temas do Wordpress Vou prosseguir e dizer instalar o Astra. E então ative. Aqui vamos nós. Então, o tema ativo é Astra Deixe-me encerrar isso junto com aquilo. E agora você tem um tema ativo e está pronto para começar a criar a landing page. Então, na próxima lição, vamos ver como começar com o cabeçalho. Então, eu vou te ver em breve. 9. Instalar o ElementsKit: Então, vamos começar com o cabeçalho. Mas antes de fazermos isso, quero fechar todas essas guias. Assim mesmo. Então, ficamos com isso como a página de destino de referência. Voltaremos para ver a seção que estamos construindo, apenas para ter uma imagem mental do que estamos construindo. Agora, para criar o cabeçalho, precisaremos usar um plug-in de terceiros. Então, vamos entrar em nosso espaço de trabalho. Eu quero acessar os plug-ins. Adicionar novo. Em primeiro lugar, deixe-me clicar nos plug-ins, para que possamos ver os que estão instalados. Acis met e Hello Dolly vêm com instalação de prensa em todos os lugares Então, vou selecionar os dois, depois excluí-los e aplicar. OK. E parece que eu também instalo o loginizer enquanto instalo a prensa de trabalho no Então, eu também vou excluí-lo. No momento, não temos nenhum plug-in instalado. Vou dizer adicionar Novo e vou digitar Elementor Porque lembre-se, eu te mostrei como instalar o elementor offline Agora estamos usando o site on-line e preciso instalar o elementor aqui Eu vou dizer instale agora. E está instalado. Antes de clicar em Ativar, basta dar uma olhada nesses outros complementos relacionados ao elementor. Como você pode ver, o elementor é criado pelo elementor.com, mas esses outros são desenvolvidos por desenvolvedores terceirizados O que vamos usar para criar nosso cabeçalho é o kit de elementos do WP meet. Eu só vou dizer instale agora. Lá vamos nós. Então, agora, deixe-me ativar o Elementa primeiro Acho que vamos concluir que não precisamos usar esse assistente de configuração, mas talvez você seja solicitado a examiná-lo Então vamos lá. Eu também vou ativar a luz lamentski. Lá vamos nós. Agora, se eu passar o mouse sobre a luz do kit de elementos, você notará que temos o rodapé do cabeçalho, e é aqui que vamos criar nosso Mas antes disso, deixe-me clicar no kit Elements para que possamos acessar o assistente de configuração e prepará-lo. Agora, essas são configurações básicas para determinar o que será pré-ativado automaticamente enquanto trabalhamos em nossa página. Por exemplo, esses são os diferentes widgets que aparecerão em nossa página à medida que a editarmos Por exemplo, clico com o botão direito do mouse nesse link aberto em uma nova guia, abro isso e abro esta página de amostra para editá-la. Deixe-me fechar tudo isso e editar com o Elementor. Deixe-me fechar isso. Agora, se eu recolher isso, como você pode ver, quando instalamos o kit de elementos, ele foi automaticamente adicionado a essa lista de painéis no editor de elementos. Então, kit de elementos e kit de elementos no início do rodapé. Então, agora, esses são elementos que já estão pré-ativados em virtude da instalação do plug-in Mas agora, se chegarmos aqui e dissermos que queremos avançar, mais alguns elementos serão ativados aqui, e eles estarão acessíveis para nós aqui mesmo. Se escolhermos o básico, alguns desses widgets ficarão desativados e não poderemos vê-los aqui para usá-los em nosso trabalho Por exemplo, se eu selecionar avançado, veja esses widgets aqui. Pronto, como você pode ver, o wi get Builder agora está ativado por padrão Próxima etapa, próxima, próxima, próxima, salve as alterações. E agora terminamos. Então, terminamos com esse mago. E acho que estamos prontos para começar com um cabeçalho. Então, se eu clicar no rodapé do cabeçalho, como você pode ver agora, não temos nenhum cabeçalho ou rodapé Então, o que precisamos fazer é dizer adicionar novo. Mas isso é algo que faremos na próxima lição. Te vejo em breve. 10. Crie um logotipo de cabeçalho e um button: E estamos prontos para criar um novo cabeçalho. Então, vamos dizer adicionar novo, e agora aqui, é claro, vamos dar a ele o nome de cabeçalho, e é um cabeçalho. Quando chegar a hora de criar um rodapé, também viremos aqui e selecionaremos o rodapé Mas agora vamos usar o cabeçalho e, claro, queremos que ele esteja visível em todo o site. Se você quiser que ele esteja disponível condicionalmente ou visível somente em páginas ou partes específicas, você precisa estar na versão profissional do plugue Então, vamos ativá-lo também. Isso significa que vamos torná-lo visível agora mesmo. Quando estamos fazendo alguma manutenção e não queremos que os usuários a vejam, podemos desativá-la, mas não a removeremos. Agora que o temos basicamente pronto, podemos dizer que edite o conteúdo e seremos levados ao front-end, onde agora podemos editá-lo visualmente. Mas, no momento, podemos simplesmente salvar as alterações. Mesmo se clicarmos em Editar conteúdo, as alterações também serão salvas. Não se preocupe. Eu só quero salvar as alterações para que você possa vê-las listadas aqui. Mas agora podemos clicar em editar e voltar aqui e dizer editar conteúdo. E agora vamos para o front-end, onde agora podemos começar a trabalhar nele visualmente. Aqui estamos. Lembre-se de que o que estamos criando é esta seção aqui. Primeiro de tudo, é dividido em um, dois, três. Entre nas estruturas, pode começar com um contêiner flexbox ou um contêiner acordado Gosto de usar contêineres Flexbox. Então, vou clicar em Flexbox, e aqui vamos ver diferentes estruturas gratuitas que podemos começar a usar rapidamente Então, como vimos, temos uma, duas, três colunas. Esses três estão bem. O menu virá no meio, o logotipo aqui. Na verdade, podemos clicar nesse sinal de adição e adicionar uma imagem. Deixe-o aí, e esse será o nosso logotipo. Então, deixe-me ir em frente e selecionar isso. D. Não temos nada em nossa biblioteca de mídia. Portanto, faça o upload dos arquivos do dispositivo e selecione os arquivos. E eu tinha preparado uma pasta aqui chamada assets, essa pasta. Tem todas as imagens que usei no site de referência, caso você queira acompanhar essas imagens. Então, você encontrará uma pasta chamada assets logo abaixo desse player de vídeo na guia projetos e recursos. Você pode baixá-lo para acompanhar. Então, vou fazer o upload todas as imagens porque eventualmente as usaremos . E aqui vamos nós. O que eu preciso é do logotipo. Vou selecionar o logotipo e pronto. Tudo bem. Agora, acabei de me lembrar. Como eu esqueci? Precisamos ter esse fundo escuro? Então, deixe-me voltar aqui e, primeiro de tudo, vamos publicar a página exatamente do jeito que está. Agora vamos entrar nas configurações laterais. fundo, e vamos dar a ele um fundo escuro selecionando o tipo de plano de fundo e depois a cor. Quero arrastá-lo para a seção azul aqui e depois arrastá-lo para algum lugar ali. Eu não quero que seja preto puro assim. Eu quero ter um toque azul escuro nisso. Salve as alterações. E agora as alterações foram atualizadas de volta ao editor. Então, de volta ao editor, e aqui estamos. Agora, a próxima coisa que queremos adicionar é um botão. Vou clicar aqui para adicionar um botão e pronto. Claro, está alinhado à esquerda. Podemos alinhá-lo à direita acessando o estilo. Posicione à direita. E também podemos alterar o conteúdo. Lembre-se de que o conteúdo tem tudo a ver com o conteúdo em si. Então, o que temos aqui? Comece. Comece. E lembre-se, estilo tem tudo a ver com mudar a aparência de algo. Agora, eu quero ter um verde que se pareça com isso. Então, voltando aqui, enquanto o botão ainda está selecionado, vou selecionar o botão de subestilo, cor normal Vamos dar. Deixe-me puxar esse verde. Eu quero que tenha esse tom de verde em algum lugar lá. E eu quero que esse texto tenha esse fundo azul escuro. Voltando aqui e ao fundo, copie esse azul. Feche isso, selecione o botão, vá para a cor do texto normalmente. Você precisa ter essa cor escura, eu apenas controlo o Vd e, ao passar o mouse, pode ser branco, desse jeito Publique e vamos revisar as alterações. Clique neste I. É assim que parece atualmente. Como você pode ver, isso parece ser mais elevado do que isso. Parece estar desalinhado, voltando aqui. Primeiro de tudo, eu quero fazer isso menor, selecione este botão aqui. Vá para avançado. Deixe-me quebrar o estofamento. Margem. Deixe-me também selecionar o recipiente que o contém. Cada contêiner vem com margens e preenchimento padrão. Ao selecionar esse contêiner, avance, removendo que, como você pode ver, ele foi movido para os cantos do contêiner. Eu farei o mesmo com este contêiner. Avançado. Quebre isso. Selecione esse contêiner também como avançado. Quebre isso. Publique, revise as alterações. Tudo bem. Então, agora, pelo menos, estamos chegando a algum lugar com isso. Eles parecem estar alinhados corretamente. E agora, o que resta é esse menu. E vamos adicionar isso na próxima lição e depois equilibrar tudo à medida que progredimos. Mas agora, acho que esse é um bom lugar para terminar esta lição. Na próxima lição, vamos adicionar o menu. Então eu vou te ver. 11. Adicionar um menu de navegação: Agora que já adicionamos um botão e um logotipo, é hora de adicionar nosso menu de navegação Então, voltando à nossa área de trabalho, onde estamos? Fique confuso, Oh, aqui estamos. Agora, voltando aqui, deixe-me arrastar isso. Talvez até esse ponto, vamos publicar e ver o que temos. Tudo bem Isso é apenas empurrar tudo para os lados Então, agora, clicar neste sinal de adição aqui revelará os elementos, e eu posso digitar NV Você notará que temos o menu de elementos Kit NV e temos outro menu NV E isso é do elemento Pro. É por isso que tem essa fechadura e não podemos usá-la. Então, arrastando elementos do menu NV do kit. E soltando-o lá, ele se torna o elemento ativo aqui E como é o elemento ativo, podemos selecionar um menu para exibir aqui. Se eu mudar para cá, este é um menu composto por quatro itens de menu. E esses quatro itens do menu são páginas. Eles são páginas da web. Eles podem ser outros tipos de conteúdo, mas também podem ser páginas da web. Voltando aqui, esse menu suspenso deve mostrar uma lista de todos os menus que criamos, mas ainda não criamos nenhum menu Precisamos acessar o back-end da War Press e criar um menu que conterá itens de menu, e então o encontraremos listado aqui. Deixe-me publicar isso. Em seguida, volte para a War Press, e aqui estamos. Eu quero ir para aparência, menu. E aqui estamos, crie seu primeiro menu abaixo, para que possamos dar um nome ao menu. Vamos lá, vamos com meu cardápio. Observe aqui que adicionamos itens de menu. Esses são itens do menu. Assim, os itens do menu podem ser páginas da web, podem ser postagens de blog ou artigos. Eles podem ser links personalizados que você criou. Eles podem ser categorias e, em outros casos, podem ser outros tipos diferentes de conteúdo, dependendo do tema que você está usando. Mas agora, porque demos um nome ao nosso menu e queremos torná-lo o menu principal, se dissermos criar menu. Agora, essa área se torna ativa. Estava desbotado, mas agora está ativo. E lembre-se, temos algumas páginas que foram geradas automaticamente pela pressão W quando instalamos a prensa W. Uma delas era a página de amostra. Se eu disser VO, temos a página inicial e a página de amostra. Então, agora isso significa que precisamos criar alguns itens de menu, e eu quero adicionar esta página inicial. Quero dizer, sim, vamos adicionar esses dois como exemplo. Adicionar ao menu. E aqui estamos. É o menu principal, menu de salvamento. Lá vamos nós. Agora, se eu for ao kit de elementos, cabeçalho e rodapé e à direita vazar um link para uma nova guia, para que possamos deixar Aqui está a nova guia. Aqui, digamos, edite com Elementor. Aqui estamos. Lembre-se de que temos o menu Nav do kit de elementos Nav. Agora, se formos aqui para selecionar o menu, temos o menu M que criamos, e ele tem esses dois elementos, Página inicial e página de amostra. Vamos publicar isso. Enquanto ainda estiver selecionado, vamos estilizá-lo basicamente, para que possamos ver que o estilo dos itens invólucro do menu, o estilo do item do menu Vamos usar a tipografia, a cor do texto do item. Agora é preto, queremos que seja branco. Ou passe o mouse, queremos que seja tão verde. Deixe-me selecionar esse estilo de botão. Vá aqui Controle C para copiar essa cor. Selecione isso, isso muda para o menu do kit de elementos. Quando você seleciona o botão, ele muda para botão, quando você seleciona esta seção, ele muda para contêiner, muda para imagem. Então, você é um elemento ativo. Então, com esse estilo selecionado, estilo de item de menu. Ao passar o mouse, queremos que seja a cor verde que acabamos de copiar Então, ao passar o mouse, agora está verde. E quando está ativo, também queremos que ele tenha a cor verde. Então publique Vamos revisar as mudanças. Lá vamos nós. Agora, precisamos empurrá-los para o lado direito. Vá aqui, selecione o conteúdo do menu nervoso, posição horizontal do menu. Queremos que fique à direita. Exatamente desse jeito. Antes de avançarmos demais, publique a prévia. Agora, vamos lá. Mas agora você notará que eles ainda estão desalinhados Precisamos fazer algo sobre isso. Voltando aqui, enquanto o menu ainda está selecionado, vá para avançado. Vamos quebrar isso e a margem. Para a margem inferior, vamos reduzi-la até, digamos, 40. O topo também, menos 40. Tudo bem Agora vamos selecionar o contêiner que contém o menu. Está selecionado. Agora você notará aqui que temos o layout, justificamos o conteúdo e podemos justificá-lo no centro verticalmente Podemos justificar desde o início, que está no topo, como você pode ver pela linha mais longa na parte superior, ou na parte inferior, ou por essas outras Mas o que nos interessa é isso. Clicar nele o alinha verticalmente no centro. Vamos selecionar isso também. Esse contêiner. Vamos fazer o mesmo aqui. E esse também. Publique e vamos revisar as alterações. Então, agora, tudo parece estar alinhado corretamente. Mas você notará aqui que é largo. Está quase chegando ao limite, e veremos como fazer isso porque nosso está muito próximo por dentro. Mas, por enquanto, vamos deixar isso aí. Vamos redimensioná-la quando começarmos a construir a seção de heróis Então, por enquanto, o que eu quero que façamos é alterar esses itens do menu. Volte ao menu. Na verdade, vamos voltar às páginas, e essas são as duas páginas que temos. Rliik, adicione um novo link aberto em uma nova guia, clique Abrir link E agora temos essas duas páginas. Eu quero dar um nome a isso. Clique em publicar muito rapidamente. Biblioteca de modelos do Guten Kit. Não sei o que é isso, mas não acho que seja um problema. Feche isso. Vou chamar esse contato de Publicar, publicar. Tudo bem Atualize esta página e agora nós os temos Quero selecionar esses dois e passar para a lixeira, aplicar. Vamos aos menus de aparência. Agora você notará que a página de amostra é inválida porque acabamos de excluí-la Então remova isso. Essa página inicial é um link personalizado. Eu só vou removê-lo. Não é uma página. É um link personalizado. Vamos até as páginas e diga “ veja sobre o contato”. Adicionar ao menu. Salvar menu. Na verdade, agora vou adicionar uma página. Vou dizer adicione Deixe-me ligar para essa página inicial, empurrar, publicar. Voltando aqui e me refrescando. Também temos página inicial, adicione ao menu. Deixe-me arrastá-lo até lá, salve o menu. Agora temos esses três itens do menu. Volte aqui e se refresque. Agora temos essas três páginas. Eu só queria mostrar como você pode alterar os itens do menu, se quiser. Pré-visualize isso. Lá vamos nós. Então eu acho que isso é o suficiente por enquanto. Na próxima lição, vamos ver como criar essa seção de heróis. Então, eu vou te ver em breve. 12. Definir um favicon: Agora que criamos nosso cabeçalho, é hora de criar a seção de heróis, e essa é a seção de heróis, o que você pode ver ao acessar a página, essa seção superior. Mas agora, antes de avançarmos demais, quero que vejamos algo. Por exemplo, se você observar o chip de nomes ou os espetáculos, notará que eles têm um pequeno ícone aqui na parte superior que indica rapidamente qual site é esse, se você tiver muitas guias abertas Então isso é chamado de favicon. Algumas pessoas o pronunciam como ícone favorito, na verdade não importa Depende de como você gosta de pronunciá-lo. Mas agora o mais importante é como o adicionamos. E para adicioná-lo, tudo o que precisamos fazer é personalizar enquanto ainda estamos editando qualquer parte do site, personalizar. Aqui estamos, e veremos a identidade do site, o ícone do site, o carregamento. Aliás, eu não tenho um favicon. Eu só vou usar esses dois. Eu não tenho um. Selecione isso. Deixe-me escolher essa imagem recortada. Agora, como você pode ver aqui em cima, temos esse pequeno ícone. Vamos publicar isso. Agora, essa é uma das guias que abrimos para a página. Se eu atualizar isso, também terá que se eu atualizar isso também Então, quando estamos dentro do editor Elementor, não podemos ver o favicon, ou quando estamos dentro do painel, Se eu atualizar isso, dentro do painel, podemos ver isso. Mas quando estamos editando a página no Elementor, podemos ver o favicon Então, sim, basicamente, é assim que se adiciona o favicon. Na próxima lição, vamos ver agora como criar esse bloco. Te vejo em breve. 13. Texto do herói: Agora é hora de trabalhar na seção de heróis. Vamos começar com esse texto de cabeçalho aqui. Eu quero mudar para esse espaço. Feche isso. Na verdade, deixe-me fechar tudo o mais que eu não preciso. Acho que vou fechar isso, fechar tudo isso. Agora, ainda estamos dentro do cabeçalho, onde os editamos. Mas acho que, por enquanto, podemos deixar esse espaço, então vou clicar no ícone Sair para o Wordpress. Agora só temos o painel. Voltando às páginas. Agora, essas são as três páginas que temos atualmente. Podemos ter quantos quisermos, mas esses são os três que temos agora. E essa será nossa página inicial. Essa é a página que deve aparecer quando alguém digita nosso domínio.com Por exemplo, seu domínio WW domain.com. Então, se eu copiar isso, abrir uma nova guia e inseri-la aqui, ela deve nos levar à página inicial. Mas temos um problema. Isso nos leva para a postagem hello world em vez de nos levar para a página inicial. Então, como resolvemos isso? Voltando aqui, vamos às configurações, lendo: Agora, sua página inicial exibe uma página estática, não nossas postagens mais recentes. Não queremos as últimas postagens. Queremos uma página estática, e a página deve ser a página inicial. Estas são as três páginas que temos atualmente. Vamos definir a página inicial como página inicial. Salve as alterações. Lá vamos nós. Agora, voltar aqui e atualizar esta página nos leva à página inicial Agora vamos voltar aqui. Esta é a página inicial. Se eu disser editar. Como você pode ver, essas são páginas que criamos rapidamente para adicionar como itens de menu. Mas não fizemos as configurações básicas necessárias para criar a página no front-end com o elementor Então é isso que estamos fazendo agora. Então, na página inicial, vá para o modelo, altere esse modelo padrão para largura total porque queremos que o conteúdo ocupe toda a largura Volte aqui. Então, largura total do modelo Elementor Essas são as configurações de word press e elementor. Então lembre-se de que também temos o Astra. Esse é o tema que estamos usando. Também precisamos definir algumas configurações aqui e ali Portanto, nas configurações do Astra, vamos definir a largura total e não devemos nos preocupar com isso, pois isso só se aplicará porque o estilo do contêiner só será aplicado quando o layout estiver definido como normal ou estreito O nosso está configurado para largura total, então não se preocupe. Recolha o recipiente, expanda a barra lateral. Queremos dizer que não há barra lateral. Não precisamos de nenhuma barra lateral. O mesmo caso se aplica a essas configurações aqui. Não os mude. Reduza isso. Em seguida, precisamos desativar essas áreas. Atualmente, quando abrimos isso, como você pode ver, temos um rodapé padrão aqui do Astra Podemos dizer que desative o rodapé. E guarde isso. Volte aqui e atualize Agora, essa astrofoto padrão desapareceu porque vamos construir a nossa própria com elementor Também devemos desativar esses outros dois. Guarde isso. Atualize esta página. Lá vamos nós. Essas são as configurações básicas que você precisa definir ao se preparar para criar uma página com o elementor Agora que o temos pronto, podemos editar com o Elementor, para que possamos construí-lo no front-end Aqui estamos. Agora, o cabeçalho não é editável aqui porque não foi aqui que o criamos Lembre-se. Então, para começar, vamos dar uma olhada na anatomia dessa seção de heróis Tem esse lado e esse lado que tem a imagem. Então é uma caixa flexível com coluna dupla como essa. Aqui, podemos clicar nesse sinal de adição e adicionar um título, que é o que serão essencialmente esses textos de cabeçalho. Copie isso. Enquanto ainda estiver selecionado, vou entrar aqui e colar. Vamos clicar nesse sinal de adição para adicionar um editor de parágrafos ou texto. Largue isso aí mesmo. Agora eu quero mudar para branco. Texto do tipo selecionado branco, isso também, enquanto as configurações selecionadas são brancas. Enquanto isso ainda estiver selecionado, quero voltar ao conteúdo e alterá-lo para um H. Agora, com isso selecionado, vou para a tipografia de estilo e quero alterar o peso para preto para que fique super grosso e quero aumentar o tamanho Talvez até esse ponto e reduza a altura da linha, talvez até esse ponto, publique. Vamos pré-visualizar isso. Lá vamos nós. Obviamente, precisamos empurrá-lo para baixo. Então, como você pode ver, não consigo selecionar essa parte superior da seção porque há o cabeçalho. Vou apertar o controle I para abrir a estrutura ou o jacaré, e ele deve nos mostrar tudo o que temos Aqui está o contêiner. Estou tentando selecionar. E tem dois recipientes dentro dele, o que tem o texto e o que vai conter a imagem. Ao selecionar isso, isso muda para o contêiner de edição, vou para o preenchimento avançado, removo qualquer preenchimento que esteja lá e, em seguida, o preenchimento superior, podemos dar talvez 50 ou o preenchimento inferior 50 Talvez digamos 90 e top 90. Publique isso. Vamos pré-visualizá-lo. Lá vamos nós. Então, acho que vamos adicionar os botões e depois estilizá-los na próxima lição. Então, agora, vamos adicionar os botões. Então selecione isso. O botão deve estar abaixo do básico. Largue isso aí mesmo. Na verdade, você sabe o que, vamos trabalhar nos botões na próxima lição. Então, vamos parar aí mesmo. Te vejo em breve. 14. Buttons de herói: Foi aqui que paramos, e eu nem tinha clicado para publicar Deixe-me publicar isso. É isso mesmo. Agora, temos esse botão aqui. Em primeiro lugar, o que deveria dizer? Baixe para IOS. Selecionando isso no conteúdo, faça o download no sistema operacional. E temos outro aqui para baixar no Android. Então, vou passar o mouse sobre isso. 08. Nessa versão online, eu não tinha habilitado as opções rápidas das preferências do usuário. Tudo bem. Agora deixe-me duplicar esse botão Baixe no Android. Deixe-me dizer Android. Publicar. Se mudarmos para a página, notaremos que agora os botões estão empilhados um em cima do outro, e não é isso que queremos O que queremos está lado a lado, o que nos leva a um tópico muito importante que eu queria que tivéssemos em mente os contêineres. Agora, tudo o que criarmos aqui será colocado dentro de um contêiner. E os contêineres têm propriedades com as quais podemos brincar. Por exemplo, se eu selecionar esse contêiner mais externo aqui, se formos para a seção de layout e o contêiner, encontraremos algo chamado direção. E lembre-se de que usamos conteúdo justificado para alinhar diferentes elementos dentro do contêiner Além do conteúdo justificado, também temos direção, e isso determina em quais direções os elementos estão dispostos dentro do contêiner. Podemos ter de cima para baixo, podemos ter de baixo para cima, esquerda para a direita e da direita para a esquerda. Então, indo para esse contêiner aqui, como você pode ver, é um único contêiner contendo esse texto de cabeçalho, esse texto e esses dois botões. Se selecionarmos o contêiner e mudarmos a direção para invertida, tudo começará de baixo para cima O oposto é coluna. Da mesma forma, se dissermos que queremos que tudo vá da esquerda para a direita, será o título, o texto e depois os botões, e o oposto serão os botões, o texto e tudo mais. Agora, voltando aqui de cima para baixo, isso significa que se quisermos que esses botões estejam lado a lado, também precisamos colocá-los dentro um recipiente e organizá-los da esquerda para a direita. Então, vamos adicionar um contêiner logo abaixo desse texto. Agora arraste e solte o botão ali mesmo, arraste esse outro botão e solte-o logo abaixo desse outro dentro desse contêiner. Agora os dois estão dentro desse contêiner. E como agora está selecionado, podemos dizer: vamos organizá-los horizontalmente da esquerda para a direita Podemos revertê-los desse jeito. Mas vamos mantê-los assim. Publicar. Vamos revisar as mudanças e pronto. Agora, você notará que esse botão parece estar ligeiramente recuado em comparação com esse bloco de texto Portanto, lembre-se de que mencionei que cada contêiner vem com algum preenchimento e margens padrão Portanto, se eu selecionar esse contêiner e ir para avançado, posso remover o preenchimento padrão, que fará com que tudo toque nos cantos e bordas do contêiner Se eu publicá-lo e mudar para cá, será empurrado para a borda do contêiner. Agora, outra coisa que eu quero que vejamos é que, se eu selecionar o botão IOS, podemos ir para o estilo. Vamos mudar o raio da borda para 20 é demais. Que tal dez? Acho que dez está bem. Selecione esse estilo com raio de borda dez. Agora, podemos aumentar o preenchimento porque você notará que meus botões são maiores Então, com isso selecionado, vou até o preenchimento e quebro isso, isso removerá tudo À esquerda, podemos dar talvez 50 à direita, 50, na parte superior 20 e na parte inferior 20. Como você pode ver, é um botão maior. Na verdade, vamos dar 4040. Deixe-me selecionar isso, clique com o botão direito do mouse em copiar, selecione isso, clique com o botão direito do mouse para colar o estilo. Agora, ele herdou todos os estilos que aplicamos a isso. Vamos mudar a cor. Isso é verde. Preciso usar esse verde, mas não tenho acesso a ele porque não consigo editá-lo. Deixe-me ver se consigo usar meu seletor de cores. Deixe-me escolher isso. Enquanto isso estiver selecionado, eu vou aqui. Não. Onde está essa cor? Cor copiada. Lá vamos nós. Agora é o mesmo verde. Para a cor do texto, quero que ele tenha esse plano de fundo. Eu também deveria selecionar a cor pi. Código de cor escolhido. Selecione isso. Oh, espere, vamos voltar aqui. Queremos que a cor do texto seja essa. Ao passar o mouse, queremos que seja branco. Assim mesmo. Agora, selecionando isso, podemos alterar a cor de fundo para branco e a cor do texto para essa cor escura que acabamos de escolher aqui. Vamos pré-visualizar as alterações e agora nossos botões estão incríveis. Na próxima lição, veremos como adicionar essa imagem de herói. Mas antes de fazermos isso, observe aqui que temos esse texto, e ele é verde. Então, de volta aqui, o que podemos fazer é com isso selecionado, podemos acessar o conteúdo e agrupar esse gerenciamento com uma tag span. Então, vou dizer apenas colchete aberto, vão, colchete fechado, colchete aberto, vão de barra, colchete vão de barra Agora, com essa extensão envolvendo a palavra gerenciar, queremos dizer ao elementor que queremos aplicar esses estilos a esse texto específico que destacamos com as tags de extensão Portanto, estilo é igual a cotações de abertura e fechamento. Então, digamos que o atributo que queremos editar seja cor e queremos que a cor seja verde. Então eu acho que eu tinha me deixado selecionar isso. Controle C para copiar isso. Volte para selecionar isso e, voltando aqui, cor do estilo Span, queremos que a cor seja essa coluna e, em seguida, feche com uma semiccoluna Assim mesmo. Agora, se quisermos que a loja oftalmológica também seja ecológica, tudo o que precisamos fazer é pegar outra etiqueta de extensão. Vou copiar toda a etiqueta de abertura até logo antes de gerenciar, copiá-la, ir à loja de olhos, logo antes de colar lá. E feche-o. Abra o suporte, barra, extensão, feche o suporte. Pré-visualização da publicação. Lá vamos nós. Agora, basicamente, isso é personalização avançada, e eu só quero mostrar que você pode aplicar estilos CSS e HTML aos seus elementos Elementa Você não precisa se limitar apenas ao que o Elementor oferece Então vamos lá. Acho que agora estamos prontos para adicionar a imagem do herói, e faremos isso na próxima lição. Te vejo em breve. 15. Imagem de herói: Então, agora é hora de adicionar nossa imagem de herói e, claro, ajustar a largura da nossa página da web. Então, voltando aqui para o nosso editor, clicarei em Mais e adicionarei um elemento de imagem. Lá vamos nós. E aqui, vou clicar nisso e adicionar, acho que é isso. Adicione isso e publique, revise as alterações e pronto. Agora, é claro, lembre-se que precisamos ajustar a largura. Volte aqui, o que eu quero fazer é selecionar o recipiente que contém todos esses outros. Como você pode ver, é o que está destacado aqui. Quando eu seleciono qualquer coisa na estrutura, ela também é selecionada na página. Selecionando o contêiner aqui. Eu quero dar uma largura de 100%. Altere os pixels para porcentagem e dê 100%. Assim mesmo, publique e visualize as alterações. Agora, há um problema. Levamos tudo até o limite e não queremos isso. Então, como resolvemos isso? Muito simples, contêineres. Então, voltando aqui, mais, vamos adicionar um contêiner. Agora, antes de adicioná-lo, lembre-se este é um contêiner que tem dois contêineres. Esse contêiner contém um e dois. Agora, o que queremos é ter apenas um contêiner dentro desse contêiner. Lembre-se de que fabricamos esse contêiner 100%. Então, queremos outro contêiner dentro dele, ocupando 80% desses 100%, e depois colocar tudo dentro dele Então, podemos duplicar isso. E agora temos três contêineres. Podemos remover todo o conteúdo do primeiro contêiner, remover isso e aquilo. E também esse contêiner. Agora é um recipiente vazio. Podemos colocá-lo lá e também aquele logo abaixo. Lá vamos nós. Agora temos esses dois contêineres dentro do outro contêiner que acabamos de duplicar Agora, selecionando o contêiner externo, podemos primeiro mudar a direção da esquerda para a direita. Agora tudo está lado a lado. Mas lembre-se de que queremos que ele ocupe 80% do espaço disponível, 80%. Mas agora está alinhado à esquerda. O que precisamos fazer é selecionar o recipiente que o contém que contém isso, que é isso. Acesse aqui para justificar o conteúdo e colocá-lo no centro, sem mais nem menos Publique, visualize as alterações. Lá vamos nós. Então, agora vamos fazer exatamente a mesma coisa para o menu ou para o cabeçalho. Agora, depois de editar qualquer página ou parte de sua página da web com o Elementor, você sempre pode acessar o editor aqui Então, como já criamos o cabeçalho com o Elementor, podemos editá-lo aqui Podemos acessar seu editor aqui. Então, vou clicar em Cabeçalho. Aqui vamos nós. Agora vou selecionar o contêiner que contém tudo. E lembre-se, esses são três contêineres dentro desse contêiner externo. Então, vamos mudar esse contêiner para porcentagem e fazer com que ele ocupe 100% da tela em que você o está vendo. Então agora é 100%. Mas agora tudo é empurrado para o lado, publique, visualize. Mas o que queremos é um contêiner dentro desse contêiner que esteja ocupando 80%. Selecionando isso. Primeiro de tudo, vamos pressionar o controle I para abrir a estrutura, expandindo isso, como você pode ver, um, dois, três. O que podemos fazer é duplicar talvez esse primeiro, duplicar aquele Agora vamos remover o conteúdo desse contêiner. E agora vamos colocar essas outras coisas dentro desse recipiente. Logo abaixo, pode ser complicado, mas vamos continuar Três. Agora, esses são três contêineres dentro desse único contêiner que está dentro do contêiner de 100% de largura. Queremos que esse contêiner ocupe 80%. Mas agora também queremos que os contêineres dentro dele sejam organizados da esquerda para a direita dessa forma. E, ao mesmo tempo, queremos selecionar o recipiente externo e empurrar esse recipiente interno para o centro. Parece que coloquei o botão dentro do contêiner do menu. Deveria estar lá fora. Deixe-me colocar isso aí mesmo. Pode ser difícil colocá-lo, mas continue tentando até conseguir Publique e vamos pré-visualizar as alterações. Agora está quase tocando as bordas. Agora, se formos para a página inicial, digite “Lá vamos nós”. Eu gosto, mas isso parece ser empurrado para dentro. Não sei o que está acontecendo lá. Tudo bem. Enquanto isso estiver selecionado, em vez de colocar tudo no centro, digamos, espaço entre, para que possamos colocar espaços entre os elementos, mas empurrá-los até a borda. Vou selecionar um espaço entre e publicar. Agora, vamos dar uma olhada nisso. Se eu for para a página inicial, na verdade, vamos voltar aqui, selecionar a imagem, dar a ela uma URL personalizada com link e dar a ela seu domínio.com Então copie isso, coloque lá, publique a prévia. Agora, se clicarmos no ícone, é o logotipo, ele nos levará à página inicial. Agora, tudo está alinhado corretamente e agora está ocupando um espaço maior Acho que esse é um bom lugar para terminar esta lição. Na próxima lição, vamos começar com o resto da página. Te vejo em alguns minutos. 16. Adicionar uma seção do corpo: Agora é hora de começar a trabalhar nessa seção corporal. E voltando ao nosso editor aqui, acabei de notar uma coisa que esquecemos de fazer Você notará em nosso site de referência aqui que tudo parece estar alinhado verticalmente em relação um ao outro Então, por exemplo, esse bloco de texto está alinhado verticalmente em relação a Então, deixe-me mostrar o que quero dizer. Voltando aqui, selecionando esse contêiner que contém o texto. Posso ir aqui para justificar o conteúdo e alinhá-lo verticalmente ao centro Voltando aqui para este contêiner. Eu posso fazer o mesmo, mas isso não vai se mover porque a imagem está ocupando todo o espaço Mas se eu disser isso e visualizar as alterações, agora você notará que isso foi reduzido. Originalmente, estava aqui e havia muito espaço Vamos desfazer isso muito rapidamente. Estava lá em cima. Publicou isso. Vamos analisar as mudanças. Era lá que estava. Mas agora o que fizemos foi empurrá-lo para o centro verticalmente, apenas para alinhá-lo proporcionalmente a isso Agora, com isso feito, o que queremos fazer é adicionar uma nova seção, então ainda estamos na página inicial. E vou dizer mais uma caixa flexível, e vou pegar essa seção de coluna dupla mais uma vez. E antes de avançarmos demais, primeiro de tudo, quero selecionar enquanto isso ainda está selecionado, ir para avançado, na margem superior, quero dar 100, que possamos separá-la da seção de heróis. Agora, aqui, podemos selecionar uma imagem e soltá-la lá. Vá aqui. Acho que é isso. Sim, é isso. Este é o nosso favicon e essa é a imagem que queremos usar. Lá vamos nós. No momento em que colocamos a primeira imagem aqui. Elementor faz um anúncio rápido aqui, otimize sua imagem para melhorar desempenho do site usando o otimizador de imagens Vou seguir em frente e fechar isso. Agora, enquanto isso ainda está selecionado, queremos dar uma olhada no que temos aqui. Tudo bem Só precisamos pegar esse texto. O que precisamos fazer é duplicar esse título dessa forma. Em seguida, arraste e solte aqui. Vou duplicar esses textos também. Arraste e solte aí mesmo, e eu duplicarei quantos botões temos aqui? Só um. Vou duplicar isso e arrastar e soltar ali mesmo. Agora, com isso selecionado, quero vir aqui e remover esse estilo, já que eu não vou ser, temos algum estilo Ah, sim. Baixe o aplicativo baixe o aplicativo da sua loja. Então, entre o intervalo, em vez de loja. E lembre-se, isso deve ser H dois. Tudo bem Agora, descendo até aqui, quero selecionar esse contêiner, ir para o layout e dar a ele uma lacuna de 40 para que haja uma lacuna entre a imagem e o bloco de texto. E eu também quero adicionar uma lista de ícones. Então, voltando aqui, como você pode ver, temos essa lista aqui, e é isso que queremos adicionar. Então, além disso, digite o ícone e é a lista de ícones. Deixe-me me livrar disso mais uma vez. Você notará aqui que temos uma grande lacuna entre a lista de ícones e o parágrafo, e isso se deve a essa margem padrão. Então, com o texto selecionado margem inferior avançada, desse jeito. Agora, vamos selecionar esta lista de ícones com a margem inferior avançada. Podemos aumentá-lo para talvez 20. Tudo bem Com isso ainda selecionado, vá para estilo, vá para texto. A cor do texto deve ser branca e passar o mouse. Queremos que seja tão verde. Deixe-me selecionar esse texto e escolher esse código de cores, incluindo a cópia hash Selecione os textos aqui. Texto Ao passar o mouse, queremos que seja verde. Exatamente desse jeito. Agora vamos trabalhar no ícone. O ícone deve estar verde em circunstâncias normais. Então, ao passar o mouse, ele precisa ser branco. Exatamente desse jeito. Volte ao conteúdo. Agora, expandindo o primeiro, podemos o que temos aqui. Pesquisa poderosa de todos os recursos. Resultados de pesquisa poderosos que podem ser filtrados. De resultados filtráveis, baixe relatórios, adicione itens regularmente, regulares e, finalmente, seguros e protegidos Você também pode duplicar essa inserção ou adicionar um item. Duplicação de segundos segura. Digamos que são seguras e protegidas , podem ser duas palavras. Também podemos entrar enquanto estilizamos o estilo, podemos usar o mínimo de espaço entre eles para aumentar o espaçamento, como esse conteúdo Podemos voltar aos recursos poderosos e alterar o ícone para o que quisermos. Talvez digamos que esse encarte seja aquele carrapato. Tudo bem Verifique. Acho que esse é o encarte. Verifique e , finalmente, verifique. Publique, vamos visualizar as alterações. Rolando para baixo. Lá vamos nós. Mas agora, enquanto estamos na página inicial, isso precisa ser reduzido porque podemos ver isso. Então, voltando aqui, podemos pegar isso avançado. O topo da margem pode ser 150. Publique, vamos visualizar as alterações e pronto. Basicamente, é assim que se cria essa seção. Mas antes de prosseguirmos, também temos esse fundo animado de partículas, e acho que isso é algo que podemos fazer a partir da próxima lição Te vejo em breve. 17. Particles animados: Então, estamos quase terminando esta seção, mas precisamos adicionar esse sistema de partículas animado Então, vamos voltar ao nosso editor. Onde está? Aqui estamos. E precisamos instalar outro plug-in relacionado ao elementor ou baseado em elementor com o nome Royal Addons for Então, voltando aqui, conecte e adicione novos. Agora vamos dizer complementos do Royal Elemental. Acho que agora são os complementos Royal elementor WP Royal instalados. E existem diferentes complementos elementares que também têm esse sistema de partículas. Esse não é o único. Então, vamos ativar isso. Vamos em frente e pule Então, aqui estão alguns dos modelos e recursos que vêm com esse plug-in Mas o que estamos procurando agora é voltar para casa e atualizar esta página. Esse editor. Rolando para baixo. Vamos seguir em frente e selecionar esta seção. Agora, primeiro, vamos adicionar um pouco de preenchimento na parte superior e inferior para separar o conteúdo do contêiner da borda do contêiner Com o contêiner selecionado, o preenchimento avançado na parte superior, digamos AD, ou seja, na parte inferior e superior, o AD está bem Enquanto ainda estiver selecionado, vou usar o estilo. E agora que temos complementos do elemento real, Undertyle, temos acesso às partículas Podemos adicionar partículas a qualquer recipiente. Por exemplo, agora que isso está selecionado, podemos adicionar isso. Então, direi que habilite o fundo de partículas. E como você pode ver, eles já estão aparecendo, mas precisamos editar a cor porque agora eles são pretos, como você pode ver. Então, primeiro de tudo, deixe-me dizer que publique. Em seguida, para editar as diferentes propriedades das partículas, podemos clicar aqui. Aqui vamos nós. Isso é o que temos atualmente. Eu quero ir até as partículas em si, colorir. No momento, eles são brancos nas configurações. Na verdade, deixe-me dizer que baixe configuração atual no formato JSON Esta configuração atual, para que possamos dar uma olhada nela. Abra-o. Agora, ele está aberto em outra página, então vou colocá-lo aqui e selecionar tudo. Controle A, copie. Feche isso. Volte para a página inicial. Selecione este Controle A, exclua o Controle V para colar o que você acabou de baixar. Agora você notará que é branco como aqui, o que significa que agora podemos voltar aqui e mudar alguns itens, por exemplo, eu queria que essa cor fosse um pouco escura, então vou para o azul. Essa é a cor da partícula, e eu quero que seja. Quero algo que seja visível nesse fundo Neste fundo escuro. Então eu acho que essa cor está bem. Controle C. Eu quero ir até as linhas. Onde está vinculada a linha. Entrar. Tudo bem Agora essa é a cor que eu tenho agora. Se eu disser baixar a configuração atual e abri-la, elas abrirão na guia de notas, bloco de notas, Controle A, cópia de, vá para a página inicial de edição, selecionando aqui, Controle A, controle V para colar o que eu tenho agora Acho que é uma cor melhor. Mas em nosso site de referência, esse é, na verdade, um fundo ainda mais claro. Enquanto esse contêiner ainda estiver selecionado, vá para estilo, cor do tipo de fundo, vá para o azul. Eu quero fazer isso um pouco, digamos que essa cor. Você pode simplesmente digitar esse código exato se gostar da aparência do meu. Publique e vamos revisar as alterações. Rolando para baixo. Lá vamos nós. Agora, se você acha que eles são muito escuros, muito pronunciados, você sempre pode voltar aqui e brincar com a opacidade Brinque com todas essas configurações para ver o que você poderá obter. Então publique e vamos pré-visualizar o que temos. Acho que isso já parece profissional. Agora, acho que é aqui vamos terminar esta lição, mas na próxima lição, vamos ver como adicionar esse link âncora Então, se eu clicar aqui, nosso foco será direcionado para esta seção. Deixe-me mostrar como fazer isso na próxima lição. Não vá a lugar nenhum. 18. Elemento de âncora: Nossa página de destino agora está tomando forma Agora é hora de adicionar esse elemento âncora Vamos até nosso editor. Acho que é isso. Aqui estamos. Vou voltar aqui. Deixe-me fechar isso. O que é isso? Vamos fechar todas essas outras guias. E entre aqui. Então, eu quero clicar neste sinal de adição aqui para adicionar qualquer elemento ou seção que quisermos aqui, mais flex, e vou adicionar esse contêiner de coluna única E aqui, vou adicionar um ícone. Então, vou arrastar e soltar um ícone aqui. Eu posso mudar o ícone para talvez apontar para baixo e apontar para baixo. Digamos que esse. Porque eu quero mostrar às pessoas que clicam para descer ou algo desse tipo. Também quero selecionar esse controle de cópia de estilo verde C, porque estamos tentando manter essa identidade de marca, cor de marca, 08. Com isso selecionado, vamos para o estilo, verde normal ao passar o mouse, ele precisa ser branco, assim mesmo Agora, quando clicarmos nele, vamos voltar ao conteúdo. Mas antes de entrarmos no conteúdo, devemos diminuí-lo um pouco? Vamos ver. Publique, visualize as alterações. Acho que está em uma boa posição. Está bem equilibrado no espaço. Agora, voltando aqui, enquanto isso ainda estiver selecionado, volte para o link do conteúdo. Tudo bem. Clique no sinal de mais aqui e digite a âncora. Vamos soltar essa âncora em qualquer lugar que quisermos ser levados quando clicarmos no link Então, por exemplo, vamos colocá-lo em algum lugar aqui. Por que não consigo colocá-lo em algum lugar. Deixe-me colocá-lo aqui, por exemplo. Por que não consigo colocá-lo aqui? Oh, acho que sei o porquê. Essas partículas estão acima do nosso conteúdo e alguma forma, estão afetando nossa capacidade de soltar a âncora lá Mas de qualquer forma, se eu duplicar isso e voltar aqui e dizer âncora e tentar soltá-la Sim. Por alguma razão, qualquer seção que tenha essas partículas, deixe-me desligar as partículas do estilo here. As partículas desativam isso. Agora vou voltar aqui, âncora. Sim. Essas partículas estão nos impedindo de arrastar e soltar o elemento de ancoragem do ponto de ancoragem dentro da seção, mas Agora, se eu deixar isso aqui e adicionar um ID. Por exemplo, vá aqui, deixe-me dizer vá aqui. Esse é o ID desse elemento âncora. E agora, quando vamos para um link, por exemplo, para esse link, podemos dizer ao elementor, nos levar diretamente ao local onde há um elemento âncora que tem esse ID Porque isso tem um D de go here, deixe-me copiar isso aqui. Se voltarmos a este link, podemos colar o URL, depois dizer slash hash e, em seguida, o ID do ponto de ancoragem para o qual você deseja que este link o direcione Publique. Vamos pré-visualizar as mudanças aqui. Se eu clicar aqui, ele nos levará diretamente para esta parte. Eu queria te mostrar isso como um exemplo. Agora, o que queremos é ser levado para este que está logo abaixo deste exemplo. Deixe-me fechar isso. O que eu quero fazer é selecionar um ponto de ancoragem. E arraste e solte logo abaixo de si, vamos aqui. Agora, lembre-se, acabamos de excluir a outra seção que tinha o outro ponto de ancoragem, elemento âncora, cada elemento âncora precisa ter um Então, estou reutilizando go here porque não temos mais o outro Mas agora, se clicarmos aqui, lembre-se que já foi dado esse botão aqui, então funcionará para esse novo elemento âncora Então, se eu disser publique e visualize as alterações. Se clicarmos nisso, ele nos levará ao elemento âncora que está aqui Quando você clica em um elemento âncora, ele é colocado na parte superior da página em que você está atualmente É por isso que agora temos isso aqui, porque o elemento âncora do elemento âncora está invisível Então, se quisermos aumentar isso, temos que colocar o elemento âncora mais acima Então, ou temos que reduzir a margem no topo desta seção. Vamos selecionar a seção. Avançado. Margem superior, digamos que 100 publicações. Vamos pré-visualizar as mudanças. Se eu clicar aqui, estamos chegando a algum lugar. Por que não nos livramos de, digamos 50 para aproximá-la da âncora invisível Tudo bem, agora clicando nisso. Agora está nos trazendo até esse ponto. Acho que é um bom ponto, mas pelo menos agora você entende como os elementos âncora funcionam porque você pode ter algo específico em uma página específica que criou com o Elementor e quer que alguém clique em um link e seja levado diretamente para essa parte da É assim que se faz com elementos de ancoragem. Então, acho que vamos parar por aqui. Na próxima lição. Vamos ver como adicionar essa outra seção. Então, eu vou te ver em breve. 19. Outra seção: Estamos com esta seção de padrão de partículas. Agora é hora de trabalhar nesta seção de dbo de desktop rica em recursos Voltando aqui para o nosso editor, tudo o que preciso fazer é duplicar isso, duplicar aquele Agora lembre-se de que, embora ainda esteja selecionado como avançado, lembre-se de que reduzimos a margem na parte superior desta. Na verdade, quero reduzi-la ainda mais para talvez nenhuma prévia de publicação. Se eu clicar nisso, isso coloca isso em foco. Mas eu quero rejeitar este outro como originalmente concebido, publicado E agora, se eu visualizar as alterações, clique nela para esperar. Vamos dar a essa atualização de talvez 30% de publicação. Eu gosto disso. De qualquer forma, indo até aqui, enquanto isso ainda está selecionado, quero ir para estilizar partículas e fazer isso Na verdade, eu também quero me livrar do plano de fundo. Indo para o plano de fundo. Selecione isso e clique aqui para limpar. Isso reverterá para as configurações de fundo originais que tinha quando o adicionamos E quando você adiciona um contêiner, ele não tem um plano de fundo. Então, nós o revertemos. Agora, quero arrastar esse contêiner e colocá-lo à esquerda. Agora é um pouco complicado. Então, deixe-me ver se consigo arrastar isso, você tem que tentar forçá-lo. Então, colocando-o de volta lá. Porque meu objetivo está aí. Então, deixe-o lá. Meu objetivo é reverter o texto e colocá-lo deste lado e a imagem do outro lado. Que imagem temos aqui? Oh, acabei de lembrar, isso está no fundo, não no lado direito. Então isso precisa desaparecer, e isso precisa ocupar, vamos deixá-lo em 50%. Então, entrando aqui, quero selecionar o plano de fundo e, desta vez, vamos adicionar uma imagem. Selecione este laptop e vamos colocá-lo em segundo plano assim. Agora, digamos que não repita, posicione, digamos, centro direito ou centro direito, assim. Podemos deixá-lo nesse tamanho ou podemos dizer que o tamanho da capa é de exibição, não, acho que conter está bem. Publique e vamos revisar as alterações. Rolando para baixo. Lá vamos nós. Agora, acho que precisamos ter alguma margem na parte inferior. Porque lembre-se, se olharmos para a referência, essa é a referência. Como você pode ver, temos uma boa margem separando-a do rodapé Então, voltando aqui, enquanto isso ainda está selecionado, vamos para avançado, e eu estava falando sobre preenchimento, não margem A margem inferior é 100. Vamos também atualizar esse recurso de cópia para desktop que, selecione esta opção. Apresenta um painel de desktop dentro do espaço. Painel de controle do desktop. Eu publico. Visualize as alterações. Cabe a você atualizar o conteúdo e usar o seu próprio. Rolando para baixo, e vamos lá. Então, basicamente, isso é como adicionar mais uma seção à sua landing page. E é uma questão de repetir o que você fez duplicando o que você fez duplicando coisas sem precisar e reestilizar cada elemento Então, acho que é um bom lugar para terminar esta lição. Na próxima lição, vamos passar para a foto. Te vejo em breve. 20. Logotipo do rodapé: Portanto, nossa página de destino está se tornando algo de que podemos nos orgulhar, mas ainda temos a foto para criar. Então é hora de trabalhar nisso. Voltando ao nosso editor, então, onde está aqui? Claro, lembre-se da forma como criamos nosso cabeçalho. É da mesma forma que vamos criar nosso rodapé. Volte aqui. Na verdade, acabamos com esse espaço, só vamos dizer saia para o Word Press. Poderíamos ter ido aqui, mas também terminamos com a outra parte, então não precisamos dela. Vamos sair completamente. E agora vamos ao kit de elementos, ao rodapé do cabeçalho e vamos adicionar novos Rodapé. Na verdade, vamos permanecer consistentes. Site inteiro ligado e vamos editar o conteúdo. Ele foi salvo automaticamente e adicionado à lista de cabeçalhos e rodapés E aqui estamos mais uma vez. Então lembre-se, o exercício. Se clicarmos nele e abrirmos a caixa flexível, podemos usar essa seção de quatro colunas Lembre-se. Nosso site de referência tem essas quatro colunas, então isso é bom. Mas preciso mencionar que, mesmo que você adicione, por exemplo, isso, você sempre pode transformá-lo no que quiser. Se eu disser mais e adicionar contêiner, posso duplicar esse contêiner, duplicar, duplicá-lo quatro vezes e agora selecionar o contêiner que os Vá para a direção do layout da esquerda para a direita, e é uma seção de coluna quádrupla Entrando aqui, flex box, adicionando-a, como você pode ver, elas são idênticas Agora, neste caso, vamos adicionar uma imagem. Elemento. Selecione isso. Vá até o logotipo e selecione. Lá vamos nós. Também podemos fornecer um URL personalizado para a página inicial Porque se alguém pressionar ou clicar nele, você quer que essa pessoa seja direcionada para a Em seguida, vamos adicionar alguns textos. Vou apenas adicionar um editor de texto. Lá vamos nós. Você pode dizer estilo, branco. Publicar. Podemos entrar aqui e dizer lista de ícones. Porque, essencialmente, essas são listas de ícones. Links rápidos. Vou voltar aqui e dizer cabeçalho, colocá-lo lá e vamos mudar para links rápidos. Você pode alterá-lo para, digamos verde ou branco. Eu quero que eles sejam tão verdes. Volte aqui, levante meu colírio ou dois. Copie isso. Você pode instalá-lo se quiser experimentar as cores que estão no seu navegador atualmente. É chamado de seletor de cores RGB. Você pode baixá-lo como uma extensão para o seu navegador. Voltando aqui, vou colar minha cor verde. Também quero ter certeza de que a tipografia é 600 e selecionar antes de prosseguirmos, vamos selecionar a lista de ícones para que possamos estilizá-la Volte aqui, altere isso para verificar a inserção, feche isso. Não quero ter que mudar esse ícone novamente, então vou duplicá-lo Agora ele tem o mesmo ícone. Tudo o que precisamos fazer é mudar a cor do ícone. Não. Vamos estilizar a cor do ícone com essa cor verde ao passar o mouse. Vamos fazer isso. Para o texto, vamos passar o mouse sobre ele. Vamos torná-lo tão verde. Para as listas, vamos aumentar um pouco o espaçamento. Agora podemos duplicar, duplicar e talvez mais uma vez Isso pode ser o lar. H. Privacidade do blog. Condições. Finalmente, essa pode ser nossa loja. Lá vamos nós. A próxima coisa que quero fazer é duplicar isso e me livrar disso, porque não há necessidade de refazer o que acabamos de fazer Mas também quero selecionar esse contêiner que contém o e, enquanto ainda estiver selecionado, vou para a margem de avanço à esquerda. Vamos insistir. Na verdade, vamos voltar ao zero e publicar uma prévia das alterações primeiro. Acabei de me lembrar de algo. Lá vamos nós. Então, primeiro de tudo, quero adicionar botões aqui. Como você pode notar, temos esses dois botões. Então eu vou entrar aqui e deixe-me adicioná-lo aqui, adicioná-lo com elementor Eu seleciono este Controle C, G aqui. Selecione aqui, Controle V. Agora, ele foi colado do lado de fora, então vou arrastá-lo e soltá-lo lá C, selecione esta pasta correta. Agora vai lá embaixo. Publicado. Vamos revisar as mudanças e pronto. Mas agora o problema é se clicarmos aqui para ir para casa, porque lembre-se de que fornecemos um link. Se formos para casa, se rolarmos para baixo até o final. Você notará que isso é empurrado para fora enquanto é empurrado para dentro Esses outros também devem ser empurrados para fora. Primeiro de tudo, vamos eliminar o fo em si. Selecionar o recipiente que contém tudo. Vamos mudar isso para 100% largura Agora vamos ter um contêiner que contém tudo. Mas esse contêiner ocupará 80% desse contêiner externo que tem 100% de largura. Então, podemos simplesmente duplicar isso, remover tudo de dentro e, em seguida, arrastar e soltar esses outros dentro Eu quero colocá-lo logo abaixo disso. Sim. Pegue isso, coloque logo abaixo disso e, finalmente, coloque logo abaixo disso. Agora, selecionando esse contêiner, organizamos a direção da esquerda para a direita, mas agora queremos que ela ocupe 80%. Isso deve ser 100%, o externo é 100% e esse interno é 80%, o externo precisa que o interno esteja no centro. Também devemos aumentar o preenchimento acima e abaixo do pé do conteúdo Vá para preenchimento avançado. No topo, digamos 100, no final das 100 publicações. Agora, você notará que esses links rápidos estão acima de tudo. Parece que sei que está alinhado com esse botão. Isso pode ser empurrado para cima, selecionando a imagem em si, margem, parte superior. Lembre-se, isso também está muito próximo disso Enquanto isso estiver selecionado, vamos colocar esse contêiner à esquerda e empurrá-lo até a publicação, revisar as alterações, e acho que agora temos um bom rodapé Se formos para casa e rolarmos até o fundo, lá vamos nós. Uma coisa que resta é empurrar esses textos até este ponto aqui Então, eu quero ir para a página inicial. Selecione esse contêiner que contém isso. Eu quero que isso ocupe 80% porque isso está ocupando, digamos, 100%, 100% Isso deve ocupar 80% da publicação. Agora, acho que sei qual é o problema. Sim. Espere, nem mesmo a pressionamos enquanto ela ainda está selecionada A externa, vamos justificar a publicação do conteúdo Revise as alterações e role para baixo. Mas agora isso está chegando até a imagem, o que significa que vamos duplicar isso Agora vamos fazer com que ocupe 40% e essa outra metade ocupará 40% 40% 40%, e os dois representarão 80%. Mas agora este estará vazio, remova isso e aquilo. E isso rola. Vamos analisar as mudanças. Passeie para baixo Lá vamos nós. Então, agora está devidamente alinhado com isso, e está ocupando 40%, 40% Então, sim, acho que agora terminamos com a página de destino, mas só mais uma coisa que eu sei que você está se perguntando: como podemos fazer com que ela tenha uma boa aparência em todos os dispositivos. Celular, tablet, já fica bem em um desktop. Então, vamos ver como fazer isso na próxima lição. Te vejo em breve. 21. Como finalizar o rodapé: A, bem-vindo de volta. Então, estamos quase terminando nossa landing page, mas temos alguns retoques finais Agora, número um, vamos alterar a cor ou a cor de fundo do rodapé para refletir o que temos no site de referência Onde está? Sim, aqui está nosso site de referência, e ele tem o mesmo estilo desta outra seção Mas naquele em que estamos trabalhando agora, ele não tem essa cor. Então, vou até o editor. Quero selecionar este contêiner, vá para estilo. Cor. Copie isso. Volte aqui para o editor do Footer. Selecione a cor do tipo de fundo do estilo de contêiner. Vamos dar essa cor. Particle Royals Royal acrescenta. Vamos habilitar isso. Na verdade, vamos voltar aqui neste editor. Partículas abertas. Clique em qualquer lugar dentro do código, o código JSON, Controle uma cópia Vamos voltar ao nosso editor. Selecione dentro do editor JS, controle A, exclua, cole. Lá vamos nós. Então, digamos que se inscreva. Publique, voltando aqui, aí está nosso rodapé. Agora, se eu clicar aqui para ir para casa, lá vamos nós. Então esse é o nosso oleiro. É isso mesmo. A outra coisa que precisamos fazer é fazer com que essa página tenha uma boa aparência em tablets e smartphones. Nesta lição, vamos trabalhar para fazer com que tenha uma boa aparência em tablets. Então, vamos começar com a página. Na verdade, deixe-me fechar tudo aqui. Voltaremos a trabalhar no resto. Mas agora, vamos para a direita Lak Open Linking New Tab para abrir a página de destino . Lá vamos nós. Agora, aqui, vamos começar pelo cabeçalho. Esse é o editor de cabeçalhos. Agora, vamos mudar para o modo responsivo do tablet, e é assim que fica nos tablets Controle I para abrir a estrutura. Quero selecionar o contêiner que contém tudo dentro desse contêiner externo. Esse contêiner aqui precisa ser 100%. 100% do espaço disponível. Isso precisa ser talvez 20%. Deixe-me selecionar isso. O contêiner do botão precisa ser de 20%. O logotipo precisa ter 20%. Portanto, o contêiner do menu precisa ter 60% e não 60% de células p por cento. Publicar. Agora, como você pode ver, quando eu mantenho o menu, é aqui que ele está localizado Deixe-me selecioná-lo. Eu o selecionei, mas caso você não consiga selecioná-lo, entre no recipiente que o contém e selecione os elementos knave Enquanto estiver selecionado, vá para avançado, quebre todas essas configurações padrão que definimos na versão para desktop. Porque se voltarmos para a versão desktop, olhe para a margem, ela voltará ao que era. No modo tablet, redefinimos isso. Mas para o desktop, ainda permanece o que tínhamos originalmente. Tudo o que definirmos para o tablet será o padrão para o celular. Quero redefinir a margem e o preenchimento de tudo isso no modo tablet Eu quero empurrar esse menu para baixo. Selecionando o menu em si, margem, remova a margem inferior do menu e agora vamos lá. Publique, revise as alterações. Agora, quero pressionar Control shift I para abrir as ferramentas de desenvolvimento no meu navegador Chrome. Isso me permite analisar emuladores para dispositivos diferentes Se eu clicar neste Togo responsivo, temos diferentes emuladores de dispositivos Por exemplo, para o iPad mini, essa é a aparência de um iPad mini, iPad er e iPad P. Vamos ao iPad mini. E eu não consigo ver O, aqui está o menu. Na verdade, acho que essa lição vai ser muito longa. Vamos ver como proceder a partir daqui na próxima lição. Te vejo em breve. 22. Cabeçalho responsivo à tela: Vamos continuar de onde paramos. Como você pode ver, o menu está aqui, o ícone do menu, mas não podemos vê-lo. A primeira coisa que queremos fazer é mudar a cor. Enquanto ainda estiver selecionado, vou usar o estilo. Embalagem de menu. Agora queremos ir para o estilo Hamburger Para o estilo hambúrguer, cor ícone de hambúrguer. Vamos ver. Queremos torná-lo branco. Vamos torná-lo verde. Deixe-me selecionar esse botão. Copie isso. Selecione o kit de elementos estilo Hamburger. Vá aqui e deixe isso verde. Essa é a cor do ícone. Na verdade, estamos mudando a coisa errada. Não é a cor do ícone do Hamburger. Queremos que isso permaneça. Vamos voltar ao normal. Queremos que seja essa cor escura. Então, vamos voltar ao seletor de cores e eu quero escolher essa cor Agora, para essa cor de ícone de hambúrguer, são essas linhas Eu quero que eles tenham essa cor de fundo escura. Mas agora isso está aqui. Para o tipo de plano de fundo, é aí que queremos ter a cor verde. Se eu selecionar isso, é exatamente o que eu estava procurando. Deixe-me selecionar esse botão. Cópia colorida. Selecione esse elemento, o estilo. Estilo hambúrguer. Ok. Vamos ao tipo de plano de fundo, não à cor do ícone, tipo de plano de fundo, ao verde e ao passar o mouse Quando você está usando um tablet, geralmente não passa o mouse sobre Mas talvez você esteja usando uma caneta. Então, não me deixe supor. O tipo de fundo ao passar o mouse deve ser branco, assim Agora, esse é o ícone do hambúrguer. Quando clicamos nele e expomos o menu, também temos esse botão para fechar, e é isso que temos aqui embaixo. Perto de ir. Na verdade, vamos fazer esse menu. Vamos voltar aqui e fazer desse menu esse fundo de menu colorido. Volte aqui, eu quero ir para as páginas iniciais. página inicial é aberta à direita vinculando a nova guia para edição com o Elementor Agora, descendo aqui, quero selecionar esse contêiner. Então, selecionando seu estilo. Cópia colorida. Vamos voltar aqui e agora para usar este invólucro de menu. Queremos dar a ele um tipo de fundo dessa cor. Estilo do item de menu. Queremos dar a ele uma cor branca ao passar o mouse. Queremos que seja tão verde, selecionando essa cópia. Clicando no menu. Queremos ser capazes de ver isso. Na verdade, ele já está configurado para se comportar assim, mas tudo bem. Acho que está herdando das configurações da área de trabalho. Vamos deixar as coisas assim. Agora, vamos mudar esse togo fechado Mais uma vez, menu de hambúrguer. Tipo de plano de fundo togo fechado. Vamos torná-lo branco. Tipo de borda, nenhum. Você não deveria ter uma fronteira, e eu acho que isso parece bom. Agora, também vamos adicionar um menu móvel. Voltando ao conteúdo, configurações do menu móvel, logotipo do menu móvel. Vamos selecionar isso, selecionar. Não, se clicarmos no menu, é assim que fica. Agora podemos reduzir a largura desse invólucro, indo para a largura do invólucro do menu de estilo Para tablets, eu acho que, digamos, 30%. Não, isso é muito pequeno porque agora está derrubando o togo fechado, desse jeito Vamos comer o hambúrguer mais uma vez. Vamos para o banheiro fechado. Para a margem, vamos quebrar essa margem. Expanda isso mais uma vez. E para a margem superior, empurre-a para baixo. Exatamente desse jeito. Na verdade, vamos também ao logotipo do menu móvel. Para a margem, vamos quebrar isso. Marque para a esquerda, empurre um pouco para dentro, e acho que estamos bem agora. Publique e vamos revisar as alterações. Parece que precisamos mudar de volta a cor da embalagem do menu Deixe-me selecionar a cor da embalagem do menu e depois isso. E eu quero dar esse pano de fundo aqui. Deixe-me usar meu seletor de cores porque eu já o havia escolhido E cole aqui, onde está essa cor? Publique. Vamos analisar as mudanças. Mudança de controle I, tudo bem. Agora, pelo menos, fizemos algum progresso. Mas agora vamos empurrar isso para o lado direito. Ao selecionar isso, na verdade , selecione esse contêiner que contém o menu coloque tudo , coloque tudo no centro, mas aqui, eles devem estar no lado direito, publique e pronto. Agora precisamos empurrá-los um pouco para dentro. Vamos pegar o recipiente que contém os três. Este contêiner, e vamos fazer com que ele ocupe 95% do espaço. Exatamente desse jeito. Também podemos empurrá-lo para baixo. Vá para avançar, quebre a margem e dê a ela uma margem superior de dez, publique o cabeçalho. Lá vamos nós. Incrível. Agora, você também tem a opção de não incluir esse botão. Você não precisa necessariamente tê-lo aqui. A maneira de ocultá-lo sem excluí-lo da versão para desktop, pois você ainda precisará dele na versão para desktop Se você voltar para o tablet. Podemos apenas dizer que criamos um cabeçalho separado somente para tablets. Se eu selecionar isso, deixe-me selecionar o contêiner que contém tudo e eu o duplicarei. Tudo bem Agora temos dois cabeçalhos, mas podemos dizer que um só deve estar visível em tablets e outro deve estar visível apenas em computadores Por exemplo, para o primeiro, podemos dizer que, enquanto estiver selecionado, vá para avançado, recolha o layout, vá para responsivo, oculte em, vamos ocultar em tablets e telefones. Publique. Para o segundo, se eu selecioná-lo, podemos ir para avançado e dizer responsivo, ou seja , no desktop Edite apenas no desktop, mas mostre em tablets e dispositivos móveis. Pessoas que usam tablets e celulares só verão esse menu, esse cabeçalho As pessoas que usam o desktop só verão isso. Mas se mudarmos para o tablet, observe que o superior está desbotado, o que significa que não podemos editá-lo nesse modo, mas isso pode ser editado Agora podemos nos livrar desse contêiner e agora só temos a publicação de dois contêineres. Vamos revisar as mudanças e agora temos apenas o menu. Se mudarmos para o modo desktop, podemos ver aquele que tinha o botão. Se mudarmos para o modo tablet, só poderemos ver aquele que não tinha o botão. Lembre-se de que dissemos que isso deveria estar visível em tablets e telefones celulares. Se mudarmos para um telefone celular, ele também terá o quê? Isso sem aquele outro botão. Basicamente, é assim que a página responsiva nas telas dos tablets Eu tenho uma tarefa para você, e a tarefa é tornar esta página responsiva em telefones celulares, smartphones Você usará os mesmos princípios que usamos para tornar isso responsivo Mas na próxima lição, darei algumas dicas e truques sobre como concluir essa tarefa e terminar com uma boa página responsiva Então, eu vou te ver em breve. 23. Seção de herói responsivo à tela: Então, agora que temos um cabeçalho responsivo à tela em tablets É hora de ver como torná-lo responsivo em smartphones E agora eu quero dar algumas dicas sobre como tornar o resto da página responsivo Vamos começar com a capacidade de resposta do cabeçalho do celular resposta do cabeçalho do celular Portanto, se optarmos por telefones celulares, claro, isso não é editável Isso é o que estamos editando, e temos dois contêineres dentro desse contêiner externo, então faz sentido fazer isso talvez 50% porque está ocupando 100% da largura atualmente Então, selecionando o contêiner em si, podemos dizer que queríamos ocupar talvez 40%. Esse outro recipiente o menu de hambúrguer também deve ocupar, digamos, 40% Agora, como você pode ver, temos 20% de espaço entre eles. Na verdade, digamos que eles deveriam ocupar 46%, e esse outro também deveria ocupar 46% Lá vamos nós. Agora, o que podemos fazer é selecionar o contêiner que contém esses dois contêineres e, claro, é esse contêiner. Então eu acho que é isso, e podemos dizer que vamos ocupar 98% Na verdade, digamos nove 5% do espaço disponível. Vamos analisar as mudanças, e é assim que elas aparecem nos telefones celulares. iPhone Pro Max, iPad Mini, Surface Pro Samsung, então fica bem em diferentes dispositivos móveis. Agora esse é o cabeçalho. Agora, vamos mudar de marcha rapidamente e trabalhar na seção de heróis, o que fará com que você trabalhe no resto das seções, porque agora você já sabe como tornar diferentes elementos responsivos com base no que fizemos com o Mas quero que trabalhemos nessa seção de heróis muito rapidamente. Então, mudando para o modo tablet. Como você pode ver, é assim a seção de heróis fica no modo tablet, e eu a quero. Eu quero que essa imagem venha antes do texto. Então, o que eu posso fazer é selecionar isso, ir para o layout avançado, na verdade, e eu posso dizer de cima para baixo, desse jeito, e então, na verdade, inverter. Então, temos esse contêiner que tem o texto e agora temos o contêiner que tem a imagem. Esse contêiner, na verdade, o contêiner externo pode ocupar 100%. Esse contêiner aqui pode ocupar 95%, não 95 células pi, e esse outro pode ocupar 95%. Ex desse jeito. Por que isso é 95. Agora, com esse selecionado, o externo, podemos alinhar tudo ao centro Podemos reduzir alguns desses textos. Podemos reduzir o espaçamento aqui em cima, o preenchimento na parte superior, pode dar talvez 50, abaixo 50 Vamos também chegar a isso e colocá-lo no centro, alinhá-lo no centro, isso também E esse recipiente que está segurando, todos os botões. Vamos colocar tudo no centro, sem mais nem menos. Publique e vamos revisar as alterações. Lá vamos nós. Troque de controle I para abrir as ferramentas responsivas Vamos mudar para o iPad mini. É assim que fica em um iPad mini. Se rolarmos, agora você tem o resto para tentar trabalhar, incluindo o rodapé Não se esqueça de otimizar o pé da mesma forma que otimizamos o cabeçalho. Agora, em minhas aulas anteriores, mostrei passo a passo como tornar cada peça responsiva Mas nesta aula, quero deixar uma tarefa que você pode concluir com uma tarefa que você pode base nas informações baseadas nas dicas compartilhei quando estávamos trabalhando na seção de heróis e no cabeçalho Eu acredito que você pode cuidar do resto, e estou muito curioso e ansioso para ver o que você vai fazer, especialmente para esta parte Você pode até decidir se livrar dessa imagem de fundo. Em tablets, porque no momento não está com boa aparência, mas em desktops, está com boa aparência. Você não pode se livrar dele no Desto. Então, como você vai lidar com isso em tablets. Essa é uma boa tarefa para você cuidar, e eu sei que você aprenderá muito ao tentar depurar e solucionar problemas E isso parece um bom lugar para terminar a aula. Mas antes de você ir, tenho mais algumas considerações finais. Quero compartilhar com você, então nos vemos na próxima e última lição. 24. Considerações finais: Parabéns. Você chegou até o fim, e eu quero te agradecer por ficar comigo até agora. Confie em mim Sei que concluir um curso on-line pode ser bastante desafiador porque todos temos agendas lotadas Portanto, o fato de você ter chegado à lição final significa que você leva a sério o aprendizado de elementor web design Portanto, você deve se orgulhar de ter concluído a aula. Lembre-se de que agora você tem as habilidades para criar uma página de destino do zero usando o Elementor Mas isso é só o começo. Você pode usar essas novas habilidades para criar um site completo para sua empresa ou nossos clientes Se você está ansioso para levar suas habilidades elementares para o próximo nível e aprender como criar sites totalmente funcionais, não apenas páginas de destino, não apenas páginas de destino à vontade para conferir meu perfil para aulas mais abrangentes E agora que você terminou de trabalhar na sua landing page, não se esqueça de tirar uma captura de tela dela e compartilhá-la conosco aqui na comunidade Adoramos compartilhar nossos projetos para obter feedback de colegas e professores. E você pode fazer uma captura de tela de toda a sua página de destino usando uma extensão de navegador chamada G Full page Então, basta acessar seu navegador e pesquisar a extensão G de página inteira. Então, se você estiver usando o Firefox, substitua o Chrome pelo Firefox. Vou clicar aqui. Então vá em frente e instale-o. Como você pode ver, o meu está instalado. Então, agora, mudando para sua página de destino, aqui estamos. Você terá esse ícone aqui em cima, diz a página G F, basta clicar nele e ele fará uma captura de tela de toda a página de destino Faça o download como PNG. E agora você pode voltar para a aula. Esta é uma aula anterior que publiquei no mês passado. E na guia Projetos e Recursos, você pode clicar em Enviar projeto. Como você pode ver, os alunos puderam fazer o upload dos projetos em que trabalharam naquela turma. Então, clique em Enviar projeto na guia Projetos e recursos desta aula atual e tenha orgulho de mostrar à comunidade o que você conseguiu criar. Em mais uma coisa, antes de nos separarmos, tenho um pequeno favorito para perguntar. Se você achou essa aula útil e agradável, por favor, reserve um momento para escrever um comentário sobre ela Seu feedback levará apenas alguns segundos, mas pode ser o fator decisivo para a jornada de aprendizado de outra pessoa Quando os alunos se depararem com sua avaliação, isso os ajudará a saber se essa aula é adequada para eles. Então, reserve um momento, abra a guia de avaliação abaixo deste player de vídeo e compartilhe sua opinião sobre a aula. Ao encerrarmos as coisas, quero lhe desejar o melhor em sua jornada elementar. Continue aprendendo, continue criando e continue aproveitando essas ferramentas gratuitas para dar vida à sua imaginação. E mal posso esperar para ver o que você vai fazer a seguir. Até lá, continue incrível, e espero ver você na próxima aula, feliz em projetar a todos.