Novo fluxo de trabalho baseado em contêiner do Elementor (2023): crie uma landing page de site de fitness do zero

1. Introdução: Bem-vindo de volta a outra incrível aula elementar comigo, pode melhorar. É sempre um prazer ter você aqui e estou muito feliz em apresentar a você uma nova aula sobre como criar lindas páginas de destino e sites com o Elementor. Como sempre, se você é proprietário de uma empresa, freelancer ou apenas alguém que deseja aprimorar suas habilidades de web design. Esta aula ensinará tudo o que você precisa saber para criar sites incríveis com facilidade. Elementor é um construtor de páginas do WordPress que revolucionou a forma como os sites são construídos. E agora, com seu novo fluxo de trabalho baseado em contêineres, criar sites com aparência profissional e com ótima aparência em todos os dispositivos nunca foi tão fácil. Neste curso. Eu vou te guiar pelo processo passo a passo de criação de uma landing page para um site de fitness. Usar o Elementor são os recursos e técnicas mais recentes. E faremos isso do zero. Você não precisa ter nenhuma experiência para começar. Ao longo do curso, você aprenderá a projetar e personalizar todos os aspectos da sua página de destino usando uma interface básica e intuitiva de arrastar e soltar, com foco na utilização do fluxo de trabalho do contêiner. Analisaremos os contêineres em detalhes e, quando terminarmos a aula, você terá uma compreensão completa de como trabalhar com os contêineres elementares para criar uma página de destino totalmente funcional. O site fictício de fitness que acabei de mencionar, desde selecionar o esquema de cores perfeito até personalizar a fonte e criar gráficos atraentes, adicionar e redimensionar imagens criar planos de fundo e efeitos de movimento interessantes. Vou guiá-lo por todo o processo para que você possa criar uma página de destino que não só tenha uma boa aparência, mas também ajude sua empresa a se destacar on-line. E, como sempre, usaremos a versão gratuita do Elementor e outras ferramentas gratuitas incríveis. Portanto, você quer que eu gaste algum dinheiro em plug-ins premium para criar essa linda página de destino. Tudo que eu preciso de você é um desejo profundo de aprender Elementor. Se esta é a primeira vez que você me vê, meu nome é Ken e eu tenho usado o elementary para criar sites para mim e para clientes nos últimos cinco anos. Também ensino ensino fundamental para milhares de alunos, assim como você aqui ou o Skillshare no YouTube e em outras plataformas on-line nos últimos dois anos e meio. Então, se você estiver pronto para levar suas habilidades de web design para o próximo nível e aprender a criar belos sites com um novo recurso de contêineres elementares. Junte-se a mim nesta nova aula empolgante e vamos criar juntos uma página de destino incrível. Então, vamos começar. 2. Visão geral do projeto: Agora, a melhor maneira de entender um novo conceito ou reforçar uma habilidade é construir um projeto. Então, ao longo desta aula, como mencionei, trabalharemos em uma página de destino real totalmente para um site de fitness fictício. Então, vamos ter uma visão geral rápida da página de destino. Então, aqui estamos. Esta é a página de destino que será construída com o Elementor. E antes de darmos uma olhada rápida, preciso mencionar que criei isso como uma página inicial de referência enquanto preparava a aula. E a vantagem de ter uma landing page de referência ou site de referência é que ela permite que você veja o que estamos criando. Então, quando chegar a hora de criar essa parte, pelo menos posso mostrar que estamos criando algo assim. Então, juntos, examinaremos esta página e a reconstruiremos do zero. Então, vamos fazer uma rápida rolagem de cima para baixo. Como você pode ver, deixe-me primeiro atualizá-lo. Então, deixe-me recarregar essa página. Agora, como você pode ver, temos essas animações na seção de heróis. E as animações estão em toda a página de destino, não apenas na seção de heróis. Como você pode ver, temos esse reprodutor de vídeo aqui. E quando você clica nela, você pode ver um vídeo aqui dizendo ao visitante o que é essa página de destino ou o que é seu site. E quando clicarem em reproduzir, poderão ver um vídeo. Clique do lado de fora. Então, à medida que rolamos, temos seções diferentes aqui, nas quais você pode listar seus serviços e o usuário pode clicar no botão Saiba mais para ser levado à página como obsceno. Nós temos essa animação. Então, rolando para baixo. E esse e esse depoimento deveriam estar aqui no meio. Devo ter esquecido de alinhá-lo ao centro aqui. Mas é claro que, na página final que estamos construindo, ela estará bem alinhada. Descendo até o rodapé, é uma pasta. E se eu apertar Control Shift, eu imito dispositivos diferentes. Se eu clicar nesse ícone aqui, como você pode ver, a página de destino também ficará incrível em um tablet. Este é o iPad Air. Deixe-me fazer um iPhone 12s pro. Então, essa é a aparência da página de destino em um iPhone 12s pro. E, claro, o menu aqui é um menu de hambúrguer. E quando estamos no modo tablet, ainda é um menu de hambúrguer. Então, vamos rolar para baixo até o final. E é assim que fica em um smartphone. Então, basicamente, como você pode ver, a página de destino parece incrível em todos os dispositivos. É responsivo e veremos como torná-lo responsivo também. Então, em poucas palavras, eu criei isso como uma página de destino de referência. A vantagem de criar a página inicial de referência é que, quando chegar a hora de criar essa seção, pelo menos eu posso mostrar antemão o que estamos prestes a criar, em vez de simplesmente improvisar e pedir que você continue sem que você saiba o que estamos construindo. Então, essa é apenas uma visão geral rápida do que trabalharemos quando terminarmos Você terá essa página de destino totalmente funcional e pronta para ser usada em um site. Então é isso que vamos projetar. E para alcançar essa página de destino, precisaremos usar vários recursos elementares e ajustar várias configurações que fornecerão as habilidades necessárias para criar com confiança suas próprias páginas da web com o Elementor no futuro. E para ajudar você a acompanhar esta aula e reproduzir a mesma landing page. Eu preparei todas as imagens para você e vou fornecê-las em uma pasta chamada assets. Basta baixá-lo na guia Projetos logo abaixo deste reprodutor de vídeo. Agora que você viu no que vamos trabalhar, tenho a sensação de que você está super animado para começar. Então, sem mais delongas, vamos ver você na aula. 3. Instalar o tema Astra: E aqui estamos. Como você pode ver, esta é uma nova instalação do WordPress. Esta é a versão 6.2 do WordPress. E a primeira coisa que eu sempre faço quando estou trabalhando em qualquer projeto WordPress é instalar um tema WordPress. Então, sem perder tempo, vamos aos Temas de Aparência. Agora, é claro, como estamos em 2023, o tema ativo por padrão é 2023. No ano passado, era 2022 e no ano anterior era 2021. Mas não vamos usar esses temas padrão do WordPress. Vamos dizer Adicionar novo. E instalaremos um dos melhores temas do mercado com o nome Astra. Então, vou clicar em Instalar. Astra é um dos melhores temas do mercado WordPress. Tudo bem, então vou clicar em Ativar. E agora Astra é o tema ativo. Como você pode ver, temos esses agradecimentos por instalar a notificação do Astra. Então, deixe-me encerrar isso. E é assim que se instala um tema WordPress. Na próxima lição, vamos instalar o elementor. Te vejo em breve. 4. Instalar o Elementor: Estamos de volta. Agora que temos nosso tema instalado, é hora de instalar o Elementor antes de começarmos a criar nossa página. Então, vamos diretamente para os plug-ins. Podemos clicar em Adicionar novo, mas antes de tudo, eu só quero clicar em plug-ins para que possamos acessar a lista de plug-ins de instalação. E esses são os plug-ins que vieram por padrão quando eu instalei o WordPress. Então, eu só quero me livrar de todos eles. Antes que eu possa fazer isso, vou selecionar esses dois e desativá-los. Selecione a ativação neste menu suspenso. E então vamos dizer Aplicar. Você pode ter plugins padrão diferentes dos meus. Eu sugiro que você exclua todos eles. Agora que estão todos desativados, vou selecionar todos eles clicando nesta caixa de seleção. Então, aqui eu vou para Excluir, aplicar. Ok? Tudo bem, agora, se eu atualizar a página, não temos nenhum plug-in instalado. Então, vou dizer Adicionar novo e serei redirecionado para o diretório de plugins do WordPress. Então, vou procurar por Elementor aqui, Elementor. E seja o primeiro resultado na lista de resultados do elementary.com com mais de 5 milhões de instalações ativas. Clique em Instalar. Agora, é assim que se instala cada plugin no WordPress. Tudo bem, então vamos em frente e aperte Ativar. Lá vamos nós. Então, o Elementor agora está ativado. Agora, antes de prosseguirmos, às vezes, se for a primeira vez que instala o Elementor, você pode ser redirecionado para um assistente de configuração, onde precisará seguir várias etapas para configurar seu site. Porque eu já tinha instalado o Elementor nesse domínio específico. Eu não fui redirecionado para aquele feiticeiro. E caso você tenha sido redirecionado para o assistente de configuração, onde você deve seguir essas etapas. Os próximos minutos serão um processo passo a passo. Eu tinha pré-gravado para uma aula diferente onde mostro como seguir todas essas etapas. Então, vamos lá. Então, vou clicar em Instalar, certo? Então, quando eu clicar em Ativar, serei redirecionado para o assistente de configuração do Elementor. Então, vamos clicar em Ativar. E esse é o feiticeiro aqui. Então, deixe-me diminuir o zoom um pouco para que você possa ver tudo. Como você pode ver agora, temos cerca de cinco etapas para configurar tudo antes de começarmos a usar o Elementor. E o primeiro passo aqui é criar uma conta elementor.com se você quiser aproveitar esses benefícios, mas não precisa ter uma conta elementar para usar o Elementor. Então, vou pular essa parte. Então, a segunda etapa aqui é decidir se você deseja usar o tema hello que é desenvolvido e mantido pela equipe elementar. Mas você também tem a opção de pular esta etapa se tiver outra equipe que queira usar, eu gosto de usar o Astra. Astra Theme é um dos temas mais leves, rápidos e mais amigáveis para SEO do mercado. Então, vou pular essa parte. A terceira etapa aqui é dar um nome ao seu site. E, por padrão, o nome que aparece nesse campo é o nome que você deu ao seu site quando estava instalando o WordPress. Então esse é o nome que dei ao meu site. Eu não vou mudar isso. Então, vou continuar, vou clicar em Escape. Então, se você tiver um logotipo, terá a oportunidade de enviá-lo neste momento, mas isso é algo que você sempre pode fazer mais tarde, enquanto cria seu site, para que possamos pular. E, finalmente, podemos editar diretamente uma tela em branco e começar a criar uma página da web do zero. Ou podemos navegar entre centenas de modelos criados pela Elementor que estão dentro do espaço de trabalho do Elementor ou importar nosso próprio elemento de modelos que talvez tenhamos comprado ou criado anteriormente. Vou pular isso. E, por padrão, quando você clica em Ignorar, ele o leva diretamente para uma tela em branco, onde você pode começar a criar sua página da web. Então, para sair deste lugar, clique neste menu de hambúrguer e em Sair para o painel. Então, somos levados ao final do editor para ver a tela em branco específica que acabamos de deixar. Mas o que queremos fazer é clicar aqui para acessar o painel real, onde temos todas as configurações do Wordpress. E agora, se você olhar no menu à esquerda aqui, notará que temos o Elementor e os modelos. Ambos aparecem após a instalação do Elementor. E se clicarmos em Elementor, podemos brincar com todas as configurações aqui. Mas geralmente você não precisará fazer nenhuma alteração nas configurações padrão do plug-in. Você simplesmente irá diretamente para começar a criar suas páginas da web. Mas, é claro, fique à vontade para conferir para que servem todas essas outras configurações. Se você abrir um modelo aqui, é aqui que você encontrará uma lista de todos os modelos elementares que você possa ter carregado ou criado. Se você quiser criar um novo modelo que possa continuar reutilizando em seu projeto. Você pode adicionar novos. Se você quiser importar um modelo que você baixou, você pode importá-lo aqui. Tudo bem, agora que instalamos o astro, o tema e o Elementor, agora estamos prontos para começar a criar a página de destino. E começamos com a seção de heróis. Essa é a parte superior de qualquer página de destino que o cliente vê quando chega à página. Então, na próxima lição, vamos começar a criar a seção de heróis. Te vejo em breve. 5. Visão geral do espaço de trabalho do elementar: Bem vindo de volta. Então, agora é hora de criar a seção de heróis. E para fazer isso, vamos primeiro dar uma olhada no que é a seção de heróis. Então, pulando para esta página inicial de referência que criei em preparação para esta aula. Esta aqui é a seção de heróis. Ele contém o H1 principal ou cabeçalho da página de destino, que é uma breve descrição do que é a página de destino. Alguns botões de call to action. Temos esse botão de vídeo aqui. Então nós temos essa senhora. Este botão de vídeo aqui abre um reprodutor de vídeo do YouTube. Você pode mostrar o que é seu site. E os visitantes podem jogar e ver o quê. Deixe-me encerrar isso. Então, vamos ver como criá-los. Então, voltando ao nosso painel, vá direto para as páginas. E como essa é uma instalação totalmente nova do WordPress, temos páginas padrão que vêm com cada nova instalação do WordPress. Então, vou selecionar os dois marcando aquela caixa lá. E nesse menu suspenso, mova-os para a lixeira e aplique. Então, agora não temos nenhuma página. Eu direi Adicionar novo. E como essa é nossa página de destino, presumo que seja a página inicial. Então eu vou dizer “casa”, esse é o nome da página. E agora, aqui em cima, temos algumas configurações. Essas são as configurações do Wordpress e essas são as configurações do Astro. Se você não instalou o Astra, não terá essas configurações aqui porque elas vêm com um tema e nós precisamos delas. Então, primeiro de tudo, vamos mudar o modelo aqui para a largura total do Elementor. Assim mesmo, porque queremos que ele corra da esquerda para a direita ou da direita para a esquerda. Então, Elementor, largura total. E isso é tudo o que precisamos nas configurações do WordPress. Agora vamos mudar as configurações do Astro. E aqui temos vários menus suspensos que precisamos abrir. Em primeiro lugar, queremos dizer que a largura total é esticada. É assim que o layout do conteúdo deve ser. Obviamente, essas são as opções que também podem ser usadas, mas eu gosto de usar a largura total esticada. Vamos para a barra lateral. Não queremos que um site ou página de destino tenha uma barra lateral. Então, eu vou sem barra lateral. Sempre podemos alterar essas configurações na própria página ao criá-la usando o Elementor. E eu vou te mostrar onde podemos mudar isso. E, finalmente, vamos desativar os elementos. Não queremos o cabeçalho ou rodapé padrão do Astra porque vamos criar o nosso próprio com o Elementor. Então, com essas configurações definidas, direi Publicar, clique em Publicar novamente. E agora nossa página está publicada. Agora vamos clicar em editar com Elementor e seremos redirecionados para o construtor de front-end, onde podemos começar a criar nossa página. Agora, se esta é a primeira vez que você usa o Elementor, a versão mais recente do Elementor apresenta o que chamamos de contêineres. Antes da introdução dos contêineres, usávamos seções e colunas. E esse é o fluxo de trabalho que você encontrará em todas as minhas classes elementares anteriores. E esse fluxo de trabalho ainda é muito relevante. Você pode optar por trabalhar com seções e colunas, se é com isso que você se sente confortável. Mas agora o elementor nos dá a opção de usar contêineres, e é isso que vamos aprender hoje. Então, eu quero ativar a funcionalidade do contêiner. Então, vou clicar nisso. Isso abrirá uma nova guia que nos levará às configurações em que podemos ativar o contêiner Flexbox. Então, basta ir para o contêiner Flexbox. Esses são os recursos internos e as configurações do Elementor. Ativar o menu suspenso. E então vamos rolar para baixo e salvar as alterações. Tudo bem, então com essas mudanças, vamos voltar para a página. Aqui estamos. E, claro, antes de atualizarmos a página, a interface do editor aqui se parece com a interface antiga que tinha o fluxo de trabalho de seções e colunas. Mas agora, quando atualizarmos esta página para refletir a ativação do contêiner flexbox, isso mudará um pouco. Observe que agora temos o contêiner e as colunas sumiram. Agora, a primeira coisa que precisamos fazer é ter uma visão geral rápida de como os contêineres funcionam. Então, vou arrastar um contêiner aqui. E agora temos esse contêiner aqui que vai da esquerda para a direita. E é isso que faremos em nossa seção de heróis. E dentro desse contêiner, podemos colocar mais contêineres com diferentes tipos de conteúdo. Então, para revelar os elementos arrastáveis, mais uma vez, podemos clicar nesse ícone aqui em cima. E isso revelará os elementos. Mais uma vez, se eu conseguir derrubar todos esses painéis aqui. Esses são elementos diferentes que podemos arrastar para nossa página para criar conteúdo. Então, por exemplo, temos a área profissional. Esses são os elementos que estão disponíveis apenas com o Elementor Pro. Você precisa pagar para usar o Elementor Pro. Mas agora temos os elementos básicos, como o título, o editor de texto de imagem e tudo mais. Então, também temos elementos gerais. Eles ainda são gratuitos. Os elementos Pro têm um pequeno ícone de cadeado no canto superior direito. Como aqui. Podemos arrastar isso e colocá-lo lá em cima. Podemos arrastar isso e soltá-lo lá. Deixe-me desfazer esse controle Z. Então, basicamente, é aqui que vamos pegar nossos elementos e colocá-los aqui e depois fazer alterações neles. Então, voltando ao nosso painel básico e expandindo o layout, o painel de layout contém o elemento de contêiner. E quando começamos, há uma configuração muito importante que precisamos mudar. E eu vou te mostrar o que é isso. Sempre que você passa o mouse sobre qualquer contêiner, você pode selecioná-lo acessando um desses cantos. Então, se, por exemplo eu entrar aqui e arrastar um título para lá, posso selecioná-lo indo até este canto aqui. E agora essas mudanças no título. Se eu quiser selecionar o próprio contêiner que contém esses conteúdos, posso selecioná-lo clicando aqui. E agora são eleitos esses contêineres. E se eu quiser selecionar esse contêiner externo, posso clicar nele. E essas mudanças para conter um aço. Agora, quando passamos o mouse sobre esses seletores aqui, podemos revelar alguns atalhos rápidos que nos pouparão algumas etapas em nosso fluxo de trabalho. Então, se eu entrar nesse menu de hambúrguer, as preferências do usuário, altero isso e ative as alças de edição. Agora, se eu passar o mouse sobre qualquer um desses cantos, temos esse atalho duplicado e o atalho de exclusão. Em vez de ir até isso. Se eu desligar isso, em vez de ir aqui, clique com o botão direito do mouse e depois duplique. Quando isso está ligado. Tudo o que preciso fazer é passar o mouse sobre eles e depois duplicar sobre o Excluir. Agora, voltando ao menu de hambúrguer, também temos mais configurações. Então, se eu clicar nas configurações deste site, teremos cores globais e veremos como trabalhar com cores globais, fontes globais. Podemos mudar o comportamento de todos os telefones no site aqui e de todas essas outras configurações. Mas não precisaremos tocá-los por enquanto. Normalmente, você precisa tocá-los quando estiver trabalhando em todo o site. Mas agora estamos nos concentrando na página de destino. Então, deixe-me fechar essas configurações. E agora essa é uma visão geral rápida do espaço de trabalho elementar. Na próxima lição, agora começaremos a trabalhar com contêineres para criar a seção de heróis. Então, eu vou te ver em breve. 6. Compreendendo contêineres: Olá, bem-vindo de volta. Agora que tivemos uma visão geral rápida do espaço de trabalho elementar, é hora de começar a entender como os contêineres funcionam. Então, deixe-me ir em frente e deletar isso. E então, em vez de arrastar esse contêiner aqui, deixe-me clicar neste ícone de adição aqui. Agora, aqui estão lindas estruturas construídas de um contêiner. Arrastar e soltar aqui é o mesmo que adicionar qualquer um desses contêineres. Mas agora esses contêineres que têm divisões dentro deles são contêineres que têm outros contêineres como modelos. Esses dois não têm nenhum contêiner. E eles são o mesmo que arrastá-lo e soltá-lo lá porque ele não tem nenhum contêiner. Se adicionarmos isso aqui, como você pode ver, é um contêiner. Você pode ver pela fronteira. E tem esse contêiner. E esse contêiner. Se adicionarmos talvez este aqui. Como você pode ver, é o contêiner e depois tem outros seis contêineres dentro. E agora, se eu excluir isso, vamos dar uma olhada rápida nisso. Agora, porque esse contêiner externo contém dois contêineres dentro dele. Se selecionarmos e exibirmos suas configurações, você notará que temos a seção desses itens aqui embaixo, em itens de layout, e temos a configuração de direção. E o que essa configuração de instruções significa é simplesmente como os contêineres dentro de outro contêiner são organizados. Então, linha horizontal significa que eles estão dispostos da esquerda para a direita. Porque agora é isso que temos da esquerda para a direita. Se quisermos que esses contêineres sejam empilhados uns sobre os outros, isso é de cima para baixo. Podemos escolher essa configuração vertical dessa forma. E agora isso está no topo da base. Só para nos ajudar a entender visualmente o que estamos fazendo. Deixe-me colocar um título lá e voltar aqui e talvez soltar um botão lá. Então, agora lembre-se de que ainda são contêineres. E cada contêiner agora contém um elemento. Portanto, isso contém um elemento de botão e um elemento de texto. Então, agora voltando e selecionando este recipiente externo aqui, agora estamos de volta às configurações de alimentação. Lembre-se, fomos da esquerda para a direita. Deixe-me selecionar da esquerda para a direita, da esquerda para a direita e depois de cima para baixo. Mas antes de clicar nisso de cima para baixo, podemos reverter isso. E isso significa que o recipiente à esquerda agora será colocado à direita e o da direita será colocado à esquerda. Então, vamos ver o contrário e agora eles estão invertidos. E agora vamos empilhá-los de cima para baixo. Isso significa que o primeiro contêiner agora estará na parte superior e o segundo estará na parte inferior. E o oposto é de baixo para cima. E agora será revertido. Então é assim que um contêiner funciona. E, claro, não importa quantos contêineres tenhamos. O que realmente importa é a direção que você selecionou para o contêiner externo que contém os outros contêineres dentro dele. Então, se voltarmos aqui e adicionarmos um recipiente aqui, vamos colocá-lo lá dentro. E agora temos três contêineres. E se os organizarmos da esquerda para a direita, selecione isso. Se os organizarmos da esquerda para a direita. Agora temos três contêineres. E se adicionarmos alguns, talvez vamos adicionar um, vamos adicionar um ícone lá. Agora, selecionando o contêiner externo, podemos revertê-los. E o do meio não muda porque, quando os invertemos, ele ainda permanecerá no meio. Agora, à medida que construímos as diferentes partes da página de destino, você verá esses contêineres em ação. E eles nos permitem muita flexibilidade na forma como diferentes elementos fluem em nossa página da web. E isso é apenas uma visão geral rápida dos contêineres. Na próxima lição, vamos ser mais práticos e ver como colocá-los prática para produzir uma bela seção de heróis. Essa é a única maneira de entender como realmente usá-los. Então eu vou te ver em breve. Peça. 7. A Seção de Herói - como adicionar os elementos de herói: Bem vindo de volta. Então, agora vamos colocar em prática o conhecimento teórico que aprendemos sobre contêineres. Então, vamos excluir tudo daqui. E agora vamos observar essas seções por um segundo. Temos esse contêiner aqui que contém o texto e os botões. E temos outro recipiente com a imagem do herói. Então, vamos adicionar um recipiente duplo. Contêiner. Em outras palavras, um contêiner que já tem dois contêineres. Lá vamos nós. Agora, neste contêiner, vamos adicionar um elemento de imagem. Neste contêiner. Vamos adicionar um título. Vamos voltar aqui. Editor de texto, em outras palavras, um parágrafo. Solte-o assim que o indicador aparecer. E então vamos soltar um elemento de botão. Tudo bem, então deixe-me primeiro clicar em Atualizar. E vamos pré-visualizar as mudanças. Então é isso que temos. Muito básico. Então, agora vamos primeiro adicionar uma imagem aqui, uma imagem real dessa senhora. Lembre-se que mencionei, são fornecidas todas essas imagens em uma pasta chamada assets. Logo abaixo desta imagem, basta olhar para a guia de projetos abaixo desta imagem. Então, voltando aqui, selecionarei o elemento da imagem e isso mudará para editar a imagem. Então, essas são configurações desse elemento. Vou selecionar essa caixa lá. Por enquanto. Ainda não tenho nenhuma imagem na biblioteca de mídia, então vou fazer upload de arquivos e selecionar. E agora essa pasta está na minha área de trabalho. Vou apenas clicar nisso. É chamado de ativos. Você pode baixá-lo na guia de projetos. Então, deixe-me abri-lo. Esta é a senhora aberta. E agora está carregado. Então, deixe-me dizer selecione. Lá vamos nós. Então, aí está a dama. A segunda coisa que precisamos fazer é mudar a fonte e a cor da fonte. Então, voltando aqui, se mudarmos a fonte para branca, você não estará visível. que nos leva à próxima etapa, que é mudar o plano de fundo do nosso site. Então, entrando neste menu de hambúrguer, vamos para as configurações do site. Isso revelará todas essas configurações aqui. E queremos ir para Plano de fundo, tipo de plano de fundo. E vamos selecionar essa cor e transformá-la em preto. Eu atualizo isso de volta para o editor. Agora podemos mudar essa fonte aqui. Queremos usar uma fonte chamada Montserrat. Então, para alterar esses textos, selecionamos o elemento do título, e isso mudará para editar o título. E podemos entrar com estilo. Mude isso para branco. Em primeiro lugar, clique em qualquer lugar aqui no editor para se livrar dessa caixa. E então vamos entrar na topografia. E neste menu suspenso, digite Montserrat, selecione meses, Iraque e, como você pode ver, ele foi alterado para monitor rack. A próxima coisa que queremos fazer é alterar o peso da fonte. Eu gosto de usar preto. Isso significa um texto muito ousado porque esse é o nosso título principal nessa página de destino. Vou copiar isso. Você precisará digitá-lo. Vá em frente e copie isso. E enquanto isso ainda estiver selecionado, entre no conteúdo, dentro do título, cole-o lá. Corpo, mente e alma fortes. Vou selecionar esses textos. Insights contínuos, texto em mosaico, cor, mude isso para branco. Clique em qualquer lugar aqui para se livrar disso. E então, é claro, você notará que isso é Roboto. Elemental vem com fontes padrão e, principalmente para os parágrafos, é o Roboto. E isso significa que toda vez que adicionarmos um novo elemento de editor de texto, ele sempre será o Roboto, a menos que o alteremos manualmente. Agora, para evitar a necessidade de alterá-lo manualmente todas as vezes, podemos entrar no menu do hambúrguer, mais uma vez, nas configurações do site. E é aqui que agora mudamos as fontes globais. Primário, isso significa os títulos. Já mudamos esses específicos para Montserrat. Mas observe que é Roboto. Isso significa que toda vez que adicionarmos um título , sempre serão robôs. Então, a menos que digamos especificamente que queremos que seja Montserrat e que seja preto. Vamos para o secundário. Vamos mudar isso para Montserrat. Vamos às mensagens de texto. Agora. Esses são os textos dos parágrafos. Mude isso para Montserrat. Vamos ao sotaque. Mude isso para Montero. Atualize isso de volta para o editor. Agora, por algum motivo, isso não mudou, mas sempre podemos alterá-lo manualmente. Vou descobrir o porquê. Então, vamos entrar aqui. No interior, enquanto está selecionado, topografia do editor de texto, Montserrat. Atualize isso. Vamos revisar as mudanças. Lá vamos nós. 8. A Seção de Herói - Styling the Hero Elements: Agora queremos mudar o botão para ter esses cantos arredondados. E, ao mesmo tempo, precisamos dar esse verde. E eu tenho esse código de cor verde aqui. Deixe-me escolhê-lo na minha outra tela. Entrando aqui. Selecione isso. Também fornecerei esses códigos de cor verde específicos , caso você queira usar isso com o código de cor verde selecionado Selecionarei este botão, estilo coincidente. O botão. Temos topografia. Já mudamos para Montserrat, mas também temos cores. Selecione isso, cole isso lá. E você notará que a cor do botão mudou. Agora, para a cor do texto, vamos mudar isso para preto, e agora é preto. Ao passar o mouse. Queremos que seja de cor branca. Agora, quando passamos o mouse, é branco. Queremos que o texto permaneça preto. Agora também vamos para o estofamento. Queremos adicionar o espaçamento entre a borda do botão e o conteúdo, o texto. O espaçamento aqui. Como você pode ver, é um pouco maior aqui. Então vá para o preenchimento, quebre esse link. Para editar os lados individuais. Sem quebrar o link. Isso significa que sempre que você faz uma alteração em uma das células aqui, isso afeta todos os lados. Quer editar lados individuais. Então desmarque isso. Selecione a esquerda, dê 50 lá, certo? 50. A parte superior e inferior podem ser 20. E agora, para o raio da fronteira, vamos dar 50. Para dar um canto arredondado menor que o número aqui, menos arredondado ele é. Então, se dermos talvez 20, você verá que ele muda para menos arredondado. Se dermos dez, é muito menos arredondado. Se dermos zero, não é arredondado. Então, vamos dar 15. Se você quebrar esse link dessa forma, poderá ter um lado sem o canto arredondado. Atualize isso. Vamos pré-visualizar as mudanças desse jeito. Na verdade, vou deixar assim. Agora, uma coisa que você notará é que temos dois botões. Então, como adicionamos o segundo botão aqui? Se arrastarmos um novo botão aqui, ele virá abaixo desse botão aqui. E isso porque os botões, o editor de texto e o título estão todos dentro de um único contêiner. Então, se eu selecionar o contêiner, se olharmos na direção, eles estão todos dispostos de cima para baixo. Então, todos os elementos estão indo de cima para baixo. Se você quiser que eles vão da esquerda para a direita e selecionem a linha horizontal. Tudo, incluindo o imposto, será reorganizado da esquerda para a direita. Mas nós não queremos isso. Queremos apenas que os botões sejam organizados da esquerda para a direita, não o texto. Então, voltando a essa configuração aqui, cima para baixo, o que fazemos? Podemos usar um contêiner aqui, arrastar um contêiner e soltá-lo lá. Então, vamos arrastar esse botão para lá. E também vamos arrastar esses outros botões dentro desse contêiner quando esse indicador aparecer. E agora os dois estão dentro do contêiner. E agora, quando selecionamos esse contêiner específico aqui, podemos mudar a direção da esquerda para a direita. Esse é o poder dos contêineres. Então, agora selecione este botão, clique com o botão direito do mouse, Copiar. Selecione este botão, cole o estilo. E agora ele herdou todos os estilos desses outros botões. Mas agora queremos que seja de cor branca. Então, enquanto ainda estiver selecionado, vou entrar na moda. Cor. Mude isso para branco. E ao passar o mouse. Ao passar o mouse, ou muda para um pouco de cinza claro? Em Hobo, também queremos que seja para Bob. Então, enquanto ainda está selecionado ao passar o mouse, quero ser tão verde claro assim. E enquanto o mouse estiver selecionado, você verá uma animação ao passar o mouse. Neste menu suspenso. Você pode selecionar qualquer animação que quiser. Eu gosto de Bob e Bob, assim mesmo. Vamos selecionar isso. Ao passar o mouse, passe o mouse sobre a animação. Bob. Tudo bem, então vamos atualizar isso e pré-visualizar as alterações. Tudo bem, agora voltando aqui, deixe-me selecionar este título. Vá para a tipografia de estilo. E vamos mudar o tamanho para talvez em algum lugar lá. Atualize isso. E vamos pré-visualizar as mudanças. Tudo bem, agora você notará que eles não estão bem alinhados verticalmente. O texto e o botão parecem estar um pouco mais elevados do que a garota. Porque se traçarmos uma linha imaginária aqui, elas devem ser um pouco mais baixas. Então, agora, a melhor maneira de fazer isso é usar a justificativa. Portanto, se selecionarmos esse contêiner principal e formos alinhar itens, é aí que entram essas configurações. Se dissermos centro. Agora, tudo em referência ao contêiner externo estará verticalmente no centro. Esse é o espaçamento a partir daqui. E o espaçamento aqui será igual. Simples assim. Atualize isso. E vamos pré-visualizar as mudanças. Lá vamos nós. Mas agora observe que esse conteúdo é empurrado até o fim, quase até o limite, e o nosso é empurrado para dentro. Então, voltando aqui, selecione o contêiner principal e largura do conteúdo neste menu suspenso, selecione a semana inteira. E agora temos um contêiner de largura total que atualiza isso. Vamos revisar as mudanças. Lá vamos nós. Mas agora não queremos que ele toque completamente as bordas. Então, voltando aqui, enquanto isso ainda está selecionado, podemos dizer que talvez 80%. Então, 80%. E agora está ocupando 80 por cento das telas. Chorar. Vamos atualizar isso e pré-visualizar as mudanças. Lá vamos nós. Agora, a próxima coisa que queremos fazer é adicionar esse fundo, essas ondas que agregam algum valor estético a elas. Página de destino. Então, voltando aqui, enquanto isso ainda está selecionado, quero entrar em estilo, plano de fundo e tipo de fundo. Vou selecionar Clássico. E agora temos esse espaço de imagem aqui. Clique nessa imagem porque queremos adicionar essas ondas como plano de fundo da imagem. Então, vou fazer o upload e você ainda encontrará aquela onda aqui. Esta é a seção de heróis de fundo de néon. Eu já o criei no Adobe Illustrator para você. E agora nós o enviamos. Então selecione. E aí está. Mas agora você notará que está cortado aqui. Então, uma coisa que queremos fazer é entrar na posição e dizer centro, certo? Assim. E também queremos dizer que não repita, não repita. Atualize isso. E vamos pré-visualizar as mudanças. Lá vamos nós. Então, agora isso traz um pequeno desafio aqui. Como você pode ver, ela está cortada porque a borda dessa seção chega a 80% da largura da página. E o que queremos é que tudo vá até o fim, assim. Então, precisamos ser criativos aqui. Lembre-se disso, esse contêiner contém dois contêineres principais. Ele contém o contêiner textblock e o contêiner da seção hero. E as configurações estão sendo executadas da esquerda para a direita. Então, se quisermos adicionar um contêiner aqui, precisamos adicioná-lo ali mesmo. Agora temos três contêineres, mas queremos colocar esse contêiner, esses dois contêineres dentro do novo contêiner. Então, vou arrastar isso para lá. E então isso aí dentro. E agora temos esse contêiner que contém esses dois contêineres. Mas, por padrão, tudo está sendo executado de cima para baixo. Então, precisamos fazer com que ele corra da esquerda para a direita. E agora esses dois contêineres estão dentro desse contêiner, que está dentro desse contêiner externo. E se fizermos esse contêiner externo com toda a largura, agora o fundo vai da esquerda para a direita, de ponta a ponta. Deixe-me atualizar isso. E vamos pré-visualizar as mudanças. Tudo bem, então agora o contêiner interno que contém esses dois contêineres ainda está encaixotado. Queremos que seja de largura total, mas agora queremos que seja de 80%. E queremos selecionar o contêiner externo para empurrar esse contêiner interno para o centro. Então, queremos que seja o centro. Atualize isso. E vamos pré-visualizar as mudanças. Lá vamos nós. E agora, pelo menos, estamos começando a chegar a algum lugar. Esse texto é um pouco maior, então vamos selecionar o título, ir para a topografia do site, torná-lo maior assim. Atualize, visualize mudanças como essa. E agora vamos alinhar tudo ao centro verticalmente. Dentro desse contêiner. Assim mesmo, atualize. Pré-visualize as alterações. Agora tudo está alinhado corretamente. Então é assim que se constrói a seção de heróis. Mas agora você pode estar se perguntando essa é uma bela seção Heber, mas não temos uma barra de navegação. Onde está a barra de menu? Onde está o logotipo? Não se preocupe, é isso que faremos. Na próxima lição. Vamos ver como adicionar a barra de navegação, que contém o menu e o logotipo. Exatamente assim. O logotipo e muitos. Então, eu vou te ver em breve. 9. A Barra de Nav - instale o ElementsKit: Bem vindo de volta. Então, agora já trabalhamos na seção de heróis. Claro, eu sei que não adicionamos esse botão de vídeo aqui, mas faremos isso, não se preocupe. Mas o que queremos fazer é criar o napa. Então, voltando ao nosso editor, esta é a página de destino, mas não é aqui que criaremos o napa. Então, eu só quero sair daqui. Voltaremos aqui para construir o resto da página, todas essas outras partes. Mas, por enquanto, vamos sair desta página. Então, vou clicar neste menu de hambúrguer. E aqui embaixo, há uma saída. Quando você o chuta pela primeira vez, ele oferece um menu suspenso para selecionar para onde você sempre quer ser redirecionado toda vez que clicar em Sair. Então, vou escolher o painel WP. Isso significa que toda vez que você clicar em sair aqui, você sempre será redirecionado para o painel. Isso só acontece uma vez, então vou selecionar o painel WP e depois aplicar. Em primeiro lugar, deixe-me cancelar e atualizar as alterações corretas. Como eu já selecionei para onde quero ser redirecionado, se eu clicar em Sair, você não abrirá esse pop-up. Só vai me levar até o painel. Então, agora que já sabemos que esta é a versão 6.2, deixe-me descartar isso. E agora, para criar essas barras de navegação, precisaremos instalar outro plugin, que é uma extensão do Elementor com o nome elements keep light plugin. Então, vamos voltar para o nosso painel. Plugins, adicione novos. E aqui eu quero pesquisar o Elementor. Elementor. E agora você notará, é claro, além do Elementor, que existem muitos outros plug-ins baseados no Elementor. Esses são plug-ins criados por desenvolvedores terceirizados para ampliar o poder e os recursos do Elementor. Elementor é desenvolvido pela elementary result, mas os complementos essenciais para Elementor são desenvolvidos pelo desenvolvedor WP os complementos premium pela leap 13. E o que precisamos é que os elementos mantenham os complementos elementares do WP atendidos. Então, vou clicar em Instalar agora. Também precisaremos dos efeitos de cabeçalho adesivos para o Elementor, e mostrarei onde eles serão usados. Para. Agora, vamos anotar instalá-lo. Nós o instalaremos quando precisarmos. Agora que o kit de elementos está instalado, vamos clicar em Ativar. Lá vamos nós. Agora temos a luz de tecla Elements instalada, e aqui está na nossa barra lateral. Portanto, o kit de elementos selecionados será redirecionado para o assistente passo a passo, onde podemos configurar o plug-in ou complemento. A primeira etapa aqui é selecionar qualquer uma dessas três opções aqui. Basicamente, o que essas opções significam é, dependendo da opção selecionada aqui. Alguns dos widgets e recursos aqui não estarão ativos e disponíveis para você no front-end enquanto você estiver usando o Elementor. Por exemplo, se eu selecionar Avançado aqui, veja o que acontece com alguns desses widgets. Por exemplo, o construtor de widgets agora foi ativado por padrão. Isso significa que quando eu estiver usando o Elementor no front-end para criar e construir uma página que criamos , estará disponível para mim no front-end. E outros vários recursos aqui embaixo também. Então, eu gosto de usar o avançado. Então, vamos clicar na próxima etapa. Próxima etapa. Próxima etapa, compartilhe alguns dados de diagnóstico não confidenciais. Em seguida, no máximo, salve as alterações. Agora, o kit de elementos está pronto para uso. Deixe-me me livrar disso. 10. A Barra de Nav - adicione os elementos de Navbar: E agora você notará que, no kit Elements, temos o que chamamos de cabeçalho e rodapé. É aqui que queremos ir, clique em Cabeçalho e Rodapé. E é aqui que podemos criar cabeçalhos e rodapés diferentes que aparecerão em páginas diferentes, dependendo de nossas configurações. Então, vou adicionar novos. Vamos chamá-lo de cabeçalho. O tipo é cabeçalho. Só podemos ter um cabeçalho ou rodapé. As condições são que eu quero que ele seja visível em todo o site. Agora, se você comprar a versão Pro desse plugin, poderá decidir que deseja que esse cabeçalho específico esteja disponível ou visível somente em páginas específicas. Então, eu quero que ele fique visível no lado anterior e eu quero que ele seja ativado quando você estiver fazendo alguma manutenção e você não quer essa barra de navegação fique visível enquanto você está fazendo essa manutenção. Você pode desativá-lo. Então, salve as alterações porque eu quero que elas fiquem visíveis. Vou deixá-lo como ativado e salvar as alterações. E lá vamos nós. Então, agora está ativo. Digamos que edite. O conteúdo editado será redirecionado para o front-end, onde agora podemos criá-lo visualmente. Aqui estamos. Agora você notará que não temos a seção de heróis que já criamos. E isso porque deixamos parte em que estávamos editando a seção de heróis. Agora, esta é a parte em que estamos editando a barra de navegação. Então, vamos adicionar um recipiente duplo, contêiner. A estrutura, essa conterá o logotipo. Então clique nesta imagem de adição porque nosso logotipo é essencialmente uma imagem. E enquanto estiver selecionado, isso mudará para editar a imagem. Indo aqui, faça upload de arquivos, selecione arquivos. Aptidão física. Esse é o logotipo que criei para este projeto. Lá vamos nós. Selecione isso. A próxima coisa que queremos fazer é adicionar nosso menu. Então, vamos entrar aqui e dizer mais. E aqui, vamos digitar nav. Agora, você notará que precisamos navegar pelos elementos. Temos a navegação por elements kid e agora pelo Elementor Pro. E não podemos usar esses elementos de navegação do Elementor Pro porque ele tem esse ícone de cadeado aqui. É um elemento profissional. Então deixe-me arrastar e soltar isso aqui. E agora, quando você o coloca lá, enquanto ainda está ativo, é claro que os elementos de edição recebem o menu Nav. Essas são suas configurações. E você notará que a primeira coisa aqui é selecionar um menu, um menu como este. E esse menu é composto por itens de menu. E esses itens de menu são, na verdade, páginas da web, a página sobre, página de vídeos, a página nítida e a página de contato. Isso significa que precisamos criar várias páginas da web para serem nossos itens de menu. Então, voltando aqui, vou clicar em Atualizar. E então vamos pré-visualizar as mudanças. E é claro que não temos um menu aqui. Então, voltando aqui, eu quero voltar para o painel, então eu vou sair. E vamos entrar nas páginas para criar algumas páginas. Já temos a página inicial. Então, vou clicar com o botão direito do mouse e abrir o link em uma nova guia. Vou fazer isso de novo e de novo. Então, agora, indo para essas guias, vamos mudar isso. Vamos falar sobre isso. Não estamos realmente preocupados com essas mudanças publicadas por enquanto. Só queremos que alguns itens do menu sejam publicados. Vamos para os próximos vídeos publicados. Vamos para a loja. Publique. Muitos também têm o contato publicado. Agora, voltando aqui, se eu atualizar o painel, agora temos todas essas páginas. Agora, a próxima coisa que precisamos fazer é entrar nos menus de aparência. E é aqui que criamos o menu que tem todas essas páginas como itens de menu. E você notará aqui à esquerda que essa parte está desbotada porque ainda não criamos um menu. Crie seu primeiro menu abaixo. Então, vou chamá-lo de menu de fitness. E eu vou fazer dele o menu principal. Em seguida, Criar menu. Agora que ele foi criado, podemos adicionar itens de menu da coluna da esquerda, aqui mesmo. E se eu fechar isso, os itens do menu podem ser páginas, que é o que vamos usar. Mas também podem ser postagens como postagens de blog. Podem ser links personalizados. Podemos expandir isso e ter um link específico aqui. E então os textos do link talvez saibam mais. E podemos dizer Adicionar menu, ou precisamos fornecer um link, vou colocar um hash. Então, agora nós adicionamos isso lá. Ou também podem ser categorias. Mas, no momento, queremos que os itens do menu sejam páginas. E se expandirmos isso, aqui estão todas as nossas páginas. Então, deixe-me selecionar tudo e adicionar ao menu. Vamos removê-los. Saiba mais sobre links personalizados porque não precisamos dele. E vamos entrar e reorganizar esses itens do menu. Casa. Entre em contato porque está no lado mais à direita. Página inicial sobre vídeos nítidos. Página inicial sobre vídeos nítidos. E agora estamos aqui, acabou. Salvar menu. Portanto, nosso menu de fitness está salvo. Ele foi atualizado com esses itens de menu. Então, agora voltando para a pasta de cabeçalho do kit de elementos, cabeçalho, edite com o Elementor porque já começamos a trabalhar nele. Se selecionarmos o item de navegação que adicionamos a essa metade e acessarmos o menu Selecionar. Agora temos o menu de fitness disponível para nós. Se selecionarmos isso. Nosso menu foi adicionado. 11. A Barra de Nav - Styling the Elements: Mas, por padrão, tudo é preto, então precisamos, enquanto ainda está selecionado, usar o estilo. Deixe-me primeiro fechar o painel de invólucro do menu. Vá para dentro. Menu, estilo do item, item, cor do texto. Vamos torná-lo branco. Lá vamos nós. Vamos voltar ao conteúdo e dizer a posição horizontal do menu, certo? Isso o empurrará para o lado direito. Vamos voltar à moda. No entanto, queremos que seja tão verde. Então, deixe-me usar essa cor verde. Copie isso. Enquanto isso ainda estiver selecionado, quero reduzir o invólucro do menu, o estilo do item do menu e a cor dos conjuntos de itens, no entanto, queremos que seja verde. E quando está ativo, ainda queremos que seja tão verde. Eu vou dizer Atualizar. E vamos pré-visualizar as mudanças. Lá vamos nós. Mas agora, é claro, esse logotipo é muito grande. Deixe-me fechar essas abas. Então, voltando aqui, selecione o recipiente externo e vamos deixá-lo em toda a largura. Atualize isso. Vamos pré-visualizar as mudanças. E agora parece que está desligado. Então, qual é a solução aqui? A mesma solução que usamos para a seção de heróis quando colocamos esses dois contêineres dentro um contêiner que estava dentro do contêiner externo. Vamos ver como fazer isso. Então, entrando aqui, vamos arrastar um contêiner aqui. Porque lembre-se de que o contêiner externo tem tudo empilhado da esquerda para a direita. E agora vamos arrastar o logotipo dentro deste novo contêiner. E também vamos arrastar esses contêineres para dentro desses outros contêineres. Isso significa que ele deve estar abaixo do logotipo. Simples assim. Tudo bem, então agora vamos selecioná-lo. Enquanto ainda está selecionado. Vamos selecionar arranjos da esquerda para a direita como esse. Enquanto ainda estiver selecionado, vamos deixá-lo em toda a largura. E vamos selecionar o contêiner do logotipo e torná-lo com 20% de largura. Assim. Na verdade, vamos fazer com que seja de 10 a 10 por cento de largura. E agora você notará que temos esse espaço aqui porque não atribuímos uma porcentagem específica a isso. E deveria ser 90 porque isso é dez por cento. O contêiner do logotipo é de dez por cento, então eles devem ocupar os 90% restantes, 90% assim. Atualizar. E vamos pré-visualizar as mudanças. Então lá vamos nós. Mas agora, em nosso site de referência aqui, eles não estavam muito próximos das bordas. Então, voltando aqui, podemos fazer esse contêiner interno que contém esses dois contêineres. Largura total, mas 90%. Agora, é claro, começa da esquerda para a direita. Então, selecionando o recipiente externo, podemos colocar tudo nele no centro. Simples assim. Agora está bem no meio. Atualizar. E vamos pré-visualizar as mudanças. Simples assim. Agora é assim que se cria o menu de navegação. Voltando aqui, porque terminamos com a Navbar. Vamos sair para o painel. Vá para dentro das páginas. Página inicial porque começamos a editá-la com o Elementor. Tem essa opção. Se você nunca editou uma página com o Elementor antes, você não terá essa opção. Então edite com Elementor. E lá vamos nós. Agora observe que esta parte é editável, a seção do herói. E o Napa está visível em nossa seção de heróis ou em nossa página de destino em toda a página. Mas não é editável. E isso porque não é aqui que estávamos editando ou não foi aqui que criamos o menu de navegação. Então, deixe-me pré-visualizar as mudanças. Lá vamos nós. É claro que podemos empurrá-los para fora. Então, deixe-me primeiro encerrar isso. Enquanto estamos aqui, podemos simplesmente selecionar esse contêiner interno e torná-lo 90%. Assim como a barra de navegação. Atualize isso. E vamos pré-visualizar as mudanças. E lá vamos nós. Então, agora, olhando para eles e comparando-os com nossa página inicial de referência, quase parece. Idêntico. Agora vamos adicionar esse reprodutor de vídeo antes de encerrá-lo. Então, voltando aqui, vou abrir os elementos e depois pesquisar o vídeo. Vídeo. E o que queremos é esse kit da Elements. Então arraste e solte lá. Queremos deixá-lo ali mesmo. Em seguida, arraste-o até n. Atualize isso. Visualize as alterações. E lá vamos nós. Então, no entanto, este fica verde. Mas, por padrão, o que adicionamos nem mudará de cor. Então, vamos resolver isso enquanto isso é selecionado. Vamos ao estilo. Onde está? Estilo de botão, cor brilhante. Antes de tudo, vamos dar a ele essa cor verde. Tipo de plano de fundo. Ao passar o mouse. Vamos torná-lo verde. Simples assim. Atualizar. Visualize as alterações. Queremos que esse ícone fique preto ao passar o mouse. Essa é a cor do texto ao passar o mouse. Vamos torná-lo preto, mesmo em seu estado normal. Vamos torná-lo preto. Atualize, visualize as alterações. Agora está preto ao passar o mouse. Na verdade, eles não gostam disso. Verde e rosa. Eu não acho que eles rimam. Então, deixe-me mudar a cor do brilho de volta para rosa Update. E a razão pela qual escolhi a cor padrão rosa ruim é porque ela a destaca. Quase todo o resto é branco e verde, mas isso é rosa, então realmente se destaca. E essa onda luminosa também chama a atenção do espectador e faz com que ele queira clicar nela. E se você clicar nele, é claro que agora tem aquele vídeo. Enquanto ele ainda estiver selecionado, você pode adicionar um URL ao seu vídeo aqui. Então, se você tem um vídeo do YouTube, é aqui que você pode adicioná-lo. E quando as pessoas clicarem nele, ele reproduzirá esse vídeo. E é assim que se adiciona o menu de navegação. No próximo vídeo, vamos ver como começar a criar o restante dessas seções. Então, eu vou te ver em breve. 12. Seção de corpo 1 - parte 1: Estamos de volta. Agora que terminamos com a seção de heróis e a barra de navegação, é hora de começar a criar essas diferentes seções que compõem o corpo da página de destino. Então, vamos começar com essa rua aqui. Então, voltando ao nosso editor de landing page, logo abaixo da nossa seção de heróis, vamos adicionar um contêiner. Simples assim. E dentro desse contêiner, é claro, vamos adicionar um texto. Eu quero adicionar um editor de texto, não um título, simplesmente assim. Agora, deixe-me pegar esses textos aqui, é claro que agora você digitará o texto que quiser. Então copie esse verde de volta aqui. Vou colá-lo lá. Mas eu não quero colá-lo com sua formatação, então vou desfazer isso. E então Control Shift V, que cola o texto dentro desses editores sem nenhuma equipe anterior. Tudo bem, então agora , enquanto ainda está selecionado, vou entrar no estilo mudá-lo para preto. E vou mudar esse fundo do contêiner externo para aquele verde. Então, deixe-me selecionar esse botão, estilo coincidente. Selecione este verde. Copie isso e volte para este contêiner aqui. Estilo, tipo de fundo, cor clássica. Vou colar aqui. Então agora é aquele verde. A próxima coisa que eu quero fazer é, claro, antes de tudo, selecionar esses textos. Como você pode ver, ele tem algum preenchimento ou margem que vem por padrão. Então, enquanto o texto estiver selecionado, vá para Avançado. Remova, quebre esse link. E esse link também. Antes de tudo, quero entrar no estilo e centralizá-lo assim. E depois tipografia. Vamos aumentar o tamanho até esse ponto. Talvez entre no nível avançado enquanto ele ainda está selecionado para o preenchimento inferior, para a margem inferior. Vamos reduzi-lo desse jeito. E vou ver se está espaçado. Então, embora ainda sejam selecionados locais em andamento, topografia, espaçamento entre letras, vamos espaçar assim. E não se preocupe se estiver embrulhando. Tudo o que precisamos fazer é selecionar o externo, selecionar o recipiente externo. Em Layout, vamos deixá-lo em toda a largura. Simples assim. Vamos aumentar a margem superior. Agora vamos reduzir ainda mais a margem inferior até algum lugar lá. Atualize isso. É claro que precisaremos adicionar alguma margem entre a seção do herói nesta faixa. Então, selecionando o contêiner externo , margem avançada, remova esse link para que possamos editar apenas uma célula, a célula superior. Vamos supor que talvez 15150 seja demais. Cem. Atualize essa pré-visualização das alterações. Lá vamos nós. Então, nós temos essa faixa. E, claro, podemos aumentar o quanto quisermos, podemos dar o máximo de preenchimento que quisermos no próprio recipiente externo. Então, preenchimento externo do contêiner, vamos quebrar isso. E vamos dar um estofamento superior e inferior, talvez 20, inferior, 20 na parte superior, assim. Atualizar. Tudo bem, então aí está. Deixe-me apenas pré-visualizar as alterações. Aí está. Mas agora você notará que esse fundo está um pouco cortado pela borda do contêiner que contém tudo aqui. Este aqui, como você pode ver, está cortando parte disso. Então, vamos selecionar esses contêineres. E abaixo da altura, altura mínima, vamos escolher a altura da janela de visualização. Atualize isso. E vamos pré-visualizar as mudanças. Tudo bem, isso não muda isso. Então, podemos apenas dizer 100%. Vamos tentar isso. Isso é tentar fazer com que seja 100% da tela. Então, com isso, vamos reduzir a margem na parte superior. Mas na parte inferior, na verdade, nos livramos desse carrinho. Vamos tentar talvez 80% da altura da janela de visualização. Pré-visualize as alterações. Acho que é muito melhor, mas podemos fazer muito melhor. Vamos tentar 70 por cento. Atualize isso. Vamos pré-visualizar as mudanças. Pré-visualize as alterações. Lá vamos nós. Então, agora selecionando isso, poderíamos realmente reduzir a margem superior para talvez 50. Atualize isso. É tudo uma questão de brincar com esses números até que pareçam bons, na sua opinião? Sim. Então, porque nós o queremos porque eu queria que ficasse visível quando você estiver na página de destino. Então é isso. Então, basicamente, é assim que se cria essa faixa. Na próxima lição, vamos criar essa seção aqui. E se eu atualizar esta página, deixe-me atualizá-la. Você verá essas animações. Esse cara entra junto com os textos, vai ver como fazer tudo isso. Então, nos vemos na próxima aula. 13. Seção de corpo 1 - parte 2: Estamos de volta. Agora é hora de ver como criar esse cara aqui junto com esse bloco de texto. Uma coisa que você notará é que o fundo não está se movendo. À medida que rolamos, essas ondas permanecem fixas em um só lugar. Então, como podemos alcançar esse resultado? Vamos fazer isso primeiro antes de começarmos a criar esse cara. Então, voltando aqui, quando rolarmos, você notará que nossas ondas estão se movendo com o contêiner. Então, selecionando o contêiner que tem essas ondas como plano de fundo. E, entrando no estilo, temos o anexo e ele está configurado como padrão. Podemos consertá-lo em um só lugar. E agora, quando rolamos, está fixado nesse ponto. Atualize isso. Vamos pré-visualizar as mudanças. Agora, se rolarmos para cima, não temos conteúdo suficiente abaixo deles para rolar. Esse é o último conteúdo que temos aqui. Então, vamos adicionar uma seção. Então eu vou até aqui e clicar no sinal de mais. E vamos acrescentar, mais uma vez, que eu só quero adicionar um contêiner a menos contêiner. Então, assim mesmo. E agora vamos adicionar o primeiro contêiner que deve conter a imagem. Deixe-me adicionar um texto fictício aqui. E agora vamos adicionar mais um contêiner. Então, vou arrastá-lo e soltá-lo fora do contêiner que acabamos de criar. Agora temos dois contêineres, mas eu quero que esse contêiner que contém o texto fique depois do contêiner de imagem. Então, deixe-me arrastar esse contêiner de imagens antes do contêiner de textos, sem mais nem menos. Agora que temos essas pilhas assim, vamos até o contêiner que as contém. Este contêiner externo. E vamos mudar a direção da esquerda para a direita, desse jeito. Então, aqui, vamos adicionar um elemento de imagem. Bem, isso é ativo. Eu fiz o upload dessa imagem com esse cara, então vou selecioná-la. Lá vamos nós. E aqui, queremos dizer que fique mais forte mais rápido. Então, vou pegar isso, selecioná-lo abaixo do título do conteúdo. Cole isso aí. E observe que, quando adicionamos títulos, eles são pretos de Montserrat, seja, muito fortes, em negrito, e é isso que definimos como nossa fonte global para os títulos. Então, enquanto ainda está selecionado, digamos estilo, cor do texto, branco, um pouco maior. Este é um editor de texto, texto fictício, então vou dizer que adicione um editor de texto, Lorem Ipsum, por padrão. Enquanto ainda estiver ativo, vamos estilizar a cor do texto. Mude para branco. Simples assim. E temos essas listas aqui. Então, voltando aqui, selecione a lista de elementos e é uma lista de ícones. Então, vou arrastar a lista de ícones abaixo dela. E se eu clicar no primeiro item, posso alterá-lo para o que eu quiser. O que é isso? Levantamento de peso. Então, levantamento de peso, treinamento de resistência, musculação, construção, técnicas de musculação. E você também pode fazer as alterações aqui , em vez de aqui. Portanto, o item alugado número três, listado dois , número três, pode simplesmente selecionar esse texto. Treinamento de resistência. E, claro, agora você notará que podemos mudar os ícones aqui. Então, se eu selecionar isso, vamos digitar para verificar. Porque eu queria marcar a caixa, tudo bem. Insira, marque a caixa de seleção, feche isso , expanda isso, entre no ícone. Verifique. Inserir. E, finalmente, o trabalho pesado. Verifique. Você pode começar com isso. E lá vamos nós. Agora vamos fazer. E você pode adicionar, como você pode, adicionar mais itens aqui, se quiser. Então, abaixo, adicionamos um item, talvez sessões de ioga. Também diz cheque. Insira e agora temos sessões de ioga. Agora, para mudar as cores, entraria no ícone de estilo. Vamos mudar para esse verde. Acho que são brancos ou verdes. Então, selecionando-os, selecionando esses contêineres dentro do estilo, selecione a cor, copie. Selecione o estilo da lista. Ícone. Cor. Ao passar o mouse. A cor deve ser branca. Simples assim. Agora, vamos também fazer algo sobre os textos. Em estado normal. Queremos que seja branco. E ao passar o mouse , queremos que seja verde. Simples assim. Atualizar. E agora, é claro, assim como na seção de heróis, queremos que tudo seja equilibrado verticalmente para que tenhamos o mesmo espaçamento aqui embaixo e aqui em cima. Esses textos parecem estar elevados ao topo e nós os queremos no meio em algum lugar aqui. Então, selecionamos o contêiner que contém esses dois contêineres. Vá até os itens, alinhe-os e alinhe-os no centro verticalmente, desse jeito. E agora, é claro, agora você notará que essa imagem é maior e está quase na borda. E isso significa que o contêiner em si tem toda a largura. Então, vamos selecionar a largura total desse contêiner para largura, assim. E agora vamos adicionar seu plano de fundo. Então, entrando no estilo clássico, acho que já tinha enviado esses planos de fundo. É esse plano de fundo aqui. Fundo de néon à esquerda. Eu já tinha feito o upload. Portanto, traga insights para a biblioteca de mídia. Aqui está. Selecione. E agora vamos lá. Atualize, visualize as alterações. Rolando para baixo. Lá vamos nós. E observe que o padrão está se repetindo e não queremos isso. Isso é o que acontece por padrão. Portanto, repita os padrões, não. Sem repetir. Atualize isso. Pré-visualize as alterações. Role para baixo. E agora não está se repetindo. Lá vamos nós. Espere, acabei de notar alguma forma perdemos o editor de vídeo. Eu não sei o que aconteceu com ele. Então, é claro que é muito fácil adicioná-lo novamente. Então, me dê um momento. Vídeo. Ele é criança. Ali mesmo. Eu nem vou trabalhar nisso porque você já sabe o que fazer. Então, deixe-me atualizar isso. E então vamos pré-visualizar as mudanças. Lá vamos nós. Então, rolando para baixo. Agora esse contêiner está muito perto do riacho. Queremos que eles sejam separados. Então, vamos selecionar o contêiner em si. Avançado. Quebre esse link. Vamos dar 150. Margem superior. Então, isso o afasta completamente. E eu sinto que há muito espaço aqui em cima. Sinto que precisamos empurrar esses elementos um pouco para cima. Então, selecionando esse contêiner que contém tudo avançado, margem, topo, vamos reduzir esse espaçamento dessa forma, talvez menos 85, dependendo de suas preferências. E vamos pré-visualizar as mudanças. Lá vamos nós. Acho que agora está muito bem posicionado. Então, rolando para baixo. Agora, vamos corrigir esse plano de fundo antes de chamá-lo de embrulho. Então, a seleção desse anexo em estilo de contêiner foi corrigida. Assim mesmo, atualize. Pré-visualize as alterações. Rolando para baixo. Lá vamos nós. Então, agora, é claro, é muito fácil de adicionar. Esquecemos de adicionar o botão. E o botão tem um ícone, então esquecemos de adicionar esse ícone. Então, selecionando esse botão no ícone Conteúdo, podemos selecionar na biblioteca de ícones. Eu quero essa inserção de seta. E podemos colocá-lo depois. Então eu posso me posicionar depois, desse jeito. E eles dizem: junte-se a nós hoje, veja as aulas. Então, enquanto isso está selecionado e o texto do conteúdo do texto, junte-se a nós hoje. E isso deveria dizer cursos ou aulas. Vamos fazer. Agora. Vamos duplicar isso. Então, vou apenas duplicar esse botão arrastando. Agora vou deixá-lo ali mesmo. E, claro, você notará que temos muito espaço aqui em cima. Então, vou selecionar este texto com margem avançada na parte inferior. Vamos reduzi-lo até isso, até esse ponto, e depois selecionar lista, lista, avançada, quebrar a margem inferior. Vamos aumentar isso para separar o botão. Atualize isso. E vamos pré-visualizar as mudanças. Rolando para baixo. Lá vamos nós. Então essa seção agora está completa. Como você pode ver, os princípios permanecem os mesmos. As mesmas coisas que fizemos na seção de heróis ou as mesmas dicas e truques que estamos usando para criar essas outras seções. Agora, é claro, vamos continuar e criar a próxima seção aqui, usaremos os mesmos princípios, mas a imagem estará do outro lado. Vamos fazer isso na próxima lição. Te vejo em breve. 14. Seção de corpo 2 e 3: Tudo bem, então vamos voltar aos negócios. Então, agora acabamos de criar essa parte. Vamos continuar criando esta seção aqui. Então, voltando ao nosso editor. Então, vamos adicionar um recipiente duplo como esse. E aqui, na verdade, podemos simplesmente arrastar, podemos simplesmente duplicar esse contêiner aqui desse jeito. Em seguida, arraste-o aqui ao lado daquele outro contêiner. Vamos nos livrar disso. E também podemos duplicar isso. E arraste um saco misto desse jeito. Então, vamos nos livrar disso. É assim que o elemental facilita as coisas para você. Você pode simplesmente duplicar e reutilizar elementos. Então, é claro, agora selecionando o contêiner externo avançado. Vamos adicionar uma margem superior de 150 para uniformidade. E enquanto isso ainda estiver selecionado, vamos entrar no layout e alinhar tudo ao centro, verticalmente. Selecione esta imagem aqui para que possamos substituí-la. Vou colocar essa senhora aqui. Aberto. Lá vamos nós. Então aí está nossa garota. Ela tem antecedentes? Claro que sim, mas esse é um plano de fundo mais simples. Então, entrando aqui e selecionando fundo do estilo de contêiner externo, clássico, vamos selecionar esses arquivos de upload em segundo plano. Esses são os elementos BG. Esse é o plano de fundo que criamos para essa seção. Lá vamos nós, selecionamos e agora temos aquele belo plano de fundo ali. Obviamente, podemos aumentar o preenchimento, o espaçamento entre a borda aqui e o conteúdo na parte superior e inferior. Então, selecionando o recipiente externo. Vamos para o acolchoamento, quebre isso. Na parte superior, vamos fazer 50 e na parte inferior, 50. Então, agora temos aquele bom espaçamento ali. Enquanto ainda está selecionado. Volte para o layout. Agora vamos entrar no estilo de anexo, fixo. Agora, enquanto estamos rolando, parece que há uma única atualização em segundo plano. Vamos pré-visualizar as mudanças. Lá vamos nós. Então, vamos começar a navegar. Simples assim. E lá vamos nós. Mas é claro, deixe-me mudar um pouco esses textos e o tamanho do texto é maior do que o que temos no nosso. Então, selecionando isso, entre no conteúdo, cole isso aí, um homem, vamos aumentar o texto entrando no estilo. Tipografia. Acho que esse é o tamanho perfeito para o corpo perfeito. Então, enquanto isso ainda estiver selecionado, clique com o botão direito do mouse em Copiar e selecione esse estilo de colar com o botão direito. Então, fica do mesmo tamanho que esse. Se fosse talvez uma cor diferente, essa também seria essa cor. Tudo bem, então vamos atualizar isso. E, claro, agora, na próxima lição, nós os teríamos criado. Mas em vez de esperar até a próxima aula, vamos apenas duplicar isso. Vamos duplicar esse contêiner lá, desse jeito. Agora temos que arrastar isso para baixo desse contêiner. Agora está aqui e ainda está a cópia aqui. Selecione essa imagem. Precisamos dessas luvas. Então eu vou aqui. Luvas selecionadas. Selecione. Lá vamos nós. Boxe de classe mundial. Copie isso. Selecione isso. Então aqui está o título, boxe de classe mundial. Agora, é claro, você pode alterar todo esse conteúdo a seu próprio critério. Personalize-o de acordo com suas necessidades específicas. Estamos apenas analisando como criar o layout cada elemento na página de destino. Tudo bem, agora temos esses serviços, e é nisso que vamos trabalhar na próxima lição. Então, antes de tudo, deixe-me dizer esta atualização. Vamos ver o que temos no sim, o plano de fundo aqui ainda é o mesmo que o plano de fundo disso. Simples assim. Então, vamos pré-visualizar as mudanças. Role para baixo. E lá vamos nós. Então, na próxima lição, vamos ver como criá-los. Vamos ver como criar esses recursos ou serviços antes de chegarmos aos depoimentos. Então, te vejo em breve. 15. Seção de serviços: Ei, bem vindo de volta. Então, agora é hora de criar essa seção de serviços ou seção de recursos. E essa parte é um pouco mais complexa do que as anteriores porque envolve contêineres dentro de contêineres , dentro de contêineres. E então vamos ver como fazer isso. Então, voltando aqui, vamos primeiro criar o contêiner que contém tudo. Então, há um contêiner que contém todos esses itens. Então, primeiro, vamos criar isso. E eu só quero começar de um contêiner em branco como esse. Vamos entrar com antecedência. Quebre esse link. Margem máxima de 150, sem mais nem menos. E vamos atualizar isso. E enquanto está sendo atualizado, deixe-me duplicar esse título porque precisaremos de um título lá dentro. E também essa breve descrição abaixo do título. E enquanto isso ainda estiver selecionado, vou entrar no estilo alinhá-lo ao centro. Enquanto isso estiver selecionado, vá para o centro de alinhamento de conteúdo. Antes de tudo, deixe-me mudar isso para nossos recursos enquanto este é o título selecionado. Isso permanecerá assim. Atualizar. Agora, voltando aqui, este aqui é um contêiner e esses são dois elementos. E eles estão dispostos dentro do recipiente externo que contém todos eles. E eles estão dispostos de cima para baixo. Então, deixe-me ilustrar isso muito rapidamente. Deixe-me reduzir um pouco o zoom para que possamos ver tudo até lá. Deixe-me agora escolher a ferramenta de recorte. Então, agora, vamos lá. Então, suponha que seja um contêiner. Tudo isso é um contêiner. E nesse contêiner, temos esse elemento. E esse elemento. E isso aqui também é um contêiner. Então, esses são três elementos e estão dispostos de cima para baixo. Então, voltando aqui, eles estão arranjados. Deixe-me selecionar esse contêiner externo. Esse contêiner externo é esse contêiner externo, o contêiner preto aqui. E tem três elementos, o título, a descrição e um contêiner dentro dele. E está organizado de cima para baixo, assim. Tudo bem? Isso significa que precisamos ter um contêiner logo abaixo desses dois elementos. Então, vamos adicionar um contêiner aqui. Portanto, esse contêiner é o que conterá esses outros contêineres. Tudo bem? Então, mas agora, olhando para esse título e essa descrição, esses são dois elementos organizados dentro um contêiner de cima para baixo, assim como aqui. Portanto, um título e sua descrição dentro de um contêiner organizado de cima para baixo. E então esse contêiner nesta imagem está dentro de outro contêiner organizado da esquerda para a direita. E isso aqui é uma coluna, contém isso. Aqui está um contêiner que é uma coluna com três contêineres como este, dispostos de cima para baixo. Tudo bem, então agora é isso que estamos tentando alcançar. Espero que você tenha entendido isso. Espero que você tenha entendido esses desenhos, embora pareçam rabiscos, pelo menos você tenha seguido e entendido como os contêineres se relacionam entre si. Então, agora estamos trabalhando em. Então, agora vamos começar criando esse contêiner aqui, CrossFit e sua descrição. Então, vamos entrar aqui e duplicar isso. E então duplique isso. Então, agora vamos desenhar isso. No contêiner e isso logo abaixo dele. Então, ambos estão dentro de um contêiner. Esse é esse contêiner aqui organizado de cima para baixo. Então, se selecionarmos esse contêiner, ele será organizado de cima para baixo, exatamente assim. Agora, vamos criar esse contêiner externo que tem a imagem nesse contêiner. Isso significa que estamos adicionando um contêiner. Vamos adicionar um contêiner lá dentro. Neste contêiner. Vamos soltar esses outros contêineres. Simples assim. Neste recipiente externo. Este contêiner externo. Vamos deixar de lado a imagem. Então, deixe-me adicionar uma imagem lá. Agora temos esse contêiner que está dentro com o texto e sua descrição. E o segundo elemento é a imagem. Então, agora é hora de selecionar esse contêiner. E precisa ir da esquerda para a direita, sem mais nem menos. Então agora temos esse contêiner aqui. A próxima coisa que queremos fazer é criar esses contêineres que contêm, como uma linha com três serviços, 123. Agora vamos arrastar outro contêiner aqui, logo abaixo do texto. E vamos arrastar esse contêiner para lá. Agora. Isso é um serviço lá dentro. Vamos duplicar o serviço. Vamos duplicá-lo mais uma vez. Lá vamos nós. Então, agora acabamos de criar essas colunas. Mas agora lembre-se de que também temos duas colunas. Então essas duas colunas estão dentro de outro contêiner. E eles estão dispostos da esquerda para a direita. Portanto, precisamos ter outro contêiner e duplicar essa coluna. Então, agora vamos adicionar outro contêiner. E vamos arrastar esse contêiner para lá. Então, lá vamos nós. Então, agora esse contêiner contém três serviços. Está dentro desse contêiner. Então, agora vamos duplicar isso. Mas é claro que, por padrão, esse contêiner que contém as duas colunas agora está organizado de cima para baixo. E se rolarmos, temos aquela coluna até lá com três serviços. E então essa segunda coluna duplicada. Então, o que queremos fazer é selecionar essa coluna ou essa. Estou usando a palavra coluna porque esse era o fluxo de trabalho anterior no elemento. Então, selecionando esse contêiner externo aqui que tem essas duas colunas. Selecionando-o. Vamos mudar isso da esquerda para a direita. Agora temos duas colunas. Isso é isso. Agora que temos isso, que mais precisamos? Acho que temos tudo sob controle. Então, agora é só criar o conteúdo necessário aqui. Selecionar essa imagem. O que precisamos, essa garota? Então, vamos entrar e fazer o upload dos arquivos. Essa garota. Aberto. Tudo bem, então selecione isso. Então, temos essa imagem. Antes de tudo, vamos reduzir o tamanho do título. Precisa reduzi-lo drasticamente até algum lugar lá. E queremos que ele fique alinhado à esquerda. Então, o conteúdo fica alinhado à esquerda, desse jeito. Então eu quero selecionar esses textos e remover a maior parte deles porque isso é apenas uma breve descrição. E enquanto ainda estiver selecionado, estilize, alinhe à esquerda. Agora vou selecionar essa cópia. Selecione-o. Clique com o botão direito, copie. Selecione esse estilo de colar com o botão direito do mouse. Selecione esse estilo de colar com o botão direito do mouse. Selecione. Estilo de colagem. Selecione, clique com o botão direito em Colar. Selecione, clique com o botão direito do mouse em colar estilo. Selecione isso. Alinhe à esquerda, como neste estilo, linha à esquerda. É claro que agora isso será substituído pelo seu conteúdo específico. Eu queria reduzir isso mais uma vez. Use isso, use isso, use isso desse jeito. Atualizar. E agora os títulos são de cor verde e, na verdade, nem mesmo são fatos que pareçam tão ousados. Então eu também não iria. 700. Sim, acho que é o certo. Ousadia, textos, cor. Vamos dar aquele verde. Então selecione esse botão. Estilo. Copie isso. Entra aqui. Sob o título de estilo. Eu deveria ter feito tudo o que precisava sobre isso e depois colado. Então clique com o botão direito em Copiar, Colar. Eu farei isso para todas as outras rubricas aqui. Cole um estilo assim. Deixe-me selecionar esta imagem, baseada em exercícios aeróbicos. E então, enquanto isso estiver selecionado, eu vou entrar aqui. Selecione a imagem do cardio. Selecione. Vá em frente e selecione isso. Isso é CrossFit. Selecione esse CrossFit, resistência, perda de peso. E, finalmente, força. Então coloque isso lá. E deixe-me resumir essas imagens. Portanto, o elementary os redimensionará automaticamente para que você tenha o mesmo tamanho. Embora, na realidade, as imagens não tenham as mesmas dimensões. E, finalmente, vamos adicionar a imagem da perda de peso. Aí está, então é isso que quero dizer. Então, se selecionarmos isso, como você pode ver, o elemental o redimensionou. Agora vamos selecionar essa imagem, entrar no estilo, no raio da borda. Vamos dar 20 para obter cantos arredondados. Dê cantos arredondados. Vamos repetir o mesmo para o resto. 20 aqui, estilo, estilo. É um estilo de corrida. Ronnie. Finalmente, treinamento de estilo. Então atualize isso. E agora lembre-se, o que aconteceria com o alinhamento de textos que parecem estar elevados para cima dentro de um contêiner. Ou precisamos selecionar o contêiner em si, esse contêiner, e alinhar tudo ao centro dessa maneira. Então, vamos repetir isso para todos os serviços. Centro. Selecione esse centro, selecione esse centro. Selecione esse centro e, finalmente, selecione esse centro. Atualizar. E vamos pré-visualizar as mudanças. Então, rolando para baixo. Lá vamos nós. Nossos serviços já estão concluídos. Se você quiser, você pode deixar esses contêineres em toda a largura. Portanto, selecione o contêiner em si. Vamos ver. Sim, selecione este contêiner para largura. Atualizar. E vamos pré-visualizar as mudanças. Rolando para baixo. Portanto, o contêiner que os contém também não deve ser encaixotado. Então, vamos selecionar isso. Como você pode ver, ainda está encaixotado, então é de largura total, mas vamos fazer com que talvez seja 70 por cento. Agora, digamos 80%, 80%. E vamos selecionar o contêiner que contém esses contêineres. Esse é o contêiner externo. E alinhe tudo no centro desse jeito. Atualizar. E vamos pré-visualizar as mudanças. Então, rolando para baixo , fica um pouco mais espaçado. E é assim que se cria essa seção de recursos. Na próxima lição , antes de criarmos a pasta, vamos criar os depoimentos. Então, eu vou te ver em breve. 16. Seção de depoimentos: Bem vindo de volta. Então, agora é hora de criar a seção de depoimentos antes de criarmos o rodapé. Então, sem perder mais tempo, vamos começar. Então, voltando ao Elementor, logo abaixo de nossa seção de serviços, vamos clicar neste sinal de adição e queremos apenas um simples contêiner vazio ou em branco. E aqui, vamos adicionar um depoimento. Agora temos o elemento padrão ou elemento de testemunho e temos um elemento, elementos do kit. Então, vamos usar os elementos, manter um porque é muito, é muito melhor. E, como sempre, vamos dar uma margem na parte superior. Então selecione o contêiner externo, avançado, avalie esse link. Um quinto. Bom espaçamento lá em cima. A próxima coisa que queremos fazer é selecionar o depoimento em si, o elemento testemunhal. Embora esteja selecionado, temos formatos diferentes aqui. O que eu gosto é esse ou esse. Então, vamos com este. E lá vamos nós. Vamos entrar nas configurações. E podemos mostrar dois slides por vez. Então, deixe-me dizer dois. Agora temos que, logo antes de fazermos qualquer outra coisa, vamos fazer, vamos entrar na moda. E para o raio da borda, vamos dar 20. Simples assim. Então, vamos mudar a cor de fundo. Em Layout. Em layout, temos o tipo de plano de fundo, clássico. Vamos dar talvez um cinza escuro para separá-lo do fundo preto. Simples assim. Clique em qualquer lugar aqui para se livrar disso. E então vamos reduzir isso por um segundo, porque queremos mudar a descrição. Antes de mudarmos a descrição, vamos ao depoimento do conteúdo. Testemunho um. Eu só quero pegar esses depoimentos aqui. Então essa é Emily Chan. Ok, eu não consigo pegar isso. Eu posso? Não consigo arrastar isso. Então, vou ter que usar alguns desses textos. Então, digamos que essa seja a designação de Julia Roberts, talvez profissional de marketing. Agora vamos colar esse depoimento lá. Vou duplicá-lo novamente. E agora temos algumas quantidades substanciais de textos lá. Então, voltando para dentro, colete o estilo que entra na descrição, mude a cor para branco. Agora que nosso depoimento fracassou, vamos para a classificação. Você pode alterá-lo para aquele verde. Então, deixe-me selecionar esse estilo. Copie isso. Selecione os elementos do depoimento, colete o layout, acesse a classificação, a cor, mude para verde e agora temos uma boa classificação colapsada verde consistente. Vamos até o cliente. Em primeiro lugar, a cor do nome do cliente. Podemos fazer com que seja o mesmo. Verde. Expanda os clientes novamente. Portanto, procure um profissional de marketing de designação de clientes discretos. Portanto, a cor deve ser branca. Assim. O que mais? O que há aqui embaixo? Imagem do cliente, não precisamos cobrar a imagem do cliente. Acho que está tudo bem. Ou precisamos fazer isso. Então, agora deixe-me cancelar o cliente. Entre nas aspas, ícone de citação. Você também pode torná-lo verde assim. E então talvez reduza a opacidade depois de algum lugar para que não grite. Ao passar o mouse. Podemos simplesmente deixá-lo branco ou reduzir a opacidade. Mais uma vez, sem mais nem menos. Talvez assim. Podemos copiar isso ativo. Que também seja da mesma cor. Embora essas atividades sejam irrelevantes aqui, porque você não pode clicar e torná-las ativas. Então, no entanto, é apenas essa cor. Vamos voltar às configurações de conteúdo. E agora também podemos ativar o loop. Isso significa que não vai da esquerda para a direita, da esquerda para a direita. Está apenas indo em uma direção em um loop. Mostrar pontos. Podemos mostrar os pontos para que alguém saiba qual depoimento você está vendo agora. Sim. Deixe isso assim. Então vamos entrar. Testemunho. Depoimento um, Julia Roberts, clientes, avatar. Vamos fazer o upload dos arquivos. Esses são os três clientes. Vou enviar os três. Selecione. Então essa é Julia. Lá vamos nós. Deixe-me anular isso. Segundo. Talvez ganchos de equipe. Talvez. Jim mastro. Vamos copiar um bloco de texto. Copie isso. Vamos colá-lo lá. E então ele é a imagem. É ele. Deixe-me destruir a equipe. Vamos expandir. Talvez. Apelido. Suas asas. As asas chamam, designação. Músico que gosta de saúde e fitness. Vamos também colar alguns dos textos lá. Claro, vamos escolher a imagem dela. Vamos atualizar isso. Agora temos três depoimentos e acabei de perceber que esquecemos de citar o título e sua descrição. Depoimentos ainda indecisos, isso é o que nossos clientes disseram. Então, podemos simplesmente duplicar isso e arrastá-lo para baixo. Coloque-o lá em cima. Esse contêiner. Vá aqui como duplicata disso. Arrastando. Coloque-o lá. Então atualize isso. E vamos pré-visualizar as alterações durante a atualização. Vamos mudar isso para testar dois monômios. Atualizar. Mais uma vez. Vamos pré-visualizá-lo. Rolando para baixo. Lá vamos nós. Então, nosso depoimento agora parece incrível. Estamos quase terminando a página de destino e gostei dos resultados até agora. Mas o mais importante é não conseguir o site ou a página de destino perfeitos neste momento para que você aprenda o fluxo de trabalho. Tenho certeza de que você pode fazer muito melhor e produzir uma landing page muito melhor com o tempo. Portanto, não se apresse, melhore essas habilidades. E isso é apenas a ponta do iceberg. Há muitas outras coisas, muitas outras dicas e truques que você pode aprender. Tudo bem, agora é assim que se cria a seção de depoimentos. Na próxima lição. Vamos seguir em frente e criar a pasta. Leia antes de tornarmos o site ou a página de destino responsivos em diferentes telas de dispositivos. Então, te vejo em breve. 17. O Rodapé: Bem vindo de volta. Então, agora é hora de criar o rodapé. Então, sem perder mais tempo, vamos direto para nossa landing page. E, claro, assim como a seção napa ou nav, não vamos criar a pasta aqui. É aqui que construímos o corpo da página para o rodapé e o cabeçalho, os construímos separadamente. Agora tudo o que preciso fazer é sair daqui e ser redirecionado para o painel. E podemos entrar no kit de elementos, cabeçalho e rodapé. E podemos dizer Adicionar novo. Então, vamos chamá-la de pasta, selecione o rodapé aqui. Essa é a etiqueta que queríamos em todo o lado. E queremos que seja ativo. Então diga mudanças. Lá vamos nós. Então, como não foi editado com o Elementor, ele não tem essas opções. Clique em Editar. O conteúdo editado será redirecionado para o front-end onde agora podemos construí-lo visualmente. Vamos fazer isso. Tudo bem, então agora vamos começar com um recipiente em branco. Lá vamos nós. E agora queremos começar com isso. Queremos começar com esse contêiner aqui. Tem a descrição local e uma breve descrição e tudo está organizado de cima para baixo. Já nos acostumamos com esses contêineres. Eu espero. Então. Vamos arrastar um contêiner para lá. E vamos adicionar um elemento de imagem e um editor de texto logo abaixo da imagem. Simples assim. É apenas um contêiner com dois elementos. Selecione os elementos da imagem e vamos escolher o logotipo. Simples assim. Selecione a descrição. Eu quero copiar isso. Copie isso. E vou selecionar todo esse controle Shift V para colá-lo sem qualquer formatação. E enquanto ainda estiver selecionado, vou entrar na moda. A cor precisa ser branca. Atualize isso. Lá vamos nós. Agora, a próxima coisa que queremos fazer é criar essa parte. E agora, assim como fizemos com a ferramenta de recorte aqui, quero mostrar como vamos fazer isso. Então, mais uma vez, esse é um contêiner que tem uma imagem. E esses textos. Então, aqui temos um contêiner que tem dois elementos nas listas de ícones. E eles estão dispostos da esquerda para a direita. E então isso aqui é um elemento de cabeçalho. Junto com este contêiner aqui. Eles estão dentro de um contêiner e estão dispostos de cima para baixo. Então, temos o texto e, em seguida, o contêiner aqui. Ignore isso. Aqui temos esse ícone, esses ícones sociais. E nós temos esses formulários de inscrição. Esses são dois elementos dentro desse contêiner e estão dispostos de cima para baixo. E então todos eles são dispostos dentro de um contêiner da esquerda para a direita. Então, já criamos esse contêiner que contém esses dois. E esse é esse contêiner aqui. Então, o que queremos fazer é criar esse contêiner externo antes de criarmos esses outros dois. Então, vamos adicionar um contêiner. Eles vão entrar aqui. Arraste e desenhe um contêiner fora desse contêiner interno. Não, eu não vou comer lá fora. Tudo bem. Deixe-me deixar isso aí por enquanto. Tudo bem, então, sim, então está fora desse contêiner. Então, agora queremos arrastar esse contêiner para lá. E vamos duplicar isso. Um. Dois. Agora que temos três colunas, elas são como essas três colunas. Vamos escolher o recipiente que contém todos eles. E para a direção, vamos mudar para três colunas. Agora, aqui, o que precisamos é lembrar que isso também era um contêiner. Então, vamos arrastar um contêiner aqui. Vamos colocá-lo lá. Livre-se disso. Deixe-me adicionar uma caixa de ícones, lista de ícones lá dentro. E como é um contêiner, se eu duplicar isso, ele estará empilhado. Mas se eu selecionar o contêiner, podemos ir até as direções e alterá-las para duas colunas, assim como aqui. Agora, precisamos desse texto. Esse texto virá aqui porque selecione um título. Coloque-o acima desse contêiner. Vamos nos livrar dessa imagem. Atualize isso. Então aqui, vamos nos livrar disso. E vamos nos livrar disso. Sinal de adição. Digamos que ícones sociais. Eu vou usar os elementos, ícones sociais infantis. E é assim que eles ficam por padrão, você não pode vê-los porque o fundo é preto. Mas, embora isso ainda esteja selecionado, é claro, por padrão , temos Facebook, Twitter, LinkedIn, e você pode adicionar quantos quiser se quiser Pinterest, Instagram e tudo mais. Então, antes de tudo, mesmo antes de prosseguirmos, vamos abrir o Facebook. E vamos colorir. Por padrão, é cinza, mas queremos que seja verde. Eu ainda tenho aquele verde? Não, eu não tenho. Então, deixe-me pegá-lo do outro lado. Copie isso aqui. Vamos colar isso. E agora está verde. E, na verdade, eu queria que o fundo fosse verde, não o ícone. Então cole lá e eles devem ser de cor preta, assim mesmo. Então, ao passar o mouse, queremos que seja um fundo branco. Simples assim. Vamos repetir o mesmo para o Twitter. Cor. Essa é a cor do texto, preto, cor de fundo. Cole em verde. E então, ao passar o mouse, queremos que o fundo seja branco. Vamos fazer o mesmo com o LinkedIn. Cor do texto, preto, cor de fundo verde. Ao passar o mouse. Queremos que isso seja branco. Tudo bem. Lá vamos nós. Também podemos alinhar todos eles à direita, à esquerda ou ao centro. Assim. Se entrarmos no estilo, também podemos reduzir ou aumentar o tamanho do ícone. Atualize isso. Eu queria selecionar esse texto. E o que isso diz? Links rápidos. Então, vou copiar isso. Enquanto isso estiver selecionado. Vá para dentro. Links rápidos. Estilo, tipografia branca. Vamos fazer com que a fonte pese 700, sem mais nem menos. Agora, observe que isso está espaçado. Então isso significa que essa é a largura total. Antes de tudo, vamos deixar o recipiente externo em toda a largura. Agora está em toda a largura. Mas agora também temos o recipiente interno que contém todos eles. Também precisa ter a largura total. Mas precisávamos ser 90%. Então, vai até aqui. Vamos colocá-lo no meio, selecionando o recipiente externo. Vamos colocar tudo no centro, assim mesmo. Selecione esse logotipo. Vamos ver a largura do bloco de insights. Vamos insistir, pode ser até 30%. E vamos alinhá-lo à esquerda. Assim. Vamos selecionar a lista de ícones que está aqui. Pode mudar isso para verificar, verificar, inserir. Uma sobre as aulas no item, digamos, contato. Também mudou os ícones. Verifique. Vamos alterá-los para verificar. Finalmente, este para verificar. Inserir. Dentro. Lá vamos nós. Então, antes de duplicá-lo, enquanto ele ainda está selecionado, vamos entrar no ícone de estilo. Vamos mudar para verde escuro. Eu ainda tenho aquele verde? Não. Deixe-me selecioná-lo aqui. Conteúdo. O Facebook copiou isso. Selecione esses ícones de estilo. Precisamos que seja verde assim ao passar o mouse, precisamos que seja branco. Então, para o texto, tipografia, a cor precisa ser branca. E ao passar o mouse, precisa ser de cor verde. Simples assim. Vamos duplicar a lista de ícones. Exclua isso. E agora, vamos mudar os itens para privacidade, política, termos de serviço e talvez licenciamento. Vamos encerrar isso. Atualizar. Vamos pré-visualizar as mudanças. E é isso que temos. Então, agora observe que aqui temos um pouco mais de espaçamento entre esses dois. E temos esses formulários de inscrição, o que é muito importante. Voltando para cá. Selecione um contêiner que contenha tudo aqui. Esse contêiner avançou. Vamos quebrar esses estofados aqui. E para o preenchimento à esquerda, esse é o espaçamento da borda. Vamos fazer com que seja talvez 50, ou vamos fazer com que um quinto saiba, 100, 100. Atualizar. Vamos pré-visualizar as mudanças desse jeito. Mas agora o que precisamos fazer é criar esse formulário de inscrição, e é isso que queremos fazer na próxima lição. Então, eu vou te ver em breve. 18. Crie o formulário de inscrição: Ei, bem vindo de volta. Agora já criamos a pasta, mas o que falta é o formulário de inscrição aqui, à direita aqui, no lado direito da foto. Então, como fazemos isso? Precisamos instalar um plugin de formulário. Existem vários plug-ins de formulário no repositório de plugins do WordPress, mas eu adoro criar mais tarde. Portanto, precisaremos instalar por mais ou menos um minuto. Vamos sair daqui por enquanto. Saída. E a razão pela qual eu amo o formulador é porque o nominator é muito poderoso e é gratuito para você usar. E alguns dos recursos mais importantes que ele fornece gratuitamente são, na verdade, pagos em outro formato de plugin. Portanto, você precisa pagar por esses recursos ao usar outros plug-ins de formulário. Use o formulador e você os obtém gratuitamente. Então, vamos entrar em Plugins e adicionar novos. E vou digitar quatro minutos estão aqui. Para terminador. O exterminador. E aqui estamos. Então, é de WP MU Deb. Então, instalado agora. No momento, ele está instalado. Então, vamos ativar. E aqui vamos nós. E está aqui, quase na parte inferior do menu lateral. Então, vamos ao formulador. Você pode clicar para mim mais tarde ou ir diretamente para os formulários, mas eu quero que acessemos o painel do formulador. Então, aqui estamos. Esta é a casa do plugin de quatro monitores do WordPress. Então, como você pode ver, temos opções diferentes. Podemos criar um formulário ou uma enquete. No momento, estamos interessados em um formulário. Então, crie. E temos modelos aqui que podemos escolher que já estão pré-construídos. Então, queremos uma inscrição no boletim informativo. Então, vamos dizer que se inscreva no boletim informativo e continue. Cadastre-se. Vamos chamá-lo de “inscrever-se” ou “certo”. Então, agora ele foi criado. E agora temos dois campos. Primeiro nome, e-mail e, em seguida, um botão de inscrição. E se você quiser pré-visualizá-lo, basta dizer pré-visualização. Portanto, temos o primeiro nome, e-mail e assinatura, primeiro nome, e-mail, assinatura. E podemos arrastar e reorganizar esses campos. Por exemplo, podemos colocar o medo, podemos colocá-los lado a lado assim na pré-visualização gratuita. Agora eles estão lado a lado. Então, eu não quero incluir o primeiro nome, então vou simplesmente excluí-lo. E agora ficamos com o endereço de e-mail. Simples assim. Feche isso. E agora queremos dar a esse botão essa cor verde. Então, deixe-me pegar aquele verde desse lado. Mais uma vez. Copiar. Voltando para cá. Eu queria entrar na aparência. E esta é uma prévia das mudanças que você está fazendo. Então, se você for para um plano, eu gosto de um plano sem essa borda rígida. Também pode usar material ousado ou nenhum. Eu gosto desse apartamento. E você também pode ajustar as cores, que é o que queremos fazer. Então clique em traje. Isso revela cada parte de um formulário existente. Como você pode ver na parte inferior, temos o botão Enviar. Se eu clicar nele, podemos mudar sua cor clicando na cor de fundo. Selecione isso, eu vou colar esse verde lá. Clique do lado de fora. Então, para os textos, vamos torná-los pretos. Ao passar o mouse. Eu quero que o botão seja branco. E focando, quero que seja branco. Vamos pré-visualizar isso. Ao passar o mouse. Tudo bem, então, ao passar o mouse, vamos deixar o texto branco, preto. Desfocado. O texto deve ficar preto ao passar o mouse e também deve ser pré-visualização em preto desse jeito. Publique. E quando provavelmente planeamos, recebemos um código curto. Um código curto é basicamente um pequeno código como esse, e eu o copiei. É um pequeno código que você cola em qualquer lugar do seu site. E esse formulário aparecerá. Esse pequeno código representa um formulário. Esses 243 são o número ou o ID do formulário. Se você tem cerca de dez formulários nativos formando, você criou quatro páginas diferentes. Talvez a página de contato tenha seu próprio formulário com mais campos. Pode ter um número diferente. Cada formulário tem seu próprio número exclusivo para que cada código curto exiba um formulário diferente. Então, deixe-me copiar isso. O atalho foi copiado com sucesso. Feche isso. Agora, voltando ao nosso painel, quero abrir nosso rodapé. Então, portal de fitness, vamos entrar no painel. Ainda tenho essa página aberta, mas estou abrindo o painel em uma guia diferente para que possamos entrar nos elementos kids, header, rodapé e edit com o Elementor. E agora, neste contêiner, queremos descartar um elemento de código curto, elemento de código curto. Então, vamos arrastá-lo e soltá-lo lá. E isso é basicamente um campo para inserir nossos códigos curtos. Então, vamos colar isso aí. E agora, como você pode ver, o formulário agora está aparecendo em nossa pasta. Se arrastarmos esses elementos curtos de código para qualquer outra parte, o formulário aparecerá nessa parte. Então atualize isso. E vamos pré-visualizar as mudanças. E lá vamos nós. Portanto, este formulário de edição é apenas um link para o nosso editor. Se eu clicar, ele será redirecionado para o painel para continuar editando. Mas quando você não o estiver editando, se for um visitante ou cliente do site deles, você não os verá. Somente o administrador pode vê-los porque está editando ativamente o site. Tudo bem, então vamos lá. Aí está nosso rodapé. Agora, se entrarmos no painel, nas páginas do painel, em todas as páginas. E vamos ver a página inicial. Rolando para baixo. Lá vamos nós. Nossa pasta agora está pronta. Mas uma coisa que eu quero fazer é aumentar a margem entre os depoimentos e o rodapé, porque precisamos de um bom espaçamento. Então, enquanto estamos aqui na página, podemos ir para Editar com o Elementor. Podemos clicar no cabeçalho para editar a pasta do cabeçalho e editar a pasta. Ou simplesmente clique em editar com o Elementor para editar o conteúdo da página em si. Então, agora estamos editando a página. Vamos rolar até o final. Selecione o contêiner de depoimentos avançado para obter a margem inferior. Vamos dar 100. Atualize isso. E vamos pré-visualizar as mudanças. Deslizando até o final. Ainda não temos espaçamento suficiente. Então, enquanto ainda está selecionado, vamos dar um. Atualize isso e vamos pré-visualizar as alterações. Rolando para baixo. Sim, então agora temos esses 150. Talvez possamos dar 200. Digamos 250. Atualize isso. Vamos pré-visualizar as mudanças. Deslizando até o final. Sim, então agora esse é um bom espaçamento entre os dois. E observe que precisamos de um pouco mais de espaçamento aqui. Então, voltando à nossa pasta, selecione esses dois. Se selecionarmos o contêiner que contém esses dois e entrarmos aqui, teremos um conteúdo justificado. Podemos centralizar o conteúdo. Podemos justificar desde o início, que é o que tínhamos originalmente. Podemos empurrá-los até o fim. Podemos ter um espaço entre eles desse jeito. Podemos ter espaço ao redor ou podemos até mesmo espaço. Então, acho que o espaço parece uniforme. Mas agora isso está desalinhado com o título. Então, outra coisa que podemos fazer é simplesmente fazê-los começar do início e selecionar esse elemento em si Avançado. Vamos para a margem, margem esquerda. Vamos fazer com que seja 20, ou vamos fazer com que seja 50. Até esse ponto. Atualize isso. Vamos pré-visualizar as mudanças. Lá vamos nós. Então, agora, se formos até nossa página e a atualizarmos, rolando até o final. Agora temos um bom espaçamento. Também temos nossa inscrição e tudo mais. Lembre-se de que também podemos transformar esse logotipo em um link. Então, voltando ao nosso editor, se selecionarmos essa imagem, podemos transformá-la em um link, talvez em um URL personalizado. E agora talvez você possa dizer que seu website.com é a página inicial. E se você quiser que esse link seja aberto em uma nova guia, clique nessa roda dentada e selecione Abrir em uma nova janela. Pré-visualize as alterações. Se clicarmos agora, ele abrirá em uma nova guia. Mas é claro que esse site não existe. Seu site.com. É aqui que isso nos leva a hospedar. Eles são vendedores de domínios. Então, basicamente, é assim que você constrói sua landing page. Estamos quase terminando. Nas próximas aulas, vamos tornar essa página de destino responsiva em smartphones e tablets porque ela já parece incrível no desktop. Espero que tenham gostado da aula. Se você estiver, este é um bom momento para parar um minuto e deixar um comentário. Deixe que outros alunos saibam o que você acha da aula. Como você se beneficiou com isso? O que você gosta na aula? Isso vai ser muito útil? Agora, vamos voltar ao trabalho. Nos vemos na próxima aula. 19. Torne o Navbar pegajoso: Então, agora, queremos trabalhar na barra de navegação. Queremos fazer algumas melhorias. E, para ser mais específico, queremos torná-lo pegajoso na parte superior. Você notará que agora, se começarmos a rolar, a barra de navegação desaparecerá. E se você quiser acessar outras páginas do site, teremos que voltar ao topo para acessar o menu. Isso não é muito fácil de usar e nosso objetivo é tornar o site o mais fácil de usar possível. Então, vamos entrar no nosso painel. E eu quero entrar em Plugins, Add New, porque queremos adicionar um plug-in que nos permita tornar a barra de navegação fixa na parte superior. Então, aqui, vamos digitar sticky. Espero que ele traga isso. Ah, sim. Portanto, são efeitos de cabeçalho pegajosos para o Elementor. Assim como os elementos, o calor efeitos de cabeçalho adesivos do Elementor são outro plugin criado como um complemento para o Elementor. Então, vamos instalá-lo agora. Ativar. E lá vamos nós. E parece que preciso atualizar os elementos, obter luz. Deixe-me clicar em Atualizar. Agora. É sempre bom manter seus plugins atualizados. Tudo bem, agora que temos efeitos de cabeçalho fixos instalados, vamos voltar para a página. E agora eu quero passar o mouse sobre a edição com o Elementor. Mas, como queremos editar o cabeçalho, clicarei no cabeçalho. E aqui estamos. Então, primeiro de tudo, deixe-me fechar esses navegadores. E agora, bem, esse contêiner está selecionado. Quero acessar o layout Advanced Collapse e expandir os efeitos de cabeçalho fixo ativados. Vamos atualizar isso. Vamos revisar as mudanças. Tudo bem, então o que estamos visualizando é a barra de navegação. Mas o que queremos ver é um efeito pegajoso em ação. Então, deixe-me clicar na página inicial para ir para a página de destino. Mas agora já deixamos a barra de navegação fixa. Então, vamos começar a navegar. E agora você notará que ele permanece no topo, mesmo enquanto rolamos. Portanto, ainda temos acesso ao menu independentemente da parte do site. Mas há um pequeno problema. Observe que, se rolarmos até algum texto aqui, por exemplo , esses textos, não podemos ler o menu porque há alguns textos em segundo plano. Então, o que fazemos para introduzir um plano de fundo na barra de navegação. Então, voltando ao editor, você notará que temos configurações aqui embaixo sob o efeito de cabeçalho fixo. Então, rolando para baixo. Cor do plano de fundo, escolha a cor para alterar o plano de fundo após a rolagem. Então eu vou, vou ligar isso e depois vou mudar para preto. Vamos atualizar isso. Vamos pré-visualizar as mudanças. Como de costume, vamos para a página inicial para que possamos rolar a. Agora, se começarmos a rolar, você notará que o fundo do menu está preto. E isso nos permite ainda ler o conteúdo do menu, independentemente do que esteja em segundo plano. E é assim que a barra de navegação fica fixa para permitir que o usuário acesse o menu, independentemente da parte do site em que esteja. E isso proporciona a eles uma boa experiência de usuário. É tudo uma questão de UI UX. Na próxima lição, vamos adicionar alguns efeitos de movimento aos diferentes elementos que temos na página. Então, eu vou te ver em breve. 20. Adicionar efeitos de movimento: Agora é hora de adicionar alguns desses efeitos de movimento que vimos no site de referência. Então, deixe-me ir até o site de referência. Você notará que diferentes elementos são animados e que basicamente adicionam alguns efeitos interessantes ao site e tornam o site mais memorável. Simples assim. Então, uma entrada dramática dos diferentes elementos que temos. Então, vamos ver como fazer isso. Então, voltando ao nosso editor, agora, esta é a página que estamos criando. Vou até Editar com o Elementor e clicar nele. Assim, podemos começar a editar os elementos na página. E aqui estamos. Portanto, a página agora é editável. Portanto, a primeira coisa que precisamos fazer é selecionar o contêiner que contém o TextContent junto com os botões. Este contêiner aqui está dentro do layout Advanced Collapse. E temos efeitos de movimento. Temos vários. Então, clique nesse menu suspenso. Por exemplo, no site de referência, estou pulando para a esquerda. Sobre isso. Claro, eu posso usar saltar para a direita. Vá, selecione-o. Vá para o layout Advanced Collapse , expanda Efeitos de movimento , menu suspenso, balanceamento e direitos. Simples assim. Atualizar. Vamos pré-visualizar as mudanças. E lá vamos nós. Agora, basicamente, usaremos efeitos diferentes nos diferentes elementos desta página e você poderá ser tão criativo quanto quiser. Então, voltando aqui, vamos ver. Você pode até animá-los se quiser, mas vou pular isso. Depende de você. Deixe-me selecionar o contêiner que contém essa imagem. Digamos, Advanced Collapse Layout. Mais uma vez, efeitos de movimento. Digamos que estou ampliando para a esquerda ou para a direita. Vamos selecionar esse contêiner externo Avançado. Vou ver o zoom correto. Atualize isso. Vamos pré-visualizar as mudanças. Primeiro, a seção do herói, rolando para baixo. Como você viu, eles ampliaram esquerda e para a direita conforme os configuramos. Então, basicamente, vá em frente e faça o resto dos efeitos de movimento. Adicione o resto dos efeitos de movimento. Cada elemento adicionado pode ter um efeito de movimento. Então, seja criativo. Vamos ver o que você conseguirá inventar. E antes de terminarmos esta lição, acabei de lembrar que não mostrei como configurar a página inicial. E é muito importante porque você quer que o domínio raiz tenha dois pontos em relação à sua página inicial, para que não seja seu domínio raiz. Com a barra inicial. É apenas o seu domínio raiz.com , então, se for fitness.com, ele aponta para esta página inicial. Não é fitness.com slash home fitness.com. Então, como podemos definir isso? Voltando ao nosso painel? Vou entrar em Configurações, Lendo. E aqui temos a exibição da sua página inicial e, em seguida, temos opções. Portanto, escolha uma página estática e, para a página inicial, selecione salvar alterações. E agora, se eu clicar com o botão direito do mouse e abrir o link em uma nova guia, se formos até ela, você notará que agora estamos na página inicial e é o domínio raiz. E, basicamente, é assim que se adiciona os efeitos de movimento e define a página inicial. Na próxima lição, vamos ver como tornar a página de destino responsiva em tablets e telefones celulares. Te vejo em breve. 21. Cabeçalho responsivo: Então, agora, queremos tornar este site responsivo, ou melhor, nossa página de destino responsiva. E queremos começar com o cabeçalho, em outras palavras, o Napa. Vamos ver como tornar a barra de navegação responsiva. Então, primeiro de tudo, deixe-me fechar todas essas guias que abrimos. E agora ficamos com uma landing page. Então, deixe-me passar o mouse sobre isso e clicar no cabeçalho. Porque estamos trabalhando no cabeçalho. Agora, queremos torná-lo responsivo. Então, vou clicar nesse botão do modo responsivo. E isso mostrará essas configurações aqui em cima. E o que realmente nos interessa, esses três ícones aqui, como você pode ver, esse é o desktop. A página de destino já parece boa no desktop. Então, vamos trabalhar na versão para tablet clicando naquele I lá de cima. E agora aqui estamos. Então, imediatamente mudamos para o modo tablet. Você notará que o menu desapareceu e isso porque ele foi alterado para um menu de hambúrguer. Se eu passar o mouse aqui está um menu de hambúrguer e, por padrão, em seu estado inativo, é preto e ao passar o mouse é azul. Assim, podemos mudá-lo para nosso verde. Então, o que eu quero fazer é selecionar o menu em si. Entre no estilo porque queremos mudar o estilo do menu do hambúrguer. Vamos fechar a embalagem do menu e abrir o estilo de hambúrguer. E vamos ao tipo de plano de fundo. Vamos mudar. Eu quero colar na cor verde aqui. Simples assim. Vou clicar em qualquer lugar aqui para me livrar disso. E nós realmente não precisamos alterar as configurações do pássaro, porque quando você está usando um tablet, você não passa o dedo sobre o tablet para clicar em algo, basta tocar. Portanto, os efeitos de passar o mouse realmente não terão nenhum efeito. Agora, quando expandimos esse menu clicando nele, ele abrirá o menu lateral. Então, precisamos mudar esse plano de fundo. Então, entrando no invólucro do menu, que é o primeiro item, tipo de plano de fundo, vamos mudar isso para preto. Agora, é claro, é preto e herda as cores que definimos para o desktop. E acho que vou deixar por isso mesmo. Mas agora também temos esses ícones de alternância aqui. Podemos mudar sua cor colapsando o invólucro do menu. Entrando no estilo hambúrguer. Se eu não estiver errado. E aqui embaixo temos o botão fechado. Então, rolando para baixo, temos o tipo de plano de fundo. Selecione a cor aqui e cole esse verde lá. E agora está na cor verde. E acho que gosto disso. Bem, o menu ainda está selecionado. Também podemos acessar as configurações do menu de conteúdo e celular. Podemos adicionar logotipo aqui. Selecione isso, selecione. E agora, quando tocarmos nesse ícone, ele exibirá o logotipo, mas parece distorcido. Então, entrando no estilo, podemos entrar no logotipo do menu móvel e trabalhar no choro de 100% e batalhar k. Também podemos trabalhar na margem. Vamos expandir isso. Empurre-o pela esquerda. Então, com a margem esquerda, atualize isso. Agora, vamos pré-visualizar as mudanças. Agora, podemos usar as ferramentas de desenvolvimento que vêm com cada navegador para imitar dispositivos diferentes. Então, se eu clicar na minha mudança de controle do Chrome, eu abrirá o Chrome DevTools. E se você clicar neste ícone do modo responsivo aqui, podemos alternar entre diferentes dispositivos. Então, neste momento, esse é o pixel cinco. Se você clicar no menu suspenso, temos dispositivos diferentes aqui porque estamos trabalhando na versão para tablet. Vamos clicar em iPad Air. E é assim que fica em um iPad Air. Então, voltando aqui, queremos tornar o logotipo um pouco maior. E o que queremos fazer é trabalhar com porcentagens desses contêineres que contêm o logotipo e o menu, selecionando o logotipo em si. Vamos transformar essas unidades em porcentagens. E também vamos selecionar esses contêineres que estão no menu e alterá-los para porcentagem. E agora vamos fazer com que sejam 20%. E eu acho que essa é uma boa atualização de tamanho. Agora, se pré-visualizarmos as mudanças, acho que é um tamanho melhor do que tínhamos antes. Voltando aqui, vamos acessar a versão móvel. Então, clicando nisso, agora você notará que o logotipo e o menu estão empilhados, mas nós os queremos lado a lado. Então, no momento, está apenas jogando com as porcentagens. Podemos dar ao logotipo talvez 50% da largura desse recipiente externo. E, claro, dá a esses outros contêineres 50 por cento. Que tal 149 por cento? Acho que talvez vamos dar 30% ao logotipo. E isso vai dar 70%. Vamos reduzir a porcentagem até algum lugar lá. Atualize isso. E vamos pré-visualizar as mudanças. E vamos mudar para qualquer celular que quisermos aqui, talvez o pixel cinco. É assim que fica em um pixel cinco. Vamos dar uma olhada no iPhone Pro, iPhone 12s pro. É assim que fica em um iPhone 12. Nós expandimos isso. É assim que parece. Esses são ícones de configuração. O logotipo é visível em um telefone real. E, basicamente, terminamos com as configurações do modo responsivo para o cabeçalho. Na próxima lição, vamos ver como tornar o corpo principal da página de destino responsivo. Então, eu vou te ver em breve. 22. Seções de corpo responsivas: Então, agora, acabamos de trabalhar na capacidade de resposta do cabeçalho ou da barra de navegação e terminamos com isso. Em seguida, queremos trabalhar na capacidade de resposta do próprio corpo. Então, se eu entrar no menu e clicar em home para que possamos, abriremos a página inicial. É assim que parece atualmente antes de fazermos qualquer coisa. Então, como você pode ver, nós realmente não temos muito trabalho a fazer na página. Na verdade, vai levar apenas alguns minutos. Então, deixe-me sair das configurações do modo responsivo e fechar as ferramentas de desenvolvimento. Agora vamos editar com o Elementor. Agora estamos editando a página desse jeito. Então, deixe-me entrar aqui onde estávamos editando o cabeçalho e, na verdade , fechá-lo. Então, ficamos com isso. E então, como sempre, clique no ícone do modo responsivo aqui. E vamos mudar para o modo tablet. Então é assim que fica no tablet. Vamos começar selecionando o contêiner que contém o bloco de texto e a imagem. E eu acho que é isso. Não consigo selecioná-lo. Então eu vou para o Controle I para abrir o navegador. E agora esse contêiner aqui é o contêiner mais alto da seção de heróis. E dentro dela, tem o contêiner que estamos procurando. Esse contêiner. E dentro desse contêiner temos os dois contêineres. Este contém o bloco de texto e este contém a imagem. Então selecione esse contêiner. Agora está selecionado. Vamos entrar com antecedência. Vamos quebrar primeiro essa margem para empurrá-la para baixo. E deixe-me selecionar esses textos. E vamos reduzir o tamanho entrando na tipografia de estilo. Acho que é um bom tamanho. Para os botões. Acho que podemos colocá-los um em cima do outro. Então, vou selecionar o contêiner com os botões. Então, para a direção, vou mudar para a coluna vertical, assim. E então vamos alinhá-los ao início. Até o início. Simples assim. Atualizar. Agora, temos, acho que temos muita margem ou espaço ao redor desse recipiente interno. Então, selecionando-o. Quais são as configurações aqui? Sobre o recipiente externo? Peso? Precisamos selecionar isso. E no layout. Vamos fazer com que seja 100%, 100% sem vencer as células. Acho que é um bom tamanho. 90%. Atualize isso. E eu gosto desse jeito. Mas é claro que, se você quiser aumentar a imagem, você também pode decidir colocá-las em pilhas em vez de colocá-las lado a lado. Assim, você pode selecionar esse contêiner externo contendo o contêiner de imagem e o contêiner de textos. E para a direção, mude para essa. Em seguida, selecione esse contêiner. Mude para 100%, 100% assim. E para a imagem, também, mude isso para porcentagem, 100% desse jeito. Portanto, tudo gira em torno de quão criativo você deseja ser e pessoas diferentes terão configurações diferentes para suas páginas de destino. Acho que isso já parece bom. Mas é claro que, se você quiser fazer alterações, basta selecionar o próprio editor de texto. Vá para o estilo. Por exemplo, eu quero editar a topografia, a altura da linha. Acho que eles estão muito próximos um do outro. Assim. Acho que isso já parece bom, mas podemos reduzir o tamanho desse título. Tipografia de estilo. Vamos reduzi-lo para talvez 45. E todo o resto parece bom. Entrando aqui. Você também pode selecionar esse estilo tipografia no tamanho 45 do texto, como o outro. E como está muito perto da borda, vou selecionar o recipiente externo. Estofamento avançado. Para a esquerda. Isso é o certo. Podemos dar 20. E para a esquerda, 20. Então, isso empurrará tudo para dentro a partir da borda. Acho que isso também parece bom. Você pode selecionar essa tipografia de estilo. O tamanho 45 está bom. Também podemos trabalhar no preenchimento como fizemos com esse outro. Agora. Aqui, a solução é muito simples. Simplesmente vamos entrar cada contêiner de serviço como esse serviço e empilhar tudo de cima para baixo dessa forma. E então vamos selecionar o texto aqui. Alinhe seu centro, descrição, estilo, centro de alinhamento. Vamos repetir o mesmo para esses outros serviços. Então aqui está a direção do contêiner, cima para baixo, centro, centro alinhado. Selecione a direção do serviço. Quase pronto. Direção de cima para baixo, centro, centro de estilo. E, finalmente, direção de cima para baixo, centro, centro. Incrível. E agora esse texto também está muito próximo das bordas. Então, voltando aqui, selecione o contêiner que contém tudo o que está avançado. E vamos mudar o estofamento à esquerda e à direita. Então, agora temos um bom espaçamento lá. Bem, também podemos reduzir o tamanho desse título. 245 para uniformidade. Depoimentos, 45 também. Selecione um contêiner que os contenha. Acolchoamento avançado para qualquer lado esquerdo, 20, certo? Isso parece bom. E basicamente é isso. Ah, podemos selecionar o cabeçalho da seção do herói e também colocá-lo no centro. Simples assim. Em seguida, o centro de estilo do texto. E também podemos selecionar os botões, o contêiner e empurrar tudo para o centro, alinhar os itens ao centro, assim. Atualizar. E vamos pré-visualizar as mudanças. Então agora Control Shift. Então eu disse isso a ela. Vamos mudar para o iPad Air, e é assim que fica em um iPad Air. Acho que tudo está incrível. Se mudarmos para um telefone celular. Vamos ao mais. Vamos para o iPhone 12. Acho que já parece bom, mesmo que não tenhamos tocado nele. E vou deixar isso para que você possa fazer as alterações ou melhorias que achar necessárias para a versão móvel. Mas acho que já parece bom. Ela herdou as configurações que definimos para o tablet. Então, é claro que agora, se rolarmos até a pasta, você notará que temos algum desalinhamento, e é nisso que trabalharemos na próxima lição. Então, te vejo em breve. 23. Rodapé responsivo: No momento, estamos aqui na pasta. Só precisamos fazer alguns ajustes e terminamos com um rodapé. Então, sem perder tempo, vamos alternar esse ícone aqui e fechar o DevTools. E então, é claro, passe o mouse sobre eles e clique em Pasta para editar a comida em si. E foi aqui que estávamos editando o conteúdo principal. Então, vamos encerrar isso porque salvamos as alterações. Agora, é aqui que estamos editando a pasta. Clique novamente no ícone do modo responsivo. E vamos mudar para o tablet. Logo de cara. É assim que parece. Se selecionarmos esse contêiner que contém os links rápidos e entrarmos no modo Avançado, você notará que estamos herdando esse preenchimento 100% esquerdo do modo desktop. Simples assim. Então, voltando para o tablet, vamos acabar com essas garras. Isso redefine tudo e podemos definir os valores que queremos para a versão para tablet. Mas se voltarmos ao modo desktop, ele ainda tem sua centena. Então, vamos voltar para o tablet. Então, vamos ver o que podemos fazer aqui. Se eu selecionar esse contêiner que contém os links, vou até a direção e faço com que tudo comece do início. Nós tínhamos um pouco de preenchimento ou margem nisso. Então, selecionando esse avançado, sim, tivemos uma margem esquerda de 50. Se removermos isso, teremos esses dois conjuntos de links. Acho que agora parece muito melhor. Na verdade. Se eu selecionar o logotipo em si, entrar, estilizar, posso aumentar a largura até esse ponto de atualização. E vamos pré-visualizar as mudanças. É claro que precisamos controlar o Shift I e depois alternar isso. É assim que parece nos telefones celulares. Mas e quanto ao iPad Air? É assim que fica no iPad Air, acho que já parece bom. Vamos mudar para o iPhone Pro. Acho que também fica incrível nas telas do iPhone ou do celular. Portanto, não precisamos realmente fazer nenhuma alteração, no que me diz respeito. Mas caso você queira fazer alterações na versão móvel, tudo o que você precisa fazer é clicar neste ícone aqui. E, por exemplo, se você quiser centralizar tudo. Então, vamos selecionar essa imagem. Conteúdo, alinhe-o ao centro. Selecione esse estilo de texto e alinhe-o ao centro. Selecione esse contêiner aqui. Layout. Vamos alinhar tudo ao centro. Esse também é outro contêiner. Alinhe tudo ao centro. Selecione esse contêiner aqui. Alinhe tudo ao centro. E agora você tem uma configuração diferente. Mas vou entrar nessa história e voltar para onde estávamos há pouco. Acho que estava ali mesmo. Eu gosto desse cenário. É aqui que você pode ver todos os movimentos que você fez desde que começou a editar. Conteúdo na página ou em qualquer editor. E como você pode ver, essa é a primeira, essa é a edição iniciada e essa é a última alteração que fizemos. Podemos voltar no tempo e restaurar a aparência das coisas há pouco. Eu queria ouvir uma atualização sobre isso. Vamos pré-visualizar as mudanças. E é assim que parece. Então, é claro, você pode fazer muito mais. Este é apenas um fluxo de trabalho para você começar. Quanto mais você usa o ensino fundamental, mais criativo você é, mais você descobrirá maneiras diferentes de alcançar os mesmos resultados. Portanto, cabe a você continuar praticando melhorando e entendendo como usar todos os recursos dessa ferramenta incrível. Então, vamos sair dessa área. Vou passar por isso e encerrar isso. Voltando ao nosso editor. Na verdade, deixe-me sair daqui porque agora estamos bem. Ou vamos pré-visualizar as alterações e depois clicar em Início. Bem, deixe-me remover isso e ir para a página inicial Control Shift. Eu alterno isso para que possamos dar uma olhada de cima para baixo. Primeiro de tudo, antes de rolarmos, é abrir o menu. É assim que ele parece. Escapar. Role para baixo. E lá vamos nós. Então, vamos mudar para o modo tablet, iPad Air. É assim que a comida fica no iPad. Rolando para cima. Agora saindo de lá para dar uma olhada na versão para desktop. Então, basicamente, é assim que se constrói essa landing page, conforme mencionado na turma Minha intenção era mostrar como usar os contêineres para criar uma bela landing page. Os contêineres são a nova forma de criar páginas da web usando o Elementor. Você sempre pode usar o fluxo de trabalho de seções e colunas que eu ensinei em todas as minhas aulas elementares anteriores, que você pode conferir visitando meu perfil. Agora, antes de encerrarmos as coisas, tenho mais algumas dicas importantes que quero compartilhar com você. E então chamamos isso de embrulho. Então, nos vemos no final. 24. 24 Pensamentos finais: Parabéns, você finalmente chegou ao final da aula, o que significa que você terminou de criar sua landing page. Eu só quero dedicar um momento e agradecer por se juntar a mim neste curso sobre criação de páginas de destino com o Elementor. E espero sinceramente que você tenha achado o conteúdo útil e informativo e que tenha adquirido habilidades valiosas que possam ser aplicadas seus próprios projetos de desenvolvimento web. Agora que você aprendeu a criar uma bela página de destino com o Elementor e, por extensão, lindo site com o Elementor. É importante que você garanta que seja compatível com SEO. Há várias coisas que você precisa fazer para tornar suas páginas de destino e sites visíveis para os mecanismos de pesquisa , porque é assim que você é descoberto. Por exemplo, você deve ter notado que, quando estávamos enviando imagens do nosso computador para a biblioteca de mídia do WordPress, tínhamos preenchimentos de texto que não nos preocupávamos em preencher. Mas esses campos de textos são muito importantes para o seu SEO. Você deve fornecer detalhes como o texto alternativo para tornar as imagens mais acessíveis, tornando a página mais amigável ao SEO. Outro exemplo é que usamos cabeçalhos em nossa landing page, mas não definimos uma hierarquia para eles. Começando de um até o H6. É muito importante que você entenda como usar cabeçalhos forma hierárquica para melhorar a estrutura da página, o que melhora seu SEO. E essa é apenas a ponta do iceberg quando se trata das ações e etapas necessárias para a visibilidade dos mecanismos de pesquisa. Se você estiver interessado em aprender mais sobre SEO para WordPress, tenho uma aula passo-a-passo completa disponível para você em meu perfil aqui. E eu recomendo fortemente que você o faça imediatamente após esta aula para que possa entender o que precisa fazer em seus futuros sites para torná-los mais visíveis. E, finalmente, se você achou essa aula útil, eu agradeceria muito seu feedback. Reserve um minuto para deixar um comentário sobre a aula para ajudar outros futuros alunos saberem o que esperar de mim e também me ajudou a melhorar minhas aulas futuras. O que você gostou na aula? Como estão as aulas? O professor estava engajado? Para deixar sua avaliação, basta clicar na guia Análise abaixo deste reprodutor de vídeo e você levará menos de um minuto para fazer isso. Mais uma vez, obrigado por participar da aula e espero ver você em meus outros elementos de aula em breve. Até a próxima vez. Tenha uma boa peça única.