Curso de elemento para iniciantes: como criar uma página de destino de treinamento de aptidão com responsivo

1. Introdução: Nesta classe, mostrarei como usarferramentas de design responsivo móvel elementwise para ferramentas de design responsivo móvel elementwise para criar páginas da Web que se alimentam corretamente em todos os tamanhos de tela. Em seguida, você trabalhará em um projeto do mundo real onde você aplicará as habilidades que aprendeu para criar uma página de destino moderna que se ajusta corretamente às telas de desktop, tablet e celular. Meu nome é Ken Besser e sou um empreendedor online, criador da web e entusiastas da tecnologia. Dirijo alguns negócios online e construí todos eles com a Elementor sem qualquer codificação. Para se juntar a eles se beneficiar desta classe. Você não precisa de nenhuma habilidade anterior no Elementor. Tudo o que você precisa é de um forte desejo de aprender a fazer páginas web responsivas para dispositivos móveis. Mas porque Elementor está instalando WordPress, minha suposição é que você está familiarizado com WordPress e arrastar e soltar construtores. Então, quando eu estava criando essa classe, as pessoas que eu tinha em mente incluem sentir como web designers, designers agências de web design. Então, se você trabalha em uma agência de web design, empreendedores on-line que gostariam de resolver o assunto em suas próprias mãos e projetar páginas web responsivas para seus sites, até mesmo amadores. Então, se você quiser fazer isso como um hobby, ainda será algo incrível para você. Basicamente, se você estiver interessado em aprender a projetar páginas web modernas para dispositivos móveis em 2021 e além. Esta aula será uma grande façanha para você. Por quê? Porque você será capaz de aplicar essas habilidades em qualquer projeto de site futuro que surge em produzir excelentes páginas da Web que não só olhar bonito em vários tamanhos de tela, mas também dar aos usuários uma experiência de usuário deliciosa. Enquanto na aula você aprenderá a criar páginas web responsivas no Elementor criando sua própria página de destino, você pode aplicar esses mesmos princípios além do seu site pessoal com as habilidades que você adquiriu se você ainda não é um web designer. 2. Atualização rápida — o novo assistente de configuração do Elementor: Bem-vindo de volta. Agora, esta lição é uma nota lateral rápida ou atualizações rápidas do processo de instalação do Elementor. Se você estiver fazendo essa aula em maio de 2022 e além, notará que a ativação do Elementor agora tem um assistente de configuração composto por 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 resto que você está aprendendo nesta aula não muda. Ainda é o mesmo processo durante todo. 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, Adicionar Novo. Assim, podemos adicionar Elementor e passar por esse processo. Vou procurar a instalação do Elementor agora. E agora, quando clico em Ativar será redirecionado para esse assistente de configuração. E podemos passar por isso juntos. Então, aqui estamos nós. Vou apenas diminuir um pouco 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. Portanto, esses são alguns dos benefícios para se inscrever em uma conta na Elementor. Mas o problema é que você não precisa ter uma conta na Elementor para usar o Elementor. Então, vou apenas ir em frente e pular esta parte. O segundo passo é aceitar, continuar com o tema de santificação 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 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 agora com antecedência. Você pode simplesmente ir em frente e abrir a biblioteca de mídia e escolhê-la na biblioteca de mídia ou carregada 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 mostrarei como fazer isso. Vamos clicar em Ignorar. E agora chegamos ao último passo 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 vou em frente e pular. 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 o que eu queria te mostrar. São novas atualizações. Não estava lá há alguns meses. Agora, está lá. Mas tudo o resto nas próximas lições permanece o mesmo. O processo ainda permanece o mesmo para criar uma landing page. Então, sem perder mais tempo, vamos passar para a próxima lição. Vou para 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. 3. Como instalar os plugins necessários: Então este é o cabeçalho da página de destino para criar. Tudo o que você vê na tela agora fará parte do cabeçalho. Então, esses botões aqui que o sexo bloqueia na barra de navegação bem aqui. E esta deve ser a primeira coisa que vamos criar agora. Então, pulando para o backend do WordPress, esta é uma nova instalação do WordPress, então eu nem sequer tenho um plug-in. Então vamos em frente e primeiro instalar os plugins. Vamos precisar criar a barra de navegação. Então vamos entrar nos Plugins e Adicionar Novo. E o primeiro plugin que precisamos é Elementor. Então é o primeiro item é pedra. Agora, vamos rolar para baixo Enquanto na mesma página e procurar elementos, elemento Keith ou add-ons, iso agora, e vamos também Leste. Então procure um efeito de cabeçalho para elementor. Tudo bem, então agora que eles estão instalados, vamos ao mínimo instalar plug-ins e ativá-los todos de uma vez. Então clique nisso, selecione-os todos. E nesta lista suspensa, selecione, Ativar e aplicar. Agora que estão todos ativados, estamos prontos para criar nossa barra de navegação. E a primeira coisa que queremos fazer é criar os itens de menu, esses cinco itens de menu aqui, e essas são páginas da web. Então vamos criar páginas da Web. 4. Design o Navbar: Então vamos em frente e criar uma página. Vamos chamá-lo de casa. E aqui no lado direito, role para baixo e procure Atributos de Página, modelo. Defina isso como Elementor largura total. E porque eu estou usando o Tema Astra, eu vou definir isso para layout de conteúdo para largura total, esticado. Depois publicava isto, criava outra página. Adicionar nova página de blog. Role para baixo, atributos pagos definidos como Elementor largura total. Para mim é que isso é que publica. Volte, crie outro. Então vamos chamar esses cursos. Desloque-se para baixo Atributos de Página, elementar trecho de quatro semanas ali mesmo, publicar. Mas não se preocupe com esta seção aqui. Talvez o tema que você está usando não tem as configurações, porque como você pode ver agora, nossas configurações Astra, Eu estou usando o tema Astra. Então, enquanto você estiver usando um tema compatível elementor, você terá esses atributos opção e isso é o que é importante. É chamado de volta aqui, mas você também pode acessar os atributos da página no front-end e eu vou lhe mostrar como. Então, essas são três páginas. Vamos criar mais um contato. Vá para baixo. Atributos de dados, modelo de página para trigo. Certo, agora temos quatro páginas. Então a próxima coisa que queremos fazer é criar a barra de navegação real que será exibida na página. E como criamos que irá dentro dos menus de aparência. E aqui, você verá criar seu primeiro menu abaixo. E podemos ir em frente e criar um mega menu. Vamos chamá-lo de mega menu, e vamos torná-lo o menu principal, Create menu. E porque acabou de criar estas páginas aqui, elas estão disponíveis para adicioná-las ao mega menu. Então vamos em frente e marque essas caixas e adicione-as ao menu. Certo, então eles foram adicionados, Vamos arrastar para casa para ser o primeiro item e contatos será o último item no menu do lado esquerdo para o lado direito. Vá em frente e salve o menu. Incrível. Então agora temos um cardápio. Wordpress sabe que temos um menu e o menu é chamado de menu Mega, e ele irá conter esses quatro links. Estes são quatro links para estas páginas. Então, como exibimos esses cardápios de uma maneira chique como esta? Fazemos isso com a Elementor, e eis como fazê-lo. Então saltando sobre dois elementos chave, lembre-se que este é um dos plugins varrer instalado com Elementor. Observe que quando você passar o mouse sobre ele, uma das opções aqui é rodapé do cabeçalho. Então clique em Rodapé do Cabeçalho, aqui porque ainda não temos nenhum criado. Podemos ir em frente e criar um, Adicionar Novo, dar-lhe um nome. E isso pode significar mu para consistência. Claro que é um cabeçalho 1, é visível em todo o site. Se você quiser que ele seja visível em páginas específicas, você sempre pode fazer isso, mas você tem que ter a versão pro dos elementos manter. E a ativação vai querer isso ativo. Isso significa que quando publicamos a página, este menu será visível luz BCE. Então, agora que temos o menu pronto, vamos em frente e criá-lo visualmente para ficar assim. Então, clique em Editar. Vá para editar conteúdo. Aqui estamos nós. Se pudermos pular para esta página aqui, você notará que o Napa tem duas colunas. Esta coluna aqui que tem o logotipo e esta que tem o menu. Então o que precisamos fazer é adicionar uma seção de coluna dupla. Mas podemos sempre redimensioná-lo de acordo. O que queremos é tê-lo longo deste lado e mais curto do que este lado, porque como você pode ver, esse é o caso. Então aqui, arraste os elementos da imagem lá para que possamos adicionar o logotipo. E eu tinha carregado algumas das imagens que vamos usar. Vou fornecê-los nos links, então não se esqueça de verificá-los. Então, vamos selecionar este logotipo. Inserir mídia. A próxima coisa que queremos fazer é adicionar uma barra de navegação. Então, aqui, digite navegação. E você vai notar que temos dois menus de navegação idênticos. Um deles tem um ícone de cadeado e o outro é como. Este vem com o Elementor Pro. E porque ele não tem no Pro mental, nós não podemos usá-lo. Menos. Use o QI, QI um elementos Keats. E por que não podemos ver o menu ainda? É porque selecionamos um menu, mas acabamos de criar um. Lembrem-se, chamava-se Mega menu. Então lá nós o temos agora visível na fronteira, mas está no lado esquerdo. Precisamos empurrá-lo para o lado direito. Então vamos em frente e fazer isso. Atualize isso. E aqui, clique na roda dentada e certifique-se de que o layout da página aqui, ele disse para Elementor tela ou RI. Vamos pré-visualizar. Gosto de como parece. Então a próxima coisa que queremos fazer é criar o resto da seção de cabeçalho, e vamos começar com o plano de fundo. 5. Design a seção de cabeçalho: Vamos adicionar um fundo preto como este. Então pulando aqui, Vamos sair de onde estávamos editando a barra de navegação Sair to Dashboard. Vamos para as páginas do lado leste. Então o ponto aqui é que queremos criar a seção de cabeçalho. O que estávamos criando era a barra de navegação. Não tínhamos começado a criar a própria página. Então agora temos que selecionar o caminho que se tornará a página de destino, a que vamos preencher com todo esse conteúdo. Então vamos selecionar um deles. Qualquer um deles pode ser a página de destino. Vamos com a página inicial. E como já o publicamos, você pode clicar em Editar com Elementor. Então vamos selecionar a seção de coluna dupla. E para definir a cor de fundo, clique em Editar seção. Vá para o estilo sob o normal. Trate essa caixa. Vamos dar-lhe esta cor muito escura, azulada e enegrecida. Mas você pode dar qualquer cor que você quiser. Tão alto para você. Eu gosto disso. Clique em qualquer lugar lá fora. A próxima coisa que queremos fazer é adicionar esta senhora aqui. Como o conteúdo da coluna dá à seção sua altura. Então vamos clicar nisso, arrastar um elemento de imagem lá. E vamos selecionar essa imagem. E nossa seção já está começando a se parecer com isso. Então a próxima coisa que queremos fazer é clicar nisso. Adicione um título. Pense bem aqui que diz saúde. E assim, selecionando tudo isso, seleciona todos vocês. E então vamos torná-lo maior. Vá para o estilo, mude a cor para branco. Clique em topografia. Junte, redimensione para o tamanho que quiser. Vamos dar-lhe um 115. Em seguida, quero duplicar isso. Passe o mouse aqui e clique nesse ícone duplicado ali mesmo, caso você não esteja vendo esses aparecer. Quando você paira sobre os cantos. Pode entrar no menu de hambúrguer, preferências do usuário e certifique-se de que as alças de edição. Ele disse que sim. Então vamos mudar isso para fitness. Enquanto ainda está selecionado. Vamos entrar na tipografia. Torne isso maior. Diminua o peso. Diminua um pouco seu tamanho. Tudo bem, Próximo eu vou copiar os turcos. Clique neste ícone aqui. Arraste um editor de texto para ali. Clique dentro do rosto deles, todo o texto lá dentro. Estilo interior. Altere a cor do texto para branco e atualize a página. Observe que vamos visualizar a página. E reparem que começando a tomar forma, mas o topo aqui, este branco. Por que é branco? Queremos que fique assim. Queremos que o plano de fundo corra até o topo. Então, como conseguiremos isso? Então, se pudéssemos apenas saltar de volta para dentro do painel, entrar elementos, manter rodapé do cabeçalho. E vamos editar o conteúdo de TI do menu mega. Então agora estamos editando esse cabeçalho de barra de navegação. Então o que queremos fazer é selecionar Editar seção. Vá para Efeitos de cabeçalho de adesivo Avançados. Diga habilitar. Role para baixo. Defina esta distância de meta para um. Isso é quantos pixels você deseja que o usuário role antes que a barra de navegação fique pegajosa? Cabeçalho transparente definido para possuir e atualizar isso. Então, voltando para nossa página onde estávamos editando a página de destino, se você atualizar o controle R ou Command R no Mac, você notará que agora a seção vai até o topo. Então vamos empurrar tudo aqui para baixo para que seja apenas o Napa e o logotipo que estão no topo. E fazemos isso aumentando o preenchimento nesta seção, em toda essa seção. Então, não consigo selecioná-lo por causa da barra de navegação. Vou chamar o navegador pressionando o Controle I ou Comando I no Mac. E posso clicar com o botão direito do mouse na seção e editar, ir para Avançado, desvincular esses valores e, em seguida, aumentar o preenchimento. Vamos dar-lhe um estofamento de 200. Sim. Vamos dar-lhe um preenchimento inferior ou 50 atualizar isso. Vamos visualizar a página. Eu estou gostando do que eu estou vendo agora maneiras esta pincelada. Vamos adicionar este traçado de pincel. Então, entrando aqui, edite o estilo da seção. Nós já adicionamos a cor, queremos que ela seja para o fundo. Então, agora clique na opção de imagem ali e selecione este traçado de pincel. Lembre-se que eu já lhe dei a imagem. Você pode verificar nos links abaixo. Atualize isso. Então vamos pré-visualizar primeiro. E você vai notar que parece estar se repetindo e está perdido. Então, abaixo da imagem, você notará que é a posição, digamos superior à direita. E vamos dizer que não repita. Digamos que percorra o anexo. E para o tamanho, digamos personalizado porque precisamos de um tamanho personalizado. Vamos dar um tamanho de 60. Atualize lá. Agora vamos pré-visualizar. Tudo bem, está começando a tomar forma. Então a próxima coisa que queremos fazer é trabalhar nesses links para que quando você passar o mouse sobre eles, eles estão mudando a cor. 6. Finalize a seção de cabeçalho: Lembre-se que estávamos editando a barra de navegação também. Então vá para a página onde você estava editando seu caso Napa. Você não sabe onde é. Basta ir para elementos manter, deixe-me refrescar isso. Vá para elementos manter rodapé do cabeçalho, depois edite e edite conteúdo. Tudo bem, então aqui, o que queremos fazer é mudar a cor da fonte para verde. Então, vamos entrar aqui. Selecione esta barra de navegação. Ir dentro estilo colapsou o invólucro do menu. Expanda o estilo dos itens de menu em normal. Mude isso para o verde. Por agora. Não tenho o verde preciso, mas tente brincar com ele. Veja se vai funcionar. Então deixe-me copiar esse código porque vamos reutilizá-lo. Controle C. Deixe-me atualizar isso. Então. Agora vamos voltar para a página onde estávamos editando a página aqui e atualizar a página. Tudo bem, agora a fonte é verde. Então a próxima coisa que queremos fazer é mudar os efeitos do pairamento são brancos. Então, pulando para lá de novo, assim por diante, que diz isso para branco. E quando está ativo, também precisa ser branco. Ou escreva atualizar isso. Depois de atualizar isso, podemos voltar para esta página onde estamos editando o cabeçalho e atualizando essa página. Então, agora o item de menu ativo deve ser branco. Exactamente. Aqui vamos nós. Então vamos pré-visualizar isso. Incrível. Então, a página de destino está quase pronta. Vamos adicionar os botões. Estes três botões aqui. Clique lá, digite seu arquivo. Ele vai trazer este botão duplo por elementos manter a luz. Ele não vem por padrão com Elementor. Então vamos arrastá-lo para lá. E a primeira coisa que queremos fazer é mudar o botão de nome aqui, os rótulos dos botões. E nós fazemos isso primeiro recolhendo o botão duplo, expandindo o botão um, e mudamos isso para se juntar a nós ou qualquer outra pessoa que possa querer mudá-lo para. E é aqui que você adiciona seu link, para onde você quer que o botão aponte. E se você quiser que o link seja aberto em uma nova guia, você sempre pode clicar nela e abrir uma nova guia. Em seguida, atualize agora. Então vamos mudar de botão para botão. Então deve dizer Saiba mais. Certo? Então você percebe que ele entrou em colapso e a palavra “Mais “caiu porque é muito longa. Precisamos tornar os botões um pouco mais largos. Botão recolhido, então um botão expansível. E vamos aumentar a largura ali mesmo. Agora é o ponto. Vamos atualizar isso. E pré-visualizar alterações. Tudo bem, incrível. Então, vamos voltar. Então, em seguida, queremos mudar a cor do botão, então isso deve ser verde. Vamos entrar enquanto ainda está selecionado, vamos entrar. Estilo recolhido botão um. Quero mudar o botão para primeiro. Sob o normal, você notará que há cor aqui, e há também um tipo de fundo. Se você alterar essa cor, você está alterando a cor da fonte, o texto Saiba mais. E se mudarmos o tipo de plano de fundo, é quando mudamos a cor de fundo deste botão. E vamos querer que seja a tela. Então, por enquanto eu não tenho esses códigos de cores, então eu vou tentar obter alguns realmente perto disso. Acho que é quase como aquele verde atualizado. Este outro, botão um, é de cor branca. Então vamos para o Botão 1. Corrente um tipo de espinha dorsal aqui para branco. E agora você notará que a fonte não é visível porque também é branca. Então precisamos mudar sua cor. Logo abaixo do normal é a cor. Vamos ver, é que estes escuro. Lou, uma coluna enegrecida assim. Observe que a fonte também escolhe preto para contraste. Então vamos alterar esta cor da fonte recolhido botão 1, botão Expandir para sob cor. Vamos mudar para preto. O mesmo preto que tínhamos no Botão 1. Então vamos, vamos expandir o botão 1. Primeiro. Clique nessa cor, copie-a. Botão recolhido 1, botão Expandir para clicar nisso e colar essa codificação de cores lá. Tudo bem. Assim por diante. No entanto, essa fonte deve ficar preta, não ao passar o mouse. Este botão deve ficar verde e a fonte preta ou pedalar. Então, em Hover, botão 1 sobre, atirar, virar a cor verde. Vá em frente e pegue estes verdes. Então eu vou recolher isso e ir para Button para pegar a tela. Espere aí mesmo. Volte para o botão um. Vá para o estado de foco do Botão 1 e altere a cor e o tipo de plano de fundo. É um verde. Então, ao passar o mouse muda de cor para verde e a função permanece, muda para branco. Certo, esse botão precisa mudar para branco e a fonte para preta no Holober. Então vamos trabalhar no botão verde para passar o mouse precisa mudar para yup . E a fonte precisa mudar. Tão preto para aquele preto escuro. Podia ter entrado, agarrá-lo do outro lado. Ok. Vamos agarrá-lo deste lado. Vamos pegar aquela cópia da falta que entrou em colapso, que, expandir isso. E queremos mudar o botão. Cor em pairar aqui. Sh que preto. Tudo bem, então vamos pré-visualizar isso. E isso é o que temos até agora. Então a próxima coisa que queremos fazer é adicionar aquele pequeno botão de vídeo ali. E esse botão maior é muito legal. É fornecido por elementos manter a luz. Ele permite que você adicione um vídeo Sobre Nós ou algo para informar rapidamente as pessoas sobre quem você é nessa página de destino. E é assim que acontece. Então você clica no botão e uma janela de vídeo aparece assim. Se você tem uma história sobre nós, poderia rapidamente contar às pessoas sobre você. Então vamos em frente e adicionar esse botão. E adicionamos isso clicando no vídeo de digitação. E nós temos as opções de vídeo de quadro aqui. Vamos levar estes que são trazidos por elementos. Mantenha a luz, e solte-a logo abaixo dos botões. Por padrão, é de cor rosa. Então, primeiro queremos alinhá-lo à esquerda. Então vamos para o estilo e alinhamento à esquerda. Depois clique no estilo do botão. Então podemos começar a editar as cores. Como você vê, a cor brilhante é azul. Queremos transformá-lo na tela. Então eu já tinha copiado essa cor verde, então deixe-me colá-la lá. E agora você vai notar que é verde quando brilha. E logo abaixo da cor brilhante, temos o tipo de fundo. Clique nisso na cadeia. Deixe-me rolar para baixo uma vez, mudar a cor lá para o mesmo verde. Então eu vou colar o verde lá dentro. E agora está verde. Então, se pudesses pré-visualizar isso. As mudanças, isso é super incrível. Ainda precisamos fazer um ajuste fino para que pareça melhor assim. Como você vê, há uma diferença em onde esta senhora se situou na página em comparação com a nossa referência. Então vamos empurrá-la um pouco para cima. Voltando a esta página aqui, selecione a imagem da senhora. Vá para Avançado e exclua as margens e o preenchimento. Vamos rever alguma margem no topo para algures lá. E atualizado. Tudo bem. Vamos pré-visualizar. Sim, nós a pressionamos um pouco, mas precisamos fazer mais. Precisamos aumentar essa margem. Não se preocupe com ela tocando na barra de navegação aqui quando o editor, quando atualizamos e vamos para a página de pré-visualização, o real se visualizarmos mudanças, perceba que agora ela está quase no lugar certo, mas precisamos para empurrar essas pinceladas fora um pouco para que também fique totalmente visível. Vamos fazer isso. Vamos reduzir o tamanho da pincelada. Então não posso selecionar esta parte aqui porque estou obstruída pela barra de navegação. Mas posso apertar o Controle I para trazer o navegador. E se eu conseguir derrubar isso, esta seção é toda essa seção aqui. Então, se eu editei assim, alguma seção de edição que está segurando o fundo preto na pincelada. Vamos ao estilo. E aqui mesmo no dimensionamento, vamos reduzi-lo ainda mais para talvez 55. Atualize lá. E vamos pré-visualizar as alterações. Certo, estamos quase lá. A próxima coisa que queremos fazer é arredondar esses cantos, como na nossa página web de referência aqui. Então vamos voltar aqui, seleciona o botão duplo. E vamos embora enquanto ainda dentro do estilo. No botão 1, vamos colocar o raio para 10, o raio da borda para 10, atualizar lá. Em seguida, role para baixo enquanto ainda está sob o botão um. O link, o estofamento. Dê-me o preenchimento superior de 10 e o preenchimento inferior de 10. A rolagem para cima e recolhido botão 1, botão Expandir para fazer o mesmo, border-raio 10. Role para baixo até o pad no dab do link. Preenchimento superior, preenchimento inferior, dez dados. Vamos pré-visualizar as alterações. Incrível. Então o site é Taney moldar da maneira que queríamos. Então é isso. Nossa seção de cabeça está pronta. A próxima coisa que queremos fazer é criar a seção do corpo, depois o rodapé. Nós não temos uma seção de corpo para se referir, então nós apenas vamos fazer isso estilo livre. Mas não se preocupe, estamos no controle total. Irá aparecer com algo incrível. O principal objetivo de fazer estes 0s, compreender os conceitos fundamentais por trás da criação de páginas web que são responsivas ou móveis desktop e tablet. Vamos continuar a criar a seção do corpo. 7. Design a seção de corpo: Então vamos criar uma seção de corpo muito simples porque estamos apenas tentando ver como fazer nossa página web móvel responsiva. Logo abaixo da seção da cabeça, vou adicionar uma divisória. Então, primeiro de tudo, vamos adicionar essas colunas triplas à estrutura. Então vamos clicar no sinal de mais no meio. E vamos adicionar um divisor. Quero dizer, vamos fazer cortes. Sim, vamos deixar assim. Eu provavelmente quero torná-lo verde também. Acho que ainda tenho aquele verde. Você pode clipe. Sim, então eu quero voltar verde. Vá para a seção Editar, vincule esses valores e adicione uma margem superior de 40. Em seguida, queremos adicionar uma seção de coluna dupla. Vamos adicionar uma imagem aqui. Nesta imagem poderia ter. Vamos adicionar todas essas imagens lá. Vamos usar essas imagens e eu vou fornecê-las. Então, confira no link abaixo. Então, basicamente, estamos tentando criar uma página de destino muito simples. É tudo sobre aprender a tornar a página responsiva. E uma vez que você entender todos esses conceitos, você será capaz de criar páginas WordPress muito incríveis usando Elementor. Então, para fins de ilustração ou criar apenas uma página de destino simples. Vamos pegar essa imagem e inseri-la lá dentro. Vamos talvez tomar, vamos adicionar um título, o 're e como um acompanhamento porque esta é uma página de destino, talvez estes possam ser algo para convencê-lo. Por que eu? Aqui, digamos que este é um treinador que está tentando nos convencer a contratá-los como nosso personal trainer, são bons que essa cor 404040. Pode haver. Vamos aumentar o tamanho aqui. Em seguida, poderíamos adicionar um sub-cabeçalho logo abaixo dele, ou acima dos resultados. Então provavelmente já lhe daremos a mesma cor, 40. 40. Então, provavelmente, vamos adicionar um editor de texto ali. Sim, provavelmente algo assim. Vamos aumentar o tamanho de um, tudo sobre isso. Então, em seguida, queremos mudar a cor desta coluna aqui. Queremos dar-lhe um pouco mais de vida. Então, clicando naquele editor de coluna ali, indo sites mosaico, fundo sob normal. Mude isso para, digamos que talvez alguns da mesma cor aqui. Então deixe-me entrar aqui. Editar seção. Deixe-me pegar essa cor muito rapidamente. É de cor preta. Copie isso. Eu quero vir aqui, selecionar isso aqui. Eu quero dizer colar esse código. E eu quero mudar por que eu para a tela. Então eu vou clicar nisso. Selecione esse verde. Copie isso. Vou selecionar isso com estilo. Mude essa cor para verde. Vamos fazer estes brancos. Eu sou tudo sobre resultados em estilo. Vamos mudar para branco. Vamos também mudar isso para branco. Então talvez você possa adicionar um botão. É, lembre-se, uma página de destino é tudo sobre chamada à ação ou CTA. Outra coisa que eu quero fazer é deixar esses cantos um pouco aterrado. Então, enquanto ele ainda está selecionado aqui, vá até a borda sob Estilo, vá até o raio da borda, o raio da fronteira. Vamos fazer com que seja 20. Atualize-os. E mais uma coisa que queremos fazer, bem, a coluna ainda está selecionada. Clique em Avançado. E vamos adicionar o preenchimento enquanto estes são links juntos. Então vamos aumentar isso. E isso meio que traz tudo para o centro , de modo que nenhum conteúdo está inclinado demais para um lado. Então, digamos um dado e vamos visualizá-lo. Ou RI, incrível. Então acho que vou me livrar disso. Não gosto disso. Só estamos tentando ser criativos com isso. E reparem que agora não temos espaço aqui. Podemos adicionar algum espaçamento clicando neste sinal de adição. E aqui, podemos adicionar uma única seção de coluna. Clique no sinal de adição e adicione espaçador. Agora você pode aumentar e diminuir o espaçamento que você quer. Vamos deixar assim. A próxima coisa que queremos fazer é, em primeiro lugar, atualizar isso para que tenhamos as alterações salvas. Então, a próxima coisa que queremos fazer é adicionar outro espaçador. Então vamos adicionar um espaçador lá. Então podemos adicionar outra coluna dupla. E esta coluna, vamos em frente e talvez adicionar um título. E este título vai dizer algo como encontrar o meu ebook. Dê isso. Vamos dar talvez um 40, 40, 40. É um cinza muito escuro. Talvez vamos aumentar o tamanho disso. Quem me dera que tivéssemos um livro. Agora, ela tinha um livro PNG. Acho que é o suficiente. Então vamos deixar assim. Vamos adicionar editor de texto. E este aumento que alguém texto para big data como adicionar uma imagem aqui. Vamos nos certificar que essas mensagens vão até o fim. Então, para a imagem e ver com o que podemos trabalhar. Vamos acrescentar isso. Vamos trabalhar com isso. Cada pré-visualização muda ou à direita. Vamos em frente e duplicar isso. Clique neste ícone duplicado aqui. Para duplicar esta seção. Nós só queremos arrastá-lo abaixo do meu download, meu e-book é duplicar este espaçador bem aqui. E vamos arrastar este aqui para que tenhamos esse espaçamento e possamos mudar esta imagem para a frente. Um. Problema com esse. Atualize essa página. Começamos a rolar. Você vai notar que a nossa cabeça ainda permanece no topo, mesmo que nós estamos rolando e isso é o que queremos dizer com um cabeçalho pegajoso. Já dissemos que adiciona um cabeçalho pegajoso. Lembra-se? Então vamos duplicar esta seção também. Como isso. E vamos arrastá-lo para baixo desta seção. E vamos duplicar este fasor aqui. E vamos arrastá-lo para baixo, até esse ponto para separar esses dois. Vamos duplicar mais um e colocá-lo abaixo dessa seção bem ali. Então vamos aumentar o tamanho desse espaçamento para que haja espaço na parte inferior de uma página de dados. Então vamos visualizar as alterações. Então agora aqui está uma página da Web que já está começando a se parecer com uma página web real. Claro que, com mais tempo, podemos trabalhar nisso para que pareça muito mais bonita. E espero que seja o que está fazendo no seu projeto. Você está dando tempo para fazer parecer atraente. Tudo bem, então vamos substituir esta imagem aqui. Faria mais um. Vamos acrescentar isso. Insira isso. Então, digamos nova rotina. Talvez o Jedi te tenha dado. Agora. Vamos fazer as batidas selecionadas. Podemos fazer pés, depois atualizar essa página. Então vamos visualizar as mudanças. Desloque-se para baixo. Estou a pensar que talvez pudéssemos pôr isto do outro lado, Enbridge eles. Então arraste essas colunas para o lado direito assim, vire-as. Também é virar essas duas colunas como se fossem apenas para variedade. Vamos visualizar as alterações no. Você vai notar que quando ele está carregando, no início esta parte é coisa branca que ele vira azul. E isso é por causa de não ter feito nossos navbars fundo mesma cor que o então precisamos fazer a barra de navegação que está na cor. Eu vou fazer isso. Então vamos em frente e criar o rodapé antes de mudar as engrenagens e agora focar em tornar a página inteira responsiva. 8. Design a seção de rodapé: Vamos criar o rodapé. Vamos precisar usar o elemento crianças luz plugin que usamos para criar a barra de navegação. Então vamos pular para o back-end do nosso painel. Então saindo bem ali, Sair para o Painel. Vamos entrar elementos Key pairar sobre elementos garoto, e ir para Rodapé de Cabeçalho. Vamos adicionar novo. Vamos dar-lhe um nome. Mega, mega pasta, ano. Incrível. E vamos querer que seja um alimento, claro, mudar que, que M1 precisa estar ativo e disponível em todo o site. Salve as alterações. E agora podemos ir em frente e editá-lo da mesma forma que fizemos isso com um mega menu. Editar conteúdo. Então a primeira coisa que queremos fazer é dar a ele aquele fundo que está na seção principal porque queremos manter essa consistência em nosso site. Então, voltando para a página onde estávamos editando a seção de cabeçalho, podemos editar a seção ali mesmo. Então venha aqui. O que nos interessa é só a cor, não estamos editando nada. Então vamos pular aqui. Estamos na frente. Fomos redirecionados para estes lugares por elementos. Manter. A primeira coisa que queremos fazer aqui é criar uma seção. Como de costume. Vamos para Editar estilo de seção, e vamos colar essa cor. Nós apenas dividimos lá, então essa é a nossa cor de fundo. A próxima coisa que queremos fazer é duplicar essa coluna. Na verdade, Vamos triplicar para que tenhamos três colunas. E podemos adicionar o logotipo aqui. Então vamos adicionar uma imagem lá. E vamos pegar o logotipo inserido. Em seguida, queremos dizer algo sobre Watson, o rodapé. Então, clique nesse sinal de mais lá. Dirigindo. Confia em nós. Confie em nós. Confia em nós para tomar ar úmido. Isso é uma promessa, certo? Vamos colocar no meio. Confiança aqui deve soletrar a capital, então vamos mudar sua cor para branco. Vou dar-lhe aquele verde. Cube este verde bem aqui. Em todo o verbo estava verde. Então vamos saltar para cá. Quero dar-lhe este verde atualizado. Em seguida, uma breve descrição do que o site é tudo sobre. Golos aqui em baixo. Então, clique nesse editor de texto. Certo? Então, primeiro de tudo, vamos centralizá-lo. Vamos torná-lo de cor branca. Nós provavelmente poderia ver seção de edição e vamos aumentar o preenchimento na parte superior e inferior. Preenchimento tão avançado, exclua aqueles na parte inferior. Vamos dar 60 e 50 melhores. Vamos ver atualizar isso. Poderíamos também adicionar a barra de navegação. Então, vamos aqui. Nav, menu de navegação, QI, comer. Em seguida, vamos selecionar o menu vai andar o mega menu, atualizar isso. Mas aqui é preto. Por que é preto? Vamos antes de tudo, centralizá-lo. Centro. E vamos manter essa cor branca. Então aqui, é um invólucro de menu colapsado. O item de menu pode ser de cor branca. E quando você superestimar, precisamos que seja tão verde. Sim. E quando agimos, quando está ativo , também precisa ser aquela atualização verde que. Então essa é uma pasta básica. Vamos pré-visualizar. Não se preocupe se você está vendo no topo em vez de no fundo. É porque estamos visualizando o mundo que acabamos de criar. Foi assim que visualizamos. Bem aqui. O que podemos acrescentar? Vamos talvez adicionar alguns links. Então vamos adicionar uma lista. Uma lista. E o que queremos é a lista de ícones. Existem diferentes tipos de bom que queremos o ícone menos. Largue aí mesmo. Temos itens pré-lançados por enquanto para que possamos alterá-los. O item da lista número 1 pode ser privacidade, privacidade. Os lados M número dois podem ser reservas, e este número 32 seria atualização de associação que curso, você pode adicionar links para cada texto. Então, para este item aqui, seu link vai aqui. Lembre-se que você sempre pode abrir o link em uma nova guia. Vamos derrubar isso. Então vamos entrar no estilo. É aqui que mudamos a aparência visual de qualquer elemento que estamos olhando. Então, para os ícones, queremos que eles sejam verdes. Ainda tenho os direitos verdes. E para o aluguel, para o sexo, queríamos ser do White. Que tal eu interpretar, quero que eles estejam do lado direito, do lado esquerdo. Vamos para o mínimo alinhamento. Queremos que os alinhamentos do contrato estejam do lado direito assim. Atualizado. Então vamos pré-visualizar. Super incrível. Então, agora, se voltarmos para a página que estávamos criando, conhecida como nossa página de destino, o rodapé estará agora disponível lá. Então vamos mudar sua mudança de nascimento. Está ali. Então, aqui estamos nós. Se eu atualizar esta página, Controle R ou Command R no Mac. E então vamos rolar para baixo. Encontrará o rodapé aqui. Mas agora observe que há esta pasta aqui por padrão também. E essa foto vem por padrão com Astra, temos que nos livrar deles. Então eu vou entrar aqui. Agora que terminamos de criar o rodapé, posso sair para o Dashboard, ir para páginas. E na página agora uma página de destino, página inicial, eu vou para Editar. Do lado direito aqui. Vou rolar todos os pesos. Então, as configurações do Astros e mudar para rodapé desativado. Então atualize isso. Isso significa que nos livramos desta comida que vem por defeito com asteróide. Então, se atualizarmos isso, vamos rolar todo o caminho até o fundo e ver se nos livramos do, uh, certo, então agora não está lá. Então vamos visualizar esta faga, nossa página de destino, até o fundo. Agora que temos essa página, o que resta é torná-la responsiva. Mas agora, como é antes de torná-lo responsivo? Vamos dar uma olhada. Portanto, observe que quando atualizamos esta página, a barra de navegação é primeiro ampla. Deixa-me, deixa-me refrescá-lo. Então você vai notar que esta parte é y, em seguida, se transforma para essas cores. E isso porque nossa barra de navegação, por padrão, não tem uma cor de fundo. Vamos definir a cor de fundo para ser paz. Então, vamos lá para o nosso painel de instrumentos. É ir dentro dos elementos, manter o rodapé do cabeçalho. Vamos entrar no mega menu. E vamos editar o conteúdo. E eu gostaria que viéssemos aqui. Páginas já abertas. Então estamos editando o cabeçalho da barra de navegação. Então vá para Editar estilo de seção em normal. Vamos basear essa cor de fundo ali. Tudo bem, então se voltarmos para as espadas e refrescantes, então pré-visualizar. Quando isso estiver recarregando pesado, observe o que está acontecendo agora. Vamos refrescá-lo novamente. Você vê isso? Então, nós resolvemos isso no pergaminho para baixo e olhar para a nossa página de destino. Isso parece super incrível. Então nossa página de destino de amostra está pronta. A próxima coisa que queremos fazer é torná-lo responsivo ou tablet móvel e desktop. Mas antes de torná-lo responsivo, vamos primeiro ver como ele se parece no momento no telefone celular. Então, clicando neste ícone de modo responsivo aqui em baixo. Veja o tamanho do logotipo no celular. Não está nem perto de capacidade de resposta móvel. Então, o que faremos sobre isso? Lasso vamos fazer a seguir? Vejo você do outro lado. 9. 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. 10. Faça a página: Então vamos começar com a barra de navegação. Então vamos para a seção da cabeça, depois o corpo, depois o rodapé, e terminamos. Então, mudando para o meu cabeçalho. Aqui estamos nós no cabeçalho. Se visualizarmos na tela móvel, é assim que parece. Direto no tablet. Clique aqui para ver no tablet. É assim que parece ou mais em um tablet. O que eu gosto de fazer é criar uma barra de navegação separada que só será visível ou celular e tablet. Então, como fazemos isso? Primeiro de tudo, vamos duplicar a barra de navegação que já temos. Então agora que temos que buzz agora, eles já ficam bem na área de trabalho. Por isso, não precisamos ajustar ou torná-los melhores na área de trabalho. Então, porque isso já é bom na área de trabalho, eu quero que você fique visível na área de trabalho, mas ele não fez no celular e tablet. Então, editar seção vá para Avançado responsivo. E queremos nos esconder em tablets e celulares. Então, quando você estiver visualizando esta página de destino em um telefone celular ou um tablet, esse é o menu não será visível. Ele só estará visível quando você estiver visualizando na área de trabalho. Em seguida, vamos para esta seção Editar. Vamos voltar ao avançado responsivo. Desta vez. Este é o menu vai querer mudar e editar para que ele fique bem no celular e tablet. Portanto, não queremos que ele fique visível na área de trabalho. Queremos que ele seja visível apenas no tablet e celular, porque vamos fazer com que ele fique bem no tablet e no celular. Então, como agora não está visível na área de trabalho, ele está oculto na área de trabalho. É assim que parece, se transforma em Tons de Cinza. Se virarmos para o celular, observe que o menu superior agora está em tons de cinza para dizer que não está ativo no celular. Isso é o que os usuários de celular veremos. Então a primeira coisa que queremos fazer é remover o logotipo. Não precisamos do logotipo. Só precisamos deste menu. Mas é preto. Não podemos ver, aposto que nem consegue ver agora. Então vamos primeiro mudar sua cor. Então, selecionando isso. Agora estamos editando o menu de navegação. Então, dentro Style, vá para o estilo hambúrguer. E depois vire isto para o lado esquerdo, assim. Então, os muitos agora deste lado, mas precisamos mudar sua cor. Então, role para baixo e procure por tipo de plano de fundo. Sob o tipo de fundo de hambúrguer, vamos mudá-lo para branco. Ou talvez vamos torná-lo tão verde. Então, vamos basear esse verde lá dentro. Agora está verde. Mas ao pairar, queremos torná-lo branco. Faça até branco em pairar, assim. Diga atualização. Então vamos olhar para isso em um tablet. É assim que fica no tablet. E vamos olhar para isso na área de trabalho. Na área de trabalho, ele fica oculto. E, em seguida, o menu da área de trabalho aparece. Quando mudamos para o tablet, observe que o logotipo desaparece. Então agora temos o menu de hambúrguer e o que tem o logotipo desapareceu, então não é visível no tablet. O mesmo caso se aplica ao celular. É uma área de trabalho em destaque. E então vamos visualizar a página em que estávamos trabalhando, nossa página de destino. Vamos refrescar isso. E vamos pré-visualizar no celular. Mudanças CIF eu fiz efeito. Agora temos um menu de hambúrgueres em vez do outro Ming que tinha o logótipo enorme aqui. Então, tudo está fazendo efeito. E podemos sempre definir o logotipo que aparece aqui, aqui em cima, indo para configurações do menu móvel, logotipo do menu móvel. E eu seleciono o nosso logotipo como de costume, inserir mídia. Então, quando você abri-lo desta vez, ele tem aquele logotipo minúsculo bem ali. Acho que estamos prontos. Nossa barra de navegação está pronta. Vamos mudar para a nossa página de destino para ver as mudanças que acabamos de fazer. Então, voltando para além do modo de desktop, e vamos atualizar isso. Eu gosto disso. Então, certo, então se pudéssemos pré-visualizar um celular, aqui está o nosso menu. Então agora nossa barra de navegação é responsiva em desktop e dispositivos móveis. Assim, parece no tablet quando necessário no lado esquerdo. Então vamos mudar para este lugar. Mude para dizer aqui mesmo. E aqui. Vamos mudar o lado em que está localizado. Vamos mudar este lado. E o estilo do menu de hambúrguer como pedaços poluídos dessa atualização lateral. Na verdade, vamos nos livrar dessas colunas aqui no celular e na área de trabalho. Oh, nós já fizemos. Sim, então vamos atualizar isso. E eu sinto falta de voltar para a nossa página e atualizá-la. Controle R ou Control Command R no Mac. Então agora nós visualizamos isso no tablet. O super legal. Então a próxima coisa que queremos fazer é trabalhar com todos os outros conteúdos e o resto do corpo para garantir que tudo colapse e os pés incham em qualquer dispositivo. Então vamos começar com tudo ou móvel. Então você vai notar que a saúde vai além dos limites, fitness também. Então, vamos oferecer a melhor seleção de saúde. E você notará que em todos os lugares onde você pode fazer alterações nessa propriedade específica na fase móvel, o ícone móvel ao lado dessa propriedade específica. Então, se pudéssemos entrar no estilo, podemos dimensionar esta ajuda e Hayden a ajuda deles e colocá-la no meio. Vamos fazer isso para fitness. Fitness. Vamos também colocá-lo no meio. Poderíamos reduzir um pouco desse estofamento. Agora vamos reduzir a margem. O topo. E no fundo. Poderíamos fazer o mesmo pela saúde. Vamos reduzir a margem superior e a margem inferior para que fique próxima. Está diminuindo seu tamanho um pouco para que seja quase o mesmo tamanho do ano de fitness. Agora vamos reduzir a sétima atualização lá. Observe que o alto aqui vai além de onde F chega. Então vamos aumentar o preenchimento nesta descrição aqui. Com isto selecionado. Vá para consultas avançadas o paddy para 10. Eu gosto de onde os botões estão para que possamos deixá-los ali. Então o que queremos é selecionar esse plano de fundo. Lembre-se que adicionamos isso como uma imagem de fundo, então adicionamos isso como uma cor de backbone. Mas queremos que isso fique bem aqui, como na área de trabalho. Então, como fazemos isso? Selecionando seção Editar pode ir insights bloco aqui, e podemos adicionar uma imagem diferente ou a mesma imagem. Neste caso, vamos adicionar uma imagem amarela. Só quero ilustrar estes dois. Você é inserido em posição. Queremos que seja no fundo. Direitos. Então vamos aumentar o tamanho, Carson. E então agora vamos começar a aumentá-lo manualmente assim. Vamos reduzi-lo. Ponto de dados. Voltando ao topo, agora temos todo o espaço. Podemos empurrar tudo para cima e podemos fazer isso indo para editar seção, Editar seção Avançado. E então vamos desmarcar tudo lá. E você vai notar que tudo se redefiniu para o topo para que agora possamos começar a adicionar o nosso empanado. Então vamos aumentar o estofamento no topo bem ali. Como isso. Atualizado. Então, neste caso, eu acabei de adicionar esta imagem de fundo amarelo para ilustrar para vocês que em, você pode ter imagens diferentes para aparecer em dispositivos diferentes. Então, se mudarmos para o modo desktop, ele mudará para verde. Se mudarmos para o telemóvel, vai mudar para amarelo. Vamos ver como fica no tablet. Também podemos ter um diferente para os tablets, então vamos chegar a isso. Primeiro, estamos lidando com um celular. Agora, outra coisa que você vai notar é que este menu de hambúrguer aqui não está alinhado corretamente com esses textos. Precisamos empurrá-lo para dentro um pouco e para baixo para equilibrar as espadas. Então, como fazemos isso? Voltamos ao menu em si e selecionando-o em qualquer lugar dentro desta pequena caixa azul que ele nav menu. Vá para Avançado. E então o link que a margem aumenta a esquerda em 20. Agora digamos 10. Digamos, sim, 10 está tudo bem. E top 10. Vamos atualizar isso. Certo, vamos voltar a esta página e atualizá-la. Então, basicamente, estamos alternando entre diferentes páginas de edição. Espero que isso não seja muito confuso para você se for um novato. Então o nosso menu de hambúrgueres está agora pelo menos, um pouco mais para o lado e parece um pouco mais equilibrado, não é? Vamos continuar. Vamos chamar para baixo e ver se há algo que precise de nossa atenção. Eu acho que isso é muito espaçamento, então selecione esse espaço e ajustado de acordo, precisamos apenas um pouco mais de espaço como lá. Desloque-se para baixo. Você vai notar que esta coluna aqui toca as bordas, as bordas , e nós não queremos lá. Então clique que avançado. E depois a margem. Vamos aumentar a margem para talvez dez. Sim. Vamos diminuir o espaçamento aqui. Que grau de espaçamento? Criando 24, vamos fazer 25. Então isso significa que ficar uniforme faria 25 por todo. Como onde os mares. Vamos voltar aqui e ver. Clipe esse texto ali. E vamos para avançado. O estofamento era 10. Portanto, queremos manter esse preenchimento uniforme para textos descritivos como o então este será 10. Então, dentro deste tipo 10, modo que não esteja muito perto das bordas. Então o espaçamento aqui, 25 para a coluna , aumentou as margens. Vamos reduzir isso? Sim, vamos reduzir o tamanho desses títulos. O laboratório que eles olharam para o Vk, pegue-o agora. É reduzido lá, pegue agora. Então o tamanho agora é 44 pixels, então eu posso copiar o estilo. Então clique com o botão Copie em qualquer lugar onde há um título como este, eu posso colar o estilo para que eu copiá-lo. Com razão. Café. Se eu for aqui para isso, isso é semelhante a isso. E clique com o botão direito do mouse, posso colar o estilo, o que significa o tamanho, a cor e tudo mais. Então o estilo cole redimensiona para o mesmo tamanho que o outro. Temos outro que se parece com esse. Não. Não, não temos. Então lá vamos nós. Nova rotina aqui, parece muito grande. Vamos reduzi-lo. E sua rotina. Atualize isso. Então aqui lembre-se que os textos descritivos podem ter um preenchimento de 10. Vamos atualizar isso. Também podemos copiar este novo estilo de rotinas, copiá-lo e colá-lo aqui. Estilo de colar. Vamos ver se podemos reduzir isso ainda mais, porque parece um pouco para a direita. Sim. Vamos correr para ter algo que seja visualmente atraente. Tudo está ao alcance visual e é fácil ler enquanto alguém os está consumindo enquanto eles rolam para baixo. Então você notará que o logotipo na pasta é muito grande, então precisamos reduzir seu tamanho também. Então o que precisamos fazer é entrar no rodapé. Então isso foi na área do mega rodapé. Então temos que entrar no painel de controle de novo. Elementos mantém rodapé do cabeçalho. Você pode editar com o Elementor. Estão certos, então, então, faça o rodapé responsivo. Temos que entrar nela também e editar, e agora estamos dentro. Então vamos vê-lo no celular. E é assim que parece. Então, se pudermos, se mudarmos para a página de destino, aqui estamos. É assim que parece. Veja como fica na página de destino. 11. Rodapé responsivo: Então, por que não fazemos o mesmo que fizemos para o cabeçalho agora e duplicamos a pasta para que tenhamos um rodapé para os dispositivos móveis e outro para o desktop. Então, isso já parece bom na área de trabalho. Vamos editar a seção que avançado e responsivo. Queremos que ele seja visível na área de trabalho, mas se esconda no tablet e no celular, ou certo? Então vamos duplicar. E neste segundo vai querer dizer seção de edição. E, em seguida, no avançado responsivo, queremos que a segunda foto seja escondida na área de trabalho. Não queremos que ele fique visível no desktop, porque vamos torná-lo bonito no tablet e celular. Então, isso será criado para tablet e celular, e isso é para desktop. Então, se mudarmos para celular e tablet, o desktop torna-se em tons de cinza, e agora podemos editar este. Vamos nos livrar do logotipo do celular. Não precisamos disso. Não preciso dessa coluna também. Agora ficamos com esses ossos nus. Vamos nos livrar desse cardápio. Mas podemos centralizar isso pelo menos. É uma linha no meio. Vamos atualizar isso. Vamos dar uma olhada no tablet. É assim que fica no tablet. É C estão no tablet. Podemos alterá-lo para dizer, olha, é bom layout enquanto editar seção que tem estrutura de layout ativo. Eu queria ter aquela estrutura aquela atualização. Então, no celular, é assim que parece. E, em seguida, na área de trabalho, isso ficará oculto e isso ficará visível. Então vamos mudar para a área de trabalho. E agora isso é calor e isso é o que seria razoável para desktop o seu. Então vamos mudar para nossa página, nossa página de destino, e atualizá-la para ver se as alterações entraram em vigor em nosso rodapé. Eu gosto do que eu vejo, mas agora, se nós vê-lo no modo responsivo e rolar todo o caminho até o fundo. Agora o rodapé parece bom. Vamos reduzir o espaçamento para 30. Atualize seu lago superior, como está se saindo. Então vamos vê-lo no tablet. Então é assim que ele ficará no modo tablet. Temos de nos adaptar em conformidade também. Então vamos reduzir a saúde e as vidas. Vamos reduzir a aptidão também. Sinto que precisamos reduzir o espaçamento aqui. Então vamos editar a seção. Também pode retirar isso por Control I e, em seguida, editar esta seção. Então, esta seção. Então vamos reduzir o preenchimento e a margem. Vamos reduzir o. Então você vai notar a mesma coisa que ter aqui. Depois de delinking o preenchimento, tudo passou para o preenchimento padrão para que possamos definir tudo do zero. Então vamos aumentar o estofamento ali mesmo. E vamos aumentar isso. Fale à esquerda. Vamos fazer com que seja 10. 10. Vamos fazer disso uma atualização de 70, 19 min. Parece muito melhor, certo? Então aqui está o nosso cardápio. Vamos fechar isso. Desfilado pelo meu e-book. Então você deve estar no meu e-book ou certo? Então lembre-se, nós podemos aumentar esse preenchimento descritivo de textos bem ali à esquerda tentando se livrar disso. Na verdade, 10, digamos cinco. Vamos empurrar esta coluna para longe da borda um pouco. Então fazemos isso selecionando-o. Então, com margem esquerda, isso é aumentado em dez. Então vamos copiar este estilo. Copie isso. Vamos colar o estilo ali mesmo. Então este é o nosso registro de fotos em tablets, então precisamos reduzi-los. Acho que quero que esteja alinhado à direita em vez de alinhado à esquerda. Então, aqui, vamos para lá. Queremos que estes fiquem alinhados assim. E então queremos aumentar isso bem ali. Isso também precisa ser alinhado à esquerda. Vamos aumentar a margem ali, e vamos aumentar o tamanho. Tipografia é o tamanho certo para mim. Deixar eu gosto mais disso. Então vamos mudar para a nossa página de destino e atualizá-la. Tudo bem, então vamos pré-visualizar no tablet. Vamos rolar para baixo e ver como é a nossa foto. Escolha o nosso rodapé parece melhor, mas agora precisamos empurrar esta lista para dentro um pouco para que o espaçamento seja quase o mesmo que a alma. Mude para o mega rodapé. Selecione esta coluna aqui. Ou vamos selecionar a própria lista. Um vasto. O link que eu estou à direita, É n, digamos 20. Atualize isso. Então, se pudéssemos mudar para a página inicial e atualizá-la novamente. Vamos rolar para baixo e dar uma olhada nisso. Mas queremos vê-lo no tablet. Perfeito. Eu gosto assim. Claro, com mais tempo, tenho certeza que você pode inventar algo que parece incrível. Isso é poeira para nós sermos capazes de entender os conceitos por trás do design responsivo. Quais são as ferramentas fornecidas pelo Elementor? E qual é a flexibilidade que você tem como usuário elementar para criar designs responsivos. Então vamos editar a seção aqui. E quero empurrar isto para baixo para que fique abaixo das pernas dela. Então, sob estilo. Vamos somar isso, vamos fazer o amarelo é, bem, eu sei que o amarelo parece estranho neste verde. Mas isso é apenas para ilustrar que você pode ter imagens diferentes para os diferentes tamanhos de tela. Lembre-se na área de trabalho, temos verde. Agora temos amarelo. Vamos aumentar. Primeiro de tudo, vamos para este padrão para a posição e dizer inferior, direita. Então vamos aumentar o tamanho do cliente aqui mesmo. E digamos que aumentou, atualizado assim. Então, agora, quando você acessar o modo desktop, ele fica verde. No tablet, CLO ou no celular. Pode ser vermelho ou pode ser a mesma, a mesma imagem agora criada para ser perfeita para o telefone celular. Porque lembre-se, uma imagem pode ficar incrível em forma móvel, mas não incrível em menos Modo Doc. Essa aptidão deve ser verde. Vamos torná-lo tão verde. Vamos pegar o creme. Copie isso. Vamos mudar isso para verde. Quando você altera a cor em qualquer modo, desktop, tablet ou telefone celular, as alterações ocorrem nos diferentes tamanhos. Outra coisa que você precisa saber é que mover elementos ao redor, como mover a saúde de antes da aptidão para depois da aptidão assim. Enquanto o modo móvel ou o modo tablet move a mesma coisa em todos os outros modos. Então essas são mudanças globais que você está fazendo. Movendo elementos ao redor é global. Então, lá estamos nós, rapazes. Uma página web WordPress totalmente funcional é construída com Elementor e é totalmente responsiva ou móvel, desktop e tablet. Você pode usar esses mesmos princípios e conceitos para criar qualquer página da Web que você deseja criar uma página da Web que as pessoas vão gostar de visitar em seus dispositivos de defesa. 12. Considerações finais: Espero que tenha achado isso útil. Meu nome é Ken Best Sum, estou curioso para ver o que você vai inventar. Vamos ver as páginas de destino será capaz de criar como uma classe e ver como podemos ajudar uns aos outros. Caso contrário, falo com você da próxima vez. Continua a voltar para ver se tenho uma nova turma e adoro-vos a todos. Paz.