Crie um blog WordPress com o Elementor

1. Introdução ao curso: Na era digital em rápida mudança de hoje, ter uma forte presença on-line não é mais opcional, é essencial. Porque um blog amigável e bem projetado pode ser uma ferramenta poderosa para se conectar com o público no mercado global Olá, meu nome é Ken e venho ensinando pessoas a criar sites Wpress nos últimos 5,5 anos E nesta aula, mostrarei como criar seu próprio blog bonito e profissional com o Wpress e o elementor Vamos fazer isso do zero. E quando terminarmos, você terá um blog pronto para o lançamento qual poderá começar a direcionar as pessoas a partir de suas contas de mídia social ou perfis de mídia social Você pode começar a escrever e publicar postagens em seu blog e compartilhar esses links em suas contas de mídia social para atrair pessoas para seu blog. E durante toda a aula, mostrarei todos os elementos essenciais de que você precisa para entender o fluxo de trabalho do Wordpress elementor Você entenderá como usar os diferentes elementos oferecidos pelo Elementor e saberá o motivo pelo qual os estamos usando. Apenas para lhe dar uma visão geral rápida de alguns dos conceitos que aprenderemos, esta aula abordará como configurar o Wordpress do zero. Isso significa que começaremos com como comprar a hospedagem Wpress, como instalar a Wpress depois de comprar a hospedagem, para que você possa começar a usá-la Como instalar e trabalhar com temas e plug-ins do wpress. Veremos como criar páginas da web e postagens de blog. Eu vou te mostrar como criar artigos e publicá-los em seu blog. Mostrarei como categorizar esses artigos ou postagens de blog para que você possa organizar seu blog adequadamente Mostrarei como criar belos layouts funcionais com construtor de arrastar e soltar elementors, para que você tenha um lindo site Você entenderá como personalizar seus blogs, tipografia, cores, imagens e todos os outros elementos que usaremos na aula E isso é apenas a ponta do iceberg dos conceitos que abordaremos E quando terminarmos esta aula, você terá as habilidades para criar qualquer outro tipo de site que desejar com o Wordpress, elementor e outros plug-ins Então, como você pode ver, esta será uma aula muito prática. Isso lhe dará a experiência de que você precisa para passar de iniciante a um web designer confiante em pouco tempo E se você está se perguntando se essa aula é adequada para você, esta aula foi criada para empreendedores que desejam aprender como criar um site para seus negócios. Portanto, se você é uma pessoa de negócios que deseja compartilhar sua experiência por meio de artigos ou postagens de blog em sua própria plataforma, não em uma plataforma de terceiros, verá como criar um blog com o qual possa fazer isso. Esta aula também foi criada para qualquer pessoa que queira aprender a criar sites e postagens de blog com We Press e ganhar dinheiro com isso. Se você quiser que as pessoas paguem para criar sites ou postagens de blog para elas e ganhar a vida fazendo isso, esta aula lhe dará os fundamentos e muito mais Então você pode sair preparado para fazer isso. Então, se isso soa como uma habilidade, você estaria interessado em aprender. Se você quiser aprender como criar blogs e sites para você ou para clientes. Eu encorajo você a se juntar a mim agora, e prometo que, quando terminarmos, você não terá um site maldito, mas um blog do mundo real que está pronto para atender visitantes ou clientes Então, sem perder tempo, quero mostrar a vocês o projeto em que trabalharemos Então, na próxima lição, vou levar você em um tour pelo blog que estamos construindo. Te vejo em breve. 2. PROJETO DO CURSO : I. E como eu sempre lembro em todas as aulas. A melhor maneira de aprender web design ou qualquer outra habilidade técnica é trabalhando em um projeto do mundo real ou basicamente em um projeto. Então, aqui está o projeto em que trabalharemos. Este é o blog que vamos criar, e eu queria levar você um rápido tour por todo o blog. Então, primeiro de tudo, essa é a página de destino ou a página inicial. Como você pode ver, temos essa página de herói com algum texto de cabeçalho, alguma descrição. Então, essas são as postagens do blog. Se você clicar em um blog, você será redirecionado para ler esse blog Mas veremos isso em breve. Como você pode ver aqui à esquerda, temos um perfil ou a biografia do autor. Essa é a sua biografia, se você é quem dirige o blog. Aqui, temos artigos recentes, e você pode clicar em qualquer um deles para ler Aqui embaixo na foto, temos três colunas. Temos alguns links rápidos. Temos um formulário de inscrição para o caso de o leitor querer se inscrever em sua lista de e-mails, e temos uma breve descrição aqui Muito simples, mas a coisa mais importante que você deve aprender com essa classe é como usar o Wpress e elementor para criar todas essas seções diferentes Passando para a página de artigos, é aqui que concordamos com todas as postagens do blog que você publicou e, como você pode ver, elas estão muito bem dispostas com espaçamento uniforme, independentemente da altura de cada elemento aqui, como você pode ver, é mais alto Então, este abaixo é empurrado um pouco para baixo para manter esse espaçamento. E se você abrir uma postagem de blog para lê-la, por exemplo, esta, é assim que a postagem do blog fica. Ainda temos essa lista de artigos recentes e você tem controle total sobre o que deseja exibir aqui. Então, agora, estamos exibindo artigos recentes. Mas usando as categorias do Wpress, você pode definir qual categoria deseja exibir aqui, e eu mostrarei como fazer isso Mencionei que aprenderemos como categorizar as postagens do seu blog Então, vamos ver como fazer isso. Agora, o usuário pode entrar e ler. Como você pode ver, essa é a categoria de produtividade e a data em que foi publicada foi 7 de março de 2024 Você pode continuar lendo a conclusão do artigo e aqui está uma pequena biografia da pessoa que publicou essa postagem específica no blog. Então temos o rodapé. Se você tiver vídeos, poderá publicá-los nesta página. Lá vamos nós. E se reproduzirmos um dos vídeos aqui, tudo o que você precisa é de um link para seu vídeo no YouTube. Eles estão indo para a página de contato. Página de contato muito simples com um formulário de contato bonito Veremos como usar um bom plug-in de formulário no cold forminator para criar essa página de contato E também temos essa barra lateral de artigos recentes. Agora, você notará que ainda temos essa barra lateral, e isso porque é sempre bom ter chamadas à ação em seu site, você quer manter clientes ou visitantes em seu site ou blog o maior tempo possível. E ao fornecer links para clicar que os redirecionam para uma parte diferente do seu site, você os mantém no site por mais tempo, e isso é bom para o seu SEO Agora, se eles clicarem nesse botão popular, eles verão essa barra lateral fora da tela com mais conteúdo, e você terá controle total sobre o que deseja exibir nessa barra lateral Então, como mencionei, a lição mais importante desta aula será ter a mentalidade de um design de site, um web designer da Wpress Portanto, meu objetivo com esta aula é mostrar como usar uma combinação de diferentes ferramentas no ecossistema Wpress para criar um blog ou site E esse exemplo de blog será um bom projeto para entendermos como todas essas ferramentas diferentes funcionam. Elementor é o foco central porque o elementor é o que nos permitirá ter esse layout Todos esses layouts que vimos em todas as páginas diferentes serão elementor Então, basicamente, isso é apenas uma visão geral rápida do que vamos trabalhar. Esse é o projeto da turma. Na próxima lição, vamos ver onde e como comprar hospedagem WordPress e um nome de domínio. Então, eu vou te ver em breve. 3. Compre hospedagem para WordPress e nome de domínio: A, bem-vindo de volta. Agora, publiquei recentemente um tutorial completo sobre como comprar hospedagem na web wPress quando você quiser criar um site básico Agora, o tutorial era para um curso fundamental diferente. Mas como o processo de compra wPressHsting continua o mesmo, decidi incluí-lo nesta classe caso você não saiba como comprar a Então, sem perder mais tempo, aqui está o processo para comprar o WPressHsting e Agora que você viu o site criaremos ao longo deste curso, é hora de falar sobre como e onde obter sua hospedagem na web e um nome de domínio. Agora, cada site que você visita é armazenado em algum lugar on-line em um servidor que está sempre disponível na Internet. É por isso que você pode acessar um site que está na Holanda, nos EUA ou no México, porque ele está armazenado em um servidor que está sempre conectado à Internet. Isso significa que toda vez que você clica em um link que leva você a um site específico. Por exemplo, free pk, digamos, free pick.com O que o navegador fez foi enviar uma solicitação para essa página específica, e essa página específica pode ser acessada por meio desse endereço ou URL. Então, quando enviou a solicitação, essa solicitação foi recebida pelo servidor que está armazenando o site de seleção gratuita, e o site Freepk é composto por muitas páginas da web Mas como essa página da web é representada por esse nome de domínio específico, esse servidor retornará uma resposta com a página solicitada. Então, esse servidor é o que um host fornece a você. Seu host fornece espaço de armazenamento para seu site e garante que seu site esteja disponível para qualquer pessoa que queira visitá-lo. Agora, a outra coisa que você precisará é de um nome de domínio, free pick.com é um nome de domínio e esse nome de domínio específico é exclusivo do free peek, então ninguém mais pode ter o mesmo free Da mesma forma que ninguém mais pode ter seu número de telefone. Seu número de telefone é único e é usado apenas para você, mais ninguém. Portanto, seu site precisa ter um nome de domínio exclusivo e as pessoas usarão esse nome de domínio para acessar seu site. Então, agora, voltando aqui, estou no wordpress ou. Este é o site oficial do WordPress. É aqui que você pode baixar o Wpress se quiser desenvolver seu site offline, você pode instalar o Wpress em seu sistema e trabalhar sem a Internet e criar seu Mas o que nos interessa é a página de hospedagem. O WordPress tem uma lista de hosts web recomendados. E eu recomendo que você reserve um momento e leia esta página. Como você pode ver, eles têm três principais hosts recomendados, Bluehost, dream host e wordpress.com Mas isso não significa que esses sejam os únicos hosts da web que você pode usar para o seu site wpress Existem outros hosts da web que são tão bons, se não melhores, do que esses três. Então, essas são apenas recomendações da imprensa, mas você descobrirá aqui lendo isso que existem centenas de milhares de hosts da web por aí, a grande maioria dos quais atende aos requisitos mínimos da imprensa. A Wpress decidiu facilitar seu trabalho e decidiu dar a você os três principais que eles recomendam Agora, pessoalmente, usei o Blue Host e, há muito tempo, quando comecei usar o Wpress, experimentei o wpress.com, e você não deve confundir o wpress.com e você não deve confundir WordPress.org é a plataforma administrada pela WPressFoundation, porque lembre-se de que o Wpress é de código aberto e o wpress.org existe para que você se lembre do download do W Press e de tudo o que você precisa saber sobre o wPress O WordPress.org é a plataforma administrada pela WPressFoundation, porque lembre-se de que o Wpress é de código aberto e o wpress.org existe para que você se lembre do download do W Press e de tudo o que você precisa saber sobre o wPress. Mas agora, quando se trata de hospedagem, existe um serviço dedicado chamado wpress.com. Deixe-me abri-lo. Essa é uma plataforma que fornece ferramentas e hospedagem para criar seu site. Parece que são semanas. Se você já viu semanas, sabe que, ao criar um site em semanas, não precisa pensar em onde conseguir hospedagem, pois eles hospedam o site para você. Eles apenas fornecem as ferramentas para começar a criar seu site imediatamente. Mas é claro que tem suas limitações. Da mesma forma que as semanas têm suas limitações quando você compara à instalação do Wpress em um servidor Quando você instala o Wpress em um servidor em algum lugar, você tem mais controle para fazer muitas outras coisas sobre as quais não tem controle quando está usando um serviço hospedado como wpress.com Mas é claro que é um bom lugar que você pode experimentar se quiser. Agora, em um nível pessoal, eu uso o chip de nome, especialmente quando estou apenas experimentando algumas ideias antes de me comprometer a comprar uma hospedagem web dedicada para essa ideia específica Então, o Name tip tem vários serviços aqui. Uma delas é a hospedagem gerenciada do Wordpress e a migração para o Wordpress. Mas outro serviço aqui é chamado de hospedagem compartilhada. Se eu abrir isso, temos esse plano stela stela plus aqui, e eu vou te dizer por que eu gosto de usar isso Número um, veja esses sites ilimitados. Isso significa que se eu tiver dez ideias para sites diferentes, tenho dez ideias. Talvez eu queira abrir uma loja de comércio eletrônico. Não vou abrir uma loja de cosméticos. Não vou abrir um blog pessoal. Talvez eu não abra uma comunidade social. Talvez eu queira criar um fórum. Essas são cinco ideias diferentes. Posso hospedar todos esses sites sob esse plano sem precisar comprar hospedagem separada para cada site. Posso ter um número ilimitado de sites hospedados nesse plano e só posso pagar essa taxa por mês. Claro, este é o primeiro ano com desconto, mas no segundo ano, você pagará 68,88 por Mas pense sobre isso. Se você tem três ideias ou quatro ideias para sites diferentes e quer ver qual delas funcionará antes de se comprometer totalmente a obter um plano de hospedagem web dedicado para ela. Você pode criar o site de acordo com esse plano. Crie os quatro sites. Haverá transmissão ao vivo na Internet. Você pode começar a enviar pessoas para esse site por meio de links nas mídias sociais, apenas vinculados aos quatro sites. E se um dos sites realmente popularizar e começar a atrair muito tráfego Agora você pode decidir agora este site parece estar se popularizando Então, deixe-me obter um plano de hospedagem web dedicado separadamente, e então você pode simplesmente migrar para a hospedagem dedicada, porque agora é uma ideia que começou O resto pode permanecer como sites experimentais, mas eles ainda estão online. Mas o bom é que você está pagando por um plano de hospedagem. Você não está pagando planos de hospedagem diferentes para os diferentes sites. E, claro, por causa dessas vantagens, é por isso que sou capaz de criar um site como esse. Este é o site que acabei de mostrar para você. Deixe-me ir para o front-end. Este é o site de referência que eu construí enquanto preparava este curso, e eu o criei, é claro, que possamos ter um site para ver enquanto trabalhamos no curso. Agora, com isso dito, este é um dos sites que eu hospedei sob esse plano. E está sob esse nome de domínio, vi com. E agora, nesta aula, construiremos nosso site e usarei um nome de domínio diferente, que será wordpress com e também estará sob esse plano. Então, terei esses dois sites, sites demonstração sob a mesma hospedagem. É por isso que estou usando isso. Mas agora, eu demorei muito falando sobre isso. Não estou tentando convencê-lo a entender isso. Sou só eu explicando a lógica por trás do que eu uso e como trabalho, porque talvez você ache isso útil Mas lembre-se de que você sempre pode ir aqui e experimentar esses outros hosts da web. Eles também são bons. Vá e experimente, escolha o que você quer. E uma vez que você tenha feito isso, vamos voltar aqui. Como você pode ver aqui, temos domínios. O Name Chip é um dos melhores vendedores de nomes de domínio do planeta. Você viu os anúncios em todos os lugares no YouTube e em sites diferentes Você pode pesquisar seu site. Digamos que charity today.com. Vamos ver o quanto isso é. Tudo bem, charity today.com é o domínio premium. São $1.700. Mas também temos outros domínios mais baratos, caridade no dia a dia. Depende de você ser criativo e comprar um nome de domínio com o qual possa conviver com um nome de domínio que faça sentido. Obviamente, você deseja usar o nome de suas organizações de caridade ou de sua startup. Se você está procurando fundos para projetos de tecnologia e não para caridade, você também pode simplesmente usar o nome da sua empresa. Minha empresa today.com. E como você pode ver. Sim. Então, brinque com isso e, quando estiver pronto, você poderá adicionar ao carrinho. Mas lembre-se, quando voltamos à hospedagem compartilhada, quando você compra esse plano, você recebe um nome de domínio gratuito. Isso significa que você tem a chance de obter um nome de domínio gratuito no primeiro ano sem precisar gastar esse dinheiro que acabamos de ver. Você não precisará comprar um nome de domínio no primeiro ano, mas é claro que terá que pagar pelo nome de domínio a partir do segundo ano Obviamente, vou deixar um link na descrição abaixo deste reprodutor de vídeo para você comprar qualquer um desses hosts da web sobre os quais falamos, incluindo o chip de nome. E alguns deles podem ser links de afiliados. Se você gostaria de me apoiar e apoiar o trabalho que estou fazendo, a melhor maneira de me apoiar é clicar nos meus links de afiliados, pois você ainda comprará o serviço pelo preço listado no site deles Mas se você usar os links que forneci, receberei uma pequena comissão pela sua compra, que me ajudará a pagar as contas e a obter a motivação para continuar criando novos cursos. Dito isso, tudo gira em torno de hospedagem na web e como obter um nome de domínio. Na próxima lição, vamos ver como instalar o WordPress depois de ter acesso ao seu painel C depois de comprar hospedagem. Então, nos vemos na próxima lição. 4. Instalar o Wordpress: Então, agora que você comprou um nome de domínio e hospedagem, é hora de acessar o painel C para que possamos instalar o WordPress. Então, vamos seguir em frente e fazer isso. Agora, diferentes hosts da web terão maneiras diferentes de acessar o painel C. É assim que vou fazer isso usando o chip de nome. Mas o mais importante é que você acesse o painel C porque é através do painel C que poderemos instalar o WordPress. Então, deixe-me fazer login. Em seguida, vou diretamente para a lista de hospedagem. É aí que todos os meus planos de hospedagem estão listados. Eu vou para o painel C. Como mencionei, seus hosts da web podem oferecer uma maneira diferente de acessar o painel C. Então, aqui estamos dentro do painel C, e o que queremos é a seção Softaul App Installer, pois ela nos fornece diferentes CMSs e serviços que talvez queiramos usar e queremos usar Então, deixe-me clicar em WordPress em Soft App Installer. E lembre-se de que mencionei que esse plano, o plano Seo plus por chip de nome, permite que você tenha vários sites sob esse único plano de hospedagem. Então, aqui, temos Instalar agora. Vou clicar em Instalar agora e seremos direcionados para o formulário do wPress Installer Só precisamos preencher esses campos. E a primeira coisa aqui é selecionar o protocolo ou prefixo E eu gosto que meu site comece com WWW e depois meu nome de domínio Mas, novamente, você notará que temos HTP e HTTPS. Se o seu site, se o seu nome de domínio tiver um certificado SSL, você deve usar HTTPS Quando você clica fora, ele fará uma verificação rápida e, se você não tiver um certificado necessário, ele emitirá um alerta aqui de que você não tem um certificado necessário e só pode usar HTTP. Mas é fundamental que você tenha um certificado SSL para seu site Em 2024, isso é obrigatório. A próxima coisa, é claro, aqui, porque vifxpo.com já tem o Vou usar o wpress com. E aqui, podemos adicionar uma pasta para armazenar nosso site WordPress. Mas isso significará que nossa página inicial será wpresst com slash Mas se você quiser que a página inicial do seu site seja www.domainname.com, não Então, vou deixar assim. Então aqui você pode selecionar a versão do Wpress que deseja usar Quero usar o mais recente. Então, meu site será www press slash anything. Em segundo lugar, podemos dar um nome ao nosso site. Se vamos abrir a CNN cnn.com. Como você pode ver, o nome que eles deram à página inicial é notícias de última hora, últimas notícias e tudo Então, esse é o nome que aparecerá nas suas guias. Por exemplo, o blog de Ken, transformando vidas por meio de postagens ou artigos no blog Em seguida, esta seção fornece as credenciais de login para seu painel de imprensa profissional Caso você não queira fazer login no Wpress por meio do painel C, consulte o login do seu nome de domínio no WP. Você pode usar essas credenciais. Então, vou deixar o meu no padrão. Esse e-mail foi gerado para você automaticamente quando você teve acesso ao painel C, quando comprou sua hospedagem e obteve acesso ao painel C. Esses são plug-ins que você pode instalar junto com o wordpress. Eles vêm junto com o Wordpress, mas dependendo do seu host, você pode não ter essa lista, mas não precisa instalar nenhum deles porque há muitas opções no diretório de plug-ins do WordPress e eles provavelmente podem fazer um trabalho melhor do que essas. Então, a seguir, se você quiser fazer alguns backups automáticos, pode entrar aqui e deixar o local de backup no padrão. Selecione, talvez, se você quiser fazer um backup uma vez por dia, uma vez por semana, uma vez por mês. Deixe-me escolher uma vez por semana. Em seguida, rotação. Esse é o número de cópias de backup dos backups que você tem a qualquer momento. E aqui, você pode inserir seu e-mail do Gmail para receber uma notificação após instalação do Work Press Mas você não precisa fazer isso. Deixe-me clicar em Instalar. E diz que levará 3 minutos, mas na verdade leva menos de um minuto. E lá vamos nós. Agora, esse é o seu nome de domínio. Esse é o URL da sua página inicial e esse é o URL do seu painel. Agora, como estamos aqui no painel C, basta clicar nele e seremos redirecionados diretamente para o nosso painel Então, deixe-me clicar nisso. E, como você pode ver, aqui está o painel. E como mencionei, como você pode ver aqui, temos o blog do Ken. Esse é o nome que demos ao nosso blog ou site. Agora, se eu clicar no blog de Ken, ele nos levará para a página padrão, que, obviamente, mudaremos. E como você pode ver, aqui está o nome do site. Isso deve conter seu nome ou o nome que você deu ao seu site e o slogan ou slogan que você colocou abaixo do nome Agora, esse é o tema padrão. Veremos como alterar o tema do wordpress à medida que avançamos, mas é assim que instalamos o WordPress, e agora estamos prontos para passar para a próxima etapa, que é instalar o elementor Então, eu vou te ver em um minuto. 5. Instale o Elementor: Então, agora que instalamos o War Press, é hora de instalar o Elementor porque, é claro, estamos criando o site da War Press com o element Então, vamos entrar nos plug-ins. E primeiro de tudo, vou clicar em plug-ins para acessar a lista de plug-ins pré-instalados. E esses são os plug-ins que sempre vêm com o War Press. Então, vou selecionar os dois, selecionar excluir neste menu suspenso e aplicar OK. Tudo bem. Então, agora não temos nenhum plug-in. Deixe-me atualizar essa página. Não há plug-ins disponíveis no momento. Então, se eu clicar em Adicionar novo plug-in, serei redirecionado para o diretório we press plug-in E aqui temos mais 50.000 plug-ins gratuitos que você pode instalar e usar Então, é claro, vamos procurar o elementor. E aqui estamos. Então Elementor é a primeira opção aqui. Então, vou clicar em Instalar agora. E agora está instalado. A única coisa que resta é ativá-lo. Mas antes de ativá-lo, você notará aqui que temos outros complementos ou plug-ins relacionados ao elementor complementos ou plug-ins relacionados ao elementor E esses são produtos criados por plug-ins terceirizados desenvolvedores de plug-ins terceirizados que não são afiliados à element, a equipe da Elementor Esses são desenvolvedores independentes que criaram complementos adicionais, elementos adicionais que podemos usar gratuitamente com a versão gratuita do Elementor Agora, o Elementor tem uma versão profissional qual você precisa pagar e uma versão gratuita E a versão gratuita já tem vários elementos que vamos ver. Mas os elementos gratuitos que vêm com o Elementor não são suficientes para criar um bom site de imprensa profissional Você pode criar um site básico com eles, mas não um site muito bom com. Mas agora, esses elementos adicionais que obtemos desses complementos relacionados nos fornecem mais opções e, claro, usaremos vários deles, você possa entender exatamente do que estou falando Mas, por enquanto, deixe-me seguir em frente e clicar em Ativar. E agora será redirecionado para este assistente de configuração elementar para fazer algumas Portanto, o primeiro passo é criar uma conta Elementor para acessar todos esses benefícios, mas você não precisa ter uma conta elementar para usar o Elementor Então eu posso ir em frente e pular essa parte. Em seguida, aqui, você pode escolher qual tema deseja usar. Você pode optar por usar o tema hello. Este é o tema we press criado pela equipe da Elementa para trabalhar especificamente com o Elementor Mas não vamos usar esse tema hello porque usaremos o tema Astro, que também é outro tema incrível da We Press, criado por profissionais e funciona perfeitamente com o Elementor Então, vou seguir em frente e pular essa parte. E aqui podemos escolher um nome para nosso blog ou site. Esse é o nome que você deu ao seu site. Agora, essa é a linguagem de código para um apóstrofo. Assim, lembre-se de que esse é o nome que demos ao meu site. Mas, na verdade, deixe-me ligar para isso no blog. Vou clicar em Avançar. Mas se você estiver satisfeito com o nome que deu a ele quando estávamos instalando, pressione, não é necessário alterá-lo. Sou eu que estou mudando isso porque não quero que esse apóstrofo afete Então, eu mudei isso aqui. Vou clicar em Avançar. Aqui você pode fazer o upload do logotipo do seu site. Mas vamos fazer isso quando estivermos criando o site. Portanto, não precisamos adicioná-lo aqui, então pule. E, finalmente, passo cinco, edite uma tela em branco com o editor Elemental ou escolha um modelo projetado profissionalmente ou importe um modelo que você já tenha Mas não vamos fazer nada disso. Mas se clicarmos em Ignorar ou fechar aqui ou em qualquer um desses botões, Elemento gerará uma página elementar apenas para nos mostrar o editor elementar Então, vou clicar em Skip. E agora o Elementor gerou uma página da web de amostra, que vamos excluir, mas ela é gerada apenas para redirecionar para o construtor, para que possamos dar uma olhada nela desde o início. Agora, aqui desbloqueamos o poder do Elementor AI. Estamos vivendo na era da IA, então isso é facilmente esperado. Você pode ir em frente e ler todas essas informações. Mas para usar o Elementar AI em seu site para editar seu texto e gerar imagens ao criá-lo, você precisará criar uma conta elementor Lembre-se de que a primeira etapa do Assistente foi criar uma conta. criação de uma conta é gratuita, então você não precisa se preocupar. Você pode ir em frente e fazer isso. Vou clicar em Continuar. E agora, esta é a página. É rotulado como Elementor número oito. Mas, como eu disse, vamos deletar esta página. Mas antes de excluí-lo, vamos usá-lo para ter uma visão geral da área de trabalho do elementor, para que você possa se familiarizar com todas as partes do editor Então, vamos fazer isso na próxima lição. Mas antes de fazermos isso, deixe-me clicar em publicar. Agora está publicado e eu quero que saiamos para o painel do WordPress. Então, quando clicarmos nisso pela primeira vez, sairmos, teremos essa opção. Escolha para onde sair toda vez que você apertar o botão de saída Você definirá isso apenas uma vez e, toda vez que clicar, será redirecionado para a parte do site que escolheu Então eu escolho o painel. E aplique. Então, toda vez que eu clicar nele, sempre serei redirecionado para o painel Deixe-me clicar em sair porque não estamos tentando salvar nenhuma alteração lá. Agora, aqui estamos no painel. E, como mencionei, na próxima lição, teremos uma visão geral rápida, um rápido tour pelo espaço de trabalho do elementor Então, eu vou te ver em breve. 6. Tour no espaço de trabalho da Elementor: Então, agora é hora de ter uma visão geral rápida do espaço de trabalho do elementor Então, lembre-se de que tínhamos uma página pré-gerada. Então, vou apenas para as páginas. E quando instalamos o Elementor, é claro, ele gerou o Elementor número oito Mas quando instalamos o WordPress, ele veio com essas duas páginas pré-geradas. Vou selecionar esses dois. Nesse menu suspenso, vou para a Lixeira e, em seguida, aplicarei Então, agora ficamos apenas com esta página. Agora, para editar com o Elementor, posso clicar em editar com o Elementor ou posso ir para E aqui temos a edição com o Elementor. Ainda é a mesma coisa. Então, deixe-me clicar nisso. E aqui estamos. Então, isso aqui no lado esquerdo é a caixa de ferramentas. Eu chamo isso de caixa de ferramentas. E se eu apertar o botão de controle, temos o navegador Esse navegador é como um mapa ou uma visão panorâmica da página que temos aqui Então, como um exemplo rápido, porque vamos ver isso, mas vamos falar sobre o navegador Se eu clicar aqui para adicionar uma grade, talvez vamos adicionar isso. Agora temos uma grade. Se eu duplicar essa grade selecionando-a e duplicando à direita, agora temos duas E agora, essa grade, se expandirmos, está vazia porque não colocamos nada dentro dela. Se eu for até este ícone aqui em cima para revelar os elementos e arrastar esse título para lá, agora você notará que temos um título lá. Aqui, se eu clicar nesse sinal de adição e adicionar um elemento de imagem, agora temos um elemento de imagem. Se eu selecionar essa grade, você notará que essa grade também está selecionada. Deixe-me selecioná-lo. Agora está selecionado e, agora, como você pode ver, está selecionado. E isso muda para editar a grade. Então, essas são as configurações da grade. Se eu selecionar essa imagem dessa forma, isso muda para editar a imagem. Então, essas são as configurações da imagem. Se eu selecionar esse texto, isso mudará para editar o título porque esse é um elemento de título. Se eu selecionar isso, isso muda para editar a grade porque essa é uma grade que duplicamos a partir dela e está destacada aqui Então esta é uma visão panorâmica, ou um mapa, de onde estamos. Então, imagine se você tiver vários elementos, 20 elementos alinhados até a parte inferior, e quiser selecionar rapidamente um deles. Por algum motivo, você não consegue selecioná-lo aqui. Você pode entrar aqui e selecioná-lo, e agora ele será selecionado em seu espaço de trabalho. Agora, voltando aqui, como mencionei, sempre que quisermos adicionar um elemento, basta clicar nesse ícone aqui, ele revela os elementos, e eu posso arrastar talvez um elemento de vídeo para lá. E essa é a razão pela qual isso é chamado de elemento. Isso nos fornece elementos para adicionar ao nosso site. E sempre que selecionamos um elemento aqui e o arrastamos e soltamos em qualquer coluna aqui ou seção, no momento em que o soltamos, é o elemento ativo. E as mudanças nesse elemento para dizer que agora você está fazendo alterações nesse elemento específico. Anteriormente, na minha aula anterior, tínhamos um sistema um pouco diferente. Agora estou percebendo que temos esse item da grade. Não estava disponível nas aulas anteriores que publiquei, então isso deve ser novo. Deixe-me encerrá-los nas aulas anteriores em que eu estava usando contêineres, e é isso que vamos usar. Podemos simplesmente arrastar elementos daqui e soltá-los dentro dos contêineres também. Vou voltar para cá. Deixe-me encerrar isso. Se eu derrubar todos esses painéis, esses painéis contêm os diferentes elementos que o Elemental nos fornece Agora, como você pode ver, temos os elementos da versão pro. Eles só podem ser acessados se você pagou pelo elemental pro Mas nos painéis Wpress básicos e gerais, temos elementos livres Então, se eu expandir o Wpress, temos elementos que podemos arrastar e soltar aqui E agora que eu o descartei, agora isso muda para editar páginas porque esse é um elemento de páginas. Se eu desmoronar isso e for para o general. Se eu soltar uma caixa de imagem logo abaixo quando a linha rosa aparecer, se eu a soltar lá, isso muda para editar a caixa de imagem porque é um elemento da caixa de imagem. E essas são as configurações do elemento da caixa de imagem. Agora, uma coisa que você notará sobre cada elemento colocamos aqui é que ele tem três guias. Uma guia de conteúdo, uma guia de estilo e uma guia avançada. Então, na guia de conteúdo, é aí que forneceremos o conteúdo que deve ser exibido pelo elemento. Então, por exemplo, se for uma imagem, se for uma caixa de imagem, é claro, ela precisa de um tipo de conteúdo de imagem. Então, aqui podemos fornecer a imagem. Como exemplo, deixe-me ir ao meu computador e selecionar isso. Em seguida, selecione. Agora esse é um conteúdo que adicionamos. Mas agora, por dentro, é claro, conteúdo também pode ser texto, e aqui está o texto. Aqui está o título, aqui está o título. Portanto, isso é provisão de conteúdo. Agora, uma vez que fornecemos o conteúdo, podemos estilizá-lo, ou seja, podemos dar aparência, cor, tamanho, como queremos que ele apareça. Podemos estilizá-lo nesta guia. Nas guias avançadas, temos coisas como margem e preenchimento, e resposta onde queremos que seja exibida, temos Então essa é a guia avançada, e quase todos os elementos que adicionamos à página terão essas configurações de conteúdo, estilo e avançado. Agora, se eu voltar para a lista e fechar o geral, é claro, se eu expandir P, eles têm bloqueios e não podemos acessá-los. Mas agora, lembre-se de que, quando estávamos instalando o Elementor, quando pesquisamos elementor no diretório de plug-in do Wpres, vimos outros Esses são plug-ins de terceiros criados para adicionar mais complementos elementares a essa lista Portanto, sempre que instalarmos qualquer um desses plug-ins, ele será listado aqui e trará seus próprios elementos que podemos arrastar para nossa página elementar. E continue construindo. E alguns desses elementos que obteremos gratuitamente com esses outros complementos de terceiros são os mesmos que estão os mesmos que disponíveis apenas com o Elementor Pro Em outras palavras, embora não possamos obter alguns deles , como loop carousel ou form, com o elementor, podemos obtê-los instalando esses complementos de terceiros relacionados ao elementor, e poderemos usá-los gratuitamente, e você verá A próxima coisa que queremos ver está aqui embaixo, temos o ícone de visualização. Portanto, se eu atualizar esta página, depois de fazer alterações, você poderá clicar em Atualizar e visualizar as alterações. Isso abrirá uma nova guia, e agora é assim que nossa página se parece. Aqui temos o modo responsivo quando criamos a página e estamos prontos para torná-la responsiva em diferentes tamanhos de dispositivos, desktop, tablet e celular, podemos clicar aqui E agora teremos essas três opções. Podemos mudar para visualização em tablet e visualização móvel, e podemos fazer ajustes nesse tamanho de tela específico, e isso afetará apenas esse tamanho de tela. Assim, poderemos ajustar o tamanho de cada tela para que, independentemente de onde você esteja visualizando o site o site tenha uma aparência incrível. Agora, aqui. Agora, deixe-me clicar nele para me livrar do modo responsivo O terceiro aqui é história. E isso é como uma cápsula do tempo. Isso nos permite voltar a um ponto no tempo. Portanto, esta é uma lista de todos os movimentos que fizemos desde a abertura desta página. Lembre-se de que começamos a editar. Se quisermos nos livrar de todas as alterações que fizemos após a adição e do ícone que adicionamos, podemos clicar no ícone adicionado. Lembre-se de que há um momento em que adicionamos esse ícone. Todas as mudanças que vieram depois disso agora são descartadas. Se você quiser refazer isso, podemos voltar para talvez a hora que removemos o contêiner, talvez a hora em que adicionamos a caixa de imagem ou podemos voltar à edição iniciada. Foi quando a página estava em branco. Então, isso é como uma cápsula do tempo e permite que você retroceda e avance em seu projeto Se você não gostar das seis alterações feitas, podemos voltar à época anterior à sua realização. Agora, esse é o ícone para abrir o navegador. Finalmente, aqui, podemos fazer alterações na página. Assim como o nome da página, podemos alterá-lo. Minha postagem. Podemos alterar o layout da página, talvez para a largura total elementar. E agora tem toda a largura, de ponta a ponta, e muito mais. Veremos como fazer todas essas coisas à medida que avançamos. Finalmente, quero que entremos neste menu de hambúrguer. Temos várias configurações aqui. Eu realmente nunca toco nessas configurações aqui, exceto nas preferências do usuário, e há essa coisa que chamamos de alças de edição. Essa é uma ferramenta muito útil para um usuário regular do ensino fundamental Deixe-me mostrar o que quero dizer. Se voltarmos aqui e dissermos básico, deixe-me arrastar um contêiner e soltá-lo lá. Agora, temos um contêiner, deixe-me voltar aqui e arrastar um título. Agora, se eu quiser duplicar esse título, terei que passar o mouse sobre ele e clicar com o botão direito do mouse Essas são três coisas que eu tive que fazer. Passe o mouse com o botão direito do mouse em duplicar. Mas agora, se entrarmos nesse menu, as preferências do usuário e ative as alças de edição. Com essas alças de edição ativadas, tudo o que preciso fazer é passar o mouse sobre isso e duplicar Passe o mouse sobre isso, exclua. Se eu for aqui, isso não estava aqui antes. Se eu acessar as preferências do usuário, desabilitar isso, não temos isso aqui. Portanto, se eu quiser duplicar esse contêiner, preciso clicar com o botão direito do mouse em duplicar Mas se tivermos as alças de edição ativadas. Agora temos esse ícone extra aqui, e eu posso duplicar rapidamente essas seções Então essa é a única configuração com a qual eu costumo mexer aqui. Na outra, examinaremos as configurações do site à medida que progredimos , porque há uma seção na qual falaremos brevemente sobre isso. Mas, no geral, isso é tudo que eu queria mostrar sobre o espaço de trabalho elementar Veremos muito mais sobre o espaço de trabalho à medida que progredimos à medida que criamos nosso blog Então, na próxima lição, vamos instalar o tema astra Então, eu vou te ver em breve. 7. Instale um tema: Então, agora que tivemos uma visão geral rápida do espaço de trabalho elementar, é hora de instalar o tema wordpress que vamos usar Agora, todo site wordpress deve ter um tema porque o tema e o construtor determinam a aparência do site. Então, para instalar um tema wordpress, vou entrar nos temas de aparência. E, por padrão, toda vez que você instala o WordPress, sempre há um tema padrão já instalado, e geralmente é o tema daquele ano. Então, agora estamos em 2024, então o tema é 2024, e é o tema ativo No ano passado, era 2023. No ano anterior, era 2022. Então, primeiro de tudo, na verdade, deixe-me deletar isso. Em seguida, também excluirei 2023. E agora ficamos com 2024. Mas queremos usar o Astra. Então, vou adicioná-los. Então eu vou até o Astra e instalo. Lá vamos nós. Então, deixe-me clicar em Ativar. E aqui estamos. Portanto, o Astra agora é o tema ativo em nosso site e 2024 é o tema alternativo Portanto, caso, por algum motivo, Astra quebre, ele para de funcionar conforme o esperado O site voltará ao tema de 2024. Por isso, é sempre uma boa ideia deixar um tema alternativo padrão em seu site E, basicamente, é assim que se instala um tema were press. Na próxima lição, vamos começar com a criação real do site. Então, nos vemos em alguns minutos. Não vá muito longe. 8. Adicione o logotipo: R. E, bem-vindo de volta. Então, agora é hora de criar a Navbar ou o que chamamos de seção de cabeçalho Deixe-me mudar para o site de referência. Aqui está o cabeçalho do site. A primeira coisa que vamos fazer é adicionar o logotipo. Mas para criar o cabeçalho em si, usaremos um plug-in especial que é um complemento do elementor e é chamado de Elements Kit Elementor add elementor e é chamado de Elements Kit Elementor Então, vamos entrar aqui. Vamos aos plug-ins, adicione novos. E no campo de pesquisa, vamos pesquisar por Elementor E aqui estamos. Onde está o kit de elementos. Sim, aqui mesmo. Então instale agora. E vamos ativá-lo. Lá vamos nós. Então, agora ele está instalado. Então, agora, para criar um cabeçalho, vamos passar o mouse sobre o kit de elementos e escolher o rodapé do cabeçalho E agora teremos que passar por esse conjunto de kits de assistentes para elementos, apenas para garantir que alguns desses widgets estejam disponíveis no front-end do nosso editor por padrão, porque se usarmos as configurações básicas, alguns dos widgets aqui não estarão ativados por padrão, então não estarão disponíveis para nós no Então, eu gosto de usar o avançado. E se eu voltar a ligar isso, acho que um desses está ligado Deixe-me voltar ao básico. Veja o construtor de widgets. Agora está ligado, assim como muitos outros que estavam desativados na configuração básica. Próxima etapa. Próxima etapa, próxima próxima. E, finalmente, o kit Now elements está configurado e pronto para ser usado no front-end. Então, vamos para o início do rodapé. Agora é aqui que devemos ver uma lista de todos os cabeçalhos e rodapés todos os cabeçalhos e rodapés que criamos para Vamos nos livrar desses anúncios. Agora, digamos que adicione um novo. Vamos dar um nome a ele. Cabeçalho e o tipo é cabeçalho. Quando estivermos construindo, o poder selecionará o rodapé e queremos que ele esteja disponível em todo o site Esses outros estão disponíveis apenas com a versão pro do plug-in. Agora vamos ativá-lo. Você pode desativar seu cabeçalho em toda a seção do cabeçalho quando talvez esteja fazendo alguma manutenção no cabeçalho e não queira que as pessoas possam vê-lo Mas agora queremos que esteja ativo. Agora, podemos salvar as alterações e elas serão listadas aqui, mas também podemos ir diretamente para editar o conteúdo, e o Elementor o salvará automaticamente Nós o encontraremos aqui na próxima vez. Mas agora, clicar em Editar conteúdo será levado para o front-end, onde agora podemos começar a criar o cabeçalho. Se eu recolher tudo aqui, todos esses painéis, como mencionei durante o tour elementar, sempre que adicionarmos um complemento relacionado ao elementar, ele será listado aqui E aqui estamos o kit Elements e o rodapé do cabeçalho do kit Elements Então, aqui podemos obter todos os elementos de que precisamos para criar essa seção de cabeçalho. Então, um dos elementos que obteremos com isso, e eu mencionei, poderemos obter elementos que, de outra forma, precisaríamos pagar para usar no Elementor Pro é o menu de navegação do kit Elements, porque se digitarmos aqui, NV porque se digitarmos aqui, Você verá que temos o menu NAV. Isso é o que obtemos com o Elementor Pro. Portanto, não está disponível para nós com uma versão gratuita do elementor, mas o kit Elements NAV está Então, agora vamos começar com o logotipo. Então, vou clicar em Mais. E lembre-se, mencionamos anteriormente Elementor não tinha essa opção de grade, mas agora tem E isso é bom porque cada plug-in precisa ser atualizado e aprimorado continuamente. E o Elementor é um dos plug-ins mais atualizados e aprimorados do mercado É por isso que é tão popular. A cada nova semana, eles têm algo novo, algo incrível para adicionar ao elementor Então, o Grid é a coisa mais nova. Nos meses anteriores, estávamos usando o Flexbox Então, se eu clicar em Flexbox, teremos essas opções Se você fez minha aula anterior, você já conhece essas estruturas de contêineres. Assim, você pode voltar e selecionar a grade. E agora temos essas novas estruturas com as quais eu não brinquei. Provavelmente abordarei as grades na próxima aula que publicarei, mas nesta aula, usaremos apenas as estruturas flexbox Portanto, tenha isso em mente. E agora, para começar, porque nosso cabeçalho tem três seções. Três colunas, uma, duas, três. Esses são três contêineres. Vamos usar essa estrutura. Então, vou clicar nele, e agora temos esses três contêineres. No primeiro contêiner, vamos clicar no sinal de adição. E aqui, vou apenas pesquisar, na verdade, deixe-me resumir essas coisas e abrir o básico. E agora, vamos selecionar a imagem e soltá-la lá. Esse é um elemento de imagem. E agora podemos seguir em frente e selecionar nosso logotipo. Agora, eu não tenho nenhuma imagem ainda porque esta é uma instalação nova. Então eu posso ir para selecionar arquivos. E eu preparei essa pasta que tem todas as imagens que usei no site de referência, e vou disponibilizá-la abaixo deste player de vídeo. Então, confira na guia projetos e recursos. Você encontrará o link para download lá. Se você quiser usar minhas imagens, mas também pode usar as suas. Então, vou selecionar o logotipo. E aqui está, clique em Selecionar e agora temos nosso logotipo. Atualize isso. E vamos pré-visualizar as alterações, e é assim que se adiciona o logotipo. Então, na próxima lição, vamos adicionar um elemento NV Esse elemento é composto por itens. Te vejo em breve. 9. Adicionar um elemento Nav: A, bem-vindo de volta. que adicionamos o logotipo do nosso site, é hora de adicionar o menu NAV Então, voltando aqui, vamos ao nosso editor e, claro, agora aqui, vou digitar NV e arrastar o elemento do menu NAV do kit de elementos para esse estágio E uma vez que o deixamos lá, agora é o elemento ativo. Então, agora, a primeira opção aqui nas configurações do menu de conteúdo é selecionar menu. Quando clicamos nesse menu suspenso, devemos ver uma lista dos menus que criamos no painel. Mas agora não temos nenhum menu, o que significa que precisamos criá-lo. Então, primeiro de tudo, atualize isso. E eu quero fechar o chip de nomes e a aba Softacular. Então, ficamos com isso. E eu quero clicar nesse menu de hambúrguer e sair para o painel E aqui estamos. Deixe-me fechar essas coisas. Até isso. Então, agora queremos criar um menu. Então, vamos ao menu de aparência. E aqui estamos, como você pode ver, crie seu primeiro menu abaixo. Assim, podemos dar um nome ao nosso menu. Ou, digamos, menu principal. E agora, uma coisa que você notará aqui é dar um nome ao seu menu e clicar em Criar menu. Então, vamos clicar em Criar menu. Mas antes de fazermos isso, observe que agora adicionamos itens de menu, e esta seção está desatualizada, porque precisamos criar o menu Então, deixe-me clicar em Menu principal para criar o menu principal, nosso menu principal e, em seguida, criar menu. E agora, essa área está ativa, o que significa que agora podemos adicionar itens de menu ao nosso menu, como diz aqui, adicionar itens de menu da coluna à esquerda, esta coluna. Então, se eu fechar isso, um item de menu pode ser uma página da web, uma postagem de blog, um link personalizado, uma categoria, o que você quiser. Mas, nesse caso, vamos usar páginas, as páginas em que criamos. Mas ainda não temos páginas. Isso significa que precisamos criar várias páginas porque, se mudarmos para nosso site de referência, essas são páginas da web. Se clicarmos em artigos, seremos direcionados para a página de artigos. Deixe-me clicar nisso. Aqui estamos. Portanto, esta é a página de arquivo de artigos. Então, essencialmente, queremos criar páginas da web. Então, agora que já criamos nosso menu e ele está salvo, podemos acessar as páginas com segurança, passar o mouse sobre as páginas Clique com o botão direito do mouse em Adicionar novo. Abra o link nas páginas da nova guia, clique com o botão direito do mouse em Abrir link na nova guia. Pages, um novo link de caneta em New Tab. Então agora temos o Deixe-me fechar isso. Agora temos essas três páginas que estamos prestes a criar. Vamos criar artigos, vídeos e contatos na página inicial. Vou apenas publicar. E agora isso foi publicado. Então, vamos criar mais um, botão direito do mouse em Adicionar novo. Isso é opcional. Se você não tem vídeos que queira compartilhar. Tudo bem. Agora, se voltarmos aqui e clicarmos nas páginas ou em todas as páginas, veremos todas as páginas que criamos. Agora, lembre-se de que, quando instalamos o WordPress, ele veio com algumas páginas pré-instaladas, como a página de amostra e a página de rascunho da política de privacidade. Então esta é a página do elemento que foi gerada quando estávamos instalando o elemento. Então, vou selecionar isso. Esses três editam esse menu suspenso, vão para a lixeira e o aplicam Agora, essas são as quatro páginas que criamos. Agora podemos voltar ao menu de aparência, porque já criamos nosso menu, agora podemos adicionar esses elementos ao menu. Selecione todos eles e adicione ao menu. Aqui vamos nós. Agora podemos arrastar para reorganizá-los. O vídeo vem após o contato. Não. O contato é o último item. Em seguida, salve o menu. Agora podemos fechar tudo isso. Agora, voltando ao rodapé do cabeçalho do kit Elements Aqui está nosso cabeçalho. Podemos clicar em editar com o Elementor, mas quero abrir o link em nova guia para que possamos deixar o painel intacto Então, vamos mudar para o editor de cabeçalhos. E aqui estamos. Foi aqui que paramos. Vou selecionar o elemento NAV. E agora, neste menu suspenso, aqui está o menu principal. Vamos selecionar isso e agora ele está exibindo os itens do menu. Vamos alinhá-lo à direita desse jeito. E é assim que se adiciona um menu NV. Agora, vamos estilizá-lo. Não se preocupe. Como você pode ver, nosso site de referência tem uma boa área de nV bem alinhada Mas isso parece um pouco estranho. Nós vamos cuidar disso. Mas isso é como adicionar o elemento n ao nosso site. Na próxima lição, vamos adicionar esse botão aqui mesmo que abre essa barra lateral com algum conteúdo extra na lateral. É chamado de elemento off Canvas. Te vejo em breve. 10. Button off-Canvas: Então, agora é hora de adicionar esse botão aqui que abre essa barra lateral ou essa barra lateral fora do Canvas que tem alguns artigos extras. Então, voltando para nossa estação de trabalho. Aqui estamos, vamos usar outro plug-in relacionado ao elementor Então, vamos voltar aqui, os plug-ins adicionam novos. Digamos que complementos e modelos elementares do elementor Royal. Então, vou instalar isso agora. Tem 300.000 instalações ativas, muito populares. E eu vou ativá-lo. Então, vamos pular isso. E agora aqui estamos. Esses são modelos. Então, vamos para o front-end e atualizar esse editor. E agora vamos atualizar esta página. Tudo bem Então, resumindo tudo aqui, aqui estamos Royal acrescenta e Royal adiciona salários premium. São premium. Não podemos tê-los. Mas pelo menos eu queria te mostrar que aqui estamos. Temos muitos elementos gratuitos para usar aqui, e um deles é o off Canvas. Agora, para tornar seu trabalho mais rápido, basta digitar conteúdo do Canvas, aqui estamos. Vou arrastá-lo e soltá-lo aqui. E lá vamos nós. Então, agora, o que isso diz? Artigo popular. Então, embora ainda esteja selecionado, é o elemento ativo aqui. Podemos dar a ele um nome diferente logo abaixo do título do botão de conteúdo. Digamos que artigos em destaque. Eu atualizo isso e podemos alinhá-lo à direita. Então, logo abaixo, temos uma linha, à direita, e agora ela será empurrada para esse fim. Lá vamos nós. É assim que se adiciona a tela externa. Obviamente, agora, quando clicarmos nela, ela exibirá uma barra lateral em branco e preencheremos isso com o conteúdo que queremos Mas faremos isso em uma lição posterior, quando tivermos artigos para mostrar. Mas você pode exibir o que quiser, não apenas artigos. Então, por enquanto, só queríamos exibir esse botão para que pudéssemos ter um cabeçalho completo. Na próxima lição, vamos seguir em frente e estilizar o cabeçalho. Então, eu vou te ver em breve. 11. Estilo do cabeçalho: Então, agora é hora de estilizar a seção do cabeçalho porque, no momento, cada elemento parece um pouco estranho. Então, quando adicionamos um contêiner, seção ou coluna, ele vem com algum preenchimento e margens padrão Cada elemento tem preenchimento e margens aplicados a ele por padrão, e podemos ajustar Então, primeiro de tudo, se selecionarmos o kit elemento por elemento, como você pode ver abaixo aqui, ele tem uma margem enorme e está aqui em cima. Então, se formos para avançado depois de selecionar esse avançado, vamos dividir isso e aquilo. E agora vamos reduzir a margem inferior até esse ponto, e também vamos reduzir a margem superior até esse ponto. Talvez digamos 4040, assim. Agora, uma coisa sobre contêineres é que você pode alinhar os elementos que estão dentro Então, se selecionarmos esse contêiner e o layout, podemos justificar o conteúdo e dar uma direção ao conteúdo Eu vou te mostrar onde eles se aplicam. Mas, por enquanto, vamos analisar o conteúdo do Justify. Como você pode ver aqui, temos esse ícone que tem uma linha superior mais longa para mostrar que o elemento está alinhado na parte superior ou justificado na parte superior Neste terceiro ícone aqui, a linha mais longa está na parte inferior para mostrar que os elementos dentro desse contêiner, o contêiner selecionado, estarão na parte inferior Então, se eu selecionar isso, tudo dentro será empurrado para baixo, e temos esse que mostra o centro. Então, se clicarmos nisso, tudo será alinhado ao centro no eixo vertical Então era isso que queríamos. Vamos fazer o mesmo com isso, selecione esse contêiner contendo esse elemento de tela. Vamos justificar e alinhar isso no meio. Vamos fazer o mesmo com o logotipo, alinhe-o no meio, mas você não notará nenhuma alteração porque ele está ocupando 100% da altura e largura Então vamos lá. Se eu disser atualize e visualize as alterações. Agora, tudo está alinhado corretamente. Agora, à medida que avançamos para a seção de heróis e outras seções, faremos ajustes nessa seção de cabeçalho porque, lembre-se de que, em nosso site de referência, quando começamos a rolar, ela precisa ser reduzida. Em primeiro lugar, como você notou, ele encolhe e também deve permanecer pegajoso na parte superior. Então, veremos como fazer isso nas próximas aulas. Por enquanto, queríamos apenas garantir que tudo estivesse alinhado corretamente Então, isso é tudo por enquanto. Mas antes de prosseguirmos, você notará aqui que não temos um espaçamento tão grande quanto em nosso site atual Então, vamos remover isso. Então, eu quero selecionar esse contêiner que contém tudo, e eu quero ir para avançado e remover o preenchimento padrão, e agora ele recolhe Porque, como eu disse, cada elemento que você adiciona tem um preenchimento padrão e uma margem aplicados a ele Então, vamos atualizar isso. E vamos analisar as mudanças. Lá vamos nós. Então era isso que queríamos. Então é assim que se adiciona o cabeçalho. Na próxima lição, vamos começar a trabalhar na seção de heróis. Então, se formos para casa, esta é a seção de heróis. Vamos ver como criar essa peça. Então, nos vemos em breve. Não vá muito longe. 12. Definir a página inicial do WP: Agora é hora de trabalhar na página inicial, e começaremos com essa seção de heróis aqui. Ele tem alguns padrões interessantes no plano de fundo e, em seguida, um texto de cabeçalho e uma breve descrição. Agora, enquanto ainda estamos aqui no site de referência, se clicarmos no blog de ação ou no logotipo do nosso site, seremos redirecionados para a página inicial E este é o domínio da nossa página inicial, seu site Agora, toda vez que as pessoas entrarem em seu domínio.com, elas devem ser direcionadas para a página inicial que Mas quando voltamos ao nosso site agora, não temos nossa própria página inicial definida. Há uma página inicial padrão definida pelo WordPress quando você a instala. Deixe-me te mostrar. Então, se eu voltar ao nosso editor e selecionar esse logotipo, podemos transformá-lo em um link. Então, selecionarei o URL personalizado e poderemos inserir o URL da nossa página inicial. Então, será wordpress evthing.com. E no seu caso, será um website.com. Atualize isso e vamos pré-visualizar as alterações. Agora, quando passamos o mouse sobre isso, observe que ela muda nossa mão para mostrar que você pode clicar E se clicarmos nisso, isso nos levará à página inicial padrão do hello world gerada pelo W press quando você a instala. Mas nós não queremos isso. Estamos trabalhando em uma página inicial diferente que vamos criar com o elementor, então precisamos configurá-la Voltando ao nosso painel, vamos às páginas. Lembre-se de que criamos nossa própria página inicial, e essa é a página inicial que queremos definir como a página inicial real apontada por esse nome de domínio Então, voltando aqui para configurá-lo, vamos para a leitura de configurações: Vamos remover isso. E nas configurações de leitura, sua página inicial exibe uma página estática, e podemos selecioná-la aqui, página inicial. Mudanças na venda. Agora, se eu voltar aqui e atualizar esta página, vamos pré-visualizar as alterações Se eu clicar no logotipo aqui, serei redirecionado para a página inicial que criamos Essa é a página inicial anterior e não a estamos mais usando. Agora que temos nosso próprio conjunto de páginas iniciais, agora podemos construí-lo com o elementor e é isso que faremos nas próximas aulas Então, eu vou te ver em breve. Não vá muito longe. 13. Configurações básicas de página do Astra: A, bem-vindo de volta. Então, agora que definimos nossa página inicial, nosso nome de domínio agora aponta para a página que vamos criar com o Elementor É hora de editá-lo e realmente construí-lo com o elementor Mas antes de fazermos isso, precisamos fazer algumas configurações no back-end e elas serão configurações do Astra porque o tema é Astra e algumas configurações é Astra e algumas Então, para ir ao editor de back-end, podemos ir para a página de edição. Clique nisso. E agora aqui estamos. Ou enquanto estivermos dentro do painel, podemos acessar as páginas publicadas. Você pode clicar em publicar ou simplesmente clicar nas páginas para ver as páginas publicadas, e aqui está a página inicial, clique em Editar E estamos no mesmo lugar. Então, deixe-me clicar em Voltar, e agora estamos lidando com isso aqui. Agora, antes de continuarmos, vamos mudar para esse editor de cabeçalhos. Agora terminamos com o cabeçalho por enquanto, então não precisamos desse editor porque não é aqui que vamos criar a página inicial. Este era apenas o editor apenas para o cabeçalho. Então, eu posso simplesmente fechar isso e isso. Então, agora ficamos com isso. Então lembre-se, instalamos o Astra porque é o nosso tema. Ele tem algumas configurações que precisamos definir. Então, entrando aqui, você verá que temos esse ícone. Se eu selecionar isso, embaixo do contêiner, precisamos selecionar a largura total. Isso significa que nosso site ou página da web será executado de ponta a ponta, como você pode ver no padrão de fundo. Reduza isso. Vamos para a barra lateral. Não queremos que tenha barras laterais porque vamos construir nossa própria barra lateral. Não vamos usar as barras laterais padrão. Então, nenhuma barra lateral derruba isso. E não se preocupe com essas configurações aqui. estilo de contêiner será aplicado somente quando o layout estiver definido como normal ou estreito, estreito ou normal, mas selecionamos a largura total. Então, não precisamos mexer com isso. O mesmo caso se aplica à barra lateral. Como não selecionamos nenhuma barra lateral, não precisamos nos preocupar com isso. Reduza isso. Em seguida, precisamos desativar esses três elementos. Agora, antes de desativá-los, deixe-me atualizar isso. E vamos ver a página, clique com o botão direito do mouse em abrir link em uma nova guia. Agora que transformamos a página em toda a largura sob o contêiner, toda a largura, observe o título da página inicial foi movido para a borda. Outra coisa que você notará aqui é que temos esse AStrag de volta aqui, precisamos desabilitar tudo isso porque vamos criar nossos próprios cabeçalhos e todas essas Então, se eu desativar essa atualização, volto aqui e atualizo a página Agora o pé sumiu. Esse é o cabeçalho. Vamos desabilitar isso. Atualize isso. Volte aqui, refresque-se. Oh, espere. Essa é a área do banner. Deixe-me desativar essa atualização. Atualize isso. Lá vamos nós. Então, agora temos uma tela em branco para trabalhar enquanto construímos nossa página. Voltando aqui, vamos ver o que mais precisamos configurar. Acho que temos tudo coberto, mas também precisamos definir mais uma configuração aqui, que é o modelo. Mas essa é uma configuração do wordpress, não uma configuração astra, mas é crucial Então, modelo, precisamos usar a largura total do elemento. Atualize que essa opção é disponibilizada quando você instala o elementor Se você não instalou o elementor, não terá essa opção de modelo. Lá vamos nós. Agora volte aqui, controle R para atualizar a página, e agora temos todas as configurações básicas do conjunto de temas Agora estamos prontos para começar a construí-lo com o elementor e faremos a mesma coisa ao trabalhar em todas essas outras páginas Na próxima lição, vamos ver como criar essa seção de heróis. Te vejo em breve. 14. Seção de herói da página inicial: Então, agora é hora de começar a trabalhar na seção de heróis. Então, voltando para nossa estação de trabalho. Deixe-me encerrar isso. E enquanto ainda estamos aqui no editor de back-end da página inicial, clicarei em Editar com Elementor. E aqui estamos. Esse é o editor. E, claro, agora não podemos editar o cabeçalho porque esse não é o editor que usamos para criar o cabeçalho. Construímos o cabeçalho separadamente. Então, aqui estamos construindo a página. Então, clicarei aqui para adicionar uma caixa flexível e seguiremos com a direção dessa estrutura descendo. Então, vou selecionar isso porque , como você pode ver aqui, tudo está acontecendo. Temos um ícone e, abaixo dele, temos o cabeçalho e, abaixo dele, temos isso. Então, vou selecionar isso. Agora, aqui dentro, vou clicar no sinal de mais. Em seguida, vou digitar o ícone, arrastar esse elemento do ícone aqui e, quando o soltarmos, ele ainda é o elemento ativo aqui. Nós podemos mudar isso. Eu queria digitar lido. Talvez você possa selecionar algo assim, mas eu quero que o texto represente artigos. Então, vou selecionar isso. Insira e pronto. Em seguida, vamos selecionar um título. Então, para trazer de volta os elementos, lembre-se dizemos que você pode selecionar isso e agora vou clicar em um título. Também vou voltar e selecionar um editor de texto, também conhecido como um parágrafo. Lá vamos nós. Em primeiro lugar, selecionarei esse estilo, aliado ao centro Selecione isso, vá para estilo, A alinhe-o ao centro Agora, voltando a esse conteúdo, queremos alterá-lo para H porque cada página precisa ter um elemento H um. Um elemento H um é bom para SEO porque um elemento H um em cada página diz aos mecanismos de pesquisa do que se trata essa página. É como um resumo da página inteira. Sobre o que é esta página? Portanto, se você tiver várias páginas da web, cada página com seu próprio título H 1, especificando do que trata cada página, os mecanismos de pesquisa podem ter uma ideia clara do que é seu site e recomendá-lo nos resultados de pesquisa Em outras palavras, ter um H em cada página é bom para o SEO do seu site. Então, enquanto isso estiver selecionado, vou até aqui e selecionarei essa cópia. Entre nesta caixa e cole aqui. Não vou colá-lo aqui porque quando eu colar aqui, ele virá com qualquer pré-forma que tivesse Então, se eu colar aqui, como você pode ver, ele tem sua pré-formação e faço isso Portanto, é sempre uma boa ideia colar suas coisas aqui. Mas se quiser editá-lo, você pode clicar nele e digitá-lo dentro do próprio elemento. Então, volte ao estilo, alinhe-o no centro Quero selecionar esse texto. Carpa. Selecione o conteúdo desse elemento de texto. Selecione tudo isso para excluir. Então Control Shift V, não controle V. Control Shift V, vamos colá-lo sem qualquer preformidade Agora, vamos voltar a isso e ir para a cor do texto. Agora, lembre-se de que tínhamos aquela pasta. Eu disse que você pode encontrar abaixo este reprodutor de vídeo na guia projetos e recursos. Eu vou abri-lo. E lá dentro, você encontrará esses códigos de cores que usei no site original. Vou escolher essa cópia em azul marinho. E para essa cor, lembre-se de que selecionei isso, fui para estilo de título, cor do texto. Vou colar isso aqui, e agora é dessa cor. Agora, eu também quero mudar essa fonte tipográfica para Mont Monat, mas quero aumentar o peso para 900, que é preto, e também quero aumentar o tamanho para talvez Atualize isso. Vamos analisar as mudanças. E lá vamos nós. Mas agora, é claro, precisamos adicionar um pouco de espaço para respirar aqui. Então, deixe-me selecionar esse recipiente que contém tudo. E agora queremos ir para avançado e dar pouco de preenchimento na parte superior e inferior Lembre-se de que ele tem algum preenchimento padrão. Então, quando eu quebrar isso, o acolchoamento será removido nas laterais e na parte superior Mas o que queremos fazer é ir até o topo e dizer 50 ou digamos 100. E para o fundo, não há problema. Podemos simplesmente deixar isso. Na verdade, deixe-me dizer oito até lá. Agora, enquanto isso ainda está selecionado, quero que adicionemos esse padrão de fundo. Então, enquanto estiver selecionado, vou para o tipo de plano de fundo do estilo. Vou selecionar esse clássico. Isso revelará mais configurações. E aqui podemos adicionar uma imagem. Então, vou fazer o upload de arquivos, selecionar os arquivos aqui. Eu esqueci de colocar isso aqui. Então, deixe-me ir para ativos, FreeP Onde eu coloquei isso Então, aqui estamos. Eu o encontrei. Volte aos ativos, aos ativos finais, cole lá, e agora é o plano de fundo da seção de heróis. Então, vou clicar duas vezes nele, selecionar e agora está aparecendo. Agora, deixe-me fechar isso. Queremos ir para a posição. Eu quero que fique no centro desse jeito. Eu quero repetir, dizer não repita. E para o tamanho da tela, vamos tentar a capa. A capa parece boa. Que tal conter? Não, deveria ser um disfarce. Atualize isso. E deixe-me aumentar um pouco o acolchoamento na parte inferior Então, digamos que 50 assim, atualize e visualize as alterações. Lá vamos nós. Então, nossa seção de heróis agora está pronta. Está parecendo incrível. Na verdade, eu gosto mais dele do que do site de referência. Sim, está parecendo incrível. Então é assim que se adiciona a seção de heróis. Na próxima lição, vamos começar a trabalhar nessa barra lateral, a barra lateral do autor Te vejo em breve. 15. Barra lateral - Sobre mim: Então, agora é hora de criar essa barra lateral. Então, voltando ao nosso editor, aqui estamos. Vamos voltar aqui. Agora, você notará que temos dois contêineres contendo esses dois conjuntos de conteúdo. Então, o primeiro contêiner é esse, e esse é o outro contêiner. Portanto, é um contêiner de coluna dupla. Deixe-me mostrar você entrando aqui, vamos selecionar flexbox. Essa estrutura é assim. Agora, este site pode ocupar talvez, digamos, 40%. Certifique-se de que seja em porcentagem, não nessas outras unidades, 40%, e isso deve ocupar 60% para chegar a 100%. Exatamente desse jeito. Então, agora, aqui, podemos ir em frente e adicionar um recipiente. Então, isso é um contêiner dentro de outro contêiner, mas esse contêiner está vazio. É aqui que vamos colocar essa grade de postagem. Então, voltando aqui, podemos primeiro dar ao contêiner uma coluna de fundo, dessa cor. E essa cor está aqui, cópia de fundo da barra lateral porque essa é a barra lateral. Então, enquanto isso ainda estiver selecionado, o contêiner interno vai para estilo, cor do tipo de fundo. Vamos colocar isso aí, e agora mudou de cor. Vamos também selecionar a borda da barra lateral. Copie isso porque, como você pode ver, ele tem uma cor de borda. Então, voltando aqui, vou para o tipo de borda padrão da borda, sólido, e agora isso revelará a cor da borda Então, vou colar isso lá. Obviamente, se atualizarmos e revisarmos as alterações, a borda é muito grossa. Então, vamos dizer que precisávamos ser um. Atualize isso e vamos pré-visualizar as alterações, sem mais nem menos. Mas você pode torná-lo tão grosso quanto quiser. Outra coisa é que tem esses cantos afiados. Queremos torná-los lisos, assim como aqui. Então, voltando ao nosso editor, raio de borda, vamos dar 20 Atualize isso e vamos pré-visualizar as alterações. Lá vamos nós. Agora, se adicionarmos um título aqui. Deixe-me colocá-lo aí. Vamos também adicionar alguns textos. Deixe-me pegar essa mensagem. Copiar. Selecione os textos, clique com o botão direito do mouse em colar, atualize. Visualize as alterações. Tem aquele canto arredondado. Mas a próxima coisa que queremos fazer é acessar o site de referência. Em primeiro lugar, deixe-me copiar este texto. Selecione isso. Exclua isso, depois Control Shift V, cole lá. Mas agora, quanto ao estilo, eu o quero alinhado à esquerda Vamos também voltar aqui sobre mim. Deixe-me copiar isso. Selecione isso e, em seguida, aqui em mim. O que mais temos? Temos essa imagem do autor e seu nome e título. Então, aqui embaixo, o que queremos fazer é adicionar um contêiner. Então, vou deixar um contêiner aqui. E agora, lembre-se, uma coisa sobre contêineres é que eles podem conter outros contêineres, isso está dentro disso, que está dentro disso. Então, aqui, podemos ter mais dois contêineres. Um para a imagem e outro para o texto, o nome. Ok. Vou colocá-lo logo abaixo disso. Então, agora temos esses dois contêineres dentro disso. Agora, se eu selecionar o contêiner externo que contém esses dois novos, esse contêiner, e vamos para a direção do layout. Lembre-se de que mencionei que falaremos sobre isso. Já vimos o que justify faz. Direção significa que você pode alternar da esquerda para a direita, de cima para baixo, da esquerda para a direita ou na horizontal. Isso significa que agora eles estão lado a lado. Também podemos mudá-los para a vertical. Isso é para baixo. O que queremos está lado a lado. Exatamente desse jeito. Agora podemos arrastar isso para torná-lo menor aqui, podemos colocar uma imagem, exatamente assim. Aqui, em primeiro lugar, deixe-me selecionar esse texto para estilizá-lo. Deixe-me escolher essa cor azul marinho. Copie esse estilo de texto com essa cor. Então eu também quero ir para a tipografia e dizer, com 900, mas precisa ser Exatamente desse jeito. Mas agora, vamos fazer com que talvez seja desse tamanho. Vamos ver. Sim, não é tão grande. Talvez tamanho 20. Agora, você notará que tudo está muito próximo da borda. Atualize isso. Visualize as alterações. Tudo está muito perto da borda. O que queremos fazer é selecionar esse contêiner que os contém, a barra lateral agora, o preenchimento avançado Não vamos quebrar esse link. Então, tudo o que digitamos em uma célula é aplicado às demais, e vamos dar a ela um preenchimento de 3030 Atualize isso. Na verdade, isso precisa ocupar Vamos até o contêiner mais externo que contém o contêiner da barra lateral e vamos fazer com que seja 30% Isso significa que eles devem ser 70%. Atualize isso. E agora parece mais uma barra lateral, desse jeito. Então, agora vamos adicionar uma imagem aqui. Selecionar o elemento da imagem. Vou selecionar isso para ir para AplodFiles. Selecione imagens. Agora eu vou precisar ir para Então eu encontrei minha imagem. Lá vamos nós. Selecione, e agora essa é minha imagem. Deixe-me duplicar isso. Agora, você notará aqui que eu não tenho aquelas alças de edição que mencionei no tour pelo espaço de trabalho Eu quero habilitá-los. Então, entrando aqui, nas preferências do usuário, habilite as alças de edição. Selecione isso. Agora eu posso duplicar isso, arrastar e soltar lá, e isso se torna meu nome Copie isso. Cole isso aí e, em seguida, especialista em produtividade. Esse é o seu título. Eu quero duplicar isso e colar isso lá, mas eu quero torná-lo bem pequeno, então tipografia Agora, você notará que o espaçamento entre esses dois é muito grande. Então, se eu selecionar isso e ir para lacunas e o layout, esse contêiner que contém as duas lacunas de layout abaixo justifica, podemos remover essa lacuna padrão de 20 Então, vamos fazer com que seja talvez cinco ou talvez zero. Portanto, não temos toda essa lacuna. Enquanto isso estiver selecionado, também quero diminuí-lo. Então, assim, selecione isso. Agora, selecione o contêiner que está segurando esse contêiner, e queremos justificar tudo no centro verticalmente dessa forma Então, selecione isso. Vamos avançar demais e reduzir a margem inferior. Então, nós os aproximamos. Atualize isso. selecionar esse contêiner que os contém. Quero ir para avançado e remover esse preenchimento para aproximar a imagem dessa linha invisível Agora, deixe-me selecionar esse contêiner avançado. Vamos para a margem esquerda. Vamos reduzi-lo até esse ponto. Atualize isso. Vamos revisar as mudanças. Lá vamos nós. Acho que criamos a barra lateral, mas vamos criar essa fonte. Vamos editar um pouco a fonte. Então eu vou voltar aqui, selecionar essa fonte, ir para o estilo, mudar a tipografia para Montserrat Deixe-me também selecionar isso. Mude para Montserrat. Entrar. Mas agora você notará no site de referência que está mais escuro e é azul marinho Então, deixe-me escolher esta cópia em azul marinho. Volte aqui. Enquanto isso estiver selecionado, vou para a cor do texto, colo isso, mas quero entrar aqui e torná-la 600, em negrito Atualize isso. Eu farei o mesmo para isso, selecione isso. Agora posso repetir as mesmas etapas ou selecionar esse texto com o botão direito do mouse em copiar. Selecione, clique com o botão direito do mouse no estilo de colagem. Basicamente, é assim que se cria a barra lateral. Na próxima lição, vamos ver como criar as postagens recentes. Barra lateral. Porque precisamos adicionar esses artigos recentes, e há algumas coisas técnicas que precisamos examinar. Então, eu vou te ver em breve. 16. Barra lateral - Postagens recentes: Então, agora é hora de trabalhar nesta barra lateral de artigos recentes. Voltando aqui, uma coisa que eu esqueci de fazer é selecionar esse texto e ir para a margem avançada, remover ou reduzir a margem inferior desse jeito Só para termos esse espaço menor aqui. Vamos aumentá-lo um pouco até esse ponto, atualizá-lo. Visualize as alterações. Agora é um espaçamento uniforme em comparação com a parte superior. Lá vamos nós. O que eu preciso fazer é duplicar isso logo abaixo, jeito, porque o que queremos fazer é criar isso Vou selecionar esses artigos recentes, copiá-los. Selecione isso aqui, cole isso e eu removerei isso. Agora nos resta fazer isso. Deixe-me remover isso também. Atualize isso. E agora, lembre-se de que falamos sobre os complementos elementares. Lembre-se de que adicionamos um kit de elementos. Vamos usar um elemento do kit de elementos para adicionar essas postagens recentes. Então, voltando aqui, vou procurar uma lista. Vou apenas digitar a lista, e então aqui estamos. Lista de postagens. Então, vou arrastar isso e soltá-lo logo abaixo dos artigos recentes. Deixe-me forçar isso abaixo dos artigos recentes. Tudo bem, deixe-me colocá-lo lá em cima. É um pouco complicado colocá-lo lá. Então eu vou arrastar isso e colocá-lo acima dele desse jeito. Agora, enquanto isso estiver selecionado, vou selecionar as postagens. Postagem da categoria. E agora podemos selecionar as diferentes categorias de postagens que queremos exibir aqui. Agora, ainda não temos nenhuma postagem, nenhum artigo ainda. Então, vamos deixar isso assim porque faremos isso na próxima seção. Mas agora, pelo menos nós o adicionamos, faremos algo a respeito em breve. Então, basicamente, agora preparamos o local que abrigará a postagem recente na barra lateral. Na próxima lição, vamos continuar e criar nossa primeira postagem no blog, também conhecida como um artigo. Te vejo em breve. 17. Crie uma publicação: Então, agora é hora de criar nosso primeiro post. E, claro, se voltarmos ao nosso site de referência, este é um único post. Esse é outro post, e esse é outro post. Então, deixe-me ver. Deixe-me abrir isso. Se abrirmos isso para lê-lo, vamos lá. Então é assim que parece. Tem essa imagem em destaque. Então, temos barras laterais aqui que pegamos emprestadas da outra página Nós vamos nos livrar disso. Nós temos o título. a data em que foi publicado e a categoria em que se enquadra. Então temos seu conteúdo. Abaixo, temos o nome do autor e nossa comida. Então, vamos ver como criar esse único post. Então, isso é o que chamamos de imagem em destaque, e vamos ver como configurá-la imediatamente. Então, voltando aqui, vamos voltar ao nosso painel. E da mesma forma que criamos nossas páginas, também podemos fazer o mesmo com nossa postagem. Mas antes de criarmos uma postagem, vamos ver todas as postagens que temos clicando nela. Temos a postagem Hello World. Então, deixe-me jogar isso no lixo. Nós não precisamos disso. Agora, digamos que adicione um novo. Da mesma forma que criamos uma página, podemos criar uma postagem. Então, vou dar a ele o primeiro nome. Deixe-me emprestar esse nome, o poder da priorização. Lá vamos nós. Precisamos definir o modelo padrão para elemento ou largura total. Em seguida, também precisamos entrar nas configurações do astra para definir a barra lateral completa, sem a barra lateral E para os elementos aqui, precisamos desativar todos eles. Publique isso e pronto. Então, agora está publicado. Mas antes de sairmos desse espaço, precisamos voltar às configurações da tecla W e definir uma imagem em destaque. Lembre-se de que essa é nossa imagem em destaque e, se não a definirmos, suas postagens não terão uma imagem na página. Essa imagem não aparecerá. Então, defina a imagem em destaque. Deixe-me ver qual imagem usar. Acorde. Então, vou para nossa pasta aqui. Acorde e diga definir imagem em destaque. Lá vamos nós. Agora, voltando ao nosso site de referência, esse texto aqui é o que chamamos de trecho Se você é escritor ou está escrevendo, sabe o que é um trecho e precisamos fornecê-lo se quisermos vê-lo exibido aqui neste local Na verdade, deixe-me copiar isso. Volte aqui, logo abaixo da imagem em destaque. Vamos continuar e colar nosso trecho. Atualize isso. Lá vamos nós. Agora, é assim que se cria uma postagem ou artigo no we press e adiciona uma imagem em destaque junto com um trecho Na próxima lição, vamos ver como exibir na página inicial aqui. Então, eu vou te ver em breve. 18. Exiba o post - Parte 1: Então, agora é hora de exibir nossa postagem no blog na página inicial. E, claro, se trocarmos aqui, queremos exibi-lo assim. Então, vamos fazer isso com outro incrível plugin relacionado ao elementor chamado adições premium para Elementor Então, vamos voltar para nossa impressora de trabalho. Volte para o painel. Vamos para casa. Vamos aos plug-ins, adicione novos. E aqui, vou procurar por Elementor. Aqui vamos nós. Então, queremos adicionar complementos premium para o elementor Então instale agora, ative agora que está ativado. Então, voltando ao front-end, se eu atualizar esse peso, antes de atualizar, vamos atualizá-lo E agora vamos atualizar a página. E agora, se eu derrubar esses painéis, aqui estamos. Temos complementos premium. E então, o que queremos, vou apenas digitar blog. E o que queremos é esse blog da PA premium addons. Então, vou arrastar e soltar isso dentro desse espaço. E agora, é claro, temos apenas uma única postagem no blog dentro da nossa lista de postagens. Só isso, e é por isso só isso é exibido. Mas quanto mais adicionarmos mais postagens no blog, mais teremos que mostrar aqui e acabaremos com algo assim. Então, agora, o que queremos fazer é estilizá-lo para que, quando adicionarmos novas postagens no blog, elas tenham automaticamente o mesmo estilo Então, voltando aqui, a primeira coisa que queremos fazer é mudar a orientação porque, como você pode ver, o texto deve estar desse lado, como em nosso site de referência. Então, enquanto isso ainda estiver selecionado, vou para o clássico depois mudo a capa para um lado. OK. Assim. E, claro, queremos dar uma coluna para que seja apenas uma coluna da esquerda para a direita, assim. Atualize isso. Vamos voltar para cá. Como você pode ver, o fundo é branco, como o plano de fundo do nosso site. Então, vamos remover essa cor cinza. Deixe-me desmoronar isso. Vamos ao estilo. Vamos para a caixa de conteúdo, cor do texto. Obviamente, antes de tudo, a cor do texto deve ser azul marinho. Deixe-me copiar isso. Teste a cor da caixa de conteúdo, cole e agora é azul marinho exatamente como este. Também devemos usar a tipografia e torná-la 600, sem mais nem menos A próxima coisa que queremos fazer é nos livrar desse fundo cinza. Enquanto estiver dentro da caixa de conteúdo, vamos mudar aqui para a cor de fundo, torná-la branca e agora ela é branca. Atualize isso. Vamos analisar as mudanças. Lá vamos nós. A próxima coisa que queremos fazer é, obviamente, alterar esse texto para azul marinho. Então eu vou voltar aqui, copie isso. Entre aqui. Enquanto isso estiver selecionado, vou para o título. Cor Vamos fazer com que seja azul marinho ao pairar, queremos que seja aquela cor rosada avermelhada Copie isso. Em Hover, queremos que seja aquela cor rosada avermelhada E, claro, nem é preciso dizer que precisamos que a fonte seja Monerat Monte um centro. Vamos dar um pouco de espessura, 900. Queremos que seja preto e podemos aumentar o tamanho um pouco. Talvez seja muito grande. Talvez desse tamanho. Sim, desse tamanho. E vamos reduzir a altura vertical ou o espaçamento entre linhas até esse ponto, atualize isso Também aumente um pouco o espaçamento na parte inferior do título, aqui mesmo, para afastá-lo dos metadados Nos metadados, esse é o nome do usuário. Então esse seria o seu nome, e eu vou te mostrar como mudar isso. Esta é a data em que a postagem foi publicada e se há algum comentário. Então, primeiro de tudo, vamos atualizar que eu quero entrar nas postagens para mostrar onde você pode alterar esse nome. Vamos para as configurações. Não, na verdade, vamos para usuários O usuários. E, claro, esse é o seu nome de usuário. Este é o mesmo nome de usuário que você recebeu quando estava instalando o wordpress dentro do spectaculars Então, podemos dizer editar. E rolando para baixo, aqui temos o primeiro nome. Você pode fornecer seu nome, sobrenome e aqui está o nome. Apelido. Você pode dar seu nome real. E Bessa Assim, você pode dizer o nome de exibição publicamente como qualquer nome que você queira que as pessoas vejam, atualizar o perfil. Vamos voltar aqui. Se eu atualizar o controle R, vamos lá. Agora diz o nome que eu especifiquei no back-end. Então, mais uma vez, enquanto isso ainda estiver selecionado, vamos editar a imagem. Então, voltando ao conteúdo, à imagem geral imagem em destaque, podemos aumentar a largura até onde quisermos. Talvez 35 seja bom para mim. Não vou mexer com a altura. Tudo bem. Então, agora, acho que agora, o que temos é bom o suficiente. Obviamente, como você pode ver em nosso site de referência, também temos este artigo para ler mais. Veremos como adicionar esse botão na próxima lição, à medida que fizermos mais alguns ajustes na forma como nossa postagem é exibida. Portanto, também precisaremos fazer algumas alterações nisso. Então, vamos ver como fazer isso na próxima lição. Te vejo em breve. 19. Adicionar conteúdo de post do Elementor: Portanto, antes de terminarmos de estilizar esta postagem, vamos criar o conteúdo da postagem no front-end com o elementor Volte aqui, queremos construir isso agora. Então, vamos voltar ao nosso editor dentro do nosso painel e vamos às postagens. E agora aqui estamos. Podemos editar, mas eu quero clicar com o botão direito do mouse e abrir o link em uma nova guia. Então, deixamos o painel intacto e agora vamos dizer que editamos com o Elementor. E aqui estamos. Então, agora, vou clicar neste sinal de adição, depois na caixa flexível, e queremos uma seção de coluna dupla ou um contêiner de coluna dupla Então, vou clicar nisso. E o motivo é porque também temos essa barra lateral e o artigo principal. Então, isso deve ser 30%. E eles deveriam ser 70%. Atualize isso. Tudo bem. Então, agora, é claro, vamos adicionar nossa imagem para começar. Então, vamos colocar uma imagem lá, e eu vou selecionar mesma imagem que usamos como imagem de destaque. E, claro, tem cantos afiados. Vamos seguir em frente e escolher o estilo. No raio da fronteira, vamos dar 2020. Atualize isso. Tudo bem. Lá vamos nós. Deixe-me copiar esse título mais uma vez abaixo dele, ainda dentro desse contêiner que contém a imagem. Queremos clicar nele e selecionar o título do título. Coloque-o dentro do mesmo recipiente. Clique duas vezes em colar lá. Claro, eu quero torná-lo um estilo H one. Coloque isso no centro. Claro, vamos selecionar essa cor aqui, azul marinho. Copie, cole na tipografia. Vamos fazer disso, Mont. Entrar. Vamos também fazer com que seja 900, desse jeito, e vamos reduzir a altura da linha para algum lugar lá. Atualize isso. Vamos rolar. Eu gosto disso. Em seguida, vamos criar o primeiro parágrafo. Então, vou clicar nele, adicionar um parágrafo, soltá-lo dentro do mesmo contêiner e, aqui, controlar a tecla Shift V para colar sem nenhum estilo Atualize isso. Agora, você notará aqui que temos essa categoria de produtividade, e falaremos sobre categorias mais tarde, e também temos a data. Então, vamos até nosso editor e pesquisar metadados. Matéria postal. Então, vou colocar isso aí. E como você pode ver, já está assim. Agora, por padrão, nossa postagem diz que está na categoria não categorizada, porque não criamos nenhuma categoria e não colocamos nenhuma postagem em nenhuma categoria específica Temos apenas uma postagem. Vamos ver como mudar isso. Atualize isso. E podemos espaçá-lo enquanto ainda está selecionado como avançado, quebrar isso e aumentar a margem superior e inferior. Na verdade, devemos aumentá-lo para 20 e mais, sem mais nem menos. Vamos analisar as mudanças. Lá vamos nós. Vamos adicionar esse título. Copie isso aqui. Na verdade, deixe-me duplicar isso, duplicar aquilo desse jeito Coloque-o logo abaixo desse parágrafo. Claro, vou selecionar isso. Primeiro de tudo, vamos torná-lo um H dois porque estamos tentando construir uma hierarquia, e é isso que os mecanismos de pesquisa procuram : uma hierarquia em uma página da web, começando com a H, resumindo a página e, em seguida, para os títulos principais, usamos Para títulos menores, usamos H três e assim por diante. Então, enquanto isso está selecionado, agora, esse é um estilo H dois. Vamos colocá-lo à esquerda. E já que eu copiei, deixe-me colar lá desse jeito Agora precisamos de uma imagem. Então, o mesmo caso se aplica a isso. Eu apenas duplico isso e arrasto. Coloque-o logo abaixo desse texto. Enquanto estiver selecionado, entrarei aqui selecionarei uma imagem daqui. Talvez digamos que essa imagem. Clique duas vezes nele. Selecione e pronto. Deixe-me duplicar esse texto. Então, estamos assumindo que essa é uma história e é feita de imagens Então esta é a imagem principal, e então temos um título, depois o ponto número um, uma imagem para resumir esse ponto Então temos esses textos. Podemos selecionar esses textos, ir para avançado, quebrar isso e aumentar a atualização da margem superior. Vamos analisar as mudanças. Rolando para baixo, e lá vamos nós. Então, agora, é claro, acho que aqui temos muito pouco espaço. Então, vou selecionar esse avançado. Selecione isso, aumente a margem superior. Assim mesmo. Agora, criar o resto dessas seções é a mesma história. E agora, para criar o resto das seções até o número três, você pode repetir o mesmo processo. Mas talvez seu artigo não precise ter todas essas imagens. Talvez você queira que seja prosa sem quebrar o texto. Assim, podemos remover essa imagem. E selecione esse texto, reduza essa margem superior até talvez lá. Agora podemos duplicar esse lugar logo abaixo. Duplique isso, coloque-o logo abaixo. Mude isso para o número dois. Copie isso, selecione isso, cole que talvez o número dois seja muito longo, então atualize isso, revise as alterações, rolando para baixo Lá vamos nós. Então, vou selecionar esse texto e adicionar mais parágrafos a ele Na verdade, eu deveria adicioná-lo aqui, não diretamente ali. Cole aí. Se você estiver digitando, você pode digitar diretamente lá, mas se estiver colando, cole aqui com o controle Shift V. Vou repetir o mesmo e o mesmo Agora podemos duplicar isso, colocá-lo abaixo disso Vamos chamar isso de conclusão. Copie isso enquanto estiver selecionado, cole-o lá. Então vamos copiar isso. Duplique esse lugar lá. Selecione tudo excluído, controle Shift v. Atualize isso. Essa margem é muito grande. Vamos ver, pré-visualizar isso. Lá vamos nós. Gosto da postagem do blog. Já está parecendo bom. Mas agora vamos colocá-lo na parte superior. Como você pode ver aqui, temos um bom espaçamento, aqui mesmo Selecione o recipiente que contém tudo. Avançado, quebre isso. Vamos dar talvez 50. Atualize e visualize as alterações. Assim. Então, agora, é claro, precisaremos adicionar a barra lateral aqui como temos no site de referência. E, claro, essa é uma lista de artigos recentes, e nós não a criamos. Então, vamos criar isso um pouco mais tarde. Algumas lições a partir de agora. Mas na próxima lição, vamos continuar e retomar o estilo. Deixe-me ir para casa, pois este é o meu lar. Vamos continuar a estilizar isso agora que criamos essa página Então, eu vou te ver em breve. 20. Exibir o post Parte 2: Então, agora voltando para nossa estação de trabalho. Acho que esse é o lugar. Se voltarmos aqui, agora que terminamos com isso, voltaremos para adicionar a barra lateral. Então, deixe-me fechar isso e agora aqui estamos. Este é o lugar em que estávamos editando a página inicial. Então, se eu pressionar Control R para ler. Aqui vamos nós. Então, agora também queremos mostrar esse botão de leitura do artigo. Então, vamos ver como fazer isso. Enquanto isso ainda estiver selecionado, vamos reduzir isso. Agora vamos procurar essa opção aqui. Opções de postagem, tipo de trecho, leia mais. OK. Exatamente. Então é aí que definir essa atualização. Agora podemos estilizar esse botão de ler mais. Então, entrando e, claro, como você pode ver aqui, temos metadados diferentes Você pode optar por exibir alguns e ocultar outros. Então, por exemplo, podemos ocultar os comentários, então esconda isso. Portanto, isso não mostrará os metadados dos comentários. Então, vamos entrar no estilo. E vamos procurar o botão. Vamos dar uma cor de fundo. Ah, então essa é a cor do texto. Então, queremos dar a ele uma cor de fundo. A cor do texto deve ser branca. Agora, é claro, desapareceu. Mas quando adicionamos uma cor de fundo, essa cor azul marinho deveria ser essa cópia rosa avermelhada Cor de fundo, cole isso e agora vamos lá. mouse, queremos alterar a cor de fundo para esse azul marinho, então a cor de fundo ao passar o mouse em azul marinho assim e, ao passar o mouse, eles devem ser rosa Agora, é claro, não temos preenchimento no botão, mas aqui podemos definir o preenchimento. Então quebre isso. À esquerda, podemos dar talvez 50. Não, talvez 40. À direita, 40 nos dez primeiros nos dez inferiores. Acho que 15 está bem. 15 15. Lá vamos nós. Agora, espaçando na parte superior do botão, acho que é uma boa posição. Diga isso. Vamos voltar à imagem em destaque do conteúdo e aumentar um pouco a largura. Queremos que seja mais quadrado do que retangular. Lá vamos nós. Também vamos voltar ao estilo, e temos metadados Não, vamos às categorias porque queremos editar isso e podemos remover esse preenchimento, desse jeito Agora, à esquerda, vamos dar 20 e à direita 20. Agora, vamos ao item um. Vou selecionar esse raio de borda. Vamos dar dez. Então agora ele tem aquele canto curvo Na verdade, vamos dar cinco, sem mais nem menos. Atualize isso e vamos revisar as mudanças. Eu gosto disso. Então, voltando aqui para o nosso site de referência, é isso que temos. Na verdade, eu o removi em nosso site de referência, mas vou deixá-lo nesse site específico que estamos construindo agora. Então, basicamente, é assim que você apresenta o post na sua landing page, na sua página inicial. Acho que agora parece apresentável e com estilo profissional. Agora que temos um bom estilo para o elemento do nosso blog, tudo o que precisamos fazer é criar mais postagens no blog, e elas serão exibidas aqui com o mesmo estilo. Eles herdarão o mesmo estilo, e a única coisa diferente será a imagem em destaque, o título, a categoria e todos esses detalhes, mas o estilo permanecerá o mesmo E veremos como fazer isso em aulas futuras. Mas agora, quero terminar esta lição aqui porque alcançamos o que queríamos. Queríamos estilizar a postagem do blog. Agora, na próxima lição, vamos deixar esse cabeçalho fixo porque quando começamos a rolar, ele está desaparecendo e queremos que ele permaneça fixo como aqui, como o que temos em Então, vamos fazer isso na próxima lição. Veja em breve. 21. Cabeçalho adesivo: Então, agora que temos nossa postagem no blog com esse estilo, queremos deixar esse cabeçalho fixo, como em nosso site de referência Então, voltando aqui, primeiro de tudo, quero fechá-los porque acabamos com eles. E agora, voltando aqui, lembre-se, fomos ao rodapé do cabeçalho do Elements Kit e criamos um cabeçalho Então é aqui que vamos deixar o cabeçalho grudento. Então, clique com o botão direito do mouse em abrir link em uma nova guia e entraremos lá. Mas antes de tudo, deixe-me fechar isso e aquilo. Então, vá até nosso editor aqui. Aqui estamos. Então, primeiro de tudo, antes de prosseguirmos, quero deixar esse botão rosa desse jeito e, ao passar o mouse, deveria ser azul marinho Estamos tentando manter a coesão da marca. Estamos tentando manter a consistência dessa marca. Então, estamos usando as mesmas cores em todos os lugares. Então, copie corretamente essa cor rosada avermelhada. Voltando aqui, selecione esse elemento, estilo, cor de fundo e cole lá. Em seguida, passe o mouse. Copie isso corretamente. Ao passar o mouse. Queremos que a cor de fundo seja azul marinho, desse jeito. Atualize isso. Agora, queremos deixar esse cabeçalho grudento na rolagem E para fazer isso, vamos adicionar outro relacionado ao elementor, chamado efeitos de cabeçalho adesivo para Então, voltando aqui, os plug-ins adicionam novos. Oh, vamos digitar Elementor. E aqui estamos. Efeitos de cabeçalho adesivo para elementor com 200.000 instalações ativas. Instale isso agora. Vamos ativar. E aqui estamos. Então, voltando aqui, vou atualizar esta página E isso significará que agora está listado aqui. Então, se eu fechar tudo isso, onde estão os efeitos de cabeçalho adesivo Ah, ele não será listado, vou apenas selecionar esse contêiner, depois ir para o layout de colapso avançado e agora temos efeitos de cabeçalho adesivo Então, eu vou habilitar isso. Agora isso revela todas essas configurações. Mas não vamos mexer com todos eles. Queremos mudar a cor de fundo para branco quando alguém começa a rolar Voltando aqui, no momento em que começamos a rolar, isso fica pegajoso Ele muda de cor para cinza muito fraco porque, se for transparente, não conseguiremos ver o texto quando estiver acima de outros textos, deixe-me mostrar o que quero dizer Então, agora, não vamos dar a ele uma cor de fundo. Vamos apenas ativar a viscosidade. Vamos para casa. Se eu começar a rolar, a cor não mudará para branco ou qualquer outra cor E isso significa que não podemos ver esses elementos. Mas agora, se mudarmos a cor do fundo, vamos fazer com que seja um cinza muito fraco que seja próximo ao branco Atualize isso. Vamos analisar as mudanças. Vamos para a página inicial. Comece a rolar. Sim, é um bom cinza, mas eu ainda quero que seja um pouco mais cinza. F 7f7f7. Acho que é um bom lugar. Sim, é um bom cinza. Então, agora, mas você notará que quando começarmos a rolar, ela não está diminuindo Enquanto estiver em nosso site de referência, parece que está diminuindo E é isso que queremos. Então, vamos voltar aqui. Enquanto isso ainda estiver selecionado e enquanto ainda estivermos usando efeitos de cabeçalho fixo Vamos reduzir o cabeçalho. Podemos dizer que reduza para talvez 60%. Também podemos reduzir o logotipo porque ele está dentro de um cabeçalho reduzido Então, podemos fazer isso talvez 60% também. Atualize isso. Nós podemos ver lá. Então eu vou para essa outra aba onde estamos em casa, e lá vamos nós. Exatamente desse jeito. Basicamente, é assim que o cabeçalho fica fixo. Na próxima lição, vamos falar sobre fundos globais. Te vejo em breve. 22. Definir fontes globais: Então, agora é hora de falar sobre fonografias globais muito rapidamente E antes de passarmos para fontes globais, percebo que não alteramos os efeitos de foco ou a cor desses itens do menu Então, vamos voltar aqui e selecionar os elementos, clique no elemento de menu N. Vá para o estilo. Feche o invólucro do menu, vá para o estilo do item de menu Agora, cor do texto do item de menu. Vamos fazer com que seja azul marinho. Copie isso. Selecione isso e cole lá. Agora é azul marinho, mas ao passar o mouse, quero que seja dessa cor vermelha rosada Então selecione isso, cole isso. Agora, ao passar o mouse, é essa cor e, quando está ativa, também deve ser aquela cor rosada Quando está ativo, queremos dizer quando estamos em uma página específica. Se estivermos na página de artigos, ela deve ser dessa cor para mostrar rapidamente a alguém que estamos na página de artigos. Vamos pré-visualizar isso. Se formos para a página inicial, eles devem permanecer rosa. Se formos para a página de contato, ela deve permanecer rosa, sem mais nem menos. Então, agora, vamos falar sobre telefones globais muito rapidamente. Você percebe que, enquanto estávamos construindo tudo aqui, tivemos que continuar alterando o texto manualmente. Se adicionássemos esse editor de texto, precisaríamos alterar manualmente essa fonte específica. Tivemos que vir aqui e mudar isso para Monert. Isso nem é Monert ainda. E se vamos criar mais artigos para mostrar aqui, como este. Precisaremos configurar manualmente os telefones o tempo todo. Se quisermos usar Monert, precisaremos continuar mudando de roboto para Montserrat É por isso que precisaríamos de uma maneira de configurá-lo apenas uma vez e, toda vez que você adiciona algum texto depois disso, ele aparece automaticamente como Mont. Então, vamos ver como fazer isso. Voltando aqui, quero dizer editar com elementor porque estamos editando esta página Agora, terminamos com esse título. Então, deixe-me fechar isso e que estamos carregando o editor inicial. Se entrarmos aqui no menu de hambúrgueres, nas configurações do site, nos fundos globais, podemos definir que todos os fundos sejam Montserrat Então, eu quero selecionar isso. Mude isso para Montserrat. Monat. Clique em qualquer lugar aqui. Selecione aquela Montserrat. Clique em qualquer lugar aqui. Vamos fazer o mesmo com todos eles. Oh, espere. Montserrat. Lá vamos nós. Agora, deixe-me atualizar isso. E vamos voltar ao editor. Agora, se eu selecionar isso, deixe-me selecionar isso e aplicar, ver se essas alterações também se aplicarão. Eles não se candidataram a isso. Mas se eu adicionar um novo editor de texto. Por exemplo, se eu deixar alguns textos lá, agora é Montserrat, não é mais Se eu voltar aqui e adicionar um título, é a tipografia do estilo Monat Monst Este é o estilo Tipografia Monct Então, por padrão, todos os textos serão Monert a partir de agora E eu fiz isso porque vamos criar mais postagens de blog para preencher esse espaço, e não queremos continuar alterando essas configurações o tempo todo. Mas agora, vejo que isso não mudou para Monert, então vou alterá-lo manualmente porque, uma vez que você o altere uma vez, todas as postagens do blog que virão abaixo também herdarão todas essas configurações, incluindo a configuração da fonte Então, entrando no estilo, na caixa de conteúdo, tipografia, na família, vamos escolher Montserrat Família significa família de fontes. E sim, eu quero que sejam 600. Talvez vamos aumentar um pouco o espaçamento entre linhas. Até esse ponto. Atualize isso. Revise as alterações. Lá vamos nós. Então, agora todo o site é composto pela fonte Mont. Então, isso é tudo sobre fontes globais. Na próxima lição, vamos ver como adicionar links à sua postagem no blog porque os links são bons para SEO. Vamos ver como fazer isso na próxima lição. Veja em breve. 23. Como adicionar links à sua postagem: É hora de criar links para sua postagem no blog. E eu só quero abrir esta postagem no blog. Então, leia mais. E aqui estamos. Então, talvez queiramos vincular algum texto aqui a outra postagem de blog que você escreveu, ou talvez à Wikipedia. Talvez você esteja vinculando a alguma definição de um termo sobre o qual deseja que as pessoas leiam mais na Wikipédia Então, como você adiciona um link no seu texto? Então, vou continuar e dizer editar com Elementor. E aqui estamos. Então, para adicionar um link, tudo o que precisamos fazer é, por exemplo, selecionar o texto que queremos selecionar. Por exemplo, se você quiser vincular ao significado de esgotamento Destaque isso e, em seguida, esse menu será exibido. Você pode clicar nesse link e, em seguida, fornecer um link. Vou pegar um link da Wikipedia e colar aqui. Esgotamento ocupacional e, em seguida, pressione enter . Então, agora isso se transforma em um link. Então, se atualizarmos isso e visualizarmos as novas alterações. Se rolarmos aqui, aqui estamos, você pode clicar nesse esgotamento e ele abrirá o esgotamento ocupacional Vamos voltar. O problema é que agora está abrindo na mesma página, e talvez você queira que as pessoas continuem lendo sem interrupção. Então você quer que ele abra em uma nova guia. Então, voltando aqui. Enquanto esse bloco de texto estiver selecionado. Vamos entrar aqui e procurar esse link. Deveria estar em algum lugar aqui, aqui estamos. Esgotamento. Vou selecionar isso. Isso abrirá essa opção de edição. Clique nisso. Em seguida, clique nesta roda dentada Isso abrirá esse pop-up. Você pode dizer abrir link em uma nova guia. Atualize isso. Agora vamos analisar as mudanças. Aqui estamos. Agora, se eu clicar nele, ele abrirá em uma nova guia. Nosso artigo ainda está intacto. Agora, outro problema que você deve ter notado é que isso não é coerente ou consistente com as cores da nossa marca Queremos que esses links sejam talvez esse rosa avermelhado, e essas são as cores definidas pelo Lembre-se de que eu disse que o tema é o que determina a aparência padrão do seu site. Então, essas são cores astra e, para alterá-las, podemos personalizar Isso abrirá pressionando as configurações gerais. Aqui estamos. E agora, é claro, ainda temos o artigo aberto aqui para pré-visualização. Se formos para o global, podemos ir para as cores e alterar essas cores aqui. Por exemplo, links. Se eu entrar aqui e selecionar essa cópia rosa avermelhada, posso selecionar isso, rolar para baixo, e aqui, se colarmos aquela publicação, vamos selecioná-la também Ritmo essa publicação. Não está mudando. Por quê? Deixe-me atualizar isso, que deveria ter efeito instantâneo. Tudo bem Tivemos que atualizar isso para ver essa mudança. Na verdade, eu também gostaria de selecionar isso mais uma vez e torná-lo uma atualização ousada. Pré-visualize isso. Para se queimar desse jeito. Agora, acabei de lembrar que, para isso, definimos isso manualmente com elementor Portanto, isso não é definido pelo Astra. Voltando aqui, lembre-se de que esse era um elemento post meta. Você pode acessar as categorias de estilo. Vamos colorir, colar e transformar isso em rosa avermelhado Agora, para que isso tenha efeito no editor, podemos atualizar a página E agora, vamos lá. Então, basicamente, isso é como adicionar links à sua postagem no blog, caso você queira vincular a outros artigos em seu site ou em outro site de terceiros. Na próxima lição, como adicionar a seção do autor. Então, voltando ao nosso site de referência, vamos ver como criar isso. Então, eu vou te ver em breve. 24. Seção de autor: Então, agora é hora de criar essa outra seção. Isso deve ser muito fácil porque já criamos algo assim. Então, voltando para nossa estação de trabalho, onde está? Aqui estamos. Para criar isso, precisaremos copiar essa seção da página inicial e podemos fazer isso. Agora, esse é o editor da página inicial. Assim, posso selecionar essa cópia com o botão direito do mouse. Então, agora eu copiei esse contêiner. Voltando ao nosso editor aqui, deixe-me encerrar isso e a Wikipedia. Selecione esse contêiner. Colar. Agora colamos dentro do contêiner Então selecione esta linha ou simplesmente vá até aqui, clique com o botão direito do mouse em colar. Rolando para baixo, agora ele ainda está dentro desse contêiner porque queremos mantê-los dentro desse Pegue esse texto e coloque-o abaixo dele. O que mais temos aqui? Não temos nada sobre mim. Então, vamos remover isso. Podemos mudar esse texto, talvez torná-lo um pouco maior. E, de fato, isso deveria ser um H três. A prática deve ser aos quatro anos, e esta é aos três anos. Estamos tentando manter essa hierarquia. Esta é uma idade de dois anos. Esses são títulos menores, e isso é mais pequeno do que isso. Hierarquia. Tenha isso em mente. O que mais temos aqui? Faça essa tipografia um pouco maior , talvez deva ter 15, mas talvez 700 Talvez vamos aumentar um pouco a margem superior e mudar a cor do texto. Eu tenho esse rosa? Não, eu não tenho. Vamos entrar aqui e selecionar essa cópia e colar aquela aí, atualizar. Primeiro de tudo, deixe-me selecionar isso e reduzir isso para zero. Oh, isso é o melhor. Ei, deixe-me devolver isso. Para a parte inferior, quero reduzir isso um pouco. Vamos selecionar esse texto, aumentar a margem inferior. Tudo bem. Vamos zerar isso. Vou selecionar este contêiner com margem avançada na parte superior, vamos fazer essa separação. Atualize isso. Vamos analisar as mudanças. Rolando para baixo. Conclusão, então temos o autor. Incrível. Então, eu amo o que temos até agora. Na próxima lição, vamos agora estilizar este artigo porque este é um dos artigos recentes. Mas, claro, é o único artigo que adicionamos até agora. É exibido aqui. Vamos ver como estilizá-lo para ficar assim. Então, eu vou te ver em um minuto. 25. Como dar estilo à barra lateral: Então, agora é hora de estilizar essa barra lateral composta por postagens recentes. Então, vamos voltar aqui para o nosso editor, e aqui estamos. Portanto, esta é uma lista de postagens. Entre aqui, conteúdo. Vamos para as configurações. Digamos que não mostre o ícone. Assim mesmo, atualize. Então, podemos dizer que a imagem de fundo em destaque é não. Mostrar imagem em destaque. Sim. Então, isso exibirá a imagem em destaque na lateral. Agora, vamos também reduzir o tamanho do telefone aqui. Então, texto, tipografia. Tudo bem Vamos fazer isso manualmente dessa forma e reduzir a altura. Vamos também aumentá-lo um pouco. O peso dá 600. Mas eu quero dar essa cor. Aquele azul marinho. Volte aqui, selecione aqui, cor do texto. Cole agora é aquele azul marinho. Mas ao passar o mouse, deve ser aquela cor rosada avermelhada. Copie isso, cole isso aí, sem mais nem menos. Agora, preenchendo para a esquerda, vamos reduzir isso. Para a imagem em destaque, vamos atribuir a ela um raio de borda de cinco para obter esse canto arredondado Na verdade, também vamos voltar aqui para ver a tipografia. Talvez digamos que 800 700 seja bom. Sim, isso é melhor. Vamos também reduzir a altura dessa linha. Até esse ponto, atualize isso. E vamos revisar as mudanças agora. Rolando para baixo. Lá vamos nós. Agora, o que é isso? Precisamos nos livrar disso. Eu não sei o que é isso. Liste o espaço divisor entre o conteúdo. Veremos sobre a lista e o espaçamento quando tivermos mais itens, como eles serão listados Voltando ao conteúdo aqui. Configurações. Não sei o que é isso, mas vou descobrir, deixe-me descobrir o que é isso muito rapidamente. Tudo bem Então eu percebi que o problema. A razão pela qual tínhamos esse ponto aqui era essa configuração aqui, layout. Então, como você pode ver, agora, temos uma espécie de balas, e não é isso que queremos Queremos isso sem marcadores porque, se voltarmos aos marcadores e visualizarmos as alterações, como você pode ver, temos um marcador lá, mas se estiver definido com esse layout horizontal, visualize-o Agora desapareceu. Então é isso que queremos. Então, basicamente, isso é como estilizar as postagens recentes da barra lateral. Na próxima lição, vamos ver como adicionar essa barra de progresso de rolagem. Então, rolando, como você pode ver, temos essa barra superior mostrando que distância você está e quanto ainda resta, até a parte inferior da postagem do blog Acho que isso dá vida às postagens do seu blog e torna suas postagens únicas. Eu vi isso em alguns sites e sempre me perguntei como fazer isso até recentemente Então, vamos ver como fazer isso na próxima lição. 26. Como adicionar a barra de progresso: Então, agora é hora de adicionar essa barra de progresso, algo assim. Então, voltando ao nosso editor. Agora, queremos adicionar isso somente às postagens do blog. Vamos entrar na postagem do nosso blog. Leia mais. Deixe-me fechar esses. Queremos adicioná-lo aqui para que, quando alguém estiver navegando e lendo nossa postagem no blog, possa ver isso Mas antes de fazermos isso, quero que adicionemos essa barra lateral agora. Volte para a postagem do bloco e adicione-a com o elementor, porque meu objetivo é salvar essa postagem do bloco que criamos como um modelo que podemos reutilizar quando estivermos criando o restante das postagens do blog. Você vai ver o que quero dizer. E não quero salvar o modelo sem tudo o que compõe uma postagem em bloco. Eu virei aqui, clique com o botão direito em copiar. Entre aqui, selecione esta pasta de link correta. Será colado lá Na verdade, o que eu queria era o próximo, clique com o botão direito do mouse em copiar, venha aqui. Agora, selecione esse contêiner que os contém novamente, clique com o botão direito do mouse em colar e é isso que queremos. Então, acho que vou deixar isso aí. Quando criarmos mais artigos, eles aparecerão em uma lista aqui. Então não se preocupe com isso. Mas, por enquanto, eu quero dizer. Na verdade, deixe-me limitar isso a cinco postagens. Então, vou selecionar isso. Se já estiver limitado a cinco postagens, na verdade. Não queremos ter 50 postagens listadas aqui. Queremos apenas cinco. Então, vou clicar em Atualizar. Vamos analisar as mudanças. Lá vamos nós. Rolando para baixo, quero algum espaçamento entre essas Então, vou até o contêiner que contém os dois contêineres. E agora, quanto à lacuna, vamos fazer isso desse jeito, atualizar. Revise as alterações. Sim, precisamos desse espaçamento assim. Agora, a única coisa que resta é adicionar essa barra de progresso. Então, vou clicar nele e digitar progresso. Lembre-se de que um dos plug-ins que adicionamos foram os complementos Royal elementor. Na verdade, eu só quero te mostrar rapidamente uma coisa aqui. Este é o site oficial da Royal Elementa Adoms. E se você quiser testar algum de seus elementos, pode vir aqui Royal element addos.com e conferir Então, eu quero ir para a barra de progresso de leitura. Então, se eu clicar nele, role para baixo para ver o progresso em ação. Então vamos lá. Esqueci de mostrar este site e dizer como você pode simplesmente conferir alguns dos elementos antes de usá-los. Por exemplo, o flip box, não vamos usar o flip box, mas eu só quero mostrar a você. Algo parecido. Voltando para casa. Então, basicamente, basta visitar esses sites e ver os elementos que eles trazem para você. Aqui está o site de complementos premium para Elementor. Lembre-se de que esse é outro acréscimo que adicionamos. E se você acessar todos os widgets, poderá ver uma lista de todas essas coisas aqui Usamos um blog. Vamos ver. Se rolarmos para baixo, essas são as diferentes maneiras de apresentar sua postagem no blog E se formos até o último aqui embaixo, foi assim que fizemos o nosso. Vamos voltar aqui. Foi assim que fizemos isso. Então, eu só queria divulgar isso , caso você queira ver como determinar se algum elemento que você deseja usar é bom para o seu site. Você pode ter uma prévia no site oficial do criador. Então, deixe-me fechar isso e aquilo. Se chegarmos aqui, digitamos progresso e agora lemos a barra de progresso Podemos simplesmente deixá-lo aqui. Não será visível acima da imagem. Estamos apenas colocando-o dentro desta atualização de postagem do blog. Na verdade, vamos colocá-lo logo abaixo da imagem. Na verdade, esse título está muito próximo da imagem. Deixe-me selecionar esse top avançado. Vamos colocá-lo lá. Agora, deixe-me colocar isso acima da atualização de texto. Revise as alterações. Agora, isso está bem espaçado e, quando começamos a rolar, nossa barra de progresso está funcionando porque soltamos em qualquer lugar da página Podemos colocá-lo em qualquer lugar da página, e isso é tudo que conta. Voltando aqui, podemos mudar a cor do campo. Eu quero dar a ele aquela cópia em cor rosada. Selecione isso, cole na atualização, visualize as alterações. Rolagem. Agora, vamos lá. A cor da nossa marca está funcionando. Então, é assim que se adiciona a barra de progresso da leitura. Na próxima lição, falaremos sobre como salvar modelos. Te vejo em breve. 27. Salvar modelo de blog: Então, agora que estamos satisfeitos com a aparência de nossa postagem no blog, podemos usá-lo como nosso modelo de postagem no blog para que, no futuro, quando quisermos criar uma nova postagem no blog, não precisemos começar a criá-la novamente. E podemos fazer isso editando onde estávamos editando. Em seguida, clique nesse menu suspenso. Salve como modelo. Agora, digamos que seja um modelo de postagem de blog. Clique em Salvar. Agora, aqui estamos, modelo de postagem de blog. Então, da próxima vez que quisermos criar uma postagem no blog, podemos vir aqui e inserir isso e poderemos simplesmente alterar o texto da nova postagem do blog, mas a estrutura será a mesma. E veremos isso a partir da próxima lição, porque é isso que estamos fazendo. Estamos criando mais postagens de blog para preencher nossa página inicial com o restante das postagens do blog Então, eu vou te ver em um minuto. 28. Crie mais posts no blog: Então, agora salvamos nosso modelo de postagem no blog. É hora de usá-lo para criar o resto das postagens do nosso blog. Então, deixe-me encerrar isso. E, de fato, como terminamos esta página, vou fechá-la. Feche isso também, até isso e aquilo. Agora, vamos voltar às postagens. Na lista de postagens, temos apenas uma postagem. Agora, vou dizer que clique com o botão direito do mouse em Abrir link em nova guia em Adicionar nova postagem. Agora, uma maneira rápida de clicar com o botão direito do mouse e abrir em uma nova guia é usar a roda do mouse. Se você clicar nela, abrirá uma nova guia. Faça isso, abra isso em uma nova guia. Vamos criar um, dois, três, quatro, cinco. Digamos que seis. Agora, voltando aqui, deixe-me dar um título a isso. Vou apenas copiar isso. Deixe-me ir para a página inicial. Deixe-me copiar essa cópia disso. Vou colar lá. Página padrão. Elemento de modelo padrão ou largura total. Vamos definir uma imagem em destaque. Volte aqui. Digamos que talvez esse cachorrinho Defina a imagem em destaque. Vamos também adicionar um trecho, então vou rolar aqui Copie isso, cole aí e publique. Agora, isso foi publicado. Mas lembre-se de que estamos apenas definindo as configurações básicas talvez do modelo, da imagem e do trecho em destaque Não definimos as configurações do astra. Mas se quisermos criar o post de bloco no front-end usando o modelo que acabamos de salvar, também precisaremos defini-lo. É, deixe-me configurá-los. Eu queria, em primeiro lugar, criá-los rapidamente e voltar a isso mais tarde, mas podemos fazer isso agora. Barra lateral sem barra lateral. Vamos desativar esses três. Atualize isso. Agora nossa página da web está pronta para ser editada com o elementor. Agora, na verdade, não é nossa página da web, é uma postagem de blog. Vou fechar isso. Eu vou voltar aqui. Vamos escolher essa cópia e colar lá. Na verdade, deixe-me definir a imagem em destaque. Selecione. Selecione isso. Não, deixe-me selecionar aquela imagem em destaque em conjunto aberto. Vamos pegar nesta página os ovos que estão lá dentro. Publicar. Então é isso. Deixe-me fechar isso. Agora, voltando aqui, se eu atualizar esta página, agora temos três postagens no blog Se passarmos o mouse sobre isso, não haverá nenhuma opção de edição com o Elementor Mas agora aqui, isso foi editado com Elementor porque já o construímos com o elementor, então podemos editá-lo com o Agora, indo para esta que já configuramos com largura total do Elementor e todas essas outras configurações, podemos editar com o Elementor E, claro, é uma página em branco. Mas agora, mesmo antes de irmos longe, vamos manter esse pensamento aí mesmo. Volte aqui, se eu voltar casa e depois ir para a página inicial clicando aqui, será levado para a página inicial. Como você pode ver, já temos três postagens de blog adicionadas à nossa lista de postagens de blog adicionadas recentemente, e todas elas não estão categorizadas E veja os artigos recentes. Também está aparecendo nos artigos recentes. Agora, podemos alterar e determinar qual postagem do blog será exibida nessa lista. Não é rígido nem fixo, e não é algo que devemos simplesmente aceitar do jeito que está Podemos determinar com precisão quais postagens do blog queremos sejam exibidas nessas diferentes partes, porque aqui, queremos as mais recentes. Mas aqui podemos querer uma categoria específica de postagens de blog. Veremos as categorias em breve. Então, agora, voltando aqui, lembre-se de que estávamos prestes a criar nossa postagem no blog. Podemos acessar os modelos. E na lista dos meus modelos, temos um modelo de postagem de blog. Eu posso dizer inserir, aplicar isso. E agora aqui está o modelo que salvamos. Então, tudo que eu preciso fazer é editar o conteúdo desse modelo para ter o conteúdo da nova postagem do blog que eu quero publicar. Mas é claro que não vou fazer isso porque meu objetivo é mostrar como usar essas coisas, mas vou mudar essa imagem para refletir essa novidade. Acho que foi esse cachorrinho. Selecione atualizar. Acho que também devemos mudar esse tópico. Eu era a cópia dos sinais de foco. Sim, diz os sinais de foco. Então, se eu selecionar isso, posso vir aqui e dar esse título, atualizar. Mas agora o conteúdo deve ser sobre essas novas postagens do blog. Portanto, edite tudo até o final e, em seguida, atualize e visualize as alterações. Lá vamos nós. Agora, se abrirmos esta postagem original do blog, aqui estamos, e se abrirmos essa nova, ela é exclusiva dessa postagem específica do blog e terá o conteúdo da nova postagem do blog. Então, agora é a hora de eu acelerar essa parte, porque basicamente vou repetir o mesmo processo para o resto das postagens do blog, e isso vai levar muito tempo, então isso vai ser um lapso de tempo E quando eu terminar, agora podemos passar para a próxima sessão. Então, deixe-me avançar rapidamente nesta seção. Então, voltando aqui, vou criar mais uma postagem no blog. E então aqui estamos. Eu terminei de criar o resto da postagem do blog que eu preciso. E, como você pode ver, precisamos fazer alguns ajustes em comparação com nosso site de referência aqui. Precisamos adicionar um pouco mais de espaçamento. Talvez você queira isso com esse tipo de espaçamento. Mas eu quero te mostrar como adicionar um pouco esse espaçamento. É assim que se faz isso Na próxima lição, vamos ver como adicionar esse espaçamento e seguir para a página de arquivo de artigos Essa é uma página que exibe todas as postagens do seu blog. Então, voltando aqui, artigos. Aqui estamos. Este é o arquivo do blog, uma lista de todos os artigos que publiquei ao longo do tempo, e os leitores podem entrar aqui e ler tudo o que você publicou. Então, vamos fazer isso na próxima lição. Te vejo em breve. 29. Página de arquivo de posts: Então, agora é hora de criar a arquivo do blog ou a página de arquivamento de postagens. Então, voltando ao nosso editor, aqui mesmo, vamos até o painel e fechamos isso. Ou já criamos uma página. Vamos às páginas. E se chama artigo. Então eu vou dizer editar. Na verdade, deixe-me abrir o link diretamente em New Tab. Lá vamos nós. Então, vamos acabar com as configurações básicas. Vamos para as configurações do astra, Elementor cheio sem barra lateral Vamos também desativá-los. Lá vamos nós. Vamos editar com o Elementor E aqui estamos. Então, agora, deixe-me dar uma olhada nisso. Esta é a nossa página inicial. Quero escolher esta seção de heróis aqui porque você notará em nosso site de referência que temos algo semelhante à seção de heróis na página inicial. Não precisamos reinventar a roda. Não precisamos recriar ou repetir o que já fizemos. Portanto, edite com o Elementor na página inicial. Tudo o que precisamos fazer é selecionar esse contêiner que contém a seção do herói e copiar corretamente Volte aqui, deite dentro desta caixa, cole. Isso o colará na parte superior. Isso diz arquivo do blog. Copie isso, selecione isso, clique duas vezes aqui, cole. Uma lista de todos os artigos que publiquei ao longo do tempo. Selecionar isso foi excluído. Na verdade, vamos colar isso aí. Controle a tecla Shift V para colar assim. O estilo centraliza essa atualização. E agora precisamos adicionar uma caixa flexível, essa estrutura aqui, um único contêiner Agora, para exibir nossas postagens de blog dessa forma, usaremos um complemento de elemento adicional chamado complementos essenciais para elemento. Então, vamos voltar para a adição de nossos painéis. Complementos essenciais para elementor. Aqui estamos, ou poderíamos ter digitado elementor. E aqui estamos os complementos essenciais. Instale agora. Instalado, vamos ativar. E agora podemos passar por esse assistente de configuração e escolher avançado a seguir. Podemos habilitar modelos, mas eu não preciso dos modelos nem ignorá-los Em seguida, conte comigo ou não, obrigado. Eu só vou dizer não, obrigado porque este não é um site permanente. Tudo bem. Então, agora estamos ativos. Voltando aqui, vou dizer refresque. Tudo bem. Então, resumindo tudo isso, veremos complementos essenciais Então, vou digitar grid post grid usando complementos essenciais da EA. Então, deixe-me arrastá-lo e soltá-lo dentro desse contêiner, e isso é o que estávamos procurando. Então, enquanto isso estiver selecionado, vou mudar isso para Primeiro de tudo, digamos que queremos seis postagens por página. Mas para o layout, queremos ter três colunas, não quatro, três colunas. Atualize isso. E deixe-me atualizar a página. Então, agora temos três colunas. Deixe-me atualizar esta página. Então, isso se reflete no editor. Esta é a prévia. Mas é claro que precisamos fazer muito mais para que fique assim. Então, entrando aqui, enquanto isso ainda está selecionado, vamos primeiro ao layout. Queremos desativar algumas dessas coisas. Desça, não mostre a data. Ou você pode mostrar a data. Não é necessário mostrar o nome do autor, a menos que você tenha vários outros autores em seu blog. Não mostre o avatar, a imagem. Sim, desse jeito. Agora, vamos entrar no estilo para estilizá-los . Estilo de grade de postagem. Vamos dar a ele um raio de borda de 20, assim, até o topo Agora, se formos até a miniatura e também dermos 20, tudo é arredondado, mas não queremos essas Então, voltando ao estilo de grade de postagem, tipo de borda. Agora é não. Vamos para o estilo meta, centralizando-os assim Vamos à tipografia e ao espaçamento. Agora, podemos ter o estilo do título e o estilo do trecho. Então, título, podemos colocá-lo no centro e o trecho no Vamos para ler mais, Aign para o centro também Esse é o botão. Podemos voltar à tipografia e ao espaçamento de cores e alterar a cor do texto do título Deixe-me selecionar esse azul marinho. Colado ali e ao passar o mouse, queremos que fique avermelhado ao passar o mouse com aquela cor rosada avermelhada mouse com aquela cor rosada Também queremos ver o título da tipografia. Queremos dar a ele uma espessura de 900 desse jeito. Acho que esse tamanho está bom, mas podemos 25 está bem, mas a altura da linha é um bom lugar. OK. Agora, você notará que temos muito pouco texto no trecho Então, vamos ao layout do conteúdo. Para as palavras do trecho, vamos fazer com que sejam 20. Isso significaria que 20 palavras são mostradas no trecho. Volte ao estilo. Vamos até o botão de ler mais. A cor do texto deve ser branca. Mas agora, vamos fazer o fundo dessa cor avermelhada. Então, voltando aqui, leia mais sobre o tipo de plano de fundo. Vamos dar essa cor. Vamos quebrar esse acolchoamento. E para o topo, vamos dar 15. Na verdade, vamos dar dez, para o fundo, quero dizer o topo. Vamos dar dez. Para a margem superior, vamos empurrá-la para baixo Acho que 30 está bem. Vamos também dar a ele um raio de borda de cinco, digamos dez Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Mas agora, vamos fazer algo sobre essa data. Configurações de layout. Acho que vou me livrar dessa data porque ela está destruindo o layout Então, vou apenas atualizar isso. Vamos analisar as mudanças. Mas você pode mantê-lo aí se quiser. Lá vamos nós. Obviamente, agora vamos adicionar essa sombra projetada para fazer com que cada postagem do bloco se destaque. Volte aqui, estilo, é a sombra da caixa no estilo da grade de postagem, sem mais nem menos. Mas agora está muito escuro. Podemos torná-lo mais leve, talvez até 20 em algum lugar lá. Vamos também espalhá-lo um pouco. Desfoque isso. Na verdade, quero que fique mais fraco, sem mais nem menos Atualizar. Vamos analisar as mudanças. Lá vamos nós. Agora, por padrão, está definido como Maçonaria O layout está definido como Maçonaria. Layout do conteúdo. Alvenaria, e é por isso que, se for curta, a que está abaixo será empurrada para cima para manter esse espaçamento uniforme Então, mesmo que fosse muito mais curto até agora, isso seria aumentado para ainda ter a mesma quantidade de espaçamento, e acho que isso faz com que pareça mais apresentável do que o acordado isso seria aumentado para ainda ter a mesma quantidade de espaçamento, e acho que isso faz com que pareça mais apresentável do que o acordado ainda ter a mesma quantidade de espaçamento, e acho que isso faz com que pareça mais apresentável do Então, acho que acertamos em cheio. Acho que fizemos isso. Então, tudo que você precisa fazer é adicionar mais postagens no blog, e elas serão adicionadas a esta lista. E você também pode limitar o número de postagens do blog que serão exibidas. Atualmente, tenho cinco, mas esta página poderá mostrar seis. Se você quiser mostrar 12, você pode exibir 12 aqui e haverá 12 deles se você tiver 12 deles. Então, acho que nesse ponto, podemos chamá-lo de embrulho. Esse é o fim desta lição. É assim que se cria a página de arquivo do blog. Na próxima lição, falaremos sobre categorias. E acabei de perceber que não fizemos nada sobre esse texto. Essa pode ser sua lição de casa, mas podemos voltar à cor, ao trecho, à tipografia, a Podemos aumentar o tamanho, mas vou deixá-lo aí. Mas o que eu quero fazer é aumentar um pouco a margem superior. Para separá-lo do título. Lá vamos nós. Assim mesmo. Então, na próxima lição, vamos falar sobre categorias de posts. Te vejo em breve. 30. Categorias de postagem: Então, agora é hora de falar sobre as categorias de postagem. Então, você notará aqui que estamos exibindo todas as postagens do blog que temos no blog. Se formos para a página inicial, exibiremos indiscriminadamente todas as postagens do blog que temos na Mas talvez queiramos exibir postagens de blog específicas em uma seção e postagens de blog diferentes em outra seção. E é aí que as categorias são úteis. Então, voltando ao nosso painel, quero ir para as categorias de postagens. Deixe-me fechar isso. Não, obrigado E deixe-me fechar isso. E agora, como você pode ver, temos apenas uma categoria chamada sem categoria E isso porque, por padrão, pressionamos que sempre tenha essa categoria padrão quando você a instala. Ele não tem a opção de excluí-lo. Agora podemos criar nossas próprias categorias. Mas agora, se voltarmos para a lista de todas as postagens, porque não tínhamos nenhuma categoria, todas as postagens que criamos são automaticamente colocadas na categoria sem categoria Agora, há duas maneiras de criar uma categoria de blog. Se entrarmos, por exemplo, aqui, clicarei com o botão direito do mouse e abrirei o link em uma nova guia aqui, e quero fechar essas outras. Agora, aqui estamos dentro deste post. Vamos supor que agora estamos criando a postagem. Podemos vir aqui e abrir o painel ou a guia de categorias. Podemos desmarcar isso e agora podemos dizer adicionar uma nova categoria e digitar um nome Por exemplo, o que é isso? Priorização. Gerenciamento de tempo. Gerenciamento de tempo, home, T, pressione Enter. Agora, esta postagem do blog se enquadra nessa categoria específica de gerenciamento de tempo. Também pode se enquadrar em duas ou várias categorias. Também pode ser uma questão de produtividade. Se eu entrar, agora ele pertence a duas categorias. Se eu atualizar isso, agora que está atualizado, vamos voltar aqui e atualizar esta página Agora, como você pode ver, está nessas duas categorias. Podemos fazer o mesmo por eles. Agora, outra coisa que você notará é que, uma vez que criamos essas duas categorias, se formos para as categorias aqui, elas também estão incluídas aqui. Então, essa é uma maneira de criar categorias fazendo isso dentro de uma postagem conforme você criou. Outra forma é vir aqui e adicionar mais. Então, por exemplo, Saúde. Se eu entrar, você pode fornecer a bala. Mas se você pressionar enter, wPress usará o nome que você deu à categoria como slug, e é assim que Se eu pressionar enter, Wpress criou uma nova categoria de saúde contra o frio e se você disser Edição rápida, o problema é saúde Se falarmos aqui da produtividade, o problema é Agora, deixe-me criar mais duas categorias. Digamos que postagens recentes, talvez recentes. Descarte isso Cancele isso. Talvez também possamos criar outra categoria chamada destaque, Enter. Lá vamos nós. Agora, se formos a todos os posts e abrirmos, talvez isso. Deixe-me pressionar o mouse para abri-lo em uma nova guia. Aqui estamos. Se formos para as categorias, agora, temos uma lista de todas essas categorias que criamos e, claro, ela foi listada categorizada Mas agora podemos colocá-lo em qualquer categoria. Digamos que saúde. Atualize isso. Vamos voltar aqui. Vamos editar isso Vamos para as categorias. Remova isso categorizado. Digamos que seja uma postagem recente e também para produtividade, atualização. Vamos entrar aqui. Vou abrir isso e isso. Deixe-me fechar esses outros. Então, ficamos com esses dois. Vamos às categorias. Remova isso. Eu direi em destaque e recente. E também está na produtividade. Atualize isso. Agora, cabe a você criar categorias criativas. Vamos entrar aqui e remover isso. É assim que você transforma sua vida. Talvez possamos adicionar uma aqui chamada transformação. Não, eu não gosto disso. Não escrevemos corretamente, mas vou deixar por isso mesmo E digamos que a saúde atualize isso. Lá vamos nós. Então, agora, se fecharmos isso e atualizarmos esta página. Cada postagem do blog agora pertence a uma categoria. Às vezes, duas postagens de blog podem pertencer à mesma categoria. Agora, veja por que as categorias são boas. Então, se formos para o front-end, clicarei com o mouse para abrir em uma nova guia. Aqui estamos em casa. Veja as categorias agora. Agora, se eu disser editar com Elementor, nenhuma postagem foi encontrada aqui Então, se eu disser editar com Elementor, a razão pela qual não há postagens encontradas aqui é porque lembre-se esse elemento estava retirando as postagens do blog para exibição da categoria não Se eu clicar nele e ver as categorias. Se selecionarmos isso e quisermos poder clicar aqui. Ok, vamos esquecer isso por um segundo. Agora, vamos voltar a este. Se reduzirmos o geral, podemos ir para a consulta, e é aqui que determinamos o que vamos exibir. Por exemplo, aqui, podemos dizer que sim, vamos exibir postagens, regras de categorias. Vamos combinar o filtro de categorias. Podemos dizer quais categorias queremos exibir. Então, talvez queiramos exibir postagens de blog que estejam apenas na categoria de produtividade. Agora, todas as postagens do blog que pertencem à categoria serão exibidas. Se uma postagem de blog não tiver produtividade como categoria, ela não será exibida. Vamos fechar isso. Vamos remover isso e escolher talvez a saúde. Acho que tivemos um ou dois. Sim, temos dois. Mas agora, você terá que estilizar cada categoria individualmente, o que não faz sentido. Isso deve herdar o estilo das categorias que já estilizamos Então, eu vou me livrar disso. Onde estava? As categorias de opções de postagem são importantes. Não mostre isso. Atualize isso. Mas agora, como você pode ver, podemos usar as categorias que queremos exibir para mostrar tipos específicos de postagens de blog que queremos em uma página ou seção específica. Agora, eu ainda não sei por que isso está se comportando mal assim Acho que há um problema com esse elemento porque ele deveria fazer exatamente o que fez aqui. Nas consultas, devemos ser capazes selecionar categorias específicas Então, eu vou ter que encontrar uma solução antes do final desta aula. Mas, por enquanto, acho que vamos terminar a aula aqui, atualizá-la. Podemos fazer o mesmo com a página de arquivo de artigos. Deixe-me ir aqui e editar com Elementor. Se selecionarmos isso. Agora, esse é um elemento diferente. Esta é a grade de postagens criada por complementos essenciais e também tem a opção fazer suas categorias de consultas, talvez digamos que queremos apenas mostrar saúde Selecione isso. Agora vamos ver apenas duas postagens porque temos apenas duas postagens no blog com a categoria saúde. Então, espero que você entenda as categorias agora para ajudá-lo a exibir o que quiser em sua página da web. Então, na próxima lição, vamos ver como adicionar esse recurso fora do Canvas para exibi-los. E, claro, como você deve ter adivinhado, vamos usar categorias Vamos ver como fazer isso em breve. 31. Barra lateral fora da tela: Então, agora é hora de exibir algumas postagens do blog em nosso site off Canvas Então, voltando ao nosso editor aqui. Vou adicionar essa produtividade. Então, agora temos mais. Vamos atualizar isso. Vamos revisar as alterações para que possamos, na verdade, o que eu queria era acessar esta página para que possamos dizer cabeçalho. Edite o cabeçalho com elementor. E aqui estamos. Então, agora estamos editando o cabeçalho. Se eu clicar aqui, ele deveria mostrar algumas postagens do blog aqui. Então, para exibir o conteúdo aqui, devemos usar um modelo. Lembre-se, como o modelo que salvamos para as postagens do blog. Também podemos criar um modelo que podemos exibir aqui. Então, se entrarmos em selecionar modelo, enquanto isso estiver selecionado, como você pode ver, temos apenas um modelo, e é o modelo de postagem do blog. Então, vamos criar um modelo para usar aqui. Eu vou voltar para casa. Deixe-me fechar tudo aqui. E eu só vou vir aqui postar. Sim, podemos criar uma nova postagem. Então, enquanto estamos aqui, podemos chamar isso de talvez de conteúdo do Canvas. Tudo bem Então, é claro, as configurações básicas aqui estão na barra lateral Vamos publicar isso. E então vamos para o front-end e editá-lo ali mesmo ou criá-lo ali mesmo. E aqui estamos. Então, só precisamos de uma coisa. Então, se eu clicar nisso, vamos para o Flexbox e precisamos de apenas uma coluna como essa E se voltarmos, na verdade, quero ir às páginas e copiar a edição dos artigos com o elementor Quero copiar a grade de postagens dos artigos. Lembre-se de que ainda temos isso aberto. Então, eu quero copiar essa grade de postagem. Então, eu quero clicar nisso, clicar com o botão direito do mouse em copiar. Acesse este conteúdo fora do Canvas. Na verdade, deixe-me deletar isso e aqui, clique com o botão direito do mouse em colar. Agora, com isso selecionado, em primeiro lugar, quero selecionar apenas a categoria chamada recente. Recentes. Temos duas postagens no blog. E eu também quero fazer postagens por página, talvez digamos três, e para o layout, digamos que queremos apenas uma coluna. Atualize isso. Vamos analisar as mudanças. Rolando para baixo. Então é isso que temos. Agora, deixe-me atualizar os editores para refletir as mudanças aqui, sem mais nem menos Então, agora, o que eu quero fazer é selecionar isso, clicar com o botão direito do mouse em salvar como modelos, e eu quero chamá-lo de conteúdo ou postagens do Of Canvas. Guarde isso, e agora aqui está. Vamos fechar isso. Vamos voltar aqui. Agora estamos no editor principal, e é aqui que devemos procurar modelos. Se clicarmos nisso, agora também temos postagens fora do Canvas. Se selecionarmos isso. Agora, se clicarmos aqui, ele mostrará as postagens fora do Canvas. Então, é claro, podemos brincar com essas configurações. Não vamos nos aprofundar nisso, mas é assim que se adiciona a barra lateral fora do Canvas Deixe-me atualizar isso e revisar as mudanças. Nós clicamos nisso. Lá vamos nós. Então, deixe-me ir para a página inicial. Isso é o que apresentamos até agora. Tudo bem Então, basicamente, isso é tudo sobre a barra lateral fora do Canvas. Na próxima lição, vamos criar o rodapé, porque, como você pode ver agora, só podemos rolar até certo só podemos rolar até Não temos um rodapé aqui para ter todo o conteúdo que deveria estar no rodapé Então, vamos ver como fazer isso na próxima lição. Te vejo em breve. 32. O rodapé: Então, agora é hora de criar o rodapé. Agora, como você pode ver, em nosso site de referência, temos um belo rodapé simples Então, voltando para nossa estação de trabalho, deixe-me fechar isso e tudo isso porque acabamos com eles. Agora, o que precisamos fazer é ir para o rodapé do cabeçalho do elemento skit, como Porque lembre-se, foi aqui que criamos o cabeçalho. Então, digamos que adicione um novo. Rodapé, e isso deve mudar para rodapé, site inteiro, habilite essa edição Iremos diretamente para o front-end para começar a construí-lo. E aqui estamos. Da mesma forma que criamos o cabeçalho, vamos criar uma foto. Vou clicar nisso. Em seguida, caixa flexível Acho que isso tem três colunas no site de referência. Onde está nosso site de referência. Sim, três colunas. Vamos escolher isso. Lá vamos nós. Selecione isso. Obviamente, para adicionar um logotipo, eliminamos um elemento de imagem. Clique nisso. Selecione o logotipo, selecione isso e pronto. Em seguida, um parágrafo. Então, vamos entrar aqui, editor de texto. Vamos deixar isso aí mesmo. Em seguida, Control Shift V. Claro, queremos dar a ele essa cor cinza azul marinho. Copie isso. Cole lá para ver a cor, Tipografia, 600, assim mesmo Atualize isso. O máximo que queremos criar são esses links. Vamos escolher os links. Queremos dizer lista. E isso é uma lista de ícones. Então, vou arrastar e soltar a lista de ícones ali mesmo, como você pode ver, e acima dela, links rápidos. Então, título, Links rápidos. Eles devem ser do estilo de três anos. Vamos para a cor do texto. Acho que ainda tenho esse não. Copiar. Mude para isso. Vamos à tipografia. Vamos fazer com que seja 900 desse jeito. Agora, o que precisamos fazer é criar esse formulário de inscrição. E fazemos isso com outro plug-in o melhor plug-in para criar formulários wordpress, chamado forminator Adoro esse plug-in e vou voltar para o nosso painel. Em primeiro lugar, deixe-me atualizar isso. Antes de fazermos isso, por que não terminamos essa coisa? Então, vamos falar sobre minha privacidade de todos os artigos. Então, vou selecionar isso. Você pode editá-lo aqui. Sobre mim, privacidade dos artigos. Você também pode editá-lo aqui. Artigos. Termos de uso de privacidade. Então, vou duplicar esses termos de uso. Tudo bem. Não viemos as mudanças aqui, então sobre mim. Lá vamos nós. Tudo bem. Então, deixe-me digitar isso aqui sobre mim. Lá vamos nós. E, claro, agora vamos dar um estilo. Vamos até o ícone. Queremos dar a ele essa cor avermelhada. Copie isso, cole aí. Mas ao passar o mouse, queremos que seja esse azul marinho. Ao passar o mouse sobre pastas coloridas. Assim mesmo. Então, sobre o texto, vamos ao ícone. Vamos para a mensagem de texto. A cor deve ser azul marinho. Mas ao passar o mouse , deve ser tão avermelhado, assim mesmo Agora podemos mudar esses ícones. Então, voltando ao conteúdo sobre mim. Então, talvez usuário. Artigos. Talvez uma mensagem de texto. Privacidade. O que devemos usar aqui. Vou usar um termo de uso alvo. Livro que é um livro enorme com termos de uso. Privacidade, talvez possamos usar um cofre. Tudo bem, atualize isso. Ok. Claro que, como você pode ver, o fundo tem essa cor que usamos aqui. Então, deixe-me escolher esse fundo da barra lateral. Entendido, vá aqui. Selecione o contêiner, o estilo e tipo de plano de fundo. Cole isso aí. Vamos também escolher a cor da borda. Cor da borda. Sólido. Vamos dar uma. E vamos dar a cor da borda Ok. E também, observe que temos espaçamento aqui e aqui embaixo. Enquanto isso ainda estiver selecionado, vá para a margem superior avançada, AD ou espere, que deveria ser preenchimento, oito e oito Atualize isso. Também queremos ter um bom espaçamento entre esses elementos Enquanto isso ainda estiver selecionado, layout, lacunas, digamos 30. Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Então, eu quero diminuir um pouco porque parece ser mais elevado do que isso. Então, selecionarei o recipiente que o contém e aumentarei o preenchimento na parte superior Espaçamento da borda do contêiner até o conteúdo. Atualize isso, visualize as alterações, desse jeito. Então, agora, acho que vamos parar aqui para esta lição. Na próxima lição, vamos criar o formulário do formador e os ícones de mídia social Então, nos vemos em breve. 33. Formulário de inscrição para lista de e-mail: E, bem-vindo de volta. Então, agora é hora de criar o formulário de inscrição na lista de e-mails com o forminator Então, vamos voltar para dentro do painel. Quero clicar aqui no painel e no front-end do Togo. Então, vamos lá. Vamos até que os plugins adicionem novos. Vou digitar forminator assim. Lá vamos nós. Instale agora. 500.000 instalações ativas. É muito popular. Ativar. Lá vamos nós. Então aqui está, e eu vou arrastar isso para a esquerda e ir para o forminator Agora, como você pode ver, aqui mesmo, criamos qualquer tipo de formulário para Paul. Nosso objetivo é criar um formulário, então eu vou clicar em Criar. Queremos assinar um boletim informativo, então clicarei em Continuar. Formulário de inscrição, crie. Lá vamos nós. Então, aqui estamos. Temos dois campos, nome, endereço de e-mail e botão de inscrição. Se pré-visualizarmos isso, é isso que temos. Se eu fechar isso, podemos reorganizá-los assim, lado a lado Se pré-visualizarmos isso. Podemos tê-los lado a lado. Você também pode alterar o conteúdo clicando nele e dizendo talvez enviar. Mas agora, isso é inscrito porque é uma inscrição no boletim informativo. Você pode editar qualquer um desses campos clicando neles. Agora, como você percebeu, eu não quero o primeiro nome, então vou deletá-lo, excluí-lo. Então, ficamos com o e-mail e o botão. Exatamente desse jeito. Feche isso e publique isso. Selecionarei essa cópia curta do código e irei para o front-end, onde estamos editando nosso rodapé Vou clicar em Código curto do tipo Plus. E este é um espaço reservado para código curto. Então, quando o colocamos lá, nos dá um espaço aqui para inserir nosso código curto. Então, vou colar esse código curto. Acabei de copiar aqui para este espaço, e agora nosso formulário aparecerá aqui Então, deixe-me atualizar isso. Então, deixe-me clicar em Aplicar para refletir as alterações que fizemos no back-end, e agora aqui está nosso formulário. Obviamente, precisamos fazer algum trabalho para torná-lo mais atraente Vamos voltar aqui. Oh, espere. Deixe-me voltar para o painel. Feche isso porque é o painel. Vamos até o painel. Agora, dentro do forminator, vamos voltar ao nosso formulário. Vou clicar em formulários. Nós temos dois. Eu quero deletar isso. É porque eu pressiono Enter e, em seguida, pressiono o botão criar ao criá-lo. Edite isso. Estamos de volta ao nosso editor. O segundo passo aqui é a aparência. Vou clicar nele e aqui podemos escolher diferentes predefinições Nós vamos usar esse. Ok. E para as cores, podemos usar cores padrão, essas cores ou personalizadas. Vamos escolher o personalizado. Botão Enviar. Deve ser de que cor ou aquela cor avermelhada. Essa cor. Então, copie isso. Envie a cor padrão. Cole isso aí e, se pré-visualizarmos , agora é dessa cor. Como você pode ver, agora não temos essas fronteiras parciais. Ao passar o mouse, copie isso. Ao passar o mouse, queríamos ter aquele azul marinho e focado. Cole e atualize. Agora, se formos para o front-end, selecioná-lo e aplicá-lo, veremos as alterações que fizemos no back-end refletidas no front-end, desse jeito. Mas agora, uma coisa que você notará é que, se visualizarmos as alterações, isso tem cantos muito difíceis. Podemos torná-los mais arredondados, como aqui. E para fazer isso, precisaremos usar um pouco de CSS. Agora, cada plug-in tem configurações específicas que ele fornece, mas caso você não consiga ver as configurações que deseja usar. Talvez o plug-in não tenha fornecido essas configurações. Esse plug-in geralmente fornece um local para adicionar seu próprio CSS para alterar a aparência do que você está criando. Então, a aparência do forminator aqui embaixo tem esse campo CSS personalizado, onde podemos adicionar algumas linhas de código em CSS para afetar a aparência Então, aqui embaixo, podemos usar o seletor de entrada. Esse é um campo de entrada. Então, podemos usar o seletor de entrada. Quando clicamos nele, ele é preenchido automaticamente. E aqui, podemos dizer, raio de borda de cinco células de pico, e se pré-visualizarmos isso Agora são cinco células de pico. Se dissermos 50 células de pico, elas serão superarredondadas. Vamos voltar para 50. Podemos fazer o mesmo com o botão, mas o problema é que não temos um seletor para o botão aqui Primeiro de tudo, deixe-me atualizar isso, e vamos aqui, selecione isso e, em seguida, aplique. Então, agora, se visualizarmos as alterações, é claro, agora isso tem cantos arredondados, mas precisamos fazer isso com o botão. Então, para obter o seletor do botão, clique com o botão direito do mouse nesse elemento e vá para inspecionar Deixe-me expandir isso. Se escolhermos esse ícone aqui, entraremos no modo de seleção total de elementos e poderemos selecionar um elemento específico. Por exemplo, se eu selecionar esse botão, agora posso ver o botão Deixe-me arrastar isso. Agora eu posso ver o nome desse elemento que eu selecionei com esse ícone aqui. Aqui embaixo, como você pode ver, temos o botão de envio do formulador de pontos, e esse é o seletor Então, voltando aqui, vou colar o botão de envio, colchetes, enter, raio do pedido, cinco pixels Vamos pré-visualizar isso. E agora tem aqueles cantos arredondados. Obviamente, vamos aumentar a largura para 100% do espaço disponível da esquerda para a direita, 100%, desse jeito. Atualize isso. Agora, se formos até o front-end e selecionarmos isso, aplique e visualize as alterações. Lá vamos nós. Então, deixe-me fechar isso e agora esse é um lindo alimento Então, acho que vamos parar essa aula aqui mesmo. Na próxima lição, vamos adicionar esses ícones sociais abaixo do formulário de inscrição. Te vejo em breve. 34. Adicione ícones sociais: É hora de adicionar os ícones sociais, esses ícones sociais, e eu não os estilizei muito bem no meu site de referência. Eles estão muito perto disso. Mas de qualquer forma, mudando para nossa estação de trabalho aqui. Vamos voltar ao nosso editor. Aqui estamos. Quero dizer avançado, e vamos reduzir essa margem inferior porque ela está ocupando muito espaço, sem mais nem menos. Agora vamos entrar aqui e digitar social. E queremos usar o kit de ícones sociais por elementos. Então eu vou arrastar e soltar aqueles lá embaixo, e lá vamos nós. Avançado, quero ir para a margem e aumentar a margem superior para dez atualizações. E vamos analisar as mudanças. Lá vamos nós. Agora, eu só quero mudar os próprios ícones internos para ficarem brancos ao passar o mouse. Eu não gosto do preto. Então, voltando aqui enquanto isso ainda está selecionado, vá para o conteúdo, passe o mouse no Facebook A cor precisa ser branca, sem mais nem menos. Vamos fazer o mesmo com o Twitter. Cor ao passar o mouse, branco. E vamos até Link em cima de branco. Agora, é claro, agora você pode fornecer seu link aqui mesmo para acessar a plataforma de mídia social específica. Eles devem ser do Linkedin e você pode optar por abri-los em uma nova guia Você também pode adicionar mais ícones sociais, se quiser, e depois procurá-los aqui. Talvez digamos que o YouTube. Vou clicar em Inserir no YouTube. Agora vamos lá. Podemos mudar esse nome para YouTube e mudar para Branco. Vamos analisar as mudanças. Lá vamos nós. Obviamente, agora, eles estão usando as cores oficiais da marca ao passar o mouse, então vamos fazer o mesmo com o YouTube Ao passar o mouse, a cor de fundo precisa ser vermelha. Atualize isso, e agora é vermelho. Vamos analisar as mudanças. Agora, uma coisa que você pode estar se perguntando é você continuará vendo este link do formulário de edição aqui? E a resposta é que os usuários não verão isso porque não estão conectados ao seu painel Se você estiver desconectado, não verá esse formulário de edição. Você só o verá se for o editor como proprietário. Portanto, os usuários não conseguirão ver isso. Então, é assim que se adicionam os ícones sociais. Estamos quase terminando, mas antes começarmos a tornar o site responsivo, vamos criar a página de contato Então, se eu clicar aqui para ir para a página de contato. É assim que a página de contato se parece. Então, vamos ver como construí-lo na próxima lição. Te vejo em breve. 35. Página de contato: I. Então, agora é hora de criar a página de contato, e é assim que parece. Então, voltando para onde estamos trabalhando, vamos entrar aqui. Antes de nos mudarmos para este lugar, vamos tornar isso clicável. Vou selecionar isso. Vá para o link do conteúdo, URL personalizado e eu quero que ele aponte para casa. Então, vou selecionar meu endereço residencial e depois atualizar. Vamos pré-visualizar as mudanças. E agora eu posso clicar aqui para ir para casa. Lá vamos nós. Oh, espere. Mais uma coisa. Precisamos adicionar algum espaçamento entre o rodapé e esse conteúdo Então eu preciso editar a página em si, não a comida, a página. Então, eu vou dizer editar com elementor. Lá vamos nós. E como temos esse contêiner contendo todo esse conteúdo, selecionarei o próprio contêiner Margem inferior avançada. Vamos dar 100. Atualize isso. Agora vamos pré-visualizar as alterações. Rolando para baixo. Lá vamos nós. Um bom espaçamento entre o conteúdo e a pasta. Agora vamos para a página de contato, e é assim que fica por padrão. Vamos para a página de edição para fazer algumas configurações. Vamos alterar o modelo padrão para elemento de largura total. Vamos entrar aqui e dizer cheio sem barra lateral. Vamos encerrar essas três atualizações inativas. Agora vamos editar com o elementor. Vou encerrar isso e isso também. Está tudo bem. Vamos deixar isso aí. Este é nosso editor de contatos. Então, vamos dar uma olhada nisso. Tudo bem. Vamos criar uma coluna dupla como essa. Agora isso será 30% e isso será 70%. Vou clicar nele e no espaço reservado para o código curto. Porque queremos colocar aqui um formulário criado com o formulador Vamos ao formulador e digamos formulários. Criar. Já temos o formulário de inscrição. Agora é o formulário de contato. Deixe-me usar esse modelo. Continuar. Entre em contato para criar. Lá vamos nós. Tem quatro campos. Não preciso do número de telefone de ninguém, então vou deletá-lo. Agora temos o primeiro nome, e-mail e sua mensagem. Esses dois são campos de entrada e essa é uma área de texto com várias linhas Esse é um campo de entrada de linha única. Isso, publique. Vamos copiar esse código curto. E agora que temos esse elemento de código curto, vamos colocar esse formulário lá. Agora é exibição, atualize isso. Vamos também criar algum espaço aqui em cima. Selecione o recipiente que contém isso. Quebre isso e vamos dar talvez 50. Digamos que 60. Atualize isso. O próximo passo é mudar essa aparência. Queremos. Queremos ir para a aparência, para plano, e depois para as cores personalizadas. Então, agora, quando está plana , não tem essas bordas duras. Mas agora, para as cores, o botão de envio também deve conter as cores que usamos da última vez Então, copie essa cor avermelhada no padrão, cole assim . Ao passar o mouse, queremos que seja esse azul marinho Copie isso ao passar o mouse, deite lá e vamos fazer isso Atualize isso. Vamos analisar as mudanças. Ao passar o mouse. Tudo bem. Agora, se formos para o front-end, enquanto isso estiver selecionado, vamos aplicar. E vamos pré-visualizar as mudanças. Lá vamos nós. Agora, vamos aumentar a margem do pote neste recipiente. Então, 100. Atualize isso. Vamos pré-visualizar as mudanças. Assim mesmo. Agora está bem alinhado no centro Em seguida, por que não os arredondamos? Esses são campos de entrada, lembre-se, e essa é uma área de texto. Então, se voltarmos aqui e rolarmos até as configurações personalizadas, teremos um seletor de campo de entrada e um seletor de área de texto Então, para todos os campos de entrada, queremos que o raio da borda seja de cinco pixels, não 50 E se visualizarmos isso, os dois campos de entrada serão arredondados. Agora, vamos fazer isso para a área de texto. O seletor da área de texto. Cinco células de pico. Lá vamos nós. é o botão do formador E eu lembro que o seletor de botões é o botão do formador de envio. Eu sei disso porque eu o uso muitas vezes. Eu me lembro disso. Eu só queria mostrar como obtê-lo do front-end quando estávamos criando o formulário de inscrição. Na maioria das vezes, sempre permanecerá o botão do formador, enviar Vamos repetir o mesmo. Cinco células de pico. Lá vamos nós. Tudo bem. Então, é claro, para a largura, vamos dar 100%. Vamos revisar isso. Lá vamos nós. Atualize isso. Vamos selecionar isso e aplicar as alterações. Então, vamos revisar as alterações no front-end e pronto. Então, agora, é claro, você notará que temos essa barra lateral. Mas tivemos aquele pequeno problema com eles não serem retirados de onde deveriam ser retirados. Vamos ver o que vai acontecer. Então, se formos para a página inicial em uma nova guia, roda do meio do mouse e abri-la, eu quero editar com o elementor do conteúdo do Canvas O que é isso? Eu quero rolar até aqui. Por que temos isso? Oh, sim. Então, agora, depois de atualizar isso, agora podemos digitar as categorias Isso é incrível. Então, agora, digamos produtividade. Remova isso categorizado. E vamos mostrar a produtividade diretamente na página inicial. Então, agora, deixe-me selecionar o botão direito do mouse em copiar. Vamos entrar aqui. Selecione isso com o botão direito do mouse em colar. Tudo bem. Agora, deixe-me selecionar isso, fechar isso, e agora qual deles devemos selecionar aqui? Recente, digamos, em destaque. Em destaque, temos apenas um. Podemos ter certeza acessando aqui as postagens. Quero que mais dessas postagens estejam na categoria de postagens em destaque, então vou editar rapidamente cada uma delas. Edição rápida. Eles também devem estar no recurso, atualizar também, editar rapidamente, atualizar em destaque. Finalmente, bastante atualizado. OK. Tudo bem. Então, agora, se atualizarmos isso. E deixe-me selecionar isso e aplicar para que todas as alterações possam ser aplicadas a partir do back-end. Lá vamos nós. Então, agora ainda temos três. Tudo bem. Então, agora, poste o limite, devemos ter quatro. Isso agora está se comportando mal. Da mesma forma que estava se comportando mal há pouco. Tudo bem. Portanto, acho que não vou continuar lutando para encontrar uma solução para isso. Mas provavelmente eu poderia adicionar uma aula extra aqui mesmo depois de todas essas outras aulas. Depois de solucionar minha solução de problemas e encontrar uma solução para isso. Então não se preocupe, pelo menos você sabe como chegar até aqui. Então, vamos pré-visualizar as alterações mais uma vez. Agora precisamos de algum espaçamento aqui. Então, vamos aumentar essa lacuna, selecionar essa lacuna 30. Vamos atualizar isso. Visualize as alterações. Lá vamos nós. Basicamente, isso é tudo que eu tinha para você nesta aula. Se eu encontrar uma solução para isso, vou compartilhá-la. Caso contrário, encontrarei uma maneira diferente de exibir esses artigos recentes. Então não se preocupe. Você a encontrará em algum lugar da lista de aulas, acho que, no final, como uma aula bônus. Então, nos vemos na próxima lição onde faremos o cabeçalho responsivo Portanto, não vá muito longe. 36. Exibir postagens recentes na barra lateral: Fiz uma pequena pausa na gravação dessas aulas e, quando voltei, minha mente estava fresca e encontrei uma solução para exibir esses artigos recentes. Então, eu quero te mostrar como fazer isso. Então, vamos voltar aqui para o editor, e eu estava praticando, e foi isso que eu inventei Acho que parece muito melhor do que vamos para a página inicial. OK. E veja o original. Esse é o original. E se eu for ao site de referência, é isso que temos no site de referência. Ainda está com boa aparência. Parece incrível, mas, na verdade, trabalharemos menos do que eu trabalhei enquanto criava isso. No momento, enquanto criamos as novas postagens recentes, trabalharemos menos do que teríamos feito. Então, agora, aqui está um kit de postagem de blog elemento por elemento. Então, vou digitar Deixe-me remover isso. E aqui, vou digitar blog. Então, como temos um kit de elementos instalado, existe esse elemento de postagens de blog. Então arraste e solte isso logo abaixo desse título. E virá com tudo isso. Isso parece assustador. Você pode se perguntar como vamos editar isso. Mas não se preocupe. Então, primeiro de tudo, vamos mostrar conteúdo, dizer não. Portanto, não mostramos esse trecho. Em segundo lugar, queremos usar o estilo. Vamos recolher o invólucro e ir para título e reduzir a tipografia, o texto do Então, deixe-me arrastar isso. Deixe-me deixar isso aí por enquanto. Vamos brincar com isso. Mas pelo menos agora, como você pode ver, está começando a caber em um espaço menor. A outra coisa é que, se formos até a lista de postagens, as postagens que criamos, lembre-se de que criamos esse conteúdo fora do Canvas para que possamos mostrá-lo aqui ao lado. Então, nós o criamos como uma postagem e atualmente está na categoria não categorizada. É por isso que está aparecendo aqui. Porque se selecionarmos isso e formos para o conteúdo, feche o layout e vá para a consulta. Você vê que não categorizado está na lista das postagens a serem Então, vamos remover sem categoria. Vamos também ver os destaques. Na verdade, deixe-me remover isso porque está categorizado. Ele deve permanecer como apresentado. Tudo bem. Então, voltando aqui, vamos também remover o destaque. Aqui está o destaque. Vamos remover isso. E isso significa que a postagem fora do Canvas não será exibida aqui porque não estamos exibindo postagens em destaque. A próxima coisa que queremos fazer é ir aos metadados. Vamos ver se podemos mudar alguma coisa aqui. Não, layout. Então, entrando aqui, é aqui que vamos fazer algumas mudanças. Então, primeiro de tudo, vamos quebrar o preenchimento desse fundo, dessa caixa. Essa é a embalagem. Então, preenchimento de contêineres. Vamos aumentar a margem dos contêineres na parte superior para espaçá-los. Então, margem do contêiner. Vamos quebrar isso e depois aumentar a margem superior para espaçá-los. 15 está bem. Então, vamos também aumentar o preenchimento superior. Até 15 e preenchimento inferior 15 também. Porque lembre-se de que estamos tentando alcançar, como você viu no meu exemplo, isso foi um pouco exagerado. Deixe-me usar o invólucro e expandir a imagem em destaque. Vamos para a esquerda principal. Vamos reduzir isso para empurrá-lo um pouco para a esquerda. Mas vamos selecionar esse contêiner que os contém. Quebre a margem também. Reduza um pouco a margem à direita porque queremos equilibrar esse espaçamento com esse espaçamento da imagem, não do fundo branco Tudo bem. Então, com isso, enquanto ainda está selecionado, vamos voltar ao estilo interno. Vamos ao título. Margem. Vamos aumentar a margem na parte superior. Vamos dar dez e reduzir a margem à esquerda. Vamos voltar ao rapper, aumentar o acolchoamento à direita para empurrá-lo este lado e criar mais espaço, assim Mas também vamos derrubar rapper para aumentar o tamanho do título Tipografia do título. Vou clicar aqui e usar a tecla ap no meu teclado para aumentá-la gradualmente. Acho que é um bom tamanho. Depois, também aumentarei altura da linha com a seta do teclado. Acho que é um bom tamanho. Digamos que 16 agora voltando para dentro da embalagem, vamos reduzir, na verdade, está de volta aqui no título, na margem superior Vamos reduzir isso até esse ponto. Então, voltando ao conteúdo, como você pode ver agora, estou mostrando apenas três artigos, mas se entrarmos na consulta, temos a contagem de postagens. Podemos aumentar isso talvez para seis e teremos seis exibidos aqui. Agora, é claro, alguns dos títulos são mais longos que os demais e, portanto, não são balanceados dessa forma. Acho que cabe a você brincar com a nomenclatura de seus artigos para torná-los aproximadamente do mesmo tamanho em termos de comprimento em palavras, para que pareçam uniformes, como os três primeiros Então, se removermos esses dois que estão transbordando além da imagem, vamos fazer esses E agora isso parece bom. Então, deixe-me dizer que atualize e vamos pré-visualizar as mudanças. Então, vamos lá. Eu acho que isso parece incrível. E, claro, se você clicar em qualquer um deles, eles abrirão o artigo para que você possa ler , pois pode ver a escória aqui Então, vamos voltar aqui. Acho que sim, já criamos esta postagem no blog e acho que esquecemos de adicionar uma boa margem em nosso modelo Portanto, toda vez que adicionarmos o modelo a uma postagem do blog para criá-la, ele nem sempre terá esse espaço aqui. Então, vamos editar isso muito rapidamente antes de deixarmos isso. Tudo bem, então vou selecionar esse contêiner que contém tudo. Está segurando tudo até este ponto. Vou para a margem avançada inferior a 100. Atualize isso. Vamos analisar as mudanças. Rolando até o final. Agora, temos um bom espaçamento. E agora que temos essa postagem de blog atualizada, precisamos nos livrar do modelo antigo e salvar esse novo. Enquanto isso estiver selecionado, vou salvar o modelo corretamente. Novo modelo de postagem de blog, Enter. E vamos excluir o modelo antigo de postagem do blog. Exclua isso. Excluí-lo não excluirá postagens do blog que o estão usando. Tudo bem. Agora, voltando aqui, quero ir para a página inicial. E eu quero substituir isso pela nova barra lateral de artigos recentes que criamos. Então edite com o elemento. Vamos rolar até aqui e, em seguida, removerei isso. Volte aqui. Clique neste contêiner, clique com o botão direito do mouse em copiar. Volte aqui. Selecione este contêiner, o botão direito do mouse em colar. Então, está colado lá. Agora podemos selecionar isso e dizer que, talvez queiramos fazer uma consulta interna, queremos exibir apenas a produtividade. Então eu vou me livrar desses outros. E agora ficamos apenas com postagens de produtividade. Eu posso chamar isso de artigos de produtividade. Selecionar estilo, tipografia, tecla de seta para baixo no teclado para reduzir o tamanho, atualizar Vamos analisar as mudanças. Rolando para baixo. Eu gosto disso. Então, está parecendo incrível. Agora, na próxima lição, quero que prossigamos e, se formos ao nosso site de referência, é claro que, como você pode ver, temos esse formulário de inscrição. Já tínhamos outro formulário de inscrição aqui, mas temos outro aqui. Eu quero te mostrar como construir isso na próxima lição. Portanto, não vá muito longe. Te vejo em breve. 37. Página inicial Seção de inscrição: Então, agora é hora de criar este formulário ou seção de inscrição na minha lista de e-mails Então, voltando ao nosso espaço de trabalho, aqui estamos. Enquanto ainda estamos editando a página inicial. É muito fácil adicionar essa seção. Então, primeiro de tudo, vou selecionar essa cópia com o botão direito do mouse. Selecione este contêiner aqui, clique com o botão direito do mouse em colar. Então, agora nós o colamos lá, e vamos nos livrar disso Agora, é claro, vou pegar um código curto. E coloque-o lá. E agora , lembre-se de que já criamos um formulário de inscrição. Então, tudo o que precisamos fazer é pegar o código curto do back-end. Então, voltando aqui, os formulários do formador. E temos um formulário de inscrição. Não precisamos abri-lo. Não precisamos editar. Podemos clicar nessa roda dentada copiar o código curto e voltar aqui Cole esse código curto lá e aí está nosso formulário. Tudo o que precisamos fazer agora é estilizá-lo para ficar assim. Primeiro de tudo, deixe-me pegar essa cópia que, selecione isso, clique duas vezes aqui e cole. Obtenha os artigos mais recentes, copie isso. Quero pegar um editor de texto e soltá-lo ali mesmo. Tudo bem. Vou clicar duas vezes lá e, em seguida, controlar tecla Shift V para colar esse texto lá. Selecione. Enquanto isso ainda estiver selecionado, vou para avançado, quebre esse link ali mesmo. Em seguida, marque a parte inferior. Vamos reduzi-lo até esse ponto. Selecione isso, aumente o tamanho da tipografia. Até aquele lugar. Deixe-me reduzi-lo para talvez 40. Atualize isso. Eu quero pegar minha cor aqui, azul marinho. Não, a propósito, deveria ser branco. Sim, esse texto deveria ser branco. Então, primeiro de tudo, vamos fazer o fundo azul marinho. Portanto, selecione essa pasta colorida em estilo de contêiner. Selecione os textos, os brancos selecionam esses textos. White, atualize. Na verdade, precisamos adicionar algum espaçamento aqui enquanto ele ainda está selecionado, ir para avançado, removê-lo para que possamos editar células individuais, margem superior, talvez até aquele ponto, e, a propósito, esquecemos de aumentar o espaçamento entre essas duas Então, selecionarei o contêiner contendo os dois contêineres e irei para o layout. Digamos que 30. Agora temos um bom espaçamento lá Vou ter que reduzir o tamanho até aquele ponto. Enquanto isso ainda estiver selecionado. Obviamente, antes de tudo, vamos salvar e visualizar as alterações. Rolando para baixo. Eu gosto disso. Mas eu quero vê-lo enquanto estiver desconectado. Deixe-me copiar isso. Em seguida, controle a tecla Shift para abrir uma janela anônima. Em seguida, colarei o URL lá para visualizá-lo como convidado. Rolando para baixo. Sim, então temos muito espaço aqui. Vamos continuar e reduzir isso selecionando essa margem inferior avançada, reduzindo-a para talvez 15, menos 15. Deixe-me ir aqui e me refrescar. Agora temos uma quantidade equilibrada de espaço aqui e aqui em cima. Então, nas laterais, também podemos aumentar o preenchimento. Digamos que, à esquerda e à direita, precisamos. T. Atualize isso. Vamos pré-visualizar as mudanças. Exatamente. Lá vamos nós. Então, é assim que adicionamos a seção de inscrição à nossa página inicial. Os usuários podem enquanto estão rolando para baixo e já estão curtindo os artigos que estão vendo Eles receberão esse formulário e precisarão se inscrever. Nesse momento, é muito fácil fazer com que se inscrevam, pois eles podem ver os benefícios de se inscrever. A próxima coisa que eu quero fazer é mudar a cor desse endereço de e-mail. Mas se fizermos isso, nós o tornaremos branco, porque estamos usando o mesmo formulário de inscrição, ele também será branco aqui porque é o mesmo formulário de inscrição. Se quisermos criar essa cor da etiqueta aqui, endereço de e-mail, branco e deixar isso como cinza escuro , precisamos criar outro formulário de inscrição parecido com este. Então, vamos voltar aqui. Formulário de inscrição, roda dentada. Podemos duplicar essa cópia do formulário de inscrição. Então, eu quero editar isso. Vamos mudar isso para o formulário de inscrição na página. Atualize isso. Vamos falar sobre aparência, cores, noções básicas de campo, rótulo Queremos que o rótulo seja branco. Se visualizarmos isso, agora o rótulo está branco, é por isso que não podemos vê-lo porque o fundo aqui é branco, atualize. Agora, se voltarmos aqui e selecionarmos o formulário, clique em Aplicar. As mudanças agora refletirão nessa forma específica. Rolando para baixo, deixe-me atualizar isso . O que está acontecendo? Arte de controle. Não sei por que não é Oh, espere. Ainda estamos usando o mesmo código curto. Mas aqui, isso tem um código curto diferente. Então, deixe-me copiar esse código curto. Volte aqui e cole o novo código curto. Como você pode ver, ele foi alterado de 3809 para 4809. Então, agora, isso é branco. Atualize isso, visualize as alterações. Então agora é branco, e aqui embaixo, isso ainda é cinza porque esses são dois formulários de inscrição diferentes que parecem idênticos. Então, espero que você entenda a diferença aí. Então, basicamente, isso é como adicionar a página inicial de inscrição ou formulário de inscrição. Na próxima lição, vamos criar o cabeçalho responsivo Vamos tornar esse cabeçalho responsivo em diferentes tamanhos de dispositivos Já fica bem em telas de desktop. Agora, vamos fazer com que tenha uma boa aparência em tablets e celulares. Então, nos vemos em breve. 38. Cabeçalho responsivo: É hora de tornar o site responsivo e começaremos com o cabeçalho Então, indo até aqui, antes de começarmos a trabalhar na capacidade de resposta, vamos ver como ela fica em diferentes dispositivos Então, Control Shift para abrir as ferramentas de desenvolvimento, então Control Shift no meu teclado, vamos clicar nesse botão responsivo Quando clico nele, podemos alternar entre visualização normal e as simulações do dispositivo E aqui nesse menu suspenso, podemos simular diferentes tipos Podemos ver isso em um iPhone 14 max. É assim que parece. Vamos dar uma olhada em um iPad mini. É assim que parece. Então, aqui está o cabeçalho de um iPad mini que não parece muito bom. Na verdade, vamos para a janela anônima. Onde está minha janela anônima ? Aqui está. Quero que sejamos desconectados porque, quando você está conectado, temos uma barra bem pressionada que está nos impedindo de ver no que estamos trabalhando Então, indo para a janela anônima, controle a mudança, agora, é assim que parece Então, vamos voltar ao iPhone 12. É assim que parece. Então, vamos começar com o cabeçalho. Feche isso junto com aquilo porque terminamos com isso, tudo isso. Para começar com o cabeçalho do kit Elements, vamos até os kits Elements Clique em editar com o Elementor aqui e clique com o botão direito em Abrir link em uma nova guia E aqui estamos. Então, se eu selecioná-lo, podemos ir para o modo responsivo, então clique nesse ícone, que revelará os diferentes modos Já fica bem no desktop, então vamos mudar para tablets. Agora, é assim que fica no tablet em nosso editor. Então, podemos deixar esse botão ali mesmo. Mas agora, o que eu quero que façamos é selecionar esse item do menu. OK. Deixe-me selecionar fora. É um pouco complicado selecioná-lo, então pressionarei o controle para abrir o navegador. OK. E sim, na verdade está selecionado. Quero ir para Avançado e, em seguida, remover essas configurações que definimos para o desktop. Como você pode ver, eles estão desatualizados, mas se mudarmos para o desktop, eles agora estarão ativos porque estamos editando o desktop Se mudarmos para o tablet, eles serão avaliados para nos dizer que essas não são as configurações do tablet. Vou quebrar isso. É como reiniciá-lo, e acho que parece bom. Atualize isso. E agora, vamos para essa janela anônima, atualize. Vamos mudar para o iPad Mini, e é assim que fica. Mas isso parece estranho em um iPad mini. Então, deixe-me fechar isso. E é assim que o menu fica em um iPad Mini. Vou voltar aqui. Vamos adicionar nosso logotipo aqui. Então vá para o conteúdo, configurações do menu móvel, logotipo do menu móvel. Vamos selecionar o logotipo e colocá-lo lá, atualizar. Agora, quando abrimos o menu, parece bom. Mas podemos adicionar alguma margem à esquerda, então estilize, feche o invólucro do menu, logotipo do menu móvel, a margem, quebre isso Vamos abri-lo novamente. Margem direita esquerda. Vamos empurrá-lo um pouco para dentro. Atualize isso. Também podemos aumentar a largura para torná-la maior, atualizá-la. Acho que gostei até agora. Vamos mudar para a visualização móvel. E é assim que fica no celular. Então, agora, esse contêiner que contém o logotipo, enquanto estamos aqui, está ocupando 25% Mas quando mudamos para a visualização móvel, ela está ocupando 100% da esquerda para a direita Queríamos ocupar 25% 50%. Então, selecionando essa opção aqui para porcentagem, depois 50%. E esse contêiner móvel também deve ocupar 50%. Assim mesmo. Então podemos deixar esse botão ali mesmo. Atualizar. Não vamos pré-visualizar as mudanças aqui. Vamos mudar aqui. Atualize a janela anônima Vamos mudar para o iPhone 12. Não se preocupe com isso. Isso se deve ao texto e ao conteúdo. É por isso que tudo é empurrado para a esquerda. Mas, como você pode ver, eles estão bem estruturados. Tudo bem, agora isso parece muito melhor. Pode fechá-lo. Se eu abrir o menu, é assim que funcionam os menus. Vamos aumentar o tamanho do menu móvel. Vamos abrir isso. Vá para o logotipo do menu do celular com a atualização? Pré-visualização? Não. Estou acostumado com isso. Então, atualize. Agora, vamos abri-lo. O logotipo é bom. Agora, tudo é empurrado para a esquerda porque, como você pode ver, o H aqui é muito largo. Portanto, a linha deve estar em algum lugar aqui. Tudo deve se encaixar perfeitamente sem esse espaço em branco Então, vamos voltar aqui e confirmar se tudo está bem antes de terminarmos. Acho que agora temos um cabeçalho bonito em todos os dispositivos. Sim, em todos os dispositivos, o cabeçalho parece bom. Então, é assim que o cabeçalho responsivo em diferentes tamanhos de dispositivos Na próxima lição, vamos ver como fazer o mesmo com a página inicial e todo o seu conteúdo antes de passarmos para a pasta. Então, nos vemos em breve. 39. Páginas responsivas: Então, agora é hora de tornar a landing page responsiva. Então, porque terminamos com o cabeçalho. Vou clicar visualizar as alterações para poder clicar neste botão inicial. Em seguida, feche esse editor. Então, agora podemos editar esta página em si com o elementor. E aqui estamos. Então, deixe-me fechar o navegador. E agora vamos clicar no modo responsivo e mudar para o tablet. É assim que fica no tablet. Vamos rolar até o final. Tudo bem. Então, vamos começar com essa seção de heróis principais, selecionando-a. Eu vou para avançado. Então, queremos manter esse preenchimento superior e inferior. Então, se eu quebrar isso, teremos que digitar 50 novamente e 80. Agora, digamos que 60 aqui em tablets. Mas nas laterais, queremos dar talvez 30 e esse outro lado 30. Selecione isso e vamos colocá-lo no meio. Assim mesmo. Vamos selecionar esse contêiner que contém todo o resto. Vamos também dar um preenchimento de 20 nas laterais, à esquerda. E 20 à direita, sem mais nem menos. Agora, quando selecionamos isso, no desktop, está nesse formato no tablet, está mudando para o estilo de grade, e não queremos isso. Queremos ainda manter o layout original. Então, entrando aqui, queremos uma coluna. E devemos estar no local. Por que não está usando cartas de efeito? Acho que é porque não temos largura suficiente como temos no desktop. Quero dizer, isso é muito amplo. E aqui, não temos espaçamento suficiente para ter uma imagem e todo esse conteúdo à esquerda Não acho que possamos aplicar o mesmo layout em que temos uma imagem e o texto à direita no modo desktop. Então, acho que teremos que otimizá-lo do jeito que parece. Então, aqui, nós o configuramos para o local, e acho que estou satisfeito com isso. A única coisa que eu gostaria de fazer é separar isso um pouco. Então, estilo. Vamos ao conteúdo. Agora, vamos voltar às opções de conteúdo e exibição, espaçamento entre linhas Vamos aumentar isso. São 20, digamos 30 para separar cada postagem da anterior. Acho que gosto disso. Em vez de pré-visualizar isso, primeiro, vamos reduzir a lacuna entre as duas colunas Selecionando isso, vá para o layout. A diferença aqui deve ser dez. Na verdade, sem lacuna, zero. Apenas deixe assim. Na verdade, acho que o que podemos fazer é fazer com que isso ocupe 40% do espaço. Clicando nesses 40%. Na verdade, digamos 50% e esse outro lado também ocupará 50%, sem mais nem menos. E podemos deixar isso aí mesmo. Provavelmente podemos ajustar o tamanho do ladrilho lá, Tipografia Não, podemos deixá-lo nesse tamanho, mas reduzir a altura da linha. Atualize isso. Agora, vamos voltar para a janela anônima do simulador Vou atualizar essa página. E então vamos pré-visualizá-lo em um iPad mini. Vamos analisá-lo em um iPad Pro. É assim que fica em um iPad pro. Surface Pro, iPad Air. Agora, parece que quando o visualizamos na janela anônima ou quando acabamos de sair do editor, conseguimos manter o layout lado a lado, mas acho que o outro layout faz muito mais sentido do que ter essa imagem estreita Pelo menos agora podemos ver por que não é uma boa ideia ter o texto e a imagem lado a lado. Bem, isso está selecionado. Vamos ao conteúdo. Digamos cartas. E quanto ao clássico? Tudo bem, vamos atualizar isso. E vamos voltar aqui, atualizá-lo. Lá vamos nós. Então é assim que parece. Acho que parece muito melhor do que o que tínhamos antes. Sim, parece bom. A seguir, vamos ver como torná-lo responsivo no celular Então, vou selecionar esse estilo de texto Tipografia. Vamos reduzir a altura da linha também até esse ponto. Acho que todo o resto fica bem nessa seção de heróis, podemos reduzir isso, acho que vamos deixar isso aí. Rolando para baixo. Aqui estão as postagens do blog. A assinatura vem antes disso, e é por isso que queríamos mantê-la neste contêiner no lado esquerdo, porque esse contêiner entrará em lado esquerdo, porque colapso e virá depois desse contêiner. Então, voltando à visualização móvel, agora o que queremos fazer é aumentar esse espaço, selecionar esse contêiner, ir para avançado, dividir a margem e aumentar a margem superior até aquele ponto, talvez. Agora está equilibrado. Rolando para baixo Precisamos fazer algo sobre isso, então vou selecionar esse estilo. Vamos quebrar isso para aumentar o acolchoamento inferior. Enquanto ainda estamos escondidos. Vamos ao título. Vamos quebrar as configurações padrão que definimos, sem mais nem menos. Vamos colocar tudo no centro. Vamos voltar ao invólucro e aumentar o preenchimento à esquerda e à direita Então, digamos cinco. Não, são 50. Digamos dez e, à direita, dez, que empurra tudo para dentro em dez e dez Então, para a imagem em destaque, vamos reduzir essa margem. Remova essa margem que estabelecemos. E vamos definir uma margem inferior para empurrar o texto para baixo. Vamos reduzir a margem superior para empurrar a imagem para cima e para fora do fundo branco Agora, vamos voltar para dentro da embalagem e reduzir a margem inferior no fundo branco Digamos 20. Acho que parece muito melhor. Selecione este título, estilize, centralize os textos, avançado, margem inferior Vamos empurrar as coisas para baixo. Vamos também à tipografia, aumente um pouco o tamanho, 20, mas reduza a altura da linha OK. Atualize isso. Rolando para baixo. Vamos fazer na próxima lição, vamos trabalhar na pasta. Mas agora vamos voltar aqui e atualizar o simulador. Agora mudando para o iPhone 14. É assim que fica em um iPhone 14. É assim que o blog publica em um iPhone. Agora, é claro, isso é apenas uma ilustração de como essas ferramentas funcionam. Não teremos um site perfeito no momento. Depende de você dedicar um tempo para apimentar e usar todas essas configurações para garantir que tudo se encaixe perfeitamente Por exemplo, acho que esse texto é um pouco pequeno demais, então podemos aumentar um pouco o tamanho. Mas essas são coisas que eu esperaria que você cuidasse. Selecionando isso, indo para o estilo, recolhendo o contorno ou indo para a tipografia do título, vamos aumentar o tamanho do texto e também a altura da linha Isso é demais. Digamos que até esse ponto, atualize. Então, essas são algumas das coisas que você precisaria para dedicar tempo e melhorar a si mesmo. E todas as outras partes que talvez tenhamos esquecido de cuidar. Isso é o que estou fornecendo é apenas uma orientação sobre como fazer essas coisas para ajudá-lo com a mentalidade, sobre como conseguir um bom site Então, vamos lá. Agora, você pode ir em frente e fazer algo sobre essa parte. Deixe-me terminar com isso. Selecionando isso. Vamos fazer com que ocupe talvez 40% e isso possa ser 60%. Não sei por que não está subindo, deveria desabar aqui porque temos espaço suficiente. Vamos fazer com que ele ocupe 100%. E isso também pode ocupar, deixe-me ir para avançado, remover essa margem e aumentar sua largura. E atualize isso. Como você pode ver, eles são empurrados para dentro mais do que o texto e o título Ao selecionar essa opção Avançado, quebre a margem restante. Também vamos fazer o mesmo por isso. Margem avançada restante. Atualize isso. Agora, vamos ver essa atualização. Lá vamos nós. Então eu acho que isso é bom o suficiente por enquanto. Cabe a você ir em frente e brincar com isso. Vamos também reduzir a margem superior disso. Ah, espere, vamos selecionar esse texto, ir para avançado, reduzir a margem inferior para mostrar a imagem. Atualize isso. Atualize isso. Tudo bem. Então, acho que está muito melhor por enquanto, mas fique à vontade para continuar mexendo em todas as configurações para obter melhores resultados Então, na próxima lição, vamos ver como tornar a comida responsiva Então, eu vou te ver em breve. 40. Rodapé responsivo: Então, agora é hora de tornar o rodapé responsivo. Então, vamos editar com elementor depois editar o rodapé Tudo bem, então vamos lá. Então, agora vamos mudar para o modo responsivo, e eu quero mudar para o modo tablet porque ele já fica bem no desktop Lá vamos nós. Então, o que eu quero fazer é colocar um pouco de acolchoamento nas laterais Sim, então vamos fazer isso. Enquanto esse contêiner em si é selecionado, vamos para avançado, e queremos manter esse preenchimento superior e inferior, mas adicionar 20 nas laterais Então, vamos quebrar a esquerda 20, 20. Então, talvez supere 50. Não, na verdade, digamos 40 e top 40. Tudo bem. Vamos embora. Então, fica bem em um tablet. Vamos mudar para o celular. É assim que fica em um celular. Vou selecionar esse texto, vá para o estilo. Coloque no meio. Vamos adicionar uma margem na parte superior para separá-la do logotipo. T é bom. E vamos também colocá-los no meio. Podemos deixá-los lá? Sim, acho que devemos deixá-los lá porque acho que parecem bons. Mas vamos selecionar esse contêiner contendo os links rápidos Advance. Quero aumentar ainda mais o preenchimento superior. Na verdade, volte para zero e aumente a margem superior. Assim mesmo, atualize. Vamos analisar as mudanças. Digamos que o controle mude, e é assim que fica em um tablet. Não quero colocá-los no meio porque vamos ver como eles ficarão, selecionando esse estilo, colocando-os no centro. Como você pode ver, eles não estão alinhados corretamente. Se selecionarmos esses links rápidos. Vamos centralizá-lo, atualizar. Vamos entrar aqui e ver as mudanças. A propósito, acho que está ótimo. Então, vou deixar por isso mesmo. Você pode voltar para o outro layout ou deixá-lo no meio assim. Então, se clicarmos aqui para ir para casa, ou na verdade, vamos também dar uma olhada em um tablet, iPad mini. Vamos até o fundo. É assim que fica em um tablet. Vamos subir. É assim que isso parece. Então, é assim que o site é responsivo, as diferentes seções responsivas nos diferentes dispositivos Agora, você notará que não tornamos essas outras páginas responsivas e, claro, isso é um exercício para você Em cada aula que eu publico, eu sempre deixo você com um exercício. Usando os princípios que usamos para tornar essa página inicial, o cabeçalho e a foto responsivos, você também pode tornar essas outras partes responsivas, a página de contato e os artigos E, finalmente, também temos a página de vídeos, que eu queria dar a vocês como um exercício. Também faz parte do exercício. Se formos ao site de referência aqui, vamos lá. Então, para o site de referência , como você já viu. Se formos para a página de vídeos, temos quatro vídeos de amostra. E se você clicar em um deles, ele aparece e reproduz automaticamente um vídeo, e eles têm esses cantos arredondados E, claro, essa seção de heróis se parece muito com os artigos, a seção de heróis. Isso significa que você pode simplesmente copiar isso. Mas para os vídeos, você precisará usar um elemento de vídeo. Então, vamos voltar aqui. Se entrarmos aqui e pesquisarmos vídeos, você verá diferentes elementos de vídeo. Tem esse kit video by elements, outro do element, a versão gratuita do Elementor, então temos o que é essa caixa de vídeo Brinque com eles e veja qual deles permitirá que você obtenha um resultado como esse. Isso é um exercício para você. Caso você precise de uma página de vídeo para o seu blog. Mas caso você não precise, não precisa trabalhar nesta página. Então, agora tornamos o site responsivo. Uma coisa que você notará se voltarmos para a página inicial, vamos voltar para o local de onde estamos trabalhando. Quero alternar e sair do modo responsivo e atualizar Agora, você notará que perdemos nosso layout aqui que tinha a imagem à esquerda e o texto da postagem à direita. Portanto, a imagem e o texto não estão lado a lado. E descobri que esse elemento que usamos para criar essa grade não tem as configurações do modo responsivo Isso significa que se você configurá-lo para ter essa aparência, ele ficará assim em todos os tamanhos de dispositivos. Se você configurá-lo para ter a imagem à esquerda e o texto à direita, ficarei assim em todos os dispositivos. Então, essa é uma deficiência desse elemento. Eu poderia adicionar uma lição extra mais tarde para mostrar talvez como usar um elemento diferente que não tenha essa lacuna, onde podemos definir layouts diferentes para a exibição das postagens do blog em dispositivos diferentes Mas, por enquanto, acho que isso é bom o suficiente. É aceitável. Lembre-se de que nosso objetivo nesta aula era entender como usar o elementor e word press juntos e plug-ins adicionais para montar um site totalmente funcional Então, atingimos nossa meta. Aprendemos a usar essas ferramentas. Agora, antes de você sair, tenho algumas considerações finais cruciais. Eu quero compartilhar com você. Então, se você esteve comigo até agora, acho que vai querer ouvir o que tenho a dizer, então nos vemos em breve. 41. Pensamentos finais e próximos passos: E bem-vindo de volta. Então, eu só quero dedicar um momento para agradecer por se juntar a mim nesta aula e ficar comigo desde o início até o fim É muito fácil começar uma aula ou um curso, mas é um jogo diferente para terminar o curso. Muitas pessoas desistem ao longo do caminho ou se ocupam e se esquecem de terminar seus cursos. Mas você esteve comigo até o fim. E então eu quero agradecer por ficar comigo até o fim Agora, acho que durante a aula, mencionei em várias aulas que você precisa fazer certas coisas para melhorar seu SEO, o SEO do seu site, a otimização de mecanismos de pesquisa. Seu site permanecerá invisível para os mecanismos de pesquisa, a menos que você otimize para ficar visível para eles. E há maneiras de tornar seu site mais visível para mecanismos de pesquisa como Google e Bing. Mas é seu dia de sorte porque tenho uma aula abrangente de SEO que mostra como otimizar seu site wordpress para mecanismos de pesquisa. Agora que você aprendeu a criar um site com o Wordpress e o elementor, a próxima etapa lógica a ser tomada é aprender como tornar esse site visível para a otimização de mecanismos de pesquisa Então confira essa aula no meu perfil. E tenho certeza de que você aprenderá uma ou duas coisas muito importantes a fazer pelo seu site e pela sua empresa. E antes de você sair, quero te pedir um favor rápido. Se você pudesse levar menos de um minuto e ir abaixo deste player de vídeo até a guia de revisão, gostaria de ouvir seus comentários sobre o que você achou dessa aula. Seu feedback realmente me ajudará a entender o tipo de impacto que estou causando em meus alunos. E também ajudará outros alunos a saber se essa aula é adequada às suas necessidades, porque há futuros alunos procurando uma maneira de criar um site e não têm certeza se essa é uma boa aula para frequentar Você recomendaria que eles fizessem esse curso? Você gostou dessa aula? Se sim, o que você gostou na aula? Isso levará menos de um minuto. Basta acessar a guia de avaliação abaixo deste player de vídeo e, em menos de um minuto, você pode enviar seu feedback aqui mesmo, e nós realmente agradecemos isso Então isso é tudo que eu tenho para você por enquanto. Agora estou trabalhando na próxima aula que publicarei em uma ou duas semanas. Portanto, não se esqueça de me seguir para ser notificado assim que eu publicar uma nova aula. Mas até a próxima vez, não desejo nada além do melhor e quero que você continue criativo. vejo em breve. Paz.