Crie um site de blog profissional com WordPress e Elementor Pro

1. Introdução à criação de um blog profissional com WordPress e Elementor Pro: Você está pronto para criar um blog profissional que não só tenha uma aparência incrível, mas também possa ser monetizado Bem-vindo a criar um site de blog com Wordpress e elemento pro. Nesta aula, vou guiá-lo passo a passo na criação de um blog WordPress moderno, responsivo e totalmente funcional responsivo e totalmente funcional usando o elemento pro Começaremos desde o início. Comprando hospedagem e domínio, instalando o WordPress e configurando o elemento pro. Em seguida, passaremos para o design, onde você aprenderá como criar um blog exclusivo totalmente personalizado, criar páginas de blog, páginas de postagem única e páginas de categorias. Adicione a funcionalidade de pesquisa para facilitar a localização do conteúdo. Configure um formulário de assinante para começar a criar sua lista de e-mail Crie páginas importantes, como sobre contato, política de privacidade e termos e condições. Corrija a capacidade de resposta móvel para que seu site tenha uma aparência perfeita em qualquer lugar Conjunto de e-mail e SMTV para comunicação profissional. Ao final desta aula, você terá um blog bonito, fácil de usar e monetizável, personalizado para sua marca pessoal, empresa Olá, sou Akanka, uma web designer do Sri Lanka e também fundadora da UX Alchemy Eu criei essa aula para tornar o blog mais fácil, rápido e acessível, mesmo que você esteja apenas começando. Se você já se sentiu sobrecarregado pelo WordPress ou não sabia por onde começar, esta aula lhe dará a clareza e a confiança de que você precisa Se você está pronto para criar um blog profissional, da maneira inteligente, usando ferramentas modernas como WordPress e elemento pro, vamos começar a criar seu blog juntos, vemos dentro da classe. 2. Prós e contras do Elementor e do WordPress: Nesta aula, usaremos principalmente duas ferramentas, WordPress e elemental pro Vamos dar uma olhada no que cada ferramenta faz, seus prós e contras. Também algumas alternativas. Você sabe exatamente no que está trabalhando. Primeiro, usaremos o WordPress. O WordPress é nossa plataforma de sites, a base que impulsiona seu site. É uma das plataformas mais populares do mundo. Usado por mais de 40% dos sites. Vamos falar sobre prosa. É de código aberto e gratuito. Você tem controle total do seu site, do design ao SO e ao desempenho. Você pode instalar plug-ins para adicionar quase todos os recursos que você possa imaginar. E é ideal para iniciantes, especialmente quando você usa um construtor visual como o elemento Agora, aqui estão alguns contras. Você precisará comprar um domínio e hospedagem para tornar seu site ativo. Ele requer atualizações e backups regulares para manter tudo funcionando sem problemas. Embora seja flexível, a configuração pode parecer técnica no início. Alternativa ao Wordpress, semanas e espaço quadrado Earl em um construtor de sites que são mais fáceis de começar, mas oferecem menos O Webflow oferece mais liberdade de design. Além disso, para um site simples, framer é outra melhor escolha O último elemento do pro é nosso construtor de páginas. A ferramenta que permite transformar esse design do Pt VolufGMA em um site de palavras totalmente funcional Vamos falar sobre profissionais. É extremamente fácil para iniciantes sem necessidade de código, Dragon Room Você terá controle total do design sobre todas as partes do seu site, incluindo a visualização móvel. Elementp inclui widgets avançados, como formulários, controles deslizantes, intervalo de prêmios, depoimentos e muito mais. Com o criador de temas, você pode criar toda a estrutura, cabeçalhos, rodapés, modelos de blocos e visuais do seu site cabeçalhos, rodapés, modelos de blocos Element of P é um plug-in pago, então não é gratuito. Além disso, se você decidir mudar para outro construtor posteriormente, seu design não será transferido, você precisará reconstruir e, embora seja fácil de usar, ainda precisará passar algum tempo aprendendo a interface e as práticas básicas Agora vamos falar sobre algumas alternativas. Existem construtores como Prix builder, Brave builder, Brave builder, Além disso, temos o editor padrão do Wordpress, Gutenberg Na próxima lição, vamos entrar no design 3. Compre hospedagem e um nome de domínio: Olá, pessoal. Agora é hora de comprar um domínio e hospedá-lo pois precisamos do domínio e hospedagem para hospedar nosso site WordPress. Então, primeiro menos escolha o domínio. Existe um site chamado taldls.com. Neste site, você verá todas as promoções e ofertas dos provedores de domínio e, a partir daqui, poderá comprar um domínio que selecione o melhor Hostin e obtenha um domínio mais barato Aqui, você verá um filtro. Aqui, vou pesquisar nosso nome de domínio como web design personalizado, e aqui tenho que clicar em verificar se você não é um robô. Ok, aqui temos os domínios disponíveis e, a partir desse filtro de preço, colocarei como $1 e vamos ver que tipo de domínio temos por $1 Aqui, temos domínio dot S personalizado de design web 4099. Nome Jeep Então, vou escolher este na nave espacial. Podemos obter o domínio XYC de pontos por Então, aqui, basta clicar em Name Jeep e ele será redirecionado para o nome E aqui eu posso pesquisar o nome do domínio. Então, vamos copiá-lo daqui e colá-lo. Em seguida, clique em pesquisar. Não precisamos do.com. Precisamos de pontos. Então, aqui podemos ver o ponto s, na verdade, podemos adicionar o ponto S. Ok. Agora, aqui está por um dólar 2,98. Eu apenas clico em adicionar ao cartão e ele é adicionado ao cartão. Agora clico em Finalizar compra e aqui posso adicionar o código promocional Então, vou aqui e vamos descobrir o código promocional. Este especial de 99 é o código promocional. Então eu apenas copio e colo aqui, clique em aplicar. Ok, agora eu tenho que entrar na conta Name Jeep, na verdade eu já tenho uma conta Name Jeep Se você não tiver uma, clique em Criar conta gratuita e siga as etapas. No meu caso, clicarei em login e aqui adicionarei meu nome de usuário e senha. Ok, acabei de entrar na conta do Namechp e aqui, adicionarei o código promocional, copiarei daqui e colarei assim Clique em aplicar, e agora temos o subtotal como 0,99, e eu vou desmarcar todas essas coisas, então remova-as Não precisamos de nenhuma dessas coisas. Agora eu posso clicar em Confirmar pedido. Antes de confirmar o pedido, vou acessar namjb.com e vamos atualizá-lo Em seguida, podemos selecionar o host clicando neste host e clicando em Hospedagem compartilhada. E no Name GP, podemos obter este pacote iStella and I Stellar plus para projetar e desenvolver No pacote ISTLLA, teremos recurso de e-mail e teremos GB, SSD No ITLlarPlus, teremos domínio ilimitado. No entanto, há um limite, mesmo que seja ilimitado, nunca é ilimitado. Acho que é só um truque de marketing. No entanto, aqui, temos correio ilimitadas e temos esse recurso de autobup Esse recurso de autobup é muito poderoso, e minha recomendação é escolher essa conta iTellarPlus se você for usar o nome de servidor barato para o nome de servidor barato Portanto, atualmente há uma oferta da Black Friday. É por isso que o valor é tão baixo. No entanto, ainda assim, o Namecheap é o provedor de hospedagem mais barato e acessível E aqui podemos definir o faturamento como mensal ou anual. Se o definirmos como mensal , custará esse valor. No entanto, eu o configuro anualmente e agora podemos obtê-lo por 22,80 $0,08 e podemos renová-lo Agora eu clico em Começar e aqui o definimos como novo domínio e clicamos em já no cartão e nosso custo total será de 23,80 $0,07 Agora eu posso clicar em. Adicione ao carrinho e aqui eu posso clicar em confirmar pedido. No entanto, eu já tenho o Tears Hosting, então eu não preciso dessa hospedagem, então eu apenas clico neste ícone de cláusula e eu só preciso do domínio Além disso, você pode obter o domínio desses outros provedores. E se formos para esse domínio XYZ em uma nave espacial, podemos pesquisar o nome do domínio aqui e continuar Mas para isso, vou escolher o nome GIP, e agora clico em Confirmar pedido e continuo com a compra, coisa também muito importante antes de comprar o domínio, sempre verifique o texto do domínio Se você comprar um domínio com texto ou caracteres incorretos, ele não representará sua marca. Portanto, sempre verifique novamente o texto do seu domínio. Se você pesquisar um domínio como um web design personalizado, verá que esse domínio já está ocupado, o que significa que podemos obter esse domínio e, em vez de obter esse domínio, podemos obter esse tipo de domínio. Então, quando obtemos um domínio, sempre temos que verificar se o domínio é de nível superior ou, para fazer isso, você pode simplesmente pesquisar no Google como se estivéssemos indo para o domínio XYZ de ponto B, podemos pesquisar o domínio de primeiro nível do domínio XYZ Em seguida, diz que XYZ é um nome de domínio de nível superior e, dessa forma, você pode descobrir o nome de domínio oeste, mas os nomes de domínio mais conhecidos são.com dot. Organização de pontos. Se for, é dot co dot k, assim. Obter um domínio de primeiro nível é muito importante porque o Google e outros mecanismos de pesquisa classificarão os domínios de nível superior mais facilidade do que apenas classificar alguns domínios de baixo nível Então, nos vemos depois concluir o processo de compra do domínio. OK. Agora, aqui temos o nome do domínio e agora precisamos alterar o DNS para alterar o DNS, clicarei em Gerenciar DNS suspenso que significa que precisamos configurar o domínio com o servidor E aqui temos o nome principal do DNS básico. Vou mudá-lo para o nome de DNS de hospedagem principal na web. Em seguida, clicarei nesse savy e ele mudará. OK. Agora, o que precisamos fazer é ir para o painel C. Eu vou hospedar na lista, e na lista de hospedagem aqui está nosso anfitrião em. Então, aqui vamos para o painel C, posso simplesmente clicar nele e ele será redirecionado para o painel C. Portanto, não importa o tipo de domínio ou provedor de hospedagem que você escolher. Os painéis C têm a mesma funcionalidade. Então, vou rolar para baixo e aqui temos a seção de domínio, então eu clico nela e agora, a partir daqui, clico em, crio um novo domínio. Aqui temos o conjunto de domínios, basta clicar em, criar um novo domínio e aqui vamos adicionar o nome do domínio, copiar o nome do domínio e colar assim. Em seguida, no servidor de hospedagem, ele criará um novo ponto de design de site personalizado. Ok, então teremos um subdomínio. Então, agora eu clico no botão enviar. Ok, o domínio foi criado com sucesso. Então, se eu clicar aqui e acessar o site, ele ficará assim. No nome G, temos um certificado presl para um próximo. Então, quando clicamos aqui, podemos ver a conexão Cece, que significa que o certificado SSL está configurado corretamente e também nossa URL é TTPs Então agora, Earl Wood, se você não recebeu esta página, espere de cinco a 10 minutos e esta página aparecerá OK. Agora, o que precisamos fazer é instalar o WordPress no domínio. 4. Como instalar o WordPress do zero: Olá, pessoal. É hora de instalar o WordPress. Eu vou para o painel C e no painel C, temos o instalador de aplicativos soft tacular Basta clicar nele e aqui temos o Wordpress e, a partir daqui, basta clicar em Instalar. E agora aqui eu tenho que selecionar os detalhes. Primeiro, selecionarei TTPs e, sem essa parte www dot, apenas TTPs como protocolo, depois selecionarei o nome do domínio Então, aqui está o nosso nome de domínio e aqui vou escolher a versão mais recente do Wordpress e não vou adicionar nenhum diretório Vou apenas instalar o WordPress na pasta raiz e aqui podemos alterar o nome do site e a descrição do site. Mas vamos alterá-los enquanto projetamos o site. Por enquanto, vamos manter essas coisas como estão. E aqui temos que adicionar nome de usuário e senha de administrador. Eu adicionarei esses detalhes e também adicionarei uma senha. Lembre-se seu nome de usuário e senha, pois você deve usar esse nome de usuário e senha para fazer login no Wordpress e, a partir daqui, mudarei este e-mail do administrador para e-mail de trabalho porque atualmente esse e-mail não está funcionando. Ok, role para baixo e aqui eu não preciso de nenhum plugin extra. Remova os plug-ins extras e agora clique neste botão Instalar e ele começará a instalar o wordpress no site. Ok, o Wordpress foi instalado com sucesso e, a partir daqui, posso clicar neste URL e ir para o site do WordPress no URL administrativo, posso acessar o Wordpress assim. A partir daqui, basta clicar em Não, não quero tentar um processo de configuração do ET, e aqui está nosso painel do WordPress. Para acessar o painel do WordPress, basta acessar o URL do nosso site e adicionar o WP Admin no final do URL do site Agora, aqui está a aparência do nosso site. Na próxima lição, vamos limpar o Wordpress e remover coisas desnecessárias do nosso site WordPress. 5. Instalando e ativando o Elementor Pro: Olá, pessoal. usar o Elementor Pro para criar nosso site personalizado porque Elementor é o melhor construtor de sites WordPress que Elementor tem uma pré-versão, mas tem recursos limitados Vamos verificar os planos do Elementor. Para acessar esta página, clique no link na seção de recursos ou na descrição e você será redirecionado para esta página Então, aqui temos um plano de preços. O plano de preços recomendado é o Advanced Solo Website Builder. Com esse plano de preços, podemos obter 118 orçamentos pré e profissionais, e ele tem 86 projetos, mas com o plano essencial, temos apenas 57 Como se entrássemos no mercado na seção de comércio eletrônico com o Advanced solo, obteremos o pop-up Builder Esse é um recurso que vamos usar e, na marca essencial, não temos muitos recursos. No entanto, se você pretende criar mais de um site, pode ir para o plano Avançado. Ou se você é um freelancer que cria um site para seus clientes, pode comprar a versão especializada. Ao escolher esse tipo de plano, poderemos substituir muitos plug-ins e complementos, o que ajudará a aumentar a velocidade de carregamento da página e a otimizar o site em geral. Então, vamos começar a instalar o Elementor. Para fazer isso, vou até o painel do nosso site, e aqui vou acessar os plug-ins e clicar em AdNeu Primeiro, temos que instalar o elemento pre plugin. Então, a partir daqui, vou pesquisar Elementor. Então aqui temos o plugin de criação de sites elemento. É desenvolvido pela elemento.com e é compatível com nossa versão do Wordpress Então eu clico em Instalar agora. OK. Em seguida, clico em Ativar. Tudo bem Agora eu clico em Escape e vou pular essas etapas ou vou clicar neste botão Fechar porque vamos configurar o Elementor Pro usando o site do Elementor Novamente, clique no URL da seção de recursos e você será redirecionado para esta página e, a partir daqui, clicarei no botão Comprar agora no site Advance solo, plano Builder E aqui eu vou ter que preencher os detalhes. Em seguida, clicarei em pagar agora e efetuarei o pagamento. Depois de se registrar com sucesso, você pode baixá-lo aqui clicando neste botão Download ou pode acessar painel do Elementor adicionando ind elemento.com E ao fazer isso, você verá esse tipo de ícone de download e, em seguida, verá o elemento conectado ao Download, clique em , o download será iniciado e agora você tem o elemento do plug-in. Agora vamos configurar nosso site para fazer isso. Vou até o painel do WordPress vou até os plugins e clico em Instalar plug-in. Em seguida, clico em adicionar novo plugin. Em seguida, clico neste botão de upload do plug-in. Em seguida, clico em para empilhar e aqui temos o plug-in element pro baixado Portanto, é um arquivo C. Então, basta selecioná-lo e clicar em Abrir. Em seguida, clico em Instalar agora. A instalação levará alguns minutos. OK. Então você verá essa janela. Então, a partir daqui, basta clicar neste botão de ativação do plug-in. E ele será instalado com sucesso. Então, aqui está o plug-in de instalação. Agora eu clico em conectar e ativar. Então eu chegarei a esse tipo de página. Então, aqui eu clico em ativar minha licença. Ok, o elemento pro foi ativado com sucesso e agora podemos usar os recursos do elemento pro. 6. Limpando o painel do WordPress: Olá, pessoal. No painel do WordPress, você verá esse tipo de item. Para remover todas elas, basta clicar nessas opções do Estren e aqui você pode desmarcar a guia Istab que você não gosta Assim, ao desmarcá-las, você não verá mais essas guias Quanto aos plug-ins, irei para Instalar plug-in. Ele instala automaticamente o cache de velocidade da luz no site. Aqui está um plug-in de cache de velocidade leve instalado no meu servidor. Vou clicar em Desativar porque por enquanto, não precisamos de nenhum plug-in de cache Eu vou deletá-lo. Ok, perfeito. Vamos começar a criar o site na próxima lição. 7. Passo a passo do editor do Elementor: Olá, pessoal. Vamos nos familiarizar com o editor de elementos. Então, vamos criar uma página. Agora estou no painel do nosso site WordPress e, a partir daqui, passarei o mouse sobre as páginas e clicarei em Adicionar nova página E aqui vou adicionar o título como página de sabor. Então, aqui temos um pop-up de modelos. Vou fechá-lo e aqui vou adicionar uma página de degustação. Então, o que vou fazer é clicar nesse botão editar com elemento. Quando eu clicar nele, vou redirecionar para o editor de elementos Vou pular isso por enquanto, e aqui está nosso editor de elementos, e primeiro, clicarei no conjunto de páginas e, a partir da página configurada, alterarei o layout da página para o elemento tela Assim, quando fizermos isso, teremos uma página em branco que podemos usar para criar nosso site personalizado. No nosso lado esquerdo, podemos ver os widgets que podemos usar com o elemento pro Se você tiver um elemento de pré-versão, não poderá acessar todos esses widgets Você pode simplesmente arrastar e soltar qualquer desses elementos na tela. A tela é essa área em branco. Por enquanto, fecharei essa guia de estrutura e, se verificarmos essa barra superior, podemos ver no lado esquerdo que temos o lado definido no ícone, então vamos clicar em Eu clico nela, iremos para a configuração lateral. Nessa configuração lateral, podemos alterar ou configurar opções principais do nosso site como exemplo, se eu clicar no layout e, se eu clicar no layout e atualmente, a largura do conteúdo do tamanho da área de trabalho for 1140 Se alterarmos isso para 101.060, isso afetará todo o site, mas eu o manterei como E se quisermos adicionar preenchimento à parte superior do site, podemos simplesmente desvincular esse valor clicando neste ícone de cadeia, e aqui podemos defini-lo como 60 e, e aqui podemos defini-lo como 60 e seguida, clicar em salvar e agora eu clico em voltar ao Editor e, em seguida, arrastar e soltar um título como esse e o título cairá como aqui porque temos 60% Então, se voltarmos para a configuração Sit e formarmos os layouts e fizermos isso como zero, o cabeçalho será zero Agora vou clicar em Salvar alterações e voltar ao editor. Então, clicando aqui, podemos ver a estrutura do site. Atualmente, temos apenas um título. Então, aqui podemos adicionar nós, basta clicar nos nós e, se você quiser adicionar o nó ou pensar em uma seção, basta selecionar a seção. Nesse caso, selecionarei esse título e aqui posso digitar node lie Isso é para testar. Então eu posso clicar em sair um nó e esse nó aparecerá aqui. Pense se você trabalha com a equipe e tem poucos designers trabalhando em páginas. Ao adicionar esse tipo de nós e quando seus codesigners entrarão no site e verificarão a página, eles poderão ler esses nós e entender muito bem o design. Vamos fechar esse. Agora, aqui temos o nome da página. O nome da página é página de teste e atualmente está em rascunho. Se clicarmos nesse botão publicado, ele estará disponível no site, mas atualmente está no modo rascunho. Então temos esse ícone, esse ícone G para acessar esta configuração de página. Se você clicar aqui e alterar os detalhes, isso afetará todo o site. Mas se você clicar aqui e alterar esses detalhes, isso afetará apenas a configuração da página como eu fiz antes, alterando o layout da página. Então, temos três visualizações. O primeiro é o desktop, segundo é o tablet e o terceiro é o celular. Por exemplo, se quisermos alterar esse tamanho de texto no celular, basta clicar no texto e ir para Estilo e alterar o tamanho da fonte Na verdade, eu tenho que clicar nesse texto assim e ir para Etyle e agora eu posso mudar seu tamanho assim Quando fizermos isso, isso afetará apenas no celular. Se formos para a versão desktop, o texto será o mesmo e é o mesmo na versão para tablet. Versão móvel, ela muda para o tamanho que já definimos. Agora eu volto para a versão desktop. Agora, a parte mais importante é essa seção estranha. Como eu disse antes, podemos usar esses recursos profissionais no elemento profissional e na versão anterior Esse material será baixo. Vamos remover esse texto e criar a seção. A primeira é a seguinte, temos que adicionar o recipiente. Essa é a maneira correta de criar o site. Vou clicar no contêiner e ele adicionará assim a partir deste contêiner, podemos ajustar em detalhes. Por enquanto, vamos mantê-lo como padrão e, em seguida, adicionarei outros itens para fazer isso, clicarei aqui e, em seguida, adicionarei o título e também clicarei neste ícone de adição e adicionarei um editor de texto como este Agora eu clico no contêiner e atualmente sua direção é vertical. Tem uma coluna, mas se clicarmos na horizontal, ela mudará para a horizontal. Existem muitas opções que podemos usar para criar um site perfeito. E vamos ver se queremos mudar esse texto. Podemos clicar neste ícone de lápis ou clicar aqui e clicar em Editar, e então podemos alterar o texto a partir daqui. Vou mudá-lo como uma palavra amarela. E então eu clico no estilo e vou mudar a cor do texto para, por enquanto, vamos mudar para preto, e vou mudar esse tipo para pinos Grappy Pins é minha fonte favorita, e vamos mudar seu tamanho para 60 Vamos fazer com que seja como 60. Então eu vou mudar para médio. Talvez o normal fique melhor assim, e possamos alterar a altura da linha dessa forma e definir o alinhamento para estabelecer OK. Agora, por enquanto, vamos remover esse editor de texto. Eu apenas clico aqui e, em seguida, posso pressionar o botão Excluir ou clicar com o botão direito do mouse e clicar em Excluir, assim. Agora, novamente, clico no contêiner e vamos adicionar alturas 600 do Mint e a altura do contêiner se torna 600. Então eu clico nesse texto e vamos fazer um centro de linha , então clique aqui e vamos fazer com que isso justifique o conteúdo como centro E vamos fazer disso um meio para fazer isso. Eu clico neste centro assim. E agora aqui temos duas linhas. Então, vamos consertar isso. Para corrigi-lo, vou para o Advance e, com antecedência, dissemos essa largura como largura personalizada, para que possamos clicar em padrão e ela atingirá a largura total. Portanto, há muitas coisas para fazer e, em aulas futuras, usaremos todas essas coisas e você poderá criar um sinal incrível. OK. Agora, aqui está nosso simples olá mundo e agora, se eu clicar neste ícone do painel de altura, podemos ver a visão real e também podemos clicar aqui para recuperá-la. E se eu clicar nesse ícone de seta e clicar em visualizar páginas, ele não será atualizado. Vamos clicar em publicar e vamos tentar visualizá-lo novamente. Ok, eu vejo isso. Se quisermos outra seção, basta clicar aqui e clicar no contêiner aqui desta forma ou clicar neste ícone de adição e clicar em Plex Box e selecionar a estrutura. Se eu quiser adicionar uma grade de duas colunas, basta clicar aqui e agora temos a coluna. Então, podemos fazer isso manualmente. Como exemplo, vamos pegar esse contêiner e eu clico aqui. Então vamos para Estyle e deixe-me adicionar o tipo de plano de fundo Então clique neste clássico e vamos mudar a cor para essa cor azul e clicar em Layout. Em Layout, vou definir alturas do Mint, vamos torná-lo como 300. OK. E essa estrutura é um pouco de dor de cabeça, então, para corrigi-la, vou colocá-la assim e arrastá-la para a esquerda do site e ela se tornará uma seção para que possamos verificar facilmente a estrutura do nosso site. E a partir daqui, precisamos adicionar esse tipo de duas colunas para fazer isso. Vou clicar neste ícone de adição e adicionar um contêiner como este. Agora temos o contêiner dentro contêiner, então clicamos com o botão direito do mouse e clicamos em Dublgate, então o que eu posso fazer é clicar no contêiner principal e mudar sua direção para ou horizontal e ele se tornar dois E aqui temos uma lacuna para corrigir essa lacuna, vou mudar essa lacuna para zero, e agora não temos lacuna. Então, agora eu clico aqui para selecionar esse contêiner. Vá para Estilo, clique em Clássico e altere a cor. Vamos mudar para a cor da tela e mudar esse total de cliques Vamos mudar para essa cor de texto. O Elemental Editor é um editor muito simples de usar. Então, basta clicar em publicar ou podemos clicar nesse ícone de visualização para visualizar as alterações. Podemos clicar neste ícone ou ícone de visualização e verificar as alterações de Elger nas aulas reais e futuras Vamos nos aprofundar no editor elementar e aprender muito mais 8. Instalação do tema e configuração do post do blog: Agora vamos instalar o tema. Vou até aqui e clicarei em Equipe. Em Dez, clique neles. Aqui, vou pesquisar Hello Elementor. Nós entendemos o tema. Podemos clicar em Instalar e clicar em Ativar. Agora temos o elemento pro e o elemento Halo Tema. Agora, o que precisamos fazer é criar algumas postagens no blog. Na postagem, clique em todas as postagens e aqui atualmente tenho três postagens no blog, mas preciso de mais postagens no blog porque, se eu não tiver nenhuma postagem no blog, não conseguiremos obter prévia de qualidade do nosso site, uma prévia de qualidade do nosso site, o que significa que teremos muitos Ipaces Vamos criar algumas postagens fictícias e, depois de concluirmos o design, podemos deixar todas elas e clicar aqui e clicar nos modelos, descartar essas postagens e excluí-las permanentemente. Irei ao ChagPT e, no prompt de Dover, aqui direi que você é um consultor financeiro e quero que você gere 12 postagens de registro e eu removerei Aqui está a parte de mais informações e aqui eu direi que eles deveriam ter um título 500 a 600 palavras. A categoria deve ser finanças pessoais, impostos, gerenciamento de dívidas. Investimentos. Vou remover isso, me dar uma parte de três opções e aqui vou dizer que também me dê uma pequena descrição para cada categoria e pressione Enter, aqui temos as descrições das categorias para cada categoria e pressione Enter, e aqui temos e aqui temos Os postes do bloco são muito pequenos, o que significa que não são bons Devo dizer que os generais e anfitrião E devem ter pelo menos 700 palavras ou mais Vamos ver. Sim, por favor. Aqui eu gero a postagem de registro. Agora ele tem que gerar o B dois. Eu direi, por favor, que isso gerará o resto da postagem do blog e, nesta postagem atual, elas não estão relacionadas ao nicho financeiro. Vou simplesmente remover todos eles, clicar nesta caixa de seleção e clicar em ação em massa mow toash apply on Rash, clique aqui, exclua por Tudo bem. E agora vou para as categorias, e atualmente temos essa categoria não categorizada, mas já geramos algumas Então, digamos, por favor, aqui para gerar o resto. E vamos subir. E aqui, vamos adicionar essas categorias, basta clicar nas finanças pessoais e adicionar o nome e a descrição desta forma, clicar na categoria, depois na descrição fiscal, na categoria em gerenciamento de dívidas, descrição e, finalmente, investimento. Tudo bem. Agora temos quatro categorias e a categoria não categorizada é a categoria padrão Deixe aí mesmo e depois vamos para todas as postagens e agora temos que adicionar essas postagens. Aqui está a primeira postagem do blog. Primeiro copie o título e vamos aqui, clique no post. Tudo bem, aqui temos editor de Gutenberg, temos que usar este editor, basta copiar o título e vamos copiar o resto da postagem do log assim e colar Aqui podemos remover essas coisas assim, excluí-las e também podemos excluir esta, selecionar o item e Ah, basta selecionar o item e pressionar delete no teclado. este e esses títulos estiverem em H três, vou torná-los H dois. Além disso, vou fazer com que H dois e esse título esteja no título principal está no H e o resto do título será H dois Se houver muitos H twos, isso não é bom Nesse caso, podemos descobrir desse cabeçalho principal e torná-los H três Por enquanto, vou fazer com que seja assim e, conectando a matemática de classificação, você pode fazer isso facilmente. Agora vou clicar em publicar e publicar a postagem do blog. Atualmente, temos uma postagem no blog como esta e eu vou voltar e aqui temos que adicionar a imagem em destaque. Sem essa imagem em destaque, esta postagem do blog não ficará boa. Vou criar imagens em destaque e nos vemos em segundos. Tudo bem. Acabei de criar a imagem em destaque. Vamos clicar nesse título e, em seguida, podemos ver esse recurso Botão de imagem. Basta clicar nele e aqui vou fazer o upload todas as imagens em destaque que eu já criei. Aqui vamos nós. Eu seleciono todas as nove que tenho, e vamos esperar até que o upload seja feito para que você possa descobrir as imagens em destaque ou as imagens definidas na seção de recursos Aqui, se você verificar essas imagens, largura e a altura de todas essas imagens serão iguais. Aqui temos 1060 como largura e 720 como altura. Portanto, sempre adicione uma força de imagem com a mesma largura e altura para tornar o site exclusivo Se adicionarmos imagens tamanhos diferentes, isso afetará o design do nosso site. Agora eu clico em definir imagem do recurso. Além disso, tenho que adicionar a tag ol, a tag ALT, depois clicar em, disse o futuro Dimag, agora clico em salvar e pronto Acabamos de criar nossa primeira postagem no blog e temos mais oito pela frente. Também na categoria, temos que selecionar a categoria. Já criamos nossas categorias, a categoria padrão do Fst não é categorizada Vou removê-lo e aqui temos finanças pessoais, postagem no blog, agora clico em Conceber com o botão direito Agora, esse editor de Gutenberg tem muitos recursos. Se quiser, você pode usá-los. Por exemplo, digamos, se você quiser adicionar uma nova seção aqui, basta clicar aqui e pressionar Enter e, em seguida, clicar neste blog de anúncios e aqui você pode selecionar o tipo de elemento que deseja adicionar. Além disso, se você clicar em Procurar ou clicar nesse ícone de adição, poderá ver todos os elementos. Por enquanto estamos bem, então vou clicar em salvar. Agora vou clicar aqui e ir para uma página de postagem e clicar em uma postagem para adicionar uma nova postagem. Agora vamos subir. Já adicionamos este e agora temos que adicionar o segundo, copiar o título e encarar o título. Você acha que faz com que pareça melhor do que isso. Isso é apenas para testar, copiar e colar assim. OK. Agora vou clicar nesta postagem e clicar em salvar imagem em destaque. Desculpe, defina a imagem em destaque, e aqui temos a imagem do fundo de emergência, adicione a tag Al e a categoria Slate, finanças pessoais, clique em publicar, publique a postagem Agora eu posso aqui, clicar em Publicar e adicionar a primeira postagem, então eu vou fazer isso e até depois. 9. Configurando as configurações do site: OK. Agora temos todas as postagens e aqui essa categoria de postagem é selecionada como sem categoria Vamos clicar em Edição rápida e aqui podemos configurá-la como atualização de gerenciamento de profundidade. Agora também temos os detalhes da nossa marca. Aqui está o logotipo da marca. Acabei de criá-lo e aqui temos o guia de estilo. Então, aqui temos os detalhes da marca e os códigos de cores, também o cabeçalho e o corpo do texto. Que estamos planejados para usar. OK. Agora temos todas as informações. Em seguida, o que podemos fazer é acessar as páginas, clicar em todas as páginas. E aqui, clique em uma página para criar nossa página inicial. Para o nome da página inicial, adicionarei apenas riqueza. Desculpe pelo título, vou copiar e colar assim. Então, vamos adicionar essa parte ao slogan do site. Quando eu simplesmente colo pressionando Command V ou Control V no Windows, ele é adicionado como um parágrafo. O que podemos fazer é colar esse texto aqui e destacar o texto, Comando A ou Controle A, depois o comando X. E vamos lá, colá-lo assim OK. Agora vou clicar em editar com elemento. OK. Bom. Agora estamos no editor de elementos. O que podemos fazer é definir essas coisas no cenário. Clique aqui e clique nesta configuração lateral. Na configuração lateral, vamos para as cores globais e aqui temos o texto secundário primário e as cores de destaque Vamos copiar esses códigos de cores. Adicione ao nosso site assim. Aqui vamos nós. Na verdade, essa deve ser a cor do plano de fundo, não a cor do texto, então vou apenas adicionar fundo, sem necessidade de colorir , apenas adicionar o plano de fundo para o texto, vamos adicionar a cor primária como que significa que vamos copiar essa cor primária daqui e colá-la assim. Ou talvez vamos deixar essa cor um pouco mais escura porque deve ser fácil de ler porque é um bloco e, mesmo que não seja um bloco, quando criamos um site, precisamos verificar a acessibilidade das cores, e agora clico em salvar alterações e aqui temos as fontes O que podemos fazer é voltar e clicar em fontes globais, e aqui temos as fontes. Vamos adicionar essas fontes. Primeiro, copiamos os pop-ins, adicionamos a família de fontes como fopen e o tamanho será, vamos fazer com que o tamanho seja 62 e com cem 62 e com Vou fazer a transformação em maiúsculas e vamos mudar a linha nove Vamos fazer assim e o espaçamento entre letras é muito bom Então, aqui vou mudar esses dois cabeçalhos principais. Então, aqui precisamos adicionar subtítulo a subtítulo, família de fontes da família aparecerá e o tamanho, vamos fazer o tamanho como 52, não 62, 52 com mold crasformg line night, vamos fazer com 52, tudo bem, e aqui precisamos É Laura, basta copiar. Aura e vamos fazer com que seja 21. Talvez 20 funcionem. Então, com isso normal, vamos como Linet, talvez precisemos mudar a altura da linha Vamos verificar isso depois de chegarmos a isso. Então eu tenho que clicar no botão de texto do botão, vamos pegar HopinshPins 21, vamos fazer isso Talvez vamos fazer disso um meio. Linet também terá 21 anos. Agora, por favor, imagine que agora temos as fontes globais e cor global e ignore o estilo delas. Em seguida, na identidade do site, vamos adicioná-las para mais tarde. Por enquanto, temos que ir para o segundo plano. No plano de fundo, clicarei no tipo de plano de fundo como clássico, e aqui tenho que adicionar a cor de fundo, então clique aqui e selecione a cor de fundo desta forma. Então o conceito muda, então vamos voltar. E agora temos que adicionar o layout. Então, vamos definir o padrão com isso, então a lacuna será dois. O preenchimento padrão do contêiner é dez, vamos continuar assim e vamos voltar e pronto Agora feche aqui e vamos ao site. Agora, aqui vou clicar na configuração da página, na configuração da página, o layout da página será um elemento de largura total. Também no layout, vamos torná-lo elemento de largura total. Então, vamos voltar e falar sobre a identidade do site, vamos adicionar esses detalhes agora mesmo. Então, primeiro, copie o nome do site, cole o nome do site aqui e, em seguida, copie o slogan Cole o slogan aqui. Além disso, aqui podemos adicionar o logotipo do site, clicar aqui e pronto, aqui temos o logotipo do site, basta adicioná-lo e, na tag antiga, clicar no ícone selecionar e sentar FV Acabei de criar o Fav Con. Vamos clicar nesta imagem Qs e adicionar esse ícone FV e você pode encontrar esses detalhes na Ok, agora clique em ocultar agora clique em Salvar alterações E vamos para a janela do editor. Tudo bem. Agora o site está assim, então agora eu clico em publicar e vamos reprimir esta página Quando eu reprimo a página, ela fica assim 10. Criando e personalizando um cabeçalho: Tudo bem. Agora, como primeira etapa, temos que criar o cabeçalho. Então, vamos ao painel do WordPress. Então, nosso site, UrlaWP Admin. Então, a partir daqui, temos esses modelos e clicamos em Team Builder. No Team Builder, aqui temos o cabeçalho, clique no ícone de adição. Bom. A partir daqui, podemos selecionar um cabeçalho ou criar um do zero. Aqui vou fechar isso e vamos criar do zero. A partir daqui, clico no ícone de adição e seleciono a caixa plex e a caixa plex será a linha de direção. E aqui está, basta ir para a frente desse contêiner e remover todas as margens e acolchoamentos E como o poleiro é profundo, adicionarei o logotipo da St Basta clicar aqui para adicionar o elemento e aqui temos o logotipo lateral. Aqui vamos nós. Então vamos para EtyleOeStyle, podemos alterar a Vamos virar o M para a esquerda com 75% e o resto é bom. Agora eu clico no contêiner e adiciono o preenchimento superior e inferior Vamos adicionar o topo como seis e o fundo como seis, assim. Agora temos que adicionar o homem, então clique em adicionar elemento e pesquise no menu. E aqui temos um novo menu, basta adicioná-lo assim. Atualmente, não temos um menu nos menus. Então, o que temos que fazer é clicar aqui, ir para a tela do menu. E gerencie o menu a partir daqui. Então, o que eu vou fazer é clicar nisso, criar um novo menu. Então, aqui vou adicionar o nome do menu. Vamos torná-lo menu principal e criar menu. Ok, criamos com sucesso o menu principal e agora temos que adicionar o item do menu. Aqui está a página inicial. Basta clicar na página inicial e clicar no menu Adicionar ao menu. E se formos ver tudo, não temos outras páginas. Aqui temos uma página chamada home. Mas vamos ver para conferir, vou para páginas e páginas. Em todas as páginas, não temos nenhuma página. Agora, o que posso fazer é clicar aqui e alterar essa etiqueta de navegação para a página inicial assim. Em seguida, temos que adicionar sobre o blog e as páginas de contato. O que podemos fazer é criar um link personalizado aqui, basta acessar customink e adicionar a hashtag de URLs aqui, vamos adicionar textos de links sobre nós basta acessar customink e adicionar a hashtag de URLs aqui, vamos adicionar textos de links Clique em Meno e, novamente, na hashtag e no Link Texas Blow Precisamos criar páginas separadas para todos esses links personalizados, mas, por enquanto, vamos nos concentrar no menu principal e na página inicial. Ou, na verdade, podemos criar a página vazia para cada página ou podemos criar páginas vazias e atribuí-las diretamente aqui. Então, dessa forma, não teremos muito trabalho a fazer. Então, vou remover essas postagens e clicar no menu Salvar. Agora, o que podemos fazer é acessar as páginas e clicar em At NW. E aqui vou adicionar título desta página, pois sobre nós publicá-la, clicar na página do AD, no blog, publicá-la, clicar na página e entrar em contato conosco para publicar. OK. Agora, o que eu posso fazer é voltar aos menus e aqui na aparência, aqui temos menus e aqui agora podemos clicar nas páginas e ver tudo e aqui temos todas as páginas como esta, selecionar todas elas e clicar em Atomnu e ele foi adicionado assim Em seguida, em categorias, podemos categorizar e clicar em Adicionar menu e podemos adicionar essas categorias sob este golpe, assim. Basta adicioná-lo assim na página principal. Agora clique no menu Salvar e agora vamos ao cabeçalho Elementor e publique-o por enquanto Na verdade, podemos salvar isso como rascunho, clique aqui e clique em Salvar rascunho. Dessa forma, podemos salvá-lo sem publicar. Agora selecione o Worresmnu e aqui, escolha o menu como menu principal Ok, o menu foi carregado assim e agora vou selecionar o contêiner principal e, no layout, adicioná-lo como um espaço entre eles. Ok, agora temos que mudar o design do menu. O que eu posso fazer é clicar no menu e ir para Estyle e a tipografia será No entanto, temos que mudar seu tamanho. Vamos mudar isso como 18. Então, a cor do texto será texto, cor normal e, no HA, na verdade, não precisamos de um divisor Se você gosta do divisor, você é assim Em seguida, na borda superior, a cor do texto será essa cor verde. Então, quando eu terminar , ficará verde e não precisaremos de um ponteiro Portanto, na cor ativa, a cor do texto será secundária. E no conteúdo aqui como indicador, marque-o como nenhum Se você gosta de um ponteiro como esse, pode mantê-lo, mas eu não gosto de clicar em nenhum e o alinhamento será iniciado Ok, agora tudo parece bom e vai para o estilo E. E aqui, vamos fazer esse padrão horizontal como zero, e o padrão vertical também será zero. Agora vou adicionar um espaço entre nós. Vamos adicionar como se 90, 90 fosse muito grande. Vamos fazer com que seja como 60. Sim, 60 parece bom. OK. Agora vamos descer. Vamos transformar a cor do texto suspenso como cor primária aqui. Então, a cor de fundo será essa cor de fundo e a tipografia será botão, mas o tamanho da fonte é 80 assim E na borda superior, cor do texto será verde e a cor de fundo será. Vamos fazer com que seja uma cor primária e vejamos como funciona. Sim, funciona perfeitamente. E em ativo, vamos fazer isso. OK. Agora, aqui não precisamos de uma fronteira. E aqui, vamos adicionar padrões horizontais, vamos fazer com que sejam 30, e vamos ver se realmente deve ser um padrão vertical. Faça um padrão vertical, pois 30, 30 é demais. Talvez sejamos 20 e o padrão horizontal também seja 20. Agora está assim, e aqui podemos alterar a distância do menu. Vamos fazer com que 2020 seja demais. Vamos fazer com que nove seja muito bom. Botão de alternância. Isso alterna, mas precisamos ajustar os detalhes do botão de alternância na visualização móvel, porque atualmente a onda móvel atualmente a onda móvel Mas em aulas futuras, corrigiremos a visualização móvel e, por enquanto, vamos mantê-la assim e torná-la central. Basta clicar neste contêiner principal e alinhar os itens no centro e também clicar aqui Agora vou selecionar esse contêiner e os itens on-line, clicar em Centro para tornar esse centro assim e ficará muito bom. Além disso, vamos corrigir as versões para tablet e celular ao mesmo tempo. Então, o que eu posso fazer é clicar na versão para tablet. Na versão para tablet, selecionarei o contêiner e, ao marcar para a esquerda e para a direita, vamos fazer com que seja 15 e a esquerda seja 15 OK. Agora essa imagem parece muito boa, e agora clique neste menu de hambúrguer E aqui podemos alterar o tamanho como quisermos. Vamos mudar isso. 36 e a borda com será zero, raio da borda também será zero E a cor de fundo será essa cor primária ou a cor do texto, e o menu Hamburger em cores será a cor de fundo. OK. Agora temos um problema. Quando abrimos esse menu, ele se abre com o resto do contêiner. Para corrigir isso, clicarei na palavra Rsmo e aqui no conteúdo, farei com a largura total E então, se eu verificar, ele abrirá assim. E agora aqui temos um problema. Esse botão de alternância faz com que ele pare de responder e parece que está fora do layout. O que podemos fazer é clicar no contêiner e mudar a direção do contêiner para a coluna vertical Agora, se eu verificar , ficará assim, e agora ficará muito bom. Também aqui, podemos transformar o conteúdo do logotipo deste site no meio, adicionando cem por cento dessa forma. E se você verificar essas propriedades, verá esse ícone de protrit do tablet Isso significa que quando fazemos alterações enquanto estamos na versão para tablet, essas alterações afetarão apenas a versão para tablet. Se formos para a versão desktop, o design é o mesmo, e aqui você pode ver o ícone da área de trabalho. E se você clicar no celular, você pode ver aqui o celular. Ok, agora vamos trabalhar na versão móvel. Ok, vamos para o celular e veja, basta clicar no contêiner principal e definir a direção para pro horizontal. OK. Agora, vamos lá. Este item do menu deve estar no lado direito para fazer isso. O que eu posso fazer é acessar o logotipo da Sit. Aqui, agora vamos avançar com antecedência, vou alterar essa largura não a imagem com a largura do logotipo deste site. Vamos personalizá-lo e diminuir seu tamanho assim. Vamos adicioná-lo assim. OK. Vamos fazer com que seja 270 Nice. Agora, já tivemos esse problema antes, que é que o lado a lado não está sendo exibido corretamente e descobri o motivo desse problema. Se formos para o contêiner no contêiner, adicionamos a margem direita e esquerda como 15. Mas o que precisamos fazer é adicioná-lo ao preenchimento. Vamos transformar a margem esquerda e direita em zero. Quando fizermos isso, o problema foi corrigido e aqui vou adicionar os seis primeiros e o preenchimento será 15 E também o preenchimento esquerdo será 15. Novamente, temos que diminuir esse tamanho para um pouco mais assim. Na verdade, se não formos aqui no contêiner, vamos para o layout. No layout, vamos transformar a lacuna em zero. E agora, no logotipo lateral, podemos adicioná-lo assim, não 25245 OK. Agora parece muito bom. E se formos para a versão para tablet, podemos fazer a mesma coisa na versão para tablet. Então, basta clicar aqui e fazer isso como uma linha de direção horizontal. E vamos avançar, remover essa margem direita e margem esquerda. Então, vamos adicioná-lo aqui. Na verdade, precisamos clicar juntos no valor do link para verificá-lo 615615 Tudo bem. Não adicionamos a margem direita e esquerda na versão para desktop, então podemos colocá-la assim e vamos lá, aqui está nosso menu e logotipo, e este é o cabeçalho. Agora clique em Publicar e, em seguida, aqui temos Em condição. Então, clicarei em Condição e farei com que inclua todo o site. Em seguida, clico em Salvar e cláusula Ar, agora vamos para nossa página inicial Vamos voltar à página de Wagers. E aqui vamos nós. Aqui está a página inicial Vamos verificar Ok, agora está assim, e esta é a parte do rodapé Por enquanto, vamos criar um rodapé vazio e podemos criar o rodapé depois de concluirmos a seção de heróis Não é a seção de heróis, a página inicial. Ok, vamos para Team Builder Templates Team Builder. E aqui temos dois cabeçalhos. Esse é o cabeçalho. Então, se eu for aqui. Este é o cabeçalho, então vou remover esse cabeçalho. Em Trash, modifique o trash e clique aqui e clique em Renim. Então, vamos no Head, mudá-lo assim. Tudo bem. Parece bom. Então vamos para Footer. Eu apenas clico aqui, e aqui estão alguns rodapés. Por enquanto, vou pular e clicar em publicar na condição de todo o site, clicar em Salvar e fechar OK. Vamos ver. Aqui vamos nós. Agora, aqui está o site. Na próxima lição, teremos que criar a página inicial. 11. Como criar a seção de heróis: Todo mundo. Agora vamos criar a página inicial Atualmente, se formos para a página inicial, ela ficará assim, e eu quero definir a página inicial No nosso caso, vamos para o painel e para a página 0, e precisamos configurar essa página. Então, para fazer isso, o que eu posso fazer é pressionar o painel e ir para set in e Tding Vou abri-la em uma nova janela e, aqui na tela da sua página inicial, clique em uma página estática e defina essa página inicial como nossa página inicial dupla que Agora eu clico em Salvar alterações. Agora, se eu visitar o site, ele ficará assim porque nossa página inicial está vazia Agora eu clico nele com o elemento certo. Agora é hora de criar a página inicial. Ok, vamos começar o design. Primeiro de tudo, temos que criar a seção de heróis. Então, meu plano é criar um controle deslizante de postagem. Portanto, esse controle deslizante terá cerca de três postagens, provavelmente as três postagens mais recentes. Vamos fazer isso. Primeiro, clico neste ícone de adição Xbox e a direção será a coluna. Ok, agora aqui vou para Advance e removerei todo o preenchimento e as margens, tudo Agora vou clicar nesse elemento do anúncio. Então, no elemento Pro, temos um carrossel de loops Usando esse carrossel de loop, podemos criar controles deslizantes com Portanto, a postagem é um conteúdo dinâmico, o que significa que podemos adicionar postagem usando nosso painel em outro termo. Em outros termos, o WordPress é um sistema de gerenciamento de conteúdo CMS Então, vamos usar esse recurso para criar nossa grade de postagens. Para fazer isso, vou simplesmente arrastar e roubar esse carrossel circular dentro OK. Agora, aqui, posso selecionar o tipo de modelo. No nosso caso, deveriam ser postagens. Se você criar diferentes tipos de força usando campos personalizados avançados de plug-in, todos esses itens serão carregados aqui. No nosso caso, temos post e, em seguida, aqui podemos definir a consulta antes de definir a consulta. Vamos criar um modelo. Então, clico em Criar modelo e clico em Salvar aqui para salvar esse design. OK. Agora, aqui, o que vou fazer é clicar nesse ícone de adição e na caixa do Plex, a direção será a coluna. Ok, então, como fiz antes, removo todas as coisas E desnecessárias e clico em adicionar elemento. E aqui temos o título da pose, o trecho da postagem, o recurso Dimag, o conteúdo da postagem, as informações da postagem O que precisamos adicionar é o plano de fundo. Para adicionar o plano de fundo, adicionarei o recurso forçado Dimage O que posso fazer é selecionar esse contêiner e ir para Estyle, clicar em Clássico e aqui, posso usar esse recurso de tags dinâmicas, clicar nele e aqui temos tags dinâmicas No nosso caso, preciso do recurso Dimage. Basta clicar no recurso Dimage. O recurso Dimage mostra assim. Antes de prosseguirmos, clicarei neste item de loop definido e aqui alterarei esse título para um modelo de controle deslizante de pausa Então eu vou publicar isso. Agora eu clico em Salvar e voltar e estamos de volta à nossa página inicial, e aqui o que temos que fazer é selecionar o loop garsel e agora aqui temos que adicionar o número de slides Eu preciso de três slides. Sit on display será um e sit on Scroll também será um. Agora eu clico no modelo, e vamos lá, nosso modelo muda assim. Agora, o que posso fazer é clicar no contêiner e adicionar Might. Vamos somar a altura como 700 assim. Agora vamos para blocos Es em arquivos E. A posição será central e o anexo será o padrão, repita sem repetir, tamanho da tela, vamos fazer com que cubra assim. Então, podemos adicionar o efeito de rolagem, mas eu não vou adicioná-lo, e aqui podemos adicionar o efeito do mouse. Não vou fazer isso. O que vou fazer é adicionar uma sobreposição de fundo, clicar aqui, clicar em normal, e o tipo de fundo será clássico e a cor será nossa cor primária Ou isso. Vamos torná-la a cor de fundo e aumentar a opacidade como cinco, certamente não adicionarei nenhuma cor de fundo Agora, o que eu quero fazer é adicionar o título da pose e uma pequena descrição ou um pouco de informação sobre a postagem, como trecho, e aqui um botão chamado Leia-me Vamos fazer isso. Para fazer isso, o que podemos fazer é clicar em adicionar elemento e, primeiro, adicionar o título da postagem. Ok, eu não permito que eu morra. Então, o que eu posso fazer é publicar isso e clicar na página Editar. OK. Agora, novamente, clique em Editar modelo. Tudo bem. Agora posso acrescentar que é como uma falha. Então, basta adicionar o título da postagem e o título da postagem estará aqui. Eu quero colocá-lo aqui. Antes de fazermos isso, vamos criar o design. Então eu quero um trecho da postagem. Vamos adicionar assim. Então o que eu quero é um botão. Vamos apertar um botão assim. OK. Agora, esse texto não está sendo exibido corretamente. Então, o que podemos fazer é adicionar a cor de fundo a esse texto. Então, para fazer isso, preciso criar um novo contêiner. Vamos amarrar um recipiente como este. E, novamente, vamos remover todas as coisas desnecessárias e, na prática, vamos colocá-las na vertical, colocá-las aqui, depois adiciono todo o título da pausa, o trecho da postagem e o botão Na verdade, vamos fazer assim. OK. Agora vou selecionar o contêiner e ir para Estyle, clicar no tipo de plano de fundo e vamos mudar a cor do plano de fundo Cor primária como essa. Ok, muito bom. Agora, vamos editar com o título. Selecione o título da postagem, vá para o bloco Leste. O alinhamento será à esquerda e a tipografia será um cabeçalho como Em seguida, a cor do texto será a cor do texto de fundo. Bom. Agora temos que adicionar o trecho Então, aqui vou definir o comprimento como dez. Vamos verificar. Que tal clicar em Aplicar para publicar conteúdo. Ok, agora que dez não é bom. Vamos fazer com que seja como 225. Ok, 25 é muito melhor. E vamos para o alinhamento de estilo, alinhamento à esquerda e tipografia será texto Em seguida, a cor do texto será a cor de fundo. E agora está assim, e agora o que eu quero fazer é melhorar esse botão. Vou clicar no botão e o texto do botão será lido mais. Então, lemos mais assim. E se você quiser, você pode adicionar tags dinâmicas, mas eu não vou fazer isso. E para o link, podemos adicionar uma tag dinâmica. Clique na tag dinâmica e aqui podemos adicionar o URL da postagem. Se você não tem ideia sobre tags dinâmicas e uv garausel ou se quiser se aprofundar, eu já tenho um curso completo sobre elemento pro e você pode conferir eu já tenho um curso completo sobre elemento pro ou simplesmente adicionar seu comentário na seção de perguntas e respostas, criarei uma aula separada sobre tags dinâmicas, carser de lóbulo e nota sobre carser de lóbulo OK. Agora vamos para Estes em Es, pois a posição ficará à esquerda, tempo para a lacuna será o botão. Você se lembra de que definimos todas essas coisas na configuração lateral e a cor do texto será vamos criar a cor de fundo, e a cor será a cor secundária. Você viu o que eu fiz? Aqui, a cor do texto, o código de cores global, há um plano de fundo e a cor de fundo é essa cor verde. Raio da borda, será zero e vamos fazer o preenchimento como. Vamos fazer o top 22, direito, 30, inferior, 22, esquerdo 30 assim, mas é um pouco maior. Vamos fazer isso de 20 a 20, agora é muito melhor, talvez 25. Sim. 25 parece muito melhor. E aqui, vamos colocar a borda sobre o design, então clique nele e clique em leva a cor para a cor primária, e o tipo de fundo será ou a cor do plano de fundo será alterada para a cor branca desta forma. Veja? Além disso, você pode adicionar transações como animação, assim. Vamos crescer, viu? Sim. E agora, a seguir, o que eu quero fazer é adicionar isso abaixo aqui e tornar isso muito menor. Para fazer isso, seleciono o subcontêiner que criamos e vamos avançar , mas vamos adicionar preenchimento Então clique aqui e vamos adicionar preenchimento como 20 a todos esses lados e o alinhamento começa. E aqui eu posso mudar o, vamos mudar a largura para 60. Não, 60 não é bom. Talvez 90 funcionem. Sim, 90 é muito bom. Então eu tenho que ir para o contêiner principal no contêiner principal. Eu também tenho que adicionar o bloco. Digamos que foi 20. E agora vamos ao layout. E aqui eu posso definir o conteúdo de justificação como final e alinhar o item será o Ok, você viu que agora está muito melhor. Além disso, o que podemos fazer é clicar nesse segundo contêiner ou no contêiner de fundo, e aqui, se eu clicar aqui e pudermos diminuir a opacidade, vamos fazer assim Ok, agora está muito bom e também em nosso trecho, podemos adicionar texto após o final deste parágrafo O que podemos fazer é ir para Advance e depois. Vamos adicionar três pontos assim. E no botão, esses três pontos não parecem bons, então vou removê-los. Então, quando alguém clicar nesse botão, essa pessoa será redirecionada para esta página ou para esta Além disso, vamos clicar na opção Link e alterá-la para abrir em Nova Janela. Ok, agora está muito bom. Ok, agora o que eu posso fazer é clicar publicar e clicar em Salvar e B. E vamos ver aqui. Aqui está o design. E agora vamos apenas o design. Primeiro, vamos configurar a consulta. Então clique no carrossel Loop e vá até Query. A fonte da consulta será pausada. E aqui, se quisermos, podemos adicionar termos de autor, incluir ou excluir, mas eu não vou fazer nada disso. Portanto, a data estará toda ordenada por aqui, isso deve ser DESC decrescente, que significa que a postagem mais recente será exibida primeiro e a postagem mais antiga será exibida por último. OK. Agora, na configuração, podemos alterar a velocidade do EPL. E quando nos aproximarmos, o lado será empurrado e poderemos mudar a direção, ou se tivermos mais de um lado, podemos adicionar um conjunto de slides e, no nosso caso, não precisamos de nenhum deles, e eu removerei a navegação porque não precisamos dela E também removerei a paginação. OK. Agora, a principal coisa que me preocupa esse design é não cobrir totalmente o layout e ele é muito feio Parecia antigo, então o que podemos fazer é clicar no contêiner, e aqui a largura do conteúdo estará cheia assim. Agora parece bom. Está bem? Ok, agora parece muito melhor, e também o que eu preciso é aumentar a noite mínima. Vamos tentar fazer isso aqui. Não, não vai sair daqui. Então, vou clicar em Editar modelo, sete folhas e aqui, clicar no contêiner, e vamos mudar esse Min Night para como VH e pH 200 Significa que isso será exibido em toda a página inicial. Mas o problema é que eu esqueço que já temos esse cabeçalho. Então, o que eu posso fazer é fazer com que essa altura mínima seja 80. Sim, funcionará e clique em Salvar. Em seguida, clique aqui para editar o cabeçalho. E agora estou no cabeçalho, basta clicar no contêiner do cabeçalho e definir Mnhight como VH como OMG é grande, mas vamos ver que deve ser perfeito. Vamos clicar aqui para editar a página. Sim, é maior do que eu esperava. Então, certamente isso deve ser 80, não pixel VH ET, publique, vamos ver Aqui, vamos fazer com que seja dez. Dez serão trabalho, guarde. Vamos aqui, na verdade, selecione esse contêiner e adicione-o como 90 e salve-o. Na verdade, eu o adicionei para Rome Place, então eu tenho que editar na seção da página inicial, não dentro deste modelo, então vou para Editar modelos e aqui, aqui, seleciono o contêiner e altero para Vamos alterá-lo assim e clicar em alterar para Hundren e clicar em Publicar Vamos ver. Então vamos voltar à nossa página inicial, clique aqui. Clique assim. Ok, agora é LF 12. Como criar a seção de posts em destaque: OK. Agora vamos criar uma seção de postagem em destaque. Para fazer isso, vou aqui e clico no ícone de adição, depois no Flexbox e na direção do Pex Box serão colunas Em seguida, no Advance, removerei todas as margens e patinas Em seguida, clico em um elemento e aqui vou pesquisar postagens. Aqui temos elementos de postagem, então vou colocá-los assim como nove. Agora, a partir daqui, podemos mudar a pele. Eu seleciono este cartão e três colunas funcionarão e a postagem por página será seis, que significa que seis ou a postagem será exibida assim Agora que a resolução da imagem está boa e a proporção da imagem também está boa nesse número, então temos que verificar o título. Aqui, precisamos mostrar o título e a tag de título será H três. Em seguida, no exercício, adicionarei o comprimento do exercício à medida que eles adicionaram cerca Acho que não foi atualizado. Sim, não está sendo atualizado. Talvez vamos remover o EAP, clique neste botão Mostrar para ocultá-lo Agora é assim e também removerei o botão ler mais e não precisamos de data ou contagem de comentários, e abrirei uma nova janela. Então, esse distintivo ficará bem, não precisamos mostrar o Avatar dois Agora vai ficar assim. Mas se você realmente precisa de um exercício, você pode mostrá-lo e fazer com que o comprimento da exp seja cinco e vamos ver nas visualizações reais na visão real, ele é exibido corretamente, então temos que fazer com que esse comprimento de exp seja como seja cinco e vamos ver nas visualizações reais na visão real, ele é exibido corretamente, então temos que fazer com que esse comprimento de exp Agora, se verificarmos, vamos lá, temos o tamanho de 50. Agora vamos para consulta sobre consulta. A fonte são as postagens e a data serão todas, então a ordem B será aleatória, o que significa que será aleatória nas postagens desta seção ou podemos ordená-las por contagem de comandos ou pela última modificação ou usando a ordem do menu, mas vou torná-la aleatória Então, na paginação, não precisamos de paginação. O que podemos fazer é ir para a guia Estilo na guia Estilo, vamos tornar essa lacuna de coluna como 20. O espaço entre as linhas também terá 20 alinhamentos à esquerda, e a cor de fundo do cartão será essa cor de fundo, e não vamos alterar a cor da borda Vou transformar o raio da borda zero e aqui temos a sombra da caixa, faça-a aberta, e teremos essa sombra da caixa E na imagem, vou manter a imagem padrão. Então vamos ao conteúdo. No conteúdo, a cor do título será primária e a tipografia será o subtítulo, mas precisamos alterar os detalhes Aqui, vou fazer com que seja 21, depois o parafuso será médio Médio, não, não médio. Talvez o semibold funcione. Sim, Semibold é bom, e também aqui, vamos fazer com que seja 25 Espaçamento entre letras, vamos torná-lo padrão. Talvez vamos fazer com que a altura dessa linha seja 30. Agora, 28 funcionarão. OK. Agora podemos ajustar o espaçamento, então adicionarei seis e não temos nenhum meta-detalhe aqui Então, o que podemos fazer é ir para Exceto no trecho, a cor será a cor do texto e também aqui podemos tornar essa cor do texto como a cor do título, mas vamos mantê-la como primária e, mas vamos mantê-la como primária em seguida, a tipografia será o Essa tipografia está muito próxima, pelo que me lembro, eu já a mudei, mas vamos ver antes de fazermos isso, vamos adicionar um pouco de espaço na linha de fundo 20 E para o contexto de clique tipográfico, clique nesta fonte global de gerenciamento e clique em Contexto e vamos fazer essa linha Vamos adicioná-lo como 26 e salvar as alterações de volta no editor. Ok, agora está muito bom, mas ainda está muito perto. Então, novamente, vamos aqui e clique aqui, clique em Definir e texto, vamos fazer isso como 30. Agora está muito melhor. Agora, se quisermos, podemos adicionar o leia mais. Na verdade, vamos adicionar a leitura. Clique aqui e vamos lá. E vamos ao conteúdo do Estyle on Estyle em Conteúdo, aqui lemos mais Vou criar a cor como cor secundária e definir a tipografia do botão, mas aqui temos que reduzir o tamanho da fonte Vamos fazer com que seja como 16. E aqui está a mudança desse espaço para seis. E aqui, há espaço adicional em cerca de 20. Ok, agora está muito bom. Ok, agora tudo parece bom. Então, o que eu posso fazer é clicar em publicar, ver as mudanças. Ok, agora vai ficar assim. Além disso, temos que fazer isso aqui no título. Então, vamos fazer isso. Além disso, aqui, não temos uma imagem em destaque, e o espaço entre o título e essa imagem é muito grande, então vamos corrigi-lo. Vamos aqui, e podemos transformar esse espaço em, tipo, vamos transformá-lo em três. E aqui podemos alterar os detalhes do crachá. Aqui podemos alterar a cor do fundo dessa forma e cor do texto será, na verdade a cor do texto de fundo funcionará assim. Ok, agora publique. E aqui vamos nós. Agora, aqui está o design e está muito bom. Então, vamos adicionar o título para adicionar o título, vou clicar aqui e adicionar o cabeçalho. Portanto, o cabeçalho, a tag M, será H dois. Vamos adicioná-lo como nossos últimos insights e começar, fazer com que a tipografia seja um cabeçalho e eu também a duplicarei, então a tag ML será P e pronto fazer com que a tipografia seja um cabeçalho e eu também a duplicarei, então a tag ML será P , não perca nada Leia nossos artigos mais recentes e populares e vamos criá-los como texto. Em seguida, clicarei nesta seção de postagem e, na margem, soltarei dois. Agora tem mais espaçamento. Publique e pronto. Agora ficará assim e eu clicarei no botão Leia-me na profundidade Snowball was depth Avalanche Clique na publicação Editar e clique na imagem em destaque do conceito. Vamos adicionar essa imagem em destaque dessa forma e clicar no conceito. OK. Agora vamos para a próxima etapa. 13. Como criar a seção de categorias: Ok, agora vamos criar uma seção para mostrar todas as categorias. Então, primeiro, clicarei nesse ícone de adição e adicionarei flexbox, tipo de coluna de direção, contêiner e, com antecedência , removerei toda a margem e o preenchimento Então, aqui vou adicionar a margem de um a 20. espaço como este, então vamos adicionar cabeçalho e cabeçalho, um texto explorará sua jornada financeira e eu também o duplicarei e adicionarei o subtítulo desta forma e, em seguida, seguida Agora vou colocar esse centro. Clique no título, no estilo, clique na tipografia e selecione o tipo de subtítulo aqui, coloque-o no centro e também vamos centralizar esse centro e o Agora, aqui temos que adicionar categorias. Então, vamos ao nosso site e às postagens, aqui temos categorias e aqui temos quatro categorias. O que podemos fazer é usar a caixa de ícones. Então, primeiro de tudo, vamos adicionar o elemento e vamos adicionar o contêiner dentro desse contêiner principal. Em seguida, vamos remover todos os preenchimentos e margens e, em seguida, vamos para o layout e a direção do layout deve ser linha Em seguida, clicarei em Adicionar elemento e na caixa do ícone de pesquisa , vamos lá, aqui temos a caixa do ícone, e vamos adicionar os detalhes da categoria. Primeiro copio o nome da categoria e colo no título, e depois vamos copiar a descrição da categoria, passando a descrição desta forma. Em seguida, também clicarei na visualização e clicarei em copiar endereço, adicionarei o endereço do link e clicarei em abrir Nova janela. Agora temos que mudar o design para fazer isso. Vamos para EstilSoets se quisermos, podemos colocar o ícone assim e fazer isso para a esquerda e para a direita para fazer isso, vou clicar aqui e o alinhamento vertical, como esse alinhamento , será à esquerda e o espaçamento do ícone, vamos fazer com que seja 15 e também para o espaçamento do conteúdo, vamos fazer com que 15 15 seja demais Agora, vamos mudar o ícone. Vamos ao ícone e, na verdade, no conteúdo, tenho que mudar o ícone a partir daqui. Na verdade, o que eu posso fazer é copiar todas as categorias dessa forma e depois vamos até o Hag BT , vamos colar isso e remover esses itens assim Então eu vou dizer, me dê um ícone incrível para cada um, vamos ver, vamos lá. Vamos copiar esse e colar. Você tem que remover essas linhas. Na verdade, não existe um ícone chamado handhold em dólares. Me dê um telefone grátis para ícones. Vamos ver. Digamos que haja mais. Sim, vamos copiar a universidade e colar. Ok, insira-o. E agora vamos para o estilo E no estilo E, vamos mudar a cor do ícone para a cor secundária. E o tamanho está bom. Em seguida, no conteúdo, vamos mudar a tipografia para botão. tipografia do título é botão e a cor normal é a cor do texto A cor Go será essa cor verde como esta. Em seguida, a descrição TiroF será texto e a cor será a cor do texto OK. Agora, por que escrevemos e clicamos em bligate e ele será duplicado assim Então, o que eu tenho que fazer é mudar esse conteúdo. Vamos usar categorias, copiar investimentos, não vamos selecionar investimentos, investimentos. Assim, então vamos copiar esse texto. Aí está o texto, clique com o botão direito do mouse em copiar endereço do link, cole e faça o gráfico. Gráfico de ícones. Vamos lá, então eu posso simplesmente clicar no contêiner e clicar com o botão direito do mouse, depois duplicar. Ele será duplicado assim. Então, vamos adicionar os detalhes novamente, adicioná-los assim. Vamos adicionar a carteira. Sempre obtenha a ajuda da IA ao criar um site. Vamos copiar a parte do ruído e colocar aqui o ruído e vir aqui o imposto. Tanques. Copie, cole aqui. Além disso, tenho que colar o URL. Acho que esqueci de colar o URL sobre finanças pessoais. Clique com o botão direito do mouse em copiar endereço do link e cole assim. OK. Agora vamos lá. Aqui temos todos os quatro itens, mas temos muitos problemas. Vamos consertá-los um por um primeiro. Eu quero fazer esse tamanho em 50%, então vamos para Avançar e, em mim, clicar em personalizado e 50. Em seguida, clique aqui também e vá para Advance and custom 50 como este. Em seguida, clicaremos em copiar, depois clicaremos em colar estilo, colaremos o estilo. Agora também temos um problema, que é que não temos espaçamento suficiente Então, o que podemos fazer é criar um contêiner separado. Coloque esse recipiente aqui, então vamos remover essas coisas e eu vou colocar esse recipiente dentro desse recipiente. Além disso, este estará dentro desse contêiner principal que criamos, e no layout aqui, posso definir a linha e a coluna. Vamos fazer com que seja 40 e 40 para que eu não precise adicionar 40 à coluna. E agora aqui vai ficar assim e vamos fazer com que seja 60. E então eu clicarei em uma dessas caixas de ícones e vou até Itis e vamos avançar em Advance, vamos até a borda e torná-la sólida. Na verdade, não precisamos de uma borda, mas o que precisamos é de uma sombra de caixa. Vamos adicionar uma sombra de caixa como essa, e eu não vou alterar os detalhes da sombra da caixa, e no layout, vamos mudar o preenchimento para seis, talvez sim, 15 funcione e agora copie, cole corretamente esse estilo, cole esse estilo, cole esse estilo, também aqui, cole o estilo também aqui, cole Na verdade, o que podemos usar é a grade, não esse contêiner, e se usarmos a grade, ela se ajustará automaticamente de acordo com a grade. Vamos até aqui e vamos adicionar a grade. Vamos adicionar a grade dessa forma e a grade terá duas colunas e essas também serão a lacuna de 40 é demais. Vamos fazer Gaps 20. Em seguida, adicionarei essas caixas à grade. Podemos simplesmente adicioná-lo e colocá-lo aqui e também a partir daqui, torná-lo no tamanho padrão e adicioná-lo aqui, clicar com o botão direito do mouse em copiar, pressionar o estilo. Quando fazemos isso, podemos obter o design com o mesmo tamanho do plano de fundo. Vamos aqui e eliminar a falha. Declarado assim. E sim, então vamos remover todo esse recipiente. E agora tem exatamente o mesmo tamanho em cada item. Além disso, para essa sombra de caixa, vamos até a borda. E aqui vou mudar isso para, tipo, não, vamos continuar assim e o spread será três e o desfoque será 22 Vamos desfocar, pois dez e p serão um. Clicamos em copiar Patty, ft style, pastyle. Tudo bem. Agora temos essa seção totalmente desenvolvida. Além disso, se quisermos, podemos adicionar uma margem de 60 assim. 60 é demais. Talvez 30 seja o tamanho. Agora, vamos dar uma olhada no design. Portanto, se alguém clicar nessa categoria, ela irá para a página da categoria e na verdade, teremos que editar a página da categoria, que faremos em lições futuras. 14. Como criar uma seção de formulário de assinatura: Agora vamos criar um formulário de assinante. Para fazer isso primeiro, vamos criar o contêiner. Assim, então temos que avançar para vincular os valores, então aqui um, 20 será a margem superior. Em seguida, terei que adicionar o cabeçalho para fazer isso, vamos até elementos sobre elementos, arrastar e soltar o título e adicionarei isso como texto do título Vamos ao estilo. O alinhamento do estilo centralizado e a tipografia será o subtítulo Agora vou apenas duplicar esse subtítulo, cabeçalho principal e criar um Vamos para Estyle on Estyle, altere-o para texto e, em seguida, adicionarei o texto assim e você poderá encontrar todo esse conteúdo na seção de recursos Agora eu tenho que adicionar o formulário de assinante. O que podemos usar é a forma elementar. Eu vou formar aqui. Aqui temos o formulário. Vou apenas arrastar e soltar assim. Então, vamos avançar e adicionar as margens superiores à entrada Agora temos espaço. Nós também fizemos isso aqui, se você se lembra, viu o que? Agora vamos ver de que tipo de campos precisamos. No formulário de assinante, precisamos de e-mail e não precisamos de campo de mensagem, precisamos de campo de e-mail Além disso, se quiser, você pode manter o nome, mas eu removerei o nome e manterei apenas o e-mail e o botão. Também aqui como nome do formulário, vou defini-lo como subscrito. OK. Agora, no rótulo, vou esconder o rótulo. Então, temos o botão para o texto do botão, vou definir assinar assim. OK. Agora eu quero fazer isso em linha, o que significa área de texto ou campo de texto e o botão estará na mesma linha. Para fazer isso, clicarei no campo de e-mail e, aqui, como largura da coluna, farei com que seja 75. Ok, agora você vê que com essa mudança e eu também vou para botões em botões, a largura da coluna será 25. OK. O campo de texto é 75% e o botão é 25%. É assim que podemos criar o formulário on-line. Ok, vamos melhorar esse design. Primeiro, irei para Estyle on Estyle como a lacuna da coluna. Vamos fazer com que seja 15 e não precisamos nos preocupar com a diferença entre linhas. Vamos adicioná-lo como 15 por enquanto, e não precisamos nos preocupar com o campo HDML do rótulo e, em seguida, vamos para o campo No campo, podemos adicionar a cor do texto, então vou adicionar a cor do texto como texto, e vamos adicionar tipografia como texto, então a cor de fundo é branca e vamos deixar a cor da borda um pouco cinza assim, vamos fazer o raio da borda como zero porque temos que seguir os botões e outros designs de cartão, temos que manter a exclusividade do site Então, tudo bem aqui e a posição do botão será a malha e o centro de alinhamento. Em seguida, a tipografia, vamos torná-la como tipo de botão e borda Nenhuma, então a cor de fundo será essa cor secundária, e a cor do texto será branca, e não precisamos de uma cor de borda, e não temos nenhum botão anterior ou seguinte, e o raio do quadro será zero e o preenchimento do texto será como 14 14 funcionará porque temos que combinar o campo de texto e a altura do botão desta forma Então, aqui vou para a cor de fundo, será a cor primária, e será assim. Em seguida, manterei a cor do texto como branca. E se você quiser, podemos adicionar animações como essa, mas não é necessário. Ao fazer essas alterações, sempre aplique o design e o estilo que você usa aqui, pois isso manterá a exclusividade do site Agora temos o formulário de inscrição e, se quisermos, podemos acessar Vamos avançar e, portanto, podemos adicionar a pátina direita 60 e o preenchimento esquerdo 60 é muito pequeno, talvez 90 90 por 90 seja bom, talvez um a 212120 por 120 Então agora ele tem um tamanho menor, também vou para o contêiner principal. No contêiner principal, adicionarei a altura da hortelã como 350, talvez 400 e justificarei que o conteúdo estará no centro Em seguida, em um estilo, podemos adicionar a cor de fundo. Vamos adicionar essa cor verde e reduzir a opacidade da cor verde dessa forma e vamos fazer isso como 600 Sim, 600 será ótimo e seguida, vamos acessar o formulário no formulário, temos que definir a ação após o envio. Aqui, removerei o que precisamos fazer para coletar o envio, o que significa que quando o usuário enviar este formulário de e-mail, esse endereço de e-mail se arrependerá de nossa coleção de e-mails, e mostrarei como fica alguns minutos e também aqui, se você quiser, podemos adicionar uma ferramenta de marketing por e-mail como o mail Jim. Se selecionarmos este e-mail para ele, você pode ver aqui que temos a guia Mailchimp e aqui podemos adicionar a ABI do Mailchimp Dessa forma, você pode conectar seu formulário de inscrição ao Mailchimp Nesta lição, eu não vou fazer isso, então vou remover esse chimpanzé de e-mail e também aqui temos essa ação de e-mail, que significa que se entrarmos aqui, se alguém se inscrever nesta lista de e-mail, receberemos uma notificação e teremos que configurar os dois e-mails também de e-mail e outras coisas que queremos obter Os campos significam campos que têm esse formulário Além disso, se você clicar neste ícone de adição, temos muitas opções aqui. Se selecionarmos este e-mail, também podemos enviar um e-mail para nosso visitante ou para a pessoa que preenche este formulário e clica no botão de inscrição, para que possamos notificá-lo de que recebemos o e-mail. Vou remover os dois e, se você quiser adicioná-los , você mesmo pode escrever ou, se tiver algum problema ao experimentá-los, é só me avisar. Vou criar um laser. E no envio da coleta, podemos coletar o IP do usuário e o agente do usuário do remetente Se alguém enviar esse formulário, também poderemos coletar o e-mail do agente de usuário UIP opção adicional, manterei a promulgação padrão como padrão do navegador e vamos voltar ao campo do formulário e ao campo Formulário, aqui podemos ver a ordem das páginas, para que possamos dizer, digamos que digite seu e-mail para se inscrever com antecedência, se quiser, você pode definir um valor padrão e, se quiser, você pode alterar Então, nas aulas de criação de formulários ou nas aulas de design da página de contato, vamos nos aprofundar nesses campos e, por , está tudo bem Agora vou publicar isso e vamos testar esse formulário de assinante, então clicarei em visualizar as alterações e vamos aqui Vou inserir meu e-mail aqui, depois clico em assinar e aqui recebemos a mensagem de sucesso. Além disso, podemos alterar o design da mensagem. Então, se formos para o estilo, aqui temos a mensagem e vamos mudar tipografia da mensagem para texto e a cor será essa A cor da mensagem de erro será vermelha assim, publique-a. Agora, a cor da mensagem será diferente. Então, vou para o painel e no painel, em Elementor, você pode ver a seção de envio Se você clicar aqui, poderá descobrir todos os e-mails ou todos os envios de formulários que você tem no site Então, aqui no formulário de inscrição, recebemos este e-mail. O que podemos fazer é selecionar o formulário aqui. Se você tiver mais de um formulário e quiser obter apenas assinantes, pode selecionar o formulário e clicar em Exportar filtro CSV e obter o arquivo CSV também no futuro ou, se planeja usar a ferramenta de marketing por e-mail, pode usar esse arquivo CSV para adicionar esses e-mails à sua ferramenta de marketing por e-mail Agora está parecendo bom. 15. Como criar o rodapé: Agora temos que criar o Potter. Então, vamos fazer isso. Para fazer isso, vou ao painel do WordPress. No painel do Wordpress, vou até os templates do Builder. Neles Builder, aqui temos o Footer. Basta clicar nesse ícone de adição. Na verdade, acho que já criamos um rodapé. Tente editá-lo. Aqui está o rodapé. Vou remover esse rodapé desnecessário, e aqui temos o rodapé e clicamos em Aqui vamos nós. Eu vou entrar no set in. Vou apenas remover esse texto e vamos manter apenas o rodapé separado Ok, agora vou criar uma caixa flexível como essa. Então, em altura média, vamos fazer com que seja 300. Sim, então vamos balançar a margem e os acolchoamentos. Em seguida, vamos adicionar 20 como margem superior. Então, sobre seu estilo, vamos acrescentar. Vamos adicionar um plano de fundo como esse. Vamos fazer isso como 350 pixels. Sim, isso é muito melhor. Então, a partir daqui, adicionarei um elemento. Primeiro, adicionarei o logotipo lateral e, novamente, no contêiner, selecionaremos a direção horizontal do corvo E sem adicionar apenas o logotipo lateral, adicionarei o contêiner, removerei o material e, em seguida, colocarei esse logotipo dentro do contêiner, assim no contêiner, ele será uma coluna vertical e um item de linha que começa a justificar o conteúdo também será iniciado Agora eu preciso do texto do anúncio. Adicione o título aqui, troque esses dois parágrafos e será texto. Na verdade, esse logotipo não está funcionando aqui porque texto do logotipo é igual à cor de fundo É por isso que essa parte não está aparecendo, então temos que mudar o logotipo antes de mudá-lo. Vamos mudar a cor desse texto. E o que posso fazer é, sem apenas adicionar o logotipo lateral, remover o logotipo lateral e adicionar a imagem. E assim, vamos colocá-lo aqui. Então eu tenho que mudar a imagem, fazer isso aqui eu vou adicionar o logotipo, escolher esta imagem e aqui na seção de recursos, você pode ver que este é o logotipo branco. Vamos adicioná-lo assim. Então, vamos encarar a etiqueta ALD. Agora temos esse logotipo sem fundo branco. É bom. Agora, aqui temos que adicionar um pequeno parágrafo. Vou adicionar um texto como este e agora vou luplgate este contêiner e farei isso três vezes assim Em seguida, removerei esse texto e o logotipo, e farei isso aqui também. Bom. Agora, aqui vou adicionar o link importante. Então, primeiro, adicionarei o título, depois adicionarei o título como links importantes e, no final, vamos fazer com que centro de alinhamento. A tipografia estará abaixo de d, mas temos que Vamos fazer com que seja 30 e a altura da linha também será 35. E a cor do texto será essa cor de fundo. Então, vamos fazer isso como centro para fazer isso, clicar no contêiner e centralizar o item de linha assim. Agora vou ter que adicionar um menu. Menu de pesquisa aqui e adicionarei este menu wordpress aqui no menu suspenso para celular, vou torná-lo como nenhum Na verdade, eu tenho que adicioná-lo a este contêiner desta forma e agora eu tenho que criar um menu ou posso escolher o menu de cabeçalho, selecionar a palavra pres meno item ou o elemento de menu word tras, e o menu será o menu principal, e vamos tornar o layout vertical como este, então o centro de alinhamento e o ponteiro serão nenhum Agora vamos para Estyle. Aqui vou pesquisar. Aqui, vou mudar o nome do menu para um link importante. E no menu Icecream, temos que mudar esse menu, mas vamos fazer isso depois de criarmos todo o conteúdo Por enquanto, vamos até seu dado e aqui, vamos mudar o texto para botão e a cor do texto será a cor de fundo como esta e a cor da borda será verde e a cor ativa também será verde. E podemos mudar o preenchimento vertical, se você quiser. E aqui vou adicionar o espaço entre as 15. E aqui, vamos remover esses preenchimentos horizontais e verticais e vamos fazer isso como 30 30 funcionarão, e ficará assim. Então, o que posso fazer é copiar o texto e colá-lo assim, clicar no contêiner, transformá-lo em um centro de itens de linha e aqui vou mudar isso para uma postagem fundamentada Em seguida, clicarei em adicionar elemento e adicionarei um elemento de postagem. Vou acompanhar essas postagens e publicá-las assim. Na verdade, deveria cair aqui assim e eu vou salgar a pele como se fosse clássica e atualmente está na horizontal, mas precisamos disso na vertical. Para fazer isso, criarei essa coluna como uma e a página da postagem será três, não menos dois, três, e a posição da imagem será deixada assim E o meio de resolução da imagem funcionará e aqui na largura da imagem, vamos fazer com que seja de 30%, assim. Talvez façamos com que seja 40. Ok, precisamos mostrar o título e não precisamos mostrar o exercício e não precisamos mostrar os metadados Além disso, não precisamos ler mais botão, e vamos abrir uma nova janela, para que, quando alguém clicar nela, ela se abra em uma nova janela. OK. Agora vamos ao Query on Query, selecionarei as postagens, elas serão ordenadas pela data e a ordem será DESC Em seguida, clicarei nisso para ignorar ItigiPose e paginação, não precisamos Então vamos para EtyleOeStyle, vamos Na verdade, não precisamos de uma lacuna de coluna aqui. Vamos fazer essa lacuna bruta como dois e também vamos fazer essa lacuna de coluna mais dois. De qualquer forma, um alinhamento será deixado e aqui não precisamos nos preocupar com a caixa, e também não precisamos nos preocupar com a imagem Vamos ao conteúdo e vamos mudar a cor do título do conteúdo para a cor branca desta forma. Além disso, a tipografia será um texto como este. Vamos fazer com que esse tamanho de texto seja 16. Agora está muito melhor e também aqui, vamos fazer com que a altura da linha seja 20. Tudo bem, está parecendo muito bom. E se quisermos, podemos fazer essa skin como cartão. Portanto, o fundo será na cor branca, mas vou mantê-lo como clássico. OK. Agora vou clicar nesse contêiner principal e vamos para o Adlace, vamos adicionar o fundo como 220 assim Além disso, vamos reduzir o tamanho dessa imagem para que tenhamos um bom alinhamento. Vamos fazer com que seja 30. Ok, agora temos a parte superior do rodapé concluída. Aqui temos que adicionar a seção de direitos autorais. Então, vamos fazer isso. Para fazer isso, clicarei no ícone Classe e adicionarei uma nova caixa Plex como essa, depois avançarei todas as margens e preenchimentos e, em um estilo, adicionarei a cor de fundo como essa cor Em seguida, clicarei aqui e adicionarei título, vamos arrastar e amarrar e vamos torná-lo como H três E aqui vou clicar aqui e tenho que selecionar a tag dinâmica de data. Então, aqui temos a data e a hora atuais. Em seguida, clico nesse ícone G e o formato da data será personalizado, e aqui só queremos ver o E. Então, vou manter o Y e remover todos eles e, com antecedência, podemos adicionar o texto antes e depois. Pois antes, adicionarei seno e, depois, adicionarei ou reutilizarei a riqueza de forma sábia, ou Agora vamos para Estyle no estilo E, coloque alinhamento no centro e a tipografia Em seguida, a cor será a cor de fundo. Agora, aqui, vamos fazer essa tipografia para 60, 18 será por e então eu clico no contêiner no contêiner Vamos fazer com que o preenchimento superior seja 15 e preenchimento inferior seja 15. Aqui vamos nós. Na verdade, vamos mudar essa tipografia para texto e aqui, torne-a média, 18 fará o trabalho Em seguida, clico em publicar e agora, se verificarmos o design, podemos ver o rodapé do beat design Além disso, se quisermos, podemos remover o conteúdo daqui e também precisamos criar um novo menu para os links de importação. Vamos fazer isso agora e, para fazer isso, vou até a aparência e os menus. Nos menus, clicarei em Criar novo menu. O nome do menu será importante. Links e clique em Criar. Agora, adicionarei a página inicial AS, a página do blog e a página contato e clicarei em No Tomenu aqui, mudarei para a página inicial e clicarei em Salvar Atualmente, temos apenas esses quatro itens, mas, no futuro, teremos que adicionar mais. Vou voltar ao nosso editor de rodapé e clicar aqui, depois alterar o menu de links importantes como este para links importantes Também precisamos criar páginas de política de privacidade e termos e condições Eu vou te mostrar como criá-los também, e então temos que adicionar esses links também. Vamos publicá-lo. OK. Agora, na próxima etapa, temos que corrigir os problemas móveis. Temos que corrigir os problemas móveis desta página inicial. Depois, podemos acessar o Designer Aus, o blog e a página de contato, e vamos fazer isso nos próximos vídeos. 16. Como corrigir a resposta móvel: Vá em frente, vamos corrigir problemas de resposta. Clique em editar este elemento para editar esta página principal. Então vamos para o tablet Atriov. Eu tenho essa aparência. Já separamos o menu e o cabeçalho. Agora temos que corrigir a partir desse controle deslizante de heróis. Se formos para a visualização móvel, ela ficará assim. O que posso fazer é clicar em Editar modelo para editar a seção do herói. Então eu estou na seção de heróis. Se você verificar aqui, poderá ver quatro modelos de controle deslizante e aqui está o contêiner Vamos para o contêiner principal e para o contêiner principal. Vou adicionar Mnhight como cem. Quero dizer, a seção de heróis, na verdade, terá uma altura mínima, vou adicioná-la em torno de 80, então representará 80% da visualização do tablet. Então, no contêiner, farei isso com 100%. Como preciso alterar o tamanho da fonte para fazer isso, seleciono o título da pose e vamos para Etyle on Etyle. Aqui, clico neste ícone, depois clico em Gerenciar fonte global, um Então, a partir daqui, podemos ver que estamos no Portriot móvel. Então, no Potriot móvel, mudarei esse tamanho para 46. Além disso, a altura da linha será, vamos torná-la 1,2. Não. Vamos fazer isso como um só. E também no submetro, farei com que 41,21 seja 41,21 seja Também no texto, alterarei o tamanho da fonte desse texto para 18 e, para o botão, vamos torná-lo 18 assim. Em seguida, clicarei em Salvar alterações e clicarei em Voltar ao Editor. E aqui vamos nós. Agora temos fontes de tamanho menor e, no modelo mobile hero, ele mostra dois itens, mas eu só preciso de um item. Vamos tentar consertá-lo. Na verdade, temos que fazer essa alteração na configuração do carrossel Loop, então vou clicar em salvar e empacotar e aqui posso selecionar o contêiner dentro do contêiner Aqui temos o carrossel Loop no carrossel Loop. Aqui temos dois slides sobre telas no tablet, eu vou fazer disso um. Dessa forma, vai aparecer assim. OK. Agora está muito bom. Vamos clicar em Editar modelo e clicar em Salvar e aqui, o tamanho intermediário é um pouco maior. Então, o que podemos fazer é mudar a lacuna. Na verdade, se usarmos a configuração lateral do layout da configuração do site aqui, podemos ver a lacuna. Então, podemos mudar essa lacuna para 15 ou dez. Sim, dez serão obras. Então, no tablet, serão dez e, para o preenchimento do conteúdo, se quisermos, podemos adicionar zero Então, vamos para a visualização móvel na visualização móvel, fica assim e a lacuna dez também funcionará nela. Agora, conceberei rapidamente a mudança e voltarei aqui, então, se eu for para fontes globais aqui está o tamanho da fonte do cabeçalho no celular Então, vamos mudar para 36 e inet será um. Na verdade, o lint padrão é um, então não é necessário alterá-lo E aqui, vamos fazer isso como 32, e o tamanho do texto será 18 e a altura da linha será 1,2. Vamos fazer com que seja 1.4. Portanto, também será fácil ler os botões, vamos fazer com que sejam 18. E agora clique em conceber alterações de volta para Então, quando usamos fontes globais, não precisamos ajustá-las manualmente. Quando a ajustamos na fonte global, ela afetará todos os elementos. Agora nosso cabeçalho está bom. Agora vamos à nossa seção interna mais recente e primeiro corrigiremos a versão para tablet. Portanto, na versão para tablet, temos que adicionar o preenchimento esquerdo e direito Vamos adicionar o preenchimento direito como dez e também o preenchimento esquerdo como dez ou talvez 15 15 é o tamanho que temos para, uh, sim, é Ok, e está parecendo muito bom. Então, vamos para a visualização móvel e ver o que podemos fazer. Na visualização móvel, não precisamos fazer nada. É ajustado adequadamente. Se quisermos, podemos alterar o tamanho intermediário, mas manterei o padrão 15. Então temos esta seção, então vou para a versão para tablet e, como fizemos antes, temos que mudar a direita para 15, também para a esquerda para 15, e ela também se ajustará, ela se ajustará no celular. Então, aqui temos que fazer a mesma seção de dois assinantes, cujo avanço aqui será 15 e o restante será 15 Se você acha que esse espaço é demais, pode removê-lo, mas acho que esse espaço é melhor. Agora nossa página inicial é totalmente responsiva e aqui temos um problema, clique no formulário de assinante e adicionamos o preenchimento direito e esquerdo, então vou torná-lo zero e ficará parecido com Ok, agora vou publicá-lo, então temos que editar o rodapé, clicar no rodapé e no rodapé, vamos para clicar no rodapé e no rodapé um problema, clique no formulário de assinante e adicionamos o preenchimento direito e esquerdo, então vou torná-lo zero e ficará parecido com Ok, agora vou publicá-lo, então temos que editar o rodapé, clicar no rodapé e no rodapé, vamos para a versão tablet. E aqui, o que temos que fazer é adicionar esquerda e direita. O topo será 20, será 15, o inferior será 20. E aqui está a pose do motivo, temos que fazer dela uma coluna e ela ficará assim. Então, no celular, a parte superior está boa, um link importante está ok. Pelo motivo da postagem , fica assim. E se colocarmos a imagem no topo, podemos ver o texto assim e o problema é que isso afetará toda a seção, então vou colocá-la à esquerda, como antes. Portanto, em situações como essa, o que podemos fazer é duplicar essa seção e, em seguida, ocultarei a seção acima na visualização móvel, para que ela esteja disponível apenas para desktop e tablet e não para visualização móvel Então, vou para Advance e aqui Responsivo em responsivo, podemos clicar em ocultar no Portal Móvel E quando vamos para o celular, vamos descer. Não vai aparecer. E então não queremos mostrar isso na aba lat e na versão desktop Para fazer isso, vou clicar aqui e ir para Avançado e responsivo Aqui, posso escondê-lo na aba e Hy no desktop. Portanto, ele ficará oculto nessas telas e estará disponível apenas na versão móvel Agora, aqui, o que eu posso fazer é clicar em Conteúdo e posicionar a imagem no topo. Então, o título da nossa pose também aparecerá assim nos Is dies que podemos fotografar e podemos alterar o espaçamento desta forma, fazer com que dois, talvez três funcionem Agora, no desktop, isso não será exibido. Vou mostrar a imagem com o lado esquerdo, esta, e no celular, essa será mostrada. Agora eu clico em publicar e vamos conferir em design real. Aqui, vou clicar com o botão direito do mouse e clicar em Inspecionar. Então, aqui vou clicar nesta barra de ferramentas do dispositivo Toggle. E aqui agora temos a versão móvel, e se eu rolar para baixo, aqui está o resultado que aparece. E na versão desktop, aqui está o resultado. Espero que você tenha entendido. Ok, agora projetamos o cabeçalho com sucesso , mas também aqui, temos que adicionar altura e prontidão à esquerda 15 e publicá-lo bem Agora, aqui temos o design. 17. Projetando a página Sobre: Temos que criar a página ATS. Vamos clicar aqui. Atualmente, temos a página vazia. O que eu faço é clicar na página Editar. Então aqui, eu clico no botão Editar com elemento. Agora estou no editor de elementos, então posso simplesmente clicar aqui e clicar em blocos de contexto e clicar na coluna de direção para criar um novo contêiner e vamos fazer Margem e Padina sejam zero, aqui está em Margem para passar 60 assim e aqui temos que adicionar os detalhes e primeiro adicionarei o título, o texto do título, ele estará no centro e o tipógrafo será o cabeçalho centro e o tipógrafo será o e também vou duplicá-lo e fazer isso como parágrafo e neste texto tipográfico Agora, o que eu tenho que fazer é gerar conteúdo. O que eu posso fazer é obter a ajuda da IA. Ok, aqui estou no chat de IA que usei para gerar uma postagem no blog, e aqui vou dizer, fale sobre o título e o conteúdo da página, você precisa ter um subtítulo de cabeçalho e uma descrição sobre nós você precisa ter subtítulo de cabeçalho e uma descrição sobre No seu caso, você tem que escrevê-lo sozinho ou usar a ajuda da IA de acordo com o seu nicho e isso gerou algo que eu não quero, então eu tenho que dizer a essa IA que isso é para o site do bloco, que inclui tudo o que vamos subir e verificar nossas categorias. Basta copiar a categoria. Inclui todas as três categorias, três categorias e outras três categorias e me dá informações sobre o conteúdo deste site do bloco. E vamos ver o que vai acontecer. Ok, isso é bom. Vamos copiar essa parte, e aqui vou adicioná-la assim e, no seu caso, não faça o mesmo. Você precisa fazer isso de acordo com o seu nicho e de acordo com o site vinculado. Então, aqui, podemos adicionar o que abordamos. Vamos adicionar esse após esta sessão. Então, o que eu posso fazer é clicar aqui, clicar em Caixa de contexto e direcionar como coluna Em seguida, vá para avançar no Advance. Vamos adicionar uma margem para ultrapassar um, 220, e dentro disso, criarei outro contêiner e removerei todas as margens e preenchimentos. No layout, direi a direção horizontal e o conteúdo em Y estarão aqui, e depois clicarei aqui e adicionarei Em seguida, adicionarei um título aqui. Você se lembra que esse contêiner é um contêiner horizontal direto? É por isso que esse título foi adicionado assim e vamos aqui Vou apenas copiar o texto do título aqui e adicionar o texto do título desta forma Na verdade, podemos usar esse contêiner. Vou adicionar a imagem e o título a esse contêiner principal e , em seguida, vamos fazer esse contêiner principal na direção horizontal Em seguida, adicionarei esse título, somente esse título dentro do contêiner e esse contêiner, o subcontêiner, terá uma coluna vertical Dessa forma, não precisaremos adicionar muitos elementos então vamos às DSTs e faça disso um subtítulo como este Então eu vou duplicar isso e vamos fazer isso como conteúdo H três Além disso, este será H quatro e aqui na pessoa. Na verdade, podemos adicionar aquela grade que já criamos. Vou remover este e vamos para a página inicial e, na página inicial, clicarei em Editar com Veja, eu não criei este site nem criei um plano. Acabei de ser criado em tempo real. Você sabe, eu apenas copio essa grade, apenas copio e vamos vir aqui, depois andar pela grade assim. Então, na grade, na verdade, não precisamos da grade aqui, mas vamos grade da grade, as colunas serão uma e as linhas serão uma, duas, três, quatro linhas. Oh, assim. E aqui, vamos fazer com que essa imagem tenha um tamanho de 40%. Na verdade, temos que ir para avançar. Vamos fazer o tamanho da imagem aqui em cem e, com antecedência, a largura será para a popa, o que significa 40% Assim. Agradável. O intervalo real de 50 , 60, 60% funcionará, e este será de 40 por. Não, essa deve ser 60% e essa imagem deve ser 40% assim. Agora, aqui, eu tenho que adicionar uma imagem. Essa imagem deve ser vertical. Quando eu crio a imagem, eu deveria pensar sobre isso. Eu vou criar a imagem. Volte aqui. Acabei de criar a imagem, então, para criar uma imagem, uso o site CNMAouse, como fxs.com, e uso o Figma para cortá-la e Aqui temos a imagem, essa imagem usa 700 e a largura é 600. Vamos adicioná-lo aqui e ver o que temos que fazer. Vou simplesmente soltá-la desta forma e aqui copiar a tag ol , depois a tag ol, e aqui ela ficará assim e não estará totalmente coberta aqui. O que podemos fazer é aumentar a altura da imagem. Eu vou até o Canva, faço isso e nós voltaremos. Basta desenhar a imagem, vou aqui e nesse ataque de imagem e vamos ver se ainda não está perfeitamente alinhada com o nosso design Então, o que eu posso fazer é colocar isso como um centro alinhado, ou posso aumentar esse costume ao vivo, fazendo com que valha 50, 50 Ou o que você pode fazer é descobrir a largura e a altura desta seção. Então, para fazer isso, você pode clicar em pré-visualizar alterações. E aqui vamos nós. Vou clicar com o botão direito do mouse em Inspec e clicar aqui. Então aqui você pode ver a altura da imagem e a imagem com altura. Você pode usar isso com altura para criar a imagem. Agora vamos passar para a próxima seção e vamos aqui. Vamos ver a próxima seção. A próxima seção explica por que fazemos isso e nos juntamos à nossa comunidade. Vamos criar essas duas seções. Posso facilmente duplicar esta seção e colar, sim, temos que colá-la abaixo desta O que abordamos na seção, podemos simplesmente fazer assim e aqui fazer essa marcha no topo passar um, dois, 20, e vamos mudar esse texto para o motivo pelo qual fazemos isso assim, e então podemos adicionar esta seção. Agora temos que adicionar a seção de junte-se à nossa comunidade. O que eu posso fazer é copiar este texto, basta duplicar este texto e colocá-lo abaixo, depois aqui, depois copiar e compilar esta seção e colá-lo abaixo desta forma e adicioná-lo assim Então eu tenho que adicionar aqui, adicionar este formulário, então vou copiá-lo e colá-lo assim. Aqui, clicarei neste título e faremos com que H três também faça o mesmo para ser H três E quando adicionamos isso como meio, aparentemente não é muito útil, o que podemos fazer é clicar aqui e fazer com que fique uma linha à esquerda assim. Além disso, temos que fazer o mesmo aqui e na sessão de inscrição, vamos virar à esquerda e escrever patins como este Agora, o que eu quero fazer é adicionar uma imagem como essa neste lado. Para fazer isso, temos que embrulhar esses itens em um contêiner diferente. Vamos clicar aqui e adicionar um contêiner como esse e todas as coisas aqui. Vou apenas adicionar todos os itens dentro desse contêiner assim. Aqui vamos nós. Agora, vamos ter um espaço entre essas duas seções. Podemos adicionar facilmente a redução de margem aqui ou podemos usar dois contêineres diferentes. Vou apenas adicionar uma margem no topo aqui. Vamos fazer com que 30 ou talvez 60, 60 funcionem. E de outras maneiras, podemos clicar aqui e adicionar um contêiner como esse e, novamente, remover essas coisas e, dentro desse contêiner, colocar esse e esse. Então eu vou duplicar esse recipiente e remover este e este, então eu vou colocar este e este dentro desse recipiente Agora, na verdade, temos que adicionar este também. Isso é um pouco trabalhoso, mas basta adicionar a margem superior, mas eu só quero mostrar isso para você agora neste contêiner principal, posso ir para o layout e adicionar a lacuna de linha como 60 assim. Então eu quero adicionar uma imagem aqui. Para fazer isso, clicarei no contêiner principal e mudarei sua direção para linha horizontal e apenas duplicarei isso Não, vamos copiar essa imagem e clicar aqui e colar a imagem assim. Será exatamente de acordo com o design e clique aqui. Vamos fazer isso como 60. Em seguida, clique aqui e faça com que este alinhe os itens no centro. Também temos que fazer o mesmo aqui desta forma. Agora eu posso mudar essa imagem. Aqui está a imagem recém-criada e eu clico aqui, depois vou para Conteúdo e carrego a imagem. Também temos que adicionar o texto alternativo. Ao adicionar o texto alternativo, sempre adicione texto significativo e palavras-chave amigáveis, como ser rico ou algo parecido E vamos lá, acabamos de criar uma página. Além disso, se quisermos, podemos adicionar mais seções a esta página, mas vamos mantê-la minimalista Agora, em branco, publicado, e na próxima lição, temos que corrigir o problema de responsividade móvel 18. Como corrigir a resposta móvel na página Sobre: Ok, agora temos que corrigir os problemas de resposta móvel. Antes de fazermos isso, no último vídeo em que fizemos a responsividade móvel, alteramos essa lacuna para dez, mas só queremos fazer isso nas versões tablet e móvel, mas a versão para desktop também mudou Vamos para a configuração lateral e para o layout aqui, vamos fazer isso como dois y porque se fizermos dez, sempre serão dez e vamos clicar nas alterações, clicar em voltar ao Editor Ok, perfeito. Agora vamos para a versão retrato do tablet e vamos alterá-los. Vamos somar adicionando a direita como 15 e a esquerda como 50. Também aqui, vamos mudar isso. Vamos criar uma coluna de direção e, em seguida, clicar na imagem e avançar e transformá-la em cem ou podemos simplesmente preenchê-la e também temos que fazer o mesmo aqui. Na verdade, está no layout, faça com que seja 100% assim. Então, podemos adicionar os padrões direito 15, patinuidade esquerda Agora, aqui também podemos fazer o mesmo: tornar a coluna vertical e, em seguida, avançar no lado direito como 15 e no padrão esquerdo como 50 Então, vamos clicar aqui com antecedência. Deixe isso cheio. Tudo bem. Agora está muito bom. Então vamos ao Mobile Patriot no Mobile Port Riot. Parece que tudo parece muito bom e não precisamos fazer nada. Ok, agora clique em publicar, assim, acabamos de criar a página A também. Agora temos que configurar a página do blog e vamos fazer isso na próxima lição. 19. Configuração da página do blog: Ok, agora vamos configurar a página de bloqueio para fazer isso, podemos usar o elemento ou o Them Builder. Em modelos, aqui temos o Team Builder. Basta clicar nele e agora aqui, clique nele em Novo. Quando você clica aqui, aqui podemos ver todas as seções do nosso site que podemos editar. Temos que editar todos eles. Primeiro, vamos editar a seção de bloqueio. Aqui temos arquivo. Se eu clicar neste ícone de informações, aqui podemos ter a descrição. Então, aqui podemos criar a lista de bloqueio. Vamos fazer isso, clique neste ícone de adição e aqui podemos obter os modelos pré-construídos. Se quiser, você pode usar um deles, mas vou fechá-lo e vamos construí-lo do zero. Vou clicar neste ícone de adição, Tex Box aqui, depois fazer esse zero como o valor e, para a margem superior, vamos fazer 60 nos elementos, aqui temos o título do arquivo. Vou apenas adicioná-lo e isso se ajustará automaticamente de acordo com a página. Aqui vou centralizá-lo e vamos mudar a tipografia para o cabeçalho assim Então, novamente, clicarei em adicionar elemento e aqui temos a força do arco, basta arrastá-la e soltá-la Você se lembra da última vez que fizemos o mesmo na página inicial e aqui podemos fazer o mesmo Agora, aqui temos que ajustar o estilo para fazer isso primeiro, vamos selecionar a capa como parte desta, depois a coluna será três e devemos mostrar a imagem. Vamos definir a resolução da imagem como média grande para que possamos obter imagem nítida e temos que mostrar o trecho do título. Exceto pelo tamanho, vamos fazer com que seja dois Então, se quiser, você pode mostrar a data e os comandos. Portanto, neste caso, não estou mostrando os dados ou comandos, então vou excluí-los assim e aqui podemos manter o botão ler mais, e aqui temos o lote. Então vamos começar a paginação. Podemos definir a paginação dessa forma ou podemos usar esse Escod infinito, o que significa que, ao rolar o site, o resto das Também aqui, não podemos adicionar mais nenhuma mensagem de postagem. Vou manter a mensagem padrão. Se você quiser uma mensagem personalizada, você pode usar isso. OK. Agora vamos para o EtyleTap no iTyleTab, fazer com que a lacuna da coluna passe e uma lacuna também terá 20 alinhamentos, alinhamento central e cartão, temos a sombra de trabalho e não vou mudar muita Também no conteúdo, preciso esconder o autor. Aqui, vamos usar esse Atison porque não precisamos dele. Agora vamos ao estilo no cartão. Vou manter os dados padrão aqui. Vamos para a imagem e vamos alterar o espaçamento da imagem. Vamos fazer com que seja como C e a cor de fundo do emblema será essa cor e a cor do texto será essa cor Agora, no conteúdo, a cor do título será a cor primária e a cor da fonte será, vamos fazer esse subtítulo, então temos que alterá-lo para 21 Aqui será 28, podemos torná-lo semiv assim Agora, no meta, não precisamos nos preocupar com o meta porque não adicionamos nenhum. Em seguida, no trecho, vamos adicionar a cor do texto. Além disso, a tipografia será texto como este e também podemos alterar o espaçamento e agora temos que cuidar do botão ler mais Vamos fazer com que seja de cor verde. O erro de digitação será botão, mas temos que reduzir seu tamanho Vamos fazer com que seja 16. Você pode verificar esse design e seguir o mesmo padrão de design pois precisamos manter a exclusividade da página em cada página Não temos uma paginação e aqui transformamos essa mensagem de nada em cores primárias e é um pouco como um subtítulo OK. Agora está tudo bem. No entanto, apenas adicionar esse texto de arquivo não é uma boa ideia. Vamos criar um título e um subtítulo usando a IA. Agora estou no nosso chat do JG BT, aqui vou dizer, me dê cabeçalho e cabeçalho ou página do blog Aqui, vamos copiar este submarino. Na verdade, vou copiar este e vamos mudar isso. Vou simplesmente remover isso. Eu tenho que removê-lo. Em seguida, clique aqui e adicione um título como este, depois estilize o cabeçalho Men Na verdade, vamos fazer com que o subtítulo seja dois B. Aqui eu preciso mostrar isso em duas linhas O que posso fazer é adicionar uma tag de quebra de RO como esta. Então eu vou duplicar isso, depois vir aqui e mudar o tipográfico para texto e vamos adicionar esse texto aqui OK. Agora eu preciso adicionar um pouco de espaçamento aqui para que eu possa simplesmente adicionar a margem inferior como 20, assim. Bom. Agora está parecendo bom. Agora, o que posso fazer é clicar em Publicar e clicar em Adicionar condição. Na condição Adicionar, posso incluir os arquivos do Earl, mas não é disso que precisamos Precisamos adicionar o arquivo de postagem. Precisamos mostrar apenas as postagens, clicar no arquivo da postagem e clicar em salvar fechar. Agora, como acessar esta página? Na verdade, vou entrar e mudar isso para o anfitrião dado. Acho que essa palavra está correta, mas não sei. Agora, se vermos isso assim, aparecerá, mas não é disso que precisamos. Precisamos que, quando clicamos nesse bloco ou quando acessamos a página do blog que já criamos, essa lista de bloqueios apareça. Para fazer isso, eu tenho que ir ao Painel do WordPress. Vamos ao painel do WordPress. E no painel do Wordpress, aqui vou para configuração e subconfiguração , vá para Leitura Ao ler, defina o blog das páginas de postagem e clique em Salvar alterações. Agora, se eu verificar aqui, parecia assim. Veja, está com uma aparência muito boa e mostrará automaticamente o próximo conjunto de postagens ou a postagem do blog. Na verdade, se eu verificar isso, o espaço aqui é muito pequeno. Precisamos adicionar espaço de bits entre essas duas seções. Então, para fazer isso, vou para Footer. Clique em Então clique aqui e vamos para Avançar. Em Avançado, vamos adicionar a margem superior como 1220. Dessa forma, teremos um espaço melhor. Talvez vamos adicioná-lo como 60 e clicar em Publicar. E agora, se eu verificar isso nos sinais da página inicial, aqui podemos ver o espaçamento e também na página de registro, podemos ver claramente aqui Ok, agora está muito bom e não é isso, temos que fazer mais coisas. Como exemplo, aqui na página inicial, temos categorias. Aqui estão nossas categorias. Aqui está a categoria. Se eu clicar na categoria, ela aparece assim e não parece nada boa. O que temos que fazer é ir até o Team Builder, abaixo do construtor de eles, clicar em doação forçada, clicar em doação forçada, e aqui eu clicarei com o botão direito do mouse aqui e clicarei no cartão postal OpenNW window tower Então, o que eu posso fazer é clicar em Novo e ignorar isso. O que vamos fazer é se formos para uma página de categoria como esta ou para uma página de pesquisa como exemplo, vamos pesquisar ABC Na verdade, não há postagem no ABC, vamos pesquisar impostos. Quando fazemos a taxa de holofotes, ela aparece assim, mas não é isso que queremos Temos que criar cada página archi para essas seções. Vamos fazer isso. Fazer isso é muito fácil. Primeiro, vou corrigir os problemas de capacidade de resposta neste arquivo do blog Depois disso, podemos simplesmente copiar isso. Para fazer isso, vou clicar aqui e aqui temos que adicionar o teclado no Paden 15 à esquerda, no Paden 15 à esquerda. Além disso, este texto é muito grande para corrigi-lo, vá para o estilo do conteúdo. Deixe-me ir até a página inicial e conferir também. Acho que na página inicial, nós corrigimos isso, mas temos que verificar e ter certeza de que, na página inicial, corrigimos isso corretamente Vamos ver o conteúdo, a tipografia mudou para 21. Nós fizemos isso. Vamos fazer o mesmo aqui. Aqui, o conteúdo e o título serão 21, assim como aqui, 2.1 0.1 funcionará e o resto do texto estará ok. O 21 real é muito pequeno, não é? Não, tudo bem, vai para o celular e, no celular, parece muito bom. Não há nada para fazer aqui. Estamos prontos para ir. Agora, o que podemos fazer é copiar corretamente Então, podemos ir para a nova página de arquivo e enfrentar isso. Então, aqui temos que adicionar o título do arquivo, não o título personalizado, temos que adicionar esse título do arquivo desta forma. Vamos deletar este também excluir este e vamos fazer isso de novo. Basta arrastar e soltar o título do arquivo assim. Em seguida, coloque-o no centro e adicione o subtítulo, então aqui, vamos ver o tamanho do pino de convite São 20. Há uma margem inferior de 20. Agora eu posso publicar isso. Quando eu publico isso, tenho que adicionar a condição, clicar em adicionar condição e aqui podemos definir isso. Se eu definir todos os arquivos, ele será configurado para todas as páginas de arquivamento O que eu quero fazer é adicionar todos os arquivos e adicionar outra condição Então, nessa condição, eu tenho que excluir o arquivo de postagem porque temos uma página de arquivo diferente para ele e também temos que excluir o arquivo do resultado da pesquisa e, em seguida, clicarei em Salvar e fechar OK. Agora, aqui, se marcarmos assim no arquivo de pesquisa, não funcionará porque excluímos esse tipo de pesquisa Archiv p. Vou para a página inicial e vamos para a nossa categoria. Nesta categoria, mostre assim e veja. Agora, o que eu quero fazer é adicionar o campo de pesquisa. Se adicionarmos o campo de pesquisa à página de bloqueio, podemos pesquisar a postagem. Vamos fazer isso. Para fazer isso, primeiro removerei todos eles. Vamos publicar isso , limpar a página dessa forma e acessar o painel. No painel, eu tenho que ir para o Them Builder. Neles, Builder, novamente, temos que ir para o arquivo. Na verdade, esquecemos de renomear esta página de arquivo para editar e aqui vamos definir o nome como oh meu Deus e publicá-lo Ok, agora vamos voltar. 20. Como adicionar uma barra de pesquisa: Ok, aqui na página de postagem, temos que adicionar ou precisamos adicionar o campo de pesquisa. Vamos clicar em Editar e aqui adicionarei a pesquisa. Agora vamos adicionar a barra de pesquisa aqui. Aqui vamos nós. Aqui temos a barra de pesquisa. Aqui, eu posso mudar esse texto se eu quiser, então vou mantê-lo assim. Agora, aqui temos os resultados. Nesses resultados, podemos mostrar os resultados ao vivo e eu mostrarei como eles são configurados na próxima lição ou depois concluirmos essa funcionalidade de pesquisa. Em seguida, temos uma consulta. Na consulta, definirei essa fonte como postagens porque, se definirmos isso como tudo, ela mostrará páginas de postagem e outras coisas que nosso site tem, mas só precisamos pesquisar postagens. Clique nas postagens e na configuração adicional, não precisamos nos preocupar com isso e, em seguida, vamos para EtyleOeStyle, definirei a tipografia do campo de pesquisa para um texto como este, depois vamos definir a cor do texto e não temos Também focando, podemos alterar a cor do texto dessa forma. Então, para o espaço entre entrada e o botão, haverá dois como este. E então, claro, não temos um ícone, então não precisamos configurá-lo. Em seguida, para o botão de envio, cor do texto será a cor do plano fundo e o tipo de fundo será secundário, essa cor verde. Além disso, temos que definir a tipografia para um botão assim. Então, o raio do painel do botão de pesquisa será zero e teremos que adicionar o preenchimento superior e inferior Na verdade, a parte superior e inferior estão bem. Temos que adicionar o padrão certo. Vamos aos 30 e à esquerda também serão 30, talvez 60. Vamos adicionar um 60. Será melhor porque precisamos colocar ombros aqui e no botão e, no chuveiro, alterar a cor do texto para branco e a cor de fundo para a cor primária, como esta Também podemos adicionar o efeito HA dessa forma. Agora está muito bom. Se quisermos, podemos adicionar instruções como postagem de pesquisa, mas eu não vou fazer isso, então vou avançar , vamos no final do Patmus 20 Teremos espaço para respirar assim. Agora está muito bom. Agora vou clicar em Publicar e temos muito mais a fazer, mas vamos tentar fazer isso , vou contribuir com mudanças e vou para a página do blog e aqui vou digitar imposto e clicar em Osearch Quando clico em CSearch, ele tem todos os detalhes ou toda a postagem relacionada ao imposto, mas temos que criar o campo Arquivo de pesquisa e vamos fazer isso Para fazer isso, temos que ir ao Team Builder Team Builder, vamos ao Templates Team Builder e agora temos que criar a página de pesquisa Archiv Para fazer isso, clique em e e clique em Arquivar. E aqui, vamos remover isso e podemos simplesmente copiar e colar esta seção. Ok. Agora, o que temos que fazer é adicionar texto, então vou duplicá-lo e colocá-lo aqui Aqui deveria estar aqui. Então vamos alterar esse alinhamento dessa forma e torná-lo um parágrafo e remover esse texto e clicar aqui e definir este Archiv ou Archiv tit Ele mostrará o título do arquivo aqui e vamos para o estilo E no estilo Es. Vamos mudar a tipografia, vamos 21 e aqui fazer esse semble e aqui 26 estará aqui Essa é uma tag dinâmica. Lembre-se de que estamos no título do arquivo. O título desse arquivo é semelhante ao título da página. Por exemplo, se pesquisarmos faixas aqui, esse será o título do arquivo ou o título da página. Nesse caso, não estará aqui, neste caso, mostrará Agora eu quero pegar aqui e definir o arquivo de pesquisa de títulos. Você se lembrou de que não definimos página de pesquisa quando a publicamos aqui em condições? Aqui temos os resultados da pesquisa. Quando configuramos todas as páginas de arquivamento, não configuramos isso. Isso porque precisamos de uma página separada como essa para fazer isso. Agora eu clico em SavanClos e ele é publicado. Agora, se eu verificar, se eu apenas reprimir esta página , será assim Vamos tentar copiar essa seção. Agora vamos ver se ele pesquisa perfeitamente. Agora, como próxima etapa, na verdade, tenho que verificar a capacidade de resposta. Aqui você pode ver que a capacidade de resposta não está ótima. Na versão para tablet, é perfeita e no celular, vamos clicar aqui e usar o botão de envio do Style, temos que enviar por e-mail 20 a 20 Certamente, vamos fazer com que seja zero e será 15 por 15 assim. E também, aqui temos o ícone claro, e esse é o ícone claro. Na verdade, podemos mudar sua cor assim. E se você quiser, podemos alterar o tamanho do ícone. Então aqui está esse ícone. Eu simplesmente esqueci isso. Ok. Agora está muito bom. Agora publique-o. Na verdade, vou copiar essa parte e, na busca de Aga, temos que acompanhar o estilo assim. Ok. Agora publique-o e, em seguida, temos que configurar isso. Vamos clicar aqui nos resultados. Para configurá-lo, vou pesquisar os resultados e clicar em Mostrar aqui, temos que criar um resultado temporário ao vivo seja, quando eu pesquisar dessa forma, o resultado será exibido aqui Ele será exibido em tempo real. Para fazer isso, clicarei em reformular, conceito aqui, vamos mudar isso para resultados de pesquisa ao vivo Clique aqui xbox e adicione a caixa ex desta forma, depois remova seu STA. Para acolchoar, vamos para Padins six. Agora, aqui temos que adicionar a torneira que precisamos mostrar. Primeiro, precisamos da imagem em destaque, vou fazer com que seja de 300 por 300 e , em seguida, o que precisamos mostrar é o título da postagem. Se quisermos, podemos mostrar o trecho da postagem, mas não vamos mostrar o trecho da postagem Se você quiser, você pode simplesmente adicioná-lo assim e eu não vou fazer isso, então vou excluí-lo. Agora vou clicar aqui e vamos para o layout. A direção do layout será horizontal e esta imagem deverá estar aqui, então clique aqui, depois mude a tipografia para um texto como este e a imagem ficará bem Então, o que eu tenho que fazer é adicionar a borda inferior porque isso carregará o item assim porque a postagem será carregada desta forma horizontal. A primeira fila está aqui, a segunda linha está aqui. Vamos clicar no contêiner principal, um estilo que chamamos de borda. A borda é sólida e incomoda, vamos fazer com que a cor da borda seja essa cor e, na verdade, só precisamos da parte inferior, precisamos apenas da borda inferior assim e vamos fazer essa pequena cinza incolor assim É isso e não é isso. Temos que adicionar o link, que significa que quando você clica nesta imagem ou neste texto, ele deve ser redirecionado para a postagem específica Para fazer isso, clique em. Vamos fazer isso para a imagem primeiro, clique na imagem. Faça isso como URL personalizado e aqui na tag dinâmica e aqui, clique em PostRlt é tag dinâmica e a URL da postagem também estará lá, vamos fazer o mesmo com este texto aqui, podemos facilmente postar ok e a cor do texto no primário, vamos mostrar a cor primária no normal na borda superior Vamos torná-lo secundário assim. Ok, agora eu clico em publicar e vamos voltar aqui. Em seguida, clicarei em publicar, e aqui pesquisarei aqui modelo de resultado de pesquisa ao vivo que acabamos de criar, basta selecioná-lo e publicá-lo. Então, vamos tentar. Na verdade, temos que testá-lo no Live que está aqui. Quando fazemos isso, aqui está o resultado, mas não parece nada bom. Vamos mudar o design para alterar o design, aqui, vou para EtyleOeStyle agora que temos a Como resultado, vamos adicionar a cor de fundo. Vamos adicionar essa cor como cor de fundo. Vamos adicionar uma pequena caixa de sombra. R: Não vamos adicioná-lo. Vamos pesquisar como tag aqui. Agora podemos alterá-lo no design verificando o design. Primeiro, farei com que a distância do campo de pesquisa zero e o raio em negrito será zero, vamos fazer com que o preenchimento Se quisermos, podemos alterar a largura do imposto. Com um resultado como esse. Mas vamos manter as larguras ao longo do tempo. Campo de texto como esse, essa é a melhor maneira, e a lacuna entre a linha será zero e a lacuna entre as colunas, não temos uma coluna, e é isso. O resto do design, podemos alterar usando a página de resultados da pesquisa ao vivo, então clique aqui e primeiro vamos começar com a imagem. Ok. Vamos para o alinhamento de estilo à esquerda e vamos adicionar largura como 100% E para o contêiner, vamos justificar os itens, alinhar Vamos fazer a largura total e depois vamos ver. Vamos clicar em publicar e vamos testá-lo novamente. Imposto. Ainda é maior e as imagens não estão alinhadas corretamente ou têm tamanhos diferentes Temos que corrigi-lo e alterar o tamanho da imagem. Para fazer isso, vou até aqui e vamos adicionar um contêiner aqui. No contêiner, vamos deixar a margem e o preenchimento em zero, depois vamos adicionar a imagem e no contêiner, adicionarei o contêiner com 40 e depois duplicarei o contêiner, e aqui não temos que destacar a Eu tenho que duplicar o contêiner assim e, em seguida, remover a imagem daqui e do título da pose Também faça isso com as 60. E o tamanho intermediário, vamos fazer entre o tamanho 50 talvez esse tamanho seja 30 funcione 30 funcione, e aqui, faça 70 e clique em CPublish e vamos ver a prévia agora. Vamos deixar esse trabalho. Etiqueta de pesquisa E. Agora as imagens estão alinhadas corretamente, mas o tamanho da imagem ainda é muito grande. Para corrigir isso, vamos para o arquivamento forçado e preciso diminuir essa imagem. Vamos tentar fazer isso a partir daqui. Troque com 50% e aqui também será o tamanho do contêiner , então vamos para o contêiner e para o contêiner, não, temos que ir para o contêiner sobre o contêiner, deixá-lo no centro. Centro assim. Vamos fazer o máximo com ácido e adicionar o centro de alinhamento aqui. raio da água será zero e vamos ver se funciona Vamos colocar tanques pós-caverna. Finalmente, agora está muito melhor. Agora temos esse espaço, então não vai funcionar. O que podemos fazer é clicar no contêiner e remover o máximo dessa forma. Na verdade, sem alterá-lo, vamos alterar o tamanho desse contêiner. Talvez vamos adicionar cerca de 50 e vamos tentar agora. Esperemos que funcione. Finalmente está funcionando. O que eu fiz foi manter o tamanho da imagem em destaque em 100% e aqui eu mudo esse contêiner para 15% assim e esse contêiner será, vamos fazer assim. Vou preencher automaticamente e clicar em publicar e agora está muito bom Tanques C. E aí você pode adicionar muitas coisas. Por exemplo, você pode adicionar o EAP. Então, o que podemos fazer é ir aqui e clicar no ícone clcpas aqui no post exp e ir para Estilo e primeiro clicar nessas configurações e, na configuração, adicionar o comprimento do Exap, pois talvez E com antecedência, se quiser, você pode adicionar mais coisas. Em seguida, em Estilo, vamos deixar uma linha e mudar a tipografia Vamos fazer com que seja como um 60. Vamos fazer esse espaçamento como 15 e adicionar cores de texto como cor de cinza Então, podemos publicar e vamos ver se o design agora está onde eu acabei de publicá-lo, mas nada acontece. Imposto. Eu não apareci, vamos ter um conteúdo mais sortudo e menos bom Vamos fazer com que isso se aplique ao conteúdo de pose e vejamos se isso conota texto fiscal de texto Agora vamos lá. Aqui está o trecho, e aqui está o texto, também, aqui adicionamos muito espaçamento, isso como seis Vamos fazer isso. Sim, vamos fazer com que seja zero e neste contêiner, vamos fazer isso O ficar doente. Agora publique-o e vamos clicar aqui na pesquisa Ah. Aqui vamos nós. Aqui está o design final. E se você quiser, pode testar mais ideias e melhorar isso, mas isso é bom para mim. E agora temos a página de pesquisa concluída, também o resultado da pesquisa ao vivo. Agora temos que adicionar a mesma funcionalidade a esse arquivo de pesquisa que acabamos de adicionar apenas à cópia forçada do arquivo e ultrapassar Também aqui, temos que acessar a abertura de resultados e ouvir a pesquisa, pois precisamos configurar o modelo e clicar em Fablsh agora se formos para a página de resultados da pesquisa e vamos testá-la Quando o testarmos, ele vai gostar disso. Muito bom. Na próxima etapa, temos que editar a única postagem, e vamos fazer isso na próxima lição. Atualmente, se formos para finanças pessoais, veremos assim e o texto, veremos assim. Na próxima lição, se clicarmos nesse único post, precisaremos mudar esse design. Vamos fazer isso em 21. Design de post de blog único: Ok, agora vamos criar esse único modelo de postagem de blog. Para fazer isso, vou para o painel do WordPress ou painel do WordPress. Então, aqui vamos ao Team Builder. Dentro do Team Builder, clique em Novo, e aqui temos uma única postagem. Clique nele. Aqui vamos nós. remover este porque não precisamos dele. Então, primeiro, vou clicar aqui e criar uma caixa Plex como essa. Na verdade, vamos criar duas colunas, uma porque não criamos uma estrutura de duas colunas, então vamos clicar aqui e criar esse tipo de uma. No entanto, podemos fazer isso manualmente. Mas vamos clicar aqui e remover toda a margem e os acolchoamentos e vamos fazer isso aqui, da mesma forma Vamos fazer o mesmo aqui. Ok. Agora, na parte superior, vamos adicionar a margem superior como 60. Agora, primeiro, temos que adicionar o título da pose. Adicione-o e, em seguida, temos que adicionar o conteúdo da postagem. Na verdade, antes de publicar o conteúdo, temos que adicionar a imagem do recurso como esta e, na parte inferior, vamos adicionar a navegação da postagem, para que ela navegue pela postagem anterior e pela próxima. Depois de adicionarmos tudo isso, podemos fazer o design e, antes disso, preciso adicionar o botão Compartilhar. Aqui, temos o botão de compartilhamento definido. Vamos adicioná-lo assim e , se você permitir que os usuários comentem, você pode adicionar uma seção de comando de postagem como esta e, antes disso, adicionarei a seção de postagem. Nesta seção de postagem, receberemos uma postagem adicionada. Agora vamos começar o design. Antes de criarmos, vamos adicionar todo o conteúdo que planejamos adicionar à barra lateral Para esta barra lateral, adicionarei a pesquisa. Na verdade, podemos obter a barra de pesquisa aqui, basta copiar corretamente Aqui está a barra de pesquisa do arco de postagens. Em seguida, cole assim. Temos que mudar o design e, em seguida, adicionarei um conjunto de postagens como este. Ok. O que mais? Isso é o suficiente por enquanto. Se você tiver mais coisas como autor, se quiser adicionar os detalhes do autor, podemos adicionar ortocaixa como esta E sim, vamos adicionar ortobox também. Dessa forma, você pode ver claramente , mesmo que não o adicionemos aqui, mas se eu adicionar, você poderá ver claramente como usá-lo. Ok. Agora temos que editar o design. Então, vamos começar com o problema de espaçamento. Então, aqui precisamos ter um espaçamento entre essas seções, clicar no contêiner principal e ir para o layout na coluna de massa 20 Então, vamos cuidar desse cabeçalho, vá para o estilo. A tipografia à esquerda terá um subtítulo como este. Então a imagem, a imagem, não precisamos fazer nada. Vou torná-lo completo e, para este texto, farei o alinhamento à esquerda e a cor do texto será o texto, e o tipograma será esse texto assim Ok, agora vamos aqui e aqui, podemos adicionar o botão Compartilhar, então vamos clicar no botão Compartilhar e vamos adicionar o Pinterest, duplicado, o Twitter, não o Twitter Egg, vamos adicionar apenas essas coisas Se você quiser, você pode adicionar outro, e aqui você pode alterar o design. Eu direi que o tipo de gradiente é quadrado, a coluna estará alinhada à esquerda dos URLs de destino, página atual e de um estilo, não precisamos fazer Já está parecendo bom. Então, com antecedência, adicionarei a margem inferior como 60. Agora também tem mais espaço. O topo é 30, 33 30, assim. Agora temos que editar o botão anterior e o próximo para fazer isso, clique aqui. E se você mostrar o rótulo, você pode escondê-lo, mas eu vou mostrá-lo e vamos mostrar a seta para o ladrilho e também essa borda. Então vamos para o estilo E no estilo E. A cor da etiqueta será essa cor verde e a tipografia será a tipografia do botão e vamos torná-la Ou 18 será trabalho. Então, a cor do título do post também será essa cor e o texto será essa, mas temos que reduzi-la como 12 12 funcionará e a seta, a cor da seta também será verde ou podemos adicionar uma cor cinza claro assim e eu darei o tamanho padrão. A borda ficará assim. Se quisermos, vamos adicionar um pouco de espaçamento como esse. Ok. Agora está tudo bem. Hoje choveu forte, então parei de gravar Então, vamos continuar. E o que fizemos foi adicionar a cor Her ou a cor do cachorro a esse elemento de navegação de postagem Então, examinamos todos esses itens e adicionamos a borda da cor. Ok, agora vamos subir e começar a partir daqui. Ok, agora temos que cuidar desta seção. Facilmente, o que podemos fazer é acessar o painel do word press. Então, na verdade, temos que visitar o site e eu clicarei em editar com o elemento ou Podemos copiar facilmente Este é um elemento de postagem. Então, na página inicial, aqui temos o mesmo elemento de postagem. O que vou fazer é clicar com o botão direito do mouse em copiar, vir aqui, clicar com o botão direito e colar o estilo. Na verdade, vamos fazer com que seja um cartão. Quando eu faço esse cartão, o design mudou. Ok, agora o que eu faço é alterar a contagem de colunas para duas e teremos duas colunas postadas e a postagem por página também será duas. Mostre imagens, e vamos guardar todas as informações, e aqui removerei os metadados e os comentários e o tamanho do trecho será, vamos torná-lo como 50 e mostrar leia mais, que será a categoria, que será a categoria, e o importante é Na consulta, o que podemos fazer é definir a fonte como portas e a data será, toda a ordem será aleatória. Então, quando alguém visita esta postagem, ela terá duas postagens aleatórias e nenhuma paginação, não precisamos nos preocupar com a paginação, e esse conteúdo Então, o que podemos fazer é ir para a seção de comando. Não vou usar a seção de comando para este blog, mas vou mostrar como melhorá-la. Então, aqui, clique neste ícone de lápis e no comando aqui temos uma capa, selecione os comandos do tema, e a fonte será forçada com antecedência. Não temos muito o que fazer, mas ainda assim os links e cor do botão não são iguais à cor do nosso tema. Para corrigir isso, vou clicar aqui e fazer esse rascunho de salvamento e vamos para a configuração Na configuração lateral, temos que estilizar esse tema. Então, para fazer isso, vamos à tipografia Vamos transformar a cor do corpo do texto em texto, e a tipografia será Veja se quando eu fiz isso, mudou o espaçamento tipográfico, vou deixar como está, e aqui as cores dos links serão dessa cor no HO, vamos torná-la primitiva assim tipografia também será a mesma e então temos esse botão de comentário aqui, se você quiser, você pode selecionar a tipografia assim, mas eu não vou fazer isso mas Vou salvar as alterações aqui e ainda temos que corrigir as cores dos botões para fazer isso, vou voltar e aqui temos os botões. Nos botões, direi o tipo de botão gapio e, no texto normal, a cor será a cor do fundo e a cor do plano de fundo será a cor secundária e não temos um raio de borda Além disso, não temos um tipo de borda e precisamos adicionar os preenchimentos e Vamos fazer com que o top passe 15, 22, 15, 22, assim. Se você quiser mais espaço, pode adicioná-lo, mas vou mantê-lo assim e, na borda superior, a cor do texto será marrom preto e o tipo será a cor primária, como esta. Ok. É assim que podemos fazer isso, e agora podemos clicar em Salvar alterações e clicar em Voltar para Editar OK. Como eu disse antes, vou remover isso porque não preciso dele. Eu só te mostro isso para. Se precisar adicionar isso ao seu site, siga as etapas. Agora, aqui temos o perfil do autor no perfil do autor. Podemos fazer o layout como quisermos, e aqui vamos para Estyle Eu vou manter a imagem. Vou manter a configuração como está, e o nome será vamos criar a cor primária e a tipografia será botão Vamos guardar o texto. Vamos fazer com que seja do tamanho de um botão. Como essa biografia usa tipografia com esse texto e botão, atualmente não vemos um botão, então vamos mantê-lo como padrão Na verdade, precisamos adicionar nossos detalhes de usuário para melhorar a aparência. Então, vamos fazer isso depois de concluirmos o resto do design, e agora aqui temos a barra de pesquisa, clique nela e vamos para o botão de envio do EtyleOeStyle Nós temos esse estofamento. Vamos remover completamente assim, então vamos fazer com que seis por seis ou 12 por 12 seja muito melhor. Agora, isso também é muito bom na versão para tablet, ficará assim e tudo bem. Em seguida, vou para a versão desktop e aqui temos outro conjunto de postagens de bloco. O que podemos fazer é adicionar o design de uma postagem em bloco. Este design de postagem em bloco para obtê-lo, clico em Editar rodapé, copio, venho aqui, acompanho esse estilo Então, o que vou fazer é acessar o cartão Skins. Na verdade, a pele é clássica, vamos ver. A capa é clássica, coluna é uma, a página postra é três Vamos fazer com que essas colunas sejam 14 por página. Vamos manter como seis. E vamos tocar essas duas coisas. Não precisamos mostrar o trecho e também não precisamos mostrar o botão leia mais no Estilo, vamos ao conteúdo, e aqui a cor de fundo Vamos fazer com que seja de cor escura assim. Agora está lindo. Ok, agora temos uma única postagem de blog super legal O que podemos fazer é clicar em publicar em condição e em incluir, tenho que selecionar essas duas postagens, e aqui fazer com que tudo seja publicado e clicar em Salvar e fechar. Tudo bem Agora vamos ao nosso site WordPress e vamos ler o post do MotoAd, e vamos lá Aqui temos a postagem do blog, e ela tem a aparência que queremos, isso é muito legal, e aqui temos ajustar para fazer isso, temos que ir ao painel do WordPress. Vamos para o painel do WordPress e no painel do WordPress, vou para os usuários e o perfil. Aqui no perfil, eu tenho que inserir esses S. Vou adicionar aqueles SF, vou adicionar o primeiro nome John Doe e o apelido será O nome dessa peça será John Doe. E aqui vamos ao JGPT e pesquisar e me dar informações biográficas desse escritor em particular Na verdade, temos que adicionar o nome. O nome dele é John Doe. Ok, aqui, vamos copiar este e colar aqui, então precisamos ter um recurso de perfil. Na verdade, temos que conectar este site com Gravata para fazer isso Eu não vou fazer isso, então vou clicar em Atualizar Perfil e depois, se eu for aqui e vamos postar, Oh meu Deus. Aqui temos todas as informações sobre o autor. Mas é muito longo, o que podemos fazer é acessar o painel e criar uma equipe e clicar nesse elemento de uma única postagem. Na verdade, temos que mudar o nome. Vamos renomeá-lo aqui, clicar no ícone de configuração e dizer postagem de bloco único ou publicação de postagem única e aqui, clique neste Avatar e vamos estilizar , vamos criar esse texto de biografia como 40 Não, ainda é demais. Na verdade, o que podemos fazer é colocá-lo aqui embaixo, assim. Então, dessa forma, os visitantes podem ler sobre ele. Além disso, se quiser, você pode adicionar o botão de arquivamento para ver todas as postagens dessa pessoa aqui, aqui, Jack. Vamos adicionar uma tag dinâmica. Vamos adicionar o nome do autor da postagem e clicar aqui. E antes de AddRD e depois do apóstrofo S, post lido seu rosto, John DoysFST Okay Agora, aqui vou para Estyle on Estyle Martin, vamos mudar a cor do texto para a cor do plano de fundo E a cor de fundo será secundária e a tipografia será botão É muito grande, então vamos usar o tamanho do texto como 16. Não, faça com que seja primário assim. Não, na verdade, isso deve ser isso e a cor de fundo deve ser uma cor primária como essa. Vou manter o desvanecimento padrão, então aqui está uma maneira de mostrar os detalhes do autor Se publicarmos isso e vamos até aqui, ele ainda não o atualizou, mas por algum motivo, não está atualizando. No entanto, se clicarmos nesse botão, iremos para esta página do arco. Agora, a parte do poste de bloco único está concluída e a maior parte do trabalho está concluída. Agora temos que criar a página de contato. Vamos fazer. 22. Projetando a página de contato: Agora vamos criar a página de contato. Para fazer isso, vou até a página de contato e clicarei na página Editar. Então, a partir daqui, clique em Editar com elemento e eu irei ao ChagBT e direi, meu conteúdo para a página de contato Assim, deveria ser contato. Nós e este é um registro financeiro. Digamos que é bom. Agora vamos adicionar essas informações. Para fazer isso, posso ir para uma página diferente. Na verdade, vamos até uma página e clicar em Editar com Elementor e, a partir daqui, podemos copiar esta seção Dessa forma, não precisamos construí-lo do zero. E então vamos copiar esse texto, colocá-lo aqui, copiar esse texto. OK. Agora temos que entrar em contato com partes, parcerias e colaboração de convidados. Vamos adicionar essas informações. Primeiro, vamos criar uma coluna de linha de direção, remover todas as margens e preenchimentos e adicionar a margem superior de 1 a 20 Em seguida, clicarei aqui e adicionarei o contêiner. Além disso, vamos remover a margem e o preenchimento desse contêiner. Em seguida, clique aqui e adicione um título. Este título entrará em contato, copie, cole assim, vá para Estyle align até sairmos, tipografia Em seguida, temos que adicionar esse e-mail, telefone e horário de expediente. Para fazer isso, vou até aqui e pesquisarei a lista de ícones. Vamos lá, basta arrastar e soltar assim. Então aqui mude esse ícone para nlop. Vamos pegar isso, na verdade. Vamos pegar esse e depois temos que adicionar o e-mail. Vamos receber esse e-mail. O e-mail será invocado no site personalizado design.us e também no link, se desejar, você pode adicionar o e-mail dois e o endereço de e-mail Acho que essas informações deveriam ser corretas. Pesquise no Mail two no Google. Envie um e-mail para trabalhar assim. Veja Nice. Quando alguém clica nesse ícone, ele abre esse e-mail, abre a caixa de e-mail e, em seguida, temos que adicionar o local, o local, o número de telefone. Vamos adicionar esse número de telefone. Esta é a primeira página. Vou apenas adicionar o telefone de pesquisa e adicionar o número de telefone aqui, então temos que adicionar o horário de expediente. Copie o horário de expediente e aqui pesquise a fechadura do escritório em um relógio Ok, muito bom. Agora, o que temos que fazer é copiar essa parceria e as contribuições dos convidados, lubrificar essa e colocar aqui, colar assim Em seguida, copie este e cole aqui e neste estilo, faça o alinhamento à esquerda e aqui, copie o texto, cole o texto Agradável. Agora vou criar um novo contêiner, clique aqui e adicione esse contêiner aqui. Na verdade, eu tenho que adicioná-lo aqui, clicar aqui e adicioná-lo assim. OK. Agora está neste segundo contêiner, mas nós o queremos aqui, aqui mesmo. Não, aqui, na verdade, aqui. OK. Agora, aqui, vou alterar as margens e o preenchimento e copiar este, ficar dentro, e aqui nos enviar uma mensagem neste texto, nos enviar uma mensagem e copiar essa parte e colar assim e neste texto assim, então aqui vou pesquisar formulário sobre formulário, basta arrastá-lo e soltá-lo assim E aqui vamos agora no formulário, vou pesquisar e defini-lo como formulário de contato. E aqui precisamos que o nome seja inserido. Vamos colocar o soldador no que você nomeará aqui, então o e-mail Presder será menor que o endereço de e-mail. Presder, pressione assim Em seguida, mensagem, não etiqueta, espaço reservado nas pilas, sem nenhuma sugestão Agora também podemos adicionar um assunto. O tipo de texto deve ser texto e aqui o rótulo será o assunto e o espaço reservado para inserir o assunto do e-mail desta forma e aparecerá aqui Isso é muito bom e, se você quiser, pode adicionar mais campos de e-mail e, no Advancetting, você pode definir o valor padrão para cada e-mail como um exemplo na mensagem. Preciso adicionar halo, basta adicioná-lo quando eu adicionar, será adicionado automaticamente à caixa E bom. Além disso, queremos mostrar a marca obrigatória, e essa mensagem deve ser solicitada desta forma e o botão está ok. Então, se quisermos, podemos alterar o texto do botão de envio, mas eu não vou fazer isso. Após o envio, haverá o envio da coleção e o e-mail. Portanto, no envio da coleção, podemos coletar esses dados do formulário no formulário de envio da coleção localizado em Elementor e envios e, em seguida, por e-mail, aqui podemos definir os dois Então, quando alguém faz uma pergunta, você pode enviá-la diretamente para sua caixa de e-mail. E aqui, como mensagem, se adicionarmos todos os campos, podemos obter todos os campos. Ou se você quiser especificamente um campo, você pode ir para quatro campos. Vamos pensar que precisamos desse nome. Então, vamos avançar e podemos copiar o código curto e vir aqui. Então, por e-mail, podemos simplesmente dizer que o nome dele é o nome, dois serão nosso e-mail e o baile será a pessoa que enviou esse Eu já criei como configurar e-mails e SMDB. Se você não os verificou, eu os adicionarei após esta lição e depois de configurarmos todas essas informações, podemos acessar EstilsOtils, podemos alterar a podemos Vamos fazer com que a lacuna da coluna 15 e a lacuna da linha deve ser 15, não a lacuna da coluna. Vamos fazer com que sejam dois. Em seguida, o rótulo é o espaçamento. Vamos criar esse espaço para rotular. Talvez seis funcionem. Sim. E se quiser, você pode alterar a cor do texto. E se você quiser, também pode alterar a tipografia Então, aqui vou fazer com que seja um pouco pequeno, como 18, e a noite da linha também será 18 e preencherei a borda com eu a tornarei zero. Na verdade, precisamos de uma fronteira. Um e aqui primário, então o raio da borda será zero assim, e vamos fazer essa pequena cor de cinza assim OK. Então vamos até o botão. O botão está tudo bem. Não há nada para fazer. Em seguida, na mensagem, podemos dizer mensagem de sucesso em verde, mensagem de erro em vermelho na cor da mensagem de linha será dessa cor. Isso deve ser vermelho. OK. Agora, não precisamos nos preocupar com as etapas porque temos apenas um formulário simples. Agora podemos publicar isso e, em caso afirmativo, aqui está o formulário. Agora, se eu preencher o formulário e clicar em consentimento, receberemos a mensagem de envio. Além disso, podemos alterar essas mensagens se você quiser alterá-las. Vamos para opções adicionais e, na mensagem personalizada, você pode adicionar mensagens personalizadas, e eu não vou fazer isso. Vamos para a página de envio e na página de envio, aqui está a mensagem de teste que acabei de enviar. Agora, temos a página de contato e o blog totalmente funcional como a próxima etapa. Se você planeja adquirir o Google Adsens ou veicular anúncios, precisa ter páginas de termos e condições e políticas de privacidade Na próxima lição, mostrarei como gerá-los 23. Crie um e-mail e configure o SMTP: Faça isso, eu vou para minha conta com chip de nome. Você deve ir ao HSTMPVider e acessar o painel C. Então, aqui eu clico aqui e clico em Ir para o painel C. Ok, eu redireciono para o painel C e no painel C, então se você não usou o Nome JP, isso não importa O painel C é o mesmo em todos os provedores HostEm. Pode ter algumas mudanças, mas é bem parecido. E se você não tiver uma conta de e-mail ou se for um provedor de serviços, conta de e-mail, entre em contato com eles e obtenha-a deles. Então, no nome Jif, já recebemos os e-mails. Então, se eu rolar para baixo, podemos aqui enviar uma conta de e-mail, ou podemos simplesmente pesquisar aqui o e-mail. Aqui vamos nós. Ok. A partir daqui, basta clicar na conta de e-mail. Ok, aqui, eu tenho meus e-mails antigos. A partir daqui, basta clicar em Cre e aqui seleciono o URL do nosso site e, para usar o Nome, adicionarei informações e gerarei uma senha Então, vou gerar uma senha e voltaremos. Tudo bem Agora eu clico em Concriar, o e-mail terá informações no ponto de design personalizado do site, então você pode adicionar qualquer nome ou qualquer nome aqui como exemplo. Se você for Joan, você pode adicionar Joan na URL do seu site e agora eu clico Ok. Precisamos de outro e-mail para adicionar como dois e-mails. Do e-mail, haverá informações, e vamos criar dois e-mails . Vamos selecionar o domínio e eu adicionarei meu nome. Ok. Em seguida, vou configurar a senha assim. Ok, então eu clico em criar. Ok, agora temos esses dois e-mails. Vamos definir essas informações. Então, primeiro de tudo, vamos aos plugins e clique em Adicionar novo plugin. E aqui, vamos pesquisar o WP mail SMTP, não o e-mail principal. Correio. Tudo bem Aqui está o plugin e é compatível com nossa versão do WordPress. Clique em Instalar agora. Tudo bem Agora, clique em Ativar. Vou apenas clicar em voltar ao painel. Ok. Agora, aqui temos a configuração. Além disso, podemos testar se nosso e-mail está funcionando corretamente ou não. Se usarmos ferramentas sobre ferramentas, aqui temos o teste de e-mail, e aqui podemos adicionar nosso endereço de e-mail e clicar em enviar e-mail , digamos que um emissor foi detectado No entanto, este e-mail do site funcionava antes. Vamos ver se recebemos um e-mail dessa vez. Ok, acabei de entrar na minha conta do Gmail e não estou vendo o e-mail, o que significa que esse plugin interrompe a funcionalidade de e-mail do meu site Então, vamos consertar isso. Então, primeiro, vou para as configurações aqui, terei que definir o e-mail do baile Então, nosso e-mail de formatura será esse. Copie e coloque o pmmail aqui. O e-mail do baile significa o e-mail que enviamos deste site e, em seguida, aqui forçamos o e-mail do baile, insira-o e aqui podemos definir o nome Manterei o nome padrão e manterei os dados padrão. Então, no correio, eu recebo o SMTP. Ok, aqui temos que adicionar o host SMTP. Então, vamos obter essas informações. Para obter essas informações, basta acessar o Painel C e aqui está nosso e-mail e clicar em Conectar dispositivos. Ok, aqui temos todas as informações. Primeiro, precisamos de um host como host, usarei esse endereço de e-mail. Vamos até aqui e adicionar o host como nosso endereço de e-mail atual. Em seguida, para criptografia, selecione SSL, e aqui o pote SMTP é 465, host SMTP deve ser Basta copiá-lo e colá-lo aqui, não o endereço de e-mail, e o nome de uso do SMTP será o e-mail, o nome usuário e, aqui, a senha da conta de e-mail Você se lembra que quando criamos uma conta de e-mail, nós apenas criamos a senha para ela com essa senha, acompanhe a senha. Ok, a autenticação é ativada e, em seguida, clico em Salvar configurações Portanto, se você usa o Google Workspace ou outro provedor de e-mail, basta selecionar o mailer que você usa e configurar os detalhes Nesse caso, estamos usando o SMTP do servidor, então eu configurei essas informações Ok, vamos às ferramentas e aqui temos um problema, atualize-o Ok, aqui no enviar para e-mail e clique em SendMil vamos ver o que vai acontecer Por algum motivo, o site não está carregando, mas esperamos que isso funcione. Ok, diz sucesso e aqui está uma mensagem de aviso e, por enquanto, vamos ignorá-la. Então, agora aqui temos o e-mail. Se você seguir a mesma etapa que eu uso, conseguirá corrigir o problema de não envio de e-mails. 24. Criando páginas de Política de Privacidade e Termos e Condições: Agora temos que criar a página da política de privacidade, também a página de termos e condições. Para fazer isso, há dois métodos. O primeiro é ooe AI HAG PT e diz que você bloqueia o nicho e outras coisas que você faz e permite que a IA gere seu conteúdo. Ao gerar o conteúdo ou a página de privacidade e a página de termos e condições, você deve verificar cuidadosamente o conteúdo e adicioná-lo ao site. O próximo método é usar o termos e condições ou o gerador de política de privacidade Vamos usar o gerador de Política de Privacidade e tentar criá-lo. Acabei de pesquisar o gerador de Política de Privacidade no Google e aqui tenho alguns resultados, e aqui vou acessar este site de informações do gerador de políticas de privacidade, e aqui temos que seguir a etapa Primeiro, selecionarei a versão como site. Então, quando eu continuo aqui, tenho que adicionar o URL e o nome do site. E aqui vou acrescentar que sou um indivíduo. Se você é uma empresa, pode adicionar a empresa e aqui adicionar as informações. Então você pode entrar no país. Vou entrar no meu país e clicar na próxima etapa. E se você coletar informações pessoais dos usuários, poderá adicioná-las aqui. Nesse caso, temos um formulário de assinante, o que significa que coletamos endereços de e-mail e também podemos criar nome e sobrenome no formulário de contato E então eu clico na próxima etapa, e aqui você deve mencionar a maneira como outras pessoas ou visitantes podem entrar em contato com você. Vou usar o método como e-mail e adicionar o e-mail aqui, depois clico na próxima etapa. E aqui, se você quiser usar esta política de privacidade profissional, deverá pagar, então clicarei em Não, não quero uma política de privacidade profissional e clicarei na próxima etapa. E aqui eu tenho que adicionar o endereço de e-mail, então receberemos o código. Basta adicionar no endereço de e-mail e clicar em gerar. Tudo bem. Aqui está a página da política de privacidade e, a partir daqui, podemos copiar o texto ou a versão HTML, ou você pode copiar este link e diretamente nesse link. A melhor maneira é criar sua própria página. Vamos fazer isso. Agora vou para aqui nosso blog e todas as páginas. E aqui eu clicarei em uma página e título desta página será política de privacidade, depois clicarei em editar com Elementor e também abrirei página sobre página para que eu possa copiar o design de lá Então, vou clicar em editar com o Elementor e aqui está. Vou copiar essa primeira parte e vir aqui, depois colar assim. Aqui, vou remover isso. Na verdade, vou duplicar isso e depois vou remover aqui assim, então eu não preciso dessa parte e aqui, eu vou Na verdade, eu também não preciso dessa parte, e aqui vou adicionar o texto da política de privacidade, então vamos copiar essas duas pranchetas, e aqui vou adicionar o editor de texto Aqui está o editor de texto, basta adicioná-lo. Vamos até o código e encarar o código. E bom, vou remover esse H da página da política de privacidade. Agora, se eu for aqui, posso fazer uma linha à esquerda e selecionar o texto. Além disso, se eu quiser, posso alterar a cor do texto e também a cor do link, mas, por padrão, obtemos todas essas informações e aqui está a página da política de privacidade. Depois de concluí-lo, posso simplesmente publicá-lo e, se eu o visualizar, aqui está nossa página de política de privacidade. Sim. Agora temos que adicionar esse rodapé, também, temos que gerar o termo e a condição É bem fácil. Você pode pesquisar no Google o gerador de termos e condições, e aqui você pode obter generator.com e seguir a etapa como fizemos antes e preencher o formulário, então você obterá o código SDML Eu não vou fazer isso. Agora, o que vou fazer é acessar o Mino nos menus, aqui vou usar links importantes e, em links importantes, adicionarei o link da política de privacidade assim. Agora vou clicar em Salvar. Então, se eu verificar o site, vamos até aqui. Temos o link da política de privacidade. Se eu clicar nele, redirecionarei para nossa página de política de privacidade Ok, criamos nosso blog com sucesso . Agora temos que postar artigos no blog, e você pode expandir isso criando mais categorias e fazendo outras coisas. 25. Conclusão do curso e projeto final: Parabéns por concluir esta aula. Agora é sua vez de colocar tudo o que você aprendeu em ação. Seu projeto de classe é criar e criar um site de blocos para um nicho de sua escolha. Veja como você pode abordá-lo passo a passo. Primeiro, conserte seu nicho. Pode ser viagem, comida, viagem, exercícios físicos, descontração ou qualquer coisa pela qual você esteja fascinado A segunda etapa é configurar o Wordpres com Elementor Pro em postagens e domínios mais recentes A terceira etapa é criar um blog mais recente, criar uma página inicial, uma página de blog, layout de postagem de impulso único e páginas de categoria, e a quarta etapa é adicionar funcionalidade, incluir a barra de pesquisa e configurar um formulário de assinante para começar a coletar e-mails A próxima etapa é criar suas páginas essenciais sobre contato, política de privacidade e termos e condições. Em seguida, teste seu blog em dispositivos móveis para garantir que tudo esteja ótimo em todos os dispositivos. Quando terminar, compartilhe seu projeto na Skillshare Project Inclua a captura de tela do blog, uma breve descrição do seu nicho e por que você o escolheu Além disso, se disponível, você pode compartilhar um link ativo para o blog. Eu adoraria ver o que você cria. Obrigado por se juntar a mim nesta aula. Te vejo na próxima vez.