Design de portfólio universal: do template do Figma ao site live em WordPress com Elementor Pro

1. Boas-vindas ao Figma para o WordPress: crie um portfólio universal com o curso de Elementor Pro: Olá, pessoal. Bem-vindo ao design de sites de portfólio da Universal com element of pro, uma aula em que você aprenderá como criar um belo site de portfólio profissional sem escrever uma única linha de código. Começaremos criando uma conta Figma e abrindo nosso arquivo de design Você aprenderá a editar texto, trocar imagens e escolher novas cores para combinar com seu estilo pessoal Em seguida, passaremos para um domínio e a configuração da hospedagem do seu site ativa e pronta para ser compartilhada com o mundo. Depois vem a parte divertida do Wordpress, instalaremos o WordPress, o element free e o elemento pro e começaremos a recriar seu design Figma usando ferramentas simples de traganrof, sem necessidade de codificação, mas não Você também aprenderá como acelerar seu site na página SCO para que o Google possa encontrar você e conectar o Google Analytics para ver quem está visitando e no que está clicando Ei, eu sou Akalanka, uma web designer do Sri Lanka. Minha paixão é compartilhar meu conhecimento. Eu tornei esta aula super amigável para iniciantes. Mesmo que você nunca tenha usado o Figma ou o Wordpress antes, eu o guiarei em cada etapa do processo Esta aula é perfeita para iniciantes que estão curiosos sobre freelancers e criativos da Elementp que desejam um Alguém pronto para transformar seu design Figma em um site ativo Ao final desta aula, você terá um site de portfólio pronto para SCO totalmente funcional projetado por você e construído com confiança, pronto para iniciar a UTI dentro da 2. Introdução às ferramentas que usamos: prós, contras e alternativas: Nesta aula, usaremos principalmente três ferramentas Figma, verpus e elemento P. Vamos dar uma olhada em cada ferramenta Existem prós e contras e algumas alternativas. Então você sabe exatamente com o que está trabalhando. Primeiramente, Figma. Figma é nossa ferramenta de design. É onde criaremos o layout e o estilo visual do seu portfólio. Antes de transformá-lo em um site real. Vamos falar sobre prosa. O Pigma é executado no seu navegador. Não é necessário baixar ou instalar nada. É gratuito para usuários individuais. Você pode editar seus designs ao vivo com outras pessoas. Portanto, se você estiver trabalhando com um cliente ou colega de equipe, eles podem deixar muitas sugestões de edições ou até mais elementos em tempo real Ele também vem com recursos úteis, como componentes de layout automático e bibliotecas compartilhadas, que tornam design eficiente até mesmo para iniciantes Aqui estão alguns contras. A interface pode ser um pouco confusa no início. Há muitos banners e dois estudantes e, como é totalmente baseado na nuvem, você precisará de uma conexão estável com a Internet para funcionar sem problemas Como alternativa, existem ferramentas como AdovXD e Ikech. Além disso, você pode usar o CanMa. É uma opção amigável para iniciantes, mas tem muitas limitações Em seguida, 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 profissionais. É de código aberto e gratuito. Você tem controle total do seu site, do design ao SCO 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. E, embora seja flexível, configuração pode parecer técnica à primeira vista. Alternativa ao Wordpress Wix e ao Square Space Earl em um único criador 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 element of pro é nosso construtor de páginas. A ferramenta que permite transformar esse design portátil do VoluFigma em um site mundial totalmente funcional Vamos falar sobre profissionais. É extremamente amigável para iniciantes. Nenhum código é necessário, apenas Dragon Row. Você terá controle total do design sobre todas as partes do seu site, incluindo a visualização móvel. Elementor pro inclui widgets avançados, como formulários, controles deslizantes, intervalo de prêmios, depoimentos e muito mais. Com o criador de equipes, você pode projetar visualmente toda a estrutura, cabeçalhos, rodapés e modelos de blocos do seu site cabeçalhos, rodapés e modelos de blocos Element of pro é um plug in, 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 mundo do design. 3. Crie uma conta no Figma: Olá, pessoal. É hora de criar uma conta Figma Se você já tem uma conta Figma, pode pular esta lição Se você não acessar o Google ou clicar no link na seção Recursos. Se você for ao Google, pesquisar Figma , verá esse tipo de resultado, basta clicar no primeiro resultado Agora estou na landing page do Figma. Se você já tem uma conta, você pode clicar em Login. Caso contrário, clique neste botão, comece gratuitamente e aqui, clique em. Continue com o Google para se inscrever com sua conta do Gmail. Ok, agora vou clicar na minha conta do Gmail e clicar em. Continuar. Ok. Agora eu acabei inscrever e temos alguns detalhes para preencher. Primeiro aqui, temos que adicionar nosso nome, então adicionarei meu nome e, em seguida, clicarei em Continuar. Então eu tenho que selecionar Que tipo de trabalho você faz? Então, aqui, vou selecionar Design. Em seguida, clique em Continuar. Em seguida, diz: alguma dessas coisas descreve seu trabalho. Aqui, selecionarei freelancer e você seleciona de acordo com sua posição, depois clico em Continuar. Então, temos outra pergunta como: com quem você costuma colaborar Aqui, selecionarei como ninguém, só eu e clicarei em Continuar, então não quero convidar ninguém. Vou pular esta parte e aqui, selecionarei outra e depois clicarei em Continuar e aqui, você já usou o produto IgM antes, adicionarei várias Se você não estiver familiarizado com o IgM, basta clicar em e clicar em Continuar Em seguida, selecionarei esse pacote inicial. Em aulas futuras, explicarei os benefícios da assinatura da página Figma No entanto, podemos acompanhar todas essas lições com o pacote gratuito. Eu clico em Continuar e aqui, vou clicar em Eskep agora aqui está o painel do Figma Todos os nossos projetos serão carregados aqui. Como primeira etapa, vamos criar um novo arquivo Figma. Para fazer isso , clique nesse novo arquivo de design Ok, aqui está a interface figma. Em primeiro lugar, vou renomear esse arquivo Figma. Vamos renomeá-lo como meu primeiro projeto. Entrar. Agora, na próxima lição, vamos nos familiarizar com todos esses painéis e tentar criar nossa primeira moldura ou nosso primeiro design. S na próxima 4. Passo a passo do Figma: explorando a interface: Olá, pessoal. Aqui temos o arquivo Figma do portfólio universal Basta clicar neste botão de abertura do Figma e ele criará uma cópia do nosso arquivo Figma Se verificarmos o arquivo Figma, aqui temos a versão feminina do portfólio e a versão masculina do portfólio Clique na versão feminina e clique neste botão de reprodução para abri-la em uma nova tag. Então, aqui está a prévia, e veja, então eu clico no próximo quadro, e aqui temos a versão masculina do site do portfólio. E não só isso, aqui temos instigat Istigaset é o lugar que define cores e a fonte deste site de portfólio Agora vou mostrar como alterar as cores da fonte, o texto e as imagens. Primeiro, vamos começar com as cores. Pense se você não gosta dessa cor ou se tem um setor diferente ou se planeja criar um amplo site sobre poliomielite para coach de relacionamento, nesse caso, essa cor não será adequada A cor adequada será rosa, preto e branco. Então, vamos mudar as cores. Para mudar as cores, não precisamos examinar cada elemento. Aqui, podemos selecionar esse item de cor da paleta de cores. Em seguida, aqui você verá cor do campo e clicará na cor primária, e aqui você verá o ícone de edição, clique nele e clique aqui abaixo da propriedade. Então aqui você pode adicionar o código de cores. Então, vou adicionar um código de cores como a hashtag FF 200. A cor mudará para essa cor laranja. E se verificarmos no design, aqui, tudo muda para a cor laranja. Veja, porque na figma, definimos esse código de cores como variável de cor primária ou cor primária é azulejo Quando o alteramos em um só lugar, isso afetará todos os quadros. E agora vamos mudar essa cor para fígado e cor. Basta clicar aqui e vamos fazer disso um site de coach de relacionamento. Então, vamos adicionar uma cor rosa. Cor como essa. Ok, agora tudo muda para a cor rosa, e então temos que mudar o texto. Portanto, o texto nos dois quadros é editável, o que significa que podemos clicar duas vezes no texto e editá-lo Basta editá-lo como se o Zugim desse jeito. Portanto, em alguns lugares, se clicarmos duas vezes no texto, ele não fará a edição do texto. Se isso acontecer no Mac, você pode pressionar o comando e clicar duas vezes no texto desta forma. Então, aqui eu pressiono o comando e clico duas vezes assim, e se você usa o Windows, você pode pressionar Control e clicar duas vezes. Depois, você pode alterar esses textos conforme desejar. É assim que podemos mudar o texto, e não importa o lugar, você pode simplesmente alterá-lo assim. E isso afetará o design, mas se o texto alterar o design dessa forma, nesse caso, essa seção será menor. Então, neste caso, temos que adicionar tline e torná-la uma linha como Então temos que amarrar as imagens. Para fazer isso, basta selecionar a imagem como fizemos antes. Se não for selecionado, clicamos ao clicar duas vezes, podemos pressionar Command ou segurar Command ou Control. Podemos pressionar Command no Mac e Control no Windows, e ele selecionará. Em seguida, no preenchimento, temos a seção de imagens, basta selecioná-la e agora podemos clicar nesse botão de upload do computador e ele abrirá o navegador de arquivos. Ok, aqui vou apenas selecionar uma imagem. Selecione este e ele será adicionado. Então, quando o adicionarmos, ficará assim. Então, o que podemos fazer atualmente é a colheita. Devemos fazer isso da maneira mais adequada. Então, o que podemos fazer é aumentar esse design pressionando o comando enquanto usamos a roda do mouse para aumentar o tamanho dessa forma ou, no Windows, pressionar Control e a roda do mouse. Então, o que podemos fazer é clicar aqui e definir a tarefa de recorte. Então, aqui você pode alterá-lo sempre que quiser, então vou adicioná-lo assim e aqui posso apenas aumentar. Você aumenta a imagem, você deve pressionar Shift. Se você não pressionar a tecla Shift, ela será ajustada sem. Isso danificará a aparência da imagem. Portanto, sempre pressione Shift e ajuste-a assim. Vamos ajustar assim e colocar assim. OK. Agora é só mudar a primeira imagem e aqui, vamos também mudar essa imagem, selecionar a imagem. Então, aqui você pode ver a imagem que selecionamos, e aqui, clique na imagem, você clicará duas vezes na imagem. Então aqui podemos clicar na imagem e clicar em carregar do computador. E aqui, vamos adicionar essa imagem. Agora, o que temos que fazer é alterar isso para caber, depois aumentar a seção, fazer um corte e aqui não selecionar os cantos azuis, selecionar a imagem, e aqui temos o final da folha de impressão da imagem e ajustá-la de acordo desta forma. Então, dessa forma, podemos mudar as imagens. Aqui, podemos seguir o mesmo passo em falso e alterar as imagens, e para o plano de fundo, também podemos alterá-lo Atualmente, não tenho imagem de fundo. No entanto, vou apenas selecionar o plano de fundo, e aqui temos a propriedade de cor branca da imagem no campo. Então, aqui precisamos mudar essa imagem. Clique na imagem, clique em carregar do computador e vamos selecionar esta, e agora temos que fazer o que quiser e depois recortar. Acho que essa imagem não vai caber aqui, depois pressionar Shift e d assim. Então, podemos ajustá-lo como quisermos, para que fique assim. E agora, se selecionarmos a moldura fot polo e clicarmos no ícone de exibição, podemos ver as alterações que fizemos dessa forma Ok, é bem simples. Nesse método, você pode alterar o texto, as imagens e os detalhes desses quadros. E ainda assim, estou no estágio de desenvolvimento do arquivo. Depois de projetar isso completamente, renomearei esses quadros como aqui, herói e aqui podemos adicionar um menu. Vou alterá-los assim Dessa forma, você entenderá facilmente as seções nas quais está trabalhando atualmente. Além disso, se você tem um requisito de design de site de portfólio para uma pessoa do sexo masculino, você pode usar isso e não só isso, agora você tem um conhecimento básico do Figma, o que significa que você pode criar suas próprias seções Por exemplo, aqui, não temos uma seção para galeria, então você pode criar sua própria galeria. Então, nos vemos na próxima lição. 5. Crie um subdomínio: Olá, pessoal. Agora estou no site do nosso portfólio Universal Figma Design Você pode conferir este link na seção de recursos. Então, aqui temos dois designs de portfólio. O primeiro é para a versão feminina e o segundo é para a versão masculina. Então, vou usar essa versão de portfólio feminino para criar nosso site. Então, vamos criar um site para Hannah Clark. Para fazer isso, precisamos ter um host em um domínio. Ok, se você planeja comprar um novo domínio e hospedá-lo, você pode pular esta lição e ir para a próxima Na próxima lição, mostrarei como comprar domínio e servidor de hospedagem. No entanto, se você já tem um domínio e um servidor de hospedagem, nesta lição, mostrarei como criar um subdomínio e hospedar nosso site em um subdomínio Então, vamos começar. Agora estou no painel C do meu provedor de hospedagem, então uso o Name cheep como provedor de hospedagem Então, aqui, eu vou para a seção de domínio. Na seção de domínios , basta clicar nos domínios Agora, aqui, posso ver todos os domínios que tenho atualmente Vou usar esse domínio design.us de site personalizado para criar um subdomínio Então, para criar um subdomínio, basta clicar em Domínio criado Agora, aqui vou inserir o nome do subdomínio. No meu caso, será hana dot custom website design US, porque quando criamos um subdomínio, temos que selecionar o domínio principal Então, eu apenas copio o domínio personalizado do design do site nos EUA, e aqui eu adiciono o ponto Hanna e faseio o subdomínio porque nosso nome de Psonas ou coach de negócios Ok. Agora, aqui, quando eu digito o nome do domínio, você pode ver que temos um nome raiz do documento como nosso nome de subdomínio E aqui compartilhamos a raiz do documento e ela tem a parte do arquivo em SDML público Então, se eu enraizar esses documentos compartilhados, esses arquivos americanos de design de site personalizado da Hanad se adaptarão ao DML público, mas não precisamos fazer isso, então não vou verificar Assim, com as configurações, design.us do site personalizado Hanadt será criada dentro da pasta Quando eu passo o mouse sobre o ícone inicial, você pode ver o diretório de documentos que vamos criar essa pasta Agora eu clico no botão enviar. Ok, agora nossos subdomínios foram criados com sucesso e, se clicarmos nesse caminho de pasta, ele abrirá o gerenciador e, se clicarmos nesse subdomínio, ele abrirá a visualização do domínio, mas atualmente ele tem uma mensagem e precisamos esperar cerca de 20 a 30 minutos para configurar o DNS Enquanto isso, vamos criar uma pasta chamada test dot TML em nosso subdomínio recém-criado E vamos clicar lá e clicar em Editar e editar. Então, aqui, vamos adicionar um texto como se fosse um subdomínio. Vamos fazer com que seja como Hello. Este é um subdomínio. Então, agora eu clico em Conceber alterações e vamos tentar refazê-las. Na verdade, quando eu repito, nada aparece. Então, vamos esperar uns 20 minutos e eu vou ver depois disso. Ok, eu esperei uns 20 minutos, e agora aqui está a aparência do site quando o visitamos Então, aqui está o arquivo HTML de pontos de texto que criamos. Quando clicamos em contar, podemos ver nossa mensagem Olá, este é um subdomínio, texto que adicionamos 6. Comprando um domínio e hospedagem: 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. 7. Instale o WordPress em sua hospedagem: Olá, pessoal. Agora temos que instalar o WordPress em nosso site. Para fazer isso, vou para o painel C. No painel C, você verá o Softaguls App Installer nesta ferramenta Então, basta clicar nele. Ao clicar nele, vou redirecionar para esta página e, aqui, clicarei em Instalar no WordPress Quando clico em Instalar, escolher o URL de instalação, selecionarei como hana dot custom Web Design, EUA, depois não adicionarei nenhum diretório e selecionaremos a versão mais recente como nossa versão do WordPress E na configuração lateral, podemos adicionar o nome do site e a descrição do site Mas, por enquanto, não vou adicionar nenhum e, na conta de administrador, temos que adicionar o nome de usuário e a senha do administrador. E aqui temos o plug-in, vou desmarcar qualquer um deles e vamos adicioná-los mais tarde. Se quiser, você pode mantê-los. Então, eu administro a conta com o nome de usuário do administrador, vou apenas adicionar o nome de usuário. Pode ser Hannah ou Admin Hanna ou algo parecido, vou apenas adicionar Admin e, em seguida, na senha de administrador, gerarei uma senha e sempre me lembrarei dela, usarei um nome e uma Isso exigirá que você faça login no site. Em seguida, no e-mail do administrador, adicionarei um e-mail do administrador como este. Depois disso, basta clicar no botão Instalar. Agora está começando a instalar. Agora, aqui temos o site do Wordpress instalado. Então, se eu clicar neste, posso ir para o Backend e podemos simplesmente acessar o Backend usando nosso site slash Ok, instalamos com sucesso o Wordpress 8. Painel limpo do WordPress: Olá a todos. Agora temos que limpar nosso painel do WordPress. Então, vamos começar do topo. A partir daqui, temos essas opções de tela. Eu apenas clico nele e é aqui que posso remover os elementos da tela desse painel. Então, vou remover todos eles porque não preciso de nenhum deles por enquanto. Então, agora vou clicar nessa opção de tela para ocultá-la. E agora aqui temos um painel claro. Então aqui vamos para Earl Post. No ErlPost, temos esta postagem do Hello World. Vou clicar em TASH e enviá-lo para a caixa de lixo. Em seguida, vou para o TAsH e clico em Excluir permanentemente. Agora, nas categorias, não temos categorias, temos apenas essa categoria padrão e na biblioteca de mídia, vamos ver, não temos nenhuma biblioteca de mídia, então eu clico nas páginas R nas páginas ER, não precisamos dessa página de amostra ou dessa página de política de privacidade. Então, basta remover os dois. Em seguida, na lixeira, vamos clicar em Excluir permanentemente e, aqui, clicar em Excluir permanentemente Então, nos comandos, vamos ver, não temos nenhum comando e na aparência, clique neles. Em temas, temos três temas, mas vamos usar o Elementor pro para criar este site, então instalaremos o Hello Elementor Por enquanto, vamos Earl desativar ou desativar o tema. Nós não precisamos desse também. No futuro, instalaremos o tema halo elemental. Por enquanto, vamos manter isso como tema principal ou há o tema ativo. Em plug-ins, clique em instalar plug-ins e aqui não precisamos desse chisme ou plug-ins hedoly Então, Radio, eu te disse que uso o nome Jeep no nome jeep, cache Light Speed é instalado automaticamente Por enquanto, vou continuar assim. Mas, no seu caso, se você não vê cache de velocidade da luz, não se preocupe. Em aulas futuras, aprenderemos como instalar e configurar plug-in de cache de velocidade da luz para melhorar a velocidade do nosso site e o cache. Ok, agora em usuários ou usuários, ele tem apenas minha conta de usuário. Agora temos um site limpo. Então, se formos ao painel, e aqui temos um novo site mundial, e na próxima lição, vamos começar a projetar. 9. Passo a passo do WordPress: Olá, pessoal. Na verdade, esqueço de criar o trabalho do WordPress por meio de vídeo. Então, vamos fazer isso agora. Então, primeiro, vou sair logo aqui e clicar em E para entrar no site do WordPress, podemos adicionar uma barra após o URL do site e em wp admin desta forma Em seguida, chegaremos a esta página de login do Wordpress, e aqui teremos que adicionar o nome de usuário e senha do site Wordpress que registramos. Em seguida, clique em Login e agora estou no painel do WordPress. No painel do WordPress, aqui temos esse logotipo do Wordpress e, a partir daqui, podemos verificar a documentação e aprender mais sobre Wordpress, então temos página inicial R. Se clicarmos aqui, ela será redirecionada para a página inicial do site Vou clicar em e, em seguida, aqui temos a seção de comando. Atualmente, temos zero comandos. O WordPress é melhor para login, então é por isso que temos esse tipo de seção de comando. Então, aqui, temos um novo ícone de menu e, sobre o novo, podemos criar páginas de mídia para publicar anúncios e criar usuários. Também no lado direito, teremos detalhes sobre nosso perfil de administrador. Eu passo o mouse sobre ele e clico neste administrador. Ok, aqui temos os detalhes pessoais do perfil. Então, a partir daqui, podemos mudar a cor do administrador. Por exemplo, se eu selecionar essa cor, ela mudará assim e isso mudará assim, mas eu gosto da cor padrão. E aqui podemos adicionar nosso nome, sobrenome e apelido, aqui podemos adicionar nosso e-mail Na verdade, o e-mail já estará configurado. Em seguida, o URL do site é definido como URL atual do nosso site porque somos o superadministrador deste site. Em seguida, podemos adicionar detalhes sobre nós mesmos e também podemos adicionar uma foto de perfil. Para adicionar a foto do perfil, precisamos nos registrar na conta Gravata Se você clicar aqui, eu clicarei com o botão direito do mouse e clicarei em Abrir nova janela e aqui podemos clicar em GT Data agora e criar nossa conta Gravita Por enquanto, vou manter o mesmo e aqui podemos alterar nossa senha, clicar em definir nova senha e adicionar sua senha aqui, depois clicar em Atualizar perfil e eu não vou fazer isso. Depois de fazer isso, você se desconectará e poderá fazer login com a nova senha. Ok, agora vamos para o painel e para casa. Vamos clicar em Ao vivo. OK. E na seção Atualizações, se eu clicar em Atualizações, podemos ver os plug-ins, temas e a atualização da versão do Wordpress. Atualmente, nosso site está atualizado. E quando você faz atualizações em seu site, sempre faça backups e, em seguida, temos a seção de postagem. Então, se eu clicar em ErlFost aqui, podemos clicar em AdnwPost e vamos clicar em Ad NW E aqui podemos adicionar o título assim e aqui podemos adicionar detalhes e clicar em Publicar. Mas, no futuro, faremos essas coisas por enquanto. Vamos conhecer a familiaridade da interface. Vou clicar na Lu e voltar e aqui ela vai mostrar as postagens que já temos. Depois, temos as categorias e, nas aulas futuras, examinaremos as categorias e, na mídia, podemos ver as imagens, vídeos e documentos que nosso site tem nesta seção de mídia. Então temos páginas. Nas páginas A, atualmente temos uma página de política de privacidade. Se eu clicar em Visualizar, ficará assim e, se quisermos editá-lo, basta clicar em Editar e editar os detalhes conforme quisermos. Mas, por enquanto, vamos examinar apenas as coisas. Novamente, vou para o painel, depois temos a seção de comando e ela mostra os comandos que recebemos para nossa postagem e, em seguida, temos a seção de aparência. Atualmente, na seção de aparência, não temos muitos detalhes porque configuramos apenas equipe padrão do Wordpress 2025 e, no futuro, aprenderemos mais na seção de plug-ins. Teremos os plug-ins necessários para criar este site. Como exemplo, usaremos o Element Pro para criar nosso site. Element or Pro é um plugin. Se eu clicar em adicionar novo plugin e aqui eu posso ver os plug-ins e , em seguida, se eu pesquisar aqui elemento ou apresentador, esse elemento ou plugin de construção de sites apareceu, e aqui está escrito, atualizado pela última vez há uma semana e é compatível com a versão do nosso site WordPress Diz design elemento.com, e podemos simplesmente clicar em Instalar agora e instalar o plug-in, depois ativá-lo, e aparecerá esta seção de plug-in instalado A partir daqui, podemos clicar nesse plug-in de upload e, se baixarmos o plug-in em nosso site, podemos simplesmente escolher o arquivo e instalá-lo. E aqui podemos clicar em ErlSer e aqui podemos ver os usuários Earl que temos em Portanto, atualmente temos apenas superadministrador e a função é administrador. Então, se eu clicar em novo usuário. Aqui estão os detalhes que podemos inserir. Então, como função, podemos selecionar seu administrador, editor, autor ou colaborador Se for editor, a função de editor não terá todos esses detalhes e só poderá editar coisas como páginas, publicar, verificar comentários e coisas assim. Em seguida, nós ferramentas. Esta seção de ferramentas não é importante por enquanto, vamos pular essa Em seguida, começamos. No set in, temos uma seção como redação geral, leitura em discussão e aqui podemos escanear os detalhes laterais e há outra seção como esta. Por enquanto, esses não são itens importantes. Em aulas futuras, você aprenderá mais sobre essas configurações e como substituí-las , se quiser Você pode acessar o painel do WordPress e descobrir mais sobre o painel Espero que você tenha uma compreensão básica do word press e, na próxima lição, vamos começar o design. 10. Instalando 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 widgets pré e profissionais e ele tem 86 projetos, mas com o plano essencial, temos apenas 57 Como se fôssemos para a seção de marketing e comércio eletrônico, com o plano individual avançado, 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 acessar o Plano Avançado. Ou se você é 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. 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 Ad NE. Primeiro, temos que instalar o plugin elemento pre. A partir daqui, vou pesquisar elemento. Então aqui temos o plugin de criação de sites Elementor. É desenvolvido pela elemento.com e é compatível com nossa versão do Wordpress Eu clico em Instalar agora. OK. Em seguida, clico em Ativar. Tudo bem. Agora clico em pular e pularei essas etapas ou clicarei 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. A partir daqui, clicarei no botão Até agora no site Advance solo, no plano Builder, e aqui terei 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 mid elemento.com E ao fazer isso, você verá esse tipo de ícone de download e, em seguida, verá elemento se conectar ao Download, clique nele, download será iniciado e agora você terá o plug-in do elemento. Então, agora vamos configurar nosso site. Depois de baixá-lo, vou até os plugins e clico em Ad Plugin. E aqui eu posso clicar no plugin Upload e clicar aqui para obter o pacote em que baixamos o CFle dragon rob aquele arquivo C que obtemos do site da Em seguida, clique em Instalar agora e, em seguida, clique em Plugue ativo. OK. Agora, aqui podemos ver a seção de plug-in do elemento e, se você ver esse tipo de mensagem, basta clicar em Conectar e ativar e clicar em Conectar e ativar. OK. Agora, se formos para a licença, é um status ativo. Agora podemos usar o recurso elemento pro em nosso site e podemos criar facilmente esse portfólio universal em nosso site Elementor 11. 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 12. Configure cores globais no Elementor: Olá, pessoal. Agora, o que precisamos fazer é instalar o tema para fazer isso sobre a aparência e clicar no tema. E aqui, clique neles e pesquise aqui Hello elemento. Aqui está o tema Hello Elementor, clique nele e, ao clicar em cont, você pode ver hello elementor Agora clique em Instalar. Clique em ativar Ok, agora está ativado, então eu clico neste tema de 2025 e clico em Excluir porque não precisamos desse tema e bom. Agora temos que configurar a configuração lateral. Para fazer isso, primeiro, vou às páginas e clicarei nas páginas. E aqui temos a página padrão, então vou clicar na Lixeira porque não precisamos desse elemento ou dez páginas, depois vou para a Lixeira e removo clicando em excluir permanentemente , mas depois clico na página e agora vou criar a Aqui vou adicionar o título como página inicial, depois clico em Editar com elemento Quando clico em editar com o Elementor, ele abre a tela do Elementor e, a partir daqui, podemos criar o site e a configuração da página, podemos alterar o conjunto de páginas no título e exercer em aulas futuras, mostrarei como adicionar trechos e como classificar nossa página inicial em mecanismos de pesquisa como Então, por enquanto, vamos configurar a configuração do site para fazer isso, clicarei no ícone de configurações do site e aqui podemos adicionar cores globais e fonte global. Então, se acessarmos nosso site de portfólio universal, teremos uma planilha Itca Nesta folha de Ita, temos as cores. Por exemplo, essa é a cor primária, essa é a cor do texto e essa cor branca são as cores secundárias. Então, vamos adicionar esses detalhes. Para adicionar esses detalhes, vou ao site e primeiro clique nessa cor global, temos as cores do sistema. Vamos mudar essas cores do sistema. Primeiro, temos o primário. Vamos pegar a cor primária. Para fazer isso, clico nessa primeira cor e clico aqui, depois clico no ícone Editar estilo T e copio essa propriedade de cor e clico aqui e colo assim. O nome será a cor primária e, em seguida, teremos essa cor de texto. Clique aqui, clique neste EdittStyle e copie a cor e depois no texto, cole o código da cor e cor do texto, altere esse título para a cor do texto, e então temos essa cor branca Podemos fazer o mesmo com este. Essa será a cor secundária e cole a cor assim. Na verdade, temos que adicionar uma hashtag na frente da cor. Ok. Então temos essa cor de destaque, mas, neste caso, temos essa cor ho Her Para copiar o código de cores Her, precisamos criar um retângulo como este e depois clicar aqui, selecionar a cor OA e agora podemos clicar na variável de desanexação Atualmente, o motivo é que usamos essa cor cho somente nesse cubo de cores Então, se simplesmente a desanexarmos, a variável será removida Agora eu posso copiar o código de cores daqui e vir aqui e colocar o código de cores assim. Então aqui, vamos criar essa cor poderosa. Ok. Agora temos os códigos de cores Earl Agora eu clico em Salvar alterações. Então eu vou remover este. Depois vou voltar, clicar em salvar e agora podemos clicar aqui para adicionar a fonte. Agora, aqui temos a mesma estrutura. Na verdade, podemos clicar aqui para acessar esta seção. Ok, agora temos que adicionar texto. Na verdade, vamos remover este e, no instigaset, adicionarei todos esses textos, que significa que temos que editar o Então, depois de editar o Itigaset, eu vou te encontrar na próxima lição 13. Configure as configurações do site e fontes globais no Elementor: Olá, pessoal. Agora vamos tentar adicionar essa tipografia Primeiro, temos o cabeçalho, então eu vou para a configuração de sentar e, no primário, vou mudar esse texto para cabeçalho. Em seguida, basta clicar duas vezes aqui e copiá-lo assim. Então clique aqui e vamos ver a tipografia, então aqui temos Nunito Então, podemos verificar isso, então vamos pesquisar Nunito. O tamanho é 50 com essa bola, e qual é a altura da linha A altura da linha é Otto, vamos fazer com que a altura da linha seja 50. Sim, a altura da linha será 44. Vamos fazer com que a altura da linha seja 50. Ok. Agora, a seguir, temos essa fonte de subtítulo nunito semibolt 26. Vamos fazer com que seja assim. O segundo w será uma unidade ou 26 semibold seis, seremos semibolds e Einheit será Acho que foram 30. Vamos ver. É 33, vamos fazer com que seja como 30. Ok. Em seguida, vou mudar esse texto para subtítulo, copiar e colar assim Então temos o texto. Texto significa parágrafo, copie o texto do parágrafo. É assim, então temos que adicionar a fonte. A fonte é aberta sem regular 18 30 centavos abertos 18 regular média normal e a linha é Se houver alguns problemas, podemos simplesmente removê-los vindo aqui e temos sotaque Sim, agora temos botões, copie o texto do botão e prefacie-o com cores de destaque e clique aqui, então é semimundo aberto 22, o tamanho do semivolt aberto é 22 e a altura da Eu acho que é 30? Não, é 25, Iinight é Agora temos que adicionar os títulos personalizados porque temos que adicionar a fonte manline Link do menu e cole assim, depois clique aqui e adicione abre semivolteighteen, open semivolteighteen E quanto à fila, a noite é 21. Ok, agora temos fontes Earl, então agora eu clico em Salvar alterações Ok, então eu clico aqui para voltar e, na confusão podemos ignorá-lo porque vamos usar propriedades do elemento ou do editor Então, ignore esses estilos de tema. Em seguida, definimos a seção e, como primeira parte, temos a identidade do site, vamos lá, e aqui temos que adicionar o nome do site e a descrição do site Vamos adicionar o nome do nosso site. O nome do site é Hannah Clark, então vou copiar esse texto daqui e colá-lo assim Então, conforme a descrição do site, vou deixá-lo vazio. Na verdade, esses itens podem ser alterados quando fazemos o CO na página. Aqui temos que adicionar o ícone Sit FV e, em nossa folha de tigre, acabei de criar um favicon que inclui as primeiras letras do nome dessa Hannah Clark Então, vou clicar em Exportar e torná-lo JPG e clicar em Exportar. Clique no FVcon, defina o JPEG, clique no favicon clique no E agora temos que ir para o pequeno PNG. Agora estamos no tiny png.com, então o tiny PNG é a ferramenta de compactação de arquivos que ajudará a reduzir o tamanho do arquivo Então, aqui temos 37 kilobytes, e agora temos 8 kilobytes, clique no botão JPG para baixá-lo e, em seguida, vamos aqui e clique no favicon Sit e Depois, apenas em ALT, um ícone de TV a gás Agora volte agora, aqui temos sutiãs. Ao configurar agora, a parte importante é o layout, clique nos layouts no layout, a largura do conteúdo é 1.140 e é a largura padrão do conteúdo, embora nosso design Figma tenha largura de 1.440, mas no padrão elementar Em seguida, quando o contêiner entrar, eu os tornarei zero, e as lacunas serão de 20 por 20. Então, aqui, se clicarmos nessa imagem e pressionarmos Alt e verificarmos a diferença entre os lados, é 20, então essa é a lacuna da coluna, e vamos verificar a lacuna da linha. A lacuna da linha é a lacuna da linha é dez, então vamos fazer com que aap seja uma lacuna é dez. Ok. Agora, o layout padrão da página será elemento ou largura total, não elemento temático ou largura total. E o ponto de interrupção será o padrão, e agora clique em salvar alterações Ok, volte e podemos ignorar outras coisas por enquanto. Ok, agora eu volto e aqui está a aparência do nosso site. Na verdade, preciso revisar esta página para verificar a nova versão Ok. Na próxima lição, vamos criar o cabeçalho. Por enquanto, vou clicar em publicar e publicar a página inicial Em seguida, vou para o painel do WordPress no WP Admin após seu site, RL, então podemos configurar e continuar lendo, alterar as exibições da sua página inicial para uma página estática e selecionar a página inicial e clicar em Salvar Agora, se visitarmos o site, o site ficará assim e, na próxima lição, vamos começar a criar nosso site. 14. Como criar o menu de cabeçalho — parte 1: Olá, pessoal. Agora é hora de criar o site. Eu vou ao site do portfólio da Universal, Fake Mobile, e esta é a versão que vamos criar. Então, aqui não precisamos desse layout de grade, então vou clicar aqui para ocultá-lo. E agora aqui temos um design claro. Então, como primeira etapa, temos que criar essa seção, esse cabeçalho. Vamos fazer isso, vou ao nosso site e vamos ao painel. No painel, na verdade, não precisamos desse elemento ou visão geral, então clique nas opções da tela e remova-as. Ok. Agora, no modelo, clico em Team Builder. No Builder, temos seções separadas. Então, aqui temos cabeçalho, rodapé, página única forçada, página única e coisas assim Então, como primeira etapa, temos que criar o cabeçalho. Então, basta clicar nesse ciclo positivo. Tudo bem Agora ele abre o elemento ou editor, e aqui temos a biblioteca, então, nesta biblioteca, podemos encontrar um cabeçalho de designs prontos, mas eu não vou usar nenhum deles, então eu apenas clico neste ícone de fechar, e aqui temos o elemento ou editor. Então, aqui eu clico nesse ícone de adição, e vamos usar o Flexbox, então eu clico no Flexbox e o tipo Plex Box será coluna direta Ok. Adicione assim e eu clico nele e, em Avançar, removerei as margens e os preenchimentos Então, como primeira etapa, temos que adicionar esse logotipo para adicioná-lo, eu seleciono nele clico em Exportar, e aqui vou torná-lo JBG porque a tela ou o conteúdo é branco e não precisamos de fundo transparente Em seguida, clico em porta. E vamos ao pequeno PNG e coloque-o aqui. Em seguida, ele foi otimizado, depois clico nesse botão para baixá-lo e vamos aqui. E como primeira etapa, temos que adicionar o logotipo. Então, aqui podemos simplesmente adicionar um logotipo lateral como este e aqui podemos adicionar o logotipo. Então, basta clicar em alterar logotipo lateral, e aqui, clicar no logotipo lateral, e então temos que fazer o upload da página de download. E vamos copiar o título e colá-lo assim, Hanas. Vamos fazer dele um logotipo. Sempre, temos que adicionar a tag ALT. A tag ALT é muito importante em SEO e, se esse logotipo não estiver sendo carregado ou se estiver ausente, a tag ALT ou ol aparecerá. Portanto, sempre adicione uma tag antiga de texto significativa. Ok, clico em Salvar alterações e agora clico em Voltar ao Editor, e nosso logotipo acabou de ser adicionado assim, mas precisamos disso no lado esquerdo para torná-lo no lado esquerdo, clico no contêiner e no layout, adicionarei essa direção como horizontal bruta, e apenas o conteúdo y será iniciado. Ok, veio para o lado esquerdo. E agora vamos descobrir o que há entre os lados. Então, aqui temos 20 como o topo. Então, para obter esses detalhes, basta selecionar o elemento no arquivo Figma que deseja verificar e pressionar a tag ALTO all do teclado e ver o tamanho intermediário E se quisermos ver o tamanho intermediário desses dois, basta clicar assim e encontrá-lo. Então, eu personalizo o design do site , classe completa, você pode encontrar essas informações. Então, vamos adicionar 20 como topo, vá aqui e no contêiner, vá para avançar, então margem superior será 20 assim. Ok. Então, o que precisamos fazer é adicionar o menu. Para adicionar o menu, basta clicar no elemento do anúncio e no menu de pesquisa e aqui temos o menu do WordPress, basta copiá-lo e arrastá-lo aqui. Então, basta arrastá-lo aqui e ele será adicionado ao contêiner, e temos que criar um menu antes de prosseguirmos para fazer isso, posso simplesmente clicar nele. Vá para a tela do menu para criar um, e aqui, podemos criar um menu. Então, para o nome do menu, adicionarei o menu principal e clicarei em Criar menu. Não selecione nenhuma dessas coisas, crie um menu simples. Ok. Agora, a partir daqui, podemos adicionar páginas de postagem ou adicionar links personalizados. Então, aqui aqui, vou selecionar a página inicial Nas páginas, temos a página inicial. Acabei de adicioná-lo e, em seguida, temos outro menu como serviços e depoimentos, vamos nos conectar Então, essa é uma landing page. Na página de destino, quando eu clico nesse A, isso redireciona para a seção A. Então, para adicionar isso, temos que usar esse link personalizado. No link personalizado, adicionarei os links, suba escadas ao redor e como URL. Por enquanto, vamos adicionar a hashtag depois de concluirmos todas as seções e, em seguida, configurarmos o menu, que significa que quando eu clicar em sobre, ele estará relacionado à seção A, como esta Ok. Agora clique em adicionar ao menu, então temos o serviço de copiar o texto e aqui, coloque o texto na hashtag dos URLs, clique em Adicionar ao menu, depois aqui o depoimento, copie e venha aqui, coloque o texto do link e adicione a Ok. Então, em vamos nos conectar, esse deve ser o botão, então temos que criá-lo separadamente. Por enquanto, adicionarei essas coisas e clicarei em Salvar Menu. Então vamos voltar aqui e agora temos que publicar isso com os detalhes. Na verdade, antes de publicá-lo, vamos salvá-lo como um rascunho como este e publicá-lo depois de criar a seção completa do menu ou a seção completa do cabeçalho. Em seguida, clico no ícone de recarregar para recarregar esta página. Ok. Depois de recarregá-lo, ele acabou de ser adicionado Agora eu clico no menu do WordPress e o menu é selecionado porque temos apenas um menu, e vamos ajustar esses detalhes. Primeiro, o layout será horizontal e a disposição será Ir . Não precisamos de nenhum ponteiro, faça com que não haja nenhum submenu. No menu suspenso para dispositivos móveis, podemos adicionar mais detalhes, mas vamos fazer isso na podemos adicionar mais detalhes, mas vamos fazer isso E agora temos que ir para os estilos E. Nos estilos E, podemos definir a tipografia. A tipografia deve ser um link de menu. Você se lembra de que criamos tipografia de links de menu em fontes globais Fizemos isso na seção de configuração lateral e, ao passar o mouse, vamos tornar a texto como essa cor primária, como essa Ou talvez vamos adicionar, vamos adicionar a cor dela como essa cor laranja. E quando ele aparecer em laranja em ativo, temos que definir a cor primária. A cor primária será essa cor verde. Ok. Agora não precisamos de nenhum divisor como esse, remova-o e agora temos que adicionar o preenchimento horizontal para adicioná-lo Podemos simplesmente clicar em um menu como este, pressionar e passar o mouse sobre o próximo item do O tamanho intermediário é 36. Vamos fazer com que o preenchimento horizontal seja 36. Ok. Em seguida, podemos adicionar preenchimento vertical Vamos ver o preenchimento vertical a partir daqui, aqui, vamos ver o preenchimento vertical. São 14. Vamos fazer isso como 14. Ok. Na verdade, o padrão horizontal deve ser zero e o espaço entre eles será 36, assim 36? Sim, são 36. O espaço entre eles deve ser 36 e o padrão horizontal deve ser zero, assim. Ok. Não temos uma lista suspensa e não temos um botão total na versão para desktop. Na versão móvel, eu fiz. Ok. Agora temos que corrigir o alinhamento. Então, vamos corrigir isso, clicar neste contêiner e adicionar o item de alinhamento como centro, assim Ok, então o que temos que adicionar um botão para adicionar esse botão vamos conectar, eu posso clicar no elemento e nos botões de pesquisa. E aqui temos um botão, basta arrastar e soltar assim. Então, vá até aqui, vou clicar aqui e colocar assim. Ok, agora podemos personalizar esse botão de acordo com o design da Figma 15. Como criar o menu de cabeçalho — parte 2: Ok, agora temos que criar esse botão. Para fazer isso, selecione o botão e vamos ao nosso design Figma e confira os detalhes Portanto, a cor do botão é a cor do campo. E quanto ao texto do botão? O texto do botão é, eu acho que é meu texto. Sim, é texto com link manual. Então, vamos lá e primeiro, vamos mudar o texto. O texto será vamos nos conectar. Eu apenas copio e colo assim. Então, por enquanto, vamos adicionar Link como hashtag. Em seguida, vá para o estilo E no estilo E, a posição do botão será renda e a tipografia Então, não precisamos de sombra de texto e, na cor normal do texto, é essa cor primária. Não, a cor do texto é secundária porque a cor do texto é branca. Sim, a cor do texto é branca. Então, agora, o tipo de fundo será clássico e a cor será essa cor primária. E ao passar o mouse, a cor do texto ainda será uma cor secundária e a cor de fundo será essa cor assim Ok, por enquanto, não vamos adicionar nenhuma animação. Ou, se quisermos, podemos simplesmente adicionar like grow. Então, quando eu passar o mouse sobre ele, ele crescerá assim Ok, agora, agora temos que adicionar o raio da borda. Então, vamos ver o raio da borda. São 30. O raio do canto é 30. Aqui temos o raio da fronteira. Vamos fazer com que sejam 30 assim. Em seguida, temos que adicionar o preenchimento. Vamos fazer com que seja zero por enquanto, e vamos ver o preenchimento, separar o texto, pressionar tudo e, assim, é 30 e a esquerda e a direita são 30 e a parte superior e inferior são 18 Vamos ficar entre os 18 melhores. Na verdade, temos que desvincular o ícone de valor. Temos que pressionar o ícone de valor de desvinculação. Em seguida, à direita para 30, o fundo é 18, aposta esquerda *** Ok. Agora, se formos ao design, o conjunto de menus está no lado direito e esse logotipo está no lado esquerdo. Então, para fazer isso, temos que ir até o contêiner, e podemos apenas torná-lo leve. Podemos simplesmente fazer com que seja como um espaço entre eles. E quando fazemos isso, o menu fica no meio e esse botão está na esquerda. Mas se optarmos pelo design original, o tamanho intermediário deve ser 36 desse botão e do menu. Então, para corrigir isso, temos que adicionar um elemento, e aqui temos que adicionar um recipiente, apenas um pano e um recipiente de corda como Eu não adicionei. Vamos fazer assim. Ok. Em seguida, avance, remova a margem e os preenchimentos no layout. Vamos desvincular o valor nas lacunas, e a lacuna da coluna será 36 Ok. Agora vou colocar esse menu do wordpress dentro desse contêiner assim. Vamos apenas adicioná-lo assim. Não, não, eu não adicionei, adicionei assim, e então vamos fazer o mesmo com o botão, e deveria ser assim. Ok. Agora, se clicarmos no contêiner, podemos mudar a direção para horizontal bruta. E o conteúdo da justificação será N, e adicionamos a coluna Gap pass 36 Se fizermos com que seja zero, será assim, deveria ser 36, e agora, se verificarmos, podemos ver claramente o espaço entre o design e alcançaremos o que queremos alcançar. Então, se formos aqui, ficará assim e vamos clicar em visualizar as alterações e abrirá em uma nova janela. Portanto, o site também se parecerá com o design. Nesse contêiner, crie um item de linha no centro desta forma. Ok, agora nossa parte do cabeçalho está concluída. Esta parte, então agora o que eu posso fazer é clicar em Publicar. Quando eu clico em publicar, temos uma chamada de energia. Onde você deseja exibir seu modelo? Eu clico nessa condição de anúncio e faço com que ela inclua todo o site. Quero ver esse menu em todo o lado. Agora podemos adicionar mais condições, mas o que queremos fazer é mostrá-las em todo o site. Em seguida, clico em Salvar e fechar e no menu publicar. Podemos ver isso daqui. Ok, agora vou para painel do WordPress e, se formos ao criador de modelos e temas aqui, podemos ver nosso, mas o nome é apenas elemento ou cabeçalho, Hashtag 226, temos que alterá-lo para alterá-lo Podemos clicar em Editar. Então, aqui, clicarei neste cabeçalho definido e, no título, mudarei esse título para cabeçalho, cabeçalho e clicarei em publicar. Então, se voltarmos e verificarmos, ficará assim. Ok. 16. Como criar a seção de herói - Parte 1: Olá, pessoal. Acabamos de projetar o cabeçalho com sucesso. Então, agora temos que continuar o design. Agora eu tenho que ir de página inicial para página inicial, vou apenas para o nosso front-end do site, e agora ele ficará assim Agora, o que posso fazer é clicar em Editar com Elementor. OK. Agora, nas configurações da página, precisamos fazer algumas alterações. Primeiro, temos que alterar o layout da página para o elemento full with. Em seguida, podemos clicar nesse título alto em elemento ou completo com o layout da página, o título não será exibido, mas vamos clicar nesse título em altura para ocultar esse título Então, se eu clicar em publicar e vamos atualizar , ele ainda está lá Acho que isso está no rodapé para corrigir isso, vamos criar um rodapé vazio, então vou para o painel do Wordpress e, no Team Builder, clique no ícone de adição deste Em seguida, fecharei isso e, por enquanto, clicarei nessa configuração de rodapé e alterarei o título para Rodapé, e não vou adicionar Basta clicar em publicar e clicar em Ad Cdition e ele estará em todo o site Então, agora eu clico em Salvar e fechar. Ok, está salvo. Então, aqui podemos ver o site ao vivo. Vamos ver a transmissão ao vivo, então agora não veremos mais o texto do rodapé Então, se o reprimirmos aqui, podemos ver que vai gostar disso OK. Agora é hora de criar essa seção de heróis. Para fazer isso, primeiro precisamos criar um contêiner. O tamanho do contêiner será aqui, temos 90 e aqui temos 500. Deveria ser 590, então vamos aqui, clique na caixa PlusconPlax, clique na coluna de direção e aqui como altura média, vamos fazer OK. Agora mude a direção para a linha e justifique que o conteúdo será a linha de estatísticas. O item estará no OK. Primeiro, vamos adicionar esses textos para fazer isso, vou clicar nisso, adicionar elemento e clicar no título e arrastar o título assim Em seguida, no título, a tag HTML será alterada para H one porque esse é o título principal do site Então vamos copiar esse texto assim. Em seguida, basta passar o texto assim. Então, em sua morte, a tipografia será Aqui, a tipografia é cabeçalho e, no conteúdo, somente essa parte de Hannah Clark deve ser a cor primária, a cor verde Então, vamos tornar o texto colorido em preto e, aqui, adicionarei Open tax é SP, A N, span, closed tag e, novamente, open tag slash span Acabei de criar uma tag DML. Na verdade, temos que adicionar um ID, então vou pesquisar set ID equal, e vamos adicionar ID head title e title. Vamos fazer com que seja como herói, título de herói, basta copiá-lo. Isso é ML e CHS simples , mas avance no CSS personalizado avançado, basta adicionar hashtag e cabeçalho como este. Tudo bem. Agora, isso apenas afetou o design. Agora, novamente, clico em adicionar elemento e clico em adicionar título Quando eu adiciono outro título, ele também é adicionado na horizontal Para corrigir isso, vou clicar aqui e adicionar o contêiner, e vamos remover todas as coisas desse contêiner. Em seguida, arrastarei esse título para dentro do contêiner e arrastarei o próximo título para dentro do contêiner. Em seguida, no layout do contêiner, vamos justificar o centro de conteúdo e a direção será vertical da coluna O alinhamento será o item de alinhamento começará e a lacuna, vamos ver a lacuna, a lacuna é 15, qual pro é Ok, agora temos que mudar esse texto para esse texto, copiar o texto e colocar o ritmo do texto, e vamos mudar essa tag HTM para H três Em seguida, um ladrilho, o alinhamento será à esquerda e tipografia será o subtítulo e a cor será essa cor do texto Você pode ver esses detalhes aqui. Ok, agora vou apenas duplicar esse texto porque não preciso fazer isso ou não preciso adicioná-lo novamente. Eu posso fazer isso, então vou copiar este texto. Este texto será tipográfico como parágrafo e a cor do texto será nossa cor de texto Pase assim e, em seguida, em estilo, vamos mudar isso para parágrafo Agora esse texto está crescendo para a esquerda. Podemos simplesmente corrigir isso adicionando VR. Então, se eu for para o conteúdo, vamos fazer esse STM Lt como P ou parágrafo e aqui podemos definir como vamos fazer assim Vamos adicionar BR assim, depois BR assim. Ok, até agora tudo bem. Sim, então temos que adicionar um botão para adicionar o botão. Vou clicar em adicionar elemento e no botão de pesquisa e colocar o botão aqui. Em seguida, temos que copiar o texto do botão. Funciona comigo no texto e, por enquanto, vamos criar uma hashtag como link no estilo E. Vamos posicionar então a tipografia como botão. Então, vamos ver o tipógrafo de um botão, pressionar o arquivo Figma e ver que seu tamanho é Então, vamos clicar no valor do link juntos para desvinculá-lo e o topo é 22, à direita esse 33, o topo é 22, o esquerdo é 33 OK. Então, o raio do canto será 60, devemos adicionar 60 Em seguida, a cor do texto será secundária e a cor de fundo será essa cor e, por cima, a cor deverá mudar para essa cor e a animação crescerá assim. Até agora tudo bem. Se verificarmos o design, podemos ver um grande espaçamento que aconteceu devido à altura da linha dessas tomadas Para corrigir isso, basta clicar aqui e ver como funciona quando alteramos a altura da linha. Portanto, alterar a altura dessa linha não será uma opção. Aqui, podemos alterar essa linha de altura da linha. Sim. Portanto, a nova altura da linha é 20 no subtítulo, e aqui podemos alterar altura da linha tipográfica para a linha 35 OK. Vamos fazer essas mudanças. Por enquanto, vamos transformá-lo em cabeçalho e vamos para a configuração lateral. Na configuração de tamanho, vá para telefones globais e no cabeçalho, a altura da linha é 35 e o subtítulo, a altura da linha é 26 e clique em Conceber alterações e clique aqui para voltar ao editor Agora, se quisermos, também podemos alterar a altura da linha deste parágrafo dois para fazer isso, podemos simplesmente assim. Se quiser, você pode fazer isso. Vou fazer com que seja como 28. Então, vamos sentar e configurar os telefones globais e altura da linha do parágrafo será 28 e clique em Salvar alterações. Clique em Voltar ao Editor para ir para OK. Agora podemos ver aqui o espaçamento I para corrigir esse espaçamento. Podemos adicionar margem negativa. Clique no parágrafo ou no título, depois clique em Avançar e clique em Vincular valor juntos Então, por cima, com um valor negativo como este. Podemos fazer o mesmo na parte inferior assim. Agora, apenas projetamos esta seção e, em seguida, o que precisamos fazer é adicionar essa imagem. Vamos adicioná-lo na próxima lição. 17. Como criar a seção de herói - Parte 2: Olá, pessoal. Agora temos que adicionar essa imagem de herói. Vamos começar. Antes de tudo, precisamos baixar a imagem. Vou clicar na imagem e aqui veremos Exportar, mudarei a imagem para JPEG e clicarei em Exportar Ok, então vá para PNG minúsculo e adicione imagem ao pequeno PNG. Em seguida, clique neste J BG para baixar a versão otimizada. E agora aqui temos essa imagem. Então agora vou ao Elementor e busco aqui a imagem. Então veremos esse elemento de imagem, e vou colocá-lo assim. Então, aqui está nosso contêiner de texto, e eu adiciono essa imagem fora desse contêiner de texto no contêiner principal. OK. Agora eu clico aqui para editar e aqui podemos escolher a imagem e eu clico aqui, depois faço o upload da imagem otimizada, e para as tags ALT dessa imagem, adicionarei esse texto e, como título, adicionarei esse texto e, em seguida, clico em Silt para adicioná-lo OK. Agora, aqui vou definir a resolução da imagem como completa. Ok, agora nossas imagens são assim, mas é bonita é pequena, então torne-a maior. Podemos selecionar este contêiner e ajustá-lo com. Vamos fazer isso. Vamos ver a peruca daqui. Com esse 559, podemos simplesmente adicionar 559 aqui com fixel e 559 assim ou podemos adicioná-lo Na verdade, vamos adicioná-lo em porcentagem. Vamos fazer com que 50, 50% sejam perfeitos. Agora, se verificarmos o contêiner, a lacuna da coluna é 20. Então, aqui vou clicar no espaço separado para alinhar essa imagem ao lado direito e esse texto será alinhado ao Tudo bem, até agora tudo bem. No entanto, a parte inferior desse contêiner está aqui, mas a imagem está aqui. Podemos fazer essa imagem abaixo, clicar na imagem, adicionar e definir align self as N assim No momento, temos que criar esta seção para fazer isso. Vamos criar uma nova seção. Clique no ícone de adição selecione a caixa plex e coluna de direção será a linha. Então vamos descobrir o tamanho. O tamanho é 200, aqui vamos para Minhightts assim, depois vá para Is dies e no fundo, podemos simplesmente clicar em Clássico e mudar a cor de fundo para essa cor de texto, porque aqui a cor de fundo é a cor do texto OK. Agora, se verificarmos aqui, deve haver um espaço entre essa imagem e o fundo preto. Então, se verificarmos se há uma lacuna passada, para adicionar a lacuna, clicarei nesse contêiner e no valor do link Avançado juntos e, em seguida, adicionarei a passagem superior 30 desta forma. OK. Talvez vamos adicioná-lo, pois 20, 20 será o melhor tamanho, e aqui também. Vamos fazer com que seja 20. E aqui podemos fazer o mesmo. Ok, agora está muito melhor. Agora, para a próxima etapa, temos que adicionar essas seções. Então, vamos salvar as alterações clicando em salvar rap. Ok, agora para esta seção de conquistas, podemos usar o widget de contador no elemento f. Então eu vou aqui e procurarei o contador Aqui temos o widget do contador. Vou apenas adicioná-lo e você verá que quando o adicionamos, há um efeito de contagem. Vamos configurá-lo. Primeiro, temos que adicionar 40 mais, então adicionarei apenas o número inicial como zero e o número final como 240. Então, se quisermos adicionar algo na frente, podemos adicioná-lo ou, se quisermos adicioná-lo por trás, podemos adicioná-lo. Então, precisamos adicioná-lo por trás. Na verdade, vamos começar com 50. Sim. Agora, a duração da animação estará aqui, 2 segundos. Eu vou chegar a 1 segundo. Então, a animação acontecerá em 1 segundo. Então, esses mil milissegundos significam milissegundos. Mil milissegundos significa 1 segundo. OK. Em seguida, temos que adicionar o título. Vou apenas copiar o título. Fiz assim. Então vamos para os estilos E. Antes de começarmos a estilizar em contêiner. No layout, vamos torná-lo centro de alinhamento. É muito melhor. Agora edite o widget do contador e vá para eTyleoTyle. A posição do título será depois que quisermos na frente de, podemos adicionar assim, mas precisamos que alinhamento horizontal seja centralizado assim, então temos que Vamos descobrir a lacuna. Acho que é 20. Sim, é 20, vamos fazer com que seja 20. A posição do número será central. A lacuna numérica, a lacuna do ícone de adição, vamos torná-la como quatro. Sim, é padrão. Vamos fazer com que sejam dois. OK. Números, podemos mudar a cor do texto para nossa cor secundária, que significa branco e mudar a tipografia para Na verdade, ele já está no cabeçalho e não precisamos de traçado ou sombra de texto no título. A cor do texto será branca e tipografia será o botão vamos ver, a tipografia do tamanho do botão será o botão o, e agora ficará assim, e precisamos de mais três deles Vou apenas duplicar e duplicar novamente, duplicar novamente. OK. Agora clique aqui e vamos ver os detalhes. São anos de experiência. Eu fiz isso, e deveria ser nove. O número final deve ser nove e o número inicial deve ser zero, e o final será mais o. Então temos essa taxa de sucesso, clique aqui, altere esse título para taxa de sucesso e aqui no momento , e então a taxa de sucesso é 92 92, e começaremos com 30 Sim. Parece bom. E agora temos que adicionar o último. O último é garantido para os clientes. Deveria ser mais de 5 milhões. Vamos adicionar cinco aqui e vamos fazer com que seja zero. Vamos fazer com que seja um, e aqui temos que adicionar o dólar, então aqui deve estar mais, assim. OK. Tudo bem. Agora temos que alinhar isso corretamente para fazer isso, clicar no contêiner e no layout, podemos clicar nesse espaço entre eles e ele será ajustado de acordo Ok, projetamos a seção com sucesso. Bom. Agora eu tenho outro problema. Não é um problema real. É como uma melhoria. Então, quando passamos o mouse sobre esse botão, cor de fundo é melhor, mas a cor do texto deve ser alterada Portanto, se mudarmos a cor do texto para verde escuro, será muito melhor experiência do usuário será muito melhor, pois os usuários poderão entendê-la melhor. Veja, talvez devesse ser preto. Assim, agora está muito melhor do que antes. Ok, temos que fazer isso nesta seção de cabeçalho. Então, basta clicar em salvar rascunho para salvar as alterações e clicar aqui para editar o cabeçalho. Salve a folha, depois clique aqui e nesse estilo em nosso texto a cor ficará bem. Agora está muito melhor. OK. Agora também aqui, vamos mudar a cor da cor para essa primária. Isso deve ser profissional porque deve ser profissional, se adicionarmos muito texto ou muitas cores, isso não será bom. Ok, agora eu clico em Editar página para editar a página inicial. Ok, agora temos que projetar a seção A. 18. Criando a seção Sobre: Olá, pessoal. Então, vamos começar a projetar. Primeiro, temos que criar a seção. Eu clico aqui e clico na caixa de texto e seleciono a linha de direção da caixa de texto Então, com antecedência, remova a margem e o preenchimento e, se verificarmos aqui, o item entre os tamanhos ou a seção entre os tamanhos é 1220, então vamos ao Marginus Ok. Como primeira etapa, temos que adicionar a imagem, clicar aqui e pesquisar a imagem e adicionar a imagem assim, então podemos ir aqui, tocar duas vezes na imagem. Clique em exportar exportar como JPEG. Se você tiver um fundo transparente, poderá exportá-lo como PNG, mas eu faço isso com JPEG porque não tenho fundo transparente Ok, agora vamos para Tin PNG e Ragan optimize, depois clique no botão JPEG para baixá-lo e clique aqui e agnop Então, vamos copiar esse título e ritmo como o Altex. Ok. Conclate Acabei de adicionar, e agora temos que criar esta seção Para criar esta seção, temos que adicionar o contêiner porque esse contêiner principal sobre o contêiner principal da seção é uma direção horizontal, mas esse texto deve ser vertical. Para fazer isso, vou clicar aqui e adicionar um contêiner como este. Basta adicioná-lo assim. Então eu vou acrescentar com isso. Vamos fazer com que seja como 60 60. Acho que 60 funcionarão. Tudo bem Em seguida, clicarei aqui para adicionar o título. Isso será sobre Hanna Clark, então cole assim Então, vamos adicionar conteúdo antes de fazer qualquer coisa. Então temos que adicionar isso, basta copiar e colar assim. Então temos que adicionar esse texto. Então, basta duplicar este e adicionar o texto assim. E agora temos que ajustar a tipografia. Se não fizermos isso, o design não ficará bom e não poderemos editá-lo corretamente. Clique no primeiro título e faça com que seja DA, Clique no primeiro título gás derretido, H, dois, depois um ladrilho, o sipógrafo estará alinhado com a cabeça e a cor do texto será a cor do texto Ok. Então aqui, vamos ver que a variável é o subcabeçalho Basta clicar aqui e clicar no subtítulo. Se você quiser um tamanho diferente, você pode clicar neste leão de lápis e alterar o tamanho Mas, no nosso caso, não precisamos fazer isso selecionar a cor do texto que você possa alterar a cor do texto a partir daqui. Ok, clique aqui, depois copie o texto e acompanhe o texto desta forma. Em seguida, no estilo, tipógrafo esquerdo de alinhamento será um parágrafo e a cor será a cor Ok. Quando vou para o conteúdo, tenho que mudar isso para parágrafo e essa tag HTML de linha deve ser H três. Então não se esqueça de fazer isso. É muito importante classificar nossa página no mecanismo de pesquisa e isso se refere ao SO da página. Na verdade, analisaremos nosso site COSCO em aulas futuras Então, a partir de agora, quando fizermos isso, isso nos ajudará a tornar nosso site melhor no futuro. Tudo bem Agora, aqui, vamos adicionar margem negativa. A parte superior será assim. Ok. E agora temos que criar esse centro. Se verificarmos nosso design Figma, ele está realmente alinhado corretamente porque precisamos adicionar mais dados Agora, vamos clicar nesse contêiner e fazer com que ele justifique o centro de conteúdo Ok, agora vou duplicar essa parte, e então temos que adicionar esse texto, copiar o texto e colar aqui, depois fazer com que seja H três Então, se verificarmos a tipografia, é botão, então estilo, tipografia, mude para um botão como Em seguida, temos que adicionar essa lista para fazer isso, clicarei em adicionar elemento e pesquisar na lista. Aqui temos, eu posso listar. Vou apenas arrastar e soltar assim. Na verdade, deveria estar aqui, então eu clico em. Antes de editarmos o conteúdo, devemos ir ao estilo e ao texto, vamos tornar o texto colorido como texto , aqui a tipografia será Acho que é parágrafo, é parágrafo. Agora vou copiar um por um esse conteúdo, aqui temos itens, cole assim. Então, para este ícone, clicarei assim e aqui podemos encontrar o mesmo ícone. Esta é a biblioteca de ícones do pontosom. Aqui podemos encontrar esse mesmo ícone. Clique. Acabei de pesquisar, verifique aqui, temos a marca de seleção Eu posso simplesmente clicar em Instalar. Agora vamos ver o tamanho. Seu tamanho é 22 por 22 e a cor é a cor primária. Vamos fazer esses detalhes. Primeiro, vou remover esses dois itens e aqui no ícone, tamanho é 22, depois a lacuna é, vamos ver a lacuna. A lacuna é quatro, faça a lacuna, pois o alinhamento de quatro é regular, a cor é a cor primária Agora podemos clicar aqui para duplicar o item. Agora eu clico assim, depois copio o que fica assim. Então Dubltd copy this leva dois, e agora temos que alterar o tamanho intermediário para fazer isso, vou para Aqui temos espaço entre, vamos ver o espaço entre eles. É dez, vamos fazer com que seja dez. Tudo bem, até agora tudo bem. Em seguida, temos que adicionar essa cotação ou código. Vou apenas copiar o código e clicar na citação de pesquisa do elemento do anúncio. Agora, aqui temos o código de bloco basta arrastar e soltar esse elemento. Em seguida, adicionarei a citação e não precisamos do ícone do tweet ou não precisamos do autor. Ok, a tela mudará para cotação. Vamos estilizar um estilo. A cor do texto será essa cor do texto e a tipografia será Na verdade, temos que mudar a tipografia. A cor do texto será texto e aqui temos a data a cor do código será colorida e temos que diminuir o tamanho. Assim, na verdade, precisamos desse tipo de aspa a aspa. No entanto, não temos esse design no elemento de vamos ver, não temos esse design, não temos esse design, então vamos adicionar a cotação e podemos fazer o alinhamento porque gostamos muito mais do centro de alinhamento, mas vamos fazer o alinhamento à esquerda e um estilizado, mas vamos fazer o alinhamento à esquerda e podemos alterar a lacuna, então vou fazer a lacuna então vou Tipografia, mude para parágrafo e clique aqui. Então, no estilo E, faça com que seja a Itália assim. Ok. Agora está bom e no código, podemos reduzir o tamanho do código. Vamos fazer com que seja assim. É muito pequeno. O tamanho quatro será o melhor tamanho. Então, o que precisamos fazer é criar esta seção Encontre-me online. Para fazer isso, temos que usar o layout horizontal. Eu clico aqui e no contêiner, vou colocar um recipiente como este. Então, avançar é difícil e a direção será crua e justificar que o conteúdo será o centro Ok. Agora vou apenas duplicar esse texto e colá-lo dentro, assim Em seguida, vamos alterar o texto para este botão e seu tamanho, colá-lo assim em mistyle tipography is button. Ok. E então temos que adicionar o ícone de mídia social. Ícones sociais de Wills. Então, aqui eu tenho ícones sociais, adicione-os. Precisamos adicioná-lo dentro desse contêiner. Na verdade, ele já foi adicionado ao contêiner, mas esse texto deveria ser mais ou menos assim. Em seguida, clico no contêiner e faço com que ele alinhe o centro do item assim Ok. Então temos que descobrir o tamanho intermediário, então é 15, então podemos adicionar facilmente Gap pass, coluna Gap pass 15. Assim. Ok, agora temos ajustar esse design para fazer isso, vamos descobrir os detalhes. Portanto, é 51 por 51 e o raio do pedido é 30. Ok, vamos adicionar esses detalhes. Clique aqui Por enquanto, vamos manter o ligão social e a forma em círculo e as colunas alinhamento automático, no centro, uma mudança de estilo, as cores oficiais a serem moldadas aqui altere a cor primária como essa cor e a cor secundária será, na verdade cor secundária será a cor branca como Então, podemos adicionar o tamanho que 51 51 deve ser. O ícone não será o 51. Vamos ver o tamanho do ícone. O tamanho do ícone é 21. Não vamos adicionar o tamanho do ícone e vamos adicionar preenchimento. Se verificarmos o preenchimento, preenchimento estará no fixo 15 desta forma O espaço entre será seis, faça com que seja seis. Qual é o raio do ícone? Então, vamos mudar sua cor para essa cor assim e a cor secundária será essa cor de texto Agora está muito melhor. Se quisermos, podemos aumentar o tamanho do ícone. Vamos fazer com que seja como 21. Agora, no conteúdo, vamos adicionar primeiro o ícone que vinculamos. Clique em Biblioteca de ícones e pesquise Link in. Aqui temos um link no ícone. Clique em Inserir e aqui o link do ícone social e na opção de link, podemos adicionar abrir em Nova Janela, que significa que quando o visitante clicar no botão, essa pessoa será redirecionada para esta página de mídia social em Nova Aba Em seguida, o segundo ícone, temos o Facebook e o Facebook como segundo Licon Atualmente, não temos página do Facebook ou página do LinkedIn nem nada, então vou apenas adicionar o URL do site do Facebook da página do Facebook, e aqui adicionamos o link no URL do site, mas no seu caso, mas no seu caso, você deve adicionar o URL da página em que você é disponível para o cliente ou, se você criar este site para coach de negócios em o coach de negócios, links de mídia social ou, se você criar este site para autor, consulte os detalhes da mídia social do autor , se você entender , temos o ícone do YouTube. Mas aqui, temos o Instagram, pesquise no Instagram e adicione, em seguida, vou ajustar o Instagram R Ok. Na verdade, esse tamanho, vamos fazer esse tamanho maior como 22. Deve ser um pouco grande, vamos chegar a 24 e trocar a almofada por. Vamos fazer com que seja apenas 222, assim. Agora que temos aquela seção sobre a animação dela, vamos crescer assim. Projetamos com sucesso a seção sobre como esta. Agora posso clicar em Saraft e passar para a próxima seção 19. Criando a seção de serviços: Olá, pessoal. Agora temos que projetar esta seção de serviços. Então, vamos começar. Eu vou ao editor Elementor e clico em Adicionar novo contêiner e clico em Flexbox e aqui defino a coluna como coluna de direção Ok, agora temos que adicionar o tamanho entre um e um. Vamos avançar e na margem de um a 20, o topo da margem é de um a 20. OK. Agora, o que precisamos fazer é adicionar esse texto, basta copiar o texto e clicar aqui, depois adicionar o título Em seguida, basta passar o título desta forma. Em seguida, um estilo, torne-o um centro de linha e tipografia será o cabeçalho e a cor será a cor do texto Então temos que adicionar essa segunda parte ou o subtítulo, copiar o texto e aqui no conteúdo, manter a tag HTML como H dois Agora vou duplicar esse cabeçalho, depois torná-lo H três e colar assim Em seguida, um bloco, a tipografia será um subtítulo como este. Vamos ver o tamanho convidativo, o tamanho convidativo é dez Vamos fazer com que esse contêiner tenha o tamanho de um convite de dez. O tamanho do corvo será dez. Na verdade, já são dez. Ok, agora temos que adicionar esta seção. Para adicionar esta sessão, podemos usar grid. Então eu clico em adicionar elemento e apenas pesquisar na grade ou no sublayout, podemos ver a grade Vou apenas copiá-lo e colá-lo assim. Agora temos o design da grade e aqui, você se lembra que neste contêiner, adicionamos a linha como dez, mas no nosso design Figma, é 30, o que significa que temos que adicionar mais 20 Então, para fazer isso, clico na grade e no valor do link Avançado l e adiciono o top pass 20 assim. OK. Agora vamos ver que temos três colunas. Então, em layout, grade, não temos média com redowtline, não precisamos sem Vamos continuar sem linha por enquanto, e a coluna será três e a linha será duas, e as lacunas serão, acho que são 20 por 20. Sim, é 20 por 20. Vamos adicionar lacunas de 20 por 20. OK. Agora podemos adicionar conteúdo dentro dessa grade. Para fazer isso, clico nesse ícone de adição ou posso simplesmente arrastar e soltar um contêiner dentro dessa coluna e a margem e o preenchimento do contêiner serão zero por enquanto Sua direção deve ser vertical. Vamos fazer com que a direção seja vertical e o ificonen vamos fazer isso Vamos fazer disso um centro por enquanto. Em seguida, podemos adicionar o conteúdo. Primeiro, temos esse ícone. Clique nele e clique em Exportar. Vamos exportar como JPG, clicar no vetor de exportação e, em Tiny PNG, basta adicioná-lo assim, reduzir em cinco tamanhos, depois vir aqui e eu aqui está um m, depois adicionar a imagem assim e clicar nela, depois arrastar e roubar o ícone, então eu copiarei esse texto e LTag será esse texto, altere o título para esse texto Agora temos que adicionar o título do serviço, copiar o título e clicar em Plasicon e aqui o título, a tag HTML do título será H três, coloque o texto e, em seu estilo, torne-o um centro de linha e a tipografia será o subtítulo coloque o texto e, em seu estilo, torne-o um centro de linha e a tipografia Acho que é subtítulo. Sim, é subtítulo, então e a cor? Cor é a cor do texto mude a cor para a cor do texto, duplique-a assim, então eu manterei a tag HTML como H três, copie esse texto e essa tipografia de texto é No texto e no bloco, altere a tipografia para botão porque ela é menor Novamente, posso duplicá-lo, depois copiarei esse texto e acompanharei o texto desta forma, depois transformarei a tag STL em parágrafo e, em seguida, no estilo, alterarei a tipografia para Projetamos com sucesso o primeiro serviço e vamos ver o tamanho pretendido O tamanho do convidado é seis e, no topo, 40. Nós, a parte inferior inferior, é 40. Vamos adicionar esses detalhes. Para fazer isso, clico no contêiner e no contêiner. Eu acho que uma lacuna será uma lacuna de dez, não de uma lacuna. Sim, a fila é dez. OK. Agora, em um piscar de olhos, podemos adicionar preenchimento para passar de 40, à direita como seis e abaixo como 40, à esquerda como seis, assim OK. Então desaparecido. Agora temos que adicionar o raio do canto. O raio do canto é 20. Vamos fazer com que faça aquele arquivo a bordo, faça com que o raio do canto seja 20, e agora temos que adicionar o tipo de borda, na verdade, não o tipo de borda, bob shadow, clique neste ícone e vamos ver os detalhes da sombra Aqui temos sombra projetada, então o desfoque é quatro e a posição X é Vamos encontrar esses detalhes. Horizontal será zero, vertical será zero. Desfoque é desfoque é quatro cores, clique aqui e aqui, a cor é essa, clique aqui e aqui selecione Css, e quando selecionarmos Css, podemos obter o chd RGB copiá-lo e colá-lo assim Agora é o mesmo que o design do Figma. Agora, o que precisamos fazer é selecionar o contêiner e o ling e depois duplicar. Então, novamente, duplique. Quando o duplicarmos, ele preencherá a grade Veja com bastante facilidade. Vou duplicar isso por mais três vezes porque temos seis serviços como esse Agora vou adicioná-los , então vamos adicionar um por um. Em seguida, temos líderes, copie o texto, pagine o texto aqui, copie esse texto, cole o texto aqui, copie esse texto, cole o texto aqui Quando criamos uma estrutura, podemos simplesmente duplicar e criar facilmente o site Depois temos que mudar a imagem, clicar aqui e em Exportar, JPG, clicar em Exportar vetor. Na verdade, vou baixar as imagens e depois posso enviá-las. Quero dizer, reduza o tamanho e faça o upload deles. Depois disso, só preciso adicioná-los a todos os serviços. Tudo bem. Agora vou até o Tine BNG e abro o conjunto de imagens aqui. Seleciono imagens, basta adicionar aquelas imagens como esta, duas, três, quatro, cinco, seis, temos seis Agora eu clico neste botão JPG para fazer o download. Todos eles. OK. Agora, aqui, eu posso ver essas imagens de download. Vou selecionar todos eles e clicar nesta imagem, clicar em OtoosImage e posso simplesmente arrastar e embrulhar imagens Depois que eles são carregados, basta escolher a imagem e clicar em Selecionar. Na verdade, eu tenho que adicionar o texto alternativo. Sempre adicione texto alternativo, basta copiar esse texto e colá-lo como o selecionado. E aqui acho que já copiei o texto. Agora temos que alterar o conteúdo desta seção. Primeiro, vamos usar o so, basta clicar aqui e as imagens serão carregadas. Aqui está a imagem dessa imagem, temos que adicionar a tag ALT como fizemos antes e clicar em Consil, depois temos que atualizar o conteúdo, alterar o título, adicionar um título adicionar uma pequena descrição como esta e aqui temos três linhas, mas aqui temos apenas duas O que podemos fazer é simplesmente adicionar colchete BR e fechar o colchete como este Quando fazemos isso, ele faz uma quebra de linha no STM, então esse texto vai abaixo Agora temos que mudar o serviço do Mindset Master Program, basta selecioná-lo, colar , colar, selecionar e colar esses tanques, copiar e colar, depois copiar a pequena descrição e colá-la assim Então temos que fazer isso para o próximo. Então aqui, copie o tanque, cole os tanques, assim, selecione-o, então aqui, vamos lá. Basta copiar o desenho da figma e colar o desenho. Ok, agora temos um problema. Então, quando verificamos esse texto aqui, podemos ver muitas tags. O motivo é que eu simplesmente colo isso assim, mas não é a maneira correta. Eu tenho que copiar o texto e colá-lo aqui dentro, não aqui. Se colarmos assim, esse problema não acontecerá. Acho que o resto deste texto funcionará bem, e temos que acrescentar que estamos aqui para manter as três linhas do parágrafo e a última, basta alterar o texto e alterar a imagem, clicar neste ícone e provar o ícone, clicar em CLC agora temos esse texto neste e temos que agir B aqui Projetamos com sucesso a seção de serviços e, em aulas futuras, podemos tentar ou adicionar algum efeito de HA e animação. Por enquanto, basta clicar aqui e clicar em Savedra 20. Como adicionar botões à seção de serviços: Temos que adicionar esse botão. Então, para fazer isso, vamos ao Editor elementar e, se rolarmos até aqui, teremos o mesmo botão Então, clique com o botão direito e clique em Copiar. Então venha aqui e aqui está a seção em que queremos adicionar o botão, selecione o contêiner, clique com o botão direito e pronto. Agora temos o botão aqui. Então vá para East tile em East tile. Defina a posição como centro. Ok, agora só temos que copiar esse texto e colar o texto. Então vá para o conteúdo e passe o texto assim. Então, para ter certeza. Vamos verificar o preenchimento. Então é 22 por 33. Então, vamos aqui e vamos dar uma olhada aqui. Também é 22 por 33. Ok. Agora precisamos ter um espaçamento. Se marcarmos a opção Limpar, o espaçamento é 30 Podemos clicar facilmente no botão, avançar, remover a margem e o preenchimento e, em seguida, adicionar a margem superior a 25, porque na verdade já deveria ser 20 porque já temos dez como espaçamento Agradável. Agora, o que precisamos fazer é criar essa seção de revisão. Vamos criá-lo na próxima lição. 21. Criando a seção de avaliações: Olá, pessoal. Agora temos que criar essa seção de revisão. Então, vamos fazer isso. Vou ao editor de elementos e, primeiro, precisamos criar o contêiner, clicar nesse ícone de adição e clicar em Flexbox Então aqui eu clico na coluna de ação. Ok, agora temos entre os espaços de um a 20, então vamos adicioná-lo, ir para avançar, remover a margem e o preenchimento padrão e adicionar a margem superior e passar de um a 20 OK. Então vamos ao Figma e no design Figma, a altura é 600 Então, vamos adicioná-lo, clicar no contêiner e, no layout, a altura mínima será 600. OK. Agora, como primeira etapa, vamos adicionar essa imagem de fundo. Para fazer isso, clicarei na imagem assim, selecionarei a imagem e, em seguida, clicarei no botão Exportar. Ok, está inativo e agora eu vou para o tiny png.com e vamos fazer o upload para reduzir o tamanho do arquivo Em seguida, clico nesse botão para fazer o download. Agora, o que vou fazer é acessar nosso site elemental e aqui ir para Estyle e clicar no tipo de plano de fundo como clássico, depois clicar nesta imagem de Joe e fazer o upload da imagem assim Em seguida, copiarei isso neste texto como texto ALT desta imagem. Então, vamos adicioná-lo assim. Em seguida, clique em Ocultar o nas configurações, faça com que a imagem fique em posição completa. O anexo central será o padrão, ou basta fazer com que seja como corrigir e repetir, sem repetir o tamanho, capa A tela será coberta assim. O anexo não está fixo. O anexo deve ser de rolagem e o tamanho da tela será automático ou podemos adicionar uma capa. Ok, agora temos o histórico. Então, a seguir, o que temos que fazer é adicionar este texto. É bem fácil. Podemos simplesmente clicar aqui e em uma manchete como esta. Depois é só ir aqui, copiar os tanques e pagar o texto aqui. Então, vamos duplicar esse título, e agora vamos copiar essas imagens e colar um texto como este, depois vamos alterar a tag HTML para H três E agora vamos para Estyle e aqui selecionamos o subtítulo, clicamos nessa fonte global de tipografia e definimos o subtítulo, depois mudamos a cor para essa cor E temos que fazer as mudanças de estilo desse cabeçalho para fazer o Estilo selecionado e alinhá-lo ao centro do cabeçalho, então aqui, cor do texto, temos que fazer esse alinhamento ao E não só isso, vou clicar no contêiner principal e no layout do centro de alinhamento dos itens desta forma Ok, aqui, vamos ver no meio, eu digo dez. Aqui, parece muito próximo, então vamos consertá-lo para consertá-lo. Podemos simplesmente clicar assim e clicar nesta pensão. Então, vamos mudar a altura da linha. Vamos fazer com que a altura da linha seja de 50 a 50, adicione-a como 50, e o que precisamos fazer é clicar aqui e selecionar o cabeçalho, então podemos ir para Global Bonds e editar o cabeçalho e adicionar linhas 50 assim. Agora clique em Const changes e clique aqui ou vá para o editor OK. Agora temos que adicionar o PADint superior e inferior para fazer isso, clique aqui e clique nesta seção e, em seguida, selecione o cabeçalho e pressione tudo para encontrar o tamanho intermediário, é 70 E quanto a isso? Também é 70, clique no contêiner com antecedência no preenchimento superior 70 e a parte inferior será 70 OK. Agora, o que precisamos fazer é criar essas avaliações. É bem simples e, antes de criá-lo, precisamos adicionar o tamanho intermediário. Aqui, no meio, o tamanho é 30. Talvez possamos adicioná-lo à margem. Então, vamos pular isso por enquanto. Então, para adicionar comentários, eu clico em Adicionar elemento, e aqui vou pesquisar o comentário Ok, aqui temos os comentários. Acabamos de adicionar assim. Ok, agora temos três avaliações. Por enquanto, vamos manter todas essas três avaliações fictícias. E aqui, vamos ver, primeiro, vou selecionar essa caixa de revisão e agora ver o que temos que ajustar. Então, como primeira opção, temos lados por vista. Aqui, temos um, dois, três, três lados, então eu apenas clico em três e deslizo para rolar, vamos fazer com que seja como um, não dois, um. Então, será rolagem após uma. Ok, agora com o padrão e com uma opção adicional, não precisamos de setas porque não há setas Se quiser, você pode manter as setas e a reprodução automática, velocidade de reprodução automática 5.000, o que significa 5.000 milissegundos em segundos, são 5 segundos OK. Agora, o loop infinito será sim, pressione como será sim, pressione a interação será sim. OK. E podemos adicionar a carga à média da carga. Minha avaliação não está presente na estrutura do site, ela não será carregada até ser exibida no Design. Ok, agora temos que ir para Estilsoets. Antes de irmos para Estes, vamos adicionar avaliações reais. Vamos adicionar detalhes reais. Primeiro, removerei esses dois itens e manterei apenas o item um. E primeiro aqui, temos que escolher a imagem. Para fazer isso, eu vou aqui e vou arrumar isso. Clique nesta imagem, clique nesta imagem, clique aqui, selecione todas as três e, em seguida, clique em Exportar três camadas, e ela será baixada como C. Então eu apenas clico nela. Estou usando o Mac. Se você estiver usando o Windows, basta clicar com o botão direito do mouse e extraí-lo. E aqui temos a revisão Emages. Então, vamos ao Tiny PNG e adicione essas avaliações. OK. Agora vou baixar três como este. OK. Agora eu tenho L de três avaliações. Você verifica o nome desta imagem de avaliação, é apenas um nome aleatório. Assim, podemos adicionar o nome real dessa pessoa a essas imagens. Isso ajudará a classificar essas imagens no Google e também será uma forma profissional de mostrar nossas imagens Para fazer isso, basta clicar aqui e copiar esse nome, e essa é a melhor prática. Então eu virei aqui com um nome assim, e farei o mesmo com o resto das imagens. Ok, agora nossas imagens estão prontas, então eu destaco todas elas, e vamos ao nosso site e clique aqui. Depois, basta arrastar e soltar para enviar essas imagens para o nosso site. E aqui vamos nós. Agora, aqui, vou copiar este título e testá-lo como ALT e clicar em CLC agora temos que adicionar o nome, para adicionar o nome, vamos destacar e copiar o nome Depois do nome, temos que adicionar o título, copiar o título, colar o título aqui e a avaliação será para você. Eu posso, e a avaliação será para você não precisamos de um ícone de mídia social como esse, então vou removê-lo. E então o link ficará vazio. Então temos que adicionar esse texto e passar o texto assim. Ok, agora temos a primeira análise. Agora, o que eu posso fazer é duplicar essa avaliação por mais duas vezes e clicar assim, então primeiro vamos adicionar a imagem Essa deveria ser a imagem. Adicione a tag ALT à imagem. OK. Agora aqui, copie o nome. Assim, copie o título assim, classificação será cinco e copie esse texto assim e cole assim. Então, se você quiser uma classificação como três, você pode simplesmente adicioná-la como três, mas adicionar três não é bom para os negócios, então vamos adicioná-la como cinco. Ok, agora temos que editar o terceiro. Clique aqui, clique em sim e adicione assim. Em seguida, edite o título, adicione o título e passe o título desta forma. Em seguida, clique aqui para adicionar o título. Esse é o nome. Esse é o título. Ok, então adicione a avaliação, adicione-a assim. Ok, agora temos todas as três avaliações. Vamos corrigir esse problema de design. Para fazer isso, eu vou para Estyle on Estyle. Vamos descobrir o espaço entre eles. Selecione uma dessas avaliações e pressione Alt sobre a próxima avaliação , são 20 espaços de direitos entre 20 e borda com, vamos torná-la zero. Não precisamos de fronteira. Em seguida, o raio da borda, vamos ver que o raio da borda é dois e, em seguida, o padrão superior e inferior é dois e a esquerda e a direita Então, vamos adicionar esses detalhes, o padrão, clicar aqui, depois aqui, top 20, direita, nove, inferior 20, esquerda nove. OK. Agora temos que adicionar a cor de fundo. Na verdade, podemos adicionar cor de fundo ao cabeçalho. Vamos mantê-la como cor padrão. Podemos ver um separador. Se você quiser, pode mostrar, mas eu não vou mostrar, então amarre à altura. E agora, no texto, essa cor do texto será a cor do texto e a tipografia será Mas vamos ver a tipografia. Aqui, a tipografia é semi wall de sentido aberto 18. Vamos adicionar esses detalhes. Nós, o parágrafo e família, somos opensans 18 wid semivol assim, então É 30. A altura da linha é 30. OK. Então, a cor do texto do título será essa cor e vamos ver a tipografia tipografia é aberta sem o normal 16. Vamos fazer isso. Primeiro selecione o parágrafo e, em seguida, clique neste ícone de edição tamanho 16, o que é normal Não é 30 assim. Ok, agora temos que ajustar as imagens. O tamanho da imagem, vamos descobrir o tamanho da imagem. Então é 92. Veja, o tamanho da imagem é 92, então vamos adicionar 92. OK. Agora vamos aqui e, na verdade, vamos aqui. Lacunas no raio da fronteira, vamos mantê-las. Na verdade, temos que adicionar a lacuna. A lacuna entre a imagem e o texto é 15, então vamos adicioná-la como 15 e não precisamos adicionar raio de borda e ícone Vamos descobrir o ícone. Portanto, o tamanho do ícone é 23 por 22. Vamos fazer com que seja 22. Não, esse ícone é sobre um ícone de mídia social, não precisamos adicioná-lo, então simplesmente ignore-o. Na avaliação, o tamanho é 22, e vamos descobrir que o espaçamento é, vamos ver, vamos nove Vamos fazer com que seja como dez. Sim. Vamos fazer com que seja como dez. OK. Então a cor é, vamos descobrir a cor. Aqui está a cor. Copie o código de cores e clique aqui, depois enfrente o código de cores desta forma. Tudo bem. Agora está muito bom. Aqui, temos um problema. Isso não está na mesma linha. Podemos corrigi-lo facilmente removendo essa lacuna. Vamos reduzir a diferença. Então, vamos fazer com que Gap passe das nove. Agora está parecendo bom. Então, temos um texto Alteramos o texto da revisão? Não, aqui temos o texto da resenha definida, clique na tipografia e a cor também será a cor do texto como esta Ok, agora o que temos que fazer é adicionar essa paginação ou alterar o design dessa Para fazer isso, acesse navegação na navegação. Vamos ver essa paginação com tamanhos 15 por 15 e espaços 220. Então, vamos adicionar 15 é o tamanho, espaços 220. Então, a cor é cor primária e a cor ativa é a cor do texto. Veja, muito bom. Veja? Agora, o que só temos, na verdade, é adicionar espaçamento. Se verificarmos este contêiner e aqui, o espaçamento bruto é dez, o que significa que temos que adicionar mais 20 porque o espaçamento entre eles é 30 Então, para fazer isso, o que podemos fazer é ir aqui. Clique aqui e em Avançar a margem superior a um traço até 20, e agora aqui temos 30 do tamanho Ok, agora o que temos que fazer é centralizá-los para fazer isso, clicar neste contêiner e aqui dizer justificar o conteúdo como centro Ok, agora está parecendo muito bom. Portanto, projetamos com sucesso a seção de visualização. No entanto, posso ver que aqui está o espaçamento, vamos tentar corrigi-lo Não precisamos desse espaçamento. Sim, temos espaçamento entre eles. Vamos tentar consertá-lo. Vamos para um contêiner. Vamos fazer com isso 100%. Sim, quando adicionamos 100%, isso foi corrigido e agora está muito bom. Ok, agora clique em salvar enxerto para salvar a alteração. 22. Projetando a seção de contato: Olá, pessoal. Agora temos que projetar esse ctáxon para fazer isso Vamos começar do zero. Primeiro, vou clicar nesse quadro e vamos até esse layout de grade e desmarque esse botão de altura, clique nesse botão mostrar para mostrar a grade E aqui temos uma grade de 12 colunas e seis para esta seção e seis para esta seção. Temos que adicionar uma coluna que tenha 50% para este texto e 50% para o formulário. Então, vamos fazer isso. Aqui, primeiro, clique no ícone Li plus, depois clique em Flexbox, e aqui temos que adicionar a linha de direção E aqui, no layout avançado, vamos adicionar 1224 top e um estilo, clicar no tipo de fundo e alterar a cor para essa cor primária. OK. Agora temos que adicionar esses textos. Vamos adicionar esses textos para fazer isso. Podemos clicar aqui e simplesmente adicionar o título como este e ir para o estilo, alterar a cor do texto para branco e a tipografia será o cabeçalho e o alinhamento será à e a tipografia será o cabeçalho e o alinhamento será E no conteúdo, vamos adicionar esse texto assim e depois colá-lo assim. Tenho que adicionar a linha aqui para fazer isso. Podemos simplesmente adicionar uma tag BR como esta. E se você ver que essa parte superior e a parte inferior deste texto têm dois tipos, basta clicar aqui e alterar a altura da linha. No meu caso, é 50. Se você tem menos de 50 ou isso não parece bom. Você pode clicar em Gerenciar telefones globais e, aqui, adicionar a altura da linha e clicar em Salvar alterações. Agora vamos voltar e, a seguir, o que temos que fazer é duplicar este, clicar em duplicar e, quando duplicarmos, ele será exibido dessa forma porque selecionamos Então, para corrigir isso, clico em adicionar elemento e adiciono novo contêiner. E para este contêiner, removerei todas as margens e preenchimentos e, no layout, adicionarei a largura como 50% Então eu posso adicionar esses itens dentro desse contêiner assim. Ok, agora ele tem 50% do tamanho. Outro texto. Clique aqui e vamos mudar o estilo para o subtítulo. Vamos copiar o subtítulo daqui e colá-lo assim OK. Agora vou mudar essa tag HTML para H três. Em seguida, clique com o botão direito do mouse e duplique esse texto novamente. Em seguida, vamos adicionar esse texto de parágrafo, copiá-lo e colá-lo assim, depois alterar a tag STML para parágrafo para P e, em seguida, no estilo, alterar a tipografia para parágrafo, Então, o que precisamos fazer é adicionar esses ícones para fazer isso. Vou clicar aqui e pesquisar a Lista aqui, temos a lista de ícones, então vou apenas adicionar uma lista de ícones como esta. Em seguida, removerei os ícones desnecessários e clico aqui. Em seguida, os textos da lista de ícones serão esse texto basta copiar esse texto e o ícone será essa marca de seleção Basta pesquisar, verificar e aqui vamos nós, aqui vamos nós. Temos essa marca de seleção aqui. Então, aqui, podemos ver essa mesma marca de seleção e clicar em OK, não tenho certeza porque no estilo do ícone, a cor é essa cor de fundo Vamos fazer com que fique branco assim. OK. Agora vamos adicionar o conteúdo do Earl antes de editarmos qualquer espaçamento ou estilo Duplique isso duas vezes e passe os tanques. Então, temos que copiar este, colocar os tanques em fases. OK. Agora temos que adicionar esse texto, basta copiar o texto e duplicar este e colocá-lo no fundo assim Em seguida, cole esse texto. OK. Agora, o que precisamos fazer é adicionar tamanho. Primeiro, temos que descobrir a altura total desta seção ou podemos simplesmente adicionar 30 como parte superior e inferior, então podemos crescer a partir daqui. No entanto, vamos adicionar a altura mínima, então eu clico aqui e aqui temos a altura mínima como 851, então vamos clicar neste contêiner principal e na cadeia de layout Altura mínima até 851 Em seguida, um item de linha será centralizado. OK. Agora vamos mudar esse eTylet fazer isso, vá para Estyle e em Estyle vamos descobrir em que tipo de estilo o tamanho do ícone é 22 e o espaçamento é quatro, vamos adicionar esses detalhes sobre o tamanho do ícone é 22, a lacuna é quatro e o alinhamento será na posição vertical esquerda, não precisamos Vamos fazer com que seja zero, e pelo menos o espaço entre eles será, vamos ver dez. Vamos adicionar dez como espaço entre eles, então o texto será tipográfico e a cor do texto será essa cor secundária, pois não precisamos Ok, projetamos esta seção com sucesso , agora temos que criar este formulário. Para fazer isso primeiro, temos que criar um contêiner, então vamos clicar aqui e clicar em adicionar elemento e aqui apenas um contêiner como este. Vamos adicionar assim, então a largura do contêiner será de 50%. OK. Agora, pode alterar a cor de fundo para branco em cada ladrilho. Clique aqui, a cor do tipo de fundo será branca e os cantos estarão dois vazios. Então, a bordo, o raio da fronteira será dois. OK. Agora, aqui temos que adicionar isso, apostar a partir daqui e clicar aqui e adicionar o título, depois no texto e, em seguida, alterar o DML de volta para o parágrafo e, em um estilo, o alinhamento fica apostar a partir daqui e clicar aqui e adicionar o título, depois no texto e, em seguida, alterar o DML de volta para o parágrafo e, alterar o DML de volta para o em um estilo, o alinhamento Acho que é e a tipografia será parágrafo e a cor será essa cor de texto Agora temos que adicionar o preenchimento. Vamos descobrir o preenchimento Clique aqui e a esquerda e a direita são 20 e a parte superior inferior é 30, vamos adicionar esses detalhes Para adicionar esses detalhes, selecionarei o contêiner. Recipiente adiantado na margem e acolchoado na parte superior, é 30, 20, inferior, 30, esquerda 20 Ok, bom. Agora temos que adicionar esse formulário. Para fazer isso, basta clicar aqui e pesquisar um formulário como este. Em seguida, basta soltar o formulário desta forma. Agora temos os campos do formulário. Então, vamos adicioná-los um por um. Primeiro, temos o nome completo. Acabei de copiar o texto e, no nome, o tipo de texto será texto e o rótulo será nomeado. Basta adicionar o nome do local onde a solda será nomeada com o necessário e clicar nesse ícone obrigatório E aqui vou clicar nesse rótulo de exibição para ocultar, que os rótulos não sejam exibidos. Portanto, serão apenas espaços reservados. Agora que temos e-mail, basta copiar o texto e entrar aqui no e-mail, o tipo será e-mail, a etiqueta será e-mail e o espaço reservado será e-mail é campo obrigatório Então temos uma mensagem por enquanto, vou removê-la e agora clico em adicionar item, e o que temos? Temos que adicionar o telefone. Então, basta copiar o texto e colocar o texto aqui, então o espaço reservado será, então teremos que alterar esse tipo para um número como este, não um número, deve ser t TES. OK. Em seguida, temos que adicionar essa empresa, copiar esse texto, e eu vou apenas duplicá-lo a partir daqui, e aqui o tipo será texto e o rótulo será composto e o espaço reservado será empresa, se Ok, não é obrigatório, mas o número de telefone é obrigatório. Agora vou adicionar esse rótulo, basta copiar o texto e clicar em adicionar aqui, altere para SMS no SDMLte assim Vamos continuar assim por enquanto. Agora temos que adicionar essa caixa de seleção para fazer isso. Podemos clicar no item do anúncio e alterá-lo para a caixa de seleção e o rótulo da caixa de seleção será essa opção, agora temos que adicionar a opção Agora, vamos adicionar essas caixas de seleção primeiro, copiar esse texto e colá-lo assim. Em seguida, copie esse texto, cole assim, em seguida, copie isso, cole assim e, em seguida, copie esta tomada, cole assim, depois copie esse texto e cole assim. Agora, aqui você pode ver o título não está aparecendo para corrigi-lo, podemos clicar no item do anúncio e defini-lo como HTML Então, aqui podemos adicionar apenas texto HTML. Vou falar sobre isso. Na verdade, eu deveria ser esse objetivo principal texto de treinamento aqui, adicione-o assim Ok, agora marque esta lista embutida para fazer com que a lista fique assim e vamos cuidar do design depois de adicionar RFields, então temos que adicionar esta caixa de mensagem ou as áreas de texto para fazer isso clique em adicionar Deleon e altere o texto para a área de texto, então o rótulo serão Assim, o lugar vendido será esse texto e ele não é obrigatório. Ok, agora temos o formulário completo e o texto do botão deve ser solicitação de envio de solicitações. Então, vamos aqui e altere o botão enviar para enviar solicitações. Ok, agora temos que adicionar o It 23. Criando o formulário de contato: Olá, pessoal. Agora temos que adicionar o Esty, clique neste ícone de lápis para adicioná-lo Agora vamos ao Estilo Esty.O, a lacuna da coluna, não precisamos da lacuna da coluna, mas precisamos da lacuna da linha Vamos ao elemento de design e descobrir a lacuna entre linhas. São 15. Vamos adicionar uma lacuna como 15. A lacuna da coluna é que, se tivermos campos on-line como o primeiro nome aqui e o segundo nome aqui, temos que considerar a lacuna entre esses campos horizontais, mas, nesse caso, não temos esse tipo de campo em nenhum lugar. Digamos que 15. Ok, agora o rótulo é espaçamento, podemos ignorar essa parte do rótulo, e agora aqui temos o campo STML Então, no campo STML, o espaçamento já parece bom, então a cor será, na verdade, temos que mudar a A cor é essa cor, basta copiar o código de cores e colocar esse código de cores assim. Em seguida, no campo STML, coloque também essa cor desta forma A tipografia é parágrafo, então temos que fazer a edição nos campos Nos campos, as cores do texto essa cor do texto será essa cor do texto, então a tipografia será a cor então a tipografia será a parágrafo e do plano de fundo, mantenha a cor do plano de fundo branca porque a cor do primeiro plano também branca porque a cor do primeiro plano Ok, agora temos que descobrir a cor da borda. Então, a cor da borda é, acho que também é a cor que já tínhamos. Então essa é a cor. Na verdade, não é dessa cor. Basta copiar esse código de cores e vamos aqui. Em seguida, na cor da borda, adicione essa cor. E agora a largura da borda, vamos descobrir as larguras um e, em seguida, o raio da borda será OK. Vamos adicionar seis como raio da borda Muito bom. Agora, o que temos que fazer? Agora temos que ir até botão no botão, a posição ficará assim, então a tipografia será botão e o tipo de borda será nenhum Não precisamos de um tipo mais ousado. A cor de fundo é essa cor primária na cor do foco será essa, cor flutuante como OK. Na verdade, temos que mudar a cor do texto, assim. OK. Agora, não precisamos nos preocupar com o botão anterior porque não temos um. E o raio da borda do botão será 60, e vamos descobrir que o tamanho é 22, 33 Então, o raio da borda é 60, e o preenchimento do texto será 22 superior, direito, 33, superior, inferior 22, esquerdo 33, exatamente assim Em seguida, mensagem. Portanto, a tipografia da mensagem será parágrafo e a cor da mensagem de sucesso será vamos adicionar uma cor esverdeada Essa cor funcionará. Vamos colorir assim, então a cor será essa cor vermelha. Na cor da mensagem em linha, vamos mantê-la como padrão e nas etapas, podemos simplesmente ignorar as etapas. E é muito bom. Se quisermos aumentar o tamanho dessa área de texto, podemos simplesmente acessar o conteúdo e aqui está a área de texto, e aqui podemos adicionar linhas. Vamos adicioná-lo como cinco. OK. Agora, aqui temos que melhorar essa caixa de seleção. Para fazer isso, no Estyle, temos que descobrir o estilo da caixa de seleção Na verdade, não temos o estilo de caixa de seleção, então temos que mantê-lo assim Para adicionar o estilo de caixa de seleção, usamos CSS, então vou fazer algumas lições para adicionar CSS no futuro. Por enquanto, vamos manter isso assim. Agora nosso formulário está completo. Agora temos que configurar o formulário e, em aulas futuras, configuraremos o formulário para receber mensagens nosso painel do WordPress e mensagens para nossa caixa de e-mail. Agora eu clico aqui e clico em Saveaf 24. Como criar o rodapé: Olá, pessoal. Agora temos que projetar a seção de rodapé. Vamos. Aqui, acabamos de salvar o rascunho, e agora vou para o painel do WordPress aqui, vou salvar o rascunho novamente e garantir que ele seja salvo corretamente. OK. Agora vamos sair daqui e ir para o painel do WordPress. A partir daqui, nos modelos, clique neles Builder no Builder. Temos esse rodapé ou podemos simplesmente clicar aqui e já criamos o rodapé vazio Remova-o e veja-o do zero. Agora eu posso clicar aqui e ir para Rodapé ou clicar aqui e em novo, depois remover isso e clicar aqui e vamos renomear o título para Rodapé, assim OK. Agora, o que precisamos fazer é clicar neste ícone de adição e clicar na caixa Complexo, e seremos uma linha de direção como Ignore essa área. Ele não aparecerá no design. E agora o que temos que fazer é verificar o tamanho. A altura é 382. Vamos fazer com que seja 380. Aqui, a altura mínima será 380. Em seguida, um estilo, clique em mergulhar no fundo adicione a cor do plano de fundo como cor do texto Vamos ver, a cor de fundo é a cor do texto. OK. Agora, basta clicar em publicar e, aqui, clicar em adicionar condição e definir o site inteiro e clicar em Salvar e fechar. Dessa forma, podemos ver se isso realmente se aplica ao site ou não. Agora vou ao site e vamos ver como fica. Clique no telementor editado ou ainda não publicamos o site, então temos que ir ao editor para conferir, e Aqui temos a seção Puta. Ok, estamos no caminho certo. Ok, agora vou clicar nesse ícone de adição e adicionar um contêiner. E neste contêiner, vamos fazer a margem e o preenchimento como zero E aqui temos que adicionar esse cabeçalho, então eu posso simplesmente clicar em Exportar e exportá-lo como PNG ou podemos simplesmente criar essa tipografia, vamos criar isso em Este é apenas um texto simples agora, então, para fazer isso, vou até o rodapé, clique aqui e adicione um título como Então, no estilo e de tipografia, vamos ver os valores É Nonito 39 volts. Vamos lá, devemos ter 39 e volts. OK. Parece bom. Então eu simplesmente copio esse texto e passo o texto aqui, então temos que mudar a cor para branco secundário, a cor secundária assim. OK. Agora, o que precisamos fazer é adicionar esse texto, copiar o texto e, na verdade, podemos criar uma tag TML para três, depois eu duplicarei e a criaremos como P ou parágrafo Em seguida, faseie o texto no estilo E. Esse será o texto do parágrafo e a cor do texto será o padrão. OK. Agora essa seção está boa. Agora temos que adicionar um novo contêiner, basta clicar aqui e adicionar um contêiner como este e dentro desse contêiner, temos um link rápido. Copie o texto do link rápido e aqui, clique aqui e adicione um novo título como este, depois adicione os tanques e seu tamanho é o alinhamento do subtítulo e ficará centralizado Então, a cor é secundária. Então temos que adicionar esse menu. Para adicionar esse menu, precisamos criar um novo menu. Por enquanto, vamos publicar essas alterações e agora temos que acessar o painel do WordPress no painel do WordPress, nos menus de aparência e aqui temos o menu principal. Agora clique em criar um novo menu e neste novo menu, vou adicioná-lo como menu de rodapé Assim, clique no ícone Criar menu e, no rodapé, teremos que adicionar essas seções Por enquanto, vamos adicionar a hashtag como link. Aqui, não aqui, temos a página inicial. Podemos simplesmente adicioná-lo ao menu e, em seguida, acessar a hashtag personalizada de links URLs, e o texto do link será o primeiro sobre aqui, primeiro texto será sobre uma hashtag, o segundo texto será serviço e o terceiro texto conterá contato, não Contato, URL, hash tag e, em seguida, termos e condições como este Em seguida, preencha uma política de privacidade como esta e adicione a hashtag, clique em adicionar a Ok, nosso menu de rodapé Agora eu clico no menu S e não adiciono nada disso. Agora vou atualizar a página aqui. E então eu procuro aqui um menu como este copio a palavra pres menu e a coloco aqui, depois seleciono o menu Já está selecionado. O alinhamento será central e, no ponto de cozedura, vou transformar o ponto de interrupção em nenhum porque precisamos de um menu de texto como este Você será vertical. Vamos tornar essa cor visível. Queremos estilizar, a tipografia será Mnuulin e a cor do texto será essa cor Ok, aqui temos o conjunto de menus e agora, no conteúdo, podemos fazer as alterações necessárias Aqui, o sublinhado será nenhum. ponteiro não será assim, então o ícone não temos um ícone Agora podemos ir para o estilo E. mouse, vamos criar o estilo como sobrecor e, em ativo, vamos criar uma cor primária para o preenchimento ativo e horizontal. Vamos ver. O padrão horizontal será zero, mas temos o preenchimento vertical Vamos descobrir o espaçamento entre esses itens. São 15. Vamos adicionar que o valor é 15. OK. Na verdade, não é um acolchoamento vertical Faça o preenchimento vertical como zero, e o espaço entre eles deve ser 15, assim OK. Agora, o menu suspenso não temos um menu suspenso, então podemos ignorá-lo, e agora está com boa aparência. Aqui temos que descobrir o espaço entre 30. Podemos adicionar facilmente o clique aqui e, nas lacunas, podemos adicionar a lacuna bruta como 30. OK. Agora temos essa seção intermediária. Então, depois disso, só precisamos criar essa multa nas redes sociais, basta copiar o texto, e podemos simplesmente duplicar esse contêiner porque não precisamos fazer isso de novo e de novo, então vou duplicá-lo, e neste texto, vou apenas adicionar este, excluir este menu, então aqui vou pesquisar Ok, aqui temos ícones sociais, basta adicionar aqui dentro e vamos adicionar o ícone social. Na verdade, tem link no Facebook e no Instagram. Então, o Facebook está no meio, então vamos agir no meio, e isso não é o Twitter Isso deve estar vinculado. Link e aqui temos que adicionar o URL. Vou apenas adicionar o URL do site do LinkedIn, mas no UAs ou no site real, você precisa adicionar a página do LinkedIn ou a URL da página de mídia social aqui E a cor, eu não vou adicionar a cor oficial, vou adicionar Hasm, mas podemos adicioná-la no I dies Por enquanto, vamos mantê-la como a cor oficial. No Facebook, usaremos apenas uma URL do Facebook como esta. Também na opção de link, podemos abri-lo em Nova janela. Quando alguém clicar nele, ele abrirá em uma nova janela. E aqui temos que adicionar o Instagram, clicar aqui e pesquisar o ícone Instagram. Insira e aqui está o URL da página do Instagram. Ok, a forma será arredondada ou, vamos fazer com que ela circule e a coluna alinhamento automático deve estar no centro Agora vamos descobrir o tamanho, altura e outras coisas. A largura é 51 por 51 e 15 15 é o tamanho de. Vamos mudar o estilo e o estilo dessa cor oficial para moldar aqui a cor primária, a cor secundária será assim. O tamanho deve ser 51 51. 51 é muito grande. Não, o tamanho não é 51. O tamanho do ícone deve ser 21. Vamos fazer com que seja 22, 22, assim. Estofamento, vamos descobrir o preenchimento. O panda é 15. Aqui está o PaddinSF 15, não o EM, torne-o fixador como este Então, o espaço intermediário será o que é seis. Vamos fazer essa lacuna entre uma linha e outra. Não precisamos de espaço entre fileiras. Em seguida, raio da borda, vamos fazer com que seja como C, agora podemos adicionar coisas ao passar o mouse sobre o ícone Vamos transformar a cor primária em uma cor flutuante como essa e a segunda cor será essa cor preta como essa, veja Se quisermos, podemos adicionar a animação dela. Vamos crescer assim e agora está bonito. Bom. Se parecer muito pequeno, aumente o tamanho do ícone. Vamos fazer com que seja 26 e está tudo bem. Tudo bem. Projetamos nosso rodapé com sucesso. Vamos ver como o rodapé ficará assim e, no contêiner principal, podemos adicioná-lo como espaço entre eles, para que ele se ajuste de acordo com o espaço do site, e agora temos que adicionar o preenchimento na parte superior, preenchimento é 30, e o preenchimento inferior Acolchoamento inferior, vamos fazer com que seja 20. Mas, por enquanto, vamos adicionar o topo acolchoado como 30, na verdade. A parte inferior é 30. antemão, vamos fazer com que não seja margem, adicionando 30 superiores, inferiores ou 30. Ok, agora o que precisamos fazer é adicionar esta seção de direitos autorais. Então, vamos ver a equipe. Então, aqui temos uma linha. Vou clicar neste ícone de adição e no divisor de linha de pesquisa. Aqui temos o divisor. Então, para fazer isso, temos que criar um novo contêiner, então clique aqui e clique em Flexbox e adicione divisor de coluna de direção porque essa coluna é horizontal, mas precisamos Então, agora, nesse estilo, vamos colorir essa cor de texto assim. No layout, altura média, não precisamos de altura média. Então, agora temos que adicionar o divisor. Vamos apenas pesquisar o divisor e arrastá-lo e soltá-lo assim. Em seguida, um estilo, mude a cor para a cor secundária e vamos ver mais informações, aumente isso e vejamos que a altura da divisória é uma Na verdade, é fronteira de qualquer maneira. OK. Agora a largura é uma, a lacuna será 15. Acho que é 15 ou 20. Uh, a lacuna é 20, então vamos fazer com que GAP seja uma lacuna igual a zero, e vamos adicionar 20 ao texto. Por enquanto, vamos adicionar 15 como a lacuna, mas vamos fazer isso usando o texto. Para adicionar o texto de direitos autorais, adicionarei o título assim Em seguida, neste título, usaremos a tag dinâmica, clicaremos na tag dinâmica e verificaremos a data Aqui temos a data e hora atual e aqui formato da data será personalizado e só precisamos do aqui, então vou manter apenas Y em repouso. Ok, aqui temos o aqui, mas aqui, precisamos dos direitos autorais e do atual ali e do resto do texto. Então, vou copiar todos os ts e aqui com antecedência antes de adicionar este texto completo e, para antes, precisamos apenas desta parte. Vou apenas copiar. E depois precisaremos dessa parte assim. Ok, adicione espaçamento, na verdade, vamos abrir isso no editor de texto e, nesse dia, podemos ver todos os detalhes Por enquanto, vou apenas copiar o texto e agora vou abrir o editor de texto. Acabei de abrir o editor HTML da W three school. Então, vou clicar em experimente você mesmo, e aqui temos a maneira de adicionar o texto HTML. Então, no design, quando adicionarmos esse texto, vamos mudar o estilo para Menlink. Acho que é Menu. Ok, sua tipografia é manlink agora aqui, crie o estilo Menlink e a cor do texto será essa cor, e o alinhamento será centralizado assim, esse crie o estilo Menlink e a cor do texto será essa cor, e o alinhamento será centralizado assim, esse texto é manlink. Agora, quando clico nessa Hannah Clark ou na URL do site, ela deve ser redirecionada para a página inicial deste site, pois se você for um designer, poderá adicionar um poderá adicionar Depois de recebido, podemos adicionar algo como projetado pelo designer XYZ E quando alguém clica nesse designer XYZ, ele deve ser redirecionado para nosso site, nosso site de portfólio Então, vamos copiar esse texto e acessar SDMLEditor para Então, aqui, eu vou colocar uma etiqueta. Então, aqui na Baggot AHF, adicionarei essa tag âncora ou a tag A na seção de recursos E aqui temos que adicionar o URL do site. Aqui está o URL do site, copie-o e coloque-o dentro deste HF e aqui alveje o mesmo NU e, em seguida, feche a tag A desta forma O ML é bem simples. E isso é apenas para HTML, você pode aprender mais sobre DML em três escolas Então, temos que adicionar o NCat ou link para este texto, porque esses são sites do portfólio da nossa empresa para fazer isso em AhF igual e fechá-lo Em seguida, feche o NCatc assim. Então aqui no fs. Vamos adicioná-lo HTTP, Ts collalah XY Isso é apenas um URL falso. Deve ser o URL do site e o alvo igual a uma nova média, que será aberta em uma nova janela. Então, aqui está o código completo que temos que adicionar após 2025. Copie o código e, aqui em diante, adicione este texto. Ok, agora está assim, vamos testá-lo depois de adicionarmos outros detalhes. Primeiro, vou para o divisor e no divisor, a lacuna será Co. E neste texto de direitos autorais, temos que adicionar 20 como tamanho intermediário. Para fazer isso, basta clicar nesse texto de direitos autorais e avançar com antecedência essas coisas. O acolchoamento superior será, o preenchimento inferior será 20, assim. Além disso, se você quiser misturar esse texto em cores diferentes, você pode adicionar essa cor No estilo, a cor de fundo será , vamos torná-la mais escura assim, assim, mas vou manter a cor defeituosa porque temos essa divisória para dividir essas duas seções Agora vamos verificar isso em ação. Acabamos de criar um título e no título, usamos a tag dinâmica e a configuração dinâmica da tag com antecedência, adicionamos a parte anterior desta forma e temos que adicionar esse espaço aqui e depois da parte como nosso STM e também na tag dinâmica, podemos fazer muito E agora vou publicar esta seção e vamos dar uma olhada no design. Então, eu vou para um site como este e aqui temos o rodapé, então se eu clicar neste Sana Clark, ele abrirá em E se eu clicar no site do nosso designer, ele também abrirá em uma nova janela. Na verdade, temos uma empresa chamada XYC designers, mas eu a entendo como Dum content Como podemos usar CSS para alterar esses estilos, mas por enquanto, vamos mantê-lo assim. E agora nosso futebol está completo e acho que vou clicar em Editar com Elementor Acho que nossa versão desktop do site está totalmente desenvolvida e agora podemos publicá-la e conferir a visualização real. Eu clico em publicar e agora clico neste olho para visualizar. OK. Agora, vamos ver, vamos lá. Temos um site totalmente funcional. Podemos adicionar mais ESTA para mais tarde e aqui temos um problema. Esse histórico deve cobrir toda a seção. Vamos consertar isso. Clique aqui e, em um estilo, o tamanho da tela será coberto. Deve ser coberto. Sim, assim. Então. Agora clique em publicar e ele será automaticamente repetido. Ok, aqui temos o cabeçalho. Podemos adicionar animações mais tarde, e agora está tudo bem Então aqui temos a espuma e aqui temos o rodapé. Ok, está parecendo muito bom. 25. Configurando o e-mail: Pessoal, vamos adicionar funcionalidade a esse formulário. Portanto, neste formulário, o que precisamos fazer é que, se nosso cliente ou visitante preenchesse o formulário, devemos enviar esses detalhes para nossa caixa de e-mail. Portanto, com o elemento pro, há duas maneiras de obter esses e-mails ou dados de contato. A primeira é que podemos obtê-lo por meio do envio de elementos ou formulários. Se realizarmos essa ação após o envio, o que significa que, se alguém clicar neste formulário de solicitação e preencher o campo obrigatório, poderemos coletar o envio e obter esses detalhes por e-mail Então, primeiro, vamos falar sobre o envio coletivo. Para fazer isso, vou ao painel do Wordpress, e no painel do Wordpress, em elemento, podemos ver esse envio. Basta clicar nele e, no momento, não temos nenhum envio. Então, vamos experimentar este formulário e ver quais tipos de detalhes obteremos. Então, para fazer isso, eu vou para a página do formulário e no elemento do Editor, eu apenas clico neste ícone de lápis e vamos configurar todos esses itens. Aqui, adicionarei apenas o envio de coleta, o que significa que obteremos L detalhes desta seção de envio. Em seguida, no envio da coleta, podemos adicionar o tipo de detalhes que precisamos receber. Nos metadados, podemos obter o IP do usuário e o agente do usuário, que significa que quando o visitante preenche este formulário e clica em Enviar solicitação, podemos obter o endereço IP da pessoa e outros detalhes, como o tipo de navegador que ela está usando e coisas assim Em seguida, temos a configuração de etapas. Na verdade, não precisamos definir etapas para esse formulário porque temos apenas um formulário de uma página e, em opções adicionais para validação do formulário, defina-o como padrão do navegador, o que significa que, se alguém não preencher os formulários necessários, essa pessoa receberá uma mensagem. E na mensagem personalizada, se eu ativar, podemos alterar essas mensagens. Quando alguém envia solicitações com sucesso, vê que seu envio foi bem-sucedido, mas tornamos isso mais humanizado e fácil Podemos simplesmente adicionar algo como se sua solicitação tivesse sido enviada com sucesso. Então aqui, podemos dizer, Hannah, entraremos em contato com você em breve Portanto, por erro, também podemos alterar essas mensagens, mas não vou alterar nada atualmente, salvamos esta página como rascunho. Mas para testar isso, vamos publicar essa página. Dessa forma, podemos verificar o site real na primeira página, assim, e depois vou para a seção do formulário e aqui vou inserir meus dados. Ok, basta preencher o agora, vou clicar neste botão de enviar solicitação e vamos ver o que vai acontecer. Ok, agora recebemos essa mensagem de sucesso, e agora vamos às submissões, e nas submissões, vou reprimir Ok, aqui temos os Emas que eu testo. Na verdade, eu testei duas vezes, então vamos verificar a primeira. Então, basta clicar no botão de visualização. E aqui vamos nós. Agora temos os detalhes, e você pode ver as peças do formulário que obtivemos e aqui temos o campo de chamada de teste ou CB e dá vontade de cavar Então, esse é o campo STML que adicionamos, então podemos simplesmente ignorá-lo e, em informações adicionais, podemos ver o IP do usuário e o agente do usuário dessa forma Portanto, quando alguém preencher este formulário e enviar solicitações a esse coach de negócios, a Hanna receberá muitas informações nesta página de envio Além disso, como eu disse antes, podemos enviar essas informações por e-mail e esse e-mail chegará à nossa caixa de e-mail. Vamos tentar fazer isso também. Para fazer isso, clicarei neste ícone de adição após enviar e definir o e-mail. Além disso, se eu clicar neste ícone de adição e verificar a lista aqui, podemos fazer muitas coisas, podemos simplesmente configurar o Milam, obter uma resposta e um pop-up convertê-lo e fazer muito mais coisas Também existe um campo chamado E-mail, que significa cliente ou se os visitantes nos enviarem um e-mail, podemos enviar um e-mail de volta para essa pessoa porque essa pessoa enviou seu e-mail nesta caixa de e-mail. Então, usando o e-mail também, podemos enviar um e-mail para o e-mail que ele adere. Então, se eu pegar este e-mail e ver aqui, aqui, só temos essa guia de e-mail, mas quando adicionamos e-mail aqui, temos a opção de adicionar a segunda imagem Agora vamos criar uma conta de e-mail e fazer com que os e-mails funcionem. Para fazer isso, irei ao Sanel da minha hospedagem de sites e ele tem recursos de conta de e-mail, então vou rolar para baixo ou posso pesquisar aqui o e-mail aqui, aqui temos uma conta de e-mail No entanto, se pesquisarmos, podemos ver a seção de e-mail. Na seção de e-mail, temos as contas de e-mail. Basta clicar em e aqui podemos criar um novo e-mail. Vou clicar neste botão Criar. Depois disso, tenho que selecionar o domínio. Então, vou selecionar esse domínio, e aqui está o nosso domínio , hnadt custom website Acabei de selecioná-lo e aqui temos que adicionar o nome de usuário. Então, vou criar dois e-mails, um e-mail para o destinatário, para que esse e-mail seja usado para enviar e-mails do nosso site. E o segundo e-mail é o e-mail do destinatário. Portanto, o e-mail do destinatário receberá o e-mail quando enviarmos e-mails pelo nosso site. OK, para nome de usuário, o e-mail do destinatário será hello at hana dot custom website design Portanto, essa parte será a URL do seu site e aqui podemos adicionar uma senha. Podemos gerar uma senha como essa ou você pode adicionar uma senha personalizada. A Certifique-se de escrever isso em algum lugar ou lembre-se dessa senha, pois você precisa dessa senha para fazer login na sua conta de e-mail. Então, vou apenas criar uma senha. Ok, acabei de criar uma senha e depois clicar nesse botão Criar, e quando clico no botão Criar, o e-mail é criado. Aqui está o e-mail. E aqui eu posso clicar neste e-mail de verificação e marcar a caixa de e-mail. Assim, você pode configurar esse e-mail com seu Gmail ou seu cliente de e-mail Dessa forma, você recebe o e-mail na sua caixa de e-mail sem fazer login na caixa de e-mail desta forma. Então, aqui temos informações sobre nosso e-mail e usaremos essas informações para configurar a funcionalidade de e-mail do nosso site e configurar o SMTP OK. Agora vou ver os e-mails abaixo. Então, para fazer isso, clicarei em Criar e, aqui, escolherei o domínio e, em seguida, adicionarei o nome do e-mail, como em quatro. Portanto, esse nome de e-mail será um nome como este ou meu nome. Só não adicione esse espaço, crie um e-mail como este e, para este, adicionarei informações em hanadt custom website design US Ok, então eu vou aqui com a senha como esta, então, novamente, vou clicar em Criar. OK, agora temos o e-mail Hello e informações no e-mail Hana Custom Website Design US Agora, o que podemos fazer é acessar o Elementoditor e o editor Elementor Podemos configurar essa guia de e-mail. Então, aqui temos que adicionar o e-mail. Então, o e-mail será hello athnadt custom website design. Nós dois seremos o destinatário do e-mail e aqui podemos adicionar o assunto Aqui, vou mudar esse assunto como nova consulta de cliente para o site da Hannah Clark, como E nas mensagens, adicionarei Earl Fields. Com esse código curto de Earl Fields, enviaremos os detalhes do campo para nossa caixa de e-mail e, em seguida, aqui teremos que adicionar do e-mail do e-mail o e-mail do remetente, então aqui o criamos como Aqui está o e-mail do remetente. Vou apenas copiar o endereço de e-mail e convenhamos, aqui podemos selecionar a resposta ao e-mail. Então, aqui a resposta deve ser um campo de e-mail. Campo de e-mail deste formulário porque quando clicamos no botão de resposta, devemos responder a esse visitante que nos envia um e-mail. OK. Então, para os metadados, podemos adicionar todas essas informações. Assim, podemos adicionar o URL da página durante o dia, não precisamos do URL da página, do agente de usuário fm do IP, do crédito. E aqui, basta adicionar os metadados do Earl e definir o envio como HTML . Para enviar um e-mail, vamos configurar o e-mail também. Então, como eu disse antes, esse e-mail será enviado ao visitante que preencher este formulário. Portanto, o e-mail do visitante deve ser aquele e-mail que ele digitou aqui. Então, vamos pegar esse campo de e-mail. Então, clico neste campo do formulário e, no e-mail, vou para Avançar, e aqui temos o ID do campo, shortcde Acabei de copiá-lo e, no e-mail adicionarei um e-mail como este. Então aqui temos que adicionar o assunto e a mensagem. Ok, vamos adicionar um assunto como obrigado por entrar em contato e na caixa de mensagem, não precisamos de Earl Fields. Temos que enviar uma mensagem de agradecimento e informar ao visitante que Hanna entrará em contato com ele ou ela Vou remover isso e adicionar mensagens como, obrigado por entrar em contato, sua solicitação foi recebida com sucesso e Hanna está entusiasmada em ouvir de Texto como este aqui, podemos adicionar o nome da pessoa. Para fazer isso, vou para os campos do formulário e, na seção de nome completo, vou para Avançar e copiarei o código curto. Então venha aqui e adicione desta forma e o e-mail do formulário será informado em, vamos copiá-lo daqui. O e-mail do formulário será este basta copiá-lo e aqui estará o e-mail do remetente e o nome da remetente será Hannah Clark e a resposta será Hello at hana dot, design personalizado do site, e não precisamos de cópia carbono, então não precisamos enviar Agora temos o e-mail um e o e-mail dois, então vou publicar esta página. Vamos ver isso em ação. Agora vou ao site e reprimirei o site, e aqui vamos ao formulário de contato e vamos preencher este formulário e vamos preencher este formulário e ver se os e-mails estão sendo enviados ou não Ok, aqui vou adicionar os detalhes do formulário. Ok, agora vou clicar em Solicitação de consentimento e vamos ver o que vai acontecer. Sua solicitação foi enviada com sucesso e vamos ver se ela realmente chegou à caixa de e-mail Então, aqui temos aquele e-mail e aqui temos uma informação. Dessa forma, também podemos receber os e-mails e ver o e-mail que o visitante adicionou. No meu caso, esse é aquele e-mail, então o visitante também deve receber o e-mail. Aqui vamos na minha conta de e-mail. Recebemos o e-mail. Recebemos esse e-mail assim. No entanto, esse e-mail está em uma linha, então podemos adicionar uma linha de interrupção para tornar isso melhor. Vou entrar aqui e no e-mail aqui, vou adicionar apenas a tag BR como esta e aqui também adicionar a tag BR e aqui podemos adicionar a tag BR e aqui R assim, então eu posso publicar e agora nosso e-mail será interrompido para as novas linhas. Agora temos um e-mail ativo, caso os e-mails do seu site não estejam funcionando, mostrarei como corrigi-lo configurando o plugue SMTP 26. Como solucionar problemas de SMTP: Olá, pessoal. Se seu formulário não estiver funcionando e você não estiver recebendo os e-mails, vamos corrigi-lo. Então, para fazer isso, primeiro vamos ao painel do Worps, depois aos plug-ins e clique em At Plugin Agora, vamos pesquisar a chamada de plug-in SMTP. Basta pesquisar SMTP e você verá este WP mail SMTP por WPForms, clique em Instalar, clique em Vou apenas clicar em Gb para acessar o painel e configurá-lo manualmente. Então, agora podemos ver esse plug-in SMTP de e-mail do WP aqui. E neste plugin, podemos configurar dados SMTP SMTP significa protocolo simples de transferência de correio. Então, vamos fazer isso primeiro nas ferramentas, você pode ter o recurso de enviar mensagem de teste ou e-mail de teste. Você pode simplesmente adicionar o endereço de e-mail para o qual deseja enviar o e-mail e clicar em SendMail, vamos fazer isso Acabei de adicionar o e-mail e clicar em Enviar e-mail e espero que isso seja enviado porque minha função de e-mail funciona corretamente, ela simplesmente envia assim E se você não recebeu o e-mail, você pode ver uma mensagem aqui. Em qualquer lugar, vamos acessar as configurações e primeiro adicionar o conjunto e, em seguida, tentar enviar o e-mail. Ok, agora aqui vou rolar para baixo e aqui tenho que adicionar o e-mail do formulário. Então eu digo o endereço de e-mail do qual os e-mails são enviados. Então, no meu caso, são informações em hana dot custom website design US e clique nesta caixa de seleção de e-mail force Fm Então o nome do baile será Hannah Clark. Além disso, se quisermos, podemos usar o nome FCEpom, o que significa que esse nome será o nome principal ou o nome do endereço de e-mail da fat hana dot custom designs Ok, vou sair e o caminho de retorno estará desligado e no mailer, vou pegar esse outro SMTP Em outros SMTP, temos dificuldades de configurar. Então, vamos fazer isso. Para fazer isso, vou ao nosso painel C, e aqui está nosso endereço de e-mail, do endereço de e-mail. Então, agora eu clico neste botão de conectar dispositivos. Em dispositivos conectados, podemos descobrir essa configuração de gerenciamento do cliente de e-mail. Ok. Agora vamos começar com um por um. Primeiro, temos que configurar o host SMTP. Então, vamos aqui, e temos que adicionar esse servidor de saída como o host SMTP Então, basta copiar, vir aqui e colar assim. E a criptografia será, vamos ver a criptografia. É SSL TLS, vamos criar TLS. Não, vamos criar SSL. Ok, então o pod SMTP, vamos descobrir o pod SMTP. É 465. Já foi adicionado. Vamos adicionar esse pote e aqui temos o SM TPA usando um nome e uma senha Portanto, o SMTP usa um nome é o endereço de e-mail do e-mail. Basta colocá-lo e aqui você deve adicionar a senha que você usou para criar esta conta de e-mail. E eu já disse que a senha é muito importante porque você precisa dessa senha para acessar sua caixa de e-mail. Então, vou apenas adicioná-lo assim. Então aqui está a configuração de salvamento do Ilicon. Então, se esse SSL não funcionar, basta selecionar o TLS e eu uso Ok, salve a configuração e vamos para as ferramentas. Em seguida, envie o e-mail de amostra. Então eu altero o padrão, e-mail SMTP, configuro para enviar o e-mail e ver o que vai acontecer Ok, é um sucesso. Então aqui está, temos essas mensagens e vamos para nossa caixa de e-mail, e aqui temos o e-mail. Experimente esse método e veja como ele funciona. Então, se não estiver enviando, aqui você verá uma mensagem de erro. Você pode usar o AIGPD para descobrir o problema ou simplesmente pesquisar no Google e corrigir o Ok, agora você não precisa fazer nada, basta configurar o SMTP e, de acordo com os dados do SMTV, essa caixa de correio Então, a minha era uma palavra pronta. No entanto, vamos testá-lo novamente, então preencherei essas informações. Agora é só clicar na solicitação onsen e vamos ver o que vai acontecer Ok, recebemos a mensagem e vamos ver aqui. Aqui, recebemos uma mensagem de agradecimento como esta, e assim por diante, e assim por diante recebemos a mensagem do novo formulário de consulta do cliente site da Hannah Clark. Ok. 27. Como alterar as cores hover: Agora está pronto e agora temos que corrigir os problemas de resposta e outros problemas de UIS Em primeiro lugar, quando passamos o mouse, os botões ficam com essa cor laranja e parece que não é um pouco profissional e não combina com o tema do coach de negócios e não combina com a paleta de cores Vamos consertar isso. Para corrigir isso, clicarei em Editar com elemento e meu plano é o mouse para que apareça na mesma cor Faça isso, temos que ir um por um e corrigi-los assim, clicar no botão e ir para Estyle no eTyleOh Vamos transformar essa cor nessa cor, a mesma cor e a cor do texto serão brancas assim. Agora eu posso clicar e clicar em Copiar e, em seguida, neste botão, basta escrevê-lo e clicar em Pastyle Mas quando eu mudo o design, pressiono Command Is ou Control no Windows e vamos alterá-lo clicando aqui e indo para Style on Ho, altere esse branco e altere essa cor primária assim. Então aqui, basta clicar no formulário e em Buttontyle, na verdade temos que ir para o botão e a cor de fundo será essa e a cor do texto será branca Não precisamos nos preocupar com botão anterior porque não temos nenhum, e então temos que corrigi-lo aqui, basta clicar aqui e em um estilo, posso alterá-lo para a cor hmary e assim Agora parece tão profissional do que antes. Agora eu clico em CF Bliz e temos que corrigir o mesmo problema no cabeçalho. Para fazer isso, clico nesse cabeçalho para editar uma parte, e aqui vamos, clique nela e, em seguida, no bloco Es em Nova, mudo a cor para a cor padrão desta forma Agora publique e depois vamos clicar aqui e clicar em Foot. Vá para a seção Futa. No FutaSection, precisamos fazer a mesma edição para alterar o ícone da mídia social Ok, aqui, clique aqui e, na borda do ícone Estyle, mude-o para essa cor assim Em seguida, clique em publicar e pronto, no próximo vídeo, vamos corrigir o problema de resposta 28. Como corrigir a resposta de tablets: Olá, pessoal. Agora temos que adicionar a capacidade de resposta deste site Este site não é responsivo no tablet ou no celular. Então, vamos começar a fazer isso. Primeiro, vou para a versão desktop, e vamos começar com o cabeçalho, então clique neste cabeçalho para editar Ok, agora estou no cabeçalho, então agora vou clicar nesta versão do Portret para tablet, e aqui, primeiro temos que adicionar espaçamento à esquerda e à direita Então, isso será incluído. Então eu clico em Editar contêiner e em Avançar, você pode ver aqui, agora vemos o tablet Portrat e aqui está o desktop Aqui está o celular. Então, no tablet, vou desvincular esse valor Então, vamos adicionar 20. Não, não, não para cima, o topo será zero, certo 20. Eu também gosto disso. E então, na próxima etapa, o menu não está sendo exibido corretamente. É exibido como um menu de hambúrguer, mas precisamos dele como um menu normal porque há um espaço para adicioná-lo como um menu horizontal normal Então, para corrigir isso, podemos simplesmente mudar essa pausa para celular. E dessa forma, o menu aparecerá assim. Então podemos ir para Style e adicionar essas coisas como preenchimento vertical Vamos fazer seis e reduzir o espaço I entre 20 e agora ficará assim no tablet e eu posso clicar nesse contêiner, e aqui adiciono a lacuna da coluna como 36. Vamos fazer com que seja 25. Então, novamente, vá ao menu e adicione o espaço entre 25. Ok, agora parece muito melhor e, de cara, a versão para tablet está boa. E agora vamos até a página principal para fazer isso. Primeiro, publicarei isso e depois clicarei em Editar página. Ok, agora estou na nossa página inicial, então vou clicar neste tablet Porto e aqui tenho que ir para Advance e adicionar preenchimento à direita para esvaziar e à esquerda para esvaziar assim Aqui vou clicar neste contêiner e, no layout, podemos adicionar o centro de conteúdo do justify Eu só quero colocar isso no centro. Vamos experimentá-lo. Clique aqui e em Advance deve estar definido aqui. Vamos descobrir o que aconteceu. Ok, aqui está que ele não alinha a versão do tablet, vamos fazer com que ele se alinhe como centro desta Agora ele se ajusta corretamente e não precisamos alterar o tamanho da fonte, mas se quisermos, também podemos alterar o tamanho da fonte Para fazer isso, vamos clicar aqui para editar o cabeçalho a tempo para a Apple, clique aqui e depois clique em Man global fonts. Antes de fazer isso, podemos simplesmente ajustar esse tamanho e descobrir o melhor tamanho. Então 38 será o melhor tamanho para esse cabeçalho. E aqui? Vamos experimentá-lo. Vamos fazer com que 22 seja bom para o subtítulo, e aqui? O tamanho do parágrafo ficará bom. Então, agora, novamente, eu clico neste título e altero a tipografia para cabeçalho e também altero essa tipografia para subtítulo Em seguida, clique neste ícone de fonte global gerenciada e na configuração de fonte global, basta selecionar a versão retrato e clicar em Cabeçalho e aqui podemos ver o ícone do tablet Vamos fazer com que seja 38 assim. E aqui temos que fazer isso para 220 assim e o tamanho do botão será cerca de 18? Sim, 18 será bom. E agora o tamanho do link do menu está bom. Agora eu clico em Salvar alterações e depois clico em voltar ao Editor para voltar ao editor. Ok, agora estou na página inicial e nossa seção de heróis está assim, e vou clicar aqui E se quisermos, podemos diminuir o preenchimento desse botão Então, vamos fazer com que seja como os dois primeiros e vamos fazer com que seja como os 15 primeiros, a direita será 15, os 15 inferiores Esquerda 15. Assim. Parece que é muito pequeno. E quanto a 20, 15 a 20? Não são bons 20 a 20. OK. Isso é muito melhor, temos que fazer o mesmo aqui, mas aqui parece bom. E agora não precisamos fazer nada nesta seção, então clicarei nesse contêiner principal e, com antecedência, podemos adicionar o teste 20 e o teste esquerdo 20, e ele se ajustará adequadamente. E na seção acima, basta clicar aqui, vamos adicionar o preenchimento Nas 20 e 20 assim E, novamente, vou clicar aqui e vê-lo se alinhar. Vamos centralizá-lo e ficará assim. Na verdade, vamos fazer isso como uma coluna. Então, atualmente temos duas colunas, então vamos fazer com que seja como uma coluna. Para fazer isso, eu clico neste contêiner. No layout, vamos mudar essa direção para uma coluna como essa e agora ela ficará assim. Agora vou clicar nesse contêiner secundário e esse contêiner será uma porcentagem e será 100% assim. Agora está muito bom. Agora vai ficar assim. Podemos fazer o mesmo aqui, mas a seção de heróis já está melhor. Agora temos essa seção. Primeiro, temos que adicionar os fadins esquerdo e direito 20, esquerdo também será 20 OK. Então temos essa grade. Então clique na grade, primeiro clique na grade, e podemos ir para o layout e, na linha e colunas da grade, podemos torná-la como uma grade de duas colunas e as linhas serão três assim. Ok, agora está muito melhor, temos que mudar esse botão, preenchendo como 2020 a 2020. OK. Agora, acabamos de corrigir a seção dois de serviços e agora temos essa seção de história de sucesso. Então clique aqui e adicione o preenchimento. Então, vamos adicionar, vamos clicar juntos na qualidade desse link para remover o desbotamento superior e inferior Agora, à direita, teste dois e o teste esquerdo até 20. OK. Agora, aqui, se quisermos, podemos alterar a contagem de itens para mostrar, para que possamos apenas alterar visualização em altura, como duas, e depois duas exibições básicas anteriores, como esta Em seguida, vamos para a próxima seção e, aqui, adicionamos a altura mínima. Se quisermos, podemos remover a altura mínima, então vamos definir a altura mínima como zero, e então podemos adicionar o desvanecimento superior como 30 e o desbotamento inferior será 30 assim Está muito melhor do que antes. E então temos que corrigir aqui, então vou clicar no contêiner principal, e aqui vou remover a altura mínima para zero. A partir daqui, podemos fazer isso como uma coluna para fazer isso nas duas linhas e avançar, vamos adicionar a direita em 20, a esquerda como 220. Em seguida, clique no contêiner secundário, o contêiner dentro desse contêiner, altere para porcentagem e torne-o em 100%. Assim, podemos fazer o mesmo aqui com uma porcentagem de 100%, assim. OK. Agora parece muito bom. Além disso, temos que adicionar o bloco na parte superior e inferior. Então, vamos no topo como 30 e no fundo como 30, assim. Ok, agora também resolvemos esse problema e agora temos que corrigir a seção a. Então clique em Publicar. Ok, agora clique em Com rodapé para editar a seção de rodapé. Então, aqui, parece bom. Então eu clico no contêiner principal e vamos manter esse preenchimento superior como 30, e o direito será 20, o inferior será 30 e o direito será esquerdo será 20 assim Portanto, não precisamos fazer nada. Eu me ajusto adequadamente. Na verdade, aqui, temos que mudar a cor. Então, em nossa mudança de cores primárias como essa. OK. Agora, aqui não precisamos fazer nada, e na seção de direitos autorais está tudo bem. Então, agora eu clico em Publicar. E agora vamos para a página principal, basta clicar assim e eu serei creditado na página principal. OK. Agora, aqui, nossa versão para tablet está totalmente funcional e você pode verificar o design deste site na ferramenta de verificação responsiva e descobrir em detalhes Basta acessar a ferramenta de teste responsivo e copiar o URL do site e inserir o URL aqui Clique em C check, e aqui podemos ver a prévia na área e descobrir seu tamanho com diferentes versões como esta. E podemos testar a versão para tablet assim e, no tablet, ela ficará parecida com 29. Como corrigir a resposta móvel: Olá, pessoal. Agora, vamos corrigir a capacidade de resposta móvel deste site Se eu clicar em Mobile Portre, ele ficará assim, e vamos melhorar isso Primeiro, vamos começar com o cabeçalho, então eu clico no cabeçalho. Ok. Agora, aqui temos esse cabeçalho que usamos para mostrar o menu principal do nosso site na versão para celular e tablet. Mas no celular, ele deveria ter esse tipo de menu de hambúrguer, mas com esse design, não podemos fazer isso Vamos esconder esse design em dispositivos móveis e criativos. Para fazer isso primeiro, duplicarei esse menu e clicarei nesse primeiro menu e vou para Avançar, teremos a seção responsiva na seção responsiva, podemos ocultá-la Esta seção não aparecerá mais no celular e agora temos a segunda seção obrigatória Vou para Avançado e, no modo responsivo, vamos ocultá-la no desktop e no tablet e mostrá-la no Agora, se formos para o desktop, o segundo desaparecerá assim. Então aqui, vou clicar no contêiner e no layout, ele tem direção como linha. E neste botão, vamos tentar clicar e excluir o botão. Em seguida, clique nesse contêiner e vamos fazer esse contêiner com 60, 60 a 40. Vamos fazer com que 30, 20, dez seja o melhor tamanho. Talvez façamos 20, 20 em 20 e, dessa forma, possamos aumentar o tamanho desse menu. Agora eu clico neste menu do WordPress e temos que criar um novo Mnutud para esta seção porque acabamos remover esse botão de contato do menu móvel O que podemos fazer é clicar aqui. O menu é uma tela e abrirá os homens, então aqui vou criar um novo menu. No nome do menu, vamos adicionar o menu móvel e clicar em criar Meno, então temos que adicionar os itens do menu. Primeiro, vamos adicionar a casa. Então vamos aqui e vamos até os tablets , depois temos que adicionar cerca de um serviço e depois testemunhos. Na verdade, podemos ir ao nosso design Figma. Ok, em nosso design Pigma, podemos copiar esses textos, primeiro copie aqui, vamos lá, e no link personalizado, em cerca de adicionar uma hashtag por enquanto, depois temos os serviços, clique nele e adicione serviços como este, adicione a hashtag Adicione ao menu e, em seguida, a cópia do depoimento é colada aqui na hashtag Em seguida, adicione também o menu let's contact a este menu, adicione a hashtag e clique em adicionar ao menu Na versão desktop, adicionamos esse botão de contato como botão separado. Portanto, neste caso, temos que adicioná-lo ao menu do celular e clicar em Salvar menu. E aqui vou clicar em Publicar e depois vamos para a versão móvel, e agora vou reprimir esta página novamente. Ok, agora vamos para a seção de cabeçalho. Basta acessar o administrador do WP e aqui nos modelos do Builder, clicar neste cabeçalho para abri-lo e clicar neste botão de edição para editar o conteúdo Ok, agora eu vou para a versão móvel e clico no menu e aqui mudo para o menu móvel. Agora, se verificarmos o menu, o teremos assim, mas podemos corrigi-lo para corrigi-lo. Cave toda a largura desta forma, e agora, se eu verificar, ela ficará assim e terá todos os itens. Agora, o que posso fazer é acessar o Etles OneTils. A tipografia será um link de menu e a cor do texto será essa cor E aqui temos que ir até o menu suspenso e ajustar a configuração do menu suspenso. Então, aqui a cor de teste será essa cor e a cor de fundo, vamos mudar a cor de fundo para assim e tornar a cor de teste branca, e agora ela ficará assim. Então, no limite, vamos manter o valor padrão porque, no celular, o edgeo não é tão importante e não precisamos de bordas E quanto ao acolchoamento horizontal? Vamos fazer com que seja 20 assim, depois o preenchimento vertical, vamos colocar assim e podemos ajustar o ponto, agora vamos fazer a distância assim, e agora vamos fazer com que seja como dois, assim E agora vamos ao botão Alternar. No Toggle, podemos mudar a cor. Na verdade, vamos mudar a cor para branca, e a cor de fundo será essa cor primária, e vamos aumentar seu tamanho para 35, 35 será bom. E agora ficará assim, e não precisamos de nenhum raio de água Vamos fazer com que o raio da água assim e seja muito melhor, e não precisamos nos preocupar muito com seu celular e nosso menu móvel estar completo Agora posso clicar em Publicar e vamos ao nosso site, acessar o site ou podemos verificá-lo na ferramenta de teste responsivo e vamos até aqui está o celular Aqui está o celular e vamos verificá-lo no celular, para que fique assim, e agora temos que ajustar a seção de heróis para fazer isso. Eu clico na página inicial aqui para redirecionar para a página inicial e, em seguida, clico no painel móvel Aqui está muito perto. Então corrija, clico no contêiner principal e, em Avançar, adiciono a parte superior, pois vamos dizer 60, não, só preciso adicioná-la à parte superior. Vamos adicionar o topo como 60 e o direito será 20 e o fundo será zero e a esquerda será 220 assim. Agora está muito melhor. Se quisermos, podemos diminuir o tamanho da fonte, clicar aqui e, uma vez, vamos para a tipografia e vamos tentar alterá-la para Vamos fazer com que seja 28, é muito Ficará bem. Vamos chegar a 32 e 34, e o resto da fonte permanecerá o mesmo. Clique aqui Clique em Gerenciar fonte global, depois no cabeçalho e defina o retrato do celular e torne-o 34 34 assim e clique em Salvar alterações e eu manterei o resto do tamanho da fonte como se fosse alterado a partir daqui, seu efeito no design global. É por isso que usamos as fontes globais. Ok, agora vai ficar muito melhor e clique aqui. Se quisermos, podemos criar essas fontes de largura total. Então, aqui podemos adicionar alongamento, não alongamento. Ao se alinhar com antecedência, use-o para esticar. Está funcionando com vai estar cheio, então está parecendo bom. Agora, se quisermos, podemos fazer essa parte superior e esse botão de texto. Clique na imagem e em Avançar, clique neste pedido para começar assim. Agora vai ficar assim e está muito melhor do que antes. E agora, nesta seção, podemos simplesmente ir para o layout e alterar duas colunas dessa forma e aqui vamos definir o roger pass 220 dessa forma e aqui, vamos mudar isso entre os tamanhos A lacuna do título, vamos fazer com que pareça. Agora, clique com o botão direito do mouse em copiar e clique com o botão direito em estilo de colar, estilo de colar, estilo de colar como este. Em seguida, vamos adicionar um pouco de espaçamento. Vamos fazer com que 30, 30 seja muito melhor. Então, no contêiner principal, com antecedência, que está no topo fadins 20, à direita estará 220, na parte inferior será 20, à esquerda será 20 Ficará assim. Então aqui temos essa imagem e o texto com boa aparência e aqui está bom e o celular pode simplesmente clicar nela e vamos adicionar um pouco de espaçamento Vamos adicionar o espaçamento como e o espaço da coluna, vamos torná-lo espaço da coluna como 15, assim Agora vai ficar assim e aqui não precisa fazer nada, e esse botão está com boa aparência. E aqui temos uma prévia de um slide, e aqui não precisamos fazer nada. Tudo parece bom. Aqui, vamos transformá-lo em cabeçalho. Então, sim, deveria ser um cabeçalho. Dessa forma, esse cabeçalho será ajustado. O tipograma deve ser definido como cabeçalho, e aqui está bom. Se quisermos, podemos remover pouco de preenchimento direito e esquerdo. Então, vamos eu. Vamos definir o caminho superior 30, o direito será dois poços e o fundo será 30, esquerdo será bem assim. Dessa forma, teremos um pouco mais de espaçamento. Ok. Agora, a página inicial está boa E se você quiser, podemos fazer com que esses textos se centralizem assim. Depende de você. Vou mantê-lo no lado esquerdo dessa forma, será facilmente legível Agora vou clicar em Publicar e, em seguida, tenho que ir para a seção Rodapé Clique no rodapé e no rodapé, não precisamos fazer muita coisa, então basta clicar no contêiner principal e, no contêiner principal, e, no contêiner principal, vamos fazer OgaPaAs 30, 30 O que 60. Sim, 60 será muito melhor, e agora vai ficar assim. Portanto, a seção de direitos autorais parece boa. Então, agora publicaremos essas mudanças, e a capacidade de resposta do nosso site está totalmente projetada . Na próxima lição, teremos que adicionar a animação a este site e adicionar funcionalidade a cada um dos botões deste site Então, vamos fazer isso na próxima lição. 30. Como vincular seções de sites: Olá, pessoal. Agora temos que vincular essas seções, o que significa que quando eu clico nesta página Sobre, isso deve ser revertido para esta seção ou apontar para esta seção Sobre Então, vamos fazer isso. Para fazer isso, temos que atribuir IDs a cada seção. Para fazer isso, vamos começar de casa. Então, clico no contêiner principal da casa e depois vou para Avançar. No Advance, adicionarei o CSS ID desta forma. Então vamos para a próxima sessão. próxima seção é essa, clique nela e aqui será uma sessão. Vou apenas adicionar IDs CSS sobre. Então aqui temos a sessão de serviço. Eu vou adicionar dança e vou aqui e adiciono Ids Vss. Se você tem duas palavras, meus serviços, você pode usar serviços do Mash como este No meu caso, são apenas serviços e a próxima seção é depoimento, vamos copiar esse texto daqui e clicar no contêiner principal e adicionar o ID CSS como depoimento e sempre adicionar no mesmo formato, o que significa que se você adicionar maiúscula como primeira letra na página inicial no depoimento, adicione maiúscula como primeira letra na página inicial no maiúscula como Mantenha a consistência e aqui temos contatos. Irá para Advance e adicionará isso como contato. Ok, agora eu publico isso, e agora temos que ir para a seção de menu do nosso site para fazer isso, vou abrir este site na Nova Janela, e aqui vou para os menus sobre homens de aparência e aqui temos o menu móvel. Vamos começar no menu principal, selecionar o menu principal e clicar no botão Selecionar. E a página inicial está vinculada à página inicial, e então temos essa página sobre Em uma página, temos que adicionar sobre ID. Então, vamos clicar no contêiner principal e, no contêiner principal, aqui temos o ID CSS, copiá-lo e adicioná-lo assim. Então, quando adicionamos o ID, ele deve começar com a hashtag Quando o adicionamos, fizemos isso com o URL da página inicial, como este, porque esta seção está dentro da página inicial Sempre adicione essa hashtag logo após o URL da página inicial. Vou copiar o URL da página inicial e vamos aos serviços e aos serviços, vamos fazer o mesmo com o URL do site, depois com a hashtag, depois ir aqui, clicar No CSS ID, adicione assim, então temos o depoimento, clique aqui Vamos selecionar o contêiner principal e com antecedência, copiar esse texto e colá-lo assim. Na verdade, temos que copiar esta seção desta forma, depois colar assim, então agora podemos clicar em C savenu e vamos manter isso em Vou até aqui e abro o site em nova janela e vamos ver como clico quando clico em, ele redireciona para a seção A e quando Nlck Css, ele redireciona para a seção de Quando eu clico no depoimento, ele é redirecionado para o Esta é a maneira de vincular nosso site porque este é o site de uma única página. Ok, agora temos que adicionar a mesma ação a esse contato, então, para fazer isso, temos que adicionar esses dados a isso. Vamos entrar em contato. Mas para fazer isso primeiro, vou rolar até aqui e clicar aqui, depois copiar isso e agora o que posso fazer é clicar aqui e ir para o cabeçalho. No cabeçalho, aqui temos o menu principal e aqui temos o botão. Neste link de botão, por exemplo, primeiro copie o URL do site com a hashtag e, em seguida, adicione a opção de ID e link, não marque abrir nenhuma janela ou qualquer outra e clique em Publicar Não é necessário visualizar, basta clicar em Publicar para publicá-la e depois reprimir a página Agora clique no botão Contato e ele será redirecionado assim Agora é assim, então temos que adicionar ação a esse botão de herói. Então vamos para a página inicial para editar a página inicial e aqui, clique neste botão e aqui coloque o URL e depois da hashtag, temos que adicionar o contato porque quando clicamos neste botão, ele deve redirecionar para este formulário de Esse é o CTA ou call to action, aqui já adicionamos o Facebook e o LinkedIn e outro perfil social aqui temos que adicionar o mesmo URL como Vamos acrescentar sim. Agora está concluído, agora eu o publico e, se eu o verificar em ação, descanse o site e clique neste trabalho comigo e ele se relacionará com esta seção. Agora, o que precisamos fazer é ir ao Menu e selecionar o Menu do Rodapé Em seguida, temos que adicionar o mesmo link de menu ao rodapé. Aqui está sobre e serviços. Vamos verificar se o ID do serviço está correto. Nos serviços que você adiciona, essa palavra deve ser exatamente igual à palavra do link. Se for diferente, o processo de link não funcionará Entre em contato aqui com os termos e condições e a política cinco Precisamos gerar essas duas páginas. Então, agora vamos clicar no menu Salvar e depois ir ao menu do celular e fazer o mesmo. OK. Agora, aqui temos exatamente o real que podemos adicionar a partir daqui. Agora podemos falar em uma seção de serviços como esta e, em seguida, aqui sobre esses serviços. Então temos o testemunho. Vamos adicionar uma seção de depoimentos. Assim, então vamos nos conectar aqui, temos que adicioná-lo atual, e o depoimento está bom Esse está bem. Os serviços estão bem. O que acha de tudo bem. El bom. Agora eu clico em Csavmu e o menu móvel também está completo. Agora podemos verificá-lo em ação. Se eu clicar em Conservar, ele deverá ser enviado aos serviços. Agora, o processo lingn é Elgod e, como próxima e última etapa, temos que adicionar termos e condições e estatísticas da política pri C para fazer isso na 31. Gerando Termos e Condições e páginas de Política de Privacidade: Olá, pessoal. Agora é hora de gerar a política de privacidade e os termos e condições. Para fazer isso, podemos pesquisar no gerador de políticas de privacidade do Google e obteremos esse tipo de gerador de política de privacidade gratuito, basta clicar nele e aqui temos que passar por um formulário simples Então, primeiro, vamos fazer isso passo a passo. Então, primeiro, eu clico nisso. Sua política de privacidade será usada? Será o site, então eu clico em Continuar e gero a política de privacidade. E aqui eu tenho que adicionar o URL do site, vamos copiar o URL do site daqui. Em seguida, temos que adicionar o nome do site. Vamos adicionar o nome do site, copiar o nome do site e adicioná-lo assim. Então temos que inserir o tipo, então vou acrescentar que sou um indivíduo, então temos que entrar no país. Em seguida, temos que entrar no estado e selecionar seu país. Nesse caso, vou selecionar Estados Unidos e clicar em Avançar. Então aqui basta ler isso. Que tipo de informação pessoal você coleta dos usuários. No nosso caso, temos um formulário. Nesse formulário, selecionamos endereço de e-mail, e sobrenome, número de telefone e nenhum perfil de mídia social. Nós apenas coletamos essas coisas, depois as selecionamos e clicamos na próxima etapa. Se você tiver mais campos, basta escolher esses outros dois e clicar na próxima etapa. Aqui temos outra pergunta chamada como os usuários podem entrar em contato com você em caso de dúvidas sobre sua política de privacidade? Aqui você pode adicionar por e-mail, visitando ou qualquer coisa. Nesse caso, adicionarei por e-mail e, em seguida, poderei adicionar o endereço de e-mail. O endereço de e-mail será hello at hana dot custom website design us e clique na próxima etapa, e aqui temos duas opções Para a primeira escolha, temos o premium, mas não precisamos dele, então basta clicar em Não, eu não quero uma política de privacidade profissional, basta clicar na próxima etapa e aqui eu tenho que adicionar o endereço de e-mail. Eu apenas adiciono o endereço de e-mail e clico em gerar um. Ok, acabamos de gerar a página da Política de Privacidade, então eu posso clicar em copiar essas duas pranchetas Ou você também receberá essa cópia em seu endereço de e-mail. Vou apenas clicar em Copiar para a área de transferência. Em seguida, vamos ao painel do site e, na página clique na página aqui e adicione o título como política de privacidade. Em seguida, clique em Editar com elemento de. E aqui eu clico no ícone de adição, caixa de texto e a direção da caixa de pressão será a coluna de direção E aqui, vamos adicionar a margem de aprovação, um, dois, 20. OK. Em seguida, clique aqui e adicione um editor de texto como este, depois clicarei nesse código e, em seguida, acompanharei o código que gerei usando esse gerador de política de privacidade. E aqui, vamos para Estyle. Vamos fazer o alinhamento à esquerda e a tipografia será parágrafo, a cor será cor Como podemos adicionar a cor do link. Vamos adicionar essa cor verde à cor do link. E podemos adicionar espaçamento entre parágrafos. Vamos fazer com que seja 15 e bom, ficará assim e, no final, vamos adicionar, vamos clicar no contêiner principal e, na parte inferior, adicionar 120 assim. Em seguida, clique em Publicar e acabamos de gerar a página da política de privacidade e vamos criar a página dois termos e condições. Para fazer isso, posso simplesmente pesquisar no Google um gerador de termos e condições como este, e aqui temos algumas sugestões. Então, vamos ao gerador de termos e condições, site, e aqui temos que adicionar. Onde seu termo e condição serão usados? Portanto, é o site, clique em Continuar e gere o termo e condição, e aqui temos que adicionar o URL do site, e aqui temos que adicionar o nome do site e aqui inserir o tipo, pois sou indivíduo no seu caso, se for comercial, como informações comerciais e outras informações comerciais. No meu palpite, eu apenas seleciono Eu sou um indivíduo e aqui defino o estado e clico em const state e aqui temos perguntas, usuários C criam contas Os usuários podem criar e fazer upload de conteúdo? Os usuários podem comprar produtos Vocês oferecem planos de assinatura? Eu faço como se não fosse assim. Se isso for verdade, você terá que pagar esse preço, mas a maneira mais fácil é usar a IA para gerar uma página de termos e condições. Aqui podemos adicionar novamente o endereço de e-mail. Acabei de adicionar o endereço de e-mail desta forma, depois clique na próxima etapa e clique em Avançar. Aqui também temos que verificar agora e clicar em. Na próxima etapa, clico em Terei que adicionar o endereço de e-mail, adicionar o endereço de e-mail e, em seguida, clicar em Congenerar, gerei os termos e condições Agora eu copio o texto deste termo e condições e vou para o site. Aqui, posso simplesmente clicar em Nova página e aqui, clicar na página definida no título como termos e condições. Então, vou seguir a mesma teoria que seguimos antes, desta forma. Então, com antecedência, adicione a margem superior como um, dois, 20 e a parte inferior como 12, assim. Então eu vou aqui, basta copiar isso para a área de transferência e aqui recortar este e adicionar a edição de texto assim, depois ir para o código e colar assim Em seguida, um ladrilho, faça com que seja tipográfico e o URL do link ficará nessa cor OK. Agora temos as páginas de termos e condições e políticas de preços. Agora publique-os. Ok, agora vamos ao Menu no Futter Menu, selecione-o e clique em ocultar Aqui, nos termos e condições e na política do Priorado, basta marcá-los Ou você pode clicar em Visualizador, e aqui você verá o termo e condição e a PriocPolicy Em seguida, basta clicar em adicionar ao homem aqui temos um link personalizado para ganhar itens, removê-los. Nós não precisamos deles. E aqui está, agora clique no menu Salvar e agora vamos ao site e vê-lo em ação. OK. Agora vamos clicar na política de privacidade e vamos lá. Nós apenas reagimos à página da política de privacidade e aqui temos os termos e condições, clique nos termos e condições e agora, se você quiser acessar os serviços, basta clicar nos serviços e acessar os serviços. OK. 32. Como adicionar animações: Todo mundo. Agora temos que adicionar animações ao nosso site Você pode adicionar animações a cada texto ou adicionar animações a uma seção como esta seção desta A melhor maneira é adicionar animação às seções, pois se você adicionar muitas animações, isso afetará a velocidade de carregamento do site Vamos adicionar animações a essas seções. No cabeçalho, não vou adicionar nenhuma animação. Vou manter o cabeçalho padrão e, para esta seção, basta clicar no contêiner e ir para Avançar. Em Advance, temos os efeitos de movimento nos efeitos de movimento, temos a animação de entrada. Então, podemos adicionar fade in, fade in para a esquerda, fade in para a direita, e temos muito mais coisas de presságio como essas e Então, esses não são tão profissionais. Nesse caso, adicionarei fading left. Assim. Aqui podemos adicionar a duração da animação, então vou torná-la rápida assim. Então, podemos atrasar a animação. Aqui, se você adicionar 1.000, essa animação acontecerá após 1 segundo, mas eu não vou usá-la. Então, aqui temos que adicionar a animação a essa imagem. Aqui, vamos aos efeitos de movimento. A animação de entrada será inserida exatamente assim e, em seguida, a velocidade será passada desta forma. Em seguida, publique isso e vamos vê-lo em ação. Então, agora eu clico em pré-visualizar as alterações e vamos ver, agora vai ser animado assim Então temos esta seção, clique em toda a seção e em Avançar, vá para efeitos de movimento e aqui adicione fading up assim Agora vamos para esta seção e fazer o mesmo. Aqui em efeitos de movimento, adicione fading left como este e aqui adicione motion effxFad Então aqui temos essas duas seções. Na verdade, vamos adicionar animação a toda essa seção. Então clique aqui e, ao avançar no Motion Effex, vamos adicioná-lo desaparecendo Então temos esta seção e, nesta seção, não parece bom se adicionarmos animação a esse plano de fundo. Então, vamos adicionar apenas para esse conteúdo. Então, aqui podemos adicionar essas animações a essa seção de três visualizações, selecioná-la e vamos para o efeito de movimento e aqui, fazer com que desapareça assim, ou talvez vamos adicioná-la como se esmaecesse, certo Não, não Faça com que pareça um fade in E aqui no design atual, não podemos simplesmente adicionar uma animação a esses dois itens. Então, para corrigir isso, terei que criar um novo contêiner como esse e remover o material desse contêiner e apenas adicionar esses dois textos dentro desse contêiner assim. E então eu posso selecionar o recipiente inteiro, e no motion ewx então eu posso adicioná-lo como se estivesse assim Ok, agora temos esta seção, as seções e, com antecedência, vá para os efeitos de movimento e adicione o desvanecimento à esquerda A duração da animação será rápida e vamos adicionar algo a esse formulário desta forma. Muito bom e temos que fazer isso rápido e temos que fazer jejum, este para ser rápido e rápido aqui assim e aqui eu acho que é rápido Vamos ver. É normal, faça isso rápido. E essa seção? Efeito de movimento, não normal, torne-o rápido e rápido. Portanto, sempre tente manter a consistência do site. Dessa forma, você terá um fluxo único em todo o site como este. Ok. Agora, vamos ver isso em ação. Então, vamos lá. Eu só clico aqui e vamos ver, ok, a animação funciona, e quando eu rolar, ela será animada assim. Para o pé, não vou adicionar nenhuma animação. Então, basta adicionar a animação Enranc a essas seções, e essas animações também funcionarão nas versões para celular e tablet 33. Como configurar a matemática para otimização de SEO na página: Olá a todos. Agora é hora de fazer o SCO na página Podemos usar o plug-in Rank MAT para otimizar o SCO do nosso site Então, vamos para Plugin INS e em Plugins, clique em Plugin. Nosso foco é que, se alguém pesquisar nosso site ou pesquisar o nome da nossa empresa no Google, nosso site deve ser exibido no primeiro resultado do Google ou de qualquer outro mecanismo de pesquisa. Então, no Plug Is, clicarei em pesquisar Plugins e pesquisarei aqui o apresentador do Rank MAT OK. Aqui temos o Rank So, agora basta clicar em Instalar agora depois clicar em Ativar. OK. Agora vamos para esta página de configuração e aqui temos que conectar o perfil Rank Max ao Google. Acabei de clicar em Conectar conta. E aqui temos um lugar para fazer o login ou, se você não tiver uma conta Rank Math, você pode clicar em Registrar agora e se registrar ou criar uma conta gratuita do Rank Math. Então, aqui vou usar o Google. Se você tiver um código do Facebook, WordPress, poderá usá-los ou usar apenas o endereço de e-mail para se registrar. No meu caso, eu já tenho uma conta Rank Math, então clico neste botão de login e aqui vou escolher a opção Gmail OK. Agora, aqui, selecionarei meu Gmail e aqui clicarei em ativar agora Agora vamos para este assistente de configuração e aqui vou escolher essa opção fácil, porque não somos profissionais em SOT. A opção easy nos ajudará a configurar esse plugin facilmente, sem nenhum conhecimento profundo sobre SEO Ok, agora eu clico no Start Wizard, e aqui eu tenho que selecionar o tipo de site. No meu caso, esse será um portfólio pessoal. E aqui aparece o nome do nosso site, e eu pularei este site, nome alternativo, e o nome da organização da pessoa será Hannah Clark. Se você selecionar isso como pequena empresa, você terá que adicionar mais coisas no No nosso caso, deve ser portfólio pessoal. Ok, aqui temos que adicionar o logotipo do Google, o tamanho do registro deve ser de um a um para soldar. Atualmente, esse é o logotipo, mas não é e quadrado Então, o que podemos fazer é criar um logotipo quadrado. Para fazer isso, irei ao nosso FigmaFle Okay. Agora, aqui, vou apenas criar uma moldura, basta clicar aqui e clicar assim e agora eu tenho que fazer isso também por uma. Depois vou copiar esse texto e vir aqui e colar assim. Agora vou aumentar o tamanho pressionando Command ou Control e usando a roda do mouse dessa forma, depois diminuirei o tamanho da fonte assim. OK. Agora, o que podemos fazer é certamente tornar esse centro alinhado assim e centralizá-lo . Se eu quiser, posso mudar essa cor branca para essa cor escura Vamos fazer isso rapidamente aqui e na cor de preenchimento, basta selecionar a cor primária e essa cor do texto, vamos selecioná-la como cor secundária. Isso é muito melhor. Agora vou renomear isso como NC e agora em Explorar, selecione o tipo pass JPG e clique em Eu baixei. Agora vamos aqui. Clique em adicionar arquivo de upload e clique aqui, depois baixe ou faça o upload do arquivo baixado. OK. E aqui, vamos adicionar tag ALT e clicar em usar este arquivo, e agora nosso logotipo do Google ficará assim, e agora temos que adicionar a imagem padrão de compartilhamento social. Portanto, seu tamanho deve ser 1206 cem 30. Então, vamos criar outro quadro. Vamos aqui e clicar nesta moldura e clicar aqui. Então aqui, vamos descobrir o tamanho da imagem 1.200 630. Ok, para a web, 1206 30. OK. O social padrão aqui na imagem significa que se alguém compartilhar nosso site em mídias sociais como o Facebook, ele mostrará uma prévia do nosso site. Portanto, a visualização padrão não parecerá boa. Portanto, nessa matemática de classificação, podemos adicionar uma visualização prévia visualização exclusiva e visualização personalizada, e ela será muito profissional. Então, nesta seção, vou apenas selecionar esta seção de heróis e pressionar Command C ou Control C para copiá-la e colá-la assim, então vou colocá-la no centro e agora vou alterá-la como uma prévia social. Agora vou clicar em Exportar e exportar como JBG e clicar no botão Exportar visualização social para baixá-lo e aqui podemos reduzir o tamanho do arquivo Para fazer isso, vou até tiny png.com e vou amarrá-lo com uma corda de dragão assim OK. Clique em baixar para baixar e vamos lá e clique em adicionar Carregar Arquivo e basta fazer o upload do arquivo desta forma. Então, aqui podemos adicionar ALT D e clicar em usar este arquivo para fazer o upload do arquivo. Agora, quando alguém compartilhar link deste site nas redes sociais, a prévia ficará assim. Agora clico em Salvar e continuar e aqui, novamente, preciso conectar os serviços do Google. É para o Google Search Console e outros serviços do Google, como o Google Analytics. Vamos fazer isso agora mesmo. Quando fizermos isso, selecione a conta GML que você planeja usar para o Google Search Console Clique neste botão de conexão dos serviços do Google. Aqui, selecionarei endereço do Gmail e clicarei em Continuar E aqui, clique em Continuar. Agora, aqui podemos conectar o Google Search Console e o Google Analytic Olá, pessoal Enquanto eu crio esta lição, energia acontece depois que eu instalo e configuro completamente a matemática de classificação No entanto, vamos tentar novamente, vamos às configurações e mostrarei passo a passo o que fiz Então, deixe-me ir para o lugar onde paramos. Nós concluímos essa parte. Em seguida, concluímos essa parte. Ok, aqui já estamos conectados o console de busca e o Google Analytics, mas vamos fazer isso de novo. Por enquanto, clicarei nesse botão de reconexão e selecionarei aqui o e-mail para dar acesso Acho que você já completou essa parte. Ok, agora você estará nesta página. Então, aqui, atualmente, isso não é clicável, mas vamos esperar alguns minutos até que fique clicável. Ok, aqui, pode ver seu site e outros sites que atribuem com essa conta GML Então, aqui eu apenas seleciono meu site, que é um design de site personalizado. E aqui temos que habilitar essa guia de status do índice, então ela está habilitada no momento. No entanto, ainda assim, não consigo clicar nele se esse botão não estiver ativado, o que significa esse círculo neste lado, basta clicar nele e ativá-lo depois de clicável Então, vamos para a página Analytics na página Analytics, aqui, selecione minhas análises. E aqui, eu já criei a propriedade. Na verdade, eu gravei esse vídeo duas vezes e em ambas as vezes, essa queda de energia aconteceu, e esta é a terceira vez Então, aqui, basta clicar em criar uma nova propriedade GA four. E aqui você pode ver essa janela pop-up que diz: Tem certeza de que deseja criar uma nova propriedade GA four? Basta clicar em OK e isso criará uma propriedade do GA four ou do Google Analytics. Então aqui, aqui, ele criou uma nova propriedade, e aqui, selecione o fluxo de dados como site. E aqui temos que instalar esse código do Analytics em nosso site para fazer isso, basta clicar nessa caixa de seleção e fazer com basta clicar que ela instale o código de edição. E esse Analytics é o Google Analytics que usei para rastrear os visitantes do nosso site e os detalhes do tráfego do site. Então, se você quiser excluir o usuário de login, o que significa que se você estiver logado neste site e tentar acessar as páginas, você será visto como um visitante. Mas se você marcar isso, você não verá que você é um visitante. Se você não quiser, basta marcar isso, mas por enquanto, eu não vou aceitar, e aqui, isso ainda não está habilitado. Accens é para blogs em sites Então, enquanto esse console de pesquisa e análise são configurados, vamos tentar visitar o Google Search Console e ver sua propriedade. Então, você pode clicar neste botão Saiba mais para saber mais sobre como esse Google Search Console funciona e como configurá-lo. Na minha opinião, vou apenas destacar esse texto e, corretamente, clicar em pesquisar no Google por E aqui vou adicionar o login do Google Search Console. E aqui está a página de login, clique nela. E aqui temos que selecionar o endereço do Gmail que configuramos com nosso site Você clica nele e aqui temos este site, URL, basta clicar nele e, em seguida, vamos dar uma visão geral do Ovie, não temos nenhum resultado, então espere uma semana a semana ou, então espere uma semana a semana às vezes, esse tráfego chegará ao seu site e você verá o resultado no Google Search Console e acesse o mapa do site nos sitemaps. Se você ver este mapa do site enviado, vá, mas se não o vê, mas o plugin Rang Map criará um mapa do site para Podemos simplesmente adicionar esse mapa do site e fazer isso depois de concluirmos a configuração E agora vamos ao Google Analytics e ver se funciona. Então, vou clicar em pesquisar isso, e aqui vou adicionar GA, Google Analytics Go, login do Google Analytics. Vamos adicionar seu login e clicar nesse resultado. Aqui, novamente, tenho que selecionar o usuário. OK. Aqui está a página do Google Analytics que eu configurei, no meu caso está pronta, mas no seu caso, você não verá esse tipo de análise. Se você não vê isso, espere 30 minutos e você verá esse texto. Vamos ver a página de análise que criei na minha última tentativa. Você verá esse tipo de sinal. Portanto, aqui você não verá nenhum usuário ativo ; portanto, basta verificar se o código do Google Analytics funciona em seu site acessando a janela InCopnTO e visitando seu Então, vamos verificar a atividade. Então aqui, se você ainda não vê a atividade, basta clicar neste botão e pegar essa antiguidade, fazer coisas assim e depois ir para casa Em casa, se você ainda não o vê, é só esperar e tranquilizar um site como este Se você usa a conexão de caixas no meu caso, eu uso esse cache de velocidade da luz Então vá para o cache e clique em Perch A e tente novamente assim e veja se funciona Em seguida, vamos aos relatórios sobre relatórios. Podemos criar nosso instantâneo do pote. Então, usando esta seção, podemos ver os detalhes sobre o comportamento do usuário. Então, aqui temos três opções. No nosso caso, devemos selecionar esse primeiro, comportamento do usuário, e você pode clicar em Visualizar modelo e ver a aparência dele. Então, aqui vai ficar assim. Então, basta clicar em, escolher este modelo. E quando você configurar seu Google Analytics corretamente, você verá o resultado lá. Então, no meu caso, vamos ao primeiro que eu já instalei, e aqui estão os detalhes. Então, vamos para três relatórios, você pode ver esse tipo de detalhe. Depois de configurarmos isso com sucesso, podemos clicar em Salvar e continuar no relatório de e-mail Vou desmarcá-lo porque não preciso do relatório de e-mail e, se ainda não for clicável e estiver desativado, aguarde alguns minutos ou clique em Salvar e continuar e podemos fazer isso Em seguida, clicarei em retornar ao painel. E aqui, se você não vê o mapa do site dessa forma, basta atualizá-lo algumas vezes e, se ainda não o vê, você pode ir para algumas vezes e, se ainda não o vê, você a configuração GRA na configuração geral, clicar em Analytics, e aqui você pode ativar essa guia de status do índice como esta, e então você pode clicar nas configurações do mapa do site, e aqui está o site do UR, URL do mapa do site Então, clique com o botão direito do mouse e clique em Copiar endereço do link e clique aqui. Em seguida, basta adicioná-lo assim. E aqui está o URL do nosso site, e aqui está o URL do mapa do site, basta clicar em enviar depois de enviá-lo, você pode ver o mapa do site subenviado aqui, e enviar esse mapa do site ajudará você a indexar seu site rapidamente e aqui está o URL do mapa do site, basta clicar em enviar depois de enviá-lo, você pode ver o mapa do site subenviado aqui, e enviar esse mapa do site ajudará você a indexar seu site rapidamente no Google. OK. Agora vamos examinar os recursos do Rang Math SO Vamos de painel em painel, não temos nada para fazer, e a IA de conteúdo é um recurso premium. Nesse caso, usamos a versão gratuita do rank Math, e a página de análise não é necessária porque podemos verificar as análises no Google Analytics e a página de análise também é compatível com a versão paga. E aqui, vamos clicar na configuração geral. Portanto, nessa configuração geral, mantenha os valores padrão, não altere os valores. Então, vamos ver o título e a meta aqui. Sempre faça esse meta-índice de robôs. Então, se você clicar aqui sem índice, seu site não será indexado no Google, então não marque este. Sempre marque o índice. Em seguida, no caractere separador, você pode alterá-lo se quiser Vou manter o padrão e aqui você pode usar se quiser capitalizar o título que aparece no Google Então, no SEO local, já enviamos esses detalhes enquanto configuramos o plugin Frank Math. E aqui podemos adicionar o URL da página do Facebook, e aqui podemos adicionar um perfil adicional, link ao vivo, TIN ou perfil do Instagram. Então, se você tem um perfil no LinkedIn, basta adicionar seu perfil in.com e, se você também tiver, vamos ver, conta no Twitter, diga.com, como nesta barra Assim, você pode adicionar outros perfis. Quando você adiciona mais de um, você pode simplesmente adicioná-los em uma nova linha como esta. OK. Em seguida, página inicial na página inicial, temos que clicar nesta página de edição inicial para editar A página inicial, pré-visualização do ranking do Google para fazer isso, clique com o pré-visualização do ranking do Google para fazer isso, botão direito aqui e clique em Abrir link em Ok, agora estou na página inicial e esse é o editor do Wordpress E aqui o que podemos fazer é clicar nesta barra de opções e, aqui, selecionar este mapa de classificação. Ok, agora temos que adicionar a palavra-chave focus. Como eu disse antes, eu já fiz. É por isso que a palavra-chave de foco já está lá, então eu a removerei e adicionarei a palavra-chave de foco desta forma. E então aqui está a prévia no Google e aqui está a análise nas mídias sociais e aqui está a prévia do Facebook, aqui está a prévia do Twitter. Você se lembra de que adicionamos essa imagem em miniatura para mídias sociais e aqui clique em Geral e aqui esta será a prévia do Google e podemos alterar essa visualização editando o Atualmente, nosso título é Hannah Clark em como Clark, acabei de alterá-lo e podemos adicionar esse título e garantir que seu título tenha apenas 60 caracteres, porque no Google, ele mostra apenas os primeiros Depois de uma descrição, podemos adicionar essa descrição e, para descrição ou descrição do resultado da pesquisa, sempre adicione a palavra-chave principal. Nesse caso, a palavra-chave principal é Hanna Clark. Caramba, eu sou Anna Clark. Você está pronto para transformar seu filho nessa descrição, adicione apenas 160 caracteres pois se você adicionar mais de 60 caracteres, ela não será exibida no Google. Então, aqui, vai ficar assim, e eu vou fechá-lo. E nas configurações, a palavra-chave em foco é essa, e aqui temos problemas Depois de concluí-la, basta clicar em salvar e ela será salva na sua página. Depois de salvá-lo, podemos ir até aqui, aqui, temos o autor, basta mantê-lo padrão porque não temos autores aqui, talvez desativá-lo . Bom porque este site não tem autores e, aqui, mantenha o padrão detest, mantenha o padrão detest, e se você quiser ver o título da postagem de forma diferente, você pode adicionar esse texto aqui, mas mantê-los como padrão é a maneira mais fácil e páginas, se você quiser alterar a revisão da sua página no resultado do Google, você pode alterar esses detalhes, mas eu os manterei como padrão. E se você clicar aqui, poderá ver as condições ou o código de atalho que você pode adicionar, mas não vamos mudar nada E nas categorias, não temos categorias e não temos tags, basta mantê-las como padrão. Clique em Salvar alterações se você fizer alguma alteração. Em seguida, a configuração do mapa do site, já estamos enviando o mapa do site e, em seguida, o item importante é esse analisador de SCO Portanto, verifique o escopo de SCO do seu site e você pode clicar neste analisador de SEO para reiniciar ou clicar neste analisador de SEO para analisar esses dados E se você ver um SoScoe mais baixo, você pode ir aqui e com prioridade Se você não ativou as atualizações automáticas, basta clicar em ativar atualizações automáticas, e aqui temos a descrição U básica U e H uma tag H duas Então, se você não vê assim, por exemplo, aqui você tem muitos títulos H dois, o que você pode fazer é ir para a página inicial. Imagine se você tem duas tags H um ou se você não tem nenhuma tag H um, tem muitas tags H duas para corrigi-lo, você pode ir para a Vou apenas clicar em Editar com Eleanor nesta página inicial OK. Agora, aqui, vamos ver as principais edições No meu caso, essa tag HTML é H one, o que significa que temos uma tag H one para o site. Portanto, a página da web tem apenas uma tag H ou um título, uma tag E aqui, isso é no H três, e aqui, isso é gratuito. Você pode mudar essas coisas. Então, se você se lembra, quando criamos este site, eu disse para você sempre atribuir a tag HTML porque essa é uma prática recomendada de SEO. E aqui, se verificarmos este, é H dois e este é H três, e este é um parágrafo. No gás, se você tiver muitas tags H duas, basta adicionar apenas duas tags para os títulos das seções e criar outras como tag do parágrafo quatro H três, H quatro, H cinco ou H seis Espero que você entenda e depois de fazer essas alterações, clique em publicar, então você pode clicar neste analisador de reinicialização e sempre tentar manter pelo menos 80 ou 80 ou Aqui você pode verificar as gravações e aqui está escrito que não tenho slogans laterais, então podemos simplesmente clicar aqui e clicar em abrir uma nova guia, e aqui temos dois problemas Aqui eu digo palavras-chave de foco. Ainda existem duas páginas sem palavras-chave focadas, basta escrever, clicar e abri-las na janela e no personalizador, podemos acessar a identidade lateral e aqui podemos adicionar o slogan Eu já adicionei o slogan, posso adicionar o slogan aqui. Então, sobre essa mensagem, há duas páginas sem foco, sem nenhuma palavra-chave de foco. Portanto, se verificarmos essas duas páginas, teremos a política de privacidade e os termos e condições. Portanto, não precisamos adicionar a palavra-chave de foco a essas duas páginas porque não precisamos classificá-las no Google, então podemos ignorar esse problema. E aqui temos o título do host sem palavras-chave de foco. Basta clicar nela e ela estará na página inicial, e também conhecemos essa mensagem porque alteramos o título e a descrição da página inicial por meio do Rank Man, e não precisamos alterar esse título a partir daqui. OK. Depois de fazer todas as alterações, clicarei em Reiniciar o SO Analyzer e, em seguida, verei o SO SCO Ainda assim, mostro o mesmo resultado, mas esse SCO é muito bom para classificar nosso site no mecanismo de busca Então é assim que podemos usar o Rank Math para fazer na página SCO em nosso site 34. Configurando o plugin de cache LiteSpeed para acelerar o site: Olá, pessoal. Agora vamos aumentar a velocidade da página do site no ESCO. Para fazer isso, primeiro, vamos acessar a velocidade interna da página do Google. Eu simplesmente vou ao Google e pesquiso no Google PageSpeed, e aqui temos Clique nele e aqui podemos adicionar o URL do nosso site, paginar o URL do site e clicar em Analisar. Ok, no celular, seu desempenho é 74, e vamos ver o desktop, desktop é 92, e esse é um desempenho muito bom. No entanto, vamos melhorar isso melhor. Para fazer isso, vamos ao painel do WordPress e vamos conectar e adicionar o plugin. E vamos usar o plugin de cache Light Speed. Nos plug-ins de pesquisa, pesquisarei o cache do Light Speed. Aqui temos o cache do Light Speed, clique em Instalar agora e clique em Ativar. O plugin foi ativado com sucesso e podemos ver aqui Lightspeed, plugin de cache, ícone e aqui, temos o cache Light Speed Vou apenas acessar o painel no painel, temos esse tipo de design. Primeiro, clicarei neste serviço de habilitação rápida em nuvem, clicarei em e entrarei nesta página e aqui terei que criar uma conta Então, vou clicar na Opção Google e me registrar no Google. Primeiro, preciso clicar neste botão para fazer um acordo, depois clicar na conta do Gmail para me registrar e aqui, clicarei nessa configuração de finalização de tinta e voltarei ao Wordpress, então posso ver esse tipo de janela agora, e aqui vou clicar em page speed disco to fps e vamos ver Isso levará algum tempo. Agora, digamos que antes de 91 após 91, eu clicarei neste botão gratuito para verificar o tempo de carregamento da página Na verdade, a velocidade da página é muito boa e aqui está o tempo de carregamento da página aqui, carregue D em 0,58 segundos e, um por um, configure a guia corretamente Primeiro, vou para a predefinição. Na predefinição, podemos configurar ou aplicar a predefinição padrão, basta clicar nesta predefinição de aplicação , mas eu não vou fazer Vou pular essa guia e vamos para o geral em geral, vou para a configuração geral vou para a configuração geral e aqui, atualmente, o modo convidado está desativado, eu o ativarei e manterei otimização de convidado desativada . Para o IP do servidor, clicarei aqui para verificar meu IP público e aqui está o IP Vou apenas copiá-lo, depois vou colar aqui assim. Em seguida, desligarei a notificação. Ao ajustar, manterei os detalhes padrão e agora clicarei em Salvar alterações. Ok, agora temos essa guia de cache. Vamos para a guia Cache. Ok, agora temos que configurar essas guias. Então, aqui habilite o cache e desative o cache de usuários conectados ou desative-o e guarde outros itens Então, aqui, ative o Cash mobile e pronto. Clique em Salvar e, ao fazer alterações, sempre tente verificar seu site na janela anônima, pois essas configurações podem danificar Portanto, sempre tente verificar seu site na janela anônima. E no DTL, vou manter o depósito e, em vez disso, manter o depósito, exclua se você tiver uma URL ou página específica que não queira usar em cache, você pode adicionar essa URL aqui e, por enquanto, eu a ignorarei, e o resto da guia será um EIS, mantenha o objeto padrão, mantenha os dados e o navegador padrão o depósito, exclua se você tiver uma URL ou página específica que não queira usar em cache, você pode adicionar essa URL aqui e, por enquanto, eu a ignorarei, e o resto da guia será um EIS, mantenha o objeto padrão, mantenha os dados e o navegador padrão. Clique no cache do navegador e em Avançado basta criar um padrão e depois clicar em Salvar alterações. OK. Agora, novamente, clique aqui e verifique seu site na janela anônima Escreva isso e veja se ele quebra, funciona perfeitamente. E então temos o CDN. Na CDN, podemos configurar uma tarifa rápida de nuvem ou nuvem, mas neste caso, eu não vou fazer isso, então temos a otimização de imagem Otimização de imagem, clique em enviar solicitação de otimização e faça isso até ver a caixa Ti aqui. Atualmente, é de 7% e, se eu tentar novamente, diz que você tem uma imagem esperando para ser retirada, então tente fazer isso no dia seguinte, faça isso até otimizar completamente suas imagens. E na configuração de otimização de imagem, clique neste Cron de solicitação automática Quando você fizer isso, a função Cron otimizará automaticamente suas imagens, para que você não precise clicar nela repetidamente. Aqui, o formato de imagem de próxima geração, torne-o web P, preservando os dados EXIV XMP otimizar as imagens originais, ativá-las, não fazer backup e depois descer. Para este item, basta ativá-lo e clicar em Salvar alterações Então temos a otimização da página. Ok, como eu disse antes, quando você trabalha neste plugin, sempre, clique no perche Earl depois de fazer qualquer alteração, especialmente na otimização da página Em seguida, verifique o site na janela anônima e, se houver algum problema, você pode corrigi-lo imediatamente desfazendo as alterações feitas no cache da velocidade da luz Ok, aqui temos o CSS minify e CSS combinados que estarão alinhados neste CSS, faça com que ele carregue o CSS e ative isso e a otimização da exibição da fonte será padrão Em seguida, clique em Salvar alterações e clique em poleiro A. Em seguida, vá para a janela Incoto e reprima a página, o site e marque com breakof Não , está funcionando para fraco, aqui temos As estrelas não estão aparecendo, vamos corrigir isso na próxima lição. Agora vamos para a configuração Js na configuração Js, Js minify estará em Js combine e manterá outras coisas como padrão, clique em salvar alterações e limpar tudo, clique aqui, confira aqui, veja, ajuste, funcione bem sem funcionar bem e, em seguida, vá para SDM team table minify, vá para SDM team table minify aqui, remove ou Prismog e salve as alterações, depois clique em urge all now na configuração de mídia aqui, depois clique em urge um espaço reservado responsivo e você pode alterar a cor do espaço reservado responsivo Vou manter a cor padrão. Faça essa carga lenta em que eu enquadro. Atualmente, não temos nenhum quadro de I em nosso site. No entanto, crie e adicione tamanhos, coloque aqui a qualidade de imagem do Wordpress, faça 83, e se você adicionar isso como 50 ou algo menos que 83 82, a qualidade da imagem será significativamente de rádio, não faça isso. Ok, então temos esse padrão Ike e aqui excluímos. Se houver uma mídia ou se houver alguma imagem que você queira excluir do carregamento lento, basta adicionar essa imagem As imagens e o conteúdo de carregamento lento serão carregados quando o visitante rolar o site até essa seção Como exemplo aqui, se eu rolar para baixo, essa imagem não carregará até que eu veja esta seção como esta. Então temos essa localização e Gravatacas no caso Gravatá. Pronto, então, ajustando, basta manter a configuração padrão. Em seguida, o CSS também mantém a configuração do depósito, então temos o banco de dados do banco de dados do banco de dados, podemos limpar as revisões e expirações forçadas e outros arquivos inúteis, o registro inútil criado no banco inúteis, o registro Você pode simplesmente clicar nesse limpador se não precisar desse rascunho automático e outras coisas, ou pode simplesmente clicar um por um para removê-los. Na otimização do banco de dados, basta manter o depósito. Então aqui temos o rastreador, mas não precisamos fazer nada lá e a caixa de ferramentas também está na caixa de ferramentas, não há nada a fazer por nós, e isso é tudo o que podemos fazer no plugin de cache de velocidade da luz Agora vamos reprimir esse disco de velocidade da página e o tempo de carregamento da página Vamos reprimir esta página speed disco e ver o que vai acontecer Então, podemos tentar isso na velocidade da página interna, e aqui a velocidade da página ICO é 90, mas não fizemos nenhuma melhoria. Acho que o motivo é que esse plugin já está instalado no site. Esse pode ser o anúncio, mas aumentamos o tempo de carregamento da página. Aqui, ainda é 74 e aqui está 96, e esse é um desempenho muito bom. E aqui está como melhorar a velocidade do seu site e nos vemos na próxima lição. 35. Como corrigir o problema da exibição de Emoji no seu site: Aqui temos esse problema. Quando saímos do nosso site, os ícones das estrelas não aparecem, então vamos corrigir isso. Para corrigir isso, vou até os plug-ins, clico em and e pesquiso o Código ISNIP e instalarei esse plug-in de código WP. Ok, acabou de ser instalado, e então eu vou para Instalar, plugin e aqui ativar o código WP, plugin light E aqui agora eu posso adicionar código, para que você não precise codificá-lo. Eu fornecerei o código, então basta clicar no código aqui e clicar em Adicionar novo. partir daqui, clique em Custom Snip e selecione PHP Snip e aqui eu darei um código, basta verificar a seção de recursos e colocar esse código assim e, em seguida, clicar nele ativo e clicar em Salvar Snip Antes de clicar nele, simplesmente não adicione nenhuma outra coisa apenas adicione este código, eu recomendo Se você adicionar outras coisas, seu site não funcionará. Em seguida, clique em Salvar SNIP Okay. Agora, se eu for codificar esse nip, aqui, eu posso ver que esse ativo está cortado, vamos editar isso e adicionar algum título a isso, é nip. Ficará claro quando alguém tentar verificar nosso site, vou apenas adicionar esse texto e clicar em Atualizar para atualizá-lo Ficará claro quando alguém tentar verificar nosso site, vou apenas adicionar esse texto e clicar em Atualizar para atualizá-lo Agora, o que eu faço é ir para elementos e ferramentas. E se o seu site mostrar corretamente esses ícones, você não precisa passar por esta lição. E aqui vou clicar em limpar arquivos e dados. OK. Em seguida, clique também neste botão de sincronização da Biblioteca e , em seguida, aqui e em Light Speed, clique em purgar A. Em seguida, vamos abrir este site em uma janela anônima e ver se ele funciona Agora está funcionando perfeitamente e agora temos um site totalmente projetado. 36. Projeto de curso: Olá, pessoal. Parabéns. Você criou com sucesso este site de portfólio para coach de negócios e agora é hora do seu projeto de classe. Em seu projeto de classe, abra este site de portfólio universal e selecione portfólio feminino ou design de site de portfólio no FICMA e altere o conteúdo do texto acordo com seu tipo de portfólio Crie um portfólio para você ou para uma persona ou personagem fictício que você gosta de criar um site de portfólio, para ele possa ser um coach, empresário, estúdio ou quem Então, basta alterar esse conteúdo e criar sua própria versão. Assim, você pode alterar a cor do texto de acordo com sua necessidade. Então, aqui, se você não gosta dessa cor primária, basta clicar assim e clicar aqui, editar esse estilo, e aqui você pode simplesmente alterar essa cor. Quando você mudar essa cor, vamos torná-la vermelha. Isso afetará todo o design dessa forma. Então, basta brincar e criar sua própria versão do site e compartilhá-la no projeto da turma dessa forma. Podemos verificar e dar nosso feedback. Então, nesta aula, espero que você aprenda coisas valiosas e nos vemos na próxima aula.