Aprenda o elemento elementar e o WordPress com o design de uma página de destino

1. Apresentação do curso: Bem-vindo de volta a outra aula elementar incrível comigo can Besser, você sabe, como de costume, meu trabalho é mostrar-lhe como projetar lindas landing pages. E todos eles vêm com uma classe muito especial chamada design, uma landing page de podcast com Elementor. Então, se você tem um podcast ou está planejando iniciar um podcast e gostaria de saber como projetar uma linda landing pages para ele. Esta aula é para você. Mesmo que você não queira iniciar um podcast ou não possui um podcast, mas ainda assim gostaria de aprender a projetar lindas landing pages usando o Elementor. Esta aula é para você. Agora, não há pré-requisitos para essas classes. Então, se você nunca usou o Elementor, tudo bem. Mostrarei tudo o que você precisa saber como iniciante e, à medida que você se acostuma a usar o Elementor, você aprenderá a usar o resto das ferramentas. Então, neste momento, estamos nos concentrando em ajudá-lo a entender que as ferramentas e recursos mais importantes Elementor são alguns dos tópicos que abordaremos nesta classe incluem como adicionar e estilizar títulos, parágrafos, botões, imagens e outros efeitos especiais através de suas landing pages. Como criar formulários de inscrição para coletar dados do usuário. Como criar menus fixos que, quando as pessoas estão rolando, o Menu Principal fica na parte superior da página. As cargas estarão olhando para o design responsivo. Trabalharemos para fazer com que uma landing page pareça incrível em smartphones, tablets e desktop. Olhando como estender recursos elementares com incríveis plugins de terceiros. Portanto, alguns dos recursos que estão faltando no elementary em si poderão estender o Elementor usando plugins de terceiros. Então, se você estiver pronto e animado para começar a aprender a criar lindas landing pages com o Elementor. Estou muito animado para mostrar isso a você sem mais tempo Western. Vamos pular direto para dentro. Certo. 2. Visão geral da página de destino: Então, à medida que nos preparamos para começar, acho que seria crucial para nós analisarmos rapidamente os resultados que deveríamos esperar. Então eu já abri a landing page ou projetei hoje. E aqui está, temos um bar de navegação bonito aqui. Muito simples. O logotipo à esquerda e o menu à direita. E este menu aqui tem um botão, e eu mostrarei como adicionar esse botão à sua barra de navegação, caso você queira que ele se destaque. Vou te mostrar como fazer isso. Então vamos ver como criar essas linhas de pincel onduladas, efeitos especiais havia página de destino. Em seguida, temos a seção de heróis. Muito simples. Duas colunas. A coluna que tem a imagem do herói e a coluna que tem um bloco de texto e esses logotipos de parceiros aqui. Em seguida, temos outra coluna dupla, tem um elemento de imagem e este bloco de texto com um botão aqui. E veremos como fazer isso. Então aqui temos a seção de episódios. Estas são basicamente postagens e mostrarei como criar os episódios como post. E quando alguém clica, ouça, agora ela será redirecionada para a página que tem esse episódio. E eles encontrarão um jogador lá. E eles podem clicar aqui e carregar mais episódios. Haverá redirecionado para a página que tem todos os outros episódios ou mais episódios. Em seguida, temos outra seção de coluna dupla com uma área de imagem e um bloco de texto à direita. Em seguida, temos esta seção aqui que tem um formulário de captura de dados. Alguns dos principais elementos necessários para adicionar sua landing page para torná-la mais eficaz incluem coisas como formulários. Os formulários são importantes porque ajudam você a capturar dados do cliente ou dados do usuário e seus dados importantes para você, pois ajudam você a entender como o seu site está funcionando e permite que você fique em contato com o pessoas que enviaram seus e-mails para você. E temos um rodapé muito simples com um logotipo, a barra de navegação aqui no meio, algum texto de direitos autorais. Então temos esses ícones de mídia social. Isso é basicamente o que estamos construindo. A coisa mais importante aqui para entender é como usar essas ferramentas gratuitas fornecidas pela Elementor e outros plugins relacionados a elementos para criar uma boa página de destino moderna para o seu podcast. E essas habilidades, você também pode criar mais sites, mais landing pages para qualquer outro propósito, não apenas necessariamente podcasts. Vamos começar a projetar. E é claro que vamos começar com a barra de navegação, esta seção aqui. Então, vamos pular para o painel e te vejo na próxima lição. 3. Atualização rápida - o novo assistente de configuração do elemento: Bem-vindo de volta. Agora, esta lição é uma nota rápida ou uma rápida atualização do processo de instalação do Elementor. Se você estiver fazendo esta aula em maio de 2022 e depois, notará que a ativação do Elementor agora tem um assistente de configuração que é composto de várias etapas que você precisa seguir para configurar as partes básicas do seu site. Enquanto eu estava criando essa classe há vários meses, Elementor não tinha esse assistente de configuração. Então, eu só quero que passemos por esse assistente de configuração. Mas tudo o mais que você está aprendendo nesta aula não muda. Ainda é o mesmo processo durante todo o processo. A única adição é o assistente de configuração. Então, como você pode ver agora, eu tenho uma nova instalação do WordPress e estamos na versão 6. E o que eu quero fazer é ir para Plugins, Add New. Assim, podemos adicionar o Elementor e passar por esse processo. Vou procurar a instalação do Elementor agora. E agora, quando eu clicar em Ativar serei redirecionado para esse assistente de configuração. E podemos passar por isso juntos. Então, aqui estamos nós. Vou diminuir um pouco o zoom para que possamos ver mais detalhes. Tudo bem, então agora você notará que a primeira coisa que o Elemental quer que façamos agora é criar uma conta para tirar o máximo proveito do Elementor. Então, esses são alguns dos benefícios de se inscrever em uma conta no Elementor. Mas o problema é que você não precisa ter uma conta Elementor para usar o Elementor. Então eu vou em frente e pular essa parte. O segundo passo é aceitar, continuar com o tema sagrado que Elementor fez para nós. Isso é feito pela Elementor, mas estamos usando o Tema Astra, então vamos em frente e pulamos. Astra é um tema mais poderoso. O terceiro passo é dar um nome ao nosso site. Enquanto você estava instalando seu WordPress. Você deu um nome ao site. Esse é o nome que vai aparecer aqui. Mas isso nos dá a oportunidade mudar o nome para qualquer outro nome que quisermos. Meu site e, em seguida, vamos clicar em Avançar. E se você tiver um logotipo para o seu site e quiser adicioná-lo com antecedência. Você pode simplesmente ir em frente e abrir a biblioteca de mídia e selecioná-la na biblioteca de mídia ou carregá-la do seu computador. Mas não vamos fazer isso agora. Então, vou manter esse passo. E é claro que podemos adicionar o logotipo mais tarde e eu vou te mostrar como fazer isso. Vamos clicar em Ignorar. E agora chegamos à última etapa em que temos duas opções. Podemos começar a editar nossa página inicial a partir de uma tela em branco com o editor Elementor. Ou podemos navegar a partir de centenas de modelos ou importar nossos próprios modelos, se os tivermos. Mas eu vou em frente e pularei. Isso. Será redirecionado para a tela onde agora podemos começar a construir um site. E aqui vamos nós. Então, basicamente isso é tudo que eu queria mostrar a você. É uma nova atualização. Não estava lá há alguns meses. Agora, está lá. Mas todo o resto nas próximas aulas continua o mesmo. O processo ainda permanece o mesmo para criar uma página de destino. Então, sem perder mais tempo, vamos para a próxima lição. Vou até este menu de hambúrguer e clicar em Sair para o painel. Vamos sair desta página. Agora estamos dentro do painel e estamos prontos para começar a criar o site. 4. Instalando os plugins necessários: Bem-vindo de volta. Então, aqui estamos no painel do WordPress. Agora esta é uma nova instalação do WordPress que preparei especificamente para essa classe. Portanto, não tenho nenhum plug-ins instalado agora no momento. Então, se eu puder clicar em plugins, você notará que não temos nenhum plug-ins instalado. A primeira coisa que precisamos fazer para criar a barra de navegação, para instalar alguns dos plug-ins estarão usando, usaremos plugins para criar algumas das coisas aqui dentro. Isso é uma coisa boa sobre o WordPress. Ele permite que você estenda seus recursos e funcionalidades instalando plugins que podem fazer muito mais do que o WordPress pode. próprio Wordpress já tem ferramentas para criar todas essas coisas. Mas os plug-ins tornam o trabalho de criar páginas de destino muito mais fácil porque fornecem ferramentas específicas que são fáceis de usar. Então, a primeira coisa que precisamos fazer é instalar o elementor e quaisquer outros plug-ins serão usados à medida que construímos uma página. Então, vamos voltar ao painel e dentro dos plugins, direi Adicionar novo, ou você também pode clicar em Plugins, Adicionar Novo. Então, vou para Adicionar novo. E dentro da barra de pesquisa, procurarei o Elementor. Lá nós o temos. Instalarei o construtor de sites elementor pelo Elementor.com. E vou rolar para baixo e procurar construtor de cabeçalho e rodapé do Elementor e clique em Instalar. Agora, este é um plugin criado. Então, estenda os recursos e funcionalidades do Elementor. E você notará que muitos outros plug-ins aqui quando você procura por Elementor, compartilham o nome do elemento ou algo Elementor. Isso significa que esses são plugins criados para estender a funcionalidade que vem com o construtor de sites Elementor. Antes de ativarmos esses construtores de rodapé de cabeçalho Elementor e Elementor, também precisamos de mais um plugin chamado efeitos de cabeçalho fixo para Elementor. Então instale isso também. Então, esses são os três plugins que serão usados para criar nossa barra de navegação Elementor. Então, agora que eles estão instalados, vamos entrar na lista de plugins de instalação e ativá-los todos juntos. Então, estamos aqui clicando em plugins instalados. Selecionarei todos eles. E entrarei neste menu suspenso e selecionarei, Ativar e, em seguida, aplicar. Então agora temos os três plugins instalados. Estamos prontos agora para construir nossa barra de navegação. Então, vamos fazer isso na próxima lição. 5. Instalando o tema Astra WordPress: E bem-vindo de volta. Então, a próxima coisa que queremos fazer agora que temos plugins instalados é instalar um tema. Então, agora, o que precisamos fazer é entrar em temas de aparência. E como esta é uma nova instalação do WordPress, por padrão, o tema 2021 está ativo. Em seguida, temos os temas 2019 em 2020 que são, que são opcionais e você pode ativar qualquer um deles. Mas eu gostaria de adicionar um tema de terceiros chamado Astra. Astra é um dos temas gratuitos mais poderosos do mercado. E é um tema multiuso que você pode usar para criar qualquer tipo de site que você possa imaginar. Digamos que você queira construir um site de dentista, você quer construir um site da escola, você quer construir um site para um advogado. O Astro ajudará você a fazer isso porque ele vem totalmente repleto recursos e ferramentas para ajudá-lo a criar sites sem falhas. Então, vamos digitar Astra na barra de pesquisa aqui. E é um primeiro resultado que sai aqui. Então, digamos instalar. Tudo bem, então agora vamos ativá-lo. E agora você pode ver que é o tema ativo no momento. Então, agora que temos o tema instalado e nossos plugins estão prontos, vamos ter uma visão geral rápida do espaço de trabalho, o espaço de trabalho Elementor, enquanto você estará olhando quando estiver projetando seu site. E faremos isso na próxima lição. 6. Visão geral do elemento ou espaço de trabalho: Bem-vindo de volta. Vamos continuar. Então, já temos nosso tema e alguns dos plug-ins estarão usando já estão instalados. Então, vamos ter uma visão geral rápida do espaço de trabalho à medida que construímos a barra de navegação. Então, na aparência, vou até o construtor de cabeçalho e rodapé do Elementor. E, claro, porque é uma nova instalação do construtor de cabeçalho e rodapé. Não temos cabeçalhos ou rodapés listados aqui, mas quando começarmos a criar os nossos, eles serão listados aqui. Então, digamos Adicionar novo. E então vamos dar um nome, barra de navegação. E você notará que temos todas essas opções aqui. Então, no lado direito, temos essa configuração de modelo em atributos de postagens. Então mude-o para Elementor largura total. E, em seguida, um astro configurações. Essas são as configurações que acompanham o tema. Queremos definir a barra lateral para saber a barra lateral, porque não queremos uma barra lateral, sem barras laterais. E queremos que o layout do conteúdo tenha uma barra de largura total esticada. Em seguida, queremos desativar algumas dessas seções. Não queremos o cabeçalho primário padrão que vem com o Astra. Também não queremos o cabeçalho móvel que vem com o Astra. Nem queremos o título ou o rodapé. Então, vamos publicar isso por enquanto. Tudo bem, Agora você notará que temos esse tipo, tipo de opção de modelo aqui, e ele tem um menu suspenso. Então, selecione o cabeçalho no menu suspenso e isso revelará mais opções. Exibir em todo o site se você quiser que ele seja exibido em partes específicas do site ou do site inteiro, ou mesmo em uma única página, temos todas as opções que acompanham este plugin. Portanto, um é visível em todo o site e nas funções do usuário. Então, quem pode usá-lo, quem pode ter acesso à barra de navegação e quem pode editá-la caso você tenha outras pessoas trabalhando em seu site e você seja o principal administrador do Wordpress. Você pode permitir, você pode definir quem pode editar esse cabeçalho e rodapé. Então, selecione Tudo. E vamos disponibilizá-lo para o modelo Canvas. E o Canvas é uma das opções abaixo dos atributos de post. Lembre-se que dissemos esses dois Elementor de largura total. Também temos tela elementor. E à medida que você se acostuma a usar o elementary, você entenderá quais são os modelos. Mas, por enquanto, saiba que, se quisermos obter esses resultados em nossa página, precisamos trabalhar com a largura total do Elementor, e isso é, esse é praticamente o modelo que eu uso para quase todas as páginas da web que criei. Agora, com essas opções, vamos seguir em frente e clicar em Atualizar. E agora estamos prontos para editar com o Elementor. O que estávamos fazendo agora era criar se eu pudesse voltar à aparência, Elementor, cabeçalho e rodapé construtor. Então, o que acabamos de criar é que a barra de navegação aqui também criará uma pasta, mas faremos isso mais tarde. Então, agora temos a Napa. E se clicarmos em Editar voltará aqui onde pudermos, onde podemos configurar todas as configurações. Mas para construí-lo visualmente, parecer assim, no front-end, agora precisará ir e editar com Elementor será redirecionado para o front-end de onde agora poderemos começar a montar a coisa toda. E agora isso nos dá uma ótima oportunidade de ter uma visão geral do espaço de trabalho Elementor. Então, aqui estamos no espaço de trabalho Elementor. É aqui que faremos toda a nossa edição no front-end. Basicamente, o que vamos fazer é arrastar qualquer elemento que precisamos desses painéis aqui. Deixe-me entrar em colapso isso, aquilo e aquilo, e todos eles. Portanto, todas essas tintas aqui contêm elementos e esses elementos podem ser arrastados e soltos aqui, dependendo do que você deseja adicionar. Então, por exemplo, se quisermos adicionar, digamos, por exemplo, escolhemos essa coluna tripla, você vê que ela foi gerada. Então, se quiséssemos adicionar algo lá dentro, clicaríamos nesse Plus. E esses elementos aparecerão aqui e podemos arrastar o que quisermos lá dentro. Se quisermos adicionar algo aqui, vamos clicar no botão Mais e arrastar os elementos de uma imagem para lá. E enquanto a imagem ainda estiver selecionada, podemos editar coisas aqui. Podemos adicionar essa imagem. Insira mídia. Podemos arrastar e redimensionar as colunas. Basicamente, no Elementor, trabalhamos com colunas. A área azul aqui que tem três colunas é chamada de seção. E a seção é uma coluna tripla. E existem diferentes tipos de seções aqui. E você também pode criar o seu próprio. Por exemplo, se criarmos uma única seção de coluna que tenha uma única coluna aqui, poderemos duplicar essa coluna assim. Apenas no caso de você passar o mouse sobre os elementos, você não vê esses menus pop-up assim. Entre essas preferências e entre nas preferências do usuário e certifique-se de que as alças de edição estejam definidas como sim. Deixe-me voltar. Então, basicamente, você apenas arrastando itens para colunas. E quando o item que você acabou de arrastar estiver ativo, você pode fazer alterações nele porque observe que quando isso é selecionado, ele diz Editar divisor porque é um elemento divisor quando você clica no Texto aqui, observe que ele muda para editar cabeçalho. Se clicarmos na imagem, ela mudará para editar a imagem para nos dizer que esse é o item atual que estamos editando agora. E assim podemos fazer qualquer tipo de alteração que quisermos. Configure esta imagem para ser maior, para ser opaca, adicione sombras soltas a ela e todas essas coisas e veremos como fazer tudo isso. Eu só queria dar uma visão geral rápida do que você deve esperar em seu espaço de trabalho elementar. Então, você se acostuma com isso à medida que avançamos. Lembre-se, se você abrir esses outros painéis aqui ou esses painéis, você notará que temos o painel Pro que tem elementos aos quais você só tem acesso se você for um membro do Elementor Pro. Se você tem o Elementor Pro, agora estamos usando a versão gratuita do Elementor. Mas lembre-se que também instalamos plugins de ferramentas para o Elementor. Esse era o construtor de cabeçalho e rodapé Elementor. E efeitos de cabeçalho pegajosos, está em algum lugar aqui. Mas basicamente, sempre que instalamos um plugin que foi criado para estender o Elementor, você o encontrará listado aqui e ele vem com seus próprios elementos para estender o poder do Elementor. Então isso é algo que você deve se lembrar. Então, não quero aborrecê-lo até a morte. Vamos entrar e começar a criar este site agora mesmo. Então deixe-me me livrar de tudo agora. Vamos atualizar essa página. E esqueci de lhe dizer o que temos aqui embaixo. Então, temos que é aqui que estaremos atualizando nosso progresso. Se quisermos visualizar as alterações, é aqui que clicaremos e mostrarei quando faremos isso. Então aqui, é aqui que clicamos quando estamos prontos para tornar a página responsiva, quando queremos projetá-la para ser responsiva no celular e no tablet. Então a próxima coisa aqui é a história. Então, se clicarmos nisso, você verá uma lista de todos os movimentos que fizemos desde que começamos a editar a página. E se, por exemplo, clicarmos neste ponto no tempo. Como você pode ver, esse ícone parece um relógio se movendo no sentido anti-horário. Isso mostra que isso é como rebobinar e voltar no tempo. Então, se clicarmos nisso, ele nos levará de volta ao estado em que a página estava durante esse momento. Então, se voltarmos à Seção adicionada, esse foi um momento em que adicionamos uma seção. Então essa é a história. Então aqui temos o navegador apenas para o caso de você ter tanta coisa aqui na sua página que você nem sabe onde está quando está editando coisas. Você pode clicar neste navegador e agora poderá ver um detalhamento de tudo o que você tem em sua página como um esboço. E aqui temos mais alterações, mais configurações que aprenderemos à medida que progredirmos. E aqui mesmo no topo, apenas no caso de você querer adicionar algum, um elemento daqui e talvez você esteja lá dentro. Digamos, por exemplo, deixe-me adicionar algo aqui rapidamente. Título lá. E agora, porque isso é o que está ativo, edite o título da página , se quisermos adicionar algo aqui, não precisamos necessariamente clicar nisso e podemos simplesmente ir diretamente e clicar nesse ícone aqui. E Ido revela as tintas, todas as dores. Então, se, por exemplo, você não estiver, você pode ver as tintas e deseja adicionar algo. Clique nele e ele revelará as dores e você poderá selecionar o elemento que deseja arrastar. Tudo bem, então isso é suficiente sobre o espaço de trabalho por enquanto. O resto ficará sabendo à medida que progredirmos com o nosso Ocidente mais tempo, vamos entrar e começar a projetar o cabeçalho visualmente. Na próxima lição. 7. Como adicionar o logotipo da empresa: Então, bem-vindo a esta lição. Agora que tivemos uma visão geral do espaço de trabalho elementar, é hora de começar a adicionar esses elementos. Então, a primeira coisa que queremos fazer é adicionar o logotipo da empresa. Então, voltando para dentro da barra de navegação, o que precisamos fazer é selecionar uma coluna dupla. E esta seção de coluna dupla é dividida assim. É claro que será capaz de redimensioná-lo à medida que progredirmos para dar o tamanho certo. E eu sugiro que você faça o mesmo agora, o que vai adicionar deste lado é esta barra de navegação, menu de navegação. E no lado esquerdo adicionará o logotipo. E o logotipo é um elemento de imagem. Então clique nesse sinal de mais ali mesmo. E sob o painel básico, deixe-me colapsar isso sob o painel básico, que contém os elementos básicos de qualquer site. Vamos escolher o elemento da imagem e soltá-lo lá. Sem clicar em qualquer outro lugar. O elemento ativo a ser editado agora é a imagem. Só para confirmar, basta clicar nele, e isso aparecerá aqui. Então, vamos escolher um clique de imagem lá dentro. Não temos nenhum elemento por enquanto, então deixe-me fazer upload de um arquivo. E eu já preparei esta pasta para você. É chamado de classe de landing page de Podcasts, e eu fornecerei na descrição abaixo, não se esqueça de baixá-lo. Ele contém todos os elementos que usamos no site. Então, dentro dessa pasta, temos ativos do projeto e temos todas as imagens, incluindo os logotipos. Então, vou clicar duas vezes nisso e importar os logotipos ou a RI. E então você notará que temos dois logotipos grandes e dois logotipos pequenos. Usaremos os pequenos logotipos para a marca do site. E eu adicionei esses dois apenas no caso de você precisar adicionar o logotipo em qualquer outro lugar e ser criativo com ele. Então eu vou com este que tem o elenco em branco. Então, vou selecionar isso. Em seguida, insira mídia. E você notará que a parte branca não está visível porque o fundo em si é branco. Então, o que queremos fazer é mudar o fundo para este azul. Então, vamos lá dentro. E selecionaremos toda essa seção, a seção azul que tem as duas colunas. E só para ter certeza de que você está editando isso, ele deve dizer a seção Editar aqui. E assim entrando no estilo, vamos entrar no estilo. Em segundo plano. Clique no primeiro ícone de pincel aqui e clique aqui ao lado da cor. E vamos dar esse azul. E em vez de adivinhar esses códigos de cores, eu já havia criado essa cor azul e disse o suficiente. Neste arquivo, ativos do projeto. Fornecerei este guia do projeto README dentro da pasta de classe da página de destino do podcast sobre a qual acabei de falar. Então deixe-me abrir isso. E como você pode ver, temos cores diferentes aqui, o belo azul, verde claro e cinza escuro. Mas é claro que você pode usar suas próprias cores. Então eu vou copiar esse belo azul. Copie isso. Deixe-me minimizar isso, feche essa pasta. E aqui, fundo, cor normal. Vou colá-lo lá dentro. E agora temos esse plano de fundo e o logotipo está visível. Vamos atualizar isso. E vamos visualizar as alterações. Então, lá temos isso. Nosso logotipo está pronto com boa aparência. A próxima coisa que queremos fazer é adicionar o menu nav. Então, vamos seguir em frente e fazer isso na próxima lição. 8. Como adicionar o menu de navegação: Bem-vindo de volta. Vamos continuar o tempo agora para adicionar o menu de navegação aqui. E como você pode ver, temos quatro itens de menu, página inicial Contato Home About Us. E essas são essencialmente páginas da Web. Quando você clica em qualquer item aqui, ele deve levá-lo à página. Por exemplo, Sobre nós o levará a uma página Sobre nós. Então, essencialmente, a primeira coisa que precisamos fazer é criar essas quatro páginas. Então, voltando para dentro do espaço de trabalho elementar, vamos clicar neste sinal de mais perto deste sinal de mais aqui. E aqui, digite nav, nav. E lembre-se de que um dos plugins que instalamos foi o construtor de rodapé de cabeçalho para Elementor. Então, um dos elementos do Menu de Navegação aqui será o menu de navegação com este HF na esquina. Então esse é o que precisamos. Vamos arrastar e soltá-lo lá. E uma vez que fizermos isso, o menu ainda não aparece. Então, por que ele precisa aparecer? Porque não há menus em seu site e diz claramente que não há menus em nosso site. Então, precisamos criar um menu do WordPress, que usaremos esse elemento, esse elemento de menu de navegação para exibir. Vamos exibi-lo aqui. E então, como fazemos isso é, primeiro lugar, deixe-me atualizar isso. Vamos atualizar isso. Então, vou pular para dentro do painel sem fechar este espaço de trabalho agora. Então, aqui, precisamos entrar nos menus de aparência. Então, será redirecionado para esta página. E é aqui que podemos criar menus para o nosso site, estamos menus de imprensa e você notará que, em menus, diz criar seu primeiro menu abaixo. E então podemos dar um nome no menu. Então, talvez algo como novo menu. E vamos torná-lo nosso menu principal. Então, vamos criá-lo. Agora, o menu foi criado, mas não temos itens. Veja aqui, diz Adicionar itens de menu da coluna à esquerda. E a coluna à esquerda à direita aqui adicionou muitos itens e um dos itens de menu aqui pode ser uma página da Web, pode ser páginas da web, e podemos adicionar páginas da web, que vai fazer agora. Mas, mas os itens do menu também podem ser postagens. Por exemplo, você pode ter postagens de blog, uma postagem de blog e outra postagem de blog e, em seguida, outra postagem no blog. Isso também é possível. Você também pode criar seus próprios links personalizados. Então você pode criar um link aqui, hey, HTTP, WW pontuar algo e, em seguida, o texto do link talvez você queira dizer calculadora e, em seguida, adicionar esse item de calculadora aqui para que, quando alguém clicar nele, eles sejam redirecionados para este URL. Você também pode ter categorias como itens de menu. Então, o que queremos fazer é criar as quatro páginas da Web às quais queremos que o menu nav leve. Então, vamos entrar nas páginas. E, obviamente, não tenho nenhuma página porque esta é uma nova instalação do WordPress. Então, direi Adicionar novo. E irei em frente e fecharei isso. E temos esse espaço de trabalho aqui. Este é o editor de back-end que vem com o WordPress e se chama Gutenberg. E isso é o equivalente ao Elementor, o que temos aqui, temos um editor que podemos usar no editor padrão do WordPress front-end é chamado Gutenberg e funciona no back-end aqui. Mas o que queremos fazer é dar um nome a esta página e editar com o Elementor. Então, vamos dar qualquer nome. E então, no lado direito aqui, antes de apertarmos Publicar, vamos para o modelo e defini-lo para Elementor largura total. E aqui abaixo Atributos da página, configurações do Astra, digamos que não haja barra lateral e layout de conteúdo, largura total esticada. Então vamos em frente e desabilite esses três como de costume, desabilite o rodapé também. Em seguida, publique. Agora que foi publicado, vamos voltar para as páginas menos. E agora está listado aqui. Quero criar mais três páginas para que tenhamos quatro páginas. Então, vou avançar essa parte e criar mais páginas. Então continuaremos a partir daí. Tudo bem, então agora estamos de volta. Criamos quatro páginas. Espero que você tenha feito o mesmo. Você pode criar quantas páginas quiser, desde que elas possam alimentar aqui. Agora que temos nossas páginas prontas, podemos usá-las como itens de menu. Então, vamos entrar nos menus de aparência. E agora você notará que, em páginas, temos as quatro páginas que acabamos de criar. E essa parte do novo menu que criamos nos diz que podemos adicionar itens da coluna à esquerda. Então, vamos verificar todos eles. E, em seguida, adicione algum menu. Veja o que acontece ou pedale. Então, todos foram trazidos aqui e podemos usá-los como nossos itens de menu, da mesma forma que são empilhados de cima para baixo. Será exibido da esquerda para a direita na mesma ordem. Portanto, gerar cotação será o primeiro item aqui. Então vou arrastar para casa aqui para ser o primeiro item que o trará aqui. Arraste para casa para ser o primeiro item à esquerda, depois o blog e depois a loja. E então direi Salvar Menu. Agora, nosso menu WordPress está pronto para ser exibido com o rodapé do cabeçalho. Construa um plug-in que colocamos no front-end usando o Elementor. Então, indo para a frente desta página no espaço de trabalho elementar e depois de salvar nossas alterações, pressionarei Control R para atualizar a página. E agora você notará que o menu está sendo exibido agora. Então vou em frente e selecionarei. Clique em qualquer lugar dentro da linha azul, dentro da borda azul. E você notará que a mensagem que estava aqui mudou porque agora temos um final de menu. Este é o menu que criamos, o novo menu. Novo menu e os itens que criamos essas páginas da Web que adicionamos como itens de menu ao novo menu agora estão sendo exibidos aqui no front-end. Agora vamos querer que este menu esteja do lado direito. Então, enquanto ainda estiver selecionado no menu Conteúdo, você notará que temos o último menu. Primeiro de tudo, vamos colocar isso para ser um botão. Gerar cotação mudará para um botão como esse. Então vamos abrir o Layout. Sob alinhamento. Vamos para a direita. E queremos que o menu seja de cor branca. Então, antes de tudo, colapsou esse layout e entrou no estilo. Então, no menu principal, temos muitas opções e se eu entrar em colapso o menu principal, teremos quatro tintas. Então deixe-me abrir primeiro o menu principal. Então podemos ir aqui onde diz pornografia. Vou clicar em Topografia e vamos mudá-la para Montserrat. Deixe-me rolar ali mesmo. Então eu cliquei em tipografia, família. E então, na caixa aqui, digite meses ao redor. Assim, uma fonte que parece incrível, mas você pode escolher qualquer fonte que quiser. Clique em qualquer lugar fora dessa caixa. Em seguida, realize a cor do texto. Vamos clicar nessa cor ali e vamos mudá-la para branco. E você notará que ele está mudando muito em tempo real. Vamos atualizar isso. Agora queremos trabalhar com esse tom de verde que rima com o logotipo. Deixe-me arrastar isso um pouco. Então, vou pular para onde tínhamos nossas cores e escolher este verde claro. Copie isso e volte para onde estamos trabalhando. E, sob topografia, alteramos a cor do texto para branco ou estado normal. Mas ao passar o mouse, agora ele tem esse tom de verde, mas queremos o tom de verde. Então, no mouse, vai querer clicar nisso e colar aquele lindo verde ali mesmo. Não, deixe-me escolher isso. Copie isso e cole-o lá. Cole-o lá. E quando passamos o mouse sobre ele agora que tem esse tom de verde, vamos mudar esses botões de cor verde. Então, clicando em qualquer lugar fora desta caixa para me livrar dela, vou recolher o menu principal e abrirei o botão. E, em Tipo de plano de fundo, clicarei nesse ícone de pincel. Ele revelará esse verde atual. Vou clicar nisso. E depois vou me livrar disso e colar o verde do qual copiamos, do documento de texto. E agora tem esse tom de verde, mas agora o próprio, esse texto está desaparecendo, então queríamos permanecer brancos. Então, clicando lá fora para a cor do texto ao passar o mouse, queremos que a cor do texto permaneça branca. Então, ao passar o mouse, ele permanece branco ou podemos mudá-lo para este azul. Então, antes de tudo, vamos atualizar isso. E vamos visualizar as alterações. Ou RI. Então nosso navbar está tomando forma. Gosto do que estou vendo, mas é claro que precisaremos fazer mais algum trabalho para equilibrar essa margem aqui. Mas vamos fazer isso, não se preocupe. Então, de volta aqui, o que precisamos fazer é passar o mouse vai querer que o texto mude de cor. Portanto, enquanto todo o elemento ainda estiver selecionado clicando em qualquer lugar dentro da borda azul, vou até este documento de texto e copiarei o azul agradável. Copie isso. E então aqui, eu quero ir, enquanto ainda estamos editando o menu de navegação. Textos em pairar devem mudar para esse Lou. Agora, quando passamos o mouse sobre ele, ele muda para esse azul. Então, vamos rever as alterações. Ou RI, incrível, eu gosto disso. Então, lá temos isso. A próxima coisa que queremos fazer é trabalhar neste pincelada aqui mesmo antes de passarmos para a seção de heróis. E faremos isso. Bem, estamos fazendo a seção de heróis porque esse pincel é realmente parte desta seção, não parte da barra de navegação. Então acabamos com a barra de navegação. Vejo você enquanto estamos trabalhando na seção de heróis na próxima lição. Vejo você em breve. 9. Como adicionar a imagem de herói: Bem-vindo de volta a outra lição. Agora estamos prontos para construir uma seção de heróis. Agora que nossa barra de navegação está pronta, agora é hora de construir a seção de heróis. E esta seção de heróis é dividida em duas colunas. A coluna que tem a imagem e a coluna que tem o texto do herói e esses ícones aqui. Então, a primeira coisa que queremos fazer é adicionar a imagem do herói. Então, vamos seguir em frente e fazer isso. Então, aqui dentro, quero fechar esta página porque não estamos mais usando esse espaço de trabalho. Lembre-se, estávamos construindo o bar de navegação. Agora que terminamos de editar a barra de navegação, podemos ter certeza de que, antes de tudo, salvamos nossas alterações. Então, se você, se estiver verde, clique em Atualizar. E então sim, vamos sair para o painel. Então, agora podemos criar a página de destino em si. Então, aqui estamos no back-end entraremos nas páginas porque nossa landing page é definitivamente uma página. E podemos escolher uma dessas páginas para ser a landing page. E por padrão, eu só queria ser a página inicial. Então, vamos clicar em Editar em Início. E, claro, será levado aqui porque estamos presumindo que você deseja editá-lo aqui mesmo no back-end usando Gutenberg. Mas queremos clicar em Editar com Elementor para que possamos começar a criá-lo visualmente. Tudo bem, então aqui estamos nós. Agora. Primeiro de tudo, uma vez que você abre o espaço que a única coisa que você notará é que essa barra de navegação agora não é editável. Este não é o espaço de trabalho para editar a barra de navegação. Para fazer isso, teríamos que voltar para dentro do painel em Appearance Elementor, cabeçalho e rodapé. E, em seguida, na barra de navegação, clicaríamos em Editar e editar com o Elementor. E iríamos para o front-end e podíamos editá-lo. Mas agora, vou fechar isso. E agora aqui estamos editando a página de destino em si, o conteúdo principal da landing page além do cabeçalho e do rodapé. Então, vamos em frente e adicione, vamos em frente e adicione nossa imagem de herói. Então, vou clicar nisso para adicionar uma coluna dupla. Porque você já pode dizer que é uma coluna dupla. Vou arrastar a borda um pouco porque a imagem não é tão grande quanto o TextContent. E aqui, adicionarei um elemento de imagem assim. Em seguida, vou clicar lá. E porque eu não tenho essa imagem aqui, teremos que entrar. Deixe-me fazer upload dessas imagens da nossa pasta. Lembre-se que eu mencionei que você pode obtê-lo, você pode baixá-lo na descrição abaixo. Então vou entrar na imagem dos modelos e vou fazer o upload desta. Certas mídias. E lá temos isso. Em seguida, queremos adicionar os textos hebraico junto com esses ícones aqui. Então, vamos fazer isso na próxima lição. 10. Como adicionar o bloco de texto de herói: Então, agora é hora de adicionar esse bloco de texto herói. Uma coisa que preciso mencionar é que é importante que você tenha um H1 em sua landing page ou em qualquer página para esse assunto. No caso de você não saber sobre cabeçalhos HTML. Html tem seis níveis de cabeçalhos. O maior é H1 e o menor é H6. H1 é o mais importante e é o que diz aos navegadores e mecanismos de busca do que é sua página da Web em termos simples em uma frase curta. Portanto, tenha isso em mente. Você não pode ter mais de um H1 em sua página, mas você pode ter vários H2, H3, H4, H5 e H6. E vamos em frente e pular para dentro do espaço de trabalho. E então a primeira coisa que precisamos fazer é clicar neste sinal de mais para abrir esses elementos e arrastar o cabeçalho do texto ali. E você notará que diz que adicione seus textos de cabeçalho aqui e podemos fazer isso aqui. Então eu acho que diz: Bem-vindo aos podcasts. Podcasts, certo? Assim, e faça dela uma frase como essa. E agora, enquanto ainda estiver selecionado, vamos entrar no estilo, cor do texto e vamos alterá-lo para 40, 40, 40. Então isso é um cinza escuro, não preto, é um cinza escuro. E digamos que vamos clicar em qualquer lugar, vamos clicar em qualquer lugar fora da caixa para se livrar dele. Vamos atualizar isso. E enquanto está atualizando, vamos para dentro da topografia. E vamos mudar a família dois meses ao redor. Vamos pegar esse botão de tamanho aqui e puxá-lo para aumentar o tamanho. Vamos deixá-lo em algum lugar lá por enquanto. Claro, vamos ajustá-lo até termos os resultados que estamos procurando. Eu só queria ficar baixo para que você entenda as coisas que estamos fazendo. Então clique fora em qualquer lugar lá. E a próxima coisa que queremos fazer é criar essa descrição aqui. Então, vou copiar isso. E eu vou clicar neste pequeno ícone aqui para abrir esses elementos. E então eu arrastarei esse editor de texto. E quando essa linha azul aparecer abaixo do elemento h um, vou deixá-la lá. Agora, enquanto ainda estiver ativo, selecionarei todos esses textos excluídos e colarei o que acabamos de copiar daqui. Em seguida, atualize isso. Agora, antes de prosseguirmos, acabei de lembrar que, se selecionarmos o H1 aqui, na verdade, não o definimos para ser um H1 sob o conteúdo, enquanto isso é selecionado na guia de conteúdo, aqui embaixo, HTML deve mude para hey, um. E como você pode ver no menu suspenso, temos H um todo o caminho para odiar procura então esses outros elementos. Mas queremos que seja um. E vamos atualizar isso. Tudo bem, então vamos visualizar as alterações. Então é isso que temos no momento. Então, a primeira coisa que você notará é que precisamos empurrar esses itens para baixo. Então, vamos fazer isso. Vamos aumentar a margem no topo. E fazemos isso selecionando toda a seção, toda esta seção, aqui, clique com o botão direito mouse e edite a seção. E agora é o elemento ativo aqui. Vamos entrar avançado. E vamos remover este link e dar a ele uma margem superior de 100. Vamos fazer isso 80 anos, e vamos atualizar isso. E vamos visualizar as alterações. Ou certo, então é isso que temos. A próxima coisa que queremos fazer é adicionar esses pinceladas aqui. Então, vamos entrar. Deixe-me fechar essa pré-visualização e vamos entrar em nosso espaço de trabalho. E eu vou clicar na seção em si. Então, para aumentar a margem no topo aqui, vamos fazer isso dentro das próprias colunas. Vamos entrar nessa coluna, selecioná-la, e agora é elemento ativo, estamos editando. E vamos entrar avançado, quebrar este link. E então, para a margem superior, vamos dar algo como 70. Agora isso é 770 para o modelo também. Vamos seguir em frente e clicar na coluna dele. E então vamos entrar avançado. Quebre esse link. Vamos manter essa coluna 50. Sim, 50, margem superior. Vamos atualizar seu próprio direito, então vamos revisar as alterações. Impressionante, então é isso que temos no momento. 11. Como adicionar efeito de pincelada de heróis: A próxima coisa que queremos fazer é adicionar essas pinceladas aqui. Então, queremos adicionar esse efeito de pincel. E fazemos isso nisso, no topo da seção. Como você pode ver, essa seção agora está se cruzando com a barra de navegação superior. E assim podemos adicionar essa pincelada aqui. Então, vamos selecionar a seção em si clicando nessa área lá ou clicando com o botão direito do mouse e edite na seção. E então vamos entrar no divisor em forma de estilo. E então queremos dizer para o divisor de forma superior, queremos pincel de ondas neste menu suspenso, você pode escolher qualquer opção que desejar. Mas, neste caso, queremos ir com ondas, pincel e, em seguida, queremos dar uma altura. E agora você não pode vê-lo porque, por padrão, ele não tem nenhuma cor. Então, o que queremos fazer é copiar esse azul, essa cor azul aqui. Então eu vou fazer uma guia, então nesta página aqui, você já tem isso na descrição abaixo. Vou copiar esse belo azul. Então vou voltar aqui. E enquanto nosso divisor de forma de ladrilho sexualmente selecionado e estamos insights entrará na área superior e mudará a cor para esse azul. Então agora já está tomando forma. Vamos tentar dar talvez uma altura de 60. E vamos atualizar isso. E vamos visualizar as alterações ou pedalar. Então eu gosto de como estamos indo? Mas agora observe que essa curva agora reduziu a margem aqui. Precisamos aumentar a margem nesta coluna. Então, vamos selecionar esta coluna quando passarmos o mouse sobre ela. Vamos entrar avançado. Vamos aumentá-lo para, vamos usar nosso olho em algum lugar lá. Para mim, são 110. Atualize isso. Agora. Agora você pode estar se perguntando, espere um minuto novamente, esses podcasts, podcasts em nossa página de referência são um pouco mais grossos do que bem-vindos ao. Então, o que está acontecendo ali? Agora, existem dois métodos que podemos usar para alcançar esses resultados aqui. Então, se voltarmos ao nosso espaço de trabalho, o primeiro método que podemos usar é excluí-lo, então vou destacar isso. Então. Deixe-me destacar isso, depois Control X para cortá-lo. E agora que ficamos com isso, podemos duplicar isso. E, enquanto isso estiver selecionado, podemos colar esse texto lá. E então podemos editar cada um deles individualmente. Então eu posso vir e dizer, para que eu possa fazer isso um pouco menor, talvez algo como 44. E, em seguida, selecione essa tipografia de estilo lateral. Posso dar-lhe um peso de 800. E agora é mais espesso que este outro. Eu posso dar a isso um peso de, enquanto ainda está selecionado sob tipografia de estilo, dar-lhe um peso de 300. Assim, atualize as alterações. Então, lá temos isso. Então, se visualizarmos as alterações na própria página, é isso que temos. E parece algo semelhante a isso. Mas agora há um atoleiro aqui. Enquanto separamos o, bem, separamos os dois. Agora. Agora temos dois H 1s e não queremos que eles sejam 20. Qual deles está nesta landing page, precisamos apenas de um H1. Portanto, não podemos ter os dois como H 1s. Tão fraco o que podemos fazer é selecionar isso e, em conteúdo, alterá-los para H2. Então, digamos isso e visualize as alterações. Vamos visualizar as alterações. E temos algo próximo ao que temos na página final. Mas é claro, como você notará, nossa descrição aqui é um pouco mais longa do que a nossa referência. E isso porque, antes de tudo, precisamos, antes de tudo, fazer essa coluna um pouco mais estreita. Então, vamos pegar isso e puxar isso até provavelmente esse ponto. Isso significa que precisamos reduzir o tamanho do podcast até esse ponto. Em seguida, atualize isso e visualize as alterações. Tudo bem, incrível. Então é aqui que nossa seção em destaque irá e queremos adicionar esses ícones aqui. Então, vamos ver como fazer isso em nossa próxima lição. 12. Como adicionar ícones de destaque de heróis: Tudo bem, então agora é hora de criá-los em destaque na seção. Então, voltando ao nosso espaço de trabalho aqui, a primeira coisa que queremos fazer é adicioná-los em destaque. Então vou em frente e pegar isso, copiar isso. Em seguida, entrarei aqui e clico nesse ícone, arraste um cabeçalho. Quando a linha azul aparecer lá, solte-a lá. E agora, como é o item ativo aqui, posso colar o destaque em textos ali mesmo. E por enquanto é um pouco grande, então vamos fazer isso, em primeiro lugar, vamos mudar sua cor para 40, 40, 40. E então vamos mudá-lo para Roboto. É um monstro. Ok. E vamos reduzir seu tamanho para talvez algo como 18. Peso da fonte 700. E vamos atualizar isso. Ou certo, a próxima coisa que queremos fazer é criar esses ícones aqui. E esses ícones são mantidos dentro de colunas. Portanto, esta é uma interseção e outra interseção com colunas dentro dela. Então, a primeira coisa que queremos fazer é entrar aqui e selecionar uma interseção. E isso é basicamente uma seção que pode ser deixada dentro de outra seção ou dentro de uma coluna. Portanto, não posso soltar toda essa seção dentro de outra seção, mas posso carregar uma interseção e soltá-la dentro de uma coluna ou outra seção. Então, lembramos que podemos duplicar colunas, então vou duplicar isso também. Então agora temos três colunas. E, como você pode ver, ele já está começando a tomar forma. N é você adivinhou aqui. Adicionaremos elementos de imagem. Então, o que eu quero fazer é apenas estilizar um dos elementos e, em seguida, podemos simplesmente duplicá-los e adicioná-los dentro do resto das colunas. Então, para esta imagem, vamos seguir em frente e abrir arquivos. Selecione arquivos. E eu quero navegar dentro do parceiro de podcast, logotipos de parceiros de podcast. E selecionarei todos eles porque queremos usar todos eles. Então, agora que isso já está carregado, deixe-me selecioná-lo e inserir mídia. Esse é o primeiro. Então clique com o botão direito do mouse em Editar Coluna e, em seguida, vá para o avançado saber Vamos primeiro entrar no estilo, e vamos para Borda. sombra da próxima caixa está no ícone Editar, então clique nele. E no momento em que você fizer isso, você notará que a sombra da caixa aparece e podemos começar a estilizá-la. Então, a única coisa que eu quero fazer por enquanto é reduzir a opacidade para que seja, a sombra da caixa seja menos visível assim nesse ponto, talvez um 22. E então eu vou clicar em algum lugar dentro, há um é desfocado um pouco mais e depois espalhá-lo um pouco mais. Digamos até esse ponto. Eu também quero reduzir, vamos reduzir um pouco essa opacidade. E com isso, vamos clicar fora desta caixa e vamos fazer com que o raio da borda seja algo como 10. E vamos atualizar isso. Isso lhe dá um canto arredondado como esse. Então, vamos ver o que temos. Vamos visualizar as alterações. Então é isso que temos no momento, você notará que esse logotipo parece ser muito pequeno. Vamos ver o que podemos fazer sobre isso. Clicando enquanto a coluna ainda estiver ativa. Só para confirmar, quero vir aqui e quebrar este link. Agora isso diz redefine todo o preenchimento ao redor do logotipo. E vamos deixar assim por enquanto, eu gosto do tamanho. Então, o que queremos fazer a seguir é selecionar a imagem em si, mouse sobre a imagem. Não esta é a coluna, e então esta é a imagem. Quero duplicar isso. E, mais uma vez, duplique lá, solte isso lá, arraste e solte-o lá. E, em seguida, selecionarei esta coluna aqui, clique com o botão direito do mouse em copiar. E vou dizer com o botão direito do mouse. Estilo de colar. E agora eles herdam isso agora, essa coluna também obtém o estilo da primeira coluna. E farei o mesmo para esses estilos de colar com o botão direito do mouse. Agora, as três colunas têm o mesmo estilo, mas observe que ainda há tocando nas laterais. Queremos aumentar a margem. Então, enquanto isso ainda estiver selecionado, Editar coluna avançado, Vamos quebrar esse link. E então, para a margem esquerda, vamos dar um cinco. E para a margem certa, Outros cinco. Tudo bem, então vamos clicar com o botão direito do mouse em copiar e vamos colar esse novo estilo, colar estilo. Vamos fazer o mesmo aqui. Cole o estilo e agora temos espaçamento suficiente em torno deles. Atualize isso. E vamos visualizar as alterações ou corretamente. Então, a próxima coisa que queremos fazer é clicar aqui dentro, e isso selecionará a imagem em si, não a coluna. E enquanto a imagem estiver selecionada, vamos escolher uma segunda rota de barramento de logotipo. Vamos fazer o mesmo aqui. Vamos selecionar o terceiro logotipo, o Google Play. E agora que temos esses três, vamos duplicar essa seção assim. E vamos repetir o mesmo aqui. Podcasts da Apple. Vamos escolher um logotipo Ford, depois o quinto logotipo e, em seguida, o último logotipo, ou certo. Mas agora observe que eles estão tocando na parte superior e inferior. Então, precisamos aumentar a margem superior nesta seção. Então, o que precisamos fazer é selecionar a interseção de seção em si, ir para Avançado, remover esse link ali mesmo. E então, para a margem superior, vamos usar nosso olho para posicionar de acordo. Acho que esse é o lugar certo. Vamos atualizar isso. Mas agora eu acho que essa sombra de caixa de gota é um pouco escura. Então, quero selecionar uma das colunas aqui. E no estilo interno, vou para dentro da fronteira. Sombra de caixa. Então clique nesse MNR, quer reduzir essa opacidade ainda mais em algum lugar, talvez 11. E então eu copiarei, copiarei o estilo. Clique com o botão direito do mouse em estilo de colar e repita isso para todos eles. Colar estilo, colar estilo. E, finalmente, cole o estilo. Vamos atualizar isso e visualizar as alterações ou a variedade. Gosto que os resultados estejam chegando até agora. Eu acho que você realmente viveria em parece melhor do que regional. Incrível. Então, agora você notará que quando passarmos o mouse sobre esses ícones aqui, existem links e eles levam a um site diferente quando você clica neles. Então, precisamos criar esses links. Então, como fazemos isso é selecionar a imagem em si e uma das opções e o conteúdo aqui será um link. Você pode dizer URL personalizada e inserir qualquer URL para o qual deseja levar as pessoas. Então, por exemplo, se for Apple Podcasts, algo como www dot apple podcasts.com, slash listen. E se você quiser que o link seja aberto em uma nova guia quando alguém clicar nele, você pode clicar nessa roda dentada e dizer abrir uma nova janela, atualizá-la. E vamos rever as mudanças ou pedalar. Então, quando alguém clica nisso, sabendo que eu passar o mouse sobre ele, é um link e quando alguém clica nele foi levado para uma nova página e nossas páginas ainda intactas. Então, deixe-me fechar essa página. Então, vamos em frente e repetir o mesmo para o resto das imagens. Então, vou clicar nessa imagem lá. Então eu vou adicionar um sinal de hash por enquanto. Vá em frente e adicione os links que você deseja. Para o seu caso, porque é seu é um site real. Vamos seguir em frente e dizer abrir em nova janela. Assim. Lembre-se de abrir em nova guia. E, finalmente, Spotify ou certo. Então, vamos em frente e visualize as alterações. E agora, quando passamos o mouse sobre qualquer um deles, é um link. E quando você clica nele, ele o leva a uma página totalmente nova. Então, agora que terminamos a seção de heróis, vamos passar para a seção principal da landing page que começa a partir daqui a partir do episódio em destaque. Então, a lista de episódios para a galeria de episódios, até o canto inferior direito antes do rodapé. Então, vamos seguir em frente e criar esses episódios em destaque na próxima lição. 13. Como adicionar a seção de episódios em destaque: Bem-vindo de volta a outra lição. Então, neste momento, queremos criar essa seção de episódios em destaque. E uma coisa que eu gosto no Elementor é o fato de que você foi capaz de reutilizar elementos. Você notará que temos uma semelhança entre esse bloco de texto e esse bloco de texto aqui. Então, dentro de nosso espaço de trabalho, o que podemos fazer é criar uma coluna dupla. E essa coluna dupla manterá esse bloco de textos com um botão e essa imagem. Então, vamos primeiro adicionar elementos de imagem aqui. Vou clicar no sinal de mais lá e soltar uma imagem lá. Mas observe que não temos margem aqui no topo. Então, com a seção selecionada, entrarei em avançado. Quebre esse link. E então, para o marginal superior, dê talvez 90. Vamos dar um 100. Certo? Então essa é a posição. E então o que podemos fazer é duplicar esses elementos aqui. Então, vou apenas duplicar isso e arrastá-lo para dentro e soltá-lo quando a linha azul aparecer. Vou repetir para este outro cabeçalho. Solte-o ali e, em seguida, duplique e solte-o logo abaixo do H1. Mas agora em nossa página de referência, isso não é um H1. Não podemos ter mais de uma página um. Então, vamos adicionar, vamos mudar isso. Vamos nos certificar de que isso não é um. Vamos torná-lo um HA2 e vamos reduzir seu tamanho. E também vamos reduzir o peso da fonte, o peso da fonte para algo como 700. E agora vamos encadear, vamos pegar isso. Vamos pegar isso primeiro. Vou apenas copiar isso. Não há necessidade de redigitar tudo isso. Vou clicar lá dentro e, em seguida, aqui, colarei o que acabamos de copiar. Copie isso. E então vou selecionar isso. E conteúdo interno, vou desenhar, vou colar essa outra redação ali mesmo. Então você notará que ele ocupou muito espaço. Primeiro de tudo, a imagem desse lado é um pouco pequena, então vamos redimensioná-la de acordo. Então, vamos reduzir o tamanho desse H2 até algum lugar lá. Você notará que o espaçamento aqui é quase tocante. Então, vou selecionar a seção de edição. E, em seguida, dentro do layout , na lacuna de colunas, eu vou, escolherei largo. E isso aumentará um pouco o espaçamento entre as duas colunas. Então, vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, eu gosto do que estamos recebendo até agora. Então, voltando aqui, selecionarei a imagem. E vamos entrar aqui. E vamos fazer o upload da imagem desse modelo que temos ali. Essa imagem de podcaster é incrível, então insira mídia. E lá temos isso, mas é um pouco grande, então vamos reduzir o tamanho assim. E, em seguida, digamos atualizar. Vamos visualizar as alterações. Tudo bem, então agora vamos em frente e adicione este botão. Então eu vou para dentro aqui. E vou selecionar os elementos do botão e soltá-lo logo abaixo. E por padrão, tem esse verde que, que nossa barra de navegação tinha em algum momento. Então, precisaremos substituir esse verde por esta tela. Então, faça uma travessia, pegue isso. Então eu vou pegar esse verde. Copie isso e volte aqui, selecione o botão em qualquer lugar dentro dessa borda azul. E enquanto ainda estiver selecionado, vou para a cor do estilo. E então eu vou colar isso aqui, colá-lo lá e agora clicar em qualquer lugar lá. Agora o verde é aquele tom que queremos. Mas queremos que ela tenha essa fonte azul e, ao passar o mouse, cada um será branco. Então, estamos querendo ter essa cor azul no estado normal e no pairar queríamos ser branco. Então, vamos fazer isso. Primeiro de tudo, o que ele diz? Ouça esse episódio. Então, vamos, enquanto ainda estiver selecionado, vamos para o conteúdo. Vamos para ícone, biblioteca de ícones. Vamos fazer algo como fone de ouvido, talvez algo assim. Inserir. E agora temos um ícone e podemos optar por colocá-lo antes ou depois do texto e alterar os textos enquanto ainda estão em conteúdo. Vamos ao texto e digamos, então vamos atualizar isso. E é claro que podemos especificar para onde queremos que o botão redirecionar os usuários, para que possamos inserir nosso URL aqui, https, www.dot_com. E se você quiser que ele abra em uma nova guia, quando alguém clicar no botão, clique na roda dentada e, claro, selecione a abertura da nova janela. Vá em frente e experimente e veja o que ele faz. Mas agora, novamente, observe como isso tem algum preenchimento adequado nas laterais. Então, vamos em frente e adicione um bom preenchimento a este botão. Primeiro de tudo, vamos mudar essa cor da fonte. Deixe-me pegar aqui e pegar estes azuis. Vou copiar isso. E enquanto ainda estiver selecionado no botão Estilo, vou para a cor do texto. Nenhum estado normal deve ser tão azul. E a própria casa sobre a cor do texto precisa ser branca. Então vamos atualizar isso. E enquanto está atualizando, também quero que adicionemos esse preenchimento. Então, vamos rolar para baixo e procurar preenchimento. Aqui está. Então vou quebrar esse link e isso distorcerá o botão completamente. Mas o que queremos fazer é antes de tudo, para a direita e para a esquerda, vamos dar um preenchimento 50. 50, 50 m para a parte superior e inferior. Vamos dar 20, 20, 20 e 20. Então, agora ele tem preenchimento adequado e parece muito mais apresentável. Acho que também podemos fazer isso, odiar usar o mesmo azul que estes. Então, vamos em frente e pegar essa cópia azul. Vamos selecionar isso. Enquanto ainda estiver selecionado, vou entrar na cor do sexo e dar-lhe esse azul. O mesmo caso para isso ou passeio. Gosto disso. Então, vamos visualizar as alterações. E vamos rolar para baixo e ver o que temos. Incrível. A próxima coisa que queremos fazer é criar essa galeria de episódios aqui, e faremos isso na próxima lição. Então, vejo você em breve. 14. Como adicionar o título da grade de episódios de podcast: Bem-vindo de volta. Espero que você tenha pego um copo de água. Agora é hora de voltar aos negócios. Então, basicamente, agora estamos criando esta galeria de episódios aqui. Então, vamos começar criando esses cabeçalhos. Em seguida, vamos começar a criar a galeria em si. E então, se pudermos pular diretamente dentro do espaço de trabalho, vamos seguir em frente e criar uma única seção de coluna. O primeiro aqui. E agora dentro daqui podemos soltar esta galeria. Mas antes disso, vamos criar esses cabeçalhos. Então, vou apenas copiar isso. E então aqui eu vou duplicar isso e soltá-lo lá na seção de coluna única. Em seguida, selecionarei isso. E enquanto ainda estiver selecionado, vou colar o texto que acabei de copiar daqui. Este texto. Tudo bem, então a próxima coisa que queremos fazer é trazê-lo para o, alinhá-lo ao centro. Alinhe o centro. E vamos dar esse fundo azul. Quero dar este bloco azul. Bem, então vamos pegar esse azul desta fonte aqui. Bem, essa fonte está selecionada. Vou clicar nisso e copiarei o azul. Em seguida, entrarei nesta seção, Editar seção, estilo para o tipo de pasta de fundo, esse código de cor aqui. E agora tem esse azul. Agora, esta fonte, esse cabeçalho é azul. Então, vamos mudá-lo para a tela. Então eu vou copiar isso, selecionarei este botão. E então eu vou, porque agora está destacado em Estilo, vou copiar esses verdes. Ou se você ainda tiver esse documento aberto, é a tela. Selecionarei esses cabeçalhos. E enquanto ainda estiver selecionado na cor do texto do estilo, colarei esse verde lá. E agora tem esse verde. Clique em qualquer lugar aqui dentro para se livrar disso. Em seguida, atualizarei as alterações. A próxima coisa que queremos fazer é adicionar esse efeito de pincel aqui, da mesma forma que fizemos para a seção superior. Então, a maneira de adicioná-lo aqui acima desta seção, porque agora, como você pode ver, temos uma linha reta. Não podemos adicionar que o pincel1 parte superior deles seja adicionado dentro desta seção aqui, seção de episódios em destaque. Então, vamos entrar na própria seção, editar a seção e, em seguida, sob divisor em forma de estilo, inferior, porque agora queremos que a curadoria aqui, inferior. Vamos escolher o pincel de ondas, e agora a cor é invisível. Então, vou copiar isso. Belo azul. E enquanto ainda estiver selecionado. E enquanto ainda estamos aqui, sob o divisor em forma, sob estilo, cor, cole isso lá. E isso é muito grande. Então, vamos reduzir a altura para algo como 60. Eu quero isso aos 60. Atualize isso. E vamos visualizar as alterações. Rolando para baixo. Parece incrível, mas agora esse cara está tocando o pincelada. Então, vamos adicionar um pouco de preenchimento abaixo desse cara. Então, selecionaremos a imagem desse cara. E por dentro avançado, vamos quebrar esse link ali mesmo. E então, para o preenchimento inferior, vamos empurrá-lo para baixo até ficarmos satisfeitos com a distância. Então, para mim, acho que é um bom lugar. Na verdade, isso é um 100. Então você pode simplesmente inserir um 100 para o preenchimento inferior. Atualize isso e, em seguida, vamos visualizar as alterações. Tudo bem. Isso é super incrível. Não podemos ir além de lá porque não temos nada abaixo. Abaixo aqui. Vamos adicionar a galeria agora. Agora, a maneira de adicionar essas galeria é simples. Esses itens da galeria aqui, nossas postagens, são postagens do WordPress. Você pode criar uma postagem no blog. Você pode criar um episódio é uma postagem. Você pode criar um produto em oposição. Você pode criar diferentes tipos de conteúdo como postagens. E então vamos em frente e criar algumas postagens, criaremos talvez cerca de seis, para que possamos exibi-las aqui. Então, a maneira como fazemos isso é entrando no painel. Vamos entrar nas postagens. Lembre-se que esta é uma nova instalação do WordPress, então não tenho nenhuma postagem. Então, vou ter que adicionar essas seis postagens. 15. Como criar episódios como posts no WordPress: Então, vamos em frente e adicionar algumas postagens. Eu direi Adicionar novo. E qual é o nome deste primeiro aqui? Episódio 6, networking para podcasting. Então, copie isso. Eles se sentam ali mesmo. Então, para o modelo, vamos configurá-lo para Elementor barra lateral de largura total, defina-o para nenhuma barra lateral. largura total se estende logo abaixo do Layout de conteúdo. Em seguida, vamos desativar esses quatro itens e publicá-los. Ou certo, então lá temos isso. Então, para exibir com este trecho aqui, também precisamos que os ovos estejam em algum lugar. Agora, o objetivo desta aula não é mostrar como projetar os episódios individuais. Quando clicamos aqui, a página para a qual você será levado precisa ser bem projetada e esse é o espaço que estamos criando. Então, para criá-lo, nós, é claro, entraríamos na edição com o Elementor. E então, é claro, agora vamos adicionar algo como uma coluna dupla lá. E deste lado talvez teríamos uma imagem. Então talvez teríamos um cabeçalho. Deixe-me adicionar um cabeçalho. E o cabeçalho seria esse cabeçalho específico. Então eu vou colar isso lá dentro. E talvez esse trecho seja o conteúdo do episódio. Breve descrição do episódio. Vamos adicionar alguma margem ao topo disso. Eu só quero mostrar isso rapidamente para que você veja a relação entre os dois AD ali mesmo. E então vamos supor, vamos fazer isso, mesmo que seja para fins ilustrativos, vamos torná-lo um pouco mais apresentável. Então, digamos que o episódio, e depois temos, Vamos mudar isso para Montserrat. E então vamos atualizar isso. Em seguida, vamos visualizar as alterações. Agora, este é um único episódio que estamos criando, só para que, quando clicamos nisso, sejamos levados para uma página que é um pouco mais apresentável. Não somos levados para uma página em branco. Mas é assim que talvez um episódio pareceria quando alguém se abre para a visualização para ouvi-lo. Então, vamos mudar essa imagem. Vamos aqui e fazer o upload de uma imagem semanalmente. Talvez aquela moça ali mesmo. Ela parece um podcaster. Vamos inserir mídia. E vamos atualizar isso. Depois, visualize as alterações. Então talvez eu possa até pegar emprestado o que nosso botão aqui, basta clicar com o botão direito do mouse, porque estamos editando o mesmo site, podemos copiar elementos de uma página para outra página para que ele possa entrar, colar esse botão aqui. Assim mesmo. Então vamos atualizar isso. Também não gosto do espaçamento aqui, então deixe-me selecionar a seção em si. E em Layout, lacuna de colunas, deixe-me aumentá-lo para mais amplo. Então, digamos que atualize isso. Tudo bem, e depois vamos visualizar as alterações. Então esse é um exemplo do que talvez um episódio de podcast pareceria. Então, o que queremos fazer é voltar para dentro do nosso painel. Vamos sair para o painel. E vamos para a lista de todos os episódios que temos. Agora você notará que temos 1 porque acabamos de criar um, mas precisamos de mais cinco. Então, vamos entrar no painel e criar os cinco restantes. Então, vou adicionar novo. Vamos copiar isso. E é claro que estou fazendo isso manualmente, mas há plugins que podem ajudá-lo. Eles podem ajudá-lo a duplicar postagens ou páginas ou elementos no WordPress com um clique. Então deixe-me colar isso lá dentro. Isso é o Episódio 5. Sob os modelos, digamos que Elementor largura total, sem barra lateral, alongamento de largura total. E então eu desabilitarei esses quatro itens, depois vou publicá-los. Vamos seguir em frente e criar o resto. E vou avançar rapidamente esta seção e permitir que você crie os quatro restantes. Então, vamos conversar depois disso. Então, aqui estamos nós. Deixe-me apenas atualizar esta página de conseguiu criar os seis episódios. Então, agora que temos todos os episódios de que precisamos, precisamos de uma maneira de exibi-los conforme acordado, como essa ganância. Então, precisamos de um plugin de terceiros para isso. Um plugin que amplia o poder do Elementor. 16. Como adicionar a grade de episódios: Lembre-se de que vimos que temos muitos plugins relacionados a elementos nos repositórios de plugins. Então, dentro de plugins, adicione ao meio-dia. Vou procurar por complementos essenciais. Deve ser o primeiro resultado, complementos essenciais para o elementor. Tudo bem, vamos ativar isso. Então aqui vamos nós. Agora está na lista de todos os nossos plugins instalados. Então, entraremos nas configurações e vamos entrar nos elementos. Portanto, por padrão, existem alguns elementos que não são verificados que precisaremos. O elemento que precisamos agora neste momento é pós ganância. Porque queremos exibir uma grade como esta. Então, com Post Greed, agora Chet, Vamos rolar para baixo e salvar as configurações. Todos esses são recursos e elementos que você pode adicionar ao Elementor. E alguns deles são muito legais. E a maioria deles é gratuita, enquanto outros são premium que você tem que pagar para acessá-los. Então, agora vamos voltar para a página em que estamos editando a landing page. E vamos atualizar a página antes de atualizá-la. Agora vamos controlar R ou Command R. Atualize a página para que possamos carregar o plug-in que acabamos de instalar. Tudo bem, então vindo aqui para o lado esquerdo, vamos colapsar esse painel. E esse painel. Vamos recolher todos os painéis para ver se ele foi carregado. E agora aqui vamos nós. Complementos essenciais para o Elementor e todos esses são, todos, esses são os elementos que vimos no back-end. Agora, estamos procurando por ganância pós. E é isso que estamos procurando com este rótulo EA para complementos essenciais. Então, rolando para baixo abaixo aqui. Vamos arrastar este complemento essencial pausar ganância e soltá-lo logo abaixo dos textos. E você notará que agora temos quatro episódios mostrando. Então, vamos editá-lo para ficar assim. A próxima coisa que queremos fazer é primeiro adicionar esse efeito de pincel aqui. Então, o que queremos fazer é adicionar outra seção de largura total como essa. E para esta seção de largura total, vamos em frente e selecione a seção. Vá dentro do divisor em forma de estilo, topo. Porque agora é a parte superior desta seção, não a parte inferior. Escova de ondas. E vamos dar uma altura de 16. Mas agora precisamos dar esse fundo azul. Então, vamos selecionar a seção porque ela já tem esse fundo azul dentro do estilo. Vamos clicar lá e vamos copiar isso. Em seguida, clique na seção. Certifique-se de que ele diz a seção Editar aqui. Divisor de forma, M para a cor do divisor de forma. Vamos colá-lo aqui. Incrível. Tudo bem. Então, agora vamos visualizar as alterações apenas para ver o que temos. Até agora. Aqui está nossa parte superior. Vamos rolar para baixo. Então agora vamos vender essa ganância. Então, selecionando a ganância. Vamos primeiro decidir de onde queremos obter nossos episódios. E podemos obter os episódios por autor. Podemos obter episódios por categorias. Podemos obter os autores por tags, formatos ou podemos decidir o que você deseja excluir do que estamos exibindo aqui. E você vê que temos muitas opções, mas essas estão além do escopo desta lição. Você pode aprender mais sobre categorias ou as tags finais pesquisando no Google. Então, enquanto isso é selecionado e temos essas opções aqui, vamos primeiro dizer que queremos ir, vamos ver de onde estamos obtendo nossas postagens. Vejamos as categorias de postagem. Então, em categorias de posts, temos apenas uma categoria. Por padrões. Não podemos excluir essa categoria. Ele vem com o WordPress por padrão para que qualquer post ou página que não seja categorizada caia automaticamente na seção sem categoria, categoria não categorizada. Então, neste momento, queremos dizer, queremos todos os episódios sem categoria. Então, vou digitar em categorizado. Então, selecionarei e categorizarei. E como não categorizamos nenhum desses, eles automaticamente se enquadram sem categoria. Então isso significa que estamos exibindo todos os seis deles. Você pode adicionar quantas categorias quiser. Então, aqui você pode adicionar mais categorias. Produtividade, pressione Enter. E agora temos duas categorias. Então, se eu, em primeiro lugar, salvar isso e depois digitar aqui, insira três ou mais caracteres. Tão orgulhoso. Já mostra produtividade e também mostrará postagens dessa categoria. Então, novamente aqui, queremos dizer posts por página. Queremos mostrar seis postagens. E agora observe que temos quatro colunas e duas linhas. Queremos duas colunas e três linhas. Então isso vem sob a configuração de layout. Então, vamos recolher a consulta e vamos abrir as configurações de layout. Sob a coluna. Vamos selecionar dois. E então vamos atualizar isso. E vamos visualizar as alterações. E lá temos isso. Então, vamos atualizar este controle de página. Estamos atualizando a página para refletir as alterações nelas. Ótimo, então aqui estamos nós. Então, a próxima coisa que queremos fazer é nos livrar dessa imagem aqui, a imagem do autor, não queremos ver isso. Então, selecionando em qualquer lugar dentro dessa grade, podemos ir aqui e dizer consulta recolhida, depois expandir as configurações de layout e rolar para baixo. E agora temos essas caixas de seleção aqui. Então podemos dizer que não queremos mostrar talvez não queremos mostrar que os ovos são. E este é o trecho. Então também podemos dizer que não queremos mostrar o nome do autor ou não queremos mostrar o avatar do autor. Essa é essa imagem. Vamos atualizar isso. Desculpe pessoal, minha internet está um pouco lenta. É por isso que eles parecem estar desbotados agora. Preciso atualizar a página para refletir as alterações. Tudo bem, assim. Então agora nos livramos do avatar, essa imagem do autor. Também podemos decidir a posição desses metadados desses detalhes do Meta. Então, digamos, por exemplo, cabeçalho de entrada. Assim mesmo. Isso é exatamente o que temos aqui. E então agora você notará que aqui nós ouvimos agora que são basicamente esses ler mais. Então vamos em frente e estilo que leia mais. Então, vamos atualizar isso por enquanto. E vamos entrar no estilo para estilizar o botão dentro da ganância. Então, vamos entrar no estilo, rolar para baixo e encontrar estilo do botão Leia mais. Vamos expandir isso. E o que queremos fazer é dar uma cor de fundo. Então, neste momento, não está definido para nada. Queremos dar isso azul. Então isso é definitivamente esse azul. Então, selecionarei uma dessas seções com um fundo azul e pegarei esse clique azul em qualquer lugar lá. E então eu selecionarei em qualquer lugar dentro da grade para garantir que entramos no estilo Postgres. E vamos para o estilo do botão Leia mais. E novamente para o tipo de plano de fundo. Vamos mudar isso azul. Então agora ele tem esse azul. Mas agora precisamos adicionar algum preenchimento para que o texto não toque nas bordas do plano de fundo. Então, antes de tudo, vamos liberar esse link. Então, para a direita, vamos tentar 20. E para a esquerda, vamos tentar 20 anos. Bem, tudo bem, para a parte superior e inferior, vamos dar 55. Então, para a margem, espaço entre o botão e os outros elementos ao seu redor, vamos aumentar o espaçamento aqui. Então, margem superior. Vamos dar um 20. E vamos atualizar isso. Agora, já que nós, vamos, não desabilitar o trecho. Então deixe-me voltar para dentro do conteúdo. Configurações de layout interno. Mostramos trecho. E agora você notará que não temos nenhum trecho e podemos adicionar essa pose interna. Vamos entrar em todas as postagens. E se entrarmos em qualquer uma das postagens e dissermos Editar, por exemplo. Para adicionar o trecho, precisaríamos entrar no Elementor e criar a partir daí. Mas, por enquanto, usaremos o back-end. Então, vou copiar isso. E vou entrar aqui e basicamente colar isso leva aqui. Então vou atualizar isso. E agora, se entrarmos nesse espaço de trabalho e atualizarmos isso. Antes de atualizá-lo, quero atualizar esta página Control R para refletir as alterações que fizemos aqui no back-end para refleti-las no Elementor. Se rolarmos para baixo, você notará que agora temos um trecho, mas ele está mostrando apenas algumas palavras. Então, selecionando em qualquer lugar dentro daqui, dentro da grade, podemos vir, vamos recolher a consulta e expandir as configurações de layout. E aqui podemos decidir quantas palavras de trecho precisamos. Então mostre trecho, em seguida, excerto palavras, digamos 30 palavras. E agora mostra mais palavras. Então eu vou, vou em frente e repetir o mesmo para o resto do episódio. Então todos eles têm trechos. Então, vamos atualizar isso. Então, enquanto estiver atualizando, irei para a saída de back-end a partir daí. Então, agora o próximo é isso. Vamos abrir isso. Deixe-me abrir isso em uma nova guia e colar isso lá. Então vou entrar aqui, certifique-se de que isso seja copiado. E então aqui, Episódio 2, vou colar isso lá e atualizei o episódio três. Cole isso lá e um episódio de dados para colar isso lá e atualizar esse episódio 5. Cole isso lá e atualize o que está certo. Agora, deixe-me atualizar esta página, nosso espaço de trabalho, e ver se a alteração está refletindo aqui. E enquanto fazemos isso, deixe-me fechar essas guias extras. Tudo bem, então vamos dar uma olhada no que temos. Então, isso é o que temos. Já está começando a tomar a forma da nossa página de referência. Então, vamos em frente e visualize as mudanças em casa. Então, já está bem. Mas é claro que podemos fazer muito mais. Então, antes de tudo, você percebe que isso tem alguns cantos arredondados e tem uma sombra de caixa que faz o episódio se destacar do fundo azul, realmente os faz aparecer. Vamos seguir em frente e fazer isso. Então, enquanto estamos selecionados, enquanto isso estiver selecionado, clique em qualquer lugar que esteja do lado. Vamos entrar no estilo, pós estilo de grade. Vamos para o raio de fronteira e dar bem, o link ainda está ativo. Vamos dar a ele talvez 10 anos advogados o suficiente e já está tomando forma. A próxima coisa que queremos fazer é dar ao botão em si um canto arredondado também. Então, assim. Então, vamos recolher essa ganância do post e ir para o estilo do botão Leia mais. Para o raio da borda enquanto o link ainda estiver ativo, vamos dar um cinco. E agora tem esse canto arredondado. Vamos atualizar isso. Vamos em frente e entrar em colapso. Leia mais estilo de botão. E vamos voltar ao estilo de postar grades. Vamos dar essa sombra de caixa clicando no ícone Editar bem ali. E você notará que já está aparecendo. Mas eu quero reduzir essa opacidade para algum lugar. Em algum lugar lá para que não seja tão óbvio. Está bem ali, mas não é tão óbvio. Então, vamos seguir em frente e abrir uma pré-visualização. Veja o que temos. Então, lá temos isso. Isso é o que temos até agora. Agora, esse episódio parece ser um pouco maior porque este é o primeiro, se você se lembra, este é um primeiro episódio que criamos e o criamos com Elementor. Então, se clicarmos em Leia mais, está tirando todo esse texto daqui, a partir do Episódio 6, até aqui. Se voltarmos, você notará que isso tem todo esse sexo aqui, enquanto esses outros começam de como posso crescer? É por isso que parece ser um pouco maior, mas isso não deve preocupá-lo. Então, a próxima coisa que queremos fazer é adicionar este botão aqui. E para fazer isso, lembre-se, um Elementor, sempre podemos reciclar coisas. Então, vamos copiar isso, copiar esse fim. Bem, esse ganancioso ainda selecionado. Se você quiser colar qualquer coisa, selecione sempre o item sob o qual deseja colar o elemento que deseja ritmo. Então, como queremos colar o botão abaixo da nota, precisamos selecionar a grade e colar ali mesmo. Então, o botão vai abaixo do elementar, clicado com o botão direito do mouse e colá-lo. Então, vamos clicar no botão aqui e, em seguida, vamos centralizá-lo. E vamos entrar avançado enquanto ainda estamos selecionados. E vamos dar a ele uma margem máxima. Vamos remover esse link e dar a ele uma margem superior ou 50. Em uma margem inferior de talvez 50 ou direita. Então, vamos atualizar isso. Vamos visualizar as alterações. E vamos começar a rolar para ver o que temos até agora. Vamos precisar de alguma margem aqui em cima. Mas eu gosto do que temos atualmente. Já parece incrível. É quase semelhante ao que temos aqui. Dada a soma mod, podemos chegar a algo melhor. Então, vamos adicionar essa margem aqui na parte superior. Então, vamos selecionar esta seção. E vamos para dentro da guia Avançado. E vamos liberar isso. E então vamos dar a ele um preenchimento superior de talvez 50. Assim. Então vamos dizer que a absorção. Vamos rever as alterações. Eu gosto. Ou certo? Então, a próxima coisa que queremos fazer é criar esta seção aqui, o que deve ser muito fácil porque vamos reciclar os blocos de texto que já temos no botão da imagem. Então, vamos fazer isso na próxima lição. 17. Como adicionar a seção About: Bem-vindo de volta a outra lição comigo can Besser. Terminamos esta seção de notas do episódio. Em seguida, queremos criá-los sobre a seção Alex. E isso deve ser bem simples, porque duplicaremos os elementos que já temos em nossa página da Web. Então, para fazer isso, primeiro criarei uma coluna dupla aqui. Seção de coluna dupla assim. E você notará que temos uma margem aqui na parte superior e inferior. Então, vamos dar essa margem com antecedência. Então, selecionando a seção de coluna dupla e entrando em avançado, vamos remover esse link. E vamos dar-lhe uma margem superior de 100 e uma margem inferior acima de 100. Tudo bem, então agora qualquer conteúdo que adicionarmos terá essa sala na parte superior e inferior. Então, o que precisamos fazer em seguida é clicar nesse Plus e selecionar Imagem. Eu quero deixar cair essa imagem de Alex lá dentro. Insira isso. É claro que você teria as imagens legais dos EUA ou, se você estiver criando a landing page para um cliente, você os aconselharia a fornecer imagens agradáveis. Vamos seguir em frente e duplicar esse título. E vamos arrastá-lo para lá dentro. Vamos arrastá-lo e soltá-lo lá dentro. E vamos dizer sobre nossa próxima cópia que seleciona isso, cole isso lá. Vamos também duplicar isso. Arraste, arraste-o para baixo, solte-o lá. Agora copie isso. Vá para dentro aqui. Enquanto isso estiver selecionado, selecionarei tudo isso, excluirei e colarei isso lá. E então, o que temos a seguir? Um botão entrando em contato. Então, entraremos aqui. Vou copiar isso. E eu vou clicar com o botão direito do mouse dentro desses elementos, esses textos elemento e colar para que o botão fique abaixo dele. Em seguida, vamos alterá-los enquanto isso for selecionado. Entre, entre em contato. E então mudaremos esse ícone para talvez um telefone e o inseriremos. E digamos que quiséssemos antes de receber essa atualização. Vamos rever as alterações. Vamos rolar para baixo. Gosto disso até agora. Então, vamos aumentar a margem nessa coluna para que o texto se mova um pouco mais baixo do que onde está agora. Então, selecionando esta coluna, clique com o botão direito do mouse em Editar coluna Quebre esse link. E vamos dar a ele uma margem máxima de 50. E vamos dar um 150. Agora vamos dizer um 100. E vamos aumentar o tamanho do Alex. E digamos que atualize isso. Vamos ser realmente mudanças. Super incrível. Gosto do que temos até agora. Então, agora, a próxima coisa que queremos criar é essa área de chamada à ação aqui. E essa é uma parte muito importante em qualquer landing page. Há elementos que a landing page deve ter para que ela seja uma landing page eficaz em uma delas é formar uma maneira de coletar dados de clientes ou usuários. Também precisamos de botões que sejam conspícuos. E você notará que estamos usando botões que são muito evidentes, fáceis de ver porque uma landing page é destinada a fazer as pessoas agirem. É por isso que precisamos ter call to actions. Este é um call to action. Ouça esse episódio. Então, vamos seguir em frente e criar esse formulário na próxima lição. Vejo você em breve. 18. Instalando o plugin de formulário necessário: Bem-vindo de volta a outra lição incrível comigo can Besser. Então, neste momento, chegamos a um ponto em que criamos todas essas seções. E só temos mais duas seções para ir. Temos essa seção de call to action que tem um formulário e temos a seção de rodapé. Então, agora, vamos seguir em frente e criar este formulário. E para criar o formulário estará usando um incrível plugin formado por terceiros chamado formulador. Então, vamos ao back-end e instalar para Ministro para que possamos criar este Fórum. Então, dentro do painel, vou entrar em Plugins, Adicionar Novo. Então, aqui, vou digitar formulador. E estes pelo WPA AMU dev, instale-o. Agora. Vamos ficar inativados. E agora temos quatro minutos listados em plugins instalados. Então você o encontrará quase na parte inferior do menu esquerdo, bem aqui. Então passe o mouse sobre o ministro das Relações Exteriores e entre em formulários. Agora, se você quiser saber mais sobre como criar formulários do WordPress para o seu site, basta ir em frente e procurar como criar formulários no WordPress no YouTube. E você encontrará muitos tutoriais mostrando como fazer isso. Mas agora estamos usando o Monitor, que é meu plugin de formulário favorito. Então, vamos em frente e crie um formulário com o formulador. Na próxima lição, verei você em breve. 19. Como criar um formulário com Forminator: Então eu direi Criar. Agora, para nosso propósito, queremos inscrever pessoas em nosso boletim informativo para que elas possam receber nossos e-mails de tempos em tempos. Então, digamos que a newsletter se inscreva e continue. Então, vamos dar a ele um formulário de inscrição de nome e vamos criá-lo. Então, o objetivo aqui é criar um formulário com o formulador e, em seguida, vamos exibi-lo no front-end desta página usando um código curto e veremos como fazer isso. Então, agora que o formulário foi criado, como você pode ver pelo formulário de inscrição de nome. E temos os campos que vêm por padrão porque era um modelo que selecionamos. Ele tem o primeiro nome, e-mail e o botão de inscrição. E se o visualizarmos, é assim que parece. Nome, assinatura de e-mail, nome próprio, assinatura de e-mail. E se eu clicar em FirstName, ele se expande e mostra os detalhes do espaço reservado que acabamos de ver FirstName e todos esses, mas isso, mas essa classe não é sobre como criar formulários. Então, saiba que você pode editar esse formulário para ter os detalhes desejados. Você pode alterar este titular do local para saber onde o .com se aplica. E se visualizarmos isso, o espaço reservado agora para a entrada de e-mail será Kim em Nowhere.com. E podemos alterar esses detalhes e podemos adicionar mais campos. Mas irei em frente e publicarei esse formulário do jeito que ele é. E quando eu publicá-lo, você notará que temos esses pop-up que apresentam essa opção Copiar. Podemos copiar esse código curto. Então, vamos copiar esse código curto e você recebe essa mensagem. código curto foi copiado com sucesso. E se entrarmos em nosso espaço de trabalho, e logo abaixo desta seção Sobre, vamos abrir. Vamos criar uma nova seção e ela deve ser uma coluna dupla. Deixe-me fechar esta janela. Então, o que precisamos é de uma coluna dupla. E dentro dessas colunas duplas, queremos adicionar dentro da coluna direita um código curto. Código curto. Então, arraste e solte lá e antes de clicar em qualquer outra coisa enquanto isso estiver selecionado. Agora podemos colar esse código curto aqui. Estou falando sobre esses códigos curtos que acabamos de copiar do formulador. Cole-o lá e clique em Aplicar. Então, digamos que atualize e visualize as alterações. Então, vamos rolar para baixo e ver o que temos atualmente. Então é assim que ele se parece agora no momento. Precisaremos fazer algum estilo para isso. Mas, acima de tudo, precisamos ter esses antecedentes. Começaremos com esse pincel superior aqui. E para fazer isso, o que precisamos fazer é selecionar esta seção que tenha os detalhes Sobre o ALEKS. Selecione a seção em si. E vamos remover a margem inferior para que ambos fiquem presos um ao outro. E então, dentro desta seção de edição, vamos para o divisor em forma de estilo e depois para baixo. Vamos selecionar o pincel de ondas, e deixe-me pegar esse verde aqui. Copie isso. Vamos voltar aqui. E enquanto ainda estamos na seção Editar, estilo, divisor em forma, inferior, vamos mudar a cor lá para esse verde. Cole-o lá. Esse é o pincel de parada aqui. Então, são dois, separe-o dessa imagem aqui. Vamos em frente e adicionar um pouco de preenchimento a essa imagem. Então, selecionando a imagem em si. Avançado. Vamos liberar esse preenchimento e, em seguida, preenchimento inferior. Vamos esbarrar até ficarmos satisfeitos. Vou dar um 100. Vamos dar-lhe 110. Agora dê-lhe 120. E então vamos voltar para dentro do divisor de forma de estilo. Deixe-me selecionar agora vamos entrar. Editar seção, divisor em forma, inferior. Quero dar uma altura de 60. Ano. Assim. Vamos copiar a tela novamente. Vamos selecionar esta seção, Editar estilo de seção, plano de fundo e vamos dar esse verde. Atualize a cor. E então vamos criar outra seção aqui. Podemos criar outra seção para criar esse pincel inferior. Ou podemos simplesmente duplicá-los. Lembre-se disso, vamos duplicar isso. E vamos arrastá-lo para lá. Então vamos, enquanto ainda estiver selecionado, vamos para o divisor em forma de estilo. Ainda tenho esse verde selecionado, então vou colá-lo aqui. E, em seguida, atualize isso. Vamos visualizar as alterações. Substituir. Isso é super incrível. Então agora vamos pular para o lado e pegar esse texto. Copie isso. Vamos entrar aqui. E aqui, podemos adicionar esses títulos. E eu vou colar, colar o texto ali mesmo. Agora pegue esta descrição aqui, copie isso. Vou pegar esse editor de texto. E aqui vou selecionar tudo, excluí-lo e depois colar o que copiei do outro lado. Atualize isso. E agora você notará que a cor da fonte aqui é azul. Então deixe-me pegar esse azul do lado do vendedor. Copie isso. E vamos entrar aqui. Enquanto isso ainda estiver selecionado, vou para a cor do texto de estilo e colarei isso lá. Agora, vá e selecione essa cor de sexo estilo, cole isso lá. E eu quero mudar isso para Montserrat. Então, enquanto ainda está selecionada topografia, Montserrat. E então eu só quero dar a ele um peso de fonte de 800. Vamos também aumentar o tamanho dessas fontes, queria ser maior, mais visível. E também vamos mudar isso para a tipografia de Montserrat. Vamos fazer o tamanho 16. Atualize isso. Em seguida, vamos visualizar as alterações. Role para baixo e veja o que temos lá em baixo. Super incrível. Gosto do que estamos tendo até agora. Então, agora vamos aumentar a margem aqui. Então, torne-o um pouco mais apresentável. E fazemos isso selecionando esta seção. Vamos entrar em vasto. Pode aumentar o preenchimento, preenchimento superior e ver o seu satisfazer. Acho que é um bom tamanho. Vamos fazer 45 e atualizar isso. Em seguida, vamos visualizar as alterações. Super incrível. Então, vamos aumentar o espaçamento entre essas duas colunas. Porque, como você pode ver aqui, há um bom espaçamento entre eles. Então, selecionarei esta seção que está segurando as duas colunas e entrarei no layout. lacuna de colunas. Digamos mais amplo. E então vamos apenas puxar esse pouco para o centro e atualizar isso. Em seguida, vamos visualizar as alterações. Gosto disso. Até agora parece incrível. Não gosto das bordas ao redor dos campos de entrada. Eles parecem extraviados. Quero que seja plano. E por plano, quero dizer sem bordas, apenas fundo simples e simples. Então, vamos voltar para dentro do nosso ministro das Relações Exteriores e fazer essas mudanças ali mesmo, porque não criamos esse formulário usando o Elementor. Criamos tanto no back-end aqui dentro do formulador. 20. Como definir o formulário de Forminator: Então, fazemos as alterações em como ele aparece entrando na guia de aparência de formuladores formuladores. Então, vamos clicar dentro da aparência do nosso formulário. E uma vez que você clica em aparência, temos diferentes opções aqui com as quais podemos brincar e afetar a forma como o formulário percorre. Então, por exemplo, você notará se clicarmos aqui, essa tela remove as bordas. Se clicarmos em Negrito, ele adiciona bordas, material e nenhum. Então eu quero ir com flat, depois atualizá-lo. Então, se visualizarmos as alterações, você percebe agora nossos campos de entrada não têm fronteiras. E isso é bom. Então, a próxima coisa que queremos fazer é editar as cores de nossas fontes. Então, como aqui, nossa fonte é branca. Podemos querer dar uma cor mais escura como essa cor. Então, o que queremos fazer é entrar nas cores logo abaixo do estilo de design. Segunda seção, Cores, Personalizado. E então temos os diferentes campos de formulário de entrada. Temos todos os campos que você pode ter em seu formulário podem ser editados aqui. Então, o que estamos interessados por enquanto é o básico de campo. E dentro do campo é onde temos coisas como o rótulo, o nome e os rótulos de endereço de e-mail. Você pode editar as cores aqui dentro. Então podemos dizer, queremos que seja tão azul. Copie esse azul colado lá. Entre. Então, vamos clicar em Atualizar. E se você visualizá-lo, os rótulos agora têm esse azul. Então, vamos em frente e ver o que mais podemos mudar. Vamos entrar na nossa página Elementor aqui e selecionar o elemento de código curto que está mantendo nosso formulário. E clique em Aplicar ou à direita. Então, vamos clicar em visualizar alterações para que possamos dar uma olhada nisso. Vamos rolar para baixo e ver o que temos até agora. Então esse é o nosso formulário estaca em uma forma diferente até agora. E agora você notará que este formulário, nossa página de referência, tem cantos arredondados e o próprio botão tem cantos arredondados. Mas o nosso não tem isso. Vamos abri-lo. O nosso tem cantos muito afiados. Então, como conseguimos esses cantos arredondados? Portanto, quatro minutos ou nos fornece uma maneira de adicionar CSS adicional e adicionar CSS significa folhas de estilo em cascata. Então, cada página da Web que você visualiza na Internet foi estilizada e dada essa aparência pelo CSS. Assim, podemos adicionar algum CSS adicional verificando isso. E eles já nos forneceram alguns seletores básicos aqui. Agora, caso você não conheça CSS, você realmente não precisa entender nada aqui, porque isso é algo que você pode aprender mais tarde. Isso é apenas para nos ajudar a alcançar algo que o plug-in do formulador não fornece fora da caixa. Eles não têm, eles têm muitas opções aqui para editar clicando em coisas, mas não podemos clicar em algum lugar e fazer esses cantos arredondados. Temos que usar algum código. E essa é uma das coisas boas sobre o WordPress. Você pode ir além do que um plugging oferece e adicionar seu próprio código. E os plug-ins até fornecem um lugar para lançar seu código e ele combinará com o código deles e fornecerá a você, você realmente está procurando. Então, no nosso caso agora, quero selecionar nossos campos de entrada. E temos um seletor aqui chamado input. Então, se eu clicar nisso, ele selecionará todas as entradas, todos esses campos de entrada. E qualquer regra que eu dê dentro desses dois colchetes encaracolados se aplicará ao campo de entrada. Então, neste momento, quero dar-lhe um raio de borda que é um pouco arredondado. Então, raio fronteiriço 50 pixels. Então, se eu visualizá-lo agora, você notará que nossos campos de entrada têm um canto arredondado porque nós os selecionamos com nossa entrada de seletor aqui e dando-lhe alguma regra que deve ser aplicada a ele. Então, vamos atualizar isso em ver o que temos no front-end. Atualize isso. Então vamos para o front-end. Role para baixo, selecione o formulário e aplique essa substituição. Então, vamos em frente e clique em Visualizar alterações. E os cantos agora estão arredondados, mas nosso botão ainda não está arredondado. Agora, no momento, não temos um seletor para o botão de envio dentro desses plug-in, há outra maneira de localizar esse seletor e isso é usando as ferramentas de desenvolvimento. Mas eu não quero me aprofundar em fazer isso. Então, agora, podemos deixar o botão assim. Podemos deixar o botão assim porque não quero começar a entrar no DevTools aqui e falar sobre como encontrar o seletor que você está procurando porque isso está além do escopo desta lição. Então, vamos deixar o botão assim. Gosto disso até agora. Mas eu quero puxar isso um pouco mais perto só para aumentar sua altura. Vamos ver o que acontecerá quando atualizarmos a página. Vamos rolar para baixo. Sim. Não, vamos reverter para o original. Vamos aumentar o tamanho desse título apenas para que fique mais atraente. E vamos atualizar isso. Em seguida, vamos visualizar as alterações. Ou pedale. Gosto disso até agora. Agora terminamos com esta seção de call to action. Você pode coletar dados do usuário. Você pode inscrever pessoas em sua lista de discussão e manter contato com elas e comercializar coisas para elas. A próxima coisa que queremos fazer, medida que você finaliza a versão para desktop da landing page é o rodapé. Então, vamos criar o rodapé na próxima lição. E depois disso, iremos em frente e tornaremos todo o site responsivo em dispositivos móveis, desktops e tablets. Então, vamos criar o rodapé na próxima lição. Vejo você em breve. 21. Como criar o rodapé: Agora estamos quase acabando com a versão para desktop desta landing page. A única parte restante é que a comida é, então vamos avançar e pular no painel e criar o rodapé. Vou entrar na aparência, Elementor, cabeçalho e rodapé construtor. E você se lembra que criamos uma barra de navegação. Então, desta vez, estamos criando uma pasta. Então clique em Adicionar novo. E podemos ir em frente e dar um nome a ele. Então rodapé. Como de costume, os modelos devem ser Elementor largura total, sem barra lateral para alongamento de largura para o layout de conteúdo, desativar o rodapé desativado intitulado Cabeçalho móvel, cabeçalho primário. E vamos publicar isso. Então, a próxima coisa que queremos fazer é definir o tipo de modelo deve ser um rodapé, deve estar disponível em todo o site, deve ser editável por todos. E vamos prosseguir e fazê-lo. Eu só gosto de ativá-los porque às vezes eu posso querer usar a tela em vez da opção de largura total esticada. E vamos atualizar isso. Então vamos editar com o Elementor. Tudo bem, então aqui estamos nós. Estamos trabalhando no rodapé. E você notará que o que temos são quatro elementos básicos. Um logotipo, que é um elemento de imagem, um elemento de menu que já criou. Então temos um elemento de parágrafo e esses ícones aqui. Vamos seguir em frente e criar uma seção de coluna tripla. Então, aqui estamos nós. Selecionarei esta coluna tripla. E no meio aqui, vamos em frente e adicionaremos um nav. Lembre-se que tínhamos um nav por HF ser construtor de rodapé de cabeçalho, Menu Nav. Agora, por padrão, ele vai para a esquerda. Então, o que eu queria facilitar, vá para Layout e alinhamento. Coloque-o, coloque-o para o centro. Aqui. Vamos adicionar um elemento de imagem. Vamos seguir em frente e pegar isso. Um dos logotipos que criamos para a pasta. Acredito que deveria ser este, a versão pequena. Insira mídia. E vamos prosseguir e inserir ícones de mídia social aqui. Vamos deixar isso lá dentro. E vamos expandi-lo um pouco. Então, dentro do estilo, enquanto isso ainda estiver selecionado, vamos reduzir um pouco o tamanho. E vamos alinhá-los à direita. Vamos atualizar isso e visualizar as alterações. Então essa é a comida que, é assim que parece. Precisamos empurrá-los para baixo, como eu mencionei. Então, eles ainda são selecionados preenchimento avançado. Top. Vamos empurrá-lo para algum lugar lá. Em seguida, atualize isso. Agora, a próxima coisa que queremos fazer é clicar neste ícone aqui para que possamos adicionar um editor de texto e soltar esse texto lá. Então, sob estilo, enquanto isso ainda estiver ativo, vamos alinhá-lo ao centro. Vamos seguir em frente e copiar esse texto de direitos autorais ali mesmo. Copie isso. E enquanto isso ainda estiver selecionado, vamos ao conteúdo, selecione tudo isso e excluí-lo e colá-lo lá. Atualizar. Entre no estilo desta topografia e vamos fazer esse tamanho 12. Agora vamos selecionar o menu de navegação. E vamos entrar no estilo. Em tipografia do Menu Principal. Vamos mudar a tipografia para Montserrat e atualizar isso. Agora, ao passar o mouse, este é o verde que vem por padrão do Elementor. Este não é o verde que queremos. Então, vou tocar neste documento e copiar esse verde. E volte para o menu. Selecione-o. E então, dentro da tipografia do estilo pairar. Vou mudar essa cor para a cor que acabamos de copiar. E agora tem aquela boa atualização verde que vamos visualizar o rodapé ou sexta-feira. Agora que a pasta está pronta, acho que não queira fazer mais alterações nesses ícones. Eu acho que eles parecem incríveis, mas você pode brincar com eles selecionando-os. E aqui, fazendo todas as alterações desejadas em Editar ícones sociais. O que eu quero fazer é sair para o painel. Porque eu tenho todas as minhas alterações salvas. Então vou para dentro das páginas. N. Homepage era a nossa landing page, é claro. Então, eu quero vê-lo. Então, vamos alterar as guias para essa página. Então, aqui estamos nós, de cima para baixo, Vamos rolar para baixo para longe. Então nossos 40 parecem incríveis, mas precisamos de alguma margem entre os dois. Assim, podemos adicionar uma margem inferior a esta seção de pincel ou podemos adicionar uma margem superior à pasta. Então, para editar isso, voltarei para dentro da lista todas as páginas e direi Editar com Elementor, mas quero clicar com o botão direito do mouse nisso e abrir o link em uma nova guia e alternar para essa guia. Assim, podemos fazer as alterações a partir daí. Então, vamos rolar todo o caminho até o fundo. E o que vamos notar é que precisamos de alguma margem aqui na parte inferior. Mas a margem que precisamos 0s neste pincel inferior. Então, vamos selecionar essa seção de edição. Vamos para Avançado e depois liberando esse link. Vamos adicionar a margem inferior para ser 50. Agora vamos dizer um 100. Atualize isso. E vamos visualizar as alterações. Rolando todo o caminho até o fundo. Agora temos uma boa margem aqui entre os dois. Super incrível. Agora, acabei de lembrar que deveríamos fazer algo sobre a barra de navegação para que, quando estamos rolando, ela nunca desapareça, sempre fique no topo. Então, vamos seguir em frente e fazer isso na próxima lição. Então, vejo você em breve. 22. Torne a barra de navegação em destaque: Bem-vindo de volta. Agora é hora de deixar o cabeçalho pegajoso. Vamos começar. Então, vamos pular direto para dentro do painel. Vamos entrar aparece rodapé do cabeçalho, construtor. E vamos editar a barra de navegação com o Elementor. Então, vou clicar com o botão direito do mouse e editar a barra de navegação com o Elementor e alternar para essa guia. Então, aqui estamos no espaço de trabalho navbar. E o que queremos fazer é deixar a seção editar a seção e entrar em avançado. E lembre-se de um dos plugins que instalamos no back-end, deixe-me mudar para o back-end e entrar em plugins, plugins instalados. Um dos plugins era efeitos de cabeçalho adesivos para Elementor. Então, aqui dentro, enquanto isso ainda estiver selecionado e isso lê a seção Editar avançada, você notará que temos efeitos de cabeçalho fixo aqui. Expanda isso. Você tem essa opção para ativá-lo, e isso apresenta mais opções aqui em baixo. Então, o que queremos fazer é antes de tudo mudar a distância Skoll para uma. Essa é a quantidade de rolagem que você quer antes da cabeça ou fica pegajosa. Então, o que eu preciso fazer aqui é a distância de rolagem alterada para uma. E então vamos ver o que mais temos aqui? Cabeçalho transparente. Não, não queremos que ele se torne transparente. Então, queremos manter a cor azul mesmo quando ela estiver pegajosa. O que eu quero fazer é ligar isso, ligar. E para a cor, quero separar aqui e escolher essa cor azul. Mais uma vez, copie essa guia aqui e cole-a lá. E atualize isso. Não quero encolher o cabeçalho ou o logotipo na rolagem. Eu só quero que eles permaneçam do mesmo tamanho. Então, vamos visualizar o que temos. Mas é claro que não poderemos ver a aderência porque estamos visualizando a própria barra de navegação. Então, precisaríamos de uma página que seja rolável. Então, vamos ver isso em uma nova página de guia que pode ser rolada. Então podemos ver esse efeito Tiki. Então, agora vamos começar a rolar e perceber o que acontece com o cabeçalho. Então, ele permanece pegajoso. Não importa o quanto o rolo, ele sempre estará visível para o usuário e eles poderão navegar rapidamente no site. Então é isso, isso marca o final desta seção da área de trabalho. A próxima coisa que queremos facilitar agora torna toda a landing page responsiva no desktop, celular e tablets. Vejo você em breve. 23. Ajude-me a ensinar o elemento com 10.000 alunos: Olá meu amigo. Em primeiro lugar, eu só quero agradecer muito por se juntar mim nesta aula e escolher aprender comigo. E também quero dar os parabéns por ter chegado tão longe na aula. O fato de você ter chegado tão longe na classe significa que você está ganhando valor com a classe. E então eu realmente aprecio você e espero que você esteja gostando da aula em si. Dito isso, preciso da sua ajuda. Tenho a missão de ensinar pelo menos 10 mil empreendedores como você a usar o elementary para criar seus próprios sites ou páginas de destino para vender seus produtos. E aqui está como você pode ajudar. Você vê quando um novo aluno entra em uma aula no Skillshare e depois gosta dessa aula e deixa um comentário. Isso ajuda outros alunos saberem o que esperar da turma. E quando uma turma está recebendo muitas avaliações dos alunos, Skillshare diz: “ Ei, você sabe o que? Esta turma está recebendo muito engajamento e muitas avaliações dos alunos. Portanto, deve ser útil. Portanto, deve ser útil. Então, vamos empurrá-lo para cima na biblioteca para torná-lo mais fácil de ser descoberto por novos alunos. Portanto, o algoritmo Skillshare impulsiona essa classe para cima e a torna mais visível, mais detectável para novos alunos. Porque tem recebido críticas positivas. E é aí que você entra. Junte-se a mim nesta missão e me ajudou a ensinar pelo menos 10 mil alunos como usar o Elementor, como construir belas páginas de destino, sites funcionais deixando uma avaliação nesta aula e informando o que esperar dessa aula. Só vai levar cerca de dois minutos e você está pronto. Mas sua avaliação ajudará muito os novos alunos, futuros alunos, a saberem o que esperar da turma. aulas atendem às suas expectativas. Isso superou suas expectativas? Se você tiver alguma dúvida, lembre-se, você sempre pode colocá-la na área de discussão abaixo deste vídeo e eu poderei ajudá-lo. Eu sempre respondo a todas as perguntas ou comentários que os alunos deixam em qualquer uma das minhas aulas. E com isso dito, eu só quero dizer que aproveite a aula e nos vemos na próxima aula. Paz. 24. Visão geral de design responsivo: Então, estamos quase acabando com nossa página agora. Já o projetamos para desktop e parece incrível no desktop. Como ele se parece em tablets e dispositivos móveis? Então, para ver como ele se parece em outros dispositivos, temos duas opções. Vamos usar. Ele constrói no visualizador de dispositivos elementares, recurso de design responsivo. E vou te mostrar como fazer isso. Ou também podemos usar o DevTools do navegador. E quero mostrar isso rapidamente antes de saltarmos para Elementor. Então, enquanto ainda estamos na landing page deles, quero clicar em Control Shift. I. Isso trará as DevTools. Todo navegador tem essas DevTools. E caso o seu esteja no fundo aqui, não se preocupe com isso. Você sempre pode mudar onde suas ferramentas estão localizadas clicando neste menu aqui e escolhendo qualquer opção aqui. Então, se eu escolher isso, ele vai para o fundo. Vou deixá-lo lá por enquanto. Agora vamos, vamos colocá-lo no lado direito. E, em seguida, para ver como a página de destino ficará em diferentes tamanhos de dispositivos, podemos entrar no modo responsivo. Alterne a barra de ferramentas do dispositivo. Você deve ver esse ícone. Se você clicar nisso. Agora temos todas essas opções aqui para nos ajudar a imitar diferentes tamanhos de dispositivos. Então, se clicarmos neste menu suspenso aqui que tem responsivo, temos o modo responsivo e responsivo significa que podemos arrastar a tela manualmente para aumentá-la em tamanho. E você verá as dimensões mudando aqui em tempo real. Também temos predefinições de diferentes dispositivos. Vamos clicar no Galaxy S cinco para ver como será a landing page nesse dispositivo. Vamos seguir em frente e clicar em um iPad e ver como ele será em um iPad. E podemos aumentar o zoom aqui apenas para aproximá-lo. Então, isso é o que parece em um iPad. Que tal em um iPhone X? Isso é o que deve parecer um iPhone X. E você notará que temos esse menu de hambúrguer aqui. E quando clicamos, ele tem essas opções, o, a barra de navegação. Mas precisamos fazer algo sobre isso porque não parece bom. Atualmente. Role todo o caminho para baixo e veja como é o rodapé. Então é assim que a foto se parece. Também precisamos fazer algo a respeito disso. Basicamente, acho que o site já está em boa forma, apenas alguns truques, e nós o teremos com boa aparência em dispositivos móveis. Vamos ter 100 por cento lá. Então, agora, para sair do modo de design responsivo, clique no mesmo ícone novamente aqui, e no número de mortos e feche as ferramentas de desenvolvimento. E agora queremos entrar no modo de edição ou espaço de trabalho do Elementor. Então, enquanto ainda estivermos nesta página, irei até aqui e se eu clicar que abrirá esse espaço de trabalho. E se passarmos o mouse aqui e clicarmos na barra de navegação, abriremos o espaço de trabalho de edição da barra de navegação. mesmo caso se aplica ao rodapé. Se clicarmos, isso será levado para o local onde começaremos a editar o rodapé. Então, vamos começar com a barra de navegação. Então, vejo você em breve. 25. Navbar responsivo de dispositivos móveis: Bem-vindo de volta à parte de design responsivo desta classe. Agora, para começar a usar elementais incorporados em recursos e ferramentas de design responsivo, terá que entrar no modo de edição. E então vou passar o mouse por aqui. E se eu clicar em Editar com Elementor será levado diretamente para editar a página em si, o conteúdo principal, a seção de heróis e o conteúdo do corpo principal. Mas se passarmos o mouse aqui e clicar em navbar em vez disso, será levado para o local onde estaremos editando isso. Agora Bar, Only. mesmo caso se aplica ao rodapé. Então, a primeira coisa que queremos fazer é editar a barra de navegação porque queremos começar tornando a barra de navegação responsiva ou correta. Então, aqui estamos nós. Podemos editar a barra de navegação e torná-la passiva. Então, para começar, a primeira coisa que queremos fazer é descer aqui e clicar neste ícone de modo responsivo para ativar o modo responsivo. E um novo aviso de que há uma barra pop-up aqui na parte superior com todas essas opções. E, como você pode ver, temos um tablet, tamanho de tablet e um tamanho de celular. Queremos começar analisando como a barra de navegação fica nas telas móveis. Então, em uma camarilha que, é assim que parece. Não parece muito apresentável. Então, a primeira coisa que queremos fazer é empurrar o logotipo para a esquerda e este menu para a direita. Agora, uma coisa que você precisa ter em mente é que essas são duas colunas alojadas nesta seção. Vamos mudar o modo de área de trabalho por um segundo. Então lembre-se, esta aqui é uma seção de coluna dupla. Tem uma coluna, duas colunas. E, portanto, ocupa 100% da tela. Então, essencialmente, essas duas colunas são divididas em porcentagens desses 100%. Portanto, isso pode ser 20% nestes poderia ser de 80%. Então, quando você muda para o dispositivo móvel para trazer esse logotipo para a esquerda e o menu para a direita, o que precisamos fazer é dividir essa largura de 100% por dois, então isso é 50%, 50%. Vou clicar nesta coluna aqui. A coluna que está segurando o logotipo. E em layouts, largura da coluna, vou digitar 50%. Apenas 50 assim. E agora está ocupando 50%. Você pode dizer pela fronteira aqui. Então, vou selecionar a coluna do menu também. E farei o mesmo em Layout, largura da coluna 50%, e agora os dois estão na mesma linha. A próxima coisa que queremos fazer é tornar esses menus visíveis. Agora está preto. Não é fácil ver por padrão. Então, na próxima lição, vamos adicionar algum estilo ao menu móvel. Vejo você em breve. 26. Como definir o menu móvel: E bem-vindo de volta. É hora de tornar o loop do menu móvel mais apresentável. Então, vamos começar. Então, selecionarei o menu em si. E agora entrando no conteúdo, vou entrar no layout. E sob alinhamento responsivo. Vamos empurrá-lo para a direita, assim. E agora vamos torná-lo branco e colorido. Então, vamos entrar no estilo e vamos recolher as configurações do menu principal. Precisamos entrar no gatilho do menu e fechar o ícone. Podemos definir o plano de fundo. Vamos defini-lo para branco por enquanto, para que fique visível. E atualize isso. E quando clicamos no menu em si, observe o que acontece aqui. Portanto, a fonte, por padrão, é branca e ao passar o mouse é verde. Então, o que queremos fazer antes de tudo é dar um pano de fundo. Vamos dar esse fundo verde. E eu só quero ir para o lugar onde temos esse verde. Vou copiar isso e voltar aqui e recolher o gatilho principal e fechar o ícone. Porque estamos interessados neste menu suspenso. Vá para dentro do menu suspenso. E para a cor de fundo, quero alterá-la. Quero colar esse código que acabamos de copiar do outro lado. Então agora está verde. E como você pode ver agora, ao passar o mouse, porque fica verde, é invisível. Então, precisamos mudar o estado do mouse da cor dos textos para, vamos dar essa cor. 40, 40, 40. Em nosso próprio mouse, ele muda de cor muito ruim. Mas agora está escondendo o logotipo. Então, precisamos empurrar todo o menu suspenso para baixo. Enquanto ainda estamos sob o menu suspenso. Vamos rolar para baixo e procurar a distância máxima. E vamos aumentar isso manualmente. Empurre para baixo. E eu gosto de onde está agora. Vamos atualizar isso. E para o divisor, digamos que nenhum. Para se livrar dessas linhas. E agora sem borda, atualize isso. Então, vamos visualizar lá. Se pressionarmos Control Shift I para revelar o DevTools e depois clicar neste ícone aqui, acabamos de ver. É assim que parece agora em tablets. Então é assim que ele se parece em um iPad. Chegaremos ao tamanho do tablet em breve, mas vamos mudar para uma visualização de telefone e é assim que parece no telefone. Acho que gosto de onde entramos, mas podemos nos livrar dessa linha branca empurrando-a um pouco. Então, vamos voltar aqui, distância máxima e reduzi-lo talvez para 25. Atualize isso. E vamos visualizar as alterações. Então, vamos clicar nisso. Sim, então eu gosto dessa posição. Mas agora, observe que o logotipo é recuado muito mais do que, muito mais do que os itens de navegação. Então, vamos posicionar o logotipo corretamente ou as telas móveis. Na próxima lição, verei você em breve. 27. Posicionando o logotipo móvel: Bem-vindo de volta. Agora é hora de posicionar esse logotipo corretamente em telas móveis. Então, vamos começar. Vamos voltar aqui. Selecione o logotipo. E enquanto a coluna do logotipo. E enquanto a coluna do logotipo estiver selecionada, vamos editar a coluna, entrar avançado e vamos remover esse link e isso também. E agora para empurrá-lo para a esquerda, tudo o que precisamos fazer é reduzir a margem à esquerda, assim até esse ponto. E vamos aumentar a margem no topo, só para que possamos criar algum espaço no topo. Vamos dar algo como 20. E agora você notará que o logotipo está quase tocando na borda inferior da seção. Então, vamos fazer algo sobre esse preenchimento aqui. A primeira coisa que precisamos fazer é empurrar todo o menu suspenso. E vamos fazer isso antes de tudo, certificando-se de que estamos, selecionamos o menu de hambúrguer e selecionamos em qualquer lugar dentro dessa borda azul. E agora este é o item que estamos editando aqui. Em seguida, vamos entrar no estilo, rolar para baixo e procurar o menu suspenso. E então vamos descer para a distância máxima e aumentá-la. Ou certo. Em seguida, vamos selecionar esta seção superior que está segurando o logotipo e o menu. Eu já havia removido esse link aqui. Deixe-me também remover isso. Vamos aumentar o preenchimento inferior. Um pouco assim. E vamos atualizar. Vamos visualizar as alterações. Controle I para abrir o DevTools. E é assim que parece. Então, vamos alternar o hambúrguer pode precisar ver o que temos. E agora parece incrível. Mas agora esse menu em si, o ícone Menu, precisa estar alinhado corretamente, como o logotipo. Então, vamos voltar e fazer isso. Enquanto ainda estiver selecionado. Vá para dentro aqui e quebre esses links também. E vamos aumentar a margem certa um pouco até 10. E também a margem superior. Vamos aumentá-lo até esse ponto. Basta usar seu olho para ver se você pode posicioná-lo corretamente. Em seguida, vamos atualizar isso e visualizar as alterações. Certo? Então, agora precisamos empurrar o menu suspenso para cima um pouco para nos livrar desse espaço em branco. Então, enquanto ainda estiver selecionado, vou entrar no estilo. Recolhido o menu principal, abra o menu, menu suspenso. E para a distância máxima, vamos reduzi-la até esse ponto. Atualizar. E vamos visualizar as alterações. Incrível. Então, agora terminamos com o menu responsivo. Está funcionando corretamente. A próxima coisa que queremos fazer é trabalhar em uma seção de heróis responsivos e no resto do corpo. Então, vamos em frente e faça isso na próxima lição. 28. Seção de heróis responsivos: Vamos continuar de onde paramos. Já temos um menu de dispositivos móveis responsivo. E aqui está. A próxima coisa que queremos fazer é tornar o resto da página responsivo, e começaremos com a seção de heróis. Então, para fazer isso, vamos pular dentro do painel e entrar nas páginas. E então vamos editar nossa landing page com o Elementor. Abrirei isso em uma nova guia e alternarei para essa guia. Aqui estamos nós. Então, definitivamente queremos entrar no modo responsivo para iniciantes. Então, vamos mudar para o celular. Então, apenas olhando para ele, você já pode ver um desequilíbrio. A margem aqui é pequenos poços, margem aqui é B. E esses pinceladas parecem um pouco íngremes, então precisamos achatá-los um pouco. Mas à medida que rolamos para baixo, isso é o que temos atualmente. Role para baixo. Não acho que tenhamos muito trabalho porque todo o conteúdo parece ter se alinhado corretamente quando mudamos para o modo responsivo, mas precisamos ajustar alguns dos elementos um pouco como este botão, só para que ele esteja corretamente alinhado. Então, vamos voltar aqui no topo. E a primeira coisa que queremos fazer é achatar esse pincelada. Então, vamos selecionar a seção que está segurando. E vamos entrar no divisor em forma de estilo. E vamos reduzir a altura para talvez 30%. Isso é metade do que temos atualmente. Sim, então eu gosto disso. É isso. Vamos passar para esta coluna aqui e fazer algo sobre essa margem. Então, a primeira coisa que quero fazer é selecionar a coluna que contém todos esses blocos de texto e ícones. E o que queremos fazer é clicar com o botão direito do mouse e editar a coluna. E enquanto ainda estamos lá, vamos entrar avançados. E vamos remover esse link, o preenchimento e a margem padrão. E isso redefinirá tudo para que possamos começar a adicionar nossas próprias margens e preenchimento. E agora eu queria ligá-los mais uma vez agora. Então, farei isso. E vamos dar a eles um preenchimento de 15 ou certo. Então, de todos os lados, de cima, direita, inferior e esquerda. Dentro desta coluna, todos os textos terão um preenchimento de 15. Certo? Então é isso. Vamos selecionar isso. Bem-vindo ao. E vamos alinhá-lo ao centro. E acho que precisamos reduzir um pouco o tamanho porque está em telas móveis, só para que esteja em uma linha. Vamos fazer o mesmo para podcasts. Podcast. Vamos alinhá-lo ao centro e reduzir um pouco o tamanho. Eles podem aparecer um pouco. Só porque este é o nosso H1 e é um resumo do conteúdo da nossa landing page. E depois, vamos fazer o mesmo para o parágrafo aqui. Vá para dentro enquanto ele ainda estiver selecionado. Vamos entrar no estilo e alinhá-lo ao centro. E vamos atualizar isso. Em seguida. Selecione o destaque em. Não me importo de tê-lo lá, mas vamos nos livrar dessa coluna e alinhá-la ao centro que parece mais apresentável. Vamos visualizar as alterações até agora. Vamos pressionar Control Shift I ou Command Shift I no Mac. Já está começando a parecer incrível. Então, vamos fazer algo sobre esses ícones em destaque. Lembre-se de que adicionamos as margens esquerda e direita nessas colunas individuais, mas não adicionamos uma margem superior ou inferior. Adicionamos as margens superior e inferior na seção que a está segurando. É por isso que existe esse espaço contínuo até o fim. Mas para as colunas individuais, não adicionamos margens superior ou inferior. E é por isso que quando mudamos para a visualização móvel, eles não têm margem. Então, vamos selecionar o primeiro aqui, entrando avançado. E para a margem, primeiro vou quebrar isso. E então eu vou aumentar a margem superior em talvez até cinco. Digamos que cinco. E então eu copiarei esse estilo. E se eu colar o mesmo estilo na segunda coluna, ele terá uma margem superior de cinco. E o mesmo caso se aplica ao resto. Então, selecionarei que todas as colunas foram avançadas. Vamos fazer disso um 10. É mais parecido com isso. Vamos fazer disso um 10 também. O primeiro não conta porque não tem nenhum item acima dele. Mas vamos copiar esse estilo e colar o estilo dentro desses outros. Agora vamos remover a margem superior desta. Porque, como você pode ver, é nesta nova seção que é um, que é uma interseção segurando essas três e outra interseção segurando esses três. Então, as seções em si têm sua própria margem. E essas margens não são iguais às margens que temos para a coluna. Então, temos que tratá-los um pouco para fazê-los parecer consistentes. Então, vamos reduzir isso um pouco. Vamos dar um dez. Atualize isso. E vamos visualizar as alterações. Rolando para baixo. Incrível. Nossos ícones ficam ótimos. Vamos passar para a seção de episódios em destaque e torná-la responsiva. Vamos fazer isso na próxima lição. Vejo você em breve. 29. Seção de conteúdo principal responsivo: Então, bem-vindo de volta. Vamos continuar tornando nossa seção de conteúdo principal responsiva no celular. Então, a próxima coisa que queremos fazer aqui é selecionar esse subtítulo. E vamos reduzir seu tamanho. Claro, você é livre para dar o tamanho que quiser. Serrano tem em uma única linha. E vamos garantir que ele esteja alinhado ao centro. Então, no centro de conteúdo, vamos fazer o mesmo por isso. E eu só quero reduzir o tamanho um pouco assim. Vamos selecionar essa fonte, essa descrição também. Vamos entrar no estilo, alinhar, centralizar. Selecione o botão, alinhe o centro, atualize-o. E vamos rever as alterações. Tudo bem, então vamos continuar rolando. Gosto da posição e do tamanho da imagem. Vamos fazer algo sobre essa pincelada. Então, selecionarei esta seção que está segurando essa pincelada. Lembra se eu poderia mudar para o modo desktop? Esta pincelada aqui está dentro desta seção, não na seção azul. Então, vamos voltar aqui, rolar de volta para lá. Selecione esta seção. E enquanto ainda estiver selecionado, vamos entrar no divisor em forma de estilo, parte inferior. E vamos manter isso aos 30. Atualize isso. Acho que parece bom. Quanto a esta seção, acho que onde tudo está posicionado. Mas uma coisa que podemos fazer é selecionar esta coluna indo site avançado. E vamos dar um preenchimento de 15. Tudo bem, então nós empurramos essas cartas um pouco para dentro. Vamos visualizar as alterações. Super incrível. Eu já gosto da posição dessas imagens, mas vamos fazer algo sobre esse traçado de pincel. Então, vamos voltar aqui. Selecione esta seção. Vamos entrar no divisor de folhas de estilo. E isso está no topo porque esta é uma pequena seção que adicionamos apenas para adicionar os traçados de pincel. Vamos dar uma atualização 30 que vamos continuar rolando para ver o que mais precisa ser melhorado ou correto, então Vamos selecionar esta coluna que está mantendo a descrição do texto avançada. Remova esse link ali. E remova esses links ali. E agora podemos selecionar isso, dar um 15. 15. É assim que parece. Vamos reduzir essa margem logo abaixo da imagem. Então, selecionando a imagem avançada. Vamos remover, remover essa margem ali mesmo. E para a margem inferior, vamos usar nosso olho e reduzi-lo até o ponto certo. Acho que vou com o 75. E vamos selecionar sobre Alex. Alinhe o centro. Selecione esse texto. Alinhe o centro. Selecione o botão. Alinhe o centro. Certo. Então, a próxima coisa que precisamos fazer é empurrar esta seção verde para baixo e separada desse bloco de texto. Então, vamos selecionar o botão. E vamos entrar avançado. Quebre o link aqui e aumente o preenchimento inferior. Então, vamos ver. Vamos usar nosso olho até esse ponto. E agora queremos fazer algo sobre essa pincelada como no pincelada anterior aqui. Vamos ver onde ele está localizado mudando para nossa visualização de desktop. E você notará que está dentro desta seção, a seção que está segurando a imagem e o bloco de texto. Então, para editar a pincelada, precisamos ter essa seção de edição selecionada. Uma mudança para a visualização móvel. Ainda selecionado. Estilo, divisor em forma. Parte inferior 30. Sim, então agora parece muito melhor. Vamos selecionar essa fonte. Coloque-o no meio. A mesma fonte aqui. Empurre isso para o meio. Como onde o formulário está localizado. Mas é claro que você pode brincar com o posicionamento até ficar satisfeito. E vamos fazer algo sobre isso também. Então, selecionando isso, entre no divisor em forma de estilo 30. Vamos atualizar isso e visualizar as alterações. Estão certos. Então, estamos quase acabando com o design responsivo para dispositivos móveis. A única parte restante é o rodapé. Então, vamos fazer com que a comida seja responsiva. Na próxima lição, antes de acabarmos. Vejo você em breve. 30. footer responsivo: Então, vamos continuar. Queremos tornar o rodapé responsivo. Então, no momento, temos nosso logotipo aqui. Em seguida, temos nosso Menu de navegação, que se você clicar, abre assim. E temos essas informações de direitos autorais e nossos ícones de mídia social parecem estar desalinhados. Vamos pular para dentro do nosso painel. Vamos entrar no construtor de rodapé do cabeçalho da aparência. E vamos editar nossa foto com o Elementor, abrir o link em uma nova guia e vamos mudar para essa guia. Super incrível. Então agora o rodapé é editável. Vamos mudar para o modo responsivo. E vamos clicar no ícone do celular. Então aqui temos isso. Então eu acho que agora, vamos selecionar os ícones e alinhá-los no meio. Atualize isso. E vamos ver o que temos. Controle o olho de ovelha para abrir as DevTools e alternar para a visualização de idealização. E é assim que nosso rodapé parece. Eu já gosto de como parece, mas você sempre pode fazer exatamente a mesma coisa que fizemos se quiser que seu logotipo no rodapé fique do lado esquerdo e o menu do lado direito apenas divida-os em porcentagens do, uma largura de 100%. Então, voltando aqui, vamos mudar para a visualização da área de trabalho. Como mencionei, quando estávamos tornando a barra de navegação responsiva, a seção que está segurando todos esses elementos tem uma largura de 100% e eles são basicamente divididos em porcentagens desses 100%. Então, aqui, no rodapé, se quisermos trazer esse logotipo para a esquerda e o menu para a direita, ou temos que fazer é selecionar isso. Lembre-se de que temos três colunas, ao contrário da barra de navegação que tinha duas colunas. Então, desta vez, estamos dividindo o 100% em três porcentagens diferentes. Então, vamos clicar nisso. Podemos selecionar a coluna do logotipo, que agora corre todo o caminho para a esquerda. Cada coluna, por padrão, é executado todo o caminho da esquerda para a direita em dispositivos móveis. Então, o que precisamos fazer é selecionar a primeira coluna e dar algo como talvez 20% ou 55%. E vamos dar ao menu 45%. Tudo bem, então isso alinha esses dois ali. Mas lembre-se que tínhamos um terceiro item. Vamos deixá-lo em 100% por padrão para que fique na parte inferior. Essa é outra forma de fazer isso. Mas prefiro o que tivemos um pouco antes. Eu só queria mostrar como estruturar o pé da mesma forma que estruturamos o menu nav usando porcentagens. Atualize isso. Vamos visualizar as alterações. Então, agora, tudo parece espalhado por toda parte. E o objetivo era mostrar que você pode mover as coisas pelas diferentes colunas e redimensionar as coisas. Eu prefiro elementos no rodapé empilhados um sobre o outro como os tivemos inicialmente. Então, vamos voltar ao que tínhamos originalmente. Então vou dar a isso 100%. darei ao menu a 100 por cento de largura. E, claro, os ícones sociais são uma atualização 100% e vamos visualizar as alterações. Sim, então é isso que temos. Então, clicar que revela o menu suspenso, mas o menu suspenso não é estilizado. Então, o que podemos fazer sobre isso? Assim, podemos estilizá-lo da mesma forma que tínhamos estilizado a barra de navegação superior. Então, voltar aqui, expandindo-o. E vamos entrar no estilo. Esse não é o menu principal. Queremos o menu suspenso para a cor de fundo. Deixe-me pegar esse verde muito rapidamente. Copie isso. Volte aqui. Vamos enfrentá-lo lá. E para a cor do texto, queremos que ele seja branco e passe o mouse próprio. Queremos que seja tão azul. Esse azul. E quando estiver ativo, também queremos que seja tão azul. Vamos nos livrar dessas linhas. Então, deixe rolar para baixo todo o caminho ainda no menu suspenso. Role para baixo até divisor, estilo de borda, nenhum. E vamos clicar em Atualizar. Vamos visualizar as alterações. Ou sexta-feira, eu gosto do que temos. Então, agora nossa página é totalmente responsiva. Temos uma barra de navegação responsiva, corpo responsivo e um rodapé responsivo. Então, vamos dar uma olhada rápida na página no momento. Então, vamos entrar nas páginas. E eu vou clicar com o botão direito do mouse em Exibir, abrir o link em nova guia e vamos mudar para essa guia. Portanto, esse é o resultado final que temos para a visualização da área de trabalho. E se eu clicar em Control Shift I, ou Command Shift I, vamos ver o que parece nas telas móveis. Farei algo sobre isso, não se preocupe. Então é isso que temos. Então, vamos nos livrar desse espaço em branco aqui. Na próxima lição, verei você em breve. 31. Como ajustar a posição da barra de navegação responsiva: Vamos fazer algo sobre isso. Então deixe-me sair do DevTools, fechar isso. E então vou passar o mouse sobre eles e clicar na barra de navegação para que possamos editá-lo. Então, aqui, o que queremos fazer é mudar para o modo responsivo, a menos que seja uma visualização móvel. Então, o que queremos fazer é empurrar toda a seção para cima, reduzindo essa margem superior aqui. Então, vamos em frente e selecione a seção inteira e diga Editar. Vamos prosseguir e remover esses links aqui. E então, para a margem superior, em primeiro lugar, vamos aumentar o preenchimento superior para algo como 40. E vamos reduzir a margem superior pela mesma quantidade, mas na direção oposta. Então isso é menos 40. E o que isso faz é empurrar essa seção azul que acabamos de adicionar para cima. Então, vamos reduzi-lo para, digamos menos 40. E agora a área azul extra que obtivemos quando aumentamos o preenchimento, deixe-me remover a margem. Esta área azul extra aqui foi empurrada para cima e cobrirá esta área. Então, vamos retornar esse menos 40. E vamos atualizar isso. Acho que também devemos aumentar o preenchimento inferior aqui para algo como 15. Opa, conexão perdida. Deixe-me apenas atualizar isso. E vamos visualizar as alterações. Control Shift I, para que possamos visualizá-lo no celular e vamos começar a rolar. Não podemos rolar isso porque estamos editando apenas a barra de navegação. Precisamos entrar na landing page real. Deixe-me mudar para isso. Deixe-me atualizar isso. Pelo menos não temos esse espaço em branco lá. E só para que não tenhamos muito espaço aqui em cima, o que podemos fazer é reduzir a margem superior desses elementos. Então, selecionando as colunas individuais e entrando avançado para a margem superior, digamos algo como 10. Não definimos a margem para a coluna do logotipo. Dissemos isso diretamente no elemento do logotipo. Então, digamos 0. Atualize isso. E vamos entrar em nossa landing page e atualizar essa página e ver o que temos. Certo. Então reduzimos todo o espaçamento que estava no topo. Acho que agora temos uma landing page que está funcionando e parece super incrível. Claro, se você tiver mais tempo, você precisa praticar mais e brincar com todas as ferramentas e recursos fornecidos pelo Elementor. Espero que até agora você tenha entendido como usar algumas das ferramentas e recursos fornecidos pela Elementor para criar uma landing page de classe mundial. Deixe-me desligar isso. Vamos visualizar a página inteira agora com todas as alterações que fizemos ou corretamente, então vamos começar a rolar até o final. E vamos mudar para a visualização móvel. Vamos começar a rolar. E nossa landing page está funcionando corretamente e podemos alternar por diferentes dispositivos e ver como ela ficará. Então é assim que ele ficará em um iPhone X, em um Galaxy S5 e assim por diante. Agora você pode estar se perguntando, Ei, não podemos ter feito design responsivo no tablet? Então, se eu clicar no modo responsivo, ainda temos o modo tablet. E não fizemos isso. Deixei isso deliberadamente para que você possa fazer algum exercício antes do final da aula. Então vá em frente e tente tornar esta página responsiva no tablet usando os mesmos princípios que usamos para torná-la responsiva em dispositivos móveis. Lembre-se do que fizemos para colocar esses dois elementos lado a lado na barra de navegação, faz a mesma coisa que você fará para o tablet. E como você pode ver agora, isso é o que temos, mas precisa de algum toque. Então, esta será uma boa maneira de você exercer um design responsivo. Você já entende como fazer isso no celular. mesmos princípios exatos se aplicam aqui no tablet. Então vá em frente e faça isso, e vamos ver com o que você vai acabar. E isso marca o fim da nossa classe. Espero que você tenha se divertido assistindo e seguindo junto quanto eu o criei. E espero que, acima de tudo, você tenha aprendido a criar uma linda landing page para um podcast. Meu nome é Ken Visa. É sempre um prazer ensiná-lo a criar belas páginas da web. Já estou trabalhando na próxima aula, o que espero que você ache útil. E espero vê-lo em breve até a próxima vez. Cuide-se, fique legal, peça.