Aula de Elementor para iniciantes: crie um site de empresa de cobertura totalmente funcional a partir do Scratch

1. Introdução do curso: Bem, olá, aí. Você está pronto para aprender a criar seus próprios sites com o Elementor do zero, sem nenhuma habilidade de codificação. Eu quero te mostrar como fazer exatamente isso. Se você ficar comigo até o fim, quando terminarmos, você terá as habilidades para criar qualquer tipo de site que desejar. Quando você quiser. Meu nome é Ken e tenho usado o Elementor nos últimos cinco anos. Eu tenho usado o WordPress nos últimos seis anos. E venho criando sites para clientes pagantes nos últimos 4,5 anos. Quando não estou criando sites para clientes, estou criando modelos elementares e vendendo-os no Creative Market. Então, estou ganhando dinheiro com clientes pagantes e também a venda de produtos digitais que criei com a Elementor. E nesta aula, quero te mostrar exatamente como fazer isso. Quando terminarmos, você terá entendido como trabalhar com seções, colunas, espaçamento, textos e topografia, imagens e cores. E essas habilidades permitirão que você monte qualquer tipo de ideia de site que você tenha a qualquer momento. Porque agora você pode ter uma ideia de site. Na próxima semana, você pode ter uma ideia de site diferente. E você não pode continuar pagando web designers para criar sites para você toda vez que você tem uma nova ideia. Então, quero mostrar a você como ser independente e criar sites para si mesmo sempre que quiser. Consegui criar meus próprios sites e gerar renda com eles. Eu venho criando aulas, especialmente para iniciantes, e essa aula não é diferente. Minha suposição é que você nunca usou o WordPress ou o elemental antes. Então, eu quero segurar sua mão e garantir que você entenda exatamente o que você precisa fazer desde a primeira etapa, desde a instalação do WordPress até a instalação de temas do WordPress a instalação de plug-ins do WordPress, criando cada elemento do seu site de cima para baixo, de uma página para outra, vinculando-os e tudo mais. Na verdade, trabalharemos em um projeto do mundo real em construiremos um site para empresas de coberturas. Portanto, é uma empresa hipotética de coberturas que nos abordou e pediu que criássemos um site para eles. Temos todo o conteúdo e veremos como abordar esse projeto. Esse tipo específico de site foi realmente solicitado por um dos meus alunos, Alex Rodriguez. E é uma honra e um prazer finalmente cumprir o que prometi. Eu entregaria. Então, Alex Rodriguez, quero mandar uma mensagem para você. E lembre-se, se você tiver alguma outra ideia para um tipo específico de site que deseja que criemos, coloque-a na discussão abaixo e eu me certificarei de criar essa classe. Então, estou muito animada por ter você aqui e mal posso esperar para começar. Então, sem perder mais tempo , nos vemos na primeira aula. 2. O projeto do curso: E bem-vindo. Como mencionei na introdução, essa aula foi solicitada especificamente por um dos meus alunos, Alex Rodriguez, sombra de Alex Rodriguez. E ele queria que construíssemos um site para uma empresa de coberturas. E ele queria especificamente que tivesse um formulário de agendamento ou um assistente de agendamento de consultas. E como você pode ver aqui. Então esta é a seção de heróis. Temos quatro páginas e quando começamos a rolar, como você pode ver, o cabeçalho permanece fixo na parte superior. Ele não desaparece com o resto do conteúdo. E isso permite que o usuário tenha acesso à barra de navegação independentemente de onde estiver no site. Se você consultar este formulário de agendamento, ele tem um menu suspenso, todos os diferentes tipos de serviços para os quais podemos marcar uma consulta. Por exemplo, se você quiser um telhado solar, podemos fornecer isso. Em seguida, forneça nosso nome, endereço de e-mail, número de telefone e informações adicionais que queremos que a empresa saiba ao marcar a consulta e, em seguida, poderemos enviar a mensagem. Na empresa, recebemos a solicitação de agendamento e retornamos para mim. É claro que, agora que rolamos para baixo, temos essa bela seção azul aqui. Veremos como fazer isso. Porque essa é a página inicial e é uma landing page. Tem vários botões de apelo à ação como este. Aqui está outro. É sempre bom dizer aos usuários o que você quer que eles façam. Então, neste caso, queremos que eles falem conosco. Temos diferentes serviços aqui apresentados e podemos clicar para saber mais. Temos essa bela imagem de antes e depois. Então, isso foi antes de o telhado ser concluído, e isso é depois que o telhado foi concluído. E ele simplesmente começa a se mover. Assim que o cursor do mouse estiver acima da imagem. Veremos como fazer isso. Então temos essa pequena seção simples e agradável. página inicial do Hello ou a página de destino sempre devem ter uma seção de depoimentos para adicionar como prova social. Então temos essa cesariana de emergência. Em seguida, essa linda pasta entra na página sobre. Temos a página Sobre nós. Tem uma bela seção de heróis, muito simples e minimalista. Temos nossa visão e missão, nossa história. Então, temos o que oferecemos. Uma bela seção pictórica aqui com um fundo de imagem. Então temos essa seção de contagem regressiva. Se eu atualizar esta página rolando para baixo, sim, temos um bom contador e veremos como fazer tudo isso. Em seguida, pulando para dentro do blog. Este é o lugar onde exibimos os artigos mais recentes que publicamos como um site. E veremos como criar isso. Portanto, esta é uma prévia do que trabalharemos à medida que percorrermos todas essas páginas Criando cada elemento que você viu, você adquirirá as habilidades necessárias para poder montar seu sites futuros. E mais uma coisa: gosto de incentivar meus alunos a serem tão criativos quanto possível. Você não precisa necessariamente fazer isso exatamente como eu estou fazendo. Você tem a liberdade de ideias liberdade de criatividade para criar sua própria versão do site de coberturas. Depois de fazer isso, gostaríamos de ver o que você criou. Então, faça uma captura de tela de suas páginas da web favoritas, aquelas que você criou, e compartilhe conosco aqui abaixo deste vídeo. E receba alguns comentários de colegas e de mim mesmo. E vamos manter o fogo aceso. Vamos passar para a lição número um. vejo em breve. 3. Instalando o WordPress no cPanel: Bem-vindo de volta. Agora que você comprou hospedagem na web para o seu site, é hora de instalar o WordPress por meio do cPanel. Agora, estou aqui na minha página de login do cPanel. Vou prosseguir e fazer o login. Eu sugiro que você faça o mesmo. E agora estamos logados. Agora, seu cPanel pode parecer um pouco diferente do meu, mas essas configurações e recursos são praticamente os mesmos, independentemente do host. Então, o que queremos procurar é um instalador de aplicativos chamado soft calculus apps installer. E um dos aplicativos que podemos instalar por meio do cálculo é o WordPress, como você pode ver. Então, vou clicar em Wordpress e serei redirecionado para resolver o cálculo. E é aqui que instalaremos o WordPress. Então, como você pode ver, temos uma breve descrição do WordPress. Temos a opção de instalar o WordPress agora. E logo abaixo dessa área, temos as instalações atuais. Então, se você tiver várias instalações do WordPress, elas serão listadas aqui. Como você pode ver, eu já tenho uma instalação. Então, vou clicar em Instalar agora. E isso abrirá o local onde podemos inserir os detalhes do nosso site. Para começar, vamos escolher um prefixo ou protocolo para nosso URL. Gosto de usar https, www.ourdomain.com. Então, vou selecionar HTTPS. E você só pode ter HTTPS se tiver um certificado SSL para segurança. Então, se eu clicar fora, ele procurará meu certificado SSL e agora confirmará que eu tenho um certificado SSL. E estamos prontos para ir. Se você não tiver um certificado SSL, ele informará que você não tem um certificado SSL válido e não pode usar HTTPS. Você pode usar HTTP, mas isso não é recomendado. Tudo bem, então eu quero remover esse diretório. Não queremos colocar nosso site dentro de uma pasta chamada WP. Queremos que ele esteja no diretório raiz do nosso servidor. Em seguida, vamos escolher nossa versão do WordPress. Eu quero usar o mais recente, então vou selecioná-lo. Vamos dar um nome ao nosso site. Portanto, nesse contexto, o site é chamado de roof call, roof company e uma breve descrição. No planeta. É aqui que você insere as credenciais de login do seu site WordPress. Quando você sai do WordPress. Para fazer login novamente, você precisará usar esses detalhes. Então, vamos mudar isso de admin para algo como seu nome de usuário. Meu nome de usuário e vamos colocar uma senha forte. Apenas deixe esse e-mail intacto. Agora vamos passar para a próxima parte. É aqui que podemos optar por ter esses três plug-ins pré-instalados, mas não os queremos pré-instalados porque existem opções melhores para esses tipos de plug-ins. Então, lidere isso e você não precisará mudar mais nada. A próxima parte é adicionar um e-mail como o seu Gmail. É aqui que uma notificação será enviada assim que seu WordPress for instalado. Então, vou prosseguir e instalar agora. Role para cima e não saia desta página até que a barra de progresso atinja 100 por cento. Então, vamos esperar alguns minutos. Tudo bem, então nós o instalamos com sucesso. Aqui está o URL do site e esse é o URL do painel. Então, o que queremos fazer é clicar aqui para acessar o painel do WordPress, onde podemos começar a criar nosso site. E aqui está. Deixe-me diminuir um pouco o zoom ali mesmo. Então, é assim que se instala o WordPress por meio do painel C. Na próxima lição, vamos instalar um tema do WordPress. vejo em breve. 4. Instalando o tema Astra: Bem-vindo de volta. Então, agora que instalamos o WordPress por meio do cPanel, é hora de instalar nosso tema WordPress. E sem perder tempo, vamos analisar os temas de aparência. E, por padrão, temos o tema 2023 instalado porque agora estamos em novembro de 2022. Então, é apenas um mês antes de 2023. Durante a maior parte de 2022, tivemos o tema 2022 instalado por padrão, mas não estamos usando nenhum desses temas padrão. Quero usar uma coisa especial chamada Astra, que na minha opinião é o melhor tema para WordPress no mercado. Então, aqui estamos. Está quase no topo, mas se você rolar para baixo, temos milhares de temas que você pode usar. Vou clicar em Instalar no Astra. Se você não conseguir ver, você pode fazer uma pesquisa rápida aqui. E vamos prosseguir e ativar. Então clique em Ativar. E aí está. Então, obrigado por instalar o Astros. Deixe-me fechar esse pop-up. E agora o Astra é o tema ativo, e é assim que se instala um tema WordPress. Na próxima lição, queremos instalar um plug-in do WordPress porque usaremos alguns plug-ins do WordPress. Vamos ver como instalar um. E porque estamos construindo um site com o Elementor, vamos instalar o elementor. vejo na próxima lição. 5. Instalando um Plugin do WordPress: Bem-vindo de volta. Com o tema Astra instalado, é hora de instalar o Elementor. Então, vamos analisar os plug-ins. Adicionar novo. Mas antes de dizermos adicionar novos, vamos para Plugins instalados. Tudo bem, então temos alguns plug-ins pré-instalados. Dependendo de quem é seu host. Às vezes, você pode descobrir que tem plug-ins pré-instalados que não deseja usar. Então, neste caso, eu não quero usar nenhum desses plug-ins, então vou simplesmente desativá-los e removê-los. Agora que estão todos desativados, posso selecionar todos eles marcando essa caixa. E depois exclua. Nesse menu suspenso, aplique. Está bem? Tudo bem, agora removemos todos eles. Se eu atualizar esta página. Agora, não temos plug-ins disponíveis no momento. Então, vamos clicar em adicionar novo aqui ou aqui será redirecionado para o diretório de plug-ins do WordPress. É aqui que existem milhares de plug-ins que você pode instalar para qualquer finalidade. É por isso que estamos pressionados, é incrível. Então, vou procurar por Elementor aqui. Elementor. E aqui estamos. Como você pode ver, ele tem mais de 5 milhões de instalações ativas. E é criado por elements are.com. Clique em Instalar. Agora. Vamos continuar e clicar em ativar. Ativar. Então, agora temos o Elementor instalado e ativado. Agora, anteriormente, sempre que você instalava o elementor, você era levado a um assistente de configuração onde definiria várias configurações antes de começar a usar o Elementor. Eu não vi esse assistente de configuração e caso você tenha sido redirecionado para esse assistente de configuração, tenho um vídeo pré-gravado onde mostro como configurar tudo nesse assistente de configuração. Então, deixe-me jogar para você agora, caso você tenha recebido esse assistente de configuração. Então, vamos lá. Então, vou clicar em Instalado, certo? Então, quando eu clicar em Ativar, ele será redirecionado para o assistente de configuração do Elementor. Então, vamos clicar em Ativar. E esse é o feiticeiro aqui. Então, deixe-me diminuir um pouco para que você possa ver tudo. Como você pode ver agora, temos cerca de cinco etapas para configurar tudo antes de começarmos a usar o Elementor. E o primeiro passo aqui é criar uma conta elementor.com se você quiser aproveitar esses benefícios, mas não precisa ter uma conta elementar para usar o Elementor. Então, vou pular essa parte. Portanto, a segunda etapa aqui é decidir se você deseja usar o tema hello desenvolvido e mantido pela equipe elementar. Mas você também tem a opção de pular esta etapa se tiver outra coisa que queira usar, eu gosto de usar o Astra. Astra Theme é um dos temas mais leves, rápidos e amigáveis ao SEO do mercado. Então, vou pular essa parte. A terceira etapa aqui é dar um nome ao seu site. E, por padrão, o nome que aparece nesse campo é o nome que você deu ao seu site quando estava instalando o WordPress. Então esse é o nome que dei ao meu site. Eu não vou mudar isso, então vou continuar, vou clicar em Escape. Então, se você tiver um logotipo, terá a oportunidade de enviá-lo neste momento, mas isso é algo que você sempre pode fazer mais tarde, enquanto cria seu site, para que possamos seguir em frente e pular. E, finalmente, podemos editar diretamente uma tela em branco e começar a criar uma página da web do zero. Ou podemos navegar entre centenas de modelos criados pelo Elementor que estão dentro do espaço de trabalho do Elementor ou importar nosso próprio elemento de modelos que talvez tenhamos comprado ou criado por nós mesmos. anteriormente. Mas eu vou pular isso. E, por padrão, quando você aquece, ele leva você diretamente para uma tela em branco, onde você pode começar a criar sua página da web. Então, para sair deste lugar, clique neste menu de hambúrguer e saia para o painel. Então, somos levados ao back-end do editor para ver a tela em branco específica que acabamos de deixar. Mas o que queremos fazer é clicar aqui para ir para o painel real, onde temos todas as configurações do Wordpress. E agora, se você olhar no menu à esquerda aqui, notará que temos Elementor e modelos. Ambos aparecem após a instalação do Elementor. E se clicarmos no Elementor, podemos brincar com todas as configurações aqui. Mas geralmente você não precisará fazer nenhuma alteração nas configurações padrão do plug-in. Você irá diretamente para começar a criar suas páginas da web. E aí vamos nós. Então, é assim que você conclui esse assistente de configuração, caso você mesmo se depare com um assistente de configuração. E, basicamente, é assim que se instala um plugin do WordPress. Agora, 99% dos plug-ins do WordPress não têm um assistente de configuração, dito isso, é como instalar o elementor em seu site. Na próxima lição, vamos ver como começar a criar um site no frontend. Te vejo em breve. 6. Criar o cabeçalho - Instale o Plugin do ElementsKit: Bem-vindo de volta. Então, agora que temos o Elementary instalado, estamos prontos para começar a criar o site. E, como mencionei nesta lição, construiremos o cabeçalho. O cabeçalho é essa área aqui. Ele contém o logotipo e a barra de navegação ou a barra de navegação. Então, vamos ver como construir. Eles vão voltar para dentro do painel. E para construir o cabeçalho, usaremos outro plugin chamado elements keep light add-ons para o Elementor. Então, vamos entrar em Plugins, Adicionar novos. Vamos pesquisar por Elementor. E, claro, o Elementor está ativo, mas você notará que temos vários outros plug-ins aqui que levam o nome Elementor. E esses são plug-ins de terceiros desenvolvidos por desenvolvedores independentes para serem adicionados ao Elementor. Elementor, a versão gratuita do Elementor tem limitações. Então, esses desenvolvedores terceirizados decidiram, ei, vamos aumentar ou aumentar o poder da versão gratuita do Elementor fornecendo um complemento gratuito para o elementor. E eu vou te mostrar como isso funciona quando estamos construindo o site. Então, um desses complementos são os elementos que atingem os adultos do Elementor. Então, vamos instalar. Agora. Durante a instalação, vamos rolar para baixo. E você notará que temos vários efeitos elementares de traje, pele e cabeçalho adesivo para Elementor. Este é outro plugin que precisaremos e mostrarei qual papel ele desempenhará. Você tem várias opções para criar qualquer tipo de site que desejar com a versão gratuita do Elementor por causa de todos esses complementos extras que são fornecidos gratuitamente. Agora que o kit de elementos está instalado, vamos ativar. Então, vou clicar em Ativar. E agora ele foi instalado. Mas para usá-lo, se eu clicar em elementos get, ele nos redirecionará para um assistente de configuração para que possamos terminar de preparar tudo. Então, como você pode ver, temos algumas etapas a serem seguidas. Agora, essas são as configurações que podemos escolher para os diferentes recursos que queremos ativar. Agora que, por exemplo , é a configuração básica selecionada aqui. Algumas configurações aqui são automaticamente desativadas. Temos que ligá-los manualmente. Mas se clicarmos em Avançado, observe algumas dessas configurações mudarem. Então, se clicarmos em Avançado, como você pode ver, o construtor we did foi ativado. E esse é o mesmo caso com algumas dessas configurações aqui. Alguns deles estavam desligados quando era básico. Mas agora que selecionamos avançado, eles são automaticamente próprios. E isso significa que quando precisarmos usar o plug-in no front-end, eles estarão disponíveis automaticamente. Então, vamos clicar na próxima etapa. Próxima etapa, próxima, próxima, próxima e, em seguida, salve as alterações. E aí está. Então, o elements kid agora está instalado, ativado e pronto para ser usado na construção do cabeçalho. Então, na próxima lição, vamos começar com a cabeça. Te vejo em breve. 7. Criar o cabeçalho - o logotipo: Bem-vindo de volta. Agora que temos o Kit de elementos instalado, estamos prontos para começar a criar o cabeçalho. Primeiro de tudo, deixe-me me livrar de todos esses anúncios. Você não precisa deles. E então você notará nos elementos que mantemos o rodapé do cabeçalho. Então clique em Cabeçalho e Rodapé. E como não temos nenhum cabeçalho ou rodapé criado, não temos nada listado aqui. Então, clicarei em Adicionar novo e esse pop-up aparecerá. Vamos manter nosso cabeçalho, um nome, nosso cabeçalho cruzado, dar a ele um nome apropriado. E o tipo é cabeçalho. Quando estávamos construindo o rodapé, daremos a ele o tipo de rodapé e queremos que ele fique visível em todo o site. Vamos ativar essa opção para garantir que ela esteja ativa e visível no site. E então vamos salvar as alterações. Tudo bem, agora, como você pode ver, começamos a criar uma lista de diferentes cabeçalhos e rodapés, e você pode criar quantos quiser. Com isso criado, vamos clicar em Editar. O pop-up aparecerá novamente. E agora, desta vez, vamos clicar em editar conteúdo e será levado para o front-end, onde podemos começar a construí-lo visualmente com as ferramentas do Elementor. E aqui estamos. Agora, como você pode ver, deixe-me voltar para este lugar. Você notará que a seção do cabeçalho está dividida em duas colunas, coluna do logotipo e a coluna da barra de navegação. Então, vamos adicionar nosso logotipo. Então, voltando ao nosso site, clicar aqui abrirá as diferentes estruturas com as quais podemos começar rapidamente. E queremos uma coluna dupla. Isso manterá o logotipo, e isso manterá o Napa. E podemos redimensioná-lo adequadamente. Então, vamos puxar isso para a esquerda. Então, a próxima coisa que queremos fazer é clicar neste sinal de mais aqui, e isso revelará os diferentes elementos que estão disponíveis para arrastarmos para a página e usá-los para criar sua página da web. Então, deixe-me primeiro derrubar esses painéis aqui. Assim, podemos dar uma olhada rápida nos diferentes painéis que temos porque instalamos elementos. Mantém. Observe que agora mesmo, está listado aqui. Antes de instalá-lo, ele não estava listado aqui. Só tínhamos os painéis padrão do WooCommerce , do WordPress e do Elementor. Mas toda vez que instalamos um complemento criado especificamente para o Elementor, ele será listado aqui e teremos acesso a esses diferentes elementos. Lembre-se de que quando o selecionamos avançado em vez do básico, enquanto configurávamos o kit de elementos, estávamos ativando esses elementos para disponibilizá-los para nós agora mesmo, enquanto construímos o site. Então, deixe-me reduzir isso porque não estamos usando nenhum deles por enquanto. Quem quiser entrar no painel básico. E, claro, como mencionei, esse é um painel elementar. Na versão gratuita, se eu ignorar que também temos a versão pro, não poderemos ter acesso a esses elementos. Não podemos arrastá-los se você tentar. Esse pop-up aparece solicitando que você faça o upgrade. Então, deixe-me reduzir isso, expandir a guia básica. E agora podemos arrastar nossa imagem para dentro. E, momentaneamente, descarte-o porque são os elementos ativos agora na página. As configurações aqui alteraram automaticamente as configurações da imagem e você pode ver por este texto aqui. Então, se eu quiser revelar esses elementos novamente, posso clicar neste ícone aqui. Isso revelará esses elementos novamente. E se eu arrastar, por exemplo , esse título, essas são as colunas para essa outra coluna. Observe que as configurações foram alteradas para editar título porque é o elemento que acabou de cair. Isso significa que é o elemento que está ativo no momento. Se eu selecionar a imagem, as configurações serão alteradas para editar a imagem. Se eu selecionar a seção, as configurações foram alteradas para editar a seção e essas são as configurações desta seção. Então, deixe-me deletar isso. Também não precisamos desse título, porque é aí que teremos em Napa. E selecionando a imagem, isso muda para editar a imagem. E se eu selecionar isso, podemos prosseguir e fazer o upload do nosso logotipo. Então, vou fazer upload de arquivos, selecionar arquivos. E eu quero entrar nessa pasta que eu preparei. Você o encontrará na descrição abaixo. Você pode baixar todos esses ativos, sites de coberturas, ácidos. Aqui está o logotipo. E dentro dessa pasta você também encontrará todas as imagens que serão usadas no site. Então, também temos esses textos do ReadMe. Se eu abrir, ele terá as cores que eu usei , caso você queira usar essas cores específicas que eu usei. Deixe-me fechar isso. Então, se eu clicar duas vezes nesse logotipo, saberemos que ele foi carregado. Clique em Inserir mídia e pronto. Então, agora nosso logotipo foi carregado e está pronto. Vou clicar em Atualizar. E podemos pré-visualizar as mudanças. Aí vamos nós. É assim que você pode adicionar o logotipo ao seu site com elementos infantis. Na próxima lição, quero mostrar como adicionar a barra de navegação. Então, vamos ver como fazer isso em breve. 8. 8 Crie o cabeçalho do menu do Nav: Bem-vindo de volta. Então, agora é hora de criar a barra de navegação. Então, a próxima coisa que precisamos fazer é clicar neste sinal de mais aqui. E isso revelará os elementos mais uma vez. E aqui, vamos digitar nav e um V. E isso revelará os diferentes elementos de navegação. Como você pode ver, temos o menu de navegação, que tem um pequeno ícone de cadeado aqui em cima. Isso está disponível com o Elementor Pro. Mas como não temos o Elementor Pro, estamos usando a versão gratuita do Elementor. Podemos usar os elementos no menu de navegação, que também é tão poderoso quanto o que está disponível com o Elementor Pro. Então, primeiro de tudo, antes de selecionarmos isso, deixe-me fechar isso. Reduziu o painel básico e expandiu o painel Pro. Como você pode ver, é aqui que o menu de navegação está sob o painel Pro. Portanto, não podemos usá-lo. Recolhendo isso e expandindo elementos para crianças, cabeçalho, rodapé. Como você pode ver, temos o menu de sequestro de elementos aqui embaixo. Mas é claro que, para obter elementos muito específicos rapidamente, você pode digitá-los rapidamente como nav. Então foi assim que chegamos aqui. Arrastando isso para lá. Agora abandonamos o napa. Deixe-me primeiro clicar em Atualizar. Obviamente, como o NAV é o elemento ativo no momento, isso diz Editar elementos mantêm o menu Nav. E um dos itens do menu aqui é um menu suspenso. E isso deveria ser uma lista de menus diferentes que criamos no backend do WordPress com itens de menu. E quando digo itens de menu, quero dizer como falar sobre o contato do Blog. Então, conforme mencionado, esse menu suspenso deve ter um menu ou vários menus com itens de menu. E podemos selecioná-lo para exibi-lo. Então, precisamos voltar ao backend do WordPress e criar um menu que tenha os diferentes itens de menu que queremos exibir. Agora que a página foi salva, quero clicar nesse menu de hambúrguer e clicar em Sair. E se for a primeira vez que você clica nele, você terá essas opções. Para onde você quer sair também? Quero sair do painel do WP e aplicá-lo. Antes de sairmos, preciso clicar em Atualizar. Agora, vamos sair. Tudo bem, agora vamos entrar nos menus de aparência. E agora podemos criar nosso menu. Como mencionado, este é um menu. É isso que estamos criando aqui. Crie seu primeiro menu abaixo. Então, vamos dar um nome a ele. Meu cardápio. Está tudo bem. Vamos clicar em Criar menu. E esqueci de dizer que deveria ser o menu principal. Criar menu. E depois de salvar o menu, essa área se torna ativa. Agora observe esses textos que dizem Adicionar itens de menu da coluna à esquerda, esta coluna aqui. Então, o que precisamos fazer é criar itens de menu e eles serão exibidos aqui. E os itens do menu que queremos exibir em nossas páginas. Os itens do menu também podem ser postagens de blog ou postagens do WordPress. Eles podem ser links personalizados. Elas podem ser categorias que você criou, mas queremos criar páginas da Web como itens de menu. Então, para adicionar itens de menu a essas listas de páginas aqui, precisamos criar páginas da web. Vamos entrar nas páginas. E, por padrão, temos esses dois itens de menu que vêm com cada nova instalação do WordPress. Vou selecionar os dois e depois para o lixo. Candidate-se. Nenhuma página encontrada. Então, eu quero criar uma nova página. Vamos dar um nome a ele. Sobre isso é nossa página sobre. Não se preocupe com todas essas configurações. Nós os configuraremos enquanto trabalhamos nas páginas individuais. No momento, o que queremos fazer é publicar porque estamos apenas criando itens de menu publicados. Vamos voltar. Agora está listado aqui. Vamos adicionar outro. Blog, publique. Vamos voltar aqui. Adicione outro para contato. A página de contato. Volte aqui. E, finalmente, vamos tocar. E, finalmente, vamos adicionar uma página inicial. Então, Home publicou isso. Vamos voltar aqui. Agora, se voltarmos aos menus de aparência, observe que agora temos itens de menu que podemos adicionar ao nosso menu principal. Então, se eu selecionar todos eles e adicionar ao equipamento do menu, eles são, podemos arrastá-los para reorganizá-los. Eu quero deixar isso aí e o contato deve ser o último. E, em seguida, clique no menu Salvar. Agora nosso menu foi atualizado. Agora, voltando aos elementos, aqueça, cabeçalho, rodapé, clique em Editar, edite o conteúdo. Lembre-se de que colocamos os elementos do menu de navegação infantil aqui. Então, agora, se clicarmos nesse menu suspenso, meu menu aparecerá, o menu que acabamos de criar. E aí vamos nós. Ele está exibindo os diferentes itens de menu que criamos como páginas. Agora, queremos empurrar esses itens para a direita. Então, vou clicar na posição horizontal do menu. Certo. Aí vamos nós. Em seguida, clique em Atualizar. Vamos pré-visualizar as mudanças. E aí vamos nós. Esse é o nosso cabeçalho. E, basicamente, é assim que se cria um cabeçalho. Claro, isso é um trabalho em andamento. não terminamos de editar o cabeçalho. Vamos refiná-lo assim que adicionarmos o heterossexual. Então, na próxima lição, vamos ver como criar a seção de heróis. Te vejo em breve. 9. 9 Crie a configuração da página da seção do Herói: Bem-vindo de volta. Então, agora é hora de criar a seção de heróis. Então, voltando à nossa referência, esta é uma seção de heróis e contém a imagem de fundo, o H1 e a chamada à ação. Então, vamos ver como construir isso voltando ao nosso editor. Agora, essa é a parte em que estávamos editando nosso cabeçalho. Esse não é o mesmo lugar. Vamos editar nossa seção de heróis. Se eu pudesse mudar para cá muito rapidamente. Criamos esse cabeçalho usando o plug-in elements keeping light. Tivemos que entrar na pasta de cabeçalho do kit de elementos e criar o cabeçalho. E faremos isso para o rodapé. Mas agora, para criar essa seção de heróis, não vamos usar os elementos. Ele tinha um plugin de pasta, usaria apenas o Elementor. Então, voltando aqui, ainda não podemos continuar editando-os a partir daqui. Então, o que precisamos fazer é sair e entrar nas páginas. E, claro, como essa é nossa página inicial, vamos editar a página inicial. É aí que construiremos nossa seção de heróis. Então, vou clicar em Editar. Agora, lembre-se de que mencionei que falaremos sobre essas configurações aqui. Então essa é a hora. Então esta é a hora de fazer isso. Na versão anterior do elemental, essa configuração de modelo parecia diferente. Então, se você estava usando o Elementor e ainda não viu essa nova versão, é assim que ela fica. Então, vou clicar nesse modelo padrão e mudá-lo para a largura total do Elementor. Porque queremos que a seção de heróis vá da borda da tela até a outra borda da tela. E agora com a largura total do Elementor selecionada. Vamos fechar isso. A próxima coisa que queremos fazer é entrar no salvamento de astros. Essas são as configurações do Wordpress. Vamos entrar no Astro. Deseja selecionar a largura total esticada no layout do conteúdo, temos conteúdo em caixa, caixa, largura total contida e largura total enfatizada. Queremos esticar todo o peso. Então, para a barra lateral, não queremos que o site ou a página da web tenham uma barra lateral. Portanto, temos barra do lado direito, barra lateral esquerda e nenhuma barra lateral. Não vou selecionar nenhuma barra lateral. Então, para esses elementos, vamos desativar o cabeçalho e footer.com por padrão com o tema Astra. Como estamos construindo o nosso próprio, lembre-se de que construímos nosso próprio cabeçalho também criaremos nossa própria comida, onde a desativação precisa atualizá-la. Agora está atualizado. A próxima coisa que precisamos fazer é clicar em editar com o Elementor, e isso nos redirecionará para o front-end, onde podemos criar a página. 10. 10 Crie a seção do herói: E agora que estamos aqui, observe que não podemos editar o cabeçalho porque essa não é a área em que podemos editar o cabeçalho. Precisamos entrar na área do cabeçalho térmico dos elementos para editar o cabeçalho. Então, é claro, a primeira coisa que precisamos fazer é selecionar uma estrutura. Precisamos de uma estrutura de coluna dupla como essa. Então, para essa imagem em segundo plano, estamos adicionando-a como plano de fundo desta seção. Então, vou clicar nesta seção. Isso mudará para a seção de edição. E antes de prosseguirmos, acabei de me lembrar de uma ferramenta muito útil que esqueci de ativar. Então, quando você passa o mouse sobre esta ou sobre as colunas, devemos notar mais algumas opções surgindo desse canto como atalhos. Para conseguir isso, vamos clicar no menu de hambúrguer, nas preferências do usuário. Alças de edição. Vamos ativar isso. E agora, quando passamos o mouse sobre essa área, é disso que eu estava falando. Tudo bem, então, clicando nessa seção, vamos entrar em estilo, plano de fundo, tipo de plano de fundo. Selecione isso. Temos a opção de dar uma cor, mas não estamos dando uma cor. Portanto, esse é apenas um exemplo a ser desfeito. Vamos clicar nisso. Queremos dar uma imagem a ela. Então, vou clicar dentro dessa imagem. Agora, vamos fazer o upload dessa imagem de fundo. Então, dentro da pasta de ativos do site de coberturas, vamos procurar essa imagem. Acho que foi isso. Aberto. Aí vamos nós. Insira mídia. Agora você percebe que não podemos ver isso. E isso porque eles não têm nenhum conteúdo dentro da seção. A altura da seção é determinada pelo conteúdo interno. E deixe-me mostrar o que quero dizer. Então clique neste Plus. Vamos colocar nosso título lá. Vamos também adicionar alguns textos. Editor de texto. Como você pode ver, a altura da seção agora está aumentando à medida que adicionamos mais elementos. Vamos também adicionar um botão. Solte-o quando você ver aquela linha azul. Tudo bem, como você pode ver, a altura está aumentando. Mas o que podemos aumentar com as configurações da seção é a margem na parte superior, inferior e nas laterais. Então, se você entrar em avançado enquanto editamos esta seção, também o preenchimento. Então, vamos aumentar o preenchimento. O preenchimento é o espaço entre a borda da seção e o conteúdo dentro da seção. Então, vamos desvincular esses valores para que possamos editar cada sacola individualmente. Se fizermos o preenchimento superior ou 100. Como você pode ver, o espaço entre eles envelhecidos e o conteúdo na parte superior aumentou. Vamos também fazer isso na parte inferior. 100. Então, agora temos 100 dados. Mas vamos fazer 200, 200. E para a atualização das 200 melhores, vamos pré-visualizar as mudanças. Então, lá vamos nós. Mas queremos que fique assim. Então, como fazemos isso? Então, voltando aqui, primeiro de tudo, vamos mudar a posição dessa imagem. Ainda selecionando a seção novamente, insira o estilo da posição. Vamos dar isso. Vamos tentar o centro, o centro e pronto. Então é aí que deveria estar. Para o tamanho. Vamos escolher a capa e ver como fica. Então, digamos que essa atualização. Agora, a imagem está cobrindo toda a seção Aqui. Então, se voltarmos aqui e escolhermos Padrão e atualizarmos isso, deixe-me mostrar como fica. Vamos pré-visualizar as mudanças. Dentro. Agora esse é o problema que temos. Deixe algum espaço em branco, então certifique-se de que temos essa opção configurada para cobrir todo o plano de fundo. Atualize isso. Mais uma vez, vamos pré-visualizar as mudanças. E aí vamos nós. Então, é assim que se prepara a imagem de fundo da seção do herói. Na próxima lição, vamos continuar trabalhando no bloco de texto e em tudo mais. Então, te vejo em breve. 11. 11 Crie a seção do herói no bloco de texto: Vou pegar isso, copiar, isso. Entre aqui, selecione este conteúdo. Vou colar aqui. Mas é claro que agora você precisa digitar suas próprias mensagens de texto. Eles são especialistas confiáveis em coberturas. Então vamos entrar no estilo e mudar a cor para talvez aquele amarelo. Atualize-os. Então, deixe-me trocar esse arquivo aqui e pegar essa cor amarela. E aqui, vou colar o amarelo lá e atualizar a página. Aí vamos nós. Mas agora você notará que esse título não se parece com o que temos aqui. Isso parece ter um gradiente. Então, como podemos conseguir isso com outro plugin que é uma extensão do Elementor. Então, vamos voltar aqui. E eu não quero sair desta página. Então, deixe-me mudar para uma nova guia e ir para o painel. Vamos para Plugins, Adicionar novos. E o plugin é chamado pi out net add-ons for elementary. Em seguida, complementos de compra e rede para o Elementor. É uma extensão do elemental, assim como os elementos mantêm a luz. Vamos ativá-lo. Eles têm configurações. Agora, como você pode ver, ele também tem muitos elementos, assim como elementos, crianças. Então, se voltarmos aqui e atualizarmos, é Control R e selecionar esse texto. Se entrarmos. Em primeiro lugar, você notará que agora temos esses complementos de rede do PAF para o Elementor. Isso significa que agora está disponível. E se selecionarmos isso e colapsarmos todos esses painéis, como você pode ver aqui está. Então, selecionando esses textos, vamos entrar no estilo. E você notará que temos um texto em gradiente perfeito. Então, podemos ativar isso. E agora podemos selecionar as duas cores que queremos usar como cores padrão. Então, deixe-me mudar aqui e escolher isso como uma das cores, esse amarelo. Deixe-me colocá-lo lá. Para isso. Vamos fazer com que seja dessa cor. Como você pode ver agora, estamos começando a ter esses efeitos. A única coisa que precisamos fazer é mudar esse texto. E para fazer isso, vamos entrar na tipografia do Tidal. Vamos mudar a família de fontes para monitorar a mãe Sarah. E vamos aumentar o peso para algo como 900. Aí vamos nós. Vamos também aumentar o tamanho. Especialistas confiáveis em coberturas atualizam isso. Vamos mudar a cor desse texto selecionando-o. Isso muda para editar texto, estilo do editor, cor e branco. Atualize isso. Vamos pré-visualizar as mudanças. Aí vamos nós. Então, agora já está começando a tomar forma. A única coisa que precisamos fazer para trabalhar com o botão. Mas antes disso, vamos ver como mudar essa família de fontes. Voltando aqui, enquanto isso ainda está selecionado, vamos entrar no tipo de estilo, tipografia, Montserrat. Montserrat. Atualize isso. Então aí está. E para mudar a cor do botão, primeiro selecione o botão. Essas mudanças no botão de edição. Podemos mudar o que o botão nos diz. E podemos mudar o URL. Então, quando eles clicam nesse botão, eles devem ser redirecionados para a página que especificamos aqui. Então, por exemplo, www.google.com. Então, primeiro de tudo, vamos atualizar isso. E vamos pré-visualizar as mudanças. Tudo bem, então quando passamos o mouse sobre eles, como você pode ver aqui embaixo, o URL é google.com. E quando clicamos nele, vai para google.com, vamos voltar. Se você quiser que ela abra em uma nova guia, você pode clicar nesta roda dentada aqui e depois abrir uma nova janela. Isso abrirá a página em uma nova guia. Então, preveja que, se clicarmos em falar conosco, ela abrirá em uma nova guia e nossas páginas serão incorporadas. Agora, vamos embora enquanto o botão ainda está selecionado, vamos entrar no estilo. Como você pode ver, esse é o colapso do botão colorido que revela que só temos duas opções aqui. Para o tipo de fundo colorido. Podemos mudar isso para. Podemos mudar isso para esse amarelo. Deixe-me copiar esse amarelo. Clique em qualquer lugar nessa área para se livrar desse pop-up. Aí vamos nós. E ao passar o mouse, queremos que seja branco. Então, em seu estado normal, é amarelo. Ao passar o mouse sobre a cor. Queremos que seja branco. Então, deixe-me clicar aqui. Ao passar o mouse, é branco. Mas enquanto ainda estiver em baixo, o texto deve mudar para preto. Simplesmente assim. Tudo bem, então vamos também mudar o raio da borda para dez. E isso o torna um pouco mais redondo nos cantos. Também devemos aumentar o tamanho do botão aumentando o preenchimento. Preenchendo, vamos recolher isso, isso fechará o botão. Mas agora, para a esquerda, vamos dar 50 para o passeio, 50 para o topo. Vamos dar talvez 20, 20 inferiores. Isso torna o botão muito maior, r Theta. E vamos pré-visualizar as mudanças. Então, lá vamos nós. Ao passar o mouse, ele muda para y. E se clicarmos nele, ele abrirá o URL e os provedores. Então, é assim que se cria a seção de heróis. Na próxima lição, vamos ver como criar essas solicitações e assistente de agendamento. Te vejo em breve. 12. 12 Deixe o encabeçamento pegajoso: Bem-vindo de volta. Então agora é hora de começar a trabalhar nesse livro, um assistente de agendamento. Então, voltando para nossa referência, esta solicitação, um assistente de agendamento. Mas antes de fazermos isso, acabei de lembrar que há uma coisa importante que esquecemos de fazer. Então, observe que quando ele começa a engatinhar, como eu mencionei, o cabeçalho fica no topo. Isso é o que chamamos de cabeçalho fixo. Ele permite que o usuário tenha acesso ao menu, independentemente da parte do site ou página da web em que esteja. Então, isso é muito importante para a experiência do usuário, UI UX. Então, vamos ver como tornar o cabeçalho fixo e também adicionar esses efeitos de foco, porque acho que esquecemos de fazer isso. Sim, nós fizemos. Então, clicando neste menu de hambúrguer, saia. Vamos voltar ao rodapé do cabeçalho do kit de elementos. Vamos clicar em editar com Elementor para editá-lo diretamente no front-end. E aí está. Então, primeiro de tudo, vamos clicar neste menu de navegação e entrar no estilo. Quero recolher o invólucro do menu e abrir um estilo de item de menu. E agora você notará que , na tipografia, temos estado normal pairando e ativo. Em seu estado normal, deveria ser preto, mas ao passar o mouse, é cinza e queremos que seja amarelo. Então, deixe-me voltar a isso. Copie essa cor amarela. Selecione itens como Scholar, cole-os lá. Agora, quando passamos o mouse sobre ele, é amarelo. Isso garante consistência nas cores da marca. E quando está ativo, também queremos que seja amarelo. Então, vou colar isso lá. Atualize isso. Vamos analisar as mudanças. Aí vamos nós. Outra coisa que queremos fazer é transformar nosso logotipo em um link para a página inicial para que, quando alguém clicar no logotipo, seja levado de volta à página inicial. Então, deixe-me pegar o link da minha página inicial. Copie isso. Selecione a imagem em si. E aqui, em Link de conteúdo, selecione URL personalizada. E vou colar o link da minha página inicial lá porque esse é o meu URL. Então, se eu pudesse simplesmente arrastar este navegador para baixo assim. link da minha página inicial é www.mydomain.com. Portanto, certifique-se de que seja seu domínio.com. Deixe-me arrastar isso para cima novamente, desse jeito. Então, agora que estamos assim, vamos atualizar isso. Visualize as alterações. Agora, quando você passa o mouse sobre a imagem, como você pode ver, ela muda para um ícone de mão para mostrar que você pode clicar nela. Portanto, no momento, quando clicarmos neste link, não será direcionado para a página inicial que selecionamos para ser nossa página inicial. Seremos direcionados para a página inicial padrão definida pelo WordPress porque não definimos uma página inicial específica para ser a página inicial e deixe-me mostrar o que quero dizer. Então, se eu clicar nele direcionados para a página inicial padrão do HelloWorld, mas queremos ser direcionados para esta página inicial. Deixe-me clicar nesta página inicial. Queremos ser levados até aqui. Então, como definimos a página inicial? Voltando ao nosso painel? Deixe-me ir aqui. Configurações do painel, lendo as exibições da página inicial. Então, o que queremos fazer é selecionar uma página estática e, em seguida, a página inicial, selecionar página inicial. Essa é a nossa página. Esta é uma lista de todas as páginas que temos. Em seguida, salve as alterações. Agora, se formos para o front-end e digamos que estamos dentro da página Sobre. Se clicarmos, o logotipo será retirado. A página inicial que você selecionou porque o URL aponta para lá. Mas, como você pode ver, nosso cabeçalho ainda não está fixo. Então, como podemos torná-lo pegajoso? Assim como em nossa página de referência aqui. Agora, para tornar a cabeça pegajosa, precisaremos usar aquele plugin que mostrei um pouco antes, que também é uma extensão do Elementor e é chamado de efeitos de cabeçalho fixo para Elementor. Então, entrando em nosso painel e clicamos no painel. Vamos aos Plugins. Adicione Novo e digite um cabeçalho fixo. Estes são os efeitos de cabeçalho fixo do Elementor instalados. Agora, vamos ativá-lo. Tudo bem, e agora está instalado. Certo? Agora voltando para onde estávamos editando o cabeçalho. Se eu pressionar Control R para atualizar a página, ou apenas clicar com o botão direito do mouse e recarregar. Agora, se selecionarmos o cabeçalho e entrarmos ou avançarmos, como você pode ver, os efeitos de cabeçalho fixo do Elementor estão aparecendo, então agora expandidos e vamos ativá-los. Agora, é claro, ele revelará várias configurações aqui, mas a única configuração que precisamos é alterar o plano de fundo do cabeçalho assim que começarmos a rolar. Então, antes de fazermos isso, deixe-me mostrar o que quero dizer. Vamos atualizar isso antes de habilitarmos essa cor de fundo. Agora que está ativado, deixe-me mudar para o front-end. Se começarmos a rolar. Ainda não temos conteúdo suficiente para ir até lá para que eu mostre o que quero mostrar a você. Então, primeiro de tudo, deixe-me editar rapidamente esta página para adicionar algum conteúdo extra abaixo dela. Então, deixe-me adicionar uma seção aqui. Deixe-me dar uma margem muito grande no topo, como 200. Deixe-me adicionar talvez alguns textos lá. Atualize isso. Na verdade, você já pode ver o que eu quero te mostrar. Então, vamos pré-visualizar essa página. Agora. Se rolarmos, como você pode ver, o cabeçalho agora está fixo, mas não tem fundo. E é isso que queremos resolver, porque você não consegue ver o logotipo enquanto o plano de fundo é transparente. Então, o que queremos fazer é voltar para onde estamos editando o cabeçalho que está aqui. E enquanto ainda estamos usando efeitos avançados de cabeçalho fixo, passa para a cor de fundo ativada, que escolhe para qual cor alterar o plano de fundo após a rolagem. E queremos que seja branco. Então, atualize isso. Vamos pré-visualizar isso. Agora. Se for para a página inicial e rolar, como você pode ver, o fundo é branco e tudo no cabeçalho estará visível. Então, basicamente, é assim que o cabeçalho fica grudado. Na próxima lição, vamos ver como criar seu livro. Uma consulta com, te vejo em breve. 13. 13 Crie o Assistente de nomeação, Instalar o Formi: Olá, bem-vindo de volta. Então agora é hora de criar a solicitação, um compromisso com esse resultado aqui mesmo. E para fazer isso, precisaremos instalar um plugin de formulário chamado terminator. Agora, existem vários outros plug-ins de formulários disponíveis no mercado. Mas eu também não amo por mim porque a maioria dos recursos incríveis que ele oferece gratuitamente ou premium ou pagos com outros plug-ins estrangeiros sem perder tempo. Vamos entrar no painel. Eu só quero ir para o telhado do COE. Painel de controle. Plugins, adicione novos. Vamos procurar por formá-lo. E aí vamos nós. É do desenvolvedor do WP MU. Tem mais de 300.000 instalações e, como você pode ver, tem mais de 1.000 avaliações de cinco estrelas. Instalar. Agora, vamos prosseguir e ativar. E aí está. Retirei este menu aqui à esquerda. Para muitos, eles deveriam estar na parte inferior. Então, aqui estamos. Então, se eu clicar para mim, nenhum deles será redirecionado para esta parte, onde você terá um resumo de todos os seus formulários enviados, questionário de missões e tudo mais. 14. 14 Crie o Assistente de nomeação Criar um formulário: E também temos esses atalhos para criar um formulário ou criar uma enquete. Mas o que nos interessa agora é criar um formulário. Então, vou criar, temos diferentes formulários pré-fabricados com os quais podemos começar rapidamente. Mas como o nosso é personalizado, vamos clicar em Branco e continuar. Vamos dar um nome a ele. Nomeações. Vamos criar. E agora aqui podemos começar a inserir os diferentes campos que queremos ter em nosso formulário. Esses são os diferentes campos. Então, vamos começar com o serviço. De que serviço precisamos? Qual serviço o cliente precisa? Então, é claro, agora esse é um menu suspenso. Voltando aqui. Vamos inserir o campo. E a opção do menu suspenso é chamada de selecionar, como você pode ver aqui. Vou escolher os campos de inserção e isso abrirá as configurações desse tipo específico de campo do formulário. Claro que não é chamado de trava. Vamos chamá-lo de serviço. Tipo de serviço. Esse é o espaço reservado, esse é o rótulo ou o campo do formulário, como esse serviço aqui para rotular esses Brownfield. Também é só acessar aqui e preparar as opções. Então, reparos no telhado, essa é a primeira opção no menu suspenso. Substituição do telhado. E acho que, por enquanto, vamos com isso. Mas é claro que agora você inserirá os serviços específicos que possui. Então, se você quiser tornar esse campo obrigatório, podemos acessar as configurações. Por enquanto, é opcional, mas podemos configurá-lo conforme necessário e, em seguida, definir a mensagem de que as pessoas verão se não sentirem isso. Portanto, o tipo de pesquisa é necessário com um ponto de exclamação. Tudo bem, vamos voltar aos rótulos. Vamos adicionar um espaço reservado. O tempo de serviço. Agora podemos clicar em Aplicar. Agora, se o visualizarmos, ele terá esse tipo de serviço de menu suspenso. Selecione um tipo de serviço e, em seguida, a lista de opções que preparamos. Tudo bem, vamos fechar isso. E então vamos publicar esse formulário. Agora que o publicamos, esse pop-up aparecerá com um código curto. E esse é o código curto que vamos colar em nossa página para exibir o formulário. Então, vamos copiar isso. Conseguimos licitar com sucesso. E caso você tenha fechado isso, você sempre pode obter o código curto daqui enquanto ainda edita o formulário. Solicite compromissos, clique nesta roda dentada, copie o código curto. O código curto copiou o sucesso para mim. Agora, se eu clicar com o botão direito do mouse neste link aberto nova guia e depois ir para essa nova guia. Assim, podemos abrir a página e clicar em Editar com o Elementor. Assim, podemos começar a editar a página com o Elementor. Se eu rolar para baixo , em primeiro lugar, deixe-me me livrar disso. Posso adicionar uma nova seção de coluna dupla. E nesta parte, clique neste Plus. E então, aqui, digite código curto ou simplesmente curto. Ele mostrará um código curto. Arraste esse código curto e solte-o lá. E enquanto ainda está ativo, isso é lido como código de edição. Agora podemos colar aqui o código curto que acabamos copiar do formulador. Aí vamos nós. Esse código curto foi colado lá. E como você pode ver agora, ele é exibido na parte frontal. Tudo o que precisamos fazer agora é criar esses outros campos. E teremos nossa forma e depois estilizaremos nossa forma. Voltando aqui. Vamos atualizar isso. Vamos pré-visualizar as mudanças. Então, rolando para baixo, aí está. Não se preocupe. Em breve você estará assim. 15. 15 Crie o Assistente de nomeação Adicione todo o F: E bem-vindo de volta. Agora que exibimos nosso formulário no frontend, é hora de adicionar o restante dos campos do formulário. Então, voltando ao nosso painel, vamos clicar em Inserir campo e agora podemos selecionar alguns deles. Então, o que precisamos é o nome do usuário, seu endereço de e-mail, telefone, área de texto. Eu acho que isso é suficiente. Então, insira o campo, e aí está. Mesmo antes de fazermos qualquer personalização, vamos pré-visualizá-la. E aí vamos nós. Então, é assim que deve ser. Eles selecionarão o tipo de serviço de que precisam. Eles fornecerão seu nome, endereço de e-mail, número de telefone para que possamos entrar em contato com eles e qualquer informação adicional que eles gostariam que tivéssemos em mente. E depois que eles solicitarem uma consulta com todos esses detalhes, podemos entrar em contato com eles por telefone ou e-mail e agendar a consulta. Então, com isso em mente, vamos fechar isso e, em seguida, atualizar isso confirmará essas alterações. Tudo bem, agora está salvo. Vamos pré-visualizar as mudanças no front-end. Se eu atualizar esta página e depois visualizar as alterações. Sim, então aí está. Então, a próxima coisa que queremos fazer é atualizar a aparência do formulário que seja coerente ou consistente com a marca do site, as cores da marca. momento, quando passamos o mouse sobre ele, é azul, e essas são as cores padrão que vêm com a formação posterior. Também precisamos alterar alguns desses detalhes aqui, pois talvez você queira usar seu próprio código de país para o número de telefone e tudo mais. Então, vamos voltar aqui no painel. Vamos clicar no nome. Então, podemos mudar isso para o seu nome, e então isso pode ser Alex Cross. Também podemos torná-lo um campo obrigatório. O nome é obrigatório. E então vamos aplicar isso. Vamos pré-visualizar isso por enquanto. Esse é um campo obrigatório. Esse também é um campo obrigatório, mas não é obrigatório e você pode ver por este asterisco. Então, agora, se dissermos Enviar mensagem, você notará que estamos recebendo essas mensagens personalizadas que digitamos. O nome é obrigatório, o tipo de serviço é necessário. Mas isso não sinaliza nenhum problema. Então, para torná-lo consistente, vamos mudar isso para um apóstrofo. O endereço de e-mail também é obrigatório. Pernas em company.com. Também é obrigatório. Seu e-mail é obrigatório. O número de telefone pode ser opcional. Aplique isso. E depois para a área de texto. Primeiro de tudo, vamos mudar. É rotulado como duas informações adicionais. E para o espaço reservado, te encontro. Tudo bem, então vamos pré-visualizar isso. Como você pode ver, informações adicionais, o que mais você gostaria que tivéssemos em mente ao nos prepararmos para conhecê-lo? Número de telefone. Todos esses detalhes são personalizados por nós. Tudo bem, então vamos atualizar isso. E agora as alterações foram salvas. Então, voltando ao front-end na página em que o estamos editando. Selecionar qualquer lugar dentro do elemento de código curto. Podemos atualizar a página ou simplesmente clicar em aplicar para aplicar as alterações que fizemos no back-end. Agora está atualizado. Vamos pré-visualizar as mudanças. Tudo bem, e aí está. Então, basicamente, é assim que se adiciona todos os campos ao formulário de agendamento. Na próxima lição, vamos ver como personalizar sua aparência, suas cores, para que fiquem coerentes com o resto do site. Então, te vejo em breve. 16. 16 Crie o Assistente de nomeação, o suporte do formulário: Bem-vindo de volta. Então, como você pode ver, quando eu passo o mouse sobre esses campos, eles são de cor azul. E não é isso que queremos, porque isso não é consistente com as cores da nossa marca. Então, voltando aqui, o que queremos fazer é, enquanto ainda estamos editando o formulário de solicitação de agendamento, ir para o campo Aparência. E se eu pudesse voltar para os campos, campo, se descermos até aqui, também temos esse botão aqui que nos levará ao próximo lugar, que é essa parte. Então, se eu clicar em aparência, você notará que agora temos essa parte destacada. Se eu rolar para baixo até a parte inferior, você notará que temos comportamento aqui e aqui também temos comportamento. Então, basicamente, estamos seguindo essas etapas para concluir a configuração do nosso formulário. Agora que estamos dentro da aparência, primeiro queremos mudar. Esta é uma prévia do nosso formulário. Essa é uma prévia de como o formulário será exibido. Então, se eu selecionar sinalizadores que eliminam as bordas no campo, se eu selecionar Negrito, isso torna essa linha em negrito. O padrão é muito trabalhoso. Ousado. Esse é o que eu gosto. Na verdade, também temos material e nenhum. Então, eu vou usar negrito. Podemos selecionar o que você deseja. Agora. Isso é para o estilo de design. Aqui mesmo. Também temos a opção de alterar as cores. Então, no momento, estamos usando as cores padrão que vêm com elas, nem para mim, mas eu quero selecionar a roupa. E isso revelará mais configurações aqui com as quais podemos usar para criar a fórmula exatamente como queremos. Então, vamos começar com um botão de envio. Portanto, agora, antes de mudarmos qualquer coisa, o botão de envio é azul e a cor do mouse aqui também é azul. Então, vamos fechar isso. Ah, espere, se visualizarmos isso, observe que nosso formulário agora está em negrito. Tem cores de borda ousadas. Então, vamos para o botão enviar. Expanda isso. E a cor de fundo é azul. Então, se eu pudesse mudar aqui e escolher essa cor amarela, clique aqui para revelar essa parte, clique duas vezes nela e cole lá. Se fizermos uma prévia. Agora, na cor amarela, mas ao passar o mouse é azul. Então, eu quero mudar isso. Isso é o padrão do que querer ter talvez essa cor. Então, agora, se visualizarmos isso ao passar o mouse, comer uma cor escura ou, melhor ainda, vamos usar as cores reais que queríamos usar. Então, vou fazer com que seja um azul muito escuro que parece preto. Atualize isso. Nós realmente não precisamos mudar a cor do foco, mas sim para obter consistência. Tudo bem, então agora vamos fazer uma prévia lá. Incrível. Então, eu gosto da aparência. Vamos fechar isso e atualizar porque você tem alterações não publicadas. Agora está salvo. Tudo bem, então a próxima coisa que queremos fazer é trabalhar nessa cor flutuante dos campos. Então, fechando isso, lembre-se deste menu suspenso, esse campo, o tipo desse campo é campo de seleção. Voltando aos campos. Lembre-se de que falhamos na inserção e o menu suspenso era um tipo de entrada selecionado. Então, voltando aqui, aparência, traje. Temos o tipo selecionado de entrada aqui. E a cor padrão da borda é esse cinza escuro. Então, se eu abrir esse cinza escuro no estado padrão ao passar o mouse, é azul. Então, o que eu quero é torná-lo mais leve. Então clique nele e então vamos torná-lo cinza claro. Pré-visualize isso. Agora, como você pode ver, o cinza é mais claro que esse outro cinza. Eu ainda quero, ainda quero torná-lo mais leve do que é agora. Então, deixe-me dizer que nosso quadro previa isso, e eu gostei desse nível de nota. Tudo bem, agora passe o mouse. Vamos mudar a cor da borda para esse amarelo. Cole aí. E vamos pré-visualizar isso. Sobre quem come esse amarelo. Em foco, também queremos que seja tão amarelo. Mas você pode fazer da cor que quiser. Lembra disso? Então, para a cor do ícone, queremos torná-la amarela também. Mas você pode fazer isso, vamos fazer com que seja essa cor preta escura. Sim. Assim. Ao passar o mouse. Precisa ser dessa cor escura. Mesmo. E também por padrão, esse é o ícone do qual estávamos falando. No entanto, ainda é preto. Quero manter a mesma coluna. Tudo bem, então o que mais? Cor dos textos, a cor do texto parece boa. Agora vamos trabalhar com essa cor do menu suspenso. Então, terminamos com a lista suspensa de seleção. contêiner precisa ser a borda do contêiner. Vamos fazer com que fique tão escuro. Cinza um pouco mais escuro. Sim, é um cinza um pouco mais escuro. E acho que todo o resto deve continuar do jeito que está. Então, vamos fechar isso. Antes de tudo, deixe-me atualizar isso para que possamos salvar as alterações. Isso está salvo. Em seguida, vamos trabalhar nos demais campos. Então, primeiro de tudo, quero copiar esse cinza claro para o resto dos campos. Vamos voltar aqui. Selecionar dentro. Era o triplo C, E. Em vez de copiar isso. Vamos para a área de entrada e texto. Esses outros tipos de campos são entradas. E essa é a área de texto. Essas três são entradas. Portanto, a cor padrão da borda deve ser tripla C E, C B, C E C, D. Deixe-me copiar isso. Não é necessário copiá-lo. Agora todos eles têm essa cor, mas agora queremos deixá-los amarelos ao passar o mouse. Então, vou copiar aquela roupa amarela que está pairando. Em foco. Também queremos que fique amarelo para o erro. Vamos deixá-la na cor padrão porque as mensagens de erro normalmente são vermelhas. Então, vamos pré-visualizar isso. Agora. Aqui vamos nós. Então, concentre-se. É dourado, amarelo, para que se destaque e o usuário possa ver onde está digitando. Então, quando tivermos isso atualizado, vamos para o front-end. Vamos selecionar o formulário em qualquer lugar dentro do código curto que revela esses dados aplicados. Agora vamos pré-visualizar as mudanças. Rolando com o botão direito para baixo. Como você pode ver, a aparência dos formulários agora está atualizada conforme desejado. Agora, é assim que se cria e personaliza o formulário usando o formulador. Na próxima lição, vamos ver como mudar o layout e empurrá-lo para cima para que ele apareça maneira estilística na seção de heróis. E, ao mesmo tempo, trabalharemos nesta seção redefinida de coberturas. Então, agora estamos editando oficialmente a seção do corpo. vejo em breve. 17. 17 Crie a seção do corpo repintada: Ei, bem vindo de volta. Agora que terminamos o formulário de agendamento, é hora de começar a preencher a seção do corpo e começaremos com essa área aqui, com esse bloco de texto. Queremos fazer algo assim. Então, o que eu quero fazer é realmente pegar isso. Vamos entrar aqui. É aqui que estamos editando a página de destino. E aqui, é claro, esta é uma seção de coluna dupla. Então, temos essa coluna. Se eu entrar aqui, posso simplesmente pegar um título. E agora, como é o elemento ativo aqui, diz editar cabeçalho, e eu posso selecionar Excluir e colar isso lá. Eu também quero voltar aqui e pegar esse texto. Agora, estou copiando esse imposto, mas é claro que você precisará usar seu próprio texto personalizado. Este foi apenas um texto que eu criei ao criar o site de referência. Tudo bem, então volte aqui e eu quero clicar neste ícone aqui para trazer um elemento do editor de texto. Solte-o quando a linha azul aparecer e, em seguida, clique aqui dentro e cole esse texto lá. Ou agora, para o seu caso, você digitará o que quiser digitar lá. Agora, vamos atualizar isso. E antes de prosseguirmos, você notará que estávamos mudando a família de fontes de cada texto ou elemento tipográfico aqui na seção de heróis. E não queremos continuar mudando a topografia individualmente. Para cada elemento, podemos simplesmente definir uma fonte global que cada novo texto adotará sempre que adicionarmos novos textos. Então, fazemos isso acessando esse menu de hambúrguer, configurações do site, fonte global. Então, vamos criar a fonte primária ou as fontes de cabeçalho, Montserrat. E agora você notará que isso mudou para Montserrat. Clique em qualquer lugar aqui para se livrar desse monitor secundário AX. Clique em qualquer lugar lá dentro. Para os textos, esse é o corpo de textos como este, também queremos que seja Montserrat. Isso mudou em Montserrat e também para o sotaque. Atualize isso. Também podemos predeterminar a espessura da fonte que queremos para nossos títulos. Então eu queria adicionar 800. 800 está bem. Atualize isso. Então, agora, toda vez que adicionarmos qualquer tipo de texto nas páginas da web, será mais interativo por padrão. Então, se eu fechar isso, volte. Deixe-me fechar isso. Então, agora se eu arrastar um título aqui, é Montserrat por padrão. Isso é o que queríamos. Portanto, agora não precisamos continuar voltando às configurações para alterar. Que telefone provocar. Feito isso, vamos primeiro aumentar o preenchimento na parte superior do texto, o espaçamento entre o texto e a borda dessa coluna na parte superior. Então, vou selecionar o preenchimento avançado da coluna. Vamos empurrá-lo para baixo. Estamos apenas aumentando o espaçamento acima dele. Vamos reduzi-lo um pouco até 90. Vamos também aumentar o preenchimento esquerdo. Talvez depois desse ponto. Tudo bem, desse jeito. Agora, empurrar isso para cima será, na verdade , empurrar a coluna para cima. Então, vamos selecionar essa coluna avançada. Vamos quebrar a margem e depois superar. Vamos empurrá-lo para cima assim. Até essa parte que queremos. Então, vamos subir para talvez 20, dois terços desse jeito. E então, enquanto ainda estamos aqui, vamos ao estilo. Enquanto esta coluna ainda estiver selecionada, estilo, plano de fundo, quero torná-la branca. Aí vamos nós. Também queremos voltar para dentro do Advanced. E vamos dar um preenchimento de 20 ao redor. Digamos 30 ou 40. Empurre tudo para dentro desse jeito. E então vamos dar a ele um raio de fronteira. Raio de fronteira de 20. Isso lhe dá esse canto arredondado em toda a volta. E então vamos atualizar a página. Visualize as alterações. E aí vamos nós. Então é assim que parece. Vamos fazer algo sobre isso. Ou parece aqui? Tem essas cores. Então, voltando aqui, selecione esse estilo. Deixe-me pegar essa cor escura. Seja que, enquanto essa ainda estiver selecionada, a cor do texto do estilo, cole-a lá. E vamos à tipografia, aumente o tamanho. Acho que quero que seja 900, assim. Tudo bem, atualize isso. Vamos pré-visualizar as mudanças desse jeito. Então, lá vamos nós. Então, é assim que se cria a seção redefinida da cobertura. Acho que gosto da aparência. A próxima coisa que queremos fazer é criar essa seção de opções amplas. Então, vamos ver como fazer isso na próxima lição. vejo em breve. 18. 18 Crie a seção do corpo por que nos escolher: Bem-vindo de volta. Então, agora é hora de criar a seção y escolhe. Esta seção. Então, vamos voltar ao nosso editor. E vamos adicionar uma nova seção. E, claro, é uma seção de coluna única. Sim, é uma seção de coluna única. Então, coluna única. E agora, é claro, observe que o fundo é preto escuro, é esse azul marinho escuro. Então, vou pegar isso. Copiar. Selecione esta seção, entre estilo, tipo de fundo, cor. Agora, cole isso aí. Agora é aquela terra. Lembre-se de que a altura de uma seção é determinada pelo conteúdo dentro de uma seção. Então, vamos adicionar um pouco de conteúdo. E você notará que temos essa interseção aqui que é branca e tem duas colunas. Então, vamos ver como adicionar uma interseção primeiro. Então, voltando aqui, vou clicar em Mais e então temos a interseção. Então eu vou deixá-lo lá. Por padrão, ele tem duas colunas. E é exatamente disso que precisamos, porque existe esse bloco de texto e há a imagem. Mas antes de trabalharmos nessa parte, vamos também entender isso. Por que opta por se mover mais rápido? Podemos simplesmente duplicar esse título. Então, vou passar o mouse sobre lá e clicar nessas duas duplicatas. E então eu vou arrastar isso e soltá-lo acima do cruzamento. Porque é da mesma cor do plano de fundo. Você pode ver isso. Então, vou selecioná-lo. Embora ainda esteja selecionado, como você pode ver, é um título de edição. Deixe-me pegar aquela cor amarela. Bobby, vamos entrar com estilo. Cole aí. Vamos voltar ao conteúdo e alinhá-lo com a refeição central. Então pegue esse texto. Provavelmente isso também pode duplicar isso, duplicar esse corpo de texto. E, em seguida, clique duas vezes nele, cole isso lá. Entre no estilo, mude para branco e alinhe-o ao centro. Agora, é claro, precisamos aumentar o preenchimento na parte superior do texto. O espaçamento entre a borda da seção e o conteúdo dentro dela na parte superior. Então, vou selecionar a seção superior de preenchimento avançado. Vamos empurrar as coisas um pouco para baixo. E também na parte inferior, abaixo da seção interna, precisamos ter um pouco de acolchoamento. Então, vamos também fazer isso. Eu te darei os 50. Ainda estamos na seção. Agora, vamos seguir em frente e selecionar a interseção. Mude, vá para estilo, plano de fundo. Mude a cor para branco. Simplesmente assim. Acabei de lembrar que não definimos isso como H1. Deveria ser um H1. Cada landing page deve ter um H1 e não dois ou três. Apenas um H1. E H1 é uma declaração ou frase que diz ao usuário, em poucas palavras, do que se trata essa página. É a proposta de venda exclusiva dessa página ou da sua empresa. E eu entro em detalhes sobre isso na minha aula de SEO, que você pode conferir visitando meu perfil aqui no Skillshare. Tudo bem, então agora isso é um H1. Podemos ter quantos H2, H3, H4, H5 quisermos. Isso também é um H2. E está tudo bem. Tudo bem, então a próxima coisa que queremos fazer é adicionar esse texto interno. Por isso, nos preocupamos com suas necessidades. Copie isso. Vamos duplicar isso também. Arraste-o e solte-o dentro dessa coluna. Vamos duplicar isso. Arraste e solte abaixo disso. Então, vou selecionar isso. E como eu copiei o texto, você se preocupa com suas necessidades, mas precisamos torná-lo um pouco menor. Então vá para o arquivo de insights. E então, para esses textos, pegou P que selecionou isso. Cole isso. Tudo bem, deixe-me adicionar uma imagem aqui para que eu clique nessa imagem. Imagem. É isso. Tudo bem? Então, enquanto a imagem está na verdade, temos essas configurações. Deixe-me fazer o upload. Aqui está, abra. Insira a mídia e pronto. Assim, podemos torná-lo menor. Também podemos duplicar o botão. Arraste-o enquanto o botão esquerdo do mouse ainda está sob pressão de seus dedos e role para baixo usando a roda. Coloque-os no botão ali mesmo. E agora aqui temos uma lista de ícones. Então, vamos voltar aqui. Clique nessa lista de ícones. Arraste e solte a lista de ícones ali mesmo. A margem logo abaixo do texto é demais, então vou selecionar o texto. Margem avançada. Reduza a margem na parte inferior. Deixe-me copiar isso. Selecione isso. E então vamos expandir o item número um da lista. Vou clicar duas vezes nele e colar lá. Volte aqui, pegue essa cópia que colapsa, expanda aquele clique duplo e cole lá. E, finalmente, copie isso. Decorrido isso, expanda aquele clique duplo lá, cole-o. Agora. É claro que agora precisamos mudar os ícones, podemos alterá-los. Também quero aumentar o espaço entre esses dois para poder selecionar o botão, avançado, margem, parte superior, pressioná-lo um pouco para baixo. E então, ao passar o mouse, notei que é branco. Eu quero que seja aquele azul escuro. Então, primeiro de tudo, deixe-me selecionar isso. Entre com estilo. Copie isso da seção. Selecione o botão. Ao passar o mouse. Ele precisa ser preto e o texto precisa ser branco. Ou podemos torná-lo tão amarelo. Então, deixe-me ser tão amarelo assim. Vamos voltar aqui e mudar essas cores. Abaixo do item da lista de ícones. Vamos para a cor do ícone. Vamos fazer com que seja tão amarelo. E ao passar o mouse. Vamos fazer com que seja azul escuro. Simplesmente assim. Atualizar. Vamos analisar as mudanças. Então, rolando para baixo. Aí vamos nós. Então, agora precisamos aumentar o preenchimento em todo o lado interno dessa seção de coluna dupla. Então, vou voltar aqui, selecionar a seção de coluna dupla, preenchimento avançado. E como isso está vinculado, podemos dar talvez 30. E então entre na borda de estilo. Vamos tentar. Eu preciso dar aquele efeito de canto arredondado. Vamos também selecionar o estilo da imagem, raio da borda. Vamos reduzir o tamanho dessa forma para que fique equilibrado. Atualizar. E vamos pré-visualizar as mudanças. Aí vamos nós. Então, agora eu acabei notar que nós empurramos este para dentro pela esquerda. Não deveríamos ter feito isso. Então, vamos voltar aqui. Selecione isso e, em seguida, deixe zero. Atualize isso. Analise as mudanças. Role para baixo. Então, agora está devidamente alinhado com o texto na seção pura. Obviamente, você deve dedicar seu tempo para refinar o que conseguimos criar até agora. Isso é apenas uma orientação, mas espero que você reserve um tempo para garantir que tudo fique incrível depois de adquirir as habilidades. Então, basicamente, é assim que se cria essa seção. Na próxima lição, vamos ver como criar essa outra parte. À medida que progredimos. vejo em breve. 19. 19 Crie a seção do corpo Técnicos qualificados: Bem-vindo de volta. Agora, vamos criar a seção de técnicos qualificados. Então é isso que estamos criando. Sem perder tempo, vamos entrar aqui. Então, vamos adicionar uma única seção de coluna. Assim. Vamos continuar e duplicar esses cabeçalhos. Vou arrastá-lo até lá. E antes de prosseguirmos, primeiro, vamos selecionar esta seção avançada. Vamos para a margem e aumentar o espaçamento entre esta seção e a anterior. Então, marque o top 50, digamos 100, assim. Agora, a próxima coisa que queremos fazer é adicionar esse texto que está abaixo dele. Vamos duplicar isso. Vamos colar isso aí. E agora observe que esse texto aqui é mais compacto. Tem espaço suficiente à direita e à esquerda. Então, vamos entrar aqui. Enquanto isso ainda estiver selecionado, quero entrar na margem esquerda. Vamos mantê-lo em talvez 200. E à direita, 200. E, claro, vamos usar o estilo, centralizá-lo assim. Tudo bem, então a próxima coisa que queremos fazer é selecionar isso. Depois clique com o botão direito em Copiar Selecione esse estilo de colagem com o botão direito do mouse. Agora, essa é uma forma de copiar e colar os estilos aplicados a outro texto. Mas agora, é claro, isso está alinhado à esquerda. É por isso que eles foram empurrados para a esquerda. Precisamos selecioná-lo e garantir que esteja alinhado ao centro. Tudo bem, então agora, porque esta é uma seção de coluna única, podemos entrar aqui e arrastar uma, uma interseção logo abaixo do texto. Agora ele tem duas colunas porque queremos criar essas três colunas. E em cada coluna teremos uma caixa de imagens. Esta é uma caixa de imagens. Então eu vou clicar nele, voltar aqui. Além disso, vou digitar a caixa de imagem. O que queremos é esse kit de elementos. Então, vamos arrastá-lo e soltá-lo lá. E, claro, vamos selecionar uma imagem. Eu já tinha carregado essas imagens. Então você pode fazer isso para evitar voltar ao computador para enviá-las Vou selecionar uma das imagens aqui. Insira mídia. E aí vamos nós. Então, a próxima coisa que vamos fazer é entrar no estilo para começar a estilizar as cores aqui. Corpo. Acho que a cor das etiquetas corporais está boa. Mas para o título, vamos mudar a cor para amarelo. Amarelo e, ao passar o mouse, podemos dar essa cor escura. Sim. Tudo bem, para o botão, vamos torná-lo dessa cor escura. Antecedentes. Essa cor escura. E ao passar o mouse, vamos alterá-lo para preto, amarelo. Assim mesmo. Tudo bem, então também podemos aumentar o tamanho do título. Então desmoronou que expandiu esse título de topografia, tipografia. Talvez em algum lugar lá. Vamos atualizar isso. Também vai para o raio da borda da imagem de 20, assim. E agora, o que precisamos fazer, agora que estamos satisfeitos com a aparência, é duplicar essa coluna duas vezes. Então, acima dessas colunas 12. E então vamos nos livrar desse último. Então lá vamos nós. E precisamos de algum espaçamento entre esses textos e a seção interna. Então, vamos selecionar a parte superior da margem avançada da interseção. Assim mesmo. Atualize isso. Antes de prosseguirmos, vamos mudar o texto aqui. Então, selecionando esse corpo de conteúdo, podemos mudar isso para reparos no telhado. Mude esses dois. Fixação de jardins. E vamos também mudar a imagem. Então selecione isso. Acabei de selecionar uma imagem aleatória aqui. Insira mídia. Vamos entrar nisso, fazer com que essa imagem talvez seja aquela mídia de inserção. E vamos mudar o título. Substituição do telhado. E vamos atualizar isso. Feito isso, vamos pré-visualizar as mudanças. Então, rolando para baixo. Aí vamos nós. É assim que se cria essa seção. Na próxima lição, vamos ver como criar esses efeitos antes e depois. Então, te vejo em breve. 20. 20 Crie a seção do corpo antes e depois: Bem-vindo de volta. Agora é hora de criar essas seções de antes e depois, o que eu acho muito legal. Ele oferece ao usuário uma prévia do antes e do depois de um projeto. Então, antes, depois. Sem perder tempo. Vamos voltar ao nosso editor. E, como sempre, vamos adicionar uma seção de coluna dupla porque, como você pode ver, temos esse bloco de texto e, em seguida, temos a imagem de antes e depois. Então eu vou voltar aqui. Adicione uma seção de coluna dupla. Enquanto ainda estiver selecionado. Nesta seção, vá para Avançado. Vamos dar um não, mais uma margem máxima de mil, 100. Você pode dar a ele qualquer margem com a qual se sinta confortável. Então eu vou arrastar isso aqui. E, claro, essa é a área de texto. Por isso, fornecemos soluções duradouras. Entendido, volte aqui. Deixe-me duplicar isso. E então arraste isso para lá. E como você pode ver, com o centro alinhado, eu quero que esteja alinhado à esquerda. Volte aqui, duplique isso, arraste e solte lá. E ainda tem aquele acolchoamento que definimos para a esquerda e para a direita. Então, enquanto ainda estiver selecionado, vou para Avançado e, em seguida, removerei esse preenchimento, essa margem assim. Vá para dentro com estilo, alinhado à esquerda. Agora, para adicionar essa imagem antes e depois, vou clicar nela. E aqui eu vou digitar antes e depois ou antes. Isso é feito por complementos de ordenadas Pi para Elementor. Então, vou arrastar isso para lá. Aí vamos nós. Então, vamos adicionar a primeira imagem. Onde está? Aí? Nós temos isso. Na imagem posterior. Aí vamos nós. Agora, vamos atualizar isso. E vamos pré-visualizar as mudanças primeiro. Então, rolando para baixo. Então, como você pode ver, parece um pouco diferente do que temos aqui, porque aqui é no momento em que o cursor do mouse está na imagem, ele automaticamente começa a mover essa configuração. Então essa é uma das configurações que estão voltando aqui. Vamos pré-visualizar isso. primeiro selecionar isso e depois arrastá-lo. Mas não está se movendo enquanto movemos o cursor do mouse como está fazendo aqui. Então, para mudar isso, volte aqui. Bem, isso ainda está selecionado. Opções. Mova o controle deslizante ao passar o mouse. Então, quando selecionamos isso, no momento em que o mouse está acima da imagem, isso acontece. E eu gosto desse jeito. Então, vamos atualizar isso. E podemos tornar a imagem um pouco menor ou maior, conforme quisermos. Mas, ao mesmo tempo, quero empurrar esses blocos de texto para baixo apenas para uniformizar. Deixe-me selecionar o preenchimento. Estofamento na parte superior. Eu quero que fique na vertical no centro da imagem. Assim. Vamos atualizar isso. Vamos pré-visualizar as mudanças. Então, rolando para baixo. Aí vamos nós. Então essa é a nossa imagem de antes e depois, o que eu acho legal. Agora, isso é tudo para esta lição. Na próxima lição, vamos ver como criar. Bem, isso é muito fácil de criar, mas vamos criar isso na próxima lição. Então, te vejo em breve. 21. 21 Crie a seção do corpo com roofs experientes: Ei, bem vindo de volta. Então, agora é hora de criar essas seções muito simples. Na verdade, estamos quase no final da página. E como você já deve ter adivinhado, esta é uma seção de coluna dupla. Então, voltando aqui em nosso editor, vou clicar nesta seção de mais coluna dupla. Vamos selecionar a seção avançada. Vamos adicionar uma margem na parte superior. É sempre bom manter uma margem uniforme na parte superior de cada seção. Então eu vou dar 100. Aí vamos nós. Claro que isso é uma imagem. Quero clicar e soltar a imagem lá. E porque é vertical, é por isso que o tornei um pouco estreito. Clique nisso. Vamos procurar essa imagem. Onde está? Sim, é isso mesmo. Insira mídia. E vamos dar alguns cantos arredondados. Então, enquanto ainda está selecionado, vamos entrar no estilo. Raio de fronteira 20, assim mesmo. E agora, é claro, vamos duplicar esse texto enterrado e colocá-lo lá. E esquecemos de mudar esse texto. Então, deixe-me mudar isso para técnicos qualificados. Deixe-me voltar e copiar isso. Soluções duradouras. Selecione isso, cole isso lá. E agora, copie isso e cole isso aí. Vamos duplicar esse texto. 40 logo abaixo do título. E eu quero empurrar esse rumo para baixo, certo? Vamos aumentar a altura da imagem. Vamos empurrar, vamos selecionar esta coluna e empurrar tudo para baixo inserindo o preenchimento avançado, o preenchimento superior. Você pode simplesmente digitar os números. Então, digamos 110. E vamos atualizar isso. Então, vamos analisar as mudanças. Rolando para baixo. Agora você notará que esses dois estão muito próximos. Então, voltar aqui e essa é uma das razões porque removemos o preenchimento que estava aqui por padrão. Mas também podemos selecionar a seção em si. E como é composto por duas colunas, podemos controlar o espaçamento entre as duas colunas. Então, enquanto isso estiver selecionado, vá para a lacuna de colunas de layout. Vamos escolher mais amplo. Agora, se visualizarmos isso, você notará que a lacuna é muito maior, então vamos rolar para fora. E aí vamos nós. É assim que se cria essa seção. Oh, espere, nós não adicionamos esse botão. Então, vamos duplicar esse botão. E vamos arrastá-lo até a seção. Coloque-o aí. Agora, isso significa que precisamos reduzir esse preenchimento. Então, selecione a coluna, reduza-a até que esteja equilibrada. Apenas olhe para ele. Atualize aqui. Acho que preciso reduzi-lo um pouco mais. Eu gosto desse momento. Tudo bem, vamos pré-visualizar as mudanças. Rolando para baixo. E aí está. Então, é assim que se cria essa seção. Na próxima lição, mais uma vez, vamos ver como criar a seção de depoimentos. vejo em breve. 22. 22 Crie os depoimentos da seção do corpo: E estamos de volta. Então, agora é hora de criar a seção de depoimentos. Como você pode ver, parece quase exatamente como a seção branca escolhe. Então, vamos continuar e duplicar essa seção. Voltando aqui. Duplique isso, e é por isso Elementor é tão legal de usar. Então, basicamente o duplicamos. Então, vou arrastá-lo até o fundo e soltá-lo assim que a linha azul aparecer. E também vamos dar uma margem no topo de, sim, 100. Eles têm alguma margem adequada. Mas não nos deixemos enganar. Deixe-me ver. Vamos dar um pouco mais de preenchimento aqui. Logo abaixo da margem dos títulos do formulário. Vamos dar um 80. Tudo bem, agora voltando ao final, vamos selecionar o que nossos clientes dizem. Entre aqui, selecione isso, cole isso lá. Seja aquele Ford, está aí. Mas precisamos adicionar alguma margem à direita e à esquerda. Então, enquanto ainda está selecionado, margem avançada à esquerda, duas nela. Para correr. Atualize isso. Vamos voltar aqui. Então, esses são os depoimentos agora. Então, voltando aqui, precisamos nos livrar dessa interseção. Agora, selecione isso e digite o depoimento. Depoimento, temos o depoimento padrão que vem com o Elementor, a versão gratuita. E temos elementos, crianças. O que queremos é o da Elements Kid. Arraste e solte ao ver aquela linha azul. E, por padrão, temos essas opções diferentes aqui. Eu gosto de usar este aqui, mas você pode experimentar com o resto. Então, no momento, estamos mostrando apenas um depoimento. Podemos entrar nas configurações. Vamos ver os slides para mostrar. Podemos dizer dois slides para rolar, é claro, isso é quantos, por quantos slides deve rolar. Agora, vamos trabalhar na aparência. Volte para dentro do layout. Agora vamos ao depoimento. Aqui temos uma lista dos três depoimentos. Testemunhos número um, é aqui que o nome do cliente deveria vir. Tudo bem, designação, gerente de marketing. Em qual empresa? Então, agora precisamos de alguns textos para revisão. Deixe-me pegar tudo bem, eu não consigo pegar esse texto. Deixe-me pegar esse texto. Basicamente, não temos tempo para tentar digitar um depoimento real. Tudo bem, então foi isso que Alex Brandon disse. Vamos brincar com as cores. Estilo. Se tivermos reduzido o layout. Como você pode ver, temos o estilo do conteúdo da embalagem, temos a descrição, a classificação, o ícone desenhado e os clientes. Então, vamos começar com um cliente. Cor do nome do cliente. Vamos mantê-lo tão amarelo. Cole isso aí e agora está amarelo. Ao passar o mouse, podemos torná-lo branco assim. Também podemos brincar com a topografia ou o tamanho do nome. Então, vou voltar ao padrão. Tudo bem, então designação de clientes. Vamos dar uma cor branca. Ao passar o mouse, podemos dar a cor amarela muito clara. É como um inverso. Então, lá vamos nós. Imagem do cliente, você pode brincar com a imagem do cliente. Eu só gosto das configurações padrão da imagem. Vamos ver a descrição. A cor é, obviamente, boa. Mas você pode alterá-lo para qualquer cor que quiser. Então, vou deixá-lo em preto. Então, também temos essa citação aqui. Podemos mudar a cor para a cor que você quiser. Eu simplesmente gosto de citações de cores fracas. E aí está. Então, voltando ao conteúdo, ao depoimento, Brandon, vamos expandir isso. Podemos mudar o avatar do cliente. E eu forneci algumas imagens para o depoimento. Aqui vamos nós. Esse é Brandon. Vou entrar em colapso. Alex, expanda isso. Lisa sorrindo. Novas mídias de arte. E talvez vamos encontrar alguns outros textos para fornecer lá P que me permitam colocá-la de forma que foi isso que ela disse. Ali mesmo. Lisa Smiley. Oh, espere, vamos adicionar o avatar dela. Essa é a Lisa. Não, essa é a Lisa. Sorria. E vamos recolher Lisa e adicionar uma terceira pessoa, a Nord VPN. Então, vamos dar o depoimento deles aqui. Aí vamos nós, e seu avatar. Assim, também podemos determinar a classificação que eles deram ao site. Então, talvez esse cara nos tenha dado uma classificação de quatro em cinco. Atualize isso. Então, como você pode ver, isso é quatro em cinco. Então, vamos voltar ao estilo. Layout interno. Queremos dar a isso um canto arredondado. Então, 20, sem mais nem menos. Atualize isso. Vamos pré-visualizar as mudanças. Rolando para baixo até o final. E é isso que temos. Então, é assim que se cria a seção de depoimentos. Ao concluirmos esta página, vamos criar essa seção de linha direta de emergência antes de criarmos a pasta. Então, nos vemos na próxima lição. 23. 23 Crie o número de emergência da seção do corpo: Ei, bem vindo de volta. Então, agora é hora de criar a seção de linha direta logo abaixo dos depoimentos. Então, aqui estamos. Voltando para cá. Vamos criar uma seção, seção coluna única, exatamente assim. E agora temos uma coluna dentro dessa seção. Então, vamos mudar a cor da própria coluna para amarelo. Então, vou selecionar o estilo da coluna. Deixe-me ir e pegar esse amarelo. Enquanto isso ainda estiver selecionado, vou para estilo, plano de fundo e cor assim. Agora, vamos duplicar esse texto. Eu quero duplicar isso porque não quero ter que mudar a cor lá. Então, vamos copiar isso. Selecione isso. Aqui. Vamos editar esse centro alinhado. Então, podemos duplicar isso. Enquanto isso ainda estiver selecionado. Vamos ao estilo. Mude a cor para branco. Tipografia, torne a fonte menor. E vamos selecionar a coluna e depois avançar. Vamos até a margem. E margem esquerda, talvez algo como 100. Margem direita. Cem. Vamos para o raio da borda do estilo. Vamos trabalhar no preenchimento. Blusa acolchoada. Vamos empurrar enquanto olhamos para ela. Talvez 35, 35 abaixo também. Eu acho que está tudo bem. Então, vamos copiar esse texto aqui. Cole isso enquanto isso estiver selecionado. E agora é hora de empurrar essa parte amarela para cima. Portanto, selecione a coluna em si, margem superior precisa ser negativa até algum lugar lá. Atualize isso. E vamos pré-visualizar as mudanças. Então, rolando para baixo até o final. E aí está. Então, é assim que se cria essa seção. Na próxima lição, vamos trabalhar nessa pasta. Então, te vejo em breve. 24. 24 Crie a seção do rodapé: Bem-vindo de volta. Agora que terminamos com a seção do corpo, é hora de trabalhar na seção do rodapé. E, assim como fizemos com a seção de cabeçalho, vamos criar a pasta separadamente, não aqui, onde estamos editando a seção do corpo. Então é hora de sair dessa parte. Então, vou clicar neste menu de hambúrguer. Em seguida, a saída será redirecionada para o backend. E a partir daqui, podemos ir para a pasta de cabeçalho infantil do Elements. E agora podemos dizer Adicionar novo. Lembre-se de que primeiro criamos o cabeçalho. Agora é hora de criar a foto. Vamos dar um nome a ele. E , claro, o tipo agora é a pasta de que precisamos. Nós o tornamos visível em todo o site. E ele precisa estar ativo. Quando você tem várias pastas ou cabeçalhos, você pode ativar alguns, que significa que eles não estarão visíveis no site. Tudo bem, então vamos continuar e salvar as alterações. E aí vamos nós. Então, vamos editar. Em seguida, clique em editar o conteúdo e será redirecionado para o front-end. E a partir daí, podemos construí-lo da mesma forma que construímos o cabeçalho. Então, aqui estamos. Como você pode ver em nosso site de referência, ele tem três colunas. Então, vamos adicionar uma seção de coluna tripla. Aí vamos nós. Lembre-se de que você sempre pode simplesmente redimensionar essas colunas. Eles não são rígidos. Então, vamos começar adicionando uma imagem aqui para que possamos adicionar um logotipo. Selecione isso, selecione o logotipo, insira a imagem. A próxima coisa que precisamos fazer é adicionar esse texto, uma breve descrição. Então, entrando aqui, agora, a coisa boa sobre o Elementor é que se, por exemplo eu estou editando esta página aqui na página de edição, ou digamos que eu esteja no editor. Posso copiar um elemento com seu conteúdo de uma área. Clique em qualquer lugar nesta cópia de texto. Vá para outra página ou área em que você está usando o Elementor no mesmo site. Clique e, em seguida, cole. Diz que é fácil assim. Eu só queria te mostrar isso, mas deixe-me deletar isso. Vamos adicionar um editor de texto. A próxima coisa que precisamos fazer é criar. Vamos criar esses links rápidos. Então, vou clicar nele, Adicionar um título de texto. E então vamos até aqui e pegar essa cor. Copiar. Enquanto isso estiver selecionado, estilize. Mude a cor. E depois links rápidos. Então, vamos clicar nisso. Adicionar lista de páginas. Lista de páginas, arraste-a abaixo do título Links rápidos. Agora podemos adicionar um item. Então, basicamente, estamos adicionando páginas como itens de lista aqui. Então, para o primeiro item, expanda isso. Vamos chamá-lo de lar. Casa. Agora, nesse menu suspenso, selecione a página inicial. Prolapsou esse item. Você pode ligar para isso sobre. Então, basicamente, você pode adicionar qualquer página como um item de menu aqui. Então, selecione isso, selecione a página sobre. Vamos adicionar mais um contato, página de contato. E é assim que parece. Então, entrando no estilo, se reduzirmos a lista em si, como você pode ver, teremos ícones. Eu não preciso de ícones. o texto para que possamos editá-lo. Cor dos textos. Vamos dar a ele aquele azul escuro. E sobre a pobreza, ao pairar, vamos dar a ela aquele amarelo. Simplesmente assim. E o espaçamento aqui é bem pequeno. Então, deixe-me selecionar a seção em si. Lacuna nas colunas. Eu quero que seja mais amplo. Simplesmente assim. Quero aumentar isso porque há muito espaço aqui que não estamos usando. Atualize isso. Vamos pré-visualizar as mudanças primeiro. Tudo bem, agora você notará que há muito preenchimento nessa imagem no logotipo. Então, voltando aqui, selecione o logotipo, remova a margem e reduza a margem esquerda até esse ponto para que fique alinhada com o texto. Vamos atualizar isso. Perfeito. Agora, talvez você queira ter duas colunas de links aqui. Caso você tenha muitos links que deseja compartilhar. Então você pode entrar aqui e escolher um cruzamento. Coloque-o aí. E como ele tem duas colunas, escolha esse elemento e solte-o lá. E você pode duplicar isso. Removido o último. E agora aqui você pode ter mais links de página. Então, por exemplo se você tem uma página de direitos autorais, se você tem uma página de Termos e Condições, você pode tê-la nesta coluna. Então, é claro que agora isso está selecionado. Podemos editar esses dois termos e condições. Licenciamento, talvez política de privacidade. E você pode redimensioná-lo adequadamente. E agora você tem duas colunas. Então, vamos atualizar isso. E vamos pré-visualizar as mudanças. E aí está. A próxima coisa que precisamos fazer é criar esses formulários de inscrição. Deixe-me copiar isso. Duplique isso, arraste e solte lá. Selecione isso, cole isso lá. Vá para a tipografia de estilo e redimensione-a adequadamente. Entre aqui, selecione esse texto. Duplique isso. Arraste isso para lá. Então eu posso arrastar isso. E, claro, finalmente, precisamos adicionar esse formulário. E como você já deve ter adivinhado, esta é uma forma de formulador. Então, vamos ao backend para criá-lo. Então, primeiro de tudo, deixe-me dizer isso. Pré-visualize as alterações. Aí vamos nós. Então, vamos entrar em nosso painel. Aqui, ainda falaremos sobre a fórmula mais tarde. Vamos clicar em Formulários. E agora você pode ir para Criar. Vou usar este formulário de inscrição pré-fabricado para o boletim informativo. Continuar. Formulário de inscrição, Create. E aí vamos nós. Portanto, ele precisa do primeiro nome e do e-mail. Então, vamos pré-visualizar isso. E, claro, tem cores e configurações padrão . Feche isso. Vamos para Aparência, negrito, traje. Vamos até o botão enviar. É claro que precisamos disso. Amarelo Copie isso, cole isso lá ao passar o mouse. Queremos que seja dessa cor. É sempre bom ter um conjunto consistente de cores de marca. Pré-visualize isso. Aí vamos nós. Agora vamos trabalhar no campo. Entrada. A cor da borda. Eu quero que seja, foi o triplo CE, CE, o ECE, assim. Ao passar o mouse. Podemos fazer com que seja dessa cor amarela. Em foco. Também pode ser aquela cor amarela. Publique. Vamos copiar esse código curto. Volte para nossa página aqui, nosso editor. Aqui está o editor. Vamos adicionar um elemento de código curto. Aqui vamos nós. Arraste e solte lá. Aqui vamos nós. Então, vou colar esse código curto aqui. E aí vamos nós. Portanto, essa margem é um pouco grande demais, então vou selecionar a margem avançada do texto, na parte inferior. Reduza um pouco. E vamos também adicionar alguns ícones de mídia social. Ícones de mídia social. Vamos deixá-los lá. E isso traz esse equilíbrio aqui para cobrir esse espaço Vamos empurrar esses ícones de mídia social para a esquerda, assim como aquela atualização. E vamos pré-visualizar as mudanças. Então, lá vamos nós. Podemos transformar isso em um link para a página inicial. Então, vamos fazer isso rapidamente. Selecione esta imagem como de costume, vá para Conteúdo, link, URL personalizado. Deixe-me escolher o URL inicial. Simplesmente assim. Atualizar. Pré-visualização. Agora, se eu clicar aqui, ele nos levará para a página inicial. E se rolarmos até o final, vamos ver se temos a pasta. Aí vamos nós. Mas agora precisamos de algum espaçamento entre esses dois. Então, deixe-me clicar em Editar com Elementor para que possamos editar a página em si, a seção do corpo, rolando até o final. Tudo o que precisamos fazer é selecionar esta seção que está realizando a emergência. Vá para a parte inferior da margem avançada. Vamos dar 100. Eu paguei isso. Pré-visualização. As mudanças. Role até o final. E aí vamos nós. Portanto, temos um bom espaçamento aqui. Você pode aumentá-lo ou reduzi-lo, se quiser. Agora, com isso, é assim que se cria a landing page ou a página inicial. Na próxima lição, vamos ver como criar o resto do site. Então, continuaremos em breve. 25. 25 Crie a página sobre nós: Estamos de volta. Agora que terminamos a página inicial, é hora de passar para a página Sobre nós ou a página Sobre. E eu estou aqui no meu painel. Mas antes de começarmos a construí-lo, vamos dar uma olhada no site de referência. Ou para a direita, então rolando para baixo. Aí vamos nós. Então é isso que estamos construindo sem perder tempo. Vamos voltar ao nosso painel. Vamos entrar nas páginas. Lembre-se de que já criamos as páginas. Então, agora a única coisa que precisamos fazer é falar sobre Eddie. E aqui estamos. Então, vamos configurar a página como fizemos com a página inicial do modelo. Vamos escolher a largura total, o Elementor, a largura total. Vamos entrar nas configurações do Astro. Escolha largura total, barra lateral esticada, sem barra lateral. Em seguida, vamos desativar o cabeçalho e o rodapé. Atualize isso. E agora está atualizado. Vamos clicar em editar com o Elementor para que possamos acessar o front-end e começar a criá-lo visualmente. E aqui estamos. Obviamente, lembre-se de que agora não podemos editar essa foto ou cabeçalho a partir daqui porque não foi aqui que a criamos. Mas eles estão visíveis porque já os criamos e estão visíveis em todas as páginas. Então, agora a primeira coisa que precisamos é criar essa seção de heróis. Então, voltando aqui, é uma seção de coluna única. Aí vamos nós. E primeiro precisamos adicionar a imagem de fundo. Então selecione, enquanto esta seção ainda está selecionada, vamos entrar no estilo de fundo. Vamos selecionar uma imagem. Acho que essa é a imagem, insira a mídia. E, claro, vamos incluir esses blocos de texto. Então, o que queremos fazer é clicar nesse ícone aqui arrastar um bloco de texto para lá. Volte aqui, arraste algum texto para lá. E então precisamos aumentar o preenchimento na parte superior e inferior desta seção. Então, podemos ter esse quarto aqui e aqui embaixo. Então, vamos voltar aqui. Selecione uma seção, preenchimento avançado na parte superior. Vamos tentar 100, algo desse tipo. Enquanto ainda estiver selecionado. Entre em estilo, posição, centro, centro. Acho que gosto disso. Não queremos que isso se repita. E para o tamanho, escolha a capa, como de costume, isso significa que ela vai da borda da tela até a outra borda da tela. Não haverá espaços em branco nas laterais, como fizemos com a página inicial. Então, lá vamos nós. Deixe-me copiar isso mais uma vez. E agora é hora de colar aqui. Vamos colocá-lo no meio. Lembre-se de que você precisa usar seus próprios textos porque fui só eu criando um texto de espaço reservado. Empurre-o para o centro. Simplesmente assim. Agora, selecionando esta seção mais uma vez, vamos adicionar uma sobreposição de plano de fundo, um plano de fundo e, em seguida, teremos uma sobreposição de plano de fundo. E podemos usar uma cor preta. Então, vamos escolher o preto. Isso garante que o texto acima da imagem se destaque mais. Como você pode ver agora, ele se destaca. Vamos selecionar o texto. Entre no estilo e, em seguida, vamos dar um gradiente. Eu vou voltar e escolher essa cor amarela. Copie isso para a cor inferior. E então, para a cor superior, é claro, tem que ser uma cor esbranquiçada. Enquanto ainda estamos aqui. Reduza os gradientes, expanda o título. Vamos entrar na tipografia para aumentar um pouco o tamanho sobre nós. Vamos selecionar isso para alterá-lo para branco. Atualize isso. Vamos pré-visualizar as mudanças. Aí está. Portanto, a seção de heróis será concluída na próxima lição. Vamos ver como criar nossa história, nesta seção aqui. Então, te vejo em breve. 26. 26 Construa a página sobre nós Nossa história: Olá. Bem-vindo de volta. Vamos continuar trabalhando na página Sobre nós. A próxima coisa que queremos fazer é criar essa parte aqui, nossa história. E tem esses dois fundos escuros nessas duas colunas, missão e visão. Então, voltando aqui, vamos selecionar uma seção de coluna dupla, porque, como você pode ver, esta é uma coluna dupla, uma coluna de bloco de texto e a coluna de imagem. E essa coluna de bloco de texto tem uma interseção com coluna dupla. Então, voltando aqui, primeiro, vamos adicionar uma imagem. Clique nesse sinal e arraste uma imagem para lá. E vamos selecioná-lo. Então eu acho que essa era a imagem. Inserir mídia. Obviamente, podemos arrastar isso para tornar a imagem menor e criar espaço para o texto. Este ícone está aqui para arrastar e soltar um título. Eu esqueci de fazer disso um H1. Então selecione Sobre nós. Faça dele um H1. Isso é um H2. Está tudo bem. Vamos mudar isso para nossa história. Voltando para cá. Enquanto isso estiver selecionado, cole-o lá. Tudo bem, deixe-me copiar isso. Copie isso. Clique nesse ícone. Arraste o editor de texto até esse ponto. Clique duas vezes aqui, cole esse texto lá. E você notará que o texto está muito próximo da imagem. Então, vamos selecionar a seção. E na lacuna de colunas, vamos selecionar mais amplo para aumentar esse espaçamento. Agora vamos trabalhar na cor da nossa história. Deve ser dessa cor escura. Copie esse estilo enquanto ainda estiver selecionado. Cole essa cor lá. Clique em qualquer lugar aqui para se livrar dessa topografia. Vamos aumentar o tamanho até esse ponto. Dê a ele um peso de 900. Simplesmente assim. Agora, para adicionar a coluna dupla, vamos voltar aqui. A interseção tem essas duas colunas. Claro, vamos entrar aqui e pegar nossa visão. Copie isso. Vamos duplicar isso. Arraste-o até lá. Deixe que isso mude isso para nossa visão. Vamos reduzir o tamanho. Talvez 35. Inserir o conteúdo do site e colocá-lo no centro. Vamos fazer disso um H3. Porque isso é um H2. H3, estamos seguindo a hierarquia nos cabeçalhos de acordo com as diretrizes de HTML. A próxima coisa que queremos fazer é escolher a missão. Duplique isso, arraste-o abaixo da nossa visão. Clique duas vezes nele e cole lá. O estilo ficaria no meio. Tudo bem, agora o que queremos fazer é selecionar essa coluna que contém esses blocos de texto. Entre com estilo. Precisamos fornecer um plano de fundo. Então, cor de fundo. Então, deixe-me escolher essa cor, copiar e colar lá. Agora precisamos dessas cópias amarelas que selecionam o título. Estilo. Cole isso aí. Certo? A próxima coisa que queremos fazer é facilitar enquanto a coluna ainda está selecionada, clique com o botão direito do mouse e copie. Em seguida, selecione essa coluna. Clique com o botão direito no estilo de colar Tudo bem, agora o estilo está colado. Vamos duplicar isso. Coloque-o lá. Duplique o texto. Arraste isso para lá. Agora vamos mudar esse corpo de texto para branco. Selecione isso, mude para branco. Em seguida, é claro, selecione essa coluna. Fronteira. Vamos dar a ele um raio de borda de 20. O mesmo caso se aplica a isso. Selecione o treinamento de borda em estilo de coluna. Agora precisamos criar algum espaçamento entre as duas colunas. Portanto, enquanto essa coluna ainda estiver selecionada, entre na margem avançada. Remova esse link para que possamos editar células individuais. E queremos aumentar a margem esquerda, essa margem esquerda, para algo como dez. Isso empurra essa margem do lado esquerdo para dentro. Queremos fazer o mesmo com esta coluna. Então, enquanto estiver selecionado, vá para a margem. Remova isso. Em seguida, aumente a margem direita até dez. Simplesmente assim. E agora observe que precisamos ter um pouco de acolchoamento aqui na parte superior. Então, enquanto ainda está selecionado, quebre isso. E então vamos aumentar a margem superior na parte superior. O acolchoamento superior, algo como 25 para o lado. 2020. E a margem do imposto já está criando espaço aqui. Como você pode ver, esta caixa azul está empurrando essa parte para baixo. Mas podemos selecionar o texto, ir para Margem avançada, na parte inferior. Reduza essa margem. E então, enquanto essa coluna ainda estiver selecionada, vamos aumentar o preenchimento inferior para 25. Então, agora a parte superior e inferior têm um acolchoamento uniforme. E vamos repetir o mesmo para esta coluna. Então, preenchimento, 25, 25 e treinamento. E agora vamos selecionar esse texto e reduzir sua margem inferior. Simplesmente assim. Atualizar. Suas mudanças para mencionar Michelle. Ei, que esquecemos de pegar essa imagem ou cantos arredondados. Então, selecione o raio da borda desse estilo de imagem. Simplesmente assim. Depois, podemos arrastar isso um pouco para aumentar a imagem. Atualize isso. Vamos pré-visualizar as mudanças. Tudo bem, então aí está. Mas agora observe que esse texto está muito próximo da seção de heróis, então podemos empurrá-lo um pouco para baixo. Na verdade, podemos derrubar toda a seção. Então, voltando aqui, selecione a seção. Margem avançada no topo, talvez 50. Atualize isso. Pré-visualize as alterações. Sim, então agora eu gosto de onde está. E é assim que se cria essa seção. Na próxima lição, vamos ver como criar o que oferecemos. E, como você pode ver, temos esse belo efeito de flutuação. Vamos ver como criar essa seção em breve. Te vejo em breve. 27. 27 Crie a página sobre nós O que oferecemos: O que oferecemos, vamos criar essa peça. Então, voltando ao nosso editor, adicionarei uma única coluna. Sim, é uma seção de coluna única como essa. E essa seção de coluna única tem uma interseção com três colunas, como você pode ver aqui. Então, estamos adicionando uma interseção como fizemos com esta seção. Então, voltando aqui, primeiro de tudo, vamos duplicar isso. Arraste e solte aqui. Também é uma duplicação disso. E arraste-o e solte-o abaixo do título. Como você pode ver, esses dois estão muito próximos. Então, vamos empurrar para baixo essa seção inferior. Selecione a seção, coincida na melhor das hipóteses. Remova esse link. E, claro, vamos dar talvez 100. Simplesmente assim. Agora, vamos empurrar isso para o centro selecionado em Centro de conteúdo. E isso sob o alinhamento central de estilo. Vamos voltar aqui. Quero pegar esses textos que oferecemos. Selecione aquele rosto feito em seu Trollope que selecionou esse conteúdo. Cole aí. E agora é hora de adicionar nossa seção de coluna tripla. Então clique nesse ícone, insira uma interseção. No momento, ele tem duas colunas. Não se preocupe, vamos trabalhar em apenas uma coluna e duplicá-la duas vezes. Então, entrando aqui. Na verdade, o que podemos fazer é duplicar isso e arrastá-lo logo abaixo desses textos. E podemos editar isso em vez de trabalhar nessa nova interseção. Então é hora de inverter as cores. O fundo precisa ser amarelo. Então, deixe-me selecionar esse texto. Escolha essa cor. Em seguida, selecione a coluna em si, o estilo e o plano de fundo. Me dê essa cor amarela. Agora, vá para esse estilo de coluna, essa cor. Copie isso, selecione esse estilo de texto, cor básica lá. Então, agora invertemos tudo. O texto é preto, então tudo bem, então vamos lá. A próxima coisa que precisamos fazer é duplicar isso duas vezes. E eu quero remover esse último. Assim como aquela atualização. Mas agora lembre-se de que duplicamos essa coluna que estava à esquerda e tinha margens direitas. Isso significa que todos eles têm margens corretas e, como você pode ver, não estão tocando a borda. Precisamos ter a margem desta à esquerda, não à direita. Então, selecione este e entre em avançado. Essa margem direita precisa ser zero e observe isso. Então é zero. E para a esquerda, dez. Então, agora isso se aplica à esquerda. E agora, para este, ele já tem uma margem à direita. Vamos também dar uma margem à esquerda de dez. Então, agora está equilibrado. Vamos escolher alguns desses textos. 25 anos atendendo clientes. Vamos escolher isso onde estão os conteúdos de especialistas certificados. Finalmente, oferecemos garantia. Tudo bem, agora a única coisa que resta são os efeitos de flutuação. Então, selecionando qualquer uma das colunas, como queremos que seja branca. Sim. Lembre-se de que o texto deveria ser preto ou cinza escuro. Então, vou copiar esse estilo de texto. Selecione esse texto. Estilo de colagem. Selecione esse texto e clique com o botão direito do mouse no estilo de colagem. Agora, ao passar o mouse, isso está mudando para branco e o texto ainda está visível. Precisamos fazer o mesmo para isso. Então, selecione esse estilo de coluna ao passar o mouse, cor, branco. E, finalmente, para este, estilo ao passar o mouse, estilo de fundo colorido. Por quê? Atualizar isso? E vamos pré-visualizar as mudanças. Certo, então rolando para baixo. Aí vamos nós. Então, é assim que se cria essa seção. Na próxima lição, vamos ver como criar essa seção. vejo em breve. 28. 28 Crie a página sobre nós: E bem-vindo de volta. Então, agora é hora de criar essa seção. E como você deve ter adivinhado, vamos simplesmente copiar alguns desses elementos para a própria seção , porque esse é um dos principais poderes do elementar. Ele permite que você copie elementos para outra seção que você está criando. Então, vamos clicar em mais. É uma seção de coluna dupla. Embora essa seção ainda esteja selecionada, vamos dar a ela uma margem máxima de 100. Assim mesmo. Agora, vamos dar uma imagem de fundo. Sim, vamos dar uma imagem de fundo. Enquanto estiver selecionado. Estilize o plano de fundo, clique no sinal de mais ali mesmo. E eu vou escolher essa imagem. É claro que agora precisamos adicionar uma imagem nessa coluna. Essa imagem. Clique nesse sinal de adição, solte o elemento da imagem lá e isso expande a seção. Então, voltando para a seção, vamos para a posição. Vamos tentar o centro. Centro. Não, não é isso que queremos. Centro inferior. Sim. É isso que queremos. Recolha o fundo, dê a ele uma sobreposição de fundo preto. Então selecione isso e depois preto. Clique em qualquer lugar aqui. Para se livrar disso. Então, vamos aumentar o poder dessa sobreposição de fundo até esse ponto. Então, vamos selecionar isso para mudar a imagem. Então essa é a imagem. E vamos dar um canto arredondado. Portanto, embora ainda esteja selecionado um raio de borda de estilo de 20, também vamos aumentar o preenchimento na parte superior e inferior. Então, enquanto esta seção é selecionada, roteamento avançado, 50 na parte inferior, 50 na parte superior. Agora vamos duplicar esse texto. Secou isso lá. Acho que é de cor amarela. Sim, é amarelo. Então, vou escolher isso com estilo. Copie essa cor. Selecione esse estilo. Cole aí. Vamos duplicar o bloco de texto. Coloque-o lá, e é de cor branca. Então, enquanto ainda estiver selecionado, vá para estilo, cor do texto, branco. Jersey tab é um apelo à ação. Sim, é verdade. Então, vamos entrar aqui e dizer que selecione este botão. O botão lá dentro. E enquanto ainda estiver selecionado, vamos mudar o texto para falar. Fale conosco. Obviamente, você fornecerá o link aqui. Então, se você quiser que ele abra em uma nova guia, clique nesta roda dentada. Selecione abrir em uma nova guia. Então coloque um link dizendo que você quer que esse botão redirecione as pessoas para escrever aqui dentro do estilo, quer remover esse preenchimento, o preenchimento esquerdo. Vamos dar 50. Certo 50, top 20. Assim mesmo. Para o raio da borda, vamos tentar 15. 15 está bem. Também podemos ter um botão quadrado, se você quiser. Você também pode ter um canto afiado, se quiser, removendo todos eles. Agora, como você pode ver, a cor é verde. Então, vamos selecionar esse texto. Copie isso. Selecione o botão. Cole lá. Ao passar o mouse. Queremos que seja branco. Então, por diante, a cor do fundo deve ser branca. E os textos enquanto ainda estão em Hover devem ser pretos. Assim mesmo. Atualize isso. E vamos pré-visualizar as mudanças. Tudo bem, então aí está. É assim que se cria essa seção. Na verdade, estamos quase terminando. Na próxima lição, vamos ver como criar esses números. Eles são animados. Então, se eu pudesse atualizar esta página, quero atualizá-la enquanto estamos no topo. E quando rolamos para baixo, esses números devem ser animados dessa forma. Então, vamos ver como criar isso na próxima lição. Te vejo em breve. 29. 29 Construa a página de nós Vamos Falar de Números (Atualizados): Bem vindo de volta. Esta é a última seção desta página. Então, vamos ver como criar. Ótimo retorno ao nosso editor. Logo abaixo desta seção, vamos ter uma seção de coluna única. Nós vamos. Vamos dar uma margem máxima. Ao selecionar a margem superior de 100. Ele fez isso com a minha lista. Em seguida, clique no sinal de mais e vamos adicionar uma interseção. Na verdade, está acima da interseção. Precisamos adicionar um título. Então, essa cor mais escura. Então, vou clicar em duplicar isso, depois arrastar e soltar na seção de Bob. Então, está dentro desta seção. Esta seção. Tudo bem, então o que deveria dizer? Vamos falar de números. Então selecione isso. Você percebe que o lado direito aqui, esse sinal de mais. E vamos escolher um contador redondo. Então vamos arrastá-lo e soltá-lo lá. E, como você vê, já está animado. Então, a única coisa que precisamos fazer é que ele fornece um substantivo específico que devemos ter usado. Então, sargentos completos. Então, depois de fazer isso, enquanto ainda estiver selecionado, basta clicar em qualquer lugar dentro dele. É claro que isso é o que queremos fazer. Eles mudam a cor do plano de fundo para amarelo. Então, selecione a coluna em si, estilo, cor de fundo. Vou copiar isso amarelo. Cole aí. Vamos mudar as cores desses números. De qualquer forma, liga, só porque então selecione esse contador, LMS. Agora é o número do estilo do lado do aconselhamento. Vamos chamá-la de cor escura. Cole aí. é o título dessa mesma cor escura. Portanto, é um pouco mais visível. E o que precisamos fazer é duplicar isso duas ou três vezes, muitas vezes conforme você quiser exibir. E vamos atualizar isso. Vou selecionar essa coluna. Vá para Avançado. À esquerda, eu quero cinco ou dez. E à direita, quero selecioná-lo. Copiar. Selecione este. Estilo. Tudo bem, então agora vamos selecionar a menor higiene. À direita. Queremos usá-lo no chão, margem dez. Então, agora esse espaço está em todo o lado. A próxima coisa que queremos fazer é dar um canto arredondado. Como de costume, selecione a borda da coluna. Engraçado. A borda do laço de lactato. Então, como essa fronteira. No próximo trimestre, pronto. Agora, vamos continuar jogando. Então, o segundo título aqui significa ter clientes. Então, enquanto isso é selecionado, os membros da equipe, como esses, são 53 clientes satisfeitos em número. Talvez tenhamos selecionado isso. Temos 3.000 mais 8.000. Vamos dar um sufixo de fio dental. Clientes de milhares de fracassos. Ou também podemos dizer, selecione isso, entre no conceito 320 projetos. E, finalmente, o último, digamos marrom, para oficiais brancos selecionando o último. Então, vamos antes de pré-visualizarmos as mudanças, ok. Vamos revisar as mudanças. Mas há algo que eu quero te mostrar , rolando para baixo. Lá vamos nós. Então, o que eu queria mostrar é que não adicionamos a margem abaixo dela, então ela está voltando aqui. Selecione a seção Excel. Margem, parte inferior. Cem, já pagaram, isso. Mudanças. Espalhando-se para baixo. Vamos, então temos um bom espaçamento. Então é assim que se cria essa página. E, basicamente, como você notou, usamos os mesmos princípios que usamos na página inicial. Isso significa que se você quiser ver mais páginas, talvez tenha uma página de serviços ou queira criar uma página de destino especial vendendo um determinado produto com desconto, basta aplicar o mesmo JC. Arrastar e soltar. Aqui foi fornecida uma nova página. Você deveria fazer isso como mentor em casa. Páginas. O anúncio será exibido aqui e você poderá fazer edições. E então eu vou começar a pintar. Na próxima lição. Lição sobre como criar a página. 30. 30A Crie a configuração da página da página do blog: E bem-vindo de volta. Então, agora é hora de trabalhar na página do blog. Então, como a página do blog funciona é se eu pudesse simplesmente clicar com o botão direito do mouse em ver o link aberto em uma nova guia para que possamos ir até o front-end e dar uma olhada. Então, esta é a página do blog. A página do blog funciona puxando as postagens do blog que você postou ou publicou e exibindo-as aqui mesmo. Portanto, sempre que você publicar uma nova postagem no blog, ela será exibida automaticamente aqui. Então, precisamos dizer ao WordPress: Ei, sabe o que, toda vez que eu publico uma nova postagem no blog exibida aqui. Então, como fazemos isso? Vamos voltar ao nosso painel. E vamos clicar em Editar. Então, como de costume, vamos começar com um modelo que quer ter a largura total. Vamos entrar nas configurações do Astro ou na largura esticada. Barra lateral. Sem barra lateral. Vamos fazer com que esses cabeçalhos e rodapés coloquem nossos dados. E embora seja Atualização, agora já está atualizado. Mas deixe-me mudar para essa outra guia aqui que acabamos de ver. Como você pode ver, esse é o cabeçalho e essa é a pasta que desativamos e que é fornecida pelo Astra. Portanto, se não os desativarmos, suas páginas sempre terão esse cabeçalho e essa pasta. E já criamos uma pasta aqui. Não precisamos disso. É por isso que conseguimos esses dois agora nesta página, porque com essa tabela , se eu atualizar a página, agora eles não estarão visíveis. É isso que queremos. Assim, podemos ter espaço livre para realmente criar visualmente a página com o Elementor. Tudo bem, agora que isso está feito, vou fechar esta página. Agora. Nesta página, clicarei em editar com o Elementor para que possamos começar a trabalhar com o Elementor. E aqui vamos nós. Então, é claro, primeiro de tudo, vamos adicionar uma seção de largura total. E enquanto a seção ainda estiver selecionada, entre fundo do estilo. É claro que precisamos de uma imagem. E eu ainda vou usar essa mídia de inserção. E agora, porque eu quero que seja exatamente como a seção de heróis que usamos na página sobre. Há outra maneira de criar modelos que talvez você queira reutilizar sempre em várias páginas. Então, se pudéssemos voltar rapidamente ao painel. Vá para dentro das páginas. Na página sobre, vamos clicar em editar com o Elementor. Agora que estamos aqui no editor da página sobre, e ela tem elementos que talvez queiramos usar em outras páginas. Tudo o que precisamos fazer é ir direto aqui para este menu. Salve como modelo. E vamos dar um nome a ele. Página, modelo de página da web. Claro que você daria a ele um nome específico de sua preferência. Clique em Salvar. E agora está disponível para ser usado ou inserido. Agora, vou sair daqui. Então, podemos deixar isso no painel e eu voltarei para onde estávamos editando a página do blog. Deixe-me remover isso. E agora, se clicarmos nesse ícone de pasta aqui, elementar, carregaremos seus próprios modelos, mas queremos meus modelos. Esses são os modelos que você salvou. São modelos que você criou anteriormente. E agora temos o modelo de página da web que criamos, clique em Inserir e aplicar. E aqui estamos. Como você pode ver, temos exatamente o mesmo conteúdo e layout que tínhamos para a página Sobre. Mas é claro que podemos manter apenas o que queremos. Então, vou me livrar dessas outras seções porque só estamos interessados em tê-las. Eles são, então vou clicar em Atualizar. E vamos editar isso no blog. Vamos aqui para nossa referência. Deixe-me clicar no blog. Leia os artigos mais recentes da nossa equipe de editores, copie, volte aqui, selecione isso, cole lá, atualize isso. E agora, para exibir os blocos dessa forma. Então, como você pode ver aqui, temos quatro postagens no blog. Essas são postagens de blog que eu criei para este site de amostra. E o WordPress basicamente os retira do painel e os exibe aqui. Então, vamos voltar aqui. Clique neste sinal de mais. Vamos selecionar uma única seção de coluna. Enquanto ainda estiver selecionado. Entre no top 100 de margens avançadas. E agora, aqui, vamos adicionar um blog. postagem do blog por elementos mantém o botão de arrastar e soltar lá. E agora ele está exibindo as postagens de blog padrão que vêm com o WordPress. E eu vou mostrar para você. Então, como você pode ver, HelloWorld, bem-vindo ao WordPress. Esta é sua primeira postagem. Atualize isso. E vamos pré-visualizar as mudanças. Então, lembre-se de que na verdade não criamos nenhuma postagem de blog nesta página. Então, como mencionei , está retirando esse conteúdo do back-end. Então, agora precisamos voltar ao backend e criar algumas postagens no blog, publicá-las e elas começarão a aparecer aqui. 31. 30B Crie a página do blog: Vamos voltar para dentro do painel. E aqui temos postagens. Nós tínhamos páginas aqui, aqui temos postagens. Então clique em postagens. É aqui que você encontra a lista de postagens que você tem. Como você pode ver, aqui está a postagem do Hello World. Se eu visualizá-lo rapidamente em uma nova guia. É assim que parece. Deixe-me encerrar isso. Então, eu quero selecionar isso e movê-lo para a lixeira. Candidate-se. Deixe-me encerrar isso. Agora. Eu quero dizer Adicionar novo. Então, vamos adicionar uma nova postagem. Vamos dar um nome a ele. Por exemplo, ideias de coberturas para proprietários de casas. Então esse é o nome da nossa postagem no blog. Vamos escolher um modelo padrão. Elementor, largura total. Agora, a imagem que você pode ver aqui é uma imagem em destaque. Então, enquanto ainda estamos nessas configurações, temos a imagem em destaque, selecione a imagem em destaque. E vamos selecionar esta imagem em destaque do conjunto de imagens. Aí vamos nós. Voltando aqui, vamos para as configurações astrais. Também podemos esticá-lo em toda a largura. Sem barra lateral. Esta tabela, como sempre, publica, publica. Agora, se voltarmos aqui para nossa página em que estávamos editando a página do blog, o arquivo do blog, e atualizarmos a página. Você pode ver agora que ele está exibindo a postagem do blog que criamos. Voltando para cá. O que queremos fazer, como você pode ver aqui, temos alguns textos, um pouco de texto. Então, voltando aqui, o que precisamos fazer é preencher a postagem do blog com seu conteúdo. Estas são as postagens do blog, lembre-se, então edite com o Elementor. Aqui, podemos simplesmente adicionar uma única seção de coluna. Talvez vamos adicionar uma imagem. Insira a mídia e logo abaixo dela. Vamos adicionar um bloco de texto. Claro que agora esse seria o conteúdo de suas postagens no blog. peça seria quando você está falando sobre esse tópico específico sobre o qual a postagem do blog trata. Deixe-me ver se consigo pegar algum texto de Lorem Ipsum. Então deixe-me clicar, ler o artigo, copiar este Lorem Ipsum, como você pode ver, este é um post de blog. Suponha que o visitante tenha acessado a postagem do blog, ele possa ler sobre o que você queria que ele lesse. Então, voltando aqui, selecione o conteúdo desse bloco de texto com base no conteúdo ali. Pronto, atualize isso. E vamos pré-visualizar as mudanças. Então, lá vamos nós. É claro que você precisaria adicionar alguma margem na parte inferior. 100. Pré-visualize as alterações. E agora temos um bom espaçamento. Claro, agora esta aula é para lhe dar orientação sobre como fazer as coisas. Mas é claro que você reservaria um tempo para garantir que sua postagem no blog estivesse muito bem definida. E parece incrível enquanto os clientes, enquanto seus visitantes o leem. Então, agora que publicamos essa postagem no blog, vamos voltar ao painel. Vamos às postagens. E agora aqui está, peso 0. Quando nós, quando colei esse título desse outro site aqui, ele veio com algumas configurações. Preciso remover isso e digitar eu mesmo. Então, o que aconteceu foi que quando eu copiei esse título aqui, deixe-me voltar. Quando eu copiei daqui e colei aqui. Eu colei junto com a formatação do outro site. É por isso que você pode ver esse código HTML. Então, agora, se eu atualizá-lo e voltar, ele terá o nome correto porque esse não é um texto pré-formatado que eu escolhi em um site diferente. Então, o que eu quero fazer é criar uma segunda postagem no blog ao meio-dia. Como limpar seu quarto, por exemplo , aqui mesmo dentro dessas configurações, Elementor em toda a largura. Vamos definir uma imagem em destaque. Digamos que a imagem em destaque do conjunto. E vamos entrar nas configurações do Astro para trigo esticado. Sem barra lateral. Desative-os. Publique. Vamos editar com o Elementor. Tudo bem, vamos adicionar uma única seção de coluna. Clique nele para adicionar uma imagem. Defina a imagem. E isso pode funcionar. Então. Insira a mídia logo abaixo dela. Talvez um título. Coloque-o no centro. E isso precisa ser um H1. Lembre-se de que cada página precisa ter um H1. Em seguida, vamos arrastar esse texto abaixo do estilo deles. Empurre-o para o meio. E então vamos voltar a este site de referência e copiar o corpo dos textos deste, esse texto de Lorem Ipsum. Copie isso. Volte aqui. Selecione isso, cole lá. Vamos mudar a cor disso. Essa cor escura. Esse estilo, enquanto estiver selecionado . Cole aí. Talvez vamos fazer enquanto ainda está selecionado. Vamos dar uma margem de teste de 50. Atualize isso. Isso é uma prévia. Aí vamos nós. Então, agora deixe-me fechar isso. E aqui, agora que terminamos de criar essas postagens no blog, a segunda, clique na saída do menu de hambúrgueres. Agora vamos voltar para a página em que estávamos editando a página de arquivo do nosso blog. Então, aqui estamos. Se eu atualizá-lo novamente. E, como você pode ver agora, WordPress está retirando parte desse texto do conteúdo das postagens do blog para funcionar como saída ou uma breve introdução , para que alguém tenha uma ideia do que lerá mais sobre quando eles abrem a postagem do blog. Agora que ficou assim na próxima lição, vamos ver como estruturá-lo. Exatamente assim. Exatamente assim no estilo de grade. Então, nos vemos na próxima lição. 32. 31 Crie a página do blog Personalizar a aparência: Olá, bem-vindo de volta. Então, agora é hora de trabalhar na aparência das postagens do blog. Atualmente, eles têm essa aparência, mas queremos que estejam em uma grade. Então, vamos ver como fazer isso. Selecionar qualquer lugar dentro de todo o elemento abre essas configurações. Agora, a primeira coisa que queremos fazer é escolher esse menu suspenso e selecionar a raça com polegar. Aí vamos nós. Então, como você pode ver, ele já está começando a tomar forma, mas precisamos trabalhar nas cores. Tudo bem, então vamos mudar a cor do plano de fundo. Vou entrar com estilo. E se reduzirmos isso por um momento, temos essas seis opções. Temos esses seis painéis. Então, agora abra o fundo do invólucro. Vamos escolher uma cor branca ou acinzentada. Eu quero cores levemente cinza para que elas se destaquem. E então vamos escolher Vamos recolher isso e entrar. Maré. Quer torná-lo preto. Então, tipografia, vamos escolher essa cor escura. Vamos colá-lo lá. Ao passar o mouse. Queremos ser tão amarelos. Então, vou copiar isso. Pinte, cole aí. Então, agora está ficando amarelo quando passamos o mouse sobre ele. Também podemos trabalhar na topografia. Família de fontes. Vamos mudar isso para Montserrat. Vamos voltar aqui e colocá-lo no centro, assim como aquele alinhamento central. Também podemos aumentar o peso da fonte para algo como 800. Assim. Vamos analisar o conteúdo. É aí que editaremos esse texto. Então, cor, também queremos que seja essa cor escura, assim mesmo. E agora observe que temos muitos textos aqui. Queremos que seja até algum lugar aqui, não todos esses textos. Então, vamos voltar ao conteúdo. E nós cortamos o conteúdo por palavra. Então, digamos 20 palavras. Queremos mostrar apenas 20 palavras como trecho. E eu acho que é um bom número. Então, voltando ao estilo, vamos aumentar o espaçamento entre o botão e esse texto. Então, recolhendo a embalagem e indo para o conteúdo. primeiro lugar, podemos aumentar a margem inferior Breaking Bad e depois aumentar a margem inferior. E vamos centralizar o texto. Assim mesmo. Vamos entrar no botão. Vamos mudar a cor. Então, textos coloridos, vamos deixá-los em fundo branco. Vamos escolher essa cor escura. Cole isso aí. E ao passar o mouse. Ou talvez possamos torná-lo amarelo. Então, vamos selecionar essa cor amarela. Ao passar o mouse. Queremos que seja dessa cor escura. Copie isso, cole lá. Assim mesmo. Tudo bem, agora observe que o botão está no lado esquerdo para que possamos alinhá-lo no centro voltando ao conteúdo. Botão Leia mais. Vamos empurrá-lo para o centro desse jeito e atualizá-lo. Obviamente, esse elemento tem muitas outras configurações com as quais você pode jogar até adorar os resultados. Então, basicamente, é assim que se cria a grade. Eu sugiro que você continue experimentando todas essas configurações diferentes e veja a melhor maneira de apresentar sua postagem no blog. Então, vamos pré-visualizar as mudanças. E essa é a nossa página de blog ou peso. Portanto, precisamos adicionar uma margem na parte inferior desse elemento antes de concluirmos esta parte. Então selecione a seção lado verde avançado, margem inferior, 100. Atualização que realmente muda. Vamos rolar para baixo e parece bom. Então, basicamente, é assim que se cria a página de arquivo do blog. Quanto mais postagens no blog você tiver, mais você terá exibido aqui. E mais uma coisa que eu queria mencionar é que agora você notará que , se voltarmos ao layout de colapso do conteúdo, teremos a parte da consulta. É aqui que somos pressionados, está retirando os dados. O Wordpress agora está exibindo postagens de blog que estão na categoria não categorizada. Atualize isso primeiro. Se entrarmos no painel, você notará que temos essas duas postagens no blog e elas estão na categoria não categorizada. Podemos criar categorias diferentes e fazer com que o WordPress exiba apenas postagens de blog dessa categoria específica. Então, digamos, por exemplo, e uma postagem, vamos criar uma categoria. Então, vou selecionar a categoria e dar um nome a ela. Reparos no telhado. Vou apenas apertar Enter. Isso criará automaticamente uma lesma para nós. Então, se dissermos edição rápida, esse é o slug, como você pode ver. Você também pode pegar essa perna aqui se quiser que seja diferente ou aqui. Tudo bem? Tudo bem, agora vamos voltar a todas as postagens. E vamos mudar qualquer uma dessas categorias, por exemplo, nesta . Vamos lá, podemos editar a categoria aqui. Podemos editar e alterar rapidamente sua categoria aqui. Desmarque isso e marque isso e, em seguida, atualize. E agora está na categoria de reparos de telhados. Também podemos entrar na edição. E aqui, nas configurações do Wordpress, podemos rolar para baixo e encontrar categorias. No momento, porque escolhemos os reparos do telhado, como você pode ver, é o reparo do telhado. Então, se tivermos várias categorias, podemos selecionar qualquer uma aqui. E esta postagem do blog estará nessa categoria. Então, agora voltando para o front-end. Dentro desse conteúdo de consulta, enquanto esse elemento está selecionado, entre na consulta. Vamos fechar essas opções e selecionar apenas reparos no telhado. Agora, como você pode ver, WordPress está exibindo apenas a postagem do blog que pertence à categoria de reparos de telhados. Também podemos dizer, se removermos isso e escolhermos não categorizado. Agora, ele exibe as únicas postagens do blog na categoria não categorizada. Lembre-se aqui de que é apenas uma postagem de blog que está na categoria não categorizada. Se você quiser exibir os dois, só precisamos adicionar aqui a categoria de reparos de telhados. Você pode adicionar quantas categorias quiser e elas serão exibidas aqui. Então, nossos dados. E vamos pré-visualizar as mudanças. E aí vamos nós. Então, é assim que embelezamos ou personalizamos o layout da página de arquivo do blog. Agora é hora de tornar seu site responsivo a diferentes tamanhos de tela. São telas de celular, tablets e já estão com boa aparência no desktop. Então, vamos trabalhar nos outros dois. Então, te vejo em breve. 33. 32 Torne o Site Responsivo O Cabeçalho (Atualizado): Ei, bem vindo de volta. Então, agora estamos quase terminando com um site, mas precisamos torná-lo responsivo em telas e tablets móveis. Então, antes de começarmos a trabalhar nisso, vamos ver como eu fico nesses dispositivos. Teclado, Control Shift I. E isso abrirá o DevTools. Não se preocupe com todo esse código. Não precisa tocar nisso. A única coisa em que estamos interessados são esses dispositivos aqui. Cada navegador tem uma maneira de imitar diferentes tamanhos de tela para ajudar os desenvolvedores a ver como seu site Quando estiver pronto para começar a usar as diferentes opções de tamanho do dispositivo Vamos clicar neste pequeno ícone aqui. E agora isso vai expor essas configurações. Como fica em um iPad Air. Se eu for ao Samsung Galaxy, tem como fica o site conhecido como Samsung Galaxy. Alguns dos elementos já estão bem alinhados, mas teremos que fazer algo com o cabeçalho. Como você pode ver, aqui está o menu, a barra de navegação, o rodapé. Nós não trabalhamos. Vamos ver como podemos usar o Surface Pro 7. É assim que parece. Agora que vemos como fica em diferentes tamanhos de tela. Vamos remover isso e fechar o de Netuno. Agora, termine a edição com o Elementor. Em seguida, clique em nosso cabeçalho que nos levará ao local. E o QBR, como você pode ver, o cabeçalho editável. Vou selecionar essa seção e, em seguida, clicarei nesse modo responsivo. Posso escrever aqui como uma pasta que exibirá as configurações nas quais estamos interessados Vamos começar com uma tela de celular. Vou clicar nisso. E, claro, como você já pode ver, este é outro lugar onde podemos ver a aparência do nosso site que eu só queria que víssemos sem essas opções de edição. Então, enquanto o segundo ainda está selecionado. Agora, a primeira coisa que precisamos entender por que os estamos tornando responsivos é que, se pudermos voltar ao modo desktop, essas são duas colunas internas. Um, que vai da esquerda para a direita. Da esquerda para a direita é 100%. Então isso está ocupando uma porcentagem. Marcas de botões Nice Now. Então, voltando aqui, quando isso é pequeno, as colunas são laboratórios e ficam empilhadas umas sobre as outras. E eles ocupam 100% da semana. Então, neste momento, essa coluna o logotipo está ocupando 100% da largura da esquerda para a direita. Podemos fazer com que seja 50 por cento. Então, enquanto estiver selecionado, vamos colocá-lo na coluna. 50%. Simples assim. Agora, a barra de navegação ainda está 100%. É por isso que está empilhado abaixo. Se o selecionarmos, também podemos ganhar 50%. E agora os dois estão comprando 50%. Parece que você também precisa pressionar o menu para baixo. Nicole muito perto da borda. Está tudo selecionado. Vamos para a margem avançada. Isso é ótimo. Essa margem no topo. Aumente até dez e, em seguida, marque para a direita. Até dez. Atualize isso. Vamos analisar a mudança e é assim que parece. Mas é claro que precisamos pressionar Control Shift I, entrar nesse item e depois mudar para um dos pequenos dispositivos, como o iPhone SE. E é assim que parece. Tudo bem, então voltando aqui, vamos usar o modo tablet. E há uma pequena garrafa de Elementor que afeta as pessoas provavelmente eram pequenos meios como o meu. O meu tem cerca de 7 m e o pequeno bug é que para ver o reflexo das mudanças que estamos fazendo enquanto trabalhamos no modo tablet. Precisaremos arrastar isso um pouco, sem mais nem menos. Ele precisa expandi-lo um pouco. E eu não sei por que isso acontece, mas se você não arrastar isso para fora e torná-lo mais amplo, você não verá as mudanças que está fazendo. Agora. Como você pode ver, podemos ver as mudanças que fizemos. Bem, estamos no modo de tela móvel. E agora, voltando ao modo tablet, como você pode ver, é disso que estou falando. Portanto, se, por exemplo, I. Selecione isso e escolha 50%, você não verá nenhuma alteração. Mas se eu prolongar um pouco, agora você pode ver que está ocupando 50%. Portanto, esteja ciente disso. Se eu selecionar isso e dar 50 por cento. Agora, é claro, precisamos tornar isso muito menor. Então, selecionando talvez algo como 30%. Agora isso significa ocupar 75%. Para a direita. Agora, deixe-me selecionar o menu. Quebre a margem lá fora. E se você não consegue ver essas alças aqui, basta rolar para cima para aumentar o valor em até dez. Ou as teclas de seta para cima e para baixo no teclado do seu computador. Também vou aumentar a margem direita. Atualize isso. Então, visualize as mudanças. Se mudarmos para o iPad Air, essas são nossas pernas. Voltando aqui. Se selecionarmos o menu, ele abrirá a barra de navegação real e podemos adicioná-la aqui. Então, voltando para Contexto, Menu, Configurações, logotipo do menu, assim, insira a mídia. Agora, se abrirmos o menu, esses são nossos glúteos, certo? Outra coisa que você deve ter notado é esse efeito geral. Queremos mudar isso. Vamos ver como o menu fica bom, mas vamos entrar no estilo, recolher a embalagem do menu. Podemos trabalhar em um pequeno estilo de hambúrguer. Esse é o estilo de hambúrguer. Então, por exemplo, para a cor de fundo, você pode dar a cor que quisermos. Mas é claro que eu quero falar dessa cor amarela. Copie isso. Cole aí. E agora é cor de fundo. Atualize isso. E, claro, mesmo em telas de celular, ainda será tão amarelo porque cor afeta todos os tamanhos de tela. Então é assim que se edita o cabeçalho. Agora ele é responsivo em todos os tamanhos de tela. Parece incrível. Na próxima lição, vamos ver como criar respostas em uma pasta também. Então eu vou te ver em breve. 34. 33 Torna o rodapé: E estamos de volta. Então, para tornar a foto responsiva, seguiremos os mesmos princípios que seguimos aqui no cabeçalho. Então, primeiro de tudo, vamos pré-visualizar essas mudanças. E o que eu quero fazer é sair das ferramentas de desenvolvimento. E eu quero selecionar a página inicial. Agora vamos passar o mouse sobre isso. Em seguida, selecione a pasta. Esse é um atalho para diferentes editores. Tudo bem, então aqui estamos. Vamos selecionar esse ícone aqui, modo responsivo. Vamos mudar para o modo tablet. E, claro, vamos puxar isso um pouco para fora. E agora isso é um verdadeiro reflexo do que temos atualmente. Precisamos fazer algumas pequenas mudanças aqui. exemplo, vamos reduzir o tamanho dessa fonte para que fique em uma linha. Até esse ponto. Também é reduzido para mal. Junte-se ao nosso boletim informativo. Tudo bem, então podemos empurrar isso um pouco para dentro. Vejo que está muito mais perto do limite do que os textos. Então, enquanto estiver selecionado, avançado, interrompa isso. E então vamos diminuir um pouco até esse ponto. Atualize isso. Tudo bem, agora vamos mudar para smartphones. Então é assim que fica em smartphones. A primeira coisa que quero fazer é selecionar esse corpo de texto. Alinhe o centro, selecione esses ícones sociais alinhe-os ao centro. Selecione esse texto. Eu também vou alinhá-lo ao centro. Então, contente. Agora lembre-se de que essas duas colunas estão empilhadas uma em cima da outra. Podemos simplesmente dividi-los em dois. Selecione isso e dê a você 50 por cento de trigo. O mesmo que esse recurso presente. E agora os dois estão lado a lado. Em seguida, vamos colocar isso no centro. Alinhe ao centro e inscreva-se no formulário. Parece incrível. Estamos preocupados com a facilidade. Então, atualize isso. Vamos pré-visualizar as mudanças. Então, se pressionarmos o botão de controle I, é assim que fica em um tablet. E se mudarmos para talvez o Samsung Galaxy S8, é assim que fica em um Samsung Galaxy. Acho que gosto desse jeito. E é assim que a foto responsiva a diferentes tamanhos de tela. Na próxima e última lição, vamos tornar as seções do corpo das diferentes páginas responsivas em todos os tamanhos de tela. vejo em breve. 35. 34 Torne o site responsivo da página inicial: Bem-vindo de volta. Então, agora terminamos com o cabeçalho e o rodapé. Os dois são responsivos. Vamos trabalhar nas seções do corpo das páginas. Então, voltando para casa, vou selecionar isso. Agora estamos de volta em casa. Então, agora vamos começar com a página inicial. Então, vou selecionar isso para que possamos ir diretamente para começar a editá-lo. E aqui estamos. Então, é claro, a primeira coisa a fazer é clicar no ícone do modo responsivo e isso revelará as configurações. Vamos mudar para o modo tablet. E, claro, vamos expandi-lo um pouco. Se você tiver uma tela widescreen, não acho que isso seja um problema. Você verá que tudo está funcionando corretamente. Agora, com isso, queremos empurrar esse texto um pouco para dentro. Como você pode ver, nosso cabeçalho parece incrível e, se eu rolar até o final, nossa foto ficará incrível. Então, só precisamos fazer alguns pequenos ajustes no conteúdo do corpo. Então, selecionando essa coluna, vá para a margem avançada à esquerda. Vamos aumentá-lo um pouco. Simplesmente assim. E eu acho que é um bom lugar. E é legível. Role para baixo. Eu ainda gosto de onde isso está localizado, então não vou tocá-lo. Vamos fazer o mesmo com essa coluna. Selecione o preenchimento avançado da coluna. Isso foi 90. Mas à esquerda, vamos aumentá-la até treinar desse jeito. Vamos selecionar essa coluna. Acolchoamento avançado à esquerda. Vamos dar 20 à direita. Simplesmente assim. Isso parece incrível. Vamos repetir o que fizemos. Selecione esse avançado. Isso é 126 no topo. Então, vamos te dar 120. Vamos fazer isso 100%. Então, sim, vamos fazer com que seja 100%. Simplesmente assim. Deixe-me remover esse preenchimento desta coluna com a imagem. Também vamos fazer com que seja 100%. E agora vamos dar um preenchimento de 20 à direita. Então, qualquer um à esquerda, 50 no topo. O mesmo caso se aplica a esta serina. E um truque legal que podemos fazer é trazer essa imagem antes desses textos nas telas dos tablets, mas mantê-la exatamente onde está na guia das telas do desktop. Portanto, temos esse recurso no elemental em que, se eu selecionar isso e ir para esse local, posso selecionar essa seção que contém essas duas colunas. E usando o recurso responsivo avançado, podemos reverter as colunas no tablet. E isso colocará a coluna que estava abaixo, acima da primeira. Então, lá vamos nós. Vamos também empurrar isso para o centro. O mesmo caso se aplica a isso. Vamos empurrá-lo para o centro. E parece ter uma margem estranha na parte inferior. Então, vamos selecionar esse texto. Avançado. Quebre isso. E agora nós o reiniciamos. Vamos pré-visualizar as mudanças até agora. Antes de pré-visualizarmos, ele muda. Vamos trabalhar. Vamos expandir um pouco essa imagem. Selecionar essa coluna, talvez 35%, para que ela se torne 65 por cento. E, no momento, temos muita margem no topo. Então, vou selecionar isso, entrar em avançado e descobrir que ele teve AT, podemos aumentá-lo um pouco até esse ponto. Agora está equilibrado. Acho que a seção de depoimentos parece boa. Mas tínhamos alguma margem à esquerda e à direita disso. Tão avançado. Remova isso. E, como você pode ver, podemos dizer que ficará assim neste dispositivo, mas não em outros dispositivos. Portanto, essas são apenas configurações que se aplicarão ao tablet. Então, rolando para baixo. Acho que isso tinha um pouco, acho que parece bom, mas vamos tornar esse texto um pouco menor porque, como está muito perto da borda, também podemos reduzir o tamanho desse texto. Alguém aí, eu acho que parece melhor. Vamos nos atualizar. Visualize as alterações. Mudança de controle. I. Vamos mudar para o modo tablet, iPad Air. E vamos começar a rolar. Tudo bem, então temos esse problema aí. Acho que precisamos quebrar as configurações padrão que tínhamos em nosso desktop. Então, vou quebrar isso, vou selecionar esta coluna. Vá para Avançado. Remova isso e remova isso. Agora, vamos configurá-lo mais uma vez. Margem superior. Estou pressionando a seta para baixo no meu teclado. Esse é um bom local para o acolchoamento. Vamos dar algo como 30. Está tudo bem. Atualize isso. E aí vamos nós. Então, agora parece bom. Rolando para baixo. Aí vamos nós. Então, a página parece incrível. E é assim que a seção do corpo é responsiva a diferentes tamanhos de tela. Vamos ver como fazer isso na página sobre. Antes de concluirmos. Te vejo em breve. 36. 35 Torne o site responsivo sobre o pa.: Então, no momento, estamos prestes a trabalhar na página Sobre nós. Mas achei que deveria te dar um exercício para fazer antes do final da aula. Então, vamos para a página Sobre. E, como você pode ver, é assim que fica nos tablets. E se mudarmos para telas móveis, é assim que parece, certo? Acho que esse é um bom exercício para você se familiarizar com a criação de páginas responsivas. Não abordamos como tornar seções como essas responsivas. Então, reserve um momento e faça com que sua página tenha uma aparência incrível em telas de celular e tablets. Então, novamente, passando para a página do blog, vamos ver como fica. Então, rolando para baixo. Por padrão, a página do blog parece incrível. Então, não há muito trabalho aqui. Mas se você quiser fazer algumas alterações para torná-lo mais apresentável em tamanhos de tela diferentes. Vá em frente e faça isso. Mas, dito isso, você deve ter notado que não tocamos na página de contato, mas isso foi deliberado. Portanto, a página de contato também faz parte do seu exercício. Ao concluir esta aula, vá em frente e crie uma bela página de contato. Aplique os mesmos princípios que aplicamos quando criamos esse formulário. Basta criar o formulário no Terminator e exibido no front-end da página de contato usando um código curto. Seja criativo, veja outros sites e veja aparência de suas páginas de contato e tente recriar algo assim. E dito isso, tenho mais algumas considerações finais. Então, nos vemos na lição final desta aula. Nos vemos em breve. 37. 36 reflexos finais: Parabéns. Se você chegou até aqui, significa que você é um finalizador. Muitas pessoas conseguem começar algo, mas nem todo mundo é capaz de terminá-lo. Algumas pessoas se distraem, outras simplesmente desistem no caminho. Mas você chegou até aqui. Isso fala muito sobre o tipo de pessoa que você é. Do fundo do meu coração. Eu só queria dizer, obrigado por ter vindo até aqui, e parabéns por terminar esta aula. Agora você tem as habilidades para criar qualquer tipo de site que quiser do zero usando WordPress e Elementor. É sempre um prazer ter você aqui. E para concluir, só tenho um favor rápido para lhe pedir. Você gostaria de dedicar apenas 1 minuto do seu tempo e deixar uma resenha desta aula logo abaixo deste vídeo. E a razão pela qual estou pedindo uma avaliação é para você ajudar outros alunos a descobrir essa aula. Quanto mais avaliações a turma tiver, mais outros estudantes que estão procurando por esse tipo de aula poderão encontrá-la, porque o algoritmo Skillshare impulsiona a turma e faz com que é mais detectável por mais estudantes. Portanto, dedique apenas 1 minuto do seu tempo e conte aos outros alunos o que você descobriu sobre essa aula. Como você se sente? O que você gostou na aula? Você o recomendaria para iniciantes ou alunos de nível intermediário? Isso realmente ajudará muito? E será uma ótima maneira de tornar o Skillshare um lugar melhor. Mais uma vez, quero parabenizar por concluir a aula. E isso tudo vem de mim por enquanto. Até a próxima vez. Seja criativo, produtivo e não se esqueça de me seguir para ser notificado quando eu publicar uma nova aula. vejo mais tarde. Peça.